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

package/dist/HorizontalScrollMenu/index.js

@@ -1,75 +1,55 @@
-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 * as React$1 from "react";
+import { Children, useEffect, useMemo, useRef } from "react";
+import "intersection-observer";
+
+//#region src/HorizontalScrollMenu/index.tsx
+const ScrollContainer = /* @__PURE__ */ styled(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__ */ styled(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 = 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__ */ React$1.createElement(Box, { position: "relative" }, /* @__PURE__ */ React$1.createElement(ScrollContainer, {
+		"data-observerroot": "true",
+		ref: parentContainerRef,
+		className,
+		pr: 16,
+		overflowX: "scroll",
+		tabIndex: 0
+	}, Children.map(children, (child, index) => /* @__PURE__ */ React$1.createElement(ScrollItemWrapper, { ref: (element) => {
+		if (element) elementsRef.current[index] = element;
+	} }, child))));
+};
+
+//#endregion
+export { HorizontalScrollMenu };
+//# sourceMappingURL=index.js.map

package/dist/HorizontalScrollMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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,uBAAOD,SAAAA;;;;AAO/B,MAAMQ,oBAAoBP,uBAAOF,KAAAA;;;;AAWjC,MAAaU,wBAA6D,EACxEC,UACAC,gBACD;CACC,MAAMC,cAAcP,OAAsB,EAAE,CAAA;CAC5C,MAAMQ,qBAAqBR,OAA8B,KAAA;CAEzD,MAAMS,uBAAuBV,cAAQ;AACnC,MAAI,OAAOW,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,iBAAU;EACR,MAAMwB,wBAAwBzB,SAAS0B,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,wBAAA,cAACX,KAAAA,EAAIiC,UAAS,cACZ,wBAAA,cAACzB,iBAAAA;EACC0B,qBAAkB;EAClBC,KAAKrB;EACMF;EACXwB,IAAI;EACJC,WAAU;EACVC,UAAU;IAETnC,SAASoC,IAAI5B,WAAW6B,OAAOC,UAC9B,wBAAA,cAAChC,mBAAAA,EACC0B,MAAMO,YAAAA;AACJ,MAAIA,QACF7B,aAAYY,QAAQgB,SAASC;MAIhCF,MAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/HubCard/index.cjs

@@ -0,0 +1,33 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/HubCard/index.tsx
+const HubCard = ({ eyebrowTitle, title, backgroundPosition, backgroundImage }) => /* @__PURE__ */ react.createElement(_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"
+}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, {
+	p: 24,
+	bg: "white",
+	width: "100%",
+	maxWidth: "17.5rem"
+}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	as: "p",
+	fontSize: 16
+}, eyebrowTitle), /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	as: "p",
+	variant: "title-sm"
+}, title))));
+
+//#endregion
+exports.HubCard = HubCard;
+//# sourceMappingURL=index.cjs.map

package/dist/HubCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","Card","FlexBox","Text","React","HubCard","eyebrowTitle","title","backgroundPosition","backgroundImage","variant","isInteractive","display","justifyContent","alignItems","backgroundSize","backgroundRepeat","height","p","bg","width","maxWidth","as","fontSize"],"sources":["../../src/HubCard/index.tsx"],"sourcesContent":["import { Box, Card, FlexBox, Text } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport type HubCardProps = {\n  eyebrowTitle: string;\n  title: string;\n  backgroundImage: string;\n  backgroundPosition: 'left' | 'right';\n};\n\nexport const HubCard: React.FC<HubCardProps> = ({\n  eyebrowTitle,\n  title,\n  backgroundPosition,\n  backgroundImage,\n}) => (\n  <Card\n    variant=\"white\"\n    isInteractive\n    display=\"flex\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    backgroundSize=\"cover\"\n    backgroundRepeat=\"no-repeat\"\n    backgroundPosition={backgroundPosition}\n    backgroundImage={`url(${backgroundImage})`}\n    height=\"11.25rem\"\n  >\n    <Box p={24} bg=\"white\" width=\"100%\" maxWidth=\"17.5rem\">\n      <Text as=\"p\" fontSize={16}>\n        {eyebrowTitle}\n      </Text>\n      <FlexBox alignItems=\"center\">\n        <Text as=\"p\" variant=\"title-sm\">\n          {title}\n        </Text>\n      </FlexBox>\n    </Box>\n  </Card>\n);\n"],"mappings":";;;;;;AAUA,MAAaK,WAAmC,EAC9CC,cACAC,OACAC,oBACAC,sBAEA,sBAAA,cAACR,wBAAAA;CACCS,SAAQ;CACRC,eAAAA;CACAC,SAAQ;CACRC,gBAAe;CACfC,YAAW;CACXC,gBAAe;CACfC,kBAAiB;CACGR;CACpBC,iBAAiB,OAAOA,gBAAgB;CACxCQ,QAAO;GAEP,sBAAA,cAACjB,uBAAAA;CAAIkB,GAAG;CAAIC,IAAG;CAAQC,OAAM;CAAOC,UAAS;GAC3C,sBAAA,cAAClB,wBAAAA;CAAKmB,IAAG;CAAIC,UAAU;GACpBjB,aAAAA,EAEH,sBAAA,cAACJ,2BAAAA,EAAQY,YAAW,YAClB,sBAAA,cAACX,wBAAAA;CAAKmB,IAAG;CAAIZ,SAAQ;GAClBH,MAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/HubCard/index.d.cts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/HubCard/index.tsx"],"mappings":";;;KAGY,YAAA;EACV,YAAA;EACA,KAAA;EACA,eAAA;EACA,kBAAA;AAAA;AAAA,cAGW,OAAA,EAAS,OAAA,CAAM,EAAA,CAAG,YAAA"}

package/dist/HubCard/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/HubCard/index.tsx"],"mappings":";;;KAGY,YAAA;EACV,YAAA;EACA,KAAA;EACA,eAAA;EACA,kBAAA;AAAA;AAAA,cAGW,OAAA,EAAS,OAAA,CAAM,EAAA,CAAG,YAAA"}

package/dist/HubCard/index.js

@@ -1,38 +1,31 @@
-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
-      })
-    })]
-  })
-});
+import { Box, Card, FlexBox, Text } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/HubCard/index.tsx
+const HubCard = ({ eyebrowTitle, title, backgroundPosition, backgroundImage }) => /* @__PURE__ */ React$1.createElement(Card, {
+	variant: "white",
+	isInteractive: true,
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	backgroundSize: "cover",
+	backgroundRepeat: "no-repeat",
+	backgroundPosition,
+	backgroundImage: `url(${backgroundImage})`,
+	height: "11.25rem"
+}, /* @__PURE__ */ React$1.createElement(Box, {
+	p: 24,
+	bg: "white",
+	width: "100%",
+	maxWidth: "17.5rem"
+}, /* @__PURE__ */ React$1.createElement(Text, {
+	as: "p",
+	fontSize: 16
+}, eyebrowTitle), /* @__PURE__ */ React$1.createElement(FlexBox, { alignItems: "center" }, /* @__PURE__ */ React$1.createElement(Text, {
+	as: "p",
+	variant: "title-sm"
+}, title))));
+
+//#endregion
+export { HubCard };
+//# sourceMappingURL=index.js.map

package/dist/HubCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","Card","FlexBox","Text","React","HubCard","eyebrowTitle","title","backgroundPosition","backgroundImage","variant","isInteractive","display","justifyContent","alignItems","backgroundSize","backgroundRepeat","height","p","bg","width","maxWidth","as","fontSize"],"sources":["../../src/HubCard/index.tsx"],"sourcesContent":["import { Box, Card, FlexBox, Text } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport type HubCardProps = {\n  eyebrowTitle: string;\n  title: string;\n  backgroundImage: string;\n  backgroundPosition: 'left' | 'right';\n};\n\nexport const HubCard: React.FC<HubCardProps> = ({\n  eyebrowTitle,\n  title,\n  backgroundPosition,\n  backgroundImage,\n}) => (\n  <Card\n    variant=\"white\"\n    isInteractive\n    display=\"flex\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    backgroundSize=\"cover\"\n    backgroundRepeat=\"no-repeat\"\n    backgroundPosition={backgroundPosition}\n    backgroundImage={`url(${backgroundImage})`}\n    height=\"11.25rem\"\n  >\n    <Box p={24} bg=\"white\" width=\"100%\" maxWidth=\"17.5rem\">\n      <Text as=\"p\" fontSize={16}>\n        {eyebrowTitle}\n      </Text>\n      <FlexBox alignItems=\"center\">\n        <Text as=\"p\" variant=\"title-sm\">\n          {title}\n        </Text>\n      </FlexBox>\n    </Box>\n  </Card>\n);\n"],"mappings":";;;;AAUA,MAAaK,WAAmC,EAC9CC,cACAC,OACAC,oBACAC,sBAEA,wBAAA,cAACR,MAAAA;CACCS,SAAQ;CACRC,eAAAA;CACAC,SAAQ;CACRC,gBAAe;CACfC,YAAW;CACXC,gBAAe;CACfC,kBAAiB;CACGR;CACpBC,iBAAiB,OAAOA,gBAAgB;CACxCQ,QAAO;GAEP,wBAAA,cAACjB,KAAAA;CAAIkB,GAAG;CAAIC,IAAG;CAAQC,OAAM;CAAOC,UAAS;GAC3C,wBAAA,cAAClB,MAAAA;CAAKmB,IAAG;CAAIC,UAAU;GACpBjB,aAAAA,EAEH,wBAAA,cAACJ,SAAAA,EAAQY,YAAW,YAClB,wBAAA,cAACX,MAAAA;CAAKmB,IAAG;CAAIZ,SAAQ;GAClBH,MAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/InfoCard/index.cjs

@@ -0,0 +1,99 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/InfoCard/index.tsx
+const cardMinWidth = 250;
+const tagColorMap = {
+	blue: "paleBlue",
+	green: "paleGreen",
+	pink: "palePink"
+};
+const TopText = ({ text }) => /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	display: "flex",
+	fontSize: 14,
+	mb: 12,
+	fontFamily: "accent"
+}, text);
+const Title = ({ text, headingLevel }) => /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	as: headingLevel,
+	mb: 4,
+	fontSize: 20
+}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	truncate: "ellipsis",
+	truncateLines: 2
+}, text));
+const Subtitle = ({ text }) => /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	variant: "p-small",
+	textColor: "gray-900"
+}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	truncate: "ellipsis",
+	truncateLines: 2
+}, text));
+const Body = ({ text }) => /* @__PURE__ */ react.createElement(_codecademy_gamut.Markdown, {
+	text,
+	overrides: {
+		p: { component: (props) => /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+			...props,
+			textColor: "gray-900",
+			variant: "p-small",
+			truncate: "ellipsis",
+			truncateLines: 3
+		}) },
+		a: { component: _codecademy_gamut.Anchor }
+	}
+});
+const Footer = ({ bottomLeftText, bottomRightTagText, bottomRightTagColor }) => /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, {
+	alignItems: "flex-end",
+	justifyContent: "space-between"
+}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, null, bottomLeftText && /* @__PURE__ */ react.createElement(BottomLeftText, { text: bottomLeftText })), /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, null, bottomRightTagText && /* @__PURE__ */ react.createElement(BottomRightTag, {
+	text: bottomRightTagText,
+	color: bottomRightTagColor
+})));
+const BottomLeftText = ({ text }) => /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	maxWidth: "calc(100%-16px)",
+	px: 16,
+	variant: "p-small",
+	textColor: "gray-900"
+}, text);
+const BottomRightTag = ({ text, color }) => /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, { bg: tagColorMap[color] }, /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+	py: 4,
+	p: 12,
+	variant: "title-xs",
+	fontSize: 14,
+	whiteSpace: "nowrap"
+}, text));
+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__ */ react.createElement(_codecademy_gamut.Anchor, {
+		variant: "interface",
+		href,
+		onClick: () => onClick?.()
+	}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Card, {
+		display: "flex",
+		flexDirection: "column",
+		height: (0, _codecademy_gamut_styles.pxRem)(cardHeight),
+		justifyContent: "space-between",
+		minWidth: (0, _codecademy_gamut_styles.pxRem)(cardMinWidth),
+		variant: "white",
+		isInteractive: true,
+		p: 0,
+		position: "relative"
+	}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, {
+		pb: displayFooter ? 0 : cardPadding,
+		p: cardPadding
+	}, /* @__PURE__ */ react.createElement(TopText, { text: topText }), /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, { justifyContent: "space-between" }, /* @__PURE__ */ react.createElement(Title, {
+		text: title,
+		headingLevel: titleHeadingLevel
+	}), rightContent && rightContent), subtitle && /* @__PURE__ */ react.createElement(Subtitle, { text: subtitle }), body && /* @__PURE__ */ react.createElement(Body, { text: body })), displayFooter && /* @__PURE__ */ react.createElement(Footer, {
+		bottomLeftText,
+		bottomRightTagText,
+		bottomRightTagColor
+	})));
+};
+
+//#endregion
+exports.InfoCard = InfoCard;
+//# sourceMappingURL=index.cjs.map

package/dist/InfoCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Anchor","Box","Card","FlexBox","Markdown","Text","pxRem","React","cardMinWidth","tagColorMap","blue","green","pink","TopText","text","display","fontSize","mb","fontFamily","Title","headingLevel","as","truncate","truncateLines","Subtitle","variant","textColor","Body","overrides","p","component","props","a","Footer","bottomLeftText","bottomRightTagText","bottomRightTagColor","alignItems","justifyContent","BottomLeftText","BottomRightTag","color","maxWidth","px","bg","py","whiteSpace","InfoCard","href","onClick","topText","title","subtitle","body","cardHeight","cardPadding","titleHeadingLevel","rightContent","displayFooter","flexDirection","height","minWidth","isInteractive","position","pb"],"sources":["../../src/InfoCard/index.tsx"],"sourcesContent":["import {\n  Anchor,\n  Box,\n  BoxProps,\n  Card,\n  FlexBox,\n  HeadingTags,\n  Markdown,\n  Text,\n} from '@codecademy/gamut';\nimport { pxRem } from '@codecademy/gamut-styles';\nimport { Theme } from '@emotion/react';\nimport * as React from 'react';\n\nconst cardMinWidth = 250;\n\nexport type TagColor = 'blue' | 'green' | 'pink';\nconst tagColorMap: Record<TagColor, keyof Theme['colors']> = {\n  blue: 'paleBlue',\n  green: 'paleGreen',\n  pink: 'palePink',\n};\n\ninterface TextProps {\n  text: string;\n}\n\ninterface TitleProps {\n  text: string;\n  headingLevel: HeadingTags;\n}\n\ninterface FooterProps {\n  bottomLeftText?: string;\n  bottomRightTagText?: string;\n  bottomRightTagColor: TagColor;\n}\n\ninterface BottomRightTagProps {\n  text: string;\n  color: TagColor;\n}\n\nconst TopText: React.FC<TextProps> = ({ text }) => (\n  <Text display=\"flex\" fontSize={14} mb={12} fontFamily=\"accent\">\n    {text}\n  </Text>\n);\n\nconst Title: React.FC<TitleProps> = ({ text, headingLevel }) => (\n  <Text as={headingLevel} mb={4} fontSize={20}>\n    <Text truncate=\"ellipsis\" truncateLines={2}>\n      {text}\n    </Text>\n  </Text>\n);\n\nconst Subtitle: React.FC<TextProps> = ({ text }) => (\n  <Text variant=\"p-small\" textColor=\"gray-900\">\n    <Text truncate=\"ellipsis\" truncateLines={2}>\n      {text}\n    </Text>\n  </Text>\n);\n\nconst Body: React.FC<TextProps> = ({ text }) => (\n  <Markdown\n    text={text}\n    overrides={{\n      p: {\n        component: (props) => (\n          <Text\n            {...props}\n            textColor=\"gray-900\"\n            variant=\"p-small\"\n            truncate=\"ellipsis\"\n            truncateLines={3}\n          />\n        ),\n      },\n      a: {\n        component: Anchor,\n      },\n    }}\n  />\n);\n\nconst Footer: React.FC<FooterProps> = ({\n  bottomLeftText,\n  bottomRightTagText,\n  bottomRightTagColor,\n}) => (\n  <FlexBox alignItems=\"flex-end\" justifyContent=\"space-between\">\n    <Box>{bottomLeftText && <BottomLeftText text={bottomLeftText} />}</Box>\n    <Box>\n      {bottomRightTagText && (\n        <BottomRightTag text={bottomRightTagText} color={bottomRightTagColor} />\n      )}\n    </Box>\n  </FlexBox>\n);\n\nconst BottomLeftText: React.FC<TextProps> = ({ text }) => (\n  <Text\n    maxWidth=\"calc(100%-16px)\"\n    px={16}\n    variant=\"p-small\"\n    textColor=\"gray-900\"\n  >\n    {text}\n  </Text>\n);\n\nconst BottomRightTag: React.FC<BottomRightTagProps> = ({ text, color }) => (\n  <Box bg={tagColorMap[color]}>\n    <Text py={4} p={12} variant=\"title-xs\" fontSize={14} whiteSpace=\"nowrap\">\n      {text}\n    </Text>\n  </Box>\n);\n\nexport interface InfoCardProps {\n  href: string;\n  onClick?: () => void;\n  topText: string;\n  title: string;\n  subtitle?: string;\n  body?: string;\n  bottomLeftText?: string;\n  bottomRightTagText?: string;\n  bottomRightTagColor?: TagColor;\n  cardHeight?: string | number;\n  cardPadding?: BoxProps['p'];\n  titleHeadingLevel?: HeadingTags;\n  rightContent?: React.ReactNode;\n}\n\nexport const InfoCard: React.FC<InfoCardProps> = ({\n  href,\n  onClick,\n  topText,\n  title,\n  subtitle,\n  body,\n  bottomLeftText,\n  bottomRightTagText,\n  bottomRightTagColor = 'pink',\n  cardHeight = 286,\n  cardPadding = 16,\n  titleHeadingLevel = 'h3',\n  rightContent,\n}) => {\n  const displayFooter = bottomLeftText || bottomRightTagText;\n\n  return (\n    <Anchor variant=\"interface\" href={href} onClick={() => onClick?.()}>\n      <Card\n        display=\"flex\"\n        flexDirection=\"column\"\n        height={pxRem(cardHeight)}\n        justifyContent=\"space-between\"\n        minWidth={pxRem(cardMinWidth)}\n        variant=\"white\"\n        isInteractive\n        p={0}\n        position=\"relative\"\n      >\n        <Box pb={displayFooter ? 0 : cardPadding} p={cardPadding}>\n          <TopText text={topText} />\n          <FlexBox justifyContent=\"space-between\">\n            <Title text={title} headingLevel={titleHeadingLevel} />\n            {rightContent && rightContent}\n          </FlexBox>\n          {subtitle && <Subtitle text={subtitle} />}\n          {body && <Body text={body} />}\n        </Box>\n        {displayFooter && (\n          <Footer\n            bottomLeftText={bottomLeftText}\n            bottomRightTagText={bottomRightTagText}\n            bottomRightTagColor={bottomRightTagColor}\n          />\n        )}\n      </Card>\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;;;AAcA,MAAMQ,eAAe;AAGrB,MAAMC,cAAuD;CAC3DC,MAAM;CACNC,OAAO;CACPC,MAAM;CACR;AAsBA,MAAMC,WAAgC,EAAEC,WACtC,sBAAA,cAACT,wBAAAA;CAAKU,SAAQ;CAAOC,UAAU;CAAIC,IAAI;CAAIC,YAAW;GACnDJ,KAAAA;AAIL,MAAMK,SAA+B,EAAEL,MAAMM,mBAC3C,sBAAA,cAACf,wBAAAA;CAAKgB,IAAID;CAAcH,IAAI;CAAGD,UAAU;GACvC,sBAAA,cAACX,wBAAAA;CAAKiB,UAAS;CAAWC,eAAe;GACtCT,KAAAA,CAAAA;AAKP,MAAMU,YAAiC,EAAEV,WACvC,sBAAA,cAACT,wBAAAA;CAAKoB,SAAQ;CAAUC,WAAU;GAChC,sBAAA,cAACrB,wBAAAA;CAAKiB,UAAS;CAAWC,eAAe;GACtCT,KAAAA,CAAAA;AAKP,MAAMa,QAA6B,EAAEb,WACnC,sBAAA,cAACV,4BAAAA;CACOU;CACNc,WAAW;EACTC,GAAG,EACDC,YAAYC,UACV,sBAAA,cAAC1B,wBAAAA;GACE,GAAG0B;GACJL,WAAU;GACVD,SAAQ;GACRH,UAAS;GACTC,eAAe;MAGrB;EACAS,GAAG,EACDF,WAAW9B,0BACb;EACF;;AAIJ,MAAMiC,UAAiC,EACrCC,gBACAC,oBACAC,0BAEA,sBAAA,cAACjC,2BAAAA;CAAQkC,YAAW;CAAWC,gBAAe;GAC5C,sBAAA,cAACrC,uBAAAA,MAAKiC,kBAAkB,sBAAA,cAACK,gBAAAA,EAAezB,MAAMoB,oBAC9C,sBAAA,cAACjC,uBAAAA,MACEkC,sBACC,sBAAA,cAACK,gBAAAA;CAAe1B,MAAMqB;CAAoBM,OAAOL;;AAMzD,MAAMG,kBAAuC,EAAEzB,WAC7C,sBAAA,cAACT,wBAAAA;CACCqC,UAAS;CACTC,IAAI;CACJlB,SAAQ;CACRC,WAAU;GAETZ,KAAAA;AAIL,MAAM0B,kBAAiD,EAAE1B,MAAM2B,YAC7D,sBAAA,cAACxC,uBAAAA,EAAI2C,IAAInC,YAAYgC,UACnB,sBAAA,cAACpC,wBAAAA;CAAKwC,IAAI;CAAGhB,GAAG;CAAIJ,SAAQ;CAAWT,UAAU;CAAI8B,YAAW;GAC7DhC,KAAAA,CAAAA;AAqBP,MAAaiC,YAAqC,EAChDC,MACAC,SACAC,SACAC,OACAC,UACAC,MACAnB,gBACAC,oBACAC,sBAAsB,QACtBkB,aAAa,KACbC,cAAc,IACdC,oBAAoB,MACpBC,mBACD;CACC,MAAMC,gBAAgBxB,kBAAkBC;AAExC,QACE,sBAAA,cAACnC,0BAAAA;EAAOyB,SAAQ;EAAkBuB;EAAMC,eAAeA,WAAAA;IACrD,sBAAA,cAAC/C,wBAAAA;EACCa,SAAQ;EACR4C,eAAc;EACdC,4CAAcN,WAAAA;EACdhB,gBAAe;EACfuB,8CAAgBrD,aAAAA;EAChBiB,SAAQ;EACRqC,eAAAA;EACAjC,GAAG;EACHkC,UAAS;IAET,sBAAA,cAAC9D,uBAAAA;EAAI+D,IAAIN,gBAAgB,IAAIH;EAAa1B,GAAG0B;IAC3C,sBAAA,cAAC1C,SAAAA,EAAQC,MAAMoC,YACf,sBAAA,cAAC/C,2BAAAA,EAAQmC,gBAAe,mBACtB,sBAAA,cAACnB,OAAAA;EAAML,MAAMqC;EAAO/B,cAAcoC;KACjCC,gBAAgBA,aAAAA,EAElBL,YAAY,sBAAA,cAAC5B,UAAAA,EAASV,MAAMsC,aAC5BC,QAAQ,sBAAA,cAAC1B,MAAAA,EAAKb,MAAMuC,UAEtBK,iBACC,sBAAA,cAACzB,QAAAA;EACiBC;EACIC;EACCC"}

package/dist/InfoCard/index.d.cts

@@ -0,0 +1,24 @@
+import { BoxProps, HeadingTags } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/InfoCard/index.d.ts
+type TagColor = 'blue' | 'green' | 'pink';
+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$1.ReactNode;
+}
+declare const InfoCard: React$1.FC<InfoCardProps>;
+//#endregion
+export { InfoCard, InfoCardProps, TagColor };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/InfoCard/index.tsx"],"mappings":";;;;KAgBY,QAAA;AAAA,UAyGK,aAAA;EACf,IAAA;EACA,OAAA;EACA,OAAA;EACA,KAAA;EACA,QAAA;EACA,IAAA;EACA,cAAA;EACA,kBAAA;EACA,mBAAA,GAAsB,QAAA;EACtB,UAAA;EACA,WAAA,GAAc,QAAA;EACd,iBAAA,GAAoB,WAAA;EACpB,YAAA,GAAe,OAAA,CAAM,SAAA;AAAA;AAAA,cAGV,QAAA,EAAU,OAAA,CAAM,EAAA,CAAG,aAAA"}

package/dist/InfoCard/index.d.ts

@@ -1,19 +1,24 @@
-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;
+import { BoxProps, HeadingTags } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/InfoCard/index.d.ts
+type TagColor = 'blue' | 'green' | 'pink';
+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$1.ReactNode;
 }
-export declare const InfoCard: React.FC<InfoCardProps>;
+declare const InfoCard: React$1.FC<InfoCardProps>;
+//#endregion
+export { InfoCard, InfoCardProps, TagColor };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/InfoCard/index.tsx"],"mappings":";;;;KAgBY,QAAA;AAAA,UAyGK,aAAA;EACf,IAAA;EACA,OAAA;EACA,OAAA;EACA,KAAA;EACA,QAAA;EACA,IAAA;EACA,cAAA;EACA,kBAAA;EACA,mBAAA,GAAsB,QAAA;EACtB,UAAA;EACA,WAAA,GAAc,QAAA;EACd,iBAAA,GAAoB,WAAA;EACpB,YAAA,GAAe,OAAA,CAAM,SAAA;AAAA;AAAA,cAGV,QAAA,EAAU,OAAA,CAAM,EAAA,CAAG,aAAA"}