@nexxtmove/ui 0.1.19 → 0.1.20

package/dist/index.d.ts

@@ -10,7 +10,7 @@ declare const __VLS_component_2: DefineComponent<NexxtChipProps, {}, {}, {}, {},
 
 declare const __VLS_component_3: DefineComponent<NexxtHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_4: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component_4: DefineComponent<NexxtInfoBlockProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtInfoBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_5: DefineComponent<NexxtStepperHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:currentStep": (...args: any[]) => void;
@@ -150,6 +150,11 @@ declare interface NexxtIconProps {
 
 export declare const NexxtInfoBlock: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
+declare interface NexxtInfoBlockProps {
+    icon: InstanceType<typeof NexxtIcon>['name'];
+    color?: 'green' | 'purple' | 'blue' | 'rose';
+}
+
 export declare const NexxtProgressBar: DefineComponent<NexxtProgressBarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:currentStep": (...args: any[]) => void;
 }, string, PublicProps, Readonly<NexxtProgressBarProps> & Readonly<{

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as m, ref as N, computed as f, watch as H, createBlock as k, openBlock as a, TransitionGroup as E, withCtx as y, createElementBlock as s, Fragment as S, renderList as T, createVNode as p, Transition as Z, toDisplayString as g, normalizeClass as c, createCommentVNode as b, renderSlot as w, createElementVNode as l, createTextVNode as M, watchEffect as C, normalizeStyle as F, withKeys as $, withModifiers as B, createStaticVNode as z, mergeProps as I, resolveDynamicComponent as V, createSlots as A } from "vue";
+import { defineComponent as m, ref as j, computed as d, watch as H, createBlock as k, openBlock as a, TransitionGroup as E, withCtx as x, createElementBlock as l, Fragment as S, renderList as T, createVNode as p, Transition as Z, toDisplayString as g, normalizeClass as c, createCommentVNode as b, renderSlot as w, createElementVNode as n, createTextVNode as M, watchEffect as C, normalizeStyle as F, withKeys as $, withModifiers as B, createStaticVNode as z, mergeProps as I, resolveDynamicComponent as V, createSlots as A } from "vue";
 const L = /* @__PURE__ */ m({
   __name: "AnimatedNumber",
   props: {
@@ -7,13 +7,13 @@ const L = /* @__PURE__ */ m({
     easing: { default: "ease-out" }
   },
   setup(e) {
-    const t = N("up"), n = f(() => String(e.value).split("")), i = f(() => `duration-${e.duration}`);
+    const t = j("up"), s = d(() => String(e.value).split("")), i = d(() => `duration-${e.duration}`);
     return H(
       () => e.value,
-      (u, d) => {
-        t.value = u > d ? "up" : "down";
+      (f, u) => {
+        t.value = f > u ? "up" : "down";
       }
-    ), (u, d) => (a(), k(E, {
+    ), (f, u) => (a(), k(E, {
       tag: "div",
       class: "relative flex shrink-0 items-center tabular-nums",
       "aria-label": e.value,
@@ -23,9 +23,9 @@ const L = /* @__PURE__ */ m({
       "leave-to-class": t.value === "up" ? "-translate-y-full opacity-0" : "translate-y-full opacity-0",
       "move-class": "transition-all duration-500 ease-in-out"
     }, {
-      default: y(() => [
-        (a(!0), s(S, null, T(n.value, (v, o) => (a(), s("div", {
-          key: o,
+      default: x(() => [
+        (a(!0), l(S, null, T(s.value, (v, r) => (a(), l("div", {
+          key: r,
           class: "relative inline-flex h-[1.5em] w-[1ch] items-center justify-center overflow-hidden",
           "aria-hidden": "true"
         }, [
@@ -35,8 +35,8 @@ const L = /* @__PURE__ */ m({
             "enter-from-class": t.value === "up" ? "translate-y-full" : "-translate-y-full",
             "leave-to-class": t.value === "up" ? "-translate-y-full" : "translate-y-full"
           }, {
-            default: y(() => [
-              (a(), s("span", {
+            default: x(() => [
+              (a(), l("span", {
                 key: v,
                 class: "flex h-full w-full items-center justify-center"
               }, g(v), 1))
@@ -48,7 +48,7 @@ const L = /* @__PURE__ */ m({
       _: 1
     }, 8, ["aria-label", "enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"]));
   }
-}), x = /* @__PURE__ */ m({
+}), y = /* @__PURE__ */ m({
   name: "NexxtIcon",
   __name: "Icon",
   props: {
@@ -56,7 +56,7 @@ const L = /* @__PURE__ */ m({
     type: { default: "light" }
   },
   setup(e) {
-    return (t, n) => (a(), s("i", {
+    return (t, s) => (a(), l("i", {
       class: c([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
     }, null, 2));
   }
@@ -75,7 +75,7 @@ const L = /* @__PURE__ */ m({
     buttonType: { default: "button" }
   },
   setup(e) {
-    return (t, n) => (a(), s("button", {
+    return (t, s) => (a(), l("button", {
       type: e.buttonType,
       disabled: e.disabled,
       class: c([
@@ -87,12 +87,12 @@ const L = /* @__PURE__ */ m({
       ]),
       "data-variant": e.variant
     }, [
-      e.icon ? (a(), k(x, {
+      e.icon ? (a(), k(y, {
         key: 0,
         name: e.icon,
         class: c(["transition-all duration-200", { "order-last": e.iconRight, "opacity-0": e.loading }])
       }, null, 8, ["name", "class"])) : b("", !0),
-      t.$slots.default ? (a(), s("span", {
+      t.$slots.default ? (a(), l("span", {
         key: 1,
         class: c([
           "inline-block transition-all duration-200",
@@ -111,9 +111,9 @@ const L = /* @__PURE__ */ m({
         "leave-from-class": "opacity-100",
         "leave-to-class": "opacity-0"
       }, {
-        default: y(() => [
-          e.loading ? (a(), s("div", R, [
-            p(x, {
+        default: x(() => [
+          e.loading ? (a(), l("div", R, [
+            p(y, {
               name: "spinner-third",
               type: "light",
               class: "fa-spin absolute text-sm"
@@ -131,7 +131,7 @@ const L = /* @__PURE__ */ m({
     variant: { default: "default" }
   },
   setup(e) {
-    const t = f(() => {
+    const t = d(() => {
       switch (e.variant) {
         case "warning":
           return "bg-orange-500";
@@ -143,11 +143,11 @@ const L = /* @__PURE__ */ m({
           return "bg-cornflower-blue-600";
       }
     });
-    return (n, i) => (a(), s("span", {
+    return (s, i) => (a(), l("span", {
       class: c(["inline-flex h-5 flex-col items-center justify-center gap-2.5 rounded-[200px] px-4", t.value])
     }, [
-      l("span", q, [
-        w(n.$slots, "default", {}, () => [
+      n("span", q, [
+        w(s.$slots, "default", {}, () => [
           i[0] || (i[0] = M("Chip", -1))
         ])
       ])
@@ -167,26 +167,26 @@ const L = /* @__PURE__ */ m({
     } }
   },
   setup(e) {
-    return (t, n) => (a(), s("div", {
+    return (t, s) => (a(), l("div", {
       class: c(["header flex items-center", t.$slots.center ? "grid grid-cols-3" : ""])
     }, [
-      l("div", G, [
+      n("div", G, [
         p(D, {
           class: "shrink-0",
           variant: "secondary",
           onClick: e.backButtonAction
         }, {
-          default: y(() => [
+          default: x(() => [
             M(g(e.backButtonText), 1)
           ]),
           _: 1
         }, 8, ["onClick"]),
-        l("span", U, g(e.title), 1)
+        n("span", U, g(e.title), 1)
       ]),
-      t.$slots.center ? (a(), s("div", W, [
+      t.$slots.center ? (a(), l("div", W, [
         w(t.$slots, "center")
       ])) : b("", !0),
-      t.$slots.right ? (a(), s("div", {
+      t.$slots.right ? (a(), l("div", {
         key: 1,
         class: c(t.$slots.center ? "col-span-1 col-start-3 flex justify-end" : "ml-auto")
       }, [
@@ -194,43 +194,79 @@ const L = /* @__PURE__ */ m({
       ], 2)) : b("", !0)
     ], 2));
   }
-}), Y = {
-  class: "info-block flex rounded-xl",
-  role: "note"
-}, J = {
-  class: "flex min-h-20 w-20 shrink-0 items-center justify-center rounded-l-xl bg-green-50",
-  "aria-hidden": "true"
-}, O = { class: "flex aspect-square h-10 items-center justify-center rounded-full bg-green-500" }, Q = { class: "p-5" }, C1 = /* @__PURE__ */ m({
+}), Y = { class: "p-5" }, Z1 = /* @__PURE__ */ m({
   name: "NexxtInfoBlock",
   __name: "InfoBlock",
+  props: {
+    icon: {},
+    color: { default: "green" }
+  },
   setup(e) {
-    return (t, n) => (a(), s("div", Y, [
-      l("div", J, [
-        l("div", O, [
-          p(x, {
-            name: "thumbs-up",
-            size: "lg",
-            class: "text-white"
-          })
-        ])
-      ]),
-      l("div", Q, [
-        n[1] || (n[1] = l("span", { class: "mr-[0.7ch] body-semibold" }, "Tip!", -1)),
-        w(t.$slots, "default", {}, () => [
-          n[0] || (n[0] = l("span", null, "Koopwoningen doen het goed als post of reel: zo geef je de woning genoeg aandacht én vergroot je het bereik.", -1))
-        ])
+    const t = d(() => {
+      switch (e.color) {
+        case "green":
+          return {
+            border: "border-green-500",
+            background: "bg-green-50",
+            icon: "bg-green-500"
+          };
+        case "purple":
+          return {
+            border: "border-purple-500",
+            background: "bg-sapphire-50",
+            icon: "bg-purple-500"
+          };
+        case "blue":
+          return {
+            border: "border-cornflower-blue-500",
+            background: "bg-yale-blue-50",
+            icon: "bg-cornflower-blue-500"
+          };
+        case "rose":
+          return {
+            border: "border-rose-500",
+            background: "bg-rose-50",
+            icon: "bg-rose-500"
+          };
+        default:
+          return {
+            border: "border-green-500",
+            background: "bg-green-50",
+            icon: "bg-green-500"
+          };
+      }
+    });
+    return (s, i) => (a(), l("div", {
+      class: c(["info-block flex rounded-xl border", t.value.border]),
+      role: "note"
+    }, [
+      n("div", {
+        class: c(["flex min-h-20 w-20 shrink-0 items-center justify-center rounded-l-lg", t.value.background]),
+        "aria-hidden": "true"
+      }, [
+        n("div", {
+          class: c(["flex aspect-square h-10 items-center justify-center rounded-3xl", t.value.icon])
+        }, [
+          p(y, {
+            name: e.icon,
+            class: "text-xl text-white"
+          }, null, 8, ["name"])
+        ], 2)
+      ], 2),
+      n("div", Y, [
+        w(s.$slots, "default")
       ])
-    ]));
+    ], 2));
   }
-}), _ = { class: "@container" }, e1 = { class: "flex flex-col @md:gap-2" }, t1 = { class: "flex items-center justify-between gap-2" }, a1 = ["aria-label", "aria-valuenow", "aria-valuetext"], l1 = {
+}), J = { class: "@container" }, O = { class: "flex flex-col @md:gap-2" }, Q = { class: "flex items-center justify-between gap-2" }, _ = ["aria-label", "aria-valuenow", "aria-valuetext"], e1 = {
   key: 0,
   class: "flex items-center small-normal tabular-nums @md:hidden",
   "aria-hidden": "true"
-}, s1 = {
+}, t1 = {
   key: 0,
   class: "flex justify-between @max-md:order-first @max-md:justify-center",
   "aria-label": "Progress steps"
-}, n1 = ["aria-current", "role", "tabindex", "aria-label", "onClick", "onKeydown"], i1 = /* @__PURE__ */ m({
+}, a1 = ["aria-current", "role", "tabindex", "aria-label", "onClick", "onKeydown"], l1 = /* @__PURE__ */ m({
   name: "NexxtProgressBar",
   __name: "ProgressBar",
   props: {
@@ -241,59 +277,59 @@ const L = /* @__PURE__ */ m({
   },
   emits: ["update:currentStep"],
   setup(e) {
-    const t = f(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), n = f(() => e.steps > 0 ? t.value + 1 : 0), i = f(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : t.value / (e.steps - 1) * 100), u = f(() => !!e.stepTitles?.length);
+    const t = d(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), s = d(() => e.steps > 0 ? t.value + 1 : 0), i = d(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : t.value / (e.steps - 1) * 100), f = d(() => !!e.stepTitles?.length);
     return C(() => {
       e.stepTitles && e.stepTitles.length !== e.steps && console.warn(
         `[NexxtProgressBar] The "stepTitles" array length (${e.stepTitles.length}) must match the "steps" prop (${e.steps}).`
       );
-    }), (d, v) => (a(), s("div", _, [
-      l("div", e1, [
-        l("div", t1, [
-          l("div", {
+    }), (u, v) => (a(), l("div", J, [
+      n("div", O, [
+        n("div", Q, [
+          n("div", {
             class: "progress-bar progress-bar-bar h-2 w-full overflow-hidden rounded-full",
             role: "progressbar",
             "aria-label": e.progressLabel,
             "aria-valuemin": "0",
             "aria-valuemax": "100",
             "aria-valuenow": Math.round(i.value),
-            "aria-valuetext": u.value && e.stepTitles?.[t.value] ? `Step ${n.value} of ${e.steps}: ${e.stepTitles[t.value]}` : `Step ${n.value} of ${e.steps}`
+            "aria-valuetext": f.value && e.stepTitles?.[t.value] ? `Step ${s.value} of ${e.steps}: ${e.stepTitles[t.value]}` : `Step ${s.value} of ${e.steps}`
           }, [
-            l("div", {
+            n("div", {
               class: "progress-bar-progress h-full transition-all duration-500 ease-out",
               style: F({ width: `${i.value}%` }),
               "aria-hidden": !0
             }, null, 4)
-          ], 8, a1),
-          u.value ? (a(), s("div", l1, [
-            p(L, { value: n.value }, null, 8, ["value"]),
-            l("span", null, "/" + g(e.steps), 1)
+          ], 8, _),
+          f.value ? (a(), l("div", e1, [
+            p(L, { value: s.value }, null, 8, ["value"]),
+            n("span", null, "/" + g(e.steps), 1)
           ])) : b("", !0)
         ]),
-        u.value ? (a(), s("ol", s1, [
-          (a(!0), s(S, null, T(e.stepTitles, (o, r) => (a(), s("li", {
-            key: o,
+        f.value ? (a(), l("ol", t1, [
+          (a(!0), l(S, null, T(e.stepTitles, (r, o) => (a(), l("li", {
+            key: r,
             class: c(["rounded-xs transition-colors duration-500 focus-visible:outline-3 @max-md:hidden @max-md:body-normal @min-md:small-normal", [
-              r === t.value ? "text-sapphire-500 @max-md:inline" : "",
-              r < t.value ? "cursor-pointer duration-200! hover:text-sapphire-400" : ""
+              o === t.value ? "text-sapphire-500 @max-md:inline" : "",
+              o < t.value ? "cursor-pointer duration-200! hover:text-sapphire-400" : ""
             ]]),
-            "aria-current": r === t.value ? "step" : void 0,
-            role: r < t.value ? "button" : void 0,
-            tabindex: r < t.value ? 0 : void 0,
-            "aria-label": r < t.value ? `Ga naar ${o}` : void 0,
-            onClick: (h) => r < t.value && d.$emit("update:currentStep", r),
+            "aria-current": o === t.value ? "step" : void 0,
+            role: o < t.value ? "button" : void 0,
+            tabindex: o < t.value ? 0 : void 0,
+            "aria-label": o < t.value ? `Ga naar ${r}` : void 0,
+            onClick: (h) => o < t.value && u.$emit("update:currentStep", o),
             onKeydown: [
-              $((h) => r < t.value && d.$emit("update:currentStep", r), ["enter"]),
-              $(B((h) => r < t.value && d.$emit("update:currentStep", r), ["prevent"]), ["space"])
+              $((h) => o < t.value && u.$emit("update:currentStep", o), ["enter"]),
+              $(B((h) => o < t.value && u.$emit("update:currentStep", o), ["prevent"]), ["space"])
             ]
-          }, g(o), 43, n1))), 128))
+          }, g(r), 43, a1))), 128))
         ])) : b("", !0)
       ])
     ]));
   }
-}), o1 = {
+}), n1 = {
   class: "m-0 inline-flex list-none items-start justify-start gap-0.5 p-0",
   "aria-label": "Sociale media kanalen"
-}, r1 = ["aria-label"], c1 = /* @__PURE__ */ m({
+}, s1 = ["aria-label"], i1 = /* @__PURE__ */ m({
   name: "NexxtSocialIcons",
   __name: "SocialIcons",
   props: {
@@ -305,7 +341,7 @@ const L = /* @__PURE__ */ m({
     tiktok: { type: Boolean }
   },
   setup(e) {
-    const t = e, n = [
+    const t = e, s = [
       { name: "facebook", label: "Facebook", icon: "facebook-f" },
       { name: "instagram", label: "Instagram", icon: "instagram" },
       { name: "linkedin", label: "LinkedIn", icon: "linkedin-in" },
@@ -319,28 +355,28 @@ const L = /* @__PURE__ */ m({
       x: "bg-brands-x",
       google: "bg-brands-google",
       tiktok: "bg-brands-tiktok"
-    }, u = f(
-      () => n.filter((d) => t[d.name])
+    }, f = d(
+      () => s.filter((u) => t[u.name])
     );
-    return (d, v) => (a(), s("ul", o1, [
-      (a(!0), s(S, null, T(u.value, (o) => (a(), s("li", {
-        key: o.name,
-        class: c(["inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white", i[o.name]]),
-        "aria-label": o.label
+    return (u, v) => (a(), l("ul", n1, [
+      (a(!0), l(S, null, T(f.value, (r) => (a(), l("li", {
+        key: r.name,
+        class: c(["inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white", i[r.name]]),
+        "aria-label": r.label
       }, [
-        p(x, {
-          name: o.icon,
+        p(y, {
+          name: r.icon,
           type: "brands",
           class: "text-[10px] text-white",
           "aria-hidden": "true"
         }, null, 8, ["name"])
-      ], 10, r1))), 128))
+      ], 10, s1))), 128))
     ]));
   }
-}), d1 = ["aria-pressed"], u1 = {
+}), r1 = ["aria-pressed"], o1 = {
   key: 0,
   class: "col-start-1 row-span-2 row-start-1"
-}, f1 = ["srcset"], h1 = ["src"], p1 = ["muted"], m1 = ["src", "type"], v1 = { class: "flex aspect-square items-center justify-center rounded-full bg-cornflower-blue-500 px-2" }, b1 = { class: "goup-hover:opacity-0 z-20 col-start-1 row-start-2 flex items-center bg-social-media-template-info-bg px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full" }, g1 = { class: "heading-4" }, y1 = { class: "extra-small" }, F1 = /* @__PURE__ */ m({
+}, c1 = ["srcset"], u1 = ["src"], d1 = ["muted"], f1 = ["src", "type"], h1 = { class: "flex aspect-square items-center justify-center rounded-full bg-cornflower-blue-500 px-2" }, p1 = { class: "goup-hover:opacity-0 z-20 col-start-1 row-start-2 flex items-center bg-social-media-template-info-bg px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full" }, m1 = { class: "heading-4" }, v1 = { class: "extra-small" }, H1 = /* @__PURE__ */ m({
   name: "NexxtSocialMediaTemplate",
   __name: "SocialMediaTemplate",
   props: {
@@ -356,44 +392,44 @@ const L = /* @__PURE__ */ m({
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const n = t, i = N(null), u = f(() => e.mediaType !== "video" ? void 0 : {
+    const s = t, i = j(null), f = d(() => e.mediaType !== "video" ? void 0 : {
       mp4: "video/mp4",
       webm: "video/webm",
       ogg: "video/ogg",
       mov: "video/quicktime",
       avi: "video/x-msvideo",
       mkv: "video/x-matroska"
-    }[e.mediaExtension || ""] || "video/mp4"), d = f(() => e.aspectRatio ? e.aspectRatio.startsWith("aspect-") ? e.aspectRatio.replace(":", "/") : `aspect-${e.aspectRatio.replace(":", "/")}` : e.mediaType === "video" ? "aspect-9/16" : ""), v = () => {
+    }[e.mediaExtension || ""] || "video/mp4"), u = d(() => e.aspectRatio ? e.aspectRatio.startsWith("aspect-") ? e.aspectRatio.replace(":", "/") : `aspect-${e.aspectRatio.replace(":", "/")}` : e.mediaType === "video" ? "aspect-9/16" : ""), v = () => {
       i.value && i.value.play();
-    }, o = () => {
+    }, r = () => {
       i.value && i.value.pause();
     };
-    return (r, h) => (a(), s("div", {
+    return (o, h) => (a(), l("div", {
       class: c(["group grid w-64 cursor-pointer grid-cols-1 grid-rows-[1fr_auto] overflow-hidden rounded-3xl outline-1 -outline-offset-1 transition-all focus-visible:outline-2 focus-visible:outline-cornflower-blue-600", [
-        e.variant !== "post" ? d.value : "h-80",
+        e.variant !== "post" ? u.value : "h-80",
         e.selected ? "outline-cornflower-blue-500" : "outline-gray-200"
       ]]),
       role: "button",
       tabindex: "0",
       "aria-pressed": e.selected,
       onMouseenter: v,
-      onMouseleave: o,
+      onMouseleave: r,
       onFocus: v,
-      onBlur: o,
-      onClick: h[0] || (h[0] = (j) => n("click")),
+      onBlur: r,
+      onClick: h[0] || (h[0] = (N) => s("click")),
       onKeydown: [
-        h[1] || (h[1] = $(B((j) => n("click"), ["prevent"]), ["enter"])),
-        h[2] || (h[2] = $(B((j) => n("click"), ["prevent"]), ["space"]))
+        h[1] || (h[1] = $(B((N) => s("click"), ["prevent"]), ["enter"])),
+        h[2] || (h[2] = $(B((N) => s("click"), ["prevent"]), ["space"]))
       ]
     }, [
-      e.mediaType === "image" ? (a(), s("picture", u1, [
-        l("source", { srcset: e.media }, null, 8, f1),
-        l("img", {
+      e.mediaType === "image" ? (a(), l("picture", o1, [
+        n("source", { srcset: e.media }, null, 8, c1),
+        n("img", {
           src: e.media,
           alt: "Media content",
           class: "h-full w-full object-cover object-center"
-        }, null, 8, h1)
-      ])) : (a(), s("video", {
+        }, null, 8, u1)
+      ])) : (a(), l("video", {
         key: 1,
         ref_key: "videoRef",
         ref: i,
@@ -401,63 +437,63 @@ const L = /* @__PURE__ */ m({
         loop: "true",
         class: "col-start-1 row-span-2 row-start-1 h-full w-full object-cover"
       }, [
-        l("source", {
+        n("source", {
           src: e.media,
-          type: u.value
-        }, null, 8, m1),
+          type: f.value
+        }, null, 8, f1),
         h[3] || (h[3] = M(" Your browser does not support the video tag. ", -1))
-      ], 8, p1)),
-      l("div", {
+      ], 8, d1)),
+      n("div", {
         class: c(["z-10 col-start-1 row-span-2 row-start-1 flex items-center justify-center bg-cornflower-blue-200/70 transition-opacity duration-300", e.selected ? "opacity-100" : "opacity-0"])
       }, [
-        l("div", v1, [
-          p(x, {
+        n("div", h1, [
+          p(y, {
             name: "check",
             class: "ml-auto block shrink-0 text-3xl text-white"
           })
         ])
       ], 2),
-      l("div", b1, [
-        l("div", null, [
-          l("div", g1, g(e.name), 1),
-          l("div", y1, g(e.type), 1)
+      n("div", p1, [
+        n("div", null, [
+          n("div", m1, g(e.name), 1),
+          n("div", v1, g(e.type), 1)
         ]),
-        p(x, {
+        p(y, {
           name: e.variant === "post" ? "image" : e.variant === "video" ? "play-circle" : "images",
           class: "mb-1 ml-auto block shrink-0 self-end text-lg"
         }, null, 8, ["name"])
       ])
-    ], 42, d1));
+    ], 42, r1));
   }
-}), x1 = {
+}), b1 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 394.727 791.624"
 };
-function k1(e, t) {
-  return a(), s("svg", x1, [...t[0] || (t[0] = [
+function g1(e, t) {
+  return a(), l("svg", b1, [...t[0] || (t[0] = [
     z('<path fill="#090814" d="M394.727 188.12h-4.353V68.962A68.963 68.963 0 0 0 321.412 0H68.963A68.963 68.963 0 0 0 0 68.962v653.7a68.963 68.963 0 0 0 68.962 68.962h252.45a68.963 68.963 0 0 0 68.963-68.963V272.937h4.352Z"></path><path fill="#fff" d="M324.203 17.943h-32.952a24.468 24.468 0 0 1-22.654 33.71H123.965a24.468 24.468 0 0 1-22.655-33.71H70.533a51.5 51.5 0 0 0-51.5 51.5v652.746a51.5 51.5 0 0 0 51.5 51.5h253.66a51.5 51.5 0 0 0 51.5-51.5V69.445a51.5 51.5 0 0 0-51.491-51.5Z"></path><path fill="#f2f2f2" d="M188.368 428.147c0 61.894-36.795 83.5-82.184 83.5S24 490.036 24 428.147s82.184-140.633 82.184-140.633 82.184 78.739 82.184 140.633"></path><path fill="#e6e6e6" d="m103.192 502.185.842-51.8 35.028-64.084-34.9 55.958.378-23.292 24.142-46.364-24.042 40.2.681-41.891 25.85-36.911-25.739 30.326.425-76.812-2.673 101.686.22-4.2-26.284-40.227 25.862 48.284-2.449 46.784-.073-1.242-30.299-42.334 30.208 46.724-.306 5.85-.055.088.025.481-6.213 118.7h8.3l1-61.309 30.134-46.609Z"></path><path fill="#f2f2f2" d="M370.006 394.663c0 76.7-45.6 103.476-101.845 103.476s-101.845-26.781-101.845-103.476S268.16 220.385 268.16 220.385s101.846 97.576 101.846 174.278"></path><path fill="#e6e6e6" d="m264.454 486.413 1.043-64.193 43.408-79.415-43.249 69.346.468-28.864 29.917-57.456-29.793 49.817.844-51.913 32.034-45.742-31.9 37.581.527-95.188-3.309 126.013.273-5.2-32.572-49.855 32.049 59.835-3.035 57.977-.09-1.539-37.548-52.463 37.435 57.9-.379 7.25-.068.109.031.6-7.7 147.1h10.286l1.239-75.976 37.343-57.76Z"></path><g transform="translate(-737.609 -43.85)"><circle cx="20.597" cy="20.597" r="20.597" fill="#2f2e41" transform="translate(914.156 243.577)"></circle><path fill="#ed9da0" d="m1008.156 198.66 6.881-5.771a8.133 8.133 0 0 0 .607-11.9 8.133 8.133 0 0 0-13.407 2.7l-3.284 8.393-26.293 45.137-13.366 36.592 10.737 12.928 14.461-44.7ZM861.789 198.66l-6.881-5.771a8.133 8.133 0 0 1-.607-11.9 8.133 8.133 0 0 1 13.407 2.7l3.284 8.393 26.293 45.137 14.68 37.03-12.051 12.489-14.461-44.7Z"></path><circle cx="10.517" cy="10.517" r="10.517" fill="#090814" transform="translate(925.113 233.06)"></circle><path fill="#ed9da0" d="m936.505 572.683-9.422-.657.438-128.4 23.226 5.7Z"></path><path fill="#090814" d="M925.938 604.606a9.16 9.16 0 0 1-8.443-6.134c-2.049-6.021-.99-11.749 2.578-17.242l-1.166-8.161a9.08 9.08 0 0 1 2.137-7.241l6.041-6.947v8.764c4.422-3.867 7.148-4.007 10.956-.876l-3.511 17.966.856 9.844a9.23 9.23 0 0 1-9.453 10.027Z"></path><path fill="#ed9da0" d="m951.624 312.159-36.811-.876c5.216-5.07 12.686-24.512 11.394-30.237h17.967c-2.156 5.892 2.018 25.907 7.45 31.113"></path><path fill="#f59e0b" d="m961.264 379.646-50.834-14.9 1.753-21.911-4.381-22.344c.447-2.425-11.123-32.374-10.517-34.62 2.42-8.972 8.759-7.732 13.366-14.242.748-1.057 6.586 6.377 10.362 11.4.448.774.756 1.3.968 1.655a13.1 13.1 0 0 1 1.763 7.961v.048c-2.069 7.161 2.684 4.225 10.137 4.349 6.323.105 12.051 5.115 12.051-1.208q-.016-.539-.043-1.118a17.64 17.64 0 0 1 2.22-9.273 39 39 0 0 1 2.016-3.5c4.277-6.047 10.166-14.083 10.487-12.944 1.351 4.795 8.3 8.823 10.737 17.31.375 1.306-1.883 9.235-1.753 10.517.976 9.611-.876 14.9-1.753 22.349a188.8 188.8 0 0 0-6.579 60.471"></path><path fill="#090814" d="m954.254 454.58-28.923-8.764-.438-26.293-22.788-43.822 8.764-14.461 49.957 13.147c3.41 21.843-.347 49.942-6.572 80.193"></path><path fill="#2f2e41" d="M940.669 419.524h-15.777l-29.36-41.193 10.517-8.765Z"></path><path fill="#090814" d="M948.119 419.086h-26.214a31.05 31.05 0 0 1-17.447-5.332 27.71 27.71 0 0 1-8.926-35.423l52.587 2.629Z"></path><path fill="#ed9da0" d="m925.182 389.548-23.077-.7q-.13-.329-.246-.66c-3.069-8.741 1.546-18.243 10.085-21.836.86-.362 1.733-.7 2.625-1a13.784 13.784 0 0 1 18.326 12.774 35 35 0 0 1-.327 5.25 7.216 7.216 0 0 1-7.383 6.172Z"></path><path fill="#ed9da0" d="M912.622 459.839h-9.2l-1.315-74.5 25.856-.438Z"></path><path fill="#090814" d="M902.273 492.576a9.16 9.16 0 0 1-8.443-6.134c-2.049-6.021-.99-11.749 2.578-17.242l-1.166-8.161a9.08 9.08 0 0 1 2.137-7.241l6.041-6.947v8.764c4.422-3.867 7.148-4.007 10.956-.876l-3.506 17.967.856 9.844a9.23 9.23 0 0 1-9.453 10.027Z"></path><circle cx="17.967" cy="17.967" r="17.967" fill="#ed9da0" transform="translate(917.443 251.685)"></circle><path fill="#090814" d="M951.186 261.763c0 9.2-8.332-3.944-17.529-3.944s-15.776 13.141-15.776 3.944a16.652 16.652 0 0 1 33.3 0Z"></path></g><path fill="none" stroke="#090814" stroke-linecap="round" stroke-width="5" d="M65.5 141.199h288"></path><path fill="#f2f2f2" d="M375.246 571.411H19.367v-3.3H375.41Z"></path><path fill="#f59e0b" d="M140 72.699h48a8 8 0 0 1 0 16h-48a8 8 0 0 1 0-16"></path><path fill="#e6e6e6" d="M208 72.699h48a8 8 0 0 1 0 16h-48a8 8 0 0 1 0-16"></path><path fill="#090814" d="M57 626.699h98a8 8 0 0 1 0 16H57a8 8 0 0 1 0-16"></path><path fill="#f59e0b" d="M183 626.699a8 8 0 1 1-8 8 8 8 0 0 1 8-8"></path><path fill="#e6e6e6" d="M57 650.699h208a8 8 0 0 1 0 16H57a8 8 0 0 1 0-16M57 674.699h208a8 8 0 0 1 0 16H57a8 8 0 0 1 0-16"></path><path fill="#090814" d="M62.494 775.195a51.68 51.68 0 0 1-44.131-44.029v-10.971h358.049v8.514a51.65 51.65 0 0 1-44.406 46.486Z"></path><path fill="#f59e0b" d="M65.5 735.699a16.5 16.5 0 1 1-16.5 16.5 16.5 16.5 0 0 1 16.5-16.5"></path><path fill="#3f3d56" d="M130.5 735.699a16.5 16.5 0 1 1-16.5 16.5 16.5 16.5 0 0 1 16.5-16.5M196.5 735.699a16.5 16.5 0 1 1-16.5 16.5 16.5 16.5 0 0 1 16.5-16.5M326.5 735.699a16.5 16.5 0 1 1-16.5 16.5 16.5 16.5 0 0 1 16.5-16.5M261.5 735.699a16.5 16.5 0 1 1-16.5 16.5 16.5 16.5 0 0 1 16.5-16.5"></path><path fill="#f59e0b" d="M328.5 666.699a16.5 16.5 0 1 1-16.5 16.5 16.5 16.5 0 0 1 16.5-16.5"></path><path fill="#e6e6e6" d="M328.5 625.699a16.5 16.5 0 1 1-16.5 16.5 16.5 16.5 0 0 1 16.5-16.5M328.5 584.699a16.5 16.5 0 1 1-16.5 16.5 16.5 16.5 0 0 1 16.5-16.5"></path><path fill="#f59e0b" d="M329 409.699a24 24 0 1 1-24 24 24 24 0 0 1 24-24"></path><path fill="#fe6583" d="M329 445.699a12 12 0 1 1-12 12 12 12 0 0 1 12-12"></path><path fill="#f2f2f2" d="M328.093 462.887c-.454-1.085 0-4.34 0-4.34s-3.207.427-4.275 0-1.069-1.281 0-1.708 4.275 0 4.275 0-.454-3.247 0-4.329 1.362-1.082 1.815 0 0 4.329 0 4.329 3.207-.427 4.275 0 1.069 1.281 0 1.708-4.275 0-4.275 0 .454 3.255 0 4.34-1.361 1.085-1.815 0"></path>', 22)
   ])]);
 }
-const w1 = { render: k1 }, M1 = {
+const x1 = { render: g1 }, y1 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 716.872 800.535"
 };
-function $1(e, t) {
-  return a(), s("svg", M1, [...t[0] || (t[0] = [
+function k1(e, t) {
+  return a(), l("svg", y1, [...t[0] || (t[0] = [
     z('<path fill="#ed9da0" d="M118.9 79.849a68.781 68.781 0 1 1 89.387 65.637l-13.3 87.874-67.779-56.487s14.643-18.652 22.5-39.683a68.7 68.7 0 0 1-30.8-57.341ZM14.072 592.752l17.049-120.7 36.779 24.27L43.968 598.63c4.422 6.371 6.331 15.182 4.537 24.3-3.138 15.961-16.39 26.794-29.6 24.2S-2.467 629.49.671 613.529c1.794-9.122 6.9-16.554 13.4-20.777Z"></path><path fill="#e09093" d="m351.03 583.309-17.049-120.7-36.782 24.273 23.935 102.3c-4.422 6.371-6.331 15.182-4.537 24.3 3.138 15.961 16.39 26.794 29.6 24.2s21.373-17.641 18.235-33.6c-1.794-9.122-6.9-16.554-13.4-20.777Z"></path><path fill="#e6e6e6" d="m207.009 161.502-80.27 11.8v21.407s-68.466-11.963-77.909 47.059v146.379L15.779 534.519l42.5 9.443 53.12-155.819 20.4 19.319h106.24l25.47-19.315 33.212 132.21L346.3 501.47l-25.691-122.766s11.529-153.458-42.772-177.067-54.3-16.526-54.3-16.526z"></path><path fill="#090814" d="m131.462 407.035-9.444 25.97S51.192 501.47 65.357 678.537l231.367-7.083s33.052-188.871-44.857-243.171l-14.184-21.248zM96.816 170.219s3.212 24.368 32.969 25.164L190.148 197S139.121 72.815 160.102 86.805s76.934-44.661 76.934-44.661l16.509 30.963s39.442-14.283-4.27-49.258c0 0-52.155-40.322-107.524-16.109S96.816 170.219 96.816 170.219"></path><path fill="#fff" d="m535.34 799.472-329.553-90.5a14.737 14.737 0 0 1-10.3-18.093L357.866 99.601a14.737 14.737 0 0 1 18.093-10.3l329.554 90.5a14.737 14.737 0 0 1 10.3 18.093l-162.38 591.281a14.737 14.737 0 0 1-18.093 10.3Z"></path><path fill="none" stroke="#2f2e41" stroke-miterlimit="10" d="m535.34 799.472-329.553-90.5a14.737 14.737 0 0 1-10.3-18.093L357.866 99.601a14.737 14.737 0 0 1 18.093-10.3l329.554 90.5a14.737 14.737 0 0 1 10.3 18.093l-162.38 591.281a14.737 14.737 0 0 1-18.093 10.3Z"></path><path fill="#6899FC" d="m561.191 577.54-270.7-74.339a16.654 16.654 0 0 1-11.637-20.446l61.655-224.509a16.654 16.654 0 0 1 20.447-11.635l270.7 74.339a16.65 16.65 0 0 1 11.634 20.445l-61.654 224.51a16.65 16.65 0 0 1-20.445 11.635"></path><path fill="#d6d6e3" d="m441.72 224.644-73.547-20.2a7.11 7.11 0 0 1-4.968-8.728l4.695-17.1a7.11 7.11 0 0 1 8.729-4.968l73.547 20.196a7.11 7.11 0 0 1 4.965 8.728l-4.695 17.1a7.11 7.11 0 0 1-8.726 4.967ZM446.594 170.792l-65.375-17.953a6.02 6.02 0 0 1-4.208-7.394l3.86-14.056a6.02 6.02 0 0 1 7.394-4.209l65.375 17.953a6.02 6.02 0 0 1 4.207 7.4l-3.86 14.056a6.02 6.02 0 0 1-7.394 4.208ZM546.922 253.529l-73.547-20.2a7.11 7.11 0 0 1-4.968-8.728l4.695-17.1a7.11 7.11 0 0 1 8.729-4.968l73.547 20.2a7.11 7.11 0 0 1 4.965 8.728l-4.695 17.1a7.11 7.11 0 0 1-8.726 4.967ZM652.124 282.42l-73.547-20.2a7.11 7.11 0 0 1-4.968-8.728l4.695-17.1a7.11 7.11 0 0 1 8.729-4.968l73.547 20.2a7.11 7.11 0 0 1 4.965 8.728l-4.695 17.101a7.11 7.11 0 0 1-8.726 4.967"></path><path fill="#6899FC" d="M275.576 590.166a22.618 22.618 0 1 1 27.8-15.821 22.644 22.644 0 0 1-27.8 15.821"></path><path fill="#d6d6e3" d="m461.072 678.359-207.838-57.077a10.644 10.644 0 1 1 5.637-20.527l207.839 57.076a10.644 10.644 0 1 1-5.637 20.527ZM452.138 715.914 244.299 658.84a10.644 10.644 0 1 1 5.638-20.526l207.838 57.077a10.644 10.644 0 1 1-5.637 20.527ZM367.509 732.687l-132.144-36.289a10.644 10.644 0 1 1 5.637-20.527l132.142 36.289a10.644 10.644 0 1 1-5.637 20.527Z"></path>', 10)
   ])]);
 }
-const B1 = { render: $1 }, S1 = {
+const w1 = { render: k1 }, M1 = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 117 182"
 };
-function T1(e, t) {
-  return a(), s("svg", S1, [...t[0] || (t[0] = [
+function $1(e, t) {
+  return a(), l("svg", M1, [...t[0] || (t[0] = [
     z('<g clip-path="url(#a)"><path fill="#3F3D56" d="M42.451 0h56.677a16.75 16.75 0 0 1 11.852 4.94 16.9 16.9 0 0 1 4.918 11.91v5.148a.775.775 0 0 1 .907.413c.053.11.079.23.078.35v3.959a.792.792 0 0 1-.303.629.78.78 0 0 1-.682.134v5.993a.775.775 0 0 1 .907.414c.053.109.079.229.078.35v9.896a.786.786 0 0 1-.628.777.8.8 0 0 1-.357-.013v3.618a.775.775 0 0 1 .907.413c.053.11.079.23.078.35v9.897a.79.79 0 0 1-.628.777.8.8 0 0 1-.357-.014v104.503a16.9 16.9 0 0 1-4.918 11.909 16.75 16.75 0 0 1-11.852 4.941H42.45a16.75 16.75 0 0 1-11.853-4.941 16.9 16.9 0 0 1-4.917-11.909V16.85a16.9 16.9 0 0 1 4.917-11.91A16.75 16.75 0 0 1 42.451 0M29.227 164.444a13.34 13.34 0 0 0 3.878 9.391 13.2 13.2 0 0 0 9.346 3.896h56.677a13.2 13.2 0 0 0 9.346-3.896 13.33 13.33 0 0 0 3.877-9.391V16.85a13.33 13.33 0 0 0-3.877-9.39 13.2 13.2 0 0 0-9.346-3.897H42.45a13.2 13.2 0 0 0-9.346 3.896 13.33 13.33 0 0 0-3.877 9.391z"></path><path fill="#E6E6E6" d="M42.451 179.71h56.677a15.17 15.17 0 0 0 10.738-4.476 15.32 15.32 0 0 0 4.455-10.79V16.85a15.32 15.32 0 0 0-4.455-10.79 15.17 15.17 0 0 0-10.738-4.477H42.45A15.17 15.17 0 0 0 31.713 6.06a15.32 15.32 0 0 0-4.455 10.79v147.594a15.32 15.32 0 0 0 4.455 10.79 15.18 15.18 0 0 0 10.738 4.476"></path><path fill="#fff" d="M41.05 177.335h59.478a10.24 10.24 0 0 0 7.244-3.02 10.33 10.33 0 0 0 3.004-7.278V14.253a10.33 10.33 0 0 0-3.004-7.278 10.24 10.24 0 0 0-7.244-3.02h-7.757c-.448.001-.879.18-1.197.5a1.7 1.7 0 0 0-.496 1.202 5.05 5.05 0 0 1-1.467 3.554 5 5 0 0 1-3.537 1.474H56.292a5 5 0 0 1-3.536-1.474 5.05 5.05 0 0 1-1.467-3.554c0-.45-.18-.883-.497-1.202a1.7 1.7 0 0 0-1.197-.5h-8.544a10.23 10.23 0 0 0-7.244 3.02 10.33 10.33 0 0 0-3.005 7.278v152.784a10.33 10.33 0 0 0 3.005 7.278 10.23 10.23 0 0 0 7.244 3.02"></path><path fill="#fff" d="M68.229 7.422h7.09a.786.786 0 0 0 .789-.792.794.794 0 0 0-.788-.791h-7.091a.786.786 0 0 0-.788.791.794.794 0 0 0 .788.792M63.304 7.224a.395.395 0 1 1 .002-.79.395.395 0 0 1-.002.79"></path><path fill="#E6E6E6" d="M28.887 34.882h83.883v.902H28.887zM28.887 52.924h83.883v.902H28.887zM28.887 90.212h83.883v.902H28.887zM28.887 127.499h83.883v.902H28.887zM28.887 156.668h83.883v.902H28.887z"></path><path fill="#E6E6E6" d="M51.852 35.333h.898v55.33h-.898zM93.845 90.647h.898v66.471h-.898z"></path><path fill="#E6E6E6" d="M30.803 108.88h63.49v.902h-63.49zM51.756 157.118h.898v20.216h-.898zM52.45 71.937h58.475v.902H52.451zM98.713 3.388l.828.348-13.232 31.77-.828-.348zM57.96 10.688h.898v24.645h-.898z"></path><path fill="#6899FC" d="M34.81 49.015c0 8.083 12.436 26.918 16.072 32.25a1.2 1.2 0 0 0 .985.522 1.19 1.19 0 0 0 .986-.522c3.635-5.332 16.073-24.167 16.073-32.25 0-4.546-1.798-8.906-4.997-12.12a17.02 17.02 0 0 0-12.062-5.02 17.02 17.02 0 0 0-12.062 5.02 17.18 17.18 0 0 0-4.997 12.12z"></path><path fill="#fff" d="M51.868 56.533c-4.794 0-8.68-3.905-8.68-8.72 0-4.817 3.886-8.721 8.68-8.721s8.679 3.904 8.679 8.72-3.886 8.72-8.68 8.72"></path><path fill="#E6E6E6" d="m52.436 90.922 32.868 65.984-.803.404-32.868-65.985z"></path><path fill="#6899FC" d="M51.868 94.421c-2.149 0-3.89-1.75-3.89-3.909s1.741-3.909 3.89-3.909 3.89 1.75 3.89 3.91c0 2.158-1.742 3.908-3.89 3.908"></path><path fill="#F2F2F2" d="M10.029 56.794c-.723 0-1.31-.589-1.31-1.315 0-.727.587-1.316 1.31-1.316s1.309.59 1.309 1.316-.586 1.315-1.31 1.315"></path><path fill="#6899FC" d="m17.66 66.868 4.816.188-.24 6.22-4.816-.187z"></path><path fill="#FFB9B9" d="M39.383 88.656s6.67-3.202 6.562-.437-6.722 4.584-6.722 4.584z"></path><path fill="#090814" d="M35.724 112.05s3.146 7.738 4.309 13.321c1.162 5.583 2.932 13.267.655 18.717s-8.751 21.465-8.818 23.193.554 3.484-.822 3.43-8.863-2.423-9.167-3.473 2.555-3.708 2.555-3.708l7.06-22.224-7.365-14.478-5.312 21.599-1.04 26.958s-5.106-1.584-5.847-.228c0 0-2.288-3.204-2.579-4.6-.29-1.396 1.08-27.995 1.08-27.995s-4.686-30.296-.903-30.149c3.784.148 18.603-8.966 26.194-.363"></path><path fill="#090814" d="M31.103 169.328s3.49 7.75 3.82 8.11c.331.36 2.605 3.909.886 3.842-1.72-.067-5.781-1.956-8.77-4.841-2.99-2.886-6.93-7.885-6.573-8.218.357-.332 2.805-1.275 2.805-1.275zM17.157 173.631s.21 3.469.845 4.878.555 3.484-1.165 3.416c-1.72-.067-6.165-.932-6.165-.932s-.264-2.087.094-2.419c.357-.333 1.88-4.081 1.232-5.144-.648-1.064 5.16.201 5.16.201"></path><path fill="#FFB9B9" d="M14.613 61.038s-3.667 5.741-5.096 7.07 2.592 4.255 2.592 4.255l7.196.972s-.09-6.58.28-7.257c.371-.678-4.972-5.04-4.972-5.04"></path><path fill="#6899FC" d="M20.868 68.55s-1.483 2.712-2.858 2.658c-1.376-.053-8.494-3.1-8.797-4.15s-2.357 7.523-2.357 7.523l17.414 30.792 4.247-2.95-2.058-18.079-1.69-9.757z"></path><path fill="#D6D6E3" d="M8.571 96.108c.695 1.46 1.128 2.983 1.068 4.541a4 4 0 0 1-.011.208c-.165 3.198-1.338 6.898-1.758 9.588-.306 1.93-.219 3.339.905 3.67 2.725.798-.397 1.369 10.146 4.895s12.383.482 12.41-.209c.026-.691-1.494-5.943-1.136-6.274.357-.332 5 4.348 6.402 3.71s.16-4.147.16-4.147-3.16-7.392-3.093-9.12-4.787-9.878-4.787-9.878l-3.3-21.59s-1.27-2.818-2.976-3.23c-1.707-.413-3.123.57-3.123.57l2.856 6.342 3.013 11.195-.504 4.134s-3.503-7.406-5.804-10.264c-2.302-2.86-7.208-9.627-7.208-9.627s-1.145-3.883-.281-5.044c.864-1.163-3.607-1.338-5.514 3.434-1.01 2.529-2.65 6.3-3.678 9.811-.916 3.111-1.349 6.019-.441 7.681 1.387 2.539 4.876 5.876 6.654 9.604"></path><path fill="#000" d="M1.918 86.503c1.386 2.54 4.875 5.878 6.653 9.605.464-1.681 1.031-3.421 1.031-3.421s2.173-11.684-4.255-14.703a4.3 4.3 0 0 0-2.988.838c-.916 3.111-1.349 6.02-.441 7.681" opacity=".1"></path><path fill="#D6D6E3" d="m27.438 85.767 5.45 1.597 7.567.295.779 6.606-12.437.9s-3.105-8.774-1.36-9.398"></path><path fill="#FFB9B9" d="M18.55 107.981s7.292 1.216 5.628 3.421c-1.665 2.204-8.124-.114-8.124-.114z"></path><path fill="#000" d="M9.628 100.856c-.165 3.199-1.338 6.898-1.759 9.588 2.323 2.209 4.532 4.159 5.364 4.19 1.72.067 4.485-.171 5.503.214 1.019.386 1.616-6.167 1.616-6.167s-.608-2.101-3.32-3.244c-1.83-.774-5.338-2.873-7.404-4.581" opacity=".1"></path><path fill="#D6D6E3" d="M5.427 75.91s-5.821-.92-5.507 8.785-.613 15.898 1.728 17.721c2.34 1.823 9.945 10.08 11.665 10.146s4.485-.171 5.504.215c1.018.385 1.615-6.168 1.615-6.168s-.608-2.1-3.32-3.244c-2.71-1.143-9.1-5.2-9.046-6.583.053-1.382 1.616-6.167 1.616-6.167S11.855 78.93 5.427 75.91"></path><path fill="#FFB9B9" d="M19.746 69.54c-4.183 0-7.573-3.407-7.573-7.61 0-4.202 3.39-7.609 7.573-7.609s7.573 3.407 7.573 7.61c0 4.202-3.39 7.608-7.573 7.608"></path><path fill="#090814" d="M24.845 51.024c.183.158.401.268.637.32a.454.454 0 0 0 .526-.366c.173.361.368.746.723.931.354.186.9.03.951-.367.052.301.185.583.385.815.22.21.617.263.809.027-.155.85-.06 1.725-.108 2.589-.05.863-.278 1.779-.927 2.346-.947.828-2.37.624-3.616.467a1.1 1.1 0 0 0-.567.031c-.466.2-.445.852-.451 1.361a3.8 3.8 0 0 1-.994 2.403 3.76 3.76 0 0 1-2.302 1.19 1.88 1.88 0 0 1-1.403-.345c-.353-.3-.534-.792-.94-1.018-.658-.368-1.458.169-1.94.752-.481.583-.956 1.3-1.703 1.406-.987.141-1.74-.87-2.108-1.801a10.54 10.54 0 0 1 .207-8.157c2.062-4.516 9.104-5.23 12.82-2.584"></path></g><defs><clipPath id="a"><path fill="#fff" d="M117 0H0v182h117z"></path></clipPath></defs>', 2)
   ])]);
 }
-const z1 = { render: T1 }, j1 = { class: "flex items-center justify-end self-stretch px-4" }, N1 = { class: "flex justify-center self-stretch py-14" }, Z1 = { class: "flex w-full justify-center self-stretch text-center" }, H1 = { class: "relative block max-w-full text-center body-semibold text-ellipsis text-white" }, I1 = /* @__PURE__ */ m({
+const B1 = { render: $1 }, S1 = { class: "flex items-center justify-end self-stretch px-4" }, T1 = { class: "flex justify-center self-stretch py-14" }, z1 = { class: "flex w-full justify-center self-stretch text-center" }, N1 = { class: "relative block max-w-full text-center body-semibold text-ellipsis text-white" }, E1 = /* @__PURE__ */ m({
   name: "NexxtSocialMediaType",
   __name: "SocialMediaType",
   props: {
@@ -469,18 +505,18 @@ const z1 = { render: T1 }, j1 = { class: "flex items-center justify-end self-str
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const n = t, i = {
+    const s = t, i = {
       post: "Post",
       reel: "TikTok & Reel",
       story: "Story"
-    }, u = f(() => ({
-      post: B1,
-      reel: w1,
-      story: z1
-    })[e.variant]), d = f(() => {
+    }, f = d(() => ({
+      post: w1,
+      reel: x1,
+      story: B1
+    })[e.variant]), u = d(() => {
       if (e.icons)
-        return e.icons.map((o) => o === "twitter" ? "x" : o).reduce(
-          (o, r) => (o[r] = !0, o),
+        return e.icons.map((r) => r === "twitter" ? "x" : r).reduce(
+          (r, o) => (r[o] = !0, r),
           {}
         );
       switch (e.variant) {
@@ -505,35 +541,35 @@ const z1 = { render: T1 }, j1 = { class: "flex items-center justify-end self-str
           return {};
       }
     });
-    return (v, o) => (a(), s("button", {
+    return (v, r) => (a(), l("button", {
       type: "button",
       class: c(["group inline-flex min-w-60 cursor-pointer flex-col items-start justify-start gap-2.5 overflow-hidden rounded-3xl pt-4 outline-1 -outline-offset-1 transition-colors hover:outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-cornflower-blue-600", e.selected ? "bg-gray-50 outline-cornflower-blue-500" : "bg-white outline-gray-200"]),
-      onClick: o[0] || (o[0] = (r) => n("click"))
+      onClick: r[0] || (r[0] = (o) => s("click"))
     }, [
-      l("div", j1, [
+      n("div", S1, [
         e.chip ? (a(), k(K, {
           key: 0,
           variant: "warning"
         }, {
-          default: y(() => [
+          default: x(() => [
             M(g(e.chip), 1)
           ]),
           _: 1
         })) : b("", !0),
-        p(c1, I({ class: "ml-auto" }, d.value, { "aria-hidden": "true" }), null, 16)
+        p(i1, I({ class: "ml-auto" }, u.value, { "aria-hidden": "true" }), null, 16)
       ]),
-      l("div", N1, [
-        (a(), k(V(u.value), {
+      n("div", T1, [
+        (a(), k(V(f.value), {
           class: "h-44 object-contain transition-transform group-hover:-translate-y-0.5",
           "aria-hidden": "true"
         }))
       ]),
-      l("div", {
+      n("div", {
         class: c(["inline-flex w-full flex-col items-center justify-center gap-2.5 bg-cornflower-blue-500 py-3.5 transition-colors group-hover:bg-cornflower-blue-600", e.selected ? "bg-cornflower-blue-600" : "bg-cornflower-blue-500"])
       }, [
-        l("div", Z1, [
-          l("span", H1, [
-            e.selected ? (a(), k(x, {
+        n("div", z1, [
+          n("span", N1, [
+            e.selected ? (a(), k(y, {
               key: 0,
               name: "check",
               type: "solid",
@@ -546,7 +582,7 @@ const z1 = { render: T1 }, j1 = { class: "flex items-center justify-end self-str
       ], 2)
     ], 2));
   }
-}), V1 = /* @__PURE__ */ m({
+}), C1 = /* @__PURE__ */ m({
   name: "NexxtStepperHeader",
   __name: "StepperHeader",
   props: {
@@ -558,27 +594,27 @@ const z1 = { render: T1 }, j1 = { class: "flex items-center justify-end self-str
   },
   emits: ["update:currentStep"],
   setup(e) {
-    return (t, n) => (a(), k(X, {
+    return (t, s) => (a(), k(X, {
       title: e.title,
       "back-button-action": e.backButtonAction,
       "back-button-text": e.backButtonText
     }, A({ _: 2 }, [
       e.steps ? {
         name: "center",
-        fn: y(() => [
-          p(i1, {
+        fn: x(() => [
+          p(l1, {
             class: "w-full",
             steps: e.steps.length,
             "step-titles": e.steps,
             "current-step": e.currentStep,
-            "onUpdate:currentStep": n[0] || (n[0] = (i) => t.$emit("update:currentStep", i))
+            "onUpdate:currentStep": s[0] || (s[0] = (i) => t.$emit("update:currentStep", i))
           }, null, 8, ["steps", "step-titles", "current-step"])
         ]),
         key: "0"
       } : void 0,
       t.$slots.default ? {
         name: "right",
-        fn: y(() => [
+        fn: x(() => [
           w(t.$slots, "default")
         ]),
         key: "1"
@@ -591,11 +627,11 @@ export {
   D as NexxtButton,
   K as NexxtChip,
   X as NexxtHeader,
-  x as NexxtIcon,
-  C1 as NexxtInfoBlock,
-  i1 as NexxtProgressBar,
-  c1 as NexxtSocialIcons,
-  F1 as NexxtSocialMediaTemplate,
-  I1 as NexxtSocialMediaType,
-  V1 as NexxtStepperHeader
+  y as NexxtIcon,
+  Z1 as NexxtInfoBlock,
+  l1 as NexxtProgressBar,
+  i1 as NexxtSocialIcons,
+  H1 as NexxtSocialMediaTemplate,
+  E1 as NexxtSocialMediaType,
+  C1 as NexxtStepperHeader
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -23,11 +23,11 @@
   "devDependencies": {
     "@awesome.me/kit-37b149f3ef": "^1.0.4",
     "@eslint/js": "^9.39.2",
-    "@storybook/addon-a11y": "^10.2.8",
-    "@storybook/addon-docs": "^10.2.8",
-    "@storybook/addon-vitest": "^10.2.8",
-    "@storybook/builder-vite": "^10.2.8",
-    "@storybook/vue3-vite": "^10.2.8",
+    "@storybook/addon-a11y": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/builder-vite": "^10.2.13",
+    "@storybook/vue3-vite": "^10.2.13",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.8",
@@ -41,7 +41,7 @@
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "10.2.8",
+    "eslint-plugin-storybook": "10.2.13",
     "eslint-plugin-vue": "^10.6.2",
     "globals": "^17.0.0",
     "jsdom": "^27.4.0",
@@ -50,7 +50,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.2.8",
+    "storybook": "^10.2.13",
     "typescript-eslint": "^8.52.0",
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4",