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

package/dist/ProLogoAlt/index.js

@@ -1,26 +1,26 @@
-import { colors } from '@codecademy/gamut-styles';
-import * as React from 'react';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ProLogoAlt = ({
-  ariaLabel = 'Codecademy Pro Logo',
-  backgroundColor = 'yellow',
-  textColor = 'black',
-  width = 50
-}) => /*#__PURE__*/_jsx("svg", {
-  width: width,
-  viewBox: "0 0 95 40",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  "aria-label": ariaLabel,
-  children: /*#__PURE__*/_jsxs("g", {
-    fill: colors[backgroundColor],
-    fillRule: "evenodd",
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "m0 0h74v40h-74zm78 34h17v6h-17z",
-      fill: colors[backgroundColor]
-    }), /*#__PURE__*/_jsx("path", {
-      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",
-      fill: colors[textColor]
-    })]
-  })
-});
+import { colors } from "@codecademy/gamut-styles";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ProLogoAlt/index.tsx
+const ProLogoAlt = ({ ariaLabel = "Codecademy Pro Logo", backgroundColor = "yellow", textColor = "black", width = 50 }) => /* @__PURE__ */ jsx("svg", {
+	width,
+	viewBox: "0 0 95 40",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-label": ariaLabel,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: colors[backgroundColor],
+		fillRule: "evenodd",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "m0 0h74v40h-74zm78 34h17v6h-17z",
+			fill: colors[backgroundColor]
+		}), /* @__PURE__ */ jsx("path", {
+			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",
+			fill: colors[textColor]
+		})]
+	})
+});
+
+//#endregion
+export { ProLogoAlt };

package/dist/ProductFeatureShowcase/index.cjs

@@ -0,0 +1,108 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_PausableImage_index = require('../PausableImage/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
+
+//#region src/ProductFeatureShowcase/index.tsx
+const StyledPattern = (0, _emotion_styled.default)(_codecademy_gamut_patterns.DiagonalBDense)`
+  color: ${({ theme }) => theme.colors.yellow};
+`;
+const StyledBadge = (0, _emotion_styled.default)(_codecademy_gamut.Badge)`
+  display: inline-block;
+  position: relative;
+  top: -0.5rem;
+`;
+const ProductFeatureShowcase = ({ image, displayImageBorder, title, titleBadge, eyebrow, description, cta }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+	bg: "paleYellow",
+	position: "relative",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPattern, {
+		color: "yellow",
+		position: "absolute",
+		left: 0,
+		top: 0,
+		bottom: 0,
+		width: "40%",
+		pointerEvents: "none",
+		display: {
+			_: "none",
+			md: "block"
+		}
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.ContentContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.GridBox, {
+		gridTemplateColumns: {
+			_: "1fr",
+			md: "1fr 1fr"
+		},
+		gap: {
+			_: 48,
+			md: 96
+		},
+		py: {
+			_: 48,
+			md: 64
+		},
+		alignItems: "center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+			position: "relative",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPattern, {
+				color: "yellow",
+				position: "absolute",
+				width: "100vw",
+				top: -48,
+				left: {
+					_: -16,
+					xs: -32,
+					sm: -64
+				},
+				height: "calc(50% + 48px)",
+				pointerEvents: "none",
+				display: { md: "none" }
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				...displayImageBorder ? {
+					borderWidth: 1,
+					border: "solid",
+					borderColor: "navy-400",
+					borderRadius: "lg",
+					overflow: "hidden"
+				} : void 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PausableImage_index.PausableImage, {
+					src: image.src,
+					alt: image.alt
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, { children: [
+			eyebrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				mb: 8,
+				children: eyebrow
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Text, {
+				as: "h2",
+				variant: "title-xl",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+					mr: 8,
+					display: "inline",
+					children: title
+				}), titleBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBadge, {
+					variant: "tertiary",
+					fontSize: 14,
+					children: titleBadge
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				mt: 8,
+				children: description
+			}),
+			cta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.StrokeButton, {
+				href: cta.href,
+				onClick: cta.onClick,
+				mt: 16,
+				children: cta.label
+			})
+		] })]
+	}) })]
+});
+
+//#endregion
+exports.ProductFeatureShowcase = ProductFeatureShowcase;

package/dist/ProductFeatureShowcase/index.d.cts

@@ -0,0 +1,19 @@
+//#region src/ProductFeatureShowcase/index.d.ts
+declare const ProductFeatureShowcase: React.FC<{
+  image: {
+    src: string;
+    alt: string;
+  };
+  displayImageBorder?: boolean;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  titleBadge?: string;
+  eyebrow?: React.ReactNode;
+  cta?: {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  };
+}>;
+//#endregion
+export { ProductFeatureShowcase };

package/dist/ProductFeatureShowcase/index.d.ts

@@ -1,16 +1,19 @@
-export declare const ProductFeatureShowcase: React.FC<{
-    image: {
-        src: string;
-        alt: string;
-    };
-    displayImageBorder?: boolean;
-    title: React.ReactNode;
-    description: React.ReactNode;
-    titleBadge?: string;
-    eyebrow?: React.ReactNode;
-    cta?: {
-        label: string;
-        href?: string;
-        onClick?: () => void;
-    };
+//#region src/ProductFeatureShowcase/index.d.ts
+declare const ProductFeatureShowcase: React.FC<{
+  image: {
+    src: string;
+    alt: string;
+  };
+  displayImageBorder?: boolean;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  titleBadge?: string;
+  eyebrow?: React.ReactNode;
+  cta?: {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  };
 }>;
+//#endregion
+export { ProductFeatureShowcase };

package/dist/ProductFeatureShowcase/index.js

@@ -1,120 +1,106 @@
-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, ContentContainer, GridBox, StrokeButton, Text } from '@codecademy/gamut';
-import { DiagonalBDense } from '@codecademy/gamut-patterns';
-import { PausableImage } from '..';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledPattern = /*#__PURE__*/_styled(DiagonalBDense, {
-  target: "e72vrs1",
-  label: "StyledPattern"
-})("color:", ({
-  theme
-}) => theme.colors.yellow, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qcm9kdWN0RmVhdHVyZVNob3djYXNlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhNEMiLCJmaWxlIjoiLi4vLi4vc3JjL1Byb2R1Y3RGZWF0dXJlU2hvd2Nhc2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQmFkZ2UsXG4gIEJveCxcbiAgQ29udGVudENvbnRhaW5lcixcbiAgR3JpZEJveCxcbiAgU3Ryb2tlQnV0dG9uLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBEaWFnb25hbEJEZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgUGF1c2FibGVJbWFnZSB9IGZyb20gJy4uJztcblxuY29uc3QgU3R5bGVkUGF0dGVybiA9IHN0eWxlZChEaWFnb25hbEJEZW5zZSlgXG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy55ZWxsb3d9O1xuYDtcblxuY29uc3QgU3R5bGVkQmFkZ2UgPSBzdHlsZWQoQmFkZ2UpYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdG9wOiAtMC41cmVtO1xuYDtcblxuZXhwb3J0IGNvbnN0IFByb2R1Y3RGZWF0dXJlU2hvd2Nhc2U6IFJlYWN0LkZDPHtcbiAgaW1hZ2U6IHtcbiAgICBzcmM6IHN0cmluZztcbiAgICBhbHQ6IHN0cmluZztcbiAgfTtcbiAgZGlzcGxheUltYWdlQm9yZGVyPzogYm9vbGVhbjtcbiAgdGl0bGU6IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZGVzY3JpcHRpb246IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGl0bGVCYWRnZT86IHN0cmluZztcbiAgZXllYnJvdz86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgY3RhPzoge1xuICAgIGxhYmVsOiBzdHJpbmc7XG4gICAgaHJlZj86IHN0cmluZztcbiAgICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgfTtcbn0+ID0gKHtcbiAgaW1hZ2UsXG4gIGRpc3BsYXlJbWFnZUJvcmRlcixcbiAgdGl0bGUsXG4gIHRpdGxlQmFkZ2UsXG4gIGV5ZWJyb3csXG4gIGRlc2NyaXB0aW9uLFxuICBjdGEsXG59KSA9PiAoXG4gIDxCb3ggYmc9XCJwYWxlWWVsbG93XCIgcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgIDxTdHlsZWRQYXR0ZXJuXG4gICAgICBjb2xvcj1cInllbGxvd1wiXG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIGxlZnQ9ezB9XG4gICAgICB0b3A9ezB9XG4gICAgICBib3R0b209ezB9XG4gICAgICB3aWR0aD1cIjQwJVwiXG4gICAgICBwb2ludGVyRXZlbnRzPVwibm9uZVwiXG4gICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgbWQ6ICdibG9jaycgfX1cbiAgICAvPlxuICAgIDxDb250ZW50Q29udGFpbmVyPlxuICAgICAgPEdyaWRCb3hcbiAgICAgICAgZ3JpZFRlbXBsYXRlQ29sdW1ucz17eyBfOiAnMWZyJywgbWQ6ICcxZnIgMWZyJyB9fVxuICAgICAgICBnYXA9e3sgXzogNDgsIG1kOiA5NiB9fVxuICAgICAgICBweT17eyBfOiA0OCwgbWQ6IDY0IH19XG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgPlxuICAgICAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgICAgICA8U3R5bGVkUGF0dGVyblxuICAgICAgICAgICAgY29sb3I9XCJ5ZWxsb3dcIlxuICAgICAgICAgICAgcG9zaXRpb249XCJhYnNvbHV0ZVwiXG4gICAgICAgICAgICB3aWR0aD1cIjEwMHZ3XCJcbiAgICAgICAgICAgIHRvcD17LTQ4fVxuICAgICAgICAgICAgbGVmdD17eyBfOiAtMTYsIHhzOiAtMzIsIHNtOiAtNjQgfX1cbiAgICAgICAgICAgIGhlaWdodD1cImNhbGMoNTAlICsgNDhweClcIlxuICAgICAgICAgICAgcG9pbnRlckV2ZW50cz1cIm5vbmVcIlxuICAgICAgICAgICAgZGlzcGxheT17eyBtZDogJ25vbmUnIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgICA8Qm94XG4gICAgICAgICAgICB7Li4uKGRpc3BsYXlJbWFnZUJvcmRlclxuICAgICAgICAgICAgICA/IHtcbiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyOiAnc29saWQnLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICduYXZ5LTQwMCcsXG4gICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICAgICAgICAgICAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA6IHVuZGVmaW5lZCl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFBhdXNhYmxlSW1hZ2Ugc3JjPXtpbWFnZS5zcmN9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICAgIDwvQm94PlxuICAgICAgICA8L0JveD5cbiAgICAgICAgPEJveD5cbiAgICAgICAgICB7ZXllYnJvdyAmJiA8Qm94IG1iPXs4fT57ZXllYnJvd308L0JveD59XG5cbiAgICAgICAgICA8VGV4dCBhcz1cImgyXCIgdmFyaWFudD1cInRpdGxlLXhsXCI+XG4gICAgICAgICAgICA8VGV4dCBtcj17OH0gZGlzcGxheT1cImlubGluZVwiPlxuICAgICAgICAgICAgICB7dGl0bGV9XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICB7dGl0bGVCYWRnZSAmJiAoXG4gICAgICAgICAgICAgIDxTdHlsZWRCYWRnZSB2YXJpYW50PVwidGVydGlhcnlcIiBmb250U2l6ZT17MTR9PlxuICAgICAgICAgICAgICAgIHt0aXRsZUJhZGdlfVxuICAgICAgICAgICAgICA8L1N0eWxlZEJhZGdlPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICA8L1RleHQ+XG5cbiAgICAgICAgICA8VGV4dCBtdD17OH0+e2Rlc2NyaXB0aW9ufTwvVGV4dD5cblxuICAgICAgICAgIHtjdGEgJiYgKFxuICAgICAgICAgICAgPFN0cm9rZUJ1dHRvbiBocmVmPXtjdGEuaHJlZn0gb25DbGljaz17Y3RhLm9uQ2xpY2t9IG10PXsxNn0+XG4gICAgICAgICAgICAgIHtjdGEubGFiZWx9XG4gICAgICAgICAgICA8L1N0cm9rZUJ1dHRvbj5cbiAgICAgICAgICApfVxuICAgICAgICA8L0JveD5cbiAgICAgIDwvR3JpZEJveD5cbiAgICA8L0NvbnRlbnRDb250YWluZXI+XG4gIDwvQm94PlxuKTtcbiJdfQ== */"));
-const StyledBadge = /*#__PURE__*/_styled(Badge, {
-  target: "e72vrs0",
-  label: "StyledBadge"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1nsdp8s",
-  styles: "display:inline-block;position:relative;top:-0.5rem"
-} : {
-  name: "1nsdp8s",
-  styles: "display:inline-block;position:relative;top:-0.5rem/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qcm9kdWN0RmVhdHVyZVNob3djYXNlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9Qcm9kdWN0RmVhdHVyZVNob3djYXNlL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJhZGdlLFxuICBCb3gsXG4gIENvbnRlbnRDb250YWluZXIsXG4gIEdyaWRCb3gsXG4gIFN0cm9rZUJ1dHRvbixcbiAgVGV4dCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgRGlhZ29uYWxCRGVuc2UgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1wYXR0ZXJucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IFBhdXNhYmxlSW1hZ2UgfSBmcm9tICcuLic7XG5cbmNvbnN0IFN0eWxlZFBhdHRlcm4gPSBzdHlsZWQoRGlhZ29uYWxCRGVuc2UpYFxuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMueWVsbG93fTtcbmA7XG5cbmNvbnN0IFN0eWxlZEJhZGdlID0gc3R5bGVkKEJhZGdlKWBcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHRvcDogLTAuNXJlbTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQcm9kdWN0RmVhdHVyZVNob3djYXNlOiBSZWFjdC5GQzx7XG4gIGltYWdlOiB7XG4gICAgc3JjOiBzdHJpbmc7XG4gICAgYWx0OiBzdHJpbmc7XG4gIH07XG4gIGRpc3BsYXlJbWFnZUJvcmRlcj86IGJvb2xlYW47XG4gIHRpdGxlOiBSZWFjdC5SZWFjdE5vZGU7XG4gIGRlc2NyaXB0aW9uOiBSZWFjdC5SZWFjdE5vZGU7XG4gIHRpdGxlQmFkZ2U/OiBzdHJpbmc7XG4gIGV5ZWJyb3c/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGN0YT86IHtcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIGhyZWY/OiBzdHJpbmc7XG4gICAgb25DbGljaz86ICgpID0+IHZvaWQ7XG4gIH07XG59PiA9ICh7XG4gIGltYWdlLFxuICBkaXNwbGF5SW1hZ2VCb3JkZXIsXG4gIHRpdGxlLFxuICB0aXRsZUJhZGdlLFxuICBleWVicm93LFxuICBkZXNjcmlwdGlvbixcbiAgY3RhLFxufSkgPT4gKFxuICA8Qm94IGJnPVwicGFsZVllbGxvd1wiIHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICA8U3R5bGVkUGF0dGVyblxuICAgICAgY29sb3I9XCJ5ZWxsb3dcIlxuICAgICAgcG9zaXRpb249XCJhYnNvbHV0ZVwiXG4gICAgICBsZWZ0PXswfVxuICAgICAgdG9wPXswfVxuICAgICAgYm90dG9tPXswfVxuICAgICAgd2lkdGg9XCI0MCVcIlxuICAgICAgcG9pbnRlckV2ZW50cz1cIm5vbmVcIlxuICAgICAgZGlzcGxheT17eyBfOiAnbm9uZScsIG1kOiAnYmxvY2snIH19XG4gICAgLz5cbiAgICA8Q29udGVudENvbnRhaW5lcj5cbiAgICAgIDxHcmlkQm94XG4gICAgICAgIGdyaWRUZW1wbGF0ZUNvbHVtbnM9e3sgXzogJzFmcicsIG1kOiAnMWZyIDFmcicgfX1cbiAgICAgICAgZ2FwPXt7IF86IDQ4LCBtZDogOTYgfX1cbiAgICAgICAgcHk9e3sgXzogNDgsIG1kOiA2NCB9fVxuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgID5cbiAgICAgICAgPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCI+XG4gICAgICAgICAgPFN0eWxlZFBhdHRlcm5cbiAgICAgICAgICAgIGNvbG9yPVwieWVsbG93XCJcbiAgICAgICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICAgICAgd2lkdGg9XCIxMDB2d1wiXG4gICAgICAgICAgICB0b3A9ey00OH1cbiAgICAgICAgICAgIGxlZnQ9e3sgXzogLTE2LCB4czogLTMyLCBzbTogLTY0IH19XG4gICAgICAgICAgICBoZWlnaHQ9XCJjYWxjKDUwJSArIDQ4cHgpXCJcbiAgICAgICAgICAgIHBvaW50ZXJFdmVudHM9XCJub25lXCJcbiAgICAgICAgICAgIGRpc3BsYXk9e3sgbWQ6ICdub25lJyB9fVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPEJveFxuICAgICAgICAgICAgey4uLihkaXNwbGF5SW1hZ2VCb3JkZXJcbiAgICAgICAgICAgICAgPyB7XG4gICAgICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMSxcbiAgICAgICAgICAgICAgICAgIGJvcmRlcjogJ3NvbGlkJyxcbiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnbmF2eS00MDAnLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiAnbGcnLFxuICAgICAgICAgICAgICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgOiB1bmRlZmluZWQpfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxQYXVzYWJsZUltYWdlIHNyYz17aW1hZ2Uuc3JjfSBhbHQ9e2ltYWdlLmFsdH0gLz5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICAgIDxCb3g+XG4gICAgICAgICAge2V5ZWJyb3cgJiYgPEJveCBtYj17OH0+e2V5ZWJyb3d9PC9Cb3g+fVxuXG4gICAgICAgICAgPFRleHQgYXM9XCJoMlwiIHZhcmlhbnQ9XCJ0aXRsZS14bFwiPlxuICAgICAgICAgICAgPFRleHQgbXI9ezh9IGRpc3BsYXk9XCJpbmxpbmVcIj5cbiAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAge3RpdGxlQmFkZ2UgJiYgKFxuICAgICAgICAgICAgICA8U3R5bGVkQmFkZ2UgdmFyaWFudD1cInRlcnRpYXJ5XCIgZm9udFNpemU9ezE0fT5cbiAgICAgICAgICAgICAgICB7dGl0bGVCYWRnZX1cbiAgICAgICAgICAgICAgPC9TdHlsZWRCYWRnZT5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9UZXh0PlxuXG4gICAgICAgICAgPFRleHQgbXQ9ezh9PntkZXNjcmlwdGlvbn08L1RleHQ+XG5cbiAgICAgICAgICB7Y3RhICYmIChcbiAgICAgICAgICAgIDxTdHJva2VCdXR0b24gaHJlZj17Y3RhLmhyZWZ9IG9uQ2xpY2s9e2N0YS5vbkNsaWNrfSBtdD17MTZ9PlxuICAgICAgICAgICAgICB7Y3RhLmxhYmVsfVxuICAgICAgICAgICAgPC9TdHJva2VCdXR0b24+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9Cb3g+XG4gICAgICA8L0dyaWRCb3g+XG4gICAgPC9Db250ZW50Q29udGFpbmVyPlxuICA8L0JveD5cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { PausableImage } from "../PausableImage/index.js";
+import { Badge, Box, ContentContainer, GridBox, StrokeButton, Text } from "@codecademy/gamut";
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DiagonalBDense } from "@codecademy/gamut-patterns";
+
+//#region src/ProductFeatureShowcase/index.tsx
+const StyledPattern = styled(DiagonalBDense)`
+  color: ${({ theme }) => theme.colors.yellow};
+`;
+const StyledBadge = styled(Badge)`
+  display: inline-block;
+  position: relative;
+  top: -0.5rem;
+`;
+const ProductFeatureShowcase = ({ image, displayImageBorder, title, titleBadge, eyebrow, description, cta }) => /* @__PURE__ */ jsxs(Box, {
+	bg: "paleYellow",
+	position: "relative",
+	children: [/* @__PURE__ */ jsx(StyledPattern, {
+		color: "yellow",
+		position: "absolute",
+		left: 0,
+		top: 0,
+		bottom: 0,
+		width: "40%",
+		pointerEvents: "none",
+		display: {
+			_: "none",
+			md: "block"
+		}
+	}), /* @__PURE__ */ jsx(ContentContainer, { children: /* @__PURE__ */ jsxs(GridBox, {
+		gridTemplateColumns: {
+			_: "1fr",
+			md: "1fr 1fr"
+		},
+		gap: {
+			_: 48,
+			md: 96
+		},
+		py: {
+			_: 48,
+			md: 64
+		},
+		alignItems: "center",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			position: "relative",
+			children: [/* @__PURE__ */ jsx(StyledPattern, {
+				color: "yellow",
+				position: "absolute",
+				width: "100vw",
+				top: -48,
+				left: {
+					_: -16,
+					xs: -32,
+					sm: -64
+				},
+				height: "calc(50% + 48px)",
+				pointerEvents: "none",
+				display: { md: "none" }
+			}), /* @__PURE__ */ jsx(Box, {
+				...displayImageBorder ? {
+					borderWidth: 1,
+					border: "solid",
+					borderColor: "navy-400",
+					borderRadius: "lg",
+					overflow: "hidden"
+				} : void 0,
+				children: /* @__PURE__ */ jsx(PausableImage, {
+					src: image.src,
+					alt: image.alt
+				})
+			})]
+		}), /* @__PURE__ */ jsxs(Box, { children: [
+			eyebrow && /* @__PURE__ */ jsx(Box, {
+				mb: 8,
+				children: eyebrow
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				as: "h2",
+				variant: "title-xl",
+				children: [/* @__PURE__ */ jsx(Text, {
+					mr: 8,
+					display: "inline",
+					children: title
+				}), titleBadge && /* @__PURE__ */ jsx(StyledBadge, {
+					variant: "tertiary",
+					fontSize: 14,
+					children: titleBadge
+				})]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				mt: 8,
+				children: description
+			}),
+			cta && /* @__PURE__ */ jsx(StrokeButton, {
+				href: cta.href,
+				onClick: cta.onClick,
+				mt: 16,
+				children: cta.label
+			})
+		] })]
+	}) })]
 });
-export const ProductFeatureShowcase = ({
-  image,
-  displayImageBorder,
-  title,
-  titleBadge,
-  eyebrow,
-  description,
-  cta
-}) => /*#__PURE__*/_jsxs(Box, {
-  bg: "paleYellow",
-  position: "relative",
-  children: [/*#__PURE__*/_jsx(StyledPattern, {
-    color: "yellow",
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    width: "40%",
-    pointerEvents: "none",
-    display: {
-      _: 'none',
-      md: 'block'
-    }
-  }), /*#__PURE__*/_jsx(ContentContainer, {
-    children: /*#__PURE__*/_jsxs(GridBox, {
-      gridTemplateColumns: {
-        _: '1fr',
-        md: '1fr 1fr'
-      },
-      gap: {
-        _: 48,
-        md: 96
-      },
-      py: {
-        _: 48,
-        md: 64
-      },
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsxs(Box, {
-        position: "relative",
-        children: [/*#__PURE__*/_jsx(StyledPattern, {
-          color: "yellow",
-          position: "absolute",
-          width: "100vw",
-          top: -48,
-          left: {
-            _: -16,
-            xs: -32,
-            sm: -64
-          },
-          height: "calc(50% + 48px)",
-          pointerEvents: "none",
-          display: {
-            md: 'none'
-          }
-        }), /*#__PURE__*/_jsx(Box, {
-          ...(displayImageBorder ? {
-            borderWidth: 1,
-            border: 'solid',
-            borderColor: 'navy-400',
-            borderRadius: 'lg',
-            overflow: 'hidden'
-          } : undefined),
-          children: /*#__PURE__*/_jsx(PausableImage, {
-            src: image.src,
-            alt: image.alt
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Box, {
-        children: [eyebrow && /*#__PURE__*/_jsx(Box, {
-          mb: 8,
-          children: eyebrow
-        }), /*#__PURE__*/_jsxs(Text, {
-          as: "h2",
-          variant: "title-xl",
-          children: [/*#__PURE__*/_jsx(Text, {
-            mr: 8,
-            display: "inline",
-            children: title
-          }), titleBadge && /*#__PURE__*/_jsx(StyledBadge, {
-            variant: "tertiary",
-            fontSize: 14,
-            children: titleBadge
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          mt: 8,
-          children: description
-        }), cta && /*#__PURE__*/_jsx(StrokeButton, {
-          href: cta.href,
-          onClick: cta.onClick,
-          mt: 16,
-          children: cta.label
-        })]
-      })]
-    })
-  })]
-});
+
+//#endregion
+export { ProductFeatureShowcase };

package/dist/QuizScore/index.cjs

@@ -0,0 +1,93 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/QuizScore/index.tsx
+const QuizScore = ({ correctCount, layout = "row", smallerFont, total, numOfRows, colorfulIcons, percentToPass }) => {
+	const isRowLayout = layout === "row";
+	const moreThan5Rows = !isRowLayout && numOfRows && numOfRows > 5;
+	const quizScore = total < 1 ? 0 : Math.round(correctCount / total * 100);
+	const affirmation = quizScore > 70 ? "Great job!" : "Practice makes perfect!";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.GridBox, {
+		gridTemplateColumns: isRowLayout ? {
+			_: "minmax(0,1fr)",
+			md: "1fr min-content 1fr"
+		} : "",
+		gridTemplateRows: isRowLayout ? "" : "min-content 1fr min-content",
+		fontFamily: "accent",
+		gap: {
+			_: 16,
+			sm: 8
+		},
+		mb: {
+			_: !isRowLayout ? 16 : 32,
+			sm: 16
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+				flexDirection: "column",
+				textAlign: "center",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						fontSize: smallerFont ? 34 : 44,
+						children: `${quizScore}%`
+					}),
+					percentToPass && quizScore < percentToPass && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						fontSize: 14,
+						children: `Get ${percentToPass}% to pass`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						fontSize: 14,
+						children: affirmation
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				borderRight: 1,
+				borderBottom: 1,
+				display: {
+					_: "none",
+					xs: "block"
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.GridBox, {
+				gridTemplateColumns: moreThan5Rows ? "repeat(2,minmax(0,max-content))" : layout === "row" ? "repeat(2,minmax(0,max-content))" : {
+					_: "repeat(2,minmax(0,max-content))",
+					xl: "20px 1fr 20px 1fr"
+				},
+				gridTemplateRows: moreThan5Rows ? "1fr 1fr" : "",
+				alignItems: "center",
+				columnGap: 16,
+				justifyContent: "center",
+				display: total === correctCount ? "flex" : "grid",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.CheckFilledIcon, {
+						color: colorfulIcons ? "feedback-success" : "inherit",
+						"aria-hidden": true,
+						size: 24
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						fontSize: smallerFont ? 16 : 22,
+						lineHeight: 2,
+						children: `${correctCount} correct`
+					}),
+					correctCount < total && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.DeleteFilledIcon, {
+						color: colorfulIcons ? "feedback-error" : "inherit",
+						"aria-hidden": true,
+						size: 24
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						fontSize: smallerFont ? 16 : 22,
+						lineHeight: 2,
+						children: `${total - correctCount} to work on`
+					})] })
+				]
+			})
+		]
+	});
+};
+
+//#endregion
+exports.QuizScore = QuizScore;

package/dist/QuizScore/index.d.cts

@@ -0,0 +1,15 @@
+import * as React$1 from "react";
+
+//#region src/QuizScore/index.d.ts
+interface QuizScoreProps {
+  correctCount: number;
+  total: number;
+  layout?: 'row' | 'column';
+  smallerFont?: boolean;
+  numOfRows?: number;
+  colorfulIcons?: boolean;
+  percentToPass?: number;
+}
+declare const QuizScore: React$1.FC<QuizScoreProps>;
+//#endregion
+export { QuizScore };

package/dist/QuizScore/index.d.ts

@@ -1,12 +1,15 @@
-import * as React from 'react';
+import * as React$1 from "react";
+
+//#region src/QuizScore/index.d.ts
 interface QuizScoreProps {
-    correctCount: number;
-    total: number;
-    layout?: 'row' | 'column';
-    smallerFont?: boolean;
-    numOfRows?: number;
-    colorfulIcons?: boolean;
-    percentToPass?: number;
+  correctCount: number;
+  total: number;
+  layout?: 'row' | 'column';
+  smallerFont?: boolean;
+  numOfRows?: number;
+  colorfulIcons?: boolean;
+  percentToPass?: number;
 }
-export declare const QuizScore: React.FC<QuizScoreProps>;
-export {};
+declare const QuizScore: React$1.FC<QuizScoreProps>;
+//#endregion
+export { QuizScore };