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

package/dist/LayoutMenuVariant/index.js

@@ -0,0 +1,2 @@
+export * from './LayoutMenu';
+export * from './SectionItemLink';

package/dist/LearningOutcomeAssessmentScores/AssessmentDetail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AssessmentDetailProps {
+    isHighestScore?: boolean;
+    score?: number | null;
+    scoreAchievedAt?: string | null;
+}
+export declare const AssessmentDetail: React.FC<AssessmentDetailProps>;
+export {};

package/dist/LearningOutcomeAssessmentScores/AssessmentDetail.js

@@ -0,0 +1,55 @@
+import { Box, FlexBox, Text } from '@codecademy/gamut';
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const AssessmentDetail = ({
+  isHighestScore,
+  score,
+  scoreAchievedAt
+}) => {
+  const hasPassedAssessment = score && score >= 70;
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    borderColor: "background-hover",
+    borderRight: isHighestScore ? 1 : 'none',
+    width: "100%",
+    p: 16,
+    column: true,
+    children: [/*#__PURE__*/_jsx(Text, {
+      fontWeight: 700,
+      children: isHighestScore ? 'Highest score' : 'Most recent'
+    }), score != null ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(FlexBox, {
+        mt: 8,
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "title-sm",
+          "data-testid": "score-percent",
+          mr: 4,
+          color: hasPassedAssessment ? 'green-700' : undefined,
+          children: `${score}%`
+        }), /*#__PURE__*/_jsx(Box, {
+          children: !hasPassedAssessment && /*#__PURE__*/_jsx(Box, {
+            "data-testid": "failed-assessment-indicator",
+            borderRadius: "full",
+            dimensions: 16,
+            bg: "orange-500",
+            mb: 4
+          })
+        })]
+      }), !!scoreAchievedAt && /*#__PURE__*/_jsx(Text, {
+        textColor: "text-secondary",
+        children: scoreAchievedAt
+      })]
+    }) : /*#__PURE__*/_jsxs(FlexBox, {
+      column: true,
+      color: "text-secondary",
+      children: [/*#__PURE__*/_jsx(Text, {
+        fontWeight: 700,
+        my: 4,
+        "aria-hidden": true,
+        children: "-"
+      }), /*#__PURE__*/_jsx(Text, {
+        children: "Not tested yet"
+      })]
+    })]
+  });
+};

package/dist/LearningOutcomeAssessmentScores/index.d.ts

@@ -0,0 +1,8 @@
+interface AssessmentScoresProps {
+    highestScore: number | null | undefined;
+    highestScoreAchievedAt: string | null | undefined;
+    latestScore: number | null | undefined;
+    latestScoreAchievedAt: string | null | undefined;
+}
+export declare const LearningOutcomeAssessmentScores: React.FC<AssessmentScoresProps>;
+export {};

package/dist/LearningOutcomeAssessmentScores/index.js

@@ -0,0 +1,24 @@
+import { FlexBox } from '@codecademy/gamut';
+import { AssessmentDetail } from './AssessmentDetail';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LearningOutcomeAssessmentScores = ({
+  highestScore,
+  highestScoreAchievedAt,
+  latestScore,
+  latestScoreAchievedAt
+}) => {
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    borderColor: "background-hover",
+    border: 1,
+    borderRadius: "md",
+    width: "100%",
+    children: [/*#__PURE__*/_jsx(AssessmentDetail, {
+      isHighestScore: true,
+      score: highestScore,
+      scoreAchievedAt: highestScoreAchievedAt
+    }), /*#__PURE__*/_jsx(AssessmentDetail, {
+      score: latestScore,
+      scoreAchievedAt: latestScoreAchievedAt
+    })]
+  });
+};

package/dist/LearningOutcomeBadges/LearningOutcomeLevelBadge.d.ts

@@ -0,0 +1,18 @@
+import { TextProps } from '@codecademy/gamut';
+export declare enum LearningOutcomeLevels {
+    One = 1,
+    Two = 2,
+    Three = 3
+}
+export declare const learningOutcomeLabels: {
+    1: string;
+    2: string;
+    3: string;
+};
+interface LearningOutcomeLevelBadgeProps extends Pick<TextProps, 'textColor'> {
+    level: LearningOutcomeLevels;
+    size?: 'sm' | 'base';
+    removeBackground?: boolean;
+}
+export declare const LearningOutcomeLevelBadge: React.FC<LearningOutcomeLevelBadgeProps>;
+export {};

package/dist/LearningOutcomeBadges/LearningOutcomeLevelBadge.js

@@ -0,0 +1,57 @@
+import _styled from "@emotion/styled/base";
+import { Badge, FlexBox, Text } from '@codecademy/gamut';
+import { css, variant } from '@codecademy/gamut-styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+export let LearningOutcomeLevels = /*#__PURE__*/function (LearningOutcomeLevels) {
+  LearningOutcomeLevels[LearningOutcomeLevels["One"] = 1] = "One";
+  LearningOutcomeLevels[LearningOutcomeLevels["Two"] = 2] = "Two";
+  LearningOutcomeLevels[LearningOutcomeLevels["Three"] = 3] = "Three";
+  return LearningOutcomeLevels;
+}({});
+export const learningOutcomeLabels = {
+  [LearningOutcomeLevels.One]: 'Subskill',
+  [LearningOutcomeLevels.Two]: 'Skill',
+  [LearningOutcomeLevels.Three]: 'Skill set'
+};
+const StyledBadge = /*#__PURE__*/_styled(Badge, {
+  target: "e187pstn0",
+  label: "StyledBadge"
+})(css({
+  borderColor: 'border-tertiary'
+}), variant({
+  prop: 'level',
+  variants: {
+    [LearningOutcomeLevels.One]: {
+      bg: 'background-selected'
+    },
+    [LearningOutcomeLevels.Two]: {
+      bg: 'green-100'
+    },
+    [LearningOutcomeLevels.Three]: {
+      bg: 'blue-100'
+    }
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVCYWRnZXMvTGVhcm5pbmdPdXRjb21lTGV2ZWxCYWRnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JvQiIsImZpbGUiOiIuLi8uLi9zcmMvTGVhcm5pbmdPdXRjb21lQmFkZ2VzL0xlYXJuaW5nT3V0Y29tZUxldmVsQmFkZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQmFkZ2UsIEZsZXhCb3gsIFRleHQsIFRleHRQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcywgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBlbnVtIExlYXJuaW5nT3V0Y29tZUxldmVscyB7XG4gIE9uZSA9IDEsXG4gIFR3byA9IDIsXG4gIFRocmVlID0gMyxcbn1cblxuZXhwb3J0IGNvbnN0IGxlYXJuaW5nT3V0Y29tZUxhYmVscyA9IHtcbiAgW0xlYXJuaW5nT3V0Y29tZUxldmVscy5PbmVdOiAnU3Vic2tpbGwnLFxuICBbTGVhcm5pbmdPdXRjb21lTGV2ZWxzLlR3b106ICdTa2lsbCcsXG4gIFtMZWFybmluZ091dGNvbWVMZXZlbHMuVGhyZWVdOiAnU2tpbGwgc2V0Jyxcbn07XG5cbmNvbnN0IFN0eWxlZEJhZGdlID0gc3R5bGVkKEJhZGdlKTx7IGxldmVsOiBMZWFybmluZ091dGNvbWVMZXZlbHMgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyQ29sb3I6ICdib3JkZXItdGVydGlhcnknLFxuICB9KSxcbiAgdmFyaWFudCh7XG4gICAgcHJvcDogJ2xldmVsJyxcbiAgICB2YXJpYW50czoge1xuICAgICAgW0xlYXJuaW5nT3V0Y29tZUxldmVscy5PbmVdOiB7XG4gICAgICAgIGJnOiAnYmFja2dyb3VuZC1zZWxlY3RlZCcsXG4gICAgICB9LFxuICAgICAgW0xlYXJuaW5nT3V0Y29tZUxldmVscy5Ud29dOiB7XG4gICAgICAgIGJnOiAnZ3JlZW4tMTAwJyxcbiAgICAgIH0sXG4gICAgICBbTGVhcm5pbmdPdXRjb21lTGV2ZWxzLlRocmVlXToge1xuICAgICAgICBiZzogJ2JsdWUtMTAwJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmludGVyZmFjZSBMZWFybmluZ091dGNvbWVMZXZlbEJhZGdlUHJvcHMgZXh0ZW5kcyBQaWNrPFRleHRQcm9wcywgJ3RleHRDb2xvcic+IHtcbiAgbGV2ZWw6IExlYXJuaW5nT3V0Y29tZUxldmVscztcbiAgc2l6ZT86ICdzbScgfCAnYmFzZSc7XG4gIHJlbW92ZUJhY2tncm91bmQ/OiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgTGVhcm5pbmdPdXRjb21lTGV2ZWxCYWRnZTogUmVhY3QuRkM8XG4gIExlYXJuaW5nT3V0Y29tZUxldmVsQmFkZ2VQcm9wc1xuPiA9ICh7IGxldmVsLCBzaXplID0gJ3NtJywgdGV4dENvbG9yLCByZW1vdmVCYWNrZ3JvdW5kIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RmxleEJveFxuICAgICAgYmc9e3JlbW92ZUJhY2tncm91bmQgPyAndHJhbnNwYXJlbnQnIDogJ3doaXRlJ31cbiAgICAgIGhlaWdodD1cIm1pbi1jb250ZW50XCJcbiAgICAgIHdpZHRoPVwibWluLWNvbnRlbnRcIlxuICAgICAgYm9yZGVyUmFkaXVzPVwieGxcIlxuICAgID5cbiAgICAgIDxTdHlsZWRCYWRnZVxuICAgICAgICBkYXRhLXRlc3RpZD1cImxlYXJuaW5nLW91dGNvbWUtYmFkZ2VcIlxuICAgICAgICBzaXplPXtzaXplfVxuICAgICAgICB2YXJpYW50PVwidGVydGlhcnlcIlxuICAgICAgICBsZXZlbD17bGV2ZWx9XG4gICAgICA+XG4gICAgICAgIDxUZXh0IGNvbG9yPXt0ZXh0Q29sb3IgfHwgJ3RleHQnfT57bGVhcm5pbmdPdXRjb21lTGFiZWxzW2xldmVsXX08L1RleHQ+XG4gICAgICA8L1N0eWxlZEJhZGdlPlxuICAgIDwvRmxleEJveD5cbiAgKTtcbn07XG4iXX0= */");
+export const LearningOutcomeLevelBadge = ({
+  level,
+  size = 'sm',
+  textColor,
+  removeBackground
+}) => {
+  return /*#__PURE__*/_jsx(FlexBox, {
+    bg: removeBackground ? 'transparent' : 'white',
+    height: "min-content",
+    width: "min-content",
+    borderRadius: "xl",
+    children: /*#__PURE__*/_jsx(StyledBadge, {
+      "data-testid": "learning-outcome-badge",
+      size: size,
+      variant: "tertiary",
+      level: level,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: textColor || 'text',
+        children: learningOutcomeLabels[level]
+      })
+    })
+  });
+};

package/dist/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.d.ts

@@ -0,0 +1,10 @@
+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" | "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" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    hasBorder?: boolean;
+    small?: boolean;
+}, {}, {}>;
+export declare const LearningOutcomeLowAssessmentBadge: React.FC;

package/dist/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.js

@@ -0,0 +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
+}), 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"
+    })]
+  });
+};

package/dist/LearningOutcomeBadges/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LearningOutcomeLevelBadge';
+export * from './LearningOutcomeLowAssessmentBadge';

package/dist/LearningOutcomeBadges/index.js

@@ -0,0 +1,2 @@
+export * from './LearningOutcomeLevelBadge';
+export * from './LearningOutcomeLowAssessmentBadge';

package/dist/LearningOutcomeCard/index.d.ts

@@ -0,0 +1,27 @@
+import { HeadingTags } from '@codecademy/gamut';
+import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
+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;
+    };
+}
+export declare const LearningOutcomeCard: React.FC<LearningOutcomeCardProps>;
+export {};

package/dist/LearningOutcomeCard/index.js

@@ -0,0 +1,203 @@
+import _styled from "@emotion/styled/base";
+import { Card, FlexBox, RadialProgress, Text } from '@codecademy/gamut';
+import { CheckIcon } from '@codecademy/gamut-icons';
+import { css, theme, variant } from '@codecademy/gamut-styles';
+import { useEffect, useMemo, useState } from 'react';
+import { learningOutcomeLabels, LearningOutcomeLevelBadge, LearningOutcomeLevels } from '../LearningOutcomeBadges';
+import { progressState } from '../LearningOutcomeTile';
+import { Progress } from '../LearningOutcomeTile/types';
+
+// to match the type from gql schema
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COMPLETED_COLOR = 'yellow-500';
+const SkillTag = /*#__PURE__*/_styled(FlexBox, {
+  target: "ev1pt781",
+  label: "SkillTag"
+})(css({
+  px: 8,
+  textColor: 'secondary',
+  opacity: '0.65',
+  bg: 'background-selected',
+  justifyContent: 'space-between'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVDYXJkL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3RGlCIiwiZmlsZSI6Ii4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENhcmQsXG4gIEZsZXhCb3gsXG4gIEhlYWRpbmdUYWdzLFxuICBSYWRpYWxQcm9ncmVzcyxcbiAgVGV4dCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCB0aGVtZSwgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBsZWFybmluZ091dGNvbWVMYWJlbHMsXG4gIExlYXJuaW5nT3V0Y29tZUxldmVsQmFkZ2UsXG4gIExlYXJuaW5nT3V0Y29tZUxldmVscyxcbn0gZnJvbSAnLi4vTGVhcm5pbmdPdXRjb21lQmFkZ2VzJztcbmltcG9ydCB7IHByb2dyZXNzU3RhdGUgfSBmcm9tICcuLi9MZWFybmluZ091dGNvbWVUaWxlJztcbmltcG9ydCB7IFByb2dyZXNzIH0gZnJvbSAnLi4vTGVhcm5pbmdPdXRjb21lVGlsZS90eXBlcyc7XG5cbi8vIHRvIG1hdGNoIHRoZSB0eXBlIGZyb20gZ3FsIHNjaGVtYVxuaW50ZXJmYWNlIExlYXJuaW5nT3V0Y29tZVNraWxsIHtcbiAgdGl0bGU/OiBzdHJpbmcgfCBudWxsIHwgdW5kZWZpbmVkO1xufVxuaW50ZXJmYWNlIExlYXJuaW5nT3V0Y29tZUNhcmRQcm9wcyB7XG4gIGxldmVsOiBMZWFybmluZ091dGNvbWVMZXZlbHMgfCBudWxsIHwgdW5kZWZpbmVkO1xuICBvdXRjb21lOiBzdHJpbmc7XG4gIGFzPzogJ2xpJztcbiAgaGVhZGluZ0xldmVsPzogSGVhZGluZ1RhZ3M7XG4gIGlzSW50ZXJhY3RpdmU/OiBib29sZWFuO1xuICBtb2RlPzogJ2VtcGhhc2l6ZWQnIHwgJ2Jhc2UnO1xuICBwcm9ncmVzcz86IG51bWJlcjtcbiAgc2tpbGxzPzogTGVhcm5pbmdPdXRjb21lU2tpbGxbXSB8IG51bGw7XG5cbiAgLyoqXG4gICAqIE9wdGlvbmFsIHByb3AgZm9yIHByb2dyZXNzIHVwZGF0ZXMsIHVzZWQgdG8gYW5pbWF0ZSB0aGUgcmFkaWFsIHByb2dyZXNzIGZyb20gYSBwcmV2aW91cyB2YWx1ZSB0byB0aGUgY3VycmVudCB2YWx1ZS5cbiAgICogTmVlZCB0byBwcm92aWRlIHByZXZpb3VzUHJvZ3Jlc3MgYW5kIHByb2dyZXNzRHVyYWlvbiB0byBhbmltYXRlIHRoZSByYWRpYWwgcHJvZ3Jlc3MuXG4gICAqIElmIHByb2dyZXNzIGlzIDEwMCwgY29tcGxldGlvbkRlbGF5IG5lZWRzIHRvIGJlIHByb3ZpZGVkIGluc3RlYWQgb2YgcHJvZ3Jlc3NEdXJhdGlvbiB0byBkZWxheSB0aGUgZGlzcGxheSBvZiB0aGUgY29tcGxldGlvbiBpY29uLlxuICAgKi9cbiAgcHJvZ3Jlc3NVcGRhdGVEYXRhPzoge1xuICAgIHByZXZpb3VzUHJvZ3Jlc3M6IG51bWJlcjtcbiAgICBwcm9ncmVzc0R1cmF0aW9uPzogbnVtYmVyO1xuICAgIGNvbXBsZXRpb25EZWxheT86IG51bWJlcjtcbiAgfTtcbn1cblxuaW50ZXJmYWNlIFByb2dyZXNzUHJvcHMge1xuICBkaXNwbGF5VmFsdWU6IG51bWJlcjtcbiAgcHJvZ3Jlc3NEdXJhdGlvbjogbnVtYmVyIHwgdW5kZWZpbmVkO1xuICByYWRpYWxWYWx1ZTogbnVtYmVyIHwgbnVtYmVyW107XG4gIHN0YXJ0UmFkaWFsQW5pbWF0aW9uOiBib29sZWFuO1xuICBzaG93Q29tcGxldGlvbkljb246IGJvb2xlYW47XG59XG5cbmNvbnN0IENPTVBMRVRFRF9DT0xPUiA9ICd5ZWxsb3ctNTAwJztcblxuY29uc3QgU2tpbGxUYWcgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgcHg6IDgsXG4gICAgdGV4dENvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICBvcGFjaXR5OiAnMC42NScsXG4gICAgYmc6ICdiYWNrZ3JvdW5kLXNlbGVjdGVkJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxuICB9KVxuKTtcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKTx7XG4gIHByb2dyZXNzOiBQcm9ncmVzcztcbiAgbW9kZT86ICdlbXBoYXNpemVkJyB8ICdiYXNlJztcbn0+KChwcm9wcykgPT4gKHtcbiAgLi4udmFyaWFudCh7XG4gICAgcHJvcDogJ21vZGUnLFxuICAgIGRlZmF1bHRWYXJpYW50OiAnYmFzZScsXG4gICAgYmFzZToge1xuICAgICAgYm9yZGVyOiAyLFxuICAgICAgYm9yZGVyUmFkaXVzOiAnbGcnLFxuICAgICAgYm9yZGVyQ29sb3I6XG4gICAgICAgIHByb3BzLnByb2dyZXNzID09PSBQcm9ncmVzcy5jb21wbGV0ZWRcbiAgICAgICAgICA/IENPTVBMRVRFRF9DT0xPUlxuICAgICAgICAgIDogJ2JvcmRlci10ZXJ0aWFyeScsXG4gICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBwcm9wcy5wcm9ncmVzcyA9PT0gUHJvZ3Jlc3Mubm90U3RhcnRlZCA/ICdjb2x1bW4nIDogJ3JvdycsXG4gICAgICBhbGlnblNlbGY6ICdzdHJldGNoJyxcbiAgICAgIG92ZXJmbG93OiAnYXV0bycsXG4gICAgICBnYXA6IHByb3BzLnByb2dyZXNzID09PSBQcm9ncmVzcy5ub3RTdGFydGVkID8gMCA6IDMyLFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIGVtcGhhc2l6ZWQ6IHtcbiAgICAgICAgYmc6ICdiYWNrZ3JvdW5kLXByaW1hcnknLFxuICAgICAgICBib3JkZXJSYWRpdXM6ICd4bCcsXG4gICAgICAgIHB5OiAzMixcbiAgICAgICAgcHg6IDI0LFxuICAgICAgfSxcbiAgICAgIGJhc2U6IHtcbiAgICAgICAgYmc6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgICAgICBweTogMjQsXG4gICAgICAgIHB4OiAxNixcbiAgICAgIH0sXG4gICAgfSxcbiAgfSkocHJvcHMpLFxufSkpO1xuXG5jb25zdCByZW5kZXJQcm9ncmVzcyA9ICh7XG4gIGRpc3BsYXlWYWx1ZSxcbiAgcHJvZ3Jlc3NEdXJhdGlvbixcbiAgcmFkaWFsVmFsdWUsXG4gIHN0YXJ0UmFkaWFsQW5pbWF0aW9uLFxuICBzaG93Q29tcGxldGlvbkljb24sXG59OiBQcm9ncmVzc1Byb3BzKSA9PiAoXG4gIDxGbGV4Qm94XG4gICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgZmxleD1cIjEgMCAwXCJcbiAgICBhbGlnblNlbGY9XCJzdHJldGNoXCJcbiAgICBmbGV4V3JhcD1cIndyYXBcIlxuICAgIGFsaWduQ29udGVudD1cImVuZFwiXG4gID5cbiAgICB7c2hvd0NvbXBsZXRpb25JY29uID8gKFxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgYmc9e0NPTVBMRVRFRF9DT0xPUn1cbiAgICAgICAgd2lkdGg9ezgwfVxuICAgICAgICBoZWlnaHQ9ezgwfVxuICAgICAgICBjZW50ZXJcbiAgICAgICAgYm9yZGVyUmFkaXVzPVwiZnVsbFwiXG4gICAgICA+XG4gICAgICAgIDxDaGVja0ljb24gc2l6ZT17NDR9IGNvbG9yPVwidGV4dFwiIC8+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgKSA6IChcbiAgICAgIDxSYWRpYWxQcm9ncmVzc1xuICAgICAgICBrZXk9e2ByYWRpYWwtcHJvZ3Jlc3MtJHtzdGFydFJhZGlhbEFuaW1hdGlvbiA/IDEgOiAwfWB9XG4gICAgICAgIGNvbG9yPXt0aGVtZS5jb2xvcnNbQ09NUExFVEVEX0NPTE9SXX1cbiAgICAgICAgZHVyYXRpb249e3Byb2dyZXNzRHVyYXRpb24gfHwgdW5kZWZpbmVkfVxuICAgICAgICBzaXplPXs4MH1cbiAgICAgICAgc3Ryb2tlTGluZWNhcD1cInJvdW5kXCJcbiAgICAgICAgc3Ryb2tlV2lkdGg9ezh9XG4gICAgICAgIHZhbHVlPXtyYWRpYWxWYWx1ZSA/PyAwfVxuICAgICAgPlxuICAgICAgICA8VGV4dCBhcz1cInNwYW5cIiBmb250U2l6ZT17MjJ9IGZvbnRXZWlnaHQ9ezcwMH0+XG4gICAgICAgICAge2Ake2Rpc3BsYXlWYWx1ZX0lYH1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9SYWRpYWxQcm9ncmVzcz5cbiAgICApfVxuICA8L0ZsZXhCb3g+XG4pO1xuXG5jb25zdCByZW5kZXJTa2lsbHMgPSAoc2tpbGxzOiBMZWFybmluZ091dGNvbWVTa2lsbFtdKSA9PlxuICBza2lsbHMubWFwKChza2lsbCkgPT4gKFxuICAgIDxTa2lsbFRhZyBhcz1cImxpXCIga2V5PXtza2lsbC50aXRsZX0+XG4gICAgICB7c2tpbGwudGl0bGV9XG4gICAgPC9Ta2lsbFRhZz5cbiAgKSk7XG5cbmNvbnN0IGZvbnRWYXJpYW50ID0gKFxuICBpc0VtcGhhc2l6ZWQ6IGJvb2xlYW4sXG4gIGxldmVsPzogTGVhcm5pbmdPdXRjb21lTGV2ZWxzIHwgbnVsbFxuKSA9PiB7XG4gIGlmIChpc0VtcGhhc2l6ZWQpIHtcbiAgICByZXR1cm4gJ3RpdGxlLXNtJztcbiAgfVxuXG4gIHN3aXRjaCAobGV2ZWwpIHtcbiAgICBjYXNlIExlYXJuaW5nT3V0Y29tZUxldmVscy5PbmU6XG4gICAgICByZXR1cm4gJ3AtYmFzZSc7XG4gICAgY2FzZSBMZWFybmluZ091dGNvbWVMZXZlbHMuVHdvOlxuICAgICAgcmV0dXJuICd0aXRsZS14cyc7XG4gICAgY2FzZSBMZWFybmluZ091dGNvbWVMZXZlbHMuVGhyZWU6XG4gICAgICByZXR1cm4gJ3RpdGxlLXNtJztcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuICdwLWJhc2UnO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgTGVhcm5pbmdPdXRjb21lQ2FyZDogUmVhY3QuRkM8TGVhcm5pbmdPdXRjb21lQ2FyZFByb3BzPiA9ICh7XG4gIGxldmVsLFxuICBvdXRjb21lLFxuICBhcyxcbiAgaGVhZGluZ0xldmVsLFxuICBpc0ludGVyYWN0aXZlID0gZmFsc2UsXG4gIG1vZGUgPSAnYmFzZScsXG4gIHByb2dyZXNzID0gMCxcbiAgc2tpbGxzLFxuICBwcm9ncmVzc1VwZGF0ZURhdGEsXG59KSA9PiB7XG4gIGNvbnN0IFtzdGFydFJhZGlhbEFuaW1hdGlvbiwgc2V0U3RhcnRSYWRpYWxBbmltYXRpb25dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbc2hvd0NvbXBsZXRpb25JY29uLCBzZXRTaG93Q29tcGxldGlvbkljb25dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IHsgcHJldmlvdXNQcm9ncmVzcywgcHJvZ3Jlc3NEdXJhdGlvbiwgY29tcGxldGlvbkRlbGF5IH0gPVxuICAgIHByb2dyZXNzVXBkYXRlRGF0YSB8fCB7fTtcbiAgY29uc3QgcHJvZ3Jlc3NTdGF0dXMgPSBwcm9ncmVzc1N0YXRlKHByb2dyZXNzKTtcbiAgY29uc3QgZGlzcGxheVByb2dyZXNzID0gcHJvZ3Jlc3NTdGF0dXMgIT09IFByb2dyZXNzLm5vdFN0YXJ0ZWQ7XG5cbiAgLy8gd2hlbiBwcmV2aW91c1Byb2dyZXNzIGlzIHByb3ZpZGVkLCBlaXRoZXIgc3RhcnQgdGhlIHByb2dyZXNzIGFuaW1hdGlvbiBvciBvbmx5IGRpc3BsYXkgcHJldmlvdXMgcHJvZ3Jlc3Mgd2hpbGUgd2Ugd2FpdC4gSWYgbm90IHByb3ZpZGVkIHRoZW4gb25seSBkaXNwbGF5IGN1cnJlbnQgcHJvZ3Jlc3NcbiAgY29uc3QgcmFkaWFsVmFsdWUgPVxuICAgIHByZXZpb3VzUHJvZ3Jlc3MgIT09IHVuZGVmaW5lZCAmJiBwcm9ncmVzcyAhPT0gdW5kZWZpbmVkXG4gICAgICA/IHN0YXJ0UmFkaWFsQW5pbWF0aW9uXG4gICAgICAgID8gW3ByZXZpb3VzUHJvZ3Jlc3MsIHByb2dyZXNzXVxuICAgICAgICA6IHByZXZpb3VzUHJvZ3Jlc3NcbiAgICAgIDogcHJvZ3Jlc3M7XG5cbiAgLy8gd2hlbiBwcmV2aW91c1Byb2dyZXNzIGlzIHByb3ZpZGVkIGJ1dCB3ZSBoYXZlbid0IHN0YXJ0ZWQgdGhlIGFuaW1hdGlvbiB5ZXQgdGhlbiBzaG93IHByZXZpb3VzIHByb2dyZXNzLCBvdGhlcndpc2UsIGlmIGFuaW1hdGlvbiBoYXMgc3RhcnRlZCwgdGhlbiBzaG93IGN1cnJlbnQgcHJvZ3Jlc3NcbiAgY29uc3QgZGlzcGxheVZhbHVlID1cbiAgICBwcmV2aW91c1Byb2dyZXNzICE9PSB1bmRlZmluZWQgJiYgIXN0YXJ0UmFkaWFsQW5pbWF0aW9uXG4gICAgICA/IHByZXZpb3VzUHJvZ3Jlc3NcbiAgICAgIDogcHJvZ3Jlc3M7XG5cbiAgY29uc3QgaXNFbXBoYXNpemVkID0gbW9kZSA9PT0gJ2VtcGhhc2l6ZWQnO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKHByb2dyZXNzICYmIHByb2dyZXNzRHVyYXRpb24pIHtcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBzZXRTdGFydFJhZGlhbEFuaW1hdGlvbih0cnVlKTtcbiAgICAgIH0sIHByb2dyZXNzRHVyYXRpb24pO1xuICAgIH1cblxuICAgIGlmIChwcm9ncmVzcyA9PT0gMTAwKSB7XG4gICAgICAvLyBjb21wbGV0aW9uRGVsYXkgaXMgZm9yIGFuaW1hdGluZyB0aGUgcHJvZ3Jlc3M7IHRoZSBzZXRUaW1lb3V0IHdpbGwgZGVsYXkgc2hvd2luZyB0aGUgY2hlY2ttYXJrIGljb24gc28gcmFkaWFsIHByb2dyZXNzIHdpbGwgYXBwZWFyIGZpcnN0LlxuICAgICAgaWYgKGNvbXBsZXRpb25EZWxheSkge1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICBzZXRTaG93Q29tcGxldGlvbkljb24odHJ1ZSk7XG4gICAgICAgIH0sIGNvbXBsZXRpb25EZWxheSk7XG4gICAgICAgIC8vIElmIGNvbXBsZXRpb25EZWxheSBpcyBub3QgcHJvdmlkZWQsIHRoZSBjb21wbGV0aW9uIGljb24gd2lsbCBzaG93IGltbWVkaWF0ZWx5IGFuZCByYWRpYWwgcHJvZ3Jlc3Mgd2lsbCBub3Qgc2hvdy5cbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHNldFNob3dDb21wbGV0aW9uSWNvbih0cnVlKTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtwcm9ncmVzc0R1cmF0aW9uLCBwcm9ncmVzcywgY29tcGxldGlvbkRlbGF5XSk7XG5cbiAgY29uc3Qgc29ydGVkU2tpbGxzID0gdXNlTWVtbygoKSA9PiB7XG4gICAgaWYgKCFza2lsbHMgfHwgc2tpbGxzLmxlbmd0aCA9PT0gMCkge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9XG5cbiAgICByZXR1cm4gc2tpbGxzLnNsaWNlKCkuc29ydCgoYSwgYikgPT4ge1xuICAgICAgY29uc3QgdGl0bGVBID0gYS50aXRsZSA/PyAnJztcbiAgICAgIGNvbnN0IHRpdGxlQiA9IGIudGl0bGUgPz8gJyc7XG5cbiAgICAgIHJldHVybiB0aXRsZUEubG9jYWxlQ29tcGFyZSh0aXRsZUIpO1xuICAgIH0pO1xuICB9LCBbc2tpbGxzXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ2FyZFxuICAgICAgYXM9e2FzfVxuICAgICAgYXJpYS1sYWJlbD17YCR7bGVhcm5pbmdPdXRjb21lTGFiZWxzW2xldmVsID8/IDFdfSAtICR7b3V0Y29tZX1gfVxuICAgICAgaXNJbnRlcmFjdGl2ZT17aXNJbnRlcmFjdGl2ZX1cbiAgICAgIHByb2dyZXNzPXtwcm9ncmVzc1N0YXR1c31cbiAgICAgIG1vZGU9e21vZGV9XG4gICAgPlxuICAgICAgPEZsZXhCb3ggZmxleERpcmVjdGlvbj1cImNvbHVtblwiIGdhcD17MjR9PlxuICAgICAgICB7bGV2ZWwgJiYgKFxuICAgICAgICAgIDxMZWFybmluZ091dGNvbWVMZXZlbEJhZGdlXG4gICAgICAgICAgICBsZXZlbD17bGV2ZWx9XG4gICAgICAgICAgICBzaXplPXtpc0VtcGhhc2l6ZWQgPyAnYmFzZScgOiAnc20nfVxuICAgICAgICAgICAgdGV4dENvbG9yPXtcbiAgICAgICAgICAgICAgbGV2ZWwgIT09IExlYXJuaW5nT3V0Y29tZUxldmVscy5PbmUgPyAnbmF2eS04MDAnIDogJ3RleHQnXG4gICAgICAgICAgICB9XG4gICAgICAgICAgICByZW1vdmVCYWNrZ3JvdW5kXG4gICAgICAgICAgLz5cbiAgICAgICAgKX1cbiAgICAgICAgPFRleHRcbiAgICAgICAgICB2YXJpYW50PXtmb250VmFyaWFudChpc0VtcGhhc2l6ZWQsIGxldmVsKX1cbiAgICAgICAgICBmb250V2VpZ2h0PXtpc0VtcGhhc2l6ZWQgPyA3MDAgOiA0MDB9XG4gICAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgICBhcz17aGVhZGluZ0xldmVsfVxuICAgICAgICA+XG4gICAgICAgICAge291dGNvbWV9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICAgeyEhc29ydGVkU2tpbGxzICYmIChcbiAgICAgICAgICA8RmxleEJveCBhcz1cInVsXCIgcGw9ezB9IG09ezB9IGFsaWduSXRlbXM9XCJmbGV4LXN0YXJ0XCIgZ2FwPXs4fSB3cmFwPlxuICAgICAgICAgICAge3JlbmRlclNraWxscyhzb3J0ZWRTa2lsbHMpfVxuICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgKX1cbiAgICAgIDwvRmxleEJveD5cblxuICAgICAge2Rpc3BsYXlQcm9ncmVzcyAmJlxuICAgICAgICByZW5kZXJQcm9ncmVzcyh7XG4gICAgICAgICAgZGlzcGxheVZhbHVlLFxuICAgICAgICAgIHByb2dyZXNzRHVyYXRpb24sXG4gICAgICAgICAgcmFkaWFsVmFsdWUsXG4gICAgICAgICAgc3RhcnRSYWRpYWxBbmltYXRpb24sXG4gICAgICAgICAgc2hvd0NvbXBsZXRpb25JY29uLFxuICAgICAgICB9KX1cbiAgICA8L1N0eWxlZENhcmQ+XG4gICk7XG59O1xuIl19 */");
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "ev1pt780",
+  label: "StyledCard"
+})(props => ({
+  ...variant({
+    prop: 'mode',
+    defaultVariant: 'base',
+    base: {
+      border: 2,
+      borderRadius: 'lg',
+      borderColor: props.progress === Progress.completed ? COMPLETED_COLOR : 'border-tertiary',
+      display: 'flex',
+      flexDirection: props.progress === Progress.notStarted ? 'column' : 'row',
+      alignSelf: 'stretch',
+      overflow: 'auto',
+      gap: props.progress === Progress.notStarted ? 0 : 32
+    },
+    variants: {
+      emphasized: {
+        bg: 'background-primary',
+        borderRadius: 'xl',
+        py: 32,
+        px: 24
+      },
+      base: {
+        bg: 'background-current',
+        py: 24,
+        px: 16
+      }
+    }
+  })(props)
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVDYXJkL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRW1CIiwiZmlsZSI6Ii4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENhcmQsXG4gIEZsZXhCb3gsXG4gIEhlYWRpbmdUYWdzLFxuICBSYWRpYWxQcm9ncmVzcyxcbiAgVGV4dCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCB0aGVtZSwgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBsZWFybmluZ091dGNvbWVMYWJlbHMsXG4gIExlYXJuaW5nT3V0Y29tZUxldmVsQmFkZ2UsXG4gIExlYXJuaW5nT3V0Y29tZUxldmVscyxcbn0gZnJvbSAnLi4vTGVhcm5pbmdPdXRjb21lQmFkZ2VzJztcbmltcG9ydCB7IHByb2dyZXNzU3RhdGUgfSBmcm9tICcuLi9MZWFybmluZ091dGNvbWVUaWxlJztcbmltcG9ydCB7IFByb2dyZXNzIH0gZnJvbSAnLi4vTGVhcm5pbmdPdXRjb21lVGlsZS90eXBlcyc7XG5cbi8vIHRvIG1hdGNoIHRoZSB0eXBlIGZyb20gZ3FsIHNjaGVtYVxuaW50ZXJmYWNlIExlYXJuaW5nT3V0Y29tZVNraWxsIHtcbiAgdGl0bGU/OiBzdHJpbmcgfCBudWxsIHwgdW5kZWZpbmVkO1xufVxuaW50ZXJmYWNlIExlYXJuaW5nT3V0Y29tZUNhcmRQcm9wcyB7XG4gIGxldmVsOiBMZWFybmluZ091dGNvbWVMZXZlbHMgfCBudWxsIHwgdW5kZWZpbmVkO1xuICBvdXRjb21lOiBzdHJpbmc7XG4gIGFzPzogJ2xpJztcbiAgaGVhZGluZ0xldmVsPzogSGVhZGluZ1RhZ3M7XG4gIGlzSW50ZXJhY3RpdmU/OiBib29sZWFuO1xuICBtb2RlPzogJ2VtcGhhc2l6ZWQnIHwgJ2Jhc2UnO1xuICBwcm9ncmVzcz86IG51bWJlcjtcbiAgc2tpbGxzPzogTGVhcm5pbmdPdXRjb21lU2tpbGxbXSB8IG51bGw7XG5cbiAgLyoqXG4gICAqIE9wdGlvbmFsIHByb3AgZm9yIHByb2dyZXNzIHVwZGF0ZXMsIHVzZWQgdG8gYW5pbWF0ZSB0aGUgcmFkaWFsIHByb2dyZXNzIGZyb20gYSBwcmV2aW91cyB2YWx1ZSB0byB0aGUgY3VycmVudCB2YWx1ZS5cbiAgICogTmVlZCB0byBwcm92aWRlIHByZXZpb3VzUHJvZ3Jlc3MgYW5kIHByb2dyZXNzRHVyYWlvbiB0byBhbmltYXRlIHRoZSByYWRpYWwgcHJvZ3Jlc3MuXG4gICAqIElmIHByb2dyZXNzIGlzIDEwMCwgY29tcGxldGlvbkRlbGF5IG5lZWRzIHRvIGJlIHByb3ZpZGVkIGluc3RlYWQgb2YgcHJvZ3Jlc3NEdXJhdGlvbiB0byBkZWxheSB0aGUgZGlzcGxheSBvZiB0aGUgY29tcGxldGlvbiBpY29uLlxuICAgKi9cbiAgcHJvZ3Jlc3NVcGRhdGVEYXRhPzoge1xuICAgIHByZXZpb3VzUHJvZ3Jlc3M6IG51bWJlcjtcbiAgICBwcm9ncmVzc0R1cmF0aW9uPzogbnVtYmVyO1xuICAgIGNvbXBsZXRpb25EZWxheT86IG51bWJlcjtcbiAgfTtcbn1cblxuaW50ZXJmYWNlIFByb2dyZXNzUHJvcHMge1xuICBkaXNwbGF5VmFsdWU6IG51bWJlcjtcbiAgcHJvZ3Jlc3NEdXJhdGlvbjogbnVtYmVyIHwgdW5kZWZpbmVkO1xuICByYWRpYWxWYWx1ZTogbnVtYmVyIHwgbnVtYmVyW107XG4gIHN0YXJ0UmFkaWFsQW5pbWF0aW9uOiBib29sZWFuO1xuICBzaG93Q29tcGxldGlvbkljb246IGJvb2xlYW47XG59XG5cbmNvbnN0IENPTVBMRVRFRF9DT0xPUiA9ICd5ZWxsb3ctNTAwJztcblxuY29uc3QgU2tpbGxUYWcgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgcHg6IDgsXG4gICAgdGV4dENvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICBvcGFjaXR5OiAnMC42NScsXG4gICAgYmc6ICdiYWNrZ3JvdW5kLXNlbGVjdGVkJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxuICB9KVxuKTtcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKTx7XG4gIHByb2dyZXNzOiBQcm9ncmVzcztcbiAgbW9kZT86ICdlbXBoYXNpemVkJyB8ICdiYXNlJztcbn0+KChwcm9wcykgPT4gKHtcbiAgLi4udmFyaWFudCh7XG4gICAgcHJvcDogJ21vZGUnLFxuICAgIGRlZmF1bHRWYXJpYW50OiAnYmFzZScsXG4gICAgYmFzZToge1xuICAgICAgYm9yZGVyOiAyLFxuICAgICAgYm9yZGVyUmFkaXVzOiAnbGcnLFxuICAgICAgYm9yZGVyQ29sb3I6XG4gICAgICAgIHByb3BzLnByb2dyZXNzID09PSBQcm9ncmVzcy5jb21wbGV0ZWRcbiAgICAgICAgICA/IENPTVBMRVRFRF9DT0xPUlxuICAgICAgICAgIDogJ2JvcmRlci10ZXJ0aWFyeScsXG4gICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBwcm9wcy5wcm9ncmVzcyA9PT0gUHJvZ3Jlc3Mubm90U3RhcnRlZCA/ICdjb2x1bW4nIDogJ3JvdycsXG4gICAgICBhbGlnblNlbGY6ICdzdHJldGNoJyxcbiAgICAgIG92ZXJmbG93OiAnYXV0bycsXG4gICAgICBnYXA6IHByb3BzLnByb2dyZXNzID09PSBQcm9ncmVzcy5ub3RTdGFydGVkID8gMCA6IDMyLFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIGVtcGhhc2l6ZWQ6IHtcbiAgICAgICAgYmc6ICdiYWNrZ3JvdW5kLXByaW1hcnknLFxuICAgICAgICBib3JkZXJSYWRpdXM6ICd4bCcsXG4gICAgICAgIHB5OiAzMixcbiAgICAgICAgcHg6IDI0LFxuICAgICAgfSxcbiAgICAgIGJhc2U6IHtcbiAgICAgICAgYmc6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgICAgICBweTogMjQsXG4gICAgICAgIHB4OiAxNixcbiAgICAgIH0sXG4gICAgfSxcbiAgfSkocHJvcHMpLFxufSkpO1xuXG5jb25zdCByZW5kZXJQcm9ncmVzcyA9ICh7XG4gIGRpc3BsYXlWYWx1ZSxcbiAgcHJvZ3Jlc3NEdXJhdGlvbixcbiAgcmFkaWFsVmFsdWUsXG4gIHN0YXJ0UmFkaWFsQW5pbWF0aW9uLFxuICBzaG93Q29tcGxldGlvbkljb24sXG59OiBQcm9ncmVzc1Byb3BzKSA9PiAoXG4gIDxGbGV4Qm94XG4gICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgZmxleD1cIjEgMCAwXCJcbiAgICBhbGlnblNlbGY9XCJzdHJldGNoXCJcbiAgICBmbGV4V3JhcD1cIndyYXBcIlxuICAgIGFsaWduQ29udGVudD1cImVuZFwiXG4gID5cbiAgICB7c2hvd0NvbXBsZXRpb25JY29uID8gKFxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgYmc9e0NPTVBMRVRFRF9DT0xPUn1cbiAgICAgICAgd2lkdGg9ezgwfVxuICAgICAgICBoZWlnaHQ9ezgwfVxuICAgICAgICBjZW50ZXJcbiAgICAgICAgYm9yZGVyUmFkaXVzPVwiZnVsbFwiXG4gICAgICA+XG4gICAgICAgIDxDaGVja0ljb24gc2l6ZT17NDR9IGNvbG9yPVwidGV4dFwiIC8+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgKSA6IChcbiAgICAgIDxSYWRpYWxQcm9ncmVzc1xuICAgICAgICBrZXk9e2ByYWRpYWwtcHJvZ3Jlc3MtJHtzdGFydFJhZGlhbEFuaW1hdGlvbiA/IDEgOiAwfWB9XG4gICAgICAgIGNvbG9yPXt0aGVtZS5jb2xvcnNbQ09NUExFVEVEX0NPTE9SXX1cbiAgICAgICAgZHVyYXRpb249e3Byb2dyZXNzRHVyYXRpb24gfHwgdW5kZWZpbmVkfVxuICAgICAgICBzaXplPXs4MH1cbiAgICAgICAgc3Ryb2tlTGluZWNhcD1cInJvdW5kXCJcbiAgICAgICAgc3Ryb2tlV2lkdGg9ezh9XG4gICAgICAgIHZhbHVlPXtyYWRpYWxWYWx1ZSA/PyAwfVxuICAgICAgPlxuICAgICAgICA8VGV4dCBhcz1cInNwYW5cIiBmb250U2l6ZT17MjJ9IGZvbnRXZWlnaHQ9ezcwMH0+XG4gICAgICAgICAge2Ake2Rpc3BsYXlWYWx1ZX0lYH1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9SYWRpYWxQcm9ncmVzcz5cbiAgICApfVxuICA8L0ZsZXhCb3g+XG4pO1xuXG5jb25zdCByZW5kZXJTa2lsbHMgPSAoc2tpbGxzOiBMZWFybmluZ091dGNvbWVTa2lsbFtdKSA9PlxuICBza2lsbHMubWFwKChza2lsbCkgPT4gKFxuICAgIDxTa2lsbFRhZyBhcz1cImxpXCIga2V5PXtza2lsbC50aXRsZX0+XG4gICAgICB7c2tpbGwudGl0bGV9XG4gICAgPC9Ta2lsbFRhZz5cbiAgKSk7XG5cbmNvbnN0IGZvbnRWYXJpYW50ID0gKFxuICBpc0VtcGhhc2l6ZWQ6IGJvb2xlYW4sXG4gIGxldmVsPzogTGVhcm5pbmdPdXRjb21lTGV2ZWxzIHwgbnVsbFxuKSA9PiB7XG4gIGlmIChpc0VtcGhhc2l6ZWQpIHtcbiAgICByZXR1cm4gJ3RpdGxlLXNtJztcbiAgfVxuXG4gIHN3aXRjaCAobGV2ZWwpIHtcbiAgICBjYXNlIExlYXJuaW5nT3V0Y29tZUxldmVscy5PbmU6XG4gICAgICByZXR1cm4gJ3AtYmFzZSc7XG4gICAgY2FzZSBMZWFybmluZ091dGNvbWVMZXZlbHMuVHdvOlxuICAgICAgcmV0dXJuICd0aXRsZS14cyc7XG4gICAgY2FzZSBMZWFybmluZ091dGNvbWVMZXZlbHMuVGhyZWU6XG4gICAgICByZXR1cm4gJ3RpdGxlLXNtJztcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuICdwLWJhc2UnO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgTGVhcm5pbmdPdXRjb21lQ2FyZDogUmVhY3QuRkM8TGVhcm5pbmdPdXRjb21lQ2FyZFByb3BzPiA9ICh7XG4gIGxldmVsLFxuICBvdXRjb21lLFxuICBhcyxcbiAgaGVhZGluZ0xldmVsLFxuICBpc0ludGVyYWN0aXZlID0gZmFsc2UsXG4gIG1vZGUgPSAnYmFzZScsXG4gIHByb2dyZXNzID0gMCxcbiAgc2tpbGxzLFxuICBwcm9ncmVzc1VwZGF0ZURhdGEsXG59KSA9PiB7XG4gIGNvbnN0IFtzdGFydFJhZGlhbEFuaW1hdGlvbiwgc2V0U3RhcnRSYWRpYWxBbmltYXRpb25dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbc2hvd0NvbXBsZXRpb25JY29uLCBzZXRTaG93Q29tcGxldGlvbkljb25dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IHsgcHJldmlvdXNQcm9ncmVzcywgcHJvZ3Jlc3NEdXJhdGlvbiwgY29tcGxldGlvbkRlbGF5IH0gPVxuICAgIHByb2dyZXNzVXBkYXRlRGF0YSB8fCB7fTtcbiAgY29uc3QgcHJvZ3Jlc3NTdGF0dXMgPSBwcm9ncmVzc1N0YXRlKHByb2dyZXNzKTtcbiAgY29uc3QgZGlzcGxheVByb2dyZXNzID0gcHJvZ3Jlc3NTdGF0dXMgIT09IFByb2dyZXNzLm5vdFN0YXJ0ZWQ7XG5cbiAgLy8gd2hlbiBwcmV2aW91c1Byb2dyZXNzIGlzIHByb3ZpZGVkLCBlaXRoZXIgc3RhcnQgdGhlIHByb2dyZXNzIGFuaW1hdGlvbiBvciBvbmx5IGRpc3BsYXkgcHJldmlvdXMgcHJvZ3Jlc3Mgd2hpbGUgd2Ugd2FpdC4gSWYgbm90IHByb3ZpZGVkIHRoZW4gb25seSBkaXNwbGF5IGN1cnJlbnQgcHJvZ3Jlc3NcbiAgY29uc3QgcmFkaWFsVmFsdWUgPVxuICAgIHByZXZpb3VzUHJvZ3Jlc3MgIT09IHVuZGVmaW5lZCAmJiBwcm9ncmVzcyAhPT0gdW5kZWZpbmVkXG4gICAgICA/IHN0YXJ0UmFkaWFsQW5pbWF0aW9uXG4gICAgICAgID8gW3ByZXZpb3VzUHJvZ3Jlc3MsIHByb2dyZXNzXVxuICAgICAgICA6IHByZXZpb3VzUHJvZ3Jlc3NcbiAgICAgIDogcHJvZ3Jlc3M7XG5cbiAgLy8gd2hlbiBwcmV2aW91c1Byb2dyZXNzIGlzIHByb3ZpZGVkIGJ1dCB3ZSBoYXZlbid0IHN0YXJ0ZWQgdGhlIGFuaW1hdGlvbiB5ZXQgdGhlbiBzaG93IHByZXZpb3VzIHByb2dyZXNzLCBvdGhlcndpc2UsIGlmIGFuaW1hdGlvbiBoYXMgc3RhcnRlZCwgdGhlbiBzaG93IGN1cnJlbnQgcHJvZ3Jlc3NcbiAgY29uc3QgZGlzcGxheVZhbHVlID1cbiAgICBwcmV2aW91c1Byb2dyZXNzICE9PSB1bmRlZmluZWQgJiYgIXN0YXJ0UmFkaWFsQW5pbWF0aW9uXG4gICAgICA/IHByZXZpb3VzUHJvZ3Jlc3NcbiAgICAgIDogcHJvZ3Jlc3M7XG5cbiAgY29uc3QgaXNFbXBoYXNpemVkID0gbW9kZSA9PT0gJ2VtcGhhc2l6ZWQnO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKHByb2dyZXNzICYmIHByb2dyZXNzRHVyYXRpb24pIHtcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBzZXRTdGFydFJhZGlhbEFuaW1hdGlvbih0cnVlKTtcbiAgICAgIH0sIHByb2dyZXNzRHVyYXRpb24pO1xuICAgIH1cblxuICAgIGlmIChwcm9ncmVzcyA9PT0gMTAwKSB7XG4gICAgICAvLyBjb21wbGV0aW9uRGVsYXkgaXMgZm9yIGFuaW1hdGluZyB0aGUgcHJvZ3Jlc3M7IHRoZSBzZXRUaW1lb3V0IHdpbGwgZGVsYXkgc2hvd2luZyB0aGUgY2hlY2ttYXJrIGljb24gc28gcmFkaWFsIHByb2dyZXNzIHdpbGwgYXBwZWFyIGZpcnN0LlxuICAgICAgaWYgKGNvbXBsZXRpb25EZWxheSkge1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICBzZXRTaG93Q29tcGxldGlvbkljb24odHJ1ZSk7XG4gICAgICAgIH0sIGNvbXBsZXRpb25EZWxheSk7XG4gICAgICAgIC8vIElmIGNvbXBsZXRpb25EZWxheSBpcyBub3QgcHJvdmlkZWQsIHRoZSBjb21wbGV0aW9uIGljb24gd2lsbCBzaG93IGltbWVkaWF0ZWx5IGFuZCByYWRpYWwgcHJvZ3Jlc3Mgd2lsbCBub3Qgc2hvdy5cbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHNldFNob3dDb21wbGV0aW9uSWNvbih0cnVlKTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtwcm9ncmVzc0R1cmF0aW9uLCBwcm9ncmVzcywgY29tcGxldGlvbkRlbGF5XSk7XG5cbiAgY29uc3Qgc29ydGVkU2tpbGxzID0gdXNlTWVtbygoKSA9PiB7XG4gICAgaWYgKCFza2lsbHMgfHwgc2tpbGxzLmxlbmd0aCA9PT0gMCkge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9XG5cbiAgICByZXR1cm4gc2tpbGxzLnNsaWNlKCkuc29ydCgoYSwgYikgPT4ge1xuICAgICAgY29uc3QgdGl0bGVBID0gYS50aXRsZSA/PyAnJztcbiAgICAgIGNvbnN0IHRpdGxlQiA9IGIudGl0bGUgPz8gJyc7XG5cbiAgICAgIHJldHVybiB0aXRsZUEubG9jYWxlQ29tcGFyZSh0aXRsZUIpO1xuICAgIH0pO1xuICB9LCBbc2tpbGxzXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ2FyZFxuICAgICAgYXM9e2FzfVxuICAgICAgYXJpYS1sYWJlbD17YCR7bGVhcm5pbmdPdXRjb21lTGFiZWxzW2xldmVsID8/IDFdfSAtICR7b3V0Y29tZX1gfVxuICAgICAgaXNJbnRlcmFjdGl2ZT17aXNJbnRlcmFjdGl2ZX1cbiAgICAgIHByb2dyZXNzPXtwcm9ncmVzc1N0YXR1c31cbiAgICAgIG1vZGU9e21vZGV9XG4gICAgPlxuICAgICAgPEZsZXhCb3ggZmxleERpcmVjdGlvbj1cImNvbHVtblwiIGdhcD17MjR9PlxuICAgICAgICB7bGV2ZWwgJiYgKFxuICAgICAgICAgIDxMZWFybmluZ091dGNvbWVMZXZlbEJhZGdlXG4gICAgICAgICAgICBsZXZlbD17bGV2ZWx9XG4gICAgICAgICAgICBzaXplPXtpc0VtcGhhc2l6ZWQgPyAnYmFzZScgOiAnc20nfVxuICAgICAgICAgICAgdGV4dENvbG9yPXtcbiAgICAgICAgICAgICAgbGV2ZWwgIT09IExlYXJuaW5nT3V0Y29tZUxldmVscy5PbmUgPyAnbmF2eS04MDAnIDogJ3RleHQnXG4gICAgICAgICAgICB9XG4gICAgICAgICAgICByZW1vdmVCYWNrZ3JvdW5kXG4gICAgICAgICAgLz5cbiAgICAgICAgKX1cbiAgICAgICAgPFRleHRcbiAgICAgICAgICB2YXJpYW50PXtmb250VmFyaWFudChpc0VtcGhhc2l6ZWQsIGxldmVsKX1cbiAgICAgICAgICBmb250V2VpZ2h0PXtpc0VtcGhhc2l6ZWQgPyA3MDAgOiA0MDB9XG4gICAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgICBhcz17aGVhZGluZ0xldmVsfVxuICAgICAgICA+XG4gICAgICAgICAge291dGNvbWV9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICAgeyEhc29ydGVkU2tpbGxzICYmIChcbiAgICAgICAgICA8RmxleEJveCBhcz1cInVsXCIgcGw9ezB9IG09ezB9IGFsaWduSXRlbXM9XCJmbGV4LXN0YXJ0XCIgZ2FwPXs4fSB3cmFwPlxuICAgICAgICAgICAge3JlbmRlclNraWxscyhzb3J0ZWRTa2lsbHMpfVxuICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgKX1cbiAgICAgIDwvRmxleEJveD5cblxuICAgICAge2Rpc3BsYXlQcm9ncmVzcyAmJlxuICAgICAgICByZW5kZXJQcm9ncmVzcyh7XG4gICAgICAgICAgZGlzcGxheVZhbHVlLFxuICAgICAgICAgIHByb2dyZXNzRHVyYXRpb24sXG4gICAgICAgICAgcmFkaWFsVmFsdWUsXG4gICAgICAgICAgc3RhcnRSYWRpYWxBbmltYXRpb24sXG4gICAgICAgICAgc2hvd0NvbXBsZXRpb25JY29uLFxuICAgICAgICB9KX1cbiAgICA8L1N0eWxlZENhcmQ+XG4gICk7XG59O1xuIl19 */");
+const renderProgress = ({
+  displayValue,
+  progressDuration,
+  radialValue,
+  startRadialAnimation,
+  showCompletionIcon
+}) => /*#__PURE__*/_jsx(FlexBox, {
+  flexDirection: "column",
+  flex: "1 0 0",
+  alignSelf: "stretch",
+  flexWrap: "wrap",
+  alignContent: "end",
+  children: showCompletionIcon ? /*#__PURE__*/_jsx(FlexBox, {
+    bg: COMPLETED_COLOR,
+    width: 80,
+    height: 80,
+    center: true,
+    borderRadius: "full",
+    children: /*#__PURE__*/_jsx(CheckIcon, {
+      size: 44,
+      color: "text"
+    })
+  }) : /*#__PURE__*/_jsx(RadialProgress, {
+    color: theme.colors[COMPLETED_COLOR],
+    duration: progressDuration || undefined,
+    size: 80,
+    strokeLinecap: "round",
+    strokeWidth: 8,
+    value: radialValue ?? 0,
+    children: /*#__PURE__*/_jsx(Text, {
+      as: "span",
+      fontSize: 22,
+      fontWeight: 700,
+      children: `${displayValue}%`
+    })
+  }, `radial-progress-${startRadialAnimation ? 1 : 0}`)
+});
+const renderSkills = skills => skills.map(skill => /*#__PURE__*/_jsx(SkillTag, {
+  as: "li",
+  children: skill.title
+}, skill.title));
+const fontVariant = (isEmphasized, level) => {
+  if (isEmphasized) {
+    return 'title-sm';
+  }
+  switch (level) {
+    case LearningOutcomeLevels.One:
+      return 'p-base';
+    case LearningOutcomeLevels.Two:
+      return 'title-xs';
+    case LearningOutcomeLevels.Three:
+      return 'title-sm';
+    default:
+      return 'p-base';
+  }
+};
+export const LearningOutcomeCard = ({
+  level,
+  outcome,
+  as,
+  headingLevel,
+  isInteractive = false,
+  mode = 'base',
+  progress = 0,
+  skills,
+  progressUpdateData
+}) => {
+  const [startRadialAnimation, setStartRadialAnimation] = useState(false);
+  const [showCompletionIcon, setShowCompletionIcon] = useState(false);
+  const {
+    previousProgress,
+    progressDuration,
+    completionDelay
+  } = progressUpdateData || {};
+  const progressStatus = progressState(progress);
+  const displayProgress = progressStatus !== Progress.notStarted;
+
+  // when previousProgress is provided, either start the progress animation or only display previous progress while we wait. If not provided then only display current progress
+  const radialValue = previousProgress !== undefined && progress !== undefined ? startRadialAnimation ? [previousProgress, progress] : previousProgress : progress;
+
+  // when previousProgress is provided but we haven't started the animation yet then show previous progress, otherwise, if animation has started, then show current progress
+  const displayValue = previousProgress !== undefined && !startRadialAnimation ? previousProgress : progress;
+  const isEmphasized = mode === 'emphasized';
+  useEffect(() => {
+    if (progress && progressDuration) {
+      setTimeout(() => {
+        setStartRadialAnimation(true);
+      }, progressDuration);
+    }
+    if (progress === 100) {
+      // completionDelay is for animating the progress; the setTimeout will delay showing the checkmark icon so radial progress will appear first.
+      if (completionDelay) {
+        setTimeout(() => {
+          setShowCompletionIcon(true);
+        }, completionDelay);
+        // If completionDelay is not provided, the completion icon will show immediately and radial progress will not show.
+      } else {
+        setShowCompletionIcon(true);
+      }
+    }
+  }, [progressDuration, progress, completionDelay]);
+  const sortedSkills = useMemo(() => {
+    if (!skills || skills.length === 0) {
+      return undefined;
+    }
+    return skills.slice().sort((a, b) => {
+      const titleA = a.title ?? '';
+      const titleB = b.title ?? '';
+      return titleA.localeCompare(titleB);
+    });
+  }, [skills]);
+  return /*#__PURE__*/_jsxs(StyledCard, {
+    as: as,
+    "aria-label": `${learningOutcomeLabels[level ?? 1]} - ${outcome}`,
+    isInteractive: isInteractive,
+    progress: progressStatus,
+    mode: mode,
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      flexDirection: "column",
+      gap: 24,
+      children: [level && /*#__PURE__*/_jsx(LearningOutcomeLevelBadge, {
+        level: level,
+        size: isEmphasized ? 'base' : 'sm',
+        textColor: level !== LearningOutcomeLevels.One ? 'navy-800' : 'text',
+        removeBackground: true
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: fontVariant(isEmphasized, level),
+        fontWeight: isEmphasized ? 700 : 400,
+        width: "100%",
+        as: headingLevel,
+        children: outcome
+      }), !!sortedSkills && /*#__PURE__*/_jsx(FlexBox, {
+        as: "ul",
+        pl: 0,
+        m: 0,
+        alignItems: "flex-start",
+        gap: 8,
+        wrap: true,
+        children: renderSkills(sortedSkills)
+      })]
+    }), displayProgress && renderProgress({
+      displayValue,
+      progressDuration,
+      radialValue,
+      startRadialAnimation,
+      showCompletionIcon
+    })]
+  });
+};

package/dist/LearningOutcomeFlyout/LearningOutcomeCardList.d.ts

@@ -0,0 +1,7 @@
+import { ParentLearningOutcome } from './types';
+interface LearningOutcomeCardListProps {
+    learningOutcomes: ParentLearningOutcome[];
+    onClick?: (misc: Record<string, string>) => void;
+}
+export declare const LearningOutcomeCardList: React.FC<LearningOutcomeCardListProps>;
+export {};

package/dist/LearningOutcomeFlyout/LearningOutcomeCardList.js

@@ -0,0 +1,42 @@
+import { Anchor, Box, FlexBox } from '@codecademy/gamut';
+import { LearningOutcomeCard } from '../LearningOutcomeCard';
+import { getLearningOutcomePath, miscTrackingData } from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LearningOutcomeCardList = ({
+  learningOutcomes,
+  onClick
+}) => {
+  return /*#__PURE__*/_jsx(FlexBox, {
+    as: "ul",
+    m: 0,
+    p: 0,
+    gap: 12,
+    column: true,
+    children: learningOutcomes.map(({
+      id,
+      level,
+      outcome
+    }) => {
+      const trackingData = miscTrackingData(level, id, undefined, outcome);
+      return /*#__PURE__*/_jsx(Box, {
+        as: "li",
+        listStyle: "none",
+        m: 0,
+        p: 0,
+        width: "100%",
+        children: /*#__PURE__*/_jsx(Anchor, {
+          href: getLearningOutcomePath(id),
+          onClick: () => onClick?.(trackingData),
+          target: "_blank",
+          variant: "interface",
+          width: "100%",
+          children: /*#__PURE__*/_jsx(LearningOutcomeCard, {
+            level: level,
+            outcome: outcome,
+            isInteractive: true
+          })
+        })
+      }, id);
+    })
+  });
+};

package/dist/LearningOutcomeFlyout/index.d.ts

@@ -0,0 +1,8 @@
+import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
+import { LearningOutcomeFlyoutProps, LearningOutcomeSkill } from './types';
+export declare const sortSkillsByClassification: (skills?: LearningOutcomeSkill[] | null) => LearningOutcomeSkill[];
+export declare const getLearningOutcomePath: (id?: string) => string;
+export declare const miscTrackingData: (level?: LearningOutcomeLevels | null, id?: string, latestScore?: number | null, outcome?: string) => {
+    misc: string;
+};
+export declare const LearningOutcomeFlyout: React.FC<LearningOutcomeFlyoutProps>;