@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/PlanCard/consts.cjs

@@ -1,220 +0,0 @@
-
-//#region src/PlanCard/consts.ts
-const planDetails = {
-	pro: {
-		id: "pro",
-		title: "Pro",
-		tag: "Learn a skill",
-		variant: "yellow",
-		features: [
-			{
-				name: "Unlimited AI learning assistance",
-				available: true
-			},
-			{
-				name: "Real-world projects",
-				available: true
-			},
-			{
-				name: "All courses",
-				available: true
-			},
-			{
-				name: "Skill paths",
-				available: true
-			},
-			{
-				name: "Career paths",
-				available: true
-			},
-			{
-				name: "Interview prep",
-				available: true
-			},
-			{
-				name: "Professional certifications",
-				available: true
-			},
-			{
-				name: "Career services",
-				available: true
-			},
-			{
-				name: "Assessments",
-				available: true
-			}
-		]
-	},
-	"pro-student": {
-		id: "pro",
-		title: "Pro Student",
-		tag: "Build a career",
-		variant: "yellow",
-		features: [
-			{
-				name: "Unlimited AI learning assistance",
-				available: true
-			},
-			{
-				name: "Real-world projects",
-				available: true
-			},
-			{
-				name: "All courses",
-				available: true
-			},
-			{
-				name: "Skill paths",
-				available: true
-			},
-			{
-				name: "Career paths",
-				available: true
-			},
-			{
-				name: "Interview prep",
-				available: true
-			},
-			{
-				name: "Professional certifications",
-				available: true
-			},
-			{
-				name: "Assessments",
-				available: true
-			}
-		]
-	},
-	"pro-gold": {
-		id: "pro-gold",
-		title: "Pro",
-		tag: "Build a career",
-		variant: "yellow",
-		features: [
-			{
-				name: "Unlimited AI learning assistance",
-				available: true
-			},
-			{
-				name: "Real-world projects",
-				available: true
-			},
-			{
-				name: "All courses",
-				available: true
-			},
-			{
-				name: "Skill paths",
-				available: true
-			},
-			{
-				name: "Career paths",
-				available: true
-			},
-			{
-				name: "Interview prep",
-				available: true
-			},
-			{
-				name: "Professional certifications",
-				available: true
-			},
-			{
-				name: "Career services",
-				available: true
-			},
-			{
-				name: "Assessments",
-				available: true
-			}
-		]
-	},
-	"pro-silver": {
-		id: "pro-silver",
-		title: "Plus",
-		tag: "Learn a skill",
-		variant: "paleYellow",
-		features: [
-			{
-				name: "Unlimited AI learning assistance",
-				available: true
-			},
-			{
-				name: "Real-world projects",
-				available: true
-			},
-			{
-				name: "All courses",
-				available: true
-			},
-			{
-				name: "Skill paths",
-				available: true
-			},
-			{
-				name: "Career paths",
-				available: false
-			},
-			{
-				name: "Interview prep",
-				available: false
-			},
-			{
-				name: "Professional certifications",
-				available: false
-			},
-			{
-				name: "Career services",
-				available: false
-			},
-			{
-				name: "Assessments",
-				available: false
-			}
-		]
-	},
-	"bootcamp-all-access-pass": {
-		id: "bootcamp-all-access-pass",
-		title: "Bootcamp All Access Pass",
-		tag: "Includes 1 year of Pro",
-		variant: "navy-800",
-		features: [
-			{
-				name: "Includes 1 year of Pro",
-				available: true,
-				isHighlighted: true
-			},
-			{
-				name: "Beginner friendly",
-				available: true
-			},
-			{
-				name: "Premium certificate",
-				available: true
-			},
-			{
-				name: "Job assistance sessions",
-				available: true
-			},
-			{
-				name: "Real-world projects",
-				available: true
-			},
-			{
-				name: "Live doubt clearing",
-				available: true
-			},
-			{
-				name: "Access to real world experts",
-				available: true
-			},
-			{
-				name: "Community access",
-				available: true
-			}
-		]
-	}
-};
-
-//#endregion
-exports.planDetails = planDetails;

package/dist/PlanCard/index.cjs

@@ -1,341 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_consts = require('./consts.cjs');
-const require_PlanFeature = require('./PlanFeature.cjs');
-const require_PopularBadge = require('./PopularBadge.cjs');
-const require_PricingAmount = require('./PricingAmount.cjs');
-const require_RecommendedBadge = require('./RecommendedBadge.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_patterns = require("@codecademy/gamut-patterns");
-
-//#region src/PlanCard/index.tsx
-const pricingBoxStates = (0, _codecademy_gamut_styles.states)({ hasLongPrice: { px: {
-	_: 24,
-	sm: 24
-} } });
-const pricingBoxVariants = (0, _codecademy_gamut_styles.variant)({
-	base: {
-		alignItems: "flex-start",
-		bg: "background",
-		position: "relative",
-		px: {
-			_: 24,
-			sm: 48
-		},
-		justifyContent: "center",
-		py: 4,
-		minWidth: 100
-	},
-	defaultVariant: "default",
-	variants: {
-		default: {},
-		singlePlan: {
-			width: {
-				_: "100%",
-				sm: "30%"
-			},
-			margin: "auto"
-		}
-	}
-});
-const PricingBox = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)(pricingBoxVariants, pricingBoxStates);
-const StyledRadio = (0, _emotion_styled.default)(_codecademy_gamut.Radio)`
-  pointer-events: none; // prevents the radio button from blocking clicks on the <label>
-  width: auto;
-
-  input + label {
-    padding: 0;
-  }
-`;
-const StyledText = (0, _emotion_styled.default)(_codecademy_gamut.Text)`
-  font-weight: 700;
-  font-size: 1rem;
-  font-family: inherit;
-`;
-const StyledList = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)`
-  padding-left: 0;
-  margin-bottom: 0;
-`.withComponent("ul");
-const StyledFillButton = (0, _emotion_styled.default)(_codecademy_gamut.FillButton)`
-  position: unset;
-  ::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-  }
-  :hover::after {
-    opacity: 0;
-  }
-`;
-const StyledTextButton = (0, _emotion_styled.default)(_codecademy_gamut.TextButton)`
-  position: unset;
-  ::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-  }
-  :hover::after {
-    opacity: 0;
-  }
-`;
-const PlanCard = ({ isSelected, price, currency, termMonths, onChange, onClick, planType, inUpsellModal, isMultiple = true, isStudentPlan = false, isIndiaUser = false, ctaHref, ctaLabel }) => {
-	const planDetail = isStudentPlan ? require_consts.planDetails["pro-student"] : require_consts.planDetails[planType];
-	const hasLongPrice = Number(price) > 99;
-	const cardBorderSize = inUpsellModal && planType === "pro-gold" ? 3 : isSelected ? 2 : 1;
-	const filteredPlanFeatures = planDetail.features.filter((feature) => !(isIndiaUser && feature.name === "Career services"));
-	const selectPlan = (0, react.useCallback)(() => {
-		if (!isSelected) onChange({
-			target: { value: planType },
-			currentTarget: { value: planType }
-		});
-	}, [
-		isSelected,
-		planType,
-		onChange
-	]);
-	const handleKeyDown = (0, react.useCallback)((e) => {
-		if (e.key === "Enter") {
-			e.preventDefault();
-			selectPlan();
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"ArrowLeft",
-			"ArrowRight"
-		].includes(e.key)) e.preventDefault();
-	}, [selectPlan]);
-	const handleCardClick = (0, react.useCallback)((e) => {
-		if (isMultiple) selectPlan();
-		if (onClick) onClick(e);
-	}, [
-		isMultiple,
-		onClick,
-		selectPlan
-	]);
-	const cardStyle = (0, react.useMemo)(() => ({ cursor: isMultiple ? "pointer" : "unset" }), [isMultiple]);
-	const label = (0, react.useMemo)(() => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
-			variant: "title-xs",
-			ml: isMultiple ? 0 : 8,
-			"aria-hidden": true,
-			children: planDetail.title
-		});
-	}, [planDetail.title, isMultiple]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Card, {
-		isInteractive: isMultiple,
-		p: 0,
-		borderWidth: cardBorderSize,
-		height: inUpsellModal ? "100%" : void 0,
-		borderRadius: "md",
-		role: isMultiple ? "listitem" : void 0,
-		onClick: handleCardClick,
-		style: cardStyle,
-		children: [
-			planDetail.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-				as: "h3",
-				screenreader: true,
-				children: planDetail.title
-			}),
-			inUpsellModal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-				as: "h2",
-				variant: "title-xs",
-				color: "text-secondary",
-				textAlign: "center",
-				fontFamily: "accent",
-				mt: 24,
-				children: planDetail.title
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_styles.Background, {
-				bg: isSelected ? planDetail?.variant : "background",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-					width: "auto",
-					flexDirection: "row",
-					alignItems: {
-						_: "flex-start",
-						lg: "center"
-					},
-					justifyContent: "space-between",
-					px: 16,
-					py: 12,
-					borderBottom: isSelected ? 2 : 1,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-						alignItems: "center",
-						whiteSpace: "nowrap",
-						children: [isMultiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRadio, {
-							name: `switch-${planType}`,
-							htmlFor: `switch-${planType}`,
-							value: planType,
-							checked: isSelected,
-							onChange,
-							onKeyDown: handleKeyDown,
-							role: "switch",
-							tabIndex: 0,
-							"aria-checked": isSelected,
-							"aria-label": planDetail.title,
-							label
-						}), !isMultiple && label]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Badge, {
-						variant: "tertiary",
-						ml: {
-							_: 32,
-							xs: 0,
-							md: 32
-						},
-						children: planDetail.tag
-					})]
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-				px: isMultiple ? 0 : 24,
-				flexDirection: !isMultiple ? {
-					_: "column",
-					sm: "row",
-					md: "column",
-					lg: "row"
-				} : "column",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-						position: "relative",
-						alignItems: "center",
-						justifyContent: "center",
-						p: isMultiple ? 24 : {
-							_: 24,
-							sm: 0,
-							md: 24,
-							lg: 0
-						},
-						pt: inUpsellModal ? 0 : void 0,
-						color: "yellow",
-						children: [isSelected && isMultiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.DiagonalARegular, {
-							position: "absolute",
-							left: 0,
-							top: 0,
-							width: "100%",
-							height: "100%"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
-							color: "navy",
-							position: "relative",
-							children: [isSelected && isMultiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-								position: "absolute",
-								top: 4,
-								right: 4,
-								color: "yellow",
-								width: "100%",
-								height: "100%",
-								bg: "white",
-								overflow: "hidden",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.DiagonalADense, {})
-							}), price && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PricingBox, {
-								hasLongPrice,
-								variant: isMultiple ? "default" : "singlePlan",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PricingAmount.PricingAmount, {
-									termMonths,
-									price,
-									product: planType,
-									currency,
-									compact: true,
-									isMultiple,
-									inUpsellModal
-								})
-							})]
-						})]
-					}),
-					!isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-						height: "1px",
-						mx: 16,
-						overflow: "hidden",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.DotDense, { height: "auto" })
-					}),
-					!isMultiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-						height: "1px",
-						mx: 40,
-						overflow: "hidden",
-						display: {
-							_: "block",
-							sm: "none",
-							md: "block",
-							lg: "none"
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.CheckerDense, { height: "auto" })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-						justifyContent: "center",
-						alignContent: isMultiple ? "flex-start" : "unset",
-						alignItems: "center",
-						position: "relative",
-						px: isMultiple ? 24 : {
-							_: 40,
-							sm: 0
-						},
-						py: 24,
-						m: "auto",
-						flexDirection: "column",
-						flexWrap: "wrap",
-						flexGrow: isMultiple ? 1 : {
-							_: 1,
-							sm: "unset"
-						},
-						width: isMultiple ? "auto" : {
-							_: "100%",
-							sm: "65%",
-							md: "85%",
-							xl: "70%"
-						},
-						children: [
-							planType === "pro-gold" && isMultiple && !inUpsellModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RecommendedBadge.RecommendedBadge, { top: -14 }),
-							planType === "pro-gold" && isMultiple && inUpsellModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PopularBadge.PopularBadge, {}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList, {
-								flexDirection: { _: "column" },
-								flexWrap: isMultiple ? "unset" : {
-									_: "nowrap",
-									xs: "wrap"
-								},
-								maxHeight: isMultiple ? "unset" : {
-									_: "unset",
-									md: 120,
-									sm: 128,
-									xs: 176
-								},
-								width: isMultiple ? "unset" : {
-									_: "unset",
-									xs: "100%"
-								},
-								children: filteredPlanFeatures.map(({ name, available, isNew = false, isHighlighted = false }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PlanFeature.PlanFeature, {
-									feature: name,
-									available,
-									isNew,
-									isHighlighted,
-									isMultiple
-								}, name))
-							})
-						]
-					}),
-					ctaLabel && (planType === "pro-gold" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFillButton, {
-						href: ctaHref,
-						onClick,
-						m: 24,
-						mt: 0,
-						children: ctaLabel
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTextButton, {
-						variant: "secondary",
-						href: ctaHref,
-						onClick,
-						m: 24,
-						mt: 0,
-						children: ctaLabel
-					}))
-				]
-			})
-		]
-	}, planType);
-};
-
-//#endregion
-exports.PlanCard = PlanCard;

package/dist/PlanCard/index.d.cts

@@ -1,22 +0,0 @@
-import { Currency, PlanType } from "./types.cjs";
-import React, { ChangeEvent } from "react";
-
-//#region src/PlanCard/index.d.ts
-interface PlanCardProps {
-  isSelected: boolean;
-  isStudentPlan?: boolean;
-  price: string;
-  currency: Currency;
-  termMonths: number;
-  onChange: (changeEvent: ChangeEvent<HTMLInputElement>) => void;
-  onClick?: (event: React.MouseEvent) => void;
-  planType: PlanType;
-  inUpsellModal?: boolean;
-  isMultiple?: boolean;
-  isIndiaUser?: boolean;
-  ctaHref?: string;
-  ctaLabel?: string;
-}
-declare const PlanCard: React.FC<PlanCardProps>;
-//#endregion
-export { PlanCard, PlanCardProps };

package/dist/PlanCard/types.cjs

@@ -1,75 +0,0 @@
-
-//#region src/PlanCard/types.tsx
-let CurrencySymbol = /* @__PURE__ */ function(CurrencySymbol$1) {
-	CurrencySymbol$1["DOLLAR"] = "$";
-	CurrencySymbol$1["POUND"] = "£";
-	CurrencySymbol$1["EURO"] = "€";
-	CurrencySymbol$1["RUPEE"] = "₹";
-	CurrencySymbol$1["KRONA"] = "kr";
-	CurrencySymbol$1["KRONE"] = "kr";
-	CurrencySymbol$1["ZLOTY"] = "zł";
-	CurrencySymbol$1["REAL"] = "R$";
-	CurrencySymbol$1["LEV"] = "Лв.";
-	CurrencySymbol$1["FRANC"] = "Fr.";
-	CurrencySymbol$1["KORUNA"] = "Kč";
-	CurrencySymbol$1["KUNA"] = "kn";
-	CurrencySymbol$1["FORINT"] = "Ft";
-	CurrencySymbol$1["PESO"] = "$";
-	CurrencySymbol$1["LEU"] = "L";
-	return CurrencySymbol$1;
-}({});
-let Currency = /* @__PURE__ */ function(Currency$1) {
-	Currency$1["USD"] = "USD";
-	Currency$1["EUR"] = "EUR";
-	Currency$1["CAD"] = "CAD";
-	Currency$1["GBP"] = "GBP";
-	Currency$1["AUD"] = "AUD";
-	Currency$1["INR"] = "INR";
-	Currency$1["SEK"] = "SEK";
-	Currency$1["NOK"] = "NOK";
-	Currency$1["PLN"] = "PLN";
-	Currency$1["DKK"] = "DKK";
-	Currency$1["BRL"] = "BRL";
-	Currency$1["BGN"] = "BGN";
-	Currency$1["CHF"] = "CHF";
-	Currency$1["CZK"] = "CZK";
-	Currency$1["HRK"] = "HRK";
-	Currency$1["HUF"] = "HUF";
-	Currency$1["MXN"] = "MXN";
-	Currency$1["RON"] = "RON";
-	return Currency$1;
-}({});
-const currencySymbols = {
-	[Currency.USD]: CurrencySymbol.DOLLAR,
-	[Currency.CAD]: CurrencySymbol.DOLLAR,
-	[Currency.AUD]: CurrencySymbol.DOLLAR,
-	[Currency.EUR]: CurrencySymbol.EURO,
-	[Currency.GBP]: CurrencySymbol.POUND,
-	[Currency.INR]: CurrencySymbol.RUPEE,
-	[Currency.SEK]: CurrencySymbol.KRONA,
-	[Currency.NOK]: CurrencySymbol.KRONE,
-	[Currency.PLN]: CurrencySymbol.ZLOTY,
-	[Currency.DKK]: CurrencySymbol.KRONE,
-	[Currency.BRL]: CurrencySymbol.REAL,
-	[Currency.BGN]: CurrencySymbol.LEV,
-	[Currency.CHF]: CurrencySymbol.FRANC,
-	[Currency.CZK]: CurrencySymbol.KORUNA,
-	[Currency.HRK]: CurrencySymbol.KUNA,
-	[Currency.HUF]: CurrencySymbol.FORINT,
-	[Currency.MXN]: CurrencySymbol.PESO,
-	[Currency.RON]: CurrencySymbol.LEU
-};
-const getCurrencySymbol = (currency) => currencySymbols[currency];
-const getCurrencyPrefix = (currency) => {
-	switch (currency) {
-		case Currency.AUD: return "AU";
-		case Currency.CAD: return "CA";
-		default: return "";
-	}
-};
-
-//#endregion
-exports.Currency = Currency;
-exports.CurrencySymbol = CurrencySymbol;
-exports.getCurrencyPrefix = getCurrencyPrefix;
-exports.getCurrencySymbol = getCurrencySymbol;

package/dist/PlanCard/types.d.cts

@@ -1,43 +0,0 @@
-//#region src/PlanCard/types.d.ts
-type PlanType = 'basic' | 'pro' | 'pro-silver' | 'pro-gold' | 'bootcamp-all-access-pass';
-declare enum CurrencySymbol {
-  DOLLAR = "$",
-  POUND = "\u00A3",
-  EURO = "\u20AC",
-  RUPEE = "\u20B9",
-  KRONA = "kr",
-  KRONE = "kr",
-  ZLOTY = "z\u0142",
-  REAL = "R$",
-  LEV = "\u041B\u0432.",
-  FRANC = "Fr.",
-  KORUNA = "K\u010D",
-  KUNA = "kn",
-  FORINT = "Ft",
-  PESO = "$",
-  LEU = "L",
-}
-declare enum Currency {
-  USD = "USD",
-  EUR = "EUR",
-  CAD = "CAD",
-  GBP = "GBP",
-  AUD = "AUD",
-  INR = "INR",
-  SEK = "SEK",
-  NOK = "NOK",
-  PLN = "PLN",
-  DKK = "DKK",
-  BRL = "BRL",
-  BGN = "BGN",
-  CHF = "CHF",
-  CZK = "CZK",
-  HRK = "HRK",
-  HUF = "HUF",
-  MXN = "MXN",
-  RON = "RON",
-}
-declare const getCurrencySymbol: (currency: Currency) => CurrencySymbol;
-declare const getCurrencyPrefix: (currency: Currency) => "" | "AU" | "CA";
-//#endregion
-export { Currency, CurrencySymbol, PlanType, getCurrencyPrefix, getCurrencySymbol };