@ttoss/components 2.7.11 → 2.8.0

package/dist/esm/NotificationCard/index.js

@@ -1,5 +1,156 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { NotificationCard } from "../chunk-4GBVRL7E.js";
-import "../chunk-2R7AUPJL.js";
-import "../chunk-V4MHYKRI.js";
+import { Icon } from "../chunk-2R7AUPJL.js";
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/NotificationCard/NotificationCard.tsx
+import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
+import * as React from "react";
+var NotificationCard = /* @__PURE__ */__name(props => {
+  const sxMap = {
+    success: {
+      card: {
+        backgroundColor: "feedback.background.positive.default",
+        borderColor: "feedback.border.positive.default"
+      }
+    },
+    error: {
+      card: {
+        backgroundColor: "feedback.background.negative.default",
+        borderColor: "feedback.border.negative.default"
+      }
+    },
+    warning: {
+      card: {
+        backgroundColor: "feedback.background.caution.default",
+        borderColor: "feedback.border.caution.default"
+      }
+    },
+    info: {
+      card: {
+        backgroundColor: "feedback.background.primary.default",
+        borderColor: "feedback.border.primary.default"
+      }
+    },
+    neutral: {
+      card: {
+        backgroundColor: "feedback.background.primary.default",
+        borderColor: "feedback.border.primary.default"
+      }
+    }
+  };
+  const icon = {
+    success: "success-circle",
+    error: "error",
+    warning: "warning-alt",
+    info: "info",
+    neutral: "info"
+  };
+  const hasCaption = Boolean(props.caption);
+  const hasActions = Boolean(props.actions && props.actions.length > 0);
+  const hasTitle = Boolean(props.title);
+  const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
+  const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
+  const shouldAddMinHeight = !hasCaption && !hasActions;
+  return /* @__PURE__ */React.createElement(Card, {
+    sx: {
+      ...sxMap[props.type].card,
+      width: "full"
+    }
+  }, props.title && /* @__PURE__ */React.createElement(Card.Title, {
+    sx: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      fontSize: ["md", "xl"],
+      paddingY: ["1", "2", "4"],
+      paddingX: ["2", "4", "8"]
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      display: "inline-flex",
+      alignItems: "flex-start",
+      gap: "2",
+      flexDirection: "row",
+      flexWrap: "wrap"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2"
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon: icon[props.type]
+  }), props.title), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
+    return /* @__PURE__ */React.createElement(Tag, {
+      key: index
+    }, tag);
+  }) : /* @__PURE__ */React.createElement(Tag, null, props.tags))), props.onClose && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      marginLeft: "auto"
+    }
+  }, /* @__PURE__ */React.createElement(CloseButton, {
+    onClick: props.onClose
+  }))), /* @__PURE__ */React.createElement(Card.Body, {
+    sx: {
+      ...sxMap[props.type].card,
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      paddingY: ["1", "2", "4"],
+      paddingX: ["2", "4", "8"]
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      display: "flex",
+      justifyContent: "space-between",
+      minHeight: shouldAddMinHeight ? "40px" : "auto",
+      alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
+      width: "100%",
+      gap: "4"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      flex: 1
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: ["sm", "md"]
+    }
+  }, props.message))), props.actions && props.actions.length > 0 && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      mt: 2
+    }
+  }, props.actions.map((action, index) => {
+    return action.action === "open_url" ? /* @__PURE__ */React.createElement(Link, {
+      key: index,
+      href: action.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        color: "action.text.accent.default",
+        cursor: "pointer"
+      }
+    }, action.label || "Acessar") : null;
+  })), props.caption && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      whiteSpace: "nowrap",
+      mt: 6
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: "xs",
+      color: "text.secondary"
+    }
+  }, props.caption)), !props.title && props.onClose && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      alignSelf: "flex-end"
+    }
+  }, /* @__PURE__ */React.createElement(CloseButton, {
+    onClick: props.onClose
+  }))));
+}, "NotificationCard");
 export { NotificationCard };

package/dist/esm/NotificationsMenu/index.js

@@ -1,11 +1,164 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { NotificationCard } from "../chunk-4GBVRL7E.js";
 import { Icon } from "../chunk-2R7AUPJL.js";
 import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/NotificationsMenu/NotificationsMenu.tsx
-import { Box, Button, Card, Flex, IconButton, Text } from "@ttoss/ui";
+import { Box as Box2, Button, Card as Card2, Flex, IconButton, Text as Text2 } from "@ttoss/ui";
+import * as React2 from "react";
+
+// src/components/NotificationCard/NotificationCard.tsx
+import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
 import * as React from "react";
+var NotificationCard = /* @__PURE__ */__name(props => {
+  const sxMap = {
+    success: {
+      card: {
+        backgroundColor: "feedback.background.positive.default",
+        borderColor: "feedback.border.positive.default"
+      }
+    },
+    error: {
+      card: {
+        backgroundColor: "feedback.background.negative.default",
+        borderColor: "feedback.border.negative.default"
+      }
+    },
+    warning: {
+      card: {
+        backgroundColor: "feedback.background.caution.default",
+        borderColor: "feedback.border.caution.default"
+      }
+    },
+    info: {
+      card: {
+        backgroundColor: "feedback.background.primary.default",
+        borderColor: "feedback.border.primary.default"
+      }
+    },
+    neutral: {
+      card: {
+        backgroundColor: "feedback.background.primary.default",
+        borderColor: "feedback.border.primary.default"
+      }
+    }
+  };
+  const icon = {
+    success: "success-circle",
+    error: "error",
+    warning: "warning-alt",
+    info: "info",
+    neutral: "info"
+  };
+  const hasCaption = Boolean(props.caption);
+  const hasActions = Boolean(props.actions && props.actions.length > 0);
+  const hasTitle = Boolean(props.title);
+  const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
+  const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
+  const shouldAddMinHeight = !hasCaption && !hasActions;
+  return /* @__PURE__ */React.createElement(Card, {
+    sx: {
+      ...sxMap[props.type].card,
+      width: "full"
+    }
+  }, props.title && /* @__PURE__ */React.createElement(Card.Title, {
+    sx: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      fontSize: ["md", "xl"],
+      paddingY: ["1", "2", "4"],
+      paddingX: ["2", "4", "8"]
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      display: "inline-flex",
+      alignItems: "flex-start",
+      gap: "2",
+      flexDirection: "row",
+      flexWrap: "wrap"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2"
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon: icon[props.type]
+  }), props.title), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
+    return /* @__PURE__ */React.createElement(Tag, {
+      key: index
+    }, tag);
+  }) : /* @__PURE__ */React.createElement(Tag, null, props.tags))), props.onClose && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      marginLeft: "auto"
+    }
+  }, /* @__PURE__ */React.createElement(CloseButton, {
+    onClick: props.onClose
+  }))), /* @__PURE__ */React.createElement(Card.Body, {
+    sx: {
+      ...sxMap[props.type].card,
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      paddingY: ["1", "2", "4"],
+      paddingX: ["2", "4", "8"]
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      display: "flex",
+      justifyContent: "space-between",
+      minHeight: shouldAddMinHeight ? "40px" : "auto",
+      alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
+      width: "100%",
+      gap: "4"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      flex: 1
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: ["sm", "md"]
+    }
+  }, props.message))), props.actions && props.actions.length > 0 && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      mt: 2
+    }
+  }, props.actions.map((action, index) => {
+    return action.action === "open_url" ? /* @__PURE__ */React.createElement(Link, {
+      key: index,
+      href: action.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        color: "action.text.accent.default",
+        cursor: "pointer"
+      }
+    }, action.label || "Acessar") : null;
+  })), props.caption && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      whiteSpace: "nowrap",
+      mt: 6
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: "xs",
+      color: "text.secondary"
+    }
+  }, props.caption)), !props.title && props.onClose && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      alignSelf: "flex-end"
+    }
+  }, /* @__PURE__ */React.createElement(CloseButton, {
+    onClick: props.onClose
+  }))));
+}, "NotificationCard");
+
+// src/components/NotificationsMenu/NotificationsMenu.tsx
 var NotificationsMenu = /* @__PURE__ */__name(({
   notifications,
   defaultOpen = false,
@@ -16,12 +169,12 @@ var NotificationsMenu = /* @__PURE__ */__name(({
   onClose,
   onClearAll
 }) => {
-  const [isOpen, setIsOpen] = React.useState(defaultOpen);
-  const [openToLeft, setOpenToLeft] = React.useState(false);
-  const buttonRef = React.useRef(null);
-  const containerRef = React.useRef(null);
-  const loadMoreRef = React.useRef(null);
-  const [showCount, setShowCount] = React.useState(true);
+  const [isOpen, setIsOpen] = React2.useState(defaultOpen);
+  const [openToLeft, setOpenToLeft] = React2.useState(false);
+  const buttonRef = React2.useRef(null);
+  const containerRef = React2.useRef(null);
+  const loadMoreRef = React2.useRef(null);
+  const [showCount, setShowCount] = React2.useState(true);
   const togglePanel = /* @__PURE__ */__name(() => {
     setIsOpen(prev => {
       const next = !prev;
@@ -29,7 +182,7 @@ var NotificationsMenu = /* @__PURE__ */__name(({
       return next;
     });
   }, "togglePanel");
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!isOpen || !buttonRef.current) return;
     const rect = buttonRef.current.getBoundingClientRect();
     const spaceRight = window.innerWidth - rect.right;
@@ -37,7 +190,7 @@ var NotificationsMenu = /* @__PURE__ */__name(({
     setShowCount(false);
     setOpenToLeft(spaceRight < 500 && spaceLeft > spaceRight);
   }, [isOpen]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!hasMore || !onLoadMore || !loadMoreRef.current) return;
     const observer = new IntersectionObserver(entries => {
       if (entries[0].isIntersecting) {
@@ -55,7 +208,7 @@ var NotificationsMenu = /* @__PURE__ */__name(({
       }
     };
   }, [hasMore, onLoadMore, notifications.length]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = /* @__PURE__ */__name(event => {
       if (containerRef.current && !containerRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
@@ -69,16 +222,16 @@ var NotificationsMenu = /* @__PURE__ */__name(({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen, onOpenChange, onClose]);
-  return /* @__PURE__ */React.createElement(Flex, {
+  return /* @__PURE__ */React2.createElement(Flex, {
     sx: {
       position: "relative",
       justifyContent: "flex-start"
     }
-  }, /* @__PURE__ */React.createElement(Box, {
+  }, /* @__PURE__ */React2.createElement(Box2, {
     sx: {
       position: "relative"
     }
-  }, /* @__PURE__ */React.createElement(IconButton, {
+  }, /* @__PURE__ */React2.createElement(IconButton, {
     ref: buttonRef,
     variant: "ghost",
     sx: {
@@ -91,15 +244,15 @@ var NotificationsMenu = /* @__PURE__ */__name(({
       }
     },
     onClick: togglePanel
-  }, /* @__PURE__ */React.createElement(Box, {
+  }, /* @__PURE__ */React2.createElement(Box2, {
     sx: {
       color: "display.text.muted.default"
     }
-  }, /* @__PURE__ */React.createElement(Icon, {
+  }, /* @__PURE__ */React2.createElement(Icon, {
     icon: "mdi:bell-outline",
     width: 22,
     height: 22
-  })), count > 0 && showCount && /* @__PURE__ */React.createElement(Box, {
+  })), count > 0 && showCount && /* @__PURE__ */React2.createElement(Box2, {
     sx: {
       position: "absolute",
       top: "-2px",
@@ -117,9 +270,9 @@ var NotificationsMenu = /* @__PURE__ */__name(({
       justifyContent: "center",
       lineHeight: 1
     }
-  }, count > 99 ? "99+" : count)), isOpen && /* @__PURE__ */React.createElement("div", {
+  }, count > 99 ? "99+" : count)), isOpen && /* @__PURE__ */React2.createElement("div", {
     ref: containerRef
-  }, /* @__PURE__ */React.createElement(Card, {
+  }, /* @__PURE__ */React2.createElement(Card2, {
     sx: {
       position: "absolute",
       top: "calc(100% + 8px)",
@@ -134,22 +287,22 @@ var NotificationsMenu = /* @__PURE__ */__name(({
       borderRadius: "2xl",
       backgroundColor: "display.background.secondary.default"
     }
-  }, /* @__PURE__ */React.createElement(Box, {
+  }, /* @__PURE__ */React2.createElement(Box2, {
     sx: {
       width: "100%"
     }
-  }, /* @__PURE__ */React.createElement(Flex, {
+  }, /* @__PURE__ */React2.createElement(Flex, {
     sx: {
       flexDirection: "column",
       gap: 4
     }
-  }, notifications.length > 0 && onClearAll && /* @__PURE__ */React.createElement(Flex, {
+  }, notifications.length > 0 && onClearAll && /* @__PURE__ */React2.createElement(Flex, {
     sx: {
       justifyContent: "flex-end",
       p: 2,
       marginBottom: -2
     }
-  }, /* @__PURE__ */React.createElement(Button, {
+  }, /* @__PURE__ */React2.createElement(Button, {
     variant: "ghost",
     sx: {
       borderRadius: "md",
@@ -170,24 +323,24 @@ var NotificationsMenu = /* @__PURE__ */__name(({
       }
     },
     onClick: onClearAll
-  }, /* @__PURE__ */React.createElement(Icon, {
+  }, /* @__PURE__ */React2.createElement(Icon, {
     icon: "delete",
     width: 16,
     height: 16
-  }), /* @__PURE__ */React.createElement(Text, {
+  }), /* @__PURE__ */React2.createElement(Text2, {
     sx: {
       ml: -1,
       marginTop: -0.4,
       fontSize: "sm"
     }
-  }, "Limpar Tudo"))), notifications.length === 0 ? /* @__PURE__ */React.createElement(Text, {
+  }, "Limpar Tudo"))), notifications.length === 0 ? /* @__PURE__ */React2.createElement(Text2, {
     sx: {
       color: "display.text.muted.default",
       textAlign: "center",
       p: 4
     }
   }, "Nenhuma notifica\xE7\xE3o") : notifications.map(notification => {
-    return /* @__PURE__ */React.createElement(NotificationCard, {
+    return /* @__PURE__ */React2.createElement(NotificationCard, {
       key: notification.id,
       ...notification,
       onClose: /* @__PURE__ */__name(() => {
@@ -195,7 +348,7 @@ var NotificationsMenu = /* @__PURE__ */__name(({
         onClose?.();
       }, "onClose")
     });
-  }), hasMore && /* @__PURE__ */React.createElement("div", {
+  }), hasMore && /* @__PURE__ */React2.createElement("div", {
     ref: loadMoreRef,
     style: {
       height: 1

package/dist/esm/SpotlightCard/index.js

@@ -0,0 +1,211 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Icon } from "../chunk-2R7AUPJL.js";
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/SpotlightCard/SpotlightCard.tsx
+import { Box, Button, Card, Flex, Text } from "@ttoss/ui";
+import * as React from "react";
+var SpotlightCard = /* @__PURE__ */__name(({
+  icon,
+  title,
+  subtitle,
+  description,
+  firstButton,
+  secondButton,
+  variant = "accent"
+}) => {
+  React.useEffect(() => {
+    const styleId = "oca-spotlight-animations-v2";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.innerHTML = `
+        @keyframes ocaGradientFlow {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }, []);
+  const hasButtons = !!firstButton || !!secondButton;
+  const isAccent = variant === "accent";
+  const textColorToken = isAccent ? "action.text.accent.default" : "action.text.primary.default";
+  const iconColorToken = isAccent ? "action.text.accent.default" : "display.text.accent.default";
+  const iconBgToken = isAccent ? "rgba(255,255,255,0.3)" : "action.background.secondary.default";
+  const btnPrimaryVariant = isAccent ? "primary" : "accent";
+  const btnPrimaryColorToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
+  const btnSecondaryColorToken = textColorToken;
+  const btnSecondaryBorderColorToken = isAccent ? "currentColor" : "display.border.muted.default";
+  const renderButton = /* @__PURE__ */__name((prop, config) => {
+    if (!prop) return null;
+    if (/* @__PURE__ */React.isValidElement(prop)) return prop;
+    if (typeof prop !== "object") return prop;
+    const {
+      sx,
+      ...rest
+    } = prop;
+    const {
+      variant: defaultVariant,
+      textColor,
+      styles = {}
+    } = config;
+    return /* @__PURE__ */React.createElement(Button, {
+      variant: defaultVariant,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "2",
+        px: "6",
+        py: "3",
+        fontSize: "15px",
+        fontWeight: "bold",
+        whiteSpace: "nowrap",
+        transition: "all 0.2s",
+        color: textColor,
+        ...styles,
+        ...sx
+      },
+      ...rest
+    });
+  }, "renderButton");
+  return /* @__PURE__ */React.createElement(Card, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      justifyContent: "space-between",
+      background: /* @__PURE__ */__name(t => {
+        const theme = t;
+        const bgStart = isAccent ? theme.colors?.action?.background?.accent?.default : theme.colors?.action?.background?.primary?.default;
+        const bgMiddle = isAccent ? theme.colors?.action?.background?.accent?.active : theme.colors?.action?.background?.secondary?.default;
+        if (isAccent) {
+          return `linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%), 
+                    linear-gradient(0deg, ${bgStart}, ${bgStart})`;
+        }
+        return `linear-gradient(270deg, ${bgStart}, ${bgMiddle}, ${bgStart})`;
+      }, "background"),
+      backgroundSize: isAccent ? "200% 100%, auto" : "400% 400%",
+      animation: "ocaGradientFlow 6s ease infinite",
+      width: "100%",
+      minHeight: "104px",
+      borderRadius: "xl",
+      boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+      py: "7",
+      px: "8",
+      gap: "5",
+      color: textColorToken,
+      overflow: "hidden",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: isAccent ? "transparent" : "display.border.muted.default"
+    },
+    "data-testid": "spotlight-card"
+  }, /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      alignItems: "center",
+      gap: "5",
+      flex: 1,
+      minWidth: 0
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      width: 58,
+      height: 58,
+      borderRadius: "2xl",
+      backgroundColor: iconBgToken,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      color: iconColorToken
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon,
+    width: 28
+  })), /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      minWidth: 0
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    as: "div",
+    sx: {
+      fontFamily: "heading",
+      fontWeight: 800,
+      fontSize: "24px",
+      lineHeight: 1.2,
+      color: "inherit",
+      whiteSpace: "nowrap",
+      display: "flex",
+      alignItems: "baseline",
+      gap: "2"
+    }
+  }, /* @__PURE__ */React.createElement("span", {
+    style: {
+      fontWeight: 800,
+      letterSpacing: "-0.5px",
+      verticalAlign: "middle",
+      lineHeight: 1.1
+    }
+  }, title), subtitle && /* @__PURE__ */React.createElement("span", {
+    style: {
+      fontWeight: 300,
+      fontSize: "20px",
+      opacity: 0.8,
+      marginLeft: 6,
+      verticalAlign: "baseline",
+      lineHeight: 1.1
+    }
+  }, subtitle)), /* @__PURE__ */React.createElement(Text, {
+    as: "div",
+    sx: {
+      fontFamily: "body",
+      fontWeight: 400,
+      fontSize: "15px",
+      color: "inherit",
+      opacity: 0.85,
+      mt: "1",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: "vertical"
+    }
+  }, description))), hasButtons && /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      gap: "4",
+      alignItems: "center",
+      flexShrink: 0,
+      ml: "auto"
+    }
+  }, renderButton(firstButton, {
+    variant: btnPrimaryVariant,
+    textColor: btnPrimaryColorToken,
+    styles: {
+      ":hover": {
+        transform: "translateY(-1px)"
+      }
+    }
+  }), renderButton(secondButton, {
+    variant: "secondary",
+    textColor: btnSecondaryColorToken,
+    styles: {
+      backgroundColor: "transparent",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: btnSecondaryBorderColorToken,
+      opacity: isAccent ? 0.6 : 1,
+      cursor: "pointer",
+      ":hover": {
+        backgroundColor: "rgba(255,255,255,0.2)",
+        opacity: 1,
+        borderColor: btnSecondaryBorderColorToken
+      }
+    }
+  })));
+}, "SpotlightCard");
+SpotlightCard.displayName = "SpotlightCard";
+export { SpotlightCard };