diff --git a/dist/css/easy-forms.css b/dist/css/easy-forms.css index 8eace65..11fa60e 100644 --- a/dist/css/easy-forms.css +++ b/dist/css/easy-forms.css @@ -1 +1 @@ -@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-yellow-500:oklch(79.5% .184 86.047);--color-sky-700:oklch(50% .134 242.749);--color-sky-800:oklch(44.3% .11 240.79);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-xl:1.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--radius-sm:.25rem;--radius-lg:.5rem;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-ef-accent:var(--color-sky-700);--color-ef-accent-hover:var(--color-sky-800);--color-ef-subtle:#1018280d}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-ef-subtle:color-mix(in oklab,var(--color-gray-900)5%,transparent)}}:root,:host{--color-ef-text:var(--color-gray-900);--color-ef-text-muted:var(--color-gray-500);--color-ef-text-white:var(--color-white);--color-ef-input-bg:var(--color-gray-50);--color-ef-input-text:var(--color-gray-900);--color-ef-border:var(--color-gray-300);--color-ef-focus:var(--color-ef-accent);--color-ef-error:var(--color-red-600);--color-ef-disabled:var(--color-gray-300);--color-ef-button-bg:var(--color-ef-accent);--color-ef-button-bg-hover:var(--color-ef-accent-hover);--color-ef-button-text:var(--color-white);--color-ef-checkbox-bg:var(--color-gray-50);--color-ef-checkbox-border:var(--color-gray-300);--color-ef-checkbox-checked:var(--color-ef-accent);--color-ef-toggle-off:var(--color-gray-500);--color-ef-toggle-on:var(--color-ef-accent);--color-ef-dropdown-bg:var(--color-gray-50);--color-ef-dropdown-hover:#1018280d}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-ef-dropdown-hover:color-mix(in oklab,var(--color-gray-900)5%,transparent)}}:root,:host{--color-ef-dropdown-border:var(--color-gray-300);--color-ef-label:var(--color-gray-900);--color-ef-icon:var(--color-gray-500);--radius-ef:var(--radius-lg);--radius-ef-sm:var(--radius-sm);--text-ef:var(--text-sm);--text-ef-xs:var(--text-xs);--text-ef-lg:var(--text-lg);--text-ef-xl:var(--text-xl)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-y-0{inset-block:calc(var(--spacing)*0)}.start-0{inset-inline-start:calc(var(--spacing)*0)}.end-0{inset-inline-end:calc(var(--spacing)*0)}.-top-3{top:calc(var(--spacing)*-3)}.top-1\/2{top:50%}.top-11{top:calc(var(--spacing)*11)}.top-full{top:100%}.right-4{right:calc(var(--spacing)*4)}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-3{left:calc(var(--spacing)*3)}.left-4{left:calc(var(--spacing)*4)}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.col-span-12{grid-column:span 12/span 12}.col-start-1{grid-column-start:1}.row-start-1{grid-row-start:1}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:calc(var(--spacing)*1)}.my-4{margin-block:calc(var(--spacing)*4)}.ms-3{margin-inline-start:calc(var(--spacing)*3)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mr-0{margin-right:calc(var(--spacing)*0)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-3{margin-left:calc(var(--spacing)*3)}.form-checkbox{appearance:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;color:#155dfc;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;border-color:#6a7282;border-radius:0;flex-shrink:0;width:1rem;height:1rem;padding:0;display:inline-block}.form-checkbox:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}.form-checkbox:checked{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media(forced-colors:active){.form-checkbox:checked{appearance:auto}}.form-checkbox:checked:hover,.form-checkbox:checked:focus{background-color:currentColor;border-color:#0000}.form-checkbox:indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media(forced-colors:active){.form-checkbox:indeterminate{appearance:auto}}.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus{background-color:currentColor;border-color:#0000}.form-radio{appearance:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;color:#155dfc;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;border-color:#6a7282;border-radius:100%;flex-shrink:0;width:1rem;height:1rem;padding:0;display:inline-block}.form-radio:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}.form-radio:checked{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media(forced-colors:active){.form-radio:checked{appearance:auto}}.form-radio:checked:hover,.form-radio:checked:focus{background-color:currentColor;border-color:#0000}.form-input{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:#6a7282;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}.form-input:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#155dfc;outline:2px solid #0000}.form-input::placeholder{color:#6a7282;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em}.form-input::-webkit-date-and-time-value{text-align:inherit}.form-input::-webkit-datetime-edit{display:inline-flex}.form-input::-webkit-datetime-edit{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-64{height:calc(var(--spacing)*64)}.max-h-44{max-height:calc(var(--spacing)*44)}.max-h-64{max-height:calc(var(--spacing)*64)}.min-h-32{min-height:calc(var(--spacing)*32)}.w-2\/3{width:66.6667%}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-11{width:calc(var(--spacing)*11)}.w-12{width:calc(var(--spacing)*12)}.w-20{width:calc(var(--spacing)*20)}.w-72{width:calc(var(--spacing)*72)}.w-full{width:100%}.w-max{width:max-content}.max-w-full{max-width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-180{rotate:180deg}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.form-select{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:#6a7282;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}.form-select:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#155dfc;outline:2px solid #0000}.form-select{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.form-select:where([size]:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;-webkit-print-color-adjust:unset;print-color-adjust:unset;padding-right:.75rem}.form-textarea{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:#6a7282;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}.form-textarea:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#155dfc;outline:2px solid #0000}.form-textarea::placeholder{color:#6a7282;opacity:1}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}.gap-y-1{row-gap:calc(var(--spacing)*1)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-ef-border>:not(:last-child)){border-color:var(--color-ef-border)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-ef{border-radius:var(--radius-ef)}.rounded-ef-sm{border-radius:var(--radius-ef-sm)}.rounded-full{border-radius:3.40282e38px}.rounded-none{border-radius:0}.rounded-l-ef{border-top-left-radius:var(--radius-ef);border-bottom-left-radius:var(--radius-ef)}.rounded-l-full{border-top-left-radius:3.40282e38px;border-bottom-left-radius:3.40282e38px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-ef{border-top-right-radius:var(--radius-ef);border-bottom-right-radius:var(--radius-ef)}.rounded-r-full{border-top-right-radius:3.40282e38px;border-bottom-right-radius:3.40282e38px}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-r-0{border-right-style:var(--tw-border-style);border-right-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-ef-accent{border-color:var(--color-ef-accent)}.border-ef-border{border-color:var(--color-ef-border)}.border-ef-checkbox-border{border-color:var(--color-ef-checkbox-border)}.border-ef-dropdown-border{border-color:var(--color-ef-dropdown-border)}.border-ef-focus{border-color:var(--color-ef-focus)}.bg-ef-accent{background-color:var(--color-ef-accent)}.bg-ef-accent\/5{background-color:#0069a40d}@supports (color:color-mix(in lab,red,red)){.bg-ef-accent\/5{background-color:color-mix(in oklab,var(--color-ef-accent)5%,transparent)}}.bg-ef-border{background-color:var(--color-ef-border)}.bg-ef-button-bg{background-color:var(--color-ef-button-bg)}.bg-ef-checkbox-bg{background-color:var(--color-ef-checkbox-bg)}.bg-ef-dropdown-bg{background-color:var(--color-ef-dropdown-bg)}.bg-ef-error{background-color:var(--color-ef-error)}.bg-ef-input-bg{background-color:var(--color-ef-input-bg)}.bg-ef-input-bg\/50{background-color:#f9fafb80}@supports (color:color-mix(in lab,red,red)){.bg-ef-input-bg\/50{background-color:color-mix(in oklab,var(--color-ef-input-bg)50%,transparent)}}.bg-ef-subtle{background-color:var(--color-ef-subtle)}.bg-ef-text-white{background-color:var(--color-ef-text-white)}.bg-ef-toggle-off{background-color:var(--color-ef-toggle-off)}.p-1{padding:calc(var(--spacing)*1)}.p-2\.5{padding:calc(var(--spacing)*2.5)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-10{padding-inline:calc(var(--spacing)*10)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3\.5{padding-block:calc(var(--spacing)*3.5)}.ps-2\.5{padding-inline-start:calc(var(--spacing)*2.5)}.pe-2\.5{padding-inline-end:calc(var(--spacing)*2.5)}.pt-8{padding-top:calc(var(--spacing)*8)}.pr-4{padding-right:calc(var(--spacing)*4)}.pl-10{padding-left:calc(var(--spacing)*10)}.pl-11{padding-left:calc(var(--spacing)*11)}.text-center{text-align:center}.text-start{text-align:start}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-ef{font-size:var(--text-ef)}.text-ef-lg{font-size:var(--text-ef-lg)}.text-ef-xl{font-size:var(--text-ef-xl)}.text-ef-xs{font-size:var(--text-ef-xs)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-ef-accent{color:var(--color-ef-accent)}.text-ef-button-text{color:var(--color-ef-button-text)}.text-ef-checkbox-checked{color:var(--color-ef-checkbox-checked)}.text-ef-disabled{color:var(--color-ef-disabled)}.text-ef-error{color:var(--color-ef-error)}.text-ef-icon{color:var(--color-ef-icon)}.text-ef-input-text{color:var(--color-ef-input-text)}.text-ef-label{color:var(--color-ef-label)}.text-ef-text{color:var(--color-ef-text)}.text-ef-text-muted{color:var(--color-ef-text-muted)}.text-ef-text-white{color:var(--color-ef-text-white)}.text-white{color:var(--color-white)}.text-yellow-500{color:var(--color-yellow-500)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-ef-focus{--tw-ring-color:var(--color-ef-focus)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.not-last\:pb-6:not(:last-child){padding-bottom:calc(var(--spacing)*6)}.peer-checked\:bg-ef-toggle-on:is(:where(.peer):checked~*){background-color:var(--color-ef-toggle-on)}.peer-focus\:ring-2:is(:where(.peer):focus~*){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.peer-focus\:ring-ef-focus\/60:is(:where(.peer):focus~*){--tw-ring-color:#0069a499}@supports (color:color-mix(in lab,red,red)){.peer-focus\:ring-ef-focus\/60:is(:where(.peer):focus~*){--tw-ring-color:color-mix(in oklab,var(--color-ef-focus)60%,transparent)}}.peer-focus\:outline-none:is(:where(.peer):focus~*){--tw-outline-style:none;outline-style:none}.file\:mr-4::file-selector-button{margin-right:calc(var(--spacing)*4)}.file\:border-none::file-selector-button{--tw-border-style:none;border-style:none}.file\:bg-ef-subtle::file-selector-button{background-color:var(--color-ef-subtle)}.file\:px-4::file-selector-button{padding-inline:calc(var(--spacing)*4)}.file\:py-2::file-selector-button{padding-block:calc(var(--spacing)*2)}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-ef-text::file-selector-button{color:var(--color-ef-text)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:start-0\.5:after{content:var(--tw-content);inset-inline-start:calc(var(--spacing)*.5)}.after\:top-0\.5:after{content:var(--tw-content);top:calc(var(--spacing)*.5)}.after\:h-5:after{content:var(--tw-content);height:calc(var(--spacing)*5)}.after\:w-5:after{content:var(--tw-content);width:calc(var(--spacing)*5)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:border:after{content:var(--tw-content);border-style:var(--tw-border-style);border-width:1px}.after\:border-ef-checkbox-border:after{content:var(--tw-content);border-color:var(--color-ef-checkbox-border)}.after\:bg-ef-text-white:after{content:var(--tw-content);background-color:var(--color-ef-text-white)}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.peer-checked\:after\:border-ef-text-white:is(:where(.peer):checked~*):after{content:var(--tw-content);border-color:var(--color-ef-text-white)}.last\:mr-0:last-child{margin-right:calc(var(--spacing)*0)}.focus-within\:scale-125:focus-within{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.focus-within\:underline:focus-within{text-decoration-line:underline}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-within\:ring-ef-focus:focus-within{--tw-ring-color:var(--color-ef-focus)}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}@media(hover:hover){.hover\:scale-125:hover{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:border-ef-accent\/30:hover{border-color:#0069a44d}@supports (color:color-mix(in lab,red,red)){.hover\:border-ef-accent\/30:hover{border-color:color-mix(in oklab,var(--color-ef-accent)30%,transparent)}}.hover\:bg-ef-border\/80:hover{background-color:#d1d5dccc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-ef-border\/80:hover{background-color:color-mix(in oklab,var(--color-ef-border)80%,transparent)}}.hover\:bg-ef-button-bg-hover:hover{background-color:var(--color-ef-button-bg-hover)}.hover\:bg-ef-button-bg\/80:hover{background-color:#0069a4cc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-ef-button-bg\/80:hover{background-color:color-mix(in oklab,var(--color-ef-button-bg)80%,transparent)}}.hover\:bg-ef-dropdown-hover:hover{background-color:var(--color-ef-dropdown-hover)}.hover\:bg-ef-error\/90:hover{background-color:#e40014e6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-ef-error\/90:hover{background-color:color-mix(in oklab,var(--color-ef-error)90%,transparent)}}.hover\:bg-ef-subtle:hover{background-color:var(--color-ef-subtle)}.hover\:text-ef-accent:hover{color:var(--color-ef-accent)}.hover\:text-ef-accent-hover:hover{color:var(--color-ef-accent-hover)}.hover\:text-ef-error:hover{color:var(--color-ef-error)}.hover\:text-ef-text:hover{color:var(--color-ef-text)}.hover\:text-ef-text-muted:hover{color:var(--color-ef-text-muted)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-75:hover{opacity:.75}}.focus\:z-10:focus{z-index:10}.focus\:border-r:focus{border-right-style:var(--tw-border-style);border-right-width:1px}.focus\:border-ef-focus:focus{border-color:var(--color-ef-focus)}.focus\:text-ef-text:focus{color:var(--color-ef-text)}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-4:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-ef-error:focus{--tw-ring-color:var(--color-ef-error)}.focus\:ring-ef-focus:focus{--tw-ring-color:var(--color-ef-focus)}.focus\:ring-ef-focus\/20:focus{--tw-ring-color:#0069a433}@supports (color:color-mix(in lab,red,red)){.focus\:ring-ef-focus\/20:focus{--tw-ring-color:color-mix(in oklab,var(--color-ef-focus)20%,transparent)}}.focus\:ring-offset-1:focus{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:bg-ef-dropdown-hover:focus-visible{background-color:var(--color-ef-dropdown-hover)}.focus-visible\:text-ef-text:focus-visible{color:var(--color-ef-text)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:opacity-100:active{opacity:1}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-75:disabled{opacity:.75}.has-checked\:bg-ef-checkbox-checked\!:has(:checked){background-color:var(--color-ef-checkbox-checked)!important}.has-checked\:text-ef-text-white:has(:checked){color:var(--color-ef-text-white)}.has-focus\:ring-2:has(:focus){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.has-focus\:ring-ef-focus:has(:focus){--tw-ring-color:var(--color-ef-focus)}.has-focus\:ring-offset-2:has(:focus){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}@media(min-width:48rem){.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-6{grid-column:span 6/span 6}.md\:mr-4{margin-right:calc(var(--spacing)*4)}.md\:flex-1{flex:1}.md\:flex-row{flex-direction:row}}@media(min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:gap-8{gap:calc(var(--spacing)*8)}:where(.lg\:space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*10)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*10)*calc(1 - var(--tw-space-y-reverse)))}.lg\:p-6{padding:calc(var(--spacing)*6)}.not-last\:lg\:pb-10:not(:last-child){padding-bottom:calc(var(--spacing)*10)}}@media(min-width:80rem){.xl\:pt-12{padding-top:calc(var(--spacing)*12)}.xl\:text-ef-xl{font-size:var(--text-ef-xl)}}.\[\&_a\]\:text-ef-accent a{color:var(--color-ef-accent)}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_h3\]\:text-ef-xl h3{font-size:var(--text-ef-xl)}.\[\&_h3\]\:font-bold h3{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1} +@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-yellow-500:oklch(79.5% .184 86.047);--color-sky-700:oklch(50% .134 242.749);--color-sky-800:oklch(44.3% .11 240.79);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-xl:1.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--radius-sm:.25rem;--radius-lg:.5rem;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-ef-accent:var(--color-sky-700);--color-ef-accent-hover:var(--color-sky-800);--color-ef-subtle:#1018280d}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-ef-subtle:color-mix(in oklab,var(--color-gray-900)5%,transparent)}}:root,:host{--color-ef-text:var(--color-gray-900);--color-ef-text-muted:var(--color-gray-500);--color-ef-text-white:var(--color-white);--color-ef-input-bg:var(--color-gray-50);--color-ef-input-text:var(--color-gray-900);--color-ef-border:var(--color-gray-300);--color-ef-focus:var(--color-ef-accent);--color-ef-error:var(--color-red-600);--color-ef-disabled:var(--color-gray-300);--color-ef-button-bg:var(--color-ef-accent);--color-ef-button-bg-hover:var(--color-ef-accent-hover);--color-ef-button-text:var(--color-white);--color-ef-checkbox-bg:var(--color-gray-50);--color-ef-checkbox-border:var(--color-gray-300);--color-ef-checkbox-checked:var(--color-ef-accent);--color-ef-toggle-off:var(--color-gray-500);--color-ef-toggle-on:var(--color-ef-accent);--color-ef-dropdown-bg:var(--color-gray-50);--color-ef-dropdown-hover:#1018280d}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-ef-dropdown-hover:color-mix(in oklab,var(--color-gray-900)5%,transparent)}}:root,:host{--color-ef-dropdown-border:var(--color-gray-300);--color-ef-label:var(--color-gray-900);--color-ef-icon:var(--color-gray-500);--radius-ef:var(--radius-lg);--radius-ef-sm:var(--radius-sm);--text-ef:var(--text-sm);--text-ef-xs:var(--text-xs);--text-ef-lg:var(--text-lg);--text-ef-xl:var(--text-xl)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-y-0{inset-block:calc(var(--spacing)*0)}.start-0{inset-inline-start:calc(var(--spacing)*0)}.end-0{inset-inline-end:calc(var(--spacing)*0)}.-top-3{top:calc(var(--spacing)*-3)}.top-1\/2{top:50%}.top-11{top:calc(var(--spacing)*11)}.top-full{top:100%}.right-4{right:calc(var(--spacing)*4)}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-3{left:calc(var(--spacing)*3)}.left-4{left:calc(var(--spacing)*4)}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.col-span-12{grid-column:span 12/span 12}.col-start-1{grid-column-start:1}.row-start-1{grid-row-start:1}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:calc(var(--spacing)*1)}.my-4{margin-block:calc(var(--spacing)*4)}.ms-3{margin-inline-start:calc(var(--spacing)*3)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mr-0{margin-right:calc(var(--spacing)*0)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-3{margin-left:calc(var(--spacing)*3)}.form-checkbox{appearance:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;color:#155dfc;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;border-color:#6a7282;border-radius:0;flex-shrink:0;width:1rem;height:1rem;padding:0;display:inline-block}.form-checkbox:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}.form-checkbox:checked{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media(forced-colors:active){.form-checkbox:checked{appearance:auto}}.form-checkbox:checked:hover,.form-checkbox:checked:focus{background-color:currentColor;border-color:#0000}.form-checkbox:indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media(forced-colors:active){.form-checkbox:indeterminate{appearance:auto}}.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus{background-color:currentColor;border-color:#0000}.form-radio{appearance:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;color:#155dfc;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;border-color:#6a7282;border-radius:100%;flex-shrink:0;width:1rem;height:1rem;padding:0;display:inline-block}.form-radio:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}.form-radio:checked{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media(forced-colors:active){.form-radio:checked{appearance:auto}}.form-radio:checked:hover,.form-radio:checked:focus{background-color:currentColor;border-color:#0000}.form-input{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:#6a7282;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}.form-input:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#155dfc;outline:2px solid #0000}.form-input::placeholder{color:#6a7282;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em}.form-input::-webkit-date-and-time-value{text-align:inherit}.form-input::-webkit-datetime-edit{display:inline-flex}.form-input::-webkit-datetime-edit{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}.form-input::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-64{height:calc(var(--spacing)*64)}.max-h-44{max-height:calc(var(--spacing)*44)}.max-h-64{max-height:calc(var(--spacing)*64)}.min-h-32{min-height:calc(var(--spacing)*32)}.w-2\/3{width:66.6667%}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-11{width:calc(var(--spacing)*11)}.w-12{width:calc(var(--spacing)*12)}.w-20{width:calc(var(--spacing)*20)}.w-72{width:calc(var(--spacing)*72)}.w-full{width:100%}.w-max{width:max-content}.max-w-full{max-width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.form-select{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:#6a7282;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}.form-select:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#155dfc;outline:2px solid #0000}.form-select{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.form-select:where([size]:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;-webkit-print-color-adjust:unset;print-color-adjust:unset;padding-right:.75rem}.form-textarea{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:#6a7282;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}.form-textarea:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#155dfc;outline:2px solid #0000}.form-textarea::placeholder{color:#6a7282;opacity:1}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}.gap-y-1{row-gap:calc(var(--spacing)*1)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-ef-border>:not(:last-child)){border-color:var(--color-ef-border)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-ef{border-radius:var(--radius-ef)}.rounded-ef-sm{border-radius:var(--radius-ef-sm)}.rounded-full{border-radius:3.40282e38px}.rounded-none{border-radius:0}.rounded-l-ef{border-top-left-radius:var(--radius-ef);border-bottom-left-radius:var(--radius-ef)}.rounded-l-full{border-top-left-radius:3.40282e38px;border-bottom-left-radius:3.40282e38px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-ef{border-top-right-radius:var(--radius-ef);border-bottom-right-radius:var(--radius-ef)}.rounded-r-full{border-top-right-radius:3.40282e38px;border-bottom-right-radius:3.40282e38px}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-r-0{border-right-style:var(--tw-border-style);border-right-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-ef-accent{border-color:var(--color-ef-accent)}.border-ef-border{border-color:var(--color-ef-border)}.border-ef-checkbox-border{border-color:var(--color-ef-checkbox-border)}.border-ef-dropdown-border{border-color:var(--color-ef-dropdown-border)}.border-ef-focus{border-color:var(--color-ef-focus)}.bg-ef-accent{background-color:var(--color-ef-accent)}.bg-ef-accent\/5{background-color:#0069a40d}@supports (color:color-mix(in lab,red,red)){.bg-ef-accent\/5{background-color:color-mix(in oklab,var(--color-ef-accent)5%,transparent)}}.bg-ef-border{background-color:var(--color-ef-border)}.bg-ef-button-bg{background-color:var(--color-ef-button-bg)}.bg-ef-checkbox-bg{background-color:var(--color-ef-checkbox-bg)}.bg-ef-dropdown-bg{background-color:var(--color-ef-dropdown-bg)}.bg-ef-error{background-color:var(--color-ef-error)}.bg-ef-input-bg{background-color:var(--color-ef-input-bg)}.bg-ef-input-bg\/50{background-color:#f9fafb80}@supports (color:color-mix(in lab,red,red)){.bg-ef-input-bg\/50{background-color:color-mix(in oklab,var(--color-ef-input-bg)50%,transparent)}}.bg-ef-subtle{background-color:var(--color-ef-subtle)}.bg-ef-text-white{background-color:var(--color-ef-text-white)}.bg-ef-toggle-off{background-color:var(--color-ef-toggle-off)}.p-1{padding:calc(var(--spacing)*1)}.p-2\.5{padding:calc(var(--spacing)*2.5)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-10{padding-inline:calc(var(--spacing)*10)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3\.5{padding-block:calc(var(--spacing)*3.5)}.ps-2\.5{padding-inline-start:calc(var(--spacing)*2.5)}.pe-2\.5{padding-inline-end:calc(var(--spacing)*2.5)}.pt-8{padding-top:calc(var(--spacing)*8)}.pr-4{padding-right:calc(var(--spacing)*4)}.pl-10{padding-left:calc(var(--spacing)*10)}.pl-11{padding-left:calc(var(--spacing)*11)}.text-center{text-align:center}.text-start{text-align:start}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-ef{font-size:var(--text-ef)}.text-ef-lg{font-size:var(--text-ef-lg)}.text-ef-xl{font-size:var(--text-ef-xl)}.text-ef-xs{font-size:var(--text-ef-xs)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-ef-accent{color:var(--color-ef-accent)}.text-ef-button-text{color:var(--color-ef-button-text)}.text-ef-checkbox-checked{color:var(--color-ef-checkbox-checked)}.text-ef-disabled{color:var(--color-ef-disabled)}.text-ef-error{color:var(--color-ef-error)}.text-ef-icon{color:var(--color-ef-icon)}.text-ef-input-text{color:var(--color-ef-input-text)}.text-ef-label{color:var(--color-ef-label)}.text-ef-text{color:var(--color-ef-text)}.text-ef-text-muted{color:var(--color-ef-text-muted)}.text-ef-text-white{color:var(--color-ef-text-white)}.text-white{color:var(--color-white)}.text-yellow-500{color:var(--color-yellow-500)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-ef-focus{--tw-ring-color:var(--color-ef-focus)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.not-last\:pb-6:not(:last-child){padding-bottom:calc(var(--spacing)*6)}.peer-checked\:bg-ef-toggle-on:is(:where(.peer):checked~*){background-color:var(--color-ef-toggle-on)}.peer-focus\:ring-2:is(:where(.peer):focus~*){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.peer-focus\:ring-ef-focus\/60:is(:where(.peer):focus~*){--tw-ring-color:#0069a499}@supports (color:color-mix(in lab,red,red)){.peer-focus\:ring-ef-focus\/60:is(:where(.peer):focus~*){--tw-ring-color:color-mix(in oklab,var(--color-ef-focus)60%,transparent)}}.peer-focus\:outline-none:is(:where(.peer):focus~*){--tw-outline-style:none;outline-style:none}.file\:mr-4::file-selector-button{margin-right:calc(var(--spacing)*4)}.file\:border-none::file-selector-button{--tw-border-style:none;border-style:none}.file\:bg-ef-subtle::file-selector-button{background-color:var(--color-ef-subtle)}.file\:px-4::file-selector-button{padding-inline:calc(var(--spacing)*4)}.file\:py-2::file-selector-button{padding-block:calc(var(--spacing)*2)}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-ef-text::file-selector-button{color:var(--color-ef-text)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:start-0\.5:after{content:var(--tw-content);inset-inline-start:calc(var(--spacing)*.5)}.after\:top-0\.5:after{content:var(--tw-content);top:calc(var(--spacing)*.5)}.after\:h-5:after{content:var(--tw-content);height:calc(var(--spacing)*5)}.after\:w-5:after{content:var(--tw-content);width:calc(var(--spacing)*5)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:border:after{content:var(--tw-content);border-style:var(--tw-border-style);border-width:1px}.after\:border-ef-checkbox-border:after{content:var(--tw-content);border-color:var(--color-ef-checkbox-border)}.after\:bg-ef-text-white:after{content:var(--tw-content);background-color:var(--color-ef-text-white)}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.peer-checked\:after\:border-ef-text-white:is(:where(.peer):checked~*):after{content:var(--tw-content);border-color:var(--color-ef-text-white)}.last\:mr-0:last-child{margin-right:calc(var(--spacing)*0)}.focus-within\:scale-125:focus-within{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.focus-within\:underline:focus-within{text-decoration-line:underline}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-within\:ring-ef-focus:focus-within{--tw-ring-color:var(--color-ef-focus)}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}@media(hover:hover){.hover\:scale-125:hover{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:border-ef-accent\/30:hover{border-color:#0069a44d}@supports (color:color-mix(in lab,red,red)){.hover\:border-ef-accent\/30:hover{border-color:color-mix(in oklab,var(--color-ef-accent)30%,transparent)}}.hover\:bg-ef-border\/80:hover{background-color:#d1d5dccc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-ef-border\/80:hover{background-color:color-mix(in oklab,var(--color-ef-border)80%,transparent)}}.hover\:bg-ef-button-bg-hover:hover{background-color:var(--color-ef-button-bg-hover)}.hover\:bg-ef-button-bg\/80:hover{background-color:#0069a4cc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-ef-button-bg\/80:hover{background-color:color-mix(in oklab,var(--color-ef-button-bg)80%,transparent)}}.hover\:bg-ef-dropdown-hover:hover{background-color:var(--color-ef-dropdown-hover)}.hover\:bg-ef-error\/90:hover{background-color:#e40014e6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-ef-error\/90:hover{background-color:color-mix(in oklab,var(--color-ef-error)90%,transparent)}}.hover\:bg-ef-subtle:hover{background-color:var(--color-ef-subtle)}.hover\:text-ef-accent:hover{color:var(--color-ef-accent)}.hover\:text-ef-accent-hover:hover{color:var(--color-ef-accent-hover)}.hover\:text-ef-error:hover{color:var(--color-ef-error)}.hover\:text-ef-text:hover{color:var(--color-ef-text)}.hover\:text-ef-text-muted:hover{color:var(--color-ef-text-muted)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-75:hover{opacity:.75}}.focus\:z-10:focus{z-index:10}.focus\:border-r:focus{border-right-style:var(--tw-border-style);border-right-width:1px}.focus\:border-ef-focus:focus{border-color:var(--color-ef-focus)}.focus\:text-ef-text:focus{color:var(--color-ef-text)}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-4:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-ef-error:focus{--tw-ring-color:var(--color-ef-error)}.focus\:ring-ef-focus:focus{--tw-ring-color:var(--color-ef-focus)}.focus\:ring-ef-focus\/20:focus{--tw-ring-color:#0069a433}@supports (color:color-mix(in lab,red,red)){.focus\:ring-ef-focus\/20:focus{--tw-ring-color:color-mix(in oklab,var(--color-ef-focus)20%,transparent)}}.focus\:ring-offset-1:focus{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:bg-ef-dropdown-hover:focus-visible{background-color:var(--color-ef-dropdown-hover)}.focus-visible\:text-ef-text:focus-visible{color:var(--color-ef-text)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:opacity-100:active{opacity:1}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-75:disabled{opacity:.75}.has-checked\:bg-ef-checkbox-checked\!:has(:checked){background-color:var(--color-ef-checkbox-checked)!important}.has-checked\:text-ef-text-white:has(:checked){color:var(--color-ef-text-white)}.has-focus\:ring-2:has(:focus){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.has-focus\:ring-ef-focus:has(:focus){--tw-ring-color:var(--color-ef-focus)}.has-focus\:ring-offset-2:has(:focus){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}@media(min-width:48rem){.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-6{grid-column:span 6/span 6}.md\:mr-4{margin-right:calc(var(--spacing)*4)}.md\:flex-1{flex:1}.md\:flex-row{flex-direction:row}}@media(min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:gap-8{gap:calc(var(--spacing)*8)}:where(.lg\:space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*10)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*10)*calc(1 - var(--tw-space-y-reverse)))}.lg\:p-6{padding:calc(var(--spacing)*6)}.not-last\:lg\:pb-10:not(:last-child){padding-bottom:calc(var(--spacing)*10)}}@media(min-width:80rem){.xl\:pt-12{padding-top:calc(var(--spacing)*12)}.xl\:text-ef-xl{font-size:var(--text-ef-xl)}}.\[\&_a\]\:text-ef-accent a{color:var(--color-ef-accent)}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_h3\]\:text-ef-xl h3{font-size:var(--text-ef-xl)}.\[\&_h3\]\:font-bold h3{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1} diff --git a/dist/js/easy-forms.js b/dist/js/easy-forms.js index 611f632..77f24f5 100644 --- a/dist/js/easy-forms.js +++ b/dist/js/easy-forms.js @@ -1 +1 @@ -var EasyForms=(function(u){"use strict";function w(d="formSubmitted",c=null,a=null,h=!1){return{formHandle:d,formId:c||d,recaptchaSiteKey:a,precognitionEnabled:h,submitData:{},errors:{},fatalError:!1,sessionExpired:!1,disableSubmit:!1,successMessage:!1,hasReCaptcha:!!a,isSubmitting:!1,precogForm:null,precogInitialized:!1,init(){this.recaptchaSiteKey&&this.loadReCaptcha()},initPrecognition(){if(typeof this.$form!="function"){this.precognitionEnabled=!1;return}this.precogForm=this.$form("post",this.$refs.form.action,this.submitData),this.precogForm.setValidationTimeout(300),this.precogInitialized=!0,this.$watch("precogForm.errors",i=>{this.errors={...i}})},updateSubmitData(i){this.submitData=i,this.precognitionEnabled&&!this.precogInitialized&&this.initPrecognition(),this.precogForm&&Object.keys(i).forEach(t=>{this.precogForm[t]=i[t]})},validateField(i){!this.precognitionEnabled||!this.precogForm||i==="g-recaptcha-response"||i==="recaptcha"||/\.\d+\./.test(i)||(this.submitData[i]!==void 0&&(this.precogForm[i]=this.submitData[i]),this.precogForm.validate({only:[i]}))},async formSubmit(){if(!this.isSubmitting){this.isSubmitting=!0,this.$refs.form.dispatchEvent(new CustomEvent("form:submit",{bubbles:!0,detail:{submitData:this.submitData,formHandle:this.formHandle,formId:this.formId}}));try{this.clearErrors(),this.toggleSubmit();let i=null;if(this.recaptchaSiteKey)try{i=await this.getReCaptchaToken()}catch{this.fatalError=!0,this.$refs.form.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{error:"ReCAPTCHA verification failed. Please refresh the page.",fatalError:!0,formHandle:this.formHandle,formId:this.formId}}));return}const t=this.buildFormData(i),e=await fetch(this.$refs.form.action,{method:"POST",headers:{Accept:"application/json","X-Requested-With":"XMLHttpRequest"},body:t});if(!e.ok){await this.handleErrors(e);return}const r=await e.json();this.handleSuccess(r)}catch(i){this.fatalError=!0,this.$refs.form.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{error:i.message,fatalError:!0,formHandle:this.formHandle,formId:this.formId}}))}finally{this.toggleSubmit(),this.isSubmitting=!1}}},buildFormData(i){const t=new FormData;return Object.entries(this.submitData).forEach(([e,r])=>{if(e.startsWith("_grid_count_"))return;const s=e.includes(".")?e.replace(/\.([^.]+)/g,"[$1]"):e;r instanceof FileList?Array.from(r).forEach(o=>t.append(`${s}[]`,o)):r instanceof File?t.append(s,r):Array.isArray(r)?r.forEach(o=>t.append(`${s}[]`,o)):r!=null&&t.append(s,r)}),t.append("_token",this.$refs.form.dataset.csrfToken),i&&t.append("g-recaptcha-response",i),t},toggleSubmit(){this.disableSubmit=!this.disableSubmit},handleSuccess(i){i.success&&(this.successMessage=!0,this.precognitionEnabled&&this.precogForm&&this.precogForm.reset(),this.$refs.form.dispatchEvent(new CustomEvent("form:success",{bubbles:!0,detail:{data:i,submitData:this.submitData,formHandle:this.formHandle,formId:this.formId}})))},async handleErrors(i){try{if(i.status===419)this.sessionExpired=!0;else if(i.status===500)this.fatalError=!0;else{const t=await i.json(),e=t?.error??t?.errors??{};e&&typeof e=="object"&&!Array.isArray(e)?this.errors=Object.fromEntries(Object.entries(e).map(([r,s])=>[r,Array.isArray(s)?s[0]:s])):e?this.errors={form:String(e)}:this.errors={},this.precognitionEnabled&&this.precogForm&&this.precogForm.setErrors(this.errors)}this.$refs.form.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{errors:this.errors,status:i.status,fatalError:this.fatalError,sessionExpired:this.sessionExpired,formHandle:this.formHandle,formId:this.formId}})),this.$nextTick(()=>{this.scrollToFirstError()})}catch{this.fatalError=!0,this.$refs.form.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{errors:{},fatalError:!0,sessionExpired:!1,formHandle:this.formHandle,formId:this.formId}}))}},scrollToFirstError(){const i=this.precognitionEnabled&&this.precogForm?this.precogForm.errors:this.errors;if(Object.keys(i).length===0)return;const e=Object.keys(i)[0].replace(/\./g,"_"),r=`${this.formId}_${e}`,s=this.$refs.form.querySelector(`label[for="${r}"]`),o=s?s.closest("div"):this.$refs.form.querySelector(`#${r}`);if(!o)return;const n=o.getBoundingClientRect();n.top>=0&&n.bottom<=window.innerHeight||o.scrollIntoView({behavior:"smooth",block:"center"})},clearErrors(){this.errors={},this.fatalError=!1,this.sessionExpired=!1,this.precognitionEnabled&&this.precogForm&&Object.keys(this.precogForm.errors).forEach(i=>{this.precogForm.forgetError(i)})},handleGridRowRemoved({handle:i,removedIndex:t}){const e=new RegExp(`^${i}\\.(\\d+)\\.(.+)$`),r={};for(const[s,o]of Object.entries(this.errors)){const n=s.match(e);if(!n){r[s]=o;continue}const l=parseInt(n[1],10);lt&&(r[`${i}.${l-1}.${n[2]}`]=o)}this.errors=r,this.precognitionEnabled&&this.precogForm&&Object.keys(this.precogForm.errors).forEach(s=>{s.startsWith(`${i}.`)&&this.precogForm.forgetError(s)})},loadReCaptcha(){if(this.recaptchaSiteKey&&!document.querySelector('script[src*="recaptcha"]')){const i=document.createElement("script");i.src=`https://www.google.com/recaptcha/api.js?render=${this.recaptchaSiteKey}`,i.async=!0,i.defer=!0,document.head.appendChild(i)}},getReCaptchaToken(){return new Promise((i,t)=>{if(!this.recaptchaSiteKey){i(null);return}const e=setTimeout(()=>{t(new Error("ReCAPTCHA timeout"))},1e4);let r=0;const s=100,o=()=>{typeof grecaptcha<"u"&&grecaptcha.ready?grecaptcha.ready(()=>{grecaptcha.execute(this.recaptchaSiteKey,{action:"submit"}).then(n=>{clearTimeout(e),i(n)}).catch(n=>{clearTimeout(e),t(n)})}):r++e.input_type!=="hidden").filter(e=>!a.includes(e.handle)),this.submitFields=this.initializeFields(d),this.fieldsMap=d.reduce((e,r)=>(e[r.handle]=r,r.type==="group"&&r.group_fields&&r.group_fields.forEach(s=>{e[s.field_key]=s}),r.type==="grid"&&r.grid_fields&&r.grid_fields.forEach(s=>{e[`${r.handle}._template_.${s.handle}`]=s}),e),{}),h&&Object.keys(h).length>0&&this.loadPrepopulatedData(h);let t;this.$watch("submitFields",e=>{clearTimeout(t),t=setTimeout(()=>{this.$dispatch("fields-changed",this.submitFields)},100)},{deep:!0}),this.$nextTick(()=>{this.$dispatch("fields-changed",this.submitFields)})},shouldShowField(t){let e=this.fieldsMap[t];if(!e){const r=t.replace(/\.(\d+)\./,"._template_.");e=this.fieldsMap[r]}if(!e||this.hideFields.includes(t))return!1;if(!e.if&&!e.unless&&!e.show_when&&!e.hide_when)return!0;try{return typeof window.Statamic>"u"||!window.Statamic?.$conditions?.showField?!0:window.Statamic.$conditions.showField(e,this.submitFields,t)}catch{return!0}},initializeFields(t){return t.reduce((e,r)=>{if(r.type==="group"&&r.group_fields)return r.group_fields.forEach(s=>{const o=`${r.handle}.${s.handle}`;e[o]=this.getFieldDefaultValue(s)}),e;if(r.type==="grid"&&r.grid_fields){const s=r.fixed_rows||r.min_rows||1;for(let o=0;o{e[`${r.handle}.${o}.${n.handle}`]=this.getFieldDefaultValue(n)});return e[`_grid_count_${r.handle}`]=s,e}return e[r.handle]=this.getFieldDefaultValue(r),e},{})},getFieldDefaultValue(t){return t.type==="assets"?null:t.type==="toggle"?t.default??!1:t.type==="checkboxes"?t.default||[]:t.handle==="tracking_id"&&t.input_type==="hidden"?this.getTrackingId()||t.default||"":t.default||""},loadPrepopulatedData(t){const e={...this.submitFields};Object.keys(t).forEach(r=>{e.hasOwnProperty(r)&&(e[r]=t[r])}),this.submitFields=e},getTrackingId(){const t=this.getAllTrackingParamsFromUrl(),r={...this.getAllTrackingCookies(),...t};return this.formatTrackingValue(r)},getAllTrackingParamsFromUrl(){const t=this.getTrackedParams(),e=new URLSearchParams(window.location.search),r={};for(const[s,o]of e){const n=s.toLowerCase();t.includes(n)&&o.length<=200&&/^[\w\-_.]+$/.test(o)&&(r[n]=o)}return r},getAllTrackingCookies(){const t={};return this.getTrackedParams().forEach(r=>{const s=this.getCookie(`${this.TRACKING_COOKIE_PREFIX}${r}`);s&&(t[r]=s)}),t},formatTrackingValue(t){const e=Object.entries(t);return e.length===0?"":e.map(([r,s])=>`${encodeURIComponent(r)}=${encodeURIComponent(s)}`).join("&")},getTrackedParams(){const t=["gclid","gbraid","wbraid"],r=this.$el?.closest("form")?.dataset?.trackParams?.split(",").map(s=>s.trim().toLowerCase());return r?.length?r:t},captureTrackingParams(){const t=this.getAllTrackingParamsFromUrl();Object.entries(t).forEach(([e,r])=>{this.setCookie(`${this.TRACKING_COOKIE_PREFIX}${e}`,r,this.COOKIE_EXPIRY_DAYS)})},setCookie(t,e,r){const s=new Date(Date.now()+r*864e5).toUTCString(),o=window.location.protocol==="https:"?"; Secure":"";document.cookie=`${t}=${encodeURIComponent(e)}; expires=${s}; path=/; SameSite=Lax${o}`},getCookie(t){const r=`; ${document.cookie}`.split(`; ${t}=`);return r.length===2?decodeURIComponent(r.pop().split(";").shift()):null},addGridRow(t){const e=this.fieldsMap[t];if(!e?.grid_fields)return;const r=`_grid_count_${t}`,s=this.submitFields[r]||0;e.max_rows&&s>=e.max_rows||(e.grid_fields.forEach(o=>{this.submitFields[`${t}.${s}.${o.handle}`]=this.getFieldDefaultValue(o)}),this.submitFields[r]=s+1,this.cloneGridRow(t,s))},removeGridRow(t,e){const r=this.fieldsMap[t];if(!r?.grid_fields)return;const s=`_grid_count_${t}`,o=this.submitFields[s]||0;if(e=parseInt(e),!(r.min_rows&&o<=r.min_rows)){r.grid_fields.forEach(n=>{delete this.submitFields[`${t}.${e}.${n.handle}`]});for(let n=e+1;n{const m=`${t}.${n}.${l.handle}`,p=`${t}.${n-1}.${l.handle}`;this.submitFields[p]=this.submitFields[m],delete this.submitFields[m]});this.submitFields[s]=o-1,this.$dispatch("grid-row-removed",{handle:t,removedIndex:e}),this.rebuildGridRows(t)}},canAddGridRow(t){const e=this.fieldsMap[t];return!e?.grid_fields||e.is_fixed?!1:e.max_rows?(this.submitFields[`_grid_count_${t}`]||0)r},cloneGridRow(t,e){const r=this.formId?`${this.formId}_${t}`:t,s=document.querySelector(`[data-grid-template="${r}"]`),o=document.querySelector(`[data-grid-rows="${r}"]`);if(!s||!o)return;const l=s.content.cloneNode(!0).firstElementChild,m=g=>g.replace(/__INDEX__/g,e),p=g=>{const _=[g,...g.querySelectorAll("*")];for(const f of _){for(const b of Array.from(f.attributes||[]))b.value.includes("__INDEX__")&&f.setAttribute(b.name,m(b.value));f.tagName==="TEMPLATE"&&f.content&&p(f.content)}};p(l);const $=l.querySelector(".row-number");$&&($.textContent=e+1),l.setAttribute("data-grid-row",e),o.appendChild(l)},rebuildGridRows(t){const e=this.formId?`${this.formId}_${t}`:t,r=document.querySelector(`[data-grid-rows="${e}"]`);if(!r)return;r.innerHTML="";const s=this.submitFields[`_grid_count_${t}`]||0;for(let o=0;o=this.totalSteps||this.stepValidating||await this.validateCurrentStep()&&(this.currentStep++,this.scrollToWizard(),this.dispatchStepChange())},goPrev(){this.currentStep>1&&(this.currentStep--,this.scrollToWizard(),this.dispatchStepChange())},getProgressPercent(){return Math.round(this.currentStep/this.totalSteps*100)},hasFieldError(c){if(this.precogForm&&typeof this.precogForm.invalid=="function")return this.precogForm.invalid(c);const a=this.precogForm?.errors?.[c];return a&&(Array.isArray(a)?a.length>0:!0)},async validateCurrentStep(){const c=Array.from(this.stepFields[this.currentStep]||[]);if(c.length===0||!this.precogForm)return!0;this.stepValidating=!0;try{c.forEach(i=>{this.submitData?.[i]!==void 0&&(this.precogForm[i]=this.submitData[i])}),this.precogForm.validate({only:c});let a=0;for(;!this.precogForm.validating&&a<20;)await new Promise(i=>setTimeout(i,50)),a++;for(;this.precogForm.validating;)await new Promise(i=>setTimeout(i,50));return c.some(i=>this.hasFieldError(i))?(this.scrollToFirstError(c),!1):!0}finally{this.stepValidating=!1}},scrollToFirstError(c){if(!c){const a=this.precogForm?.errors||this.errors||{},h=Object.keys(a);if(h.length===0)return;for(let i=1;i<=this.totalSteps;i++){const t=this.stepFields[i]||[];if(t.some(r=>h.includes(r))){this.currentStep=i,this.dispatchStepChange(),this.$nextTick(()=>{this.scrollToFirstError(t)});return}}return}for(const a of c)if(this.hasFieldError(a)){this.$refs.form?.querySelector(`[name="${a}"], #${a}`)?.scrollIntoView({behavior:"smooth",block:"center"});break}},scrollToWizard(){this.$nextTick(()=>{const c=this.$refs.wizard;if(c){const a=c.getBoundingClientRect();(a.top<0||a.top>window.innerHeight*.3)&&c.scrollIntoView({behavior:"smooth",block:"start"})}})},dispatchStepChange(){this.$refs.form?.dispatchEvent(new CustomEvent("wizard:step-change",{bubbles:!0,detail:{currentStep:this.currentStep,totalSteps:this.totalSteps,formHandle:this.formHandle,formId:this.formId}}))}}}return window.formHandler=w,window.formFields=E,window.wizardHandler=F,u.formFields=E,u.formHandler=w,u.wizardHandler=F,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"}),u})({}); +var EasyForms=(function(w){"use strict";function _(m="formSubmitted",c=null,a=null,f=!1){return{formHandle:m,formId:c||m,recaptchaSiteKey:a,precognitionEnabled:f,submitData:{},errors:{},fatalError:!1,sessionExpired:!1,disableSubmit:!1,successMessage:!1,hasReCaptcha:!!a,isSubmitting:!1,precogForm:null,precogInitialized:!1,init(){this.recaptchaSiteKey&&this.loadReCaptcha()},initPrecognition(){if(typeof this.$form!="function"){this.precognitionEnabled=!1;return}this.precogForm=this.$form("post",this.$refs.form.action,this.submitData),this.precogForm.setValidationTimeout(300),this.precogInitialized=!0,this.$watch("precogForm.errors",s=>{this.errors={...s}})},updateSubmitData(s){this.submitData=s,this.precognitionEnabled&&!this.precogInitialized&&this.initPrecognition(),this.precogForm&&Object.keys(s).forEach(t=>{this.precogForm[t]=s[t]})},validateField(s){!this.precognitionEnabled||!this.precogForm||s==="g-recaptcha-response"||s==="recaptcha"||/\.\d+\./.test(s)||(this.submitData[s]!==void 0&&(this.precogForm[s]=this.submitData[s]),this.precogForm.validate({only:[s]}))},async formSubmit(){if(!this.isSubmitting){this.isSubmitting=!0,this.$refs.form.dispatchEvent(new CustomEvent("form:submit",{bubbles:!0,detail:{submitData:this.submitData,formHandle:this.formHandle,formId:this.formId}}));try{this.clearErrors(),this.toggleSubmit();let s=null;if(this.recaptchaSiteKey)try{s=await this.getReCaptchaToken()}catch{this.fatalError=!0,this.$refs.form.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{error:"ReCAPTCHA verification failed. Please refresh the page.",fatalError:!0,formHandle:this.formHandle,formId:this.formId}}));return}const t=this.buildFormData(s),r=await fetch(this.$refs.form.action,{method:"POST",headers:{Accept:"application/json","X-Requested-With":"XMLHttpRequest"},body:t});if(!r.ok){await this.handleErrors(r);return}const e=await r.json();this.handleSuccess(e)}catch(s){this.fatalError=!0,this.$refs.form.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{error:s.message,fatalError:!0,formHandle:this.formHandle,formId:this.formId}}))}finally{this.toggleSubmit(),this.isSubmitting=!1}}},buildFormData(s){const t=new FormData;return Object.entries(this.submitData).forEach(([r,e])=>{if(r.startsWith("_grid_count_"))return;const i=r.includes(".")?r.replace(/\.([^.]+)/g,"[$1]"):r;e instanceof FileList?Array.from(e).forEach(o=>t.append(`${i}[]`,o)):e instanceof File?t.append(i,e):Array.isArray(e)?e.forEach(o=>t.append(`${i}[]`,o)):e!=null&&t.append(i,e)}),t.append("_token",this.$refs.form.dataset.csrfToken),s&&t.append("g-recaptcha-response",s),t},toggleSubmit(){this.disableSubmit=!this.disableSubmit},handleSuccess(s){s.success&&(this.successMessage=!0,this.precognitionEnabled&&this.precogForm&&this.precogForm.reset(),this.$refs.form.dispatchEvent(new CustomEvent("form:success",{bubbles:!0,detail:{data:s,submitData:this.submitData,formHandle:this.formHandle,formId:this.formId}})))},async handleErrors(s){try{if(s.status===419)this.sessionExpired=!0;else if(s.status===500)this.fatalError=!0;else{const t=await s.json(),r=t?.error??t?.errors??{};r&&typeof r=="object"&&!Array.isArray(r)?this.errors=Object.fromEntries(Object.entries(r).map(([e,i])=>[e,Array.isArray(i)?i[0]:i])):r?this.errors={form:String(r)}:this.errors={},this.precognitionEnabled&&this.precogForm&&this.precogForm.setErrors(this.errors)}this.$refs.form.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{errors:this.errors,status:s.status,fatalError:this.fatalError,sessionExpired:this.sessionExpired,formHandle:this.formHandle,formId:this.formId}})),this.$nextTick(()=>{this.scrollToFirstError()})}catch{this.fatalError=!0,this.$refs.form.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{errors:{},fatalError:!0,sessionExpired:!1,formHandle:this.formHandle,formId:this.formId}}))}},scrollToFirstError(){const s=this.precognitionEnabled&&this.precogForm?this.precogForm.errors:this.errors;if(Object.keys(s).length===0)return;const r=Object.keys(s)[0].replace(/\./g,"_"),e=`${this.formId}_${r}`,i=this.$refs.form.querySelector(`label[for="${e}"]`),o=i?i.closest("div"):this.$refs.form.querySelector(`#${e}`);if(!o)return;const n=o.getBoundingClientRect();n.top>=0&&n.bottom<=window.innerHeight||o.scrollIntoView({behavior:"smooth",block:"center"})},clearErrors(){this.errors={},this.fatalError=!1,this.sessionExpired=!1,this.precognitionEnabled&&this.precogForm&&Object.keys(this.precogForm.errors).forEach(s=>{this.precogForm.forgetError(s)})},handleGridRowRemoved({handle:s,removedIndex:t}){const r=new RegExp(`^${s}\\.(\\d+)\\.(.+)$`),e={};for(const[i,o]of Object.entries(this.errors)){const n=i.match(r);if(!n){e[i]=o;continue}const u=parseInt(n[1],10);ut&&(e[`${s}.${u-1}.${n[2]}`]=o)}this.errors=e,this.precognitionEnabled&&this.precogForm&&Object.keys(this.precogForm.errors).forEach(i=>{i.startsWith(`${s}.`)&&this.precogForm.forgetError(i)})},loadReCaptcha(){if(this.recaptchaSiteKey&&!document.querySelector('script[src*="recaptcha"]')){const s=document.createElement("script");s.src=`https://www.google.com/recaptcha/api.js?render=${this.recaptchaSiteKey}`,s.async=!0,s.defer=!0,document.head.appendChild(s)}},getReCaptchaToken(){return new Promise((s,t)=>{if(!this.recaptchaSiteKey){s(null);return}const r=setTimeout(()=>{t(new Error("ReCAPTCHA timeout"))},1e4);let e=0;const i=100,o=()=>{typeof grecaptcha<"u"&&grecaptcha.ready?grecaptcha.ready(()=>{grecaptcha.execute(this.recaptchaSiteKey,{action:"submit"}).then(n=>{clearTimeout(r),s(n)}).catch(n=>{clearTimeout(r),t(n)})}):e++r.input_type!=="hidden").filter(r=>!a.includes(r.handle)),this.submitFields=this.initializeFields(m),this.fieldsMap=m.reduce((r,e)=>(r[e.handle]=e,e.type==="group"&&e.group_fields&&e.group_fields.forEach(i=>{r[i.field_key]=i}),e.type==="grid"&&e.grid_fields&&e.grid_fields.forEach(i=>{r[`${e.handle}._template_.${i.handle}`]=i}),r),{}),f&&Object.keys(f).length>0&&this.loadPrepopulatedData(f);let t;this.$watch("submitFields",r=>{clearTimeout(t),t=setTimeout(()=>{this.$dispatch("fields-changed",this.submitFields)},100)},{deep:!0}),this.$nextTick(()=>{this.$dispatch("fields-changed",this.submitFields)})},shouldShowField(t){let r=this.fieldsMap[t];if(!r){const e=t.replace(/\.(\d+)\./,"._template_.");r=this.fieldsMap[e]}if(!r||this.hideFields.includes(t))return!1;if(!r.if&&!r.unless&&!r.show_when&&!r.hide_when)return!0;try{return typeof window.Statamic>"u"||!window.Statamic?.$conditions?.showField?!0:window.Statamic.$conditions.showField(r,this.submitFields,t)}catch{return!0}},initializeFields(t){const r=Object.create(null);for(const e of t)r[e.handle]=e.default;return t.reduce((e,i)=>{if(i.type==="group"&&i.group_fields)return i.group_fields.forEach(o=>{const n=`${i.handle}.${o.handle}`;e[n]=this.getFieldDefaultValue(o)}),e;if(i.type==="grid"&&i.grid_fields){let o;if(i.dynamic_rows_field){const n=parseInt(e[i.dynamic_rows_field]??r[i.dynamic_rows_field])||0;o=Math.max(n,i.min_rows||0),i.max_rows&&(o=Math.min(o,i.max_rows))}else o=i.fixed_rows||i.min_rows||1;for(let n=0;n{e[`${i.handle}.${n}.${u.handle}`]=this.getFieldDefaultValue(u)});return e[`_grid_count_${i.handle}`]=o,e}return e[i.handle]=this.getFieldDefaultValue(i),e},{})},getFieldDefaultValue(t){return t.type==="assets"?null:t.type==="toggle"?t.default??!1:t.type==="checkboxes"?t.default||[]:t.handle==="tracking_id"&&t.input_type==="hidden"?this.getTrackingId()||t.default||"":t.default||""},loadPrepopulatedData(t){const r={...this.submitFields};Object.keys(t).forEach(e=>{r.hasOwnProperty(e)&&(r[e]=t[e])}),this.submitFields=r},getTrackingId(){const t=this.getAllTrackingParamsFromUrl(),e={...this.getAllTrackingCookies(),...t};return this.formatTrackingValue(e)},getAllTrackingParamsFromUrl(){const t=this.getTrackedParams(),r=new URLSearchParams(window.location.search),e={};for(const[i,o]of r){const n=i.toLowerCase();t.includes(n)&&o.length<=200&&/^[\w\-_.]+$/.test(o)&&(e[n]=o)}return e},getAllTrackingCookies(){const t={};return this.getTrackedParams().forEach(e=>{const i=this.getCookie(`${this.TRACKING_COOKIE_PREFIX}${e}`);i&&(t[e]=i)}),t},formatTrackingValue(t){const r=Object.entries(t);return r.length===0?"":r.map(([e,i])=>`${encodeURIComponent(e)}=${encodeURIComponent(i)}`).join("&")},getTrackedParams(){const t=["gclid","gbraid","wbraid"],e=this.$el?.closest("form")?.dataset?.trackParams?.split(",").map(i=>i.trim().toLowerCase());return e?.length?e:t},captureTrackingParams(){const t=this.getAllTrackingParamsFromUrl();Object.entries(t).forEach(([r,e])=>{this.setCookie(`${this.TRACKING_COOKIE_PREFIX}${r}`,e,this.COOKIE_EXPIRY_DAYS)})},setCookie(t,r,e){const i=new Date(Date.now()+e*864e5).toUTCString(),o=window.location.protocol==="https:"?"; Secure":"";document.cookie=`${t}=${encodeURIComponent(r)}; expires=${i}; path=/; SameSite=Lax${o}`},getCookie(t){const e=`; ${document.cookie}`.split(`; ${t}=`);return e.length===2?decodeURIComponent(e.pop().split(";").shift()):null},addGridRow(t){const r=this.fieldsMap[t];if(!r?.grid_fields)return;const e=`_grid_count_${t}`,i=this.submitFields[e]||0;r.max_rows&&i>=r.max_rows||(r.grid_fields.forEach(o=>{this.submitFields[`${t}.${i}.${o.handle}`]=this.getFieldDefaultValue(o)}),this.submitFields[e]=i+1,this.cloneGridRow(t,i,!0))},removeGridRow(t,r){const e=this.fieldsMap[t];if(!e?.grid_fields)return;const i=`_grid_count_${t}`,o=this.submitFields[i]||0;if(r=parseInt(r),e.min_rows&&o<=e.min_rows)return;const n=this.formId?`${this.formId}_${t}`:t,d=document.querySelector(`[data-grid-rows="${n}"]`)?.querySelector(`[data-grid-row="${r}"]`),l=()=>{e.grid_fields.forEach(h=>{delete this.submitFields[`${t}.${r}.${h.handle}`]});for(let h=r+1;h{const g=`${t}.${h}.${p.handle}`,E=`${t}.${h-1}.${p.handle}`;this.submitFields[E]=this.submitFields[g],delete this.submitFields[g]});this.submitFields[i]=o-1,this.$dispatch("grid-row-removed",{handle:t,removedIndex:r}),this.rebuildGridRows(t)};d?this.animateGridRowOut(d,l):l()},canAddGridRow(t){const r=this.fieldsMap[t];return!r?.grid_fields||r.is_fixed?!1:r.max_rows?(this.submitFields[`_grid_count_${t}`]||0)e},cloneGridRow(t,r,e=!1){const i=this.formId?`${this.formId}_${t}`:t,o=document.querySelector(`[data-grid-template="${i}"]`),n=document.querySelector(`[data-grid-rows="${i}"]`);if(!o||!n)return;const d=o.content.cloneNode(!0).firstElementChild,l=g=>g.replace(/__INDEX__/g,r),h=g=>{const E=[g,...g.querySelectorAll("*")];for(const b of E){for(const $ of Array.from(b.attributes||[]))$.value.includes("__INDEX__")&&b.setAttribute($.name,l($.value));b.tagName==="TEMPLATE"&&b.content&&h(b.content)}};h(d);const p=d.querySelector(".row-number");p&&(p.textContent=r+1),d.setAttribute("data-grid-row",r),e&&(d.classList.add("ef-row-enter"),d.addEventListener("animationend",()=>d.classList.remove("ef-row-enter"),{once:!0})),n.appendChild(d)},rebuildGridRows(t){const r=this.formId?`${this.formId}_${t}`:t,e=document.querySelector(`[data-grid-rows="${r}"]`);if(!e)return;e.innerHTML="";const i=this.submitFields[`_grid_count_${t}`]||0;for(let o=0;ol.remove()),i>n)for(let l=n;l{this.submitFields[`${t}.${l}.${h.handle}`]=this.getFieldDefaultValue(h)}),this.cloneGridRow(t,l,!0);else for(let l=n-1;l>=i;l--){e.grid_fields.forEach(p=>{delete this.submitFields[`${t}.${l}.${p.handle}`]});const h=d?.querySelector(`[data-grid-row="${l}"]`);h&&this.animateGridRowOut(h),this.$dispatch("grid-row-removed",{handle:t,removedIndex:l})}this.submitFields[o]=i},animateGridRowOut(t,r){let e=!1;const i=()=>{e||(e=!0,t.remove(),r&&r())};if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches){i();return}const o=setTimeout(i,400);t.classList.add("ef-row-exit"),t.addEventListener("animationend",()=>{t.style.height=t.offsetHeight+"px",t.style.overflow="hidden",t.offsetHeight,t.style.transition="height .15s ease-in, margin .15s ease-in",t.style.height="0",t.style.marginBottom="0",t.addEventListener("transitionend",()=>{clearTimeout(o),i()},{once:!0})},{once:!0})},initDynamicGridRows(t,r){this.$watch(()=>this.submitFields[r],e=>this.setGridRowCount(t,e)),this.setGridRowCount(t,this.submitFields[r])}}}function y(m){return{currentStep:1,totalSteps:m,stepValidating:!1,stepFields:{},async goNext(){this.currentStep>=this.totalSteps||this.stepValidating||await this.validateCurrentStep()&&(this.currentStep++,this.scrollToWizard(),this.dispatchStepChange())},goPrev(){this.currentStep>1&&(this.currentStep--,this.scrollToWizard(),this.dispatchStepChange())},getProgressPercent(){return Math.round(this.currentStep/this.totalSteps*100)},hasFieldError(c){if(this.precogForm&&typeof this.precogForm.invalid=="function")return this.precogForm.invalid(c);const a=this.precogForm?.errors?.[c];return a&&(Array.isArray(a)?a.length>0:!0)},async validateCurrentStep(){const c=Array.from(this.stepFields[this.currentStep]||[]);if(c.length===0||!this.precogForm)return!0;this.stepValidating=!0;try{c.forEach(s=>{this.submitData?.[s]!==void 0&&(this.precogForm[s]=this.submitData[s])}),this.precogForm.validate({only:c});let a=0;for(;!this.precogForm.validating&&a<20;)await new Promise(s=>setTimeout(s,50)),a++;for(;this.precogForm.validating;)await new Promise(s=>setTimeout(s,50));return c.some(s=>this.hasFieldError(s))?(this.scrollToFirstError(c),!1):!0}finally{this.stepValidating=!1}},scrollToFirstError(c){if(!c){const a=this.precogForm?.errors||this.errors||{},f=Object.keys(a);if(f.length===0)return;for(let s=1;s<=this.totalSteps;s++){const t=this.stepFields[s]||[];if(t.some(e=>f.includes(e))){this.currentStep=s,this.dispatchStepChange(),this.$nextTick(()=>{this.scrollToFirstError(t)});return}}return}for(const a of c)if(this.hasFieldError(a)){this.$refs.form?.querySelector(`[name="${a}"], #${a}`)?.scrollIntoView({behavior:"smooth",block:"center"});break}},scrollToWizard(){this.$nextTick(()=>{const c=this.$refs.wizard;if(c){const a=c.getBoundingClientRect();(a.top<0||a.top>window.innerHeight*.3)&&c.scrollIntoView({behavior:"smooth",block:"start"})}})},dispatchStepChange(){this.$refs.form?.dispatchEvent(new CustomEvent("wizard:step-change",{bubbles:!0,detail:{currentStep:this.currentStep,totalSteps:this.totalSteps,formHandle:this.formHandle,formId:this.formId}}))}}}return window.formHandler=_,window.formFields=F,window.wizardHandler=y,w.formFields=F,w.formHandler=_,w.wizardHandler=y,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"}),w})({}); diff --git a/resources/js/formFields.js b/resources/js/formFields.js index 0dbf38e..34cd470 100644 --- a/resources/js/formFields.js +++ b/resources/js/formFields.js @@ -93,6 +93,12 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat }, initializeFields(fields) { + // Pre-compute handle→default map for O(1) lookups (used by dynamic_rows_field) + const defaultsByHandle = Object.create(null) + for (const f of fields) { + defaultsByHandle[f.handle] = f.default + } + return fields.reduce((acc, field) => { // Handle group fields - initialize nested fields with dot notation if (field.type === 'group' && field.group_fields) { @@ -105,7 +111,20 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat // Handle grid fields - initialize with flat indexed keys if (field.type === 'grid' && field.grid_fields) { - const rowCount = field.fixed_rows || field.min_rows || 1 + let rowCount + if (field.dynamic_rows_field) { + // Look up from acc first (already processed), then fall back to the field's default + const controlValue = parseInt( + acc[field.dynamic_rows_field] + ?? defaultsByHandle[field.dynamic_rows_field] + ) || 0 + rowCount = Math.max(controlValue, field.min_rows || 0) + if (field.max_rows) { + rowCount = Math.min(rowCount, field.max_rows) + } + } else { + rowCount = field.fixed_rows || field.min_rows || 1 + } // Initialize flat state with indexed keys for each row for (let i = 0; i < rowCount; i++) { field.grid_fields.forEach(nestedField => { @@ -276,7 +295,7 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat this.submitFields[countKey] = currentCount + 1 // Clone template row in DOM - this.cloneGridRow(handle, currentCount) + this.cloneGridRow(handle, currentCount, true) }, /** @@ -293,28 +312,40 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat // Check min_rows limit if (field.min_rows && currentCount <= field.min_rows) return - // Remove row fields from state - field.grid_fields.forEach(f => { - delete this.submitFields[`${handle}.${index}.${f.handle}`] - }) + const gridId = this.formId ? `${this.formId}_${handle}` : handle + const container = document.querySelector(`[data-grid-rows="${gridId}"]`) + const row = container?.querySelector(`[data-grid-row="${index}"]`) - // Shift remaining rows down - for (let i = index + 1; i < currentCount; i++) { + const cleanup = () => { + // Remove row fields from state field.grid_fields.forEach(f => { - const oldKey = `${handle}.${i}.${f.handle}` - const newKey = `${handle}.${i - 1}.${f.handle}` - this.submitFields[newKey] = this.submitFields[oldKey] - delete this.submitFields[oldKey] + delete this.submitFields[`${handle}.${index}.${f.handle}`] }) - } - this.submitFields[countKey] = currentCount - 1 + // Shift remaining rows down + for (let i = index + 1; i < currentCount; i++) { + field.grid_fields.forEach(f => { + const oldKey = `${handle}.${i}.${f.handle}` + const newKey = `${handle}.${i - 1}.${f.handle}` + this.submitFields[newKey] = this.submitFields[oldKey] + delete this.submitFields[oldKey] + }) + } - // Shift errors in the parent formHandler component - this.$dispatch('grid-row-removed', { handle, removedIndex: index }) + this.submitFields[countKey] = currentCount - 1 + + // Shift errors in the parent formHandler component + this.$dispatch('grid-row-removed', { handle, removedIndex: index }) + + // Rebuild all DOM rows so Alpine creates fresh, correct bindings + this.rebuildGridRows(handle) + } - // Rebuild all DOM rows so Alpine creates fresh, correct bindings - this.rebuildGridRows(handle) + if (row) { + this.animateGridRowOut(row, cleanup) + } else { + cleanup() + } }, /** @@ -342,7 +373,7 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat /** * Clone template row in DOM and replace __INDEX__ placeholders. */ - cloneGridRow(handle, index) { + cloneGridRow(handle, index, animate = false) { const gridId = this.formId ? `${this.formId}_${handle}` : handle const template = document.querySelector(`[data-grid-template="${gridId}"]`) const container = document.querySelector(`[data-grid-rows="${gridId}"]`) @@ -381,6 +412,10 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat } row.setAttribute('data-grid-row', index) + if (animate) { + row.classList.add('ef-row-enter') + row.addEventListener('animationend', () => row.classList.remove('ef-row-enter'), { once: true }) + } container.appendChild(row) }, @@ -404,5 +439,104 @@ export default function formFields(fields, honeypot, hideFields, prepopulatedDat this.cloneGridRow(handle, i) } }, + + /** + * Set the row count for a grid field, adding or removing rows as needed. + */ + setGridRowCount(handle, newCount) { + const field = this.fieldsMap[handle] + if (!field?.grid_fields) return + + let count = Math.max(parseInt(newCount) || 0, field.min_rows || 0) + if (field.max_rows) { + count = Math.min(count, field.max_rows) + } + + const countKey = `_grid_count_${handle}` + const currentCount = this.submitFields[countKey] || 0 + if (count === currentCount) return + + const gridId = this.formId ? `${this.formId}_${handle}` : handle + const container = document.querySelector(`[data-grid-rows="${gridId}"]`) + + // Clean up any rows still animating out from a previous change + if (container) { + container.querySelectorAll('.ef-row-exit').forEach(row => row.remove()) + } + + if (count > currentCount) { + for (let i = currentCount; i < count; i++) { + field.grid_fields.forEach(f => { + this.submitFields[`${handle}.${i}.${f.handle}`] = this.getFieldDefaultValue(f) + }) + this.cloneGridRow(handle, i, true) + } + } else { + for (let i = currentCount - 1; i >= count; i--) { + field.grid_fields.forEach(f => { + delete this.submitFields[`${handle}.${i}.${f.handle}`] + }) + const row = container?.querySelector(`[data-grid-row="${i}"]`) + if (row) { + this.animateGridRowOut(row) + } + // Clear validation errors for removed rows + this.$dispatch('grid-row-removed', { handle, removedIndex: i }) + } + } + + this.submitFields[countKey] = count + }, + + /** + * Animate a grid row out: fade + translate, then collapse height. + * Skips animation for prefers-reduced-motion. Includes safety timeout + * in case animationend/transitionend never fires. + */ + animateGridRowOut(row, onComplete) { + let done = false + const finish = () => { + if (done) return + done = true + row.remove() + if (onComplete) onComplete() + } + + // Skip animation when user prefers reduced motion + if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) { + finish() + return + } + + const safetyTimeout = setTimeout(finish, 400) + + row.classList.add('ef-row-exit') + row.addEventListener('animationend', () => { + // Phase 2: smoothly collapse the space + row.style.height = row.offsetHeight + 'px' + row.style.overflow = 'hidden' + row.offsetHeight // force reflow + row.style.transition = 'height .15s ease-in, margin .15s ease-in' + row.style.height = '0' + row.style.marginBottom = '0' + row.addEventListener('transitionend', () => { + clearTimeout(safetyTimeout) + finish() + }, { once: true }) + }, { once: true }) + }, + + /** + * Initialize dynamic grid rows that react to another field's value. + */ + initDynamicGridRows(handle, controlFieldHandle) { + this.$watch( + () => this.submitFields[controlFieldHandle], + (newValue) => this.setGridRowCount(handle, newValue) + ) + + // Sync immediately in case prepopulated data changed the controlling field + this.setGridRowCount(handle, this.submitFields[controlFieldHandle]) + }, } } \ No newline at end of file diff --git a/resources/views/form/fieldtypes/_grid.antlers.html b/resources/views/form/fieldtypes/_grid.antlers.html index a2c0633..401b2f2 100644 --- a/resources/views/form/fieldtypes/_grid.antlers.html +++ b/resources/views/form/fieldtypes/_grid.antlers.html @@ -1,4 +1,14 @@ {{# Grid Field Template - Uses template cloning approach #}} +
{{ display | trans }} @@ -35,10 +45,18 @@
diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php index f5ac002..95ce01e 100644 --- a/src/ServiceProvider.php +++ b/src/ServiceProvider.php @@ -232,6 +232,14 @@ public function addConfigOptions() 'display' => 'Fixed rows', 'instructions' => 'Render exactly this many rows with no add/remove buttons. Overrides min/max.', ], + 'dynamic_rows_field' => [ + 'type' => 'text', + 'display' => 'Dynamic rows field', + 'instructions' => 'Handle of a field whose value controls the number of grid rows. The grid will behave as fixed (no add/remove buttons).', + 'unless' => [ + 'fixed_rows' => 'not null', + ], + ], ]); } } diff --git a/src/Tags/Concerns/HandlesFields.php b/src/Tags/Concerns/HandlesFields.php index 08126be..093358c 100644 --- a/src/Tags/Concerns/HandlesFields.php +++ b/src/Tags/Concerns/HandlesFields.php @@ -6,8 +6,6 @@ trait HandlesFields { - protected array $gridRowOverrides = []; - protected static ?\Illuminate\Support\Collection $commonFieldOptionsCache = null; private const REQUIRED_VALIDATION_KEYS = [ @@ -36,13 +34,6 @@ protected function getCachedCommonFieldOptions(): \Illuminate\Support\Collection return self::$commonFieldOptionsCache; } - /** - * Set grid row count overrides from the grid_rows tag parameter. - */ - protected function setGridRowOverrides(array $overrides): void - { - $this->gridRowOverrides = $overrides; - } /** * Process a field to extract needed properties and add optional flag. * @@ -92,14 +83,16 @@ protected function processField($field, ?string $parentHandle = null): array $fieldData['min_rows'] = $fieldData['min_rows'] ?? 1; $fieldData['max_rows'] = $fieldData['max_rows'] ?? null; $fieldData['fixed_rows'] = $fieldData['fixed_rows'] ?? null; - $fieldData['is_fixed'] = ! empty($fieldData['fixed_rows']); - $fieldData['add_row_text'] = $fieldData['add_row'] ?? __('Add Row'); + $fieldData['dynamic_rows_field'] = $fieldData['dynamic_rows_field'] ?? null; - // Apply grid_rows tag parameter override - if (isset($this->gridRowOverrides[$field->handle()])) { - $fieldData['fixed_rows'] = (int) $this->gridRowOverrides[$field->handle()]; - $fieldData['is_fixed'] = true; + // fixed_rows takes precedence over dynamic_rows_field + if (! empty($fieldData['fixed_rows'])) { + $fieldData['dynamic_rows_field'] = null; } + + $fieldData['is_fixed'] = ! empty($fieldData['fixed_rows']) || ! empty($fieldData['dynamic_rows_field']); + $fieldData['add_row_text'] = $fieldData['add_row'] ?? __('Add Row'); + } // Add parent handle for nested fields (used in templates for name prefixing) diff --git a/src/Tags/EasyForm.php b/src/Tags/EasyForm.php index 8222381..14d014b 100644 --- a/src/Tags/EasyForm.php +++ b/src/Tags/EasyForm.php @@ -42,11 +42,6 @@ public function index(): string $form = $this->getForm(); $blueprint = $form->blueprint(); - $gridRows = $this->params->get('grid_rows', []); - if (! empty($gridRows) && is_array($gridRows)) { - $this->setGridRowOverrides($gridRows); - } - $sectionsData = $this->processSections($blueprint); // If we have sections, collect fields from them instead of reprocessing diff --git a/tests/Feature/FieldTypes/GridFieldTest.php b/tests/Feature/FieldTypes/GridFieldTest.php index 317f1dc..8c771ad 100644 --- a/tests/Feature/FieldTypes/GridFieldTest.php +++ b/tests/Feature/FieldTypes/GridFieldTest.php @@ -183,7 +183,7 @@ // x-init initializes with min_rows count expect($output) - ->toContain("|| 3"); + ->toContain('|| 3'); }); test('grid field respects fixed_rows config', function () { @@ -418,58 +418,56 @@ ->toContain('id="grid_instance_sidebar_items___INDEX___name"'); }); -test('grid_rows parameter overrides fixed_rows and renders correct count', function () { - createTestForm('grid_rows_override', [ +test('grid field required sub-fields are not marked optional', function () { + createTestForm('grid_required', [ [ 'handle' => 'passengers', 'field' => [ 'type' => 'grid', 'display' => 'Passengers', + 'validate' => 'required', 'fields' => [ - ['handle' => 'name', 'field' => ['type' => 'text', 'display' => 'Name']], + ['handle' => 'name', 'field' => [ + 'type' => 'text', + 'display' => 'Name', + 'validate' => 'required', + ]], ], ], ], ]); - $output = renderEasyFormTag('grid_rows_override', [ - 'grid_rows' => ['passengers' => 4], - ]); + $output = renderEasyFormTag('grid_required'); - // fixed_rows should be set to 4 via the override + // Neither the grid field nor the sub-field should show "(Optional)" expect($output) - ->toContain('|| 4') - ->not->toContain("addGridRow('passengers')") - ->not->toContain("removeGridRow('passengers'"); + ->not->toContain('Optional'); }); -test('grid_rows parameter hides add and remove buttons', function () { - createTestForm('grid_rows_buttons', [ +test('grid field optional sub-fields are marked optional', function () { + createTestForm('grid_optional', [ [ - 'handle' => 'items', + 'handle' => 'passengers', 'field' => [ 'type' => 'grid', - 'display' => 'Items', + 'display' => 'Passengers', 'fields' => [ - ['handle' => 'value', 'field' => ['type' => 'text', 'display' => 'Value']], + ['handle' => 'nickname', 'field' => [ + 'type' => 'text', + 'display' => 'Nickname', + ]], ], ], ], ]); - $output = renderEasyFormTag('grid_rows_buttons', [ - 'grid_rows' => ['items' => 3], - ]); + $output = renderEasyFormTag('grid_optional'); - expect($output) - ->not->toContain("addGridRow('items')") - ->not->toContain("removeGridRow('items'") - ->not->toContain("canAddGridRow('items')") - ->not->toContain("canRemoveGridRow('items')"); + expect($output)->toContain('Optional'); }); -test('grid_rows parameter does not affect unrelated grid fields', function () { - createTestForm('grid_rows_multi', [ +test('grid field sub-fields display error messages using dot notation', function () { + createTestForm('grid_errors', [ [ 'handle' => 'passengers', 'field' => [ @@ -477,41 +475,49 @@ 'display' => 'Passengers', 'fields' => [ ['handle' => 'name', 'field' => ['type' => 'text', 'display' => 'Name']], + ['handle' => 'email', 'field' => ['type' => 'text', 'input_type' => 'email', 'display' => 'Email']], ], ], ], + ]); + + $output = renderEasyFormTag('grid_errors'); + + // Error display should use __INDEX__ dot notation keys + expect($output) + ->toContain("errors['passengers.__INDEX__.name']") + ->toContain("errors['passengers.__INDEX__.email']"); +}); + +test('grid field sub-fields have labels linked to inputs', function () { + createTestForm('grid_labels', [ [ - 'handle' => 'luggage', + 'handle' => 'items', 'field' => [ 'type' => 'grid', - 'display' => 'Luggage', + 'display' => 'Items', 'fields' => [ - ['handle' => 'description', 'field' => ['type' => 'text', 'display' => 'Description']], + ['handle' => 'title', 'field' => ['type' => 'text', 'display' => 'Title']], ], ], ], ]); - $output = renderEasyFormTag('grid_rows_multi', [ - 'grid_rows' => ['passengers' => 5], - ]); - - // passengers grid should be fixed at 5 rows - expect($output)->toContain('|| 5'); + $output = renderEasyFormTag('grid_labels'); - // luggage grid should still have add/remove buttons (not fixed) + // Labels and inputs should use matching IDs with __INDEX__ placeholder expect($output) - ->toContain("addGridRow('luggage')") - ->toContain("removeGridRow('luggage'"); + ->toContain('for="grid_labels_items___INDEX___title"') + ->toContain('id="grid_labels_items___INDEX___title"'); }); -test('grid_rows parameter works alongside prepopulated_data', function () { - createTestForm('grid_rows_prepop', [ +test('grid field has accessible container with legend', function () { + createTestForm('grid_a11y', [ [ - 'handle' => 'guests', + 'handle' => 'passengers', 'field' => [ 'type' => 'grid', - 'display' => 'Guests', + 'display' => 'Passengers', 'fields' => [ ['handle' => 'name', 'field' => ['type' => 'text', 'display' => 'Name']], ], @@ -519,153 +525,214 @@ ], ]); - $output = renderEasyFormTag('grid_rows_prepop', [ - 'grid_rows' => ['guests' => 2], - 'prepopulated_data' => ['guests.0.name' => 'Alice'], - ]); + $output = renderEasyFormTag('grid_a11y'); - // Grid should be fixed at 2 rows + // The grid container should be a fieldset with an aria-label and sr-only legend expect($output) - ->toContain('|| 2') - ->not->toContain("addGridRow('guests')"); - - // Prepopulated data should be present in the rendered output (passed as JSON to Alpine) - expect($output)->toContain('Alice'); + ->toContain('
toContain('Passengers'); }); -test('grid field required sub-fields are not marked optional', function () { - createTestForm('grid_required', [ +test('grid field dispatches grid-row-removed event on row removal', function () { + createTestForm('grid_dispatch', [ [ - 'handle' => 'passengers', + 'handle' => 'rows', 'field' => [ 'type' => 'grid', - 'display' => 'Passengers', - 'validate' => 'required', + 'display' => 'Rows', 'fields' => [ - ['handle' => 'name', 'field' => [ - 'type' => 'text', - 'display' => 'Name', - 'validate' => 'required', - ]], + ['handle' => 'value', 'field' => ['type' => 'text', 'display' => 'Value']], ], ], ], ]); - $output = renderEasyFormTag('grid_required'); + $output = renderEasyFormTag('grid_dispatch'); - // Neither the grid field nor the sub-field should show "(Optional)" + // The form component should listen for the grid-row-removed event expect($output) - ->not->toContain('Optional'); + ->toContain('x-on:grid-row-removed="handleGridRowRemoved($event.detail)"'); }); -test('grid field optional sub-fields are marked optional', function () { - createTestForm('grid_optional', [ +test('dynamic_rows_field hides add and remove buttons', function () { + createTestForm('grid_dynamic', [ + [ + 'handle' => 'num_passengers', + 'field' => [ + 'type' => 'integer', + 'display' => 'Number of Passengers', + ], + ], [ 'handle' => 'passengers', 'field' => [ 'type' => 'grid', 'display' => 'Passengers', + 'dynamic_rows_field' => 'num_passengers', 'fields' => [ - ['handle' => 'nickname', 'field' => [ - 'type' => 'text', - 'display' => 'Nickname', - ]], + ['handle' => 'name', 'field' => ['type' => 'text', 'display' => 'Name']], ], ], ], ]); - $output = renderEasyFormTag('grid_optional'); + $output = renderEasyFormTag('grid_dynamic'); - expect($output)->toContain('Optional'); + // is_fixed should be true, so no add/remove buttons + expect($output) + ->not->toContain("addGridRow('passengers')") + ->not->toContain("removeGridRow('passengers'") + ->not->toContain("canAddGridRow('passengers')") + ->not->toContain("canRemoveGridRow('passengers')"); }); -test('grid field sub-fields display error messages using dot notation', function () { - createTestForm('grid_errors', [ +test('dynamic_rows_field passes initDynamicGridRows to template', function () { + createTestForm('grid_dynamic_init', [ [ - 'handle' => 'passengers', + 'handle' => 'count', + 'field' => [ + 'type' => 'integer', + 'display' => 'Count', + ], + ], + [ + 'handle' => 'rows', 'field' => [ 'type' => 'grid', - 'display' => 'Passengers', + 'display' => 'Rows', + 'dynamic_rows_field' => 'count', 'fields' => [ - ['handle' => 'name', 'field' => ['type' => 'text', 'display' => 'Name']], - ['handle' => 'email', 'field' => ['type' => 'text', 'input_type' => 'email', 'display' => 'Email']], + ['handle' => 'value', 'field' => ['type' => 'text', 'display' => 'Value']], ], ], ], ]); - $output = renderEasyFormTag('grid_errors'); + $output = renderEasyFormTag('grid_dynamic_init'); - // Error display should use __INDEX__ dot notation keys expect($output) - ->toContain("errors['passengers.__INDEX__.name']") - ->toContain("errors['passengers.__INDEX__.email']"); + ->toContain("initDynamicGridRows('rows', 'count')"); }); -test('grid field sub-fields have labels linked to inputs', function () { - createTestForm('grid_labels', [ +test('dynamic_rows_field uses controlling field value in x-init', function () { + createTestForm('grid_dynamic_xinit', [ + [ + 'handle' => 'num_items', + 'field' => [ + 'type' => 'integer', + 'display' => 'Number of Items', + ], + ], [ 'handle' => 'items', 'field' => [ 'type' => 'grid', 'display' => 'Items', + 'dynamic_rows_field' => 'num_items', 'fields' => [ - ['handle' => 'title', 'field' => ['type' => 'text', 'display' => 'Title']], + ['handle' => 'name', 'field' => ['type' => 'text', 'display' => 'Name']], ], ], ], ]); - $output = renderEasyFormTag('grid_labels'); + $output = renderEasyFormTag('grid_dynamic_xinit'); - // Labels and inputs should use matching IDs with __INDEX__ placeholder expect($output) - ->toContain('for="grid_labels_items___INDEX___title"') - ->toContain('id="grid_labels_items___INDEX___title"'); + ->toContain("parseInt(submitFields['num_items'])"); }); -test('grid field has accessible container with legend', function () { - createTestForm('grid_a11y', [ +test('fixed_rows takes precedence over dynamic_rows_field', function () { + createTestForm('grid_fixed_wins', [ + [ + 'handle' => 'count', + 'field' => [ + 'type' => 'integer', + 'display' => 'Count', + ], + ], + [ + 'handle' => 'rows', + 'field' => [ + 'type' => 'grid', + 'display' => 'Rows', + 'fixed_rows' => 3, + 'dynamic_rows_field' => 'count', + 'fields' => [ + ['handle' => 'value', 'field' => ['type' => 'text', 'display' => 'Value']], + ], + ], + ], + ]); + + $output = renderEasyFormTag('grid_fixed_wins'); + + // fixed_rows is set, so dynamic behavior should not appear + expect($output) + ->toContain('|| 3') + ->not->toContain('initDynamicGridRows'); +}); + +test('dynamic_rows_field works when controlling field is defined after grid', function () { + createTestForm('grid_field_order', [ [ 'handle' => 'passengers', 'field' => [ 'type' => 'grid', 'display' => 'Passengers', + 'dynamic_rows_field' => 'num_passengers', 'fields' => [ ['handle' => 'name', 'field' => ['type' => 'text', 'display' => 'Name']], ], ], ], + [ + 'handle' => 'num_passengers', + 'field' => [ + 'type' => 'integer', + 'display' => 'Number of Passengers', + ], + ], ]); - $output = renderEasyFormTag('grid_a11y'); + $output = renderEasyFormTag('grid_field_order'); - // The grid container should be a fieldset with an aria-label and sr-only legend + // Should still render dynamic grid behavior regardless of field order expect($output) - ->toContain('
toContain('Passengers'); + ->toContain("initDynamicGridRows('passengers', 'num_passengers')") + ->toContain("parseInt(submitFields['num_passengers'])") + ->not->toContain("addGridRow('passengers')"); }); -test('grid field dispatches grid-row-removed event on row removal', function () { - createTestForm('grid_dispatch', [ +test('dynamic_rows_field works with prepopulated_data', function () { + createTestForm('grid_dynamic_prepop', [ [ - 'handle' => 'rows', + 'handle' => 'count', + 'field' => [ + 'type' => 'integer', + 'display' => 'Count', + ], + ], + [ + 'handle' => 'items', 'field' => [ 'type' => 'grid', - 'display' => 'Rows', + 'display' => 'Items', + 'dynamic_rows_field' => 'count', 'fields' => [ - ['handle' => 'value', 'field' => ['type' => 'text', 'display' => 'Value']], + ['handle' => 'name', 'field' => ['type' => 'text', 'display' => 'Name']], ], ], ], ]); - $output = renderEasyFormTag('grid_dispatch'); + $output = renderEasyFormTag('grid_dynamic_prepop', [ + 'prepopulated_data' => ['count' => 3, 'items.0.name' => 'Alice'], + ]); - // The form component should listen for the grid-row-removed event + // Should include prepopulated data and dynamic grid setup expect($output) - ->toContain('x-on:grid-row-removed="handleGridRowRemoved($event.detail)"'); + ->toContain('Alice') + ->toContain("initDynamicGridRows('items', 'count')"); });