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

package/dist/LearningOutcomeTile/index.mjs

@@ -1,94 +0,0 @@
-import { learningOutcomeLabels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.mjs";
-import { LearningOutcomeLowAssessmentDot } from "../LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.mjs";
-import "../LearningOutcomeBadges/index.mjs";
-import { LearningOutcomePopover } from "../LearningOutcomePopover/index.mjs";
-import { Progress } from "./types.mjs";
-import { Tile } from "./Tile.mjs";
-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;
-};
-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.mjs.map

package/dist/LearningOutcomeTile/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","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

@@ -1,17 +0,0 @@
-
-//#region src/LearningOutcomeTile/types.ts
-var Progress;
-(function(Progress$1) {
-	Progress$1["notStarted"] = "notStarted";
-	Progress$1["inProgress"] = "inProgress";
-	Progress$1["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

@@ -1 +0,0 @@
-{"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,YAAAA;;;;GAAAA,aAAAA,WAAAA,EAAAA,EAAAA"}

package/dist/LearningOutcomeTile/types.d.cts

@@ -1,46 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../../src/LearningOutcomeTile/types.ts"],"sourcesContent":[],"mappings":";;;aAEY,QAAA;;EAAA,UAAA,GAAQ,YAAA;EAMR,SAAA,GAAQ,WAAA;AAMnB;AASgB,KAfL,QAAA,GAeK,OAAA,GAAA,QAAkC;UAPzC,+BAAA,CA0CN;EACA,EAAA,EAAA,MAAA;EACA,KAAA,EA1CK,qBA0CL;EAA6B,OAAA,EAAA,MAAA;;;;UArChB,kCAAA;;SAER;;;;;;UAWC,uBAAA;0BACgB;;;;UAKhB,0BAAA;0BACgB;;;;UAKhB,6BAAA;0BACgB;;;;KAKd,wBAAA;;SAEH;KAEL,0BACA,6BACA"}

package/dist/LearningOutcomeTile/types.d.mts

@@ -1,47 +0,0 @@
-import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.mjs";
-import "../LearningOutcomeBadges/index.mjs";
-
-//#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.mts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.mts","names":[],"sources":["../../src/LearningOutcomeTile/types.ts"],"sourcesContent":[],"mappings":";;;;aAEY,QAAA;;;EAAA,SAAA,GAAQ,WAAA;AAMpB;AAQU,KARE,QAAA,GAQF,OAAA,GAAA,QAA+B;UAA/B,+BAAA,CAwCD;EAEL,EAAA,EAAA,MAAA;EACA,KAAA,EAzCK,qBAyCL;EACA,OAAA,EAAA,MAAA;EAA6B,eAAA,EAAA,MAAA,GAAA,SAAA,GAAA,IAAA;;;UArChB,kCAAA;;SAER;;;;;;UAWC,uBAAA;0BACgB;;;;UAKhB,0BAAA;0BACgB;;;;UAKhB,6BAAA;0BACgB;;;;KAKd,wBAAA;;SAEH;KAEL,0BACA,6BACA"}

package/dist/LearningOutcomeTile/types.mjs

@@ -1,11 +0,0 @@
-//#region src/LearningOutcomeTile/types.ts
-var Progress;
-(function(Progress$1) {
-	Progress$1["notStarted"] = "notStarted";
-	Progress$1["inProgress"] = "inProgress";
-	Progress$1["completed"] = "completed";
-})(Progress || (Progress = {}));
-
-//#endregion
-export { Progress };
-//# sourceMappingURL=types.mjs.map

package/dist/LearningOutcomeTile/types.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.mjs","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,YAAAA;;;;GAAAA,aAAAA,WAAAA,EAAAA,EAAAA"}

package/dist/ListSection/index.cjs

@@ -1,52 +0,0 @@
-const require_rolldown_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_rolldown_runtime.__toESM(_emotion_styled);
-let react = require("react");
-react = require_rolldown_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

@@ -1 +0,0 @@
-{"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

@@ -1,26 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/ListSection/index.tsx"],"sourcesContent":[],"mappings":";;;;;UAQiB,gBAAA,SAAyB;;EAAzB,YAAA,CAAA,EAEA,aAFiB;EAEjB,qBAAA,CAAA,EACS,aADT;EACS;;;AA4B1B;;;;;;;;;;cAAa,aAAa,OAAA,CAAM,GAAG"}

package/dist/ListSection/index.d.mts

@@ -1,27 +0,0 @@
-import { SectionButton } from "../PageSection/index.mjs";
-import "../index.mjs";
-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.mts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/ListSection/index.tsx"],"sourcesContent":[],"mappings":";;;;;;UAQiB,gBAAA,SAAyB;;iBAEzB;EAFA,qBAAiB,CAAA,EAGR,aAHQ;EAEjB;;;;AA6BjB;;;;;;;;;cAAa,aAAa,OAAA,CAAM,GAAG"}

package/dist/ListSection/index.mjs

@@ -1,50 +0,0 @@
-import { PageSection } from "../PageSection/index.mjs";
-import { theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import * as React$1 from "react";
-import { Children, useState } from "react";
-
-//#region src/ListSection/index.tsx
-const UnstyledUnorderedList = /* @__PURE__ */ styled("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__ */ styled("li", {
-	target: "ermoj991",
-	label: "brand-StyledListItem"
-})("&:not(:last-child){margin-bottom:", 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] = useState(false);
-	const handleShowAll = () => {
-		onShowAllOrLessClick?.(!showAll);
-		setShowAll(!showAll);
-	};
-	const renderListItems = () => {
-		const listItems = Children.map(children, (child) => !!child && /* @__PURE__ */ React$1.createElement(StyledListItem, null, child))?.filter(Boolean);
-		if (!listItems) return null;
-		if (showAll) return listItems;
-		return listItems.slice(0, initialDisplayAmount);
-	};
-	const renderFooterButton = () => {
-		if (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$1.createElement(PageSection, {
-		title,
-		footerButton: renderFooterButton(),
-		headerButton,
-		headerSecondaryButton
-	}, /* @__PURE__ */ React$1.createElement(UnstyledUnorderedList, {
-		"aria-label": title,
-		"aria-live": "polite"
-	}, renderListItems()));
-};
-
-//#endregion
-export { ListSection };
-//# sourceMappingURL=index.mjs.map

package/dist/ListSection/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","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,uBAAAA,MAAAA;;;;AAM9B,MAAMM,iBAAiBN,uBAAAA,MAAAA;;;wCAEFD,MAAMQ,QAAQ,KAAG,MAAA,0iHAAA;AAItC,MAAaC,eAA2C,EACtDC,OACAC,cACAC,uBACAC,uBAAuB,GACvBC,sBACAC,eACD;CACC,MAAM,CAACC,SAASC,cAAcd,SAAS,MAAA;CAEvC,MAAMe,sBAAgB;AACpBJ,yBAAuB,CAACE,QAAAA;AACxBC,aAAW,CAACD,QAAAA;;CAGd,MAAMG,wBAAkB;EACtB,MAAMC,YAAYlB,SAASmB,IACzBN,WACCO,UAAU,CAAC,CAACA,SAAS,wBAAA,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,SAASyB,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,wBAAA,cAACL,aAAAA;EACQK;EACPsB,cAAcN,oBAAAA;EACAf;EACSC;IAEvB,wBAAA,cAACN,uBAAAA;EAAsB2B,cAAYvB;EAAOwB,aAAU;IACjDf,iBAAAA,CAAAA,CAAAA"}

package/dist/Loading/index.cjs

@@ -1,80 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_styles_module = require('./styles.module.cjs');
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let _emotion_react = require("@emotion/react");
-
-//#region src/Loading/index.tsx
-const Loading = ({ className }) => {
-	const { colors } = (0, _emotion_react.useTheme)();
-	const mode = (0, _codecademy_gamut_styles.useCurrentMode)();
-	const color1 = mode === "light" ? colors["gray-300"] : colors["navy-600"];
-	const color2 = mode === "light" ? colors["blue-800"] : colors["navy-200"];
-	return /* @__PURE__ */ react.createElement("svg", {
-		className: (0, classnames.default)(require_styles_module.default.loading, className),
-		"data-testid": "loading",
-		xmlns: "https://www.w3.org/2000/svg",
-		width: "123",
-		height: "98.7",
-		viewBox: "0 0 123 98.7"
-	}, /* @__PURE__ */ react.createElement("title", null, "Loading Icon"), /* @__PURE__ */ react.createElement("path", {
-		className: (0, classnames.default)(require_styles_module.default.path, require_styles_module.default.c),
-		stroke: color1,
-		fill: "none",
-		strokeMiterlimit: "10",
-		d: "M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7"
-	}), /* @__PURE__ */ react.createElement("path", {
-		className: (0, classnames.default)(require_styles_module.default.path, require_styles_module.default.underline),
-		stroke: color1,
-		fill: "none",
-		strokeMiterlimit: "10",
-		d: "M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28"
-	}), /* @__PURE__ */ react.createElement("path", {
-		className: (0, classnames.default)(require_styles_module.default.path, require_styles_module.default.outer),
-		stroke: color1,
-		fill: "none",
-		strokeMiterlimit: "10",
-		d: "M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7"
-	}), /* @__PURE__ */ react.createElement("path", {
-		className: (0, classnames.default)(require_styles_module.default.path, require_styles_module.default.inner),
-		stroke: color1,
-		fill: "none",
-		strokeMiterlimit: "10",
-		d: "M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7"
-	}), /* @__PURE__ */ react.createElement("path", {
-		className: (0, classnames.default)(require_styles_module.default.pathTwo, require_styles_module.default.c),
-		stroke: color2,
-		fill: "none",
-		strokeWidth: "3",
-		strokeMiterlimit: "10",
-		d: "M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7"
-	}), /* @__PURE__ */ react.createElement("path", {
-		className: (0, classnames.default)(require_styles_module.default.pathTwo, require_styles_module.default.underline),
-		stroke: color2,
-		fill: "none",
-		strokeWidth: "3",
-		strokeMiterlimit: "10",
-		d: "M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28"
-	}), /* @__PURE__ */ react.createElement("path", {
-		className: (0, classnames.default)(require_styles_module.default.pathTwo, require_styles_module.default.outer),
-		stroke: color2,
-		fill: "none",
-		strokeWidth: "3",
-		strokeMiterlimit: "10",
-		d: "M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7"
-	}), /* @__PURE__ */ react.createElement("path", {
-		className: (0, classnames.default)(require_styles_module.default.pathTwo, require_styles_module.default.inner),
-		stroke: color2,
-		fill: "none",
-		strokeWidth: "3",
-		strokeMiterlimit: "10",
-		d: "M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7"
-	}));
-};
-
-//#endregion
-exports.Loading = Loading;
-//# sourceMappingURL=index.cjs.map

package/dist/Loading/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["useCurrentMode","useTheme","cx","React","styles","Loading","className","colors","mode","color1","color2","icon","svg","loading","data-testid","xmlns","width","height","viewBox","title","path","c","stroke","fill","strokeMiterlimit","d","underline","outer","inner","pathTwo","strokeWidth"],"sources":["../../src/Loading/index.tsx"],"sourcesContent":["import { useCurrentMode } from '@codecademy/gamut-styles';\nimport { useTheme } from '@emotion/react';\nimport cx from 'classnames';\nimport * as React from 'react';\n\n// eslint-disable-next-line gamut/no-css-standalone\nimport styles from './styles.module.scss';\n\nexport type LoadingProps = {\n  className?: string;\n};\n\nexport const Loading: React.FC<LoadingProps> = ({ className }) => {\n  const { colors } = useTheme();\n  const mode = useCurrentMode();\n  const color1 = mode === 'light' ? colors['gray-300'] : colors['navy-600'];\n  const color2 = mode === 'light' ? colors['blue-800'] : colors['navy-200'];\n\n  const icon = (\n    <svg\n      className={cx(styles.loading, className)}\n      data-testid=\"loading\"\n      xmlns=\"https://www.w3.org/2000/svg\"\n      width=\"123\"\n      height=\"98.7\"\n      viewBox=\"0 0 123 98.7\"\n    >\n      <title>Loading Icon</title>\n      <path\n        className={cx(styles.path, styles.c)}\n        stroke={color1}\n        fill=\"none\"\n        strokeMiterlimit=\"10\"\n        d=\"M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7\"\n      />\n      <path\n        className={cx(styles.path, styles.underline)}\n        stroke={color1}\n        fill=\"none\"\n        strokeMiterlimit=\"10\"\n        d=\"M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28\"\n      />\n      <path\n        className={cx(styles.path, styles.outer)}\n        stroke={color1}\n        fill=\"none\"\n        strokeMiterlimit=\"10\"\n        d=\"M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7\"\n      />\n      <path\n        className={cx(styles.path, styles.inner)}\n        stroke={color1}\n        fill=\"none\"\n        strokeMiterlimit=\"10\"\n        d=\"M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7\"\n      />\n      <path\n        className={cx(styles.pathTwo, styles.c)}\n        stroke={color2}\n        fill=\"none\"\n        strokeWidth=\"3\"\n        strokeMiterlimit=\"10\"\n        d=\"M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7\"\n      />\n      <path\n        className={cx(styles.pathTwo, styles.underline)}\n        stroke={color2}\n        fill=\"none\"\n        strokeWidth=\"3\"\n        strokeMiterlimit=\"10\"\n        d=\"M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28\"\n      />\n      <path\n        className={cx(styles.pathTwo, styles.outer)}\n        stroke={color2}\n        fill=\"none\"\n        strokeWidth=\"3\"\n        strokeMiterlimit=\"10\"\n        d=\"M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7\"\n      />\n      <path\n        className={cx(styles.pathTwo, styles.inner)}\n        stroke={color2}\n        fill=\"none\"\n        strokeWidth=\"3\"\n        strokeMiterlimit=\"10\"\n        d=\"M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7\"\n      />\n    </svg>\n  );\n\n  return icon;\n};\n"],"mappings":";;;;;;;;;;AAYA,MAAaK,WAAmC,EAAEC,gBAAW;CAC3D,MAAM,EAAEC,yCAAWN;CACnB,MAAMO,qDAAOR;CACb,MAAMS,SAASD,SAAS,UAAUD,OAAO,cAAcA,OAAO;CAC9D,MAAMG,SAASF,SAAS,UAAUD,OAAO,cAAcA,OAAO;AA2E9D,QAxEE,sBAAA,cAACK,OAAAA;EACCN,mCAAcF,8BAAOS,SAASP,UAAAA;EAC9BQ,eAAY;EACZC,OAAM;EACNC,OAAM;EACNC,QAAO;EACPC,SAAQ;IAER,sBAAA,cAACC,SAAAA,MAAM,eAAA,EACP,sBAAA,cAACC,QAAAA;EACCd,mCAAcF,8BAAOgB,MAAMhB,8BAAOiB,EAAC;EACnCC,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,8BAAOgB,MAAMhB,8BAAOsB,UAAS;EAC3CJ,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,8BAAOgB,MAAMhB,8BAAOuB,MAAK;EACvCL,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,8BAAOgB,MAAMhB,8BAAOwB,MAAK;EACvCN,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,8BAAOyB,SAASzB,8BAAOiB,EAAC;EACtCC,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,8BAAOyB,SAASzB,8BAAOsB,UAAS;EAC9CJ,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,8BAAOyB,SAASzB,8BAAOuB,MAAK;EAC1CL,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,8BAAOyB,SAASzB,8BAAOwB,MAAK;EAC1CN,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE"}

package/dist/Loading/index.d.cts

@@ -1,10 +0,0 @@
-import * as React$1 from "react";
-
-//#region src/Loading/index.d.ts
-type LoadingProps = {
-  className?: string;
-};
-declare const Loading: React$1.FC<LoadingProps>;
-//#endregion
-export { Loading, LoadingProps };
-//# sourceMappingURL=index.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/Loading/index.tsx"],"sourcesContent":[],"mappings":";;;KAQY,YAAA;;AAAZ,CAAA;AAIa,cAAA,OAAkB,EAAT,OAAA,CAAM,EAAG,CAAA,YAAH,CAAE"}

package/dist/Loading/index.d.mts

@@ -1,10 +0,0 @@
-import * as React$1 from "react";
-
-//#region src/Loading/index.d.ts
-type LoadingProps = {
-  className?: string;
-};
-declare const Loading: React$1.FC<LoadingProps>;
-//#endregion
-export { Loading, LoadingProps };
-//# sourceMappingURL=index.d.mts.map

package/dist/Loading/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/Loading/index.tsx"],"sourcesContent":[],"mappings":";;;KAQY,YAAA;;AAAZ,CAAA;AAIa,cAAA,OAAkB,EAAT,OAAA,CAAM,EAAG,CAAA,YAAH,CAAE"}