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

package/dist/LandingPage/PageTestimonials.d.ts

@@ -1,21 +1,25 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-import { Eyebrow } from './PageSingleFeature';
-import { LandingPageBaseProps } from './types';
-export interface LiveLearningTestimonialItem {
-    image: {
-        url: string;
-    };
-    firstName: string;
-    lastName: string;
-    jobTitle: string;
-    company: string;
-    shortQuote: string;
-    longQuote: string;
-    href: string;
+import { LandingPageBaseProps } from "./types.js";
+import { Eyebrow } from "./PageSingleFeature.js";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageTestimonials.d.ts
+interface LiveLearningTestimonialItem {
+  image: {
+    url: string;
+  };
+  firstName: string;
+  lastName: string;
+  jobTitle: string;
+  company: string;
+  shortQuote: string;
+  longQuote: string;
+  href: string;
 }
-export interface PageTestimonialsProps extends LandingPageBaseProps, WithChildrenProp {
-    eyebrow?: Eyebrow;
-    testimonials?: LiveLearningTestimonialItem[];
+interface PageTestimonialsProps extends LandingPageBaseProps, WithChildrenProp {
+  eyebrow?: Eyebrow;
+  testimonials?: LiveLearningTestimonialItem[];
 }
-export declare const PageTestimonials: React.FC<PageTestimonialsProps>;
+declare const PageTestimonials: React$1.FC<PageTestimonialsProps>;
+//#endregion
+export { LiveLearningTestimonialItem, PageTestimonials, PageTestimonialsProps };

package/dist/LandingPage/PageTestimonials.js

@@ -1,113 +1,105 @@
-import _styled from "@emotion/styled/base";
-import { Box, Card, Column, FlexBox, LayoutGrid, Markdown, Text } from '@codecademy/gamut';
-import { MiniQuoteIcon, PersonFilledIcon } from '@codecademy/gamut-icons';
-import { theme } from '@codecademy/gamut-styles';
-import * as React from 'react';
-import { Avatar } from '../Avatar';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const UserProfile = ({
-  fullName,
-  jobTitle,
-  image
-}) => /*#__PURE__*/_jsxs(FlexBox, {
-  flexDirection: "row",
-  gap: 12,
-  alignItems: "center",
-  children: [/*#__PURE__*/_jsx(FlexBox, {
-    background: theme.colors['blue-300'],
-    borderRadius: "full",
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 1,
-    borderColor: "black",
-    borderStyle: "solid",
-    minWidth: 64,
-    minHeight: 64,
-    overflow: "hidden",
-    children: image ? /*#__PURE__*/_jsx(Avatar, {
-      src: image,
-      alt: fullName || 'N/A',
-      size: 64,
-      disableDropshadow: true
-    }) : /*#__PURE__*/_jsx(PersonFilledIcon, {
-      color: "black",
-      size: 60,
-      mt: 12,
-      borderRadius: "full"
-    })
-  }), /*#__PURE__*/_jsxs(Box, {
-    display: "flex",
-    flexDirection: "column",
-    gap: 4,
-    children: [/*#__PURE__*/_jsx(Text, {
-      fontWeight: "bold",
-      fontSize: 16,
-      children: fullName
-    }), /*#__PURE__*/_jsx(Text, {
-      fontSize: 16,
-      color: "gray-800",
-      children: jobTitle
-    })]
-  })]
+import { Avatar } from "../Avatar/index.js";
+import { Box, Card, Column, FlexBox, LayoutGrid, Markdown, Text } from "@codecademy/gamut";
+import { theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MiniQuoteIcon, PersonFilledIcon } from "@codecademy/gamut-icons";
+
+//#region src/LandingPage/PageTestimonials.tsx
+const UserProfile = ({ fullName, jobTitle, image }) => /* @__PURE__ */ jsxs(FlexBox, {
+	flexDirection: "row",
+	gap: 12,
+	alignItems: "center",
+	children: [/* @__PURE__ */ jsx(FlexBox, {
+		background: theme.colors["blue-300"],
+		borderRadius: "full",
+		alignItems: "center",
+		justifyContent: "center",
+		borderWidth: 1,
+		borderColor: "black",
+		borderStyle: "solid",
+		minWidth: 64,
+		minHeight: 64,
+		overflow: "hidden",
+		children: image ? /* @__PURE__ */ jsx(Avatar, {
+			src: image,
+			alt: fullName || "N/A",
+			size: 64,
+			disableDropshadow: true
+		}) : /* @__PURE__ */ jsx(PersonFilledIcon, {
+			color: "black",
+			size: 60,
+			mt: 12,
+			borderRadius: "full"
+		})
+	}), /* @__PURE__ */ jsxs(Box, {
+		display: "flex",
+		flexDirection: "column",
+		gap: 4,
+		children: [/* @__PURE__ */ jsx(Text, {
+			fontWeight: "bold",
+			fontSize: 16,
+			children: fullName
+		}), /* @__PURE__ */ jsx(Text, {
+			fontSize: 16,
+			color: "gray-800",
+			children: jobTitle
+		})]
+	})]
 });
-const StyledCard = /*#__PURE__*/_styled(Card, {
-  target: "e1sph7qk0",
-  label: "StyledCard"
-})(({
-  bg
-}) => `
+const StyledCard = styled(Card)(({ bg }) => `
   background: ${bg};
   display: flex;
   flex-direction: column;
-`, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYW5kaW5nUGFnZS9QYWdlVGVzdGltb25pYWxzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RW1CIiwiZmlsZSI6Ii4uLy4uL3NyYy9MYW5kaW5nUGFnZS9QYWdlVGVzdGltb25pYWxzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJveCxcbiAgQ2FyZCxcbiAgQ29sdW1uLFxuICBGbGV4Qm94LFxuICBMYXlvdXRHcmlkLFxuICBNYXJrZG93bixcbiAgVGV4dCxcbiAgV2l0aENoaWxkcmVuUHJvcCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWluaVF1b3RlSWNvbiwgUGVyc29uRmlsbGVkSWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXZhdGFyIH0gZnJvbSAnLi4vQXZhdGFyJztcbmltcG9ydCB7IEV5ZWJyb3cgfSBmcm9tICcuL1BhZ2VTaW5nbGVGZWF0dXJlJztcbmltcG9ydCB7IExhbmRpbmdQYWdlQmFzZVByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGl2ZUxlYXJuaW5nVGVzdGltb25pYWxJdGVtIHtcbiAgaW1hZ2U6IHtcbiAgICB1cmw6IHN0cmluZztcbiAgfTtcbiAgZmlyc3ROYW1lOiBzdHJpbmc7XG4gIGxhc3ROYW1lOiBzdHJpbmc7XG4gIGpvYlRpdGxlOiBzdHJpbmc7XG4gIGNvbXBhbnk6IHN0cmluZztcbiAgc2hvcnRRdW90ZTogc3RyaW5nO1xuICBsb25nUXVvdGU6IHN0cmluZztcbiAgaHJlZjogc3RyaW5nO1xufVxuXG5jb25zdCBVc2VyUHJvZmlsZSA9ICh7XG4gIGZ1bGxOYW1lLFxuICBqb2JUaXRsZSxcbiAgaW1hZ2UsXG59OiB7XG4gIGZ1bGxOYW1lOiBzdHJpbmc7XG4gIGpvYlRpdGxlOiBzdHJpbmc7XG4gIGltYWdlOiBzdHJpbmc7XG59KTogUmVhY3ROb2RlID0+IChcbiAgPEZsZXhCb3ggZmxleERpcmVjdGlvbj1cInJvd1wiIGdhcD17MTJ9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICA8RmxleEJveFxuICAgICAgYmFja2dyb3VuZD17dGhlbWUuY29sb3JzWydibHVlLTMwMCddfVxuICAgICAgYm9yZGVyUmFkaXVzPVwiZnVsbFwiXG4gICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgIGJvcmRlcldpZHRoPXsxfVxuICAgICAgYm9yZGVyQ29sb3I9XCJibGFja1wiXG4gICAgICBib3JkZXJTdHlsZT1cInNvbGlkXCJcbiAgICAgIG1pbldpZHRoPXs2NH1cbiAgICAgIG1pbkhlaWdodD17NjR9XG4gICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgPlxuICAgICAge2ltYWdlID8gKFxuICAgICAgICA8QXZhdGFyXG4gICAgICAgICAgc3JjPXtpbWFnZX1cbiAgICAgICAgICBhbHQ9e2Z1bGxOYW1lIHx8ICdOL0EnfVxuICAgICAgICAgIHNpemU9ezY0fVxuICAgICAgICAgIGRpc2FibGVEcm9wc2hhZG93XG4gICAgICAgIC8+XG4gICAgICApIDogKFxuICAgICAgICA8UGVyc29uRmlsbGVkSWNvbiBjb2xvcj1cImJsYWNrXCIgc2l6ZT17NjB9IG10PXsxMn0gYm9yZGVyUmFkaXVzPVwiZnVsbFwiIC8+XG4gICAgICApfVxuICAgIDwvRmxleEJveD5cbiAgICA8Qm94IGRpc3BsYXk9XCJmbGV4XCIgZmxleERpcmVjdGlvbj1cImNvbHVtblwiIGdhcD17NH0+XG4gICAgICA8VGV4dCBmb250V2VpZ2h0PVwiYm9sZFwiIGZvbnRTaXplPXsxNn0+XG4gICAgICAgIHtmdWxsTmFtZX1cbiAgICAgIDwvVGV4dD5cbiAgICAgIDxUZXh0IGZvbnRTaXplPXsxNn0gY29sb3I9XCJncmF5LTgwMFwiPlxuICAgICAgICB7am9iVGl0bGV9XG4gICAgICA8L1RleHQ+XG4gICAgPC9Cb3g+XG4gIDwvRmxleEJveD5cbik7XG5cbmNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQoQ2FyZCkoXG4gICh7IGJnIH06IHsgYmc/OiBzdHJpbmcgfSkgPT4gYFxuICBiYWNrZ3JvdW5kOiAke2JnfTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbmBcbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUGFnZVRlc3RpbW9uaWFsc1Byb3BzXG4gIGV4dGVuZHMgTGFuZGluZ1BhZ2VCYXNlUHJvcHMsXG4gICAgV2l0aENoaWxkcmVuUHJvcCB7XG4gIGV5ZWJyb3c/OiBFeWVicm93O1xuICB0ZXN0aW1vbmlhbHM/OiBMaXZlTGVhcm5pbmdUZXN0aW1vbmlhbEl0ZW1bXTtcbn1cblxuY29uc3QgVGVzdGltb25pYWxDYXJkID0gKHtcbiAgdGVzdGltb25pYWwsXG4gIGJnLFxufToge1xuICB0ZXN0aW1vbmlhbDogTGl2ZUxlYXJuaW5nVGVzdGltb25pYWxJdGVtO1xuICBiZz86IHN0cmluZztcbn0pOiBSZWFjdE5vZGUgPT4gKFxuICA8U3R5bGVkQ2FyZCBzaGFkb3c9XCJwYXR0ZXJuTGVmdFwiIGJvcmRlclJhZGl1cz1cImxnXCIgcD17MjR9IGJnPXtiZ30+XG4gICAgPE1pbmlRdW90ZUljb24gc2l6ZT17MTh9IG10PVwiYXV0b1wiIC8+XG4gICAgPEJveCBtdD17MTJ9IG1iPXsyNH0+XG4gICAgICA8TWFya2Rvd24gdGV4dD17dGVzdGltb25pYWw/LmxvbmdRdW90ZX0gLz5cbiAgICA8L0JveD5cbiAgICA8VXNlclByb2ZpbGVcbiAgICAgIGZ1bGxOYW1lPXt0ZXN0aW1vbmlhbD8uZmlyc3ROYW1lICsgJyAnICsgdGVzdGltb25pYWw/Lmxhc3ROYW1lfVxuICAgICAgam9iVGl0bGU9e3Rlc3RpbW9uaWFsPy5qb2JUaXRsZX1cbiAgICAgIGltYWdlPXt0ZXN0aW1vbmlhbD8uaW1hZ2U/LnVybH1cbiAgICAvPlxuICA8L1N0eWxlZENhcmQ+XG4pO1xuXG5jb25zdCBUZXN0aW1vbmlhbENhcmRzID0gKHtcbiAgdGVzdGltb25pYWxzLFxufToge1xuICB0ZXN0aW1vbmlhbHM6IExpdmVMZWFybmluZ1Rlc3RpbW9uaWFsSXRlbVtdO1xufSk6IFJlYWN0Tm9kZSA9PiB7XG4gIGNvbnN0IGJhY2tncm91bmRWYXJpYW50cyA9IFtcbiAgICB0aGVtZS5jb2xvcnNbJ3llbGxvdy0wJ10sXG4gICAgdGhlbWUuY29sb3JzWydwaW5rLTAnXSxcbiAgICB0aGVtZS5jb2xvcnNbJ2JsdWUtMCddLFxuICBdO1xuICByZXR1cm4gdGVzdGltb25pYWxzPy5tYXAoKGl0ZW0sIGluZGV4KSA9PiAoXG4gICAgPENvbHVtblxuICAgICAga2V5PXtpdGVtLmxhc3ROYW1lLnJlcGxhY2VBbGwoJyAnLCAnLScpfVxuICAgICAgc2l6ZT17e1xuICAgICAgICBfOiAxMixcbiAgICAgICAgc206IDYsXG4gICAgICAgIG1kOiA0LFxuICAgICAgfX1cbiAgICA+XG4gICAgICA8VGVzdGltb25pYWxDYXJkXG4gICAgICAgIHRlc3RpbW9uaWFsPXtpdGVtfVxuICAgICAgICBiZz17YmFja2dyb3VuZFZhcmlhbnRzW2luZGV4ICUgYmFja2dyb3VuZFZhcmlhbnRzLmxlbmd0aF19XG4gICAgICAvPlxuICAgIDwvQ29sdW1uPlxuICApKTtcbn07XG5cbmV4cG9ydCBjb25zdCBQYWdlVGVzdGltb25pYWxzOiBSZWFjdC5GQzxQYWdlVGVzdGltb25pYWxzUHJvcHM+ID0gKHtcbiAgdGVzdGltb25pYWxzLFxuICB0ZXN0SWQsXG59KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPExheW91dEdyaWQgZGF0YS10ZXN0aWQ9e3Rlc3RJZH0gZ2FwPXszMn0+XG4gICAgICB7dGVzdGltb25pYWxzICYmIHRlc3RpbW9uaWFscz8ubGVuZ3RoID4gMCAmJiAoXG4gICAgICAgIDxUZXN0aW1vbmlhbENhcmRzIHRlc3RpbW9uaWFscz17dGVzdGltb25pYWxzfSAvPlxuICAgICAgKX1cbiAgICA8L0xheW91dEdyaWQ+XG4gICk7XG59O1xuIl19 */");
-const TestimonialCard = ({
-  testimonial,
-  bg
-}) => /*#__PURE__*/_jsxs(StyledCard, {
-  shadow: "patternLeft",
-  borderRadius: "lg",
-  p: 24,
-  bg: bg,
-  children: [/*#__PURE__*/_jsx(MiniQuoteIcon, {
-    size: 18,
-    mt: "auto"
-  }), /*#__PURE__*/_jsx(Box, {
-    mt: 12,
-    mb: 24,
-    children: /*#__PURE__*/_jsx(Markdown, {
-      text: testimonial?.longQuote
-    })
-  }), /*#__PURE__*/_jsx(UserProfile, {
-    fullName: testimonial?.firstName + ' ' + testimonial?.lastName,
-    jobTitle: testimonial?.jobTitle,
-    image: testimonial?.image?.url
-  })]
+`);
+const TestimonialCard = ({ testimonial, bg }) => /* @__PURE__ */ jsxs(StyledCard, {
+	shadow: "patternLeft",
+	borderRadius: "lg",
+	p: 24,
+	bg,
+	children: [
+		/* @__PURE__ */ jsx(MiniQuoteIcon, {
+			size: 18,
+			mt: "auto"
+		}),
+		/* @__PURE__ */ jsx(Box, {
+			mt: 12,
+			mb: 24,
+			children: /* @__PURE__ */ jsx(Markdown, { text: testimonial?.longQuote })
+		}),
+		/* @__PURE__ */ jsx(UserProfile, {
+			fullName: testimonial?.firstName + " " + testimonial?.lastName,
+			jobTitle: testimonial?.jobTitle,
+			image: testimonial?.image?.url
+		})
+	]
 });
-const TestimonialCards = ({
-  testimonials
-}) => {
-  const backgroundVariants = [theme.colors['yellow-0'], theme.colors['pink-0'], theme.colors['blue-0']];
-  return testimonials?.map((item, index) => /*#__PURE__*/_jsx(Column, {
-    size: {
-      _: 12,
-      sm: 6,
-      md: 4
-    },
-    children: /*#__PURE__*/_jsx(TestimonialCard, {
-      testimonial: item,
-      bg: backgroundVariants[index % backgroundVariants.length]
-    })
-  }, item.lastName.replaceAll(' ', '-')));
+const TestimonialCards = ({ testimonials }) => {
+	const backgroundVariants = [
+		theme.colors["yellow-0"],
+		theme.colors["pink-0"],
+		theme.colors["blue-0"]
+	];
+	return testimonials?.map((item, index) => /* @__PURE__ */ jsx(Column, {
+		size: {
+			_: 12,
+			sm: 6,
+			md: 4
+		},
+		children: /* @__PURE__ */ jsx(TestimonialCard, {
+			testimonial: item,
+			bg: backgroundVariants[index % backgroundVariants.length]
+		})
+	}, item.lastName.replaceAll(" ", "-")));
 };
-export const PageTestimonials = ({
-  testimonials,
-  testId
-}) => {
-  return /*#__PURE__*/_jsx(LayoutGrid, {
-    "data-testid": testId,
-    gap: 32,
-    children: testimonials && testimonials?.length > 0 && /*#__PURE__*/_jsx(TestimonialCards, {
-      testimonials: testimonials
-    })
-  });
-};
+const PageTestimonials = ({ testimonials, testId }) => {
+	return /* @__PURE__ */ jsx(LayoutGrid, {
+		"data-testid": testId,
+		gap: 32,
+		children: testimonials && testimonials?.length > 0 && /* @__PURE__ */ jsx(TestimonialCards, { testimonials })
+	});
+};
+
+//#endregion
+export { PageTestimonials };

package/dist/LandingPage/PageVideoGallery.cjs

@@ -0,0 +1,70 @@
+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');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/LandingPage/PageVideoGallery.tsx
+const Grid = _emotion_styled.default.div`
+  display: grid;
+  grid-template: 1fr / 1fr;
+  gap: 8px;
+
+  ${_codecademy_gamut_styles.mediaQueries.sm} {
+    // there must be a mathematical explanation for why ~12:5 is the correct ratio for
+    // the column widths but I do not know what it is. Regardless, the effect is that
+    // all three videos will maintain a 16:9 aspect ratio with an even gap between them.
+
+    grid-template: 1fr 1fr / 12fr 5fr;
+
+    gap: 16px;
+  }
+  ${_codecademy_gamut_styles.mediaQueries.md} {
+    gap: 24px;
+  }
+  ${_codecademy_gamut_styles.mediaQueries.lg} {
+    gap: 32px;
+  }
+`;
+const GridVideo = (0, _emotion_styled.default)(_codecademy_gamut.Video)`
+  ${_codecademy_gamut_styles.mediaQueries.sm} {
+    &:first-of-type {
+      grid-row: 1 / span 2;
+    }
+  }
+`;
+const PageVideoGallery = ({ videos, title, desc, onAnchorClick, cta, testId }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+	(title || desc) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+		mb: 32,
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Title.Title, { children: title }), desc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Description.Description, {
+			text: desc,
+			onAnchorClick
+		})]
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid, {
+		"data-testid": testId,
+		children: videos.map((video) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridVideo, {
+			videoUrl: video.url,
+			videoTitle: video.title,
+			placeholderImage: video.placeholderImage || true
+		}, video.url))
+	}),
+	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
+		})
+	})
+] });
+
+//#endregion
+exports.PageVideoGallery = PageVideoGallery;

package/dist/LandingPage/PageVideoGallery.d.cts

@@ -0,0 +1,15 @@
+import { LandingPageBaseProps } from "./types.cjs";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageVideoGallery.d.ts
+type PageVideo = {
+  url: string;
+  title: string;
+  placeholderImage?: string;
+};
+type PageVideoGalleryProps = LandingPageBaseProps & {
+  videos: PageVideo[];
+};
+declare const PageVideoGallery: React$1.FC<PageVideoGalleryProps>;
+//#endregion
+export { PageVideo, PageVideoGallery, PageVideoGalleryProps };

package/dist/LandingPage/PageVideoGallery.d.ts

@@ -1,11 +1,15 @@
-import * as React from 'react';
-import { LandingPageBaseProps } from './types';
-export type PageVideo = {
-    url: string;
-    title: string;
-    placeholderImage?: string;
+import { LandingPageBaseProps } from "./types.js";
+import * as React$1 from "react";
+
+//#region src/LandingPage/PageVideoGallery.d.ts
+type PageVideo = {
+  url: string;
+  title: string;
+  placeholderImage?: string;
 };
-export type PageVideoGalleryProps = LandingPageBaseProps & {
-    videos: PageVideo[];
+type PageVideoGalleryProps = LandingPageBaseProps & {
+  videos: PageVideo[];
 };
-export declare const PageVideoGallery: React.FC<PageVideoGalleryProps>;
+declare const PageVideoGallery: React$1.FC<PageVideoGalleryProps>;
+//#endregion
+export { PageVideo, PageVideoGallery, PageVideoGalleryProps };

package/dist/LandingPage/PageVideoGallery.js

@@ -1,49 +1,67 @@
-import _styled from "@emotion/styled/base";
-import { Box, Video } from '@codecademy/gamut';
-import { mediaQueries } from '@codecademy/gamut-styles';
-import * as React from 'react';
-import { CTA } from './CTA';
-import { Description } from './Description';
-import { Title } from './Title';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Grid = /*#__PURE__*/_styled("div", {
-  target: "e12cs26e1",
-  label: "Grid"
-})("display:grid;grid-template:1fr/1fr;gap:8px;", mediaQueries.sm, "{grid-template:1fr 1fr/12fr 5fr;gap:16px;}", mediaQueries.md, "{gap:24px;}", mediaQueries.lg, "{gap:32px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYW5kaW5nUGFnZS9QYWdlVmlkZW9HYWxsZXJ5LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVdUIiLCJmaWxlIjoiLi4vLi4vc3JjL0xhbmRpbmdQYWdlL1BhZ2VWaWRlb0dhbGxlcnkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBWaWRlbyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IG1lZGlhUXVlcmllcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IENUQSB9IGZyb20gJy4vQ1RBJztcbmltcG9ydCB7IERlc2NyaXB0aW9uIH0gZnJvbSAnLi9EZXNjcmlwdGlvbic7XG5pbXBvcnQgeyBUaXRsZSB9IGZyb20gJy4vVGl0bGUnO1xuaW1wb3J0IHsgTGFuZGluZ1BhZ2VCYXNlUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgR3JpZCA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGU6IDFmciAvIDFmcjtcbiAgZ2FwOiA4cHg7XG5cbiAgJHttZWRpYVF1ZXJpZXMuc219IHtcbiAgICAvLyB0aGVyZSBtdXN0IGJlIGEgbWF0aGVtYXRpY2FsIGV4cGxhbmF0aW9uIGZvciB3aHkgfjEyOjUgaXMgdGhlIGNvcnJlY3QgcmF0aW8gZm9yXG4gICAgLy8gdGhlIGNvbHVtbiB3aWR0aHMgYnV0IEkgZG8gbm90IGtub3cgd2hhdCBpdCBpcy4gUmVnYXJkbGVzcywgdGhlIGVmZmVjdCBpcyB0aGF0XG4gICAgLy8gYWxsIHRocmVlIHZpZGVvcyB3aWxsIG1haW50YWluIGEgMTY6OSBhc3BlY3QgcmF0aW8gd2l0aCBhbiBldmVuIGdhcCBiZXR3ZWVuIHRoZW0uXG5cbiAgICBncmlkLXRlbXBsYXRlOiAxZnIgMWZyIC8gMTJmciA1ZnI7XG5cbiAgICBnYXA6IDE2cHg7XG4gIH1cbiAgJHttZWRpYVF1ZXJpZXMubWR9IHtcbiAgICBnYXA6IDI0cHg7XG4gIH1cbiAgJHttZWRpYVF1ZXJpZXMubGd9IHtcbiAgICBnYXA6IDMycHg7XG4gIH1cbmA7XG5cbmNvbnN0IEdyaWRWaWRlbyA9IHN0eWxlZChWaWRlbylgXG4gICR7bWVkaWFRdWVyaWVzLnNtfSB7XG4gICAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICAgIGdyaWQtcm93OiAxIC8gc3BhbiAyO1xuICAgIH1cbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgUGFnZVZpZGVvID0ge1xuICB1cmw6IHN0cmluZztcbiAgdGl0bGU6IHN0cmluZztcbiAgcGxhY2Vob2xkZXJJbWFnZT86IHN0cmluZztcbn07XG5cbmV4cG9ydCB0eXBlIFBhZ2VWaWRlb0dhbGxlcnlQcm9wcyA9IExhbmRpbmdQYWdlQmFzZVByb3BzICYge1xuICB2aWRlb3M6IFBhZ2VWaWRlb1tdO1xufTtcblxuZXhwb3J0IGNvbnN0IFBhZ2VWaWRlb0dhbGxlcnk6IFJlYWN0LkZDPFBhZ2VWaWRlb0dhbGxlcnlQcm9wcz4gPSAoe1xuICB2aWRlb3MsXG4gIHRpdGxlLFxuICBkZXNjLFxuICBvbkFuY2hvckNsaWNrLFxuICBjdGEsXG4gIHRlc3RJZCxcbn0pID0+IChcbiAgPGRpdj5cbiAgICB7KHRpdGxlIHx8IGRlc2MpICYmIChcbiAgICAgIDxCb3ggbWI9ezMyfT5cbiAgICAgICAge3RpdGxlICYmIDxUaXRsZT57dGl0bGV9PC9UaXRsZT59XG4gICAgICAgIHtkZXNjICYmIDxEZXNjcmlwdGlvbiB0ZXh0PXtkZXNjfSBvbkFuY2hvckNsaWNrPXtvbkFuY2hvckNsaWNrfSAvPn1cbiAgICAgIDwvQm94PlxuICAgICl9XG4gICAgPEdyaWQgZGF0YS10ZXN0aWQ9e3Rlc3RJZH0+XG4gICAgICB7dmlkZW9zLm1hcCgodmlkZW8pID0+IChcbiAgICAgICAgPEdyaWRWaWRlb1xuICAgICAgICAgIGtleT17dmlkZW8udXJsfVxuICAgICAgICAgIHZpZGVvVXJsPXt2aWRlby51cmx9XG4gICAgICAgICAgdmlkZW9UaXRsZT17dmlkZW8udGl0bGV9XG4gICAgICAgICAgcGxhY2Vob2xkZXJJbWFnZT17dmlkZW8ucGxhY2Vob2xkZXJJbWFnZSB8fCB0cnVlfVxuICAgICAgICAvPlxuICAgICAgKSl9XG4gICAgPC9HcmlkPlxuICAgIHtjdGEgJiYgKFxuICAgICAgPEJveCBtdD17MzJ9PlxuICAgICAgICA8Q1RBIGhyZWY9e2N0YS5ocmVmfSBvbkNsaWNrPXtjdGEub25DbGlja30gYnV0dG9uVHlwZT17Y3RhLmJ1dHRvblR5cGV9PlxuICAgICAgICAgIHtjdGEudGV4dH1cbiAgICAgICAgPC9DVEE+XG4gICAgICA8L0JveD5cbiAgICApfVxuICA8L2Rpdj5cbik7XG4iXX0= */"));
-const GridVideo = /*#__PURE__*/_styled(Video, {
-  target: "e12cs26e0",
-  label: "GridVideo"
-})(mediaQueries.sm, "{&:first-of-type{grid-row:1/span 2;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYW5kaW5nUGFnZS9QYWdlVmlkZW9HYWxsZXJ5LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQytCIiwiZmlsZSI6Ii4uLy4uL3NyYy9MYW5kaW5nUGFnZS9QYWdlVmlkZW9HYWxsZXJ5LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgVmlkZW8gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBtZWRpYVF1ZXJpZXMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBDVEEgfSBmcm9tICcuL0NUQSc7XG5pbXBvcnQgeyBEZXNjcmlwdGlvbiB9IGZyb20gJy4vRGVzY3JpcHRpb24nO1xuaW1wb3J0IHsgVGl0bGUgfSBmcm9tICcuL1RpdGxlJztcbmltcG9ydCB7IExhbmRpbmdQYWdlQmFzZVByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IEdyaWQgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlOiAxZnIgLyAxZnI7XG4gIGdhcDogOHB4O1xuXG4gICR7bWVkaWFRdWVyaWVzLnNtfSB7XG4gICAgLy8gdGhlcmUgbXVzdCBiZSBhIG1hdGhlbWF0aWNhbCBleHBsYW5hdGlvbiBmb3Igd2h5IH4xMjo1IGlzIHRoZSBjb3JyZWN0IHJhdGlvIGZvclxuICAgIC8vIHRoZSBjb2x1bW4gd2lkdGhzIGJ1dCBJIGRvIG5vdCBrbm93IHdoYXQgaXQgaXMuIFJlZ2FyZGxlc3MsIHRoZSBlZmZlY3QgaXMgdGhhdFxuICAgIC8vIGFsbCB0aHJlZSB2aWRlb3Mgd2lsbCBtYWludGFpbiBhIDE2OjkgYXNwZWN0IHJhdGlvIHdpdGggYW4gZXZlbiBnYXAgYmV0d2VlbiB0aGVtLlxuXG4gICAgZ3JpZC10ZW1wbGF0ZTogMWZyIDFmciAvIDEyZnIgNWZyO1xuXG4gICAgZ2FwOiAxNnB4O1xuICB9XG4gICR7bWVkaWFRdWVyaWVzLm1kfSB7XG4gICAgZ2FwOiAyNHB4O1xuICB9XG4gICR7bWVkaWFRdWVyaWVzLmxnfSB7XG4gICAgZ2FwOiAzMnB4O1xuICB9XG5gO1xuXG5jb25zdCBHcmlkVmlkZW8gPSBzdHlsZWQoVmlkZW8pYFxuICAke21lZGlhUXVlcmllcy5zbX0ge1xuICAgICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgICBncmlkLXJvdzogMSAvIHNwYW4gMjtcbiAgICB9XG4gIH1cbmA7XG5cbmV4cG9ydCB0eXBlIFBhZ2VWaWRlbyA9IHtcbiAgdXJsOiBzdHJpbmc7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHBsYWNlaG9sZGVySW1hZ2U/OiBzdHJpbmc7XG59O1xuXG5leHBvcnQgdHlwZSBQYWdlVmlkZW9HYWxsZXJ5UHJvcHMgPSBMYW5kaW5nUGFnZUJhc2VQcm9wcyAmIHtcbiAgdmlkZW9zOiBQYWdlVmlkZW9bXTtcbn07XG5cbmV4cG9ydCBjb25zdCBQYWdlVmlkZW9HYWxsZXJ5OiBSZWFjdC5GQzxQYWdlVmlkZW9HYWxsZXJ5UHJvcHM+ID0gKHtcbiAgdmlkZW9zLFxuICB0aXRsZSxcbiAgZGVzYyxcbiAgb25BbmNob3JDbGljayxcbiAgY3RhLFxuICB0ZXN0SWQsXG59KSA9PiAoXG4gIDxkaXY+XG4gICAgeyh0aXRsZSB8fCBkZXNjKSAmJiAoXG4gICAgICA8Qm94IG1iPXszMn0+XG4gICAgICAgIHt0aXRsZSAmJiA8VGl0bGU+e3RpdGxlfTwvVGl0bGU+fVxuICAgICAgICB7ZGVzYyAmJiA8RGVzY3JpcHRpb24gdGV4dD17ZGVzY30gb25BbmNob3JDbGljaz17b25BbmNob3JDbGlja30gLz59XG4gICAgICA8L0JveD5cbiAgICApfVxuICAgIDxHcmlkIGRhdGEtdGVzdGlkPXt0ZXN0SWR9PlxuICAgICAge3ZpZGVvcy5tYXAoKHZpZGVvKSA9PiAoXG4gICAgICAgIDxHcmlkVmlkZW9cbiAgICAgICAgICBrZXk9e3ZpZGVvLnVybH1cbiAgICAgICAgICB2aWRlb1VybD17dmlkZW8udXJsfVxuICAgICAgICAgIHZpZGVvVGl0bGU9e3ZpZGVvLnRpdGxlfVxuICAgICAgICAgIHBsYWNlaG9sZGVySW1hZ2U9e3ZpZGVvLnBsYWNlaG9sZGVySW1hZ2UgfHwgdHJ1ZX1cbiAgICAgICAgLz5cbiAgICAgICkpfVxuICAgIDwvR3JpZD5cbiAgICB7Y3RhICYmIChcbiAgICAgIDxCb3ggbXQ9ezMyfT5cbiAgICAgICAgPENUQSBocmVmPXtjdGEuaHJlZn0gb25DbGljaz17Y3RhLm9uQ2xpY2t9IGJ1dHRvblR5cGU9e2N0YS5idXR0b25UeXBlfT5cbiAgICAgICAgICB7Y3RhLnRleHR9XG4gICAgICAgIDwvQ1RBPlxuICAgICAgPC9Cb3g+XG4gICAgKX1cbiAgPC9kaXY+XG4pO1xuIl19 */"));
-export const PageVideoGallery = ({
-  videos,
-  title,
-  desc,
-  onAnchorClick,
-  cta,
-  testId
-}) => /*#__PURE__*/_jsxs("div", {
-  children: [(title || desc) && /*#__PURE__*/_jsxs(Box, {
-    mb: 32,
-    children: [title && /*#__PURE__*/_jsx(Title, {
-      children: title
-    }), desc && /*#__PURE__*/_jsx(Description, {
-      text: desc,
-      onAnchorClick: onAnchorClick
-    })]
-  }), /*#__PURE__*/_jsx(Grid, {
-    "data-testid": testId,
-    children: videos.map(video => /*#__PURE__*/_jsx(GridVideo, {
-      videoUrl: video.url,
-      videoTitle: video.title,
-      placeholderImage: video.placeholderImage || true
-    }, video.url))
-  }), cta && /*#__PURE__*/_jsx(Box, {
-    mt: 32,
-    children: /*#__PURE__*/_jsx(CTA, {
-      href: cta.href,
-      onClick: cta.onClick,
-      buttonType: cta.buttonType,
-      children: cta.text
-    })
-  })]
-});
+import { CTA } from "./CTA.js";
+import { Description } from "./Description.js";
+import { Title } from "./Title.js";
+import { Box, Video } from "@codecademy/gamut";
+import { mediaQueries } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LandingPage/PageVideoGallery.tsx
+const Grid = styled.div`
+  display: grid;
+  grid-template: 1fr / 1fr;
+  gap: 8px;
+
+  ${mediaQueries.sm} {
+    // there must be a mathematical explanation for why ~12:5 is the correct ratio for
+    // the column widths but I do not know what it is. Regardless, the effect is that
+    // all three videos will maintain a 16:9 aspect ratio with an even gap between them.
+
+    grid-template: 1fr 1fr / 12fr 5fr;
+
+    gap: 16px;
+  }
+  ${mediaQueries.md} {
+    gap: 24px;
+  }
+  ${mediaQueries.lg} {
+    gap: 32px;
+  }
+`;
+const GridVideo = styled(Video)`
+  ${mediaQueries.sm} {
+    &:first-of-type {
+      grid-row: 1 / span 2;
+    }
+  }
+`;
+const PageVideoGallery = ({ videos, title, desc, onAnchorClick, cta, testId }) => /* @__PURE__ */ jsxs("div", { children: [
+	(title || desc) && /* @__PURE__ */ jsxs(Box, {
+		mb: 32,
+		children: [title && /* @__PURE__ */ jsx(Title, { children: title }), desc && /* @__PURE__ */ jsx(Description, {
+			text: desc,
+			onAnchorClick
+		})]
+	}),
+	/* @__PURE__ */ jsx(Grid, {
+		"data-testid": testId,
+		children: videos.map((video) => /* @__PURE__ */ jsx(GridVideo, {
+			videoUrl: video.url,
+			videoTitle: video.title,
+			placeholderImage: video.placeholderImage || true
+		}, video.url))
+	}),
+	cta && /* @__PURE__ */ jsx(Box, {
+		mt: 32,
+		children: /* @__PURE__ */ jsx(CTA, {
+			href: cta.href,
+			onClick: cta.onClick,
+			buttonType: cta.buttonType,
+			children: cta.text
+		})
+	})
+] });
+
+//#endregion
+export { PageVideoGallery };

package/dist/LandingPage/Title.cjs

@@ -0,0 +1,33 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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/Title.tsx
+const titleProps = {
+	heading: {
+		as: "h1",
+		fontSize: {
+			_: 34,
+			sm: 44,
+			lg: 64
+		}
+	},
+	subheading: {
+		as: "h2",
+		fontSize: {
+			_: 26,
+			lg: 34
+		}
+	}
+};
+const Title = ({ isPageHeading, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+	maxWidth: "58rem",
+	...titleProps[isPageHeading ? "heading" : "subheading"],
+	children
+});
+
+//#endregion
+exports.Title = Title;
+exports.titleProps = titleProps;

package/dist/LandingPage/Title.d.cts

@@ -0,0 +1,27 @@
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LandingPage/Title.d.ts
+interface TitleProps extends WithChildrenProp {
+  isPageHeading?: boolean;
+}
+declare const titleProps: {
+  readonly heading: {
+    readonly as: "h1";
+    readonly fontSize: {
+      readonly _: 34;
+      readonly sm: 44;
+      readonly lg: 64;
+    };
+  };
+  readonly subheading: {
+    readonly as: "h2";
+    readonly fontSize: {
+      readonly _: 26;
+      readonly lg: 34;
+    };
+  };
+};
+declare const Title: React$1.FC<TitleProps>;
+//#endregion
+export { Title, TitleProps, titleProps };

package/dist/LandingPage/Title.d.ts

@@ -1,23 +1,27 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-export interface TitleProps extends WithChildrenProp {
-    isPageHeading?: boolean;
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LandingPage/Title.d.ts
+interface TitleProps extends WithChildrenProp {
+  isPageHeading?: boolean;
 }
-export declare const titleProps: {
-    readonly heading: {
-        readonly as: "h1";
-        readonly fontSize: {
-            readonly _: 34;
-            readonly sm: 44;
-            readonly lg: 64;
-        };
+declare const titleProps: {
+  readonly heading: {
+    readonly as: "h1";
+    readonly fontSize: {
+      readonly _: 34;
+      readonly sm: 44;
+      readonly lg: 64;
     };
-    readonly subheading: {
-        readonly as: "h2";
-        readonly fontSize: {
-            readonly _: 26;
-            readonly lg: 34;
-        };
+  };
+  readonly subheading: {
+    readonly as: "h2";
+    readonly fontSize: {
+      readonly _: 26;
+      readonly lg: 34;
     };
+  };
 };
-export declare const Title: React.FC<TitleProps>;
+declare const Title: React$1.FC<TitleProps>;
+//#endregion
+export { Title, TitleProps, titleProps };