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

package/dist/ListSection/index.js

@@ -1,64 +1,50 @@
-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 * 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.js.map

package/dist/ListSection/index.js.map

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

@@ -0,0 +1,81 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let _emotion_react = require("@emotion/react");
+let src_Loading_styles_module_scss = require("./styles.module.scss");
+src_Loading_styles_module_scss = require_runtime.__toESM(src_Loading_styles_module_scss);
+
+//#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)(src_Loading_styles_module_scss.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)(src_Loading_styles_module_scss.default.path, src_Loading_styles_module_scss.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)(src_Loading_styles_module_scss.default.path, src_Loading_styles_module_scss.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)(src_Loading_styles_module_scss.default.path, src_Loading_styles_module_scss.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)(src_Loading_styles_module_scss.default.path, src_Loading_styles_module_scss.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)(src_Loading_styles_module_scss.default.pathTwo, src_Loading_styles_module_scss.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)(src_Loading_styles_module_scss.default.pathTwo, src_Loading_styles_module_scss.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)(src_Loading_styles_module_scss.default.pathTwo, src_Loading_styles_module_scss.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)(src_Loading_styles_module_scss.default.pathTwo, src_Loading_styles_module_scss.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

@@ -0,0 +1 @@
+{"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,uCAAOS,SAASP,UAAAA;EAC9BQ,eAAY;EACZC,OAAM;EACNC,OAAM;EACNC,QAAO;EACPC,SAAQ;IAER,sBAAA,cAACC,SAAAA,MAAM,eAAA,EACP,sBAAA,cAACC,QAAAA;EACCd,mCAAcF,uCAAOgB,MAAMhB,uCAAOiB,EAAC;EACnCC,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,uCAAOgB,MAAMhB,uCAAOsB,UAAS;EAC3CJ,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,uCAAOgB,MAAMhB,uCAAOuB,MAAK;EACvCL,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,uCAAOgB,MAAMhB,uCAAOwB,MAAK;EACvCN,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,uCAAOyB,SAASzB,uCAAOiB,EAAC;EACtCC,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,uCAAOyB,SAASzB,uCAAOsB,UAAS;EAC9CJ,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,uCAAOyB,SAASzB,uCAAOuB,MAAK;EAC1CL,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,sBAAA,cAACL,QAAAA;EACCd,mCAAcF,uCAAOyB,SAASzB,uCAAOwB,MAAK;EAC1CN,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE"}

package/dist/Loading/index.d.cts

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/Loading/index.tsx"],"mappings":";;;KAQY,YAAA;EACV,SAAA;AAAA;AAAA,cAGW,OAAA,EAAS,OAAA,CAAM,EAAA,CAAG,YAAA"}

package/dist/Loading/index.d.ts

@@ -1,5 +1,10 @@
-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 };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Loading/index.tsx"],"mappings":";;;KAQY,YAAA;EACV,SAAA;AAAA;AAAA,cAGW,OAAA,EAAS,OAAA,CAAM,EAAA,CAAG,YAAA"}

package/dist/Loading/index.js

@@ -1,82 +1,77 @@
-import { useCurrentMode } from '@codecademy/gamut-styles';
-import { useTheme } from '@emotion/react';
-import cx from 'classnames';
-import * as React from 'react';
+import { useCurrentMode } from "@codecademy/gamut-styles";
+import * as React$1 from "react";
+import cx from "classnames";
+import { useTheme } from "@emotion/react";
+import styles from "./styles.module.scss";
 
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles.module.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Loading = ({
-  className
-}) => {
-  const {
-    colors
-  } = useTheme();
-  const mode = useCurrentMode();
-  const color1 = mode === 'light' ? colors['gray-300'] : colors['navy-600'];
-  const color2 = mode === 'light' ? colors['blue-800'] : colors['navy-200'];
-  const icon = /*#__PURE__*/_jsxs("svg", {
-    className: cx(styles.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__*/_jsx("title", {
-      children: "Loading Icon"
-    }), /*#__PURE__*/_jsx("path", {
-      className: cx(styles.path, styles.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__*/_jsx("path", {
-      className: cx(styles.path, styles.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__*/_jsx("path", {
-      className: cx(styles.path, styles.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__*/_jsx("path", {
-      className: cx(styles.path, styles.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__*/_jsx("path", {
-      className: cx(styles.pathTwo, styles.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__*/_jsx("path", {
-      className: cx(styles.pathTwo, styles.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__*/_jsx("path", {
-      className: cx(styles.pathTwo, styles.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__*/_jsx("path", {
-      className: cx(styles.pathTwo, styles.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"
-    })]
-  });
-  return icon;
-};
+//#region src/Loading/index.tsx
+const Loading = ({ className }) => {
+	const { colors } = useTheme();
+	const mode = useCurrentMode();
+	const color1 = mode === "light" ? colors["gray-300"] : colors["navy-600"];
+	const color2 = mode === "light" ? colors["blue-800"] : colors["navy-200"];
+	return /* @__PURE__ */ React$1.createElement("svg", {
+		className: cx(styles.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$1.createElement("title", null, "Loading Icon"), /* @__PURE__ */ React$1.createElement("path", {
+		className: cx(styles.path, styles.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$1.createElement("path", {
+		className: cx(styles.path, styles.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$1.createElement("path", {
+		className: cx(styles.path, styles.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$1.createElement("path", {
+		className: cx(styles.path, styles.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$1.createElement("path", {
+		className: cx(styles.pathTwo, styles.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$1.createElement("path", {
+		className: cx(styles.pathTwo, styles.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$1.createElement("path", {
+		className: cx(styles.pathTwo, styles.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$1.createElement("path", {
+		className: cx(styles.pathTwo, styles.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
+export { Loading };
+//# sourceMappingURL=index.js.map

package/dist/Loading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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,WAAWN,UAAAA;CACnB,MAAMO,OAAOR,gBAAAA;CACb,MAAMS,SAASD,SAAS,UAAUD,OAAO,cAAcA,OAAO;CAC9D,MAAMG,SAASF,SAAS,UAAUD,OAAO,cAAcA,OAAO;AA2E9D,QAxEE,wBAAA,cAACK,OAAAA;EACCN,WAAWJ,GAAGE,OAAOS,SAASP,UAAAA;EAC9BQ,eAAY;EACZC,OAAM;EACNC,OAAM;EACNC,QAAO;EACPC,SAAQ;IAER,wBAAA,cAACC,SAAAA,MAAM,eAAA,EACP,wBAAA,cAACC,QAAAA;EACCd,WAAWJ,GAAGE,OAAOgB,MAAMhB,OAAOiB,EAAC;EACnCC,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,wBAAA,cAACL,QAAAA;EACCd,WAAWJ,GAAGE,OAAOgB,MAAMhB,OAAOsB,UAAS;EAC3CJ,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,wBAAA,cAACL,QAAAA;EACCd,WAAWJ,GAAGE,OAAOgB,MAAMhB,OAAOuB,MAAK;EACvCL,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,wBAAA,cAACL,QAAAA;EACCd,WAAWJ,GAAGE,OAAOgB,MAAMhB,OAAOwB,MAAK;EACvCN,QAAQb;EACRc,MAAK;EACLC,kBAAiB;EACjBC,GAAE;KAEJ,wBAAA,cAACL,QAAAA;EACCd,WAAWJ,GAAGE,OAAOyB,SAASzB,OAAOiB,EAAC;EACtCC,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,wBAAA,cAACL,QAAAA;EACCd,WAAWJ,GAAGE,OAAOyB,SAASzB,OAAOsB,UAAS;EAC9CJ,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,wBAAA,cAACL,QAAAA;EACCd,WAAWJ,GAAGE,OAAOyB,SAASzB,OAAOuB,MAAK;EAC1CL,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE;KAEJ,wBAAA,cAACL,QAAAA;EACCd,WAAWJ,GAAGE,OAAOyB,SAASzB,OAAOwB,MAAK;EAC1CN,QAAQZ;EACRa,MAAK;EACLO,aAAY;EACZN,kBAAiB;EACjBC,GAAE"}

package/dist/LoadingCurriculumCard/index.cjs

@@ -0,0 +1,71 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_shared = require('../ContentGroupBaseCard/shared.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/LoadingCurriculumCard/index.tsx
+const LoadingCurriculumCard = ({ variant }) => /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Card, {
+	variant: variant || "beige",
+	borderRadius: "md",
+	borderColor: "border-primary",
+	overflow: "hidden",
+	display: "flex",
+	flexDirection: "column",
+	p: 0,
+	height: "100%",
+	width: "100%"
+}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+	flexDirection: "column",
+	textAlign: "left",
+	px: 12,
+	pt: 4,
+	pb: 0,
+	height: "100%"
+}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, { pt: 8 }, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Shimmer, {
+	width: "40%",
+	height: 12
+})), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+	mt: "auto",
+	pt: 16,
+	height: "100%",
+	flexDirection: "column",
+	justifyContent: "space-between"
+}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, { pb: 32 }, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Shimmer, {
+	width: "70%",
+	height: 20,
+	pt: 8
+}), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Shimmer, {
+	width: "62%",
+	height: 20,
+	pt: 8
+}), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Shimmer, {
+	width: "61%",
+	height: 20,
+	pt: 8
+})), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, null, /* @__PURE__ */ react.default.createElement(require_shared.Divider, null), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+	justifyContent: "space-between",
+	flexWrap: "wrap"
+}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Shimmer, {
+	width: 25,
+	height: 20,
+	pb: 8
+}), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Shimmer, {
+	width: 45,
+	height: 20,
+	pb: 8,
+	pl: 4
+})), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Shimmer, {
+	width: 25,
+	height: 20,
+	pb: 8
+}), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Shimmer, {
+	width: 45,
+	height: 20,
+	pb: 8,
+	pl: 4
+})))))));
+
+//#endregion
+exports.LoadingCurriculumCard = LoadingCurriculumCard;
+//# sourceMappingURL=index.cjs.map

package/dist/LoadingCurriculumCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","Card","FlexBox","Shimmer","React","Divider","LoadingCurriculumCard","variant","borderRadius","borderColor","overflow","display","flexDirection","p","height","width","textAlign","px","pt","pb","mt","justifyContent","flexWrap","pl"],"sources":["../../src/LoadingCurriculumCard/index.tsx"],"sourcesContent":["import { Box, Card, FlexBox, Shimmer } from '@codecademy/gamut';\nimport React from 'react';\n\nimport { Divider } from '../ContentGroupBaseCard/shared';\nimport { CardProps } from '../CurriculumCard';\n\ntype LoadingCurriculumCardProps = {\n  variant?: CardProps['variant'];\n};\n\nexport const LoadingCurriculumCard: React.FC<LoadingCurriculumCardProps> = ({\n  variant,\n}) => (\n  <Card\n    variant={variant || 'beige'}\n    borderRadius=\"md\"\n    borderColor=\"border-primary\"\n    overflow=\"hidden\"\n    display=\"flex\"\n    flexDirection=\"column\"\n    p={0}\n    height=\"100%\"\n    width=\"100%\"\n  >\n    <FlexBox\n      flexDirection=\"column\"\n      textAlign=\"left\"\n      px={12}\n      pt={4}\n      pb={0}\n      height=\"100%\"\n    >\n      <Box pt={8}>\n        <Shimmer width=\"40%\" height={12} />\n      </Box>\n      <FlexBox\n        mt=\"auto\"\n        pt={16}\n        height=\"100%\"\n        flexDirection=\"column\"\n        justifyContent=\"space-between\"\n      >\n        <Box pb={32}>\n          <Shimmer width=\"70%\" height={20} pt={8} />\n          <Shimmer width=\"62%\" height={20} pt={8} />\n          <Shimmer width=\"61%\" height={20} pt={8} />\n        </Box>\n        <Box>\n          <Divider />\n          <FlexBox justifyContent=\"space-between\" flexWrap=\"wrap\">\n            <FlexBox>\n              <Shimmer width={25} height={20} pb={8} />\n              <Shimmer width={45} height={20} pb={8} pl={4} />\n            </FlexBox>\n            <FlexBox>\n              <Shimmer width={25} height={20} pb={8} />\n              <Shimmer width={45} height={20} pb={8} pl={4} />\n            </FlexBox>\n          </FlexBox>\n        </Box>\n      </FlexBox>\n    </FlexBox>\n  </Card>\n);\n"],"mappings":";;;;;;;AAUA,MAAaM,yBAA+D,EAC1EC,cAEA,8BAAA,cAACN,wBAAAA;CACCM,SAASA,WAAW;CACpBC,cAAa;CACbC,aAAY;CACZC,UAAS;CACTC,SAAQ;CACRC,eAAc;CACdC,GAAG;CACHC,QAAO;CACPC,OAAM;GAEN,8BAAA,cAACb,2BAAAA;CACCU,eAAc;CACdI,WAAU;CACVC,IAAI;CACJC,IAAI;CACJC,IAAI;CACJL,QAAO;GAEP,8BAAA,cAACd,uBAAAA,EAAIkB,IAAI,KACP,8BAAA,cAACf,2BAAAA;CAAQY,OAAM;CAAMD,QAAQ;KAE/B,8BAAA,cAACZ,2BAAAA;CACCkB,IAAG;CACHF,IAAI;CACJJ,QAAO;CACPF,eAAc;CACdS,gBAAe;GAEf,8BAAA,cAACrB,uBAAAA,EAAImB,IAAI,MACP,8BAAA,cAAChB,2BAAAA;CAAQY,OAAM;CAAMD,QAAQ;CAAII,IAAI;IACrC,8BAAA,cAACf,2BAAAA;CAAQY,OAAM;CAAMD,QAAQ;CAAII,IAAI;IACrC,8BAAA,cAACf,2BAAAA;CAAQY,OAAM;CAAMD,QAAQ;CAAII,IAAI;KAEvC,8BAAA,cAAClB,uBAAAA,MACC,8BAAA,cAACK,wBAAAA,KAAAA,EACD,8BAAA,cAACH,2BAAAA;CAAQmB,gBAAe;CAAgBC,UAAS;GAC/C,8BAAA,cAACpB,2BAAAA,MACC,8BAAA,cAACC,2BAAAA;CAAQY,OAAO;CAAID,QAAQ;CAAIK,IAAI;IACpC,8BAAA,cAAChB,2BAAAA;CAAQY,OAAO;CAAID,QAAQ;CAAIK,IAAI;CAAGI,IAAI;KAE7C,8BAAA,cAACrB,2BAAAA,MACC,8BAAA,cAACC,2BAAAA;CAAQY,OAAO;CAAID,QAAQ;CAAIK,IAAI;IACpC,8BAAA,cAAChB,2BAAAA;CAAQY,OAAO;CAAID,QAAQ;CAAIK,IAAI;CAAGI,IAAI"}

package/dist/LoadingCurriculumCard/index.d.cts

@@ -0,0 +1,11 @@
+import { CardProps } from "../CurriculumCard/index.cjs";
+import React from "react";
+
+//#region src/LoadingCurriculumCard/index.d.ts
+type LoadingCurriculumCardProps = {
+  variant?: CardProps['variant'];
+};
+declare const LoadingCurriculumCard: React.FC<LoadingCurriculumCardProps>;
+//#endregion
+export { LoadingCurriculumCard };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/LoadingCurriculumCard/index.tsx"],"mappings":";;;;KAMK,0BAAA;EACH,OAAA,GAAU,SAAA;AAAA;AAAA,cAGC,qBAAA,EAAuB,KAAA,CAAM,EAAA,CAAG,0BAAA"}

package/dist/LoadingCurriculumCard/index.d.ts

@@ -1,7 +1,11 @@
-import React from 'react';
-import { CardProps } from '../CurriculumCard';
+import { CardProps } from "../CurriculumCard/index.js";
+import React from "react";
+
+//#region src/LoadingCurriculumCard/index.d.ts
 type LoadingCurriculumCardProps = {
-    variant?: CardProps['variant'];
+  variant?: CardProps['variant'];
 };
-export declare const LoadingCurriculumCard: React.FC<LoadingCurriculumCardProps>;
-export {};
+declare const LoadingCurriculumCard: React.FC<LoadingCurriculumCardProps>;
+//#endregion
+export { LoadingCurriculumCard };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/LoadingCurriculumCard/index.tsx"],"mappings":";;;;KAMK,0BAAA;EACH,OAAA,GAAU,SAAA;AAAA;AAAA,cAGC,qBAAA,EAAuB,KAAA,CAAM,EAAA,CAAG,0BAAA"}