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

package/dist/CurriculumCard/index.js

@@ -1,129 +1,119 @@
-import _styled from "@emotion/styled/base";
-import { Box, Card, FlexBox, Text } from '@codecademy/gamut';
-import { pxRem, theme } from '@codecademy/gamut-styles';
-import { useMemo } from 'react';
-import * as React from 'react';
-import { Footer } from './Footer/index';
-import { Image } from './Image/index';
-import { Subtitle } from './Subtitle';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Footer } from "./Footer/index.js";
+import { Image } from "./Image/index.js";
+import { Subtitle } from "./Subtitle/index.js";
+import { Box, Card, FlexBox, Text } from "@codecademy/gamut";
+import { pxRem, theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/CurriculumCard/index.tsx
 const cardHeight = 180;
 const cardStyles = {
-  inProgress: 'yellow',
-  completed: 'navy'
+	inProgress: "yellow",
+	completed: "navy"
 };
-const LineDecoration = /*#__PURE__*/_styled(Box, {
-  target: "eytwivn0",
-  label: "LineDecoration"
-})("border-top:1px solid ", ({
-  inProgress
-}) => inProgress ? theme.colors.navy : theme.colors['navy-200'], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9DdXJyaWN1bHVtQ2FyZC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUVrQyIsImZpbGUiOiIuLi8uLi9zcmMvQ3VycmljdWx1bUNhcmQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBDYXJkLCBGbGV4Qm94LCBIZWFkaW5nVGFncywgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHB4UmVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUYWdDb2xvciB9IGZyb20gJy4vQm90dG9tVGFnL2luZGV4JztcbmltcG9ydCB7IEZvb3RlciB9IGZyb20gJy4vRm9vdGVyL2luZGV4JztcbmltcG9ydCB7IEltYWdlIH0gZnJvbSAnLi9JbWFnZS9pbmRleCc7XG5pbXBvcnQgeyBTdWJ0aXRsZSwgU3VidGl0bGVQcm9wcyB9IGZyb20gJy4vU3VidGl0bGUnO1xuXG5leHBvcnQgdHlwZSBQcm9ncmVzc1N0YXRlID0gJ2luUHJvZ3Jlc3MnIHwgJ2NvbXBsZXRlZCc7XG5cbmV4cG9ydCB0eXBlIEZvb3RlclRleHRWYXJpYW50VHlwZSA9ICdlbnJvbGxlZCcgfCAnaW5Qcm9ncmVzcyc7XG5cbmNvbnN0IGNhcmRIZWlnaHQgPSAxODA7XG5cbmNvbnN0IGNhcmRTdHlsZXMgPSB7XG4gIGluUHJvZ3Jlc3M6ICd5ZWxsb3cnLFxuICBjb21wbGV0ZWQ6ICduYXZ5Jyxcbn0gYXMgY29uc3Q7XG5cbmV4cG9ydCB0eXBlIENhcmRQcm9wcyA9IFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBDYXJkPjtcblxuZXhwb3J0IHR5cGUgQ3VycmljdWx1bUNhcmRQcm9wcyA9IFN1YnRpdGxlUHJvcHMgJiB7XG4gIGJldGE/OiBib29sZWFuO1xuICAvKipcbiAgICogRGlzcGxheXMgdGhlIGN1cnJpY3VsdW0gdHlwZSBhYm92ZSB0aGUgdGl0bGVcbiAgICovXG4gIHRleHQ6IHN0cmluZztcbiAgdGl0bGU6IHN0cmluZztcbiAgaGVhZGluZ0xldmVsPzogSGVhZGluZ1RhZ3M7XG4gIGltYWdlPzogc3RyaW5nO1xuICBpc0Z1bGxTaXplPzogYm9vbGVhbjtcbiAgaXNTdGF0aWNTaXplPzogYm9vbGVhbjtcbiAgcHJvZ3Jlc3NTdGF0ZT86IFByb2dyZXNzU3RhdGU7XG4gIHNob3dQcm9Mb2dvPzogYm9vbGVhbjtcbiAgdGFnPzogc3RyaW5nO1xuICB0YWdDb2xvcj86IFRhZ0NvbG9yO1xuICBzaG93QWx0U3VidGl0bGU/OiBib29sZWFuO1xuICAvKipcbiAgICogQ2hhbmdlcyBJbiBQcm9ncmVzcyBjYXJkIGZvb3RlciB0ZXh0IGZyb20gXCJFbnJvbGxlZC4uLlwiIHRvIFwiSW4gUHJvZ3Jlc3MuLi5cIlxuICAgKi9cbiAgZm9vdGVyVGV4dFZhcmlhbnQ/OiBGb290ZXJUZXh0VmFyaWFudFR5cGU7XG4gIC8qKlxuICAgKiBvcHRpb25hbCB0ZXh0IHRvIGJlIGRpc3BsYXllZCBiZWxvdyBjYXJkIHN1YnRpdGxlXG4gICAqL1xuICBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgLyoqXG4gICAqIGFsbG93cyBkZXNjcmlwdGlvbiB0byBiZSBzaG93biBpbiBjYXJkIGJvZHkuXG4gICAqL1xuICBzaG93RGVzY3JpcHRpb24/OiBib29sZWFuO1xuICAvKipcbiAgICogY2FyZWVyIHBhdGggY2FyZHMgYXJlIGRpc3BsYXllZCB3aXRoIGEgdmFyaWFudCBzdHlsZSAvIGRlY29yYXRpdmUgZWxlbWVudFxuICAgKi9cbiAgc2hvd0NhcmVlclBhdGhWYXJpYW50PzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIGRpc3BsYXlzIGlubmVyIGNvbnRlbnQgd2l0aCBhIGhvcml6b250YWwgb3JpZW50YXRpb25cbiAgICovXG4gIGhvcml6b250YWxPcmllbnRhdGlvbj86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIGN1c3RvbSBtaW5pbXVtIGhlaWdodCBmb3IgY3VycmljdWx1bSBjYXJkIGluIHBpeGVsc1xuICAgKi9cbiAgbWluSGVpZ2h0PzogQ2FyZFByb3BzWydtaW5IZWlnaHQnXTtcbiAgLyoqXG4gICAqIGN1c3RvbSBtaW5pbXVtIHdpZHRoIGZvciBjdXJyaWN1bHVtIGNhcmQgaW4gcGl4ZWxzXG4gICAqL1xuICBtaW5XaWR0aD86IENhcmRQcm9wc1snbWluV2lkdGgnXTtcbn07XG5cbmNvbnN0IExpbmVEZWNvcmF0aW9uID0gc3R5bGVkKEJveClgXG4gIGJvcmRlci10b3A6IDFweCBzb2xpZFxuICAgICR7KHsgaW5Qcm9ncmVzcyB9OiB7IGluUHJvZ3Jlc3M/OiBib29sZWFuIH0pID0+XG4gICAgICBpblByb2dyZXNzID8gdGhlbWUuY29sb3JzLm5hdnkgOiB0aGVtZS5jb2xvcnNbJ25hdnktMjAwJ119O1xuYDtcblxuLyoqXG4gKlxuICogQGRlcHJlY2F0ZWQgIFRoaXMgY29tcG9uZW50IGlzIGRlcHJlY2F0ZWRcbiAqXG4gKiBQbGVhc2UgdXNlIHRoZSBDYXJlZXJQYXRoQ2FyZCwgU2tpbGxQYXRoQ2FyZCwgb3IgQ291cnNlQ2FyZCBpbnN0ZWFkXG4gKi9cblxuZXhwb3J0IGNvbnN0IEN1cnJpY3VsdW1DYXJkOiBSZWFjdC5GQzxDdXJyaWN1bHVtQ2FyZFByb3BzPiA9ICh7XG4gIGJldGEsXG4gIGRpZmZpY3VsdHksXG4gIGRlc2NyaXB0aW9uLFxuICBoZWFkaW5nTGV2ZWwgPSAnaDMnLFxuICBpbWFnZSxcbiAgaXNGdWxsU2l6ZSA9IGZhbHNlLFxuICBpc1N0YXRpY1NpemUgPSBmYWxzZSxcbiAgcHJvZ3Jlc3NTdGF0ZSxcbiAgc2NvcGUsXG4gIHRhZyxcbiAgdGFnQ29sb3IsXG4gIHRleHQsXG4gIHRpdGxlLFxuICBzaG93Q2FyZWVyUGF0aFZhcmlhbnQsXG4gIHNob3dBbHRTdWJ0aXRsZSA9IGZhbHNlLFxuICBmb290ZXJUZXh0VmFyaWFudCA9ICdlbnJvbGxlZCcsXG4gIHNob3dEZXNjcmlwdGlvbixcbiAgZGlmZmljdWx0eVZhcmlhbnQsXG4gIGhvcml6b250YWxPcmllbnRhdGlvbixcbiAgbWluSGVpZ2h0LFxuICBtaW5XaWR0aCxcbiAgc2hvd1Byb0xvZ286IHBybyxcbn0pID0+IHtcbiAgY29uc3QgYm94VmFyaWFudCA9IHByb2dyZXNzU3RhdGUgJiYgY2FyZFN0eWxlc1twcm9ncmVzc1N0YXRlXTtcblxuICBjb25zdCBpc0NhcmVlclBhdGhWYXJpYW50ID1cbiAgICB0ZXh0LnRvTG93ZXJDYXNlKCkgPT09ICdjYXJlZXIgcGF0aCcgJiYgc2hvd0NhcmVlclBhdGhWYXJpYW50O1xuXG4gIGNvbnN0IG1pbmltdW1IZWlnaHQgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAobWluSGVpZ2h0KSByZXR1cm4gbWluSGVpZ2h0O1xuICAgIHJldHVybiBpc1N0YXRpY1NpemVcbiAgICAgID8gcHhSZW0oMjg1KVxuICAgICAgOiBpc0Z1bGxTaXplXG4gICAgICA/IHB4UmVtKGNhcmRIZWlnaHQgKiAyICsgMzIpXG4gICAgICA6IHB4UmVtKGNhcmRIZWlnaHQpO1xuICB9LCBbaXNGdWxsU2l6ZSwgaXNTdGF0aWNTaXplLCBtaW5IZWlnaHRdKTtcblxuICBjb25zdCBjb250ZW50VHlwZSA9IHRleHQgPT09ICdDb3Vyc2UnICYmICFwcm8gPyAnRnJlZSBDb3Vyc2UnIDogdGV4dDtcbiAgcmV0dXJuIChcbiAgICA8Q2FyZFxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj17e1xuICAgICAgICBfOiAnY29sdW1uJyxcbiAgICAgICAgeHM6IGhvcml6b250YWxPcmllbnRhdGlvbiA/ICdyb3cnIDogJ2NvbHVtbicsXG4gICAgICB9fVxuICAgICAgbWluSGVpZ2h0PXttaW5pbXVtSGVpZ2h0fVxuICAgICAgbWluV2lkdGg9e21pbldpZHRofVxuICAgICAgdmFyaWFudD17Ym94VmFyaWFudCA/PyAnd2hpdGUnfVxuICAgICAgaXNJbnRlcmFjdGl2ZVxuICAgICAgcG9zaXRpb249XCJyZWxhdGl2ZVwiXG4gICAgPlxuICAgICAgPEJveFxuICAgICAgICBtYXhXaWR0aD17aG9yaXpvbnRhbE9yaWVudGF0aW9uID8gNDE4IDogJ25vbmUnfVxuICAgICAgICBwcj17eyBfOiAwLCB4czogaG9yaXpvbnRhbE9yaWVudGF0aW9uID8gNDAgOiAwIH19XG4gICAgICA+XG4gICAgICAgIDxUZXh0IGRpc3BsYXk9XCJmbGV4XCIgZm9udFNpemU9ezE0fSBtYj17MTJ9IGZvbnRGYW1pbHk9XCJhY2NlbnRcIj5cbiAgICAgICAgICB7Y29udGVudFR5cGV9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICAgPFRleHQgYXM9e2hlYWRpbmdMZXZlbH0gbWI9ezR9IGZvbnRTaXplPXsyMH0+XG4gICAgICAgICAge3RpdGxlfVxuICAgICAgICA8L1RleHQ+XG4gICAgICAgIHshcHJvZ3Jlc3NTdGF0ZSAmJiAoXG4gICAgICAgICAgPEZsZXhCb3ggZmxleFdyYXA9XCJ3cmFwXCIgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAgPFN1YnRpdGxlXG4gICAgICAgICAgICAgIHNjb3BlPXtzY29wZX1cbiAgICAgICAgICAgICAgZGlmZmljdWx0eT17ZGlmZmljdWx0eX1cbiAgICAgICAgICAgICAgc2hvd0FsdFN1YnRpdGxlPXtzaG93QWx0U3VidGl0bGV9XG4gICAgICAgICAgICAgIGRpZmZpY3VsdHlWYXJpYW50PXtkaWZmaWN1bHR5VmFyaWFudH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICApfVxuICAgICAgICB7aXNDYXJlZXJQYXRoVmFyaWFudCAmJiAoXG4gICAgICAgICAgPExpbmVEZWNvcmF0aW9uIGluUHJvZ3Jlc3M9e3Byb2dyZXNzU3RhdGUgPT09ICdpblByb2dyZXNzJ30gbXk9ezh9IC8+XG4gICAgICAgICl9XG4gICAgICAgIHsoaXNDYXJlZXJQYXRoVmFyaWFudCB8fCBzaG93RGVzY3JpcHRpb24pICYmIChcbiAgICAgICAgICA8VGV4dCBwdD17OH0gcGI9ezE2fSBmb250U2l6ZT17MTR9PlxuICAgICAgICAgICAge2Rlc2NyaXB0aW9ufVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgKX1cbiAgICAgIDwvQm94PlxuICAgICAge2lzRnVsbFNpemUgJiYgaW1hZ2UgJiYgKFxuICAgICAgICA8RmxleEJveFxuICAgICAgICAgIG15PVwiYXV0b1wiXG4gICAgICAgICAgbWw9XCJhdXRvXCJcbiAgICAgICAgICBtcj17aG9yaXpvbnRhbE9yaWVudGF0aW9uID8gMCA6ICdhdXRvJ31cbiAgICAgICAgICBwdD17MTZ9XG4gICAgICAgICAgcGI9e2lzQ2FyZWVyUGF0aFZhcmlhbnQgPyAzMiA6IDB9XG4gICAgICAgICAgcHI9e3sgXzogMCwgeHM6IGhvcml6b250YWxPcmllbnRhdGlvbiA/IDI0IDogMCB9fVxuICAgICAgICA+XG4gICAgICAgICAgPEltYWdlXG4gICAgICAgICAgICBpc1NtYWxsPXtpc0NhcmVlclBhdGhWYXJpYW50fVxuICAgICAgICAgICAgaW1hZ2U9e2ltYWdlfVxuICAgICAgICAgICAgcHJvZ3Jlc3NTdGF0ZT17cHJvZ3Jlc3NTdGF0ZX1cbiAgICAgICAgICAvPlxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICApfVxuICAgICAgPEZvb3RlclxuICAgICAgICBiZXRhPXtiZXRhfVxuICAgICAgICBwcm9ncmVzc1N0YXRlPXtwcm9ncmVzc1N0YXRlfVxuICAgICAgICB0YWc9e3RhZ31cbiAgICAgICAgdGFnQ29sb3I9e3RhZ0NvbG9yfVxuICAgICAgICBmb290ZXJUZXh0VmFyaWFudD17Zm9vdGVyVGV4dFZhcmlhbnR9XG4gICAgICAvPlxuICAgIDwvQ2FyZD5cbiAgKTtcbn07XG4iXX0= */"));
-
+const LineDecoration = styled(Box)`
+  border-top: 1px solid
+    ${({ inProgress }) => inProgress ? theme.colors.navy : theme.colors["navy-200"]};
+`;
 /**
- *
- * @deprecated  This component is deprecated
- *
- * Please use the CareerPathCard, SkillPathCard, or CourseCard instead
- */
+*
+* @deprecated  This component is deprecated
+*
+* Please use the CareerPathCard, SkillPathCard, or CourseCard instead
+*/
+const CurriculumCard = ({ beta, difficulty, description, headingLevel = "h3", image, isFullSize = false, isStaticSize = false, progressState, scope, tag, tagColor, text, title, showCareerPathVariant, showAltSubtitle = false, footerTextVariant = "enrolled", showDescription, difficultyVariant, horizontalOrientation, minHeight, minWidth, showProLogo: pro }) => {
+	const boxVariant = progressState && cardStyles[progressState];
+	const isCareerPathVariant = text.toLowerCase() === "career path" && showCareerPathVariant;
+	const minimumHeight = useMemo(() => {
+		if (minHeight) return minHeight;
+		return isStaticSize ? pxRem(285) : isFullSize ? pxRem(cardHeight * 2 + 32) : pxRem(cardHeight);
+	}, [
+		isFullSize,
+		isStaticSize,
+		minHeight
+	]);
+	return /* @__PURE__ */ jsxs(Card, {
+		display: "flex",
+		flexDirection: {
+			_: "column",
+			xs: horizontalOrientation ? "row" : "column"
+		},
+		minHeight: minimumHeight,
+		minWidth,
+		variant: boxVariant ?? "white",
+		isInteractive: true,
+		position: "relative",
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				maxWidth: horizontalOrientation ? 418 : "none",
+				pr: {
+					_: 0,
+					xs: horizontalOrientation ? 40 : 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						display: "flex",
+						fontSize: 14,
+						mb: 12,
+						fontFamily: "accent",
+						children: text === "Course" && !pro ? "Free Course" : text
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						as: headingLevel,
+						mb: 4,
+						fontSize: 20,
+						children: title
+					}),
+					!progressState && /* @__PURE__ */ jsx(FlexBox, {
+						flexWrap: "wrap",
+						alignItems: "center",
+						children: /* @__PURE__ */ jsx(Subtitle, {
+							scope,
+							difficulty,
+							showAltSubtitle,
+							difficultyVariant
+						})
+					}),
+					isCareerPathVariant && /* @__PURE__ */ jsx(LineDecoration, {
+						inProgress: progressState === "inProgress",
+						my: 8
+					}),
+					(isCareerPathVariant || showDescription) && /* @__PURE__ */ jsx(Text, {
+						pt: 8,
+						pb: 16,
+						fontSize: 14,
+						children: description
+					})
+				]
+			}),
+			isFullSize && image && /* @__PURE__ */ jsx(FlexBox, {
+				my: "auto",
+				ml: "auto",
+				mr: horizontalOrientation ? 0 : "auto",
+				pt: 16,
+				pb: isCareerPathVariant ? 32 : 0,
+				pr: {
+					_: 0,
+					xs: horizontalOrientation ? 24 : 0
+				},
+				children: /* @__PURE__ */ jsx(Image, {
+					isSmall: isCareerPathVariant,
+					image,
+					progressState
+				})
+			}),
+			/* @__PURE__ */ jsx(Footer, {
+				beta,
+				progressState,
+				tag,
+				tagColor,
+				footerTextVariant
+			})
+		]
+	});
+};
 
-export const CurriculumCard = ({
-  beta,
-  difficulty,
-  description,
-  headingLevel = 'h3',
-  image,
-  isFullSize = false,
-  isStaticSize = false,
-  progressState,
-  scope,
-  tag,
-  tagColor,
-  text,
-  title,
-  showCareerPathVariant,
-  showAltSubtitle = false,
-  footerTextVariant = 'enrolled',
-  showDescription,
-  difficultyVariant,
-  horizontalOrientation,
-  minHeight,
-  minWidth,
-  showProLogo: pro
-}) => {
-  const boxVariant = progressState && cardStyles[progressState];
-  const isCareerPathVariant = text.toLowerCase() === 'career path' && showCareerPathVariant;
-  const minimumHeight = useMemo(() => {
-    if (minHeight) return minHeight;
-    return isStaticSize ? pxRem(285) : isFullSize ? pxRem(cardHeight * 2 + 32) : pxRem(cardHeight);
-  }, [isFullSize, isStaticSize, minHeight]);
-  const contentType = text === 'Course' && !pro ? 'Free Course' : text;
-  return /*#__PURE__*/_jsxs(Card, {
-    display: "flex",
-    flexDirection: {
-      _: 'column',
-      xs: horizontalOrientation ? 'row' : 'column'
-    },
-    minHeight: minimumHeight,
-    minWidth: minWidth,
-    variant: boxVariant ?? 'white',
-    isInteractive: true,
-    position: "relative",
-    children: [/*#__PURE__*/_jsxs(Box, {
-      maxWidth: horizontalOrientation ? 418 : 'none',
-      pr: {
-        _: 0,
-        xs: horizontalOrientation ? 40 : 0
-      },
-      children: [/*#__PURE__*/_jsx(Text, {
-        display: "flex",
-        fontSize: 14,
-        mb: 12,
-        fontFamily: "accent",
-        children: contentType
-      }), /*#__PURE__*/_jsx(Text, {
-        as: headingLevel,
-        mb: 4,
-        fontSize: 20,
-        children: title
-      }), !progressState && /*#__PURE__*/_jsx(FlexBox, {
-        flexWrap: "wrap",
-        alignItems: "center",
-        children: /*#__PURE__*/_jsx(Subtitle, {
-          scope: scope,
-          difficulty: difficulty,
-          showAltSubtitle: showAltSubtitle,
-          difficultyVariant: difficultyVariant
-        })
-      }), isCareerPathVariant && /*#__PURE__*/_jsx(LineDecoration, {
-        inProgress: progressState === 'inProgress',
-        my: 8
-      }), (isCareerPathVariant || showDescription) && /*#__PURE__*/_jsx(Text, {
-        pt: 8,
-        pb: 16,
-        fontSize: 14,
-        children: description
-      })]
-    }), isFullSize && image && /*#__PURE__*/_jsx(FlexBox, {
-      my: "auto",
-      ml: "auto",
-      mr: horizontalOrientation ? 0 : 'auto',
-      pt: 16,
-      pb: isCareerPathVariant ? 32 : 0,
-      pr: {
-        _: 0,
-        xs: horizontalOrientation ? 24 : 0
-      },
-      children: /*#__PURE__*/_jsx(Image, {
-        isSmall: isCareerPathVariant,
-        image: image,
-        progressState: progressState
-      })
-    }), /*#__PURE__*/_jsx(Footer, {
-      beta: beta,
-      progressState: progressState,
-      tag: tag,
-      tagColor: tagColor,
-      footerTextVariant: footerTextVariant
-    })]
-  });
-};
+//#endregion
+export { CurriculumCard };

package/dist/DropdownButton/DropdownList.cjs

@@ -0,0 +1,57 @@
+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");
+
+//#region src/DropdownButton/DropdownList.tsx
+const DropdownList = ({ dropdownItems, isMenu, menuButtonId, onClose }) => {
+	const listRefs = react.useRef(dropdownItems.map(() => react.createRef()));
+	const handleKeyDown = (event, index) => {
+		if (event.key === "Tab") {
+			event.preventDefault();
+			onClose?.();
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			if (index > 0) {
+				const decrementVal = dropdownItems[index - 1] === "separator" ? 2 : 1;
+				listRefs.current[index - decrementVal].current?.focus();
+			}
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (index < dropdownItems.length - 1) {
+				const incrementVal = dropdownItems[index + 1] === "separator" ? 2 : 1;
+				listRefs.current[index + incrementVal].current?.focus();
+			}
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Menu, {
+		variant: "popover",
+		border: "none",
+		minWidth: "max-content",
+		py: 4,
+		role: isMenu ? "menu" : void 0,
+		"aria-labelledby": menuButtonId || "",
+		children: dropdownItems.map((item, i) => {
+			if (item === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.MenuSeparator, { "aria-hidden": "true" }, `dropdown-separator-${i}`);
+			const { id, text, clickHandler, icon, ...linkProps } = item;
+			const onClick = (event) => {
+				clickHandler?.(event);
+				onClose?.();
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.MenuItem, {
+				"data-testid": `dropdown-item-${id}`,
+				onClick,
+				icon,
+				tabIndex: 0,
+				onKeyDown: (e) => handleKeyDown(e, i),
+				ref: listRefs.current[i],
+				...linkProps,
+				children: text
+			}, id);
+		})
+	});
+};
+
+//#endregion
+exports.DropdownList = DropdownList;

package/dist/DropdownButton/DropdownList.d.cts

@@ -0,0 +1,19 @@
+import { DropdownButtonProps } from "./index.cjs";
+import * as React$1 from "react";
+import { GamutIconProps } from "@codecademy/gamut-icons";
+
+//#region src/DropdownButton/DropdownList.d.ts
+type AnchorProps = Partial<Pick<HTMLAnchorElement, 'href' | 'target' | 'ariaLabel'>>;
+type DropdownItem = {
+  id: string;
+  icon?: React$1.ComponentType<GamutIconProps>;
+  text: string;
+  clickHandler?: (event: React$1.MouseEvent) => void;
+} & AnchorProps;
+type DropdownListProps = {
+  dropdownItems: (DropdownItem | 'separator')[];
+  menuButtonId?: string;
+  onClose?: () => void;
+} & Pick<DropdownButtonProps, 'isMenu'>;
+//#endregion
+export { DropdownListProps };

package/dist/DropdownButton/DropdownList.d.ts

@@ -1,17 +1,19 @@
-import { GamutIconProps } from '@codecademy/gamut-icons';
-import * as React from 'react';
-import { DropdownButtonProps } from '.';
+import { DropdownButtonProps } from "./index.js";
+import * as React$1 from "react";
+import { GamutIconProps } from "@codecademy/gamut-icons";
+
+//#region src/DropdownButton/DropdownList.d.ts
 type AnchorProps = Partial<Pick<HTMLAnchorElement, 'href' | 'target' | 'ariaLabel'>>;
-export type DropdownItem = {
-    id: string;
-    icon?: React.ComponentType<GamutIconProps>;
-    text: string;
-    clickHandler?: (event: React.MouseEvent) => void;
+type DropdownItem = {
+  id: string;
+  icon?: React$1.ComponentType<GamutIconProps>;
+  text: string;
+  clickHandler?: (event: React$1.MouseEvent) => void;
 } & AnchorProps;
-export type DropdownListProps = {
-    dropdownItems: (DropdownItem | 'separator')[];
-    menuButtonId?: string;
-    onClose?: () => void;
+type DropdownListProps = {
+  dropdownItems: (DropdownItem | 'separator')[];
+  menuButtonId?: string;
+  onClose?: () => void;
 } & Pick<DropdownButtonProps, 'isMenu'>;
-export declare const DropdownList: React.FC<DropdownListProps>;
-export {};
+//#endregion
+export { DropdownListProps };

package/dist/DropdownButton/DropdownList.js

@@ -1,73 +1,55 @@
-import { Menu, MenuItem, MenuSeparator } from '@codecademy/gamut';
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DropdownList = ({
-  dropdownItems,
-  isMenu,
-  menuButtonId,
-  onClose
-}) => {
-  const listRefs = React.useRef(dropdownItems.map(() => /*#__PURE__*/React.createRef()));
-  const handleKeyDown = (event, index) => {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-      onClose?.();
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      if (index > 0) {
-        const isSeparatorEl = dropdownItems[index - 1] === 'separator';
-        const decrementVal = isSeparatorEl ? 2 : 1;
-        // Move focus to the previous item in the list
-        listRefs.current[index - decrementVal].current?.focus();
-      }
-    } else if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      if (index < dropdownItems.length - 1) {
-        const isSeparatorEl = dropdownItems[index + 1] === 'separator';
-        const incrementVal = isSeparatorEl ? 2 : 1;
-        // Move focus to the next item in the list
-        listRefs.current[index + incrementVal].current?.focus();
-      }
-    }
-  };
-  return /*#__PURE__*/_jsx(Menu, {
-    variant: "popover",
-    border: "none",
-    minWidth: "max-content",
-    py: 4,
-    role: isMenu ? 'menu' : undefined,
-    "aria-labelledby": menuButtonId || '',
-    children: dropdownItems.map((item, i) => {
-      if (item === 'separator') {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line react/no-array-index-key
-          _jsx(MenuSeparator, {
-            "aria-hidden": "true"
-          }, `dropdown-separator-${i}`)
-        );
-      }
-      const {
-        id,
-        text,
-        clickHandler,
-        icon,
-        ...linkProps
-      } = item;
-      const onClick = event => {
-        clickHandler?.(event);
-        onClose?.();
-      };
-      return /*#__PURE__*/_jsx(MenuItem, {
-        "data-testid": `dropdown-item-${id}`,
-        onClick: onClick,
-        icon: icon,
-        tabIndex: 0,
-        onKeyDown: e => handleKeyDown(e, i),
-        ref: listRefs.current[i],
-        ...linkProps,
-        children: text
-      }, id);
-    })
-  });
-};
+import { Menu, MenuItem, MenuSeparator } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/DropdownButton/DropdownList.tsx
+const DropdownList = ({ dropdownItems, isMenu, menuButtonId, onClose }) => {
+	const listRefs = React$1.useRef(dropdownItems.map(() => React$1.createRef()));
+	const handleKeyDown = (event, index) => {
+		if (event.key === "Tab") {
+			event.preventDefault();
+			onClose?.();
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			if (index > 0) {
+				const decrementVal = dropdownItems[index - 1] === "separator" ? 2 : 1;
+				listRefs.current[index - decrementVal].current?.focus();
+			}
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (index < dropdownItems.length - 1) {
+				const incrementVal = dropdownItems[index + 1] === "separator" ? 2 : 1;
+				listRefs.current[index + incrementVal].current?.focus();
+			}
+		}
+	};
+	return /* @__PURE__ */ jsx(Menu, {
+		variant: "popover",
+		border: "none",
+		minWidth: "max-content",
+		py: 4,
+		role: isMenu ? "menu" : void 0,
+		"aria-labelledby": menuButtonId || "",
+		children: dropdownItems.map((item, i) => {
+			if (item === "separator") return /* @__PURE__ */ jsx(MenuSeparator, { "aria-hidden": "true" }, `dropdown-separator-${i}`);
+			const { id, text, clickHandler, icon, ...linkProps } = item;
+			const onClick = (event) => {
+				clickHandler?.(event);
+				onClose?.();
+			};
+			return /* @__PURE__ */ jsx(MenuItem, {
+				"data-testid": `dropdown-item-${id}`,
+				onClick,
+				icon,
+				tabIndex: 0,
+				onKeyDown: (e) => handleKeyDown(e, i),
+				ref: listRefs.current[i],
+				...linkProps,
+				children: text
+			}, id);
+		})
+	});
+};
+
+//#endregion
+export { DropdownList };

package/dist/DropdownButton/index.cjs

@@ -0,0 +1,140 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_DropdownList = require('./DropdownList.cjs');
+const require_useDynamicPopoverPosition = require('./useDynamicPopoverPosition.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+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/DropdownButton/index.tsx
+const DownArrow = (0, _emotion_styled.default)(_codecademy_gamut_icons.ArrowChevronDownFilledIcon, _codecademy_gamut_styles.styledOptions)`
+  margin-left: ${(0, _codecademy_gamut_styles.pxRem)(8)};
+  transition: transform 0.35s ease-out;
+  ${({ isOpen }) => isOpen && "transform: rotate(-180deg)"};
+`;
+const HorizontalKebabIcon = (0, _emotion_styled.default)(_codecademy_gamut_icons.MiniKebabMenuIcon)((0, _codecademy_gamut_styles.css)({ transform: "rotate(90deg)" }));
+const DropdownButton = (0, react.forwardRef)(({ align = "left", buttonType = "fill", children, defaultPosition = "below", dropdownItems, horizontalOffset, iconSize, isMenu, onClick, tipProps, verticalOffset = 0, size, variant = "primary", ...buttonStyleProps }, ref) => {
+	const buttonId = (0, react.useId)();
+	const targetRef = (0, react.useRef)(null);
+	const { position, popoverContainerRefCallback } = require_useDynamicPopoverPosition.useDynamicPopoverPosition({
+		targetRef,
+		verticalOffset,
+		defaultPosition
+	});
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	(0, react.useImperativeHandle)(ref, () => ({ focus: () => targetRef.current?.focus() }));
+	const handleClick = (event) => {
+		if (!isOpen) onClick?.(event);
+		setIsOpen(!isOpen);
+	};
+	const handleRequestClosed = () => {
+		setIsOpen(false);
+	};
+	const textButtonDefaultSize = "normal";
+	const iconButtonDefaultSize = "small";
+	let clickTarget;
+	switch (buttonType) {
+		case "fill":
+			clickTarget = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FillButton, {
+				ref: targetRef,
+				"aria-expanded": isOpen,
+				id: buttonId,
+				onClick: handleClick,
+				"data-testid": "dropdown-fill-button",
+				size: size || textButtonDefaultSize,
+				variant,
+				...buttonStyleProps ?? {},
+				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownArrow, {
+					isOpen,
+					size: iconSize || 12
+				})]
+			});
+			break;
+		case "stroke":
+			clickTarget = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.StrokeButton, {
+				ref: targetRef,
+				"aria-expanded": isOpen,
+				id: buttonId,
+				onClick: handleClick,
+				"data-testid": "dropdown-stroke-button",
+				size: size || textButtonDefaultSize,
+				variant,
+				...buttonStyleProps ?? {},
+				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownArrow, {
+					isOpen,
+					size: iconSize || 12
+				})]
+			});
+			break;
+		case "text":
+			clickTarget = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.TextButton, {
+				ref: targetRef,
+				id: buttonId,
+				onClick: handleClick,
+				"data-testid": "dropdown-stroke-button",
+				size: size || textButtonDefaultSize,
+				variant,
+				...buttonStyleProps ?? {},
+				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownArrow, {
+					isOpen,
+					size: 12
+				})]
+			});
+			break;
+		case "kebab":
+			clickTarget = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
+				ref: targetRef,
+				"aria-expanded": isOpen,
+				"aria-haspopup": "menu",
+				id: buttonId,
+				icon: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.MiniKebabMenuIcon, { size: iconSize }),
+				size: size || iconButtonDefaultSize,
+				variant: "secondary",
+				onClick: handleClick,
+				"data-testid": "dropdown-kebab-button",
+				tip: "Show options",
+				tipProps,
+				...buttonStyleProps ?? {}
+			});
+			break;
+		case "horizontalKebab": clickTarget = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
+			"aria-label": "Options",
+			ref: targetRef,
+			"aria-expanded": isOpen,
+			"aria-haspopup": "menu",
+			id: buttonId,
+			icon: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HorizontalKebabIcon, { size: iconSize }),
+			size: size || iconButtonDefaultSize,
+			variant: "secondary",
+			onClick: handleClick,
+			"data-testid": "dropdown-horizontal-kebab-button",
+			tipProps,
+			tip: "Show more options",
+			...buttonStyleProps ?? {}
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [clickTarget, dropdownItems.length !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Popover, {
+		popoverContainerRef: popoverContainerRefCallback,
+		targetRef,
+		isOpen,
+		onRequestClose: handleRequestClosed,
+		align,
+		verticalOffset,
+		horizontalOffset,
+		position,
+		outline: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownList.DropdownList, {
+			dropdownItems,
+			isMenu,
+			menuButtonId: buttonId,
+			onClose: handleRequestClosed
+		})
+	})] });
+});
+
+//#endregion
+exports.DropdownButton = DropdownButton;