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

package/dist/LearningOutcomeTile/types.d.ts

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

package/dist/LearningOutcomeTile/types.js

@@ -1,11 +1,10 @@
-export let Progress = /*#__PURE__*/function (Progress) {
-  Progress["notStarted"] = "notStarted";
-  Progress["inProgress"] = "inProgress";
-  Progress["completed"] = "completed";
-  return Progress;
+//#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;
 }({});
 
-/* The following interfaces define the props for the LearningOutcomeTile component based on different states of hover and popover.
-When hover is true, popover prop is required (either true or false).
-When hover is false, popover prop is optional and defaults to false.
-*/
+//#endregion
+export { Progress };

package/dist/ListSection/index.cjs

@@ -0,0 +1,56 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_PageSection_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);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/ListSection/index.tsx
+const UnstyledUnorderedList = _emotion_styled.default.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+const StyledListItem = _emotion_styled.default.li`
+  &:not(:last-child) {
+    margin-bottom: ${_codecademy_gamut_styles.theme.spacing[24]};
+  }
+`;
+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__ */ (0, react_jsx_runtime.jsx)(StyledListItem, { children: 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__ */ (0, react_jsx_runtime.jsx)(require_PageSection_index.PageSection, {
+		title,
+		footerButton: renderFooterButton(),
+		headerButton,
+		headerSecondaryButton,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledUnorderedList, {
+			"aria-label": title,
+			"aria-live": "polite",
+			children: renderListItems()
+		})
+	});
+};
+
+//#endregion
+exports.ListSection = ListSection;

package/dist/ListSection/index.d.cts

@@ -0,0 +1,25 @@
+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 };

package/dist/ListSection/index.d.ts

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

package/dist/ListSection/index.js

@@ -1,64 +1,53 @@
-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()
-    })
-  });
-};
+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 };

package/dist/Loading/index.cjs

@@ -0,0 +1,91 @@
+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 react_jsx_runtime = require("react/jsx-runtime");
+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__ */ (0, react_jsx_runtime.jsxs)("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",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: "Loading Icon" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("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__ */ (0, react_jsx_runtime.jsx)("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__ */ (0, react_jsx_runtime.jsx)("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__ */ (0, react_jsx_runtime.jsx)("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__ */ (0, react_jsx_runtime.jsx)("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__ */ (0, react_jsx_runtime.jsx)("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__ */ (0, react_jsx_runtime.jsx)("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__ */ (0, react_jsx_runtime.jsx)("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;

package/dist/Loading/index.d.cts

@@ -0,0 +1,9 @@
+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 };

package/dist/Loading/index.d.ts

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