@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/LearningOutcomeTile/index.js

@@ -1,115 +1,94 @@
-import _styled from "@emotion/styled/base";
-import { Anchor, Text } from '@codecademy/gamut';
-import { SmallCheckIcon } from '@codecademy/gamut-icons';
-import { variant } from '@codecademy/gamut-styles';
-import { useEffect, useRef, useState } from 'react';
-import { learningOutcomeLabels, LearningOutcomeLowAssessmentDot } from '../LearningOutcomeBadges';
-import { LearningOutcomePopover } from '../LearningOutcomePopover';
-import { Tile } from './Tile';
-import { Progress } from './types';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ProgressText = /*#__PURE__*/_styled(Text, {
-  target: "ei97hfv0",
-  label: "ProgressText"
-})(props => ({
-  ...variant({
-    prop: 'progress',
-    base: {
-      fontSize: 14
-    },
-    variants: {
-      [Progress.notStarted]: {
-        color: 'text-secondary',
-        fontWeight: 400
-      },
-      [Progress.inProgress]: {
-        color: 'primary',
-        fontWeight: props.isSmall ? 400 : 700
-      },
-      [Progress.completed]: {}
-    }
-  })(props)
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVUaWxlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQnFCIiwiZmlsZSI6Ii4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVUaWxlL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IFNtYWxsQ2hlY2tJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIGxlYXJuaW5nT3V0Y29tZUxhYmVscyxcbiAgTGVhcm5pbmdPdXRjb21lTG93QXNzZXNzbWVudERvdCxcbn0gZnJvbSAnLi4vTGVhcm5pbmdPdXRjb21lQmFkZ2VzJztcbmltcG9ydCB7IExlYXJuaW5nT3V0Y29tZVBvcG92ZXIgfSBmcm9tICcuLi9MZWFybmluZ091dGNvbWVQb3BvdmVyJztcbmltcG9ydCB7IFRpbGUgfSBmcm9tICcuL1RpbGUnO1xuaW1wb3J0IHtcbiAgTGVhcm5pbmdPdXRjb21lUG9wb3ZlckRldGFpbHNQcm9wcyxcbiAgTGVhcm5pbmdPdXRjb21lVGlsZVByb3BzLFxuICBQcm9ncmVzcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IFByb2dyZXNzVGV4dCA9IHN0eWxlZChUZXh0KTx7IHByb2dyZXNzOiBQcm9ncmVzczsgaXNTbWFsbDogYm9vbGVhbiB9PihcbiAgKHByb3BzKSA9PiAoe1xuICAgIC4uLnZhcmlhbnQoe1xuICAgICAgcHJvcDogJ3Byb2dyZXNzJyxcbiAgICAgIGJhc2U6IHtcbiAgICAgICAgZm9udFNpemU6IDE0LFxuICAgICAgfSxcbiAgICAgIHZhcmlhbnRzOiB7XG4gICAgICAgIFtQcm9ncmVzcy5ub3RTdGFydGVkXToge1xuICAgICAgICAgIGNvbG9yOiAndGV4dC1zZWNvbmRhcnknLFxuICAgICAgICAgIGZvbnRXZWlnaHQ6IDQwMCxcbiAgICAgICAgfSxcbiAgICAgICAgW1Byb2dyZXNzLmluUHJvZ3Jlc3NdOiB7XG4gICAgICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgICAgICBmb250V2VpZ2h0OiBwcm9wcy5pc1NtYWxsID8gNDAwIDogNzAwLFxuICAgICAgICB9LFxuICAgICAgICBbUHJvZ3Jlc3MuY29tcGxldGVkXToge30sXG4gICAgICB9LFxuICAgIH0pKHByb3BzKSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBwcm9ncmVzc1N0YXRlID0gKHBlcmNlbnRDb21wbGV0ZTogbnVtYmVyKTogUHJvZ3Jlc3MgPT4ge1xuICBpZiAocGVyY2VudENvbXBsZXRlID09PSAwKSB7XG4gICAgcmV0dXJuIFByb2dyZXNzLm5vdFN0YXJ0ZWQ7XG4gIH1cbiAgaWYgKHBlcmNlbnRDb21wbGV0ZSA+IDAgJiYgcGVyY2VudENvbXBsZXRlIDwgMTAwKSB7XG4gICAgcmV0dXJuIFByb2dyZXNzLmluUHJvZ3Jlc3M7XG4gIH1cbiAgcmV0dXJuIFByb2dyZXNzLmNvbXBsZXRlZDtcbn07XG5cbmV4cG9ydCBjb25zdCBMZWFybmluZ091dGNvbWVUaWxlOiBSZWFjdC5GQzxMZWFybmluZ091dGNvbWVUaWxlUHJvcHM+ID0gKHtcbiAgbGVhcm5pbmdPdXRjb21lRGV0YWlscyxcbiAgb25DbGljayxcbiAgaG92ZXIgPSBmYWxzZSxcbiAgcG9wb3ZlciA9IGZhbHNlLFxuICBzaXplID0gJ25vcm1hbCcsXG59KSA9PiB7XG4gIGNvbnN0IHsgaWQsIGxldmVsLCBvdXRjb21lLCBsYXRlc3RTY29yZSwgcGVyY2VudENvbXBsZXRlIH0gPVxuICAgIGxlYXJuaW5nT3V0Y29tZURldGFpbHM7XG5cbiAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgYWN0aXZlRWxSZWYgPSB1c2VSZWY8SFRNTEFuY2hvckVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgLy8gSWYgdGhlIHBvcG92ZXIgaXMgb3Blbiwgd2Ugd2FudCB0byBmb2N1cyB0aGUgYWN0aXZlIGVsZW1lbnRcbiAgICAgIGFjdGl2ZUVsUmVmLmN1cnJlbnQ/LmZvY3VzKCk7XG4gICAgfVxuICB9LCBbaXNPcGVuXSk7XG5cbiAgY29uc3QgcG9wb3ZlclByb3BzID1cbiAgICBwb3BvdmVyICYmIGhvdmVyXG4gICAgICA/IHtcbiAgICAgICAgICByZWY6IGFjdGl2ZUVsUmVmLFxuICAgICAgICAgIG9uTW91c2VFbnRlcjogKCkgPT4gc2V0SXNPcGVuKHRydWUpLFxuICAgICAgICAgIG9uTW91c2VMZWF2ZTogKCkgPT4gc2V0SXNPcGVuKGZhbHNlKSxcbiAgICAgICAgICBvbkZvY3VzOiAoKSA9PiBzZXRJc09wZW4odHJ1ZSksIC8vIEZvciBrZXlib2FyZCB1c2Vyc1xuICAgICAgICAgIG9uQmx1cjogKCkgPT4gc2V0SXNPcGVuKGZhbHNlKSwgLy8gQ2xvc2Ugb24gYmx1clxuICAgICAgICAgICdhcmlhLWRlc2NyaWJlZGJ5JzogYCR7aWR9LXBvcG92ZXJgLFxuICAgICAgICB9XG4gICAgICA6IHt9O1xuXG4gIGNvbnN0IGhpZ2hlc3RTY29yZSA9IHBvcG92ZXJcbiAgICA/IChsZWFybmluZ091dGNvbWVEZXRhaWxzIGFzIExlYXJuaW5nT3V0Y29tZVBvcG92ZXJEZXRhaWxzUHJvcHMpXG4gICAgICAgID8uaGlnaGVzdFNjb3JlXG4gICAgOiB1bmRlZmluZWQ7XG5cbiAgY29uc3QgcGVyY2VudENvbXBsZXRlVmFsdWUgPSBwZXJjZW50Q29tcGxldGUgPz8gMDtcbiAgY29uc3QgcHJvZ3Jlc3MgPSBwcm9ncmVzc1N0YXRlKHBlcmNlbnRDb21wbGV0ZVZhbHVlKTtcblxuICBjb25zdCBpc0NvbXBsZXRlZCA9IHByb2dyZXNzID09PSBQcm9ncmVzcy5jb21wbGV0ZWQ7XG4gIGNvbnN0IGlzU21hbGwgPSBzaXplID09PSAnc21hbGwnO1xuICBjb25zdCBoYXNMb3dMYXRlc3RBc3Nlc3NtZW50ID0gQm9vbGVhbihcbiAgICBsYXRlc3RTY29yZSAhPSBudWxsICYmIGxhdGVzdFNjb3JlIDwgNzBcbiAgKTtcbiAgY29uc3Qgc2hvd0xvd0Fzc2Vzc21lbnREb3QgPSBoYXNMb3dMYXRlc3RBc3Nlc3NtZW50ICYmICFpc1NtYWxsO1xuXG4gIGNvbnN0IGxvd0Fzc2Vzc21lbnRMYWJlbCA9IGhhc0xvd0xhdGVzdEFzc2Vzc21lbnRcbiAgICA/ICdNb3N0IHJlY2VudCBhc3Nlc3NtZW50IHNjb3JlIGlzIGJlbG93IDcwJSwgbmVlZHMgcmV2aWV3LiAnXG4gICAgOiAnJztcbiAgY29uc3QgZGVmYXVsdEFyaWFMYWJlbCA9IGAke2xlYXJuaW5nT3V0Y29tZUxhYmVsc1tsZXZlbF19OiAke291dGNvbWV9ICR7bG93QXNzZXNzbWVudExhYmVsfVByb2dyZXNzICR7cGVyY2VudENvbXBsZXRlVmFsdWV9JSBjb21wbGV0ZWQuYDtcbiAgY29uc3QgZXZhbHVhdGlvblZhbHVlc0xhYmVsID1cbiAgICBpc09wZW4gJiYgKGhpZ2hlc3RTY29yZSB8fCBsYXRlc3RTY29yZSlcbiAgICAgID8gYEV2YWx1YXRpb24gVmFsdWVzIC0gJHtcbiAgICAgICAgICBoaWdoZXN0U2NvcmUgPyBgSGlnaGVzdCBhc3Nlc3NtZW50IHNjb3JlICR7aGlnaGVzdFNjb3JlfS4gYCA6ICcnXG4gICAgICAgIH0ke2xhdGVzdFNjb3JlID8gYFJlY2VudCBhc3Nlc3NtZW50IHNjb3JlICR7bGF0ZXN0U2NvcmV9LmAgOiAnJ31gXG4gICAgICA6ICcnO1xuXG4gIHJldHVybiAoXG4gICAgPEFuY2hvclxuICAgICAgYXJpYS1sYWJlbD17YCR7ZGVmYXVsdEFyaWFMYWJlbH0gJHtldmFsdWF0aW9uVmFsdWVzTGFiZWx9YH1cbiAgICAgIHZhcmlhbnQ9XCJpbnRlcmZhY2VcIlxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIGRhdGEtdGVzdGlkPXtgbGVhcm5pbmctb3V0Y29tZS10aWxlLSR7aWR9YH1cbiAgICAgIHsuLi5wb3BvdmVyUHJvcHN9XG4gICAgPlxuICAgICAgPFRpbGUgaG92ZXI9e2hvdmVyfSBwcm9ncmVzcz17cHJvZ3Jlc3N9IHNpemU9e3NpemV9PlxuICAgICAgICB7aXNDb21wbGV0ZWQgPyAoXG4gICAgICAgICAgPFNtYWxsQ2hlY2tJY29uXG4gICAgICAgICAgICBzaXplPXtpc1NtYWxsID8gMTIgOiAxNn1cbiAgICAgICAgICAgIHRleHRDb2xvcj1cImJhY2tncm91bmQtY29udHJhc3RcIlxuICAgICAgICAgIC8+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPFByb2dyZXNzVGV4dCBwcm9ncmVzcz17cHJvZ3Jlc3N9IGlzU21hbGw9e2lzU21hbGx9PlxuICAgICAgICAgICAge2Ake3BlcmNlbnRDb21wbGV0ZVZhbHVlfSVgfVxuICAgICAgICAgIDwvUHJvZ3Jlc3NUZXh0PlxuICAgICAgICApfVxuICAgICAgICB7c2hvd0xvd0Fzc2Vzc21lbnREb3QgJiYgKFxuICAgICAgICAgIDxMZWFybmluZ091dGNvbWVMb3dBc3Nlc3NtZW50RG90XG4gICAgICAgICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgICAgICAgIHRvcD1cIi0yMCVcIlxuICAgICAgICAgICAgcmlnaHQ9XCItMjAlXCJcbiAgICAgICAgICAgIGhhc0JvcmRlclxuICAgICAgICAgIC8+XG4gICAgICAgICl9XG4gICAgICA8L1RpbGU+XG4gICAgICB7aXNPcGVuICYmIChcbiAgICAgICAgPExlYXJuaW5nT3V0Y29tZVBvcG92ZXJcbiAgICAgICAgICBhY3RpdmVFbFJlZj17YWN0aXZlRWxSZWZ9XG4gICAgICAgICAgaG9yaXpvbnRhbE9mZnNldD17aXNTbWFsbCAmJiBpc0NvbXBsZXRlZCA/IDE1OSA6IGlzU21hbGwgPyAxNTMgOiAxNTB9XG4gICAgICAgICAgaWQ9e2Ake2lkfS1wb3BvdmVyYH1cbiAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICBsZWFybmluZ091dGNvbWVEZXRhaWxzPXtcbiAgICAgICAgICAgIGxlYXJuaW5nT3V0Y29tZURldGFpbHMgYXMgTGVhcm5pbmdPdXRjb21lUG9wb3ZlckRldGFpbHNQcm9wc1xuICAgICAgICAgIH1cbiAgICAgICAgLz5cbiAgICAgICl9XG4gICAgPC9BbmNob3I+XG4gICk7XG59O1xuIl19 */");
-export const progressState = percentComplete => {
-  if (percentComplete === 0) {
-    return Progress.notStarted;
-  }
-  if (percentComplete > 0 && percentComplete < 100) {
-    return Progress.inProgress;
-  }
-  return Progress.completed;
+import { learningOutcomeLabels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
+import { LearningOutcomeLowAssessmentDot } from "../LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.js";
+import "../LearningOutcomeBadges/index.js";
+import { LearningOutcomePopover } from "../LearningOutcomePopover/index.js";
+import { Progress } from "./types.js";
+import { Tile } from "./Tile.js";
+import { Anchor, Text } from "@codecademy/gamut";
+import { variant } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import { useEffect, useRef, useState } from "react";
+import { SmallCheckIcon } from "@codecademy/gamut-icons";
+
+//#region src/LearningOutcomeTile/index.tsx
+const ProgressText = /* @__PURE__ */ styled(Text, {
+	target: "e3gkdbx0",
+	label: "brand-ProgressText"
+})((props) => ({ ...variant({
+	prop: "progress",
+	base: { fontSize: 14 },
+	variants: {
+		[Progress.notStarted]: {
+			color: "text-secondary",
+			fontWeight: 400
+		},
+		[Progress.inProgress]: {
+			color: "primary",
+			fontWeight: props.isSmall ? 400 : 700
+		},
+		[Progress.completed]: {}
+	}
+})(props) }), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xlYXJuaW5nT3V0Y29tZVRpbGUvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvTGVhcm5pbmdPdXRjb21lVGlsZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgU21hbGxDaGVja0ljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgbGVhcm5pbmdPdXRjb21lTGFiZWxzLFxuICBMZWFybmluZ091dGNvbWVMb3dBc3Nlc3NtZW50RG90LFxufSBmcm9tICcuLi9MZWFybmluZ091dGNvbWVCYWRnZXMnO1xuaW1wb3J0IHsgTGVhcm5pbmdPdXRjb21lUG9wb3ZlciB9IGZyb20gJy4uL0xlYXJuaW5nT3V0Y29tZVBvcG92ZXInO1xuaW1wb3J0IHsgVGlsZSB9IGZyb20gJy4vVGlsZSc7XG5pbXBvcnQge1xuICBMZWFybmluZ091dGNvbWVQb3BvdmVyRGV0YWlsc1Byb3BzLFxuICBMZWFybmluZ091dGNvbWVUaWxlUHJvcHMsXG4gIFByb2dyZXNzLFxufSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgUHJvZ3Jlc3NUZXh0ID0gc3R5bGVkKFRleHQpPHsgcHJvZ3Jlc3M6IFByb2dyZXNzOyBpc1NtYWxsOiBib29sZWFuIH0+KFxuICAocHJvcHMpID0+ICh7XG4gICAgLi4udmFyaWFudCh7XG4gICAgICBwcm9wOiAncHJvZ3Jlc3MnLFxuICAgICAgYmFzZToge1xuICAgICAgICBmb250U2l6ZTogMTQsXG4gICAgICB9LFxuICAgICAgdmFyaWFudHM6IHtcbiAgICAgICAgW1Byb2dyZXNzLm5vdFN0YXJ0ZWRdOiB7XG4gICAgICAgICAgY29sb3I6ICd0ZXh0LXNlY29uZGFyeScsXG4gICAgICAgICAgZm9udFdlaWdodDogNDAwLFxuICAgICAgICB9LFxuICAgICAgICBbUHJvZ3Jlc3MuaW5Qcm9ncmVzc106IHtcbiAgICAgICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgICAgIGZvbnRXZWlnaHQ6IHByb3BzLmlzU21hbGwgPyA0MDAgOiA3MDAsXG4gICAgICAgIH0sXG4gICAgICAgIFtQcm9ncmVzcy5jb21wbGV0ZWRdOiB7fSxcbiAgICAgIH0sXG4gICAgfSkocHJvcHMpLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IHByb2dyZXNzU3RhdGUgPSAocGVyY2VudENvbXBsZXRlOiBudW1iZXIpOiBQcm9ncmVzcyA9PiB7XG4gIGlmIChwZXJjZW50Q29tcGxldGUgPT09IDApIHtcbiAgICByZXR1cm4gUHJvZ3Jlc3Mubm90U3RhcnRlZDtcbiAgfVxuICBpZiAocGVyY2VudENvbXBsZXRlID4gMCAmJiBwZXJjZW50Q29tcGxldGUgPCAxMDApIHtcbiAgICByZXR1cm4gUHJvZ3Jlc3MuaW5Qcm9ncmVzcztcbiAgfVxuICByZXR1cm4gUHJvZ3Jlc3MuY29tcGxldGVkO1xufTtcblxuZXhwb3J0IGNvbnN0IExlYXJuaW5nT3V0Y29tZVRpbGU6IFJlYWN0LkZDPExlYXJuaW5nT3V0Y29tZVRpbGVQcm9wcz4gPSAoe1xuICBsZWFybmluZ091dGNvbWVEZXRhaWxzLFxuICBvbkNsaWNrLFxuICBob3ZlciA9IGZhbHNlLFxuICBwb3BvdmVyID0gZmFsc2UsXG4gIHNpemUgPSAnbm9ybWFsJyxcbn0pID0+IHtcbiAgY29uc3QgeyBpZCwgbGV2ZWwsIG91dGNvbWUsIGxhdGVzdFNjb3JlLCBwZXJjZW50Q29tcGxldGUgfSA9XG4gICAgbGVhcm5pbmdPdXRjb21lRGV0YWlscztcblxuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBhY3RpdmVFbFJlZiA9IHVzZVJlZjxIVE1MQW5jaG9yRWxlbWVudD4obnVsbCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNPcGVuKSB7XG4gICAgICAvLyBJZiB0aGUgcG9wb3ZlciBpcyBvcGVuLCB3ZSB3YW50IHRvIGZvY3VzIHRoZSBhY3RpdmUgZWxlbWVudFxuICAgICAgYWN0aXZlRWxSZWYuY3VycmVudD8uZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtpc09wZW5dKTtcblxuICBjb25zdCBwb3BvdmVyUHJvcHMgPVxuICAgIHBvcG92ZXIgJiYgaG92ZXJcbiAgICAgID8ge1xuICAgICAgICAgIHJlZjogYWN0aXZlRWxSZWYsXG4gICAgICAgICAgb25Nb3VzZUVudGVyOiAoKSA9PiBzZXRJc09wZW4odHJ1ZSksXG4gICAgICAgICAgb25Nb3VzZUxlYXZlOiAoKSA9PiBzZXRJc09wZW4oZmFsc2UpLFxuICAgICAgICAgIG9uRm9jdXM6ICgpID0+IHNldElzT3Blbih0cnVlKSwgLy8gRm9yIGtleWJvYXJkIHVzZXJzXG4gICAgICAgICAgb25CbHVyOiAoKSA9PiBzZXRJc09wZW4oZmFsc2UpLCAvLyBDbG9zZSBvbiBibHVyXG4gICAgICAgICAgJ2FyaWEtZGVzY3JpYmVkYnknOiBgJHtpZH0tcG9wb3ZlcmAsXG4gICAgICAgIH1cbiAgICAgIDoge307XG5cbiAgY29uc3QgaGlnaGVzdFNjb3JlID0gcG9wb3ZlclxuICAgID8gKGxlYXJuaW5nT3V0Y29tZURldGFpbHMgYXMgTGVhcm5pbmdPdXRjb21lUG9wb3ZlckRldGFpbHNQcm9wcylcbiAgICAgICAgPy5oaWdoZXN0U2NvcmVcbiAgICA6IHVuZGVmaW5lZDtcblxuICBjb25zdCBwZXJjZW50Q29tcGxldGVWYWx1ZSA9IHBlcmNlbnRDb21wbGV0ZSA/PyAwO1xuICBjb25zdCBwcm9ncmVzcyA9IHByb2dyZXNzU3RhdGUocGVyY2VudENvbXBsZXRlVmFsdWUpO1xuXG4gIGNvbnN0IGlzQ29tcGxldGVkID0gcHJvZ3Jlc3MgPT09IFByb2dyZXNzLmNvbXBsZXRlZDtcbiAgY29uc3QgaXNTbWFsbCA9IHNpemUgPT09ICdzbWFsbCc7XG4gIGNvbnN0IGhhc0xvd0xhdGVzdEFzc2Vzc21lbnQgPSBCb29sZWFuKFxuICAgIGxhdGVzdFNjb3JlICE9IG51bGwgJiYgbGF0ZXN0U2NvcmUgPCA3MFxuICApO1xuICBjb25zdCBzaG93TG93QXNzZXNzbWVudERvdCA9IGhhc0xvd0xhdGVzdEFzc2Vzc21lbnQgJiYgIWlzU21hbGw7XG5cbiAgY29uc3QgbG93QXNzZXNzbWVudExhYmVsID0gaGFzTG93TGF0ZXN0QXNzZXNzbWVudFxuICAgID8gJ01vc3QgcmVjZW50IGFzc2Vzc21lbnQgc2NvcmUgaXMgYmVsb3cgNzAlLCBuZWVkcyByZXZpZXcuICdcbiAgICA6ICcnO1xuICBjb25zdCBkZWZhdWx0QXJpYUxhYmVsID0gYCR7bGVhcm5pbmdPdXRjb21lTGFiZWxzW2xldmVsXX06ICR7b3V0Y29tZX0gJHtsb3dBc3Nlc3NtZW50TGFiZWx9UHJvZ3Jlc3MgJHtwZXJjZW50Q29tcGxldGVWYWx1ZX0lIGNvbXBsZXRlZC5gO1xuICBjb25zdCBldmFsdWF0aW9uVmFsdWVzTGFiZWwgPVxuICAgIGlzT3BlbiAmJiAoaGlnaGVzdFNjb3JlIHx8IGxhdGVzdFNjb3JlKVxuICAgICAgPyBgRXZhbHVhdGlvbiBWYWx1ZXMgLSAke1xuICAgICAgICAgIGhpZ2hlc3RTY29yZSA/IGBIaWdoZXN0IGFzc2Vzc21lbnQgc2NvcmUgJHtoaWdoZXN0U2NvcmV9LiBgIDogJydcbiAgICAgICAgfSR7bGF0ZXN0U2NvcmUgPyBgUmVjZW50IGFzc2Vzc21lbnQgc2NvcmUgJHtsYXRlc3RTY29yZX0uYCA6ICcnfWBcbiAgICAgIDogJyc7XG5cbiAgcmV0dXJuIChcbiAgICA8QW5jaG9yXG4gICAgICBhcmlhLWxhYmVsPXtgJHtkZWZhdWx0QXJpYUxhYmVsfSAke2V2YWx1YXRpb25WYWx1ZXNMYWJlbH1gfVxuICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgZGF0YS10ZXN0aWQ9e2BsZWFybmluZy1vdXRjb21lLXRpbGUtJHtpZH1gfVxuICAgICAgey4uLnBvcG92ZXJQcm9wc31cbiAgICA+XG4gICAgICA8VGlsZSBob3Zlcj17aG92ZXJ9IHByb2dyZXNzPXtwcm9ncmVzc30gc2l6ZT17c2l6ZX0+XG4gICAgICAgIHtpc0NvbXBsZXRlZCA/IChcbiAgICAgICAgICA8U21hbGxDaGVja0ljb25cbiAgICAgICAgICAgIHNpemU9e2lzU21hbGwgPyAxMiA6IDE2fVxuICAgICAgICAgICAgdGV4dENvbG9yPVwiYmFja2dyb3VuZC1jb250cmFzdFwiXG4gICAgICAgICAgLz5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICA8UHJvZ3Jlc3NUZXh0IHByb2dyZXNzPXtwcm9ncmVzc30gaXNTbWFsbD17aXNTbWFsbH0+XG4gICAgICAgICAgICB7YCR7cGVyY2VudENvbXBsZXRlVmFsdWV9JWB9XG4gICAgICAgICAgPC9Qcm9ncmVzc1RleHQ+XG4gICAgICAgICl9XG4gICAgICAgIHtzaG93TG93QXNzZXNzbWVudERvdCAmJiAoXG4gICAgICAgICAgPExlYXJuaW5nT3V0Y29tZUxvd0Fzc2Vzc21lbnREb3RcbiAgICAgICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICAgICAgdG9wPVwiLTIwJVwiXG4gICAgICAgICAgICByaWdodD1cIi0yMCVcIlxuICAgICAgICAgICAgaGFzQm9yZGVyXG4gICAgICAgICAgLz5cbiAgICAgICAgKX1cbiAgICAgIDwvVGlsZT5cbiAgICAgIHtpc09wZW4gJiYgKFxuICAgICAgICA8TGVhcm5pbmdPdXRjb21lUG9wb3ZlclxuICAgICAgICAgIGFjdGl2ZUVsUmVmPXthY3RpdmVFbFJlZn1cbiAgICAgICAgICBob3Jpem9udGFsT2Zmc2V0PXtpc1NtYWxsICYmIGlzQ29tcGxldGVkID8gMTU5IDogaXNTbWFsbCA/IDE1MyA6IDE1MH1cbiAgICAgICAgICBpZD17YCR7aWR9LXBvcG92ZXJgfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIGxlYXJuaW5nT3V0Y29tZURldGFpbHM9e1xuICAgICAgICAgICAgbGVhcm5pbmdPdXRjb21lRGV0YWlscyBhcyBMZWFybmluZ091dGNvbWVQb3BvdmVyRGV0YWlsc1Byb3BzXG4gICAgICAgICAgfVxuICAgICAgICAvPlxuICAgICAgKX1cbiAgICA8L0FuY2hvcj5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JxQiJ9 */");
+const progressState = (percentComplete) => {
+	if (percentComplete === 0) return Progress.notStarted;
+	if (percentComplete > 0 && percentComplete < 100) return Progress.inProgress;
+	return Progress.completed;
 };
-export const LearningOutcomeTile = ({
-  learningOutcomeDetails,
-  onClick,
-  hover = false,
-  popover = false,
-  size = 'normal'
-}) => {
-  const {
-    id,
-    level,
-    outcome,
-    latestScore,
-    percentComplete
-  } = learningOutcomeDetails;
-  const [isOpen, setIsOpen] = useState(false);
-  const activeElRef = useRef(null);
-  useEffect(() => {
-    if (isOpen) {
-      // If the popover is open, we want to focus the active element
-      activeElRef.current?.focus();
-    }
-  }, [isOpen]);
-  const popoverProps = popover && hover ? {
-    ref: activeElRef,
-    onMouseEnter: () => setIsOpen(true),
-    onMouseLeave: () => setIsOpen(false),
-    onFocus: () => setIsOpen(true),
-    // For keyboard users
-    onBlur: () => setIsOpen(false),
-    // Close on blur
-    'aria-describedby': `${id}-popover`
-  } : {};
-  const highestScore = popover ? learningOutcomeDetails?.highestScore : undefined;
-  const percentCompleteValue = percentComplete ?? 0;
-  const progress = progressState(percentCompleteValue);
-  const isCompleted = progress === Progress.completed;
-  const isSmall = size === 'small';
-  const hasLowLatestAssessment = Boolean(latestScore != null && latestScore < 70);
-  const showLowAssessmentDot = hasLowLatestAssessment && !isSmall;
-  const lowAssessmentLabel = hasLowLatestAssessment ? 'Most recent assessment score is below 70%, needs review. ' : '';
-  const defaultAriaLabel = `${learningOutcomeLabels[level]}: ${outcome} ${lowAssessmentLabel}Progress ${percentCompleteValue}% completed.`;
-  const evaluationValuesLabel = isOpen && (highestScore || latestScore) ? `Evaluation Values - ${highestScore ? `Highest assessment score ${highestScore}. ` : ''}${latestScore ? `Recent assessment score ${latestScore}.` : ''}` : '';
-  return /*#__PURE__*/_jsxs(Anchor, {
-    "aria-label": `${defaultAriaLabel} ${evaluationValuesLabel}`,
-    variant: "interface",
-    onClick: onClick,
-    "data-testid": `learning-outcome-tile-${id}`,
-    ...popoverProps,
-    children: [/*#__PURE__*/_jsxs(Tile, {
-      hover: hover,
-      progress: progress,
-      size: size,
-      children: [isCompleted ? /*#__PURE__*/_jsx(SmallCheckIcon, {
-        size: isSmall ? 12 : 16,
-        textColor: "background-contrast"
-      }) : /*#__PURE__*/_jsx(ProgressText, {
-        progress: progress,
-        isSmall: isSmall,
-        children: `${percentCompleteValue}%`
-      }), showLowAssessmentDot && /*#__PURE__*/_jsx(LearningOutcomeLowAssessmentDot, {
-        position: "absolute",
-        top: "-20%",
-        right: "-20%",
-        hasBorder: true
-      })]
-    }), isOpen && /*#__PURE__*/_jsx(LearningOutcomePopover, {
-      activeElRef: activeElRef,
-      horizontalOffset: isSmall && isCompleted ? 159 : isSmall ? 153 : 150,
-      id: `${id}-popover`,
-      isOpen: isOpen,
-      learningOutcomeDetails: learningOutcomeDetails
-    })]
-  });
-};
+const LearningOutcomeTile = ({ learningOutcomeDetails, onClick, hover = false, popover = false, size = "normal" }) => {
+	const { id, level, outcome, latestScore, percentComplete } = learningOutcomeDetails;
+	const [isOpen, setIsOpen] = useState(false);
+	const activeElRef = useRef(null);
+	useEffect(() => {
+		if (isOpen) activeElRef.current?.focus();
+	}, [isOpen]);
+	const popoverProps = popover && hover ? {
+		ref: activeElRef,
+		onMouseEnter: () => setIsOpen(true),
+		onMouseLeave: () => setIsOpen(false),
+		onFocus: () => setIsOpen(true),
+		onBlur: () => setIsOpen(false),
+		"aria-describedby": `${id}-popover`
+	} : {};
+	const highestScore = popover ? learningOutcomeDetails?.highestScore : void 0;
+	const percentCompleteValue = percentComplete ?? 0;
+	const progress = progressState(percentCompleteValue);
+	const isCompleted = progress === Progress.completed;
+	const isSmall = size === "small";
+	const hasLowLatestAssessment = Boolean(latestScore != null && latestScore < 70);
+	const showLowAssessmentDot = hasLowLatestAssessment && !isSmall;
+	const lowAssessmentLabel = hasLowLatestAssessment ? "Most recent assessment score is below 70%, needs review. " : "";
+	const defaultAriaLabel = `${learningOutcomeLabels[level]}: ${outcome} ${lowAssessmentLabel}Progress ${percentCompleteValue}% completed.`;
+	const evaluationValuesLabel = isOpen && (highestScore || latestScore) ? `Evaluation Values - ${highestScore ? `Highest assessment score ${highestScore}. ` : ""}${latestScore ? `Recent assessment score ${latestScore}.` : ""}` : "";
+	return /* @__PURE__ */ React.createElement(Anchor, {
+		"aria-label": `${defaultAriaLabel} ${evaluationValuesLabel}`,
+		variant: "interface",
+		onClick,
+		"data-testid": `learning-outcome-tile-${id}`,
+		...popoverProps
+	}, /* @__PURE__ */ React.createElement(Tile, {
+		hover,
+		progress,
+		size
+	}, isCompleted ? /* @__PURE__ */ React.createElement(SmallCheckIcon, {
+		size: isSmall ? 12 : 16,
+		textColor: "background-contrast"
+	}) : /* @__PURE__ */ React.createElement(ProgressText, {
+		progress,
+		isSmall
+	}, `${percentCompleteValue}%`), showLowAssessmentDot && /* @__PURE__ */ React.createElement(LearningOutcomeLowAssessmentDot, {
+		position: "absolute",
+		top: "-20%",
+		right: "-20%",
+		hasBorder: true
+	})), isOpen && /* @__PURE__ */ React.createElement(LearningOutcomePopover, {
+		activeElRef,
+		horizontalOffset: isSmall && isCompleted ? 159 : isSmall ? 153 : 150,
+		id: `${id}-popover`,
+		isOpen,
+		learningOutcomeDetails
+	}));
+};
+
+//#endregion
+export { LearningOutcomeTile, progressState };
+//# sourceMappingURL=index.js.map

package/dist/LearningOutcomeTile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Anchor","Text","SmallCheckIcon","variant","styled","useEffect","useRef","useState","learningOutcomeLabels","LearningOutcomeLowAssessmentDot","LearningOutcomePopover","Tile","Progress","ProgressText","props","prop","base","fontSize","variants","notStarted","color","fontWeight","inProgress","isSmall","completed","progressState","percentComplete","LearningOutcomeTile","learningOutcomeDetails","onClick","hover","popover","size","id","level","outcome","latestScore","isOpen","setIsOpen","activeElRef","current","focus","popoverProps","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","highestScore","undefined","percentCompleteValue","progress","isCompleted","hasLowLatestAssessment","Boolean","showLowAssessmentDot","lowAssessmentLabel","defaultAriaLabel","evaluationValuesLabel","aria-label","data-testid","textColor","position","top","right","hasBorder","horizontalOffset"],"sources":["../../src/LearningOutcomeTile/index.tsx"],"sourcesContent":["import { Anchor, Text } from '@codecademy/gamut';\nimport { SmallCheckIcon } from '@codecademy/gamut-icons';\nimport { variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n  learningOutcomeLabels,\n  LearningOutcomeLowAssessmentDot,\n} from '../LearningOutcomeBadges';\nimport { LearningOutcomePopover } from '../LearningOutcomePopover';\nimport { Tile } from './Tile';\nimport {\n  LearningOutcomePopoverDetailsProps,\n  LearningOutcomeTileProps,\n  Progress,\n} from './types';\n\nconst ProgressText = styled(Text)<{ progress: Progress; isSmall: boolean }>(\n  (props) => ({\n    ...variant({\n      prop: 'progress',\n      base: {\n        fontSize: 14,\n      },\n      variants: {\n        [Progress.notStarted]: {\n          color: 'text-secondary',\n          fontWeight: 400,\n        },\n        [Progress.inProgress]: {\n          color: 'primary',\n          fontWeight: props.isSmall ? 400 : 700,\n        },\n        [Progress.completed]: {},\n      },\n    })(props),\n  })\n);\n\nexport const progressState = (percentComplete: number): Progress => {\n  if (percentComplete === 0) {\n    return Progress.notStarted;\n  }\n  if (percentComplete > 0 && percentComplete < 100) {\n    return Progress.inProgress;\n  }\n  return Progress.completed;\n};\n\nexport const LearningOutcomeTile: React.FC<LearningOutcomeTileProps> = ({\n  learningOutcomeDetails,\n  onClick,\n  hover = false,\n  popover = false,\n  size = 'normal',\n}) => {\n  const { id, level, outcome, latestScore, percentComplete } =\n    learningOutcomeDetails;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const activeElRef = useRef<HTMLAnchorElement>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      // If the popover is open, we want to focus the active element\n      activeElRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  const popoverProps =\n    popover && hover\n      ? {\n          ref: activeElRef,\n          onMouseEnter: () => setIsOpen(true),\n          onMouseLeave: () => setIsOpen(false),\n          onFocus: () => setIsOpen(true), // For keyboard users\n          onBlur: () => setIsOpen(false), // Close on blur\n          'aria-describedby': `${id}-popover`,\n        }\n      : {};\n\n  const highestScore = popover\n    ? (learningOutcomeDetails as LearningOutcomePopoverDetailsProps)\n        ?.highestScore\n    : undefined;\n\n  const percentCompleteValue = percentComplete ?? 0;\n  const progress = progressState(percentCompleteValue);\n\n  const isCompleted = progress === Progress.completed;\n  const isSmall = size === 'small';\n  const hasLowLatestAssessment = Boolean(\n    latestScore != null && latestScore < 70\n  );\n  const showLowAssessmentDot = hasLowLatestAssessment && !isSmall;\n\n  const lowAssessmentLabel = hasLowLatestAssessment\n    ? 'Most recent assessment score is below 70%, needs review. '\n    : '';\n  const defaultAriaLabel = `${learningOutcomeLabels[level]}: ${outcome} ${lowAssessmentLabel}Progress ${percentCompleteValue}% completed.`;\n  const evaluationValuesLabel =\n    isOpen && (highestScore || latestScore)\n      ? `Evaluation Values - ${\n          highestScore ? `Highest assessment score ${highestScore}. ` : ''\n        }${latestScore ? `Recent assessment score ${latestScore}.` : ''}`\n      : '';\n\n  return (\n    <Anchor\n      aria-label={`${defaultAriaLabel} ${evaluationValuesLabel}`}\n      variant=\"interface\"\n      onClick={onClick}\n      data-testid={`learning-outcome-tile-${id}`}\n      {...popoverProps}\n    >\n      <Tile hover={hover} progress={progress} size={size}>\n        {isCompleted ? (\n          <SmallCheckIcon\n            size={isSmall ? 12 : 16}\n            textColor=\"background-contrast\"\n          />\n        ) : (\n          <ProgressText progress={progress} isSmall={isSmall}>\n            {`${percentCompleteValue}%`}\n          </ProgressText>\n        )}\n        {showLowAssessmentDot && (\n          <LearningOutcomeLowAssessmentDot\n            position=\"absolute\"\n            top=\"-20%\"\n            right=\"-20%\"\n            hasBorder\n          />\n        )}\n      </Tile>\n      {isOpen && (\n        <LearningOutcomePopover\n          activeElRef={activeElRef}\n          horizontalOffset={isSmall && isCompleted ? 159 : isSmall ? 153 : 150}\n          id={`${id}-popover`}\n          isOpen={isOpen}\n          learningOutcomeDetails={\n            learningOutcomeDetails as LearningOutcomePopoverDetailsProps\n          }\n        />\n      )}\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAMa,eAAeT,uBAAOH,MAAAA;;;IACzBa,WAAW,EACV,GAAGX,QAAQ;CACTY,MAAM;CACNC,MAAM,EACJC,UAAU,IACZ;CACAC,UAAU;GACPN,SAASO,aAAa;GACrBC,OAAO;GACPC,YAAY;GACd;GACCT,SAASU,aAAa;GACrBF,OAAO;GACPC,YAAYP,MAAMS,UAAU,MAAM;GACpC;GACCX,SAASY,YAAY,EAAC;EACzB;CACF,CAAA,CAAGV,MAAM,EACX,GAAA,03MAAA;AAGF,MAAaW,iBAAiBC,oBAAAA;AAC5B,KAAIA,oBAAoB,EACtB,QAAOd,SAASO;AAElB,KAAIO,kBAAkB,KAAKA,kBAAkB,IAC3C,QAAOd,SAASU;AAElB,QAAOV,SAASY;;AAGlB,MAAaG,uBAA2D,EACtEC,wBACAC,SACAC,QAAQ,OACRC,UAAU,OACVC,OAAO,eACR;CACC,MAAM,EAAEC,IAAIC,OAAOC,SAASC,aAAaV,oBACvCE;CAEF,MAAM,CAACS,QAAQC,aAAa/B,SAAS,MAAA;CACrC,MAAMgC,cAAcjC,OAA0B,KAAA;AAE9CD,iBAAU;AACR,MAAIgC,OAEFE,aAAYC,SAASC,OAAAA;IAEtB,CAACJ,OAAO,CAAA;CAEX,MAAMK,eACJX,WAAWD,QACP;EACEa,KAAKJ;EACLK,oBAAoBN,UAAU,KAAA;EAC9BO,oBAAoBP,UAAU,MAAA;EAC9BQ,eAAeR,UAAU,KAAA;EACzBS,cAAcT,UAAU,MAAA;EACxB,oBAAoB,GAAGL,GAAG;EAC5B,GACA,EAAC;CAEP,MAAMe,eAAejB,UAChBH,wBACGoB,eACJC;CAEJ,MAAMC,uBAAuBxB,mBAAmB;CAChD,MAAMyB,WAAW1B,cAAcyB,qBAAAA;CAE/B,MAAME,cAAcD,aAAavC,SAASY;CAC1C,MAAMD,UAAUS,SAAS;CACzB,MAAMqB,yBAAyBC,QAC7BlB,eAAe,QAAQA,cAAc,GAAA;CAEvC,MAAMmB,uBAAuBF,0BAA0B,CAAC9B;CAExD,MAAMiC,qBAAqBH,yBACvB,8DACA;CACJ,MAAMI,mBAAmB,GAAGjD,sBAAsB0B,OAAO,IAAIC,QAAQ,GAAGqB,mBAAmB,WAAWN,qBAAqB;CAC3H,MAAMQ,wBACJrB,WAAWW,gBAAgBZ,eACvB,uBACEY,eAAe,4BAA4BA,aAAa,MAAM,KAC7DZ,cAAc,2BAA2BA,YAAY,KAAK,OAC7D;AAEN,QACE,sBAAA,cAACpC,QAAAA;EACC2D,cAAY,GAAGF,iBAAiB,GAAGC;EACnCvD,SAAQ;EACC0B;EACT+B,eAAa,yBAAyB3B;EACrC,GAAGS;IAEJ,sBAAA,cAAC/B,MAAAA;EAAYmB;EAAiBqB;EAAgBnB;IAC3CoB,cACC,sBAAA,cAAClD,gBAAAA;EACC8B,MAAMT,UAAU,KAAK;EACrBsC,WAAU;MAGZ,sBAAA,cAAChD,cAAAA;EAAuBsC;EAAmB5B;IACxC,GAAG2B,qBAAqB,GAAE,EAG9BK,wBACC,sBAAA,cAAC9C,iCAAAA;EACCqD,UAAS;EACTC,KAAI;EACJC,OAAM;EACNC,WAAAA;MAIL5B,UACC,sBAAA,cAAC3B,wBAAAA;EACc6B;EACb2B,kBAAkB3C,WAAW6B,cAAc,MAAM7B,UAAU,MAAM;EACjEU,IAAI,GAAGA,GAAG;EACFI;EAENT"}

package/dist/LearningOutcomeTile/types.cjs

@@ -0,0 +1,17 @@
+
+//#region src/LearningOutcomeTile/types.ts
+var Progress;
+(function(Progress) {
+	Progress["notStarted"] = "notStarted";
+	Progress["inProgress"] = "inProgress";
+	Progress["completed"] = "completed";
+})(Progress || (Progress = {}));
+
+//#endregion
+Object.defineProperty(exports, 'Progress', {
+  enumerable: true,
+  get: function () {
+    return Progress;
+  }
+});
+//# sourceMappingURL=types.cjs.map

package/dist/LearningOutcomeTile/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","names":["Progress"],"sources":["../../src/LearningOutcomeTile/types.ts"],"sourcesContent":["import { LearningOutcomeLevels } from '../LearningOutcomeBadges';\n\nexport enum Progress {\n  notStarted = 'notStarted',\n  inProgress = 'inProgress',\n  completed = 'completed',\n}\n\nexport type SizeType = 'small' | 'normal';\n\nexport interface TileProps {\n  hover: boolean;\n  progress: Progress;\n  size: SizeType;\n}\n\ninterface LearningOutcomeTileDetailsProps {\n  id: string;\n  level: LearningOutcomeLevels;\n  outcome: string;\n  percentComplete: number | undefined | null;\n  latestScore?: number | undefined | null;\n}\nexport interface LearningOutcomePopoverDetailsProps {\n  id: string;\n  level: LearningOutcomeLevels;\n  outcome: string;\n  percentComplete: number | undefined | null;\n  latestScore?: number | undefined | null;\n  highestScore?: number | undefined | null;\n}\n\n/* The following interfaces define the props for the LearningOutcomeTile component based on different states of hover and popover.\nWhen hover is true, popover prop is required (either true or false).\nWhen hover is false, popover prop is optional and defaults to false.\n*/\ninterface WithHoverAndWithPopover {\n  learningOutcomeDetails: LearningOutcomePopoverDetailsProps;\n  hover: true;\n  popover: true;\n}\n\ninterface WithHoverAndWithoutPopover {\n  learningOutcomeDetails: LearningOutcomeTileDetailsProps;\n  hover: true;\n  popover: false;\n}\n\ninterface WithoutHoverAndWithoutPopover {\n  learningOutcomeDetails: LearningOutcomeTileDetailsProps;\n  hover?: false;\n  popover?: false;\n}\n\nexport type LearningOutcomeTileProps = {\n  onClick?: () => void;\n  size?: SizeType;\n} & (\n  | WithHoverAndWithPopover\n  | WithHoverAndWithoutPopover\n  | WithoutHoverAndWithoutPopover\n);\n"],"mappings":";;;UAEYA,UAAAA;;;;GAAAA,aAAAA,WAAAA,EAAAA,EAAAA"}

package/dist/LearningOutcomeTile/types.d.cts

@@ -0,0 +1,46 @@
+import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.cjs";
+
+//#region src/LearningOutcomeTile/types.d.ts
+declare enum Progress {
+  notStarted = "notStarted",
+  inProgress = "inProgress",
+  completed = "completed"
+}
+type SizeType = 'small' | 'normal';
+interface LearningOutcomeTileDetailsProps {
+  id: string;
+  level: LearningOutcomeLevels;
+  outcome: string;
+  percentComplete: number | undefined | null;
+  latestScore?: number | undefined | null;
+}
+interface LearningOutcomePopoverDetailsProps {
+  id: string;
+  level: LearningOutcomeLevels;
+  outcome: string;
+  percentComplete: number | undefined | null;
+  latestScore?: number | undefined | null;
+  highestScore?: number | undefined | null;
+}
+interface WithHoverAndWithPopover {
+  learningOutcomeDetails: LearningOutcomePopoverDetailsProps;
+  hover: true;
+  popover: true;
+}
+interface WithHoverAndWithoutPopover {
+  learningOutcomeDetails: LearningOutcomeTileDetailsProps;
+  hover: true;
+  popover: false;
+}
+interface WithoutHoverAndWithoutPopover {
+  learningOutcomeDetails: LearningOutcomeTileDetailsProps;
+  hover?: false;
+  popover?: false;
+}
+type LearningOutcomeTileProps = {
+  onClick?: () => void;
+  size?: SizeType;
+} & (WithHoverAndWithPopover | WithHoverAndWithoutPopover | WithoutHoverAndWithoutPopover);
+//#endregion
+export { LearningOutcomeTileProps, Progress };
+//# sourceMappingURL=types.d.cts.map

package/dist/LearningOutcomeTile/types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../src/LearningOutcomeTile/types.ts"],"mappings":";;;aAEY,QAAA;EACV,UAAA;EACA,UAAA;EACA,SAAA;AAAA;AAAA,KAGU,QAAA;AAAA,UAQF,+BAAA;EACR,EAAA;EACA,KAAA,EAAO,qBAAA;EACP,OAAA;EACA,eAAA;EACA,WAAA;AAAA;AAAA,UAEe,kCAAA;EACf,EAAA;EACA,KAAA,EAAO,qBAAA;EACP,OAAA;EACA,eAAA;EACA,WAAA;EACA,YAAA;AAAA;AAAA,UAOQ,uBAAA;EACR,sBAAA,EAAwB,kCAAA;EACxB,KAAA;EACA,OAAA;AAAA;AAAA,UAGQ,0BAAA;EACR,sBAAA,EAAwB,+BAAA;EACxB,KAAA;EACA,OAAA;AAAA;AAAA,UAGQ,6BAAA;EACR,sBAAA,EAAwB,+BAAA;EACxB,KAAA;EACA,OAAA;AAAA;AAAA,KAGU,wBAAA;EACV,OAAA;EACA,IAAA,GAAO,QAAA;AAAA,KAEL,uBAAA,GACA,0BAAA,GACA,6BAAA"}

package/dist/LearningOutcomeTile/types.d.ts

@@ -1,47 +1,47 @@
-import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
-export declare enum Progress {
-    notStarted = "notStarted",
-    inProgress = "inProgress",
-    completed = "completed"
-}
-export type SizeType = 'small' | 'normal';
-export interface TileProps {
-    hover: boolean;
-    progress: Progress;
-    size: SizeType;
+import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
+import "../LearningOutcomeBadges/index.js";
+
+//#region src/LearningOutcomeTile/types.d.ts
+declare enum Progress {
+  notStarted = "notStarted",
+  inProgress = "inProgress",
+  completed = "completed"
 }
+type SizeType = 'small' | 'normal';
 interface LearningOutcomeTileDetailsProps {
-    id: string;
-    level: LearningOutcomeLevels;
-    outcome: string;
-    percentComplete: number | undefined | null;
-    latestScore?: number | undefined | null;
+  id: string;
+  level: LearningOutcomeLevels;
+  outcome: string;
+  percentComplete: number | undefined | null;
+  latestScore?: number | undefined | null;
 }
-export interface LearningOutcomePopoverDetailsProps {
-    id: string;
-    level: LearningOutcomeLevels;
-    outcome: string;
-    percentComplete: number | undefined | null;
-    latestScore?: number | undefined | null;
-    highestScore?: number | undefined | null;
+interface LearningOutcomePopoverDetailsProps {
+  id: string;
+  level: LearningOutcomeLevels;
+  outcome: string;
+  percentComplete: number | undefined | null;
+  latestScore?: number | undefined | null;
+  highestScore?: number | undefined | null;
 }
 interface WithHoverAndWithPopover {
-    learningOutcomeDetails: LearningOutcomePopoverDetailsProps;
-    hover: true;
-    popover: true;
+  learningOutcomeDetails: LearningOutcomePopoverDetailsProps;
+  hover: true;
+  popover: true;
 }
 interface WithHoverAndWithoutPopover {
-    learningOutcomeDetails: LearningOutcomeTileDetailsProps;
-    hover: true;
-    popover: false;
+  learningOutcomeDetails: LearningOutcomeTileDetailsProps;
+  hover: true;
+  popover: false;
 }
 interface WithoutHoverAndWithoutPopover {
-    learningOutcomeDetails: LearningOutcomeTileDetailsProps;
-    hover?: false;
-    popover?: false;
+  learningOutcomeDetails: LearningOutcomeTileDetailsProps;
+  hover?: false;
+  popover?: false;
 }
-export type LearningOutcomeTileProps = {
-    onClick?: () => void;
-    size?: SizeType;
+type LearningOutcomeTileProps = {
+  onClick?: () => void;
+  size?: SizeType;
 } & (WithHoverAndWithPopover | WithHoverAndWithoutPopover | WithoutHoverAndWithoutPopover);
-export {};
+//#endregion
+export { LearningOutcomeTileProps, Progress };
+//# sourceMappingURL=types.d.ts.map

package/dist/LearningOutcomeTile/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/LearningOutcomeTile/types.ts"],"mappings":";;;;aAEY,QAAA;EACV,UAAA;EACA,UAAA;EACA,SAAA;AAAA;AAAA,KAGU,QAAA;AAAA,UAQF,+BAAA;EACR,EAAA;EACA,KAAA,EAAO,qBAAA;EACP,OAAA;EACA,eAAA;EACA,WAAA;AAAA;AAAA,UAEe,kCAAA;EACf,EAAA;EACA,KAAA,EAAO,qBAAA;EACP,OAAA;EACA,eAAA;EACA,WAAA;EACA,YAAA;AAAA;AAAA,UAOQ,uBAAA;EACR,sBAAA,EAAwB,kCAAA;EACxB,KAAA;EACA,OAAA;AAAA;AAAA,UAGQ,0BAAA;EACR,sBAAA,EAAwB,+BAAA;EACxB,KAAA;EACA,OAAA;AAAA;AAAA,UAGQ,6BAAA;EACR,sBAAA,EAAwB,+BAAA;EACxB,KAAA;EACA,OAAA;AAAA;AAAA,KAGU,wBAAA;EACV,OAAA;EACA,IAAA,GAAO,QAAA;AAAA,KAEL,uBAAA,GACA,0BAAA,GACA,6BAAA"}

package/dist/LearningOutcomeTile/types.js

@@ -1,11 +1,11 @@
-export let Progress = /*#__PURE__*/function (Progress) {
-  Progress["notStarted"] = "notStarted";
-  Progress["inProgress"] = "inProgress";
-  Progress["completed"] = "completed";
-  return Progress;
-}({});
+//#region src/LearningOutcomeTile/types.ts
+var Progress;
+(function(Progress) {
+	Progress["notStarted"] = "notStarted";
+	Progress["inProgress"] = "inProgress";
+	Progress["completed"] = "completed";
+})(Progress || (Progress = {}));
 
-/* The following interfaces define the props for the LearningOutcomeTile component based on different states of hover and popover.
-When hover is true, popover prop is required (either true or false).
-When hover is false, popover prop is optional and defaults to false.
-*/
+//#endregion
+export { Progress };
+//# sourceMappingURL=types.js.map

package/dist/LearningOutcomeTile/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["Progress"],"sources":["../../src/LearningOutcomeTile/types.ts"],"sourcesContent":["import { LearningOutcomeLevels } from '../LearningOutcomeBadges';\n\nexport enum Progress {\n  notStarted = 'notStarted',\n  inProgress = 'inProgress',\n  completed = 'completed',\n}\n\nexport type SizeType = 'small' | 'normal';\n\nexport interface TileProps {\n  hover: boolean;\n  progress: Progress;\n  size: SizeType;\n}\n\ninterface LearningOutcomeTileDetailsProps {\n  id: string;\n  level: LearningOutcomeLevels;\n  outcome: string;\n  percentComplete: number | undefined | null;\n  latestScore?: number | undefined | null;\n}\nexport interface LearningOutcomePopoverDetailsProps {\n  id: string;\n  level: LearningOutcomeLevels;\n  outcome: string;\n  percentComplete: number | undefined | null;\n  latestScore?: number | undefined | null;\n  highestScore?: number | undefined | null;\n}\n\n/* The following interfaces define the props for the LearningOutcomeTile component based on different states of hover and popover.\nWhen hover is true, popover prop is required (either true or false).\nWhen hover is false, popover prop is optional and defaults to false.\n*/\ninterface WithHoverAndWithPopover {\n  learningOutcomeDetails: LearningOutcomePopoverDetailsProps;\n  hover: true;\n  popover: true;\n}\n\ninterface WithHoverAndWithoutPopover {\n  learningOutcomeDetails: LearningOutcomeTileDetailsProps;\n  hover: true;\n  popover: false;\n}\n\ninterface WithoutHoverAndWithoutPopover {\n  learningOutcomeDetails: LearningOutcomeTileDetailsProps;\n  hover?: false;\n  popover?: false;\n}\n\nexport type LearningOutcomeTileProps = {\n  onClick?: () => void;\n  size?: SizeType;\n} & (\n  | WithHoverAndWithPopover\n  | WithHoverAndWithoutPopover\n  | WithoutHoverAndWithoutPopover\n);\n"],"mappings":";;UAEYA,UAAAA;;;;GAAAA,aAAAA,WAAAA,EAAAA,EAAAA"}

package/dist/ListSection/index.cjs

@@ -0,0 +1,52 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../PageSection/index.cjs');
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/ListSection/index.tsx
+const UnstyledUnorderedList = /* @__PURE__ */ (0, _emotion_styled.default)("ul", {
+	target: "ermoj990",
+	label: "brand-UnstyledUnorderedList"
+})("list-style:none;padding:0;margin:0;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xpc3RTZWN0aW9uL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xpc3RTZWN0aW9uL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBXaXRoQ2hpbGRyZW5Qcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQ2hpbGRyZW4sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBQYWdlU2VjdGlvbiwgU2VjdGlvbkJ1dHRvbiB9IGZyb20gJy4uJztcblxuZXhwb3J0IGludGVyZmFjZSBMaXN0U2VjdGlvblByb3BzIGV4dGVuZHMgV2l0aENoaWxkcmVuUHJvcCB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGhlYWRlckJ1dHRvbj86IFNlY3Rpb25CdXR0b247XG4gIGhlYWRlclNlY29uZGFyeUJ1dHRvbj86IFNlY3Rpb25CdXR0b247XG4gIC8qKlxuICAgKiBOdW1iZXIgb2YgaXRlbXMgdG8gYmUgaW5pdGFsbHkgZGlzcGxheWVkXG4gICAqXG4gICAqIEByZW1hcmtzXG4gICAqIElmIHRoZSBpbml0aWFsIGRpc3BsYXkgYW1vdW50IG1hdGNoZXMgdGhlIG51bWJlciBvZiBsaXN0IGl0ZW1zLCBTaG93IEFsbCBidXR0b24gd2lsbCBub3QgYXBwZWFyLlxuICAgKi9cbiAgaW5pdGlhbERpc3BsYXlBbW91bnQ/OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIE9wdGlvbmFsIGNhbGxiYWNrIGZ1bmN0aW9uIHRoYXQgd2lsbCBiZSBjYWxsZWQgd2hlbiB0aGUgdXNlciBjbGlja3MgdGhlIFwiU2hvdyBBbGxcIiAvIFwiU2hvdyBsZXNzXCIgYnV0dG9uLlxuICAgKiBUaGlzIGlzIHVzdWFsbHkgdXNlZCBmb3IgdGhpbmdzIGxpa2UgbWV0cmljcyB0cmFja2luZy5cbiAgICovXG4gIG9uU2hvd0FsbE9yTGVzc0NsaWNrPzogKHNob3dBbGw6IGJvb2xlYW4pID0+IHZvaWQ7XG59XG5cbmNvbnN0IFVuc3R5bGVkVW5vcmRlcmVkTGlzdCA9IHN0eWxlZC51bGBcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwO1xuYDtcblxuY29uc3QgU3R5bGVkTGlzdEl0ZW0gPSBzdHlsZWQubGlgXG4gICY6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgbWFyZ2luLWJvdHRvbTogJHt0aGVtZS5zcGFjaW5nWzI0XX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBMaXN0U2VjdGlvbjogUmVhY3QuRkM8TGlzdFNlY3Rpb25Qcm9wcz4gPSAoe1xuICB0aXRsZSxcbiAgaGVhZGVyQnV0dG9uLFxuICBoZWFkZXJTZWNvbmRhcnlCdXR0b24sXG4gIGluaXRpYWxEaXNwbGF5QW1vdW50ID0gMyxcbiAgb25TaG93QWxsT3JMZXNzQ2xpY2ssXG4gIGNoaWxkcmVuLFxufSkgPT4ge1xuICBjb25zdCBbc2hvd0FsbCwgc2V0U2hvd0FsbF0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgaGFuZGxlU2hvd0FsbCA9ICgpID0+IHtcbiAgICBvblNob3dBbGxPckxlc3NDbGljaz8uKCFzaG93QWxsKTtcbiAgICBzZXRTaG93QWxsKCFzaG93QWxsKTtcbiAgfTtcblxuICBjb25zdCByZW5kZXJMaXN0SXRlbXMgPSAoKSA9PiB7XG4gICAgY29uc3QgbGlzdEl0ZW1zID0gQ2hpbGRyZW4ubWFwKFxuICAgICAgY2hpbGRyZW4sXG4gICAgICAoY2hpbGQpID0+ICEhY2hpbGQgJiYgPFN0eWxlZExpc3RJdGVtPntjaGlsZH08L1N0eWxlZExpc3RJdGVtPlxuICAgICk/LmZpbHRlcihCb29sZWFuKTtcblxuICAgIGlmICghbGlzdEl0ZW1zKSByZXR1cm4gbnVsbDtcbiAgICBpZiAoc2hvd0FsbCkgcmV0dXJuIGxpc3RJdGVtcztcbiAgICByZXR1cm4gbGlzdEl0ZW1zLnNsaWNlKDAsIGluaXRpYWxEaXNwbGF5QW1vdW50KTtcbiAgfTtcblxuICBjb25zdCByZW5kZXJGb290ZXJCdXR0b24gPSAoKSA9PiB7XG4gICAgaWYgKENoaWxkcmVuLnRvQXJyYXkoY2hpbGRyZW4pLmxlbmd0aCA8PSBpbml0aWFsRGlzcGxheUFtb3VudCkgcmV0dXJuIG51bGw7XG4gICAgY29uc3QgYnV0dG9uVGV4dCA9IGBTaG93ICR7c2hvd0FsbCA/ICdMZXNzJyA6ICdBbGwnfWA7XG4gICAgcmV0dXJuIHtcbiAgICAgIHRleHQ6IGJ1dHRvblRleHQsXG4gICAgICBvbkNsaWNrOiBoYW5kbGVTaG93QWxsLFxuICAgICAgJ2FyaWEtbGFiZWwnOiBgJHtidXR0b25UZXh0fSwgJHt0aXRsZX1gLFxuICAgIH07XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8UGFnZVNlY3Rpb25cbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICAgIGZvb3RlckJ1dHRvbj17cmVuZGVyRm9vdGVyQnV0dG9uKCl9XG4gICAgICBoZWFkZXJCdXR0b249e2hlYWRlckJ1dHRvbn1cbiAgICAgIGhlYWRlclNlY29uZGFyeUJ1dHRvbj17aGVhZGVyU2Vjb25kYXJ5QnV0dG9ufVxuICAgID5cbiAgICAgIDxVbnN0eWxlZFVub3JkZXJlZExpc3QgYXJpYS1sYWJlbD17dGl0bGV9IGFyaWEtbGl2ZT1cInBvbGl0ZVwiPlxuICAgICAgICB7cmVuZGVyTGlzdEl0ZW1zKCl9XG4gICAgICA8L1Vuc3R5bGVkVW5vcmRlcmVkTGlzdD5cbiAgICA8L1BhZ2VTZWN0aW9uPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQjhCIn0= */");
+const StyledListItem = /* @__PURE__ */ (0, _emotion_styled.default)("li", {
+	target: "ermoj991",
+	label: "brand-StyledListItem"
+})("&:not(:last-child){margin-bottom:", _codecademy_gamut_styles.theme.spacing[24], ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xpc3RTZWN0aW9uL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xpc3RTZWN0aW9uL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBXaXRoQ2hpbGRyZW5Qcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQ2hpbGRyZW4sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBQYWdlU2VjdGlvbiwgU2VjdGlvbkJ1dHRvbiB9IGZyb20gJy4uJztcblxuZXhwb3J0IGludGVyZmFjZSBMaXN0U2VjdGlvblByb3BzIGV4dGVuZHMgV2l0aENoaWxkcmVuUHJvcCB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGhlYWRlckJ1dHRvbj86IFNlY3Rpb25CdXR0b247XG4gIGhlYWRlclNlY29uZGFyeUJ1dHRvbj86IFNlY3Rpb25CdXR0b247XG4gIC8qKlxuICAgKiBOdW1iZXIgb2YgaXRlbXMgdG8gYmUgaW5pdGFsbHkgZGlzcGxheWVkXG4gICAqXG4gICAqIEByZW1hcmtzXG4gICAqIElmIHRoZSBpbml0aWFsIGRpc3BsYXkgYW1vdW50IG1hdGNoZXMgdGhlIG51bWJlciBvZiBsaXN0IGl0ZW1zLCBTaG93IEFsbCBidXR0b24gd2lsbCBub3QgYXBwZWFyLlxuICAgKi9cbiAgaW5pdGlhbERpc3BsYXlBbW91bnQ/OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIE9wdGlvbmFsIGNhbGxiYWNrIGZ1bmN0aW9uIHRoYXQgd2lsbCBiZSBjYWxsZWQgd2hlbiB0aGUgdXNlciBjbGlja3MgdGhlIFwiU2hvdyBBbGxcIiAvIFwiU2hvdyBsZXNzXCIgYnV0dG9uLlxuICAgKiBUaGlzIGlzIHVzdWFsbHkgdXNlZCBmb3IgdGhpbmdzIGxpa2UgbWV0cmljcyB0cmFja2luZy5cbiAgICovXG4gIG9uU2hvd0FsbE9yTGVzc0NsaWNrPzogKHNob3dBbGw6IGJvb2xlYW4pID0+IHZvaWQ7XG59XG5cbmNvbnN0IFVuc3R5bGVkVW5vcmRlcmVkTGlzdCA9IHN0eWxlZC51bGBcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwO1xuYDtcblxuY29uc3QgU3R5bGVkTGlzdEl0ZW0gPSBzdHlsZWQubGlgXG4gICY6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgbWFyZ2luLWJvdHRvbTogJHt0aGVtZS5zcGFjaW5nWzI0XX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBMaXN0U2VjdGlvbjogUmVhY3QuRkM8TGlzdFNlY3Rpb25Qcm9wcz4gPSAoe1xuICB0aXRsZSxcbiAgaGVhZGVyQnV0dG9uLFxuICBoZWFkZXJTZWNvbmRhcnlCdXR0b24sXG4gIGluaXRpYWxEaXNwbGF5QW1vdW50ID0gMyxcbiAgb25TaG93QWxsT3JMZXNzQ2xpY2ssXG4gIGNoaWxkcmVuLFxufSkgPT4ge1xuICBjb25zdCBbc2hvd0FsbCwgc2V0U2hvd0FsbF0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgaGFuZGxlU2hvd0FsbCA9ICgpID0+IHtcbiAgICBvblNob3dBbGxPckxlc3NDbGljaz8uKCFzaG93QWxsKTtcbiAgICBzZXRTaG93QWxsKCFzaG93QWxsKTtcbiAgfTtcblxuICBjb25zdCByZW5kZXJMaXN0SXRlbXMgPSAoKSA9PiB7XG4gICAgY29uc3QgbGlzdEl0ZW1zID0gQ2hpbGRyZW4ubWFwKFxuICAgICAgY2hpbGRyZW4sXG4gICAgICAoY2hpbGQpID0+ICEhY2hpbGQgJiYgPFN0eWxlZExpc3RJdGVtPntjaGlsZH08L1N0eWxlZExpc3RJdGVtPlxuICAgICk/LmZpbHRlcihCb29sZWFuKTtcblxuICAgIGlmICghbGlzdEl0ZW1zKSByZXR1cm4gbnVsbDtcbiAgICBpZiAoc2hvd0FsbCkgcmV0dXJuIGxpc3RJdGVtcztcbiAgICByZXR1cm4gbGlzdEl0ZW1zLnNsaWNlKDAsIGluaXRpYWxEaXNwbGF5QW1vdW50KTtcbiAgfTtcblxuICBjb25zdCByZW5kZXJGb290ZXJCdXR0b24gPSAoKSA9PiB7XG4gICAgaWYgKENoaWxkcmVuLnRvQXJyYXkoY2hpbGRyZW4pLmxlbmd0aCA8PSBpbml0aWFsRGlzcGxheUFtb3VudCkgcmV0dXJuIG51bGw7XG4gICAgY29uc3QgYnV0dG9uVGV4dCA9IGBTaG93ICR7c2hvd0FsbCA/ICdMZXNzJyA6ICdBbGwnfWA7XG4gICAgcmV0dXJuIHtcbiAgICAgIHRleHQ6IGJ1dHRvblRleHQsXG4gICAgICBvbkNsaWNrOiBoYW5kbGVTaG93QWxsLFxuICAgICAgJ2FyaWEtbGFiZWwnOiBgJHtidXR0b25UZXh0fSwgJHt0aXRsZX1gLFxuICAgIH07XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8UGFnZVNlY3Rpb25cbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICAgIGZvb3RlckJ1dHRvbj17cmVuZGVyRm9vdGVyQnV0dG9uKCl9XG4gICAgICBoZWFkZXJCdXR0b249e2hlYWRlckJ1dHRvbn1cbiAgICAgIGhlYWRlclNlY29uZGFyeUJ1dHRvbj17aGVhZGVyU2Vjb25kYXJ5QnV0dG9ufVxuICAgID5cbiAgICAgIDxVbnN0eWxlZFVub3JkZXJlZExpc3QgYXJpYS1sYWJlbD17dGl0bGV9IGFyaWEtbGl2ZT1cInBvbGl0ZVwiPlxuICAgICAgICB7cmVuZGVyTGlzdEl0ZW1zKCl9XG4gICAgICA8L1Vuc3R5bGVkVW5vcmRlcmVkTGlzdD5cbiAgICA8L1BhZ2VTZWN0aW9uPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ3VCIn0= */");
+const ListSection = ({ title, headerButton, headerSecondaryButton, initialDisplayAmount = 3, onShowAllOrLessClick, children }) => {
+	const [showAll, setShowAll] = (0, react.useState)(false);
+	const handleShowAll = () => {
+		onShowAllOrLessClick?.(!showAll);
+		setShowAll(!showAll);
+	};
+	const renderListItems = () => {
+		const listItems = react.Children.map(children, (child) => !!child && /* @__PURE__ */ react.createElement(StyledListItem, null, child))?.filter(Boolean);
+		if (!listItems) return null;
+		if (showAll) return listItems;
+		return listItems.slice(0, initialDisplayAmount);
+	};
+	const renderFooterButton = () => {
+		if (react.Children.toArray(children).length <= initialDisplayAmount) return null;
+		const buttonText = `Show ${showAll ? "Less" : "All"}`;
+		return {
+			text: buttonText,
+			onClick: handleShowAll,
+			"aria-label": `${buttonText}, ${title}`
+		};
+	};
+	return /* @__PURE__ */ react.createElement(require_index.PageSection, {
+		title,
+		footerButton: renderFooterButton(),
+		headerButton,
+		headerSecondaryButton
+	}, /* @__PURE__ */ react.createElement(UnstyledUnorderedList, {
+		"aria-label": title,
+		"aria-live": "polite"
+	}, renderListItems()));
+};
+
+//#endregion
+exports.ListSection = ListSection;
+//# sourceMappingURL=index.cjs.map

package/dist/ListSection/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["theme","styled","Children","useState","React","PageSection","UnstyledUnorderedList","StyledListItem","spacing","ListSection","title","headerButton","headerSecondaryButton","initialDisplayAmount","onShowAllOrLessClick","children","showAll","setShowAll","handleShowAll","renderListItems","listItems","map","child","filter","Boolean","slice","renderFooterButton","toArray","length","buttonText","text","onClick","footerButton","aria-label","aria-live"],"sources":["../../src/ListSection/index.tsx"],"sourcesContent":["import { WithChildrenProp } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { Children, useState } from 'react';\nimport * as React from 'react';\n\nimport { PageSection, SectionButton } from '..';\n\nexport interface ListSectionProps extends WithChildrenProp {\n  title: string;\n  headerButton?: SectionButton;\n  headerSecondaryButton?: SectionButton;\n  /**\n   * Number of items to be initally displayed\n   *\n   * @remarks\n   * If the initial display amount matches the number of list items, Show All button will not appear.\n   */\n  initialDisplayAmount?: number;\n\n  /**\n   * Optional callback function that will be called when the user clicks the \"Show All\" / \"Show less\" button.\n   * This is usually used for things like metrics tracking.\n   */\n  onShowAllOrLessClick?: (showAll: boolean) => void;\n}\n\nconst UnstyledUnorderedList = styled.ul`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\nconst StyledListItem = styled.li`\n  &:not(:last-child) {\n    margin-bottom: ${theme.spacing[24]};\n  }\n`;\n\nexport const ListSection: React.FC<ListSectionProps> = ({\n  title,\n  headerButton,\n  headerSecondaryButton,\n  initialDisplayAmount = 3,\n  onShowAllOrLessClick,\n  children,\n}) => {\n  const [showAll, setShowAll] = useState(false);\n\n  const handleShowAll = () => {\n    onShowAllOrLessClick?.(!showAll);\n    setShowAll(!showAll);\n  };\n\n  const renderListItems = () => {\n    const listItems = Children.map(\n      children,\n      (child) => !!child && <StyledListItem>{child}</StyledListItem>\n    )?.filter(Boolean);\n\n    if (!listItems) return null;\n    if (showAll) return listItems;\n    return listItems.slice(0, initialDisplayAmount);\n  };\n\n  const renderFooterButton = () => {\n    if (Children.toArray(children).length <= initialDisplayAmount) return null;\n    const buttonText = `Show ${showAll ? 'Less' : 'All'}`;\n    return {\n      text: buttonText,\n      onClick: handleShowAll,\n      'aria-label': `${buttonText}, ${title}`,\n    };\n  };\n\n  return (\n    <PageSection\n      title={title}\n      footerButton={renderFooterButton()}\n      headerButton={headerButton}\n      headerSecondaryButton={headerSecondaryButton}\n    >\n      <UnstyledUnorderedList aria-label={title} aria-live=\"polite\">\n        {renderListItems()}\n      </UnstyledUnorderedList>\n    </PageSection>\n  );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAMM,wBAAwBL,6CAAAA,MAAAA;;;;AAM9B,MAAMM,iBAAiBN,6CAAAA,MAAAA;;;wCAEFD,+BAAMQ,QAAQ,KAAG,MAAA,0iHAAA;AAItC,MAAaC,eAA2C,EACtDC,OACAC,cACAC,uBACAC,uBAAuB,GACvBC,sBACAC,eACD;CACC,MAAM,CAACC,SAASC,kCAAuB,MAAA;CAEvC,MAAMC,sBAAgB;AACpBJ,yBAAuB,CAACE,QAAAA;AACxBC,aAAW,CAACD,QAAAA;;CAGd,MAAMG,wBAAkB;EACtB,MAAMC,YAAYlB,eAASmB,IACzBN,WACCO,UAAU,CAAC,CAACA,SAAS,sBAAA,cAACf,gBAAAA,MAAgBe,MAAAA,CAAAA,EACtCC,OAAOC,QAAAA;AAEV,MAAI,CAACJ,UAAW,QAAO;AACvB,MAAIJ,QAAS,QAAOI;AACpB,SAAOA,UAAUK,MAAM,GAAGZ,qBAAAA;;CAG5B,MAAMa,2BAAqB;AACzB,MAAIxB,eAASyB,QAAQZ,SAAAA,CAAUa,UAAUf,qBAAsB,QAAO;EACtE,MAAMgB,aAAa,QAAQb,UAAU,SAAS;AAC9C,SAAO;GACLc,MAAMD;GACNE,SAASb;GACT,cAAc,GAAGW,WAAW,IAAInB;GAClC;;AAGF,QACE,sBAAA,cAACL,2BAAAA;EACQK;EACPsB,cAAcN,oBAAAA;EACAf;EACSC;IAEvB,sBAAA,cAACN,uBAAAA;EAAsB2B,cAAYvB;EAAOwB,aAAU;IACjDf,iBAAAA,CAAAA,CAAAA"}

package/dist/ListSection/index.d.cts

@@ -0,0 +1,26 @@
+import { SectionButton } from "../PageSection/index.cjs";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/ListSection/index.d.ts
+interface ListSectionProps extends WithChildrenProp {
+  title: string;
+  headerButton?: SectionButton;
+  headerSecondaryButton?: SectionButton;
+  /**
+   * Number of items to be initally displayed
+   *
+   * @remarks
+   * If the initial display amount matches the number of list items, Show All button will not appear.
+   */
+  initialDisplayAmount?: number;
+  /**
+   * Optional callback function that will be called when the user clicks the "Show All" / "Show less" button.
+   * This is usually used for things like metrics tracking.
+   */
+  onShowAllOrLessClick?: (showAll: boolean) => void;
+}
+declare const ListSection: React$1.FC<ListSectionProps>;
+//#endregion
+export { ListSection, ListSectionProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/ListSection/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/ListSection/index.tsx"],"mappings":";;;;;UAQiB,gBAAA,SAAyB,gBAAA;EACxC,KAAA;EACA,YAAA,GAAe,aAAA;EACf,qBAAA,GAAwB,aAAA;;;;;;;EAOxB,oBAAA;EATA;;;;EAeA,oBAAA,IAAwB,OAAA;AAAA;AAAA,cAeb,WAAA,EAAa,OAAA,CAAM,EAAA,CAAG,gBAAA"}

package/dist/ListSection/index.d.ts

@@ -1,21 +1,27 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-import { SectionButton } from '..';
-export interface ListSectionProps extends WithChildrenProp {
-    title: string;
-    headerButton?: SectionButton;
-    headerSecondaryButton?: SectionButton;
-    /**
-     * Number of items to be initally displayed
-     *
-     * @remarks
-     * If the initial display amount matches the number of list items, Show All button will not appear.
-     */
-    initialDisplayAmount?: number;
-    /**
-     * Optional callback function that will be called when the user clicks the "Show All" / "Show less" button.
-     * This is usually used for things like metrics tracking.
-     */
-    onShowAllOrLessClick?: (showAll: boolean) => void;
+import { SectionButton } from "../PageSection/index.js";
+import "../index.js";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/ListSection/index.d.ts
+interface ListSectionProps extends WithChildrenProp {
+  title: string;
+  headerButton?: SectionButton;
+  headerSecondaryButton?: SectionButton;
+  /**
+   * Number of items to be initally displayed
+   *
+   * @remarks
+   * If the initial display amount matches the number of list items, Show All button will not appear.
+   */
+  initialDisplayAmount?: number;
+  /**
+   * Optional callback function that will be called when the user clicks the "Show All" / "Show less" button.
+   * This is usually used for things like metrics tracking.
+   */
+  onShowAllOrLessClick?: (showAll: boolean) => void;
 }
-export declare const ListSection: React.FC<ListSectionProps>;
+declare const ListSection: React$1.FC<ListSectionProps>;
+//#endregion
+export { ListSection, ListSectionProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/ListSection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/ListSection/index.tsx"],"mappings":";;;;;;UAQiB,gBAAA,SAAyB,gBAAA;EACxC,KAAA;EACA,YAAA,GAAe,aAAA;EACf,qBAAA,GAAwB,aAAA;EAHQ;;;;;;EAUhC,oBAAA;EAVwC;;;;EAgBxC,oBAAA,IAAwB,OAAA;AAAA;AAAA,cAeb,WAAA,EAAa,OAAA,CAAM,EAAA,CAAG,gBAAA"}