@fiscozen/card 1.0.0 → 1.0.2

package/dist/card.js

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