@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/PlanCard/PlanCardBanner.js

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

package/dist/PlanCard/PlanCardBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanCardBanner.js","names":["Text","Background","css","styled","React","BackgroundFlex","display","p","justifyContent","alignItems","PlanCardBanner","text","icon","bg","fontFamily","fontSize","ml"],"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,MAAMK,iBAAiBF,uBAAOF,YAAAA;;;GAC5BC,IAAI;CACFI,SAAS;CACTC,GAAG;CACHC,gBAAgB;CAChBC,YAAY;CACd,CAAA,EAAA,8xCAAA;AAGF,MAAaC,kBAAiD,EAC5DC,MACAC,WACD;AACC,QACE,sBAAA,cAACP,gBAAAA,EAAeQ,IAAG,UAChBD,QAAQA,MACT,sBAAA,cAACZ,MAAAA;EAAKc,YAAW;EAASC,UAAU;EAAIC,IAAI;IACzCL,KAAAA,CAAAA"}

package/dist/PlanCard/PlanFeature.cjs

@@ -0,0 +1,72 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/PlanCard/PlanFeature.tsx
+const ListItem = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)((0, _codecademy_gamut_styles.css)({ listStyleType: "none" })).withComponent("li");
+const PlanFeature = ({ feature, available, isNew, isHighlighted, isMultiple }) => {
+	const Icon = isHighlighted ? _codecademy_gamut_icons.StarFilledIcon : available ? _codecademy_gamut_icons.MiniCheckCircleIcon : _codecademy_gamut_icons.CloseCircleIcon;
+	if (isHighlighted) return /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Badge, {
+		size: "sm",
+		variant: "accent",
+		py: 12,
+		mb: 4,
+		ml: "-4px"
+	}, /* @__PURE__ */ react.default.createElement(Icon, {
+		size: 14,
+		mr: 8,
+		flexShrink: 0,
+		"aria-hidden": true
+	}), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { fontSize: "small" }, feature, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { screenreader: true }, " included.")));
+	return /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		as: ListItem,
+		key: feature,
+		alignItems: isMultiple ? "center" : {
+			_: "center",
+			xs: "flex-start"
+		},
+		mr: isMultiple ? "unset" : {
+			_: "unset",
+			xs: 24,
+			sm: 8
+		},
+		width: isMultiple ? "unset" : {
+			_: "unset",
+			xs: "50%"
+		},
+		"data-testid": "plan-feature"
+	}, /* @__PURE__ */ react.default.createElement(Icon, {
+		mr: 8,
+		mt: isMultiple ? 0 : { xs: 4 },
+		flexShrink: 0,
+		color: available ? "feedback-success" : "gray-600",
+		"aria-hidden": true
+	}), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		flexWrap: {
+			_: "nowrap",
+			md: "wrap",
+			lg: "nowrap"
+		},
+		alignItems: "baseline"
+	}, available ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { width: "100%" }, feature, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { screenreader: true }, " included."))) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		textDecoration: "line-through",
+		color: "text-disabled"
+	}, feature, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { screenreader: true }, " not included."))), isNew && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Badge, {
+		size: "sm",
+		variant: "accent",
+		ml: {
+			_: 4,
+			md: 0,
+			lg: 4
+		}
+	}, "New")));
+};
+
+//#endregion
+exports.PlanFeature = PlanFeature;
+//# sourceMappingURL=PlanFeature.cjs.map

package/dist/PlanCard/PlanFeature.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanFeature.cjs","names":["Badge","FlexBox","Text","CloseCircleIcon","MiniCheckCircleIcon","StarFilledIcon","css","styled","React","ListItem","listStyleType","withComponent","PlanFeature","feature","available","isNew","isHighlighted","isMultiple","Icon","size","variant","py","mb","ml","mr","flexShrink","aria-hidden","fontSize","screenreader","as","key","alignItems","_","xs","sm","width","data-testid","mt","color","flexWrap","md","lg","textDecoration"],"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,MAAMS,wCAAkBR,0BAAAA,mCAAa,EAAES,eAAe,QAAO,CAAA,CAAA,CAAIC,cAC/D,KAAA;AAGF,MAAaC,eAA2C,EACtDC,SACAC,WACAC,OACAC,eACAC,iBACD;CACC,MAAMC,OAAOF,gBACTX,yCACAS,YACAV,8CACAD;AAEJ,KAAIa,cACF,QACE,8BAAA,cAAChB,yBAAAA;EAAMmB,MAAK;EAAKC,SAAQ;EAASC,IAAI;EAAIC,IAAI;EAAGC,IAAI;IACnD,8BAAA,cAACL,MAAAA;EAAKC,MAAM;EAAIK,IAAI;EAAGC,YAAY;EAAGC,eAAAA;KACtC,8BAAA,cAACxB,wBAAAA,EAAKyB,UAAS,WACZd,SACD,8BAAA,cAACX,wBAAAA,EAAK0B,cAAAA,QAAa,aAAA,CAAA,CAAA;AAM3B,QACE,8BAAA,cAAC3B,2BAAAA;EACC4B,IAAIpB;EACJqB,KAAKjB;EACLkB,YAAYd,aAAa,WAAW;GAAEe,GAAG;GAAUC,IAAI;GAAa;EACpET,IAAIP,aAAa,UAAU;GAAEe,GAAG;GAASC,IAAI;GAAIC,IAAI;GAAE;EACvDC,OAAOlB,aAAa,UAAU;GAAEe,GAAG;GAASC,IAAI;GAAM;EACtDG,eAAY;IAEZ,8BAAA,cAAClB,MAAAA;EACCM,IAAI;EACJa,IAAIpB,aAAa,IAAI,EAAEgB,IAAI,GAAE;EAC7BR,YAAY;EACZa,OAAOxB,YAAY,qBAAqB;EACxCY,eAAAA;KAGF,8BAAA,cAACzB,2BAAAA;EACCsC,UAAU;GAAEP,GAAG;GAAUQ,IAAI;GAAQC,IAAI;GAAS;EAClDV,YAAW;IAEVjB,YACC,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAACZ,wBAAAA,EAAKiC,OAAM,UACTtB,SACD,8BAAA,cAACX,wBAAAA,EAAK0B,cAAAA,QAAa,aAAA,CAAA,CAAA,GAIvB,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAAC1B,wBAAAA;EAAKwC,gBAAe;EAAeJ,OAAM;IACvCzB,SACD,8BAAA,cAACX,wBAAAA,EAAK0B,cAAAA,QAAa,iBAAA,CAAA,CAAA,EAKxBb,SACC,8BAAA,cAACf,yBAAAA;EAAMmB,MAAK;EAAKC,SAAQ;EAASG,IAAI;GAAES,GAAG;GAAGQ,IAAI;GAAGC,IAAI;GAAE;IAAG,MAAA,CAAA,CAAA"}

package/dist/PlanCard/PlanFeature.js

@@ -1,105 +1,69 @@
-import _styled from "@emotion/styled/base";
-import { Badge, FlexBox, Text } from '@codecademy/gamut';
-import { CloseCircleIcon, MiniCheckCircleIcon, StarFilledIcon } from '@codecademy/gamut-icons';
-import { css } from '@codecademy/gamut-styles';
-import React from 'react';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/_styled(FlexBox, {
-  target: "ehwi3120",
-  label: "ListItem"
-})(css({
-  listStyleType: 'none'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QbGFuQ2FyZC9QbGFuRmVhdHVyZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JpQiIsImZpbGUiOiIuLi8uLi9zcmMvUGxhbkNhcmQvUGxhbkZlYXR1cmUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQmFkZ2UsIEZsZXhCb3gsIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBDbG9zZUNpcmNsZUljb24sXG4gIE1pbmlDaGVja0NpcmNsZUljb24sXG4gIFN0YXJGaWxsZWRJY29uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW50ZXJmYWNlIFBsYW5GZWF0dXJlUHJvcHMge1xuICBmZWF0dXJlOiBzdHJpbmc7XG4gIGF2YWlsYWJsZTogYm9vbGVhbjtcbiAgaXNOZXc/OiBib29sZWFuO1xuICBpc0hpZ2hsaWdodGVkPzogYm9vbGVhbjtcbiAgaXNNdWx0aXBsZTogYm9vbGVhbjtcbn1cblxuY29uc3QgTGlzdEl0ZW0gPSBzdHlsZWQoRmxleEJveCkoY3NzKHsgbGlzdFN0eWxlVHlwZTogJ25vbmUnIH0pKS53aXRoQ29tcG9uZW50KFxuICAnbGknXG4pO1xuXG5leHBvcnQgY29uc3QgUGxhbkZlYXR1cmU6IFJlYWN0LkZDPFBsYW5GZWF0dXJlUHJvcHM+ID0gKHtcbiAgZmVhdHVyZSxcbiAgYXZhaWxhYmxlLFxuICBpc05ldyxcbiAgaXNIaWdobGlnaHRlZCxcbiAgaXNNdWx0aXBsZSxcbn0pID0+IHtcbiAgY29uc3QgSWNvbiA9IGlzSGlnaGxpZ2h0ZWRcbiAgICA/IFN0YXJGaWxsZWRJY29uXG4gICAgOiBhdmFpbGFibGVcbiAgICA/IE1pbmlDaGVja0NpcmNsZUljb25cbiAgICA6IENsb3NlQ2lyY2xlSWNvbjtcblxuICBpZiAoaXNIaWdobGlnaHRlZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8QmFkZ2Ugc2l6ZT1cInNtXCIgdmFyaWFudD1cImFjY2VudFwiIHB5PXsxMn0gbWI9ezR9IG1sPXsnLTRweCcgYXMgbmV2ZXJ9PlxuICAgICAgICA8SWNvbiBzaXplPXsxNH0gbXI9ezh9IGZsZXhTaHJpbms9ezB9IGFyaWEtaGlkZGVuIC8+XG4gICAgICAgIDxUZXh0IGZvbnRTaXplPVwic21hbGxcIj5cbiAgICAgICAgICB7ZmVhdHVyZX1cbiAgICAgICAgICA8VGV4dCBzY3JlZW5yZWFkZXI+IGluY2x1ZGVkLjwvVGV4dD5cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9CYWRnZT5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8RmxleEJveFxuICAgICAgYXM9e0xpc3RJdGVtfVxuICAgICAga2V5PXtmZWF0dXJlfVxuICAgICAgYWxpZ25JdGVtcz17aXNNdWx0aXBsZSA/ICdjZW50ZXInIDogeyBfOiAnY2VudGVyJywgeHM6ICdmbGV4LXN0YXJ0JyB9fVxuICAgICAgbXI9e2lzTXVsdGlwbGUgPyAndW5zZXQnIDogeyBfOiAndW5zZXQnLCB4czogMjQsIHNtOiA4IH19XG4gICAgICB3aWR0aD17aXNNdWx0aXBsZSA/ICd1bnNldCcgOiB7IF86ICd1bnNldCcsIHhzOiAnNTAlJyB9fVxuICAgICAgZGF0YS10ZXN0aWQ9XCJwbGFuLWZlYXR1cmVcIlxuICAgID5cbiAgICAgIDxJY29uXG4gICAgICAgIG1yPXs4fVxuICAgICAgICBtdD17aXNNdWx0aXBsZSA/IDAgOiB7IHhzOiA0IH19XG4gICAgICAgIGZsZXhTaHJpbms9ezB9XG4gICAgICAgIGNvbG9yPXthdmFpbGFibGUgPyAnZmVlZGJhY2stc3VjY2VzcycgOiAnZ3JheS02MDAnfVxuICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgLz5cblxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgZmxleFdyYXA9e3sgXzogJ25vd3JhcCcsIG1kOiAnd3JhcCcsIGxnOiAnbm93cmFwJyB9fVxuICAgICAgICBhbGlnbkl0ZW1zPVwiYmFzZWxpbmVcIlxuICAgICAgPlxuICAgICAgICB7YXZhaWxhYmxlID8gKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8VGV4dCB3aWR0aD1cIjEwMCVcIj5cbiAgICAgICAgICAgICAge2ZlYXR1cmV9XG4gICAgICAgICAgICAgIDxUZXh0IHNjcmVlbnJlYWRlcj4gaW5jbHVkZWQuPC9UZXh0PlxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8VGV4dCB0ZXh0RGVjb3JhdGlvbj1cImxpbmUtdGhyb3VnaFwiIGNvbG9yPVwidGV4dC1kaXNhYmxlZFwiPlxuICAgICAgICAgICAgICB7ZmVhdHVyZX1cbiAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPiBub3QgaW5jbHVkZWQuPC9UZXh0PlxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuXG4gICAgICAgIHtpc05ldyAmJiAoXG4gICAgICAgICAgPEJhZGdlIHNpemU9XCJzbVwiIHZhcmlhbnQ9XCJhY2NlbnRcIiBtbD17eyBfOiA0LCBtZDogMCwgbGc6IDQgfX0+XG4gICAgICAgICAgICBOZXdcbiAgICAgICAgICA8L0JhZGdlPlxuICAgICAgICApfVxuICAgICAgPC9GbGV4Qm94PlxuICAgIDwvRmxleEJveD5cbiAgKTtcbn07XG4iXX0= */").withComponent('li', {
-  target: "ehwi3121",
-  label: "ListItem"
-});
-export const PlanFeature = ({
-  feature,
-  available,
-  isNew,
-  isHighlighted,
-  isMultiple
-}) => {
-  const Icon = isHighlighted ? StarFilledIcon : available ? MiniCheckCircleIcon : CloseCircleIcon;
-  if (isHighlighted) {
-    return /*#__PURE__*/_jsxs(Badge, {
-      size: "sm",
-      variant: "accent",
-      py: 12,
-      mb: 4,
-      ml: '-4px',
-      children: [/*#__PURE__*/_jsx(Icon, {
-        size: 14,
-        mr: 8,
-        flexShrink: 0,
-        "aria-hidden": true
-      }), /*#__PURE__*/_jsxs(Text, {
-        fontSize: "small",
-        children: [feature, /*#__PURE__*/_jsx(Text, {
-          screenreader: true,
-          children: " included."
-        })]
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(FlexBox, {
-    as: ListItem,
-    alignItems: isMultiple ? 'center' : {
-      _: 'center',
-      xs: 'flex-start'
-    },
-    mr: isMultiple ? 'unset' : {
-      _: 'unset',
-      xs: 24,
-      sm: 8
-    },
-    width: isMultiple ? 'unset' : {
-      _: 'unset',
-      xs: '50%'
-    },
-    "data-testid": "plan-feature",
-    children: [/*#__PURE__*/_jsx(Icon, {
-      mr: 8,
-      mt: isMultiple ? 0 : {
-        xs: 4
-      },
-      flexShrink: 0,
-      color: available ? 'feedback-success' : 'gray-600',
-      "aria-hidden": true
-    }), /*#__PURE__*/_jsxs(FlexBox, {
-      flexWrap: {
-        _: 'nowrap',
-        md: 'wrap',
-        lg: 'nowrap'
-      },
-      alignItems: "baseline",
-      children: [available ? /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsxs(Text, {
-          width: "100%",
-          children: [feature, /*#__PURE__*/_jsx(Text, {
-            screenreader: true,
-            children: " included."
-          })]
-        })
-      }) : /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsxs(Text, {
-          textDecoration: "line-through",
-          color: "text-disabled",
-          children: [feature, /*#__PURE__*/_jsx(Text, {
-            screenreader: true,
-            children: " not included."
-          })]
-        })
-      }), isNew && /*#__PURE__*/_jsx(Badge, {
-        size: "sm",
-        variant: "accent",
-        ml: {
-          _: 4,
-          md: 0,
-          lg: 4
-        },
-        children: "New"
-      })]
-    })]
-  }, feature);
-};
+import { Badge, FlexBox, Text } from "@codecademy/gamut";
+import { css } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import React from "react";
+import { CloseCircleIcon, MiniCheckCircleIcon, StarFilledIcon } from "@codecademy/gamut-icons";
+
+//#region src/PlanCard/PlanFeature.tsx
+const ListItem = styled(FlexBox)(css({ listStyleType: "none" })).withComponent("li");
+const PlanFeature = ({ feature, available, isNew, isHighlighted, isMultiple }) => {
+	const Icon = isHighlighted ? StarFilledIcon : available ? MiniCheckCircleIcon : CloseCircleIcon;
+	if (isHighlighted) return /* @__PURE__ */ React.createElement(Badge, {
+		size: "sm",
+		variant: "accent",
+		py: 12,
+		mb: 4,
+		ml: "-4px"
+	}, /* @__PURE__ */ React.createElement(Icon, {
+		size: 14,
+		mr: 8,
+		flexShrink: 0,
+		"aria-hidden": true
+	}), /* @__PURE__ */ React.createElement(Text, { fontSize: "small" }, feature, /* @__PURE__ */ React.createElement(Text, { screenreader: true }, " included.")));
+	return /* @__PURE__ */ React.createElement(FlexBox, {
+		as: ListItem,
+		key: feature,
+		alignItems: isMultiple ? "center" : {
+			_: "center",
+			xs: "flex-start"
+		},
+		mr: isMultiple ? "unset" : {
+			_: "unset",
+			xs: 24,
+			sm: 8
+		},
+		width: isMultiple ? "unset" : {
+			_: "unset",
+			xs: "50%"
+		},
+		"data-testid": "plan-feature"
+	}, /* @__PURE__ */ React.createElement(Icon, {
+		mr: 8,
+		mt: isMultiple ? 0 : { xs: 4 },
+		flexShrink: 0,
+		color: available ? "feedback-success" : "gray-600",
+		"aria-hidden": true
+	}), /* @__PURE__ */ React.createElement(FlexBox, {
+		flexWrap: {
+			_: "nowrap",
+			md: "wrap",
+			lg: "nowrap"
+		},
+		alignItems: "baseline"
+	}, available ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { width: "100%" }, feature, /* @__PURE__ */ React.createElement(Text, { screenreader: true }, " included."))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, {
+		textDecoration: "line-through",
+		color: "text-disabled"
+	}, feature, /* @__PURE__ */ React.createElement(Text, { screenreader: true }, " not included."))), isNew && /* @__PURE__ */ React.createElement(Badge, {
+		size: "sm",
+		variant: "accent",
+		ml: {
+			_: 4,
+			md: 0,
+			lg: 4
+		}
+	}, "New")));
+};
+
+//#endregion
+export { PlanFeature };
+//# sourceMappingURL=PlanFeature.js.map

package/dist/PlanCard/PlanFeature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanFeature.js","names":["Badge","FlexBox","Text","CloseCircleIcon","MiniCheckCircleIcon","StarFilledIcon","css","styled","React","ListItem","listStyleType","withComponent","PlanFeature","feature","available","isNew","isHighlighted","isMultiple","Icon","size","variant","py","mb","ml","mr","flexShrink","aria-hidden","fontSize","screenreader","as","key","alignItems","_","xs","sm","width","data-testid","mt","color","flexWrap","md","lg","textDecoration"],"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,MAAMS,WAAWF,OAAON,QAAAA,CAASK,IAAI,EAAEI,eAAe,QAAO,CAAA,CAAA,CAAIC,cAC/D,KAAA;AAGF,MAAaC,eAA2C,EACtDC,SACAC,WACAC,OACAC,eACAC,iBACD;CACC,MAAMC,OAAOF,gBACTX,iBACAS,YACAV,sBACAD;AAEJ,KAAIa,cACF,QACE,sBAAA,cAAChB,OAAAA;EAAMmB,MAAK;EAAKC,SAAQ;EAASC,IAAI;EAAIC,IAAI;EAAGC,IAAI;IACnD,sBAAA,cAACL,MAAAA;EAAKC,MAAM;EAAIK,IAAI;EAAGC,YAAY;EAAGC,eAAAA;KACtC,sBAAA,cAACxB,MAAAA,EAAKyB,UAAS,WACZd,SACD,sBAAA,cAACX,MAAAA,EAAK0B,cAAAA,QAAa,aAAA,CAAA,CAAA;AAM3B,QACE,sBAAA,cAAC3B,SAAAA;EACC4B,IAAIpB;EACJqB,KAAKjB;EACLkB,YAAYd,aAAa,WAAW;GAAEe,GAAG;GAAUC,IAAI;GAAa;EACpET,IAAIP,aAAa,UAAU;GAAEe,GAAG;GAASC,IAAI;GAAIC,IAAI;GAAE;EACvDC,OAAOlB,aAAa,UAAU;GAAEe,GAAG;GAASC,IAAI;GAAM;EACtDG,eAAY;IAEZ,sBAAA,cAAClB,MAAAA;EACCM,IAAI;EACJa,IAAIpB,aAAa,IAAI,EAAEgB,IAAI,GAAE;EAC7BR,YAAY;EACZa,OAAOxB,YAAY,qBAAqB;EACxCY,eAAAA;KAGF,sBAAA,cAACzB,SAAAA;EACCsC,UAAU;GAAEP,GAAG;GAAUQ,IAAI;GAAQC,IAAI;GAAS;EAClDV,YAAW;IAEVjB,YACC,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACZ,MAAAA,EAAKiC,OAAM,UACTtB,SACD,sBAAA,cAACX,MAAAA,EAAK0B,cAAAA,QAAa,aAAA,CAAA,CAAA,GAIvB,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAAC1B,MAAAA;EAAKwC,gBAAe;EAAeJ,OAAM;IACvCzB,SACD,sBAAA,cAACX,MAAAA,EAAK0B,cAAAA,QAAa,iBAAA,CAAA,CAAA,EAKxBb,SACC,sBAAA,cAACf,OAAAA;EAAMmB,MAAK;EAAKC,SAAQ;EAASG,IAAI;GAAES,GAAG;GAAGQ,IAAI;GAAGC,IAAI;GAAE;IAAG,MAAA,CAAA,CAAA"}

package/dist/PlanCard/PopularBadge.cjs

@@ -0,0 +1,18 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/PlanCard/PopularBadge.tsx
+const PopularBadge = (props) => /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+	position: "absolute",
+	top: -10,
+	...props
+}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Badge, {
+	variant: "accent",
+	size: "sm"
+}, "Most popular"));
+
+//#endregion
+exports.PopularBadge = PopularBadge;
+//# sourceMappingURL=PopularBadge.cjs.map

package/dist/PlanCard/PopularBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopularBadge.cjs","names":["Badge","FlexBox","React","PopularBadge","props","position","top","variant","size"],"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,MAAaG,gBAAwCC,UACnD,8BAAA,cAACH,2BAAAA;CAAQI,UAAS;CAAWC,KAAK;CAAM,GAAGF;GACzC,8BAAA,cAACJ,yBAAAA;CAAMO,SAAQ;CAASC,MAAK;GAAK,eAAA,CAAA"}

package/dist/PlanCard/PopularBadge.js

@@ -1,13 +1,16 @@
-import { Badge, FlexBox } from '@codecademy/gamut';
-import React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const PopularBadge = props => /*#__PURE__*/_jsx(FlexBox, {
-  position: "absolute",
-  top: -10,
-  ...props,
-  children: /*#__PURE__*/_jsx(Badge, {
-    variant: "accent",
-    size: "sm",
-    children: "Most popular"
-  })
-});
+import { Badge, FlexBox } from "@codecademy/gamut";
+import React from "react";
+
+//#region src/PlanCard/PopularBadge.tsx
+const PopularBadge = (props) => /* @__PURE__ */ React.createElement(FlexBox, {
+	position: "absolute",
+	top: -10,
+	...props
+}, /* @__PURE__ */ React.createElement(Badge, {
+	variant: "accent",
+	size: "sm"
+}, "Most popular"));
+
+//#endregion
+export { PopularBadge };
+//# sourceMappingURL=PopularBadge.js.map

package/dist/PlanCard/PopularBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopularBadge.js","names":["Badge","FlexBox","React","PopularBadge","props","position","top","variant","size"],"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,MAAaG,gBAAwCC,UACnD,sBAAA,cAACH,SAAAA;CAAQI,UAAS;CAAWC,KAAK;CAAM,GAAGF;GACzC,sBAAA,cAACJ,OAAAA;CAAMO,SAAQ;CAASC,MAAK;GAAK,eAAA,CAAA"}

package/dist/PlanCard/PricingAmount.cjs

@@ -0,0 +1,85 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_types = require('./types.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/PlanCard/PricingAmount.tsx
+const Amount = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.Text, {
+	target: "e12vo0d50",
+	label: "brand-Amount"
+})("font-weight:bold;color:", _codecademy_gamut_styles.theme.colors.text, ";font-size:", ({ isMultiple }) => isMultiple ? "44px" : "64px", ";line-height:", ({ isMultiple }) => isMultiple ? "64px" : "80px", ";", _codecademy_gamut_styles.theme.breakpoints.xl, "{font-size:64px;line-height:80px;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BsYW5DYXJkL1ByaWNpbmdBbW91bnQudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvUGxhbkNhcmQvUHJpY2luZ0Ftb3VudC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIEN1cnJlbmN5LFxuICBnZXRDdXJyZW5jeVByZWZpeCxcbiAgZ2V0Q3VycmVuY3lTeW1ib2wsXG4gIFBsYW5UeXBlLFxufSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgQW1vdW50ID0gc3R5bGVkKFRleHQpPHsgaXNNdWx0aXBsZTogYm9vbGVhbiB9PmBcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIGNvbG9yOiAke3RoZW1lLmNvbG9ycy50ZXh0fTtcbiAgZm9udC1zaXplOiAkeyh7IGlzTXVsdGlwbGUgfSkgPT4gKGlzTXVsdGlwbGUgPyAnNDRweCcgOiAnNjRweCcpfTtcbiAgbGluZS1oZWlnaHQ6ICR7KHsgaXNNdWx0aXBsZSB9KSA9PiAoaXNNdWx0aXBsZSA/ICc2NHB4JyA6ICc4MHB4Jyl9O1xuICAke3RoZW1lLmJyZWFrcG9pbnRzLnhsfSB7XG4gICAgZm9udC1zaXplOiA2NHB4O1xuICAgIGxpbmUtaGVpZ2h0OiA4MHB4O1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJpY2luZ0Ftb3VudFByb3BzIHtcbiAgcHJvZHVjdDogUGxhblR5cGU7XG4gIHByaWNlOiBzdHJpbmc7XG4gIG1vbnRobHlQcmljZT86IHN0cmluZztcbiAgY3VycmVuY3k6IEN1cnJlbmN5O1xuICB0ZXJtTW9udGhzPzogbnVtYmVyO1xuICBjb21wYWN0PzogYm9vbGVhbjtcbiAgaXNNdWx0aXBsZTogYm9vbGVhbjtcbiAgaW5VcHNlbGxNb2RhbD86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBjb25zdCBQcmljaW5nQW1vdW50OiBSZWFjdC5GQzxQcmljaW5nQW1vdW50UHJvcHM+ID0gKHtcbiAgY3VycmVuY3ksXG4gIG1vbnRobHlQcmljZSxcbiAgcHJvZHVjdCxcbiAgcHJpY2UsXG4gIHRlcm1Nb250aHMsXG4gIGNvbXBhY3QgPSBmYWxzZSxcbiAgaXNNdWx0aXBsZSxcbiAgaW5VcHNlbGxNb2RhbCA9IGZhbHNlLFxufSkgPT4ge1xuICBjb25zdCBjeWNsZSA9IHRlcm1Nb250aHMgPT09IDEgPyAnbW9udGhseScgOiAnYW5udWFsbHknO1xuICBjb25zdCBbZG9sbGFycywgY2VudHNdID0gcHJpY2Uuc3BsaXQoJy4nKTtcbiAgbGV0IGFyaWFMYWJlbCA9IGAke2dldEN1cnJlbmN5UHJlZml4KGN1cnJlbmN5KX0ke2dldEN1cnJlbmN5U3ltYm9sKFxuICAgIGN1cnJlbmN5XG4gICl9JHtkb2xsYXJzfSR7Y2VudHMgPyBgLiR7Y2VudHN9YCA6ICcnfWA7XG4gIGlmIChwcm9kdWN0ICE9PSAnYmFzaWMnKSB7XG4gICAgYXJpYUxhYmVsICs9IGAgYSBtb250aCwgYmlsbGVkICR7Y3ljbGV9YDtcbiAgICBpZiAoaW5VcHNlbGxNb2RhbCkgYXJpYUxhYmVsICs9ICcsIG1vbnRobHkgcHJpY2luZyBhbHNvIGF2YWlsYWJsZSc7XG4gICAgaWYgKG1vbnRobHlQcmljZSkge1xuICAgICAgYXJpYUxhYmVsICs9IGAgb3IgJHtnZXRDdXJyZW5jeVByZWZpeChjdXJyZW5jeSl9JHtnZXRDdXJyZW5jeVN5bWJvbChcbiAgICAgICAgY3VycmVuY3lcbiAgICAgICl9JHttb250aGx5UHJpY2V9IGJpbGxlZCBtb250aGx5YDtcbiAgICB9XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8RmxleEJveFxuICAgICAgICBkYXRhLXRlc3RpZD1cInByaWNpbmctYW1vdW50XCJcbiAgICAgICAgbGluZUhlaWdodD1cInRpdGxlXCJcbiAgICAgICAgbWI9e2NvbXBhY3QgPyAwIDogOH1cbiAgICAgICAgY29sdW1uXG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgPlxuICAgICAgICA8VGV4dCBzY3JlZW5yZWFkZXIgZGF0YS10ZXN0aWQ9XCJwcmljaW5nLWFtb3VudC1sYWJlbFwiPlxuICAgICAgICAgIHthcmlhTGFiZWx9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICAgey8qIGZvciBzY3JlZW4gcmVhZGVyIG9wdGltaXphdGlvbiAqL31cbiAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgICAgIHJvd1xuICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgIGhlaWdodD17aXNNdWx0aXBsZSA/IHsgXzogNTAsIHhsOiAndW5zZXQnIH0gOiAndW5zZXQnfVxuICAgICAgICA+XG4gICAgICAgICAgPEZsZXhCb3ggbXI9ezR9IGFsaWduSXRlbXM9XCJzdGFydFwiPlxuICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0XCJcbiAgICAgICAgICAgICAgbXQ9e3sgXzogMTIsIHhsOiAxNiB9fVxuICAgICAgICAgICAgICBmb250V2VpZ2h0PVwiYm9sZFwiXG4gICAgICAgICAgICAgIGZvbnRTaXplPXszNH1cbiAgICAgICAgICAgID57YCR7Z2V0Q3VycmVuY3lQcmVmaXgoY3VycmVuY3kpfSR7Z2V0Q3VycmVuY3lTeW1ib2woXG4gICAgICAgICAgICAgIGN1cnJlbmN5XG4gICAgICAgICAgICApfWB9PC9UZXh0PlxuICAgICAgICAgICAgPEFtb3VudCBpc011bHRpcGxlPXtpc011bHRpcGxlfT57YCR7ZG9sbGFyc31gfTwvQW1vdW50PlxuICAgICAgICAgICAge3Byb2R1Y3QgPT09ICdiYXNpYycgPyBudWxsIDogKFxuICAgICAgICAgICAgICA8RmxleEJveCBjb2x1bW4gYWxpZ25JdGVtcz1cImZsZXgtZW5kXCIgbWw9ezR9PlxuICAgICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgICBjb2xvcj1cInRleHRcIlxuICAgICAgICAgICAgICAgICAgZm9udFdlaWdodD1cImJvbGRcIlxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezIyfVxuICAgICAgICAgICAgICAgICAgbXQ9e3sgXzogMTIsIHhsOiAxNiB9fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtjZW50cyA/IGAuJHtjZW50c31gIDogPHNwYW4+Jm5ic3A7PC9zcGFuPn1cbiAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPFRleHQgbXQ9e3sgXzogMCwgeGw6IDQgfX0gY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiPlxuICAgICAgICAgICAgICAgICAgL21vXG4gICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8VGV4dCBjb2xvcj1cInRleHQtc2Vjb25kYXJ5XCIgY2VudGVyIG10PXtjb21wYWN0ID8gMCA6IHsgXzogOCwgeGw6IDAgfX0+XG4gICAgICAgICAge3Byb2R1Y3QgPT09ICdiYXNpYycgPyAoXG4gICAgICAgICAgICA8VGV4dCBtYj17MjR9PkFsd2F5cyBmcmVlPC9UZXh0PlxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICA8PlxuICAgICAgICAgICAgICA8VGV4dCBtYj17Y29tcGFjdCA/IDAgOiA4fSBhcmlhLWhpZGRlbj5cbiAgICAgICAgICAgICAgICB7YEJpbGxlZCAke2N5Y2xlfSR7aW5VcHNlbGxNb2RhbCA/ICcqJyA6ICcnfWB9XG4gICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgPGJyIC8+XG4gICAgICAgICAgICAgIHttb250aGx5UHJpY2UgJiYgKFxuICAgICAgICAgICAgICAgIDxUZXh0IGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICAgICAge2BvciAke2dldEN1cnJlbmN5UHJlZml4KGN1cnJlbmN5KX0ke2dldEN1cnJlbmN5U3ltYm9sKFxuICAgICAgICAgICAgICAgICAgICBjdXJyZW5jeVxuICAgICAgICAgICAgICAgICAgKX0ke21vbnRobHlQcmljZX0gYmlsbGVkIG1vbnRobHlgfVxuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvRmxleEJveD5cbiAgICA8Lz5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWWUifQ== */");
+const PricingAmount = ({ currency, monthlyPrice, product, price, termMonths, compact = false, isMultiple, inUpsellModal = false }) => {
+	const cycle = termMonths === 1 ? "monthly" : "annually";
+	const [dollars, cents] = price.split(".");
+	let ariaLabel = `${require_types.getCurrencyPrefix(currency)}${require_types.getCurrencySymbol(currency)}${dollars}${cents ? `.${cents}` : ""}`;
+	if (product !== "basic") {
+		ariaLabel += ` a month, billed ${cycle}`;
+		if (inUpsellModal) ariaLabel += ", monthly pricing also available";
+		if (monthlyPrice) ariaLabel += ` or ${require_types.getCurrencyPrefix(currency)}${require_types.getCurrencySymbol(currency)}${monthlyPrice} billed monthly`;
+	}
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		"data-testid": "pricing-amount",
+		lineHeight: "title",
+		mb: compact ? 0 : 8,
+		column: true,
+		alignItems: "center"
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		screenreader: true,
+		"data-testid": "pricing-amount-label"
+	}, ariaLabel), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		"aria-hidden": true,
+		row: true,
+		alignItems: "center",
+		height: isMultiple ? {
+			_: 50,
+			xl: "unset"
+		} : "unset"
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		mr: 4,
+		alignItems: "start"
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		color: "text",
+		mt: {
+			_: 12,
+			xl: 16
+		},
+		fontWeight: "bold",
+		fontSize: 34
+	}, `${require_types.getCurrencyPrefix(currency)}${require_types.getCurrencySymbol(currency)}`), /* @__PURE__ */ react.default.createElement(Amount, { isMultiple }, `${dollars}`), product === "basic" ? null : /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		column: true,
+		alignItems: "flex-end",
+		ml: 4
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		color: "text",
+		fontWeight: "bold",
+		fontSize: 22,
+		mt: {
+			_: 12,
+			xl: 16
+		}
+	}, cents ? `.${cents}` : /* @__PURE__ */ react.default.createElement("span", null, "\xA0")), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		mt: {
+			_: 0,
+			xl: 4
+		},
+		color: "text-secondary"
+	}, "/mo")))), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		color: "text-secondary",
+		center: true,
+		mt: compact ? 0 : {
+			_: 8,
+			xl: 0
+		}
+	}, product === "basic" ? /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { mb: 24 }, "Always free") : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		mb: compact ? 0 : 8,
+		"aria-hidden": true
+	}, `Billed ${cycle}${inUpsellModal ? "*" : ""}`), /* @__PURE__ */ react.default.createElement("br", null), monthlyPrice && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { "aria-hidden": true }, `or ${require_types.getCurrencyPrefix(currency)}${require_types.getCurrencySymbol(currency)}${monthlyPrice} billed monthly`)))));
+};
+
+//#endregion
+exports.PricingAmount = PricingAmount;
+//# sourceMappingURL=PricingAmount.cjs.map

package/dist/PlanCard/PricingAmount.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingAmount.cjs","names":["FlexBox","Text","theme","styled","React","getCurrencyPrefix","getCurrencySymbol","Amount","colors","text","isMultiple","breakpoints","xl","PricingAmount","currency","monthlyPrice","product","price","termMonths","compact","inUpsellModal","cycle","dollars","cents","split","ariaLabel","data-testid","lineHeight","mb","column","alignItems","screenreader","aria-hidden","row","height","_","mr","color","mt","fontWeight","fontSize","ml","span","center","br"],"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,MAAMO,SAASJ,6CAAOF,wBAAAA;;;8BAEXC,+BAAMM,OAAOC,MAAI,gBACZ,EAAEC,iBAAkBA,aAAa,SAAS,QAAA,kBACxC,EAAEA,iBAAkBA,aAAa,SAAS,QAAA,KACxDR,+BAAMS,YAAYC,IAAE,sCAAA,s0KAAA;AAiBxB,MAAaC,iBAA+C,EAC1DC,UACAC,cACAC,SACAC,OACAC,YACAC,UAAU,OACVT,YACAU,gBAAgB,YACjB;CACC,MAAMC,QAAQH,eAAe,IAAI,YAAY;CAC7C,MAAM,CAACI,SAASC,SAASN,MAAMO,MAAM,IAAA;CACrC,IAAIC,YAAY,GAAGpB,gCAAkBS,SAAAA,GAAYR,gCAC/CQ,SAAAA,GACEQ,UAAUC,QAAQ,IAAIA,UAAU;AACpC,KAAIP,YAAY,SAAS;AACvBS,eAAa,oBAAoBJ;AACjC,MAAID,cAAeK,cAAa;AAChC,MAAIV,aACFU,cAAa,OAAOpB,gCAAkBS,SAAAA,GAAYR,gCAChDQ,SAAAA,GACEC,aAAa;;AAIrB,QACE,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAACf,2BAAAA;EACC0B,eAAY;EACZC,YAAW;EACXC,IAAIT,UAAU,IAAI;EAClBU,QAAAA;EACAC,YAAW;IAEX,8BAAA,cAAC7B,wBAAAA;EAAK8B,cAAAA;EAAaL,eAAY;IAC5BD,UAAAA,EAGH,8BAAA,cAACzB,2BAAAA;EACCgC,eAAAA;EACAC,KAAAA;EACAH,YAAW;EACXI,QAAQxB,aAAa;GAAEyB,GAAG;GAAIvB,IAAI;GAAQ,GAAI;IAE9C,8BAAA,cAACZ,2BAAAA;EAAQoC,IAAI;EAAGN,YAAW;IACzB,8BAAA,cAAC7B,wBAAAA;EACCoC,OAAM;EACNC,IAAI;GAAEH,GAAG;GAAIvB,IAAI;GAAG;EACpB2B,YAAW;EACXC,UAAU;IACV,GAAGnC,gCAAkBS,SAAAA,GAAYR,gCACjCQ,SAAAA,GACC,EACH,8BAAA,cAACP,QAAAA,EAAmBG,cAAa,GAAGY,UAAS,EAC5CN,YAAY,UAAU,OACrB,8BAAA,cAAChB,2BAAAA;EAAQ6B,QAAAA;EAAOC,YAAW;EAAWW,IAAI;IACxC,8BAAA,cAACxC,wBAAAA;EACCoC,OAAM;EACNE,YAAW;EACXC,UAAU;EACVF,IAAI;GAAEH,GAAG;GAAIvB,IAAI;GAAG;IAEnBW,QAAQ,IAAIA,UAAU,8BAAA,cAACmB,QAAAA,MAAK,OAAA,CAAA,EAE/B,8BAAA,cAACzC,wBAAAA;EAAKqC,IAAI;GAAEH,GAAG;GAAGvB,IAAI;GAAE;EAAGyB,OAAM;IAAiB,MAAA,CAAA,CAAA,CAAA,EAO1D,8BAAA,cAACpC,wBAAAA;EAAKoC,OAAM;EAAiBM,QAAAA;EAAOL,IAAInB,UAAU,IAAI;GAAEgB,GAAG;GAAGvB,IAAI;GAAE;IACjEI,YAAY,UACX,8BAAA,cAACf,wBAAAA,EAAK2B,IAAI,MAAI,cAAA,GAEd,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAAC3B,wBAAAA;EAAK2B,IAAIT,UAAU,IAAI;EAAGa,eAAAA;IACxB,UAAUX,QAAQD,gBAAgB,MAAM,KAAI,EAE/C,8BAAA,cAACwB,MAAAA,KAAAA,EACA7B,gBACC,8BAAA,cAACd,wBAAAA,EAAK+B,eAAAA,QACH,MAAM3B,gCAAkBS,SAAAA,GAAYR,gCACnCQ,SAAAA,GACEC,aAAa,iBAAgB,CAAA,CAAA,CAAA,CAAA"}