@club-employes/utopia 4.53.0 → 4.55.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as U, computed as P, ref as H, provide as js, onMounted as xA, onBeforeUnmount as qe, watch as rA, createElementBlock as m, openBlock as f, renderSlot as AA, normalizeStyle as cA, normalizeClass as C, useSlots as Ys, createCommentVNode as y, Fragment as sA, createBlock as V, createElementVNode as d, createVNode as J, toDisplayString as T, withDirectives as _e, unref as G, vModelDynamic as Ds, createTextVNode as oA, nextTick as uA, resolveDynamicComponent as we, withCtx as R, renderList as aA, onUnmounted as OA, useTemplateRef as ze, Teleport as EA, Transition as DA, withModifiers as jA, TransitionGroup as ks, vModelText as Ts, useCssVars as Gs, withKeys as Ge, mergeProps as Zs } from "vue";
+import { defineComponent as U, computed as x, ref as Z, provide as js, onMounted as xA, onBeforeUnmount as qe, watch as rA, createElementBlock as m, openBlock as f, renderSlot as AA, normalizeStyle as cA, normalizeClass as J, useSlots as Ys, createCommentVNode as y, Fragment as sA, createBlock as S, createElementVNode as d, createVNode as H, toDisplayString as T, withDirectives as _e, unref as G, vModelDynamic as Ds, createTextVNode as oA, nextTick as uA, resolveDynamicComponent as we, withCtx as R, renderList as aA, onUnmounted as OA, useTemplateRef as ze, Teleport as EA, Transition as DA, withModifiers as jA, TransitionGroup as ks, vModelText as Ts, useCssVars as Gs, withKeys as Ge, mergeProps as Zs } from "vue";
 import { RouterLink as Hs, useRoute as Js } from "vue-router";
 import { useBreakpoints as Cs, useScrollLock as $e, unrefElement as Ls, tryOnScopeDispose as Es, useMediaQuery as Xs, useEventListener as Qs } from "@vueuse/core";
 const Be = (A, s, e) => {
@@ -12,13 +12,13 @@ const Be = (A, s, e) => {
     theme: {}
   },
   setup(A) {
-    const s = A, e = P(() => s.theme.name), t = /* @__PURE__ */ new Map(), n = H(!1), o = async (a) => {
+    const s = A, e = x(() => s.theme.name), t = /* @__PURE__ */ new Map(), n = Z(!1), o = async (a) => {
       if (t.has(a))
         return t.get(a);
       const u = a.lastIndexOf("-"), g = a.substring(0, u), l = a.substring(u + 1);
       try {
-        const v = await Be(/* @__PURE__ */ Object.assign({ "../tokens/generated/club-employes/dark.css": () => import("./dark-CkQ4j_Qu.js"), "../tokens/generated/club-employes/light.css": () => import("./light-CBRrvcJ5.js"), "../tokens/generated/gifteo/dark.css": () => import("./dark-Bugw9CfG.js"), "../tokens/generated/gifteo/light.css": () => import("./light-BS5JGAVQ.js") }), `../tokens/generated/${g}/${l}.css`, 5), p = v.default || v;
-        return t.set(a, p), p;
+        const v = await Be(/* @__PURE__ */ Object.assign({ "../tokens/generated/club-employes/dark.css": () => import("./dark-CkQ4j_Qu.js"), "../tokens/generated/club-employes/light.css": () => import("./light-CBRrvcJ5.js"), "../tokens/generated/gifteo/dark.css": () => import("./dark-Bugw9CfG.js"), "../tokens/generated/gifteo/light.css": () => import("./light-BS5JGAVQ.js") }), `../tokens/generated/${g}/${l}.css`, 5), P = v.default || v;
+        return t.set(a, P), P;
       } catch (v) {
         return console.warn(`Failed to preload theme CSS for ${a}:`, v), "";
       }
@@ -54,14 +54,14 @@ const Be = (A, s, e) => {
         console.log("✅ Theme already preloaded via initializeTheme(), skipping initial injection");
         const v = a?.textContent;
         v && t.set(e.value, v);
-        const p = [
+        const P = [
           "club-employes-light",
           "club-employes-dark",
           "gifteo-light",
           "gifteo-dark"
-        ].filter((O) => O !== e.value);
+        ].filter((M) => M !== e.value);
         Promise.all(
-          p.map((O) => o(O))
+          P.map((M) => o(M))
         ).then(() => {
           console.log("🚀 Other themes preloaded in cache");
         });
@@ -173,7 +173,7 @@ function $s() {
 function At() {
   if (FA !== void 0) return;
   const A = $s();
-  FA = H(A.brand), Ae = H(A.mode), ee = H(qs()), se = H(A.isLocked);
+  FA = Z(A.brand), Ae = Z(A.mode), ee = Z(qs()), se = Z(A.isLocked);
   const s = FA, e = Ae, t = ee, n = se;
   typeof window < "u" && window.addEventListener("utopia:brand-unlocked", () => {
     n.value = !1, console.log("🎨 useTheme: Brand unlocked");
@@ -203,7 +203,7 @@ const RA = {
 };
 function yA() {
   At(), et();
-  const A = FA, s = Ae, e = ee, t = se, n = P(() => RA[A.value][s.value]), o = P(() => RA[A.value].name), c = () => {
+  const A = FA, s = Ae, e = ee, t = se, n = x(() => RA[A.value][s.value]), o = x(() => RA[A.value].name), c = () => {
     if (t.value) {
       console.warn("⚠️ Brand is locked and cannot be changed. Brand is determined by the domain.");
       return;
@@ -223,19 +223,19 @@ function yA() {
     e.value = !e.value;
   }, g = (v) => {
     e.value = v;
-  }, l = P(() => Object.keys(RA).map((v) => ({
+  }, l = x(() => Object.keys(RA).map((v) => ({
     key: v,
     name: RA[v].name
   })));
   return {
     // State
     currentTheme: n,
-    currentBrand: P(() => A.value),
-    currentMode: P(() => s.value),
+    currentBrand: x(() => A.value),
+    currentMode: x(() => s.value),
     currentBrandName: o,
     availableBrands: l,
-    menuCollapsed: P(() => e.value),
-    isBrandLocked: P(() => t.value),
+    menuCollapsed: x(() => e.value),
+    isBrandLocked: x(() => t.value),
     // Actions
     toggleBrand: c,
     toggleMode: i,
@@ -256,7 +256,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
     class: {}
   },
   setup(A) {
-    const s = A, e = H(""), t = P(() => [
+    const s = A, e = Z(""), t = x(() => [
       "icon",
       `icon--${{
         "extra-small": "xs",
@@ -265,7 +265,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
         large: "lg"
       }[s.size]}`,
       s.class
-    ].filter(Boolean)), n = P(() => s.color ? {
+    ].filter(Boolean)), n = x(() => s.color ? {
       color: `var(${`--theme-colors-${s.color}`})`,
       "--stroke-width": s.strokeWidth ? String(s.strokeWidth) : "1"
     } : {}), o = async (i) => {
@@ -290,7 +290,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       },
       { immediate: !0 }
     ), (i, r) => (f(), m("span", {
-      class: C(t.value),
+      class: J(t.value),
       style: cA(n.value),
       "aria-label": A.alt || A.name,
       role: "img",
@@ -313,37 +313,37 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
   },
   emits: ["click"],
   setup(A, { emit: s }) {
-    const e = A, t = s, { currentTheme: n } = yA(), o = Ys(), c = P(() => ({
+    const e = A, t = s, { currentTheme: n } = yA(), o = Ys(), c = x(() => ({
       [`utopia-button--${e.variant}`]: !0,
       [`utopia-button--${e.size}`]: !0,
       "utopia-button--disabled": e.disabled,
       "utopia-button--loading": e.loading,
       "utopia-button--icon-only": e.icon && !o.default || e.loading && !e.icon && o.default,
       [`utopia-button--${n.value?.mode || "light"}`]: !0
-    })), i = P(() => ({
+    })), i = x(() => ({
       flexDirection: "row"
     })), r = (a) => {
       !e.disabled && !e.loading && t("click", a);
     };
     return (a, u) => (f(), m("button", {
-      class: C(["utopia-button testpp", c.value]),
+      class: J(["utopia-button testpp", c.value]),
       disabled: A.disabled || A.loading,
       onClick: r,
       style: cA(i.value),
       "aria-label": e.ariaLabel
     }, [
       A.iconPosition === "left" || !A.icon && A.loading ? (f(), m(sA, { key: 0 }, [
-        A.loading && A.icon ? (f(), V(F, {
+        A.loading && A.icon ? (f(), S(F, {
           key: 0,
           name: "Loader-2",
           class: "utopia-button__icon utopia-button__icon--loading",
           "stroke-width": "2"
-        })) : A.loading && !A.icon && a.$slots.default ? (f(), V(F, {
+        })) : A.loading && !A.icon && a.$slots.default ? (f(), S(F, {
           key: 1,
           name: "Loader-2",
           class: "utopia-button__icon utopia-button__icon--loading",
           "stroke-width": "2"
-        })) : A.icon ? (f(), V(F, {
+        })) : A.icon ? (f(), S(F, {
           key: 2,
           name: A.icon,
           class: "utopia-button__icon",
@@ -354,12 +354,12 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
         AA(a.$slots, "default", {}, void 0, !0)
       ])) : y("", !0),
       A.iconPosition === "right" ? (f(), m(sA, { key: 2 }, [
-        A.loading && A.icon ? (f(), V(F, {
+        A.loading && A.icon ? (f(), S(F, {
           key: 0,
           name: "Loader-2",
           class: "utopia-button__icon utopia-button__icon--loading",
           "stroke-width": "2"
-        })) : A.icon ? (f(), V(F, {
+        })) : A.icon ? (f(), S(F, {
           key: 1,
           name: A.icon,
           class: "utopia-button__icon",
@@ -378,7 +378,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
     active: { type: Boolean, default: !1 }
   },
   setup(A) {
-    const s = A, e = P(() => ({
+    const s = A, e = x(() => ({
       [`utopia-card--${s.variant}`]: !0,
       [`utopia-card--${s.size}`]: !0,
       "utopia-card--disabled": s.disabled,
@@ -386,7 +386,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       "utopia-card--active": s.active
     }));
     return (t, n) => (f(), m("div", {
-      class: C(["utopia-card", e.value])
+      class: J(["utopia-card", e.value])
     }, [
       AA(t.$slots, "default", {}, void 0, !0)
     ], 2));
@@ -403,7 +403,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
   },
   emits: ["update:modelValue"],
   setup(A, { emit: s }) {
-    const e = A, t = s, { currentTheme: n } = yA(), o = P(() => ({
+    const e = A, t = s, { currentTheme: n } = yA(), o = x(() => ({
       [`utopia-checkbox--${e.size}`]: !0,
       "utopia-checkbox--disabled": e.disabled,
       "utopia-checkbox--checked": e.modelValue,
@@ -413,7 +413,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       t("update:modelValue", r.checked);
     };
     return (i, r) => (f(), m("label", {
-      class: C(["utopia-checkbox", o.value])
+      class: J(["utopia-checkbox", o.value])
     }, [
       d("input", {
         type: "checkbox",
@@ -423,7 +423,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
         onChange: c
       }, null, 40, at),
       d("div", ft, [
-        J(F, {
+        H(F, {
           name: "Check",
           class: "utopia-checkbox__check",
           "stroke-width": "4"
@@ -449,10 +449,10 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
   },
   emits: ["remove"],
   setup(A, { emit: s }) {
-    const e = A, t = P(() => {
+    const e = A, t = x(() => {
       const a = {};
       return e.customColor && (a["background-color"] = `var(${e.customColor})`), e.customTextColor && (a.color = `var(${e.customTextColor})`), a;
-    }), n = s, { currentTheme: o } = yA(), c = P(() => ({
+    }), n = s, { currentTheme: o } = yA(), c = x(() => ({
       [`utopia-chip--${e.variant}`]: !e.customColor,
       [`utopia-chip--${e.size}`]: !0,
       "utopia-chip--disabled": e.disabled,
@@ -460,7 +460,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       "utopia-chip--actionable": e.actionable,
       "utopia-chip--ghost": e.ghost,
       [`utopia-chip--${o.value?.mode || "light"}`]: !0
-    })), i = P(() => ({
+    })), i = x(() => ({
       "extra-small": "extra-small",
       small: "small",
       medium: "medium",
@@ -469,10 +469,10 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       a.stopPropagation(), e.disabled || n("remove");
     };
     return (a, u) => (f(), m("div", {
-      class: C(["utopia-chip", c.value]),
+      class: J(["utopia-chip", c.value]),
       style: cA(t.value)
     }, [
-      A.leftIcon ? (f(), V(F, {
+      A.leftIcon ? (f(), S(F, {
         key: 0,
         name: A.leftIcon,
         size: i.value,
@@ -490,7 +490,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
         onClick: r,
         "aria-label": `Supprimer ${a.$slots.default?.() || "chip"}`
       }, [
-        J(F, {
+        H(F, {
           name: "X",
           size: i.value,
           class: "utopia-chip__close-icon",
@@ -530,12 +530,12 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
   },
   emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown", "paste", "icon-click"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = H(), o = H(e.modelValue), c = P(() => `utopia-input-${Math.random().toString(36).substr(2, 9)}`), i = P(() => e.step ?? 1), r = P(() => e.type === "number" && e.isCode ? "text" : e.type), a = P(() => {
+    const e = A, t = s, n = Z(), o = Z(e.modelValue), c = x(() => `utopia-input-${Math.random().toString(36).substr(2, 9)}`), i = x(() => e.step ?? 1), r = x(() => e.type === "number" && e.isCode ? "text" : e.type), a = x(() => {
       if (e.inputmode)
         return e.inputmode;
       if (e.type === "number")
         return "numeric";
-    }), u = P(() => ({
+    }), u = x(() => ({
       [`utopia-inputtext--${e.size}`]: !0,
       [`utopia-inputtext--${e.state}`]: !0,
       "utopia-inputtext--disabled": e.disabled,
@@ -544,65 +544,65 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       "utopia-inputtext--code": e.isCode,
       "utopia-inputtext--icon-left": e.iconPosition === "left" && (e.icon || e.state === "valid" || e.state === "error"),
       "utopia-inputtext--icon-right": e.iconPosition === "right" && (e.icon || e.state === "valid" || e.state === "error")
-    })), g = P(() => ({
+    })), g = x(() => ({
       "utopia-inputtext__field--with-icon": e.icon || e.state === "valid" || e.state === "error",
       "utopia-inputtext__field--with-icon-left": e.iconPosition === "left" && (e.icon || e.state === "valid" || e.state === "error"),
       "utopia-inputtext__field--with-icon-right": e.iconPosition === "right" && (e.icon || e.state === "valid" || e.state === "error"),
       "utopia-inputtext__field--number": e.type === "number",
       "utopia-inputtext__field--code": e.isCode,
       "utopia-inputtext__field--numeric-text": e.type === "number" && e.maxlength !== void 0 && e.isCode
-    })), l = P(() => ({
+    })), l = x(() => ({
       [`utopia-inputtext__message--${e.state}`]: e.state === "error" || e.state === "valid"
-    })), v = (D) => {
-      t("focus", D);
-    }, p = (D) => {
-      e.forceModelValueOnBlur && (o.value = e.modelValue), t("blur", D);
-    }, O = (D) => {
-      const j = D.target;
-      let z = j.value;
-      e.isCode && (z = z.charAt(0).toUpperCase(), e.type === "number" ? /^\d$/.test(z) || (z = "") : /^[A-Z0-9]$/.test(z) || (z = ""), j.value = z), o.value = z, t("update:modelValue", z), t("input", D);
-    }, x = (D) => {
-      t("change", D);
-    }, b = (D) => {
+    })), v = (k) => {
+      t("focus", k);
+    }, P = (k) => {
+      e.forceModelValueOnBlur && (o.value = e.modelValue), t("blur", k);
+    }, M = (k) => {
+      const Y = k.target;
+      let z = Y.value;
+      e.isCode && (z = z.charAt(0).toUpperCase(), e.type === "number" ? /^\d$/.test(z) || (z = "") : /^[A-Z0-9]$/.test(z) || (z = ""), Y.value = z), o.value = z, t("update:modelValue", z), t("input", k);
+    }, p = (k) => {
+      t("change", k);
+    }, b = (k) => {
       if (e.isCode) {
-        const j = D.key;
+        const Y = k.key;
         if (e.type === "number") {
-          if (!/^\d$/.test(j)) {
-            D.preventDefault();
+          if (!/^\d$/.test(Y)) {
+            k.preventDefault();
             return;
           }
-        } else if (!/^[A-Za-z0-9]$/.test(j)) {
-          D.preventDefault();
+        } else if (!/^[A-Za-z0-9]$/.test(Y)) {
+          k.preventDefault();
           return;
         }
       }
-    }, k = (D) => {
-      t("keydown", D);
-    }, w = (D) => {
-      t("paste", D);
-    }, L = (D) => {
-      e.iconClickable && !e.disabled && !e.readonly && t("icon-click", D);
-    }, Z = (D) => {
-      const j = parseFloat(D);
-      return Number.isFinite(j) ? j : 0;
-    }, B = (D) => (typeof e.min == "number" && (D = Math.max(D, e.min)), typeof e.max == "number" && (D = Math.min(D, e.max)), D), Q = (D) => {
-      const j = i.value, z = j && !Number.isInteger(j) ? j.toString().split(".")[1]?.length ?? 0 : 0;
-      return D.toFixed(z);
-    }, I = () => {
-      const D = Z(o.value), j = B(D + i.value), z = Q(j);
+    }, D = (k) => {
+      t("keydown", k);
+    }, B = (k) => {
+      t("paste", k);
+    }, C = (k) => {
+      e.iconClickable && !e.disabled && !e.readonly && t("icon-click", k);
+    }, I = (k) => {
+      const Y = parseFloat(k);
+      return Number.isFinite(Y) ? Y : 0;
+    }, L = (k) => (typeof e.min == "number" && (k = Math.max(k, e.min)), typeof e.max == "number" && (k = Math.min(k, e.max)), k), j = (k) => {
+      const Y = i.value, z = Y && !Number.isInteger(Y) ? Y.toString().split(".")[1]?.length ?? 0 : 0;
+      return k.toFixed(z);
+    }, Q = () => {
+      const k = I(o.value), Y = L(k + i.value), z = j(Y);
       o.value = z, t("update:modelValue", z);
-    }, Y = () => {
-      const D = Z(o.value), j = B(D - i.value), z = Q(j);
+    }, w = () => {
+      const k = I(o.value), Y = L(k - i.value), z = j(Y);
       o.value = z, t("update:modelValue", z);
-    }, S = (D) => {
-      o.value = D, uA(() => {
-        n.value && (n.value.value = D);
+    }, N = (k) => {
+      o.value = k, uA(() => {
+        n.value && (n.value.value = k);
       });
     };
-    return rA(() => e.modelValue, (D) => {
-      D !== o.value && S(D || "");
-    }), (D, j) => (f(), m("div", {
-      class: C(["utopia-inputtext", u.value])
+    return rA(() => e.modelValue, (k) => {
+      k !== o.value && N(k || "");
+    }), (k, Y) => (f(), m("div", {
+      class: J(["utopia-inputtext", u.value])
     }, [
       A.label ? (f(), m("label", {
         key: 0,
@@ -612,22 +612,22 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       d("div", pt, [
         (A.icon || A.state === "valid" || A.state === "error") && A.iconPosition === "left" ? (f(), m("div", {
           key: 0,
-          class: C(["utopia-inputtext__icon-container utopia-inputtext__icon--left", { "utopia-inputtext__icon--clickable": A.iconClickable }]),
-          onClick: L
+          class: J(["utopia-inputtext__icon-container utopia-inputtext__icon--left", { "utopia-inputtext__icon--clickable": A.iconClickable }]),
+          onClick: C
         }, [
-          A.state === "valid" ? (f(), V(G(F), {
+          A.state === "valid" ? (f(), S(G(F), {
             key: 0,
             name: "Check",
             class: "utopia-inputtext__icon utopia-inputtext__icon--valid",
             "stroke-width": "2",
             color: "success"
-          })) : A.state === "error" ? (f(), V(G(F), {
+          })) : A.state === "error" ? (f(), S(G(F), {
             key: 1,
             name: "Alert-triangle",
             class: "utopia-inputtext__icon utopia-inputtext__icon--error",
             "stroke-width": "2",
             color: "danger"
-          })) : A.icon ? (f(), V(G(F), {
+          })) : A.icon ? (f(), S(G(F), {
             key: 2,
             name: A.icon,
             class: "utopia-inputtext__icon utopia-inputtext__icon--default",
@@ -639,48 +639,48 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
           id: c.value,
           ref_key: "inputRef",
           ref: n,
-          "onUpdate:modelValue": j[0] || (j[0] = (z) => o.value = z),
+          "onUpdate:modelValue": Y[0] || (Y[0] = (z) => o.value = z),
           type: r.value,
           inputmode: a.value,
           placeholder: A.placeholder,
           disabled: A.disabled,
           readonly: A.readonly,
           maxlength: A.maxlength,
-          class: C(["utopia-inputtext__field", g.value]),
+          class: J(["utopia-inputtext__field", g.value]),
           min: A.min,
           max: A.max,
           step: i.value,
           onFocus: v,
-          onBlur: p,
-          onInput: O,
-          onChange: x,
+          onBlur: P,
+          onInput: M,
+          onChange: p,
           onKeypress: b,
-          onKeydown: k,
-          onPaste: w
+          onKeydown: D,
+          onPaste: B
         }, null, 42, xt), [
           [Ds, o.value]
         ]),
         (A.icon || A.state === "valid" || A.state === "error") && A.iconPosition === "right" ? (f(), m("div", {
           key: 1,
-          class: C(["utopia-inputtext__icon-container utopia-inputtext__icon--right", {
+          class: J(["utopia-inputtext__icon-container utopia-inputtext__icon--right", {
             "utopia-inputtext__icon--clickable": A.iconClickable,
             "utopia-inputtext__icon--right--offset": A.type === "number" && !A.isCode
           }]),
-          onClick: L
+          onClick: C
         }, [
-          A.state === "valid" ? (f(), V(G(F), {
+          A.state === "valid" ? (f(), S(G(F), {
             key: 0,
             name: "Check",
             class: "utopia-inputtext__icon utopia-inputtext__icon--valid",
             "stroke-width": "2",
             color: "success"
-          })) : A.state === "error" ? (f(), V(G(F), {
+          })) : A.state === "error" ? (f(), S(G(F), {
             key: 1,
             name: "Alert-triangle",
             class: "utopia-inputtext__icon utopia-inputtext__icon--error",
             "stroke-width": "2",
             color: "danger"
-          })) : A.icon ? (f(), V(G(F), {
+          })) : A.icon ? (f(), S(G(F), {
             key: 2,
             name: A.icon,
             class: "utopia-inputtext__icon utopia-inputtext__icon--default",
@@ -692,11 +692,11 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
           d("button", {
             type: "button",
             class: "utopia-inputtext__stepper-btn utopia-inputtext__stepper-btn--up",
-            onClick: I,
+            onClick: Q,
             disabled: A.disabled || A.readonly,
             tabindex: "-1"
           }, [
-            J(G(F), {
+            H(G(F), {
               name: "Chevron-up",
               "stroke-width": "2"
             })
@@ -704,11 +704,11 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
           d("button", {
             type: "button",
             class: "utopia-inputtext__stepper-btn utopia-inputtext__stepper-btn--down",
-            onClick: Y,
+            onClick: w,
             disabled: A.disabled || A.readonly,
             tabindex: "-1"
           }, [
-            J(G(F), {
+            H(G(F), {
               name: "Chevron-down",
               "stroke-width": "2"
             })
@@ -717,14 +717,14 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       ]),
       A.message ? (f(), m("div", {
         key: 1,
-        class: C(["utopia-inputtext__message", l.value])
+        class: J(["utopia-inputtext__message", l.value])
       }, [
-        A.state === "error" ? (f(), V(G(F), {
+        A.state === "error" ? (f(), S(G(F), {
           key: 0,
           name: "Alert-triangle",
           class: "utopia-inputtext__message-icon",
           "stroke-width": "2"
-        })) : A.state === "valid" ? (f(), V(G(F), {
+        })) : A.state === "valid" ? (f(), S(G(F), {
           key: 1,
           name: "Check",
           class: "utopia-inputtext__message-icon",
@@ -745,7 +745,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
     test: {}
   },
   setup(A) {
-    const s = A, e = P(() => {
+    const s = A, e = x(() => {
       const n = s.brand ? `logo--${s.brand}` : "logo--auto-brand";
       return [
         "logo",
@@ -754,9 +754,9 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
         n,
         s.class
       ].filter(Boolean);
-    }), t = P(() => s.brand === "gifteo" ? "Gifteo" : s.brand === "club-employes" ? "Club Employés" : "Logo");
+    }), t = x(() => s.brand === "gifteo" ? "Gifteo" : s.brand === "club-employes" ? "Club Employés" : "Logo");
     return (n, o) => (f(), m("div", {
-      class: C(e.value),
+      class: J(e.value),
       "aria-label": A.alt || `Logo ${t.value}`,
       role: "img"
     }, null, 10, bt));
@@ -773,17 +773,17 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
     bg: { type: Boolean, default: !1 }
   },
   setup(A) {
-    const s = A, e = P(() => ({
+    const s = A, e = x(() => ({
       "utopia-skeleton--animated": s.animated,
       "utopia-skeleton--block": s.block,
       "utopia-skeleton--bg": s.bg
-    })), t = P(() => ({
+    })), t = x(() => ({
       width: typeof s.width == "number" ? `${s.width}px` : s.width,
       height: typeof s.height == "number" ? `${s.height}px` : s.height,
       borderRadius: typeof s.radius == "number" ? `${s.radius}px` : s.radius
     }));
-    return (n, o) => (f(), V(we(A.as), {
-      class: C(["utopia-skeleton", e.value]),
+    return (n, o) => (f(), S(we(A.as), {
+      class: J(["utopia-skeleton", e.value]),
       style: cA(t.value)
     }, {
       default: R(() => [
@@ -800,16 +800,16 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
     animated: { type: Boolean, default: !0 }
   },
   setup(A) {
-    const s = A, e = P(() => ({
+    const s = A, e = x(() => ({
       "utopia-skeleton-avatar--animated": s.animated,
       "utopia-skeleton-avatar--rounded": s.rounded
-    })), t = P(() => ({
+    })), t = x(() => ({
       width: typeof s.size == "number" ? `${s.size}px` : s.size,
       height: typeof s.size == "number" ? `${s.size}px` : s.size,
       borderRadius: s.rounded ? "50%" : "4px"
     }));
     return (n, o) => (f(), m("div", {
-      class: C(["utopia-skeleton-avatar", e.value]),
+      class: J(["utopia-skeleton-avatar", e.value]),
       style: cA(t.value)
     }, null, 6));
   }
@@ -823,21 +823,21 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
     animated: { type: Boolean, default: !1 }
   },
   setup(A) {
-    const s = A, e = P(() => ({
+    const s = A, e = x(() => ({
       "utopia-skeleton-text--animated": s.animated
-    })), t = P(() => ({
+    })), t = x(() => ({
       "--skeleton-line-height": typeof s.lineHeight == "number" ? `${s.lineHeight}px` : s.lineHeight,
       "--skeleton-gap": typeof s.gap == "number" ? `${s.gap}px` : s.gap
     })), n = (o) => ({
       width: o === s.lines - 1 ? typeof s.lastLineWidth == "number" ? `${s.lastLineWidth}px` : s.lastLineWidth : "100%"
     });
     return (o, c) => (f(), m("div", {
-      class: C(["utopia-skeleton-text", e.value]),
+      class: J(["utopia-skeleton-text", e.value]),
       style: cA(t.value)
     }, [
       (f(!0), m(sA, null, aA(A.lines, (i, r) => (f(), m("div", {
         key: r,
-        class: C(["utopia-skeleton-text__line", { "utopia-skeleton-text__line--last": r === A.lines - 1 }]),
+        class: J(["utopia-skeleton-text__line", { "utopia-skeleton-text__line--last": r === A.lines - 1 }]),
         style: cA(n(r))
       }, null, 6))), 128))
     ], 6));
@@ -855,7 +855,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
   },
   emits: ["update:modelValue"],
   setup(A, { emit: s }) {
-    const e = A, t = s, { currentTheme: n } = yA(), o = P(() => ({
+    const e = A, t = s, { currentTheme: n } = yA(), o = x(() => ({
       [`utopia-switch--${e.size}`]: !0,
       "utopia-switch--disabled": e.disabled,
       "utopia-switch--checked": e.modelValue,
@@ -865,7 +865,7 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       t("update:modelValue", r.checked);
     };
     return (i, r) => (f(), m("label", {
-      class: C(["utopia-switch", o.value])
+      class: J(["utopia-switch", o.value])
     }, [
       d("input", {
         type: "checkbox",
@@ -876,9 +876,9 @@ const st = ["aria-label", "innerHTML"], tt = /* @__PURE__ */ U({
       }, null, 40, Yt),
       d("div", Dt, [
         d("div", kt, [
-          J(F, {
+          H(F, {
             name: "Check",
-            class: C(`utopia-switch__icon ${A.modelValue ? "utopia-switch__icon--visible" : ""}`),
+            class: J(`utopia-switch__icon ${A.modelValue ? "utopia-switch__icon--visible" : ""}`),
             "stroke-width": "4"
           }, null, 8, ["class"])
         ])
@@ -948,7 +948,7 @@ function Ta() {
     } catch (a) {
       console.warn("Erreur lors de la mise à jour du favicon:", a);
     }
-  }, o = P(() => {
+  }, o = x(() => {
     const r = e(A.value);
     return r ? t(r) : "/favicon.ico";
   }), c = () => {
@@ -1049,18 +1049,18 @@ function es(A = {}) {
   } = A;
   let c = null;
   o && (c = Zt(n));
-  const i = H(), r = H(!1), a = H(!0), u = () => {
+  const i = Z(), r = Z(!1), a = Z(!0), u = () => {
     if (i.value)
       try {
-        const { scrollTop: x, scrollHeight: b, clientHeight: k } = i.value;
-        if (!(b > k)) {
+        const { scrollTop: p, scrollHeight: b, clientHeight: D } = i.value;
+        if (!(b > D)) {
           r.value = !1, a.value = !1;
           return;
         }
-        const L = x <= t, Z = Math.abs(b - k - x) <= e;
-        r.value = !L, a.value = !Z;
-      } catch (x) {
-        console.warn("Error checking scroll position:", x), r.value = !1, a.value = !1;
+        const C = p <= t, I = Math.abs(b - D - p) <= e;
+        r.value = !C, a.value = !I;
+      } catch (p) {
+        console.warn("Error checking scroll position:", p), r.value = !1, a.value = !1;
       }
   }, g = () => {
     u();
@@ -1068,14 +1068,14 @@ function es(A = {}) {
     setTimeout(() => {
       u();
     }, s);
-  }, v = (x) => rA(x, (k) => {
-    k && uA(() => {
+  }, v = (p) => rA(p, (D) => {
+    D && uA(() => {
       setTimeout(u, s);
     });
-  }, { immediate: !0 }), p = P(() => {
-    const x = ["scroll-shadows-container"];
-    return r.value || x.push("hide-top-shadow"), a.value || x.push("hide-bottom-shadow"), x;
-  }), O = P(() => ["scroll-content-hidden-scrollbar"]);
+  }, { immediate: !0 }), P = x(() => {
+    const p = ["scroll-shadows-container"];
+    return r.value || p.push("hide-top-shadow"), a.value || p.push("hide-bottom-shadow"), p;
+  }), M = x(() => ["scroll-content-hidden-scrollbar"]);
   return OA(() => {
     c && c();
   }), {
@@ -1085,8 +1085,8 @@ function es(A = {}) {
     handleScroll: g,
     checkScrollPosition: u,
     initialize: l,
-    containerClasses: p,
-    scrollClasses: O,
+    containerClasses: P,
+    scrollClasses: M,
     // Fonction bonus pour les cas d'usage spéciaux
     initializeOnChange: v
   };
@@ -1108,7 +1108,7 @@ const Ht = {
 };
 function Lt(A) {
   return {
-    currencyIconName: P(() => Ct[A] || "")
+    currencyIconName: x(() => Ct[A] || "")
   };
 }
 const Et = /* @__PURE__ */ U({
@@ -1129,7 +1129,7 @@ const Et = /* @__PURE__ */ U({
     strike: { type: Boolean }
   },
   setup(A) {
-    const s = A, e = P(() => ({
+    const s = A, e = x(() => ({
       [s.underline ? "text--underline" : ""]: !0,
       [s.italic ? "text--italic" : ""]: !0,
       [s.strike ? "text--strike" : ""]: !0,
@@ -1140,11 +1140,11 @@ const Et = /* @__PURE__ */ U({
       [`text-align--${s.align}`]: !0,
       [`text-${s.truncate ? "truncate" : "noTruncate"}`]: !0,
       [`text-${s.noWrap ? "noWrap" : "wrap"}`]: !0
-    })), t = P(() => s.color ? {
+    })), t = x(() => s.color ? {
       color: `var(${`--theme-colors-${s.color}`})`
     } : {});
-    return (n, o) => (f(), V(we(A.as), {
-      class: C(e.value),
+    return (n, o) => (f(), S(we(A.as), {
+      class: J(e.value),
       style: cA(t.value)
     }, {
       default: R(() => [
@@ -1164,7 +1164,7 @@ const Et = /* @__PURE__ */ U({
     color: {}
   },
   setup(A) {
-    const s = A, e = P(() => ({
+    const s = A, e = x(() => ({
       xs: "extra-small",
       sm: "small",
       base: "medium",
@@ -1176,7 +1176,7 @@ const Et = /* @__PURE__ */ U({
       "5xl": "large"
     })[s.size]);
     return (t, n) => (f(), m(sA, null, [
-      A.iconLeft ? (f(), V(F, {
+      A.iconLeft ? (f(), S(F, {
         key: 0,
         name: A.iconLeft,
         size: e.value,
@@ -1184,7 +1184,7 @@ const Et = /* @__PURE__ */ U({
         "stroke-width": 2,
         class: "utopia-link-content__icon"
       }, null, 8, ["name", "size", "color"])) : y("", !0),
-      J(Xt, {
+      H(Xt, {
         size: s.size,
         weight: s.weight,
         color: s.color
@@ -1194,7 +1194,7 @@ const Et = /* @__PURE__ */ U({
         ]),
         _: 1
       }, 8, ["size", "weight", "color"]),
-      A.iconRight ? (f(), V(F, {
+      A.iconRight ? (f(), S(F, {
         key: 1,
         name: A.iconRight,
         size: e.value,
@@ -1223,7 +1223,7 @@ function Ft(A) {
   } : null;
 }
 function Nt(A) {
-  return P(() => {
+  return x(() => {
     const s = A.value, e = Ft(s);
     if (!e) return `${s}-100`;
     const { prefix: t, level: n } = e, o = ht[t];
@@ -1233,7 +1233,7 @@ function Nt(A) {
   });
 }
 function It(A, s, e) {
-  return P(() => {
+  return x(() => {
     const t = A.value, n = s.value;
     return e.value ? "text-muted" : t ? n ? t : Nt(A).value : "current-color";
   });
@@ -1254,10 +1254,10 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
     disabled: { type: Boolean, default: !1 }
   },
   setup(A) {
-    const s = A, { currentTheme: e } = yA(), t = P(() => s.active && !s.disabled), n = It(
-      P(() => s.color),
+    const s = A, { currentTheme: e } = yA(), t = x(() => s.active && !s.disabled), n = It(
+      x(() => s.color),
       t,
-      P(() => s.disabled)
+      x(() => s.disabled)
     ), o = {
       xs: 1,
       sm: 1,
@@ -1277,23 +1277,23 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       bold: 1.2,
       extrabold: 1.3,
       black: 1.5
-    }, i = P(() => {
+    }, i = x(() => {
       const g = o[s.size] ?? 2, l = c[s.weight] ?? 1;
       return `${g * l}px`;
-    }), r = P(() => ({
+    }), r = x(() => ({
       "--link-color": n.value === "current-color" ? "currentColor" : `var(--theme-colors-${n.value})`,
       "--link-height": i.value
-    })), a = P(() => ({
+    })), a = x(() => ({
       [`utopia-link--${s.size}`]: !0,
       "utopia-link--disabled": s.disabled,
       [`utopia-link--${e.value?.mode || "light"}`]: !0
-    })), u = P(() => s.to.startsWith("http"));
+    })), u = x(() => s.to.startsWith("http"));
     return (g, l) => A.disabled ? (f(), m("div", {
       key: 0,
-      class: C(["utopia-link", a.value]),
+      class: J(["utopia-link", a.value]),
       style: cA(r.value)
     }, [
-      J($A, {
+      H($A, {
         label: A.label,
         iconLeft: A.iconLeft,
         iconRight: A.iconRight,
@@ -1305,10 +1305,10 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       key: 1,
       href: A.to,
       target: A.target,
-      class: C(["utopia-link", a.value]),
+      class: J(["utopia-link", a.value]),
       style: cA(r.value)
     }, [
-      J($A, {
+      H($A, {
         label: A.label,
         iconLeft: A.iconLeft,
         iconRight: A.iconRight,
@@ -1316,14 +1316,14 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
         weight: A.weight,
         color: G(n)
       }, null, 8, ["label", "iconLeft", "iconRight", "size", "weight", "color"])
-    ], 14, Vt)) : (f(), V(G(Hs), {
+    ], 14, Vt)) : (f(), S(G(Hs), {
       key: 2,
       to: A.to,
-      class: C(["utopia-link", a.value]),
+      class: J(["utopia-link", a.value]),
       style: cA(r.value)
     }, {
       default: R(() => [
-        J($A, {
+        H($A, {
           label: A.label,
           iconLeft: A.iconLeft,
           iconRight: A.iconRight,
@@ -1353,63 +1353,63 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
   },
   emits: ["update-value"],
   setup(A, { emit: s }) {
-    const e = A, t = P(() => Array.isArray(e.currentValue)), n = P(() => Array.isArray(e.currentValue) ? e.currentValue[0] > e.currentValue[1] ? e.currentValue[0] : Math.min(Math.max(e.currentValue[0], e.min), e.currentValue[1]) : e.min), o = P(() => Array.isArray(e.currentValue) ? e.currentValue[1] < e.currentValue[0] ? e.currentValue[0] : Math.max(Math.min(e.currentValue[1], e.max), e.currentValue[0]) : Math.min(e.currentValue, e.max)), c = P(() => ({
+    const e = A, t = x(() => Array.isArray(e.currentValue)), n = x(() => Array.isArray(e.currentValue) ? e.currentValue[0] > e.currentValue[1] ? e.currentValue[0] : Math.min(Math.max(e.currentValue[0], e.min), e.currentValue[1]) : e.min), o = x(() => Array.isArray(e.currentValue) ? e.currentValue[1] < e.currentValue[0] ? e.currentValue[0] : Math.max(Math.min(e.currentValue[1], e.max), e.currentValue[0]) : Math.min(e.currentValue, e.max)), c = x(() => ({
       [`utopia-rangeslider__input--${e.size}`]: !0
-    })), i = P(() => ({
+    })), i = x(() => ({
       [`utopia-rangeslider__input-from--${e.size}`]: !0
-    })), r = s, a = (w) => {
-      const L = w.target;
-      r("update-value", L.valueAsNumber);
-    }, u = (w) => {
-      const L = w.target;
+    })), r = s, a = (B) => {
+      const C = B.target;
+      r("update-value", C.valueAsNumber);
+    }, u = (B) => {
+      const C = B.target;
       if (t.value) {
-        const Z = Math.min(L.valueAsNumber, o.value);
-        r("update-value", [Z, o.value]);
+        const I = Math.min(C.valueAsNumber, o.value);
+        r("update-value", [I, o.value]);
       }
-    }, g = (w) => {
-      const L = w.target;
+    }, g = (B) => {
+      const C = B.target;
       if (t.value) {
-        const Z = Math.max(n.value, L.valueAsNumber);
-        r("update-value", [n.value, Z]);
+        const I = Math.max(n.value, C.valueAsNumber);
+        r("update-value", [n.value, I]);
       }
-    }, l = P(() => {
-      const w = t.value ? n.value : 0, L = e.max - e.min;
-      return (w - e.min) / L * 100;
-    }), v = P(() => {
-      const w = (t.value, o.value), L = e.max - e.min;
-      return (w - e.min) / L * 100;
-    }), p = P(() => {
-      const w = "var(--theme-colors-brand-secondary-100)", L = "var(--theme-colors-brand-primary-500)";
+    }, l = x(() => {
+      const B = t.value ? n.value : 0, C = e.max - e.min;
+      return (B - e.min) / C * 100;
+    }), v = x(() => {
+      const B = (t.value, o.value), C = e.max - e.min;
+      return (B - e.min) / C * 100;
+    }), P = x(() => {
+      const B = "var(--theme-colors-brand-secondary-100)", C = "var(--theme-colors-brand-primary-500)";
       return {
         background: `linear-gradient(
     to right,
-    ${w} 0%,
-    ${w} ${l.value}%,
-    ${L} ${l.value}%,
-    ${L} ${v.value}%, 
-    ${w} ${v.value}%, 
-    ${w} 100%)`
+    ${B} 0%,
+    ${B} ${l.value}%,
+    ${C} ${l.value}%,
+    ${C} ${v.value}%, 
+    ${B} ${v.value}%, 
+    ${B} 100%)`
       };
-    }), O = H(null), x = H(null), b = H(null), k = P(() => {
-      const w = O.value?.offsetWidth || 0, L = x.value?.offsetWidth || 0, Z = b.value?.offsetWidth || 0, B = L + Z + (t.value ? 12 : 0), Q = w - B;
-      let I = l.value * w * (1 - L / w) / 100, Y = (100 - v.value) * w * (1 - Z / w) / 100;
-      return I + Y > Q && (I > Y ? I = Q - Y : Y = Q - I), {
-        "padding-left": `calc(${I}px)`,
-        "padding-right": `calc(${Y}px)`,
+    }), M = Z(null), p = Z(null), b = Z(null), D = x(() => {
+      const B = M.value?.offsetWidth || 0, C = p.value?.offsetWidth || 0, I = b.value?.offsetWidth || 0, L = C + I + (t.value ? 12 : 0), j = B - L;
+      let Q = l.value * B * (1 - C / B) / 100, w = (100 - v.value) * B * (1 - I / B) / 100;
+      return Q + w > j && (Q > w ? Q = j - w : w = j - Q), {
+        "padding-left": `calc(${Q}px)`,
+        "padding-right": `calc(${w}px)`,
         "justify-content": t.value ? "space-between" : "flex-end",
         gap: t.value ? "var(--spacing-2, 8px)" : "0"
       };
     });
     return xA(() => {
-      O.value = ze("sliderRef"), x.value = ze("fromValueRef"), b.value = ze("toValueRef");
-    }), (w, L) => (f(), m("div", {
+      M.value = ze("sliderRef"), p.value = ze("fromValueRef"), b.value = ze("toValueRef");
+    }), (B, C) => (f(), m("div", {
       class: "utopia-rangeslider",
       ref_key: "sliderRef",
-      ref: O
+      ref: M
     }, [
       t.value ? (f(), m("div", Kt, [
         d("input", {
-          class: C(["utopia-rangeslider__input utopia-rangeslider__input-from", [c.value, i.value]]),
+          class: J(["utopia-rangeslider__input utopia-rangeslider__input-from", [c.value, i.value]]),
           type: "range",
           min: A.min,
           max: A.max,
@@ -1417,8 +1417,8 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
           onInput: u
         }, null, 42, Rt),
         d("input", {
-          class: C(["utopia-rangeslider__input utopia-rangeslider__input-to", c.value]),
-          style: cA(p.value),
+          class: J(["utopia-rangeslider__input utopia-rangeslider__input-to", c.value]),
+          style: cA(P.value),
           type: "range",
           min: A.min,
           max: A.max,
@@ -1427,25 +1427,25 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
         }, null, 46, Ut)
       ])) : (f(), m("div", qt, [
         d("input", {
-          class: C(["utopia-rangeslider__input", c.value]),
-          style: cA(p.value),
+          class: J(["utopia-rangeslider__input", c.value]),
+          style: cA(P.value),
           type: "range",
           min: A.min,
           max: A.max,
           value: typeof A.currentValue == "number" ? A.currentValue : A.min,
           onInput: a
         }, null, 46, _t),
-        L[0] || (L[0] = d("div", { class: "utopia-rangeslider__progress" }, null, -1))
+        C[0] || (C[0] = d("div", { class: "utopia-rangeslider__progress" }, null, -1))
       ])),
       d("div", {
         class: "utopia-rangeslider__range-values-container",
-        style: cA(k.value)
+        style: cA(D.value)
       }, [
         t.value ? (f(), m("div", {
           key: 0,
           class: "utopia-rangeslider__range-value",
           ref_key: "fromValueRef",
-          ref: x
+          ref: p
         }, T(n.value) + T(A.unit ? ` ${A.unit}` : ""), 513)) : y("", !0),
         d("div", {
           class: "utopia-rangeslider__range-value",
@@ -1474,7 +1474,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
   },
   emits: ["update:modelValue"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = P(() => [
+    const e = A, t = s, n = x(() => [
       `bottomsheet--${e.variant}`,
       { "bottomsheet--disabled": e.disabled }
     ]), o = typeof document < "u" ? document.body : null, c = $e(o);
@@ -1490,8 +1490,8 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
     const i = () => {
       !e.closeOnOverlayClick || e.disabled || t("update:modelValue", !1);
     };
-    return (r, a) => (f(), V(EA, { to: "body" }, [
-      J(DA, { name: "utopia-fade" }, {
+    return (r, a) => (f(), S(EA, { to: "body" }, [
+      H(DA, { name: "utopia-fade" }, {
         default: R(() => [
           A.modelValue ? (f(), m("div", {
             key: 0,
@@ -1501,11 +1501,11 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
         ]),
         _: 1
       }),
-      J(DA, { name: "utopia-bottom-sheet" }, {
+      H(DA, { name: "utopia-bottom-sheet" }, {
         default: R(() => [
           A.modelValue ? (f(), m("div", en, [
             d("div", {
-              class: C(["bottomsheet", n.value])
+              class: J(["bottomsheet", n.value])
             }, [
               a[0] || (a[0] = d("div", { class: "bottomsheet__handle" }, null, -1)),
               A.title ? (f(), m("h3", sn, T(A.title), 1)) : y("", !0),
@@ -1563,15 +1563,15 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
   },
   emits: ["update:modelValue", "change", "open", "close", "focus", "blur"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = H(), o = H(), c = H();
-    H();
-    const i = H(), r = H(!1), a = H(!1), u = H(!1), g = H(""), l = H(-1), v = H({ top: "0px", left: "0px", width: "0px" }), p = P(() => `utopia-dropdown-${Math.random().toString(36).substr(2, 9)}`), O = P(() => e.multiple ? Array.isArray(e.modelValue) && e.modelValue.length > 0 : e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), x = P(() => !e.multiple || !Array.isArray(e.modelValue) ? [] : e.options.filter(
+    const e = A, t = s, n = Z(), o = Z(), c = Z();
+    Z();
+    const i = Z(), r = Z(!1), a = Z(!1), u = Z(!1), g = Z(""), l = Z(-1), v = Z({ top: "0px", left: "0px", width: "0px" }), P = x(() => `utopia-dropdown-${Math.random().toString(36).substr(2, 9)}`), M = x(() => e.multiple ? Array.isArray(e.modelValue) && e.modelValue.length > 0 : e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), p = x(() => !e.multiple || !Array.isArray(e.modelValue) ? [] : e.options.filter(
       (X) => e.modelValue.includes(X.value)
-    )), b = P(() => 2), k = P(() => {
+    )), b = x(() => 2), D = x(() => {
       if (!i.value) return !1;
       const { scrollWidth: X, clientWidth: _ } = i.value;
       return X > _ + 2;
-    }), w = () => {
+    }), B = () => {
       if (!i.value) return;
       const { scrollLeft: X, scrollWidth: _, clientWidth: $ } = i.value, nA = _ > $ + 2;
       if (!nA) {
@@ -1580,45 +1580,45 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       }
       const MA = X <= 1, me = Math.abs(_ - $ - X) <= 1;
       r.value = nA && !MA, a.value = nA && !me;
-    }, L = P(() => e.multiple && e.searchable ? "400px" : e.maxHeight || "300px"), Z = P(() => {
-      if (!O.value)
+    }, C = x(() => e.multiple && e.searchable ? "400px" : e.maxHeight || "300px"), I = x(() => {
+      if (!M.value)
         return e.placeholder;
       if (e.multiple && Array.isArray(e.modelValue)) {
-        const _ = x.value;
+        const _ = p.value;
         return _.length === 0 ? e.placeholder : _.length === 1 ? _[0].label : `${_.length} éléments sélectionnés`;
       }
       return e.options.find((_) => _.value === e.modelValue)?.label || e.placeholder;
-    }), B = P(() => !e.searchable || !g.value ? e.options : e.options.filter(
+    }), L = x(() => !e.searchable || !g.value ? e.options : e.options.filter(
       (X) => X.label.toLowerCase().includes(g.value.toLowerCase())
-    )), Q = P(() => ({
+    )), j = x(() => ({
       [`utopia-dropdown--${e.size}`]: !0,
       [`utopia-dropdown--${e.state}`]: !0,
       "utopia-dropdown--disabled": e.disabled,
       "utopia-dropdown--multiple": e.multiple,
       "utopia-dropdown--open": u.value,
       "utopia-dropdown--with-message": e.message
-    })), I = P(() => ({
-      "utopia-dropdown__trigger--with-clear": e.clearable && O.value,
+    })), Q = x(() => ({
+      "utopia-dropdown__trigger--with-clear": e.clearable && M.value,
       "utopia-dropdown__trigger--with-state": e.state === "valid" || e.state === "error",
       "utopia-dropdown__trigger--open": u.value
-    })), Y = P(() => ({
+    })), w = x(() => ({
       [`utopia-dropdown__message--${e.state}`]: e.state === "error" || e.state === "valid"
-    })), S = (X) => e.multiple ? Array.isArray(e.modelValue) && e.modelValue.includes(X) : e.modelValue === X, D = (X, _) => ({
-      "utopia-dropdown__option--selected": S(X.value),
+    })), N = (X) => e.multiple ? Array.isArray(e.modelValue) && e.modelValue.includes(X) : e.modelValue === X, k = (X, _) => ({
+      "utopia-dropdown__option--selected": N(X.value),
       "utopia-dropdown__option--highlighted": l.value === _,
       "utopia-dropdown__option--disabled": X.disabled
-    }), j = () => {
+    }), Y = () => {
       if (!n.value) return;
-      const X = n.value.getBoundingClientRect(), $ = window.innerHeight - X.bottom, nA = X.top, MA = parseInt(L.value.replace("px", "")) || 300, me = $ < MA && nA > MA;
+      const X = n.value.getBoundingClientRect(), $ = window.innerHeight - X.bottom, nA = X.top, MA = parseInt(C.value.replace("px", "")) || 300, me = $ < MA && nA > MA;
       v.value = {
         top: me ? `${X.top - Math.min(MA, nA) - 4}px` : `${X.bottom + 4}px`,
         left: `${X.left}px`,
         width: `${X.width}px`
       };
     }, z = () => {
-      e.disabled || e.readonly || (u.value ? E() : M());
-    }, M = async () => {
-      if (!(e.disabled || e.readonly) && (j(), u.value = !0, l.value = -1, g.value = "", t("open"), await uA(), e.searchable && c.value))
+      e.disabled || e.readonly || (u.value ? E() : O());
+    }, O = async () => {
+      if (!(e.disabled || e.readonly) && (Y(), u.value = !0, l.value = -1, g.value = "", t("open"), await uA(), e.searchable && c.value))
         try {
           const X = c.value?.$el?.querySelector("input");
           X && X.focus();
@@ -1636,7 +1636,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       } else
         _ = X.value, E();
       t("update:modelValue", _), t("change", _);
-    }, N = () => {
+    }, V = () => {
       const X = e.multiple ? [] : "";
       t("update:modelValue", X), t("change", X);
     }, W = (X) => {
@@ -1650,7 +1650,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
           X.preventDefault(), z();
           break;
         case "ArrowDown":
-          X.preventDefault(), u.value ? l.value = Math.min(l.value + 1, B.value.length - 1) : M();
+          X.preventDefault(), u.value ? l.value = Math.min(l.value + 1, L.value.length - 1) : O();
           break;
         case "ArrowUp":
           X.preventDefault(), u.value && (l.value = Math.max(l.value - 1, 0));
@@ -1665,13 +1665,13 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
     }, eA = (X) => {
       switch (X.key) {
         case "ArrowDown":
-          X.preventDefault(), l.value = Math.min(l.value + 1, B.value.length - 1);
+          X.preventDefault(), l.value = Math.min(l.value + 1, L.value.length - 1);
           break;
         case "ArrowUp":
           X.preventDefault(), l.value = Math.max(l.value - 1, 0);
           break;
         case "Enter":
-          X.preventDefault(), l.value >= 0 && B.value[l.value] && h(B.value[l.value]);
+          X.preventDefault(), l.value >= 0 && L.value[l.value] && h(L.value[l.value]);
           break;
         case "Escape":
           X.preventDefault(), E();
@@ -1685,29 +1685,29 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       const _ = X.target;
       u.value && n.value && o.value && !n.value.contains(_) && !o.value.contains(_) && E();
     }, iA = () => {
-      u.value && j();
+      u.value && Y();
     };
     return xA(() => {
       document.addEventListener("click", fA), window.addEventListener("resize", iA), window.addEventListener("scroll", iA, !0), setTimeout(() => {
-        w();
+        B();
       }, 100);
     }), OA(() => {
       document.removeEventListener("click", fA), window.removeEventListener("resize", iA), window.removeEventListener("scroll", iA, !0);
     }), (X, _) => (f(), m("div", {
-      class: C(["utopia-dropdown", Q.value])
+      class: J(["utopia-dropdown", j.value])
     }, [
       A.label ? (f(), m("label", {
         key: 0,
         class: "utopia-dropdown__label",
-        for: p.value
+        for: P.value
       }, T(A.label), 9, on)) : y("", !0),
       d("div", cn, [
         d("button", {
-          id: p.value,
+          id: P.value,
           ref_key: "triggerRef",
           ref: n,
           type: "button",
-          class: C(["utopia-dropdown__trigger", I.value]),
+          class: J(["utopia-dropdown__trigger", Q.value]),
           disabled: A.disabled,
           "aria-expanded": u.value,
           "aria-haspopup": !0,
@@ -1717,21 +1717,21 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
           onBlur: dA
         }, [
           d("div", {
-            class: C(["utopia-dropdown__value", { "utopia-dropdown__value--placeholder": !O.value }])
+            class: J(["utopia-dropdown__value", { "utopia-dropdown__value--placeholder": !M.value }])
           }, [
             A.multiple ? (f(), m(sA, { key: 1 }, [
-              O.value ? (f(), m("div", {
+              M.value ? (f(), m("div", {
                 class: "utopia-dropdown__chips-wrapper",
-                key: `chips-${x.value.length}`
+                key: `chips-${p.value.length}`
               }, [
-                r.value && k.value ? (f(), m("div", fn)) : y("", !0),
+                r.value && D.value ? (f(), m("div", fn)) : y("", !0),
                 d("div", {
                   ref_key: "chipsScrollRef",
                   ref: i,
                   class: "utopia-dropdown__chips",
-                  onScroll: w
+                  onScroll: B
                 }, [
-                  (f(!0), m(sA, null, aA(x.value.slice(0, b.value), ($) => (f(), V(G(HA), {
+                  (f(!0), m(sA, null, aA(p.value.slice(0, b.value), ($) => (f(), S(G(HA), {
                     key: `chip-${$.value}`,
                     size: "small",
                     variant: "default",
@@ -1744,22 +1744,22 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
                     ]),
                     _: 2
                   }, 1032, ["onRemove"]))), 128)),
-                  x.value.length > b.value ? (f(), m("span", ln, " +" + T(x.value.length - b.value) + " autres ", 1)) : y("", !0)
+                  p.value.length > b.value ? (f(), m("span", ln, " +" + T(p.value.length - b.value) + " autres ", 1)) : y("", !0)
                 ], 544),
-                a.value && k.value ? (f(), m("div", dn)) : y("", !0)
+                a.value && D.value ? (f(), m("div", dn)) : y("", !0)
               ])) : (f(), m("span", vn, T(A.placeholder), 1))
-            ], 64)) : (f(), m("span", an, T(Z.value), 1))
+            ], 64)) : (f(), m("span", an, T(I.value), 1))
           ], 2),
-          A.clearable && O.value && !A.disabled ? (f(), m("div", {
+          A.clearable && M.value && !A.disabled ? (f(), m("div", {
             key: 0,
             size: "sm",
             class: "utopia-dropdown__clear",
-            onClick: jA(N, ["stop"]),
+            onClick: jA(V, ["stop"]),
             onMousedown: _[0] || (_[0] = jA(() => {
             }, ["prevent"])),
             icon: "X"
           }, [
-            J(G(F), {
+            H(G(F), {
               name: "X",
               "stroke-width": "2",
               size: "small",
@@ -1767,21 +1767,21 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
             })
           ], 32)) : y("", !0),
           d("div", {
-            class: C(["utopia-dropdown__chevron", { "utopia-dropdown__chevron--open": u.value }])
+            class: J(["utopia-dropdown__chevron", { "utopia-dropdown__chevron--open": u.value }])
           }, [
-            J(G(F), {
+            H(G(F), {
               name: "Chevron-down",
               "stroke-width": "2"
             })
           ], 2),
           A.state === "valid" || A.state === "error" ? (f(), m("div", un, [
-            A.state === "valid" ? (f(), V(G(F), {
+            A.state === "valid" ? (f(), S(G(F), {
               key: 0,
               name: "Check",
               class: "utopia-dropdown__state-icon--valid",
               "stroke-width": "2",
               color: "success"
-            })) : A.state === "error" ? (f(), V(G(F), {
+            })) : A.state === "error" ? (f(), S(G(F), {
               key: 1,
               name: "Alert-triangle",
               class: "utopia-dropdown__state-icon--error",
@@ -1790,7 +1790,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
             })) : y("", !0)
           ])) : y("", !0)
         ], 42, rn),
-        J(DA, { name: "utopia-dropdown-fade" }, {
+        H(DA, { name: "utopia-dropdown-fade" }, {
           default: R(() => [
             u.value ? (f(), m("div", {
               key: 0,
@@ -1798,7 +1798,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
               ref: o,
               class: "utopia-dropdown__menu",
               style: cA({
-                maxHeight: L.value,
+                maxHeight: C.value,
                 top: v.value.top,
                 left: v.value.left,
                 width: v.value.width
@@ -1807,7 +1807,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
               "aria-multiselectable": A.multiple
             }, [
               A.searchable ? (f(), m("div", mn, [
-                J(G(te), {
+                H(G(te), {
                   ref_key: "searchRef",
                   ref: c,
                   modelValue: g.value,
@@ -1820,21 +1820,21 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
                 }, null, 8, ["modelValue"])
               ])) : y("", !0),
               d("div", zn, [
-                (f(!0), m(sA, null, aA(B.value, ($, nA) => (f(), m("div", {
+                (f(!0), m(sA, null, aA(L.value, ($, nA) => (f(), m("div", {
                   key: `option-${$.value}-${nA}`,
-                  class: C(["utopia-dropdown__option", [
-                    D($, nA),
+                  class: J(["utopia-dropdown__option", [
+                    k($, nA),
                     { "utopia-dropdown__option--multiple": A.multiple }
                   ]]),
                   role: "option",
-                  "aria-selected": S($.value),
+                  "aria-selected": N($.value),
                   "aria-disabled": $.disabled,
                   onClick: (MA) => h($),
                   onMouseenter: (MA) => l.value = nA
                 }, [
                   A.multiple ? (f(), m("div", xn, [
-                    J(G(vt), {
-                      modelValue: S($.value),
+                    H(G(vt), {
+                      modelValue: N($.value),
                       disabled: $.disabled,
                       size: "small",
                       class: "utopia-dropdown__checkbox"
@@ -1849,7 +1849,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
                     title: $.label
                   }, T($.label), 9, Mn))
                 ], 42, pn))), 128)),
-                B.value.length === 0 ? (f(), m("div", On, " Aucun résultat trouvé ")) : y("", !0)
+                L.value.length === 0 ? (f(), m("div", On, " Aucun résultat trouvé ")) : y("", !0)
               ])
             ], 12, gn)) : y("", !0)
           ]),
@@ -1858,14 +1858,14 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       ]),
       A.message ? (f(), m("div", {
         key: 1,
-        class: C(["utopia-dropdown__message", Y.value])
+        class: J(["utopia-dropdown__message", w.value])
       }, [
-        A.state === "error" ? (f(), V(G(F), {
+        A.state === "error" ? (f(), S(G(F), {
           key: 0,
           name: "Alert-triangle",
           class: "utopia-dropdown__message-icon",
           "stroke-width": "2"
-        })) : A.state === "valid" ? (f(), V(G(F), {
+        })) : A.state === "valid" ? (f(), S(G(F), {
           key: 1,
           name: "Check",
           class: "utopia-dropdown__message-icon",
@@ -1899,7 +1899,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
   },
   emits: ["retry"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = P(() => e.title ?? He), o = P(() => e.actionLabel ?? Je), c = P(() => e.description), i = P(() => e.spinning), r = P(() => !e.imageSrc && e.preset !== "search"), a = P(() => e.imageSrc ?? (e.preset === "search" ? Bn : void 0)), u = P(() => e.imageAlt ?? (e.preset === "search" ? "Recherche" : "")), g = () => {
+    const e = A, t = s, n = x(() => e.title ?? He), o = x(() => e.actionLabel ?? Je), c = x(() => e.description), i = x(() => e.spinning), r = x(() => !e.imageSrc && e.preset !== "search"), a = x(() => e.imageSrc ?? (e.preset === "search" ? Bn : void 0)), u = x(() => e.imageAlt ?? (e.preset === "search" ? "Recherche" : "")), g = () => {
       if (t("retry"), e.retryAction && typeof e.retryAction == "function")
         try {
           e.retryAction();
@@ -1913,7 +1913,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       d("div", Yn, [
         r.value ? (f(), m(sA, { key: 0 }, [
           d("div", {
-            class: C(["gear-wrapper gear-wrapper--primary", { "spin-20s": i.value }])
+            class: J(["gear-wrapper gear-wrapper--primary", { "spin-20s": i.value }])
           }, [
             d("img", {
               src: G(bn),
@@ -1922,7 +1922,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
             }, null, 8, Dn)
           ], 2),
           d("div", {
-            class: C(["gear-wrapper gear-wrapper--light", { "spin-20s": i.value }])
+            class: J(["gear-wrapper gear-wrapper--light", { "spin-20s": i.value }])
           }, [
             d("img", {
               src: G(wn),
@@ -1940,7 +1940,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       d("div", Gn, [
         d("h3", Zn, T(n.value), 1),
         c.value ? (f(), m("p", Hn, T(c.value), 1)) : y("", !0),
-        o.value ? (f(), V(vA, {
+        o.value ? (f(), S(vA, {
           key: 1,
           class: "utopia-errorstate__action",
           onClick: g,
@@ -1966,7 +1966,7 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
   },
   emits: ["update:filters"],
   setup(A, { emit: s }) {
-    const e = A, t = H({ ...e.filters }), n = s;
+    const e = A, t = Z({ ...e.filters }), n = s;
     rA(
       () => e.filters,
       (c) => {
@@ -1978,13 +1978,13 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       const { [c]: i, ...r } = t.value;
       t.value = r, n("update:filters", t.value);
     };
-    return (c, i) => (f(), V(ks, {
+    return (c, i) => (f(), S(ks, {
       class: "filterchip",
       name: "filterchip",
       tag: "div"
     }, {
       default: R(() => [
-        (f(!0), m(sA, null, aA(t.value, (r, a) => (f(), V(HA, {
+        (f(!0), m(sA, null, aA(t.value, (r, a) => (f(), S(HA, {
           key: a,
           value: String(a),
           variant: e.variant,
@@ -2019,80 +2019,80 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
   },
   emits: ["update:modelValue", "complete", "change", "focus", "blur"],
   setup(A, { expose: s, emit: e }) {
-    const t = A, n = e, o = P(() => `utopia-inputcode-${Math.random().toString(36).substr(2, 9)}`), c = H([]), i = H([]), r = H(-1), a = H([]), u = P(() => Array.from({ length: t.length }, (B, Q) => Q)), g = P(() => ({
+    const t = A, n = e, o = x(() => `utopia-inputcode-${Math.random().toString(36).substr(2, 9)}`), c = Z([]), i = Z([]), r = Z(-1), a = Z([]), u = x(() => Array.from({ length: t.length }, (L, j) => j)), g = x(() => ({
       [`utopia-inputcode--${t.size}`]: !0,
       [`utopia-inputcode--${t.state}`]: !0,
       "utopia-inputcode--disabled": t.disabled,
       "utopia-inputcode--with-label": !!t.label,
       "utopia-inputcode--with-message": !!t.message
-    })), l = P(() => ({
+    })), l = x(() => ({
       [`utopia-inputcode__message--${t.state}`]: t.state === "error" || t.state === "valid"
     })), v = () => {
-      i.value = Array(t.length).fill(""), a.value = Array(t.length).fill("default"), t.modelValue && t.modelValue.split("").slice(0, t.length).forEach((Q, I) => {
-        i.value[I] = Q;
+      i.value = Array(t.length).fill(""), a.value = Array(t.length).fill("default"), t.modelValue && t.modelValue.split("").slice(0, t.length).forEach((j, Q) => {
+        i.value[Q] = j;
       });
-    }, p = (B, Q) => {
-      i.value[B] = Q;
-      const I = i.value.join("");
-      n("update:modelValue", I), n("change", I), Q && B < t.length - 1 && uA(() => {
-        w(B + 1);
-      }), I.length === t.length && n("complete", I);
-    }, O = (B, Q) => {
-      if (Q.key === "Backspace") {
-        Q.preventDefault(), i.value[B] ? i.value[B] = "" : B > 0 && (i.value[B - 1] = "", w(B - 1));
-        const I = i.value.join("");
-        n("update:modelValue", I), n("change", I);
-      } else Q.key === "ArrowLeft" && B > 0 ? (Q.preventDefault(), w(B - 1)) : Q.key === "ArrowRight" && B < t.length - 1 && (Q.preventDefault(), w(B + 1));
-    }, x = (B) => {
-      r.value = B, n("focus", new FocusEvent("focus"));
-    }, b = (B) => {
-      r.value === B && (r.value = -1), n("blur", new FocusEvent("blur"));
-    }, k = (B) => {
-      B.preventDefault();
-      const Q = B.clipboardData?.getData("text") || "";
-      let I;
-      t.type === "number" ? I = Q.split("").filter((j) => /^\d$/.test(j)) : I = Q.split("").filter((j) => /^[A-Za-z0-9]$/.test(j));
-      const Y = I.slice(0, t.length);
-      i.value = Array(t.length).fill(""), Y.forEach((j, z) => {
-        i.value[z] = j.toUpperCase();
+    }, P = (L, j) => {
+      i.value[L] = j;
+      const Q = i.value.join("");
+      n("update:modelValue", Q), n("change", Q), j && L < t.length - 1 && uA(() => {
+        B(L + 1);
+      }), Q.length === t.length && n("complete", Q);
+    }, M = (L, j) => {
+      if (j.key === "Backspace") {
+        j.preventDefault(), i.value[L] ? i.value[L] = "" : L > 0 && (i.value[L - 1] = "", B(L - 1));
+        const Q = i.value.join("");
+        n("update:modelValue", Q), n("change", Q);
+      } else j.key === "ArrowLeft" && L > 0 ? (j.preventDefault(), B(L - 1)) : j.key === "ArrowRight" && L < t.length - 1 && (j.preventDefault(), B(L + 1));
+    }, p = (L) => {
+      r.value = L, n("focus", new FocusEvent("focus"));
+    }, b = (L) => {
+      r.value === L && (r.value = -1), n("blur", new FocusEvent("blur"));
+    }, D = (L) => {
+      L.preventDefault();
+      const j = L.clipboardData?.getData("text") || "";
+      let Q;
+      t.type === "number" ? Q = j.split("").filter((Y) => /^\d$/.test(Y)) : Q = j.split("").filter((Y) => /^[A-Za-z0-9]$/.test(Y));
+      const w = Q.slice(0, t.length);
+      i.value = Array(t.length).fill(""), w.forEach((Y, z) => {
+        i.value[z] = Y.toUpperCase();
       });
-      const S = i.value.join("");
-      n("update:modelValue", S), n("change", S), S.length === t.length && n("complete", S);
-      const D = Y.length < t.length ? Y.length : t.length - 1;
+      const N = i.value.join("");
+      n("update:modelValue", N), n("change", N), N.length === t.length && n("complete", N);
+      const k = w.length < t.length ? w.length : t.length - 1;
       uA(() => {
-        w(D);
+        B(k);
       });
-    }, w = (B) => {
-      if (c.value[B]) {
-        const Q = c.value[B]?.$el?.querySelector("input");
-        Q && (Q.focus(), Q.select());
+    }, B = (L) => {
+      if (c.value[L]) {
+        const j = c.value[L]?.$el?.querySelector("input");
+        j && (j.focus(), j.select());
       }
-    }, L = () => {
+    }, C = () => {
       i.value = Array(t.length).fill(""), n("update:modelValue", ""), n("change", "");
-    }, Z = (B) => {
-      const Q = B.split("").slice(0, t.length);
-      Q.forEach((Y, S) => {
-        i.value[S] = Y.toUpperCase();
+    }, I = (L) => {
+      const j = L.split("").slice(0, t.length);
+      j.forEach((w, N) => {
+        i.value[N] = w.toUpperCase();
       });
-      for (let Y = Q.length; Y < t.length; Y++)
-        i.value[Y] = "";
-      const I = i.value.join("");
-      n("update:modelValue", I), n("change", I);
+      for (let w = j.length; w < t.length; w++)
+        i.value[w] = "";
+      const Q = i.value.join("");
+      n("update:modelValue", Q), n("change", Q);
     };
-    return rA(() => t.modelValue, (B) => {
-      B !== i.value.join("") && Z(B);
+    return rA(() => t.modelValue, (L) => {
+      L !== i.value.join("") && I(L);
     }), rA(() => t.length, () => {
       v();
     }), xA(() => {
       v(), t.autoFocus && !t.disabled && uA(() => {
-        w(0);
+        B(0);
       });
     }), s({
-      focus: () => w(0),
-      clear: L,
-      setValue: Z
-    }), (B, Q) => (f(), m("div", {
-      class: C(["utopia-inputcode", g.value])
+      focus: () => B(0),
+      clear: C,
+      setValue: I
+    }), (L, j) => (f(), m("div", {
+      class: J(["utopia-inputcode", g.value])
     }, [
       A.label ? (f(), m("label", {
         key: 0,
@@ -2101,36 +2101,36 @@ const Vt = ["href", "target"], St = /* @__PURE__ */ U({
       }, T(A.label), 9, En)) : y("", !0),
       d("div", Xn, [
         d("div", Qn, [
-          (f(!0), m(sA, null, aA(u.value, (I, Y) => (f(), V(G(te), {
-            key: `field-${Y}`,
+          (f(!0), m(sA, null, aA(u.value, (Q, w) => (f(), S(G(te), {
+            key: `field-${w}`,
             ref_for: !0,
-            ref: (S) => c.value[Y] = S,
-            modelValue: i.value[Y],
-            "onUpdate:modelValue": [(S) => i.value[Y] = S, (S) => p(Y, S)],
+            ref: (N) => c.value[w] = N,
+            modelValue: i.value[w],
+            "onUpdate:modelValue": [(N) => i.value[w] = N, (N) => P(w, N)],
             type: A.type,
             inputmode: A.inputmode,
             size: A.size,
-            state: a.value[Y],
+            state: a.value[w],
             disabled: A.disabled,
             maxlength: 1,
             "is-code": "",
-            class: C(["utopia-inputcode__field", { "utopia-inputcode__field--active": r.value === Y }]),
-            onKeydown: (S) => O(Y, S),
-            onFocus: (S) => x(Y),
-            onBlur: (S) => b(Y),
-            onPaste: k
+            class: J(["utopia-inputcode__field", { "utopia-inputcode__field--active": r.value === w }]),
+            onKeydown: (N) => M(w, N),
+            onFocus: (N) => p(w),
+            onBlur: (N) => b(w),
+            onPaste: D
           }, null, 8, ["modelValue", "onUpdate:modelValue", "type", "inputmode", "size", "state", "disabled", "class", "onKeydown", "onFocus", "onBlur"]))), 128))
         ]),
         A.message ? (f(), m("div", {
           key: 0,
-          class: C(["utopia-inputcode__message", l.value])
+          class: J(["utopia-inputcode__message", l.value])
         }, [
-          A.state === "error" ? (f(), V(G(F), {
+          A.state === "error" ? (f(), S(G(F), {
             key: 0,
             name: "Alert-triangle",
             class: "utopia-inputcode__message-icon",
             "stroke-width": "2"
-          })) : A.state === "valid" ? (f(), V(G(F), {
+          })) : A.state === "valid" ? (f(), S(G(F), {
             key: 1,
             name: "Check",
             class: "utopia-inputcode__message-icon",
@@ -2499,18 +2499,18 @@ var Qe = {
     delayInitialFocusTimer: void 0,
     // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any
     recentNavEvent: void 0
-  }, i, r = function(z, M, E) {
-    return z && z[M] !== void 0 ? z[M] : o[E || M];
-  }, a = function(z, M) {
-    var E = typeof M?.composedPath == "function" ? M.composedPath() : void 0;
+  }, i, r = function(z, O, E) {
+    return z && z[O] !== void 0 ? z[O] : o[E || O];
+  }, a = function(z, O) {
+    var E = typeof O?.composedPath == "function" ? O.composedPath() : void 0;
     return c.containerGroups.findIndex(function(h) {
-      var N = h.container, W = h.tabbableNodes;
-      return N.contains(z) || E?.includes(N) || W.find(function(K) {
+      var V = h.container, W = h.tabbableNodes;
+      return V.contains(z) || E?.includes(V) || W.find(function(K) {
         return K === z;
       });
     });
   }, u = function(z) {
-    var M = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, E = M.hasFallback, h = E === void 0 ? !1 : E, N = M.params, W = N === void 0 ? [] : N, K = o[z];
+    var O = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, E = O.hasFallback, h = E === void 0 ? !1 : E, V = O.params, W = V === void 0 ? [] : V, K = o[z];
     if (typeof K == "function" && (K = K.apply(void 0, ao(W))), K === !0 && (K = void 0), !K) {
       if (K === void 0 || K === !1)
         return K;
@@ -2537,7 +2537,7 @@ var Qe = {
       if (a(t.activeElement) >= 0)
         z = t.activeElement;
       else {
-        var M = c.tabbableGroups[0], E = M && M.firstTabbableNode;
+        var O = c.tabbableGroups[0], E = O && O.firstTabbableNode;
         z = E || u("fallbackFocus");
       }
     else z === null && (z = u("fallbackFocus"));
@@ -2546,23 +2546,23 @@ var Qe = {
     return z;
   }, l = function() {
     if (c.containerGroups = c.containers.map(function(z) {
-      var M = so(z, o.tabbableOptions), E = to(z, o.tabbableOptions), h = M.length > 0 ? M[0] : void 0, N = M.length > 0 ? M[M.length - 1] : void 0, W = E.find(function(tA) {
+      var O = so(z, o.tabbableOptions), E = to(z, o.tabbableOptions), h = O.length > 0 ? O[0] : void 0, V = O.length > 0 ? O[O.length - 1] : void 0, W = E.find(function(tA) {
         return ZA(tA);
       }), K = E.slice().reverse().find(function(tA) {
         return ZA(tA);
-      }), eA = !!M.find(function(tA) {
+      }), eA = !!O.find(function(tA) {
         return BA(tA) > 0;
       });
       return {
         container: z,
-        tabbableNodes: M,
+        tabbableNodes: O,
         focusableNodes: E,
         /** True if at least one node with positive `tabindex` was found in this container. */
         posTabIndexesFound: eA,
         /** First tabbable node in container, __tabindex__ order; `undefined` if none. */
         firstTabbableNode: h,
         /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */
-        lastTabbableNode: N,
+        lastTabbableNode: V,
         // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out
         //  would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
         //  because that API doesn't work with Shadow DOM as well as it should (@see
@@ -2583,12 +2583,12 @@ var Qe = {
          * @returns {HTMLElement|undefined} The next tabbable node, if any.
          */
         nextTabbableNode: function(dA) {
-          var fA = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, iA = M.indexOf(dA);
+          var fA = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, iA = O.indexOf(dA);
           return iA < 0 ? fA ? E.slice(E.indexOf(dA) + 1).find(function(X) {
             return ZA(X);
           }) : E.slice(0, E.indexOf(dA)).reverse().find(function(X) {
             return ZA(X);
-          }) : M[iA + (fA ? 1 : -1)];
+          }) : O[iA + (fA ? 1 : -1)];
         }
       };
     }), c.tabbableGroups = c.containerGroups.filter(function(z) {
@@ -2600,57 +2600,57 @@ var Qe = {
     }) && c.containerGroups.length > 1)
       throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
   }, v = function(z) {
-    var M = z.activeElement;
-    if (M)
-      return M.shadowRoot && M.shadowRoot.activeElement !== null ? v(M.shadowRoot) : M;
-  }, p = function(z) {
+    var O = z.activeElement;
+    if (O)
+      return O.shadowRoot && O.shadowRoot.activeElement !== null ? v(O.shadowRoot) : O;
+  }, P = function(z) {
     if (z !== !1 && z !== v(document)) {
       if (!z || !z.focus) {
-        p(g());
+        P(g());
         return;
       }
       z.focus({
         preventScroll: !!o.preventScroll
       }), c.mostRecentlyFocusedNode = z, uo(z) && z.select();
     }
-  }, O = function(z) {
-    var M = u("setReturnFocus", {
+  }, M = function(z) {
+    var O = u("setReturnFocus", {
       params: [z]
     });
-    return M || (M === !1 ? !1 : z);
-  }, x = function(z) {
-    var M = z.target, E = z.event, h = z.isBackward, N = h === void 0 ? !1 : h;
-    M = M || UA(E), l();
+    return O || (O === !1 ? !1 : z);
+  }, p = function(z) {
+    var O = z.target, E = z.event, h = z.isBackward, V = h === void 0 ? !1 : h;
+    O = O || UA(E), l();
     var W = null;
     if (c.tabbableGroups.length > 0) {
-      var K = a(M, E), eA = K >= 0 ? c.containerGroups[K] : void 0;
+      var K = a(O, E), eA = K >= 0 ? c.containerGroups[K] : void 0;
       if (K < 0)
-        N ? W = c.tabbableGroups[c.tabbableGroups.length - 1].lastTabbableNode : W = c.tabbableGroups[0].firstTabbableNode;
-      else if (N) {
+        V ? W = c.tabbableGroups[c.tabbableGroups.length - 1].lastTabbableNode : W = c.tabbableGroups[0].firstTabbableNode;
+      else if (V) {
         var tA = c.tabbableGroups.findIndex(function($) {
           var nA = $.firstTabbableNode;
-          return M === nA;
+          return O === nA;
         });
-        if (tA < 0 && (eA.container === M || pe(M, o.tabbableOptions) && !ZA(M, o.tabbableOptions) && !eA.nextTabbableNode(M, !1)) && (tA = K), tA >= 0) {
+        if (tA < 0 && (eA.container === O || pe(O, o.tabbableOptions) && !ZA(O, o.tabbableOptions) && !eA.nextTabbableNode(O, !1)) && (tA = K), tA >= 0) {
           var dA = tA === 0 ? c.tabbableGroups.length - 1 : tA - 1, fA = c.tabbableGroups[dA];
-          W = BA(M) >= 0 ? fA.lastTabbableNode : fA.lastDomTabbableNode;
-        } else NA(E) || (W = eA.nextTabbableNode(M, !1));
+          W = BA(O) >= 0 ? fA.lastTabbableNode : fA.lastDomTabbableNode;
+        } else NA(E) || (W = eA.nextTabbableNode(O, !1));
       } else {
         var iA = c.tabbableGroups.findIndex(function($) {
           var nA = $.lastTabbableNode;
-          return M === nA;
+          return O === nA;
         });
-        if (iA < 0 && (eA.container === M || pe(M, o.tabbableOptions) && !ZA(M, o.tabbableOptions) && !eA.nextTabbableNode(M)) && (iA = K), iA >= 0) {
+        if (iA < 0 && (eA.container === O || pe(O, o.tabbableOptions) && !ZA(O, o.tabbableOptions) && !eA.nextTabbableNode(O)) && (iA = K), iA >= 0) {
           var X = iA === c.tabbableGroups.length - 1 ? 0 : iA + 1, _ = c.tabbableGroups[X];
-          W = BA(M) >= 0 ? _.firstTabbableNode : _.firstDomTabbableNode;
-        } else NA(E) || (W = eA.nextTabbableNode(M));
+          W = BA(O) >= 0 ? _.firstTabbableNode : _.firstDomTabbableNode;
+        } else NA(E) || (W = eA.nextTabbableNode(O));
       }
     } else
       W = u("fallbackFocus");
     return W;
   }, b = function(z) {
-    var M = UA(z);
-    if (!(a(M, z) >= 0)) {
+    var O = UA(z);
+    if (!(a(O, z) >= 0)) {
       if (hA(o.clickOutsideDeactivates, z)) {
         i.deactivate({
           // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
@@ -2665,13 +2665,13 @@ var Qe = {
       }
       hA(o.allowOutsideClick, z) || z.preventDefault();
     }
-  }, k = function(z) {
-    var M = UA(z), E = a(M, z) >= 0;
-    if (E || M instanceof Document)
-      E && (c.mostRecentlyFocusedNode = M);
+  }, D = function(z) {
+    var O = UA(z), E = a(O, z) >= 0;
+    if (E || O instanceof Document)
+      E && (c.mostRecentlyFocusedNode = O);
     else {
       z.stopImmediatePropagation();
-      var h, N = !0;
+      var h, V = !0;
       if (c.mostRecentlyFocusedNode)
         if (BA(c.mostRecentlyFocusedNode) > 0) {
           var W = a(c.mostRecentlyFocusedNode), K = c.containerGroups[W].tabbableNodes;
@@ -2679,70 +2679,70 @@ var Qe = {
             var eA = K.findIndex(function(tA) {
               return tA === c.mostRecentlyFocusedNode;
             });
-            eA >= 0 && (o.isKeyForward(c.recentNavEvent) ? eA + 1 < K.length && (h = K[eA + 1], N = !1) : eA - 1 >= 0 && (h = K[eA - 1], N = !1));
+            eA >= 0 && (o.isKeyForward(c.recentNavEvent) ? eA + 1 < K.length && (h = K[eA + 1], V = !1) : eA - 1 >= 0 && (h = K[eA - 1], V = !1));
           }
         } else
           c.containerGroups.some(function(tA) {
             return tA.tabbableNodes.some(function(dA) {
               return BA(dA) > 0;
             });
-          }) || (N = !1);
+          }) || (V = !1);
       else
-        N = !1;
-      N && (h = x({
+        V = !1;
+      V && (h = p({
         // move FROM the MRU node, not event-related node (which will be the node that is
         //  outside the trap causing the focus escape we're trying to fix)
         target: c.mostRecentlyFocusedNode,
         isBackward: o.isKeyBackward(c.recentNavEvent)
-      })), p(h || c.mostRecentlyFocusedNode || g());
+      })), P(h || c.mostRecentlyFocusedNode || g());
     }
     c.recentNavEvent = void 0;
-  }, w = function(z) {
-    var M = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
+  }, B = function(z) {
+    var O = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
     c.recentNavEvent = z;
-    var E = x({
+    var E = p({
       event: z,
-      isBackward: M
+      isBackward: O
     });
-    E && (NA(z) && z.preventDefault(), p(E));
-  }, L = function(z) {
-    (o.isKeyForward(z) || o.isKeyBackward(z)) && w(z, o.isKeyBackward(z));
-  }, Z = function(z) {
+    E && (NA(z) && z.preventDefault(), P(E));
+  }, C = function(z) {
+    (o.isKeyForward(z) || o.isKeyBackward(z)) && B(z, o.isKeyBackward(z));
+  }, I = function(z) {
     go(z) && hA(o.escapeDeactivates, z) !== !1 && (z.preventDefault(), i.deactivate());
-  }, B = function(z) {
-    var M = UA(z);
-    a(M, z) >= 0 || hA(o.clickOutsideDeactivates, z) || hA(o.allowOutsideClick, z) || (z.preventDefault(), z.stopImmediatePropagation());
-  }, Q = function() {
+  }, L = function(z) {
+    var O = UA(z);
+    a(O, z) >= 0 || hA(o.clickOutsideDeactivates, z) || hA(o.allowOutsideClick, z) || (z.preventDefault(), z.stopImmediatePropagation());
+  }, j = function() {
     if (c.active)
       return Qe.activateTrap(n, i), c.delayInitialFocusTimer = o.delayInitialFocus ? he(function() {
-        p(g());
-      }) : p(g()), t.addEventListener("focusin", k, !0), t.addEventListener("mousedown", b, {
+        P(g());
+      }) : P(g()), t.addEventListener("focusin", D, !0), t.addEventListener("mousedown", b, {
         capture: !0,
         passive: !1
       }), t.addEventListener("touchstart", b, {
         capture: !0,
         passive: !1
-      }), t.addEventListener("click", B, {
+      }), t.addEventListener("click", L, {
         capture: !0,
         passive: !1
-      }), t.addEventListener("keydown", L, {
+      }), t.addEventListener("keydown", C, {
         capture: !0,
         passive: !1
-      }), t.addEventListener("keydown", Z), i;
-  }, I = function() {
+      }), t.addEventListener("keydown", I), i;
+  }, Q = function() {
     if (c.active)
-      return t.removeEventListener("focusin", k, !0), t.removeEventListener("mousedown", b, !0), t.removeEventListener("touchstart", b, !0), t.removeEventListener("click", B, !0), t.removeEventListener("keydown", L, !0), t.removeEventListener("keydown", Z), i;
-  }, Y = function(z) {
-    var M = z.some(function(E) {
+      return t.removeEventListener("focusin", D, !0), t.removeEventListener("mousedown", b, !0), t.removeEventListener("touchstart", b, !0), t.removeEventListener("click", L, !0), t.removeEventListener("keydown", C, !0), t.removeEventListener("keydown", I), i;
+  }, w = function(z) {
+    var O = z.some(function(E) {
       var h = Array.from(E.removedNodes);
-      return h.some(function(N) {
-        return N === c.mostRecentlyFocusedNode;
+      return h.some(function(V) {
+        return V === c.mostRecentlyFocusedNode;
       });
     });
-    M && p(g());
-  }, S = typeof window < "u" && "MutationObserver" in window ? new MutationObserver(Y) : void 0, D = function() {
-    S && (S.disconnect(), c.active && !c.paused && c.containers.map(function(z) {
-      S.observe(z, {
+    O && P(g());
+  }, N = typeof window < "u" && "MutationObserver" in window ? new MutationObserver(w) : void 0, k = function() {
+    N && (N.disconnect(), c.active && !c.paused && c.containers.map(function(z) {
+      N.observe(z, {
         subtree: !0,
         childList: !0
       });
@@ -2758,30 +2758,30 @@ var Qe = {
     activate: function(z) {
       if (c.active)
         return this;
-      var M = r(z, "onActivate"), E = r(z, "onPostActivate"), h = r(z, "checkCanFocusTrap");
-      h || l(), c.active = !0, c.paused = !1, c.nodeFocusedBeforeActivation = v(t), M?.();
-      var N = function() {
-        h && l(), Q(), D(), E?.();
+      var O = r(z, "onActivate"), E = r(z, "onPostActivate"), h = r(z, "checkCanFocusTrap");
+      h || l(), c.active = !0, c.paused = !1, c.nodeFocusedBeforeActivation = v(t), O?.();
+      var V = function() {
+        h && l(), j(), k(), E?.();
       };
-      return h ? (h(c.containers.concat()).then(N, N), this) : (N(), this);
+      return h ? (h(c.containers.concat()).then(V, V), this) : (V(), this);
     },
     deactivate: function(z) {
       if (!c.active)
         return this;
-      var M = Xe({
+      var O = Xe({
         onDeactivate: o.onDeactivate,
         onPostDeactivate: o.onPostDeactivate,
         checkCanReturnFocus: o.checkCanReturnFocus
       }, z);
-      clearTimeout(c.delayInitialFocusTimer), c.delayInitialFocusTimer = void 0, I(), c.active = !1, c.paused = !1, D(), Qe.deactivateTrap(n, i);
-      var E = r(M, "onDeactivate"), h = r(M, "onPostDeactivate"), N = r(M, "checkCanReturnFocus"), W = r(M, "returnFocus", "returnFocusOnDeactivate");
+      clearTimeout(c.delayInitialFocusTimer), c.delayInitialFocusTimer = void 0, Q(), c.active = !1, c.paused = !1, k(), Qe.deactivateTrap(n, i);
+      var E = r(O, "onDeactivate"), h = r(O, "onPostDeactivate"), V = r(O, "checkCanReturnFocus"), W = r(O, "returnFocus", "returnFocusOnDeactivate");
       E?.();
       var K = function() {
         he(function() {
-          W && p(O(c.nodeFocusedBeforeActivation)), h?.();
+          W && P(M(c.nodeFocusedBeforeActivation)), h?.();
         });
       };
-      return W && N ? (N(O(c.nodeFocusedBeforeActivation)).then(K, K), this) : (K(), this);
+      return W && V ? (V(M(c.nodeFocusedBeforeActivation)).then(K, K), this) : (K(), this);
     },
     pause: function(z) {
       return c.active ? (c.manuallyPaused = !0, this._setPausedState(!0, z)) : this;
@@ -2790,10 +2790,10 @@ var Qe = {
       return c.active ? (c.manuallyPaused = !1, n[n.length - 1] !== this ? this : this._setPausedState(!1, z)) : this;
     },
     updateContainerElements: function(z) {
-      var M = [].concat(z).filter(Boolean);
-      return c.containers = M.map(function(E) {
+      var O = [].concat(z).filter(Boolean);
+      return c.containers = O.map(function(E) {
         return typeof E == "string" ? t.querySelector(E) : E;
-      }), c.active && l(), D(), this;
+      }), c.active && l(), k(), this;
     }
   }, Object.defineProperties(i, {
     _isManuallyPaused: {
@@ -2802,15 +2802,15 @@ var Qe = {
       }
     },
     _setPausedState: {
-      value: function(z, M) {
+      value: function(z, O) {
         if (c.paused === z)
           return this;
         if (c.paused = z, z) {
-          var E = r(M, "onPause"), h = r(M, "onPostPause");
-          E?.(), I(), D(), h?.();
+          var E = r(O, "onPause"), h = r(O, "onPostPause");
+          E?.(), Q(), k(), h?.();
         } else {
-          var N = r(M, "onUnpause"), W = r(M, "onPostUnpause");
-          N?.(), l(), Q(), D(), W?.();
+          var V = r(O, "onUnpause"), W = r(O, "onPostUnpause");
+          V?.(), l(), j(), k(), W?.();
         }
         return this;
       }
@@ -2819,15 +2819,15 @@ var Qe = {
 };
 function Po(A, s = {}) {
   let e;
-  const { immediate: t, ...n } = s, o = H(!1), c = H(!1), i = (l) => e && e.activate(l), r = (l) => e && e.deactivate(l), a = () => {
+  const { immediate: t, ...n } = s, o = Z(!1), c = Z(!1), i = (l) => e && e.activate(l), r = (l) => e && e.deactivate(l), a = () => {
     e && (e.pause(), c.value = !0);
   }, u = () => {
     e && (e.unpause(), c.value = !1);
-  }, g = P(() => {
+  }, g = x(() => {
     const l = Ce(A);
     return (Array.isArray(l) ? l : [l]).map((v) => {
-      const p = Ce(v);
-      return typeof p == "string" ? p : Ls(p);
+      const P = Ce(v);
+      return typeof P == "string" ? P : Ls(P);
     }).filter(Fn);
   });
   return rA(
@@ -2875,12 +2875,13 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
     focusTrap: { type: Boolean, default: !0 },
     blurBackdrop: { type: Boolean, default: !1 },
     animation: { default: "slide-top" },
+    mobileBehavior: { default: "bottom-sheet" },
     onOpenChange: {}
   },
   emits: ["update:open", "openChange"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = Xs("(max-width: 768px)"), o = P(() => {
-      if (n.value)
+    const e = A, t = s, n = Xs("(max-width: 768px)"), o = x(() => n.value && e.mobileBehavior === "bottom-sheet"), c = x(() => {
+      if (o.value)
         return "utopia-bottom-sheet";
       switch (e.animation) {
         case "slide-horizontal":
@@ -2892,116 +2893,119 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
         case "slide-bottom":
           return "utopia-slide-bottom";
       }
-    }), c = P(() => e.open !== void 0), i = H(e.defaultOpen ?? !1), r = P(
-      () => c.value ? e.open : i.value
-    ), a = `utopia-modal-${Math.random().toString(36).slice(2, 8)}`, u = P(() => e.title ? `${a}-title` : ""), g = H(!1), l = P(() => ({
+    }), i = x(() => e.open !== void 0), r = Z(e.defaultOpen ?? !1), a = x(
+      () => i.value ? e.open : r.value
+    ), u = x(() => !!e.showHeader), g = `utopia-modal-${Math.random().toString(36).slice(2, 8)}`, l = x(() => e.title ? `${g}-title` : ""), v = Z(!1), P = x(() => ({
       sm: "small",
       md: "medium",
       lg: "large",
       full: "large"
-    })[e.size]), v = H(null), p = H(null), O = typeof document < "u" ? document.body : null, x = $e(O), { activate: b, deactivate: k } = Po(v, {
+    })[e.size]), M = Z(null), p = Z(null), b = typeof document < "u" ? document.body : null, D = $e(b), { activate: B, deactivate: C } = Po(M, {
       immediate: !1,
       escapeDeactivates: !1,
       returnFocusOnDeactivate: !0,
       allowOutsideClick: !0,
       initialFocus: () => {
         if (p.value) {
-          const B = p.value.$el || p.value;
-          if (B && B instanceof HTMLElement)
-            return B;
+          const Q = p.value.$el || p.value;
+          if (Q && Q instanceof HTMLElement)
+            return Q;
         }
-        const Z = v.value;
-        return Z ? Z.querySelector("[data-utopia-modal-close]") ?? Z.querySelector(".utopia-modal__close button") ?? Z.querySelector("button") ?? Z.querySelector("[autofocus]") ?? Z : null;
+        const j = M.value;
+        return j ? j.querySelector("[data-utopia-modal-close]") ?? j.querySelector(".utopia-modal__close button") ?? j.querySelector("button") ?? j.querySelector("[autofocus]") ?? j : null;
       },
-      fallbackFocus: () => v.value
+      fallbackFocus: () => M.value
     });
     rA(
-      () => r.value,
-      async (Z, B) => {
-        if (Z === B) return;
-        if (Z) {
-          if (e.disableScrollLock || (x.value = !0), await uA(), e.focusTrap) {
-            b(), await uA();
-            let I = null;
-            p.value && (I = p.value.$el || p.value), I || (I = v.value?.querySelector("[data-utopia-modal-close]") || v.value?.querySelector(".utopia-modal__close button") || v.value?.querySelector("button")), I && I.focus();
+      () => a.value,
+      async (j, Q) => {
+        if (j === Q) return;
+        if (j) {
+          if (e.disableScrollLock || (D.value = !0), await uA(), e.focusTrap) {
+            B(), await uA();
+            let N = null;
+            p.value && (N = p.value.$el || p.value), N || (N = M.value?.querySelector("[data-utopia-modal-close]") || M.value?.querySelector(".utopia-modal__close button") || M.value?.querySelector("button")), N && N.focus();
           }
         } else
-          e.disableScrollLock || (x.value = !1), k();
-        if (g.value) {
-          g.value = !1;
+          e.disableScrollLock || (D.value = !1), C();
+        if (v.value) {
+          v.value = !1;
           return;
         }
-        const Q = Z ? "open" : "close";
-        t("openChange", Z, Q), e.onOpenChange?.(Z, Q);
+        const w = j ? "open" : "close";
+        t("openChange", j, w), e.onOpenChange?.(j, w);
       },
       { immediate: !0 }
     );
-    function w(Z) {
-      r.value && (g.value = !0, c.value ? t("update:open", !1) : i.value = !1, t("openChange", !1, Z), e.onOpenChange?.(!1, Z), e.disableScrollLock || (x.value = !1), k());
+    function I(j) {
+      a.value && (v.value = !0, i.value ? t("update:open", !1) : r.value = !1, t("openChange", !1, j), e.onOpenChange?.(!1, j), e.disableScrollLock || (D.value = !1), C());
     }
-    Qs(window, "keydown", (Z) => {
-      r.value && Z.key === "Escape" && w("escape");
+    Qs(window, "keydown", (j) => {
+      a.value && j.key === "Escape" && I("escape");
     });
     function L() {
-      e.closeOnOverlayClick && w("overlay");
+      e.closeOnOverlayClick && I("overlay");
     }
     return OA(() => {
-      e.disableScrollLock || (x.value = !1), k();
-    }), (Z, B) => (f(), V(EA, { to: "body" }, [
+      e.disableScrollLock || (D.value = !1), C();
+    }), (j, Q) => (f(), S(EA, { to: "body" }, [
       d("div", {
-        class: C(["utopia-modal", [
+        class: J(["utopia-modal", [
           `utopia-modal--${A.position}`,
-          { "is-open": r.value, "is-mobile": G(n) }
+          {
+            "is-open": a.value,
+            "is-mobile": o.value
+          }
         ]]),
-        "aria-hidden": !r.value
+        "aria-hidden": !a.value
       }, [
-        J(DA, { name: "utopia-fade" }, {
+        H(DA, { name: "utopia-fade" }, {
           default: R(() => [
-            r.value ? (f(), m("div", {
+            a.value ? (f(), m("div", {
               key: 0,
-              class: C(["utopia-modal__overlay", { "utopia-modal__overlay--blur": A.blurBackdrop }]),
+              class: J(["utopia-modal__overlay", { "utopia-modal__overlay--blur": A.blurBackdrop }]),
               onClick: L,
               "aria-hidden": "true"
             }, null, 2)) : y("", !0)
           ]),
           _: 1
         }),
-        J(DA, { name: o.value }, {
+        H(DA, { name: c.value }, {
           default: R(() => [
-            r.value ? (f(), m("div", {
+            a.value ? (f(), m("div", {
               key: 0,
               ref_key: "panelRef",
-              ref: v,
-              class: C(["utopia-modal__panel", [`utopia-modal__panel--${A.size}`]]),
+              ref: M,
+              class: J(["utopia-modal__panel", [`utopia-modal__panel--${A.size}`]]),
               role: "dialog",
               "aria-modal": "true",
-              "aria-labelledby": u.value || void 0,
+              "aria-labelledby": l.value || void 0,
               tabindex: "-1"
             }, [
-              A.showHeader ? (f(), m("header", yo, [
-                AA(Z.$slots, "header", {}, () => [
+              u.value ? (f(), m("header", yo, [
+                AA(j.$slots, "header", {}, () => [
                   A.title ? (f(), m("h3", {
                     key: 0,
                     class: "utopia-modal__title",
-                    id: u.value
+                    id: l.value
                   }, T(A.title), 9, bo)) : y("", !0)
                 ], !0),
-                A.showCloseButton ? (f(), V(vA, {
+                A.showCloseButton ? (f(), S(vA, {
                   key: 0,
                   ref_key: "closeButtonRef",
                   ref: p,
                   class: "utopia-modal__close",
                   variant: "tertiary",
                   size: "sm",
-                  onClick: B[0] || (B[0] = (Q) => w("close-button")),
+                  onClick: Q[0] || (Q[0] = (w) => I("close-button")),
                   "aria-label": "Fermer la modal",
                   "data-utopia-modal-close": ""
                 }, {
                   default: R(() => [
-                    B[2] || (B[2] = d("span", { class: "utopia-modal__close-label" }, "Fermer", -1)),
-                    J(F, {
+                    Q[2] || (Q[2] = d("span", { class: "utopia-modal__close-label" }, "Fermer", -1)),
+                    H(F, {
                       name: "X",
-                      size: l.value,
+                      size: P.value,
                       "stroke-width": 3,
                       color: "current",
                       class: "utopia-modal__close-icon"
@@ -3010,22 +3014,22 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
                   _: 1
                 }, 512)) : y("", !0)
               ])) : y("", !0),
-              !A.showHeader && !Z.$slots.header && A.showCloseButton ? (f(), V(vA, {
+              !u.value && !j.$slots.header && A.showCloseButton ? (f(), S(vA, {
                 key: 1,
                 ref_key: "closeButtonRef",
                 ref: p,
                 class: "utopia-modal__close utopia-modal__close--floating",
                 variant: "tertiary",
                 size: "sm",
-                onClick: B[1] || (B[1] = (Q) => w("close-button")),
+                onClick: Q[1] || (Q[1] = (w) => I("close-button")),
                 "aria-label": "Fermer la modal",
                 "data-utopia-modal-close": ""
               }, {
                 default: R(() => [
-                  B[3] || (B[3] = d("span", { class: "utopia-modal__close-label" }, "Fermer", -1)),
-                  J(F, {
+                  Q[3] || (Q[3] = d("span", { class: "utopia-modal__close-label" }, "Fermer", -1)),
+                  H(F, {
                     name: "X",
-                    size: l.value,
+                    size: P.value,
                     "stroke-width": 3,
                     color: "current",
                     class: "utopia-modal__close-icon"
@@ -3034,11 +3038,11 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
                 _: 1
               }, 512)) : y("", !0),
               d("div", wo, [
-                AA(Z.$slots, "default", {}, void 0, !0)
+                AA(j.$slots, "default", {}, void 0, !0)
               ]),
-              A.showFooter && Z.$slots.footer ? (f(), m("footer", Bo, [
+              A.showFooter && j.$slots.footer ? (f(), m("footer", Bo, [
                 d("div", jo, [
-                  AA(Z.$slots, "footer", {}, void 0, !0)
+                  AA(j.$slots, "footer", {}, void 0, !0)
                 ])
               ])) : y("", !0)
             ], 10, Oo)) : y("", !0)
@@ -3048,7 +3052,7 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
       ], 10, Mo)
     ]));
   }
-}), Ca = /* @__PURE__ */ q(Yo, [["__scopeId", "data-v-6ae7243a"]]), Do = { class: "utopia-pricetag" }, ko = { key: 0 }, To = { key: 1 }, Go = { class: "utopia-pricetag--price-container" }, Zo = {
+}), Ca = /* @__PURE__ */ q(Yo, [["__scopeId", "data-v-f0fcbc3f"]]), Do = { class: "utopia-pricetag" }, ko = { key: 0 }, To = { key: 1 }, Go = { class: "utopia-pricetag--price-container" }, Zo = {
   key: 0,
   class: "utopia-pricetag--old-price"
 }, Ho = /* @__PURE__ */ U({
@@ -3063,10 +3067,10 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
     language: { default: "fr" }
   },
   setup(A) {
-    const s = A, e = P(() => ({
+    const s = A, e = x(() => ({
       "utopia-pricetag--subventioned": s.isSubventioned,
       "utopia-pricetag--discounted": s.isDiscounted && !s.isSubventioned
-    })), t = P(() => ({
+    })), t = x(() => ({
       fr: {
         availableOffers: "offres disponibles dès",
         from: "À partir de"
@@ -3075,12 +3079,12 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
         availableOffers: "available offers",
         from: "From"
       }
-    })), n = P(() => t.value[s.language]);
+    })), n = x(() => t.value[s.language]);
     return (o, c) => (f(), m("div", Do, [
       A.variantCount ? (f(), m("div", ko, T(A.variantCount) + " " + T(n.value.availableOffers), 1)) : A.isSubventioned ? (f(), m("div", To, T(n.value.from), 1)) : y("", !0),
       d("div", Go, [
         d("div", {
-          class: C(["utopia-pricetag--price", e.value])
+          class: J(["utopia-pricetag--price", e.value])
         }, T(A.price) + " " + T(A.currency), 3),
         A.oldPrice ? (f(), m("div", Zo, [
           d("s", null, T(A.oldPrice) + " " + T(A.currency), 1)
@@ -3099,7 +3103,7 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
   },
   emits: ["update:modelValue", "search", "focus", "blur"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = H(e.modelValue), o = H(!1), c = P(() => ({
+    const e = A, t = s, n = Z(e.modelValue), o = Z(!1), c = x(() => ({
       [`utopia-search-box--${e.size}`]: !0,
       "utopia-search-box--focused": o.value,
       "utopia-search-box--disabled": e.disabled
@@ -3118,9 +3122,9 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
       n.value = "", t("update:modelValue", ""), t("search", "");
     }
     return (g, l) => (f(), m("div", {
-      class: C(["utopia-search-box", c.value])
+      class: J(["utopia-search-box", c.value])
     }, [
-      J(G(F), {
+      H(G(F), {
         name: "Search",
         class: "search-icon"
       }),
@@ -3141,7 +3145,7 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
         class: "clear-button",
         type: "button"
       }, [
-        J(G(F), { name: "X" })
+        H(G(F), { name: "X" })
       ])) : y("", !0)
     ], 2));
   }
@@ -3163,92 +3167,92 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
   },
   emits: ["slide-change"],
   setup(A, { emit: s }) {
-    Gs((Y) => ({
-      d725a716: Y.height
+    Gs((w) => ({
+      d725a716: w.height
     }));
-    const e = A, t = s, n = H(0), o = H(!1);
+    const e = A, t = s, n = Z(0), o = Z(!1);
     let c = null, i = null;
-    const r = H(!1), a = H(0), u = H(0), g = H(0), l = H(0), v = H(0), p = P(() => {
-      const Y = -n.value * 100, S = r.value ? v.value : 0;
+    const r = Z(!1), a = Z(0), u = Z(0), g = Z(0), l = Z(0), v = Z(0), P = x(() => {
+      const w = -n.value * 100, N = r.value ? v.value : 0;
       return e.direction === "vertical" ? {
-        transform: `translateY(calc(${Y}% + ${S}px))`,
+        transform: `translateY(calc(${w}% + ${N}px))`,
         transition: r.value ? "none" : `transform ${e.transitionDuration}ms ease-in-out`
       } : {
-        transform: `translateX(calc(${Y}% + ${S}px))`,
+        transform: `translateX(calc(${w}% + ${N}px))`,
         transition: r.value ? "none" : `transform ${e.transitionDuration}ms ease-in-out`
       };
-    }), O = () => {
+    }), M = () => {
       n.value = (n.value + 1) % e.slides.length;
-    }, x = () => {
+    }, p = () => {
       n.value = n.value === 0 ? e.slides.length - 1 : n.value - 1;
-    }, b = (Y) => {
-      n.value = Y;
-    }, k = () => {
+    }, b = (w) => {
+      n.value = w;
+    }, D = () => {
       i && clearTimeout(i), i = window.setTimeout(() => {
         o.value = !0;
-      }, 200), e.autoplay && Z();
-    }, w = () => {
-      i && (clearTimeout(i), i = null), o.value = !1, e.autoplay && L();
-    }, L = () => {
-      e.autoplay && e.slides.length > 1 && (c = window.setInterval(O, e.autoplayDelay));
-    }, Z = () => {
+      }, 200), e.autoplay && I();
+    }, B = () => {
+      i && (clearTimeout(i), i = null), o.value = !1, e.autoplay && C();
+    }, C = () => {
+      e.autoplay && e.slides.length > 1 && (c = window.setInterval(M, e.autoplayDelay));
+    }, I = () => {
       c && (clearInterval(c), c = null);
-    }, B = (Y) => {
+    }, L = (w) => {
       if (!(e.slides.length <= 1)) {
-        if (r.value = !0, v.value = 0, Y.type === "touchstart") {
-          const S = Y.touches[0];
-          a.value = S.clientX, u.value = S.clientY;
+        if (r.value = !0, v.value = 0, w.type === "touchstart") {
+          const N = w.touches[0];
+          a.value = N.clientX, u.value = N.clientY;
         } else
-          Y.preventDefault(), a.value = Y.clientX, u.value = Y.clientY, document.addEventListener("mousemove", Q), document.addEventListener("mouseup", I);
-        Z();
+          w.preventDefault(), a.value = w.clientX, u.value = w.clientY, document.addEventListener("mousemove", j), document.addEventListener("mouseup", Q);
+        I();
       }
-    }, Q = (Y) => {
+    }, j = (w) => {
       if (!r.value) return;
-      let S, D;
-      if (Y.type === "touchmove") {
-        Y.preventDefault();
-        const E = Y.touches[0];
-        S = E.clientX, D = E.clientY;
+      let N, k;
+      if (w.type === "touchmove") {
+        w.preventDefault();
+        const E = w.touches[0];
+        N = E.clientX, k = E.clientY;
       } else
-        Y.preventDefault(), S = Y.clientX, D = Y.clientY;
-      g.value = S, l.value = D;
-      const j = e.direction === "vertical" ? D - u.value : S - a.value, z = n.value === 0, M = n.value === e.slides.length - 1;
-      z && j > 0 || M && j < 0 ? v.value = j * 0.3 : v.value = j;
-    }, I = (Y) => {
+        w.preventDefault(), N = w.clientX, k = w.clientY;
+      g.value = N, l.value = k;
+      const Y = e.direction === "vertical" ? k - u.value : N - a.value, z = n.value === 0, O = n.value === e.slides.length - 1;
+      z && Y > 0 || O && Y < 0 ? v.value = Y * 0.3 : v.value = Y;
+    }, Q = (w) => {
       if (!r.value) return;
-      r.value = !1, (Y.type === "mouseup" || Y.type === "mouseleave") && (document.removeEventListener("mousemove", Q), document.removeEventListener("mouseup", I));
-      const S = 50, D = e.direction === "vertical" ? l.value - u.value : g.value - a.value, j = document.querySelector(".slide"), z = j ? e.direction === "vertical" ? j.clientHeight : j.clientWidth : 300, M = Math.abs(D) / z * 100;
-      (Math.abs(D) > S || M > 20) && (D > 0 && n.value > 0 ? x() : D < 0 && n.value < e.slides.length - 1 && O()), v.value = 0, e.autoplay && L();
+      r.value = !1, (w.type === "mouseup" || w.type === "mouseleave") && (document.removeEventListener("mousemove", j), document.removeEventListener("mouseup", Q));
+      const N = 50, k = e.direction === "vertical" ? l.value - u.value : g.value - a.value, Y = document.querySelector(".slide"), z = Y ? e.direction === "vertical" ? Y.clientHeight : Y.clientWidth : 300, O = Math.abs(k) / z * 100;
+      (Math.abs(k) > N || O > 20) && (k > 0 && n.value > 0 ? p() : k < 0 && n.value < e.slides.length - 1 && M()), v.value = 0, e.autoplay && C();
     };
-    return rA(n, (Y) => {
-      t("slide-change", Y);
+    return rA(n, (w) => {
+      t("slide-change", w);
     }), xA(() => {
-      L();
+      C();
     }), OA(() => {
-      Z(), i && clearTimeout(i);
-    }), (Y, S) => (f(), m("div", {
-      class: C(["utopia-slider", [
+      I(), i && clearTimeout(i);
+    }), (w, N) => (f(), m("div", {
+      class: J(["utopia-slider", [
         `utopia-slider--${A.direction}`,
         {
           "utopia-slider--controls-visible": A.showControls,
           "utopia-slider--dragging": r.value
         }
       ]]),
-      onMouseenter: k,
-      onMouseleave: w
+      onMouseenter: D,
+      onMouseleave: B
     }, [
       d("div", Eo, [
-        A.slides.length > 1 ? (f(), V(vA, {
+        A.slides.length > 1 ? (f(), S(vA, {
           key: 0,
-          class: C(["slider-nav slider-nav--prev", { "slider-nav--visible": o.value || A.alwaysShowControls }]),
-          onClick: x,
+          class: J(["slider-nav slider-nav--prev", { "slider-nav--visible": o.value || A.alwaysShowControls }]),
+          onClick: p,
           "aria-label": "Previous slide",
           variant: "secondary",
           size: "sm"
         }, {
           default: R(() => [
-            AA(Y.$slots, "prev-icon", {}, () => [
-              J(F, {
+            AA(w.$slots, "prev-icon", {}, () => [
+              H(F, {
                 name: A.direction === "vertical" ? "Chevron-up" : "Chevron-left",
                 size: "small"
               }, null, 8, ["name"])
@@ -3256,17 +3260,17 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
           ]),
           _: 3
         }, 8, ["class"])) : y("", !0),
-        A.slides.length > 1 ? (f(), V(vA, {
+        A.slides.length > 1 ? (f(), S(vA, {
           key: 1,
-          class: C(["slider-nav slider-nav--next", { "slider-nav--visible": o.value || A.alwaysShowControls }]),
-          onClick: O,
+          class: J(["slider-nav slider-nav--next", { "slider-nav--visible": o.value || A.alwaysShowControls }]),
+          onClick: M,
           "aria-label": "Next slide",
           variant: "secondary",
           size: "sm"
         }, {
           default: R(() => [
-            AA(Y.$slots, "next-icon", {}, () => [
-              J(F, {
+            AA(w.$slots, "next-icon", {}, () => [
+              H(F, {
                 name: A.direction === "vertical" ? "Chevron-down" : "Chevron-right",
                 size: "small"
               }, null, 8, ["name"])
@@ -3276,44 +3280,44 @@ const Mo = ["aria-hidden"], Oo = ["aria-labelledby"], yo = {
         }, 8, ["class"])) : y("", !0),
         d("div", {
           class: "slider-track",
-          style: cA(p.value),
-          onTouchstart: B,
-          onTouchmove: Q,
-          onTouchend: I,
-          onTouchcancel: I,
-          onMousedown: B
+          style: cA(P.value),
+          onTouchstart: L,
+          onTouchmove: j,
+          onTouchend: Q,
+          onTouchcancel: Q,
+          onMousedown: L
         }, [
-          (f(!0), m(sA, null, aA(A.slides, (D, j) => (f(), m("div", {
-            key: j,
-            class: C(["slide", { "slide--active": j === n.value }])
+          (f(!0), m(sA, null, aA(A.slides, (k, Y) => (f(), m("div", {
+            key: Y,
+            class: J(["slide", { "slide--active": Y === n.value }])
           }, [
-            AA(Y.$slots, "slide", {
-              slide: D,
-              index: j
+            AA(w.$slots, "slide", {
+              slide: k,
+              index: Y
             }, () => [
-              D.image ? (f(), m("div", Xo, [
+              k.image ? (f(), m("div", Xo, [
                 d("img", {
-                  src: D.image,
-                  alt: D.alt || `Slide ${j + 1}`
+                  src: k.image,
+                  alt: k.alt || `Slide ${Y + 1}`
                 }, null, 8, Qo)
               ])) : y("", !0),
-              D.content ? (f(), m("div", {
+              k.content ? (f(), m("div", {
                 key: 1,
                 class: "slide-content",
-                innerHTML: D.content
+                innerHTML: k.content
               }, null, 8, ho)) : y("", !0)
             ], !0)
           ], 2))), 128))
         ], 36),
         A.showDots && A.slides.length > 1 ? (f(), m("div", {
           key: 2,
-          class: C(["slider-dots", `slider-dots--${A.direction}`])
+          class: J(["slider-dots", `slider-dots--${A.direction}`])
         }, [
-          (f(!0), m(sA, null, aA(A.slides, (D, j) => (f(), m("button", {
-            key: j,
-            class: C(["dot", { "dot--active": j === n.value }]),
-            onClick: (z) => b(j),
-            "aria-label": `Go to slide ${j + 1}`
+          (f(!0), m(sA, null, aA(A.slides, (k, Y) => (f(), m("button", {
+            key: Y,
+            class: J(["dot", { "dot--active": Y === n.value }]),
+            onClick: (z) => b(Y),
+            "aria-label": `Go to slide ${Y + 1}`
           }, null, 10, Fo))), 128))
         ], 2)) : y("", !0)
       ])
@@ -3487,16 +3491,16 @@ const ec = async (A, s, e) => {
   }), {
     x: u,
     y: g
-  } = Ie(a, t, r), l = t, v = {}, p = 0;
-  for (let O = 0; O < i.length; O++) {
+  } = Ie(a, t, r), l = t, v = {}, P = 0;
+  for (let M = 0; M < i.length; M++) {
     const {
-      name: x,
+      name: p,
       fn: b
-    } = i[O], {
-      x: k,
-      y: w,
-      data: L,
-      reset: Z
+    } = i[M], {
+      x: D,
+      y: B,
+      data: C,
+      reset: I
     } = await b({
       x: u,
       y: g,
@@ -3511,20 +3515,20 @@ const ec = async (A, s, e) => {
         floating: s
       }
     });
-    u = k ?? u, g = w ?? g, v = {
+    u = D ?? u, g = B ?? g, v = {
       ...v,
-      [x]: {
-        ...v[x],
-        ...L
+      [p]: {
+        ...v[p],
+        ...C
       }
-    }, Z && p <= 50 && (p++, typeof Z == "object" && (Z.placement && (l = Z.placement), Z.rects && (a = Z.rects === !0 ? await c.getElementRects({
+    }, I && P <= 50 && (P++, typeof I == "object" && (I.placement && (l = I.placement), I.rects && (a = I.rects === !0 ? await c.getElementRects({
       reference: A,
       floating: s,
       strategy: n
-    }) : Z.rects), {
+    }) : I.rects), {
       x: u,
       y: g
-    } = Ie(a, l, r)), O = -1);
+    } = Ie(a, l, r)), M = -1);
   }
   return {
     x: u,
@@ -3550,33 +3554,33 @@ async function fs(A, s) {
     elementContext: g = "floating",
     altBoundary: l = !1,
     padding: v = 0
-  } = SA(s, A), p = as(v), x = i[l ? g === "floating" ? "reference" : "floating" : g], b = le(await o.getClippingRect({
-    element: (e = await (o.isElement == null ? void 0 : o.isElement(x))) == null || e ? x : x.contextElement || await (o.getDocumentElement == null ? void 0 : o.getDocumentElement(i.floating)),
+  } = SA(s, A), P = as(v), p = i[l ? g === "floating" ? "reference" : "floating" : g], b = le(await o.getClippingRect({
+    element: (e = await (o.isElement == null ? void 0 : o.isElement(p))) == null || e ? p : p.contextElement || await (o.getDocumentElement == null ? void 0 : o.getDocumentElement(i.floating)),
     boundary: a,
     rootBoundary: u,
     strategy: r
-  })), k = g === "floating" ? {
+  })), D = g === "floating" ? {
     x: t,
     y: n,
     width: c.floating.width,
     height: c.floating.height
-  } : c.reference, w = await (o.getOffsetParent == null ? void 0 : o.getOffsetParent(i.floating)), L = await (o.isElement == null ? void 0 : o.isElement(w)) ? await (o.getScale == null ? void 0 : o.getScale(w)) || {
+  } : c.reference, B = await (o.getOffsetParent == null ? void 0 : o.getOffsetParent(i.floating)), C = await (o.isElement == null ? void 0 : o.isElement(B)) ? await (o.getScale == null ? void 0 : o.getScale(B)) || {
     x: 1,
     y: 1
   } : {
     x: 1,
     y: 1
-  }, Z = le(o.convertOffsetParentRelativeRectToViewportRelativeRect ? await o.convertOffsetParentRelativeRectToViewportRelativeRect({
+  }, I = le(o.convertOffsetParentRelativeRectToViewportRelativeRect ? await o.convertOffsetParentRelativeRectToViewportRelativeRect({
     elements: i,
-    rect: k,
-    offsetParent: w,
+    rect: D,
+    offsetParent: B,
     strategy: r
-  }) : k);
+  }) : D);
   return {
-    top: (b.top - Z.top + p.top) / L.y,
-    bottom: (Z.bottom - b.bottom + p.bottom) / L.y,
-    left: (b.left - Z.left + p.left) / L.x,
-    right: (Z.right - b.right + p.right) / L.x
+    top: (b.top - I.top + P.top) / C.y,
+    bottom: (I.bottom - b.bottom + P.bottom) / C.y,
+    left: (b.left - I.left + P.left) / C.x,
+    right: (I.right - b.right + P.right) / C.x
   };
 }
 const sc = (A) => ({
@@ -3600,17 +3604,17 @@ const sc = (A) => ({
     const g = as(u), l = {
       x: e,
       y: t
-    }, v = Ye(n), p = je(v), O = await c.getDimensions(a), x = v === "y", b = x ? "top" : "left", k = x ? "bottom" : "right", w = x ? "clientHeight" : "clientWidth", L = o.reference[p] + o.reference[v] - l[v] - o.floating[p], Z = l[v] - o.reference[v], B = await (c.getOffsetParent == null ? void 0 : c.getOffsetParent(a));
-    let Q = B ? B[w] : 0;
-    (!Q || !await (c.isElement == null ? void 0 : c.isElement(B))) && (Q = i.floating[w] || o.floating[p]);
-    const I = L / 2 - Z / 2, Y = Q / 2 - O[p] / 2 - 1, S = CA(g[b], Y), D = CA(g[k], Y), j = S, z = Q - O[p] - D, M = Q / 2 - O[p] / 2 + I, E = Oe(j, M, z), h = !r.arrow && WA(n) != null && M !== E && o.reference[p] / 2 - (M < j ? S : D) - O[p] / 2 < 0, N = h ? M < j ? M - j : M - z : 0;
+    }, v = Ye(n), P = je(v), M = await c.getDimensions(a), p = v === "y", b = p ? "top" : "left", D = p ? "bottom" : "right", B = p ? "clientHeight" : "clientWidth", C = o.reference[P] + o.reference[v] - l[v] - o.floating[P], I = l[v] - o.reference[v], L = await (c.getOffsetParent == null ? void 0 : c.getOffsetParent(a));
+    let j = L ? L[B] : 0;
+    (!j || !await (c.isElement == null ? void 0 : c.isElement(L))) && (j = i.floating[B] || o.floating[P]);
+    const Q = C / 2 - I / 2, w = j / 2 - M[P] / 2 - 1, N = CA(g[b], w), k = CA(g[D], w), Y = N, z = j - M[P] - k, O = j / 2 - M[P] / 2 + Q, E = Oe(Y, O, z), h = !r.arrow && WA(n) != null && O !== E && o.reference[P] / 2 - (O < Y ? N : k) - M[P] / 2 < 0, V = h ? O < Y ? O - Y : O - z : 0;
     return {
-      [v]: l[v] + N,
+      [v]: l[v] + V,
       data: {
         [v]: E,
-        centerOffset: M - E - N,
+        centerOffset: O - E - V,
         ...h && {
-          alignmentOffset: N
+          alignmentOffset: V
         }
       },
       reset: h
@@ -3634,53 +3638,53 @@ const sc = (A) => ({
         crossAxis: g = !0,
         fallbackPlacements: l,
         fallbackStrategy: v = "bestFit",
-        fallbackAxisSideDirection: p = "none",
-        flipAlignment: O = !0,
-        ...x
+        fallbackAxisSideDirection: P = "none",
+        flipAlignment: M = !0,
+        ...p
       } = SA(A, s);
       if ((e = o.arrow) != null && e.alignmentOffset)
         return {};
-      const b = TA(n), k = bA(i), w = TA(i) === i, L = await (r.isRTL == null ? void 0 : r.isRTL(a.floating)), Z = l || (w || !O ? [fe(i)] : Ro(i)), B = p !== "none";
-      !l && B && Z.push(...$o(i, O, p, L));
-      const Q = [i, ...Z], I = await fs(s, x), Y = [];
-      let S = ((t = o.flip) == null ? void 0 : t.overflows) || [];
-      if (u && Y.push(I[b]), g) {
-        const M = Ko(n, c, L);
-        Y.push(I[M[0]], I[M[1]]);
+      const b = TA(n), D = bA(i), B = TA(i) === i, C = await (r.isRTL == null ? void 0 : r.isRTL(a.floating)), I = l || (B || !M ? [fe(i)] : Ro(i)), L = P !== "none";
+      !l && L && I.push(...$o(i, M, P, C));
+      const j = [i, ...I], Q = await fs(s, p), w = [];
+      let N = ((t = o.flip) == null ? void 0 : t.overflows) || [];
+      if (u && w.push(Q[b]), g) {
+        const O = Ko(n, c, C);
+        w.push(Q[O[0]], Q[O[1]]);
       }
-      if (S = [...S, {
+      if (N = [...N, {
         placement: n,
-        overflows: Y
-      }], !Y.every((M) => M <= 0)) {
-        var D, j;
-        const M = (((D = o.flip) == null ? void 0 : D.index) || 0) + 1, E = Q[M];
-        if (E && (!(g === "alignment" ? k !== bA(E) : !1) || // We leave the current main axis only if every placement on that axis
+        overflows: w
+      }], !w.every((O) => O <= 0)) {
+        var k, Y;
+        const O = (((k = o.flip) == null ? void 0 : k.index) || 0) + 1, E = j[O];
+        if (E && (!(g === "alignment" ? D !== bA(E) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
-        S.every((W) => bA(W.placement) === k ? W.overflows[0] > 0 : !0)))
+        N.every((W) => bA(W.placement) === D ? W.overflows[0] > 0 : !0)))
           return {
             data: {
-              index: M,
-              overflows: S
+              index: O,
+              overflows: N
             },
             reset: {
               placement: E
             }
           };
-        let h = (j = S.filter((N) => N.overflows[0] <= 0).sort((N, W) => N.overflows[1] - W.overflows[1])[0]) == null ? void 0 : j.placement;
+        let h = (Y = N.filter((V) => V.overflows[0] <= 0).sort((V, W) => V.overflows[1] - W.overflows[1])[0]) == null ? void 0 : Y.placement;
         if (!h)
           switch (v) {
             case "bestFit": {
               var z;
-              const N = (z = S.filter((W) => {
-                if (B) {
+              const V = (z = N.filter((W) => {
+                if (L) {
                   const K = bA(W.placement);
-                  return K === k || // Create a bias to the `y` side axis due to horizontal
+                  return K === D || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
                   K === "y";
                 }
                 return !0;
               }).map((W) => [W.placement, W.overflows.filter((K) => K > 0).reduce((K, eA) => K + eA, 0)]).sort((W, K) => W[1] - K[1])[0]) == null ? void 0 : z[0];
-              N && (h = N);
+              V && (h = V);
               break;
             }
             case "initialPlacement":
@@ -3707,7 +3711,7 @@ async function oc(A, s) {
   let {
     mainAxis: l,
     crossAxis: v,
-    alignmentAxis: p
+    alignmentAxis: P
   } = typeof g == "number" ? {
     mainAxis: g,
     crossAxis: 0,
@@ -3717,7 +3721,7 @@ async function oc(A, s) {
     crossAxis: g.crossAxis || 0,
     alignmentAxis: g.alignmentAxis
   };
-  return i && typeof p == "number" && (v = i === "end" ? p * -1 : p), r ? {
+  return i && typeof P == "number" && (v = i === "end" ? P * -1 : P), r ? {
     x: v * u,
     y: l * a
   } : {
@@ -3760,14 +3764,14 @@ const cc = function(A) {
         mainAxis: o = !0,
         crossAxis: c = !1,
         limiter: i = {
-          fn: (x) => {
+          fn: (p) => {
             let {
               x: b,
-              y: k
-            } = x;
+              y: D
+            } = p;
             return {
               x: b,
-              y: k
+              y: D
             };
           }
         },
@@ -3776,25 +3780,25 @@ const cc = function(A) {
         x: e,
         y: t
       }, u = await fs(s, r), g = bA(TA(n)), l = rs(g);
-      let v = a[l], p = a[g];
+      let v = a[l], P = a[g];
       if (o) {
-        const x = l === "y" ? "top" : "left", b = l === "y" ? "bottom" : "right", k = v + u[x], w = v - u[b];
-        v = Oe(k, v, w);
+        const p = l === "y" ? "top" : "left", b = l === "y" ? "bottom" : "right", D = v + u[p], B = v - u[b];
+        v = Oe(D, v, B);
       }
       if (c) {
-        const x = g === "y" ? "top" : "left", b = g === "y" ? "bottom" : "right", k = p + u[x], w = p - u[b];
-        p = Oe(k, p, w);
+        const p = g === "y" ? "top" : "left", b = g === "y" ? "bottom" : "right", D = P + u[p], B = P - u[b];
+        P = Oe(D, P, B);
       }
-      const O = i.fn({
+      const M = i.fn({
         ...s,
         [l]: v,
-        [g]: p
+        [g]: P
       });
       return {
-        ...O,
+        ...M,
         data: {
-          x: O.x - e,
-          y: O.y - t,
+          x: M.x - e,
+          y: M.y - t,
           enabled: {
             [l]: o,
             [g]: c
@@ -3966,10 +3970,10 @@ function GA(A, s, e, t) {
   let r = (n.left + i.x) / c.x, a = (n.top + i.y) / c.y, u = n.width / c.x, g = n.height / c.y;
   if (o) {
     const l = lA(o), v = t && gA(t) ? lA(t) : t;
-    let p = l, O = be(p);
-    for (; O && t && v !== p; ) {
-      const x = JA(O), b = O.getBoundingClientRect(), k = mA(O), w = b.left + (O.clientLeft + parseFloat(k.paddingLeft)) * x.x, L = b.top + (O.clientTop + parseFloat(k.paddingTop)) * x.y;
-      r *= x.x, a *= x.y, u *= x.x, g *= x.y, r += w, a += L, p = lA(O), O = be(p);
+    let P = l, M = be(P);
+    for (; M && t && v !== P; ) {
+      const p = JA(M), b = M.getBoundingClientRect(), D = mA(M), B = b.left + (M.clientLeft + parseFloat(D.paddingLeft)) * p.x, C = b.top + (M.clientTop + parseFloat(D.paddingTop)) * p.y;
+      r *= p.x, a *= p.y, u *= p.x, g *= p.y, r += B, a += C, P = lA(M), M = be(P);
     }
   }
   return le({
@@ -4042,8 +4046,8 @@ function Oc(A, s) {
   }
   const a = ge(t);
   if (a <= 0) {
-    const u = t.ownerDocument, g = u.body, l = getComputedStyle(g), v = u.compatMode === "CSS1Compat" && parseFloat(l.marginLeft) + parseFloat(l.marginRight) || 0, p = Math.abs(t.clientWidth - g.clientWidth - v);
-    p <= Se && (o -= p);
+    const u = t.ownerDocument, g = u.body, l = getComputedStyle(g), v = u.compatMode === "CSS1Compat" && parseFloat(l.marginLeft) + parseFloat(l.marginRight) || 0, P = Math.abs(t.clientWidth - g.clientWidth - v);
+    P <= Se && (o -= P);
   } else a <= Se && (o += a);
   return {
     width: o,
@@ -4226,30 +4230,30 @@ function Gc(A, s) {
     } = a;
     if (i || s(), !l || !v)
       return;
-    const p = qA(g), O = qA(n.clientWidth - (u + l)), x = qA(n.clientHeight - (g + v)), b = qA(u), w = {
-      rootMargin: -p + "px " + -O + "px " + -x + "px " + -b + "px",
+    const P = qA(g), M = qA(n.clientWidth - (u + l)), p = qA(n.clientHeight - (g + v)), b = qA(u), B = {
+      rootMargin: -P + "px " + -M + "px " + -p + "px " + -b + "px",
       threshold: YA(0, CA(1, r)) || 1
     };
-    let L = !0;
-    function Z(B) {
-      const Q = B[0].intersectionRatio;
-      if (Q !== r) {
-        if (!L)
+    let C = !0;
+    function I(L) {
+      const j = L[0].intersectionRatio;
+      if (j !== r) {
+        if (!C)
           return c();
-        Q ? c(!1, Q) : t = setTimeout(() => {
+        j ? c(!1, j) : t = setTimeout(() => {
           c(!1, 1e-7);
         }, 1e3);
       }
-      Q === 1 && !ps(a, A.getBoundingClientRect()) && c(), L = !1;
+      j === 1 && !ps(a, A.getBoundingClientRect()) && c(), C = !1;
     }
     try {
-      e = new IntersectionObserver(Z, {
-        ...w,
+      e = new IntersectionObserver(I, {
+        ...B,
         // Handle <iframe>s
         root: n.ownerDocument
       });
     } catch {
-      e = new IntersectionObserver(Z, w);
+      e = new IntersectionObserver(I, B);
     }
     e.observe(A);
   }
@@ -4272,23 +4276,23 @@ function Zc(A, s, e, t) {
   const g = a && i ? Gc(a, e) : null;
   let l = -1, v = null;
   c && (v = new ResizeObserver((b) => {
-    let [k] = b;
-    k && k.target === a && v && (v.unobserve(s), cancelAnimationFrame(l), l = requestAnimationFrame(() => {
-      var w;
-      (w = v) == null || w.observe(s);
+    let [D] = b;
+    D && D.target === a && v && (v.unobserve(s), cancelAnimationFrame(l), l = requestAnimationFrame(() => {
+      var B;
+      (B = v) == null || B.observe(s);
     })), e();
   }), a && !r && v.observe(a), v.observe(s));
-  let p, O = r ? GA(A) : null;
-  r && x();
-  function x() {
+  let P, M = r ? GA(A) : null;
+  r && p();
+  function p() {
     const b = GA(A);
-    O && !ps(O, b) && e(), O = b, p = requestAnimationFrame(x);
+    M && !ps(M, b) && e(), M = b, P = requestAnimationFrame(p);
   }
   return e(), () => {
     var b;
-    u.forEach((k) => {
-      n && k.removeEventListener("scroll", e), o && k.removeEventListener("resize", e);
-    }), g?.(), (b = v) == null || b.disconnect(), v = null, r && cancelAnimationFrame(p);
+    u.forEach((D) => {
+      n && D.removeEventListener("scroll", e), o && D.removeEventListener("resize", e);
+    }), g?.(), (b = v) == null || b.disconnect(), v = null, r && cancelAnimationFrame(P);
   };
 }
 const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
@@ -4316,40 +4320,40 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     interactive: { type: Boolean, default: !1 }
   },
   setup(A) {
-    const s = A, { placement: e, openDelay: t, closeDelay: n, offset: o, withArrow: c, disabled: i, interactive: r } = s, a = H(null), u = H(null), g = H(null), l = `utopia-tooltip-${Math.random().toString(36).slice(2, 9)}`, v = H(!1), p = H(!1), O = H(!1);
-    let x, b, k = null;
-    function w() {
-      x && clearTimeout(x), b && clearTimeout(b);
+    const s = A, { placement: e, openDelay: t, closeDelay: n, offset: o, withArrow: c, disabled: i, interactive: r } = s, a = Z(null), u = Z(null), g = Z(null), l = `utopia-tooltip-${Math.random().toString(36).slice(2, 9)}`, v = Z(!1), P = Z(!1), M = Z(!1);
+    let p, b, D = null;
+    function B() {
+      p && clearTimeout(p), b && clearTimeout(b);
     }
-    function L() {
-      i || (w(), p.value = !0, x = window.setTimeout(() => {
+    function C() {
+      i || (B(), P.value = !0, p = window.setTimeout(() => {
         v.value = !0;
       }, t));
     }
-    function Z() {
-      p.value = !1, w();
+    function I() {
+      P.value = !1, B();
       const h = r ? 300 : n;
       b = window.setTimeout(() => {
-        r && (O.value || p.value) || (v.value = !1);
+        r && (M.value || P.value) || (v.value = !1);
       }, h);
     }
-    function B() {
-      r && (O.value = !0, w());
+    function L() {
+      r && (M.value = !0, B());
     }
-    function Q() {
-      r && (O.value = !1, p.value || Z());
+    function j() {
+      r && (M.value = !1, P.value || I());
     }
-    function I(h) {
+    function Q(h) {
       h.key === "Escape" && (v.value = !1);
     }
-    function Y() {
-      v.value && (w(), v.value = !1, p.value = !1, O.value = !1);
+    function w() {
+      v.value && (B(), v.value = !1, P.value = !1, M.value = !1);
     }
-    function S(h) {
+    function N(h) {
       window.mouseX = h.clientX, window.mouseY = h.clientY;
     }
-    const D = { onEnter: L, onLeave: Z }, j = H({}), z = H(e);
-    function M(h) {
+    const k = { onEnter: C, onLeave: I }, Y = Z({}), z = Z(e);
+    function O(h) {
       switch (h) {
         case "top_left":
           return "top-start";
@@ -4368,16 +4372,16 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       }
     }
     async function E() {
-      const h = a.value, N = u.value;
-      if (!h || !N) return;
+      const h = a.value, V = u.value;
+      if (!h || !V) return;
       const W = [Hc(o), Cc(), Jc({ padding: 8 })];
       c && g.value && W.push(Lc({ element: g.value }));
-      const { x: K, y: eA, placement: tA, middlewareData: dA } = await Ec(h, N, {
-        placement: M(e),
+      const { x: K, y: eA, placement: tA, middlewareData: dA } = await Ec(h, V, {
+        placement: O(e),
         middleware: W,
         strategy: "fixed"
       });
-      j.value = {
+      Y.value = {
         position: "fixed",
         left: `${Math.round(K)}px`,
         top: `${Math.round(eA)}px`
@@ -4391,41 +4395,41 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       }
     }
     return rA(v, (h) => {
-      h ? (requestAnimationFrame(E), k?.(), a.value && u.value && (k = Zc(a.value, u.value, E)), document.addEventListener("keydown", I), window.addEventListener("scroll", Y, !0), document.addEventListener("scroll", Y, !0), window.addEventListener("wheel", Y, !0), window.addEventListener("touchmove", Y, !0)) : (k?.(), k = null, document.removeEventListener("keydown", I), window.removeEventListener("scroll", Y, !0), document.removeEventListener("scroll", Y, !0), window.removeEventListener("wheel", Y, !0), window.removeEventListener("touchmove", Y, !0), O.value = !1, p.value = !1);
+      h ? (requestAnimationFrame(E), D?.(), a.value && u.value && (D = Zc(a.value, u.value, E)), document.addEventListener("keydown", Q), window.addEventListener("scroll", w, !0), document.addEventListener("scroll", w, !0), window.addEventListener("wheel", w, !0), window.addEventListener("touchmove", w, !0)) : (D?.(), D = null, document.removeEventListener("keydown", Q), window.removeEventListener("scroll", w, !0), document.removeEventListener("scroll", w, !0), window.removeEventListener("wheel", w, !0), window.removeEventListener("touchmove", w, !0), M.value = !1, P.value = !1);
     }), xA(() => {
-      document.addEventListener("mousemove", S), v.value && requestAnimationFrame(E);
+      document.addEventListener("mousemove", N), v.value && requestAnimationFrame(E);
     }), qe(() => {
-      w(), k?.(), document.removeEventListener("keydown", I), window.removeEventListener("scroll", Y, !0), document.removeEventListener("scroll", Y, !0), window.removeEventListener("wheel", Y, !0), window.removeEventListener("touchmove", Y, !0), document.removeEventListener("mousemove", S);
-    }), (h, N) => (f(), m(sA, null, [
+      B(), D?.(), document.removeEventListener("keydown", Q), window.removeEventListener("scroll", w, !0), document.removeEventListener("scroll", w, !0), window.removeEventListener("wheel", w, !0), window.removeEventListener("touchmove", w, !0), document.removeEventListener("mousemove", N);
+    }), (h, V) => (f(), m(sA, null, [
       d("span", {
-        class: C(["utopia-tooltip-trigger", { "utopia-tooltip--disabled": G(i) }]),
+        class: J(["utopia-tooltip-trigger", { "utopia-tooltip--disabled": G(i) }]),
         ref_key: "triggerRef",
         ref: a,
-        onMouseenter: N[0] || (N[0] = //@ts-ignore
-        (...W) => D.onEnter && D.onEnter(...W)),
-        onMouseleave: N[1] || (N[1] = //@ts-ignore
-        (...W) => D.onLeave && D.onLeave(...W)),
-        onFocusin: N[2] || (N[2] = //@ts-ignore
-        (...W) => D.onEnter && D.onEnter(...W)),
-        onFocusout: N[3] || (N[3] = //@ts-ignore
-        (...W) => D.onLeave && D.onLeave(...W))
+        onMouseenter: V[0] || (V[0] = //@ts-ignore
+        (...W) => k.onEnter && k.onEnter(...W)),
+        onMouseleave: V[1] || (V[1] = //@ts-ignore
+        (...W) => k.onLeave && k.onLeave(...W)),
+        onFocusin: V[2] || (V[2] = //@ts-ignore
+        (...W) => k.onEnter && k.onEnter(...W)),
+        onFocusout: V[3] || (V[3] = //@ts-ignore
+        (...W) => k.onLeave && k.onLeave(...W))
       }, [
         AA(h.$slots, "default", {}, void 0, !0)
       ], 34),
-      (f(), V(EA, { to: "body" }, [
-        J(DA, { name: "ut-tooltip" }, {
+      (f(), S(EA, { to: "body" }, [
+        H(DA, { name: "ut-tooltip" }, {
           default: R(() => [
             !G(i) && A.active && v.value ? (f(), m("div", {
               key: 0,
               id: l,
-              class: C(["utopia-tooltip", { "utopia-tooltip--interactive": G(r) }]),
+              class: J(["utopia-tooltip", { "utopia-tooltip--interactive": G(r) }]),
               role: "tooltip",
-              style: cA(j.value),
+              style: cA(Y.value),
               ref_key: "tooltipRef",
               ref: u,
               "data-side": z.value,
-              onMouseenter: B,
-              onMouseleave: Q
+              onMouseenter: L,
+              onMouseleave: j
             }, [
               d("div", Qc, [
                 AA(h.$slots, "content", {}, void 0, !0)
@@ -4485,30 +4489,30 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       naissance: Os,
       mariage: xs,
       sport: ws
-    }, t = P(() => e[s.category]), n = P(() => s.totalAmount === 0 ? 0 : Math.min(s.spentAmount / s.totalAmount * 100, 100)), o = P(() => {
-      const x = s.language === "fr" ? "fr-FR" : "en-US";
-      return new Intl.NumberFormat(x, {
+    }, t = x(() => e[s.category]), n = x(() => s.totalAmount === 0 ? 0 : Math.min(s.spentAmount / s.totalAmount * 100, 100)), o = x(() => {
+      const p = s.language === "fr" ? "fr-FR" : "en-US";
+      return new Intl.NumberFormat(p, {
         style: "currency",
         currency: s.currency,
         minimumFractionDigits: 2
       }).format(s.spentAmount);
-    }), c = P(() => {
-      const x = s.language === "fr" ? "fr-FR" : "en-US";
-      return new Intl.NumberFormat(x, {
+    }), c = x(() => {
+      const p = s.language === "fr" ? "fr-FR" : "en-US";
+      return new Intl.NumberFormat(p, {
         style: "currency",
         currency: s.currency,
         minimumFractionDigits: 0
       }).format(s.totalAmount);
-    }), i = P(() => {
-      const x = new Date(s.expirationDate), b = s.language === "fr" ? "fr-FR" : "en-US";
+    }), i = x(() => {
+      const p = new Date(s.expirationDate), b = s.language === "fr" ? "fr-FR" : "en-US";
       return new Intl.DateTimeFormat(b, {
         day: "2-digit",
         month: "2-digit",
         year: "numeric"
-      }).format(x);
+      }).format(p);
     }), r = () => {
       s.actionable && !s.disabled && s.actionable();
-    }, a = P(() => ({
+    }, a = x(() => ({
       fr: {
         expiresOn: "Expire le",
         expiredOn: "Expirée le"
@@ -4517,17 +4521,17 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         expiresOn: "Expires on",
         expiredOn: "Expired on"
       }
-    })), u = P(() => a.value[s.language]), g = P(() => s.expiredLabel || u.value.expiredOn), l = H(), v = H(!1), p = () => {
+    })), u = x(() => a.value[s.language]), g = x(() => s.expiredLabel || u.value.expiredOn), l = Z(), v = Z(!1), P = () => {
       s.campaignName.length > 20 && (v.value = !0);
-    }, O = () => {
+    }, M = () => {
       v.value = !1;
     };
-    return (x, b) => (f(), V(rt, {
+    return (p, b) => (f(), S(rt, {
       variant: "elevated",
       size: s.size,
       disabled: s.disabled,
       interactive: !!s.actionable,
-      class: C(["utopia-cardcampaign", { "utopia-cardcampaign--actionable": !!s.actionable }]),
+      class: J(["utopia-cardcampaign", { "utopia-cardcampaign--actionable": !!s.actionable }]),
       onClick: r
     }, {
       default: R(() => [
@@ -4545,13 +4549,13 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
                 class: "utopia-cardcampaign__title",
                 ref_key: "titleRef",
                 ref: l,
-                onMouseenter: p,
-                onMouseleave: O
+                onMouseenter: P,
+                onMouseleave: M
               }, T(s.campaignName), 545),
               v.value && s.campaignName.length > 20 ? (f(), m("div", Wc, T(s.campaignName), 1)) : y("", !0)
             ]),
             s.disabled ? y("", !0) : (f(), m("div", Kc, [
-              J(F, {
+              H(F, {
                 name: "Calendar",
                 size: "small",
                 class: "utopia-cardcampaign__calendar-icon",
@@ -4561,7 +4565,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
             ]))
           ]),
           s.actionable ? (f(), m("div", Uc, [
-            J(F, {
+            H(F, {
               name: "Chevron-right",
               size: "small",
               "stroke-width": "2"
@@ -4619,7 +4623,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         campaign: "campaign",
         campaigns: "campaigns"
       }
-    }, o = P(() => n[s.language]), c = (r) => {
+    }, o = x(() => n[s.language]), c = (r) => {
       const a = s.language === "fr" ? "fr-FR" : "en-US";
       return new Intl.NumberFormat(a, {
         style: "currency",
@@ -4630,7 +4634,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     return (r, a) => (f(), m("div", ii, [
       (f(!0), m(sA, null, aA(A.cards, (u, g) => (f(), m("div", {
         key: g,
-        class: C(["utopia-balance-card-grouped", {
+        class: J(["utopia-balance-card-grouped", {
           "utopia-balance-card-grouped--actionable": u.actionable,
           "utopia-balance-card-grouped--disabled": u.disabled
         }]),
@@ -4662,7 +4666,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           ])
         ]),
         u.actionable && !u.disabled ? (f(), m("div", Pi, [
-          J(F, {
+          H(F, {
             name: "Chevron-right",
             size: "small",
             "stroke-width": "2"
@@ -4697,67 +4701,67 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
   },
   emits: ["row-click", "sort-change"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = H(""), o = H(null), c = P(() => !n.value || !o.value ? e.data : [...e.data].sort((x, b) => {
-      const k = i(x, n.value), w = i(b, n.value);
-      if (k === w) return 0;
-      const L = k > w ? 1 : -1;
-      return o.value === "asc" ? L : -L;
+    const e = A, t = s, n = Z(""), o = Z(null), c = x(() => !n.value || !o.value ? e.data : [...e.data].sort((p, b) => {
+      const D = i(p, n.value), B = i(b, n.value);
+      if (D === B) return 0;
+      const C = D > B ? 1 : -1;
+      return o.value === "asc" ? C : -C;
     }));
-    function i(x, b) {
-      return b.split(".").reduce((k, w) => k?.[w], x);
+    function i(p, b) {
+      return b.split(".").reduce((D, B) => D?.[B], p);
     }
-    function r(x, b) {
-      return typeof e.rowKey == "function" ? e.rowKey(x) : i(x, e.rowKey) || b.toString();
+    function r(p, b) {
+      return typeof e.rowKey == "function" ? e.rowKey(p) : i(p, e.rowKey) || b.toString();
     }
-    function a(x) {
-      x.sortable && (n.value === x.key ? o.value === "asc" ? o.value = "desc" : o.value === "desc" ? (o.value = null, n.value = "") : o.value = "asc" : (n.value = x.key, o.value = "asc"), t("sort-change", n.value, o.value));
+    function a(p) {
+      p.sortable && (n.value === p.key ? o.value === "asc" ? o.value = "desc" : o.value === "desc" ? (o.value = null, n.value = "") : o.value = "asc" : (n.value = p.key, o.value = "asc"), t("sort-change", n.value, o.value));
     }
-    function u(x) {
-      return n.value !== x ? "ChevronsUpDown" : o.value === "asc" ? "ChevronUp" : o.value === "desc" ? "ChevronDown" : "ChevronsUpDown";
+    function u(p) {
+      return n.value !== p ? "ChevronsUpDown" : o.value === "asc" ? "ChevronUp" : o.value === "desc" ? "ChevronDown" : "ChevronsUpDown";
     }
-    function g(x) {
+    function g(p) {
       return {
-        sortable: x.sortable,
-        [`align-${x.align || "left"}`]: !0
+        sortable: p.sortable,
+        [`align-${p.align || "left"}`]: !0
       };
     }
-    function l(x, b) {
+    function l(p, b) {
       return {
         striped: e.striped && b % 2 === 1,
         hoverable: e.hoverable,
         selectable: e.selectable
       };
     }
-    function v(x, b) {
+    function v(p, b) {
       return {
-        [`align-${x.align || "left"}`]: !0
+        [`align-${p.align || "left"}`]: !0
       };
     }
-    function p(x, b) {
-      return b.formatter ? b.formatter(x) : x?.toString() || "";
+    function P(p, b) {
+      return b.formatter ? b.formatter(p) : p?.toString() || "";
     }
-    function O(x, b) {
-      t("row-click", x, b);
+    function M(p, b) {
+      t("row-click", p, b);
     }
-    return (x, b) => (f(), m("div", Oi, [
-      A.title || x.$slots.header ? (f(), m("div", yi, [
+    return (p, b) => (f(), m("div", Oi, [
+      A.title || p.$slots.header ? (f(), m("div", yi, [
         A.title ? (f(), m("h3", bi, T(A.title), 1)) : y("", !0),
-        AA(x.$slots, "header", {}, void 0, !0)
+        AA(p.$slots, "header", {}, void 0, !0)
       ])) : y("", !0),
       d("div", wi, [
         d("table", Bi, [
           d("thead", null, [
             d("tr", null, [
-              (f(!0), m(sA, null, aA(A.columns, (k) => (f(), m("th", {
-                key: k.key,
-                class: C(g(k)),
-                onClick: (w) => a(k)
+              (f(!0), m(sA, null, aA(A.columns, (D) => (f(), m("th", {
+                key: D.key,
+                class: J(g(D)),
+                onClick: (B) => a(D)
               }, [
                 d("div", Yi, [
-                  d("span", null, T(k.label), 1),
-                  k.sortable ? (f(), V(G(F), {
+                  d("span", null, T(D.label), 1),
+                  D.sortable ? (f(), S(G(F), {
                     key: 0,
-                    name: u(k.key),
+                    name: u(D.key),
                     class: "sort-icon"
                   }, null, 8, ["name"])) : y("", !0)
                 ])
@@ -4765,22 +4769,22 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
             ])
           ]),
           d("tbody", null, [
-            (f(!0), m(sA, null, aA(c.value, (k, w) => (f(), m("tr", {
-              key: r(k, w),
-              class: C(l(k, w)),
-              onClick: (L) => O(k, w)
+            (f(!0), m(sA, null, aA(c.value, (D, B) => (f(), m("tr", {
+              key: r(D, B),
+              class: J(l(D, B)),
+              onClick: (C) => M(D, B)
             }, [
-              (f(!0), m(sA, null, aA(A.columns, (L) => (f(), m("td", {
-                key: L.key,
-                class: C(v(L))
+              (f(!0), m(sA, null, aA(A.columns, (C) => (f(), m("td", {
+                key: C.key,
+                class: J(v(C))
               }, [
-                AA(x.$slots, `cell-${L.key}`, {
-                  value: i(k, L.key),
-                  row: k,
-                  column: L,
-                  index: w
+                AA(p.$slots, `cell-${C.key}`, {
+                  value: i(D, C.key),
+                  row: D,
+                  column: C,
+                  index: B
                 }, () => [
-                  oA(T(p(i(k, L.key), L)), 1)
+                  oA(T(P(i(D, C.key), C)), 1)
                 ], !0)
               ], 2))), 128))
             ], 10, Di))), 128))
@@ -4791,7 +4795,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         d("div", { class: "loading-spinner" }, "Chargement...", -1)
       ])])) : y("", !0),
       !A.loading && c.value.length === 0 ? (f(), m("div", Ti, [
-        AA(x.$slots, "empty", {}, () => [
+        AA(p.$slots, "empty", {}, () => [
           b[1] || (b[1] = d("p", null, "Aucune donnée disponible", -1))
         ], !0)
       ])) : y("", !0)
@@ -4803,13 +4807,13 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     items: {}
   },
   setup(A) {
-    const s = A, e = P(() => s.items.slice(0, -1)), t = P(() => s.items[s.items.length - 1]);
+    const s = A, e = x(() => s.items.slice(0, -1)), t = x(() => s.items[s.items.length - 1]);
     return (n, o) => (f(), m("div", Zi, [
       (f(!0), m(sA, null, aA(e.value, (c, i) => (f(), m("div", {
         key: i,
         class: "utopia-breadcrumbs__inactive-item"
       }, [
-        J(Wt, {
+        H(Wt, {
           label: c.label,
           to: c.to || "#",
           "icon-left": c.iconLeft,
@@ -4817,7 +4821,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           active: !1,
           size: "base"
         }, null, 8, ["label", "to", "icon-left", "icon-right"]),
-        J(F, {
+        H(F, {
           class: "utopia-breadcrumbs__separator",
           name: "Chevron-right",
           size: "medium",
@@ -4826,7 +4830,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         })
       ]))), 128)),
       d("div", Hi, [
-        J($A, {
+        H($A, {
           label: t.value.label,
           "icon-left": t.value.iconLeft,
           "icon-right": t.value.iconRight,
@@ -4864,23 +4868,23 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
   },
   emits: ["toggle-favorite", "card-click"],
   setup(A, { emit: s }) {
-    const e = A, t = s, { currentTheme: n } = yA(), o = P(() => ({
+    const e = A, t = s, { currentTheme: n } = yA(), o = x(() => ({
       [`utopia-link--${n.value?.mode || "light"}`]: !0
-    })), c = P(() => ({
+    })), c = x(() => ({
       fr: { comingBackSoon: "De retour bientôt", outOfStock: "En rupture" },
       en: { comingBackSoon: "Coming back soon", outOfStock: "Out of stock" }
-    })), i = P(() => c.value[e.language]), r = P(() => e.tags && e.tags.length > 0 || e.subventionName || e.discount), a = H(), u = P(() => !!(a.value && a.value.scrollHeight > a.value.clientHeight)), g = H(), l = P(() => !!(g.value && g.value.scrollHeight > g.value.clientHeight)), v = P(() => !!(e.discount && e.discount?.length > 16)), p = P(() => v.value ? e.discount?.slice(0, 13) + "..." : e.discount);
-    return (O, x) => (f(), m("div", {
-      class: C(["utopia-productcard", o.value]),
-      onClick: x[2] || (x[2] = jA((b) => t("card-click", { id: A.id }), ["stop"])),
-      onKeypress: x[3] || (x[3] = Ge(jA((b) => t("card-click", { id: A.id }), ["stop"]), ["enter"])),
+    })), i = x(() => c.value[e.language]), r = x(() => e.tags && e.tags.length > 0 || e.subventionName || e.discount), a = Z(), u = x(() => !!(a.value && a.value.scrollHeight > a.value.clientHeight)), g = Z(), l = x(() => !!(g.value && g.value.scrollHeight > g.value.clientHeight)), v = x(() => !!(e.discount && e.discount?.length > 16)), P = x(() => v.value ? e.discount?.slice(0, 13) + "..." : e.discount);
+    return (M, p) => (f(), m("div", {
+      class: J(["utopia-productcard", o.value]),
+      onClick: p[2] || (p[2] = jA((b) => t("card-click", { id: A.id }), ["stop"])),
+      onKeypress: p[3] || (p[3] = Ge(jA((b) => t("card-click", { id: A.id }), ["stop"]), ["enter"])),
       tabindex: "0"
     }, [
       d("div", Ci, [
         d("img", {
           src: A.imageUrl,
           alt: A.title,
-          class: C(["utopia-productcard__image", { "utopia-productcard__image--disabled": !A.available }])
+          class: J(["utopia-productcard__image", { "utopia-productcard__image--disabled": !A.available }])
         }, null, 10, Li),
         A.logoUrl ? (f(), m("img", {
           key: 0,
@@ -4889,13 +4893,13 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           alt: `${A.title} logo`
         }, null, 8, Ei)) : y("", !0),
         d("div", {
-          class: C(["utopia-productcard__favorite", { "utopia-productcard__favorite--active": A.isFavorite }]),
+          class: J(["utopia-productcard__favorite", { "utopia-productcard__favorite--active": A.isFavorite }]),
           tabindex: "0",
           "aria-pressed": A.isFavorite,
-          onClick: x[0] || (x[0] = jA((b) => t("toggle-favorite", { id: A.id, newState: !A.isFavorite }), ["stop"])),
-          onKeypress: x[1] || (x[1] = Ge(jA((b) => t("toggle-favorite", { id: A.id, newState: !A.isFavorite }), ["stop"]), ["enter"]))
+          onClick: p[0] || (p[0] = jA((b) => t("toggle-favorite", { id: A.id, newState: !A.isFavorite }), ["stop"])),
+          onKeypress: p[1] || (p[1] = Ge(jA((b) => t("toggle-favorite", { id: A.id, newState: !A.isFavorite }), ["stop"]), ["enter"]))
         }, [
-          J(F, {
+          H(F, {
             size: "extra-small",
             "stroke-width": 2,
             name: A.isFavorite ? "Heart-fill" : "Heart"
@@ -4905,8 +4909,8 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       d("div", Qi, [
         r.value ? (f(), m("div", hi, [
           d("div", Fi, [
-            (f(!0), m(sA, null, aA(A.tags, (b, k) => (f(), V(HA, {
-              key: k,
+            (f(!0), m(sA, null, aA(A.tags, (b, D) => (f(), S(HA, {
+              key: D,
               size: "extra-small"
             }, {
               default: R(() => [
@@ -4916,7 +4920,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
             }, 1024))), 128))
           ]),
           d("div", Ni, [
-            A.available ? y("", !0) : (f(), V(HA, {
+            A.available ? y("", !0) : (f(), S(HA, {
               key: 0,
               size: "extra-small",
               variant: "danger"
@@ -4926,7 +4930,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               ]),
               _: 1
             })),
-            A.subventionName ? (f(), V(_A, {
+            A.subventionName ? (f(), S(_A, {
               key: 1,
               placement: "top",
               openDelay: 150,
@@ -4939,7 +4943,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
                 oA(T(A.subventionTooltip), 1)
               ]),
               default: R(() => [
-                J(HA, {
+                H(HA, {
                   size: "extra-small",
                   customColor: "--theme-colors-common-subvention-700",
                   customTextColor: "--theme-colors-surface-card",
@@ -4953,7 +4957,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               ]),
               _: 1
             }, 8, ["active"])) : y("", !0),
-            A.discount ? (f(), V(_A, {
+            A.discount ? (f(), S(_A, {
               key: 2,
               placement: "top",
               openDelay: 150,
@@ -4969,14 +4973,14 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
                 ])
               ]),
               default: R(() => [
-                J(HA, {
+                H(HA, {
                   class: "utopia-productcard__discount",
                   size: "extra-small",
                   customColor: "--theme-colors-brand-accent-500",
                   customTextColor: "--theme-colors-surface-card"
                 }, {
                   default: R(() => [
-                    oA(T(p.value), 1)
+                    oA(T(P.value), 1)
                   ]),
                   _: 1
                 })
@@ -4985,7 +4989,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
             }, 8, ["active"])) : y("", !0)
           ])
         ])) : y("", !0),
-        A.title ? (f(), V(_A, {
+        A.title ? (f(), S(_A, {
           key: 1,
           placement: "top",
           openDelay: 150,
@@ -5006,7 +5010,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           ]),
           _: 1
         }, 8, ["active"])) : y("", !0),
-        A.description ? (f(), V(_A, {
+        A.description ? (f(), S(_A, {
           key: 2,
           placement: "top",
           openDelay: 150,
@@ -5027,7 +5031,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           ]),
           _: 1
         }, 8, ["active"])) : y("", !0),
-        A.available ? A.price || A.price === 0 ? (f(), V(Jo, {
+        A.available ? A.price || A.price === 0 ? (f(), S(Jo, {
           key: 4,
           class: "utopia-productcard__price-tag",
           variantCount: A.variantCount,
@@ -5053,7 +5057,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
   },
   emits: ["update-value"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = P(() => e.currentValue[0].toString()), o = P(() => e.currentValue[1].toString()), { currencyIconName: c } = Lt(e.currency), i = (v) => {
+    const e = A, t = s, n = x(() => e.currentValue[0].toString()), o = x(() => e.currentValue[1].toString()), { currencyIconName: c } = Lt(e.currency), i = (v) => {
       Number(v) <= e.currentValue[1] && t("update-value", [Number(v), e.currentValue[1]]);
     }, r = (v) => {
       Number(v) >= e.currentValue[0] && t("update-value", [e.currentValue[0], Number(v)]);
@@ -5068,9 +5072,9 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     }, l = (v) => {
       v.target.select();
     };
-    return (v, p) => (f(), m("div", Ki, [
+    return (v, P) => (f(), m("div", Ki, [
       d("div", Ri, [
-        J(te, {
+        H(te, {
           "model-value": n.value,
           label: A.labelMin,
           min: A.min,
@@ -5084,7 +5088,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           onFocus: l,
           onBlur: u
         }, null, 8, ["model-value", "label", "min", "max", "icon"]),
-        J(te, {
+        H(te, {
           "model-value": o.value,
           label: A.labelMax,
           min: A.currentValue[0],
@@ -5100,7 +5104,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         }, null, 8, ["model-value", "label", "min", "max", "icon"])
       ]),
       d("div", Ui, [
-        J(An, {
+        H(An, {
           currentValue: A.currentValue,
           min: A.min,
           max: A.max,
@@ -5147,17 +5151,17 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
   },
   emits: ["page-change", "size-change"],
   setup(A, { emit: s }) {
-    const e = A, { currentTheme: t } = yA(), n = P(() => ({
+    const e = A, { currentTheme: t } = yA(), n = x(() => ({
       [`utopia-pagenavigation--${t.value?.mode || "light"}`]: !0
-    })), { isMobile: o } = Jt(), c = P(() => {
-      const u = /* @__PURE__ */ new Set([1, e.totalPages]), g = P(() => o.value ? 1 : 2);
+    })), { isMobile: o } = Jt(), c = x(() => {
+      const u = /* @__PURE__ */ new Set([1, e.totalPages]), g = x(() => o.value ? 1 : 2);
       for (let l = e.currentPage - g.value; l <= e.currentPage + g.value; l++)
         l > 1 && l < e.totalPages && u.add(l);
       return [...u].sort((l, v) => l - v);
-    }), i = s, r = P(() => e.currentPage), a = P(() => e.size);
+    }), i = s, r = x(() => e.currentPage), a = x(() => e.size);
     return (u, g) => (f(), m("div", _i, [
       A.compact ? (f(), m("div", Ar, [
-        J(vA, {
+        H(vA, {
           class: "utopia-pagenavigation__compact-button",
           size: "xs",
           variant: "tertiary",
@@ -5172,7 +5176,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           _: 1
         }, 8, ["disabled"]),
         d("div", er, "Page " + T(A.currentPage) + " sur " + T(A.totalPages), 1),
-        J(vA, {
+        H(vA, {
           class: "utopia-pagenavigation__compact-button",
           size: "xs",
           variant: "tertiary",
@@ -5188,7 +5192,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           _: 1
         }, 8, ["disabled"])
       ])) : (f(), m("div", $i, [
-        J(vA, {
+        H(vA, {
           class: "utopia-pagenavigation__button",
           size: "md",
           variant: "tertiary",
@@ -5201,8 +5205,8 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           class: "utopia-pagenavigation__pages-container",
           key: l
         }, [
-          J(vA, {
-            class: C(["utopia-pagenavigation__single-page", { "utopia-pagenavigation__single-page-active": l === A.currentPage }]),
+          H(vA, {
+            class: J(["utopia-pagenavigation__single-page", { "utopia-pagenavigation__single-page-active": l === A.currentPage }]),
             size: "xs",
             variant: l === A.currentPage ? "primary" : "tertiary",
             onClick: () => i("page-change", l)
@@ -5214,10 +5218,10 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           }, 1032, ["class", "variant", "onClick"]),
           v === 0 && A.currentPage > 3 || v === c.value.length - 2 && A.currentPage < A.totalPages - 2 ? (f(), m("div", {
             key: 0,
-            class: C(["utopia-pagenavigation__ellipsis", n.value])
+            class: J(["utopia-pagenavigation__ellipsis", n.value])
           }, " … ", 2)) : y("", !0)
         ]))), 128)),
-        J(vA, {
+        H(vA, {
           class: "utopia-pagenavigation__button",
           size: "md",
           variant: "tertiary",
@@ -5231,9 +5235,9 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         A.showGoToPage ? (f(), m("div", tr)) : y("", !0),
         A.showGoToPage ? (f(), m("div", nr, [
           d("div", {
-            class: C(["utopia-pagenavigation__go-to-page-label", n.value])
+            class: J(["utopia-pagenavigation__go-to-page-label", n.value])
           }, T(A.goToPageLabel), 3),
-          J(Ze, {
+          H(Ze, {
             modelValue: r.value,
             "onUpdate:modelValue": g[4] || (g[4] = (l) => r.value = l),
             size: "small",
@@ -5244,9 +5248,9 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         A.showSize ? (f(), m("div", or)) : y("", !0),
         A.showSize ? (f(), m("div", cr, [
           d("div", {
-            class: C(["utopia-pagenavigation__size-label", n.value])
+            class: J(["utopia-pagenavigation__size-label", n.value])
           }, T(A.sizeLabel), 3),
-          J(Ze, {
+          H(Ze, {
             modelValue: a.value,
             "onUpdate:modelValue": g[6] || (g[6] = (l) => a.value = l),
             size: "small",
@@ -5287,22 +5291,22 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       injectStyles: !1
       // On utilise les mêmes styles que Menu.vue
     });
-    rA(() => e.isOpen, (p) => {
-      p && uA(() => {
+    rA(() => e.isOpen, (P) => {
+      P && uA(() => {
         setTimeout(r, 100);
       });
     });
     const g = () => {
       t("close");
-    }, l = (p) => {
-      t("nav-click", p), g();
-    }, v = (p) => {
-      p.target.closest(".nav-item") && setTimeout(() => {
+    }, l = (P) => {
+      t("nav-click", P), g();
+    }, v = (P) => {
+      P.target.closest(".nav-item") && setTimeout(() => {
         g();
       }, 100);
     };
-    return (p, O) => (f(), V(EA, { to: "body" }, [
-      J(DA, { name: "mobile-menu" }, {
+    return (P, M) => (f(), S(EA, { to: "body" }, [
+      H(DA, { name: "mobile-menu" }, {
         default: R(() => [
           A.isOpen ? (f(), m("div", rr, [
             d("div", {
@@ -5310,14 +5314,14 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               onClick: g
             }),
             d("aside", {
-              class: C(["utopia-menu mobile-menu-content", G(a)])
+              class: J(["utopia-menu mobile-menu-content", G(a)])
             }, [
               d("div", ar, [
                 d("div", fr, [
-                  AA(p.$slots, "header", {}, () => [
+                  AA(P.$slots, "header", {}, () => [
                     d("div", lr, [
-                      AA(p.$slots, "header-content", {}, () => [
-                        O[6] || (O[6] = d("h3", { class: "mobile-menu-title" }, "Menu", -1))
+                      AA(P.$slots, "header-content", {}, () => [
+                        M[6] || (M[6] = d("h3", { class: "mobile-menu-title" }, "Menu", -1))
                       ], !0)
                     ])
                   ], !0)
@@ -5326,7 +5330,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
                   class: "mobile-menu-close",
                   onClick: g
                 }, [
-                  J(G(F), {
+                  H(G(F), {
                     name: "X",
                     size: "medium",
                     color: "neutral",
@@ -5335,73 +5339,73 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
                 ])
               ]),
               d("nav", {
-                class: C(["menu-nav", G(u)]),
+                class: J(["menu-nav", G(u)]),
                 ref_key: "menuNavRef",
                 ref: n,
-                onScroll: O[5] || (O[5] = //@ts-ignore
-                (...x) => G(i) && G(i)(...x)),
+                onScroll: M[5] || (M[5] = //@ts-ignore
+                (...p) => G(i) && G(i)(...p)),
                 onClick: v
               }, [
-                AA(p.$slots, "nav-items", {}, () => [
+                AA(P.$slots, "nav-items", {}, () => [
                   d("div", {
                     class: "nav-item",
-                    onClick: O[0] || (O[0] = (x) => l("accueil"))
+                    onClick: M[0] || (M[0] = (p) => l("accueil"))
                   }, [
-                    J(G(F), {
+                    H(G(F), {
                       name: "Home",
                       size: "small",
                       color: "neutral"
                     }),
-                    O[7] || (O[7] = d("span", null, "Accueil", -1))
+                    M[7] || (M[7] = d("span", null, "Accueil", -1))
                   ]),
                   d("div", {
                     class: "nav-item",
-                    onClick: O[1] || (O[1] = (x) => l("couleurs"))
+                    onClick: M[1] || (M[1] = (p) => l("couleurs"))
                   }, [
-                    J(G(F), {
+                    H(G(F), {
                       name: "Palette",
                       size: "small",
                       color: "neutral"
                     }),
-                    O[8] || (O[8] = d("span", null, "Couleurs", -1))
+                    M[8] || (M[8] = d("span", null, "Couleurs", -1))
                   ]),
                   d("div", {
                     class: "nav-item",
-                    onClick: O[2] || (O[2] = (x) => l("typographie"))
+                    onClick: M[2] || (M[2] = (p) => l("typographie"))
                   }, [
-                    J(G(F), {
+                    H(G(F), {
                       name: "Type",
                       size: "small",
                       color: "neutral"
                     }),
-                    O[9] || (O[9] = d("span", null, "Typographie", -1))
+                    M[9] || (M[9] = d("span", null, "Typographie", -1))
                   ]),
                   d("div", {
                     class: "nav-item",
-                    onClick: O[3] || (O[3] = (x) => l("icones"))
+                    onClick: M[3] || (M[3] = (p) => l("icones"))
                   }, [
-                    J(G(F), {
+                    H(G(F), {
                       name: "Star",
                       size: "small",
                       color: "neutral"
                     }),
-                    O[10] || (O[10] = d("span", null, "Icônes", -1))
+                    M[10] || (M[10] = d("span", null, "Icônes", -1))
                   ]),
                   d("div", {
                     class: "nav-item",
-                    onClick: O[4] || (O[4] = (x) => l("parametres"))
+                    onClick: M[4] || (M[4] = (p) => l("parametres"))
                   }, [
-                    J(G(F), {
+                    H(G(F), {
                       name: "Settings",
                       size: "small",
                       color: "neutral"
                     }),
-                    O[11] || (O[11] = d("span", null, "Paramètres", -1))
+                    M[11] || (M[11] = d("span", null, "Paramètres", -1))
                   ])
                 ], !0)
               ], 34),
               d("div", dr, [
-                AA(p.$slots, "footer", {}, void 0, !0)
+                AA(P.$slots, "footer", {}, void 0, !0)
               ])
             ], 2)
           ])) : y("", !0)
@@ -5417,7 +5421,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     } }
   },
   setup(A) {
-    const s = A, e = H(!1), t = () => {
+    const s = A, e = Z(!1), t = () => {
       s.onOpenMenu();
     }, n = () => {
       e.value = window.innerWidth <= 768;
@@ -5432,7 +5436,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       title: "Ouvrir le menu",
       "aria-label": "Ouvrir le menu de navigation"
     }, [
-      J(G(F), {
+      H(G(F), {
         name: "Menu",
         size: "medium",
         color: "neutral",
@@ -5444,7 +5448,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
   __name: "Header",
   emits: ["mobile-menu-open", "nav-click"],
   setup(A, { emit: s }) {
-    const e = H(!1);
+    const e = Z(!1);
     rA(e, (i) => {
       if (i) {
         const r = window.scrollY;
@@ -5464,14 +5468,14 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     return (i, r) => (f(), m("header", zr, [
       d("nav", pr, [
         d("div", xr, [
-          J(mr, { onOpenMenu: t }),
+          H(mr, { onOpenMenu: t }),
           AA(i.$slots, "left", {}, void 0, !0)
         ]),
         d("div", Pr, [
           AA(i.$slots, "right", {}, void 0, !0)
         ])
       ]),
-      J(ur, {
+      H(ur, {
         "is-open": e.value,
         onClose: n,
         onNavClick: o
@@ -5479,7 +5483,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         header: R(() => [
           AA(i.$slots, "mobile-menu-header", {}, () => [
             d("div", Mr, [
-              J(G(ne), { size: "md" })
+              H(G(ne), { size: "md" })
             ])
           ], !0)
         ]),
@@ -5489,7 +5493,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               class: "nav-item",
               onClick: r[0] || (r[0] = (a) => o("accueil"))
             }, [
-              J(G(F), {
+              H(G(F), {
                 name: "Home",
                 size: "small",
                 color: "neutral"
@@ -5500,7 +5504,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               class: "nav-item",
               onClick: r[1] || (r[1] = (a) => o("couleurs"))
             }, [
-              J(G(F), {
+              H(G(F), {
                 name: "Palette",
                 size: "small",
                 color: "neutral"
@@ -5511,7 +5515,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               class: "nav-item",
               onClick: r[2] || (r[2] = (a) => o("typographie"))
             }, [
-              J(G(F), {
+              H(G(F), {
                 name: "Type",
                 size: "small",
                 color: "neutral"
@@ -5522,7 +5526,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               class: "nav-item",
               onClick: r[3] || (r[3] = (a) => o("icones"))
             }, [
-              J(G(F), {
+              H(G(F), {
                 name: "Star",
                 size: "small",
                 color: "neutral"
@@ -5533,7 +5537,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               class: "nav-item",
               onClick: r[4] || (r[4] = (a) => o("parametres"))
             }, [
-              J(G(F), {
+              H(G(F), {
                 name: "Settings",
                 size: "small",
                 color: "neutral"
@@ -5557,13 +5561,13 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
   },
   emits: ["update:collapsed", "update:headerCollapsed"],
   setup(A, { expose: s, emit: e }) {
-    const t = A, n = e, o = H(t.collapsed), c = H(!1), i = H(!1), r = H(!1), a = H(!1), u = H(null), {
+    const t = A, n = e, o = Z(t.collapsed), c = Z(!1), i = Z(!1), r = Z(!1), a = Z(!1), u = Z(null), {
       scrollElementRef: g,
       showTopShadow: l,
       showBottomShadow: v,
-      handleScroll: p,
-      initialize: O,
-      containerClasses: x,
+      handleScroll: P,
+      initialize: M,
+      containerClasses: p,
       scrollClasses: b
     } = es({
       initialDelay: 100,
@@ -5575,57 +5579,57 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         zIndex: 1e3
       },
       injectStyles: !0
-    }), k = () => {
+    }), D = () => {
       o.value = !o.value, u.value = o.value, n("update:collapsed", o.value);
-    }, w = () => {
+    }, B = () => {
       o.value = !0, a.value = !1, n("update:collapsed", o.value);
     };
     s({
       openMobileMenu: () => {
         o.value = !1, a.value = !0, n("update:collapsed", o.value);
       },
-      closeMobileMenu: w,
-      toggleMenu: k
+      closeMobileMenu: B,
+      toggleMenu: D
     });
-    const Z = () => {
-      const B = window.innerWidth <= 768;
-      r.value = !0, B ? B && (o.value = !0, a.value = !1, n("update:collapsed", o.value)) : (a.value = !1, u.value !== null ? o.value = u.value : o.value = !1, n("update:collapsed", o.value)), setTimeout(() => {
+    const I = () => {
+      const L = window.innerWidth <= 768;
+      r.value = !0, L ? L && (o.value = !0, a.value = !1, n("update:collapsed", o.value)) : (a.value = !1, u.value !== null ? o.value = u.value : o.value = !1, n("update:collapsed", o.value)), setTimeout(() => {
         r.value = !1;
       }, 100);
     };
     return xA(() => {
       window.innerWidth <= 768 ? (o.value = !0, a.value = !1, n("update:collapsed", o.value)) : (o.value = t.collapsed, n("update:collapsed", o.value)), setTimeout(() => {
-        c.value = !0, O();
-      }, 50), window.addEventListener("resize", Z), document.body.style.overflowX = "hidden";
+        c.value = !0, M();
+      }, 50), window.addEventListener("resize", I), document.body.style.overflowX = "hidden";
     }), OA(() => {
-      window.removeEventListener("resize", Z), document.body.style.overflowX = "";
-    }), (B, Q) => (f(), m("aside", {
-      class: C(["utopia-menu", [
+      window.removeEventListener("resize", I), document.body.style.overflowX = "";
+    }), (L, j) => (f(), m("aside", {
+      class: J(["utopia-menu", [
         {
           collapsed: o.value,
           initialized: c.value,
           resizing: r.value,
           "mobile-overlay": a.value
         },
-        ...G(x)
+        ...G(p)
       ]])
     }, [
       a.value ? (f(), m("div", {
         key: 0,
         class: "mobile-backdrop",
-        onClick: w
+        onClick: B
       })) : y("", !0),
       d("div", {
-        class: C(["menu-header", { collapsed: o.value }])
+        class: J(["menu-header", { collapsed: o.value }])
       }, [
         d("div", {
-          class: C(["header-logo-container", { collapsed: o.value }]),
-          onClick: Q[0] || (Q[0] = (I) => o.value ? k() : null)
+          class: J(["header-logo-container", { collapsed: o.value }]),
+          onClick: j[0] || (j[0] = (Q) => o.value ? D() : null)
         }, [
           d("div", br, [
-            AA(B.$slots, "header", {}, () => [
+            AA(L.$slots, "header", {}, () => [
               d("div", wr, [
-                J(G(F), {
+                H(G(F), {
                   name: "menu_tab",
                   size: "medium",
                   color: "neutral"
@@ -5634,7 +5638,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
             ], !0)
           ]),
           o.value ? (f(), m("div", Br, [
-            J(G(F), {
+            H(G(F), {
               name: "Panel-left",
               "stroke-width": 2,
               size: "small",
@@ -5645,9 +5649,9 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         o.value ? y("", !0) : (f(), m("div", {
           key: 0,
           class: "header-toggle",
-          onClick: k
+          onClick: D
         }, [
-          J(G(F), {
+          H(G(F), {
             name: "Panel-left",
             "stroke-width": 2,
             size: "small",
@@ -5657,9 +5661,9 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         a.value ? (f(), m("div", {
           key: 1,
           class: "mobile-close-btn",
-          onClick: w
+          onClick: B
         }, [
-          J(G(F), {
+          H(G(F), {
             name: "X",
             "stroke-width": 2,
             size: "small",
@@ -5668,19 +5672,19 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         ])) : y("", !0)
       ], 2),
       d("nav", {
-        class: C(["menu-nav", G(b)]),
+        class: J(["menu-nav", G(b)]),
         ref_key: "menuNavRef",
         ref: g,
-        onScroll: Q[1] || (Q[1] = //@ts-ignore
-        (...I) => G(p) && G(p)(...I))
+        onScroll: j[1] || (j[1] = //@ts-ignore
+        (...Q) => G(P) && G(P)(...Q))
       }, [
-        AA(B.$slots, "nav-items", {
+        AA(L.$slots, "nav-items", {
           collapsed: o.value,
           animating: i.value
         }, void 0, !0)
       ], 34),
       d("div", jr, [
-        AA(B.$slots, "footer", {}, void 0, !0)
+        AA(L.$slots, "footer", {}, void 0, !0)
       ])
     ], 2));
   }
@@ -5702,7 +5706,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
   },
   emits: ["click"],
   setup(A, { emit: s }) {
-    const e = A, t = s, n = H(), o = H(!1), c = H({}), i = async () => {
+    const e = A, t = s, n = Z(), o = Z(!1), c = Z({}), i = async () => {
       if (e.collapsed && (o.value = !0, await uA(), n.value)) {
         const l = n.value.getBoundingClientRect();
         c.value = {
@@ -5715,11 +5719,11 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       }
     }, r = () => {
       e.collapsed && (o.value = !1);
-    }, a = P(() => e.to ? "router-link" : e.href ? "a" : "button"), u = P(() => e.active), g = (l) => {
+    }, a = x(() => e.to ? "router-link" : e.href ? "a" : "button"), u = x(() => e.active), g = (l) => {
       t("click", l);
     };
     return (l, v) => (f(), m(sA, null, [
-      (f(), V(we(a.value), Zs({
+      (f(), S(we(a.value), Zs({
         to: A.to,
         href: A.href,
         class: ["nav-item", { active: u.value, collapsed: e.collapsed }]
@@ -5732,7 +5736,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       }), {
         default: R(() => [
           A.icon ? (f(), m("span", kr, [
-            J(G(F), {
+            H(G(F), {
               name: A.icon,
               size: "medium",
               color: "current",
@@ -5747,7 +5751,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         ]),
         _: 3
       }, 16, ["to", "href", "class"])),
-      A.collapsed && o.value ? (f(), V(EA, {
+      A.collapsed && o.value ? (f(), S(EA, {
         key: 0,
         to: "body"
       }, [
@@ -5768,7 +5772,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     collapsed: { type: Boolean, default: !1 }
   },
   setup(A) {
-    const s = A, e = H(), t = H(!1), n = H({}), o = async () => {
+    const s = A, e = Z(), t = Z(!1), n = Z({}), o = async () => {
       if (s.collapsed && (t.value = !0, await uA(), e.value)) {
         const i = e.value.getBoundingClientRect();
         n.value = {
@@ -5783,7 +5787,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       s.collapsed && (t.value = !1);
     };
     return (i, r) => (f(), m("div", {
-      class: C(["menu-section", { collapsed: A.collapsed }])
+      class: J(["menu-section", { collapsed: A.collapsed }])
     }, [
       A.collapsed ? (f(), m("div", {
         key: 1,
@@ -5797,7 +5801,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       ], 544)) : (f(), m("div", Zr, [
         d("span", Hr, T(A.label.toUpperCase()), 1)
       ])),
-      A.collapsed && t.value ? (f(), V(EA, {
+      A.collapsed && t.value ? (f(), S(EA, {
         key: 2,
         to: "body"
       }, [
@@ -5857,9 +5861,9 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       } catch {
         return null;
       }
-    })(), t = s, { menuCollapsed: n, setMenuCollapsed: o } = yA(), c = H(!1), i = (l) => {
+    })(), t = s, { menuCollapsed: n, setMenuCollapsed: o } = yA(), c = Z(!1), i = (l) => {
       o(l);
-    }, r = P(() => (l) => {
+    }, r = x(() => (l) => {
       if (!e?.path || !l.to)
         return !1;
       const v = e.path;
@@ -5872,51 +5876,51 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
       t("mode-toggle");
     };
     return (l, v) => (f(), m("div", Lr, [
-      J(G(Dr), {
+      H(G(Dr), {
         collapsed: G(n),
         "onUpdate:collapsed": i,
         headerCollapsed: c.value,
-        "onUpdate:headerCollapsed": v[0] || (v[0] = (p) => c.value = p)
+        "onUpdate:headerCollapsed": v[0] || (v[0] = (P) => c.value = P)
       }, {
         header: R(() => [
           d("div", Er, [
-            J(G(ne), { size: "xs" })
+            H(G(ne), { size: "xs" })
           ])
         ]),
         "nav-items": R(() => [
-          (f(!0), m(sA, null, aA(A.menuItems, (p) => (f(), m(sA, {
-            key: p.key
+          (f(!0), m(sA, null, aA(A.menuItems, (P) => (f(), m(sA, {
+            key: P.key
           }, [
-            "type" in p && p.type === "section" ? (f(), V(G(Ue), {
+            "type" in P && P.type === "section" ? (f(), S(G(Ue), {
               key: 0,
-              label: p.label,
+              label: P.label,
               collapsed: G(n)
-            }, null, 8, ["label", "collapsed"])) : (f(), V(G(Re), {
+            }, null, 8, ["label", "collapsed"])) : (f(), S(G(Re), {
               key: 1,
-              icon: p.icon,
-              label: p.label,
-              active: r.value(p),
+              icon: P.icon,
+              label: P.label,
+              active: r.value(P),
               collapsed: G(n),
               headerCollapsed: c.value,
-              onClick: (O) => a(p.to)
+              onClick: (M) => a(P.to)
             }, null, 8, ["icon", "label", "active", "collapsed", "headerCollapsed", "onClick"]))
           ], 64))), 128))
         ]),
         _: 1
       }, 8, ["collapsed", "headerCollapsed"]),
       d("div", {
-        class: C(["main-content", { "menu-collapsed": G(n) }])
+        class: J(["main-content", { "menu-collapsed": G(n) }])
       }, [
-        J(G(yr), { onNavClick: u }, {
+        H(G(yr), { onNavClick: u }, {
           left: R(() => [...v[1] || (v[1] = [])]),
           right: R(() => [
             AA(l.$slots, "header-right", {}, () => [
-              J(G(vA), {
+              H(G(vA), {
                 variant: "primary",
                 size: "sm",
                 onClick: g,
                 "aria-label": `Basculer vers le mode ${A.currentMode === "light" ? "sombre" : "clair"}`,
-                class: C(["mode-toggle", { dark: A.currentMode === "dark" }])
+                class: J(["mode-toggle", { dark: A.currentMode === "dark" }])
               }, {
                 default: R(() => [
                   d("span", Xr, T(A.currentMode === "light" ? "🌙" : "☀️"), 1)
@@ -5926,19 +5930,19 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
             ], !0)
           ]),
           "mobile-nav-items": R(() => [
-            (f(!0), m(sA, null, aA(A.menuItems, (p) => (f(), m(sA, {
-              key: p.key
+            (f(!0), m(sA, null, aA(A.menuItems, (P) => (f(), m(sA, {
+              key: P.key
             }, [
-              "type" in p && p.type === "section" ? (f(), V(G(Ue), {
+              "type" in P && P.type === "section" ? (f(), S(G(Ue), {
                 key: 0,
-                label: p.label,
+                label: P.label,
                 collapsed: !1
-              }, null, 8, ["label"])) : (f(), V(G(Re), {
+              }, null, 8, ["label"])) : (f(), S(G(Re), {
                 key: 1,
-                icon: p.icon,
-                label: p.label,
-                active: r.value(p),
-                onClick: (O) => a(p.to)
+                icon: P.icon,
+                label: P.label,
+                active: r.value(P),
+                onClick: (M) => a(P.to)
               }, null, 8, ["icon", "label", "active", "onClick"]))
             ], 64))), 128))
           ]),
@@ -5951,7 +5955,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           AA(l.$slots, "footer", {}, () => [
             d("div", Fr, [
               d("div", Nr, [
-                J(G(ne), {
+                H(G(ne), {
                   variant: "small",
                   size: "xs"
                 }),
@@ -6022,9 +6026,9 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     autoplayDelay: { default: 5e3 }
   },
   setup(A) {
-    const s = A, e = H(!1), t = () => {
+    const s = A, e = Z(!1), t = () => {
       console.log("Toggle bottomsheet clicked, current state:", e.value), e.value = !e.value, console.log("New state:", e.value);
-    }, n = P(() => s.slides), o = (i) => {
+    }, n = x(() => s.slides), o = (i) => {
       console.log("Slide changed to:", i);
     }, c = (i) => {
       i.key === "Escape" && e.value && t();
@@ -6038,7 +6042,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         d("div", Wr, [
           d("div", Kr, [
             AA(i.$slots, "logo", {}, () => [
-              J(ne, {
+              H(ne, {
                 brand: "club-employes",
                 variant: "small",
                 size: "md"
@@ -6057,7 +6061,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
           ]),
           A.showTips ? (f(), m("div", Aa, [
             d("div", ea, [
-              J(F, {
+              H(F, {
                 name: "Lightbulb",
                 size: "large"
               })
@@ -6082,7 +6086,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         ])
       ]),
       d("div", {
-        class: C(["auth-slider-section", { "bottomsheet-open": e.value }])
+        class: J(["auth-slider-section", { "bottomsheet-open": e.value }])
       }, [
         d("div", {
           class: "bottomsheet-header",
@@ -6096,14 +6100,14 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
             onClick: jA(t, ["stop"]),
             "aria-label": "Toggle bottomsheet"
           }, [
-            J(F, {
+            H(F, {
               name: e.value ? "Chevron-down" : "Chevron-up",
               size: "small",
               "stroke-width": "2"
             }, null, 8, ["name"])
           ])
         ]),
-        J(Io, {
+        H(Io, {
           slides: n.value,
           direction: "horizontal",
           autoplay: A.autoplay,
@@ -6124,7 +6128,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
               ])) : y("", !0),
               a.tips ? (f(), m("div", la, [
                 d("div", da, [
-                  J(F, {
+                  H(F, {
                     name: "Lightbulb",
                     size: "large"
                   })
@@ -6159,7 +6163,7 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
     disabled: { type: Boolean, default: !1 }
   },
   setup(A) {
-    const s = A, e = P(() => {
+    const s = A, e = x(() => {
       switch (s.size) {
         case "sm":
           return 32;
@@ -6168,14 +6172,14 @@ const Hc = cc, Jc = ic, Cc = tc, Lc = sc, Ec = (A, s, e) => {
         default:
           return 64;
       }
-    }), t = P(() => [
+    }), t = x(() => [
       `new-loader--${s.size}`,
       `new-loader--${s.variant}`,
       `new-loader--anim-${s.animation}`,
       { "new-loader--disabled": s.disabled }
     ]);
     return (n, o) => (f(), m("span", {
-      class: C(["new-loader", t.value]),
+      class: J(["new-loader", t.value]),
       role: "status",
       "aria-live": "polite"
     }, [