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

package/{eds-input_7.entry-CCX6iGUA.mjs → eds-tabs.entry-CxValIYM.js}

@@ -1,39 +1,4 @@
-import { r as t, c as a, h as n, g as d } from "./index-Df31uHzU.mjs";
-import { t as s } from "./toastManager-d9eee791-CEYNwx25.mjs";
-const f = class {
-  constructor(e) {
-    t(this, e), this.changeEvent = a(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("div", { key: "e67c7566fe5a1574d6ff0fff61178b163c5881f9", class: "relative flex items-center" }, this.type === "textarea" ? n("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("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("option", { value: r.value, selected: r.value === this.innerVal, key: r.value }, r.label))) : n("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("span", { key: "35bc563715e65073898259d12b4ef2c467b14439", class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? "input-counter-error" : ""}` }, this.maxLength), this.icon && n("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 d(this);
-  }
-  static get watchers() {
-    return {
-      value: ["onValueChanged"]
-    };
-  }
-}, c = `@font-face {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-QKKBbj1_.js"),o=require("./analytics-44b1416b-ol77SdQE.js"),d=require("./index-39c58238-SQ-JC-LH.js"),s=require("./sharedUtils-a550989c-m4pF1Vqy.js"),a=`@font-face {
   font-family: "Inter";
   font-weight: 100 900;
   font-display: swap;
@@ -677,9 +642,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);
@@ -1038,10 +1000,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;
 }
@@ -1051,6 +1073,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;
@@ -5369,15 +5781,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;
 
@@ -5434,14 +5837,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;
@@ -5600,6 +6003,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;
@@ -5694,6 +6105,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;
 }
@@ -5763,6 +6192,12 @@ video {
 .bottom-0 {
   bottom: 0rem;
 }
+.bottom-20 {
+  bottom: 1.25rem;
+}
+.bottom-4 {
+  bottom: 0.25rem;
+}
 .bottom-8 {
   bottom: 0.5rem;
 }
@@ -5772,6 +6207,9 @@ video {
 .left-1\\/2 {
   left: 50%;
 }
+.left-20 {
+  left: 1.25rem;
+}
 .left-4 {
   left: 0.25rem;
 }
@@ -5781,12 +6219,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;
 }
@@ -5799,9 +6243,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;
 }
@@ -5847,6 +6297,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;
 }
@@ -6033,6 +6491,9 @@ video {
 .h-96 {
   height: 6rem;
 }
+.h-\\[85px\\] {
+  height: 85px;
+}
 .h-auto {
   height: auto;
 }
@@ -6069,23 +6530,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;
@@ -6093,6 +6560,9 @@ video {
 .w-\\[54px\\] {
   width: 54px;
 }
+.w-auto {
+  width: auto;
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -6147,6 +6617,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;
 }
@@ -6159,6 +6670,9 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -6208,6 +6722,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));
@@ -6218,22 +6737,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));
@@ -6363,9 +6882,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;
 }
@@ -6375,6 +6891,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);
 }
@@ -6441,6 +6961,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;
@@ -6461,9 +6984,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;
 }
@@ -6508,6 +7037,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;
@@ -6545,9 +7078,6 @@ video {
 .pb-28 {
   padding-bottom: 1.75rem;
 }
-.pb-60 {
-  padding-bottom: 3.75rem;
-}
 .pb-8 {
   padding-bottom: 0.5rem;
 }
@@ -6581,6 +7111,9 @@ video {
 .pr-4 {
   padding-right: 0.25rem;
 }
+.pr-40 {
+  padding-right: 2.5rem;
+}
 .pr-8 {
   padding-right: 0.5rem;
 }
@@ -6596,9 +7129,6 @@ video {
 .pt-32 {
   padding-top: 2rem;
 }
-.pt-40 {
-  padding-top: 2.5rem;
-}
 .pt-48 {
   padding-top: 3rem;
 }
@@ -6611,6 +7141,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;
@@ -6621,6 +7155,9 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.lowercase {
+  text-transform: lowercase;
+}
 .\\!text-current {
   color: currentColor !important;
 }
@@ -6706,6 +7243,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);
@@ -6726,6 +7268,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);
@@ -6739,6 +7288,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-75 {
+  transition-duration: 75ms;
+}
 [class*="keyline-"] {
   position: relative;
 }
@@ -6818,6 +7370,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;
@@ -6827,15 +7385,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 {
@@ -6849,24 +7398,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);
@@ -6934,11 +7465,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;
 }
@@ -6969,6 +7495,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;
@@ -7090,6 +7619,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;
 }
@@ -7113,15 +7666,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;
   }
@@ -7145,8 +7715,8 @@ video {
   .lg\\:hidden {
     display: none;
   }
-  .lg\\:w-\\[150px\\] {
-    width: 150px;
+  .lg\\:w-\\[500px\\] {
+    width: 500px;
   }
   .lg\\:w-auto {
     width: auto;
@@ -7186,188 +7756,4 @@ 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 */
-}
-`, g = c, x = class {
-  constructor(e) {
-    t(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("div", { key: "6c2e228bc3940212ad4df6ed99bdd69b99342afb", class: "space-y-8" }, this.type === "checkbox" || this.type === "radio" ? this.parsedOptions.length > 0 ? n("fieldset", { class: "space-y-4 mt-8" }, n("div", { class: "flex justify-between" }, this.label && n("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required }), this.hint && n("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.parsedOptions.map((i) => n("div", { class: "flex items-center gap-x-2", key: i.value }, n("eds-input", Object.assign({}, e, { value: i.value })), n("eds-input-label", { name: `${this.name}-${i.value}`, label: i.label })))) : n("div", { class: "flex items-center gap-x-8" }, n("eds-input", Object.assign({}, e)), this.label && n("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })) : n("div", null, n("div", { class: "flex justify-between" }, this.label && n("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }), this.hint && n("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.type === "select" ? n("eds-input-select", Object.assign({}, e, { options: this.parsedOptions })) : this.type === "file" ? n("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required }) : this.type === "search" ? n("eds-input-search", { name: "search-box" }) : this.type === "range" ? (() => {
-      var i, r, l;
-      const o = this.parsedOptions;
-      return n("eds-input-range", { min: (i = o[0]) === null || i === void 0 ? void 0 : i.value, max: (r = o[1]) === null || r === void 0 ? void 0 : r.value, step: (l = o[2]) === null || l === void 0 ? void 0 : l.value, name: "range-slider" });
-    })() : n("eds-input", Object.assign({}, e))), n("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 }));
-  }
-};
-x.style = g;
-const m = class {
-  constructor(e) {
-    t(this, e), this.name = void 0, this.errorMessage = void 0, this.message = void 0, this.error = !1, this.link = void 0;
-  }
-  render() {
-    return n("div", { key: "c088f6c9bf4c3ca1efce1a1ff41ece8d4f8a6756", class: "space-y-4" }, this.error && this.errorMessage && n("div", { key: "7404a329f2b5da7f9444f986178c5e4dbbe838ad", id: `error_${this.name}`, class: "text-error flex items-center" }, n("eds-icon-wrapper", { key: "8f9d83b1d8dda824cac17d9c2ce3cb6cc5a58945", icon: "warning" }), n("p", { key: "f223076bc18088e264b4888d18bb9673f803d875", class: "f-ui-04 ml-4", innerHTML: this.errorMessage })), this.message && n("p", { key: "40bdbc35ba4985802177d7f9b2c44f893e4cb40c", id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && n("a", { key: "e6297a49f63ce2ab14bac8df0186fb42fab4416d", href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label));
-  }
-}, p = class {
-  constructor(e) {
-    t(this, e), this.label = void 0, this.name = void 0, this.required = !1, this.disabled = !1;
-  }
-  render() {
-    return n("label", { key: "38be7206acfad300657a99218c3138e91069d710", htmlFor: this.name, class: `input-label ${this.disabled ? "text-lighter" : ""}` }, this.label, this.required && n("span", { key: "1e80610f66d51a1c46918086bb5b5153c0e35a3c" }, n("span", { key: "83d15d62c0539f1847746b4a2b9c9971b4852da8", "aria-hidden": "true" }, "*"), n("span", { key: "3f45f5a436c41cf7e55570a2abe8844c8daa7525", class: "sr-only" }, "required")));
-  }
-}, u = class {
-  constructor(e) {
-    t(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("div", { key: "6a70b857cfbeb152e6f099b6dfc91cc9fec5bf11", class: "relative flex flex-col items-start space-y-2" }, n("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",
-      //aria-describedby={describedBy}
-      onInput: this.onInput
-    }), n("p", { key: "66bc2e755e4eb38015e32441599a9f9bade7c679", id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal));
-  }
-  get el() {
-    return d(this);
-  }
-}, y = class {
-  constructor(e) {
-    t(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("div", { key: "df7ee546beed6eedfba5a19e0fdf349d9aaece90", class: "relative flex items-center" }, n("eds-icon-wrapper", { key: "4663fdd0a9ba4eace47dc90f9c7f50fc2e6f7925", icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), n("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",
-      //aria-describedby={describedBy}
-      onInput: this.onInput,
-      onChange: this.onChange
-    }));
-  }
-  get el() {
-    return d(this);
-  }
-}, v = class {
-  constructor(e) {
-    t(this, e), this.changeEvent = a(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();
-  }
-  /**
-   * Watches for changes in the `options` prop and loads the options accordingly.
-   *
-   * If the first object in the options array contains an "endpoint" key,
-   * the component will fetch options from the specified endpoint using the configured keys.
-   * Otherwise, it will treat the options as static.
-   *
-   * @async
-   */
-  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 || s.show(`<eds-input-select> HTTP error! Status: ${r.status}`, "error");
-        const l = await r.json();
-        this.dynamicOptions = l, this.hasFetched = !0;
-      } catch (r) {
-        s.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("div", { key: "c1469a270fa5e775ac4d17f1c7e259d02477d7a2", class: "relative" }, n("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("option", { key: "ee3aa20ed1b99bddd7bafa3aac43f3c06db07b8f", value: "", disabled: !0, hidden: !0 }, this.loading ? "Loading options..." : `Please select ${this.name}`), this.dynamicOptions.map((e, i) => n("option", { key: i, value: this.getValueByPath(e, this.dynamicValueKey) }, this.getValueByPath(e, this.dynamicLabelKey)))), n("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("eds-icon-wrapper", { key: "2ef2d0d744216a1f931ac0bfe1058f54c9af4402", class: "w-20 h-20", icon: "chevron-right" })));
-  }
-  static get watchers() {
-    return {
-      options: ["loadOptions"]
-    };
-  }
-};
-export {
-  f as eds_input,
-  x as eds_input_field,
-  m as eds_input_footer,
-  p as eds_input_label,
-  u as eds_input_range,
-  y as eds_input_search,
-  v as eds_input_select
-};
+`,c=a,t=class{constructor(n){i.registerInstance(this,n),this.tab=i.createEvent(this,"tab",7),this.tabCva=d.cva(["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})}parseTabs(){this.parsedTabs=s.parseData(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 r=n?"center":this.activeIndex===-1&&e===0?"first":e<this.activeIndex?"left":"right";return Object.assign({class:this.tabCva({active:n,position:r}),style:{zIndex:`${n?this.parsedTabs.length+99:r==="left"?e:this.parsedTabs.length+1-e}`}},n?{"data-tab-active":"true"}:{})}handleTabClick(n,e){this.activeIndex=n,this.parsedTabs=this.parsedTabs.map((r,l)=>Object.assign(Object.assign({},r),{active:l===n})),this.tab.emit({tabId:this.id,index:n,name:e}),o.sendAnalytics({category:"ui-component",tag:this.el.tagName.toLowerCase(),name:(e==null?void 0:e.toLowerCase())||"",action:"click"})}render(){return i.h("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-['']"},i.h("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"},i.h("nav",{key:"cc8375d321a7116dcda08a0174ad941382d0ba43",ref:n=>this.tabContainer=n,class:"inline-flex","aria-label":this.navAriaLabel},this.parsedTabs.map((n,e)=>{const r=n.active?"span":"a",l=this.getTabOptions(n.active,e);return i.h(r,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 i.getElement(this)}static get watchers(){return{tabs:["parseTabs"]}}};t.style=c;exports.eds_tabs=t;