@fiscozen/checkbox 1.0.0 → 1.1.0

package/dist/checkbox.js

@@ -1,56 +1,56 @@
-import { ref as E, reactive as ge, onUnmounted as ne, nextTick as we, onMounted as ee, computed as s, defineComponent as A, useSlots as te, toRef as ue, toRefs as ke, watch as F, onBeforeUnmount as Ce, createElementBlock as S, openBlock as v, renderSlot as $, createElementVNode as T, withDirectives as J, createCommentVNode as z, createBlock as O, unref as m, normalizeClass as g, vShow as ce, Teleport as ze, createTextVNode as M, toDisplayString as P, createVNode as W, mergeProps as oe, resolveDynamicComponent as $e, withCtx as R, resolveComponent as Be, resolveDirective as Se, withModifiers as Oe, mergeModels as Z, useModel as le, shallowRef as Ie, vModelCheckbox as Ee, Fragment as re, createSlots as Re, renderList as ve } from "vue";
-import { FzIcon as U } from "@fiscozen/icons";
-function me(e) {
-  const t = Date.now() - 16e11, a = Math.random().toString(36).slice(2, 7);
-  return `${e}-${t}-${a}`;
+import { ref as R, reactive as Ce, onUnmounted as le, nextTick as ke, onMounted as ee, computed as i, defineComponent as N, useSlots as te, toRef as ce, toRefs as ze, watch as A, onBeforeUnmount as $e, createElementBlock as z, openBlock as p, renderSlot as $, createElementVNode as E, withDirectives as Z, createCommentVNode as C, createBlock as I, unref as b, normalizeClass as y, vShow as de, Teleport as Se, createTextVNode as q, toDisplayString as M, createVNode as H, mergeProps as oe, resolveDynamicComponent as Be, withCtx as F, resolveComponent as Ee, resolveDirective as Ie, withModifiers as Oe, mergeModels as X, useModel as ae, shallowRef as Re, vModelCheckbox as Fe, Fragment as re, createSlots as Ae, renderList as me, provide as Ne, inject as Te } from "vue";
+import { FzIcon as P } from "@fiscozen/icons";
+function be(e) {
+  const t = Date.now() - 16e11, o = Math.random().toString(36).slice(2, 7);
+  return `${e}-${t}-${o}`;
 }
-function be() {
-  return me("fz-checkbox");
+function ie() {
+  return be("fz-checkbox");
 }
-function Fe() {
-  return me("fz-checkbox-group");
+function Le() {
+  return be("fz-checkbox-group");
 }
-const G = new DOMRect(0, 0, window.innerWidth, window.innerHeight), q = (e, t, a, o, i) => {
-  let l = i ? "bottom" : "right", c = i ? "bottom-start" : "right-start";
+const G = new DOMRect(0, 0, window.innerWidth, window.innerHeight), U = (e, t, o, a, r) => {
+  let l = r ? "bottom" : "right", u = r ? "bottom-start" : "right-start";
   G.width = window.innerWidth, G.height = window.innerHeight, G.x = 0, G.y = 0;
-  const p = e ? e.getBoundingClientRect() : G, w = t.getBoundingClientRect(), y = a.getBoundingClientRect(), d = (y.left - p.left - w.width) / p.width, r = (p.right - y.right - w.width) / p.width, u = (y.top - p.top - w.height) / p.height, f = (p.bottom - y.bottom - w.height) / p.height;
+  const f = e ? e.getBoundingClientRect() : G, g = t.getBoundingClientRect(), x = o.getBoundingClientRect(), m = (x.left - f.left - g.width) / f.width, s = (f.right - x.right - g.width) / f.width, d = (x.top - f.top - g.height) / f.height, c = (f.bottom - x.bottom - g.height) / f.height;
   let n = [
     {
       key: "right",
-      space: r
+      space: s
     },
     {
       key: "top",
-      space: u
+      space: d
     },
     {
       key: "bottom",
-      space: f
+      space: c
     },
     {
       key: "left",
-      space: d
+      space: m
     }
-  ].sort((b, h) => h.space - b.space);
-  if (i && (n = n.filter((b) => b.key === "top" || b.key === "bottom")), l = n[0].key, !o) {
-    const b = (w.height - y.height) / 2;
+  ].sort((v, h) => h.space - v.space);
+  if (r && (n = n.filter((v) => v.key === "top" || v.key === "bottom")), l = n[0].key, !a) {
+    const v = (g.height - x.height) / 2;
     switch (l) {
       case "right":
       case "left":
-        p.top > y.top - b && (o = "end"), p.bottom < y.top - b && (o = "start");
+        f.top > x.top - v && (a = "end"), f.bottom < x.top - v && (a = "start");
         break;
     }
   }
-  return c = o ? `${l}-${o}` : l, c;
-}, Te = (e, t, a, o) => ({
-  x: t.x + e.width * a / 100,
-  y: t.y + e.height * o / 100
-}), ae = (e) => typeof e == "string" ? document.querySelector(e) : e, Ne = (e) => ({
+  return u = a ? `${l}-${a}` : l, u;
+}, Ve = (e, t, o, a) => ({
+  x: t.x + e.width * o / 100,
+  y: t.y + e.height * a / 100
+}), ne = (e) => typeof e == "string" ? document.querySelector(e) : e, De = (e) => ({
   left: parseFloat(e.marginLeft),
   right: parseFloat(e.marginRight),
   top: parseFloat(e.marginTop),
   bottom: parseFloat(e.marginBottom)
-}), Ae = {
+}), Me = {
   // Bottom positions - content below opener
   bottom: (e, t) => ({
     position: {
@@ -139,10 +139,10 @@ const G = new DOMRect(0, 0, window.innerWidth, window.innerHeight), q = (e, t, a
     },
     transform: { x: 0, y: -100 }
   })
-}, Le = (e, t, a) => {
-  const o = Ae[e];
-  return o ? o(t, a) : { position: { x: 0, y: 0 }, transform: { x: 0, y: 0 } };
-}, Ve = {
+}, Pe = (e, t, o) => {
+  const a = Me[e];
+  return a ? a(t, o) : { position: { x: 0, y: 0 }, transform: { x: 0, y: 0 } };
+}, qe = {
   bottom: (e, t) => ({
     position: {
       x: e.left + e.width / 2,
@@ -227,119 +227,119 @@ const G = new DOMRect(0, 0, window.innerWidth, window.innerHeight), q = (e, t, a
     },
     transform: { x: 0, y: 0 }
   })
-}, De = (e, t, a) => {
-  const o = Ve[e];
-  return o ? o(t, a) : { position: { x: 0, y: 0 }, transform: { x: 0, y: 0 } };
-}, Me = (e, t, a, o) => {
-  const i = { ...e }, l = { ...o };
-  if (e.x < a.left && (i.x = a.left, l.x = 0), e.x + t.width > a.right) {
-    const c = a.right - t.width;
-    c > 0 && (i.x = c), l.x = 0;
+}, He = (e, t, o) => {
+  const a = qe[e];
+  return a ? a(t, o) : { position: { x: 0, y: 0 }, transform: { x: 0, y: 0 } };
+}, je = (e, t, o, a) => {
+  const r = { ...e }, l = { ...a };
+  if (e.x < o.left && (r.x = o.left, l.x = 0), e.x + t.width > o.right) {
+    const u = o.right - t.width;
+    u > 0 && (r.x = u), l.x = 0;
   }
-  if (e.y < a.top && (i.y = a.top, l.y = 0), e.y + t.height > a.bottom) {
-    const c = a.bottom - t.height;
-    c > 0 && (i.y = c), l.y = 0;
+  if (e.y < o.top && (r.y = o.top, l.y = 0), e.y + t.height > o.bottom) {
+    const u = o.bottom - t.height;
+    u > 0 && (r.y = u), l.y = 0;
   }
-  return { position: i, transform: l };
-}, Pe = (e, t, a, o, i) => {
-  const l = i ? null : t;
+  return { position: r, transform: l };
+}, Ue = (e, t, o, a, r) => {
+  const l = r ? null : t;
   switch (e) {
     case "auto":
-      return q(l, a, o);
+      return U(l, o, a);
     case "auto-vertical":
-      return q(l, a, o, void 0, !0);
+      return U(l, o, a, void 0, !0);
     case "auto-start":
-      return q(l, a, o, "start");
+      return U(l, o, a, "start");
     case "auto-vertical-start":
-      return q(l, a, o, "start", !0);
+      return U(l, o, a, "start", !0);
     case "auto-end":
-      return q(l, a, o, "end");
+      return U(l, o, a, "end");
     case "auto-vertical-end":
-      return q(l, a, o, "end", !0);
+      return U(l, o, a, "end", !0);
     default:
       return "bottom-start";
   }
-}, He = (e) => e.startsWith("auto"), qe = (e) => {
-  const t = E("auto"), a = E(), o = E(), i = E(), l = E(), c = ge({ position: { x: 0, y: 0 } }), p = {
+}, We = (e) => e.startsWith("auto"), Ke = (e) => {
+  const t = R("auto"), o = R(), a = R(), r = R(), l = R(), u = Ce({ position: { x: 0, y: 0 } }), f = {
     root: null,
     rootMargin: "0px",
     threshold: 1,
     ...e.element.value.intersectionOptions
-  }, w = E(new IntersectionObserver(() => {
-  }, p)), y = () => {
-    var b, h;
-    const u = ae(e.element.value.domRef.value);
-    if (!u)
+  }, g = R(new IntersectionObserver(() => {
+  }, f)), x = () => {
+    var v, h;
+    const d = ne(e.element.value.domRef.value);
+    if (!d)
       return null;
-    const f = (b = e.container) != null && b.value ? ae(e.container.value.domRef.value) ?? document.body : document.body, n = (h = e.opener) != null && h.value ? ae(e.opener.value.domRef.value) : null;
-    return { element: u, container: f, opener: n };
-  }, d = (u) => {
-    var f;
+    const c = (v = e.container) != null && v.value ? ne(e.container.value.domRef.value) ?? document.body : document.body, n = (h = e.opener) != null && h.value ? ne(e.opener.value.domRef.value) : null;
+    return { element: d, container: c, opener: n };
+  }, m = (d) => {
+    var c;
     return {
-      element: u.element.getBoundingClientRect(),
-      container: u.container.getBoundingClientRect(),
-      opener: ((f = u.opener) == null ? void 0 : f.getBoundingClientRect()) ?? null
+      element: d.element.getBoundingClientRect(),
+      container: d.container.getBoundingClientRect(),
+      opener: ((c = d.opener) == null ? void 0 : c.getBoundingClientRect()) ?? null
     };
-  }, r = (u = !1) => we(() => {
-    var I, V, N;
-    a.value = ((I = e.position) == null ? void 0 : I.value) ?? "auto";
-    const f = y();
-    if (!f) return;
-    Object.assign(f.element.style, {
+  }, s = (d = !1) => ke(() => {
+    var O, V, T;
+    o.value = ((O = e.position) == null ? void 0 : O.value) ?? "auto";
+    const c = x();
+    if (!c) return;
+    Object.assign(c.element.style, {
       position: "fixed",
       top: "0px",
       left: "0px"
     });
-    const n = d(f);
-    o.value = n.element, i.value = n.opener ?? void 0, l.value = n.container, w.value.observe(f.element), w.value.observe(f.container), He(a.value) && f.opener && (a.value = Pe(
-      a.value,
-      f.container,
-      f.element,
-      f.opener,
+    const n = m(c);
+    a.value = n.element, r.value = n.opener ?? void 0, l.value = n.container, g.value.observe(c.element), g.value.observe(c.container), We(o.value) && c.opener && (o.value = Ue(
+      o.value,
+      c.container,
+      c.element,
+      c.opener,
       ((V = e.useViewport) == null ? void 0 : V.value) ?? !1
     ));
-    const b = Ne(window.getComputedStyle(f.element)), h = f.opener && n.opener ? Le(a.value, n.opener, b) : De(a.value, n.container, n.element), k = Te(
+    const v = De(window.getComputedStyle(c.element)), h = c.opener && n.opener ? Pe(o.value, n.opener, v) : He(o.value, n.container, n.element), k = Ve(
       n.element,
       h.position,
       h.transform.x,
       h.transform.y
-    ), B = Me(
+    ), B = je(
       k,
       n.element,
       n.container,
       h.transform
     );
-    c.position.x = B.position.x, c.position.y = B.position.y, Object.assign(f.element.style, {
-      top: `${c.position.y}px`,
-      left: `${c.position.x}px`,
+    u.position.x = B.position.x, u.position.y = B.position.y, Object.assign(c.element.style, {
+      top: `${u.position.y}px`,
+      left: `${u.position.x}px`,
       position: "fixed",
       display: "flex"
-    }), o.value = f.element.getBoundingClientRect(), (N = e.callback) != null && N.value && !u && e.callback.value(o, i, l, t, a);
+    }), a.value = c.element.getBoundingClientRect(), (T = e.callback) != null && T.value && !d && e.callback.value(a, r, l, t, o);
   });
-  return ne(() => {
-    w.value.disconnect();
+  return le(() => {
+    g.value.disconnect();
   }), {
-    float: c,
-    rect: o,
-    setPosition: r,
+    float: u,
+    rect: a,
+    setPosition: s,
     position: t,
-    actualPosition: a,
-    openerRect: i,
+    actualPosition: o,
+    openerRect: r,
     containerRect: l
   };
 };
-function We(e) {
-  const t = window.matchMedia(e), a = E(t.matches);
-  function o(i) {
-    a.value = i.matches;
+function Ge(e) {
+  const t = window.matchMedia(e), o = R(t.matches);
+  function a(r) {
+    o.value = r.matches;
   }
   return ee(() => {
-    t.addEventListener("change", o);
-  }), ne(() => {
-    t.removeEventListener("change", o);
-  }), s(() => a.value);
+    t.addEventListener("change", a);
+  }), le(() => {
+    t.removeEventListener("change", a);
+  }), i(() => o.value);
 }
-const je = {
+const Xe = {
   blue: {
     50: {
       value: "#eff1ff",
@@ -1172,9 +1172,9 @@ const je = {
       type: "lineHeights"
     }
   }
-}, ie = {
-  global: je
-}, Ue = [
+}, se = {
+  global: Xe
+}, Ye = [
   "blue",
   "purple",
   "orange",
@@ -1182,40 +1182,40 @@ const je = {
   "yellow",
   "grey",
   "core"
-], Ge = {
-  safeColorNames: Ue
-}, Ke = [
+], Qe = {
+  safeColorNames: Ye
+}, Je = [
   "error",
   "warning",
   "success",
   "info"
-], Xe = {
-  semanticColorNames: Ke
-}, Qe = Ge.safeColorNames, Ye = Xe.semanticColorNames, j = {};
-Qe.forEach((e) => {
-  const t = ie.global[e];
-  t && Object.keys(t).forEach((a) => {
-    var i;
-    const o = (i = t[a]) == null ? void 0 : i.value;
-    o && (j[e] || (j[e] = {}), j[e][a] = o);
+], Ze = {
+  semanticColorNames: Je
+}, _e = Qe.safeColorNames, et = Ze.semanticColorNames, W = {};
+_e.forEach((e) => {
+  const t = se.global[e];
+  t && Object.keys(t).forEach((o) => {
+    var r;
+    const a = (r = t[o]) == null ? void 0 : r.value;
+    a && (W[e] || (W[e] = {}), W[e][o] = a);
   });
 });
-const de = ie.global.semantic;
-de && Ye.forEach((e) => {
-  const t = de[e];
-  t && typeof t == "object" && Object.keys(t).forEach((a) => {
-    var i;
-    const o = (i = t[a]) == null ? void 0 : i.value;
-    if (o) {
+const fe = se.global.semantic;
+fe && et.forEach((e) => {
+  const t = fe[e];
+  t && typeof t == "object" && Object.keys(t).forEach((o) => {
+    var r;
+    const a = (r = t[o]) == null ? void 0 : r.value;
+    if (a) {
       const l = `semantic-${e}`;
-      j[l] || (j[l] = {}), j[l][a] = o;
+      W[l] || (W[l] = {}), W[l][o] = a;
     }
   });
 });
-const Je = Object.entries(ie.global.breakpoint).reduce(
-  (e, [t, a]) => (e[t] = a.value, e),
+const tt = Object.entries(se.global.breakpoint).reduce(
+  (e, [t, o]) => (e[t] = o.value, e),
   {}
-), Ze = /* @__PURE__ */ A({
+), ot = /* @__PURE__ */ N({
   __name: "FzFloating",
   props: {
     isOpen: { type: Boolean, default: !1 },
@@ -1229,127 +1229,127 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
     useViewport: { type: Boolean }
   },
   emits: ["fzfloating:setPosition"],
-  setup(e, { expose: t, emit: a }) {
-    const o = e, i = a, l = E(null), c = E(null), p = te(), w = We(`(max-width: ${Je.xs})`);
-    let y = !1, d = !1, r = null, u = null;
-    const f = {
-      position: o.position,
+  setup(e, { expose: t, emit: o }) {
+    const a = e, r = o, l = R(null), u = R(null), f = te(), g = Ge(`(max-width: ${tt.xs})`);
+    let x = !1, m = !1, s = null, d = null;
+    const c = {
+      position: a.position,
       element: {
         // @ts-ignore
         domRef: l
       },
       container: {
         // @ts-ignore
-        domRef: ue(o.container || document.body)
+        domRef: ce(a.container || document.body)
       },
       opener: {
-        domRef: ue(null)
+        domRef: ce(null)
       },
-      useViewport: o.useViewport,
-      callback(...x) {
-        i("fzfloating:setPosition", ...x);
+      useViewport: a.useViewport,
+      callback(...w) {
+        r("fzfloating:setPosition", ...w);
       }
-    }, n = ke(f);
-    p.opener && (f.opener = {
+    }, n = ze(c);
+    f.opener && (c.opener = {
       // @ts-ignore
-      domRef: c
+      domRef: u
     });
-    const b = qe(n), h = () => {
-      y || !d || (y = !0, requestAnimationFrame(() => {
-        d && o.isOpen && b.setPosition(), y = !1;
+    const v = Ke(n), h = () => {
+      x || !m || (x = !0, requestAnimationFrame(() => {
+        m && a.isOpen && v.setPosition(), x = !1;
       }));
     };
     ee(() => {
-      d = !0;
+      m = !0;
     });
     const k = () => {
       h();
     }, B = () => {
       h();
-    }, I = () => {
-      window.addEventListener("scroll", k, !0), window.addEventListener("resize", B), l.value && !r && (r = new ResizeObserver(() => {
+    }, O = () => {
+      window.addEventListener("scroll", k, !0), window.addEventListener("resize", B), l.value && !s && (s = new ResizeObserver(() => {
         h();
-      }), r.observe(l.value)), c.value && !u && (u = new ResizeObserver(() => {
+      }), s.observe(l.value)), u.value && !d && (d = new ResizeObserver(() => {
         h();
-      }), u.observe(c.value));
+      }), d.observe(u.value));
     }, V = () => {
-      window.removeEventListener("scroll", k, !0), window.removeEventListener("resize", B), r && (r.disconnect(), r = null), u && (u.disconnect(), u = null);
+      window.removeEventListener("scroll", k, !0), window.removeEventListener("resize", B), s && (s.disconnect(), s = null), d && (d.disconnect(), d = null);
     };
-    F(
-      () => o.position,
+    A(
+      () => a.position,
       () => h()
-    ), F(
-      () => o.isOpen,
-      (x) => {
+    ), A(
+      () => a.isOpen,
+      (w) => {
         var Q;
-        if (!x || !l.value || !d) {
+        if (!w || !l.value || !m) {
           V();
           return;
         }
-        I();
-        const D = (Q = c.value) == null ? void 0 : Q.getBoundingClientRect();
-        l.value.style.position = "fixed", l.value.style.top = "0px", l.value.style.left = "0px", l.value.style.transform = "none", l.value.style.width = w.value ? (D == null ? void 0 : D.width) + "px" : "auto", b.setPosition();
+        O();
+        const D = (Q = u.value) == null ? void 0 : Q.getBoundingClientRect();
+        l.value.style.position = "fixed", l.value.style.top = "0px", l.value.style.left = "0px", l.value.style.transform = "none", l.value.style.width = g.value ? (D == null ? void 0 : D.width) + "px" : "auto", v.setPosition();
       }
-    ), F(
-      () => o.overrideOpener,
-      (x) => {
-        x && n.opener && n.opener.value && (n.opener.value = {
-          domRef: x
+    ), A(
+      () => a.overrideOpener,
+      (w) => {
+        w && n.opener && n.opener.value && (n.opener.value = {
+          domRef: w
         });
       }
-    ), Ce(() => {
-      d = !1, V();
+    ), $e(() => {
+      m = !1, V();
     });
-    const N = (x) => x.startsWith("bottom") ? "mt-4" : x.startsWith("top") ? "mb-4" : x.startsWith("left") ? "mr-4" : x.startsWith("right") ? "ml-4" : "mt-4", X = s(() => {
+    const T = (w) => w.startsWith("bottom") ? "mt-4" : w.startsWith("top") ? "mb-4" : w.startsWith("left") ? "mr-4" : w.startsWith("right") ? "ml-4" : "mt-4", Y = i(() => {
       var D;
-      const x = ((D = b.actualPosition) == null ? void 0 : D.value) ?? o.position;
-      return N(x);
-    }), H = s(() => o.overrideContentClass ? o.contentClass : ["bg-core-white fixed", X.value, o.contentClass]);
+      const w = ((D = v.actualPosition) == null ? void 0 : D.value) ?? a.position;
+      return T(w);
+    }), j = i(() => a.overrideContentClass ? a.contentClass : ["bg-core-white fixed", Y.value, a.contentClass]);
     return t({
-      setPosition: b.setPosition
-    }), (x, D) => (v(), S("div", null, [
-      $(x.$slots, "opener-start"),
-      T("div", {
+      setPosition: v.setPosition
+    }), (w, D) => (p(), z("div", null, [
+      $(w.$slots, "opener-start"),
+      E("div", {
         ref_key: "opener",
-        ref: c,
+        ref: u,
         class: "inline-flex w-full sm:w-auto"
       }, [
-        $(x.$slots, "opener", {
+        $(w.$slots, "opener", {
           isOpen: e.isOpen,
-          floating: m(b)
+          floating: b(v)
         })
       ], 512),
-      $(x.$slots, "opener-end"),
-      e.teleport ? z("", !0) : J((v(), S("div", {
+      $(w.$slots, "opener-end"),
+      e.teleport ? C("", !0) : Z((p(), z("div", {
         key: 0,
         ref_key: "content",
         ref: l,
-        class: g(["fz__floating__content w-full sm:w-auto", H.value])
+        class: y(["fz__floating__content w-full sm:w-auto", j.value])
       }, [
-        $(x.$slots, "default", {
+        $(w.$slots, "default", {
           isOpen: e.isOpen,
-          floating: m(b)
+          floating: b(v)
         })
       ], 2)), [
-        [ce, x.$slots.default && (!x.$slots.opener || x.$slots.opener && e.isOpen)]
+        [de, w.$slots.default && (!w.$slots.opener || w.$slots.opener && e.isOpen)]
       ]),
-      e.teleport ? (v(), O(ze, {
+      e.teleport ? (p(), I(Se, {
         key: 1,
         to: "body"
       }, [
-        J(T("div", {
+        Z(E("div", {
           ref_key: "content",
           ref: l,
-          class: g(["fz__floating__content", H.value])
+          class: y(["fz__floating__content", j.value])
         }, [
-          $(x.$slots, "default", {
+          $(w.$slots, "default", {
             isOpen: e.isOpen,
-            floating: m(b)
+            floating: b(v)
           })
         ], 2), [
-          [ce, x.$slots.default && (!x.$slots.opener || x.$slots.opener && e.isOpen)]
+          [de, w.$slots.default && (!w.$slots.opener || w.$slots.opener && e.isOpen)]
         ])
-      ])) : z("", !0)
+      ])) : C("", !0)
     ]));
   }
 }), _ = {
@@ -1357,7 +1357,7 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
   sm: "backoffice",
   md: "backoffice",
   lg: "frontoffice"
-}, _e = ["disabled", "aria-disabled"], se = /* @__PURE__ */ A({
+}, at = ["disabled", "aria-disabled"], ue = /* @__PURE__ */ N({
   __name: "FzButton",
   props: {
     label: {},
@@ -1373,32 +1373,32 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
     overrideContainerClass: { type: Boolean }
   },
   setup(e) {
-    const t = e, a = te();
-    F(() => t.tooltip, (r) => {
-      r && console.warn(
+    const t = e, o = te();
+    A(() => t.tooltip, (s) => {
+      s && console.warn(
         '[FzButton] The "tooltip" prop is deprecated and will be removed in a future version. Please use the FzTooltip component to wrap your button instead.'
       );
-    }, { immediate: !0 }), F(() => t.size, (r) => {
-      if (r !== void 0) {
-        const u = _[r];
-        t.environment && t.environment !== u ? console.warn(
-          `[FzButton] Both "size" and "environment" props are provided. "environment=${t.environment}" will be used and "size=${r}" will be ignored. Please remove the deprecated "size" prop.`
+    }, { immediate: !0 }), A(() => t.size, (s) => {
+      if (s !== void 0) {
+        const d = _[s];
+        t.environment && t.environment !== d ? console.warn(
+          `[FzButton] Both "size" and "environment" props are provided. "environment=${t.environment}" will be used and "size=${s}" will be ignored. Please remove the deprecated "size" prop.`
         ) : console.warn(
-          `[FzButton] The "size" prop is deprecated and will be removed in a future version. Please use environment="${u}" instead of size="${r}".`
+          `[FzButton] The "size" prop is deprecated and will be removed in a future version. Please use environment="${d}" instead of size="${s}".`
         );
       }
     }, { immediate: !0 });
-    const o = s(() => !t.disabled), i = s(() => {
+    const a = i(() => !t.disabled), r = i(() => {
       switch (t.variant) {
         case "secondary":
           return {
             "bg-core-white": !0,
             "text-grey-500": !0,
             "!border-grey-200": !0,
-            "hover:bg-grey-100": o.value,
-            "hover:!border-grey-200": o.value,
-            "focus:bg-core-white": o.value,
-            "focus:!border-blue-600": o.value,
+            "hover:bg-grey-100": a.value,
+            "hover:!border-grey-200": a.value,
+            "focus:bg-core-white": a.value,
+            "focus:!border-blue-600": a.value,
             "disabled:bg-grey-50": !0,
             "disabled:text-grey-200": !0,
             "disabled:!border-grey-200": !0
@@ -1408,10 +1408,10 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
             "bg-transparent": !0,
             "text-grey-500": !0,
             "!border-transparent": !0,
-            "hover:bg-grey-100": o.value,
-            "hover:!border-grey-100": o.value,
-            "focus:bg-transparent": o.value,
-            "focus:!border-blue-600": o.value,
+            "hover:bg-grey-100": a.value,
+            "hover:!border-grey-100": a.value,
+            "focus:bg-transparent": a.value,
+            "focus:!border-blue-600": a.value,
             "disabled:bg-grey-50": !0,
             "disabled:text-grey-200": !0,
             "disabled:!border-grey-200": !0
@@ -1420,18 +1420,18 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
           return {
             "bg-semantic-error-200": !0,
             "text-core-white": !0,
-            "hover:bg-semantic-error-300": o.value,
-            "focus:bg-semantic-error-200": o.value,
-            "focus:!border-semantic-error-300": o.value,
+            "hover:bg-semantic-error-300": a.value,
+            "focus:bg-semantic-error-200": a.value,
+            "focus:!border-semantic-error-300": a.value,
             "disabled:bg-semantic-error-100": !0
           };
         case "success":
           return {
             "bg-semantic-success-200": !0,
             "text-core-white": !0,
-            "hover:bg-semantic-success-300": o.value,
-            "focus:bg-semantic-success-200": o.value,
-            "focus:!border-semantic-success-300": o.value,
+            "hover:bg-semantic-success-300": a.value,
+            "focus:bg-semantic-success-200": a.value,
+            "focus:!border-semantic-success-300": a.value,
             "disabled:bg-semantic-success-100": !0
           };
         case "primary":
@@ -1439,16 +1439,16 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
           return {
             "bg-blue-500": !0,
             "text-core-white": !0,
-            "hover:bg-blue-600": o.value,
-            "focus:bg-blue-500": o.value,
-            "focus:!border-blue-600": o.value,
+            "hover:bg-blue-600": a.value,
+            "focus:bg-blue-500": a.value,
+            "focus:!border-blue-600": a.value,
             "disabled:bg-blue-200": !0
           };
       }
-    }), l = s(() => t.environment ? t.environment : t.size ? _[t.size] : "frontoffice"), c = s(() => {
-      const r = !!(t.label || a.default), u = !!t.iconName, f = t.overrideContainerClass && u;
-      return r && u || f;
-    }), p = [
+    }), l = i(() => t.environment ? t.environment : t.size ? _[t.size] : "frontoffice"), u = i(() => {
+      const s = !!(t.label || o.default), d = !!t.iconName, c = t.overrideContainerClass && d;
+      return s && d || c;
+    }), f = [
       "relative",
       "rounded",
       "flex",
@@ -1461,62 +1461,62 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
       "border-1",
       "border-transparent",
       "gap-8"
-    ], w = ["flex", "items-center", "justify-items-center"], y = s(() => {
-      const r = l.value;
+    ], g = ["flex", "items-center", "justify-items-center"], x = i(() => {
+      const s = l.value;
       return {
         // Height classes (explicit for PurgeCSS detection)
-        "h-32": r === "backoffice",
-        "h-44": r === "frontoffice",
+        "h-32": s === "backoffice",
+        "h-44": s === "frontoffice",
         // Padding classes (same for both environments)
         "px-12": !0,
         // Min-width classes (same for both environments)
         "min-w-96": !0,
-        ...i.value
+        ...r.value
       };
-    }), d = s(() => t.overrideContainerClass ? t.containerClass : ["truncate", "font-normal", "!text-[16px]", "!leading-[20px]", t.containerClass]);
-    return (r, u) => (v(), S("button", {
+    }), m = i(() => t.overrideContainerClass ? t.containerClass : ["truncate", "font-normal", "!text-[16px]", "!leading-[20px]", t.containerClass]);
+    return (s, d) => (p(), z("button", {
       type: "button",
       disabled: e.disabled,
       "aria-disabled": e.disabled ? "true" : "false",
-      class: g([p, y.value])
+      class: y([f, x.value])
     }, [
-      m(a).before || c.value && e.iconPosition === "before" ? (v(), S("div", {
+      b(o).before || u.value && e.iconPosition === "before" ? (p(), z("div", {
         key: 0,
-        class: g(w)
+        class: y(g)
       }, [
-        $(r.$slots, "before", {}, () => [
-          e.iconName ? (v(), O(m(U), {
+        $(s.$slots, "before", {}, () => [
+          e.iconName ? (p(), I(b(P), {
             key: 0,
             name: e.iconName,
             size: "md",
             variant: e.iconVariant
-          }, null, 8, ["name", "variant"])) : z("", !0)
+          }, null, 8, ["name", "variant"])) : C("", !0)
         ])
-      ])) : z("", !0),
-      e.label || m(a).default ? (v(), S("div", {
+      ])) : C("", !0),
+      e.label || b(o).default ? (p(), z("div", {
         key: 1,
-        class: g(d.value)
+        class: y(m.value)
       }, [
-        $(r.$slots, "default", {}, () => [
-          M(P(e.label), 1)
+        $(s.$slots, "default", {}, () => [
+          q(M(e.label), 1)
         ])
-      ], 2)) : z("", !0),
-      m(a).after || c.value && e.iconPosition === "after" ? (v(), S("div", {
+      ], 2)) : C("", !0),
+      b(o).after || u.value && e.iconPosition === "after" ? (p(), z("div", {
         key: 2,
-        class: g(w)
+        class: y(g)
       }, [
-        $(r.$slots, "after", {}, () => [
-          e.iconName ? (v(), O(m(U), {
+        $(s.$slots, "after", {}, () => [
+          e.iconName ? (p(), I(b(P), {
             key: 0,
             name: e.iconName,
             size: "md",
             variant: e.iconVariant
-          }, null, 8, ["name", "variant"])) : z("", !0)
+          }, null, 8, ["name", "variant"])) : C("", !0)
         ])
-      ])) : z("", !0)
-    ], 10, _e));
+      ])) : C("", !0)
+    ], 10, at));
   }
-}), et = /* @__PURE__ */ A({
+}), nt = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "FzIconButton",
   props: {
@@ -1533,28 +1533,28 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
   },
   setup(e) {
     const t = e;
-    F(() => t.tooltip, (l) => {
+    A(() => t.tooltip, (l) => {
       l && console.warn(
         '[FzIconButton] The "tooltip" prop is deprecated and will be removed in a future version. Please use the FzTooltip component to wrap your button instead.'
       );
-    }, { immediate: !0 }), F(() => t.size, (l) => {
+    }, { immediate: !0 }), A(() => t.size, (l) => {
       if (l !== void 0) {
-        const c = _[l];
-        t.environment && t.environment !== c ? console.warn(
+        const u = _[l];
+        t.environment && t.environment !== u ? console.warn(
           `[FzIconButton] Both "size" and "environment" props are provided. "environment=${t.environment}" will be used and "size=${l}" will be ignored. Please remove the deprecated "size" prop.`
         ) : console.warn(
-          `[FzIconButton] The "size" prop is deprecated and will be removed in a future version. Please use environment="${c}" instead of size="${l}".`
+          `[FzIconButton] The "size" prop is deprecated and will be removed in a future version. Please use environment="${u}" instead of size="${l}".`
         );
       }
-    }, { immediate: !0 }), F(() => t.iconSize, (l) => {
+    }, { immediate: !0 }), A(() => t.iconSize, (l) => {
       l !== void 0 && console.warn(
         '[FzIconButton] The "iconSize" prop is deprecated and will be removed in a future version. Icon size has now a fixed dimension. Please remove the "iconSize" prop from your code.'
       );
     }, { immediate: !0 });
-    const a = s(() => t.environment ? t.environment : t.size ? _[t.size] : "frontoffice"), o = s(() => {
+    const o = i(() => t.environment ? t.environment : t.size ? _[t.size] : "frontoffice"), a = i(() => {
       const l = t.ariaLabel || "";
       return t.hasNotification ? `${l}, hai delle notifiche` : l;
-    }), i = s(() => {
+    }), r = i(() => {
       const l = {
         "rounded-full": !0,
         "w-8": !0,
@@ -1577,32 +1577,32 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
         "bg-blue-500": !0
       };
     });
-    return (l, c) => (v(), S("span", {
-      class: g(["fz-icon-button-wrapper", "relative", { "fz-icon-button-wrapper--backoffice": a.value === "backoffice", "fz-icon-button-wrapper--frontoffice": a.value === "frontoffice" }])
+    return (l, u) => (p(), z("span", {
+      class: y(["fz-icon-button-wrapper", "relative", { "fz-icon-button-wrapper--backoffice": o.value === "backoffice", "fz-icon-button-wrapper--frontoffice": o.value === "frontoffice" }])
     }, [
-      W(se, oe(l.$attrs, {
+      H(ue, oe(l.$attrs, {
         disabled: t.disabled,
-        environment: a.value,
+        environment: o.value,
         variant: t.variant,
-        "aria-label": o.value,
+        "aria-label": a.value,
         "icon-name": t.iconName,
         "icon-variant": t.iconVariant,
         "icon-position": "before",
         overrideContainerClass: ""
       }), null, 16, ["disabled", "environment", "variant", "aria-label", "icon-name", "icon-variant"]),
-      t.hasNotification ? (v(), S("div", {
+      t.hasNotification ? (p(), z("div", {
         key: 0,
-        class: g(i.value),
+        class: y(r.value),
         "aria-hidden": "true"
-      }, null, 2)) : z("", !0)
+      }, null, 2)) : C("", !0)
     ], 2));
   }
 }), K = (e, t) => {
-  const a = e.__vccOpts || e;
-  for (const [o, i] of t)
-    a[o] = i;
-  return a;
-}, ye = /* @__PURE__ */ K(et, [["__scopeId", "data-v-b4be112d"]]), tt = /* @__PURE__ */ A({
+  const o = e.__vccOpts || e;
+  for (const [a, r] of t)
+    o[a] = r;
+  return o;
+}, ye = /* @__PURE__ */ K(nt, [["__scopeId", "data-v-b4be112d"]]), lt = /* @__PURE__ */ N({
   __name: "FzContainer",
   props: {
     main: { type: Boolean, default: !1 },
@@ -1613,35 +1613,35 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
     layout: {}
   },
   setup(e) {
-    const t = e, a = s(() => t.alignItems ?? (t.horizontal ? "center" : "stretch"));
+    const t = e, o = i(() => t.alignItems ?? (t.horizontal ? "center" : "stretch"));
     if (!t.horizontal && "layout" in t) {
-      const i = t.layout;
-      i && i !== "default" && console.error(
-        `[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${t.horizontal}, layout: "${i}".`
+      const r = t.layout;
+      r && r !== "default" && console.error(
+        `[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${t.horizontal}, layout: "${r}".`
       );
     }
-    const o = s(() => {
-      const i = t.main ? "main-content" : "section-content", c = [
+    const a = i(() => {
+      const r = t.main ? "main-content" : "section-content", u = [
         t.horizontal ? "fz-container--horizontal" : "fz-container--vertical",
-        `gap-${i}-${t.gap}`,
-        `align-items-${a.value}`
+        `gap-${r}-${t.gap}`,
+        `align-items-${o.value}`
       ];
       if (t.horizontal) {
-        const p = ("layout" in t ? t.layout : void 0) || "default";
-        c.push(`layout-${p}`);
+        const f = ("layout" in t ? t.layout : void 0) || "default";
+        u.push(`layout-${f}`);
       }
-      return c;
+      return u;
     });
-    return (i, l) => (v(), O($e(t.tag), {
-      class: g(["fz-container", o.value])
+    return (r, l) => (p(), I(Be(t.tag), {
+      class: y(["fz-container", a.value])
     }, {
-      default: R(() => [
-        $(i.$slots, "default", {}, void 0, !0)
+      default: F(() => [
+        $(r.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), fe = /* @__PURE__ */ K(tt, [["__scopeId", "data-v-8c40daeb"]]), ot = ["aria-disabled"], at = ["href", "target", "rel"], he = /* @__PURE__ */ A({
+}), pe = /* @__PURE__ */ K(lt, [["__scopeId", "data-v-8c40daeb"]]), rt = ["aria-disabled"], it = ["href", "target", "rel"], he = /* @__PURE__ */ N({
   __name: "FzLink",
   props: {
     type: { default: "default" },
@@ -1655,7 +1655,7 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
   },
   setup(e) {
     const t = e;
-    F(
+    A(
       () => t.size === "xs",
       (n) => {
         n && console.warn(
@@ -1663,7 +1663,7 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
         );
       },
       { immediate: !0 }
-    ), F(
+    ), A(
       () => t.size === "lg",
       (n) => {
         n && console.warn(
@@ -1672,78 +1672,78 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
       },
       { immediate: !0 }
     );
-    const a = s(() => t.size === "xs" ? "sm" : t.size === "lg" ? "md" : t.size), o = s(() => [
+    const o = i(() => t.size === "xs" ? "sm" : t.size === "lg" ? "md" : t.size), a = i(() => [
       "border-1 border-transparent inline-block",
       {
-        "text-sm leading-xs": a.value === "sm",
-        "text-base leading-base": a.value === "md",
+        "text-sm leading-xs": o.value === "sm",
+        "text-base leading-base": o.value === "md",
         underline: t.linkStyle === "underline"
       }
-    ]), i = (n) => n.type === "default" && n.linkStyle === "underline", l = (n) => n.type === "default" && n.linkStyle !== "underline", c = (n) => n.type === "danger" && n.linkStyle === "underline", p = (n) => n.type === "danger" && n.linkStyle !== "underline", w = (n) => n.type === "default" && n.disabled, y = (n) => n.type === "danger" && n.disabled, d = s(() => {
-      const n = [...o.value, "focus:outline-none", "focus:border-solid", "focus:no-underline"];
+    ]), r = (n) => n.type === "default" && n.linkStyle === "underline", l = (n) => n.type === "default" && n.linkStyle !== "underline", u = (n) => n.type === "danger" && n.linkStyle === "underline", f = (n) => n.type === "danger" && n.linkStyle !== "underline", g = (n) => n.type === "default" && n.disabled, x = (n) => n.type === "danger" && n.disabled, m = i(() => {
+      const n = [...a.value, "focus:outline-none", "focus:border-solid", "focus:no-underline"];
       switch (!0) {
-        case i(t):
+        case r(t):
           n.push("text-blue-500", "hover:text-blue-600", "focus:text-blue-600", "focus:border-blue-600");
           break;
         case l(t):
           n.push("text-blue-500", "hover:text-blue-600", "hover:underline", "focus:text-blue-600", "focus:border-blue-600");
           break;
-        case c(t):
+        case u(t):
           n.push("text-semantic-error-200", "hover:text-semantic-error-300", "focus:text-semantic-error-300", "focus:border-semantic-error-300");
           break;
-        case p(t):
+        case f(t):
           n.push("text-semantic-error-200", "hover:text-semantic-error-300", "hover:underline", "focus:text-semantic-error-300", "focus:border-semantic-error-300");
           break;
       }
       return n;
-    }), r = s(() => {
-      const n = [...o.value, "cursor-not-allowed"];
+    }), s = i(() => {
+      const n = [...a.value, "cursor-not-allowed"];
       switch (!0) {
-        case w(t):
+        case g(t):
           n.push("text-blue-200");
           break;
-        case y(t):
+        case x(t):
           n.push("text-semantic-error-100");
           break;
       }
       return n;
-    }), u = s(() => t.external ? t.to : ""), f = s(() => {
+    }), d = i(() => t.external ? t.to : ""), c = i(() => {
       if (t.external && t.target === "_blank")
         return "noopener noreferrer";
     });
-    return (n, b) => {
-      const h = Be("router-link");
-      return e.disabled ? (v(), S("span", {
+    return (n, v) => {
+      const h = Ee("router-link");
+      return e.disabled ? (p(), z("span", {
         key: 0,
-        class: g(r.value),
+        class: y(s.value),
         "aria-disabled": e.disabled ? "true" : "false",
         role: "link",
         "aria-label": "Link disabled"
       }, [
         $(n.$slots, "default")
-      ], 10, ot)) : e.external ? (v(), S("a", {
+      ], 10, rt)) : e.external ? (p(), z("a", {
         key: 1,
-        href: u.value,
-        class: g(d.value),
+        href: d.value,
+        class: y(m.value),
         target: e.target,
-        rel: f.value
+        rel: c.value
       }, [
         $(n.$slots, "default")
-      ], 10, at)) : (v(), O(h, {
+      ], 10, it)) : (p(), I(h, {
         key: 2,
         to: e.to,
         replace: e.replace,
-        class: g(d.value),
+        class: y(m.value),
         target: e.target
       }, {
-        default: R(() => [
+        default: F(() => [
           $(n.$slots, "default")
         ]),
         _: 3
       }, 8, ["to", "replace", "class", "target"]));
     };
   }
-}), nt = ["aria-label", "aria-describedby", "tabindex"], lt = ["aria-hidden"], rt = 100, it = "text-core-white max-w-[200px] p-8 text-sm leading-[16px] flex flex-row items-start justify-center", st = /* @__PURE__ */ A({
+}), st = ["aria-label", "aria-describedby", "tabindex"], ut = ["aria-hidden"], ct = 100, dt = "text-core-white max-w-[200px] p-8 text-sm leading-[16px] flex flex-row items-start justify-center", ft = /* @__PURE__ */ N({
   __name: "FzTooltip",
   props: {
     position: { default: "auto" },
@@ -1755,127 +1755,127 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
     _forceOpenForDesignReview: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = te(), o = [se, ye, he];
-    function i(C) {
-      const L = C.type;
-      return o.includes(L);
+    const t = e, o = te(), a = [ue, ye, he];
+    function r(S) {
+      const L = S.type;
+      return a.includes(L);
     }
-    function l(C) {
-      if (i(C))
+    function l(S) {
+      if (r(S))
         return !0;
-      if (typeof C.type == "symbol") {
-        const L = C.children;
+      if (typeof S.type == "symbol") {
+        const L = S.children;
         if (Array.isArray(L))
-          return L.some((Y) => typeof Y == "object" && Y !== null && "type" in Y ? l(Y) : !1);
+          return L.some((J) => typeof J == "object" && J !== null && "type" in J ? l(J) : !1);
       }
       return !1;
     }
-    const c = s(() => {
-      if (!a.default) return !1;
-      const C = a.default();
-      return C.length === 0 ? !1 : C.some((L) => l(L));
-    }), p = {
+    const u = i(() => {
+      if (!o.default) return !1;
+      const S = o.default();
+      return S.length === 0 ? !1 : S.some((L) => l(L));
+    }), f = {
       neutral: { icon: "", bgClass: "!bg-core-black" },
       informative: { icon: "circle-info", bgClass: "bg-semantic-info-200" },
       alert: { icon: "triangle-exclamation", bgClass: "bg-semantic-warning-200" },
       error: { icon: "circle-exclamation", bgClass: "bg-semantic-error-200" },
       positive: { icon: "circle-check", bgClass: "bg-semantic-success-200" }
-    }, w = s(() => {
-      var C;
-      return ((C = p[t.status]) == null ? void 0 : C.icon) || "";
-    }), y = s(() => {
+    }, g = i(() => {
+      var S;
+      return ((S = f[t.status]) == null ? void 0 : S.icon) || "";
+    }), x = i(() => {
       var L;
-      const C = (L = p[t.status]) == null ? void 0 : L.bgClass;
-      return C ? { [C]: !0 } : {};
-    }), d = `tooltip-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, r = E(!1), u = E(!1), f = E(!1), n = E(null), b = s(() => t.withIcon && t.status !== "neutral"), h = s(() => r.value ? d : void 0), k = s(() => typeof t.interactive == "boolean" ? t.interactive ? void 0 : 0 : c.value ? void 0 : 0);
+      const S = (L = f[t.status]) == null ? void 0 : L.bgClass;
+      return S ? { [S]: !0 } : {};
+    }), m = `tooltip-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, s = R(!1), d = R(!1), c = R(!1), n = R(null), v = i(() => t.withIcon && t.status !== "neutral"), h = i(() => s.value ? m : void 0), k = i(() => typeof t.interactive == "boolean" ? t.interactive ? void 0 : 0 : u.value ? void 0 : 0);
     function B() {
-      (t.text || a.text) && (r.value = !0);
+      (t.text || o.text) && (s.value = !0);
     }
-    function I() {
-      t._forceOpenForDesignReview || (r.value = !1);
+    function O() {
+      t._forceOpenForDesignReview || (s.value = !1);
     }
     function V() {
       n.value && (clearTimeout(n.value), n.value = null), B();
     }
-    function N() {
+    function T() {
       n.value && (clearTimeout(n.value), n.value = null), n.value = setTimeout(() => {
-        !u.value && !f.value && I();
-      }, rt);
+        !d.value && !c.value && O();
+      }, ct);
     }
-    function X() {
-      u.value = !0, n.value && (clearTimeout(n.value), n.value = null);
+    function Y() {
+      d.value = !0, n.value && (clearTimeout(n.value), n.value = null);
     }
-    function H() {
-      u.value = !1, n.value && (clearTimeout(n.value), n.value = null), f.value || I();
+    function j() {
+      d.value = !1, n.value && (clearTimeout(n.value), n.value = null), c.value || O();
     }
-    function x() {
-      f.value = !0, B();
+    function w() {
+      c.value = !0, B();
     }
     function D() {
-      f.value = !1, n.value && (clearTimeout(n.value), n.value = null), u.value || I();
+      c.value = !1, n.value && (clearTimeout(n.value), n.value = null), d.value || O();
     }
-    function Q(C) {
-      C.key === "Escape" && I();
+    function Q(S) {
+      S.key === "Escape" && O();
     }
     return ee(() => {
       t._forceOpenForDesignReview && B();
-    }), F(() => t._forceOpenForDesignReview, (C) => {
-      C ? B() : I();
-    }), ne(() => {
+    }), A(() => t._forceOpenForDesignReview, (S) => {
+      S ? B() : O();
+    }), le(() => {
       n.value && clearTimeout(n.value);
-    }), (C, L) => (v(), O(m(Ze), {
+    }), (S, L) => (p(), I(b(ot), {
       teleport: !0,
-      "is-open": r.value,
+      "is-open": s.value,
       position: e.position,
       class: "fz__tooltip flex h-max",
-      contentClass: ["rounded", y.value, "z-80"]
+      contentClass: ["rounded", x.value, "z-80"]
     }, {
-      opener: R(() => [
-        T("span", {
+      opener: F(() => [
+        E("span", {
           "aria-label": t.ariaLabel,
           "aria-describedby": h.value,
           tabindex: k.value,
           onMouseover: V,
-          onMouseleave: N,
-          onFocusin: x,
+          onMouseleave: T,
+          onFocusin: w,
           onFocusout: D,
           onKeydown: Q
         }, [
-          $(C.$slots, "default", {}, void 0, !0)
-        ], 40, nt)
+          $(S.$slots, "default", {}, void 0, !0)
+        ], 40, st)
       ]),
-      default: R(() => [
-        T("div", {
-          id: d,
-          class: g(it),
+      default: F(() => [
+        E("div", {
+          id: m,
+          class: y(dt),
           role: "tooltip",
-          "aria-hidden": !r.value,
-          onMouseenter: X,
-          onMouseleave: H
+          "aria-hidden": !s.value,
+          onMouseenter: Y,
+          onMouseleave: j
         }, [
-          b.value ? (v(), O(m(U), {
+          v.value ? (p(), I(b(P), {
             key: 0,
             size: "md",
-            name: w.value,
-            class: g(["mr-4", "!w-[16px]", "!h-[16px]", "grow-0", "shrink-0", { "text-core-black": t.status === "alert" }]),
+            name: g.value,
+            class: y(["mr-4", "!w-[16px]", "!h-[16px]", "grow-0", "shrink-0", { "text-core-black": t.status === "alert" }]),
             "aria-hidden": !0
-          }, null, 8, ["name", "class"])) : z("", !0),
-          T("span", {
-            class: g(["basis-0 grow shrink-0 break-normal fz__tooltip__text", { "text-core-black": t.status === "alert" }])
+          }, null, 8, ["name", "class"])) : C("", !0),
+          E("span", {
+            class: y(["basis-0 grow shrink-0 break-normal fz__tooltip__text", { "text-core-black": t.status === "alert" }])
           }, [
-            $(C.$slots, "text", {}, () => [
-              M(P(t.text), 1)
+            $(S.$slots, "text", {}, () => [
+              q(M(t.text), 1)
             ], !0)
           ], 2)
-        ], 40, lt)
+        ], 40, ut)
       ]),
       _: 3
     }, 8, ["is-open", "position", "contentClass"]));
   }
-}), ut = /* @__PURE__ */ K(st, [["__scopeId", "data-v-94597a6c"]]), ct = { class: "flex flex-col flex-1" }, dt = {
+}), xe = /* @__PURE__ */ K(ft, [["__scopeId", "data-v-94597a6c"]]), pt = { class: "flex flex-col flex-1" }, vt = {
   key: 0,
   class: "leading-[20px]"
-}, ft = /* @__PURE__ */ A({
+}, mt = /* @__PURE__ */ N({
   __name: "FzAlert",
   props: {
     tone: {},
@@ -1897,142 +1897,142 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
   },
   emits: ["fzAlert:click", "fzAlert:dismiss"],
   setup(e, { emit: t }) {
-    const a = e, o = t, i = E(a.defaultOpen), l = {
+    const o = e, a = t, r = R(o.defaultOpen), l = {
       info: "bg-semantic-info-50 border-semantic-info",
       error: "bg-semantic-error-50 border-semantic-error",
       danger: "bg-semantic-error-50 border-semantic-error",
       warning: "bg-semantic-warning-50 border-semantic-warning",
       success: "bg-semantic-success-50 border-semantic-success"
-    }, c = {
+    }, u = {
       sm: "backoffice",
       md: "frontoffice",
       lg: "frontoffice"
-    }, p = s(() => [
+    }, f = i(() => [
       "flex select-none gap-12 rounded justify-between",
-      l[a.tone],
+      l[o.tone],
       h.value === "backoffice" ? "p-6" : "",
       ...k.value === "accordion" ? ["cursor-pointer"] : []
-    ]), w = s(
+    ]), g = i(
       () => ({
         info: "circle-info",
         error: "circle-xmark",
         danger: "triangle-exclamation",
         warning: "triangle-exclamation",
         success: "circle-check"
-      })[a.tone]
-    ), y = s(() => [
+      })[o.tone]
+    ), x = i(() => [
       {
         info: "text-semantic-info",
         error: "text-semantic-error",
         danger: "text-semantic-error",
         warning: "text-semantic-warning",
         success: "text-semantic-success"
-      }[a.tone]
-    ]), d = s(() => [
+      }[o.tone]
+    ]), m = i(() => [
       "font-normal",
       "!leading-[20px]",
       {
-        "mt-8": a.title,
-        "mb-16": a.showButtonAction || a.showLinkAction
+        "mt-8": o.title,
+        "mb-16": o.showButtonAction || o.showLinkAction
       }
-    ]), r = s(() => k.value === "background" ? !0 : i.value), u = s(() => i.value ? "angle-up" : "angle-down"), f = s(() => {
-      if (k.value === "accordion") return u.value;
-      if (a.isDismissible) return "xmark";
-    }), n = s(() => k.value !== "accordion" ? !0 : i.value);
-    function b(N) {
-      N.stopPropagation(), o("fzAlert:click");
+    ]), s = i(() => k.value === "background" ? !0 : r.value), d = i(() => r.value ? "angle-up" : "angle-down"), c = i(() => {
+      if (k.value === "accordion") return d.value;
+      if (o.isDismissible) return "xmark";
+    }), n = i(() => k.value !== "accordion" ? !0 : r.value);
+    function v(T) {
+      T.stopPropagation(), a("fzAlert:click");
     }
-    const h = s(() => a.size ? c[a.size] : a.environment), k = s(() => a.variant ? a.variant : ["default", "simple"].includes(a.alertStyle) ? "background" : "accordion"), B = s(() => k.value === "accordion" || a.isDismissible), I = () => {
-      k.value === "accordion" && (i.value = !i.value), a.isDismissible && o("fzAlert:dismiss");
+    const h = i(() => o.size ? u[o.size] : o.environment), k = i(() => o.variant ? o.variant : ["default", "simple"].includes(o.alertStyle) ? "background" : "accordion"), B = i(() => k.value === "accordion" || o.isDismissible), O = () => {
+      k.value === "accordion" && (r.value = !r.value), o.isDismissible && a("fzAlert:dismiss");
     }, V = () => {
-      k.value === "accordion" && (i.value = !i.value);
+      k.value === "accordion" && (r.value = !r.value);
     };
-    return (N, X) => {
-      const H = Se("bold");
-      return v(), S("div", {
-        class: g(p.value),
+    return (T, Y) => {
+      const j = Ie("bold");
+      return p(), z("div", {
+        class: y(f.value),
         onClick: V
       }, [
-        W(m(fe), {
+        H(b(pe), {
           horizontal: "",
           gap: "sm",
-          class: g(["flex-1", h.value === "backoffice" ? "p-6" : "p-12"]),
+          class: y(["flex-1", h.value === "backoffice" ? "p-6" : "p-12"]),
           alignItems: "start"
         }, {
-          default: R(() => [
-            W(m(U), {
-              name: w.value,
+          default: F(() => [
+            H(b(P), {
+              name: g.value,
               size: "md",
-              class: g(y.value)
+              class: y(x.value)
             }, null, 8, ["name", "class"]),
-            T("div", ct, [
-              e.title ? J((v(), S("p", dt, [
-                M(P(e.title), 1)
+            E("div", pt, [
+              e.title ? Z((p(), z("p", vt, [
+                q(M(e.title), 1)
               ])), [
-                [H]
-              ]) : z("", !0),
-              n.value ? (v(), S("p", {
+                [j]
+              ]) : C("", !0),
+              n.value ? (p(), z("p", {
                 key: 1,
-                class: g(d.value)
+                class: y(m.value)
               }, [
-                $(N.$slots, "default", {}, void 0, !0)
-              ], 2)) : z("", !0),
-              r.value ? $(N.$slots, "action", { key: 2 }, () => [
-                W(m(fe), {
+                $(T.$slots, "default", {}, void 0, !0)
+              ], 2)) : C("", !0),
+              s.value ? $(T.$slots, "action", { key: 2 }, () => [
+                H(b(pe), {
                   horizontal: "",
                   gap: "sm"
                 }, {
-                  default: R(() => [
-                    e.showButtonAction ? (v(), O(m(se), {
+                  default: F(() => [
+                    e.showButtonAction ? (p(), I(b(ue), {
                       key: 0,
-                      onClick: b,
+                      onClick: v,
                       tooltip: e.buttonActionTooltip,
                       environment: h.value,
                       variant: "secondary"
                     }, {
-                      default: R(() => [
-                        M(P(e.buttonActionLabel), 1)
+                      default: F(() => [
+                        q(M(e.buttonActionLabel), 1)
                       ]),
                       _: 1
-                    }, 8, ["tooltip", "environment"])) : z("", !0),
-                    e.showLinkAction ? (v(), O(m(he), {
+                    }, 8, ["tooltip", "environment"])) : C("", !0),
+                    e.showLinkAction ? (p(), I(b(he), {
                       key: 1,
                       to: e.linkActionLocation,
-                      onClick: b,
+                      onClick: v,
                       size: "md",
                       target: e.linkActionTarget,
                       external: e.linkActionExternal
                     }, {
-                      default: R(() => [
-                        M(P(e.linkActionLabel), 1)
+                      default: F(() => [
+                        q(M(e.linkActionLabel), 1)
                       ]),
                       _: 1
-                    }, 8, ["to", "target", "external"])) : z("", !0)
+                    }, 8, ["to", "target", "external"])) : C("", !0)
                   ]),
                   _: 1
                 })
-              ], !0) : z("", !0)
+              ], !0) : C("", !0)
             ])
           ]),
           _: 3
         }, 8, ["class"]),
-        B.value ? (v(), O(m(ye), {
+        B.value ? (p(), I(b(ye), {
           key: 0,
-          iconName: f.value,
+          iconName: c.value,
           environment: h.value,
           variant: "invisible",
-          onClick: Oe(I, ["stop"])
-        }, null, 8, ["iconName", "environment"])) : z("", !0)
+          onClick: Oe(O, ["stop"])
+        }, null, 8, ["iconName", "environment"])) : C("", !0)
       ], 2);
     };
   }
-}), pt = /* @__PURE__ */ K(ft, [["__scopeId", "data-v-f72b7e4a"]]), xe = /* @__PURE__ */ A({
+}), bt = /* @__PURE__ */ K(mt, [["__scopeId", "data-v-f72b7e4a"]]), ge = /* @__PURE__ */ N({
   __name: "ErrorAlert",
   props: {
     id: {}
   },
   setup(e) {
-    return (t, a) => (v(), O(m(pt), {
+    return (t, o) => (p(), I(b(bt), {
       id: e.id,
       tone: "error",
       alertStyle: "simple",
@@ -2041,13 +2041,13 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
       "aria-atomic": "true",
       size: "md"
     }, {
-      default: R(() => [
+      default: F(() => [
         $(t.$slots, "default")
       ]),
       _: 3
     }, 8, ["id"]));
   }
-}), vt = { class: "flex justify-center flex-col w-fit gap-4" }, mt = ["data-emphasis", "data-error", "data-disabled"], bt = ["id", "disabled", "required", "value", "aria-checked", "aria-label", "aria-required", "aria-invalid", "aria-describedby", "aria-labelledby", "aria-owns"], yt = ["id", "for"], ht = "w-0 h-0 peer fz-hidden-input", xt = `
+}), yt = { class: "flex justify-center flex-col w-fit gap-4" }, ht = ["data-emphasis", "data-error", "data-disabled"], xt = ["id", "disabled", "required", "value", "aria-checked", "aria-label", "aria-required", "aria-invalid", "aria-describedby", "aria-labelledby", "aria-owns"], gt = ["id", "for"], wt = "w-0 h-0 peer fz-hidden-input", Ct = `
   flex gap-6 items-start hover:cursor-pointer text-core-black
   peer-focus:[&_div]:after:border-1
   peer-focus:[&_div]:after:border-solid
@@ -2059,9 +2059,9 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
   peer-focus:[&_div]:after:right-0
   peer-focus:[&_div]:after:bottom-0
   peer-focus:[&_div]:after:absolute
-`, gt = "relative", wt = /* @__PURE__ */ A({
+`, kt = "relative", zt = /* @__PURE__ */ N({
   __name: "FzCheckbox",
-  props: /* @__PURE__ */ Z({
+  props: /* @__PURE__ */ X({
     label: {},
     value: { type: [String, Number, Boolean] },
     size: {},
@@ -2078,11 +2078,11 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
     modelValue: { type: [null, Boolean, Array], required: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ Z(["change"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ X(["change"], ["update:modelValue"]),
   setup(e, { emit: t }) {
-    const a = e;
-    F(
-      () => a.size,
+    const o = e;
+    A(
+      () => o.size,
       (k) => {
         k !== void 0 && console.warn(
           '[FzCheckbox] The "size" prop is deprecated and will be removed in a future version. Checkboxes now have a fixed size.'
@@ -2090,74 +2090,74 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
       },
       { immediate: !0 }
     );
-    const o = Object.freeze({
+    const a = Object.freeze({
       /** Icon for indeterminate state (partial selection) */
       INDETERMINATE: "square-minus",
       /** Icon for checked state */
       CHECKED: "square-check",
       /** Icon for unchecked state */
       UNCHECKED: "square"
-    }), i = Object.freeze({
+    }), r = Object.freeze({
       /** Solid variant (filled) - used for checked and indeterminate states */
       SOLID: "fas",
       /** Regular variant (outline) - used for unchecked state */
       REGULAR: "far"
-    }), l = s(
-      () => a.value ?? a.label
-    ), c = a.checkboxId || be(), p = le(e, "modelValue"), w = t, y = Ie(null), d = s(() => p.value == null ? !1 : typeof p.value == "boolean" ? p.value : p.value.includes(l.value)), r = s(() => a.disabled ? "text-grey-300 [&_div]:text-grey-300" : a.error ? "text-semantic-error-200 [&_div]:text-semantic-error-200 peer-checked:[&_div]:text-semantic-error-200 peer-indeterminate:[&_div]:text-semantic-error-200" : a.emphasis ? "text-core-black [&_div]:text-blue-500 peer-checked:[&_div]:text-blue-500 peer-indeterminate:[&_div]:text-blue-500" : "text-core-black peer-checked:[&_div]:text-grey-500 peer-indeterminate:[&_div]:text-grey-500"), u = s(() => a.disabled ? "text-grey-300" : a.error ? "text-semantic-error-200" : a.emphasis ? "text-blue-500" : "text-grey-400"), f = s(() => [
+    }), l = i(
+      () => o.value ?? o.label
+    ), u = o.checkboxId || ie(), f = ae(e, "modelValue"), g = t, x = Re(null), m = i(() => f.value == null ? !1 : typeof f.value == "boolean" ? f.value : f.value.includes(l.value)), s = i(() => o.disabled ? "text-grey-300 [&_div]:text-grey-300" : o.error ? "text-semantic-error-200 [&_div]:text-semantic-error-200 peer-checked:[&_div]:text-semantic-error-200 peer-indeterminate:[&_div]:text-semantic-error-200" : o.emphasis ? "text-core-black [&_div]:text-blue-500 peer-checked:[&_div]:text-blue-500 peer-indeterminate:[&_div]:text-blue-500" : "text-core-black peer-checked:[&_div]:text-grey-500 peer-indeterminate:[&_div]:text-grey-500"), d = i(() => o.disabled ? "text-grey-300" : o.error ? "text-semantic-error-200" : o.emphasis ? "text-blue-500" : "text-grey-400"), c = i(() => [
       "text-base",
-      r.value
-    ]), n = s(() => [u.value]), b = s(() => a.indeterminate ? o.INDETERMINATE : d.value ? o.CHECKED : o.UNCHECKED), h = s(() => a.indeterminate || d.value ? i.SOLID : i.REGULAR);
+      s.value
+    ]), n = i(() => [d.value]), v = i(() => o.indeterminate ? a.INDETERMINATE : m.value ? a.CHECKED : a.UNCHECKED), h = i(() => o.indeterminate || m.value ? r.SOLID : r.REGULAR);
     return ee(() => {
       var k, B;
-      p.value != null && (typeof p.value == "boolean" ? p.value && ((k = y.value) == null || k.dispatchEvent(new Event("change"))) : p.value.includes(l.value) && ((B = y.value) == null || B.dispatchEvent(new Event("change"))));
-    }), (k, B) => (v(), S("div", vt, [
-      T("div", {
+      f.value != null && (typeof f.value == "boolean" ? f.value && ((k = x.value) == null || k.dispatchEvent(new Event("change"))) : f.value.includes(l.value) && ((B = x.value) == null || B.dispatchEvent(new Event("change"))));
+    }), (k, B) => (p(), z("div", yt, [
+      E("div", {
         class: "flex items-start group",
         "data-emphasis": e.emphasis || void 0,
         "data-error": e.error || void 0,
         "data-disabled": e.disabled || void 0
       }, [
-        J(T("input", {
+        Z(E("input", {
           type: "checkbox",
-          id: m(c),
+          id: b(u),
           disabled: e.disabled,
-          class: g(ht),
+          class: y(wt),
           required: e.required,
           value: e.value,
-          onChange: B[0] || (B[0] = (I) => w("change", I)),
-          "onUpdate:modelValue": B[1] || (B[1] = (I) => p.value = I),
-          "aria-checked": e.indeterminate ? "mixed" : d.value,
+          onChange: B[0] || (B[0] = (O) => g("change", O)),
+          "onUpdate:modelValue": B[1] || (B[1] = (O) => f.value = O),
+          "aria-checked": e.indeterminate ? "mixed" : m.value,
           "aria-label": e.standalone ? e.label : void 0,
           "aria-required": e.required ? "true" : "false",
           "aria-invalid": e.error ? "true" : "false",
-          "aria-describedby": e.error && k.$slots.error ? `${m(c)}-error` : void 0,
-          "aria-labelledby": e.standalone ? void 0 : `${m(c)}-label`,
-          "aria-owns": a.ariaOwns,
+          "aria-describedby": e.error && k.$slots.error ? `${b(u)}-error` : void 0,
+          "aria-labelledby": e.standalone ? void 0 : `${b(u)}-label`,
+          "aria-owns": o.ariaOwns,
           ref_key: "refCheckbox",
-          ref: y
-        }, null, 40, bt), [
-          [Ee, p.value]
+          ref: x
+        }, null, 40, xt), [
+          [Fe, f.value]
         ]),
-        T("label", {
-          id: `${m(c)}-label`,
-          for: m(c),
-          class: g([xt, f.value])
+        E("label", {
+          id: `${b(u)}-label`,
+          for: b(u),
+          class: y([Ct, c.value])
         }, [
-          W(m(U), {
-            name: b.value,
+          H(b(P), {
+            name: v.value,
             size: "md",
-            class: g([gt, n.value]),
+            class: y([kt, n.value]),
             variant: h.value,
             "aria-hidden": "true"
           }, null, 8, ["name", "class", "variant"]),
-          e.standalone ? z("", !0) : (v(), S(re, { key: 0 }, [
-            M(P(e.label), 1)
+          e.standalone ? C("", !0) : (p(), z(re, { key: 0 }, [
+            q(M(e.label), 1)
           ], 64))
-        ], 10, yt),
-        e.tooltip ? (v(), O(m(ut), oe({ key: 0 }, e.tooltip, { class: "ml-6" }), {
-          default: R(() => [
-            W(m(U), {
+        ], 10, gt),
+        e.tooltip ? (p(), I(b(xe), oe({ key: 0 }, e.tooltip, { class: "ml-6" }), {
+          default: F(() => [
+            H(b(P), {
               name: "info-circle",
               size: "md",
               class: "text-semantic-info",
@@ -2166,23 +2166,23 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
             })
           ]),
           _: 1
-        }, 16)) : z("", !0)
-      ], 8, mt),
-      e.error && k.$slots.error ? (v(), O(xe, {
+        }, 16)) : C("", !0)
+      ], 8, ht),
+      e.error && k.$slots.error ? (p(), I(ge, {
         key: 0,
-        id: `${m(c)}-error`
+        id: `${b(u)}-error`
       }, {
-        default: R(() => [
+        default: F(() => [
           $(k.$slots, "error", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["id"])) : z("", !0),
+      }, 8, ["id"])) : C("", !0),
       $(k.$slots, "children", {}, void 0, !0)
     ]));
   }
-}), pe = /* @__PURE__ */ K(wt, [["__scopeId", "data-v-2b198cc9"]]), kt = "flex flex-col justify-center gap-8 pl-24", Ct = /* @__PURE__ */ A({
+}), ve = /* @__PURE__ */ K(zt, [["__scopeId", "data-v-2b198cc9"]]), we = Symbol("FzCheckboxCheckedSet"), $t = "flex flex-col justify-center gap-8 pl-24", St = /* @__PURE__ */ N({
   __name: "FzCheckboxGroupOption",
-  props: /* @__PURE__ */ Z({
+  props: /* @__PURE__ */ X({
     label: {},
     value: { type: [String, Number, Boolean] },
     indeterminate: { type: Boolean },
@@ -2204,67 +2204,67 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = s(
+    const t = e, o = i(
       () => t.value ?? t.label
-    ), o = le(e, "modelValue"), i = be(), l = s(
+    ), a = ae(e, "modelValue"), r = ie(), l = i(
       () => {
-        var d;
-        return (d = t.children) == null ? void 0 : d.map((r, u) => `${i}-child-${u}`).join(" ");
+        var m;
+        return (m = t.children) == null ? void 0 : m.map((s, d) => `${r}-child-${d}`).join(" ");
       }
-    ), c = s(() => []), p = s(() => {
+    ), u = i(() => []), f = i(() => {
       if (!t.children) return !1;
-      const d = t.children.filter(
-        (r) => o.value.includes(r.value ?? r.label)
+      const m = t.children.filter(
+        (s) => a.value.includes(s.value ?? s.label)
       ).length;
-      return d > 0 && d < t.children.length;
+      return m > 0 && m < t.children.length;
     });
-    function w() {
+    function g() {
       if (!t.children) return;
       t.children.filter(
-        (r) => o.value.includes(r.value ?? r.label)
-      ).length === t.children.length ? o.value.includes(a.value) || (o.value = o.value.concat(a.value)) : o.value.includes(a.value) && (o.value = o.value.filter((r) => r !== a.value));
+        (s) => a.value.includes(s.value ?? s.label)
+      ).length === t.children.length ? a.value.includes(o.value) || (a.value = a.value.concat(o.value)) : a.value.includes(o.value) && (a.value = a.value.filter((s) => s !== o.value));
     }
-    function y() {
-      var d;
-      t.children && (o.value.includes(a.value) ? o.value = o.value.concat(
-        (d = t.children) == null ? void 0 : d.map((r) => r.value ?? r.label).filter((r) => !o.value.includes(r))
-      ) : o.value = o.value.filter(
-        (r) => {
-          var u;
-          return !((u = t.children) != null && u.map((f) => f.value ?? f.label).includes(r));
+    function x() {
+      var m;
+      t.children && (a.value.includes(o.value) ? a.value = a.value.concat(
+        (m = t.children) == null ? void 0 : m.map((s) => s.value ?? s.label).filter((s) => !a.value.includes(s))
+      ) : a.value = a.value.filter(
+        (s) => {
+          var d;
+          return !((d = t.children) != null && d.map((c) => c.value ?? c.label).includes(s));
         }
       ));
     }
-    return (d, r) => {
-      var u, f;
-      return v(), O(pe, {
-        modelValue: o.value,
-        "onUpdate:modelValue": r[1] || (r[1] = (n) => o.value = n),
+    return (m, s) => {
+      var d, c;
+      return p(), I(ve, {
+        modelValue: a.value,
+        "onUpdate:modelValue": s[1] || (s[1] = (n) => a.value = n),
         value: t.value,
         label: t.label,
         disabled: e.disabled,
         emphasis: e.emphasis,
         error: e.error,
-        indeterminate: p.value,
-        "aria-owns": (u = e.children) != null && u.length ? l.value : void 0,
-        onChange: y
-      }, Re({ _: 2 }, [
-        (f = e.children) != null && f.length ? {
+        indeterminate: f.value,
+        "aria-owns": (d = e.children) != null && d.length ? l.value : void 0,
+        onChange: x
+      }, Ae({ _: 2 }, [
+        (c = e.children) != null && c.length ? {
           name: "children",
-          fn: R(() => [
-            T("div", {
-              class: g([kt, c.value])
+          fn: F(() => [
+            E("div", {
+              class: y([$t, u.value])
             }, [
-              (v(!0), S(re, null, ve(e.children, (n, b) => (v(), O(pe, oe({
+              (p(!0), z(re, null, me(e.children, (n, v) => (p(), I(ve, oe({
                 key: n.value ? n.value.toString() : n.label,
-                modelValue: o.value,
-                "onUpdate:modelValue": r[0] || (r[0] = (h) => o.value = h),
+                modelValue: a.value,
+                "onUpdate:modelValue": s[0] || (s[0] = (h) => a.value = h),
                 disabled: e.disabled
               }, { ref_for: !0 }, n, {
                 emphasis: e.emphasis,
                 error: e.error,
-                "checkbox-id": `${m(i)}-child-${b}`,
-                onChange: w
+                "checkbox-id": `${b(r)}-child-${v}`,
+                onChange: g
               }), null, 16, ["modelValue", "disabled", "emphasis", "error", "checkbox-id"]))), 128))
             ], 2)
           ]),
@@ -2273,9 +2273,9 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
       ]), 1032, ["modelValue", "value", "label", "disabled", "emphasis", "error", "indeterminate", "aria-owns"]);
     };
   }
-}), zt = ["id"], $t = { key: 0 }, Bt = ["id"], St = ["id", "aria-labelledby", "aria-describedby", "aria-required", "aria-invalid"], Ot = "flex flex-col", It = "flex flex-col gap-10", Et = "flex items-start", Tt = /* @__PURE__ */ A({
+}), Bt = ["id"], Et = { key: 0 }, It = ["id"], Ot = ["id", "aria-labelledby", "aria-describedby", "aria-required", "aria-invalid"], Rt = "flex flex-col", Ft = "flex flex-col gap-10", At = "flex items-start", Ut = /* @__PURE__ */ N({
   __name: "FzCheckboxGroup",
-  props: /* @__PURE__ */ Z({
+  props: /* @__PURE__ */ X({
     label: {},
     size: {},
     options: {},
@@ -2293,84 +2293,258 @@ const Je = Object.entries(ie.global.breakpoint).reduce(
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = te();
-    F(
+    const t = e, o = te();
+    A(
       () => t.size,
-      (d) => {
-        d !== void 0 && console.warn(
+      (c) => {
+        c !== void 0 && console.warn(
           '[FzCheckboxGroup] The "size" prop is deprecated and will be removed in a future version. Checkboxes now have a fixed size.'
         );
       },
       { immediate: !0 }
     );
-    const o = Fe(), i = s(() => [
+    const a = Le(), r = i(() => [
       "text-sm",
       t.disabled ? "text-grey-400" : "text-grey-500"
-    ]), l = le(e, "modelValue"), c = s(() => [
+    ]), l = ae(e, "modelValue"), u = i(() => new Set(l.value));
+    Ne(we, { source: l, set: u });
+    const f = i(() => [
       "text-base",
       "gap-6",
       t.disabled ? "text-grey-400" : "text-core-black"
-    ]), p = s(() => ["text-base"]), w = s(() => [
+    ]), g = i(() => ["text-base"]), x = i(() => [
       "text-base",
       t.horizontal ? "gap-16" : "gap-8",
       t.horizontal ? "flex-row" : "flex-col"
-    ]), y = s(() => {
-      const d = [];
-      return a.help && d.push(`${o}-help`), t.error && a.error && d.push(`${o}-error`), d.length > 0 ? d.join(" ") : void 0;
+    ]), m = i(
+      () => Array.isArray(t.options) && t.options.length > 0
+    ), s = i(() => ({
+      disabled: t.disabled,
+      error: t.error,
+      emphasis: t.emphasis,
+      required: t.required
+    })), d = i(() => {
+      const c = [];
+      return o.help && c.push(`${a}-help`), t.error && o.error && c.push(`${a}-error`), c.length > 0 ? c.join(" ") : void 0;
     });
-    return (d, r) => (v(), S("div", {
-      class: g([It, p.value])
+    return (c, n) => (p(), z("div", {
+      class: y([Ft, g.value])
     }, [
-      T("label", {
-        id: m(o) + "-label",
-        class: g([Ot, c.value])
+      E("label", {
+        id: b(a) + "-label",
+        class: y([Rt, f.value])
       }, [
-        T("span", null, [
-          M(P(e.label), 1),
-          e.required ? (v(), S("span", $t, " *")) : z("", !0)
+        E("span", null, [
+          q(M(e.label), 1),
+          e.required ? (p(), z("span", Et, " *")) : C("", !0)
         ]),
-        d.$slots.help ? (v(), S("p", {
+        c.$slots.help ? (p(), z("p", {
           key: 0,
-          id: m(o) + "-help",
-          class: g(i.value)
+          id: b(a) + "-help",
+          class: y(r.value)
         }, [
-          $(d.$slots, "help")
-        ], 10, Bt)) : z("", !0)
-      ], 10, zt),
-      T("div", {
-        class: g([Et, w.value]),
-        id: m(o),
+          $(c.$slots, "help")
+        ], 10, It)) : C("", !0)
+      ], 10, Bt),
+      E("div", {
+        class: y([At, x.value]),
+        id: b(a),
         role: "group",
-        "aria-labelledby": m(o) + "-label",
-        "aria-describedby": y.value,
+        "aria-labelledby": b(a) + "-label",
+        "aria-describedby": d.value,
         "aria-required": e.required ? "true" : "false",
         "aria-invalid": e.error ? "true" : "false"
       }, [
-        (v(!0), S(re, null, ve(e.options, (u) => (v(), O(Ct, oe({
-          key: u.value ? u.value.toString() : u.label,
+        m.value ? (p(!0), z(re, { key: 0 }, me(e.options, (v) => (p(), I(St, oe({
+          key: v.value ? v.value.toString() : v.label,
           modelValue: l.value,
-          "onUpdate:modelValue": r[0] || (r[0] = (f) => l.value = f),
+          "onUpdate:modelValue": n[0] || (n[0] = (h) => l.value = h),
           disabled: e.disabled
-        }, { ref_for: !0 }, u, {
+        }, { ref_for: !0 }, v, {
           emphasis: e.emphasis,
           error: e.error
-        }), null, 16, ["modelValue", "disabled", "emphasis", "error"]))), 128))
-      ], 10, St),
-      e.error && d.$slots.error ? (v(), O(xe, {
+        }), null, 16, ["modelValue", "disabled", "emphasis", "error"]))), 128)) : $(c.$slots, "default", {
+          key: 1,
+          checkboxGroupProps: s.value
+        })
+      ], 10, Ot),
+      e.error && c.$slots.error ? (p(), I(ge, {
         key: 0,
-        id: m(o) + "-error"
+        id: b(a) + "-error"
       }, {
-        default: R(() => [
-          $(d.$slots, "error")
+        default: F(() => [
+          $(c.$slots, "error")
         ]),
         _: 3
-      }, 8, ["id"])) : z("", !0)
+      }, 8, ["id"])) : C("", !0)
     ], 2));
   }
-});
+}), Nt = ["id", "value", "disabled", "checked", "name", "required", "aria-checked", "aria-required", "aria-invalid"], Tt = ["for"], Lt = ["title"], Vt = ["src", "alt"], Dt = { class: "flex flex-row w-full justify-between min-w-0" }, Mt = { class: "justify-center flex flex-col w-full grow-0 min-w-0 gap-4" }, Pt = "w-0 h-0 peer fz-hidden-input", qt = /* @__PURE__ */ N({
+  __name: "FzCheckboxCard",
+  props: /* @__PURE__ */ X({
+    label: {},
+    size: {},
+    emphasis: { type: Boolean },
+    disabled: { type: Boolean },
+    error: { type: Boolean },
+    required: { type: Boolean },
+    value: {},
+    title: {},
+    subtitle: {},
+    imageAlt: {},
+    tooltip: {},
+    tooltipStatus: {},
+    hasCheckbox: { type: Boolean, default: !0 },
+    name: {},
+    variant: { default: "horizontal" },
+    imageUrl: {}
+  }, {
+    modelValue: {
+      required: !0,
+      default: []
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = e, o = i(
+      () => t.value ?? t.label
+    ), a = ie(), r = ae(e, "modelValue"), l = Te(we, null), u = i(() => r.value == null ? !1 : l && l.source.value === r.value ? l.set.value.has(o.value) : r.value.includes(o.value));
+    function f() {
+      if (t.disabled) return;
+      const v = r.value ?? [];
+      u.value ? r.value = v.filter((h) => h !== o.value) : r.value = [...v, o.value];
+    }
+    const g = Object.freeze({
+      CHECKED: "square-check",
+      UNCHECKED: "square"
+    }), x = Object.freeze({
+      SOLID: "fas",
+      REGULAR: "far"
+    }), m = i(
+      () => u.value ? g.CHECKED : g.UNCHECKED
+    ), s = i(
+      () => u.value ? x.SOLID : x.REGULAR
+    ), d = i(() => t.disabled ? "text-grey-300" : t.error ? "text-semantic-error-200" : t.emphasis || u.value ? "text-blue-500" : "text-grey-400"), c = i(() => t.variant === "vertical" || !!t.imageUrl), n = i(() => ({
+      "flex-col": t.variant === "vertical",
+      "flex-row": t.variant === "horizontal",
+      "pb-20": t.variant === "vertical" && (!u.value || t.disabled),
+      "pb-12": t.variant === "horizontal" && (!u.value || t.disabled),
+      "pb-[19px]": t.variant === "vertical" && u.value && !t.disabled,
+      "pb-[11px]": t.variant === "horizontal" && u.value && !t.disabled,
+      "pt-[11px]": u.value && !t.disabled,
+      "gap-20": t.variant === "vertical",
+      "gap-12": t.variant === "horizontal",
+      "border-2 px-[11px] border-blue-500": u.value && !t.disabled,
+      "border-1 border-grey-300": !u.value || t.disabled,
+      "hover:bg-[#f9faff] peer-focus:outline peer-focus:bg-[#f9faff] peer-focus:outline-blue-200 peer-focus:outline-2 peer-checked:bg-[#f9faff]": !t.disabled
+    }));
+    return (v, h) => (p(), z("div", null, [
+      E("input", {
+        type: "checkbox",
+        id: b(a),
+        class: y([Pt]),
+        value: o.value,
+        disabled: e.disabled,
+        checked: u.value,
+        name: e.name,
+        required: e.required,
+        tabindex: "0",
+        "aria-checked": u.value,
+        "aria-required": e.required ? "true" : "false",
+        "aria-invalid": e.error ? "true" : "false",
+        onChange: f
+      }, null, 42, Nt),
+      E("label", {
+        class: y([
+          "relative flex block rounded-lg border-solid pt-12 px-12 cursor-pointer w-full",
+          n.value
+        ]),
+        for: b(a)
+      }, [
+        e.hasCheckbox ? (p(), I(b(P), {
+          key: 0,
+          name: m.value,
+          size: "md",
+          class: y([
+            "shrink-0",
+            d.value,
+            {
+              "absolute top-[23px] left-[23px]": e.variant === "vertical",
+              "self-start": e.variant === "horizontal"
+            }
+          ]),
+          variant: s.value,
+          "aria-hidden": "true"
+        }, null, 8, ["name", "class", "variant"])) : C("", !0),
+        c.value ? (p(), z("picture", {
+          key: 1,
+          class: y([
+            "rounded overflow-hidden",
+            {
+              "shrink-0 size-[58px]": e.variant === "horizontal",
+              "w-full aspect-[16/9]": e.variant === "vertical",
+              "opacity-30": t.disabled
+            }
+          ]),
+          title: e.imageAlt || ""
+        }, [
+          E("img", {
+            src: e.imageUrl,
+            alt: e.imageAlt || "",
+            class: "object-cover h-full w-full"
+          }, null, 8, Vt)
+        ], 10, Lt)) : C("", !0),
+        E("div", Dt, [
+          E("div", Mt, [
+            E("p", {
+              class: y([
+                "font-medium break-words !m-0 !leading-[20px]",
+                { "text-grey-300": t.disabled }
+              ])
+            }, M(e.title), 3),
+            e.subtitle ? (p(), z("p", {
+              key: 0,
+              class: y([
+                "font-normal text-sm mt-4 break-words !m-0 !leading-[16px]",
+                {
+                  "text-grey-300": t.disabled,
+                  "text-grey-500": !t.disabled
+                }
+              ])
+            }, M(e.subtitle), 3)) : C("", !0)
+          ]),
+          e.tooltip ? (p(), I(b(xe), {
+            key: 0,
+            class: y({
+              "self-center": t.variant === "horizontal",
+              "self-start": t.variant === "vertical",
+              "ml-8": t.variant === "vertical",
+              "ml-12": t.variant === "horizontal"
+            }),
+            disabled: t.disabled,
+            text: e.tooltip,
+            status: e.tooltipStatus || "neutral"
+          }, {
+            default: F(() => [
+              H(b(P), {
+                name: "circle-info",
+                variant: "far",
+                size: "md",
+                class: "text-semantic-info"
+              })
+            ]),
+            _: 1
+          }, 8, ["class", "disabled", "text", "status"])) : C("", !0)
+        ])
+      ], 10, Tt)
+    ]));
+  }
+}), Wt = /* @__PURE__ */ K(qt, [["__scopeId", "data-v-d850ec45"]]);
 export {
-  pe as FzCheckbox,
-  Tt as FzCheckboxGroup,
-  be as generateCheckboxId,
-  Fe as generateGroupId
+  ve as FzCheckbox,
+  Wt as FzCheckboxCard,
+  Ut as FzCheckboxGroup,
+  ie as generateCheckboxId,
+  Le as generateGroupId
 };