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

package/dist/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.d.ts

@@ -1,10 +1,18 @@
-export declare const LearningOutcomeLowAssessmentDot: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & import("@codecademy/gamut").BoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
-    theme?: import("@emotion/react").Theme;
+import * as _codecademy_gamut3 from "@codecademy/gamut";
+import * as _emotion_styled4 from "@emotion/styled";
+import * as react23 from "react";
+import * as _emotion_react17 from "@emotion/react";
+
+//#region src/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.d.ts
+declare const LearningOutcomeLowAssessmentDot: _emotion_styled4.StyledComponent<{
+  theme?: _emotion_react17.Theme | undefined;
+  as?: react23.ElementType<any, keyof react23.JSX.IntrinsicElements> | undefined;
+} & _codecademy_gamut3.BoxProps & Pick<react23.DetailedHTMLProps<react23.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "onClick" | "slot" | "style" | "property" | "rel" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof react23.ClassAttributes<HTMLDivElement>> & {
+  theme?: _emotion_react17.Theme;
 } & {
-    hasBorder?: boolean;
-    small?: boolean;
+  hasBorder?: boolean;
+  small?: boolean;
 }, {}, {}>;
-export declare const LearningOutcomeLowAssessmentBadge: React.FC;
+declare const LearningOutcomeLowAssessmentBadge: React.FC;
+//#endregion
+export { LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot };

package/dist/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.js

@@ -1,35 +1,35 @@
-import _styled from "@emotion/styled/base";
-import { Badge, Box, Text } from '@codecademy/gamut';
-import { css, states } from '@codecademy/gamut-styles';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const LearningOutcomeLowAssessmentDot = /*#__PURE__*/_styled(Box, {
-  target: "ege7mnh0",
-  label: "LearningOutcomeLowAssessmentDot"
-})(css({
-  bg: 'orange-500',
-  borderRadius: 'full',
-  height: 16,
-  width: 16
+import { Badge, Box, Text } from "@codecademy/gamut";
+import { css, states } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.tsx
+const LearningOutcomeLowAssessmentDot = styled(Box)(css({
+	bg: "orange-500",
+	borderRadius: "full",
+	height: 16,
+	width: 16
 }), states({
-  hasBorder: {
-    border: 2,
-    borderColor: 'background-contrast'
-  },
-  small: {
-    height: 8,
-    width: 8
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVCYWRnZXMvTGVhcm5pbmdPdXRjb21lTG93QXNzZXNzbWVudEJhZGdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJK0MiLCJmaWxlIjoiLi4vLi4vc3JjL0xlYXJuaW5nT3V0Y29tZUJhZGdlcy9MZWFybmluZ091dGNvbWVMb3dBc3Nlc3NtZW50QmFkZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQmFkZ2UsIEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcywgc3RhdGVzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IExlYXJuaW5nT3V0Y29tZUxvd0Fzc2Vzc21lbnREb3QgPSBzdHlsZWQoQm94KTx7XG4gIGhhc0JvcmRlcj86IGJvb2xlYW47XG4gIHNtYWxsPzogYm9vbGVhbjtcbn0+KFxuICBjc3Moe1xuICAgIGJnOiAnb3JhbmdlLTUwMCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnZnVsbCcsXG4gICAgaGVpZ2h0OiAxNixcbiAgICB3aWR0aDogMTYsXG4gIH0pLFxuICBzdGF0ZXMoe1xuICAgIGhhc0JvcmRlcjoge1xuICAgICAgYm9yZGVyOiAyLFxuICAgICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWNvbnRyYXN0JyxcbiAgICB9LFxuICAgIHNtYWxsOiB7XG4gICAgICBoZWlnaHQ6IDgsXG4gICAgICB3aWR0aDogOCxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IExlYXJuaW5nT3V0Y29tZUxvd0Fzc2Vzc21lbnRCYWRnZTogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEJhZGdlIHZhcmlhbnQ9XCJjdXN0b21cIiBzaXplPVwic21cIiBiZz1cIm9yYW5nZS0xMDBcIj5cbiAgICAgIDxMZWFybmluZ091dGNvbWVMb3dBc3Nlc3NtZW50RG90IHNtYWxsIC8+XG4gICAgICA8VGV4dCBtbD17NH0+TmVlZHMgcmV2aWV3PC9UZXh0PlxuICAgIDwvQmFkZ2U+XG4gICk7XG59O1xuIl19 */");
-export const LearningOutcomeLowAssessmentBadge = () => {
-  return /*#__PURE__*/_jsxs(Badge, {
-    variant: "custom",
-    size: "sm",
-    bg: "orange-100",
-    children: [/*#__PURE__*/_jsx(LearningOutcomeLowAssessmentDot, {
-      small: true
-    }), /*#__PURE__*/_jsx(Text, {
-      ml: 4,
-      children: "Needs review"
-    })]
-  });
-};
+	hasBorder: {
+		border: 2,
+		borderColor: "background-contrast"
+	},
+	small: {
+		height: 8,
+		width: 8
+	}
+}));
+const LearningOutcomeLowAssessmentBadge = () => {
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "custom",
+		size: "sm",
+		bg: "orange-100",
+		children: [/* @__PURE__ */ jsx(LearningOutcomeLowAssessmentDot, { small: true }), /* @__PURE__ */ jsx(Text, {
+			ml: 4,
+			children: "Needs review"
+		})]
+	});
+};
+
+//#endregion
+export { LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot };

package/dist/LearningOutcomeBadges/index.cjs

@@ -0,0 +1,8 @@
+const require_LearningOutcomeLevelBadge = require('./LearningOutcomeLevelBadge.cjs');
+const require_LearningOutcomeLowAssessmentBadge = require('./LearningOutcomeLowAssessmentBadge.cjs');
+
+exports.LearningOutcomeLevelBadge = require_LearningOutcomeLevelBadge.LearningOutcomeLevelBadge;
+exports.LearningOutcomeLevels = require_LearningOutcomeLevelBadge.LearningOutcomeLevels;
+exports.LearningOutcomeLowAssessmentBadge = require_LearningOutcomeLowAssessmentBadge.LearningOutcomeLowAssessmentBadge;
+exports.LearningOutcomeLowAssessmentDot = require_LearningOutcomeLowAssessmentBadge.LearningOutcomeLowAssessmentDot;
+exports.learningOutcomeLabels = require_LearningOutcomeLevelBadge.learningOutcomeLabels;

package/dist/LearningOutcomeBadges/index.d.cts

@@ -0,0 +1,3 @@
+import { LearningOutcomeLevelBadge, LearningOutcomeLevels, learningOutcomeLabels } from "./LearningOutcomeLevelBadge.cjs";
+import { LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot } from "./LearningOutcomeLowAssessmentBadge.cjs";
+export { LearningOutcomeLevelBadge, LearningOutcomeLevels, LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot, learningOutcomeLabels };

package/dist/LearningOutcomeBadges/index.d.ts

@@ -1,2 +1,3 @@
-export * from './LearningOutcomeLevelBadge';
-export * from './LearningOutcomeLowAssessmentBadge';
+import { LearningOutcomeLevelBadge, LearningOutcomeLevels, learningOutcomeLabels } from "./LearningOutcomeLevelBadge.js";
+import { LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot } from "./LearningOutcomeLowAssessmentBadge.js";
+export { LearningOutcomeLevelBadge, LearningOutcomeLevels, LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot, learningOutcomeLabels };

package/dist/LearningOutcomeBadges/index.js

@@ -1,2 +1,4 @@
-export * from './LearningOutcomeLevelBadge';
-export * from './LearningOutcomeLowAssessmentBadge';
+import { LearningOutcomeLevelBadge, LearningOutcomeLevels, learningOutcomeLabels } from "./LearningOutcomeLevelBadge.js";
+import { LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot } from "./LearningOutcomeLowAssessmentBadge.js";
+
+export { LearningOutcomeLevelBadge, LearningOutcomeLevels, LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot, learningOutcomeLabels };

package/dist/LearningOutcomeCard/index.cjs

@@ -0,0 +1,167 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_LearningOutcomeLevelBadge = require('../LearningOutcomeBadges/LearningOutcomeLevelBadge.cjs');
+const require_types = require('../LearningOutcomeTile/types.cjs');
+const require_LearningOutcomeTile_index = require('../LearningOutcomeTile/index.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");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/LearningOutcomeCard/index.tsx
+const COMPLETED_COLOR = "yellow-500";
+const SkillTag = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)((0, _codecademy_gamut_styles.css)({
+	px: 8,
+	textColor: "secondary",
+	opacity: "0.65",
+	bg: "background-selected",
+	justifyContent: "space-between"
+}));
+const StyledCard = (0, _emotion_styled.default)(_codecademy_gamut.Card)((props) => ({ ...(0, _codecademy_gamut_styles.variant)({
+	prop: "mode",
+	defaultVariant: "base",
+	base: {
+		border: 2,
+		borderRadius: "lg",
+		borderColor: props.progress === require_types.Progress.completed ? COMPLETED_COLOR : "border-tertiary",
+		display: "flex",
+		flexDirection: props.progress === require_types.Progress.notStarted ? "column" : "row",
+		alignSelf: "stretch",
+		overflow: "auto",
+		gap: props.progress === require_types.Progress.notStarted ? 0 : 32
+	},
+	variants: {
+		emphasized: {
+			bg: "background-primary",
+			borderRadius: "xl",
+			py: 32,
+			px: 24
+		},
+		base: {
+			bg: "background-current",
+			py: 24,
+			px: 16
+		}
+	}
+})(props) }));
+const renderProgress = ({ displayValue, progressDuration, radialValue, startRadialAnimation, showCompletionIcon }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+	flexDirection: "column",
+	flex: "1 0 0",
+	alignSelf: "stretch",
+	flexWrap: "wrap",
+	alignContent: "end",
+	children: showCompletionIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+		bg: COMPLETED_COLOR,
+		width: 80,
+		height: 80,
+		center: true,
+		borderRadius: "full",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.CheckIcon, {
+			size: 44,
+			color: "text"
+		})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.RadialProgress, {
+		color: _codecademy_gamut_styles.theme.colors[COMPLETED_COLOR],
+		duration: progressDuration || void 0,
+		size: 80,
+		strokeLinecap: "round",
+		strokeWidth: 8,
+		value: radialValue ?? 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+			as: "span",
+			fontSize: 22,
+			fontWeight: 700,
+			children: `${displayValue}%`
+		})
+	}, `radial-progress-${startRadialAnimation ? 1 : 0}`)
+});
+const renderSkills = (skills) => skills.map((skill) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillTag, {
+	as: "li",
+	children: skill.title
+}, skill.title));
+const fontVariant = (isEmphasized, level) => {
+	if (isEmphasized) return "title-sm";
+	switch (level) {
+		case require_LearningOutcomeLevelBadge.LearningOutcomeLevels.One: return "p-base";
+		case require_LearningOutcomeLevelBadge.LearningOutcomeLevels.Two: return "title-xs";
+		case require_LearningOutcomeLevelBadge.LearningOutcomeLevels.Three: return "title-sm";
+		default: return "p-base";
+	}
+};
+const LearningOutcomeCard = ({ level, outcome, as, headingLevel, isInteractive = false, mode = "base", progress = 0, skills, progressUpdateData }) => {
+	const [startRadialAnimation, setStartRadialAnimation] = (0, react.useState)(false);
+	const [showCompletionIcon, setShowCompletionIcon] = (0, react.useState)(false);
+	const { previousProgress, progressDuration, completionDelay } = progressUpdateData || {};
+	const progressStatus = require_LearningOutcomeTile_index.progressState(progress);
+	const displayProgress = progressStatus !== require_types.Progress.notStarted;
+	const radialValue = previousProgress !== void 0 && progress !== void 0 ? startRadialAnimation ? [previousProgress, progress] : previousProgress : progress;
+	const displayValue = previousProgress !== void 0 && !startRadialAnimation ? previousProgress : progress;
+	const isEmphasized = mode === "emphasized";
+	(0, react.useEffect)(() => {
+		if (progress && progressDuration) setTimeout(() => {
+			setStartRadialAnimation(true);
+		}, progressDuration);
+		if (progress === 100) if (completionDelay) setTimeout(() => {
+			setShowCompletionIcon(true);
+		}, completionDelay);
+		else setShowCompletionIcon(true);
+	}, [
+		progressDuration,
+		progress,
+		completionDelay
+	]);
+	const sortedSkills = (0, react.useMemo)(() => {
+		if (!skills || skills.length === 0) return;
+		return skills.slice().sort((a, b) => {
+			const titleA = a.title ?? "";
+			const titleB = b.title ?? "";
+			return titleA.localeCompare(titleB);
+		});
+	}, [skills]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCard, {
+		as,
+		"aria-label": `${require_LearningOutcomeLevelBadge.learningOutcomeLabels[level ?? 1]} - ${outcome}`,
+		isInteractive,
+		progress: progressStatus,
+		mode,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+			flexDirection: "column",
+			gap: 24,
+			children: [
+				level && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LearningOutcomeLevelBadge.LearningOutcomeLevelBadge, {
+					level,
+					size: isEmphasized ? "base" : "sm",
+					textColor: level !== require_LearningOutcomeLevelBadge.LearningOutcomeLevels.One ? "navy-800" : "text",
+					removeBackground: true
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+					variant: fontVariant(isEmphasized, level),
+					fontWeight: isEmphasized ? 700 : 400,
+					width: "100%",
+					as: headingLevel,
+					children: outcome
+				}),
+				!!sortedSkills && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+					as: "ul",
+					pl: 0,
+					m: 0,
+					alignItems: "flex-start",
+					gap: 8,
+					wrap: true,
+					children: renderSkills(sortedSkills)
+				})
+			]
+		}), displayProgress && renderProgress({
+			displayValue,
+			progressDuration,
+			radialValue,
+			startRadialAnimation,
+			showCompletionIcon
+		})]
+	});
+};
+
+//#endregion
+exports.LearningOutcomeCard = LearningOutcomeCard;

package/dist/LearningOutcomeCard/index.d.cts

@@ -0,0 +1,30 @@
+import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.cjs";
+import { HeadingTags } from "@codecademy/gamut";
+
+//#region src/LearningOutcomeCard/index.d.ts
+interface LearningOutcomeSkill {
+  title?: string | null | undefined;
+}
+interface LearningOutcomeCardProps {
+  level: LearningOutcomeLevels | null | undefined;
+  outcome: string;
+  as?: 'li';
+  headingLevel?: HeadingTags;
+  isInteractive?: boolean;
+  mode?: 'emphasized' | 'base';
+  progress?: number;
+  skills?: LearningOutcomeSkill[] | null;
+  /**
+   * Optional prop for progress updates, used to animate the radial progress from a previous value to the current value.
+   * Need to provide previousProgress and progressDuraion to animate the radial progress.
+   * If progress is 100, completionDelay needs to be provided instead of progressDuration to delay the display of the completion icon.
+   */
+  progressUpdateData?: {
+    previousProgress: number;
+    progressDuration?: number;
+    completionDelay?: number;
+  };
+}
+declare const LearningOutcomeCard: React.FC<LearningOutcomeCardProps>;
+//#endregion
+export { LearningOutcomeCard };

package/dist/LearningOutcomeCard/index.d.ts

@@ -1,27 +1,31 @@
-import { HeadingTags } from '@codecademy/gamut';
-import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
+import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
+import "../LearningOutcomeBadges/index.js";
+import { HeadingTags } from "@codecademy/gamut";
+
+//#region src/LearningOutcomeCard/index.d.ts
 interface LearningOutcomeSkill {
-    title?: string | null | undefined;
+  title?: string | null | undefined;
 }
 interface LearningOutcomeCardProps {
-    level: LearningOutcomeLevels | null | undefined;
-    outcome: string;
-    as?: 'li';
-    headingLevel?: HeadingTags;
-    isInteractive?: boolean;
-    mode?: 'emphasized' | 'base';
-    progress?: number;
-    skills?: LearningOutcomeSkill[] | null;
-    /**
-     * Optional prop for progress updates, used to animate the radial progress from a previous value to the current value.
-     * Need to provide previousProgress and progressDuraion to animate the radial progress.
-     * If progress is 100, completionDelay needs to be provided instead of progressDuration to delay the display of the completion icon.
-     */
-    progressUpdateData?: {
-        previousProgress: number;
-        progressDuration?: number;
-        completionDelay?: number;
-    };
+  level: LearningOutcomeLevels | null | undefined;
+  outcome: string;
+  as?: 'li';
+  headingLevel?: HeadingTags;
+  isInteractive?: boolean;
+  mode?: 'emphasized' | 'base';
+  progress?: number;
+  skills?: LearningOutcomeSkill[] | null;
+  /**
+   * Optional prop for progress updates, used to animate the radial progress from a previous value to the current value.
+   * Need to provide previousProgress and progressDuraion to animate the radial progress.
+   * If progress is 100, completionDelay needs to be provided instead of progressDuration to delay the display of the completion icon.
+   */
+  progressUpdateData?: {
+    previousProgress: number;
+    progressDuration?: number;
+    completionDelay?: number;
+  };
 }
-export declare const LearningOutcomeCard: React.FC<LearningOutcomeCardProps>;
-export {};
+declare const LearningOutcomeCard: React.FC<LearningOutcomeCardProps>;
+//#endregion
+export { LearningOutcomeCard };