@codecademy/brand 4.0.0-alpha.14deb86052.0 → 4.0.0-alpha.65b0979c7d.0

package/dist/Banner/CountdownTimer.cjs

@@ -1,111 +0,0 @@
-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/Banner/CountdownTimer.tsx
-const MS_SECOND = 1e3;
-const MS_MINUTE = 60 * MS_SECOND;
-const MS_HOUR = 60 * MS_MINUTE;
-const MS_DAY = 24 * MS_HOUR;
-const getTimeRemaining = (target) => {
-	const diff = Math.max(0, target - Date.now());
-	return {
-		days: Math.floor(diff / MS_DAY),
-		hours: Math.floor(diff % MS_DAY / MS_HOUR),
-		minutes: Math.floor(diff % MS_HOUR / MS_MINUTE),
-		seconds: Math.floor(diff % MS_MINUTE / MS_SECOND)
-	};
-};
-const TimeUnit = react.default.memo(({ value, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-	alignItems: "center",
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-		fontFamily: "accent",
-		fontWeight: 700,
-		variant: "title-md",
-		fontSize: {
-			_: 20,
-			md: 26
-		},
-		as: "span",
-		color: "inherit",
-		children: value.toString().padStart(2, "0")
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-		fontFamily: "accent",
-		fontWeight: 700,
-		variant: "title-md",
-		fontSize: {
-			_: 20,
-			md: 26
-		},
-		as: "span",
-		color: "inherit",
-		children: label
-	})]
-}));
-const Separator = react.default.memo(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-	fontFamily: "accent",
-	variant: "title-md",
-	fontSize: 16,
-	color: "inherit",
-	fontWeight: "bold",
-	children: ":"
-}));
-const CountdownTimer = ({ targetDate, onExpire }) => {
-	const targetTimestamp = (0, react.useMemo)(() => new Date(targetDate).getTime(), [targetDate]);
-	const [timeRemaining, setTimeRemaining] = (0, react.useState)(() => getTimeRemaining(targetTimestamp));
-	(0, react.useEffect)(() => {
-		setTimeRemaining(getTimeRemaining(targetTimestamp));
-		if (targetTimestamp <= Date.now()) {
-			onExpire?.();
-			return;
-		}
-		const id = window.setInterval(() => {
-			setTimeRemaining(getTimeRemaining(targetTimestamp));
-			if (targetTimestamp <= Date.now()) {
-				onExpire?.();
-				window.clearInterval(id);
-			}
-		}, MS_SECOND);
-		return () => window.clearInterval(id);
-	}, [targetTimestamp, onExpire]);
-	if (targetTimestamp <= Date.now()) return null;
-	const { days, hours, minutes, seconds } = timeRemaining;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
-		display: "inline-flex",
-		alignItems: "center",
-		py: 8,
-		px: 16,
-		bg: "yellow-0",
-		borderRadius: 6,
-		color: "navy",
-		"data-testid": "branded-countdown-timer",
-		boxShadow: "minimal",
-		gap: 2,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeUnit, {
-				value: days,
-				label: "d"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeUnit, {
-				value: hours,
-				label: "h"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeUnit, {
-				value: minutes,
-				label: "m"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeUnit, {
-				value: seconds,
-				label: "s"
-			})
-		]
-	});
-};
-
-//#endregion
-exports.CountdownTimer = CountdownTimer;

package/dist/Banner/CountdownTimer.d.cts

@@ -1,10 +0,0 @@
-import React from "react";
-
-//#region src/Banner/CountdownTimer.d.ts
-interface CountdownTimerProps {
-  targetDate: string;
-  onExpire?: () => void;
-}
-declare const CountdownTimer: React.FC<CountdownTimerProps>;
-//#endregion
-export { CountdownTimer };

package/dist/Banner/EnhancedBanner.cjs

@@ -1,142 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_CountdownTimer = require('./CountdownTimer.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");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-let _emotion_react = require("@emotion/react");
-
-//#region src/Banner/EnhancedBanner.tsx
-const bannerVariants = {
-	navy: "navy",
-	yellow: "yellow",
-	subtle: "background-hover"
-};
-const bannerStyles = {
-	width: "100%",
-	p: 4,
-	display: "grid",
-	gridTemplateColumns: "2rem minmax(0, 1fr) 2rem",
-	gridTemplateAreas: "'empty content close'",
-	columnGap: 8,
-	alignItems: "center",
-	textAlign: "center"
-};
-const BannerBg = (0, _emotion_styled.default)(_codecademy_gamut_styles.Background)((0, _codecademy_gamut_styles.css)(bannerStyles));
-const BannerBox = (0, _emotion_styled.default)(_codecademy_gamut.Box)((0, _codecademy_gamut_styles.css)(bannerStyles));
-const StyledMarkdown = (0, _emotion_styled.default)(_codecademy_gamut.Markdown)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-`;
-const StyledTitle = (0, _emotion_styled.default)(StyledMarkdown)`
-  p {
-    font-size: 22px;
-    font-weight: 700;
-  }
-`;
-const StyledSubheader = (0, _emotion_styled.default)(StyledMarkdown)`
-  p {
-    font-size: 16px;
-  }
-`;
-const EnhancedBanner = ({ variant = "navy", onClose, onCtaClick, ctaAriaLabel, header, subheader, cta, countdownTo, onCountdownExpire, ...rest }) => {
-	const validCta = (0, react.useMemo)(() => cta && cta.title && cta.href ? cta : void 0, [cta]);
-	const { mode } = (0, _emotion_react.useTheme)();
-	const isDarkMode = mode === "dark";
-	if (!header) return null;
-	const renderEnhanced = () => {
-		const textBlock = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
-			textAlign: {
-				_: "center",
-				md: "left"
-			},
-			width: "100%",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTitle, { text: header }), subheader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSubheader, { text: subheader })]
-		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-			flexDirection: {
-				_: "column",
-				md: "row"
-			},
-			alignItems: "center",
-			justifyContent: "center",
-			width: "100%",
-			p: 8,
-			gap: {
-				_: 16,
-				md: 40
-			},
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-					gap: 16,
-					alignItems: "center",
-					children: [countdownTo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CountdownTimer.CountdownTimer, {
-						targetDate: countdownTo,
-						onExpire: onCountdownExpire
-					}), validCta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-						display: {
-							_: "flex",
-							md: "none"
-						},
-						ml: 0,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FillButton, {
-							variant: "primary",
-							href: validCta.href,
-							onClick: onCtaClick,
-							children: validCta.title
-						})
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-					maxWidth: {
-						_: "100%",
-						md: "50%"
-					},
-					children: textBlock
-				}),
-				validCta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-					display: {
-						_: "none",
-						md: "flex"
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FillButton, {
-						variant: isDarkMode ? "secondary" : "primary",
-						href: validCta.href,
-						onClick: onCtaClick,
-						children: validCta.title
-					})
-				})
-			]
-		});
-	};
-	const backgroundVariant = isDarkMode ? "yellow" : variant;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(backgroundVariant === "subtle" ? BannerBox : BannerBg, {
-		...rest,
-		bg: bannerVariants[backgroundVariant ?? "navy"],
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			gridArea: "content",
-			fontSize: "inherit",
-			children: renderEnhanced()
-		}), onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			gridArea: "close",
-			alignSelf: "center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
-				variant: "secondary",
-				size: "small",
-				icon: _codecademy_gamut_icons.MiniDeleteIcon,
-				onClick: onClose,
-				tip: "Close banner",
-				tipProps: { alignment: "left-center" }
-			})
-		})]
-	});
-};
-
-//#endregion
-exports.EnhancedBanner = EnhancedBanner;

package/dist/Banner/EnhancedBanner.d.cts

@@ -1,20 +0,0 @@
-import { BannerVariant } from "./index.cjs";
-import { BackgroundProps } from "@codecademy/gamut-styles";
-
-//#region src/Banner/EnhancedBanner.d.ts
-interface EnhancedBannerProps extends Omit<BackgroundProps, 'bg' | 'containerType'> {
-  variant?: BannerVariant | null;
-  onClose?: () => void;
-  onCtaClick?: () => void;
-  ctaAriaLabel?: string;
-  header?: string | null;
-  subheader?: string | null;
-  cta?: {
-    title: string;
-    href: string;
-  } | null;
-  countdownTo?: string | null;
-  onCountdownExpire?: () => void;
-}
-//#endregion
-export { EnhancedBannerProps };

package/dist/Banner/index.cjs

@@ -1,83 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/Banner/index.tsx
-const bannerVariants = {
-	navy: "navy",
-	yellow: "yellow",
-	subtle: "background-hover"
-};
-const isAllowedVariant = (variant) => Object.keys(bannerVariants).includes(variant);
-const bannerStyles = {
-	width: "100%",
-	p: 4,
-	display: "grid",
-	gridTemplateColumns: "2rem minmax(0, 1fr) 2rem",
-	gridTemplateAreas: "'empty content close'",
-	columnGap: 8,
-	alignItems: "center",
-	textAlign: "center"
-};
-const BannerContainerBackground = (0, _emotion_styled.default)(_codecademy_gamut_styles.Background)((0, _codecademy_gamut_styles.css)(bannerStyles));
-const BannerContainerBox = (0, _emotion_styled.default)(_codecademy_gamut.Box)((0, _codecademy_gamut_styles.css)(bannerStyles));
-const BannerMarkdown = (0, _emotion_styled.default)(_codecademy_gamut.Markdown)((0, _codecademy_gamut_styles.css)({ fontSize: "inherit" }));
-const bindBannerAnchor = (onCtaClick, ctaAriaLabel) => ({
-	allowedAttributes: ["href", "target"],
-	component: _codecademy_gamut.TextButton,
-	processNode: (_node, props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.TextButton, {
-		...props,
-		onClick: () => {
-			onCtaClick?.();
-			props?.onClick?.();
-		},
-		mx: 4,
-		size: "small",
-		target: "_BLANK",
-		"aria-label": ctaAriaLabel,
-		display: {
-			_: "block",
-			xs: "inline-flex"
-		}
-	})
-});
-const Banner = ({ children, ctaAriaLabel, variant = "navy", onCtaClick, onClose, ...rest }) => {
-	const overrides = (0, react.useMemo)(() => ({ a: bindBannerAnchor(onCtaClick, ctaAriaLabel) }), [onCtaClick, ctaAriaLabel]);
-	const safeVariant = isAllowedVariant(variant) ? variant : "navy";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(safeVariant === "subtle" ? BannerContainerBox : BannerContainerBackground, {
-		...rest,
-		bg: bannerVariants[safeVariant],
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			gridArea: "content",
-			fontSize: "inherit",
-			children: typeof children === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerMarkdown, {
-				overrides,
-				text: children,
-				skipDefaultOverrides: { a: true }
-			}) : children
-		}), onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			gridArea: "close",
-			alignSelf: "start",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
-				variant: "secondary",
-				size: "small",
-				icon: _codecademy_gamut_icons.MiniDeleteIcon,
-				onClick: onClose,
-				tip: "Close banner",
-				tipProps: {
-					alignment: "bottom-center",
-					placement: "floating"
-				}
-			})
-		})]
-	});
-};
-
-//#endregion
-exports.Banner = Banner;

package/dist/Banner/index.d.cts

@@ -1,24 +0,0 @@
-import * as React$1 from "react";
-import { ReactNode } from "react";
-import { BackgroundProps } from "@codecademy/gamut-styles";
-
-//#region src/Banner/index.d.ts
-type BannerVariant = keyof typeof bannerVariants;
-declare const bannerVariants: {
-  readonly navy: "navy";
-  readonly yellow: "yellow";
-  readonly subtle: "background-hover";
-};
-interface BannerProps extends Omit<BackgroundProps, 'bg' | 'containerType'> {
-  children: ReactNode | string;
-  /** Visual variation for banners, defaults to navy */
-  variant?: BannerVariant | null;
-  /**  Callback called when the user closes the banner. */
-  onClose?: () => void;
-  /** Call to action click callback */
-  onCtaClick?: () => void;
-  ctaAriaLabel?: string;
-}
-declare const Banner: React$1.FC<BannerProps>;
-//#endregion
-export { Banner, BannerProps, BannerVariant };

package/dist/BetaSticker/index.cjs

@@ -1,63 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-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/BetaSticker/index.tsx
-const BetaStickerContainer = _emotion_styled.default.svg((0, _codecademy_gamut_styles.variant)({
-	defaultVariant: "normal",
-	base: { lineHeight: 0 },
-	variants: {
-		small: {
-			height: 16,
-			width: 32
-		},
-		normal: {
-			height: 26,
-			width: 52
-		},
-		medium: {
-			height: 22,
-			width: 42
-		}
-	}
-}));
-const BetaSticker = ({ size = "normal" }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BetaStickerContainer, {
-		variant: size,
-		viewBox: "0 0 52 27",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: "Beta" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				fillRule: "evenodd",
-				clipRule: "evenodd",
-				d: "M2 0.5H0V24.5V26.5H2H52V24.5H2V0.5Z",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: "M8 19.1H11.792C14.256 19.1 15.936 18.092 15.936 15.5C15.936 14.092 15.232 13.292 14.288 12.876C15.056 12.348 15.536 11.484 15.536 10.492C15.536 8.076 13.84 7.5 11.6 7.5H8V19.1ZM10.4 12.268V9.452H11.568C12.544 9.452 13.024 9.932 13.024 10.86C13.024 11.788 12.544 12.268 11.568 12.268H10.4ZM13.392 15.58C13.392 16.604 12.88 17.116 11.696 17.116H10.4V14.028H11.696C12.88 14.028 13.392 14.54 13.392 15.58Z",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: "M18.5677 19.1H25.5917V17.036H20.9677V14.204H25.2717V12.14H20.9677V9.564H25.5917V7.5H18.5677V19.1Z",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: "M31.1675 19.1H33.5675V9.564H36.8475V7.5H27.8875V9.564H31.1675V19.1Z",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: "M38.2312 19.1H40.7913L41.3193 16.684H44.0393L44.5673 19.1H47.1913L44.1992 7.5H41.2073L38.2312 19.1ZM42.6953 10.556L43.6233 14.812H41.7353L42.6953 10.556Z",
-				fill: "currentColor"
-			})
-		]
-	});
-};
-
-//#endregion
-exports.BetaSticker = BetaSticker;

package/dist/BetaSticker/index.d.cts

@@ -1,9 +0,0 @@
-import * as React$1 from "react";
-
-//#region src/BetaSticker/index.d.ts
-type BetaStickerProps = {
-  size?: 'normal' | 'small' | 'medium';
-};
-declare const BetaSticker: React$1.FC<BetaStickerProps>;
-//#endregion
-export { BetaSticker };

package/dist/CareerPathCard/index.cjs

@@ -1,34 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_helpers = require('../ContentGroupBaseCard/helpers.cjs');
-const require_shared = require('../ContentGroupBaseCard/shared.cjs');
-const require_ContentGroupBaseCard_index = require('../ContentGroupBaseCard/index.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/CareerPathCard/index.tsx
-const CareerPathCard = (0, react.forwardRef)(({ imageUrl, courseCount, shortDescription, difficulty, enrollmentStatus, lessonCount, title, isFullSize, hasCareerJourney, headingLevel = "h3", timeToComplete, header, footer, openInNewTab = false, href, onClick }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ContentGroupBaseCard_index.ContentGroupBaseCard, {
-		headerBackgroundColor: "navy",
-		headerText: "Career path",
-		title,
-		headingLevel,
-		description: shortDescription,
-		difficulty,
-		numLessons: lessonCount,
-		shadow: "outline",
-		imageSrc: require_helpers.getPathImageUrl(enrollmentStatus, imageUrl),
-		isFullSize,
-		enrollmentStatus,
-		timeToComplete,
-		header,
-		footer,
-		href,
-		openInNewTab,
-		onClick,
-		ref,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shared.CourseCountComponent, { count: courseCount }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shared.CertificateComponent, { professionalCert: !!hasCareerJourney })]
-	});
-});
-
-//#endregion
-exports.CareerPathCard = CareerPathCard;

package/dist/CareerPathCard/index.d.cts

@@ -1,26 +0,0 @@
-import { CourseDifficulty, EnrollmentStatus } from "../ContentGroupBaseCard/types.cjs";
-import { HeadingTags } from "@codecademy/gamut";
-import * as react0 from "react";
-
-//#region src/CareerPathCard/index.d.ts
-type CareerPathCardProps = {
-  title: string;
-  lessonCount: number;
-  enrollmentStatus: EnrollmentStatus;
-  shortDescription?: string | null;
-  difficulty?: CourseDifficulty | null;
-  hasCareerJourney?: boolean;
-  imageUrl: string;
-  courseCount: number;
-  isFullSize?: boolean;
-  headingLevel?: HeadingTags;
-  timeToComplete?: number | null;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  openInNewTab?: boolean;
-  href: string;
-  onClick: () => void;
-};
-declare const CareerPathCard: react0.ForwardRefExoticComponent<CareerPathCardProps & react0.RefAttributes<HTMLAnchorElement>>;
-//#endregion
-export { CareerPathCard };

package/dist/Carousel/elements.cjs

@@ -1,12 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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);
-
-//#region src/Carousel/elements.tsx
-const arrowButtonStates = (0, _codecademy_gamut_styles.states)({ disabled: { borderColor: "background-disabled" } });
-const ArrowButton = (0, _emotion_styled.default)(_codecademy_gamut.IconButton)((0, _codecademy_gamut_styles.css)({ borderColor: "currentColor" }), arrowButtonStates);
-
-//#endregion
-exports.ArrowButton = ArrowButton;