npm - @waggylabs/yumekit - Versions diffs - 0.4.3 → 0.4.4 - Mend

@waggylabs/yumekit 0.4.3 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +32 -0
package/dist/components/y-appbar/y-appbar.d.ts +22 -15
package/dist/components/y-appbar.d.ts +22 -15
package/dist/components/y-appbar.js +659 -454
package/dist/components/y-badge/y-badge.d.ts +1 -1
package/dist/components/y-badge.d.ts +1 -1
package/dist/components/y-badge.js +31 -15
package/dist/components/y-menu/y-menu.d.ts +57 -1
package/dist/components/y-menu.d.ts +57 -1
package/dist/components/y-menu.js +477 -158
package/dist/index.js +693 -462
package/dist/yumekit.min.js +1 -1
package/llm.txt +43 -12
package/package.json +1 -1

package/dist/yumekit.min.js CHANGED Viewed

	@@ -1 +1 @@
1	- var YumeKit=function(e){"use strict";const n=new Map;function t(e){for(const[t,r]of Object.entries(e))n.set(t,r)}function r(e){return n.get(e)\|\|""}var o='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"/>\n <polyline points="19 12 12 19 5 12"/>\n</svg>\n',a='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="19" x2="12" y2="5"/>\n <polyline points="5 12 12 5 19 12"/>\n</svg>\n',i='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="5 13 10 17 19 6"/>\n</svg>\n',s='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="6 9 12 15 18 9"/>\n</svg>\n',c='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="9 18 15 12 9 6"/>\n</svg>\n',l='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">\n <line x1="7" y1="7" x2="17" y2="17"/>\n <line x1="17" y1="7" x2="7" y2="17"/>\n</svg>\n',d='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <circle cx="5" cy="12" r="1.5"/>\n <circle cx="12" cy="12" r="1.5"/>\n <circle cx="19" cy="12" r="1.5"/>\n</svg>\n',p='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <circle cx="12" cy="5" r="1.5"/>\n <circle cx="12" cy="12" r="1.5"/>\n <circle cx="12" cy="19" r="1.5"/>\n</svg>\n',h='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="11 17 6 12 11 7"/>\n <polyline points="18 17 13 12 18 7"/>\n</svg>\n',b='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="13 17 18 12 13 7"/>\n <polyline points="6 17 11 12 6 7"/>\n</svg>\n',u='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="4" y1="6" x2="20" y2="6"/>\n <line x1="4" y1="12" x2="20" y2="12"/>\n <line x1="4" y1="18" x2="20" y2="18"/>\n</svg>\n',v='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" rx="1" ry="1" fill="currentColor"/></svg>\n';t({accessibility:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="4" r="1.5"/>\n <path d="M7 8h10"/>\n <path d="M12 8v4"/>\n <path d="m8 20 4-8 4 8"/>\n</svg>\n',ai:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 8V4H8"/>\n <rect width="16" height="12" x="4" y="8" rx="2"/>\n <path d="M2 14h2M20 14h2M15 13v2M9 13v2"/>\n</svg>\n',archive:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="21 8 21 21 3 21 3 8"/>\n <rect x="1" y="3" width="22" height="5" rx="1"/>\n <line x1="10" y1="12" x2="14" y2="12"/>\n</svg>\n',"arrow-down":o,"arrow-left":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="19" y1="12" x2="5" y2="12"/>\n <polyline points="12 19 5 12 12 5"/>\n</svg>\n',"arrow-right":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="5" y1="12" x2="19" y2="12"/>\n <polyline points="12 5 19 12 12 19"/>\n</svg>\n',"arrow-up":a,bug:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M8 2l1.88 1.88"/>\n <path d="M14.12 3.88L16 2"/>\n <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/>\n <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6z"/>\n <path d="M12 20v-9"/>\n <path d="M6.53 9C4.6 8.8 3 7.1 3 5"/>\n <path d="M6 13H2"/>\n <path d="M3 21c0-2.1 1.7-3.9 3.8-4"/>\n <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/>\n <path d="M22 13h-4"/>\n <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/>\n</svg>\n',ban:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>\n</svg>\n',bell:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>\n <path d="M13.73 21a2 2 0 0 1-3.46 0"/>\n</svg>\n',bluetooth:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5"/>\n</svg>\n',bolt:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>\n</svg>\n',briefcase:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>\n <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>\n</svg>\n',bookmark:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>\n</svg>\n',calendar:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>\n <line x1="16" y1="2" x2="16" y2="6"/>\n <line x1="8" y1="2" x2="8" y2="6"/>\n <line x1="3" y1="10" x2="21" y2="10"/>\n <rect x="7" y="14" width="3" height="3" rx="0.5"/>\n <rect x="14" y="14" width="3" height="3" rx="0.5"/>\n</svg>\n',campfire:'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M3 21L15 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M21 21L9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n</svg>\n',chart:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>\n</svg>\n',check:i,"circle-exclamation":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="12" y1="8" x2="12" y2="12"/>\n <line x1="12" y1="16" x2="12.01" y2="16"/>\n</svg>\n',"circle-info":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="12" y1="16" x2="12" y2="12"/>\n <line x1="12" y1="8" x2="12.01" y2="8"/>\n</svg>\n',"circle-question":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>\n <line x1="12" y1="17" x2="12.01" y2="17"/>\n</svg>\n',"chevron-down":s,"chevron-left":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="15 18 9 12 15 6"/>\n</svg>\n',"chevron-right":c,"chevron-up":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="18 15 12 9 6 15"/>\n</svg>\n',clock:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <polyline points="12 6 12 12 16 14"/>\n</svg>\n',close:l,cloud:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>\n</svg>\n',code:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="16 18 22 12 16 6"/>\n <polyline points="8 6 2 12 8 18"/>\n</svg>\n',comments:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>\n</svg>\n',"comp-appbar":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="3" width="20" height="5" rx="1.5"/>\n <line x1="4" y1="13" x2="20" y2="13"/>\n <line x1="4" y1="17" x2="15" y2="17"/>\n <line x1="4" y1="21" x2="10" y2="21"/>\n</svg>\n',"comp-avatar":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <circle cx="12" cy="10" r="3"/>\n <path d="M6 20.5c0-3 2.7-5.5 6-5.5s6 2.5 6 5.5"/>\n</svg>\n',"comp-badge":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="6" width="16" height="16" rx="2"/>\n <circle cx="20" cy="5" r="3.5"/>\n</svg>\n',"comp-button":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="10" rx="3"/>\n <line x1="8" y1="12" x2="16" y2="12"/>\n</svg>\n',"comp-card":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="2" width="18" height="20" rx="2"/>\n <line x1="3" y1="8" x2="21" y2="8"/>\n <line x1="7" y1="12" x2="17" y2="12"/>\n <line x1="7" y1="16" x2="13" y2="16"/>\n</svg>\n',"comp-checkbox":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="18" height="18" rx="3"/>\n <polyline points="7 12.5 10.5 16 17 8"/>\n</svg>\n',"comp-date":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="10" rx="2"/>\n <line x1="5" y1="12" x2="11" y2="12"/>\n <rect x="14" y="9" width="6" height="6" rx="1"/>\n <line x1="14" y1="12" x2="20" y2="12"/>\n</svg>\n',"comp-dialog":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="5" width="18" height="14" rx="2"/>\n <line x1="7" y1="9" x2="17" y2="9"/>\n <line x1="7" y1="13" x2="13" y2="13"/>\n</svg>\n',"comp-drawer":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="3" width="20" height="18" rx="2"/>\n <line x1="9" y1="3" x2="9" y2="21"/>\n <line x1="4" y1="8" x2="7" y2="8"/>\n <line x1="4" y1="12" x2="7" y2="12"/>\n</svg>\n',"comp-icon":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 2c0 5.52-4.48 10-10 10 5.52 0 10 4.48 10 10 0-5.52 4.48-10 10-10-5.52 0-10-4.48-10-10z"/>\n</svg>\n',"comp-input":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="6" width="20" height="12" rx="2"/>\n <line x1="6" y1="10" x2="6" y2="14"/>\n</svg>\n',"comp-menu":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="2" width="18" height="20" rx="2"/>\n <line x1="7" y1="7" x2="17" y2="7"/>\n <line x1="7" y1="12" x2="17" y2="12"/>\n <line x1="7" y1="17" x2="17" y2="17"/>\n</svg>\n',"comp-panelbar":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="2" width="20" height="20" rx="2"/>\n <line x1="2" y1="9" x2="22" y2="9"/>\n <line x1="2" y1="16" x2="22" y2="16"/>\n</svg>\n',"comp-progress":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="8" width="20" height="8" rx="4"/>\n <line x1="6" y1="12" x2="13" y2="12" stroke-width="3" stroke-linecap="round"/>\n</svg>\n',"comp-radio":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/>\n</svg>\n',"comp-select":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="10" rx="2"/>\n <line x1="6" y1="12" x2="13" y2="12"/>\n <polyline points="16 10 18 13 20 10"/>\n</svg>\n',"comp-slider":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="2" y1="12" x2="22" y2="12"/>\n <circle cx="15" cy="12" r="4"/>\n</svg>\n',"comp-switch":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="6" width="20" height="12" rx="6"/>\n <circle cx="16" cy="12" r="4"/>\n</svg>\n',"comp-table":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="3" width="20" height="18" rx="2"/>\n <line x1="2" y1="9" x2="22" y2="9"/>\n <line x1="2" y1="15" x2="22" y2="15"/>\n <line x1="10" y1="3" x2="10" y2="21"/>\n</svg>\n',"comp-tabs":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="9" width="20" height="12" rx="2"/>\n <path d="M5 9V6a1.5 1.5 0 0 1 1.5-1.5h5A1.5 1.5 0 0 1 13 6v3"/>\n <line x1="16" y1="6" x2="20" y2="6"/>\n</svg>\n',"comp-tag":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="10" rx="5"/>\n <line x1="15" y1="10" x2="17" y2="14"/>\n <line x1="17" y1="10" x2="15" y2="14"/>\n</svg>\n',"comp-theme":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <path d="M12 2a10 10 0 0 1 0 20z" fill="currentColor"/>\n</svg>\n',"comp-toast":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="7" width="18" height="10" rx="2"/>\n <circle cx="8" cy="12" r="2"/>\n <line x1="12" y1="12" x2="18" y2="12"/>\n</svg>\n',"comp-tooltip":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5l-2 4-2-4H5a2 2 0 0 1-2-2z"/>\n</svg>\n',"comp-textarea":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="18" height="18" rx="2"/>\n <line x1="7" y1="8" x2="17" y2="8"/>\n <line x1="7" y1="12" x2="17" y2="12"/>\n <line x1="7" y1="16" x2="13" y2="16"/>\n <line x1="15" y1="19" x2="19" y2="15"/>\n <line x1="18" y1="19" x2="19" y2="18"/>\n</svg>\n',"comp-rating":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03"/>\n <polygon points="12,9 12.71,11.03 14.85,11.07 13.14,12.37 13.76,14.43 12,13.2 10.24,14.43 10.86,12.37 9.15,11.07 11.29,11.03"/>\n <polygon points="19,9 19.71,11.03 21.85,11.07 20.14,12.37 20.76,14.43 19,13.2 17.24,14.43 17.86,12.37 16.15,11.07 18.29,11.03" fill="currentColor" stroke="none"/>\n</svg>\n',compass:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>\n</svg>\n',copy:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>\n <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>\n</svg>\n',diagram:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="6" height="6" rx="1"/>\n <rect x="15" y="3" width="6" height="6" rx="1"/>\n <rect x="9" y="15" width="6" height="6" rx="1"/>\n <line x1="6" y1="9" x2="6" y2="15"/>\n <line x1="6" y1="15" x2="9" y2="15"/>\n <line x1="18" y1="9" x2="18" y2="15"/>\n <line x1="18" y1="15" x2="15" y2="15"/>\n</svg>\n',discord:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028z"/>\n</svg>\n',"down-from-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M3 9V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4"/>\n <polyline points="7 16 12 21 17 16"/>\n <line x1="12" y1="9" x2="12" y2="21"/>\n</svg>\n',"down-to-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>\n <polyline points="7 10 12 15 17 10"/>\n <line x1="12" y1="15" x2="12" y2="3"/>\n</svg>\n',"ellipsis-h":d,"ellipsis-v":p,"ev-charger":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="2" width="12" height="20" rx="2"/>\n <path d="M14 8h2a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2v-7"/>\n <line x1="20" y1="8" x2="22" y2="8"/>\n <polyline points="9 7 7 12 9 12 7 17"/>\n</svg>\n',"expand-down":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="17 13 12 18 7 13"/>\n <polyline points="17 6 12 11 7 6"/>\n</svg>\n',"expand-left":h,"expand-right":b,"expand-up":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="17 11 12 6 7 11"/>\n <polyline points="17 18 12 13 7 18"/>\n</svg>\n',"face-frown":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <path d="M16 16s-1.5-2-4-2-4 2-4 2"/>\n <line x1="9" y1="9" x2="9.01" y2="9"/>\n <line x1="15" y1="9" x2="15.01" y2="9"/>\n</svg>\n',"face-neutral":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="8" y1="14" x2="16" y2="14"/>\n <line x1="9" y1="9" x2="9.01" y2="9"/>\n <line x1="15" y1="9" x2="15.01" y2="9"/>\n</svg>\n',"face-smile":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <path d="M8 14s1.5 2 4 2 4-2 4-2"/>\n <line x1="9" y1="9" x2="9.01" y2="9"/>\n <line x1="15" y1="9" x2="15.01" y2="9"/>\n</svg>\n',fan:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="2"/>\n <path d="M12 10c0-4-2.5-7-5-7s-3 2.5-1 5c1 1.5 3 2 4 2"/>\n <path d="M14 12c4 0 7-2.5 7-5s-2.5-3-5-1c-1.5 1-2 3-2 4"/>\n <path d="M12 14c0 4 2.5 7 5 7s3-2.5 1-5c-1-1.5-3-2-4-2"/>\n <path d="M10 12c-4 0-7 2.5-7 5s2.5 3 5 1c1.5-1 2-3 2-4"/>\n</svg>\n',"fast-back":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="11 19 2 12 11 5 11 19"/>\n <polygon points="22 19 13 12 22 5 22 19"/>\n</svg>\n',"fast-forward":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="13 19 22 12 13 5 13 19"/>\n <polygon points="2 19 11 12 2 5 2 19"/>\n</svg>\n',flower:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="3"/>\n <path d="M12 2a4 4 0 0 1 0 8 4 4 0 0 1 0-8z"/>\n <path d="M12 14a4 4 0 0 1 0 8 4 4 0 0 1 0-8z"/>\n <path d="M2 12a4 4 0 0 1 8 0 4 4 0 0 1-8 0z"/>\n <path d="M14 12a4 4 0 0 1 8 0 4 4 0 0 1-8 0z"/>\n <path d="M4.93 4.93a4 4 0 0 1 5.66 5.66 4 4 0 0 1-5.66-5.66z"/>\n <path d="M13.41 13.41a4 4 0 0 1 5.66 5.66 4 4 0 0 1-5.66-5.66z"/>\n <path d="M13.41 4.93a4 4 0 0 1 5.66 5.66 4 4 0 0 1-5.66-5.66z"/>\n <path d="M4.93 13.41a4 4 0 0 1 5.66 5.66 4 4 0 0 1-5.66-5.66z"/>\n</svg>\n',figma:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/>\n <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/>\n <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>\n <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/>\n <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/>\n</svg>\n',filter:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>\n</svg>\n',flask:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/>\n <path d="M8.5 2h7"/>\n <path d="M7 16h10"/>\n</svg>\n',folder:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z"/>\n</svg>\n',gasoline:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M3 22V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/>\n <line x1="2" y1="22" x2="14" y2="22"/>\n <path d="M13 8h2a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9l-3-4"/>\n <line x1="19" y1="5" x2="21" y2="9"/>\n <rect x="6" y="9" width="6" height="4" rx="1"/>\n</svg>\n',github:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>\n</svg>\n',globe:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="2" y1="12" x2="22" y2="12"/>\n <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>\n</svg>\n',heart:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>\n</svg>\n',grid:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="7" height="7" rx="1"/>\n <rect x="14" y="3" width="7" height="7" rx="1"/>\n <rect x="3" y="14" width="7" height="7" rx="1"/>\n <rect x="14" y="14" width="7" height="7" rx="1"/>\n</svg>\n',home:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>\n <polyline points="9 22 9 12 15 12 15 22"/>\n</svg>\n',image:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>\n <circle cx="8.5" cy="8.5" r="1.5"/>\n <polyline points="21 15 16 10 5 21"/>\n</svg>\n',layout:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>\n <line x1="3" y1="9" x2="21" y2="9"/>\n <line x1="9" y1="21" x2="9" y2="9"/>\n</svg>\n',"left-from-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>\n <polyline points="14 7 9 12 14 17"/>\n <line x1="9" y1="12" x2="21" y2="12"/>\n</svg>\n',"left-to-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>\n <polyline points="16 17 21 12 16 7"/>\n <line x1="21" y1="12" x2="9" y2="12"/>\n</svg>\n',link:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>\n <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>\n</svg>\n',"list-bullet":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="5" cy="7" r="1" fill="currentColor" stroke="none"/>\n <circle cx="5" cy="12" r="1" fill="currentColor" stroke="none"/>\n <circle cx="5" cy="17" r="1" fill="currentColor" stroke="none"/>\n <line x1="9" y1="7" x2="20" y2="7"/>\n <line x1="9" y1="12" x2="20" y2="12"/>\n <line x1="9" y1="17" x2="20" y2="17"/>\n</svg>\n',"list-check":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="10" y1="6" x2="21" y2="6"/>\n <line x1="10" y1="12" x2="21" y2="12"/>\n <line x1="10" y1="18" x2="21" y2="18"/>\n <polyline points="3 6 4 7 6 5"/>\n <polyline points="3 12 4 13 6 11"/>\n <polyline points="3 18 4 19 6 17"/>\n</svg>\n',lock:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>\n <path d="M7 11V7a5 5 0 0 1 10 0v4"/>\n</svg>\n',mail:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="4" width="20" height="16" rx="2"/>\n <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>\n</svg>\n',"map-marker":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>\n <circle cx="12" cy="10" r="3"/>\n</svg>\n',menu:u,minus:v,monitor:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>\n <line x1="8" y1="21" x2="16" y2="21"/>\n <line x1="12" y1="17" x2="12" y2="21"/>\n</svg>\n',moon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>\n</svg>\n',palette:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="13.5" cy="6.5" r="1.5"/>\n <circle cx="17.5" cy="10.5" r="1.5"/>\n <circle cx="8.5" cy="7.5" r="1.5"/>\n <circle cx="6.5" cy="12.5" r="1.5"/>\n <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>\n</svg>\n',paste:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/>\n <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2"/>\n</svg>\n',pause:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="6" y="4" width="4" height="16" rx="1"/>\n <rect x="14" y="4" width="4" height="16" rx="1"/>\n</svg>\n',"paper-airplane":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="22 2 15 22 11 13 2 9 22 2"/>\n <line x1="22" y1="2" x2="11" y2="13"/>\n</svg>\n',pencil:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>\n <path d="m15 5 4 4"/>\n</svg>\n',play:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="6 3 20 12 6 21 6 3"/>\n</svg>\n',plug:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 22v-4"/>\n <path d="M7 14H5a2 2 0 0 1-2-2v-2h18v2a2 2 0 0 1-2 2h-2"/>\n <rect x="9" y="14" width="6" height="4" rx="1"/>\n <line x1="8" y1="10" x2="8" y2="4"/>\n <line x1="16" y1="10" x2="16" y2="4"/>\n</svg>\n',plus:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"/>\n <line x1="5" y1="12" x2="19" y2="12"/>\n</svg>\n',puzzle:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.707-1.704L4.23 8.77a.979.979 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.627-1.627a2.404 2.404 0 0 1 3.409 0l1.568 1.568c.219.22.556.328.878.29.493-.075.84-.505 1.02-.969a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.968 1.02z"/>\n</svg>\n',redo:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="23 4 23 10 17 10"/>\n <path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"/>\n</svg>\n',"right-from-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>\n <polyline points="8 7 3 12 8 17"/>\n <line x1="3" y1="12" x2="15" y2="12"/>\n</svg>\n',"right-to-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>\n <polyline points="10 17 15 12 10 7"/>\n <line x1="15" y1="12" x2="3" y2="12"/>\n</svg>\n',save:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>\n <polyline points="17 21 17 13 7 13 7 21"/>\n <polyline points="7 3 7 8 15 8"/>\n</svg>\n',scissors:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="6" cy="6" r="3"/>\n <circle cx="6" cy="18" r="3"/>\n <line x1="20" y1="4" x2="8.12" y2="15.88"/>\n <line x1="14.47" y1="14.48" x2="20" y2="20"/>\n <line x1="8.12" y1="8.12" x2="12" y2="12"/>\n</svg>\n',search:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="11" cy="11" r="8"/>\n <path d="m21 21-4.35-4.35"/>\n</svg>\n',settings:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="3"/>\n <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>\n</svg>\n',share:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="18" cy="5" r="3"/>\n <circle cx="6" cy="12" r="3"/>\n <circle cx="18" cy="19" r="3"/>\n <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>\n <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>\n</svg>\n',shield:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>\n</svg>\n',"skip-back":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="19 20 9 12 19 4 19 20"/>\n <line x1="5" y1="19" x2="5" y2="5"/>\n</svg>\n',"skip-forward":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="5 4 15 12 5 20 5 4"/>\n <line x1="19" y1="5" x2="19" y2="19"/>\n</svg>\n',smartphone:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="6" y="2" width="12" height="20" rx="2" ry="2"/>\n <line x1="12" y1="18" x2="12.01" y2="18"/>\n</svg>\n',stack:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 2L2 7l10 5 10-5-10-5z"/>\n <path d="M2 17l10 5 10-5"/>\n <path d="M2 12l10 5 10-5"/>\n</svg>\n',star:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>\n</svg>\n',stop:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="4" y="4" width="16" height="16" rx="2"/>\n</svg>\n',sun:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="5"/>\n <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>\n</svg>\n',"thumbs-down":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M17 14V2"/>\n <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/>\n</svg>\n',"thumbs-up":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M7 10v12"/>\n <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/>\n</svg>\n',thumbtack:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 17v5"/>\n <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z"/>\n</svg>\n',swap:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="16 3 21 3 21 8"/>\n <line x1="4" y1="20" x2="21" y2="3"/>\n <polyline points="21 16 21 21 16 21"/>\n <line x1="15" y1="15" x2="21" y2="21"/>\n <line x1="4" y1="4" x2="9" y2="9"/>\n</svg>\n',tablet:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="4" y="2" width="16" height="20" rx="2" ry="2"/>\n <line x1="12" y1="18" x2="12.01" y2="18"/>\n</svg>\n',tag:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>\n <line x1="7" y1="7" x2="7.01" y2="7"/>\n</svg>\n',"thermometer-high":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>\n <line x1="11.5" y1="6" x2="11.5" y2="17" stroke-width="2.5"/>\n <circle cx="11.5" cy="19" r="2" fill="currentColor" stroke="none"/>\n <line x1="15" y1="5" x2="18" y2="5"/>\n <line x1="15" y1="8" x2="18" y2="8"/>\n <line x1="15" y1="11" x2="18" y2="11"/>\n</svg>\n',"thermometer-low":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>\n <line x1="11.5" y1="13" x2="11.5" y2="17" stroke-width="2.5"/>\n <circle cx="11.5" cy="19" r="2" fill="currentColor" stroke="none"/>\n <line x1="15" y1="5" x2="18" y2="5"/>\n <line x1="15" y1="8" x2="18" y2="8"/>\n <line x1="15" y1="11" x2="18" y2="11"/>\n</svg>\n',tools:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>\n</svg>\n',trash:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="3 6 5 6 21 6"/>\n <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>\n <path d="M10 11v6M14 11v6"/>\n <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>\n</svg>\n',undo:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="1 4 1 10 7 10"/>\n <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>\n</svg>\n',unlock:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>\n <path d="M7 11V7a5 5 0 0 1 9.9-1"/>\n</svg>\n',"up-from-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>\n <polyline points="17 8 12 3 7 8"/>\n <line x1="12" y1="3" x2="12" y2="15"/>\n</svg>\n',"up-to-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M3 9V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4"/>\n <polyline points="17 14 12 9 7 14"/>\n <line x1="12" y1="9" x2="12" y2="21"/>\n</svg>\n',user:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>\n <circle cx="12" cy="7" r="4"/>\n</svg>\n',users:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>\n <circle cx="9" cy="7" r="4"/>\n <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>\n <path d="M16 3.13a4 4 0 0 1 0 7.75"/>\n</svg>\n',warning:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>\n <line x1="12" y1="9" x2="12" y2="13"/>\n <line x1="12" y1="17" x2="12.01" y2="17"/>\n</svg>\n'});var m='/* Colors /\n:root {\n --neutral--: #7f8286ff;\n --neutral-white: #ffffffff;\n --neutral-black: #000000ff;\n --neutral-light-0: #f7f7faff;\n --neutral-light-1: #f0f0f2ff;\n --neutral-light-2: #dfe0e3ff;\n --neutral-light-3: #cacbcfff;\n --neutral-light-4: #bbbdc0ff;\n --neutral-light-5: #acaeb2ff;\n --neutral-light-6: #9d9fa3ff;\n --neutral-light-7: #8e9195ff;\n --neutral-dark-0: #0c0c0dff;\n --neutral-dark-1: #151617ff;\n --neutral-dark-2: #292a2bff;\n --neutral-dark-3: #37383aff;\n --neutral-dark-4: #46474aff;\n --neutral-dark-5: #545659ff;\n --neutral-dark-6: #626568ff;\n --neutral-dark-7: #717377ff;\n --neutral-black-translucent: #0000001f;\n --neutral-white-translucent: #1111111f;\n --red--: #b80421ff;\n --red-light-0: #f2e6e8ff;\n --red-light-1: #ebcacfff;\n --red-light-2: #e4aeb6ff;\n --red-light-3: #dc919dff;\n --red-light-4: #d57585ff;\n --red-light-5: #ce596cff;\n --red-light-6: #c73d53ff;\n --red-light-7: #bf203aff;\n --red-dark-0: #0d0103ff;\n --red-dark-1: #220107ff;\n --red-dark-2: #38020bff;\n --red-dark-3: #4d020eff;\n --red-dark-4: #630312ff;\n --red-dark-5: #780316ff;\n --red-dark-6: #8d031aff;\n --red-dark-7: #a3041dff;\n --red-translucent: #b804211f;\n --orange--: #d13704ff;\n --orange-light-0: #f2e9e6ff;\n --orange-light-1: #eed3caff;\n --orange-light-2: #eabdaeff;\n --orange-light-3: #e6a691ff;\n --orange-light-4: #e29075ff;\n --orange-light-5: #dd7a59ff;\n --orange-light-6: #d9643dff;\n --orange-light-7: #d54d20ff;\n --orange-dark-0: #0d0300ff;\n --orange-dark-1: #260a01ff;\n --orange-dark-2: #3e1001ff;\n --orange-dark-3: #571702ff;\n --orange-dark-4: #6f1d02ff;\n --orange-dark-5: #882403ff;\n --orange-dark-6: #a02a03ff;\n --orange-dark-7: #b93104ff;\n --orange-translucent: #d137041f;\n --amber--: #d16004ff;\n --amber-light-0: #f2ece6ff;\n --amber-light-1: #eedbcaff;\n --amber-light-2: #eac9aeff;\n --amber-light-3: #e6b891ff;\n --amber-light-4: #e2a675ff;\n --amber-light-5: #dd9559ff;\n --amber-light-6: #d9833dff;\n --amber-light-7: #d57220ff;\n --amber-dark-0: #0d0c0cff;\n --amber-dark-1: #26170bff;\n --amber-dark-2: #3e210aff;\n --amber-dark-3: #572c09ff;\n --amber-dark-4: #6f3608ff;\n --amber-dark-5: #884107ff;\n --amber-dark-6: #a04b06ff;\n --amber-dark-7: #b95605ff;\n --amber-translucent: #d160041f;\n --yellow--: #d17f04ff;\n --yellow-light-0: #f2eadfff;\n --yellow-light-1: #eeddc4ff;\n --yellow-light-2: #eacfa8ff;\n --yellow-light-3: #e6c28dff;\n --yellow-light-4: #e2b572ff;\n --yellow-light-5: #dda756ff;\n --yellow-light-6: #d99a3bff;\n --yellow-light-7: #d58c1fff;\n --yellow-dark-0: #0d0c0cff;\n --yellow-dark-1: #261a0bff;\n --yellow-dark-2: #3e290aff;\n --yellow-dark-3: #573709ff;\n --yellow-dark-4: #6f4608ff;\n --yellow-dark-5: #885407ff;\n --yellow-dark-6: #a06206ff;\n --yellow-dark-7: #b97105ff;\n --yellow-translucent: #d17f041f;\n --olive--: #838807ff;\n --olive-light-0: #f0f0e0ff;\n --olive-light-1: #e2e3c5ff;\n --olive-light-2: #d5d6aaff;\n --olive-light-3: #c7c98fff;\n --olive-light-4: #babc74ff;\n --olive-light-5: #acaf58ff;\n --olive-light-6: #9ea23dff;\n --olive-light-7: #919522ff;\n --olive-dark-0: #0d0d0cff;\n --olive-dark-1: #1c1c0bff;\n --olive-dark-2: #2b2c0bff;\n --olive-dark-3: #393b0aff;\n --olive-dark-4: #484b0aff;\n --olive-dark-5: #575a09ff;\n --olive-dark-6: #666908ff;\n --olive-dark-7: #747908ff;\n --olive-translucent: #8388071f;\n --green--: #28a466ff;\n --green-light-0: #e4f4ecff;\n --green-light-1: #cdeadbff;\n --green-light-2: #b5e0cbff;\n --green-light-3: #9ed6baff;\n --green-light-4: #86cca9ff;\n --green-light-5: #6fc298ff;\n --green-light-6: #57b888ff;\n --green-light-7: #40ae77ff;\n --green-dark-0: #030d08ff;\n --green-dark-1: #082014ff;\n --green-dark-2: #0c3320ff;\n --green-dark-3: #11462bff;\n --green-dark-4: #165937ff;\n --green-dark-5: #1a6b43ff;\n --green-dark-6: #1f7e4fff;\n --green-dark-7: #23915aff;\n --green-translucent: #28a4661f;\n --teal--: #06a099ff;\n --teal-light-0: #ebf7f7ff;\n --teal-light-1: #ceecebff;\n --teal-light-2: #b2e1e0ff;\n --teal-light-3: #95d6d4ff;\n --teal-light-4: #79ccc8ff;\n --teal-light-5: #5cc1bcff;\n --teal-light-6: #3fb6b1ff;\n --teal-light-7: #23aba5ff;\n --teal-dark-0: #0c0d0dff;\n --teal-dark-1: #0b1f1fff;\n --teal-dark-2: #0b3230ff;\n --teal-dark-3: #0a4442ff;\n --teal-dark-4: #095753ff;\n --teal-dark-5: #086965ff;\n --teal-dark-6: #087b76ff;\n --teal-dark-7: #078e88ff;\n --teal-translucent: #06a0991f;\n --blue--: #0576ffff;\n --blue-light-0: #ebf5ffff;\n --blue-light-1: #cee5ffff;\n --blue-light-2: #b2d5ffff;\n --blue-light-3: #95c5ffff;\n --blue-light-4: #78b6ffff;\n --blue-light-5: #5ba6ffff;\n --blue-light-6: #3f96ffff;\n --blue-light-7: #2286ffff;\n --blue-dark-0: #0c0c0dff;\n --blue-dark-1: #0b192bff;\n --blue-dark-2: #0a274aff;\n --blue-dark-3: #093468ff;\n --blue-dark-4: #094186ff;\n --blue-dark-5: #084ea4ff;\n --blue-dark-6: #075cc3ff;\n --blue-dark-7: #0669e1ff;\n --blue-translucent: #0576ff1f;\n --indigo--: #7d40ffff;\n --indigo-light-0: #f6f2ffff;\n --indigo-light-1: #e7dcffff;\n --indigo-light-2: #d8c6ffff;\n --indigo-light-3: #c9afffff;\n --indigo-light-4: #ba99ffff;\n --indigo-light-5: #aa83ffff;\n --indigo-light-6: #9b6dffff;\n --indigo-light-7: #8c56ffff;\n --indigo-dark-0: #0d0c0cff;\n --indigo-dark-1: #1b132aff;\n --indigo-dark-2: #291949ff;\n --indigo-dark-3: #372067ff;\n --indigo-dark-4: #452686ff;\n --indigo-dark-5: #532da4ff;\n --indigo-dark-6: #6133c2ff;\n --indigo-dark-7: #6f3ae1ff;\n --indigo-translucent: #7d40ff1f;\n --purple--: #8a05ffff;\n --purple-light-0: #f9f2ffff;\n --purple-light-1: #ebd4ffff;\n --purple-light-2: #ddb7ffff;\n --purple-light-3: #cf99ffff;\n --purple-light-4: #c27cffff;\n --purple-light-5: #b45effff;\n --purple-light-6: #a640ffff;\n --purple-light-7: #9823ffff;\n --purple-dark-0: #0c0c0dff;\n --purple-dark-1: #1c0b2bff;\n --purple-dark-2: #2c0a4aff;\n --purple-dark-3: #3b0968ff;\n --purple-dark-4: #4b0986ff;\n --purple-dark-5: #5b08a4ff;\n --purple-dark-6: #6b07c3ff;\n --purple-dark-7: #7a06e1ff;\n --purple-translucent: #8a05ff1f;\n --pink--: #ff05a8ff;\n --pink-light-0: #f9f2ffff;\n --pink-light-1: #fad4f4ff;\n --pink-light-2: #fbb7e9ff;\n --pink-light-3: #fb99deff;\n --pink-light-4: #fc7cd4ff;\n --pink-light-5: #fd5ec9ff;\n --pink-light-6: #fe40beff;\n --pink-light-7: #fe23b3ff;\n --pink-dark-0: #0c0c0dff;\n --pink-dark-1: #2a0b20ff;\n --pink-dark-2: #490a34ff;\n --pink-dark-3: #670947ff;\n --pink-dark-4: #86095bff;\n --pink-dark-5: #a4086eff;\n --pink-dark-6: #c20781ff;\n --pink-dark-7: #e10695ff;\n --pink-translucent: #ff05a81f;\n --brown--: #ab642eff;\n --brown-light-0: #f2dfdfff;\n --brown-light-1: #e9d0c9ff;\n --brown-light-2: #e0c0b3ff;\n --brown-light-3: #d7b19dff;\n --brown-light-4: #cfa287ff;\n --brown-light-5: #c69270ff;\n --brown-light-6: #bd835aff;\n --brown-light-7: #b47344ff;\n --brown-dark-0: #0d0c0cff;\n --brown-dark-1: #211710ff;\n --brown-dark-2: #352215ff;\n --brown-dark-3: #482d19ff;\n --brown-dark-4: #5c381dff;\n --brown-dark-5: #704321ff;\n --brown-dark-6: #844e26ff;\n --brown-dark-7: #97592aff;\n --brown-translucent: #ab642e1f;\n}\n\n/ Numerics /\n:root {\n --border-none: 0px;\n --border-x-thin: 1px;\n --border-thin: 2px;\n --border-medium: 4px;\n --border-thick: 8px;\n --border-x-thick: 10px;\n --spacing-none: 0px;\n --spacing-4x-small: 1px;\n --spacing-2x-small: 2px;\n --spacing-x-small: 4px;\n --spacing-small: 6px;\n --spacing-medium: 8px;\n --spacing-large: 12px;\n --spacing-x-large: 16px;\n --spacing-2x-large: 24px;\n --spacing-4x-large: 32px;\n --font-size-display-1: 6em;\n --font-size-display-2: 5.5em;\n --font-size-display-3: 4.5em;\n --font-size-display-4: 3.5em;\n --font-size-h1: 2em;\n --font-size-h2: 1.5em;\n --font-size-h3: 1.17em;\n --font-size-h4: 1em;\n --font-size-h5: 0.83em;\n --font-size-paragraph: 1em;\n --font-size-small: 0.8em;\n --font-size-label: 0.83em;\n --font-size-button: 1em;\n --font-size-quote: 1.17em;\n --radii-none: 0px;\n --radii-x-small: 0.125em;\n --radii-small: 0.25em;\n --radii-medium: 0.375em;\n --radii-large: 0.5px;\n --radii-x-large: 1em;\n --radii-full: 9999px;\n --sizing-2x-small: 16px;\n --sizing-x-small: 19px;\n --sizing-small: 32px;\n --sizing-medium: 40px;\n --sizing-large: 56px;\n}\n\n/ Components /\n\n:root {\n / appbar /\n --component-appbar-collapsed-width: 52px;\n --component-appbar-collapsed-width-small: 40px;\n --component-appbar-collapsed-width-medium: 52px;\n --component-appbar-collapsed-width-large: 64px;\n --component-appbar-mobile-breakpoint: 768px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-appbar-z-index: 100;\n\n / avatar /\n --component-avatar-border-radius-circle: var(--radii-full);\n --component-avatar-border-radius-square: var(--radii-small);\n --component-avatar-size-large: var(--sizing-large);\n --component-avatar-size-medium: var(--sizing-medium);\n --component-avatar-size-small: var(--sizing-small);\n\n / badge /\n --component-badge-border-radius-circle: var(--radii-full);\n --component-badge-border-radius-square: var(--radii-small);\n --component-badge-padding-large: var(--spacing-small);\n --component-badge-padding-medium: var(--spacing-x-small);\n --component-badge-padding-small: var(--spacing-2x-small);\n --component-badge-size-large: var(--sizing-medium);\n --component-badge-size-medium: var(--sizing-small);\n --component-badge-size-small: var(--sizing-2x-small);\n\n / button /\n --component-button-border-radius-inner: var(--radii-x-small);\n --component-button-border-radius-outer: var(--radii-small);\n --component-button-border-width: var(--border-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n\n / card /\n --component-card-border-radius-inner: var(--radii-small);\n --component-card-border-radius-outer: var(--radii-medium);\n --component-card-border-width: var(--border-x-thin);\n --component-card-inner-border-width: var(--border-x-thin);\n --component-card-padding-inner: var(--spacing-medium);\n --component-card-padding-outer: var(--spacing-x-large);\n\n / breadcrumbs /\n --component-breadcrumbs-font-size-small: 0.75em;\n --component-breadcrumbs-font-size-medium: 0.875em;\n --component-breadcrumbs-font-size-large: 1em;\n --component-breadcrumbs-gap-small: var(--spacing-2x-small);\n --component-breadcrumbs-gap-medium: var(--spacing-x-small);\n --component-breadcrumbs-gap-large: var(--spacing-small);\n\n / checkbox /\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n\n / color /\n --component-color-swatch-size-small: var(--sizing-small);\n --component-color-swatch-size-medium: var(--sizing-medium);\n --component-color-swatch-size-large: var(--sizing-large);\n --component-color-swatch-border-radius: var(--radii-small);\n --component-color-trigger-gap: var(--spacing-x-small);\n --component-color-popup-offset: 4px;\n --component-color-z-index: 200;\n\n / colorpicker /\n --component-colorpicker-width-small: 200px;\n --component-colorpicker-width: 260px;\n --component-colorpicker-width-large: 320px;\n --component-colorpicker-canvas-height-small: 120px;\n --component-colorpicker-canvas-height: 160px;\n --component-colorpicker-canvas-height-large: 200px;\n --component-colorpicker-slider-height: 12px;\n --component-colorpicker-slider-thumb-size: 16px;\n --component-colorpicker-canvas-handle-size: 16px;\n --component-colorpicker-gap: var(--spacing-medium);\n --component-colorpicker-border-radius: var(--radii-x-small);\n --component-colorpicker-checkerboard-size: 8px;\n\n / dock /\n --component-dock-height-small: 52px;\n --component-dock-height-medium: 60px;\n --component-dock-height-large: 72px;\n --component-dock-border-width: var(--border-x-thin);\n --component-dock-z-index: 8000;\n\n / dialog /\n --component-dialog-border-radius-inner: var(--radii-x-small);\n --component-dialog-border-radius-outer: var(--radii-small);\n --component-dialog-border-width: var(--border-x-thin);\n --component-dialog-inner-border-width: var(--border-x-thin);\n --component-dialog-padding: var(--spacing-medium);\n --component-dialog-z-index: 1000;\n\n / drawer /\n --component-drawer-border-radius: var(--radii-small);\n --component-drawer-border-width: var(--border-x-thin);\n --component-drawer-handle-padding: var(--spacing-x-small);\n --component-drawer-handle-width: var(--spacing-x-small);\n --component-drawer-padding: var(--spacing-medium);\n --component-drawer-z-index: 5000;\n\n / gallery /\n --component-gallery-gap-small: var(--spacing-x-small);\n --component-gallery-gap-medium: var(--spacing-medium);\n --component-gallery-gap-large: var(--spacing-large);\n --component-gallery-columns: 3;\n --component-gallery-aspect-ratio: 1/1;\n --component-gallery-thumbnail-radius: var(--radii-small);\n --component-gallery-thumbnail-overlay-color: var(--neutral-black-translucent);\n --component-gallery-expand-background: rgba(0, 0, 0, 0.9);\n --component-gallery-expand-z-index: 1000;\n --component-gallery-arrow-color: var(--base-content-inverse);\n --component-gallery-arrow-background: var(--neutral-white-translucent);\n\n / icon /\n --component-icon-size-x-large: 28px;\n --component-icon-size-large: 22px;\n --component-icon-size-medium: 18px;\n --component-icon-size-small: 14px;\n --component-icon-size-x-small: 10px;\n\n / inputs /\n --component-inputs-border-radius-inner: var(--radii-x-small);\n --component-inputs-border-radius-outer: var(--radii-small);\n --component-inputs-border-width: var(--border-thin);\n --component-inputs-padding-large: var(--spacing-x-large);\n --component-inputs-padding-medium: var(--spacing-medium);\n --component-inputs-padding-small: var(--spacing-x-small);\n\n / menu /\n --component-menu-border-radius: var(--radii-x-small);\n --component-menu-border-width: var(--border-x-thin);\n --component-menu-padding-horizontal: var(--spacing-small);\n --component-menu-padding-vertical: var(--spacing-x-small);\n --component-menu-z-index: 1001;\n\n / panelbar /\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-indent: var(--spacing-x-large);\n --component-panelbar-padding: var(--spacing-medium);\n\n / progress /\n --component-progress-border-radius-inner: var(--radii-small);\n --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-progress-border-width: var(--border-x-thin);\n --component-progress-padding: var(--spacing-x-small);\n --component-progress-size-large: var(--sizing-large);\n --component-progress-size-medium: var(--sizing-medium);\n --component-progress-size-small: var(--sizing-small);\n\n / radio /\n --component-radio-dot-offset: var(--spacing-2x-small);\n --component-radio-dot-size: var(--spacing-medium);\n --component-radio-size: var(--sizing-2x-small);\n\n / colorpicker /\n --component-colorpicker-width-small: 200px;\n --component-colorpicker-width: 260px;\n --component-colorpicker-width-large: 320px;\n --component-colorpicker-canvas-height-small: 120px;\n --component-colorpicker-canvas-height: 160px;\n --component-colorpicker-canvas-height-large: 200px;\n --component-colorpicker-slider-height: 12px;\n --component-colorpicker-slider-thumb-size: 16px;\n --component-colorpicker-canvas-handle-size: 16px;\n --component-colorpicker-gap: var(--spacing-medium);\n --component-colorpicker-border-radius: var(--radii-x-small);\n --component-colorpicker-checkerboard-size: 8px;\n\n / date / datepicker /\n --component-date-z-index: 200;\n --component-datepicker-border-radius: var(--radii-medium);\n --component-datepicker-border-width: var(--border-x-thin);\n\n / select /\n --component-select-z-index: 6000;\n\n / sidebar /\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n\n / stack /\n --component-stack-mobile-breakpoint: 576px;\n --component-stack-tablet-breakpoint: 768px;\n\n / stepper /\n --component-stepper-indicator-size-small: 28px;\n --component-stepper-indicator-size-medium: 36px;\n --component-stepper-indicator-size-large: 44px;\n --component-stepper-gap-small: var(--spacing-x-small);\n --component-stepper-gap-medium: var(--spacing-small);\n --component-stepper-gap-large: var(--spacing-medium);\n\n / slider /\n --component-slider-border-radius-inner: var(--radii-small);\n --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-slider-border-width: var(--border-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n\n / switch /\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-thin);\n --component-switch-padding: var(--spacing-2x-small);\n\n / tab /\n --component-tab-border-radius-inner: var(--radii-x-small);\n --component-tab-border-radius-outer: var(--radii-small);\n --component-tab-border-width: var(--border-x-thin);\n --component-tab-content-padding: var(--spacing-large);\n --component-tab-gap-large: var(--spacing-large);\n --component-tab-gap-medium: var(--spacing-small);\n --component-tab-gap-small: var(--spacing-2x-small);\n --component-tab-padding-large: var(--spacing-2x-large);\n --component-tab-padding-medium: var(--spacing-large);\n --component-tab-padding-small: var(--spacing-small);\n\n / table /\n --component-table-border-radius: var(--radii-small);\n --component-table-border-width: var(--border-x-thin);\n --component-table-border-width-header: var(--border-thin);\n --component-table-padding-large: var(--spacing-large);\n --component-table-padding-medium: var(--spacing-medium);\n --component-table-padding-small: var(--spacing-small);\n\n / tag /\n --component-tag-border-radius-circle: var(--radii-full);\n --component-tag-border-radius-square: var(--radii-small);\n --component-tag-padding-large: var(--spacing-small);\n --component-tag-padding-medium: var(--spacing-x-small);\n --component-tag-padding-small: var(--spacing-2x-small);\n --component-tag-height-large: 36px;\n --component-tag-height-medium: 26px;\n --component-tag-height-small: 20px;\n --component-tag-size-large: var(--sizing-large);\n --component-tag-size-medium: var(--sizing-medium);\n --component-tag-size-small: var(--sizing-small);\n\n / toast /\n --component-toast-border-radius: var(--radii-small);\n --component-toast-offset: var(--spacing-x-large);\n --component-toast-padding: var(--spacing-medium);\n --component-toast-padding-h: var(--spacing-x-large);\n --component-toast-z-index: 9000;\n\n / tooltip /\n --component-tooltip-border-radius: var(--radii-small);\n --component-tooltip-padding: var(--spacing-x-small);\n --component-tooltip-padding-h: var(--spacing-medium);\n --component-tooltip-z-index: 7000;\n}\n\n/ Default Theme (Blue Light) /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-active: var(--teal-light-4);\n --secondary-border: var(--teal-light-3);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-banner-padding-small: var(--spacing-x-small) var(--spacing-medium);\n --component-banner-padding-medium: var(--spacing-medium) var(--spacing-x-large);\n --component-banner-padding-large: var(--spacing-large) var(--spacing-2x-large);\n --component-banner-gap: var(--spacing-medium);\n --component-banner-icon-size-small: var(--component-icon-size-small);\n --component-banner-icon-size-medium: var(--component-icon-size-medium);\n --component-banner-icon-size-large: var(--component-icon-size-large);\n --component-banner-z-index: 200;\n --component-banner-border-radius: 0;\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-breadcrumbs-color: var(--primary-content--);\n --component-breadcrumbs-color-hover: var(--primary-content-hover);\n --component-breadcrumbs-color-current: var(--base-content--);\n --component-breadcrumbs-separator-color: var(--base-content-lighter);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dock-background: var(--base-background-component);\n --component-dock-color: var(--base-content-lighter);\n --component-dock-color-active: var(--primary-content--);\n --component-dock-border-color: var(--base-border);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-stepper-connector-color: var(--base-border);\n --component-stepper-connector-color-complete: var(--primary-content--);\n --component-stepper-color-pending: var(--base-border);\n --component-stepper-color-active: var(--primary-content--);\n --component-stepper-color-active-text: var(--primary-content-inverse);\n --component-stepper-color-complete: var(--success-content--);\n --component-stepper-color-complete-text: var(--success-content-inverse);\n --component-stepper-color-error: var(--error-content--);\n --component-stepper-color-error-text: var(--error-content-inverse);\n --component-stepper-label-color: var(--base-content--);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n';function g(e){const n=function(e){const n=e.match(/^#([0-9a-f]{3,4}\|[0-9a-f]{6}\|[0-9a-f]{8})$/i);if(n){let e=n[1];return e.length<=4&&(e=e.split("").map(e=>e+e).join("")),{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}const t=e.match(/rgba?\(\s(\d+)\s,\s(\d+)\s,\s(\d+)/);return t?{r:parseInt(t[1],10),g:parseInt(t[2],10),b:parseInt(t[3],10)}:null}(e);return n&&function({r:e,g:n,b:t}){const[r,o,a]=[e,n,t].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126r+.7152o+.0722a}(n)>.179?"var(--neutral-black, #000000)":"var(--neutral-white, #ffffff)"}function k(e,n="base"){const t={base:["var(--base-content--)","var(--base-content-inverse)"],primary:["var(--primary-content--)","var(--primary-content-inverse)"],secondary:["var(--secondary-content--)","var(--secondary-content-inverse)"],success:["var(--success-content--)","var(--success-content-inverse)"],warning:["var(--warning-content--)","var(--warning-content-inverse)"],error:["var(--error-content--)","var(--error-content-inverse)"],help:["var(--help-content--)","var(--help-content-inverse)"]};return t[e]?t[e]:e&&(e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl"))?[e,g(e)]:null===n?[e,"var(--base-content-inverse)"]:t[n]\|\|t.base}function y(e,n,t){return Math.max(n,Math.min(t,e))}function w(e,n,t){e=(e%360+360)%360;const r=(t/=100)(n/=100),o=r(1-Math.abs(e/60%2-1)),a=t-r;let i,s,c;return[i,s,c]=e<60?[r,o,0]:e<120?[o,r,0]:e<180?[0,r,o]:e<240?[0,o,r]:e<300?[o,0,r]:[r,0,o],[Math.round(255(i+a)),Math.round(255(s+a)),Math.round(255(c+a))]}function f(e,n,t){e/=255,n/=255,t/=255;const r=Math.max(e,n,t),o=r-Math.min(e,n,t);let a=0;0!==o&&(a=r===e?((n-t)/o+6)%6:r===n?(t-e)/o+2:(e-n)/o+4,a=60);const i=0===r?0:o/r100,s=100r;return[Math.round(a),Math.round(i),Math.round(s)]}function x(e,n,t){const r=(t/=100)(1-(n/=100)/2),o=0===r\|\|1===r?0:(t-r)/Math.min(r,1-r);return[Math.round(e),Math.round(100o),Math.round(100r)]}function _(e,n,t){const r=(t/=100)+(n/=100)Math.min(t,1-t),o=0===r?0:2(1-t/r);return[Math.round(e),Math.round(100o),Math.round(100r)]}function A(e,n,t){return"#"+[e,n,t].map(e=>e.toString(16).padStart(2,"0")).join("")}function S(e,n,t,r){const o=Math.round(255r);return A(e,n,t)+o.toString(16).padStart(2,"0")}function C(e){if(!e\|\|"string"!=typeof e)return null;if((e=e.trim()).startsWith("#"))return function(e){let n,t,r,o=1;if(3===(e=e.replace(/^#/,"")).length\|\|4===e.length)n=parseInt(e[0]+e[0],16),t=parseInt(e[1]+e[1],16),r=parseInt(e[2]+e[2],16),4===e.length&&(o=parseInt(e[3]+e[3],16)/255);else{if(6!==e.length&&8!==e.length)return null;n=parseInt(e.slice(0,2),16),t=parseInt(e.slice(2,4),16),r=parseInt(e.slice(4,6),16),8===e.length&&(o=parseInt(e.slice(6,8),16)/255)}return[n,t,r].some(isNaN)?null:{r:n,g:t,b:r,a:isNaN(o)?1:o}}(e);const n=e.match(/^rgba?$\s(\d+)\s,\s(\d+)\s,\s(\d+)\s(?:,\s([\d.]+))?\s$$/i);if(n)return{r:y(parseInt(n[1],10),0,255),g:y(parseInt(n[2],10),0,255),b:y(parseInt(n[3],10),0,255),a:void 0!==n[4]?y(parseFloat(n[4]),0,1):1};const t=e.match(/^hsla?$\s(\d+)\s,\s([\d.]+)%?\s,\s([\d.]+)%?\s(?:,\s([\d.]+))?\s$$/i);if(t){const e=y(parseInt(t[1],10),0,360),n=y(parseFloat(t[2]),0,100),r=y(parseFloat(t[3]),0,100),o=void 0!==t[4]?y(parseFloat(t[4]),0,1):1,[a,i,s]=_(e,n,r),[c,l,d]=w(a,i,s);return{r:c,g:l,b:d,a:o}}const r=e.match(/^hsva?$\s(\d+)\s,\s([\d.]+)%?\s,\s([\d.]+)%?\s(?:,\s([\d.]+))?\s$$/i);if(r){const e=y(parseInt(r[1],10),0,360),n=y(parseFloat(r[2]),0,100),t=y(parseFloat(r[3]),0,100),o=void 0!==r[4]?y(parseFloat(r[4]),0,1):1,[a,i,s]=w(e,n,t);return{r:a,g:i,b:s,a:o}}return null}function z(e,n,t){const r=document.createElement(e);if(n)for(const[e,t]of Object.entries(n))null!=t&&!1!==t&&r.setAttribute(e,!0===t?"":t);if(t)for(const e of t)"string"==typeof e?r.appendChild(document.createTextNode(e)):e&&r.appendChild(e);return r}function E(e){if(!e)return;const n=e.querySelector("slot[name='label']");n&&n.addEventListener("slotchange",()=>{const t=n.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));e.style.display=t?"flex":""})}function $(e,n,t,r=document){let o=!1,a=null,i=null;const s=()=>{o=!0,null!=a&&cancelAnimationFrame(a),i&&i.disconnect(),a=null,i=null},c=()=>{if(o)return!0;const e=r.getElementById?r.getElementById(n):document.getElementById(n);return!!e&&(s(),t(e),!0)};return c()?s:e.isConnected?(a=requestAnimationFrame(()=>{if(a=null,c())return;const e=r===document?document.body:r;e&&(i=new MutationObserver(c),i.observe(e,{childList:!0,subtree:!0}))}),s):s}function M(e,n={}){Object.entries(n).forEach(([n,t])=>{const r=e.querySelector("slot"+(n?`[name="${n}"]`:":not([name])")),o=e.querySelector(t);if(r&&o){const e=r.assignedNodes({flatten:!0}).filter(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));o.style.display=e.length>0?"":"none"}})}class L extends HTMLElement{static get observedAttributes(){return["left-icon","right-icon","color","size","style-type","type","disabled","name","value","autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget","aria-label","aria-pressed","aria-hidden","href","target","rel"]}constructor(){super(),this.attachShadow({mode:"open"}),this.selectedValues=new Set,this._init()}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this._init()}attributeChangedCallback(e,n,t){const r=L.observedAttributes;n!==t&&r.includes(e)&&(null===t?this.button.removeAttribute(e):this.button.setAttribute(e,t)),this._init(),["color","size","style-type","disabled"].includes(e)&&this._updateStyles()}get href(){return this.getAttribute("href")}set href(e){null!=e?this.setAttribute("href",e):this.removeAttribute("href")}get target(){return this.getAttribute("target")}set target(e){null!=e?this.setAttribute("target",e):this.removeAttribute("target")}get rel(){return this.getAttribute("rel")}set rel(e){null!=e?this.setAttribute("rel",e):this.removeAttribute("rel")}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get styleType(){return this.getAttribute("style-type")\|\|"outlined"}set styleType(e){this.setAttribute("style-type",e)}get type(){return this.getAttribute("type")\|\|"button"}set type(e){this.setAttribute("type",e)}get value(){return this.hasAttribute("multiple")?Array.from(this.selectedValues).join(","):this.selectedValues.size?Array.from(this.selectedValues)[0]:""}set value(e){this.hasAttribute("multiple")?"string"==typeof e?this.selectedValues=new Set(e.split(",").map(e=>e.trim())):Array.isArray(e)&&(this.selectedValues=new Set(e)):this.selectedValues="string"==typeof e?new Set([e.trim()]):new Set,this.setAttribute("value",e)}setOptions(e){this.setAttribute("options",JSON.stringify(e))}_addEventListeners(){this.button.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{bubbles:!0,composed:!0}))}),this.button.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{bubbles:!0,composed:!0}))}),this.button.addEventListener("keydown",e=>{this.dispatchEvent(new CustomEvent("keydown",{detail:{key:e.key,code:e.code},bubbles:!0,composed:!0}))}),this.button.addEventListener("keyup",e=>{this.dispatchEvent(new CustomEvent("keyup",{detail:{key:e.key,code:e.code},bubbles:!0,composed:!0}))}),this.button.addEventListener("click",e=>{if(this._handleClick(),"submit"===this.getAttribute("type")){const n=this.closest("form");n&&(e.preventDefault(),n.requestSubmit())}})}_applyCustomColorStyles(e,n,t){const r=g(e),o=`color-mix(in srgb, ${e} 85%, black)`,a=`color-mix(in srgb, ${e} 70%, black)`,i=`color-mix(in srgb, ${e} 15%, transparent)`,s={filled:{"--background-color":e,"--border-color":e,"--text-color":r,"--hover-background-color":o,"--hover-border-color":o,"--hover-text-color":r,"--focus-background-color":a,"--focus-border-color":a,"--focus-text-color":r,"--active-background-color":a,"--active-border-color":a,"--active-text-color":r},outlined:{"--background-color":"transparent","--border-color":e,"--text-color":e,"--hover-background-color":i,"--hover-border-color":e,"--hover-text-color":e,"--focus-background-color":i,"--focus-border-color":e,"--focus-text-color":e,"--active-background-color":e,"--active-border-color":e,"--active-text-color":r},flat:{"--background-color":"transparent","--border-color":"transparent","--text-color":e,"--hover-background-color":i,"--hover-border-color":i,"--hover-text-color":e,"--focus-background-color":i,"--focus-border-color":i,"--focus-text-color":e,"--active-background-color":e,"--active-border-color":e,"--active-text-color":r}};Object.entries(s[n]\|\|s.outlined).forEach(([e,n])=>this.button.style.setProperty(e,n)),this._applySizeStyles(t)}_applyFilledInteractionStyles(e){this.button.style.setProperty("--hover-background-color",`var(${e[1]}, #292a2b)`),this.button.style.setProperty("--hover-text-color",`var(${e[6]}, #0c0c0d)`),this.button.style.setProperty("--hover-border-color",`var(${e[1]}, #292a2b)`),this.button.style.setProperty("--focus-background-color",`var(${e[2]}, #46474a)`),this.button.style.setProperty("--focus-text-color",`var(${e[6]}, #0c0c0d)`),this.button.style.setProperty("--focus-border-color",`var(${e[2]}, #46474a)`),this.button.style.setProperty("--active-background-color",`var(${e[3]}, #0c0c0d)`),this.button.style.setProperty("--active-text-color",`var(${e[0]}, #f7f7fa)`),this.button.style.setProperty("--active-border-color",`var(${e[3]}, #0c0c0d)`)}_applyInteractionStyles(e,n){"filled"===n?this._applyFilledInteractionStyles(e):this._applyUnfilledInteractionStyles(e,n)}_applySizeStyles(e){const n={small:"--component-button-padding-small",medium:"--component-button-padding-medium",large:"--component-button-padding-large"},t=n[e]\|\|n.medium;this.button.style.setProperty("--button-padding",`var(${t}, var(--component-button-padding-medium))`),this.button.style.setProperty("--button-gap",`var(${t}, var(--component-button-padding-medium))`);const r={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"};this.button.style.setProperty("--button-min-height",r[e]\|\|"40px"),this.button.style.setProperty("--button-min-width",r[e]\|\|"40px")}_applyStyles(){const e=document.createElement("style");e.textContent='\n :host {\n display: inline-block;\n }\n\n @font-face {\n font-family: "Lexend";\n font-display: swap;\n }\n\n .button {\n box-sizing: border-box;\n display: inline-flex;\n width: 100%;\n min-height: var(--button-min-height, var(--sizing-medium, 40px));\n min-width: var(--button-min-width, var(--sizing-medium, 40px));\n padding: var(--button-padding, var(--component-button-padding-medium));\n gap: var(--button-gap, var(--component-button-padding-medium));\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n border-radius: var(--component-button-border-radius-outer, 4px);\n border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));\n background: var(--background-color, #0c0c0d);\n transition: background-color 0.1s, color 0.1s, border-color 0.1s;\n cursor: pointer;\n color: var(--text-color);\n font-family: var(--font-family-body, Lexend, sans-serif);\n font-size: var(--font-size-button, 1em);\n line-height: 1;\n }\n\n .button {\n text-decoration: none;\n }\n\n .button:disabled,\n .button[aria-disabled="true"] {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .button:hover:not(:disabled),\n .button:hover:not(:disabled) .button-content {\n background: var(--hover-background-color);\n color: var(--hover-text-color);\n border-color: var(--hover-border-color);\n }\n .button:focus:not(:disabled),\n .button:focus:not(:disabled) .button-content {\n background: var(--focus-background-color);\n color: var(--focus-text-color);\n border-color: var(--focus-border-color);\n }\n .button:active:not(:disabled),\n .button:active:not(:disabled) .button-content {\n background: var(--active-background-color);\n color: var(--active-text-color);\n border-color: var(--active-border-color);\n }\n .icon {\n display: flex;\n min-width: 16px;\n min-height: 1em;\n justify-content: center;\n align-items: center;\n }\n .label {\n line-height: inherit;\n min-height: 1em;\n align-items: center;\n }\n ',this.shadowRoot.appendChild(e)}_applyUnfilledInteractionStyles(e,n){const t=`var(${e[0]}, #f7f7fa)`;this.button.style.setProperty("--hover-background-color",`var(${e[4]}, #292a2b)`),this.button.style.setProperty("--hover-text-color",`var(${e[0]}, #f7f7fa)`),this.button.style.setProperty("--focus-background-color",`var(${e[5]}, #46474a)`),this.button.style.setProperty("--focus-text-color",`var(${e[0]}, #f7f7fa)`),this.button.style.setProperty("--active-background-color",`var(${e[0]}, #f7f7fa)`),this.button.style.setProperty("--active-text-color",`var(${e[6]}, #0c0c0d)`),"outlined"===n?(this.button.style.setProperty("--hover-border-color",t),this.button.style.setProperty("--focus-border-color",t),this.button.style.setProperty("--active-border-color",t)):(this.button.style.setProperty("--hover-border-color",`var(${e[4]}, #292a2b)`),this.button.style.setProperty("--focus-border-color",`var(${e[5]}, #46474a)`),this.button.style.setProperty("--active-border-color",`var(${e[0]}, #f7f7fa)`))}_getColorVarsMap(){return{primary:["--primary-content--","--primary-content-hover","--primary-content-active","--primary-background-component","--primary-background-hover","--primary-background-active","--primary-content-inverse"],secondary:["--secondary-content--","--secondary-content-hover","--secondary-content-active","--secondary-background-component","--secondary-background-hover","--secondary-background-active","--secondary-content-inverse"],base:["--base-content--","--base-content-lighter","--base-content-lightest","--base-background-component","--base-background-hover","--base-background-active","--base-content-inverse"],success:["--success-content--","--success-content-hover","--success-content-active","--success-background-component","--success-background-hover","--success-background-active","--success-content-inverse"],error:["--error-content--","--error-content-hover","--error-content-active","--error-background-component","--error-background-hover","--error-background-active","--error-content-inverse"],warning:["--warning-content--","--warning-content-hover","--warning-content-active","--warning-background-component","--warning-background-hover","--warning-background-active","--warning-content-inverse"],help:["--help-content--","--help-content-hover","--help-content-active","--help-background-component","--help-background-hover","--help-background-active","--help-content-inverse"]}}_handleClick(){const e={},n=this.getAttribute("data-event");!this.hasAttribute("disabled")&&n&&(Array.from(this.attributes).filter(e=>e.name.startsWith("data-detail-")).forEach(n=>{const t=n.name.replace("data-detail-","");e[t]=n.value}),this.dispatchEvent(new CustomEvent(n,{detail:e,bubbles:!0,composed:!0})))}_init(){this._applyStyles(),this._render(),this._proxyNativeOnClick(),this._addEventListeners()}_manageSlotVisibility(e,n){const t=e?this.shadowRoot.querySelector(`slot[name="${e}"]`):this.shadowRoot.querySelector("slot:not([name])"),r=this.shadowRoot.querySelector(n),o=()=>{const e=t.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));r.style.display=e?"inline-flex":"none"};o(),t.addEventListener("slotchange",o)}_proxyNativeOnClick(){try{Object.defineProperty(this,"onclick",{get:()=>this.button.onclick,set:e=>{this.button.onclick=e},configurable:!0,enumerable:!0})}catch(e){console.warn("Could not redefine onclick:",e)}}_render(){const e=this.hasAttribute("href"),n="A"===this.button?.tagName;this.button&&e!==n&&(this.button.remove(),this.button=null),this.button\|\|(this.button=e?document.createElement("a"):document.createElement("button"),this.button.classList.add("button"),this.button.setAttribute("part","button"),e\|\|(this.button.setAttribute("role","button"),this.button.setAttribute("tabindex","0")),this.shadowRoot.appendChild(this.button)),this._updateButtonAttributes();const t=this.hasAttribute("disabled");e?t?(this.button.removeAttribute("href"),this.button.setAttribute("aria-disabled","true"),this.button.setAttribute("tabindex","-1")):(this.button.setAttribute("href",this.getAttribute("href")),this.button.setAttribute("aria-disabled","false"),this.button.removeAttribute("tabindex")):t?(this.button.setAttribute("disabled",""),this.button.setAttribute("aria-disabled","true")):(this.button.removeAttribute("disabled"),this.button.setAttribute("aria-disabled","false")),this.button.innerHTML='\n <span class="icon left-icon" part="left-icon"><slot name="left-icon"></slot></span>\n <span class="label" part="label"><slot></slot></span>\n <span class="icon right-icon" part="right-icon"><slot name="right-icon"></slot></span>\n ',this._manageSlotVisibility("left-icon",".left-icon"),this._manageSlotVisibility("right-icon",".right-icon"),this._manageSlotVisibility("",".label")}_updateButtonAttributes(){const e="A"===this.button?.tagName,n=new Set(["type","disabled","name","value","autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget"]),t=new Set(["href","target","rel"]);L.observedAttributes.forEach(r=>{e&&n.has(r)\|\|e&&"href"===r\|\|!e&&t.has(r)\|\|(this.hasAttribute(r)?this.button.setAttribute(r,this.getAttribute(r)):this.button.removeAttribute(r))})}_updateStyles(){const{color:e,size:n,styleType:t}=this,r=this._getColorVarsMap();if(!r[e]&&e&&(e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl")))return void this._applyCustomColorStyles(e,t,n);const o=r[e],a={outlined:{"--background-color":`var(${o[3]}, #0c0c0d)`,"--border-color":`var(${o[0]}, #f7f7fa)`,"--text-color":`var(${o[0]}, #f7f7fa)`},filled:{"--background-color":`var(${o[0]}, #f7f7fa)`,"--border-color":`var(${o[0]}, #f7f7fa)`,"--text-color":`var(${o[6]}, #0c0c0d)`},flat:{"--background-color":`var(${o[3]},#0c0c0d)`,"--border-color":`var(${o[3]},#0c0c0d)`,"--text-color":`var(${o[0]},#f7f7fa)`}},i=a[t]\|\|a.outlined;Object.entries(i).forEach(([e,n])=>{this.button.style.setProperty(e,n)}),this._applyInteractionStyles(o,t),this._applySizeStyles(n)}}customElements.get("y-button")\|\|customElements.define("y-button",L);const D=new Set(["svg","g","path","circle","ellipse","rect","line","polyline","polygon","text","tspan","defs","clippath","mask","lineargradient","radialgradient","stop","symbol","title","desc","metadata"]),T=new Set(["viewbox","xmlns","fill","stroke","stroke-width","stroke-linecap","stroke-linejoin","stroke-dasharray","stroke-dashoffset","stroke-miterlimit","stroke-opacity","fill-opacity","fill-rule","clip-rule","opacity","d","cx","cy","r","rx","ry","x","x1","x2","y","y1","y2","width","height","points","transform","id","class","clip-path","mask","offset","stop-color","stop-opacity","gradient-units","gradienttransform","gradientunits","spreadmethod","patternunits","patterntransform","font-size","font-family","font-weight","text-anchor","dominant-baseline","alignment-baseline","dx","dy","rotate","textlength","lengthadjust","display","visibility","color","vector-effect"]);const R=new Map;function I(e){if(R.has(e))return R.get(e);const n=function(e){if(!e)return"";const n=(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg");if(!n)return"";const t=e=>{for(const n of[...e.children])if(D.has(n.tagName.toLowerCase())){for(const e of[...n.attributes])T.has(e.name.toLowerCase())\|\|n.removeAttribute(e.name);t(n)}else n.remove()};for(const e of[...n.attributes])T.has(e.name.toLowerCase())\|\|n.removeAttribute(e.name);return t(n),n.outerHTML}(r(e));return R.set(e,n),n}class B extends HTMLElement{static get observedAttributes(){return["name","size","color","label","weight"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get color(){return this.getAttribute("color")\|\|""}set color(e){e?this.setAttribute("color",e):this.removeAttribute("color")}get label(){return this.getAttribute("label")\|\|""}set label(e){e?this.setAttribute("label",e):this.removeAttribute("label")}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get weight(){return this.getAttribute("weight")\|\|"regular"}set weight(e){e?this.setAttribute("weight",e):this.removeAttribute("weight")}render(){const e=I(this.name),n=this._getSize(this.size),t=this.color?this._getColor(this.color):"inherit",r=this._getWeight(this.weight);this._updateAria(),this.shadowRoot.innerHTML=`\n <style>\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${n};\n height: ${n};\n color: ${t};\n line-height: 0;\n }\n .icon-wrapper svg {\n width: 100%;\n height: 100%;\n }\n ${this._getWeightCSS(r)}\n </style>\n <span class="icon-wrapper" part="icon">${e}</span>\n `}_getColor(e){const n={base:"var(--base-content--, #f7f7fa)",primary:"var(--primary-content--, #0576ff)",secondary:"var(--secondary-content--, #04b8b8)",success:"var(--success-content--, #2dba73)",warning:"var(--warning-content--, #d17f04)",error:"var(--error-content--, #b80421)",help:"var(--help-content--, #5405ff)"};return n[e]?n[e]:e&&(e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl"))?e:n.base}_getSize(e){const n={"x-small":"var(--component-icon-size-x-small, 10px)",small:"var(--component-icon-size-small, 14px)",medium:"var(--component-icon-size-medium, 18px)",large:"var(--component-icon-size-large, 22px)","x-large":"var(--component-icon-size-x-large, 28px)"};return n[e]\|\|n.medium}_getWeight(e){return{"x-thin":"1",thin:"1.5",regular:"2",thick:"2.5","x-thick":"3"}[e]\|\|""}_getWeightCSS(e){return e?`.icon-wrapper svg,\n .icon-wrapper svg { stroke-width: ${e} !important; }`:""}_updateAria(){this.label?(this.setAttribute("role","img"),this.setAttribute("aria-label",this.label),this.removeAttribute("aria-hidden")):(this.setAttribute("aria-hidden","true"),this.removeAttribute("role"),this.removeAttribute("aria-label"))}}customElements.get("y-icon")\|\|customElements.define("y-icon",B);class P extends HTMLElement{static get observedAttributes(){return["items","anchor","visible","direction","size","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onAnchorClick=this._onAnchorClick.bind(this),this._onDocumentClick=this._onDocumentClick.bind(this),this._onScrollOrResize=this._onScrollOrResize.bind(this)}connectedCallback(){this.hasAttribute("items")\|\|(this.items=[]),this._setupAnchor(),this.render(),document.addEventListener("click",this._onDocumentClick),window.addEventListener("scroll",this._onScrollOrResize,!0),window.addEventListener("resize",this._onScrollOrResize),this.style.position="fixed",this.style.zIndex="1000",this.style.display="none",this.visible&&this._updatePosition()}disconnectedCallback(){this._teardownAnchor(),document.removeEventListener("click",this._onDocumentClick),window.removeEventListener("scroll",this._onScrollOrResize,!0),window.removeEventListener("resize",this._onScrollOrResize)}attributeChangedCallback(e,n,t){n!==t&&("items"!==e&&"size"!==e\|\|this.render(),"anchor"===e&&(this._teardownAnchor(),this._setupAnchor()),"visible"!==e&&"direction"!==e\|\|this._updatePosition())}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get direction(){return this.getAttribute("direction")\|\|"down"}set direction(e){this.setAttribute("direction",e)}get items(){try{return JSON.parse(this.getAttribute("items"))\|\|[]}catch{return[]}}set items(e){this.setAttribute("items",Array.isArray(e)?JSON.stringify(e):e??"[]")}get history(){return this.getAttribute("history")}set history(e){null!=e?this.setAttribute("history",e):this.removeAttribute("history")}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",["small","medium","large"].includes(e)?e:"medium")}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}render(){this.shadowRoot.innerHTML="";const e=document.createElement("style");e.textContent=this._buildStyles(),this.shadowRoot.appendChild(e);const n=this._createMenuList(this.items);n.classList.add("menu"),n.setAttribute("role","menu"),n.setAttribute("part","menu"),this.shadowRoot.appendChild(n)}_buildStyles(){return`\n ul.menu,\n ul.submenu {\n list-style: none;\n margin: 0;\n padding: 0;\n background: var(--component-menu-background, #0c0c0d);\n border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);\n border-radius: var(--component-menu-border-radius, 4px);\n box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));\n min-width: 150px;\n }\n\n li.menuitem {\n cursor: pointer;\n padding: ${`var(--component-button-padding-${this.size}, 0.5rem)`};\n display: flex;\n align-items: center;\n justify-content: space-between;\n white-space: nowrap;\n color: var(--component-menu-color, #f7f7fa);\n font-size: var(--font-size-button, 1em);\n position: relative;\n }\n\n li.menuitem:hover {\n background: var(--component-menu-hover-background, #292a2b);\n }\n\n li.menuitem.selected {\n background: var(--component-menu-selected-background);\n color: var(--component-menu-selected-color);\n }\n\n li.menuitem.selected:hover {\n background: var(--component-menu-selected-background);\n }\n\n ul.submenu {\n position: absolute;\n top: 0;\n left: 100%;\n display: none;\n z-index: var(--component-menu-z-index, 1001);\n }\n\n li.menuitem:hover > ul.submenu {\n display: block;\n }\n\n .submenu-indicator {\n display: inline-flex;\n align-items: center;\n margin-left: 0.5rem;\n opacity: 0.6;\n }\n\n .submenu-indicator svg {\n width: 16px;\n height: 16px;\n }\n\n .item-content {\n flex: 1;\n }\n `}static _closeAll(e){document.querySelectorAll("y-menu").forEach(n=>{n!==e&&n.visible&&(n.visible=!1)})}_createMenuList(e){const n=document.createElement("ul");return e.forEach(e=>{const t=document.createElement("li");t.className=e.selected?"menuitem selected":"menuitem",t.setAttribute("role","menuitem"),t.setAttribute("part",e.selected?"menuitem selected":"menuitem"),t.setAttribute("aria-current",e.selected?"true":"false"),t.tabIndex=0;const r=document.createElement("span");if(r.className="item-content",e["icon-template"]){const n=this._findTemplate(e["icon-template"]);n&&r.appendChild(n.content.cloneNode(!0))}if(e.template){const n=this._findTemplate(e.template);n?r.appendChild(n.content.cloneNode(!0)):r.append(e.text)}else r.append(e.text);if(t.appendChild(r),e.url&&t.addEventListener("click",()=>{const n=new CustomEvent("navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:{href:e.url}});!this.dispatchEvent(n)\|\|("false"!==this.getAttribute("history")?(history.pushState({},"",e.url),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))):window.location.href=e.url)}),e.children?.length\|\|t.addEventListener("click",()=>{this.visible=!1}),e.children?.length){const n=document.createElement("span");n.className="submenu-indicator",n.innerHTML=c,t.appendChild(n);const r=this._createMenuList(e.children);r.classList.add("submenu"),r.setAttribute("role","menu"),t.appendChild(r)}n.appendChild(t)}),n}_findTemplate(e){return this.querySelector(`template[slot="${e}"]`)}_onAnchorClick(e){e.stopPropagation(),this.visible\|\|P._closeAll(this),this.visible=!this.visible}_onDocumentClick(e){const n=e.composedPath();this._anchorEl&&n.includes(this._anchorEl)\|\|n.includes(this)\|\|(this.visible=!1)}_onScrollOrResize(){this.visible&&this._updatePosition()}_setupAnchor(){const e=this.anchor;if(!e)return;const n=this.getRootNode();this._anchorResolveDispose=$(this,e,e=>{this._anchorEl=e,e.addEventListener("click",this._onAnchorClick)},n&&n.getElementById?n:document)}_teardownAnchor(){this._anchorResolveDispose&&(this._anchorResolveDispose(),this._anchorResolveDispose=null),this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}_updatePosition(){if(!this.visible\|\|!this._anchorEl)return void(this.style.display="none");const e=this._anchorEl.getBoundingClientRect();this.style.visibility="hidden",this.style.display="block";const n=this.getBoundingClientRect();this.style.visibility="";const t=window.innerWidth,r=window.innerHeight;let o,a;"right"===this.direction?(o=e.top,a=e.right,a+n.width>t&&(a=e.left-n.width),o+n.height>r&&(o=e.top-n.height)):"up"===this.direction?(o=e.top-n.height,a=e.left,o<0&&(o=e.bottom),a+n.width>t&&(a=t-n.width-10)):"left"===this.direction?(o=e.top,a=e.left-n.width,a<0&&(a=e.right),o+n.height>r&&(o=e.top-n.height)):(o=e.bottom,a=e.left,o+n.height>r&&(o=e.top-n.height),a+n.width>t&&(a=t-n.width-10)),o=Math.max(0,Math.min(o,r-n.height)),a=Math.max(0,Math.min(a,t-n.width)),this.style.top=`${o}px`,this.style.left=`${a}px`,this.style.display="block"}}customElements.get("y-menu")\|\|customElements.define("y-menu",P);const H={small:{padding:"var(--spacing-x-small, 4px)",collapsedWidth:"var(--component-appbar-collapsed-width-small, 40px)",bodyGap:"2px",buttonSize:"small",iconSize:"small"},medium:{padding:"var(--spacing-small, 6px)",collapsedWidth:"var(--component-appbar-collapsed-width-medium, 52px)",bodyGap:"3px",buttonSize:"medium",iconSize:"medium"},large:{padding:"var(--spacing-medium, 8px)",collapsedWidth:"var(--component-appbar-collapsed-width-large, 64px)",bodyGap:"4px",buttonSize:"large",iconSize:"large"}};class j extends HTMLElement{static get observedAttributes(){return["orientation","collapsed","items","size","menu-direction","sticky","mobile-breakpoint","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onCollapseClick=this._onCollapseClick.bind(this),this._onMediaChange=this._onMediaChange.bind(this),this._idCounter=0,this._mql=null,this._isMobile=!1}connectedCallback(){this._setupMediaQuery(),this.render()}disconnectedCallback(){this._teardownMediaQuery()}attributeChangedCallback(e,n,t){n!==t&&("mobile-breakpoint"!==e&&"orientation"!==e\|\|this._setupMediaQuery(),this.render())}get collapsed(){return this.hasAttribute("collapsed")}set collapsed(e){e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed")}get items(){try{return JSON.parse(this.getAttribute("items"))\|\|[]}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get menuDirection(){return this.getAttribute("menu-direction")\|\|""}set menuDirection(e){e?this.setAttribute("menu-direction",e):this.removeAttribute("menu-direction")}get mobile(){return this._isMobile}get mobileBreakpoint(){return this.getAttribute("mobile-breakpoint")\|\|""}set mobileBreakpoint(e){e?this.setAttribute("mobile-breakpoint",e):this.removeAttribute("mobile-breakpoint")}get orientation(){return this.getAttribute("orientation")\|\|"vertical"}set orientation(e){this.setAttribute("orientation",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get history(){return this.getAttribute("history")}set history(e){null!=e?this.setAttribute("history",e):this.removeAttribute("history")}get sticky(){const e=this.getAttribute("sticky");return!!["start","end"].includes(e)&&e}set sticky(e){"start"===e\|\|"end"===e?this.setAttribute("sticky",e):this.removeAttribute("sticky")}toggle(){this.collapsed=!this.collapsed}render(){this._isMobile?this._renderMobile():this._renderDesktop()}_buildCollapseButton(e,n){const t=document.createElement("y-button");t.setAttribute("color","base"),t.setAttribute("style-type","flat"),t.setAttribute("size",e.buttonSize),t.setAttribute("aria-label",n?"Expand sidebar":"Collapse sidebar"),t.className="collapse-btn";const r=document.createElement("span");return r.slot="left-icon",r.innerHTML=n?b:h,t.appendChild(r),n\|\|t.appendChild(document.createTextNode("Collapse")),t.addEventListener("click",this._onCollapseClick),t}_buildHeader(){const e=document.createElement("div");e.className="appbar-header",e.setAttribute("part","header");const n=document.createElement("div");n.className="header-content";const t=document.createElement("div");t.className="logo-wrapper",t.appendChild(this._makeSlot("logo")),n.appendChild(t);const r=document.createElement("div");return r.className="header-title",r.appendChild(this._makeSlot("title")),n.appendChild(r),e.appendChild(n),e.appendChild(this._makeSlot("header")),e}_buildNavItem(e,n,t,r,o){const a=e.children?.length>0,i=document.createElement("div"),l=document.createElement("y-button"),d=this._uid("appbar-btn");if(i.className="nav-item",l.id=d,l.setAttribute("color",this._isItemActive(e)?"primary":"base"),l.setAttribute("style-type","flat"),l.setAttribute("size",n.buttonSize),e.icon)if(e.icon.trim().startsWith("<")){const n=document.createElement("span");n.slot="left-icon",n.setAttribute("part","icon"),n.innerHTML=e.icon,l.appendChild(n)}else{const t=document.createElement("y-icon");t.slot="left-icon",t.setAttribute("part","icon"),t.setAttribute("name",e.icon),t.setAttribute("size",n.iconSize),l.appendChild(t)}if(e.text&&!r&&l.appendChild(document.createTextNode(e.text)),a&&!r){const e=document.createElement("span");e.slot="right-icon",e.innerHTML=t?c:s,l.appendChild(e)}if(e.href&&!a&&l.addEventListener("click",()=>{const n=new CustomEvent("navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:{href:e.href}});!this.dispatchEvent(n)\|\|("false"!==this.getAttribute("history")?(history.pushState({},"",e.href),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))):window.location.href=e.href)}),e.slot){const n=this._makeSlot(e.slot);n.appendChild(l),i.appendChild(n)}else i.appendChild(l);if(a){const t=document.createElement("y-menu");t.setAttribute("anchor",d),t.setAttribute("direction",o),t.setAttribute("size",n.buttonSize),t.items=e.children,i.appendChild(t)}return i}_getBreakpointPx(){const e=this.mobileBreakpoint;if(e){const n=parseInt(e,10);if(!isNaN(n)&&n>0)return n}const n=getComputedStyle(document.documentElement).getPropertyValue("--component-appbar-mobile-breakpoint").trim();if(n){const e=parseInt(n,10);if(!isNaN(e)&&e>0)return e}return 768}_initRender(){this.shadowRoot.innerHTML="",this._idCounter=0}_isItemActive(e){if(e.selected)return!0;if(e.href){const n=window.location,t=n.pathname+n.search+n.hash;return e.href===t\|\|e.href===n.href}return!1}_makeSlot(e){const n=document.createElement("slot");return n.name=e,n}_onCollapseClick(){this.toggle()}_onMediaChange(e){this._isMobile=e.matches,this.render()}_renderDesktop(){this._initRender();const e="vertical"===this.orientation,n=this.collapsed&&e,t=H[this.size]\|\|H.medium,r=this.menuDirection\|\|(e?"right":"down"),o=document.createElement("style");o.textContent='\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n color: var(--component-appbar-color, #f7f7fa);\n }\n\n :host([sticky]) {\n position: sticky;\n z-index: var(--component-appbar-z-index, 100);\n }\n :host([orientation="vertical"][sticky="start"]),\n :host(:not([orientation])[sticky="start"]) {\n left: 0;\n top: 0;\n height: 100%;\n }\n :host([orientation="vertical"][sticky="end"]),\n :host(:not([orientation])[sticky="end"]) {\n right: 0;\n top: 0;\n height: 100%;\n }\n :host([orientation="horizontal"][sticky="start"]) {\n top: 0;\n left: 0;\n width: 100%;\n }\n :host([orientation="horizontal"][sticky="end"]) {\n bottom: 0;\n left: 0;\n width: 100%;\n }\n\n :host([sticky]) .appbar {\n border-radius: 0;\n border: none;\n }\n :host([orientation="vertical"][sticky="start"]) .appbar,\n :host(:not([orientation])[sticky="start"]) .appbar {\n border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n :host([orientation="vertical"][sticky="end"]) .appbar,\n :host(:not([orientation])[sticky="end"]) .appbar {\n border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n :host([orientation="horizontal"][sticky="start"]) .appbar {\n border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n :host([orientation="horizontal"][sticky="end"]) .appbar {\n border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n\n .appbar {\n display: flex;\n background: var(--component-appbar-background, #0c0c0d);\n border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));\n overflow: visible;\n padding: var(--_appbar-padding);\n box-sizing: border-box;\n }\n\n .appbar.vertical {\n flex-direction: column;\n width: var(--component-appbar-width, 240px);\n height: 100%;\n transition: width 0.2s ease;\n }\n .appbar.vertical.collapsed {\n width: var(--_appbar-collapsed-width);\n }\n\n .appbar.horizontal {\n flex-direction: row;\n width: 100%;\n height: auto;\n align-items: center;\n }\n\n .appbar-header,\n .appbar-body,\n .appbar-footer {\n flex-shrink: 0;\n }\n\n .appbar-body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n gap: var(--_appbar-body-gap);\n }\n\n .appbar.vertical .appbar-body {\n flex-direction: column;\n }\n .appbar.horizontal .appbar-body {\n flex-direction: row;\n overflow-y: hidden;\n overflow-x: auto;\n align-items: center;\n }\n\n .appbar.vertical .appbar-header {\n border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n padding-bottom: var(--_appbar-padding);\n margin-bottom: var(--_appbar-padding);\n }\n .appbar.vertical .appbar-footer {\n border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n padding-top: var(--_appbar-padding);\n margin-top: var(--_appbar-padding);\n }\n\n .appbar.horizontal .appbar-header {\n border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n padding: var(--_appbar-padding);\n padding-right: var(--spacing-x-large, 16px);\n margin-right: var(--_appbar-padding);\n }\n .appbar.horizontal .appbar-footer {\n border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n padding-left: var(--_appbar-padding);\n margin-left: var(--_appbar-padding);\n }\n\n .header-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-small, 8px);\n overflow: hidden;\n }\n .appbar.vertical .header-content {\n padding: var(--_button-padding) 0;\n gap: var(--_button-padding);\n }\n .logo-wrapper {\n width: var(--_icon-col-width);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n }\n .appbar.vertical .logo-wrapper {\n margin-left: var(--component-button-border-width, 2px);\n }\n\n .header-title {\n font-weight: bold;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--font-size-label, 0.9em);\n }\n .appbar.vertical.collapsed .header-title {\n display: none;\n }\n\n .nav-item {\n display: flex;\n align-items: center;\n position: relative;\n }\n .appbar.vertical .nav-item {\n width: 100%;\n }\n .appbar.vertical .nav-item y-button {\n display: block;\n width: 100%;\n }\n .appbar.vertical .nav-item y-button::part(button),\n .appbar.vertical .appbar-footer y-button::part(button) {\n width: 100%;\n justify-content: flex-start;\n padding-left: 0;\n padding-right: 0;\n }\n\n /* Fixed-width icon column — matches collapsed inner width so icons stay centred across states /\n .appbar.vertical .nav-item y-button::part(left-icon),\n .appbar.vertical .appbar-footer y-button::part(left-icon) {\n width: var(--_icon-col-width);\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .appbar.vertical .nav-item y-button::part(right-icon) {\n margin-left: auto;\n }\n\n .appbar.vertical.collapsed .nav-item y-button::part(button),\n .appbar.vertical.collapsed .appbar-footer y-button::part(button) {\n min-width: 0;\n }\n .appbar.vertical.collapsed .nav-item y-button::part(label),\n .appbar.vertical.collapsed .appbar-footer y-button::part(label) {\n display: none;\n }\n .appbar.vertical.collapsed .nav-item y-button::part(right-icon),\n .appbar.vertical.collapsed .appbar-footer y-button::part(right-icon) {\n display: none;\n }\n\n .appbar-footer {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n .appbar.horizontal .appbar-footer {\n flex-direction: row;\n align-items: center;\n }\n .appbar.vertical .appbar-footer y-button {\n display: block;\n width: 100%;\n }\n\n .appbar.vertical.collapsed .appbar-header,\n .appbar.vertical.collapsed .appbar-body,\n .appbar.vertical.collapsed .appbar-footer {\n align-items: center;\n }\n\n ::slotted() {\n display: block;\n }\n span[slot="left-icon"] svg,\n span[slot="right-icon"] svg {\n width: var(--component-icon-size-large, 1.25em);\n height: var(--component-icon-size-large, 1.25em);\n }\n ',this.shadowRoot.appendChild(o);const a=document.createElement("div");a.className="appbar "+(e?"vertical":"horizontal"),n&&a.classList.add("collapsed"),a.setAttribute("role","navigation"),a.style.setProperty("--_appbar-padding",t.padding),a.style.setProperty("--_appbar-collapsed-width",t.collapsedWidth),a.style.setProperty("--_appbar-body-gap",t.bodyGap),a.style.setProperty("--_button-padding",`var(--component-button-padding-${t.buttonSize})`),a.style.setProperty("--_icon-col-width",`calc(${t.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) - 2 * var(--component-button-border-width, 1px))`),a.appendChild(this._buildHeader());const i=document.createElement("div");i.className="appbar-body",i.setAttribute("part","body"),this.items.forEach(o=>{i.appendChild(this._buildNavItem(o,t,e,n,r))}),a.appendChild(i);const s=document.createElement("div");s.className="appbar-footer",s.setAttribute("part","footer"),s.appendChild(this._makeSlot("footer")),e&&s.appendChild(this._buildCollapseButton(t,n)),a.appendChild(s),this.shadowRoot.appendChild(a)}_renderMobile(){this._initRender();const e=H[this.size]\|\|H.medium,n=document.createElement("style");n.textContent='\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n color: var(--component-appbar-color, #f7f7fa);\n }\n\n :host([sticky]),\n :host([sticky="start"]),\n :host([sticky="end"]) {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: var(--component-appbar-z-index, 100);\n }\n\n :host([sticky]) .appbar {\n border-radius: 0;\n border: none;\n border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n\n .appbar {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: var(--component-appbar-background, #0c0c0d);\n border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));\n overflow: visible;\n padding: var(--_appbar-padding);\n box-sizing: border-box;\n width: 100%;\n height: auto;\n }\n\n .mobile-start {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .mobile-center {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n }\n\n .mobile-end {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .mobile-end ::slotted() {\n display: block;\n }\n\n ::slotted() {\n display: block;\n }\n span[slot="left-icon"] svg,\n span[slot="right-icon"] svg {\n width: var(--component-icon-size-large, 1.25em);\n height: var(--component-icon-size-large, 1.25em);\n }\n ',this.shadowRoot.appendChild(n);const t=document.createElement("div");t.className="appbar",t.setAttribute("role","navigation"),t.style.setProperty("--_appbar-padding",e.padding);const r=document.createElement("div");r.className="mobile-start";const o=document.createElement("y-button"),a=this._uid("appbar-mobile-menu");o.id=a,o.setAttribute("color","base"),o.setAttribute("style-type","flat"),o.setAttribute("size",e.buttonSize),o.setAttribute("aria-label","Open menu");const i=document.createElement("span");i.slot="left-icon",i.innerHTML=u,o.appendChild(i),r.appendChild(o);const s=this.items;if(s.length>0){const n=document.createElement("y-menu");n.setAttribute("anchor",a),n.setAttribute("direction","down"),n.setAttribute("size",e.buttonSize),n.items=this._toMenuItems(s),r.appendChild(n)}t.appendChild(r);const c=document.createElement("div");c.className="mobile-center",c.appendChild(this._makeSlot("logo")),c.appendChild(this._makeSlot("title")),t.appendChild(c);const l=document.createElement("div");l.className="mobile-end",l.setAttribute("part","footer"),l.appendChild(this._makeSlot("footer")),t.appendChild(l),this.shadowRoot.appendChild(t)}_setupMediaQuery(){if(this._teardownMediaQuery(),"horizontal"!==this.orientation)return void(this._isMobile=!1);const e=this._getBreakpointPx();this._mql=window.matchMedia(`(max-width: ${e}px)`),this._isMobile=this._mql.matches,this._mql.addEventListener("change",this._onMediaChange)}_teardownMediaQuery(){this._mql&&(this._mql.removeEventListener("change",this._onMediaChange),this._mql=null)}_toMenuItems(e){return e.map(e=>{const n={text:e.text\|\|""};return e.href&&(n.url=e.href),e.icon&&(n.icon=e.icon),e.children?.length&&(n.children=this._toMenuItems(e.children)),n})}_uid(e){return`${e}-${this._idCounter++}`}}customElements.get("y-appbar")\|\|customElements.define("y-appbar",j);class q extends HTMLElement{static get observedAttributes(){return["src","alt","size","shape","color"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get alt(){return this.getAttribute("alt")\|\|"AN"}set alt(e){this.setAttribute("alt",e)}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get shape(){return this.getAttribute("shape")\|\|"circle"}set shape(e){this.setAttribute("shape",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get src(){return this.getAttribute("src")}set src(e){e?this.setAttribute("src",e):this.removeAttribute("src")}render(){const e=this._getDimensions(this.size),n=`var(--component-avatar-border-radius-${this.shape}, 9999px)`,[t,r]=k(this.color);this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet(e,n,t,r)],this.shadowRoot.innerHTML=this.src?`<img src="${this.src}" alt="${this.alt}" part="avatar" />`:`<div class="avatar" part="avatar"><h5>${this._getInitials(this.alt)}</h5></div>`}_buildStyleSheet(e,n,t,r){const o=new CSSStyleSheet,a=this.src?`\n :host {\n display: inline-block;\n height: ${e};\n min-width: ${e};\n }\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ${n};\n }\n `:`\n :host {\n display: inline-block;\n width: ${e};\n height: ${e};\n min-width: ${e};\n font-family: var(--font-family-header, "Lexend"), sans-serif;\n text-transform: uppercase;\n }\n .avatar {\n width: 100%;\n height: 100%;\n border-radius: ${n};\n background-color: ${t};\n color: ${r};\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .avatar h5 {\n margin: 0;\n font-size: calc(${e} * 0.5);\n }\n `;return o.replaceSync(a),o}_getDimensions(e){const n={small:"var(--component-avatar-size-small, 27px)",medium:"var(--component-avatar-size-medium, 35px)",large:"var(--component-avatar-size-large, 51px)"};return n[e]\|\|n.medium}_getInitials(e){const n=e.trim().split(/\s+/);return n.length>=2?n[0].charAt(0)+n[1].charAt(0):e.substring(0,2)}}customElements.get("y-avatar")\|\|customElements.define("y-avatar",q);class V extends HTMLElement{static get observedAttributes(){return["color","icon","position","sticky","dismissable","dismissed","size"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this._bindSlotListeners()}attributeChangedCallback(e,n,t){n!==t&&("dismissed"!==e?(this.render(),this._bindSlotListeners()):this._applyDismissedState())}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get icon(){return this.getAttribute("icon")\|\|""}set icon(e){e?this.setAttribute("icon",e):this.removeAttribute("icon")}get position(){return this.getAttribute("position")\|\|"push"}set position(e){this.setAttribute("position",e)}get sticky(){return this.hasAttribute("sticky")}set sticky(e){e?this.setAttribute("sticky",""):this.removeAttribute("sticky")}get dismissable(){return this.hasAttribute("dismissable")}set dismissable(e){e?this.setAttribute("dismissable",""):this.removeAttribute("dismissable")}get dismissed(){return this.hasAttribute("dismissed")}set dismissed(e){e?this.setAttribute("dismissed",""):this.removeAttribute("dismissed")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}dismiss(){const e=new CustomEvent("dismiss",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e)&&(this.dismissed=!0)}show(){this.dismissed=!1}render(){const e=this.color,n=this.size,t=this.icon;this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e,n)}</style>\n <div class="banner" part="banner" role="region" aria-label="${this._getAriaLabel(e)}">\n <span class="icon-wrapper" part="icon">\n <slot name="icon">${t?`<y-icon name="${t}" size="${this._getIconSize(n)}"></y-icon>`:""}</slot>\n </span>\n <span class="content" part="content">\n <slot></slot>\n </span>\n <span class="action-wrapper" part="action">\n <slot name="action"></slot>\n </span>\n ${this.dismissable?`<y-button class="close-btn" part="close-btn" aria-label="Dismiss banner" color="${e}" style-type="filled" size="${n}"><y-icon name="close" size="${this._getIconSize(n)}"></y-icon></y-button>`:""}\n </div>\n `,this.dismissable&&this.shadowRoot.querySelector(".close-btn").addEventListener("click",()=>this.dismiss()),this._applyDismissedState()}_bindSlotListeners(){const e=this.shadowRoot.querySelector("slot[name='icon']"),n=this.shadowRoot.querySelector("slot[name='action']");e&&e.addEventListener("slotchange",()=>this._updateSlotVisibility()),n&&n.addEventListener("slotchange",()=>this._updateSlotVisibility()),this._updateSlotVisibility()}_updateSlotVisibility(){const e=this.shadowRoot.querySelector("slot[name='icon']"),n=this.shadowRoot.querySelector("slot[name='action']"),t=this.shadowRoot.querySelector(".icon-wrapper"),r=this.shadowRoot.querySelector(".action-wrapper");if(e&&t){const n=e.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim())),r=!!this.icon;t.style.display=n\|\|r?"":"none"}if(n&&r){const e=n.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));r.style.display=e?"":"none"}}_applyDismissedState(){this.dismissed?this.setAttribute("hidden",""):this.removeAttribute("hidden")}_getAriaLabel(e){return{base:"Banner",primary:"Information banner",secondary:"Information banner",success:"Success banner",error:"Error banner",warning:"Warning banner",help:"Help banner"}[e]\|\|"Banner"}_getIconSize(e){return{small:"small",medium:"medium",large:"large"}[e]\|\|"medium"}_getColorVars(e){const n={base:["--base-content--","--base-content-inverse"],primary:["--primary-content--","--primary-content-inverse"],secondary:["--secondary-content--","--secondary-content-inverse"],success:["--success-content--","--success-content-inverse"],error:["--error-content--","--error-content-inverse"],warning:["--warning-content--","--warning-content-inverse"],help:["--help-content--","--help-content-inverse"]};return n[e]\|\|n.base}_buildStyles(e,n){const[t,r]=this._getColorVars(e),o="overlap"===this.position,a=this.sticky,i={small:{padding:"var(--component-banner-padding-small, var(--spacing-x-small) var(--spacing-medium))",fontSize:"var(--font-size-small, 0.8em)",iconSize:"var(--component-banner-icon-size-small, 14px)"},medium:{padding:"var(--component-banner-padding-medium, var(--spacing-medium) var(--spacing-x-large))",fontSize:"var(--font-size-label, 0.83em)",iconSize:"var(--component-banner-icon-size-medium, 18px)"},large:{padding:"var(--component-banner-padding-large, var(--spacing-large) var(--spacing-2x-large))",fontSize:"var(--font-size-paragraph, 1em)",iconSize:"var(--component-banner-icon-size-large, 22px)"}},s=i[n]\|\|i.medium;let c="";return o&&a?c="\n :host {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: var(--component-banner-z-index, 200);\n }\n ":o&&(c="\n :host {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: var(--component-banner-z-index, 200);\n }\n "),`\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${c}\n\n .banner {\n display: flex;\n align-items: center;\n gap: var(--component-banner-gap, var(--spacing-medium, 8px));\n padding: ${s.padding};\n background: var(${t});\n color: var(${r});\n font-size: ${s.fontSize};\n line-height: 1.4;\n border-radius: var(--component-banner-border-radius, 0);\n box-sizing: border-box;\n width: 100%;\n }\n\n .icon-wrapper {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: inherit;\n }\n\n .icon-wrapper y-icon {\n color: inherit;\n --component-icon-size-small: ${s.iconSize};\n --component-icon-size-medium: ${s.iconSize};\n --component-icon-size-large: ${s.iconSize};\n }\n\n .content {\n flex: 1;\n min-width: 0;\n }\n\n .action-wrapper {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n `}}customElements.get("y-banner")\|\|customElements.define("y-banner",V);class N extends HTMLElement{static get observedAttributes(){return["value","position","alignment","color","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get alignment(){return this.getAttribute("alignment")\|\|"right"}set alignment(e){this.setAttribute("alignment",e)}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get position(){return this.getAttribute("position")\|\|"top"}set position(e){this.setAttribute("position",e)}get size(){return this.getAttribute("size")\|\|"small"}set size(e){this.setAttribute("size",e)}get value(){return this.getAttribute("value")\|\|""}set value(e){this.setAttribute("value",e)}render(){const[e,n]=this._getBadgeColors(this.color),{fontSize:t,padding:r,minSize:o}=this._getSizeAttributes(this.size),a=this._hasTargetContent(),i=a?this._getBadgePosition(this.position,this.alignment):"";this.shadowRoot.innerHTML=`\n <style>\n :host {\n position: ${a?"relative":"static"};\n display: inline-flex;\n align-items: center;\n }\n .badge {\n position: ${a?"absolute":"static"};\n ${i}\n background: ${e};\n color: ${n};\n font-size: ${t};\n font-weight: bold;\n padding: ${r};\n border-radius: var(--component-badge-border-radius-circle, 9999px);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-body, sans-serif);\n min-width: ${o};\n height: ${o};\n z-index: 20;\n }\n ::slotted() {\n position: relative;\n display: inline-block;\n }\n </style>\n ${a?"<slot></slot>":""}\n <div class="badge" part="badge">${this.value}</div>\n `}_getBadgeColors(e){return{primary:["var(--primary-content--)","var(--primary-content-inverse)"],secondary:["var(--secondary-content--)","var(--secondary-content-inverse)"],base:["var(--base-content--)","var(--base-content-inverse)"],success:["var(--success-content--)","var(--success-content-inverse)"],warning:["var(--warning-content--)","var(--warning-content-inverse)"],error:["var(--error-content--)","var(--error-content-inverse)"],help:["var(--help-content--)","var(--help-content-inverse)"]}[e]\|\|[e,g(e)]}_getBadgePosition(e,n){const t="var(--spacing-small, 6px)";return`${"top"===e?`top: calc(${t} -1);`:`bottom: calc(${t} * -1);`} ${"right"===n?`right: calc(${t} * -1);`:`left: calc(${t} * -1);`}`}_getSizeAttributes(e){const n={small:{fontSize:"var(--font-size-small, 0.8em)",padding:"var(--component-badge-padding-small)",minSize:"var(--component-badge-size-small)"},medium:{fontSize:"var(--font-size-label, 0.83em)",padding:"var(--component-badge-padding-medium)",minSize:"var(--component-badge-size-medium)"},large:{fontSize:"var(--font-size-paragraph, 1em)",padding:"var(--component-badge-padding-large)",minSize:"var(--component-badge-size-large)"}};return n[e]\|\|n.small}_hasTargetContent(){return Array.from(this.childNodes).some(e=>e.nodeType===Node.ELEMENT_NODE\|\|e.nodeType===Node.TEXT_NODE&&""!==e.textContent.trim())}}customElements.get("y-badge")\|\|customElements.define("y-badge",N);class F extends HTMLElement{static get observedAttributes(){return["items","max-items","separator","size","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._expanded=!1}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&("items"!==e&&"max-items"!==e\|\|(this._expanded=!1),this.render())}get history(){return this.getAttribute("history")}set history(e){null==e?this.removeAttribute("history"):this.setAttribute("history",e)}get items(){try{return JSON.parse(this.getAttribute("items")\|\|"[]")}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get maxItems(){const e=parseInt(this.getAttribute("max-items"),10);return Number.isFinite(e)&&e>=2?e:null}set maxItems(e){null==e?this.removeAttribute("max-items"):this.setAttribute("max-items",String(e))}get separator(){return this.getAttribute("separator")}set separator(e){null==e\|\|""===e?this.removeAttribute("separator"):this.setAttribute("separator",e)}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",e)}render(){const e=this.items;this.shadowRoot.innerHTML="";const n=document.createElement("style");if(n.textContent=this._buildStyles(),this.shadowRoot.appendChild(n),!e.length)return;const t=z("nav",{class:"breadcrumbs",part:"breadcrumbs","aria-label":"Breadcrumb"}),r=z("ol",{class:"list",part:"list"});this._getVisibleItems(e).forEach(n=>{"expand"===n.type?(r.appendChild(this._buildExpandItem()),r.appendChild(this._buildSeparatorItem())):(r.appendChild(this._buildItem(n.item,n.index,e)),n.index<e.length-1&&r.appendChild(this._buildSeparatorItem()))}),t.appendChild(r),this.shadowRoot.appendChild(t)}_buildExpandItem(){const e=z("button",{class:"expand-btn",part:"expand-btn","aria-label":"Show all breadcrumbs"},["…"]);e.addEventListener("click",()=>this._onExpand());return z("li",{class:"item expand",role:"presentation"},[e])}_buildHostStyles(){return"\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n }\n\n :host([hidden]) {\n display: none !important;\n }\n "}_buildItem(e,n,t){const r=n===t.length-1,o=["item"];r&&o.push("item--current");const a=z("li",{class:"item "+(r?"current":""),part:o.join(" ")});let i;r\|\|!e.href?i=z("span",{class:"link current-text",part:"link","aria-current":!!r&&"page"},[e.text]):(i=z("a",{class:"link",part:"link",href:e.href},[e.text]),i.addEventListener("click",n=>{0!==n.button\|\|n.metaKey\|\|n.ctrlKey\|\|n.shiftKey\|\|n.altKey\|\|this._onNavigate(n,e.href)}));const s=z("slot",{name:`${n}-item`});return e.icon&&s.appendChild(z("y-icon",{name:e.icon,size:this._getIconSize(),class:"item-icon"})),s.appendChild(i),a.appendChild(s),a}_buildItemStyles(){const e=`var(--component-breadcrumbs-font-size-${this.size}, ${this._getDefaultFontSize()})`;return`\n .list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: ${`var(--component-breadcrumbs-gap-${this.size}, ${this._getDefaultGap()})`};\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: ${e};\n }\n\n .item-icon {\n display: inline-flex;\n align-items: center;\n }\n\n .link {\n color: var(--component-breadcrumbs-color, var(--primary-content--, #1976d2));\n text-decoration: none;\n transition: color 0.15s ease;\n cursor: pointer;\n }\n\n .link:hover {\n color: var(--component-breadcrumbs-color-hover, var(--primary-content-hover, #1565c0));\n text-decoration: underline;\n }\n\n .link:focus-visible {\n outline: 2px solid var(--primary-content--, #1976d2);\n outline-offset: 2px;\n border-radius: var(--radii-small, 2px);\n }\n\n .current-text {\n color: var(--component-breadcrumbs-color-current, var(--base-content--, #333));\n cursor: default;\n text-decoration: none;\n }\n\n .current-text:hover {\n color: var(--component-breadcrumbs-color-current, var(--base-content--, #333));\n text-decoration: none;\n }\n\n .expand-btn {\n background: none;\n border: none;\n cursor: pointer;\n padding: 2px 4px;\n font-family: inherit;\n font-size: ${e};\n color: var(--component-breadcrumbs-color, var(--primary-content--, #1976d2));\n border-radius: var(--radii-small, 4px);\n line-height: 1;\n }\n\n .expand-btn:hover {\n color: var(--component-breadcrumbs-color-hover, var(--primary-content-hover, #1565c0));\n text-decoration: underline;\n }\n\n .expand-btn:focus-visible {\n outline: 2px solid var(--primary-content--, #1976d2);\n outline-offset: 2px;\n }\n `}_buildSeparatorItem(){const e=this.querySelector('[slot="separator"]');let n;return e?(n=e.cloneNode(!0),n.removeAttribute("slot")):n=this.separator?document.createTextNode(this.separator):z("y-icon",{name:"chevron-right",size:"x-small"}),z("li",{class:"separator",part:"separator",role:"presentation","aria-hidden":"true"},[n])}_buildSeparatorStyles(){return"\n .separator {\n display: flex;\n align-items: center;\n color: var(--component-breadcrumbs-separator-color, var(--base-content-lighter, #999));\n user-select: none;\n }\n "}_buildStyles(){return[this._buildHostStyles(),this._buildItemStyles(),this._buildSeparatorStyles()].join("\n")}_getDefaultFontSize(){const e={small:"0.75em",medium:"0.875em",large:"1em"};return e[this.size]\|\|e.medium}_getDefaultGap(){const e={small:"4px",medium:"8px",large:"12px"};return e[this.size]\|\|e.medium}_getIconSize(){return{small:"x-small",medium:"small",large:"medium"}[this.size]\|\|"small"}_getVisibleItems(e){const n=this.maxItems;if(!(n&&e.length>n&&!this._expanded))return e.map((e,n)=>({type:"item",item:e,index:n}));const t={type:"item",item:e[0],index:0},r=n-1;return[t,{type:"expand"},...e.slice(-r).map((n,t)=>({type:"item",item:n,index:e.length-r+t}))]}_onExpand(){this._expanded=!0,this.render(),this.dispatchEvent(new CustomEvent("expand",{bubbles:!0,composed:!0}))}_onNavigate(e,n){const t=new CustomEvent("navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:{href:n}});this.dispatchEvent(t)?(e.preventDefault(),"false"!==this.getAttribute("history")?(window.history.pushState({},"",n),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))):window.location.href=n):e.preventDefault()}}customElements.get("y-breadcrumbs")\|\|customElements.define("y-breadcrumbs",F);class O extends HTMLElement{static get observedAttributes(){return["orientation"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this._render(),this._updateChildren()}attributeChangedCallback(e,n,t){n!==t&&(this._applyStyles(),this._updateChildren())}get orientation(){return this.getAttribute("orientation")\|\|"horizontal"}set orientation(e){this.setAttribute("orientation",e)}_applyStyles(){this._styleEl\|\|(this._styleEl=document.createElement("style"),this.shadowRoot.appendChild(this._styleEl));const e="vertical"===this.orientation;this._styleEl.textContent=`\n :host {\n display: inline-flex;\n flex-direction: ${e?"column":"row"};\n align-items: stretch;\n }\n ::slotted() {\n flex-shrink: 0;\n position: relative;\n }\n `}_getRadius(){return getComputedStyle(this).getPropertyValue("--component-button-border-radius-outer").trim()\|\|"4px"}_render(){if(this._applyStyles(),!this.shadowRoot.querySelector("slot")){const e=document.createElement("slot");e.addEventListener("slotchange",()=>this._updateChildren()),this.shadowRoot.appendChild(e)}}_updateChildren(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const n=e.assignedElements({flatten:!0}),t="vertical"===this.orientation,r=this._getRadius(),o=n.length;n.forEach((e,n)=>{const a=0===n,i=n===o-1;if(t?(e.style.marginLeft="",e.style.marginTop=a?"":"-1px"):(e.style.marginTop="",e.style.marginLeft=a?"":"-1px"),1===o)e.style.removeProperty("--component-button-border-radius-outer"),e.style.removeProperty("--component-inputs-border-radius-outer");else if(a){const n=t?`${r} ${r} 0 0`:`${r} 0 0 ${r}`;e.style.setProperty("--component-button-border-radius-outer",n),e.style.setProperty("--component-inputs-border-radius-outer",n)}else if(i){const n=t?`0 0 ${r} ${r}`:`0 ${r} ${r} 0`;e.style.setProperty("--component-button-border-radius-outer",n),e.style.setProperty("--component-inputs-border-radius-outer",n)}else e.style.setProperty("--component-button-border-radius-outer","0"),e.style.setProperty("--component-inputs-border-radius-outer","0")})}}customElements.get("y-button-group")\|\|customElements.define("y-button-group",O);class Y extends HTMLElement{static get observedAttributes(){return["color","raised"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this._updateColorStyles(),this._updateElevationStyles()}attributeChangedCallback(e,n,t){n!==t&&("color"===e&&this._updateColorStyles(),"raised"===e&&this._updateElevationStyles(),this.render())}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get raised(){return this.hasAttribute("raised")}set raised(e){e?this.setAttribute("raised",""):this.removeAttribute("raised")}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML='\n <div class="image" part="image"><slot name="image"></slot></div>\n <div class="header" part="header"><slot name="header"></slot></div>\n <div class="body" part="body"><slot></slot></div>\n <div class="footer" part="footer"><slot name="footer"></slot></div>\n ';const e={image:".image",header:".header",footer:".footer"};M(this.shadowRoot,e),this._bindSlotListeners(e)}_bindSlotListeners(e){this.shadowRoot.querySelectorAll("slot").forEach(n=>{n.addEventListener("slotchange",()=>M(this.shadowRoot,e))})}_buildStyleSheet(){const e=new CSSStyleSheet;return e.replaceSync("\n :host {\n display: block;\n box-sizing: border-box;\n background: var(--card-background, var(--base-background-component));\n border: var(--card-border-width, var(--component-card-border-width)) solid var(--card-border-color, var(--base-border));\n border-radius: var(--component-card-border-radius-outer);\n font-family: var(--font-family-body);\n color: var(--card-content-color, var(--base-content--));\n box-shadow: var(--card-box-shadow, none);\n }\n\n .image {\n overflow: hidden;\n border-radius: var(--component-card-border-radius-outer) var(--component-card-border-radius-outer) 0 0;\n }\n\n .header {\n padding: var(--component-card-padding-outer);\n border-bottom: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-border));\n }\n\n .body {\n padding: var(--component-card-padding-outer);\n }\n\n .footer {\n padding: var(--component-card-padding-inner) var(--component-card-padding-outer);\n border-top: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-border));\n }\n\n ::slotted() {\n margin: 0;\n }\n "),e}_updateColorStyles(){const e={primary:["--base-content--","--primary-background-component","--primary-border"],secondary:["--base-content--","--secondary-background-component","--secondary-border"],base:["--base-content--","--base-background-component","--base-border"],success:["--base-content--","--success-background-component","--success-border"],error:["--base-content--","--error-background-component","--error-border"],warning:["--base-content--","--warning-background-component","--warning-border"]},[n,t,r]=e[this.color]\|\|e.base;this.style.setProperty("--card-content-color",`var(${n})`),this.style.setProperty("--card-background",`var(${t})`),this.style.setProperty("--card-border-color",`var(${r})`),this.style.setProperty("--card-section-background",`var(${r})`)}_updateElevationStyles(){this.raised?(this.style.setProperty("--card-border-width","0"),this.style.setProperty("--card-box-shadow","var(--base-shadow)")):(this.style.setProperty("--card-border-width","var(--component-card-border-width)"),this.style.setProperty("--card-box-shadow","none"))}}customElements.get("y-card")\|\|customElements.define("y-card",Y);class W extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["checked","disabled","indeterminate","label-position","name","value"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("label-position")\|\|this.setAttribute("label-position","right"),this._internals.setFormValue(this.checked?this.value:null)}attributeChangedCallback(e){"checked"!==e&&"value"!==e\|\|this._internals.setFormValue(this.checked?this.value:null),"indeterminate"===e&&this._updateIcon(),"label-position"===e&&this.render(),this._updateState()}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(e){e?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}get labelPosition(){return this.getAttribute("label-position")\|\|"right"}set labelPosition(e){this.setAttribute("label-position",e)}get name(){return this.getAttribute("name")}set name(e){this.setAttribute("name",e)}get value(){return this.getAttribute("value")\|\|"on"}set value(e){this.setAttribute("value",e)}toggle(){this.disabled\|\|(this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML='\n <div class="wrapper">\n <div class="checkbox" role="checkbox" tabindex="0">\n <span class="icon"></span>\n </div>\n <label part="label">\n <slot></slot>\n </label>\n </div>\n ',this._bindCheckboxListeners(),this._updateState()}_bindCheckboxListeners(){const e=this.shadowRoot.querySelector(".checkbox");e.addEventListener("click",()=>this.toggle()),e.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key\|\|(e.preventDefault(),this.toggle())})}_buildStyleSheet(){const e={top:"column",bottom:"column-reverse",left:"row-reverse",right:"row"}[this.labelPosition]\|\|"row",n=new CSSStyleSheet;return n.replaceSync(`\n :host {\n display: inline-flex;\n align-items: center;\n line-height: 1;\n vertical-align: middle;\n font-family: var(--font-family-body);\n cursor: ${this.disabled?"not-allowed":"pointer"};\n opacity: ${this.disabled?"0.6":"1"};\n }\n\n .wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-x-small, 6px);\n line-height: 1;\n flex-direction: ${e};\n }\n\n .checkbox {\n width: var(--component-checkbox-size, 20px);\n height: var(--component-checkbox-size, 20px);\n border: var(--component-inputs-border-width, 2px) solid var(--component-checkbox-border-color);\n border-radius: var(--component-inputs-border-radius-outer, 4px);\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--component-checkbox-background);\n box-sizing: border-box;\n transition: border-color 0.2s ease;\n line-height: 0;\n }\n\n :host([disabled]) .checkbox {\n border-color: var(--component-checkbox-border-color);\n background: var(--component-checkbox-disabled-background, var(--component-checkbox-background));\n cursor: not-allowed;\n }\n\n :host([disabled]) .checkbox:hover {\n border-color: var(--component-checkbox-border-color);\n }\n\n .checkbox:hover {\n border-color: var(--component-checkbox-accent);\n }\n\n .checkbox svg {\n width: var(--component-checkbox-icon-size, 16px);\n height: var(--component-checkbox-icon-size, 16px);\n stroke: var(--component-checkbox-accent);\n display: block;\n }\n\n [part="label"] {\n display: inline-flex;\n align-items: center;\n font-size: 0.9em;\n line-height: 1;\n color: var(--component-checkbox-color);\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n line-height: 0;\n }\n `),n}_updateIcon(){const e=this.shadowRoot.querySelector(".icon");e&&(this.indeterminate?e.innerHTML=v:this.checked?e.innerHTML=i:e.innerHTML="")}_updateState(){const e=this.shadowRoot.querySelector(".checkbox");e&&(e.setAttribute("aria-checked",this.indeterminate?"mixed":this.checked?"true":"false"),this._updateIcon())}}customElements.get("y-checkbox")\|\|customElements.define("y-checkbox",W);class G extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["type","size","value","label-position","disabled","invalid","name","min","max","step"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this._internals.setFormValue(this.value)}attributeChangedCallback(e,n,t){if(n!==t)return"value"===e?(this.input&&(this.input.value=t),void(this._internals&&this._internals.setFormValue(t,this.getAttribute("name")))):void("name"!==e?"invalid"!==e?"min"!==e&&"max"!==e&&"step"!==e?this.render():this.input&&(null!=t?this.input.setAttribute(e,t):this.input.removeAttribute(e)):this._updateValidationState():this._internals.setFormValue(this.value,t))}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get type(){return this.getAttribute("type")\|\|"text"}set type(e){this.setAttribute("type",e)}get value(){return this.input?.value\|\|""}set value(e){this.input&&(this.input.value=e),this.setAttribute("value",e),this._internals.setFormValue(e,this.getAttribute("name"))}checkValidity(){return this.input?.checkValidity?.()??!0}render(){const e=this.getAttribute("type")\|\|"text",n=this.getAttribute("size")\|\|"medium",t=this.getAttribute("value")\|\|"",r=this.getAttribute("label-position")\|\|"top",o=this.hasAttribute("disabled"),a="top"===r,i=this._getPaddingVar(n),s=this._getMinHeightVar(n);this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet(o,i,s)],this.shadowRoot.innerHTML=this._buildHTML(e,t,a,o),this.input=this.shadowRoot.querySelector("input"),this.inputContainer=this.shadowRoot.querySelector(".input-container"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),E(this.labelWrapper),o\|\|(this._bindInputListeners(),this._updateValidationState())}_bindInputListeners(){this.input.addEventListener("input",e=>{this.setAttribute("value",e.target.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:e.target.value},bubbles:!0,composed:!0})),this._updateValidationState()})}_buildHTML(e,n,t,r){const o='<div class="label-wrapper"><slot name="label"></slot></div>',a=this.getAttribute("min"),i=this.getAttribute("max"),s=this.getAttribute("step");return`\n <div class="input-wrapper">\n ${t?o:""}\n <div class="input-container">\n <slot name="left-icon"></slot>\n <input part="input" type="${e}" value="${n}" ${[null!=a?`min="${a}"`:"",null!=i?`max="${i}"`:"",null!=s?`step="${s}"`:""].filter(Boolean).join(" ")} ${r?"disabled":""} />\n <slot name="right-icon"></slot>\n </div>\n ${t?"":o}\n </div>\n `}_buildStyleSheet(e,n,t){const r=new CSSStyleSheet;return r.replaceSync(`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--component-input-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .input-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .label-wrapper {\n display: none;\n margin-bottom: var(--spacing-2x-small, 4px);\n }\n\n .input-container {\n flex: 1;\n display: flex;\n align-items: center;\n gap: var(--spacing-x-small);\n background: ${e?"var(--component-input-background-disabled)":"var(--component-input-background)"};\n border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: var(${n});\n min-height: ${t};\n box-sizing: border-box;\n transition: border-color 0.2s ease-in-out;\n }\n\n .input-container.is-invalid {\n border-color: var(--component-input-error-border-color);\n background: var(--component-input-error-background);\n }\n\n .input-container.is-invalid input {\n color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:hover {\n border-color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:focus-within {\n border-color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:focus-within input {\n color: var(--component-input-color);\n }\n\n input {\n all: unset;\n flex: 1;\n font-family: inherit;\n font-size: 1em;\n color: inherit;\n min-width: 0;\n min-height: 20px;\n }\n\n .input-container:hover {\n border-color: var(--component-input-color);\n transition: border-color 0.2s ease-in-out;\n }\n\n .input-container:focus-within {\n border-color: var(--component-input-accent);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-input-error-color);\n }\n\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-input-label-color);\n }\n\n ::slotted([slot="left-icon"]),\n ::slotted([slot="right-icon"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--component-input-icon-color);\n }\n `),r}_getMinHeightVar(e){const n={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"};return n[e]\|\|n.medium}_getPaddingVar(e){const n={small:"--component-inputs-padding-small",medium:"--component-inputs-padding-medium",large:"--component-inputs-padding-large"};return n[e]\|\|n.medium}_updateValidationState(){const e=this.hasAttribute("invalid"),n=this.input&&!this.checkValidity(),t=e\|\|n;this.inputContainer?.classList.toggle("is-invalid",t),this.labelWrapper?.classList.toggle("is-invalid",t)}}customElements.get("y-input")\|\|customElements.define("y-input",G);const K={primary:["var(--primary-content--)","var(--primary-content-inverse)"],secondary:["var(--secondary-content--)","var(--secondary-content-inverse)"],success:["var(--success-content--)","var(--success-content-inverse)"],warning:["var(--warning-content--)","var(--warning-content-inverse)"],error:["var(--error-content--)","var(--error-content-inverse)"],help:["var(--help-content--)","var(--help-content-inverse)"]};class J extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["label-position","disabled","invalid","required","value","name","placeholder","options","display-mode","close-on-click-outside","size","searchable","clearable"]}constructor(){super(),this._internals=this.attachInternals(),this.selectedValues=new Set,this._onDocumentClick=this._onDocumentClick.bind(this),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this.updateValidation(),this._internals.setFormValue(this.value)}disconnectedCallback(){this.closeDropdown()}attributeChangedCallback(e,n,t){n!==t&&("value"===e&&(this.hasAttribute("multiple")?this.selectedValues=new Set((t\|\|"").split(",").map(e=>e.trim()).filter(Boolean)):this._value=t\|\|"",this._updateDisplay(),this._internals.setFormValue(t,this.getAttribute("name")),this._updateSelectedStyles()),["label-position","disabled","invalid","required","placeholder","options","size","searchable","clearable"].includes(e)&&this.render(),"name"===e&&this._internals.setFormValue(this.value,t))}get clearable(){return this.hasAttribute("clearable")}set clearable(e){e?this.setAttribute("clearable",""):this.removeAttribute("clearable")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get displayMode(){return this.getAttribute("display-mode")\|\|""}set displayMode(e){this.setAttribute("display-mode",e)}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get multiple(){return this.hasAttribute("multiple")}set multiple(e){e?this.setAttribute("multiple",""):this.removeAttribute("multiple")}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get options(){try{return JSON.parse(this.getAttribute("options")\|\|"[]")}catch{return[]}}set options(e){this.setAttribute("options",Array.isArray(e)?JSON.stringify(e):e??"[]")}get placeholder(){return this.getAttribute("placeholder")\|\|"Select..."}set placeholder(e){this.setAttribute("placeholder",e)}get required(){return this.hasAttribute("required")}set required(e){e?this.setAttribute("required",""):this.removeAttribute("required")}get searchable(){return this.hasAttribute("searchable")}set searchable(e){e?this.setAttribute("searchable",""):this.removeAttribute("searchable")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return this.hasAttribute("multiple")?Array.from(this.selectedValues).join(","):this._value\|\|""}set value(e){this.hasAttribute("multiple")?"string"==typeof e?this.selectedValues=new Set(e.split(",").map(e=>e.trim())):Array.isArray(e)&&(this.selectedValues=new Set(e)):this._value=e,this.setAttribute("value",e),this._internals.setFormValue(this.value,this.getAttribute("name")),this._updateDisplay(),this._updateSelectedStyles()}closeDropdown(){if(this.dropdown?.classList.remove("open"),this.selectContainer?.classList.remove("open"),document.removeEventListener("click",this._onDocumentClick,!0),this.searchable){const e=this.hasAttribute("multiple");if(!e&&this.searchInput){const e=this.value?this._getDisplayText():"";this.searchInput.value=e,this.searchInput.placeholder=e?"":this.getAttribute("placeholder")\|\|"Select..."}else e&&this.searchInput&&(this.searchInput.value="");this._filterOptions("")}this._onScrollOrResize&&(window.removeEventListener("scroll",this._onScrollOrResize,!0),window.removeEventListener("resize",this._onScrollOrResize),this._onScrollOrResize=null)}render(){this.closeDropdown(),this._applyStyles(),this.shadowRoot.innerHTML=this._generateTemplate(),this._queryRefs(),E(this.labelWrapper),this._attachEventListeners(),this._updateValidationState(),this._updateDisplay(),this._updateSelectedStyles()}toggleDropdown(){this.dropdown.classList.contains("open")?this.closeDropdown():(this._openDropdown(),this.searchable&&this.searchInput&&setTimeout(()=>this.searchInput.focus(),0))}updateValidation(){const e=this.hasAttribute("required"),n=this.hasAttribute("multiple")?this.selectedValues.size>0:this.value&&""!==this.value;e&&!n?this.setAttribute("invalid",""):this.removeAttribute("invalid")}_applyStyles(){const e=this.hasAttribute("disabled"),n=this.getAttribute("size")\|\|"medium",t={small:"--component-inputs-padding-small",medium:"--component-inputs-padding-medium",large:"--component-inputs-padding-large"}[n]\|\|"--component-inputs-padding-medium",r={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"}[n]\|\|"var(--sizing-medium, 40px)",o=new CSSStyleSheet;o.replaceSync(`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-body);\n color: var(--component-select-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .select-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n .label-wrapper {\n display: none;\n margin-bottom: var(--spacing-2x-small, 4px);\n }\n\n .select-container {\n flex: 1;\n display: flex;\n align-items: center;\n gap: var(--spacing-x-small);\n background: var(--component-select-background);\n border: var(--component-inputs-border-width) solid var(--component-select-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: var(${t});\n min-height: ${r};\n box-sizing: border-box;\n transition: border-color 0.2s ease-in-out;\n cursor: pointer;\n }\n\n .select-container:hover {\n border-color: var(--component-select-color);\n }\n\n .select-container:focus-within {\n border-color: var(--component-select-accent);\n }\n\n .select-container.is-invalid {\n border-color: var(--component-select-error-border-color);\n background: var(--component-select-error-background);\n }\n\n .select-container.is-invalid:hover {\n border-color: var(--component-select-error-color);\n }\n\n .select-container.is-invalid:focus-within {\n border-color: var(--component-select-error-color);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-select-error-color);\n }\n\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-select-label-color);\n }\n\n .dropdown {\n position: absolute;\n z-index: var(--component-select-z-index, 6000);\n left: 0;\n right: 0;\n background: var(--component-select-background);\n border: var(--component-inputs-border-width) solid var(--component-select-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n box-shadow: var(--component-select-shadow, 0 2px 8px rgba(0,0,0,0.1));\n max-height: 200px;\n overflow-y: auto;\n display: none;\n }\n\n .dropdown.open {\n display: block;\n }\n\n .no-results {\n padding: var(--spacing-small, 6px);\n color: var(--component-select-label-color);\n text-align: center;\n font-size: 0.875em;\n }\n\n .dropdown-item {\n padding: var(--spacing-small, 6px);\n cursor: pointer;\n }\n\n .dropdown-item:hover {\n background: var(--component-select-hover-background);\n }\n\n .dropdown-item.selected {\n background: var(--component-select-accent);\n color: var(--component-select-accent-contrast);\n }\n\n .value-display {\n flex: 1;\n font-size: 1em;\n color: inherit;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--spacing-x-small);\n }\n\n .search-input {\n flex: 1;\n min-width: 60px;\n border: none;\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: 1em;\n outline: none;\n padding: 0;\n cursor: text;\n }\n\n .search-input::placeholder {\n color: var(--component-select-label-color);\n }\n\n .clear-button {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n flex-shrink: 0;\n }\n\n .clear-button:hover {\n opacity: 1;\n }\n\n .chevron-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n transition: transform 0.2s ease;\n }\n\n .chevron-icon svg {\n width: 20px;\n height: 20px;\n transition: transform 0.2s ease;\n transform-origin: center;\n }\n\n .select-container.open .chevron-icon svg {\n transform: scaleY(-1);\n }\n `),this.shadowRoot.adoptedStyleSheets=[o]}_attachEventListeners(){const e=this.searchable,n=this.hasAttribute("multiple"),t="tag"===this.getAttribute("display-mode");if(e){this.selectContainer.addEventListener("click",e=>{e.target.closest(".chevron-icon")\|\|this.searchInput?.focus()});const e=this.shadowRoot.querySelector(".chevron-icon");e?.addEventListener("click",e=>{e.stopPropagation(),this.toggleDropdown()}),this.searchInput?.addEventListener("focus",()=>{this.dropdown.classList.contains("open")\|\|this._openDropdown()}),this.searchInput?.addEventListener("input",e=>{this._filterOptions(e.target.value)}),this.searchInput?.addEventListener("click",e=>e.stopPropagation())}else this.selectContainer.addEventListener("click",()=>this.toggleDropdown());this.clearButton?.addEventListener("click",e=>{e.stopPropagation(),this.hasAttribute("multiple")?(this.selectedValues=new Set,this.setAttribute("value",""),this._renderTags(),this._updateSelectedStyles(),this.clearButton&&(this.clearButton.style.display="none")):(this.value="",this._filterOptions(""),this.searchInput&&(this.searchInput.value="",this.searchInput.placeholder=this.getAttribute("placeholder")\|\|"Select...",this.searchInput.focus(),this.dropdown.classList.contains("open")\|\|this._openDropdown())),this.dispatchEvent(new CustomEvent("change",{detail:{value:""},bubbles:!0,composed:!0})),this.updateValidation()}),this.dropdown.querySelectorAll(".dropdown-item").forEach(r=>{r.addEventListener("click",()=>{const o=r.getAttribute("data-value"),a=this.hasAttribute("required");if(n)this.selectedValues.has(o)?(!a\|\|this.selectedValues.size>1)&&this.selectedValues.delete(o):this.selectedValues.add(o),this.setAttribute("value",Array.from(this.selectedValues).join(","));else{const e=o===this.value;this.value=e&&!a?"":o}this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.updateValidation(),e&&n&&t?(this.searchInput&&(this.searchInput.value="",this._filterOptions(""),this.searchInput.focus()),this._updateSelectedStyles()):this.closeDropdown()})})}_filterOptions(e){if(!this.dropdown)return;const n=e.toLowerCase();let t=0;this.dropdown.querySelectorAll(".dropdown-item").forEach(e=>{const r=!n\|\|e.textContent.toLowerCase().includes(n);e.style.display=r?"":"none",r&&t++});const r=this.dropdown.querySelector(".no-results");r&&(r.style.display=0===t?"":"none")}_generateTemplate(){const e="top"===(this.getAttribute("label-position")\|\|"top"),n=this.hasAttribute("invalid"),t=this.hasAttribute("multiple"),r="tag"===this.getAttribute("display-mode"),o=this.searchable,a=this.clearable,i=(o\|\|a)&&!t,c=t?this.selectedValues:new Set([this.value]),l=this.getAttribute("placeholder")\|\|"Select...",d='<button class="clear-button" style="display:none" tabindex="-1" type="button"><y-icon name="close" size="medium"></y-icon></button>';let p;return p=o&&!t?`\n <input class="search-input" type="text" placeholder="${l}" autocomplete="off">\n ${d}\n `:o&&t&&r?`\n <div class="value-display">\n <input class="search-input" type="text" placeholder="${l}" autocomplete="off">\n </div>\n ${a?d:""}\n `:t&&r?`\n <div class="value-display"></div>\n ${a?d:""}\n `:i?`\n <div class="value-display">${this._getDisplayText()}</div>\n <button class="clear-button" style="display:none" tabindex="-1" type="button">\n <y-icon name="close" size="medium"></y-icon>\n </button>\n `:`<div class="value-display">${this._getDisplayText()}</div>`,`\n <div class="select-wrapper">\n ${e?'<div class="label-wrapper"><slot name="label"></slot></div>':""}\n <div class="select-container ${n?"is-invalid":""}" tabindex="${o?"-1":"0"}">\n ${p}\n <div class="chevron-icon" part="chevron-icon">\n ${s}\n </div>\n </div>\n ${e?"":'<div class="label-wrapper"><slot name="label"></slot></div>'}\n <div class="dropdown" part="dropdown">\n ${this.options.map(e=>{const n=c.has(e.value);let t="";if(n&&e.color){const n=K[e.color];t=n?`style="background:${n[0]};color:${n[1]}"`:`style="background:${e.color};color:${g(e.color)}"`}return`<div class="dropdown-item ${n?"selected":""}" data-value="${e.value}" data-color="${e.color\|\|""}" ${t}>${e.label}</div>`}).join("")}\n <div class="no-results" style="display:none">No results</div>\n </div>\n </div>\n `}_getDisplayText(){const e=this.hasAttribute("multiple"),n="tag"===this.getAttribute("display-mode");if(e&&n)return"";if(e){const e=this.options.filter(e=>this.selectedValues.has(e.value)).length;return e>0?`${e} Selected`:this.getAttribute("placeholder")\|\|"Select..."}{const e=this.options.find(e=>e.value===this.value);return e?.label\|\|this.getAttribute("placeholder")\|\|"Select..."}}_onDocumentClick(e){if("false"===this.getAttribute("close-on-click-outside"))return;!e.composedPath().includes(this)&&this.dropdown?.classList.contains("open")&&this.closeDropdown()}_openDropdown(){if(!this.dropdown.classList.contains("open")){if(this.dropdown.classList.add("open"),this.selectContainer.classList.add("open"),this._positionDropdown(),this._onScrollOrResize=this._positionDropdown.bind(this),this.searchable&&!this.hasAttribute("multiple")&&this.searchInput){const e=this.value?this._getDisplayText():"";this.searchInput.placeholder=e\|\|this.getAttribute("placeholder")\|\|"Select...",this.searchInput.value="",this._filterOptions("")}window.addEventListener("scroll",this._onScrollOrResize,!0),window.addEventListener("resize",this._onScrollOrResize),document.addEventListener("click",this._onDocumentClick,!0)}}_positionDropdown(){const e=this.selectContainer.getBoundingClientRect(),n=window.innerHeight-e.bottom-4,t=this.selectContainer.parentElement;n>=200\|\|n>=e.top?(this.dropdown.style.top=`${this.selectContainer.offsetTop+this.selectContainer.offsetHeight+4}px`,this.dropdown.style.bottom="auto"):(this.dropdown.style.bottom=t.offsetHeight-this.selectContainer.offsetTop+4+"px",this.dropdown.style.top="auto")}_queryRefs(){this.selectContainer=this.shadowRoot.querySelector(".select-container"),this.dropdown=this.shadowRoot.querySelector(".dropdown"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),this.displayElement=this.shadowRoot.querySelector(".value-display"),this.searchInput=this.shadowRoot.querySelector(".search-input"),this.clearButton=this.shadowRoot.querySelector(".clear-button")}_renderTags(){const e=this.hasAttribute("multiple"),n="tag"===this.getAttribute("display-mode");if(!e\|\|!n\|\|!this.displayElement)return;const t=this.searchable?this.displayElement.querySelector(".search-input"):null;this.displayElement.innerHTML="";this.options.filter(e=>this.selectedValues.has(e.value)).forEach(e=>{const n=document.createElement("y-tag");n.setAttribute("removable",""),n.setAttribute("size","small"),n.setAttribute("color",e.color\|\|"primary"),n.setAttribute("style-type","filled"),n.textContent=e.label,n.dataset.value=e.value,n.addEventListener("remove",()=>{this.selectedValues.delete(e.value),this.setAttribute("value",Array.from(this.selectedValues).join(",")),this._renderTags(),this._updateSelectedStyles(),this.updateValidation(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}),this.displayElement.appendChild(n)}),t&&this.displayElement.appendChild(t)}_updateDisplay(){const e="tag"===this.getAttribute("display-mode"),n=this.searchable,t=this.hasAttribute("multiple"),r=this.clearable;if(e)this._renderTags(),r&&this.clearButton&&(this.clearButton.style.display=this.selectedValues.size>0?"flex":"none");else if(n&&!t&&this.searchInput){const e=this.dropdown?.classList.contains("open");if(!e){const e=this.value?this._getDisplayText():"";this.searchInput.value=e,this.searchInput.placeholder=e?"":this.getAttribute("placeholder")\|\|"Select..."}this.clearButton&&(this.clearButton.style.display=this.value?"flex":"none")}else r&&!t&&this.displayElement?(this.displayElement.textContent=this._getDisplayText(),this.clearButton&&(this.clearButton.style.display=this.value?"flex":"none")):this.displayElement&&(this.displayElement.textContent=this._getDisplayText())}_updateSelectedStyles(){const e=this.hasAttribute("multiple")?this.selectedValues:new Set([this.value]);this.dropdown?.querySelectorAll(".dropdown-item").forEach(n=>{const t=n.getAttribute("data-value"),r=e.has(t);n.classList.toggle("selected",r);const o=n.getAttribute("data-color");if(r&&o){const e=K[o];e?(n.style.background=e[0],n.style.color=e[1]):(n.style.background=o,n.style.color=g(o))}else n.style.background="",n.style.color=""})}_updateValidationState(){const e=this.hasAttribute("invalid");this.selectContainer?.classList.toggle("is-invalid",e),this.labelWrapper?.classList.toggle("is-invalid",e)}}customElements.get("y-select")\|\|customElements.define("y-select",J);class X extends HTMLElement{static get observedAttributes(){return["value","format","formats","show-alpha","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._h=0,this._s=100,this._v=100,this._a=1,this._dragging=null,this._rendered=!1,this._updatingValue=!1,this._drawnHue=-1,this._onPointerMove=e=>this._onGlobalMove(e),this._onPointerUp=()=>this._onGlobalUp()}connectedCallback(){this.getAttribute("value")&&this._parseAndApply(this.getAttribute("value")),this.render(),this._rendered=!0}disconnectedCallback(){this._removeGlobalListeners()}attributeChangedCallback(e,n,t){if(n!==t)if("value"===e&&this._rendered){if(this._updatingValue)return;this._parseAndApply(t),this._updateAll()}else this._rendered&&this.render()}get value(){return this._formatColor(this.format)}set value(e){this.setAttribute("value",e)}get format(){return this.getAttribute("format")\|\|"hex"}set format(e){this.setAttribute("format",e)}get formats(){try{return JSON.parse(this.getAttribute("formats")\|\|'["hex","rgb","hsl","hsv"]')}catch{return["hex","rgb","hsl","hsv"]}}set formats(e){this.setAttribute("formats",JSON.stringify(e))}get showAlpha(){return this.hasAttribute("show-alpha")}set showAlpha(e){e?this.setAttribute("show-alpha",""):this.removeAttribute("show-alpha")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}setColor(e){this._parseAndApply(e),this._updateAll(),this._syncValueAttr()}render(){const e=this.size,n=this.showAlpha,t=this.formats;this.shadowRoot.innerHTML=`\n <style>${this._buildStyles()}</style>\n <div class="colorpicker" part="colorpicker">\n <div class="canvas-container">\n <canvas class="canvas" part="canvas" tabindex="0"\n role="slider" aria-label="Color"\n aria-valuetext="Hue ${this._h}, Saturation ${this._s}%, Brightness ${this._v}%"\n ></canvas>\n <div class="canvas-handle" part="canvas-handle"></div>\n </div>\n <div class="hue-slider" part="hue-slider" tabindex="0"\n role="slider" aria-label="Hue"\n aria-valuemin="0" aria-valuemax="359" aria-valuenow="${this._h}"\n >\n <div class="hue-thumb" part="hue-thumb"></div>\n </div>\n ${n?`\n <div class="alpha-slider" part="alpha-slider" tabindex="0"\n role="slider" aria-label="Alpha"\n aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.round(100this._a)}"\n >\n <div class="alpha-gradient"></div>\n <div class="alpha-thumb" part="alpha-thumb"></div>\n </div>`:""}\n <div class="inputs-row" part="inputs-row">\n <div class="swatch-container">\n <slot name="swatch">\n <div class="swatch-preview" part="swatch-preview"></div>\n </slot>\n </div>\n <y-select class="format-select" part="format-select"\n size="${e}"\n options='${JSON.stringify(t.map(e=>({value:e,label:e.toUpperCase()})))}'\n value="${this.format}"\n ></y-select>\n <div class="channel-inputs"></div>\n </div>\n </div>\n `,this._canvas=this.shadowRoot.querySelector(".canvas"),this._canvasHandle=this.shadowRoot.querySelector(".canvas-handle"),this._hueSlider=this.shadowRoot.querySelector(".hue-slider"),this._hueThumb=this.shadowRoot.querySelector(".hue-thumb"),this._alphaSlider=this.shadowRoot.querySelector(".alpha-slider"),this._alphaThumb=this.shadowRoot.querySelector(".alpha-thumb"),this._formatSelect=this.shadowRoot.querySelector(".format-select"),this._channelInputs=this.shadowRoot.querySelector(".channel-inputs"),this._swatchPreview=this.shadowRoot.querySelector(".swatch-preview"),this._bindEvents(),this._drawCanvas(),this._updateAll()}_parseAndApply(e){const n=C(e);if(!n)return;const[t,r,o]=f(n.r,n.g,n.b);this._h=t,this._s=r,this._v=o,this._a=n.a}_formatColor(e){const[n,t,r]=w(this._h,this._s,this._v),o=Math.round(100this._a)/100;switch(e){case"hex":return this.showAlpha&&o<1?S(n,t,r,o):A(n,t,r);case"rgb":return this.showAlpha?`rgba(${n}, ${t}, ${r}, ${o})`:`rgb(${n}, ${t}, ${r})`;case"hsl":{const[e,n,t]=x(this._h,this._s,this._v);return this.showAlpha?`hsla(${e}, ${n}%, ${t}%, ${o})`:`hsl(${e}, ${n}%, ${t}%)`}case"hsv":return this.showAlpha?`hsva(${this._h}, ${this._s}%, ${this._v}%, ${o})`:`hsv(${this._h}, ${this._s}%, ${this._v}%)`;default:return A(n,t,r)}}_getColorRepresentations(){const[e,n,t]=w(this._h,this._s,this._v),r=Math.round(100this._a)/100,[o,a,i]=x(this._h,this._s,this._v);return{hex:this.showAlpha&&r<1?S(e,n,t,r):A(e,n,t),rgb:this.showAlpha?`rgba(${e}, ${n}, ${t}, ${r})`:`rgb(${e}, ${n}, ${t})`,hsl:this.showAlpha?`hsla(${o}, ${a}%, ${i}%, ${r})`:`hsl(${o}, ${a}%, ${i}%)`,hsv:this.showAlpha?`hsva(${this._h}, ${this._s}%, ${this._v}%, ${r})`:`hsv(${this._h}, ${this._s}%, ${this._v}%)`}}_drawCanvas(){const e=this._canvas;if(!e)return;const n=e.getBoundingClientRect(),t=n.width\|\|260,r=n.height\|\|160;e.width=t,e.height=r;const o=e.getContext("2d"),[a,i,s]=w(this._h,100,100);o.fillStyle=`rgb(${a},${i},${s})`,o.fillRect(0,0,t,r);const c=o.createLinearGradient(0,0,t,0);c.addColorStop(0,"rgba(255,255,255,1)"),c.addColorStop(1,"rgba(255,255,255,0)"),o.fillStyle=c,o.fillRect(0,0,t,r);const l=o.createLinearGradient(0,0,0,r);l.addColorStop(0,"rgba(0,0,0,0)"),l.addColorStop(1,"rgba(0,0,0,1)"),o.fillStyle=l,o.fillRect(0,0,t,r),this._drawnHue=this._h}_getChannelFields(){const e=this.showAlpha,[n,t,r]=w(this._h,this._s,this._v),[o,a,i]=x(this._h,this._s,this._v),s=Math.round(100this._a)/100;let c=[];switch(this.format){case"hex":c=[{label:"Hex",name:"hex",value:e&&s<1?S(n,t,r,s):A(n,t,r),full:!0}];break;case"rgb":c=[{label:"R",name:"r",value:String(n),min:0,max:255},{label:"G",name:"g",value:String(t),min:0,max:255},{label:"B",name:"b",value:String(r),min:0,max:255}],e&&c.push({label:"A",name:"a",value:String(s),min:0,max:1,step:.01});break;case"hsl":c=[{label:"H",name:"h",value:String(o),min:0,max:360},{label:"S",name:"s",value:String(a),min:0,max:100},{label:"L",name:"l",value:String(i),min:0,max:100}],e&&c.push({label:"A",name:"a",value:String(s),min:0,max:1,step:.01});break;case"hsv":c=[{label:"H",name:"h",value:String(this._h),min:0,max:360},{label:"S",name:"s",value:String(this._s),min:0,max:100},{label:"V",name:"v",value:String(this._v),min:0,max:100}],e&&c.push({label:"A",name:"a",value:String(s),min:0,max:1,step:.01})}return c}_rebuildInputs(){if(!this._channelInputs)return;const e=this.size,n=this._getChannelFields();this._channelInputs.innerHTML="",n.forEach(n=>{const t=document.createElement("y-input");t.setAttribute("size",e),t.setAttribute("aria-label",n.label),t.setAttribute("placeholder",n.label),t.setAttribute("value",n.value),null!=n.min&&(t.setAttribute("type","number"),t.setAttribute("min",String(n.min))),null!=n.max&&t.setAttribute("max",String(n.max)),null!=n.step&&t.setAttribute("step",String(n.step)),t.dataset.channel=n.name,n.full&&t.classList.add("full-width"),this._channelInputs.appendChild(t),t.addEventListener("input",e=>{this._handleChannelInput(n.name,e.detail?.value??e.target.value,n)})})}_updateAll(){this._updateCanvasHandle(),this._updateHueThumb(),this._updateAlphaThumb(),this._updateSwatch(),this._updateInputValues(),this._drawnHue!==this._h&&this._drawCanvas(),this._updateAriaValues()}_updateAlphaThumb(){const e=this._alphaThumb,n=this._alphaSlider;if(!e\|\|!n)return;e.style.left=100this._a+"%";const t=n.querySelector(".alpha-gradient");if(t){const[e,n,r]=w(this._h,this._s,this._v);t.style.background=`linear-gradient(to right, rgba(${e},${n},${r},0), rgb(${e},${n},${r}))`}}_updateAriaValues(){const e=this._canvas;e&&e.setAttribute("aria-valuetext",`Hue ${this._h}, Saturation ${this._s}%, Brightness ${this._v}%`),this._hueSlider&&this._hueSlider.setAttribute("aria-valuenow",String(this._h)),this._alphaSlider&&this._alphaSlider.setAttribute("aria-valuenow",String(Math.round(100this._a)))}_updateCanvasHandle(){const e=this._canvasHandle,n=this._canvas;if(!e\|\|!n)return;const t=n.getBoundingClientRect(),r=this._s/100t.width,o=(1-this._v/100)t.height;e.style.left=`${r}px`,e.style.top=`${o}px`;const[a,i,s]=w(this._h,this._s,this._v);e.style.backgroundColor=`rgb(${a},${i},${s})`}_updateHueThumb(){const e=this._hueThumb,n=this._hueSlider;if(!e\|\|!n)return;const t=this._h/360;e.style.left=100t+"%";const[r,o,a]=w(this._h,100,100);e.style.backgroundColor=`rgb(${r},${o},${a})`}_updateInputValues(){if(!this._channelInputs)return;const e=this._getChannelFields(),n=this._channelInputs.querySelectorAll("y-input");n.length===e.length?e.forEach((e,t)=>{n[t].setAttribute("value",e.value)}):this._rebuildInputs()}_updateSwatch(){if(!this._swatchPreview)return;const[e,n,t]=w(this._h,this._s,this._v);this._swatchPreview.style.backgroundColor=this.showAlpha?`rgba(${e},${n},${t},${this._a})`:`rgb(${e},${n},${t})`}_bindEvents(){this._canvas.addEventListener("pointerdown",e=>this._onCanvasDown(e)),this._hueSlider.addEventListener("pointerdown",e=>this._onHueDown(e)),this._alphaSlider&&this._alphaSlider.addEventListener("pointerdown",e=>this._onAlphaDown(e)),this._canvas.addEventListener("keydown",e=>this._onCanvasKey(e)),this._hueSlider.addEventListener("keydown",e=>this._onHueKey(e)),this._alphaSlider&&this._alphaSlider.addEventListener("keydown",e=>this._onAlphaKey(e)),this._formatSelect.addEventListener("change",e=>{const n=e.detail?.value??e.target.value;n&&n!==this.format&&(this.setAttribute("format",n),this._rebuildInputs(),this.dispatchEvent(new CustomEvent("format-change",{bubbles:!0,composed:!0,detail:{format:n}})))})}_addGlobalListeners(){window.addEventListener("pointermove",this._onPointerMove),window.addEventListener("pointerup",this._onPointerUp)}_removeGlobalListeners(){window.removeEventListener("pointermove",this._onPointerMove),window.removeEventListener("pointerup",this._onPointerUp)}_onCanvasDown(e){e.preventDefault(),this._dragging="canvas",this._addGlobalListeners(),this._updateCanvasFromPointer(e)}_updateCanvasFromPointer(e){const n=this._canvas.getBoundingClientRect(),t=y(e.clientX-n.left,0,n.width),r=y(e.clientY-n.top,0,n.height);this._s=Math.round(t/n.width100),this._v=Math.round(100(1-r/n.height)),this._updateAll(),this._emitChange()}_onHueDown(e){e.preventDefault(),this._dragging="hue",this._addGlobalListeners(),this._updateHueFromPointer(e)}_updateHueFromPointer(e){const n=this._hueSlider.getBoundingClientRect(),t=y(e.clientX-n.left,0,n.width);this._h=Math.round(t/n.width360)%360,this._updateAll(),this._emitChange()}_onAlphaDown(e){e.preventDefault(),this._dragging="alpha",this._addGlobalListeners(),this._updateAlphaFromPointer(e)}_updateAlphaFromPointer(e){const n=this._alphaSlider.getBoundingClientRect(),t=y(e.clientX-n.left,0,n.width);this._a=Math.round(t/n.width100)/100,this._updateAll(),this._emitChange()}_onGlobalMove(e){"canvas"===this._dragging?this._updateCanvasFromPointer(e):"hue"===this._dragging?this._updateHueFromPointer(e):"alpha"===this._dragging&&this._updateAlphaFromPointer(e)}_onGlobalUp(){this._dragging=null,this._removeGlobalListeners()}_onCanvasKey(e){const n=e.shiftKey?10:1;let t=!0;switch(e.key){case"ArrowRight":this._s=y(this._s+n,0,100);break;case"ArrowLeft":this._s=y(this._s-n,0,100);break;case"ArrowUp":this._v=y(this._v+n,0,100);break;case"ArrowDown":this._v=y(this._v-n,0,100);break;default:t=!1}t&&(e.preventDefault(),this._updateAll(),this._emitChange())}_onHueKey(e){const n=e.shiftKey?10:1;let t=!0;switch(e.key){case"ArrowRight":this._h=(this._h+n)%360;break;case"ArrowLeft":this._h=(this._h-n+360)%360;break;default:t=!1}t&&(e.preventDefault(),this._updateAll(),this._emitChange())}_onAlphaKey(e){const n=e.shiftKey?.1:.01;let t=!0;switch(e.key){case"ArrowRight":this._a=y(this._a+n,0,1);break;case"ArrowLeft":this._a=y(this._a-n,0,1);break;default:t=!1}t&&(e.preventDefault(),this._a=Math.round(100this._a)/100,this._updateAll(),this._emitChange())}_handleChannelInput(e,n,t){const r=this.format;if("hex"===e){const e=C(n);if(!e)return;const[t,r,o]=f(e.r,e.g,e.b);this._h=t,this._s=r,this._v=o,this._a=e.a}else if("a"===e){const e=parseFloat(n);if(isNaN(e)\|\|e<0\|\|e>1)return;this._a=Math.round(100e)/100}else{const o=parseInt(n,10);if(isNaN(o))return;const a=y(o,t.min,t.max);if("rgb"===r){const[n,t,r]=w(this._h,this._s,this._v),o="r"===e?a:n,i="g"===e?a:t,s="b"===e?a:r,[c,l,d]=f(o,i,s);this._h=c,this._s=l,this._v=d}else if("hsl"===r){const[n,t,r]=x(this._h,this._s,this._v),o="h"===e?a:n,i="s"===e?a:t,s="l"===e?a:r,[c,l,d]=_(o,i,s);this._h=c,this._s=l,this._v=d}else"hsv"===r&&("h"===e?this._h=a:"s"===e?this._s=a:"v"===e&&(this._v=a))}this._drawnHue!==this._h&&this._drawCanvas(),this._updateCanvasHandle(),this._updateHueThumb(),this._updateAlphaThumb(),this._updateSwatch(),this._updateAriaValues(),this._emitChange()}_syncValueAttr(){this._updatingValue=!0,this.setAttribute("value",this._formatColor(this.format)),this._updatingValue=!1}_emitChange(){this._syncValueAttr();const e=this._getColorRepresentations();this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._formatColor(this.format),...e,alpha:Math.round(100this._a)/100}}))}_buildStyles(){return'\n :host {\n display: inline-block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n --_swatch-size: var(--sizing-medium, 40px);\n --_canvas-width: var(--component-colorpicker-width, 260px);\n --_canvas-height: var(--component-colorpicker-canvas-height, 160px);\n }\n\n :host([size="small"]) {\n --_swatch-size: var(--sizing-small, 32px);\n --_canvas-width: var(--component-colorpicker-width-small, 200px);\n --_canvas-height: var(--component-colorpicker-canvas-height-small, 120px);\n }\n\n :host([size="large"]) {\n --_swatch-size: var(--sizing-large, 56px);\n --_canvas-width: var(--component-colorpicker-width-large, 320px);\n --_canvas-height: var(--component-colorpicker-canvas-height-large, 200px);\n }\n\n .colorpicker {\n width: var(--_canvas-width);\n display: flex;\n flex-direction: column;\n gap: var(--component-colorpicker-gap, var(--spacing-medium, 8px));\n }\n\n /* ── Canvas ── /\n .canvas-container {\n position: relative;\n width: 100%;\n height: var(--_canvas-height);\n border-radius: var(--component-colorpicker-border-radius, var(--radii-x-small, 2px));\n overflow: hidden;\n cursor: crosshair;\n touch-action: none;\n }\n\n .canvas {\n display: block;\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n }\n\n .canvas:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-content--, #0576ff);\n }\n\n .canvas-handle {\n position: absolute;\n width: var(--component-colorpicker-canvas-handle-size, 16px);\n height: var(--component-colorpicker-canvas-handle-size, 16px);\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 0 2px rgba(0,0,0,0.5);\n transform: translate(-50%, -50%);\n pointer-events: none;\n }\n\n / ── Sliders ── /\n .hue-slider,\n .alpha-slider {\n position: relative;\n width: 100%;\n height: var(--component-colorpicker-slider-height, 12px);\n border-radius: var(--component-colorpicker-border-radius, var(--radii-x-small, 2px));\n cursor: pointer;\n outline: none;\n touch-action: none;\n }\n\n .hue-slider:focus-visible,\n .alpha-slider:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-content--, #0576ff);\n }\n\n .hue-slider {\n background: linear-gradient(to right,\n hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),\n hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%),\n hsl(360,100%,50%)\n );\n }\n\n .alpha-slider {\n background-image:\n linear-gradient(45deg,\n var(--base-content-lightest, #ccc) 25%, transparent 25%,\n transparent 75%, var(--base-content-lightest, #ccc) 75%),\n linear-gradient(45deg,\n var(--base-content-lightest, #ccc) 25%, transparent 25%,\n transparent 75%, var(--base-content-lightest, #ccc) 75%);\n background-size:\n calc(var(--component-colorpicker-checkerboard-size, 8px) 2)\n calc(var(--component-colorpicker-checkerboard-size, 8px) * 2);\n background-position:\n 0 0,\n var(--component-colorpicker-checkerboard-size, 8px)\n var(--component-colorpicker-checkerboard-size, 8px);\n }\n\n .alpha-gradient {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n .hue-thumb,\n .alpha-thumb {\n position: absolute;\n top: 50%;\n width: var(--component-colorpicker-slider-thumb-size, 16px);\n height: var(--component-colorpicker-slider-thumb-size, 16px);\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 0 2px rgba(0,0,0,0.4);\n transform: translate(-50%, -50%);\n pointer-events: none;\n }\n\n /* ── Inputs row ── /\n .inputs-row {\n display: flex;\n align-items: flex-end;\n gap: var(--spacing-x-small, 4px);\n }\n\n .swatch-container {\n flex-shrink: 0;\n }\n\n .swatch-preview {\n width: var(--_swatch-size);\n height: var(--_swatch-size);\n border-radius: var(--component-colorpicker-border-radius, var(--radii-x-small, 2px));\n border: 1px solid var(--base-border, #ccc);\n }\n\n .format-select {\n flex-shrink: 0;\n width: 72px;\n }\n\n .channel-inputs {\n display: flex;\n flex: 1;\n gap: var(--spacing-2x-small, 2px);\n min-width: 0;\n }\n\n .channel-inputs y-input {\n flex: 1;\n min-width: 0;\n }\n\n .channel-inputs y-input.full-width {\n flex: 2;\n }\n '}}customElements.get("y-colorpicker")\|\|customElements.define("y-colorpicker",X);class Q extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["value","format","formats","show-alpha","placeholder","name","disabled","invalid","clearable","size","label-position"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._onDocumentClick=this._onDocumentClick.bind(this),this._onPointerDown=()=>{this._clickInsidePopup=!0},this._clickInsidePopup=!1}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this.render(),this.addEventListener("pointerdown",this._onPointerDown),document.addEventListener("click",this._onDocumentClick)}disconnectedCallback(){this.removeEventListener("pointerdown",this._onPointerDown),document.removeEventListener("click",this._onDocumentClick)}attributeChangedCallback(e,n,t){if(n!==t){if("value"===e)return this._internals.setFormValue(t\|\|"",this.name),this._updateDisplay(),void(this._fromPicker\|\|this._syncPickerValue());if("name"!==e){if("format"===e){const e=this.shadowRoot.querySelector("y-colorpicker");return void(e&&e.setAttribute("format",t))}"invalid"!==e?this.shadowRoot.innerHTML&&this.render():this._updateValidationState()}else this._internals.setFormValue(this.value,t)}}get clearable(){return this.hasAttribute("clearable")}set clearable(e){e?this.setAttribute("clearable",""):this.removeAttribute("clearable")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get format(){return this.getAttribute("format")\|\|"hex"}set format(e){this.setAttribute("format",e)}get formats(){try{return JSON.parse(this.getAttribute("formats")\|\|'["hex","rgb","hsl","hsv"]')}catch{return["hex","rgb","hsl","hsv"]}}set formats(e){this.setAttribute("formats",JSON.stringify(e))}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get placeholder(){return this.getAttribute("placeholder")\|\|"Select color"}set placeholder(e){this.setAttribute("placeholder",e)}get showAlpha(){return this.hasAttribute("show-alpha")}set showAlpha(e){e?this.setAttribute("show-alpha",""):this.removeAttribute("show-alpha")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return this.getAttribute("value")\|\|""}set value(e){this.setAttribute("value",e),this._internals.setFormValue(e,this.name)}clear(){this.value="",this._internals.setFormValue("",this.name),this._updateDisplay();const e=this.shadowRoot.querySelector("y-colorpicker");e&&e.setColor(""),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:"",hex:"",rgb:"",hsl:"",hsv:"",alpha:1}}))}close(){this._setOpen(!1)}open(){this.disabled\|\|this._setOpen(!0)}render(){const e=this.disabled,n="top"===this.labelPosition,t=this.size,r='<div class="label-wrapper" part="label-wrapper"><slot name="label"></slot></div>';this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e)}</style>\n <div class="color" part="color">\n <div class="wrapper" part="wrapper">\n ${n?r:""}\n <div\n class="trigger${this.invalid?" is-invalid":""}"\n part="trigger"\n role="combobox"\n aria-haspopup="true"\n aria-expanded="false"\n tabindex="${e?"-1":"0"}"\n ${e?'aria-disabled="true"':""}\n >\n <div class="swatch${this.showAlpha?" has-alpha":""}" part="swatch"\n aria-hidden="true"\n ></div>\n <span class="display" part="display"></span>\n ${this.clearable&&this.value?'<button class="clear-btn" part="clear-btn" aria-label="Clear color" tabindex="-1" type="button">\n <y-icon name="close" size="small"></y-icon>\n </button>':""}\n </div>\n <div class="popup" part="popup" role="dialog" aria-label="Color picker" hidden>\n <y-colorpicker></y-colorpicker>\n </div>\n ${n?"":r}\n </div>\n </div>\n `;const o=this.shadowRoot.querySelector("y-colorpicker");this.value&&o.setAttribute("value",this.value),o.setAttribute("format",this.format),o.setAttribute("formats",JSON.stringify(this.formats)),this.showAlpha&&o.setAttribute("show-alpha",""),o.setAttribute("size",t),this._updateDisplay(),E(this.shadowRoot.querySelector(".label-wrapper")),e\|\|this._bindListeners()}_bindListeners(){const e=this.shadowRoot.querySelector(".trigger"),n=this.shadowRoot.querySelector(".popup"),t=this.shadowRoot.querySelector("y-colorpicker"),r=this.shadowRoot.querySelector(".clear-btn");e.addEventListener("click",e=>{r&&(e.target===r\|\|r.contains(e.target))\|\|this._setOpen(n.hidden)}),e.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),this._setOpen(n.hidden)),"Escape"===e.key&&this._setOpen(!1)}),r?.addEventListener("click",e=>{e.stopPropagation(),this.clear()}),t.addEventListener("change",e=>{if(e.composedPath()[0]!==t)return;const n=e.detail;this._fromPicker=!0,this.setAttribute("value",n.value),this._fromPicker=!1,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:n}))}),t.addEventListener("format-change",e=>{const n=e.detail?.format;n&&(this.setAttribute("format",n),this._updateDisplay())})}_buildStyles(e){const n=this.size,t={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"},r={small:"var(--component-color-swatch-size-small, var(--sizing-small, 32px))",medium:"var(--component-color-swatch-size-medium, var(--sizing-medium, 40px))",large:"var(--component-color-swatch-size-large, var(--sizing-large, 56px))"},o={small:"var(--component-inputs-padding-small)",medium:"var(--component-inputs-padding-medium)",large:"var(--component-inputs-padding-large)"},a=r[n]\|\|r.medium,i=o[n]\|\|o.medium;return`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--component-input-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .color {\n display: flex;\n flex-direction: column;\n }\n\n .wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .label-wrapper {\n display: none;\n }\n\n .trigger {\n all: unset;\n display: flex;\n align-items: center;\n gap: var(--component-color-trigger-gap, var(--spacing-x-small));\n background: var(--component-input-background);\n border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: ${i};\n min-height: ${t[n]\|\|t.medium};\n box-sizing: border-box;\n cursor: pointer;\n user-select: none;\n transition: border-color 0.2s ease-in-out;\n }\n\n .trigger:hover {\n border-color: var(--component-input-color);\n }\n\n .trigger:focus-visible {\n border-color: var(--component-input-accent);\n outline: 2px solid var(--component-input-accent);\n outline-offset: -2px;\n }\n\n .trigger.is-invalid {\n border-color: var(--component-input-error-border-color);\n background: var(--component-input-error-background);\n }\n\n / ── Swatch ── /\n .swatch {\n flex-shrink: 0;\n width: calc(${a} - ${i} - ${i});\n height: calc(${a} - ${i} - ${i});\n border-radius: var(--component-color-swatch-border-radius, var(--radii-small));\n border: 1px solid var(--base-border, #ccc);\n background-color: transparent;\n }\n\n .swatch.has-alpha {\n background-image:\n linear-gradient(transparent, transparent),\n linear-gradient(45deg,\n var(--base-content-lightest, #ccc) 25%, transparent 25%,\n transparent 75%, var(--base-content-lightest, #ccc) 75%),\n linear-gradient(45deg,\n var(--base-content-lightest, #ccc) 25%, transparent 25%,\n transparent 75%, var(--base-content-lightest, #ccc) 75%);\n background-size: 100% 100%, 8px 8px, 8px 8px;\n background-position: 0 0, 0 0, 4px 4px;\n background-color: transparent;\n }\n\n / ── Display ── /\n .display {\n flex: 1;\n min-width: 0;\n font-family: inherit;\n font-size: 1em;\n color: inherit;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .display.is-placeholder {\n color: var(--base-content-light);\n }\n\n / ── Clear button ── /\n .clear-btn {\n all: unset;\n display: flex;\n align-items: center;\n cursor: pointer;\n flex-shrink: 0;\n color: var(--component-input-icon-color);\n opacity: 0.7;\n border-radius: 50%;\n padding: 2px;\n }\n\n .clear-btn:hover {\n opacity: 1;\n background: var(--base-background-component);\n }\n\n / ── Label ── /\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-input-label-color);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-input-error-color);\n }\n\n / ── Popup ── /\n .popup {\n position: absolute;\n top: calc(100% + var(--component-color-popup-offset, 4px));\n left: 0;\n z-index: var(--component-color-z-index, 200);\n background: var(--base-background-app);\n border: var(--component-inputs-border-width) solid var(--base-border);\n border-radius: var(--component-colorpicker-border-radius, var(--radii-x-small));\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n padding: var(--spacing-small, 8px);\n }\n `}_onDocumentClick(){this._clickInsidePopup?this._clickInsidePopup=!1:this._setOpen(!1)}_positionPopup(e,n){const t=n.getBoundingClientRect(),r=e.offsetWidth,o=e.offsetHeight,a=parseInt(getComputedStyle(this).getPropertyValue("--component-color-popup-offset")\|\|"4",10),i=window.innerWidth,s=window.innerHeight-t.bottom-a,c=t.top-a;s>=o\|\|s>=c?(e.style.top=`calc(100% + ${a}px)`,e.style.bottom="auto"):(e.style.top="auto",e.style.bottom=`calc(100% + ${a}px)`);i-t.left>=r?(e.style.left="0",e.style.right="auto"):(e.style.left="auto",e.style.right="0")}_setOpen(e){const n=this.shadowRoot.querySelector(".popup"),t=this.shadowRoot.querySelector(".trigger");if(!n\|\|!t)return;const r=!n.hidden;n.hidden=!e,t.setAttribute("aria-expanded",String(e)),e?this._positionPopup(n,t):r&&t.focus({preventScroll:!0})}_syncPickerValue(){const e=this.shadowRoot.querySelector("y-colorpicker");e&&this.value&&e.setColor(this.value)}_updateClearBtn(){if(!this.clearable)return;const e=this.shadowRoot.querySelector(".trigger");if(!e)return;const n=e.querySelector(".clear-btn"),t=e.querySelector(".display");if(this.value&&!n){const e=document.createElement("button");e.className="clear-btn",e.setAttribute("part","clear-btn"),e.setAttribute("aria-label","Clear color"),e.setAttribute("tabindex","-1"),e.setAttribute("type","button"),e.innerHTML='<y-icon name="close" size="small"></y-icon>',t.insertAdjacentElement("afterend",e),e.addEventListener("click",e=>{e.stopPropagation(),this.clear()})}else!this.value&&n&&n.remove()}_updateDisplay(){const e=this.shadowRoot.querySelector(".display"),n=this.shadowRoot.querySelector(".swatch");if(e&&(e.textContent=this.value\|\|this.placeholder,e.classList.toggle("is-placeholder",!this.value)),n){const e=this.value?C(this.value):null;if(e){const t=`rgba(${e.r}, ${e.g}, ${e.b}, ${e.a})`;n.classList.contains("has-alpha")?(n.style.backgroundImage=`linear-gradient(${t}, ${t}), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%)`,n.style.backgroundColor="transparent"):(n.style.backgroundColor=t,n.style.backgroundImage="")}else this.value\|\|(n.style.backgroundColor="",n.style.backgroundImage="")}this._updateClearBtn()}_updateValidationState(){const e=this.shadowRoot.querySelector(".trigger"),n=this.shadowRoot.querySelector(".label-wrapper");e?.classList.toggle("is-invalid",this.invalid),n?.classList.toggle("is-invalid",this.invalid)}}customElements.get("y-color")\|\|customElements.define("y-color",Q);const U=["January","February","March","April","May","June","July","August","September","October","November","December"],Z=["Su","Mo","Tu","We","Th","Fr","Sa"];class ee extends HTMLElement{static get observedAttributes(){return["mode","value","min","max","show-hours","show-minutes","show-seconds","show-years","show-months","show-days","format","hour-format","minute-interval","second-interval","color","mobile-breakpoint"]}constructor(){super(),this.attachShadow({mode:"open"}),this._viewDate=new Date,this._viewDate.setDate(1),this._viewDate.setHours(0,0,0,0),this._startDate=null,this._endDate=null,this._hoverDate=null,this._awaitingEnd=!1,this._startTime={h:0,m:0,s:0},this._endTime={h:0,m:0,s:0},this._mql=null,this._isMobile=!1,this._onMediaChange=this._onMediaChange.bind(this)}connectedCallback(){this._setupMediaQuery(),this._parseValue(),this.render()}disconnectedCallback(){this._teardownMediaQuery()}attributeChangedCallback(e,n,t){n!==t&&(this._suppressParse\|\|("mobile-breakpoint"===e&&this._setupMediaQuery(),"value"===e&&this._parseValue(),this.shadowRoot.innerHTML&&this.render()))}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get format(){return this.getAttribute("format")\|\|"MM/DD/YYYY"}set format(e){this.setAttribute("format",e)}get hourFormat(){return this.getAttribute("hour-format")\|\|"12"}set hourFormat(e){this.setAttribute("hour-format",e)}get max(){return this.getAttribute("max")\|\|""}set max(e){this.setAttribute("max",e)}get min(){return this.getAttribute("min")\|\|""}set min(e){this.setAttribute("min",e)}get minuteInterval(){return parseInt(this.getAttribute("minute-interval")\|\|"5",10)}set minuteInterval(e){this.setAttribute("minute-interval",String(e))}get mobile(){return this._isMobile}get mobileBreakpoint(){return this.getAttribute("mobile-breakpoint")\|\|""}set mobileBreakpoint(e){e?this.setAttribute("mobile-breakpoint",e):this.removeAttribute("mobile-breakpoint")}get mode(){return this.getAttribute("mode")\|\|"single"}set mode(e){this.setAttribute("mode",e)}get secondInterval(){return parseInt(this.getAttribute("second-interval")\|\|"5",10)}set secondInterval(e){this.setAttribute("second-interval",String(e))}get showDays(){return"false"!==this.getAttribute("show-days")}set showDays(e){this.setAttribute("show-days",e?"true":"false")}get showHours(){return this.hasAttribute("show-hours")}set showHours(e){e?this.setAttribute("show-hours",""):this.removeAttribute("show-hours")}get showMinutes(){return this.hasAttribute("show-minutes")}set showMinutes(e){e?this.setAttribute("show-minutes",""):this.removeAttribute("show-minutes")}get showMonths(){return"false"!==this.getAttribute("show-months")}set showMonths(e){this.setAttribute("show-months",e?"true":"false")}get showSeconds(){return this.hasAttribute("show-seconds")}set showSeconds(e){e?this.setAttribute("show-seconds",""):this.removeAttribute("show-seconds")}get showYears(){return"false"!==this.getAttribute("show-years")}set showYears(e){this.setAttribute("show-years",e?"true":"false")}get value(){return this.getAttribute("value")\|\|""}set value(e){this.setAttribute("value",e)}clear(){this._startDate=null,this._endDate=null,this._awaitingEnd=!1,this._hoverDate=null,this.removeAttribute("value"),this.render()}formatDate(e){return this._formatDate(e)}navigateTo(e,n){this._viewDate.setFullYear(e),void 0!==n&&this._viewDate.setMonth(n),this._viewDate.setDate(1),this.render()}render(){const e=this.showHours\|\|this.showMinutes\|\|this.showSeconds,n="range"===this.mode;this.shadowRoot.innerHTML=`\n <style>${this._buildStyles()}</style>\n <div class="datepicker${n?" range":""}${this._isMobile&&n?" mobile":""}">\n ${this._buildPanel("left",e)}\n ${n?this._buildPanel("right",e):""}\n </div>\n `,this._bindListeners(),e&&this._scrollToSelectedTime()}_applyTimesToDates(){this._startDate&&this._startDate.setHours(this._startTime.h,this._startTime.m,this._startTime.s,0),this._endDate&&this._endDate.setHours(this._endTime.h,this._endTime.m,this._endTime.s,0)}_bindListeners(){const e=this.shadowRoot;e.querySelectorAll(".nav-btn").forEach(e=>{e.addEventListener("click",()=>{const n=e.dataset.action,t=n.includes("year")?12:1,r=n.includes("prev")?-1:1;this._navigate(rt)})}),e.querySelectorAll(".month-sel").forEach(e=>{e.addEventListener("change",()=>{const n=parseInt(e.value);if("right"===e.dataset.side){const e=new Date(this._viewDate);e.setMonth(n-1),e.setDate(1),this._viewDate=e}else this._viewDate.setMonth(n);this.render()})}),e.querySelectorAll(".year-sel").forEach(e=>{e.addEventListener("change",()=>{const n=parseInt(e.value);if("right"===e.dataset.side){const e=n-this._viewDateForSide("right").getFullYear();this._viewDate.setFullYear(this._viewDate.getFullYear()+e)}else this._viewDate.setFullYear(n);this.render()})}),e.querySelectorAll(".day-btn").forEach(e=>{e.addEventListener("click",()=>this._handleDayClick(new Date(e.dataset.date))),e.addEventListener("mouseenter",()=>{this._awaitingEnd&&(this._hoverDate=new Date(e.dataset.date),this.render())})}),e.querySelectorAll(".month-btn").forEach(e=>{e.addEventListener("click",()=>{this._viewDate.setMonth(parseInt(e.dataset.month)),this.render()})}),e.querySelectorAll(".year-btn").forEach(e=>{e.addEventListener("click",()=>{this._viewDate.setFullYear(parseInt(e.dataset.year)),this.render()})}),e.querySelectorAll("[data-hour]").forEach(e=>{e.addEventListener("click",()=>{const n=e.dataset.side,t=parseInt(e.dataset.hour);"right"===n?this._endTime.h=t:this._startTime.h=t,this._applyTimesToDates(),this._emitChange("hour"),this.render()})}),e.querySelectorAll("[data-minute]").forEach(e=>{e.addEventListener("click",()=>{const n=e.dataset.side,t=parseInt(e.dataset.minute);"right"===n?this._endTime.m=t:this._startTime.m=t,this._applyTimesToDates(),this._emitChange("minute"),this.render()})}),e.querySelectorAll("[data-second]").forEach(e=>{e.addEventListener("click",()=>{const n=e.dataset.side,t=parseInt(e.dataset.second);"right"===n?this._endTime.s=t:this._startTime.s=t,this._applyTimesToDates(),this._emitChange("second"),this.render()})})}_buildDayGrid(e){const n=e.getFullYear(),t=e.getMonth(),r=new Date(n,t,1).getDay(),o=new Date(n,t+1,0).getDate();return`\n <div class="day-grid">\n ${Z.map(e=>`<span class="day-hdr">${e}</span>`).join("")}\n ${Array(r).fill("<span></span>").join("")}\n ${Array.from({length:o},(e,r)=>{const o=r+1,a=new Date(n,t,o),i=this._isDisabled(a),s=this._isRangeEdge(a),c=this._sameDay(a,this._startDate),l=this._inRange(a);let d="flat",p="base";return s\|\|c?(d="filled",p=this.color):l&&(d="flat",p=this.color),`<y-button\n class="day-btn"\n style-type="${d}"\n color="${p}"\n size="medium"\n data-date="${a.toISOString()}"\n ${i?"disabled":""}\n aria-label="${a.toDateString()}"\n aria-pressed="${s\|\|c}"\n >${o}</y-button>`}).join("")}\n </div>\n `}_buildHeader(e,n,t){const r=e.getFullYear(),o=e.getMonth();if(!this.showDays){let e;if(this.showMonths)e=String(r);else{e=`${this._minDate()?.getFullYear()??r-10} – ${this._maxDate()?.getFullYear()??r+10}`}return`\n <div class="cal-header">\n <div class="header-selects">\n <span class="header-label">${e}</span>\n </div>\n </div>\n `}const a=!t\|\|"left"===n,i=!t\|\|"right"===n,s=this._minDate()?.getFullYear()??r-50,c=this._maxDate()?.getFullYear()??r+50,l=JSON.stringify(U.map((e,n)=>({value:String(n),label:e}))),d=JSON.stringify(Array.from({length:c-s+1},(e,n)=>({value:String(s+n),label:String(s+n)})));return`\n <div class="cal-header">\n <div class="nav-start">\n ${a?`<y-button class="nav-btn" data-action="prev-year" data-side="${n}" style-type="flat" size="small" aria-label="Previous year"><y-icon name="expand-left" size="small"></y-icon></y-button>`:""}\n ${a?`<y-button class="nav-btn" data-action="prev-month" data-side="${n}" style-type="flat" size="small" aria-label="Previous month"><y-icon name="chevron-left" size="small"></y-icon></y-button>`:""}\n </div>\n <div class="header-selects">\n ${this.showMonths?`<y-select class="month-sel" data-side="${n}" size="small" value="${o}" options='${l}'></y-select>`:""}\n ${this.showYears?`<y-select class="year-sel" data-side="${n}" size="small" value="${r}" options='${d}'></y-select>`:""}\n </div>\n <div class="nav-end">\n ${i?`<y-button class="nav-btn" data-action="next-month" data-side="${n}" style-type="flat" size="small" aria-label="Next month"><y-icon name="chevron-right" size="small"></y-icon></y-button>`:""}\n ${i?`<y-button class="nav-btn" data-action="next-year" data-side="${n}" style-type="flat" size="small" aria-label="Next year"><y-icon name="expand-right" size="small"></y-icon></y-button>`:""}\n </div>\n </div>\n `}_buildMonthGrid(e,n){const t=e.getFullYear();return`\n <div class="month-grid">\n ${U.map((e,r)=>{const o=this._isMonthDisabled(t,r),a=this._startDate&&this._startDate.getFullYear()===t&&this._startDate.getMonth()===r;return`<y-button\n class="month-btn"\n style-type="${a?"filled":"flat"}"\n color="${a?this.color:"base"}"\n size="small"\n data-month="${r}"\n data-side="${n}"\n ${o?"disabled":""}\n >${e.slice(0,3)}</y-button>`}).join("")}\n </div>\n `}_buildPanel(e,n){const t=this._viewDateForSide(e),r="range"===this.mode;return`\n <div class="panel" data-side="${e}">\n <div class="panel-body">\n ${this._buildHeader(t,e,r)}\n ${this.showDays?this._buildDayGrid(t):""}\n ${!this.showDays&&this.showMonths?this._buildMonthGrid(t,e):""}\n ${this.showDays\|\|this.showMonths?"":this._buildYearGrid(t)}\n </div>\n ${n?this._buildTimeColumn(e):""}\n </div>\n `}_buildStyles(){return"\n :host {\n display: inline-block;\n font-family: var(--font-family-body, sans-serif);\n font-size: var(--font-size-label, 0.875rem);\n }\n\n .datepicker {\n display: inline-flex;\n gap: 0;\n background: var(--component-datepicker-background);\n border: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n border-radius: var(--component-datepicker-border-radius);\n overflow: hidden;\n }\n\n .datepicker.range {\n display: inline-flex;\n }\n\n .datepicker.range.mobile {\n flex-direction: column;\n }\n\n .datepicker.range.mobile .panel + .panel {\n border-left: none;\n border-top: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n }\n\n .panel {\n display: flex;\n align-items: stretch;\n }\n\n .panel + .panel {\n border-left: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n }\n\n .panel-body {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--spacing-small, 8px);\n padding: var(--spacing-medium, 16px);\n }\n\n /* ---- Header ---- /\n\n .cal-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-2x-small, 4px);\n width: 100%;\n }\n\n .nav-start, .nav-end {\n display: flex;\n gap: 2px;\n flex-shrink: 0;\n }\n\n .header-selects {\n display: flex;\n gap: var(--spacing-x-small, 6px);\n flex: 1;\n justify-content: center;\n align-items: center;\n }\n\n .month-sel { min-width: 120px; }\n .year-sel { min-width: 80px; }\n\n .header-label {\n font-weight: 600;\n white-space: nowrap;\n }\n\n / ---- Day grid ---- /\n\n .day-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n column-gap: 2px;\n row-gap: 6px;\n width: 100%;\n }\n\n .day-hdr {\n text-align: center;\n font-size: var(--font-size-small, 0.75em);\n font-weight: 600;\n color: var(--component-datepicker-header-color);\n padding: 4px 0;\n }\n\n .day-btn {\n width: 100%;\n --component-button-border-radius: 50%;\n }\n\n / ---- Month / Year grids ---- /\n\n .month-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--spacing-x-small, 6px);\n padding: var(--spacing-x-small, 6px) 0;\n }\n\n .year-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--spacing-x-small, 6px);\n max-height: 220px;\n overflow-y: auto;\n padding: var(--spacing-x-small, 6px) 0;\n scrollbar-width: thin;\n }\n\n / ---- Time column ---- /\n\n .time-column {\n display: flex;\n align-self: flex-start;\n border-left: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n overflow: hidden;\n margin: var(--spacing-medium, 16px) 0;\n }\n\n .time-col-wrap {\n display: flex;\n flex-direction: column;\n }\n\n .time-col-wrap + .time-col-wrap {\n border-left: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n }\n\n .time-col-hdr {\n text-align: center;\n font-size: var(--font-size-small, 0.75em);\n font-weight: 600;\n color: var(--component-datepicker-header-color);\n padding: 6px 0 2px;\n flex-shrink: 0;\n }\n\n .time-column.time-disabled {\n opacity: 0.4;\n pointer-events: none;\n }\n\n .time-col {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow-y: auto;\n height: 280px;\n padding: var(--spacing-small, 8px) var(--spacing-x-small, 6px);\n scrollbar-width: thin;\n }\n\n .time-col::-webkit-scrollbar { width: 4px; }\n .time-col::-webkit-scrollbar-track { background: transparent; }\n .time-col::-webkit-scrollbar-thumb {\n background: var(--base-border);\n border-radius: 2px;\n }\n\n .time-btn { white-space: nowrap; }\n "}_buildTimeColumn(e){const n="right"===e?this._endTime:this._startTime,t="right"===e&&!this._endDate,r="24"===this.hourFormat,o=Array.from({length:24},(t,o)=>{const a=r?`${String(o).padStart(2,"0")}:00`:`${0===o?12:o>12?o-12:o}:00 ${o<12?"AM":"PM"}`,i=n.h===o;return`<y-button\n class="time-btn${i?" selected":""}"\n style-type="${i?"filled":"flat"}"\n color="${i?this.color:"base"}"\n size="small"\n data-hour="${o}"\n data-side="${e}"\n >${a}</y-button>`}).join(""),a=this.minuteInterval,i=this.secondInterval;return`\n <div class="time-column${t?" time-disabled":""}">\n <div class="time-col-wrap">\n <span class="time-col-hdr">Hr</span>\n <div class="time-col" data-col="hours">${o}</div>\n </div>\n ${this.showMinutes?`\n <div class="time-col-wrap">\n <span class="time-col-hdr">Min</span>\n <div class="time-col" data-col="minutes">\n ${Array.from({length:Math.floor(60/a)},(e,n)=>na).map(t=>{const r=Math.floor(n.m/a)a===t;return`<y-button\n class="time-btn${r?" selected":""}"\n style-type="${r?"filled":"flat"}"\n color="${r?this.color:"base"}"\n size="small"\n data-minute="${t}"\n data-side="${e}"\n >${String(t).padStart(2,"0")}</y-button>`}).join("")}\n </div>\n </div>\n `:""}\n ${this.showSeconds?`\n <div class="time-col-wrap">\n <span class="time-col-hdr">Sec</span>\n <div class="time-col" data-col="seconds">\n ${Array.from({length:Math.floor(60/i)},(e,n)=>ni).map(t=>{const r=Math.floor(n.s/i)i===t;return`<y-button\n class="time-btn${r?" selected":""}"\n style-type="${r?"filled":"flat"}"\n color="${r?this.color:"base"}"\n size="small"\n data-second="${t}"\n data-side="${e}"\n >${String(t).padStart(2,"0")}</y-button>`}).join("")}\n </div>\n </div>\n `:""}\n </div>\n `}_buildValueString(){if("range"===this.mode){return[this._startDate?this._startDate.toISOString():"",this._endDate?this._endDate.toISOString():""].filter(Boolean).join(",")}return this._startDate?this._startDate.toISOString():""}_buildYearGrid(e){const n=this._startDate?.getFullYear(),t=this._minDate()?.getFullYear()??e.getFullYear()-10,r=this._maxDate()?.getFullYear()??e.getFullYear()+10;return`\n <div class="year-grid">\n ${Array.from({length:r-t+1},(e,n)=>t+n).map(e=>`<y-button\n class="year-btn"\n style-type="${e===n?"filled":"flat"}"\n color="${e===n?this.color:"base"}"\n size="small"\n data-year="${e}"\n >${e}</y-button>`).join("")}\n </div>\n `}_emitChange(e){this._suppressParse=!0;const n=this._buildValueString();n!==this.getAttribute("value")&&this.setAttribute("value",n),this._suppressParse=!1,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:n,source:e,startDate:this._startDate?new Date(this._startDate):null,endDate:this._endDate?new Date(this._endDate):null,formatted:"range"===this.mode?`${this._formatDate(this._startDate)}${this._endDate?" - "+this._formatDate(this._endDate):""}`:this._formatDate(this._startDate)}}))}_formatDate(e){if(!e\|\|isNaN(e))return"";const n=e=>String(e).padStart(2,"0"),t=e.getHours(),r=t%12\|\|12;return this.format.replace("YYYY",e.getFullYear()).replace("MM",n(e.getMonth()+1)).replace("DD",n(e.getDate())).replace("HH",n(t)).replace("hh",n(r)).replace("mm",n(e.getMinutes())).replace("ss",n(e.getSeconds())).replace("A",t>=12?"PM":"AM").replace("a",t>=12?"pm":"am")}_getBreakpointPx(){const e=this.mobileBreakpoint;if(e){const n=parseInt(e,10);if(!isNaN(n)&&n>0)return n}const n=getComputedStyle(document.documentElement).getPropertyValue("--component-datepicker-mobile-breakpoint").trim();if(n){const e=parseInt(n,10);if(!isNaN(e)&&e>0)return e}return 768}_handleDayClick(e){"range"===this.mode?this._awaitingEnd?(e<this._startDate?(this._endDate=new Date(this._startDate),this._startDate=e):this._endDate=e,this._awaitingEnd=!1,this._hoverDate=null):(this._startDate=e,this._endDate=null,this._awaitingEnd=!0):this._startDate=e,this._applyTimesToDates(),this._emitChange("day"),this.render()}_inRange(e){if("range"!==this.mode\|\|!this._startDate)return!1;const n=this._endDate\|\|(this._awaitingEnd?this._hoverDate:null);if(!n)return!1;const[t,r]=this._startDate<=n?[this._startDate,n]:[n,this._startDate];return e>t&&e<r}_isDisabled(e){const n=this._minDate(),t=this._maxDate();return!!(n&&e<n)\|\|!!(t&&e>t)}_isMonthDisabled(e,n){const t=this._minDate(),r=this._maxDate();return!!(t&&new Date(e,n+1,0)<t)\|\|!!(r&&new Date(e,n,1)>r)}_isRangeEdge(e){return this._sameDay(e,this._startDate)\|\|this._sameDay(e,this._endDate)}_maxDate(){return this.max?new Date(this.max):null}_minDate(){return this.min?new Date(this.min):null}_navigate(e){this._viewDate.setMonth(this._viewDate.getMonth()+e),this.render()}_onMediaChange(e){this._isMobile=e.matches,this.render()}_parseValue(){const e=this.value;if(!e)return this._startDate=null,void(this._endDate=null);if("range"===this.mode){const n=e.split(",");this._startDate=n[0]?new Date(n[0]):null,this._endDate=n[1]?new Date(n[1]):null}else this._startDate=new Date(e);const n=e=>this.showMinutes?Math.floor(e/this.minuteInterval)this.minuteInterval:0,t=e=>this.showSeconds?Math.floor(e/this.secondInterval)this.secondInterval:0;if(this._startDate&&!isNaN(this._startDate)){this._startTime={h:this._startDate.getHours(),m:n(this._startDate.getMinutes()),s:t(this._startDate.getSeconds())};const e=new Date(this._startDate);e.setDate(1),e.setHours(0,0,0,0),this._viewDate=e}this._endDate&&!isNaN(this._endDate)&&(this._endTime={h:this._endDate.getHours(),m:n(this._endDate.getMinutes()),s:t(this._endDate.getSeconds())})}_sameDay(e,n){return!(!e\|\|!n)&&(e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()&&e.getDate()===n.getDate())}_scrollToSelectedTime(){requestAnimationFrame(()=>{this.shadowRoot.querySelectorAll(".time-col").forEach(e=>{const n=e.querySelector(".selected");n&&n.scrollIntoView({block:"center"})})})}_setupMediaQuery(){this._teardownMediaQuery();const e=this._getBreakpointPx();this._mql=window.matchMedia(`(max-width: ${e}px)`),this._isMobile=this._mql.matches,this._mql.addEventListener("change",this._onMediaChange)}_teardownMediaQuery(){this._mql&&(this._mql.removeEventListener("change",this._onMediaChange),this._mql=null)}_viewDateForSide(e){if("right"===e){const e=new Date(this._viewDate);return e.setMonth(e.getMonth()+1),e}return this._viewDate}}customElements.get("y-datepicker")\|\|customElements.define("y-datepicker",ee);class ne extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["mode","value","min","max","format","placeholder","size","disabled","invalid","name","label-position","color","clearable","show-hours","show-minutes","show-seconds","hour-format","minute-interval","second-interval","show-years","show-months","show-days","mobile-breakpoint","native-mobile"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._onDocumentClick=this._onDocumentClick.bind(this),this._suppressBlurApply=!1,this._selectedParts=new Set,this._mql=null,this._isMobile=!1,this._onMediaChange=this._onMediaChange.bind(this)}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this._setupMediaQuery(),this.render(),document.addEventListener("click",this._onDocumentClick)}disconnectedCallback(){document.removeEventListener("click",this._onDocumentClick),this._teardownMediaQuery()}attributeChangedCallback(e,n,t){if(n!==t){if("mobile-breakpoint"===e&&this._setupMediaQuery(),"value"===e)return this._internals.setFormValue(t,this.getAttribute("name")),this._updateDisplay(),void this._syncPickerValue();"name"!==e?"invalid"!==e?this.shadowRoot.innerHTML&&this.render():this._updateValidationState():this._internals.setFormValue(this.value,t)}}get clearable(){return this.hasAttribute("clearable")}set clearable(e){e?this.setAttribute("clearable",""):this.removeAttribute("clearable")}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get format(){return this.hasAttribute("format")?this.getAttribute("format"):this.showHours\|\|this.showMinutes\|\|this.showSeconds?this.showSeconds?"MM/DD/YYYY hh:mm:ss A":"MM/DD/YYYY hh:mm A":"MM/DD/YYYY"}set format(e){this.setAttribute("format",e)}get hourFormat(){return this.getAttribute("hour-format")\|\|"12"}set hourFormat(e){this.setAttribute("hour-format",e)}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get max(){return this.getAttribute("max")\|\|""}set max(e){this.setAttribute("max",e)}get min(){return this.getAttribute("min")\|\|""}set min(e){this.setAttribute("min",e)}get minuteInterval(){return parseInt(this.getAttribute("minute-interval")\|\|"5",10)}set minuteInterval(e){this.setAttribute("minute-interval",String(e))}get mobile(){return this._isMobile}get nativeMobile(){return this.hasAttribute("native-mobile")}set nativeMobile(e){e?this.setAttribute("native-mobile",""):this.removeAttribute("native-mobile")}get mobileBreakpoint(){return this.getAttribute("mobile-breakpoint")\|\|""}set mobileBreakpoint(e){e?this.setAttribute("mobile-breakpoint",e):this.removeAttribute("mobile-breakpoint")}get mode(){return this.getAttribute("mode")\|\|"single"}set mode(e){this.setAttribute("mode",e)}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get placeholder(){return this.getAttribute("placeholder")\|\|("range"===this.mode?"Select date range":"Select date")}set placeholder(e){this.setAttribute("placeholder",e)}get secondInterval(){return parseInt(this.getAttribute("second-interval")\|\|"5",10)}set secondInterval(e){this.setAttribute("second-interval",String(e))}get showDays(){return"false"!==this.getAttribute("show-days")}set showDays(e){this.setAttribute("show-days",e?"true":"false")}get showHours(){return this.hasAttribute("show-hours")}set showHours(e){e?this.setAttribute("show-hours",""):this.removeAttribute("show-hours")}get showMinutes(){return this.hasAttribute("show-minutes")}set showMinutes(e){e?this.setAttribute("show-minutes",""):this.removeAttribute("show-minutes")}get showMonths(){return"false"!==this.getAttribute("show-months")}set showMonths(e){this.setAttribute("show-months",e?"true":"false")}get showSeconds(){return this.hasAttribute("show-seconds")}set showSeconds(e){e?this.setAttribute("show-seconds",""):this.removeAttribute("show-seconds")}get showYears(){return"false"!==this.getAttribute("show-years")}set showYears(e){this.setAttribute("show-years",e?"true":"false")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return this.getAttribute("value")\|\|""}set value(e){this.setAttribute("value",e),this._internals.setFormValue(e,this.name)}clear(){this._suppressBlurApply=!0,this.value="",this._internals.setFormValue("",this.name),this._updateDisplay();const e=this.shadowRoot.querySelector("y-datepicker");e&&e.clear(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:"",startDate:null,endDate:null,formatted:""}}))}close(){this._setOpen(!1)}open(){this._setOpen(!0)}render(){if(this._isMobile&&this.nativeMobile)return void this._renderMobile();const e=this.disabled,n="top"===this.labelPosition,t='<div class="label-wrapper"><slot name="label"></slot></div>',r=[`mode="${this.mode}"`,`color="${this.color}"`,`format="${this.format}"`,this.value?`value="${this.value}"`:"",this.min?`min="${this.min}"`:"",this.max?`max="${this.max}"`:"",this.hasAttribute("show-hours")?"show-hours":"",this.hasAttribute("show-minutes")?"show-minutes":"",this.hasAttribute("show-seconds")?"show-seconds":"","24"===this.getAttribute("hour-format")?'hour-format="24"':"",this.hasAttribute("minute-interval")?`minute-interval="${this.minuteInterval}"`:"",this.hasAttribute("second-interval")?`second-interval="${this.secondInterval}"`:"","false"===this.getAttribute("show-years")?'show-years="false"':"","false"===this.getAttribute("show-months")?'show-months="false"':"","false"===this.getAttribute("show-days")?'show-days="false"':"",this.mobileBreakpoint?`mobile-breakpoint="${this.mobileBreakpoint}"`:""].filter(Boolean).join(" "),o=this._getFormattedDisplay();this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e)}</style>\n <div class="wrapper">\n ${n?t:""}\n <div\n class="trigger${this.invalid?" is-invalid":""}"\n role="combobox"\n aria-expanded="false"\n aria-haspopup="true"\n tabindex="-1"\n >\n <slot name="left-icon"></slot>\n <input\n class="display"\n type="text"\n value="${o}"\n placeholder="${this.placeholder}"\n autocomplete="off"\n spellcheck="false"\n ${e?"disabled":""}\n >\n ${this.clearable&&this.value?'<button class="clear-btn" aria-label="Clear date" tabindex="-1">\n <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>\n </button>':""}\n <y-icon name="calendar" size="small" class="cal-icon"></y-icon>\n </div>\n <div class="popup" hidden>\n <y-datepicker ${r}></y-datepicker>\n </div>\n ${n?"":t}\n </div>\n `,E(this.shadowRoot.querySelector(".label-wrapper")),e\|\|this._bindListeners()}_applyParsedDate(e){const n=e.toISOString();this.setAttribute("value",n),this._internals.setFormValue(n,this.name),this._syncPickerValue(),this._updateClearBtn();const t=this.shadowRoot.querySelector(".display");t&&(t.value=this._getFormattedDisplay()),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:n,startDate:e,endDate:null,formatted:this._getFormattedDisplay()}}))}_applyRangeValue(e,n){const t=e.toISOString(),r=n?n.toISOString():"",o=r?`${t},${r}`:t;this.setAttribute("value",o),this._internals.setFormValue(o,this.name),this._syncPickerValue(),this._updateClearBtn();const a=this.shadowRoot.querySelector(".display");a&&(a.value=this._getFormattedDisplay()),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:o,startDate:e,endDate:n,formatted:this._getFormattedDisplay()}}))}_bindListeners(){const e=this.shadowRoot.querySelector(".trigger"),n=this.shadowRoot.querySelector(".popup"),t=this.shadowRoot.querySelector("y-datepicker"),r=this.shadowRoot.querySelector(".clear-btn"),o=this.shadowRoot.querySelector(".display");e.addEventListener("click",e=>{r&&r.contains(e.target)\|\|(!o\|\|e.target!==o&&!o.contains(e.target)?(this._setOpen(n.hidden),n.hidden\|\|(o?.focus(),o?.select())):this._setOpen(!0))}),e.addEventListener("keydown",e=>{e.target!==o&&("Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),this._setOpen(n.hidden)),"Escape"===e.key&&this._setOpen(!1))}),r?.addEventListener("click",e=>{e.stopPropagation(),this.clear()}),o?.addEventListener("focus",()=>{this._setOpen(!0),o.select()}),o?.addEventListener("input",()=>{const e=o.value;if("range"===this.mode)return void this._handleRangeTypeahead(e,t);const n=this._parseTypedDate(e);if(n)return void(t.value=n.toISOString());const r=this._parsePartialInput(e);if(!r)return;const a=new Date,i=r.year??a.getFullYear(),s=void 0!==r.month?r.month-1:void 0;if(r.day&&void 0!==s){const e=new Date(i,s,r.day);if(e.getMonth()===s&&e.getDate()===r.day)return void(t.value=e.toISOString())}t.navigateTo(i,s)}),o?.addEventListener("keydown",e=>{if("Enter"===e.key){if(e.preventDefault(),e.stopPropagation(),"range"===this.mode){const e=this._parseRangeInput(o.value);return void(e&&(this._applyRangeValue(e.start,e.end),this._setOpen(!1)))}const n=this._parseTypedDate(o.value);if(n)return this._applyParsedDate(n),void this._setOpen(!1);const t=this._buildPresumedDate(this._parsePartialInput(o.value));t&&(this._applyParsedDate(t),this._setOpen(!1))}else"Escape"===e.key&&(e.stopPropagation(),o.value=this._getFormattedDisplay(),this._setOpen(!1))}),o?.addEventListener("blur",()=>{const e=o.value.trim();setTimeout(()=>{if(this._suppressBlurApply)return this._suppressBlurApply=!1,void(o.value=this._getFormattedDisplay());if(!e)return void(this.value&&this.clear());if("range"===this.mode){const n=this._parseRangeInput(e);return void(n?this._applyRangeValue(n.start,n.end):(o.value=this._getFormattedDisplay(),this._syncPickerValue()))}const n=this._parseTypedDate(e);n?this._applyParsedDate(n):(o.value=this._getFormattedDisplay(),this._syncPickerValue())},0)}),t.addEventListener("change",e=>{if(e.composedPath()[0]!==t)return;this._suppressBlurApply=!0;const{value:n,formatted:r}=e.detail;if(this.setAttribute("value",n),this._internals.setFormValue(n,this.name),o&&(o.value=r\|\|""),this._updateClearBtn(),"single"===this.mode&&n){const n=e.detail.source;n&&this._selectedParts.add(n);const r=["day"];t.showHours&&r.push("hour"),t.showMinutes&&r.push("minute"),t.showSeconds&&r.push("second"),r.every(e=>this._selectedParts.has(e))&&this._setOpen(!1)}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:e.detail}))})}_bindMobileListeners(){const e=this.shadowRoot,n=e.querySelector(".clear-btn");n?.addEventListener("click",e=>{e.stopPropagation(),this.clear()}),e.querySelectorAll(".native-date").forEach(n=>{n.addEventListener("change",()=>{if("range"===this.mode){const n=e.querySelector('[data-side="start"]'),t=e.querySelector('[data-side="end"]'),r=n?.value?new Date(n.value).toISOString():"",o=t?.value?new Date(t.value).toISOString():"",a=[r,o].filter(Boolean).join(",");this.setAttribute("value",a),this._internals.setFormValue(a,this.name),this._updateClearBtn(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:a,startDate:r?new Date(r):null,endDate:o?new Date(o):null,formatted:this._getFormattedDisplay()}}))}else{const e=n.value;if(!e)return void this.clear();const t=new Date(e);isNaN(t)\|\|this._applyParsedDate(t)}})})}_buildPresumedDate(e){if(!e)return null;const n=new Date,t=e.year??n.getFullYear(),r=void 0!==e.month?e.month-1:n.getMonth(),o=e.day??1,a=e.hour??0,i=e.minute??0,s=e.second??0,c=new Date(t,r,o,a,i,s);return isNaN(c)\|\|c.getMonth()!==r\|\|c.getDate()!==o?null:c}_buildStyles(e){const n=this.size,t={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"},r={small:"var(--component-inputs-padding-small)",medium:"var(--component-inputs-padding-medium)",large:"var(--component-inputs-padding-large)"};return`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--component-input-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .label-wrapper {\n display: none;\n }\n\n .trigger {\n display: flex;\n align-items: center;\n gap: var(--spacing-x-small);\n background: var(--component-input-background);\n border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: ${r[n]\|\|r.medium};\n min-height: ${t[n]\|\|t.medium};\n box-sizing: border-box;\n cursor: text;\n user-select: none;\n transition: border-color 0.2s ease-in-out;\n outline: none;\n }\n\n .trigger:hover {\n border-color: var(--component-input-color);\n }\n\n .trigger:focus-within {\n border-color: var(--component-input-accent);\n }\n\n .trigger.is-invalid {\n border-color: var(--component-input-error-border-color);\n background: var(--component-input-error-background);\n }\n\n .display {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: 1em;\n padding: 0;\n outline: none;\n cursor: text;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n .display::placeholder {\n color: var(--base-content-light);\n }\n\n .cal-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--component-input-icon-color);\n }\n\n .clear-btn {\n all: unset;\n display: flex;\n align-items: center;\n cursor: pointer;\n flex-shrink: 0;\n color: var(--component-input-icon-color);\n opacity: 0.7;\n border-radius: 50%;\n padding: 2px;\n }\n\n .clear-btn:hover {\n opacity: 1;\n background: var(--base-background-component);\n }\n\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-input-label-color);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-input-error-color);\n }\n\n ::slotted([slot="left-icon"]) {\n display: flex;\n align-items: center;\n color: var(--component-input-icon-color);\n }\n\n .popup {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: var(--component-date-z-index);\n border-radius: var(--component-datepicker-border-radius);\n box-shadow: var(--component-datepicker-shadow);\n }\n\n .native-date {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: 1em;\n padding: 0;\n outline: none;\n }\n\n .native-sep {\n flex-shrink: 0;\n padding: 0 var(--spacing-x-small, 6px);\n color: var(--base-content-light);\n }\n `}_getBreakpointPx(){const e=this.mobileBreakpoint;if(e){const n=parseInt(e,10);if(!isNaN(n)&&n>0)return n}const n=getComputedStyle(document.documentElement).getPropertyValue("--component-datepicker-mobile-breakpoint").trim();if(n){const e=parseInt(n,10);if(!isNaN(e)&&e>0)return e}return 768}_getFormattedDisplay(){const e=this.value;if(!e)return"";const n=this.format,t=e=>{const t=new Date(e);if(isNaN(t))return"";const r=e=>String(e).padStart(2,"0"),o=t.getHours(),a=o%12\|\|12;return n.replace("YYYY",t.getFullYear()).replace("MM",r(t.getMonth()+1)).replace("DD",r(t.getDate())).replace("HH",r(o)).replace("hh",r(a)).replace("mm",r(t.getMinutes())).replace("ss",r(t.getSeconds())).replace("A",o>=12?"PM":"AM").replace("a",o>=12?"pm":"am")};if("range"===this.mode){const[n,r]=e.split(","),o=n?t(n):"",a=r?t(r):"";return o&&a?`${o} - ${a}`:o}return t(e)}_handleRangeTypeahead(e,n){const t=this._parseRangeInput(e);if(t)if(t.start&&t.end)n.value=`${t.start.toISOString()},${t.end.toISOString()}`;else{if(e.indexOf(" - ")>=0){const r=e.slice(e.indexOf(" - ")+3).trim();if(r){const e=this._parsePartialInput(r);if(e){const r=new Date,o=e.year??r.getFullYear(),a=void 0!==e.month?e.month-1:void 0;if(e.day&&void 0!==a){const r=new Date(o,a,e.day);if(r.getMonth()===a&&r.getDate()===e.day)return void(n.value=`${t.start.toISOString()},${r.toISOString()}`)}n.navigateTo(o,a)}}return}t.start&&(n.value=t.start.toISOString())}}_onDocumentClick(e){this.contains(e.target)\|\|this.shadowRoot.contains(e.target)\|\|this._setOpen(!1)}_onMediaChange(e){this._isMobile=e.matches,this.render()}_positionPopup(e,n){const t=n.getBoundingClientRect(),r=e.offsetWidth,o=e.offsetHeight,a=window.innerWidth,i=window.innerHeight-t.bottom-4,s=t.top-4;i>=o\|\|i>=s?(e.style.top="calc(100% + 4px)",e.style.bottom="auto"):(e.style.top="auto",e.style.bottom="calc(100% + 4px)");a-t.left>=r?(e.style.left="0",e.style.right="auto"):(e.style.left="auto",e.style.right="0")}_parsePartialInput(e){if(!e)return null;const n=[{token:"YYYY",key:"year",re:"(\\d{1,4})"},{token:"MM",key:"month",re:"(\\d{1,2})"},{token:"DD",key:"day",re:"(\\d{1,2})"},{token:"HH",key:"hour",re:"(\\d{1,2})"},{token:"hh",key:"hour",re:"(\\d{1,2})"},{token:"mm",key:"minute",re:"(\\d{1,2})"},{token:"ss",key:"second",re:"(\\d{1,2})"},{token:"A",key:"ampm",re:"(AM\|PM)"},{token:"a",key:"ampm",re:"(am\|pm)"}],t=[];let r=this.format;for(;r.length>0;){let e=!1;for(const o of n)if(r.startsWith(o.token)){t.push({key:o.key,re:o.re,sep:""}),r=r.slice(o.token.length),e=!0;break}e\|\|(t.length>0&&(t[t.length-1].sep+=r[0]),r=r.slice(1))}if(0===t.length)return null;let o="";for(let e=t.length-1;e>=0;e--){const n=t[e];if(e===t.length-1)o=n.re;else{const e=n.sep.replace(/[-[\]/{}()+?.\\^$\|]/g,"\\$&");o=n.re+"(?:"+e+o+")?"}}const a=new RegExp("^"+o+"$","i").exec(e.trim());if(!a)return null;const i={};return t.forEach((e,n)=>{const t=a[n+1];void 0!==t&&("ampm"===e.key?i.ampm=t.toUpperCase():i[e.key]=parseInt(t,10))}),void 0!==i.hour&&i.ampm&&(i.hour=i.hour%12+("PM"===i.ampm?12:0)),void 0!==i.month&&(i.month<1\|\|i.month>12)\|\|void 0!==i.day&&(i.day<1\|\|i.day>31)\|\|void 0!==i.hour&&(i.hour<0\|\|i.hour>23)\|\|void 0!==i.minute&&(i.minute<0\|\|i.minute>59)\|\|void 0!==i.second&&(i.second<0\|\|i.second>59)?null:Object.keys(i).length>0?i:null}_parseRangeInput(e){if(!e)return null;const n=e.indexOf(" - ");let t,r;n>=0?(t=e.slice(0,n).trim(),r=e.slice(n+3).trim()):(t=e.trim(),r="");const o=e=>{if(!e)return null;const n=this._parseTypedDate(e);return n\|\|this._buildPresumedDate(this._parsePartialInput(e))},a=o(t);if(!a)return null;return{start:a,end:r?o(r):null}}_parseTypedDate(e){if(!e)return null;const n=[{token:"YYYY",key:"year",re:"(\\d{4})"},{token:"MM",key:"month",re:"(\\d{1,2})"},{token:"DD",key:"day",re:"(\\d{1,2})"},{token:"HH",key:"hour24",re:"(\\d{1,2})"},{token:"hh",key:"hour12",re:"(\\d{1,2})"},{token:"mm",key:"minute",re:"(\\d{1,2})"},{token:"ss",key:"second",re:"(\\d{1,2})"},{token:"A",key:"ampm",re:"(AM\|PM)"},{token:"a",key:"ampm",re:"(am\|pm)"}],t=[];let r=this.format;for(const e of n)r.includes(e.token)&&(r=r.replace(e.token,`\0${t.length}\0`),t.push(e));r=r.replace(/[-[\]/{}()+?.\\^$\|]/g,"\\$&"),t.forEach((e,n)=>{r=r.replace(`\0${n}\0`,e.re)});const o=new RegExp(`^${r}$`,"i").exec(e.trim());if(!o)return null;const a={};t.forEach((e,n)=>{a[e.key]=o[n+1]});const i=a.year?parseInt(a.year):(new Date).getFullYear(),s=a.month?parseInt(a.month)-1:0,c=a.day?parseInt(a.day):1;let l=0;void 0!==a.hour24?l=parseInt(a.hour24):void 0!==a.hour12&&(l=parseInt(a.hour12)%12,"PM"===(a.ampm\|\|"").toUpperCase()&&(l+=12));const d=a.minute?parseInt(a.minute):0,p=a.second?parseInt(a.second):0;if(s<0\|\|s>11)return null;if(c<1\|\|c>31)return null;if(l<0\|\|l>23)return null;if(d<0\|\|d>59)return null;if(p<0\|\|p>59)return null;const h=new Date(i,s,c,l,d,p);return h.getMonth()!==s\|\|h.getDate()!==c?null:h}_renderMobile(){const e=this.disabled,n="top"===this.labelPosition,t='<div class="label-wrapper"><slot name="label"></slot></div>',r=this.showHours\|\|this.showMinutes\|\|this.showSeconds,o=r?"datetime-local":"date",a="range"===this.mode,i=e=>{if(!e)return"";const n=new Date(e);if(isNaN(n))return"";const t=e=>String(e).padStart(2,"0"),o=`${n.getFullYear()}-${t(n.getMonth()+1)}-${t(n.getDate())}`;return r?`${o}T${t(n.getHours())}:${t(n.getMinutes())}`:o};let s="",c="";if(a&&this.value){const[e,n]=this.value.split(",");s=i(e),c=i(n)}else s=i(this.value);const l=this.min?` min="${i(this.min)}"`:"",d=this.max?` max="${i(this.max)}"`:"";this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e)}</style>\n <div class="wrapper">\n ${n?t:""}\n <div class="trigger${this.invalid?" is-invalid":""}">\n <slot name="left-icon"></slot>\n ${a?`\n <input class="native-date" type="${o}" data-side="start"\n value="${s}"${l}${d}\n ${e?"disabled":""}>\n <span class="native-sep">–</span>\n <input class="native-date" type="${o}" data-side="end"\n value="${c}"${l}${d}\n ${e?"disabled":""}>\n `:`\n <input class="native-date" type="${o}" data-side="start"\n value="${s}"${l}${d}\n ${e?"disabled":""}>\n `}\n ${this.clearable&&this.value?'<button class="clear-btn" aria-label="Clear date" tabindex="-1">\n <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>\n </button>':""}\n </div>\n ${n?"":t}\n </div>\n `,e\|\|this._bindMobileListeners()}_setOpen(e){const n=this.shadowRoot.querySelector(".popup"),t=this.shadowRoot.querySelector(".trigger");n&&t&&(n.hidden=!e,t.setAttribute("aria-expanded",String(e)),e&&(this._selectedParts.clear(),this._positionPopup(n,t)))}_setupMediaQuery(){this._teardownMediaQuery();const e=this._getBreakpointPx();this._mql=window.matchMedia(`(max-width: ${e}px)`),this._isMobile=this._mql.matches,this._mql.addEventListener("change",this._onMediaChange)}_syncPickerValue(){const e=this.shadowRoot.querySelector("y-datepicker");e&&(e.value=this.value)}_teardownMediaQuery(){this._mql&&(this._mql.removeEventListener("change",this._onMediaChange),this._mql=null)}_updateClearBtn(){if(!this.clearable)return;const e=this.shadowRoot.querySelector(".trigger");if(!e)return;const n=e.querySelector(".clear-btn"),t=e.querySelector(".cal-icon");if(this.value&&!n){const n=document.createElement("button");n.className="clear-btn",n.setAttribute("aria-label","Clear date"),n.setAttribute("tabindex","-1"),n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',n.addEventListener("click",e=>{e.stopPropagation(),this.clear()}),e.insertBefore(n,t)}else!this.value&&n&&n.remove()}_updateDisplay(){const e=this.shadowRoot.querySelector(".display");e&&(e.value=this._getFormattedDisplay(),this._updateClearBtn())}_updateValidationState(){const e=this.shadowRoot.querySelector(".trigger"),n=this.shadowRoot.querySelector(".label-wrapper");e?.classList.toggle("is-invalid",this.invalid),n?.classList.toggle("is-invalid",this.invalid)}}customElements.get("y-date")\|\|customElements.define("y-date",ne);class te extends HTMLElement{static get observedAttributes(){return["visible","anchor","closable","show-backdrop","animate","position"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onKeyDown=this._onKeyDown.bind(this),this._onAnchorClick=this._onAnchorClick.bind(this)}connectedCallback(){this.render(),this._setupAnchor(),this.visible&&this.show()}disconnectedCallback(){this._teardownAnchor()}attributeChangedCallback(e,n,t){n!==t&&("visible"===e&&(this.visible?this.show():this.hide()),"anchor"===e&&(this._teardownAnchor(),this._setupAnchor()),"closable"===e&&this.render())}get animate(){return this.hasAttribute("animate")}set animate(e){e?this.setAttribute("animate",""):this.removeAttribute("animate")}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get closable(){return this.hasAttribute("closable")}set closable(e){e?this.setAttribute("closable",""):this.removeAttribute("closable")}get position(){return this.getAttribute("position")\|\|"center"}set position(e){this.setAttribute("position",e)}get showBackdrop(){return this.hasAttribute("show-backdrop")}set showBackdrop(e){e?this.setAttribute("show-backdrop",""):this.removeAttribute("show-backdrop")}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}hide(){document.removeEventListener("keydown",this._onKeyDown)}render(){this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this._buildStyles()),this.shadowRoot.appendChild(this._buildDialog())}show(){this.shadowRoot.querySelector(".dialog")\|\|this.render(),document.addEventListener("keydown",this._onKeyDown),this._focusDialog()}_buildCloseButton(){const e=document.createElement("y-button");return e.setAttribute("size","small"),e.setAttribute("style-type","flat"),e.setAttribute("aria-label","Close"),e.textContent="✕",e.addEventListener("click",()=>{this.visible=!1}),e}_buildDialog(){const e=document.createElement("div");e.className="dialog",e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("tabindex","-1");const n=this._buildHeader(),t=this._buildSection("body","body"),r=this._buildSection("footer","footer");return e.append(n,t,r),this.closable\|\|this._hideIfEmpty(n),this._hideIfEmpty(t),this._hideIfEmpty(r),e}_buildHeader(){const e=document.createElement("div");e.className="header",e.setAttribute("part","header");const n=document.createElement("div");return n.className="header-content",n.innerHTML='<slot name="header"></slot>',e.appendChild(n),this.closable&&e.appendChild(this._buildCloseButton()),e}_buildSection(e,n){const t=document.createElement("div");return t.className=e,t.setAttribute("part",n),t.innerHTML=`<slot name="${e}"></slot>`,t}_buildStyles(){const e=document.createElement("style");return e.textContent='\n :host {\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n display: none;\n align-items: center;\n justify-content: center;\n z-index: var(--component-dialog-z-index, 1000);\n padding: var(--component-dialog-offset, 16px);\n box-sizing: border-box;\n }\n :host([visible]) {\n display: flex;\n pointer-events: none;\n }\n :host([visible]) .dialog {\n pointer-events: auto;\n }\n :host([visible][show-backdrop]) {\n pointer-events: auto;\n background: rgba(0,0,0,0.5);\n backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));\n -webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));\n }\n\n :host([position="top-left"]) { align-items: flex-start; justify-content: flex-start; }\n :host([position="top-center"]) { align-items: flex-start; justify-content: center; }\n :host([position="top-right"]) { align-items: flex-start; justify-content: flex-end; }\n :host([position="left"]) { align-items: center; justify-content: flex-start; }\n :host([position="right"]) { align-items: center; justify-content: flex-end; }\n :host([position="bottom-left"]) { align-items: flex-end; justify-content: flex-start; }\n :host([position="bottom-center"]) { align-items: flex-end; justify-content: center; }\n :host([position="bottom-right"]) { align-items: flex-end; justify-content: flex-end; }\n\n @keyframes dialog-fade-in {\n from { opacity: 0; transform: translateY(16px) scale(0.97); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .dialog {\n background: var(--component-dialog-background);\n border: var(--component-dialog-border-width, 1px) solid var(--component-dialog-border-color);\n border-radius: var(--component-dialog-border-radius-outer, 4px);\n max-width: 90%;\n max-height: 90%;\n display: flex;\n flex-direction: column;\n box-shadow: var(--component-dialog-shadow, 0 2px 10px rgba(0,0,0,0.3));\n }\n :host([animate][visible]) .dialog {\n animation: dialog-fade-in var(--component-dialog-animation-duration, 0.2s) ease-out both;\n }\n .header {\n padding: var(--component-dialog-padding, var(--spacing-medium));\n font-weight: bold;\n border-bottom: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-small, 8px);\n }\n .header-content {\n flex: 1;\n }\n .body {\n padding: var(--component-dialog-padding, var(--spacing-medium));\n overflow: auto;\n flex: 1;\n }\n .footer {\n padding: var(--component-dialog-padding, var(--spacing-medium));\n border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--component-dialog-footer-gap, var(--spacing-small, 8px));\n }\n\n ::slotted() {\n margin: 0;\n }\n ',e}_focusDialog(){this.shadowRoot.querySelector(".dialog")?.focus()}_hideIfEmpty(e){const n=e.querySelector("slot");if(!n)return;const t=()=>{e.style.display=n.assignedNodes({flatten:!0}).length>0?"":"none"};n.addEventListener("slotchange",t),t()}_onAnchorClick(){this.visible=!this.visible}_onKeyDown(e){"Escape"===e.key&&this.visible&&(this.visible=!1)}_setupAnchor(){const e=this.anchor;e&&(this._anchorResolveDispose=$(this,e,e=>{this._anchorEl=e,e.addEventListener("click",this._onAnchorClick)}))}_teardownAnchor(){this._anchorResolveDispose&&(this._anchorResolveDispose(),this._anchorResolveDispose=null),this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}}customElements.get("y-dialog")\|\|customElements.define("y-dialog",te);class re extends HTMLElement{static get observedAttributes(){return["visible","anchor","position","resizable"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onAnchorClick=this._onAnchorClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onResizePointerDown=this._onResizePointerDown.bind(this),this._onResizePointerMove=this._onResizePointerMove.bind(this),this._onResizePointerUp=this._onResizePointerUp.bind(this)}connectedCallback(){this.render(),this._setupAnchor(),this.visible&&this._show()}disconnectedCallback(){this._teardownAnchor(),document.removeEventListener("keydown",this._onKeyDown),this._cleanupResize()}attributeChangedCallback(e,n,t){n!==t&&("visible"===e&&(this.visible?this._show():this._hide()),"anchor"===e&&(this._teardownAnchor(),this._setupAnchor()),"position"===e&&this._applyPosition(),"resizable"===e&&this._applyResizable())}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get position(){return this.getAttribute("position")\|\|"left"}set position(e){this.setAttribute("position",e)}get resizable(){return this.hasAttribute("resizable")}set resizable(e){e?this.setAttribute("resizable",""):this.removeAttribute("resizable")}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}render(){this.shadowRoot.innerHTML="";const e=document.createElement("style");e.textContent=this._buildStyles(),this.shadowRoot.appendChild(e);const n=document.createElement("div");n.className="overlay",n.setAttribute("part","overlay"),n.addEventListener("click",()=>this._onOverlayClick()),this.shadowRoot.appendChild(n);const t=document.createElement("div");t.className="drawer-panel",t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),t.setAttribute("tabindex","-1"),t.setAttribute("part","panel"),t.setAttribute("data-position",this.position);const r=document.createElement("div");r.className="resize-handle",r.innerHTML=this._gripSVG(),r.style.display=this.resizable?"flex":"none",r.addEventListener("pointerdown",this._onResizePointerDown),t.appendChild(r);const o=document.createElement("div");o.className="drawer-content";const a=document.createElement("div");a.className="drawer-header",a.setAttribute("part","header"),a.innerHTML='<slot name="header"></slot>';const i=document.createElement("div");i.className="drawer-body",i.setAttribute("part","body"),i.innerHTML='<slot name="body"></slot>';const s=document.createElement("div");s.className="drawer-footer",s.setAttribute("part","footer"),s.innerHTML='<slot name="footer"></slot>',o.appendChild(a),o.appendChild(i),o.appendChild(s),t.appendChild(o),this.shadowRoot.appendChild(t),this.visible&&requestAnimationFrame(()=>{n.classList.add("open"),t.classList.add("open")})}_applyPosition(){const e=this.shadowRoot.querySelector(".drawer-panel");e&&e.setAttribute("data-position",this.position)}_applyResizable(){const e=this.shadowRoot.querySelector(".resize-handle");e&&(e.style.display=this.resizable?"flex":"none")}_buildStyles(){return'\n :host {\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n display: none;\n z-index: var(--component-drawer-z-index, 5000);\n }\n :host([visible]) {\n display: block;\n }\n\n .overlay {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(0, 0, 0, 0);\n transition: background var(--drawer-transition-duration, 0.3s) ease;\n }\n .overlay.open {\n background: rgba(0, 0, 0, 0.4);\n }\n\n .drawer-panel {\n position: absolute;\n background: var(--component-drawer-background, #0c0c0d);\n color: var(--component-drawer-color, #f7f7fa);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n outline: none;\n display: flex;\n flex-direction: column;\n border: none;\n border-radius: var(--component-drawer-border-radius, 0);\n transition: transform var(--drawer-transition-duration, 0.3s) ease;\n }\n\n .drawer-panel[data-position="left"],\n .drawer-panel[data-position="right"] {\n top: 0;\n bottom: 0;\n width: var(--drawer-width, 300px);\n flex-direction: row;\n }\n .drawer-panel[data-position="left"] {\n left: 0;\n transform: translateX(-100%);\n border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);\n }\n .drawer-panel[data-position="right"] {\n right: 0;\n transform: translateX(100%);\n border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);\n }\n\n .drawer-panel[data-position="top"],\n .drawer-panel[data-position="bottom"] {\n left: 0;\n right: 0;\n height: var(--drawer-height, 300px);\n }\n .drawer-panel[data-position="top"] {\n top: 0;\n transform: translateY(-100%);\n border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);\n }\n .drawer-panel[data-position="bottom"] {\n bottom: 0;\n transform: translateY(100%);\n border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);\n }\n\n .drawer-panel.open { transform: translate(0, 0); }\n\n .drawer-header {\n padding: var(--component-drawer-padding, 1rem);\n font-weight: bold;\n }\n .drawer-body {\n padding: var(--component-drawer-padding, 1rem);\n flex: 1;\n overflow: auto;\n }\n .drawer-footer {\n padding: var(--component-drawer-padding, 1rem);\n }\n\n /* Wrapper so header/body/footer stack vertically inside a row layout /\n .drawer-content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n }\n\n ::slotted() {\n margin: 0;\n }\n\n .resize-handle {\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--component-drawer-color, #f7f7fa);\n opacity: 0.6;\n touch-action: none;\n user-select: none;\n transition: opacity 0.15s, background 0.15s;\n }\n .resize-handle:hover,\n .resize-handle:active {\n opacity: 1;\n background: var(--component-drawer-hover-background, #292a2b);\n }\n\n .drawer-panel[data-position="left"] > .resize-handle,\n .drawer-panel[data-position="right"] > .resize-handle {\n width: var(--component-drawer-handle-width, 6px);\n padding: var(--component-drawer-handle-padding, 4px);\n cursor: ew-resize;\n }\n\n .drawer-panel[data-position="left"] > .resize-handle svg,\n .drawer-panel[data-position="right"] > .resize-handle svg {\n width: 16px;\n height: 24px;\n flex-shrink: 0;\n }\n .drawer-panel[data-position="left"] > .resize-handle {\n order: 99;\n }\n .drawer-panel[data-position="right"] > .resize-handle {\n order: -1;\n }\n\n .drawer-panel[data-position="top"] > .resize-handle,\n .drawer-panel[data-position="bottom"] > .resize-handle {\n height: var(--component-drawer-handle-width, 6px);\n padding: var(--component-drawer-handle-padding, 4px);\n cursor: ns-resize;\n }\n\n .drawer-panel[data-position="top"] > .resize-handle svg,\n .drawer-panel[data-position="bottom"] > .resize-handle svg {\n width: 24px;\n height: 16px;\n flex-shrink: 0;\n }\n .drawer-panel[data-position="top"] > .resize-handle {\n order: 99;\n }\n .drawer-panel[data-position="bottom"] > .resize-handle {\n order: -1;\n }\n '}_cleanupResize(){document.removeEventListener("pointermove",this._onResizePointerMove),document.removeEventListener("pointerup",this._onResizePointerUp)}_getTransitionDuration(e){if(!e)return 0;const n=getComputedStyle(e).transitionDuration\|\|"0s",t=parseFloat(n);return isNaN(t)?0:1e3t}_gripSVG(){return this._isHorizontal()?p:d}_hide(){const e=this.shadowRoot.querySelector(".overlay"),n=this.shadowRoot.querySelector(".drawer-panel");e&&e.classList.remove("open"),n&&n.classList.remove("open"),document.removeEventListener("keydown",this._onKeyDown);const t=this._getTransitionDuration(n);t>0?(clearTimeout(this._hideTimer),this._hideTimer=setTimeout(()=>{this.visible\|\|(this.style.display="none")},t)):this.style.display="none"}_isHorizontal(){return"left"===this.position\|\|"right"===this.position}_onAnchorClick(){this.visible=!this.visible}_onKeyDown(e){"Escape"===e.key&&this.visible&&(this.visible=!1)}_onOverlayClick(){this.visible=!1}_onResizePointerDown(e){e.preventDefault(),this._resizing=!0,this._startPointer=this._isHorizontal()?e.clientX:e.clientY;const n=this.shadowRoot.querySelector(".drawer-panel");this._startSize=this._isHorizontal()?n.offsetWidth:n.offsetHeight,n.style.transition="none",document.addEventListener("pointermove",this._onResizePointerMove),document.addEventListener("pointerup",this._onResizePointerUp)}_onResizePointerMove(e){if(!this._resizing)return;const n=this.shadowRoot.querySelector(".drawer-panel"),t=(this._isHorizontal()?e.clientX:e.clientY)-this._startPointer;let r;r="left"===this.position?this._startSize+t:"right"===this.position?this._startSize-t:"top"===this.position?this._startSize+t:this._startSize-t;r=Math.max(100,r),this._isHorizontal()?n.style.width=`${r}px`:n.style.height=`${r}px`}_onResizePointerUp(){this._resizing=!1;const e=this.shadowRoot.querySelector(".drawer-panel");e&&(e.style.transition=""),document.removeEventListener("pointermove",this._onResizePointerMove),document.removeEventListener("pointerup",this._onResizePointerUp)}_setupAnchor(){const e=this.anchor;e&&(this._anchorResolveDispose=$(this,e,e=>{this._anchorEl=e,e.addEventListener("click",this._onAnchorClick)}))}_show(){this.style.display="block",this.offsetHeight;const e=this.shadowRoot.querySelector(".overlay"),n=this.shadowRoot.querySelector(".drawer-panel");e&&e.classList.add("open"),n&&(n.classList.add("open"),n.focus()),document.addEventListener("keydown",this._onKeyDown)}_teardownAnchor(){this._anchorResolveDispose&&(this._anchorResolveDispose(),this._anchorResolveDispose=null),this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}}customElements.get("y-drawer")\|\|customElements.define("y-drawer",re);class oe extends HTMLElement{static get observedAttributes(){return["items","position","breakpoint","size","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._mediaQuery=null,this._onMediaChange=this._onMediaChange.bind(this)}connectedCallback(){this.hasAttribute("position")\|\|this.setAttribute("position","bottom"),this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("role")\|\|this.setAttribute("role","navigation"),this.hasAttribute("aria-label")\|\|this.setAttribute("aria-label","Dock navigation"),this.render(),this._teardownBreakpoint(),this._setupBreakpoint()}disconnectedCallback(){this._teardownBreakpoint()}attributeChangedCallback(e,n,t){n!==t&&("breakpoint"===e&&(this._teardownBreakpoint(),this._setupBreakpoint()),this.render())}get breakpoint(){const e=this.getAttribute("breakpoint"),n=Number(e);return Number.isFinite(n)&&n>0?n:null}set breakpoint(e){null==e?this.removeAttribute("breakpoint"):this.setAttribute("breakpoint",String(e))}get history(){return this.getAttribute("history")}set history(e){null==e?this.removeAttribute("history"):this.setAttribute("history",e)}get items(){try{return JSON.parse(this.getAttribute("items")\|\|"[]")}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get position(){return"top"===this.getAttribute("position")?"top":"bottom"}set position(e){this.setAttribute("position","top"===e?"top":"bottom")}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",["small","medium","large"].includes(e)?e:"medium")}render(){this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this._buildStyles()),this.shadowRoot.appendChild(this._buildBar())}_buildBar(){const e=z("div",{class:"bar",part:"bar"});return this.items.forEach(n=>e.appendChild(this._buildItem(n))),e.appendChild(z("slot",{})),this._setupItemKeyboard(e),e}_buildItem(e){if(e.slot&&this.querySelector(`[slot="${e.slot}"]`)){const n=z("div",{class:"item",part:"item",tabindex:"0",role:"group"});return n.appendChild(z("slot",{name:e.slot})),n}const n=z("button",{class:"item",part:"item","aria-label":e.name});e.selected&&n.setAttribute("aria-current","page"),e.href&&(n.dataset.href=e.href);const t={small:"medium",medium:"large",large:"x-large"}[this.size],r=z("y-icon",{name:e.icon,size:t});n.appendChild(r);const o=z("span",{class:"item-label"},[e.name]);return n.appendChild(o),n.addEventListener("click",()=>this._handleItemClick(e)),n}_buildStyles(){const e=document.createElement("style"),n=this.position,t=this.size,r=`var(--component-dock-height, var(--component-dock-height-${t}))`,o="small"===t?"10px":"large"===t?"13px":"11px";return e.textContent=`\n :host {\n display: block;\n position: fixed;\n ${"top"===n?"top: 0;":"bottom: 0;"}\n left: 0;\n right: 0;\n z-index: var(--component-dock-z-index, 8000);\n ${"bottom"===n?"padding-bottom: env(safe-area-inset-bottom, 0px);":"padding-top: env(safe-area-inset-top, 0px);"}\n background: var(--component-dock-background);\n ${"bottom"===n?"border-top: var(--component-dock-border-width, 1px) solid var(--component-dock-border-color);":"border-bottom: var(--component-dock-border-width, 1px) solid var(--component-dock-border-color);"}\n }\n :host([hidden]) {\n display: none !important;\n }\n .bar {\n display: flex;\n align-items: center;\n justify-content: space-around;\n height: ${r};\n position: relative;\n }\n .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--component-dock-color);\n font-family: inherit;\n font-size: ${o};\n min-width: 48px;\n outline: none;\n transition: color 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n }\n .item:focus-visible {\n outline: 2px solid var(--component-dock-color-active);\n outline-offset: -2px;\n border-radius: 4px;\n }\n .item[aria-current="page"],\n .item:hover {\n color: var(--component-dock-color-active);\n }\n .item-label {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 64px;\n }\n ::slotted() {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n color: var(--component-dock-color);\n min-width: 48px;\n }\n `,e}_handleItemClick(e){if(!e.href)return;const n=new CustomEvent("navigate",{detail:{href:e.href},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(n)&&("false"===this.history?window.location.href=e.href:(window.history.pushState({},"",e.href),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))))}_onMediaChange(e){this.hidden=!e.matches}_setupBreakpoint(){const e=this.breakpoint;null!=e?(this._mediaQuery=window.matchMedia(`(max-width: ${e}px)`),this._mediaQuery.addEventListener("change",this._onMediaChange),this.hidden=!this._mediaQuery.matches):this.hidden=!1}_setupItemKeyboard(e){const n=e.querySelector("slot:not([name])");e.addEventListener("keydown",t=>{const r=[...Array.from(e.querySelectorAll(".item")),...n?Array.from(n.assignedElements({flatten:!0})):[]],o=t.composedPath(),a=r.findIndex(e=>e===t.target\|\|o.includes(e));-1!==a&&("ArrowRight"===t.key?(t.preventDefault(),r[(a+1)%r.length].focus()):"ArrowLeft"===t.key?(t.preventDefault(),r[(a-1+r.length)%r.length].focus()):"Enter"!==t.key&&" "!==t.key\|\|(t.preventDefault(),r[a].click()))})}_teardownBreakpoint(){this._mediaQuery&&(this._mediaQuery.removeEventListener("change",this._onMediaChange),this._mediaQuery=null)}}customElements.get("y-dock")\|\|customElements.define("y-dock",oe);class ae extends HTMLElement{static get observedAttributes(){return["layout","columns","gap","aspect-ratio","expandable","loop","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._expandedIndex=-1,this._items=[],this._onKeyDown=this._onKeyDown.bind(this),this._previouslyFocused=null}connectedCallback(){this.render(),this._bindSlotListener()}disconnectedCallback(){document.removeEventListener("keydown",this._onKeyDown)}attributeChangedCallback(e,n,t){if(n===t)return;const r=this._expandedIndex>=0;this.render(),this._bindSlotListener(),r&&this._showExpandedView()}get layout(){return this.getAttribute("layout")\|\|"grid"}set layout(e){this.setAttribute("layout",e)}get columns(){return parseInt(this.getAttribute("columns"),10)\|\|3}set columns(e){this.setAttribute("columns",String(e))}get gap(){return this.getAttribute("gap")\|\|"medium"}set gap(e){this.setAttribute("gap",e)}get aspectRatio(){return this.getAttribute("aspect-ratio")\|\|"1/1"}set aspectRatio(e){this.setAttribute("aspect-ratio",e)}get expandable(){return!this.hasAttribute("expandable")\|\|"false"!==this.getAttribute("expandable")}set expandable(e){e?this.removeAttribute("expandable"):this.setAttribute("expandable","false")}get loop(){return this.hasAttribute("loop")}set loop(e){e?this.setAttribute("loop",""):this.removeAttribute("loop")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}close(){if(this._expandedIndex<0)return;const e=this._expandedIndex;this._expandedIndex=-1,this._removeExpandedView(),document.removeEventListener("keydown",this._onKeyDown),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{index:e}})),this._previouslyFocused&&(this._previouslyFocused.focus(),this._previouslyFocused=null)}next(){if(this._expandedIndex<0)return;const e=this._expandedIndex;let n=e+1;if(n>=this._items.length){if(!this.loop)return;n=0}this._expandedIndex=n,this._updateExpandedView(),this.dispatchEvent(new CustomEvent("navigate",{bubbles:!0,composed:!0,detail:{index:n,previousIndex:e,direction:"next"}}))}open(e){if(!this.expandable)return;if(e<0\|\|e>=this._items.length)return;const n=this._items[e],t=new CustomEvent("expand",{bubbles:!0,composed:!0,cancelable:!0,detail:{index:e,src:n.fullSrc,element:n.element}});if(!this.dispatchEvent(t))return;const r=this.shadowRoot.querySelector(`.item[data-index="${e}"]`);this._previouslyFocused=r?.querySelector(".item-btn")\|\|r,this._expandedIndex=e,this._showExpandedView(),document.addEventListener("keydown",this._onKeyDown)}previous(){if(this._expandedIndex<0)return;const e=this._expandedIndex;let n=e-1;if(n<0){if(!this.loop)return;n=this._items.length-1}this._expandedIndex=n,this._updateExpandedView(),this.dispatchEvent(new CustomEvent("navigate",{bubbles:!0,composed:!0,detail:{index:n,previousIndex:e,direction:"prev"}}))}render(){this.shadowRoot.innerHTML=`\n <style>${this._buildStyles()}</style>\n <div class="slot-hidden"><slot></slot></div>\n <div class="gallery" part="gallery" role="list"></div>\n `,this._indexItems()}_bindExpandedListeners(){const e=this.shadowRoot.querySelector(".expand-overlay");if(!e)return;e.querySelector(".expand-close").addEventListener("click",()=>this.close());const n=e.querySelector(".expand-prev"),t=e.querySelector(".expand-next");n.addEventListener("click",()=>this.previous()),t.addEventListener("click",()=>this.next()),e.addEventListener("click",n=>{n.target===e&&this.close()})}_bindSlotListener(){const e=this.shadowRoot.querySelector("slot");e&&e.addEventListener("slotchange",()=>this._indexItems())}_buildBaseStyles(){return"\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .slot-hidden {\n display: none !important;\n }\n\n .gallery {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .item {\n position: relative;\n overflow: hidden;\n border-radius: var(--component-gallery-thumbnail-radius, var(--radii-small, 4px));\n }\n\n .item img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n "}_buildExpandStyles(){const e={small:"32px",medium:"44px",large:"56px"},n=e[this.size]\|\|e.medium;return`\n .expand-overlay {\n position: fixed;\n inset: 0;\n z-index: var(--component-gallery-expand-z-index, 1000);\n background: var(--component-gallery-expand-background, rgba(0,0,0,0.9));\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--component-gallery-expand-color, #fff);\n }\n\n .expand-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 90vw;\n max-height: 90vh;\n }\n\n .expand-img {\n max-width: 85vw;\n max-height: 80vh;\n object-fit: contain;\n }\n\n .expand-caption {\n margin-top: var(--spacing-medium, 8px);\n font-size: 0.95em;\n text-align: center;\n max-width: 600px;\n }\n\n .expand-counter {\n margin-top: var(--spacing-small, 4px);\n font-size: 0.8em;\n opacity: 0.7;\n }\n\n .expand-prev,\n .expand-next,\n .expand-close {\n position: absolute;\n background: var(--component-gallery-expand-button-background, rgba(255,255,255,0.15));\n color: var(--component-gallery-expand-color, #fff);\n border: none;\n border-radius: var(--radii-full, 50%);\n width: ${n};\n height: ${n};\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0;\n transition: background 0.2s ease;\n }\n\n .expand-prev:hover,\n .expand-next:hover,\n .expand-close:hover {\n background: var(--component-gallery-expand-button-background-hover, rgba(255,255,255,0.3));\n }\n\n .expand-prev:focus-visible,\n .expand-next:focus-visible,\n .expand-close:focus-visible {\n outline: 2px solid var(--component-gallery-expand-color, #fff);\n outline-offset: 2px;\n }\n\n .expand-prev:disabled,\n .expand-next:disabled {\n opacity: 0.3;\n cursor: default;\n pointer-events: none;\n }\n\n .expand-prev {\n left: var(--spacing-large, 16px);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .expand-next {\n right: var(--spacing-large, 16px);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .expand-close {\n top: var(--spacing-large, 16px);\n right: var(--spacing-large, 16px);\n }\n `}_buildExpandedDOM(){const e=this._items[this._expandedIndex],n=e.caption\|\|e.alt\|\|"",t=`${this._expandedIndex+1} / ${this._items.length}`,r=!this.loop&&0===this._expandedIndex,o=!this.loop&&this._expandedIndex===this._items.length-1,a=this._createNavButton("expand-close","Close image viewer","close","expand-close-icon"),i=this._createNavButton("expand-prev","Previous image","chevron-left","expand-prev-icon",r),s=this._createNavButton("expand-next","Next image","chevron-right","expand-next-icon",o);return z("div",{class:"expand-overlay",part:"expand-overlay",role:"dialog","aria-modal":"true","aria-label":"Image viewer"},[a,i,this._createExpandContent(e,n,t),s])}_buildInteractiveStyles(){return'\n .item-btn {\n display: block;\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n border-radius: inherit;\n }\n\n .item-btn img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .item-btn::after {\n content: "";\n position: absolute;\n inset: 0;\n background: var(--component-gallery-thumbnail-overlay-color, var(--neutral-black-translucent, rgba(0,0,0,0.12)));\n opacity: 0;\n transition: opacity 0.2s ease;\n pointer-events: none;\n border-radius: inherit;\n }\n\n .item-btn:hover::after,\n .item-btn:focus-visible::after {\n opacity: 1;\n }\n\n .item-btn:focus-visible {\n outline: 2px solid var(--primary-content--);\n outline-offset: 2px;\n }\n '}_buildLayoutStyles(){const e=this._resolveGap(),n=this.columns,t=this.aspectRatio,r=Math.min(2,n),o=this._getThumbnailMinWidth(),a=`\n @media (max-width: 768px) {\n .gallery { ${"grid"===this.layout?`grid-template-columns: repeat(${r}, 1fr)`:`columns: ${r}`}; }\n }\n @media (max-width: 480px) {\n .gallery { ${"grid"===this.layout?"grid-template-columns: 1fr":"columns: 1"}; }\n }\n `;switch(this.layout){case"grid":return`\n .gallery {\n display: grid;\n grid-template-columns: repeat(var(--component-gallery-columns, ${n}), 1fr);\n gap: ${e};\n }\n .item img {\n aspect-ratio: var(--component-gallery-aspect-ratio, ${t});\n }\n ${a}\n `;case"masonry":return`\n .gallery {\n columns: var(--component-gallery-columns, ${n});\n column-gap: ${e};\n }\n .item {\n break-inside: avoid;\n margin-bottom: ${e};\n }\n ${a}\n `;case"row":return`\n .gallery {\n display: flex;\n flex-direction: row;\n gap: ${e};\n overflow-x: auto;\n overflow-y: hidden;\n }\n .item {\n flex: 0 0 auto;\n min-width: ${o};\n }\n .item img {\n aspect-ratio: var(--component-gallery-aspect-ratio, ${t});\n }\n `;case"column":return`\n .gallery {\n display: flex;\n flex-direction: column;\n gap: ${e};\n }\n `;default:return""}}_buildStyles(){return[this._buildBaseStyles(),this._buildLayoutStyles(),this.expandable?this._buildInteractiveStyles():"",this._buildExpandStyles()].join("\n")}_createExpandContent(e,n,t){const r=[z("img",{class:"expand-img",part:"expand-img",src:e.fullSrc,alt:e.alt\|\|"","aria-current":"true"})];return n&&r.push(z("div",{class:"expand-caption",part:"expand-caption"},[n])),r.push(z("div",{class:"expand-counter",part:"expand-counter"},[t])),z("div",{class:"expand-content"},r)}_createItemWrapper(e,n){const t={class:"item",part:"item",role:"listitem","data-index":String(n)},r=z("img",{src:e.src,alt:e.alt,part:"item-img",draggable:"false"});if(this.expandable){const o=z("button",{class:"item-btn","aria-label":`View image: ${e.alt\|\|`Image ${n+1}`}`},[r]);return o.addEventListener("click",()=>this.open(n)),z("div",t,[o])}return z("div",t,[r])}_createNavButton(e,n,t,r,o){const a=z("y-icon",{name:t,size:this._getExpandIconSize()}),i=z("slot",{name:r},[a]),s={class:e,part:e,"aria-label":n};return o&&(s.disabled=!0),z("button",s,[i])}_getExpandIconSize(){return{small:"medium",medium:"large",large:"x-large"}[this.size]\|\|"large"}_getThumbnailMinWidth(){const e={small:"80px",medium:"120px",large:"180px"};return e[this.size]\|\|e.medium}_getImageData(e){let n,t;if("FIGURE"===e.tagName){n=e.querySelector("img");const r=e.querySelector("figcaption");t=r?r.textContent:""}else{if("IMG"!==e.tagName)return null;n=e,t=""}return n?{element:e,src:n.getAttribute("src")\|\|"",fullSrc:n.getAttribute("data-src")\|\|n.getAttribute("src")\|\|"",alt:n.getAttribute("alt")\|\|"",caption:t}:null}_indexItems(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const n=this.shadowRoot.querySelector(".gallery");n.querySelectorAll(".item").forEach(e=>e.remove());const t=e.assignedElements({flatten:!0});this._items=[],t.forEach(e=>{const t=this._getImageData(e);t&&(this._items.push(t),n.appendChild(this._createItemWrapper(t,this._items.length-1)))})}_onKeyDown(e){if(this._expandedIndex<0)return;const n={Escape:()=>this.close(),ArrowLeft:()=>this.previous(),ArrowRight:()=>this.next()}[e.key];if(n)return e.preventDefault(),void n();"Tab"===e.key&&this._trapFocus(e)}_removeExpandedView(){const e=this.shadowRoot.querySelector(".expand-overlay");e&&e.remove()}_resolveGap(){const e=this.gap,n={small:"var(--component-gallery-gap-small, 4px)",medium:"var(--component-gallery-gap-medium, 8px)",large:"var(--component-gallery-gap-large, 16px)"};return n[e]?n[e]:"undefined"!=typeof CSS&&CSS.supports&&CSS.supports("gap",e)?e:n.medium}_showExpandedView(){this._removeExpandedView(),this.shadowRoot.appendChild(this._buildExpandedDOM()),this._bindExpandedListeners();const e=this.shadowRoot.querySelector(".expand-close");e&&e.focus()}_trapFocus(e){const n=this.shadowRoot.querySelector(".expand-overlay");if(!n)return;const t=n.querySelectorAll("button:not(:disabled)");if(0===t.length)return;const r=t[0],o=t[t.length-1],a=this.shadowRoot.activeElement\|\|document.activeElement;e.shiftKey&&a===r?(e.preventDefault(),o.focus()):e.shiftKey\|\|a!==o\|\|(e.preventDefault(),r.focus())}_updateExpandedView(){this._removeExpandedView(),this.shadowRoot.appendChild(this._buildExpandedDOM()),this._bindExpandedListeners();const e=this.shadowRoot.querySelector(".expand-prev"),n=this.shadowRoot.querySelector(".expand-next");e&&!e.disabled?e.focus():n&&!n.disabled&&n.focus()}}customElements.get("y-gallery")\|\|customElements.define("y-gallery",ae);class ie extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["size","rows","value","label-position","disabled","invalid","name"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this._internals.setFormValue(this.value)}attributeChangedCallback(e,n,t){if(n!==t)return"value"===e?(this.textarea&&(this.textarea.value=t),void(this._internals&&this._internals.setFormValue(t,this.getAttribute("name")))):void("name"!==e?"invalid"!==e?this.render():this._updateValidationState():this._internals.setFormValue(this.value,t))}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get rows(){return parseInt(this.getAttribute("rows")\|\|"3",10)}set rows(e){this.setAttribute("rows",String(e))}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return this.textarea?.value\|\|""}set value(e){this.textarea&&(this.textarea.value=e),this.setAttribute("value",e),this._internals.setFormValue(e,this.getAttribute("name"))}checkValidity(){return this.textarea?.checkValidity?.()??!0}render(){const e=this.getAttribute("size")\|\|"medium",n=this.getAttribute("rows")\|\|"3",t=this.getAttribute("value")\|\|"",r=this.getAttribute("label-position")\|\|"top",o=this.hasAttribute("disabled"),a="top"===r,i=this._getPaddingVar(e);this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet(o,i)],this.shadowRoot.innerHTML=this._buildHTML(n,a,o),this.textarea=this.shadowRoot.querySelector("textarea"),this.inputContainer=this.shadowRoot.querySelector(".input-container"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),E(this.labelWrapper),this.textarea.value=t,o\|\|(this._bindTextareaListeners(),this._updateValidationState())}_bindTextareaListeners(){this.textarea.addEventListener("input",e=>{this.setAttribute("value",e.target.value),this._internals.setFormValue(e.target.value,this.getAttribute("name")),this.dispatchEvent(new CustomEvent("input",{detail:{value:e.target.value},bubbles:!0,composed:!0})),this._updateValidationState()})}_buildHTML(e,n,t){const r='<div class="label-wrapper"><slot name="label"></slot></div>';return`\n <div class="input-wrapper">\n ${n?r:""}\n <div class="input-container">\n <textarea part="textarea" rows="${e}" ${t?"disabled":""}></textarea>\n </div>\n ${n?"":r}\n </div>\n `}_buildStyleSheet(e,n){const t=new CSSStyleSheet;return t.replaceSync(`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--component-input-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .input-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .label-wrapper {\n display: none;\n }\n\n .input-container {\n display: flex;\n align-items: flex-start;\n background: ${e?"var(--component-input-background-disabled)":"var(--component-input-background)"};\n border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: var(${n});\n box-sizing: border-box;\n transition: border-color 0.2s ease-in-out;\n }\n\n .input-container.is-invalid {\n border-color: var(--component-input-error-border-color);\n background: var(--component-input-error-background);\n }\n\n .input-container.is-invalid textarea {\n color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:hover {\n border-color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:focus-within {\n border-color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:focus-within textarea {\n color: var(--component-input-color);\n }\n\n textarea {\n all: unset;\n flex: 1;\n width: 100%;\n font-family: inherit;\n font-size: 1em;\n color: inherit;\n line-height: 1.5;\n resize: vertical;\n overflow-y: auto;\n box-sizing: border-box;\n }\n\n .input-container:hover {\n border-color: var(--component-input-color);\n transition: border-color 0.2s ease-in-out;\n }\n\n .input-container:focus-within {\n border-color: var(--component-input-accent);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-input-error-color);\n }\n\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-input-label-color);\n }\n `),t}_getPaddingVar(e){const n={small:"--component-inputs-padding-small",medium:"--component-inputs-padding-medium",large:"--component-inputs-padding-large"};return n[e]\|\|n.medium}_updateValidationState(){const e=this.hasAttribute("invalid")\|\|this.textarea&&!this.checkValidity();this.inputContainer?.classList.toggle("is-invalid",e),this.labelWrapper?.classList.toggle("is-invalid",e)}}customElements.get("y-textarea")\|\|customElements.define("y-textarea",ie);class se extends HTMLElement{static get observedAttributes(){return["selected","expanded","href","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._expanded=!1,this._checkRouteMatchBound=this._checkRouteMatch.bind(this),this.render()}connectedCallback(){this._addHeaderListeners(),this._checkForChildren(),this._updateChildState(),this._updateSelectedState(),this._updateExpandedState(),this.hasAttribute("href")&&(this._checkRouteMatch(),window.addEventListener("popstate",this._checkRouteMatchBound))}disconnectedCallback(){this.hasAttribute("href")&&window.removeEventListener("popstate",this._checkRouteMatchBound)}attributeChangedCallback(e,n,t){n!==t&&("selected"===e&&this._updateSelectedState(),"expanded"===e&&this._updateExpandedState(),"href"===e&&this._checkRouteMatch())}get expanded(){return this.hasAttribute("expanded")}set expanded(e){e?this.setAttribute("expanded",""):this.removeAttribute("expanded")}get selected(){return this.hasAttribute("selected")}set selected(e){e?this.setAttribute("selected",""):this.removeAttribute("selected")}collapse(){this.expanded=!1,this._expanded=!1,this._updateExpandedState(),this.dispatchEvent(new CustomEvent("collapse",{detail:{expanded:!1},bubbles:!0,composed:!0}))}expand(){this._hasChildren()&&(this.expanded=!0,this._expanded=!0,this._updateExpandedState(),this.dispatchEvent(new CustomEvent("expand",{detail:{expanded:!0},bubbles:!0,composed:!0})))}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML=`\n <div class="header" part="header" role="button" tabindex="0">\n <slot name="icon"></slot>\n <slot name="label"><slot></slot></slot>\n <button class="arrow" id="arrow" part="arrow" tabindex="0" aria-expanded="false" aria-label="Toggle children">\n ${s}\n </button>\n </div>\n <div class="children" id="childrenContainer" part="children">\n <slot name="children"></slot>\n </div>\n `}toggle(){this._hasChildren()&&(this._expanded?this.collapse():(this._collapseExclusiveSiblings(),this.expand()),this.dispatchEvent(new CustomEvent("toggle",{detail:{expanded:this._expanded},bubbles:!0,composed:!0})))}_addArrowListeners(){const e=this.shadowRoot.querySelector(".arrow");e&&(e.addEventListener("click",e=>{e.stopPropagation(),this.toggle()}),e.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key\|\|(e.preventDefault(),this.toggle())}))}_addChildrenSlotListener(){const e=this.shadowRoot.querySelector('slot[name="children"]');e&&e.addEventListener("slotchange",()=>this._checkForChildren())}_addHeaderListeners(){const e=this.shadowRoot.querySelector(".header");e&&(e.addEventListener("click",e=>this._handleHeaderClick(e)),e.addEventListener("keydown",n=>{" "!==n.key&&"Enter"!==n.key\|\|(n.preventDefault(),e.click())}),this._addArrowListeners(),this._addChildrenSlotListener())}_buildStyleSheet(){const e=new CSSStyleSheet;return e.replaceSync('\n :host {\n display: block;\n box-sizing: border-box;\n background: var(--component-panel-background);\n color: var(--component-panel-color);\n font-family: var(--font-family-body);\n overflow: hidden;\n }\n\n :host([expanded]) {\n background: var(--component-panel-expanded-background);\n }\n\n :host([selected]) {\n color: var(--component-panel-accent);\n }\n\n :host([data-is-child="true"]) {\n box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-active-border);\n }\n\n :host([data-is-child="true"][selected]) {\n box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-accent);\n }\n\n :host([selected]) .header:hover {\n background: var(--component-panel-accent-hover-background);\n }\n\n :host([data-is-child="true"]) .header {\n padding-left: calc(var(--component-panelbar-padding, 4px) + (var(--panel-depth, 1) * var(--component-panelbar-indent, 16px)));\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--spacing-medium, 8px);\n padding: var(--component-panelbar-padding, 4px);\n cursor: pointer;\n transition: background 0.2s ease;\n user-select: none;\n }\n\n .header:hover {\n background: var(--component-panel-hover-background);\n }\n\n .header ::slotted([slot="icon"]) {\n margin-right: 6px;\n }\n\n .header ::slotted([slot="label"]) {\n flex-grow: 1;\n cursor: inherit;\n font-size: 1rem;\n line-height: 1.2;\n }\n\n .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n flex-shrink: 0;\n }\n\n .arrow:focus-visible {\n outline: 2px solid var(--component-panel-accent, currentColor);\n border-radius: 2px;\n }\n\n .arrow svg {\n width: 20px;\n height: 20px;\n }\n\n :host([expanded]) .arrow {\n transform: rotate(180deg);\n }\n\n .children {\n display: none;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n }\n\n .children ::slotted(y-panel) {\n width: 100%;\n box-sizing: border-box;\n }\n\n :host([expanded]) .children {\n display: block;\n }\n\n :host([data-has-children="false"]) .arrow {\n visibility: hidden;\n }\n '),e}_calcNestingDepth(){let e=0,n=this.parentElement;for(;n;){const t=n.closest("y-panel");if(!t\|\|t===this)break;e++,n=t.parentElement}return e}_checkForChildren(){const e=this._hasChildren();this.setAttribute("data-has-children",e?"true":"false"),!e&&this.expanded&&(this.expanded=!1)}_checkRouteMatch(){const e=this.getAttribute("href");this.selected=!(!e\|\|window.location.pathname!==e)}_collapseExclusiveSiblings(){const e=this.closest("y-panelbar");if(!e?.hasAttribute("exclusive"))return;(this.parentElement?Array.from(this.parentElement.children).filter(e=>"Y-PANEL"===e.tagName):[]).forEach(e=>{e!==this&&e.expanded&&e.collapse()})}_handleHeaderClick(e){e.stopPropagation(),this.hasAttribute("href")?this._navigateToHref():this.dispatchEvent(new CustomEvent("select",{detail:{selected:!0},bubbles:!0,composed:!0}))}_hasChildren(){const e=this.shadowRoot.querySelector('slot[name="children"]');return!!e&&e.assignedNodes({flatten:!0}).some(e=>e.nodeType!==Node.TEXT_NODE\|\|""!==e.textContent.trim())}_navigateToHref(){const e=this.getAttribute("href"),n=new CustomEvent("navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:{href:e}});!this.dispatchEvent(n)\|\|("false"!==this.getAttribute("history")?(history.pushState({},"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))):window.location.href=e)}_updateChildState(){const e=this._calcNestingDepth();this.setAttribute("data-is-child",e>0?"true":"false"),this.style.setProperty("--panel-depth",e)}_updateExpandedState(){const e=this._hasChildren(),n=this.expanded&&e;this._expanded=n;const t=this.shadowRoot.querySelector(".arrow");t&&t.setAttribute("aria-expanded",String(n))}_updateSelectedState(){this.classList.toggle("selected",this.selected)}}customElements.get("y-panel")\|\|customElements.define("y-panel",se);class ce extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.render()}render(){const e=new CSSStyleSheet;e.replaceSync("\n :host {\n display: block;\n }\n "),this.shadowRoot.adoptedStyleSheets=[e],this.shadowRoot.innerHTML="\n <slot></slot>\n "}}customElements.get("y-panelbar")\|\|customElements.define("y-panelbar",ce);class le extends HTMLElement{static get observedAttributes(){return["value","min","max","step","size","color","label-display","label-format","indeterminate","disabled"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("min")\|\|this.setAttribute("min","0"),this.hasAttribute("max")\|\|this.setAttribute("max","100"),this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(e){e?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}get labelFormat(){return this.getAttribute("label-format")\|\|"percent"}set labelFormat(e){this.setAttribute("label-format",e)}get labelDisplay(){return"false"!==this.getAttribute("label-display")}set labelDisplay(e){this.setAttribute("label-display",e?"true":"false")}get max(){return parseFloat(this.getAttribute("max"))\|\|100}set max(e){this.setAttribute("max",String(e))}get min(){return parseFloat(this.getAttribute("min"))\|\|0}set min(e){this.setAttribute("min",String(e))}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get step(){const e=parseFloat(this.getAttribute("step"));return Number.isNaN(e)\|\|e<=0?null:e}set step(e){null==e?this.removeAttribute("step"):this.setAttribute("step",String(e))}get value(){const e=parseFloat(this.getAttribute("value"));return Number.isNaN(e)?null:e}set value(e){null==e?this.removeAttribute("value"):this.setAttribute("value",String(e))}decrement(){null!==this.value&&(this.value=Math.max(this.value-(this.step\|\|1),this.min))}increment(){null!==this.value&&(this.value=Math.min(this.value+(this.step\|\|1),this.max))}get percentage(){if(null===this.value)return 0;const e=this.max-this.min;if(e<=0)return 0;let n=(this.value-this.min)/e100;if(this.step){const t=this.step/e100;n=Math.round(n/t)t}return Math.max(0,Math.min(100,n))}render(){const e=this.indeterminate,n=this.percentage,[t,r]=k(this.color,null),o=this._getSizeVar(this.size),a=this.disabled,i=this.labelDisplay&&!e,s=this._getLabel(),c=null!==this.value?this.value:void 0;this.shadowRoot.innerHTML=`<style>${this._buildStyleSheet(t,r,o,n,e,a)}</style>`+this._buildHTML(n,i,s,e,c),this._autoHideHeader()}_autoHideHeader(){const e=this.shadowRoot.querySelector(".progress-header"),n=e?.querySelector("slot");if(!n\|\|!e)return;const t=()=>{const t=n.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));e.style.display=t?"":"none"};n.addEventListener("slotchange",t),t()}_buildHTML(e,n,t,r,o){return`\n <div class="progress-wrapper">\n <div class="progress-header">\n <span class="label"><slot></slot></span>\n </div>\n <div\n class="track"\n part="track"\n role="progressbar"\n aria-valuenow="${void 0!==o?o:""}"\n aria-valuemin="${this.min}"\n aria-valuemax="${this.max}"\n ${r?'aria-busy="true"':""}\n >\n ${n?`<span class="value-label value-label--track" part="value-label">${t}</span>`:""}\n <div class="bar" part="bar">\n ${n?`<span class="value-label value-label--bar">${t}</span>`:""}\n </div>\n </div>\n </div>\n `}_buildStyleSheet(e,n,t,r,o,a){return`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--base-content--);\n opacity: ${a?"0.5":"1"};\n pointer-events: ${a?"none":"auto"};\n }\n\n .progress-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .progress-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: var(--font-size-label, 0.83em);\n }\n\n .label {\n color: var(--base-content--);\n }\n\n .track {\n position: relative;\n width: 100%;\n height: ${t};\n background: var(--base-background-component);\n border: var(--component-progress-border-width) solid var(--base-border);\n border-radius: var(--component-progress-border-radius-outer);\n overflow: hidden;\n box-sizing: border-box;\n padding: var(--component-progress-padding);\n }\n\n .bar {\n position: relative;\n height: 100%;\n background: ${e};\n border-radius: var(--component-progress-border-radius-inner);\n width: ${o?"30%":`${r}%`};\n transition: ${o?"none":"width 0.3s ease"};\n overflow: hidden;\n ${o?"animation: indeterminate 1.5s ease-in-out infinite;":""}\n }\n\n .value-label {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size-small, 0.75em);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n pointer-events: none;\n font-weight: 600;\n }\n\n .value-label--track { color: ${e}; }\n .value-label--bar { color: ${n}; width: calc(100% / (${r\|\|1} / 100)); }\n\n @keyframes indeterminate {\n 0% { transform: translateX(0%); }\n 50% { transform: translateX(233%); }\n 100% { transform: translateX(0%); }\n }\n `}_getLabel(){if(this.indeterminate\|\|null===this.value)return"";switch(this.labelFormat){case"value":return`${this.value} / ${this.max}`;case"fraction":return`${this.value-this.min} / ${this.max-this.min}`;default:return`${Math.round(this.percentage)}%`}}_getSizeVar(e){const n={small:"var(--component-progress-size-small)",medium:"var(--component-progress-size-medium)",large:"var(--component-progress-size-large)"};return n[e]\|\|n.medium}}customElements.get("y-progress")\|\|customElements.define("y-progress",le);class de extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["icon","color","max","value","size","disabled","readonly","name"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._hoverIndex=-1,this.render()}connectedCallback(){this._internals.setFormValue(this.value)}attributeChangedCallback(e,n,t){n!==t&&("value"===e&&this._internals.setFormValue(t,this.getAttribute("name")),"name"!==e?this.render():this._internals.setFormValue(this.value,t))}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get icon(){return this.getAttribute("icon")\|\|"star"}set icon(e){this.setAttribute("icon",e)}get max(){return Math.max(1,parseInt(this.getAttribute("max")\|\|"5",10))}set max(e){this.setAttribute("max",String(e))}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get readonly(){return this.hasAttribute("readonly")}set readonly(e){e?this.setAttribute("readonly",""):this.removeAttribute("readonly")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return parseInt(this.getAttribute("value")\|\|"0",10)}set value(e){this.setAttribute("value",String(e)),this._internals.setFormValue(String(e),this.getAttribute("name"))}render(){const e=!this.disabled&&!this.readonly,n=r(this.icon),t=this._getFilledColor(this.color),o=this._getIconSize(this.size),a=this._getIconGap(this.size);this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet(e,t,o,a)],this.shadowRoot.innerHTML=this._buildHTML(e,n),this._attachIconListeners()}_attachIconListeners(){!this.disabled&&!this.readonly&&(this.shadowRoot.querySelectorAll(".icon").forEach(e=>{const n=parseInt(e.dataset.index,10);e.addEventListener("mouseenter",()=>{this._hoverIndex=n,this._updateIcons(n)}),e.addEventListener("mouseleave",()=>{this._hoverIndex=-1,this._updateIcons(this.value)}),e.addEventListener("click",()=>{const e=n!==this.value\|\|this.hasAttribute("required")?n:0;this.value=e,this._updateIcons(e),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))})}),this.shadowRoot.querySelector(".rating").addEventListener("mouseleave",()=>{this._hoverIndex=-1,this._updateIcons(this.value)}))}_buildHTML(e,n){const{max:t,value:r}=this,o=Array.from({length:t},(o,a)=>{const i=a+1;return`<span\n class="icon${i<=r?" filled":""}"\n data-index="${i}"\n part="icon"\n ${e?`role="radio" aria-label="${i} of ${t}" tabindex="0"`:'aria-hidden="true"'}\n >${n}</span>`}).join("");return`<div class="rating" part="rating" role="${e?"radiogroup":"img"}" aria-label="Rating: ${r} of ${t}">${o}</div>`}_buildStyleSheet(e,n,t,r){const o=new CSSStyleSheet;return o.replaceSync(`\n :host {\n display: inline-block;\n font-family: var(--font-family-body);\n opacity: ${this.disabled?"0.5":"1"};\n pointer-events: ${this.disabled?"none":"auto"};\n }\n\n .rating {\n display: inline-flex;\n align-items: center;\n gap: ${r};\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${t};\n height: ${t};\n color: var(--base-content-lighter, #9d9fa3);\n transition: color 0.15s ease, transform 0.1s ease;\n cursor: ${e?"pointer":"default"};\n flex-shrink: 0;\n }\n\n .icon.filled {\n color: ${n};\n }\n\n .icon svg {\n width: 100%;\n height: 100%;\n }\n\n ${e?"\n .icon:hover,\n .icon:focus-visible {\n transform: scale(1.15);\n }\n ":""}\n `),o}_getFilledColor(e){return e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl")?e:`var(--${e}-content--)`}_getIconGap(e){return{small:"2px",medium:"4px",large:"6px"}[e]\|\|"4px"}_getIconSize(e){return{small:"18px",medium:"24px",large:"32px"}[e]\|\|"24px"}_updateIcons(e){this.shadowRoot.querySelectorAll(".icon").forEach(n=>{const t=parseInt(n.dataset.index,10);n.classList.toggle("filled",t<=e)})}}customElements.get("y-rating")\|\|customElements.define("y-rating",de);class pe extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["options","name","value","disabled"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._value=""}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&("value"===e?(this._value=t,this._internals.setFormValue(t,this.name),this._updateChecked()):["options","name","disabled"].includes(e)&&this.render())}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get options(){try{return JSON.parse(this.getAttribute("options")\|\|"[]")}catch{return[]}}set options(e){this.setAttribute("options",Array.isArray(e)?JSON.stringify(e):e??"[]")}get value(){return this._value}set value(e){this._value=e,this.setAttribute("value",e),this._internals.setFormValue(e,this.name),this._updateChecked()}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML=`\n <fieldset role="radiogroup" part="radio">\n ${this._buildOptionsHTML()}\n </fieldset>\n `,this._bindRadioListeners()}_bindRadioListeners(){this.shadowRoot.querySelectorAll("input[type=radio]").forEach((e,n,t)=>{e.addEventListener("keydown",e=>this._handleKey(e,n,t)),e.addEventListener("click",e=>{this.value=e.target.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})})}_buildOptionsHTML(){const{name:e,disabled:n,value:t,options:r}=this;return r.map((r,o)=>`\n <label part="label">\n <input\n type="radio"\n name="${e}"\n value="${r.value}"\n ${n?"disabled":""}\n ${t===r.value?"checked":""}\n tabindex="${t?t===r.value?"0":"-1":0===o?"0":"-1"}"\n role="radio"\n aria-checked="${t===r.value}"\n />\n ${r.label}\n </label>\n `).join("")}_buildStyleSheet(){const e=new CSSStyleSheet;return e.replaceSync('\n :host {\n display: block;\n font-family: var(--font-family-body);\n }\n fieldset {\n border: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-x-small, 8px);\n }\n label {\n display: flex;\n align-items: center;\n gap: 0.5em;\n cursor: pointer;\n }\n input[type="radio"] {\n appearance: none;\n width: var(--component-radio-size, 16px);\n height: var(--component-radio-size, 16px);\n border: var(--component-inputs-border-width, 2px) solid var(--component-radio-color);\n border-radius: 50%;\n position: relative;\n outline: none;\n cursor: pointer;\n }\n input[type="radio"]:checked::after {\n content: \'\';\n position: absolute;\n top: 50%;\n left: 50%;\n width: var(--component-radio-dot-size, 8px);\n height: var(--component-radio-dot-size, 8px);\n background: var(--component-radio-color);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n }\n input[type="radio"]:focus-visible {\n outline: 2px solid var(--component-radio-accent);\n outline-offset: 2px;\n }\n input[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n '),e}_handleKey(e,n,t){const r=t.length;let o;if("ArrowDown"===e.key\|\|"ArrowRight"===e.key)e.preventDefault(),o=(n+1)%r;else{if("ArrowUp"!==e.key&&"ArrowLeft"!==e.key)return" "===e.key\|\|"Enter"===e.key?(e.preventDefault(),this.value=t[n].value,void this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):void 0;e.preventDefault(),o=(n-1+r)%r}t[o].focus()}_updateChecked(){this.shadowRoot.querySelectorAll("input[type=radio]").forEach(e=>{const n=e.value===this.value;e.checked=n,e.setAttribute("aria-checked",n),e.setAttribute("tabindex",n?"0":"-1")})}}customElements.get("y-radio")\|\|customElements.define("y-radio",pe);class he extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["value","min","max","step","size","color","disabled","name","orientation"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._dragging=!1}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("min")\|\|this.setAttribute("min","0"),this.hasAttribute("max")\|\|this.setAttribute("max","100"),this.hasAttribute("value")\|\|this.setAttribute("value","50"),this._internals.setFormValue(this.value),this.render(),this._bindEvents()}attributeChangedCallback(e,n,t){n!==t&&("value"!==e&&"name"!==e\|\|this._internals.setFormValue(this.value,this.getAttribute("name")),"value"===e&&this.shadowRoot.querySelector(".slider-track")?this._updateVisuals():(this.render(),this._bindEvents()))}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get max(){return parseFloat(this.getAttribute("max"))\|\|100}set max(e){this.setAttribute("max",String(e))}get min(){return parseFloat(this.getAttribute("min"))\|\|0}set min(e){this.setAttribute("min",String(e))}get orientation(){return this.getAttribute("orientation")\|\|"horizontal"}set orientation(e){this.setAttribute("orientation",e)}get percentage(){const e=this.max-this.min;if(e<=0)return 0;const n=(this.value-this.min)/e100;return Math.max(0,Math.min(100,n))}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get step(){const e=parseFloat(this.getAttribute("step"));return Number.isNaN(e)\|\|e<=0?null:e}set step(e){null==e?this.removeAttribute("step"):this.setAttribute("step",String(e))}get value(){const e=parseFloat(this.getAttribute("value"));return Number.isNaN(e)?0:e}set value(e){const n=Math.max(this.min,Math.min(this.max,Number(e))),t=this._snapToStep(n);this.setAttribute("value",String(t))}render(){const e=this.percentage,n=this._getTrackColor(this.color),t=this._getThumbColor(this.color),{trackHeight:r}=this._getSizeVars(this.size),o=this.disabled;this.shadowRoot.innerHTML=`<style>${this._buildStyleSheet(n,t,r,e,o)}</style>`+this._buildHTML(e,o)}_bindEvents(){const e=this.shadowRoot.querySelector(".slider-track"),n=this.shadowRoot.querySelector(".thumb");if(!e\|\|!n)return;const t=e=>{this.disabled\|\|(e.preventDefault(),this._dragging=!0,this._updateFromPointer(e),document.addEventListener("pointermove",r),document.addEventListener("pointerup",o))},r=e=>{this._dragging&&this._updateFromPointer(e)},o=()=>{this._dragging=!1,document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",o),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))};e.addEventListener("pointerdown",t),n.addEventListener("pointerdown",t),e.addEventListener("keydown",e=>{if(this.disabled)return;const n=this.step\|\|1;let t=!0;switch(e.key){case"ArrowRight":case"ArrowUp":this.value=this.value+n;break;case"ArrowLeft":case"ArrowDown":this.value=this.value-n;break;case"Home":this.value=this.min;break;case"End":this.value=this.max;break;default:t=!1}t&&(e.preventDefault(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))})}_buildHTML(e,n){return`\n <div class="slider-wrapper">\n <div\n class="slider-track"\n part="track"\n role="slider"\n tabindex="${n?"-1":"0"}"\n aria-valuenow="${this.value}"\n aria-valuemin="${this.min}"\n aria-valuemax="${this.max}"\n ${this.step?`aria-valuestep="${this.step}"`:""}\n aria-orientation="${this.orientation}"\n ${n?'aria-disabled="true"':""}\n >\n <div class="slider-inner">\n <div class="fill" part="fill"></div>\n <div class="thumb" part="thumb"></div>\n </div>\n </div>\n </div>\n `}_buildStyleSheet(e,n,t,r,o){return`\n :host {\n display: inline-block;\n font-family: var(--font-family-body);\n color: var(--base-content--);\n opacity: ${o?"0.5":"1"};\n pointer-events: ${o?"none":"auto"};\n min-width: 100px;\n }\n\n .slider-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .slider-track {\n position: relative;\n width: 100%;\n height: ${t};\n background: var(--base-background-component);\n border: var(--component-slider-border-width) solid var(--base-border);\n border-radius: var(--component-slider-border-radius-outer);\n box-sizing: border-box;\n padding: var(--component-slider-padding);\n cursor: pointer;\n outline: none;\n }\n\n .slider-track:focus-visible {\n border-color: ${n};\n }\n\n .slider-inner {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n\n .fill {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background: ${e};\n border-radius: var(--component-slider-border-radius-inner) 0 0 var(--component-slider-border-radius-inner);\n width: ${r}%;\n pointer-events: none;\n }\n\n .thumb {\n position: absolute;\n top: 0;\n left: ${r}%;\n transform: translateX(-50%);\n width: 8px;\n height: 100%;\n background: ${n};\n border-radius: var(--component-slider-thumb-border-radius);\n cursor: grab;\n z-index: 1;\n touch-action: none;\n }\n\n .thumb:active {\n cursor: grabbing;\n }\n `}_getSizeVars(e){const n={small:{trackHeight:"var(--sizing-small, 27px)"},medium:{trackHeight:"var(--sizing-medium, 35px)"},large:{trackHeight:"var(--sizing-large, 51px)"}};return n[e]\|\|n.medium}_getThumbColor(e){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[e]\|\|e}_getTrackColor(e){return{primary:"var(--primary-background-hover)",secondary:"var(--secondary-background-hover)",base:"var(--base-background-active)",success:"var(--success-background-hover)",warning:"var(--warning-background-hover)",error:"var(--error-background-hover)",help:"var(--help-background-hover)"}[e]\|\|`color-mix(in srgb, ${e} 40%, transparent)`}_snapToStep(e){if(!this.step)return e;const n=Math.round((e-this.min)/this.step);return Math.max(this.min,Math.min(this.max,this.min+nthis.step))}_updateFromPointer(e){const n=this.shadowRoot.querySelector(".slider-track"),t=(this.shadowRoot.querySelector(".slider-inner")\|\|n).getBoundingClientRect(),r=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),o=this.min+r(this.max-this.min);this.value=o,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}_updateVisuals(){const e=this.percentage,n=this.shadowRoot.querySelector(".fill"),t=this.shadowRoot.querySelector(".thumb"),r=this.shadowRoot.querySelector(".slider-track");n&&(n.style.width=`${e}%`),t&&(t.style.left=`${e}%`),r&&r.setAttribute("aria-valuenow",String(this.value))}}customElements.get("y-slider")\|\|customElements.define("y-slider",he);class be extends HTMLElement{static get observedAttributes(){return["direction","mode","columns","gap","wrap","align","justify","responsive"]}constructor(){super(),this.attachShadow({mode:"open"}),this._resizeObserver=null,this._masonryRAF=null,this.render()}connectedCallback(){this._applyLayout(),"masonry"===this.mode&&this._initMasonry(),this.responsive&&this._initResponsive()}disconnectedCallback(){this._teardownMasonry()}attributeChangedCallback(e,n,t){if(n===t)return;const r="mode"===e&&"masonry"===n,o="masonry"===this.mode;r&&this._teardownMasonry(),this._applyLayout(),o&&this.isConnected&&this._initMasonry(),"responsive"===e&&this.responsive&&this.isConnected&&this._initResponsive()}get direction(){return this.getAttribute("direction")\|\|"row"}set direction(e){this.setAttribute("direction",e)}get mode(){return this.getAttribute("mode")\|\|"flex"}set mode(e){this.setAttribute("mode",e)}get columns(){return parseInt(this.getAttribute("columns"),10)\|\|3}set columns(e){this.setAttribute("columns",String(e))}get gap(){return this.getAttribute("gap")\|\|"medium"}set gap(e){this.setAttribute("gap",e)}get wrap(){return this.hasAttribute("wrap")}set wrap(e){e?this.setAttribute("wrap",""):this.removeAttribute("wrap")}get align(){return this.getAttribute("align")\|\|"stretch"}set align(e){this.setAttribute("align",e)}get justify(){return this.getAttribute("justify")\|\|"start"}set justify(e){this.setAttribute("justify",e)}get responsive(){return"false"!==this.getAttribute("responsive")}set responsive(e){!1===e\|\|"false"===e?this.setAttribute("responsive","false"):this.removeAttribute("responsive")}render(){this.shadowRoot.innerHTML='<div class="container" part="container"><slot></slot></div>',this._container=this.shadowRoot.querySelector(".container"),this._slot=this.shadowRoot.querySelector("slot"),this._slot.addEventListener("slotchange",()=>{"masonry"===this.mode&&this._syncMasonryObserver()})}_applyLayout(){if(!this._container)return;const e=this._buildStyleSheet();this.shadowRoot.adoptedStyleSheets=[e],"masonry"===this.mode?this._layoutMasonry():this._clearMasonryPositions()}_buildStyleSheet(){const e=new CSSStyleSheet,n=this._resolveGap(),t=this.mode,r=this.columns,o=this.responsive;let a,i="";if("grid"===t){a=`\n .container {\n display: grid;\n grid-template-columns: ${o?this._buildResponsiveGridTemplate(r,n):`repeat(var(--component-stack-columns, ${r}), 1fr)`};\n gap: ${n};\n }\n `}else if("masonry"===t)a="\n .container {\n position: relative;\n }\n ";else{const e=this.direction,t=this.wrap\|\|o&&"row"===e,r={start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly"};a=`\n .container {\n display: flex;\n flex-direction: ${e};\n flex-wrap: ${t?"wrap":"nowrap"};\n align-items: ${{start:"flex-start",end:"flex-end",center:"center",stretch:"stretch",baseline:"baseline"}[this.align]\|\|"stretch"};\n justify-content: ${r[this.justify]\|\|"flex-start"};\n gap: ${n};\n }\n `,t&&(i="::slotted() { flex-shrink: 0; }")}return e.replaceSync(`\n :host {\n display: block;\n box-sizing: border-box;\n }\n ${a}\n ${i}\n `),e}_buildResponsiveGridTemplate(e,n){return`repeat(auto-fit, minmax(${`min(100%, max(var(--component-stack-min-item-width, 240px), ${`calc((100% - ${e-1} ${n}) / ${e})`}))`}, 1fr))`}_clearMasonryPositions(){this._getSlottedElements().forEach(e=>{e.style.position="",e.style.top="",e.style.left="",e.style.width=""}),this._container&&(this._container.style.height="")}_getBreakpointValue(e,n){const t=getComputedStyle(this).getPropertyValue(e).trim();return t?parseInt(t,10):n}_getResolvedColumns(){return this._getBreakpointValue("--component-stack-columns",this.columns)}_getResponsiveColumns(){const e=this._getResolvedColumns(),n=this._getBreakpointValue("--component-stack-mobile-breakpoint",576),t=this._getBreakpointValue("--component-stack-tablet-breakpoint",768),r=this._container?this._container.offsetWidth:window.innerWidth;return r<=n?1:r<=t?Math.min(2,e):e}_getSlottedElements(){return this._slot?this._slot.assignedElements({flatten:!0}):[]}_initMasonry(){this._teardownMasonry(),this._observedItems=new Set,this._resizeObserver=new ResizeObserver(()=>{this._masonryRAF&&cancelAnimationFrame(this._masonryRAF),this._masonryRAF=requestAnimationFrame(()=>this._layoutMasonry())}),this._resizeObserver.observe(this._container),this._syncMasonryObserver()}_initResponsive(){"masonry"===this.mode&&(this._resizeObserver\|\|this._initMasonry())}_layoutMasonry(){const e=this._getSlottedElements();if(!e.length\|\|!this._container)return;const n=this.responsive?this._getResponsiveColumns():this._getResolvedColumns(),t=this._resolveGapPx(),r=(this._container.offsetWidth-t(n-1))/n,o=new Array(n).fill(0);e.forEach(e=>{const n=o.indexOf(Math.min(...o)),a=n(r+t),i=o[n];e.style.position="absolute",e.style.top=`${i}px`,e.style.left=`${a}px`,e.style.width=`${r}px`,o[n]+=e.offsetHeight+t}),this._container.style.height=Math.max(...o)-t+"px"}_resolveGap(){const e={none:"var(--spacing-none, 0px)","x-small":"var(--spacing-x-small, 4px)",small:"var(--spacing-small, 6px)",medium:"var(--spacing-medium, 8px)",large:"var(--spacing-large, 12px)","x-large":"var(--spacing-x-large, 16px)","2x-large":"var(--spacing-2x-large, 24px)","4x-large":"var(--spacing-4x-large, 32px)"};return`var(--component-stack-gap, ${e[this.gap]\|\|e.medium})`}_resolveGapPx(){const e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",e.style.width=this._resolveGap(),this._container.appendChild(e);const n=e.offsetWidth;return e.remove(),n}_syncMasonryObserver(){if(!this._resizeObserver)return void this._initMasonry();const e=new Set(this._getSlottedElements());for(const n of this._observedItems)e.has(n)\|\|(this._resizeObserver.unobserve(n),this._observedItems.delete(n));for(const n of e)this._observedItems.has(n)\|\|(this._resizeObserver.observe(n),this._observedItems.add(n));this._layoutMasonry()}_teardownMasonry(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null,this._observedItems=null),this._masonryRAF&&(cancelAnimationFrame(this._masonryRAF),this._masonryRAF=null)}}customElements.get("y-stack")\|\|customElements.define("y-stack",be);class ue extends HTMLElement{static get observedAttributes(){return["items","current","orientation","position","size","linear","editable"]}constructor(){super(),this.attachShadow({mode:"open"}),this._stepStates=[]}connectedCallback(){this._syncStepStates(),this.render()}attributeChangedCallback(e,n,t){n!==t&&("items"===e&&this._syncStepStates(),this.render())}get current(){const e=parseInt(this.getAttribute("current"),10);return Number.isFinite(e)?Math.max(0,Math.min(e,this.items.length-1)):0}set current(e){this.setAttribute("current",String(e))}get editable(){return this.hasAttribute("editable")}set editable(e){e?this.setAttribute("editable",""):this.removeAttribute("editable")}get items(){try{return JSON.parse(this.getAttribute("items")\|\|"[]")}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get linear(){return this.hasAttribute("linear")}set linear(e){e?this.setAttribute("linear",""):this.removeAttribute("linear")}get orientation(){return"vertical"===this.getAttribute("orientation")?"vertical":"horizontal"}set orientation(e){this.setAttribute("orientation",e)}get position(){return"end"===this.getAttribute("position")?"end":"start"}set position(e){this.setAttribute("position",e)}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",e)}complete(e){const n=void 0!==e?e:this.current;n<0\|\|n>=this.items.length\|\|(this._stepStates[n]="complete",this.render(),this.dispatchEvent(new CustomEvent("complete",{bubbles:!0,composed:!0,detail:{step:this.items[n],index:n}})))}goTo(e){e<0\|\|e>=this.items.length\|\|e!==this.current&&(this.linear&&"complete"!==this._getStepState(e)\|\|this._fireChangeAndApply(e))}next(){const e=this.items,n=this.current;if(n===e.length-1){this._stepStates[n]="complete",this.render();return void(this._stepStates.every(e=>"complete"===e)&&this.dispatchEvent(new CustomEvent("finish",{bubbles:!0,composed:!0})))}this._stepStates[n]="complete",this._fireChangeAndApply(n+1)}previous(){this.current<=0\|\|this._fireChangeAndApply(this.current-1)}render(){const e=this.items;if(!e.length)return void(this.shadowRoot.innerHTML="");this.shadowRoot.innerHTML="";const n=document.createElement("style");n.textContent=this._buildStyles(),this.shadowRoot.appendChild(n);const t=this._buildIndicators(e),r=this._buildPanels(e);"end"===this.position?(this.shadowRoot.appendChild(r),this.shadowRoot.appendChild(t)):(this.shadowRoot.appendChild(t),this.shadowRoot.appendChild(r))}reset(){this._stepStates=this.items.map(()=>"pending"),this.current=0}_buildConnectorStyles(){const e=`var(--component-stepper-indicator-size-${this.size}, ${this._getDefaultIndicatorSize()})`;return`\n .connector {\n flex: 1;\n min-width: calc(${e} + 8px);\n min-height: calc(${e} + 8px);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .connector-line {\n background: var(--component-stepper-connector-color, var(--base-border, #ddd));\n transition: background 0.2s ease;\n }\n\n .connector-line.complete {\n background: var(--component-stepper-connector-color-complete, var(--primary-content--, #1976d2));\n }\n\n :host([orientation="horizontal"]) .connector-line {\n height: 2px;\n width: 100%;\n }\n\n :host([orientation="vertical"]) .connector-line {\n width: 2px;\n height: 100%;\n }\n `}_buildHostStyles(){return'\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n }\n\n :host([orientation="vertical"]) {\n display: flex;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n '}_buildIndicator(e,n,t){const r=this._getStepState(n),o=n===this.current,a=this._isIndicatorClickable(n,r),i=["indicator"];o&&i.push("indicator--active"),"complete"===r&&i.push("indicator--complete"),"error"===r&&i.push("indicator--error");const s=this._buildIndicatorButton(e,n,r,o,a),c=[z("div",{class:`indicator ${r} ${o?"active":""}`,part:i.join(" "),role:"listitem"},[s])];return n<t.length-1&&c.push(z("div",{class:"connector",part:"connector",role:"presentation","aria-hidden":"true"},[z("div",{class:"connector-line "+("complete"===r?"complete":"")})])),c}_buildIndicatorButton(e,n,t,r,o){const a=`panel-${e.slot}`,i={class:"indicator-btn",id:`indicator-${e.slot}`,"aria-controls":a,"aria-label":"complete"===t?`${e.label} (complete)`:e.label};r&&(i["aria-current"]="step"),r?i.tabindex="0":(o\|\|(i["aria-disabled"]="true"),i.tabindex="-1");const s=z("button",i,[this._buildIndicatorIcon(e,n,t),this._buildIndicatorLabel(e)]);return o&&s.addEventListener("click",()=>this._onIndicatorClick(n)),s.addEventListener("keydown",e=>this._onIndicatorKeydown(e,n)),s}_buildIndicatorIcon(e,n,t){const r=`${e.slot}-icon`;if(!!this.querySelector(`[slot="${r}"]`)){const e=z("slot",{name:r});return z("span",{class:"indicator-icon",part:"indicator-icon"},[e])}let o;return o="complete"===t?z("y-icon",{name:"check",size:this._getIconSize()}):"error"===t?z("y-icon",{name:"circle-exclamation",size:this._getIconSize()}):e.icon?z("y-icon",{name:e.icon,size:this._getIconSize()}):document.createTextNode(String(n+1)),z("span",{class:"indicator-icon",part:"indicator-icon"},[o])}_buildIndicatorLabel(e){const n=[z("span",{class:"indicator-label-text",part:"indicator-label"},[e.label])];return e.description&&n.push(z("span",{class:"indicator-description",part:"indicator-description"},[e.description])),z("span",{class:"indicator-label"},n)}_buildIndicators(e){return z("div",{class:"indicators",part:"indicators",role:"list"},e.flatMap((n,t)=>this._buildIndicator(n,t,e)))}_buildIndicatorStyles(){const e=`var(--component-stepper-indicator-size-${this.size}, ${this._getDefaultIndicatorSize()})`;return`\n .indicators {\n display: flex;\n align-items: center;\n gap: ${`var(--component-stepper-gap-${this.size}, ${this._getDefaultGap()})`};\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n :host([orientation="vertical"]) .indicators {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .indicator {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n :host([orientation="vertical"]) .indicator {\n flex-direction: row;\n }\n\n .indicator-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n background: none;\n border: none;\n cursor: default;\n padding: 4px;\n font-family: inherit;\n font-size: inherit;\n color: inherit;\n border-radius: var(--radii-small, 4px);\n outline: none;\n transition: opacity 0.2s ease;\n }\n\n .indicator-btn[aria-disabled="false"],\n .indicator-btn:not([aria-disabled="true"])[tabindex="0"] {\n cursor: pointer;\n }\n\n .indicator-btn:focus-visible {\n outline: 2px solid var(--primary-content--, #1976d2);\n outline-offset: 2px;\n }\n\n .indicator-btn[aria-disabled="true"] {\n opacity: 0.55;\n }\n\n .indicator-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${e};\n height: ${e};\n border-radius: var(--radii-full, 50%);\n font-size: var(--font-size-label, 0.85em);\n font-weight: var(--font-weight-heading, 500);\n flex-shrink: 0;\n transition: background 0.2s ease, color 0.2s ease;\n background: var(--component-stepper-color-pending, var(--base-border, #ccc));\n color: var(--component-stepper-label-color, var(--base-content--, #333));\n }\n\n .active .indicator-icon {\n background: var(--component-stepper-color-active, var(--primary-content--, #1976d2));\n color: var(--component-stepper-color-active-text, var(--primary-content-inverse, #fff));\n }\n\n .complete .indicator-icon {\n background: var(--component-stepper-color-complete, var(--success-content--, #2e7d32));\n color: var(--component-stepper-color-complete-text, var(--success-content-inverse, #fff));\n }\n\n .error .indicator-icon {\n background: var(--component-stepper-color-error, var(--error-content--, #d32f2f));\n color: var(--component-stepper-color-error-text, var(--error-content-inverse, #fff));\n }\n\n .indicator-label {\n display: flex;\n flex-direction: column;\n gap: 2px;\n text-align: left;\n }\n\n .indicator-label-text {\n font-size: var(--font-size-label, 0.85em);\n font-weight: var(--font-weight-heading, 500);\n color: var(--component-stepper-label-color, var(--base-content--, #333));\n }\n\n .indicator-description {\n font-size: var(--font-size-small, 0.75em);\n color: var(--component-stepper-label-color, var(--base-content--, #666));\n opacity: 0.7;\n }\n `}_buildPanelStyles(){return'\n .panels {\n margin-top: var(--spacing-medium, 16px);\n }\n\n :host([position="end"]) .panels {\n margin-top: 0;\n margin-bottom: var(--spacing-medium, 16px);\n }\n\n :host([orientation="vertical"]) .panels {\n margin-top: 0;\n margin-left: var(--spacing-medium, 16px);\n flex: 1;\n }\n\n :host([orientation="vertical"][position="end"]) .panels {\n margin-left: 0;\n margin-right: var(--spacing-medium, 16px);\n }\n '}_buildPanels(e){const n=z("div",{class:"panels",part:"panels"});return e.forEach((e,t)=>{const r=t===this.current,o=z("div",{class:"panel",part:"panel",id:`panel-${e.slot}`,role:"tabpanel","aria-labelledby":`indicator-${e.slot}`,hidden:!r}),a=z("slot",{name:e.slot});o.appendChild(a),n.appendChild(o)}),n}_buildStyles(){return[this._buildHostStyles(),this._buildIndicatorStyles(),this._buildConnectorStyles(),this._buildPanelStyles()].join("\n")}_fireChangeAndApply(e){const n=this.current,t=this.items[e],r=new CustomEvent("change",{bubbles:!0,composed:!0,cancelable:!0,detail:{index:e,previousIndex:n,step:t}});this.dispatchEvent(r)&&(this.current=e)}_getDefaultGap(){const e={small:"4px",medium:"8px",large:"12px"};return e[this.size]\|\|e.medium}_getDefaultIndicatorSize(){const e={small:"28px",medium:"36px",large:"44px"};return e[this.size]\|\|e.medium}_getIconSize(){return{small:"small",medium:"medium",large:"large"}[this.size]\|\|"medium"}_getStepState(e){return this._stepStates[e]&&"pending"!==this._stepStates[e]?this._stepStates[e]:"pending"}_isIndicatorClickable(e,n){return e!==this.current&&(!this.linear&&(!(!this.editable\|\|"complete"!==n)\|\|!this.editable&&"complete"!==n))}_onIndicatorClick(e){this.goTo(e)}_onIndicatorKeydown(e,n){const t=Array.from(this.shadowRoot.querySelectorAll(".indicator-btn")),r=t.indexOf(e.currentTarget),o="horizontal"===this.orientation,a=o?"ArrowRight":"ArrowDown",i=o?"ArrowLeft":"ArrowUp";if(e.key===a){e.preventDefault();const n=t[r+1];n&&(e.currentTarget.setAttribute("tabindex","-1"),n.setAttribute("tabindex","0"),n.focus())}else if(e.key===i){e.preventDefault();const n=t[r-1];n&&(e.currentTarget.setAttribute("tabindex","-1"),n.setAttribute("tabindex","0"),n.focus())}else"Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),e.currentTarget.getAttribute("aria-disabled")&&"false"!==e.currentTarget.getAttribute("aria-disabled")\|\|this._onIndicatorClick(n))}_syncStepStates(){const e=this.items,n=this._stepStates;this._stepStates=e.map((e,t)=>n[t]\|\|e.status\|\|"pending")}}customElements.get("y-stepper")\|\|customElements.define("y-stepper",ue);class ve extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["checked","disabled","animate","toggle-label","label-position","size","value","on-color","off-color"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this.hasAttribute("animate")\|\|this.setAttribute("animate","true"),this.render(),this._mirrorToggleLabels(),this._bindSwitchListeners()}attributeChangedCallback(e,n,t){n!==t&&this._update()}get animate(){return"false"!==this.getAttribute("animate")}set animate(e){this.setAttribute("animate",e?"true":"false")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked"),this._update()}get onColor(){return this.getAttribute("on-color")\|\|"primary"}set onColor(e){this.setAttribute("on-color",e)}get offColor(){return this.getAttribute("off-color")\|\|""}set offColor(e){e?this.setAttribute("off-color",e):this.removeAttribute("off-color")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get toggleLabel(){return this.hasAttribute("toggle-label")&&"false"!==this.getAttribute("toggle-label")}set toggleLabel(e){e?this.setAttribute("toggle-label","true"):this.removeAttribute("toggle-label")}get value(){return this.getAttribute("value")\|\|"on"}set value(e){this.setAttribute("value",e),this._update()}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML=`\n ${this._labelTag("top")}\n <div class="switch" part="switch" tabindex="0" role="switch" aria-checked="${this.checked}" aria-disabled="${this.disabled}">\n <div class="track">\n <div class="label-content"><slot name="off-label">Off</slot></div>\n <div class="label-content"><slot name="on-label">On</slot></div>\n </div>\n <div class="toggle" part="toggle">\n <span class="off"></span>\n <span class="on"></span>\n </div>\n </div>\n ${this._labelTag("bottom")}\n `,this._update(),E(this.shadowRoot.querySelector(".label-wrapper"))}toggle(){this.disabled\|\|(this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}_bindSwitchListeners(){const e=this.shadowRoot.querySelector(".switch");e.addEventListener("click",()=>this.toggle()),e.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key\|\|(e.preventDefault(),this.toggle())})}_buildStyleSheet(){const e=new CSSStyleSheet;return e.replaceSync('\n :host {\n display: inline-flex;\n flex-direction: var(--switch-dir, column);\n align-items: center;\n gap: var(--spacing-x-small);\n font-family: var(--font-family-body);\n --switch-padding: var(--component-switch-padding, 2px);\n --show-labels: flex;\n --show-toggle-label: none;\n --switch-width: max-content;\n --toggle-width: auto;\n --toggle-padding: 0 var(--spacing-small);\n --toggle-radius: var(--component-switch-border-radius);\n }\n\n .label-wrapper {\n display: none;\n }\n\n .label {\n font-size: var(--font-size-label);\n color: var(--base-content--);\n }\n\n .switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--base-background-component);\n border: var(--component-switch-border-width) solid var(--base-border);\n border-radius: var(--component-switch-border-radius);\n cursor: pointer;\n height: var(--switch-height);\n font-size: var(--switch-font-size);\n box-sizing: border-box;\n padding: var(--switch-padding);\n width: var(--switch-width, max-content);\n }\n\n .track {\n display: flex;\n align-items: center;\n height: 100%;\n position: relative;\n z-index: 0;\n }\n\n .label-content {\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 var(--spacing-small);\n white-space: nowrap;\n position: relative;\n z-index: 0;\n color: var(--base-content-light);\n display: var(--show-labels, flex);\n }\n\n .toggle {\n position: absolute;\n top: var(--switch-padding);\n bottom: var(--switch-padding);\n left: var(--switch-padding);\n height: calc(100% - (var(--switch-padding) + var(--switch-padding)));\n width: var(--toggle-width, auto);\n background: var(--toggle-bg, var(--base-content-light));\n color: var(--base-background-component);\n border-radius: var(--toggle-radius, var(--component-switch-border-radius));\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--toggle-padding, 0 var(--spacing-small));\n font-weight: 500;\n z-index: 1;\n white-space: nowrap;\n transform: translateX(var(--toggle-x, 0));\n transition: var(--toggle-transition, transform 0.25s ease, background 0.25s ease);\n }\n\n .toggle .on,\n .toggle .off {\n display: none;\n }\n\n :host([checked]) .toggle .on {\n display: var(--show-toggle-label, none);\n }\n\n :host(:not([checked])) .toggle .off {\n display: var(--show-toggle-label, none);\n }\n\n :host([animate="false"]) .toggle {\n transition: none !important;\n }\n\n :host([disabled]) {\n opacity: 0.5;\n }\n\n :host([disabled]) .switch {\n cursor: not-allowed;\n }\n '),e}_labelTag(e){return"top"===e&&("top"===this.labelPosition\|\|"left"===this.labelPosition)\|\|"bottom"===e&&("bottom"===this.labelPosition\|\|"right"===this.labelPosition)?'<label class="label-wrapper"><slot name="label"></slot></label>':""}_mirrorToggleLabels(){requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".toggle");if(!e)return;e.innerHTML="";const n=this.querySelector('[slot="off-label"]'),t=this.querySelector('[slot="on-label"]'),r=document.createElement("span");r.className="off",r.appendChild(n?.cloneNode(!0)\|\|document.createTextNode("Off"));const o=document.createElement("span");o.className="on",o.appendChild(t?.cloneNode(!0)\|\|document.createTextNode("On")),e.appendChild(r),e.appendChild(o)})}_resolveColor(e,n){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[e]\|\|e\|\|n}_update(){this._updateSizeStyles(),this._updateTogglePosition(),this._updateToggleLabelDisplay(),this._updateLabelDisplay(),this._updateDirection(),this._updateAria(),this._updateFormValue(),this._mirrorToggleLabels()}_updateAria(){const e=this.shadowRoot?.querySelector(".switch");e&&(e.setAttribute("aria-checked",this.checked),e.setAttribute("aria-disabled",this.disabled?"true":"false"))}_updateDirection(){this.style.setProperty("--switch-dir",{top:"column",bottom:"column-reverse",left:"row-reverse",right:"row"}[this.labelPosition]\|\|"column")}_updateFormValue(){this._internals.setFormValue(this.checked?this.value:"")}_updateLabelDisplay(){this.style.setProperty("--show-labels",this.toggleLabel?"flex":"none")}_updateSizeStyles(){this.style.setProperty("--switch-height",{small:"24px",medium:"32px",large:"40px"}[this.size]),this.style.setProperty("--switch-width-fixed",{small:"44px",medium:"56px",large:"72px"}[this.size]),this.style.setProperty("--toggle-size","calc(var(--switch-height) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))"),this.style.setProperty("--switch-font-size",{small:"var(--font-size-small)",medium:"var(--font-size-label)",large:"var(--font-size-h4)"}[this.size])}_updateToggleLabelDisplay(){const e=this.toggleLabel;this.style.setProperty("--show-toggle-label",e?"inline-flex":"none"),this.style.setProperty("--switch-width",e?"max-content":"var(--switch-width-fixed)"),this.style.setProperty("--toggle-width",e?"auto":"var(--toggle-size)"),this.style.setProperty("--toggle-padding",e?"0 var(--spacing-small)":"0"),this.style.setProperty("--toggle-radius",e?"var(--component-switch-border-radius)":"9999px")}_updateTogglePosition(){this.style.setProperty("--toggle-x",this.checked?this.toggleLabel?"100%":"calc(var(--switch-width) - var(--toggle-size) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))":"0"),this.style.setProperty("--toggle-bg",this.checked?this._resolveColor(this.onColor,"var(--primary-content--)"):this._resolveColor(this.offColor,"var(--base-content-light)")),this.style.setProperty("--toggle-transition",this.animate?"transform 0.25s ease, background 0.25s ease":"none")}}customElements.get("y-switch")\|\|customElements.define("y-switch",ve);class me extends HTMLElement{static get observedAttributes(){return["columns","data","striped","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._sortField=null,this._sortDir="none",this._parsedData=[],this._parsedColumns=[]}connectedCallback(){this._parseAttributes(),this.render()}attributeChangedCallback(e,n,t){n!==t&&(this._parseAttributes(),this.render())}get columns(){return this.getAttribute("columns")}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){return this.getAttribute("data")}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get striped(){return this.hasAttribute("striped")}set striped(e){e?this.setAttribute("striped",""):this.removeAttribute("striped")}render(){const e=this._parsedColumns,n=this._getSortedData();this.shadowRoot.innerHTML="";const t=document.createElement("style");t.textContent=this._buildStyles(),this.shadowRoot.appendChild(t);const r=document.createElement("div");r.className="table-wrapper";const o=document.createElement("table");o.setAttribute("role","grid"),o.setAttribute("part","table"),o.appendChild(this._buildHeader(e)),o.appendChild(this._buildBody(e,n)),r.appendChild(o),this.shadowRoot.appendChild(r)}_buildBody(e,n){const t=document.createElement("tbody");return n.forEach(n=>{const r=document.createElement("tr");r.setAttribute("part","row"),e.forEach((e,t)=>{const o=document.createElement("td");o.setAttribute("part","cell"),(e.rowHeader\|\|0===t)&&o.classList.add("row-header"),o.textContent=n[e.field]??"",r.appendChild(o)}),t.appendChild(r)}),t}_buildHeader(e){const n=document.createElement("thead");n.setAttribute("part","header");const t=document.createElement("tr");return e.forEach(e=>{const n=document.createElement("th");n.setAttribute("scope","col");const r=!1!==e.sortable;r&&(n.classList.add("sortable"),n.setAttribute("aria-sort",this._sortField===e.field?"asc"===this._sortDir?"ascending":"desc"===this._sortDir?"descending":"none":"none"),n.addEventListener("click",()=>this._onHeaderClick(e.field)));const o=document.createElement("span");if(o.className="th-content",o.textContent=e.header\|\|e.field,r){const n=this._sortIcon(e.field),t=document.createElement("span");t.className="sort-icon",n?t.innerHTML=n:t.classList.add("sort-icon--placeholder"),o.appendChild(t)}n.appendChild(o),t.appendChild(n)}),n.appendChild(t),n}_buildStyles(){const e=`var(--component-table-padding-${this.size}, 8px)`;return`\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n color: var(--component-table-color, #f7f7fa);\n }\n\n .table-wrapper {\n overflow-x: auto;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n table-layout: auto;\n }\n\n thead th {\n position: relative;\n padding: ${e};\n text-align: left;\n font-weight: 400;\n font-size: var(--font-size-paragraph, 1em);\n white-space: nowrap;\n background: transparent;\n border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #37383a);\n user-select: none;\n }\n\n thead th.sortable {\n cursor: pointer;\n }\n\n thead th.sortable:hover {\n background: var(--component-table-hover-background, #292a2b);\n }\n\n .th-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .sort-icon {\n flex-shrink: 0;\n vertical-align: middle;\n }\n\n .sort-icon svg {\n width: 14px;\n height: 14px;\n }\n\n .sort-icon--placeholder {\n visibility: hidden;\n width: 14px;\n height: 14px;\n display: inline-block;\n }\n\n tbody td {\n padding: ${e};\n font-size: var(--font-size-paragraph, 1em);\n border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #37383a);\n }\n\n tbody tr:last-child td {\n border-bottom: none;\n }\n\n tbody td.row-header {\n font-weight: 400;\n }\n\n ${this.striped?"tbody tr:nth-child(even) {\n background: var(--component-table-hover-background, #292a2b);\n }":""}\n\n tbody tr:hover {\n background: var(--component-table-active-background, #46474a);\n }\n `}_getSortedData(){const e=[...this._parsedData];if(!this._sortField\|\|"none"===this._sortDir)return e;const n="asc"===this._sortDir?1:-1,t=this._sortField;return e.sort((e,r)=>{const o=e[t],a=r[t];return null==o&&null==a?0:null==o?1:null==a?-1:"number"==typeof o&&"number"==typeof a?(o-a)n:String(o).localeCompare(String(a))n})}_onHeaderClick(e){this._sortField===e?(this._sortDir="asc"===this._sortDir?"desc":"desc"===this._sortDir?"none":"asc","none"===this._sortDir&&(this._sortField=null)):(this._sortField=e,this._sortDir="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{field:this._sortField,direction:this._sortDir},bubbles:!0,composed:!0})),this.render()}_parseAttributes(){try{this._parsedColumns=JSON.parse(this.columns\|\|"[]")}catch{this._parsedColumns=[]}try{this._parsedData=JSON.parse(this.data\|\|"[]")}catch{this._parsedData=[]}}_sortIcon(e){const n=this._sortField===e?this._sortDir:"none";return"none"===n?"":"asc"===n?a:o}}customElements.get("y-table")\|\|customElements.define("y-table",me);class ge extends HTMLElement{static get observedAttributes(){return["removable","color","style-type","shape","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get removable(){return this.hasAttribute("removable")}set removable(e){e?this.setAttribute("removable",""):this.removeAttribute("removable")}get shape(){return this.getAttribute("shape")\|\|"square"}set shape(e){this.setAttribute("shape",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get styleType(){return this.getAttribute("style-type")\|\|"filled"}set styleType(e){this.setAttribute("style-type",e)}render(){this.shadowRoot.innerHTML=`\n <style>${this._getStyle()}</style>\n <span class="tag" part="tag">\n <slot></slot>\n ${this.removable?`<button class="remove" part="remove" aria-label="Remove tag">${l}</button>`:""}\n </span>\n `,this.removable&&this._bindRemoveListener()}_bindRemoveListener(){this.shadowRoot.querySelector(".remove").addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("remove",{bubbles:!0,composed:!0}))})}_getCustomColorVariant(e,n){const t=g(e),r={filled:`\n .tag { background: ${e}; color: ${t}; }\n .remove { color: ${t}; }\n `,outlined:`\n .tag { border: 1px solid ${e}; background: transparent; color: ${e}; }\n .remove { color: ${e}; }\n `,flat:`\n .tag { background: color-mix(in srgb, ${e} 20%, transparent); border-color: transparent; color: ${e}; }\n .remove { color: ${e}; }\n `};return r[n]\|\|r.filled}_getStyle(){const{color:e,styleType:n,shape:t,size:r}=this,o={primary:["--primary-content--","--primary-content-inverse","--primary-background-app"],secondary:["--secondary-content--","--secondary-content-inverse","--secondary-background-app"],base:["--base-content--","--base-content-inverse","--base-background-app"],success:["--success-content--","--success-content-inverse","--success-background-app"],error:["--error-content--","--error-content-inverse","--error-background-app"],warning:["--warning-content--","--warning-content-inverse","--warning-background-app"],help:["--help-content--","--help-content-inverse","--help-background-app"]},a=o[e],i=!a&&(e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl")),s="round"===t?"var(--component-tag-border-radius-circle)":"var(--component-tag-border-radius-square)",c={small:{height:"var(--component-tag-height-small, 22px)",padding:"var(--component-tag-padding-small, var(--spacing-2x-small))",fontSize:"var(--font-size-small, 0.8em)"},medium:{height:"var(--component-tag-height-medium, 28px)",padding:"var(--component-tag-padding-medium, var(--spacing-x-small))",fontSize:"var(--font-size-label, 0.83em)"},large:{height:"var(--component-tag-height-large, 38px)",padding:"var(--component-tag-padding-large, var(--spacing-small))",fontSize:"var(--font-size-paragraph, 1em)"}},l=c[r]\|\|c.medium,d=`\n :host {\n display: inline-flex;\n font-family: var(--font-family-body, sans-serif);\n font-size: ${l.fontSize};\n }\n .tag {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-2x-small);\n height: ${l.height};\n padding: 0 ${l.padding};\n border: 1px solid transparent;\n transition: background-color 0.2s, color 0.2s;\n border-radius: ${s};\n box-sizing: border-box;\n }\n .remove {\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n }\n .remove svg {\n pointer-events: none;\n width: 1.1em;\n height: 1.1em;\n stroke-width: 2.5;\n }\n `;if(i)return d+this._getCustomColorVariant(e,n);const[p,h,b]=a\|\|o.base,u={filled:`\n .tag { background: var(${p}); color: var(${h}); }\n .remove { color: var(${h}); }\n `,outlined:`\n .tag { border: 1px solid var(${p}); background: transparent; color: var(${p}); }\n .remove { color: var(${p}); }\n `,flat:`\n .tag { background: var(${b}); border-color: var(${b}); color: var(${p}); }\n .remove { color: var(${p}); }\n `};return d+(u[n]\|\|u.filled)}}customElements.get("y-tag")\|\|customElements.define("y-tag",ge);class ke extends HTMLElement{static get observedAttributes(){return["options","size","position"]}constructor(){super(),this.attachShadow({mode:"open"}),this._activeTab="",this._warnedSlots=new Set}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("position")\|\|this.setAttribute("position","top"),this.render()}attributeChangedCallback(e,n,t){n!==t&&("options"===e&&this._warnedSlots.clear(),this.render())}get options(){try{return JSON.parse(this.getAttribute("options")\|\|"[]")}catch{return[]}}set options(e){this.setAttribute("options",JSON.stringify(e)),this.render()}get position(){const e=this.getAttribute("position");return["top","bottom","left","right"].includes(e)?e:"top"}set position(e){this.setAttribute("position",["top","bottom","left","right"].includes(e)?e:"top")}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",["small","medium","large"].includes(e)?e:"medium")}activateTab(e){const n=this.options.find(n=>n.id===e);n&&!n.disabled&&this._activeTab!==e&&(this._activeTab=e,this.render())}render(){const e=this.options;this._resolveActiveTab(e);const n=e.find(e=>e.id===this._activeTab);this.shadowRoot.innerHTML="";const t=document.createElement("style");t.textContent=this._getStyles(),this.shadowRoot.appendChild(t);const r=z("div",{class:"tablist",role:"tablist",part:"tablist"});e.forEach(e=>r.appendChild(this._createTabButton(e))),this.shadowRoot.appendChild(r),this.shadowRoot.appendChild(this._createPanel(n?.slot\|\|"")),this._setupEvents()}_appendDeprecatedIconSlot(e,n,t){const r=`${n}-icon-${t}`;this.querySelector(`[slot="${r}"]`)&&(this._warnedSlots.has(r)\|\|(this._warnedSlots.add(r),console.warn(`[y-tabs] The "${r}" slot is deprecated. Use the ${n}Icon property on the tab options object instead, or use the "tab-content-${t}" slot for custom content.`)),e.appendChild(z("slot",{name:r,class:"icon-slot"})))}_createIcon(e){return z("y-icon",{name:e,size:this.size})}_createPanel(e){const n=z("div",{class:"tabpanel",id:`panel-${this._activeTab}`,role:"tabpanel",part:"content","aria-labelledby":`tab-${this._activeTab}`});return n.appendChild(z("slot",{name:e})),n}_createTabButton(e){const n=e.id===this._activeTab,t=!!e.disabled,r=z("button",{id:`tab-${e.id}`,role:"tab",part:"tab","aria-label":e.label,"aria-selected":String(n),"aria-controls":`panel-${e.id}`,"aria-disabled":String(t)});t&&(r.disabled=!0),r.tabIndex=n&&!t?0:-1,r.dataset.id=e.id;const o=z("slot",{name:`tab-content-${e.id}`});return r.appendChild(o),e.leftIcon?o.appendChild(this._createIcon(e.leftIcon)):this._appendDeprecatedIconSlot(o,"left",e.id),o.appendChild(z("span",{},[e.label])),e.rightIcon?o.appendChild(this._createIcon(e.rightIcon)):this._appendDeprecatedIconSlot(o,"right",e.id),r}_findSiblingButton(e,n,t){for(let r=1;r<=e.length;r++){const o=e[(n+rt+e.length)%e.length];if(!o.disabled)return o}return null}_getStyles(){return`\n :host {\n display: flex;\n }\n :host([position="top"]) { flex-direction: column; }\n :host([position="bottom"]) { flex-direction: column-reverse; }\n :host([position="left"]) { flex-direction: row; }\n :host([position="right"]) { flex-direction: row-reverse; }\n\n .tablist {\n display: flex;\n gap: 0;\n position: relative;\n z-index: 1;\n }\n :host([position="top"]) .tablist { margin-bottom: -1px; margin-top: 0; }\n :host([position="bottom"]) .tablist { margin-top: -1px; margin-bottom: 0; }\n :host([position="left"]) .tablist { flex-direction: column; margin-right: -1px; margin-left: 0; }\n :host([position="right"]) .tablist { flex-direction: column; margin-left: -1px; margin-right: 0; }\n\n :host([position="top"]) .tablist button { border-bottom: none; }\n :host([position="bottom"]) .tablist button { border-top: none; }\n :host([position="left"]) .tablist button { border-right: none; }\n :host([position="right"]) .tablist button { border-left: none; }\n\n button {\n background: var(--component-tabs-border-color);\n color: var(--component-tabs-color);\n border: var(--component-tab-border-width) solid var(--component-tabs-border-color);\n margin: 0;\n padding: ${`var(--component-tab-padding-${this.size})`};\n cursor: pointer;\n font-size: var(--font-size-label);\n display: inline-flex;\n align-items: center;\n gap: ${`var(--component-tab-gap-${this.size})`};\n transition: background 0.2s ease;\n outline: none;\n font-family: inherit;\n }\n :host([position="top"]) .tablist button:first-child { border-top-left-radius: var(--component-tab-border-radius-outer); }\n :host([position="top"]) .tablist button:last-child { border-top-right-radius: var(--component-tab-border-radius-outer); }\n :host([position="bottom"]) .tablist button:first-child { border-bottom-left-radius: var(--component-tab-border-radius-outer); }\n :host([position="bottom"]) .tablist button:last-child { border-bottom-right-radius: var(--component-tab-border-radius-outer); }\n :host([position="left"]) .tablist button:first-child { border-top-left-radius: var(--component-tab-border-radius-outer); }\n :host([position="left"]) .tablist button:last-child { border-bottom-left-radius: var(--component-tab-border-radius-outer); }\n :host([position="right"]) .tablist button:first-child { border-top-right-radius: var(--component-tab-border-radius-outer); }\n :host([position="right"]) .tablist button:last-child { border-bottom-right-radius: var(--component-tab-border-radius-outer); }\n\n button[aria-selected="true"] {\n background: var(--component-tabs-background);\n }\n button:focus-visible {\n outline: 2px solid var(--component-tabs-accent);\n outline-offset: -1px;\n }\n button[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .icon-slot {\n display: inline-flex;\n align-items: center;\n margin: 0 4px;\n }\n .tabpanel {\n position: relative;\n z-index: 0;\n border: var(--component-tab-border-width) solid var(--component-tabs-border-color);\n border-radius: var(--component-tab-border-radius-outer);\n padding: var(--component-tab-content-padding);\n background: var(--component-tabs-background);\n }\n :host([position="top"]) .tabpanel { border-top-left-radius: 0; }\n :host([position="bottom"]) .tabpanel { border-bottom-left-radius: 0; }\n :host([position="left"]) .tabpanel { border-top-left-radius: 0; }\n :host([position="right"]) .tabpanel { border-top-right-radius: 0; }\n :host([position="top"]) .tabpanel { margin-top: -1px; }\n :host([position="bottom"]) .tabpanel { margin-bottom: -1px; }\n :host([position="left"]) .tabpanel { margin-left: -1px; }\n :host([position="right"]) .tabpanel { margin-right: -1px; }\n `}_handleTabKeydown(e,n){const t=n.indexOf(e.currentTarget);return"ArrowRight"===e.key?(e.preventDefault(),void this._findSiblingButton(n,t,1)?.focus()):"ArrowLeft"===e.key?(e.preventDefault(),void this._findSiblingButton(n,t,-1)?.focus()):void("Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),this.activateTab(e.currentTarget.dataset.id)))}_resolveActiveTab(e){const n=!this._activeTab\|\|e.find(e=>e.id===this._activeTab)?.disabled;e.length&&n&&(this._activeTab=e.find(e=>!e.disabled)?.id\|\|"")}_setupEvents(){const e=Array.from(this.shadowRoot.querySelectorAll("button"));e.forEach(n=>{n.disabled\|\|(n.addEventListener("click",()=>this.activateTab(n.dataset.id)),n.addEventListener("keydown",n=>this._handleTabKeydown(n,e)))})}}customElements.get("y-tabs")\|\|customElements.define("y-tabs",ke);class ye extends HTMLElement{static get observedAttributes(){return["position","duration","max"]}constructor(){super(),this.attachShadow({mode:"open"}),this._queue=[]}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get duration(){return parseInt(this.getAttribute("duration")??"4000",10)}set duration(e){this.setAttribute("duration",String(e))}get max(){return parseInt(this.getAttribute("max")??"5",10)}set max(e){this.setAttribute("max",String(e))}get position(){return this.getAttribute("position")\|\|"bottom-right"}set position(e){this.setAttribute("position",e)}clear(){const e=this.shadowRoot.querySelector(".toast-container");e&&e.querySelectorAll(".toast").forEach(e=>this._removeToast(e))}render(){this.shadowRoot.innerHTML=`\n <style>${this._buildStyles()}</style>\n <div class="toast-container"></div>\n `}show(e={}){const{message:n="",color:t="base",duration:r=this.duration,dismissible:o=!0,icon:a=null}=e,i=this.shadowRoot.querySelector(".toast-container");if(!i)return null;const s=i.querySelectorAll(".toast");s.length>=this.max&&this._removeToast(s[0]);const c=document.createElement("div");c.className=`toast color-${t}`,c.setAttribute("role","alert"),c.setAttribute("aria-live","assertive"),c.setAttribute("part","toast");const[l,d]=k(t);if(c.style.backgroundColor=l,c.style.color=d,a){const e=document.createElement("y-icon");e.setAttribute("name",a),e.setAttribute("size","small"),e.className="toast-icon",e.setAttribute("part","icon"),c.appendChild(e)}const p=document.createElement("span");if(p.className="toast-message",p.setAttribute("part","message"),p.textContent=n,c.appendChild(p),o){const e=document.createElement("button");e.className="toast-close",e.setAttribute("aria-label","Dismiss"),e.innerHTML="×",e.addEventListener("click",()=>this._removeToast(c)),c.appendChild(e)}return i.appendChild(c),requestAnimationFrame(()=>{c.classList.add("visible")}),r>0&&(c._timeout=setTimeout(()=>this._removeToast(c),r)),this.dispatchEvent(new CustomEvent("y-toast-show",{detail:{message:n,color:t},bubbles:!0})),c}_buildStyles(){return`\n :host {\n font-family: var(--font-family-body, sans-serif);\n }\n\n .toast-container {\n ${this._getPositionStyles()}\n }\n\n .toast {\n pointer-events: auto;\n display: flex;\n align-items: center;\n gap: var(--spacing-medium, 8px);\n padding: var(--component-toast-padding, var(--spacing-medium, 8px));\n border-radius: var(--component-toast-border-radius, var(--radii-small, 4px));\n font-size: var(--font-size-paragraph, 1em);\n line-height: 1.4;\n opacity: 0;\n transform: translateY(8px);\n transition: opacity 0.25s ease, transform 0.25s ease;\n box-shadow: var(--base-shadow, 0 2px 6px rgba(0,0,0,0.15));\n }\n\n .toast.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .toast.exit {\n opacity: 0;\n transform: translateY(-8px);\n }\n\n .toast-icon {\n flex-shrink: 0;\n font-size: 1.1em;\n }\n\n .toast-message {\n flex: 1;\n }\n\n .toast-close {\n flex-shrink: 0;\n align-self: flex-start;\n background: none;\n border: none;\n color: inherit;\n font-size: 1.2em;\n cursor: pointer;\n padding: 0 0 0 var(--spacing-small, 6px);\n opacity: 0.7;\n line-height: 1;\n }\n .toast-close:hover {\n opacity: 1;\n }\n `}_getPositionStyles(){const e="position: fixed; z-index: var(--component-toast-z-index, 9000); display: flex; flex-direction: column; gap: var(--spacing-small, 6px); pointer-events: none; max-width: 420px; min-width: 280px;",n="var(--component-toast-offset, var(--spacing-x-large, 16px))",t={"top-right":`${e} top: ${n}; right: ${n}; align-items: flex-end;`,"top-left":`${e} top: ${n}; left: ${n}; align-items: flex-start;`,"top-center":`${e} top: ${n}; left: 50%; transform: translateX(-50%); align-items: center;`,"bottom-right":`${e} bottom: ${n}; right: ${n}; align-items: flex-end;`,"bottom-left":`${e} bottom: ${n}; left: ${n}; align-items: flex-start;`,"bottom-center":`${e} bottom: ${n}; left: 50%; transform: translateX(-50%); align-items: center;`};return t[this.position]\|\|t["bottom-right"]}_removeToast(e){e&&!e._removing&&(e._removing=!0,clearTimeout(e._timeout),e.classList.remove("visible"),e.classList.add("exit"),e.addEventListener("transitionend",()=>{e.remove(),this.dispatchEvent(new CustomEvent("y-toast-dismiss",{bubbles:!0}))},{once:!0}),setTimeout(()=>{e.parentNode&&e.remove()},350))}}customElements.get("y-toast")\|\|customElements.define("y-toast",ye);class we extends HTMLElement{static get observedAttributes(){return["text","position","delay","color"]}constructor(){super(),this.attachShadow({mode:"open"}),this._showTimeout=null,this._hideTimeout=null,this._visible=!1,this._onMouseEnter=this._onMouseEnter.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}connectedCallback(){this.render(),this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),document.addEventListener("keydown",this._onKeyDown)}disconnectedCallback(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),document.removeEventListener("keydown",this._onKeyDown),clearTimeout(this._showTimeout),clearTimeout(this._hideTimeout)}attributeChangedCallback(e,n,t){n!==t&&this.render()}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get delay(){return parseInt(this.getAttribute("delay")??"200",10)}set delay(e){this.setAttribute("delay",String(e))}get position(){return this.getAttribute("position")\|\|"top"}set position(e){this.setAttribute("position",e)}get text(){return this.getAttribute("text")\|\|""}set text(e){this.setAttribute("text",e)}hide(){clearTimeout(this._showTimeout),this._visible=!1;const e=this.shadowRoot.querySelector(".tooltip");e&&e.classList.remove("visible")}render(){const[e,n]=k(this.color);this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e,n)}</style>\n <slot class="trigger"></slot>\n <div class="tooltip ${this.position}" role="tooltip" part="tooltip">${this.text}</div>\n `}show(){clearTimeout(this._hideTimeout),this._showTimeout=setTimeout(()=>{this._visible=!0;const e=this.shadowRoot.querySelector(".tooltip");if(e){const[,n]=k(this.color);e.style.color=n,e.classList.add("visible")}},this.delay)}_buildStyles(e,n){return`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--font-family-body, sans-serif);\n }\n\n .trigger {\n display: inline-block;\n }\n\n .tooltip {\n position: absolute;\n z-index: var(--component-tooltip-z-index, 7000);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.15s ease, transform 0.15s ease;\n padding: var(--component-tooltip-padding, var(--spacing-x-small, 4px)) var(--component-tooltip-padding-h, var(--spacing-medium, 8px));\n border-radius: var(--component-tooltip-border-radius, var(--radii-small, 4px));\n font-size: var(--font-size-small, 0.8em);\n background: ${e};\n color: ${n};\n line-height: 1.4;\n }\n\n .tooltip.visible {\n opacity: 1;\n transform: scale(1);\n }\n\n .tooltip::after {\n content: "";\n position: absolute;\n border: 5px solid transparent;\n }\n\n .tooltip.top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) scale(0.95);\n margin-bottom: 6px;\n }\n .tooltip.top.visible { transform: translateX(-50%) scale(1); }\n .tooltip.top::after {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: ${e};\n }\n\n .tooltip.bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%) scale(0.95);\n margin-top: 6px;\n }\n .tooltip.bottom.visible { transform: translateX(-50%) scale(1); }\n .tooltip.bottom::after {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: ${e};\n }\n\n .tooltip.left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%) scale(0.95);\n margin-right: 6px;\n }\n .tooltip.left.visible { transform: translateY(-50%) scale(1); }\n .tooltip.left::after {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: ${e};\n }\n\n .tooltip.right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%) scale(0.95);\n margin-left: 6px;\n }\n .tooltip.right.visible { transform: translateY(-50%) scale(1); }\n .tooltip.right::after {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: ${e};\n }\n `}_onFocusIn(){this.show()}_onFocusOut(){this.hide()}_onKeyDown(e){"Escape"===e.key&&this._visible&&this.hide()}_onMouseEnter(){this.show()}_onMouseLeave(){this.hide()}}customElements.get("y-tooltip")\|\|customElements.define("y-tooltip",we);const fe={"blue-light":'/ Themes - Blue Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-active: var(--teal-light-4);\n --secondary-border: var(--teal-light-3);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"blue-dark":'/ Themes - Blue Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-active: var(--neutral-dark-4);\n --base-border: var(--neutral-dark-3);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-dark-1);\n --primary-background-component: var(--blue-dark-0);\n --primary-background-hover: var(--blue-dark-2);\n --primary-background-active: var(--blue-dark-3);\n --primary-border: var(--blue-dark-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-light-7);\n --primary-content-active: var(--blue-light-6);\n --secondary-background-app: var(--teal-dark-1);\n --secondary-background-component: var(--teal-dark-0);\n --secondary-background-hover: var(--teal-dark-2);\n --secondary-background-active: var(--teal-dark-4);\n --secondary-border: var(--teal-dark-3);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-light-7);\n --secondary-content-active: var(--teal-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-active: var(--green-dark-4);\n --success-border: var(--green-dark-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-active: var(--yellow-dark-4);\n --warning-border: var(--yellow-dark-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-active: var(--red-dark-4);\n --error-border: var(--red-dark-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"orange-light":'/ Themes - Orange Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-light-1);\n --primary-background-component: var(--orange-light-0);\n --primary-background-hover: var(--orange-light-2);\n --primary-background-active: var(--orange-light-3);\n --primary-border: var(--orange-light-4);\n --primary-content--: var(--orange--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--orange-dark-7);\n --primary-content-active: var(--orange-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-background-active: var(--amber-light-4);\n --secondary-border: var(--amber-light-3);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"orange-dark":'/ Themes - Orange Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-active: var(--neutral-dark-4);\n --base-border: var(--neutral-dark-3);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-dark-1);\n --primary-background-component: var(--orange-dark-0);\n --primary-background-hover: var(--orange-dark-2);\n --primary-background-active: var(--orange-dark-3);\n --primary-border: var(--orange-dark-4);\n --primary-content--: var(--orange--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--orange-light-7);\n --primary-content-active: var(--orange-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-dark-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-border: var(--amber-dark-3);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-active: var(--green-dark-4);\n --success-border: var(--green-dark-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-active: var(--yellow-dark-4);\n --warning-border: var(--yellow-dark-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-active: var(--red-dark-4);\n --error-border: var(--red-dark-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"green-light":'/ Themes - Green Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--green-light-1);\n --primary-background-component: var(--green-light-0);\n --primary-background-hover: var(--green-light-2);\n --primary-background-active: var(--green-light-3);\n --primary-border: var(--green-light-4);\n --primary-content--: var(--green--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--green-dark-7);\n --primary-content-active: var(--green-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-border: var(--teal-light-3);\n --secondary-background-active: var(--teal-light-4);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"green-dark":'/ Themes - Green Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--green-dark-1);\n --primary-background-component: var(--green-dark-0);\n --primary-background-hover: var(--green-dark-2);\n --primary-background-active: var(--green-dark-3);\n --primary-border: var(--green-dark-4);\n --primary-content--: var(--green--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--green-light-7);\n --primary-content-active: var(--green-light-6);\n --secondary-background-app: var(--teal-dark-1);\n --secondary-background-component: var(--teal-dark-0);\n --secondary-background-hover: var(--teal-dark-2);\n --secondary-border: var(--teal-dark-3);\n --secondary-background-active: var(--teal-dark-4);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-light-7);\n --secondary-content-active: var(--teal-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"red-light":'/ Themes - Red Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--red-light-1);\n --primary-background-component: var(--red-light-0);\n --primary-background-hover: var(--red-light-2);\n --primary-background-active: var(--red-light-3);\n --primary-border: var(--red-light-4);\n --primary-content--: var(--red--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--red-dark-7);\n --primary-content-active: var(--red-dark-6);\n --secondary-background-app: var(--orange-light-1);\n --secondary-background-component: var(--orange-light-0);\n --secondary-background-hover: var(--orange-light-2);\n --secondary-border: var(--orange-light-3);\n --secondary-background-active: var(--orange-light-4);\n --secondary-content--: var(--orange--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--orange-dark-7);\n --secondary-content-active: var(--orange-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"red-dark":'/ Themes - Red Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--red-dark-1);\n --primary-background-component: var(--red-dark-0);\n --primary-background-hover: var(--red-dark-2);\n --primary-background-active: var(--red-dark-3);\n --primary-border: var(--red-dark-4);\n --primary-content--: var(--red--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--red-light-7);\n --primary-content-active: var(--red-light-6);\n --secondary-background-app: var(--orange-dark-1);\n --secondary-background-component: var(--orange-dark-0);\n --secondary-background-hover: var(--orange-dark-2);\n --secondary-border: var(--orange-dark-3);\n --secondary-background-active: var(--orange-dark-4);\n --secondary-content--: var(--orange--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--orange-light-7);\n --secondary-content-active: var(--orange-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"teal-light":'/ Themes - Teal Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--teal-light-1);\n --primary-background-component: var(--teal-light-0);\n --primary-background-hover: var(--teal-light-2);\n --primary-background-active: var(--teal-light-3);\n --primary-border: var(--teal-light-4);\n --primary-content--: var(--teal--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--teal-dark-7);\n --primary-content-active: var(--teal-dark-6);\n --secondary-background-app: var(--blue-light-1);\n --secondary-background-component: var(--blue-light-0);\n --secondary-background-hover: var(--blue-light-2);\n --secondary-border: var(--blue-light-3);\n --secondary-background-active: var(--blue-light-4);\n --secondary-content--: var(--blue--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--blue-dark-7);\n --secondary-content-active: var(--blue-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"teal-dark":'/ Themes - Teal Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--teal-dark-1);\n --primary-background-component: var(--teal-dark-0);\n --primary-background-hover: var(--teal-dark-2);\n --primary-background-active: var(--teal-dark-3);\n --primary-border: var(--teal-dark-4);\n --primary-content--: var(--teal--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--teal-light-7);\n --primary-content-active: var(--teal-light-6);\n --secondary-background-app: var(--blue-dark-1);\n --secondary-background-component: var(--blue-dark-0);\n --secondary-background-hover: var(--blue-dark-2);\n --secondary-border: var(--blue-dark-3);\n --secondary-background-active: var(--blue-dark-4);\n --secondary-content--: var(--blue--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--blue-light-7);\n --secondary-content-active: var(--blue-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"yellow-light":'/ Themes - Yellow Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--yellow-light-1);\n --primary-background-component: var(--yellow-light-0);\n --primary-background-hover: var(--yellow-light-2);\n --primary-background-active: var(--yellow-light-3);\n --primary-border: var(--yellow-light-4);\n --primary-content--: var(--yellow--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--yellow-dark-7);\n --primary-content-active: var(--yellow-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-border: var(--amber-light-3);\n --secondary-background-active: var(--amber-light-4);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"yellow-dark":'/ Themes - Yellow Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--yellow-dark-1);\n --primary-background-component: var(--yellow-dark-0);\n --primary-background-hover: var(--yellow-dark-2);\n --primary-background-active: var(--yellow-dark-3);\n --primary-border: var(--yellow-dark-4);\n --primary-content--: var(--yellow--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--yellow-light-7);\n --primary-content-active: var(--yellow-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-dark-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-border: var(--amber-dark-3);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"indigo-light":'/ Themes - Indigo Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--indigo-light-1);\n --primary-background-component: var(--indigo-light-0);\n --primary-background-hover: var(--indigo-light-2);\n --primary-background-active: var(--indigo-light-3);\n --primary-border: var(--indigo-light-4);\n --primary-content--: var(--indigo--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--indigo-dark-7);\n --primary-content-active: var(--indigo-dark-6);\n --secondary-background-app: var(--purple-light-1);\n --secondary-background-component: var(--purple-light-0);\n --secondary-background-hover: var(--purple-light-2);\n --secondary-border: var(--purple-light-3);\n --secondary-background-active: var(--purple-light-4);\n --secondary-content--: var(--purple--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--purple-dark-7);\n --secondary-content-active: var(--purple-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"indigo-dark":'/ Themes - Indigo Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--indigo-dark-1);\n --primary-background-component: var(--indigo-dark-0);\n --primary-background-hover: var(--indigo-dark-2);\n --primary-background-active: var(--indigo-dark-3);\n --primary-border: var(--indigo-dark-4);\n --primary-content--: var(--indigo--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--indigo-light-7);\n --primary-content-active: var(--indigo-light-6);\n --secondary-background-app: var(--purple-dark-1);\n --secondary-background-component: var(--purple-dark-0);\n --secondary-background-hover: var(--purple-dark-2);\n --secondary-border: var(--purple-dark-3);\n --secondary-background-active: var(--purple-dark-4);\n --secondary-content--: var(--purple--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--purple-light-7);\n --secondary-content-active: var(--purple-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"purple-light":'/ Themes - Purple Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--purple-light-1);\n --primary-background-component: var(--purple-light-0);\n --primary-background-hover: var(--purple-light-2);\n --primary-background-active: var(--purple-light-3);\n --primary-border: var(--purple-light-4);\n --primary-content--: var(--purple--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--purple-dark-7);\n --primary-content-active: var(--purple-dark-6);\n --secondary-background-app: var(--indigo-light-1);\n --secondary-background-component: var(--indigo-light-0);\n --secondary-background-hover: var(--indigo-light-2);\n --secondary-border: var(--indigo-light-3);\n --secondary-background-active: var(--indigo-light-4);\n --secondary-content--: var(--indigo--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--indigo-dark-7);\n --secondary-content-active: var(--indigo-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"purple-dark":'/ Themes - Purple Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--purple-dark-1);\n --primary-background-component: var(--purple-dark-0);\n --primary-background-hover: var(--purple-dark-2);\n --primary-background-active: var(--purple-dark-3);\n --primary-border: var(--purple-dark-4);\n --primary-content--: var(--purple--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--purple-light-7);\n --primary-content-active: var(--purple-light-6);\n --secondary-background-app: var(--indigo-dark-1);\n --secondary-background-component: var(--indigo-dark-0);\n --secondary-background-hover: var(--indigo-dark-2);\n --secondary-border: var(--indigo-dark-3);\n --secondary-background-active: var(--indigo-dark-4);\n --secondary-content--: var(--indigo--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--indigo-light-7);\n --secondary-content-active: var(--indigo-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"pink-light":'/ Themes - Pink Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--pink-light-1);\n --primary-background-component: var(--pink-light-0);\n --primary-background-hover: var(--pink-light-2);\n --primary-background-active: var(--pink-light-3);\n --primary-border: var(--pink-light-4);\n --primary-content--: var(--pink--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--pink-dark-7);\n --primary-content-active: var(--pink-dark-6);\n --secondary-background-app: var(--purple-light-1);\n --secondary-background-component: var(--purple-light-0);\n --secondary-background-hover: var(--purple-light-2);\n --secondary-border: var(--purple-light-3);\n --secondary-background-active: var(--purple-light-4);\n --secondary-content--: var(--purple--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--purple-dark-7);\n --secondary-content-active: var(--purple-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"pink-dark":'/ Themes - Pink Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--pink-dark-1);\n --primary-background-component: var(--pink-dark-0);\n --primary-background-hover: var(--pink-dark-2);\n --primary-background-active: var(--pink-dark-3);\n --primary-border: var(--pink-dark-4);\n --primary-content--: var(--pink--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--pink-light-7);\n --primary-content-active: var(--pink-light-6);\n --secondary-background-app: var(--purple-dark-1);\n --secondary-background-component: var(--purple-dark-0);\n --secondary-background-hover: var(--purple-dark-2);\n --secondary-border: var(--purple-dark-3);\n --secondary-background-active: var(--purple-dark-4);\n --secondary-content--: var(--purple--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--purple-light-7);\n --secondary-content-active: var(--purple-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"brown-light":'/ Themes - Brown Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--brown-light-1);\n --primary-background-component: var(--brown-light-0);\n --primary-background-hover: var(--brown-light-2);\n --primary-background-active: var(--brown-light-3);\n --primary-border: var(--brown-light-4);\n --primary-content--: var(--brown--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--brown-dark-7);\n --primary-content-active: var(--brown-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-background-active: var(--amber-light-4);\n --secondary-border: var(--amber-light-3);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"brown-dark":'/ Themes - Brown Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-active: var(--neutral-dark-4);\n --base-border: var(--neutral-dark-3);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--brown-dark-1);\n --primary-background-component: var(--brown-dark-0);\n --primary-background-hover: var(--brown-dark-2);\n --primary-background-active: var(--brown-dark-3);\n --primary-border: var(--brown-dark-4);\n --primary-content--: var(--brown--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--brown-light-7);\n --primary-content-active: var(--brown-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-dark-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-border: var(--amber-dark-3);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-active: var(--green-dark-4);\n --success-border: var(--green-dark-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-active: var(--yellow-dark-4);\n --warning-border: var(--yellow-dark-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-active: var(--red-dark-4);\n --error-border: var(--red-dark-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"olive-light":'/ Themes - Olive Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--olive-light-1);\n --primary-background-component: var(--olive-light-0);\n --primary-background-hover: var(--olive-light-2);\n --primary-background-active: var(--olive-light-3);\n --primary-border: var(--olive-light-4);\n --primary-content--: var(--olive--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--olive-dark-7);\n --primary-content-active: var(--olive-dark-6);\n --secondary-background-app: var(--brown-light-1);\n --secondary-background-component: var(--brown-light-0);\n --secondary-background-hover: var(--brown-light-2);\n --secondary-background-active: var(--brown-light-4);\n --secondary-border: var(--brown-light-3);\n --secondary-content--: var(--brown--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--brown-dark-7);\n --secondary-content-active: var(--brown-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"olive-dark":'/ Themes - Olive Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-active: var(--neutral-dark-4);\n --base-border: var(--neutral-dark-3);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--olive-dark-1);\n --primary-background-component: var(--olive-dark-0);\n --primary-background-hover: var(--olive-dark-2);\n --primary-background-active: var(--olive-dark-3);\n --primary-border: var(--olive-dark-4);\n --primary-content--: var(--olive--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--olive-light-7);\n --primary-content-active: var(--olive-light-6);\n --secondary-background-app: var(--brown-dark-1);\n --secondary-background-component: var(--brown-dark-0);\n --secondary-background-hover: var(--brown-dark-2);\n --secondary-background-active: var(--brown-dark-4);\n --secondary-border: var(--brown-dark-3);\n --secondary-content--: var(--brown--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--brown-light-7);\n --secondary-content-active: var(--brown-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-active: var(--green-dark-4);\n --success-border: var(--green-dark-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-active: var(--yellow-dark-4);\n --warning-border: var(--yellow-dark-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-active: var(--red-dark-4);\n --error-border: var(--red-dark-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n'};class xe extends HTMLElement{static get observedAttributes(){return["theme","cross-origin"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML="<slot></slot>"}connectedCallback(){this._injectPageStyles(),this._applyTheme()}attributeChangedCallback(e,n,t){n!==t&&this._applyTheme()}get crossOrigin(){return this.hasAttribute("cross-origin")}set crossOrigin(e){e?this.setAttribute("cross-origin",""):this.removeAttribute("cross-origin")}get theme(){return this.getAttribute("theme")\|\|"blue-light"}set theme(e){this.setAttribute("theme",e)}clearThemeProperties(){if(this._themeProps)for(const e of this._themeProps)this.style.removeProperty(e);this._themeProps=[]}async _applyTheme(){const e=await this._resolveThemeCSS();this._buildShadowDOM(e),this._applyVariablesToHost(m+e)}_applyVariablesToHost(e){const n=/--([\w-]+):\s([^;]+);/g;let t;for(this._themeProps=[];null!==(t=n.exec(e));){const e=`--${t[1]}`;let n=t[2].trim();n=n.replace(/url\s$[^)]$/gi,"none"),this.style.setProperty(e,n),this._themeProps.push(e)}}_buildShadowDOM(e){this.shadowRoot.innerHTML="";const n=document.createElement("style");if(n.textContent=`${m}\n :host {\n font-family: var(--font-family-body, sans-serif);\n color: var(--base-content--, inherit);\n font-weight: var(--font-weight-body, 400);\n background: var(--base-background-app, transparent);\n }`,this.shadowRoot.appendChild(n),e){const n=document.createElement("style");n.textContent=e,this.shadowRoot.appendChild(n)}this.shadowRoot.appendChild(document.createElement("slot"))}_injectPageStyles(){if(document.querySelector("[data-yumekit-page-styles]"))return;if(!this.hasAttribute("no-default-font")){const e=document.createElement("link");e.rel="stylesheet",e.href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap",e.setAttribute("data-yumekit-font",""),document.head.appendChild(e)}const e=document.createElement("style");e.setAttribute("data-yumekit-page-styles",""),document.head.appendChild(e)}_stripImportRules(e){return e.replace(/@import\s+[^;]+;/gi,"")}async _resolveThemeCSS(){if(fe[this.theme])return fe[this.theme];try{const e=new URL(this.theme,document.baseURI);if(!this.crossOrigin&&e.origin!==window.location.origin)return console.error(`Blocked cross-origin theme load from ${e.origin}. Add the "cross-origin" attribute to <y-theme> to allow this.`),"";const n=await fetch(e.href),t=n.headers.get("content-type")\|\|"";if(t&&!t.includes("text/css")&&!t.includes("text/plain"))return console.error(`Blocked theme load from ${e.href}: unexpected Content-Type "${t}".`),"";const r=await n.text();return this._stripImportRules(r)}catch(e){return console.error(`Failed to load theme from ${this.theme}:`,e),""}}}if(customElements.get("y-theme")\|\|customElements.define("y-theme",xe),"undefined"!=typeof document&&!document.querySelector("[data-yumekit-vars]")){const e=document.createElement("style");e.setAttribute("data-yumekit-vars",""),e.textContent=m,document.head.appendChild(e)}return e.YumeAppbar=j,e.YumeAvatar=q,e.YumeBadge=N,e.YumeBanner=V,e.YumeBreadcrumbs=F,e.YumeButton=L,e.YumeButtonGroup=O,e.YumeCard=Y,e.YumeCheckbox=W,e.YumeColor=Q,e.YumeColorpicker=X,e.YumeDate=ne,e.YumeDatepicker=ee,e.YumeDock=oe,e.YumeGallery=ae,e.YumeIcon=B,e.YumeInput=G,e.YumePanel=se,e.YumePanelBar=ce,e.YumeProgress=le,e.YumeRadio=pe,e.YumeRating=de,e.YumeSelect=J,e.YumeSlider=he,e.YumeStack=be,e.YumeStepper=ue,e.YumeTable=me,e.YumeTabs=ke,e.YumeTag=ge,e.YumeTextarea=ie,e.YumeTheme=xe,e.YumeToast=ye,e.YumeTooltip=we,e.getIcon=r,e.registerIcon=function(e,t){n.set(e,t)},e.registerIcons=t,e}({});
1	+ var YumeKit=function(e){"use strict";const n=new Map;function t(e){for(const[t,r]of Object.entries(e))n.set(t,r)}function r(e){return n.get(e)\|\|""}var o='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"/>\n <polyline points="19 12 12 19 5 12"/>\n</svg>\n',a='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="19" x2="12" y2="5"/>\n <polyline points="5 12 12 5 19 12"/>\n</svg>\n',i='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="5 13 10 17 19 6"/>\n</svg>\n',s='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="6 9 12 15 18 9"/>\n</svg>\n',c='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">\n <line x1="7" y1="7" x2="17" y2="17"/>\n <line x1="17" y1="7" x2="7" y2="17"/>\n</svg>\n',l='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <circle cx="5" cy="12" r="1.5"/>\n <circle cx="12" cy="12" r="1.5"/>\n <circle cx="19" cy="12" r="1.5"/>\n</svg>\n',d='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <circle cx="12" cy="5" r="1.5"/>\n <circle cx="12" cy="12" r="1.5"/>\n <circle cx="12" cy="19" r="1.5"/>\n</svg>\n',p='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" rx="1" ry="1" fill="currentColor"/></svg>\n';t({accessibility:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="4" r="1.5"/>\n <path d="M7 8h10"/>\n <path d="M12 8v4"/>\n <path d="m8 20 4-8 4 8"/>\n</svg>\n',ai:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 8V4H8"/>\n <rect width="16" height="12" x="4" y="8" rx="2"/>\n <path d="M2 14h2M20 14h2M15 13v2M9 13v2"/>\n</svg>\n',archive:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="21 8 21 21 3 21 3 8"/>\n <rect x="1" y="3" width="22" height="5" rx="1"/>\n <line x1="10" y1="12" x2="14" y2="12"/>\n</svg>\n',"arrow-down":o,"arrow-left":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="19" y1="12" x2="5" y2="12"/>\n <polyline points="12 19 5 12 12 5"/>\n</svg>\n',"arrow-right":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="5" y1="12" x2="19" y2="12"/>\n <polyline points="12 5 19 12 12 19"/>\n</svg>\n',"arrow-up":a,bug:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M8 2l1.88 1.88"/>\n <path d="M14.12 3.88L16 2"/>\n <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/>\n <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6z"/>\n <path d="M12 20v-9"/>\n <path d="M6.53 9C4.6 8.8 3 7.1 3 5"/>\n <path d="M6 13H2"/>\n <path d="M3 21c0-2.1 1.7-3.9 3.8-4"/>\n <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/>\n <path d="M22 13h-4"/>\n <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/>\n</svg>\n',ban:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>\n</svg>\n',bell:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>\n <path d="M13.73 21a2 2 0 0 1-3.46 0"/>\n</svg>\n',bluetooth:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5"/>\n</svg>\n',bolt:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>\n</svg>\n',briefcase:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>\n <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>\n</svg>\n',bookmark:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>\n</svg>\n',calendar:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>\n <line x1="16" y1="2" x2="16" y2="6"/>\n <line x1="8" y1="2" x2="8" y2="6"/>\n <line x1="3" y1="10" x2="21" y2="10"/>\n <rect x="7" y="14" width="3" height="3" rx="0.5"/>\n <rect x="14" y="14" width="3" height="3" rx="0.5"/>\n</svg>\n',campfire:'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M3 21L15 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M21 21L9 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n</svg>\n',chart:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>\n</svg>\n',check:i,"circle-exclamation":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="12" y1="8" x2="12" y2="12"/>\n <line x1="12" y1="16" x2="12.01" y2="16"/>\n</svg>\n',"circle-info":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="12" y1="16" x2="12" y2="12"/>\n <line x1="12" y1="8" x2="12.01" y2="8"/>\n</svg>\n',"circle-question":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>\n <line x1="12" y1="17" x2="12.01" y2="17"/>\n</svg>\n',"chevron-down":s,"chevron-left":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="15 18 9 12 15 6"/>\n</svg>\n',"chevron-right":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="9 18 15 12 9 6"/>\n</svg>\n',"chevron-up":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="18 15 12 9 6 15"/>\n</svg>\n',clock:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <polyline points="12 6 12 12 16 14"/>\n</svg>\n',close:c,cloud:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>\n</svg>\n',code:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="16 18 22 12 16 6"/>\n <polyline points="8 6 2 12 8 18"/>\n</svg>\n',comments:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>\n</svg>\n',"comp-appbar":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="3" width="20" height="5" rx="1.5"/>\n <line x1="4" y1="13" x2="20" y2="13"/>\n <line x1="4" y1="17" x2="15" y2="17"/>\n <line x1="4" y1="21" x2="10" y2="21"/>\n</svg>\n',"comp-avatar":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <circle cx="12" cy="10" r="3"/>\n <path d="M6 20.5c0-3 2.7-5.5 6-5.5s6 2.5 6 5.5"/>\n</svg>\n',"comp-badge":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="6" width="16" height="16" rx="2"/>\n <circle cx="20" cy="5" r="3.5"/>\n</svg>\n',"comp-button":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="10" rx="3"/>\n <line x1="8" y1="12" x2="16" y2="12"/>\n</svg>\n',"comp-card":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="2" width="18" height="20" rx="2"/>\n <line x1="3" y1="8" x2="21" y2="8"/>\n <line x1="7" y1="12" x2="17" y2="12"/>\n <line x1="7" y1="16" x2="13" y2="16"/>\n</svg>\n',"comp-checkbox":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="18" height="18" rx="3"/>\n <polyline points="7 12.5 10.5 16 17 8"/>\n</svg>\n',"comp-date":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="10" rx="2"/>\n <line x1="5" y1="12" x2="11" y2="12"/>\n <rect x="14" y="9" width="6" height="6" rx="1"/>\n <line x1="14" y1="12" x2="20" y2="12"/>\n</svg>\n',"comp-dialog":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="5" width="18" height="14" rx="2"/>\n <line x1="7" y1="9" x2="17" y2="9"/>\n <line x1="7" y1="13" x2="13" y2="13"/>\n</svg>\n',"comp-drawer":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="3" width="20" height="18" rx="2"/>\n <line x1="9" y1="3" x2="9" y2="21"/>\n <line x1="4" y1="8" x2="7" y2="8"/>\n <line x1="4" y1="12" x2="7" y2="12"/>\n</svg>\n',"comp-icon":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 2c0 5.52-4.48 10-10 10 5.52 0 10 4.48 10 10 0-5.52 4.48-10 10-10-5.52 0-10-4.48-10-10z"/>\n</svg>\n',"comp-input":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="6" width="20" height="12" rx="2"/>\n <line x1="6" y1="10" x2="6" y2="14"/>\n</svg>\n',"comp-menu":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="2" width="18" height="20" rx="2"/>\n <line x1="7" y1="7" x2="17" y2="7"/>\n <line x1="7" y1="12" x2="17" y2="12"/>\n <line x1="7" y1="17" x2="17" y2="17"/>\n</svg>\n',"comp-panelbar":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="2" width="20" height="20" rx="2"/>\n <line x1="2" y1="9" x2="22" y2="9"/>\n <line x1="2" y1="16" x2="22" y2="16"/>\n</svg>\n',"comp-progress":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="8" width="20" height="8" rx="4"/>\n <line x1="6" y1="12" x2="13" y2="12" stroke-width="3" stroke-linecap="round"/>\n</svg>\n',"comp-radio":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/>\n</svg>\n',"comp-select":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="10" rx="2"/>\n <line x1="6" y1="12" x2="13" y2="12"/>\n <polyline points="16 10 18 13 20 10"/>\n</svg>\n',"comp-slider":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="2" y1="12" x2="22" y2="12"/>\n <circle cx="15" cy="12" r="4"/>\n</svg>\n',"comp-switch":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="6" width="20" height="12" rx="6"/>\n <circle cx="16" cy="12" r="4"/>\n</svg>\n',"comp-table":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="3" width="20" height="18" rx="2"/>\n <line x1="2" y1="9" x2="22" y2="9"/>\n <line x1="2" y1="15" x2="22" y2="15"/>\n <line x1="10" y1="3" x2="10" y2="21"/>\n</svg>\n',"comp-tabs":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="9" width="20" height="12" rx="2"/>\n <path d="M5 9V6a1.5 1.5 0 0 1 1.5-1.5h5A1.5 1.5 0 0 1 13 6v3"/>\n <line x1="16" y1="6" x2="20" y2="6"/>\n</svg>\n',"comp-tag":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="7" width="20" height="10" rx="5"/>\n <line x1="15" y1="10" x2="17" y2="14"/>\n <line x1="17" y1="10" x2="15" y2="14"/>\n</svg>\n',"comp-theme":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <path d="M12 2a10 10 0 0 1 0 20z" fill="currentColor"/>\n</svg>\n',"comp-toast":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="7" width="18" height="10" rx="2"/>\n <circle cx="8" cy="12" r="2"/>\n <line x1="12" y1="12" x2="18" y2="12"/>\n</svg>\n',"comp-tooltip":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5l-2 4-2-4H5a2 2 0 0 1-2-2z"/>\n</svg>\n',"comp-textarea":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="18" height="18" rx="2"/>\n <line x1="7" y1="8" x2="17" y2="8"/>\n <line x1="7" y1="12" x2="17" y2="12"/>\n <line x1="7" y1="16" x2="13" y2="16"/>\n <line x1="15" y1="19" x2="19" y2="15"/>\n <line x1="18" y1="19" x2="19" y2="18"/>\n</svg>\n',"comp-rating":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03"/>\n <polygon points="12,9 12.71,11.03 14.85,11.07 13.14,12.37 13.76,14.43 12,13.2 10.24,14.43 10.86,12.37 9.15,11.07 11.29,11.03"/>\n <polygon points="19,9 19.71,11.03 21.85,11.07 20.14,12.37 20.76,14.43 19,13.2 17.24,14.43 17.86,12.37 16.15,11.07 18.29,11.03" fill="currentColor" stroke="none"/>\n</svg>\n',compass:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>\n</svg>\n',copy:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>\n <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>\n</svg>\n',diagram:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="6" height="6" rx="1"/>\n <rect x="15" y="3" width="6" height="6" rx="1"/>\n <rect x="9" y="15" width="6" height="6" rx="1"/>\n <line x1="6" y1="9" x2="6" y2="15"/>\n <line x1="6" y1="15" x2="9" y2="15"/>\n <line x1="18" y1="9" x2="18" y2="15"/>\n <line x1="18" y1="15" x2="15" y2="15"/>\n</svg>\n',discord:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028z"/>\n</svg>\n',"down-from-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M3 9V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4"/>\n <polyline points="7 16 12 21 17 16"/>\n <line x1="12" y1="9" x2="12" y2="21"/>\n</svg>\n',"down-to-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>\n <polyline points="7 10 12 15 17 10"/>\n <line x1="12" y1="15" x2="12" y2="3"/>\n</svg>\n',"ellipsis-h":l,"ellipsis-v":d,"ev-charger":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="2" width="12" height="20" rx="2"/>\n <path d="M14 8h2a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2v-7"/>\n <line x1="20" y1="8" x2="22" y2="8"/>\n <polyline points="9 7 7 12 9 12 7 17"/>\n</svg>\n',"expand-down":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="17 13 12 18 7 13"/>\n <polyline points="17 6 12 11 7 6"/>\n</svg>\n',"expand-left":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="11 17 6 12 11 7"/>\n <polyline points="18 17 13 12 18 7"/>\n</svg>\n',"expand-right":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="13 17 18 12 13 7"/>\n <polyline points="6 17 11 12 6 7"/>\n</svg>\n',"expand-up":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="17 11 12 6 7 11"/>\n <polyline points="17 18 12 13 7 18"/>\n</svg>\n',"face-frown":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <path d="M16 16s-1.5-2-4-2-4 2-4 2"/>\n <line x1="9" y1="9" x2="9.01" y2="9"/>\n <line x1="15" y1="9" x2="15.01" y2="9"/>\n</svg>\n',"face-neutral":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="8" y1="14" x2="16" y2="14"/>\n <line x1="9" y1="9" x2="9.01" y2="9"/>\n <line x1="15" y1="9" x2="15.01" y2="9"/>\n</svg>\n',"face-smile":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <path d="M8 14s1.5 2 4 2 4-2 4-2"/>\n <line x1="9" y1="9" x2="9.01" y2="9"/>\n <line x1="15" y1="9" x2="15.01" y2="9"/>\n</svg>\n',fan:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="2"/>\n <path d="M12 10c0-4-2.5-7-5-7s-3 2.5-1 5c1 1.5 3 2 4 2"/>\n <path d="M14 12c4 0 7-2.5 7-5s-2.5-3-5-1c-1.5 1-2 3-2 4"/>\n <path d="M12 14c0 4 2.5 7 5 7s3-2.5 1-5c-1-1.5-3-2-4-2"/>\n <path d="M10 12c-4 0-7 2.5-7 5s2.5 3 5 1c1.5-1 2-3 2-4"/>\n</svg>\n',"fast-back":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="11 19 2 12 11 5 11 19"/>\n <polygon points="22 19 13 12 22 5 22 19"/>\n</svg>\n',"fast-forward":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="13 19 22 12 13 5 13 19"/>\n <polygon points="2 19 11 12 2 5 2 19"/>\n</svg>\n',flower:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="3"/>\n <path d="M12 2a4 4 0 0 1 0 8 4 4 0 0 1 0-8z"/>\n <path d="M12 14a4 4 0 0 1 0 8 4 4 0 0 1 0-8z"/>\n <path d="M2 12a4 4 0 0 1 8 0 4 4 0 0 1-8 0z"/>\n <path d="M14 12a4 4 0 0 1 8 0 4 4 0 0 1-8 0z"/>\n <path d="M4.93 4.93a4 4 0 0 1 5.66 5.66 4 4 0 0 1-5.66-5.66z"/>\n <path d="M13.41 13.41a4 4 0 0 1 5.66 5.66 4 4 0 0 1-5.66-5.66z"/>\n <path d="M13.41 4.93a4 4 0 0 1 5.66 5.66 4 4 0 0 1-5.66-5.66z"/>\n <path d="M4.93 13.41a4 4 0 0 1 5.66 5.66 4 4 0 0 1-5.66-5.66z"/>\n</svg>\n',figma:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/>\n <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/>\n <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>\n <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/>\n <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/>\n</svg>\n',filter:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>\n</svg>\n',flask:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/>\n <path d="M8.5 2h7"/>\n <path d="M7 16h10"/>\n</svg>\n',folder:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z"/>\n</svg>\n',gasoline:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M3 22V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/>\n <line x1="2" y1="22" x2="14" y2="22"/>\n <path d="M13 8h2a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9l-3-4"/>\n <line x1="19" y1="5" x2="21" y2="9"/>\n <rect x="6" y="9" width="6" height="4" rx="1"/>\n</svg>\n',github:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>\n</svg>\n',globe:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="10"/>\n <line x1="2" y1="12" x2="22" y2="12"/>\n <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>\n</svg>\n',heart:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>\n</svg>\n',grid:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="7" height="7" rx="1"/>\n <rect x="14" y="3" width="7" height="7" rx="1"/>\n <rect x="3" y="14" width="7" height="7" rx="1"/>\n <rect x="14" y="14" width="7" height="7" rx="1"/>\n</svg>\n',home:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>\n <polyline points="9 22 9 12 15 12 15 22"/>\n</svg>\n',image:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>\n <circle cx="8.5" cy="8.5" r="1.5"/>\n <polyline points="21 15 16 10 5 21"/>\n</svg>\n',layout:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>\n <line x1="3" y1="9" x2="21" y2="9"/>\n <line x1="9" y1="21" x2="9" y2="9"/>\n</svg>\n',"left-from-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>\n <polyline points="14 7 9 12 14 17"/>\n <line x1="9" y1="12" x2="21" y2="12"/>\n</svg>\n',"left-to-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>\n <polyline points="16 17 21 12 16 7"/>\n <line x1="21" y1="12" x2="9" y2="12"/>\n</svg>\n',link:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>\n <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>\n</svg>\n',"list-bullet":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="5" cy="7" r="1" fill="currentColor" stroke="none"/>\n <circle cx="5" cy="12" r="1" fill="currentColor" stroke="none"/>\n <circle cx="5" cy="17" r="1" fill="currentColor" stroke="none"/>\n <line x1="9" y1="7" x2="20" y2="7"/>\n <line x1="9" y1="12" x2="20" y2="12"/>\n <line x1="9" y1="17" x2="20" y2="17"/>\n</svg>\n',"list-check":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="10" y1="6" x2="21" y2="6"/>\n <line x1="10" y1="12" x2="21" y2="12"/>\n <line x1="10" y1="18" x2="21" y2="18"/>\n <polyline points="3 6 4 7 6 5"/>\n <polyline points="3 12 4 13 6 11"/>\n <polyline points="3 18 4 19 6 17"/>\n</svg>\n',lock:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>\n <path d="M7 11V7a5 5 0 0 1 10 0v4"/>\n</svg>\n',mail:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="4" width="20" height="16" rx="2"/>\n <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>\n</svg>\n',"map-marker":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>\n <circle cx="12" cy="10" r="3"/>\n</svg>\n',menu:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="4" y1="6" x2="20" y2="6"/>\n <line x1="4" y1="12" x2="20" y2="12"/>\n <line x1="4" y1="18" x2="20" y2="18"/>\n</svg>\n',minus:p,monitor:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>\n <line x1="8" y1="21" x2="16" y2="21"/>\n <line x1="12" y1="17" x2="12" y2="21"/>\n</svg>\n',moon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>\n</svg>\n',palette:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="13.5" cy="6.5" r="1.5"/>\n <circle cx="17.5" cy="10.5" r="1.5"/>\n <circle cx="8.5" cy="7.5" r="1.5"/>\n <circle cx="6.5" cy="12.5" r="1.5"/>\n <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>\n</svg>\n',paste:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/>\n <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2"/>\n</svg>\n',pause:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="6" y="4" width="4" height="16" rx="1"/>\n <rect x="14" y="4" width="4" height="16" rx="1"/>\n</svg>\n',"paper-airplane":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="22 2 15 22 11 13 2 9 22 2"/>\n <line x1="22" y1="2" x2="11" y2="13"/>\n</svg>\n',pencil:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>\n <path d="m15 5 4 4"/>\n</svg>\n',play:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="6 3 20 12 6 21 6 3"/>\n</svg>\n',plug:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 22v-4"/>\n <path d="M7 14H5a2 2 0 0 1-2-2v-2h18v2a2 2 0 0 1-2 2h-2"/>\n <rect x="9" y="14" width="6" height="4" rx="1"/>\n <line x1="8" y1="10" x2="8" y2="4"/>\n <line x1="16" y1="10" x2="16" y2="4"/>\n</svg>\n',plus:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"/>\n <line x1="5" y1="12" x2="19" y2="12"/>\n</svg>\n',puzzle:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.707-1.704L4.23 8.77a.979.979 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.627-1.627a2.404 2.404 0 0 1 3.409 0l1.568 1.568c.219.22.556.328.878.29.493-.075.84-.505 1.02-.969a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.968 1.02z"/>\n</svg>\n',redo:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="23 4 23 10 17 10"/>\n <path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"/>\n</svg>\n',"right-from-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>\n <polyline points="8 7 3 12 8 17"/>\n <line x1="3" y1="12" x2="15" y2="12"/>\n</svg>\n',"right-to-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>\n <polyline points="10 17 15 12 10 7"/>\n <line x1="15" y1="12" x2="3" y2="12"/>\n</svg>\n',save:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>\n <polyline points="17 21 17 13 7 13 7 21"/>\n <polyline points="7 3 7 8 15 8"/>\n</svg>\n',scissors:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="6" cy="6" r="3"/>\n <circle cx="6" cy="18" r="3"/>\n <line x1="20" y1="4" x2="8.12" y2="15.88"/>\n <line x1="14.47" y1="14.48" x2="20" y2="20"/>\n <line x1="8.12" y1="8.12" x2="12" y2="12"/>\n</svg>\n',search:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="11" cy="11" r="8"/>\n <path d="m21 21-4.35-4.35"/>\n</svg>\n',settings:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="3"/>\n <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>\n</svg>\n',share:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="18" cy="5" r="3"/>\n <circle cx="6" cy="12" r="3"/>\n <circle cx="18" cy="19" r="3"/>\n <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>\n <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>\n</svg>\n',shield:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>\n</svg>\n',"skip-back":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="19 20 9 12 19 4 19 20"/>\n <line x1="5" y1="19" x2="5" y2="5"/>\n</svg>\n',"skip-forward":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polygon points="5 4 15 12 5 20 5 4"/>\n <line x1="19" y1="5" x2="19" y2="19"/>\n</svg>\n',smartphone:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="6" y="2" width="12" height="20" rx="2" ry="2"/>\n <line x1="12" y1="18" x2="12.01" y2="18"/>\n</svg>\n',stack:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 2L2 7l10 5 10-5-10-5z"/>\n <path d="M2 17l10 5 10-5"/>\n <path d="M2 12l10 5 10-5"/>\n</svg>\n',star:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>\n</svg>\n',stop:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="4" y="4" width="16" height="16" rx="2"/>\n</svg>\n',sun:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="12" cy="12" r="5"/>\n <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>\n</svg>\n',"thumbs-down":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M17 14V2"/>\n <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/>\n</svg>\n',"thumbs-up":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M7 10v12"/>\n <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/>\n</svg>\n',thumbtack:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M12 17v5"/>\n <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z"/>\n</svg>\n',swap:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="16 3 21 3 21 8"/>\n <line x1="4" y1="20" x2="21" y2="3"/>\n <polyline points="21 16 21 21 16 21"/>\n <line x1="15" y1="15" x2="21" y2="21"/>\n <line x1="4" y1="4" x2="9" y2="9"/>\n</svg>\n',tablet:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="4" y="2" width="16" height="20" rx="2" ry="2"/>\n <line x1="12" y1="18" x2="12.01" y2="18"/>\n</svg>\n',tag:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>\n <line x1="7" y1="7" x2="7.01" y2="7"/>\n</svg>\n',"thermometer-high":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>\n <line x1="11.5" y1="6" x2="11.5" y2="17" stroke-width="2.5"/>\n <circle cx="11.5" cy="19" r="2" fill="currentColor" stroke="none"/>\n <line x1="15" y1="5" x2="18" y2="5"/>\n <line x1="15" y1="8" x2="18" y2="8"/>\n <line x1="15" y1="11" x2="18" y2="11"/>\n</svg>\n',"thermometer-low":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>\n <line x1="11.5" y1="13" x2="11.5" y2="17" stroke-width="2.5"/>\n <circle cx="11.5" cy="19" r="2" fill="currentColor" stroke="none"/>\n <line x1="15" y1="5" x2="18" y2="5"/>\n <line x1="15" y1="8" x2="18" y2="8"/>\n <line x1="15" y1="11" x2="18" y2="11"/>\n</svg>\n',tools:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>\n</svg>\n',trash:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="3 6 5 6 21 6"/>\n <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>\n <path d="M10 11v6M14 11v6"/>\n <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>\n</svg>\n',undo:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <polyline points="1 4 1 10 7 10"/>\n <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>\n</svg>\n',unlock:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>\n <path d="M7 11V7a5 5 0 0 1 9.9-1"/>\n</svg>\n',"up-from-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>\n <polyline points="17 8 12 3 7 8"/>\n <line x1="12" y1="3" x2="12" y2="15"/>\n</svg>\n',"up-to-bracket":'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M3 9V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4"/>\n <polyline points="17 14 12 9 7 14"/>\n <line x1="12" y1="9" x2="12" y2="21"/>\n</svg>\n',user:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>\n <circle cx="12" cy="7" r="4"/>\n</svg>\n',users:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>\n <circle cx="9" cy="7" r="4"/>\n <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>\n <path d="M16 3.13a4 4 0 0 1 0 7.75"/>\n</svg>\n',warning:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">\n <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>\n <line x1="12" y1="9" x2="12" y2="13"/>\n <line x1="12" y1="17" x2="12.01" y2="17"/>\n</svg>\n'});var h='/* Colors /\n:root {\n --neutral--: #7f8286ff;\n --neutral-white: #ffffffff;\n --neutral-black: #000000ff;\n --neutral-light-0: #f7f7faff;\n --neutral-light-1: #f0f0f2ff;\n --neutral-light-2: #dfe0e3ff;\n --neutral-light-3: #cacbcfff;\n --neutral-light-4: #bbbdc0ff;\n --neutral-light-5: #acaeb2ff;\n --neutral-light-6: #9d9fa3ff;\n --neutral-light-7: #8e9195ff;\n --neutral-dark-0: #0c0c0dff;\n --neutral-dark-1: #151617ff;\n --neutral-dark-2: #292a2bff;\n --neutral-dark-3: #37383aff;\n --neutral-dark-4: #46474aff;\n --neutral-dark-5: #545659ff;\n --neutral-dark-6: #626568ff;\n --neutral-dark-7: #717377ff;\n --neutral-black-translucent: #0000001f;\n --neutral-white-translucent: #1111111f;\n --red--: #b80421ff;\n --red-light-0: #f2e6e8ff;\n --red-light-1: #ebcacfff;\n --red-light-2: #e4aeb6ff;\n --red-light-3: #dc919dff;\n --red-light-4: #d57585ff;\n --red-light-5: #ce596cff;\n --red-light-6: #c73d53ff;\n --red-light-7: #bf203aff;\n --red-dark-0: #0d0103ff;\n --red-dark-1: #220107ff;\n --red-dark-2: #38020bff;\n --red-dark-3: #4d020eff;\n --red-dark-4: #630312ff;\n --red-dark-5: #780316ff;\n --red-dark-6: #8d031aff;\n --red-dark-7: #a3041dff;\n --red-translucent: #b804211f;\n --orange--: #d13704ff;\n --orange-light-0: #f2e9e6ff;\n --orange-light-1: #eed3caff;\n --orange-light-2: #eabdaeff;\n --orange-light-3: #e6a691ff;\n --orange-light-4: #e29075ff;\n --orange-light-5: #dd7a59ff;\n --orange-light-6: #d9643dff;\n --orange-light-7: #d54d20ff;\n --orange-dark-0: #0d0300ff;\n --orange-dark-1: #260a01ff;\n --orange-dark-2: #3e1001ff;\n --orange-dark-3: #571702ff;\n --orange-dark-4: #6f1d02ff;\n --orange-dark-5: #882403ff;\n --orange-dark-6: #a02a03ff;\n --orange-dark-7: #b93104ff;\n --orange-translucent: #d137041f;\n --amber--: #d16004ff;\n --amber-light-0: #f2ece6ff;\n --amber-light-1: #eedbcaff;\n --amber-light-2: #eac9aeff;\n --amber-light-3: #e6b891ff;\n --amber-light-4: #e2a675ff;\n --amber-light-5: #dd9559ff;\n --amber-light-6: #d9833dff;\n --amber-light-7: #d57220ff;\n --amber-dark-0: #0d0c0cff;\n --amber-dark-1: #26170bff;\n --amber-dark-2: #3e210aff;\n --amber-dark-3: #572c09ff;\n --amber-dark-4: #6f3608ff;\n --amber-dark-5: #884107ff;\n --amber-dark-6: #a04b06ff;\n --amber-dark-7: #b95605ff;\n --amber-translucent: #d160041f;\n --yellow--: #d17f04ff;\n --yellow-light-0: #f2eadfff;\n --yellow-light-1: #eeddc4ff;\n --yellow-light-2: #eacfa8ff;\n --yellow-light-3: #e6c28dff;\n --yellow-light-4: #e2b572ff;\n --yellow-light-5: #dda756ff;\n --yellow-light-6: #d99a3bff;\n --yellow-light-7: #d58c1fff;\n --yellow-dark-0: #0d0c0cff;\n --yellow-dark-1: #261a0bff;\n --yellow-dark-2: #3e290aff;\n --yellow-dark-3: #573709ff;\n --yellow-dark-4: #6f4608ff;\n --yellow-dark-5: #885407ff;\n --yellow-dark-6: #a06206ff;\n --yellow-dark-7: #b97105ff;\n --yellow-translucent: #d17f041f;\n --olive--: #838807ff;\n --olive-light-0: #f0f0e0ff;\n --olive-light-1: #e2e3c5ff;\n --olive-light-2: #d5d6aaff;\n --olive-light-3: #c7c98fff;\n --olive-light-4: #babc74ff;\n --olive-light-5: #acaf58ff;\n --olive-light-6: #9ea23dff;\n --olive-light-7: #919522ff;\n --olive-dark-0: #0d0d0cff;\n --olive-dark-1: #1c1c0bff;\n --olive-dark-2: #2b2c0bff;\n --olive-dark-3: #393b0aff;\n --olive-dark-4: #484b0aff;\n --olive-dark-5: #575a09ff;\n --olive-dark-6: #666908ff;\n --olive-dark-7: #747908ff;\n --olive-translucent: #8388071f;\n --green--: #28a466ff;\n --green-light-0: #e4f4ecff;\n --green-light-1: #cdeadbff;\n --green-light-2: #b5e0cbff;\n --green-light-3: #9ed6baff;\n --green-light-4: #86cca9ff;\n --green-light-5: #6fc298ff;\n --green-light-6: #57b888ff;\n --green-light-7: #40ae77ff;\n --green-dark-0: #030d08ff;\n --green-dark-1: #082014ff;\n --green-dark-2: #0c3320ff;\n --green-dark-3: #11462bff;\n --green-dark-4: #165937ff;\n --green-dark-5: #1a6b43ff;\n --green-dark-6: #1f7e4fff;\n --green-dark-7: #23915aff;\n --green-translucent: #28a4661f;\n --teal--: #06a099ff;\n --teal-light-0: #ebf7f7ff;\n --teal-light-1: #ceecebff;\n --teal-light-2: #b2e1e0ff;\n --teal-light-3: #95d6d4ff;\n --teal-light-4: #79ccc8ff;\n --teal-light-5: #5cc1bcff;\n --teal-light-6: #3fb6b1ff;\n --teal-light-7: #23aba5ff;\n --teal-dark-0: #0c0d0dff;\n --teal-dark-1: #0b1f1fff;\n --teal-dark-2: #0b3230ff;\n --teal-dark-3: #0a4442ff;\n --teal-dark-4: #095753ff;\n --teal-dark-5: #086965ff;\n --teal-dark-6: #087b76ff;\n --teal-dark-7: #078e88ff;\n --teal-translucent: #06a0991f;\n --blue--: #0576ffff;\n --blue-light-0: #ebf5ffff;\n --blue-light-1: #cee5ffff;\n --blue-light-2: #b2d5ffff;\n --blue-light-3: #95c5ffff;\n --blue-light-4: #78b6ffff;\n --blue-light-5: #5ba6ffff;\n --blue-light-6: #3f96ffff;\n --blue-light-7: #2286ffff;\n --blue-dark-0: #0c0c0dff;\n --blue-dark-1: #0b192bff;\n --blue-dark-2: #0a274aff;\n --blue-dark-3: #093468ff;\n --blue-dark-4: #094186ff;\n --blue-dark-5: #084ea4ff;\n --blue-dark-6: #075cc3ff;\n --blue-dark-7: #0669e1ff;\n --blue-translucent: #0576ff1f;\n --indigo--: #7d40ffff;\n --indigo-light-0: #f6f2ffff;\n --indigo-light-1: #e7dcffff;\n --indigo-light-2: #d8c6ffff;\n --indigo-light-3: #c9afffff;\n --indigo-light-4: #ba99ffff;\n --indigo-light-5: #aa83ffff;\n --indigo-light-6: #9b6dffff;\n --indigo-light-7: #8c56ffff;\n --indigo-dark-0: #0d0c0cff;\n --indigo-dark-1: #1b132aff;\n --indigo-dark-2: #291949ff;\n --indigo-dark-3: #372067ff;\n --indigo-dark-4: #452686ff;\n --indigo-dark-5: #532da4ff;\n --indigo-dark-6: #6133c2ff;\n --indigo-dark-7: #6f3ae1ff;\n --indigo-translucent: #7d40ff1f;\n --purple--: #8a05ffff;\n --purple-light-0: #f9f2ffff;\n --purple-light-1: #ebd4ffff;\n --purple-light-2: #ddb7ffff;\n --purple-light-3: #cf99ffff;\n --purple-light-4: #c27cffff;\n --purple-light-5: #b45effff;\n --purple-light-6: #a640ffff;\n --purple-light-7: #9823ffff;\n --purple-dark-0: #0c0c0dff;\n --purple-dark-1: #1c0b2bff;\n --purple-dark-2: #2c0a4aff;\n --purple-dark-3: #3b0968ff;\n --purple-dark-4: #4b0986ff;\n --purple-dark-5: #5b08a4ff;\n --purple-dark-6: #6b07c3ff;\n --purple-dark-7: #7a06e1ff;\n --purple-translucent: #8a05ff1f;\n --pink--: #ff05a8ff;\n --pink-light-0: #f9f2ffff;\n --pink-light-1: #fad4f4ff;\n --pink-light-2: #fbb7e9ff;\n --pink-light-3: #fb99deff;\n --pink-light-4: #fc7cd4ff;\n --pink-light-5: #fd5ec9ff;\n --pink-light-6: #fe40beff;\n --pink-light-7: #fe23b3ff;\n --pink-dark-0: #0c0c0dff;\n --pink-dark-1: #2a0b20ff;\n --pink-dark-2: #490a34ff;\n --pink-dark-3: #670947ff;\n --pink-dark-4: #86095bff;\n --pink-dark-5: #a4086eff;\n --pink-dark-6: #c20781ff;\n --pink-dark-7: #e10695ff;\n --pink-translucent: #ff05a81f;\n --brown--: #ab642eff;\n --brown-light-0: #f2dfdfff;\n --brown-light-1: #e9d0c9ff;\n --brown-light-2: #e0c0b3ff;\n --brown-light-3: #d7b19dff;\n --brown-light-4: #cfa287ff;\n --brown-light-5: #c69270ff;\n --brown-light-6: #bd835aff;\n --brown-light-7: #b47344ff;\n --brown-dark-0: #0d0c0cff;\n --brown-dark-1: #211710ff;\n --brown-dark-2: #352215ff;\n --brown-dark-3: #482d19ff;\n --brown-dark-4: #5c381dff;\n --brown-dark-5: #704321ff;\n --brown-dark-6: #844e26ff;\n --brown-dark-7: #97592aff;\n --brown-translucent: #ab642e1f;\n}\n\n/ Numerics /\n:root {\n --border-none: 0px;\n --border-x-thin: 1px;\n --border-thin: 2px;\n --border-medium: 4px;\n --border-thick: 8px;\n --border-x-thick: 10px;\n --spacing-none: 0px;\n --spacing-4x-small: 1px;\n --spacing-2x-small: 2px;\n --spacing-x-small: 4px;\n --spacing-small: 6px;\n --spacing-medium: 8px;\n --spacing-large: 12px;\n --spacing-x-large: 16px;\n --spacing-2x-large: 24px;\n --spacing-4x-large: 32px;\n --font-size-display-1: 6em;\n --font-size-display-2: 5.5em;\n --font-size-display-3: 4.5em;\n --font-size-display-4: 3.5em;\n --font-size-h1: 2em;\n --font-size-h2: 1.5em;\n --font-size-h3: 1.17em;\n --font-size-h4: 1em;\n --font-size-h5: 0.83em;\n --font-size-paragraph: 1em;\n --font-size-small: 0.8em;\n --font-size-label: 0.83em;\n --font-size-button: 1em;\n --font-size-quote: 1.17em;\n --radii-none: 0px;\n --radii-x-small: 0.125em;\n --radii-small: 0.25em;\n --radii-medium: 0.375em;\n --radii-large: 0.5px;\n --radii-x-large: 1em;\n --radii-full: 9999px;\n --sizing-2x-small: 16px;\n --sizing-x-small: 19px;\n --sizing-small: 32px;\n --sizing-medium: 40px;\n --sizing-large: 56px;\n}\n\n/ Components /\n\n:root {\n / appbar /\n --component-appbar-collapsed-width: 52px;\n --component-appbar-collapsed-width-small: 40px;\n --component-appbar-collapsed-width-medium: 52px;\n --component-appbar-collapsed-width-large: 64px;\n --component-appbar-mobile-breakpoint: 768px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-appbar-z-index: 100;\n\n / avatar /\n --component-avatar-border-radius-circle: var(--radii-full);\n --component-avatar-border-radius-square: var(--radii-small);\n --component-avatar-size-large: var(--sizing-large);\n --component-avatar-size-medium: var(--sizing-medium);\n --component-avatar-size-small: var(--sizing-small);\n\n / badge /\n --component-badge-border-radius-circle: var(--radii-full);\n --component-badge-border-radius-square: var(--radii-small);\n --component-badge-padding-large: var(--spacing-small);\n --component-badge-padding-medium: var(--spacing-x-small);\n --component-badge-padding-small: var(--spacing-2x-small);\n --component-badge-size-large: var(--sizing-medium);\n --component-badge-size-medium: var(--sizing-small);\n --component-badge-size-small: var(--sizing-2x-small);\n\n / button /\n --component-button-border-radius-inner: var(--radii-x-small);\n --component-button-border-radius-outer: var(--radii-small);\n --component-button-border-width: var(--border-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n\n / card /\n --component-card-border-radius-inner: var(--radii-small);\n --component-card-border-radius-outer: var(--radii-medium);\n --component-card-border-width: var(--border-x-thin);\n --component-card-inner-border-width: var(--border-x-thin);\n --component-card-padding-inner: var(--spacing-medium);\n --component-card-padding-outer: var(--spacing-x-large);\n\n / breadcrumbs /\n --component-breadcrumbs-font-size-small: 0.75em;\n --component-breadcrumbs-font-size-medium: 0.875em;\n --component-breadcrumbs-font-size-large: 1em;\n --component-breadcrumbs-gap-small: var(--spacing-2x-small);\n --component-breadcrumbs-gap-medium: var(--spacing-x-small);\n --component-breadcrumbs-gap-large: var(--spacing-small);\n\n / checkbox /\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n\n / color /\n --component-color-swatch-size-small: var(--sizing-small);\n --component-color-swatch-size-medium: var(--sizing-medium);\n --component-color-swatch-size-large: var(--sizing-large);\n --component-color-swatch-border-radius: var(--radii-small);\n --component-color-trigger-gap: var(--spacing-x-small);\n --component-color-popup-offset: 4px;\n --component-color-z-index: 200;\n\n / colorpicker /\n --component-colorpicker-width-small: 200px;\n --component-colorpicker-width: 260px;\n --component-colorpicker-width-large: 320px;\n --component-colorpicker-canvas-height-small: 120px;\n --component-colorpicker-canvas-height: 160px;\n --component-colorpicker-canvas-height-large: 200px;\n --component-colorpicker-slider-height: 12px;\n --component-colorpicker-slider-thumb-size: 16px;\n --component-colorpicker-canvas-handle-size: 16px;\n --component-colorpicker-gap: var(--spacing-medium);\n --component-colorpicker-border-radius: var(--radii-x-small);\n --component-colorpicker-checkerboard-size: 8px;\n\n / dock /\n --component-dock-height-small: 52px;\n --component-dock-height-medium: 60px;\n --component-dock-height-large: 72px;\n --component-dock-border-width: var(--border-x-thin);\n --component-dock-z-index: 8000;\n\n / dialog /\n --component-dialog-border-radius-inner: var(--radii-x-small);\n --component-dialog-border-radius-outer: var(--radii-small);\n --component-dialog-border-width: var(--border-x-thin);\n --component-dialog-inner-border-width: var(--border-x-thin);\n --component-dialog-padding: var(--spacing-medium);\n --component-dialog-z-index: 1000;\n\n / drawer /\n --component-drawer-border-radius: var(--radii-small);\n --component-drawer-border-width: var(--border-x-thin);\n --component-drawer-handle-padding: var(--spacing-x-small);\n --component-drawer-handle-width: var(--spacing-x-small);\n --component-drawer-padding: var(--spacing-medium);\n --component-drawer-z-index: 5000;\n\n / gallery /\n --component-gallery-gap-small: var(--spacing-x-small);\n --component-gallery-gap-medium: var(--spacing-medium);\n --component-gallery-gap-large: var(--spacing-large);\n --component-gallery-columns: 3;\n --component-gallery-aspect-ratio: 1/1;\n --component-gallery-thumbnail-radius: var(--radii-small);\n --component-gallery-thumbnail-overlay-color: var(--neutral-black-translucent);\n --component-gallery-expand-background: rgba(0, 0, 0, 0.9);\n --component-gallery-expand-z-index: 1000;\n --component-gallery-arrow-color: var(--base-content-inverse);\n --component-gallery-arrow-background: var(--neutral-white-translucent);\n\n / icon /\n --component-icon-size-x-large: 28px;\n --component-icon-size-large: 22px;\n --component-icon-size-medium: 18px;\n --component-icon-size-small: 14px;\n --component-icon-size-x-small: 10px;\n\n / inputs /\n --component-inputs-border-radius-inner: var(--radii-x-small);\n --component-inputs-border-radius-outer: var(--radii-small);\n --component-inputs-border-width: var(--border-thin);\n --component-inputs-padding-large: var(--spacing-x-large);\n --component-inputs-padding-medium: var(--spacing-medium);\n --component-inputs-padding-small: var(--spacing-x-small);\n\n / menu /\n --component-menu-border-radius: var(--radii-x-small);\n --component-menu-border-width: var(--border-x-thin);\n --component-menu-padding-horizontal: var(--spacing-small);\n --component-menu-padding-vertical: var(--spacing-x-small);\n --component-menu-z-index: 1001;\n\n / panelbar /\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-indent: var(--spacing-x-large);\n --component-panelbar-padding: var(--spacing-medium);\n\n / progress /\n --component-progress-border-radius-inner: var(--radii-small);\n --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-progress-border-width: var(--border-x-thin);\n --component-progress-padding: var(--spacing-x-small);\n --component-progress-size-large: var(--sizing-large);\n --component-progress-size-medium: var(--sizing-medium);\n --component-progress-size-small: var(--sizing-small);\n\n / radio /\n --component-radio-dot-offset: var(--spacing-2x-small);\n --component-radio-dot-size: var(--spacing-medium);\n --component-radio-size: var(--sizing-2x-small);\n\n / colorpicker /\n --component-colorpicker-width-small: 200px;\n --component-colorpicker-width: 260px;\n --component-colorpicker-width-large: 320px;\n --component-colorpicker-canvas-height-small: 120px;\n --component-colorpicker-canvas-height: 160px;\n --component-colorpicker-canvas-height-large: 200px;\n --component-colorpicker-slider-height: 12px;\n --component-colorpicker-slider-thumb-size: 16px;\n --component-colorpicker-canvas-handle-size: 16px;\n --component-colorpicker-gap: var(--spacing-medium);\n --component-colorpicker-border-radius: var(--radii-x-small);\n --component-colorpicker-checkerboard-size: 8px;\n\n / date / datepicker /\n --component-date-z-index: 200;\n --component-datepicker-border-radius: var(--radii-medium);\n --component-datepicker-border-width: var(--border-x-thin);\n\n / select /\n --component-select-z-index: 6000;\n\n / sidebar /\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n\n / stack /\n --component-stack-mobile-breakpoint: 576px;\n --component-stack-tablet-breakpoint: 768px;\n\n / stepper /\n --component-stepper-indicator-size-small: 28px;\n --component-stepper-indicator-size-medium: 36px;\n --component-stepper-indicator-size-large: 44px;\n --component-stepper-gap-small: var(--spacing-x-small);\n --component-stepper-gap-medium: var(--spacing-small);\n --component-stepper-gap-large: var(--spacing-medium);\n\n / slider /\n --component-slider-border-radius-inner: var(--radii-small);\n --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-slider-border-width: var(--border-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n\n / switch /\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-thin);\n --component-switch-padding: var(--spacing-2x-small);\n\n / tab /\n --component-tab-border-radius-inner: var(--radii-x-small);\n --component-tab-border-radius-outer: var(--radii-small);\n --component-tab-border-width: var(--border-x-thin);\n --component-tab-content-padding: var(--spacing-large);\n --component-tab-gap-large: var(--spacing-large);\n --component-tab-gap-medium: var(--spacing-small);\n --component-tab-gap-small: var(--spacing-2x-small);\n --component-tab-padding-large: var(--spacing-2x-large);\n --component-tab-padding-medium: var(--spacing-large);\n --component-tab-padding-small: var(--spacing-small);\n\n / table /\n --component-table-border-radius: var(--radii-small);\n --component-table-border-width: var(--border-x-thin);\n --component-table-border-width-header: var(--border-thin);\n --component-table-padding-large: var(--spacing-large);\n --component-table-padding-medium: var(--spacing-medium);\n --component-table-padding-small: var(--spacing-small);\n\n / tag /\n --component-tag-border-radius-circle: var(--radii-full);\n --component-tag-border-radius-square: var(--radii-small);\n --component-tag-padding-large: var(--spacing-small);\n --component-tag-padding-medium: var(--spacing-x-small);\n --component-tag-padding-small: var(--spacing-2x-small);\n --component-tag-height-large: 36px;\n --component-tag-height-medium: 26px;\n --component-tag-height-small: 20px;\n --component-tag-size-large: var(--sizing-large);\n --component-tag-size-medium: var(--sizing-medium);\n --component-tag-size-small: var(--sizing-small);\n\n / toast /\n --component-toast-border-radius: var(--radii-small);\n --component-toast-offset: var(--spacing-x-large);\n --component-toast-padding: var(--spacing-medium);\n --component-toast-padding-h: var(--spacing-x-large);\n --component-toast-z-index: 9000;\n\n / tooltip /\n --component-tooltip-border-radius: var(--radii-small);\n --component-tooltip-padding: var(--spacing-x-small);\n --component-tooltip-padding-h: var(--spacing-medium);\n --component-tooltip-z-index: 7000;\n}\n\n/ Default Theme (Blue Light) /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-active: var(--teal-light-4);\n --secondary-border: var(--teal-light-3);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-banner-padding-small: var(--spacing-x-small) var(--spacing-medium);\n --component-banner-padding-medium: var(--spacing-medium) var(--spacing-x-large);\n --component-banner-padding-large: var(--spacing-large) var(--spacing-2x-large);\n --component-banner-gap: var(--spacing-medium);\n --component-banner-icon-size-small: var(--component-icon-size-small);\n --component-banner-icon-size-medium: var(--component-icon-size-medium);\n --component-banner-icon-size-large: var(--component-icon-size-large);\n --component-banner-z-index: 200;\n --component-banner-border-radius: 0;\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-breadcrumbs-color: var(--primary-content--);\n --component-breadcrumbs-color-hover: var(--primary-content-hover);\n --component-breadcrumbs-color-current: var(--base-content--);\n --component-breadcrumbs-separator-color: var(--base-content-lighter);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dock-background: var(--base-background-component);\n --component-dock-color: var(--base-content-lighter);\n --component-dock-color-active: var(--primary-content--);\n --component-dock-border-color: var(--base-border);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-stepper-connector-color: var(--base-border);\n --component-stepper-connector-color-complete: var(--primary-content--);\n --component-stepper-color-pending: var(--base-border);\n --component-stepper-color-active: var(--primary-content--);\n --component-stepper-color-active-text: var(--primary-content-inverse);\n --component-stepper-color-complete: var(--success-content--);\n --component-stepper-color-complete-text: var(--success-content-inverse);\n --component-stepper-color-error: var(--error-content--);\n --component-stepper-color-error-text: var(--error-content-inverse);\n --component-stepper-label-color: var(--base-content--);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n';function b(e){const n=function(e){const n=e.match(/^#([0-9a-f]{3,4}\|[0-9a-f]{6}\|[0-9a-f]{8})$/i);if(n){let e=n[1];return e.length<=4&&(e=e.split("").map(e=>e+e).join("")),{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}const t=e.match(/rgba?\(\s(\d+)\s,\s(\d+)\s,\s(\d+)/);return t?{r:parseInt(t[1],10),g:parseInt(t[2],10),b:parseInt(t[3],10)}:null}(e);return n&&function({r:e,g:n,b:t}){const[r,o,a]=[e,n,t].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126r+.7152o+.0722a}(n)>.179?"var(--neutral-black, #000000)":"var(--neutral-white, #ffffff)"}function u(e,n="base"){const t={base:["var(--base-content--)","var(--base-content-inverse)"],primary:["var(--primary-content--)","var(--primary-content-inverse)"],secondary:["var(--secondary-content--)","var(--secondary-content-inverse)"],success:["var(--success-content--)","var(--success-content-inverse)"],warning:["var(--warning-content--)","var(--warning-content-inverse)"],error:["var(--error-content--)","var(--error-content-inverse)"],help:["var(--help-content--)","var(--help-content-inverse)"]};return t[e]?t[e]:e&&(e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl"))?[e,b(e)]:null===n?[e,"var(--base-content-inverse)"]:t[n]\|\|t.base}function v(e,n,t){return Math.max(n,Math.min(t,e))}function m(e,n,t){e=(e%360+360)%360;const r=(t/=100)(n/=100),o=r(1-Math.abs(e/60%2-1)),a=t-r;let i,s,c;return[i,s,c]=e<60?[r,o,0]:e<120?[o,r,0]:e<180?[0,r,o]:e<240?[0,o,r]:e<300?[o,0,r]:[r,0,o],[Math.round(255(i+a)),Math.round(255(s+a)),Math.round(255(c+a))]}function g(e,n,t){e/=255,n/=255,t/=255;const r=Math.max(e,n,t),o=r-Math.min(e,n,t);let a=0;0!==o&&(a=r===e?((n-t)/o+6)%6:r===n?(t-e)/o+2:(e-n)/o+4,a=60);const i=0===r?0:o/r100,s=100r;return[Math.round(a),Math.round(i),Math.round(s)]}function k(e,n,t){const r=(t/=100)(1-(n/=100)/2),o=0===r\|\|1===r?0:(t-r)/Math.min(r,1-r);return[Math.round(e),Math.round(100o),Math.round(100r)]}function y(e,n,t){const r=(t/=100)+(n/=100)Math.min(t,1-t),o=0===r?0:2(1-t/r);return[Math.round(e),Math.round(100o),Math.round(100r)]}function w(e,n,t){return"#"+[e,n,t].map(e=>e.toString(16).padStart(2,"0")).join("")}function f(e,n,t,r){const o=Math.round(255r);return w(e,n,t)+o.toString(16).padStart(2,"0")}function x(e){if(!e\|\|"string"!=typeof e)return null;if((e=e.trim()).startsWith("#"))return function(e){let n,t,r,o=1;if(3===(e=e.replace(/^#/,"")).length\|\|4===e.length)n=parseInt(e[0]+e[0],16),t=parseInt(e[1]+e[1],16),r=parseInt(e[2]+e[2],16),4===e.length&&(o=parseInt(e[3]+e[3],16)/255);else{if(6!==e.length&&8!==e.length)return null;n=parseInt(e.slice(0,2),16),t=parseInt(e.slice(2,4),16),r=parseInt(e.slice(4,6),16),8===e.length&&(o=parseInt(e.slice(6,8),16)/255)}return[n,t,r].some(isNaN)?null:{r:n,g:t,b:r,a:isNaN(o)?1:o}}(e);const n=e.match(/^rgba?$\s(\d+)\s,\s(\d+)\s,\s(\d+)\s(?:,\s([\d.]+))?\s$$/i);if(n)return{r:v(parseInt(n[1],10),0,255),g:v(parseInt(n[2],10),0,255),b:v(parseInt(n[3],10),0,255),a:void 0!==n[4]?v(parseFloat(n[4]),0,1):1};const t=e.match(/^hsla?$\s(\d+)\s,\s([\d.]+)%?\s,\s([\d.]+)%?\s(?:,\s([\d.]+))?\s$$/i);if(t){const e=v(parseInt(t[1],10),0,360),n=v(parseFloat(t[2]),0,100),r=v(parseFloat(t[3]),0,100),o=void 0!==t[4]?v(parseFloat(t[4]),0,1):1,[a,i,s]=y(e,n,r),[c,l,d]=m(a,i,s);return{r:c,g:l,b:d,a:o}}const r=e.match(/^hsva?$\s(\d+)\s,\s([\d.]+)%?\s,\s([\d.]+)%?\s(?:,\s([\d.]+))?\s$$/i);if(r){const e=v(parseInt(r[1],10),0,360),n=v(parseFloat(r[2]),0,100),t=v(parseFloat(r[3]),0,100),o=void 0!==r[4]?v(parseFloat(r[4]),0,1):1,[a,i,s]=m(e,n,t);return{r:a,g:i,b:s,a:o}}return null}function _(e,n,t){const r=document.createElement(e);if(n)for(const[e,t]of Object.entries(n))null!=t&&!1!==t&&r.setAttribute(e,!0===t?"":t);if(t)for(const e of t)"string"==typeof e?r.appendChild(document.createTextNode(e)):e&&r.appendChild(e);return r}function A(e){if(!e)return;const n=e.querySelector("slot[name='label']");n&&n.addEventListener("slotchange",()=>{const t=n.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));e.style.display=t?"flex":""})}function S(e,n,t,r=document){let o=!1,a=null,i=null;const s=()=>{o=!0,null!=a&&cancelAnimationFrame(a),i&&i.disconnect(),a=null,i=null},c=()=>{if(o)return!0;const e=r.getElementById?r.getElementById(n):document.getElementById(n);return!!e&&(s(),t(e),!0)};return c()?s:e.isConnected?(a=requestAnimationFrame(()=>{if(a=null,c())return;const e=r===document?document.body:r;e&&(i=new MutationObserver(c),i.observe(e,{childList:!0,subtree:!0}))}),s):s}function C(e,n={}){Object.entries(n).forEach(([n,t])=>{const r=e.querySelector("slot"+(n?`[name="${n}"]`:":not([name])")),o=e.querySelector(t);if(r&&o){const e=r.assignedNodes({flatten:!0}).filter(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));o.style.display=e.length>0?"":"none"}})}class z extends HTMLElement{static get observedAttributes(){return["left-icon","right-icon","color","size","style-type","type","disabled","name","value","autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget","aria-label","aria-pressed","aria-hidden","href","target","rel"]}constructor(){super(),this.attachShadow({mode:"open"}),this.selectedValues=new Set,this._init()}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this._init()}attributeChangedCallback(e,n,t){const r=z.observedAttributes;n!==t&&r.includes(e)&&(null===t?this.button.removeAttribute(e):this.button.setAttribute(e,t)),this._init(),["color","size","style-type","disabled"].includes(e)&&this._updateStyles()}get href(){return this.getAttribute("href")}set href(e){null!=e?this.setAttribute("href",e):this.removeAttribute("href")}get target(){return this.getAttribute("target")}set target(e){null!=e?this.setAttribute("target",e):this.removeAttribute("target")}get rel(){return this.getAttribute("rel")}set rel(e){null!=e?this.setAttribute("rel",e):this.removeAttribute("rel")}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get styleType(){return this.getAttribute("style-type")\|\|"outlined"}set styleType(e){this.setAttribute("style-type",e)}get type(){return this.getAttribute("type")\|\|"button"}set type(e){this.setAttribute("type",e)}get value(){return this.hasAttribute("multiple")?Array.from(this.selectedValues).join(","):this.selectedValues.size?Array.from(this.selectedValues)[0]:""}set value(e){this.hasAttribute("multiple")?"string"==typeof e?this.selectedValues=new Set(e.split(",").map(e=>e.trim())):Array.isArray(e)&&(this.selectedValues=new Set(e)):this.selectedValues="string"==typeof e?new Set([e.trim()]):new Set,this.setAttribute("value",e)}setOptions(e){this.setAttribute("options",JSON.stringify(e))}_addEventListeners(){this.button.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{bubbles:!0,composed:!0}))}),this.button.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{bubbles:!0,composed:!0}))}),this.button.addEventListener("keydown",e=>{this.dispatchEvent(new CustomEvent("keydown",{detail:{key:e.key,code:e.code},bubbles:!0,composed:!0}))}),this.button.addEventListener("keyup",e=>{this.dispatchEvent(new CustomEvent("keyup",{detail:{key:e.key,code:e.code},bubbles:!0,composed:!0}))}),this.button.addEventListener("click",e=>{if(this._handleClick(),"submit"===this.getAttribute("type")){const n=this.closest("form");n&&(e.preventDefault(),n.requestSubmit())}})}_applyCustomColorStyles(e,n,t){const r=b(e),o=`color-mix(in srgb, ${e} 85%, black)`,a=`color-mix(in srgb, ${e} 70%, black)`,i=`color-mix(in srgb, ${e} 15%, transparent)`,s={filled:{"--background-color":e,"--border-color":e,"--text-color":r,"--hover-background-color":o,"--hover-border-color":o,"--hover-text-color":r,"--focus-background-color":a,"--focus-border-color":a,"--focus-text-color":r,"--active-background-color":a,"--active-border-color":a,"--active-text-color":r},outlined:{"--background-color":"transparent","--border-color":e,"--text-color":e,"--hover-background-color":i,"--hover-border-color":e,"--hover-text-color":e,"--focus-background-color":i,"--focus-border-color":e,"--focus-text-color":e,"--active-background-color":e,"--active-border-color":e,"--active-text-color":r},flat:{"--background-color":"transparent","--border-color":"transparent","--text-color":e,"--hover-background-color":i,"--hover-border-color":i,"--hover-text-color":e,"--focus-background-color":i,"--focus-border-color":i,"--focus-text-color":e,"--active-background-color":e,"--active-border-color":e,"--active-text-color":r}};Object.entries(s[n]\|\|s.outlined).forEach(([e,n])=>this.button.style.setProperty(e,n)),this._applySizeStyles(t)}_applyFilledInteractionStyles(e){this.button.style.setProperty("--hover-background-color",`var(${e[1]}, #292a2b)`),this.button.style.setProperty("--hover-text-color",`var(${e[6]}, #0c0c0d)`),this.button.style.setProperty("--hover-border-color",`var(${e[1]}, #292a2b)`),this.button.style.setProperty("--focus-background-color",`var(${e[2]}, #46474a)`),this.button.style.setProperty("--focus-text-color",`var(${e[6]}, #0c0c0d)`),this.button.style.setProperty("--focus-border-color",`var(${e[2]}, #46474a)`),this.button.style.setProperty("--active-background-color",`var(${e[3]}, #0c0c0d)`),this.button.style.setProperty("--active-text-color",`var(${e[0]}, #f7f7fa)`),this.button.style.setProperty("--active-border-color",`var(${e[3]}, #0c0c0d)`)}_applyInteractionStyles(e,n){"filled"===n?this._applyFilledInteractionStyles(e):this._applyUnfilledInteractionStyles(e,n)}_applySizeStyles(e){const n={small:"--component-button-padding-small",medium:"--component-button-padding-medium",large:"--component-button-padding-large"},t=n[e]\|\|n.medium;this.button.style.setProperty("--button-padding",`var(${t}, var(--component-button-padding-medium))`),this.button.style.setProperty("--button-gap",`var(${t}, var(--component-button-padding-medium))`);const r={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"};this.button.style.setProperty("--button-min-height",r[e]\|\|"40px"),this.button.style.setProperty("--button-min-width",r[e]\|\|"40px")}_applyStyles(){const e=document.createElement("style");e.textContent='\n :host {\n display: inline-block;\n }\n\n @font-face {\n font-family: "Lexend";\n font-display: swap;\n }\n\n .button {\n box-sizing: border-box;\n display: inline-flex;\n width: 100%;\n min-height: var(--button-min-height, var(--sizing-medium, 40px));\n min-width: var(--button-min-width, var(--sizing-medium, 40px));\n padding: var(--button-padding, var(--component-button-padding-medium));\n gap: var(--button-gap, var(--component-button-padding-medium));\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n border-radius: var(--component-button-border-radius-outer, 4px);\n border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));\n background: var(--background-color, #0c0c0d);\n transition: background-color 0.1s, color 0.1s, border-color 0.1s;\n cursor: pointer;\n color: var(--text-color);\n font-family: var(--font-family-body, Lexend, sans-serif);\n font-size: var(--font-size-button, 1em);\n line-height: 1;\n }\n\n .button {\n text-decoration: none;\n }\n\n .button:disabled,\n .button[aria-disabled="true"] {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .button:hover:not(:disabled),\n .button:hover:not(:disabled) .button-content {\n background: var(--hover-background-color);\n color: var(--hover-text-color);\n border-color: var(--hover-border-color);\n }\n .button:focus:not(:disabled),\n .button:focus:not(:disabled) .button-content {\n background: var(--focus-background-color);\n color: var(--focus-text-color);\n border-color: var(--focus-border-color);\n }\n .button:active:not(:disabled),\n .button:active:not(:disabled) .button-content {\n background: var(--active-background-color);\n color: var(--active-text-color);\n border-color: var(--active-border-color);\n }\n .icon {\n display: flex;\n min-width: 16px;\n min-height: 1em;\n justify-content: center;\n align-items: center;\n }\n .label {\n line-height: inherit;\n min-height: 1em;\n align-items: center;\n }\n ',this.shadowRoot.appendChild(e)}_applyUnfilledInteractionStyles(e,n){const t=`var(${e[0]}, #f7f7fa)`;this.button.style.setProperty("--hover-background-color",`var(${e[4]}, #292a2b)`),this.button.style.setProperty("--hover-text-color",`var(${e[0]}, #f7f7fa)`),this.button.style.setProperty("--focus-background-color",`var(${e[5]}, #46474a)`),this.button.style.setProperty("--focus-text-color",`var(${e[0]}, #f7f7fa)`),this.button.style.setProperty("--active-background-color",`var(${e[0]}, #f7f7fa)`),this.button.style.setProperty("--active-text-color",`var(${e[6]}, #0c0c0d)`),"outlined"===n?(this.button.style.setProperty("--hover-border-color",t),this.button.style.setProperty("--focus-border-color",t),this.button.style.setProperty("--active-border-color",t)):(this.button.style.setProperty("--hover-border-color",`var(${e[4]}, #292a2b)`),this.button.style.setProperty("--focus-border-color",`var(${e[5]}, #46474a)`),this.button.style.setProperty("--active-border-color",`var(${e[0]}, #f7f7fa)`))}_getColorVarsMap(){return{primary:["--primary-content--","--primary-content-hover","--primary-content-active","--primary-background-component","--primary-background-hover","--primary-background-active","--primary-content-inverse"],secondary:["--secondary-content--","--secondary-content-hover","--secondary-content-active","--secondary-background-component","--secondary-background-hover","--secondary-background-active","--secondary-content-inverse"],base:["--base-content--","--base-content-lighter","--base-content-lightest","--base-background-component","--base-background-hover","--base-background-active","--base-content-inverse"],success:["--success-content--","--success-content-hover","--success-content-active","--success-background-component","--success-background-hover","--success-background-active","--success-content-inverse"],error:["--error-content--","--error-content-hover","--error-content-active","--error-background-component","--error-background-hover","--error-background-active","--error-content-inverse"],warning:["--warning-content--","--warning-content-hover","--warning-content-active","--warning-background-component","--warning-background-hover","--warning-background-active","--warning-content-inverse"],help:["--help-content--","--help-content-hover","--help-content-active","--help-background-component","--help-background-hover","--help-background-active","--help-content-inverse"]}}_handleClick(){const e={},n=this.getAttribute("data-event");!this.hasAttribute("disabled")&&n&&(Array.from(this.attributes).filter(e=>e.name.startsWith("data-detail-")).forEach(n=>{const t=n.name.replace("data-detail-","");e[t]=n.value}),this.dispatchEvent(new CustomEvent(n,{detail:e,bubbles:!0,composed:!0})))}_init(){this._applyStyles(),this._render(),this._proxyNativeOnClick(),this._addEventListeners()}_manageSlotVisibility(e,n){const t=e?this.shadowRoot.querySelector(`slot[name="${e}"]`):this.shadowRoot.querySelector("slot:not([name])"),r=this.shadowRoot.querySelector(n),o=()=>{const e=t.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));r.style.display=e?"inline-flex":"none"};o(),t.addEventListener("slotchange",o)}_proxyNativeOnClick(){try{Object.defineProperty(this,"onclick",{get:()=>this.button.onclick,set:e=>{this.button.onclick=e},configurable:!0,enumerable:!0})}catch(e){console.warn("Could not redefine onclick:",e)}}_render(){const e=this.hasAttribute("href"),n="A"===this.button?.tagName;this.button&&e!==n&&(this.button.remove(),this.button=null),this.button\|\|(this.button=e?document.createElement("a"):document.createElement("button"),this.button.classList.add("button"),this.button.setAttribute("part","button"),e\|\|(this.button.setAttribute("role","button"),this.button.setAttribute("tabindex","0")),this.shadowRoot.appendChild(this.button)),this._updateButtonAttributes();const t=this.hasAttribute("disabled");e?t?(this.button.removeAttribute("href"),this.button.setAttribute("aria-disabled","true"),this.button.setAttribute("tabindex","-1")):(this.button.setAttribute("href",this.getAttribute("href")),this.button.setAttribute("aria-disabled","false"),this.button.removeAttribute("tabindex")):t?(this.button.setAttribute("disabled",""),this.button.setAttribute("aria-disabled","true")):(this.button.removeAttribute("disabled"),this.button.setAttribute("aria-disabled","false")),this.button.innerHTML='\n <span class="icon left-icon" part="left-icon"><slot name="left-icon"></slot></span>\n <span class="label" part="label"><slot></slot></span>\n <span class="icon right-icon" part="right-icon"><slot name="right-icon"></slot></span>\n ',this._manageSlotVisibility("left-icon",".left-icon"),this._manageSlotVisibility("right-icon",".right-icon"),this._manageSlotVisibility("",".label")}_updateButtonAttributes(){const e="A"===this.button?.tagName,n=new Set(["type","disabled","name","value","autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget"]),t=new Set(["href","target","rel"]);z.observedAttributes.forEach(r=>{e&&n.has(r)\|\|e&&"href"===r\|\|!e&&t.has(r)\|\|(this.hasAttribute(r)?this.button.setAttribute(r,this.getAttribute(r)):this.button.removeAttribute(r))})}_updateStyles(){const{color:e,size:n,styleType:t}=this,r=this._getColorVarsMap();if(!r[e]&&e&&(e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl")))return void this._applyCustomColorStyles(e,t,n);const o=r[e],a={outlined:{"--background-color":`var(${o[3]}, #0c0c0d)`,"--border-color":`var(${o[0]}, #f7f7fa)`,"--text-color":`var(${o[0]}, #f7f7fa)`},filled:{"--background-color":`var(${o[0]}, #f7f7fa)`,"--border-color":`var(${o[0]}, #f7f7fa)`,"--text-color":`var(${o[6]}, #0c0c0d)`},flat:{"--background-color":`var(${o[3]},#0c0c0d)`,"--border-color":`var(${o[3]},#0c0c0d)`,"--text-color":`var(${o[0]},#f7f7fa)`}},i=a[t]\|\|a.outlined;Object.entries(i).forEach(([e,n])=>{this.button.style.setProperty(e,n)}),this._applyInteractionStyles(o,t),this._applySizeStyles(n)}}customElements.get("y-button")\|\|customElements.define("y-button",z);const E=new Set(["svg","g","path","circle","ellipse","rect","line","polyline","polygon","text","tspan","defs","clippath","mask","lineargradient","radialgradient","stop","symbol","title","desc","metadata"]),$=new Set(["viewbox","xmlns","fill","stroke","stroke-width","stroke-linecap","stroke-linejoin","stroke-dasharray","stroke-dashoffset","stroke-miterlimit","stroke-opacity","fill-opacity","fill-rule","clip-rule","opacity","d","cx","cy","r","rx","ry","x","x1","x2","y","y1","y2","width","height","points","transform","id","class","clip-path","mask","offset","stop-color","stop-opacity","gradient-units","gradienttransform","gradientunits","spreadmethod","patternunits","patterntransform","font-size","font-family","font-weight","text-anchor","dominant-baseline","alignment-baseline","dx","dy","rotate","textlength","lengthadjust","display","visibility","color","vector-effect"]);const M=new Map;function L(e){if(M.has(e))return M.get(e);const n=function(e){if(!e)return"";const n=(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg");if(!n)return"";const t=e=>{for(const n of[...e.children])if(E.has(n.tagName.toLowerCase())){for(const e of[...n.attributes])$.has(e.name.toLowerCase())\|\|n.removeAttribute(e.name);t(n)}else n.remove()};for(const e of[...n.attributes])$.has(e.name.toLowerCase())\|\|n.removeAttribute(e.name);return t(n),n.outerHTML}(r(e));return M.set(e,n),n}class D extends HTMLElement{static get observedAttributes(){return["name","size","color","label","weight"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get color(){return this.getAttribute("color")\|\|""}set color(e){e?this.setAttribute("color",e):this.removeAttribute("color")}get label(){return this.getAttribute("label")\|\|""}set label(e){e?this.setAttribute("label",e):this.removeAttribute("label")}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get weight(){return this.getAttribute("weight")\|\|"regular"}set weight(e){e?this.setAttribute("weight",e):this.removeAttribute("weight")}render(){const e=L(this.name),n=this._getSize(this.size),t=this.color?this._getColor(this.color):"inherit",r=this._getWeight(this.weight);this._updateAria(),this.shadowRoot.innerHTML=`\n <style>\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${n};\n height: ${n};\n color: ${t};\n line-height: 0;\n }\n .icon-wrapper svg {\n width: 100%;\n height: 100%;\n }\n ${this._getWeightCSS(r)}\n </style>\n <span class="icon-wrapper" part="icon">${e}</span>\n `}_getColor(e){const n={base:"var(--base-content--, #f7f7fa)",primary:"var(--primary-content--, #0576ff)",secondary:"var(--secondary-content--, #04b8b8)",success:"var(--success-content--, #2dba73)",warning:"var(--warning-content--, #d17f04)",error:"var(--error-content--, #b80421)",help:"var(--help-content--, #5405ff)"};return n[e]?n[e]:e&&(e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl"))?e:n.base}_getSize(e){const n={"x-small":"var(--component-icon-size-x-small, 10px)",small:"var(--component-icon-size-small, 14px)",medium:"var(--component-icon-size-medium, 18px)",large:"var(--component-icon-size-large, 22px)","x-large":"var(--component-icon-size-x-large, 28px)"};return n[e]\|\|n.medium}_getWeight(e){return{"x-thin":"1",thin:"1.5",regular:"2",thick:"2.5","x-thick":"3"}[e]\|\|""}_getWeightCSS(e){return e?`.icon-wrapper svg,\n .icon-wrapper svg { stroke-width: ${e} !important; }`:""}_updateAria(){this.label?(this.setAttribute("role","img"),this.setAttribute("aria-label",this.label),this.removeAttribute("aria-hidden")):(this.setAttribute("aria-hidden","true"),this.removeAttribute("role"),this.removeAttribute("aria-label"))}}customElements.get("y-icon")\|\|customElements.define("y-icon",D);class R extends HTMLElement{static get observedAttributes(){return["items","anchor","visible","direction","size","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onAnchorClick=this._onAnchorClick.bind(this),this._onDocumentClick=this._onDocumentClick.bind(this),this._onScrollOrResize=this._onScrollOrResize.bind(this),this._isReady=!1,this._slottedHandlers=new Map}connectedCallback(){this.hasAttribute("items")\|\|(this.items=[]),this._setupAnchor(),this.render(),document.addEventListener("click",this._onDocumentClick),window.addEventListener("scroll",this._onScrollOrResize,!0),window.addEventListener("resize",this._onScrollOrResize),this.style.position="fixed",this.style.zIndex="1000",this.style.display="none",this.visible&&this._updatePosition(),this._isReady=!0}disconnectedCallback(){this._teardownAnchor(),this._teardownSlottedItems(),document.removeEventListener("click",this._onDocumentClick),window.removeEventListener("scroll",this._onScrollOrResize,!0),window.removeEventListener("resize",this._onScrollOrResize)}attributeChangedCallback(e,n,t){n!==t&&("items"!==e&&"size"!==e\|\|this.render(),"anchor"===e&&(this._teardownAnchor(),this._setupAnchor()),"visible"!==e&&"direction"!==e\|\|this._updatePosition(),"visible"===e&&this._isReady&&this.dispatchEvent(new CustomEvent(this.visible?"open":"close",{bubbles:!0,composed:!0})))}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get direction(){return this.getAttribute("direction")\|\|"down"}set direction(e){this.setAttribute("direction",e)}get history(){return this.getAttribute("history")}set history(e){null!=e?this.setAttribute("history",e):this.removeAttribute("history")}get items(){try{return JSON.parse(this.getAttribute("items"))\|\|[]}catch{return[]}}set items(e){this.setAttribute("items",Array.isArray(e)?JSON.stringify(e):e??"[]")}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",["small","medium","large"].includes(e)?e:"medium")}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}render(){this.shadowRoot.innerHTML="";const e=_("style",{},[this._buildStyles()]),n=this._createMenuList(this.items);n.classList.add("menu"),n.setAttribute("role","menu"),n.setAttribute("part","menu");const t=_("slot");t.addEventListener("slotchange",()=>this._processSlottedItems()),n.appendChild(t),this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(n),this._processSlottedItems()}_activateItem(e){if(e.children?.length>0)return;this._dispatchSelect({value:e.value??e.text,item:e});const n=e.href??e.url;n&&this._navigateTo(n),this.visible=!1}_activateSlottedItem(e){this._dispatchSelect({value:e.dataset.value??e.textContent.trim(),element:e}),this.visible=!1}_buildStyles(){return`\n .menu,\n .submenu {\n background: var(--component-menu-background, #0c0c0d);\n border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);\n border-radius: var(--component-menu-border-radius, 4px);\n box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));\n min-width: 150px;\n display: flex;\n flex-direction: column;\n }\n\n .menuitem,\n ::slotted(:not([slot])) {\n cursor: pointer;\n padding: ${`var(--component-button-padding-${this.size}, 0.5rem)`};\n white-space: nowrap;\n color: var(--component-menu-color, #f7f7fa);\n font-size: var(--font-size-button, 1em);\n box-sizing: border-box;\n }\n\n .menuitem {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n }\n\n .menuitem:hover,\n ::slotted(:not([slot]):hover) {\n background: var(--component-menu-hover-background, #292a2b);\n }\n\n .menuitem.selected {\n background: var(--component-menu-selected-background);\n color: var(--component-menu-selected-color);\n }\n\n .menuitem.selected:hover {\n background: var(--component-menu-selected-background);\n }\n\n .submenu {\n position: absolute;\n top: 0;\n left: 100%;\n display: none;\n z-index: var(--component-menu-z-index, 1001);\n }\n\n .menuitem:hover > .submenu {\n display: flex;\n }\n\n .submenu-indicator {\n display: inline-flex;\n align-items: center;\n margin-left: 0.5rem;\n opacity: 0.6;\n }\n\n .item-content {\n flex: 1;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n `}static _closeAll(e){document.querySelectorAll("y-menu").forEach(n=>{n!==e&&n.visible&&(n.visible=!1)})}_computeMenuOffset(e,n,t,r,o){if("right"===e){let e=n.top,a=n.right;return a+t.width>r&&(a=n.left-t.width),e+t.height>o&&(e=n.top-t.height),{top:e,left:a}}if("up"===e){let e=n.top-t.height,o=n.left;return e<0&&(e=n.bottom),o+t.width>r&&(o=r-t.width-10),{top:e,left:o}}if("left"===e){let e=n.top,r=n.left-t.width;return r<0&&(r=n.right),e+t.height>o&&(e=n.top-t.height),{top:e,left:r}}let a=n.bottom,i=n.left;return a+t.height>o&&(a=n.top-t.height),i+t.width>r&&(i=r-t.width-10),{top:a,left:i}}_createItemContent(e){const n=_("span",{class:"item-content"});if(e.icon)n.appendChild(_("y-icon",{name:e.icon,size:this.size}));else if(e["icon-template"]){R._warnTemplateFieldDeprecated();const t=this._findTemplate(e["icon-template"]);t&&n.appendChild(t.content.cloneNode(!0))}if(e.template){R._warnTemplateFieldDeprecated();const t=this._findTemplate(e.template);t?n.appendChild(t.content.cloneNode(!0)):n.append(e.text??"")}else n.append(e.text??"");if(!e.slot)return n;const t=_("slot",{name:e.slot});return t.appendChild(n),t}_createMenuItem(e){const n=!!e.selected,t=n?"menuitem selected":"menuitem",r=_("div",{class:t,role:"menuitem",part:t,"aria-current":n?"true":"false",tabindex:"0"});if(r.appendChild(this._createItemContent(e)),e.url&&!e.href&&R._warnUrlDeprecated(),r.addEventListener("click",()=>this._activateItem(e)),e.children?.length>0){r.appendChild(this._createSubmenuIndicator());const n=this._createMenuList(e.children);n.classList.add("submenu"),n.setAttribute("role","menu"),r.appendChild(n)}return r}_createMenuList(e){const n=_("div");return e.forEach(e=>n.appendChild(this._createMenuItem(e))),n}_createSubmenuIndicator(){return _("span",{class:"submenu-indicator"},[_("y-icon",{name:"chevron-right",size:this.size})])}_dispatchSelect(e){this.dispatchEvent(new CustomEvent("select",{detail:e,bubbles:!0,composed:!0}))}_findTemplate(e){return this.querySelector(`template[slot="${e}"]`)}_navigateTo(e){const n=new CustomEvent("navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:{href:e}});this.dispatchEvent(n)&&("false"===this.getAttribute("history")?window.location.href=e:(history.pushState({},"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))))}_onAnchorClick(e){e.stopPropagation(),this.visible\|\|R._closeAll(this),this.visible=!this.visible}_onDocumentClick(e){const n=e.composedPath();this._anchorEl&&n.includes(this._anchorEl)\|\|n.includes(this)\|\|(this.visible=!1)}_onScrollOrResize(){this.visible&&this._updatePosition()}_processSlottedItems(){const e=this.shadowRoot.querySelector(".menu > slot");if(!e)return;const n=new Set(e.assignedElements());for(const[e,t]of this._slottedHandlers)n.has(e)\|\|(e.removeEventListener("click",t),this._slottedHandlers.delete(e));for(const e of n){if(this._slottedHandlers.has(e))continue;e.hasAttribute("role")\|\|e.setAttribute("role","menuitem"),e.tabIndex<0&&(e.tabIndex=0);const n=()=>this._activateSlottedItem(e);e.addEventListener("click",n),this._slottedHandlers.set(e,n)}}_setupAnchor(){const e=this.anchor;if(!e)return;const n=this.getRootNode();this._anchorResolveDispose=S(this,e,e=>{this._anchorEl=e,e.addEventListener("click",this._onAnchorClick)},n&&n.getElementById?n:document)}_teardownAnchor(){this._anchorResolveDispose&&(this._anchorResolveDispose(),this._anchorResolveDispose=null),this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}_teardownSlottedItems(){for(const[e,n]of this._slottedHandlers)e.removeEventListener("click",n);this._slottedHandlers.clear()}_updatePosition(){if(!this.visible\|\|!this._anchorEl)return void(this.style.display="none");const e=this._anchorEl.getBoundingClientRect();this.style.visibility="hidden",this.style.display="block";const n=this.getBoundingClientRect();this.style.visibility="";const t=window.innerWidth,r=window.innerHeight,{top:o,left:a}=this._computeMenuOffset(this.direction,e,n,t,r),i=Math.max(0,Math.min(o,r-n.height)),s=Math.max(0,Math.min(a,t-n.width));this.style.top=`${i}px`,this.style.left=`${s}px`,this.style.display="block"}static _warnTemplateFieldDeprecated(){R._templateFieldDeprecationWarned\|\|(R._templateFieldDeprecationWarned=!0,console.warn("[y-menu] item.template and item['icon-template'] are deprecated; use item.icon (icon name) and item.slot (named slot) instead. Support will be removed in a future release."))}static _warnUrlDeprecated(){R._urlDeprecationWarned\|\|(R._urlDeprecationWarned=!0,console.warn("[y-menu] item.url is deprecated; use item.href instead. Support for item.url will be removed in a future release."))}}customElements.get("y-menu")\|\|customElements.define("y-menu",R);const T={small:{padding:"var(--spacing-x-small, 4px)",collapsedWidth:"var(--component-appbar-collapsed-width-small, 40px)",bodyGap:"2px",buttonSize:"small",iconSize:"small"},medium:{padding:"var(--spacing-small, 6px)",collapsedWidth:"var(--component-appbar-collapsed-width-medium, 52px)",bodyGap:"3px",buttonSize:"medium",iconSize:"medium"},large:{padding:"var(--spacing-medium, 8px)",collapsedWidth:"var(--component-appbar-collapsed-width-large, 64px)",bodyGap:"4px",buttonSize:"large",iconSize:"large"}};class I extends HTMLElement{static get observedAttributes(){return["orientation","collapsed","items","size","menu-direction","sticky","mobile-breakpoint","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onCollapseClick=this._onCollapseClick.bind(this),this._onMediaChange=this._onMediaChange.bind(this),this._idCounter=0,this._mql=null,this._isMobile=!1,this._mobileOutsideClick=null}connectedCallback(){this._setupMediaQuery(),this.render()}disconnectedCallback(){this._teardownMediaQuery(),this._teardownMobileOutsideClick()}attributeChangedCallback(e,n,t){n!==t&&("mobile-breakpoint"!==e&&"orientation"!==e\|\|this._setupMediaQuery(),this.render())}get collapsed(){return this.hasAttribute("collapsed")}set collapsed(e){e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed")}get history(){return this.getAttribute("history")}set history(e){null!=e?this.setAttribute("history",e):this.removeAttribute("history")}get items(){try{return JSON.parse(this.getAttribute("items"))\|\|[]}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get menuDirection(){return this.getAttribute("menu-direction")\|\|""}set menuDirection(e){e?this.setAttribute("menu-direction",e):this.removeAttribute("menu-direction")}get mobile(){return this._isMobile}get mobileBreakpoint(){return this.getAttribute("mobile-breakpoint")\|\|""}set mobileBreakpoint(e){e?this.setAttribute("mobile-breakpoint",e):this.removeAttribute("mobile-breakpoint")}get orientation(){return this.getAttribute("orientation")\|\|"vertical"}set orientation(e){this.setAttribute("orientation",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get sticky(){const e=this.getAttribute("sticky");return!!["start","end"].includes(e)&&e}set sticky(e){"start"===e\|\|"end"===e?this.setAttribute("sticky",e):this.removeAttribute("sticky")}render(){this._isMobile?this._renderMobile():this._renderDesktop()}toggle(){this.collapsed=!this.collapsed}_buildBody(e,n,t){const r=_("div",{class:"appbar-body",part:"body"});return this.items.forEach(o=>{r.appendChild(this._buildNavItem(o,e,n,t))}),r.appendChild(_("slot",{})),r}_buildCollapseButton(e,n){const t=_("y-icon",{slot:"left-icon",name:n?"expand-right":"expand-left",size:e.iconSize}),r=n?[t]:[t,"Collapse"],o=_("y-button",{class:"collapse-btn",color:"base","style-type":"flat",size:e.buttonSize,"aria-label":n?"Expand sidebar":"Collapse sidebar"},r);return o.addEventListener("click",this._onCollapseClick),o}_buildDesktopBar(e,n,t,r){const o=["appbar",n?"vertical":"horizontal"];t&&o.push("collapsed");const a=_("div",{class:o.join(" "),role:"navigation"}),i=`calc(${e.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) - 2 * var(--component-button-border-width, 1px))`;return a.style.setProperty("--_appbar-padding",e.padding),a.style.setProperty("--_appbar-collapsed-width",e.collapsedWidth),a.style.setProperty("--_appbar-body-gap",e.bodyGap),a.style.setProperty("--_button-padding",`var(--component-button-padding-${e.buttonSize})`),a.style.setProperty("--_icon-col-width",i),a.appendChild(this._buildHeader()),a.appendChild(this._buildBody(e,t,r)),a.appendChild(this._buildFooter(e,n,t)),a}_buildDesktopStyles(){return'\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n color: var(--component-appbar-color, #f7f7fa);\n }\n\n :host([sticky]) {\n position: sticky;\n z-index: var(--component-appbar-z-index, 100);\n }\n :host([orientation="vertical"][sticky="start"]),\n :host(:not([orientation])[sticky="start"]) {\n left: 0;\n top: 0;\n height: 100%;\n }\n :host([orientation="vertical"][sticky="end"]),\n :host(:not([orientation])[sticky="end"]) {\n right: 0;\n top: 0;\n height: 100%;\n }\n :host([orientation="horizontal"][sticky="start"]) {\n top: 0;\n left: 0;\n width: 100%;\n }\n :host([orientation="horizontal"][sticky="end"]) {\n bottom: 0;\n left: 0;\n width: 100%;\n }\n\n :host([sticky]) .appbar {\n border-radius: 0;\n border: none;\n }\n :host([orientation="vertical"][sticky="start"]) .appbar,\n :host(:not([orientation])[sticky="start"]) .appbar {\n border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n :host([orientation="vertical"][sticky="end"]) .appbar,\n :host(:not([orientation])[sticky="end"]) .appbar {\n border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n :host([orientation="horizontal"][sticky="start"]) .appbar {\n border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n :host([orientation="horizontal"][sticky="end"]) .appbar {\n border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n\n .appbar {\n display: flex;\n background: var(--component-appbar-background, #0c0c0d);\n border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));\n overflow: visible;\n padding: var(--_appbar-padding);\n box-sizing: border-box;\n }\n\n .appbar.vertical {\n flex-direction: column;\n width: var(--component-appbar-width, 240px);\n height: 100%;\n transition: width 0.2s ease;\n }\n .appbar.vertical.collapsed {\n width: var(--_appbar-collapsed-width);\n }\n\n .appbar.horizontal {\n flex-direction: row;\n width: 100%;\n height: auto;\n align-items: center;\n }\n\n .appbar-header,\n .appbar-body,\n .appbar-footer {\n flex-shrink: 0;\n }\n\n .appbar-body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n gap: var(--_appbar-body-gap);\n }\n\n .appbar.vertical .appbar-body {\n flex-direction: column;\n }\n .appbar.horizontal .appbar-body {\n flex-direction: row;\n overflow-y: hidden;\n overflow-x: auto;\n align-items: center;\n }\n\n .appbar.vertical .appbar-header {\n border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n padding-bottom: var(--_appbar-padding);\n margin-bottom: var(--_appbar-padding);\n }\n .appbar.vertical .appbar-footer {\n border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n padding-top: var(--_appbar-padding);\n margin-top: var(--_appbar-padding);\n }\n\n .appbar.horizontal .appbar-header {\n border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n padding: var(--_appbar-padding);\n padding-right: var(--spacing-x-large, 16px);\n margin-right: var(--_appbar-padding);\n }\n .appbar.horizontal .appbar-footer {\n border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n padding-left: var(--_appbar-padding);\n margin-left: var(--_appbar-padding);\n }\n\n .header-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-small, 8px);\n overflow: hidden;\n }\n .appbar.vertical .header-content {\n padding: var(--_button-padding) 0;\n gap: var(--_button-padding);\n }\n .logo-wrapper {\n width: var(--_icon-col-width);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n }\n .appbar.vertical .logo-wrapper {\n margin-left: var(--component-button-border-width, 2px);\n }\n\n .header-title {\n font-weight: bold;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--font-size-label, 0.9em);\n }\n .appbar.vertical.collapsed .header-title {\n display: none;\n }\n\n .nav-item {\n display: flex;\n align-items: center;\n position: relative;\n }\n .appbar.vertical .nav-item {\n width: 100%;\n }\n .appbar.vertical .nav-item y-button {\n display: block;\n width: 100%;\n }\n .appbar.vertical .nav-item y-button::part(button),\n .appbar.vertical .appbar-footer y-button::part(button) {\n width: 100%;\n justify-content: flex-start;\n padding-left: 0;\n padding-right: 0;\n }\n\n /* Fixed-width icon column — matches collapsed inner width so icons stay centred across states /\n .appbar.vertical .nav-item y-button::part(left-icon),\n .appbar.vertical .appbar-footer y-button::part(left-icon) {\n width: var(--_icon-col-width);\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .appbar.vertical .nav-item y-button::part(right-icon) {\n margin-left: auto;\n }\n\n .appbar.vertical.collapsed .nav-item y-button::part(button),\n .appbar.vertical.collapsed .appbar-footer y-button::part(button) {\n min-width: 0;\n }\n .appbar.vertical.collapsed .nav-item y-button::part(label),\n .appbar.vertical.collapsed .appbar-footer y-button::part(label) {\n display: none;\n }\n .appbar.vertical.collapsed .nav-item y-button::part(right-icon),\n .appbar.vertical.collapsed .appbar-footer y-button::part(right-icon) {\n display: none;\n }\n\n .appbar-footer {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n .appbar.horizontal .appbar-footer {\n flex-direction: row;\n align-items: center;\n }\n .appbar.vertical .appbar-footer y-button {\n display: block;\n width: 100%;\n }\n\n .appbar.vertical.collapsed .appbar-header,\n .appbar.vertical.collapsed .appbar-body,\n .appbar.vertical.collapsed .appbar-footer {\n align-items: center;\n }\n\n ::slotted() {\n display: block;\n }\n .appbar.vertical ::slotted(:not([slot])) {\n width: 100%;\n }\n .appbar.horizontal ::slotted(:not([slot])) {\n display: inline-flex;\n align-items: center;\n }\n .appbar.vertical.collapsed ::slotted(:not([slot])) {\n width: var(--_icon-col-width);\n overflow: hidden;\n }\n span[slot="left-icon"] svg,\n span[slot="right-icon"] svg {\n width: var(--component-icon-size-large, 1.25em);\n height: var(--component-icon-size-large, 1.25em);\n }\n '}_buildFooter(e,n,t){const r=_("div",{class:"appbar-footer",part:"footer"});return r.appendChild(_("slot",{name:"footer"})),n&&r.appendChild(this._buildCollapseButton(e,t)),r}_buildHeader(){const e=_("div",{class:"logo-wrapper"},[_("slot",{name:"logo"})]),n=_("div",{class:"header-title"},[_("slot",{name:"title"})]),t=_("div",{class:"header-content"},[e,n]);return _("div",{class:"appbar-header",part:"header"},[t,_("slot",{name:"header"})])}_buildItemIcon(e,n){if(e.trim().startsWith("<")){const n=_("span",{slot:"left-icon",part:"icon"});return n.innerHTML=e,n}return _("y-icon",{slot:"left-icon",part:"icon",name:e,size:n.iconSize})}_buildMobileBar(e){const n=_("div",{class:"appbar",role:"navigation"});return n.style.setProperty("--_appbar-padding",e.padding),n.appendChild(this._buildMobileStart(e)),n.appendChild(this._buildMobileCenter()),n.appendChild(this._buildMobileEnd()),n}_buildMobileCenter(){return _("div",{class:"mobile-center"},[_("slot",{name:"logo"}),_("slot",{name:"title"})])}_buildMobileEnd(){return _("div",{class:"mobile-end",part:"footer"},[_("slot",{name:"footer"})])}_buildMobileStart(e){const n=this._uid("appbar-mobile-menu"),t=this._uid("appbar-mobile-panel"),r=_("y-button",{id:n,color:"base","style-type":"flat",size:e.buttonSize,"aria-label":"Open menu","aria-controls":t,"aria-expanded":"false"},[_("y-icon",{slot:"left-icon",name:"menu",size:e.iconSize})]),o=_("div",{id:t,class:"mobile-panel"});this.items.forEach(n=>{o.appendChild(this._buildNavItem(n,e,!1,"down"))}),o.appendChild(_("slot",{}));const a=()=>{o.classList.remove("open"),r.setAttribute("aria-expanded","false")};return r.addEventListener("click",e=>{e.stopPropagation();const n=o.classList.toggle("open");r.setAttribute("aria-expanded",n?"true":"false")}),o.addEventListener("navigate",a),this._mobileOutsideClick=e=>{e.composedPath().includes(this)\|\|a()},document.addEventListener("pointerdown",this._mobileOutsideClick),_("div",{class:"mobile-start"},[r,o])}_buildMobileStyles(){return'\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n color: var(--component-appbar-color, #f7f7fa);\n }\n\n :host([sticky]),\n :host([sticky="start"]),\n :host([sticky="end"]) {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: var(--component-appbar-z-index, 100);\n }\n\n :host([sticky]) .appbar {\n border-radius: 0;\n border: none;\n border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n }\n\n .appbar {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: var(--component-appbar-background, #0c0c0d);\n border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));\n overflow: visible;\n padding: var(--_appbar-padding);\n box-sizing: border-box;\n width: 100%;\n height: auto;\n }\n\n .mobile-start {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n position: relative;\n }\n\n .mobile-center {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n }\n\n .mobile-end {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .mobile-panel {\n position: absolute;\n top: 100%;\n left: 0;\n margin-top: 4px;\n background: var(--component-appbar-background, #0c0c0d);\n border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);\n border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));\n padding: var(--_appbar-padding);\n display: none;\n flex-direction: column;\n gap: 2px;\n min-width: 180px;\n z-index: var(--component-appbar-z-index, 100);\n }\n .mobile-panel.open {\n display: flex;\n }\n .mobile-panel .nav-item {\n display: flex;\n width: 100%;\n }\n .mobile-panel .nav-item y-button {\n display: block;\n width: 100%;\n }\n .mobile-panel .nav-item y-button::part(button) {\n width: 100%;\n justify-content: flex-start;\n }\n .mobile-panel ::slotted(:not([slot])) {\n width: 100%;\n }\n\n ::slotted() {\n display: block;\n }\n span[slot="left-icon"] svg,\n span[slot="right-icon"] svg {\n width: var(--component-icon-size-large, 1.25em);\n height: var(--component-icon-size-large, 1.25em);\n }\n '}_buildNavItem(e,n,t,r){const o=e.children?.length>0,a=e.text&&!t,i=o&&!t,s=this._uid("appbar-btn"),c=_("y-button",{id:s,color:this._isItemActive(e)?"primary":"base","style-type":"flat",size:n.buttonSize});e.icon&&c.appendChild(this._buildItemIcon(e.icon,n)),a&&c.appendChild(document.createTextNode(e.text)),i&&c.appendChild(_("y-icon",{slot:"right-icon",name:`chevron-${r}`,size:n.iconSize})),e.href&&!o&&c.addEventListener("click",()=>this._navigateTo(e.href));const l=_("div",{class:"nav-item"});if(e.slot){const n=_("slot",{name:e.slot});n.appendChild(c),l.appendChild(n)}else l.appendChild(c);if(o){const t=_("y-menu",{anchor:s,direction:r,size:n.buttonSize});t.items=e.children,l.appendChild(t)}return l}_getBreakpointPx(){const e=this.mobileBreakpoint;if(e){const n=parseInt(e,10);if(!isNaN(n)&&n>0)return n}const n=getComputedStyle(document.documentElement).getPropertyValue("--component-appbar-mobile-breakpoint").trim();if(n){const e=parseInt(n,10);if(!isNaN(e)&&e>0)return e}return 768}_initRender(){this._teardownMobileOutsideClick(),this.shadowRoot.innerHTML="",this._idCounter=0}_isItemActive(e){if(e.selected)return!0;if(!e.href)return!1;const n=window.location,t=n.pathname+n.search+n.hash;return e.href===t\|\|e.href===n.href}_navigateTo(e){const n=new CustomEvent("navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:{href:e}});this.dispatchEvent(n)&&("false"===this.getAttribute("history")?window.location.href=e:(history.pushState({},"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))))}_onCollapseClick(){this.toggle()}_onMediaChange(e){this._isMobile=e.matches,this.render()}_renderDesktop(){this._initRender();const e="vertical"===this.orientation,n=this.collapsed&&e,t=T[this.size]\|\|T.medium,r=this.menuDirection\|\|(e?"right":"down"),o=_("style",{},[this._buildDesktopStyles()]),a=this._buildDesktopBar(t,e,n,r);this.shadowRoot.appendChild(o),this.shadowRoot.appendChild(a)}_renderMobile(){this._initRender();const e=T[this.size]\|\|T.medium,n=_("style",{},[this._buildMobileStyles()]),t=this._buildMobileBar(e);this.shadowRoot.appendChild(n),this.shadowRoot.appendChild(t)}_setupMediaQuery(){if(this._teardownMediaQuery(),"horizontal"!==this.orientation)return void(this._isMobile=!1);const e=this._getBreakpointPx();this._mql=window.matchMedia(`(max-width: ${e}px)`),this._isMobile=this._mql.matches,this._mql.addEventListener("change",this._onMediaChange)}_teardownMediaQuery(){this._mql&&(this._mql.removeEventListener("change",this._onMediaChange),this._mql=null)}_teardownMobileOutsideClick(){this._mobileOutsideClick&&(document.removeEventListener("pointerdown",this._mobileOutsideClick),this._mobileOutsideClick=null)}_uid(e){return`${e}-${this._idCounter++}`}}customElements.get("y-appbar")\|\|customElements.define("y-appbar",I);class B extends HTMLElement{static get observedAttributes(){return["src","alt","size","shape","color"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get alt(){return this.getAttribute("alt")\|\|"AN"}set alt(e){this.setAttribute("alt",e)}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get shape(){return this.getAttribute("shape")\|\|"circle"}set shape(e){this.setAttribute("shape",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get src(){return this.getAttribute("src")}set src(e){e?this.setAttribute("src",e):this.removeAttribute("src")}render(){const e=this._getDimensions(this.size),n=`var(--component-avatar-border-radius-${this.shape}, 9999px)`,[t,r]=u(this.color);this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet(e,n,t,r)],this.shadowRoot.innerHTML=this.src?`<img src="${this.src}" alt="${this.alt}" part="avatar" />`:`<div class="avatar" part="avatar"><h5>${this._getInitials(this.alt)}</h5></div>`}_buildStyleSheet(e,n,t,r){const o=new CSSStyleSheet,a=this.src?`\n :host {\n display: inline-block;\n height: ${e};\n min-width: ${e};\n }\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ${n};\n }\n `:`\n :host {\n display: inline-block;\n width: ${e};\n height: ${e};\n min-width: ${e};\n font-family: var(--font-family-header, "Lexend"), sans-serif;\n text-transform: uppercase;\n }\n .avatar {\n width: 100%;\n height: 100%;\n border-radius: ${n};\n background-color: ${t};\n color: ${r};\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .avatar h5 {\n margin: 0;\n font-size: calc(${e} 0.5);\n }\n `;return o.replaceSync(a),o}_getDimensions(e){const n={small:"var(--component-avatar-size-small, 27px)",medium:"var(--component-avatar-size-medium, 35px)",large:"var(--component-avatar-size-large, 51px)"};return n[e]\|\|n.medium}_getInitials(e){const n=e.trim().split(/\s+/);return n.length>=2?n[0].charAt(0)+n[1].charAt(0):e.substring(0,2)}}customElements.get("y-avatar")\|\|customElements.define("y-avatar",B);class P extends HTMLElement{static get observedAttributes(){return["color","icon","position","sticky","dismissable","dismissed","size"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this._bindSlotListeners()}attributeChangedCallback(e,n,t){n!==t&&("dismissed"!==e?(this.render(),this._bindSlotListeners()):this._applyDismissedState())}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get icon(){return this.getAttribute("icon")\|\|""}set icon(e){e?this.setAttribute("icon",e):this.removeAttribute("icon")}get position(){return this.getAttribute("position")\|\|"push"}set position(e){this.setAttribute("position",e)}get sticky(){return this.hasAttribute("sticky")}set sticky(e){e?this.setAttribute("sticky",""):this.removeAttribute("sticky")}get dismissable(){return this.hasAttribute("dismissable")}set dismissable(e){e?this.setAttribute("dismissable",""):this.removeAttribute("dismissable")}get dismissed(){return this.hasAttribute("dismissed")}set dismissed(e){e?this.setAttribute("dismissed",""):this.removeAttribute("dismissed")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}dismiss(){const e=new CustomEvent("dismiss",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e)&&(this.dismissed=!0)}show(){this.dismissed=!1}render(){const e=this.color,n=this.size,t=this.icon;this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e,n)}</style>\n <div class="banner" part="banner" role="region" aria-label="${this._getAriaLabel(e)}">\n <span class="icon-wrapper" part="icon">\n <slot name="icon">${t?`<y-icon name="${t}" size="${this._getIconSize(n)}"></y-icon>`:""}</slot>\n </span>\n <span class="content" part="content">\n <slot></slot>\n </span>\n <span class="action-wrapper" part="action">\n <slot name="action"></slot>\n </span>\n ${this.dismissable?`<y-button class="close-btn" part="close-btn" aria-label="Dismiss banner" color="${e}" style-type="filled" size="${n}"><y-icon name="close" size="${this._getIconSize(n)}"></y-icon></y-button>`:""}\n </div>\n `,this.dismissable&&this.shadowRoot.querySelector(".close-btn").addEventListener("click",()=>this.dismiss()),this._applyDismissedState()}_bindSlotListeners(){const e=this.shadowRoot.querySelector("slot[name='icon']"),n=this.shadowRoot.querySelector("slot[name='action']");e&&e.addEventListener("slotchange",()=>this._updateSlotVisibility()),n&&n.addEventListener("slotchange",()=>this._updateSlotVisibility()),this._updateSlotVisibility()}_updateSlotVisibility(){const e=this.shadowRoot.querySelector("slot[name='icon']"),n=this.shadowRoot.querySelector("slot[name='action']"),t=this.shadowRoot.querySelector(".icon-wrapper"),r=this.shadowRoot.querySelector(".action-wrapper");if(e&&t){const n=e.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim())),r=!!this.icon;t.style.display=n\|\|r?"":"none"}if(n&&r){const e=n.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));r.style.display=e?"":"none"}}_applyDismissedState(){this.dismissed?this.setAttribute("hidden",""):this.removeAttribute("hidden")}_getAriaLabel(e){return{base:"Banner",primary:"Information banner",secondary:"Information banner",success:"Success banner",error:"Error banner",warning:"Warning banner",help:"Help banner"}[e]\|\|"Banner"}_getIconSize(e){return{small:"small",medium:"medium",large:"large"}[e]\|\|"medium"}_getColorVars(e){const n={base:["--base-content--","--base-content-inverse"],primary:["--primary-content--","--primary-content-inverse"],secondary:["--secondary-content--","--secondary-content-inverse"],success:["--success-content--","--success-content-inverse"],error:["--error-content--","--error-content-inverse"],warning:["--warning-content--","--warning-content-inverse"],help:["--help-content--","--help-content-inverse"]};return n[e]\|\|n.base}_buildStyles(e,n){const[t,r]=this._getColorVars(e),o="overlap"===this.position,a=this.sticky,i={small:{padding:"var(--component-banner-padding-small, var(--spacing-x-small) var(--spacing-medium))",fontSize:"var(--font-size-small, 0.8em)",iconSize:"var(--component-banner-icon-size-small, 14px)"},medium:{padding:"var(--component-banner-padding-medium, var(--spacing-medium) var(--spacing-x-large))",fontSize:"var(--font-size-label, 0.83em)",iconSize:"var(--component-banner-icon-size-medium, 18px)"},large:{padding:"var(--component-banner-padding-large, var(--spacing-large) var(--spacing-2x-large))",fontSize:"var(--font-size-paragraph, 1em)",iconSize:"var(--component-banner-icon-size-large, 22px)"}},s=i[n]\|\|i.medium;let c="";return o&&a?c="\n :host {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: var(--component-banner-z-index, 200);\n }\n ":o&&(c="\n :host {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: var(--component-banner-z-index, 200);\n }\n "),`\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${c}\n\n .banner {\n display: flex;\n align-items: center;\n gap: var(--component-banner-gap, var(--spacing-medium, 8px));\n padding: ${s.padding};\n background: var(${t});\n color: var(${r});\n font-size: ${s.fontSize};\n line-height: 1.4;\n border-radius: var(--component-banner-border-radius, 0);\n box-sizing: border-box;\n width: 100%;\n }\n\n .icon-wrapper {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: inherit;\n }\n\n .icon-wrapper y-icon {\n color: inherit;\n --component-icon-size-small: ${s.iconSize};\n --component-icon-size-medium: ${s.iconSize};\n --component-icon-size-large: ${s.iconSize};\n }\n\n .content {\n flex: 1;\n min-width: 0;\n }\n\n .action-wrapper {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n `}}customElements.get("y-banner")\|\|customElements.define("y-banner",P);class H extends HTMLElement{static get observedAttributes(){return["value","position","alignment","color","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onSlotChange=this._onSlotChange.bind(this),this.render()}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get alignment(){return this.getAttribute("alignment")\|\|"right"}set alignment(e){this.setAttribute("alignment",e)}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get position(){return this.getAttribute("position")\|\|"top"}set position(e){this.setAttribute("position",e)}get size(){return this.getAttribute("size")\|\|"small"}set size(e){this.setAttribute("size",e)}get value(){return this.getAttribute("value")\|\|""}set value(e){this.setAttribute("value",e)}render(){const[e,n]=this._getBadgeColors(this.color),{fontSize:t,padding:r,minSize:o}=this._getSizeAttributes(this.size),a=this._getBadgePosition(this.position,this.alignment);this.shadowRoot.innerHTML=`\n <style>\n :host {\n display: inline-flex;\n align-items: center;\n }\n .root {\n position: static;\n display: inline-flex;\n align-items: center;\n }\n .root.has-target {\n position: relative;\n }\n .badge {\n position: static;\n background: ${e};\n color: ${n};\n font-size: ${t};\n font-weight: bold;\n padding: ${r};\n border-radius: var(--component-badge-border-radius-circle, 9999px);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-body, sans-serif);\n min-width: ${o};\n height: ${o};\n z-index: 20;\n }\n .root.has-target .badge {\n position: absolute;\n ${a}\n }\n ::slotted() {\n position: relative;\n display: inline-block;\n }\n </style>\n <div class="root" part="root">\n <slot></slot>\n <div class="badge" part="badge">${this.value}</div>\n </div>\n `;this.shadowRoot.querySelector("slot").addEventListener("slotchange",this._onSlotChange),this._onSlotChange()}_getBadgeColors(e){return{primary:["var(--primary-content--)","var(--primary-content-inverse)"],secondary:["var(--secondary-content--)","var(--secondary-content-inverse)"],base:["var(--base-content--)","var(--base-content-inverse)"],success:["var(--success-content--)","var(--success-content-inverse)"],warning:["var(--warning-content--)","var(--warning-content-inverse)"],error:["var(--error-content--)","var(--error-content-inverse)"],help:["var(--help-content--)","var(--help-content-inverse)"]}[e]\|\|[e,b(e)]}_getBadgePosition(e,n){const t="var(--spacing-small, 6px)";return`${"top"===e?`top: calc(${t} -1);`:`bottom: calc(${t} * -1);`} ${"right"===n?`right: calc(${t} * -1);`:`left: calc(${t} * -1);`}`}_getSizeAttributes(e){const n={small:{fontSize:"var(--font-size-small, 0.8em)",padding:"var(--component-badge-padding-small)",minSize:"var(--component-badge-size-small)"},medium:{fontSize:"var(--font-size-label, 0.83em)",padding:"var(--component-badge-padding-medium)",minSize:"var(--component-badge-size-medium)"},large:{fontSize:"var(--font-size-paragraph, 1em)",padding:"var(--component-badge-padding-large)",minSize:"var(--component-badge-size-large)"}};return n[e]\|\|n.small}_onSlotChange(){const e=this.shadowRoot.querySelector("slot"),n=this.shadowRoot.querySelector(".root");if(!e\|\|!n)return;const t=e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE);n.classList.toggle("has-target",t)}}customElements.get("y-badge")\|\|customElements.define("y-badge",H);class j extends HTMLElement{static get observedAttributes(){return["items","max-items","separator","size","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._expanded=!1}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&("items"!==e&&"max-items"!==e\|\|(this._expanded=!1),this.render())}get history(){return this.getAttribute("history")}set history(e){null==e?this.removeAttribute("history"):this.setAttribute("history",e)}get items(){try{return JSON.parse(this.getAttribute("items")\|\|"[]")}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get maxItems(){const e=parseInt(this.getAttribute("max-items"),10);return Number.isFinite(e)&&e>=2?e:null}set maxItems(e){null==e?this.removeAttribute("max-items"):this.setAttribute("max-items",String(e))}get separator(){return this.getAttribute("separator")}set separator(e){null==e\|\|""===e?this.removeAttribute("separator"):this.setAttribute("separator",e)}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",e)}render(){const e=this.items;this.shadowRoot.innerHTML="";const n=document.createElement("style");if(n.textContent=this._buildStyles(),this.shadowRoot.appendChild(n),!e.length)return;const t=_("nav",{class:"breadcrumbs",part:"breadcrumbs","aria-label":"Breadcrumb"}),r=_("ol",{class:"list",part:"list"});this._getVisibleItems(e).forEach(n=>{"expand"===n.type?(r.appendChild(this._buildExpandItem()),r.appendChild(this._buildSeparatorItem())):(r.appendChild(this._buildItem(n.item,n.index,e)),n.index<e.length-1&&r.appendChild(this._buildSeparatorItem()))}),t.appendChild(r),this.shadowRoot.appendChild(t)}_buildExpandItem(){const e=_("button",{class:"expand-btn",part:"expand-btn","aria-label":"Show all breadcrumbs"},["…"]);e.addEventListener("click",()=>this._onExpand());return _("li",{class:"item expand",role:"presentation"},[e])}_buildHostStyles(){return"\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n }\n\n :host([hidden]) {\n display: none !important;\n }\n "}_buildItem(e,n,t){const r=n===t.length-1,o=["item"];r&&o.push("item--current");const a=_("li",{class:"item "+(r?"current":""),part:o.join(" ")});let i;r\|\|!e.href?i=_("span",{class:"link current-text",part:"link","aria-current":!!r&&"page"},[e.text]):(i=_("a",{class:"link",part:"link",href:e.href},[e.text]),i.addEventListener("click",n=>{0!==n.button\|\|n.metaKey\|\|n.ctrlKey\|\|n.shiftKey\|\|n.altKey\|\|this._onNavigate(n,e.href)}));const s=_("slot",{name:`${n}-item`});return e.icon&&s.appendChild(_("y-icon",{name:e.icon,size:this._getIconSize(),class:"item-icon"})),s.appendChild(i),a.appendChild(s),a}_buildItemStyles(){const e=`var(--component-breadcrumbs-font-size-${this.size}, ${this._getDefaultFontSize()})`;return`\n .list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: ${`var(--component-breadcrumbs-gap-${this.size}, ${this._getDefaultGap()})`};\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: ${e};\n }\n\n .item-icon {\n display: inline-flex;\n align-items: center;\n }\n\n .link {\n color: var(--component-breadcrumbs-color, var(--primary-content--, #1976d2));\n text-decoration: none;\n transition: color 0.15s ease;\n cursor: pointer;\n }\n\n .link:hover {\n color: var(--component-breadcrumbs-color-hover, var(--primary-content-hover, #1565c0));\n text-decoration: underline;\n }\n\n .link:focus-visible {\n outline: 2px solid var(--primary-content--, #1976d2);\n outline-offset: 2px;\n border-radius: var(--radii-small, 2px);\n }\n\n .current-text {\n color: var(--component-breadcrumbs-color-current, var(--base-content--, #333));\n cursor: default;\n text-decoration: none;\n }\n\n .current-text:hover {\n color: var(--component-breadcrumbs-color-current, var(--base-content--, #333));\n text-decoration: none;\n }\n\n .expand-btn {\n background: none;\n border: none;\n cursor: pointer;\n padding: 2px 4px;\n font-family: inherit;\n font-size: ${e};\n color: var(--component-breadcrumbs-color, var(--primary-content--, #1976d2));\n border-radius: var(--radii-small, 4px);\n line-height: 1;\n }\n\n .expand-btn:hover {\n color: var(--component-breadcrumbs-color-hover, var(--primary-content-hover, #1565c0));\n text-decoration: underline;\n }\n\n .expand-btn:focus-visible {\n outline: 2px solid var(--primary-content--, #1976d2);\n outline-offset: 2px;\n }\n `}_buildSeparatorItem(){const e=this.querySelector('[slot="separator"]');let n;return e?(n=e.cloneNode(!0),n.removeAttribute("slot")):n=this.separator?document.createTextNode(this.separator):_("y-icon",{name:"chevron-right",size:"x-small"}),_("li",{class:"separator",part:"separator",role:"presentation","aria-hidden":"true"},[n])}_buildSeparatorStyles(){return"\n .separator {\n display: flex;\n align-items: center;\n color: var(--component-breadcrumbs-separator-color, var(--base-content-lighter, #999));\n user-select: none;\n }\n "}_buildStyles(){return[this._buildHostStyles(),this._buildItemStyles(),this._buildSeparatorStyles()].join("\n")}_getDefaultFontSize(){const e={small:"0.75em",medium:"0.875em",large:"1em"};return e[this.size]\|\|e.medium}_getDefaultGap(){const e={small:"4px",medium:"8px",large:"12px"};return e[this.size]\|\|e.medium}_getIconSize(){return{small:"x-small",medium:"small",large:"medium"}[this.size]\|\|"small"}_getVisibleItems(e){const n=this.maxItems;if(!(n&&e.length>n&&!this._expanded))return e.map((e,n)=>({type:"item",item:e,index:n}));const t={type:"item",item:e[0],index:0},r=n-1;return[t,{type:"expand"},...e.slice(-r).map((n,t)=>({type:"item",item:n,index:e.length-r+t}))]}_onExpand(){this._expanded=!0,this.render(),this.dispatchEvent(new CustomEvent("expand",{bubbles:!0,composed:!0}))}_onNavigate(e,n){const t=new CustomEvent("navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:{href:n}});this.dispatchEvent(t)?(e.preventDefault(),"false"!==this.getAttribute("history")?(window.history.pushState({},"",n),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))):window.location.href=n):e.preventDefault()}}customElements.get("y-breadcrumbs")\|\|customElements.define("y-breadcrumbs",j);class q extends HTMLElement{static get observedAttributes(){return["orientation"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this._render(),this._updateChildren()}attributeChangedCallback(e,n,t){n!==t&&(this._applyStyles(),this._updateChildren())}get orientation(){return this.getAttribute("orientation")\|\|"horizontal"}set orientation(e){this.setAttribute("orientation",e)}_applyStyles(){this._styleEl\|\|(this._styleEl=document.createElement("style"),this.shadowRoot.appendChild(this._styleEl));const e="vertical"===this.orientation;this._styleEl.textContent=`\n :host {\n display: inline-flex;\n flex-direction: ${e?"column":"row"};\n align-items: stretch;\n }\n ::slotted() {\n flex-shrink: 0;\n position: relative;\n }\n `}_getRadius(){return getComputedStyle(this).getPropertyValue("--component-button-border-radius-outer").trim()\|\|"4px"}_render(){if(this._applyStyles(),!this.shadowRoot.querySelector("slot")){const e=document.createElement("slot");e.addEventListener("slotchange",()=>this._updateChildren()),this.shadowRoot.appendChild(e)}}_updateChildren(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const n=e.assignedElements({flatten:!0}),t="vertical"===this.orientation,r=this._getRadius(),o=n.length;n.forEach((e,n)=>{const a=0===n,i=n===o-1;if(t?(e.style.marginLeft="",e.style.marginTop=a?"":"-1px"):(e.style.marginTop="",e.style.marginLeft=a?"":"-1px"),1===o)e.style.removeProperty("--component-button-border-radius-outer"),e.style.removeProperty("--component-inputs-border-radius-outer");else if(a){const n=t?`${r} ${r} 0 0`:`${r} 0 0 ${r}`;e.style.setProperty("--component-button-border-radius-outer",n),e.style.setProperty("--component-inputs-border-radius-outer",n)}else if(i){const n=t?`0 0 ${r} ${r}`:`0 ${r} ${r} 0`;e.style.setProperty("--component-button-border-radius-outer",n),e.style.setProperty("--component-inputs-border-radius-outer",n)}else e.style.setProperty("--component-button-border-radius-outer","0"),e.style.setProperty("--component-inputs-border-radius-outer","0")})}}customElements.get("y-button-group")\|\|customElements.define("y-button-group",q);class V extends HTMLElement{static get observedAttributes(){return["color","raised"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this._updateColorStyles(),this._updateElevationStyles()}attributeChangedCallback(e,n,t){n!==t&&("color"===e&&this._updateColorStyles(),"raised"===e&&this._updateElevationStyles(),this.render())}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get raised(){return this.hasAttribute("raised")}set raised(e){e?this.setAttribute("raised",""):this.removeAttribute("raised")}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML='\n <div class="image" part="image"><slot name="image"></slot></div>\n <div class="header" part="header"><slot name="header"></slot></div>\n <div class="body" part="body"><slot></slot></div>\n <div class="footer" part="footer"><slot name="footer"></slot></div>\n ';const e={image:".image",header:".header",footer:".footer"};C(this.shadowRoot,e),this._bindSlotListeners(e)}_bindSlotListeners(e){this.shadowRoot.querySelectorAll("slot").forEach(n=>{n.addEventListener("slotchange",()=>C(this.shadowRoot,e))})}_buildStyleSheet(){const e=new CSSStyleSheet;return e.replaceSync("\n :host {\n display: block;\n box-sizing: border-box;\n background: var(--card-background, var(--base-background-component));\n border: var(--card-border-width, var(--component-card-border-width)) solid var(--card-border-color, var(--base-border));\n border-radius: var(--component-card-border-radius-outer);\n font-family: var(--font-family-body);\n color: var(--card-content-color, var(--base-content--));\n box-shadow: var(--card-box-shadow, none);\n }\n\n .image {\n overflow: hidden;\n border-radius: var(--component-card-border-radius-outer) var(--component-card-border-radius-outer) 0 0;\n }\n\n .header {\n padding: var(--component-card-padding-outer);\n border-bottom: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-border));\n }\n\n .body {\n padding: var(--component-card-padding-outer);\n }\n\n .footer {\n padding: var(--component-card-padding-inner) var(--component-card-padding-outer);\n border-top: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-border));\n }\n\n ::slotted() {\n margin: 0;\n }\n "),e}_updateColorStyles(){const e={primary:["--base-content--","--primary-background-component","--primary-border"],secondary:["--base-content--","--secondary-background-component","--secondary-border"],base:["--base-content--","--base-background-component","--base-border"],success:["--base-content--","--success-background-component","--success-border"],error:["--base-content--","--error-background-component","--error-border"],warning:["--base-content--","--warning-background-component","--warning-border"]},[n,t,r]=e[this.color]\|\|e.base;this.style.setProperty("--card-content-color",`var(${n})`),this.style.setProperty("--card-background",`var(${t})`),this.style.setProperty("--card-border-color",`var(${r})`),this.style.setProperty("--card-section-background",`var(${r})`)}_updateElevationStyles(){this.raised?(this.style.setProperty("--card-border-width","0"),this.style.setProperty("--card-box-shadow","var(--base-shadow)")):(this.style.setProperty("--card-border-width","var(--component-card-border-width)"),this.style.setProperty("--card-box-shadow","none"))}}customElements.get("y-card")\|\|customElements.define("y-card",V);class F extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["checked","disabled","indeterminate","label-position","name","value"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("label-position")\|\|this.setAttribute("label-position","right"),this._internals.setFormValue(this.checked?this.value:null)}attributeChangedCallback(e){"checked"!==e&&"value"!==e\|\|this._internals.setFormValue(this.checked?this.value:null),"indeterminate"===e&&this._updateIcon(),"label-position"===e&&this.render(),this._updateState()}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(e){e?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}get labelPosition(){return this.getAttribute("label-position")\|\|"right"}set labelPosition(e){this.setAttribute("label-position",e)}get name(){return this.getAttribute("name")}set name(e){this.setAttribute("name",e)}get value(){return this.getAttribute("value")\|\|"on"}set value(e){this.setAttribute("value",e)}toggle(){this.disabled\|\|(this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML='\n <div class="wrapper">\n <div class="checkbox" role="checkbox" tabindex="0">\n <span class="icon"></span>\n </div>\n <label part="label">\n <slot></slot>\n </label>\n </div>\n ',this._bindCheckboxListeners(),this._updateState()}_bindCheckboxListeners(){const e=this.shadowRoot.querySelector(".checkbox");e.addEventListener("click",()=>this.toggle()),e.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key\|\|(e.preventDefault(),this.toggle())})}_buildStyleSheet(){const e={top:"column",bottom:"column-reverse",left:"row-reverse",right:"row"}[this.labelPosition]\|\|"row",n=new CSSStyleSheet;return n.replaceSync(`\n :host {\n display: inline-flex;\n align-items: center;\n line-height: 1;\n vertical-align: middle;\n font-family: var(--font-family-body);\n cursor: ${this.disabled?"not-allowed":"pointer"};\n opacity: ${this.disabled?"0.6":"1"};\n }\n\n .wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-x-small, 6px);\n line-height: 1;\n flex-direction: ${e};\n }\n\n .checkbox {\n width: var(--component-checkbox-size, 20px);\n height: var(--component-checkbox-size, 20px);\n border: var(--component-inputs-border-width, 2px) solid var(--component-checkbox-border-color);\n border-radius: var(--component-inputs-border-radius-outer, 4px);\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--component-checkbox-background);\n box-sizing: border-box;\n transition: border-color 0.2s ease;\n line-height: 0;\n }\n\n :host([disabled]) .checkbox {\n border-color: var(--component-checkbox-border-color);\n background: var(--component-checkbox-disabled-background, var(--component-checkbox-background));\n cursor: not-allowed;\n }\n\n :host([disabled]) .checkbox:hover {\n border-color: var(--component-checkbox-border-color);\n }\n\n .checkbox:hover {\n border-color: var(--component-checkbox-accent);\n }\n\n .checkbox svg {\n width: var(--component-checkbox-icon-size, 16px);\n height: var(--component-checkbox-icon-size, 16px);\n stroke: var(--component-checkbox-accent);\n display: block;\n }\n\n [part="label"] {\n display: inline-flex;\n align-items: center;\n font-size: 0.9em;\n line-height: 1;\n color: var(--component-checkbox-color);\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n line-height: 0;\n }\n `),n}_updateIcon(){const e=this.shadowRoot.querySelector(".icon");e&&(this.indeterminate?e.innerHTML=p:this.checked?e.innerHTML=i:e.innerHTML="")}_updateState(){const e=this.shadowRoot.querySelector(".checkbox");e&&(e.setAttribute("aria-checked",this.indeterminate?"mixed":this.checked?"true":"false"),this._updateIcon())}}customElements.get("y-checkbox")\|\|customElements.define("y-checkbox",F);class N extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["type","size","value","label-position","disabled","invalid","name","min","max","step"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this._internals.setFormValue(this.value)}attributeChangedCallback(e,n,t){if(n!==t)return"value"===e?(this.input&&(this.input.value=t),void(this._internals&&this._internals.setFormValue(t,this.getAttribute("name")))):void("name"!==e?"invalid"!==e?"min"!==e&&"max"!==e&&"step"!==e?this.render():this.input&&(null!=t?this.input.setAttribute(e,t):this.input.removeAttribute(e)):this._updateValidationState():this._internals.setFormValue(this.value,t))}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get type(){return this.getAttribute("type")\|\|"text"}set type(e){this.setAttribute("type",e)}get value(){return this.input?.value\|\|""}set value(e){this.input&&(this.input.value=e),this.setAttribute("value",e),this._internals.setFormValue(e,this.getAttribute("name"))}checkValidity(){return this.input?.checkValidity?.()??!0}render(){const e=this.getAttribute("type")\|\|"text",n=this.getAttribute("size")\|\|"medium",t=this.getAttribute("value")\|\|"",r=this.getAttribute("label-position")\|\|"top",o=this.hasAttribute("disabled"),a="top"===r,i=this._getPaddingVar(n),s=this._getMinHeightVar(n);this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet(o,i,s)],this.shadowRoot.innerHTML=this._buildHTML(e,t,a,o),this.input=this.shadowRoot.querySelector("input"),this.inputContainer=this.shadowRoot.querySelector(".input-container"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),A(this.labelWrapper),o\|\|(this._bindInputListeners(),this._updateValidationState())}_bindInputListeners(){this.input.addEventListener("input",e=>{this.setAttribute("value",e.target.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:e.target.value},bubbles:!0,composed:!0})),this._updateValidationState()})}_buildHTML(e,n,t,r){const o='<div class="label-wrapper"><slot name="label"></slot></div>',a=this.getAttribute("min"),i=this.getAttribute("max"),s=this.getAttribute("step");return`\n <div class="input-wrapper">\n ${t?o:""}\n <div class="input-container">\n <slot name="left-icon"></slot>\n <input part="input" type="${e}" value="${n}" ${[null!=a?`min="${a}"`:"",null!=i?`max="${i}"`:"",null!=s?`step="${s}"`:""].filter(Boolean).join(" ")} ${r?"disabled":""} />\n <slot name="right-icon"></slot>\n </div>\n ${t?"":o}\n </div>\n `}_buildStyleSheet(e,n,t){const r=new CSSStyleSheet;return r.replaceSync(`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--component-input-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .input-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .label-wrapper {\n display: none;\n margin-bottom: var(--spacing-2x-small, 4px);\n }\n\n .input-container {\n flex: 1;\n display: flex;\n align-items: center;\n gap: var(--spacing-x-small);\n background: ${e?"var(--component-input-background-disabled)":"var(--component-input-background)"};\n border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: var(${n});\n min-height: ${t};\n box-sizing: border-box;\n transition: border-color 0.2s ease-in-out;\n }\n\n .input-container.is-invalid {\n border-color: var(--component-input-error-border-color);\n background: var(--component-input-error-background);\n }\n\n .input-container.is-invalid input {\n color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:hover {\n border-color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:focus-within {\n border-color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:focus-within input {\n color: var(--component-input-color);\n }\n\n input {\n all: unset;\n flex: 1;\n font-family: inherit;\n font-size: 1em;\n color: inherit;\n min-width: 0;\n min-height: 20px;\n }\n\n .input-container:hover {\n border-color: var(--component-input-color);\n transition: border-color 0.2s ease-in-out;\n }\n\n .input-container:focus-within {\n border-color: var(--component-input-accent);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-input-error-color);\n }\n\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-input-label-color);\n }\n\n ::slotted([slot="left-icon"]),\n ::slotted([slot="right-icon"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--component-input-icon-color);\n }\n `),r}_getMinHeightVar(e){const n={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"};return n[e]\|\|n.medium}_getPaddingVar(e){const n={small:"--component-inputs-padding-small",medium:"--component-inputs-padding-medium",large:"--component-inputs-padding-large"};return n[e]\|\|n.medium}_updateValidationState(){const e=this.hasAttribute("invalid"),n=this.input&&!this.checkValidity(),t=e\|\|n;this.inputContainer?.classList.toggle("is-invalid",t),this.labelWrapper?.classList.toggle("is-invalid",t)}}customElements.get("y-input")\|\|customElements.define("y-input",N);const O={primary:["var(--primary-content--)","var(--primary-content-inverse)"],secondary:["var(--secondary-content--)","var(--secondary-content-inverse)"],success:["var(--success-content--)","var(--success-content-inverse)"],warning:["var(--warning-content--)","var(--warning-content-inverse)"],error:["var(--error-content--)","var(--error-content-inverse)"],help:["var(--help-content--)","var(--help-content-inverse)"]};class Y extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["label-position","disabled","invalid","required","value","name","placeholder","options","display-mode","close-on-click-outside","size","searchable","clearable"]}constructor(){super(),this._internals=this.attachInternals(),this.selectedValues=new Set,this._onDocumentClick=this._onDocumentClick.bind(this),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this.updateValidation(),this._internals.setFormValue(this.value)}disconnectedCallback(){this.closeDropdown()}attributeChangedCallback(e,n,t){n!==t&&("value"===e&&(this.hasAttribute("multiple")?this.selectedValues=new Set((t\|\|"").split(",").map(e=>e.trim()).filter(Boolean)):this._value=t\|\|"",this._updateDisplay(),this._internals.setFormValue(t,this.getAttribute("name")),this._updateSelectedStyles()),["label-position","disabled","invalid","required","placeholder","options","size","searchable","clearable"].includes(e)&&this.render(),"name"===e&&this._internals.setFormValue(this.value,t))}get clearable(){return this.hasAttribute("clearable")}set clearable(e){e?this.setAttribute("clearable",""):this.removeAttribute("clearable")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get displayMode(){return this.getAttribute("display-mode")\|\|""}set displayMode(e){this.setAttribute("display-mode",e)}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get multiple(){return this.hasAttribute("multiple")}set multiple(e){e?this.setAttribute("multiple",""):this.removeAttribute("multiple")}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get options(){try{return JSON.parse(this.getAttribute("options")\|\|"[]")}catch{return[]}}set options(e){this.setAttribute("options",Array.isArray(e)?JSON.stringify(e):e??"[]")}get placeholder(){return this.getAttribute("placeholder")\|\|"Select..."}set placeholder(e){this.setAttribute("placeholder",e)}get required(){return this.hasAttribute("required")}set required(e){e?this.setAttribute("required",""):this.removeAttribute("required")}get searchable(){return this.hasAttribute("searchable")}set searchable(e){e?this.setAttribute("searchable",""):this.removeAttribute("searchable")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return this.hasAttribute("multiple")?Array.from(this.selectedValues).join(","):this._value\|\|""}set value(e){this.hasAttribute("multiple")?"string"==typeof e?this.selectedValues=new Set(e.split(",").map(e=>e.trim())):Array.isArray(e)&&(this.selectedValues=new Set(e)):this._value=e,this.setAttribute("value",e),this._internals.setFormValue(this.value,this.getAttribute("name")),this._updateDisplay(),this._updateSelectedStyles()}closeDropdown(){if(this.dropdown?.classList.remove("open"),this.selectContainer?.classList.remove("open"),document.removeEventListener("click",this._onDocumentClick,!0),this.searchable){const e=this.hasAttribute("multiple");if(!e&&this.searchInput){const e=this.value?this._getDisplayText():"";this.searchInput.value=e,this.searchInput.placeholder=e?"":this.getAttribute("placeholder")\|\|"Select..."}else e&&this.searchInput&&(this.searchInput.value="");this._filterOptions("")}this._onScrollOrResize&&(window.removeEventListener("scroll",this._onScrollOrResize,!0),window.removeEventListener("resize",this._onScrollOrResize),this._onScrollOrResize=null)}render(){this.closeDropdown(),this._applyStyles(),this.shadowRoot.innerHTML=this._generateTemplate(),this._queryRefs(),A(this.labelWrapper),this._attachEventListeners(),this._updateValidationState(),this._updateDisplay(),this._updateSelectedStyles()}toggleDropdown(){this.dropdown.classList.contains("open")?this.closeDropdown():(this._openDropdown(),this.searchable&&this.searchInput&&setTimeout(()=>this.searchInput.focus(),0))}updateValidation(){const e=this.hasAttribute("required"),n=this.hasAttribute("multiple")?this.selectedValues.size>0:this.value&&""!==this.value;e&&!n?this.setAttribute("invalid",""):this.removeAttribute("invalid")}_applyStyles(){const e=this.hasAttribute("disabled"),n=this.getAttribute("size")\|\|"medium",t={small:"--component-inputs-padding-small",medium:"--component-inputs-padding-medium",large:"--component-inputs-padding-large"}[n]\|\|"--component-inputs-padding-medium",r={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"}[n]\|\|"var(--sizing-medium, 40px)",o=new CSSStyleSheet;o.replaceSync(`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-body);\n color: var(--component-select-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .select-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n .label-wrapper {\n display: none;\n margin-bottom: var(--spacing-2x-small, 4px);\n }\n\n .select-container {\n flex: 1;\n display: flex;\n align-items: center;\n gap: var(--spacing-x-small);\n background: var(--component-select-background);\n border: var(--component-inputs-border-width) solid var(--component-select-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: var(${t});\n min-height: ${r};\n box-sizing: border-box;\n transition: border-color 0.2s ease-in-out;\n cursor: pointer;\n }\n\n .select-container:hover {\n border-color: var(--component-select-color);\n }\n\n .select-container:focus-within {\n border-color: var(--component-select-accent);\n }\n\n .select-container.is-invalid {\n border-color: var(--component-select-error-border-color);\n background: var(--component-select-error-background);\n }\n\n .select-container.is-invalid:hover {\n border-color: var(--component-select-error-color);\n }\n\n .select-container.is-invalid:focus-within {\n border-color: var(--component-select-error-color);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-select-error-color);\n }\n\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-select-label-color);\n }\n\n .dropdown {\n position: absolute;\n z-index: var(--component-select-z-index, 6000);\n left: 0;\n right: 0;\n background: var(--component-select-background);\n border: var(--component-inputs-border-width) solid var(--component-select-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n box-shadow: var(--component-select-shadow, 0 2px 8px rgba(0,0,0,0.1));\n max-height: 200px;\n overflow-y: auto;\n display: none;\n }\n\n .dropdown.open {\n display: block;\n }\n\n .no-results {\n padding: var(--spacing-small, 6px);\n color: var(--component-select-label-color);\n text-align: center;\n font-size: 0.875em;\n }\n\n .dropdown-item {\n padding: var(--spacing-small, 6px);\n cursor: pointer;\n }\n\n .dropdown-item:hover {\n background: var(--component-select-hover-background);\n }\n\n .dropdown-item.selected {\n background: var(--component-select-accent);\n color: var(--component-select-accent-contrast);\n }\n\n .value-display {\n flex: 1;\n font-size: 1em;\n color: inherit;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--spacing-x-small);\n }\n\n .search-input {\n flex: 1;\n min-width: 60px;\n border: none;\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: 1em;\n outline: none;\n padding: 0;\n cursor: text;\n }\n\n .search-input::placeholder {\n color: var(--component-select-label-color);\n }\n\n .clear-button {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n flex-shrink: 0;\n }\n\n .clear-button:hover {\n opacity: 1;\n }\n\n .chevron-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n transition: transform 0.2s ease;\n }\n\n .chevron-icon svg {\n width: 20px;\n height: 20px;\n transition: transform 0.2s ease;\n transform-origin: center;\n }\n\n .select-container.open .chevron-icon svg {\n transform: scaleY(-1);\n }\n `),this.shadowRoot.adoptedStyleSheets=[o]}_attachEventListeners(){const e=this.searchable,n=this.hasAttribute("multiple"),t="tag"===this.getAttribute("display-mode");if(e){this.selectContainer.addEventListener("click",e=>{e.target.closest(".chevron-icon")\|\|this.searchInput?.focus()});const e=this.shadowRoot.querySelector(".chevron-icon");e?.addEventListener("click",e=>{e.stopPropagation(),this.toggleDropdown()}),this.searchInput?.addEventListener("focus",()=>{this.dropdown.classList.contains("open")\|\|this._openDropdown()}),this.searchInput?.addEventListener("input",e=>{this._filterOptions(e.target.value)}),this.searchInput?.addEventListener("click",e=>e.stopPropagation())}else this.selectContainer.addEventListener("click",()=>this.toggleDropdown());this.clearButton?.addEventListener("click",e=>{e.stopPropagation(),this.hasAttribute("multiple")?(this.selectedValues=new Set,this.setAttribute("value",""),this._renderTags(),this._updateSelectedStyles(),this.clearButton&&(this.clearButton.style.display="none")):(this.value="",this._filterOptions(""),this.searchInput&&(this.searchInput.value="",this.searchInput.placeholder=this.getAttribute("placeholder")\|\|"Select...",this.searchInput.focus(),this.dropdown.classList.contains("open")\|\|this._openDropdown())),this.dispatchEvent(new CustomEvent("change",{detail:{value:""},bubbles:!0,composed:!0})),this.updateValidation()}),this.dropdown.querySelectorAll(".dropdown-item").forEach(r=>{r.addEventListener("click",()=>{const o=r.getAttribute("data-value"),a=this.hasAttribute("required");if(n)this.selectedValues.has(o)?(!a\|\|this.selectedValues.size>1)&&this.selectedValues.delete(o):this.selectedValues.add(o),this.setAttribute("value",Array.from(this.selectedValues).join(","));else{const e=o===this.value;this.value=e&&!a?"":o}this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.updateValidation(),e&&n&&t?(this.searchInput&&(this.searchInput.value="",this._filterOptions(""),this.searchInput.focus()),this._updateSelectedStyles()):this.closeDropdown()})})}_filterOptions(e){if(!this.dropdown)return;const n=e.toLowerCase();let t=0;this.dropdown.querySelectorAll(".dropdown-item").forEach(e=>{const r=!n\|\|e.textContent.toLowerCase().includes(n);e.style.display=r?"":"none",r&&t++});const r=this.dropdown.querySelector(".no-results");r&&(r.style.display=0===t?"":"none")}_generateTemplate(){const e="top"===(this.getAttribute("label-position")\|\|"top"),n=this.hasAttribute("invalid"),t=this.hasAttribute("multiple"),r="tag"===this.getAttribute("display-mode"),o=this.searchable,a=this.clearable,i=(o\|\|a)&&!t,c=t?this.selectedValues:new Set([this.value]),l=this.getAttribute("placeholder")\|\|"Select...",d='<button class="clear-button" style="display:none" tabindex="-1" type="button"><y-icon name="close" size="medium"></y-icon></button>';let p;return p=o&&!t?`\n <input class="search-input" type="text" placeholder="${l}" autocomplete="off">\n ${d}\n `:o&&t&&r?`\n <div class="value-display">\n <input class="search-input" type="text" placeholder="${l}" autocomplete="off">\n </div>\n ${a?d:""}\n `:t&&r?`\n <div class="value-display"></div>\n ${a?d:""}\n `:i?`\n <div class="value-display">${this._getDisplayText()}</div>\n <button class="clear-button" style="display:none" tabindex="-1" type="button">\n <y-icon name="close" size="medium"></y-icon>\n </button>\n `:`<div class="value-display">${this._getDisplayText()}</div>`,`\n <div class="select-wrapper">\n ${e?'<div class="label-wrapper"><slot name="label"></slot></div>':""}\n <div class="select-container ${n?"is-invalid":""}" tabindex="${o?"-1":"0"}">\n ${p}\n <div class="chevron-icon" part="chevron-icon">\n ${s}\n </div>\n </div>\n ${e?"":'<div class="label-wrapper"><slot name="label"></slot></div>'}\n <div class="dropdown" part="dropdown">\n ${this.options.map(e=>{const n=c.has(e.value);let t="";if(n&&e.color){const n=O[e.color];t=n?`style="background:${n[0]};color:${n[1]}"`:`style="background:${e.color};color:${b(e.color)}"`}return`<div class="dropdown-item ${n?"selected":""}" data-value="${e.value}" data-color="${e.color\|\|""}" ${t}>${e.label}</div>`}).join("")}\n <div class="no-results" style="display:none">No results</div>\n </div>\n </div>\n `}_getDisplayText(){const e=this.hasAttribute("multiple"),n="tag"===this.getAttribute("display-mode");if(e&&n)return"";if(e){const e=this.options.filter(e=>this.selectedValues.has(e.value)).length;return e>0?`${e} Selected`:this.getAttribute("placeholder")\|\|"Select..."}{const e=this.options.find(e=>e.value===this.value);return e?.label\|\|this.getAttribute("placeholder")\|\|"Select..."}}_onDocumentClick(e){if("false"===this.getAttribute("close-on-click-outside"))return;!e.composedPath().includes(this)&&this.dropdown?.classList.contains("open")&&this.closeDropdown()}_openDropdown(){if(!this.dropdown.classList.contains("open")){if(this.dropdown.classList.add("open"),this.selectContainer.classList.add("open"),this._positionDropdown(),this._onScrollOrResize=this._positionDropdown.bind(this),this.searchable&&!this.hasAttribute("multiple")&&this.searchInput){const e=this.value?this._getDisplayText():"";this.searchInput.placeholder=e\|\|this.getAttribute("placeholder")\|\|"Select...",this.searchInput.value="",this._filterOptions("")}window.addEventListener("scroll",this._onScrollOrResize,!0),window.addEventListener("resize",this._onScrollOrResize),document.addEventListener("click",this._onDocumentClick,!0)}}_positionDropdown(){const e=this.selectContainer.getBoundingClientRect(),n=window.innerHeight-e.bottom-4,t=this.selectContainer.parentElement;n>=200\|\|n>=e.top?(this.dropdown.style.top=`${this.selectContainer.offsetTop+this.selectContainer.offsetHeight+4}px`,this.dropdown.style.bottom="auto"):(this.dropdown.style.bottom=t.offsetHeight-this.selectContainer.offsetTop+4+"px",this.dropdown.style.top="auto")}_queryRefs(){this.selectContainer=this.shadowRoot.querySelector(".select-container"),this.dropdown=this.shadowRoot.querySelector(".dropdown"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),this.displayElement=this.shadowRoot.querySelector(".value-display"),this.searchInput=this.shadowRoot.querySelector(".search-input"),this.clearButton=this.shadowRoot.querySelector(".clear-button")}_renderTags(){const e=this.hasAttribute("multiple"),n="tag"===this.getAttribute("display-mode");if(!e\|\|!n\|\|!this.displayElement)return;const t=this.searchable?this.displayElement.querySelector(".search-input"):null;this.displayElement.innerHTML="";this.options.filter(e=>this.selectedValues.has(e.value)).forEach(e=>{const n=document.createElement("y-tag");n.setAttribute("removable",""),n.setAttribute("size","small"),n.setAttribute("color",e.color\|\|"primary"),n.setAttribute("style-type","filled"),n.textContent=e.label,n.dataset.value=e.value,n.addEventListener("remove",()=>{this.selectedValues.delete(e.value),this.setAttribute("value",Array.from(this.selectedValues).join(",")),this._renderTags(),this._updateSelectedStyles(),this.updateValidation(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}),this.displayElement.appendChild(n)}),t&&this.displayElement.appendChild(t)}_updateDisplay(){const e="tag"===this.getAttribute("display-mode"),n=this.searchable,t=this.hasAttribute("multiple"),r=this.clearable;if(e)this._renderTags(),r&&this.clearButton&&(this.clearButton.style.display=this.selectedValues.size>0?"flex":"none");else if(n&&!t&&this.searchInput){const e=this.dropdown?.classList.contains("open");if(!e){const e=this.value?this._getDisplayText():"";this.searchInput.value=e,this.searchInput.placeholder=e?"":this.getAttribute("placeholder")\|\|"Select..."}this.clearButton&&(this.clearButton.style.display=this.value?"flex":"none")}else r&&!t&&this.displayElement?(this.displayElement.textContent=this._getDisplayText(),this.clearButton&&(this.clearButton.style.display=this.value?"flex":"none")):this.displayElement&&(this.displayElement.textContent=this._getDisplayText())}_updateSelectedStyles(){const e=this.hasAttribute("multiple")?this.selectedValues:new Set([this.value]);this.dropdown?.querySelectorAll(".dropdown-item").forEach(n=>{const t=n.getAttribute("data-value"),r=e.has(t);n.classList.toggle("selected",r);const o=n.getAttribute("data-color");if(r&&o){const e=O[o];e?(n.style.background=e[0],n.style.color=e[1]):(n.style.background=o,n.style.color=b(o))}else n.style.background="",n.style.color=""})}_updateValidationState(){const e=this.hasAttribute("invalid");this.selectContainer?.classList.toggle("is-invalid",e),this.labelWrapper?.classList.toggle("is-invalid",e)}}customElements.get("y-select")\|\|customElements.define("y-select",Y);class W extends HTMLElement{static get observedAttributes(){return["value","format","formats","show-alpha","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._h=0,this._s=100,this._v=100,this._a=1,this._dragging=null,this._rendered=!1,this._updatingValue=!1,this._drawnHue=-1,this._onPointerMove=e=>this._onGlobalMove(e),this._onPointerUp=()=>this._onGlobalUp()}connectedCallback(){this.getAttribute("value")&&this._parseAndApply(this.getAttribute("value")),this.render(),this._rendered=!0}disconnectedCallback(){this._removeGlobalListeners()}attributeChangedCallback(e,n,t){if(n!==t)if("value"===e&&this._rendered){if(this._updatingValue)return;this._parseAndApply(t),this._updateAll()}else this._rendered&&this.render()}get value(){return this._formatColor(this.format)}set value(e){this.setAttribute("value",e)}get format(){return this.getAttribute("format")\|\|"hex"}set format(e){this.setAttribute("format",e)}get formats(){try{return JSON.parse(this.getAttribute("formats")\|\|'["hex","rgb","hsl","hsv"]')}catch{return["hex","rgb","hsl","hsv"]}}set formats(e){this.setAttribute("formats",JSON.stringify(e))}get showAlpha(){return this.hasAttribute("show-alpha")}set showAlpha(e){e?this.setAttribute("show-alpha",""):this.removeAttribute("show-alpha")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}setColor(e){this._parseAndApply(e),this._updateAll(),this._syncValueAttr()}render(){const e=this.size,n=this.showAlpha,t=this.formats;this.shadowRoot.innerHTML=`\n <style>${this._buildStyles()}</style>\n <div class="colorpicker" part="colorpicker">\n <div class="canvas-container">\n <canvas class="canvas" part="canvas" tabindex="0"\n role="slider" aria-label="Color"\n aria-valuetext="Hue ${this._h}, Saturation ${this._s}%, Brightness ${this._v}%"\n ></canvas>\n <div class="canvas-handle" part="canvas-handle"></div>\n </div>\n <div class="hue-slider" part="hue-slider" tabindex="0"\n role="slider" aria-label="Hue"\n aria-valuemin="0" aria-valuemax="359" aria-valuenow="${this._h}"\n >\n <div class="hue-thumb" part="hue-thumb"></div>\n </div>\n ${n?`\n <div class="alpha-slider" part="alpha-slider" tabindex="0"\n role="slider" aria-label="Alpha"\n aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.round(100this._a)}"\n >\n <div class="alpha-gradient"></div>\n <div class="alpha-thumb" part="alpha-thumb"></div>\n </div>`:""}\n <div class="inputs-row" part="inputs-row">\n <div class="swatch-container">\n <slot name="swatch">\n <div class="swatch-preview" part="swatch-preview"></div>\n </slot>\n </div>\n <y-select class="format-select" part="format-select"\n size="${e}"\n options='${JSON.stringify(t.map(e=>({value:e,label:e.toUpperCase()})))}'\n value="${this.format}"\n ></y-select>\n <div class="channel-inputs"></div>\n </div>\n </div>\n `,this._canvas=this.shadowRoot.querySelector(".canvas"),this._canvasHandle=this.shadowRoot.querySelector(".canvas-handle"),this._hueSlider=this.shadowRoot.querySelector(".hue-slider"),this._hueThumb=this.shadowRoot.querySelector(".hue-thumb"),this._alphaSlider=this.shadowRoot.querySelector(".alpha-slider"),this._alphaThumb=this.shadowRoot.querySelector(".alpha-thumb"),this._formatSelect=this.shadowRoot.querySelector(".format-select"),this._channelInputs=this.shadowRoot.querySelector(".channel-inputs"),this._swatchPreview=this.shadowRoot.querySelector(".swatch-preview"),this._bindEvents(),this._drawCanvas(),this._updateAll()}_parseAndApply(e){const n=x(e);if(!n)return;const[t,r,o]=g(n.r,n.g,n.b);this._h=t,this._s=r,this._v=o,this._a=n.a}_formatColor(e){const[n,t,r]=m(this._h,this._s,this._v),o=Math.round(100this._a)/100;switch(e){case"hex":return this.showAlpha&&o<1?f(n,t,r,o):w(n,t,r);case"rgb":return this.showAlpha?`rgba(${n}, ${t}, ${r}, ${o})`:`rgb(${n}, ${t}, ${r})`;case"hsl":{const[e,n,t]=k(this._h,this._s,this._v);return this.showAlpha?`hsla(${e}, ${n}%, ${t}%, ${o})`:`hsl(${e}, ${n}%, ${t}%)`}case"hsv":return this.showAlpha?`hsva(${this._h}, ${this._s}%, ${this._v}%, ${o})`:`hsv(${this._h}, ${this._s}%, ${this._v}%)`;default:return w(n,t,r)}}_getColorRepresentations(){const[e,n,t]=m(this._h,this._s,this._v),r=Math.round(100this._a)/100,[o,a,i]=k(this._h,this._s,this._v);return{hex:this.showAlpha&&r<1?f(e,n,t,r):w(e,n,t),rgb:this.showAlpha?`rgba(${e}, ${n}, ${t}, ${r})`:`rgb(${e}, ${n}, ${t})`,hsl:this.showAlpha?`hsla(${o}, ${a}%, ${i}%, ${r})`:`hsl(${o}, ${a}%, ${i}%)`,hsv:this.showAlpha?`hsva(${this._h}, ${this._s}%, ${this._v}%, ${r})`:`hsv(${this._h}, ${this._s}%, ${this._v}%)`}}_drawCanvas(){const e=this._canvas;if(!e)return;const n=e.getBoundingClientRect(),t=n.width\|\|260,r=n.height\|\|160;e.width=t,e.height=r;const o=e.getContext("2d"),[a,i,s]=m(this._h,100,100);o.fillStyle=`rgb(${a},${i},${s})`,o.fillRect(0,0,t,r);const c=o.createLinearGradient(0,0,t,0);c.addColorStop(0,"rgba(255,255,255,1)"),c.addColorStop(1,"rgba(255,255,255,0)"),o.fillStyle=c,o.fillRect(0,0,t,r);const l=o.createLinearGradient(0,0,0,r);l.addColorStop(0,"rgba(0,0,0,0)"),l.addColorStop(1,"rgba(0,0,0,1)"),o.fillStyle=l,o.fillRect(0,0,t,r),this._drawnHue=this._h}_getChannelFields(){const e=this.showAlpha,[n,t,r]=m(this._h,this._s,this._v),[o,a,i]=k(this._h,this._s,this._v),s=Math.round(100this._a)/100;let c=[];switch(this.format){case"hex":c=[{label:"Hex",name:"hex",value:e&&s<1?f(n,t,r,s):w(n,t,r),full:!0}];break;case"rgb":c=[{label:"R",name:"r",value:String(n),min:0,max:255},{label:"G",name:"g",value:String(t),min:0,max:255},{label:"B",name:"b",value:String(r),min:0,max:255}],e&&c.push({label:"A",name:"a",value:String(s),min:0,max:1,step:.01});break;case"hsl":c=[{label:"H",name:"h",value:String(o),min:0,max:360},{label:"S",name:"s",value:String(a),min:0,max:100},{label:"L",name:"l",value:String(i),min:0,max:100}],e&&c.push({label:"A",name:"a",value:String(s),min:0,max:1,step:.01});break;case"hsv":c=[{label:"H",name:"h",value:String(this._h),min:0,max:360},{label:"S",name:"s",value:String(this._s),min:0,max:100},{label:"V",name:"v",value:String(this._v),min:0,max:100}],e&&c.push({label:"A",name:"a",value:String(s),min:0,max:1,step:.01})}return c}_rebuildInputs(){if(!this._channelInputs)return;const e=this.size,n=this._getChannelFields();this._channelInputs.innerHTML="",n.forEach(n=>{const t=document.createElement("y-input");t.setAttribute("size",e),t.setAttribute("aria-label",n.label),t.setAttribute("placeholder",n.label),t.setAttribute("value",n.value),null!=n.min&&(t.setAttribute("type","number"),t.setAttribute("min",String(n.min))),null!=n.max&&t.setAttribute("max",String(n.max)),null!=n.step&&t.setAttribute("step",String(n.step)),t.dataset.channel=n.name,n.full&&t.classList.add("full-width"),this._channelInputs.appendChild(t),t.addEventListener("input",e=>{this._handleChannelInput(n.name,e.detail?.value??e.target.value,n)})})}_updateAll(){this._updateCanvasHandle(),this._updateHueThumb(),this._updateAlphaThumb(),this._updateSwatch(),this._updateInputValues(),this._drawnHue!==this._h&&this._drawCanvas(),this._updateAriaValues()}_updateAlphaThumb(){const e=this._alphaThumb,n=this._alphaSlider;if(!e\|\|!n)return;e.style.left=100this._a+"%";const t=n.querySelector(".alpha-gradient");if(t){const[e,n,r]=m(this._h,this._s,this._v);t.style.background=`linear-gradient(to right, rgba(${e},${n},${r},0), rgb(${e},${n},${r}))`}}_updateAriaValues(){const e=this._canvas;e&&e.setAttribute("aria-valuetext",`Hue ${this._h}, Saturation ${this._s}%, Brightness ${this._v}%`),this._hueSlider&&this._hueSlider.setAttribute("aria-valuenow",String(this._h)),this._alphaSlider&&this._alphaSlider.setAttribute("aria-valuenow",String(Math.round(100this._a)))}_updateCanvasHandle(){const e=this._canvasHandle,n=this._canvas;if(!e\|\|!n)return;const t=n.getBoundingClientRect(),r=this._s/100t.width,o=(1-this._v/100)t.height;e.style.left=`${r}px`,e.style.top=`${o}px`;const[a,i,s]=m(this._h,this._s,this._v);e.style.backgroundColor=`rgb(${a},${i},${s})`}_updateHueThumb(){const e=this._hueThumb,n=this._hueSlider;if(!e\|\|!n)return;const t=this._h/360;e.style.left=100t+"%";const[r,o,a]=m(this._h,100,100);e.style.backgroundColor=`rgb(${r},${o},${a})`}_updateInputValues(){if(!this._channelInputs)return;const e=this._getChannelFields(),n=this._channelInputs.querySelectorAll("y-input");n.length===e.length?e.forEach((e,t)=>{n[t].setAttribute("value",e.value)}):this._rebuildInputs()}_updateSwatch(){if(!this._swatchPreview)return;const[e,n,t]=m(this._h,this._s,this._v);this._swatchPreview.style.backgroundColor=this.showAlpha?`rgba(${e},${n},${t},${this._a})`:`rgb(${e},${n},${t})`}_bindEvents(){this._canvas.addEventListener("pointerdown",e=>this._onCanvasDown(e)),this._hueSlider.addEventListener("pointerdown",e=>this._onHueDown(e)),this._alphaSlider&&this._alphaSlider.addEventListener("pointerdown",e=>this._onAlphaDown(e)),this._canvas.addEventListener("keydown",e=>this._onCanvasKey(e)),this._hueSlider.addEventListener("keydown",e=>this._onHueKey(e)),this._alphaSlider&&this._alphaSlider.addEventListener("keydown",e=>this._onAlphaKey(e)),this._formatSelect.addEventListener("change",e=>{const n=e.detail?.value??e.target.value;n&&n!==this.format&&(this.setAttribute("format",n),this._rebuildInputs(),this.dispatchEvent(new CustomEvent("format-change",{bubbles:!0,composed:!0,detail:{format:n}})))})}_addGlobalListeners(){window.addEventListener("pointermove",this._onPointerMove),window.addEventListener("pointerup",this._onPointerUp)}_removeGlobalListeners(){window.removeEventListener("pointermove",this._onPointerMove),window.removeEventListener("pointerup",this._onPointerUp)}_onCanvasDown(e){e.preventDefault(),this._dragging="canvas",this._addGlobalListeners(),this._updateCanvasFromPointer(e)}_updateCanvasFromPointer(e){const n=this._canvas.getBoundingClientRect(),t=v(e.clientX-n.left,0,n.width),r=v(e.clientY-n.top,0,n.height);this._s=Math.round(t/n.width100),this._v=Math.round(100(1-r/n.height)),this._updateAll(),this._emitChange()}_onHueDown(e){e.preventDefault(),this._dragging="hue",this._addGlobalListeners(),this._updateHueFromPointer(e)}_updateHueFromPointer(e){const n=this._hueSlider.getBoundingClientRect(),t=v(e.clientX-n.left,0,n.width);this._h=Math.round(t/n.width360)%360,this._updateAll(),this._emitChange()}_onAlphaDown(e){e.preventDefault(),this._dragging="alpha",this._addGlobalListeners(),this._updateAlphaFromPointer(e)}_updateAlphaFromPointer(e){const n=this._alphaSlider.getBoundingClientRect(),t=v(e.clientX-n.left,0,n.width);this._a=Math.round(t/n.width100)/100,this._updateAll(),this._emitChange()}_onGlobalMove(e){"canvas"===this._dragging?this._updateCanvasFromPointer(e):"hue"===this._dragging?this._updateHueFromPointer(e):"alpha"===this._dragging&&this._updateAlphaFromPointer(e)}_onGlobalUp(){this._dragging=null,this._removeGlobalListeners()}_onCanvasKey(e){const n=e.shiftKey?10:1;let t=!0;switch(e.key){case"ArrowRight":this._s=v(this._s+n,0,100);break;case"ArrowLeft":this._s=v(this._s-n,0,100);break;case"ArrowUp":this._v=v(this._v+n,0,100);break;case"ArrowDown":this._v=v(this._v-n,0,100);break;default:t=!1}t&&(e.preventDefault(),this._updateAll(),this._emitChange())}_onHueKey(e){const n=e.shiftKey?10:1;let t=!0;switch(e.key){case"ArrowRight":this._h=(this._h+n)%360;break;case"ArrowLeft":this._h=(this._h-n+360)%360;break;default:t=!1}t&&(e.preventDefault(),this._updateAll(),this._emitChange())}_onAlphaKey(e){const n=e.shiftKey?.1:.01;let t=!0;switch(e.key){case"ArrowRight":this._a=v(this._a+n,0,1);break;case"ArrowLeft":this._a=v(this._a-n,0,1);break;default:t=!1}t&&(e.preventDefault(),this._a=Math.round(100this._a)/100,this._updateAll(),this._emitChange())}_handleChannelInput(e,n,t){const r=this.format;if("hex"===e){const e=x(n);if(!e)return;const[t,r,o]=g(e.r,e.g,e.b);this._h=t,this._s=r,this._v=o,this._a=e.a}else if("a"===e){const e=parseFloat(n);if(isNaN(e)\|\|e<0\|\|e>1)return;this._a=Math.round(100e)/100}else{const o=parseInt(n,10);if(isNaN(o))return;const a=v(o,t.min,t.max);if("rgb"===r){const[n,t,r]=m(this._h,this._s,this._v),o="r"===e?a:n,i="g"===e?a:t,s="b"===e?a:r,[c,l,d]=g(o,i,s);this._h=c,this._s=l,this._v=d}else if("hsl"===r){const[n,t,r]=k(this._h,this._s,this._v),o="h"===e?a:n,i="s"===e?a:t,s="l"===e?a:r,[c,l,d]=y(o,i,s);this._h=c,this._s=l,this._v=d}else"hsv"===r&&("h"===e?this._h=a:"s"===e?this._s=a:"v"===e&&(this._v=a))}this._drawnHue!==this._h&&this._drawCanvas(),this._updateCanvasHandle(),this._updateHueThumb(),this._updateAlphaThumb(),this._updateSwatch(),this._updateAriaValues(),this._emitChange()}_syncValueAttr(){this._updatingValue=!0,this.setAttribute("value",this._formatColor(this.format)),this._updatingValue=!1}_emitChange(){this._syncValueAttr();const e=this._getColorRepresentations();this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._formatColor(this.format),...e,alpha:Math.round(100this._a)/100}}))}_buildStyles(){return'\n :host {\n display: inline-block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n --_swatch-size: var(--sizing-medium, 40px);\n --_canvas-width: var(--component-colorpicker-width, 260px);\n --_canvas-height: var(--component-colorpicker-canvas-height, 160px);\n }\n\n :host([size="small"]) {\n --_swatch-size: var(--sizing-small, 32px);\n --_canvas-width: var(--component-colorpicker-width-small, 200px);\n --_canvas-height: var(--component-colorpicker-canvas-height-small, 120px);\n }\n\n :host([size="large"]) {\n --_swatch-size: var(--sizing-large, 56px);\n --_canvas-width: var(--component-colorpicker-width-large, 320px);\n --_canvas-height: var(--component-colorpicker-canvas-height-large, 200px);\n }\n\n .colorpicker {\n width: var(--_canvas-width);\n display: flex;\n flex-direction: column;\n gap: var(--component-colorpicker-gap, var(--spacing-medium, 8px));\n }\n\n /* ── Canvas ── /\n .canvas-container {\n position: relative;\n width: 100%;\n height: var(--_canvas-height);\n border-radius: var(--component-colorpicker-border-radius, var(--radii-x-small, 2px));\n overflow: hidden;\n cursor: crosshair;\n touch-action: none;\n }\n\n .canvas {\n display: block;\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n }\n\n .canvas:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-content--, #0576ff);\n }\n\n .canvas-handle {\n position: absolute;\n width: var(--component-colorpicker-canvas-handle-size, 16px);\n height: var(--component-colorpicker-canvas-handle-size, 16px);\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 0 2px rgba(0,0,0,0.5);\n transform: translate(-50%, -50%);\n pointer-events: none;\n }\n\n / ── Sliders ── /\n .hue-slider,\n .alpha-slider {\n position: relative;\n width: 100%;\n height: var(--component-colorpicker-slider-height, 12px);\n border-radius: var(--component-colorpicker-border-radius, var(--radii-x-small, 2px));\n cursor: pointer;\n outline: none;\n touch-action: none;\n }\n\n .hue-slider:focus-visible,\n .alpha-slider:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-content--, #0576ff);\n }\n\n .hue-slider {\n background: linear-gradient(to right,\n hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),\n hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%),\n hsl(360,100%,50%)\n );\n }\n\n .alpha-slider {\n background-image:\n linear-gradient(45deg,\n var(--base-content-lightest, #ccc) 25%, transparent 25%,\n transparent 75%, var(--base-content-lightest, #ccc) 75%),\n linear-gradient(45deg,\n var(--base-content-lightest, #ccc) 25%, transparent 25%,\n transparent 75%, var(--base-content-lightest, #ccc) 75%);\n background-size:\n calc(var(--component-colorpicker-checkerboard-size, 8px) 2)\n calc(var(--component-colorpicker-checkerboard-size, 8px) * 2);\n background-position:\n 0 0,\n var(--component-colorpicker-checkerboard-size, 8px)\n var(--component-colorpicker-checkerboard-size, 8px);\n }\n\n .alpha-gradient {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n .hue-thumb,\n .alpha-thumb {\n position: absolute;\n top: 50%;\n width: var(--component-colorpicker-slider-thumb-size, 16px);\n height: var(--component-colorpicker-slider-thumb-size, 16px);\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 0 2px rgba(0,0,0,0.4);\n transform: translate(-50%, -50%);\n pointer-events: none;\n }\n\n /* ── Inputs row ── /\n .inputs-row {\n display: flex;\n align-items: flex-end;\n gap: var(--spacing-x-small, 4px);\n }\n\n .swatch-container {\n flex-shrink: 0;\n }\n\n .swatch-preview {\n width: var(--_swatch-size);\n height: var(--_swatch-size);\n border-radius: var(--component-colorpicker-border-radius, var(--radii-x-small, 2px));\n border: 1px solid var(--base-border, #ccc);\n }\n\n .format-select {\n flex-shrink: 0;\n width: 72px;\n }\n\n .channel-inputs {\n display: flex;\n flex: 1;\n gap: var(--spacing-2x-small, 2px);\n min-width: 0;\n }\n\n .channel-inputs y-input {\n flex: 1;\n min-width: 0;\n }\n\n .channel-inputs y-input.full-width {\n flex: 2;\n }\n '}}customElements.get("y-colorpicker")\|\|customElements.define("y-colorpicker",W);class G extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["value","format","formats","show-alpha","placeholder","name","disabled","invalid","clearable","size","label-position"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._onDocumentClick=this._onDocumentClick.bind(this),this._onPointerDown=()=>{this._clickInsidePopup=!0},this._clickInsidePopup=!1}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this.render(),this.addEventListener("pointerdown",this._onPointerDown),document.addEventListener("click",this._onDocumentClick)}disconnectedCallback(){this.removeEventListener("pointerdown",this._onPointerDown),document.removeEventListener("click",this._onDocumentClick)}attributeChangedCallback(e,n,t){if(n!==t){if("value"===e)return this._internals.setFormValue(t\|\|"",this.name),this._updateDisplay(),void(this._fromPicker\|\|this._syncPickerValue());if("name"!==e){if("format"===e){const e=this.shadowRoot.querySelector("y-colorpicker");return void(e&&e.setAttribute("format",t))}"invalid"!==e?this.shadowRoot.innerHTML&&this.render():this._updateValidationState()}else this._internals.setFormValue(this.value,t)}}get clearable(){return this.hasAttribute("clearable")}set clearable(e){e?this.setAttribute("clearable",""):this.removeAttribute("clearable")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get format(){return this.getAttribute("format")\|\|"hex"}set format(e){this.setAttribute("format",e)}get formats(){try{return JSON.parse(this.getAttribute("formats")\|\|'["hex","rgb","hsl","hsv"]')}catch{return["hex","rgb","hsl","hsv"]}}set formats(e){this.setAttribute("formats",JSON.stringify(e))}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get placeholder(){return this.getAttribute("placeholder")\|\|"Select color"}set placeholder(e){this.setAttribute("placeholder",e)}get showAlpha(){return this.hasAttribute("show-alpha")}set showAlpha(e){e?this.setAttribute("show-alpha",""):this.removeAttribute("show-alpha")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return this.getAttribute("value")\|\|""}set value(e){this.setAttribute("value",e),this._internals.setFormValue(e,this.name)}clear(){this.value="",this._internals.setFormValue("",this.name),this._updateDisplay();const e=this.shadowRoot.querySelector("y-colorpicker");e&&e.setColor(""),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:"",hex:"",rgb:"",hsl:"",hsv:"",alpha:1}}))}close(){this._setOpen(!1)}open(){this.disabled\|\|this._setOpen(!0)}render(){const e=this.disabled,n="top"===this.labelPosition,t=this.size,r='<div class="label-wrapper" part="label-wrapper"><slot name="label"></slot></div>';this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e)}</style>\n <div class="color" part="color">\n <div class="wrapper" part="wrapper">\n ${n?r:""}\n <div\n class="trigger${this.invalid?" is-invalid":""}"\n part="trigger"\n role="combobox"\n aria-haspopup="true"\n aria-expanded="false"\n tabindex="${e?"-1":"0"}"\n ${e?'aria-disabled="true"':""}\n >\n <div class="swatch${this.showAlpha?" has-alpha":""}" part="swatch"\n aria-hidden="true"\n ></div>\n <span class="display" part="display"></span>\n ${this.clearable&&this.value?'<button class="clear-btn" part="clear-btn" aria-label="Clear color" tabindex="-1" type="button">\n <y-icon name="close" size="small"></y-icon>\n </button>':""}\n </div>\n <div class="popup" part="popup" role="dialog" aria-label="Color picker" hidden>\n <y-colorpicker></y-colorpicker>\n </div>\n ${n?"":r}\n </div>\n </div>\n `;const o=this.shadowRoot.querySelector("y-colorpicker");this.value&&o.setAttribute("value",this.value),o.setAttribute("format",this.format),o.setAttribute("formats",JSON.stringify(this.formats)),this.showAlpha&&o.setAttribute("show-alpha",""),o.setAttribute("size",t),this._updateDisplay(),A(this.shadowRoot.querySelector(".label-wrapper")),e\|\|this._bindListeners()}_bindListeners(){const e=this.shadowRoot.querySelector(".trigger"),n=this.shadowRoot.querySelector(".popup"),t=this.shadowRoot.querySelector("y-colorpicker"),r=this.shadowRoot.querySelector(".clear-btn");e.addEventListener("click",e=>{r&&(e.target===r\|\|r.contains(e.target))\|\|this._setOpen(n.hidden)}),e.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),this._setOpen(n.hidden)),"Escape"===e.key&&this._setOpen(!1)}),r?.addEventListener("click",e=>{e.stopPropagation(),this.clear()}),t.addEventListener("change",e=>{if(e.composedPath()[0]!==t)return;const n=e.detail;this._fromPicker=!0,this.setAttribute("value",n.value),this._fromPicker=!1,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:n}))}),t.addEventListener("format-change",e=>{const n=e.detail?.format;n&&(this.setAttribute("format",n),this._updateDisplay())})}_buildStyles(e){const n=this.size,t={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"},r={small:"var(--component-color-swatch-size-small, var(--sizing-small, 32px))",medium:"var(--component-color-swatch-size-medium, var(--sizing-medium, 40px))",large:"var(--component-color-swatch-size-large, var(--sizing-large, 56px))"},o={small:"var(--component-inputs-padding-small)",medium:"var(--component-inputs-padding-medium)",large:"var(--component-inputs-padding-large)"},a=r[n]\|\|r.medium,i=o[n]\|\|o.medium;return`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--component-input-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .color {\n display: flex;\n flex-direction: column;\n }\n\n .wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .label-wrapper {\n display: none;\n }\n\n .trigger {\n all: unset;\n display: flex;\n align-items: center;\n gap: var(--component-color-trigger-gap, var(--spacing-x-small));\n background: var(--component-input-background);\n border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: ${i};\n min-height: ${t[n]\|\|t.medium};\n box-sizing: border-box;\n cursor: pointer;\n user-select: none;\n transition: border-color 0.2s ease-in-out;\n }\n\n .trigger:hover {\n border-color: var(--component-input-color);\n }\n\n .trigger:focus-visible {\n border-color: var(--component-input-accent);\n outline: 2px solid var(--component-input-accent);\n outline-offset: -2px;\n }\n\n .trigger.is-invalid {\n border-color: var(--component-input-error-border-color);\n background: var(--component-input-error-background);\n }\n\n / ── Swatch ── /\n .swatch {\n flex-shrink: 0;\n width: calc(${a} - ${i} - ${i});\n height: calc(${a} - ${i} - ${i});\n border-radius: var(--component-color-swatch-border-radius, var(--radii-small));\n border: 1px solid var(--base-border, #ccc);\n background-color: transparent;\n }\n\n .swatch.has-alpha {\n background-image:\n linear-gradient(transparent, transparent),\n linear-gradient(45deg,\n var(--base-content-lightest, #ccc) 25%, transparent 25%,\n transparent 75%, var(--base-content-lightest, #ccc) 75%),\n linear-gradient(45deg,\n var(--base-content-lightest, #ccc) 25%, transparent 25%,\n transparent 75%, var(--base-content-lightest, #ccc) 75%);\n background-size: 100% 100%, 8px 8px, 8px 8px;\n background-position: 0 0, 0 0, 4px 4px;\n background-color: transparent;\n }\n\n / ── Display ── /\n .display {\n flex: 1;\n min-width: 0;\n font-family: inherit;\n font-size: 1em;\n color: inherit;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .display.is-placeholder {\n color: var(--base-content-light);\n }\n\n / ── Clear button ── /\n .clear-btn {\n all: unset;\n display: flex;\n align-items: center;\n cursor: pointer;\n flex-shrink: 0;\n color: var(--component-input-icon-color);\n opacity: 0.7;\n border-radius: 50%;\n padding: 2px;\n }\n\n .clear-btn:hover {\n opacity: 1;\n background: var(--base-background-component);\n }\n\n / ── Label ── /\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-input-label-color);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-input-error-color);\n }\n\n / ── Popup ── /\n .popup {\n position: absolute;\n top: calc(100% + var(--component-color-popup-offset, 4px));\n left: 0;\n z-index: var(--component-color-z-index, 200);\n background: var(--base-background-app);\n border: var(--component-inputs-border-width) solid var(--base-border);\n border-radius: var(--component-colorpicker-border-radius, var(--radii-x-small));\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n padding: var(--spacing-small, 8px);\n }\n `}_onDocumentClick(){this._clickInsidePopup?this._clickInsidePopup=!1:this._setOpen(!1)}_positionPopup(e,n){const t=n.getBoundingClientRect(),r=e.offsetWidth,o=e.offsetHeight,a=parseInt(getComputedStyle(this).getPropertyValue("--component-color-popup-offset")\|\|"4",10),i=window.innerWidth,s=window.innerHeight-t.bottom-a,c=t.top-a;s>=o\|\|s>=c?(e.style.top=`calc(100% + ${a}px)`,e.style.bottom="auto"):(e.style.top="auto",e.style.bottom=`calc(100% + ${a}px)`);i-t.left>=r?(e.style.left="0",e.style.right="auto"):(e.style.left="auto",e.style.right="0")}_setOpen(e){const n=this.shadowRoot.querySelector(".popup"),t=this.shadowRoot.querySelector(".trigger");if(!n\|\|!t)return;const r=!n.hidden;n.hidden=!e,t.setAttribute("aria-expanded",String(e)),e?this._positionPopup(n,t):r&&t.focus({preventScroll:!0})}_syncPickerValue(){const e=this.shadowRoot.querySelector("y-colorpicker");e&&this.value&&e.setColor(this.value)}_updateClearBtn(){if(!this.clearable)return;const e=this.shadowRoot.querySelector(".trigger");if(!e)return;const n=e.querySelector(".clear-btn"),t=e.querySelector(".display");if(this.value&&!n){const e=document.createElement("button");e.className="clear-btn",e.setAttribute("part","clear-btn"),e.setAttribute("aria-label","Clear color"),e.setAttribute("tabindex","-1"),e.setAttribute("type","button"),e.innerHTML='<y-icon name="close" size="small"></y-icon>',t.insertAdjacentElement("afterend",e),e.addEventListener("click",e=>{e.stopPropagation(),this.clear()})}else!this.value&&n&&n.remove()}_updateDisplay(){const e=this.shadowRoot.querySelector(".display"),n=this.shadowRoot.querySelector(".swatch");if(e&&(e.textContent=this.value\|\|this.placeholder,e.classList.toggle("is-placeholder",!this.value)),n){const e=this.value?x(this.value):null;if(e){const t=`rgba(${e.r}, ${e.g}, ${e.b}, ${e.a})`;n.classList.contains("has-alpha")?(n.style.backgroundImage=`linear-gradient(${t}, ${t}), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%)`,n.style.backgroundColor="transparent"):(n.style.backgroundColor=t,n.style.backgroundImage="")}else this.value\|\|(n.style.backgroundColor="",n.style.backgroundImage="")}this._updateClearBtn()}_updateValidationState(){const e=this.shadowRoot.querySelector(".trigger"),n=this.shadowRoot.querySelector(".label-wrapper");e?.classList.toggle("is-invalid",this.invalid),n?.classList.toggle("is-invalid",this.invalid)}}customElements.get("y-color")\|\|customElements.define("y-color",G);const K=["January","February","March","April","May","June","July","August","September","October","November","December"],J=["Su","Mo","Tu","We","Th","Fr","Sa"];class X extends HTMLElement{static get observedAttributes(){return["mode","value","min","max","show-hours","show-minutes","show-seconds","show-years","show-months","show-days","format","hour-format","minute-interval","second-interval","color","mobile-breakpoint"]}constructor(){super(),this.attachShadow({mode:"open"}),this._viewDate=new Date,this._viewDate.setDate(1),this._viewDate.setHours(0,0,0,0),this._startDate=null,this._endDate=null,this._hoverDate=null,this._awaitingEnd=!1,this._startTime={h:0,m:0,s:0},this._endTime={h:0,m:0,s:0},this._mql=null,this._isMobile=!1,this._onMediaChange=this._onMediaChange.bind(this)}connectedCallback(){this._setupMediaQuery(),this._parseValue(),this.render()}disconnectedCallback(){this._teardownMediaQuery()}attributeChangedCallback(e,n,t){n!==t&&(this._suppressParse\|\|("mobile-breakpoint"===e&&this._setupMediaQuery(),"value"===e&&this._parseValue(),this.shadowRoot.innerHTML&&this.render()))}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get format(){return this.getAttribute("format")\|\|"MM/DD/YYYY"}set format(e){this.setAttribute("format",e)}get hourFormat(){return this.getAttribute("hour-format")\|\|"12"}set hourFormat(e){this.setAttribute("hour-format",e)}get max(){return this.getAttribute("max")\|\|""}set max(e){this.setAttribute("max",e)}get min(){return this.getAttribute("min")\|\|""}set min(e){this.setAttribute("min",e)}get minuteInterval(){return parseInt(this.getAttribute("minute-interval")\|\|"5",10)}set minuteInterval(e){this.setAttribute("minute-interval",String(e))}get mobile(){return this._isMobile}get mobileBreakpoint(){return this.getAttribute("mobile-breakpoint")\|\|""}set mobileBreakpoint(e){e?this.setAttribute("mobile-breakpoint",e):this.removeAttribute("mobile-breakpoint")}get mode(){return this.getAttribute("mode")\|\|"single"}set mode(e){this.setAttribute("mode",e)}get secondInterval(){return parseInt(this.getAttribute("second-interval")\|\|"5",10)}set secondInterval(e){this.setAttribute("second-interval",String(e))}get showDays(){return"false"!==this.getAttribute("show-days")}set showDays(e){this.setAttribute("show-days",e?"true":"false")}get showHours(){return this.hasAttribute("show-hours")}set showHours(e){e?this.setAttribute("show-hours",""):this.removeAttribute("show-hours")}get showMinutes(){return this.hasAttribute("show-minutes")}set showMinutes(e){e?this.setAttribute("show-minutes",""):this.removeAttribute("show-minutes")}get showMonths(){return"false"!==this.getAttribute("show-months")}set showMonths(e){this.setAttribute("show-months",e?"true":"false")}get showSeconds(){return this.hasAttribute("show-seconds")}set showSeconds(e){e?this.setAttribute("show-seconds",""):this.removeAttribute("show-seconds")}get showYears(){return"false"!==this.getAttribute("show-years")}set showYears(e){this.setAttribute("show-years",e?"true":"false")}get value(){return this.getAttribute("value")\|\|""}set value(e){this.setAttribute("value",e)}clear(){this._startDate=null,this._endDate=null,this._awaitingEnd=!1,this._hoverDate=null,this.removeAttribute("value"),this.render()}formatDate(e){return this._formatDate(e)}navigateTo(e,n){this._viewDate.setFullYear(e),void 0!==n&&this._viewDate.setMonth(n),this._viewDate.setDate(1),this.render()}render(){const e=this.showHours\|\|this.showMinutes\|\|this.showSeconds,n="range"===this.mode;this.shadowRoot.innerHTML=`\n <style>${this._buildStyles()}</style>\n <div class="datepicker${n?" range":""}${this._isMobile&&n?" mobile":""}">\n ${this._buildPanel("left",e)}\n ${n?this._buildPanel("right",e):""}\n </div>\n `,this._bindListeners(),e&&this._scrollToSelectedTime()}_applyTimesToDates(){this._startDate&&this._startDate.setHours(this._startTime.h,this._startTime.m,this._startTime.s,0),this._endDate&&this._endDate.setHours(this._endTime.h,this._endTime.m,this._endTime.s,0)}_bindListeners(){const e=this.shadowRoot;e.querySelectorAll(".nav-btn").forEach(e=>{e.addEventListener("click",()=>{const n=e.dataset.action,t=n.includes("year")?12:1,r=n.includes("prev")?-1:1;this._navigate(rt)})}),e.querySelectorAll(".month-sel").forEach(e=>{e.addEventListener("change",()=>{const n=parseInt(e.value);if("right"===e.dataset.side){const e=new Date(this._viewDate);e.setMonth(n-1),e.setDate(1),this._viewDate=e}else this._viewDate.setMonth(n);this.render()})}),e.querySelectorAll(".year-sel").forEach(e=>{e.addEventListener("change",()=>{const n=parseInt(e.value);if("right"===e.dataset.side){const e=n-this._viewDateForSide("right").getFullYear();this._viewDate.setFullYear(this._viewDate.getFullYear()+e)}else this._viewDate.setFullYear(n);this.render()})}),e.querySelectorAll(".day-btn").forEach(e=>{e.addEventListener("click",()=>this._handleDayClick(new Date(e.dataset.date))),e.addEventListener("mouseenter",()=>{this._awaitingEnd&&(this._hoverDate=new Date(e.dataset.date),this.render())})}),e.querySelectorAll(".month-btn").forEach(e=>{e.addEventListener("click",()=>{this._viewDate.setMonth(parseInt(e.dataset.month)),this.render()})}),e.querySelectorAll(".year-btn").forEach(e=>{e.addEventListener("click",()=>{this._viewDate.setFullYear(parseInt(e.dataset.year)),this.render()})}),e.querySelectorAll("[data-hour]").forEach(e=>{e.addEventListener("click",()=>{const n=e.dataset.side,t=parseInt(e.dataset.hour);"right"===n?this._endTime.h=t:this._startTime.h=t,this._applyTimesToDates(),this._emitChange("hour"),this.render()})}),e.querySelectorAll("[data-minute]").forEach(e=>{e.addEventListener("click",()=>{const n=e.dataset.side,t=parseInt(e.dataset.minute);"right"===n?this._endTime.m=t:this._startTime.m=t,this._applyTimesToDates(),this._emitChange("minute"),this.render()})}),e.querySelectorAll("[data-second]").forEach(e=>{e.addEventListener("click",()=>{const n=e.dataset.side,t=parseInt(e.dataset.second);"right"===n?this._endTime.s=t:this._startTime.s=t,this._applyTimesToDates(),this._emitChange("second"),this.render()})})}_buildDayGrid(e){const n=e.getFullYear(),t=e.getMonth(),r=new Date(n,t,1).getDay(),o=new Date(n,t+1,0).getDate();return`\n <div class="day-grid">\n ${J.map(e=>`<span class="day-hdr">${e}</span>`).join("")}\n ${Array(r).fill("<span></span>").join("")}\n ${Array.from({length:o},(e,r)=>{const o=r+1,a=new Date(n,t,o),i=this._isDisabled(a),s=this._isRangeEdge(a),c=this._sameDay(a,this._startDate),l=this._inRange(a);let d="flat",p="base";return s\|\|c?(d="filled",p=this.color):l&&(d="flat",p=this.color),`<y-button\n class="day-btn"\n style-type="${d}"\n color="${p}"\n size="medium"\n data-date="${a.toISOString()}"\n ${i?"disabled":""}\n aria-label="${a.toDateString()}"\n aria-pressed="${s\|\|c}"\n >${o}</y-button>`}).join("")}\n </div>\n `}_buildHeader(e,n,t){const r=e.getFullYear(),o=e.getMonth();if(!this.showDays){let e;if(this.showMonths)e=String(r);else{e=`${this._minDate()?.getFullYear()??r-10} – ${this._maxDate()?.getFullYear()??r+10}`}return`\n <div class="cal-header">\n <div class="header-selects">\n <span class="header-label">${e}</span>\n </div>\n </div>\n `}const a=!t\|\|"left"===n,i=!t\|\|"right"===n,s=this._minDate()?.getFullYear()??r-50,c=this._maxDate()?.getFullYear()??r+50,l=JSON.stringify(K.map((e,n)=>({value:String(n),label:e}))),d=JSON.stringify(Array.from({length:c-s+1},(e,n)=>({value:String(s+n),label:String(s+n)})));return`\n <div class="cal-header">\n <div class="nav-start">\n ${a?`<y-button class="nav-btn" data-action="prev-year" data-side="${n}" style-type="flat" size="small" aria-label="Previous year"><y-icon name="expand-left" size="small"></y-icon></y-button>`:""}\n ${a?`<y-button class="nav-btn" data-action="prev-month" data-side="${n}" style-type="flat" size="small" aria-label="Previous month"><y-icon name="chevron-left" size="small"></y-icon></y-button>`:""}\n </div>\n <div class="header-selects">\n ${this.showMonths?`<y-select class="month-sel" data-side="${n}" size="small" value="${o}" options='${l}'></y-select>`:""}\n ${this.showYears?`<y-select class="year-sel" data-side="${n}" size="small" value="${r}" options='${d}'></y-select>`:""}\n </div>\n <div class="nav-end">\n ${i?`<y-button class="nav-btn" data-action="next-month" data-side="${n}" style-type="flat" size="small" aria-label="Next month"><y-icon name="chevron-right" size="small"></y-icon></y-button>`:""}\n ${i?`<y-button class="nav-btn" data-action="next-year" data-side="${n}" style-type="flat" size="small" aria-label="Next year"><y-icon name="expand-right" size="small"></y-icon></y-button>`:""}\n </div>\n </div>\n `}_buildMonthGrid(e,n){const t=e.getFullYear();return`\n <div class="month-grid">\n ${K.map((e,r)=>{const o=this._isMonthDisabled(t,r),a=this._startDate&&this._startDate.getFullYear()===t&&this._startDate.getMonth()===r;return`<y-button\n class="month-btn"\n style-type="${a?"filled":"flat"}"\n color="${a?this.color:"base"}"\n size="small"\n data-month="${r}"\n data-side="${n}"\n ${o?"disabled":""}\n >${e.slice(0,3)}</y-button>`}).join("")}\n </div>\n `}_buildPanel(e,n){const t=this._viewDateForSide(e),r="range"===this.mode;return`\n <div class="panel" data-side="${e}">\n <div class="panel-body">\n ${this._buildHeader(t,e,r)}\n ${this.showDays?this._buildDayGrid(t):""}\n ${!this.showDays&&this.showMonths?this._buildMonthGrid(t,e):""}\n ${this.showDays\|\|this.showMonths?"":this._buildYearGrid(t)}\n </div>\n ${n?this._buildTimeColumn(e):""}\n </div>\n `}_buildStyles(){return"\n :host {\n display: inline-block;\n font-family: var(--font-family-body, sans-serif);\n font-size: var(--font-size-label, 0.875rem);\n }\n\n .datepicker {\n display: inline-flex;\n gap: 0;\n background: var(--component-datepicker-background);\n border: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n border-radius: var(--component-datepicker-border-radius);\n overflow: hidden;\n }\n\n .datepicker.range {\n display: inline-flex;\n }\n\n .datepicker.range.mobile {\n flex-direction: column;\n }\n\n .datepicker.range.mobile .panel + .panel {\n border-left: none;\n border-top: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n }\n\n .panel {\n display: flex;\n align-items: stretch;\n }\n\n .panel + .panel {\n border-left: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n }\n\n .panel-body {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--spacing-small, 8px);\n padding: var(--spacing-medium, 16px);\n }\n\n /* ---- Header ---- /\n\n .cal-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-2x-small, 4px);\n width: 100%;\n }\n\n .nav-start, .nav-end {\n display: flex;\n gap: 2px;\n flex-shrink: 0;\n }\n\n .header-selects {\n display: flex;\n gap: var(--spacing-x-small, 6px);\n flex: 1;\n justify-content: center;\n align-items: center;\n }\n\n .month-sel { min-width: 120px; }\n .year-sel { min-width: 80px; }\n\n .header-label {\n font-weight: 600;\n white-space: nowrap;\n }\n\n / ---- Day grid ---- /\n\n .day-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n column-gap: 2px;\n row-gap: 6px;\n width: 100%;\n }\n\n .day-hdr {\n text-align: center;\n font-size: var(--font-size-small, 0.75em);\n font-weight: 600;\n color: var(--component-datepicker-header-color);\n padding: 4px 0;\n }\n\n .day-btn {\n width: 100%;\n --component-button-border-radius: 50%;\n }\n\n / ---- Month / Year grids ---- /\n\n .month-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--spacing-x-small, 6px);\n padding: var(--spacing-x-small, 6px) 0;\n }\n\n .year-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--spacing-x-small, 6px);\n max-height: 220px;\n overflow-y: auto;\n padding: var(--spacing-x-small, 6px) 0;\n scrollbar-width: thin;\n }\n\n / ---- Time column ---- /\n\n .time-column {\n display: flex;\n align-self: flex-start;\n border-left: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n overflow: hidden;\n margin: var(--spacing-medium, 16px) 0;\n }\n\n .time-col-wrap {\n display: flex;\n flex-direction: column;\n }\n\n .time-col-wrap + .time-col-wrap {\n border-left: var(--component-datepicker-border-width) solid var(--component-datepicker-border-color);\n }\n\n .time-col-hdr {\n text-align: center;\n font-size: var(--font-size-small, 0.75em);\n font-weight: 600;\n color: var(--component-datepicker-header-color);\n padding: 6px 0 2px;\n flex-shrink: 0;\n }\n\n .time-column.time-disabled {\n opacity: 0.4;\n pointer-events: none;\n }\n\n .time-col {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow-y: auto;\n height: 280px;\n padding: var(--spacing-small, 8px) var(--spacing-x-small, 6px);\n scrollbar-width: thin;\n }\n\n .time-col::-webkit-scrollbar { width: 4px; }\n .time-col::-webkit-scrollbar-track { background: transparent; }\n .time-col::-webkit-scrollbar-thumb {\n background: var(--base-border);\n border-radius: 2px;\n }\n\n .time-btn { white-space: nowrap; }\n "}_buildTimeColumn(e){const n="right"===e?this._endTime:this._startTime,t="right"===e&&!this._endDate,r="24"===this.hourFormat,o=Array.from({length:24},(t,o)=>{const a=r?`${String(o).padStart(2,"0")}:00`:`${0===o?12:o>12?o-12:o}:00 ${o<12?"AM":"PM"}`,i=n.h===o;return`<y-button\n class="time-btn${i?" selected":""}"\n style-type="${i?"filled":"flat"}"\n color="${i?this.color:"base"}"\n size="small"\n data-hour="${o}"\n data-side="${e}"\n >${a}</y-button>`}).join(""),a=this.minuteInterval,i=this.secondInterval;return`\n <div class="time-column${t?" time-disabled":""}">\n <div class="time-col-wrap">\n <span class="time-col-hdr">Hr</span>\n <div class="time-col" data-col="hours">${o}</div>\n </div>\n ${this.showMinutes?`\n <div class="time-col-wrap">\n <span class="time-col-hdr">Min</span>\n <div class="time-col" data-col="minutes">\n ${Array.from({length:Math.floor(60/a)},(e,n)=>na).map(t=>{const r=Math.floor(n.m/a)a===t;return`<y-button\n class="time-btn${r?" selected":""}"\n style-type="${r?"filled":"flat"}"\n color="${r?this.color:"base"}"\n size="small"\n data-minute="${t}"\n data-side="${e}"\n >${String(t).padStart(2,"0")}</y-button>`}).join("")}\n </div>\n </div>\n `:""}\n ${this.showSeconds?`\n <div class="time-col-wrap">\n <span class="time-col-hdr">Sec</span>\n <div class="time-col" data-col="seconds">\n ${Array.from({length:Math.floor(60/i)},(e,n)=>ni).map(t=>{const r=Math.floor(n.s/i)i===t;return`<y-button\n class="time-btn${r?" selected":""}"\n style-type="${r?"filled":"flat"}"\n color="${r?this.color:"base"}"\n size="small"\n data-second="${t}"\n data-side="${e}"\n >${String(t).padStart(2,"0")}</y-button>`}).join("")}\n </div>\n </div>\n `:""}\n </div>\n `}_buildValueString(){if("range"===this.mode){return[this._startDate?this._startDate.toISOString():"",this._endDate?this._endDate.toISOString():""].filter(Boolean).join(",")}return this._startDate?this._startDate.toISOString():""}_buildYearGrid(e){const n=this._startDate?.getFullYear(),t=this._minDate()?.getFullYear()??e.getFullYear()-10,r=this._maxDate()?.getFullYear()??e.getFullYear()+10;return`\n <div class="year-grid">\n ${Array.from({length:r-t+1},(e,n)=>t+n).map(e=>`<y-button\n class="year-btn"\n style-type="${e===n?"filled":"flat"}"\n color="${e===n?this.color:"base"}"\n size="small"\n data-year="${e}"\n >${e}</y-button>`).join("")}\n </div>\n `}_emitChange(e){this._suppressParse=!0;const n=this._buildValueString();n!==this.getAttribute("value")&&this.setAttribute("value",n),this._suppressParse=!1,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:n,source:e,startDate:this._startDate?new Date(this._startDate):null,endDate:this._endDate?new Date(this._endDate):null,formatted:"range"===this.mode?`${this._formatDate(this._startDate)}${this._endDate?" - "+this._formatDate(this._endDate):""}`:this._formatDate(this._startDate)}}))}_formatDate(e){if(!e\|\|isNaN(e))return"";const n=e=>String(e).padStart(2,"0"),t=e.getHours(),r=t%12\|\|12;return this.format.replace("YYYY",e.getFullYear()).replace("MM",n(e.getMonth()+1)).replace("DD",n(e.getDate())).replace("HH",n(t)).replace("hh",n(r)).replace("mm",n(e.getMinutes())).replace("ss",n(e.getSeconds())).replace("A",t>=12?"PM":"AM").replace("a",t>=12?"pm":"am")}_getBreakpointPx(){const e=this.mobileBreakpoint;if(e){const n=parseInt(e,10);if(!isNaN(n)&&n>0)return n}const n=getComputedStyle(document.documentElement).getPropertyValue("--component-datepicker-mobile-breakpoint").trim();if(n){const e=parseInt(n,10);if(!isNaN(e)&&e>0)return e}return 768}_handleDayClick(e){"range"===this.mode?this._awaitingEnd?(e<this._startDate?(this._endDate=new Date(this._startDate),this._startDate=e):this._endDate=e,this._awaitingEnd=!1,this._hoverDate=null):(this._startDate=e,this._endDate=null,this._awaitingEnd=!0):this._startDate=e,this._applyTimesToDates(),this._emitChange("day"),this.render()}_inRange(e){if("range"!==this.mode\|\|!this._startDate)return!1;const n=this._endDate\|\|(this._awaitingEnd?this._hoverDate:null);if(!n)return!1;const[t,r]=this._startDate<=n?[this._startDate,n]:[n,this._startDate];return e>t&&e<r}_isDisabled(e){const n=this._minDate(),t=this._maxDate();return!!(n&&e<n)\|\|!!(t&&e>t)}_isMonthDisabled(e,n){const t=this._minDate(),r=this._maxDate();return!!(t&&new Date(e,n+1,0)<t)\|\|!!(r&&new Date(e,n,1)>r)}_isRangeEdge(e){return this._sameDay(e,this._startDate)\|\|this._sameDay(e,this._endDate)}_maxDate(){return this.max?new Date(this.max):null}_minDate(){return this.min?new Date(this.min):null}_navigate(e){this._viewDate.setMonth(this._viewDate.getMonth()+e),this.render()}_onMediaChange(e){this._isMobile=e.matches,this.render()}_parseValue(){const e=this.value;if(!e)return this._startDate=null,void(this._endDate=null);if("range"===this.mode){const n=e.split(",");this._startDate=n[0]?new Date(n[0]):null,this._endDate=n[1]?new Date(n[1]):null}else this._startDate=new Date(e);const n=e=>this.showMinutes?Math.floor(e/this.minuteInterval)this.minuteInterval:0,t=e=>this.showSeconds?Math.floor(e/this.secondInterval)this.secondInterval:0;if(this._startDate&&!isNaN(this._startDate)){this._startTime={h:this._startDate.getHours(),m:n(this._startDate.getMinutes()),s:t(this._startDate.getSeconds())};const e=new Date(this._startDate);e.setDate(1),e.setHours(0,0,0,0),this._viewDate=e}this._endDate&&!isNaN(this._endDate)&&(this._endTime={h:this._endDate.getHours(),m:n(this._endDate.getMinutes()),s:t(this._endDate.getSeconds())})}_sameDay(e,n){return!(!e\|\|!n)&&(e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()&&e.getDate()===n.getDate())}_scrollToSelectedTime(){requestAnimationFrame(()=>{this.shadowRoot.querySelectorAll(".time-col").forEach(e=>{const n=e.querySelector(".selected");n&&n.scrollIntoView({block:"center"})})})}_setupMediaQuery(){this._teardownMediaQuery();const e=this._getBreakpointPx();this._mql=window.matchMedia(`(max-width: ${e}px)`),this._isMobile=this._mql.matches,this._mql.addEventListener("change",this._onMediaChange)}_teardownMediaQuery(){this._mql&&(this._mql.removeEventListener("change",this._onMediaChange),this._mql=null)}_viewDateForSide(e){if("right"===e){const e=new Date(this._viewDate);return e.setMonth(e.getMonth()+1),e}return this._viewDate}}customElements.get("y-datepicker")\|\|customElements.define("y-datepicker",X);class U extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["mode","value","min","max","format","placeholder","size","disabled","invalid","name","label-position","color","clearable","show-hours","show-minutes","show-seconds","hour-format","minute-interval","second-interval","show-years","show-months","show-days","mobile-breakpoint","native-mobile"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._onDocumentClick=this._onDocumentClick.bind(this),this._suppressBlurApply=!1,this._selectedParts=new Set,this._mql=null,this._isMobile=!1,this._onMediaChange=this._onMediaChange.bind(this)}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this._setupMediaQuery(),this.render(),document.addEventListener("click",this._onDocumentClick)}disconnectedCallback(){document.removeEventListener("click",this._onDocumentClick),this._teardownMediaQuery()}attributeChangedCallback(e,n,t){if(n!==t){if("mobile-breakpoint"===e&&this._setupMediaQuery(),"value"===e)return this._internals.setFormValue(t,this.getAttribute("name")),this._updateDisplay(),void this._syncPickerValue();"name"!==e?"invalid"!==e?this.shadowRoot.innerHTML&&this.render():this._updateValidationState():this._internals.setFormValue(this.value,t)}}get clearable(){return this.hasAttribute("clearable")}set clearable(e){e?this.setAttribute("clearable",""):this.removeAttribute("clearable")}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get format(){return this.hasAttribute("format")?this.getAttribute("format"):this.showHours\|\|this.showMinutes\|\|this.showSeconds?this.showSeconds?"MM/DD/YYYY hh:mm:ss A":"MM/DD/YYYY hh:mm A":"MM/DD/YYYY"}set format(e){this.setAttribute("format",e)}get hourFormat(){return this.getAttribute("hour-format")\|\|"12"}set hourFormat(e){this.setAttribute("hour-format",e)}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get max(){return this.getAttribute("max")\|\|""}set max(e){this.setAttribute("max",e)}get min(){return this.getAttribute("min")\|\|""}set min(e){this.setAttribute("min",e)}get minuteInterval(){return parseInt(this.getAttribute("minute-interval")\|\|"5",10)}set minuteInterval(e){this.setAttribute("minute-interval",String(e))}get mobile(){return this._isMobile}get nativeMobile(){return this.hasAttribute("native-mobile")}set nativeMobile(e){e?this.setAttribute("native-mobile",""):this.removeAttribute("native-mobile")}get mobileBreakpoint(){return this.getAttribute("mobile-breakpoint")\|\|""}set mobileBreakpoint(e){e?this.setAttribute("mobile-breakpoint",e):this.removeAttribute("mobile-breakpoint")}get mode(){return this.getAttribute("mode")\|\|"single"}set mode(e){this.setAttribute("mode",e)}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get placeholder(){return this.getAttribute("placeholder")\|\|("range"===this.mode?"Select date range":"Select date")}set placeholder(e){this.setAttribute("placeholder",e)}get secondInterval(){return parseInt(this.getAttribute("second-interval")\|\|"5",10)}set secondInterval(e){this.setAttribute("second-interval",String(e))}get showDays(){return"false"!==this.getAttribute("show-days")}set showDays(e){this.setAttribute("show-days",e?"true":"false")}get showHours(){return this.hasAttribute("show-hours")}set showHours(e){e?this.setAttribute("show-hours",""):this.removeAttribute("show-hours")}get showMinutes(){return this.hasAttribute("show-minutes")}set showMinutes(e){e?this.setAttribute("show-minutes",""):this.removeAttribute("show-minutes")}get showMonths(){return"false"!==this.getAttribute("show-months")}set showMonths(e){this.setAttribute("show-months",e?"true":"false")}get showSeconds(){return this.hasAttribute("show-seconds")}set showSeconds(e){e?this.setAttribute("show-seconds",""):this.removeAttribute("show-seconds")}get showYears(){return"false"!==this.getAttribute("show-years")}set showYears(e){this.setAttribute("show-years",e?"true":"false")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return this.getAttribute("value")\|\|""}set value(e){this.setAttribute("value",e),this._internals.setFormValue(e,this.name)}clear(){this._suppressBlurApply=!0,this.value="",this._internals.setFormValue("",this.name),this._updateDisplay();const e=this.shadowRoot.querySelector("y-datepicker");e&&e.clear(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:"",startDate:null,endDate:null,formatted:""}}))}close(){this._setOpen(!1)}open(){this._setOpen(!0)}render(){if(this._isMobile&&this.nativeMobile)return void this._renderMobile();const e=this.disabled,n="top"===this.labelPosition,t='<div class="label-wrapper"><slot name="label"></slot></div>',r=[`mode="${this.mode}"`,`color="${this.color}"`,`format="${this.format}"`,this.value?`value="${this.value}"`:"",this.min?`min="${this.min}"`:"",this.max?`max="${this.max}"`:"",this.hasAttribute("show-hours")?"show-hours":"",this.hasAttribute("show-minutes")?"show-minutes":"",this.hasAttribute("show-seconds")?"show-seconds":"","24"===this.getAttribute("hour-format")?'hour-format="24"':"",this.hasAttribute("minute-interval")?`minute-interval="${this.minuteInterval}"`:"",this.hasAttribute("second-interval")?`second-interval="${this.secondInterval}"`:"","false"===this.getAttribute("show-years")?'show-years="false"':"","false"===this.getAttribute("show-months")?'show-months="false"':"","false"===this.getAttribute("show-days")?'show-days="false"':"",this.mobileBreakpoint?`mobile-breakpoint="${this.mobileBreakpoint}"`:""].filter(Boolean).join(" "),o=this._getFormattedDisplay();this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e)}</style>\n <div class="wrapper">\n ${n?t:""}\n <div\n class="trigger${this.invalid?" is-invalid":""}"\n role="combobox"\n aria-expanded="false"\n aria-haspopup="true"\n tabindex="-1"\n >\n <slot name="left-icon"></slot>\n <input\n class="display"\n type="text"\n value="${o}"\n placeholder="${this.placeholder}"\n autocomplete="off"\n spellcheck="false"\n ${e?"disabled":""}\n >\n ${this.clearable&&this.value?'<button class="clear-btn" aria-label="Clear date" tabindex="-1">\n <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>\n </button>':""}\n <y-icon name="calendar" size="small" class="cal-icon"></y-icon>\n </div>\n <div class="popup" hidden>\n <y-datepicker ${r}></y-datepicker>\n </div>\n ${n?"":t}\n </div>\n `,A(this.shadowRoot.querySelector(".label-wrapper")),e\|\|this._bindListeners()}_applyParsedDate(e){const n=e.toISOString();this.setAttribute("value",n),this._internals.setFormValue(n,this.name),this._syncPickerValue(),this._updateClearBtn();const t=this.shadowRoot.querySelector(".display");t&&(t.value=this._getFormattedDisplay()),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:n,startDate:e,endDate:null,formatted:this._getFormattedDisplay()}}))}_applyRangeValue(e,n){const t=e.toISOString(),r=n?n.toISOString():"",o=r?`${t},${r}`:t;this.setAttribute("value",o),this._internals.setFormValue(o,this.name),this._syncPickerValue(),this._updateClearBtn();const a=this.shadowRoot.querySelector(".display");a&&(a.value=this._getFormattedDisplay()),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:o,startDate:e,endDate:n,formatted:this._getFormattedDisplay()}}))}_bindListeners(){const e=this.shadowRoot.querySelector(".trigger"),n=this.shadowRoot.querySelector(".popup"),t=this.shadowRoot.querySelector("y-datepicker"),r=this.shadowRoot.querySelector(".clear-btn"),o=this.shadowRoot.querySelector(".display");e.addEventListener("click",e=>{r&&r.contains(e.target)\|\|(!o\|\|e.target!==o&&!o.contains(e.target)?(this._setOpen(n.hidden),n.hidden\|\|(o?.focus(),o?.select())):this._setOpen(!0))}),e.addEventListener("keydown",e=>{e.target!==o&&("Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),this._setOpen(n.hidden)),"Escape"===e.key&&this._setOpen(!1))}),r?.addEventListener("click",e=>{e.stopPropagation(),this.clear()}),o?.addEventListener("focus",()=>{this._setOpen(!0),o.select()}),o?.addEventListener("input",()=>{const e=o.value;if("range"===this.mode)return void this._handleRangeTypeahead(e,t);const n=this._parseTypedDate(e);if(n)return void(t.value=n.toISOString());const r=this._parsePartialInput(e);if(!r)return;const a=new Date,i=r.year??a.getFullYear(),s=void 0!==r.month?r.month-1:void 0;if(r.day&&void 0!==s){const e=new Date(i,s,r.day);if(e.getMonth()===s&&e.getDate()===r.day)return void(t.value=e.toISOString())}t.navigateTo(i,s)}),o?.addEventListener("keydown",e=>{if("Enter"===e.key){if(e.preventDefault(),e.stopPropagation(),"range"===this.mode){const e=this._parseRangeInput(o.value);return void(e&&(this._applyRangeValue(e.start,e.end),this._setOpen(!1)))}const n=this._parseTypedDate(o.value);if(n)return this._applyParsedDate(n),void this._setOpen(!1);const t=this._buildPresumedDate(this._parsePartialInput(o.value));t&&(this._applyParsedDate(t),this._setOpen(!1))}else"Escape"===e.key&&(e.stopPropagation(),o.value=this._getFormattedDisplay(),this._setOpen(!1))}),o?.addEventListener("blur",()=>{const e=o.value.trim();setTimeout(()=>{if(this._suppressBlurApply)return this._suppressBlurApply=!1,void(o.value=this._getFormattedDisplay());if(!e)return void(this.value&&this.clear());if("range"===this.mode){const n=this._parseRangeInput(e);return void(n?this._applyRangeValue(n.start,n.end):(o.value=this._getFormattedDisplay(),this._syncPickerValue()))}const n=this._parseTypedDate(e);n?this._applyParsedDate(n):(o.value=this._getFormattedDisplay(),this._syncPickerValue())},0)}),t.addEventListener("change",e=>{if(e.composedPath()[0]!==t)return;this._suppressBlurApply=!0;const{value:n,formatted:r}=e.detail;if(this.setAttribute("value",n),this._internals.setFormValue(n,this.name),o&&(o.value=r\|\|""),this._updateClearBtn(),"single"===this.mode&&n){const n=e.detail.source;n&&this._selectedParts.add(n);const r=["day"];t.showHours&&r.push("hour"),t.showMinutes&&r.push("minute"),t.showSeconds&&r.push("second"),r.every(e=>this._selectedParts.has(e))&&this._setOpen(!1)}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:e.detail}))})}_bindMobileListeners(){const e=this.shadowRoot,n=e.querySelector(".clear-btn");n?.addEventListener("click",e=>{e.stopPropagation(),this.clear()}),e.querySelectorAll(".native-date").forEach(n=>{n.addEventListener("change",()=>{if("range"===this.mode){const n=e.querySelector('[data-side="start"]'),t=e.querySelector('[data-side="end"]'),r=n?.value?new Date(n.value).toISOString():"",o=t?.value?new Date(t.value).toISOString():"",a=[r,o].filter(Boolean).join(",");this.setAttribute("value",a),this._internals.setFormValue(a,this.name),this._updateClearBtn(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:a,startDate:r?new Date(r):null,endDate:o?new Date(o):null,formatted:this._getFormattedDisplay()}}))}else{const e=n.value;if(!e)return void this.clear();const t=new Date(e);isNaN(t)\|\|this._applyParsedDate(t)}})})}_buildPresumedDate(e){if(!e)return null;const n=new Date,t=e.year??n.getFullYear(),r=void 0!==e.month?e.month-1:n.getMonth(),o=e.day??1,a=e.hour??0,i=e.minute??0,s=e.second??0,c=new Date(t,r,o,a,i,s);return isNaN(c)\|\|c.getMonth()!==r\|\|c.getDate()!==o?null:c}_buildStyles(e){const n=this.size,t={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"},r={small:"var(--component-inputs-padding-small)",medium:"var(--component-inputs-padding-medium)",large:"var(--component-inputs-padding-large)"};return`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--component-input-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .label-wrapper {\n display: none;\n }\n\n .trigger {\n display: flex;\n align-items: center;\n gap: var(--spacing-x-small);\n background: var(--component-input-background);\n border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: ${r[n]\|\|r.medium};\n min-height: ${t[n]\|\|t.medium};\n box-sizing: border-box;\n cursor: text;\n user-select: none;\n transition: border-color 0.2s ease-in-out;\n outline: none;\n }\n\n .trigger:hover {\n border-color: var(--component-input-color);\n }\n\n .trigger:focus-within {\n border-color: var(--component-input-accent);\n }\n\n .trigger.is-invalid {\n border-color: var(--component-input-error-border-color);\n background: var(--component-input-error-background);\n }\n\n .display {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: 1em;\n padding: 0;\n outline: none;\n cursor: text;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n .display::placeholder {\n color: var(--base-content-light);\n }\n\n .cal-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--component-input-icon-color);\n }\n\n .clear-btn {\n all: unset;\n display: flex;\n align-items: center;\n cursor: pointer;\n flex-shrink: 0;\n color: var(--component-input-icon-color);\n opacity: 0.7;\n border-radius: 50%;\n padding: 2px;\n }\n\n .clear-btn:hover {\n opacity: 1;\n background: var(--base-background-component);\n }\n\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-input-label-color);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-input-error-color);\n }\n\n ::slotted([slot="left-icon"]) {\n display: flex;\n align-items: center;\n color: var(--component-input-icon-color);\n }\n\n .popup {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: var(--component-date-z-index);\n border-radius: var(--component-datepicker-border-radius);\n box-shadow: var(--component-datepicker-shadow);\n }\n\n .native-date {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: 1em;\n padding: 0;\n outline: none;\n }\n\n .native-sep {\n flex-shrink: 0;\n padding: 0 var(--spacing-x-small, 6px);\n color: var(--base-content-light);\n }\n `}_getBreakpointPx(){const e=this.mobileBreakpoint;if(e){const n=parseInt(e,10);if(!isNaN(n)&&n>0)return n}const n=getComputedStyle(document.documentElement).getPropertyValue("--component-datepicker-mobile-breakpoint").trim();if(n){const e=parseInt(n,10);if(!isNaN(e)&&e>0)return e}return 768}_getFormattedDisplay(){const e=this.value;if(!e)return"";const n=this.format,t=e=>{const t=new Date(e);if(isNaN(t))return"";const r=e=>String(e).padStart(2,"0"),o=t.getHours(),a=o%12\|\|12;return n.replace("YYYY",t.getFullYear()).replace("MM",r(t.getMonth()+1)).replace("DD",r(t.getDate())).replace("HH",r(o)).replace("hh",r(a)).replace("mm",r(t.getMinutes())).replace("ss",r(t.getSeconds())).replace("A",o>=12?"PM":"AM").replace("a",o>=12?"pm":"am")};if("range"===this.mode){const[n,r]=e.split(","),o=n?t(n):"",a=r?t(r):"";return o&&a?`${o} - ${a}`:o}return t(e)}_handleRangeTypeahead(e,n){const t=this._parseRangeInput(e);if(t)if(t.start&&t.end)n.value=`${t.start.toISOString()},${t.end.toISOString()}`;else{if(e.indexOf(" - ")>=0){const r=e.slice(e.indexOf(" - ")+3).trim();if(r){const e=this._parsePartialInput(r);if(e){const r=new Date,o=e.year??r.getFullYear(),a=void 0!==e.month?e.month-1:void 0;if(e.day&&void 0!==a){const r=new Date(o,a,e.day);if(r.getMonth()===a&&r.getDate()===e.day)return void(n.value=`${t.start.toISOString()},${r.toISOString()}`)}n.navigateTo(o,a)}}return}t.start&&(n.value=t.start.toISOString())}}_onDocumentClick(e){this.contains(e.target)\|\|this.shadowRoot.contains(e.target)\|\|this._setOpen(!1)}_onMediaChange(e){this._isMobile=e.matches,this.render()}_positionPopup(e,n){const t=n.getBoundingClientRect(),r=e.offsetWidth,o=e.offsetHeight,a=window.innerWidth,i=window.innerHeight-t.bottom-4,s=t.top-4;i>=o\|\|i>=s?(e.style.top="calc(100% + 4px)",e.style.bottom="auto"):(e.style.top="auto",e.style.bottom="calc(100% + 4px)");a-t.left>=r?(e.style.left="0",e.style.right="auto"):(e.style.left="auto",e.style.right="0")}_parsePartialInput(e){if(!e)return null;const n=[{token:"YYYY",key:"year",re:"(\\d{1,4})"},{token:"MM",key:"month",re:"(\\d{1,2})"},{token:"DD",key:"day",re:"(\\d{1,2})"},{token:"HH",key:"hour",re:"(\\d{1,2})"},{token:"hh",key:"hour",re:"(\\d{1,2})"},{token:"mm",key:"minute",re:"(\\d{1,2})"},{token:"ss",key:"second",re:"(\\d{1,2})"},{token:"A",key:"ampm",re:"(AM\|PM)"},{token:"a",key:"ampm",re:"(am\|pm)"}],t=[];let r=this.format;for(;r.length>0;){let e=!1;for(const o of n)if(r.startsWith(o.token)){t.push({key:o.key,re:o.re,sep:""}),r=r.slice(o.token.length),e=!0;break}e\|\|(t.length>0&&(t[t.length-1].sep+=r[0]),r=r.slice(1))}if(0===t.length)return null;let o="";for(let e=t.length-1;e>=0;e--){const n=t[e];if(e===t.length-1)o=n.re;else{const e=n.sep.replace(/[-[\]/{}()+?.\\^$\|]/g,"\\$&");o=n.re+"(?:"+e+o+")?"}}const a=new RegExp("^"+o+"$","i").exec(e.trim());if(!a)return null;const i={};return t.forEach((e,n)=>{const t=a[n+1];void 0!==t&&("ampm"===e.key?i.ampm=t.toUpperCase():i[e.key]=parseInt(t,10))}),void 0!==i.hour&&i.ampm&&(i.hour=i.hour%12+("PM"===i.ampm?12:0)),void 0!==i.month&&(i.month<1\|\|i.month>12)\|\|void 0!==i.day&&(i.day<1\|\|i.day>31)\|\|void 0!==i.hour&&(i.hour<0\|\|i.hour>23)\|\|void 0!==i.minute&&(i.minute<0\|\|i.minute>59)\|\|void 0!==i.second&&(i.second<0\|\|i.second>59)?null:Object.keys(i).length>0?i:null}_parseRangeInput(e){if(!e)return null;const n=e.indexOf(" - ");let t,r;n>=0?(t=e.slice(0,n).trim(),r=e.slice(n+3).trim()):(t=e.trim(),r="");const o=e=>{if(!e)return null;const n=this._parseTypedDate(e);return n\|\|this._buildPresumedDate(this._parsePartialInput(e))},a=o(t);if(!a)return null;return{start:a,end:r?o(r):null}}_parseTypedDate(e){if(!e)return null;const n=[{token:"YYYY",key:"year",re:"(\\d{4})"},{token:"MM",key:"month",re:"(\\d{1,2})"},{token:"DD",key:"day",re:"(\\d{1,2})"},{token:"HH",key:"hour24",re:"(\\d{1,2})"},{token:"hh",key:"hour12",re:"(\\d{1,2})"},{token:"mm",key:"minute",re:"(\\d{1,2})"},{token:"ss",key:"second",re:"(\\d{1,2})"},{token:"A",key:"ampm",re:"(AM\|PM)"},{token:"a",key:"ampm",re:"(am\|pm)"}],t=[];let r=this.format;for(const e of n)r.includes(e.token)&&(r=r.replace(e.token,`\0${t.length}\0`),t.push(e));r=r.replace(/[-[\]/{}()+?.\\^$\|]/g,"\\$&"),t.forEach((e,n)=>{r=r.replace(`\0${n}\0`,e.re)});const o=new RegExp(`^${r}$`,"i").exec(e.trim());if(!o)return null;const a={};t.forEach((e,n)=>{a[e.key]=o[n+1]});const i=a.year?parseInt(a.year):(new Date).getFullYear(),s=a.month?parseInt(a.month)-1:0,c=a.day?parseInt(a.day):1;let l=0;void 0!==a.hour24?l=parseInt(a.hour24):void 0!==a.hour12&&(l=parseInt(a.hour12)%12,"PM"===(a.ampm\|\|"").toUpperCase()&&(l+=12));const d=a.minute?parseInt(a.minute):0,p=a.second?parseInt(a.second):0;if(s<0\|\|s>11)return null;if(c<1\|\|c>31)return null;if(l<0\|\|l>23)return null;if(d<0\|\|d>59)return null;if(p<0\|\|p>59)return null;const h=new Date(i,s,c,l,d,p);return h.getMonth()!==s\|\|h.getDate()!==c?null:h}_renderMobile(){const e=this.disabled,n="top"===this.labelPosition,t='<div class="label-wrapper"><slot name="label"></slot></div>',r=this.showHours\|\|this.showMinutes\|\|this.showSeconds,o=r?"datetime-local":"date",a="range"===this.mode,i=e=>{if(!e)return"";const n=new Date(e);if(isNaN(n))return"";const t=e=>String(e).padStart(2,"0"),o=`${n.getFullYear()}-${t(n.getMonth()+1)}-${t(n.getDate())}`;return r?`${o}T${t(n.getHours())}:${t(n.getMinutes())}`:o};let s="",c="";if(a&&this.value){const[e,n]=this.value.split(",");s=i(e),c=i(n)}else s=i(this.value);const l=this.min?` min="${i(this.min)}"`:"",d=this.max?` max="${i(this.max)}"`:"";this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e)}</style>\n <div class="wrapper">\n ${n?t:""}\n <div class="trigger${this.invalid?" is-invalid":""}">\n <slot name="left-icon"></slot>\n ${a?`\n <input class="native-date" type="${o}" data-side="start"\n value="${s}"${l}${d}\n ${e?"disabled":""}>\n <span class="native-sep">–</span>\n <input class="native-date" type="${o}" data-side="end"\n value="${c}"${l}${d}\n ${e?"disabled":""}>\n `:`\n <input class="native-date" type="${o}" data-side="start"\n value="${s}"${l}${d}\n ${e?"disabled":""}>\n `}\n ${this.clearable&&this.value?'<button class="clear-btn" aria-label="Clear date" tabindex="-1">\n <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>\n </button>':""}\n </div>\n ${n?"":t}\n </div>\n `,e\|\|this._bindMobileListeners()}_setOpen(e){const n=this.shadowRoot.querySelector(".popup"),t=this.shadowRoot.querySelector(".trigger");n&&t&&(n.hidden=!e,t.setAttribute("aria-expanded",String(e)),e&&(this._selectedParts.clear(),this._positionPopup(n,t)))}_setupMediaQuery(){this._teardownMediaQuery();const e=this._getBreakpointPx();this._mql=window.matchMedia(`(max-width: ${e}px)`),this._isMobile=this._mql.matches,this._mql.addEventListener("change",this._onMediaChange)}_syncPickerValue(){const e=this.shadowRoot.querySelector("y-datepicker");e&&(e.value=this.value)}_teardownMediaQuery(){this._mql&&(this._mql.removeEventListener("change",this._onMediaChange),this._mql=null)}_updateClearBtn(){if(!this.clearable)return;const e=this.shadowRoot.querySelector(".trigger");if(!e)return;const n=e.querySelector(".clear-btn"),t=e.querySelector(".cal-icon");if(this.value&&!n){const n=document.createElement("button");n.className="clear-btn",n.setAttribute("aria-label","Clear date"),n.setAttribute("tabindex","-1"),n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',n.addEventListener("click",e=>{e.stopPropagation(),this.clear()}),e.insertBefore(n,t)}else!this.value&&n&&n.remove()}_updateDisplay(){const e=this.shadowRoot.querySelector(".display");e&&(e.value=this._getFormattedDisplay(),this._updateClearBtn())}_updateValidationState(){const e=this.shadowRoot.querySelector(".trigger"),n=this.shadowRoot.querySelector(".label-wrapper");e?.classList.toggle("is-invalid",this.invalid),n?.classList.toggle("is-invalid",this.invalid)}}customElements.get("y-date")\|\|customElements.define("y-date",U);class Q extends HTMLElement{static get observedAttributes(){return["visible","anchor","closable","show-backdrop","animate","position"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onKeyDown=this._onKeyDown.bind(this),this._onAnchorClick=this._onAnchorClick.bind(this)}connectedCallback(){this.render(),this._setupAnchor(),this.visible&&this.show()}disconnectedCallback(){this._teardownAnchor()}attributeChangedCallback(e,n,t){n!==t&&("visible"===e&&(this.visible?this.show():this.hide()),"anchor"===e&&(this._teardownAnchor(),this._setupAnchor()),"closable"===e&&this.render())}get animate(){return this.hasAttribute("animate")}set animate(e){e?this.setAttribute("animate",""):this.removeAttribute("animate")}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get closable(){return this.hasAttribute("closable")}set closable(e){e?this.setAttribute("closable",""):this.removeAttribute("closable")}get position(){return this.getAttribute("position")\|\|"center"}set position(e){this.setAttribute("position",e)}get showBackdrop(){return this.hasAttribute("show-backdrop")}set showBackdrop(e){e?this.setAttribute("show-backdrop",""):this.removeAttribute("show-backdrop")}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}hide(){document.removeEventListener("keydown",this._onKeyDown)}render(){this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this._buildStyles()),this.shadowRoot.appendChild(this._buildDialog())}show(){this.shadowRoot.querySelector(".dialog")\|\|this.render(),document.addEventListener("keydown",this._onKeyDown),this._focusDialog()}_buildCloseButton(){const e=document.createElement("y-button");return e.setAttribute("size","small"),e.setAttribute("style-type","flat"),e.setAttribute("aria-label","Close"),e.textContent="✕",e.addEventListener("click",()=>{this.visible=!1}),e}_buildDialog(){const e=document.createElement("div");e.className="dialog",e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("tabindex","-1");const n=this._buildHeader(),t=this._buildSection("body","body"),r=this._buildSection("footer","footer");return e.append(n,t,r),this.closable\|\|this._hideIfEmpty(n),this._hideIfEmpty(t),this._hideIfEmpty(r),e}_buildHeader(){const e=document.createElement("div");e.className="header",e.setAttribute("part","header");const n=document.createElement("div");return n.className="header-content",n.innerHTML='<slot name="header"></slot>',e.appendChild(n),this.closable&&e.appendChild(this._buildCloseButton()),e}_buildSection(e,n){const t=document.createElement("div");return t.className=e,t.setAttribute("part",n),t.innerHTML=`<slot name="${e}"></slot>`,t}_buildStyles(){const e=document.createElement("style");return e.textContent='\n :host {\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n display: none;\n align-items: center;\n justify-content: center;\n z-index: var(--component-dialog-z-index, 1000);\n padding: var(--component-dialog-offset, 16px);\n box-sizing: border-box;\n }\n :host([visible]) {\n display: flex;\n pointer-events: none;\n }\n :host([visible]) .dialog {\n pointer-events: auto;\n }\n :host([visible][show-backdrop]) {\n pointer-events: auto;\n background: rgba(0,0,0,0.5);\n backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));\n -webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));\n }\n\n :host([position="top-left"]) { align-items: flex-start; justify-content: flex-start; }\n :host([position="top-center"]) { align-items: flex-start; justify-content: center; }\n :host([position="top-right"]) { align-items: flex-start; justify-content: flex-end; }\n :host([position="left"]) { align-items: center; justify-content: flex-start; }\n :host([position="right"]) { align-items: center; justify-content: flex-end; }\n :host([position="bottom-left"]) { align-items: flex-end; justify-content: flex-start; }\n :host([position="bottom-center"]) { align-items: flex-end; justify-content: center; }\n :host([position="bottom-right"]) { align-items: flex-end; justify-content: flex-end; }\n\n @keyframes dialog-fade-in {\n from { opacity: 0; transform: translateY(16px) scale(0.97); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .dialog {\n background: var(--component-dialog-background);\n border: var(--component-dialog-border-width, 1px) solid var(--component-dialog-border-color);\n border-radius: var(--component-dialog-border-radius-outer, 4px);\n max-width: 90%;\n max-height: 90%;\n display: flex;\n flex-direction: column;\n box-shadow: var(--component-dialog-shadow, 0 2px 10px rgba(0,0,0,0.3));\n }\n :host([animate][visible]) .dialog {\n animation: dialog-fade-in var(--component-dialog-animation-duration, 0.2s) ease-out both;\n }\n .header {\n padding: var(--component-dialog-padding, var(--spacing-medium));\n font-weight: bold;\n border-bottom: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-small, 8px);\n }\n .header-content {\n flex: 1;\n }\n .body {\n padding: var(--component-dialog-padding, var(--spacing-medium));\n overflow: auto;\n flex: 1;\n }\n .footer {\n padding: var(--component-dialog-padding, var(--spacing-medium));\n border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--component-dialog-footer-gap, var(--spacing-small, 8px));\n }\n\n ::slotted() {\n margin: 0;\n }\n ',e}_focusDialog(){this.shadowRoot.querySelector(".dialog")?.focus()}_hideIfEmpty(e){const n=e.querySelector("slot");if(!n)return;const t=()=>{e.style.display=n.assignedNodes({flatten:!0}).length>0?"":"none"};n.addEventListener("slotchange",t),t()}_onAnchorClick(){this.visible=!this.visible}_onKeyDown(e){"Escape"===e.key&&this.visible&&(this.visible=!1)}_setupAnchor(){const e=this.anchor;e&&(this._anchorResolveDispose=S(this,e,e=>{this._anchorEl=e,e.addEventListener("click",this._onAnchorClick)}))}_teardownAnchor(){this._anchorResolveDispose&&(this._anchorResolveDispose(),this._anchorResolveDispose=null),this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}}customElements.get("y-dialog")\|\|customElements.define("y-dialog",Q);class Z extends HTMLElement{static get observedAttributes(){return["visible","anchor","position","resizable"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onAnchorClick=this._onAnchorClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onResizePointerDown=this._onResizePointerDown.bind(this),this._onResizePointerMove=this._onResizePointerMove.bind(this),this._onResizePointerUp=this._onResizePointerUp.bind(this)}connectedCallback(){this.render(),this._setupAnchor(),this.visible&&this._show()}disconnectedCallback(){this._teardownAnchor(),document.removeEventListener("keydown",this._onKeyDown),this._cleanupResize()}attributeChangedCallback(e,n,t){n!==t&&("visible"===e&&(this.visible?this._show():this._hide()),"anchor"===e&&(this._teardownAnchor(),this._setupAnchor()),"position"===e&&this._applyPosition(),"resizable"===e&&this._applyResizable())}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get position(){return this.getAttribute("position")\|\|"left"}set position(e){this.setAttribute("position",e)}get resizable(){return this.hasAttribute("resizable")}set resizable(e){e?this.setAttribute("resizable",""):this.removeAttribute("resizable")}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}render(){this.shadowRoot.innerHTML="";const e=document.createElement("style");e.textContent=this._buildStyles(),this.shadowRoot.appendChild(e);const n=document.createElement("div");n.className="overlay",n.setAttribute("part","overlay"),n.addEventListener("click",()=>this._onOverlayClick()),this.shadowRoot.appendChild(n);const t=document.createElement("div");t.className="drawer-panel",t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),t.setAttribute("tabindex","-1"),t.setAttribute("part","panel"),t.setAttribute("data-position",this.position);const r=document.createElement("div");r.className="resize-handle",r.innerHTML=this._gripSVG(),r.style.display=this.resizable?"flex":"none",r.addEventListener("pointerdown",this._onResizePointerDown),t.appendChild(r);const o=document.createElement("div");o.className="drawer-content";const a=document.createElement("div");a.className="drawer-header",a.setAttribute("part","header"),a.innerHTML='<slot name="header"></slot>';const i=document.createElement("div");i.className="drawer-body",i.setAttribute("part","body"),i.innerHTML='<slot name="body"></slot>';const s=document.createElement("div");s.className="drawer-footer",s.setAttribute("part","footer"),s.innerHTML='<slot name="footer"></slot>',o.appendChild(a),o.appendChild(i),o.appendChild(s),t.appendChild(o),this.shadowRoot.appendChild(t),this.visible&&requestAnimationFrame(()=>{n.classList.add("open"),t.classList.add("open")})}_applyPosition(){const e=this.shadowRoot.querySelector(".drawer-panel");e&&e.setAttribute("data-position",this.position)}_applyResizable(){const e=this.shadowRoot.querySelector(".resize-handle");e&&(e.style.display=this.resizable?"flex":"none")}_buildStyles(){return'\n :host {\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n display: none;\n z-index: var(--component-drawer-z-index, 5000);\n }\n :host([visible]) {\n display: block;\n }\n\n .overlay {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(0, 0, 0, 0);\n transition: background var(--drawer-transition-duration, 0.3s) ease;\n }\n .overlay.open {\n background: rgba(0, 0, 0, 0.4);\n }\n\n .drawer-panel {\n position: absolute;\n background: var(--component-drawer-background, #0c0c0d);\n color: var(--component-drawer-color, #f7f7fa);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n outline: none;\n display: flex;\n flex-direction: column;\n border: none;\n border-radius: var(--component-drawer-border-radius, 0);\n transition: transform var(--drawer-transition-duration, 0.3s) ease;\n }\n\n .drawer-panel[data-position="left"],\n .drawer-panel[data-position="right"] {\n top: 0;\n bottom: 0;\n width: var(--drawer-width, 300px);\n flex-direction: row;\n }\n .drawer-panel[data-position="left"] {\n left: 0;\n transform: translateX(-100%);\n border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);\n }\n .drawer-panel[data-position="right"] {\n right: 0;\n transform: translateX(100%);\n border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);\n }\n\n .drawer-panel[data-position="top"],\n .drawer-panel[data-position="bottom"] {\n left: 0;\n right: 0;\n height: var(--drawer-height, 300px);\n }\n .drawer-panel[data-position="top"] {\n top: 0;\n transform: translateY(-100%);\n border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);\n }\n .drawer-panel[data-position="bottom"] {\n bottom: 0;\n transform: translateY(100%);\n border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);\n }\n\n .drawer-panel.open { transform: translate(0, 0); }\n\n .drawer-header {\n padding: var(--component-drawer-padding, 1rem);\n font-weight: bold;\n }\n .drawer-body {\n padding: var(--component-drawer-padding, 1rem);\n flex: 1;\n overflow: auto;\n }\n .drawer-footer {\n padding: var(--component-drawer-padding, 1rem);\n }\n\n /* Wrapper so header/body/footer stack vertically inside a row layout /\n .drawer-content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n }\n\n ::slotted() {\n margin: 0;\n }\n\n .resize-handle {\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--component-drawer-color, #f7f7fa);\n opacity: 0.6;\n touch-action: none;\n user-select: none;\n transition: opacity 0.15s, background 0.15s;\n }\n .resize-handle:hover,\n .resize-handle:active {\n opacity: 1;\n background: var(--component-drawer-hover-background, #292a2b);\n }\n\n .drawer-panel[data-position="left"] > .resize-handle,\n .drawer-panel[data-position="right"] > .resize-handle {\n width: var(--component-drawer-handle-width, 6px);\n padding: var(--component-drawer-handle-padding, 4px);\n cursor: ew-resize;\n }\n\n .drawer-panel[data-position="left"] > .resize-handle svg,\n .drawer-panel[data-position="right"] > .resize-handle svg {\n width: 16px;\n height: 24px;\n flex-shrink: 0;\n }\n .drawer-panel[data-position="left"] > .resize-handle {\n order: 99;\n }\n .drawer-panel[data-position="right"] > .resize-handle {\n order: -1;\n }\n\n .drawer-panel[data-position="top"] > .resize-handle,\n .drawer-panel[data-position="bottom"] > .resize-handle {\n height: var(--component-drawer-handle-width, 6px);\n padding: var(--component-drawer-handle-padding, 4px);\n cursor: ns-resize;\n }\n\n .drawer-panel[data-position="top"] > .resize-handle svg,\n .drawer-panel[data-position="bottom"] > .resize-handle svg {\n width: 24px;\n height: 16px;\n flex-shrink: 0;\n }\n .drawer-panel[data-position="top"] > .resize-handle {\n order: 99;\n }\n .drawer-panel[data-position="bottom"] > .resize-handle {\n order: -1;\n }\n '}_cleanupResize(){document.removeEventListener("pointermove",this._onResizePointerMove),document.removeEventListener("pointerup",this._onResizePointerUp)}_getTransitionDuration(e){if(!e)return 0;const n=getComputedStyle(e).transitionDuration\|\|"0s",t=parseFloat(n);return isNaN(t)?0:1e3t}_gripSVG(){return this._isHorizontal()?d:l}_hide(){const e=this.shadowRoot.querySelector(".overlay"),n=this.shadowRoot.querySelector(".drawer-panel");e&&e.classList.remove("open"),n&&n.classList.remove("open"),document.removeEventListener("keydown",this._onKeyDown);const t=this._getTransitionDuration(n);t>0?(clearTimeout(this._hideTimer),this._hideTimer=setTimeout(()=>{this.visible\|\|(this.style.display="none")},t)):this.style.display="none"}_isHorizontal(){return"left"===this.position\|\|"right"===this.position}_onAnchorClick(){this.visible=!this.visible}_onKeyDown(e){"Escape"===e.key&&this.visible&&(this.visible=!1)}_onOverlayClick(){this.visible=!1}_onResizePointerDown(e){e.preventDefault(),this._resizing=!0,this._startPointer=this._isHorizontal()?e.clientX:e.clientY;const n=this.shadowRoot.querySelector(".drawer-panel");this._startSize=this._isHorizontal()?n.offsetWidth:n.offsetHeight,n.style.transition="none",document.addEventListener("pointermove",this._onResizePointerMove),document.addEventListener("pointerup",this._onResizePointerUp)}_onResizePointerMove(e){if(!this._resizing)return;const n=this.shadowRoot.querySelector(".drawer-panel"),t=(this._isHorizontal()?e.clientX:e.clientY)-this._startPointer;let r;r="left"===this.position?this._startSize+t:"right"===this.position?this._startSize-t:"top"===this.position?this._startSize+t:this._startSize-t;r=Math.max(100,r),this._isHorizontal()?n.style.width=`${r}px`:n.style.height=`${r}px`}_onResizePointerUp(){this._resizing=!1;const e=this.shadowRoot.querySelector(".drawer-panel");e&&(e.style.transition=""),document.removeEventListener("pointermove",this._onResizePointerMove),document.removeEventListener("pointerup",this._onResizePointerUp)}_setupAnchor(){const e=this.anchor;e&&(this._anchorResolveDispose=S(this,e,e=>{this._anchorEl=e,e.addEventListener("click",this._onAnchorClick)}))}_show(){this.style.display="block",this.offsetHeight;const e=this.shadowRoot.querySelector(".overlay"),n=this.shadowRoot.querySelector(".drawer-panel");e&&e.classList.add("open"),n&&(n.classList.add("open"),n.focus()),document.addEventListener("keydown",this._onKeyDown)}_teardownAnchor(){this._anchorResolveDispose&&(this._anchorResolveDispose(),this._anchorResolveDispose=null),this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}}customElements.get("y-drawer")\|\|customElements.define("y-drawer",Z);class ee extends HTMLElement{static get observedAttributes(){return["items","position","breakpoint","size","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._mediaQuery=null,this._onMediaChange=this._onMediaChange.bind(this)}connectedCallback(){this.hasAttribute("position")\|\|this.setAttribute("position","bottom"),this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("role")\|\|this.setAttribute("role","navigation"),this.hasAttribute("aria-label")\|\|this.setAttribute("aria-label","Dock navigation"),this.render(),this._teardownBreakpoint(),this._setupBreakpoint()}disconnectedCallback(){this._teardownBreakpoint()}attributeChangedCallback(e,n,t){n!==t&&("breakpoint"===e&&(this._teardownBreakpoint(),this._setupBreakpoint()),this.render())}get breakpoint(){const e=this.getAttribute("breakpoint"),n=Number(e);return Number.isFinite(n)&&n>0?n:null}set breakpoint(e){null==e?this.removeAttribute("breakpoint"):this.setAttribute("breakpoint",String(e))}get history(){return this.getAttribute("history")}set history(e){null==e?this.removeAttribute("history"):this.setAttribute("history",e)}get items(){try{return JSON.parse(this.getAttribute("items")\|\|"[]")}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get position(){return"top"===this.getAttribute("position")?"top":"bottom"}set position(e){this.setAttribute("position","top"===e?"top":"bottom")}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",["small","medium","large"].includes(e)?e:"medium")}render(){this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this._buildStyles()),this.shadowRoot.appendChild(this._buildBar())}_buildBar(){const e=_("div",{class:"bar",part:"bar"});return this.items.forEach(n=>e.appendChild(this._buildItem(n))),e.appendChild(_("slot",{})),this._setupItemKeyboard(e),e}_buildItem(e){if(e.slot&&this.querySelector(`[slot="${e.slot}"]`)){const n=_("div",{class:"item",part:"item",tabindex:"0",role:"group"});return n.appendChild(_("slot",{name:e.slot})),n}const n=_("button",{class:"item",part:"item","aria-label":e.name});e.selected&&n.setAttribute("aria-current","page"),e.href&&(n.dataset.href=e.href);const t={small:"medium",medium:"large",large:"x-large"}[this.size],r=_("y-icon",{name:e.icon,size:t});n.appendChild(r);const o=_("span",{class:"item-label"},[e.name]);return n.appendChild(o),n.addEventListener("click",()=>this._handleItemClick(e)),n}_buildStyles(){const e=document.createElement("style"),n=this.position,t=this.size,r=`var(--component-dock-height, var(--component-dock-height-${t}))`,o="small"===t?"10px":"large"===t?"13px":"11px";return e.textContent=`\n :host {\n display: block;\n position: fixed;\n ${"top"===n?"top: 0;":"bottom: 0;"}\n left: 0;\n right: 0;\n z-index: var(--component-dock-z-index, 8000);\n ${"bottom"===n?"padding-bottom: env(safe-area-inset-bottom, 0px);":"padding-top: env(safe-area-inset-top, 0px);"}\n background: var(--component-dock-background);\n ${"bottom"===n?"border-top: var(--component-dock-border-width, 1px) solid var(--component-dock-border-color);":"border-bottom: var(--component-dock-border-width, 1px) solid var(--component-dock-border-color);"}\n }\n :host([hidden]) {\n display: none !important;\n }\n .bar {\n display: flex;\n align-items: center;\n justify-content: space-around;\n height: ${r};\n position: relative;\n }\n .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--component-dock-color);\n font-family: inherit;\n font-size: ${o};\n min-width: 48px;\n outline: none;\n transition: color 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n }\n .item:focus-visible {\n outline: 2px solid var(--component-dock-color-active);\n outline-offset: -2px;\n border-radius: 4px;\n }\n .item[aria-current="page"],\n .item:hover {\n color: var(--component-dock-color-active);\n }\n .item-label {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 64px;\n }\n ::slotted() {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n color: var(--component-dock-color);\n min-width: 48px;\n }\n `,e}_handleItemClick(e){if(!e.href)return;const n=new CustomEvent("navigate",{detail:{href:e.href},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(n)&&("false"===this.history?window.location.href=e.href:(window.history.pushState({},"",e.href),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))))}_onMediaChange(e){this.hidden=!e.matches}_setupBreakpoint(){const e=this.breakpoint;null!=e?(this._mediaQuery=window.matchMedia(`(max-width: ${e}px)`),this._mediaQuery.addEventListener("change",this._onMediaChange),this.hidden=!this._mediaQuery.matches):this.hidden=!1}_setupItemKeyboard(e){const n=e.querySelector("slot:not([name])");e.addEventListener("keydown",t=>{const r=[...Array.from(e.querySelectorAll(".item")),...n?Array.from(n.assignedElements({flatten:!0})):[]],o=t.composedPath(),a=r.findIndex(e=>e===t.target\|\|o.includes(e));-1!==a&&("ArrowRight"===t.key?(t.preventDefault(),r[(a+1)%r.length].focus()):"ArrowLeft"===t.key?(t.preventDefault(),r[(a-1+r.length)%r.length].focus()):"Enter"!==t.key&&" "!==t.key\|\|(t.preventDefault(),r[a].click()))})}_teardownBreakpoint(){this._mediaQuery&&(this._mediaQuery.removeEventListener("change",this._onMediaChange),this._mediaQuery=null)}}customElements.get("y-dock")\|\|customElements.define("y-dock",ee);class ne extends HTMLElement{static get observedAttributes(){return["layout","columns","gap","aspect-ratio","expandable","loop","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._expandedIndex=-1,this._items=[],this._onKeyDown=this._onKeyDown.bind(this),this._previouslyFocused=null}connectedCallback(){this.render(),this._bindSlotListener()}disconnectedCallback(){document.removeEventListener("keydown",this._onKeyDown)}attributeChangedCallback(e,n,t){if(n===t)return;const r=this._expandedIndex>=0;this.render(),this._bindSlotListener(),r&&this._showExpandedView()}get layout(){return this.getAttribute("layout")\|\|"grid"}set layout(e){this.setAttribute("layout",e)}get columns(){return parseInt(this.getAttribute("columns"),10)\|\|3}set columns(e){this.setAttribute("columns",String(e))}get gap(){return this.getAttribute("gap")\|\|"medium"}set gap(e){this.setAttribute("gap",e)}get aspectRatio(){return this.getAttribute("aspect-ratio")\|\|"1/1"}set aspectRatio(e){this.setAttribute("aspect-ratio",e)}get expandable(){return!this.hasAttribute("expandable")\|\|"false"!==this.getAttribute("expandable")}set expandable(e){e?this.removeAttribute("expandable"):this.setAttribute("expandable","false")}get loop(){return this.hasAttribute("loop")}set loop(e){e?this.setAttribute("loop",""):this.removeAttribute("loop")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}close(){if(this._expandedIndex<0)return;const e=this._expandedIndex;this._expandedIndex=-1,this._removeExpandedView(),document.removeEventListener("keydown",this._onKeyDown),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{index:e}})),this._previouslyFocused&&(this._previouslyFocused.focus(),this._previouslyFocused=null)}next(){if(this._expandedIndex<0)return;const e=this._expandedIndex;let n=e+1;if(n>=this._items.length){if(!this.loop)return;n=0}this._expandedIndex=n,this._updateExpandedView(),this.dispatchEvent(new CustomEvent("navigate",{bubbles:!0,composed:!0,detail:{index:n,previousIndex:e,direction:"next"}}))}open(e){if(!this.expandable)return;if(e<0\|\|e>=this._items.length)return;const n=this._items[e],t=new CustomEvent("expand",{bubbles:!0,composed:!0,cancelable:!0,detail:{index:e,src:n.fullSrc,element:n.element}});if(!this.dispatchEvent(t))return;const r=this.shadowRoot.querySelector(`.item[data-index="${e}"]`);this._previouslyFocused=r?.querySelector(".item-btn")\|\|r,this._expandedIndex=e,this._showExpandedView(),document.addEventListener("keydown",this._onKeyDown)}previous(){if(this._expandedIndex<0)return;const e=this._expandedIndex;let n=e-1;if(n<0){if(!this.loop)return;n=this._items.length-1}this._expandedIndex=n,this._updateExpandedView(),this.dispatchEvent(new CustomEvent("navigate",{bubbles:!0,composed:!0,detail:{index:n,previousIndex:e,direction:"prev"}}))}render(){this.shadowRoot.innerHTML=`\n <style>${this._buildStyles()}</style>\n <div class="slot-hidden"><slot></slot></div>\n <div class="gallery" part="gallery" role="list"></div>\n `,this._indexItems()}_bindExpandedListeners(){const e=this.shadowRoot.querySelector(".expand-overlay");if(!e)return;e.querySelector(".expand-close").addEventListener("click",()=>this.close());const n=e.querySelector(".expand-prev"),t=e.querySelector(".expand-next");n.addEventListener("click",()=>this.previous()),t.addEventListener("click",()=>this.next()),e.addEventListener("click",n=>{n.target===e&&this.close()})}_bindSlotListener(){const e=this.shadowRoot.querySelector("slot");e&&e.addEventListener("slotchange",()=>this._indexItems())}_buildBaseStyles(){return"\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .slot-hidden {\n display: none !important;\n }\n\n .gallery {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .item {\n position: relative;\n overflow: hidden;\n border-radius: var(--component-gallery-thumbnail-radius, var(--radii-small, 4px));\n }\n\n .item img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n "}_buildExpandStyles(){const e={small:"32px",medium:"44px",large:"56px"},n=e[this.size]\|\|e.medium;return`\n .expand-overlay {\n position: fixed;\n inset: 0;\n z-index: var(--component-gallery-expand-z-index, 1000);\n background: var(--component-gallery-expand-background, rgba(0,0,0,0.9));\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--component-gallery-expand-color, #fff);\n }\n\n .expand-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 90vw;\n max-height: 90vh;\n }\n\n .expand-img {\n max-width: 85vw;\n max-height: 80vh;\n object-fit: contain;\n }\n\n .expand-caption {\n margin-top: var(--spacing-medium, 8px);\n font-size: 0.95em;\n text-align: center;\n max-width: 600px;\n }\n\n .expand-counter {\n margin-top: var(--spacing-small, 4px);\n font-size: 0.8em;\n opacity: 0.7;\n }\n\n .expand-prev,\n .expand-next,\n .expand-close {\n position: absolute;\n background: var(--component-gallery-expand-button-background, rgba(255,255,255,0.15));\n color: var(--component-gallery-expand-color, #fff);\n border: none;\n border-radius: var(--radii-full, 50%);\n width: ${n};\n height: ${n};\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0;\n transition: background 0.2s ease;\n }\n\n .expand-prev:hover,\n .expand-next:hover,\n .expand-close:hover {\n background: var(--component-gallery-expand-button-background-hover, rgba(255,255,255,0.3));\n }\n\n .expand-prev:focus-visible,\n .expand-next:focus-visible,\n .expand-close:focus-visible {\n outline: 2px solid var(--component-gallery-expand-color, #fff);\n outline-offset: 2px;\n }\n\n .expand-prev:disabled,\n .expand-next:disabled {\n opacity: 0.3;\n cursor: default;\n pointer-events: none;\n }\n\n .expand-prev {\n left: var(--spacing-large, 16px);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .expand-next {\n right: var(--spacing-large, 16px);\n top: 50%;\n transform: translateY(-50%);\n }\n\n .expand-close {\n top: var(--spacing-large, 16px);\n right: var(--spacing-large, 16px);\n }\n `}_buildExpandedDOM(){const e=this._items[this._expandedIndex],n=e.caption\|\|e.alt\|\|"",t=`${this._expandedIndex+1} / ${this._items.length}`,r=!this.loop&&0===this._expandedIndex,o=!this.loop&&this._expandedIndex===this._items.length-1,a=this._createNavButton("expand-close","Close image viewer","close","expand-close-icon"),i=this._createNavButton("expand-prev","Previous image","chevron-left","expand-prev-icon",r),s=this._createNavButton("expand-next","Next image","chevron-right","expand-next-icon",o);return _("div",{class:"expand-overlay",part:"expand-overlay",role:"dialog","aria-modal":"true","aria-label":"Image viewer"},[a,i,this._createExpandContent(e,n,t),s])}_buildInteractiveStyles(){return'\n .item-btn {\n display: block;\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n border-radius: inherit;\n }\n\n .item-btn img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .item-btn::after {\n content: "";\n position: absolute;\n inset: 0;\n background: var(--component-gallery-thumbnail-overlay-color, var(--neutral-black-translucent, rgba(0,0,0,0.12)));\n opacity: 0;\n transition: opacity 0.2s ease;\n pointer-events: none;\n border-radius: inherit;\n }\n\n .item-btn:hover::after,\n .item-btn:focus-visible::after {\n opacity: 1;\n }\n\n .item-btn:focus-visible {\n outline: 2px solid var(--primary-content--);\n outline-offset: 2px;\n }\n '}_buildLayoutStyles(){const e=this._resolveGap(),n=this.columns,t=this.aspectRatio,r=Math.min(2,n),o=this._getThumbnailMinWidth(),a=`\n @media (max-width: 768px) {\n .gallery { ${"grid"===this.layout?`grid-template-columns: repeat(${r}, 1fr)`:`columns: ${r}`}; }\n }\n @media (max-width: 480px) {\n .gallery { ${"grid"===this.layout?"grid-template-columns: 1fr":"columns: 1"}; }\n }\n `;switch(this.layout){case"grid":return`\n .gallery {\n display: grid;\n grid-template-columns: repeat(var(--component-gallery-columns, ${n}), 1fr);\n gap: ${e};\n }\n .item img {\n aspect-ratio: var(--component-gallery-aspect-ratio, ${t});\n }\n ${a}\n `;case"masonry":return`\n .gallery {\n columns: var(--component-gallery-columns, ${n});\n column-gap: ${e};\n }\n .item {\n break-inside: avoid;\n margin-bottom: ${e};\n }\n ${a}\n `;case"row":return`\n .gallery {\n display: flex;\n flex-direction: row;\n gap: ${e};\n overflow-x: auto;\n overflow-y: hidden;\n }\n .item {\n flex: 0 0 auto;\n min-width: ${o};\n }\n .item img {\n aspect-ratio: var(--component-gallery-aspect-ratio, ${t});\n }\n `;case"column":return`\n .gallery {\n display: flex;\n flex-direction: column;\n gap: ${e};\n }\n `;default:return""}}_buildStyles(){return[this._buildBaseStyles(),this._buildLayoutStyles(),this.expandable?this._buildInteractiveStyles():"",this._buildExpandStyles()].join("\n")}_createExpandContent(e,n,t){const r=[_("img",{class:"expand-img",part:"expand-img",src:e.fullSrc,alt:e.alt\|\|"","aria-current":"true"})];return n&&r.push(_("div",{class:"expand-caption",part:"expand-caption"},[n])),r.push(_("div",{class:"expand-counter",part:"expand-counter"},[t])),_("div",{class:"expand-content"},r)}_createItemWrapper(e,n){const t={class:"item",part:"item",role:"listitem","data-index":String(n)},r=_("img",{src:e.src,alt:e.alt,part:"item-img",draggable:"false"});if(this.expandable){const o=_("button",{class:"item-btn","aria-label":`View image: ${e.alt\|\|`Image ${n+1}`}`},[r]);return o.addEventListener("click",()=>this.open(n)),_("div",t,[o])}return _("div",t,[r])}_createNavButton(e,n,t,r,o){const a=_("y-icon",{name:t,size:this._getExpandIconSize()}),i=_("slot",{name:r},[a]),s={class:e,part:e,"aria-label":n};return o&&(s.disabled=!0),_("button",s,[i])}_getExpandIconSize(){return{small:"medium",medium:"large",large:"x-large"}[this.size]\|\|"large"}_getThumbnailMinWidth(){const e={small:"80px",medium:"120px",large:"180px"};return e[this.size]\|\|e.medium}_getImageData(e){let n,t;if("FIGURE"===e.tagName){n=e.querySelector("img");const r=e.querySelector("figcaption");t=r?r.textContent:""}else{if("IMG"!==e.tagName)return null;n=e,t=""}return n?{element:e,src:n.getAttribute("src")\|\|"",fullSrc:n.getAttribute("data-src")\|\|n.getAttribute("src")\|\|"",alt:n.getAttribute("alt")\|\|"",caption:t}:null}_indexItems(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const n=this.shadowRoot.querySelector(".gallery");n.querySelectorAll(".item").forEach(e=>e.remove());const t=e.assignedElements({flatten:!0});this._items=[],t.forEach(e=>{const t=this._getImageData(e);t&&(this._items.push(t),n.appendChild(this._createItemWrapper(t,this._items.length-1)))})}_onKeyDown(e){if(this._expandedIndex<0)return;const n={Escape:()=>this.close(),ArrowLeft:()=>this.previous(),ArrowRight:()=>this.next()}[e.key];if(n)return e.preventDefault(),void n();"Tab"===e.key&&this._trapFocus(e)}_removeExpandedView(){const e=this.shadowRoot.querySelector(".expand-overlay");e&&e.remove()}_resolveGap(){const e=this.gap,n={small:"var(--component-gallery-gap-small, 4px)",medium:"var(--component-gallery-gap-medium, 8px)",large:"var(--component-gallery-gap-large, 16px)"};return n[e]?n[e]:"undefined"!=typeof CSS&&CSS.supports&&CSS.supports("gap",e)?e:n.medium}_showExpandedView(){this._removeExpandedView(),this.shadowRoot.appendChild(this._buildExpandedDOM()),this._bindExpandedListeners();const e=this.shadowRoot.querySelector(".expand-close");e&&e.focus()}_trapFocus(e){const n=this.shadowRoot.querySelector(".expand-overlay");if(!n)return;const t=n.querySelectorAll("button:not(:disabled)");if(0===t.length)return;const r=t[0],o=t[t.length-1],a=this.shadowRoot.activeElement\|\|document.activeElement;e.shiftKey&&a===r?(e.preventDefault(),o.focus()):e.shiftKey\|\|a!==o\|\|(e.preventDefault(),r.focus())}_updateExpandedView(){this._removeExpandedView(),this.shadowRoot.appendChild(this._buildExpandedDOM()),this._bindExpandedListeners();const e=this.shadowRoot.querySelector(".expand-prev"),n=this.shadowRoot.querySelector(".expand-next");e&&!e.disabled?e.focus():n&&!n.disabled&&n.focus()}}customElements.get("y-gallery")\|\|customElements.define("y-gallery",ne);class te extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["size","rows","value","label-position","disabled","invalid","name"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this._internals.setFormValue(this.value)}attributeChangedCallback(e,n,t){if(n!==t)return"value"===e?(this.textarea&&(this.textarea.value=t),void(this._internals&&this._internals.setFormValue(t,this.getAttribute("name")))):void("name"!==e?"invalid"!==e?this.render():this._updateValidationState():this._internals.setFormValue(this.value,t))}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get invalid(){return this.hasAttribute("invalid")}set invalid(e){e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get rows(){return parseInt(this.getAttribute("rows")\|\|"3",10)}set rows(e){this.setAttribute("rows",String(e))}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return this.textarea?.value\|\|""}set value(e){this.textarea&&(this.textarea.value=e),this.setAttribute("value",e),this._internals.setFormValue(e,this.getAttribute("name"))}checkValidity(){return this.textarea?.checkValidity?.()??!0}render(){const e=this.getAttribute("size")\|\|"medium",n=this.getAttribute("rows")\|\|"3",t=this.getAttribute("value")\|\|"",r=this.getAttribute("label-position")\|\|"top",o=this.hasAttribute("disabled"),a="top"===r,i=this._getPaddingVar(e);this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet(o,i)],this.shadowRoot.innerHTML=this._buildHTML(n,a,o),this.textarea=this.shadowRoot.querySelector("textarea"),this.inputContainer=this.shadowRoot.querySelector(".input-container"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),A(this.labelWrapper),this.textarea.value=t,o\|\|(this._bindTextareaListeners(),this._updateValidationState())}_bindTextareaListeners(){this.textarea.addEventListener("input",e=>{this.setAttribute("value",e.target.value),this._internals.setFormValue(e.target.value,this.getAttribute("name")),this.dispatchEvent(new CustomEvent("input",{detail:{value:e.target.value},bubbles:!0,composed:!0})),this._updateValidationState()})}_buildHTML(e,n,t){const r='<div class="label-wrapper"><slot name="label"></slot></div>';return`\n <div class="input-wrapper">\n ${n?r:""}\n <div class="input-container">\n <textarea part="textarea" rows="${e}" ${t?"disabled":""}></textarea>\n </div>\n ${n?"":r}\n </div>\n `}_buildStyleSheet(e,n){const t=new CSSStyleSheet;return t.replaceSync(`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--component-input-color);\n opacity: ${e?"0.75":"1"};\n pointer-events: ${e?"none":"auto"};\n }\n\n .input-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .label-wrapper {\n display: none;\n }\n\n .input-container {\n display: flex;\n align-items: flex-start;\n background: ${e?"var(--component-input-background-disabled)":"var(--component-input-background)"};\n border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n border-radius: var(--component-inputs-border-radius-outer);\n padding: var(${n});\n box-sizing: border-box;\n transition: border-color 0.2s ease-in-out;\n }\n\n .input-container.is-invalid {\n border-color: var(--component-input-error-border-color);\n background: var(--component-input-error-background);\n }\n\n .input-container.is-invalid textarea {\n color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:hover {\n border-color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:focus-within {\n border-color: var(--component-input-error-color);\n }\n\n .input-container.is-invalid:focus-within textarea {\n color: var(--component-input-color);\n }\n\n textarea {\n all: unset;\n flex: 1;\n width: 100%;\n font-family: inherit;\n font-size: 1em;\n color: inherit;\n line-height: 1.5;\n resize: vertical;\n overflow-y: auto;\n box-sizing: border-box;\n }\n\n .input-container:hover {\n border-color: var(--component-input-color);\n transition: border-color 0.2s ease-in-out;\n }\n\n .input-container:focus-within {\n border-color: var(--component-input-accent);\n }\n\n .label-wrapper.is-invalid ::slotted([slot="label"]) {\n color: var(--component-input-error-color);\n }\n\n ::slotted([slot="label"]) {\n font-weight: 500;\n font-size: 0.875em;\n color: var(--component-input-label-color);\n }\n `),t}_getPaddingVar(e){const n={small:"--component-inputs-padding-small",medium:"--component-inputs-padding-medium",large:"--component-inputs-padding-large"};return n[e]\|\|n.medium}_updateValidationState(){const e=this.hasAttribute("invalid")\|\|this.textarea&&!this.checkValidity();this.inputContainer?.classList.toggle("is-invalid",e),this.labelWrapper?.classList.toggle("is-invalid",e)}}customElements.get("y-textarea")\|\|customElements.define("y-textarea",te);class re extends HTMLElement{static get observedAttributes(){return["selected","expanded","href","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._expanded=!1,this._checkRouteMatchBound=this._checkRouteMatch.bind(this),this.render()}connectedCallback(){this._addHeaderListeners(),this._checkForChildren(),this._updateChildState(),this._updateSelectedState(),this._updateExpandedState(),this.hasAttribute("href")&&(this._checkRouteMatch(),window.addEventListener("popstate",this._checkRouteMatchBound))}disconnectedCallback(){this.hasAttribute("href")&&window.removeEventListener("popstate",this._checkRouteMatchBound)}attributeChangedCallback(e,n,t){n!==t&&("selected"===e&&this._updateSelectedState(),"expanded"===e&&this._updateExpandedState(),"href"===e&&this._checkRouteMatch())}get expanded(){return this.hasAttribute("expanded")}set expanded(e){e?this.setAttribute("expanded",""):this.removeAttribute("expanded")}get selected(){return this.hasAttribute("selected")}set selected(e){e?this.setAttribute("selected",""):this.removeAttribute("selected")}collapse(){this.expanded=!1,this._expanded=!1,this._updateExpandedState(),this.dispatchEvent(new CustomEvent("collapse",{detail:{expanded:!1},bubbles:!0,composed:!0}))}expand(){this._hasChildren()&&(this.expanded=!0,this._expanded=!0,this._updateExpandedState(),this.dispatchEvent(new CustomEvent("expand",{detail:{expanded:!0},bubbles:!0,composed:!0})))}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML=`\n <div class="header" part="header" role="button" tabindex="0">\n <slot name="icon"></slot>\n <slot name="label"><slot></slot></slot>\n <button class="arrow" id="arrow" part="arrow" tabindex="0" aria-expanded="false" aria-label="Toggle children">\n ${s}\n </button>\n </div>\n <div class="children" id="childrenContainer" part="children">\n <slot name="children"></slot>\n </div>\n `}toggle(){this._hasChildren()&&(this._expanded?this.collapse():(this._collapseExclusiveSiblings(),this.expand()),this.dispatchEvent(new CustomEvent("toggle",{detail:{expanded:this._expanded},bubbles:!0,composed:!0})))}_addArrowListeners(){const e=this.shadowRoot.querySelector(".arrow");e&&(e.addEventListener("click",e=>{e.stopPropagation(),this.toggle()}),e.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key\|\|(e.preventDefault(),this.toggle())}))}_addChildrenSlotListener(){const e=this.shadowRoot.querySelector('slot[name="children"]');e&&e.addEventListener("slotchange",()=>this._checkForChildren())}_addHeaderListeners(){const e=this.shadowRoot.querySelector(".header");e&&(e.addEventListener("click",e=>this._handleHeaderClick(e)),e.addEventListener("keydown",n=>{" "!==n.key&&"Enter"!==n.key\|\|(n.preventDefault(),e.click())}),this._addArrowListeners(),this._addChildrenSlotListener())}_buildStyleSheet(){const e=new CSSStyleSheet;return e.replaceSync('\n :host {\n display: block;\n box-sizing: border-box;\n background: var(--component-panel-background);\n color: var(--component-panel-color);\n font-family: var(--font-family-body);\n overflow: hidden;\n }\n\n :host([expanded]) {\n background: var(--component-panel-expanded-background);\n }\n\n :host([selected]) {\n color: var(--component-panel-accent);\n }\n\n :host([data-is-child="true"]) {\n box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-active-border);\n }\n\n :host([data-is-child="true"][selected]) {\n box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-accent);\n }\n\n :host([selected]) .header:hover {\n background: var(--component-panel-accent-hover-background);\n }\n\n :host([data-is-child="true"]) .header {\n padding-left: calc(var(--component-panelbar-padding, 4px) + (var(--panel-depth, 1) * var(--component-panelbar-indent, 16px)));\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--spacing-medium, 8px);\n padding: var(--component-panelbar-padding, 4px);\n cursor: pointer;\n transition: background 0.2s ease;\n user-select: none;\n }\n\n .header:hover {\n background: var(--component-panel-hover-background);\n }\n\n .header ::slotted([slot="icon"]) {\n margin-right: 6px;\n }\n\n .header ::slotted([slot="label"]) {\n flex-grow: 1;\n cursor: inherit;\n font-size: 1rem;\n line-height: 1.2;\n }\n\n .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n flex-shrink: 0;\n }\n\n .arrow:focus-visible {\n outline: 2px solid var(--component-panel-accent, currentColor);\n border-radius: 2px;\n }\n\n .arrow svg {\n width: 20px;\n height: 20px;\n }\n\n :host([expanded]) .arrow {\n transform: rotate(180deg);\n }\n\n .children {\n display: none;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n }\n\n .children ::slotted(y-panel) {\n width: 100%;\n box-sizing: border-box;\n }\n\n :host([expanded]) .children {\n display: block;\n }\n\n :host([data-has-children="false"]) .arrow {\n visibility: hidden;\n }\n '),e}_calcNestingDepth(){let e=0,n=this.parentElement;for(;n;){const t=n.closest("y-panel");if(!t\|\|t===this)break;e++,n=t.parentElement}return e}_checkForChildren(){const e=this._hasChildren();this.setAttribute("data-has-children",e?"true":"false"),!e&&this.expanded&&(this.expanded=!1)}_checkRouteMatch(){const e=this.getAttribute("href");this.selected=!(!e\|\|window.location.pathname!==e)}_collapseExclusiveSiblings(){const e=this.closest("y-panelbar");if(!e?.hasAttribute("exclusive"))return;(this.parentElement?Array.from(this.parentElement.children).filter(e=>"Y-PANEL"===e.tagName):[]).forEach(e=>{e!==this&&e.expanded&&e.collapse()})}_handleHeaderClick(e){e.stopPropagation(),this.hasAttribute("href")?this._navigateToHref():this.dispatchEvent(new CustomEvent("select",{detail:{selected:!0},bubbles:!0,composed:!0}))}_hasChildren(){const e=this.shadowRoot.querySelector('slot[name="children"]');return!!e&&e.assignedNodes({flatten:!0}).some(e=>e.nodeType!==Node.TEXT_NODE\|\|""!==e.textContent.trim())}_navigateToHref(){const e=this.getAttribute("href"),n=new CustomEvent("navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:{href:e}});!this.dispatchEvent(n)\|\|("false"!==this.getAttribute("history")?(history.pushState({},"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))):window.location.href=e)}_updateChildState(){const e=this._calcNestingDepth();this.setAttribute("data-is-child",e>0?"true":"false"),this.style.setProperty("--panel-depth",e)}_updateExpandedState(){const e=this._hasChildren(),n=this.expanded&&e;this._expanded=n;const t=this.shadowRoot.querySelector(".arrow");t&&t.setAttribute("aria-expanded",String(n))}_updateSelectedState(){this.classList.toggle("selected",this.selected)}}customElements.get("y-panel")\|\|customElements.define("y-panel",re);class oe extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.render()}render(){const e=new CSSStyleSheet;e.replaceSync("\n :host {\n display: block;\n }\n "),this.shadowRoot.adoptedStyleSheets=[e],this.shadowRoot.innerHTML="\n <slot></slot>\n "}}customElements.get("y-panelbar")\|\|customElements.define("y-panelbar",oe);class ae extends HTMLElement{static get observedAttributes(){return["value","min","max","step","size","color","label-display","label-format","indeterminate","disabled"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("min")\|\|this.setAttribute("min","0"),this.hasAttribute("max")\|\|this.setAttribute("max","100"),this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(e){e?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}get labelFormat(){return this.getAttribute("label-format")\|\|"percent"}set labelFormat(e){this.setAttribute("label-format",e)}get labelDisplay(){return"false"!==this.getAttribute("label-display")}set labelDisplay(e){this.setAttribute("label-display",e?"true":"false")}get max(){return parseFloat(this.getAttribute("max"))\|\|100}set max(e){this.setAttribute("max",String(e))}get min(){return parseFloat(this.getAttribute("min"))\|\|0}set min(e){this.setAttribute("min",String(e))}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get step(){const e=parseFloat(this.getAttribute("step"));return Number.isNaN(e)\|\|e<=0?null:e}set step(e){null==e?this.removeAttribute("step"):this.setAttribute("step",String(e))}get value(){const e=parseFloat(this.getAttribute("value"));return Number.isNaN(e)?null:e}set value(e){null==e?this.removeAttribute("value"):this.setAttribute("value",String(e))}decrement(){null!==this.value&&(this.value=Math.max(this.value-(this.step\|\|1),this.min))}increment(){null!==this.value&&(this.value=Math.min(this.value+(this.step\|\|1),this.max))}get percentage(){if(null===this.value)return 0;const e=this.max-this.min;if(e<=0)return 0;let n=(this.value-this.min)/e100;if(this.step){const t=this.step/e100;n=Math.round(n/t)t}return Math.max(0,Math.min(100,n))}render(){const e=this.indeterminate,n=this.percentage,[t,r]=u(this.color,null),o=this._getSizeVar(this.size),a=this.disabled,i=this.labelDisplay&&!e,s=this._getLabel(),c=null!==this.value?this.value:void 0;this.shadowRoot.innerHTML=`<style>${this._buildStyleSheet(t,r,o,n,e,a)}</style>`+this._buildHTML(n,i,s,e,c),this._autoHideHeader()}_autoHideHeader(){const e=this.shadowRoot.querySelector(".progress-header"),n=e?.querySelector("slot");if(!n\|\|!e)return;const t=()=>{const t=n.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));e.style.display=t?"":"none"};n.addEventListener("slotchange",t),t()}_buildHTML(e,n,t,r,o){return`\n <div class="progress-wrapper">\n <div class="progress-header">\n <span class="label"><slot></slot></span>\n </div>\n <div\n class="track"\n part="track"\n role="progressbar"\n aria-valuenow="${void 0!==o?o:""}"\n aria-valuemin="${this.min}"\n aria-valuemax="${this.max}"\n ${r?'aria-busy="true"':""}\n >\n ${n?`<span class="value-label value-label--track" part="value-label">${t}</span>`:""}\n <div class="bar" part="bar">\n ${n?`<span class="value-label value-label--bar">${t}</span>`:""}\n </div>\n </div>\n </div>\n `}_buildStyleSheet(e,n,t,r,o,a){return`\n :host {\n display: block;\n font-family: var(--font-family-body);\n color: var(--base-content--);\n opacity: ${a?"0.5":"1"};\n pointer-events: ${a?"none":"auto"};\n }\n\n .progress-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .progress-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: var(--font-size-label, 0.83em);\n }\n\n .label {\n color: var(--base-content--);\n }\n\n .track {\n position: relative;\n width: 100%;\n height: ${t};\n background: var(--base-background-component);\n border: var(--component-progress-border-width) solid var(--base-border);\n border-radius: var(--component-progress-border-radius-outer);\n overflow: hidden;\n box-sizing: border-box;\n padding: var(--component-progress-padding);\n }\n\n .bar {\n position: relative;\n height: 100%;\n background: ${e};\n border-radius: var(--component-progress-border-radius-inner);\n width: ${o?"30%":`${r}%`};\n transition: ${o?"none":"width 0.3s ease"};\n overflow: hidden;\n ${o?"animation: indeterminate 1.5s ease-in-out infinite;":""}\n }\n\n .value-label {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size-small, 0.75em);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n pointer-events: none;\n font-weight: 600;\n }\n\n .value-label--track { color: ${e}; }\n .value-label--bar { color: ${n}; width: calc(100% / (${r\|\|1} / 100)); }\n\n @keyframes indeterminate {\n 0% { transform: translateX(0%); }\n 50% { transform: translateX(233%); }\n 100% { transform: translateX(0%); }\n }\n `}_getLabel(){if(this.indeterminate\|\|null===this.value)return"";switch(this.labelFormat){case"value":return`${this.value} / ${this.max}`;case"fraction":return`${this.value-this.min} / ${this.max-this.min}`;default:return`${Math.round(this.percentage)}%`}}_getSizeVar(e){const n={small:"var(--component-progress-size-small)",medium:"var(--component-progress-size-medium)",large:"var(--component-progress-size-large)"};return n[e]\|\|n.medium}}customElements.get("y-progress")\|\|customElements.define("y-progress",ae);class ie extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["icon","color","max","value","size","disabled","readonly","name"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._hoverIndex=-1,this.render()}connectedCallback(){this._internals.setFormValue(this.value)}attributeChangedCallback(e,n,t){n!==t&&("value"===e&&this._internals.setFormValue(t,this.getAttribute("name")),"name"!==e?this.render():this._internals.setFormValue(this.value,t))}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get icon(){return this.getAttribute("icon")\|\|"star"}set icon(e){this.setAttribute("icon",e)}get max(){return Math.max(1,parseInt(this.getAttribute("max")\|\|"5",10))}set max(e){this.setAttribute("max",String(e))}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get readonly(){return this.hasAttribute("readonly")}set readonly(e){e?this.setAttribute("readonly",""):this.removeAttribute("readonly")}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get value(){return parseInt(this.getAttribute("value")\|\|"0",10)}set value(e){this.setAttribute("value",String(e)),this._internals.setFormValue(String(e),this.getAttribute("name"))}render(){const e=!this.disabled&&!this.readonly,n=r(this.icon),t=this._getFilledColor(this.color),o=this._getIconSize(this.size),a=this._getIconGap(this.size);this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet(e,t,o,a)],this.shadowRoot.innerHTML=this._buildHTML(e,n),this._attachIconListeners()}_attachIconListeners(){!this.disabled&&!this.readonly&&(this.shadowRoot.querySelectorAll(".icon").forEach(e=>{const n=parseInt(e.dataset.index,10);e.addEventListener("mouseenter",()=>{this._hoverIndex=n,this._updateIcons(n)}),e.addEventListener("mouseleave",()=>{this._hoverIndex=-1,this._updateIcons(this.value)}),e.addEventListener("click",()=>{const e=n!==this.value\|\|this.hasAttribute("required")?n:0;this.value=e,this._updateIcons(e),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))})}),this.shadowRoot.querySelector(".rating").addEventListener("mouseleave",()=>{this._hoverIndex=-1,this._updateIcons(this.value)}))}_buildHTML(e,n){const{max:t,value:r}=this,o=Array.from({length:t},(o,a)=>{const i=a+1;return`<span\n class="icon${i<=r?" filled":""}"\n data-index="${i}"\n part="icon"\n ${e?`role="radio" aria-label="${i} of ${t}" tabindex="0"`:'aria-hidden="true"'}\n >${n}</span>`}).join("");return`<div class="rating" part="rating" role="${e?"radiogroup":"img"}" aria-label="Rating: ${r} of ${t}">${o}</div>`}_buildStyleSheet(e,n,t,r){const o=new CSSStyleSheet;return o.replaceSync(`\n :host {\n display: inline-block;\n font-family: var(--font-family-body);\n opacity: ${this.disabled?"0.5":"1"};\n pointer-events: ${this.disabled?"none":"auto"};\n }\n\n .rating {\n display: inline-flex;\n align-items: center;\n gap: ${r};\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${t};\n height: ${t};\n color: var(--base-content-lighter, #9d9fa3);\n transition: color 0.15s ease, transform 0.1s ease;\n cursor: ${e?"pointer":"default"};\n flex-shrink: 0;\n }\n\n .icon.filled {\n color: ${n};\n }\n\n .icon svg {\n width: 100%;\n height: 100%;\n }\n\n ${e?"\n .icon:hover,\n .icon:focus-visible {\n transform: scale(1.15);\n }\n ":""}\n `),o}_getFilledColor(e){return e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl")?e:`var(--${e}-content--)`}_getIconGap(e){return{small:"2px",medium:"4px",large:"6px"}[e]\|\|"4px"}_getIconSize(e){return{small:"18px",medium:"24px",large:"32px"}[e]\|\|"24px"}_updateIcons(e){this.shadowRoot.querySelectorAll(".icon").forEach(n=>{const t=parseInt(n.dataset.index,10);n.classList.toggle("filled",t<=e)})}}customElements.get("y-rating")\|\|customElements.define("y-rating",ie);class se extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["options","name","value","disabled"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._value=""}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&("value"===e?(this._value=t,this._internals.setFormValue(t,this.name),this._updateChecked()):["options","name","disabled"].includes(e)&&this.render())}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get name(){return this.getAttribute("name")\|\|""}set name(e){this.setAttribute("name",e)}get options(){try{return JSON.parse(this.getAttribute("options")\|\|"[]")}catch{return[]}}set options(e){this.setAttribute("options",Array.isArray(e)?JSON.stringify(e):e??"[]")}get value(){return this._value}set value(e){this._value=e,this.setAttribute("value",e),this._internals.setFormValue(e,this.name),this._updateChecked()}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML=`\n <fieldset role="radiogroup" part="radio">\n ${this._buildOptionsHTML()}\n </fieldset>\n `,this._bindRadioListeners()}_bindRadioListeners(){this.shadowRoot.querySelectorAll("input[type=radio]").forEach((e,n,t)=>{e.addEventListener("keydown",e=>this._handleKey(e,n,t)),e.addEventListener("click",e=>{this.value=e.target.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})})}_buildOptionsHTML(){const{name:e,disabled:n,value:t,options:r}=this;return r.map((r,o)=>`\n <label part="label">\n <input\n type="radio"\n name="${e}"\n value="${r.value}"\n ${n?"disabled":""}\n ${t===r.value?"checked":""}\n tabindex="${t?t===r.value?"0":"-1":0===o?"0":"-1"}"\n role="radio"\n aria-checked="${t===r.value}"\n />\n ${r.label}\n </label>\n `).join("")}_buildStyleSheet(){const e=new CSSStyleSheet;return e.replaceSync('\n :host {\n display: block;\n font-family: var(--font-family-body);\n }\n fieldset {\n border: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-x-small, 8px);\n }\n label {\n display: flex;\n align-items: center;\n gap: 0.5em;\n cursor: pointer;\n }\n input[type="radio"] {\n appearance: none;\n width: var(--component-radio-size, 16px);\n height: var(--component-radio-size, 16px);\n border: var(--component-inputs-border-width, 2px) solid var(--component-radio-color);\n border-radius: 50%;\n position: relative;\n outline: none;\n cursor: pointer;\n }\n input[type="radio"]:checked::after {\n content: \'\';\n position: absolute;\n top: 50%;\n left: 50%;\n width: var(--component-radio-dot-size, 8px);\n height: var(--component-radio-dot-size, 8px);\n background: var(--component-radio-color);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n }\n input[type="radio"]:focus-visible {\n outline: 2px solid var(--component-radio-accent);\n outline-offset: 2px;\n }\n input[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n '),e}_handleKey(e,n,t){const r=t.length;let o;if("ArrowDown"===e.key\|\|"ArrowRight"===e.key)e.preventDefault(),o=(n+1)%r;else{if("ArrowUp"!==e.key&&"ArrowLeft"!==e.key)return" "===e.key\|\|"Enter"===e.key?(e.preventDefault(),this.value=t[n].value,void this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):void 0;e.preventDefault(),o=(n-1+r)%r}t[o].focus()}_updateChecked(){this.shadowRoot.querySelectorAll("input[type=radio]").forEach(e=>{const n=e.value===this.value;e.checked=n,e.setAttribute("aria-checked",n),e.setAttribute("tabindex",n?"0":"-1")})}}customElements.get("y-radio")\|\|customElements.define("y-radio",se);class ce extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["value","min","max","step","size","color","disabled","name","orientation"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._dragging=!1}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("min")\|\|this.setAttribute("min","0"),this.hasAttribute("max")\|\|this.setAttribute("max","100"),this.hasAttribute("value")\|\|this.setAttribute("value","50"),this._internals.setFormValue(this.value),this.render(),this._bindEvents()}attributeChangedCallback(e,n,t){n!==t&&("value"!==e&&"name"!==e\|\|this._internals.setFormValue(this.value,this.getAttribute("name")),"value"===e&&this.shadowRoot.querySelector(".slider-track")?this._updateVisuals():(this.render(),this._bindEvents()))}get color(){return this.getAttribute("color")\|\|"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get max(){return parseFloat(this.getAttribute("max"))\|\|100}set max(e){this.setAttribute("max",String(e))}get min(){return parseFloat(this.getAttribute("min"))\|\|0}set min(e){this.setAttribute("min",String(e))}get orientation(){return this.getAttribute("orientation")\|\|"horizontal"}set orientation(e){this.setAttribute("orientation",e)}get percentage(){const e=this.max-this.min;if(e<=0)return 0;const n=(this.value-this.min)/e100;return Math.max(0,Math.min(100,n))}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get step(){const e=parseFloat(this.getAttribute("step"));return Number.isNaN(e)\|\|e<=0?null:e}set step(e){null==e?this.removeAttribute("step"):this.setAttribute("step",String(e))}get value(){const e=parseFloat(this.getAttribute("value"));return Number.isNaN(e)?0:e}set value(e){const n=Math.max(this.min,Math.min(this.max,Number(e))),t=this._snapToStep(n);this.setAttribute("value",String(t))}render(){const e=this.percentage,n=this._getTrackColor(this.color),t=this._getThumbColor(this.color),{trackHeight:r}=this._getSizeVars(this.size),o=this.disabled;this.shadowRoot.innerHTML=`<style>${this._buildStyleSheet(n,t,r,e,o)}</style>`+this._buildHTML(e,o)}_bindEvents(){const e=this.shadowRoot.querySelector(".slider-track"),n=this.shadowRoot.querySelector(".thumb");if(!e\|\|!n)return;const t=e=>{this.disabled\|\|(e.preventDefault(),this._dragging=!0,this._updateFromPointer(e),document.addEventListener("pointermove",r),document.addEventListener("pointerup",o))},r=e=>{this._dragging&&this._updateFromPointer(e)},o=()=>{this._dragging=!1,document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",o),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))};e.addEventListener("pointerdown",t),n.addEventListener("pointerdown",t),e.addEventListener("keydown",e=>{if(this.disabled)return;const n=this.step\|\|1;let t=!0;switch(e.key){case"ArrowRight":case"ArrowUp":this.value=this.value+n;break;case"ArrowLeft":case"ArrowDown":this.value=this.value-n;break;case"Home":this.value=this.min;break;case"End":this.value=this.max;break;default:t=!1}t&&(e.preventDefault(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))})}_buildHTML(e,n){return`\n <div class="slider-wrapper">\n <div\n class="slider-track"\n part="track"\n role="slider"\n tabindex="${n?"-1":"0"}"\n aria-valuenow="${this.value}"\n aria-valuemin="${this.min}"\n aria-valuemax="${this.max}"\n ${this.step?`aria-valuestep="${this.step}"`:""}\n aria-orientation="${this.orientation}"\n ${n?'aria-disabled="true"':""}\n >\n <div class="slider-inner">\n <div class="fill" part="fill"></div>\n <div class="thumb" part="thumb"></div>\n </div>\n </div>\n </div>\n `}_buildStyleSheet(e,n,t,r,o){return`\n :host {\n display: inline-block;\n font-family: var(--font-family-body);\n color: var(--base-content--);\n opacity: ${o?"0.5":"1"};\n pointer-events: ${o?"none":"auto"};\n min-width: 100px;\n }\n\n .slider-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-2x-small, 4px);\n }\n\n .slider-track {\n position: relative;\n width: 100%;\n height: ${t};\n background: var(--base-background-component);\n border: var(--component-slider-border-width) solid var(--base-border);\n border-radius: var(--component-slider-border-radius-outer);\n box-sizing: border-box;\n padding: var(--component-slider-padding);\n cursor: pointer;\n outline: none;\n }\n\n .slider-track:focus-visible {\n border-color: ${n};\n }\n\n .slider-inner {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n\n .fill {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background: ${e};\n border-radius: var(--component-slider-border-radius-inner) 0 0 var(--component-slider-border-radius-inner);\n width: ${r}%;\n pointer-events: none;\n }\n\n .thumb {\n position: absolute;\n top: 0;\n left: ${r}%;\n transform: translateX(-50%);\n width: 8px;\n height: 100%;\n background: ${n};\n border-radius: var(--component-slider-thumb-border-radius);\n cursor: grab;\n z-index: 1;\n touch-action: none;\n }\n\n .thumb:active {\n cursor: grabbing;\n }\n `}_getSizeVars(e){const n={small:{trackHeight:"var(--sizing-small, 27px)"},medium:{trackHeight:"var(--sizing-medium, 35px)"},large:{trackHeight:"var(--sizing-large, 51px)"}};return n[e]\|\|n.medium}_getThumbColor(e){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[e]\|\|e}_getTrackColor(e){return{primary:"var(--primary-background-hover)",secondary:"var(--secondary-background-hover)",base:"var(--base-background-active)",success:"var(--success-background-hover)",warning:"var(--warning-background-hover)",error:"var(--error-background-hover)",help:"var(--help-background-hover)"}[e]\|\|`color-mix(in srgb, ${e} 40%, transparent)`}_snapToStep(e){if(!this.step)return e;const n=Math.round((e-this.min)/this.step);return Math.max(this.min,Math.min(this.max,this.min+nthis.step))}_updateFromPointer(e){const n=this.shadowRoot.querySelector(".slider-track"),t=(this.shadowRoot.querySelector(".slider-inner")\|\|n).getBoundingClientRect(),r=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),o=this.min+r(this.max-this.min);this.value=o,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}_updateVisuals(){const e=this.percentage,n=this.shadowRoot.querySelector(".fill"),t=this.shadowRoot.querySelector(".thumb"),r=this.shadowRoot.querySelector(".slider-track");n&&(n.style.width=`${e}%`),t&&(t.style.left=`${e}%`),r&&r.setAttribute("aria-valuenow",String(this.value))}}customElements.get("y-slider")\|\|customElements.define("y-slider",ce);class le extends HTMLElement{static get observedAttributes(){return["direction","mode","columns","gap","wrap","align","justify","responsive"]}constructor(){super(),this.attachShadow({mode:"open"}),this._resizeObserver=null,this._masonryRAF=null,this.render()}connectedCallback(){this._applyLayout(),"masonry"===this.mode&&this._initMasonry(),this.responsive&&this._initResponsive()}disconnectedCallback(){this._teardownMasonry()}attributeChangedCallback(e,n,t){if(n===t)return;const r="mode"===e&&"masonry"===n,o="masonry"===this.mode;r&&this._teardownMasonry(),this._applyLayout(),o&&this.isConnected&&this._initMasonry(),"responsive"===e&&this.responsive&&this.isConnected&&this._initResponsive()}get direction(){return this.getAttribute("direction")\|\|"row"}set direction(e){this.setAttribute("direction",e)}get mode(){return this.getAttribute("mode")\|\|"flex"}set mode(e){this.setAttribute("mode",e)}get columns(){return parseInt(this.getAttribute("columns"),10)\|\|3}set columns(e){this.setAttribute("columns",String(e))}get gap(){return this.getAttribute("gap")\|\|"medium"}set gap(e){this.setAttribute("gap",e)}get wrap(){return this.hasAttribute("wrap")}set wrap(e){e?this.setAttribute("wrap",""):this.removeAttribute("wrap")}get align(){return this.getAttribute("align")\|\|"stretch"}set align(e){this.setAttribute("align",e)}get justify(){return this.getAttribute("justify")\|\|"start"}set justify(e){this.setAttribute("justify",e)}get responsive(){return"false"!==this.getAttribute("responsive")}set responsive(e){!1===e\|\|"false"===e?this.setAttribute("responsive","false"):this.removeAttribute("responsive")}render(){this.shadowRoot.innerHTML='<div class="container" part="container"><slot></slot></div>',this._container=this.shadowRoot.querySelector(".container"),this._slot=this.shadowRoot.querySelector("slot"),this._slot.addEventListener("slotchange",()=>{"masonry"===this.mode&&this._syncMasonryObserver()})}_applyLayout(){if(!this._container)return;const e=this._buildStyleSheet();this.shadowRoot.adoptedStyleSheets=[e],"masonry"===this.mode?this._layoutMasonry():this._clearMasonryPositions()}_buildStyleSheet(){const e=new CSSStyleSheet,n=this._resolveGap(),t=this.mode,r=this.columns,o=this.responsive;let a,i="";if("grid"===t){a=`\n .container {\n display: grid;\n grid-template-columns: ${o?this._buildResponsiveGridTemplate(r,n):`repeat(var(--component-stack-columns, ${r}), 1fr)`};\n gap: ${n};\n }\n `}else if("masonry"===t)a="\n .container {\n position: relative;\n }\n ";else{const e=this.direction,t=this.wrap\|\|o&&"row"===e,r={start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly"};a=`\n .container {\n display: flex;\n flex-direction: ${e};\n flex-wrap: ${t?"wrap":"nowrap"};\n align-items: ${{start:"flex-start",end:"flex-end",center:"center",stretch:"stretch",baseline:"baseline"}[this.align]\|\|"stretch"};\n justify-content: ${r[this.justify]\|\|"flex-start"};\n gap: ${n};\n }\n `,t&&(i="::slotted() { flex-shrink: 0; }")}return e.replaceSync(`\n :host {\n display: block;\n box-sizing: border-box;\n }\n ${a}\n ${i}\n `),e}_buildResponsiveGridTemplate(e,n){return`repeat(auto-fit, minmax(${`min(100%, max(var(--component-stack-min-item-width, 240px), ${`calc((100% - ${e-1} ${n}) / ${e})`}))`}, 1fr))`}_clearMasonryPositions(){this._getSlottedElements().forEach(e=>{e.style.position="",e.style.top="",e.style.left="",e.style.width=""}),this._container&&(this._container.style.height="")}_getBreakpointValue(e,n){const t=getComputedStyle(this).getPropertyValue(e).trim();return t?parseInt(t,10):n}_getResolvedColumns(){return this._getBreakpointValue("--component-stack-columns",this.columns)}_getResponsiveColumns(){const e=this._getResolvedColumns(),n=this._getBreakpointValue("--component-stack-mobile-breakpoint",576),t=this._getBreakpointValue("--component-stack-tablet-breakpoint",768),r=this._container?this._container.offsetWidth:window.innerWidth;return r<=n?1:r<=t?Math.min(2,e):e}_getSlottedElements(){return this._slot?this._slot.assignedElements({flatten:!0}):[]}_initMasonry(){this._teardownMasonry(),this._observedItems=new Set,this._resizeObserver=new ResizeObserver(()=>{this._masonryRAF&&cancelAnimationFrame(this._masonryRAF),this._masonryRAF=requestAnimationFrame(()=>this._layoutMasonry())}),this._resizeObserver.observe(this._container),this._syncMasonryObserver()}_initResponsive(){"masonry"===this.mode&&(this._resizeObserver\|\|this._initMasonry())}_layoutMasonry(){const e=this._getSlottedElements();if(!e.length\|\|!this._container)return;const n=this.responsive?this._getResponsiveColumns():this._getResolvedColumns(),t=this._resolveGapPx(),r=(this._container.offsetWidth-t(n-1))/n,o=new Array(n).fill(0);e.forEach(e=>{const n=o.indexOf(Math.min(...o)),a=n(r+t),i=o[n];e.style.position="absolute",e.style.top=`${i}px`,e.style.left=`${a}px`,e.style.width=`${r}px`,o[n]+=e.offsetHeight+t}),this._container.style.height=Math.max(...o)-t+"px"}_resolveGap(){const e={none:"var(--spacing-none, 0px)","x-small":"var(--spacing-x-small, 4px)",small:"var(--spacing-small, 6px)",medium:"var(--spacing-medium, 8px)",large:"var(--spacing-large, 12px)","x-large":"var(--spacing-x-large, 16px)","2x-large":"var(--spacing-2x-large, 24px)","4x-large":"var(--spacing-4x-large, 32px)"};return`var(--component-stack-gap, ${e[this.gap]\|\|e.medium})`}_resolveGapPx(){const e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",e.style.width=this._resolveGap(),this._container.appendChild(e);const n=e.offsetWidth;return e.remove(),n}_syncMasonryObserver(){if(!this._resizeObserver)return void this._initMasonry();const e=new Set(this._getSlottedElements());for(const n of this._observedItems)e.has(n)\|\|(this._resizeObserver.unobserve(n),this._observedItems.delete(n));for(const n of e)this._observedItems.has(n)\|\|(this._resizeObserver.observe(n),this._observedItems.add(n));this._layoutMasonry()}_teardownMasonry(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null,this._observedItems=null),this._masonryRAF&&(cancelAnimationFrame(this._masonryRAF),this._masonryRAF=null)}}customElements.get("y-stack")\|\|customElements.define("y-stack",le);class de extends HTMLElement{static get observedAttributes(){return["items","current","orientation","position","size","linear","editable"]}constructor(){super(),this.attachShadow({mode:"open"}),this._stepStates=[]}connectedCallback(){this._syncStepStates(),this.render()}attributeChangedCallback(e,n,t){n!==t&&("items"===e&&this._syncStepStates(),this.render())}get current(){const e=parseInt(this.getAttribute("current"),10);return Number.isFinite(e)?Math.max(0,Math.min(e,this.items.length-1)):0}set current(e){this.setAttribute("current",String(e))}get editable(){return this.hasAttribute("editable")}set editable(e){e?this.setAttribute("editable",""):this.removeAttribute("editable")}get items(){try{return JSON.parse(this.getAttribute("items")\|\|"[]")}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get linear(){return this.hasAttribute("linear")}set linear(e){e?this.setAttribute("linear",""):this.removeAttribute("linear")}get orientation(){return"vertical"===this.getAttribute("orientation")?"vertical":"horizontal"}set orientation(e){this.setAttribute("orientation",e)}get position(){return"end"===this.getAttribute("position")?"end":"start"}set position(e){this.setAttribute("position",e)}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",e)}complete(e){const n=void 0!==e?e:this.current;n<0\|\|n>=this.items.length\|\|(this._stepStates[n]="complete",this.render(),this.dispatchEvent(new CustomEvent("complete",{bubbles:!0,composed:!0,detail:{step:this.items[n],index:n}})))}goTo(e){e<0\|\|e>=this.items.length\|\|e!==this.current&&(this.linear&&"complete"!==this._getStepState(e)\|\|this._fireChangeAndApply(e))}next(){const e=this.items,n=this.current;if(n===e.length-1){this._stepStates[n]="complete",this.render();return void(this._stepStates.every(e=>"complete"===e)&&this.dispatchEvent(new CustomEvent("finish",{bubbles:!0,composed:!0})))}this._stepStates[n]="complete",this._fireChangeAndApply(n+1)}previous(){this.current<=0\|\|this._fireChangeAndApply(this.current-1)}render(){const e=this.items;if(!e.length)return void(this.shadowRoot.innerHTML="");this.shadowRoot.innerHTML="";const n=document.createElement("style");n.textContent=this._buildStyles(),this.shadowRoot.appendChild(n);const t=this._buildIndicators(e),r=this._buildPanels(e);"end"===this.position?(this.shadowRoot.appendChild(r),this.shadowRoot.appendChild(t)):(this.shadowRoot.appendChild(t),this.shadowRoot.appendChild(r))}reset(){this._stepStates=this.items.map(()=>"pending"),this.current=0}_buildConnectorStyles(){const e=`var(--component-stepper-indicator-size-${this.size}, ${this._getDefaultIndicatorSize()})`;return`\n .connector {\n flex: 1;\n min-width: calc(${e} + 8px);\n min-height: calc(${e} + 8px);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .connector-line {\n background: var(--component-stepper-connector-color, var(--base-border, #ddd));\n transition: background 0.2s ease;\n }\n\n .connector-line.complete {\n background: var(--component-stepper-connector-color-complete, var(--primary-content--, #1976d2));\n }\n\n :host([orientation="horizontal"]) .connector-line {\n height: 2px;\n width: 100%;\n }\n\n :host([orientation="vertical"]) .connector-line {\n width: 2px;\n height: 100%;\n }\n `}_buildHostStyles(){return'\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n font-weight: var(--font-weight-body, 300);\n }\n\n :host([orientation="vertical"]) {\n display: flex;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n '}_buildIndicator(e,n,t){const r=this._getStepState(n),o=n===this.current,a=this._isIndicatorClickable(n,r),i=["indicator"];o&&i.push("indicator--active"),"complete"===r&&i.push("indicator--complete"),"error"===r&&i.push("indicator--error");const s=this._buildIndicatorButton(e,n,r,o,a),c=[_("div",{class:`indicator ${r} ${o?"active":""}`,part:i.join(" "),role:"listitem"},[s])];return n<t.length-1&&c.push(_("div",{class:"connector",part:"connector",role:"presentation","aria-hidden":"true"},[_("div",{class:"connector-line "+("complete"===r?"complete":"")})])),c}_buildIndicatorButton(e,n,t,r,o){const a=`panel-${e.slot}`,i={class:"indicator-btn",id:`indicator-${e.slot}`,"aria-controls":a,"aria-label":"complete"===t?`${e.label} (complete)`:e.label};r&&(i["aria-current"]="step"),r?i.tabindex="0":(o\|\|(i["aria-disabled"]="true"),i.tabindex="-1");const s=_("button",i,[this._buildIndicatorIcon(e,n,t),this._buildIndicatorLabel(e)]);return o&&s.addEventListener("click",()=>this._onIndicatorClick(n)),s.addEventListener("keydown",e=>this._onIndicatorKeydown(e,n)),s}_buildIndicatorIcon(e,n,t){const r=`${e.slot}-icon`;if(!!this.querySelector(`[slot="${r}"]`)){const e=_("slot",{name:r});return _("span",{class:"indicator-icon",part:"indicator-icon"},[e])}let o;return o="complete"===t?_("y-icon",{name:"check",size:this._getIconSize()}):"error"===t?_("y-icon",{name:"circle-exclamation",size:this._getIconSize()}):e.icon?_("y-icon",{name:e.icon,size:this._getIconSize()}):document.createTextNode(String(n+1)),_("span",{class:"indicator-icon",part:"indicator-icon"},[o])}_buildIndicatorLabel(e){const n=[_("span",{class:"indicator-label-text",part:"indicator-label"},[e.label])];return e.description&&n.push(_("span",{class:"indicator-description",part:"indicator-description"},[e.description])),_("span",{class:"indicator-label"},n)}_buildIndicators(e){return _("div",{class:"indicators",part:"indicators",role:"list"},e.flatMap((n,t)=>this._buildIndicator(n,t,e)))}_buildIndicatorStyles(){const e=`var(--component-stepper-indicator-size-${this.size}, ${this._getDefaultIndicatorSize()})`;return`\n .indicators {\n display: flex;\n align-items: center;\n gap: ${`var(--component-stepper-gap-${this.size}, ${this._getDefaultGap()})`};\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n :host([orientation="vertical"]) .indicators {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .indicator {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n :host([orientation="vertical"]) .indicator {\n flex-direction: row;\n }\n\n .indicator-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n background: none;\n border: none;\n cursor: default;\n padding: 4px;\n font-family: inherit;\n font-size: inherit;\n color: inherit;\n border-radius: var(--radii-small, 4px);\n outline: none;\n transition: opacity 0.2s ease;\n }\n\n .indicator-btn[aria-disabled="false"],\n .indicator-btn:not([aria-disabled="true"])[tabindex="0"] {\n cursor: pointer;\n }\n\n .indicator-btn:focus-visible {\n outline: 2px solid var(--primary-content--, #1976d2);\n outline-offset: 2px;\n }\n\n .indicator-btn[aria-disabled="true"] {\n opacity: 0.55;\n }\n\n .indicator-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${e};\n height: ${e};\n border-radius: var(--radii-full, 50%);\n font-size: var(--font-size-label, 0.85em);\n font-weight: var(--font-weight-heading, 500);\n flex-shrink: 0;\n transition: background 0.2s ease, color 0.2s ease;\n background: var(--component-stepper-color-pending, var(--base-border, #ccc));\n color: var(--component-stepper-label-color, var(--base-content--, #333));\n }\n\n .active .indicator-icon {\n background: var(--component-stepper-color-active, var(--primary-content--, #1976d2));\n color: var(--component-stepper-color-active-text, var(--primary-content-inverse, #fff));\n }\n\n .complete .indicator-icon {\n background: var(--component-stepper-color-complete, var(--success-content--, #2e7d32));\n color: var(--component-stepper-color-complete-text, var(--success-content-inverse, #fff));\n }\n\n .error .indicator-icon {\n background: var(--component-stepper-color-error, var(--error-content--, #d32f2f));\n color: var(--component-stepper-color-error-text, var(--error-content-inverse, #fff));\n }\n\n .indicator-label {\n display: flex;\n flex-direction: column;\n gap: 2px;\n text-align: left;\n }\n\n .indicator-label-text {\n font-size: var(--font-size-label, 0.85em);\n font-weight: var(--font-weight-heading, 500);\n color: var(--component-stepper-label-color, var(--base-content--, #333));\n }\n\n .indicator-description {\n font-size: var(--font-size-small, 0.75em);\n color: var(--component-stepper-label-color, var(--base-content--, #666));\n opacity: 0.7;\n }\n `}_buildPanelStyles(){return'\n .panels {\n margin-top: var(--spacing-medium, 16px);\n }\n\n :host([position="end"]) .panels {\n margin-top: 0;\n margin-bottom: var(--spacing-medium, 16px);\n }\n\n :host([orientation="vertical"]) .panels {\n margin-top: 0;\n margin-left: var(--spacing-medium, 16px);\n flex: 1;\n }\n\n :host([orientation="vertical"][position="end"]) .panels {\n margin-left: 0;\n margin-right: var(--spacing-medium, 16px);\n }\n '}_buildPanels(e){const n=_("div",{class:"panels",part:"panels"});return e.forEach((e,t)=>{const r=t===this.current,o=_("div",{class:"panel",part:"panel",id:`panel-${e.slot}`,role:"tabpanel","aria-labelledby":`indicator-${e.slot}`,hidden:!r}),a=_("slot",{name:e.slot});o.appendChild(a),n.appendChild(o)}),n}_buildStyles(){return[this._buildHostStyles(),this._buildIndicatorStyles(),this._buildConnectorStyles(),this._buildPanelStyles()].join("\n")}_fireChangeAndApply(e){const n=this.current,t=this.items[e],r=new CustomEvent("change",{bubbles:!0,composed:!0,cancelable:!0,detail:{index:e,previousIndex:n,step:t}});this.dispatchEvent(r)&&(this.current=e)}_getDefaultGap(){const e={small:"4px",medium:"8px",large:"12px"};return e[this.size]\|\|e.medium}_getDefaultIndicatorSize(){const e={small:"28px",medium:"36px",large:"44px"};return e[this.size]\|\|e.medium}_getIconSize(){return{small:"small",medium:"medium",large:"large"}[this.size]\|\|"medium"}_getStepState(e){return this._stepStates[e]&&"pending"!==this._stepStates[e]?this._stepStates[e]:"pending"}_isIndicatorClickable(e,n){return e!==this.current&&(!this.linear&&(!(!this.editable\|\|"complete"!==n)\|\|!this.editable&&"complete"!==n))}_onIndicatorClick(e){this.goTo(e)}_onIndicatorKeydown(e,n){const t=Array.from(this.shadowRoot.querySelectorAll(".indicator-btn")),r=t.indexOf(e.currentTarget),o="horizontal"===this.orientation,a=o?"ArrowRight":"ArrowDown",i=o?"ArrowLeft":"ArrowUp";if(e.key===a){e.preventDefault();const n=t[r+1];n&&(e.currentTarget.setAttribute("tabindex","-1"),n.setAttribute("tabindex","0"),n.focus())}else if(e.key===i){e.preventDefault();const n=t[r-1];n&&(e.currentTarget.setAttribute("tabindex","-1"),n.setAttribute("tabindex","0"),n.focus())}else"Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),e.currentTarget.getAttribute("aria-disabled")&&"false"!==e.currentTarget.getAttribute("aria-disabled")\|\|this._onIndicatorClick(n))}_syncStepStates(){const e=this.items,n=this._stepStates;this._stepStates=e.map((e,t)=>n[t]\|\|e.status\|\|"pending")}}customElements.get("y-stepper")\|\|customElements.define("y-stepper",de);class pe extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["checked","disabled","animate","toggle-label","label-position","size","value","on-color","off-color"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("label-position")\|\|this.setAttribute("label-position","top"),this.hasAttribute("animate")\|\|this.setAttribute("animate","true"),this.render(),this._mirrorToggleLabels(),this._bindSwitchListeners()}attributeChangedCallback(e,n,t){n!==t&&this._update()}get animate(){return"false"!==this.getAttribute("animate")}set animate(e){this.setAttribute("animate",e?"true":"false")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked"),this._update()}get onColor(){return this.getAttribute("on-color")\|\|"primary"}set onColor(e){this.setAttribute("on-color",e)}get offColor(){return this.getAttribute("off-color")\|\|""}set offColor(e){e?this.setAttribute("off-color",e):this.removeAttribute("off-color")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get labelPosition(){return this.getAttribute("label-position")\|\|"top"}set labelPosition(e){this.setAttribute("label-position",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get toggleLabel(){return this.hasAttribute("toggle-label")&&"false"!==this.getAttribute("toggle-label")}set toggleLabel(e){e?this.setAttribute("toggle-label","true"):this.removeAttribute("toggle-label")}get value(){return this.getAttribute("value")\|\|"on"}set value(e){this.setAttribute("value",e),this._update()}render(){this.shadowRoot.adoptedStyleSheets=[this._buildStyleSheet()],this.shadowRoot.innerHTML=`\n ${this._labelTag("top")}\n <div class="switch" part="switch" tabindex="0" role="switch" aria-checked="${this.checked}" aria-disabled="${this.disabled}">\n <div class="track">\n <div class="label-content"><slot name="off-label">Off</slot></div>\n <div class="label-content"><slot name="on-label">On</slot></div>\n </div>\n <div class="toggle" part="toggle">\n <span class="off"></span>\n <span class="on"></span>\n </div>\n </div>\n ${this._labelTag("bottom")}\n `,this._update(),A(this.shadowRoot.querySelector(".label-wrapper"))}toggle(){this.disabled\|\|(this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}_bindSwitchListeners(){const e=this.shadowRoot.querySelector(".switch");e.addEventListener("click",()=>this.toggle()),e.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key\|\|(e.preventDefault(),this.toggle())})}_buildStyleSheet(){const e=new CSSStyleSheet;return e.replaceSync('\n :host {\n display: inline-flex;\n flex-direction: var(--switch-dir, column);\n align-items: center;\n gap: var(--spacing-x-small);\n font-family: var(--font-family-body);\n --switch-padding: var(--component-switch-padding, 2px);\n --show-labels: flex;\n --show-toggle-label: none;\n --switch-width: max-content;\n --toggle-width: auto;\n --toggle-padding: 0 var(--spacing-small);\n --toggle-radius: var(--component-switch-border-radius);\n }\n\n .label-wrapper {\n display: none;\n }\n\n .label {\n font-size: var(--font-size-label);\n color: var(--base-content--);\n }\n\n .switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--base-background-component);\n border: var(--component-switch-border-width) solid var(--base-border);\n border-radius: var(--component-switch-border-radius);\n cursor: pointer;\n height: var(--switch-height);\n font-size: var(--switch-font-size);\n box-sizing: border-box;\n padding: var(--switch-padding);\n width: var(--switch-width, max-content);\n }\n\n .track {\n display: flex;\n align-items: center;\n height: 100%;\n position: relative;\n z-index: 0;\n }\n\n .label-content {\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 var(--spacing-small);\n white-space: nowrap;\n position: relative;\n z-index: 0;\n color: var(--base-content-light);\n display: var(--show-labels, flex);\n }\n\n .toggle {\n position: absolute;\n top: var(--switch-padding);\n bottom: var(--switch-padding);\n left: var(--switch-padding);\n height: calc(100% - (var(--switch-padding) + var(--switch-padding)));\n width: var(--toggle-width, auto);\n background: var(--toggle-bg, var(--base-content-light));\n color: var(--base-background-component);\n border-radius: var(--toggle-radius, var(--component-switch-border-radius));\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--toggle-padding, 0 var(--spacing-small));\n font-weight: 500;\n z-index: 1;\n white-space: nowrap;\n transform: translateX(var(--toggle-x, 0));\n transition: var(--toggle-transition, transform 0.25s ease, background 0.25s ease);\n }\n\n .toggle .on,\n .toggle .off {\n display: none;\n }\n\n :host([checked]) .toggle .on {\n display: var(--show-toggle-label, none);\n }\n\n :host(:not([checked])) .toggle .off {\n display: var(--show-toggle-label, none);\n }\n\n :host([animate="false"]) .toggle {\n transition: none !important;\n }\n\n :host([disabled]) {\n opacity: 0.5;\n }\n\n :host([disabled]) .switch {\n cursor: not-allowed;\n }\n '),e}_labelTag(e){return"top"===e&&("top"===this.labelPosition\|\|"left"===this.labelPosition)\|\|"bottom"===e&&("bottom"===this.labelPosition\|\|"right"===this.labelPosition)?'<label class="label-wrapper"><slot name="label"></slot></label>':""}_mirrorToggleLabels(){requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".toggle");if(!e)return;e.innerHTML="";const n=this.querySelector('[slot="off-label"]'),t=this.querySelector('[slot="on-label"]'),r=document.createElement("span");r.className="off",r.appendChild(n?.cloneNode(!0)\|\|document.createTextNode("Off"));const o=document.createElement("span");o.className="on",o.appendChild(t?.cloneNode(!0)\|\|document.createTextNode("On")),e.appendChild(r),e.appendChild(o)})}_resolveColor(e,n){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[e]\|\|e\|\|n}_update(){this._updateSizeStyles(),this._updateTogglePosition(),this._updateToggleLabelDisplay(),this._updateLabelDisplay(),this._updateDirection(),this._updateAria(),this._updateFormValue(),this._mirrorToggleLabels()}_updateAria(){const e=this.shadowRoot?.querySelector(".switch");e&&(e.setAttribute("aria-checked",this.checked),e.setAttribute("aria-disabled",this.disabled?"true":"false"))}_updateDirection(){this.style.setProperty("--switch-dir",{top:"column",bottom:"column-reverse",left:"row-reverse",right:"row"}[this.labelPosition]\|\|"column")}_updateFormValue(){this._internals.setFormValue(this.checked?this.value:"")}_updateLabelDisplay(){this.style.setProperty("--show-labels",this.toggleLabel?"flex":"none")}_updateSizeStyles(){this.style.setProperty("--switch-height",{small:"24px",medium:"32px",large:"40px"}[this.size]),this.style.setProperty("--switch-width-fixed",{small:"44px",medium:"56px",large:"72px"}[this.size]),this.style.setProperty("--toggle-size","calc(var(--switch-height) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))"),this.style.setProperty("--switch-font-size",{small:"var(--font-size-small)",medium:"var(--font-size-label)",large:"var(--font-size-h4)"}[this.size])}_updateToggleLabelDisplay(){const e=this.toggleLabel;this.style.setProperty("--show-toggle-label",e?"inline-flex":"none"),this.style.setProperty("--switch-width",e?"max-content":"var(--switch-width-fixed)"),this.style.setProperty("--toggle-width",e?"auto":"var(--toggle-size)"),this.style.setProperty("--toggle-padding",e?"0 var(--spacing-small)":"0"),this.style.setProperty("--toggle-radius",e?"var(--component-switch-border-radius)":"9999px")}_updateTogglePosition(){this.style.setProperty("--toggle-x",this.checked?this.toggleLabel?"100%":"calc(var(--switch-width) - var(--toggle-size) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))":"0"),this.style.setProperty("--toggle-bg",this.checked?this._resolveColor(this.onColor,"var(--primary-content--)"):this._resolveColor(this.offColor,"var(--base-content-light)")),this.style.setProperty("--toggle-transition",this.animate?"transform 0.25s ease, background 0.25s ease":"none")}}customElements.get("y-switch")\|\|customElements.define("y-switch",pe);class he extends HTMLElement{static get observedAttributes(){return["columns","data","striped","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._sortField=null,this._sortDir="none",this._parsedData=[],this._parsedColumns=[]}connectedCallback(){this._parseAttributes(),this.render()}attributeChangedCallback(e,n,t){n!==t&&(this._parseAttributes(),this.render())}get columns(){return this.getAttribute("columns")}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){return this.getAttribute("data")}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get striped(){return this.hasAttribute("striped")}set striped(e){e?this.setAttribute("striped",""):this.removeAttribute("striped")}render(){const e=this._parsedColumns,n=this._getSortedData();this.shadowRoot.innerHTML="";const t=document.createElement("style");t.textContent=this._buildStyles(),this.shadowRoot.appendChild(t);const r=document.createElement("div");r.className="table-wrapper";const o=document.createElement("table");o.setAttribute("role","grid"),o.setAttribute("part","table"),o.appendChild(this._buildHeader(e)),o.appendChild(this._buildBody(e,n)),r.appendChild(o),this.shadowRoot.appendChild(r)}_buildBody(e,n){const t=document.createElement("tbody");return n.forEach(n=>{const r=document.createElement("tr");r.setAttribute("part","row"),e.forEach((e,t)=>{const o=document.createElement("td");o.setAttribute("part","cell"),(e.rowHeader\|\|0===t)&&o.classList.add("row-header"),o.textContent=n[e.field]??"",r.appendChild(o)}),t.appendChild(r)}),t}_buildHeader(e){const n=document.createElement("thead");n.setAttribute("part","header");const t=document.createElement("tr");return e.forEach(e=>{const n=document.createElement("th");n.setAttribute("scope","col");const r=!1!==e.sortable;r&&(n.classList.add("sortable"),n.setAttribute("aria-sort",this._sortField===e.field?"asc"===this._sortDir?"ascending":"desc"===this._sortDir?"descending":"none":"none"),n.addEventListener("click",()=>this._onHeaderClick(e.field)));const o=document.createElement("span");if(o.className="th-content",o.textContent=e.header\|\|e.field,r){const n=this._sortIcon(e.field),t=document.createElement("span");t.className="sort-icon",n?t.innerHTML=n:t.classList.add("sort-icon--placeholder"),o.appendChild(t)}n.appendChild(o),t.appendChild(n)}),n.appendChild(t),n}_buildStyles(){const e=`var(--component-table-padding-${this.size}, 8px)`;return`\n :host {\n display: block;\n font-family: var(--font-family-body, sans-serif);\n color: var(--component-table-color, #f7f7fa);\n }\n\n .table-wrapper {\n overflow-x: auto;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n table-layout: auto;\n }\n\n thead th {\n position: relative;\n padding: ${e};\n text-align: left;\n font-weight: 400;\n font-size: var(--font-size-paragraph, 1em);\n white-space: nowrap;\n background: transparent;\n border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #37383a);\n user-select: none;\n }\n\n thead th.sortable {\n cursor: pointer;\n }\n\n thead th.sortable:hover {\n background: var(--component-table-hover-background, #292a2b);\n }\n\n .th-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .sort-icon {\n flex-shrink: 0;\n vertical-align: middle;\n }\n\n .sort-icon svg {\n width: 14px;\n height: 14px;\n }\n\n .sort-icon--placeholder {\n visibility: hidden;\n width: 14px;\n height: 14px;\n display: inline-block;\n }\n\n tbody td {\n padding: ${e};\n font-size: var(--font-size-paragraph, 1em);\n border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #37383a);\n }\n\n tbody tr:last-child td {\n border-bottom: none;\n }\n\n tbody td.row-header {\n font-weight: 400;\n }\n\n ${this.striped?"tbody tr:nth-child(even) {\n background: var(--component-table-hover-background, #292a2b);\n }":""}\n\n tbody tr:hover {\n background: var(--component-table-active-background, #46474a);\n }\n `}_getSortedData(){const e=[...this._parsedData];if(!this._sortField\|\|"none"===this._sortDir)return e;const n="asc"===this._sortDir?1:-1,t=this._sortField;return e.sort((e,r)=>{const o=e[t],a=r[t];return null==o&&null==a?0:null==o?1:null==a?-1:"number"==typeof o&&"number"==typeof a?(o-a)n:String(o).localeCompare(String(a))n})}_onHeaderClick(e){this._sortField===e?(this._sortDir="asc"===this._sortDir?"desc":"desc"===this._sortDir?"none":"asc","none"===this._sortDir&&(this._sortField=null)):(this._sortField=e,this._sortDir="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{field:this._sortField,direction:this._sortDir},bubbles:!0,composed:!0})),this.render()}_parseAttributes(){try{this._parsedColumns=JSON.parse(this.columns\|\|"[]")}catch{this._parsedColumns=[]}try{this._parsedData=JSON.parse(this.data\|\|"[]")}catch{this._parsedData=[]}}_sortIcon(e){const n=this._sortField===e?this._sortDir:"none";return"none"===n?"":"asc"===n?a:o}}customElements.get("y-table")\|\|customElements.define("y-table",he);class be extends HTMLElement{static get observedAttributes(){return["removable","color","style-type","shape","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get removable(){return this.hasAttribute("removable")}set removable(e){e?this.setAttribute("removable",""):this.removeAttribute("removable")}get shape(){return this.getAttribute("shape")\|\|"square"}set shape(e){this.setAttribute("shape",e)}get size(){return this.getAttribute("size")\|\|"medium"}set size(e){this.setAttribute("size",e)}get styleType(){return this.getAttribute("style-type")\|\|"filled"}set styleType(e){this.setAttribute("style-type",e)}render(){this.shadowRoot.innerHTML=`\n <style>${this._getStyle()}</style>\n <span class="tag" part="tag">\n <slot></slot>\n ${this.removable?`<button class="remove" part="remove" aria-label="Remove tag">${c}</button>`:""}\n </span>\n `,this.removable&&this._bindRemoveListener()}_bindRemoveListener(){this.shadowRoot.querySelector(".remove").addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("remove",{bubbles:!0,composed:!0}))})}_getCustomColorVariant(e,n){const t=b(e),r={filled:`\n .tag { background: ${e}; color: ${t}; }\n .remove { color: ${t}; }\n `,outlined:`\n .tag { border: 1px solid ${e}; background: transparent; color: ${e}; }\n .remove { color: ${e}; }\n `,flat:`\n .tag { background: color-mix(in srgb, ${e} 20%, transparent); border-color: transparent; color: ${e}; }\n .remove { color: ${e}; }\n `};return r[n]\|\|r.filled}_getStyle(){const{color:e,styleType:n,shape:t,size:r}=this,o={primary:["--primary-content--","--primary-content-inverse","--primary-background-app"],secondary:["--secondary-content--","--secondary-content-inverse","--secondary-background-app"],base:["--base-content--","--base-content-inverse","--base-background-app"],success:["--success-content--","--success-content-inverse","--success-background-app"],error:["--error-content--","--error-content-inverse","--error-background-app"],warning:["--warning-content--","--warning-content-inverse","--warning-background-app"],help:["--help-content--","--help-content-inverse","--help-background-app"]},a=o[e],i=!a&&(e.startsWith("#")\|\|e.startsWith("rgb")\|\|e.startsWith("hsl")),s="round"===t?"var(--component-tag-border-radius-circle)":"var(--component-tag-border-radius-square)",c={small:{height:"var(--component-tag-height-small, 22px)",padding:"var(--component-tag-padding-small, var(--spacing-2x-small))",fontSize:"var(--font-size-small, 0.8em)"},medium:{height:"var(--component-tag-height-medium, 28px)",padding:"var(--component-tag-padding-medium, var(--spacing-x-small))",fontSize:"var(--font-size-label, 0.83em)"},large:{height:"var(--component-tag-height-large, 38px)",padding:"var(--component-tag-padding-large, var(--spacing-small))",fontSize:"var(--font-size-paragraph, 1em)"}},l=c[r]\|\|c.medium,d=`\n :host {\n display: inline-flex;\n font-family: var(--font-family-body, sans-serif);\n font-size: ${l.fontSize};\n }\n .tag {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-2x-small);\n height: ${l.height};\n padding: 0 ${l.padding};\n border: 1px solid transparent;\n transition: background-color 0.2s, color 0.2s;\n border-radius: ${s};\n box-sizing: border-box;\n }\n .remove {\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n }\n .remove svg {\n pointer-events: none;\n width: 1.1em;\n height: 1.1em;\n stroke-width: 2.5;\n }\n `;if(i)return d+this._getCustomColorVariant(e,n);const[p,h,b]=a\|\|o.base,u={filled:`\n .tag { background: var(${p}); color: var(${h}); }\n .remove { color: var(${h}); }\n `,outlined:`\n .tag { border: 1px solid var(${p}); background: transparent; color: var(${p}); }\n .remove { color: var(${p}); }\n `,flat:`\n .tag { background: var(${b}); border-color: var(${b}); color: var(${p}); }\n .remove { color: var(${p}); }\n `};return d+(u[n]\|\|u.filled)}}customElements.get("y-tag")\|\|customElements.define("y-tag",be);class ue extends HTMLElement{static get observedAttributes(){return["options","size","position"]}constructor(){super(),this.attachShadow({mode:"open"}),this._activeTab="",this._warnedSlots=new Set}connectedCallback(){this.hasAttribute("size")\|\|this.setAttribute("size","medium"),this.hasAttribute("position")\|\|this.setAttribute("position","top"),this.render()}attributeChangedCallback(e,n,t){n!==t&&("options"===e&&this._warnedSlots.clear(),this.render())}get options(){try{return JSON.parse(this.getAttribute("options")\|\|"[]")}catch{return[]}}set options(e){this.setAttribute("options",JSON.stringify(e)),this.render()}get position(){const e=this.getAttribute("position");return["top","bottom","left","right"].includes(e)?e:"top"}set position(e){this.setAttribute("position",["top","bottom","left","right"].includes(e)?e:"top")}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){this.setAttribute("size",["small","medium","large"].includes(e)?e:"medium")}activateTab(e){const n=this.options.find(n=>n.id===e);n&&!n.disabled&&this._activeTab!==e&&(this._activeTab=e,this.render())}render(){const e=this.options;this._resolveActiveTab(e);const n=e.find(e=>e.id===this._activeTab);this.shadowRoot.innerHTML="";const t=document.createElement("style");t.textContent=this._getStyles(),this.shadowRoot.appendChild(t);const r=_("div",{class:"tablist",role:"tablist",part:"tablist"});e.forEach(e=>r.appendChild(this._createTabButton(e))),this.shadowRoot.appendChild(r),this.shadowRoot.appendChild(this._createPanel(n?.slot\|\|"")),this._setupEvents()}_appendDeprecatedIconSlot(e,n,t){const r=`${n}-icon-${t}`;this.querySelector(`[slot="${r}"]`)&&(this._warnedSlots.has(r)\|\|(this._warnedSlots.add(r),console.warn(`[y-tabs] The "${r}" slot is deprecated. Use the ${n}Icon property on the tab options object instead, or use the "tab-content-${t}" slot for custom content.`)),e.appendChild(_("slot",{name:r,class:"icon-slot"})))}_createIcon(e){return _("y-icon",{name:e,size:this.size})}_createPanel(e){const n=_("div",{class:"tabpanel",id:`panel-${this._activeTab}`,role:"tabpanel",part:"content","aria-labelledby":`tab-${this._activeTab}`});return n.appendChild(_("slot",{name:e})),n}_createTabButton(e){const n=e.id===this._activeTab,t=!!e.disabled,r=_("button",{id:`tab-${e.id}`,role:"tab",part:"tab","aria-label":e.label,"aria-selected":String(n),"aria-controls":`panel-${e.id}`,"aria-disabled":String(t)});t&&(r.disabled=!0),r.tabIndex=n&&!t?0:-1,r.dataset.id=e.id;const o=_("slot",{name:`tab-content-${e.id}`});return r.appendChild(o),e.leftIcon?o.appendChild(this._createIcon(e.leftIcon)):this._appendDeprecatedIconSlot(o,"left",e.id),o.appendChild(_("span",{},[e.label])),e.rightIcon?o.appendChild(this._createIcon(e.rightIcon)):this._appendDeprecatedIconSlot(o,"right",e.id),r}_findSiblingButton(e,n,t){for(let r=1;r<=e.length;r++){const o=e[(n+rt+e.length)%e.length];if(!o.disabled)return o}return null}_getStyles(){return`\n :host {\n display: flex;\n }\n :host([position="top"]) { flex-direction: column; }\n :host([position="bottom"]) { flex-direction: column-reverse; }\n :host([position="left"]) { flex-direction: row; }\n :host([position="right"]) { flex-direction: row-reverse; }\n\n .tablist {\n display: flex;\n gap: 0;\n position: relative;\n z-index: 1;\n }\n :host([position="top"]) .tablist { margin-bottom: -1px; margin-top: 0; }\n :host([position="bottom"]) .tablist { margin-top: -1px; margin-bottom: 0; }\n :host([position="left"]) .tablist { flex-direction: column; margin-right: -1px; margin-left: 0; }\n :host([position="right"]) .tablist { flex-direction: column; margin-left: -1px; margin-right: 0; }\n\n :host([position="top"]) .tablist button { border-bottom: none; }\n :host([position="bottom"]) .tablist button { border-top: none; }\n :host([position="left"]) .tablist button { border-right: none; }\n :host([position="right"]) .tablist button { border-left: none; }\n\n button {\n background: var(--component-tabs-border-color);\n color: var(--component-tabs-color);\n border: var(--component-tab-border-width) solid var(--component-tabs-border-color);\n margin: 0;\n padding: ${`var(--component-tab-padding-${this.size})`};\n cursor: pointer;\n font-size: var(--font-size-label);\n display: inline-flex;\n align-items: center;\n gap: ${`var(--component-tab-gap-${this.size})`};\n transition: background 0.2s ease;\n outline: none;\n font-family: inherit;\n }\n :host([position="top"]) .tablist button:first-child { border-top-left-radius: var(--component-tab-border-radius-outer); }\n :host([position="top"]) .tablist button:last-child { border-top-right-radius: var(--component-tab-border-radius-outer); }\n :host([position="bottom"]) .tablist button:first-child { border-bottom-left-radius: var(--component-tab-border-radius-outer); }\n :host([position="bottom"]) .tablist button:last-child { border-bottom-right-radius: var(--component-tab-border-radius-outer); }\n :host([position="left"]) .tablist button:first-child { border-top-left-radius: var(--component-tab-border-radius-outer); }\n :host([position="left"]) .tablist button:last-child { border-bottom-left-radius: var(--component-tab-border-radius-outer); }\n :host([position="right"]) .tablist button:first-child { border-top-right-radius: var(--component-tab-border-radius-outer); }\n :host([position="right"]) .tablist button:last-child { border-bottom-right-radius: var(--component-tab-border-radius-outer); }\n\n button[aria-selected="true"] {\n background: var(--component-tabs-background);\n }\n button:focus-visible {\n outline: 2px solid var(--component-tabs-accent);\n outline-offset: -1px;\n }\n button[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .icon-slot {\n display: inline-flex;\n align-items: center;\n margin: 0 4px;\n }\n .tabpanel {\n position: relative;\n z-index: 0;\n border: var(--component-tab-border-width) solid var(--component-tabs-border-color);\n border-radius: var(--component-tab-border-radius-outer);\n padding: var(--component-tab-content-padding);\n background: var(--component-tabs-background);\n }\n :host([position="top"]) .tabpanel { border-top-left-radius: 0; }\n :host([position="bottom"]) .tabpanel { border-bottom-left-radius: 0; }\n :host([position="left"]) .tabpanel { border-top-left-radius: 0; }\n :host([position="right"]) .tabpanel { border-top-right-radius: 0; }\n :host([position="top"]) .tabpanel { margin-top: -1px; }\n :host([position="bottom"]) .tabpanel { margin-bottom: -1px; }\n :host([position="left"]) .tabpanel { margin-left: -1px; }\n :host([position="right"]) .tabpanel { margin-right: -1px; }\n `}_handleTabKeydown(e,n){const t=n.indexOf(e.currentTarget);return"ArrowRight"===e.key?(e.preventDefault(),void this._findSiblingButton(n,t,1)?.focus()):"ArrowLeft"===e.key?(e.preventDefault(),void this._findSiblingButton(n,t,-1)?.focus()):void("Enter"!==e.key&&" "!==e.key\|\|(e.preventDefault(),this.activateTab(e.currentTarget.dataset.id)))}_resolveActiveTab(e){const n=!this._activeTab\|\|e.find(e=>e.id===this._activeTab)?.disabled;e.length&&n&&(this._activeTab=e.find(e=>!e.disabled)?.id\|\|"")}_setupEvents(){const e=Array.from(this.shadowRoot.querySelectorAll("button"));e.forEach(n=>{n.disabled\|\|(n.addEventListener("click",()=>this.activateTab(n.dataset.id)),n.addEventListener("keydown",n=>this._handleTabKeydown(n,e)))})}}customElements.get("y-tabs")\|\|customElements.define("y-tabs",ue);class ve extends HTMLElement{static get observedAttributes(){return["position","duration","max"]}constructor(){super(),this.attachShadow({mode:"open"}),this._queue=[]}connectedCallback(){this.render()}attributeChangedCallback(e,n,t){n!==t&&this.render()}get duration(){return parseInt(this.getAttribute("duration")??"4000",10)}set duration(e){this.setAttribute("duration",String(e))}get max(){return parseInt(this.getAttribute("max")??"5",10)}set max(e){this.setAttribute("max",String(e))}get position(){return this.getAttribute("position")\|\|"bottom-right"}set position(e){this.setAttribute("position",e)}clear(){const e=this.shadowRoot.querySelector(".toast-container");e&&e.querySelectorAll(".toast").forEach(e=>this._removeToast(e))}render(){this.shadowRoot.innerHTML=`\n <style>${this._buildStyles()}</style>\n <div class="toast-container"></div>\n `}show(e={}){const{message:n="",color:t="base",duration:r=this.duration,dismissible:o=!0,icon:a=null}=e,i=this.shadowRoot.querySelector(".toast-container");if(!i)return null;const s=i.querySelectorAll(".toast");s.length>=this.max&&this._removeToast(s[0]);const c=document.createElement("div");c.className=`toast color-${t}`,c.setAttribute("role","alert"),c.setAttribute("aria-live","assertive"),c.setAttribute("part","toast");const[l,d]=u(t);if(c.style.backgroundColor=l,c.style.color=d,a){const e=document.createElement("y-icon");e.setAttribute("name",a),e.setAttribute("size","small"),e.className="toast-icon",e.setAttribute("part","icon"),c.appendChild(e)}const p=document.createElement("span");if(p.className="toast-message",p.setAttribute("part","message"),p.textContent=n,c.appendChild(p),o){const e=document.createElement("button");e.className="toast-close",e.setAttribute("aria-label","Dismiss"),e.innerHTML="×",e.addEventListener("click",()=>this._removeToast(c)),c.appendChild(e)}return i.appendChild(c),requestAnimationFrame(()=>{c.classList.add("visible")}),r>0&&(c._timeout=setTimeout(()=>this._removeToast(c),r)),this.dispatchEvent(new CustomEvent("y-toast-show",{detail:{message:n,color:t},bubbles:!0})),c}_buildStyles(){return`\n :host {\n font-family: var(--font-family-body, sans-serif);\n }\n\n .toast-container {\n ${this._getPositionStyles()}\n }\n\n .toast {\n pointer-events: auto;\n display: flex;\n align-items: center;\n gap: var(--spacing-medium, 8px);\n padding: var(--component-toast-padding, var(--spacing-medium, 8px));\n border-radius: var(--component-toast-border-radius, var(--radii-small, 4px));\n font-size: var(--font-size-paragraph, 1em);\n line-height: 1.4;\n opacity: 0;\n transform: translateY(8px);\n transition: opacity 0.25s ease, transform 0.25s ease;\n box-shadow: var(--base-shadow, 0 2px 6px rgba(0,0,0,0.15));\n }\n\n .toast.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .toast.exit {\n opacity: 0;\n transform: translateY(-8px);\n }\n\n .toast-icon {\n flex-shrink: 0;\n font-size: 1.1em;\n }\n\n .toast-message {\n flex: 1;\n }\n\n .toast-close {\n flex-shrink: 0;\n align-self: flex-start;\n background: none;\n border: none;\n color: inherit;\n font-size: 1.2em;\n cursor: pointer;\n padding: 0 0 0 var(--spacing-small, 6px);\n opacity: 0.7;\n line-height: 1;\n }\n .toast-close:hover {\n opacity: 1;\n }\n `}_getPositionStyles(){const e="position: fixed; z-index: var(--component-toast-z-index, 9000); display: flex; flex-direction: column; gap: var(--spacing-small, 6px); pointer-events: none; max-width: 420px; min-width: 280px;",n="var(--component-toast-offset, var(--spacing-x-large, 16px))",t={"top-right":`${e} top: ${n}; right: ${n}; align-items: flex-end;`,"top-left":`${e} top: ${n}; left: ${n}; align-items: flex-start;`,"top-center":`${e} top: ${n}; left: 50%; transform: translateX(-50%); align-items: center;`,"bottom-right":`${e} bottom: ${n}; right: ${n}; align-items: flex-end;`,"bottom-left":`${e} bottom: ${n}; left: ${n}; align-items: flex-start;`,"bottom-center":`${e} bottom: ${n}; left: 50%; transform: translateX(-50%); align-items: center;`};return t[this.position]\|\|t["bottom-right"]}_removeToast(e){e&&!e._removing&&(e._removing=!0,clearTimeout(e._timeout),e.classList.remove("visible"),e.classList.add("exit"),e.addEventListener("transitionend",()=>{e.remove(),this.dispatchEvent(new CustomEvent("y-toast-dismiss",{bubbles:!0}))},{once:!0}),setTimeout(()=>{e.parentNode&&e.remove()},350))}}customElements.get("y-toast")\|\|customElements.define("y-toast",ve);class me extends HTMLElement{static get observedAttributes(){return["text","position","delay","color"]}constructor(){super(),this.attachShadow({mode:"open"}),this._showTimeout=null,this._hideTimeout=null,this._visible=!1,this._onMouseEnter=this._onMouseEnter.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}connectedCallback(){this.render(),this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),document.addEventListener("keydown",this._onKeyDown)}disconnectedCallback(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),document.removeEventListener("keydown",this._onKeyDown),clearTimeout(this._showTimeout),clearTimeout(this._hideTimeout)}attributeChangedCallback(e,n,t){n!==t&&this.render()}get color(){return this.getAttribute("color")\|\|"base"}set color(e){this.setAttribute("color",e)}get delay(){return parseInt(this.getAttribute("delay")??"200",10)}set delay(e){this.setAttribute("delay",String(e))}get position(){return this.getAttribute("position")\|\|"top"}set position(e){this.setAttribute("position",e)}get text(){return this.getAttribute("text")\|\|""}set text(e){this.setAttribute("text",e)}hide(){clearTimeout(this._showTimeout),this._visible=!1;const e=this.shadowRoot.querySelector(".tooltip");e&&e.classList.remove("visible")}render(){const[e,n]=u(this.color);this.shadowRoot.innerHTML=`\n <style>${this._buildStyles(e,n)}</style>\n <slot class="trigger"></slot>\n <div class="tooltip ${this.position}" role="tooltip" part="tooltip">${this.text}</div>\n `}show(){clearTimeout(this._hideTimeout),this._showTimeout=setTimeout(()=>{this._visible=!0;const e=this.shadowRoot.querySelector(".tooltip");if(e){const[,n]=u(this.color);e.style.color=n,e.classList.add("visible")}},this.delay)}_buildStyles(e,n){return`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--font-family-body, sans-serif);\n }\n\n .trigger {\n display: inline-block;\n }\n\n .tooltip {\n position: absolute;\n z-index: var(--component-tooltip-z-index, 7000);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.15s ease, transform 0.15s ease;\n padding: var(--component-tooltip-padding, var(--spacing-x-small, 4px)) var(--component-tooltip-padding-h, var(--spacing-medium, 8px));\n border-radius: var(--component-tooltip-border-radius, var(--radii-small, 4px));\n font-size: var(--font-size-small, 0.8em);\n background: ${e};\n color: ${n};\n line-height: 1.4;\n }\n\n .tooltip.visible {\n opacity: 1;\n transform: scale(1);\n }\n\n .tooltip::after {\n content: "";\n position: absolute;\n border: 5px solid transparent;\n }\n\n .tooltip.top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) scale(0.95);\n margin-bottom: 6px;\n }\n .tooltip.top.visible { transform: translateX(-50%) scale(1); }\n .tooltip.top::after {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: ${e};\n }\n\n .tooltip.bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%) scale(0.95);\n margin-top: 6px;\n }\n .tooltip.bottom.visible { transform: translateX(-50%) scale(1); }\n .tooltip.bottom::after {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: ${e};\n }\n\n .tooltip.left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%) scale(0.95);\n margin-right: 6px;\n }\n .tooltip.left.visible { transform: translateY(-50%) scale(1); }\n .tooltip.left::after {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: ${e};\n }\n\n .tooltip.right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%) scale(0.95);\n margin-left: 6px;\n }\n .tooltip.right.visible { transform: translateY(-50%) scale(1); }\n .tooltip.right::after {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: ${e};\n }\n `}_onFocusIn(){this.show()}_onFocusOut(){this.hide()}_onKeyDown(e){"Escape"===e.key&&this._visible&&this.hide()}_onMouseEnter(){this.show()}_onMouseLeave(){this.hide()}}customElements.get("y-tooltip")\|\|customElements.define("y-tooltip",me);const ge={"blue-light":'/ Themes - Blue Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-active: var(--teal-light-4);\n --secondary-border: var(--teal-light-3);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"blue-dark":'/ Themes - Blue Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-active: var(--neutral-dark-4);\n --base-border: var(--neutral-dark-3);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-dark-1);\n --primary-background-component: var(--blue-dark-0);\n --primary-background-hover: var(--blue-dark-2);\n --primary-background-active: var(--blue-dark-3);\n --primary-border: var(--blue-dark-4);\n --primary-content--: var(--blue--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--blue-light-7);\n --primary-content-active: var(--blue-light-6);\n --secondary-background-app: var(--teal-dark-1);\n --secondary-background-component: var(--teal-dark-0);\n --secondary-background-hover: var(--teal-dark-2);\n --secondary-background-active: var(--teal-dark-4);\n --secondary-border: var(--teal-dark-3);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-light-7);\n --secondary-content-active: var(--teal-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-active: var(--green-dark-4);\n --success-border: var(--green-dark-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-active: var(--yellow-dark-4);\n --warning-border: var(--yellow-dark-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-active: var(--red-dark-4);\n --error-border: var(--red-dark-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"orange-light":'/ Themes - Orange Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-light-1);\n --primary-background-component: var(--orange-light-0);\n --primary-background-hover: var(--orange-light-2);\n --primary-background-active: var(--orange-light-3);\n --primary-border: var(--orange-light-4);\n --primary-content--: var(--orange--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--orange-dark-7);\n --primary-content-active: var(--orange-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-background-active: var(--amber-light-4);\n --secondary-border: var(--amber-light-3);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"orange-dark":'/ Themes - Orange Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-active: var(--neutral-dark-4);\n --base-border: var(--neutral-dark-3);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-dark-1);\n --primary-background-component: var(--orange-dark-0);\n --primary-background-hover: var(--orange-dark-2);\n --primary-background-active: var(--orange-dark-3);\n --primary-border: var(--orange-dark-4);\n --primary-content--: var(--orange--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--orange-light-7);\n --primary-content-active: var(--orange-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-dark-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-border: var(--amber-dark-3);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-active: var(--green-dark-4);\n --success-border: var(--green-dark-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-active: var(--yellow-dark-4);\n --warning-border: var(--yellow-dark-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-active: var(--red-dark-4);\n --error-border: var(--red-dark-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"green-light":'/ Themes - Green Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--green-light-1);\n --primary-background-component: var(--green-light-0);\n --primary-background-hover: var(--green-light-2);\n --primary-background-active: var(--green-light-3);\n --primary-border: var(--green-light-4);\n --primary-content--: var(--green--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--green-dark-7);\n --primary-content-active: var(--green-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-border: var(--teal-light-3);\n --secondary-background-active: var(--teal-light-4);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"green-dark":'/ Themes - Green Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--green-dark-1);\n --primary-background-component: var(--green-dark-0);\n --primary-background-hover: var(--green-dark-2);\n --primary-background-active: var(--green-dark-3);\n --primary-border: var(--green-dark-4);\n --primary-content--: var(--green--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--green-light-7);\n --primary-content-active: var(--green-light-6);\n --secondary-background-app: var(--teal-dark-1);\n --secondary-background-component: var(--teal-dark-0);\n --secondary-background-hover: var(--teal-dark-2);\n --secondary-border: var(--teal-dark-3);\n --secondary-background-active: var(--teal-dark-4);\n --secondary-content--: var(--teal--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--teal-light-7);\n --secondary-content-active: var(--teal-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"red-light":'/ Themes - Red Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--red-light-1);\n --primary-background-component: var(--red-light-0);\n --primary-background-hover: var(--red-light-2);\n --primary-background-active: var(--red-light-3);\n --primary-border: var(--red-light-4);\n --primary-content--: var(--red--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--red-dark-7);\n --primary-content-active: var(--red-dark-6);\n --secondary-background-app: var(--orange-light-1);\n --secondary-background-component: var(--orange-light-0);\n --secondary-background-hover: var(--orange-light-2);\n --secondary-border: var(--orange-light-3);\n --secondary-background-active: var(--orange-light-4);\n --secondary-content--: var(--orange--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--orange-dark-7);\n --secondary-content-active: var(--orange-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"red-dark":'/ Themes - Red Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--red-dark-1);\n --primary-background-component: var(--red-dark-0);\n --primary-background-hover: var(--red-dark-2);\n --primary-background-active: var(--red-dark-3);\n --primary-border: var(--red-dark-4);\n --primary-content--: var(--red--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--red-light-7);\n --primary-content-active: var(--red-light-6);\n --secondary-background-app: var(--orange-dark-1);\n --secondary-background-component: var(--orange-dark-0);\n --secondary-background-hover: var(--orange-dark-2);\n --secondary-border: var(--orange-dark-3);\n --secondary-background-active: var(--orange-dark-4);\n --secondary-content--: var(--orange--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--orange-light-7);\n --secondary-content-active: var(--orange-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"teal-light":'/ Themes - Teal Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--teal-light-1);\n --primary-background-component: var(--teal-light-0);\n --primary-background-hover: var(--teal-light-2);\n --primary-background-active: var(--teal-light-3);\n --primary-border: var(--teal-light-4);\n --primary-content--: var(--teal--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--teal-dark-7);\n --primary-content-active: var(--teal-dark-6);\n --secondary-background-app: var(--blue-light-1);\n --secondary-background-component: var(--blue-light-0);\n --secondary-background-hover: var(--blue-light-2);\n --secondary-border: var(--blue-light-3);\n --secondary-background-active: var(--blue-light-4);\n --secondary-content--: var(--blue--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--blue-dark-7);\n --secondary-content-active: var(--blue-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"teal-dark":'/ Themes - Teal Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--teal-dark-1);\n --primary-background-component: var(--teal-dark-0);\n --primary-background-hover: var(--teal-dark-2);\n --primary-background-active: var(--teal-dark-3);\n --primary-border: var(--teal-dark-4);\n --primary-content--: var(--teal--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--teal-light-7);\n --primary-content-active: var(--teal-light-6);\n --secondary-background-app: var(--blue-dark-1);\n --secondary-background-component: var(--blue-dark-0);\n --secondary-background-hover: var(--blue-dark-2);\n --secondary-border: var(--blue-dark-3);\n --secondary-background-active: var(--blue-dark-4);\n --secondary-content--: var(--blue--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--blue-light-7);\n --secondary-content-active: var(--blue-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"yellow-light":'/ Themes - Yellow Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--yellow-light-1);\n --primary-background-component: var(--yellow-light-0);\n --primary-background-hover: var(--yellow-light-2);\n --primary-background-active: var(--yellow-light-3);\n --primary-border: var(--yellow-light-4);\n --primary-content--: var(--yellow--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--yellow-dark-7);\n --primary-content-active: var(--yellow-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-border: var(--amber-light-3);\n --secondary-background-active: var(--amber-light-4);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"yellow-dark":'/ Themes - Yellow Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--yellow-dark-1);\n --primary-background-component: var(--yellow-dark-0);\n --primary-background-hover: var(--yellow-dark-2);\n --primary-background-active: var(--yellow-dark-3);\n --primary-border: var(--yellow-dark-4);\n --primary-content--: var(--yellow--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--yellow-light-7);\n --primary-content-active: var(--yellow-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-dark-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-border: var(--amber-dark-3);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-black);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"indigo-light":'/ Themes - Indigo Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--indigo-light-1);\n --primary-background-component: var(--indigo-light-0);\n --primary-background-hover: var(--indigo-light-2);\n --primary-background-active: var(--indigo-light-3);\n --primary-border: var(--indigo-light-4);\n --primary-content--: var(--indigo--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--indigo-dark-7);\n --primary-content-active: var(--indigo-dark-6);\n --secondary-background-app: var(--purple-light-1);\n --secondary-background-component: var(--purple-light-0);\n --secondary-background-hover: var(--purple-light-2);\n --secondary-border: var(--purple-light-3);\n --secondary-background-active: var(--purple-light-4);\n --secondary-content--: var(--purple--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--purple-dark-7);\n --secondary-content-active: var(--purple-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"indigo-dark":'/ Themes - Indigo Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--indigo-dark-1);\n --primary-background-component: var(--indigo-dark-0);\n --primary-background-hover: var(--indigo-dark-2);\n --primary-background-active: var(--indigo-dark-3);\n --primary-border: var(--indigo-dark-4);\n --primary-content--: var(--indigo--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--indigo-light-7);\n --primary-content-active: var(--indigo-light-6);\n --secondary-background-app: var(--purple-dark-1);\n --secondary-background-component: var(--purple-dark-0);\n --secondary-background-hover: var(--purple-dark-2);\n --secondary-border: var(--purple-dark-3);\n --secondary-background-active: var(--purple-dark-4);\n --secondary-content--: var(--purple--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--purple-light-7);\n --secondary-content-active: var(--purple-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"purple-light":'/ Themes - Purple Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--purple-light-1);\n --primary-background-component: var(--purple-light-0);\n --primary-background-hover: var(--purple-light-2);\n --primary-background-active: var(--purple-light-3);\n --primary-border: var(--purple-light-4);\n --primary-content--: var(--purple--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--purple-dark-7);\n --primary-content-active: var(--purple-dark-6);\n --secondary-background-app: var(--indigo-light-1);\n --secondary-background-component: var(--indigo-light-0);\n --secondary-background-hover: var(--indigo-light-2);\n --secondary-border: var(--indigo-light-3);\n --secondary-background-active: var(--indigo-light-4);\n --secondary-content--: var(--indigo--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--indigo-dark-7);\n --secondary-content-active: var(--indigo-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"purple-dark":'/ Themes - Purple Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--purple-dark-1);\n --primary-background-component: var(--purple-dark-0);\n --primary-background-hover: var(--purple-dark-2);\n --primary-background-active: var(--purple-dark-3);\n --primary-border: var(--purple-dark-4);\n --primary-content--: var(--purple--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--purple-light-7);\n --primary-content-active: var(--purple-light-6);\n --secondary-background-app: var(--indigo-dark-1);\n --secondary-background-component: var(--indigo-dark-0);\n --secondary-background-hover: var(--indigo-dark-2);\n --secondary-border: var(--indigo-dark-3);\n --secondary-background-active: var(--indigo-dark-4);\n --secondary-content--: var(--indigo--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--indigo-light-7);\n --secondary-content-active: var(--indigo-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"pink-light":'/ Themes - Pink Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--pink-light-1);\n --primary-background-component: var(--pink-light-0);\n --primary-background-hover: var(--pink-light-2);\n --primary-background-active: var(--pink-light-3);\n --primary-border: var(--pink-light-4);\n --primary-content--: var(--pink--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--pink-dark-7);\n --primary-content-active: var(--pink-dark-6);\n --secondary-background-app: var(--purple-light-1);\n --secondary-background-component: var(--purple-light-0);\n --secondary-background-hover: var(--purple-light-2);\n --secondary-border: var(--purple-light-3);\n --secondary-background-active: var(--purple-light-4);\n --secondary-content--: var(--purple--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--purple-dark-7);\n --secondary-content-active: var(--purple-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"pink-dark":'/ Themes - Pink Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--pink-dark-1);\n --primary-background-component: var(--pink-dark-0);\n --primary-background-hover: var(--pink-dark-2);\n --primary-background-active: var(--pink-dark-3);\n --primary-border: var(--pink-dark-4);\n --primary-content--: var(--pink--);\n --primary-content-inverse: var(--neutral-black);\n --primary-content-hover: var(--pink-light-7);\n --primary-content-active: var(--pink-light-6);\n --secondary-background-app: var(--purple-dark-1);\n --secondary-background-component: var(--purple-dark-0);\n --secondary-background-hover: var(--purple-dark-2);\n --secondary-border: var(--purple-dark-3);\n --secondary-background-active: var(--purple-dark-4);\n --secondary-content--: var(--purple--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--purple-light-7);\n --secondary-content-active: var(--purple-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"brown-light":'/ Themes - Brown Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--brown-light-1);\n --primary-background-component: var(--brown-light-0);\n --primary-background-hover: var(--brown-light-2);\n --primary-background-active: var(--brown-light-3);\n --primary-border: var(--brown-light-4);\n --primary-content--: var(--brown--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--brown-dark-7);\n --primary-content-active: var(--brown-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-background-active: var(--amber-light-4);\n --secondary-border: var(--amber-light-3);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"brown-dark":'/ Themes - Brown Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-active: var(--neutral-dark-4);\n --base-border: var(--neutral-dark-3);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--brown-dark-1);\n --primary-background-component: var(--brown-dark-0);\n --primary-background-hover: var(--brown-dark-2);\n --primary-background-active: var(--brown-dark-3);\n --primary-border: var(--brown-dark-4);\n --primary-content--: var(--brown--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--brown-light-7);\n --primary-content-active: var(--brown-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-dark-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-border: var(--amber-dark-3);\n --secondary-content--: var(--amber--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-active: var(--green-dark-4);\n --success-border: var(--green-dark-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-active: var(--yellow-dark-4);\n --warning-border: var(--yellow-dark-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-active: var(--red-dark-4);\n --error-border: var(--red-dark-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"olive-light":'/ Themes - Olive Light /\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-active: var(--neutral-light-4);\n --base-border: var(--neutral-light-3);\n --base-content--: var(--neutral-dark-0);\n --base-content-inverse: var(--neutral-white);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--olive-light-1);\n --primary-background-component: var(--olive-light-0);\n --primary-background-hover: var(--olive-light-2);\n --primary-background-active: var(--olive-light-3);\n --primary-border: var(--olive-light-4);\n --primary-content--: var(--olive--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--olive-dark-7);\n --primary-content-active: var(--olive-dark-6);\n --secondary-background-app: var(--brown-light-1);\n --secondary-background-component: var(--brown-light-0);\n --secondary-background-hover: var(--brown-light-2);\n --secondary-background-active: var(--brown-light-4);\n --secondary-border: var(--brown-light-3);\n --secondary-content--: var(--brown--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--brown-dark-7);\n --secondary-content-active: var(--brown-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-active: var(--green-light-4);\n --success-border: var(--green-light-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-active: var(--yellow-light-4);\n --warning-border: var(--yellow-light-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-active: var(--red-light-4);\n --error-border: var(--red-light-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n',"olive-dark":'/ Themes - Olive Dark /\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-active: var(--neutral-dark-4);\n --base-border: var(--neutral-dark-3);\n --base-content--: var(--neutral-light-0);\n --base-content-inverse: var(--neutral-black);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--olive-dark-1);\n --primary-background-component: var(--olive-dark-0);\n --primary-background-hover: var(--olive-dark-2);\n --primary-background-active: var(--olive-dark-3);\n --primary-border: var(--olive-dark-4);\n --primary-content--: var(--olive--);\n --primary-content-inverse: var(--neutral-white);\n --primary-content-hover: var(--olive-light-7);\n --primary-content-active: var(--olive-light-6);\n --secondary-background-app: var(--brown-dark-1);\n --secondary-background-component: var(--brown-dark-0);\n --secondary-background-hover: var(--brown-dark-2);\n --secondary-background-active: var(--brown-dark-4);\n --secondary-border: var(--brown-dark-3);\n --secondary-content--: var(--brown--);\n --secondary-content-inverse: var(--neutral-white);\n --secondary-content-hover: var(--brown-light-7);\n --secondary-content-active: var(--brown-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-active: var(--green-dark-4);\n --success-border: var(--green-dark-3);\n --success-content--: var(--green--);\n --success-content-inverse: var(--neutral-black);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-active: var(--yellow-dark-4);\n --warning-border: var(--yellow-dark-3);\n --warning-content--: var(--yellow--);\n --warning-content-inverse: var(--neutral-black);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-active: var(--red-dark-4);\n --error-border: var(--red-dark-3);\n --error-content--: var(--red--);\n --error-content-inverse: var(--neutral-white);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-dark-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-inverse: var(--neutral-white);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-border);\n --component-appbar-border-width: var(--component-sidebar-border-width);\n --component-appbar-border-radius: var(--component-sidebar-border-radius);\n --component-appbar-inner-border-width: var(\n --component-sidebar-border-width\n );\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-dialog-shadow: var(--base-shadow);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-selected-background: var(--primary-content--);\n --component-menu-selected-color: var(--primary-background-component);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-datepicker-background: var(--base-background-component);\n --component-datepicker-border-color: var(--base-border);\n --component-datepicker-header-color: var(--base-content-light);\n --component-datepicker-shadow: var(--base-shadow);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: "Lexend", sans-serif;\n --font-family-body: "Lexend", sans-serif;\n --font-weight-body: 300;\n}\n'};class ke extends HTMLElement{static get observedAttributes(){return["theme","cross-origin"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML="<slot></slot>"}connectedCallback(){this._injectPageStyles(),this._applyTheme()}attributeChangedCallback(e,n,t){n!==t&&this._applyTheme()}get crossOrigin(){return this.hasAttribute("cross-origin")}set crossOrigin(e){e?this.setAttribute("cross-origin",""):this.removeAttribute("cross-origin")}get theme(){return this.getAttribute("theme")\|\|"blue-light"}set theme(e){this.setAttribute("theme",e)}clearThemeProperties(){if(this._themeProps)for(const e of this._themeProps)this.style.removeProperty(e);this._themeProps=[]}async _applyTheme(){const e=await this._resolveThemeCSS();this._buildShadowDOM(e),this._applyVariablesToHost(h+e)}_applyVariablesToHost(e){const n=/--([\w-]+):\s([^;]+);/g;let t;for(this._themeProps=[];null!==(t=n.exec(e));){const e=`--${t[1]}`;let n=t[2].trim();n=n.replace(/url\s$[^)]$/gi,"none"),this.style.setProperty(e,n),this._themeProps.push(e)}}_buildShadowDOM(e){this.shadowRoot.innerHTML="";const n=document.createElement("style");if(n.textContent=`${h}\n :host {\n font-family: var(--font-family-body, sans-serif);\n color: var(--base-content--, inherit);\n font-weight: var(--font-weight-body, 400);\n background: var(--base-background-app, transparent);\n }`,this.shadowRoot.appendChild(n),e){const n=document.createElement("style");n.textContent=e,this.shadowRoot.appendChild(n)}this.shadowRoot.appendChild(document.createElement("slot"))}_injectPageStyles(){if(document.querySelector("[data-yumekit-page-styles]"))return;if(!this.hasAttribute("no-default-font")){const e=document.createElement("link");e.rel="stylesheet",e.href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap",e.setAttribute("data-yumekit-font",""),document.head.appendChild(e)}const e=document.createElement("style");e.setAttribute("data-yumekit-page-styles",""),document.head.appendChild(e)}_stripImportRules(e){return e.replace(/@import\s+[^;]+;/gi,"")}async _resolveThemeCSS(){if(ge[this.theme])return ge[this.theme];try{const e=new URL(this.theme,document.baseURI);if(!this.crossOrigin&&e.origin!==window.location.origin)return console.error(`Blocked cross-origin theme load from ${e.origin}. Add the "cross-origin" attribute to <y-theme> to allow this.`),"";const n=await fetch(e.href),t=n.headers.get("content-type")\|\|"";if(t&&!t.includes("text/css")&&!t.includes("text/plain"))return console.error(`Blocked theme load from ${e.href}: unexpected Content-Type "${t}".`),"";const r=await n.text();return this._stripImportRules(r)}catch(e){return console.error(`Failed to load theme from ${this.theme}:`,e),""}}}if(customElements.get("y-theme")\|\|customElements.define("y-theme",ke),"undefined"!=typeof document&&!document.querySelector("[data-yumekit-vars]")){const e=document.createElement("style");e.setAttribute("data-yumekit-vars",""),e.textContent=h,document.head.appendChild(e)}return e.YumeAppbar=I,e.YumeAvatar=B,e.YumeBadge=H,e.YumeBanner=P,e.YumeBreadcrumbs=j,e.YumeButton=z,e.YumeButtonGroup=q,e.YumeCard=V,e.YumeCheckbox=F,e.YumeColor=G,e.YumeColorpicker=W,e.YumeDate=U,e.YumeDatepicker=X,e.YumeDock=ee,e.YumeGallery=ne,e.YumeIcon=D,e.YumeInput=N,e.YumeMenu=R,e.YumePanel=re,e.YumePanelBar=oe,e.YumeProgress=ae,e.YumeRadio=se,e.YumeRating=ie,e.YumeSelect=Y,e.YumeSlider=ce,e.YumeStack=le,e.YumeStepper=de,e.YumeTable=he,e.YumeTabs=ue,e.YumeTag=be,e.YumeTextarea=te,e.YumeTheme=ke,e.YumeToast=ve,e.YumeTooltip=me,e.getIcon=r,e.registerIcon=function(e,t){n.set(e,t)},e.registerIcons=t,e}({});