@salesmind-ai/design-system 0.3.5 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,8 +4,10 @@ import { c as SectionShellProps } from './SectionShell-GlglHCzz.cjs';
4
4
  interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {
5
5
  variant?: 'left' | 'center' | 'split';
6
6
  title: React__default.ReactNode;
7
+ titleAs?: React__default.ElementType;
7
8
  subtitle?: React__default.ReactNode;
8
9
  eyebrow?: React__default.ReactNode;
10
+ eyebrowAs?: React__default.ElementType;
9
11
  primaryCta?: React__default.ReactNode;
10
12
  secondaryCta?: React__default.ReactNode;
11
13
  /** Main visual (Image, Video, or Component) */
@@ -4,8 +4,10 @@ import { c as SectionShellProps } from './SectionShell-GlglHCzz.js';
4
4
  interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {
5
5
  variant?: 'left' | 'center' | 'split';
6
6
  title: React__default.ReactNode;
7
+ titleAs?: React__default.ElementType;
7
8
  subtitle?: React__default.ReactNode;
8
9
  eyebrow?: React__default.ReactNode;
10
+ eyebrowAs?: React__default.ElementType;
9
11
  primaryCta?: React__default.ReactNode;
10
12
  secondaryCta?: React__default.ReactNode;
11
13
  /** Main visual (Image, Video, or Component) */
@@ -9,8 +9,10 @@ var HeroSection = forwardRef(
9
9
  ({
10
10
  variant = "left",
11
11
  title,
12
+ titleAs: TitleElement = "h1",
12
13
  subtitle,
13
14
  eyebrow,
15
+ eyebrowAs: EyebrowElement = "span",
14
16
  primaryCta,
15
17
  secondaryCta,
16
18
  media,
@@ -28,8 +30,8 @@ var HeroSection = forwardRef(
28
30
  const isCenter = variant === "center";
29
31
  const textAlignment = align || (isCenter ? "center" : "left");
30
32
  const ContentBlock = /* @__PURE__ */ jsxs("div", { className: clsx("ds-hero__content", `ds-hero__content--${textAlignment}`), children: [
31
- eyebrow && /* @__PURE__ */ jsx("span", { className: "ds-section-header__eyebrow", style: { marginBottom: "var(--space-2)" }, children: eyebrow }),
32
- /* @__PURE__ */ jsx("h1", { className: "ds-hero__title", children: title }),
33
+ eyebrow && /* @__PURE__ */ jsx(EyebrowElement, { className: "ds-section-header__eyebrow", style: { marginBottom: "var(--space-2)" }, children: eyebrow }),
34
+ /* @__PURE__ */ jsx(TitleElement, { className: "ds-hero__title", children: title }),
33
35
  subtitle && /* @__PURE__ */ jsx("p", { className: "ds-hero__subtitle", children: subtitle }),
34
36
  (primaryCta || secondaryCta) && /* @__PURE__ */ jsxs("div", { className: "ds-hero__actions", children: [
35
37
  primaryCta,
@@ -182,4 +184,4 @@ StatsSection.displayName = "StatsSection";
182
184
 
183
185
  export { CTASection, FeatureSection, HeroSection, StatsSection };
184
186
  //# sourceMappingURL=out.js.map
185
- //# sourceMappingURL=chunk-PE2KJVRN.js.map
187
+ //# sourceMappingURL=chunk-ARC5KXBC.js.map
@@ -0,0 +1 @@
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":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport { Stack, Box } from '../LayoutPrimitives';\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 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=\"lg\"\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 <Box>{ContentBlock}</Box>\n <Box>{MediaBlock}</Box>\n </div>\n ) : (\n <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n {ContentBlock}\n {MediaBlock && (\n <Box\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 </Box>\n )}\n </Stack>\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 title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n ({ stats, 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\">\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"]}
@@ -15,8 +15,10 @@ var HeroSection = react.forwardRef(
15
15
  ({
16
16
  variant = "left",
17
17
  title,
18
+ titleAs: TitleElement = "h1",
18
19
  subtitle,
19
20
  eyebrow,
21
+ eyebrowAs: EyebrowElement = "span",
20
22
  primaryCta,
21
23
  secondaryCta,
22
24
  media,
@@ -34,8 +36,8 @@ var HeroSection = react.forwardRef(
34
36
  const isCenter = variant === "center";
35
37
  const textAlignment = align || (isCenter ? "center" : "left");
36
38
  const ContentBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("ds-hero__content", `ds-hero__content--${textAlignment}`), children: [
37
- eyebrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-section-header__eyebrow", style: { marginBottom: "var(--space-2)" }, children: eyebrow }),
38
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "ds-hero__title", children: title }),
39
+ eyebrow && /* @__PURE__ */ jsxRuntime.jsx(EyebrowElement, { className: "ds-section-header__eyebrow", style: { marginBottom: "var(--space-2)" }, children: eyebrow }),
40
+ /* @__PURE__ */ jsxRuntime.jsx(TitleElement, { className: "ds-hero__title", children: title }),
39
41
  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-hero__subtitle", children: subtitle }),
40
42
  (primaryCta || secondaryCta) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-hero__actions", children: [
41
43
  primaryCta,
@@ -191,4 +193,4 @@ exports.FeatureSection = FeatureSection;
191
193
  exports.HeroSection = HeroSection;
192
194
  exports.StatsSection = StatsSection;
193
195
  //# sourceMappingURL=out.js.map
194
- //# sourceMappingURL=chunk-2ZNR2F2V.cjs.map
196
+ //# sourceMappingURL=chunk-LSR7JYVH.cjs.map
@@ -0,0 +1 @@
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;AAlCH,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;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,SAAQ;AAAA,QACP,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,OAAK,wBAAa;AAAA,cACnB,oBAAC,OAAK,sBAAW;AAAA;AAAA;AAAA,QACnB,IAEA,qBAAC,SAAM,KAAK,IAAI,OAAO,WAAW,WAAW,SAC1C;AAAA;AAAA,UACA,cACC;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,WAEJ;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;AAsBT,gBAAAC,MAKM,QAAAC,aALN;AAJD,IAAM,eAAeH;AAAA,EAC1B,CAAC,EAAE,OAAO,OAAO,UAAU,SAAS,WAAW,GAAG,MAAM,GAAG,QAAQ;AACjE,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,iBACZ,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 { Stack, Box } from '../LayoutPrimitives';\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 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=\"lg\"\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 <Box>{ContentBlock}</Box>\n <Box>{MediaBlock}</Box>\n </div>\n ) : (\n <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n {ContentBlock}\n {MediaBlock && (\n <Box\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 </Box>\n )}\n </Stack>\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 title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n ({ stats, 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\">\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"]}
package/dist/index.cjs CHANGED
@@ -11,7 +11,7 @@ var chunkWH7PYHZY_cjs = require('./chunk-WH7PYHZY.cjs');
11
11
  var chunk3TGSIILM_cjs = require('./chunk-3TGSIILM.cjs');
12
12
  var chunkCJ2MKVAF_cjs = require('./chunk-CJ2MKVAF.cjs');
13
13
  var chunkCH42VPWE_cjs = require('./chunk-CH42VPWE.cjs');
14
- var chunk2ZNR2F2V_cjs = require('./chunk-2ZNR2F2V.cjs');
14
+ var chunkLSR7JYVH_cjs = require('./chunk-LSR7JYVH.cjs');
15
15
  var chunkMQRB634A_cjs = require('./chunk-MQRB634A.cjs');
16
16
  var chunkKDLH35OI_cjs = require('./chunk-KDLH35OI.cjs');
17
17
  var chunkNT4LBP7D_cjs = require('./chunk-NT4LBP7D.cjs');
@@ -812,19 +812,19 @@ Object.defineProperty(exports, "useAppearance", {
812
812
  });
813
813
  Object.defineProperty(exports, "CTASection", {
814
814
  enumerable: true,
815
- get: function () { return chunk2ZNR2F2V_cjs.CTASection; }
815
+ get: function () { return chunkLSR7JYVH_cjs.CTASection; }
816
816
  });
817
817
  Object.defineProperty(exports, "FeatureSection", {
818
818
  enumerable: true,
819
- get: function () { return chunk2ZNR2F2V_cjs.FeatureSection; }
819
+ get: function () { return chunkLSR7JYVH_cjs.FeatureSection; }
820
820
  });
821
821
  Object.defineProperty(exports, "HeroSection", {
822
822
  enumerable: true,
823
- get: function () { return chunk2ZNR2F2V_cjs.HeroSection; }
823
+ get: function () { return chunkLSR7JYVH_cjs.HeroSection; }
824
824
  });
825
825
  Object.defineProperty(exports, "StatsSection", {
826
826
  enumerable: true,
827
- get: function () { return chunk2ZNR2F2V_cjs.StatsSection; }
827
+ get: function () { return chunkLSR7JYVH_cjs.StatsSection; }
828
828
  });
829
829
  Object.defineProperty(exports, "Stack", {
830
830
  enumerable: true,
package/dist/index.d.cts CHANGED
@@ -3,7 +3,7 @@ export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, Acco
3
3
  export { B as Breadcrumb, a as BreadcrumbEllipsis, b as BreadcrumbEllipsisProps, c as BreadcrumbItem, d as BreadcrumbItemProps, e as BreadcrumbLink, f as BreadcrumbLinkProps, g as BreadcrumbList, h as BreadcrumbListProps, i as BreadcrumbPage, j as BreadcrumbPageProps, k as BreadcrumbProps, l as BreadcrumbSeparator, m as BreadcrumbSeparatorProps } from './Breadcrumb-RX-B_gDV.cjs';
4
4
  export { FooterCTA, FooterLink, FooterSection, FooterTrustBadge, LocaleDropdown, LocaleDropdownProps, LocaleOption, MDXOutboundLink, NavbarMegaMenu, NavbarMegaMenuItem, NavbarMegaMenuItemProps, NavbarMegaMenuProps, NavbarMegaMenuSection, NavbarMegaMenuSectionProps, NavbarMobileActions, NavbarMobileNavItem, NavbarMobileNavItemProps, NavbarMobileSeparator, NavbarV2, NavbarV2Actions, NavbarV2Brand, NavbarV2BrandProps, NavbarV2Props, NavbarV2Tab, NavbarV2TabMenu, NavbarV2TabMenuProps, NavbarV2TabProps, NavbarV2Tabs, OutboundClickEventDetail, OutboundLink, OutboundLinkProps, SiteFooter, SiteFooterProps, appendGovernedUTMs, appendUTMs, isExemptUrl } from './nav/index.cjs';
5
5
  export { S as SectionHeader, a as SectionHeaderProps, b as SectionShell, c as SectionShellProps } from './SectionShell-GlglHCzz.cjs';
6
- export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from './StatsSection-wgd8Vge1.cjs';
6
+ export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from './StatsSection-Dihy3zml.cjs';
7
7
  export { Author, CardMetric, LogoItem, Media, MetricCounter, MetricCounterProps, Platform, PlatformBadge, PlatformBadgeProps, SocialProof, SocialProofCard, SocialProofCardProps, SocialProofCarousel, SocialProofCarouselProps, SocialProofFeatured, SocialProofFeaturedProps, SocialProofGrid, SocialProofGridProps, SocialProofLogos, SocialProofLogosProps, StarRating, StarRatingProps, VerticalVideoGrid, VerticalVideoGridProps, VideoLightbox, VideoLightboxProps } from './social-proof/index.cjs';
8
8
  export { AnalysisProgress, BehavioralSignals, ChangeEmail, ChangeEmailLabels, ChangeEmailProps, DataTable, DataTableBody, DataTableCell, DataTableHead, DataTableHeader, DataTableProps, DataTableRow, EngagementTip, FloatingTabBar, FloatingTabBarProps, ForgotPassword, ForgotPasswordLabels, ForgotPasswordProps, LeadProfile, LeadProfileState, LeadProfileView, LeadProfileViewProps, Login, LoginLabels, LoginProps, MBTIScore, NavItem, Shell, ShellProps, Sidebar, SidebarItem, SidebarItemProps, SidebarProps, SidebarSection, SidebarSectionProps, Signup, SignupLabels, SignupProps, TabItem, TabItemProps } from './admin/index.cjs';
9
9
  export { AgitationPoint, AnnouncementBar, AnnouncementBarProps, ArchitectureConnection, ArchitectureDiagram, ArchitectureDiagramProps, ArchitectureNode, ArchitectureNodeType, BeforeAfterBlock, BeforeAfterBlockProps, BeforeAfterItem, BeforeAfterSide, BookingEmbed, BookingEmbedProps, CaseStudyCard, CaseStudyCardProps, CaseStudyMetric, CaseStudySection, CaseStudySectionProps, ComparisonColumn, ComparisonRow, ComparisonTable, ComparisonTableProps, CompetitorDiff, CompetitorDiffItem, CompetitorDiffProps, ComplianceGrid, ComplianceGridProps, ComplianceItem, ComplianceStatus, EcosystemConnection, EcosystemDiagram, EcosystemDiagramProps, EcosystemLayer, EnterpriseSLA, EnterpriseSignalCategory, EnterpriseSignalItem, EnterpriseSignalStatus, EnterpriseSignaling, EnterpriseSignalingProps, EraSentiment, EvolutionEra, EvolutionTimeline, EvolutionTimelineProps, ExitIntentOverlay, ExitIntentOverlayProps, GuaranteeHighlight, GuaranteeHighlightProps, ICPFilter, ICPFilterItem, ICPFilterProps, IntegrationEntry, IntegrationShowcase, IntegrationShowcaseProps, IntelligenceBlock, IntelligenceBlockProps, IntelligenceCapability, IntelligenceMetric, IntentCTA, IntentCTAProps, IntentStage, IntentTriggerType, LeadCaptureForm, LeadCaptureFormProps, ManifestoAttribution, ManifestoBlock, ManifestoBlockProps, ObjectionFAQ, ObjectionFAQProps, ObjectionItem, PartnerBenefit, PartnerCalcInput, PartnerCalcOutput, PartnerDifferentiator, PartnerValueProp, PartnerValuePropProps, PricingCard, PricingCardProps, PricingFeature, PricingSection, PricingSectionProps, PricingToggle, PricingToggleProps, ProblemAgitation, ProblemAgitationProps, ProcessTimeline, ProcessTimelineProps, ROICalculator, ROICalculatorProps, ROIComparisonItem, SecurityBlock, SecurityBlockProps, SecurityCertification, SegmentSwitch, SegmentSwitchProps, StakeholderContent, StakeholderDefinition, StakeholderTabs, StakeholderTabsProps, StickyActionBar, StickyActionBarProps, TimelineStep, ValueAnchor, ValueAnchorInput, ValueAnchorOutput, ValueAnchorProps, VideoEmbed, VideoEmbedProps } from './marketing/index.cjs';
package/dist/index.d.ts CHANGED
@@ -3,7 +3,7 @@ export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, Acco
3
3
  export { B as Breadcrumb, a as BreadcrumbEllipsis, b as BreadcrumbEllipsisProps, c as BreadcrumbItem, d as BreadcrumbItemProps, e as BreadcrumbLink, f as BreadcrumbLinkProps, g as BreadcrumbList, h as BreadcrumbListProps, i as BreadcrumbPage, j as BreadcrumbPageProps, k as BreadcrumbProps, l as BreadcrumbSeparator, m as BreadcrumbSeparatorProps } from './Breadcrumb-RX-B_gDV.js';
4
4
  export { FooterCTA, FooterLink, FooterSection, FooterTrustBadge, LocaleDropdown, LocaleDropdownProps, LocaleOption, MDXOutboundLink, NavbarMegaMenu, NavbarMegaMenuItem, NavbarMegaMenuItemProps, NavbarMegaMenuProps, NavbarMegaMenuSection, NavbarMegaMenuSectionProps, NavbarMobileActions, NavbarMobileNavItem, NavbarMobileNavItemProps, NavbarMobileSeparator, NavbarV2, NavbarV2Actions, NavbarV2Brand, NavbarV2BrandProps, NavbarV2Props, NavbarV2Tab, NavbarV2TabMenu, NavbarV2TabMenuProps, NavbarV2TabProps, NavbarV2Tabs, OutboundClickEventDetail, OutboundLink, OutboundLinkProps, SiteFooter, SiteFooterProps, appendGovernedUTMs, appendUTMs, isExemptUrl } from './nav/index.js';
5
5
  export { S as SectionHeader, a as SectionHeaderProps, b as SectionShell, c as SectionShellProps } from './SectionShell-GlglHCzz.js';
6
- export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from './StatsSection-B8iD9L-o.js';
6
+ export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from './StatsSection-MfKKyqL1.js';
7
7
  export { Author, CardMetric, LogoItem, Media, MetricCounter, MetricCounterProps, Platform, PlatformBadge, PlatformBadgeProps, SocialProof, SocialProofCard, SocialProofCardProps, SocialProofCarousel, SocialProofCarouselProps, SocialProofFeatured, SocialProofFeaturedProps, SocialProofGrid, SocialProofGridProps, SocialProofLogos, SocialProofLogosProps, StarRating, StarRatingProps, VerticalVideoGrid, VerticalVideoGridProps, VideoLightbox, VideoLightboxProps } from './social-proof/index.js';
8
8
  export { AnalysisProgress, BehavioralSignals, ChangeEmail, ChangeEmailLabels, ChangeEmailProps, DataTable, DataTableBody, DataTableCell, DataTableHead, DataTableHeader, DataTableProps, DataTableRow, EngagementTip, FloatingTabBar, FloatingTabBarProps, ForgotPassword, ForgotPasswordLabels, ForgotPasswordProps, LeadProfile, LeadProfileState, LeadProfileView, LeadProfileViewProps, Login, LoginLabels, LoginProps, MBTIScore, NavItem, Shell, ShellProps, Sidebar, SidebarItem, SidebarItemProps, SidebarProps, SidebarSection, SidebarSectionProps, Signup, SignupLabels, SignupProps, TabItem, TabItemProps } from './admin/index.js';
9
9
  export { AgitationPoint, AnnouncementBar, AnnouncementBarProps, ArchitectureConnection, ArchitectureDiagram, ArchitectureDiagramProps, ArchitectureNode, ArchitectureNodeType, BeforeAfterBlock, BeforeAfterBlockProps, BeforeAfterItem, BeforeAfterSide, BookingEmbed, BookingEmbedProps, CaseStudyCard, CaseStudyCardProps, CaseStudyMetric, CaseStudySection, CaseStudySectionProps, ComparisonColumn, ComparisonRow, ComparisonTable, ComparisonTableProps, CompetitorDiff, CompetitorDiffItem, CompetitorDiffProps, ComplianceGrid, ComplianceGridProps, ComplianceItem, ComplianceStatus, EcosystemConnection, EcosystemDiagram, EcosystemDiagramProps, EcosystemLayer, EnterpriseSLA, EnterpriseSignalCategory, EnterpriseSignalItem, EnterpriseSignalStatus, EnterpriseSignaling, EnterpriseSignalingProps, EraSentiment, EvolutionEra, EvolutionTimeline, EvolutionTimelineProps, ExitIntentOverlay, ExitIntentOverlayProps, GuaranteeHighlight, GuaranteeHighlightProps, ICPFilter, ICPFilterItem, ICPFilterProps, IntegrationEntry, IntegrationShowcase, IntegrationShowcaseProps, IntelligenceBlock, IntelligenceBlockProps, IntelligenceCapability, IntelligenceMetric, IntentCTA, IntentCTAProps, IntentStage, IntentTriggerType, LeadCaptureForm, LeadCaptureFormProps, ManifestoAttribution, ManifestoBlock, ManifestoBlockProps, ObjectionFAQ, ObjectionFAQProps, ObjectionItem, PartnerBenefit, PartnerCalcInput, PartnerCalcOutput, PartnerDifferentiator, PartnerValueProp, PartnerValuePropProps, PricingCard, PricingCardProps, PricingFeature, PricingSection, PricingSectionProps, PricingToggle, PricingToggleProps, ProblemAgitation, ProblemAgitationProps, ProcessTimeline, ProcessTimelineProps, ROICalculator, ROICalculatorProps, ROIComparisonItem, SecurityBlock, SecurityBlockProps, SecurityCertification, SegmentSwitch, SegmentSwitchProps, StakeholderContent, StakeholderDefinition, StakeholderTabs, StakeholderTabsProps, StickyActionBar, StickyActionBarProps, TimelineStep, ValueAnchor, ValueAnchorInput, ValueAnchorOutput, ValueAnchorProps, VideoEmbed, VideoEmbedProps } from './marketing/index.js';
package/dist/index.js CHANGED
@@ -9,7 +9,7 @@ export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger }
9
9
  export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger } from './chunk-FAFAP4L5.js';
10
10
  export { Checkbox } from './chunk-7PX2AZ6Y.js';
11
11
  export { AppearancePanel, AppearanceProvider, hexToRgb, initializeAppearance, prefersReducedMotion, useAppearance } from './chunk-JPJN4YBC.js';
12
- export { CTASection, FeatureSection, HeroSection, StatsSection } from './chunk-PE2KJVRN.js';
12
+ export { CTASection, FeatureSection, HeroSection, StatsSection } from './chunk-ARC5KXBC.js';
13
13
  export { Stack } from './chunk-NN3TUHIH.js';
14
14
  export { LocaleDropdown, MDXOutboundLink, NavbarMegaMenu, NavbarMegaMenuItem, NavbarMegaMenuSection, NavbarMobileActions, NavbarMobileNavItem, NavbarMobileSeparator, NavbarV2, NavbarV2Actions, NavbarV2Brand, NavbarV2Tab, NavbarV2TabMenu, NavbarV2Tabs, SiteFooter } from './chunk-JNASH4OQ.js';
15
15
  export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './chunk-XU3OMQ7V.js';
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunk2ZNR2F2V_cjs = require('../chunk-2ZNR2F2V.cjs');
3
+ var chunkLSR7JYVH_cjs = require('../chunk-LSR7JYVH.cjs');
4
4
  require('../chunk-MQRB634A.cjs');
5
5
  var chunkEM7JHRYW_cjs = require('../chunk-EM7JHRYW.cjs');
6
6
  require('../chunk-MDB2WCRQ.cjs');
@@ -14,19 +14,19 @@ SectionHeader2.displayName = "SectionHeader";
14
14
 
15
15
  Object.defineProperty(exports, "CTASection", {
16
16
  enumerable: true,
17
- get: function () { return chunk2ZNR2F2V_cjs.CTASection; }
17
+ get: function () { return chunkLSR7JYVH_cjs.CTASection; }
18
18
  });
19
19
  Object.defineProperty(exports, "FeatureSection", {
20
20
  enumerable: true,
21
- get: function () { return chunk2ZNR2F2V_cjs.FeatureSection; }
21
+ get: function () { return chunkLSR7JYVH_cjs.FeatureSection; }
22
22
  });
23
23
  Object.defineProperty(exports, "HeroSection", {
24
24
  enumerable: true,
25
- get: function () { return chunk2ZNR2F2V_cjs.HeroSection; }
25
+ get: function () { return chunkLSR7JYVH_cjs.HeroSection; }
26
26
  });
27
27
  Object.defineProperty(exports, "StatsSection", {
28
28
  enumerable: true,
29
- get: function () { return chunk2ZNR2F2V_cjs.StatsSection; }
29
+ get: function () { return chunkLSR7JYVH_cjs.StatsSection; }
30
30
  });
31
31
  exports.SectionHeader = SectionHeader2;
32
32
  exports.SectionShell = SectionShell2;
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { a as SectionHeaderProps, c as SectionShellProps } from '../SectionShell-GlglHCzz.cjs';
3
- export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from '../StatsSection-wgd8Vge1.cjs';
3
+ export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from '../StatsSection-Dihy3zml.cjs';
4
4
 
5
5
  /**
6
6
  * Stable public wrapper for the sections entry.
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { a as SectionHeaderProps, c as SectionShellProps } from '../SectionShell-GlglHCzz.js';
3
- export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from '../StatsSection-B8iD9L-o.js';
3
+ export { C as CTASection, a as CTASectionProps, F as FeatureItem, b as FeatureSection, c as FeatureSectionProps, H as HeroSection, d as HeroSectionProps, S as StatItem, e as StatsSection, f as StatsSectionProps } from '../StatsSection-MfKKyqL1.js';
4
4
 
5
5
  /**
6
6
  * Stable public wrapper for the sections entry.
@@ -1,4 +1,4 @@
1
- export { CTASection, FeatureSection, HeroSection, StatsSection } from '../chunk-PE2KJVRN.js';
1
+ export { CTASection, FeatureSection, HeroSection, StatsSection } from '../chunk-ARC5KXBC.js';
2
2
  import '../chunk-NN3TUHIH.js';
3
3
  import { SectionShell, SectionHeader } from '../chunk-UFAJY2DM.js';
4
4
  import '../chunk-HN4PHABT.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesmind-ai/design-system",
3
- "version": "0.3.5",
3
+ "version": "0.3.6",
4
4
  "packageManager": "pnpm@9.15.9",
5
5
  "description": "Salesmind AI Design System",
6
6
  "license": "MIT",
@@ -1 +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":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport { Stack, Box } from '../LayoutPrimitives';\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 subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\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 subtitle,\n eyebrow,\n primaryCta,\n secondaryCta,\n media,\n mediaBrowserFrame = false,\n floatingElement,\n floatingPosition = 'bottom-left',\n withGrid = false,\n withGlow = false,\n align,\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 <span className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n {eyebrow}\n </span>\n )}\n <h1 className=\"ds-hero__title\">{title}</h1>\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=\"lg\"\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 <Box>{ContentBlock}</Box>\n <Box>{MediaBlock}</Box>\n </div>\n ) : (\n <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n {ContentBlock}\n {MediaBlock && (\n <Box\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 </Box>\n )}\n </Stack>\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 title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n ({ stats, 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\">\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"]}
@@ -1 +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":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport { Stack, Box } from '../LayoutPrimitives';\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 subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\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 subtitle,\n eyebrow,\n primaryCta,\n secondaryCta,\n media,\n mediaBrowserFrame = false,\n floatingElement,\n floatingPosition = 'bottom-left',\n withGrid = false,\n withGlow = false,\n align,\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 <span className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n {eyebrow}\n </span>\n )}\n <h1 className=\"ds-hero__title\">{title}</h1>\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=\"lg\"\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 <Box>{ContentBlock}</Box>\n <Box>{MediaBlock}</Box>\n </div>\n ) : (\n <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n {ContentBlock}\n {MediaBlock && (\n <Box\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 </Box>\n )}\n </Stack>\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 title?: React.ReactNode;\n subtitle?: React.ReactNode;\n eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n ({ stats, 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\">\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"]}