@codecademy/brand 4.0.0-alpha.a575634273.0 → 4.0.0-alpha.b03641fd89.0

package/dist/HeaderHeightArea/index.js

@@ -32,4 +32,5 @@ const HeaderHeightArea = ({ as, children, display, ariaLabel }) => {
 };
 
 //#endregion
-export { HeaderHeightArea };
+export { HeaderHeightArea };
+//# sourceMappingURL=index.js.map

package/dist/HeaderHeightArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["HeaderHeightArea: React.FC<HeaderHeightAreaProps>","theme"],"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,MAAM,uBAAuB,OAAO,IAAI,CACtC,OAAO,IAAI;CACT,cAAc;CACd,IAAI;CACJ,KAAK;CACL,QAAQ;CACR,OAAO;CACP,YAAY,iBACV,CAAC,oBAAoB,sBAAsB,EAC3C,QACA,cACD;CACF,CAAC,EACF,OAAO,OAAO,EACZ,OAAO;CACL,IAAI;CACJ,aAAa;CACd,EACF,CAAC,CACH;AASD,MAAaA,oBAAqD,EAChE,IACA,UACA,SACA,gBACI;CACJ,MAAMC,UAAQ,UAAU;CACxB,MAAM,mBAAmB,qBAAqB;AAE9C,QACE,oBAAC;EACK;EACK;EACT,QAAQA,QAAM,SAAS;EACvB,OAAO;EACP,cAAY;EAEX;GACoB"}

package/dist/HeaderHeightArea/useIsInHeaderRegion.js

@@ -13,4 +13,5 @@ const useIsInHeaderRegion = () => {
 };
 
 //#endregion
-export { useIsInHeaderRegion };
+export { useIsInHeaderRegion };
+//# sourceMappingURL=useIsInHeaderRegion.js.map

package/dist/HeaderHeightArea/useIsInHeaderRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsInHeaderRegion.js","names":[],"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,MAAa,4BAA4B;CACvC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,KAAK;AAK9D,iBAAgB;EACd,MAAM,oBAAoB,oBAAoB,QAAQ,gBAAgB,EAAE;AACxE,eAAa;AACb,WAAS,iBAAiB,UAAU,YAAY;AAChD,eAAa,SAAS,oBAAoB,UAAU,YAAY;IAC/D,EAAE,CAAC;AAEN,QAAO"}

package/dist/HorizontalScrollMenu/index.d.ts

@@ -8,4 +8,5 @@ interface HorizontalScrollMenuProps extends WithChildrenProp {
 }
 declare const HorizontalScrollMenu: React$1.FC<HorizontalScrollMenuProps>;
 //#endregion
-export { HorizontalScrollMenu, HorizontalScrollMenuProps };
+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"],"sourcesContent":[],"mappings":";;;;;UAqBiB,yBAAA,SAAkC;;AAAnD;AAIa,cAAA,oBAA+B,EAAT,OAAA,CAAM,EAAG,CAAA,yBAAH,CAAE"}

package/dist/HorizontalScrollMenu/index.js

@@ -62,4 +62,5 @@ const HorizontalScrollMenu = ({ children, className }) => {
 };
 
 //#endregion
-export { HorizontalScrollMenu };
+export { HorizontalScrollMenu };
+//# sourceMappingURL=index.js.map

package/dist/HorizontalScrollMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["HorizontalScrollMenu: React.FC<HorizontalScrollMenuProps>"],"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,MAAM,kBAAkB,OAAO,QAAQ;;;;;;AAOvC,MAAM,oBAAoB,OAAO,IAAI;;;;;;AAWrC,MAAaA,wBAA6D,EACxE,UACA,gBACI;CACJ,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,qBAAqB,OAA8B,KAAK;CAE9D,MAAM,uBAAuB,cAAc;AACzC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO,IAAI,sBACR,YAAyC;AACxC,WAAQ,SAAS,UAAU;AACzB,UAAM,OAAO,aAAa,MAAM,iBAAiB,UAAU;KAC3D;KAEJ;GACE,MAAM,mBAAmB,SAAS,cAChC,+BACD;GACD,YAAY;GACb,CACF;IACA,EAAE,CAAC;AAEN,iBAAgB;EACd,MAAM,wBAAwB,SAAS,QAAQ,SAAS,CAAC;AAEzD,MAAI,YAAY,QAAQ,WAAW,sBACjC,aAAY,QAAQ,SAAS,UAC3B,sBAAsB,QAAQ,MAAM,CACrC;AAEH,eAAa;AACX,yBAAsB,YAAY;;IAEnC;EAAC;EAAa;EAAsB;EAAS,CAAC;AAEjD,QACE,oBAAC;EAAI,UAAS;YACZ,oBAAC;GACC,qBAAkB;GAClB,KAAK;GACM;GACX,IAAI;GACJ,WAAU;GACV,UAAU;aAET,SAAS,IAAI,WAAW,OAAO,UAC9B,oBAAC;IACC,MAAM,YAAY;AAChB,SAAI,QACF,aAAY,QAAQ,SAAS;;cAIhC;KACiB,CACpB;IACc;GACd"}

package/dist/HubCard/index.d.ts

@@ -9,4 +9,5 @@ type HubCardProps = {
 };
 declare const HubCard: React$1.FC<HubCardProps>;
 //#endregion
-export { HubCard, HubCardProps };
+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"],"sourcesContent":[],"mappings":";;;KAGY,YAAA;;EAAA,KAAA,EAAA,MAAA;EAOC,eA6BZ,EAAA,MA7B8B;;;cAAlB,SAAS,OAAA,CAAM,GAAG"}

package/dist/HubCard/index.js

@@ -35,4 +35,5 @@ const HubCard = ({ eyebrowTitle, title, backgroundPosition, backgroundImage }) =
 });
 
 //#endregion
-export { HubCard };
+export { HubCard };
+//# sourceMappingURL=index.js.map

package/dist/HubCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["HubCard: React.FC<HubCardProps>"],"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,MAAaA,WAAmC,EAC9C,cACA,OACA,oBACA,sBAEA,oBAAC;CACC,SAAQ;CACR;CACA,SAAQ;CACR,gBAAe;CACf,YAAW;CACX,gBAAe;CACf,kBAAiB;CACG;CACpB,iBAAiB,OAAO,gBAAgB;CACxC,QAAO;WAEP,qBAAC;EAAI,GAAG;EAAI,IAAG;EAAQ,OAAM;EAAO,UAAS;aAC3C,oBAAC;GAAK,IAAG;GAAI,UAAU;aACpB;IACI,EACP,oBAAC;GAAQ,YAAW;aAClB,oBAAC;IAAK,IAAG;IAAI,SAAQ;cAClB;KACI;IACC;GACN;EACD"}

package/dist/InfoCard/index.d.ts

@@ -20,4 +20,5 @@ interface InfoCardProps {
 }
 declare const InfoCard: React$1.FC<InfoCardProps>;
 //#endregion
-export { InfoCard, InfoCardProps, TagColor };
+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"],"sourcesContent":[],"mappings":";;;;KAgBY,QAAA;UAyGK,aAAA;EAzGL,IAAA,EAAA,MAAQ;EAyGH,OAAA,CAAA,EAAA,GAAA,GAAa,IAAA;EASN,OAAA,EAAA,MAAA;EAER,KAAA,EAAA,MAAA;EACM,QAAA,CAAA,EAAA,MAAA;EACL,IAAA,CAAM,EAAA,MAAA;EAAS,cAAA,CAAA,EAAA,MAAA;EAGnB,kBAiDZ,CAAA,EAAA,MAjD+B;wBAPR;;gBAER;sBACM;iBACL,OAAA,CAAM;;cAGV,UAAU,OAAA,CAAM,GAAG"}

package/dist/InfoCard/index.js

@@ -116,4 +116,5 @@ const InfoCard = ({ href, onClick, topText, title, subtitle, body, bottomLeftTex
 };
 
 //#endregion
-export { InfoCard };
+export { InfoCard };
+//# sourceMappingURL=index.js.map

package/dist/InfoCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["tagColorMap: Record<TagColor, keyof Theme['colors']>","TopText: React.FC<TextProps>","Title: React.FC<TitleProps>","Subtitle: React.FC<TextProps>","Body: React.FC<TextProps>","Footer: React.FC<FooterProps>","BottomLeftText: React.FC<TextProps>","BottomRightTag: React.FC<BottomRightTagProps>","InfoCard: React.FC<InfoCardProps>"],"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,MAAM,eAAe;AAGrB,MAAMA,cAAuD;CAC3D,MAAM;CACN,OAAO;CACP,MAAM;CACP;AAsBD,MAAMC,WAAgC,EAAE,WACtC,oBAAC;CAAK,SAAQ;CAAO,UAAU;CAAI,IAAI;CAAI,YAAW;WACnD;EACI;AAGT,MAAMC,SAA+B,EAAE,MAAM,mBAC3C,oBAAC;CAAK,IAAI;CAAc,IAAI;CAAG,UAAU;WACvC,oBAAC;EAAK,UAAS;EAAW,eAAe;YACtC;GACI;EACF;AAGT,MAAMC,YAAiC,EAAE,WACvC,oBAAC;CAAK,SAAQ;CAAU,WAAU;WAChC,oBAAC;EAAK,UAAS;EAAW,eAAe;YACtC;GACI;EACF;AAGT,MAAMC,QAA6B,EAAE,WACnC,oBAAC;CACO;CACN,WAAW;EACT,GAAG,EACD,YAAY,UACV,oBAAC;GACC,GAAI;GACJ,WAAU;GACV,SAAQ;GACR,UAAS;GACT,eAAe;IACf,EAEL;EACD,GAAG,EACD,WAAW,QACZ;EACF;EACD;AAGJ,MAAMC,UAAiC,EACrC,gBACA,oBACA,0BAEA,qBAAC;CAAQ,YAAW;CAAW,gBAAe;YAC5C,oBAAC,iBAAK,kBAAkB,oBAAC,kBAAe,MAAM,iBAAkB,GAAO,EACvE,oBAAC,iBACE,sBACC,oBAAC;EAAe,MAAM;EAAoB,OAAO;GAAuB,GAEtE;EACE;AAGZ,MAAMC,kBAAuC,EAAE,WAC7C,oBAAC;CACC,UAAS;CACT,IAAI;CACJ,SAAQ;CACR,WAAU;WAET;EACI;AAGT,MAAMC,kBAAiD,EAAE,MAAM,YAC7D,oBAAC;CAAI,IAAI,YAAY;WACnB,oBAAC;EAAK,IAAI;EAAG,GAAG;EAAI,SAAQ;EAAW,UAAU;EAAI,YAAW;YAC7D;GACI;EACH;AAmBR,MAAaC,YAAqC,EAChD,MACA,SACA,SACA,OACA,UACA,MACA,gBACA,oBACA,sBAAsB,QACtB,aAAa,KACb,cAAc,IACd,oBAAoB,MACpB,mBACI;CACJ,MAAM,gBAAgB,kBAAkB;AAExC,QACE,oBAAC;EAAO,SAAQ;EAAkB;EAAM,eAAe,WAAW;YAChE,qBAAC;GACC,SAAQ;GACR,eAAc;GACd,QAAQ,MAAM,WAAW;GACzB,gBAAe;GACf,UAAU,MAAM,aAAa;GAC7B,SAAQ;GACR;GACA,GAAG;GACH,UAAS;cAET,qBAAC;IAAI,IAAI,gBAAgB,IAAI;IAAa,GAAG;;KAC3C,oBAAC,WAAQ,MAAM,UAAW;KAC1B,qBAAC;MAAQ,gBAAe;iBACtB,oBAAC;OAAM,MAAM;OAAO,cAAc;QAAqB,EACtD,gBAAgB;OACT;KACT,YAAY,oBAAC,YAAS,MAAM,WAAY;KACxC,QAAQ,oBAAC,QAAK,MAAM,OAAQ;;KACzB,EACL,iBACC,oBAAC;IACiB;IACI;IACC;KACrB;IAEC;GACA"}

package/dist/Konamimojisplosion/Konamimojisplosion.d.ts

@@ -6,4 +6,5 @@ type KonamimojisplosionProps = {
 };
 declare const Konamimojisplosion: React.FC<KonamimojisplosionProps>;
 //#endregion
-export { Konamimojisplosion, KonamimojisplosionProps };
+export { Konamimojisplosion, KonamimojisplosionProps };
+//# sourceMappingURL=Konamimojisplosion.d.ts.map

package/dist/Konamimojisplosion/Konamimojisplosion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Konamimojisplosion.d.ts","names":[],"sources":["../../src/Konamimojisplosion/Konamimojisplosion.tsx"],"sourcesContent":[],"mappings":";;;KAIY,uBAAA;;AAAZ,CAAA;AAIa,cAAA,kBAA6B,EAAT,KAAA,CAAM,EAAG,CAAA,uBAAD,CAAA"}

package/dist/Konamimojisplosion/Konamimojisplosion.js

@@ -7,4 +7,5 @@ const Konamimojisplosion = ({ onActivate }) => {
 };
 
 //#endregion
-export { Konamimojisplosion };
+export { Konamimojisplosion };
+//# sourceMappingURL=Konamimojisplosion.js.map

package/dist/Konamimojisplosion/Konamimojisplosion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Konamimojisplosion.js","names":["Konamimojisplosion: React.FC<KonamimojisplosionProps>"],"sources":["../../src/Konamimojisplosion/Konamimojisplosion.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useKonamimojisplosion } from './useKonamimojisplosion';\n\nexport type KonamimojisplosionProps = {\n  onActivate?: () => void;\n};\n\nexport const Konamimojisplosion: React.FC<KonamimojisplosionProps> = ({\n  onActivate,\n}) => {\n  useKonamimojisplosion(onActivate);\n  return null;\n};\n"],"mappings":";;;AAQA,MAAaA,sBAAyD,EACpE,iBACI;AACJ,uBAAsB,WAAW;AACjC,QAAO"}

package/dist/Konamimojisplosion/useKonamimojisplosion.d.ts

@@ -1,4 +1,5 @@
 //#region src/Konamimojisplosion/useKonamimojisplosion.d.ts
 declare const useKonamimojisplosion: (onActivate?: () => void) => void;
 //#endregion
-export { useKonamimojisplosion };
+export { useKonamimojisplosion };
+//# sourceMappingURL=useKonamimojisplosion.d.ts.map

package/dist/Konamimojisplosion/useKonamimojisplosion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKonamimojisplosion.d.ts","names":[],"sources":["../../src/Konamimojisplosion/useKonamimojisplosion.ts"],"sourcesContent":[],"mappings":";cAkBa"}

package/dist/Konamimojisplosion/useKonamimojisplosion.js

@@ -43,4 +43,5 @@ const useKonamimojisplosion = (onActivate) => {
 };
 
 //#endregion
-export { useKonamimojisplosion };
+export { useKonamimojisplosion };
+//# sourceMappingURL=useKonamimojisplosion.js.map

package/dist/Konamimojisplosion/useKonamimojisplosion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKonamimojisplosion.js","names":["explosions: EmojisplosionsHandler | undefined"],"sources":["../../src/Konamimojisplosion/useKonamimojisplosion.ts"],"sourcesContent":["import { emojisplosions, EmojisplosionsHandler } from 'emojisplosion';\nimport { useEffect, useState } from 'react';\n\nconst konamiCodeKeys = [\n  'ArrowUp',\n  'ArrowUp',\n  'ArrowDown',\n  'ArrowDown',\n  'ArrowLeft',\n  'ArrowRight',\n  'ArrowLeft',\n  'ArrowRight',\n  'b',\n  'a',\n];\n\nlet explosions: EmojisplosionsHandler | undefined;\n\nexport const useKonamimojisplosion = (onActivate?: () => void) => {\n  const [inputs, setInputs] = useState<string[]>([]);\n\n  useEffect(() => {\n    const listener = (e: KeyboardEvent) => {\n      const newState = [\n        ...(inputs.length === konamiCodeKeys.length ? inputs.slice(1) : inputs),\n        e.key,\n      ];\n\n      if (newState.join() === konamiCodeKeys.join()) {\n        if (explosions) {\n          explosions.cancel();\n          explosions = undefined;\n        } else {\n          explosions = emojisplosions();\n          onActivate?.();\n        }\n        setInputs([]);\n      } else {\n        setInputs(newState);\n      }\n    };\n\n    document.addEventListener('keydown', listener);\n    return () => document.removeEventListener('keydown', listener);\n  }, [onActivate, inputs]);\n\n  // clean up explosions on unmount\n  useEffect(() => {\n    return () => {\n      explosions?.cancel();\n      explosions = undefined;\n    };\n  }, []);\n};\n"],"mappings":";;;;AAGA,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAIA;AAEJ,MAAa,yBAAyB,eAA4B;CAChE,MAAM,CAAC,QAAQ,aAAa,SAAmB,EAAE,CAAC;AAElD,iBAAgB;EACd,MAAM,YAAY,MAAqB;GACrC,MAAM,WAAW,CACf,GAAI,OAAO,WAAW,eAAe,SAAS,OAAO,MAAM,EAAE,GAAG,QAChE,EAAE,IACH;AAED,OAAI,SAAS,MAAM,KAAK,eAAe,MAAM,EAAE;AAC7C,QAAI,YAAY;AACd,gBAAW,QAAQ;AACnB,kBAAa;WACR;AACL,kBAAa,gBAAgB;AAC7B,mBAAc;;AAEhB,cAAU,EAAE,CAAC;SAEb,WAAU,SAAS;;AAIvB,WAAS,iBAAiB,WAAW,SAAS;AAC9C,eAAa,SAAS,oBAAoB,WAAW,SAAS;IAC7D,CAAC,YAAY,OAAO,CAAC;AAGxB,iBAAgB;AACd,eAAa;AACX,eAAY,QAAQ;AACpB,gBAAa;;IAEd,EAAE,CAAC"}

package/dist/LandingPage/CTA.js

@@ -6,4 +6,5 @@ import { jsx } from "react/jsx-runtime";
 const CTA = ({ buttonType = "cta", ...buttonProps }) => buttonType === "fill" ? /* @__PURE__ */ jsx(FillButton, { ...buttonProps }) : /* @__PURE__ */ jsx(CTAButton, { ...buttonProps });
 
 //#endregion
-export { CTA };
+export { CTA };
+//# sourceMappingURL=CTA.js.map

package/dist/LandingPage/CTA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTA.js","names":["CTA: React.FC<CTAProps>"],"sources":["../../src/LandingPage/CTA.tsx"],"sourcesContent":["import { ButtonProps, CTAButton, FillButton } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport interface CTAProps extends Pick<ButtonProps, 'children'> {\n  href: string;\n  onClick?: React.MouseEventHandler;\n  buttonType?: 'cta' | 'fill';\n  mode?: 'light' | 'dark';\n}\n\nexport const CTA: React.FC<CTAProps> = ({\n  buttonType = 'cta',\n  ...buttonProps\n}) =>\n  buttonType === 'fill' ? (\n    <FillButton {...buttonProps} />\n  ) : (\n    <CTAButton {...buttonProps} />\n  );\n"],"mappings":";;;;;AAUA,MAAaA,OAA2B,EACtC,aAAa,OACb,GAAG,kBAEH,eAAe,SACb,oBAAC,cAAW,GAAI,cAAe,GAE/B,oBAAC,aAAU,GAAI,cAAe"}

package/dist/LandingPage/Description.d.ts

@@ -7,4 +7,5 @@ type DescriptionProps = {
 } & Pick<LandingPageBaseProps, 'onAnchorClick'>;
 declare const Description: React$1.FC<DescriptionProps>;
 //#endregion
-export { Description, DescriptionProps };
+export { Description, DescriptionProps };
+//# sourceMappingURL=Description.d.ts.map

package/dist/LandingPage/Description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Description.d.ts","names":[],"sources":["../../src/LandingPage/Description.tsx"],"sourcesContent":[],"mappings":";;;;KAKY,gBAAA;;AAAZ,CAAA,GAEI,IAFQ,CAEH,oBAFmB,EAAA,eAEnB,CAAA;AAEI,cAAA,WAAsB,EAAT,OAAA,CAAM,EAAG,CAAA,gBAAH,CAAE"}

package/dist/LandingPage/Description.js

@@ -13,4 +13,5 @@ const Description = ({ text, onAnchorClick }) => /* @__PURE__ */ jsx(Box, {
 });
 
 //#endregion
-export { Description };
+export { Description };
+//# sourceMappingURL=Description.js.map

package/dist/LandingPage/Description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Description.js","names":["Description: React.FC<DescriptionProps>"],"sources":["../../src/LandingPage/Description.tsx"],"sourcesContent":["import { Box, Markdown } from '@codecademy/gamut';\nimport * as React from 'react';\n\nimport { LandingPageBaseProps } from './types';\n\nexport type DescriptionProps = {\n  text: string;\n} & Pick<LandingPageBaseProps, 'onAnchorClick'>;\n\nexport const Description: React.FC<DescriptionProps> = ({\n  text,\n  onAnchorClick,\n}) => (\n  <Box maxWidth=\"38rem\" mt={16}>\n    <Markdown text={text} onAnchorClick={onAnchorClick} />\n  </Box>\n);\n"],"mappings":";;;;;AASA,MAAaA,eAA2C,EACtD,MACA,oBAEA,oBAAC;CAAI,UAAS;CAAQ,IAAI;WACxB,oBAAC;EAAe;EAAqB;GAAiB;EAClD"}

package/dist/LandingPage/Feature.js

@@ -78,4 +78,5 @@ const Feature = ({ testId, children, props }) => /* @__PURE__ */ jsx(FeatureBloc
 });
 
 //#endregion
-export { Feature, FeaturedDescription, FeaturedIcon, FeaturedImage, FeaturedStat, FeaturedTitle };
+export { Feature, FeaturedDescription, FeaturedIcon, FeaturedImage, FeaturedStat, FeaturedTitle };
+//# sourceMappingURL=Feature.js.map

package/dist/LandingPage/Feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feature.js","names":["FeaturedImage: React.FC<FeaturedImageProps>","FeaturedIcon: React.FC<FeaturedIconProps>","FeaturedStat: React.FC<WithChildrenProp>","FeaturedTitle: React.FC<FeaturedTitleProps>","FeaturedDescription: React.FC<FeaturedDescriptionProps>","Feature: React.FC<FeatureProps>"],"sources":["../../src/LandingPage/Feature.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  Markdown,\n  Text,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { mediaQueries } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { PausableImage } from '../PausableImage';\nimport { LandingPageBaseProps } from './types';\n\nconst Image = Box.withComponent('img');\n\nexport type FeaturedImageProps = {\n  src: string;\n  alt: string;\n};\nexport const FeaturedImage: React.FC<FeaturedImageProps> = ({ src, alt }) => (\n  <Box width={1} mb={32}>\n    <PausableImage src={src} alt={alt} data-testid=\"feature-image\" />\n  </Box>\n);\n\nexport type FeaturedIconProps = {\n  src: string;\n  alt: string;\n  props?: Omit<\n    React.ComponentProps<typeof Image>,\n    'src' | 'alt' | 'data-testid'\n  >;\n};\nexport const FeaturedIcon: React.FC<FeaturedIconProps> = ({\n  src,\n  alt,\n  props,\n}) => (\n  <Image\n    alt={alt}\n    src={src}\n    mb={32}\n    width=\"64px\"\n    data-testid=\"feature-icon\"\n    {...props}\n  />\n);\n\nexport const FeaturedStat: React.FC<WithChildrenProp> = ({ children }) => (\n  <Text\n    as=\"div\"\n    variant=\"title-xxl\"\n    fontSize={{ _: 44, lg: 64 }}\n    data-testid=\"feature-stat\"\n  >\n    {children}\n  </Text>\n);\n\nexport interface FeaturedTitleProps extends WithChildrenProp {\n  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';\n  props?: Omit<BoxProps, 'as' | 'children'>;\n}\nexport const FeaturedTitle: React.FC<FeaturedTitleProps> = ({\n  as,\n  children,\n  props,\n}) => (\n  <Text\n    as={as}\n    fontSize={{ _: 22, lg: 26 }}\n    fontWeight=\"title\"\n    lineHeight=\"spacedTitle\"\n    {...props}\n  >\n    {children}\n  </Text>\n);\n\nconst StyledMarkdown = styled(Markdown)`\n  ul,\n  ol {\n    padding: 0;\n    list-style-position: inside;\n  }\n`;\nexport type FeaturedDescriptionProps = Pick<\n  LandingPageBaseProps,\n  'desc' | 'onAnchorClick'\n>;\nexport const FeaturedDescription: React.FC<FeaturedDescriptionProps> = ({\n  desc,\n  onAnchorClick,\n}) => (\n  <StyledMarkdown text={desc} spacing=\"none\" onAnchorClick={onAnchorClick} />\n);\n\nconst FeatureBlock = styled(Box)`\n  flex: 1;\n  ${mediaQueries.sm} {\n    &:not(:last-of-type) {\n      margin-right: 1rem;\n\n      ${mediaQueries.lg} {\n        margin-right: 2rem;\n      }\n    }\n  }\n`;\n\nexport interface FeatureProps extends WithChildrenProp {\n  testId?: string;\n  props?: Omit<BoxProps, 'as' | 'children'>;\n}\nexport const Feature: React.FC<FeatureProps> = ({\n  testId,\n  children,\n  props,\n}) => (\n  <FeatureBlock as=\"div\" mt={32} data-testid={testId} {...props}>\n    {children}\n  </FeatureBlock>\n);\n"],"mappings":";;;;;;;;AAcA,MAAM,QAAQ,IAAI,cAAc,MAAM;AAMtC,MAAaA,iBAA+C,EAAE,KAAK,UACjE,oBAAC;CAAI,OAAO;CAAG,IAAI;WACjB,oBAAC;EAAmB;EAAU;EAAK,eAAY;GAAkB;EAC7D;AAWR,MAAaC,gBAA6C,EACxD,KACA,KACA,YAEA,oBAAC;CACM;CACA;CACL,IAAI;CACJ,OAAM;CACN,eAAY;CACZ,GAAI;EACJ;AAGJ,MAAaC,gBAA4C,EAAE,eACzD,oBAAC;CACC,IAAG;CACH,SAAQ;CACR,UAAU;EAAE,GAAG;EAAI,IAAI;EAAI;CAC3B,eAAY;CAEX;EACI;AAOT,MAAaC,iBAA+C,EAC1D,IACA,UACA,YAEA,oBAAC;CACK;CACJ,UAAU;EAAE,GAAG;EAAI,IAAI;EAAI;CAC3B,YAAW;CACX,YAAW;CACX,GAAI;CAEH;EACI;AAGT,MAAM,iBAAiB,OAAO,SAAS;;;;;;;AAWvC,MAAaC,uBAA2D,EACtE,MACA,oBAEA,oBAAC;CAAe,MAAM;CAAM,SAAQ;CAAsB;EAAiB;AAG7E,MAAM,eAAe,OAAO,IAAI;;IAE5B,aAAa,GAAG;;;;QAIZ,aAAa,GAAG;;;;;;AAWxB,MAAaC,WAAmC,EAC9C,QACA,UACA,YAEA,oBAAC;CAAa,IAAG;CAAM,IAAI;CAAI,eAAa;CAAQ,GAAI;CACrD;EACY"}

package/dist/LandingPage/PageFAQs.d.ts

@@ -11,4 +11,5 @@ interface PageFaqsProps extends LandingPageBaseProps, WithChildrenProp {
 }
 declare const PageFaqs: React$1.FC<PageFaqsProps>;
 //#endregion
-export { PageFaqs, PageFaqsProps };
+export { PageFaqs, PageFaqsProps };
+//# sourceMappingURL=PageFAQs.d.ts.map

package/dist/LandingPage/PageFAQs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFAQs.d.ts","names":[],"sources":["../../src/LandingPage/PageFAQs.tsx"],"sourcesContent":[],"mappings":";;;;;UAgBiB,aAAA,SAAsB,sBAAsB;;IAA5C,QAAA,EAAA,MAAc;IAgBlB,MAAA,EAwBZ,MAAA;;;cAxBY,UAAU,OAAA,CAAM,GAAG"}

package/dist/LandingPage/PageFAQs.js

@@ -43,4 +43,5 @@ const PageFaqs = ({ title, faqs }) => {
 };
 
 //#endregion
-export { PageFaqs };
+export { PageFaqs };
+//# sourceMappingURL=PageFAQs.js.map

package/dist/LandingPage/PageFAQs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFAQs.js","names":["PageFaqs: React.FC<PageFaqsProps>"],"sources":["../../src/LandingPage/PageFAQs.tsx"],"sourcesContent":["import {\n  Box,\n  Column,\n  Disclosure,\n  FlexBox,\n  LayoutGrid,\n  Markdown,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { Title } from './Title';\nimport { LandingPageBaseProps } from './types';\n\nexport interface PageFaqsProps extends LandingPageBaseProps, WithChildrenProp {\n  faqs?: {\n    question: string;\n    answer: string;\n  }[];\n}\n\nconst FaqAnswer = styled(Markdown)`\n  p {\n    font-size: 1rem;\n    ${theme.breakpoints.md} {\n      font-size: 1.25rem;\n    }\n  }\n`;\n\nexport const PageFaqs: React.FC<PageFaqsProps> = ({ title, faqs }) => {\n  return (\n    <LayoutGrid p={0} m={0}>\n      <Column size={12} p={0} m={0}>\n        {title && (\n          <FlexBox justifyContent=\"center\" mb={32}>\n            <Title isPageHeading={false}>{title}</Title>\n          </FlexBox>\n        )}\n        {faqs &&\n          faqs.length > 0 &&\n          faqs.map((faq) => (\n            <Box borderBottom={1} key={faq.question}>\n              <Disclosure\n                heading={faq.question}\n                hasBorder={false}\n                variant=\"transparent\"\n                body={<FaqAnswer text={faq.answer} />}\n              />\n            </Box>\n          ))}\n      </Column>\n    </LayoutGrid>\n  );\n};\n"],"mappings":";;;;;;;;AAuBA,MAAM,YAAY,OAAO,SAAS;;;MAG5B,MAAM,YAAY,GAAG;;;;;AAM3B,MAAaA,YAAqC,EAAE,OAAO,WAAW;AACpE,QACE,oBAAC;EAAW,GAAG;EAAG,GAAG;YACnB,qBAAC;GAAO,MAAM;GAAI,GAAG;GAAG,GAAG;cACxB,SACC,oBAAC;IAAQ,gBAAe;IAAS,IAAI;cACnC,oBAAC;KAAM,eAAe;eAAQ;MAAc;KACpC,EAEX,QACC,KAAK,SAAS,KACd,KAAK,KAAK,QACR,oBAAC;IAAI,cAAc;cACjB,oBAAC;KACC,SAAS,IAAI;KACb,WAAW;KACX,SAAQ;KACR,MAAM,oBAAC,aAAU,MAAM,IAAI,SAAU;MACrC;MANuB,IAAI,SAOzB,CACN;IACG;GACE"}

package/dist/LandingPage/PageFeatures.d.ts

@@ -17,4 +17,5 @@ interface PageFeaturesProps extends LandingPageBaseProps, WithChildrenProp {
 }
 declare const PageFeatures: React$1.FC<PageFeaturesProps>;
 //#endregion
-export { PageFeatures, PageFeaturesProps };
+export { PageFeatures, PageFeaturesProps };
+//# sourceMappingURL=PageFeatures.d.ts.map

package/dist/LandingPage/PageFeatures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFeatures.d.ts","names":[],"sources":["../../src/LandingPage/PageFeatures.tsx"],"sourcesContent":[],"mappings":";;;;;UAwBiB,iBAAA,SACP,sBACN;;EAFa,aAAA,CAAA,EAAA,OACf,GAAA,MAAA,GAAQ,MAAA;EAwEG,QAAA,EAAA;;;;;;;;;cAAA,cAAc,OAAA,CAAM,GAAG"}

package/dist/LandingPage/PageFeatures.js

@@ -94,4 +94,5 @@ const PageFeatures = ({ title, desc, cta, maxCols, features, featuresMedia, test
 });
 
 //#endregion
-export { PageFeatures };
+export { PageFeatures };
+//# sourceMappingURL=PageFeatures.js.map

package/dist/LandingPage/PageFeatures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFeatures.js","names":["PageFeatures: React.FC<PageFeaturesProps>","testId","desc"],"sources":["../../src/LandingPage/PageFeatures.tsx"],"sourcesContent":["import {\n  Box,\n  Column,\n  ColumnProps,\n  FlexBox,\n  LayoutGrid,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { ReactNode } from 'react';\nimport * as React from 'react';\n\nimport { CTA } from './CTA';\nimport { Description } from './Description';\nimport {\n  Feature,\n  FeaturedDescription,\n  FeaturedIcon,\n  FeaturedImage,\n  FeaturedStat,\n  FeaturedTitle,\n} from './Feature';\nimport { Title } from './Title';\nimport { LandingPageBaseProps } from './types';\n\nexport interface PageFeaturesProps\n  extends LandingPageBaseProps,\n    WithChildrenProp {\n  maxCols?: 1 | 2 | 3 | 4;\n  featuresMedia?: 'image' | 'icon' | 'stat';\n  features: {\n    title?: string;\n    desc?: string;\n    imgSrc?: string;\n    imgAlt?: string;\n    statText?: string;\n    testId?: string;\n  }[];\n}\n\nconst rowRenderEach = (\n  items: PageFeaturesProps['features'],\n  itemRenderer: (item: PageFeaturesProps['features'][0]) => ReactNode\n): ReactNode => {\n  /* eslint-disable react/no-array-index-key */\n  return (\n    <FlexBox\n      flexDirection={{ _: 'column', sm: 'row' }}\n      as=\"ul\"\n      pl={0}\n      gap={{ sm: 32 }}\n    >\n      {items.map((item, i) => (\n        <FlexBox as=\"li\" key={i} flex={1}>\n          {itemRenderer(item)}\n        </FlexBox>\n      ))}\n    </FlexBox>\n  );\n  /* eslint-enable react/no-array-index-key */\n};\n\nconst gridRenderEach = (\n  maxCols: NonNullable<PageFeaturesProps['maxCols']>,\n  items: PageFeaturesProps['features'],\n  itemRenderer: (item: PageFeaturesProps['features'][0]) => ReactNode\n): ReactNode => {\n  const size = {\n    _: 12,\n    sm: 12 / maxCols,\n  } as ColumnProps['size'];\n  /* eslint-disable react/no-array-index-key */\n  return (\n    <LayoutGrid columnGap={{ _: 8, sm: 32 }} as=\"ul\">\n      {items.map((item, i) => (\n        <Column key={i} size={size} as=\"li\">\n          {itemRenderer(item)}\n        </Column>\n      ))}\n    </LayoutGrid>\n  );\n  /* eslint-enable react/no-array-index-key */\n};\n\nconst renderEach = (\n  maxCols: PageFeaturesProps['maxCols'],\n  items: PageFeaturesProps['features'],\n  itemRenderer: (item: PageFeaturesProps['features'][0]) => ReactNode\n): ReactNode => {\n  if (maxCols === undefined) {\n    return rowRenderEach(items, itemRenderer);\n  }\n  if (maxCols > 0 && maxCols <= 4) {\n    return gridRenderEach(maxCols, items, itemRenderer);\n  }\n  return null;\n};\n\nexport const PageFeatures: React.FC<PageFeaturesProps> = ({\n  title,\n  desc,\n  cta,\n  maxCols,\n  features,\n  featuresMedia,\n  testId,\n  onAnchorClick,\n}) => (\n  <div data-testid={testId}>\n    <div>\n      {title && <Title isPageHeading={false}>{title}</Title>}\n      {desc && <Description text={desc} onAnchorClick={onAnchorClick} />}\n      {cta && (\n        <Box mt={32}>\n          <CTA\n            href={cta.href}\n            onClick={cta.onClick}\n            buttonType={cta.buttonType}\n          >\n            {cta.text}\n          </CTA>\n        </Box>\n      )}\n    </div>\n    <Box mt={16}>\n      {renderEach(\n        maxCols,\n        features,\n        ({ testId, imgSrc, imgAlt, statText, title: featTitle, desc }) => (\n          <Feature testId={testId}>\n            {featuresMedia === 'image' && imgSrc && (\n              <FeaturedImage src={imgSrc} alt={imgAlt ?? ''} />\n            )}\n            {featuresMedia === 'icon' && imgSrc && (\n              <FeaturedIcon src={imgSrc} alt={imgAlt ?? ''} />\n            )}\n            {featuresMedia === 'stat' && (\n              <FeaturedStat>{statText}</FeaturedStat>\n            )}\n            {featTitle && (\n              <FeaturedTitle as={desc ? (title ? 'h3' : 'h2') : 'div'}>\n                {featTitle}\n              </FeaturedTitle>\n            )}\n            {desc && (\n              <FeaturedDescription desc={desc} onAnchorClick={onAnchorClick} />\n            )}\n          </Feature>\n        )\n      )}\n    </Box>\n  </div>\n);\n"],"mappings":";;;;;;;;;AAuCA,MAAM,iBACJ,OACA,iBACc;AAEd,QACE,oBAAC;EACC,eAAe;GAAE,GAAG;GAAU,IAAI;GAAO;EACzC,IAAG;EACH,IAAI;EACJ,KAAK,EAAE,IAAI,IAAI;YAEd,MAAM,KAAK,MAAM,MAChB,oBAAC;GAAQ,IAAG;GAAa,MAAM;aAC5B,aAAa,KAAK;KADC,EAEZ,CACV;GACM;;AAKd,MAAM,kBACJ,SACA,OACA,iBACc;CACd,MAAM,OAAO;EACX,GAAG;EACH,IAAI,KAAK;EACV;AAED,QACE,oBAAC;EAAW,WAAW;GAAE,GAAG;GAAG,IAAI;GAAI;EAAE,IAAG;YACzC,MAAM,KAAK,MAAM,MAChB,oBAAC;GAAqB;GAAM,IAAG;aAC5B,aAAa,KAAK;KADR,EAEJ,CACT;GACS;;AAKjB,MAAM,cACJ,SACA,OACA,iBACc;AACd,KAAI,YAAY,OACd,QAAO,cAAc,OAAO,aAAa;AAE3C,KAAI,UAAU,KAAK,WAAW,EAC5B,QAAO,eAAe,SAAS,OAAO,aAAa;AAErD,QAAO;;AAGT,MAAaA,gBAA6C,EACxD,OACA,MACA,KACA,SACA,UACA,eACA,QACA,oBAEA,qBAAC;CAAI,eAAa;YAChB,qBAAC;EACE,SAAS,oBAAC;GAAM,eAAe;aAAQ;IAAc;EACrD,QAAQ,oBAAC;GAAY,MAAM;GAAqB;IAAiB;EACjE,OACC,oBAAC;GAAI,IAAI;aACP,oBAAC;IACC,MAAM,IAAI;IACV,SAAS,IAAI;IACb,YAAY,IAAI;cAEf,IAAI;KACD;IACF;KAEJ,EACN,oBAAC;EAAI,IAAI;YACN,WACC,SACA,WACC,EAAE,kBAAQ,QAAQ,QAAQ,UAAU,OAAO,WAAW,mBACrD,qBAAC;GAAQ,QAAQC;;IACd,kBAAkB,WAAW,UAC5B,oBAAC;KAAc,KAAK;KAAQ,KAAK,UAAU;MAAM;IAElD,kBAAkB,UAAU,UAC3B,oBAAC;KAAa,KAAK;KAAQ,KAAK,UAAU;MAAM;IAEjD,kBAAkB,UACjB,oBAAC,0BAAc,WAAwB;IAExC,aACC,oBAAC;KAAc,IAAIC,SAAQ,QAAQ,OAAO,OAAQ;eAC/C;MACa;IAEjBA,UACC,oBAAC;KAAoB,MAAMA;KAAqB;MAAiB;;IAE3D,CAEb;GACG;EACF"}

package/dist/LandingPage/PageFeaturesEnhanced.d.ts

@@ -8,4 +8,5 @@ interface PageFeaturesEnhancedProps extends PageFeaturesProps {
 }
 declare const PageFeaturesEnhanced: React$1.FC<PageFeaturesEnhancedProps>;
 //#endregion
-export { PageFeaturesEnhanced, PageFeaturesEnhancedProps };
+export { PageFeaturesEnhanced, PageFeaturesEnhancedProps };
+//# sourceMappingURL=PageFeaturesEnhanced.d.ts.map

package/dist/LandingPage/PageFeaturesEnhanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFeaturesEnhanced.d.ts","names":[],"sources":["../../src/LandingPage/PageFeaturesEnhanced.tsx"],"sourcesContent":[],"mappings":";;;;;UAyBiB,yBAAA,SAAkC;YACvC;AADZ;AA4Da,cAAA,oBAA+B,EAAT,OAAA,CAAM,EAAG,CAAA,yBAAH,CAAE"}

package/dist/LandingPage/PageFeaturesEnhanced.js

@@ -147,4 +147,5 @@ const PageFeaturesEnhanced = ({ eyebrow, title, desc, cta, maxCols, features, fe
 };
 
 //#endregion
-export { PageFeaturesEnhanced };
+export { PageFeaturesEnhanced };
+//# sourceMappingURL=PageFeaturesEnhanced.js.map

package/dist/LandingPage/PageFeaturesEnhanced.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFeaturesEnhanced.js","names":["PageFeaturesEnhanced: React.FC<PageFeaturesEnhancedProps>","testId","desc"],"sources":["../../src/LandingPage/PageFeaturesEnhanced.tsx"],"sourcesContent":["import {\n  Box,\n  Column,\n  ColumnProps,\n  FlexBox,\n  LayoutGrid,\n} from '@codecademy/gamut';\nimport { Background, ColorMode } from '@codecademy/gamut-styles';\nimport * as React from 'react';\nimport { ReactNode } from 'react';\n\nimport { CTA } from './CTA';\nimport { Description } from './Description';\nimport {\n  FeaturedDescription,\n  FeaturedIcon,\n  FeaturedImage,\n  FeaturedStat,\n  FeaturedTitle,\n} from './Feature';\nimport { PageFeaturesProps } from './PageFeatures';\nimport { Eyebrow } from './PageSingleFeature';\nimport { Title } from './Title';\nimport { TitleWithEyebrow } from './TitleWithEyebrow';\n\nexport interface PageFeaturesEnhancedProps extends PageFeaturesProps {\n  eyebrow?: Eyebrow;\n}\n\nconst rowRenderEach = (\n  items: PageFeaturesProps['features'],\n  itemRenderer: (item: PageFeaturesProps['features'][0]) => ReactNode\n): ReactNode => {\n  return (\n    <FlexBox\n      flexDirection={{ _: 'column', sm: 'row' }}\n      as=\"ul\"\n      pl={0}\n      mb={0}\n      gap={{ sm: 32 }}\n    >\n      {items.map((item) => (\n        <FlexBox as=\"li\" key={item.title} flex={1}>\n          {itemRenderer(item)}\n        </FlexBox>\n      ))}\n    </FlexBox>\n  );\n};\n\nconst gridRenderEach = (\n  maxCols: NonNullable<PageFeaturesProps['maxCols']>,\n  items: PageFeaturesProps['features'],\n  itemRenderer: (item: PageFeaturesProps['features'][0]) => ReactNode\n): ReactNode => {\n  const size = {\n    _: 12,\n    xs: 12 / (maxCols / 2),\n    lg: 12 / maxCols,\n  } as ColumnProps['size'];\n  return (\n    <LayoutGrid gap={32} as=\"ul\" pl={0} mb={0}>\n      {items.map((item) => (\n        <Column key={item.title} size={size} as=\"li\">\n          {itemRenderer(item)}\n        </Column>\n      ))}\n    </LayoutGrid>\n  );\n};\n\nconst renderEach = (\n  maxCols: PageFeaturesProps['maxCols'],\n  items: PageFeaturesProps['features'],\n  itemRenderer: (item: PageFeaturesProps['features'][0]) => ReactNode\n): ReactNode => {\n  if (maxCols === undefined) {\n    return rowRenderEach(items, itemRenderer);\n  }\n  if (maxCols > 0 && maxCols <= 4) {\n    return gridRenderEach(maxCols, items, itemRenderer);\n  }\n  return null;\n};\n\nexport const PageFeaturesEnhanced: React.FC<PageFeaturesEnhancedProps> = ({\n  eyebrow,\n  title,\n  desc,\n  cta,\n  maxCols,\n  features,\n  featuresMedia,\n  testId,\n  onAnchorClick,\n}) => {\n  return (\n    <div data-testid={testId}>\n      {title && (\n        <FlexBox justifyContent=\"center\" textAlign=\"center\" mb={8}>\n          {eyebrow ? (\n            <TitleWithEyebrow\n              title={title}\n              eyebrow={eyebrow}\n              isPageHeading={false}\n              titleStyle={{ fontWeight: 700, fontSize: { _: 44, sm: 44 } }}\n              eyebrowStyle={{\n                fontWeight: 'lighter',\n                fontSize: { _: 16, sm: 16 },\n              }}\n            />\n          ) : (\n            <Title isPageHeading={false}>{title}</Title>\n          )}\n        </FlexBox>\n      )}\n      {desc && (\n        <FlexBox justifyContent=\"center\" textAlign=\"center\">\n          <Description text={desc} onAnchorClick={onAnchorClick} />\n        </FlexBox>\n      )}\n      {cta && (\n        <Box mt={32}>\n          <CTA\n            href={cta.href}\n            onClick={cta.onClick}\n            buttonType={cta.buttonType}\n          >\n            {cta.text}\n          </CTA>\n        </Box>\n      )}\n      <ColorMode mode=\"dark\">\n        <Box mt={16}>\n          {renderEach(\n            maxCols,\n            features,\n            ({ testId, imgSrc, imgAlt, statText, title: featTitle, desc }) => (\n              <Background\n                bg=\"white-300\"\n                borderRadius=\"lg\"\n                py={24}\n                px={16}\n                color=\"white\"\n                data-testid={testId}\n              >\n                {featuresMedia === 'image' && imgSrc && (\n                  <FeaturedImage src={imgSrc} alt={imgAlt ?? ''} />\n                )}\n                {featuresMedia === 'icon' && imgSrc && (\n                  <FeaturedIcon\n                    src={imgSrc}\n                    alt={imgAlt ?? ''}\n                    props={{ mb: 16, width: '48px', height: '48px' }}\n                  />\n                )}\n                {featuresMedia === 'stat' && (\n                  <FeaturedStat>{statText}</FeaturedStat>\n                )}\n                {featTitle && (\n                  <FeaturedTitle\n                    as={desc ? (title ? 'h3' : 'h2') : 'div'}\n                    props={{ fontSize: { _: 20, lg: 20 }, mb: 16 }}\n                  >\n                    {featTitle}\n                  </FeaturedTitle>\n                )}\n                {desc && (\n                  <FeaturedDescription\n                    desc={desc}\n                    onAnchorClick={onAnchorClick}\n                  />\n                )}\n              </Background>\n            )\n          )}\n        </Box>\n      </ColorMode>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AA6BA,MAAM,iBACJ,OACA,iBACc;AACd,QACE,oBAAC;EACC,eAAe;GAAE,GAAG;GAAU,IAAI;GAAO;EACzC,IAAG;EACH,IAAI;EACJ,IAAI;EACJ,KAAK,EAAE,IAAI,IAAI;YAEd,MAAM,KAAK,SACV,oBAAC;GAAQ,IAAG;GAAsB,MAAM;aACrC,aAAa,KAAK;KADC,KAAK,MAEjB,CACV;GACM;;AAId,MAAM,kBACJ,SACA,OACA,iBACc;CACd,MAAM,OAAO;EACX,GAAG;EACH,IAAI,MAAM,UAAU;EACpB,IAAI,KAAK;EACV;AACD,QACE,oBAAC;EAAW,KAAK;EAAI,IAAG;EAAK,IAAI;EAAG,IAAI;YACrC,MAAM,KAAK,SACV,oBAAC;GAA8B;GAAM,IAAG;aACrC,aAAa,KAAK;KADR,KAAK,MAET,CACT;GACS;;AAIjB,MAAM,cACJ,SACA,OACA,iBACc;AACd,KAAI,YAAY,OACd,QAAO,cAAc,OAAO,aAAa;AAE3C,KAAI,UAAU,KAAK,WAAW,EAC5B,QAAO,eAAe,SAAS,OAAO,aAAa;AAErD,QAAO;;AAGT,MAAaA,wBAA6D,EACxE,SACA,OACA,MACA,KACA,SACA,UACA,eACA,QACA,oBACI;AACJ,QACE,qBAAC;EAAI,eAAa;;GACf,SACC,oBAAC;IAAQ,gBAAe;IAAS,WAAU;IAAS,IAAI;cACrD,UACC,oBAAC;KACQ;KACE;KACT,eAAe;KACf,YAAY;MAAE,YAAY;MAAK,UAAU;OAAE,GAAG;OAAI,IAAI;OAAI;MAAE;KAC5D,cAAc;MACZ,YAAY;MACZ,UAAU;OAAE,GAAG;OAAI,IAAI;OAAI;MAC5B;MACD,GAEF,oBAAC;KAAM,eAAe;eAAQ;MAAc;KAEtC;GAEX,QACC,oBAAC;IAAQ,gBAAe;IAAS,WAAU;cACzC,oBAAC;KAAY,MAAM;KAAqB;MAAiB;KACjD;GAEX,OACC,oBAAC;IAAI,IAAI;cACP,oBAAC;KACC,MAAM,IAAI;KACV,SAAS,IAAI;KACb,YAAY,IAAI;eAEf,IAAI;MACD;KACF;GAER,oBAAC;IAAU,MAAK;cACd,oBAAC;KAAI,IAAI;eACN,WACC,SACA,WACC,EAAE,kBAAQ,QAAQ,QAAQ,UAAU,OAAO,WAAW,mBACrD,qBAAC;MACC,IAAG;MACH,cAAa;MACb,IAAI;MACJ,IAAI;MACJ,OAAM;MACN,eAAaC;;OAEZ,kBAAkB,WAAW,UAC5B,oBAAC;QAAc,KAAK;QAAQ,KAAK,UAAU;SAAM;OAElD,kBAAkB,UAAU,UAC3B,oBAAC;QACC,KAAK;QACL,KAAK,UAAU;QACf,OAAO;SAAE,IAAI;SAAI,OAAO;SAAQ,QAAQ;SAAQ;SAChD;OAEH,kBAAkB,UACjB,oBAAC,0BAAc,WAAwB;OAExC,aACC,oBAAC;QACC,IAAIC,SAAQ,QAAQ,OAAO,OAAQ;QACnC,OAAO;SAAE,UAAU;UAAE,GAAG;UAAI,IAAI;UAAI;SAAE,IAAI;SAAI;kBAE7C;SACa;OAEjBA,UACC,oBAAC;QACC,MAAMA;QACS;SACf;;OAEO,CAEhB;MACG;KACI;;GACR"}

package/dist/LandingPage/PageFeaturesWithReferences.d.ts

@@ -20,4 +20,5 @@ interface PageFeaturesWithReferencesProps extends LandingPageBaseProps, WithChil
 }
 declare const PageFeaturesWithReferences: React$1.FC<PageFeaturesWithReferencesProps>;
 //#endregion
-export { PageFeaturesWithReferences, PageFeaturesWithReferencesProps };
+export { PageFeaturesWithReferences, PageFeaturesWithReferencesProps };
+//# sourceMappingURL=PageFeaturesWithReferences.d.ts.map

package/dist/LandingPage/PageFeaturesWithReferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFeaturesWithReferences.d.ts","names":[],"sources":["../../src/LandingPage/PageFeaturesWithReferences.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAkBiB,+BAAA,SACP,sBACN;;AAFJ;;EAQgB,OAAA,CAAA,EAFJ,OAEI;EAPN,OAAA,CAAA,EAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA;EACN,WAAA,CAAA,EAMY,eANZ,EAAA;EAAgB,eAAA,CAAA,EAAA;IAcP,GAAA,EAAA,MAAA;;;;;cAAA,4BAA4B,OAAA,CAAM,GAC7C"}

package/dist/LandingPage/PageFeaturesWithReferences.js

@@ -123,4 +123,5 @@ const PageFeaturesWithReferences = ({ eyebrow, title, desc, cta, testId, rightCo
 };
 
 //#endregion
-export { PageFeaturesWithReferences };
+export { PageFeaturesWithReferences };
+//# sourceMappingURL=PageFeaturesWithReferences.js.map

package/dist/LandingPage/PageFeaturesWithReferences.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFeaturesWithReferences.js","names":["PageFeaturesWithReferences: React.FC<\n  PageFeaturesWithReferencesProps\n>"],"sources":["../../src/LandingPage/PageFeaturesWithReferences.tsx"],"sourcesContent":["import {\n  Box,\n  Column,\n  FlexBox,\n  LayoutGrid,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { DotDense } from '@codecademy/gamut-patterns';\nimport * as React from 'react';\n\nimport { FeatureList, FeatureListItem } from '../FeatureList';\nimport { CTA } from './CTA';\nimport { Description } from './Description';\nimport { Eyebrow } from './PageSingleFeature';\nimport { Title } from './Title';\nimport { TitleWithEyebrow } from './TitleWithEyebrow';\nimport { LandingPageBaseProps } from './types';\n\nexport interface PageFeaturesWithReferencesProps\n  extends LandingPageBaseProps,\n    WithChildrenProp {\n  /**\n   * Object containing eyebrow text shown above title and optional accent boolean\n   */\n  eyebrow?: Eyebrow;\n  maxCols?: 1 | 2 | 3 | 4;\n  featureList?: FeatureListItem[];\n  rightCoverImage?: {\n    url: string;\n  };\n  rightCoverPattern?: 'DotLoose' | 'DotDense';\n  showImageOnMobile?: boolean;\n}\n\nexport const PageFeaturesWithReferences: React.FC<\n  PageFeaturesWithReferencesProps\n> = ({\n  eyebrow,\n  title,\n  desc,\n  cta,\n  testId,\n  rightCoverImage,\n  showImageOnMobile,\n  rightCoverPattern,\n  onAnchorClick,\n  featureList,\n}) => {\n  const hasRightCoverImage = rightCoverImage && rightCoverImage?.url;\n\n  return (\n    <LayoutGrid data-testid={testId} p={0} m={0} gap={{ _: 8, sm: 48 }}>\n      <Column\n        size={{\n          _: 12,\n          sm: 12,\n          md: hasRightCoverImage ? 7 : 12,\n          lg: hasRightCoverImage ? 6 : 12,\n        }}\n        p={{ _: 4, sm: 8, md: 24 }}\n      >\n        <FlexBox flexDirection=\"column\" p={0} m={0} gap={0}>\n          <div>\n            {title && (\n              <FlexBox>\n                {eyebrow ? (\n                  <TitleWithEyebrow\n                    title={title}\n                    eyebrow={eyebrow}\n                    isPageHeading={false}\n                    titleStyle={{\n                      fontWeight: 700,\n                      fontSize: { _: 44, sm: 44 },\n                    }}\n                    eyebrowStyle={{\n                      fontWeight: 'lighter',\n                      fontSize: { _: 16, sm: 16 },\n                    }}\n                  />\n                ) : (\n                  <Title isPageHeading={false}>{title}</Title>\n                )}\n              </FlexBox>\n            )}\n            {desc && (\n              <FlexBox>\n                <Description text={desc} onAnchorClick={onAnchorClick} />\n              </FlexBox>\n            )}\n            {cta && (\n              <Box mt={32}>\n                <CTA\n                  href={cta.href}\n                  onClick={cta.onClick}\n                  buttonType={cta.buttonType}\n                >\n                  {cta.text}\n                </CTA>\n              </Box>\n            )}\n          </div>\n          {featureList && featureList?.length > 0 && (\n            <FeatureList featureList={featureList} />\n          )}\n        </FlexBox>\n      </Column>\n      {hasRightCoverImage && (\n        <Column\n          display={{\n            _: !showImageOnMobile ? 'none' : 'initial',\n            sm: 'initial',\n          }}\n          size={{\n            _: 12,\n            md: 4,\n            lg: 6,\n          }}\n          height=\"100%\"\n        >\n          <Box\n            position=\"relative\"\n            width=\"100%\"\n            height={{ _: '400px', md: '100%' }}\n          >\n            {rightCoverPattern && (\n              <Box\n                position=\"absolute\"\n                width={125}\n                height=\"calc(100% + 8rem)\"\n                zIndex={1}\n                left=\"calc(50% - 4rem)\"\n                top=\"-4rem\"\n                display={{ _: 'none', xs: 'none', sm: 'block' }}\n              >\n                <DotDense />\n              </Box>\n            )}\n            <img\n              // eslint-disable-next-line gamut/no-inline-style\n              style={{\n                width: '100%',\n                height: '100%',\n                objectFit: 'contain',\n                justifySelf: 'center',\n                position: 'absolute',\n                zIndex: 2,\n              }}\n              src={rightCoverImage.url}\n              alt={title || 'N/A'}\n            />\n          </Box>\n        </Column>\n      )}\n    </LayoutGrid>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkCA,MAAaA,8BAER,EACH,SACA,OACA,MACA,KACA,QACA,iBACA,mBACA,mBACA,eACA,kBACI;CACJ,MAAM,qBAAqB,mBAAmB,iBAAiB;AAE/D,QACE,qBAAC;EAAW,eAAa;EAAQ,GAAG;EAAG,GAAG;EAAG,KAAK;GAAE,GAAG;GAAG,IAAI;GAAI;aAChE,oBAAC;GACC,MAAM;IACJ,GAAG;IACH,IAAI;IACJ,IAAI,qBAAqB,IAAI;IAC7B,IAAI,qBAAqB,IAAI;IAC9B;GACD,GAAG;IAAE,GAAG;IAAG,IAAI;IAAG,IAAI;IAAI;aAE1B,qBAAC;IAAQ,eAAc;IAAS,GAAG;IAAG,GAAG;IAAG,KAAK;eAC/C,qBAAC;KACE,SACC,oBAAC,qBACE,UACC,oBAAC;MACQ;MACE;MACT,eAAe;MACf,YAAY;OACV,YAAY;OACZ,UAAU;QAAE,GAAG;QAAI,IAAI;QAAI;OAC5B;MACD,cAAc;OACZ,YAAY;OACZ,UAAU;QAAE,GAAG;QAAI,IAAI;QAAI;OAC5B;OACD,GAEF,oBAAC;MAAM,eAAe;gBAAQ;OAAc,GAEtC;KAEX,QACC,oBAAC,qBACC,oBAAC;MAAY,MAAM;MAAqB;OAAiB,GACjD;KAEX,OACC,oBAAC;MAAI,IAAI;gBACP,oBAAC;OACC,MAAM,IAAI;OACV,SAAS,IAAI;OACb,YAAY,IAAI;iBAEf,IAAI;QACD;OACF;QAEJ,EACL,eAAe,aAAa,SAAS,KACpC,oBAAC,eAAyB,cAAe;KAEnC;IACH,EACR,sBACC,oBAAC;GACC,SAAS;IACP,GAAG,CAAC,oBAAoB,SAAS;IACjC,IAAI;IACL;GACD,MAAM;IACJ,GAAG;IACH,IAAI;IACJ,IAAI;IACL;GACD,QAAO;aAEP,qBAAC;IACC,UAAS;IACT,OAAM;IACN,QAAQ;KAAE,GAAG;KAAS,IAAI;KAAQ;eAEjC,qBACC,oBAAC;KACC,UAAS;KACT,OAAO;KACP,QAAO;KACP,QAAQ;KACR,MAAK;KACL,KAAI;KACJ,SAAS;MAAE,GAAG;MAAQ,IAAI;MAAQ,IAAI;MAAS;eAE/C,oBAAC,aAAW;MACR,EAER,oBAAC;KAEC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW;MACX,aAAa;MACb,UAAU;MACV,QAAQ;MACT;KACD,KAAK,gBAAgB;KACrB,KAAK,SAAS;MACd;KACE;IACC;GAEA"}

package/dist/LandingPage/PageHero.d.ts

@@ -8,4 +8,5 @@ type PageHeroProps = Omit<PageSingleFeatureProps, 'mediaWidth' | 'hideImageOnMob
 };
 declare const PageHero: React$1.FC<PageHeroProps>;
 //#endregion
-export { PageHero, PageHeroProps };
+export { PageHero, PageHeroProps };
+//# sourceMappingURL=PageHero.d.ts.map

package/dist/LandingPage/PageHero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHero.d.ts","names":[],"sources":["../../src/LandingPage/PageHero.tsx"],"sourcesContent":[],"mappings":";;;;KAqBY,aAAA,GAAgB,KAC1B;;EADU,UAAA,CAAA,EAAA,OAAa,GAAA,MACvB;AAOF,CAAA;cAAa,UAAU,OAAA,CAAM,GAAG"}

package/dist/LandingPage/PageHero.js

@@ -15,4 +15,5 @@ const PageHero = ({ showImageOnMobile, textLength = "long", ...props }) => /* @_
 });
 
 //#endregion
-export { PageHero };
+export { PageHero };
+//# sourceMappingURL=PageHero.js.map

package/dist/LandingPage/PageHero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHero.js","names":["PageHero: React.FC<PageHeroProps>"],"sources":["../../src/LandingPage/PageHero.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  MediaColumnsSize,\n  PageSingleFeature,\n  PageSingleFeatureProps,\n} from './PageSingleFeature';\n\nconst getMediaWidth = (\n  mediaType: 'image' | 'video' | undefined,\n  textLength: PageHeroProps['textLength']\n): MediaColumnsSize | undefined => {\n  if (mediaType === 'video') {\n    return 5;\n  }\n  if (mediaType === 'image') {\n    return textLength === 'short' ? 6 : 3;\n  }\n  return undefined;\n};\n\nexport type PageHeroProps = Omit<\n  PageSingleFeatureProps,\n  'mediaWidth' | 'hideImageOnMobile' | 'isPageHeading'\n> & {\n  showImageOnMobile?: boolean;\n  textLength?: 'short' | 'long';\n};\n\nexport const PageHero: React.FC<PageHeroProps> = ({\n  showImageOnMobile,\n  textLength = 'long',\n  ...props\n}) => (\n  <PageSingleFeature\n    {...props}\n    isPageHeading\n    hideImageOnMobile={!showImageOnMobile}\n    mediaWidth={getMediaWidth(props.media?.type, textLength)}\n  />\n);\n"],"mappings":";;;;;AAQA,MAAM,iBACJ,WACA,eACiC;AACjC,KAAI,cAAc,QAChB,QAAO;AAET,KAAI,cAAc,QAChB,QAAO,eAAe,UAAU,IAAI;;AAaxC,MAAaA,YAAqC,EAChD,mBACA,aAAa,QACb,GAAG,YAEH,oBAAC;CACC,GAAI;CACJ;CACA,mBAAmB,CAAC;CACpB,YAAY,cAAc,MAAM,OAAO,MAAM,WAAW;EACxD"}

package/dist/LandingPage/PagePrefooter.d.ts

@@ -6,4 +6,5 @@ declare const PagePrefooter: React$1.FC<LandingPageBaseProps & {
   additionalCtas?: CtaProps[];
 }>;
 //#endregion
-export { PagePrefooter };
+export { PagePrefooter };
+//# sourceMappingURL=PagePrefooter.d.ts.map

package/dist/LandingPage/PagePrefooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagePrefooter.d.ts","names":[],"sources":["../../src/LandingPage/PagePrefooter.tsx"],"sourcesContent":[],"mappings":";;;;cAQa,eAAe,OAAA,CAAM,GAChC;mBAA0C;AAD5C,CAAA,CAAA"}

package/dist/LandingPage/PagePrefooter.js

@@ -61,4 +61,5 @@ const PagePrefooter = ({ title, desc, cta, onAnchorClick, testId, additionalCtas
 };
 
 //#endregion
-export { PagePrefooter };
+export { PagePrefooter };
+//# sourceMappingURL=PagePrefooter.js.map

package/dist/LandingPage/PagePrefooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagePrefooter.js","names":["PagePrefooter: React.FC<\n  LandingPageBaseProps & { additionalCtas?: CtaProps[] }\n>","cta"],"sources":["../../src/LandingPage/PagePrefooter.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport * as React from 'react';\n\nimport { CTA } from './CTA';\nimport { Description } from './Description';\nimport { Title } from './Title';\nimport { CtaProps, LandingPageBaseProps } from './types';\n\nexport const PagePrefooter: React.FC<\n  LandingPageBaseProps & { additionalCtas?: CtaProps[] }\n> = ({ title, desc, cta, onAnchorClick, testId, additionalCtas }) => {\n  const SectionTitle = title && <Title>{title}</Title>;\n  const Desc = desc && (\n    <Description text={desc} onAnchorClick={onAnchorClick} />\n  );\n\n  const hasAdditionalCtas = additionalCtas && additionalCtas.length > 0;\n\n  return cta ? (\n    <FlexBox\n      data-testid={testId}\n      flexDirection={{ _: 'column', sm: 'row' }}\n      justifyContent=\"space-between\"\n      alignItems={{ sm: 'center' }}\n    >\n      <Box flex={1}>\n        {SectionTitle}\n        {Desc}\n      </Box>\n      <FlexBox\n        mt={{ _: 32, sm: 0 }}\n        ml={{ sm: 32 }}\n        gap={16}\n        flexDirection={{\n          _: 'column',\n          md: 'row',\n        }}\n        maxWidth={{ _: '100%', sm: 'max-content' }}\n      >\n        <CTA\n          key={cta.text}\n          href={cta.href}\n          onClick={cta.onClick}\n          buttonType={hasAdditionalCtas ? 'fill' : cta.buttonType}\n        >\n          {cta.text}\n        </CTA>\n        {hasAdditionalCtas\n          ? additionalCtas.map((cta) => {\n              if (!cta) {\n                return null;\n              }\n\n              return (\n                <CTA\n                  key={cta.text}\n                  href={cta.href}\n                  onClick={cta.onClick}\n                  buttonType=\"fill\"\n                >\n                  {cta.text}\n                </CTA>\n              );\n            })\n          : null}\n      </FlexBox>\n    </FlexBox>\n  ) : (\n    <div data-testid={testId}>\n      {SectionTitle}\n      {Desc}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,MAAaA,iBAER,EAAE,OAAO,MAAM,KAAK,eAAe,QAAQ,qBAAqB;CACnE,MAAM,eAAe,SAAS,oBAAC,mBAAO,QAAc;CACpD,MAAM,OAAO,QACX,oBAAC;EAAY,MAAM;EAAqB;GAAiB;CAG3D,MAAM,oBAAoB,kBAAkB,eAAe,SAAS;AAEpE,QAAO,MACL,qBAAC;EACC,eAAa;EACb,eAAe;GAAE,GAAG;GAAU,IAAI;GAAO;EACzC,gBAAe;EACf,YAAY,EAAE,IAAI,UAAU;aAE5B,qBAAC;GAAI,MAAM;cACR,cACA;IACG,EACN,qBAAC;GACC,IAAI;IAAE,GAAG;IAAI,IAAI;IAAG;GACpB,IAAI,EAAE,IAAI,IAAI;GACd,KAAK;GACL,eAAe;IACb,GAAG;IACH,IAAI;IACL;GACD,UAAU;IAAE,GAAG;IAAQ,IAAI;IAAe;cAE1C,oBAAC;IAEC,MAAM,IAAI;IACV,SAAS,IAAI;IACb,YAAY,oBAAoB,SAAS,IAAI;cAE5C,IAAI;MALA,IAAI,KAML,EACL,oBACG,eAAe,KAAK,UAAQ;AAC1B,QAAI,CAACC,MACH,QAAO;AAGT,WACE,oBAAC;KAEC,MAAMA,MAAI;KACV,SAASA,MAAI;KACb,YAAW;eAEVA,MAAI;OALAA,MAAI,KAML;KAER,GACF;IACI;GACF,GAEV,qBAAC;EAAI,eAAa;aACf,cACA;GACG"}

package/dist/LandingPage/PageSingleFeature.d.ts

@@ -57,4 +57,5 @@ type PageSingleFeatureProps = LandingPageBaseProps & {
 };
 declare const PageSingleFeature: React$1.FC<PageSingleFeatureProps>;
 //#endregion
-export { ColumnSize, Eyebrow, FeaturedImage, FeaturedImageProps, ImageProps, MediaColumnsSize, MediaProps, PageSingleFeature, PageSingleFeatureProps };
+export { ColumnSize, Eyebrow, FeaturedImage, FeaturedImageProps, ImageProps, MediaColumnsSize, MediaProps, PageSingleFeature, PageSingleFeatureProps };
+//# sourceMappingURL=PageSingleFeature.d.ts.map

package/dist/LandingPage/PageSingleFeature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSingleFeature.d.ts","names":[],"sources":["../../src/LandingPage/PageSingleFeature.tsx"],"sourcesContent":[],"mappings":";;;;;;KAoBY,UAAA,GAAa,QAAQ;KACrB,gBAAA,GAAmB,QAAQ;AAD3B,KAGA,UAAA,GAHU;EACV,GAAA,EAAA,MAAA;EAEA,GAAA,EAAA,MAAA;AAKZ,CAAA;AASY,KATA,UAAA,GASO,CAAA;EAKP,IAAA,EAAA,OAAA;EAIC,OAAA,CAAA,EAAA,MAqBZ;AAED,CAAA,GArCQ,UAqCI,CAAA,GAAA,CAAA;EAAyB,IAAA,EAAA,OAAA;CAIzB,GAtCJ,UAsCI,CAAA;AAYF,KAhDE,OAAA,GAgDF;EAIK,MAAA,CAAA,EAAA,OAAA;EAII,IAAA,EAAA,MAAA;CAIH;AAAe,KAvDnB,kBAAA,GAAqB,UAuDF,GAAA;EAGlB,OAAA,CAAA,EAAA,MAAA;;;cAtDA,eAAe,OAAA,CAAM,GAAG;KAuBzB,sBAAA,GAAyB;;;;YAIzB;;;;;;;;;;;;UAYF;;;;eAIK;;;;mBAII;;;;gBAIH;;cAGH,mBAAmB,OAAA,CAAM,GAAG"}

package/dist/LandingPage/PageSingleFeature.js

@@ -102,4 +102,5 @@ const PageSingleFeature = ({ cta, desc, eyebrow, hideImageOnMobile, isPageHeadin
 };
 
 //#endregion
-export { FeaturedImage, PageSingleFeature };
+export { FeaturedImage, PageSingleFeature };
+//# sourceMappingURL=PageSingleFeature.js.map

package/dist/LandingPage/PageSingleFeature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSingleFeature.js","names":["FeaturedImage: React.FC<FeaturedImageProps>","PageSingleFeature: React.FC<PageSingleFeatureProps>","cta"],"sources":["../../src/LandingPage/PageSingleFeature.tsx"],"sourcesContent":["import {\n  Anchor,\n  Box,\n  Column,\n  ColumnProps,\n  FlexBox,\n  LayoutGrid,\n  Video,\n  VideoProps,\n} from '@codecademy/gamut';\nimport * as React from 'react';\n\nimport { FeatureList, FeatureListItem } from '../FeatureList';\nimport { PausableImage } from '../PausableImage';\nimport { CTA } from './CTA';\nimport { Description } from './Description';\nimport { Title } from './Title';\nimport { TitleWithEyebrow } from './TitleWithEyebrow';\nimport { CtaProps, LandingPageBaseProps } from './types';\n\nexport type ColumnSize = Extract<ColumnProps['size'], number>;\nexport type MediaColumnsSize = Extract<ColumnSize, 3 | 4 | 5 | 6>;\n\nexport type ImageProps = {\n  src: string;\n  alt: string;\n};\n\nexport type MediaProps =\n  | ({\n      type: 'image';\n      linkUrl?: string;\n    } & ImageProps)\n  | ({\n      type: 'video';\n    } & VideoProps);\n\nexport type Eyebrow = {\n  accent?: boolean;\n  text: string;\n};\n\nexport type FeaturedImageProps = ImageProps & {\n  linkUrl?: string;\n  hideImageOnMobile?: boolean;\n};\nexport const FeaturedImage: React.FC<FeaturedImageProps> = ({\n  src,\n  alt,\n  linkUrl,\n  hideImageOnMobile,\n}) => {\n  const Container = linkUrl ? Anchor : Box;\n\n  return (\n    <Container\n      display={{\n        _: hideImageOnMobile ? 'none' : 'initial',\n        sm: 'initial',\n      }}\n      href={linkUrl}\n      width={1}\n      tabIndex={linkUrl ? 0 : undefined}\n    >\n      <PausableImage src={src} alt={alt} data-testid=\"feature-image\" />\n    </Container>\n  );\n};\n\nexport type PageSingleFeatureProps = LandingPageBaseProps & {\n  /**\n   * Object containing eyebrow text shown above title and optional accent boolean\n   */\n  eyebrow?: Eyebrow;\n  /**\n   * Whether the image should be hidden on mobile. Note that videos are always shown on mobile for accessibility\n   */\n  hideImageOnMobile?: boolean;\n  /**\n   * If the heading is the page h1 heading or a smaller heading\n   */\n  isPageHeading?: boolean;\n  /**\n   * Whether to show an image or a video, with the associated props to do so\n   */\n  media?: MediaProps;\n  /**\n   * Number of columns out of 12 that the media should take up, defaults to 6. The remaining columns will be used for the text\n   */\n  mediaWidth?: MediaColumnsSize;\n  /**\n   * Optional array of additional CTAs if more than one CTA is added to the section. These will appear after the provided singular CTA.\n   */\n  additionalCtas?: CtaProps[];\n  /**\n   * Optional array of features to display in a list.\n   */\n  featureList?: FeatureListItem[];\n};\n\nexport const PageSingleFeature: React.FC<PageSingleFeatureProps> = ({\n  cta,\n  desc,\n  eyebrow,\n  hideImageOnMobile,\n  isPageHeading,\n  media,\n  mediaWidth = 6,\n  onAnchorClick,\n  testId,\n  title,\n  additionalCtas,\n  featureList,\n}) => {\n  const hasAdditionalCtas = additionalCtas && additionalCtas.length > 0;\n\n  const primaryContent = (\n    <>\n      {title &&\n        (eyebrow ? (\n          <TitleWithEyebrow\n            title={title}\n            eyebrow={eyebrow}\n            isPageHeading={isPageHeading}\n          />\n        ) : (\n          <Title isPageHeading={isPageHeading}>{title}</Title>\n        ))}\n      {desc && <Description text={desc} onAnchorClick={onAnchorClick} />}\n      {cta && (\n        <FlexBox\n          mt={32}\n          gap={16}\n          flexDirection={{\n            _: 'column',\n            sm: cta.buttonType === 'fill' && mediaWidth < 5 ? 'row' : 'column',\n            md: 'row',\n          }}\n          maxWidth={{ _: '100%', sm: 'max-content' }}\n        >\n          <CTA\n            key={cta.text}\n            href={cta.href}\n            onClick={cta.onClick}\n            buttonType={hasAdditionalCtas ? 'fill' : cta.buttonType}\n          >\n            {cta.text}\n          </CTA>\n          {hasAdditionalCtas\n            ? additionalCtas.map((cta) => {\n                if (!cta) {\n                  return null;\n                }\n\n                return (\n                  <CTA\n                    key={cta.text}\n                    href={cta.href}\n                    onClick={cta.onClick}\n                    buttonType=\"fill\"\n                  >\n                    {cta.text}\n                  </CTA>\n                );\n              })\n            : null}\n        </FlexBox>\n      )}\n      {featureList && <FeatureList featureList={featureList} />}\n    </>\n  );\n\n  if (!media) {\n    return <div data-testid={testId}>{primaryContent}</div>;\n  }\n\n  const textWidth = (12 - mediaWidth) as ColumnSize;\n\n  return (\n    <LayoutGrid data-testid={testId} rowGap={16} columnGap={{ _: 8, sm: 32 }}>\n      <Column\n        size={{ sm: textWidth }}\n        alignContent=\"flex-start\"\n        alignSelf={!desc ? 'center' : 'flex-start'}\n      >\n        {primaryContent}\n      </Column>\n      <Column\n        size={{ sm: mediaWidth }}\n        gridRowStart={{ _: hideImageOnMobile ? 'initial' : 1, sm: 'initial' }}\n        alignContent=\"flex-start\"\n      >\n        {media.type === 'image' && (\n          <FeaturedImage {...media} hideImageOnMobile={hideImageOnMobile} />\n        )}\n        {media.type === 'video' && <Video {...media} />}\n      </Column>\n    </LayoutGrid>\n  );\n};\n"],"mappings":";;;;;;;;;;;AA8CA,MAAaA,iBAA+C,EAC1D,KACA,KACA,SACA,wBACI;AAGJ,QACE,oBAHgB,UAAU,SAAS;EAIjC,SAAS;GACP,GAAG,oBAAoB,SAAS;GAChC,IAAI;GACL;EACD,MAAM;EACN,OAAO;EACP,UAAU,UAAU,IAAI;YAExB,oBAAC;GAAmB;GAAU;GAAK,eAAY;IAAkB;GACvD;;AAmChB,MAAaC,qBAAuD,EAClE,KACA,MACA,SACA,mBACA,eACA,OACA,aAAa,GACb,eACA,QACA,OACA,gBACA,kBACI;CACJ,MAAM,oBAAoB,kBAAkB,eAAe,SAAS;CAEpE,MAAM,iBACJ;EACG,UACE,UACC,oBAAC;GACQ;GACE;GACM;IACf,GAEF,oBAAC;GAAqB;aAAgB;IAAc;EAEvD,QAAQ,oBAAC;GAAY,MAAM;GAAqB;IAAiB;EACjE,OACC,qBAAC;GACC,IAAI;GACJ,KAAK;GACL,eAAe;IACb,GAAG;IACH,IAAI,IAAI,eAAe,UAAU,aAAa,IAAI,QAAQ;IAC1D,IAAI;IACL;GACD,UAAU;IAAE,GAAG;IAAQ,IAAI;IAAe;cAE1C,oBAAC;IAEC,MAAM,IAAI;IACV,SAAS,IAAI;IACb,YAAY,oBAAoB,SAAS,IAAI;cAE5C,IAAI;MALA,IAAI,KAML,EACL,oBACG,eAAe,KAAK,UAAQ;AAC1B,QAAI,CAACC,MACH,QAAO;AAGT,WACE,oBAAC;KAEC,MAAMA,MAAI;KACV,SAASA,MAAI;KACb,YAAW;eAEVA,MAAI;OALAA,MAAI,KAML;KAER,GACF;IACI;EAEX,eAAe,oBAAC,eAAyB,cAAe;KACxD;AAGL,KAAI,CAAC,MACH,QAAO,oBAAC;EAAI,eAAa;YAAS;GAAqB;CAGzD,MAAM,YAAa,KAAK;AAExB,QACE,qBAAC;EAAW,eAAa;EAAQ,QAAQ;EAAI,WAAW;GAAE,GAAG;GAAG,IAAI;GAAI;aACtE,oBAAC;GACC,MAAM,EAAE,IAAI,WAAW;GACvB,cAAa;GACb,WAAW,CAAC,OAAO,WAAW;aAE7B;IACM,EACT,qBAAC;GACC,MAAM,EAAE,IAAI,YAAY;GACxB,cAAc;IAAE,GAAG,oBAAoB,YAAY;IAAG,IAAI;IAAW;GACrE,cAAa;cAEZ,MAAM,SAAS,WACd,oBAAC;IAAc,GAAI;IAA0B;KAAqB,EAEnE,MAAM,SAAS,WAAW,oBAAC,SAAM,GAAI,QAAS;IACxC;GACE"}

package/dist/LandingPage/PageTestimonials.d.ts

@@ -22,4 +22,5 @@ interface PageTestimonialsProps extends LandingPageBaseProps, WithChildrenProp {
 }
 declare const PageTestimonials: React$1.FC<PageTestimonialsProps>;
 //#endregion
-export { LiveLearningTestimonialItem, PageTestimonials, PageTestimonialsProps };
+export { LiveLearningTestimonialItem, PageTestimonials, PageTestimonialsProps };
+//# sourceMappingURL=PageTestimonials.d.ts.map

package/dist/LandingPage/PageTestimonials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTestimonials.d.ts","names":[],"sources":["../../src/LandingPage/PageTestimonials.tsx"],"sourcesContent":[],"mappings":";;;;;;UAoBiB,2BAAA;;IAAA,GAAA,EAAA,MAAA;EAiEA,CAAA;EAGL,SAAA,EAAA,MAAA;EACK,QAAA,EAAA,MAAA;EAHP,QAAA,EAAA,MAAA;EACN,OAAA,EAAA,MAAA;EAAgB,UAAA,EAAA,MAAA;EAoDP,SAAA,EAAA,MAAA;;;UAtDI,qBAAA,SACP,sBACN;YACQ;iBACK;;cAkDJ,kBAAkB,OAAA,CAAM,GAAG"}

package/dist/LandingPage/PageTestimonials.js

@@ -102,4 +102,5 @@ const PageTestimonials = ({ testimonials, testId }) => {
 };
 
 //#endregion
-export { PageTestimonials };
+export { PageTestimonials };
+//# sourceMappingURL=PageTestimonials.js.map

package/dist/LandingPage/PageTestimonials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTestimonials.js","names":["PageTestimonials: React.FC<PageTestimonialsProps>"],"sources":["../../src/LandingPage/PageTestimonials.tsx"],"sourcesContent":["import {\n  Box,\n  Card,\n  Column,\n  FlexBox,\n  LayoutGrid,\n  Markdown,\n  Text,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { MiniQuoteIcon, PersonFilledIcon } from '@codecademy/gamut-icons';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\nimport { ReactNode } from 'react';\n\nimport { Avatar } from '../Avatar';\nimport { Eyebrow } from './PageSingleFeature';\nimport { LandingPageBaseProps } from './types';\n\nexport interface LiveLearningTestimonialItem {\n  image: {\n    url: string;\n  };\n  firstName: string;\n  lastName: string;\n  jobTitle: string;\n  company: string;\n  shortQuote: string;\n  longQuote: string;\n  href: string;\n}\n\nconst UserProfile = ({\n  fullName,\n  jobTitle,\n  image,\n}: {\n  fullName: string;\n  jobTitle: string;\n  image: string;\n}): ReactNode => (\n  <FlexBox flexDirection=\"row\" gap={12} alignItems=\"center\">\n    <FlexBox\n      background={theme.colors['blue-300']}\n      borderRadius=\"full\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      borderWidth={1}\n      borderColor=\"black\"\n      borderStyle=\"solid\"\n      minWidth={64}\n      minHeight={64}\n      overflow=\"hidden\"\n    >\n      {image ? (\n        <Avatar\n          src={image}\n          alt={fullName || 'N/A'}\n          size={64}\n          disableDropshadow\n        />\n      ) : (\n        <PersonFilledIcon color=\"black\" size={60} mt={12} borderRadius=\"full\" />\n      )}\n    </FlexBox>\n    <Box display=\"flex\" flexDirection=\"column\" gap={4}>\n      <Text fontWeight=\"bold\" fontSize={16}>\n        {fullName}\n      </Text>\n      <Text fontSize={16} color=\"gray-800\">\n        {jobTitle}\n      </Text>\n    </Box>\n  </FlexBox>\n);\n\nconst StyledCard = styled(Card)(\n  ({ bg }: { bg?: string }) => `\n  background: ${bg};\n  display: flex;\n  flex-direction: column;\n`\n);\n\nexport interface PageTestimonialsProps\n  extends LandingPageBaseProps,\n    WithChildrenProp {\n  eyebrow?: Eyebrow;\n  testimonials?: LiveLearningTestimonialItem[];\n}\n\nconst TestimonialCard = ({\n  testimonial,\n  bg,\n}: {\n  testimonial: LiveLearningTestimonialItem;\n  bg?: string;\n}): ReactNode => (\n  <StyledCard shadow=\"patternLeft\" borderRadius=\"lg\" p={24} bg={bg}>\n    <MiniQuoteIcon size={18} mt=\"auto\" />\n    <Box mt={12} mb={24}>\n      <Markdown text={testimonial?.longQuote} />\n    </Box>\n    <UserProfile\n      fullName={testimonial?.firstName + ' ' + testimonial?.lastName}\n      jobTitle={testimonial?.jobTitle}\n      image={testimonial?.image?.url}\n    />\n  </StyledCard>\n);\n\nconst TestimonialCards = ({\n  testimonials,\n}: {\n  testimonials: LiveLearningTestimonialItem[];\n}): ReactNode => {\n  const backgroundVariants = [\n    theme.colors['yellow-0'],\n    theme.colors['pink-0'],\n    theme.colors['blue-0'],\n  ];\n  return testimonials?.map((item, index) => (\n    <Column\n      key={item.lastName.replaceAll(' ', '-')}\n      size={{\n        _: 12,\n        sm: 6,\n        md: 4,\n      }}\n    >\n      <TestimonialCard\n        testimonial={item}\n        bg={backgroundVariants[index % backgroundVariants.length]}\n      />\n    </Column>\n  ));\n};\n\nexport const PageTestimonials: React.FC<PageTestimonialsProps> = ({\n  testimonials,\n  testId,\n}) => {\n  return (\n    <LayoutGrid data-testid={testId} gap={32}>\n      {testimonials && testimonials?.length > 0 && (\n        <TestimonialCards testimonials={testimonials} />\n      )}\n    </LayoutGrid>\n  );\n};\n"],"mappings":";;;;;;;;;AAiCA,MAAM,eAAe,EACnB,UACA,UACA,YAMA,qBAAC;CAAQ,eAAc;CAAM,KAAK;CAAI,YAAW;YAC/C,oBAAC;EACC,YAAY,MAAM,OAAO;EACzB,cAAa;EACb,YAAW;EACX,gBAAe;EACf,aAAa;EACb,aAAY;EACZ,aAAY;EACZ,UAAU;EACV,WAAW;EACX,UAAS;YAER,QACC,oBAAC;GACC,KAAK;GACL,KAAK,YAAY;GACjB,MAAM;GACN;IACA,GAEF,oBAAC;GAAiB,OAAM;GAAQ,MAAM;GAAI,IAAI;GAAI,cAAa;IAAS;GAElE,EACV,qBAAC;EAAI,SAAQ;EAAO,eAAc;EAAS,KAAK;aAC9C,oBAAC;GAAK,YAAW;GAAO,UAAU;aAC/B;IACI,EACP,oBAAC;GAAK,UAAU;GAAI,OAAM;aACvB;IACI;GACH;EACE;AAGZ,MAAM,aAAa,OAAO,KAAK,EAC5B,EAAE,SAA0B;gBACf,GAAG;;;EAIlB;AASD,MAAM,mBAAmB,EACvB,aACA,SAKA,qBAAC;CAAW,QAAO;CAAc,cAAa;CAAK,GAAG;CAAQ;;EAC5D,oBAAC;GAAc,MAAM;GAAI,IAAG;IAAS;EACrC,oBAAC;GAAI,IAAI;GAAI,IAAI;aACf,oBAAC,YAAS,MAAM,aAAa,YAAa;IACtC;EACN,oBAAC;GACC,UAAU,aAAa,YAAY,MAAM,aAAa;GACtD,UAAU,aAAa;GACvB,OAAO,aAAa,OAAO;IAC3B;;EACS;AAGf,MAAM,oBAAoB,EACxB,mBAGe;CACf,MAAM,qBAAqB;EACzB,MAAM,OAAO;EACb,MAAM,OAAO;EACb,MAAM,OAAO;EACd;AACD,QAAO,cAAc,KAAK,MAAM,UAC9B,oBAAC;EAEC,MAAM;GACJ,GAAG;GACH,IAAI;GACJ,IAAI;GACL;YAED,oBAAC;GACC,aAAa;GACb,IAAI,mBAAmB,QAAQ,mBAAmB;IAClD;IAVG,KAAK,SAAS,WAAW,KAAK,IAAI,CAWhC,CACT;;AAGJ,MAAaA,oBAAqD,EAChE,cACA,aACI;AACJ,QACE,oBAAC;EAAW,eAAa;EAAQ,KAAK;YACnC,gBAAgB,cAAc,SAAS,KACtC,oBAAC,oBAA+B,eAAgB;GAEvC"}

package/dist/LandingPage/PageVideoGallery.d.ts

@@ -12,4 +12,5 @@ type PageVideoGalleryProps = LandingPageBaseProps & {
 };
 declare const PageVideoGallery: React$1.FC<PageVideoGalleryProps>;
 //#endregion
-export { PageVideo, PageVideoGallery, PageVideoGalleryProps };
+export { PageVideo, PageVideoGallery, PageVideoGalleryProps };
+//# sourceMappingURL=PageVideoGallery.d.ts.map

package/dist/LandingPage/PageVideoGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageVideoGallery.d.ts","names":[],"sources":["../../src/LandingPage/PageVideoGallery.tsx"],"sourcesContent":[],"mappings":";;;;KAwCY,SAAA;;EAAA,KAAA,EAAA,MAAS;EAMT,gBAAA,CAAA,EAAA,MAAqB;AAIjC,CAAA;KAJY,qBAAA,GAAwB;UAC1B;;cAGG,kBAAkB,OAAA,CAAM,GAAG"}

package/dist/LandingPage/PageVideoGallery.js

@@ -64,4 +64,5 @@ const PageVideoGallery = ({ videos, title, desc, onAnchorClick, cta, testId }) =
 ] });
 
 //#endregion
-export { PageVideoGallery };
+export { PageVideoGallery };
+//# sourceMappingURL=PageVideoGallery.js.map

package/dist/LandingPage/PageVideoGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageVideoGallery.js","names":["PageVideoGallery: React.FC<PageVideoGalleryProps>"],"sources":["../../src/LandingPage/PageVideoGallery.tsx"],"sourcesContent":["import { Box, Video } from '@codecademy/gamut';\nimport { mediaQueries } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { CTA } from './CTA';\nimport { Description } from './Description';\nimport { Title } from './Title';\nimport { LandingPageBaseProps } from './types';\n\nconst Grid = styled.div`\n  display: grid;\n  grid-template: 1fr / 1fr;\n  gap: 8px;\n\n  ${mediaQueries.sm} {\n    // there must be a mathematical explanation for why ~12:5 is the correct ratio for\n    // the column widths but I do not know what it is. Regardless, the effect is that\n    // all three videos will maintain a 16:9 aspect ratio with an even gap between them.\n\n    grid-template: 1fr 1fr / 12fr 5fr;\n\n    gap: 16px;\n  }\n  ${mediaQueries.md} {\n    gap: 24px;\n  }\n  ${mediaQueries.lg} {\n    gap: 32px;\n  }\n`;\n\nconst GridVideo = styled(Video)`\n  ${mediaQueries.sm} {\n    &:first-of-type {\n      grid-row: 1 / span 2;\n    }\n  }\n`;\n\nexport type PageVideo = {\n  url: string;\n  title: string;\n  placeholderImage?: string;\n};\n\nexport type PageVideoGalleryProps = LandingPageBaseProps & {\n  videos: PageVideo[];\n};\n\nexport const PageVideoGallery: React.FC<PageVideoGalleryProps> = ({\n  videos,\n  title,\n  desc,\n  onAnchorClick,\n  cta,\n  testId,\n}) => (\n  <div>\n    {(title || desc) && (\n      <Box mb={32}>\n        {title && <Title>{title}</Title>}\n        {desc && <Description text={desc} onAnchorClick={onAnchorClick} />}\n      </Box>\n    )}\n    <Grid data-testid={testId}>\n      {videos.map((video) => (\n        <GridVideo\n          key={video.url}\n          videoUrl={video.url}\n          videoTitle={video.title}\n          placeholderImage={video.placeholderImage || true}\n        />\n      ))}\n    </Grid>\n    {cta && (\n      <Box mt={32}>\n        <CTA href={cta.href} onClick={cta.onClick} buttonType={cta.buttonType}>\n          {cta.text}\n        </CTA>\n      </Box>\n    )}\n  </div>\n);\n"],"mappings":";;;;;;;;;;AAUA,MAAM,OAAO,OAAO,GAAG;;;;;IAKnB,aAAa,GAAG;;;;;;;;;IAShB,aAAa,GAAG;;;IAGhB,aAAa,GAAG;;;;AAKpB,MAAM,YAAY,OAAO,MAAM;IAC3B,aAAa,GAAG;;;;;;AAiBpB,MAAaA,oBAAqD,EAChE,QACA,OACA,MACA,eACA,KACA,aAEA,qBAAC;EACG,SAAS,SACT,qBAAC;EAAI,IAAI;aACN,SAAS,oBAAC,mBAAO,QAAc,EAC/B,QAAQ,oBAAC;GAAY,MAAM;GAAqB;IAAiB;GAC9D;CAER,oBAAC;EAAK,eAAa;YAChB,OAAO,KAAK,UACX,oBAAC;GAEC,UAAU,MAAM;GAChB,YAAY,MAAM;GAClB,kBAAkB,MAAM,oBAAoB;KAHvC,MAAM,IAIX,CACF;GACG;CACN,OACC,oBAAC;EAAI,IAAI;YACP,oBAAC;GAAI,MAAM,IAAI;GAAM,SAAS,IAAI;GAAS,YAAY,IAAI;aACxD,IAAI;IACD;GACF;IAEJ"}

package/dist/LandingPage/Title.d.ts

@@ -24,4 +24,5 @@ declare const titleProps: {
 };
 declare const Title: React$1.FC<TitleProps>;
 //#endregion
-export { Title, TitleProps, titleProps };
+export { Title, TitleProps, titleProps };
+//# sourceMappingURL=Title.d.ts.map

package/dist/LandingPage/Title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.d.ts","names":[],"sources":["../../src/LandingPage/Title.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,UAAA,SAAmB;;AAApC;AAIa,cAAA,UAgBH,EAAA;EAEG,SAOZ,OAAA,EAAA;;;;;;;;;;;;;;;;cAPY,OAAO,OAAA,CAAM,GAAG"}

package/dist/LandingPage/Title.js

@@ -27,4 +27,5 @@ const Title = ({ isPageHeading, children }) => /* @__PURE__ */ jsx(Text, {
 });
 
 //#endregion
-export { Title, titleProps };
+export { Title, titleProps };
+//# sourceMappingURL=Title.js.map

package/dist/LandingPage/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../../src/LandingPage/Title.tsx"],"sourcesContent":["import { Text, WithChildrenProp } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport interface TitleProps extends WithChildrenProp {\n  isPageHeading?: boolean;\n}\n\nexport const titleProps = {\n  heading: {\n    as: 'h1',\n    fontSize: {\n      _: 34,\n      sm: 44,\n      lg: 64,\n    },\n  },\n  subheading: {\n    as: 'h2',\n    fontSize: {\n      _: 26,\n      lg: 34,\n    },\n  },\n} as const;\n\nexport const Title: React.FC<TitleProps> = ({ isPageHeading, children }) => (\n  <Text\n    maxWidth=\"58rem\"\n    {...titleProps[isPageHeading ? 'heading' : 'subheading']}\n  >\n    {children}\n  </Text>\n);\n"],"mappings":";;;;;AAOA,MAAa,aAAa;CACxB,SAAS;EACP,IAAI;EACJ,UAAU;GACR,GAAG;GACH,IAAI;GACJ,IAAI;GACL;EACF;CACD,YAAY;EACV,IAAI;EACJ,UAAU;GACR,GAAG;GACH,IAAI;GACL;EACF;CACF;AAED,MAAaA,SAA+B,EAAE,eAAe,eAC3D,oBAAC;CACC,UAAS;CACT,GAAI,WAAW,gBAAgB,YAAY;CAE1C;EACI"}

package/dist/LandingPage/TitleWithEyebrow.d.ts

@@ -12,4 +12,5 @@ interface TitleWithEyebrowProps {
 }
 declare const TitleWithEyebrow: React.FC<TitleWithEyebrowProps>;
 //#endregion
-export { TitleWithEyebrow, TitleWithEyebrowProps };
+export { TitleWithEyebrow, TitleWithEyebrowProps };
+//# sourceMappingURL=TitleWithEyebrow.d.ts.map