@ebrains/vue 0.6.0-alpha.0 → 0.8.0-alpha.0

package/{eds-input_7.entry-Bo9-yfaP.js → eds-tabs.entry-2CrdvmEM.mjs}

@@ -1,9 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index-DvG3cC-8.js"),o=require("./toastManager-d9eee791-DvR_vUPI.js"),s=class{constructor(e){n.registerInstance(this,e),this.changeEvent=n.createEvent(this,"changeEvent",7),this.handleInput=i=>{const r=i.target;this.innerVal=r.value,this.maxLength&&this.type==="textarea"&&(this.maxLengthReached=r.value.length>=this.maxLength),this.changeEvent.emit(i)},this.name=void 0,this.inputId=void 0,this.placeholder=void 0,this.disabled=!1,this.hasMessage=!1,this.error=!1,this.checked=void 0,this.type="text",this.required=!1,this.value=void 0,this.icon=void 0,this.maxLength=void 0,this.options=[],this.extraClass=void 0,this.innerVal="",this.maxLengthReached=!1}onValueChanged(e){this.innerVal=e}componentWillLoad(){this.value?this.innerVal=this.value:this.type==="select"&&this.options.length>0&&(this.innerVal=this.options[0].value)}getInputElement(){return this.el.querySelector("input")}render(){const e=!!this.icon,i=this.hasMessage||this.error?`${this.name}-error`:"";return n.h("div",{key:"e67c7566fe5a1574d6ff0fff61178b163c5881f9",class:"relative flex items-center"},this.type==="textarea"?n.h("textarea",{id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.innerVal.toString(),required:this.required,disabled:this.disabled,class:`min-h-80 input input-textarea ${e?"input-with-icon":""} ${this.error?"input-error":""} ${this.extraClass}`,"aria-invalid":this.error?"true":"false","aria-describedby":i,maxlength:this.maxLength,onInput:this.handleInput,onChange:this.handleInput}):this.type==="select"?n.h("select",{id:this.inputId||this.name,name:this.name,required:this.required,disabled:this.disabled,class:`input input-select ${this.error?"input-error":""} ${this.extraClass}`,"aria-invalid":this.error?"true":"false","aria-describedby":i,onInput:this.handleInput,onChange:this.handleInput},this.options.map(r=>n.h("option",{value:r.value,selected:r.value===this.innerVal,key:r.value},r.label))):n.h("input",{id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.innerVal.toString(),required:this.required,disabled:this.disabled,type:this.type,checked:["radio","checkbox"].includes(this.type)?this.checked:void 0,class:`
-              ${this.extraClass||""} 
-              input ${this.type==="radio"?"input-radio":this.type==="checkbox"?"input-checkbox":""}
-              ${e&&this.type!=="radio"&&this.type!=="checkbox"?"input-icon pl-36":""} 
-              ${this.error?"input-error":""}
-              `,"aria-invalid":this.error?"true":"false","aria-describedby":i,maxlength:this.maxLength,onInput:this.handleInput,onChange:this.handleInput}),this.maxLength&&this.type==="textarea"&&n.h("span",{key:"35bc563715e65073898259d12b4ef2c467b14439",class:`input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached?"input-counter-error":""}`},this.maxLength),this.icon&&n.h("eds-icon-wrapper",{key:"54cab667a1b8b1bb906c2359cdbd2fb23171ba8b",class:`absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled,"text-lightest"}`,icon:this.icon}))}get el(){return n.getElement(this)}static get watchers(){return{value:["onValueChanged"]}}},a=`@font-face {
+import { r as t, c as o, h as r, g as d } from "./index-DeCYK9qM.mjs";
+import { s } from "./analytics-44b1416b-3vYuu4Xs.mjs";
+import { c as a } from "./index-39c58238-BwYCDOHZ.mjs";
+import { p as c } from "./sharedUtils-a550989c-Ci3Tx3jc.mjs";
+const g = `@font-face {
   font-family: "Inter";
   font-weight: 100 900;
   font-display: swap;
@@ -647,9 +646,6 @@ video {
     --spacing-space-03: 7.5rem;
   }
 }
-.pt-space-04 {
-  padding-top: var(--spacing-space-04);
-}
 :root {
   --sans: Inter, Helvetica, Arial, sans-serif;
   --f-heading-01-fontFamily: var(--sans);
@@ -1008,10 +1004,70 @@ video {
   grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
   grid-gap: var(--inner-gutter);
 }
+.grid-col-span-2 {
+  --container-grid-columns: 2;
+  grid-column: span 2 / span 2;
+}
+.grid-col-span-3 {
+  --container-grid-columns: 3;
+  grid-column: span 3 / span 3;
+}
+.grid-col-span-4 {
+  --container-grid-columns: 4;
+  grid-column: span 4 / span 4;
+}
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
+}
+.grid-col-span-8 {
+  --container-grid-columns: 8;
+  grid-column: span 8 / span 8;
+}
+.grid-col-span-10 {
+  --container-grid-columns: 10;
+  grid-column: span 10 / span 10;
+}
 .grid-col-span-12 {
   --container-grid-columns: 12;
   grid-column: span 12 / span 12;
 }
+.grid-col-start-1 {
+  grid-column-start: 1;
+}
+.grid-col-start-2 {
+  grid-column-start: 2;
+}
+.grid-col-start-3 {
+  grid-column-start: 3;
+}
+.grid-col-start-4 {
+  grid-column-start: 4;
+}
+.grid-col-start-5 {
+  grid-column-start: 5;
+}
+.grid-col-start-6 {
+  grid-column-start: 6;
+}
+.grid-col-start-7 {
+  grid-column-start: 7;
+}
+.grid-col-start-8 {
+  grid-column-start: 8;
+}
+.grid-col-start-9 {
+  grid-column-start: 9;
+}
+.grid-col-start-10 {
+  grid-column-start: 10;
+}
+.grid-col-start-11 {
+  grid-column-start: 11;
+}
+.grid-col-start-12 {
+  grid-column-start: 12;
+}
 [class*="grid-line-"] > * {
   position: relative;
 }
@@ -1021,6 +1077,396 @@ video {
   z-index: 0;
   pointer-events: none;
 }
+.grid-cols-1[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-1[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-2[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+2)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+2)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+2)::after {
+  top: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {
+  bottom: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-3[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-3[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+3)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+3)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+3)::after {
+  top: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {
+  bottom: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-4[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-4[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+4)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+4)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+4)::after {
+  top: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {
+  bottom: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-5[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-5[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+5)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+5)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+5)::after {
+  top: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {
+  bottom: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-6[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+6)::after {
+  top: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-7[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-7[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+7)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+7)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+7)::after {
+  top: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {
+  bottom: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-8[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-8[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+8)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+8)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+8)::after {
+  top: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {
+  bottom: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-9[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-9[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+9)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+9)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+9)::after {
+  top: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {
+  bottom: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-10[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-10[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+10)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+10)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+10)::after {
+  top: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {
+  bottom: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-11[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-11[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+11)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+11)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+11)::after {
+  top: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {
+  bottom: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-12[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-12[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+12)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+12)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+12)::after {
+  top: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {
+  bottom: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {
+  bottom: 0;
+}
 @media (min-width: 750px) {
   [class*="grid-line-"] > * {
     position: relative;
@@ -5339,15 +5785,6 @@ video {
 .cols-container > .ml-0 {
   margin-left: 0;
 }
-.w-12-cols {
-  width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-}
-.cols-container > .w-12-cols {
-  width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-}
-.w-12-cols > * {
-  --container-grid-columns: 12;
-}
 .border-inside {
   position: relative;
 
@@ -5404,14 +5841,14 @@ video {
     }
   }
 .input-label {
-  font-family: var(--f-ui-03-fontFamily);
-  font-weight: var(--f-ui-03-fontWeight);
-  font-size: var(--f-ui-03-fontSize);
-  line-height: var(--f-ui-03-lineHeight);
-  letter-spacing: var(--f-ui-03-letterSpacing);
+  font-family: var(--f-ui-04-fontFamily);
+  font-weight: var(--f-ui-04-fontWeight);
+  font-size: var(--f-ui-04-fontSize);
+  line-height: var(--f-ui-04-lineHeight);
+  letter-spacing: var(--f-ui-04-letterSpacing);
 }
 .input-label b,.input-label strong {
-  font-weight: var(--f-ui-03---bold-weight, bold);
+  font-weight: var(--f-ui-04---bold-weight, bold);
 }
 .input {
   -webkit-appearance: none;
@@ -5570,6 +6007,14 @@ video {
     color: var(--red-700);
   }
 }
+input[type="range"]::-webkit-slider-thumb {
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 9999px;
+    background-color: var(--green-500);
+      -webkit-appearance: none;
+              appearance: none; /* Ensure the thumb can be styled */
+  }
 .loader {
   box-sizing: border-box;
   display: inline-block;
@@ -5664,6 +6109,24 @@ video {
       background-size: 16px 16px;
     }
   }
+.effect-bg-behind {
+  position: relative;
+}
+.effect-bg-behind::before {
+  position: absolute;
+  inset: 0rem;
+  z-index: -1;
+  --tw-content: '';
+  content: var(--tw-content);
+}
+.effect-bg-behind {
+
+    &:before {
+      background-size: calc(100% + 6px) calc(100% + 6px) !important;
+      background-position: -4px -4px !important;
+      background-repeat: no-repeat !important;
+    }
+  }
 .effect-bg-behind-link {
   position: relative;
 }
@@ -5733,6 +6196,12 @@ video {
 .bottom-0 {
   bottom: 0rem;
 }
+.bottom-20 {
+  bottom: 1.25rem;
+}
+.bottom-4 {
+  bottom: 0.25rem;
+}
 .bottom-8 {
   bottom: 0.5rem;
 }
@@ -5742,6 +6211,9 @@ video {
 .left-1\\/2 {
   left: 50%;
 }
+.left-20 {
+  left: 1.25rem;
+}
 .left-4 {
   left: 0.25rem;
 }
@@ -5751,12 +6223,18 @@ video {
 .right-0 {
   right: 0rem;
 }
+.right-20 {
+  right: 1.25rem;
+}
 .right-4 {
   right: 0.25rem;
 }
 .right-8 {
   right: 0.5rem;
 }
+.right-\\[4px\\] {
+  right: 4px;
+}
 .right-\\[6px\\] {
   right: 6px;
 }
@@ -5769,9 +6247,15 @@ video {
 .top-16 {
   top: 1rem;
 }
+.top-20 {
+  top: 1.25rem;
+}
 .top-full {
   top: 100%;
 }
+.z-0 {
+  z-index: 0;
+}
 .z-1 {
   z-index: 1;
 }
@@ -5817,6 +6301,14 @@ video {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
+.my-4 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.my-8 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .-ml-16 {
   margin-left: -1rem;
 }
@@ -6003,6 +6495,9 @@ video {
 .h-96 {
   height: 6rem;
 }
+.h-\\[85px\\] {
+  height: 85px;
+}
 .h-auto {
   height: auto;
 }
@@ -6039,23 +6534,29 @@ video {
 .min-h-full {
   min-height: 100%;
 }
-.min-h-screen {
-  min-height: 100vh;
+.w-1\\/2 {
+  width: 50%;
 }
 .w-20 {
   width: 1.25rem;
 }
+.w-24 {
+  width: 1.5rem;
+}
 .w-28 {
   width: 1.75rem;
 }
 .w-32 {
   width: 2rem;
 }
+.w-4 {
+  width: 0.25rem;
+}
 .w-44 {
   width: 2.75rem;
 }
-.w-\\[130px\\] {
-  width: 130px;
+.w-\\[200px\\] {
+  width: 200px;
 }
 .w-\\[300px\\] {
   width: 300px;
@@ -6063,6 +6564,9 @@ video {
 .w-\\[54px\\] {
   width: 54px;
 }
+.w-auto {
+  width: auto;
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -6117,6 +6621,47 @@ video {
 .resize {
   resize: both;
 }
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+.grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+.grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
@@ -6129,6 +6674,9 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -6178,6 +6726,11 @@ video {
 .gap-y-8 {
   row-gap: 0.5rem;
 }
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.0625rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.125rem * var(--tw-space-x-reverse));
@@ -6188,22 +6741,22 @@ video {
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+.space-y-16 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
 }
-.space-y-4 {
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
-.space-y-8 {
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
@@ -6333,9 +6886,6 @@ video {
 .border-transparent {
   border-color: var(--transparent);
 }
-.border-b-softer {
-  border-bottom-color: rgba(0, 0, 0, .1 );
-}
 .\\!bg-accent-dark {
   background-color: var(--green-600) !important;
 }
@@ -6345,6 +6895,10 @@ video {
 .\\!bg-strong-dark {
   background-color: var(--grey-800) !important;
 }
+.bg-\\[\\#00A595\\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 165 149 / var(--tw-bg-opacity));
+}
 .bg-accent {
   background-color: var(--green-500);
 }
@@ -6411,6 +6965,9 @@ video {
 .bg-warning {
   background-color: var(--yellow-200);
 }
+.bg-opacity-90 {
+  --tw-bg-opacity: 0.9;
+}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -6431,9 +6988,15 @@ video {
 .p-16 {
   padding: 1rem;
 }
+.p-2 {
+  padding: 0.125rem;
+}
 .p-20 {
   padding: 1.25rem;
 }
+.p-24 {
+  padding: 1.5rem;
+}
 .p-32 {
   padding: 2rem;
 }
@@ -6478,6 +7041,10 @@ video {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.px-6 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .py-1 {
   padding-top: 0.0625rem;
   padding-bottom: 0.0625rem;
@@ -6515,9 +7082,6 @@ video {
 .pb-28 {
   padding-bottom: 1.75rem;
 }
-.pb-60 {
-  padding-bottom: 3.75rem;
-}
 .pb-8 {
   padding-bottom: 0.5rem;
 }
@@ -6551,6 +7115,9 @@ video {
 .pr-4 {
   padding-right: 0.25rem;
 }
+.pr-40 {
+  padding-right: 2.5rem;
+}
 .pr-8 {
   padding-right: 0.5rem;
 }
@@ -6566,9 +7133,6 @@ video {
 .pt-32 {
   padding-top: 2rem;
 }
-.pt-40 {
-  padding-top: 2.5rem;
-}
 .pt-48 {
   padding-top: 3rem;
 }
@@ -6581,6 +7145,10 @@ video {
 .text-center {
   text-align: center;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -6591,6 +7159,9 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.lowercase {
+  text-transform: lowercase;
+}
 .\\!text-current {
   color: currentColor !important;
 }
@@ -6676,6 +7247,11 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-small {
   --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);
@@ -6696,6 +7272,13 @@ video {
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -6709,6 +7292,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-75 {
+  transition-duration: 75ms;
+}
 [class*="keyline-"] {
   position: relative;
 }
@@ -6788,6 +7374,12 @@ video {
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.before\\:effect-opacity::before {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
 @media (min-width: 750px) {
   .md\\:grid-col-span-4 {
     --container-grid-columns: 4;
@@ -6797,15 +7389,6 @@ video {
     --container-grid-columns: 6;
     grid-column: span 6 / span 6;
   }
-  .md\\:w-10-cols {
-    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-  .cols-container > .md\\:w-10-cols {
-    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-  .md\\:w-10-cols > * {
-    --container-grid-columns: 10;
-  }
 }
 @media (min-width: 900px) {
   .lg\\:grid-col-span-5 {
@@ -6819,24 +7402,6 @@ video {
   .lg\\:grid-col-start-7 {
     grid-column-start: 7;
   }
-  .lg\\:w-8-cols {
-    width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-  .cols-container > .lg\\:w-8-cols {
-    width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-  .lg\\:w-8-cols > * {
-    --container-grid-columns: 8;
-  }
-  .lg\\:w-10-cols {
-    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-  .cols-container > .lg\\:w-10-cols {
-    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-  .lg\\:w-10-cols > * {
-    --container-grid-columns: 10;
-  }
 }
 .even\\:bg-inverse-softer:nth-child(even) {
   background-color: rgba(255, 255, 255, .15);
@@ -6904,11 +7469,6 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.focus-visible\\:ring:focus-visible {
-  --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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
 .disabled\\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -6939,6 +7499,9 @@ video {
 .aria-disabled\\:line-through[aria-disabled="true"] {
   text-decoration-line: line-through;
 }
+.aria-disabled\\:no-underline[aria-disabled="true"] {
+  text-decoration-line: none;
+}
 .aria-disabled\\:shadow-none[aria-disabled="true"] {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -7060,6 +7623,30 @@ video {
 .before\\:bg-gradient-y::before {
     background: linear-gradient(to bottom, transparent, ease-in-out, black);
   }
+.before\\:bg-gradient-01-top::before {
+    background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);
+  }
+.before\\:bg-gradient-01-bottom::before {
+    background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);
+  }
+.before\\:bg-gradient-02-top::before {
+    background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);
+  }
+.before\\:bg-gradient-02-bottom::before {
+    background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);
+  }
+.before\\:bg-gradient-03-top::before {
+    background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);
+  }
+.before\\:bg-gradient-03-bottom::before {
+    background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);
+  }
+.before\\:bg-gradient-04-top::before {
+    background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);
+  }
+.before\\:bg-gradient-04-bottom::before {
+    background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);
+  }
 .hover\\:before\\:opacity-100:hover::before {
   opacity: 1;
 }
@@ -7083,15 +7670,32 @@ video {
   }
 }
 @media (min-width: 750px) {
+  .md\\:left-1\\/2 {
+    left: 50%;
+  }
   .md\\:flex {
     display: flex;
   }
   .md\\:hidden {
     display: none;
   }
+  .md\\:w-\\[300px\\] {
+    width: 300px;
+  }
+  .md\\:-translate-x-1\\/2 {
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .md\\:-translate-y-1\\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
   .md\\:gap-y-12 {
     row-gap: 0.75rem;
   }
+  .md\\:p-48 {
+    padding: 3rem;
+  }
   .md\\:pt-28 {
     padding-top: 1.75rem;
   }
@@ -7115,8 +7719,8 @@ video {
   .lg\\:hidden {
     display: none;
   }
-  .lg\\:w-\\[150px\\] {
-    width: 150px;
+  .lg\\:w-\\[500px\\] {
+    width: 500px;
   }
   .lg\\:w-auto {
     width: auto;
@@ -7156,12 +7760,103 @@ video {
   }
 }
 
-input[type="range"]::-webkit-slider-thumb {
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 9999px;
-  background-color: var(--green-500);
-    -webkit-appearance: none;
-            appearance: none; /* Ensure the thumb can be styled */
-}
-`,c=a,d=class{constructor(e){n.registerInstance(this,e),this.name=void 0,this.inputId=void 0,this.placeholder=void 0,this.disabled=!1,this.onChange=void 0,this.onInput=void 0,this.type="text",this.required=!1,this.label=void 0,this.hint=void 0,this.icon=void 0,this.link=void 0,this.message=void 0,this.error=!1,this.checked=void 0,this.errorMessage=void 0,this.value=void 0,this.maxLength=void 0,this.options=void 0}get parsedOptions(){if(Array.isArray(this.options))return this.options;if(typeof this.options=="string")try{return JSON.parse(this.options)}catch{return console.warn("Invalid options format"),[]}return[]}render(){const e={name:this.name,id:this.inputId,placeholder:this.placeholder,disabled:this.disabled,onChange:this.onChange,onInput:this.onInput,type:this.type,required:this.required,value:this.value,error:this.error,icon:this.icon,checked:this.checked};return n.h("div",{key:"6c2e228bc3940212ad4df6ed99bdd69b99342afb",class:"space-y-8"},this.type==="checkbox"||this.type==="radio"?this.parsedOptions.length>0?n.h("fieldset",{class:"space-y-4 mt-8"},n.h("div",{class:"flex justify-between"},this.label&&n.h("eds-input-label",{name:this.inputId||this.name,label:this.label,required:this.required}),this.hint&&n.h("p",{id:`${this.name}-hint`,class:"f-ui-05 text-lighter mt-8 ml-8"},this.hint)),this.parsedOptions.map(i=>n.h("div",{class:"flex items-center gap-x-2",key:i.value},n.h("eds-input",Object.assign({},e,{value:i.value})),n.h("eds-input-label",{name:`${this.name}-${i.value}`,label:i.label})))):n.h("div",{class:"flex items-center gap-x-8"},n.h("eds-input",Object.assign({},e)),this.label&&n.h("eds-input-label",{name:this.inputId||this.name,label:this.label,disabled:this.disabled,required:this.required})):n.h("div",null,n.h("div",{class:"flex justify-between"},this.label&&n.h("eds-input-label",{name:this.inputId||this.name,label:this.label,disabled:this.disabled,required:this.required}),this.hint&&n.h("p",{id:`${this.name}-hint`,class:"f-ui-05 text-lighter mt-8 ml-8"},this.hint)),this.type==="select"?n.h("eds-input-select",Object.assign({},e,{options:this.parsedOptions})):this.type==="file"?n.h("input",{type:"file",id:this.inputId||this.name,name:this.name,onChange:this.onChange,disabled:this.disabled,required:this.required}):this.type==="search"?n.h("eds-input-search",{name:"search-box"}):this.type==="range"?(()=>{var i,r,l;const t=this.parsedOptions;return n.h("eds-input-range",{min:(i=t[0])===null||i===void 0?void 0:i.value,max:(r=t[1])===null||r===void 0?void 0:r.value,step:(l=t[2])===null||l===void 0?void 0:l.value,name:"range-slider"})})():n.h("eds-input",Object.assign({},e))),n.h("eds-input-footer",{key:"16f2dd9061fc779b081c973e25d1bf9fb26fcf8b",id:`${this.name}-footer`,name:this.name,message:this.message,"error-message":this.errorMessage,error:this.error,link:this.link}))}};d.style=c;const g=class{constructor(e){n.registerInstance(this,e),this.name=void 0,this.errorMessage=void 0,this.message=void 0,this.error=!1,this.link=void 0}render(){return n.h("div",{key:"c088f6c9bf4c3ca1efce1a1ff41ece8d4f8a6756",class:"space-y-4"},this.error&&this.errorMessage&&n.h("div",{key:"7404a329f2b5da7f9444f986178c5e4dbbe838ad",id:`error_${this.name}`,class:"text-error flex items-center"},n.h("eds-icon-wrapper",{key:"8f9d83b1d8dda824cac17d9c2ce3cb6cc5a58945",icon:"warning"}),n.h("p",{key:"f223076bc18088e264b4888d18bb9673f803d875",class:"f-ui-04 ml-4",innerHTML:this.errorMessage})),this.message&&n.h("p",{key:"40bdbc35ba4985802177d7f9b2c44f893e4cb40c",id:`desc_${this.name}`,class:"f-ui-05 text-lighter",innerHTML:this.message}),this.link&&n.h("a",{key:"e6297a49f63ce2ab14bac8df0186fb42fab4416d",href:this.link.url,class:"f-ui-05 effect-color hover:text-lighter underline underline-offset-4"},this.link.label))}},x=class{constructor(e){n.registerInstance(this,e),this.label=void 0,this.name=void 0,this.required=!1,this.disabled=!1}render(){return n.h("label",{key:"38be7206acfad300657a99218c3138e91069d710",htmlFor:this.name,class:`input-label ${this.disabled?"text-lighter":""}`},this.label,this.required&&n.h("span",{key:"1e80610f66d51a1c46918086bb5b5153c0e35a3c"},n.h("span",{key:"83d15d62c0539f1847746b4a2b9c9971b4852da8","aria-hidden":"true"},"*"),n.h("span",{key:"3f45f5a436c41cf7e55570a2abe8844c8daa7525",class:"sr-only"},"required")))}},h=class{constructor(e){n.registerInstance(this,e),this.onInput=i=>{const r=i.target;this.sliderVal=parseInt(r.value,10)},this.name=void 0,this.inputId="range",this.disabled=!1,this.required=!1,this.min=0,this.max=100,this.step=1,this.sliderVal=this.max%2===0?this.max/2:Math.ceil(this.max/2)}componentDidLoad(){this.inputElement=this.el.querySelector("input")}async getInputElement(){return this.inputElement}render(){return n.h("div",{key:"6a70b857cfbeb152e6f099b6dfc91cc9fec5bf11",class:"relative flex flex-col items-start space-y-2"},n.h("input",{key:"da4c0158b1d33804404f4373b3c55c53b5b2f53b",id:this.inputId||this.name,name:this.name,min:this.min,max:this.max,step:this.step,value:this.sliderVal,required:this.required,disabled:this.disabled,type:"range",class:"w-full py-6 input",onInput:this.onInput}),n.h("p",{key:"66bc2e755e4eb38015e32441599a9f9bade7c679",id:`desc_${this.name}`,class:"block f-ui-05 text-lighter"},"Current value: ",this.sliderVal))}get el(){return n.getElement(this)}},b=class{constructor(e){n.registerInstance(this,e),this.onInput=i=>{console.log("on input:",i)},this.onChange=i=>{console.log("on change:",i.target.value)},this.name=void 0,this.inputId="search",this.placeholder="Search...",this.value=void 0,this.disabled=!1,this.required=!1}componentDidLoad(){this.inputElement=this.el.querySelector("input")}async getInputElement(){return this.inputElement}render(){return n.h("div",{key:"df7ee546beed6eedfba5a19e0fdf349d9aaece90",class:"relative flex items-center"},n.h("eds-icon-wrapper",{key:"4663fdd0a9ba4eace47dc90f9c7f50fc2e6f7925",icon:"search",class:"absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest"}),n.h("input",{key:"e3e72f3dea068cbab3d398de36dd09e4a7f1ce93",id:this.inputId||this.name,name:this.name,placeholder:this.placeholder,value:this.value||"",required:this.required,disabled:this.disabled,type:"search",class:"search-input w-full py-6 input input-icon pl-36",onInput:this.onInput,onChange:this.onChange}))}get el(){return n.getElement(this)}},f=class{constructor(e){n.registerInstance(this,e),this.changeEvent=n.createEvent(this,"changeEvent",7),this.handleChange=i=>{const r=i.target;this.changeEvent.emit(r.value)},this.inputId=void 0,this.name=void 0,this.placeholder=void 0,this.disabled=!1,this.hasMessage=!1,this.error=!1,this.required=!1,this.options=[],this.labelKey="label",this.valueKey="value",this.value=void 0,this.dynamicOptions=[],this.loading=!1,this.dynamicValueKey="value",this.dynamicLabelKey="label",this.hasFetched=!1}componentWillLoad(){this.loadOptions()}async loadOptions(){if(this.options&&this.options.length>0&&this.options[0].endpoint){if(this.hasFetched)return;const e=this.options[0],i=e.endpoint;this.dynamicValueKey=e.value||"value",this.dynamicLabelKey=e.label||"label",this.loading=!0;try{const r=await fetch(i);r.ok||o.toast.show(`<eds-input-select> HTTP error! Status: ${r.status}`,"error");const l=await r.json();this.dynamicOptions=l,this.hasFetched=!0}catch(r){o.toast.show(`<eds-input-select> Error fetching dynamic options ${r}`,"error")}finally{this.loading=!1}}else this.dynamicOptions=this.options,this.dynamicValueKey=this.valueKey,this.dynamicLabelKey=this.labelKey}getValueByPath(e,i){return i.split(".").reduce((r,l)=>r&&r[l],e)}render(){return n.h("div",{key:"c1469a270fa5e775ac4d17f1c7e259d02477d7a2",class:"relative"},n.h("select",{key:"3aab6ec60d386e51ce27c1cfc26059132d96957f",id:this.inputId||this.name,name:this.name,class:`input invalid:text-lightest pr-32 ${this.error?"input-error":""}`,"aria-invalid":this.error?"true":"false","aria-describedby":this.hasMessage||this.error?`${this.name}-error`:"",disabled:this.disabled||this.loading,required:this.required,onChange:this.handleChange},n.h("option",{key:"ee3aa20ed1b99bddd7bafa3aac43f3c06db07b8f",value:"",disabled:!0,hidden:!0},this.loading?"Loading options...":`Please select ${this.name}`),this.dynamicOptions.map((e,i)=>n.h("option",{key:i,value:this.getValueByPath(e,this.dynamicValueKey)},this.getValueByPath(e,this.dynamicLabelKey)))),n.h("span",{key:"7e70051ac49efd053f00521b51ad19e88cf5cdb7",class:`bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled||this.loading?"text-lightest bg-transparent":""}`},n.h("eds-icon-wrapper",{key:"2ef2d0d744216a1f931ac0bfe1058f54c9af4402",class:"w-20 h-20",icon:"chevron-right"})))}static get watchers(){return{options:["loadOptions"]}}};exports.eds_input=s;exports.eds_input_field=d;exports.eds_input_footer=g;exports.eds_input_label=x;exports.eds_input_range=h;exports.eds_input_search=b;exports.eds_input_select=f;
+`, x = g, b = class {
+  constructor(n) {
+    t(this, n), this.tab = o(this, "tab", 7), this.tabCva = a([
+      "relative px-16 py-12",
+      "f-ui-03 whitespace-nowrap",
+      "effect-color",
+      "focus-visible:text-default hover:text-default",
+      "border-2",
+      "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0",
+      "outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100"
+    ], {
+      variants: {
+        position: {
+          left: "rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16",
+          right: "rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16",
+          center: "",
+          first: "rounded-t-lg"
+        },
+        active: {
+          false: "text-lighter bg-dark hover:bg-darker border-softest",
+          true: [
+            "bg-default text-default z-99",
+            "rounded-t-lg",
+            "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default",
+            "border-[#d2d2d2]"
+          ]
+        }
+      }
+    }), this.id = void 0, this.navAriaLabel = "Tabs", this.tabs = void 0, this.parsedTabs = [], this.activeIndex = -1;
+  }
+  componentWillLoad() {
+    this.parseTabs(), this.setActiveIndex(), this.tab.emit({ tabId: this.id, index: 0 });
+  }
+  /**
+   * Parses the `links` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed link objects
+   */
+  /**
+   * Parses the `links` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed link objects
+   */
+  parseTabs() {
+    this.parsedTabs = c(this.tabs);
+  }
+  componentDidLoad() {
+    this.scrollToActiveTab();
+  }
+  setActiveIndex() {
+    this.activeIndex = this.parsedTabs.findIndex((n) => n.active);
+  }
+  scrollToActiveTab() {
+    var n;
+    const e = (n = this.tabContainer) === null || n === void 0 ? void 0 : n.querySelector("[data-tab-active]");
+    e && setTimeout(() => {
+      e.scrollIntoView({
+        inline: "center",
+        block: "nearest"
+      });
+    }, 316);
+  }
+  getTabOptions(n, e) {
+    const i = n ? "center" : this.activeIndex === -1 && e === 0 ? "first" : e < this.activeIndex ? "left" : "right";
+    return Object.assign({ class: this.tabCva({
+      active: n,
+      position: i
+    }), style: {
+      zIndex: `${n ? this.parsedTabs.length + 99 : i === "left" ? e : this.parsedTabs.length + 1 - e}`
+    } }, n ? { "data-tab-active": "true" } : {});
+  }
+  handleTabClick(n, e) {
+    this.activeIndex = n, this.parsedTabs = this.parsedTabs.map((i, l) => Object.assign(Object.assign({}, i), { active: l === n })), this.tab.emit({ tabId: this.id, index: n, name: e }), s({
+      category: "ui-component",
+      tag: this.el.tagName.toLowerCase(),
+      name: (e == null ? void 0 : e.toLowerCase()) || "",
+      action: "click"
+    });
+  }
+  render() {
+    return r("div", { key: "217bdc60c3b3089fb3e16e4b18214b3ed4096118", id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, r("div", { key: "c8f10440cbc52e4b6c93c8512e011da343290e4b", class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, r("nav", { key: "cc8375d321a7116dcda08a0174ad941382d0ba43", ref: (n) => this.tabContainer = n, class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((n, e) => {
+      const i = n.active ? "span" : "a", l = this.getTabOptions(n.active, e);
+      return r(i, Object.assign({}, l, { "aria-label": n.label, "aria-current": e === this.activeIndex, onClick: () => this.handleTabClick(e, n.label) }), n.label || n.ariaLabel);
+    }))));
+  }
+  get el() {
+    return d(this);
+  }
+  static get watchers() {
+    return {
+      tabs: ["parseTabs"]
+    };
+  }
+};
+b.style = x;
+export {
+  b as eds_tabs
+};