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

package/dist/PlanCard/PlanFeature.js

@@ -1,105 +1,88 @@
-import _styled from "@emotion/styled/base";
-import { Badge, FlexBox, Text } from '@codecademy/gamut';
-import { CloseCircleIcon, MiniCheckCircleIcon, StarFilledIcon } from '@codecademy/gamut-icons';
-import { css } from '@codecademy/gamut-styles';
-import React from 'react';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/_styled(FlexBox, {
-  target: "ehwi3120",
-  label: "ListItem"
-})(css({
-  listStyleType: 'none'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QbGFuQ2FyZC9QbGFuRmVhdHVyZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JpQiIsImZpbGUiOiIuLi8uLi9zcmMvUGxhbkNhcmQvUGxhbkZlYXR1cmUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQmFkZ2UsIEZsZXhCb3gsIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBDbG9zZUNpcmNsZUljb24sXG4gIE1pbmlDaGVja0NpcmNsZUljb24sXG4gIFN0YXJGaWxsZWRJY29uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW50ZXJmYWNlIFBsYW5GZWF0dXJlUHJvcHMge1xuICBmZWF0dXJlOiBzdHJpbmc7XG4gIGF2YWlsYWJsZTogYm9vbGVhbjtcbiAgaXNOZXc/OiBib29sZWFuO1xuICBpc0hpZ2hsaWdodGVkPzogYm9vbGVhbjtcbiAgaXNNdWx0aXBsZTogYm9vbGVhbjtcbn1cblxuY29uc3QgTGlzdEl0ZW0gPSBzdHlsZWQoRmxleEJveCkoY3NzKHsgbGlzdFN0eWxlVHlwZTogJ25vbmUnIH0pKS53aXRoQ29tcG9uZW50KFxuICAnbGknXG4pO1xuXG5leHBvcnQgY29uc3QgUGxhbkZlYXR1cmU6IFJlYWN0LkZDPFBsYW5GZWF0dXJlUHJvcHM+ID0gKHtcbiAgZmVhdHVyZSxcbiAgYXZhaWxhYmxlLFxuICBpc05ldyxcbiAgaXNIaWdobGlnaHRlZCxcbiAgaXNNdWx0aXBsZSxcbn0pID0+IHtcbiAgY29uc3QgSWNvbiA9IGlzSGlnaGxpZ2h0ZWRcbiAgICA/IFN0YXJGaWxsZWRJY29uXG4gICAgOiBhdmFpbGFibGVcbiAgICA/IE1pbmlDaGVja0NpcmNsZUljb25cbiAgICA6IENsb3NlQ2lyY2xlSWNvbjtcblxuICBpZiAoaXNIaWdobGlnaHRlZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8QmFkZ2Ugc2l6ZT1cInNtXCIgdmFyaWFudD1cImFjY2VudFwiIHB5PXsxMn0gbWI9ezR9IG1sPXsnLTRweCcgYXMgbmV2ZXJ9PlxuICAgICAgICA8SWNvbiBzaXplPXsxNH0gbXI9ezh9IGZsZXhTaHJpbms9ezB9IGFyaWEtaGlkZGVuIC8+XG4gICAgICAgIDxUZXh0IGZvbnRTaXplPVwic21hbGxcIj5cbiAgICAgICAgICB7ZmVhdHVyZX1cbiAgICAgICAgICA8VGV4dCBzY3JlZW5yZWFkZXI+IGluY2x1ZGVkLjwvVGV4dD5cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9CYWRnZT5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8RmxleEJveFxuICAgICAgYXM9e0xpc3RJdGVtfVxuICAgICAga2V5PXtmZWF0dXJlfVxuICAgICAgYWxpZ25JdGVtcz17aXNNdWx0aXBsZSA/ICdjZW50ZXInIDogeyBfOiAnY2VudGVyJywgeHM6ICdmbGV4LXN0YXJ0JyB9fVxuICAgICAgbXI9e2lzTXVsdGlwbGUgPyAndW5zZXQnIDogeyBfOiAndW5zZXQnLCB4czogMjQsIHNtOiA4IH19XG4gICAgICB3aWR0aD17aXNNdWx0aXBsZSA/ICd1bnNldCcgOiB7IF86ICd1bnNldCcsIHhzOiAnNTAlJyB9fVxuICAgICAgZGF0YS10ZXN0aWQ9XCJwbGFuLWZlYXR1cmVcIlxuICAgID5cbiAgICAgIDxJY29uXG4gICAgICAgIG1yPXs4fVxuICAgICAgICBtdD17aXNNdWx0aXBsZSA/IDAgOiB7IHhzOiA0IH19XG4gICAgICAgIGZsZXhTaHJpbms9ezB9XG4gICAgICAgIGNvbG9yPXthdmFpbGFibGUgPyAnZmVlZGJhY2stc3VjY2VzcycgOiAnZ3JheS02MDAnfVxuICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgLz5cblxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgZmxleFdyYXA9e3sgXzogJ25vd3JhcCcsIG1kOiAnd3JhcCcsIGxnOiAnbm93cmFwJyB9fVxuICAgICAgICBhbGlnbkl0ZW1zPVwiYmFzZWxpbmVcIlxuICAgICAgPlxuICAgICAgICB7YXZhaWxhYmxlID8gKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8VGV4dCB3aWR0aD1cIjEwMCVcIj5cbiAgICAgICAgICAgICAge2ZlYXR1cmV9XG4gICAgICAgICAgICAgIDxUZXh0IHNjcmVlbnJlYWRlcj4gaW5jbHVkZWQuPC9UZXh0PlxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8VGV4dCB0ZXh0RGVjb3JhdGlvbj1cImxpbmUtdGhyb3VnaFwiIGNvbG9yPVwidGV4dC1kaXNhYmxlZFwiPlxuICAgICAgICAgICAgICB7ZmVhdHVyZX1cbiAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPiBub3QgaW5jbHVkZWQuPC9UZXh0PlxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuXG4gICAgICAgIHtpc05ldyAmJiAoXG4gICAgICAgICAgPEJhZGdlIHNpemU9XCJzbVwiIHZhcmlhbnQ9XCJhY2NlbnRcIiBtbD17eyBfOiA0LCBtZDogMCwgbGc6IDQgfX0+XG4gICAgICAgICAgICBOZXdcbiAgICAgICAgICA8L0JhZGdlPlxuICAgICAgICApfVxuICAgICAgPC9GbGV4Qm94PlxuICAgIDwvRmxleEJveD5cbiAgKTtcbn07XG4iXX0= */").withComponent('li', {
-  target: "ehwi3121",
-  label: "ListItem"
-});
-export const PlanFeature = ({
-  feature,
-  available,
-  isNew,
-  isHighlighted,
-  isMultiple
-}) => {
-  const Icon = isHighlighted ? StarFilledIcon : available ? MiniCheckCircleIcon : CloseCircleIcon;
-  if (isHighlighted) {
-    return /*#__PURE__*/_jsxs(Badge, {
-      size: "sm",
-      variant: "accent",
-      py: 12,
-      mb: 4,
-      ml: '-4px',
-      children: [/*#__PURE__*/_jsx(Icon, {
-        size: 14,
-        mr: 8,
-        flexShrink: 0,
-        "aria-hidden": true
-      }), /*#__PURE__*/_jsxs(Text, {
-        fontSize: "small",
-        children: [feature, /*#__PURE__*/_jsx(Text, {
-          screenreader: true,
-          children: " included."
-        })]
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(FlexBox, {
-    as: ListItem,
-    alignItems: isMultiple ? 'center' : {
-      _: 'center',
-      xs: 'flex-start'
-    },
-    mr: isMultiple ? 'unset' : {
-      _: 'unset',
-      xs: 24,
-      sm: 8
-    },
-    width: isMultiple ? 'unset' : {
-      _: 'unset',
-      xs: '50%'
-    },
-    "data-testid": "plan-feature",
-    children: [/*#__PURE__*/_jsx(Icon, {
-      mr: 8,
-      mt: isMultiple ? 0 : {
-        xs: 4
-      },
-      flexShrink: 0,
-      color: available ? 'feedback-success' : 'gray-600',
-      "aria-hidden": true
-    }), /*#__PURE__*/_jsxs(FlexBox, {
-      flexWrap: {
-        _: 'nowrap',
-        md: 'wrap',
-        lg: 'nowrap'
-      },
-      alignItems: "baseline",
-      children: [available ? /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsxs(Text, {
-          width: "100%",
-          children: [feature, /*#__PURE__*/_jsx(Text, {
-            screenreader: true,
-            children: " included."
-          })]
-        })
-      }) : /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsxs(Text, {
-          textDecoration: "line-through",
-          color: "text-disabled",
-          children: [feature, /*#__PURE__*/_jsx(Text, {
-            screenreader: true,
-            children: " not included."
-          })]
-        })
-      }), isNew && /*#__PURE__*/_jsx(Badge, {
-        size: "sm",
-        variant: "accent",
-        ml: {
-          _: 4,
-          md: 0,
-          lg: 4
-        },
-        children: "New"
-      })]
-    })]
-  }, feature);
-};
+import { Badge, FlexBox, Text } from "@codecademy/gamut";
+import { css } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CloseCircleIcon, MiniCheckCircleIcon, StarFilledIcon } from "@codecademy/gamut-icons";
+
+//#region src/PlanCard/PlanFeature.tsx
+const ListItem = styled(FlexBox)(css({ listStyleType: "none" })).withComponent("li");
+const PlanFeature = ({ feature, available, isNew, isHighlighted, isMultiple }) => {
+	const Icon = isHighlighted ? StarFilledIcon : available ? MiniCheckCircleIcon : CloseCircleIcon;
+	if (isHighlighted) return /* @__PURE__ */ jsxs(Badge, {
+		size: "sm",
+		variant: "accent",
+		py: 12,
+		mb: 4,
+		ml: "-4px",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			size: 14,
+			mr: 8,
+			flexShrink: 0,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs(Text, {
+			fontSize: "small",
+			children: [feature, /* @__PURE__ */ jsx(Text, {
+				screenreader: true,
+				children: " included."
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsxs(FlexBox, {
+		as: ListItem,
+		alignItems: isMultiple ? "center" : {
+			_: "center",
+			xs: "flex-start"
+		},
+		mr: isMultiple ? "unset" : {
+			_: "unset",
+			xs: 24,
+			sm: 8
+		},
+		width: isMultiple ? "unset" : {
+			_: "unset",
+			xs: "50%"
+		},
+		"data-testid": "plan-feature",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			mr: 8,
+			mt: isMultiple ? 0 : { xs: 4 },
+			flexShrink: 0,
+			color: available ? "feedback-success" : "gray-600",
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs(FlexBox, {
+			flexWrap: {
+				_: "nowrap",
+				md: "wrap",
+				lg: "nowrap"
+			},
+			alignItems: "baseline",
+			children: [available ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Text, {
+				width: "100%",
+				children: [feature, /* @__PURE__ */ jsx(Text, {
+					screenreader: true,
+					children: " included."
+				})]
+			}) }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Text, {
+				textDecoration: "line-through",
+				color: "text-disabled",
+				children: [feature, /* @__PURE__ */ jsx(Text, {
+					screenreader: true,
+					children: " not included."
+				})]
+			}) }), isNew && /* @__PURE__ */ jsx(Badge, {
+				size: "sm",
+				variant: "accent",
+				ml: {
+					_: 4,
+					md: 0,
+					lg: 4
+				},
+				children: "New"
+			})]
+		})]
+	}, feature);
+};
+
+//#endregion
+export { PlanFeature };

package/dist/PlanCard/PopularBadge.cjs

@@ -0,0 +1,20 @@
+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/PlanCard/PopularBadge.tsx
+const PopularBadge = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+	position: "absolute",
+	top: -10,
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Badge, {
+		variant: "accent",
+		size: "sm",
+		children: "Most popular"
+	})
+});
+
+//#endregion
+exports.PopularBadge = PopularBadge;

package/dist/PlanCard/PopularBadge.js

@@ -1,13 +1,18 @@
-import { Badge, FlexBox } from '@codecademy/gamut';
-import React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const PopularBadge = props => /*#__PURE__*/_jsx(FlexBox, {
-  position: "absolute",
-  top: -10,
-  ...props,
-  children: /*#__PURE__*/_jsx(Badge, {
-    variant: "accent",
-    size: "sm",
-    children: "Most popular"
-  })
-});
+import { Badge, FlexBox } from "@codecademy/gamut";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/PlanCard/PopularBadge.tsx
+const PopularBadge = (props) => /* @__PURE__ */ jsx(FlexBox, {
+	position: "absolute",
+	top: -10,
+	...props,
+	children: /* @__PURE__ */ jsx(Badge, {
+		variant: "accent",
+		size: "sm",
+		children: "Most popular"
+	})
+});
+
+//#endregion
+export { PopularBadge };

package/dist/PlanCard/PricingAmount.cjs

@@ -0,0 +1,122 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_types = require('./types.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/PlanCard/PricingAmount.tsx
+const Amount = (0, _emotion_styled.default)(_codecademy_gamut.Text)`
+  font-weight: bold;
+  color: ${_codecademy_gamut_styles.theme.colors.text};
+  font-size: ${({ isMultiple }) => isMultiple ? "44px" : "64px"};
+  line-height: ${({ isMultiple }) => isMultiple ? "64px" : "80px"};
+  ${_codecademy_gamut_styles.theme.breakpoints.xl} {
+    font-size: 64px;
+    line-height: 80px;
+  }
+`;
+const PricingAmount = ({ currency, monthlyPrice, product, price, termMonths, compact = false, isMultiple, inUpsellModal = false }) => {
+	const cycle = termMonths === 1 ? "monthly" : "annually";
+	const [dollars, cents] = price.split(".");
+	let ariaLabel = `${require_types.getCurrencyPrefix(currency)}${require_types.getCurrencySymbol(currency)}${dollars}${cents ? `.${cents}` : ""}`;
+	if (product !== "basic") {
+		ariaLabel += ` a month, billed ${cycle}`;
+		if (inUpsellModal) ariaLabel += ", monthly pricing also available";
+		if (monthlyPrice) ariaLabel += ` or ${require_types.getCurrencyPrefix(currency)}${require_types.getCurrencySymbol(currency)}${monthlyPrice} billed monthly`;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+		"data-testid": "pricing-amount",
+		lineHeight: "title",
+		mb: compact ? 0 : 8,
+		column: true,
+		alignItems: "center",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				screenreader: true,
+				"data-testid": "pricing-amount-label",
+				children: ariaLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+				"aria-hidden": true,
+				row: true,
+				alignItems: "center",
+				height: isMultiple ? {
+					_: 50,
+					xl: "unset"
+				} : "unset",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					mr: 4,
+					alignItems: "start",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+							color: "text",
+							mt: {
+								_: 12,
+								xl: 16
+							},
+							fontWeight: "bold",
+							fontSize: 34,
+							children: `${require_types.getCurrencyPrefix(currency)}${require_types.getCurrencySymbol(currency)}`
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Amount, {
+							isMultiple,
+							children: `${dollars}`
+						}),
+						product === "basic" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+							column: true,
+							alignItems: "flex-end",
+							ml: 4,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+								color: "text",
+								fontWeight: "bold",
+								fontSize: 22,
+								mt: {
+									_: 12,
+									xl: 16
+								},
+								children: cents ? `.${cents}` : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "\xA0" })
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+								mt: {
+									_: 0,
+									xl: 4
+								},
+								color: "text-secondary",
+								children: "/mo"
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				color: "text-secondary",
+				center: true,
+				mt: compact ? 0 : {
+					_: 8,
+					xl: 0
+				},
+				children: product === "basic" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+					mb: 24,
+					children: "Always free"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						mb: compact ? 0 : 8,
+						"aria-hidden": true,
+						children: `Billed ${cycle}${inUpsellModal ? "*" : ""}`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+					monthlyPrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						"aria-hidden": true,
+						children: `or ${require_types.getCurrencyPrefix(currency)}${require_types.getCurrencySymbol(currency)}${monthlyPrice} billed monthly`
+					})
+				] })
+			})
+		]
+	}) });
+};
+
+//#endregion
+exports.PricingAmount = PricingAmount;

package/dist/PlanCard/PricingAmount.js

@@ -1,117 +1,119 @@
-import _styled from "@emotion/styled/base";
-import { FlexBox, Text } from '@codecademy/gamut';
-import { theme } from '@codecademy/gamut-styles';
-import React from 'react';
-import { getCurrencyPrefix, getCurrencySymbol } from './types';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const Amount = /*#__PURE__*/_styled(Text, {
-  target: "elw3jo70",
-  label: "Amount"
-})("font-weight:bold;color:", theme.colors.text, ";font-size:", ({
-  isMultiple
-}) => isMultiple ? '44px' : '64px', ";line-height:", ({
-  isMultiple
-}) => isMultiple ? '64px' : '80px', ";", theme.breakpoints.xl, "{font-size:64px;line-height:80px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QbGFuQ2FyZC9QcmljaW5nQW1vdW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZb0QiLCJmaWxlIjoiLi4vLi4vc3JjL1BsYW5DYXJkL1ByaWNpbmdBbW91bnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIEN1cnJlbmN5LFxuICBnZXRDdXJyZW5jeVByZWZpeCxcbiAgZ2V0Q3VycmVuY3lTeW1ib2wsXG4gIFBsYW5UeXBlLFxufSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgQW1vdW50ID0gc3R5bGVkKFRleHQpPHsgaXNNdWx0aXBsZTogYm9vbGVhbiB9PmBcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIGNvbG9yOiAke3RoZW1lLmNvbG9ycy50ZXh0fTtcbiAgZm9udC1zaXplOiAkeyh7IGlzTXVsdGlwbGUgfSkgPT4gKGlzTXVsdGlwbGUgPyAnNDRweCcgOiAnNjRweCcpfTtcbiAgbGluZS1oZWlnaHQ6ICR7KHsgaXNNdWx0aXBsZSB9KSA9PiAoaXNNdWx0aXBsZSA/ICc2NHB4JyA6ICc4MHB4Jyl9O1xuICAke3RoZW1lLmJyZWFrcG9pbnRzLnhsfSB7XG4gICAgZm9udC1zaXplOiA2NHB4O1xuICAgIGxpbmUtaGVpZ2h0OiA4MHB4O1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJpY2luZ0Ftb3VudFByb3BzIHtcbiAgcHJvZHVjdDogUGxhblR5cGU7XG4gIHByaWNlOiBzdHJpbmc7XG4gIG1vbnRobHlQcmljZT86IHN0cmluZztcbiAgY3VycmVuY3k6IEN1cnJlbmN5O1xuICB0ZXJtTW9udGhzPzogbnVtYmVyO1xuICBjb21wYWN0PzogYm9vbGVhbjtcbiAgaXNNdWx0aXBsZTogYm9vbGVhbjtcbiAgaW5VcHNlbGxNb2RhbD86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBjb25zdCBQcmljaW5nQW1vdW50OiBSZWFjdC5GQzxQcmljaW5nQW1vdW50UHJvcHM+ID0gKHtcbiAgY3VycmVuY3ksXG4gIG1vbnRobHlQcmljZSxcbiAgcHJvZHVjdCxcbiAgcHJpY2UsXG4gIHRlcm1Nb250aHMsXG4gIGNvbXBhY3QgPSBmYWxzZSxcbiAgaXNNdWx0aXBsZSxcbiAgaW5VcHNlbGxNb2RhbCA9IGZhbHNlLFxufSkgPT4ge1xuICBjb25zdCBjeWNsZSA9IHRlcm1Nb250aHMgPT09IDEgPyAnbW9udGhseScgOiAnYW5udWFsbHknO1xuICBjb25zdCBbZG9sbGFycywgY2VudHNdID0gcHJpY2Uuc3BsaXQoJy4nKTtcbiAgbGV0IGFyaWFMYWJlbCA9IGAke2dldEN1cnJlbmN5UHJlZml4KGN1cnJlbmN5KX0ke2dldEN1cnJlbmN5U3ltYm9sKFxuICAgIGN1cnJlbmN5XG4gICl9JHtkb2xsYXJzfSR7Y2VudHMgPyBgLiR7Y2VudHN9YCA6ICcnfWA7XG4gIGlmIChwcm9kdWN0ICE9PSAnYmFzaWMnKSB7XG4gICAgYXJpYUxhYmVsICs9IGAgYSBtb250aCwgYmlsbGVkICR7Y3ljbGV9YDtcbiAgICBpZiAoaW5VcHNlbGxNb2RhbCkgYXJpYUxhYmVsICs9ICcsIG1vbnRobHkgcHJpY2luZyBhbHNvIGF2YWlsYWJsZSc7XG4gICAgaWYgKG1vbnRobHlQcmljZSkge1xuICAgICAgYXJpYUxhYmVsICs9IGAgb3IgJHtnZXRDdXJyZW5jeVByZWZpeChjdXJyZW5jeSl9JHtnZXRDdXJyZW5jeVN5bWJvbChcbiAgICAgICAgY3VycmVuY3lcbiAgICAgICl9JHttb250aGx5UHJpY2V9IGJpbGxlZCBtb250aGx5YDtcbiAgICB9XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8RmxleEJveFxuICAgICAgICBkYXRhLXRlc3RpZD1cInByaWNpbmctYW1vdW50XCJcbiAgICAgICAgbGluZUhlaWdodD1cInRpdGxlXCJcbiAgICAgICAgbWI9e2NvbXBhY3QgPyAwIDogOH1cbiAgICAgICAgY29sdW1uXG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgPlxuICAgICAgICA8VGV4dCBzY3JlZW5yZWFkZXIgZGF0YS10ZXN0aWQ9XCJwcmljaW5nLWFtb3VudC1sYWJlbFwiPlxuICAgICAgICAgIHthcmlhTGFiZWx9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICAgey8qIGZvciBzY3JlZW4gcmVhZGVyIG9wdGltaXphdGlvbiAqL31cbiAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgICAgIHJvd1xuICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgIGhlaWdodD17aXNNdWx0aXBsZSA/IHsgXzogNTAsIHhsOiAndW5zZXQnIH0gOiAndW5zZXQnfVxuICAgICAgICA+XG4gICAgICAgICAgPEZsZXhCb3ggbXI9ezR9IGFsaWduSXRlbXM9XCJzdGFydFwiPlxuICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0XCJcbiAgICAgICAgICAgICAgbXQ9e3sgXzogMTIsIHhsOiAxNiB9fVxuICAgICAgICAgICAgICBmb250V2VpZ2h0PVwiYm9sZFwiXG4gICAgICAgICAgICAgIGZvbnRTaXplPXszNH1cbiAgICAgICAgICAgID57YCR7Z2V0Q3VycmVuY3lQcmVmaXgoY3VycmVuY3kpfSR7Z2V0Q3VycmVuY3lTeW1ib2woXG4gICAgICAgICAgICAgIGN1cnJlbmN5XG4gICAgICAgICAgICApfWB9PC9UZXh0PlxuICAgICAgICAgICAgPEFtb3VudCBpc011bHRpcGxlPXtpc011bHRpcGxlfT57YCR7ZG9sbGFyc31gfTwvQW1vdW50PlxuICAgICAgICAgICAge3Byb2R1Y3QgPT09ICdiYXNpYycgPyBudWxsIDogKFxuICAgICAgICAgICAgICA8RmxleEJveCBjb2x1bW4gYWxpZ25JdGVtcz1cImZsZXgtZW5kXCIgbWw9ezR9PlxuICAgICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgICBjb2xvcj1cInRleHRcIlxuICAgICAgICAgICAgICAgICAgZm9udFdlaWdodD1cImJvbGRcIlxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezIyfVxuICAgICAgICAgICAgICAgICAgbXQ9e3sgXzogMTIsIHhsOiAxNiB9fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtjZW50cyA/IGAuJHtjZW50c31gIDogPHNwYW4+Jm5ic3A7PC9zcGFuPn1cbiAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPFRleHQgbXQ9e3sgXzogMCwgeGw6IDQgfX0gY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiPlxuICAgICAgICAgICAgICAgICAgL21vXG4gICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8VGV4dCBjb2xvcj1cInRleHQtc2Vjb25kYXJ5XCIgY2VudGVyIG10PXtjb21wYWN0ID8gMCA6IHsgXzogOCwgeGw6IDAgfX0+XG4gICAgICAgICAge3Byb2R1Y3QgPT09ICdiYXNpYycgPyAoXG4gICAgICAgICAgICA8VGV4dCBtYj17MjR9PkFsd2F5cyBmcmVlPC9UZXh0PlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICA8PlxuICAgICAgICAgICAgICA8VGV4dCBtYj17Y29tcGFjdCA/IDAgOiA4fSBhcmlhLWhpZGRlbj5cbiAgICAgICAgICAgICAgICB7YEJpbGxlZCAke2N5Y2xlfSR7aW5VcHNlbGxNb2RhbCA/ICcqJyA6ICcnfWB9XG4gICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgPGJyIC8+XG4gICAgICAgICAgICAgIHttb250aGx5UHJpY2UgJiYgKFxuICAgICAgICAgICAgICAgIDxUZXh0IGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICAgICAge2BvciAke2dldEN1cnJlbmN5UHJlZml4KGN1cnJlbmN5KX0ke2dldEN1cnJlbmN5U3ltYm9sKFxuICAgICAgICAgICAgICAgICAgICBjdXJyZW5jeVxuICAgICAgICAgICAgICAgICAgKX0ke21vbnRobHlQcmljZX0gYmlsbGVkIG1vbnRobHlgfVxuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvRmxleEJveD5cbiAgICA8Lz5cbiAgKTtcbn07XG4iXX0= */"));
-export const PricingAmount = ({
-  currency,
-  monthlyPrice,
-  product,
-  price,
-  termMonths,
-  compact = false,
-  isMultiple,
-  inUpsellModal = false
-}) => {
-  const cycle = termMonths === 1 ? 'monthly' : 'annually';
-  const [dollars, cents] = price.split('.');
-  let ariaLabel = `${getCurrencyPrefix(currency)}${getCurrencySymbol(currency)}${dollars}${cents ? `.${cents}` : ''}`;
-  if (product !== 'basic') {
-    ariaLabel += ` a month, billed ${cycle}`;
-    if (inUpsellModal) ariaLabel += ', monthly pricing also available';
-    if (monthlyPrice) {
-      ariaLabel += ` or ${getCurrencyPrefix(currency)}${getCurrencySymbol(currency)}${monthlyPrice} billed monthly`;
-    }
+import { getCurrencyPrefix, getCurrencySymbol } from "./types.js";
+import { FlexBox, Text } from "@codecademy/gamut";
+import { theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/PlanCard/PricingAmount.tsx
+const Amount = styled(Text)`
+  font-weight: bold;
+  color: ${theme.colors.text};
+  font-size: ${({ isMultiple }) => isMultiple ? "44px" : "64px"};
+  line-height: ${({ isMultiple }) => isMultiple ? "64px" : "80px"};
+  ${theme.breakpoints.xl} {
+    font-size: 64px;
+    line-height: 80px;
   }
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(FlexBox, {
-      "data-testid": "pricing-amount",
-      lineHeight: "title",
-      mb: compact ? 0 : 8,
-      column: true,
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsx(Text, {
-        screenreader: true,
-        "data-testid": "pricing-amount-label",
-        children: ariaLabel
-      }), /*#__PURE__*/_jsx(FlexBox, {
-        "aria-hidden": true,
-        row: true,
-        alignItems: "center",
-        height: isMultiple ? {
-          _: 50,
-          xl: 'unset'
-        } : 'unset',
-        children: /*#__PURE__*/_jsxs(FlexBox, {
-          mr: 4,
-          alignItems: "start",
-          children: [/*#__PURE__*/_jsx(Text, {
-            color: "text",
-            mt: {
-              _: 12,
-              xl: 16
-            },
-            fontWeight: "bold",
-            fontSize: 34,
-            children: `${getCurrencyPrefix(currency)}${getCurrencySymbol(currency)}`
-          }), /*#__PURE__*/_jsx(Amount, {
-            isMultiple: isMultiple,
-            children: `${dollars}`
-          }), product === 'basic' ? null : /*#__PURE__*/_jsxs(FlexBox, {
-            column: true,
-            alignItems: "flex-end",
-            ml: 4,
-            children: [/*#__PURE__*/_jsx(Text, {
-              color: "text",
-              fontWeight: "bold",
-              fontSize: 22,
-              mt: {
-                _: 12,
-                xl: 16
-              },
-              children: cents ? `.${cents}` : /*#__PURE__*/_jsx("span", {
-                children: "\xA0"
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              mt: {
-                _: 0,
-                xl: 4
-              },
-              color: "text-secondary",
-              children: "/mo"
-            })]
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        color: "text-secondary",
-        center: true,
-        mt: compact ? 0 : {
-          _: 8,
-          xl: 0
-        },
-        children: product === 'basic' ? /*#__PURE__*/_jsx(Text, {
-          mb: 24,
-          children: "Always free"
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            mb: compact ? 0 : 8,
-            "aria-hidden": true,
-            children: `Billed ${cycle}${inUpsellModal ? '*' : ''}`
-          }), /*#__PURE__*/_jsx("br", {}), monthlyPrice && /*#__PURE__*/_jsx(Text, {
-            "aria-hidden": true,
-            children: `or ${getCurrencyPrefix(currency)}${getCurrencySymbol(currency)}${monthlyPrice} billed monthly`
-          })]
-        })
-      })]
-    })
-  });
-};
+`;
+const PricingAmount = ({ currency, monthlyPrice, product, price, termMonths, compact = false, isMultiple, inUpsellModal = false }) => {
+	const cycle = termMonths === 1 ? "monthly" : "annually";
+	const [dollars, cents] = price.split(".");
+	let ariaLabel = `${getCurrencyPrefix(currency)}${getCurrencySymbol(currency)}${dollars}${cents ? `.${cents}` : ""}`;
+	if (product !== "basic") {
+		ariaLabel += ` a month, billed ${cycle}`;
+		if (inUpsellModal) ariaLabel += ", monthly pricing also available";
+		if (monthlyPrice) ariaLabel += ` or ${getCurrencyPrefix(currency)}${getCurrencySymbol(currency)}${monthlyPrice} billed monthly`;
+	}
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(FlexBox, {
+		"data-testid": "pricing-amount",
+		lineHeight: "title",
+		mb: compact ? 0 : 8,
+		column: true,
+		alignItems: "center",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				screenreader: true,
+				"data-testid": "pricing-amount-label",
+				children: ariaLabel
+			}),
+			/* @__PURE__ */ jsx(FlexBox, {
+				"aria-hidden": true,
+				row: true,
+				alignItems: "center",
+				height: isMultiple ? {
+					_: 50,
+					xl: "unset"
+				} : "unset",
+				children: /* @__PURE__ */ jsxs(FlexBox, {
+					mr: 4,
+					alignItems: "start",
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							color: "text",
+							mt: {
+								_: 12,
+								xl: 16
+							},
+							fontWeight: "bold",
+							fontSize: 34,
+							children: `${getCurrencyPrefix(currency)}${getCurrencySymbol(currency)}`
+						}),
+						/* @__PURE__ */ jsx(Amount, {
+							isMultiple,
+							children: `${dollars}`
+						}),
+						product === "basic" ? null : /* @__PURE__ */ jsxs(FlexBox, {
+							column: true,
+							alignItems: "flex-end",
+							ml: 4,
+							children: [/* @__PURE__ */ jsx(Text, {
+								color: "text",
+								fontWeight: "bold",
+								fontSize: 22,
+								mt: {
+									_: 12,
+									xl: 16
+								},
+								children: cents ? `.${cents}` : /* @__PURE__ */ jsx("span", { children: "\xA0" })
+							}), /* @__PURE__ */ jsx(Text, {
+								mt: {
+									_: 0,
+									xl: 4
+								},
+								color: "text-secondary",
+								children: "/mo"
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "text-secondary",
+				center: true,
+				mt: compact ? 0 : {
+					_: 8,
+					xl: 0
+				},
+				children: product === "basic" ? /* @__PURE__ */ jsx(Text, {
+					mb: 24,
+					children: "Always free"
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						mb: compact ? 0 : 8,
+						"aria-hidden": true,
+						children: `Billed ${cycle}${inUpsellModal ? "*" : ""}`
+					}),
+					/* @__PURE__ */ jsx("br", {}),
+					monthlyPrice && /* @__PURE__ */ jsx(Text, {
+						"aria-hidden": true,
+						children: `or ${getCurrencyPrefix(currency)}${getCurrencySymbol(currency)}${monthlyPrice} billed monthly`
+					})
+				] })
+			})
+		]
+	}) });
+};
+
+//#endregion
+export { PricingAmount };