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

package/dist/Grid/Subgrid.d.cts

@@ -0,0 +1,29 @@
+import { ColumnCount } from "./getCSSFromColumnCount.cjs";
+import { GridBox } from "@codecademy/gamut";
+import * as react from "react";
+import { ComponentProps, FC } from "react";
+
+//#region src/Grid/Subgrid.d.ts
+/**
+ * Subgrid is basically used as a stand-in for css subgrids, which are currently only supported in firefox.
+ * Because the number of Subgrid columns is dependent on many factors (screen width, content type, whether
+ * or not we're displaying contributors) and Subgrid is used in multiple places - sometimes nested within
+ * subcomponents - we avoid prop-drilling and keep each instance in sync by defining the columns at each
+ * breakpoint in react context. Usage example:
+ *
+ * import { Subgrid, subgridContext } from './Subgrid';
+ *
+ * export const MyComponent = () => (
+ *   <subgridContext.Provider value={{ _: 12, md: 6 }}>
+ *     ...
+ *     <Subgrid>...</Subgrid>
+ *   </subgridContext.Provider>
+ * );
+ *
+ * here, all descendant Subgrids will have 6 columns at breakpoints md and above and 12 columns otherwise
+ */
+declare const subgridContext: react.Context<ColumnCount>;
+declare const Subgrid: FC<ComponentProps<typeof GridBox>>;
+//#endregion
+export { Subgrid, subgridContext };
+//# sourceMappingURL=Subgrid.d.cts.map

package/dist/Grid/Subgrid.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subgrid.d.cts","names":[],"sources":["../../src/Grid/Subgrid.tsx"],"mappings":";;;;;;;;;AAuBA;;;;;AAEA;;;;;;;;;;cAFa,cAAA,EAAc,KAAA,CAAA,OAAA,CAAA,WAAA;AAAA,cAEd,OAAA,EAAS,EAAA,CAAG,cAAA,QAAsB,OAAA"}

package/dist/Grid/Subgrid.d.ts

@@ -1,6 +1,9 @@
-import { GridBox } from '@codecademy/gamut';
-import { ComponentProps, FC } from 'react';
-import { ColumnCount } from './getCSSFromColumnCount';
+import { ColumnCount } from "./getCSSFromColumnCount.js";
+import { GridBox } from "@codecademy/gamut";
+import * as react from "react";
+import { ComponentProps, FC } from "react";
+
+//#region src/Grid/Subgrid.d.ts
 /**
  * Subgrid is basically used as a stand-in for css subgrids, which are currently only supported in firefox.
  * Because the number of Subgrid columns is dependent on many factors (screen width, content type, whether
@@ -19,5 +22,8 @@ import { ColumnCount } from './getCSSFromColumnCount';
  *
  * here, all descendant Subgrids will have 6 columns at breakpoints md and above and 12 columns otherwise
  */
-export declare const subgridContext: import("react").Context<ColumnCount>;
-export declare const Subgrid: FC<ComponentProps<typeof GridBox>>;
+declare const subgridContext: react.Context<ColumnCount>;
+declare const Subgrid: FC<ComponentProps<typeof GridBox>>;
+//#endregion
+export { Subgrid, subgridContext };
+//# sourceMappingURL=Subgrid.d.ts.map

package/dist/Grid/Subgrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subgrid.d.ts","names":[],"sources":["../../src/Grid/Subgrid.tsx"],"mappings":";;;;;;;;;AAuBA;;;;;AAEA;;;;;;;;;;cAFa,cAAA,EAAc,KAAA,CAAA,OAAA,CAAA,WAAA;AAAA,cAEd,OAAA,EAAS,EAAA,CAAG,cAAA,QAAsB,OAAA"}

package/dist/Grid/Subgrid.js

@@ -1,37 +1,39 @@
-import { GridBox } from '@codecademy/gamut';
-import { createContext, useContext } from 'react';
-import { getCSSFromColumnCount } from './getCSSFromColumnCount';
+import { getCSSFromColumnCount } from "./getCSSFromColumnCount.js";
+import { GridBox } from "@codecademy/gamut";
+import { createContext, useContext } from "react";
 
+//#region src/Grid/Subgrid.tsx
 /**
- * Subgrid is basically used as a stand-in for css subgrids, which are currently only supported in firefox.
- * Because the number of Subgrid columns is dependent on many factors (screen width, content type, whether
- * or not we're displaying contributors) and Subgrid is used in multiple places - sometimes nested within
- * subcomponents - we avoid prop-drilling and keep each instance in sync by defining the columns at each
- * breakpoint in react context. Usage example:
- *
- * import { Subgrid, subgridContext } from './Subgrid';
- *
- * export const MyComponent = () => (
- *   <subgridContext.Provider value={{ _: 12, md: 6 }}>
- *     ...
- *     <Subgrid>...</Subgrid>
- *   </subgridContext.Provider>
- * );
- *
- * here, all descendant Subgrids will have 6 columns at breakpoints md and above and 12 columns otherwise
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const subgridContext = /*#__PURE__*/createContext({});
-export const Subgrid = props => {
-  const template = useContext(subgridContext);
-  const gridTemplateColumns = getCSSFromColumnCount(template, value => `repeat(${value}, 1fr)`);
-  return /*#__PURE__*/_jsx(GridBox, {
-    gridTemplateColumns: {
-      _: 'repeat(12, 1fr)',
-      ...gridTemplateColumns
-    },
-    rowGap: 16,
-    columnGap: 24,
-    ...props
-  });
-};
+* Subgrid is basically used as a stand-in for css subgrids, which are currently only supported in firefox.
+* Because the number of Subgrid columns is dependent on many factors (screen width, content type, whether
+* or not we're displaying contributors) and Subgrid is used in multiple places - sometimes nested within
+* subcomponents - we avoid prop-drilling and keep each instance in sync by defining the columns at each
+* breakpoint in react context. Usage example:
+*
+* import { Subgrid, subgridContext } from './Subgrid';
+*
+* export const MyComponent = () => (
+*   <subgridContext.Provider value={{ _: 12, md: 6 }}>
+*     ...
+*     <Subgrid>...</Subgrid>
+*   </subgridContext.Provider>
+* );
+*
+* here, all descendant Subgrids will have 6 columns at breakpoints md and above and 12 columns otherwise
+*/ const subgridContext = /* @__PURE__ */ createContext({});
+const Subgrid = (props) => {
+	const gridTemplateColumns = getCSSFromColumnCount(useContext(subgridContext), (value) => `repeat(${value}, 1fr)`);
+	return /* @__PURE__ */ React.createElement(GridBox, {
+		gridTemplateColumns: {
+			_: "repeat(12, 1fr)",
+			...gridTemplateColumns
+		},
+		rowGap: 16,
+		columnGap: 24,
+		...props
+	});
+};
+
+//#endregion
+export { Subgrid, subgridContext };
+//# sourceMappingURL=Subgrid.js.map

package/dist/Grid/Subgrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subgrid.js","names":["GridBox","createContext","useContext","getCSSFromColumnCount","subgridContext","Subgrid","props","template","gridTemplateColumns","value","_","rowGap","columnGap"],"sources":["../../src/Grid/Subgrid.tsx"],"sourcesContent":["import { GridBox } from '@codecademy/gamut';\nimport { ComponentProps, createContext, FC, useContext } from 'react';\n\nimport { ColumnCount, getCSSFromColumnCount } from './getCSSFromColumnCount';\n\n/**\n * Subgrid is basically used as a stand-in for css subgrids, which are currently only supported in firefox.\n * Because the number of Subgrid columns is dependent on many factors (screen width, content type, whether\n * or not we're displaying contributors) and Subgrid is used in multiple places - sometimes nested within\n * subcomponents - we avoid prop-drilling and keep each instance in sync by defining the columns at each\n * breakpoint in react context. Usage example:\n *\n * import { Subgrid, subgridContext } from './Subgrid';\n *\n * export const MyComponent = () => (\n *   <subgridContext.Provider value={{ _: 12, md: 6 }}>\n *     ...\n *     <Subgrid>...</Subgrid>\n *   </subgridContext.Provider>\n * );\n *\n * here, all descendant Subgrids will have 6 columns at breakpoints md and above and 12 columns otherwise\n */\nexport const subgridContext = createContext<ColumnCount>({});\n\nexport const Subgrid: FC<ComponentProps<typeof GridBox>> = (props) => {\n  const template = useContext(subgridContext);\n\n  const gridTemplateColumns = getCSSFromColumnCount(\n    template,\n    (value) => `repeat(${value}, 1fr)`\n  );\n\n  return (\n    <GridBox\n      gridTemplateColumns={{ _: 'repeat(12, 1fr)', ...gridTemplateColumns }}\n      rowGap={16}\n      columnGap={24}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;GAuBA,MAAaI,iBAAiBH,8BAA2B,EAAC,CAAA;AAE1D,MAAaI,WAA+CC,UAAAA;CAG1D,MAAME,sBAAsBL,sBAFXD,WAAWE,eAAAA,GAIzBK,UAAU,UAAUA,MAAM,QAAO;AAGpC,QACE,sBAAA,cAACT,SAAAA;EACCQ,qBAAqB;GAAEE,GAAG;GAAmB,GAAGF;GAAoB;EACpEG,QAAQ;EACRC,WAAW;EACV,GAAGN"}

package/dist/Grid/getCSSFromColumnCount.cjs

@@ -0,0 +1,11 @@
+
+//#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
+exports.getCSSFromColumnCount = getCSSFromColumnCount;
+//# sourceMappingURL=getCSSFromColumnCount.cjs.map

package/dist/Grid/getCSSFromColumnCount.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCSSFromColumnCount.cjs","names":["getCSSFromColumnCount","columnCount","valueFunction","Object","keys","reduce","acc","key","value"],"sources":["../../src/Grid/getCSSFromColumnCount.ts"],"sourcesContent":["import { Column } from '@codecademy/gamut';\nimport { MediaQueryMap } from '@codecademy/variance';\nimport { ComponentProps } from 'react';\n\nexport type ColumnCountKeys = Extract<\n  ComponentProps<typeof Column>['size'],\n  number\n>;\nexport type ColumnCount = MediaQueryMap<ColumnCountKeys>;\n\nexport const getCSSFromColumnCount = (\n  columnCount: ColumnCount,\n  valueFunction: (value: number) => string\n) =>\n  Object.keys(columnCount).reduce<MediaQueryMap<string>>(\n    (acc, key: keyof ColumnCount) => {\n      const value = columnCount[key];\n      if (typeof value !== 'undefined') {\n        acc[key] = valueFunction(value);\n      }\n      return acc;\n    },\n    {}\n  );\n"],"mappings":";;AAUA,MAAaA,yBACXC,aACAC,kBAEAC,OAAOC,KAAKH,YAAAA,CAAaI,QACtBC,KAAKC,QAAAA;CACJ,MAAMC,QAAQP,YAAYM;AAC1B,KAAI,OAAOC,UAAU,YACnBF,KAAIC,OAAOL,cAAcM,MAAAA;AAE3B,QAAOF;GAET,EAAC,CAAA"}

package/dist/Grid/getCSSFromColumnCount.d.cts

@@ -0,0 +1,11 @@
+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 };
+//# sourceMappingURL=getCSSFromColumnCount.d.cts.map

package/dist/Grid/getCSSFromColumnCount.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCSSFromColumnCount.d.cts","names":[],"sources":["../../src/Grid/getCSSFromColumnCount.ts"],"mappings":";;;;;KAIY,eAAA,GAAkB,OAAA,CAC5B,cAAA,QAAsB,MAAA;AAAA,KAGZ,WAAA,GAAc,aAAA,CAAc,eAAA;AAAA,cAE3B,qBAAA,GACX,WAAA,EAAa,WAAA,EACb,aAAA,GAAgB,KAAA,wBAAwB,aAAA"}

package/dist/Grid/getCSSFromColumnCount.d.ts

@@ -1,6 +1,11 @@
-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 };
+//# sourceMappingURL=getCSSFromColumnCount.d.ts.map

package/dist/Grid/getCSSFromColumnCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCSSFromColumnCount.d.ts","names":[],"sources":["../../src/Grid/getCSSFromColumnCount.ts"],"mappings":";;;;;KAIY,eAAA,GAAkB,OAAA,CAC5B,cAAA,QAAsB,MAAA;AAAA,KAGZ,WAAA,GAAc,aAAA,CAAc,eAAA;AAAA,cAE3B,qBAAA,GACX,WAAA,EAAa,WAAA,EACb,aAAA,GAAgB,KAAA,wBAAwB,aAAA"}

package/dist/Grid/getCSSFromColumnCount.js

@@ -1,7 +1,10 @@
-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 };
+//# sourceMappingURL=getCSSFromColumnCount.js.map

package/dist/Grid/getCSSFromColumnCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCSSFromColumnCount.js","names":["getCSSFromColumnCount","columnCount","valueFunction","Object","keys","reduce","acc","key","value"],"sources":["../../src/Grid/getCSSFromColumnCount.ts"],"sourcesContent":["import { Column } from '@codecademy/gamut';\nimport { MediaQueryMap } from '@codecademy/variance';\nimport { ComponentProps } from 'react';\n\nexport type ColumnCountKeys = Extract<\n  ComponentProps<typeof Column>['size'],\n  number\n>;\nexport type ColumnCount = MediaQueryMap<ColumnCountKeys>;\n\nexport const getCSSFromColumnCount = (\n  columnCount: ColumnCount,\n  valueFunction: (value: number) => string\n) =>\n  Object.keys(columnCount).reduce<MediaQueryMap<string>>(\n    (acc, key: keyof ColumnCount) => {\n      const value = columnCount[key];\n      if (typeof value !== 'undefined') {\n        acc[key] = valueFunction(value);\n      }\n      return acc;\n    },\n    {}\n  );\n"],"mappings":";AAUA,MAAaA,yBACXC,aACAC,kBAEAC,OAAOC,KAAKH,YAAAA,CAAaI,QACtBC,KAAKC,QAAAA;CACJ,MAAMC,QAAQP,YAAYM;AAC1B,KAAI,OAAOC,UAAU,YACnBF,KAAIC,OAAOL,cAAcM,MAAAA;AAE3B,QAAOF;GAET,EAAC,CAAA"}

package/dist/Grid/index.cjs

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

package/dist/Grid/index.d.ts

@@ -1,3 +1,3 @@
-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";

package/dist/Grid/index.js

@@ -1,3 +1,3 @@
-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";

package/dist/HeaderHeightArea/index.cjs

@@ -0,0 +1,40 @@
+const require_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_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _emotion_react = require("@emotion/react");
+
+//#region src/HeaderHeightArea/index.tsx
+const HeaderHeightAreaBase = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.Box, {
+	target: "ez77rdt0",
+	label: "brand-HeaderHeightAreaBase"
+})(_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"
+} }), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0hlYWRlckhlaWdodEFyZWEvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvSGVhZGVySGVpZ2h0QXJlYS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBXaXRoQ2hpbGRyZW5Qcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgc3lzdGVtLCB0cmFuc2l0aW9uQ29uY2F0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFJlc3BvbnNpdmVQcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHVzZUlzSW5IZWFkZXJSZWdpb24gfSBmcm9tICcuL3VzZUlzSW5IZWFkZXJSZWdpb24nO1xuXG5jb25zdCBIZWFkZXJIZWlnaHRBcmVhQmFzZSA9IHN0eWxlZChCb3gpKFxuICBzeXN0ZW0uY3NzKHtcbiAgICBib3JkZXJCb3R0b206IDEsXG4gICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB0b3A6IDAsXG4gICAgekluZGV4OiAyLFxuICAgIHdpZHRoOiAxLFxuICAgIHRyYW5zaXRpb246IHRyYW5zaXRpb25Db25jYXQoXG4gICAgICBbJ2JhY2tncm91bmQtY29sb3InLCAnYm9yZGVyLWJvdHRvbS1jb2xvciddLFxuICAgICAgJ2Zhc3QnLFxuICAgICAgJ2Vhc2UtaW4tb3V0J1xuICAgICksXG4gIH0pLFxuICBzeXN0ZW0uc3RhdGVzKHtcbiAgICBmYWRlZDoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIEhlYWRlckhlaWdodEFyZWFQcm9wcyBleHRlbmRzIFdpdGhDaGlsZHJlblByb3Age1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBhcz86IFJlYWN0LkVsZW1lbnRUeXBlPGFueT47XG4gIGRpc3BsYXk6IFJlc3BvbnNpdmVQcm9wPCdub25lJyB8ICdibG9jayc+O1xuICBhcmlhTGFiZWw/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIZWlnaHRBcmVhOiBSZWFjdC5GQzxIZWFkZXJIZWlnaHRBcmVhUHJvcHM+ID0gKHtcbiAgYXMsXG4gIGNoaWxkcmVuLFxuICBkaXNwbGF5LFxuICBhcmlhTGFiZWwsXG59KSA9PiB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgaXNJbkhlYWRlclJlZ2lvbiA9IHVzZUlzSW5IZWFkZXJSZWdpb24oKTtcblxuICByZXR1cm4gKFxuICAgIDxIZWFkZXJIZWlnaHRBcmVhQmFzZVxuICAgICAgYXM9e2FzfVxuICAgICAgZGlzcGxheT17ZGlzcGxheX1cbiAgICAgIGhlaWdodD17dGhlbWUuZWxlbWVudHMuaGVhZGVySGVpZ2h0fVxuICAgICAgZmFkZWQ9e2lzSW5IZWFkZXJSZWdpb259XG4gICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvSGVhZGVySGVpZ2h0QXJlYUJhc2U+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVM2QiJ9 */");
+const HeaderHeightArea = ({ as, children, display, ariaLabel }) => {
+	const theme = (0, _emotion_react.useTheme)();
+	const isInHeaderRegion = require_useIsInHeaderRegion.useIsInHeaderRegion();
+	return /* @__PURE__ */ react.createElement(HeaderHeightAreaBase, {
+		as,
+		display,
+		height: theme.elements.headerHeight,
+		faded: isInHeaderRegion,
+		"aria-label": ariaLabel
+	}, children);
+};
+
+//#endregion
+exports.HeaderHeightArea = HeaderHeightArea;
+//# sourceMappingURL=index.cjs.map

package/dist/HeaderHeightArea/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","system","transitionConcat","useTheme","styled","React","useIsInHeaderRegion","HeaderHeightAreaBase","css","borderBottom","bg","top","zIndex","width","transition","states","faded","borderColor","HeaderHeightArea","as","children","display","ariaLabel","theme","isInHeaderRegion","height","elements","headerHeight","aria-label"],"sources":["../../src/HeaderHeightArea/index.tsx"],"sourcesContent":["import { Box, WithChildrenProp } from '@codecademy/gamut';\nimport { system, transitionConcat } from '@codecademy/gamut-styles';\nimport { ResponsiveProp } from '@codecademy/variance';\nimport { useTheme } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { useIsInHeaderRegion } from './useIsInHeaderRegion';\n\nconst HeaderHeightAreaBase = styled(Box)(\n  system.css({\n    borderBottom: 1,\n    bg: 'background',\n    top: 0,\n    zIndex: 2,\n    width: 1,\n    transition: transitionConcat(\n      ['background-color', 'border-bottom-color'],\n      'fast',\n      'ease-in-out'\n    ),\n  }),\n  system.states({\n    faded: {\n      bg: 'background-current',\n      borderColor: 'background-current',\n    },\n  })\n);\n\nexport interface HeaderHeightAreaProps extends WithChildrenProp {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: React.ElementType<any>;\n  display: ResponsiveProp<'none' | 'block'>;\n  ariaLabel?: string;\n}\n\nexport const HeaderHeightArea: React.FC<HeaderHeightAreaProps> = ({\n  as,\n  children,\n  display,\n  ariaLabel,\n}) => {\n  const theme = useTheme();\n  const isInHeaderRegion = useIsInHeaderRegion();\n\n  return (\n    <HeaderHeightAreaBase\n      as={as}\n      display={display}\n      height={theme.elements.headerHeight}\n      faded={isInHeaderRegion}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </HeaderHeightAreaBase>\n  );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAMO,uBAAuBH,6CAAOJ,uBAAAA;;;GAClCC,gCAAOO,IAAI;CACTC,cAAc;CACdC,IAAI;CACJC,KAAK;CACLC,QAAQ;CACRC,OAAO;CACPC,2DACE,CAAC,oBAAoB,sBAAsB,EAC3C,QACA,cAAA;CAEJ,CAAA,EACAb,gCAAOc,OAAO,EACZC,OAAO;CACLN,IAAI;CACJO,aAAa;CACf,EACF,CAAA,EAAA,8yEAAA;AAUF,MAAaC,oBAAqD,EAChEC,IACAC,UACAC,SACAC,gBACD;CACC,MAAMC,sCAAQpB;CACd,MAAMqB,mBAAmBlB,iDAAAA;AAEzB,QACE,sBAAA,cAACC,sBAAAA;EACKY;EACKE;EACTI,QAAQF,MAAMG,SAASC;EACvBX,OAAOQ;EACPI,cAAYN;IAEXF,SAAAA"}

package/dist/HeaderHeightArea/index.js

@@ -1,40 +1,37 @@
-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"
+import { useIsInHeaderRegion } from "./useIsInHeaderRegion.js";
+import { Box } from "@codecademy/gamut";
+import { system, transitionConcat } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { useTheme } from "@emotion/react";
+
+//#region src/HeaderHeightArea/index.tsx
+const HeaderHeightAreaBase = /* @__PURE__ */ styled(Box, {
+	target: "ez77rdt0",
+	label: "brand-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
-  });
-};
+	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"
+} }), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0hlYWRlckhlaWdodEFyZWEvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvSGVhZGVySGVpZ2h0QXJlYS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBXaXRoQ2hpbGRyZW5Qcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgc3lzdGVtLCB0cmFuc2l0aW9uQ29uY2F0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFJlc3BvbnNpdmVQcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHVzZUlzSW5IZWFkZXJSZWdpb24gfSBmcm9tICcuL3VzZUlzSW5IZWFkZXJSZWdpb24nO1xuXG5jb25zdCBIZWFkZXJIZWlnaHRBcmVhQmFzZSA9IHN0eWxlZChCb3gpKFxuICBzeXN0ZW0uY3NzKHtcbiAgICBib3JkZXJCb3R0b206IDEsXG4gICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB0b3A6IDAsXG4gICAgekluZGV4OiAyLFxuICAgIHdpZHRoOiAxLFxuICAgIHRyYW5zaXRpb246IHRyYW5zaXRpb25Db25jYXQoXG4gICAgICBbJ2JhY2tncm91bmQtY29sb3InLCAnYm9yZGVyLWJvdHRvbS1jb2xvciddLFxuICAgICAgJ2Zhc3QnLFxuICAgICAgJ2Vhc2UtaW4tb3V0J1xuICAgICksXG4gIH0pLFxuICBzeXN0ZW0uc3RhdGVzKHtcbiAgICBmYWRlZDoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIEhlYWRlckhlaWdodEFyZWFQcm9wcyBleHRlbmRzIFdpdGhDaGlsZHJlblByb3Age1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBhcz86IFJlYWN0LkVsZW1lbnRUeXBlPGFueT47XG4gIGRpc3BsYXk6IFJlc3BvbnNpdmVQcm9wPCdub25lJyB8ICdibG9jayc+O1xuICBhcmlhTGFiZWw/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJIZWlnaHRBcmVhOiBSZWFjdC5GQzxIZWFkZXJIZWlnaHRBcmVhUHJvcHM+ID0gKHtcbiAgYXMsXG4gIGNoaWxkcmVuLFxuICBkaXNwbGF5LFxuICBhcmlhTGFiZWwsXG59KSA9PiB7XG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgaXNJbkhlYWRlclJlZ2lvbiA9IHVzZUlzSW5IZWFkZXJSZWdpb24oKTtcblxuICByZXR1cm4gKFxuICAgIDxIZWFkZXJIZWlnaHRBcmVhQmFzZVxuICAgICAgYXM9e2FzfVxuICAgICAgZGlzcGxheT17ZGlzcGxheX1cbiAgICAgIGhlaWdodD17dGhlbWUuZWxlbWVudHMuaGVhZGVySGVpZ2h0fVxuICAgICAgZmFkZWQ9e2lzSW5IZWFkZXJSZWdpb259XG4gICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvSGVhZGVySGVpZ2h0QXJlYUJhc2U+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVM2QiJ9 */");
+const HeaderHeightArea = ({ as, children, display, ariaLabel }) => {
+	const theme = useTheme();
+	const isInHeaderRegion = useIsInHeaderRegion();
+	return /* @__PURE__ */ React$1.createElement(HeaderHeightAreaBase, {
+		as,
+		display,
+		height: theme.elements.headerHeight,
+		faded: isInHeaderRegion,
+		"aria-label": ariaLabel
+	}, children);
+};
+
+//#endregion
+export { HeaderHeightArea };
+//# sourceMappingURL=index.js.map

package/dist/HeaderHeightArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","system","transitionConcat","useTheme","styled","React","useIsInHeaderRegion","HeaderHeightAreaBase","css","borderBottom","bg","top","zIndex","width","transition","states","faded","borderColor","HeaderHeightArea","as","children","display","ariaLabel","theme","isInHeaderRegion","height","elements","headerHeight","aria-label"],"sources":["../../src/HeaderHeightArea/index.tsx"],"sourcesContent":["import { Box, WithChildrenProp } from '@codecademy/gamut';\nimport { system, transitionConcat } from '@codecademy/gamut-styles';\nimport { ResponsiveProp } from '@codecademy/variance';\nimport { useTheme } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { useIsInHeaderRegion } from './useIsInHeaderRegion';\n\nconst HeaderHeightAreaBase = styled(Box)(\n  system.css({\n    borderBottom: 1,\n    bg: 'background',\n    top: 0,\n    zIndex: 2,\n    width: 1,\n    transition: transitionConcat(\n      ['background-color', 'border-bottom-color'],\n      'fast',\n      'ease-in-out'\n    ),\n  }),\n  system.states({\n    faded: {\n      bg: 'background-current',\n      borderColor: 'background-current',\n    },\n  })\n);\n\nexport interface HeaderHeightAreaProps extends WithChildrenProp {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: React.ElementType<any>;\n  display: ResponsiveProp<'none' | 'block'>;\n  ariaLabel?: string;\n}\n\nexport const HeaderHeightArea: React.FC<HeaderHeightAreaProps> = ({\n  as,\n  children,\n  display,\n  ariaLabel,\n}) => {\n  const theme = useTheme();\n  const isInHeaderRegion = useIsInHeaderRegion();\n\n  return (\n    <HeaderHeightAreaBase\n      as={as}\n      display={display}\n      height={theme.elements.headerHeight}\n      faded={isInHeaderRegion}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </HeaderHeightAreaBase>\n  );\n};\n"],"mappings":";;;;;;;;AASA,MAAMO,uBAAuBH,uBAAOJ,KAAAA;;;GAClCC,OAAOO,IAAI;CACTC,cAAc;CACdC,IAAI;CACJC,KAAK;CACLC,QAAQ;CACRC,OAAO;CACPC,YAAYZ,iBACV,CAAC,oBAAoB,sBAAsB,EAC3C,QACA,cAAA;CAEJ,CAAA,EACAD,OAAOc,OAAO,EACZC,OAAO;CACLN,IAAI;CACJO,aAAa;CACf,EACF,CAAA,EAAA,8yEAAA;AAUF,MAAaC,oBAAqD,EAChEC,IACAC,UACAC,SACAC,gBACD;CACC,MAAMC,QAAQpB,UAAAA;CACd,MAAMqB,mBAAmBlB,qBAAAA;AAEzB,QACE,wBAAA,cAACC,sBAAAA;EACKY;EACKE;EACTI,QAAQF,MAAMG,SAASC;EACvBX,OAAOQ;EACPI,cAAYN;IAEXF,SAAAA"}

package/dist/HeaderHeightArea/useIsInHeaderRegion.cjs

@@ -0,0 +1,18 @@
+const require_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;
+//# sourceMappingURL=useIsInHeaderRegion.cjs.map

package/dist/HeaderHeightArea/useIsInHeaderRegion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsInHeaderRegion.cjs","names":["useEffect","useState","useIsInHeaderRegion","isInHeaderRegion","setIsInHeaderRegion","checkScroll","window","pageYOffset","document","addEventListener","removeEventListener"],"sources":["../../src/HeaderHeightArea/useIsInHeaderRegion.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport const useIsInHeaderRegion = () => {\n  const [isInHeaderRegion, setIsInHeaderRegion] = useState(true);\n\n  // it is not recommended to replicate this logic in other components unless absolutely necessary, as it is\n  // a workaround for style rehydration issues when using react-use/useWindowScroll. The reasoning behind this\n  // workaround is discussed here: https://github.com/Codecademy/gamut/pull/1822#discussion_r650125406\n  useEffect(() => {\n    const checkScroll = () => setIsInHeaderRegion(window?.pageYOffset === 0);\n    checkScroll();\n    document.addEventListener('scroll', checkScroll);\n    return () => document.removeEventListener('scroll', checkScroll);\n  }, []);\n\n  return isInHeaderRegion;\n};\n"],"mappings":";;;;AAEA,MAAaE,4BAAsB;CACjC,MAAM,CAACC,kBAAkBC,2CAAgC,KAAA;AAKzDJ,4BAAU;EACR,MAAMK,oBAAoBD,oBAAoBE,QAAQC,gBAAgB,EAAA;AACtEF,eAAAA;AACAG,WAASC,iBAAiB,UAAUJ,YAAAA;AACpC,eAAaG,SAASE,oBAAoB,UAAUL,YAAAA;IACnD,EAAE,CAAA;AAEL,QAAOF"}

package/dist/HeaderHeightArea/useIsInHeaderRegion.js

@@ -1,15 +1,17 @@
-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 };
+//# sourceMappingURL=useIsInHeaderRegion.js.map

package/dist/HeaderHeightArea/useIsInHeaderRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsInHeaderRegion.js","names":["useEffect","useState","useIsInHeaderRegion","isInHeaderRegion","setIsInHeaderRegion","checkScroll","window","pageYOffset","document","addEventListener","removeEventListener"],"sources":["../../src/HeaderHeightArea/useIsInHeaderRegion.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport const useIsInHeaderRegion = () => {\n  const [isInHeaderRegion, setIsInHeaderRegion] = useState(true);\n\n  // it is not recommended to replicate this logic in other components unless absolutely necessary, as it is\n  // a workaround for style rehydration issues when using react-use/useWindowScroll. The reasoning behind this\n  // workaround is discussed here: https://github.com/Codecademy/gamut/pull/1822#discussion_r650125406\n  useEffect(() => {\n    const checkScroll = () => setIsInHeaderRegion(window?.pageYOffset === 0);\n    checkScroll();\n    document.addEventListener('scroll', checkScroll);\n    return () => document.removeEventListener('scroll', checkScroll);\n  }, []);\n\n  return isInHeaderRegion;\n};\n"],"mappings":";;;AAEA,MAAaE,4BAAsB;CACjC,MAAM,CAACC,kBAAkBC,uBAAuBH,SAAS,KAAA;AAKzDD,iBAAU;EACR,MAAMK,oBAAoBD,oBAAoBE,QAAQC,gBAAgB,EAAA;AACtEF,eAAAA;AACAG,WAASC,iBAAiB,UAAUJ,YAAAA;AACpC,eAAaG,SAASE,oBAAoB,UAAUL,YAAAA;IACnD,EAAE,CAAA;AAEL,QAAOF"}

package/dist/HorizontalScrollMenu/index.cjs

@@ -0,0 +1,57 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+require("intersection-observer");
+
+//#region src/HorizontalScrollMenu/index.tsx
+const ScrollContainer = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.FlexBox, {
+	target: "e82083l0",
+	label: "brand-ScrollContainer"
+})("scroll-snap-type:x mandatory;::-webkit-scrollbar{display:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0hvcml6b250YWxTY3JvbGxNZW51L2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0hvcml6b250YWxTY3JvbGxNZW51L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgJ2ludGVyc2VjdGlvbi1vYnNlcnZlcic7XG5cbmltcG9ydCB7IEJveCwgRmxleEJveCwgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENoaWxkcmVuLCB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuY29uc3QgU2Nyb2xsQ29udGFpbmVyID0gc3R5bGVkKEZsZXhCb3gpYFxuICBzY3JvbGwtc25hcC10eXBlOiB4IG1hbmRhdG9yeTtcbiAgOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2Nyb2xsSXRlbVdyYXBwZXIgPSBzdHlsZWQoQm94KWBcbiAgc2Nyb2xsLXNuYXAtYWxpZ246IHN0YXJ0O1xuICAmW2FyaWEtaGlkZGVuPSd0cnVlJ10ge1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgfVxuYDtcblxuZXhwb3J0IGludGVyZmFjZSBIb3Jpem9udGFsU2Nyb2xsTWVudVByb3BzIGV4dGVuZHMgV2l0aENoaWxkcmVuUHJvcCB7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IEhvcml6b250YWxTY3JvbGxNZW51OiBSZWFjdC5GQzxIb3Jpem9udGFsU2Nyb2xsTWVudVByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG59KSA9PiB7XG4gIGNvbnN0IGVsZW1lbnRzUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50W10+KFtdKTtcbiAgY29uc3QgcGFyZW50Q29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgY29uc3QgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcpIHJldHVybiBudWxsO1xuICAgIHJldHVybiBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoXG4gICAgICAoZW50cmllczogSW50ZXJzZWN0aW9uT2JzZXJ2ZXJFbnRyeVtdKSA9PiB7XG4gICAgICAgIGVudHJpZXMuZm9yRWFjaCgoZW50cnkpID0+IHtcbiAgICAgICAgICBlbnRyeS50YXJnZXQuYXJpYUhpZGRlbiA9IGVudHJ5LmlzSW50ZXJzZWN0aW5nID8gJ2ZhbHNlJyA6ICd0cnVlJztcbiAgICAgICAgfSk7XG4gICAgICB9LFxuICAgICAge1xuICAgICAgICByb290OiBwYXJlbnRDb250YWluZXJSZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcihcbiAgICAgICAgICAnW2RhdGEtb2JzZXJ2ZXJyb290PVwidHJ1ZVwiXSdcbiAgICAgICAgKSxcbiAgICAgICAgcm9vdE1hcmdpbjogJzEwMCUgMCUgMTAwJSAwJScsXG4gICAgICB9XG4gICAgKTtcbiAgfSwgW10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgbnVtYmVyT2ZDaGlsZEVsZW1lbnRzID0gQ2hpbGRyZW4udG9BcnJheShjaGlsZHJlbikubGVuZ3RoO1xuXG4gICAgaWYgKGVsZW1lbnRzUmVmLmN1cnJlbnQubGVuZ3RoID09PSBudW1iZXJPZkNoaWxkRWxlbWVudHMpIHtcbiAgICAgIGVsZW1lbnRzUmVmLmN1cnJlbnQuZm9yRWFjaCgoZW50cnk6IEhUTUxFbGVtZW50KSA9PlxuICAgICAgICBpbnRlcnNlY3Rpb25PYnNlcnZlcj8ub2JzZXJ2ZShlbnRyeSlcbiAgICAgICk7XG4gICAgfVxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBpbnRlcnNlY3Rpb25PYnNlcnZlcj8uZGlzY29ubmVjdCgpO1xuICAgIH07XG4gIH0sIFtlbGVtZW50c1JlZiwgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIsIGNoaWxkcmVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgIDxTY3JvbGxDb250YWluZXJcbiAgICAgICAgZGF0YS1vYnNlcnZlcnJvb3Q9XCJ0cnVlXCJcbiAgICAgICAgcmVmPXtwYXJlbnRDb250YWluZXJSZWZ9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBwcj17MTZ9XG4gICAgICAgIG92ZXJmbG93WD1cInNjcm9sbFwiXG4gICAgICAgIHRhYkluZGV4PXswfVxuICAgICAgPlxuICAgICAgICB7Q2hpbGRyZW4ubWFwKGNoaWxkcmVuLCAoY2hpbGQsIGluZGV4KSA9PiAoXG4gICAgICAgICAgPFNjcm9sbEl0ZW1XcmFwcGVyXG4gICAgICAgICAgICByZWY9eyhlbGVtZW50KSA9PiB7XG4gICAgICAgICAgICAgIGlmIChlbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgZWxlbWVudHNSZWYuY3VycmVudFtpbmRleF0gPSBlbGVtZW50O1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZH1cbiAgICAgICAgICA8L1Njcm9sbEl0ZW1XcmFwcGVyPlxuICAgICAgICApKX1cbiAgICAgIDwvU2Nyb2xsQ29udGFpbmVyPlxuICAgIDwvQm94PlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPd0IifQ== */");
+const ScrollItemWrapper = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.Box, {
+	target: "e82083l1",
+	label: "brand-ScrollItemWrapper"
+})("scroll-snap-align:start;&[aria-hidden='true']{visibility:hidden;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0hvcml6b250YWxTY3JvbGxNZW51L2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0hvcml6b250YWxTY3JvbGxNZW51L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgJ2ludGVyc2VjdGlvbi1vYnNlcnZlcic7XG5cbmltcG9ydCB7IEJveCwgRmxleEJveCwgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENoaWxkcmVuLCB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuY29uc3QgU2Nyb2xsQ29udGFpbmVyID0gc3R5bGVkKEZsZXhCb3gpYFxuICBzY3JvbGwtc25hcC10eXBlOiB4IG1hbmRhdG9yeTtcbiAgOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2Nyb2xsSXRlbVdyYXBwZXIgPSBzdHlsZWQoQm94KWBcbiAgc2Nyb2xsLXNuYXAtYWxpZ246IHN0YXJ0O1xuICAmW2FyaWEtaGlkZGVuPSd0cnVlJ10ge1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgfVxuYDtcblxuZXhwb3J0IGludGVyZmFjZSBIb3Jpem9udGFsU2Nyb2xsTWVudVByb3BzIGV4dGVuZHMgV2l0aENoaWxkcmVuUHJvcCB7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IEhvcml6b250YWxTY3JvbGxNZW51OiBSZWFjdC5GQzxIb3Jpem9udGFsU2Nyb2xsTWVudVByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG59KSA9PiB7XG4gIGNvbnN0IGVsZW1lbnRzUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50W10+KFtdKTtcbiAgY29uc3QgcGFyZW50Q29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgY29uc3QgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcpIHJldHVybiBudWxsO1xuICAgIHJldHVybiBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoXG4gICAgICAoZW50cmllczogSW50ZXJzZWN0aW9uT2JzZXJ2ZXJFbnRyeVtdKSA9PiB7XG4gICAgICAgIGVudHJpZXMuZm9yRWFjaCgoZW50cnkpID0+IHtcbiAgICAgICAgICBlbnRyeS50YXJnZXQuYXJpYUhpZGRlbiA9IGVudHJ5LmlzSW50ZXJzZWN0aW5nID8gJ2ZhbHNlJyA6ICd0cnVlJztcbiAgICAgICAgfSk7XG4gICAgICB9LFxuICAgICAge1xuICAgICAgICByb290OiBwYXJlbnRDb250YWluZXJSZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcihcbiAgICAgICAgICAnW2RhdGEtb2JzZXJ2ZXJyb290PVwidHJ1ZVwiXSdcbiAgICAgICAgKSxcbiAgICAgICAgcm9vdE1hcmdpbjogJzEwMCUgMCUgMTAwJSAwJScsXG4gICAgICB9XG4gICAgKTtcbiAgfSwgW10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgbnVtYmVyT2ZDaGlsZEVsZW1lbnRzID0gQ2hpbGRyZW4udG9BcnJheShjaGlsZHJlbikubGVuZ3RoO1xuXG4gICAgaWYgKGVsZW1lbnRzUmVmLmN1cnJlbnQubGVuZ3RoID09PSBudW1iZXJPZkNoaWxkRWxlbWVudHMpIHtcbiAgICAgIGVsZW1lbnRzUmVmLmN1cnJlbnQuZm9yRWFjaCgoZW50cnk6IEhUTUxFbGVtZW50KSA9PlxuICAgICAgICBpbnRlcnNlY3Rpb25PYnNlcnZlcj8ub2JzZXJ2ZShlbnRyeSlcbiAgICAgICk7XG4gICAgfVxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBpbnRlcnNlY3Rpb25PYnNlcnZlcj8uZGlzY29ubmVjdCgpO1xuICAgIH07XG4gIH0sIFtlbGVtZW50c1JlZiwgaW50ZXJzZWN0aW9uT2JzZXJ2ZXIsIGNoaWxkcmVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgIDxTY3JvbGxDb250YWluZXJcbiAgICAgICAgZGF0YS1vYnNlcnZlcnJvb3Q9XCJ0cnVlXCJcbiAgICAgICAgcmVmPXtwYXJlbnRDb250YWluZXJSZWZ9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBwcj17MTZ9XG4gICAgICAgIG92ZXJmbG93WD1cInNjcm9sbFwiXG4gICAgICAgIHRhYkluZGV4PXswfVxuICAgICAgPlxuICAgICAgICB7Q2hpbGRyZW4ubWFwKGNoaWxkcmVuLCAoY2hpbGQsIGluZGV4KSA9PiAoXG4gICAgICAgICAgPFNjcm9sbEl0ZW1XcmFwcGVyXG4gICAgICAgICAgICByZWY9eyhlbGVtZW50KSA9PiB7XG4gICAgICAgICAgICAgIGlmIChlbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgZWxlbWVudHNSZWYuY3VycmVudFtpbmRleF0gPSBlbGVtZW50O1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZH1cbiAgICAgICAgICA8L1Njcm9sbEl0ZW1XcmFwcGVyPlxuICAgICAgICApKX1cbiAgICAgIDwvU2Nyb2xsQ29udGFpbmVyPlxuICAgIDwvQm94PlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjMEIifQ== */");
+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__ */ react.createElement(_codecademy_gamut.Box, { position: "relative" }, /* @__PURE__ */ react.createElement(ScrollContainer, {
+		"data-observerroot": "true",
+		ref: parentContainerRef,
+		className,
+		pr: 16,
+		overflowX: "scroll",
+		tabIndex: 0
+	}, react.Children.map(children, (child, index) => /* @__PURE__ */ react.createElement(ScrollItemWrapper, { ref: (element) => {
+		if (element) elementsRef.current[index] = element;
+	} }, child))));
+};
+
+//#endregion
+exports.HorizontalScrollMenu = HorizontalScrollMenu;
+//# sourceMappingURL=index.cjs.map

package/dist/HorizontalScrollMenu/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","FlexBox","styled","Children","useEffect","useMemo","useRef","React","ScrollContainer","ScrollItemWrapper","HorizontalScrollMenu","children","className","elementsRef","parentContainerRef","intersectionObserver","window","IntersectionObserver","entries","forEach","entry","target","ariaHidden","isIntersecting","root","current","querySelector","rootMargin","numberOfChildElements","toArray","length","observe","disconnect","position","data-observerroot","ref","pr","overflowX","tabIndex","map","child","index","element"],"sources":["../../src/HorizontalScrollMenu/index.tsx"],"sourcesContent":["import 'intersection-observer';\n\nimport { Box, FlexBox, WithChildrenProp } from '@codecademy/gamut';\nimport styled from '@emotion/styled';\nimport { Children, useEffect, useMemo, useRef } from 'react';\nimport * as React from 'react';\n\nconst ScrollContainer = styled(FlexBox)`\n  scroll-snap-type: x mandatory;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ScrollItemWrapper = styled(Box)`\n  scroll-snap-align: start;\n  &[aria-hidden='true'] {\n    visibility: hidden;\n  }\n`;\n\nexport interface HorizontalScrollMenuProps extends WithChildrenProp {\n  className?: string;\n}\n\nexport const HorizontalScrollMenu: React.FC<HorizontalScrollMenuProps> = ({\n  children,\n  className,\n}) => {\n  const elementsRef = useRef<HTMLElement[]>([]);\n  const parentContainerRef = useRef<HTMLDivElement | null>(null);\n\n  const intersectionObserver = useMemo(() => {\n    if (typeof window === 'undefined') return null;\n    return new IntersectionObserver(\n      (entries: IntersectionObserverEntry[]) => {\n        entries.forEach((entry) => {\n          entry.target.ariaHidden = entry.isIntersecting ? 'false' : 'true';\n        });\n      },\n      {\n        root: parentContainerRef.current?.querySelector(\n          '[data-observerroot=\"true\"]'\n        ),\n        rootMargin: '100% 0% 100% 0%',\n      }\n    );\n  }, []);\n\n  useEffect(() => {\n    const numberOfChildElements = Children.toArray(children).length;\n\n    if (elementsRef.current.length === numberOfChildElements) {\n      elementsRef.current.forEach((entry: HTMLElement) =>\n        intersectionObserver?.observe(entry)\n      );\n    }\n    return () => {\n      intersectionObserver?.disconnect();\n    };\n  }, [elementsRef, intersectionObserver, children]);\n\n  return (\n    <Box position=\"relative\">\n      <ScrollContainer\n        data-observerroot=\"true\"\n        ref={parentContainerRef}\n        className={className}\n        pr={16}\n        overflowX=\"scroll\"\n        tabIndex={0}\n      >\n        {Children.map(children, (child, index) => (\n          <ScrollItemWrapper\n            ref={(element) => {\n              if (element) {\n                elementsRef.current[index] = element;\n              }\n            }}\n          >\n            {child}\n          </ScrollItemWrapper>\n        ))}\n      </ScrollContainer>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;AAOA,MAAMQ,kBAAkBN,6CAAOD,2BAAAA;;;;AAO/B,MAAMQ,oBAAoBP,6CAAOF,uBAAAA;;;;AAWjC,MAAaU,wBAA6D,EACxEC,UACAC,gBACD;CACC,MAAMC,gCAAoC,EAAE,CAAA;CAC5C,MAAMC,uCAAmD,KAAA;CAEzD,MAAMC,gDAA+B;AACnC,MAAI,OAAOC,WAAW,YAAa,QAAO;AAC1C,SAAO,IAAIC,sBACRC,YAAAA;AACCA,WAAQC,SAASC,UAAAA;AACfA,UAAMC,OAAOC,aAAaF,MAAMG,iBAAiB,UAAU;KAC7D;KAEF;GACEC,MAAMV,mBAAmBW,SAASC,cAChC,+BAAA;GAEFC,YAAY;GACd,CAAA;IAED,EAAE,CAAA;AAELvB,4BAAU;EACR,MAAMwB,wBAAwBzB,eAAS0B,QAAQlB,SAAAA,CAAUmB;AAEzD,MAAIjB,YAAYY,QAAQK,WAAWF,sBACjCf,aAAYY,QAAQN,SAASC,UAC3BL,sBAAsBgB,QAAQX,MAAAA,CAAAA;AAGlC,eAAO;AACLL,yBAAsBiB,YAAAA;;IAEvB;EAACnB;EAAaE;EAAsBJ;EAAS,CAAA;AAEhD,QACE,sBAAA,cAACX,uBAAAA,EAAIiC,UAAS,cACZ,sBAAA,cAACzB,iBAAAA;EACC0B,qBAAkB;EAClBC,KAAKrB;EACMF;EACXwB,IAAI;EACJC,WAAU;EACVC,UAAU;IAETnC,eAASoC,IAAI5B,WAAW6B,OAAOC,UAC9B,sBAAA,cAAChC,mBAAAA,EACC0B,MAAMO,YAAAA;AACJ,MAAIA,QACF7B,aAAYY,QAAQgB,SAASC;MAIhCF,MAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/HorizontalScrollMenu/index.d.cts

@@ -0,0 +1,11 @@
+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 };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/HorizontalScrollMenu/index.tsx"],"mappings":";;;;UAqBiB,yBAAA,SAAkC,gBAAA;EACjD,SAAA;AAAA;AAAA,cAGW,oBAAA,EAAsB,OAAA,CAAM,EAAA,CAAG,yBAAA"}

package/dist/HorizontalScrollMenu/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/HorizontalScrollMenu/index.tsx"],"mappings":";;;;;UAqBiB,yBAAA,SAAkC,gBAAA;EACjD,SAAA;AAAA;AAAA,cAGW,oBAAA,EAAsB,OAAA,CAAM,EAAA,CAAG,yBAAA"}