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

package/dist/PlanCardTeams/index.d.cts

@@ -0,0 +1,13 @@
+import { Currency } from "../PlanCard/types.cjs";
+import React from "react";
+
+//#region src/PlanCardTeams/index.d.ts
+interface PlanCardTeamsProps {
+  currency: Currency;
+  price: string;
+  isBusinessTrial?: boolean;
+}
+declare const PlanCardTeams: React.FC<PlanCardTeamsProps>;
+//#endregion
+export { PlanCardTeams, PlanCardTeamsProps };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/PlanCardTeams/index.tsx"],"mappings":";;;;UAoGiB,kBAAA;EACf,QAAA,EAAU,QAAA;EACV,KAAA;EACA,eAAA;AAAA;AAAA,cAEW,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA"}

package/dist/PlanCardTeams/index.d.ts

@@ -1,8 +1,13 @@
-import React from 'react';
-import { Currency } from '../PlanCard/types';
-export interface PlanCardTeamsProps {
-    currency: Currency;
-    price: string;
-    isBusinessTrial?: boolean;
+import { Currency } from "../PlanCard/types.js";
+import React from "react";
+
+//#region src/PlanCardTeams/index.d.ts
+interface PlanCardTeamsProps {
+  currency: Currency;
+  price: string;
+  isBusinessTrial?: boolean;
 }
-export declare const PlanCardTeams: React.FC<PlanCardTeamsProps>;
+declare const PlanCardTeams: React.FC<PlanCardTeamsProps>;
+//#endregion
+export { PlanCardTeams, PlanCardTeamsProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/PlanCardTeams/index.tsx"],"mappings":";;;;UAoGiB,kBAAA;EACf,QAAA,EAAU,QAAA;EACV,KAAA;EACA,eAAA;AAAA;AAAA,cAEW,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA"}

package/dist/PlanCardTeams/index.js

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

package/dist/PlanCardTeams/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Badge","Box","Card","Column","FlexBox","LayoutGrid","Text","CheckerDense","Background","styled","React","PlanFeature","Currency","getCurrencySymbol","planDetails","StyledList","withComponent","PriceDisplay","currency","USD","price","isBusinessTrial","currencySymbol","mr","alignItems","justifyContent","aria-atomic","variant","ml","mt","color","FeatureList","features","flexDirection","_","flexWrap","xs","maxHeight","md","sm","width","map","feature","key","available","isMultiple","PlanCardTeams","title","tag","tagForScreenReader","display","p","data-testid","bg","px","py","as","aria-hidden","screenreader","size","lg","height","overflow","mb"],"sources":["../../src/PlanCardTeams/index.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  Card,\n  Column,\n  FlexBox,\n  LayoutGrid,\n  Text,\n} from '@codecademy/gamut';\nimport { CheckerDense } from '@codecademy/gamut-patterns';\nimport { Background } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\nimport { PlanFeature } from '../PlanCard/PlanFeature';\nimport { Currency, getCurrencySymbol } from '../PlanCard/types';\nimport { PlanDetails, planDetails } from './consts';\n\nconst StyledList = styled(FlexBox)`\n  padding-left: 0;\n  margin-bottom: 0;\n  gap: 20;\n`.withComponent('ul');\n\ninterface PriceDisplayProps {\n  currency: Currency;\n  price: string;\n  isBusinessTrial?: boolean;\n}\nconst PriceDisplay: React.FC<PriceDisplayProps> = ({\n  currency = Currency.USD,\n  price,\n  isBusinessTrial = false,\n}) => {\n  const currencySymbol = getCurrencySymbol(currency);\n  return (\n    <>\n      <FlexBox\n        mr={32}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        aria-atomic=\"true\"\n      >\n        {isBusinessTrial ? (\n          <Text variant=\"title-md\" ml={8} mt={16}>\n            Try Teams free for 14 days\n          </Text>\n        ) : (\n          <>\n            <Text variant=\"title-sm\">{currencySymbol}</Text>\n            <Text variant=\"title-lg\" ml={8}>\n              {price}\n            </Text>\n          </>\n        )}\n      </FlexBox>\n      <FlexBox\n        mr={32}\n        alignItems=\"flexStart\"\n        justifyContent=\"center\"\n        aria-atomic=\"true\"\n      >\n        {isBusinessTrial ? (\n          ''\n        ) : (\n          <Text color=\"text-secondary\">annually, per user</Text>\n        )}\n      </FlexBox>\n    </>\n  );\n};\n\nconst FeatureList: React.FC<{ features: PlanDetails['features'] }> = ({\n  features,\n}) => (\n  <StyledList\n    flexDirection={{ _: 'column' }}\n    flexWrap={{ _: 'nowrap', xs: 'wrap' }}\n    maxHeight={{\n      _: 'unset',\n      md: 120,\n      sm: 128,\n      xs: 176,\n    }}\n    width={{\n      _: 'unset',\n      xs: '100%',\n    }}\n  >\n    {features.map((feature) => (\n      <PlanFeature\n        key={feature}\n        feature={feature}\n        available\n        isMultiple={false}\n      />\n    ))}\n  </StyledList>\n);\n\nexport interface PlanCardTeamsProps {\n  currency: Currency;\n  price: string;\n  isBusinessTrial?: boolean;\n}\nexport const PlanCardTeams: React.FC<PlanCardTeamsProps> = ({\n  currency,\n  price,\n  isBusinessTrial = false,\n}) => {\n  const { title, tag, tagForScreenReader, features } = planDetails;\n\n  return (\n    <Card display=\"flex\" flexDirection=\"column\" p={0} data-testid=\"card\">\n      <Background\n        bg=\"navy\"\n        display=\"flex\"\n        justifyContent=\"space-between\"\n        px={16}\n        py={12}\n      >\n        <Text variant=\"title-xs\" as=\"p\">\n          {title}\n        </Text>\n        <Badge variant=\"tertiary\" ml={{ _: 32, xs: 0, md: 32 }}>\n          <Text aria-hidden>{tag}</Text>\n          <Text screenreader>{tagForScreenReader}</Text>\n        </Badge>\n      </Background>\n      <LayoutGrid px={40} py={24}>\n        <Column size={{ _: 12, lg: 4 }}>\n          <PriceDisplay\n            price={price}\n            currency={currency}\n            isBusinessTrial={isBusinessTrial}\n          />\n          <Box\n            height=\"1px\"\n            overflow=\"hidden\"\n            display={{ _: 'block', lg: 'none' }}\n            mb={24}\n            mt={16}\n          >\n            <CheckerDense height=\"auto\" />\n          </Box>\n        </Column>\n        <Column size={{ _: 12, lg: 8 }}>\n          <FeatureList features={features} />\n        </Column>\n      </LayoutGrid>\n    </Card>\n  );\n};\n"],"mappings":";;;;;;;;;;AAkBA,MAAMe,aAAaN,OAAOL,QAAQ;;;;EAIhCY,cAAc,KAAA;AAOhB,MAAMC,gBAA6C,EACjDC,WAAWN,SAASO,KACpBC,OACAC,kBAAkB,YACnB;CACC,MAAMC,iBAAiBT,kBAAkBK,SAAAA;AACzC,QACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACd,SAAAA;EACCmB,IAAI;EACJC,YAAW;EACXC,gBAAe;EACfC,eAAY;IAEXL,kBACC,sBAAA,cAACf,MAAAA;EAAKqB,SAAQ;EAAWC,IAAI;EAAGC,IAAI;IAAI,6BAAA,GAIxC,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACvB,MAAAA,EAAKqB,SAAQ,cAAYL,eAAAA,EAC1B,sBAAA,cAAChB,MAAAA;EAAKqB,SAAQ;EAAWC,IAAI;IAC1BR,MAAAA,CAAAA,CAAAA,EAKT,sBAAA,cAAChB,SAAAA;EACCmB,IAAI;EACJC,YAAW;EACXC,gBAAe;EACfC,eAAY;IAEXL,kBACC,KAEA,sBAAA,cAACf,MAAAA,EAAKwB,OAAM,oBAAiB,qBAAA,CAAA,CAAA;;AAOvC,MAAMC,eAAgE,EACpEC,eAEA,sBAAA,cAACjB,YAAAA;CACCkB,eAAe,EAAEC,GAAG,UAAS;CAC7BC,UAAU;EAAED,GAAG;EAAUE,IAAI;EAAO;CACpCC,WAAW;EACTH,GAAG;EACHI,IAAI;EACJC,IAAI;EACJH,IAAI;EACN;CACAI,OAAO;EACLN,GAAG;EACHE,IAAI;EACN;GAECJ,SAASS,KAAKC,YACb,sBAAA,cAAC/B,aAAAA;CACCgC,KAAKD;CACIA;CACTE,WAAAA;CACAC,YAAY;;AAWpB,MAAaC,iBAA+C,EAC1D5B,UACAE,OACAC,kBAAkB,YACnB;CACC,MAAM,EAAE0B,OAAOC,KAAKC,oBAAoBjB,aAAalB;AAErD,QACE,sBAAA,cAACZ,MAAAA;EAAKgD,SAAQ;EAAOjB,eAAc;EAASkB,GAAG;EAAGC,eAAY;IAC5D,sBAAA,cAAC5C,YAAAA;EACC6C,IAAG;EACHH,SAAQ;EACRzB,gBAAe;EACf6B,IAAI;EACJC,IAAI;IAEJ,sBAAA,cAACjD,MAAAA;EAAKqB,SAAQ;EAAW6B,IAAG;IACzBT,MAAAA,EAEH,sBAAA,cAAC/C,OAAAA;EAAM2B,SAAQ;EAAWC,IAAI;GAAEM,GAAG;GAAIE,IAAI;GAAGE,IAAI;GAAG;IACnD,sBAAA,cAAChC,MAAAA,EAAKmD,eAAAA,QAAaT,IAAAA,EACnB,sBAAA,cAAC1C,MAAAA,EAAKoD,cAAAA,QAAcT,mBAAAA,CAAAA,CAAAA,EAGxB,sBAAA,cAAC5C,YAAAA;EAAWiD,IAAI;EAAIC,IAAI;IACtB,sBAAA,cAACpD,QAAAA,EAAOwD,MAAM;EAAEzB,GAAG;EAAI0B,IAAI;EAAE,IAC3B,sBAAA,cAAC3C,cAAAA;EACQG;EACGF;EACOG;KAEnB,sBAAA,cAACpB,KAAAA;EACC4D,QAAO;EACPC,UAAS;EACTZ,SAAS;GAAEhB,GAAG;GAAS0B,IAAI;GAAO;EAClCG,IAAI;EACJlC,IAAI;IAEJ,sBAAA,cAACtB,cAAAA,EAAasD,QAAO,aAGzB,sBAAA,cAAC1D,QAAAA,EAAOwD,MAAM;EAAEzB,GAAG;EAAI0B,IAAI;EAAE,IAC3B,sBAAA,cAAC7B,aAAAA,EAAsBC"}

package/dist/PricingSection/ConditionalColorMode.cjs

@@ -0,0 +1,11 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+
+//#region src/PricingSection/ConditionalColorMode.tsx
+const ConditionalColorMode = ({ condition, children }) => {
+	return condition ? /* @__PURE__ */ React.createElement(_codecademy_gamut_styles.ColorMode, { mode: "dark" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+
+//#endregion
+exports.ConditionalColorMode = ConditionalColorMode;
+//# sourceMappingURL=ConditionalColorMode.cjs.map

package/dist/PricingSection/ConditionalColorMode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalColorMode.cjs","names":["ColorMode","ConditionalColorMode","condition","children","mode"],"sources":["../../src/PricingSection/ConditionalColorMode.tsx"],"sourcesContent":["import { ColorMode } from '@codecademy/gamut-styles';\n\nexport const ConditionalColorMode: React.FC<{\n  condition: boolean;\n  children: React.ReactNode;\n}> = ({ condition, children }) => {\n  return condition ? (\n    <ColorMode mode=\"dark\">{children}</ColorMode>\n  ) : (\n    <>{children}</>\n  );\n};\n"],"mappings":";;;;AAEA,MAAaC,wBAGP,EAAEC,WAAWC,eAAU;AAC3B,QAAOD,YACL,sBAAA,cAACF,oCAAAA,EAAUI,MAAK,UAAQD,SAAAA,GAExB,sBAAA,cAAA,MAAA,UAAA,MAAGA,SAAAA"}

package/dist/PricingSection/ConditionalColorMode.js

@@ -1,13 +1,10 @@
-import { ColorMode } from '@codecademy/gamut-styles';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export const ConditionalColorMode = ({
-  condition,
-  children
-}) => {
-  return condition ? /*#__PURE__*/_jsx(ColorMode, {
-    mode: "dark",
-    children: children
-  }) : /*#__PURE__*/_jsx(_Fragment, {
-    children: children
-  });
-};
+import { ColorMode } from "@codecademy/gamut-styles";
+
+//#region src/PricingSection/ConditionalColorMode.tsx
+const ConditionalColorMode = ({ condition, children }) => {
+	return condition ? /* @__PURE__ */ React.createElement(ColorMode, { mode: "dark" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+
+//#endregion
+export { ConditionalColorMode };
+//# sourceMappingURL=ConditionalColorMode.js.map

package/dist/PricingSection/ConditionalColorMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalColorMode.js","names":["ColorMode","ConditionalColorMode","condition","children","mode"],"sources":["../../src/PricingSection/ConditionalColorMode.tsx"],"sourcesContent":["import { ColorMode } from '@codecademy/gamut-styles';\n\nexport const ConditionalColorMode: React.FC<{\n  condition: boolean;\n  children: React.ReactNode;\n}> = ({ condition, children }) => {\n  return condition ? (\n    <ColorMode mode=\"dark\">{children}</ColorMode>\n  ) : (\n    <>{children}</>\n  );\n};\n"],"mappings":";;;AAEA,MAAaC,wBAGP,EAAEC,WAAWC,eAAU;AAC3B,QAAOD,YACL,sBAAA,cAACF,WAAAA,EAAUI,MAAK,UAAQD,SAAAA,GAExB,sBAAA,cAAA,MAAA,UAAA,MAAGA,SAAAA"}

package/dist/PricingSection/PricingCard/PricingAmount.cjs

@@ -0,0 +1,82 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_types = require('../types.cjs');
+const require_types$1 = 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/PricingSection/PricingCard/PricingAmount.tsx
+const Amount = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.Text, {
+	target: "e1qyn9kn0",
+	label: "brand-Amount"
+})("font-weight:bold;color:black;font-size:44px;line-height:64px;", _codecademy_gamut_styles.theme.breakpoints.xl, "{font-size:64px;line-height:80px;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1ByaWNpbmdTZWN0aW9uL1ByaWNpbmdDYXJkL1ByaWNpbmdBbW91bnQudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvUHJpY2luZ1NlY3Rpb24vUHJpY2luZ0NhcmQvUHJpY2luZ0Ftb3VudC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmxleEJveCwgSGlkZGVuVGV4dCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFByb2R1Y3QgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBBbGxDdXJyZW5jeSwgZ2V0Q3VycmVuY3lTeW1ib2wgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgQW1vdW50ID0gc3R5bGVkKFRleHQpYFxuICBmb250LXdlaWdodDogYm9sZDtcbiAgY29sb3I6IGJsYWNrO1xuICBmb250LXNpemU6IDQ0cHg7XG4gIGxpbmUtaGVpZ2h0OiA2NHB4O1xuICAke3RoZW1lLmJyZWFrcG9pbnRzLnhsfSB7XG4gICAgZm9udC1zaXplOiA2NHB4O1xuICAgIGxpbmUtaGVpZ2h0OiA4MHB4O1xuICB9XG5gO1xuXG50eXBlIFByaWNpbmdBbW91bnRQcm9wcyA9IHtcbiAgcHJvZHVjdDogUHJvZHVjdDtcbiAgcHJpY2U6IHN0cmluZztcbiAgbW9udGhseVByaWNlPzogc3RyaW5nO1xuICBjdXJyZW5jeTogQWxsQ3VycmVuY3k7XG4gIHRlcm1Nb250aHM/OiBudW1iZXI7XG4gIGNvbXBhY3Q/OiBib29sZWFuO1xuICBpc1VzZXJJbkluZGlhOiBib29sZWFuO1xufTtcblxuZXhwb3J0IGNvbnN0IFByaWNpbmdBbW91bnQ6IFJlYWN0LkZDPFByaWNpbmdBbW91bnRQcm9wcz4gPSAoe1xuICBjdXJyZW5jeSxcbiAgbW9udGhseVByaWNlLFxuICBwcm9kdWN0LFxuICBwcmljZSxcbiAgdGVybU1vbnRocyxcbiAgY29tcGFjdCA9IGZhbHNlLFxuICBpc1VzZXJJbkluZGlhLFxufSkgPT4ge1xuICBjb25zdCBpc1RlYW1zID0gcHJvZHVjdCA9PT0gUHJvZHVjdC5UZWFtcztcblxuICBjb25zdCBjeWNsZSA9IHRlcm1Nb250aHMgPT09IDEgPyAnbW9udGhseScgOiAnYW5udWFsbHknO1xuICBjb25zdCBbZG9sbGFycywgY2VudHNdID0gcHJpY2Uuc3BsaXQoJy4nKTtcbiAgbGV0IGFyaWFMYWJlbCA9IGAke2dldEN1cnJlbmN5U3ltYm9sKGN1cnJlbmN5KX0ke2RvbGxhcnN9JHtcbiAgICBjZW50cyA/IGAuJHtjZW50c31gIDogJydcbiAgfWA7XG4gIGlmIChwcm9kdWN0ICE9PSBQcm9kdWN0LkJhc2ljKSB7XG4gICAgYXJpYUxhYmVsICs9IGAgYSBtb250aCwgYmlsbGVkICR7Y3ljbGV9YDtcbiAgICBpZiAobW9udGhseVByaWNlKSB7XG4gICAgICBhcmlhTGFiZWwgKz0gYCBvciAke2dldEN1cnJlbmN5U3ltYm9sKFxuICAgICAgICBjdXJyZW5jeVxuICAgICAgKX0ke21vbnRobHlQcmljZX0gYmlsbGVkIG1vbnRobHlgO1xuICAgIH1cbiAgfVxuICBpZiAoaXNUZWFtcykge1xuICAgIGFyaWFMYWJlbCArPSAnLCBwZXIgdXNlci4gRGlzY291bnRzIGF2YWlsYWJsZSBmb3IgZWxpZ2libGUgdGVhbXMnO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJwcmljaW5nLWFtb3VudFwiXG4gICAgICAgIGxpbmVIZWlnaHQ9XCJ0aXRsZVwiXG4gICAgICAgIG1iPXtjb21wYWN0ID8gMCA6IDh9XG4gICAgICAgIGNvbHVtblxuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgID5cbiAgICAgICAgPEhpZGRlblRleHQgZGF0YS10ZXN0aWQ9XCJwcmljaW5nLWFtb3VudC1sYWJlbFwiPnthcmlhTGFiZWx9PC9IaWRkZW5UZXh0PlxuICAgICAgICB7LyogZm9yIHNjcmVlbiByZWFkZXIgb3B0aW1pemF0aW9uICovfVxuICAgICAgICA8RmxleEJveFxuICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgcm93XG4gICAgICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICAgICAgaGVpZ2h0PXt7IF86IDUwLCB4bDogJ3Vuc2V0JyB9fVxuICAgICAgICA+XG4gICAgICAgICAgPEZsZXhCb3ggbXI9ezR9IGFsaWduSXRlbXM9XCJzdGFydFwiPlxuICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgbXQ9e3sgXzogMTIsIHhsOiAxNiB9fVxuICAgICAgICAgICAgICBmb250V2VpZ2h0PVwiYm9sZFwiXG4gICAgICAgICAgICAgIGZvbnRTaXplPXszNH1cbiAgICAgICAgICAgID57YCR7Z2V0Q3VycmVuY3lTeW1ib2woY3VycmVuY3kpfWB9PC9UZXh0PlxuICAgICAgICAgICAgPEFtb3VudD57YCR7ZG9sbGFyc31gfTwvQW1vdW50PlxuICAgICAgICAgICAge3Byb2R1Y3QgPT09IFByb2R1Y3QuQmFzaWMgPyBudWxsIDogKFxuICAgICAgICAgICAgICA8RmxleEJveCBjb2x1bW4gYWxpZ25JdGVtcz1cImZsZXgtZW5kXCIgbWw9ezR9PlxuICAgICAgICAgICAgICAgIDxUZXh0IGZvbnRXZWlnaHQ9XCJib2xkXCIgZm9udFNpemU9ezIyfSBtdD17eyBfOiAxMiwgeGw6IDE2IH19PlxuICAgICAgICAgICAgICAgICAge2NlbnRzID8gYC4ke2NlbnRzfWAgOiA8c3Bhbj4mbmJzcDs8L3NwYW4+fVxuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICA8VGV4dCBtdD17eyBfOiAwLCB4bDogNCB9fSBjb2xvcj1cIm5hdnktNTAwXCI+XG4gICAgICAgICAgICAgICAgICAvbW9cbiAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDxUZXh0IGNvbG9yPVwibmF2eS01MDBcIiBjZW50ZXIgbXQ9e2NvbXBhY3QgPyAwIDogeyBfOiA4LCB4bDogMCB9fT5cbiAgICAgICAgICB7cHJvZHVjdCA9PT0gUHJvZHVjdC5CYXNpYyA/IChcbiAgICAgICAgICAgIDxUZXh0IG1iPXsyNH0+QWx3YXlzIGZyZWU8L1RleHQ+XG4gICAgICAgICAgKSA6IChcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIDxUZXh0IG1iPXtjb21wYWN0ID8gMCA6IDh9IGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICAgIHtpc1RlYW1zXG4gICAgICAgICAgICAgICAgICA/ICdQZXIgdXNlciwgYmlsbGVkIGFubnVhbGx5J1xuICAgICAgICAgICAgICAgICAgOiBpc1VzZXJJbkluZGlhXG4gICAgICAgICAgICAgICAgICA/IGBQZXIgbW9udGgsIHBhaWQgJHtjeWNsZX1gXG4gICAgICAgICAgICAgICAgICA6IGBCaWxsZWQgJHtjeWNsZX1gfVxuICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgIDxiciAvPlxuICAgICAgICAgICAgICB7bW9udGhseVByaWNlICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dCBhcmlhLWhpZGRlbj5cbiAgICAgICAgICAgICAgICAgIHtgb3IgJHtnZXRDdXJyZW5jeVN5bWJvbChjdXJyZW5jeSl9JHttb250aGx5UHJpY2V9ICR7XG4gICAgICAgICAgICAgICAgICAgIGlzVXNlckluSW5kaWEgPyAncGFpZCcgOiAnYmlsbGVkJ1xuICAgICAgICAgICAgICAgICAgfSBtb250aGx5YH1cbiAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIHtpc1RlYW1zICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dCBhcmlhLWhpZGRlbj5EaXNjb3VudHMgYXZhaWxhYmxlIGZvciBlbGlnaWJsZSB0ZWFtczwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvRmxleEJveD5cbiAgICA8Lz5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWUifQ== */");
+const PricingAmount = ({ currency, monthlyPrice, product, price, termMonths, compact = false, isUserInIndia }) => {
+	const isTeams = product === require_types.Product.Teams;
+	const cycle = termMonths === 1 ? "monthly" : "annually";
+	const [dollars, cents] = price.split(".");
+	let ariaLabel = `${require_types$1.getCurrencySymbol(currency)}${dollars}${cents ? `.${cents}` : ""}`;
+	if (product !== require_types.Product.Basic) {
+		ariaLabel += ` a month, billed ${cycle}`;
+		if (monthlyPrice) ariaLabel += ` or ${require_types$1.getCurrencySymbol(currency)}${monthlyPrice} billed monthly`;
+	}
+	if (isTeams) ariaLabel += ", per user. Discounts available for eligible teams";
+	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.HiddenText, { "data-testid": "pricing-amount-label" }, ariaLabel), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		"aria-hidden": true,
+		row: true,
+		alignItems: "center",
+		height: {
+			_: 50,
+			xl: "unset"
+		}
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		mr: 4,
+		alignItems: "start"
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		mt: {
+			_: 12,
+			xl: 16
+		},
+		fontWeight: "bold",
+		fontSize: 34
+	}, `${require_types$1.getCurrencySymbol(currency)}`), /* @__PURE__ */ react.default.createElement(Amount, null, `${dollars}`), product === require_types.Product.Basic ? null : /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		column: true,
+		alignItems: "flex-end",
+		ml: 4
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.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: "navy-500"
+	}, "/mo")))), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		color: "navy-500",
+		center: true,
+		mt: compact ? 0 : {
+			_: 8,
+			xl: 0
+		}
+	}, product === require_types.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
+	}, isTeams ? "Per user, billed annually" : isUserInIndia ? `Per month, paid ${cycle}` : `Billed ${cycle}`), /* @__PURE__ */ react.default.createElement("br", null), monthlyPrice && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { "aria-hidden": true }, `or ${require_types$1.getCurrencySymbol(currency)}${monthlyPrice} ${isUserInIndia ? "paid" : "billed"} monthly`), isTeams && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { "aria-hidden": true }, "Discounts available for eligible teams")))));
+};
+
+//#endregion
+exports.PricingAmount = PricingAmount;
+//# sourceMappingURL=PricingAmount.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PricingAmount.cjs","names":["FlexBox","HiddenText","Text","theme","styled","React","Product","getCurrencySymbol","Amount","breakpoints","xl","PricingAmount","currency","monthlyPrice","product","price","termMonths","compact","isUserInIndia","isTeams","Teams","cycle","dollars","cents","split","ariaLabel","Basic","data-testid","lineHeight","mb","column","alignItems","aria-hidden","row","height","_","mr","mt","fontWeight","fontSize","ml","span","color","center","br"],"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,MAAMQ,SAASJ,6CAAOF,wBAAAA;;;oEAKlBC,+BAAMM,YAAYC,IAAE,sCAAA,spKAAA;AAgBxB,MAAaC,iBAA+C,EAC1DC,UACAC,cACAC,SACAC,OACAC,YACAC,UAAU,OACVC,oBACD;CACC,MAAMC,UAAUL,YAAYR,sBAAQc;CAEpC,MAAMC,QAAQL,eAAe,IAAI,YAAY;CAC7C,MAAM,CAACM,SAASC,SAASR,MAAMS,MAAM,IAAA;CACrC,IAAIC,YAAY,GAAGlB,kCAAkBK,SAAAA,GAAYU,UAC/CC,QAAQ,IAAIA,UAAU;AAExB,KAAIT,YAAYR,sBAAQoB,OAAO;AAC7BD,eAAa,oBAAoBJ;AACjC,MAAIR,aACFY,cAAa,OAAOlB,kCAClBK,SAAAA,GACEC,aAAa;;AAGrB,KAAIM,QACFM,cAAa;AAGf,QACE,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAACzB,2BAAAA;EACC2B,eAAY;EACZC,YAAW;EACXC,IAAIZ,UAAU,IAAI;EAClBa,QAAAA;EACAC,YAAW;IAEX,8BAAA,cAAC9B,8BAAAA,EAAW0B,eAAY,0BAAwBF,UAAAA,EAEhD,8BAAA,cAACzB,2BAAAA;EACCgC,eAAAA;EACAC,KAAAA;EACAF,YAAW;EACXG,QAAQ;GAAEC,GAAG;GAAIzB,IAAI;GAAQ;IAE7B,8BAAA,cAACV,2BAAAA;EAAQoC,IAAI;EAAGL,YAAW;IACzB,8BAAA,cAAC7B,wBAAAA;EACCmC,IAAI;GAAEF,GAAG;GAAIzB,IAAI;GAAG;EACpB4B,YAAW;EACXC,UAAU;IACV,GAAGhC,kCAAkBK,SAAAA,GAAW,EAClC,8BAAA,cAACJ,QAAAA,MAAQ,GAAGc,UAAS,EACpBR,YAAYR,sBAAQoB,QAAQ,OAC3B,8BAAA,cAAC1B,2BAAAA;EAAQ8B,QAAAA;EAAOC,YAAW;EAAWS,IAAI;IACxC,8BAAA,cAACtC,wBAAAA;EAAKoC,YAAW;EAAOC,UAAU;EAAIF,IAAI;GAAEF,GAAG;GAAIzB,IAAI;GAAG;IACvDa,QAAQ,IAAIA,UAAU,8BAAA,cAACkB,QAAAA,MAAK,OAAA,CAAA,EAE/B,8BAAA,cAACvC,wBAAAA;EAAKmC,IAAI;GAAEF,GAAG;GAAGzB,IAAI;GAAE;EAAGgC,OAAM;IAAW,MAAA,CAAA,CAAA,CAAA,EAOpD,8BAAA,cAACxC,wBAAAA;EAAKwC,OAAM;EAAWC,QAAAA;EAAON,IAAIpB,UAAU,IAAI;GAAEkB,GAAG;GAAGzB,IAAI;GAAE;IAC3DI,YAAYR,sBAAQoB,QACnB,8BAAA,cAACxB,wBAAAA,EAAK2B,IAAI,MAAI,cAAA,GAEd,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAAC3B,wBAAAA;EAAK2B,IAAIZ,UAAU,IAAI;EAAGe,eAAAA;IACxBb,UACG,8BACAD,gBACA,mBAAmBG,UACnB,UAAUA,QAAO,EAEvB,8BAAA,cAACuB,MAAAA,KAAAA,EACA/B,gBACC,8BAAA,cAACX,wBAAAA,EAAK8B,eAAAA,QACH,MAAMzB,kCAAkBK,SAAAA,GAAYC,aAAa,GAChDK,gBAAgB,SAAS,SAC1B,UAAS,EAGbC,WACC,8BAAA,cAACjB,wBAAAA,EAAK8B,eAAAA,QAAY,yCAAA,CAAA,CAAA,CAAA,CAAA"}