@1024pix/epreuves-components 2.2.1 → 2.2.2

package/dist/components/calcul-impact.ce.js.js

@@ -1,5 +1,5 @@
-import { d as j, A as T, c as p, o as d, F as U, z as v, M as r, E as C, a as e, y as a, B as _, T as D, _ as z, r as l, l as N, e as G, G as E, N as x, f as K } from "../_plugin-vue_export-helper-CP5OpzZH.js";
-import { a as H, i as V, b as Q } from "../i18n-BB4WILwM.js";
+import { d as j, C as T, c as p, o as d, F as U, B as v, M as r, v as C, a as e, A as a, D as _, T as D, _ as z, r as l, l as N, e as K, x, N as E, f as G } from "../_plugin-vue_export-helper-b0PKqEbd.js";
+import { a as H, i as V, b as Q } from "../i18n-DwNjk2PP.js";
 import { u as J } from "../normalize-props-AlmAfi_u.js";
 const X = {}, Z = {}, ee = {}, te = {
   "calcul-impact": { title: "Calculez votre impact IA", subtitle: "Quels ont été vos usages de l'IA la semaine dernière ?", numberOfConversationLabel: "Nombre de conversations courtes :", numberOfImagesLabel: "Nombre de créations d’images :", seePersonalImpact: "Voir votre impact personnel sur une semaine", seeCollectiveImpact: "Si 1 million de personnes faisaient comme vous toutes les semaines pendant un an", legals: "Estimations basées sur l'étude Hugging Face, Carnegie Mellon University, Allen Institute for AI, Oct 2024", yourPersonalImpact: "Votre impact personnel", consumptionForAWeek: "Votre consommation sur une semaine", consumptionForAYear: "1 million de personnes toutes les semaines pendant un an", personalConsumption: "Vous avez consommé environ {{energy}} Wh", personalDuration: "Cela équivaut à {{number}} minutes de micro-ondes", collectiveConsumption: "Cela représenterait {{energy}} kWh, soit l'équivalent de la consommation en électricité de {{homes}} foyers français", collectiveDuration: "Équivalent à {{number}} minutes de micro-ondes", planeKilometers: "Et {{kilometers}} km parcourus en avion", yourCollectiveImpact: "Impact collectif simulé" }
@@ -144,7 +144,7 @@ const X = {}, Z = {}, ee = {}, te = {
       e("div", {
         class: "title",
         role: "heading",
-        "arial-level": E(i)
+        "arial-level": x(i)
       }, "📊 " + a(s.$t("calcul-impact.title")), 9, Ce),
       e("p", null, a(s.$t("calcul-impact.subtitle")), 1),
       e("label", he, "🤖 " + a(s.$t("calcul-impact.numberOfConversationLabel")), 1),
@@ -154,7 +154,7 @@ const X = {}, Z = {}, ee = {}, te = {
         id: "numberOfConversation",
         "onUpdate:modelValue": I[0] || (I[0] = (O) => b.value = O)
       }, null, 544), [
-        [x, b.value]
+        [E, b.value]
       ]),
       e("label", ke, "🖼️ " + a(s.$t("calcul-impact.numberOfImagesLabel")), 1),
       N(e("input", {
@@ -163,13 +163,13 @@ const X = {}, Z = {}, ee = {}, te = {
         id: "numberOfImage",
         "onUpdate:modelValue": I[1] || (I[1] = (O) => f.value = O)
       }, null, 544), [
-        [x, f.value]
+        [E, f.value]
       ]),
-      c.value ? (d(), G(ge, {
+      c.value ? (d(), K(ge, {
         key: 0,
         "is-collective": y.value,
         "is-personal": c.value,
-        "title-level": E(i),
+        "title-level": x(i),
         "by-week-for-one": u.value,
         "by-year-for-a-million": m.value
       }, null, 8, ["is-collective", "is-personal", "title-level", "by-week-for-one", "by-year-for-a-million"])) : C("", !0),
@@ -186,7 +186,7 @@ const X = {}, Z = {}, ee = {}, te = {
   }
 }), $e = "[data-v-7fbb31b5]{font-family:Nunito,Roboto,sans-serif;color:#253858}p[data-v-7fbb31b5]{padding:0}.container[data-v-7fbb31b5]{display:flex;flex-direction:column;gap:1rem}.container button[data-v-7fbb31b5]{border:0;border-radius:5px;font-size:.9rem;background:#357abd;color:#fff;width:50%;padding:.4rem .8rem;margin:auto;cursor:pointer}.container button[data-v-7fbb31b5]:hover{background:#225d93}.container input[data-v-7fbb31b5]{border:solid 1px lightgrey;border-radius:5px;padding-block:.2rem;width:40%}.container label[data-v-7fbb31b5]{font-weight:700}.container .legals[data-v-7fbb31b5]{font-size:.9rem;font-style:italic}.container .title[data-v-7fbb31b5]{font-size:1.3rem;font-weight:700}@media only screen and (max-width:768px){.container button[data-v-7fbb31b5]{width:100%}.container input[data-v-7fbb31b5]{width:80%}}", Be = /* @__PURE__ */ z(we, [["styles", [$e]], ["__scopeId", "data-v-7fbb31b5"]]);
 H(/* @__PURE__ */ Object.assign({ "./locales/en.json": X, "./locales/es-419.json": Z, "./locales/es.json": ee, "./locales/fr.json": te, "./locales/it.json": ae, "./locales/nl.json": le })).catch((t) => console.error(t));
-const Y = K(Be, {
+const Y = G(Be, {
   configureApp(t) {
     V.changeLanguage(document?.documentElement?.lang || navigator.language), t.use(Q, {
       i18next: V,

package/dist/components/capacity-calculation.ce.js.js

@@ -1,7 +1,7 @@
-import { d as C, c as d, o, v as m, L as D, B as $, y as r, _ as v, O, P as h, r as g, k as x, a as t, z as L, F as R, b as z, G as V, q as Z, R as F, M as T, e as f, E as N, f as P } from "../_plugin-vue_export-helper-CP5OpzZH.js";
-import { i as k, a as G, b as W } from "../i18n-BB4WILwM.js";
+import { d as C, c as d, o, y as m, L as E, D as $, A as r, _ as v, O, P as h, r as g, k as x, a as t, B as L, F as R, b as V, x as Z, q as z, R as F, M as T, e as f, v as N, f as P } from "../_plugin-vue_export-helper-b0PKqEbd.js";
+import { i as k, a as W, b as G } from "../i18n-DwNjk2PP.js";
 import { u as H } from "../normalize-props-AlmAfi_u.js";
-import { R as K } from "../Retry--whpA3a8.js";
+import { R as K } from "../Retry-Df6WpF65.js";
 const J = {}, X = {}, Y = {}, aa = {
   "capacity-calculation": { title: "Observer l'impact des demandes", in: { title: "Demandes à l'IA", aiQuestion: "Quelle est la demande à l'IA ?", aiOptions: ["Fais une vidéo d’une durée d'une minute.", "Écris un texte de 10 lignes.", "Fais un dessin de haute qualité."], userQuestion: "Combien d’utilisateurs font la demande en même temps ?", buttonLabel: { primary: "Observer l'effet", warning: "Recommencer" } }, out: { title: "Impact des demandes", consumption: { label: "Consommation d’électricité :", normal_weak: "Faible", normal_medium: "Moyenne", warning: "Très forte", error: "Très forte", initial: "À l'arrêt" }, capacity: { label: "État du supercalculateur :", normal_weak: "Normal", normal_medium: "Normal", warning: "Sollicitation maximale", error: "Ne peut pas répondre à la demande", initial: "À l'arrêt" } } }
 }, ea = {}, ta = {}, ca = /* @__PURE__ */ C({
@@ -14,7 +14,7 @@ const J = {}, X = {}, Y = {}, aa = {
     return (c, _) => (o(), d("button", {
       class: m(["epreuve-button", a.state])
     }, [
-      D(c.$slots, "icon"),
+      E(c.$slots, "icon"),
       $(" " + r(a.label), 1)
     ], 2));
   }
@@ -47,7 +47,7 @@ const J = {}, X = {}, Y = {}, aa = {
     const _ = a.titleLevel + 1, n = h(a, "selectedAiQuestion"), e = h(a, "selectedNbUser"), l = h(a, "currentLevel"), s = g(!1), u = x(() => ({
       state: l.value === "initial" ? "primary" : "warning",
       label: k.t(`capacity-calculation.in.buttonLabel.${l.value === "initial" ? "primary" : "warning"}`)
-    })), p = x(() => Number.isInteger(n.value)), M = [800, 8e3, 14e3, 25e3, 9e4, 15e4], Q = /* @__PURE__ */ new Set([
+    })), p = x(() => Number.isInteger(n.value)), M = [800, 8e3, 14e3, 25e3, 9e4, 15e4], A = /* @__PURE__ */ new Set([
       // Valeurs de base
       10,
       20,
@@ -80,13 +80,13 @@ const J = {}, X = {}, Y = {}, aa = {
       75e3,
       1e5,
       125e3
-    ]), w = Array.from(Q).sort((i, y) => i - y), S = x(() => {
+    ]), w = Array.from(A).sort((i, y) => i - y), Q = x(() => {
       const i = w.indexOf(e.value);
       return Math.max(0, i);
-    }), U = (i) => {
+    }), S = (i) => {
       const y = i.target;
       e.value = w[Number(y.value)];
-    }, A = (i) => {
+    }, U = (i) => {
       if (s.value) {
         i.preventDefault();
         return;
@@ -118,7 +118,7 @@ const J = {}, X = {}, Y = {}, aa = {
       }, r(i.$t("capacity-calculation.in.title")), 1),
       t("fieldset", oa, [
         t("legend", ra, r(i.$t("capacity-calculation.in.aiQuestion")), 1),
-        (o(!0), d(R, null, z(i.$t("capacity-calculation.in.aiOptions", { returnObjects: !0 }), (E, b) => (o(), d("div", { key: b }, [
+        (o(!0), d(R, null, V(i.$t("capacity-calculation.in.aiOptions", { returnObjects: !0 }), (D, b) => (o(), d("div", { key: b }, [
           t("label", {
             class: m(["capacity-calculation__ai-option", { "capacity-calculation__ai-option--active": n.value === b, disabled: s.value }])
           }, [
@@ -130,7 +130,7 @@ const J = {}, X = {}, Y = {}, aa = {
               onClick: j,
               checked: n.value === b
             }, null, 8, sa),
-            $(" " + r(E), 1)
+            $(" " + r(D), 1)
           ], 2)
         ]))), 128))
       ]),
@@ -142,10 +142,10 @@ const J = {}, X = {}, Y = {}, aa = {
             id: "nbUser",
             name: "nbUser",
             min: 0,
-            max: V(w).length - 1,
-            value: S.value,
-            onChange: U,
-            onKeydown: A,
+            max: Z(w).length - 1,
+            value: Q.value,
+            onChange: S,
+            onKeydown: U,
             "aria-disabled": s.value,
             class: "capacity-calculation__range"
           }, null, 40, _a),
@@ -153,7 +153,7 @@ const J = {}, X = {}, Y = {}, aa = {
         ])
       ]),
       L(ia, {
-        onClick: Z(I, ["prevent"]),
+        onClick: z(I, ["prevent"]),
         "aria-disabled": !p.value,
         label: u.value.label,
         state: u.value.state
@@ -213,7 +213,7 @@ function qa(a, c) {
     }, null, -1)
   ])]);
 }
-const Ma = /* @__PURE__ */ v($a, [["render", qa]]), Qa = ["aria-level"], Sa = { class: "capacity-calculation__card" }, Ua = { class: "capacity-calculation__text capacity-calculation__text--strong" }, Aa = { class: "capacity-calculation__img" }, Ia = ["src"], ja = { class: "capacity-calculation__text" }, Ba = { class: "capacity-calculation__answers" }, Ea = { class: "capacity-calculation__card" }, Da = { class: "capacity-calculation__text capacity-calculation__text--strong" }, Oa = { class: "capacity-calculation__text" }, Ra = /* @__PURE__ */ C({
+const Ma = /* @__PURE__ */ v($a, [["render", qa]]), Aa = ["aria-level"], Qa = { class: "capacity-calculation__card" }, Sa = { class: "capacity-calculation__text capacity-calculation__text--strong" }, Ua = { class: "capacity-calculation__img" }, Ia = ["src"], ja = { class: "capacity-calculation__text" }, Ba = { class: "capacity-calculation__answers" }, Da = { class: "capacity-calculation__card" }, Ea = { class: "capacity-calculation__text capacity-calculation__text--strong" }, Oa = { class: "capacity-calculation__text" }, Ra = /* @__PURE__ */ C({
   __name: "Answers.ce",
   props: {
     currentLevel: { type: String },
@@ -229,10 +229,10 @@ const Ma = /* @__PURE__ */ v($a, [["render", qa]]), Qa = ["aria-level"], Sa = {
         role: "heading",
         "aria-level": a.titleLevel + 1,
         class: "capacity-calculation__subtitle"
-      }, r(c.$t("capacity-calculation.out.title")), 9, Qa),
-      t("div", Sa, [
-        t("p", Ua, r(c.$t("capacity-calculation.out.capacity.label")), 1),
-        t("div", Aa, [
+      }, r(c.$t("capacity-calculation.out.title")), 9, Aa),
+      t("div", Qa, [
+        t("p", Sa, r(c.$t("capacity-calculation.out.capacity.label")), 1),
+        t("div", Ua, [
           t("img", {
             src: a.capacityImage,
             alt: ""
@@ -251,8 +251,8 @@ const Ma = /* @__PURE__ */ v($a, [["render", qa]]), Qa = ["aria-level"], Sa = {
         t("p", ja, r(c.$t(`capacity-calculation.out.capacity.${a.currentLevel}`)), 1)
       ]),
       t("div", Ba, [
-        t("div", Ea, [
-          t("p", Da, r(c.$t("capacity-calculation.out.consumption.label")), 1),
+        t("div", Da, [
+          t("p", Ea, r(c.$t("capacity-calculation.out.consumption.label")), 1),
           t("div", {
             class: m(["capacity-calculation__progress-bar", a.currentLevel])
           }, null, 2),
@@ -261,7 +261,7 @@ const Ma = /* @__PURE__ */ v($a, [["render", qa]]), Qa = ["aria-level"], Sa = {
       ])
     ], 2));
   }
-}), za = ".capacity-calculation__column--answers[data-v-177ab412]{display:flex;gap:.3rem;border:0px}.capacity-calculation__column--answers--normal_weak[data-v-177ab412],.capacity-calculation__column--answers--normal_medium[data-v-177ab412]{background:#e6f6ef}.capacity-calculation__column--answers--warning[data-v-177ab412]{background:#fffaeb}.capacity-calculation__column--answers--error[data-v-177ab412]{background:#fbebea}.capacity-calculation__column--answers .capacity-calculation__answers[data-v-177ab412]{display:flex;flex-direction:column;align-items:stretch;gap:8px;justify-content:center;margin-bottom:1rem}.capacity-calculation__column--answers .capacity-calculation__card[data-v-177ab412]{border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px}.capacity-calculation__column--answers .capacity-calculation__text[data-v-177ab412]{font-size:.875rem;font-weight:400;line-height:1.5rem;text-align:center;margin:0}.capacity-calculation__column--answers .capacity-calculation__text--strong[data-v-177ab412]{font-weight:700;margin:0}.capacity-calculation__column--answers img[data-v-177ab412]{max-width:100%}.capacity-calculation__column--answers .capacity-calculation__img[data-v-177ab412]{position:relative}.capacity-calculation__column--answers .capacity-calculation__img img[data-v-177ab412]{width:100px;height:100px;border-radius:24px}.capacity-calculation__column--answers .capacity-calculation__img--status[data-v-177ab412]{position:absolute;top:0;right:0;transform:translate(30%,-30%)}.capacity-calculation__column--answers .capacity-calculation__progress-bar[data-v-177ab412]{width:100%;height:32px;border-radius:24px;border:solid 2px #253858}.capacity-calculation__column--answers .capacity-calculation__progress-bar.normal_weak[data-v-177ab412],.capacity-calculation__column--answers .capacity-calculation__progress-bar.normal_medium[data-v-177ab412]{background:linear-gradient(90deg,#1c825d 10%,#fff 36%)}.capacity-calculation__column--answers .capacity-calculation__progress-bar.warning[data-v-177ab412]{background:linear-gradient(90deg,#ee6911 30%,#fff 66%)}.capacity-calculation__column--answers .capacity-calculation__progress-bar.error[data-v-177ab412]{background:linear-gradient(90deg,#d24140 51%,#fff 88%)}@media(max-width:720px){.capacity-calculation__column--answers .capacity-calculation__answers[data-v-177ab412]{flex-direction:row;justify-content:center;gap:16px}}", Va = /* @__PURE__ */ v(Ra, [["styles", [za]], ["__scopeId", "data-v-177ab412"]]), Za = { class: "capacity-calculation" }, Fa = ["aria-level"], Ta = {
+}), Va = ".capacity-calculation__column--answers[data-v-177ab412]{display:flex;gap:.3rem;border:0px}.capacity-calculation__column--answers--normal_weak[data-v-177ab412],.capacity-calculation__column--answers--normal_medium[data-v-177ab412]{background:#e6f6ef}.capacity-calculation__column--answers--warning[data-v-177ab412]{background:#fffaeb}.capacity-calculation__column--answers--error[data-v-177ab412]{background:#fbebea}.capacity-calculation__column--answers .capacity-calculation__answers[data-v-177ab412]{display:flex;flex-direction:column;align-items:stretch;gap:8px;justify-content:center;margin-bottom:1rem}.capacity-calculation__column--answers .capacity-calculation__card[data-v-177ab412]{border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px}.capacity-calculation__column--answers .capacity-calculation__text[data-v-177ab412]{font-size:.875rem;font-weight:400;line-height:1.5rem;text-align:center;margin:0}.capacity-calculation__column--answers .capacity-calculation__text--strong[data-v-177ab412]{font-weight:700;margin:0}.capacity-calculation__column--answers img[data-v-177ab412]{max-width:100%}.capacity-calculation__column--answers .capacity-calculation__img[data-v-177ab412]{position:relative}.capacity-calculation__column--answers .capacity-calculation__img img[data-v-177ab412]{width:100px;height:100px;border-radius:24px}.capacity-calculation__column--answers .capacity-calculation__img--status[data-v-177ab412]{position:absolute;top:0;right:0;transform:translate(30%,-30%)}.capacity-calculation__column--answers .capacity-calculation__progress-bar[data-v-177ab412]{width:100%;height:32px;border-radius:24px;border:solid 2px #253858}.capacity-calculation__column--answers .capacity-calculation__progress-bar.normal_weak[data-v-177ab412],.capacity-calculation__column--answers .capacity-calculation__progress-bar.normal_medium[data-v-177ab412]{background:linear-gradient(90deg,#1c825d 10%,#fff 36%)}.capacity-calculation__column--answers .capacity-calculation__progress-bar.warning[data-v-177ab412]{background:linear-gradient(90deg,#ee6911 30%,#fff 66%)}.capacity-calculation__column--answers .capacity-calculation__progress-bar.error[data-v-177ab412]{background:linear-gradient(90deg,#d24140 51%,#fff 88%)}@media(max-width:720px){.capacity-calculation__column--answers .capacity-calculation__answers[data-v-177ab412]{flex-direction:row;justify-content:center;gap:16px}}", Za = /* @__PURE__ */ v(Ra, [["styles", [Va]], ["__scopeId", "data-v-177ab412"]]), za = { class: "capacity-calculation" }, Fa = ["aria-level"], Ta = {
   class: "capacity-calculation__grid",
   "aria-live": "polite"
 }, Pa = /* @__PURE__ */ C({
@@ -275,7 +275,7 @@ const Ma = /* @__PURE__ */ v($a, [["render", qa]]), Qa = ["aria-level"], Sa = {
     function l() {
       _.value = void 0, n.value = 10, e.value = "initial";
     }
-    return c({ reset: l }), (s, u) => (o(), d("div", Za, [
+    return c({ reset: l }), (s, u) => (o(), d("div", za, [
       t("div", {
         role: "heading",
         "aria-level": a.titleLevel,
@@ -292,7 +292,7 @@ const Ma = /* @__PURE__ */ v($a, [["render", qa]]), Qa = ["aria-level"], Sa = {
           "onUpdate:currentLevel": u[2] || (u[2] = (p) => e.value = p),
           class: m({ "initial-state": e.value === "initial" })
         }, null, 8, ["title-level", "selected-ai-question", "selected-nb-user", "current-level", "class"]),
-        e.value !== "initial" ? (o(), f(Va, {
+        e.value !== "initial" ? (o(), f(Za, {
           key: 0,
           "title-level": a.titleLevel,
           "selected-nb-user": n.value,
@@ -302,11 +302,11 @@ const Ma = /* @__PURE__ */ v($a, [["render", qa]]), Qa = ["aria-level"], Sa = {
       ])
     ]));
   }
-}), Ga = ".capacity-calculation__title,.capacity-calculation__subtitle{color:#122647;font-family:Nunito,serif;font-weight:700;text-align:center}.capacity-calculation__title{font-size:1.75rem;line-height:2.25rem;margin-bottom:1rem}.capacity-calculation__subtitle{font-size:1.25rem;line-height:1.75rem;margin-bottom:1rem}.capacity-calculation__grid{display:grid;gap:1rem;grid-template-columns:5fr 2.6fr}.capacity-calculation__grid .initial-state{grid-column:1/span 2}.capacity-calculation__column{display:flex;border-radius:8px;flex-direction:column;padding:16px}@media screen and (max-width:720px){.capacity-calculation__grid{display:flex;flex-direction:column}}", Wa = /* @__PURE__ */ v(Pa, [["styles", [Ga]]]);
-G(/* @__PURE__ */ Object.assign({ "./locales/en.json": J, "./locales/es-419.json": X, "./locales/es.json": Y, "./locales/fr.json": aa, "./locales/it.json": ea, "./locales/nl.json": ta })).catch((a) => console.error(a));
-const q = P(Wa, {
+}), Wa = ".capacity-calculation__title,.capacity-calculation__subtitle{color:#122647;font-family:Nunito,serif;font-weight:700;text-align:center}.capacity-calculation__title{font-size:1.75rem;line-height:2.25rem;margin-bottom:1rem}.capacity-calculation__subtitle{font-size:1.25rem;line-height:1.75rem;margin-bottom:1rem}.capacity-calculation__grid{display:grid;gap:1rem;grid-template-columns:5fr 2.6fr}.capacity-calculation__grid .initial-state{grid-column:1/span 2}.capacity-calculation__column{display:flex;border-radius:8px;flex-direction:column;padding:16px}@media screen and (max-width:720px){.capacity-calculation__grid{display:flex;flex-direction:column}}", Ga = /* @__PURE__ */ v(Pa, [["styles", [Wa]]]);
+W(/* @__PURE__ */ Object.assign({ "./locales/en.json": J, "./locales/es-419.json": X, "./locales/es.json": Y, "./locales/fr.json": aa, "./locales/it.json": ea, "./locales/nl.json": ta })).catch((a) => console.error(a));
+const q = P(Ga, {
   configureApp(a) {
-    k.changeLanguage(document?.documentElement?.lang || navigator.language), a.use(W, { i18next: k });
+    k.changeLanguage(document?.documentElement?.lang || navigator.language), a.use(G, { i18next: k });
   }
 });
 q.prototype.normalizeProps = (a) => ({

package/dist/components/clickable-image.ce.js.js

@@ -1,27 +1,27 @@
-import { d as B, g as E, r as f, h as N, j as O, k as c, c as x, o as m, a as y, l as P, m as W, F as j, b as D, q as L, t as b, v as q, x as T, y as U, _ as V, f as X } from "../_plugin-vue_export-helper-CP5OpzZH.js";
+import { d as E, g as O, r as x, h as P, j as W, k as c, c as d, o as p, a as w, l as _, m as j, F as D, b as L, q as V, t as y, v as q, x as T, y as U, z as X, A as Y, _ as G, f as H } from "../_plugin-vue_export-helper-b0PKqEbd.js";
 import { u as C } from "../normalize-props-AlmAfi_u.js";
-const Y = { class: "container" }, G = ["onMouseenter", "onFocusin", "onClick", "aria-label"], d = 10, H = /* @__PURE__ */ B({
+const J = { class: "container" }, K = ["onMouseenter", "onFocusin", "onClick", "aria-label"], v = 10, Q = /* @__PURE__ */ E({
   __name: "ClickableImage.ce",
   props: {
     image: { type: Object },
     areas: { type: Array }
   },
-  setup(s, { expose: I }) {
-    const l = E("image"), r = f(1), g = new ResizeObserver(() => $());
-    function $() {
+  setup(n, { expose: S }) {
+    const l = O("image"), r = x(1), b = new ResizeObserver(() => g());
+    function g() {
       l.value.naturalWidth && (r.value = l.value.offsetWidth / l.value.naturalWidth);
     }
-    N(() => {
-      g.observe(l.value);
-    }), O(() => {
-      g.disconnect();
+    P(() => {
+      b.observe(l.value);
+    }), W(() => {
+      b.disconnect();
     });
-    const h = c(() => s.areas.map((e) => ({
+    const A = n.areas.some(({ spot: e }) => !!e), h = c(() => n.areas.map((e) => ({
       ...e,
-      coords: M(e.coords),
-      spot: S(e.spot ?? { x: 0, y: 0 })
+      coords: I(e.coords),
+      spot: M(e.spot)
     })));
-    function M(e) {
+    function I(e) {
       return {
         x1: e.x1 * r.value,
         y1: e.y1 * r.value,
@@ -29,109 +29,110 @@ const Y = { class: "container" }, G = ["onMouseenter", "onFocusin", "onClick", "
         y2: e.y2 * r.value
       };
     }
-    function S(e) {
+    function M({ x: e = 0, y: t = 0 } = {}) {
       return {
-        x: e.x * r.value,
-        y: e.y * r.value
+        x: e * r.value,
+        y: t * r.value
       };
     }
-    const p = f();
-    function k(e) {
-      p.value = e;
+    const f = x();
+    function $(e) {
+      f.value = e;
     }
-    function w() {
-      p.value = void 0;
+    function k() {
+      f.value = void 0;
     }
-    const i = f();
-    function A(e) {
+    const i = x();
+    function F(e) {
       i.value = e;
     }
-    function F() {
+    function N() {
       i.value = void 0;
     }
-    const v = c(() => i.value ?? p.value), u = c(() => {
-      if (v.value !== void 0)
-        return h.value[v.value];
-    }), _ = c(() => {
+    const m = c(() => i.value ?? f.value), u = c(() => {
+      if (m.value !== void 0)
+        return h.value[m.value];
+    }), R = c(() => {
       if (!u.value) return {};
-      const { tooltipPosition: e, coords: { x1: o, y1: t, x2: a, y2: n } } = u.value;
+      const { tooltipPosition: e, coords: { x1: t, y1: o, x2: a, y2: s } } = u.value;
       switch (e) {
         case "top":
           return {
-            left: `${o + (a - o) / 2}px`,
+            left: `${t + (a - t) / 2}px`,
             transform: "translate(-50%, -100%)",
-            top: `${t - d}px`
+            top: `${o - v}px`
           };
         case "bottom":
           return {
-            left: `${o + (a - o) / 2}px`,
+            left: `${t + (a - t) / 2}px`,
             transform: "translateX(-50%)",
-            top: `${n + d}px`
+            top: `${s + v}px`
           };
         case "left":
           return {
-            left: `${o - d}px`,
-            top: `${t + (n - t) / 2}px`,
+            left: `${t - v}px`,
+            top: `${o + (s - o) / 2}px`,
             transform: "translate(-100%, -50%)"
           };
         default:
           return {
-            left: `${a + d}px`,
-            top: `${t + (n - t) / 2}px`,
+            left: `${a + v}px`,
+            top: `${o + (s - o) / 2}px`,
             transform: "translateY(-50%)"
           };
       }
     });
-    function R() {
+    function B() {
       i.value = void 0;
     }
-    return I({ reset: R }), (e, o) => (m(), x("div", Y, [
-      y("img", W(s.image, {
+    return S({ reset: B }), (e, t) => (p(), d("div", J, [
+      w("img", j(n.image, {
         ref: "image",
-        onLoad: o[0] || (o[0] = (t) => $()),
-        onClick: o[1] || (o[1] = (t) => F()),
+        onLoad: t[0] || (t[0] = (o) => g()),
+        onClick: t[1] || (t[1] = (o) => N()),
         alt: ""
       }), null, 16),
-      (m(!0), x(j, null, D(h.value, (t, a) => (m(), x("button", {
+      (p(!0), d(D, null, L(h.value, (o, a) => (p(), d("button", {
         key: a,
-        style: b({
-          "--y1": `${t.coords.y1}px`,
-          "--y2": `${t.coords.y2}px`,
-          "--x1": `${t.coords.x1}px`,
-          "--x2": `${t.coords.x2}px`
+        style: y({
+          "--y1": `${o.coords.y1}px`,
+          "--y2": `${o.coords.y2}px`,
+          "--x1": `${o.coords.x1}px`,
+          "--x2": `${o.coords.x2}px`
         }),
         class: "area",
-        onMouseenter: (n) => k(a),
-        onMouseleave: o[2] || (o[2] = (n) => w()),
-        onFocusin: (n) => k(a),
-        onFocusout: o[3] || (o[3] = (n) => w()),
-        onClick: L((n) => A(a), ["stop"]),
-        "aria-label": t.info
+        onMouseenter: (s) => $(a),
+        onMouseleave: t[2] || (t[2] = (s) => k()),
+        onFocusin: (s) => $(a),
+        onFocusout: t[3] || (t[3] = (s) => k()),
+        onClick: V((s) => F(a), ["stop"]),
+        "aria-label": o.info
       }, [
-        y("span", {
-          class: q(["spot", { active: v.value === a }]),
-          style: b({
-            "--s-x": `${t.spot.x}px`,
-            "--s-y": `${t.spot.y}px`
+        T(A) ? (p(), d("span", {
+          key: 0,
+          class: U(["spot", { active: m.value === a }]),
+          style: y({
+            "--s-x": `${o.spot.x}px`,
+            "--s-y": `${o.spot.y}px`
           })
-        }, null, 6)
-      ], 44, G))), 128)),
-      P(y("p", {
+        }, null, 6)) : q("", !0)
+      ], 44, K))), 128)),
+      _(w("p", {
         class: "tooltip",
         "aria-hidden": "true",
-        style: b(_.value)
-      }, U(u.value?.info), 5), [
-        [T, u.value]
+        style: y(R.value)
+      }, Y(u.value?.info), 5), [
+        [X, u.value]
       ])
     ]));
   }
-}), J = "*{font-family:Nunito,Roboto,sans-serif;color:var(#253858)}.container{position:relative;max-width:100%;border:1px solid #ccc}.container img{width:100%;height:auto;display:block}.container .area{cursor:pointer;position:absolute;top:var(--y1);left:var(--x1);height:calc(var(--y2) - var(--y1));width:calc(var(--x2) - var(--x1));border:none;background:transparent}.container .spot{cursor:pointer;position:absolute;width:32px;aspect-ratio:1;border:solid 4px #d9d9d9;background:#d9d9d999;border-radius:50%;top:50%;left:50%;transform:translate(calc(-50% + var(--s-x)),calc(-50% + var(--s-y)))}.container .spot.active{border-color:#6495ed}.container .tooltip{position:absolute;background-color:#000000d9;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;max-width:260px;z-index:10}", K = /* @__PURE__ */ V(H, [["styles", [J]]]), z = X(K);
-z.prototype.normalizeProps = (s) => ({
-  ...s,
+}), Z = "*{font-family:Nunito,Roboto,sans-serif;color:var(#253858)}.container{position:relative;max-width:100%;border:1px solid #ccc}.container img{width:100%;height:auto;display:block}.container .area{cursor:pointer;position:absolute;top:var(--y1);left:var(--x1);height:calc(var(--y2) - var(--y1));width:calc(var(--x2) - var(--x1));border:none;background:transparent}.container .spot{cursor:pointer;position:absolute;width:32px;aspect-ratio:1;border:solid 4px #d9d9d9;background:#d9d9d999;border-radius:50%;top:50%;left:50%;transform:translate(calc(-50% + var(--s-x)),calc(-50% + var(--s-y)))}.container .spot.active{border-color:#6495ed}.container .tooltip{position:absolute;background-color:#000000d9;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;max-width:260px;z-index:10}", ee = /* @__PURE__ */ G(Q, [["styles", [Z]]]), z = H(ee);
+z.prototype.normalizeProps = (n) => ({
+  ...n,
   image: {
-    ...s.image,
-    height: C(s.height),
-    width: C(s.width)
+    ...n.image,
+    height: C(n.height),
+    width: C(n.width)
   }
 });
 window.customElements.define("clickable-image", z);