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

package/dist/PageSection/index.d.ts

@@ -0,0 +1,17 @@
+import { WithChildrenProp } from '@codecademy/gamut';
+import { AriaAttributes, ReactNode } from 'react';
+import * as React from 'react';
+type TextButtonMinimumProps = AriaAttributes & {
+    text: string;
+    href?: string;
+    onClick?: () => void;
+};
+export type SectionButton = TextButtonMinimumProps | ReactNode;
+export interface PageSectionProps extends WithChildrenProp {
+    title: string;
+    headerButton?: SectionButton;
+    headerSecondaryButton?: SectionButton;
+    footerButton?: SectionButton;
+}
+export declare const PageSection: React.FC<PageSectionProps>;
+export {};

package/dist/PageSection/index.js

@@ -0,0 +1,67 @@
+import { Box, FlexBox, Text, TextButton } from '@codecademy/gamut';
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function isSectionButtonATextButton(button) {
+  return button.text !== undefined;
+}
+export const PageSection = ({
+  title,
+  headerButton,
+  headerSecondaryButton,
+  footerButton,
+  children
+}) => {
+  const renderSectionButton = sectionButton => {
+    if (!isSectionButtonATextButton(sectionButton)) return sectionButton;
+    const {
+      text,
+      ...buttonProps
+    } = sectionButton;
+    return /*#__PURE__*/_jsx(TextButton, {
+      ...buttonProps,
+      children: text
+    });
+  };
+  const maybeRenderHeaderButton = () => {
+    if (!headerButton) return null;
+    return /*#__PURE__*/_jsx(Box, {
+      ml: 4,
+      display: "inline",
+      children: renderSectionButton(headerButton)
+    });
+  };
+  const maybeRenderHeaderSecondaryButton = () => {
+    if (!headerSecondaryButton) return null;
+    return renderSectionButton(headerSecondaryButton);
+  };
+  const renderSectionHeader = () =>
+  /*#__PURE__*/
+  // Setting height directly to height of the buttons so if they are omitted
+  // the header remains the same height.
+  _jsxs(FlexBox, {
+    height: "2.5rem",
+    mb: 8,
+    justifyContent: "space-between",
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: "h2",
+        fontSize: 22,
+        children: title
+      }), maybeRenderHeaderButton()]
+    }), maybeRenderHeaderSecondaryButton()]
+  });
+  const maybeRenderSectionFooter = () => {
+    if (!footerButton) return null;
+    return /*#__PURE__*/_jsx(FlexBox, {
+      justifyContent: "flex-end",
+      mt: 16,
+      children: renderSectionButton(footerButton)
+    });
+  };
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    flexDirection: "column",
+    mb: 48,
+    children: [renderSectionHeader(), children, maybeRenderSectionFooter()]
+  });
+};

package/dist/PastDue/PastDueModalContents/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface PastDueModalProps {
+    pastDueErrorCode: string;
+    isSilverPlan: boolean;
+    closeButton: React.ReactNode;
+    updatePaymentButton: React.ReactNode;
+}
+export declare const PastDueModalContents: React.FC<React.PropsWithChildren<PastDueModalProps>>;

package/dist/PastDue/PastDueModalContents/index.js

@@ -0,0 +1,30 @@
+import { Box, FlexBox, Text } from '@codecademy/gamut';
+import React from 'react';
+import { pastDueErrorMessages } from '../pastDueMessages';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const PastDueModalContents = ({
+  pastDueErrorCode,
+  isSilverPlan,
+  closeButton,
+  updatePaymentButton
+}) => {
+  const pastDueErrorMessage = pastDueErrorMessages(isSilverPlan, false)[pastDueErrorCode] || pastDueErrorMessages(isSilverPlan, false).default;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(FlexBox, {
+      column: true,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          mb: 12,
+          children: pastDueErrorMessage.text1
+        }), /*#__PURE__*/_jsx(Text, {
+          mb: 12,
+          children: pastDueErrorMessage.text2
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(FlexBox, {
+      justifyContent: "end",
+      alignItems: "end",
+      children: [closeButton, updatePaymentButton]
+    })]
+  });
+};

package/dist/PastDue/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PastDueModalContents';
+export * from './pastDueMessages';

package/dist/PastDue/index.js

@@ -0,0 +1,2 @@
+export * from './PastDueModalContents';
+export * from './pastDueMessages';

package/dist/PastDue/pastDueMessages.d.ts

@@ -0,0 +1,6 @@
+interface PastDueErrorMessage {
+    text1: string;
+    text2: string | JSX.Element;
+}
+export declare const pastDueErrorMessages: (isSilverPlan: boolean, isAlert: boolean) => Record<string, PastDueErrorMessage>;
+export {};

package/dist/PastDue/pastDueMessages.js

@@ -0,0 +1,48 @@
+import _styled from "@emotion/styled/base";
+import { Anchor } from '@codecademy/gamut';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAnchor = /*#__PURE__*/_styled(Anchor, {
+  target: "ej6f6si0",
+  label: "StyledAnchor"
+})(({
+  theme,
+  isAlert
+}) => isAlert ? `color: ${theme.colors.white}` : '', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QYXN0RHVlL3Bhc3REdWVNZXNzYWdlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXlEIiwiZmlsZSI6Ii4uLy4uL3NyYy9QYXN0RHVlL3Bhc3REdWVNZXNzYWdlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmludGVyZmFjZSBQYXN0RHVlRXJyb3JNZXNzYWdlIHtcbiAgdGV4dDE6IHN0cmluZztcbiAgdGV4dDI6IHN0cmluZyB8IEpTWC5FbGVtZW50O1xufVxuXG5jb25zdCBTdHlsZWRBbmNob3IgPSBzdHlsZWQoQW5jaG9yKTx7IGlzQWxlcnQ6IGJvb2xlYW4gfT5gXG4gICR7KHsgdGhlbWUsIGlzQWxlcnQgfSkgPT4gKGlzQWxlcnQgPyBgY29sb3I6ICR7dGhlbWUuY29sb3JzLndoaXRlfWAgOiAnJyl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IHBhc3REdWVFcnJvck1lc3NhZ2VzID0gKFxuICBpc1NpbHZlclBsYW46IGJvb2xlYW4sXG4gIGlzQWxlcnQ6IGJvb2xlYW5cbik6IFJlY29yZDxzdHJpbmcsIFBhc3REdWVFcnJvck1lc3NhZ2U+ID0+ICh7XG4gIGluc3VmZmljaWVudF9mdW5kczoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaCBkdWUgdG8gaW5zdWZmaWNpZW50IGZ1bmRzLmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgcGF5bWVudCBtZXRob2QuYCxcbiAgfSxcbiAgZGVjbGluZWQ6IHtcbiAgICB0ZXh0MTogYFlvdXIgcGF5bWVudCBkaWQgbm90IGdvIHRocm91Z2guIENvbnRhY3QgeW91ciBiYW5rIG9yIGNhcmQgaXNzdWVyIHRvIGZpbmQgb3V0IG1vcmUuYCxcbiAgICB0ZXh0MjogYFRvIGtlZXAgbGVhcm5pbmcgd2l0aCBDb2RlY2FkZW15ICR7XG4gICAgICBpc1NpbHZlclBsYW4gPyAnUGx1cycgOiAnUHJvJ1xuICAgIH0sIHBsZWFzZSB1cGRhdGUgeW91ciBwYXltZW50IG1ldGhvZC5gLFxuICB9LFxuICB0ZW1wb3JhcnlfaG9sZDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IG1ldGhvZCB3YXMgcGxhY2VkIG9uIGEgdGVtcG9yYXJ5IGhvbGQuIENvbnRhY3QgeW91ciBiYW5rIG9yIGNhcmQgaXNzdWVyIHRvIGZpbmQgb3V0IG1vcmUuYCxcbiAgICB0ZXh0MjogYFRvIGtlZXAgbGVhcm5pbmcgd2l0aCBDb2RlY2FkZW15ICR7XG4gICAgICBpc1NpbHZlclBsYW4gPyAnUGx1cycgOiAnUHJvJ1xuICAgIH0sIHBsZWFzZSB1cGRhdGUgeW91ciBwYXltZW50IG1ldGhvZC5gLFxuICB9LFxuICBpbnZhbGlkX3RyYW5zYWN0aW9uOiB7XG4gICAgdGV4dDE6IGBZb3VyIHBheW1lbnQgZGlkIG5vdCBnbyB0aHJvdWdoLiBDb250YWN0IHlvdXIgYmFuayBvciBjYXJkIGlzc3VlciB0byBmaW5kIG91dCBtb3JlIGFib3V0IHBvc3NpYmxlIHRyYW5zYWN0aW9uIHJlc3RyaWN0aW9ucy5gLFxuICAgIHRleHQyOiBgVG8ga2VlcCBsZWFybmluZyB3aXRoIENvZGVjYWRlbXkgJHtcbiAgICAgIGlzU2lsdmVyUGxhbiA/ICdQbHVzJyA6ICdQcm8nXG4gICAgfSwgcGxlYXNlIHVwZGF0ZSB5b3VyIHBheW1lbnQgbWV0aG9kLmAsXG4gIH0sXG4gIGludmFsaWRfYWNjb3VudF9udW1iZXI6IHtcbiAgICB0ZXh0MTogYFlvdXIgcGF5bWVudCBkaWQgbm90IGdvIHRocm91Z2ggYmVjYXVzZSB5b3VyIGNhcmQgZGV0YWlscyBtYXkgYmUgaW5jb3JyZWN0LmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgY2FyZCBkZXRhaWxzIG9yIHBheW1lbnQgbWV0aG9kLmAsXG4gIH0sXG4gIGV4cGlyZWRfY2FyZDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaCBiZWNhdXNlIHlvdXIgY2FyZCBpcyBleHBpcmVkLmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgcGF5bWVudCBtZXRob2QuYCxcbiAgfSxcbiAgZGVmYXVsdDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaC4gVG8ga2VlcCBsZWFybmluZyB3aXRoIENvZGVjYWRlbXkgJHtcbiAgICAgIGlzU2lsdmVyUGxhbiA/ICdQbHVzJyA6ICdQcm8nXG4gICAgfSwgcGxlYXNlIHVwZGF0ZSB5b3VyIHBheW1lbnQgbWV0aG9kLmAsXG4gICAgdGV4dDI6IChcbiAgICAgIDw+XG4gICAgICAgIExldCBvdXJ7JyAnfVxuICAgICAgICA8U3R5bGVkQW5jaG9yXG4gICAgICAgICAgaHJlZj1cImh0dHBzOi8vaGVscC5jb2RlY2FkZW15LmNvbS9oYy9lbi11c1wiXG4gICAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICByZWw9XCJub3JlZmVycmVyXCJcbiAgICAgICAgICBpc0FsZXJ0PXtpc0FsZXJ0fVxuICAgICAgICA+XG4gICAgICAgICAgY3VzdG9tZXIgc3VwcG9ydFxuICAgICAgICA8L1N0eWxlZEFuY2hvcj57JyAnfVxuICAgICAgICB0ZWFtIGtub3cgaWYgeW91IGhhdmUgZnVydGhlciBxdWVzdGlvbnMuXG4gICAgICA8Lz5cbiAgICApLFxuICB9LFxufSk7XG4iXX0= */"));
+export const pastDueErrorMessages = (isSilverPlan, isAlert) => ({
+  insufficient_funds: {
+    text1: `Your payment did not go through due to insufficient funds.`,
+    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
+  },
+  declined: {
+    text1: `Your payment did not go through. Contact your bank or card issuer to find out more.`,
+    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
+  },
+  temporary_hold: {
+    text1: `Your payment method was placed on a temporary hold. Contact your bank or card issuer to find out more.`,
+    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
+  },
+  invalid_transaction: {
+    text1: `Your payment did not go through. Contact your bank or card issuer to find out more about possible transaction restrictions.`,
+    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
+  },
+  invalid_account_number: {
+    text1: `Your payment did not go through because your card details may be incorrect.`,
+    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your card details or payment method.`
+  },
+  expired_card: {
+    text1: `Your payment did not go through because your card is expired.`,
+    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
+  },
+  default: {
+    text1: `Your payment did not go through. To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`,
+    text2: /*#__PURE__*/_jsxs(_Fragment, {
+      children: ["Let our", ' ', /*#__PURE__*/_jsx(StyledAnchor, {
+        href: "https://help.codecademy.com/hc/en-us",
+        target: "_blank",
+        rel: "noreferrer",
+        isAlert: isAlert,
+        children: "customer support"
+      }), ' ', "team know if you have further questions."]
+    })
+  }
+});

package/dist/PausableImage/BaseImage/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface BaseImageProps {
+    alt: string;
+    src: string;
+}
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PlayingImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const BaseImage: React.FC<BaseImageProps>;
+export default BaseImage;

package/dist/PausableImage/BaseImage/index.js

@@ -0,0 +1,54 @@
+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 { FillButton, HiddenText } from '@codecademy/gamut';
+import { PauseIcon, PlayIcon } from '@codecademy/gamut-icons';
+import { useState } from 'react';
+import * as React from 'react';
+import Freezeframe from 'react-freezeframe';
+import { imageStyles } from '..';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Container = /*#__PURE__*/_styled("div", {
+  target: "e1oynmvg1",
+  label: "Container"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1v365f0",
+  styles: "align-items:center;justify-content:center;height:100%;display:flex;position:relative;width:100%;>img,>.react-freezeframe,>.react-freezeframe img{max-width:100%;}.ff-container .ff-canvas{transition:none;}.ff-loading-icon::before{display:none;}"
+} : {
+  name: "1v365f0",
+  styles: "align-items:center;justify-content:center;height:100%;display:flex;position:relative;width:100%;>img,>.react-freezeframe,>.react-freezeframe img{max-width:100%;}.ff-container .ff-canvas{transition:none;}.ff-loading-icon::before{display:none;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL0Jhc2VJbWFnZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY21DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL0Jhc2VJbWFnZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWxsQnV0dG9uLCBIaWRkZW5UZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgUGF1c2VJY29uLCBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IEZyZWV6ZWZyYW1lIGZyb20gJ3JlYWN0LWZyZWV6ZWZyYW1lJztcblxuaW1wb3J0IHsgaW1hZ2VTdHlsZXMgfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQmFzZUltYWdlUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuXG4gID4gaW1nLFxuICA+IC5yZWFjdC1mcmVlemVmcmFtZSxcbiAgPiAucmVhY3QtZnJlZXplZnJhbWUgaW1nIHtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gIH1cbiAgLmZmLWNvbnRhaW5lciAuZmYtY2FudmFzIHtcbiAgICB0cmFuc2l0aW9uOiBub25lO1xuICB9XG4gIC5mZi1sb2FkaW5nLWljb246OmJlZm9yZSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFBsYXlpbmdJbWFnZSA9IGltYWdlU3R5bGVzO1xuXG5jb25zdCBTdHlsZWRGcmVlemVmcmFtZSA9IHN0eWxlZChGcmVlemVmcmFtZSkoaW1hZ2VTdHlsZXMpO1xuXG5leHBvcnQgY29uc3QgQmFzZUltYWdlOiBSZWFjdC5GQzxCYXNlSW1hZ2VQcm9wcz4gPSAoeyBhbHQsIC4uLnJlc3QgfSkgPT4ge1xuICBjb25zdCBbcGF1c2VkLCBzZXRQYXVzZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IFtsaXZlVGV4dCwgYnV0dG9uTGFiZWwsIEljb24sIEltYWdlXSA9IHBhdXNlZFxuICAgID8gW2Ake2FsdH0sIHBhdXNlZGAsICdQbGF5IGFuaW1hdGVkIGltYWdlJywgUGxheUljb24sIFN0eWxlZEZyZWV6ZWZyYW1lXVxuICAgIDogW2Ake2FsdH0sIHBsYXlpbmdgLCAnUGF1c2UgYW5pbWF0ZWQgaW1hZ2UnLCBQYXVzZUljb24sIFBsYXlpbmdJbWFnZV07XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyPlxuICAgICAgPEltYWdlIGFsdD17YWx0fSB7Li4ucmVzdH0gLz5cbiAgICAgIHsvKiBlbnN1cmUgcHJvcGVyIGZhbGwgYmFjayBsYWJlbCBpZiBhbiBlbXB0eSBzdHJpbmcgaXMgZ2l2ZW4gYXMgYWx0ICovfVxuICAgICAgPEhpZGRlblRleHQgYXJpYS1saXZlPVwicG9saXRlXCI+e2FsdCA/IGxpdmVUZXh0IDogYnV0dG9uTGFiZWx9PC9IaWRkZW5UZXh0PlxuICAgICAgPEZpbGxCdXR0b25cbiAgICAgICAgYm90dG9tPXswfVxuICAgICAgICBtPXs4fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRQYXVzZWQoIXBhdXNlZCl9XG4gICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICByaWdodD17MH1cbiAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgIHpJbmRleD17MX1cbiAgICAgICAgYXJpYS1sYWJlbD17YnV0dG9uTGFiZWx9XG4gICAgICA+XG4gICAgICAgIDxJY29uIGNvbG9yPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJhc2VJbWFnZTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const PlayingImage = imageStyles;
+const StyledFreezeframe = /*#__PURE__*/_styled(Freezeframe, {
+  target: "e1oynmvg0",
+  label: "StyledFreezeframe"
+})(imageStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL0Jhc2VJbWFnZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUMwQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvUGF1c2FibGVJbWFnZS9CYXNlSW1hZ2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmlsbEJ1dHRvbiwgSGlkZGVuVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IFBhdXNlSWNvbiwgUGxheUljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBGcmVlemVmcmFtZSBmcm9tICdyZWFjdC1mcmVlemVmcmFtZSc7XG5cbmltcG9ydCB7IGltYWdlU3R5bGVzIH0gZnJvbSAnLi4nO1xuXG5leHBvcnQgaW50ZXJmYWNlIEJhc2VJbWFnZVByb3BzIHtcbiAgYWx0OiBzdHJpbmc7XG4gIHNyYzogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTAwJTtcblxuICA+IGltZyxcbiAgPiAucmVhY3QtZnJlZXplZnJhbWUsXG4gID4gLnJlYWN0LWZyZWV6ZWZyYW1lIGltZyB7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG4gIC5mZi1jb250YWluZXIgLmZmLWNhbnZhcyB7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgfVxuICAuZmYtbG9hZGluZy1pY29uOjpiZWZvcmUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQbGF5aW5nSW1hZ2UgPSBpbWFnZVN0eWxlcztcblxuY29uc3QgU3R5bGVkRnJlZXplZnJhbWUgPSBzdHlsZWQoRnJlZXplZnJhbWUpKGltYWdlU3R5bGVzKTtcblxuZXhwb3J0IGNvbnN0IEJhc2VJbWFnZTogUmVhY3QuRkM8QmFzZUltYWdlUHJvcHM+ID0gKHsgYWx0LCAuLi5yZXN0IH0pID0+IHtcbiAgY29uc3QgW3BhdXNlZCwgc2V0UGF1c2VkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBbbGl2ZVRleHQsIGJ1dHRvbkxhYmVsLCBJY29uLCBJbWFnZV0gPSBwYXVzZWRcbiAgICA/IFtgJHthbHR9LCBwYXVzZWRgLCAnUGxheSBhbmltYXRlZCBpbWFnZScsIFBsYXlJY29uLCBTdHlsZWRGcmVlemVmcmFtZV1cbiAgICA6IFtgJHthbHR9LCBwbGF5aW5nYCwgJ1BhdXNlIGFuaW1hdGVkIGltYWdlJywgUGF1c2VJY29uLCBQbGF5aW5nSW1hZ2VdO1xuXG4gIHJldHVybiAoXG4gICAgPENvbnRhaW5lcj5cbiAgICAgIDxJbWFnZSBhbHQ9e2FsdH0gey4uLnJlc3R9IC8+XG4gICAgICB7LyogZW5zdXJlIHByb3BlciBmYWxsIGJhY2sgbGFiZWwgaWYgYW4gZW1wdHkgc3RyaW5nIGlzIGdpdmVuIGFzIGFsdCAqL31cbiAgICAgIDxIaWRkZW5UZXh0IGFyaWEtbGl2ZT1cInBvbGl0ZVwiPnthbHQgPyBsaXZlVGV4dCA6IGJ1dHRvbkxhYmVsfTwvSGlkZGVuVGV4dD5cbiAgICAgIDxGaWxsQnV0dG9uXG4gICAgICAgIGJvdHRvbT17MH1cbiAgICAgICAgbT17OH1cbiAgICAgICAgb25DbGljaz17KCkgPT4gc2V0UGF1c2VkKCFwYXVzZWQpfVxuICAgICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgICAgcmlnaHQ9ezB9XG4gICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICB6SW5kZXg9ezF9XG4gICAgICAgIGFyaWEtbGFiZWw9e2J1dHRvbkxhYmVsfVxuICAgICAgPlxuICAgICAgICA8SWNvbiBjb2xvcj1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8L0ZpbGxCdXR0b24+XG4gICAgPC9Db250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBCYXNlSW1hZ2U7XG4iXX0= */");
+export const BaseImage = ({
+  alt,
+  ...rest
+}) => {
+  const [paused, setPaused] = useState(false);
+  const [liveText, buttonLabel, Icon, Image] = paused ? [`${alt}, paused`, 'Play animated image', PlayIcon, StyledFreezeframe] : [`${alt}, playing`, 'Pause animated image', PauseIcon, PlayingImage];
+  return /*#__PURE__*/_jsxs(Container, {
+    children: [/*#__PURE__*/_jsx(Image, {
+      alt: alt,
+      ...rest
+    }), /*#__PURE__*/_jsx(HiddenText, {
+      "aria-live": "polite",
+      children: alt ? liveText : buttonLabel
+    }), /*#__PURE__*/_jsx(FillButton, {
+      bottom: 0,
+      m: 8,
+      onClick: () => setPaused(!paused),
+      position: "absolute",
+      right: 0,
+      variant: "secondary",
+      zIndex: 1,
+      "aria-label": buttonLabel,
+      children: /*#__PURE__*/_jsx(Icon, {
+        color: "currentColor"
+      })
+    })]
+  });
+};
+export default BaseImage;

package/dist/PausableImage/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface PauseableImageProps {
+    src: string;
+    alt: string;
+}
+export declare const imageStyles: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const PausableImage: React.FC<PauseableImageProps>;
+export {};

package/dist/PausableImage/index.js

@@ -0,0 +1,37 @@
+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 { css } from '@emotion/react';
+import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const BaseImage = /*#__PURE__*/React.lazy(() => import('./BaseImage'));
+export const imageStyles = /*#__PURE__*/_styled("img", {
+  target: "eubpdj90",
+  label: "imageStyles"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1hzevmy-imageStyles",
+  styles: "height:auto;max-height:100%;max-width:100%;&[src$=\".svg\"]{width:100%;};label:imageStyles;"
+} : {
+  name: "1hzevmy-imageStyles",
+  styles: "height:auto;max-height:100%;max-width:100%;&[src$=\".svg\"]{width:100%;};label:imageStyles;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXRSIsImZpbGUiOiIuLi8uLi9zcmMvUGF1c2FibGVJbWFnZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEJhc2VJbWFnZSA9IFJlYWN0LmxhenkoKCkgPT4gaW1wb3J0KCcuL0Jhc2VJbWFnZScpKTtcblxuaW50ZXJmYWNlIFBhdXNlYWJsZUltYWdlUHJvcHMge1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG59XG5leHBvcnQgY29uc3QgaW1hZ2VTdHlsZXMgPSBzdHlsZWQuaW1nKFxuICBjc3Moe1xuICAgIGhlaWdodDogJ2F1dG8nLFxuICAgIG1heEhlaWdodDogJzEwMCUnLFxuICAgIG1heFdpZHRoOiAnMTAwJScsXG4gICAgJyZbc3JjJD1cIi5zdmdcIl0nOiB7XG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5jb25zdCBTdGF0aWNJbWFnZSA9IGltYWdlU3R5bGVzO1xuXG5leHBvcnQgY29uc3QgUGF1c2FibGVJbWFnZTogUmVhY3QuRkM8UGF1c2VhYmxlSW1hZ2VQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3Qgc3RhdGljSW1hZ2UgPSA8U3RhdGljSW1hZ2Ugey4uLnByb3BzfSAvPjtcblxuICAvLyBBdm9pZCByZW5kZXJpbmcgUmVhY3QuU3VzcGVuc2Ugb24gdGhlIHNlcnZlciB1bnRpbCBpdCdzIGZ1bGx5IHN1cHBvcnRlZCBieSBSZWFjdCAmIG91ciBhcHBsaWNhdGlvbnNcbiAgY29uc3QgW2lzTW91bnRlZCwgc2V0SXNNb3VudGVkXSA9IFJlYWN0LnVzZVN0YXRlKGZhbHNlKTtcbiAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICBzZXRJc01vdW50ZWQodHJ1ZSk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7aXNNb3VudGVkICYmIHByb3BzLnNyYz8uZW5kc1dpdGgoJy5naWYnKSA/IChcbiAgICAgICAgPFJlYWN0LlN1c3BlbnNlIGZhbGxiYWNrPXtzdGF0aWNJbWFnZX0+XG4gICAgICAgICAgPEJhc2VJbWFnZSB7Li4ucHJvcHN9IC8+XG4gICAgICAgIDwvUmVhY3QuU3VzcGVuc2U+XG4gICAgICApIDogKFxuICAgICAgICBzdGF0aWNJbWFnZVxuICAgICAgKX1cbiAgICA8Lz5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVMkIiLCJmaWxlIjoiLi4vLi4vc3JjL1BhdXNhYmxlSW1hZ2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBCYXNlSW1hZ2UgPSBSZWFjdC5sYXp5KCgpID0+IGltcG9ydCgnLi9CYXNlSW1hZ2UnKSk7XG5cbmludGVyZmFjZSBQYXVzZWFibGVJbWFnZVByb3BzIHtcbiAgc3JjOiBzdHJpbmc7XG4gIGFsdDogc3RyaW5nO1xufVxuZXhwb3J0IGNvbnN0IGltYWdlU3R5bGVzID0gc3R5bGVkLmltZyhcbiAgY3NzKHtcbiAgICBoZWlnaHQ6ICdhdXRvJyxcbiAgICBtYXhIZWlnaHQ6ICcxMDAlJyxcbiAgICBtYXhXaWR0aDogJzEwMCUnLFxuICAgICcmW3NyYyQ9XCIuc3ZnXCJdJzoge1xuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICB9LFxuICB9KVxuKTtcblxuY29uc3QgU3RhdGljSW1hZ2UgPSBpbWFnZVN0eWxlcztcblxuZXhwb3J0IGNvbnN0IFBhdXNhYmxlSW1hZ2U6IFJlYWN0LkZDPFBhdXNlYWJsZUltYWdlUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHN0YXRpY0ltYWdlID0gPFN0YXRpY0ltYWdlIHsuLi5wcm9wc30gLz47XG5cbiAgLy8gQXZvaWQgcmVuZGVyaW5nIFJlYWN0LlN1c3BlbnNlIG9uIHRoZSBzZXJ2ZXIgdW50aWwgaXQncyBmdWxseSBzdXBwb3J0ZWQgYnkgUmVhY3QgJiBvdXIgYXBwbGljYXRpb25zXG4gIGNvbnN0IFtpc01vdW50ZWQsIHNldElzTW91bnRlZF0gPSBSZWFjdC51c2VTdGF0ZShmYWxzZSk7XG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0SXNNb3VudGVkKHRydWUpO1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge2lzTW91bnRlZCAmJiBwcm9wcy5zcmM/LmVuZHNXaXRoKCcuZ2lmJykgPyAoXG4gICAgICAgIDxSZWFjdC5TdXNwZW5zZSBmYWxsYmFjaz17c3RhdGljSW1hZ2V9PlxuICAgICAgICAgIDxCYXNlSW1hZ2Ugey4uLnByb3BzfSAvPlxuICAgICAgICA8L1JlYWN0LlN1c3BlbnNlPlxuICAgICAgKSA6IChcbiAgICAgICAgc3RhdGljSW1hZ2VcbiAgICAgICl9XG4gICAgPC8+XG4gICk7XG59O1xuIl19 */");
+const StaticImage = imageStyles;
+export const PausableImage = props => {
+  const staticImage = /*#__PURE__*/_jsx(StaticImage, {
+    ...props
+  });
+
+  // Avoid rendering React.Suspense on the server until it's fully supported by React & our applications
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: isMounted && props.src?.endsWith('.gif') ? /*#__PURE__*/_jsx(React.Suspense, {
+      fallback: staticImage,
+      children: /*#__PURE__*/_jsx(BaseImage, {
+        ...props
+      })
+    }) : staticImage
+  });
+};

package/dist/PlanCard/PlanCardBanner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface PlanCardBannerProps {
+    text: string;
+    icon?: React.ReactNode;
+}
+export declare const PlanCardBanner: React.FC<PlanCardBannerProps>;
+export {};

package/dist/PlanCard/PlanCardBanner.js

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,13 @@
+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 {};