@codecademy/brand 4.0.0-alpha.af4a3e14fc.0 → 4.0.0-alpha.bec91dc078.0

package/dist/PageLayoutWithSidebarMenu/PageLayoutWithSidebarMenu.d.ts

@@ -19,4 +19,5 @@ type PageLayoutWithSidebarMenuProps = WithChildrenProp & {
 };
 declare const PageLayoutWithSidebarMenu: React.FC<PageLayoutWithSidebarMenuProps>;
 //#endregion
-export { PageLayoutWithSidebarMenu, PageLayoutWithSidebarMenuProps };
+export { PageLayoutWithSidebarMenu, PageLayoutWithSidebarMenuProps };
+//# sourceMappingURL=PageLayoutWithSidebarMenu.d.ts.map

package/dist/PageLayoutWithSidebarMenu/PageLayoutWithSidebarMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayoutWithSidebarMenu.d.ts","names":[],"sources":["../../src/PageLayoutWithSidebarMenu/PageLayoutWithSidebarMenu.tsx"],"sourcesContent":[],"mappings":";;;;;KAaK,IAAA;KAEO,8BAAA,GAAiC;EAFxC,QAAI,EAAA,MAAA;EAEG,WAAA,EAAA;IAAiC,OAAA,EAEnB,KAAA,CAAM,SAFa;IAEb,IAAA,EAAiB,IAAjB;EAAiB,CAAA;EACrB,YAAM,CAAA,EAAA;IAAiB,OAAA,EAAvB,KAAA,CAAM,SAAiB;IAE1B,IAAA,EAF0B,IAE1B;EAAa,CAAA;EAGzB,YAAA,CAAA,EAAA,OAAA;yBAHY;;cAGZ,2BAA2B,KAAA,CAAM,GAC5C"}

package/dist/PageLayoutWithSidebarMenu/PageLayoutWithSidebarMenu.js

@@ -45,4 +45,5 @@ const PageLayoutWithSidebarMenu = ({ children, pageName, leftSidebar, rightSideb
 };
 
 //#endregion
-export { PageLayoutWithSidebarMenu };
+export { PageLayoutWithSidebarMenu };
+//# sourceMappingURL=PageLayoutWithSidebarMenu.js.map

package/dist/PageLayoutWithSidebarMenu/PageLayoutWithSidebarMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayoutWithSidebarMenu.js","names":["PageLayoutWithSidebarMenu: React.FC<\n  PageLayoutWithSidebarMenuProps\n>"],"sources":["../../src/PageLayoutWithSidebarMenu/PageLayoutWithSidebarMenu.tsx"],"sourcesContent":["import {\n  Column,\n  ContentContainer,\n  GridBox,\n  LayoutGrid,\n  SkipToContentTarget,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { UserClickData } from '@codecademy/tracking';\nimport React from 'react';\n\nimport { BackToTopAnchor } from '../BackToTopAnchor';\n\ntype Cols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport type PageLayoutWithSidebarMenuProps = WithChildrenProp & {\n  pageName: string;\n  leftSidebar: { content: React.ReactNode; cols: Cols };\n  rightSidebar?: { content: React.ReactNode; cols: Cols };\n  hasBackToTop?: boolean;\n  trackUserClick: (data: UserClickData) => void;\n};\n\nexport const PageLayoutWithSidebarMenu: React.FC<\n  PageLayoutWithSidebarMenuProps\n> = ({\n  children,\n  pageName,\n  leftSidebar,\n  rightSidebar,\n  hasBackToTop,\n  trackUserClick,\n}) => {\n  return (\n    <ContentContainer as=\"main\">\n      <LayoutGrid pb={64} columnGap={24}>\n        <Column size={{ lg: leftSidebar.cols }} py={16}>\n          {leftSidebar.content}\n        </Column>\n        <Column\n          alignContent=\"flex-start\"\n          size={{\n            lg: (12 - leftSidebar.cols - (rightSidebar?.cols ?? 0)) as Cols,\n          }}\n          height=\"100%\"\n        >\n          <SkipToContentTarget id=\"heading\" />\n          {children}\n        </Column>\n        {rightSidebar && (\n          <Column size={{ lg: rightSidebar.cols }} py={16}>\n            {rightSidebar.content}\n          </Column>\n        )}\n        {hasBackToTop && (\n          <GridBox gridColumnEnd=\"span 12\" justifyContent=\"center\">\n            <BackToTopAnchor\n              targetId={`${pageName}_title`}\n              onClick={() =>\n                trackUserClick({\n                  page_name: pageName,\n                  context: 'back_to_top',\n                  target: 'back_to_top',\n                })\n              }\n            />\n          </GridBox>\n        )}\n      </LayoutGrid>\n    </ContentContainer>\n  );\n};\n"],"mappings":";;;;;;AAuBA,MAAaA,6BAER,EACH,UACA,UACA,aACA,cACA,cACA,qBACI;AACJ,QACE,oBAAC;EAAiB,IAAG;YACnB,qBAAC;GAAW,IAAI;GAAI,WAAW;;IAC7B,oBAAC;KAAO,MAAM,EAAE,IAAI,YAAY,MAAM;KAAE,IAAI;eACzC,YAAY;MACN;IACT,qBAAC;KACC,cAAa;KACb,MAAM,EACJ,IAAK,KAAK,YAAY,QAAQ,cAAc,QAAQ,IACrD;KACD,QAAO;gBAEP,oBAAC,uBAAoB,IAAG,YAAY,EACnC;MACM;IACR,gBACC,oBAAC;KAAO,MAAM,EAAE,IAAI,aAAa,MAAM;KAAE,IAAI;eAC1C,aAAa;MACP;IAEV,gBACC,oBAAC;KAAQ,eAAc;KAAU,gBAAe;eAC9C,oBAAC;MACC,UAAU,GAAG,SAAS;MACtB,eACE,eAAe;OACb,WAAW;OACX,SAAS;OACT,QAAQ;OACT,CAAC;OAEJ;MACM;;IAED;GACI"}

package/dist/PageSection/index.d.ts

@@ -17,4 +17,5 @@ interface PageSectionProps extends WithChildrenProp {
 }
 declare const PageSection: React$1.FC<PageSectionProps>;
 //#endregion
-export { PageSection, PageSectionProps, SectionButton };
+export { PageSection, PageSectionProps, SectionButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/PageSection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/PageSection/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAUK,sBAAA,GAAyB;;EAAzB,IAAA,CAAA,EAAA,MAAA;EAMO,OAAA,CAAA,EAAA,GAAA,GAAa,IAAA;AAQzB,CAAA;AAEiB,KAVL,aAAA,GAAgB,sBAUX,GAVoC,SAUpC;AACS,UAHT,gBAAA,SAAyB,gBAGhB,CAAA;EACT,KAAA,EAAA,MAAA;EAJyB,YAAA,CAAA,EAEzB,aAFyB;EAAgB,qBAAA,CAAA,EAGhC,aAHgC;EAO7C,YAAA,CAAA,EAHI,aAGkB;;cAAtB,aAAa,OAAA,CAAM,GAAG"}

package/dist/PageSection/index.js

@@ -60,4 +60,5 @@ const PageSection = ({ title, headerButton, headerSecondaryButton, footerButton,
 };
 
 //#endregion
-export { PageSection };
+export { PageSection };
+//# sourceMappingURL=index.js.map

package/dist/PageSection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["PageSection: React.FC<PageSectionProps>"],"sources":["../../src/PageSection/index.tsx"],"sourcesContent":["import {\n  Box,\n  FlexBox,\n  Text,\n  TextButton,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { AriaAttributes, ReactNode } from 'react';\nimport * as React from 'react';\n\ntype TextButtonMinimumProps = AriaAttributes & {\n  text: string;\n  href?: string;\n  onClick?: () => void;\n};\n\nexport type SectionButton = TextButtonMinimumProps | ReactNode;\n\nfunction isSectionButtonATextButton(\n  button: SectionButton\n): button is TextButtonMinimumProps {\n  return (button as TextButtonMinimumProps).text !== undefined;\n}\n\nexport interface PageSectionProps extends WithChildrenProp {\n  title: string;\n  headerButton?: SectionButton;\n  headerSecondaryButton?: SectionButton;\n  footerButton?: SectionButton;\n}\n\nexport const PageSection: React.FC<PageSectionProps> = ({\n  title,\n  headerButton,\n  headerSecondaryButton,\n  footerButton,\n  children,\n}) => {\n  const renderSectionButton = (sectionButton: SectionButton) => {\n    if (!isSectionButtonATextButton(sectionButton)) return sectionButton;\n\n    const { text, ...buttonProps } = sectionButton;\n    return <TextButton {...buttonProps}>{text}</TextButton>;\n  };\n\n  const maybeRenderHeaderButton = () => {\n    if (!headerButton) return null;\n    return (\n      <Box ml={4} display=\"inline\">\n        {renderSectionButton(headerButton)}\n      </Box>\n    );\n  };\n\n  const maybeRenderHeaderSecondaryButton = () => {\n    if (!headerSecondaryButton) return null;\n    return renderSectionButton(headerSecondaryButton);\n  };\n\n  const renderSectionHeader = () => (\n    // Setting height directly to height of the buttons so if they are omitted\n    // the header remains the same height.\n    <FlexBox height=\"2.5rem\" mb={8} justifyContent=\"space-between\">\n      <FlexBox alignItems=\"center\">\n        <Text as=\"h2\" fontSize={22}>\n          {title}\n        </Text>\n        {maybeRenderHeaderButton()}\n      </FlexBox>\n      {maybeRenderHeaderSecondaryButton()}\n    </FlexBox>\n  );\n\n  const maybeRenderSectionFooter = () => {\n    if (!footerButton) return null;\n    return (\n      <FlexBox justifyContent=\"flex-end\" mt={16}>\n        {renderSectionButton(footerButton)}\n      </FlexBox>\n    );\n  };\n\n  return (\n    <FlexBox flexDirection=\"column\" mb={48}>\n      {renderSectionHeader()}\n      {children}\n      {maybeRenderSectionFooter()}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;AAkBA,SAAS,2BACP,QACkC;AAClC,QAAQ,OAAkC,SAAS;;AAUrD,MAAaA,eAA2C,EACtD,OACA,cACA,uBACA,cACA,eACI;CACJ,MAAM,uBAAuB,kBAAiC;AAC5D,MAAI,CAAC,2BAA2B,cAAc,CAAE,QAAO;EAEvD,MAAM,EAAE,MAAM,GAAG,gBAAgB;AACjC,SAAO,oBAAC;GAAW,GAAI;aAAc;IAAkB;;CAGzD,MAAM,gCAAgC;AACpC,MAAI,CAAC,aAAc,QAAO;AAC1B,SACE,oBAAC;GAAI,IAAI;GAAG,SAAQ;aACjB,oBAAoB,aAAa;IAC9B;;CAIV,MAAM,yCAAyC;AAC7C,MAAI,CAAC,sBAAuB,QAAO;AACnC,SAAO,oBAAoB,sBAAsB;;CAGnD,MAAM,4BAGJ,qBAAC;EAAQ,QAAO;EAAS,IAAI;EAAG,gBAAe;aAC7C,qBAAC;GAAQ,YAAW;cAClB,oBAAC;IAAK,IAAG;IAAK,UAAU;cACrB;KACI,EACN,yBAAyB;IAClB,EACT,kCAAkC;GAC3B;CAGZ,MAAM,iCAAiC;AACrC,MAAI,CAAC,aAAc,QAAO;AAC1B,SACE,oBAAC;GAAQ,gBAAe;GAAW,IAAI;aACpC,oBAAoB,aAAa;IAC1B;;AAId,QACE,qBAAC;EAAQ,eAAc;EAAS,IAAI;;GACjC,qBAAqB;GACrB;GACA,0BAA0B;;GACnB"}

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

@@ -9,4 +9,5 @@ interface PastDueModalProps {
 }
 declare const PastDueModalContents: React.FC<React.PropsWithChildren<PastDueModalProps>>;
 //#endregion
-export { PastDueModalContents, PastDueModalProps };
+export { PastDueModalContents, PastDueModalProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/PastDue/PastDueModalContents/index.tsx"],"sourcesContent":[],"mappings":";;;UAKiB,iBAAA;;EAAA,YAAA,EAAA,OAAiB;EAOrB,WAAA,EAJE,KAAA,CAAM,SAyBpB;EApByB,mBAAA,EAJH,KAAA,CAAM,SAIH;;AADe,cAA5B,oBAA4B,EAAN,KAAA,CAAM,EAAA,CACvC,KAAA,CAAM,iBADiC,CACf,iBADe,CAAA,CAAA"}

package/dist/PastDue/PastDueModalContents/index.js

@@ -23,4 +23,5 @@ const PastDueModalContents = ({ pastDueErrorCode, isSilverPlan, closeButton, upd
 };
 
 //#endregion
-export { PastDueModalContents };
+export { PastDueModalContents };
+//# sourceMappingURL=index.js.map

package/dist/PastDue/PastDueModalContents/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["PastDueModalContents: React.FC<\n  React.PropsWithChildren<PastDueModalProps>\n>"],"sources":["../../../src/PastDue/PastDueModalContents/index.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport React from 'react';\n\nimport { pastDueErrorMessages } from '../pastDueMessages';\n\nexport interface PastDueModalProps {\n  pastDueErrorCode: string;\n  isSilverPlan: boolean;\n  closeButton: React.ReactNode;\n  updatePaymentButton: React.ReactNode;\n}\n\nexport const PastDueModalContents: React.FC<\n  React.PropsWithChildren<PastDueModalProps>\n> = ({ pastDueErrorCode, isSilverPlan, closeButton, updatePaymentButton }) => {\n  const pastDueErrorMessage =\n    pastDueErrorMessages(isSilverPlan, false)[pastDueErrorCode] ||\n    pastDueErrorMessages(isSilverPlan, false).default;\n\n  return (\n    <>\n      <FlexBox column>\n        <Box>\n          <Text mb={12}>{pastDueErrorMessage.text1}</Text>\n          <Text mb={12}>{pastDueErrorMessage.text2}</Text>\n        </Box>\n      </FlexBox>\n      <FlexBox justifyContent=\"end\" alignItems=\"end\">\n        {closeButton}\n        {updatePaymentButton}\n      </FlexBox>\n    </>\n  );\n};\n"],"mappings":";;;;;;AAYA,MAAaA,wBAER,EAAE,kBAAkB,cAAc,aAAa,0BAA0B;CAC5E,MAAM,sBACJ,qBAAqB,cAAc,MAAM,CAAC,qBAC1C,qBAAqB,cAAc,MAAM,CAAC;AAE5C,QACE,4CACE,oBAAC;EAAQ;YACP,qBAAC,kBACC,oBAAC;GAAK,IAAI;aAAK,oBAAoB;IAAa,EAChD,oBAAC;GAAK,IAAI;aAAK,oBAAoB;IAAa,IAC5C;GACE,EACV,qBAAC;EAAQ,gBAAe;EAAM,YAAW;aACtC,aACA;GACO,IACT"}

package/dist/PastDue/pastDueMessages.d.ts

@@ -5,4 +5,5 @@ interface PastDueErrorMessage {
 }
 declare const pastDueErrorMessages: (isSilverPlan: boolean, isAlert: boolean) => Record<string, PastDueErrorMessage>;
 //#endregion
-export { pastDueErrorMessages };
+export { pastDueErrorMessages };
+//# sourceMappingURL=pastDueMessages.d.ts.map

package/dist/PastDue/pastDueMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pastDueMessages.d.ts","names":[],"sources":["../../src/PastDue/pastDueMessages.tsx"],"sourcesContent":[],"mappings":";UAGU,mBAAA;EAAA,KAAA,EAAA,MAAA;EASG,KAAA,EAAA,MAAA,GAPK,GAAA,CAAI,OAkEpB;;cA3DW,mEAGV,eAAe"}

package/dist/PastDue/pastDueMessages.js

@@ -50,4 +50,5 @@ const pastDueErrorMessages = (isSilverPlan, isAlert) => ({
 });
 
 //#endregion
-export { pastDueErrorMessages };
+export { pastDueErrorMessages };
+//# sourceMappingURL=pastDueMessages.js.map

package/dist/PastDue/pastDueMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pastDueMessages.js","names":[],"sources":["../../src/PastDue/pastDueMessages.tsx"],"sourcesContent":["import { Anchor } from '@codecademy/gamut';\nimport styled from '@emotion/styled';\n\ninterface PastDueErrorMessage {\n  text1: string;\n  text2: string | JSX.Element;\n}\n\nconst StyledAnchor = styled(Anchor)<{ isAlert: boolean }>`\n  ${({ theme, isAlert }) => (isAlert ? `color: ${theme.colors.white}` : '')};\n`;\n\nexport const pastDueErrorMessages = (\n  isSilverPlan: boolean,\n  isAlert: boolean\n): Record<string, PastDueErrorMessage> => ({\n  insufficient_funds: {\n    text1: `Your payment did not go through due to insufficient funds.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  declined: {\n    text1: `Your payment did not go through. Contact your bank or card issuer to find out more.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  temporary_hold: {\n    text1: `Your payment method was placed on a temporary hold. Contact your bank or card issuer to find out more.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  invalid_transaction: {\n    text1: `Your payment did not go through. Contact your bank or card issuer to find out more about possible transaction restrictions.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  invalid_account_number: {\n    text1: `Your payment did not go through because your card details may be incorrect.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your card details or payment method.`,\n  },\n  expired_card: {\n    text1: `Your payment did not go through because your card is expired.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  default: {\n    text1: `Your payment did not go through. To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n    text2: (\n      <>\n        Let our{' '}\n        <StyledAnchor\n          href=\"https://help.codecademy.com/hc/en-us\"\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          isAlert={isAlert}\n        >\n          customer support\n        </StyledAnchor>{' '}\n        team know if you have further questions.\n      </>\n    ),\n  },\n});\n"],"mappings":";;;;;AAQA,MAAM,eAAe,OAAO,OAAO,AAAsB;KACpD,EAAE,OAAO,cAAe,UAAU,UAAU,MAAM,OAAO,UAAU,GAAI;;AAG5E,MAAa,wBACX,cACA,aACyC;CACzC,oBAAoB;EAClB,OAAO;EACP,OAAO,oCACL,eAAe,SAAS,MACzB;EACF;CACD,UAAU;EACR,OAAO;EACP,OAAO,oCACL,eAAe,SAAS,MACzB;EACF;CACD,gBAAgB;EACd,OAAO;EACP,OAAO,oCACL,eAAe,SAAS,MACzB;EACF;CACD,qBAAqB;EACnB,OAAO;EACP,OAAO,oCACL,eAAe,SAAS,MACzB;EACF;CACD,wBAAwB;EACtB,OAAO;EACP,OAAO,oCACL,eAAe,SAAS,MACzB;EACF;CACD,cAAc;EACZ,OAAO;EACP,OAAO,oCACL,eAAe,SAAS,MACzB;EACF;CACD,SAAS;EACP,OAAO,qEACL,eAAe,SAAS,MACzB;EACD,OACE;GAAE;GACQ;GACR,oBAAC;IACC,MAAK;IACL,QAAO;IACP,KAAI;IACK;cACV;KAEc;GAAC;GAAI;MAEnB;EAEN;CACF"}

package/dist/PausableImage/BaseImage/index.js

@@ -67,4 +67,5 @@ const BaseImage = ({ alt, ...rest }) => {
 var BaseImage_default = BaseImage;
 
 //#endregion
-export { BaseImage, Container, PlayingImage, BaseImage_default as default };
+export { BaseImage, Container, PlayingImage, BaseImage_default as default };
+//# sourceMappingURL=index.js.map

package/dist/PausableImage/BaseImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BaseImage: React.FC<BaseImageProps>"],"sources":["../../../src/PausableImage/BaseImage/index.tsx"],"sourcesContent":["import { FillButton, HiddenText } from '@codecademy/gamut';\nimport { PauseIcon, PlayIcon } from '@codecademy/gamut-icons';\nimport styled from '@emotion/styled';\nimport { useState } from 'react';\nimport * as React from 'react';\nimport Freezeframe from 'react-freezeframe';\n\nimport { imageStyles } from '..';\n\nexport interface BaseImageProps {\n  alt: string;\n  src: string;\n}\n\nexport const Container = styled.div`\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  display: flex;\n  position: relative;\n  width: 100%;\n\n  > img,\n  > .react-freezeframe,\n  > .react-freezeframe img {\n    max-width: 100%;\n  }\n  .ff-container .ff-canvas {\n    transition: none;\n  }\n  .ff-loading-icon::before {\n    display: none;\n  }\n`;\n\nexport const PlayingImage = imageStyles;\n\nconst StyledFreezeframe = styled(Freezeframe)(imageStyles);\n\nexport const BaseImage: React.FC<BaseImageProps> = ({ alt, ...rest }) => {\n  const [paused, setPaused] = useState(false);\n\n  const [liveText, buttonLabel, Icon, Image] = paused\n    ? [`${alt}, paused`, 'Play animated image', PlayIcon, StyledFreezeframe]\n    : [`${alt}, playing`, 'Pause animated image', PauseIcon, PlayingImage];\n\n  return (\n    <Container>\n      <Image alt={alt} {...rest} />\n      {/* ensure proper fall back label if an empty string is given as alt */}\n      <HiddenText aria-live=\"polite\">{alt ? liveText : buttonLabel}</HiddenText>\n      <FillButton\n        bottom={0}\n        m={8}\n        onClick={() => setPaused(!paused)}\n        position=\"absolute\"\n        right={0}\n        variant=\"secondary\"\n        zIndex={1}\n        aria-label={buttonLabel}\n      >\n        <Icon color=\"currentColor\" />\n      </FillButton>\n    </Container>\n  );\n};\n\nexport default BaseImage;\n"],"mappings":";;;;;;;;;AAcA,MAAa,YAAY,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;AAqBnC,MAAa,eAAe;AAE5B,MAAM,oBAAoB,OAAO,YAAY,CAAC,YAAY;AAE1D,MAAaA,aAAuC,EAAE,KAAK,GAAG,WAAW;CACvE,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAM,CAAC,UAAU,aAAa,MAAM,SAAS,SACzC;EAAC,GAAG,IAAI;EAAW;EAAuB;EAAU;EAAkB,GACtE;EAAC,GAAG,IAAI;EAAY;EAAwB;EAAW;EAAa;AAExE,QACE,qBAAC;EACC,oBAAC;GAAW;GAAK,GAAI;IAAQ;EAE7B,oBAAC;GAAW,aAAU;aAAU,MAAM,WAAW;IAAyB;EAC1E,oBAAC;GACC,QAAQ;GACR,GAAG;GACH,eAAe,UAAU,CAAC,OAAO;GACjC,UAAS;GACT,OAAO;GACP,SAAQ;GACR,QAAQ;GACR,cAAY;aAEZ,oBAAC,QAAK,OAAM,iBAAiB;IAClB;KACH;;AAIhB,wBAAe"}

package/dist/PausableImage/index.d.ts

@@ -1,16 +1,17 @@
-import * as _emotion_styled2 from "@emotion/styled";
+import * as _emotion_styled1 from "@emotion/styled";
 import * as React$1 from "react";
-import * as _emotion_react7 from "@emotion/react";
+import * as _emotion_react2 from "@emotion/react";
 
 //#region src/PausableImage/index.d.ts
 interface PauseableImageProps {
   src: string;
   alt: string;
 }
-declare const imageStyles: _emotion_styled2.StyledComponent<{
-  theme?: _emotion_react7.Theme;
+declare const imageStyles: _emotion_styled1.StyledComponent<{
+  theme?: _emotion_react2.Theme;
   as?: React$1.ElementType;
 }, React$1.DetailedHTMLProps<React$1.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 declare const PausableImage: React$1.FC<PauseableImageProps>;
 //#endregion
-export { PausableImage, imageStyles };
+export { PausableImage, imageStyles };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/PausableImage/index.tsx"],"sourcesContent":[],"mappings":";;;;;UAMU,mBAAA;;;;AAAA,cAIG,WAJgB,mBAIL,eAJK,CAAA;EAIhB,KAAA,CAAA,EASZ,eAAA,CAAA,KAAA;EAAA,EAAA,CAAA,qBAAA;;cAIY,eAAe,OAAA,CAAM,GAAG"}

package/dist/PausableImage/index.js

@@ -25,4 +25,5 @@ const PausableImage = (props) => {
 };
 
 //#endregion
-export { PausableImage, imageStyles };
+export { PausableImage, imageStyles };
+//# sourceMappingURL=index.js.map

package/dist/PausableImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PausableImage: React.FC<PauseableImageProps>"],"sources":["../../src/PausableImage/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nconst BaseImage = React.lazy(() => import('./BaseImage'));\n\ninterface PauseableImageProps {\n  src: string;\n  alt: string;\n}\nexport const imageStyles = styled.img(\n  css({\n    height: 'auto',\n    maxHeight: '100%',\n    maxWidth: '100%',\n    '&[src$=\".svg\"]': {\n      width: '100%',\n    },\n  })\n);\n\nconst StaticImage = imageStyles;\n\nexport const PausableImage: React.FC<PauseableImageProps> = (props) => {\n  const staticImage = <StaticImage {...props} />;\n\n  // Avoid rendering React.Suspense on the server until it's fully supported by React & our applications\n  const [isMounted, setIsMounted] = React.useState(false);\n  React.useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  return (\n    <>\n      {isMounted && props.src?.endsWith('.gif') ? (\n        <React.Suspense fallback={staticImage}>\n          <BaseImage {...props} />\n        </React.Suspense>\n      ) : (\n        staticImage\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;AAIA,MAAM,YAAYA,QAAM,WAAW,OAAO,wBAAe;AAMzD,MAAa,cAAc,OAAO,IAChC,IAAI;CACF,QAAQ;CACR,WAAW;CACX,UAAU;CACV,oBAAkB,EAChB,OAAO,QACR;CACF,CAAC,CACH;AAED,MAAM,cAAc;AAEpB,MAAaC,iBAAgD,UAAU;CACrE,MAAM,cAAc,oBAAC,eAAY,GAAI,QAAS;CAG9C,MAAM,CAAC,WAAW,gBAAgBD,QAAM,SAAS,MAAM;AACvD,SAAM,gBAAgB;AACpB,eAAa,KAAK;IACjB,EAAE,CAAC;AAEN,QACE,0CACG,aAAa,MAAM,KAAK,SAAS,OAAO,GACvC,oBAACA,QAAM;EAAS,UAAU;YACxB,oBAAC,aAAU,GAAI,QAAS;GACT,GAEjB,cAED"}

package/dist/PlanCard/PlanCardBanner.d.ts

@@ -7,4 +7,5 @@ interface PlanCardBannerProps {
 }
 declare const PlanCardBanner: React.FC<PlanCardBannerProps>;
 //#endregion
-export { PlanCardBanner };
+export { PlanCardBanner };
+//# sourceMappingURL=PlanCardBanner.d.ts.map

package/dist/PlanCard/PlanCardBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanCardBanner.d.ts","names":[],"sources":["../../src/PlanCard/PlanCardBanner.tsx"],"sourcesContent":[],"mappings":";;;UAKU,mBAAA;;EAAA,IAAA,CAAA,EAED,KAAA,CAAM,SAFc;AAc7B;cAAa,gBAAgB,KAAA,CAAM,GAAG"}

package/dist/PlanCard/PlanCardBanner.js

@@ -24,4 +24,5 @@ const PlanCardBanner = ({ text, icon }) => {
 };
 
 //#endregion
-export { PlanCardBanner };
+export { PlanCardBanner };
+//# sourceMappingURL=PlanCardBanner.js.map

package/dist/PlanCard/PlanCardBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanCardBanner.js","names":["PlanCardBanner: React.FC<PlanCardBannerProps>"],"sources":["../../src/PlanCard/PlanCardBanner.tsx"],"sourcesContent":["import { Text } from '@codecademy/gamut';\nimport { Background, css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\ninterface PlanCardBannerProps {\n  text: string;\n  icon?: React.ReactNode;\n}\n\nconst BackgroundFlex = styled(Background)(\n  css({\n    display: 'flex',\n    p: 8,\n    justifyContent: 'center',\n    alignItems: 'center',\n  })\n);\n\nexport const PlanCardBanner: React.FC<PlanCardBannerProps> = ({\n  text,\n  icon,\n}) => {\n  return (\n    <BackgroundFlex bg=\"navy\">\n      {icon && icon}\n      <Text fontFamily=\"accent\" fontSize={14} ml={8}>\n        {text}\n      </Text>\n    </BackgroundFlex>\n  );\n};\n"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB,OAAO,WAAW,CACvC,IAAI;CACF,SAAS;CACT,GAAG;CACH,gBAAgB;CAChB,YAAY;CACb,CAAC,CACH;AAED,MAAaA,kBAAiD,EAC5D,MACA,WACI;AACJ,QACE,qBAAC;EAAe,IAAG;aAChB,QAAQ,MACT,oBAAC;GAAK,YAAW;GAAS,UAAU;GAAI,IAAI;aACzC;IACI;GACQ"}

package/dist/PlanCard/PlanFeature.js

@@ -85,4 +85,5 @@ const PlanFeature = ({ feature, available, isNew, isHighlighted, isMultiple }) =
 };
 
 //#endregion
-export { PlanFeature };
+export { PlanFeature };
+//# sourceMappingURL=PlanFeature.js.map

package/dist/PlanCard/PlanFeature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanFeature.js","names":["PlanFeature: React.FC<PlanFeatureProps>"],"sources":["../../src/PlanCard/PlanFeature.tsx"],"sourcesContent":["import { Badge, FlexBox, Text } from '@codecademy/gamut';\nimport {\n  CloseCircleIcon,\n  MiniCheckCircleIcon,\n  StarFilledIcon,\n} from '@codecademy/gamut-icons';\nimport { css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\ninterface PlanFeatureProps {\n  feature: string;\n  available: boolean;\n  isNew?: boolean;\n  isHighlighted?: boolean;\n  isMultiple: boolean;\n}\n\nconst ListItem = styled(FlexBox)(css({ listStyleType: 'none' })).withComponent(\n  'li'\n);\n\nexport const PlanFeature: React.FC<PlanFeatureProps> = ({\n  feature,\n  available,\n  isNew,\n  isHighlighted,\n  isMultiple,\n}) => {\n  const Icon = isHighlighted\n    ? StarFilledIcon\n    : available\n    ? MiniCheckCircleIcon\n    : CloseCircleIcon;\n\n  if (isHighlighted) {\n    return (\n      <Badge size=\"sm\" variant=\"accent\" py={12} mb={4} ml={'-4px' as never}>\n        <Icon size={14} mr={8} flexShrink={0} aria-hidden />\n        <Text fontSize=\"small\">\n          {feature}\n          <Text screenreader> included.</Text>\n        </Text>\n      </Badge>\n    );\n  }\n\n  return (\n    <FlexBox\n      as={ListItem}\n      key={feature}\n      alignItems={isMultiple ? 'center' : { _: 'center', xs: 'flex-start' }}\n      mr={isMultiple ? 'unset' : { _: 'unset', xs: 24, sm: 8 }}\n      width={isMultiple ? 'unset' : { _: 'unset', xs: '50%' }}\n      data-testid=\"plan-feature\"\n    >\n      <Icon\n        mr={8}\n        mt={isMultiple ? 0 : { xs: 4 }}\n        flexShrink={0}\n        color={available ? 'feedback-success' : 'gray-600'}\n        aria-hidden\n      />\n\n      <FlexBox\n        flexWrap={{ _: 'nowrap', md: 'wrap', lg: 'nowrap' }}\n        alignItems=\"baseline\"\n      >\n        {available ? (\n          <>\n            <Text width=\"100%\">\n              {feature}\n              <Text screenreader> included.</Text>\n            </Text>\n          </>\n        ) : (\n          <>\n            <Text textDecoration=\"line-through\" color=\"text-disabled\">\n              {feature}\n              <Text screenreader> not included.</Text>\n            </Text>\n          </>\n        )}\n\n        {isNew && (\n          <Badge size=\"sm\" variant=\"accent\" ml={{ _: 4, md: 0, lg: 4 }}>\n            New\n          </Badge>\n        )}\n      </FlexBox>\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,MAAM,WAAW,OAAO,QAAQ,CAAC,IAAI,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,cAC/D,KACD;AAED,MAAaA,eAA2C,EACtD,SACA,WACA,OACA,eACA,iBACI;CACJ,MAAM,OAAO,gBACT,iBACA,YACA,sBACA;AAEJ,KAAI,cACF,QACE,qBAAC;EAAM,MAAK;EAAK,SAAQ;EAAS,IAAI;EAAI,IAAI;EAAG,IAAI;aACnD,oBAAC;GAAK,MAAM;GAAI,IAAI;GAAG,YAAY;GAAG;IAAc,EACpD,qBAAC;GAAK,UAAS;cACZ,SACD,oBAAC;IAAK;cAAa;KAAiB;IAC/B;GACD;AAIZ,QACE,qBAAC;EACC,IAAI;EAEJ,YAAY,aAAa,WAAW;GAAE,GAAG;GAAU,IAAI;GAAc;EACrE,IAAI,aAAa,UAAU;GAAE,GAAG;GAAS,IAAI;GAAI,IAAI;GAAG;EACxD,OAAO,aAAa,UAAU;GAAE,GAAG;GAAS,IAAI;GAAO;EACvD,eAAY;aAEZ,oBAAC;GACC,IAAI;GACJ,IAAI,aAAa,IAAI,EAAE,IAAI,GAAG;GAC9B,YAAY;GACZ,OAAO,YAAY,qBAAqB;GACxC;IACA,EAEF,qBAAC;GACC,UAAU;IAAE,GAAG;IAAU,IAAI;IAAQ,IAAI;IAAU;GACnD,YAAW;cAEV,YACC,0CACE,qBAAC;IAAK,OAAM;eACT,SACD,oBAAC;KAAK;eAAa;MAAiB;KAC/B,GACN,GAEH,0CACE,qBAAC;IAAK,gBAAe;IAAe,OAAM;eACvC,SACD,oBAAC;KAAK;eAAa;MAAqB;KACnC,GACN,EAGJ,SACC,oBAAC;IAAM,MAAK;IAAK,SAAQ;IAAS,IAAI;KAAE,GAAG;KAAG,IAAI;KAAG,IAAI;KAAG;cAAE;KAEtD;IAEF;IAvCL,QAwCG"}

package/dist/PlanCard/PopularBadge.js

@@ -15,4 +15,5 @@ const PopularBadge = (props) => /* @__PURE__ */ jsx(FlexBox, {
 });
 
 //#endregion
-export { PopularBadge };
+export { PopularBadge };
+//# sourceMappingURL=PopularBadge.js.map

package/dist/PlanCard/PopularBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopularBadge.js","names":["PopularBadge: React.FC<FlexBoxProps>"],"sources":["../../src/PlanCard/PopularBadge.tsx"],"sourcesContent":["import { Badge, FlexBox, FlexBoxProps } from '@codecademy/gamut';\nimport React from 'react';\n\nexport const PopularBadge: React.FC<FlexBoxProps> = (props) => (\n  <FlexBox position=\"absolute\" top={-10} {...props}>\n    <Badge variant=\"accent\" size=\"sm\">\n      Most popular\n    </Badge>\n  </FlexBox>\n);\n"],"mappings":";;;;;AAGA,MAAaA,gBAAwC,UACnD,oBAAC;CAAQ,UAAS;CAAW,KAAK;CAAK,GAAI;WACzC,oBAAC;EAAM,SAAQ;EAAS,MAAK;YAAK;GAE1B;EACA"}

package/dist/PlanCard/PricingAmount.js

@@ -116,4 +116,5 @@ const PricingAmount = ({ currency, monthlyPrice, product, price, termMonths, com
 };
 
 //#endregion
-export { PricingAmount };
+export { PricingAmount };
+//# sourceMappingURL=PricingAmount.js.map

package/dist/PlanCard/PricingAmount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingAmount.js","names":["PricingAmount: React.FC<PricingAmountProps>"],"sources":["../../src/PlanCard/PricingAmount.tsx"],"sourcesContent":["import { FlexBox, Text } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\nimport {\n  Currency,\n  getCurrencyPrefix,\n  getCurrencySymbol,\n  PlanType,\n} from './types';\n\nconst Amount = styled(Text)<{ isMultiple: boolean }>`\n  font-weight: bold;\n  color: ${theme.colors.text};\n  font-size: ${({ isMultiple }) => (isMultiple ? '44px' : '64px')};\n  line-height: ${({ isMultiple }) => (isMultiple ? '64px' : '80px')};\n  ${theme.breakpoints.xl} {\n    font-size: 64px;\n    line-height: 80px;\n  }\n`;\n\ninterface PricingAmountProps {\n  product: PlanType;\n  price: string;\n  monthlyPrice?: string;\n  currency: Currency;\n  termMonths?: number;\n  compact?: boolean;\n  isMultiple: boolean;\n  inUpsellModal?: boolean;\n}\n\nexport const PricingAmount: React.FC<PricingAmountProps> = ({\n  currency,\n  monthlyPrice,\n  product,\n  price,\n  termMonths,\n  compact = false,\n  isMultiple,\n  inUpsellModal = false,\n}) => {\n  const cycle = termMonths === 1 ? 'monthly' : 'annually';\n  const [dollars, cents] = price.split('.');\n  let ariaLabel = `${getCurrencyPrefix(currency)}${getCurrencySymbol(\n    currency\n  )}${dollars}${cents ? `.${cents}` : ''}`;\n  if (product !== 'basic') {\n    ariaLabel += ` a month, billed ${cycle}`;\n    if (inUpsellModal) ariaLabel += ', monthly pricing also available';\n    if (monthlyPrice) {\n      ariaLabel += ` or ${getCurrencyPrefix(currency)}${getCurrencySymbol(\n        currency\n      )}${monthlyPrice} billed monthly`;\n    }\n  }\n\n  return (\n    <>\n      <FlexBox\n        data-testid=\"pricing-amount\"\n        lineHeight=\"title\"\n        mb={compact ? 0 : 8}\n        column\n        alignItems=\"center\"\n      >\n        <Text screenreader data-testid=\"pricing-amount-label\">\n          {ariaLabel}\n        </Text>\n        {/* for screen reader optimization */}\n        <FlexBox\n          aria-hidden\n          row\n          alignItems=\"center\"\n          height={isMultiple ? { _: 50, xl: 'unset' } : 'unset'}\n        >\n          <FlexBox mr={4} alignItems=\"start\">\n            <Text\n              color=\"text\"\n              mt={{ _: 12, xl: 16 }}\n              fontWeight=\"bold\"\n              fontSize={34}\n            >{`${getCurrencyPrefix(currency)}${getCurrencySymbol(\n              currency\n            )}`}</Text>\n            <Amount isMultiple={isMultiple}>{`${dollars}`}</Amount>\n            {product === 'basic' ? null : (\n              <FlexBox column alignItems=\"flex-end\" ml={4}>\n                <Text\n                  color=\"text\"\n                  fontWeight=\"bold\"\n                  fontSize={22}\n                  mt={{ _: 12, xl: 16 }}\n                >\n                  {cents ? `.${cents}` : <span>&nbsp;</span>}\n                </Text>\n                <Text mt={{ _: 0, xl: 4 }} color=\"text-secondary\">\n                  /mo\n                </Text>\n              </FlexBox>\n            )}\n          </FlexBox>\n        </FlexBox>\n        <Text color=\"text-secondary\" center mt={compact ? 0 : { _: 8, xl: 0 }}>\n          {product === 'basic' ? (\n            <Text mb={24}>Always free</Text>\n          ) : (\n            <>\n              <Text mb={compact ? 0 : 8} aria-hidden>\n                {`Billed ${cycle}${inUpsellModal ? '*' : ''}`}\n              </Text>\n              <br />\n              {monthlyPrice && (\n                <Text aria-hidden>\n                  {`or ${getCurrencyPrefix(currency)}${getCurrencySymbol(\n                    currency\n                  )}${monthlyPrice} billed monthly`}\n                </Text>\n              )}\n            </>\n          )}\n        </Text>\n      </FlexBox>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAM,SAAS,OAAO,KAAK,AAAyB;;WAEzC,MAAM,OAAO,KAAK;gBACb,EAAE,iBAAkB,aAAa,SAAS,OAAQ;kBAChD,EAAE,iBAAkB,aAAa,SAAS,OAAQ;IAChE,MAAM,YAAY,GAAG;;;;;AAiBzB,MAAaA,iBAA+C,EAC1D,UACA,cACA,SACA,OACA,YACA,UAAU,OACV,YACA,gBAAgB,YACZ;CACJ,MAAM,QAAQ,eAAe,IAAI,YAAY;CAC7C,MAAM,CAAC,SAAS,SAAS,MAAM,MAAM,IAAI;CACzC,IAAI,YAAY,GAAG,kBAAkB,SAAS,GAAG,kBAC/C,SACD,GAAG,UAAU,QAAQ,IAAI,UAAU;AACpC,KAAI,YAAY,SAAS;AACvB,eAAa,oBAAoB;AACjC,MAAI,cAAe,cAAa;AAChC,MAAI,aACF,cAAa,OAAO,kBAAkB,SAAS,GAAG,kBAChD,SACD,GAAG,aAAa;;AAIrB,QACE,0CACE,qBAAC;EACC,eAAY;EACZ,YAAW;EACX,IAAI,UAAU,IAAI;EAClB;EACA,YAAW;;GAEX,oBAAC;IAAK;IAAa,eAAY;cAC5B;KACI;GAEP,oBAAC;IACC;IACA;IACA,YAAW;IACX,QAAQ,aAAa;KAAE,GAAG;KAAI,IAAI;KAAS,GAAG;cAE9C,qBAAC;KAAQ,IAAI;KAAG,YAAW;;MACzB,oBAAC;OACC,OAAM;OACN,IAAI;QAAE,GAAG;QAAI,IAAI;QAAI;OACrB,YAAW;OACX,UAAU;iBACV,GAAG,kBAAkB,SAAS,GAAG,kBACjC,SACD;QAAU;MACX,oBAAC;OAAmB;iBAAa,GAAG;QAAmB;MACtD,YAAY,UAAU,OACrB,qBAAC;OAAQ;OAAO,YAAW;OAAW,IAAI;kBACxC,oBAAC;QACC,OAAM;QACN,YAAW;QACX,UAAU;QACV,IAAI;SAAE,GAAG;SAAI,IAAI;SAAI;kBAEpB,QAAQ,IAAI,UAAU,oBAAC,oBAAK,SAAa;SACrC,EACP,oBAAC;QAAK,IAAI;SAAE,GAAG;SAAG,IAAI;SAAG;QAAE,OAAM;kBAAiB;SAE3C;QACC;;MAEJ;KACF;GACV,oBAAC;IAAK,OAAM;IAAiB;IAAO,IAAI,UAAU,IAAI;KAAE,GAAG;KAAG,IAAI;KAAG;cAClE,YAAY,UACX,oBAAC;KAAK,IAAI;eAAI;MAAkB,GAEhC;KACE,oBAAC;MAAK,IAAI,UAAU,IAAI;MAAG;gBACxB,UAAU,QAAQ,gBAAgB,MAAM;OACpC;KACP,oBAAC,SAAK;KACL,gBACC,oBAAC;MAAK;gBACH,MAAM,kBAAkB,SAAS,GAAG,kBACnC,SACD,GAAG,aAAa;OACZ;QAER;KAEA;;GACC,GACT"}

package/dist/PlanCard/RecommendedBadge.js

@@ -26,4 +26,5 @@ const RecommendedBadge = (props) => /* @__PURE__ */ jsxs(FlexBox, {
 });
 
 //#endregion
-export { RecommendedBadge };
+export { RecommendedBadge };
+//# sourceMappingURL=RecommendedBadge.js.map

package/dist/PlanCard/RecommendedBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendedBadge.js","names":["RecommendedBadge: React.FC<FlexBoxProps>"],"sources":["../../src/PlanCard/RecommendedBadge.tsx"],"sourcesContent":["import { FlexBox, FlexBoxProps, Text } from '@codecademy/gamut';\nimport { MiniStarIcon } from '@codecademy/gamut-icons';\nimport React from 'react';\n\nexport const RecommendedBadge: React.FC<FlexBoxProps> = (props) => (\n  <FlexBox\n    position=\"absolute\"\n    top={-28}\n    bg=\"navy\"\n    color=\"white\"\n    p={8}\n    borderRadiusTop=\"sm\"\n    borderRadiusBottom=\"none\"\n    center\n    {...props}\n  >\n    <MiniStarIcon mr={8} size={12} />\n    <Text fontFamily=\"accent\" lineHeight={0} fontSize={14}>\n      Recommended\n    </Text>\n  </FlexBox>\n);\n"],"mappings":";;;;;;AAIA,MAAaA,oBAA4C,UACvD,qBAAC;CACC,UAAS;CACT,KAAK;CACL,IAAG;CACH,OAAM;CACN,GAAG;CACH,iBAAgB;CAChB,oBAAmB;CACnB;CACA,GAAI;YAEJ,oBAAC;EAAa,IAAI;EAAG,MAAM;GAAM,EACjC,oBAAC;EAAK,YAAW;EAAS,YAAY;EAAG,UAAU;YAAI;GAEhD;EACC"}

package/dist/PlanCard/consts.js

@@ -216,4 +216,5 @@ const planDetails = {
 };
 
 //#endregion
-export { planDetails };
+export { planDetails };
+//# sourceMappingURL=consts.js.map

package/dist/PlanCard/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":["planDetails: PlanDetails"],"sources":["../../src/PlanCard/consts.ts"],"sourcesContent":["interface Detail {\n  id: string;\n  title: string;\n  tag: string;\n  variant: 'paleYellow' | 'yellow' | 'black' | 'navy-800';\n  features: {\n    name: string;\n    available: boolean;\n    isNew?: boolean;\n    isHighlighted?: boolean;\n  }[];\n}\n\ntype PlanDetails = Record<string, Detail>;\n\nexport const planDetails: PlanDetails = {\n  pro: {\n    id: 'pro',\n    title: 'Pro',\n    tag: 'Learn a skill',\n    variant: 'yellow',\n    features: [\n      { name: 'Unlimited AI learning assistance', available: true },\n      { name: 'Real-world projects', available: true },\n      { name: 'All courses', available: true },\n      { name: 'Skill paths', available: true },\n      { name: 'Career paths', available: true },\n      { name: 'Interview prep', available: true },\n      { name: 'Professional certifications', available: true },\n      { name: 'Career services', available: true },\n      { name: 'Assessments', available: true },\n    ],\n  },\n  'pro-student': {\n    id: 'pro',\n    title: 'Pro Student',\n    tag: 'Build a career',\n    variant: 'yellow',\n    features: [\n      { name: 'Unlimited AI learning assistance', available: true },\n      { name: 'Real-world projects', available: true },\n      { name: 'All courses', available: true },\n      { name: 'Skill paths', available: true },\n      { name: 'Career paths', available: true },\n      { name: 'Interview prep', available: true },\n      { name: 'Professional certifications', available: true },\n      { name: 'Assessments', available: true },\n    ],\n  },\n  'pro-gold': {\n    id: 'pro-gold',\n    title: 'Pro',\n    tag: 'Build a career',\n    variant: 'yellow',\n    features: [\n      { name: 'Unlimited AI learning assistance', available: true },\n      { name: 'Real-world projects', available: true },\n      { name: 'All courses', available: true },\n      { name: 'Skill paths', available: true },\n      { name: 'Career paths', available: true },\n      { name: 'Interview prep', available: true },\n      { name: 'Professional certifications', available: true },\n      { name: 'Career services', available: true },\n      { name: 'Assessments', available: true },\n    ],\n  },\n  'pro-silver': {\n    id: 'pro-silver',\n    title: 'Plus',\n    tag: 'Learn a skill',\n    variant: 'paleYellow',\n    features: [\n      { name: 'Unlimited AI learning assistance', available: true },\n      { name: 'Real-world projects', available: true },\n      { name: 'All courses', available: true },\n      { name: 'Skill paths', available: true },\n      { name: 'Career paths', available: false },\n      { name: 'Interview prep', available: false },\n      { name: 'Professional certifications', available: false },\n      { name: 'Career services', available: false },\n      { name: 'Assessments', available: false },\n    ],\n  },\n  'bootcamp-all-access-pass': {\n    id: 'bootcamp-all-access-pass',\n    title: 'Bootcamp All Access Pass',\n    tag: 'Includes 1 year of Pro',\n    variant: 'navy-800',\n    features: [\n      { name: 'Includes 1 year of Pro', available: true, isHighlighted: true },\n      { name: 'Beginner friendly', available: true },\n      { name: 'Premium certificate', available: true },\n      { name: 'Job assistance sessions', available: true },\n      { name: 'Real-world projects', available: true },\n      { name: 'Live doubt clearing', available: true },\n      { name: 'Access to real world experts', available: true },\n      { name: 'Community access', available: true },\n    ],\n  },\n};\n"],"mappings":";AAeA,MAAaA,cAA2B;CACtC,KAAK;EACH,IAAI;EACJ,OAAO;EACP,KAAK;EACL,SAAS;EACT,UAAU;GACR;IAAE,MAAM;IAAoC,WAAW;IAAM;GAC7D;IAAE,MAAM;IAAuB,WAAW;IAAM;GAChD;IAAE,MAAM;IAAe,WAAW;IAAM;GACxC;IAAE,MAAM;IAAe,WAAW;IAAM;GACxC;IAAE,MAAM;IAAgB,WAAW;IAAM;GACzC;IAAE,MAAM;IAAkB,WAAW;IAAM;GAC3C;IAAE,MAAM;IAA+B,WAAW;IAAM;GACxD;IAAE,MAAM;IAAmB,WAAW;IAAM;GAC5C;IAAE,MAAM;IAAe,WAAW;IAAM;GACzC;EACF;CACD,eAAe;EACb,IAAI;EACJ,OAAO;EACP,KAAK;EACL,SAAS;EACT,UAAU;GACR;IAAE,MAAM;IAAoC,WAAW;IAAM;GAC7D;IAAE,MAAM;IAAuB,WAAW;IAAM;GAChD;IAAE,MAAM;IAAe,WAAW;IAAM;GACxC;IAAE,MAAM;IAAe,WAAW;IAAM;GACxC;IAAE,MAAM;IAAgB,WAAW;IAAM;GACzC;IAAE,MAAM;IAAkB,WAAW;IAAM;GAC3C;IAAE,MAAM;IAA+B,WAAW;IAAM;GACxD;IAAE,MAAM;IAAe,WAAW;IAAM;GACzC;EACF;CACD,YAAY;EACV,IAAI;EACJ,OAAO;EACP,KAAK;EACL,SAAS;EACT,UAAU;GACR;IAAE,MAAM;IAAoC,WAAW;IAAM;GAC7D;IAAE,MAAM;IAAuB,WAAW;IAAM;GAChD;IAAE,MAAM;IAAe,WAAW;IAAM;GACxC;IAAE,MAAM;IAAe,WAAW;IAAM;GACxC;IAAE,MAAM;IAAgB,WAAW;IAAM;GACzC;IAAE,MAAM;IAAkB,WAAW;IAAM;GAC3C;IAAE,MAAM;IAA+B,WAAW;IAAM;GACxD;IAAE,MAAM;IAAmB,WAAW;IAAM;GAC5C;IAAE,MAAM;IAAe,WAAW;IAAM;GACzC;EACF;CACD,cAAc;EACZ,IAAI;EACJ,OAAO;EACP,KAAK;EACL,SAAS;EACT,UAAU;GACR;IAAE,MAAM;IAAoC,WAAW;IAAM;GAC7D;IAAE,MAAM;IAAuB,WAAW;IAAM;GAChD;IAAE,MAAM;IAAe,WAAW;IAAM;GACxC;IAAE,MAAM;IAAe,WAAW;IAAM;GACxC;IAAE,MAAM;IAAgB,WAAW;IAAO;GAC1C;IAAE,MAAM;IAAkB,WAAW;IAAO;GAC5C;IAAE,MAAM;IAA+B,WAAW;IAAO;GACzD;IAAE,MAAM;IAAmB,WAAW;IAAO;GAC7C;IAAE,MAAM;IAAe,WAAW;IAAO;GAC1C;EACF;CACD,4BAA4B;EAC1B,IAAI;EACJ,OAAO;EACP,KAAK;EACL,SAAS;EACT,UAAU;GACR;IAAE,MAAM;IAA0B,WAAW;IAAM,eAAe;IAAM;GACxE;IAAE,MAAM;IAAqB,WAAW;IAAM;GAC9C;IAAE,MAAM;IAAuB,WAAW;IAAM;GAChD;IAAE,MAAM;IAA2B,WAAW;IAAM;GACpD;IAAE,MAAM;IAAuB,WAAW;IAAM;GAChD;IAAE,MAAM;IAAuB,WAAW;IAAM;GAChD;IAAE,MAAM;IAAgC,WAAW;IAAM;GACzD;IAAE,MAAM;IAAoB,WAAW;IAAM;GAC9C;EACF;CACF"}

package/dist/PlanCard/index.d.ts

@@ -19,4 +19,5 @@ interface PlanCardProps {
 }
 declare const PlanCard: React.FC<PlanCardProps>;
 //#endregion
-export { PlanCard, PlanCardProps };
+export { PlanCard, PlanCardProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/PlanCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/PlanCard/index.tsx"],"sourcesContent":[],"mappings":";;;;UA6GiB,aAAA;;EAAA,aAAA,CAAA,EAAa,OAAA;EAIlB,KAAA,EAAA,MAAA;EAE0B,QAAA,EAF1B,QAE0B;EAAZ,UAAA,EAAA,MAAA;EACN,QAAM,EAAA,CAAA,WAAA,EADA,WACA,CADY,gBACZ,CAAA,EAAA,GAAA,IAAA;EACd,OAAA,CAAA,EAAA,CAAA,KAAA,EADQ,KAAA,CAAM,UACd,EAAA,GAAA,IAAA;EAAQ,QAAA,EAAR,QAAQ;EAQP,aAoSZ,CAAA,EAAA,OApS+B;;;;;;cAAnB,UAAU,KAAA,CAAM,GAAG"}

package/dist/PlanCard/index.js

@@ -335,4 +335,5 @@ const PlanCard = ({ isSelected, price, currency, termMonths, onChange, onClick,
 };
 
 //#endregion
-export { PlanCard };
+export { PlanCard };
+//# sourceMappingURL=index.js.map

package/dist/PlanCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["PlanCard: React.FC<PlanCardProps>"],"sources":["../../src/PlanCard/index.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  Card,\n  FillButton,\n  FlexBox,\n  Radio,\n  Text,\n  TextButton,\n} from '@codecademy/gamut';\nimport {\n  CheckerDense,\n  DiagonalADense,\n  DiagonalARegular,\n  DotDense,\n} from '@codecademy/gamut-patterns';\nimport { Background, states, variant } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport React, { ChangeEvent, useCallback, useMemo } from 'react';\n\nimport { planDetails } from './consts';\nimport { PlanFeature } from './PlanFeature';\nimport { PopularBadge } from './PopularBadge';\nimport { PricingAmount } from './PricingAmount';\nimport { RecommendedBadge } from './RecommendedBadge';\nimport { Currency, PlanType } from './types';\n\nconst pricingBoxStates = states({\n  hasLongPrice: {\n    px: {\n      _: 24,\n      sm: 24,\n    },\n  },\n});\n\nconst pricingBoxVariants = variant({\n  base: {\n    alignItems: 'flex-start',\n    bg: 'background',\n    position: 'relative',\n    px: { _: 24, sm: 48 },\n    justifyContent: 'center',\n    py: 4,\n    minWidth: 100,\n  },\n  defaultVariant: 'default',\n  variants: {\n    default: {},\n    singlePlan: {\n      width: { _: '100%', sm: '30%' },\n      margin: 'auto',\n    },\n  },\n});\n\ntype PricingBoxProps = StyleProps<typeof pricingBoxStates> &\n  StyleProps<typeof pricingBoxVariants>;\n\nconst PricingBox = styled(FlexBox)<PricingBoxProps>(\n  pricingBoxVariants,\n  pricingBoxStates\n);\n\nconst StyledRadio = styled(Radio)`\n  pointer-events: none; // prevents the radio button from blocking clicks on the <label>\n  width: auto;\n\n  input + label {\n    padding: 0;\n  }\n`;\n\nconst StyledText = styled(Text)`\n  font-weight: 700;\n  font-size: 1rem;\n  font-family: inherit;\n`;\n\nconst StyledList = styled(FlexBox)`\n  padding-left: 0;\n  margin-bottom: 0;\n`.withComponent('ul');\n\nconst StyledFillButton = styled(FillButton)`\n  position: unset;\n  ::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n  :hover::after {\n    opacity: 0;\n  }\n`;\nconst StyledTextButton = styled(TextButton)`\n  position: unset;\n  ::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n  :hover::after {\n    opacity: 0;\n  }\n`;\nexport interface PlanCardProps {\n  isSelected: boolean;\n  isStudentPlan?: boolean;\n  price: string;\n  currency: Currency;\n  termMonths: number;\n  onChange: (changeEvent: ChangeEvent<HTMLInputElement>) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  planType: PlanType;\n  inUpsellModal?: boolean;\n  isMultiple?: boolean;\n  isIndiaUser?: boolean;\n  ctaHref?: string;\n  ctaLabel?: string;\n}\n\nexport const PlanCard: React.FC<PlanCardProps> = ({\n  isSelected,\n  price,\n  currency,\n  termMonths,\n  onChange,\n  onClick,\n  planType,\n  inUpsellModal,\n  isMultiple = true,\n  isStudentPlan = false,\n  isIndiaUser = false,\n  ctaHref,\n  ctaLabel,\n}) => {\n  const planDetail = isStudentPlan\n    ? planDetails['pro-student']\n    : planDetails[planType];\n  const hasLongPrice = Number(price) > 99;\n\n  const cardBorderSize =\n    inUpsellModal && planType === 'pro-gold' ? 3 : isSelected ? 2 : 1;\n\n  const filteredPlanFeatures = planDetail.features.filter(\n    (feature) => !(isIndiaUser && feature.name === 'Career services')\n  );\n\n  const selectPlan = useCallback(() => {\n    if (!isSelected) {\n      const syntheticEvent = {\n        target: { value: planType },\n        currentTarget: { value: planType },\n      } as ChangeEvent<HTMLInputElement>;\n      onChange(syntheticEvent);\n    }\n  }, [isSelected, planType, onChange]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        selectPlan();\n      }\n      if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {\n        e.preventDefault();\n      }\n    },\n    [selectPlan]\n  );\n\n  const handleCardClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (isMultiple) {\n        selectPlan();\n      }\n      if (onClick) {\n        onClick(e);\n      }\n    },\n    [isMultiple, onClick, selectPlan]\n  );\n\n  const cardStyle = useMemo(\n    () => ({ cursor: isMultiple ? 'pointer' : 'unset' }),\n    [isMultiple]\n  );\n\n  const label = useMemo(() => {\n    return (\n      <StyledText variant=\"title-xs\" ml={isMultiple ? 0 : 8} aria-hidden>\n        {planDetail.title}\n      </StyledText>\n    );\n  }, [planDetail.title, isMultiple]);\n\n  return (\n    <Card\n      key={planType}\n      isInteractive={isMultiple}\n      p={0}\n      borderWidth={cardBorderSize}\n      height={inUpsellModal ? '100%' : undefined}\n      borderRadius=\"md\"\n      role={isMultiple ? 'listitem' : undefined}\n      onClick={handleCardClick}\n      // eslint-disable-next-line gamut/no-inline-style\n      style={cardStyle}\n    >\n      {planDetail.title && (\n        <Text as=\"h3\" screenreader>\n          {planDetail.title}\n        </Text>\n      )}\n      {inUpsellModal ? (\n        <Text\n          as=\"h2\"\n          variant=\"title-xs\"\n          color=\"text-secondary\"\n          textAlign=\"center\"\n          fontFamily=\"accent\"\n          mt={24}\n        >\n          {planDetail.title}\n        </Text>\n      ) : (\n        <Background bg={isSelected ? planDetail?.variant : 'background'}>\n          <FlexBox\n            width=\"auto\"\n            flexDirection=\"row\"\n            alignItems={{\n              _: 'flex-start',\n              lg: 'center',\n            }}\n            justifyContent=\"space-between\"\n            px={16}\n            py={12}\n            borderBottom={isSelected ? 2 : 1}\n          >\n            <FlexBox alignItems=\"center\" whiteSpace=\"nowrap\">\n              {isMultiple && (\n                <StyledRadio\n                  name={`switch-${planType}`}\n                  htmlFor={`switch-${planType}`}\n                  value={planType}\n                  checked={isSelected}\n                  onChange={onChange}\n                  onKeyDown={handleKeyDown}\n                  role=\"switch\"\n                  tabIndex={0}\n                  aria-checked={isSelected}\n                  aria-label={planDetail.title}\n                  label={label}\n                />\n              )}\n              {!isMultiple && label}\n            </FlexBox>\n            <Badge variant=\"tertiary\" ml={{ _: 32, xs: 0, md: 32 }}>\n              {planDetail.tag}\n            </Badge>\n          </FlexBox>\n        </Background>\n      )}\n      <FlexBox\n        px={isMultiple ? 0 : 24}\n        flexDirection={\n          !isMultiple\n            ? { _: 'column', sm: 'row', md: 'column', lg: 'row' }\n            : 'column'\n        }\n      >\n        <FlexBox\n          position=\"relative\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          p={isMultiple ? 24 : { _: 24, sm: 0, md: 24, lg: 0 }}\n          pt={inUpsellModal ? 0 : undefined}\n          color=\"yellow\"\n        >\n          {isSelected && isMultiple && (\n            <DiagonalARegular\n              position=\"absolute\"\n              left={0}\n              top={0}\n              width=\"100%\"\n              height=\"100%\"\n            />\n          )}\n\n          <Box color=\"navy\" position=\"relative\">\n            {isSelected && isMultiple && (\n              <Box\n                position=\"absolute\"\n                top={4}\n                right={4}\n                color=\"yellow\"\n                width=\"100%\"\n                height=\"100%\"\n                bg=\"white\"\n                overflow=\"hidden\"\n              >\n                <DiagonalADense />\n              </Box>\n            )}\n            {price && (\n              <PricingBox\n                hasLongPrice={hasLongPrice}\n                variant={isMultiple ? 'default' : 'singlePlan'}\n              >\n                <PricingAmount\n                  termMonths={termMonths}\n                  price={price}\n                  product={planType}\n                  currency={currency}\n                  compact\n                  isMultiple={isMultiple}\n                  inUpsellModal={inUpsellModal}\n                />\n              </PricingBox>\n            )}\n          </Box>\n        </FlexBox>\n        {!isSelected && (\n          <Box height=\"1px\" mx={16} overflow=\"hidden\">\n            <DotDense height=\"auto\" />\n          </Box>\n        )}\n        {!isMultiple && (\n          <Box\n            height=\"1px\"\n            mx={40}\n            overflow=\"hidden\"\n            display={{ _: 'block', sm: 'none', md: 'block', lg: 'none' }}\n          >\n            <CheckerDense height=\"auto\" />\n          </Box>\n        )}\n        <FlexBox\n          justifyContent=\"center\"\n          alignContent={isMultiple ? 'flex-start' : 'unset'}\n          alignItems=\"center\"\n          position=\"relative\"\n          px={isMultiple ? 24 : { _: 40, sm: 0 }}\n          py={24}\n          m=\"auto\"\n          flexDirection=\"column\"\n          flexWrap=\"wrap\"\n          flexGrow={isMultiple ? 1 : { _: 1, sm: 'unset' }}\n          width={\n            isMultiple ? 'auto' : { _: '100%', sm: '65%', md: '85%', xl: '70%' }\n          }\n        >\n          {planType === 'pro-gold' && isMultiple && !inUpsellModal && (\n            <RecommendedBadge top={-14} />\n          )}\n          {planType === 'pro-gold' && isMultiple && inUpsellModal && (\n            <PopularBadge />\n          )}\n          <StyledList\n            flexDirection={{ _: 'column' }}\n            flexWrap={isMultiple ? 'unset' : { _: 'nowrap', xs: 'wrap' }}\n            maxHeight={\n              isMultiple\n                ? 'unset'\n                : {\n                    _: 'unset',\n                    md: 120,\n                    sm: 128,\n                    xs: 176,\n                  }\n            }\n            width={\n              isMultiple\n                ? 'unset'\n                : {\n                    _: 'unset',\n                    xs: '100%',\n                  }\n            }\n          >\n            {filteredPlanFeatures.map(\n              ({ name, available, isNew = false, isHighlighted = false }) => (\n                <PlanFeature\n                  key={name}\n                  feature={name}\n                  available={available}\n                  isNew={isNew}\n                  isHighlighted={isHighlighted}\n                  isMultiple={isMultiple}\n                />\n              )\n            )}\n          </StyledList>\n        </FlexBox>\n        {ctaLabel &&\n          (planType === 'pro-gold' ? (\n            <StyledFillButton href={ctaHref} onClick={onClick} m={24} mt={0}>\n              {ctaLabel}\n            </StyledFillButton>\n          ) : (\n            <StyledTextButton\n              variant=\"secondary\"\n              href={ctaHref}\n              onClick={onClick}\n              m={24}\n              mt={0}\n            >\n              {ctaLabel}\n            </StyledTextButton>\n          ))}\n      </FlexBox>\n    </Card>\n  );\n};\n"],"mappings":"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"}

package/dist/PlanCard/types.d.ts

@@ -40,4 +40,5 @@ declare enum Currency {
 declare const getCurrencySymbol: (currency: Currency) => CurrencySymbol;
 declare const getCurrencyPrefix: (currency: Currency) => "" | "AU" | "CA";
 //#endregion
-export { Currency, CurrencySymbol, PlanType, getCurrencyPrefix, getCurrencySymbol };
+export { Currency, CurrencySymbol, PlanType, getCurrencyPrefix, getCurrencySymbol };
+//# sourceMappingURL=types.d.ts.map

package/dist/PlanCard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/PlanCard/types.tsx"],"sourcesContent":[],"mappings":";KACY,QAAA;AAAA,aAOA,cAAA;EAAA,MAAA,GAAA,GAAA;EAkBA,KAAA,GAAA,QAAQ;EA0CP,IAAA,GAAA,QAAA;EAIA,KAAA,GAAA,QAAA;;;;;;;;;;;;;aA9CD,QAAA;;;;;;;;;;;;;;;;;;;;cA0CC,8BAA+B,aAAQ;cAIvC,8BAA+B"}

package/dist/PlanCard/types.js

@@ -68,4 +68,5 @@ const getCurrencyPrefix = (currency) => {
 };
 
 //#endregion
-export { Currency, CurrencySymbol, getCurrencyPrefix, getCurrencySymbol };
+export { Currency, CurrencySymbol, getCurrencyPrefix, getCurrencySymbol };
+//# sourceMappingURL=types.js.map

package/dist/PlanCard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["currencySymbols: Record<Currency, CurrencySymbol>"],"sources":["../../src/PlanCard/types.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-duplicate-enum-values */\nexport type PlanType =\n  | 'basic'\n  | 'pro'\n  | 'pro-silver'\n  | 'pro-gold'\n  | 'bootcamp-all-access-pass';\n\nexport enum CurrencySymbol {\n  DOLLAR = '$',\n  POUND = '£',\n  EURO = '€',\n  RUPEE = '₹',\n  KRONA = 'kr',\n  KRONE = 'kr',\n  ZLOTY = 'zł',\n  REAL = 'R$',\n  LEV = 'Лв.',\n  FRANC = 'Fr.',\n  KORUNA = 'Kč',\n  KUNA = 'kn',\n  FORINT = 'Ft',\n  PESO = '$',\n  LEU = 'L',\n}\n\nexport enum Currency {\n  USD = 'USD',\n  EUR = 'EUR',\n  CAD = 'CAD',\n  GBP = 'GBP',\n  AUD = 'AUD',\n  INR = 'INR',\n  SEK = 'SEK',\n  NOK = 'NOK',\n  PLN = 'PLN',\n  DKK = 'DKK',\n  BRL = 'BRL',\n  BGN = 'BGN',\n  CHF = 'CHF',\n  CZK = 'CZK',\n  HRK = 'HRK',\n  HUF = 'HUF',\n  MXN = 'MXN',\n  RON = 'RON',\n}\n\nconst currencySymbols: Record<Currency, CurrencySymbol> = {\n  [Currency.USD]: CurrencySymbol.DOLLAR,\n  [Currency.CAD]: CurrencySymbol.DOLLAR,\n  [Currency.AUD]: CurrencySymbol.DOLLAR,\n  [Currency.EUR]: CurrencySymbol.EURO,\n  [Currency.GBP]: CurrencySymbol.POUND,\n  [Currency.INR]: CurrencySymbol.RUPEE,\n  [Currency.SEK]: CurrencySymbol.KRONA,\n  [Currency.NOK]: CurrencySymbol.KRONE,\n  [Currency.PLN]: CurrencySymbol.ZLOTY,\n  [Currency.DKK]: CurrencySymbol.KRONE,\n  [Currency.BRL]: CurrencySymbol.REAL,\n  [Currency.BGN]: CurrencySymbol.LEV,\n  [Currency.CHF]: CurrencySymbol.FRANC,\n  [Currency.CZK]: CurrencySymbol.KORUNA,\n  [Currency.HRK]: CurrencySymbol.KUNA,\n  [Currency.HUF]: CurrencySymbol.FORINT,\n  [Currency.MXN]: CurrencySymbol.PESO,\n  [Currency.RON]: CurrencySymbol.LEU,\n};\n\nexport const getCurrencySymbol = (currency: Currency) =>\n  currencySymbols[currency];\n\n// for currencies that have common symbols eg: Dollar - US=$, AU=AU$, CA=CA$\nexport const getCurrencyPrefix = (currency: Currency) => {\n  switch (currency) {\n    case Currency.AUD:\n      return 'AU';\n    case Currency.CAD:\n      return 'CA';\n    default:\n      return '';\n  }\n};\n"],"mappings":";AAQA,IAAY,4DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,IAAY,gDAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,MAAMA,kBAAoD;EACvD,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;CAChC;AAED,MAAa,qBAAqB,aAChC,gBAAgB;AAGlB,MAAa,qBAAqB,aAAuB;AACvD,SAAQ,UAAR;EACE,KAAK,SAAS,IACZ,QAAO;EACT,KAAK,SAAS,IACZ,QAAO;EACT,QACE,QAAO"}

package/dist/PlanCardTeams/consts.js

@@ -18,4 +18,5 @@ const planDetails = {
 };
 
 //#endregion
-export { planDetails };
+export { planDetails };
+//# sourceMappingURL=consts.js.map

package/dist/PlanCardTeams/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":["planDetails: PlanDetails"],"sources":["../../src/PlanCardTeams/consts.ts"],"sourcesContent":["export type PlanDetails = {\n  id: string;\n  title: string;\n  tag: string;\n  tagForScreenReader: string;\n  price: number;\n  features: string[];\n};\n\nexport const planDetails: PlanDetails = {\n  id: 'teams',\n  title: 'Teams',\n  tag: 'Recommended for 2+',\n  tagForScreenReader: 'Recommended for 2 or more team members',\n  price: 299,\n  features: [\n    '600+ courses',\n    'Structured learning paths',\n    'Interactive lessons',\n    'Real-world projects',\n    'Unlimited seat transfer',\n    'Admin dashboard',\n    'Progress reports',\n    'Manage multiple training programs',\n  ],\n};\n"],"mappings":";AASA,MAAaA,cAA2B;CACtC,IAAI;CACJ,OAAO;CACP,KAAK;CACL,oBAAoB;CACpB,OAAO;CACP,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACF"}

package/dist/PlanCardTeams/index.d.ts

@@ -9,4 +9,5 @@ interface PlanCardTeamsProps {
 }
 declare const PlanCardTeams: React.FC<PlanCardTeamsProps>;
 //#endregion
-export { PlanCardTeams, PlanCardTeamsProps };
+export { PlanCardTeams, PlanCardTeamsProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/PlanCardTeams/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/PlanCardTeams/index.tsx"],"sourcesContent":[],"mappings":";;;;UAoGiB,kBAAA;YACL;EADK,KAAA,EAAA,MAAA;EAKJ,eAAA,CA+CZ,EAAA,OAAA;;cA/CY,eAAe,KAAA,CAAM,GAAG"}

package/dist/PlanCardTeams/index.js

@@ -134,4 +134,5 @@ const PlanCardTeams = ({ currency, price, isBusinessTrial = false }) => {
 };
 
 //#endregion
-export { PlanCardTeams };
+export { PlanCardTeams };
+//# sourceMappingURL=index.js.map

package/dist/PlanCardTeams/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["PriceDisplay: React.FC<PriceDisplayProps>","FeatureList: React.FC<{ features: PlanDetails['features'] }>","PlanCardTeams: React.FC<PlanCardTeamsProps>"],"sources":["../../src/PlanCardTeams/index.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  Card,\n  Column,\n  FlexBox,\n  LayoutGrid,\n  Text,\n} from '@codecademy/gamut';\nimport { CheckerDense } from '@codecademy/gamut-patterns';\nimport { Background } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\nimport { PlanFeature } from '../PlanCard/PlanFeature';\nimport { Currency, getCurrencySymbol } from '../PlanCard/types';\nimport { PlanDetails, planDetails } from './consts';\n\nconst StyledList = styled(FlexBox)`\n  padding-left: 0;\n  margin-bottom: 0;\n  gap: 20;\n`.withComponent('ul');\n\ninterface PriceDisplayProps {\n  currency: Currency;\n  price: string;\n  isBusinessTrial?: boolean;\n}\nconst PriceDisplay: React.FC<PriceDisplayProps> = ({\n  currency = Currency.USD,\n  price,\n  isBusinessTrial = false,\n}) => {\n  const currencySymbol = getCurrencySymbol(currency);\n  return (\n    <>\n      <FlexBox\n        mr={32}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        aria-atomic=\"true\"\n      >\n        {isBusinessTrial ? (\n          <Text variant=\"title-md\" ml={8} mt={16}>\n            Try Teams free for 14 days\n          </Text>\n        ) : (\n          <>\n            <Text variant=\"title-sm\">{currencySymbol}</Text>\n            <Text variant=\"title-lg\" ml={8}>\n              {price}\n            </Text>\n          </>\n        )}\n      </FlexBox>\n      <FlexBox\n        mr={32}\n        alignItems=\"flexStart\"\n        justifyContent=\"center\"\n        aria-atomic=\"true\"\n      >\n        {isBusinessTrial ? (\n          ''\n        ) : (\n          <Text color=\"text-secondary\">annually, per user</Text>\n        )}\n      </FlexBox>\n    </>\n  );\n};\n\nconst FeatureList: React.FC<{ features: PlanDetails['features'] }> = ({\n  features,\n}) => (\n  <StyledList\n    flexDirection={{ _: 'column' }}\n    flexWrap={{ _: 'nowrap', xs: 'wrap' }}\n    maxHeight={{\n      _: 'unset',\n      md: 120,\n      sm: 128,\n      xs: 176,\n    }}\n    width={{\n      _: 'unset',\n      xs: '100%',\n    }}\n  >\n    {features.map((feature) => (\n      <PlanFeature\n        key={feature}\n        feature={feature}\n        available\n        isMultiple={false}\n      />\n    ))}\n  </StyledList>\n);\n\nexport interface PlanCardTeamsProps {\n  currency: Currency;\n  price: string;\n  isBusinessTrial?: boolean;\n}\nexport const PlanCardTeams: React.FC<PlanCardTeamsProps> = ({\n  currency,\n  price,\n  isBusinessTrial = false,\n}) => {\n  const { title, tag, tagForScreenReader, features } = planDetails;\n\n  return (\n    <Card display=\"flex\" flexDirection=\"column\" p={0} data-testid=\"card\">\n      <Background\n        bg=\"navy\"\n        display=\"flex\"\n        justifyContent=\"space-between\"\n        px={16}\n        py={12}\n      >\n        <Text variant=\"title-xs\" as=\"p\">\n          {title}\n        </Text>\n        <Badge variant=\"tertiary\" ml={{ _: 32, xs: 0, md: 32 }}>\n          <Text aria-hidden>{tag}</Text>\n          <Text screenreader>{tagForScreenReader}</Text>\n        </Badge>\n      </Background>\n      <LayoutGrid px={40} py={24}>\n        <Column size={{ _: 12, lg: 4 }}>\n          <PriceDisplay\n            price={price}\n            currency={currency}\n            isBusinessTrial={isBusinessTrial}\n          />\n          <Box\n            height=\"1px\"\n            overflow=\"hidden\"\n            display={{ _: 'block', lg: 'none' }}\n            mb={24}\n            mt={16}\n          >\n            <CheckerDense height=\"auto\" />\n          </Box>\n        </Column>\n        <Column size={{ _: 12, lg: 8 }}>\n          <FeatureList features={features} />\n        </Column>\n      </LayoutGrid>\n    </Card>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,aAAa,OAAO,QAAQ;;;;EAIhC,cAAc,KAAK;AAOrB,MAAMA,gBAA6C,EACjD,WAAW,SAAS,KACpB,OACA,kBAAkB,YACd;CACJ,MAAM,iBAAiB,kBAAkB,SAAS;AAClD,QACE,4CACE,oBAAC;EACC,IAAI;EACJ,YAAW;EACX,gBAAe;EACf,eAAY;YAEX,kBACC,oBAAC;GAAK,SAAQ;GAAW,IAAI;GAAG,IAAI;aAAI;IAEjC,GAEP,4CACE,oBAAC;GAAK,SAAQ;aAAY;IAAsB,EAChD,oBAAC;GAAK,SAAQ;GAAW,IAAI;aAC1B;IACI,IACN;GAEG,EACV,oBAAC;EACC,IAAI;EACJ,YAAW;EACX,gBAAe;EACf,eAAY;YAEX,kBACC,KAEA,oBAAC;GAAK,OAAM;aAAiB;IAAyB;GAEhD,IACT;;AAIP,MAAMC,eAAgE,EACpE,eAEA,oBAAC;CACC,eAAe,EAAE,GAAG,UAAU;CAC9B,UAAU;EAAE,GAAG;EAAU,IAAI;EAAQ;CACrC,WAAW;EACT,GAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,OAAO;EACL,GAAG;EACH,IAAI;EACL;WAEA,SAAS,KAAK,YACb,oBAAC;EAEU;EACT;EACA,YAAY;IAHP,QAIL,CACF;EACS;AAQf,MAAaC,iBAA+C,EAC1D,UACA,OACA,kBAAkB,YACd;CACJ,MAAM,EAAE,OAAO,KAAK,oBAAoB,aAAa;AAErD,QACE,qBAAC;EAAK,SAAQ;EAAO,eAAc;EAAS,GAAG;EAAG,eAAY;aAC5D,qBAAC;GACC,IAAG;GACH,SAAQ;GACR,gBAAe;GACf,IAAI;GACJ,IAAI;cAEJ,oBAAC;IAAK,SAAQ;IAAW,IAAG;cACzB;KACI,EACP,qBAAC;IAAM,SAAQ;IAAW,IAAI;KAAE,GAAG;KAAI,IAAI;KAAG,IAAI;KAAI;eACpD,oBAAC;KAAK;eAAa;MAAW,EAC9B,oBAAC;KAAK;eAAc;MAA0B;KACxC;IACG,EACb,qBAAC;GAAW,IAAI;GAAI,IAAI;cACtB,qBAAC;IAAO,MAAM;KAAE,GAAG;KAAI,IAAI;KAAG;eAC5B,oBAAC;KACQ;KACG;KACO;MACjB,EACF,oBAAC;KACC,QAAO;KACP,UAAS;KACT,SAAS;MAAE,GAAG;MAAS,IAAI;MAAQ;KACnC,IAAI;KACJ,IAAI;eAEJ,oBAAC,gBAAa,QAAO,SAAS;MAC1B;KACC,EACT,oBAAC;IAAO,MAAM;KAAE,GAAG;KAAI,IAAI;KAAG;cAC5B,oBAAC,eAAsB,WAAY;KAC5B;IACE;GACR"}

package/dist/PricingSection/ConditionalColorMode.js

@@ -10,4 +10,5 @@ const ConditionalColorMode = ({ condition, children }) => {
 };
 
 //#endregion
-export { ConditionalColorMode };
+export { ConditionalColorMode };
+//# sourceMappingURL=ConditionalColorMode.js.map

package/dist/PricingSection/ConditionalColorMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalColorMode.js","names":["ConditionalColorMode: React.FC<{\n  condition: boolean;\n  children: React.ReactNode;\n}>"],"sources":["../../src/PricingSection/ConditionalColorMode.tsx"],"sourcesContent":["import { ColorMode } from '@codecademy/gamut-styles';\n\nexport const ConditionalColorMode: React.FC<{\n  condition: boolean;\n  children: React.ReactNode;\n}> = ({ condition, children }) => {\n  return condition ? (\n    <ColorMode mode=\"dark\">{children}</ColorMode>\n  ) : (\n    <>{children}</>\n  );\n};\n"],"mappings":";;;;AAEA,MAAaA,wBAGP,EAAE,WAAW,eAAe;AAChC,QAAO,YACL,oBAAC;EAAU,MAAK;EAAQ;GAAqB,GAE7C,gCAAG,WAAY"}

package/dist/PricingSection/PricingCard/PricingAmount.js

@@ -116,4 +116,5 @@ const PricingAmount = ({ currency, monthlyPrice, product, price, termMonths, com
 };
 
 //#endregion
-export { PricingAmount };
+export { PricingAmount };
+//# sourceMappingURL=PricingAmount.js.map

package/dist/PricingSection/PricingCard/PricingAmount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingAmount.js","names":["PricingAmount: React.FC<PricingAmountProps>"],"sources":["../../../src/PricingSection/PricingCard/PricingAmount.tsx"],"sourcesContent":["import { FlexBox, HiddenText, Text } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\nimport { Product } from '../types';\nimport { AllCurrency, getCurrencySymbol } from './types';\n\nconst Amount = styled(Text)`\n  font-weight: bold;\n  color: black;\n  font-size: 44px;\n  line-height: 64px;\n  ${theme.breakpoints.xl} {\n    font-size: 64px;\n    line-height: 80px;\n  }\n`;\n\ntype PricingAmountProps = {\n  product: Product;\n  price: string;\n  monthlyPrice?: string;\n  currency: AllCurrency;\n  termMonths?: number;\n  compact?: boolean;\n  isUserInIndia: boolean;\n};\n\nexport const PricingAmount: React.FC<PricingAmountProps> = ({\n  currency,\n  monthlyPrice,\n  product,\n  price,\n  termMonths,\n  compact = false,\n  isUserInIndia,\n}) => {\n  const isTeams = product === Product.Teams;\n\n  const cycle = termMonths === 1 ? 'monthly' : 'annually';\n  const [dollars, cents] = price.split('.');\n  let ariaLabel = `${getCurrencySymbol(currency)}${dollars}${\n    cents ? `.${cents}` : ''\n  }`;\n  if (product !== Product.Basic) {\n    ariaLabel += ` a month, billed ${cycle}`;\n    if (monthlyPrice) {\n      ariaLabel += ` or ${getCurrencySymbol(\n        currency\n      )}${monthlyPrice} billed monthly`;\n    }\n  }\n  if (isTeams) {\n    ariaLabel += ', per user. Discounts available for eligible teams';\n  }\n\n  return (\n    <>\n      <FlexBox\n        data-testid=\"pricing-amount\"\n        lineHeight=\"title\"\n        mb={compact ? 0 : 8}\n        column\n        alignItems=\"center\"\n      >\n        <HiddenText data-testid=\"pricing-amount-label\">{ariaLabel}</HiddenText>\n        {/* for screen reader optimization */}\n        <FlexBox\n          aria-hidden\n          row\n          alignItems=\"center\"\n          height={{ _: 50, xl: 'unset' }}\n        >\n          <FlexBox mr={4} alignItems=\"start\">\n            <Text\n              mt={{ _: 12, xl: 16 }}\n              fontWeight=\"bold\"\n              fontSize={34}\n            >{`${getCurrencySymbol(currency)}`}</Text>\n            <Amount>{`${dollars}`}</Amount>\n            {product === Product.Basic ? null : (\n              <FlexBox column alignItems=\"flex-end\" ml={4}>\n                <Text fontWeight=\"bold\" fontSize={22} mt={{ _: 12, xl: 16 }}>\n                  {cents ? `.${cents}` : <span>&nbsp;</span>}\n                </Text>\n                <Text mt={{ _: 0, xl: 4 }} color=\"navy-500\">\n                  /mo\n                </Text>\n              </FlexBox>\n            )}\n          </FlexBox>\n        </FlexBox>\n        <Text color=\"navy-500\" center mt={compact ? 0 : { _: 8, xl: 0 }}>\n          {product === Product.Basic ? (\n            <Text mb={24}>Always free</Text>\n          ) : (\n            <>\n              <Text mb={compact ? 0 : 8} aria-hidden>\n                {isTeams\n                  ? 'Per user, billed annually'\n                  : isUserInIndia\n                  ? `Per month, paid ${cycle}`\n                  : `Billed ${cycle}`}\n              </Text>\n              <br />\n              {monthlyPrice && (\n                <Text aria-hidden>\n                  {`or ${getCurrencySymbol(currency)}${monthlyPrice} ${\n                    isUserInIndia ? 'paid' : 'billed'\n                  } monthly`}\n                </Text>\n              )}\n              {isTeams && (\n                <Text aria-hidden>Discounts available for eligible teams</Text>\n              )}\n            </>\n          )}\n        </Text>\n      </FlexBox>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,SAAS,OAAO,KAAK;;;;;IAKvB,MAAM,YAAY,GAAG;;;;;AAgBzB,MAAaA,iBAA+C,EAC1D,UACA,cACA,SACA,OACA,YACA,UAAU,OACV,oBACI;CACJ,MAAM,UAAU,YAAY,QAAQ;CAEpC,MAAM,QAAQ,eAAe,IAAI,YAAY;CAC7C,MAAM,CAAC,SAAS,SAAS,MAAM,MAAM,IAAI;CACzC,IAAI,YAAY,GAAG,kBAAkB,SAAS,GAAG,UAC/C,QAAQ,IAAI,UAAU;AAExB,KAAI,YAAY,QAAQ,OAAO;AAC7B,eAAa,oBAAoB;AACjC,MAAI,aACF,cAAa,OAAO,kBAClB,SACD,GAAG,aAAa;;AAGrB,KAAI,QACF,cAAa;AAGf,QACE,0CACE,qBAAC;EACC,eAAY;EACZ,YAAW;EACX,IAAI,UAAU,IAAI;EAClB;EACA,YAAW;;GAEX,oBAAC;IAAW,eAAY;cAAwB;KAAuB;GAEvE,oBAAC;IACC;IACA;IACA,YAAW;IACX,QAAQ;KAAE,GAAG;KAAI,IAAI;KAAS;cAE9B,qBAAC;KAAQ,IAAI;KAAG,YAAW;;MACzB,oBAAC;OACC,IAAI;QAAE,GAAG;QAAI,IAAI;QAAI;OACrB,YAAW;OACX,UAAU;iBACV,GAAG,kBAAkB,SAAS;QAAU;MAC1C,oBAAC,oBAAQ,GAAG,YAAmB;MAC9B,YAAY,QAAQ,QAAQ,OAC3B,qBAAC;OAAQ;OAAO,YAAW;OAAW,IAAI;kBACxC,oBAAC;QAAK,YAAW;QAAO,UAAU;QAAI,IAAI;SAAE,GAAG;SAAI,IAAI;SAAI;kBACxD,QAAQ,IAAI,UAAU,oBAAC,oBAAK,SAAa;SACrC,EACP,oBAAC;QAAK,IAAI;SAAE,GAAG;SAAG,IAAI;SAAG;QAAE,OAAM;kBAAW;SAErC;QACC;;MAEJ;KACF;GACV,oBAAC;IAAK,OAAM;IAAW;IAAO,IAAI,UAAU,IAAI;KAAE,GAAG;KAAG,IAAI;KAAG;cAC5D,YAAY,QAAQ,QACnB,oBAAC;KAAK,IAAI;eAAI;MAAkB,GAEhC;KACE,oBAAC;MAAK,IAAI,UAAU,IAAI;MAAG;gBACxB,UACG,8BACA,gBACA,mBAAmB,UACnB,UAAU;OACT;KACP,oBAAC,SAAK;KACL,gBACC,oBAAC;MAAK;gBACH,MAAM,kBAAkB,SAAS,GAAG,aAAa,GAChD,gBAAgB,SAAS,SAC1B;OACI;KAER,WACC,oBAAC;MAAK;gBAAY;OAA6C;QAEhE;KAEA;;GACC,GACT"}

package/dist/PricingSection/PricingCard/RecommendedBadge.js

@@ -26,4 +26,5 @@ const RecommendedBadge = (props) => /* @__PURE__ */ jsxs(FlexBox, {
 });
 
 //#endregion
-export { RecommendedBadge };
+export { RecommendedBadge };
+//# sourceMappingURL=RecommendedBadge.js.map

package/dist/PricingSection/PricingCard/RecommendedBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendedBadge.js","names":["RecommendedBadge: React.FC<ComponentProps<typeof FlexBox>>"],"sources":["../../../src/PricingSection/PricingCard/RecommendedBadge.tsx"],"sourcesContent":["import { FlexBox, Text } from '@codecademy/gamut';\nimport { MiniStarIcon } from '@codecademy/gamut-icons';\nimport { ComponentProps } from 'react';\n\nexport const RecommendedBadge: React.FC<ComponentProps<typeof FlexBox>> = (\n  props\n) => (\n  <FlexBox\n    position=\"absolute\"\n    top={-28}\n    left={-2}\n    bg=\"navy\"\n    color=\"white\"\n    p={8}\n    borderRadiusTop=\"sm\"\n    borderRadiusBottom=\"none\"\n    center\n    {...props}\n  >\n    <MiniStarIcon mr={8} size={12} />\n    <Text fontFamily=\"accent\" lineHeight={0} fontSize={14}>\n      Recommended\n    </Text>\n  </FlexBox>\n);\n"],"mappings":";;;;;AAIA,MAAaA,oBACX,UAEA,qBAAC;CACC,UAAS;CACT,KAAK;CACL,MAAM;CACN,IAAG;CACH,OAAM;CACN,GAAG;CACH,iBAAgB;CAChB,oBAAmB;CACnB;CACA,GAAI;YAEJ,oBAAC;EAAa,IAAI;EAAG,MAAM;GAAM,EACjC,oBAAC;EAAK,YAAW;EAAS,YAAY;EAAG,UAAU;YAAI;GAEhD;EACC"}

package/dist/PricingSection/PricingCard/index.js

@@ -171,4 +171,5 @@ const PricingCard = ({ product, productDetails, currency, plansByType, isUserInI
 };
 
 //#endregion
-export { PricingCard };
+export { PricingCard };
+//# sourceMappingURL=index.js.map

package/dist/PricingSection/PricingCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/PricingSection/PricingCard/index.tsx"],"sourcesContent":["import { Badge, Box, Card, FlexBox, Text } from '@codecademy/gamut';\nimport { CheckerDense } from '@codecademy/gamut-patterns';\nimport { css, pxRem, theme, variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { ConditionalColorMode } from '../ConditionalColorMode';\nimport { getProductDescription, PlansByType } from '../config';\nimport { ProductCTA } from '../ProductCTA';\nimport { Product, ProductDetails, User } from '../types';\nimport { PricingAmount } from './PricingAmount';\nimport { RecommendedBadge } from './RecommendedBadge';\nimport { AllCurrency } from './types';\n\nexport const smSize = 728;\n\nconst StyledCard = styled(Card)(\n  css({\n    height: 1,\n    borderWidth: 0,\n    padding: 0,\n    width: '100%',\n    flexDirection: 'column',\n  })\n);\n\nconst Divider = styled(CheckerDense)(\n  css({\n    height: '0.1rem',\n  })\n);\n\ntype StyledListRowProps = {\n  showRecommendedBadge: boolean;\n};\n\nconst StyledListRow = styled('li')<StyledListRowProps>`\n  width: 100%;\n  max-width: ${pxRem(smSize)};\n  height: 100%;\n  display: grid;\n  ${theme.breakpoints.lg} {\n    min-width: 36rem;\n  }\n`;\n\nconst cardHeaderVariants = variant({\n  base: {\n    backgroundColor: 'transparent',\n  },\n  variants: {\n    [Product.Basic]: {\n      borderBottomWidth: 1,\n      borderBottomStyle: 'solid',\n      borderBottomColor: theme.colors['navy-200'],\n      color: 'navy-500',\n    },\n    [Product.Enterprise]: {\n      borderBottomWidth: 1,\n      borderBottomStyle: 'solid',\n      borderBottomColor: theme.colors['navy-200'],\n      color: 'navy-500',\n    },\n    [Product.Silver]: {\n      backgroundColor: theme.colors.paleYellow,\n    },\n    [Product.Gold]: {\n      backgroundColor: theme.colors.yellow,\n    },\n    [Product.Pro]: {\n      backgroundColor: theme.colors.yellow,\n    },\n    [Product.Teams]: {\n      backgroundColor: theme.colors.background,\n    },\n  },\n});\n\nconst CardHeader = styled(FlexBox)(cardHeaderVariants);\n\nconst getBadgeText = (product: Product): string | null => {\n  switch (product) {\n    case Product.Gold:\n      return 'Advance your career';\n    case Product.Silver:\n    case Product.Pro:\n      return 'Learn a skill';\n    case Product.Teams:\n      return 'Recommended for 2+';\n    case Product.Enterprise:\n      return 'Recommended for 25+';\n    default:\n      return null;\n  }\n};\n\nconst renderProductDescription = (product: Product) => {\n  const productFeatures = (\n    <Text maxWidth={{ md: '235px' }} textAlign=\"center\">\n      {getProductDescription(product)}\n    </Text>\n  );\n\n  return (\n    <FlexBox mt={8} alignItems=\"center\" flexDirection=\"column\">\n      {productFeatures}\n    </FlexBox>\n  );\n};\n\nexport const PricingCard = ({\n  product,\n  productDetails,\n  currency,\n  plansByType,\n  isUserInIndia,\n  user,\n  trackBusinessClick,\n}: {\n  product: Product;\n  productDetails: ProductDetails;\n  currency: AllCurrency;\n  plansByType: PlansByType;\n  isUserInIndia: boolean;\n  user: User;\n  trackBusinessClick?: ({\n    target,\n    context,\n  }: {\n    target: string;\n    context: string;\n  }) => void;\n}) => {\n  const isGoldProduct = product === Product.Gold;\n  const isTeamsProduct = product === Product.Teams;\n\n  return (\n    <StyledListRow showRecommendedBadge={product === Product.Gold}>\n      <StyledCard display=\"flex\" shadow=\"patternLeft\">\n        {isGoldProduct && <RecommendedBadge />}\n        <ConditionalColorMode condition={isTeamsProduct}>\n          <CardHeader\n            variant={product}\n            py={8}\n            px={24}\n            alignItems=\"center\"\n            justifyContent=\"space-between\"\n          >\n            <Text as=\"h2\" fontSize={{ _: 22, xl: 26 }}>\n              {plansByType[product].monthly?.displayName ||\n                plansByType[product].annual?.displayName}\n            </Text>\n            {isGoldProduct && <Text screenreader>Recommended</Text>}\n            {getBadgeText(product) && (\n              <Badge variant=\"tertiary\" ml={12}>\n                {getBadgeText(product)}\n              </Badge>\n            )}\n          </CardHeader>\n        </ConditionalColorMode>\n\n        <Box px={24} pt={24}>\n          <FlexBox center alignItems=\"flex-start\">\n            {product === Product.Enterprise ? (\n              <FlexBox\n                column\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                minHeight={134}\n              >\n                <Text color=\"text-secondary\" mb={8} textAlign=\"center\">\n                  Looking to train a larger team?\n                </Text>\n                <Text variant=\"title-lg\" textAlign=\"center\">\n                  Contact us for a custom quote\n                </Text>\n              </FlexBox>\n            ) : (\n              <PricingAmount\n                monthlyPrice={plansByType[product].monthly?.price}\n                price={productDetails.price}\n                product={product}\n                currency={currency}\n                isUserInIndia={isUserInIndia}\n              />\n            )}\n          </FlexBox>\n\n          <FlexBox column alignItems=\"center\">\n            <Divider mt={16} />\n            <FlexBox\n              flexDirection=\"column\"\n              my={12}\n              /**\n               * Previously we were arbitrarily sizing cards to a width that was\n               * \"too small\" for the content they contained. The actual affect this was\n               * having was shrinking this section down to 256px, so rather than size\n               * the card, I'm opting to size this particular container w/i.\n               * This allows the cards themselves to be more flexible and simply styled\n               * while still maintaining the \"proper size\" on smaller screens.\n               */\n              width={{ _: 'unset', md: pxRem(256) }}\n            >\n              {renderProductDescription(product)}\n            </FlexBox>\n          </FlexBox>\n        </Box>\n        <FlexBox mb={24} mt=\"auto\" column>\n          <ProductCTA\n            user={user}\n            productDetails={productDetails}\n            product={product}\n            trackBusinessClick={trackBusinessClick}\n          />\n        </FlexBox>\n      </StyledCard>\n    </StyledListRow>\n  );\n};\n"],"mappings":"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"}

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

@@ -23,4 +23,5 @@ declare enum CFBCurrency {
 }
 type AllCurrency = Currency | CFBCurrency;
 //#endregion
-export { AllCurrency };
+export { AllCurrency };
+//# sourceMappingURL=types.d.ts.map

package/dist/PricingSection/PricingCard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/PricingSection/PricingCard/types.ts"],"sourcesContent":[],"mappings":";aACY,QAAA;EAAA,GAAA,GAAA,KAAQ;EAYR,GAAA,GAAA,KAAA;EA6BA,GAAA,GAAA,KAAA;;;;;;;;aA7BA,WAAA;;;;;;;;;;;KA6BA,WAAA,GAAc,WAAW"}

package/dist/PricingSection/PricingCard/types.js

@@ -63,4 +63,5 @@ const currencySymbols = {
 const getCurrencySymbol = (currency) => currencySymbols[currency];
 
 //#endregion
-export { getCurrencySymbol };
+export { getCurrencySymbol };
+//# sourceMappingURL=types.js.map

package/dist/PricingSection/PricingCard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["currencySymbols: Record<AllCurrency, CurrencySymbol>"],"sources":["../../../src/PricingSection/PricingCard/types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-duplicate-enum-values */\nexport enum Currency {\n  Aud = 'AUD',\n  Cad = 'CAD',\n  Eur = 'EUR',\n  Gbp = 'GBP',\n  Inr = 'INR',\n  Nok = 'NOK',\n  Pln = 'PLN',\n  Sek = 'SEK',\n  Usd = 'USD',\n}\n\nexport enum CFBCurrency {\n  Dkk = 'DKK',\n  Brl = 'BRL',\n  Bgn = 'BGN',\n  Chf = 'CHF',\n  Czk = 'CZK',\n  Hrk = 'HRK',\n  Huf = 'HUF',\n  Mxn = 'MXN',\n  Ron = 'RON',\n}\n\nexport enum CurrencySymbol {\n  Dollar = '$',\n  Pound = '£',\n  Euro = '€',\n  Rupee = '₹',\n  Krona = 'kr',\n  Krone = 'kr',\n  ZLOTY = 'zł',\n  Lev = 'Лв.',\n  Real = 'R$',\n  Franc = 'Fr.',\n  Koruna = 'Kč',\n  Kuna = 'kn',\n  Forint = 'Ft',\n  Leu = 'lei',\n}\n\nexport type AllCurrency = Currency | CFBCurrency;\n\nconst currencySymbols: Record<AllCurrency, CurrencySymbol> = {\n  [Currency.Usd]: CurrencySymbol.Dollar,\n  [Currency.Cad]: CurrencySymbol.Dollar,\n  [Currency.Aud]: CurrencySymbol.Dollar,\n  [Currency.Eur]: CurrencySymbol.Euro,\n  [Currency.Gbp]: CurrencySymbol.Pound,\n  [Currency.Inr]: CurrencySymbol.Rupee,\n  [Currency.Sek]: CurrencySymbol.Krona,\n  [Currency.Nok]: CurrencySymbol.Krone,\n  [Currency.Pln]: CurrencySymbol.ZLOTY,\n  [CFBCurrency.Bgn]: CurrencySymbol.Lev,\n  [CFBCurrency.Brl]: CurrencySymbol.Real,\n  [CFBCurrency.Chf]: CurrencySymbol.Franc,\n  [CFBCurrency.Czk]: CurrencySymbol.Koruna,\n  [CFBCurrency.Dkk]: CurrencySymbol.Krone,\n  [CFBCurrency.Hrk]: CurrencySymbol.Kuna,\n  [CFBCurrency.Huf]: CurrencySymbol.Forint,\n  [CFBCurrency.Mxn]: CurrencySymbol.Dollar,\n  [CFBCurrency.Ron]: CurrencySymbol.Leu,\n};\n\nexport const getCurrencySymbol = (currency: AllCurrency) =>\n  currencySymbols[currency];\n"],"mappings":";AACA,IAAY,gDAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,IAAY,sDAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,IAAY,4DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAKF,MAAMA,kBAAuD;EAC1D,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,SAAS,MAAM,eAAe;EAC9B,YAAY,MAAM,eAAe;EACjC,YAAY,MAAM,eAAe;EACjC,YAAY,MAAM,eAAe;EACjC,YAAY,MAAM,eAAe;EACjC,YAAY,MAAM,eAAe;EACjC,YAAY,MAAM,eAAe;EACjC,YAAY,MAAM,eAAe;EACjC,YAAY,MAAM,eAAe;EACjC,YAAY,MAAM,eAAe;CACnC;AAED,MAAa,qBAAqB,aAChC,gBAAgB"}

package/dist/PricingSection/ProductCTA.js

@@ -102,4 +102,5 @@ const ProductCTA = ({ product, productDetails, user, simple, trackBusinessClick
 };
 
 //#endregion
-export { ProductCTA };
+export { ProductCTA };
+//# sourceMappingURL=ProductCTA.js.map

package/dist/PricingSection/ProductCTA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCTA.js","names":[],"sources":["../../src/PricingSection/ProductCTA.tsx"],"sourcesContent":["import {\n  Box,\n  FillButton,\n  FlexBox,\n  StrokeButton,\n  Text,\n} from '@codecademy/gamut';\n\nimport { Product, ProductDetails, User } from './types';\n\nexport const getCTATitle = (\n  product: Product,\n  isTrialPlan: boolean,\n  isPlusUser?: boolean\n) => {\n  switch (product) {\n    case Product.Teams:\n      if (isTrialPlan) {\n        return 'Try Teams for free';\n      }\n      return 'Purchase now';\n    case Product.Enterprise:\n      return 'Request a demo';\n    case Product.Basic:\n      return 'Sign up';\n    case Product.Pro:\n    case Product.Gold:\n      if (isTrialPlan) {\n        return 'Try Pro for free';\n      }\n      if (isPlusUser) return 'Upgrade to Pro';\n      return 'Upgrade now';\n    case Product.Silver:\n      if (isTrialPlan) {\n        return 'Try Plus for free';\n      }\n      if (isPlusUser) return 'Your current plan';\n      return 'Upgrade now';\n    default:\n      return '';\n  }\n};\n\nconst getCTAUrl = ({\n  product,\n  productDetails,\n  userHasSilver,\n}: {\n  productDetails: ProductDetails;\n  product: Product;\n  userHasSilver?: boolean;\n}) => {\n  const planId = productDetails?.planId;\n\n  switch (product) {\n    case Product.Basic:\n      return '/register';\n    case Product.Pro:\n    case Product.Silver:\n    case Product.Gold:\n      if (userHasSilver) {\n        return '/account/billing?changePlan=true';\n      }\n      return `/checkout?plan_id=${planId || undefined}`;\n    case Product.Teams:\n      return '/business/checkout?plan_type=trial';\n    case Product.Enterprise:\n      return '/business/teams-quote';\n    default:\n      return '';\n  }\n};\n\nexport const ProductCTA = ({\n  product,\n  productDetails,\n  user,\n  simple,\n  trackBusinessClick,\n}: {\n  product: Product;\n  productDetails: ProductDetails;\n  user: User;\n  simple?: boolean;\n  trackBusinessClick?: ({\n    target,\n    context,\n  }: {\n    target: string;\n    context: string;\n  }) => void;\n}) => {\n  const userHasBasic = !user.anonymous && (!user.proSilver || !user.proGold);\n  const userHasSilver = user.proSilver;\n  const isTeams = product === Product.Teams;\n  const isEnterprise = product === Product.Enterprise;\n\n  const shouldHideCTA = () => {\n    if (isTeams) return false;\n    if ((userHasBasic || userHasSilver) && product === Product.Basic) {\n      return true;\n    }\n    if (userHasSilver) return false;\n    if (user.proGold) return true;\n    return false;\n  };\n  const hideCTAButton = shouldHideCTA();\n\n  const ButtonComponent =\n    product === Product.Gold ||\n    product === Product.Pro ||\n    product === Product.Teams\n      ? FillButton\n      : StrokeButton;\n\n  return hideCTAButton ? null : (\n    <Box\n      pt={0}\n      display=\"flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      flexDirection={isTeams && !simple ? 'row' : 'column'}\n      gap={8}\n    >\n      <ButtonComponent\n        mt={8}\n        disabled={product === Product.Silver && userHasSilver}\n        href={getCTAUrl({\n          productDetails,\n          product,\n          userHasSilver,\n        })}\n        onClick={() => {\n          if (trackBusinessClick) {\n            if (isTeams) {\n              trackBusinessClick({\n                target: 'business_trial',\n                context: 'top_card',\n              });\n            }\n            if (isEnterprise) {\n              trackBusinessClick({\n                target: 'business_enterprise',\n                context: 'top_card',\n              });\n            }\n          }\n        }}\n      >\n        <Text as=\"span\">\n          {getCTATitle(product, !!productDetails?.isTrialPlan, userHasSilver)}\n        </Text>\n      </ButtonComponent>\n      {isTeams ? (\n        <>\n          {simple ? null : (\n            <Text as=\"span\" mt={8}>\n              {` or `}\n            </Text>\n          )}\n          <FlexBox mt={8}>\n            <StrokeButton\n              href=\"/business/checkout?plan_type=directpurchase\"\n              onClick={() => {\n                if (trackBusinessClick) {\n                  trackBusinessClick({\n                    target: 'business_purchase',\n                    context: 'top_card',\n                  });\n                }\n              }}\n            >\n              Purchase now\n            </StrokeButton>\n          </FlexBox>\n        </>\n      ) : null}\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAUA,MAAa,eACX,SACA,aACA,eACG;AACH,SAAQ,SAAR;EACE,KAAK,QAAQ;AACX,OAAI,YACF,QAAO;AAET,UAAO;EACT,KAAK,QAAQ,WACX,QAAO;EACT,KAAK,QAAQ,MACX,QAAO;EACT,KAAK,QAAQ;EACb,KAAK,QAAQ;AACX,OAAI,YACF,QAAO;AAET,OAAI,WAAY,QAAO;AACvB,UAAO;EACT,KAAK,QAAQ;AACX,OAAI,YACF,QAAO;AAET,OAAI,WAAY,QAAO;AACvB,UAAO;EACT,QACE,QAAO;;;AAIb,MAAM,aAAa,EACjB,SACA,gBACA,oBAKI;CACJ,MAAM,SAAS,gBAAgB;AAE/B,SAAQ,SAAR;EACE,KAAK,QAAQ,MACX,QAAO;EACT,KAAK,QAAQ;EACb,KAAK,QAAQ;EACb,KAAK,QAAQ;AACX,OAAI,cACF,QAAO;AAET,UAAO,qBAAqB,UAAU;EACxC,KAAK,QAAQ,MACX,QAAO;EACT,KAAK,QAAQ,WACX,QAAO;EACT,QACE,QAAO;;;AAIb,MAAa,cAAc,EACzB,SACA,gBACA,MACA,QACA,yBAaI;CACJ,MAAM,eAAe,CAAC,KAAK,cAAc,CAAC,KAAK,aAAa,CAAC,KAAK;CAClE,MAAM,gBAAgB,KAAK;CAC3B,MAAM,UAAU,YAAY,QAAQ;CACpC,MAAM,eAAe,YAAY,QAAQ;CAEzC,MAAM,sBAAsB;AAC1B,MAAI,QAAS,QAAO;AACpB,OAAK,gBAAgB,kBAAkB,YAAY,QAAQ,MACzD,QAAO;AAET,MAAI,cAAe,QAAO;AAC1B,MAAI,KAAK,QAAS,QAAO;AACzB,SAAO;;CAET,MAAM,gBAAgB,eAAe;CAErC,MAAM,kBACJ,YAAY,QAAQ,QACpB,YAAY,QAAQ,OACpB,YAAY,QAAQ,QAChB,aACA;AAEN,QAAO,gBAAgB,OACrB,qBAAC;EACC,IAAI;EACJ,SAAQ;EACR,gBAAe;EACf,YAAW;EACX,eAAe,WAAW,CAAC,SAAS,QAAQ;EAC5C,KAAK;aAEL,oBAAC;GACC,IAAI;GACJ,UAAU,YAAY,QAAQ,UAAU;GACxC,MAAM,UAAU;IACd;IACA;IACA;IACD,CAAC;GACF,eAAe;AACb,QAAI,oBAAoB;AACtB,SAAI,QACF,oBAAmB;MACjB,QAAQ;MACR,SAAS;MACV,CAAC;AAEJ,SAAI,aACF,oBAAmB;MACjB,QAAQ;MACR,SAAS;MACV,CAAC;;;aAKR,oBAAC;IAAK,IAAG;cACN,YAAY,SAAS,CAAC,CAAC,gBAAgB,aAAa,cAAc;KAC9D;IACS,EACjB,UACC,4CACG,SAAS,OACR,oBAAC;GAAK,IAAG;GAAO,IAAI;aACjB;IACI,EAET,oBAAC;GAAQ,IAAI;aACX,oBAAC;IACC,MAAK;IACL,eAAe;AACb,SAAI,mBACF,oBAAmB;MACjB,QAAQ;MACR,SAAS;MACV,CAAC;;cAGP;KAEc;IACP,IACT,GACD;GACA"}