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

package/dist/Grid/getCSSFromColumnCount.d.cts

@@ -0,0 +1,10 @@
+import { Column } from "@codecademy/gamut";
+import { ComponentProps } from "react";
+import { MediaQueryMap } from "@codecademy/variance";
+
+//#region src/Grid/getCSSFromColumnCount.d.ts
+type ColumnCountKeys = Extract<ComponentProps<typeof Column>['size'], number>;
+type ColumnCount = MediaQueryMap<ColumnCountKeys>;
+declare const getCSSFromColumnCount: (columnCount: ColumnCount, valueFunction: (value: number) => string) => MediaQueryMap<string>;
+//#endregion
+export { ColumnCount, ColumnCountKeys, getCSSFromColumnCount };

package/dist/Grid/getCSSFromColumnCount.d.ts

@@ -1,6 +1,10 @@
-import { Column } from '@codecademy/gamut';
-import { MediaQueryMap } from '@codecademy/variance';
-import { ComponentProps } from 'react';
-export type ColumnCountKeys = Extract<ComponentProps<typeof Column>['size'], number>;
-export type ColumnCount = MediaQueryMap<ColumnCountKeys>;
-export declare const getCSSFromColumnCount: (columnCount: ColumnCount, valueFunction: (value: number) => string) => MediaQueryMap<string>;
+import { Column } from "@codecademy/gamut";
+import { ComponentProps } from "react";
+import { MediaQueryMap } from "@codecademy/variance";
+
+//#region src/Grid/getCSSFromColumnCount.d.ts
+type ColumnCountKeys = Extract<ComponentProps<typeof Column>['size'], number>;
+type ColumnCount = MediaQueryMap<ColumnCountKeys>;
+declare const getCSSFromColumnCount: (columnCount: ColumnCount, valueFunction: (value: number) => string) => MediaQueryMap<string>;
+//#endregion
+export { ColumnCount, ColumnCountKeys, getCSSFromColumnCount };

package/dist/Grid/getCSSFromColumnCount.js

@@ -1,7 +1,9 @@
-export const getCSSFromColumnCount = (columnCount, valueFunction) => Object.keys(columnCount).reduce((acc, key) => {
-  const value = columnCount[key];
-  if (typeof value !== 'undefined') {
-    acc[key] = valueFunction(value);
-  }
-  return acc;
-}, {});
+//#region src/Grid/getCSSFromColumnCount.ts
+const getCSSFromColumnCount = (columnCount, valueFunction) => Object.keys(columnCount).reduce((acc, key) => {
+	const value = columnCount[key];
+	if (typeof value !== "undefined") acc[key] = valueFunction(value);
+	return acc;
+}, {});
+
+//#endregion
+export { getCSSFromColumnCount };

package/dist/Grid/index.cjs

@@ -0,0 +1,9 @@
+const require_getCSSFromColumnCount = require('./getCSSFromColumnCount.cjs');
+const require_Subgrid = require('./Subgrid.cjs');
+const require_GridCollapse = require('./GridCollapse.cjs');
+
+exports.GridCollapse = require_GridCollapse.GridCollapse;
+exports.Subgrid = require_Subgrid.Subgrid;
+exports.getCSSFromColumnCount = require_getCSSFromColumnCount.getCSSFromColumnCount;
+exports.getMediaQuery = require_GridCollapse.getMediaQuery;
+exports.subgridContext = require_Subgrid.subgridContext;

package/dist/Grid/index.d.cts

@@ -0,0 +1,4 @@
+import { ColumnCount, ColumnCountKeys, getCSSFromColumnCount } from "./getCSSFromColumnCount.cjs";
+import { Subgrid, subgridContext } from "./Subgrid.cjs";
+import { GridCollapse, GridCollapseProps, getMediaQuery } from "./GridCollapse.cjs";
+export { ColumnCount, ColumnCountKeys, GridCollapse, GridCollapseProps, Subgrid, getCSSFromColumnCount, getMediaQuery, subgridContext };

package/dist/Grid/index.d.ts

@@ -1,3 +1,4 @@
-export * from './Subgrid';
-export * from './GridCollapse';
-export * from './getCSSFromColumnCount';
+import { ColumnCount, ColumnCountKeys, getCSSFromColumnCount } from "./getCSSFromColumnCount.js";
+import { Subgrid, subgridContext } from "./Subgrid.js";
+import { GridCollapse, GridCollapseProps, getMediaQuery } from "./GridCollapse.js";
+export { ColumnCount, ColumnCountKeys, GridCollapse, GridCollapseProps, Subgrid, getCSSFromColumnCount, getMediaQuery, subgridContext };

package/dist/Grid/index.js

@@ -1,3 +1,5 @@
-export * from './Subgrid';
-export * from './GridCollapse';
-export * from './getCSSFromColumnCount';
+import { getCSSFromColumnCount } from "./getCSSFromColumnCount.js";
+import { Subgrid, subgridContext } from "./Subgrid.js";
+import { GridCollapse, getMediaQuery } from "./GridCollapse.js";
+
+export { GridCollapse, Subgrid, getCSSFromColumnCount, getMediaQuery, subgridContext };

package/dist/HeaderHeightArea/index.cjs

@@ -0,0 +1,38 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_useIsInHeaderRegion = require('./useIsInHeaderRegion.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 _emotion_react = require("@emotion/react");
+
+//#region src/HeaderHeightArea/index.tsx
+const HeaderHeightAreaBase = (0, _emotion_styled.default)(_codecademy_gamut.Box)(_codecademy_gamut_styles.system.css({
+	borderBottom: 1,
+	bg: "background",
+	top: 0,
+	zIndex: 2,
+	width: 1,
+	transition: (0, _codecademy_gamut_styles.transitionConcat)(["background-color", "border-bottom-color"], "fast", "ease-in-out")
+}), _codecademy_gamut_styles.system.states({ faded: {
+	bg: "background-current",
+	borderColor: "background-current"
+} }));
+const HeaderHeightArea = ({ as, children, display, ariaLabel }) => {
+	const theme = (0, _emotion_react.useTheme)();
+	const isInHeaderRegion = require_useIsInHeaderRegion.useIsInHeaderRegion();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderHeightAreaBase, {
+		as,
+		display,
+		height: theme.elements.headerHeight,
+		faded: isInHeaderRegion,
+		"aria-label": ariaLabel,
+		children
+	});
+};
+
+//#endregion
+exports.HeaderHeightArea = HeaderHeightArea;

package/dist/HeaderHeightArea/index.d.cts

@@ -0,0 +1,13 @@
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { ResponsiveProp } from "@codecademy/variance";
+
+//#region src/HeaderHeightArea/index.d.ts
+interface HeaderHeightAreaProps extends WithChildrenProp {
+  as?: React$1.ElementType<any>;
+  display: ResponsiveProp<'none' | 'block'>;
+  ariaLabel?: string;
+}
+declare const HeaderHeightArea: React$1.FC<HeaderHeightAreaProps>;
+//#endregion
+export { HeaderHeightArea, HeaderHeightAreaProps };

package/dist/HeaderHeightArea/index.d.ts

@@ -1,9 +1,13 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import { ResponsiveProp } from '@codecademy/variance';
-import * as React from 'react';
-export interface HeaderHeightAreaProps extends WithChildrenProp {
-    as?: React.ElementType<any>;
-    display: ResponsiveProp<'none' | 'block'>;
-    ariaLabel?: string;
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { ResponsiveProp } from "@codecademy/variance";
+
+//#region src/HeaderHeightArea/index.d.ts
+interface HeaderHeightAreaProps extends WithChildrenProp {
+  as?: React$1.ElementType<any>;
+  display: ResponsiveProp<'none' | 'block'>;
+  ariaLabel?: string;
 }
-export declare const HeaderHeightArea: React.FC<HeaderHeightAreaProps>;
+declare const HeaderHeightArea: React$1.FC<HeaderHeightAreaProps>;
+//#endregion
+export { HeaderHeightArea, HeaderHeightAreaProps };

package/dist/HeaderHeightArea/index.js

@@ -1,40 +1,35 @@
-import _styled from "@emotion/styled/base";
-import { Box } from '@codecademy/gamut';
-import { system, transitionConcat } from '@codecademy/gamut-styles';
-import { useTheme } from '@emotion/react';
-import * as React from 'react';
-import { useIsInHeaderRegion } from './useIsInHeaderRegion';
-import { jsx as _jsx } from "react/jsx-runtime";
-const HeaderHeightAreaBase = /*#__PURE__*/_styled(Box, {
-  target: "ed6ugps0",
-  label: "HeaderHeightAreaBase"
-})(system.css({
-  borderBottom: 1,
-  bg: 'background',
-  top: 0,
-  zIndex: 2,
-  width: 1,
-  transition: transitionConcat(['background-color', 'border-bottom-color'], 'fast', 'ease-in-out')
-}), system.states({
-  faded: {
-    bg: 'background-current',
-    borderColor: 'background-current'
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9IZWFkZXJIZWlnaHRBcmVhL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTNkIiLCJmaWxlIjoiLi4vLi4vc3JjL0hlYWRlckhlaWdodEFyZWEvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBXaXRoQ2hpbGRyZW5Qcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgc3lzdGVtLCB0cmFuc2l0aW9uQ29uY2F0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFJlc3BvbnNpdmVQcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHVzZUlzSW5IZWFkZXJSZWdpb24gfSBmcm9tICcuL3VzZUlzSW5IZWFkZXJSZWdpb24nO1xuXG5jb25zdCBIZWFkZXJIZWlnaHRBcmVhQmFzZSA9IHN0eWxlZChCb3gpKFxuICBzeXN0ZW0uY3NzKHtcbiAgICBib3JkZXJCb3R0b206IDEsXG4gICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB0b3A6IDAsXG4gICAgekluZGV4OiAyLFxuICAgIHdpZHRoOiAxLFxuICAgIHRyYW5zaXRpb246IHRyYW5zaXRpb25Db25jYXQoXG4gICAgICBbJ2JhY2tncm91bmQtY29sb3InLCAnYm9yZGVyLWJvdHRvbS1jb2xvciddLFxuICAgICAgJ2Zhc3QnLFxuICAgICAgJ2Vhc2UtaW4tb3V0J1xuICAgICksXG4gIH0pLFxuICBzeXN0ZW0uc3RhdGVzKHtcbiAgICBmYWRlZDoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIEhlYWRlckhlaWdodEFyZWFQcm9wcyBleHRlbmRzIFdpdGhDaGlsZHJlblByb3Age1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBhcz86IFJlYWN0LkVsZW1lbnRUeXBlPGFueT47XG4gIGRpc3BsYXk6IFJlc3BvbnNpdmVQcm9wPCdub25lJyB8ICdibG9jayc+O1xuICBhcmlhTGFiZWw/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIZWlnaHRBcmVhOiBSZWFjdC5GQzxIZWFkZXJIZWlnaHRBcmVhUHJvcHM+ID0gKHtcbiAgYXMsXG4gIGNoaWxkcmVuLFxuICBkaXNwbGF5LFxuICBhcmlhTGFiZWwsXG59KSA9PiB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgaXNJbkhlYWRlclJlZ2lvbiA9IHVzZUlzSW5IZWFkZXJSZWdpb24oKTtcblxuICByZXR1cm4gKFxuICAgIDxIZWFkZXJIZWlnaHRBcmVhQmFzZVxuICAgICAgYXM9e2FzfVxuICAgICAgZGlzcGxheT17ZGlzcGxheX1cbiAgICAgIGhlaWdodD17dGhlbWUuZWxlbWVudHMuaGVhZGVySGVpZ2h0fVxuICAgICAgZmFkZWQ9e2lzSW5IZWFkZXJSZWdpb259XG4gICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvSGVhZGVySGVpZ2h0QXJlYUJhc2U+XG4gICk7XG59O1xuIl19 */");
-export const HeaderHeightArea = ({
-  as,
-  children,
-  display,
-  ariaLabel
-}) => {
-  const theme = useTheme();
-  const isInHeaderRegion = useIsInHeaderRegion();
-  return /*#__PURE__*/_jsx(HeaderHeightAreaBase, {
-    as: as,
-    display: display,
-    height: theme.elements.headerHeight,
-    faded: isInHeaderRegion,
-    "aria-label": ariaLabel,
-    children: children
-  });
-};
+import { useIsInHeaderRegion } from "./useIsInHeaderRegion.js";
+import { Box } from "@codecademy/gamut";
+import { system, transitionConcat } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+
+//#region src/HeaderHeightArea/index.tsx
+const HeaderHeightAreaBase = styled(Box)(system.css({
+	borderBottom: 1,
+	bg: "background",
+	top: 0,
+	zIndex: 2,
+	width: 1,
+	transition: transitionConcat(["background-color", "border-bottom-color"], "fast", "ease-in-out")
+}), system.states({ faded: {
+	bg: "background-current",
+	borderColor: "background-current"
+} }));
+const HeaderHeightArea = ({ as, children, display, ariaLabel }) => {
+	const theme$1 = useTheme();
+	const isInHeaderRegion = useIsInHeaderRegion();
+	return /* @__PURE__ */ jsx(HeaderHeightAreaBase, {
+		as,
+		display,
+		height: theme$1.elements.headerHeight,
+		faded: isInHeaderRegion,
+		"aria-label": ariaLabel,
+		children
+	});
+};
+
+//#endregion
+export { HeaderHeightArea };

package/dist/HeaderHeightArea/useIsInHeaderRegion.cjs

@@ -0,0 +1,17 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/HeaderHeightArea/useIsInHeaderRegion.ts
+const useIsInHeaderRegion = () => {
+	const [isInHeaderRegion, setIsInHeaderRegion] = (0, react.useState)(true);
+	(0, react.useEffect)(() => {
+		const checkScroll = () => setIsInHeaderRegion(window?.pageYOffset === 0);
+		checkScroll();
+		document.addEventListener("scroll", checkScroll);
+		return () => document.removeEventListener("scroll", checkScroll);
+	}, []);
+	return isInHeaderRegion;
+};
+
+//#endregion
+exports.useIsInHeaderRegion = useIsInHeaderRegion;

package/dist/HeaderHeightArea/useIsInHeaderRegion.js

@@ -1,15 +1,16 @@
-import { useEffect, useState } from 'react';
-export const useIsInHeaderRegion = () => {
-  const [isInHeaderRegion, setIsInHeaderRegion] = useState(true);
+import { useEffect, useState } from "react";
 
-  // it is not recommended to replicate this logic in other components unless absolutely necessary, as it is
-  // a workaround for style rehydration issues when using react-use/useWindowScroll. The reasoning behind this
-  // workaround is discussed here: https://github.com/Codecademy/gamut/pull/1822#discussion_r650125406
-  useEffect(() => {
-    const checkScroll = () => setIsInHeaderRegion(window?.pageYOffset === 0);
-    checkScroll();
-    document.addEventListener('scroll', checkScroll);
-    return () => document.removeEventListener('scroll', checkScroll);
-  }, []);
-  return isInHeaderRegion;
-};
+//#region src/HeaderHeightArea/useIsInHeaderRegion.ts
+const useIsInHeaderRegion = () => {
+	const [isInHeaderRegion, setIsInHeaderRegion] = useState(true);
+	useEffect(() => {
+		const checkScroll = () => setIsInHeaderRegion(window?.pageYOffset === 0);
+		checkScroll();
+		document.addEventListener("scroll", checkScroll);
+		return () => document.removeEventListener("scroll", checkScroll);
+	}, []);
+	return isInHeaderRegion;
+};
+
+//#endregion
+export { useIsInHeaderRegion };

package/dist/HorizontalScrollMenu/index.cjs

@@ -0,0 +1,68 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+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");
+require("intersection-observer");
+
+//#region src/HorizontalScrollMenu/index.tsx
+const ScrollContainer = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)`
+  scroll-snap-type: x mandatory;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const ScrollItemWrapper = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  scroll-snap-align: start;
+  &[aria-hidden='true'] {
+    visibility: hidden;
+  }
+`;
+const HorizontalScrollMenu = ({ children, className }) => {
+	const elementsRef = (0, react.useRef)([]);
+	const parentContainerRef = (0, react.useRef)(null);
+	const intersectionObserver = (0, react.useMemo)(() => {
+		if (typeof window === "undefined") return null;
+		return new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				entry.target.ariaHidden = entry.isIntersecting ? "false" : "true";
+			});
+		}, {
+			root: parentContainerRef.current?.querySelector("[data-observerroot=\"true\"]"),
+			rootMargin: "100% 0% 100% 0%"
+		});
+	}, []);
+	(0, react.useEffect)(() => {
+		const numberOfChildElements = react.Children.toArray(children).length;
+		if (elementsRef.current.length === numberOfChildElements) elementsRef.current.forEach((entry) => intersectionObserver?.observe(entry));
+		return () => {
+			intersectionObserver?.disconnect();
+		};
+	}, [
+		elementsRef,
+		intersectionObserver,
+		children
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+		position: "relative",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollContainer, {
+			"data-observerroot": "true",
+			ref: parentContainerRef,
+			className,
+			pr: 16,
+			overflowX: "scroll",
+			tabIndex: 0,
+			children: react.Children.map(children, (child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollItemWrapper, {
+				ref: (element) => {
+					if (element) elementsRef.current[index] = element;
+				},
+				children: child
+			}))
+		})
+	});
+};
+
+//#endregion
+exports.HorizontalScrollMenu = HorizontalScrollMenu;

package/dist/HorizontalScrollMenu/index.d.cts

@@ -0,0 +1,10 @@
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/HorizontalScrollMenu/index.d.ts
+interface HorizontalScrollMenuProps extends WithChildrenProp {
+  className?: string;
+}
+declare const HorizontalScrollMenu: React$1.FC<HorizontalScrollMenuProps>;
+//#endregion
+export { HorizontalScrollMenu, HorizontalScrollMenuProps };

package/dist/HorizontalScrollMenu/index.d.ts

@@ -1,7 +1,11 @@
-import 'intersection-observer';
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-export interface HorizontalScrollMenuProps extends WithChildrenProp {
-    className?: string;
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+import "intersection-observer";
+
+//#region src/HorizontalScrollMenu/index.d.ts
+interface HorizontalScrollMenuProps extends WithChildrenProp {
+  className?: string;
 }
-export declare const HorizontalScrollMenu: React.FC<HorizontalScrollMenuProps>;
+declare const HorizontalScrollMenu: React$1.FC<HorizontalScrollMenuProps>;
+//#endregion
+export { HorizontalScrollMenu, HorizontalScrollMenuProps };

package/dist/HorizontalScrollMenu/index.js

@@ -1,75 +1,65 @@
-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 'intersection-observer';
-import { Box, FlexBox } from '@codecademy/gamut';
-import { Children, useEffect, useMemo, useRef } from 'react';
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ScrollContainer = /*#__PURE__*/_styled(FlexBox, {
-  target: "e1o1o5j01",
-  label: "ScrollContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1ku5q6",
-  styles: "scroll-snap-type:x mandatory;::-webkit-scrollbar{display:none;}"
-} : {
-  name: "1ku5q6",
-  styles: "scroll-snap-type:x mandatory;::-webkit-scrollbar{display:none;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ib3Jpem9udGFsU2Nyb2xsTWVudS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT3VDIiwiZmlsZSI6Ii4uLy4uL3NyYy9Ib3Jpem9udGFsU2Nyb2xsTWVudS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgJ2ludGVyc2VjdGlvbi1vYnNlcnZlcic7XG5cbmltcG9ydCB7IEJveCwgRmxleEJveCwgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENoaWxkcmVuLCB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuY29uc3QgU2Nyb2xsQ29udGFpbmVyID0gc3R5bGVkKEZsZXhCb3gpYFxuICBzY3JvbGwtc25hcC10eXBlOiB4IG1hbmRhdG9yeTtcbiAgOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2Nyb2xsSXRlbVdyYXBwZXIgPSBzdHlsZWQoQm94KWBcbiAgc2Nyb2xsLXNuYXAtYWxpZ246IHN0YXJ0O1xuICAmW2FyaWEtaGlkZGVuPSd0cnVlJ10ge1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgfVxuYDtcblxuZXhwb3J0IGludGVyZmFjZSBIb3Jpem9udGFsU2Nyb2xsTWVudVByb3BzIGV4dGVuZHMgV2l0aENoaWxkcmVuUHJvcCB7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IEhvcml6b250YWxTY3JvbGxNZW51OiBSZWFjdC5GQzxIb3Jpem9udGFsU2Nyb2xsTWVudVByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG59KSA9PiB7XG4gIGNvbnN0IGVsZW1lbnRzUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50W10+KFtdKTtcbiAgY29uc3QgcGFyZW50Q29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgY29uc3QgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcpIHJldHVybiBudWxsO1xuICAgIHJldHVybiBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoXG4gICAgICAoZW50cmllczogSW50ZXJzZWN0aW9uT2JzZXJ2ZXJFbnRyeVtdKSA9PiB7XG4gICAgICAgIGVudHJpZXMuZm9yRWFjaCgoZW50cnkpID0+IHtcbiAgICAgICAgICBlbnRyeS50YXJnZXQuYXJpYUhpZGRlbiA9IGVudHJ5LmlzSW50ZXJzZWN0aW5nID8gJ2ZhbHNlJyA6ICd0cnVlJztcbiAgICAgICAgfSk7XG4gICAgICB9LFxuICAgICAge1xuICAgICAgICByb290OiBwYXJlbnRDb250YWluZXJSZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcihcbiAgICAgICAgICAnW2RhdGEtb2JzZXJ2ZXJyb290PVwidHJ1ZVwiXSdcbiAgICAgICAgKSxcbiAgICAgICAgcm9vdE1hcmdpbjogJzEwMCUgMCUgMTAwJSAwJScsXG4gICAgICB9XG4gICAgKTtcbiAgfSwgW10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgbnVtYmVyT2ZDaGlsZEVsZW1lbnRzID0gQ2hpbGRyZW4udG9BcnJheShjaGlsZHJlbikubGVuZ3RoO1xuXG4gICAgaWYgKGVsZW1lbnRzUmVmLmN1cnJlbnQubGVuZ3RoID09PSBudW1iZXJPZkNoaWxkRWxlbWVudHMpIHtcbiAgICAgIGVsZW1lbnRzUmVmLmN1cnJlbnQuZm9yRWFjaCgoZW50cnk6IEhUTUxFbGVtZW50KSA9PlxuICAgICAgICBpbnRlcnNlY3Rpb25PYnNlcnZlcj8ub2JzZXJ2ZShlbnRyeSlcbiAgICAgICk7XG4gICAgfVxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBpbnRlcnNlY3Rpb25PYnNlcnZlcj8uZGlzY29ubmVjdCgpO1xuICAgIH07XG4gIH0sIFtlbGVtZW50c1JlZiwgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIsIGNoaWxkcmVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgIDxTY3JvbGxDb250YWluZXJcbiAgICAgICAgZGF0YS1vYnNlcnZlcnJvb3Q9XCJ0cnVlXCJcbiAgICAgICAgcmVmPXtwYXJlbnRDb250YWluZXJSZWZ9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBwcj17MTZ9XG4gICAgICAgIG92ZXJmbG93WD1cInNjcm9sbFwiXG4gICAgICAgIHRhYkluZGV4PXswfVxuICAgICAgPlxuICAgICAgICB7Q2hpbGRyZW4ubWFwKGNoaWxkcmVuLCAoY2hpbGQsIGluZGV4KSA9PiAoXG4gICAgICAgICAgPFNjcm9sbEl0ZW1XcmFwcGVyXG4gICAgICAgICAgICByZWY9eyhlbGVtZW50KSA9PiB7XG4gICAgICAgICAgICAgIGlmIChlbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgZWxlbWVudHNSZWYuY3VycmVudFtpbmRleF0gPSBlbGVtZW50O1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZH1cbiAgICAgICAgICA8L1Njcm9sbEl0ZW1XcmFwcGVyPlxuICAgICAgICApKX1cbiAgICAgIDwvU2Nyb2xsQ29udGFpbmVyPlxuICAgIDwvQm94PlxuICApO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const ScrollItemWrapper = /*#__PURE__*/_styled(Box, {
-  target: "e1o1o5j00",
-  label: "ScrollItemWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1f6ha6c",
-  styles: "scroll-snap-align:start;&[aria-hidden='true']{visibility:hidden;}"
-} : {
-  name: "1f6ha6c",
-  styles: "scroll-snap-align:start;&[aria-hidden='true']{visibility:hidden;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ib3Jpem9udGFsU2Nyb2xsTWVudS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY3FDIiwiZmlsZSI6Ii4uLy4uL3NyYy9Ib3Jpem9udGFsU2Nyb2xsTWVudS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgJ2ludGVyc2VjdGlvbi1vYnNlcnZlcic7XG5cbmltcG9ydCB7IEJveCwgRmxleEJveCwgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENoaWxkcmVuLCB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuY29uc3QgU2Nyb2xsQ29udGFpbmVyID0gc3R5bGVkKEZsZXhCb3gpYFxuICBzY3JvbGwtc25hcC10eXBlOiB4IG1hbmRhdG9yeTtcbiAgOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2Nyb2xsSXRlbVdyYXBwZXIgPSBzdHlsZWQoQm94KWBcbiAgc2Nyb2xsLXNuYXAtYWxpZ246IHN0YXJ0O1xuICAmW2FyaWEtaGlkZGVuPSd0cnVlJ10ge1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgfVxuYDtcblxuZXhwb3J0IGludGVyZmFjZSBIb3Jpem9udGFsU2Nyb2xsTWVudVByb3BzIGV4dGVuZHMgV2l0aENoaWxkcmVuUHJvcCB7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IEhvcml6b250YWxTY3JvbGxNZW51OiBSZWFjdC5GQzxIb3Jpem9udGFsU2Nyb2xsTWVudVByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG59KSA9PiB7XG4gIGNvbnN0IGVsZW1lbnRzUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50W10+KFtdKTtcbiAgY29uc3QgcGFyZW50Q29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgY29uc3QgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcpIHJldHVybiBudWxsO1xuICAgIHJldHVybiBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoXG4gICAgICAoZW50cmllczogSW50ZXJzZWN0aW9uT2JzZXJ2ZXJFbnRyeVtdKSA9PiB7XG4gICAgICAgIGVudHJpZXMuZm9yRWFjaCgoZW50cnkpID0+IHtcbiAgICAgICAgICBlbnRyeS50YXJnZXQuYXJpYUhpZGRlbiA9IGVudHJ5LmlzSW50ZXJzZWN0aW5nID8gJ2ZhbHNlJyA6ICd0cnVlJztcbiAgICAgICAgfSk7XG4gICAgICB9LFxuICAgICAge1xuICAgICAgICByb290OiBwYXJlbnRDb250YWluZXJSZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcihcbiAgICAgICAgICAnW2RhdGEtb2JzZXJ2ZXJyb290PVwidHJ1ZVwiXSdcbiAgICAgICAgKSxcbiAgICAgICAgcm9vdE1hcmdpbjogJzEwMCUgMCUgMTAwJSAwJScsXG4gICAgICB9XG4gICAgKTtcbiAgfSwgW10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgbnVtYmVyT2ZDaGlsZEVsZW1lbnRzID0gQ2hpbGRyZW4udG9BcnJheShjaGlsZHJlbikubGVuZ3RoO1xuXG4gICAgaWYgKGVsZW1lbnRzUmVmLmN1cnJlbnQubGVuZ3RoID09PSBudW1iZXJPZkNoaWxkRWxlbWVudHMpIHtcbiAgICAgIGVsZW1lbnRzUmVmLmN1cnJlbnQuZm9yRWFjaCgoZW50cnk6IEhUTUxFbGVtZW50KSA9PlxuICAgICAgICBpbnRlcnNlY3Rpb25PYnNlcnZlcj8ub2JzZXJ2ZShlbnRyeSlcbiAgICAgICk7XG4gICAgfVxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBpbnRlcnNlY3Rpb25PYnNlcnZlcj8uZGlzY29ubmVjdCgpO1xuICAgIH07XG4gIH0sIFtlbGVtZW50c1JlZiwgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIsIGNoaWxkcmVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgIDxTY3JvbGxDb250YWluZXJcbiAgICAgICAgZGF0YS1vYnNlcnZlcnJvb3Q9XCJ0cnVlXCJcbiAgICAgICAgcmVmPXtwYXJlbnRDb250YWluZXJSZWZ9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBwcj17MTZ9XG4gICAgICAgIG92ZXJmbG93WD1cInNjcm9sbFwiXG4gICAgICAgIHRhYkluZGV4PXswfVxuICAgICAgPlxuICAgICAgICB7Q2hpbGRyZW4ubWFwKGNoaWxkcmVuLCAoY2hpbGQsIGluZGV4KSA9PiAoXG4gICAgICAgICAgPFNjcm9sbEl0ZW1XcmFwcGVyXG4gICAgICAgICAgICByZWY9eyhlbGVtZW50KSA9PiB7XG4gICAgICAgICAgICAgIGlmIChlbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgZWxlbWVudHNSZWYuY3VycmVudFtpbmRleF0gPSBlbGVtZW50O1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZH1cbiAgICAgICAgICA8L1Njcm9sbEl0ZW1XcmFwcGVyPlxuICAgICAgICApKX1cbiAgICAgIDwvU2Nyb2xsQ29udGFpbmVyPlxuICAgIDwvQm94PlxuICApO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export const HorizontalScrollMenu = ({
-  children,
-  className
-}) => {
-  const elementsRef = useRef([]);
-  const parentContainerRef = useRef(null);
-  const intersectionObserver = useMemo(() => {
-    if (typeof window === 'undefined') return null;
-    return new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        entry.target.ariaHidden = entry.isIntersecting ? 'false' : 'true';
-      });
-    }, {
-      root: parentContainerRef.current?.querySelector('[data-observerroot="true"]'),
-      rootMargin: '100% 0% 100% 0%'
-    });
-  }, []);
-  useEffect(() => {
-    const numberOfChildElements = Children.toArray(children).length;
-    if (elementsRef.current.length === numberOfChildElements) {
-      elementsRef.current.forEach(entry => intersectionObserver?.observe(entry));
-    }
-    return () => {
-      intersectionObserver?.disconnect();
-    };
-  }, [elementsRef, intersectionObserver, children]);
-  return /*#__PURE__*/_jsx(Box, {
-    position: "relative",
-    children: /*#__PURE__*/_jsx(ScrollContainer, {
-      "data-observerroot": "true",
-      ref: parentContainerRef,
-      className: className,
-      pr: 16,
-      overflowX: "scroll",
-      tabIndex: 0,
-      children: Children.map(children, (child, index) => /*#__PURE__*/_jsx(ScrollItemWrapper, {
-        ref: element => {
-          if (element) {
-            elementsRef.current[index] = element;
-          }
-        },
-        children: child
-      }))
-    })
-  });
-};
+import { Box, FlexBox } from "@codecademy/gamut";
+import styled from "@emotion/styled";
+import { Children, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import "intersection-observer";
+
+//#region src/HorizontalScrollMenu/index.tsx
+const ScrollContainer = styled(FlexBox)`
+  scroll-snap-type: x mandatory;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const ScrollItemWrapper = styled(Box)`
+  scroll-snap-align: start;
+  &[aria-hidden='true'] {
+    visibility: hidden;
+  }
+`;
+const HorizontalScrollMenu = ({ children, className }) => {
+	const elementsRef = useRef([]);
+	const parentContainerRef = useRef(null);
+	const intersectionObserver = useMemo(() => {
+		if (typeof window === "undefined") return null;
+		return new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				entry.target.ariaHidden = entry.isIntersecting ? "false" : "true";
+			});
+		}, {
+			root: parentContainerRef.current?.querySelector("[data-observerroot=\"true\"]"),
+			rootMargin: "100% 0% 100% 0%"
+		});
+	}, []);
+	useEffect(() => {
+		const numberOfChildElements = Children.toArray(children).length;
+		if (elementsRef.current.length === numberOfChildElements) elementsRef.current.forEach((entry) => intersectionObserver?.observe(entry));
+		return () => {
+			intersectionObserver?.disconnect();
+		};
+	}, [
+		elementsRef,
+		intersectionObserver,
+		children
+	]);
+	return /* @__PURE__ */ jsx(Box, {
+		position: "relative",
+		children: /* @__PURE__ */ jsx(ScrollContainer, {
+			"data-observerroot": "true",
+			ref: parentContainerRef,
+			className,
+			pr: 16,
+			overflowX: "scroll",
+			tabIndex: 0,
+			children: Children.map(children, (child, index) => /* @__PURE__ */ jsx(ScrollItemWrapper, {
+				ref: (element) => {
+					if (element) elementsRef.current[index] = element;
+				},
+				children: child
+			}))
+		})
+	});
+};
+
+//#endregion
+export { HorizontalScrollMenu };

package/dist/HubCard/index.cjs

@@ -0,0 +1,40 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/HubCard/index.tsx
+const HubCard = ({ eyebrowTitle, title, backgroundPosition, backgroundImage }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Card, {
+	variant: "white",
+	isInteractive: true,
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	backgroundSize: "cover",
+	backgroundRepeat: "no-repeat",
+	backgroundPosition,
+	backgroundImage: `url(${backgroundImage})`,
+	height: "11.25rem",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+		p: 24,
+		bg: "white",
+		width: "100%",
+		maxWidth: "17.5rem",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+			as: "p",
+			fontSize: 16,
+			children: eyebrowTitle
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			alignItems: "center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				as: "p",
+				variant: "title-sm",
+				children: title
+			})
+		})]
+	})
+});
+
+//#endregion
+exports.HubCard = HubCard;

package/dist/HubCard/index.d.cts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+
+//#region src/HubCard/index.d.ts
+type HubCardProps = {
+  eyebrowTitle: string;
+  title: string;
+  backgroundImage: string;
+  backgroundPosition: 'left' | 'right';
+};
+declare const HubCard: React$1.FC<HubCardProps>;
+//#endregion
+export { HubCard, HubCardProps };

package/dist/HubCard/index.d.ts

@@ -1,8 +1,12 @@
-import * as React from 'react';
-export type HubCardProps = {
-    eyebrowTitle: string;
-    title: string;
-    backgroundImage: string;
-    backgroundPosition: 'left' | 'right';
+import * as React$1 from "react";
+
+//#region src/HubCard/index.d.ts
+type HubCardProps = {
+  eyebrowTitle: string;
+  title: string;
+  backgroundImage: string;
+  backgroundPosition: 'left' | 'right';
 };
-export declare const HubCard: React.FC<HubCardProps>;
+declare const HubCard: React$1.FC<HubCardProps>;
+//#endregion
+export { HubCard, HubCardProps };