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

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/index.cjs

@@ -1,110 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_index = require('../../AppHeader/AppHeaderElements/AppHeaderListItem/index.cjs');
-const require_index$1 = require('../../AppHeader/AppHeaderElements/AppHeaderSection/index.cjs');
-const require_consts = require('../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/consts.cjs');
-const require_MarketingBanner = require('../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/MarketingBanner.cjs');
-const require_index$2 = require('../../AppHeader/AppHeaderElements/AppHeaderLinkSections/index.cjs');
-const require_consts$1 = require('../../AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.cjs');
-const require_elements = require('./elements.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-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");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeaderMobile/AppHeaderSubMenuMobile/index.tsx
-const StyledAnchor = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)((0, _codecademy_gamut_styles.css)({
-	alignItems: `center`,
-	display: `flex`,
-	width: "calc(100% - 64px)",
-	py: 8,
-	mt: 0,
-	mb: 16
-}));
-const BackgroundWrapper = (0, _emotion_styled.default)(_codecademy_gamut.Box)((0, _codecademy_gamut_styles.states)({ isNotCatalogOrResources: {
-	background: _codecademy_gamut_styles.theme.colors.white,
-	border: 1,
-	borderColor: "border-tertiary",
-	borderRadius: "lg",
-	padding: "16px",
-	mx: 16
-} }));
-const renderHeaderSection = (item, action, handleCloseSubMenu) => {
-	switch (item.type) {
-		case "catalog-dropdown": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.AppHeaderSection, {
-			navSections: require_consts.CATALOG_NAV_SECTIONS,
-			MarketingBanner: require_MarketingBanner.MarketingBanner,
-			isMobile: true,
-			handleClose: handleCloseSubMenu,
-			type: "catalog-dropdown",
-			isCoachingEnabled: item.isCoachingEnabled
-		});
-		case "resources-dropdown": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.AppHeaderSection, {
-			navSections: require_consts$1.RESOURCES_NAV_SECTIONS,
-			isMobile: true,
-			handleClose: handleCloseSubMenu,
-			type: "resources-dropdown"
-		});
-		default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AppHeaderLinkSections, {
-			action,
-			item,
-			mobile: true
-		});
-	}
-};
-const AppHeaderSubNavMobile = ({ action, handleCloseSubMenu, item }) => {
-	const mainUlWrapper = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		if (mainUlWrapper?.current) mainUlWrapper.current.focus();
-	}, []);
-	const isProfileMenu = item.type === "profile-dropdown";
-	const isCatalogOrResourcesMenu = item.type === "catalog-dropdown" || item.type === "resources-dropdown";
-	const renderBackButton = () => {
-		if (!isCatalogOrResourcesMenu) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.AppHeaderListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledAnchor, {
-			onClick: handleCloseSubMenu,
-			variant: "interface",
-			as: "button",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowLeftIcon, {
-				size: 24,
-				"aria-hidden": true
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-				pl: 8,
-				children: "Back"
-			})]
-		}) });
-		return null;
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackgroundWrapper, {
-		isNotCatalogOrResources: !isCatalogOrResourcesMenu,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.MobileUlWrapper, {
-			ref: mainUlWrapper,
-			tabIndex: -1,
-			children: [renderBackButton(), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.MobileSubMenuWrapper, {
-				handleClose: handleCloseSubMenu,
-				isMenuRole: isProfileMenu,
-				children: [!isCatalogOrResourcesMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-					as: "h1",
-					fontSize: 20,
-					mb: 16,
-					ml: 0,
-					children: isProfileMenu ? item.userDisplayName : item.text
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Menu, {
-					variant: "fixed",
-					mx: isCatalogOrResourcesMenu ? {
-						_: 16,
-						sm: 32
-					} : 0,
-					width: "auto",
-					bg: "transparent",
-					children: renderHeaderSection(item, action, handleCloseSubMenu)
-				})]
-			})]
-		})
-	});
-};
-
-//#endregion
-exports.AppHeaderSubNavMobile = AppHeaderSubNavMobile;

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/index.d.cts

@@ -1,12 +0,0 @@
-import { AppHeaderDropdownProps } from "../../AppHeader/AppHeaderElements/AppHeaderDropdown/index.cjs";
-import { AppHeaderCatalogDropdownProps } from "../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.cjs";
-import { AppHeaderResourceDropdownProps } from "../../AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.cjs";
-import * as React$1 from "react";
-
-//#region src/AppHeaderMobile/AppHeaderSubMenuMobile/index.d.ts
-type AppHeaderSubMenuMobileProps = (AppHeaderDropdownProps | AppHeaderCatalogDropdownProps | AppHeaderResourceDropdownProps) & {
-  handleCloseSubMenu: () => void;
-};
-declare const AppHeaderSubNavMobile: React$1.FC<AppHeaderSubMenuMobileProps>;
-//#endregion
-export { AppHeaderSubMenuMobileProps, AppHeaderSubNavMobile };

package/dist/AppHeaderMobile/AppHeaderSubMenuTarget/index.cjs

@@ -1,61 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Avatar_index = require('../../Avatar/index.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-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");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeaderMobile/AppHeaderSubMenuTarget/index.tsx
-const StyledAnchor = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)((0, _codecademy_gamut_styles.css)({
-	alignItems: "center",
-	display: "flex",
-	justifyContent: "space-between",
-	py: 16,
-	width: "100%"
-}));
-const StyledText = (0, _emotion_styled.default)(_codecademy_gamut.Text)((0, _codecademy_gamut_styles.css)({
-	ml: 16,
-	maxWidth: `70vw`,
-	overflow: `hidden`,
-	textOverflow: `ellipsis`
-}));
-const AppHeaderSubMenuRow = ({ item, openSubMenu }) => {
-	const getIcon = () => {
-		if (item.type !== "profile-dropdown") {
-			const Icon = item.icon;
-			return Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-				size: 24,
-				"aria-hidden": true
-			});
-		}
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar_index.Avatar, {
-			src: item.avatar,
-			alt: "User profile avatar",
-			disableDropshadow: true,
-			size: 24
-		});
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledAnchor, {
-		"aria-label": `Open ${item.text} navigation`,
-		"data-testid": item.dataTestId,
-		onClick: (event) => openSubMenu(event, item),
-		variant: "interface",
-		children: [
-			getIcon(),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, { children: item.type === "profile-dropdown" ? item.userDisplayName : item.text }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowChevronRightIcon, {
-				ml: "auto",
-				my: "auto",
-				size: 12,
-				"aria-hidden": true
-			})
-		]
-	});
-};
-
-//#endregion
-exports.AppHeaderSubMenuRow = AppHeaderSubMenuRow;

package/dist/AppHeaderMobile/index.cjs

@@ -1,194 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_HeaderHeightArea_index = require('../HeaderHeightArea/index.cjs');
-const require_elements = require('../AppHeader/shared/elements.cjs');
-const require_NotificationsContents = require('../Notifications/NotificationsContents.cjs');
-const require_useHeaderNotifications = require('../Notifications/useHeaderNotifications.cjs');
-const require_index = require('../AppHeader/AppHeaderElements/AppHeaderListItem/index.cjs');
-const require_useHeaderSearch = require('../AppHeader/Search/useHeaderSearch.cjs');
-const require_utils = require('../AppHeader/shared/utils.cjs');
-const require_index$1 = require('./AppHeaderMainMenuMobile/index.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-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");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeaderMobile/index.tsx
-const StyledOverlay = (0, _emotion_styled.default)(_codecademy_gamut.Overlay)((0, _codecademy_gamut_styles.css)({
-	display: {
-		_: `block`,
-		[require_elements.appHeaderMobileBreakpoint]: `none`
-	},
-	width: `100vw`,
-	height: `100vh`,
-	opacity: 1,
-	bg: `beige`,
-	position: `fixed`,
-	left: 0,
-	top: 0,
-	overflowX: `hidden`
-}));
-const StyledNavBar = _emotion_styled.default.ul((0, _codecademy_gamut_styles.css)({
-	display: `flex`,
-	padding: 0,
-	listStyle: `none`,
-	margin: 0,
-	width: `100%`,
-	alignItems: "center"
-}), (0, _codecademy_gamut_styles.states)({ center: { justifyContent: {
-	_: "center",
-	sm: "flex-start"
-} } }));
-const AppHeaderMobile = ({ action, items, notifications, search, redirectParam, isAnon, isEnterprise, isSimple, hideRightMenuButton, navigationMenuFormattedLabel }) => {
-	const [mobileMenuOpen, setMobileMenuOpen] = (0, react.useState)(void 0);
-	const [allowScroll, setAllowScroll] = (0, react.useState)(false);
-	const openButtonRef = (0, react.useRef)(null);
-	const closeButtonRef = (0, react.useRef)(null);
-	const [notificationsBell, notificationsView] = require_useHeaderNotifications.useHeaderNotifications({
-		settings: notifications,
-		Renderer: require_NotificationsContents.NotificationsContents
-	});
-	const [searchButton, searchPane] = require_useHeaderSearch.useHeaderSearch({ ...search });
-	const openMobileMenu = () => {
-		setMobileMenuOpen(true);
-		if (closeButtonRef.current) closeButtonRef.current.focus();
-	};
-	(0, react.useEffect)(() => {
-		if (mobileMenuOpen === false && openButtonRef.current) setTimeout(() => {
-			if (openButtonRef.current) openButtonRef.current.focus();
-		}, 0);
-	}, [mobileMenuOpen]);
-	const mapItemsToElement = (items$1, side, hideExtraItems) => {
-		const shouldHideItems = hideExtraItems === true && items$1.length > 1;
-		return items$1.map((item, index) => {
-			const isHidable = !(index + 1 === items$1.length) && shouldHideItems;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.AppHeaderListItem, {
-				ml: side === "right" && index === 0 ? "auto" : 0,
-				display: {
-					_: isHidable ? "none" : "flex",
-					xs: "flex"
-				},
-				children: require_utils.mapAppHeaderItemToElement({
-					action,
-					isStandalone: void 0,
-					isTeams: void 0,
-					item,
-					mobile: true,
-					redirectParam
-				})
-			}, item.id);
-		});
-	};
-	const right = [
-		...!isEnterprise ? [searchButton] : [],
-		...notificationsBell && !isEnterprise ? [notificationsBell] : [],
-		...items.right
-	];
-	const onItemType = (type) => {
-		if (type && (type === "catalog-dropdown" || type === "resources-dropdown")) setAllowScroll(true);
-		else setAllowScroll(false);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		!mobileMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HeaderHeightArea_index.HeaderHeightArea, {
-			display: {
-				_: `block`,
-				[require_elements.appHeaderMobileBreakpoint]: `none`
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.StyledAppBar, {
-				as: "nav",
-				"aria-label": "Main",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledNavBar, {
-					center: !!isSimple,
-					children: [
-						mapItemsToElement(items.left, "left"),
-						mapItemsToElement(right, "right", true),
-						!hideRightMenuButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.AppHeaderListItem, {
-							ml: right.length === 0 ? "auto" : 0,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
-								"aria-expanded": mobileMenuOpen,
-								"aria-label": navigationMenuFormattedLabel?.siteNavigation || "Site navigation",
-								tip: "Site\nnavigation",
-								tipProps: {
-									alignment: "bottom-center",
-									placement: "floating"
-								},
-								"data-testid": "header-mobile-menu",
-								onClick: () => {
-									openMobileMenu();
-								},
-								icon: _codecademy_gamut_icons.MenuIcon,
-								variant: "interface",
-								ref: openButtonRef
-							})
-						})
-					]
-				})
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledOverlay, {
-			clickOutsideCloses: true,
-			escapeCloses: true,
-			isOpen: mobileMenuOpen,
-			onRequestClose: () => setMobileMenuOpen(false),
-			allowScroll,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_styles.Background, {
-				bg: "beige",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_HeaderHeightArea_index.HeaderHeightArea, {
-					display: {
-						_: `block`,
-						[require_elements.appHeaderMobileBreakpoint]: `none`
-					},
-					as: "nav",
-					ariaLabel: "Main",
-					"data-testid": "header-mobile-menu-dropdown",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.StyledAppBar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledNavBar, { children: [mapItemsToElement(items.left, "left"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.AppHeaderListItem, {
-						ml: "auto",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
-							"aria-expanded": mobileMenuOpen,
-							onClick: () => {
-								setMobileMenuOpen(false);
-							},
-							icon: _codecademy_gamut_icons.MenuIcon,
-							"aria-label": navigationMenuFormattedLabel?.siteNavigation || "Site navigation",
-							tip: navigationMenuFormattedLabel?.siteNavigation || "Site navigation",
-							tipProps: {
-								alignment: "bottom-center",
-								placement: "floating"
-							},
-							ref: closeButtonRef
-						})
-					})] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-						background: _codecademy_gamut_styles.theme.colors.beige,
-						height: "auto",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.AppHeaderMainMenuMobile, {
-							action,
-							items: items.mainMenu,
-							getItemType: onItemType,
-							isAnon
-						})
-					})]
-				})
-			})
-		}),
-		!isEnterprise && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			display: {
-				_: `block`,
-				[require_elements.appHeaderMobileBreakpoint]: `none`
-			},
-			children: searchPane
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			display: {
-				_: `block`,
-				[require_elements.appHeaderMobileBreakpoint]: `none`
-			},
-			children: notificationsView
-		})
-	] });
-};
-
-//#endregion
-exports.AppHeaderMobile = AppHeaderMobile;

package/dist/AppHeaderMobile/index.d.cts

@@ -1,24 +0,0 @@
-import { AppHeaderAction, FormattedMobileAppHeaderItems } from "../AppHeader/shared/types.cjs";
-import { AppHeaderNotificationSettings } from "../Notifications/types.cjs";
-import { NavigationMenuFormattedLabel } from "../GlobalHeader/types.cjs";
-import { AppHeaderSearch } from "../AppHeader/Search/types.cjs";
-import * as React$1 from "react";
-
-//#region src/AppHeaderMobile/index.d.ts
-type AppHeaderMobileProps = AppHeaderAction & {
-  items: FormattedMobileAppHeaderItems;
-  notifications?: AppHeaderNotificationSettings;
-  redirectParam?: string;
-  search: AppHeaderSearch;
-  isAnon: boolean;
-  /**
-   * used to conditonally hide the default search icon and notification bell
-   */
-  isEnterprise?: boolean;
-  isSimple?: boolean;
-  hideRightMenuButton?: boolean;
-  navigationMenuFormattedLabel?: NavigationMenuFormattedLabel;
-};
-declare const AppHeaderMobile: React$1.FC<AppHeaderMobileProps>;
-//#endregion
-export { AppHeaderMobile, AppHeaderMobileProps };

package/dist/Avatar/index.cjs

@@ -1,52 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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");
-let _emotion_react = require("@emotion/react");
-
-//#region src/Avatar/index.tsx
-const Image = (0, _emotion_styled.default)("img", (0, _codecademy_gamut_styles.styledOptions)())(_codecademy_gamut_styles.system.layout);
-const AvatarContainer = _emotion_styled.default.div`
-  position: relative;
-  display: table;
-
-  ${({ disableDropshadow, mode }) => !disableDropshadow && _emotion_react.css`
-      &::before {
-        content: '';
-        position: absolute;
-        border-radius: 50%;
-        transform: scale(0.92);
-        transform-origin: bottom right;
-        height: 100%;
-        width: 100%;
-        background-color: ${mode ? mode === "light" ? _codecademy_gamut_styles.theme.colors.lightGreen : _codecademy_gamut_styles.theme.colors.green : _codecademy_gamut_styles.theme.colors["feedback-success"]};
-      }
-    `}
-
-  ${Image} {
-    position: relative;
-    border-radius: 50%;
-    object-fit: cover;
-
-    ${({ disableDropshadow }) => !disableDropshadow && _emotion_react.css`
-        transform: scale(0.92);
-        transform-origin: top left;
-      `}
-  }
-`;
-const Avatar = ({ mode, disableDropshadow, size = 24, className, ...avatarImageProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarContainer, {
-	className,
-	mode,
-	disableDropshadow,
-	"data-testid": "avatar-container",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, {
-		dimensions: size,
-		...avatarImageProps
-	})
-});
-
-//#endregion
-exports.Avatar = Avatar;

package/dist/Avatar/index.d.cts

@@ -1,40 +0,0 @@
-import { VisualTheme } from "@codecademy/gamut";
-import * as React$1 from "react";
-import { ResponsiveProp } from "@codecademy/variance";
-
-//#region src/Avatar/index.d.ts
-type AvatarImageProps = {
-  alt: string;
-  'aria-labelledby'?: never;
-} | {
-  alt?: never;
-  'aria-labelledby': string;
-};
-type AvatarBaseProps = {
-  /**
-   * path to image asset
-   */
-  src: string;
-  /**
-   * Disables the drop shadow entirely.
-   */
-  disableDropshadow?: boolean;
-  /**
-   * Size of the Avatar.
-   */
-  size?: ResponsiveProp<24 | 32 | 40 | 48 | 64 | 118> | '100%';
-  /**
-   * Overrides styles on the Avatar container.
-   */
-  className?: string;
-  /**
-   * @deprecated
-   * This will be determined automatically by the theme moving forward.
-   * Supplying it will determine the color of drop shadow.
-   */
-  mode?: VisualTheme;
-};
-type AvatarProps = AvatarBaseProps & AvatarImageProps;
-declare const Avatar: React$1.FC<AvatarProps>;
-//#endregion
-export { Avatar, AvatarBaseProps, AvatarImageProps, AvatarProps };

package/dist/AvatarChooser/index.cjs

@@ -1,99 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_Avatar_index = require('../Avatar/index.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-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/AvatarChooser/index.tsx
-const baseSize = 75;
-const smBreakpointSize = 120;
-const StyledAvatar = (0, _emotion_styled.default)(require_Avatar_index.Avatar)`
-  img {
-    width: ${(0, _codecademy_gamut_styles.pxRem)(baseSize)};
-    height: ${(0, _codecademy_gamut_styles.pxRem)(baseSize)};
-  }
-
-  ${_codecademy_gamut_styles.theme.breakpoints.sm} {
-    img {
-      width: ${(0, _codecademy_gamut_styles.pxRem)(smBreakpointSize)};
-      height: ${(0, _codecademy_gamut_styles.pxRem)(smBreakpointSize)};
-    }
-  }
-`;
-const HiddenInput = (0, _emotion_styled.default)(_codecademy_gamut.Input)`
-  display: none;
-`;
-const StyledFormError = (0, _emotion_styled.default)(_codecademy_gamut.FormError)`
-  position: initial;
-  text-align: center;
-`;
-const AvatarChooser = ({ src: existingSrc, onImageChanged, error, register, validate = validatePhotoUpload, name = "Avatar Photo" }) => {
-	const [imageSrc, setImageSrc] = (0, react.useState)(existingSrc);
-	const choosePhotoLabelRef = (0, react.useRef)(null);
-	const onChange = (0, react.useCallback)((event) => {
-		const imageFilelist = (event?.target)?.files;
-		const imageFile = imageFilelist?.[0];
-		if (imageFilelist) onImageChanged?.(imageFilelist);
-		if (imageFile) setImageSrc(URL.createObjectURL(imageFile));
-	}, [setImageSrc, onImageChanged]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-		alignItems: "center",
-		flexDirection: "column",
-		justifyContent: "center",
-		width: "fit-content",
-		maxWidth: (0, _codecademy_gamut_styles.pxRem)(120),
-		"aria-live": "polite",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAvatar, {
-				src: imageSrc,
-				disableDropshadow: true,
-				alt: "Avatar Photo"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.TextButton, {
-				mt: {
-					_: 4,
-					sm: 12
-				},
-				onClick: () => choosePhotoLabelRef.current?.click(),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					ref: choosePhotoLabelRef,
-					htmlFor: "avatar-chooser",
-					children: "Choose Photo"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenInput, {
-				type: "file",
-				id: "avatar-chooser",
-				"aria-invalid": Boolean(error),
-				name,
-				onChange,
-				...register?.(name, {
-					onChange,
-					validate,
-					required: false
-				})
-			}),
-			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFormError, {
-				role: "alert",
-				children: error
-			})
-		]
-	});
-};
-const validatePhotoUpload = (files) => {
-	const MAX_FILE_SIZE = 5242880;
-	const MAX_FILE_SIZE_IN_MB = 5;
-	const file = files?.item(0);
-	if (!file) return true;
-	const { type, size } = file;
-	if (!["image/jpeg", "image/png"].includes(type)) return "Please upload a jpeg or png file.";
-	if (size > MAX_FILE_SIZE) return `Sorry, we cannot accept files larger than ${MAX_FILE_SIZE_IN_MB} MB.`;
-	return true;
-};
-
-//#endregion
-exports.AvatarChooser = AvatarChooser;

package/dist/AvatarChooser/index.d.cts

@@ -1,15 +0,0 @@
-import { UseFormReturn, Validate } from "@codecademy/gamut";
-import * as React$1 from "react";
-
-//#region src/AvatarChooser/index.d.ts
-type AvatarChooserProps = {
-  src: string;
-  name?: string;
-  register?: UseFormReturn['register'];
-  onImageChanged?: (imageFileList: FileList) => void;
-  validate?: Validate<FileList, [FileList]> | Record<string, Validate<FileList, [FileList]>>;
-  error?: string;
-};
-declare const AvatarChooser: React$1.FC<AvatarChooserProps>;
-//#endregion
-export { AvatarChooser };

package/dist/BackToTopAnchor/index.cjs

@@ -1,33 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/BackToTopAnchor/index.tsx
-const BackToTopAnchor = ({ targetId, showIcon = true, size = "base", onClick, variant }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-		onClick: () => {
-			document.getElementById(targetId)?.focus({ preventScroll: true });
-			window.scrollTo({
-				top: 0,
-				behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? void 0 : "smooth"
-			});
-			onClick?.();
-		},
-		variant: variant || "interface",
-		fontSize: size === "small" ? 14 : 18,
-		alignSelf: "end",
-		mt: 64,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-			alignItems: "center",
-			justifyContent: "center",
-			children: [showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowUpIcon, {
-				size: 24,
-				mr: 8
-			}), " Back to top"]
-		})
-	});
-};
-
-//#endregion
-exports.BackToTopAnchor = BackToTopAnchor;

package/dist/BackToTopAnchor/index.d.cts

@@ -1,15 +0,0 @@
-//#region src/BackToTopAnchor/index.d.ts
-type BackToTopAnchorProps = {
-  /** The id of the element to scroll to */
-  targetId: string;
-  /** Whether to show the arrow icon */
-  showIcon?: boolean;
-  /** The size of the anchor */
-  size?: 'small' | 'base';
-  /**  The onClick here usually contains tracking data */
-  onClick?: () => void;
-  variant?: false | 'inline' | 'standard' | 'interface';
-};
-declare const BackToTopAnchor: React.FC<BackToTopAnchorProps>;
-//#endregion
-export { BackToTopAnchor };