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

package/dist/LearningOutcomeTile/index.js

@@ -1,93 +1,115 @@
-import { learningOutcomeLabels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
-import { LearningOutcomeLowAssessmentDot } from "../LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.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 { jsx, jsxs } from "react/jsx-runtime";
-import { SmallCheckIcon } from "@codecademy/gamut-icons";
-
-//#region src/LearningOutcomeTile/index.tsx
-const ProgressText = styled(Text)((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) }));
-const progressState = (percentComplete) => {
-	if (percentComplete === 0) return Progress.notStarted;
-	if (percentComplete > 0 && percentComplete < 100) return Progress.inProgress;
-	return Progress.completed;
+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;
 };
-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__ */ jsxs(Anchor, {
-		"aria-label": `${defaultAriaLabel} ${evaluationValuesLabel}`,
-		variant: "interface",
-		onClick,
-		"data-testid": `learning-outcome-tile-${id}`,
-		...popoverProps,
-		children: [/* @__PURE__ */ jsxs(Tile, {
-			hover,
-			progress,
-			size,
-			children: [isCompleted ? /* @__PURE__ */ jsx(SmallCheckIcon, {
-				size: isSmall ? 12 : 16,
-				textColor: "background-contrast"
-			}) : /* @__PURE__ */ jsx(ProgressText, {
-				progress,
-				isSmall,
-				children: `${percentCompleteValue}%`
-			}), showLowAssessmentDot && /* @__PURE__ */ jsx(LearningOutcomeLowAssessmentDot, {
-				position: "absolute",
-				top: "-20%",
-				right: "-20%",
-				hasBorder: true
-			})]
-		}), isOpen && /* @__PURE__ */ jsx(LearningOutcomePopover, {
-			activeElRef,
-			horizontalOffset: isSmall && isCompleted ? 159 : isSmall ? 153 : 150,
-			id: `${id}-popover`,
-			isOpen,
-			learningOutcomeDetails
-		})]
-	});
-};
-
-//#endregion
-export { LearningOutcomeTile, progressState };
+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
+    })]
+  });
+};

package/dist/LearningOutcomeTile/types.d.ts

@@ -1,46 +1,47 @@
-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",
+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;
 }
-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;
 }
-interface LearningOutcomePopoverDetailsProps {
-  id: string;
-  level: LearningOutcomeLevels;
-  outcome: string;
-  percentComplete: number | undefined | null;
-  latestScore?: number | undefined | null;
-  highestScore?: 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 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;
 }
-type LearningOutcomeTileProps = {
-  onClick?: () => void;
-  size?: SizeType;
+export type LearningOutcomeTileProps = {
+    onClick?: () => void;
+    size?: SizeType;
 } & (WithHoverAndWithPopover | WithHoverAndWithoutPopover | WithoutHoverAndWithoutPopover);
-//#endregion
-export { LearningOutcomePopoverDetailsProps, LearningOutcomeTileProps, Progress };
+export {};

package/dist/LearningOutcomeTile/types.js

@@ -1,10 +1,11 @@
-//#region src/LearningOutcomeTile/types.ts
-let Progress = /* @__PURE__ */ function(Progress$1) {
-	Progress$1["notStarted"] = "notStarted";
-	Progress$1["inProgress"] = "inProgress";
-	Progress$1["completed"] = "completed";
-	return Progress$1;
+export let Progress = /*#__PURE__*/function (Progress) {
+  Progress["notStarted"] = "notStarted";
+  Progress["inProgress"] = "inProgress";
+  Progress["completed"] = "completed";
+  return Progress;
 }({});
 
-//#endregion
-export { 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.
+*/

package/dist/ListSection/index.d.ts

@@ -1,26 +1,21 @@
-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;
+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;
 }
-declare const ListSection: React$1.FC<ListSectionProps>;
-//#endregion
-export { ListSection, ListSectionProps };
+export declare const ListSection: React.FC<ListSectionProps>;

package/dist/ListSection/index.js

@@ -1,53 +1,64 @@
-import { PageSection } from "../PageSection/index.js";
-import { theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { Children, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/ListSection/index.tsx
-const UnstyledUnorderedList = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-const StyledListItem = styled.li`
-  &:not(:last-child) {
-    margin-bottom: ${theme.spacing[24]};
-  }
-`;
-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__ */ jsx(StyledListItem, { children: 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__ */ jsx(PageSection, {
-		title,
-		footerButton: renderFooterButton(),
-		headerButton,
-		headerSecondaryButton,
-		children: /* @__PURE__ */ jsx(UnstyledUnorderedList, {
-			"aria-label": title,
-			"aria-live": "polite",
-			children: renderListItems()
-		})
-	});
-};
-
-//#endregion
-export { ListSection };
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { theme } from '@codecademy/gamut-styles';
+import { Children, useState } from 'react';
+import * as React from 'react';
+import { PageSection } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+const UnstyledUnorderedList = /*#__PURE__*/_styled("ul", {
+  target: "e1rp91k11",
+  label: "UnstyledUnorderedList"
+})(process.env.NODE_ENV === "production" ? {
+  name: "v5al3",
+  styles: "list-style:none;padding:0;margin:0"
+} : {
+  name: "v5al3",
+  styles: "list-style:none;padding:0;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MaXN0U2VjdGlvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkJ1QyIsImZpbGUiOiIuLi8uLi9zcmMvTGlzdFNlY3Rpb24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENoaWxkcmVuLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgUGFnZVNlY3Rpb24sIFNlY3Rpb25CdXR0b24gfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGlzdFNlY3Rpb25Qcm9wcyBleHRlbmRzIFdpdGhDaGlsZHJlblByb3Age1xuICB0aXRsZTogc3RyaW5nO1xuICBoZWFkZXJCdXR0b24/OiBTZWN0aW9uQnV0dG9uO1xuICBoZWFkZXJTZWNvbmRhcnlCdXR0b24/OiBTZWN0aW9uQnV0dG9uO1xuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHRvIGJlIGluaXRhbGx5IGRpc3BsYXllZFxuICAgKlxuICAgKiBAcmVtYXJrc1xuICAgKiBJZiB0aGUgaW5pdGlhbCBkaXNwbGF5IGFtb3VudCBtYXRjaGVzIHRoZSBudW1iZXIgb2YgbGlzdCBpdGVtcywgU2hvdyBBbGwgYnV0dG9uIHdpbGwgbm90IGFwcGVhci5cbiAgICovXG4gIGluaXRpYWxEaXNwbGF5QW1vdW50PzogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBPcHRpb25hbCBjYWxsYmFjayBmdW5jdGlvbiB0aGF0IHdpbGwgYmUgY2FsbGVkIHdoZW4gdGhlIHVzZXIgY2xpY2tzIHRoZSBcIlNob3cgQWxsXCIgLyBcIlNob3cgbGVzc1wiIGJ1dHRvbi5cbiAgICogVGhpcyBpcyB1c3VhbGx5IHVzZWQgZm9yIHRoaW5ncyBsaWtlIG1ldHJpY3MgdHJhY2tpbmcuXG4gICAqL1xuICBvblNob3dBbGxPckxlc3NDbGljaz86IChzaG93QWxsOiBib29sZWFuKSA9PiB2b2lkO1xufVxuXG5jb25zdCBVbnN0eWxlZFVub3JkZXJlZExpc3QgPSBzdHlsZWQudWxgXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMDtcbmA7XG5cbmNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkLmxpYFxuICAmOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgIG1hcmdpbi1ib3R0b206ICR7dGhlbWUuc3BhY2luZ1syNF19O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgTGlzdFNlY3Rpb246IFJlYWN0LkZDPExpc3RTZWN0aW9uUHJvcHM+ID0gKHtcbiAgdGl0bGUsXG4gIGhlYWRlckJ1dHRvbixcbiAgaGVhZGVyU2Vjb25kYXJ5QnV0dG9uLFxuICBpbml0aWFsRGlzcGxheUFtb3VudCA9IDMsXG4gIG9uU2hvd0FsbE9yTGVzc0NsaWNrLFxuICBjaGlsZHJlbixcbn0pID0+IHtcbiAgY29uc3QgW3Nob3dBbGwsIHNldFNob3dBbGxdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGhhbmRsZVNob3dBbGwgPSAoKSA9PiB7XG4gICAgb25TaG93QWxsT3JMZXNzQ2xpY2s/Lighc2hvd0FsbCk7XG4gICAgc2V0U2hvd0FsbCghc2hvd0FsbCk7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyTGlzdEl0ZW1zID0gKCkgPT4ge1xuICAgIGNvbnN0IGxpc3RJdGVtcyA9IENoaWxkcmVuLm1hcChcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgKGNoaWxkKSA9PiAhIWNoaWxkICYmIDxTdHlsZWRMaXN0SXRlbT57Y2hpbGR9PC9TdHlsZWRMaXN0SXRlbT5cbiAgICApPy5maWx0ZXIoQm9vbGVhbik7XG5cbiAgICBpZiAoIWxpc3RJdGVtcykgcmV0dXJuIG51bGw7XG4gICAgaWYgKHNob3dBbGwpIHJldHVybiBsaXN0SXRlbXM7XG4gICAgcmV0dXJuIGxpc3RJdGVtcy5zbGljZSgwLCBpbml0aWFsRGlzcGxheUFtb3VudCk7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyRm9vdGVyQnV0dG9uID0gKCkgPT4ge1xuICAgIGlmIChDaGlsZHJlbi50b0FycmF5KGNoaWxkcmVuKS5sZW5ndGggPD0gaW5pdGlhbERpc3BsYXlBbW91bnQpIHJldHVybiBudWxsO1xuICAgIGNvbnN0IGJ1dHRvblRleHQgPSBgU2hvdyAke3Nob3dBbGwgPyAnTGVzcycgOiAnQWxsJ31gO1xuICAgIHJldHVybiB7XG4gICAgICB0ZXh0OiBidXR0b25UZXh0LFxuICAgICAgb25DbGljazogaGFuZGxlU2hvd0FsbCxcbiAgICAgICdhcmlhLWxhYmVsJzogYCR7YnV0dG9uVGV4dH0sICR7dGl0bGV9YCxcbiAgICB9O1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFBhZ2VTZWN0aW9uXG4gICAgICB0aXRsZT17dGl0bGV9XG4gICAgICBmb290ZXJCdXR0b249e3JlbmRlckZvb3RlckJ1dHRvbigpfVxuICAgICAgaGVhZGVyQnV0dG9uPXtoZWFkZXJCdXR0b259XG4gICAgICBoZWFkZXJTZWNvbmRhcnlCdXR0b249e2hlYWRlclNlY29uZGFyeUJ1dHRvbn1cbiAgICA+XG4gICAgICA8VW5zdHlsZWRVbm9yZGVyZWRMaXN0IGFyaWEtbGFiZWw9e3RpdGxlfSBhcmlhLWxpdmU9XCJwb2xpdGVcIj5cbiAgICAgICAge3JlbmRlckxpc3RJdGVtcygpfVxuICAgICAgPC9VbnN0eWxlZFVub3JkZXJlZExpc3Q+XG4gICAgPC9QYWdlU2VjdGlvbj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledListItem = /*#__PURE__*/_styled("li", {
+  target: "e1rp91k10",
+  label: "StyledListItem"
+})("&:not(:last-child){margin-bottom:", theme.spacing[24], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MaXN0U2VjdGlvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNnQyIsImZpbGUiOiIuLi8uLi9zcmMvTGlzdFNlY3Rpb24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENoaWxkcmVuLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgUGFnZVNlY3Rpb24sIFNlY3Rpb25CdXR0b24gfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGlzdFNlY3Rpb25Qcm9wcyBleHRlbmRzIFdpdGhDaGlsZHJlblByb3Age1xuICB0aXRsZTogc3RyaW5nO1xuICBoZWFkZXJCdXR0b24/OiBTZWN0aW9uQnV0dG9uO1xuICBoZWFkZXJTZWNvbmRhcnlCdXR0b24/OiBTZWN0aW9uQnV0dG9uO1xuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHRvIGJlIGluaXRhbGx5IGRpc3BsYXllZFxuICAgKlxuICAgKiBAcmVtYXJrc1xuICAgKiBJZiB0aGUgaW5pdGlhbCBkaXNwbGF5IGFtb3VudCBtYXRjaGVzIHRoZSBudW1iZXIgb2YgbGlzdCBpdGVtcywgU2hvdyBBbGwgYnV0dG9uIHdpbGwgbm90IGFwcGVhci5cbiAgICovXG4gIGluaXRpYWxEaXNwbGF5QW1vdW50PzogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBPcHRpb25hbCBjYWxsYmFjayBmdW5jdGlvbiB0aGF0IHdpbGwgYmUgY2FsbGVkIHdoZW4gdGhlIHVzZXIgY2xpY2tzIHRoZSBcIlNob3cgQWxsXCIgLyBcIlNob3cgbGVzc1wiIGJ1dHRvbi5cbiAgICogVGhpcyBpcyB1c3VhbGx5IHVzZWQgZm9yIHRoaW5ncyBsaWtlIG1ldHJpY3MgdHJhY2tpbmcuXG4gICAqL1xuICBvblNob3dBbGxPckxlc3NDbGljaz86IChzaG93QWxsOiBib29sZWFuKSA9PiB2b2lkO1xufVxuXG5jb25zdCBVbnN0eWxlZFVub3JkZXJlZExpc3QgPSBzdHlsZWQudWxgXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMDtcbmA7XG5cbmNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkLmxpYFxuICAmOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgIG1hcmdpbi1ib3R0b206ICR7dGhlbWUuc3BhY2luZ1syNF19O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgTGlzdFNlY3Rpb246IFJlYWN0LkZDPExpc3RTZWN0aW9uUHJvcHM+ID0gKHtcbiAgdGl0bGUsXG4gIGhlYWRlckJ1dHRvbixcbiAgaGVhZGVyU2Vjb25kYXJ5QnV0dG9uLFxuICBpbml0aWFsRGlzcGxheUFtb3VudCA9IDMsXG4gIG9uU2hvd0FsbE9yTGVzc0NsaWNrLFxuICBjaGlsZHJlbixcbn0pID0+IHtcbiAgY29uc3QgW3Nob3dBbGwsIHNldFNob3dBbGxdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGhhbmRsZVNob3dBbGwgPSAoKSA9PiB7XG4gICAgb25TaG93QWxsT3JMZXNzQ2xpY2s/Lighc2hvd0FsbCk7XG4gICAgc2V0U2hvd0FsbCghc2hvd0FsbCk7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyTGlzdEl0ZW1zID0gKCkgPT4ge1xuICAgIGNvbnN0IGxpc3RJdGVtcyA9IENoaWxkcmVuLm1hcChcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgKGNoaWxkKSA9PiAhIWNoaWxkICYmIDxTdHlsZWRMaXN0SXRlbT57Y2hpbGR9PC9TdHlsZWRMaXN0SXRlbT5cbiAgICApPy5maWx0ZXIoQm9vbGVhbik7XG5cbiAgICBpZiAoIWxpc3RJdGVtcykgcmV0dXJuIG51bGw7XG4gICAgaWYgKHNob3dBbGwpIHJldHVybiBsaXN0SXRlbXM7XG4gICAgcmV0dXJuIGxpc3RJdGVtcy5zbGljZSgwLCBpbml0aWFsRGlzcGxheUFtb3VudCk7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyRm9vdGVyQnV0dG9uID0gKCkgPT4ge1xuICAgIGlmIChDaGlsZHJlbi50b0FycmF5KGNoaWxkcmVuKS5sZW5ndGggPD0gaW5pdGlhbERpc3BsYXlBbW91bnQpIHJldHVybiBudWxsO1xuICAgIGNvbnN0IGJ1dHRvblRleHQgPSBgU2hvdyAke3Nob3dBbGwgPyAnTGVzcycgOiAnQWxsJ31gO1xuICAgIHJldHVybiB7XG4gICAgICB0ZXh0OiBidXR0b25UZXh0LFxuICAgICAgb25DbGljazogaGFuZGxlU2hvd0FsbCxcbiAgICAgICdhcmlhLWxhYmVsJzogYCR7YnV0dG9uVGV4dH0sICR7dGl0bGV9YCxcbiAgICB9O1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFBhZ2VTZWN0aW9uXG4gICAgICB0aXRsZT17dGl0bGV9XG4gICAgICBmb290ZXJCdXR0b249e3JlbmRlckZvb3RlckJ1dHRvbigpfVxuICAgICAgaGVhZGVyQnV0dG9uPXtoZWFkZXJCdXR0b259XG4gICAgICBoZWFkZXJTZWNvbmRhcnlCdXR0b249e2hlYWRlclNlY29uZGFyeUJ1dHRvbn1cbiAgICA+XG4gICAgICA8VW5zdHlsZWRVbm9yZGVyZWRMaXN0IGFyaWEtbGFiZWw9e3RpdGxlfSBhcmlhLWxpdmU9XCJwb2xpdGVcIj5cbiAgICAgICAge3JlbmRlckxpc3RJdGVtcygpfVxuICAgICAgPC9VbnN0eWxlZFVub3JkZXJlZExpc3Q+XG4gICAgPC9QYWdlU2VjdGlvbj5cbiAgKTtcbn07XG4iXX0= */"));
+export 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__*/_jsx(StyledListItem, {
+      children: 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__*/_jsx(PageSection, {
+    title: title,
+    footerButton: renderFooterButton(),
+    headerButton: headerButton,
+    headerSecondaryButton: headerSecondaryButton,
+    children: /*#__PURE__*/_jsx(UnstyledUnorderedList, {
+      "aria-label": title,
+      "aria-live": "polite",
+      children: renderListItems()
+    })
+  });
+};

package/dist/Loading/index.d.ts

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