@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

package/dist/LandingPage/PageFAQs.js

@@ -1,42 +1,46 @@
-import _styled from "@emotion/styled/base";
-import { Box, Column, Disclosure, FlexBox, LayoutGrid, Markdown } from '@codecademy/gamut';
-import { theme } from '@codecademy/gamut-styles';
-import * as React from 'react';
-import { Title } from './Title';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FaqAnswer = /*#__PURE__*/_styled(Markdown, {
-  target: "e17s0ih10",
-  label: "FaqAnswer"
-})("p{font-size:1rem;", theme.breakpoints.md, "{font-size:1.25rem;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYW5kaW5nUGFnZS9QYWdlRkFRcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJrQyIsImZpbGUiOiIuLi8uLi9zcmMvTGFuZGluZ1BhZ2UvUGFnZUZBUXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQm94LFxuICBDb2x1bW4sXG4gIERpc2Nsb3N1cmUsXG4gIEZsZXhCb3gsXG4gIExheW91dEdyaWQsXG4gIE1hcmtkb3duLFxuICBXaXRoQ2hpbGRyZW5Qcm9wLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFRpdGxlIH0gZnJvbSAnLi9UaXRsZSc7XG5pbXBvcnQgeyBMYW5kaW5nUGFnZUJhc2VQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFBhZ2VGYXFzUHJvcHMgZXh0ZW5kcyBMYW5kaW5nUGFnZUJhc2VQcm9wcywgV2l0aENoaWxkcmVuUHJvcCB7XG4gIGZhcXM/OiB7XG4gICAgcXVlc3Rpb246IHN0cmluZztcbiAgICBhbnN3ZXI6IHN0cmluZztcbiAgfVtdO1xufVxuXG5jb25zdCBGYXFBbnN3ZXIgPSBzdHlsZWQoTWFya2Rvd24pYFxuICBwIHtcbiAgICBmb250LXNpemU6IDFyZW07XG4gICAgJHt0aGVtZS5icmVha3BvaW50cy5tZH0ge1xuICAgICAgZm9udC1zaXplOiAxLjI1cmVtO1xuICAgIH1cbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFBhZ2VGYXFzOiBSZWFjdC5GQzxQYWdlRmFxc1Byb3BzPiA9ICh7IHRpdGxlLCBmYXFzIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8TGF5b3V0R3JpZCBwPXswfSBtPXswfT5cbiAgICAgIDxDb2x1bW4gc2l6ZT17MTJ9IHA9ezB9IG09ezB9PlxuICAgICAgICB7dGl0bGUgJiYgKFxuICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCIgbWI9ezMyfT5cbiAgICAgICAgICAgIDxUaXRsZSBpc1BhZ2VIZWFkaW5nPXtmYWxzZX0+e3RpdGxlfTwvVGl0bGU+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICApfVxuICAgICAgICB7ZmFxcyAmJlxuICAgICAgICAgIGZhcXMubGVuZ3RoID4gMCAmJlxuICAgICAgICAgIGZhcXMubWFwKChmYXEpID0+IChcbiAgICAgICAgICAgIDxCb3ggYm9yZGVyQm90dG9tPXsxfSBrZXk9e2ZhcS5xdWVzdGlvbn0+XG4gICAgICAgICAgICAgIDxEaXNjbG9zdXJlXG4gICAgICAgICAgICAgICAgaGVhZGluZz17ZmFxLnF1ZXN0aW9ufVxuICAgICAgICAgICAgICAgIGhhc0JvcmRlcj17ZmFsc2V9XG4gICAgICAgICAgICAgICAgdmFyaWFudD1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgICAgICAgICBib2R5PXs8RmFxQW5zd2VyIHRleHQ9e2ZhcS5hbnN3ZXJ9IC8+fVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgKSl9XG4gICAgICA8L0NvbHVtbj5cbiAgICA8L0xheW91dEdyaWQ+XG4gICk7XG59O1xuIl19 */"));
-export const PageFaqs = ({
-  title,
-  faqs
-}) => {
-  return /*#__PURE__*/_jsx(LayoutGrid, {
-    p: 0,
-    m: 0,
-    children: /*#__PURE__*/_jsxs(Column, {
-      size: 12,
-      p: 0,
-      m: 0,
-      children: [title && /*#__PURE__*/_jsx(FlexBox, {
-        justifyContent: "center",
-        mb: 32,
-        children: /*#__PURE__*/_jsx(Title, {
-          isPageHeading: false,
-          children: title
-        })
-      }), faqs && faqs.length > 0 && faqs.map(faq => /*#__PURE__*/_jsx(Box, {
-        borderBottom: 1,
-        children: /*#__PURE__*/_jsx(Disclosure, {
-          heading: faq.question,
-          hasBorder: false,
-          variant: "transparent",
-          body: /*#__PURE__*/_jsx(FaqAnswer, {
-            text: faq.answer
-          })
-        })
-      }, faq.question))]
-    })
-  });
-};
+import { Title } from "./Title.js";
+import { Box, Column, Disclosure, FlexBox, LayoutGrid, Markdown } from "@codecademy/gamut";
+import { theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LandingPage/PageFAQs.tsx
+const FaqAnswer = styled(Markdown)`
+  p {
+    font-size: 1rem;
+    ${theme.breakpoints.md} {
+      font-size: 1.25rem;
+    }
+  }
+`;
+const PageFaqs = ({ title, faqs }) => {
+	return /* @__PURE__ */ jsx(LayoutGrid, {
+		p: 0,
+		m: 0,
+		children: /* @__PURE__ */ jsxs(Column, {
+			size: 12,
+			p: 0,
+			m: 0,
+			children: [title && /* @__PURE__ */ jsx(FlexBox, {
+				justifyContent: "center",
+				mb: 32,
+				children: /* @__PURE__ */ jsx(Title, {
+					isPageHeading: false,
+					children: title
+				})
+			}), faqs && faqs.length > 0 && faqs.map((faq) => /* @__PURE__ */ jsx(Box, {
+				borderBottom: 1,
+				children: /* @__PURE__ */ jsx(Disclosure, {
+					heading: faq.question,
+					hasBorder: false,
+					variant: "transparent",
+					body: /* @__PURE__ */ jsx(FaqAnswer, { text: faq.answer })
+				})
+			}, faq.question))]
+		})
+	});
+};
+
+//#endregion
+export { PageFaqs };

package/dist/LandingPage/PageFeatures.cjs

@@ -0,0 +1,99 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_CTA = require('./CTA.cjs');
+const require_Description = require('./Description.cjs');
+const require_Title = require('./Title.cjs');
+const require_Feature = require('./Feature.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/LandingPage/PageFeatures.tsx
+const rowRenderEach = (items, itemRenderer) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+		flexDirection: {
+			_: "column",
+			sm: "row"
+		},
+		as: "ul",
+		pl: 0,
+		gap: { sm: 32 },
+		children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			as: "li",
+			flex: 1,
+			children: itemRenderer(item)
+		}, i))
+	});
+};
+const gridRenderEach = (maxCols, items, itemRenderer) => {
+	const size = {
+		_: 12,
+		sm: 12 / maxCols
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.LayoutGrid, {
+		columnGap: {
+			_: 8,
+			sm: 32
+		},
+		as: "ul",
+		children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Column, {
+			size,
+			as: "li",
+			children: itemRenderer(item)
+		}, i))
+	});
+};
+const renderEach = (maxCols, items, itemRenderer) => {
+	if (maxCols === void 0) return rowRenderEach(items, itemRenderer);
+	if (maxCols > 0 && maxCols <= 4) return gridRenderEach(maxCols, items, itemRenderer);
+	return null;
+};
+const PageFeatures = ({ title, desc, cta, maxCols, features, featuresMedia, testId, onAnchorClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	"data-testid": testId,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Title.Title, {
+			isPageHeading: false,
+			children: title
+		}),
+		desc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Description.Description, {
+			text: desc,
+			onAnchorClick
+		}),
+		cta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			mt: 32,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CTA.CTA, {
+				href: cta.href,
+				onClick: cta.onClick,
+				buttonType: cta.buttonType,
+				children: cta.text
+			})
+		})
+	] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+		mt: 16,
+		children: renderEach(maxCols, features, ({ testId: testId$1, imgSrc, imgAlt, statText, title: featTitle, desc: desc$1 }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Feature.Feature, {
+			testId: testId$1,
+			children: [
+				featuresMedia === "image" && imgSrc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedImage, {
+					src: imgSrc,
+					alt: imgAlt ?? ""
+				}),
+				featuresMedia === "icon" && imgSrc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedIcon, {
+					src: imgSrc,
+					alt: imgAlt ?? ""
+				}),
+				featuresMedia === "stat" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedStat, { children: statText }),
+				featTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedTitle, {
+					as: desc$1 ? title ? "h3" : "h2" : "div",
+					children: featTitle
+				}),
+				desc$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedDescription, {
+					desc: desc$1,
+					onAnchorClick
+				})
+			]
+		}))
+	})]
+});
+
+//#endregion
+exports.PageFeatures = PageFeatures;

package/dist/LandingPage/PageFeatures.d.cts

@@ -0,0 +1,20 @@
+import { LandingPageBaseProps } from "./types.cjs";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageFeatures.d.ts
+interface PageFeaturesProps extends LandingPageBaseProps, WithChildrenProp {
+  maxCols?: 1 | 2 | 3 | 4;
+  featuresMedia?: 'image' | 'icon' | 'stat';
+  features: {
+    title?: string;
+    desc?: string;
+    imgSrc?: string;
+    imgAlt?: string;
+    statText?: string;
+    testId?: string;
+  }[];
+}
+declare const PageFeatures: React$1.FC<PageFeaturesProps>;
+//#endregion
+export { PageFeatures, PageFeaturesProps };

package/dist/LandingPage/PageFeatures.d.ts

@@ -1,16 +1,20 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-import { LandingPageBaseProps } from './types';
-export interface PageFeaturesProps extends LandingPageBaseProps, WithChildrenProp {
-    maxCols?: 1 | 2 | 3 | 4;
-    featuresMedia?: 'image' | 'icon' | 'stat';
-    features: {
-        title?: string;
-        desc?: string;
-        imgSrc?: string;
-        imgAlt?: string;
-        statText?: string;
-        testId?: string;
-    }[];
+import { LandingPageBaseProps } from "./types.js";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageFeatures.d.ts
+interface PageFeaturesProps extends LandingPageBaseProps, WithChildrenProp {
+  maxCols?: 1 | 2 | 3 | 4;
+  featuresMedia?: 'image' | 'icon' | 'stat';
+  features: {
+    title?: string;
+    desc?: string;
+    imgSrc?: string;
+    imgAlt?: string;
+    statText?: string;
+    testId?: string;
+  }[];
 }
-export declare const PageFeatures: React.FC<PageFeaturesProps>;
+declare const PageFeatures: React$1.FC<PageFeaturesProps>;
+//#endregion
+export { PageFeatures, PageFeaturesProps };

package/dist/LandingPage/PageFeatures.js

@@ -1,112 +1,97 @@
-import { Box, Column, FlexBox, LayoutGrid } from '@codecademy/gamut';
-import * as React from 'react';
-import { CTA } from './CTA';
-import { Description } from './Description';
-import { Feature, FeaturedDescription, FeaturedIcon, FeaturedImage, FeaturedStat, FeaturedTitle } from './Feature';
-import { Title } from './Title';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CTA } from "./CTA.js";
+import { Description } from "./Description.js";
+import { Title } from "./Title.js";
+import { Feature, FeaturedDescription, FeaturedIcon, FeaturedImage, FeaturedStat, FeaturedTitle } from "./Feature.js";
+import { Box, Column, FlexBox, LayoutGrid } from "@codecademy/gamut";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LandingPage/PageFeatures.tsx
 const rowRenderEach = (items, itemRenderer) => {
-  /* eslint-disable react/no-array-index-key */
-  return /*#__PURE__*/_jsx(FlexBox, {
-    flexDirection: {
-      _: 'column',
-      sm: 'row'
-    },
-    as: "ul",
-    pl: 0,
-    gap: {
-      sm: 32
-    },
-    children: items.map((item, i) => /*#__PURE__*/_jsx(FlexBox, {
-      as: "li",
-      flex: 1,
-      children: itemRenderer(item)
-    }, i))
-  });
-  /* eslint-enable react/no-array-index-key */
+	return /* @__PURE__ */ jsx(FlexBox, {
+		flexDirection: {
+			_: "column",
+			sm: "row"
+		},
+		as: "ul",
+		pl: 0,
+		gap: { sm: 32 },
+		children: items.map((item, i) => /* @__PURE__ */ jsx(FlexBox, {
+			as: "li",
+			flex: 1,
+			children: itemRenderer(item)
+		}, i))
+	});
 };
 const gridRenderEach = (maxCols, items, itemRenderer) => {
-  const size = {
-    _: 12,
-    sm: 12 / maxCols
-  };
-  /* eslint-disable react/no-array-index-key */
-  return /*#__PURE__*/_jsx(LayoutGrid, {
-    columnGap: {
-      _: 8,
-      sm: 32
-    },
-    as: "ul",
-    children: items.map((item, i) => /*#__PURE__*/_jsx(Column, {
-      size: size,
-      as: "li",
-      children: itemRenderer(item)
-    }, i))
-  });
-  /* eslint-enable react/no-array-index-key */
+	const size = {
+		_: 12,
+		sm: 12 / maxCols
+	};
+	return /* @__PURE__ */ jsx(LayoutGrid, {
+		columnGap: {
+			_: 8,
+			sm: 32
+		},
+		as: "ul",
+		children: items.map((item, i) => /* @__PURE__ */ jsx(Column, {
+			size,
+			as: "li",
+			children: itemRenderer(item)
+		}, i))
+	});
 };
 const renderEach = (maxCols, items, itemRenderer) => {
-  if (maxCols === undefined) {
-    return rowRenderEach(items, itemRenderer);
-  }
-  if (maxCols > 0 && maxCols <= 4) {
-    return gridRenderEach(maxCols, items, itemRenderer);
-  }
-  return null;
+	if (maxCols === void 0) return rowRenderEach(items, itemRenderer);
+	if (maxCols > 0 && maxCols <= 4) return gridRenderEach(maxCols, items, itemRenderer);
+	return null;
 };
-export const PageFeatures = ({
-  title,
-  desc,
-  cta,
-  maxCols,
-  features,
-  featuresMedia,
-  testId,
-  onAnchorClick
-}) => /*#__PURE__*/_jsxs("div", {
-  "data-testid": testId,
-  children: [/*#__PURE__*/_jsxs("div", {
-    children: [title && /*#__PURE__*/_jsx(Title, {
-      isPageHeading: false,
-      children: title
-    }), desc && /*#__PURE__*/_jsx(Description, {
-      text: desc,
-      onAnchorClick: onAnchorClick
-    }), cta && /*#__PURE__*/_jsx(Box, {
-      mt: 32,
-      children: /*#__PURE__*/_jsx(CTA, {
-        href: cta.href,
-        onClick: cta.onClick,
-        buttonType: cta.buttonType,
-        children: cta.text
-      })
-    })]
-  }), /*#__PURE__*/_jsx(Box, {
-    mt: 16,
-    children: renderEach(maxCols, features, ({
-      testId,
-      imgSrc,
-      imgAlt,
-      statText,
-      title: featTitle,
-      desc
-    }) => /*#__PURE__*/_jsxs(Feature, {
-      testId: testId,
-      children: [featuresMedia === 'image' && imgSrc && /*#__PURE__*/_jsx(FeaturedImage, {
-        src: imgSrc,
-        alt: imgAlt ?? ''
-      }), featuresMedia === 'icon' && imgSrc && /*#__PURE__*/_jsx(FeaturedIcon, {
-        src: imgSrc,
-        alt: imgAlt ?? ''
-      }), featuresMedia === 'stat' && /*#__PURE__*/_jsx(FeaturedStat, {
-        children: statText
-      }), featTitle && /*#__PURE__*/_jsx(FeaturedTitle, {
-        as: desc ? title ? 'h3' : 'h2' : 'div',
-        children: featTitle
-      }), desc && /*#__PURE__*/_jsx(FeaturedDescription, {
-        desc: desc,
-        onAnchorClick: onAnchorClick
-      })]
-    }))
-  })]
-});
+const PageFeatures = ({ title, desc, cta, maxCols, features, featuresMedia, testId, onAnchorClick }) => /* @__PURE__ */ jsxs("div", {
+	"data-testid": testId,
+	children: [/* @__PURE__ */ jsxs("div", { children: [
+		title && /* @__PURE__ */ jsx(Title, {
+			isPageHeading: false,
+			children: title
+		}),
+		desc && /* @__PURE__ */ jsx(Description, {
+			text: desc,
+			onAnchorClick
+		}),
+		cta && /* @__PURE__ */ jsx(Box, {
+			mt: 32,
+			children: /* @__PURE__ */ jsx(CTA, {
+				href: cta.href,
+				onClick: cta.onClick,
+				buttonType: cta.buttonType,
+				children: cta.text
+			})
+		})
+	] }), /* @__PURE__ */ jsx(Box, {
+		mt: 16,
+		children: renderEach(maxCols, features, ({ testId: testId$1, imgSrc, imgAlt, statText, title: featTitle, desc: desc$1 }) => /* @__PURE__ */ jsxs(Feature, {
+			testId: testId$1,
+			children: [
+				featuresMedia === "image" && imgSrc && /* @__PURE__ */ jsx(FeaturedImage, {
+					src: imgSrc,
+					alt: imgAlt ?? ""
+				}),
+				featuresMedia === "icon" && imgSrc && /* @__PURE__ */ jsx(FeaturedIcon, {
+					src: imgSrc,
+					alt: imgAlt ?? ""
+				}),
+				featuresMedia === "stat" && /* @__PURE__ */ jsx(FeaturedStat, { children: statText }),
+				featTitle && /* @__PURE__ */ jsx(FeaturedTitle, {
+					as: desc$1 ? title ? "h3" : "h2" : "div",
+					children: featTitle
+				}),
+				desc$1 && /* @__PURE__ */ jsx(FeaturedDescription, {
+					desc: desc$1,
+					onAnchorClick
+				})
+			]
+		}))
+	})]
+});
+
+//#endregion
+export { PageFeatures };

package/dist/LandingPage/PageFeaturesEnhanced.cjs

@@ -0,0 +1,152 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_CTA = require('./CTA.cjs');
+const require_Description = require('./Description.cjs');
+const require_Title = require('./Title.cjs');
+const require_TitleWithEyebrow = require('./TitleWithEyebrow.cjs');
+const require_Feature = require('./Feature.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/LandingPage/PageFeaturesEnhanced.tsx
+const rowRenderEach = (items, itemRenderer) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+		flexDirection: {
+			_: "column",
+			sm: "row"
+		},
+		as: "ul",
+		pl: 0,
+		mb: 0,
+		gap: { sm: 32 },
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			as: "li",
+			flex: 1,
+			children: itemRenderer(item)
+		}, item.title))
+	});
+};
+const gridRenderEach = (maxCols, items, itemRenderer) => {
+	const size = {
+		_: 12,
+		xs: 12 / (maxCols / 2),
+		lg: 12 / maxCols
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.LayoutGrid, {
+		gap: 32,
+		as: "ul",
+		pl: 0,
+		mb: 0,
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Column, {
+			size,
+			as: "li",
+			children: itemRenderer(item)
+		}, item.title))
+	});
+};
+const renderEach = (maxCols, items, itemRenderer) => {
+	if (maxCols === void 0) return rowRenderEach(items, itemRenderer);
+	if (maxCols > 0 && maxCols <= 4) return gridRenderEach(maxCols, items, itemRenderer);
+	return null;
+};
+const PageFeaturesEnhanced = ({ eyebrow, title, desc, cta, maxCols, features, featuresMedia, testId, onAnchorClick }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": testId,
+		children: [
+			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+				justifyContent: "center",
+				textAlign: "center",
+				mb: 8,
+				children: eyebrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TitleWithEyebrow.TitleWithEyebrow, {
+					title,
+					eyebrow,
+					isPageHeading: false,
+					titleStyle: {
+						fontWeight: 700,
+						fontSize: {
+							_: 44,
+							sm: 44
+						}
+					},
+					eyebrowStyle: {
+						fontWeight: "lighter",
+						fontSize: {
+							_: 16,
+							sm: 16
+						}
+					}
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Title.Title, {
+					isPageHeading: false,
+					children: title
+				})
+			}),
+			desc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+				justifyContent: "center",
+				textAlign: "center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Description.Description, {
+					text: desc,
+					onAnchorClick
+				})
+			}),
+			cta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				mt: 32,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CTA.CTA, {
+					href: cta.href,
+					onClick: cta.onClick,
+					buttonType: cta.buttonType,
+					children: cta.text
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_styles.ColorMode, {
+				mode: "dark",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+					mt: 16,
+					children: renderEach(maxCols, features, ({ testId: testId$1, imgSrc, imgAlt, statText, title: featTitle, desc: desc$1 }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut_styles.Background, {
+						bg: "white-300",
+						borderRadius: "lg",
+						py: 24,
+						px: 16,
+						color: "white",
+						"data-testid": testId$1,
+						children: [
+							featuresMedia === "image" && imgSrc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedImage, {
+								src: imgSrc,
+								alt: imgAlt ?? ""
+							}),
+							featuresMedia === "icon" && imgSrc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedIcon, {
+								src: imgSrc,
+								alt: imgAlt ?? "",
+								props: {
+									mb: 16,
+									width: "48px",
+									height: "48px"
+								}
+							}),
+							featuresMedia === "stat" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedStat, { children: statText }),
+							featTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedTitle, {
+								as: desc$1 ? title ? "h3" : "h2" : "div",
+								props: {
+									fontSize: {
+										_: 20,
+										lg: 20
+									},
+									mb: 16
+								},
+								children: featTitle
+							}),
+							desc$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Feature.FeaturedDescription, {
+								desc: desc$1,
+								onAnchorClick
+							})
+						]
+					}))
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+exports.PageFeaturesEnhanced = PageFeaturesEnhanced;

package/dist/LandingPage/PageFeaturesEnhanced.d.cts

@@ -0,0 +1,11 @@
+import { Eyebrow } from "./PageSingleFeature.cjs";
+import { PageFeaturesProps } from "./PageFeatures.cjs";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageFeaturesEnhanced.d.ts
+interface PageFeaturesEnhancedProps extends PageFeaturesProps {
+  eyebrow?: Eyebrow;
+}
+declare const PageFeaturesEnhanced: React$1.FC<PageFeaturesEnhancedProps>;
+//#endregion
+export { PageFeaturesEnhanced, PageFeaturesEnhancedProps };

package/dist/LandingPage/PageFeaturesEnhanced.d.ts

@@ -1,7 +1,11 @@
-import * as React from 'react';
-import { PageFeaturesProps } from './PageFeatures';
-import { Eyebrow } from './PageSingleFeature';
-export interface PageFeaturesEnhancedProps extends PageFeaturesProps {
-    eyebrow?: Eyebrow;
+import { Eyebrow } from "./PageSingleFeature.js";
+import { PageFeaturesProps } from "./PageFeatures.js";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageFeaturesEnhanced.d.ts
+interface PageFeaturesEnhancedProps extends PageFeaturesProps {
+  eyebrow?: Eyebrow;
 }
-export declare const PageFeaturesEnhanced: React.FC<PageFeaturesEnhancedProps>;
+declare const PageFeaturesEnhanced: React$1.FC<PageFeaturesEnhancedProps>;
+//#endregion
+export { PageFeaturesEnhanced, PageFeaturesEnhancedProps };