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

package/dist/Grid/GridCollapse.test.js

@@ -0,0 +1,96 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import userEvent from '@testing-library/user-event';
+import times from 'lodash/times';
+import { getMediaQuery, GridCollapse } from './GridCollapse';
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderView = setupRtl(GridCollapse, {
+  gridColumnEnd: {
+    _: 'span 2',
+    lg: 'span 6'
+  },
+  columnCount: {
+    _: 4
+  },
+  initialMaxShown: {
+    _: 4
+  },
+  children: times(20, i => /*#__PURE__*/_jsx("div", {
+    children: "child"
+  }, i))
+});
+describe('GridCollapse', () => {
+  it('renders a "Show all" link when not expanded', () => {
+    const {
+      view
+    } = renderView();
+    view.getByText('Show all');
+    expect(view.queryByText('Show fewer')).toBeNull();
+  });
+  it('renders a "Show fewer" link when expanded', async () => {
+    const {
+      view
+    } = renderView();
+    await userEvent.click(view.getByText('Show all'));
+    view.getByText('Show fewer');
+    expect(view.queryByText('Show all')).toBeNull();
+  });
+  describe('when pageSize is passed', () => {
+    it('renders only an "expand" link on the first page', () => {
+      const {
+        view
+      } = renderView({
+        pageSize: {
+          _: 2
+        }
+      });
+      view.getByText('Show all');
+      expect(view.queryByText('Show fewer')).toBeNull();
+    });
+
+    // we would like to test that only a "collapse" link is rendered on the last page,
+    // however that is determined via styling as opposed to js logic so we can't!
+
+    it('renders both an "expand" and "collapse" link otherwise', async () => {
+      const {
+        view
+      } = renderView({
+        pageSize: {
+          _: 2
+        }
+      });
+      await userEvent.click(view.getByText('Show all'));
+      view.getByText('Show fewer');
+    });
+  });
+  it("calls onExpandClick with the current expanded state if it's passed as a prop", async () => {
+    const onExpandClick = jest.fn();
+    const {
+      view
+    } = renderView({
+      onExpandClick
+    });
+    await userEvent.click(view.getByText('Show all'));
+    expect(onExpandClick).toHaveBeenCalledWith(false);
+    await userEvent.click(view.getByText('Show fewer'));
+    expect(onExpandClick).toHaveBeenCalledWith(true);
+  });
+  it('getMediaQuery returns a range if both start and end are passed', () => {
+    const res = getMediaQuery({
+      start: '400px',
+      end: '500px',
+      css: 'display: block;'
+    });
+    expect(res).toBe('@media only screen and (min-width: 400px) and (max-width: calc(500px - 1px)) { display: block; }');
+  });
+  it('getMediaQuery returns an unbounded range if end is not passed', () => {
+    const res = getMediaQuery({
+      start: '400px',
+      css: 'display: block;'
+    });
+    expect(res).toBe('@media only screen and (min-width: 400px) { display: block; }');
+  });
+
+  // we would love to be able to test the expand/collapse functionality
+  // but since there is a different max shown at each breakpoint, we had to accomplish this via css
+  // which is not easily testable with our current infrastructure
+});

package/dist/Grid/Subgrid.d.ts

@@ -0,0 +1,23 @@
+import { GridBox } from '@codecademy/gamut';
+import { ComponentProps, FC } from 'react';
+import { ColumnCount } from './getCSSFromColumnCount';
+/**
+ * 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
+ */
+export declare const subgridContext: import("react").Context<ColumnCount>;
+export declare const Subgrid: FC<ComponentProps<typeof GridBox>>;

package/dist/Grid/Subgrid.js

@@ -0,0 +1,37 @@
+import { GridBox } from '@codecademy/gamut';
+import { createContext, useContext } from 'react';
+import { getCSSFromColumnCount } from './getCSSFromColumnCount';
+
+/**
+ * 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
+  });
+};

package/dist/Grid/getCSSFromColumnCount.d.ts

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

package/dist/Grid/getCSSFromColumnCount.js

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

package/dist/Grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Subgrid';
+export * from './GridCollapse';
+export * from './getCSSFromColumnCount';

package/dist/Grid/index.js

@@ -0,0 +1,3 @@
+export * from './Subgrid';
+export * from './GridCollapse';
+export * from './getCSSFromColumnCount';

package/dist/HeaderHeightArea/index.d.ts

@@ -0,0 +1,9 @@
+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;
+}
+export declare const HeaderHeightArea: React.FC<HeaderHeightAreaProps>;

package/dist/HeaderHeightArea/index.js

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

package/dist/HeaderHeightArea/useIsInHeaderRegion.d.ts

@@ -0,0 +1 @@
+export declare const useIsInHeaderRegion: () => boolean;

package/dist/HeaderHeightArea/useIsInHeaderRegion.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+export const useIsInHeaderRegion = () => {
+  const [isInHeaderRegion, setIsInHeaderRegion] = useState(true);
+
+  // 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;
+};

package/dist/HorizontalScrollMenu/index.d.ts

@@ -0,0 +1,7 @@
+import 'intersection-observer';
+import { WithChildrenProp } from '@codecademy/gamut';
+import * as React from 'react';
+export interface HorizontalScrollMenuProps extends WithChildrenProp {
+    className?: string;
+}
+export declare const HorizontalScrollMenu: React.FC<HorizontalScrollMenuProps>;

package/dist/HorizontalScrollMenu/index.js

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

package/dist/HubCard/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type HubCardProps = {
+    eyebrowTitle: string;
+    title: string;
+    backgroundImage: string;
+    backgroundPosition: 'left' | 'right';
+};
+export declare const HubCard: React.FC<HubCardProps>;

package/dist/HubCard/index.js

@@ -0,0 +1,38 @@
+import { Box, Card, FlexBox, Text } from '@codecademy/gamut';
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HubCard = ({
+  eyebrowTitle,
+  title,
+  backgroundPosition,
+  backgroundImage
+}) => /*#__PURE__*/_jsx(Card, {
+  variant: "white",
+  isInteractive: true,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: backgroundPosition,
+  backgroundImage: `url(${backgroundImage})`,
+  height: "11.25rem",
+  children: /*#__PURE__*/_jsxs(Box, {
+    p: 24,
+    bg: "white",
+    width: "100%",
+    maxWidth: "17.5rem",
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "p",
+      fontSize: 16,
+      children: eyebrowTitle
+    }), /*#__PURE__*/_jsx(FlexBox, {
+      alignItems: "center",
+      children: /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        variant: "title-sm",
+        children: title
+      })
+    })]
+  })
+});

package/dist/InfoCard/index.d.ts

@@ -0,0 +1,19 @@
+import { BoxProps, HeadingTags } from '@codecademy/gamut';
+import * as React from 'react';
+export type TagColor = 'blue' | 'green' | 'pink';
+export interface InfoCardProps {
+    href: string;
+    onClick?: () => void;
+    topText: string;
+    title: string;
+    subtitle?: string;
+    body?: string;
+    bottomLeftText?: string;
+    bottomRightTagText?: string;
+    bottomRightTagColor?: TagColor;
+    cardHeight?: string | number;
+    cardPadding?: BoxProps['p'];
+    titleHeadingLevel?: HeadingTags;
+    rightContent?: React.ReactNode;
+}
+export declare const InfoCard: React.FC<InfoCardProps>;

package/dist/InfoCard/index.js

@@ -0,0 +1,157 @@
+import { Anchor, Box, Card, FlexBox, Markdown, Text } from '@codecademy/gamut';
+import { pxRem } from '@codecademy/gamut-styles';
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cardMinWidth = 250;
+const tagColorMap = {
+  blue: 'paleBlue',
+  green: 'paleGreen',
+  pink: 'palePink'
+};
+const TopText = ({
+  text
+}) => /*#__PURE__*/_jsx(Text, {
+  display: "flex",
+  fontSize: 14,
+  mb: 12,
+  fontFamily: "accent",
+  children: text
+});
+const Title = ({
+  text,
+  headingLevel
+}) => /*#__PURE__*/_jsx(Text, {
+  as: headingLevel,
+  mb: 4,
+  fontSize: 20,
+  children: /*#__PURE__*/_jsx(Text, {
+    truncate: "ellipsis",
+    truncateLines: 2,
+    children: text
+  })
+});
+const Subtitle = ({
+  text
+}) => /*#__PURE__*/_jsx(Text, {
+  variant: "p-small",
+  textColor: "gray-900",
+  children: /*#__PURE__*/_jsx(Text, {
+    truncate: "ellipsis",
+    truncateLines: 2,
+    children: text
+  })
+});
+const Body = ({
+  text
+}) => /*#__PURE__*/_jsx(Markdown, {
+  text: text,
+  overrides: {
+    p: {
+      component: props => /*#__PURE__*/_jsx(Text, {
+        ...props,
+        textColor: "gray-900",
+        variant: "p-small",
+        truncate: "ellipsis",
+        truncateLines: 3
+      })
+    },
+    a: {
+      component: Anchor
+    }
+  }
+});
+const Footer = ({
+  bottomLeftText,
+  bottomRightTagText,
+  bottomRightTagColor
+}) => /*#__PURE__*/_jsxs(FlexBox, {
+  alignItems: "flex-end",
+  justifyContent: "space-between",
+  children: [/*#__PURE__*/_jsx(Box, {
+    children: bottomLeftText && /*#__PURE__*/_jsx(BottomLeftText, {
+      text: bottomLeftText
+    })
+  }), /*#__PURE__*/_jsx(Box, {
+    children: bottomRightTagText && /*#__PURE__*/_jsx(BottomRightTag, {
+      text: bottomRightTagText,
+      color: bottomRightTagColor
+    })
+  })]
+});
+const BottomLeftText = ({
+  text
+}) => /*#__PURE__*/_jsx(Text, {
+  maxWidth: "calc(100%-16px)",
+  px: 16,
+  variant: "p-small",
+  textColor: "gray-900",
+  children: text
+});
+const BottomRightTag = ({
+  text,
+  color
+}) => /*#__PURE__*/_jsx(Box, {
+  bg: tagColorMap[color],
+  children: /*#__PURE__*/_jsx(Text, {
+    py: 4,
+    p: 12,
+    variant: "title-xs",
+    fontSize: 14,
+    whiteSpace: "nowrap",
+    children: text
+  })
+});
+export const InfoCard = ({
+  href,
+  onClick,
+  topText,
+  title,
+  subtitle,
+  body,
+  bottomLeftText,
+  bottomRightTagText,
+  bottomRightTagColor = 'pink',
+  cardHeight = 286,
+  cardPadding = 16,
+  titleHeadingLevel = 'h3',
+  rightContent
+}) => {
+  const displayFooter = bottomLeftText || bottomRightTagText;
+  return /*#__PURE__*/_jsx(Anchor, {
+    variant: "interface",
+    href: href,
+    onClick: () => onClick?.(),
+    children: /*#__PURE__*/_jsxs(Card, {
+      display: "flex",
+      flexDirection: "column",
+      height: pxRem(cardHeight),
+      justifyContent: "space-between",
+      minWidth: pxRem(cardMinWidth),
+      variant: "white",
+      isInteractive: true,
+      p: 0,
+      position: "relative",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        pb: displayFooter ? 0 : cardPadding,
+        p: cardPadding,
+        children: [/*#__PURE__*/_jsx(TopText, {
+          text: topText
+        }), /*#__PURE__*/_jsxs(FlexBox, {
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/_jsx(Title, {
+            text: title,
+            headingLevel: titleHeadingLevel
+          }), rightContent && rightContent]
+        }), subtitle && /*#__PURE__*/_jsx(Subtitle, {
+          text: subtitle
+        }), body && /*#__PURE__*/_jsx(Body, {
+          text: body
+        })]
+      }), displayFooter && /*#__PURE__*/_jsx(Footer, {
+        bottomLeftText: bottomLeftText,
+        bottomRightTagText: bottomRightTagText,
+        bottomRightTagColor: bottomRightTagColor
+      })]
+    })
+  });
+};

package/dist/InstructorCard/__tests__/__fixtures__/index.d.ts

@@ -0,0 +1,2 @@
+import { InstructorCardProps } from '../../index';
+export declare const mockInstructorCardProps: InstructorCardProps;

package/dist/InstructorCard/index.d.ts

@@ -0,0 +1,18 @@
+export declare const Divider: React.FC;
+export type InstructorCardProps = {
+    /** The bootcamp title */
+    title: string;
+    /** Instructor's full name */
+    instructorName: string;
+    /** Instructor's professional title */
+    instructorTitle: string;
+    /** URL for the instructor's profile pic (includes background gradient) */
+    instructorImageUrl?: string;
+    /** Formatted start date for the next cohort (e.g. "Feb 10") */
+    nextCohortStartDate?: string;
+    /** Link destination */
+    href: string;
+    /** Click handler */
+    onClick: () => void;
+};
+export declare const InstructorCard: import("react").ForwardRefExoticComponent<InstructorCardProps & import("react").RefAttributes<HTMLAnchorElement>>;