@fluidattacks/design 3.1.11 → 3.1.13

package/dist/components/colors/index.js

@@ -1 +1,224 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("styled-components"),a={typography:{type:{primary:"Roboto, sans-serif",poppins:"'Poppins', sans-serif",mono:"'Space Mono', monospace"},heading:{xxl:"64px",xl:"48px",lg:"32px",md:"24px",sm:"20px",xs:"16px"},text:{xl:"20px",lg:"18px",md:"16px",sm:"14px",xs:"12px"},weight:{bold:"700",semibold:"600",regular:"400"}},shadows:{none:"none",sm:"0px 1px 2px 0px rgba(16, 24, 40, 0.15)",md:"0px 4px 6px 0px rgba(16, 24, 40, 0.15)",lg:"0px 8px 24px 0px rgba(16, 24, 40, 0.15)"},breakpoints:{mobile:"480px",tablet:"960px",sm:"1024px",md:"1440px",lg:"1920px"},spacing:{0:"0rem",.125:"0.125rem",.188:"0.188rem",.25:"0.25rem",.5:"0.5rem",.625:"0.625rem",.75:"0.75rem",1:"1rem",1.25:"1.25rem",1.5:"1.5rem",1.75:"1.75rem",2:"2rem",2.25:"2.25rem",2.5:"2.5rem",3:"3rem",3.5:"3.5rem",4:"4rem",4.5:"4.5rem",5:"5rem",6:"6rem"},palette:{primary:{25:"#fef2f3",50:"#fddfe2",100:"#fbbac0",200:"#f9959e",300:"#f65e6a",400:"#f32637",500:"#bf0b1a",600:"#ac0a17",700:"#9a0915",800:"#870812",900:"#750710"},complementary:{25:"",50:"",100:"#ffe6ff",200:"",300:"#b8075d",400:"",500:"#7f0540",600:"",700:"#59042d",800:"",900:"#460323"},error:{25:"",50:"#fef3f2",100:"",200:"#fecdca",300:"",400:"",500:"#f04438",600:"",700:"#b42318",800:"",900:""},info:{25:"",50:"#eff8ff",100:"",200:"#b2ddff",300:"",400:"",500:"#2e90fa",600:"",700:"#175cd3",800:"",900:""},warning:{25:"",50:"#fffaeb",100:"",200:"#fef0c7",300:"",400:"#ffd562",500:"#fdb022",600:"#dc6803",700:"#b54708",800:"",900:""},success:{25:"",50:"#f6fef9",100:"",200:"#a6f4c5",300:"",400:"",500:"#12b76a",600:"",700:"#027a48",800:"",900:""},black:"#0c111d",white:"#ffffff",gray:{25:"#fcfcfd",50:"#f9fafb",100:"#f2f4f7",200:"#eaecf0",300:"#d0d5dd",400:"#98a2b3",500:"#667085",600:"#475467",700:"#2f394b",800:"#212a36",900:"#161b25"},gradients:{"01":"linear-gradient(45deg, #f32637 0%, #b8075d 100%)","02":"linear-gradient(45deg, #fcfcfd 0%, #667085 100%)"}}};exports.CustomThemeProvider=({children:f})=>e.jsx(r.ThemeProvider,{theme:a,children:f}),exports.icons=["lock-keyhole","bars-sort","bolt","books","brain-circuit","briefcase","bug","buildings","bullseye-pointer","calendar-clock","calendar-xmark","chart-network","clipboard-check","comment","envelope","eye","file","flag","globe","hand-holding-dollar","hands-clapping","headset","hexagon-exclamation","light-emergency-on","magnifying-glass","pen-line","plane-departure","screwdriver-wrench","sensor-triangle-exclamation","shield-check","sidebar","skull","sliders","star-christmas","telescope","trash","unlock","user-group","user-hoodie","xmark"],exports.theme=a,exports.uniqueIcons=[["fal","arrow-down"],["fal","arrow-left"],["fal","arrow-right"],["fal","arrow-up"],["fal","plus"],["fal","minus"],["fas","check"],["fas","circle-question"]];
+import { jsx as r } from "react/jsx-runtime";
+import { ThemeProvider as a } from "styled-components";
+const o = {
+  25: "#fcfcfd",
+  50: "#f9fafb",
+  100: "#f2f4f7",
+  200: "#eaecf0",
+  300: "#d0d5dd",
+  400: "#98a2b3",
+  500: "#667085",
+  600: "#475467",
+  700: "#2f394b",
+  800: "#212a36",
+  900: "#161b25"
+}, f = {
+  25: "#fef2f3",
+  50: "#fddfe2",
+  100: "#fbbac0",
+  200: "#f9959e",
+  300: "#f65e6a",
+  400: "#f32637",
+  500: "#bf0b1a",
+  // Brand color
+  600: "#ac0a17",
+  700: "#9a0915",
+  800: "#870812",
+  900: "#750710"
+}, s = {
+  25: "",
+  50: "",
+  100: "#ffe6ff",
+  200: "",
+  300: "#b8075d",
+  400: "",
+  500: "#7f0540",
+  600: "",
+  700: "#59042d",
+  800: "",
+  900: "#460323"
+}, n = {
+  25: "",
+  50: "#fef3f2",
+  100: "",
+  200: "#fecdca",
+  300: "",
+  400: "",
+  500: "#f04438",
+  600: "",
+  700: "#b42318",
+  800: "",
+  900: ""
+}, c = {
+  25: "",
+  50: "#fffaeb",
+  100: "",
+  200: "#fef0c7",
+  300: "",
+  400: "#ffd562",
+  500: "#fdb022",
+  600: "#dc6803",
+  700: "#b54708",
+  800: "",
+  900: ""
+}, p = {
+  25: "",
+  50: "#f6fef9",
+  100: "",
+  200: "#a6f4c5",
+  300: "",
+  400: "",
+  500: "#12b76a",
+  600: "",
+  700: "#027a48",
+  800: "",
+  900: ""
+}, l = {
+  25: "",
+  50: "#eff8ff",
+  100: "",
+  200: "#b2ddff",
+  300: "",
+  400: "",
+  500: "#2e90fa",
+  600: "",
+  700: "#175cd3",
+  800: "",
+  900: ""
+}, t = {
+  "01": "linear-gradient(45deg, #f32637 0%, #b8075d 100%)",
+  "02": "linear-gradient(45deg, #fcfcfd 0%, #667085 100%)"
+}, i = {
+  type: {
+    primary: "Roboto, sans-serif",
+    poppins: "'Poppins', sans-serif",
+    mono: "'Space Mono', monospace"
+  },
+  heading: {
+    xxl: "64px",
+    xl: "48px",
+    lg: "32px",
+    md: "24px",
+    sm: "20px",
+    xs: "16px"
+  },
+  text: {
+    xl: "20px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xs: "12px"
+  },
+  weight: {
+    bold: "700",
+    semibold: "600",
+    regular: "400"
+  }
+}, m = {
+  none: "none",
+  sm: "0px 1px 2px 0px rgba(16, 24, 40, 0.15)",
+  md: "0px 4px 6px 0px rgba(16, 24, 40, 0.15)",
+  lg: "0px 8px 24px 0px rgba(16, 24, 40, 0.15)"
+}, d = {
+  mobile: "480px",
+  tablet: "960px",
+  sm: "1024px",
+  md: "1440px",
+  lg: "1920px"
+}, x = {
+  0: "0rem",
+  0.125: "0.125rem",
+  0.188: "0.188rem",
+  0.25: "0.25rem",
+  0.5: "0.5rem",
+  0.625: "0.625rem",
+  0.75: "0.75rem",
+  1: "1rem",
+  1.25: "1.25rem",
+  1.5: "1.5rem",
+  1.75: "1.75rem",
+  2: "2rem",
+  2.25: "2.25rem",
+  2.5: "2.5rem",
+  3: "3rem",
+  3.5: "3.5rem",
+  4: "4rem",
+  4.5: "4.5rem",
+  5: "5rem",
+  6: "6rem"
+}, u = [
+  "lock-keyhole",
+  "bars-sort",
+  "bolt",
+  "books",
+  "brain-circuit",
+  "briefcase",
+  "bug",
+  "buildings",
+  "bullseye-pointer",
+  "calendar-clock",
+  "calendar-xmark",
+  "chart-network",
+  "clipboard-check",
+  "comment",
+  "envelope",
+  "eye",
+  "file",
+  "flag",
+  "globe",
+  "hand-holding-dollar",
+  "hands-clapping",
+  "headset",
+  "hexagon-exclamation",
+  "light-emergency-on",
+  "magnifying-glass",
+  "pen-line",
+  "plane-departure",
+  "screwdriver-wrench",
+  "sensor-triangle-exclamation",
+  "shield-check",
+  "sidebar",
+  "skull",
+  "sliders",
+  "star-christmas",
+  "telescope",
+  "trash",
+  "unlock",
+  "user-group",
+  "user-hoodie",
+  "xmark"
+], k = [
+  ["fal", "arrow-down"],
+  ["fal", "arrow-left"],
+  ["fal", "arrow-right"],
+  ["fal", "arrow-up"],
+  ["fal", "plus"],
+  ["fal", "minus"],
+  ["fas", "check"],
+  ["fas", "circle-question"]
+], b = {
+  typography: i,
+  shadows: m,
+  breakpoints: d,
+  spacing: x,
+  palette: {
+    primary: f,
+    complementary: s,
+    error: n,
+    info: l,
+    warning: c,
+    success: p,
+    black: "#0c111d",
+    white: "#ffffff",
+    gray: o,
+    gradients: t
+  }
+}, w = ({
+  children: e
+}) => /* @__PURE__ */ r(a, { theme: b, children: e });
+export {
+  w as CustomThemeProvider,
+  u as icons,
+  b as theme,
+  k as uniqueIcons
+};

package/dist/components/confirm-dialog/index.js

@@ -1 +1,46 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),r=require("../modal/index.js");require("lodash");const o=require("../../use-modal-_bYY6M_n.js"),i=require("../modal/modal-confirm/index.js");exports.useConfirmDialog=()=>{const[a,n]=l.useState(!1),[s,u]=l.useState(),d=l.useRef(null),t=o.useModal("confirm-dialog-modal"),c=l.useCallback((async e=>(u(e),n(!0),new Promise((e=>{d.current=e})))),[]),m=l.useCallback((()=>{var e;n(!1),u(void 0),null==(e=d.current)||e.call(d,!0)}),[]),f=l.useCallback((()=>{var e;n(!1),u(void 0),null==(e=d.current)||e.call(d,!1)}),[]);return l.useEffect((()=>{t.setIsOpen(a)}),[a,t]),{ConfirmDialog:({id:l="confirm-dialog-modal",children:o})=>e.jsxs(r.Modal,{id:l,modalRef:{...t,close:f},size:"sm",title:null==s?void 0:s.title,children:[o,null==s?void 0:s.message,e.jsx(i.ModalConfirm,{id:null==s?void 0:s.id,onCancel:f,onConfirm:m})]}),confirm:c}};
+import { jsxs as d, jsx as p } from "react/jsx-runtime";
+import { useState as f, useRef as C, useCallback as a, useEffect as D } from "react";
+import { Modal as h } from "../modal/index.js";
+import "lodash";
+import { u as x } from "../../use-modal-CtgexKnf.mjs";
+import { ModalConfirm as M } from "../modal/modal-confirm/index.js";
+const y = () => {
+  const [c, o] = f(!1), [e, r] = f(), t = C(null), s = x("confirm-dialog-modal"), l = a(
+    async (n) => (r(n), o(!0), new Promise((m) => {
+      t.current = m;
+    })),
+    []
+  ), u = a(() => {
+    var n;
+    o(!1), r(void 0), (n = t.current) == null || n.call(t, !0);
+  }, []), i = a(() => {
+    var n;
+    o(!1), r(void 0), (n = t.current) == null || n.call(t, !1);
+  }, []);
+  return D(() => {
+    s.setIsOpen(c);
+  }, [c, s]), { ConfirmDialog: ({ id: n = "confirm-dialog-modal", children: m }) => /* @__PURE__ */ d(
+    h,
+    {
+      id: n,
+      modalRef: { ...s, close: i },
+      size: "sm",
+      title: e == null ? void 0 : e.title,
+      children: [
+        m,
+        e == null ? void 0 : e.message,
+        /* @__PURE__ */ p(
+          M,
+          {
+            id: e == null ? void 0 : e.id,
+            onCancel: i,
+            onConfirm: u
+          }
+        )
+      ]
+    }
+  ), confirm: l };
+};
+export {
+  y as useConfirmDialog
+};

package/dist/components/container/index.js

@@ -1,3 +1,51 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("styled-components"),r=require("../../styles-C2CoGJl7.js"),s=t.styled(r.BaseComponent)`
-  ${({theme:e,$center:n=!1,$styleMd:t,$styleSm:r})=>`\n    ${n?"margin: auto;":""}\n    scrollbar-color: ${e.palette.gray[600]} ${e.palette.gray[100]};\n    scroll-padding: ${e.spacing[.5]};\n\n    @media screen\n      and (min-width: ${e.breakpoints.mobile})\n      and (max-width: ${e.breakpoints.tablet})\n    {\n      ${t};\n    }\n\n    @media screen and (max-width: ${e.breakpoints.mobile}) {\n      ${r};\n    }\n  `}
-`,a=n.forwardRef((function({as:n="div",center:t,children:r,id:a,onHover:o,onLeave:i,styleMd:l,styleSm:d,...c},m){return e.jsx(s,{$center:t,$styleMd:l,$styleSm:d,as:n,id:a,onMouseLeave:i,onMouseOver:o,ref:m,...c,children:r})}));exports.Container=a;
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { styled as c } from "styled-components";
+import { B as f } from "../../styles-CplEd2kw.mjs";
+const b = c(f)`
+  ${({ theme: o, $center: r = !1, $styleMd: a, $styleSm: n }) => `
+    ${r ? "margin: auto;" : ""}
+    scrollbar-color: ${o.palette.gray[600]} ${o.palette.gray[100]};
+    scroll-padding: ${o.spacing[0.5]};
+
+    @media screen
+      and (min-width: ${o.breakpoints.mobile})
+      and (max-width: ${o.breakpoints.tablet})
+    {
+      ${a};
+    }
+
+    @media screen and (max-width: ${o.breakpoints.mobile}) {
+      ${n};
+    }
+  `}
+`, x = $(function({
+  as: r = "div",
+  center: a,
+  children: n,
+  id: e,
+  onHover: t,
+  onLeave: i,
+  styleMd: s,
+  styleSm: d,
+  ...l
+}, m) {
+  return /* @__PURE__ */ p(
+    b,
+    {
+      $center: a,
+      $styleMd: s,
+      $styleSm: d,
+      as: r,
+      id: e,
+      onMouseLeave: i,
+      onMouseOver: t,
+      ref: m,
+      ...l,
+      children: n
+    }
+  );
+});
+export {
+  x as Container
+};

package/dist/components/content-card/category-tag/index.js

@@ -1 +1,42 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("styled-components"),i=require("../../container/index.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const r=require("../../typography/text/index.js");exports.CategoryTag=({tag:n,tagPosition:o})=>{const s=t.useTheme();return n?e.jsx(i.Container,{alignItems:"center",bgColor:s.palette.white,borderRadius:"8px",display:"flex",justify:"center",margin:"top"===o?[.75,.75,.75,.75]:void 0,padding:[.25,.5,.25,.5],position:"top"===o?"absolute":"relative",top:"0",width:"max-content",children:e.jsx(r.Text,{color:s.palette.gray[900],lineSpacing:1.5,lineSpacingSm:1.25,size:"md",sizeSm:"sm",textAlign:"center",children:n})}):null};
+import { jsx as i } from "react/jsx-runtime";
+import { useTheme as o } from "styled-components";
+import { Container as n } from "../../container/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as m } from "../../typography/text/index.js";
+const f = ({
+  tag: e,
+  tagPosition: t
+}) => {
+  const r = o();
+  return e ? /* @__PURE__ */ i(
+    n,
+    {
+      alignItems: "center",
+      bgColor: r.palette.white,
+      borderRadius: "8px",
+      display: "flex",
+      justify: "center",
+      margin: t === "top" ? [0.75, 0.75, 0.75, 0.75] : void 0,
+      padding: [0.25, 0.5, 0.25, 0.5],
+      position: t === "top" ? "absolute" : "relative",
+      top: "0",
+      width: "max-content",
+      children: /* @__PURE__ */ i(
+        m,
+        {
+          color: r.palette.gray[900],
+          lineSpacing: 1.5,
+          lineSpacingSm: 1.25,
+          size: "md",
+          sizeSm: "sm",
+          textAlign: "center",
+          children: e
+        }
+      )
+    }
+  ) : null;
+};
+export {
+  f as CategoryTag
+};

package/dist/components/content-card/event-date/index.js

@@ -1 +1,61 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lodash"),i=require("styled-components"),n=require("../../container/index.js"),r=require("../../typography/heading/index.js");require("../../typography/span/index.js");const s=require("../../typography/text/index.js");exports.EventDate=({eventDate:o})=>{const l=i.useTheme(),a=t.isEmpty(o)?null:null==o?void 0:o.split("-");if(a){const[t,i]=a;return e.jsxs(n.Container,{alignItems:"center",bgColor:l.palette.white,borderRadius:"8px",display:"flex",flexDirection:"column",margin:[.75,.75,.75,.75],padding:[.75,1.5,.75,1.5],position:"absolute",right:"0",shadow:"md",top:"0",children:[e.jsx(r.Heading,{fontWeight:"semibold",lineSpacingSm:1.25,size:"md",sizeSm:"sm",textAlign:"center",children:t}),e.jsx(s.Text,{color:l.palette.gray[800],fontWeight:"semibold",lineSpacing:1.5,lineSpacingSm:1.25,size:"md",sizeSm:"sm",textAlign:"center",children:i.toUpperCase()})]})}return null};
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { isEmpty as l } from "lodash";
+import { useTheme as s } from "styled-components";
+import { Container as p } from "../../container/index.js";
+import { Heading as d } from "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as c } from "../../typography/text/index.js";
+const b = ({
+  eventDate: i
+}) => {
+  const o = s(), t = l(i) ? null : i == null ? void 0 : i.split("-");
+  if (t) {
+    const [r, m] = t;
+    return /* @__PURE__ */ n(
+      p,
+      {
+        alignItems: "center",
+        bgColor: o.palette.white,
+        borderRadius: "8px",
+        display: "flex",
+        flexDirection: "column",
+        margin: [0.75, 0.75, 0.75, 0.75],
+        padding: [0.75, 1.5, 0.75, 1.5],
+        position: "absolute",
+        right: "0",
+        shadow: "md",
+        top: "0",
+        children: [
+          /* @__PURE__ */ e(
+            d,
+            {
+              fontWeight: "semibold",
+              lineSpacingSm: 1.25,
+              size: "md",
+              sizeSm: "sm",
+              textAlign: "center",
+              children: r
+            }
+          ),
+          /* @__PURE__ */ e(
+            c,
+            {
+              color: o.palette.gray[800],
+              fontWeight: "semibold",
+              lineSpacing: 1.5,
+              lineSpacingSm: 1.25,
+              size: "md",
+              sizeSm: "sm",
+              textAlign: "center",
+              children: m.toUpperCase()
+            }
+          )
+        ]
+      }
+    );
+  }
+  return null;
+};
+export {
+  b as EventDate
+};

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

@@ -1,3 +1,168 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("styled-components"),n=require("./category-tag/index.js"),i=require("./event-date/index.js"),r=require("../button/index.js"),a=require("../../index-TKLFHcRp.js"),s=require("../container/index.js"),o=require("../icon/index.js"),l=require("../typography/heading/index.js");require("../typography/span/index.js");const d=require("../typography/text/index.js"),c=t.div`
-  ${({theme:e})=>`\n    align-items: flex-start;\n    display: flex;\n    flex-direction: column;\n    gap: ${e.spacing[1.5]};\n    width: 384px;\n\n    img {\n      height: 100%;\n      width: 100%;\n    }\n\n    #card-image {\n      border-radius: ${e.spacing[1]};\n      height: 240px;\n      overflow: hidden;\n    }\n\n    &:hover {\n      img {\n        transform: scale(1.2);\n      }\n\n      > #card-content {\n        > .title-dark {\n          color: ${e.palette.gray[400]};\n        }\n        > .title-light {\n          background: ${e.palette.gradients["01"]};\n          background-clip: text;\n          -webkit-background-clip: text;\n          -webkit-text-fill-color: transparent;\n        }\n      }\n    }\n\n    @media screen and (max-width: ${e.breakpoints.mobile}) {\n      width: 320px;\n\n      #card-image {\n        height: 200px;\n      }\n    }\n  `}
-`;exports.ContentCard=({author:g,buttonText:x,description:p,eventDate:h,href:m,imageId:u,mode:j="light",publishDate:y,readingTime:f,tag:b,tagPosition:v="top",title:q})=>{const w=t.useTheme(),$=null==y?void 0:y.split("-"),z="dark"===j,T=e.jsxs(c,{"data-testid":`content-card-${q}`,children:[u||h||b&&"top"===v?e.jsxs(s.Container,{id:"card-image",position:"relative",children:[u&&e.jsx(a.MemoizedImage,{publicId:u}),"top"===v&&e.jsx(n.CategoryTag,{tag:b,tagPosition:v}),e.jsx(i.EventDate,{eventDate:h})]}):void 0,e.jsxs(s.Container,{alignItems:"flex-start",display:"flex",flexDirection:"column",gap:.5,id:"card-content",children:["bottom"===v&&e.jsx(n.CategoryTag,{tag:b,tagPosition:v}),g||$||f?e.jsxs(s.Container,{display:"flex",justify:"space-between",width:"100%",children:[g&&$&&e.jsx(d.Text,{color:w.palette.gray[z?300:400],fontWeight:"semibold",size:"sm",sizeSm:"xs",children:g+` • ${$[0]} ${$[1]}, ${$[2]}`}),f&&e.jsxs(s.Container,{alignItems:"center",display:"flex",gap:.25,justify:"center",minWidth:"60px",children:[e.jsx(o.Icon,{icon:"eye",iconColor:w.palette.gray[z?300:400],iconSize:"xs",iconType:"fa-light"}),e.jsx(d.Text,{color:w.palette.gray[z?300:400],size:"sm",sizeSm:"xs",textAlign:"right",children:f})]})]}):void 0,e.jsx(l.Heading,{className:`title-${j}`,color:z?w.palette.white:w.palette.gray[800],fontWeight:"semibold",size:"sm",sizeSm:"xs",children:q}),p&&e.jsx(d.Text,{color:w.palette.gray[z?100:600],size:"md",sizeSm:"sm",children:p}),x&&m&&e.jsx(r.Button,{href:m,variant:"link",children:x})]})]});return m?e.jsx("a",{className:"flex w-fit",href:m,rel:"noopener noreferrer",target:"_self",children:T}):T};
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import z, { useTheme as b } from "styled-components";
+import { CategoryTag as k } from "./category-tag/index.js";
+import { EventDate as u } from "./event-date/index.js";
+import { Button as C } from "../button/index.js";
+import { M as v } from "../../index-maWH3JYC.mjs";
+import { Container as c } from "../container/index.js";
+import { Icon as S } from "../icon/index.js";
+import { Heading as j } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as f } from "../typography/text/index.js";
+const I = z.div`
+  ${({ theme: t }) => `
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: ${t.spacing[1.5]};
+    width: 384px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+
+    #card-image {
+      border-radius: ${t.spacing[1]};
+      height: 240px;
+      overflow: hidden;
+    }
+
+    &:hover {
+      img {
+        transform: scale(1.2);
+      }
+
+      > #card-content {
+        > .title-dark {
+          color: ${t.palette.gray[400]};
+        }
+        > .title-light {
+          background: ${t.palette.gradients["01"]};
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
+
+    @media screen and (max-width: ${t.breakpoints.mobile}) {
+      width: 320px;
+
+      #card-image {
+        height: 200px;
+      }
+    }
+  `}
+`, G = ({
+  author: t,
+  buttonText: g,
+  description: x,
+  eventDate: h,
+  href: a,
+  imageId: d,
+  mode: y = "light",
+  publishDate: s,
+  readingTime: m,
+  tag: p,
+  tagPosition: r = "top",
+  title: w
+}) => {
+  const i = b(), o = s == null ? void 0 : s.split("-"), n = y === "dark", $ = /* @__PURE__ */ l(I, { "data-testid": `content-card-${w}`, children: [
+    d || h || p && r === "top" ? /* @__PURE__ */ l(c, { id: "card-image", position: "relative", children: [
+      d && /* @__PURE__ */ e(v, { publicId: d }),
+      r === "top" && /* @__PURE__ */ e(k, { tag: p, tagPosition: r }),
+      /* @__PURE__ */ e(u, { eventDate: h })
+    ] }) : void 0,
+    /* @__PURE__ */ l(
+      c,
+      {
+        alignItems: "flex-start",
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5,
+        id: "card-content",
+        children: [
+          r === "bottom" && /* @__PURE__ */ e(k, { tag: p, tagPosition: r }),
+          t || o || m ? /* @__PURE__ */ l(c, { display: "flex", justify: "space-between", width: "100%", children: [
+            t && o && /* @__PURE__ */ e(
+              f,
+              {
+                color: i.palette.gray[n ? 300 : 400],
+                fontWeight: "semibold",
+                size: "sm",
+                sizeSm: "xs",
+                children: t + ` • ${o[0]} ${o[1]}, ${o[2]}`
+              }
+            ),
+            m && /* @__PURE__ */ l(
+              c,
+              {
+                alignItems: "center",
+                display: "flex",
+                gap: 0.25,
+                justify: "center",
+                minWidth: "60px",
+                children: [
+                  /* @__PURE__ */ e(
+                    S,
+                    {
+                      icon: "eye",
+                      iconColor: i.palette.gray[n ? 300 : 400],
+                      iconSize: "xs",
+                      iconType: "fa-light"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    f,
+                    {
+                      color: i.palette.gray[n ? 300 : 400],
+                      size: "sm",
+                      sizeSm: "xs",
+                      textAlign: "right",
+                      children: m
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : void 0,
+          /* @__PURE__ */ e(
+            j,
+            {
+              className: `title-${y}`,
+              color: n ? i.palette.white : i.palette.gray[800],
+              fontWeight: "semibold",
+              size: "sm",
+              sizeSm: "xs",
+              children: w
+            }
+          ),
+          x && /* @__PURE__ */ e(
+            f,
+            {
+              color: i.palette.gray[n ? 100 : 600],
+              size: "md",
+              sizeSm: "sm",
+              children: x
+            }
+          ),
+          g && a && /* @__PURE__ */ e(C, { href: a, variant: "link", children: g })
+        ]
+      }
+    )
+  ] });
+  return a ? /* @__PURE__ */ e(
+    "a",
+    {
+      className: "flex w-fit",
+      href: a,
+      rel: "noopener noreferrer",
+      target: "_self",
+      children: $
+    }
+  ) : $;
+};
+export {
+  G as ContentCard
+};