@fiscozen/card 1.0.1 → 1.1.0

package/dist/card.js

@@ -0,0 +1,1120 @@
+import { defineComponent as E, computed as r, createBlock as d, openBlock as n, resolveDynamicComponent as T, normalizeClass as s, withCtx as F, renderSlot as g, ref as B, onMounted as R, onUnmounted as Q, useSlots as Y, watch as q, createElementBlock as b, createCommentVNode as p, withDirectives as N, createElementVNode as w, toDisplayString as G, unref as i, withModifiers as P, vShow as $, createVNode as U } from "vue";
+import { FzIconButton as k, FzButton as H } from "@fiscozen/button";
+const J = /* @__PURE__ */ E({
+  __name: "FzContainer",
+  props: {
+    main: { type: Boolean, default: !1 },
+    gap: { default: "base" },
+    tag: { default: "div" },
+    alignItems: { default: void 0 },
+    horizontal: { type: Boolean, default: !1 },
+    layout: {}
+  },
+  setup(e) {
+    const a = e, l = r(() => a.alignItems ?? (a.horizontal ? "center" : "stretch"));
+    if (!a.horizontal && "layout" in a) {
+      const o = a.layout;
+      o && o !== "default" && console.error(
+        `[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${a.horizontal}, layout: "${o}".`
+      );
+    }
+    const t = r(() => {
+      const o = a.main ? "main-content" : "section-content", y = [
+        a.horizontal ? "fz-container--horizontal" : "fz-container--vertical",
+        `gap-${o}-${a.gap}`,
+        `align-items-${l.value}`
+      ];
+      if (a.horizontal) {
+        const v = ("layout" in a ? a.layout : void 0) || "default";
+        y.push(`layout-${v}`);
+      }
+      return y;
+    });
+    return (o, c) => (n(), d(T(a.tag), {
+      class: s(["fz-container", t.value])
+    }, {
+      default: F(() => [
+        g(o.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), K = (e, a) => {
+  const l = e.__vccOpts || e;
+  for (const [t, o] of a)
+    l[t] = o;
+  return l;
+}, X = /* @__PURE__ */ K(J, [["__scopeId", "data-v-8c40daeb"]]);
+new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+function Z(e) {
+  const a = window.matchMedia(e), l = B(a.matches);
+  function t(o) {
+    l.value = o.matches;
+  }
+  return R(() => {
+    a.addEventListener("change", t);
+  }), Q(() => {
+    a.removeEventListener("change", t);
+  }), r(() => l.value);
+}
+const _ = {
+  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"
+    }
+  }
+}, z = {
+  global: _
+}, ee = [
+  "blue",
+  "purple",
+  "orange",
+  "pink",
+  "yellow",
+  "grey",
+  "core"
+], oe = {
+  safeColorNames: ee
+}, ae = [
+  "error",
+  "warning",
+  "success",
+  "info"
+], le = {
+  semanticColorNames: ae
+}, te = oe.safeColorNames, re = le.semanticColorNames, x = {};
+te.forEach((e) => {
+  const a = z.global[e];
+  a && Object.keys(a).forEach((l) => {
+    var o;
+    const t = (o = a[l]) == null ? void 0 : o.value;
+    t && (x[e] || (x[e] = {}), x[e][l] = t);
+  });
+});
+const O = z.global.semantic;
+O && re.forEach((e) => {
+  const a = O[e];
+  a && typeof a == "object" && Object.keys(a).forEach((l) => {
+    var o;
+    const t = (o = a[l]) == null ? void 0 : o.value;
+    if (t) {
+      const c = `semantic-${e}`;
+      x[c] || (x[c] = {}), x[c][l] = t;
+    }
+  });
+});
+const ne = Object.entries(z.global.breakpoint).reduce(
+  (e, [a, l]) => (e[a] = l.value, e),
+  {}
+), ce = ["title"], ie = { class: "flex flex-row gap-8 items-start" }, se = "border-1 border-solid rounded flex flex-col", pe = "border-solid pt-16 px-16 flex flex-row justify-between", ue = "border-solid pt-0 px-16 pb-16 flex gap-12 items-center", fe = /* @__PURE__ */ E({
+  __name: "FzCard",
+  props: {
+    title: {},
+    color: {},
+    primaryAction: {},
+    secondaryAction: {},
+    tertiaryAction: {},
+    contentClass: {},
+    collapsible: { type: Boolean },
+    defaultExpanded: { type: Boolean },
+    alwaysAlive: { type: Boolean },
+    hasInfoIcon: { type: Boolean },
+    environment: { default: "frontoffice" }
+  },
+  emits: ["fzprimary:click", "fzsecondary:click", "fztertiary:click", "fzcard:click-info"],
+  setup(e, { expose: a, emit: l }) {
+    const t = Z(`(max-width: ${ne.sm})`), o = e, c = l, y = Y(), v = B(o.defaultExpanded ?? !1);
+    q(
+      () => o.color === "aliceblue",
+      (f) => {
+        f && console.warn(
+          "[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now."
+        );
+      },
+      { immediate: !0 }
+    );
+    const C = r(() => o.color === "aliceblue" ? "blue" : o.color), m = r(() => v.value || !o.collapsible), S = r(() => o.alwaysAlive || m.value), I = r(
+      () => o.title || y.header || y["header-content"]
+    ), W = r(() => [
+      o.collapsible ? "cursor-pointer" : ""
+    ]), j = r(() => o.environment === "backoffice" ? "py-2" : "py-8"), M = r(() => {
+      switch (C.value) {
+        case "blue":
+          return "bg-background-alice-blue";
+        case "orange":
+          return "bg-background-seashell";
+        case "purple":
+          return "bg-background-pale-purple";
+        case "grey":
+          return "bg-background-white-smoke";
+        case "yellow":
+          return "bg-semantic-warning-50";
+        case "red":
+          return "bg-semantic-error-50";
+        default:
+          return "bg-core-white";
+      }
+    }), D = r(() => "text-core-black"), L = r(() => {
+      switch (C.value) {
+        case "blue":
+          return "border-background-alice-blue";
+        case "orange":
+          return "border-background-seashell";
+        case "purple":
+          return "border-background-pale-purple";
+        case "grey":
+          return "border-background-white-smoke";
+        case "yellow":
+          return "border-semantic-warning-50";
+        case "red":
+          return "border-semantic-error-50";
+        default:
+          return "border-grey-100";
+      }
+    }), V = r(
+      () => o.primaryAction !== void 0 || o.secondaryAction !== void 0 || o.tertiaryAction !== void 0
+    );
+    function A() {
+      o.collapsible && (v.value = !v.value);
+    }
+    return R(() => {
+      o.tertiaryAction && !o.secondaryAction && !o.primaryAction ? console.warn(
+        "[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction"
+      ) : o.secondaryAction && !o.primaryAction && console.warn(
+        "[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction"
+      );
+    }), a({
+      /**
+       * Method to toggle the card open/closed state
+       */
+      toggleOpen: A
+    }), (f, u) => (n(), b("section", {
+      class: s([
+        se,
+        M.value,
+        D.value,
+        L.value,
+        { "pb-16": !m.value }
+      ])
+    }, [
+      I.value ? (n(), b("header", {
+        key: 0,
+        class: s([W.value]),
+        onClick: A
+      }, [
+        w("div", {
+          class: s(pe)
+        }, [
+          w("div", {
+            class: s(["flex flex-row gap-12 items-start", j.value])
+          }, [
+            e.title ? (n(), b("h2", {
+              key: 0,
+              class: "text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink",
+              title: e.title
+            }, G(e.title), 9, ce)) : p("", !0),
+            g(f.$slots, "header")
+          ], 2),
+          w("div", ie, [
+            e.hasInfoIcon ? (n(), d(i(k), {
+              key: 0,
+              iconName: "circle-question",
+              variant: "invisible",
+              environment: e.environment,
+              onClick: u[0] || (u[0] = P((h) => c("fzcard:click-info"), ["stop"]))
+            }, null, 8, ["environment"])) : p("", !0),
+            e.collapsible ? (n(), d(i(k), {
+              key: 1,
+              iconName: v.value ? "chevron-up" : "chevron-down",
+              variant: "invisible",
+              environment: e.environment
+            }, null, 8, ["iconName", "environment"])) : p("", !0)
+          ])
+        ]),
+        g(f.$slots, "header-content")
+      ], 2)) : p("", !0),
+      S.value ? N((n(), b("article", {
+        key: 1,
+        class: s(["p-16", e.contentClass])
+      }, [
+        g(f.$slots, "default")
+      ], 2)), [
+        [$, m.value]
+      ]) : p("", !0),
+      (y.footer || V.value) && S.value ? N((n(), b("footer", {
+        key: 2,
+        class: s([ue, { "justify-end": !i(t) }])
+      }, [
+        g(f.$slots, "footer", {}, () => [
+          U(i(X), {
+            horizontal: "",
+            gap: "sm",
+            class: s({ "w-full": i(t) })
+          }, {
+            default: F(() => [
+              e.tertiaryAction ? (n(), d(i(k), {
+                key: 0,
+                onClick: u[1] || (u[1] = (h) => c("fztertiary:click")),
+                iconName: e.tertiaryAction.icon,
+                variant: "invisible",
+                environment: e.environment,
+                disabled: e.tertiaryAction.disabled
+              }, null, 8, ["iconName", "environment", "disabled"])) : p("", !0),
+              e.secondaryAction ? (n(), d(i(H), {
+                key: 1,
+                class: s({ "flex-grow": i(t) }),
+                onClick: u[2] || (u[2] = (h) => c("fzsecondary:click")),
+                label: e.secondaryAction.label,
+                variant: "secondary",
+                environment: e.environment,
+                disabled: e.secondaryAction.disabled
+              }, null, 8, ["class", "label", "environment", "disabled"])) : p("", !0),
+              e.primaryAction ? (n(), d(i(H), {
+                key: 2,
+                class: s({ "flex-grow": i(t) }),
+                onClick: u[3] || (u[3] = (h) => c("fzprimary:click")),
+                label: e.primaryAction.label,
+                variant: "primary",
+                environment: e.environment,
+                disabled: e.primaryAction.disabled
+              }, null, 8, ["class", "label", "environment", "disabled"])) : p("", !0)
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ])
+      ], 2)), [
+        [$, m.value]
+      ]) : p("", !0)
+    ], 2));
+  }
+});
+export {
+  fe as FzCard
+};