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

package/dist/PlanCard/types.js

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-duplicate-enum-values */
+
+export let CurrencySymbol = /*#__PURE__*/function (CurrencySymbol) {
+  CurrencySymbol["DOLLAR"] = "$";
+  CurrencySymbol["POUND"] = "\xA3";
+  CurrencySymbol["EURO"] = "\u20AC";
+  CurrencySymbol["RUPEE"] = "\u20B9";
+  CurrencySymbol["KRONA"] = "kr";
+  CurrencySymbol["KRONE"] = "kr";
+  CurrencySymbol["ZLOTY"] = "z\u0142";
+  CurrencySymbol["REAL"] = "R$";
+  CurrencySymbol["LEV"] = "\u041B\u0432.";
+  CurrencySymbol["FRANC"] = "Fr.";
+  CurrencySymbol["KORUNA"] = "K\u010D";
+  CurrencySymbol["KUNA"] = "kn";
+  CurrencySymbol["FORINT"] = "Ft";
+  CurrencySymbol["PESO"] = "$";
+  CurrencySymbol["LEU"] = "L";
+  return CurrencySymbol;
+}({});
+export let Currency = /*#__PURE__*/function (Currency) {
+  Currency["USD"] = "USD";
+  Currency["EUR"] = "EUR";
+  Currency["CAD"] = "CAD";
+  Currency["GBP"] = "GBP";
+  Currency["AUD"] = "AUD";
+  Currency["INR"] = "INR";
+  Currency["SEK"] = "SEK";
+  Currency["NOK"] = "NOK";
+  Currency["PLN"] = "PLN";
+  Currency["DKK"] = "DKK";
+  Currency["BRL"] = "BRL";
+  Currency["BGN"] = "BGN";
+  Currency["CHF"] = "CHF";
+  Currency["CZK"] = "CZK";
+  Currency["HRK"] = "HRK";
+  Currency["HUF"] = "HUF";
+  Currency["MXN"] = "MXN";
+  Currency["RON"] = "RON";
+  return Currency;
+}({});
+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
+};
+export const getCurrencySymbol = currency => currencySymbols[currency];
+
+// for currencies that have common symbols eg: Dollar - US=$, AU=AU$, CA=CA$
+export const getCurrencyPrefix = currency => {
+  switch (currency) {
+    case Currency.AUD:
+      return 'AU';
+    case Currency.CAD:
+      return 'CA';
+    default:
+      return '';
+  }
+};

package/dist/PlanCardTeams/consts.d.ts

@@ -0,0 +1,9 @@
+export type PlanDetails = {
+    id: string;
+    title: string;
+    tag: string;
+    tagForScreenReader: string;
+    price: number;
+    features: string[];
+};
+export declare const planDetails: PlanDetails;

package/dist/PlanCardTeams/consts.js

@@ -0,0 +1,8 @@
+export const planDetails = {
+  id: 'teams',
+  title: 'Teams',
+  tag: 'Recommended for 2+',
+  tagForScreenReader: 'Recommended for 2 or more team members',
+  price: 299,
+  features: ['600+ courses', 'Structured learning paths', 'Interactive lessons', 'Real-world projects', 'Unlimited seat transfer', 'Admin dashboard', 'Progress reports', 'Manage multiple training programs']
+};

package/dist/PlanCardTeams/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Currency } from '../PlanCard/types';
+export interface PlanCardTeamsProps {
+    currency: Currency;
+    price: string;
+    isBusinessTrial?: boolean;
+}
+export declare const PlanCardTeams: React.FC<PlanCardTeamsProps>;

package/dist/PlanCardTeams/index.js

@@ -0,0 +1,167 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Badge, Box, Card, Column, FlexBox, LayoutGrid, Text } from '@codecademy/gamut';
+import { CheckerDense } from '@codecademy/gamut-patterns';
+import { Background } from '@codecademy/gamut-styles';
+import React from 'react';
+import { PlanFeature } from '../PlanCard/PlanFeature';
+import { Currency, getCurrencySymbol } from '../PlanCard/types';
+import { planDetails } from './consts';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledList = /*#__PURE__*/_styled(FlexBox, {
+  target: "epabg7p0",
+  label: "StyledList"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1daaxp5",
+  styles: "padding-left:0;margin-bottom:0;gap:20"
+} : {
+  name: "1daaxp5",
+  styles: "padding-left:0;margin-bottom:0;gap:20/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QbGFuQ2FyZFRlYW1zL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQmtDIiwiZmlsZSI6Ii4uLy4uL3NyYy9QbGFuQ2FyZFRlYW1zL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJhZGdlLFxuICBCb3gsXG4gIENhcmQsXG4gIENvbHVtbixcbiAgRmxleEJveCxcbiAgTGF5b3V0R3JpZCxcbiAgVGV4dCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgQmFja2dyb3VuZCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBQbGFuRmVhdHVyZSB9IGZyb20gJy4uL1BsYW5DYXJkL1BsYW5GZWF0dXJlJztcbmltcG9ydCB7IEN1cnJlbmN5LCBnZXRDdXJyZW5jeVN5bWJvbCB9IGZyb20gJy4uL1BsYW5DYXJkL3R5cGVzJztcbmltcG9ydCB7IFBsYW5EZXRhaWxzLCBwbGFuRGV0YWlscyB9IGZyb20gJy4vY29uc3RzJztcblxuY29uc3QgU3R5bGVkTGlzdCA9IHN0eWxlZChGbGV4Qm94KWBcbiAgcGFkZGluZy1sZWZ0OiAwO1xuICBtYXJnaW4tYm90dG9tOiAwO1xuICBnYXA6IDIwO1xuYC53aXRoQ29tcG9uZW50KCd1bCcpO1xuXG5pbnRlcmZhY2UgUHJpY2VEaXNwbGF5UHJvcHMge1xuICBjdXJyZW5jeTogQ3VycmVuY3k7XG4gIHByaWNlOiBzdHJpbmc7XG4gIGlzQnVzaW5lc3NUcmlhbD86IGJvb2xlYW47XG59XG5jb25zdCBQcmljZURpc3BsYXk6IFJlYWN0LkZDPFByaWNlRGlzcGxheVByb3BzPiA9ICh7XG4gIGN1cnJlbmN5ID0gQ3VycmVuY3kuVVNELFxuICBwcmljZSxcbiAgaXNCdXNpbmVzc1RyaWFsID0gZmFsc2UsXG59KSA9PiB7XG4gIGNvbnN0IGN1cnJlbmN5U3ltYm9sID0gZ2V0Q3VycmVuY3lTeW1ib2woY3VycmVuY3kpO1xuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8RmxleEJveFxuICAgICAgICBtcj17MzJ9XG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICAgIGFyaWEtYXRvbWljPVwidHJ1ZVwiXG4gICAgICA+XG4gICAgICAgIHtpc0J1c2luZXNzVHJpYWwgPyAoXG4gICAgICAgICAgPFRleHQgdmFyaWFudD1cInRpdGxlLW1kXCIgbWw9ezh9IG10PXsxNn0+XG4gICAgICAgICAgICBUcnkgVGVhbXMgZnJlZSBmb3IgMTQgZGF5c1xuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFRleHQgdmFyaWFudD1cInRpdGxlLXNtXCI+e2N1cnJlbmN5U3ltYm9sfTwvVGV4dD5cbiAgICAgICAgICAgIDxUZXh0IHZhcmlhbnQ9XCJ0aXRsZS1sZ1wiIG1sPXs4fT5cbiAgICAgICAgICAgICAge3ByaWNlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9GbGV4Qm94PlxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgbXI9ezMyfVxuICAgICAgICBhbGlnbkl0ZW1zPVwiZmxleFN0YXJ0XCJcbiAgICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgICBhcmlhLWF0b21pYz1cInRydWVcIlxuICAgICAgPlxuICAgICAgICB7aXNCdXNpbmVzc1RyaWFsID8gKFxuICAgICAgICAgICcnXG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPFRleHQgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiPmFubnVhbGx5LCBwZXIgdXNlcjwvVGV4dD5cbiAgICAgICAgKX1cbiAgICAgIDwvRmxleEJveD5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbmNvbnN0IEZlYXR1cmVMaXN0OiBSZWFjdC5GQzx7IGZlYXR1cmVzOiBQbGFuRGV0YWlsc1snZmVhdHVyZXMnXSB9PiA9ICh7XG4gIGZlYXR1cmVzLFxufSkgPT4gKFxuICA8U3R5bGVkTGlzdFxuICAgIGZsZXhEaXJlY3Rpb249e3sgXzogJ2NvbHVtbicgfX1cbiAgICBmbGV4V3JhcD17eyBfOiAnbm93cmFwJywgeHM6ICd3cmFwJyB9fVxuICAgIG1heEhlaWdodD17e1xuICAgICAgXzogJ3Vuc2V0JyxcbiAgICAgIG1kOiAxMjAsXG4gICAgICBzbTogMTI4LFxuICAgICAgeHM6IDE3NixcbiAgICB9fVxuICAgIHdpZHRoPXt7XG4gICAgICBfOiAndW5zZXQnLFxuICAgICAgeHM6ICcxMDAlJyxcbiAgICB9fVxuICA+XG4gICAge2ZlYXR1cmVzLm1hcCgoZmVhdHVyZSkgPT4gKFxuICAgICAgPFBsYW5GZWF0dXJlXG4gICAgICAgIGtleT17ZmVhdHVyZX1cbiAgICAgICAgZmVhdHVyZT17ZmVhdHVyZX1cbiAgICAgICAgYXZhaWxhYmxlXG4gICAgICAgIGlzTXVsdGlwbGU9e2ZhbHNlfVxuICAgICAgLz5cbiAgICApKX1cbiAgPC9TdHlsZWRMaXN0PlxuKTtcblxuZXhwb3J0IGludGVyZmFjZSBQbGFuQ2FyZFRlYW1zUHJvcHMge1xuICBjdXJyZW5jeTogQ3VycmVuY3k7XG4gIHByaWNlOiBzdHJpbmc7XG4gIGlzQnVzaW5lc3NUcmlhbD86IGJvb2xlYW47XG59XG5leHBvcnQgY29uc3QgUGxhbkNhcmRUZWFtczogUmVhY3QuRkM8UGxhbkNhcmRUZWFtc1Byb3BzPiA9ICh7XG4gIGN1cnJlbmN5LFxuICBwcmljZSxcbiAgaXNCdXNpbmVzc1RyaWFsID0gZmFsc2UsXG59KSA9PiB7XG4gIGNvbnN0IHsgdGl0bGUsIHRhZywgdGFnRm9yU2NyZWVuUmVhZGVyLCBmZWF0dXJlcyB9ID0gcGxhbkRldGFpbHM7XG5cbiAgcmV0dXJuIChcbiAgICA8Q2FyZCBkaXNwbGF5PVwiZmxleFwiIGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIiBwPXswfSBkYXRhLXRlc3RpZD1cImNhcmRcIj5cbiAgICAgIDxCYWNrZ3JvdW5kXG4gICAgICAgIGJnPVwibmF2eVwiXG4gICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCJcbiAgICAgICAgcHg9ezE2fVxuICAgICAgICBweT17MTJ9XG4gICAgICA+XG4gICAgICAgIDxUZXh0IHZhcmlhbnQ9XCJ0aXRsZS14c1wiIGFzPVwicFwiPlxuICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgICA8QmFkZ2UgdmFyaWFudD1cInRlcnRpYXJ5XCIgbWw9e3sgXzogMzIsIHhzOiAwLCBtZDogMzIgfX0+XG4gICAgICAgICAgPFRleHQgYXJpYS1oaWRkZW4+e3RhZ308L1RleHQ+XG4gICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPnt0YWdGb3JTY3JlZW5SZWFkZXJ9PC9UZXh0PlxuICAgICAgICA8L0JhZGdlPlxuICAgICAgPC9CYWNrZ3JvdW5kPlxuICAgICAgPExheW91dEdyaWQgcHg9ezQwfSBweT17MjR9PlxuICAgICAgICA8Q29sdW1uIHNpemU9e3sgXzogMTIsIGxnOiA0IH19PlxuICAgICAgICAgIDxQcmljZURpc3BsYXlcbiAgICAgICAgICAgIHByaWNlPXtwcmljZX1cbiAgICAgICAgICAgIGN1cnJlbmN5PXtjdXJyZW5jeX1cbiAgICAgICAgICAgIGlzQnVzaW5lc3NUcmlhbD17aXNCdXNpbmVzc1RyaWFsfVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPEJveFxuICAgICAgICAgICAgaGVpZ2h0PVwiMXB4XCJcbiAgICAgICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgICAgICAgIGRpc3BsYXk9e3sgXzogJ2Jsb2NrJywgbGc6ICdub25lJyB9fVxuICAgICAgICAgICAgbWI9ezI0fVxuICAgICAgICAgICAgbXQ9ezE2fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxDaGVja2VyRGVuc2UgaGVpZ2h0PVwiYXV0b1wiIC8+XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgIDwvQ29sdW1uPlxuICAgICAgICA8Q29sdW1uIHNpemU9e3sgXzogMTIsIGxnOiA4IH19PlxuICAgICAgICAgIDxGZWF0dXJlTGlzdCBmZWF0dXJlcz17ZmVhdHVyZXN9IC8+XG4gICAgICAgIDwvQ29sdW1uPlxuICAgICAgPC9MYXlvdXRHcmlkPlxuICAgIDwvQ2FyZD5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+}).withComponent('ul', {
+  target: "epabg7p1",
+  label: "StyledList"
+});
+const PriceDisplay = ({
+  currency = Currency.USD,
+  price,
+  isBusinessTrial = false
+}) => {
+  const currencySymbol = getCurrencySymbol(currency);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(FlexBox, {
+      mr: 32,
+      alignItems: "center",
+      justifyContent: "center",
+      "aria-atomic": "true",
+      children: isBusinessTrial ? /*#__PURE__*/_jsx(Text, {
+        variant: "title-md",
+        ml: 8,
+        mt: 16,
+        children: "Try Teams free for 14 days"
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "title-sm",
+          children: currencySymbol
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "title-lg",
+          ml: 8,
+          children: price
+        })]
+      })
+    }), /*#__PURE__*/_jsx(FlexBox, {
+      mr: 32,
+      alignItems: "flexStart",
+      justifyContent: "center",
+      "aria-atomic": "true",
+      children: isBusinessTrial ? '' : /*#__PURE__*/_jsx(Text, {
+        color: "text-secondary",
+        children: "annually, per user"
+      })
+    })]
+  });
+};
+const FeatureList = ({
+  features
+}) => /*#__PURE__*/_jsx(StyledList, {
+  flexDirection: {
+    _: 'column'
+  },
+  flexWrap: {
+    _: 'nowrap',
+    xs: 'wrap'
+  },
+  maxHeight: {
+    _: 'unset',
+    md: 120,
+    sm: 128,
+    xs: 176
+  },
+  width: {
+    _: 'unset',
+    xs: '100%'
+  },
+  children: features.map(feature => /*#__PURE__*/_jsx(PlanFeature, {
+    feature: feature,
+    available: true,
+    isMultiple: false
+  }, feature))
+});
+export const PlanCardTeams = ({
+  currency,
+  price,
+  isBusinessTrial = false
+}) => {
+  const {
+    title,
+    tag,
+    tagForScreenReader,
+    features
+  } = planDetails;
+  return /*#__PURE__*/_jsxs(Card, {
+    display: "flex",
+    flexDirection: "column",
+    p: 0,
+    "data-testid": "card",
+    children: [/*#__PURE__*/_jsxs(Background, {
+      bg: "navy",
+      display: "flex",
+      justifyContent: "space-between",
+      px: 16,
+      py: 12,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "title-xs",
+        as: "p",
+        children: title
+      }), /*#__PURE__*/_jsxs(Badge, {
+        variant: "tertiary",
+        ml: {
+          _: 32,
+          xs: 0,
+          md: 32
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          "aria-hidden": true,
+          children: tag
+        }), /*#__PURE__*/_jsx(Text, {
+          screenreader: true,
+          children: tagForScreenReader
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(LayoutGrid, {
+      px: 40,
+      py: 24,
+      children: [/*#__PURE__*/_jsxs(Column, {
+        size: {
+          _: 12,
+          lg: 4
+        },
+        children: [/*#__PURE__*/_jsx(PriceDisplay, {
+          price: price,
+          currency: currency,
+          isBusinessTrial: isBusinessTrial
+        }), /*#__PURE__*/_jsx(Box, {
+          height: "1px",
+          overflow: "hidden",
+          display: {
+            _: 'block',
+            lg: 'none'
+          },
+          mb: 24,
+          mt: 16,
+          children: /*#__PURE__*/_jsx(CheckerDense, {
+            height: "auto"
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Column, {
+        size: {
+          _: 12,
+          lg: 8
+        },
+        children: /*#__PURE__*/_jsx(FeatureList, {
+          features: features
+        })
+      })]
+    })]
+  });
+};

package/dist/PricingSection/ConditionalColorMode.d.ts

@@ -0,0 +1,4 @@
+export declare const ConditionalColorMode: React.FC<{
+    condition: boolean;
+    children: React.ReactNode;
+}>;

package/dist/PricingSection/ConditionalColorMode.js

@@ -0,0 +1,13 @@
+import { ColorMode } from '@codecademy/gamut-styles';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const ConditionalColorMode = ({
+  condition,
+  children
+}) => {
+  return condition ? /*#__PURE__*/_jsx(ColorMode, {
+    mode: "dark",
+    children: children
+  }) : /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};

package/dist/PricingSection/PricingCard/PricingAmount.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Product } from '../types';
+import { AllCurrency } from './types';
+type PricingAmountProps = {
+    product: Product;
+    price: string;
+    monthlyPrice?: string;
+    currency: AllCurrency;
+    termMonths?: number;
+    compact?: boolean;
+    isUserInIndia: boolean;
+};
+export declare const PricingAmount: React.FC<PricingAmountProps>;
+export {};

package/dist/PricingSection/PricingCard/PricingAmount.js

@@ -0,0 +1,115 @@
+import _styled from "@emotion/styled/base";
+import { FlexBox, HiddenText, Text } from '@codecademy/gamut';
+import { theme } from '@codecademy/gamut-styles';
+import React from 'react';
+import { Product } from '../types';
+import { getCurrencySymbol } from './types';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Amount = /*#__PURE__*/_styled(Text, {
+  target: "e19mon8j0",
+  label: "Amount"
+})("font-weight:bold;color:black;font-size:44px;line-height:64px;", theme.breakpoints.xl, "{font-size:64px;line-height:80px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9QcmljaW5nU2VjdGlvbi9QcmljaW5nQ2FyZC9QcmljaW5nQW1vdW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRMkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1ByaWNpbmdTZWN0aW9uL1ByaWNpbmdDYXJkL1ByaWNpbmdBbW91bnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmxleEJveCwgSGlkZGVuVGV4dCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFByb2R1Y3QgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBBbGxDdXJyZW5jeSwgZ2V0Q3VycmVuY3lTeW1ib2wgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgQW1vdW50ID0gc3R5bGVkKFRleHQpYFxuICBmb250LXdlaWdodDogYm9sZDtcbiAgY29sb3I6IGJsYWNrO1xuICBmb250LXNpemU6IDQ0cHg7XG4gIGxpbmUtaGVpZ2h0OiA2NHB4O1xuICAke3RoZW1lLmJyZWFrcG9pbnRzLnhsfSB7XG4gICAgZm9udC1zaXplOiA2NHB4O1xuICAgIGxpbmUtaGVpZ2h0OiA4MHB4O1xuICB9XG5gO1xuXG50eXBlIFByaWNpbmdBbW91bnRQcm9wcyA9IHtcbiAgcHJvZHVjdDogUHJvZHVjdDtcbiAgcHJpY2U6IHN0cmluZztcbiAgbW9udGhseVByaWNlPzogc3RyaW5nO1xuICBjdXJyZW5jeTogQWxsQ3VycmVuY3k7XG4gIHRlcm1Nb250aHM/OiBudW1iZXI7XG4gIGNvbXBhY3Q/OiBib29sZWFuO1xuICBpc1VzZXJJbkluZGlhOiBib29sZWFuO1xufTtcblxuZXhwb3J0IGNvbnN0IFByaWNpbmdBbW91bnQ6IFJlYWN0LkZDPFByaWNpbmdBbW91bnRQcm9wcz4gPSAoe1xuICBjdXJyZW5jeSxcbiAgbW9udGhseVByaWNlLFxuICBwcm9kdWN0LFxuICBwcmljZSxcbiAgdGVybU1vbnRocyxcbiAgY29tcGFjdCA9IGZhbHNlLFxuICBpc1VzZXJJbkluZGlhLFxufSkgPT4ge1xuICBjb25zdCBpc1RlYW1zID0gcHJvZHVjdCA9PT0gUHJvZHVjdC5UZWFtcztcblxuICBjb25zdCBjeWNsZSA9IHRlcm1Nb250aHMgPT09IDEgPyAnbW9udGhseScgOiAnYW5udWFsbHknO1xuICBjb25zdCBbZG9sbGFycywgY2VudHNdID0gcHJpY2Uuc3BsaXQoJy4nKTtcbiAgbGV0IGFyaWFMYWJlbCA9IGAke2dldEN1cnJlbmN5U3ltYm9sKGN1cnJlbmN5KX0ke2RvbGxhcnN9JHtcbiAgICBjZW50cyA/IGAuJHtjZW50c31gIDogJydcbiAgfWA7XG4gIGlmIChwcm9kdWN0ICE9PSBQcm9kdWN0LkJhc2ljKSB7XG4gICAgYXJpYUxhYmVsICs9IGAgYSBtb250aCwgYmlsbGVkICR7Y3ljbGV9YDtcbiAgICBpZiAobW9udGhseVByaWNlKSB7XG4gICAgICBhcmlhTGFiZWwgKz0gYCBvciAke2dldEN1cnJlbmN5U3ltYm9sKFxuICAgICAgICBjdXJyZW5jeVxuICAgICAgKX0ke21vbnRobHlQcmljZX0gYmlsbGVkIG1vbnRobHlgO1xuICAgIH1cbiAgfVxuICBpZiAoaXNUZWFtcykge1xuICAgIGFyaWFMYWJlbCArPSAnLCBwZXIgdXNlci4gRGlzY291bnRzIGF2YWlsYWJsZSBmb3IgZWxpZ2libGUgdGVhbXMnO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJwcmljaW5nLWFtb3VudFwiXG4gICAgICAgIGxpbmVIZWlnaHQ9XCJ0aXRsZVwiXG4gICAgICAgIG1iPXtjb21wYWN0ID8gMCA6IDh9XG4gICAgICAgIGNvbHVtblxuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgID5cbiAgICAgICAgPEhpZGRlblRleHQgZGF0YS10ZXN0aWQ9XCJwcmljaW5nLWFtb3VudC1sYWJlbFwiPnthcmlhTGFiZWx9PC9IaWRkZW5UZXh0PlxuICAgICAgICB7LyogZm9yIHNjcmVlbiByZWFkZXIgb3B0aW1pemF0aW9uICovfVxuICAgICAgICA8RmxleEJveFxuICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgcm93XG4gICAgICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICAgICAgaGVpZ2h0PXt7IF86IDUwLCB4bDogJ3Vuc2V0JyB9fVxuICAgICAgICA+XG4gICAgICAgICAgPEZsZXhCb3ggbXI9ezR9IGFsaWduSXRlbXM9XCJzdGFydFwiPlxuICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgbXQ9e3sgXzogMTIsIHhsOiAxNiB9fVxuICAgICAgICAgICAgICBmb250V2VpZ2h0PVwiYm9sZFwiXG4gICAgICAgICAgICAgIGZvbnRTaXplPXszNH1cbiAgICAgICAgICAgID57YCR7Z2V0Q3VycmVuY3lTeW1ib2woY3VycmVuY3kpfWB9PC9UZXh0PlxuICAgICAgICAgICAgPEFtb3VudD57YCR7ZG9sbGFyc31gfTwvQW1vdW50PlxuICAgICAgICAgICAge3Byb2R1Y3QgPT09IFByb2R1Y3QuQmFzaWMgPyBudWxsIDogKFxuICAgICAgICAgICAgICA8RmxleEJveCBjb2x1bW4gYWxpZ25JdGVtcz1cImZsZXgtZW5kXCIgbWw9ezR9PlxuICAgICAgICAgICAgICAgIDxUZXh0IGZvbnRXZWlnaHQ9XCJib2xkXCIgZm9udFNpemU9ezIyfSBtdD17eyBfOiAxMiwgeGw6IDE2IH19PlxuICAgICAgICAgICAgICAgICAge2NlbnRzID8gYC4ke2NlbnRzfWAgOiA8c3Bhbj4mbmJzcDs8L3NwYW4+fVxuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICA8VGV4dCBtdD17eyBfOiAwLCB4bDogNCB9fSBjb2xvcj1cIm5hdnktNTAwXCI+XG4gICAgICAgICAgICAgICAgICAvbW9cbiAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDxUZXh0IGNvbG9yPVwibmF2eS01MDBcIiBjZW50ZXIgbXQ9e2NvbXBhY3QgPyAwIDogeyBfOiA4LCB4bDogMCB9fT5cbiAgICAgICAgICB7cHJvZHVjdCA9PT0gUHJvZHVjdC5CYXNpYyA/IChcbiAgICAgICAgICAgIDxUZXh0IG1iPXsyNH0+QWx3YXlzIGZyZWU8L1RleHQ+XG4gICAgICAgICAgKSA6IChcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIDxUZXh0IG1iPXtjb21wYWN0ID8gMCA6IDh9IGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICAgIHtpc1RlYW1zXG4gICAgICAgICAgICAgICAgICA/ICdQZXIgdXNlciwgYmlsbGVkIGFubnVhbGx5J1xuICAgICAgICAgICAgICAgICAgOiBpc1VzZXJJbkluZGlhXG4gICAgICAgICAgICAgICAgICA/IGBQZXIgbW9udGgsIHBhaWQgJHtjeWNsZX1gXG4gICAgICAgICAgICAgICAgICA6IGBCaWxsZWQgJHtjeWNsZX1gfVxuICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgIDxiciAvPlxuICAgICAgICAgICAgICB7bW9udGhseVByaWNlICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dCBhcmlhLWhpZGRlbj5cbiAgICAgICAgICAgICAgICAgIHtgb3IgJHtnZXRDdXJyZW5jeVN5bWJvbChjdXJyZW5jeSl9JHttb250aGx5UHJpY2V9ICR7XG4gICAgICAgICAgICAgICAgICAgIGlzVXNlckluSW5kaWEgPyAncGFpZCcgOiAnYmlsbGVkJ1xuICAgICAgICAgICAgICAgICAgfSBtb250aGx5YH1cbiAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIHtpc1RlYW1zICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dCBhcmlhLWhpZGRlbj5EaXNjb3VudHMgYXZhaWxhYmxlIGZvciBlbGlnaWJsZSB0ZWFtczwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvRmxleEJveD5cbiAgICA8Lz5cbiAgKTtcbn07XG4iXX0= */"));
+export const PricingAmount = ({
+  currency,
+  monthlyPrice,
+  product,
+  price,
+  termMonths,
+  compact = false,
+  isUserInIndia
+}) => {
+  const isTeams = product === Product.Teams;
+  const cycle = termMonths === 1 ? 'monthly' : 'annually';
+  const [dollars, cents] = price.split('.');
+  let ariaLabel = `${getCurrencySymbol(currency)}${dollars}${cents ? `.${cents}` : ''}`;
+  if (product !== Product.Basic) {
+    ariaLabel += ` a month, billed ${cycle}`;
+    if (monthlyPrice) {
+      ariaLabel += ` or ${getCurrencySymbol(currency)}${monthlyPrice} billed monthly`;
+    }
+  }
+  if (isTeams) {
+    ariaLabel += ', per user. Discounts available for eligible teams';
+  }
+  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(HiddenText, {
+        "data-testid": "pricing-amount-label",
+        children: ariaLabel
+      }), /*#__PURE__*/_jsx(FlexBox, {
+        "aria-hidden": true,
+        row: true,
+        alignItems: "center",
+        height: {
+          _: 50,
+          xl: 'unset'
+        },
+        children: /*#__PURE__*/_jsxs(FlexBox, {
+          mr: 4,
+          alignItems: "start",
+          children: [/*#__PURE__*/_jsx(Text, {
+            mt: {
+              _: 12,
+              xl: 16
+            },
+            fontWeight: "bold",
+            fontSize: 34,
+            children: `${getCurrencySymbol(currency)}`
+          }), /*#__PURE__*/_jsx(Amount, {
+            children: `${dollars}`
+          }), product === Product.Basic ? null : /*#__PURE__*/_jsxs(FlexBox, {
+            column: true,
+            alignItems: "flex-end",
+            ml: 4,
+            children: [/*#__PURE__*/_jsx(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: "navy-500",
+              children: "/mo"
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        color: "navy-500",
+        center: true,
+        mt: compact ? 0 : {
+          _: 8,
+          xl: 0
+        },
+        children: product === 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: isTeams ? 'Per user, billed annually' : isUserInIndia ? `Per month, paid ${cycle}` : `Billed ${cycle}`
+          }), /*#__PURE__*/_jsx("br", {}), monthlyPrice && /*#__PURE__*/_jsx(Text, {
+            "aria-hidden": true,
+            children: `or ${getCurrencySymbol(currency)}${monthlyPrice} ${isUserInIndia ? 'paid' : 'billed'} monthly`
+          }), isTeams && /*#__PURE__*/_jsx(Text, {
+            "aria-hidden": true,
+            children: "Discounts available for eligible teams"
+          })]
+        })
+      })]
+    })
+  });
+};

package/dist/PricingSection/PricingCard/RecommendedBadge.d.ts

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

package/dist/PricingSection/PricingCard/RecommendedBadge.js

@@ -0,0 +1,24 @@
+import { FlexBox, Text } from '@codecademy/gamut';
+import { MiniStarIcon } from '@codecademy/gamut-icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RecommendedBadge = props => /*#__PURE__*/_jsxs(FlexBox, {
+  position: "absolute",
+  top: -28,
+  left: -2,
+  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"
+  })]
+});

package/dist/PricingSection/PricingCard/consts.d.ts

@@ -0,0 +1,14 @@
+interface Detail {
+    id: string;
+    title: string;
+    tag: string;
+    variant: 'paleYellow' | 'yellow' | 'black';
+    features: {
+        label: string;
+        isEnabled: boolean;
+        description?: string;
+    }[];
+}
+type PlanDetails = Record<string, Detail>;
+export declare const planDetails: PlanDetails;
+export {};

package/dist/PricingSection/PricingCard/consts.js

@@ -0,0 +1,96 @@
+const features = [{
+  label: 'Basic access to free courses',
+  description: 'Access basic material for courses in top subjects like HTML and JavaScript. Quizzes and projects not included with Basic.'
+}, {
+  label: 'Community support',
+  description: 'Connect with other learners, get answers to your questions, and attend fun events.'
+}, {
+  label: 'Learning resources',
+  description: 'Cheatsheets, docs, videos, and more to support your learning journey.'
+}, {
+  label: 'Real-world projects',
+  description: 'Access our full library of practice and portfolio projects. Apply your skills and build your portfolio.'
+}, {
+  label: 'All courses',
+  description: 'Unlimited access to 300+ stand-alone courses, including everything in Basic plus popular Pro courses like Learn Python 3.'
+}, {
+  label: 'Skill paths',
+  description: 'Curated learning paths teach you everything you need to gain a specific skill, like building a website or visualizing data.'
+}, {
+  label: 'Certificates of completion',
+  description: 'Earn a certificate for courses or paths you finish to share with your network as proof of completion.'
+}, {
+  label: 'Career paths',
+  description: 'Curated learning paths give you the knowledge and experience to land a job in tech like Data Scientist or Engineer.'
+}, {
+  label: 'Technical interview prep',
+  description: 'Technical interview prep courses, practice questions, code challenges, and more.'
+}, {
+  label: 'Code challenges',
+  description: 'Test your knowledge with coding problems based on real-world technical interviews.'
+}, {
+  label: 'Professional certifications',
+  description: "Prove you're job-ready. Earn a professional certification when you pass all the exams in select career paths."
+}, {
+  label: 'Assessments',
+  description: 'Test your skills as you build toward job-readiness. Certification exams are available in select career paths.'
+}];
+const getFeatures = enabledFeatures => {
+  return features.map(feature => ({
+    ...feature,
+    isEnabled: !enabledFeatures || enabledFeatures.includes(feature.label)
+  }));
+};
+export const planDetails = {
+  pro: {
+    id: 'pro',
+    title: 'Pro',
+    tag: 'Learn a skill',
+    variant: 'yellow',
+    features: [{
+      label: 'Real-world projects',
+      isEnabled: true
+    }, {
+      label: 'All courses',
+      isEnabled: true
+    }, {
+      label: 'Skill paths',
+      isEnabled: true
+    }]
+  },
+  'pro-gold': {
+    id: 'pro-gold',
+    title: 'Pro',
+    tag: 'Build a career',
+    variant: 'yellow',
+    features: getFeatures()
+  },
+  'pro-silver': {
+    id: 'pro-silver',
+    title: 'Plus',
+    tag: 'Learn a skill',
+    variant: 'paleYellow',
+    features: getFeatures(['Basic access to free courses', 'Community support', 'Learning resources', 'Real-world projects', 'All courses', 'Skill paths', 'Certificates of completion'])
+  },
+  teams: {
+    id: 'teams',
+    title: 'Teams',
+    tag: 'Recommended for 2+',
+    variant: 'yellow',
+    features: getFeatures()
+  },
+  enterprise: {
+    id: 'enterprise',
+    title: 'Enterprise',
+    tag: 'Recommended for 25+',
+    variant: 'yellow',
+    features: getFeatures()
+  },
+  free: {
+    id: 'free',
+    title: 'Pro',
+    tag: 'Build a career',
+    variant: 'yellow',
+    features: getFeatures(['Basic access to free courses', 'Community support', 'Learning resources'])
+  }
+};

package/dist/PricingSection/PricingCard/index.d.ts

@@ -0,0 +1,16 @@
+import { PlansByType } from '../config';
+import { Product, ProductDetails, User } from '../types';
+import { AllCurrency } from './types';
+export declare const smSize = 728;
+export declare const PricingCard: ({ product, productDetails, currency, plansByType, isUserInIndia, user, trackBusinessClick, }: {
+    product: Product;
+    productDetails: ProductDetails;
+    currency: AllCurrency;
+    plansByType: PlansByType;
+    isUserInIndia: boolean;
+    user: User;
+    trackBusinessClick?: ({ target, context, }: {
+        target: string;
+        context: string;
+    }) => void;
+}) => import("react/jsx-runtime").JSX.Element;