@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/ContentGroupBaseCard/types.js

@@ -1,16 +1,12 @@
-//#region src/ContentGroupBaseCard/types.ts
-let CourseDifficulty = /* @__PURE__ */ function(CourseDifficulty$1) {
-	CourseDifficulty$1["Beginner"] = "Beginner";
-	CourseDifficulty$1["Intermediate"] = "Intermediate";
-	CourseDifficulty$1["Advanced"] = "Advanced";
-	return CourseDifficulty$1;
+export let CourseDifficulty = /*#__PURE__*/function (CourseDifficulty) {
+  CourseDifficulty["Beginner"] = "Beginner";
+  CourseDifficulty["Intermediate"] = "Intermediate";
+  CourseDifficulty["Advanced"] = "Advanced";
+  return CourseDifficulty;
 }({});
-let EnrollmentStatus = /* @__PURE__ */ function(EnrollmentStatus$1) {
-	EnrollmentStatus$1["InProgress"] = "inProgress";
-	EnrollmentStatus$1["Completed"] = "completed";
-	EnrollmentStatus$1["None"] = "none";
-	return EnrollmentStatus$1;
-}({});
-
-//#endregion
-export { CourseDifficulty, EnrollmentStatus };
+export let EnrollmentStatus = /*#__PURE__*/function (EnrollmentStatus) {
+  EnrollmentStatus["InProgress"] = "inProgress";
+  EnrollmentStatus["Completed"] = "completed";
+  EnrollmentStatus["None"] = "none";
+  return EnrollmentStatus;
+}({});

package/dist/CourseCard/__tests__/__fixtures__/index.d.ts

@@ -0,0 +1,3 @@
+import { CourseCardProps } from '../..';
+export declare const mockFreeCourseContent: CourseCardProps;
+export declare const mockProCourseContent: CourseCardProps;

package/dist/CourseCard/index.d.ts

@@ -1,25 +1,20 @@
-import { CourseDifficulty, EnrollmentStatus } from "../ContentGroupBaseCard/types.js";
-import { HeadingTags } from "@codecademy/gamut";
-import * as react5 from "react";
-
-//#region src/CourseCard/index.d.ts
-type CourseCardProps = {
-  title: string;
-  lessonCount: number;
-  grantsCertificate: boolean;
-  enrollmentStatus: EnrollmentStatus;
-  pro: boolean;
-  shortDescription?: string | null;
-  difficulty?: CourseDifficulty | null;
-  isFullSize?: boolean;
-  headingLevel?: HeadingTags;
-  timeToComplete?: number | null;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  openInNewTab?: boolean;
-  href: string;
-  onClick: () => void;
+import { HeadingTags } from '@codecademy/gamut';
+import { CourseDifficulty, EnrollmentStatus } from '../ContentGroupBaseCard/types';
+export type CourseCardProps = {
+    title: string;
+    lessonCount: number;
+    grantsCertificate: boolean;
+    enrollmentStatus: EnrollmentStatus;
+    pro: boolean;
+    shortDescription?: string | null;
+    difficulty?: CourseDifficulty | null;
+    isFullSize?: boolean;
+    headingLevel?: HeadingTags;
+    timeToComplete?: number | null;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    openInNewTab?: boolean;
+    href: string;
+    onClick: () => void;
 };
-declare const CourseCard: react5.ForwardRefExoticComponent<CourseCardProps & react5.RefAttributes<HTMLAnchorElement>>;
-//#endregion
-export { CourseCard, CourseCardProps };
+export declare const CourseCard: import("react").ForwardRefExoticComponent<CourseCardProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/CourseCard/index.js

@@ -1,31 +1,45 @@
-import { CertificateComponent } from "../ContentGroupBaseCard/shared.js";
-import { ContentGroupBaseCard } from "../ContentGroupBaseCard/index.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/CourseCard/index.tsx
-const CourseCard = forwardRef(({ title, lessonCount, grantsCertificate, shortDescription, difficulty, enrollmentStatus, pro, isFullSize, headingLevel = "h3", timeToComplete, header, footer, openInNewTab = false, href, onClick }, ref) => {
-	return /* @__PURE__ */ jsx(ContentGroupBaseCard, {
-		headerBackgroundColor: "green-100",
-		headingLevel,
-		headerText: pro ? "Course" : "Free course",
-		title,
-		description: shortDescription,
-		difficulty,
-		numLessons: lessonCount,
-		isFullSize,
-		imageSrc: "https://static-assets.codecademy.com/Courses/Course-Cards/pillars.svg",
-		enrollmentStatus,
-		timeToComplete,
-		header,
-		footer,
-		openInNewTab,
-		href,
-		onClick,
-		ref,
-		children: grantsCertificate && pro && /* @__PURE__ */ jsx(CertificateComponent, {})
-	});
-});
-
-//#endregion
-export { CourseCard };
+import { forwardRef } from 'react';
+import { ContentGroupBaseCard } from '../ContentGroupBaseCard';
+import { CertificateComponent } from '../ContentGroupBaseCard/shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CourseCard = /*#__PURE__*/forwardRef(({
+  title,
+  lessonCount,
+  grantsCertificate,
+  shortDescription,
+  difficulty,
+  enrollmentStatus,
+  pro,
+  isFullSize,
+  headingLevel = 'h3',
+  timeToComplete,
+  header,
+  footer,
+  openInNewTab = false,
+  href,
+  onClick
+}, ref) => {
+  // only show certificates for pro exclusive courses, since only pro users can do pro courses & only pro users can gain certificates
+  // edge case here: pro users who are logged in wont be able to tell - from the card - that a free course can grant them a cert as well
+  const showCertificate = grantsCertificate && pro;
+  return /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+    headerBackgroundColor: "green-100",
+    headingLevel: headingLevel,
+    headerText: pro ? 'Course' : 'Free course',
+    title: title,
+    description: shortDescription,
+    difficulty: difficulty,
+    numLessons: lessonCount,
+    isFullSize: isFullSize,
+    imageSrc: "https://static-assets.codecademy.com/Courses/Course-Cards/pillars.svg",
+    enrollmentStatus: enrollmentStatus,
+    timeToComplete: timeToComplete,
+    header: header,
+    footer: footer,
+    openInNewTab: openInNewTab,
+    href: href,
+    onClick: onClick,
+    ref: ref,
+    children: showCertificate && /*#__PURE__*/_jsx(CertificateComponent, {})
+  });
+});

package/dist/CurriculumCard/BottomTag/index.d.ts

@@ -1,6 +1,7 @@
-import "react";
-
-//#region src/CurriculumCard/BottomTag/index.d.ts
-type TagColor = 'blue' | 'green' | 'pink';
-//#endregion
-export { TagColor };
+import * as React from 'react';
+export type TagColor = 'blue' | 'green' | 'pink';
+export type BottomTagProps = {
+    text: string;
+    color: TagColor;
+};
+export declare const BottomTag: React.FC<BottomTagProps>;

package/dist/CurriculumCard/BottomTag/index.js

@@ -1,28 +1,26 @@
-import { Box, Text } from "@codecademy/gamut";
-import "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/CurriculumCard/BottomTag/index.tsx
+import { Box, Text } from '@codecademy/gamut';
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 const colorMap = {
-	blue: "paleBlue",
-	green: "paleGreen",
-	pink: `palePink`
+  blue: 'paleBlue',
+  green: 'paleGreen',
+  pink: `palePink`
 };
-const BottomTag = ({ text, color }) => {
-	return /* @__PURE__ */ jsx(Box, {
-		position: "absolute",
-		bottom: 0,
-		right: 0,
-		bg: colorMap[color],
-		children: /* @__PURE__ */ jsx(Text, {
-			py: 4,
-			p: 12,
-			variant: "title-xs",
-			fontSize: 14,
-			children: text
-		})
-	});
-};
-
-//#endregion
-export { BottomTag };
+export const BottomTag = ({
+  text,
+  color
+}) => {
+  return /*#__PURE__*/_jsx(Box, {
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    bg: colorMap[color],
+    children: /*#__PURE__*/_jsx(Text, {
+      py: 4,
+      p: 12,
+      variant: "title-xs",
+      fontSize: 14,
+      children: text
+    })
+  });
+};

package/dist/CurriculumCard/Difficulty/helpers.d.ts

@@ -1,13 +1,8 @@
-import { ContainerDifficulty, ContainerDifficultyUnion } from "./types.js";
-
-//#region src/CurriculumCard/Difficulty/helpers.d.ts
-
+import { ContainerDifficulty, ContainerDifficultyUnion } from './types';
 /**
  * calculate the number associated with the difficulty level for a particular content
  *
  * @param difficulty level of difficulty for a particular content
  * @returns 0 indicating beginner, 1 intermediate and 2 for advanced content.
  */
-declare const getDifficultyNumber: <Type extends ContainerDifficultyUnion | ContainerDifficulty>(difficulty: Type) => 0 | 1 | 2;
-//#endregion
-export { getDifficultyNumber };
+export declare const getDifficultyNumber: <Type extends ContainerDifficultyUnion | ContainerDifficulty>(difficulty: Type) => 0 | 1 | 2;

package/dist/CurriculumCard/Difficulty/helpers.js

@@ -1,17 +1,13 @@
-import { ContainerDifficulty } from "./types.js";
+import { ContainerDifficulty } from './types';
 
-//#region src/CurriculumCard/Difficulty/helpers.ts
 /**
-* calculate the number associated with the difficulty level for a particular content
-*
-* @param difficulty level of difficulty for a particular content
-* @returns 0 indicating beginner, 1 intermediate and 2 for advanced content.
-*/
-const getDifficultyNumber = (difficulty) => {
-	if (difficulty === ContainerDifficulty.Beginner) return 0;
-	if (difficulty === ContainerDifficulty.Intermediate) return 1;
-	return 2;
-};
-
-//#endregion
-export { getDifficultyNumber };
+ * calculate the number associated with the difficulty level for a particular content
+ *
+ * @param difficulty level of difficulty for a particular content
+ * @returns 0 indicating beginner, 1 intermediate and 2 for advanced content.
+ */
+export const getDifficultyNumber = difficulty => {
+  if (difficulty === ContainerDifficulty.Beginner) return 0;
+  if (difficulty === ContainerDifficulty.Intermediate) return 1;
+  return 2;
+};

package/dist/CurriculumCard/Difficulty/index.d.ts

@@ -1,7 +1,3 @@
-import { ContentDifficultyProps } from "./types.js";
-import * as React$1 from "react";
-
-//#region src/CurriculumCard/Difficulty/index.d.ts
-declare const Difficulty: React$1.FC<ContentDifficultyProps>;
-//#endregion
-export { Difficulty };
+import * as React from 'react';
+import { ContentDifficultyProps } from './types';
+export declare const Difficulty: React.FC<ContentDifficultyProps>;

package/dist/CurriculumCard/Difficulty/index.js

@@ -1,40 +1,47 @@
-import { DifficultyString } from "./types.js";
-import { getDifficultyNumber } from "./helpers.js";
-import { Box, Text } from "@codecademy/gamut";
-import { pxRem, system, theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import times from "lodash/times";
-import uniqueId from "lodash/uniqueId";
-
-//#region src/CurriculumCard/Difficulty/index.tsx
-const DifficultySpan = styled(Box)(system.variant({
-	base: {
-		display: "inline-block",
-		marginRight: pxRem(4),
-		verticalAlign: "middle",
-		border: 1,
-		background: theme.colors.navy,
-		marginBottom: pxRem(1),
-		borderRadius: "full"
-	},
-	defaultVariant: "small",
-	variants: {
-		small: {
-			width: pxRem(8),
-			height: pxRem(8)
-		},
-		medium: {
-			width: pxRem(10),
-			height: pxRem(10)
-		}
-	}
-}));
-const Difficulty = ({ difficulty, variant: variant$1 }) => {
-	const difficultyNumber = getDifficultyNumber(difficulty);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [times(difficultyNumber + 1, () => /* @__PURE__ */ jsx(DifficultySpan, { variant: variant$1 }, uniqueId())), /* @__PURE__ */ jsx(Text, { children: DifficultyString[difficultyNumber] })] });
-};
-
-//#endregion
-export { Difficulty };
+import _styled from "@emotion/styled/base";
+import { Box, Text } from '@codecademy/gamut';
+import { pxRem, system, theme } from '@codecademy/gamut-styles';
+import times from 'lodash/times';
+import uniqueId from 'lodash/uniqueId';
+import * as React from 'react';
+import { getDifficultyNumber } from './helpers';
+import { DifficultyString } from './types';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DifficultySpan = /*#__PURE__*/_styled(Box, {
+  target: "e1ygnflb0",
+  label: "DifficultySpan"
+})(system.variant({
+  base: {
+    display: 'inline-block',
+    marginRight: pxRem(4),
+    verticalAlign: 'middle',
+    border: 1,
+    background: theme.colors.navy,
+    marginBottom: pxRem(1),
+    borderRadius: 'full'
+  },
+  defaultVariant: 'small',
+  variants: {
+    small: {
+      width: pxRem(8),
+      height: pxRem(8)
+    },
+    medium: {
+      width: pxRem(10),
+      height: pxRem(10)
+    }
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DdXJyaWN1bHVtQ2FyZC9EaWZmaWN1bHR5L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVdUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0N1cnJpY3VsdW1DYXJkL0RpZmZpY3VsdHkvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgcHhSZW0sIHN5c3RlbSwgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHRpbWVzIGZyb20gJ2xvZGFzaC90aW1lcyc7XG5pbXBvcnQgdW5pcXVlSWQgZnJvbSAnbG9kYXNoL3VuaXF1ZUlkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgZ2V0RGlmZmljdWx0eU51bWJlciB9IGZyb20gJy4vaGVscGVycyc7XG5pbXBvcnQgeyBDb250ZW50RGlmZmljdWx0eVByb3BzLCBEaWZmaWN1bHR5U3RyaW5nIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IERpZmZpY3VsdHlTcGFuID0gc3R5bGVkKEJveCkoXG4gIHN5c3RlbS52YXJpYW50KHtcbiAgICBiYXNlOiB7XG4gICAgICBkaXNwbGF5OiAnaW5saW5lLWJsb2NrJyxcbiAgICAgIG1hcmdpblJpZ2h0OiBweFJlbSg0KSxcbiAgICAgIHZlcnRpY2FsQWxpZ246ICdtaWRkbGUnLFxuICAgICAgYm9yZGVyOiAxLFxuICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLm5hdnksXG4gICAgICBtYXJnaW5Cb3R0b206IHB4UmVtKDEpLFxuICAgICAgYm9yZGVyUmFkaXVzOiAnZnVsbCcsXG4gICAgfSxcbiAgICBkZWZhdWx0VmFyaWFudDogJ3NtYWxsJyxcbiAgICB2YXJpYW50czoge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgd2lkdGg6IHB4UmVtKDgpLFxuICAgICAgICBoZWlnaHQ6IHB4UmVtKDgpLFxuICAgICAgfSxcbiAgICAgIG1lZGl1bToge1xuICAgICAgICB3aWR0aDogcHhSZW0oMTApLFxuICAgICAgICBoZWlnaHQ6IHB4UmVtKDEwKSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBEaWZmaWN1bHR5OiBSZWFjdC5GQzxDb250ZW50RGlmZmljdWx0eVByb3BzPiA9ICh7XG4gIGRpZmZpY3VsdHksXG4gIHZhcmlhbnQsXG59KSA9PiB7XG4gIGNvbnN0IGRpZmZpY3VsdHlOdW1iZXIgPSBnZXREaWZmaWN1bHR5TnVtYmVyKGRpZmZpY3VsdHkpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHt0aW1lcyhkaWZmaWN1bHR5TnVtYmVyICsgMSwgKCkgPT4gKFxuICAgICAgICA8RGlmZmljdWx0eVNwYW4ga2V5PXt1bmlxdWVJZCgpfSB2YXJpYW50PXt2YXJpYW50fSAvPlxuICAgICAgKSl9XG4gICAgICA8VGV4dD57RGlmZmljdWx0eVN0cmluZ1tkaWZmaWN1bHR5TnVtYmVyXX08L1RleHQ+XG4gICAgPC8+XG4gICk7XG59O1xuIl19 */");
+export const Difficulty = ({
+  difficulty,
+  variant
+}) => {
+  const difficultyNumber = getDifficultyNumber(difficulty);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [times(difficultyNumber + 1, () => /*#__PURE__*/_jsx(DifficultySpan, {
+      variant: variant
+    }, uniqueId())), /*#__PURE__*/_jsx(Text, {
+      children: DifficultyString[difficultyNumber]
+    })]
+  });
+};

package/dist/CurriculumCard/Difficulty/types.d.ts

@@ -1,25 +1,22 @@
-//#region src/CurriculumCard/Difficulty/types.d.ts
 /**
  * Exported enums sometimes come up undefined when used in Jest tests because of the way they are compiled. Be careful when using this in test mocks.
  */
-declare enum ContainerDifficulty {
-  Beginner = "Beginner",
-  Intermediate = "Intermediate",
-  Advanced = "Advanced",
+export declare enum ContainerDifficulty {
+    Beginner = "Beginner",
+    Intermediate = "Intermediate",
+    Advanced = "Advanced"
 }
 /**
  * converting ContainerDifficulty enum into union type
  */
-type ContainerDifficultyUnion = `${ContainerDifficulty}`;
-type DifficultyVariant = 'small' | 'medium';
-type ContentDifficultyProps = {
-  difficulty: ContainerDifficulty | ContainerDifficultyUnion;
-  variant?: DifficultyVariant;
+export type ContainerDifficultyUnion = `${ContainerDifficulty}`;
+export type DifficultyVariant = 'small' | 'medium';
+export type ContentDifficultyProps = {
+    difficulty: ContainerDifficulty | ContainerDifficultyUnion;
+    variant?: DifficultyVariant;
 };
-declare enum DifficultyString {
-  'Beginner friendly' = 0,
-  'Intermediate' = 1,
-  'Advanced' = 2,
+export declare enum DifficultyString {
+    'Beginner friendly' = 0,
+    'Intermediate' = 1,
+    'Advanced' = 2
 }
-//#endregion
-export { ContainerDifficulty, ContainerDifficultyUnion, ContentDifficultyProps, DifficultyString, DifficultyVariant };

package/dist/CurriculumCard/Difficulty/types.js

@@ -1,19 +1,20 @@
-//#region src/CurriculumCard/Difficulty/types.ts
 /**
-* Exported enums sometimes come up undefined when used in Jest tests because of the way they are compiled. Be careful when using this in test mocks.
-*/
-let ContainerDifficulty = /* @__PURE__ */ function(ContainerDifficulty$1) {
-	ContainerDifficulty$1["Beginner"] = "Beginner";
-	ContainerDifficulty$1["Intermediate"] = "Intermediate";
-	ContainerDifficulty$1["Advanced"] = "Advanced";
-	return ContainerDifficulty$1;
-}({});
-let DifficultyString = /* @__PURE__ */ function(DifficultyString$1) {
-	DifficultyString$1[DifficultyString$1["Beginner friendly"] = 0] = "Beginner friendly";
-	DifficultyString$1[DifficultyString$1["Intermediate"] = 1] = "Intermediate";
-	DifficultyString$1[DifficultyString$1["Advanced"] = 2] = "Advanced";
-	return DifficultyString$1;
+ * Exported enums sometimes come up undefined when used in Jest tests because of the way they are compiled. Be careful when using this in test mocks.
+ */
+export let ContainerDifficulty = /*#__PURE__*/function (ContainerDifficulty) {
+  ContainerDifficulty["Beginner"] = "Beginner";
+  ContainerDifficulty["Intermediate"] = "Intermediate";
+  ContainerDifficulty["Advanced"] = "Advanced";
+  return ContainerDifficulty;
 }({});
 
-//#endregion
-export { ContainerDifficulty, DifficultyString };
+/**
+ * converting ContainerDifficulty enum into union type
+ */
+
+export let DifficultyString = /*#__PURE__*/function (DifficultyString) {
+  DifficultyString[DifficultyString["Beginner friendly"] = 0] = "Beginner friendly";
+  DifficultyString[DifficultyString["Intermediate"] = 1] = "Intermediate";
+  DifficultyString[DifficultyString["Advanced"] = 2] = "Advanced";
+  return DifficultyString;
+}({});

package/dist/CurriculumCard/Footer/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TagColor } from '../BottomTag/index';
+export type FooterProps = {
+    beta?: boolean;
+    progressState?: 'completed' | 'inProgress';
+    tag?: string;
+    tagColor?: TagColor;
+    footerTextVariant?: 'enrolled' | 'inProgress';
+};
+export declare const Footer: React.FC<FooterProps>;

package/dist/CurriculumCard/Footer/index.js

@@ -1,47 +1,54 @@
-import { BetaSticker } from "../../BetaSticker/index.js";
-import { BottomTag } from "../BottomTag/index.js";
-import { Box, FlexBox, Text } from "@codecademy/gamut";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/CurriculumCard/Footer/index.tsx
-const Footer = ({ beta, progressState, tag, tagColor, footerTextVariant }) => {
-	if (progressState) return /* @__PURE__ */ jsxs(Box, {
-		mt: "auto",
-		children: [progressState === "completed" && /* @__PURE__ */ jsx(Text, {
-			fontSize: 16,
-			fontFamily: "accent",
-			textColor: "yellow",
-			children: "Completed"
-		}), progressState === "inProgress" && /* @__PURE__ */ jsxs(FlexBox, {
-			flexWrap: "wrap",
-			justifyContent: "space-between",
-			alignItems: "flex-end",
-			width: "100%",
-			children: [/* @__PURE__ */ jsx(Text, {
-				fontFamily: "accent",
-				fontSize: 14,
-				children: footerTextVariant === "inProgress" ? "In Progress..." : "Enrolled..."
-			}), /* @__PURE__ */ jsx(Text, {
-				textColor: "hyper",
-				children: "Keep Going"
-			})]
-		})]
-	});
-	if (beta) return /* @__PURE__ */ jsx(Box, {
-		position: "absolute",
-		bottom: 0,
-		right: 0,
-		pb: 16,
-		pr: 16,
-		children: /* @__PURE__ */ jsx(BetaSticker, {})
-	});
-	if (tag && tagColor) return /* @__PURE__ */ jsx(BottomTag, {
-		text: tag,
-		color: tagColor
-	});
-	return null;
-};
-
-//#endregion
-export { Footer };
+import { Box, FlexBox, Text } from '@codecademy/gamut';
+import * as React from 'react';
+import { BetaSticker } from '../../BetaSticker';
+import { BottomTag } from '../BottomTag/index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Footer = ({
+  beta,
+  progressState,
+  tag,
+  tagColor,
+  footerTextVariant
+}) => {
+  if (progressState) {
+    return /*#__PURE__*/_jsxs(Box, {
+      mt: "auto",
+      children: [progressState === 'completed' && /*#__PURE__*/_jsx(Text, {
+        fontSize: 16,
+        fontFamily: "accent",
+        textColor: "yellow",
+        children: "Completed"
+      }), progressState === 'inProgress' && /*#__PURE__*/_jsxs(FlexBox, {
+        flexWrap: "wrap",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(Text, {
+          fontFamily: "accent",
+          fontSize: 14,
+          children: footerTextVariant === 'inProgress' ? 'In Progress...' : 'Enrolled...'
+        }), /*#__PURE__*/_jsx(Text, {
+          textColor: "hyper",
+          children: "Keep Going"
+        })]
+      })]
+    });
+  }
+  if (beta) {
+    return /*#__PURE__*/_jsx(Box, {
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      pb: 16,
+      pr: 16,
+      children: /*#__PURE__*/_jsx(BetaSticker, {})
+    });
+  }
+  if (tag && tagColor) {
+    return /*#__PURE__*/_jsx(BottomTag, {
+      text: tag,
+      color: tagColor
+    });
+  }
+  return null;
+};

package/dist/CurriculumCard/Image/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type ProgressState = 'inProgress' | 'completed';
+export type ImageProps = {
+    image: string;
+    progressState?: ProgressState;
+    isSmall?: boolean;
+};
+export declare const Image: React.FC<ImageProps>;
+export {};