@codecademy/brand 4.0.0-alpha.14deb86052.0 → 4.0.0-alpha.65b0979c7d.0

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":";;;;;;;;;;;;;AAaA,MAAa,SAAS;AAEtB,MAAM,aAAa,OAAO,KAAK,CAC7B,IAAI;CACF,QAAQ;CACR,aAAa;CACb,SAAS;CACT,OAAO;CACP,eAAe;CAChB,CAAC,CACH;AAED,MAAM,UAAU,OAAO,aAAa,CAClC,IAAI,EACF,QAAQ,UACT,CAAC,CACH;AAMD,MAAM,gBAAgB,OAAO,KAAK,AAAoB;;eAEvC,MAAM,OAAO,CAAC;;;IAGzB,MAAM,YAAY,GAAG;;;;AAKzB,MAAM,qBAAqB,QAAQ;CACjC,MAAM,EACJ,iBAAiB,eAClB;CACD,UAAU;GACP,QAAQ,QAAQ;GACf,mBAAmB;GACnB,mBAAmB;GACnB,mBAAmB,MAAM,OAAO;GAChC,OAAO;GACR;GACA,QAAQ,aAAa;GACpB,mBAAmB;GACnB,mBAAmB;GACnB,mBAAmB,MAAM,OAAO;GAChC,OAAO;GACR;GACA,QAAQ,SAAS,EAChB,iBAAiB,MAAM,OAAO,YAC/B;GACA,QAAQ,OAAO,EACd,iBAAiB,MAAM,OAAO,QAC/B;GACA,QAAQ,MAAM,EACb,iBAAiB,MAAM,OAAO,QAC/B;GACA,QAAQ,QAAQ,EACf,iBAAiB,MAAM,OAAO,YAC/B;EACF;CACF,CAAC;AAEF,MAAM,aAAa,OAAO,QAAQ,CAAC,mBAAmB;AAEtD,MAAM,gBAAgB,YAAoC;AACxD,SAAQ,SAAR;EACE,KAAK,QAAQ,KACX,QAAO;EACT,KAAK,QAAQ;EACb,KAAK,QAAQ,IACX,QAAO;EACT,KAAK,QAAQ,MACX,QAAO;EACT,KAAK,QAAQ,WACX,QAAO;EACT,QACE,QAAO;;;AAIb,MAAM,4BAA4B,YAAqB;AAOrD,QACE,oBAAC;EAAQ,IAAI;EAAG,YAAW;EAAS,eAAc;YANlD,oBAAC;GAAK,UAAU,EAAE,IAAI,SAAS;GAAE,WAAU;aACxC,sBAAsB,QAAQ;IAC1B;GAMG;;AAId,MAAa,eAAe,EAC1B,SACA,gBACA,UACA,aACA,eACA,MACA,yBAeI;CACJ,MAAM,gBAAgB,YAAY,QAAQ;CAC1C,MAAM,iBAAiB,YAAY,QAAQ;AAE3C,QACE,oBAAC;EAAc,sBAAsB,YAAY,QAAQ;YACvD,qBAAC;GAAW,SAAQ;GAAO,QAAO;;IAC/B,iBAAiB,oBAAC,qBAAmB;IACtC,oBAAC;KAAqB,WAAW;eAC/B,qBAAC;MACC,SAAS;MACT,IAAI;MACJ,IAAI;MACJ,YAAW;MACX,gBAAe;;OAEf,oBAAC;QAAK,IAAG;QAAK,UAAU;SAAE,GAAG;SAAI,IAAI;SAAI;kBACtC,YAAY,SAAS,SAAS,eAC7B,YAAY,SAAS,QAAQ;SAC1B;OACN,iBAAiB,oBAAC;QAAK;kBAAa;SAAkB;OACtD,aAAa,QAAQ,IACpB,oBAAC;QAAM,SAAQ;QAAW,IAAI;kBAC3B,aAAa,QAAQ;SAChB;;OAEC;MACQ;IAEvB,qBAAC;KAAI,IAAI;KAAI,IAAI;gBACf,oBAAC;MAAQ;MAAO,YAAW;gBACxB,YAAY,QAAQ,aACnB,qBAAC;OACC;OACA,YAAW;OACX,gBAAe;OACf,WAAW;kBAEX,oBAAC;QAAK,OAAM;QAAiB,IAAI;QAAG,WAAU;kBAAS;SAEhD,EACP,oBAAC;QAAK,SAAQ;QAAW,WAAU;kBAAS;SAErC;QACC,GAEV,oBAAC;OACC,cAAc,YAAY,SAAS,SAAS;OAC5C,OAAO,eAAe;OACb;OACC;OACK;QACf;OAEI,EAEV,qBAAC;MAAQ;MAAO,YAAW;iBACzB,oBAAC,WAAQ,IAAI,KAAM,EACnB,oBAAC;OACC,eAAc;OACd,IAAI;OASJ,OAAO;QAAE,GAAG;QAAS,IAAI,MAAM,IAAI;QAAE;iBAEpC,yBAAyB,QAAQ;QAC1B;OACF;MACN;IACN,oBAAC;KAAQ,IAAI;KAAI,IAAG;KAAO;eACzB,oBAAC;MACO;MACU;MACP;MACW;OACpB;MACM;;IACC;GACC"}

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"}

package/dist/PricingSection/Products.js

@@ -82,4 +82,5 @@ const Products = ({ plansByType, user, isUserInIndia, currency, trackBusinessCli
 };
 
 //#endregion
-export { Products };
+export { Products };
+//# sourceMappingURL=Products.js.map

package/dist/PricingSection/Products.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Products.js","names":["Products: React.FC<ProductsProps>"],"sources":["../../src/PricingSection/Products.tsx"],"sourcesContent":["import { GridBox } from '@codecademy/gamut';\n\nimport { getProductDetails, PlansByType } from './config';\nimport { PricingCard } from './PricingCard';\nimport { AllCurrency } from './PricingCard/types';\nimport { Product, User } from './types';\n\ninterface ProductsProps {\n  plansByType: PlansByType;\n  user: User;\n  isUserInIndia: boolean;\n  currency: AllCurrency;\n  trackBusinessClick: ({\n    target,\n    context,\n  }: {\n    target: string;\n    context: string;\n  }) => void;\n}\n\nexport const Products: React.FC<ProductsProps> = ({\n  plansByType,\n  user,\n  isUserInIndia,\n  currency,\n  trackBusinessClick,\n}) => {\n  const productsLength = Object.keys(plansByType).length;\n\n  const renderCard = (product: Product) => {\n    switch (product) {\n      case Product.Basic:\n        return (\n          <PricingCard\n            key={product}\n            product={Product.Basic}\n            productDetails={getProductDetails(plansByType, product)}\n            plansByType={plansByType}\n            isUserInIndia={isUserInIndia}\n            currency={currency}\n            user={user}\n          />\n        );\n\n      case Product.Silver:\n        return (\n          <PricingCard\n            key={product}\n            product={Product.Silver}\n            productDetails={getProductDetails(plansByType, product)}\n            plansByType={plansByType}\n            isUserInIndia={isUserInIndia}\n            currency={currency}\n            user={user}\n          />\n        );\n\n      case Product.Gold:\n        return (\n          <PricingCard\n            key={product}\n            product={Product.Gold}\n            productDetails={getProductDetails(plansByType, product)}\n            plansByType={plansByType}\n            isUserInIndia={isUserInIndia}\n            currency={currency}\n            user={user}\n          />\n        );\n\n      case Product.Teams:\n        return (\n          <PricingCard\n            key={product}\n            product={Product.Teams}\n            productDetails={getProductDetails(plansByType, product)}\n            plansByType={plansByType}\n            isUserInIndia={isUserInIndia}\n            currency={currency}\n            user={user}\n            trackBusinessClick={trackBusinessClick}\n          />\n        );\n\n      case Product.Enterprise:\n        return (\n          <PricingCard\n            key={product}\n            product={Product.Enterprise}\n            productDetails={getProductDetails(plansByType, product)}\n            plansByType={plansByType}\n            isUserInIndia={isUserInIndia}\n            currency={currency}\n            user={user}\n            trackBusinessClick={trackBusinessClick}\n          />\n        );\n\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <GridBox\n      as=\"ul\"\n      pt={16}\n      pb={24}\n      px={0}\n      mb={0}\n      center\n      fit\n      gridAutoFlow={{ _: 'row', md: 'column' }}\n      columnGap={24}\n      rowGap={24}\n      alignItems={{ _: 'unset', md: 'stretch' }}\n      justifyItems=\"center\"\n      gridTemplateColumns={{\n        _: '1fr',\n        md: `repeat(${productsLength}, ${\n          productsLength <= 2 ? 'max-content' : '1fr'\n        })`,\n      }}\n    >\n      {Object.keys(plansByType).map(renderCard)}\n    </GridBox>\n  );\n};\n"],"mappings":";;;;;;;AAqBA,MAAaA,YAAqC,EAChD,aACA,MACA,eACA,UACA,yBACI;CACJ,MAAM,iBAAiB,OAAO,KAAK,YAAY,CAAC;CAEhD,MAAM,cAAc,YAAqB;AACvC,UAAQ,SAAR;GACE,KAAK,QAAQ,MACX,QACE,oBAAC;IAEC,SAAS,QAAQ;IACjB,gBAAgB,kBAAkB,aAAa,QAAQ;IAC1C;IACE;IACL;IACJ;MAND,QAOL;GAGN,KAAK,QAAQ,OACX,QACE,oBAAC;IAEC,SAAS,QAAQ;IACjB,gBAAgB,kBAAkB,aAAa,QAAQ;IAC1C;IACE;IACL;IACJ;MAND,QAOL;GAGN,KAAK,QAAQ,KACX,QACE,oBAAC;IAEC,SAAS,QAAQ;IACjB,gBAAgB,kBAAkB,aAAa,QAAQ;IAC1C;IACE;IACL;IACJ;MAND,QAOL;GAGN,KAAK,QAAQ,MACX,QACE,oBAAC;IAEC,SAAS,QAAQ;IACjB,gBAAgB,kBAAkB,aAAa,QAAQ;IAC1C;IACE;IACL;IACJ;IACc;MAPf,QAQL;GAGN,KAAK,QAAQ,WACX,QACE,oBAAC;IAEC,SAAS,QAAQ;IACjB,gBAAgB,kBAAkB,aAAa,QAAQ;IAC1C;IACE;IACL;IACJ;IACc;MAPf,QAQL;GAGN,QACE,QAAO;;;AAIb,QACE,oBAAC;EACC,IAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ;EACA;EACA,cAAc;GAAE,GAAG;GAAO,IAAI;GAAU;EACxC,WAAW;EACX,QAAQ;EACR,YAAY;GAAE,GAAG;GAAS,IAAI;GAAW;EACzC,cAAa;EACb,qBAAqB;GACnB,GAAG;GACH,IAAI,UAAU,eAAe,IAC3B,kBAAkB,IAAI,gBAAgB,MACvC;GACF;YAEA,OAAO,KAAK,YAAY,CAAC,IAAI,WAAW;GACjC"}

package/dist/PricingSection/config.js

@@ -28,4 +28,5 @@ const groupPlansByType = (products) => {
 };
 
 //#endregion
-export { getProductDescription, getProductDetails, groupPlansByType };
+export { getProductDescription, getProductDetails, groupPlansByType };
+//# sourceMappingURL=config.js.map

package/dist/PricingSection/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":["key: Product"],"sources":["../../src/PricingSection/config.ts"],"sourcesContent":["import { Product, ProductDetails } from './types';\n\ntype Period = 'annual' | 'monthly';\ntype PlansByPeriod = Record<Period, ProductDetails>;\nexport type PlansByType = Record<Product, PlansByPeriod>;\n\nexport const getProductDescription = (product: Product) => {\n  switch (product) {\n    case Product.Basic:\n      return 'Start learning something new with basic access';\n    case Product.Teams:\n      return 'Train your team with in-demand skills and flexible admin tools';\n    case Product.Enterprise:\n      return 'Customizable training for your organization';\n    case Product.Pro:\n    case Product.Silver:\n      return 'Build in-demand technical skills for work or a personal project';\n    case Product.Gold:\n      return 'Develop the skills and experience to land a job in tech';\n  }\n};\n\nexport const getProductDetails = (\n  products: PlansByType,\n  product: Product\n): ProductDetails => {\n  if (product === Product.Basic) {\n    return products[product].monthly;\n  }\n  return products[product].annual;\n};\n\nexport const groupPlansByType = (products: ProductDetails[]) => {\n  return products.reduce<PlansByType>((acc, plan) => {\n    let key: Product;\n    if (plan.planType === 'basic') {\n      key = Product.Basic;\n    } else {\n      key = plan.planType as Product;\n    }\n    if (!acc[key]) {\n      acc[key] = {} as PlansByPeriod;\n    }\n    const period = plan.planId?.includes('Annual') ? 'annual' : 'monthly';\n    acc[key][period] = plan;\n    return acc;\n  }, {} as PlansByType);\n};\n"],"mappings":";;;AAMA,MAAa,yBAAyB,YAAqB;AACzD,SAAQ,SAAR;EACE,KAAK,QAAQ,MACX,QAAO;EACT,KAAK,QAAQ,MACX,QAAO;EACT,KAAK,QAAQ,WACX,QAAO;EACT,KAAK,QAAQ;EACb,KAAK,QAAQ,OACX,QAAO;EACT,KAAK,QAAQ,KACX,QAAO;;;AAIb,MAAa,qBACX,UACA,YACmB;AACnB,KAAI,YAAY,QAAQ,MACtB,QAAO,SAAS,SAAS;AAE3B,QAAO,SAAS,SAAS;;AAG3B,MAAa,oBAAoB,aAA+B;AAC9D,QAAO,SAAS,QAAqB,KAAK,SAAS;EACjD,IAAIA;AACJ,MAAI,KAAK,aAAa,QACpB,OAAM,QAAQ;MAEd,OAAM,KAAK;AAEb,MAAI,CAAC,IAAI,KACP,KAAI,OAAO,EAAE;EAEf,MAAM,SAAS,KAAK,QAAQ,SAAS,SAAS,GAAG,WAAW;AAC5D,MAAI,KAAK,UAAU;AACnB,SAAO;IACN,EAAE,CAAgB"}

package/dist/PricingSection/index.d.ts

@@ -19,4 +19,5 @@ type PricingSectionProps = Omit<Partial<React.ComponentProps<typeof Background>>
 };
 declare const PricingSection: React.FC<PricingSectionProps>;
 //#endregion
-export { PricingSection };
+export { PricingSection };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/PricingSection/index.tsx"],"sourcesContent":[],"mappings":";;;;;KASK,mBAAA,GAAsB,KACzB,QAAQ,KAAA,CAAM,sBAAsB;YAG1B;EAJP,KAAA,CAAA,EAKK,KAAA,CAAM,SALQ;EACc,IAAA,EAK9B,IAL8B;EAA5B,aAAM,EAAA,OAAA;EAAd,QAAA,EAOU,WAPV;EADyB,kBAAA,EAAA,CAAA;IAAA,MAAA;IAAA;EAMnB,CANmB,EAAA;IAIf,MAAA,EAAA,MAAA;IACI,OAAA,EAAA,MAAA;EACR,CAAA,EAAA,GAAA,IAAA;CAEI;AAER,cAQS,cART,EAQyB,KAAA,CAAM,EAR/B,CAQkC,mBARlC,CAAA"}

package/dist/PricingSection/index.js

@@ -32,4 +32,5 @@ const PricingSection = ({ products, title, user, isUserInIndia, currency, trackB
 };
 
 //#endregion
-export { PricingSection };
+export { PricingSection };
+//# sourceMappingURL=index.js.map

package/dist/PricingSection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["PricingSection: React.FC<PricingSectionProps>"],"sources":["../../src/PricingSection/index.tsx"],"sourcesContent":["import { Box, ContentContainer, Text } from '@codecademy/gamut';\nimport { CheckerLoose } from '@codecademy/gamut-patterns';\nimport { Background } from '@codecademy/gamut-styles';\n\nimport { groupPlansByType } from './config';\nimport { AllCurrency } from './PricingCard/types';\nimport { Products } from './Products';\nimport type { ProductDetails, User } from './types';\n\ntype PricingSectionProps = Omit<\n  Partial<React.ComponentProps<typeof Background>>,\n  'title'\n> & {\n  products: ProductDetails[];\n  title?: React.ReactNode;\n  user: User;\n  isUserInIndia: boolean;\n  currency: AllCurrency;\n  trackBusinessClick: ({\n    target,\n    context,\n  }: {\n    target: string;\n    context: string;\n  }) => void;\n};\n\nexport const PricingSection: React.FC<PricingSectionProps> = ({\n  products,\n  title,\n  user,\n  isUserInIndia,\n  currency,\n  trackBusinessClick,\n}) => {\n  return (\n    <>\n      <Text\n        as=\"h1\"\n        textAlign=\"center\"\n        fontSize={{ _: 34, md: 44 }}\n        width=\"100%\"\n        mb={16}\n      >\n        {title}\n      </Text>\n      <Box position=\"relative\">\n        <CheckerLoose height=\"100%\" position=\"absolute\" />\n        <ContentContainer>\n          <Products\n            plansByType={groupPlansByType(products)}\n            user={user}\n            isUserInIndia={isUserInIndia}\n            currency={currency}\n            trackBusinessClick={trackBusinessClick}\n          />\n        </ContentContainer>\n      </Box>\n    </>\n  );\n};\n"],"mappings":";;;;;;;AA2BA,MAAaA,kBAAiD,EAC5D,UACA,OACA,MACA,eACA,UACA,yBACI;AACJ,QACE,4CACE,oBAAC;EACC,IAAG;EACH,WAAU;EACV,UAAU;GAAE,GAAG;GAAI,IAAI;GAAI;EAC3B,OAAM;EACN,IAAI;YAEH;GACI,EACP,qBAAC;EAAI,UAAS;aACZ,oBAAC;GAAa,QAAO;GAAO,UAAS;IAAa,EAClD,oBAAC,8BACC,oBAAC;GACC,aAAa,iBAAiB,SAAS;GACjC;GACS;GACL;GACU;IACpB,GACe;GACf,IACL"}

package/dist/PricingSection/types.d.ts

@@ -15,4 +15,5 @@ interface User {
   proGold?: boolean;
 }
 //#endregion
-export { ProductDetails, User };
+export { ProductDetails, User };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/PricingSection/types.ts"],"sourcesContent":[],"mappings":";;UASiB,cAAA;;;;;;;;;UA8BA,IAAA"}

package/dist/PricingSection/types.js

@@ -10,4 +10,5 @@ let Product = /* @__PURE__ */ function(Product$1) {
 }({});
 
 //#endregion
-export { Product };
+export { Product };
+//# sourceMappingURL=types.js.map

package/dist/PricingSection/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../src/PricingSection/types.ts"],"sourcesContent":["export enum Product {\n  Basic = 'free',\n  Pro = 'pro',\n  Teams = 'teams',\n  Silver = 'pro-silver',\n  Gold = 'pro-gold',\n  Enterprise = 'enterprise',\n}\n\nexport interface ProductDetails {\n  isTrialPlan?: boolean | null | undefined;\n  price: string;\n  planId?: string | null | undefined;\n  displayName: string;\n  planType: string;\n  savings?: string | null | undefined;\n  includedTaxRate?: string | null | undefined;\n}\n\nexport type PlanType =\n  | 'basic'\n  | 'pro-silver'\n  | 'pro-gold'\n  | 'teams'\n  | 'enterprise';\n\nexport type CtaConfig = Partial<\n  Record<\n    PlanType,\n    {\n      label?: string;\n      href?: string;\n      onClick?: () => void;\n    }\n  >\n>;\n\nexport type CopyConfig = Partial<Record<PlanType, { description: string }>>;\n\nexport interface User {\n  anonymous?: boolean;\n  proSilver?: boolean;\n  proGold?: boolean;\n}\n"],"mappings":";AAAA,IAAY,8CAAL;AACL;AACA;AACA;AACA;AACA;AACA"}

package/dist/ProLogoAlt/index.d.ts

@@ -10,4 +10,5 @@ type ProLogoAltProps = {
 };
 declare const ProLogoAlt: React$1.FC<ProLogoAltProps>;
 //#endregion
-export { ProLogoAlt, ProLogoAltProps };
+export { ProLogoAlt, ProLogoAltProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/ProLogoAlt/index.tsx"],"sourcesContent":[],"mappings":";;;;KAGY,eAAA;;EAAA,eAAA,CAAA,EAAe,MAAA,OAEM,MAAA;EAKpB,SAAA,CAAA,EAAA,MAwBZ,OA5B0B,MAIO;;;cAArB,YAAY,OAAA,CAAM,GAAG"}

package/dist/ProLogoAlt/index.js

@@ -23,4 +23,5 @@ const ProLogoAlt = ({ ariaLabel = "Codecademy Pro Logo", backgroundColor = "yell
 });
 
 //#endregion
-export { ProLogoAlt };
+export { ProLogoAlt };
+//# sourceMappingURL=index.js.map

package/dist/ProLogoAlt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ProLogoAlt: React.FC<ProLogoAltProps>"],"sources":["../../src/ProLogoAlt/index.tsx"],"sourcesContent":["import { colors } from '@codecademy/gamut-styles';\nimport * as React from 'react';\n\nexport type ProLogoAltProps = {\n  ariaLabel?: string;\n  backgroundColor?: keyof typeof colors;\n  textColor?: keyof typeof colors;\n  width?: number;\n};\n\nexport const ProLogoAlt: React.FC<ProLogoAltProps> = ({\n  ariaLabel = 'Codecademy Pro Logo',\n  backgroundColor = 'yellow',\n  textColor = 'black',\n  width = 50,\n}) => (\n  <svg\n    width={width}\n    viewBox=\"0 0 95 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label={ariaLabel}\n  >\n    <g fill={colors[backgroundColor]} fillRule=\"evenodd\">\n      <path\n        d=\"m0 0h74v40h-74zm78 34h17v6h-17z\"\n        fill={colors[backgroundColor]}\n      />\n      <path\n        d=\"m13.971 23.67v6.82h-3.971v-20.145h6.82c4.749 0 7.253 2.965 7.253 6.62 0 3.625-2.504 6.705-7.253 6.705zm2.245-9.871h-2.245v6.446h2.245c2.187 0 3.77-1.036 3.77-3.28 0-2.245-1.583-3.166-3.77-3.166zm21.518 16.691-4.46-7.741h-2.821v7.741h-4v-20.145h7.568c4.404 0 6.994 2.62 6.994 6.13 0 1.9-.777 4.317-3.828 5.526l5.151 8.49h-4.604zm-.72-13.986c0-1.784-1.295-2.705-3.51-2.705h-3.051v5.468h3.05c2.216 0 3.511-1.036 3.511-2.763zm16.453-6.504c5.843 0 10.533 4.346 10.533 10.418s-4.69 10.417-10.533 10.417c-5.842 0-10.533-4.345-10.533-10.417s4.691-10.418 10.533-10.418zm0 17.152c3.799 0 6.36-2.878 6.36-6.734 0-3.857-2.561-6.734-6.36-6.734s-6.36 2.877-6.36 6.734c0 3.856 2.561 6.734 6.36 6.734z\"\n        fill={colors[textColor]}\n      />\n    </g>\n  </svg>\n);\n"],"mappings":";;;;;AAUA,MAAaA,cAAyC,EACpD,YAAY,uBACZ,kBAAkB,UAClB,YAAY,SACZ,QAAQ,SAER,oBAAC;CACQ;CACP,SAAQ;CACR,MAAK;CACL,OAAM;CACN,cAAY;WAEZ,qBAAC;EAAE,MAAM,OAAO;EAAkB,UAAS;aACzC,oBAAC;GACC,GAAE;GACF,MAAM,OAAO;IACb,EACF,oBAAC;GACC,GAAE;GACF,MAAM,OAAO;IACb;GACA;EACA"}

package/dist/ProductFeatureShowcase/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/ProductFeatureShowcase/index.tsx"],"sourcesContent":[],"mappings":";cAuBa,wBAAwB,KAAA,CAAM;EAA9B,KAAA,EAAA;IAME,GAAA,EAAA,MAAA;IACM,GAAA,EAAA,MAAA;EAET,CAAA;EATyB,kBAAM,CAAA,EAAA,OAAA;EAAE,KAAA,EAMpC,KAAA,CAAM,SAN8B;eAO9B,KAAA,CAAM;;YAET,KAAA,CAAM"}

package/dist/ProductFeatureShowcase/index.js

@@ -103,4 +103,5 @@ const ProductFeatureShowcase = ({ image, displayImageBorder, title, titleBadge,
 });
 
 //#endregion
-export { ProductFeatureShowcase };
+export { ProductFeatureShowcase };
+//# sourceMappingURL=index.js.map

package/dist/ProductFeatureShowcase/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ProductFeatureShowcase: React.FC<{\n  image: {\n    src: string;\n    alt: string;\n  };\n  displayImageBorder?: boolean;\n  title: React.ReactNode;\n  description: React.ReactNode;\n  titleBadge?: string;\n  eyebrow?: React.ReactNode;\n  cta?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n}>"],"sources":["../../src/ProductFeatureShowcase/index.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  ContentContainer,\n  GridBox,\n  StrokeButton,\n  Text,\n} from '@codecademy/gamut';\nimport { DiagonalBDense } from '@codecademy/gamut-patterns';\nimport styled from '@emotion/styled';\n\nimport { PausableImage } from '..';\n\nconst StyledPattern = styled(DiagonalBDense)`\n  color: ${({ theme }) => theme.colors.yellow};\n`;\n\nconst StyledBadge = styled(Badge)`\n  display: inline-block;\n  position: relative;\n  top: -0.5rem;\n`;\n\nexport const ProductFeatureShowcase: React.FC<{\n  image: {\n    src: string;\n    alt: string;\n  };\n  displayImageBorder?: boolean;\n  title: React.ReactNode;\n  description: React.ReactNode;\n  titleBadge?: string;\n  eyebrow?: React.ReactNode;\n  cta?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n}> = ({\n  image,\n  displayImageBorder,\n  title,\n  titleBadge,\n  eyebrow,\n  description,\n  cta,\n}) => (\n  <Box bg=\"paleYellow\" position=\"relative\">\n    <StyledPattern\n      color=\"yellow\"\n      position=\"absolute\"\n      left={0}\n      top={0}\n      bottom={0}\n      width=\"40%\"\n      pointerEvents=\"none\"\n      display={{ _: 'none', md: 'block' }}\n    />\n    <ContentContainer>\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', md: '1fr 1fr' }}\n        gap={{ _: 48, md: 96 }}\n        py={{ _: 48, md: 64 }}\n        alignItems=\"center\"\n      >\n        <Box position=\"relative\">\n          <StyledPattern\n            color=\"yellow\"\n            position=\"absolute\"\n            width=\"100vw\"\n            top={-48}\n            left={{ _: -16, xs: -32, sm: -64 }}\n            height=\"calc(50% + 48px)\"\n            pointerEvents=\"none\"\n            display={{ md: 'none' }}\n          />\n          <Box\n            {...(displayImageBorder\n              ? {\n                  borderWidth: 1,\n                  border: 'solid',\n                  borderColor: 'navy-400',\n                  borderRadius: 'lg',\n                  overflow: 'hidden',\n                }\n              : undefined)}\n          >\n            <PausableImage src={image.src} alt={image.alt} />\n          </Box>\n        </Box>\n        <Box>\n          {eyebrow && <Box mb={8}>{eyebrow}</Box>}\n\n          <Text as=\"h2\" variant=\"title-xl\">\n            <Text mr={8} display=\"inline\">\n              {title}\n            </Text>\n            {titleBadge && (\n              <StyledBadge variant=\"tertiary\" fontSize={14}>\n                {titleBadge}\n              </StyledBadge>\n            )}\n          </Text>\n\n          <Text mt={8}>{description}</Text>\n\n          {cta && (\n            <StrokeButton href={cta.href} onClick={cta.onClick} mt={16}>\n              {cta.label}\n            </StrokeButton>\n          )}\n        </Box>\n      </GridBox>\n    </ContentContainer>\n  </Box>\n);\n"],"mappings":";;;;;;;AAaA,MAAM,gBAAgB,OAAO,eAAe;YAChC,EAAE,YAAY,MAAM,OAAO,OAAO;;AAG9C,MAAM,cAAc,OAAO,MAAM;;;;;AAMjC,MAAaA,0BAeP,EACJ,OACA,oBACA,OACA,YACA,SACA,aACA,UAEA,qBAAC;CAAI,IAAG;CAAa,UAAS;YAC5B,oBAAC;EACC,OAAM;EACN,UAAS;EACT,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAM;EACN,eAAc;EACd,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAS;GACnC,EACF,oBAAC,8BACC,qBAAC;EACC,qBAAqB;GAAE,GAAG;GAAO,IAAI;GAAW;EAChD,KAAK;GAAE,GAAG;GAAI,IAAI;GAAI;EACtB,IAAI;GAAE,GAAG;GAAI,IAAI;GAAI;EACrB,YAAW;aAEX,qBAAC;GAAI,UAAS;cACZ,oBAAC;IACC,OAAM;IACN,UAAS;IACT,OAAM;IACN,KAAK;IACL,MAAM;KAAE,GAAG;KAAK,IAAI;KAAK,IAAI;KAAK;IAClC,QAAO;IACP,eAAc;IACd,SAAS,EAAE,IAAI,QAAQ;KACvB,EACF,oBAAC;IACC,GAAK,qBACD;KACE,aAAa;KACb,QAAQ;KACR,aAAa;KACb,cAAc;KACd,UAAU;KACX,GACD;cAEJ,oBAAC;KAAc,KAAK,MAAM;KAAK,KAAK,MAAM;MAAO;KAC7C;IACF,EACN,qBAAC;GACE,WAAW,oBAAC;IAAI,IAAI;cAAI;KAAc;GAEvC,qBAAC;IAAK,IAAG;IAAK,SAAQ;eACpB,oBAAC;KAAK,IAAI;KAAG,SAAQ;eAClB;MACI,EACN,cACC,oBAAC;KAAY,SAAQ;KAAW,UAAU;eACvC;MACW;KAEX;GAEP,oBAAC;IAAK,IAAI;cAAI;KAAmB;GAEhC,OACC,oBAAC;IAAa,MAAM,IAAI;IAAM,SAAS,IAAI;IAAS,IAAI;cACrD,IAAI;KACQ;MAEb;GACE,GACO;EACf"}

package/dist/QuizScore/index.d.ts

@@ -12,4 +12,5 @@ interface QuizScoreProps {
 }
 declare const QuizScore: React$1.FC<QuizScoreProps>;
 //#endregion
-export { QuizScore };
+export { QuizScore };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/QuizScore/index.tsx"],"sourcesContent":[],"mappings":";;;UAIU,cAAA;;EAAA,KAAA,EAAA,MAAA;EAUG,MAAA,CAAA,EAAA,KA+EZ,GAAA,QA/EgC;;;;;;cAApB,WAAW,OAAA,CAAM,GAAG"}

package/dist/QuizScore/index.js

@@ -88,4 +88,5 @@ const QuizScore = ({ correctCount, layout = "row", smallerFont, total, numOfRows
 };
 
 //#endregion
-export { QuizScore };
+export { QuizScore };
+//# sourceMappingURL=index.js.map

package/dist/QuizScore/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["QuizScore: React.FC<QuizScoreProps>"],"sources":["../../src/QuizScore/index.tsx"],"sourcesContent":["import { Box, FlexBox, GridBox, Text } from '@codecademy/gamut';\nimport { CheckFilledIcon, DeleteFilledIcon } from '@codecademy/gamut-icons';\nimport * as React from 'react';\n\ninterface QuizScoreProps {\n  correctCount: number;\n  total: number;\n  layout?: 'row' | 'column';\n  smallerFont?: boolean;\n  numOfRows?: number;\n  colorfulIcons?: boolean;\n  percentToPass?: number;\n}\n\nexport const QuizScore: React.FC<QuizScoreProps> = ({\n  correctCount,\n  layout = 'row',\n  smallerFont,\n  total,\n  numOfRows,\n  colorfulIcons,\n  percentToPass,\n}) => {\n  const isRowLayout = layout === 'row';\n  const moreThan5Rows = !isRowLayout && numOfRows && numOfRows > 5;\n  const quizScore = total < 1 ? 0 : Math.round((correctCount / total) * 100);\n  const affirmation = quizScore > 70 ? 'Great job!' : 'Practice makes perfect!';\n  return (\n    <GridBox\n      gridTemplateColumns={\n        isRowLayout\n          ? {\n              _: 'minmax(0,1fr)',\n              md: '1fr min-content 1fr',\n            }\n          : ''\n      }\n      gridTemplateRows={isRowLayout ? '' : 'min-content 1fr min-content'}\n      fontFamily=\"accent\"\n      gap={{ _: 16, sm: 8 }}\n      mb={{ _: !isRowLayout ? 16 : 32, sm: 16 }}\n    >\n      <FlexBox flexDirection=\"column\" textAlign=\"center\">\n        <Text fontSize={smallerFont ? 34 : 44}>{`${quizScore}%`}</Text>\n        {percentToPass && quizScore < percentToPass && (\n          <Text fontSize={14}>{`Get ${percentToPass}% to pass`}</Text>\n        )}\n        <Text fontSize={14}>{affirmation}</Text>\n      </FlexBox>\n      <Box\n        borderRight={1}\n        borderBottom={1}\n        display={{ _: 'none', xs: 'block' }}\n      />\n      <GridBox\n        gridTemplateColumns={\n          moreThan5Rows\n            ? 'repeat(2,minmax(0,max-content))'\n            : layout === 'row'\n            ? 'repeat(2,minmax(0,max-content))'\n            : { _: 'repeat(2,minmax(0,max-content))', xl: '20px 1fr 20px 1fr' }\n        }\n        gridTemplateRows={moreThan5Rows ? '1fr 1fr' : ''}\n        alignItems=\"center\"\n        columnGap={16}\n        justifyContent=\"center\"\n        display={total === correctCount ? 'flex' : 'grid'}\n      >\n        <CheckFilledIcon\n          color={colorfulIcons ? 'feedback-success' : 'inherit'}\n          aria-hidden\n          size={24}\n        />\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <Text fontSize={smallerFont ? 16 : 22} lineHeight={2 as any}>\n          {`${correctCount} correct`}\n        </Text>\n        {correctCount < total && (\n          <>\n            <DeleteFilledIcon\n              color={colorfulIcons ? 'feedback-error' : 'inherit'}\n              aria-hidden\n              size={24}\n            />\n            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n            <Text fontSize={smallerFont ? 16 : 22} lineHeight={2 as any}>{`${\n              total - correctCount\n            } to work on`}</Text>\n          </>\n        )}\n      </GridBox>\n    </GridBox>\n  );\n};\n"],"mappings":";;;;;;AAcA,MAAaA,aAAuC,EAClD,cACA,SAAS,OACT,aACA,OACA,WACA,eACA,oBACI;CACJ,MAAM,cAAc,WAAW;CAC/B,MAAM,gBAAgB,CAAC,eAAe,aAAa,YAAY;CAC/D,MAAM,YAAY,QAAQ,IAAI,IAAI,KAAK,MAAO,eAAe,QAAS,IAAI;CAC1E,MAAM,cAAc,YAAY,KAAK,eAAe;AACpD,QACE,qBAAC;EACC,qBACE,cACI;GACE,GAAG;GACH,IAAI;GACL,GACD;EAEN,kBAAkB,cAAc,KAAK;EACrC,YAAW;EACX,KAAK;GAAE,GAAG;GAAI,IAAI;GAAG;EACrB,IAAI;GAAE,GAAG,CAAC,cAAc,KAAK;GAAI,IAAI;GAAI;;GAEzC,qBAAC;IAAQ,eAAc;IAAS,WAAU;;KACxC,oBAAC;MAAK,UAAU,cAAc,KAAK;gBAAK,GAAG,UAAU;OAAU;KAC9D,iBAAiB,YAAY,iBAC5B,oBAAC;MAAK,UAAU;gBAAK,OAAO,cAAc;OAAkB;KAE9D,oBAAC;MAAK,UAAU;gBAAK;OAAmB;;KAChC;GACV,oBAAC;IACC,aAAa;IACb,cAAc;IACd,SAAS;KAAE,GAAG;KAAQ,IAAI;KAAS;KACnC;GACF,qBAAC;IACC,qBACE,gBACI,oCACA,WAAW,QACX,oCACA;KAAE,GAAG;KAAmC,IAAI;KAAqB;IAEvE,kBAAkB,gBAAgB,YAAY;IAC9C,YAAW;IACX,WAAW;IACX,gBAAe;IACf,SAAS,UAAU,eAAe,SAAS;;KAE3C,oBAAC;MACC,OAAO,gBAAgB,qBAAqB;MAC5C;MACA,MAAM;OACN;KAEF,oBAAC;MAAK,UAAU,cAAc,KAAK;MAAI,YAAY;gBAChD,GAAG,aAAa;OACZ;KACN,eAAe,SACd,4CACE,oBAAC;MACC,OAAO,gBAAgB,mBAAmB;MAC1C;MACA,MAAM;OACN,EAEF,oBAAC;MAAK,UAAU,cAAc,KAAK;MAAI,YAAY;gBAAW,GAC5D,QAAQ,aACT;OAAoB,IACpB;;KAEG;;GACF"}

package/dist/RatingsBar/index.d.ts

@@ -13,4 +13,5 @@ type RatingsBarProps = {
 };
 declare const RatingsBar: React$1.FC<RatingsBarProps>;
 //#endregion
-export { RatingsBar, RatingsBarProps };
+export { RatingsBar, RatingsBarProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/RatingsBar/index.tsx"],"sourcesContent":[],"mappings":";;;KAIY,eAAA;;AAAZ;AA6BA;;;;;;;cAAa,YAAY,OAAA,CAAM,GAAG"}

package/dist/RatingsBar/index.js

@@ -38,4 +38,5 @@ const RatingsBar = ({ minimumPercent = 0, percent }) => {
 };
 
 //#endregion
-export { RatingsBar };
+export { RatingsBar };
+//# sourceMappingURL=index.js.map

package/dist/RatingsBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["RatingsBar: React.FC<RatingsBarProps>"],"sources":["../../src/RatingsBar/index.tsx"],"sourcesContent":["import { pxRem, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nexport type RatingsBarProps = {\n  /**\n   * Minimum amount of the bar to fill in visually.\n   */\n  minimumPercent?: number;\n\n  /**\n   * How much of the bar to fill in, as a number in [0, 100].\n   */\n  percent: number;\n};\n\nconst RatingsBarWrapper = styled.div`\n  border-width: ${pxRem(1)};\n  border-style: solid;\n  border-radius: ${pxRem(80)};\n  background-color: ${theme.colors.white};\n  height: ${pxRem(8)};\n`;\n\nconst Bar = styled.div`\n  align-items: center;\n  height: 100%;\n  display: flex;\n  position: relative;\n  border-radius: inherit;\n  background-color: ${theme.colors.yellow};\n`;\n\nexport const RatingsBar: React.FC<RatingsBarProps> = ({\n  minimumPercent = 0,\n  percent,\n}) => {\n  return (\n    <RatingsBarWrapper\n      role=\"meter\"\n      aria-valuenow={percent}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label=\"ratings bar\"\n      aria-live=\"polite\"\n    >\n      <Bar\n        data-testid=\"ratings-bar-bar\"\n        // eslint-disable-next-line gamut/no-inline-style\n        style={{\n          width: `${Math.max(minimumPercent, percent)}%`,\n          boxShadow: percent > 0 ? `${pxRem(0.5)} 0 0 ${pxRem(0.5)}` : 'none',\n        }}\n      />\n    </RatingsBarWrapper>\n  );\n};\n"],"mappings":";;;;;;AAgBA,MAAM,oBAAoB,OAAO,GAAG;kBAClB,MAAM,EAAE,CAAC;;mBAER,MAAM,GAAG,CAAC;sBACP,MAAM,OAAO,MAAM;YAC7B,MAAM,EAAE,CAAC;;AAGrB,MAAM,MAAM,OAAO,GAAG;;;;;;sBAMA,MAAM,OAAO,OAAO;;AAG1C,MAAaA,cAAyC,EACpD,iBAAiB,GACjB,cACI;AACJ,QACE,oBAAC;EACC,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,aAAU;YAEV,oBAAC;GACC,eAAY;GAEZ,OAAO;IACL,OAAO,GAAG,KAAK,IAAI,gBAAgB,QAAQ,CAAC;IAC5C,WAAW,UAAU,IAAI,GAAG,MAAM,GAAI,CAAC,OAAO,MAAM,GAAI,KAAK;IAC9D;IACD;GACgB"}

package/dist/Recurly/context/NoProvider.js

@@ -8,4 +8,5 @@
 const NO_PROVIDER = Symbol("no provider");
 
 //#endregion
-export { NO_PROVIDER };
+export { NO_PROVIDER };
+//# sourceMappingURL=NoProvider.js.map

package/dist/Recurly/context/NoProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoProvider.js","names":[],"sources":["../../../src/Recurly/context/NoProvider.ts"],"sourcesContent":["/**\n * A symbol used as the default value for contexts that require a provider. When\n * calling useContext, we can throw an error if we find this symbol rather than\n * a provided value. This is useful in cases where we want to consider null or\n * undefined as valid provided values.\n */\nexport const NO_PROVIDER = Symbol('no provider');\nexport type NoProvider = typeof NO_PROVIDER;\n"],"mappings":";;;;;;;AAMA,MAAa,cAAc,OAAO,cAAc"}

package/dist/Recurly/context/elements/index.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/Recurly/context/elements/index.d.ts
 
@@ -10,6 +10,7 @@ import * as react_jsx_runtime2 from "react/jsx-runtime";
  */
 declare function Elements({
   children
-}: PropsWithChildren): react_jsx_runtime2.JSX.Element;
+}: PropsWithChildren): react_jsx_runtime1.JSX.Element;
 //#endregion
-export { Elements };
+export { Elements };
+//# sourceMappingURL=index.d.ts.map

package/dist/Recurly/context/elements/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/Recurly/context/elements/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAeA;;;AAAwD,iBAAxC,QAAA,CAAwC;EAAA;AAAA,CAAA,EAAjB,iBAAiB,CAAA,EAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Recurly/context/elements/index.js

@@ -40,4 +40,5 @@ function useElements(options) {
 }
 
 //#endregion
-export { Elements, useElements };
+export { Elements, useElements };
+//# sourceMappingURL=index.js.map

package/dist/Recurly/context/elements/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Recurly/context/elements/index.tsx"],"sourcesContent":["import type { ElementsInstance } from '@recurly/recurly-js';\nimport { createContext, PropsWithChildren, useContext, useMemo } from 'react';\n\nimport { NO_PROVIDER, type NoProvider } from '../NoProvider';\nimport { useRecurly } from '../recurly';\n\ntype ElementCtxValue = ElementsInstance | undefined | NoProvider;\n\nconst ElementCtx = createContext<ElementCtxValue>(NO_PROVIDER);\n\n/**\n * A provider that provides the Elements instance via context.\n *\n * If used outside of a RecurlyProvider, it will throw an error.\n */\nexport function Elements({ children }: PropsWithChildren) {\n  const recurly = useRecurly({\n    noProviderError: 'Elements must be used within a RecurlyProvider.',\n  });\n  const elements = useMemo(() => recurly?.Elements(), [recurly]);\n  return <ElementCtx.Provider value={elements}>{children}</ElementCtx.Provider>;\n}\n\n/**\n * A hook that returns the Elements instance from context.\n *\n * If used outside of an Elements provider, it will throw an error.\n *\n * Within an Elements provider:\n * - If used on the server, it will return undefined.\n * - If used on the client, it will initially return undefined and then return\n *   the provided Elements instance once the Recurly library is loaded.\n *\n * @param options - An object to provide an alternate contextual error message\n * to use if one tries to use this hook outside of an Elements provider.\n *\n * @returns The Elements instance.\n */\nexport function useElements(options?: { noProviderError?: string }) {\n  const elements = useContext(ElementCtx);\n  if (elements === NO_PROVIDER) {\n    throw new Error(\n      options?.noProviderError ??\n        'useElements must be used within a Elements provider.'\n    );\n  }\n  return elements;\n}\n"],"mappings":";;;;;;AAQA,MAAM,aAAa,cAA+B,YAAY;;;;;;AAO9D,SAAgB,SAAS,EAAE,YAA+B;CACxD,MAAM,UAAU,WAAW,EACzB,iBAAiB,mDAClB,CAAC;CACF,MAAM,WAAW,cAAc,SAAS,UAAU,EAAE,CAAC,QAAQ,CAAC;AAC9D,QAAO,oBAAC,WAAW;EAAS,OAAO;EAAW;GAA+B;;;;;;;;;;;;;;;;;AAkB/E,SAAgB,YAAY,SAAwC;CAClE,MAAM,WAAW,WAAW,WAAW;AACvC,KAAI,aAAa,YACf,OAAM,IAAI,MACR,SAAS,mBACP,uDACH;AAEH,QAAO"}

package/dist/Recurly/context/recurly/index.d.ts

@@ -1,6 +1,6 @@
 import { RecurlyConfig } from "./loadRecurly.js";
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { Recurly } from "@recurly/recurly-js";
 
 //#region src/Recurly/context/recurly/index.d.ts
@@ -15,7 +15,7 @@ type RecurlyProviderProps = PropsWithChildren<RecurlyConfig>;
 declare function RecurlyProvider({
   children,
   ...config
-}: RecurlyProviderProps): react_jsx_runtime3.JSX.Element;
+}: RecurlyProviderProps): react_jsx_runtime2.JSX.Element;
 /**
  * A hook that returns the Recurly instance from context.
  *
@@ -35,4 +35,5 @@ declare function useRecurly(options?: {
   noProviderError?: string;
 }): Recurly | undefined;
 //#endregion
-export { RecurlyProvider, RecurlyProviderProps, useRecurly };
+export { RecurlyProvider, RecurlyProviderProps, useRecurly };
+//# sourceMappingURL=index.d.ts.map

package/dist/Recurly/context/recurly/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/Recurly/context/recurly/index.tsx"],"sourcesContent":[],"mappings":";;;;;;KAgBY,oBAAA,GAAuB,kBAAkB;;;AAArD;AASA;;;;AAA6E,iBAA7D,eAAA,CAA6D;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAApB,oBAAoB,CAAA,EAAA,kBAAA,CAAA,GAAA,CAAA,OAAA;AA2B7E;;;;;;;;;;;;;;;iBAAgB,UAAA;;IAAiD"}

package/dist/Recurly/context/recurly/index.js

@@ -44,4 +44,5 @@ function useRecurly(options) {
 }
 
 //#endregion
-export { RecurlyProvider, useRecurly };
+export { RecurlyProvider, useRecurly };
+//# sourceMappingURL=index.js.map

package/dist/Recurly/context/recurly/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Recurly/context/recurly/index.tsx"],"sourcesContent":["import type { Recurly } from '@recurly/recurly-js';\nimport {\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { NO_PROVIDER, type NoProvider } from '../NoProvider';\nimport { loadRecurly, RecurlyConfig } from './loadRecurly';\n\ntype RecurlyCtxValue = Recurly | undefined | NoProvider;\n\nconst RecurlyCtx = createContext<RecurlyCtxValue>(NO_PROVIDER);\n\nexport type RecurlyProviderProps = PropsWithChildren<RecurlyConfig>;\n\n/**\n * A provider that:\n * - loads the Recurly library\n * - ensures that only a single instance of the library is loaded\n * - configures the library with the provided public key\n * - provides the library instance via context\n */\nexport function RecurlyProvider({ children, ...config }: RecurlyProviderProps) {\n  const [recurly, setRecurly] = useState<Recurly | undefined>(undefined);\n\n  useEffect(() => {\n    loadRecurly(config)?.then(setRecurly);\n    // Exclude `config` dependency as it should be treated as static.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <RecurlyCtx.Provider value={recurly}>{children}</RecurlyCtx.Provider>;\n}\n\n/**\n * A hook that returns the Recurly instance from context.\n *\n * If used outside of a RecurlyProvider, it will throw an error.\n *\n * Within a RecurlyProvider:\n * - If used on the server, it will return undefined.\n * - If used on the client, it will initially return undefined and then return\n *   the provided Recurly instance once it is loaded.\n *\n * @param options - An object to provide an alternate contextual error message\n * to use if one tries to use this hook outside of a RecurlyProvider.\n *\n * @returns The Recurly instance.\n */\nexport function useRecurly(options?: { noProviderError?: string }) {\n  const recurly = useContext(RecurlyCtx);\n  if (recurly === NO_PROVIDER) {\n    throw new Error(\n      options?.noProviderError ??\n        'useRecurly must be used within a RecurlyProvider'\n    );\n  }\n  return recurly;\n}\n"],"mappings":";;;;;;AAcA,MAAM,aAAa,cAA+B,YAAY;;;;;;;;AAW9D,SAAgB,gBAAgB,EAAE,UAAU,GAAG,UAAgC;CAC7E,MAAM,CAAC,SAAS,cAAc,SAA8B,OAAU;AAEtE,iBAAgB;AACd,cAAY,OAAO,EAAE,KAAK,WAAW;IAGpC,EAAE,CAAC;AAEN,QAAO,oBAAC,WAAW;EAAS,OAAO;EAAU;GAA+B;;;;;;;;;;;;;;;;;AAkB9E,SAAgB,WAAW,SAAwC;CACjE,MAAM,UAAU,WAAW,WAAW;AACtC,KAAI,YAAY,YACd,OAAM,IAAI,MACR,SAAS,mBACP,mDACH;AAEH,QAAO"}

package/dist/Recurly/context/recurly/loadRecurly.d.ts

@@ -6,4 +6,5 @@ type RecurlyConfig = {
   required: string[];
 };
 //#endregion
-export { RecurlyConfig };
+export { RecurlyConfig };
+//# sourceMappingURL=loadRecurly.d.ts.map

package/dist/Recurly/context/recurly/loadRecurly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadRecurly.d.ts","names":[],"sources":["../../../../src/Recurly/context/recurly/loadRecurly.ts"],"sourcesContent":[],"mappings":";;;KAIY,aAAA;;EAAA,QAAA,EAAA,MAAa,EAAA"}

package/dist/Recurly/context/recurly/loadRecurly.js

@@ -18,4 +18,5 @@ function loadRecurly(config) {
 }
 
 //#endregion
-export { loadRecurly };
+export { loadRecurly };
+//# sourceMappingURL=loadRecurly.js.map

package/dist/Recurly/context/recurly/loadRecurly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadRecurly.js","names":[],"sources":["../../../../src/Recurly/context/recurly/loadRecurly.ts"],"sourcesContent":["import type { Recurly } from '@recurly/recurly-js';\n\nimport { w } from './w';\n\nexport type RecurlyConfig = {\n  publicKey: string;\n  required: string[];\n};\n\nexport function loadRecurly(config: RecurlyConfig) {\n  if (w && w._recurlyPromise) {\n    w._recurlyPromise = new Promise<Recurly>((resolve) => {\n      const script = (w as Window).document.createElement('script');\n      script.src = 'https://js.recurly.com/v4/recurly.js';\n      script.async = true;\n      script.onload = () => {\n        const { recurly } = w as Window;\n        if (!recurly) {\n          throw new Error('Recurly was not loaded by recurly.js');\n        }\n        recurly.configure(config);\n        resolve(recurly);\n      };\n      (w as Window).document.head.appendChild(script);\n    });\n  }\n  return w?._recurlyPromise;\n}\n"],"mappings":";;;AASA,SAAgB,YAAY,QAAuB;AACjD,KAAI,KAAK,EAAE,gBACT,GAAE,kBAAkB,IAAI,SAAkB,YAAY;EACpD,MAAM,SAAU,EAAa,SAAS,cAAc,SAAS;AAC7D,SAAO,MAAM;AACb,SAAO,QAAQ;AACf,SAAO,eAAe;GACpB,MAAM,EAAE,YAAY;AACpB,OAAI,CAAC,QACH,OAAM,IAAI,MAAM,uCAAuC;AAEzD,WAAQ,UAAU,OAAO;AACzB,WAAQ,QAAQ;;AAElB,EAAC,EAAa,SAAS,KAAK,YAAY,OAAO;GAC/C;AAEJ,QAAO,GAAG"}

package/dist/Recurly/context/recurly/w.js

@@ -2,4 +2,5 @@
 const w = typeof window === "undefined" ? void 0 : window;
 
 //#endregion
-export { w };
+export { w };
+//# sourceMappingURL=w.js.map

package/dist/Recurly/context/recurly/w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"w.js","names":[],"sources":["../../../../src/Recurly/context/recurly/w.ts"],"sourcesContent":["import type { Recurly } from '@recurly/recurly-js';\n\n// By importing/exporting w as a window object, we can easily mock it in tests.\n\ntype Doc = {\n  createElement: Document['createElement'];\n  head: {\n    appendChild: Document['head']['appendChild'];\n  };\n};\n\nexport type W = {\n  recurly?: Recurly;\n  _recurlyPromise?: Promise<Recurly>;\n  document: Doc;\n};\n\n// Exported for easy mocking\nexport const w = typeof window === 'undefined' ? undefined : (window as W);\n"],"mappings":";AAkBA,MAAa,IAAI,OAAO,WAAW,cAAc,SAAa"}

package/dist/Recurly/fields/RecurlyField.d.ts

@@ -1,5 +1,5 @@
 import { InputWrapperProps } from "@codecademy/gamut";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/Recurly/fields/RecurlyField.d.ts
 type RecurlyFieldProps = InputWrapperProps & {
@@ -13,6 +13,7 @@ declare function RecurlyField({
   label,
   children,
   ...props
-}: RecurlyFieldProps): react_jsx_runtime4.JSX.Element;
+}: RecurlyFieldProps): react_jsx_runtime3.JSX.Element;
 //#endregion
-export { RecurlyField, RecurlyFieldProps };
+export { RecurlyField, RecurlyFieldProps };
+//# sourceMappingURL=RecurlyField.d.ts.map

package/dist/Recurly/fields/RecurlyField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecurlyField.d.ts","names":[],"sources":["../../../src/Recurly/fields/RecurlyField.tsx"],"sourcesContent":[],"mappings":";;;;KAmDY,iBAAA,GAAoB;;;AAAhC;AAMA;;;AAA4D,iBAA5C,YAAA,CAA4C;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAAA,iBAAA,CAAA,EAAiB,kBAAA,CAAA,GAAA,CAAA,OAAjB"}

package/dist/Recurly/fields/RecurlyField.js

@@ -64,4 +64,5 @@ function RecurlyField({ label, children, ...props }) {
 }
 
 //#endregion
-export { RecurlyField };
+export { RecurlyField };
+//# sourceMappingURL=RecurlyField.js.map

package/dist/Recurly/fields/RecurlyField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecurlyField.js","names":["variant"],"sources":["../../../src/Recurly/fields/RecurlyField.tsx"],"sourcesContent":["import {\n  Box,\n  Input,\n  InputWrapperProps,\n  StyledInputProps,\n  Text,\n} from '@codecademy/gamut';\nimport {\n  conditionalStyles,\n  formFieldStyles,\n} from '@codecademy/gamut/dist/Form/styles';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useRef } from 'react';\n\nconst Slash = styled.span`\n  width: 0;\n  font-family: 'Suisse';\n  transform: translate(-6px, 1px);\n  font-size: 18px;\n`;\n\nfunction focusBorderColor({ variant }: StyledInputProps) {\n  return variant === 'error'\n    ? theme.colors['feedback-error']\n    : theme.colors.primary;\n}\n\nconst InputInnerBox = styled.div<StyledInputProps>`\n  ${formFieldStyles}\n  ${conditionalStyles}\n  & > div {\n    width: 100%;\n  }\n  padding: 0;\n  display: flex;\n  align-items: center;\n  height: 3.125rem;\n  .recurly-element {\n    height: 3.125rem;\n  }\n  &:has(.recurly-element-focus) {\n    border-color: ${focusBorderColor};\n    box-shadow: inset 0 0 0 1px ${focusBorderColor};\n  }\n  &:has(${Slash}) > div:first-of-type {\n    max-width: 2.75rem;\n    min-width: 2.75rem;\n  }\n`;\n\nexport type RecurlyFieldProps = InputWrapperProps & { label: string };\n\n/**\n * A wrapper around a Recurly element (or two elements in the case of MM/YY) to\n * add Gamut border styling and a label.\n */\nexport function RecurlyField({ label, children, ...props }: RecurlyFieldProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const selectIframe = useCallback(() => {\n    ref.current?.querySelector('iframe')?.focus();\n  }, []);\n\n  return (\n    <Box ref={ref}>\n      <Text as=\"label\" onClick={selectIframe}>\n        {label}\n      </Text>\n      <Input as={InputInnerBox} {...props}>\n        {Array.isArray(children) && children.length === 2 ? (\n          <>\n            {children[0]}\n            <Slash>/</Slash>\n            {children[1]}\n          </>\n        ) : (\n          children\n        )}\n      </Input>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;AAeA,MAAM,QAAQ,OAAO,IAAI;;;;;;AAOzB,SAAS,iBAAiB,EAAE,sBAA6B;AACvD,QAAOA,cAAY,UACf,MAAM,OAAO,oBACb,MAAM,OAAO;;AAGnB,MAAM,gBAAgB,OAAO,GAAqB;IAC9C,gBAAgB;IAChB,kBAAkB;;;;;;;;;;;;oBAYF,iBAAiB;kCACH,iBAAiB;;UAEzC,MAAM;;;;;;;;;AAYhB,SAAgB,aAAa,EAAE,OAAO,UAAU,GAAG,SAA4B;CAC7E,MAAM,MAAM,OAAuB,KAAK;AAMxC,QACE,qBAAC;EAAS;aACR,oBAAC;GAAK,IAAG;GAAQ,SANA,kBAAkB;AACrC,QAAI,SAAS,cAAc,SAAS,EAAE,OAAO;MAC5C,EAAE,CAAC;aAKC;IACI,EACP,oBAAC;GAAM,IAAI;GAAe,GAAI;aAC3B,MAAM,QAAQ,SAAS,IAAI,SAAS,WAAW,IAC9C;IACG,SAAS;IACV,oBAAC,mBAAM,MAAS;IACf,SAAS;OACT,GAEH;IAEI;GACJ"}

package/dist/Recurly/fields/elements.d.ts

@@ -1,11 +1,11 @@
-import * as react47 from "react";
+import * as react29 from "react";
 import { Emitter } from "@recurly/recurly-js/lib/emitter";
 
 //#region src/Recurly/fields/elements.d.ts
-declare const CardNumber: react47.ForwardRefExoticComponent<EventHandlers & react47.RefAttributes<Focusable>>;
-declare const ExpMonth: react47.ForwardRefExoticComponent<EventHandlers & react47.RefAttributes<Focusable>>;
-declare const ExpYear: react47.ForwardRefExoticComponent<EventHandlers & react47.RefAttributes<Focusable>>;
-declare const CVV: react47.ForwardRefExoticComponent<EventHandlers & react47.RefAttributes<Focusable>>;
+declare const CardNumber: react29.ForwardRefExoticComponent<EventHandlers & react29.RefAttributes<Focusable>>;
+declare const ExpMonth: react29.ForwardRefExoticComponent<EventHandlers & react29.RefAttributes<Focusable>>;
+declare const ExpYear: react29.ForwardRefExoticComponent<EventHandlers & react29.RefAttributes<Focusable>>;
+declare const CVV: react29.ForwardRefExoticComponent<EventHandlers & react29.RefAttributes<Focusable>>;
 type ElementType = 'CardNumberElement' | 'CardMonthElement' | 'CardYearElement' | 'CardCvvElement';
 type EventHandler = Parameters<Emitter['on']>[1];
 type EventHandlers = {
@@ -19,4 +19,5 @@ type Focusable = {
   focus: () => void;
 };
 //#endregion
-export { CVV, CardNumber, ElementType, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable };
+export { CVV, CardNumber, ElementType, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable };
+//# sourceMappingURL=elements.d.ts.map

package/dist/Recurly/fields/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","names":[],"sources":["../../../src/Recurly/fields/elements.tsx"],"sourcesContent":[],"mappings":";;;;cAUa,YAAU,OAAA,CAAA,0BAAA,gBAAA,OAAA,CAAA,cAAA;cACV,UAAQ,OAAA,CAAA,0BAAA,gBAAA,OAAA,CAAA,cAAA;cACR,SAAO,OAAA,CAAA,0BAAA,gBAAA,OAAA,CAAA,cAAA;AAFP,cAGA,GAHwD,EAGrD,OAAA,CAAA,yBAHqD,CAGrD,aAHqD,GAGrD,OAAA,CAAA,aAHqD,CAGrD,SAHqD,CAAA,CAAA;AAA9C,KAOX,WAAA,GAPW,mBAAA,GAAA,kBAAA,GAAA,iBAAA,GAAA,gBAAA;AAAA,KAcX,YAAA,GAAe,UAdJ,CAce,OAdf,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,KAgBX,aAAA,GAhBW;EAAA,OAAA,CAAA,EAiBX,YAjBW;EAAA,QAAA,CAAA,EAkBV,YAlBU;EACV,MAAA,CAAA,EAkBF,YAlBkE;EAAxD,OAAA,CAAA,EAmBT,YAnBS;EAAA,QAAA,CAAA,EAoBR,YApBQ;CAAA;AAAA,KA0BT,SAAA,GA1BS;EAAA,KAAA,EAAA,GAAA,GAAA,IAAA;AACrB,CAAA"}

package/dist/Recurly/fields/elements.js

@@ -56,4 +56,5 @@ function bindEventHandlers(el, h) {
 }
 
 //#endregion
-export { CVV, CardNumber, ExpMonth, ExpYear };
+export { CVV, CardNumber, ExpMonth, ExpYear };
+//# sourceMappingURL=elements.js.map

package/dist/Recurly/fields/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":["el: IndividualElement"],"sources":["../../../src/Recurly/fields/elements.tsx"],"sourcesContent":["import { formFieldPaddingStyles } from '@codecademy/gamut/dist/Form/styles';\nimport type {\n  CommonElementStyle,\n  IndividualElement,\n} from '@recurly/recurly-js';\nimport type { Emitter } from '@recurly/recurly-js/lib/emitter';\nimport { ForwardedRef, forwardRef, RefObject, useMemo, useRef } from 'react';\n\nimport { useElements } from '../context';\n\nexport const CardNumber = element('CardNumberElement', 'Card number');\nexport const ExpMonth = element('CardMonthElement', 'Expiration month', 'MM');\nexport const ExpYear = element('CardYearElement', 'Expiration year', 'YY');\nexport const CVV = element('CardCvvElement', 'CVV');\n\n/* These match methods on `ElementsInstance`. 'CardElement' is omitted since we\nonly need individual elements (number,month,year,cvv). */\nexport type ElementType =\n  | 'CardNumberElement'\n  | 'CardMonthElement'\n  | 'CardYearElement'\n  | 'CardCvvElement';\n\n// The type that `element.on` expects. See `bindEventHandlers`.\nexport type EventHandler = Parameters<Emitter['on']>[1];\n\nexport type EventHandlers = {\n  onReady?: EventHandler;\n  onChange?: EventHandler;\n  onBlur?: EventHandler;\n  onFocus?: EventHandler;\n  onSubmit?: EventHandler;\n};\n\n/* Our only reason for allowing folks to pass in a ref is so that they can call\n`.focus()` from the outside. This type satisfies `HTMLElement` (the type one\nmight try to use) and `ElementInstance` (what we actually set the ref to). */\nexport type Focusable = { focus: () => void };\n\n/**\n * Defines a Recurly element component for a given type.\n */\nfunction element(type: ElementType, title: string, placeholder?: string) {\n  return forwardRef<Focusable, EventHandlers>((eventHandlers, ref) => {\n    const elements = useElements({\n      noProviderError:\n        'Recurly element must be used within a Elements provider.',\n    });\n\n    // Keep ref updated with current event handlers. See `bindEventHandlers`.\n    const h = useRef<EventHandlers>({});\n    h.current = eventHandlers;\n\n    const callback = useMemo(() => {\n      if (!elements) return null;\n\n      let el: IndividualElement;\n      return (div: HTMLDivElement | null) => {\n        /* This is called once (with the div) when `elements` is defined and\n        once (with null) on component unmount. */\n        if (div) {\n          el = elements[type]({ style: getStyle(title, placeholder) });\n          el.attach(div);\n          bindEventHandlers(el, h);\n          allowFocus(div, ref, el);\n        } else {\n          cleanup(el);\n        }\n      };\n    }, [elements, ref]);\n\n    return <div ref={callback} />;\n  });\n}\n\nfunction cleanup(el?: IndividualElement) {\n  /* `.destroy()` is not documented or included in the IndividualElement type,\n  but there is an example of @recurly/react-recurly using it here:\n  https://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L112 */\n  (el as unknown as { destroy: () => void })?.destroy();\n}\n\nfunction allowFocus(\n  div: HTMLDivElement,\n  ref: ForwardedRef<Focusable>,\n  el: IndividualElement\n) {\n  // Forward focus from iframe to element. (used by RecurlyField label onClick)\n  div.querySelector('iframe')?.addEventListener('focus', () => el.focus());\n\n  // Set ref to our Recurly element instance so that one can call `.focus()`.\n  if (ref instanceof Function) {\n    ref(el); // call RefCallback\n  } else if (ref) {\n    ref.current = el; // set RefObject\n  }\n}\n\nfunction getStyle(title: string, placeholder?: string) {\n  const { px, py } = formFieldPaddingStyles;\n  return {\n    /* We can't use Apercu in the iframe, but Recurly will pull in any Google\n    font. JetBrains Mono seems appropriate for card info. */\n    fontFamily: 'JetBrains Mono',\n\n    /* Most Gamut styling is applied outside the iframe by RecurlyField. We\n    apply padding in the iframe to ensure the entire element is clickable. */\n    padding: `${px}px ${py}px`,\n\n    /* For some bewildered reason, Recurly takes `title` and `placeholder` as\n    style properties. Title is necessary for screen readers. */\n    title,\n\n    /* The spread syntax for `placeholder` is only necessary because Recurly is\n    persnickety about only including it when defined. */\n    ...(placeholder ? { placeholder } : {}),\n  } as CommonElementStyle;\n}\n\n/* When event handlers are passed as inline function props, they technically are\nnew function instances on each render. Rather than re-attaching the handlers on\neach render, we keep a ref updated with the latest handlers and bind static\nhandlers that call the dynamic handlers from the ref. @recurly/react-recurly\nessentially uses the same approach here:\nhttps://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L102 */\nfunction bindEventHandlers(el: IndividualElement, h: RefObject<EventHandlers>) {\n  el.on('attach', (...args) => h.current?.onReady?.(...args));\n  el.on('change', (...args) => h.current?.onChange?.(...args));\n  el.on('blur', (...args) => h.current?.onBlur?.(...args));\n  el.on('focus', (...args) => h.current?.onFocus?.(...args));\n  el.on('submit', (...args) => h.current?.onSubmit?.(...args));\n}\n"],"mappings":";;;;;;AAUA,MAAa,aAAa,QAAQ,qBAAqB,cAAc;AACrE,MAAa,WAAW,QAAQ,oBAAoB,oBAAoB,KAAK;AAC7E,MAAa,UAAU,QAAQ,mBAAmB,mBAAmB,KAAK;AAC1E,MAAa,MAAM,QAAQ,kBAAkB,MAAM;;;;AA6BnD,SAAS,QAAQ,MAAmB,OAAe,aAAsB;AACvE,QAAO,YAAsC,eAAe,QAAQ;EAClE,MAAM,WAAW,YAAY,EAC3B,iBACE,4DACH,CAAC;EAGF,MAAM,IAAI,OAAsB,EAAE,CAAC;AACnC,IAAE,UAAU;AAoBZ,SAAO,oBAAC,SAAI,KAlBK,cAAc;AAC7B,OAAI,CAAC,SAAU,QAAO;GAEtB,IAAIA;AACJ,WAAQ,QAA+B;AAGrC,QAAI,KAAK;AACP,UAAK,SAAS,MAAM,EAAE,OAAO,SAAS,OAAO,YAAY,EAAE,CAAC;AAC5D,QAAG,OAAO,IAAI;AACd,uBAAkB,IAAI,EAAE;AACxB,gBAAW,KAAK,KAAK,GAAG;UAExB,SAAQ,GAAG;;KAGd,CAAC,UAAU,IAAI,CAAC,GAEU;GAC7B;;AAGJ,SAAS,QAAQ,IAAwB;AAIvC,CAAC,IAA2C,SAAS;;AAGvD,SAAS,WACP,KACA,KACA,IACA;AAEA,KAAI,cAAc,SAAS,EAAE,iBAAiB,eAAe,GAAG,OAAO,CAAC;AAGxE,KAAI,eAAe,SACjB,KAAI,GAAG;UACE,IACT,KAAI,UAAU;;AAIlB,SAAS,SAAS,OAAe,aAAsB;CACrD,MAAM,EAAE,IAAI,OAAO;AACnB,QAAO;EAGL,YAAY;EAIZ,SAAS,GAAG,GAAG,KAAK,GAAG;EAIvB;EAIA,GAAI,cAAc,EAAE,aAAa,GAAG,EAAE;EACvC;;AASH,SAAS,kBAAkB,IAAuB,GAA6B;AAC7E,IAAG,GAAG,WAAW,GAAG,SAAS,EAAE,SAAS,UAAU,GAAG,KAAK,CAAC;AAC3D,IAAG,GAAG,WAAW,GAAG,SAAS,EAAE,SAAS,WAAW,GAAG,KAAK,CAAC;AAC5D,IAAG,GAAG,SAAS,GAAG,SAAS,EAAE,SAAS,SAAS,GAAG,KAAK,CAAC;AACxD,IAAG,GAAG,UAAU,GAAG,SAAS,EAAE,SAAS,UAAU,GAAG,KAAK,CAAC;AAC1D,IAAG,GAAG,WAAW,GAAG,SAAS,EAAE,SAAS,WAAW,GAAG,KAAK,CAAC"}

package/dist/ResourceCard/index.d.ts

@@ -16,4 +16,5 @@ type ResourceCardProps = CardProps & {
 };
 declare const ResourceCard: React.FC<ResourceCardProps>;
 //#endregion
-export { ResourceCard, ResourceCardProps, ResourceType };
+export { ResourceCard, ResourceCardProps, ResourceType };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/ResourceCard/index.tsx"],"sourcesContent":[],"mappings":";;;;aAKY,YAAA;;EAAA,GAAA,GAAA,KAAA;EAOA,IAAA,GAAA,WAAA;;AAEkB,KAFlB,iBAAA,GAAoB,SAEF,GAAA;EACd,KAAA,EAAA,MAAA;EACA,WAAA,EAAA,MAAA,GAFQ,KAAA,CAAM,SAEd;EAAW,YAAA,EADX,YACW;EAId,YAAA,EAJG,WA0Df;;;cAtDY,cAAc,KAAA,CAAM,GAAG"}

package/dist/ResourceCard/index.js

@@ -54,4 +54,5 @@ const ResourceCard = ({ title, description, resourceType, headingLevel, path, ..
 };
 
 //#endregion
-export { ResourceCard, ResourceType };
+export { ResourceCard, ResourceType };
+//# sourceMappingURL=index.js.map