@fiscozen/composables 1.0.0 → 1.0.1

package/dist/composables.js

@@ -0,0 +1,1453 @@
+import { ref as g, reactive as Y, onUnmounted as Q, nextTick as J, onMounted as k, computed as F, watch as B, onBeforeUnmount as N, defineComponent as Z, useSlots as _, toRef as I, toRefs as ee, createElementBlock as j, openBlock as M, renderSlot as C, createElementVNode as V, withDirectives as T, createCommentVNode as U, createBlock as te, unref as P, normalizeClass as q, vShow as G, Teleport as oe } from "vue";
+const le = (e, t) => {
+  const o = Math.pow(10, t);
+  return Math.trunc(e * o) / o;
+}, ne = (e, {
+  minimumFractionDigits: t = 0,
+  maximumFractionDigits: o = 2,
+  roundDecimals: l = !0,
+  useGrouping: r = !0
+} = {}) => e == null || isNaN(e) || !isFinite(e) ? "" : (l ? e : le(e, o)).toLocaleString("it-IT", {
+  minimumFractionDigits: t,
+  maximumFractionDigits: o,
+  useGrouping: r
+}), re = (e) => {
+  if (!e || typeof e != "string")
+    return NaN;
+  let t = e.trim();
+  return t.includes(",") && (t = t.replace(/\./g, ""), t = t.replace(",", ".")), parseFloat(t);
+}, ze = (e, t) => {
+  let o = t;
+  const l = t % e, r = t >= 0 ? e : -e;
+  return l !== 0 && (o = Math.abs(l) >= e / 2 ? t + r - l : t - l), o;
+}, ke = (e, t, o) => Math.max(e, Math.min(t, o)), z = new DOMRect(0, 0, window.innerWidth, window.innerHeight), b = (e, t, o, l, r) => {
+  let n = r ? "bottom" : "right", p = r ? "bottom-start" : "right-start";
+  z.width = window.innerWidth, z.height = window.innerHeight, z.x = 0, z.y = 0;
+  const y = e ? e.getBoundingClientRect() : z, d = t.getBoundingClientRect(), v = o.getBoundingClientRect(), h = (v.left - y.left - d.width) / y.width, x = (y.right - v.right - d.width) / y.width, c = (v.top - y.top - d.height) / y.height, i = (y.bottom - v.bottom - d.height) / y.height;
+  let s = [
+    {
+      key: "right",
+      space: x
+    },
+    {
+      key: "top",
+      space: c
+    },
+    {
+      key: "bottom",
+      space: i
+    },
+    {
+      key: "left",
+      space: h
+    }
+  ].sort((u, f) => f.space - u.space);
+  if (r && (s = s.filter((u) => u.key === "top" || u.key === "bottom")), n = s[0].key, !l) {
+    const u = (d.height - v.height) / 2;
+    switch (n) {
+      case "right":
+      case "left":
+        y.top > v.top - u && (l = "end"), y.bottom < v.top - u && (l = "start");
+        break;
+    }
+  }
+  return p = l ? `${n}-${l}` : n, p;
+}, ae = (e, t, o, l) => ({
+  x: t.x + e.width * o / 100,
+  y: t.y + e.height * l / 100
+}), W = (e) => typeof e == "string" ? document.querySelector(e) : e, ie = (e) => ({
+  left: parseFloat(e.marginLeft),
+  right: parseFloat(e.marginRight),
+  top: parseFloat(e.marginTop),
+  bottom: parseFloat(e.marginBottom)
+}), se = {
+  // Bottom positions - content below opener
+  bottom: (e, t) => ({
+    position: {
+      x: e.left - t.left + e.width / 2,
+      y: e.bottom
+    },
+    transform: { x: -50, y: 0 }
+  }),
+  "bottom-start": (e, t) => ({
+    position: {
+      x: e.left - t.left,
+      y: e.bottom
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  "bottom-end": (e, t) => ({
+    position: {
+      x: e.right + t.right,
+      y: e.bottom
+    },
+    transform: { x: -100, y: 0 }
+  }),
+  // Top positions - content above opener
+  top: (e, t) => ({
+    position: {
+      x: e.left - t.left + e.width / 2,
+      y: e.top - t.bottom
+    },
+    transform: { x: -50, y: -100 }
+  }),
+  "top-start": (e, t) => ({
+    position: {
+      x: e.left - t.left,
+      y: e.top - t.bottom
+    },
+    transform: { x: 0, y: -100 }
+  }),
+  "top-end": (e, t) => ({
+    position: {
+      x: e.right + t.right,
+      y: e.top - t.bottom
+    },
+    transform: { x: -100, y: -100 }
+  }),
+  // Left positions - content to left of opener
+  left: (e, t) => ({
+    position: {
+      x: e.left - t.right,
+      y: e.top - t.top + e.height / 2
+    },
+    transform: { x: -100, y: -50 }
+  }),
+  "left-start": (e, t) => ({
+    position: {
+      x: e.left - t.right,
+      y: e.top - t.top
+    },
+    transform: { x: -100, y: 0 }
+  }),
+  "left-end": (e, t) => ({
+    position: {
+      x: e.left - t.right,
+      y: e.bottom + t.bottom
+    },
+    transform: { x: -100, y: -100 }
+  }),
+  // Right positions - content to right of opener
+  right: (e, t) => ({
+    position: {
+      x: e.right + t.left,
+      y: e.top - t.top + e.height / 2
+    },
+    transform: { x: 0, y: -50 }
+  }),
+  "right-start": (e, t) => ({
+    position: {
+      x: e.right + t.left,
+      y: e.top - t.top
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  "right-end": (e, t) => ({
+    position: {
+      x: e.right + t.left,
+      y: e.bottom + t.bottom
+    },
+    transform: { x: 0, y: -100 }
+  })
+}, pe = (e, t, o) => {
+  const l = se[e];
+  return l ? l(t, o) : { position: { x: 0, y: 0 }, transform: { x: 0, y: 0 } };
+}, ue = {
+  bottom: (e, t) => ({
+    position: {
+      x: e.left + e.width / 2,
+      y: e.bottom - t.height
+    },
+    transform: { x: -50, y: 0 }
+  }),
+  "bottom-start": (e, t) => ({
+    position: {
+      x: e.left,
+      y: e.bottom - t.height
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  "bottom-end": (e, t) => ({
+    position: {
+      x: e.right - t.width,
+      y: e.bottom - t.height
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  top: (e) => ({
+    position: {
+      x: e.left + e.width / 2,
+      y: e.top
+    },
+    transform: { x: -50, y: 0 }
+  }),
+  "top-start": (e) => ({
+    position: {
+      x: e.left,
+      y: e.top
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  "top-end": (e, t) => ({
+    position: {
+      x: e.right - t.width,
+      y: e.top
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  left: (e, t) => ({
+    position: {
+      x: e.left,
+      y: e.top + (e.height - t.height) / 2
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  "left-start": (e) => ({
+    position: {
+      x: e.left,
+      y: e.top
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  "left-end": (e, t) => ({
+    position: {
+      x: e.left,
+      y: e.bottom - t.height
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  right: (e, t) => ({
+    position: {
+      x: e.right - t.width,
+      y: e.top + (e.height - t.height) / 2
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  "right-start": (e, t) => ({
+    position: {
+      x: e.right - t.width,
+      y: e.top
+    },
+    transform: { x: 0, y: 0 }
+  }),
+  "right-end": (e, t) => ({
+    position: {
+      x: e.right - t.width,
+      y: e.bottom - t.height
+    },
+    transform: { x: 0, y: 0 }
+  })
+}, ce = (e, t, o) => {
+  const l = ue[e];
+  return l ? l(t, o) : { position: { x: 0, y: 0 }, transform: { x: 0, y: 0 } };
+}, fe = (e, t, o, l) => {
+  const r = { ...e }, n = { ...l };
+  if (e.x < o.left && (r.x = o.left, n.x = 0), e.x + t.width > o.right) {
+    const p = o.right - t.width;
+    p > 0 && (r.x = p), n.x = 0;
+  }
+  if (e.y < o.top && (r.y = o.top, n.y = 0), e.y + t.height > o.bottom) {
+    const p = o.bottom - t.height;
+    p > 0 && (r.y = p), n.y = 0;
+  }
+  return { position: r, transform: n };
+}, ye = (e, t, o, l, r) => {
+  const n = r ? null : t;
+  switch (e) {
+    case "auto":
+      return b(n, o, l);
+    case "auto-vertical":
+      return b(n, o, l, void 0, !0);
+    case "auto-start":
+      return b(n, o, l, "start");
+    case "auto-vertical-start":
+      return b(n, o, l, "start", !0);
+    case "auto-end":
+      return b(n, o, l, "end");
+    case "auto-vertical-end":
+      return b(n, o, l, "end", !0);
+    default:
+      return "bottom-start";
+  }
+}, ve = (e) => e.startsWith("auto"), de = (e) => {
+  const t = g("auto"), o = g(), l = g(), r = g(), n = g(), p = Y({ position: { x: 0, y: 0 } }), y = {
+    root: null,
+    rootMargin: "0px",
+    threshold: 1,
+    ...e.element.value.intersectionOptions
+  }, d = g(new IntersectionObserver(() => {
+  }, y)), v = () => {
+    var u, f;
+    const c = W(e.element.value.domRef.value);
+    if (!c)
+      return null;
+    const i = (u = e.container) != null && u.value ? W(e.container.value.domRef.value) ?? document.body : document.body, s = (f = e.opener) != null && f.value ? W(e.opener.value.domRef.value) : null;
+    return { element: c, container: i, opener: s };
+  }, h = (c) => {
+    var i;
+    return {
+      element: c.element.getBoundingClientRect(),
+      container: c.container.getBoundingClientRect(),
+      opener: ((i = c.opener) == null ? void 0 : i.getBoundingClientRect()) ?? null
+    };
+  }, x = (c = !1) => J(() => {
+    var O, R, L;
+    o.value = ((O = e.position) == null ? void 0 : O.value) ?? "auto";
+    const i = v();
+    if (!i) return;
+    Object.assign(i.element.style, {
+      position: "fixed",
+      top: "0px",
+      left: "0px"
+    });
+    const s = h(i);
+    l.value = s.element, r.value = s.opener ?? void 0, n.value = s.container, d.value.observe(i.element), d.value.observe(i.container), ve(o.value) && i.opener && (o.value = ye(
+      o.value,
+      i.container,
+      i.element,
+      i.opener,
+      ((R = e.useViewport) == null ? void 0 : R.value) ?? !1
+    ));
+    const u = ie(window.getComputedStyle(i.element)), f = i.opener && s.opener ? pe(o.value, s.opener, u) : ce(o.value, s.container, s.element), E = ae(
+      s.element,
+      f.position,
+      f.transform.x,
+      f.transform.y
+    ), S = fe(
+      E,
+      s.element,
+      s.container,
+      f.transform
+    );
+    p.position.x = S.position.x, p.position.y = S.position.y, Object.assign(i.element.style, {
+      top: `${p.position.y}px`,
+      left: `${p.position.x}px`,
+      position: "fixed",
+      display: "flex"
+    }), l.value = i.element.getBoundingClientRect(), (L = e.callback) != null && L.value && !c && e.callback.value(l, r, n, t, o);
+  });
+  return Q(() => {
+    d.value.disconnect();
+  }), {
+    float: p,
+    rect: l,
+    setPosition: x,
+    position: t,
+    actualPosition: o,
+    openerRect: r,
+    containerRect: n
+  };
+};
+function $(e) {
+  const t = window.matchMedia(e), o = g(t.matches);
+  function l(r) {
+    o.value = r.matches;
+  }
+  return k(() => {
+    t.addEventListener("change", l);
+  }), Q(() => {
+    t.removeEventListener("change", l);
+  }), F(() => o.value);
+}
+function Ee(e) {
+  return {
+    isGreater(t) {
+      return $(`(min-width: ${e[t]})`);
+    },
+    isSmaller(t) {
+      return $(`(max-width: ${e[t]})`);
+    },
+    isInBetween(t, o) {
+      return $(`(min-width: ${e[t]}) and (max-width: ${e[o]})`);
+    }
+  };
+}
+function Oe(e, t, o) {
+  if (!e)
+    throw new Error("A target component has to be provided.");
+  if (!t)
+    throw new Error("A callback has to be provided.");
+  const l = (r) => {
+    !e.value || r.target === e.value || r.composedPath().includes(e.value) || typeof t == "function" && t();
+  };
+  o && B(o, (r, n) => {
+    n && n.removeEventListener("click", l), r == null || r.addEventListener("click", l);
+  }), k(() => {
+    o || document.addEventListener("click", l);
+  }), N(() => {
+    var r;
+    if (o) {
+      (r = o.value) == null || r.removeEventListener("click", l);
+      return;
+    }
+    document.removeEventListener("click", l);
+  });
+}
+function Le(e, t) {
+  if (!e)
+    throw new Error("A target component has to be provided.");
+  if (!t || typeof t != "function")
+    throw new Error("A callback has to be provided.");
+  const o = (l) => {
+    t(l);
+  };
+  k(() => {
+    e.value.addEventListener("keydown", o);
+  }), N(() => {
+    e.value.removeEventListener("keydown", o);
+  });
+}
+function Be(e, t) {
+  if (!e || typeof e != "function")
+    throw new Error("A callback has to be provided.");
+  const o = (l) => {
+    e(l);
+  };
+  k(() => {
+    if (!t) {
+      document.addEventListener("keyup", o);
+      return;
+    }
+    t.value.addEventListener("keyup", o);
+  }), N(() => {
+    if (!t) {
+      document.removeEventListener("keyup", o);
+      return;
+    }
+    t.value.removeEventListener("keyup", o);
+  });
+}
+const $e = (e) => ({
+  format: ne,
+  parse: re
+}), xe = {
+  blue: {
+    50: {
+      value: "#eff1ff",
+      type: "color"
+    },
+    100: {
+      value: "#dee2ff",
+      type: "color"
+    },
+    200: {
+      value: "#bdc5ff",
+      type: "color"
+    },
+    300: {
+      value: "#9ca8ff",
+      type: "color"
+    },
+    400: {
+      value: "#7b8bff",
+      type: "color"
+    },
+    500: {
+      value: "#5a6eff",
+      type: "color"
+    },
+    600: {
+      value: "#4858cc",
+      type: "color"
+    },
+    700: {
+      value: "#364299",
+      type: "color"
+    },
+    800: {
+      value: "#242c66",
+      type: "color"
+    },
+    900: {
+      value: "#1b214c",
+      type: "color"
+    }
+  },
+  purple: {
+    50: {
+      value: "#f8f4ff",
+      type: "color"
+    },
+    100: {
+      value: "#f0e9ff",
+      type: "color"
+    },
+    200: {
+      value: "#e1d3ff",
+      type: "color"
+    },
+    300: {
+      value: "#d2bdff",
+      type: "color"
+    },
+    400: {
+      value: "#c3a7ff",
+      type: "color"
+    },
+    500: {
+      value: "#b491ff",
+      type: "color"
+    },
+    600: {
+      value: "#9074cc",
+      type: "color"
+    },
+    700: {
+      value: "#6c5799",
+      type: "color"
+    },
+    800: {
+      value: "#483a66",
+      type: "color"
+    },
+    900: {
+      value: "#241d33",
+      type: "color"
+    }
+  },
+  orange: {
+    50: {
+      value: "#fff2ef",
+      type: "color"
+    },
+    100: {
+      value: "#ffe4de",
+      type: "color"
+    },
+    200: {
+      value: "#ffc9bd",
+      type: "color"
+    },
+    300: {
+      value: "#ffae9c",
+      type: "color"
+    },
+    400: {
+      value: "#ff937b",
+      type: "color"
+    },
+    500: {
+      value: "#ff785a",
+      type: "color"
+    },
+    600: {
+      value: "#cc6048",
+      type: "color"
+    },
+    700: {
+      value: "#994836",
+      type: "color"
+    },
+    800: {
+      value: "#663024",
+      type: "color"
+    },
+    900: {
+      value: "#331812",
+      type: "color"
+    }
+  },
+  pink: {
+    50: {
+      value: "#fff5f5",
+      type: "color"
+    },
+    100: {
+      value: "#ffe0e0",
+      type: "color"
+    },
+    200: {
+      value: "#ffcbcb",
+      type: "color"
+    },
+    300: {
+      value: "#ffc0c0",
+      type: "color"
+    },
+    400: {
+      value: "#ffabab",
+      type: "color"
+    },
+    500: {
+      value: "#ff9696",
+      type: "color"
+    },
+    600: {
+      value: "#cc7878",
+      type: "color"
+    },
+    700: {
+      value: "#995a5a",
+      type: "color"
+    },
+    800: {
+      value: "#663c3c",
+      type: "color"
+    },
+    900: {
+      value: "#331e1e",
+      type: "color"
+    }
+  },
+  yellow: {
+    50: {
+      value: "#fffbf4",
+      type: "color"
+    },
+    100: {
+      value: "#fff3de",
+      type: "color"
+    },
+    200: {
+      value: "#ffebc8",
+      type: "color"
+    },
+    300: {
+      value: "#ffe7bd",
+      type: "color"
+    },
+    400: {
+      value: "#ffdfa7",
+      type: "color"
+    },
+    500: {
+      value: "#ffd791",
+      type: "color"
+    },
+    600: {
+      value: "#ccac74",
+      type: "color"
+    },
+    700: {
+      value: "#998157",
+      type: "color"
+    },
+    800: {
+      value: "#806c49",
+      type: "color"
+    },
+    900: {
+      value: "#4c402b",
+      type: "color"
+    }
+  },
+  semantic: {
+    error: {
+      50: {
+        value: "#fef3f3",
+        type: "color"
+      },
+      100: {
+        value: "#f8baba",
+        type: "color"
+      },
+      200: {
+        value: "#f04242",
+        type: "color"
+      },
+      300: {
+        value: "#aa2f2f",
+        type: "color"
+      }
+    },
+    warning: {
+      50: {
+        value: "#fff8f3",
+        type: "color"
+      },
+      100: {
+        value: "#ffdabd",
+        type: "color"
+      },
+      200: {
+        value: "#ffae4f",
+        type: "color"
+      },
+      300: {
+        value: "#b47b38",
+        type: "color"
+      }
+    },
+    success: {
+      50: {
+        value: "#f2f8f6",
+        type: "color"
+      },
+      100: {
+        value: "#b5d8ce",
+        type: "color"
+      },
+      200: {
+        value: "#0fa88c",
+        type: "color"
+      },
+      300: {
+        value: "#0b7763",
+        type: "color"
+      }
+    },
+    info: {
+      50: {
+        value: "#f3f7ff",
+        type: "color"
+      },
+      100: {
+        value: "#b4c8e1",
+        type: "color"
+      },
+      200: {
+        value: "#4e9fff",
+        type: "color"
+      },
+      300: {
+        value: "#3770b4",
+        type: "color"
+      }
+    }
+  },
+  background: {
+    "white-smoke": {
+      value: "#f7f6f3",
+      type: "color"
+    },
+    seashell: {
+      value: "#f8ece7",
+      type: "color"
+    },
+    "pale-purple": {
+      value: "#f2e6ff",
+      type: "color"
+    },
+    "alice-blue": {
+      value: "#ecf2fc",
+      type: "color"
+    }
+  },
+  grey: {
+    100: {
+      value: "#e9edf0",
+      type: "color"
+    },
+    200: {
+      value: "#d1dde6",
+      type: "color"
+    },
+    300: {
+      value: "#9da9b2",
+      type: "color"
+    },
+    400: {
+      value: "#6e777e",
+      type: "color"
+    },
+    500: {
+      value: "#596167",
+      type: "color"
+    }
+  },
+  core: {
+    white: {
+      value: "#ffffff",
+      type: "color"
+    },
+    black: {
+      value: "#2c282f",
+      type: "color"
+    }
+  },
+  "font-sans": {
+    "sharp-grotesk": {
+      value: '"Sharp Grotesk", sans-serif',
+      type: "fontFamilies"
+    },
+    inter: {
+      value: '"Inter", sans-serif',
+      type: "fontFamilies"
+    }
+  },
+  font: {
+    light: {
+      value: "300",
+      type: "fontWeights"
+    },
+    normal: {
+      value: "400",
+      type: "fontWeights"
+    },
+    medium: {
+      value: "500",
+      type: "fontWeights"
+    }
+  },
+  spacing: {
+    0: {
+      value: "0px",
+      type: "spacing"
+    },
+    1: {
+      value: "1px",
+      type: "spacing"
+    },
+    2: {
+      value: "2px",
+      type: "spacing"
+    },
+    4: {
+      value: "4px",
+      type: "spacing"
+    },
+    6: {
+      value: "6px",
+      type: "spacing"
+    },
+    8: {
+      value: "8px",
+      type: "spacing"
+    },
+    10: {
+      value: "10px",
+      type: "spacing"
+    },
+    12: {
+      value: "12px",
+      type: "spacing"
+    },
+    14: {
+      value: "14px",
+      type: "spacing"
+    },
+    16: {
+      value: "16px",
+      type: "spacing"
+    },
+    20: {
+      value: "20px",
+      type: "spacing"
+    },
+    24: {
+      value: "24px",
+      type: "spacing"
+    },
+    28: {
+      value: "28px",
+      type: "spacing"
+    },
+    32: {
+      value: "32px",
+      type: "spacing"
+    },
+    36: {
+      value: "36px",
+      type: "spacing"
+    },
+    40: {
+      value: "40px",
+      type: "spacing"
+    },
+    44: {
+      value: "44px",
+      type: "spacing"
+    },
+    48: {
+      value: "48px",
+      type: "spacing"
+    },
+    56: {
+      value: "56px",
+      type: "spacing"
+    },
+    64: {
+      value: "64px",
+      type: "spacing"
+    },
+    80: {
+      value: "80px",
+      type: "spacing"
+    },
+    96: {
+      value: "96px",
+      type: "spacing"
+    },
+    112: {
+      value: "112px",
+      type: "spacing"
+    },
+    128: {
+      value: "128px",
+      type: "spacing"
+    },
+    144: {
+      value: "144px",
+      type: "spacing"
+    },
+    160: {
+      value: "160px",
+      type: "spacing"
+    },
+    176: {
+      value: "176px",
+      type: "spacing"
+    },
+    192: {
+      value: "192px",
+      type: "spacing"
+    },
+    208: {
+      value: "208px",
+      type: "spacing"
+    },
+    224: {
+      value: "224px",
+      type: "spacing"
+    },
+    240: {
+      value: "240px",
+      type: "spacing"
+    },
+    256: {
+      value: "256px",
+      type: "spacing"
+    },
+    288: {
+      value: "288px",
+      type: "spacing"
+    },
+    320: {
+      value: "320px",
+      type: "spacing"
+    },
+    384: {
+      value: "384px",
+      type: "spacing"
+    }
+  },
+  border: {
+    0: {
+      value: "0px",
+      type: "borderWidth"
+    },
+    1: {
+      value: "1px",
+      type: "borderWidth"
+    },
+    2: {
+      value: "2px",
+      type: "borderWidth"
+    },
+    4: {
+      value: "4px",
+      type: "borderWidth"
+    },
+    8: {
+      value: "8px",
+      type: "borderWidth"
+    }
+  },
+  rounded: {
+    none: {
+      value: "0px",
+      type: "borderRadius"
+    },
+    sm: {
+      value: "2px",
+      type: "borderRadius"
+    },
+    base: {
+      value: "4px",
+      type: "borderRadius"
+    },
+    md: {
+      value: "6px",
+      type: "borderRadius"
+    },
+    lg: {
+      value: "8px",
+      type: "borderRadius"
+    },
+    xl: {
+      value: "12px",
+      type: "borderRadius"
+    },
+    "2xl": {
+      value: "16px",
+      type: "borderRadius"
+    },
+    "3xl": {
+      value: "24px",
+      type: "borderRadius"
+    },
+    full: {
+      value: "9999px",
+      type: "borderRadius"
+    }
+  },
+  breakpoint: {
+    xs: {
+      value: "376px",
+      type: "sizing"
+    },
+    sm: {
+      value: "640px",
+      type: "sizing"
+    },
+    md: {
+      value: "768px",
+      type: "sizing"
+    },
+    lg: {
+      value: "1024px",
+      type: "sizing"
+    },
+    xl: {
+      value: "1280px",
+      type: "sizing"
+    },
+    "2xl": {
+      value: "1440px",
+      type: "sizing"
+    },
+    "3xl": {
+      value: "1536px",
+      type: "sizing"
+    }
+  },
+  shadow: {
+    none: {
+      value: {
+        color: "#000000",
+        type: "dropShadow",
+        x: "0",
+        y: "0",
+        blur: "0",
+        spread: "0"
+      },
+      type: "boxShadow"
+    },
+    sm: {
+      value: {
+        color: "#0000000d",
+        type: "dropShadow",
+        x: "0",
+        y: "1",
+        blur: "2",
+        spread: "0"
+      },
+      type: "boxShadow"
+    },
+    base: {
+      value: [
+        {
+          color: "#0000000f",
+          type: "dropShadow",
+          x: "0",
+          y: "1",
+          blur: "2",
+          spread: "0"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "1",
+          blur: "3",
+          spread: "0"
+        }
+      ],
+      type: "boxShadow"
+    },
+    md: {
+      value: [
+        {
+          color: "#0000000f",
+          type: "dropShadow",
+          x: "0",
+          y: "2",
+          blur: "4",
+          spread: "-1"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "4",
+          blur: "6",
+          spread: "-1"
+        }
+      ],
+      type: "boxShadow"
+    },
+    lg: {
+      value: [
+        {
+          color: "#0000000d",
+          type: "dropShadow",
+          x: "0",
+          y: "4",
+          blur: "6",
+          spread: "-2"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "10",
+          blur: "15",
+          spread: "-3"
+        }
+      ],
+      type: "boxShadow"
+    },
+    xl: {
+      value: [
+        {
+          color: "#0000000a",
+          type: "dropShadow",
+          x: "0",
+          y: "10",
+          blur: "10",
+          spread: "-5"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "20",
+          blur: "25",
+          spread: "-5"
+        }
+      ],
+      type: "boxShadow"
+    },
+    "2xl": {
+      value: {
+        color: "#00000040",
+        type: "dropShadow",
+        x: "0",
+        y: "25",
+        blur: "50",
+        spread: "-12"
+      },
+      type: "boxShadow"
+    },
+    inner: {
+      value: {
+        color: "#0000000f",
+        type: "innerShadow",
+        x: "0",
+        y: "2",
+        blur: "4",
+        spread: "0"
+      },
+      type: "boxShadow"
+    }
+  },
+  underline: {
+    value: "underline",
+    type: "textDecoration"
+  },
+  text: {
+    xs: {
+      value: "12px",
+      type: "fontSizes"
+    },
+    sm: {
+      value: "14px",
+      type: "fontSizes"
+    },
+    base: {
+      value: "16px",
+      type: "fontSizes"
+    },
+    lg: {
+      value: "18px",
+      type: "fontSizes"
+    },
+    xl: {
+      value: "20px",
+      type: "fontSizes"
+    },
+    "2xl": {
+      value: "24px",
+      type: "fontSizes"
+    },
+    "3xl": {
+      value: "30px",
+      type: "fontSizes"
+    },
+    "4xl": {
+      value: "36px",
+      type: "fontSizes"
+    },
+    "5xl": {
+      value: "48px",
+      type: "fontSizes"
+    },
+    "6xl": {
+      value: "60px",
+      type: "fontSizes"
+    },
+    "7xl": {
+      value: "72px",
+      type: "fontSizes"
+    },
+    "8xl": {
+      value: "96px",
+      type: "fontSizes"
+    },
+    "9xl": {
+      value: "128px",
+      type: "fontSizes"
+    }
+  },
+  leading: {
+    xs: {
+      value: "16px",
+      type: "lineHeights"
+    },
+    sm: {
+      value: "18px",
+      type: "lineHeights"
+    },
+    base: {
+      value: "20px",
+      type: "lineHeights"
+    },
+    lg: {
+      value: "24px",
+      type: "lineHeights"
+    },
+    xl: {
+      value: "28px",
+      type: "lineHeights"
+    },
+    "2xl": {
+      value: "32px",
+      type: "lineHeights"
+    },
+    "3xl": {
+      value: "36px",
+      type: "lineHeights"
+    },
+    "4xl": {
+      value: "40px",
+      type: "lineHeights"
+    },
+    "5xl": {
+      value: "48px",
+      type: "lineHeights"
+    },
+    "6xl": {
+      value: "60px",
+      type: "lineHeights"
+    },
+    "7xl": {
+      value: "72px",
+      type: "lineHeights"
+    },
+    "8xl": {
+      value: "96px",
+      type: "lineHeights"
+    },
+    "9xl": {
+      value: "128px",
+      type: "lineHeights"
+    }
+  }
+}, H = {
+  global: xe
+}, he = [
+  "blue",
+  "purple",
+  "orange",
+  "pink",
+  "yellow",
+  "grey",
+  "core"
+], ge = {
+  safeColorNames: he
+}, me = [
+  "error",
+  "warning",
+  "success",
+  "info"
+], be = {
+  semanticColorNames: me
+}, we = ge.safeColorNames, Se = be.semanticColorNames, w = {};
+we.forEach((e) => {
+  const t = H.global[e];
+  t && Object.keys(t).forEach((o) => {
+    var r;
+    const l = (r = t[o]) == null ? void 0 : r.value;
+    l && (w[e] || (w[e] = {}), w[e][o] = l);
+  });
+});
+const K = H.global.semantic;
+K && Se.forEach((e) => {
+  const t = K[e];
+  t && typeof t == "object" && Object.keys(t).forEach((o) => {
+    var r;
+    const l = (r = t[o]) == null ? void 0 : r.value;
+    if (l) {
+      const n = `semantic-${e}`;
+      w[n] || (w[n] = {}), w[n][o] = l;
+    }
+  });
+});
+const Re = Object.entries(H.global.breakpoint).reduce(
+  (e, [t, o]) => (e[t] = o.value, e),
+  {}
+), Ne = /* @__PURE__ */ Z({
+  __name: "FzFloating",
+  props: {
+    isOpen: { type: Boolean, default: !1 },
+    position: { default: "auto" },
+    container: {},
+    contentClass: {},
+    openerClass: {},
+    overrideContentClass: { type: Boolean },
+    overrideOpener: {},
+    teleport: { type: Boolean, default: !1 },
+    useViewport: { type: Boolean }
+  },
+  emits: ["fzfloating:setPosition"],
+  setup(e, { expose: t, emit: o }) {
+    const l = e, r = o, n = g(null), p = g(null), y = _(), d = $(`(max-width: ${Re.xs})`);
+    let v = !1, h = !1, x = null, c = null;
+    const i = {
+      position: l.position,
+      element: {
+        // @ts-ignore
+        domRef: n
+      },
+      container: {
+        // @ts-ignore
+        domRef: I(l.container || document.body)
+      },
+      opener: {
+        domRef: I(null)
+      },
+      useViewport: l.useViewport,
+      callback(...a) {
+        r("fzfloating:setPosition", ...a);
+      }
+    }, s = ee(i);
+    y.opener && (i.opener = {
+      // @ts-ignore
+      domRef: p
+    });
+    const u = de(s), f = () => {
+      v || !h || (v = !0, requestAnimationFrame(() => {
+        h && l.isOpen && u.setPosition(), v = !1;
+      }));
+    };
+    k(() => {
+      h = !0;
+    });
+    const E = () => {
+      f();
+    }, S = () => {
+      f();
+    }, O = () => {
+      window.addEventListener("scroll", E, !0), window.addEventListener("resize", S), n.value && !x && (x = new ResizeObserver(() => {
+        f();
+      }), x.observe(n.value)), p.value && !c && (c = new ResizeObserver(() => {
+        f();
+      }), c.observe(p.value));
+    }, R = () => {
+      window.removeEventListener("scroll", E, !0), window.removeEventListener("resize", S), x && (x.disconnect(), x = null), c && (c.disconnect(), c = null);
+    };
+    B(
+      () => l.position,
+      () => f()
+    ), B(
+      () => l.isOpen,
+      (a) => {
+        var D;
+        if (!a || !n.value || !h) {
+          R();
+          return;
+        }
+        O();
+        const m = (D = p.value) == null ? void 0 : D.getBoundingClientRect();
+        n.value.style.position = "fixed", n.value.style.top = "0px", n.value.style.left = "0px", n.value.style.transform = "none", n.value.style.width = d.value ? (m == null ? void 0 : m.width) + "px" : "auto", u.setPosition();
+      }
+    ), B(
+      () => l.overrideOpener,
+      (a) => {
+        a && s.opener && s.opener.value && (s.opener.value = {
+          domRef: a
+        });
+      }
+    ), N(() => {
+      h = !1, R();
+    });
+    const L = (a) => a.startsWith("bottom") ? "mt-4" : a.startsWith("top") ? "mb-4" : a.startsWith("left") ? "mr-4" : a.startsWith("right") ? "ml-4" : "mt-4", X = F(() => {
+      var m;
+      const a = ((m = u.actualPosition) == null ? void 0 : m.value) ?? l.position;
+      return L(a);
+    }), A = F(() => l.overrideContentClass ? l.contentClass : ["bg-core-white fixed", X.value, l.contentClass]);
+    return t({
+      setPosition: u.setPosition
+    }), (a, m) => (M(), j("div", null, [
+      C(a.$slots, "opener-start"),
+      V("div", {
+        ref_key: "opener",
+        ref: p,
+        class: "inline-flex w-full sm:w-auto"
+      }, [
+        C(a.$slots, "opener", {
+          isOpen: e.isOpen,
+          floating: P(u)
+        })
+      ], 512),
+      C(a.$slots, "opener-end"),
+      e.teleport ? U("", !0) : T((M(), j("div", {
+        key: 0,
+        ref_key: "content",
+        ref: n,
+        class: q(["fz__floating__content w-full sm:w-auto", A.value])
+      }, [
+        C(a.$slots, "default", {
+          isOpen: e.isOpen,
+          floating: P(u)
+        })
+      ], 2)), [
+        [G, a.$slots.default && (!a.$slots.opener || a.$slots.opener && e.isOpen)]
+      ]),
+      e.teleport ? (M(), te(oe, {
+        key: 1,
+        to: "body"
+      }, [
+        T(V("div", {
+          ref_key: "content",
+          ref: n,
+          class: q(["fz__floating__content", A.value])
+        }, [
+          C(a.$slots, "default", {
+            isOpen: e.isOpen,
+            floating: P(u)
+          })
+        ], 2), [
+          [G, a.$slots.default && (!a.$slots.opener || a.$slots.opener && e.isOpen)]
+        ])
+      ])) : U("", !0)
+    ]));
+  }
+});
+export {
+  Ne as FzFloating,
+  ae as calcRealPos,
+  ke as clamp,
+  ne as format,
+  b as getHighestAvailableSpacePos,
+  re as parse,
+  ze as roundTo,
+  le as truncateDecimals,
+  Ee as useBreakpoints,
+  Oe as useClickOutside,
+  $e as useCurrency,
+  de as useFloating,
+  Le as useKeyDown,
+  Be as useKeyUp,
+  $ as useMediaQuery
+};