@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/@core/index.js

@@ -1,5 +1,5 @@
-import { v as e } from "../../utils-CQvBF-wY.mjs";
-import { a as o, B as n, c as i, b as r, k as p, h as d, j as B, i as m, f as g, e as C, s as f, g as x, d as l } from "../../styles-C3cZmKVJ.mjs";
+import { v as e } from "../../utils-V0EumEPM.mjs";
+import { a as o, B as n, c as i, b as r, k as p, h as d, j as B, i as m, f as g, e as C, s as f, g as x, d as l } from "../../styles-CplEd2kw.mjs";
 export {
   o as BaseButtonComponent,
   n as BaseComponent,

package/dist/components/accordion/accordion-content/index.js

@@ -1,9 +1,22 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { Container as t } from "../../container/index.js";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { Container as r } from "../../container/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
-import { Text as r } from "../../typography/text/index.js";
-const p = ({ item: i }) => o(t, { display: "block", id: `panel-${i.title}`, padding: [0.75, 0.75, 0.75, 0.75], children: [i.description ? e(r, { mb: i.extraElement ? 0.5 : void 0, size: "sm", children: i.description }) : void 0, i.extraElement ? e(t, { children: i.extraElement }) : void 0] });
+import { Text as o } from "../../typography/text/index.js";
+const s = ({
+  item: e
+}) => /* @__PURE__ */ i(
+  r,
+  {
+    display: "block",
+    id: `panel-${e.title}`,
+    padding: [0.75, 0.75, 0.75, 0.75],
+    children: [
+      e.description ? /* @__PURE__ */ n(o, { mb: e.extraElement ? 0.5 : void 0, size: "sm", children: e.description }) : void 0,
+      e.extraElement ? /* @__PURE__ */ n(r, { children: e.extraElement }) : void 0
+    ]
+  }
+);
 export {
-  p as AccordionContent
+  s as AccordionContent
 };

package/dist/components/accordion/index.js

@@ -1,21 +1,78 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as x, useState as c, useCallback as u } from "react";
-import { useTheme as y } from "styled-components";
-import { AccordionContent as C } from "./accordion-content/index.js";
-import { Container as i } from "../container/index.js";
-import { Icon as w } from "../icon/index.js";
+import { forwardRef as b, useState as m, useCallback as C } from "react";
+import { useTheme as w } from "styled-components";
+import { AccordionContent as x } from "./accordion-content/index.js";
+import { Container as n } from "../container/index.js";
+import { Icon as y } from "../icon/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as v } from "../typography/text/index.js";
-const I = x(function({ aligned: m = "end", items: l, bgColor: s }, f) {
-  const e = y(), [p, g] = c(!1), [a, h] = c(-1), b = u((o) => () => {
-    h(o), g(o !== a || ((t) => !t));
-  }, [a]);
-  return r(i, { ref: f, children: l.map((o, t) => {
-    const n = t === a && p;
-    return d(i, { bgColor: s ?? e.palette.white, children: [r(i, { "aria-controls": `panel-${o.title}`, "aria-expanded": p, "aria-label": o.title, as: "button", bgColor: s ?? e.palette.white, bgColorHover: e.palette.gray[100], borderBottom: n || t === l.length - 1 ? "1px solid" : void 0, borderColor: e.palette.gray[200], borderTop: "1px solid", cursor: "pointer", display: "flex", onClick: b(t), padding: [0.75, 0.75, 0.75, 0.75], width: "100%", children: d(i, { as: "summary", display: "flex", flexDirection: m === "end" ? "row" : "row-reverse", gap: 0.75, justify: "space-between", width: "100%", children: [r(v, { color: e.palette.gray[800], fontWeight: "bold", size: "sm", sizeSm: "sm", textAlign: "start", children: o.title }), r(w, { icon: n ? "chevron-up" : "chevron-down", iconColor: e.palette.gray[400], iconSize: "xs", iconType: "fa-light" })] }) }), n && r(C, { item: o })] }, o.title);
+import { Text as A } from "../typography/text/index.js";
+const H = b(function({ aligned: f = "end", items: a, bgColor: s }, h) {
+  const o = w(), [c, p] = m(!1), [i, u] = m(-1), g = C(
+    (e) => () => {
+      u(e), p(e === i ? (t) => !t : !0);
+    },
+    [i]
+  );
+  return /* @__PURE__ */ r(n, { ref: h, children: a.map((e, t) => {
+    const l = t === i && c;
+    return /* @__PURE__ */ d(n, { bgColor: s ?? o.palette.white, children: [
+      /* @__PURE__ */ r(
+        n,
+        {
+          "aria-controls": `panel-${e.title}`,
+          "aria-expanded": c,
+          "aria-label": e.title,
+          as: "button",
+          bgColor: s ?? o.palette.white,
+          bgColorHover: o.palette.gray[100],
+          borderBottom: l || t === a.length - 1 ? "1px solid" : void 0,
+          borderColor: o.palette.gray[200],
+          borderTop: "1px solid",
+          cursor: "pointer",
+          display: "flex",
+          onClick: g(t),
+          padding: [0.75, 0.75, 0.75, 0.75],
+          width: "100%",
+          children: /* @__PURE__ */ d(
+            n,
+            {
+              as: "summary",
+              display: "flex",
+              flexDirection: f === "end" ? "row" : "row-reverse",
+              gap: 0.75,
+              justify: "space-between",
+              width: "100%",
+              children: [
+                /* @__PURE__ */ r(
+                  A,
+                  {
+                    color: o.palette.gray[800],
+                    fontWeight: "bold",
+                    size: "sm",
+                    sizeSm: "sm",
+                    textAlign: "start",
+                    children: e.title
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  y,
+                  {
+                    icon: l ? "chevron-up" : "chevron-down",
+                    iconColor: o.palette.gray[400],
+                    iconSize: "xs",
+                    iconType: "fa-light"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      l && /* @__PURE__ */ r(x, { item: e })
+    ] }, e.title);
   }) });
 });
 export {
-  I as Accordion
+  H as Accordion
 };

package/dist/components/alert/index.js

@@ -1,113 +1,164 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as m, useState as k, useCallback as w, useEffect as s } from "react";
+import { jsx as t, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as w, useState as y, useCallback as v, useEffect as s } from "react";
 import { styled as p } from "styled-components";
-import { v as x } from "../../utils-CQvBF-wY.mjs";
-import { Container as y } from "../container/index.js";
-import { Icon as v } from "../icon/index.js";
-import { IconButton as T } from "../icon-button/index.js";
-const z = (e) => {
-  switch (e) {
+import { v as C } from "../../utils-V0EumEPM.mjs";
+import { Container as T } from "../container/index.js";
+import { Icon as B } from "../icon/index.js";
+import { IconButton as S } from "../icon-button/index.js";
+const z = (o) => {
+  switch (o) {
     case "warning":
       return "triangle-exclamation";
     case "info":
       return "circle-info";
     case "success":
       return "circle-check";
+    case "error":
     default:
       return "circle-exclamation";
   }
-}, { getVariant: C } = x((e) => ({ error: `
-      background: ${e.palette.error[50]};
-      border: 1px solid ${e.palette.error[500]};
-      color: ${e.palette.error[700]};
+}, { getVariant: A } = C(
+  (o) => ({
+    error: `
+      background: ${o.palette.error[50]};
+      border: 1px solid ${o.palette.error[500]};
+      color: ${o.palette.error[700]};
 
       button {
-        color: ${e.palette.error[700]};
+        color: ${o.palette.error[700]};
 
         &:hover:not([disabled]) {
-          background-color: ${e.palette.error[200]};
-          color: ${e.palette.error[700]};
+          background-color: ${o.palette.error[200]};
+          color: ${o.palette.error[700]};
         }
       }
-    `, info: `
-      background: ${e.palette.info[50]};
-      border: 1px solid ${e.palette.info[500]};
-      color: ${e.palette.info[700]};
+    `,
+    info: `
+      background: ${o.palette.info[50]};
+      border: 1px solid ${o.palette.info[500]};
+      color: ${o.palette.info[700]};
 
       button {
-        color: ${e.palette.info[700]};
+        color: ${o.palette.info[700]};
 
         &:hover:not([disabled]) {
-          background-color: ${e.palette.info[200]};
-          color: ${e.palette.info[700]};
+          background-color: ${o.palette.info[200]};
+          color: ${o.palette.info[700]};
         }
       }
-    `, success: `
-      background: ${e.palette.success[50]};
-      border: 1px solid ${e.palette.success[500]};
-      color: ${e.palette.success[700]};
+    `,
+    success: `
+      background: ${o.palette.success[50]};
+      border: 1px solid ${o.palette.success[500]};
+      color: ${o.palette.success[700]};
 
       button {
-        color: ${e.palette.success[700]};
+        color: ${o.palette.success[700]};
 
         &:hover:not([disabled]) {
-          background-color: ${e.palette.success[200]};
-          color: ${e.palette.success[700]};
+          background-color: ${o.palette.success[200]};
+          color: ${o.palette.success[700]};
         }
       }
-    `, warning: `
-      background: ${e.palette.warning[50]};
-      border: 1px solid ${e.palette.warning[500]};
-      color: ${e.palette.warning[700]};
+    `,
+    warning: `
+      background: ${o.palette.warning[50]};
+      border: 1px solid ${o.palette.warning[500]};
+      color: ${o.palette.warning[700]};
 
       button {
-        color: ${e.palette.warning[700]};
+        color: ${o.palette.warning[700]};
 
         &:hover:not([disabled]) {
-          background-color: ${e.palette.warning[200]};
-          color: ${e.palette.warning[700]};
+          background-color: ${o.palette.warning[200]};
+          color: ${o.palette.warning[700]};
         }
       }
-    ` })), S = p.div`
-  ${({ theme: e, $variant: t }) => `
+    `
+  })
+), I = p.div`
+  ${({ theme: o, $variant: r }) => `
     background: transparent;
     align-items: center;
-    border-radius: ${e.spacing[0.25]};
+    border-radius: ${o.spacing[0.25]};
     display: inline-flex;
-    font-family: ${e.typography.type.primary};
-    font-size: ${e.typography.text.sm};
-    font-weight: ${e.typography.weight.bold};
-    line-height: ${e.spacing[1.25]};
+    font-family: ${o.typography.type.primary};
+    font-size: ${o.typography.text.sm};
+    font-weight: ${o.typography.weight.bold};
+    line-height: ${o.spacing[1.25]};
     min-width: 250px;
     width: 100%;
-    padding: ${e.spacing[0.75]};
+    padding: ${o.spacing[0.75]};
     position: relative;
-    gap: ${e.spacing[0.75]};
+    gap: ${o.spacing[0.75]};
 
     button {
       background-color: transparent;
     }
 
-    ${C(e, t ?? "error")}
+    ${A(o, r ?? "error")}
   `}
 `, j = p.div`
   padding-right: 4px;
   width: 100%;
-`, V = m(function({ autoHide: e = !1, children: t, closable: d = !1, onTimeOut: n, show: r = !0, time: c = 8, variant: l = "error", id: u, ...$ }, g) {
-  const [f, a] = k(r), i = w(() => {
-    a(!1);
+`, F = w(function({
+  autoHide: r = !1,
+  children: d,
+  closable: u = !1,
+  onTimeOut: n,
+  show: a = !0,
+  time: i = 8,
+  variant: l = "error",
+  id: g,
+  ...f
+}, $) {
+  const [b, e] = y(a), c = v(() => {
+    e(!1);
   }, []);
   return s(() => {
-    const b = setTimeout(() => {
-      n == null || n(!0), e && i();
-    }, 1e3 * c);
+    const x = setTimeout(() => {
+      n == null || n(!0), r && c();
+    }, i * 1e3);
     return () => {
-      clearTimeout(b);
+      clearTimeout(x);
     };
-  }, [e, i, c, n]), s(() => {
-    a(r);
-  }, [r, a]), o(y, { display: f ? "block" : "none", ref: g, role: "alert", ...$, children: h(S, { $variant: l, id: u, children: [o(v, { clickable: !1, icon: z(l), iconSize: "xs", iconType: "fa-light" }), o(j, { children: t }), d ? o(T, { height: "fit-content", icon: "close", iconSize: "xs", iconType: "fa-light", onClick: i, px: 0.125, py: 0.125, variant: "ghost" }) : void 0] }) });
+  }, [r, c, i, n]), s(() => {
+    e(a);
+  }, [a, e]), /* @__PURE__ */ t(
+    T,
+    {
+      display: b ? "block" : "none",
+      ref: $,
+      role: "alert",
+      ...f,
+      children: /* @__PURE__ */ k(I, { $variant: l, id: g, children: [
+        /* @__PURE__ */ t(
+          B,
+          {
+            clickable: !1,
+            icon: z(l),
+            iconSize: "xs",
+            iconType: "fa-light"
+          }
+        ),
+        /* @__PURE__ */ t(j, { children: d }),
+        u ? /* @__PURE__ */ t(
+          S,
+          {
+            height: "fit-content",
+            icon: "close",
+            iconSize: "xs",
+            iconType: "fa-light",
+            onClick: c,
+            px: 0.125,
+            py: 0.125,
+            variant: "ghost"
+          }
+        ) : void 0
+      ] })
+    }
+  );
 });
 export {
-  V as Alert
+  F as Alert
 };

package/dist/components/button/index.js

@@ -1,17 +1,68 @@
-import { jsx as e, jsxs as z } from "react/jsx-runtime";
-import { forwardRef as C, useCallback as $ } from "react";
-import { S as j } from "../../styles-EIbGRPlk.mjs";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as j, useCallback as B } from "react";
+import { S as C } from "../../styles-B2N0JLw1.mjs";
 import { Icon as p } from "../icon/index.js";
-import { T as A } from "../../index-D-lcuEHY.mjs";
-import { isObject as B } from "lodash";
-const q = C(function({ children: m, disabled: r = !1, external: n = !1, href: o, id: a, icon: t, name: f, onClick: u, showArrow: b = !1, type: h = "button", tooltip: l, tooltipPlace: v = "bottom", underline: w = !1, value: k, variant: i = "primary", ...x }, y) {
-  const s = l !== void 0, d = `${a}-tooltip`, S = $(() => {
-    o && ((T, g = !0) => {
-      const c = window.open(T, g ? void 0 : "_self", "noopener,noreferrer,");
-      B(c) && (c.opener = null);
-    })(o, n);
-  }, [n, o]);
-  return e(A, { disabled: !s, id: d, place: v, tip: l, children: z(j, { $variant: i, "aria-disabled": r, className: w ? "underline" : void 0, disabled: r, id: a, name: f, onClick: i === "link" ? S : u, ref: y, type: h, value: k, ...s ? { "data-tooltip-id": d } : {}, ...x, children: [t !== void 0 && e(p, { icon: t, iconSize: "xs", iconType: "fa-light" }), m, (b || i === "link") && e(p, { icon: "arrow-right", iconSize: "xs", iconType: "fa-light" })] }) });
+import { T as z } from "../../index-DwznImvK.mjs";
+import { isObject as I } from "lodash";
+const $ = (r, n = !0) => {
+  const o = window.open(
+    r,
+    n ? void 0 : "_self",
+    "noopener,noreferrer,"
+  );
+  I(o) && (o.opener = null);
+}, q = j(function({
+  children: n,
+  disabled: o = !1,
+  external: l = !1,
+  href: i,
+  id: s,
+  icon: a,
+  name: m,
+  onClick: u,
+  showArrow: b = !1,
+  type: k = "button",
+  tooltip: f,
+  tooltipPlace: T = "bottom",
+  underline: h = !1,
+  value: w,
+  variant: e = "primary",
+  ...x
+}, y) {
+  const c = f !== void 0, d = `${s}-tooltip`, S = B(() => {
+    i && $(i, l);
+  }, [l, i]);
+  return /* @__PURE__ */ t(
+    z,
+    {
+      disabled: !c,
+      id: d,
+      place: T,
+      tip: f,
+      children: /* @__PURE__ */ g(
+        C,
+        {
+          $variant: e,
+          "aria-disabled": o,
+          className: h ? "underline" : void 0,
+          disabled: o,
+          id: s,
+          name: m,
+          onClick: e === "link" ? S : u,
+          ref: y,
+          type: k,
+          value: w,
+          ...c ? { "data-tooltip-id": d } : {},
+          ...x,
+          children: [
+            a !== void 0 && /* @__PURE__ */ t(p, { icon: a, iconSize: "xs", iconType: "fa-light" }),
+            n,
+            (b || e === "link") && /* @__PURE__ */ t(p, { icon: "arrow-right", iconSize: "xs", iconType: "fa-light" })
+          ]
+        }
+      )
+    }
+  );
 });
 export {
   q as Button

package/dist/components/card/card-header/index.js

@@ -1,14 +1,83 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useTheme as h } from "styled-components";
-import { Container as m } from "../../container/index.js";
-import { T as x } from "../../../index-D-lcuEHY.mjs";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useTheme as b } from "styled-components";
+import { Container as s } from "../../container/index.js";
+import { T as g } from "../../../index-DwznImvK.mjs";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
-import { Text as o } from "../../typography/text/index.js";
-const B = ({ authorEmail: a, date: n, description: i, descriptionColor: p, id: c, title: l, titleColor: g, textAlign: r, textSpacing: f = 0, tooltip: s }) => {
-  const e = h();
-  return d(m, { width: "100%", children: [typeof l == "string" ? t(o, { color: g ?? e.palette.gray[800], fontWeight: "bold", mb: f, size: "sm", textAlign: r, wordBreak: "break-word", children: l }) : l, d(m, { alignItems: "start", display: "flex", flexDirection: "column", gap: 0.25, children: [i && t(o, { color: p ?? e.palette.gray[800], fontWeight: i === void 0 ? "bold" : "regular", size: "sm", textAlign: r, wordBreak: "break-word", children: i }), n && t(o, { color: e.palette.gray[800], fontWeight: "bold", size: "sm", textAlign: r, wordBreak: "break-word", children: `Date: ${n.split(" ")[0]}` }), a && t(o, { color: e.palette.gray[800], fontWeight: "bold", size: "sm", textAlign: r, wordBreak: "break-word", children: `$Author: ${a}` }), s && t(x, { icon: "circle-info", id: c, tip: s })] })] });
+import { Text as t } from "../../typography/text/index.js";
+const W = ({
+  authorEmail: d,
+  date: l,
+  description: i,
+  descriptionColor: c,
+  id: p,
+  title: a,
+  titleColor: f,
+  textAlign: e,
+  textSpacing: h = 0,
+  tooltip: m
+}) => {
+  const o = b();
+  return /* @__PURE__ */ n(s, { width: "100%", children: [
+    typeof a == "string" ? /* @__PURE__ */ r(
+      t,
+      {
+        color: f ?? o.palette.gray[800],
+        fontWeight: "bold",
+        mb: h,
+        size: "sm",
+        textAlign: e,
+        wordBreak: "break-word",
+        children: a
+      }
+    ) : a,
+    /* @__PURE__ */ n(
+      s,
+      {
+        alignItems: "start",
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.25,
+        children: [
+          i && /* @__PURE__ */ r(
+            t,
+            {
+              color: c ?? o.palette.gray[800],
+              fontWeight: i === void 0 ? "bold" : "regular",
+              size: "sm",
+              textAlign: e,
+              wordBreak: "break-word",
+              children: i
+            }
+          ),
+          l && /* @__PURE__ */ r(
+            t,
+            {
+              color: o.palette.gray[800],
+              fontWeight: "bold",
+              size: "sm",
+              textAlign: e,
+              wordBreak: "break-word",
+              children: `Date: ${l.split(" ")[0]}`
+            }
+          ),
+          d && /* @__PURE__ */ r(
+            t,
+            {
+              color: o.palette.gray[800],
+              fontWeight: "bold",
+              size: "sm",
+              textAlign: e,
+              wordBreak: "break-word",
+              children: `$Author: ${d}`
+            }
+          ),
+          m && /* @__PURE__ */ r(g, { icon: "circle-info", id: p, tip: m })
+        ]
+      }
+    )
+  ] });
 };
 export {
-  B as CardHeader
+  W as CardHeader
 };

package/dist/components/card/card-with-image/index.js

@@ -1,18 +1,93 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import v, { useState as w, useCallback as s } from "react";
-import { useTheme as k } from "styled-components";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import C, { useState as w, useCallback as s } from "react";
+import { useTheme as H } from "styled-components";
 import { CardHeader as j } from "../card-header/index.js";
-import { Container as e } from "../../container/index.js";
-import { FilePreview as z } from "../../file-preview/index.js";
-import { IconButton as E } from "../../icon-button/index.js";
-const L = ({ alt: r, authorEmail: l, date: d, description: c, src: p, children: o, isEditing: m, onClick: h, title: u, hideDescription: x = !1, headerType: f = "image", showMaximize: g = !0 }) => {
-  const t = k(), [C, a] = w(!1), y = s(() => {
-    a(!0);
-  }, []), b = s(() => {
-    a(!1);
+import { Container as r } from "../../container/index.js";
+import { FilePreview as I } from "../../file-preview/index.js";
+import { IconButton as T } from "../../icon-button/index.js";
+const D = ({
+  alt: o,
+  authorEmail: d,
+  date: l,
+  description: p,
+  src: c,
+  children: i,
+  isEditing: m,
+  onClick: f,
+  title: u,
+  hideDescription: h = !1,
+  headerType: x = "image",
+  showMaximize: g = !0
+}) => {
+  const t = H(), [b, n] = w(!1), v = s(() => {
+    n(!0);
+  }, []), y = s(() => {
+    n(!1);
   }, []);
-  return n(e, { bgColor: "transparent", border: "1px solid transparent", borderColorHover: "black", borderRadius: t.spacing[0.25], display: "flex", flexDirection: "column", gap: 1, onHover: y, onLeave: b, padding: [0.5, 0.5, 0.5, 0.5], width: "100%", children: [i(e, { cursor: m ? "unset" : "pointer", display: "inline-flex", justify: "center", onClick: h, position: "relative", width: "100%", children: o === void 0 ? n(v.Fragment, { children: [i(z, { alt: r, fileType: f, height: "147px", opacity: C ? 0.3 : 0, src: p, width: "100%" }), g ? i(e, { bottom: "10px", position: "absolute", right: "10px", children: i(E, { color: "white", icon: "arrows-maximize", iconSize: "xxs", iconType: "fa-light", variant: "secondary" }) }) : void 0] }) : o }), x ? null : i(j, { authorEmail: l, date: d, description: c, descriptionColor: t.palette.gray[600], id: `${r}-card-header`, title: u })] });
+  return /* @__PURE__ */ a(
+    r,
+    {
+      bgColor: "transparent",
+      border: "1px solid transparent",
+      borderColorHover: "black",
+      borderRadius: t.spacing[0.25],
+      display: "flex",
+      flexDirection: "column",
+      gap: 1,
+      onHover: v,
+      onLeave: y,
+      padding: [0.5, 0.5, 0.5, 0.5],
+      width: "100%",
+      children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            cursor: m ? "unset" : "pointer",
+            display: "inline-flex",
+            justify: "center",
+            onClick: f,
+            position: "relative",
+            width: "100%",
+            children: i === void 0 ? /* @__PURE__ */ a(C.Fragment, { children: [
+              /* @__PURE__ */ e(
+                I,
+                {
+                  alt: o,
+                  fileType: x,
+                  height: "147px",
+                  opacity: b ? 0.3 : 0,
+                  src: c,
+                  width: "100%"
+                }
+              ),
+              g ? /* @__PURE__ */ e(r, { bottom: "10px", position: "absolute", right: "10px", children: /* @__PURE__ */ e(
+                T,
+                {
+                  color: "white",
+                  icon: "arrows-maximize",
+                  iconSize: "xxs",
+                  iconType: "fa-light",
+                  variant: "secondary"
+                }
+              ) }) : void 0
+            ] }) : i
+          }
+        ),
+        h ? null : /* @__PURE__ */ e(
+          j,
+          {
+            authorEmail: d,
+            date: l,
+            description: p,
+            descriptionColor: t.palette.gray[600],
+            id: `${o}-card-header`,
+            title: u
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  L as CardWithImage
+  D as CardWithImage
 };