@salesmind-ai/design-system 0.6.0 → 0.7.0

package/dist/{chunk-WYH4TKS5.js → chunk-PBYRTNQ5.js}

@@ -1,6 +1,4 @@
-import { Stack } from './chunk-NN3TUHIH.js';
-import { SectionShell, SectionHeader } from './chunk-VFJZQQZU.js';
-import { Box } from './chunk-HN4PHABT.js';
+import { SectionShell, SectionHeader } from './chunk-AMNY5TS3.js';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -67,14 +65,14 @@ var HeroSection = forwardRef(
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ jsx(Box, { children: ContentBlock }),
-              /* @__PURE__ */ jsx(Box, { children: MediaBlock })
+              /* @__PURE__ */ jsx("div", { children: ContentBlock }),
+              /* @__PURE__ */ jsx("div", { children: MediaBlock })
             ]
           }
-        ) : /* @__PURE__ */ jsxs(Stack, { gap: 16, align: isCenter ? "center" : "start", children: [
+        ) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--space-16)", alignItems: isCenter ? "center" : "flex-start" }, children: [
           ContentBlock,
           MediaBlock && /* @__PURE__ */ jsx(
-            Box,
+            "div",
             {
               style: {
                 width: "100%",
@@ -185,4 +183,4 @@ StatsSection.displayName = "StatsSection";
 
 export { CTASection, FeatureSection, HeroSection, StatsSection };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-WYH4TKS5.js.map
+//# sourceMappingURL=chunk-PBYRTNQ5.js.map

package/dist/chunk-PBYRTNQ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/HeroSection/HeroSection.tsx","../src/components/FeatureSection/FeatureSection.tsx","../src/components/CTASection/CTASection.tsx","../src/components/StatsSection/StatsSection.tsx"],"names":["forwardRef","clsx","jsx","jsxs"],"mappings":";;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,UAAU;AAyEP,cAQA,YARA;AAnCH,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA,SAAS,eAAe;AAAA,IACxB;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,UAAM,UAAU,YAAY;AAC5B,UAAM,WAAW,YAAY;AAG7B,UAAM,gBAAgB,UAAU,WAAW,WAAW;AAEtD,UAAM,eACJ,qBAAC,SAAI,WAAW,KAAK,oBAAoB,qBAAqB,aAAa,EAAE,GAC1E;AAAA,iBACC,oBAAC,kBAAe,WAAU,8BAA6B,OAAO,EAAE,cAAc,iBAAiB,GAC5F,mBACH;AAAA,MAEF,oBAAC,gBAAa,WAAU,kBAAkB,iBAAM;AAAA,MAC/C,YAAY,oBAAC,OAAE,WAAU,qBAAqB,oBAAS;AAAA,OAEtD,cAAc,iBACd,qBAAC,SAAI,WAAU,oBACZ;AAAA;AAAA,QACA;AAAA,SACH;AAAA,MAED;AAAA,OACH;AAGF,UAAM,aAAa,SACjB,qBAAC,SAAI,WAAU,0BACb;AAAA,0BAAC,SAAI,WAAW,KAAK,kBAAkB,qBAAqB,yBAAyB,GAClF,iBACH;AAAA,MACC,mBACC,oBAAC,SAAI,WAAW,KAAK,kBAAkB,mBAAmB,gBAAgB,EAAE,GACzE,2BACH;AAAA,OAEJ;AAGF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,YAAY,OAAO;AAAA,UACnB,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,qBAAqB;AAAA,cACrB,KAAK;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YAEA;AAAA,kCAAC,SAAK,wBAAa;AAAA,cACnB,oBAAC,SAAK,sBAAW;AAAA;AAAA;AAAA,QACnB,IAEA,qBAAC,SAAI,OAAO,EAAC,SAAS,QAAQ,eAAe,UAAU,KAAK,mBAAmB,YAAY,WAAW,WAAW,aAAY,GAC1H;AAAA;AAAA,UACA,cACD;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,SAAS;AAAA,gBACT,gBAAgB,WAAW,WAAW;AAAA,cACxC;AAAA,cAEA,8BAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,UAAU,WAAW,WAAW,OAAO,GACjE,sBACH;AAAA;AAAA,UACF;AAAA,WAEF;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;;ACxJ1B,SAAgB,cAAAA,mBAAkB;AAClC,OAAOC,WAAU;AAgCf,SACgB,OAAAC,MADhB,QAAAC,aAAA;AADF,IAAM,cAAc,CAAC,EAAE,KAAK,MAC1B,gBAAAA,MAAC,SAAI,WAAU,mBACZ;AAAA,OAAK,QAAQ,gBAAAD,KAAC,SAAI,WAAU,yBAAyB,eAAK,MAAK;AAAA,EAChE,gBAAAA,KAAC,QAAG,WAAU,0BAA0B,eAAK,OAAM;AAAA,EACnD,gBAAAA,KAAC,SAAI,WAAU,gCAAgC,eAAK,aAAY;AAAA,EAC/D,KAAK,OAAO,gBAAAA,KAAC,SAAI,WAAU,wBAAwB,eAAK,KAAI;AAAA,GAC/D;AAGF,IAAM,aAAa,CAAC,EAAE,KAAK,MACzB,gBAAAC,MAAC,SAAI,WAAU,kBACb;AAAA,kBAAAA,MAAC,SAAI,WAAU,2BACZ;AAAA,SAAK,QAAQ,gBAAAA,MAAC,SAAI,WAAU,wBAAuB;AAAA;AAAA,MAAM,KAAK;AAAA,OAAK;AAAA,IACnE,KAAK,QAAQ,gBAAAD,KAAC,SAAI,WAAU,yBAAyB,eAAK,MAAK;AAAA,IAChE,gBAAAA,KAAC,QAAG,WAAU,4BAA2B,OAAO,EAAE,UAAU,uBAAuB,GAChF,eAAK,OACR;AAAA,IACA,gBAAAA,KAAC,SAAI,WAAU,+BAA8B,OAAO,EAAE,UAAU,sBAAsB,GACnF,eAAK,aACR;AAAA,IACC,KAAK,OAAO,gBAAAA,KAAC,SAAI,WAAU,oBAAoB,eAAK,KAAI;AAAA,KAC3D;AAAA,EACA,gBAAAA,KAAC,SAAI,WAAU,yBACZ,eAAK,SACJ,gBAAAA,KAAC,SAAI,OAAO,EAAE,eAAe,UAAU,YAAY,2BAA2B,GAAG,GAErF;AAAA,GACF;AAGK,IAAM,iBAAiBF;AAAA,EAC5B,CACE;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,gBAAAG,MAAC,gBAAa,KAAU,WAAWF,MAAK,sBAAsB,SAAS,GAAI,GAAG,OAC5E;AAAA,sBAAAC,KAAC,iBAAc,OAAc,UAAoB,SAAkB,OAAO,aAAa;AAAA,MAEtF,YAAY,SACX,gBAAAA,KAAC,SAAI,WAAWD,MAAK,mBAAmB,oBAAoB,OAAO,MAAM,GACtE,mBAAS,IAAI,CAAC,SAAS,UACtB,gBAAAC,KAAC,eAAwB,MAAM,WAAb,KAAsB,CACzC,GACH,IAEA,gBAAAA,KAAC,SAAI,WAAU,qBACZ,mBAAS,IAAI,CAAC,SAAS,UACtB,gBAAAA,KAAC,cAAuB,MAAM,WAAb,KAAsB,CACxC,GACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;AClG7B,SAAgB,cAAAF,mBAAkB;AAClC,OAAOC,WAAU;AAoCL,SAMI,UALF,OAAAC,MADF,QAAAC,aAAA;AAvBL,IAAM,aAAaH;AAAA,EACxB,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,UAAM,UAAU,YAAY;AAC5B,UAAM,mBAAmB,UAAU,WAAW;AAE9C,UAAM,UACJ,gBAAAG,MAAC,SAAI,WAAWF,MAAK,kBAAkB,mBAAmB,gBAAgB,EAAE,GACzE;AAAA,2BAAqB,UACpB,gBAAAE,MAAC,SAAI,WAAU,yBACb;AAAA,wBAAAA,MAAC,SAAI,WAAU,kBACb;AAAA,0BAAAD,KAAC,QAAG,WAAU,gBAAgB,iBAAM;AAAA,UACnC,eAAe,gBAAAA,KAAC,OAAE,WAAU,sBAAsB,uBAAY;AAAA,WACjE;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAU,kBACZ,qBACC,gBAAAC,MAAA,YACG;AAAA;AAAA,UACA;AAAA,WACH,GAEJ;AAAA,SACF,IAEA,gBAAAA,MAAC,SAAI,WAAU,kBACb;AAAA,wBAAAD,KAAC,QAAG,WAAU,gBAAgB,iBAAM;AAAA,QACnC,eAAe,gBAAAA,KAAC,OAAE,WAAU,sBAAsB,uBAAY;AAAA,QAC/D,gBAAAA,KAAC,SAAI,WAAU,kBACZ,qBACC,gBAAAC,MAAA,YACG;AAAA;AAAA,UACA;AAAA,WACH,GAEJ;AAAA,SACF;AAAA,MAED;AAAA,OACH;AAGF,WACE,gBAAAD,KAAC,gBAAa,KAAU,WAAWD,MAAK,SAAS,GAAI,GAAG,OACrD,oBAAU,gBAAAC,KAAC,SAAI,WAAU,eAAe,mBAAQ,IAAS,SAC5D;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;AC3EzB,SAAgB,cAAAF,mBAAkB;AAClC,OAAOC,WAAU;AAuBT,gBAAAC,MAKM,QAAAC,aALN;AAJD,IAAM,eAAeH;AAAA,EAC1B,CAAC,EAAE,OAAO,UAAU,GAAG,OAAO,UAAU,SAAS,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC9E,WACE,gBAAAG,MAAC,gBAAa,KAAU,WAAWF,MAAK,oBAAoB,SAAS,GAAI,GAAG,OAC1E;AAAA,sBAAAC,KAAC,iBAAc,OAAc,UAAoB,SAAkB;AAAA,MAEnE,gBAAAA,KAAC,SAAI,WAAU,iBAAgB,OAAO,EAAE,mBAAmB,QAAQ,GAChE,gBAAM,IAAI,CAAC,MAAM,QAChB,gBAAAC,MAAC,SAAc,WAAU,gBACvB;AAAA,wBAAAA,MAAC,SAAI,WAAU,iBACZ;AAAA,eAAK;AAAA,UACL,KAAK;AAAA,UACN,gBAAAD,KAAC,UAAK,WAAU,kBAAkB,eAAK,QAAO;AAAA,WAChD;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAU,iBAAiB,eAAK,OAAM;AAAA,WANnC,GAOV,CACD,GACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './HeroSection.css';\n\n/* ============================================================================\n   Types\n   ============================================================================ */\n\nexport interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'left' | 'center' | 'split';\n  title: React.ReactNode;\n  titleAs?: React.ElementType;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  eyebrowAs?: React.ElementType;\n  primaryCta?: React.ReactNode;\n  secondaryCta?: React.ReactNode;\n\n  /** Main visual (Image, Video, or Component) */\n  media?: React.ReactNode;\n  /** Adds a browser-like header bar to the media container */\n  mediaBrowserFrame?: boolean;\n\n  /** Optional floating elements (e.g. SocialProof cards) over the media */\n  floatingElement?: React.ReactNode;\n  floatingPosition?: 'top-right' | 'bottom-left';\n\n  /** Background Visuals */\n  withGrid?: boolean;\n  withGlow?: boolean;\n\n  align?: 'left' | 'center'; // Text alignment overrides variant default\n}\n\n/* ============================================================================\n   Component\n   ============================================================================ */\n\nexport const HeroSection = forwardRef<HTMLDivElement, HeroSectionProps>(\n  (\n    {\n      variant = 'left',\n      title,\n      titleAs: TitleElement = 'h1',\n      subtitle,\n      eyebrow,\n      eyebrowAs: EyebrowElement = 'span',\n      primaryCta,\n      secondaryCta,\n      media,\n      mediaBrowserFrame = false,\n      floatingElement,\n      floatingPosition = 'bottom-left',\n      withGrid = false,\n      withGlow = false,\n      align,\n      padding = 'lg',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // Determine layout based on variant\n    const isSplit = variant === 'split';\n    const isCenter = variant === 'center';\n\n    // Default alignment\n    const textAlignment = align || (isCenter ? 'center' : 'left');\n\n    const ContentBlock = (\n      <div className={clsx('ds-hero__content', `ds-hero__content--${textAlignment}`)}>\n        {eyebrow && (\n          <EyebrowElement className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n            {eyebrow}\n          </EyebrowElement>\n        )}\n        <TitleElement className=\"ds-hero__title\">{title}</TitleElement>\n        {subtitle && <p className=\"ds-hero__subtitle\">{subtitle}</p>}\n\n        {(primaryCta || secondaryCta) && (\n          <div className=\"ds-hero__actions\">\n            {primaryCta}\n            {secondaryCta}\n          </div>\n        )}\n        {children}\n      </div>\n    );\n\n    const MediaBlock = media && (\n      <div className=\"ds-hero__media-wrapper\">\n        <div className={clsx('ds-hero__media', mediaBrowserFrame && 'ds-hero__media--browser')}>\n          {media}\n        </div>\n        {floatingElement && (\n          <div className={clsx('ds-hero__float', `ds-hero__float--${floatingPosition}`)}>\n            {floatingElement}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <SectionShell\n        ref={ref}\n        className={clsx(\n          'ds-hero',\n          `ds-hero--${variant}`,\n          withGrid && 'ds-hero--bg-grid',\n          withGlow && 'ds-hero--bg-glow',\n          className,\n        )}\n        padding={padding}\n        {...props}\n      >\n        {isSplit ? (\n          <div\n            style={{\n              display: 'grid',\n              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 500px), 1fr))',\n              gap: 'var(--space-16)',\n              alignItems: 'center',\n            }}\n          >\n            <div>{ContentBlock}</div>\n            <div>{MediaBlock}</div>\n          </div>\n        ) : (\n          <div style={{display: 'flex', flexDirection: 'column', gap: 'var(--space-16)', alignItems: isCenter ? 'center' : 'flex-start'}}>\n            {ContentBlock}\n            {MediaBlock && (\n            <div\n              style={{\n                width: '100%',\n                display: 'flex',\n                justifyContent: isCenter ? 'center' : 'flex-start',\n              }}\n            >\n              <div style={{ width: '100%', maxWidth: isCenter ? '1200px' : '100%' }}>\n                {MediaBlock}\n              </div>\n            </div>\n            )}\n          </div>\n        )}\n      </SectionShell>\n    );\n  },\n);\n\nHeroSection.displayName = 'HeroSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './FeatureSection.css';\n\n/* ============================================================================\n   Types\n   ============================================================================ */\n\nexport interface FeatureItem {\n  title: React.ReactNode;\n  description: React.ReactNode;\n  icon?: React.ReactNode;\n  media?: React.ReactNode; // For ZigZag\n  step?: string | number; // For ZigZag steps\n  cta?: React.ReactNode;\n}\n\nexport interface FeatureSectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'grid' | 'zigzag';\n  columns?: 2 | 3 | 4; // For grid variant\n  features: FeatureItem[];\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  alignHeader?: 'left' | 'center' | 'right';\n}\n\n/* ============================================================================\n   Components\n   ============================================================================ */\n\nconst FeatureCard = ({ item }: { item: FeatureItem }) => (\n  <div className=\"ds-feature-card\">\n    {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n    <h3 className=\"ds-feature-card__title\">{item.title}</h3>\n    <div className=\"ds-feature-card__description\">{item.description}</div>\n    {item.cta && <div className=\"ds-feature-card__cta\">{item.cta}</div>}\n  </div>\n);\n\nconst FeatureRow = ({ item }: { item: FeatureItem }) => (\n  <div className=\"ds-feature-row\">\n    <div className=\"ds-feature-row__content\">\n      {item.step && <div className=\"ds-feature-row__step\">STEP {item.step}</div>}\n      {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n      <h3 className=\"ds-section-header__title\" style={{ fontSize: 'var(--font-size-2xl)' }}>\n        {item.title}\n      </h3>\n      <div className=\"ds-section-header__subtitle\" style={{ fontSize: 'var(--font-size-lg)' }}>\n        {item.description}\n      </div>\n      {item.cta && <div className=\"ds-hero__actions\">{item.cta}</div>}\n    </div>\n    <div className=\"ds-feature-row__media\">\n      {item.media || (\n        <div style={{ paddingBottom: '56.25%', background: 'var(--glass-base-active)' }} />\n      )}\n    </div>\n  </div>\n);\n\nexport const FeatureSection = forwardRef<HTMLDivElement, FeatureSectionProps>(\n  (\n    {\n      variant = 'grid',\n      columns = 3,\n      features,\n      title,\n      subtitle,\n      eyebrow,\n      alignHeader = 'center',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <SectionShell ref={ref} className={clsx('ds-feature-section', className)} {...props}>\n        <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} align={alignHeader} />\n\n        {variant === 'grid' ? (\n          <div className={clsx('ds-feature-grid', `ds-feature-grid--${columns}-col`)}>\n            {features.map((feature, index) => (\n              <FeatureCard key={index} item={feature} />\n            ))}\n          </div>\n        ) : (\n          <div className=\"ds-feature-zigzag\">\n            {features.map((feature, index) => (\n              <FeatureRow key={index} item={feature} />\n            ))}\n          </div>\n        )}\n      </SectionShell>\n    );\n  },\n);\nFeatureSection.displayName = 'FeatureSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './CTASection.css';\n\nexport interface CTASectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'center' | 'split' | 'boxed';\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  primaryCta?: React.ReactNode;\n  secondaryCta?: React.ReactNode;\n  actions?: React.ReactNode; // Custom actions slot\n}\n\nexport const CTASection = forwardRef<HTMLDivElement, CTASectionProps>(\n  (\n    {\n      variant = 'center',\n      title,\n      description,\n      primaryCta,\n      secondaryCta,\n      actions,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // \"Boxed\" is just centered content inside a card-like container within the section\n    const isBoxed = variant === 'boxed';\n    const effectiveVariant = isBoxed ? 'center' : variant;\n\n    const Content = (\n      <div className={clsx('ds-cta-section', `ds-cta-section--${effectiveVariant}`)}>\n        {effectiveVariant === 'split' ? (\n          <div className=\"ds-cta-section--split\">\n            <div className=\"ds-cta-content\">\n              <h2 className=\"ds-cta-title\">{title}</h2>\n              {description && <p className=\"ds-cta-description\">{description}</p>}\n            </div>\n            <div className=\"ds-cta-actions\">\n              {actions || (\n                <>\n                  {primaryCta}\n                  {secondaryCta}\n                </>\n              )}\n            </div>\n          </div>\n        ) : (\n          <div className=\"ds-cta-content\">\n            <h2 className=\"ds-cta-title\">{title}</h2>\n            {description && <p className=\"ds-cta-description\">{description}</p>}\n            <div className=\"ds-cta-actions\">\n              {actions || (\n                <>\n                  {primaryCta}\n                  {secondaryCta}\n                </>\n              )}\n            </div>\n          </div>\n        )}\n        {children}\n      </div>\n    );\n\n    return (\n      <SectionShell ref={ref} className={clsx(className)} {...props}>\n        {isBoxed ? <div className=\"ds-cta-card\">{Content}</div> : Content}\n      </SectionShell>\n    );\n  },\n);\nCTASection.displayName = 'CTASection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './StatsSection.css';\n\nexport interface StatItem {\n  label: string;\n  value: string | number;\n  suffix?: string;\n  prefix?: string;\n}\n\nexport interface StatsSectionProps extends Omit<SectionShellProps, 'title'> {\n  stats: StatItem[];\n  columns?: number;\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n  ({ stats, columns = 4, title, subtitle, eyebrow, className, ...props }, ref) => {\n    return (\n      <SectionShell ref={ref} className={clsx('ds-stats-section', className)} {...props}>\n        <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} />\n\n        <div className=\"ds-stats-grid\" style={{ '--stats-columns': columns } as React.CSSProperties}>\n          {stats.map((stat, idx) => (\n            <div key={idx} className=\"ds-stat-card\">\n              <div className=\"ds-stat-value\">\n                {stat.prefix}\n                {stat.value}\n                <span className=\"ds-stat-suffix\">{stat.suffix}</span>\n              </div>\n              <div className=\"ds-stat-label\">{stat.label}</div>\n            </div>\n          ))}\n        </div>\n      </SectionShell>\n    );\n  },\n);\nStatsSection.displayName = 'StatsSection';\n"]}