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

package/dist/PlanCard/PlanCardBanner.js

@@ -1,27 +1,28 @@
-import { Text } from "@codecademy/gamut";
-import { Background, css } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/PlanCard/PlanCardBanner.tsx
-const BackgroundFlex = styled(Background)(css({
-	display: "flex",
-	p: 8,
-	justifyContent: "center",
-	alignItems: "center"
-}));
-const PlanCardBanner = ({ text, icon }) => {
-	return /* @__PURE__ */ jsxs(BackgroundFlex, {
-		bg: "navy",
-		children: [icon && icon, /* @__PURE__ */ jsx(Text, {
-			fontFamily: "accent",
-			fontSize: 14,
-			ml: 8,
-			children: text
-		})]
-	});
-};
-
-//#endregion
-export { PlanCardBanner };
+import _styled from "@emotion/styled/base";
+import { Text } from '@codecademy/gamut';
+import { Background, css } from '@codecademy/gamut-styles';
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BackgroundFlex = /*#__PURE__*/_styled(Background, {
+  target: "e1fl3u9v0",
+  label: "BackgroundFlex"
+})(css({
+  display: 'flex',
+  p: 8,
+  justifyContent: 'center',
+  alignItems: 'center'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QbGFuQ2FyZC9QbGFuQ2FyZEJhbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXVCIiwiZmlsZSI6Ii4uLy4uL3NyYy9QbGFuQ2FyZC9QbGFuQ2FyZEJhbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQmFja2dyb3VuZCwgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmludGVyZmFjZSBQbGFuQ2FyZEJhbm5lclByb3BzIHtcbiAgdGV4dDogc3RyaW5nO1xuICBpY29uPzogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5jb25zdCBCYWNrZ3JvdW5kRmxleCA9IHN0eWxlZChCYWNrZ3JvdW5kKShcbiAgY3NzKHtcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcDogOCxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2NlbnRlcicsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgUGxhbkNhcmRCYW5uZXI6IFJlYWN0LkZDPFBsYW5DYXJkQmFubmVyUHJvcHM+ID0gKHtcbiAgdGV4dCxcbiAgaWNvbixcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8QmFja2dyb3VuZEZsZXggYmc9XCJuYXZ5XCI+XG4gICAgICB7aWNvbiAmJiBpY29ufVxuICAgICAgPFRleHQgZm9udEZhbWlseT1cImFjY2VudFwiIGZvbnRTaXplPXsxNH0gbWw9ezh9PlxuICAgICAgICB7dGV4dH1cbiAgICAgIDwvVGV4dD5cbiAgICA8L0JhY2tncm91bmRGbGV4PlxuICApO1xufTtcbiJdfQ== */");
+export const PlanCardBanner = ({
+  text,
+  icon
+}) => {
+  return /*#__PURE__*/_jsxs(BackgroundFlex, {
+    bg: "navy",
+    children: [icon && icon, /*#__PURE__*/_jsx(Text, {
+      fontFamily: "accent",
+      fontSize: 14,
+      ml: 8,
+      children: text
+    })]
+  });
+};

package/dist/PlanCard/PlanFeature.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface PlanFeatureProps {
+    feature: string;
+    available: boolean;
+    isNew?: boolean;
+    isHighlighted?: boolean;
+    isMultiple: boolean;
+}
+export declare const PlanFeature: React.FC<PlanFeatureProps>;
+export {};

package/dist/PlanCard/PlanFeature.js

@@ -1,88 +1,105 @@
-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 };
+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);
+};

package/dist/PlanCard/PopularBadge.d.ts

@@ -0,0 +1,3 @@
+import { FlexBoxProps } from '@codecademy/gamut';
+import React from 'react';
+export declare const PopularBadge: React.FC<FlexBoxProps>;

package/dist/PlanCard/PopularBadge.js

@@ -1,18 +1,13 @@
-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 };
+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"
+  })
+});

package/dist/PlanCard/PricingAmount.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Currency, PlanType } from './types';
+interface PricingAmountProps {
+    product: PlanType;
+    price: string;
+    monthlyPrice?: string;
+    currency: Currency;
+    termMonths?: number;
+    compact?: boolean;
+    isMultiple: boolean;
+    inUpsellModal?: boolean;
+}
+export declare const PricingAmount: React.FC<PricingAmountProps>;
+export {};

package/dist/PlanCard/PricingAmount.js

@@ -1,119 +1,117 @@
-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;
+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`;
+    }
   }
-`;
-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 };
+  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`
+          })]
+        })
+      })]
+    })
+  });
+};

package/dist/PlanCard/RecommendedBadge.d.ts

@@ -0,0 +1,3 @@
+import { FlexBoxProps } from '@codecademy/gamut';
+import React from 'react';
+export declare const RecommendedBadge: React.FC<FlexBoxProps>;

package/dist/PlanCard/RecommendedBadge.js

@@ -1,29 +1,24 @@
-import { FlexBox, Text } from "@codecademy/gamut";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { MiniStarIcon } from "@codecademy/gamut-icons";
-
-//#region src/PlanCard/RecommendedBadge.tsx
-const RecommendedBadge = (props) => /* @__PURE__ */ jsxs(FlexBox, {
-	position: "absolute",
-	top: -28,
-	bg: "navy",
-	color: "white",
-	p: 8,
-	borderRadiusTop: "sm",
-	borderRadiusBottom: "none",
-	center: true,
-	...props,
-	children: [/* @__PURE__ */ jsx(MiniStarIcon, {
-		mr: 8,
-		size: 12
-	}), /* @__PURE__ */ jsx(Text, {
-		fontFamily: "accent",
-		lineHeight: 0,
-		fontSize: 14,
-		children: "Recommended"
-	})]
-});
-
-//#endregion
-export { RecommendedBadge };
+import { FlexBox, Text } from '@codecademy/gamut';
+import { MiniStarIcon } from '@codecademy/gamut-icons';
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RecommendedBadge = props => /*#__PURE__*/_jsxs(FlexBox, {
+  position: "absolute",
+  top: -28,
+  bg: "navy",
+  color: "white",
+  p: 8,
+  borderRadiusTop: "sm",
+  borderRadiusBottom: "none",
+  center: true,
+  ...props,
+  children: [/*#__PURE__*/_jsx(MiniStarIcon, {
+    mr: 8,
+    size: 12
+  }), /*#__PURE__*/_jsx(Text, {
+    fontFamily: "accent",
+    lineHeight: 0,
+    fontSize: 14,
+    children: "Recommended"
+  })]
+});