@nextworks/blocks-sections 0.1.0-alpha.11 → 0.1.0-alpha.14

package/dist/components/ProcessTimeline.js

@@ -1,88 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@nextworks/blocks-core";
-/**
- * Responsive timeline showing a multi-step process for your workflow.
- *
- * @remarks
- * - Renders horizontally on desktop and vertically on mobile.
- * - Slot-style className overrides are merged after defaults via cn().
- * - Uses a semantic <section> and supports aria-label.
- *
- * @example
- * <ProcessTimeline steps={[{ stepNumber: 1, title: 'Plan', description: '...' }]} />
- */
-export function ProcessTimeline({ id, className, steps = [
-    {
-        stepNumber: 1,
-        title: "Discovery Call",
-        description: "Understanding your goals and requirements",
-        icon: "🔍",
-    },
-    {
-        stepNumber: 2,
-        title: "Strategy & Design",
-        description: "Custom mockups and project roadmap",
-        icon: "🎨",
-    },
-    {
-        stepNumber: 3,
-        title: "Development",
-        description: "Building your site with regular updates",
-        icon: "⚡",
-    },
-    {
-        stepNumber: 4,
-        title: "Launch & Support",
-        description: "Going live with ongoing maintenance",
-        icon: "🚀",
-    },
-], heading = "Our Process", subheading, section = {
-    className: "py-16 md:py-20 bg-muted",
-}, container = {
-    className: "max-w-6xl mx-auto px-5 md:px-10",
-}, header = {
-    className: "space-y-4 mb-12 md:mb-16 text-center",
-}, headingStyle = {
-    className: "text-4xl md:text-5xl font-bold font-poppins text-foreground leading-tight",
-}, subheadingStyle = {
-    className: "text-lg md:text-xl font-inter text-muted-foreground max-w-2xl mx-auto leading-relaxed",
-}, timelineContainer = {
-    className: "w-full max-w-4xl mx-auto",
-}, desktopTimeline = {
-    className: "hidden lg:flex justify-between items-start relative w-full",
-}, connectingLine = {
-    className: "absolute top-8 left-15 right-15 h-0.5 z-10 bg-[var(--process-connector)] dark:bg-[var(--process-connector)]",
-}, stepContainer = {
-    className: "flex flex-col items-center space-y-4 flex-1 max-w-48 relative z-20",
-}, stepCircle = {
-    className: "w-15 h-15 font-bold text-2xl rounded-full flex items-center justify-center shadow-lg relative z-30 bg-[var(--process-step-bg)] text-[var(--process-step-fg)] dark:bg-[var(--process-step-bg)] dark:text-[var(--process-step-fg)]",
-}, stepNumber = {
-    className: "font-bold text-2xl text-[var(--process-step-fg)] dark:text-[var(--process-step-fg)]",
-}, stepIcon = {
-    className: "text-2xl md:text-3xl mb-2",
-}, stepContent = {
-    className: "space-y-2 text-center",
-}, stepTitle = {
-    className: "text-lg md:text-xl font-semibold font-poppins text-foreground leading-tight",
-}, stepDescription = {
-    className: "text-sm md:text-base font-inter text-muted-foreground leading-relaxed",
-}, mobileTimeline = {
-    className: "flex lg:hidden flex-col space-y-8 w-full",
-}, mobileStep = {
-    className: "flex items-start relative",
-}, mobileVerticalLine = {
-    className: "absolute left-7 top-15 bottom-[-2rem] w-0.5 z-10 bg-[var(--process-connector)] dark:bg-[var(--process-connector)]",
-}, mobileStepCircle = {
-    className: "w-15 h-15 font-bold text-2xl rounded-full flex items-center justify-center shadow-lg flex-shrink-0 mr-6 z-20 bg-[var(--process-step-bg)] text-[var(--process-step-fg)] dark:bg-[var(--process-step-bg)] dark:text-[var(--process-step-fg)]",
-}, mobileStepContent = {
-    className: "flex flex-col items-start space-y-3 flex-1 pt-2",
-}, mobileStepIcon = {
-    className: "text-2xl md:text-3xl",
-}, mobileStepTitle = {
-    className: "text-lg md:text-xl font-semibold font-poppins text-foreground leading-tight",
-}, mobileStepDescription = {
-    className: "text-sm md:text-base font-inter text-muted-foreground leading-relaxed",
-}, ariaLabel = "Process timeline section", }) {
-    return (_jsx("section", { id: id, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsxs("div", { className: header.className, children: [_jsx("h2", { className: headingStyle.className, children: heading }), subheading && (_jsx("p", { className: subheadingStyle.className, children: subheading }))] }), _jsxs("div", { className: timelineContainer.className, children: [_jsxs("div", { className: desktopTimeline.className, children: [_jsx("div", { className: connectingLine.className }), steps.map((step) => (_jsxs("div", { className: stepContainer.className, children: [_jsx("div", { className: stepCircle.className, children: _jsx("span", { className: stepNumber.className, children: step.stepNumber }) }), step.icon && (_jsx("div", { className: stepIcon.className, children: step.icon })), _jsxs("div", { className: stepContent.className, children: [_jsx("h3", { className: stepTitle.className, children: step.title }), _jsx("p", { className: stepDescription.className, children: step.description })] })] }, step.stepNumber)))] }), _jsx("div", { className: mobileTimeline.className, children: steps.map((step, index) => (_jsxs("div", { className: mobileStep.className, children: [index < steps.length - 1 && (_jsx("div", { className: mobileVerticalLine.className })), _jsx("div", { className: mobileStepCircle.className, children: _jsx("span", { className: stepNumber.className, children: step.stepNumber }) }), _jsxs("div", { className: mobileStepContent.className, children: [step.icon && (_jsx("div", { className: mobileStepIcon.className, children: step.icon })), _jsx("h3", { className: mobileStepTitle.className, children: step.title }), _jsx("p", { className: mobileStepDescription.className, children: step.description })] })] }, step.stepNumber))) })] })] }) }));
-}

package/dist/components/ServicesGrid.js

@@ -1,72 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion } from "motion/react";
-import { cn } from "@nextworks/blocks-core";
-/**
- * Default services data for digital agency
- */
-const defaultServicesData = [
-    {
-        icon: "💻",
-        title: "Web Design & Development",
-        description: "Custom websites that capture your brand and convert visitors into customers",
-    },
-    {
-        icon: "📈",
-        title: "SEO & Digital Marketing",
-        description: "Get found on Google and drive qualified traffic to your website",
-    },
-    {
-        icon: "🛒",
-        title: "E-commerce Solutions",
-        description: "Online stores that maximize sales and customer experience",
-    },
-    {
-        icon: "🎨",
-        title: "Brand Identity & Design",
-        description: "Logo, branding, and visual identity that makes you stand out",
-    },
-];
-/**
- * Responsive services grid with subtle motion and slot-style overrides.
- *
- * @remarks
- * - Motion can be disabled globally with enableMotion.
- * - Each card uses simple emoji icons by default; replace with real icons if preferred.
- *
- * @example
- * <ServicesGrid servicesData={[{ icon: '⚙️', title: 'Automation', description: '...' }]} />
- */
-export function ServicesGrid({ id, className, sectionHeading = "Our Services", servicesData = defaultServicesData, enableMotion = true, section = {
-    className: "py-16 md:py-20 lg:py-24 bg-muted",
-}, container = {
-    className: "max-w-6xl mx-auto px-4 md:px-6 lg:px-8",
-}, heading = {
-    className: "text-3xl md:text-4xl lg:text-5xl font-bold font-poppins text-foreground text-center mb-8 md:mb-12",
-}, grid = {
-    className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 items-stretch",
-}, card = {
-    className: "bg-card/90 backdrop-blur p-6 md:p-8 rounded-lg border border-border shadow-sm hover:shadow-md transition-all duration-300 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
-}, cardContent = {
-    className: "flex flex-col h-full space-y-4",
-}, icon = {
-    className: "text-4xl",
-}, title = {
-    className: "text-lg md:text-xl font-semibold font-poppins text-card-foreground leading-tight text-[var(--card-title-fg)]",
-}, description = {
-    className: "text-sm md:text-base font-inter text-muted-foreground leading-relaxed flex-1 text-[var(--card-muted-fg)]",
-}, ariaLabel = "Services section", }) {
-    return (_jsx("section", { id: id, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsx("h2", { className: heading.className, children: sectionHeading }), _jsx("div", { className: grid.className, children: servicesData.map((service, index) => (_jsx(motion.div, { initial: enableMotion ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 }, whileInView: enableMotion ? { opacity: 1, y: 0 } : { opacity: 1, y: 0 }, viewport: enableMotion
-                            ? { once: true, amount: 0.2 }
-                            : { once: true, amount: 0 }, transition: enableMotion
-                            ? {
-                                type: "spring",
-                                stiffness: 125,
-                                damping: 50,
-                                mass: 1,
-                                delay: 0.12 + index * 0.05,
-                            }
-                            : { type: "tween", duration: 0 }, className: cn("h-full motion-reduce:transform-none motion-reduce:transition-none"), children: _jsx("div", { className: cn(card.className, "flex h-full flex-col", enableMotion
-                                ? "transition-transform duration-200 hover:-translate-y-1"
-                                : "transition-none hover:!translate-y-0 hover:shadow-none"), children: _jsxs("div", { className: cardContent.className, children: [_jsx("div", { className: icon.className, role: "img", "aria-label": service.title, children: service.icon }), _jsx("h3", { className: title.className, children: service.title }), _jsx("p", { className: description.className, children: service.description })] }) }) }, index))) })] }) }));
-}

package/dist/components/Team.js

@@ -1,107 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-import { cn } from "@nextworks/blocks-core";
-const DefaultTeamData = [
-    {
-        name: "Alex Chen",
-        role: "CEO & Founder",
-        bio: "Full-stack developer with 8+ years.",
-        avatar: "👨‍💼",
-        socialLinks: [{ platform: "LinkedIn", url: "#", icon: "💼" }],
-    },
-    {
-        name: "Sarah Martinez",
-        role: "Lead Designer",
-        bio: "UI/UX expert.",
-        avatar: "👩‍🎨",
-        socialLinks: [{ platform: "Dribbble", url: "#", icon: "🎨" }],
-    },
-    {
-        name: "Jordan Patel",
-        role: "DevOps Engineer",
-        bio: "Automates cloud infra and CI/CD pipelines.",
-        avatar: "🛠️",
-        socialLinks: [{ platform: "GitHub", url: "#", icon: "🐙" }],
-    },
-    {
-        name: "Maya Thompson",
-        role: "Product Manager",
-        bio: "Drives roadmap and aligns cross‑functional teams.",
-        avatar: "🧭",
-        socialLinks: [{ platform: "Twitter", url: "#", icon: "🐦" }],
-    },
-];
-/**
- * Internal presentational card for a single team member.
- * Receives already-merged className strings from the parent.
- */
-function TeamCard({ member, card = { className: "" }, cardContent = { className: "" }, avatar = { className: "" }, name = { className: "" }, role = { className: "" }, bio = { className: "" }, socialLinks = { className: "" }, socialLink = { className: "" }, }) {
-    return (_jsx("div", { className: card.className, children: _jsxs("div", { className: cardContent.className, children: [_jsx("div", { className: avatar.className, children: member.avatar }), _jsx("h3", { className: name.className, children: member.name }), _jsx("p", { className: role.className, children: member.role }), _jsx("p", { className: bio.className, children: member.bio }), member.socialLinks && member.socialLinks.length > 0 && (_jsx("div", { className: socialLinks.className, children: member.socialLinks.map((social, index) => (_jsx(Link, { href: social.url, className: socialLink.className, title: social.platform, "aria-label": `${member.name}'s ${social.platform} profile`, children: social.icon }, index))) }))] }) }));
-}
-/**
- * Team section with heading, subheading, and a responsive member grid.
- *
- * @remarks
- * - Uses a slot-style API for className overrides merged via cn().
- * - Motion: enableMotion toggles hover lift on cards.
- * - Accessibility: semantic <section> with aria-label.
- *
- * @example
- * <Team teamMembers={[{ name: 'Alex', role: 'Engineer' }]} />
- */
-export function Team({ id, className, teamMembers = DefaultTeamData, teamHeadingText = "Meet Our Team", teamSubheadingText = "The talented people behind your success", section, container, header, heading, subheading, grid, card, cardContent, avatar, name, role, bio, socialLinks, socialLink, enableMotion = true, ariaLabel = "Team section", }) {
-    var _a, _b;
-    // Defaults for slots
-    const defaultSection = "py-16 px-6 bg-muted";
-    const defaultContainer = "max-w-7xl mx-auto";
-    const defaultHeader = "space-y-12 items-center";
-    const defaultHeadingClass = "text-3xl font-bold font-poppins text-foreground text-center text-[var(--heading-fg)]";
-    const defaultSubheadingClass = "text-lg font-inter text-muted-foreground opacity-80 leading-relaxed text-center max-w-2xl text-[var(--subheading-fg)]";
-    const defaultGrid = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full";
-    const defaultCardBase = "bg-card p-6 rounded-lg shadow-md text-center border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]";
-    const defaultCardContent = "flex flex-col items-center space-y-4";
-    const defaultAvatar = "text-4xl mb-2";
-    const defaultName = "text-xl font-bold font-poppins text-card-foreground text-[var(--card-fg)]";
-    const defaultRole = "text-md font-semibold font-poppins text-primary";
-    const defaultBio = "text-sm font-inter text-muted-foreground opacity-80 leading-relaxed text-[var(--card-muted-fg)]";
-    const defaultSocialLinks = "flex gap-3 mt-2";
-    const defaultSocialLink = "text-lg text-primary hover:text-accent-foreground transition-colors duration-200";
-    // Motion control for card
-    const motionCard = enableMotion
-        ? "transition-transform duration-200 hover:-translate-y-1"
-        : "transition-none hover:!translate-y-0";
-    // Merge slot classes using cn (defaults first, then overrides)
-    const finalSectionClass = cn(defaultSection, section === null || section === void 0 ? void 0 : section.className, className);
-    const finalContainerClass = cn(defaultContainer, container === null || container === void 0 ? void 0 : container.className);
-    const finalHeaderClass = cn(defaultHeader, header === null || header === void 0 ? void 0 : header.className);
-    const finalGridClass = cn(defaultGrid, grid === null || grid === void 0 ? void 0 : grid.className);
-    const finalCardClass = cn(defaultCardBase, motionCard, card === null || card === void 0 ? void 0 : card.className);
-    const finalCardContentClass = cn(defaultCardContent, cardContent === null || cardContent === void 0 ? void 0 : cardContent.className);
-    const finalAvatarClass = cn(defaultAvatar, avatar === null || avatar === void 0 ? void 0 : avatar.className);
-    const finalNameClass = cn(defaultName, name === null || name === void 0 ? void 0 : name.className);
-    const finalRoleClass = cn(defaultRole, role === null || role === void 0 ? void 0 : role.className);
-    const finalBioClass = cn(defaultBio, bio === null || bio === void 0 ? void 0 : bio.className);
-    const finalSocialLinksClass = cn(defaultSocialLinks, socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.className);
-    const finalSocialLinkClass = cn(defaultSocialLink, socialLink === null || socialLink === void 0 ? void 0 : socialLink.className);
-    // Normalize heading/subheading allowing string or object, plus slot class merges
-    const normalizedHeading = typeof teamHeadingText === "string"
-        ? {
-            text: teamHeadingText,
-            className: cn(defaultHeadingClass, heading === null || heading === void 0 ? void 0 : heading.className),
-        }
-        : {
-            text: (_a = teamHeadingText === null || teamHeadingText === void 0 ? void 0 : teamHeadingText.text) !== null && _a !== void 0 ? _a : "Meet Our Team",
-            className: cn(defaultHeadingClass, teamHeadingText === null || teamHeadingText === void 0 ? void 0 : teamHeadingText.className, heading === null || heading === void 0 ? void 0 : heading.className),
-        };
-    const normalizedSubheading = typeof teamSubheadingText === "string"
-        ? {
-            text: teamSubheadingText,
-            className: cn(defaultSubheadingClass, subheading === null || subheading === void 0 ? void 0 : subheading.className),
-        }
-        : {
-            text: (_b = teamSubheadingText === null || teamSubheadingText === void 0 ? void 0 : teamSubheadingText.text) !== null && _b !== void 0 ? _b : "The talented people behind your success",
-            className: cn(defaultSubheadingClass, teamSubheadingText === null || teamSubheadingText === void 0 ? void 0 : teamSubheadingText.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
-        };
-    return (_jsx("section", { id: id || "team", className: finalSectionClass, "aria-label": ariaLabel, children: _jsx("div", { className: finalContainerClass, children: _jsxs("div", { className: finalHeaderClass, children: [_jsxs("div", { className: "mx-auto flex max-w-2xl flex-col items-center space-y-4 text-center", children: [_jsx("h2", { className: normalizedHeading.className, children: normalizedHeading.text }), _jsx("p", { className: normalizedSubheading.className, children: normalizedSubheading.text })] }), _jsx("div", { className: finalGridClass, children: teamMembers.map((member, index) => (_jsx(TeamCard, { member: member, card: { className: finalCardClass }, cardContent: { className: finalCardContentClass }, avatar: { className: finalAvatarClass }, name: { className: finalNameClass }, role: { className: finalRoleClass }, bio: { className: finalBioClass }, socialLinks: { className: finalSocialLinksClass }, socialLink: { className: finalSocialLinkClass } }, index))) })] }) }) }));
-}

package/dist/components/Testimonials.js

@@ -1,46 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@nextworks/blocks-core";
-import { TestimonialCard } from "@nextworks/blocks-core";
-const defaultTestimonialData = [
-    {
-        testimonialText: "Lorem ipsum dolor sit amet! Consectetur adipiscing elit.",
-        testimonialAuthor: " - Cillum Dolore",
-        testimonialAuthorInitials: "CD",
-    },
-    {
-        testimonialText: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi!",
-        testimonialAuthor: " - Voluptate Velit",
-        testimonialAuthorInitials: "VV",
-    },
-    {
-        testimonialText: "Cillum dolore eu fugiat nulla pariatur!",
-        testimonialAuthor: " - Laboris Nisi",
-        testimonialAuthorInitials: "LN",
-    },
-];
-/**
- * Testimonials section that renders a grid of TestimonialCard items.
- *
- * @remarks
- * - Slot-style overrides match TestimonialCard sub-slots (card, content, text, etc.).
- * - Motion can be disabled via enableMotion.
- *
- * @example
- * <Testimonials testimonials={[{ testimonialText: 'Great!', testimonialAuthor: ' - Jane', testimonialAuthorInitials: 'J' }]} />
- */
-export function Testimonials({ id, className, testimonials = defaultTestimonialData, testimonialSectionHeader = "What Our Customers Say", enableMotion = true, section = { className: "py-16 px-6 bg-muted" }, container = { className: "max-w-7xl mx-auto" }, header = { className: "text-center mb-12" }, heading = {
-    className: "text-3xl md:text-4xl font-bold font-poppins text-foreground",
-}, grid = { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" }, card = {
-    className: "bg-card/90 backdrop-blur p-6 rounded-lg shadow-md transition-transform duration-200 hover:-translate-y-1 border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
-}, content = { className: "flex flex-col space-y-4" }, text = {
-    className: "text-card-foreground text-base leading-relaxed italic font-inter text-[var(--card-fg)]",
-}, author = {
-    className: "text-muted-foreground text-sm font-medium font-poppins text-[var(--card-muted-fg)]",
-}, avatar = {
-    className: "w-12 h-12 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
-}, avatarText = { className: "text-primary-foreground font-bold" }, ariaLabel = "Testimonials section", }) {
-    return (_jsx("section", { id: id || "testimonials", className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsx("div", { className: header.className, children: _jsx("h2", { className: heading.className, children: testimonialSectionHeader }) }), _jsx("div", { className: grid.className, children: testimonials.map((testimonial, index) => (_jsx(TestimonialCard, { testimonialText: testimonial.testimonialText, testimonialAuthor: testimonial.testimonialAuthor, testimonialAuthorInitials: testimonial.testimonialAuthorInitials, card: {
-                            className: cn(card.className, !enableMotion && "transition-none hover:!translate-y-0"),
-                        }, content: content, text: text, author: author, avatar: avatar, avatarText: avatarText }, index))) })] }) }));
-}

package/dist/components/TrustBadges.js

@@ -1,46 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@nextworks/blocks-core";
-const defaultTrustBadgeData = [
-    {
-        badgeText: "10,000+ businesses",
-        badgeDescription: "Trusted by",
-        badgeIcon: "📊",
-    },
-    {
-        badgeText: "SOC 2 Compliant",
-        badgeDescription: "Enterprise security",
-        badgeIcon: "🔒",
-    },
-    {
-        badgeText: "99.9% Uptime",
-        badgeDescription: "Reliable service",
-        badgeIcon: "⚡",
-    },
-];
-/**
- * Compact section to showcase trust signals like usage stats and compliance.
- *
- * @remarks
- * - Horizontal by default; switch to vertical with layout="vertical".
- * - Hover motion can be disabled via enableMotion.
- *
- * @example
- * <TrustBadges badges={[{ badgeText: 'SOC 2', badgeDescription: 'Security', badgeIcon: '🔒' }]} />
- */
-export function TrustBadges({ id, className, badges = defaultTrustBadgeData, trustBadgesSectionHeader, section = { className: "py-8 px-6 bg-muted" }, container = { className: "max-w-7xl mx-auto" }, header = { className: "text-center mb-6" }, heading = {
-    className: "text-xl font-semibold text-foreground text-[var(--heading-fg)]",
-}, badgesContainer = {
-    className: "flex flex-col md:flex-row justify-center items-center gap-8 flex-wrap",
-}, badge = {
-    className: "flex flex-col items-center text-center min-w-[200px] transition-all duration-300 ease-in-out hover:scale-[1.02]",
-}, badgeContent = { className: "flex flex-col items-center space-y-2" }, icon = { className: "text-2xl mb-2" }, description = {
-    className: "text-sm font-medium text-muted-foreground text-[var(--card-muted-fg)]",
-}, text = {
-    className: "text-lg font-bold text-foreground text-[var(--card-fg)]",
-}, layout = "horizontal", enableMotion = true, ariaLabel = "Trust badges section", }) {
-    const containerClasses = layout === "vertical"
-        ? "flex flex-col justify-center items-center gap-8"
-        : badgesContainer.className;
-    return (_jsx("section", { id: id || "trust-badges", className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [trustBadgesSectionHeader && (_jsx("div", { className: header.className, children: _jsx("h2", { className: heading.className, children: trustBadgesSectionHeader }) })), _jsx("div", { className: containerClasses, children: badges.map((badgeData, index) => (_jsx("div", { className: cn(badge.className, !enableMotion && "transition-none hover:!scale-100"), children: _jsxs("div", { className: badgeContent.className, children: [badgeData.badgeIcon && (_jsx("div", { className: icon.className, children: badgeData.badgeIcon })), badgeData.badgeDescription && (_jsx("p", { className: description.className, children: badgeData.badgeDescription })), _jsx("p", { className: text.className, children: badgeData.badgeText })] }) }, index))) })] }) }));
-}