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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TitleWithEyebrow.d.ts","names":[],"sources":["../../src/LandingPage/TitleWithEyebrow.tsx"],"sourcesContent":[],"mappings":";;;;;UAMiB,qBAAA;WACN;EADM,KAAA,EAAA,MAAA,GAAA,SAAqB;EAC3B,aAAA,EAAA,OAAA,GAAA,SAAA;EAGS,UAAA,CAAA,EAAL,IAAK,CAAA,SAAA,EAAA,IAAA,GAAA,eAAA,GAAA,UAAA,CAAA;EAAL,YAAA,CAAA,EACE,IADF,CACO,SADP,EAAA,IAAA,GAAA,eAAA,GAAA,UAAA,CAAA;;AACE,cAGJ,gBAHI,EAGc,KAAA,CAAM,EAHpB,CAGuB,qBAHvB,CAAA"}

package/dist/LandingPage/TitleWithEyebrow.js

@@ -34,4 +34,5 @@ const TitleWithEyebrow = ({ title, eyebrow, isPageHeading, titleStyle, eyebrowSt
 })] });
 
 //#endregion
-export { TitleWithEyebrow };
+export { TitleWithEyebrow };
+//# sourceMappingURL=TitleWithEyebrow.js.map

package/dist/LandingPage/TitleWithEyebrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleWithEyebrow.js","names":["TitleWithEyebrow: React.FC<TitleWithEyebrowProps>"],"sources":["../../src/LandingPage/TitleWithEyebrow.tsx"],"sourcesContent":["import { Text, TextProps } from '@codecademy/gamut';\nimport React from 'react';\n\nimport { Eyebrow } from './PageSingleFeature';\nimport { Title } from './Title';\n\nexport interface TitleWithEyebrowProps {\n  eyebrow: Eyebrow;\n  title: string | undefined;\n  isPageHeading: boolean | undefined;\n  titleStyle?: Omit<TextProps, 'as' | 'truncateLines' | 'truncate'>;\n  eyebrowStyle?: Omit<TextProps, 'as' | 'truncateLines' | 'truncate'>;\n}\n\nexport const TitleWithEyebrow: React.FC<TitleWithEyebrowProps> = ({\n  title,\n  eyebrow,\n  isPageHeading,\n  titleStyle,\n  eyebrowStyle,\n}) => (\n  <div>\n    <Title isPageHeading={isPageHeading}>\n      <Text\n        fontSize={{ _: 20, sm: 22 }}\n        fontFamily=\"accent\"\n        mb={16}\n        display=\"block\"\n        color={eyebrow.accent ? 'blue' : undefined}\n        {...eyebrowStyle}\n      >\n        {eyebrow.text}\n      </Text>\n    </Title>\n    <Text\n      fontSize={isPageHeading ? { _: 34, sm: 44, lg: 64 } : { _: 26, lg: 34 }}\n      fontWeight={700}\n      lineHeight=\"title\"\n      {...titleStyle}\n    >\n      {title}\n    </Text>\n  </div>\n);\n"],"mappings":";;;;;;AAcA,MAAaA,oBAAqD,EAChE,OACA,SACA,eACA,YACA,mBAEA,qBAAC,oBACC,oBAAC;CAAqB;WACpB,oBAAC;EACC,UAAU;GAAE,GAAG;GAAI,IAAI;GAAI;EAC3B,YAAW;EACX,IAAI;EACJ,SAAQ;EACR,OAAO,QAAQ,SAAS,SAAS;EACjC,GAAI;YAEH,QAAQ;GACJ;EACD,EACR,oBAAC;CACC,UAAU,gBAAgB;EAAE,GAAG;EAAI,IAAI;EAAI,IAAI;EAAI,GAAG;EAAE,GAAG;EAAI,IAAI;EAAI;CACvE,YAAY;CACZ,YAAW;CACX,GAAI;WAEH;EACI,IACH"}

package/dist/LandingPage/types.d.ts

@@ -28,4 +28,5 @@ type LandingPageBaseProps = {
 };
 type CtaProps = LandingPageBaseProps['cta'];
 //#endregion
-export { CtaProps, LandingPageBaseProps };
+export { CtaProps, LandingPageBaseProps };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/LandingPage/types.tsx"],"sourcesContent":[],"mappings":";KAAY,oBAAA;EAAA,KAAA,CAAA,EAAA,MAAA;EAS+B;;;EAaN,IAAA,CAAA,EAAA,MAAA;EAOzB;;;0BApBc,KAAA,CAAM,WAAW;;;;;;;;;;;;;cAa7B,KAAA,CAAM;;;;;KAOR,QAAA,GAAW"}

package/dist/LayoutMenu/AccordionMenu.d.ts

@@ -15,4 +15,5 @@ type Section = {
   items: SectionItem[];
 };
 //#endregion
-export { Section, SectionItem };
+export { Section, SectionItem };
+//# sourceMappingURL=AccordionMenu.d.ts.map

package/dist/LayoutMenu/AccordionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionMenu.d.ts","names":[],"sources":["../../src/LayoutMenu/AccordionMenu.tsx"],"sourcesContent":[],"mappings":";;;;KA8BY,WAAA;;EAAA,IAAA,EAAA,MAAA;EAQA,IAAA,EAAA,MAAO;mBAJA,OAAA,CAAM;UACf,GAAA,CAAI;;KAGF,OAAA;;;SAGH"}

package/dist/LayoutMenu/AccordionMenu.js

@@ -57,4 +57,5 @@ const AccordionMenu = ({ section, onSectionToggle, onItemClick, selectedItem, ve
 };
 
 //#endregion
-export { AccordionMenu, isSection };
+export { AccordionMenu, isSection };
+//# sourceMappingURL=AccordionMenu.js.map

package/dist/LayoutMenu/AccordionMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionMenu.js","names":["theme","AccordionMenu: React.FC<AccordionMenuProps>","React"],"sources":["../../src/LayoutMenu/AccordionMenu.tsx"],"sourcesContent":["import { AccordionAreaDeprecated, Anchor, Text } from '@codecademy/gamut';\nimport { MiniChevronDownIcon } from '@codecademy/gamut-icons';\nimport { css, states, transitionConcat } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport { Scale } from '@codecademy/variance/dist/types/config';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { LayoutMenuSection } from './LayoutMenuSection';\n\nconst StyledAccordionArea = styled(AccordionAreaDeprecated)`\n  padding-bottom: ${({ theme }) => theme.spacing[32]};\n  position: relative;\n  left: -4px;\n`;\n\nconst chevronStates = states({\n  expanded: { transform: 'rotate(180deg)' },\n});\n\nconst ExpandChevron = styled(MiniChevronDownIcon)<\n  StyleProps<typeof chevronStates>\n>(\n  css({\n    transform: 'rotate(0deg)',\n    transition: transitionConcat(['transform'], 'slow', 'ease-out'),\n  }),\n  chevronStates\n);\n\nexport type SectionItem = {\n  title: string;\n  slug: string;\n  href: string;\n  onClick: (event: React.MouseEvent) => void;\n  badge?: JSX.Element;\n};\n\nexport type Section = {\n  title: string;\n  slug: string;\n  items: SectionItem[];\n};\n\nexport const isSection = (item: Section | React.ReactNode): item is Section => {\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    'title' in item &&\n    'slug' in item &&\n    'items' in item\n  );\n};\n\nexport type AccordionMenuProps = {\n  section: Section;\n  onSectionToggle: (sectionSlug: string) => void;\n  onItemClick: () => void;\n  selectedItem?: string;\n  verticalSpacing?: Scale<{\n    readonly property: 'padding';\n    readonly scale: 'spacing';\n  }>;\n};\n\nexport const AccordionMenu: React.FC<AccordionMenuProps> = ({\n  section,\n  onSectionToggle,\n  onItemClick,\n  selectedItem,\n  verticalSpacing,\n}) => {\n  const [expanded, setExpanded] = React.useState(true);\n\n  return (\n    <StyledAccordionArea\n      expanded={expanded}\n      top={\n        <Anchor\n          variant=\"interface\"\n          py={12}\n          px={4}\n          onClick={() => {\n            onSectionToggle(section.slug);\n            setExpanded((prev) => !prev);\n          }}\n          aria-expanded={expanded}\n          display=\"flex\"\n        >\n          {/* eslint-disable-next-line gamut/no-inline-style */}\n          <Text variant=\"title-xs\" style={{ flex: 1 }} textAlign=\"left\">\n            {section.title}\n          </Text>\n          <ExpandChevron\n            ml={12}\n            size={14}\n            expanded={expanded}\n            position=\"relative\"\n            top={4}\n          />\n        </Anchor>\n      }\n    >\n      <LayoutMenuSection\n        items={section.items}\n        selectedItem={selectedItem}\n        onItemClick={onItemClick}\n        verticalSpacing={verticalSpacing}\n      />\n    </StyledAccordionArea>\n  );\n};\n"],"mappings":";;;;;;;;;AAUA,MAAM,sBAAsB,OAAO,wBAAwB;qBACtC,EAAE,qBAAYA,QAAM,QAAQ,IAAI;;;;AAKrD,MAAM,gBAAgB,OAAO,EAC3B,UAAU,EAAE,WAAW,kBAAkB,EAC1C,CAAC;AAEF,MAAM,gBAAgB,OAAO,oBAAoB,CAG/C,IAAI;CACF,WAAW;CACX,YAAY,iBAAiB,CAAC,YAAY,EAAE,QAAQ,WAAW;CAChE,CAAC,EACF,cACD;AAgBD,MAAa,aAAa,SAAqD;AAC7E,QACE,OAAO,SAAS,YAChB,SAAS,QACT,WAAW,QACX,UAAU,QACV,WAAW;;AAef,MAAaC,iBAA+C,EAC1D,SACA,iBACA,aACA,cACA,sBACI;CACJ,MAAM,CAAC,UAAU,eAAeC,QAAM,SAAS,KAAK;AAEpD,QACE,oBAAC;EACW;EACV,KACE,qBAAC;GACC,SAAQ;GACR,IAAI;GACJ,IAAI;GACJ,eAAe;AACb,oBAAgB,QAAQ,KAAK;AAC7B,iBAAa,SAAS,CAAC,KAAK;;GAE9B,iBAAe;GACf,SAAQ;cAGR,oBAAC;IAAK,SAAQ;IAAW,OAAO,EAAE,MAAM,GAAG;IAAE,WAAU;cACpD,QAAQ;KACJ,EACP,oBAAC;IACC,IAAI;IACJ,MAAM;IACI;IACV,UAAS;IACT,KAAK;KACL;IACK;YAGX,oBAAC;GACC,OAAO,QAAQ;GACD;GACD;GACI;IACjB;GACkB"}

package/dist/LayoutMenu/LayoutMenu.d.ts

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

package/dist/LayoutMenu/LayoutMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenu.d.ts","names":[],"sources":["../../src/LayoutMenu/LayoutMenu.tsx"],"sourcesContent":[],"mappings":";;;;;;UAgBiB,eAAA,SAAwB;;AAAzC;;EASuB,UAAM,EAAA,MAAA;EAoBT;;;;EAmCP,QAAA,EAAA,CAvDA,OAwIZ,GAxIsB,OAAA,CAAM,SAuDK,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;oBAnCd;;;;;oBAKA;;;;;cA8BP,YAAY,OAAA,CAAM,GAAG"}

package/dist/LayoutMenu/LayoutMenu.js

@@ -102,4 +102,5 @@ const LayoutMenu = ({ closeLabel, sections, onSectionToggle, selectedItem, mobil
 };
 
 //#endregion
-export { LayoutMenu };
+export { LayoutMenu };
+//# sourceMappingURL=LayoutMenu.js.map

package/dist/LayoutMenu/LayoutMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenu.js","names":["LayoutMenu: React.FC<LayoutMenuProps>","React"],"sources":["../../src/LayoutMenu/LayoutMenu.tsx"],"sourcesContent":["import { Box, Flyout, StrokeButton, WithChildrenProp } from '@codecademy/gamut';\nimport { variant } from '@codecademy/gamut-styles';\nimport { Scale } from '@codecademy/variance/dist/types/config';\nimport styled from '@emotion/styled';\nimport { useState } from 'react';\nimport * as React from 'react';\n\nimport { LogoCodecademy } from '../Logos';\nimport {\n  AccordionMenu,\n  isSection,\n  Section,\n  SectionItem,\n} from './AccordionMenu';\nimport { LayoutMenuSection } from './LayoutMenuSection';\n\nexport interface LayoutMenuProps extends WithChildrenProp {\n  /**\n   * Accessibility label for the mobile Flyout's close button.\n   */\n  closeLabel: string;\n  /**\n   * An array of sections containing the title, slug, and items, each of which will become an accordion. Each item contains a title, slug, and onClick.\n   * Arbitrary react nodes can also be passed and will be rendered as-is.\n   */\n  sections: (Section | React.ReactNode)[];\n  /**\n   * The slug of the current selected item\n   */\n  selectedItem?: string;\n  /**\n   * Callback to be run on click of the accordion button\n   */\n  onSectionToggle: (sectionSlug: string) => void;\n  /**\n   * Text shown in mobile button that opens flyout on click\n   */\n  mobileButtonText: string;\n  /**\n   * Breakpoint above which the menu button displays as a full sidebar\n   */\n  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * An array of section items, each of which become an additional link on top of the accordion section.\n   */\n  topLinkSections?: SectionItem[];\n  /**\n   * Set fixed height for menu with overflow\n   */\n  menuHeight?: 'sm' | 'md' | 'lg';\n  verticalSpacing?: Scale<{\n    readonly property: 'padding';\n    readonly scale: 'spacing';\n  }>;\n}\n\nconst StyleBox = styled(Box)(\n  variant({\n    prop: 'menuHeight',\n    base: {\n      overflowY: 'auto',\n      overflowX: 'hidden',\n      paddingTop: '4px',\n      paddingLeft: '4px',\n    },\n    variants: {\n      sm: {\n        height: '630px',\n      },\n      md: {\n        height: '1000px',\n      },\n      lg: {\n        height: '1370px',\n        paddingLeft: '8px',\n      },\n    },\n  })\n);\n\nexport const LayoutMenu: React.FC<LayoutMenuProps> = ({\n  closeLabel,\n  sections,\n  onSectionToggle,\n  selectedItem,\n  mobileButtonText,\n  breakpoint = 'lg',\n  children,\n  topLinkSections,\n  menuHeight,\n  verticalSpacing,\n}) => {\n  const [expanded, setExpanded] = useState(false);\n\n  const accordionMenuSections = sections.map((section, i) => (\n    <Box as=\"li\" key={isSection(section) ? section.slug : i}>\n      {isSection(section) ? (\n        <AccordionMenu\n          section={section}\n          onSectionToggle={onSectionToggle}\n          onItemClick={() => setExpanded(false)}\n          selectedItem={selectedItem}\n          verticalSpacing={verticalSpacing}\n        />\n      ) : (\n        // eslint-disable-next-line react/no-array-index-key\n        <React.Fragment key={i}>{section}</React.Fragment>\n      )}\n    </Box>\n  ));\n\n  const topLinkLayoutMenuSections = topLinkSections && (\n    <Box as=\"li\">\n      <LayoutMenuSection\n        items={topLinkSections}\n        onItemClick={() => setExpanded(false)}\n        selectedItem={selectedItem}\n        pb={32}\n      />\n    </Box>\n  );\n\n  return (\n    <nav>\n      <Box display={{ _: 'block', [breakpoint]: 'none' }}>\n        <Flyout\n          closeLabel={closeLabel}\n          expanded={expanded}\n          onClose={() => setExpanded(false)}\n          title={<LogoCodecademy mb={32} />}\n        >\n          <Box as=\"ul\" listStyleType=\"none\" py={0} px={16} m={0}>\n            {topLinkLayoutMenuSections}\n            {accordionMenuSections}\n            {children ? <Box as=\"li\">{children}</Box> : null}\n          </Box>\n        </Flyout>\n        <StrokeButton\n          aria-expanded={expanded}\n          variant=\"secondary\"\n          width={1}\n          onClick={() => setExpanded(true)}\n        >\n          {mobileButtonText}\n        </StrokeButton>\n      </Box>\n      <StyleBox\n        as=\"ul\"\n        listStyleType=\"none\"\n        p={0}\n        m={0}\n        menuHeight={menuHeight}\n        display={{ _: 'none', [breakpoint]: 'block' }}\n        data-testid=\"desktop-menu\"\n      >\n        {topLinkLayoutMenuSections}\n        {accordionMenuSections}\n        {children ? <Box as=\"li\">{children}</Box> : null}\n      </StyleBox>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAwDA,MAAM,WAAW,OAAO,IAAI,CAC1B,QAAQ;CACN,MAAM;CACN,MAAM;EACJ,WAAW;EACX,WAAW;EACX,YAAY;EACZ,aAAa;EACd;CACD,UAAU;EACR,IAAI,EACF,QAAQ,SACT;EACD,IAAI,EACF,QAAQ,UACT;EACD,IAAI;GACF,QAAQ;GACR,aAAa;GACd;EACF;CACF,CAAC,CACH;AAED,MAAaA,cAAyC,EACpD,YACA,UACA,iBACA,cACA,kBACA,aAAa,MACb,UACA,iBACA,YACA,sBACI;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,wBAAwB,SAAS,KAAK,SAAS,MACnD,oBAAC;EAAI,IAAG;YACL,UAAU,QAAQ,GACjB,oBAAC;GACU;GACQ;GACjB,mBAAmB,YAAY,MAAM;GACvB;GACG;IACjB,GAGF,oBAACC,QAAM,sBAAkB,WAAJ,EAA6B;IAXpC,UAAU,QAAQ,GAAG,QAAQ,OAAO,EAahD,CACN;CAEF,MAAM,4BAA4B,mBAChC,oBAAC;EAAI,IAAG;YACN,oBAAC;GACC,OAAO;GACP,mBAAmB,YAAY,MAAM;GACvB;GACd,IAAI;IACJ;GACE;AAGR,QACE,qBAAC,oBACC,qBAAC;EAAI,SAAS;GAAE,GAAG;IAAU,aAAa;GAAQ;aAChD,oBAAC;GACa;GACF;GACV,eAAe,YAAY,MAAM;GACjC,OAAO,oBAAC,kBAAe,IAAI,KAAM;aAEjC,qBAAC;IAAI,IAAG;IAAK,eAAc;IAAO,IAAI;IAAG,IAAI;IAAI,GAAG;;KACjD;KACA;KACA,WAAW,oBAAC;MAAI,IAAG;MAAM;OAAe,GAAG;;KACxC;IACC,EACT,oBAAC;GACC,iBAAe;GACf,SAAQ;GACR,OAAO;GACP,eAAe,YAAY,KAAK;aAE/B;IACY;GACX,EACN,qBAAC;EACC,IAAG;EACH,eAAc;EACd,GAAG;EACH,GAAG;EACS;EACZ,SAAS;GAAE,GAAG;IAAS,aAAa;GAAS;EAC7C,eAAY;;GAEX;GACA;GACA,WAAW,oBAAC;IAAI,IAAG;IAAM;KAAe,GAAG;;GACnC,IACP"}

package/dist/LayoutMenu/LayoutMenuSection.js

@@ -33,4 +33,5 @@ const LayoutMenuSection = ({ items, selectedItem, onItemClick, verticalSpacing =
 });
 
 //#endregion
-export { LayoutMenuSection };
+export { LayoutMenuSection };
+//# sourceMappingURL=LayoutMenuSection.js.map

package/dist/LayoutMenu/LayoutMenuSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenuSection.js","names":["LayoutMenuSection: React.FC<LayoutMenuSectionProps>"],"sources":["../../src/LayoutMenu/LayoutMenuSection.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { system } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport { Scale } from '@codecademy/variance/dist/types/config';\nimport * as React from 'react';\n\nimport { SectionItem } from './AccordionMenu';\nimport { SectionItemLink } from './SectionItemLink';\nimport { SelectedSectionItem } from './SelectedSectionItem';\n\nexport type LayoutMenuSectionStyles = StyleProps<typeof system.space>;\n\nexport type LayoutMenuSectionProps = LayoutMenuSectionStyles & {\n  items: SectionItem[];\n  selectedItem?: string;\n  onItemClick: () => void;\n  verticalSpacing?: Scale<{\n    readonly property: 'padding';\n    readonly scale: 'spacing';\n  }>;\n};\n\nexport const LayoutMenuSection: React.FC<LayoutMenuSectionProps> = ({\n  items,\n  selectedItem,\n  onItemClick,\n  verticalSpacing = 8,\n  ...styleProps\n}) => (\n  <Box as=\"ul\" listStyleType=\"none\" p={0} m={0} {...styleProps}>\n    {items.map((item) => (\n      <Box as=\"li\" key={item.slug} py={verticalSpacing} px={4}>\n        {selectedItem === item.slug ? (\n          <SelectedSectionItem>\n            <FlexBox alignItems=\"center\">\n              {item.title}\n              {item.badge}\n            </FlexBox>\n          </SelectedSectionItem>\n        ) : (\n          <SectionItemLink\n            href={item.href}\n            onClick={(event) => {\n              item.onClick(event);\n              onItemClick();\n            }}\n          >\n            <FlexBox alignItems=\"center\">\n              {item.title}\n              {item.badge}\n            </FlexBox>\n          </SectionItemLink>\n        )}\n      </Box>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;;;AAsBA,MAAaA,qBAAuD,EAClE,OACA,cACA,aACA,kBAAkB,GAClB,GAAG,iBAEH,oBAAC;CAAI,IAAG;CAAK,eAAc;CAAO,GAAG;CAAG,GAAG;CAAG,GAAI;WAC/C,MAAM,KAAK,SACV,oBAAC;EAAI,IAAG;EAAqB,IAAI;EAAiB,IAAI;YACnD,iBAAiB,KAAK,OACrB,oBAAC,iCACC,qBAAC;GAAQ,YAAW;cACjB,KAAK,OACL,KAAK;IACE,GACU,GAEtB,oBAAC;GACC,MAAM,KAAK;GACX,UAAU,UAAU;AAClB,SAAK,QAAQ,MAAM;AACnB,iBAAa;;aAGf,qBAAC;IAAQ,YAAW;eACjB,KAAK,OACL,KAAK;KACE;IACM;IApBJ,KAAK,KAsBjB,CACN;EACE"}

package/dist/LayoutMenu/SectionItemLink.d.ts

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

package/dist/LayoutMenu/SectionItemLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.d.ts","names":[],"sources":["../../src/LayoutMenu/SectionItemLink.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,oBAAA,SAA6B;mBAC3B,OAAA,CAAM;EADR,IAAA,EAAA,MAAA;AAKjB;cAAa,iBAAiB,OAAA,CAAM,GAAG"}

package/dist/LayoutMenu/SectionItemLink.js

@@ -14,4 +14,5 @@ const SectionItemLink = ({ onClick, href, children }) => {
 };
 
 //#endregion
-export { SectionItemLink };
+export { SectionItemLink };
+//# sourceMappingURL=SectionItemLink.js.map

package/dist/LayoutMenu/SectionItemLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.js","names":["SectionItemLink: React.FC<SectionItemLinkProps>"],"sources":["../../src/LayoutMenu/SectionItemLink.tsx"],"sourcesContent":["import { Anchor, WithChildrenProp } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport interface SectionItemLinkProps extends WithChildrenProp {\n  onClick: (event: React.MouseEvent) => void;\n  href: string;\n}\n\nexport const SectionItemLink: React.FC<SectionItemLinkProps> = ({\n  onClick,\n  href,\n  children,\n}) => {\n  return (\n    <Anchor variant=\"interface\" display=\"block\" href={href} onClick={onClick}>\n      {children}\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;AAQA,MAAaA,mBAAmD,EAC9D,SACA,MACA,eACI;AACJ,QACE,oBAAC;EAAO,SAAQ;EAAY,SAAQ;EAAc;EAAe;EAC9D;GACM"}

package/dist/LayoutMenu/SelectedSectionItem.d.ts

@@ -4,4 +4,5 @@ import * as React$1 from "react";
 //#region src/LayoutMenu/SelectedSectionItem.d.ts
 declare const SelectedSectionItem: React$1.FC<WithChildrenProp>;
 //#endregion
-export { SelectedSectionItem };
+export { SelectedSectionItem };
+//# sourceMappingURL=SelectedSectionItem.d.ts.map

package/dist/LayoutMenu/SelectedSectionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedSectionItem.d.ts","names":[],"sources":["../../src/LayoutMenu/SelectedSectionItem.tsx"],"sourcesContent":[],"mappings":";;;;cAGa,qBAAqB,OAAA,CAAM,GAAG"}

package/dist/LayoutMenu/SelectedSectionItem.js

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

package/dist/LayoutMenu/SelectedSectionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedSectionItem.js","names":["SelectedSectionItem: React.FC<WithChildrenProp>"],"sources":["../../src/LayoutMenu/SelectedSectionItem.tsx"],"sourcesContent":["import { Box, Text, WithChildrenProp } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport const SelectedSectionItem: React.FC<WithChildrenProp> = ({\n  children,\n}) => {\n  return (\n    <Box borderLeft={1} borderWidthLeft=\"6px\" pl={12} aria-current=\"true\">\n      <Text fontWeight=\"title\">{children}</Text>\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAGA,MAAaA,uBAAmD,EAC9D,eACI;AACJ,QACE,oBAAC;EAAI,YAAY;EAAG,iBAAgB;EAAM,IAAI;EAAI,gBAAa;YAC7D,oBAAC;GAAK,YAAW;GAAS;IAAgB;GACtC"}

package/dist/LayoutMenuVariant/AccordionMenu.d.ts

@@ -16,4 +16,5 @@ type Section = {
   items: SectionItem[];
 };
 //#endregion
-export { Section, SectionItem };
+export { Section, SectionItem };
+//# sourceMappingURL=AccordionMenu.d.ts.map

package/dist/LayoutMenuVariant/AccordionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionMenu.d.ts","names":[],"sources":["../../src/LayoutMenuVariant/AccordionMenu.tsx"],"sourcesContent":[],"mappings":";;;;KAuCY,WAAA;;EAAA,IAAA,EAAA,MAAA;EAIO,IAAM,EAAA,MAAA;EACf,OAAI,EAAA,CAAA,KAAA,EADK,KAAA,CAAM,UACX,EAAA,GAAA,IAAA;EAC0B,KAAA,CAAA,EAD9B,GAAA,CAAI,OAC0B;EAA5B,OAAM,CAAA,EAAN,KAAA,CAAM,cAAA,CAAA,OAAsB,MAAtB,CAAA,CAAA,SAAA,CAAA;CAAc;AAGpB,KAAA,OAAA,GAAO;;;SAGV"}

package/dist/LayoutMenuVariant/AccordionMenu.js

@@ -70,4 +70,5 @@ const AccordionMenu = ({ section, onSectionToggle, onItemClick }) => {
 };
 
 //#endregion
-export { AccordionMenu };
+export { AccordionMenu };
+//# sourceMappingURL=AccordionMenu.js.map

package/dist/LayoutMenuVariant/AccordionMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionMenu.js","names":["theme","AccordionMenu: React.FC<AccordionMenuProps>"],"sources":["../../src/LayoutMenuVariant/AccordionMenu.tsx"],"sourcesContent":["import { AccordionAreaDeprecated, Anchor, Box, Text } from '@codecademy/gamut';\nimport { MiniChevronDownIcon } from '@codecademy/gamut-icons';\nimport { css, states, transitionConcat } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport React, { useState } from 'react';\n\nimport { LayoutMenuSection } from './LayoutMenuSection';\n\nconst StyledAccordionArea = styled(AccordionAreaDeprecated)`\n  padding-block: ${({ theme }) => theme.spacing[16]};\n  position: relative;\n  left: -4px;\n\n  &:not(:first-child) {\n    border-top: 1px solid ${({ theme }) => theme.colors['navy-300']};\n  }\n`;\n\nconst StyledAnchor = styled(Anchor)`\n  :hover {\n    color: inherit;\n  }\n`;\n\nconst chevronStates = states({\n  expanded: { transform: 'rotate(180deg)' },\n});\n\nconst ExpandChevron = styled(MiniChevronDownIcon)<\n  StyleProps<typeof chevronStates>\n>(\n  css({\n    transform: 'rotate(0deg)',\n    transition: transitionConcat(['transform'], 'slow', 'ease-out'),\n  }),\n  chevronStates\n);\n\nexport type SectionItem = {\n  title: string;\n  slug: string;\n  href: string;\n  onClick: (event: React.MouseEvent) => void;\n  badge?: JSX.Element;\n  variant?: React.ComponentProps<typeof Anchor>['variant'];\n};\n\nexport type Section = {\n  title: string;\n  slug: string;\n  items: SectionItem[];\n};\n\nexport type AccordionMenuProps = {\n  section: Section;\n  onSectionToggle: (sectionSlug: string) => void;\n  onItemClick: () => void;\n};\n\nexport const AccordionMenu: React.FC<AccordionMenuProps> = ({\n  section,\n  onSectionToggle,\n  onItemClick,\n}) => {\n  const [expanded, setExpanded] = useState(true);\n\n  return (\n    <StyledAccordionArea\n      expanded={expanded}\n      top={\n        <StyledAnchor\n          variant=\"interface\"\n          pb={12}\n          px={4}\n          onClick={() => {\n            onSectionToggle(section.slug);\n            setExpanded((prev) => !prev);\n          }}\n          aria-expanded={expanded}\n          display=\"flex\"\n          width=\"100%\"\n        >\n          <Box display=\"flex\" justifyContent=\"space-between\" width=\"100%\">\n            <Text\n              variant=\"p-small\"\n              // eslint-disable-next-line gamut/no-inline-style\n              style={{ flex: 1, fontWeight: 'bold' }}\n              textAlign=\"left\"\n            >\n              {section.title}\n            </Text>\n            <ExpandChevron\n              ml={12}\n              size={16}\n              expanded={expanded}\n              position=\"relative\"\n              top={4}\n            />\n          </Box>\n        </StyledAnchor>\n      }\n    >\n      <LayoutMenuSection items={section.items} onItemClick={onItemClick} />\n    </StyledAccordionArea>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,MAAM,sBAAsB,OAAO,wBAAwB;oBACvC,EAAE,qBAAYA,QAAM,QAAQ,IAAI;;;;;6BAKvB,EAAE,qBAAYA,QAAM,OAAO,YAAY;;;AAIpE,MAAM,eAAe,OAAO,OAAO;;;;;AAMnC,MAAM,gBAAgB,OAAO,EAC3B,UAAU,EAAE,WAAW,kBAAkB,EAC1C,CAAC;AAEF,MAAM,gBAAgB,OAAO,oBAAoB,CAG/C,IAAI;CACF,WAAW;CACX,YAAY,iBAAiB,CAAC,YAAY,EAAE,QAAQ,WAAW;CAChE,CAAC,EACF,cACD;AAuBD,MAAaC,iBAA+C,EAC1D,SACA,iBACA,kBACI;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAE9C,QACE,oBAAC;EACW;EACV,KACE,oBAAC;GACC,SAAQ;GACR,IAAI;GACJ,IAAI;GACJ,eAAe;AACb,oBAAgB,QAAQ,KAAK;AAC7B,iBAAa,SAAS,CAAC,KAAK;;GAE9B,iBAAe;GACf,SAAQ;GACR,OAAM;aAEN,qBAAC;IAAI,SAAQ;IAAO,gBAAe;IAAgB,OAAM;eACvD,oBAAC;KACC,SAAQ;KAER,OAAO;MAAE,MAAM;MAAG,YAAY;MAAQ;KACtC,WAAU;eAET,QAAQ;MACJ,EACP,oBAAC;KACC,IAAI;KACJ,MAAM;KACI;KACV,UAAS;KACT,KAAK;MACL;KACE;IACO;YAGjB,oBAAC;GAAkB,OAAO,QAAQ;GAAoB;IAAe;GACjD"}

package/dist/LayoutMenuVariant/LayoutMenu.d.ts

@@ -40,4 +40,5 @@ interface LayoutMenuProps extends WithChildrenProp {
 }
 declare const LayoutMenu: React.FC<LayoutMenuProps>;
 //#endregion
-export { LayoutMenu, LayoutMenuProps };
+export { LayoutMenu, LayoutMenuProps };
+//# sourceMappingURL=LayoutMenu.d.ts.map

package/dist/LayoutMenuVariant/LayoutMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenu.d.ts","names":[],"sources":["../../src/LayoutMenuVariant/LayoutMenu.tsx"],"sourcesContent":[],"mappings":";;;;;;UAUiB,eAAA,SAAwB;;AAAzC;;EAoBmC,UAAA,EAAA,MAAA;EAAd;;;EApBoC,QAAA,EAQ7C,OAR6C,EAAA;EA6D5C;;;;;;;;;;;qBAzCQ,cAAc;;;;;;;;oBAQf;;;;;;cAiCP,YAAY,KAAA,CAAM,GAAG"}

package/dist/LayoutMenuVariant/LayoutMenu.js

@@ -82,4 +82,5 @@ const LayoutMenu = ({ closeLabel, sections, onSectionToggle, mobileButtonText, m
 };
 
 //#endregion
-export { LayoutMenu };
+export { LayoutMenu };
+//# sourceMappingURL=LayoutMenu.js.map

package/dist/LayoutMenuVariant/LayoutMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenu.js","names":["LayoutMenu: React.FC<LayoutMenuProps>"],"sources":["../../src/LayoutMenuVariant/LayoutMenu.tsx"],"sourcesContent":["import { Box, Flyout, StrokeButton, WithChildrenProp } from '@codecademy/gamut';\nimport { GamutIconProps } from '@codecademy/gamut-icons';\nimport { variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React, { ComponentType, useState } from 'react';\n\nimport { LogoCodecademy } from '../Logos';\nimport { AccordionMenu, Section, SectionItem } from './AccordionMenu';\nimport { LayoutMenuSection } from './LayoutMenuSection';\n\nexport interface LayoutMenuProps extends WithChildrenProp {\n  /**\n   * Accessibility label for the mobile Flyout's close button.\n   */\n  closeLabel: string;\n  /**\n   * An array of sections containing the title, slug, and items, each of which will become an accordion. Each item contains a title, slug, and onClick.\n   */\n  sections: Section[];\n  /**\n   * Callback to be run on click of the accordion button\n   */\n  onSectionToggle: (sectionSlug: string) => void;\n  /**\n   * Text shown in mobile button that opens flyout on click\n   */\n  mobileButtonText: string;\n  /**\n   * Icon shown in mobile button that opens flyout on click\n   */\n  mobileButtonIcon?: ComponentType<GamutIconProps>;\n  /**\n   * Breakpoint above which the menu button displays as a full sidebar\n   */\n  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * An array of section items, each of which become an additional link on top of the accordion section.\n   */\n  topLinkSections?: SectionItem[];\n  /**\n   * Set fixed height for menu with overflow\n   */\n  menuHeight?: 'sm' | 'md' | 'lg';\n}\n\nconst StyleBox = styled(Box)(\n  variant({\n    prop: 'menuHeight',\n    base: {\n      borderColor: 'black',\n      borderStyleBottom: 'solid',\n      borderWidthBottom: '1px',\n      overflowY: 'auto',\n      overflowX: 'hidden',\n      paddingTop: '4px',\n      paddingLeft: '4px',\n    },\n    variants: {\n      sm: {\n        height: '630px',\n      },\n      md: {\n        height: '1000px',\n      },\n      lg: {\n        height: '1370px',\n      },\n    },\n  })\n);\n\nexport const LayoutMenu: React.FC<LayoutMenuProps> = ({\n  closeLabel,\n  sections,\n  onSectionToggle,\n  mobileButtonText,\n  mobileButtonIcon,\n  breakpoint = 'lg',\n  children,\n  topLinkSections,\n  menuHeight,\n}) => {\n  const [expanded, setExpanded] = useState(false);\n\n  const accordionMenuSections = sections.map((section) => (\n    <AccordionMenu\n      key={section.slug}\n      section={section}\n      onSectionToggle={onSectionToggle}\n      onItemClick={() => setExpanded(false)}\n    />\n  ));\n\n  const topLinkLayoutMenuSections = topLinkSections && (\n    <LayoutMenuSection\n      items={topLinkSections}\n      onItemClick={() => setExpanded(false)}\n      pb={32}\n    />\n  );\n\n  return (\n    <nav aria-label=\"Secondary\">\n      <Box display={{ _: 'block', [breakpoint]: 'none' }}>\n        <Flyout\n          closeLabel={closeLabel}\n          expanded={expanded}\n          onClose={() => setExpanded(false)}\n          title={<LogoCodecademy mb={32} />}\n        >\n          <Box px={24}>\n            {topLinkLayoutMenuSections}\n            {accordionMenuSections}\n            {children}\n          </Box>\n        </Flyout>\n        <StrokeButton\n          aria-expanded={expanded}\n          variant=\"secondary\"\n          width={1}\n          icon={mobileButtonIcon}\n          onClick={() => setExpanded(true)}\n        >\n          {mobileButtonText}\n        </StrokeButton>\n      </Box>\n      <StyleBox\n        menuHeight={menuHeight}\n        display={{ _: 'none', [breakpoint]: 'block' }}\n        data-testid=\"desktop-menu\"\n      >\n        {topLinkLayoutMenuSections}\n        {accordionMenuSections}\n        {children}\n      </StyleBox>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;AA6CA,MAAM,WAAW,OAAO,IAAI,CAC1B,QAAQ;CACN,MAAM;CACN,MAAM;EACJ,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,WAAW;EACX,WAAW;EACX,YAAY;EACZ,aAAa;EACd;CACD,UAAU;EACR,IAAI,EACF,QAAQ,SACT;EACD,IAAI,EACF,QAAQ,UACT;EACD,IAAI,EACF,QAAQ,UACT;EACF;CACF,CAAC,CACH;AAED,MAAaA,cAAyC,EACpD,YACA,UACA,iBACA,kBACA,kBACA,aAAa,MACb,UACA,iBACA,iBACI;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,wBAAwB,SAAS,KAAK,YAC1C,oBAAC;EAEU;EACQ;EACjB,mBAAmB,YAAY,MAAM;IAHhC,QAAQ,KAIb,CACF;CAEF,MAAM,4BAA4B,mBAChC,oBAAC;EACC,OAAO;EACP,mBAAmB,YAAY,MAAM;EACrC,IAAI;GACJ;AAGJ,QACE,qBAAC;EAAI,cAAW;aACd,qBAAC;GAAI,SAAS;IAAE,GAAG;KAAU,aAAa;IAAQ;cAChD,oBAAC;IACa;IACF;IACV,eAAe,YAAY,MAAM;IACjC,OAAO,oBAAC,kBAAe,IAAI,KAAM;cAEjC,qBAAC;KAAI,IAAI;;MACN;MACA;MACA;;MACG;KACC,EACT,oBAAC;IACC,iBAAe;IACf,SAAQ;IACR,OAAO;IACP,MAAM;IACN,eAAe,YAAY,KAAK;cAE/B;KACY;IACX,EACN,qBAAC;GACa;GACZ,SAAS;IAAE,GAAG;KAAS,aAAa;IAAS;GAC7C,eAAY;;IAEX;IACA;IACA;;IACQ;GACP"}

package/dist/LayoutMenuVariant/LayoutMenuSection.js

@@ -31,4 +31,5 @@ const LayoutMenuSection = ({ items, onItemClick, ...styleProps }) => /* @__PURE_
 });
 
 //#endregion
-export { LayoutMenuSection };
+export { LayoutMenuSection };
+//# sourceMappingURL=LayoutMenuSection.js.map

package/dist/LayoutMenuVariant/LayoutMenuSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenuSection.js","names":["LayoutMenuSection: React.FC<LayoutMenuSectionProps>"],"sources":["../../src/LayoutMenuVariant/LayoutMenuSection.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { system } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\nimport { SectionItem } from './AccordionMenu';\nimport { SectionItemLink } from './SectionItemLink';\n\nexport type LayoutMenuSectionStyles = StyleProps<typeof system.space>;\n\nexport type LayoutMenuSectionProps = LayoutMenuSectionStyles & {\n  items: SectionItem[];\n  onItemClick: () => void;\n};\n\nconst StyledBox = styled(Box)`\n  list-style: none;\n`;\nexport const LayoutMenuSection: React.FC<LayoutMenuSectionProps> = ({\n  items,\n  onItemClick,\n  ...styleProps\n}) => (\n  <Box {...styleProps} as=\"menu\" px={4} m={0}>\n    {items.map((item) => (\n      <StyledBox key={item.slug} as=\"li\">\n        <SectionItemLink\n          href={item.href}\n          onClick={(event) => {\n            item.onClick(event);\n            onItemClick();\n          }}\n          variant={item.variant ?? 'interface'}\n        >\n          <FlexBox alignItems=\"center\">\n            {item.title}\n            {item.badge}\n          </FlexBox>\n        </SectionItemLink>\n      </StyledBox>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;;;AAgBA,MAAM,YAAY,OAAO,IAAI;;;AAG7B,MAAaA,qBAAuD,EAClE,OACA,aACA,GAAG,iBAEH,oBAAC;CAAI,GAAI;CAAY,IAAG;CAAO,IAAI;CAAG,GAAG;WACtC,MAAM,KAAK,SACV,oBAAC;EAA0B,IAAG;YAC5B,oBAAC;GACC,MAAM,KAAK;GACX,UAAU,UAAU;AAClB,SAAK,QAAQ,MAAM;AACnB,iBAAa;;GAEf,SAAS,KAAK,WAAW;aAEzB,qBAAC;IAAQ,YAAW;eACjB,KAAK,OACL,KAAK;KACE;IACM;IAbJ,KAAK,KAcT,CACZ;EACE"}

package/dist/LayoutMenuVariant/SectionItemLink.d.ts

@@ -9,4 +9,5 @@ interface SectionItemLinkProps extends WithChildrenProp {
 }
 declare const SectionItemLink: React.FC<SectionItemLinkProps>;
 //#endregion
-export { SectionItemLink, SectionItemLinkProps };
+export { SectionItemLink, SectionItemLinkProps };
+//# sourceMappingURL=SectionItemLink.d.ts.map

package/dist/LayoutMenuVariant/SectionItemLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.d.ts","names":[],"sources":["../../src/LayoutMenuVariant/SectionItemLink.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,oBAAA,SAA6B;mBAC3B,KAAA,CAAM;EADR,IAAA,EAAA,MAAA;EACE,OAAM,CAAA,EAEb,KAAA,CAAM,cAFO,CAAA,OAEe,MAFf,CAAA,CAAA,SAAA,CAAA;;AAEP,cAGL,eAHK,EAGY,KAAA,CAAM,EAHlB,CAGqB,oBAHrB,CAAA"}

package/dist/LayoutMenuVariant/SectionItemLink.js

@@ -14,4 +14,5 @@ const SectionItemLink = ({ onClick, href, variant = "interface", children }) =>
 };
 
 //#endregion
-export { SectionItemLink };
+export { SectionItemLink };
+//# sourceMappingURL=SectionItemLink.js.map

package/dist/LayoutMenuVariant/SectionItemLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.js","names":["SectionItemLink: React.FC<SectionItemLinkProps>"],"sources":["../../src/LayoutMenuVariant/SectionItemLink.tsx"],"sourcesContent":["import { Anchor, WithChildrenProp } from '@codecademy/gamut';\nimport React from 'react';\n\nexport interface SectionItemLinkProps extends WithChildrenProp {\n  onClick: (event: React.MouseEvent) => void;\n  href: string;\n  variant?: React.ComponentProps<typeof Anchor>['variant'];\n}\n\nexport const SectionItemLink: React.FC<SectionItemLinkProps> = ({\n  onClick,\n  href,\n  variant = 'interface',\n  children,\n}) => {\n  return (\n    <Anchor variant={variant} display=\"block\" href={href} onClick={onClick}>\n      {children}\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;AASA,MAAaA,mBAAmD,EAC9D,SACA,MACA,UAAU,aACV,eACI;AACJ,QACE,oBAAC;EAAgB;EAAS,SAAQ;EAAc;EAAe;EAC5D;GACM"}

package/dist/LayoutMenuVariant/index.d.ts

@@ -6,4 +6,5 @@ declare namespace index_d_exports {
   export { LayoutMenu, LayoutMenuProps, SectionItemLink, SectionItemLinkProps };
 }
 //#endregion
-export { LayoutMenu, LayoutMenuProps, SectionItemLink, SectionItemLinkProps, index_d_exports };
+export { LayoutMenu, LayoutMenuProps, SectionItemLink, SectionItemLinkProps, index_d_exports };
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/LayoutMenuVariant/index.js

@@ -9,4 +9,5 @@ var LayoutMenuVariant_exports = /* @__PURE__ */ __export({
 });
 
 //#endregion
-export { LayoutMenu, LayoutMenuVariant_exports, SectionItemLink };
+export { LayoutMenu, LayoutMenuVariant_exports, SectionItemLink };
+//# sourceMappingURL=index.js.map

package/dist/LayoutMenuVariant/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/LayoutMenuVariant/index.ts"],"sourcesContent":["export * from './LayoutMenu';\nexport * from './SectionItemLink';\n"],"mappings":""}

package/dist/LearningOutcomeAssessmentScores/AssessmentDetail.js

@@ -47,4 +47,5 @@ const AssessmentDetail = ({ isHighestScore, score, scoreAchievedAt }) => {
 };
 
 //#endregion
-export { AssessmentDetail };
+export { AssessmentDetail };
+//# sourceMappingURL=AssessmentDetail.js.map

package/dist/LearningOutcomeAssessmentScores/AssessmentDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssessmentDetail.js","names":["AssessmentDetail: React.FC<AssessmentDetailProps>"],"sources":["../../src/LearningOutcomeAssessmentScores/AssessmentDetail.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport React from 'react';\n\ninterface AssessmentDetailProps {\n  isHighestScore?: boolean;\n  score?: number | null;\n  scoreAchievedAt?: string | null;\n}\n\nexport const AssessmentDetail: React.FC<AssessmentDetailProps> = ({\n  isHighestScore,\n  score,\n  scoreAchievedAt,\n}) => {\n  const hasPassedAssessment = score && score >= 70;\n\n  return (\n    <FlexBox\n      borderColor=\"background-hover\"\n      borderRight={isHighestScore ? 1 : 'none'}\n      width=\"100%\"\n      p={16}\n      column\n    >\n      <Text fontWeight={700}>\n        {isHighestScore ? 'Highest score' : 'Most recent'}\n      </Text>\n      {score != null ? (\n        <>\n          <FlexBox mt={8} alignItems=\"center\">\n            <Text\n              variant=\"title-sm\"\n              data-testid=\"score-percent\"\n              mr={4}\n              color={hasPassedAssessment ? 'green-700' : undefined}\n            >\n              {`${score}%`}\n            </Text>\n            <Box>\n              {!hasPassedAssessment && (\n                <Box\n                  data-testid=\"failed-assessment-indicator\"\n                  borderRadius=\"full\"\n                  dimensions={16}\n                  bg=\"orange-500\"\n                  mb={4}\n                />\n              )}\n            </Box>\n          </FlexBox>\n          {!!scoreAchievedAt && (\n            <Text textColor=\"text-secondary\">{scoreAchievedAt}</Text>\n          )}\n        </>\n      ) : (\n        <FlexBox column color=\"text-secondary\">\n          <Text fontWeight={700} my={4} aria-hidden>\n            -\n          </Text>\n          <Text>Not tested yet</Text>\n        </FlexBox>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;AASA,MAAaA,oBAAqD,EAChE,gBACA,OACA,sBACI;CACJ,MAAM,sBAAsB,SAAS,SAAS;AAE9C,QACE,qBAAC;EACC,aAAY;EACZ,aAAa,iBAAiB,IAAI;EAClC,OAAM;EACN,GAAG;EACH;aAEA,oBAAC;GAAK,YAAY;aACf,iBAAiB,kBAAkB;IAC/B,EACN,SAAS,OACR,4CACE,qBAAC;GAAQ,IAAI;GAAG,YAAW;cACzB,oBAAC;IACC,SAAQ;IACR,eAAY;IACZ,IAAI;IACJ,OAAO,sBAAsB,cAAc;cAE1C,GAAG,MAAM;KACL,EACP,oBAAC,iBACE,CAAC,uBACA,oBAAC;IACC,eAAY;IACZ,cAAa;IACb,YAAY;IACZ,IAAG;IACH,IAAI;KACJ,GAEA;IACE,EACT,CAAC,CAAC,mBACD,oBAAC;GAAK,WAAU;aAAkB;IAAuB,IAE1D,GAEH,qBAAC;GAAQ;GAAO,OAAM;cACpB,oBAAC;IAAK,YAAY;IAAK,IAAI;IAAG;cAAY;KAEnC,EACP,oBAAC,kBAAK,mBAAqB;IACnB;GAEJ"}

package/dist/LearningOutcomeAssessmentScores/index.d.ts

@@ -7,4 +7,5 @@ interface AssessmentScoresProps {
 }
 declare const LearningOutcomeAssessmentScores: React.FC<AssessmentScoresProps>;
 //#endregion
-export { LearningOutcomeAssessmentScores };
+export { LearningOutcomeAssessmentScores };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/LearningOutcomeAssessmentScores/index.tsx"],"sourcesContent":[],"mappings":";UAIU,qBAAA;EAAA,YAAA,EAAA,MAAA,GAAA,IAAqB,GAAA,SAAA;EAOlB,sBAAA,EAAA,MAAA,GAAA,IA0BZ,GAAA,SAzBC;;;;cADW,iCAAiC,KAAA,CAAM,GAClD"}

package/dist/LearningOutcomeAssessmentScores/index.js

@@ -21,4 +21,5 @@ const LearningOutcomeAssessmentScores = ({ highestScore, highestScoreAchievedAt,
 };
 
 //#endregion
-export { LearningOutcomeAssessmentScores };
+export { LearningOutcomeAssessmentScores };
+//# sourceMappingURL=index.js.map

package/dist/LearningOutcomeAssessmentScores/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LearningOutcomeAssessmentScores: React.FC<\n  AssessmentScoresProps\n>"],"sources":["../../src/LearningOutcomeAssessmentScores/index.tsx"],"sourcesContent":["import { FlexBox } from '@codecademy/gamut';\n\nimport { AssessmentDetail } from './AssessmentDetail';\n\ninterface AssessmentScoresProps {\n  highestScore: number | null | undefined;\n  highestScoreAchievedAt: string | null | undefined;\n  latestScore: number | null | undefined;\n  latestScoreAchievedAt: string | null | undefined;\n}\n\nexport const LearningOutcomeAssessmentScores: React.FC<\n  AssessmentScoresProps\n> = ({\n  highestScore,\n  highestScoreAchievedAt,\n  latestScore,\n  latestScoreAchievedAt,\n}) => {\n  return (\n    <FlexBox\n      borderColor=\"background-hover\"\n      border={1}\n      borderRadius=\"md\"\n      width=\"100%\"\n    >\n      <AssessmentDetail\n        isHighestScore\n        score={highestScore}\n        scoreAchievedAt={highestScoreAchievedAt}\n      />\n      <AssessmentDetail\n        score={latestScore}\n        scoreAchievedAt={latestScoreAchievedAt}\n      />\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;AAWA,MAAaA,mCAER,EACH,cACA,wBACA,aACA,4BACI;AACJ,QACE,qBAAC;EACC,aAAY;EACZ,QAAQ;EACR,cAAa;EACb,OAAM;aAEN,oBAAC;GACC;GACA,OAAO;GACP,iBAAiB;IACjB,EACF,oBAAC;GACC,OAAO;GACP,iBAAiB;IACjB;GACM"}

package/dist/LearningOutcomeBadges/LearningOutcomeLevelBadge.d.ts

@@ -18,4 +18,5 @@ interface LearningOutcomeLevelBadgeProps extends Pick<TextProps, 'textColor'> {
 }
 declare const LearningOutcomeLevelBadge: React.FC<LearningOutcomeLevelBadgeProps>;
 //#endregion
-export { LearningOutcomeLevelBadge, LearningOutcomeLevels, learningOutcomeLabels };
+export { LearningOutcomeLevelBadge, LearningOutcomeLevels, learningOutcomeLabels };
+//# sourceMappingURL=LearningOutcomeLevelBadge.d.ts.map

package/dist/LearningOutcomeBadges/LearningOutcomeLevelBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearningOutcomeLevelBadge.d.ts","names":[],"sources":["../../src/LearningOutcomeBadges/LearningOutcomeLevelBadge.tsx"],"sourcesContent":[],"mappings":";;;aAIY,qBAAA;;EAAA,GAAA,GAAA,CAAA;EAMC,KAAA,GAAA,CAAA;AAIX;AAsBoD,cA1BzC,qBA0ByC,EAAA;EAC7C,CAAA,EAAA,MAAA;EADwC,CAAA,EAAA,MAAA;EAAI,CAAA,EAAA,MAAA;AAMrD,CAAA;UANU,8BAAA,SAAuC,KAAK;SAC7C;;;;cAKI,2BAA2B,KAAA,CAAM,GAC5C"}

package/dist/LearningOutcomeBadges/LearningOutcomeLevelBadge.js

@@ -43,4 +43,5 @@ const LearningOutcomeLevelBadge = ({ level, size = "sm", textColor, removeBackgr
 };
 
 //#endregion
-export { LearningOutcomeLevelBadge, LearningOutcomeLevels, learningOutcomeLabels };
+export { LearningOutcomeLevelBadge, LearningOutcomeLevels, learningOutcomeLabels };
+//# sourceMappingURL=LearningOutcomeLevelBadge.js.map

package/dist/LearningOutcomeBadges/LearningOutcomeLevelBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearningOutcomeLevelBadge.js","names":["LearningOutcomeLevelBadge: React.FC<\n  LearningOutcomeLevelBadgeProps\n>"],"sources":["../../src/LearningOutcomeBadges/LearningOutcomeLevelBadge.tsx"],"sourcesContent":["import { Badge, FlexBox, Text, TextProps } from '@codecademy/gamut';\nimport { css, variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nexport enum LearningOutcomeLevels {\n  One = 1,\n  Two = 2,\n  Three = 3,\n}\n\nexport const learningOutcomeLabels = {\n  [LearningOutcomeLevels.One]: 'Subskill',\n  [LearningOutcomeLevels.Two]: 'Skill',\n  [LearningOutcomeLevels.Three]: 'Skill set',\n};\n\nconst StyledBadge = styled(Badge)<{ level: LearningOutcomeLevels }>(\n  css({\n    borderColor: 'border-tertiary',\n  }),\n  variant({\n    prop: 'level',\n    variants: {\n      [LearningOutcomeLevels.One]: {\n        bg: 'background-selected',\n      },\n      [LearningOutcomeLevels.Two]: {\n        bg: 'green-100',\n      },\n      [LearningOutcomeLevels.Three]: {\n        bg: 'blue-100',\n      },\n    },\n  })\n);\n\ninterface LearningOutcomeLevelBadgeProps extends Pick<TextProps, 'textColor'> {\n  level: LearningOutcomeLevels;\n  size?: 'sm' | 'base';\n  removeBackground?: boolean;\n}\n\nexport const LearningOutcomeLevelBadge: React.FC<\n  LearningOutcomeLevelBadgeProps\n> = ({ level, size = 'sm', textColor, removeBackground }) => {\n  return (\n    <FlexBox\n      bg={removeBackground ? 'transparent' : 'white'}\n      height=\"min-content\"\n      width=\"min-content\"\n      borderRadius=\"xl\"\n    >\n      <StyledBadge\n        data-testid=\"learning-outcome-badge\"\n        size={size}\n        variant=\"tertiary\"\n        level={level}\n      >\n        <Text color={textColor || 'text'}>{learningOutcomeLabels[level]}</Text>\n      </StyledBadge>\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;AAIA,IAAY,0EAAL;AACL;AACA;AACA;;;AAGF,MAAa,wBAAwB;EAClC,sBAAsB,MAAM;EAC5B,sBAAsB,MAAM;EAC5B,sBAAsB,QAAQ;CAChC;AAED,MAAM,cAAc,OAAO,MAAM,CAC/B,IAAI,EACF,aAAa,mBACd,CAAC,EACF,QAAQ;CACN,MAAM;CACN,UAAU;GACP,sBAAsB,MAAM,EAC3B,IAAI,uBACL;GACA,sBAAsB,MAAM,EAC3B,IAAI,aACL;GACA,sBAAsB,QAAQ,EAC7B,IAAI,YACL;EACF;CACF,CAAC,CACH;AAQD,MAAaA,6BAER,EAAE,OAAO,OAAO,MAAM,WAAW,uBAAuB;AAC3D,QACE,oBAAC;EACC,IAAI,mBAAmB,gBAAgB;EACvC,QAAO;EACP,OAAM;EACN,cAAa;YAEb,oBAAC;GACC,eAAY;GACN;GACN,SAAQ;GACD;aAEP,oBAAC;IAAK,OAAO,aAAa;cAAS,sBAAsB;KAAc;IAC3D;GACN"}

package/dist/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.d.ts

@@ -15,4 +15,5 @@ declare const LearningOutcomeLowAssessmentDot: _emotion_styled4.StyledComponent<
 }, {}, {}>;
 declare const LearningOutcomeLowAssessmentBadge: React.FC;
 //#endregion
-export { LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot };
+export { LearningOutcomeLowAssessmentBadge, LearningOutcomeLowAssessmentDot };
+//# sourceMappingURL=LearningOutcomeLowAssessmentBadge.d.ts.map

package/dist/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearningOutcomeLowAssessmentBadge.d.ts","names":[],"sources":["../../src/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.tsx"],"sourcesContent":[],"mappings":";;;;;;cAIa,kDAA+B;UAoB3C,eAAA,CAAA,KAAA;;;;;EApBY,SAAA,CAAA,EAAA,OAAA;EAoBZ,KAAA,CAAA,EAAA,OAAA;;cAEY,mCAAmC,KAAA,CAAM"}

package/dist/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.js

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

package/dist/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearningOutcomeLowAssessmentBadge.js","names":["LearningOutcomeLowAssessmentBadge: React.FC"],"sources":["../../src/LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.tsx"],"sourcesContent":["import { Badge, Box, Text } from '@codecademy/gamut';\nimport { css, states } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nexport const LearningOutcomeLowAssessmentDot = styled(Box)<{\n  hasBorder?: boolean;\n  small?: boolean;\n}>(\n  css({\n    bg: 'orange-500',\n    borderRadius: 'full',\n    height: 16,\n    width: 16,\n  }),\n  states({\n    hasBorder: {\n      border: 2,\n      borderColor: 'background-contrast',\n    },\n    small: {\n      height: 8,\n      width: 8,\n    },\n  })\n);\n\nexport const LearningOutcomeLowAssessmentBadge: React.FC = () => {\n  return (\n    <Badge variant=\"custom\" size=\"sm\" bg=\"orange-100\">\n      <LearningOutcomeLowAssessmentDot small />\n      <Text ml={4}>Needs review</Text>\n    </Badge>\n  );\n};\n"],"mappings":";;;;;;AAIA,MAAa,kCAAkC,OAAO,IAAI,CAIxD,IAAI;CACF,IAAI;CACJ,cAAc;CACd,QAAQ;CACR,OAAO;CACR,CAAC,EACF,OAAO;CACL,WAAW;EACT,QAAQ;EACR,aAAa;EACd;CACD,OAAO;EACL,QAAQ;EACR,OAAO;EACR;CACF,CAAC,CACH;AAED,MAAaA,0CAAoD;AAC/D,QACE,qBAAC;EAAM,SAAQ;EAAS,MAAK;EAAK,IAAG;aACnC,oBAAC,mCAAgC,cAAQ,EACzC,oBAAC;GAAK,IAAI;aAAG;IAAmB;GAC1B"}

package/dist/LearningOutcomeCard/index.d.ts

@@ -28,4 +28,5 @@ interface LearningOutcomeCardProps {
 }
 declare const LearningOutcomeCard: React.FC<LearningOutcomeCardProps>;
 //#endregion
-export { LearningOutcomeCard };
+export { LearningOutcomeCard };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/LearningOutcomeCard/index.tsx"],"sourcesContent":[],"mappings":";;;;;UAqBU,oBAAA;;;AALwB,UAQxB,wBAAA,CAHoB;EAGpB,KAAA,EACD,qBADyB,GAAA,IAAA,GAAA,SAAA;EACzB,OAAA,EAAA,MAAA;EAGQ,EAAA,CAAA,EAAA,IAAA;EAIN,YAAA,CAAA,EAJM,WAIN;EAAoB,aAAA,CAAA,EAAA,OAAA;EA2IlB,IAAA,CAAA,EAAA,YAAA,GAgHZ,MAAA;;WA3PU;;;;;;;;;;;;cA2IE,qBAAqB,KAAA,CAAM,GAAG"}

package/dist/LearningOutcomeCard/index.js

@@ -162,4 +162,5 @@ const LearningOutcomeCard = ({ level, outcome, as, headingLevel, isInteractive =
 };
 
 //#endregion
-export { LearningOutcomeCard };
+export { LearningOutcomeCard };
+//# sourceMappingURL=index.js.map

package/dist/LearningOutcomeCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LearningOutcomeCard: React.FC<LearningOutcomeCardProps>"],"sources":["../../src/LearningOutcomeCard/index.tsx"],"sourcesContent":["import {\n  Card,\n  FlexBox,\n  HeadingTags,\n  RadialProgress,\n  Text,\n} from '@codecademy/gamut';\nimport { CheckIcon } from '@codecademy/gamut-icons';\nimport { css, theme, variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport {\n  learningOutcomeLabels,\n  LearningOutcomeLevelBadge,\n  LearningOutcomeLevels,\n} from '../LearningOutcomeBadges';\nimport { progressState } from '../LearningOutcomeTile';\nimport { Progress } from '../LearningOutcomeTile/types';\n\n// to match the type from gql schema\ninterface LearningOutcomeSkill {\n  title?: string | null | undefined;\n}\ninterface LearningOutcomeCardProps {\n  level: LearningOutcomeLevels | null | undefined;\n  outcome: string;\n  as?: 'li';\n  headingLevel?: HeadingTags;\n  isInteractive?: boolean;\n  mode?: 'emphasized' | 'base';\n  progress?: number;\n  skills?: LearningOutcomeSkill[] | null;\n\n  /**\n   * Optional prop for progress updates, used to animate the radial progress from a previous value to the current value.\n   * Need to provide previousProgress and progressDuraion to animate the radial progress.\n   * If progress is 100, completionDelay needs to be provided instead of progressDuration to delay the display of the completion icon.\n   */\n  progressUpdateData?: {\n    previousProgress: number;\n    progressDuration?: number;\n    completionDelay?: number;\n  };\n}\n\ninterface ProgressProps {\n  displayValue: number;\n  progressDuration: number | undefined;\n  radialValue: number | number[];\n  startRadialAnimation: boolean;\n  showCompletionIcon: boolean;\n}\n\nconst COMPLETED_COLOR = 'yellow-500';\n\nconst SkillTag = styled(FlexBox)(\n  css({\n    px: 8,\n    textColor: 'secondary',\n    opacity: '0.65',\n    bg: 'background-selected',\n    justifyContent: 'space-between',\n  })\n);\n\nconst StyledCard = styled(Card)<{\n  progress: Progress;\n  mode?: 'emphasized' | 'base';\n}>((props) => ({\n  ...variant({\n    prop: 'mode',\n    defaultVariant: 'base',\n    base: {\n      border: 2,\n      borderRadius: 'lg',\n      borderColor:\n        props.progress === Progress.completed\n          ? COMPLETED_COLOR\n          : 'border-tertiary',\n      display: 'flex',\n      flexDirection: props.progress === Progress.notStarted ? 'column' : 'row',\n      alignSelf: 'stretch',\n      overflow: 'auto',\n      gap: props.progress === Progress.notStarted ? 0 : 32,\n    },\n    variants: {\n      emphasized: {\n        bg: 'background-primary',\n        borderRadius: 'xl',\n        py: 32,\n        px: 24,\n      },\n      base: {\n        bg: 'background-current',\n        py: 24,\n        px: 16,\n      },\n    },\n  })(props),\n}));\n\nconst renderProgress = ({\n  displayValue,\n  progressDuration,\n  radialValue,\n  startRadialAnimation,\n  showCompletionIcon,\n}: ProgressProps) => (\n  <FlexBox\n    flexDirection=\"column\"\n    flex=\"1 0 0\"\n    alignSelf=\"stretch\"\n    flexWrap=\"wrap\"\n    alignContent=\"end\"\n  >\n    {showCompletionIcon ? (\n      <FlexBox\n        bg={COMPLETED_COLOR}\n        width={80}\n        height={80}\n        center\n        borderRadius=\"full\"\n      >\n        <CheckIcon size={44} color=\"text\" />\n      </FlexBox>\n    ) : (\n      <RadialProgress\n        key={`radial-progress-${startRadialAnimation ? 1 : 0}`}\n        color={theme.colors[COMPLETED_COLOR]}\n        duration={progressDuration || undefined}\n        size={80}\n        strokeLinecap=\"round\"\n        strokeWidth={8}\n        value={radialValue ?? 0}\n      >\n        <Text as=\"span\" fontSize={22} fontWeight={700}>\n          {`${displayValue}%`}\n        </Text>\n      </RadialProgress>\n    )}\n  </FlexBox>\n);\n\nconst renderSkills = (skills: LearningOutcomeSkill[]) =>\n  skills.map((skill) => (\n    <SkillTag as=\"li\" key={skill.title}>\n      {skill.title}\n    </SkillTag>\n  ));\n\nconst fontVariant = (\n  isEmphasized: boolean,\n  level?: LearningOutcomeLevels | null\n) => {\n  if (isEmphasized) {\n    return 'title-sm';\n  }\n\n  switch (level) {\n    case LearningOutcomeLevels.One:\n      return 'p-base';\n    case LearningOutcomeLevels.Two:\n      return 'title-xs';\n    case LearningOutcomeLevels.Three:\n      return 'title-sm';\n    default:\n      return 'p-base';\n  }\n};\n\nexport const LearningOutcomeCard: React.FC<LearningOutcomeCardProps> = ({\n  level,\n  outcome,\n  as,\n  headingLevel,\n  isInteractive = false,\n  mode = 'base',\n  progress = 0,\n  skills,\n  progressUpdateData,\n}) => {\n  const [startRadialAnimation, setStartRadialAnimation] = useState(false);\n  const [showCompletionIcon, setShowCompletionIcon] = useState(false);\n\n  const { previousProgress, progressDuration, completionDelay } =\n    progressUpdateData || {};\n  const progressStatus = progressState(progress);\n  const displayProgress = progressStatus !== Progress.notStarted;\n\n  // when previousProgress is provided, either start the progress animation or only display previous progress while we wait. If not provided then only display current progress\n  const radialValue =\n    previousProgress !== undefined && progress !== undefined\n      ? startRadialAnimation\n        ? [previousProgress, progress]\n        : previousProgress\n      : progress;\n\n  // when previousProgress is provided but we haven't started the animation yet then show previous progress, otherwise, if animation has started, then show current progress\n  const displayValue =\n    previousProgress !== undefined && !startRadialAnimation\n      ? previousProgress\n      : progress;\n\n  const isEmphasized = mode === 'emphasized';\n\n  useEffect(() => {\n    if (progress && progressDuration) {\n      setTimeout(() => {\n        setStartRadialAnimation(true);\n      }, progressDuration);\n    }\n\n    if (progress === 100) {\n      // completionDelay is for animating the progress; the setTimeout will delay showing the checkmark icon so radial progress will appear first.\n      if (completionDelay) {\n        setTimeout(() => {\n          setShowCompletionIcon(true);\n        }, completionDelay);\n        // If completionDelay is not provided, the completion icon will show immediately and radial progress will not show.\n      } else {\n        setShowCompletionIcon(true);\n      }\n    }\n  }, [progressDuration, progress, completionDelay]);\n\n  const sortedSkills = useMemo(() => {\n    if (!skills || skills.length === 0) {\n      return undefined;\n    }\n\n    return skills.slice().sort((a, b) => {\n      const titleA = a.title ?? '';\n      const titleB = b.title ?? '';\n\n      return titleA.localeCompare(titleB);\n    });\n  }, [skills]);\n\n  return (\n    <StyledCard\n      as={as}\n      aria-label={`${learningOutcomeLabels[level ?? 1]} - ${outcome}`}\n      isInteractive={isInteractive}\n      progress={progressStatus}\n      mode={mode}\n    >\n      <FlexBox flexDirection=\"column\" gap={24}>\n        {level && (\n          <LearningOutcomeLevelBadge\n            level={level}\n            size={isEmphasized ? 'base' : 'sm'}\n            textColor={\n              level !== LearningOutcomeLevels.One ? 'navy-800' : 'text'\n            }\n            removeBackground\n          />\n        )}\n        <Text\n          variant={fontVariant(isEmphasized, level)}\n          fontWeight={isEmphasized ? 700 : 400}\n          width=\"100%\"\n          as={headingLevel}\n        >\n          {outcome}\n        </Text>\n        {!!sortedSkills && (\n          <FlexBox as=\"ul\" pl={0} m={0} alignItems=\"flex-start\" gap={8} wrap>\n            {renderSkills(sortedSkills)}\n          </FlexBox>\n        )}\n      </FlexBox>\n\n      {displayProgress &&\n        renderProgress({\n          displayValue,\n          progressDuration,\n          radialValue,\n          startRadialAnimation,\n          showCompletionIcon,\n        })}\n    </StyledCard>\n  );\n};\n"],"mappings":"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"}

package/dist/LearningOutcomeFlyout/LearningOutcomeCardList.js

@@ -37,4 +37,5 @@ const LearningOutcomeCardList = ({ learningOutcomes, onClick }) => {
 };
 
 //#endregion
-export { LearningOutcomeCardList };
+export { LearningOutcomeCardList };
+//# sourceMappingURL=LearningOutcomeCardList.js.map

package/dist/LearningOutcomeFlyout/LearningOutcomeCardList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearningOutcomeCardList.js","names":["LearningOutcomeCardList: React.FC<\n  LearningOutcomeCardListProps\n>"],"sources":["../../src/LearningOutcomeFlyout/LearningOutcomeCardList.tsx"],"sourcesContent":["import { Anchor, Box, FlexBox } from '@codecademy/gamut';\n\nimport { LearningOutcomeCard } from '../LearningOutcomeCard';\nimport { getLearningOutcomePath, miscTrackingData } from '.';\nimport { ParentLearningOutcome } from './types';\n\ninterface LearningOutcomeCardListProps {\n  learningOutcomes: ParentLearningOutcome[];\n  onClick?: (misc: Record<string, string>) => void;\n}\n\nexport const LearningOutcomeCardList: React.FC<\n  LearningOutcomeCardListProps\n> = ({ learningOutcomes, onClick }) => {\n  return (\n    <FlexBox as=\"ul\" m={0} p={0} gap={12} column>\n      {learningOutcomes.map(({ id, level, outcome }) => {\n        const trackingData = miscTrackingData(level, id, undefined, outcome);\n\n        return (\n          <Box as=\"li\" listStyle=\"none\" m={0} p={0} key={id} width=\"100%\">\n            <Anchor\n              href={getLearningOutcomePath(id)}\n              onClick={() => onClick?.(trackingData)}\n              target=\"_blank\"\n              variant=\"interface\"\n              width=\"100%\"\n            >\n              <LearningOutcomeCard\n                level={level}\n                outcome={outcome}\n                isInteractive\n              />\n            </Anchor>\n          </Box>\n        );\n      })}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;AAWA,MAAaA,2BAER,EAAE,kBAAkB,cAAc;AACrC,QACE,oBAAC;EAAQ,IAAG;EAAK,GAAG;EAAG,GAAG;EAAG,KAAK;EAAI;YACnC,iBAAiB,KAAK,EAAE,IAAI,OAAO,cAAc;GAChD,MAAM,eAAe,iBAAiB,OAAO,IAAI,QAAW,QAAQ;AAEpE,UACE,oBAAC;IAAI,IAAG;IAAK,WAAU;IAAO,GAAG;IAAG,GAAG;IAAY,OAAM;cACvD,oBAAC;KACC,MAAM,uBAAuB,GAAG;KAChC,eAAe,UAAU,aAAa;KACtC,QAAO;KACP,SAAQ;KACR,OAAM;eAEN,oBAAC;MACQ;MACE;MACT;OACA;MACK;MAboC,GAczC;IAER;GACM"}

package/dist/LearningOutcomeFlyout/index.d.ts

@@ -10,4 +10,5 @@ declare const miscTrackingData: (level?: LearningOutcomeLevels | null, id?: stri
 };
 declare const LearningOutcomeFlyout: React.FC<LearningOutcomeFlyoutProps>;
 //#endregion
-export { LearningOutcomeFlyout, getLearningOutcomePath, miscTrackingData, sortSkillsByClassification };
+export { LearningOutcomeFlyout, getLearningOutcomePath, miscTrackingData, sortSkillsByClassification };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/LearningOutcomeFlyout/index.tsx"],"sourcesContent":[],"mappings":";;;;;cA8Ea,sCACF,kCAA6B;cAkB3B;cAQA,2BACH;EA5BG,IAAA,EAAA,MAAA;AAmBb,CAAA;AAQa,cAgBA,qBAfH,EAe0B,KAAA,CAAM,EAfhC,CAemC,0BAfd,CAAA"}

package/dist/LearningOutcomeFlyout/index.js

@@ -308,4 +308,5 @@ const LearningOutcomeFlyout = ({ expanded, learningOutcomeHref, learningOutcomeO
 };
 
 //#endregion
-export { LearningOutcomeFlyout, getLearningOutcomePath, miscTrackingData, sortSkillsByClassification };
+export { LearningOutcomeFlyout, getLearningOutcomePath, miscTrackingData, sortSkillsByClassification };
+//# sourceMappingURL=index.js.map

package/dist/LearningOutcomeFlyout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LearningOutcomeFlyout: React.FC<LearningOutcomeFlyoutProps>","outcome"],"sources":["../../src/LearningOutcomeFlyout/index.tsx"],"sourcesContent":["import {\n  Alert,\n  Anchor,\n  FillButton,\n  FlexBox,\n  Flyout,\n  Shimmer,\n  StrokeButton,\n  Text,\n  ToolTip,\n} from '@codecademy/gamut';\nimport { SmallCheckIcon } from '@codecademy/gamut-icons';\nimport { css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { LearningOutcomeAssessmentScores } from '../LearningOutcomeAssessmentScores';\nimport {\n  learningOutcomeLabels,\n  LearningOutcomeLevelBadge,\n  LearningOutcomeLevels,\n  LearningOutcomeLowAssessmentBadge,\n} from '../LearningOutcomeBadges';\nimport { LearningOutcomeTile } from '../LearningOutcomeTile';\nimport { LearningOutcomeCardList } from './LearningOutcomeCardList';\nimport {\n  LearningOutcomeFlyoutProps,\n  LearningOutcomeSkill,\n  SkillClassification,\n} from './types';\n\nconst ChildLearningOutcomeRow = styled(FlexBox)(\n  css({\n    background: 'white',\n    borderColor: 'border-tertiary',\n    borderTopWidth: 0,\n    borderLeftWidth: 1,\n    borderRightWidth: 1,\n    borderBottomWidth: 1,\n    borderStyle: 'solid',\n    padding: '24px 16px',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    gap: 16,\n    '&:first-of-type': {\n      borderTopLeftRadius: '4px',\n      borderTopRightRadius: '4px',\n    },\n    '&:last-of-type': {\n      borderBottomLeftRadius: '4px',\n      borderBottomRightRadius: '4px',\n    },\n  })\n);\n\nconst StyledAnchor = styled(Anchor)(\n  css({\n    color: 'text',\n    textDecoration: 'none',\n    '&:hover, &:focus': {\n      color: 'text',\n      textDecoration: 'underline',\n    },\n  })\n);\n\nconst SkillTag = styled(Anchor)(\n  css({\n    fontSize: 14,\n    borderRadius: 'md',\n    border: 1,\n    borderColor: 'border-primary',\n    '&:hover, &:focus': {\n      color: 'text',\n      bg: 'background-hover',\n    },\n  })\n);\n\nexport const sortSkillsByClassification = (\n  skills?: LearningOutcomeSkill[] | null\n) => {\n  if (!skills?.length) return [];\n  const skillsCopy = skills.slice();\n\n  const sortedSkills = skillsCopy?.sort((a, b) => {\n    if (a?.classification === SkillClassification.Language) {\n      return -1;\n    }\n    if (b?.classification === SkillClassification.Subject) {\n      return 1;\n    }\n    return 0;\n  });\n\n  return sortedSkills;\n};\n\nexport const getLearningOutcomePath = (id?: string) => {\n  return id ? `/learning-outcomes/${id}` : '/';\n};\n\nconst getSkillsAreaPath = (skillSlug?: string) => {\n  return skillSlug ? `/skill-areas/${skillSlug}` : '/';\n};\n\nexport const miscTrackingData = (\n  level?: LearningOutcomeLevels | null,\n  id?: string,\n  latestScore?: number | null,\n  outcome?: string\n) => {\n  return {\n    misc: JSON.stringify({\n      last_assessed_score: latestScore,\n      LO_level: level,\n      title: outcome,\n      unique_id: id,\n    }),\n  };\n};\n\nexport const LearningOutcomeFlyout: React.FC<LearningOutcomeFlyoutProps> = ({\n  expanded,\n  learningOutcomeHref,\n  learningOutcomeOnClick,\n  childLearningOutcomeOnClick,\n  parentLearningOutcomeOnClick,\n  learningOutcome: {\n    highestScore,\n    highestScoreAchievedAt,\n    latestScore,\n    latestScoreAchievedAt,\n    level,\n    outcome,\n    parentLOs,\n    percentComplete,\n    skills,\n    childLearningOutcomes,\n  },\n  skillTagOnClick,\n  onClose,\n  assessmentHref,\n  assessmentEligible,\n  bestMatchResponse,\n  bestMatchOnClick,\n  showBestMatchCTA,\n}) => {\n  const percentCompletePercentage =\n    percentComplete != null ? percentComplete : 0;\n  const levelLabel = learningOutcomeLabels[level];\n\n  const hasLowLatestAssessment = Boolean(\n    latestScore != null && latestScore < 70\n  );\n\n  const {\n    data: bestMatchData,\n    loading: bestMatchLoading,\n    error: bestMatchError,\n  } = bestMatchResponse;\n\n  const showSkills = !!skills?.length;\n  const sortedSkills = sortSkillsByClassification(skills);\n\n  const isLevelTwoLearningOutcome = level === LearningOutcomeLevels.Two;\n  const showParentLOs =\n    level === LearningOutcomeLevels.Two && !!parentLOs && parentLOs.length > 0;\n\n  const bestMatchCTA = bestMatchLoading ? (\n    <Shimmer width=\"50%\" data-testid=\"best-match-shimmer\" />\n  ) : (\n    <FillButton\n      href={bestMatchData?.urlPath ?? ''}\n      disabled={!bestMatchData?.urlPath || bestMatchError}\n      data-testid=\"best-match-button\"\n      width=\"50%\"\n      onClick={() => bestMatchOnClick?.()}\n    >\n      Learn\n    </FillButton>\n  );\n\n  const renderProgress = () => (\n    <FlexBox alignItems=\"center\">\n      {Boolean(percentCompletePercentage === 100) && (\n        <FlexBox\n          width={16}\n          height={16}\n          borderRadius=\"md\"\n          bg=\"primary\"\n          mr={8}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          <SmallCheckIcon size={11} color=\"white\" />\n        </FlexBox>\n      )}\n      <Text\n        color=\"text\"\n        variant=\"p-large\"\n      >{`${percentCompletePercentage}% progress`}</Text>\n    </FlexBox>\n  );\n\n  // Render skills when the drawer is featuring a level 3 outcome\n  const renderSkills = () => {\n    return <FlexBox as=\"ul\">Skills go here</FlexBox>;\n  };\n\n  // Render subskills when the drawer is featuring a level 2 outcome\n  const renderSubskills = () => {\n    return (\n      <FlexBox\n        as=\"ul\"\n        flexDirection=\"column\"\n        p={0}\n        borderTop={1}\n        borderColor=\"border-tertiary\"\n        borderRadius=\"md\"\n      >\n        {childLearningOutcomes?.map((childLo) => {\n          const { id, outcome, progress, percentComplete } = childLo;\n          const showNeedsReviewIndicator =\n            progress?.latestScore !== null &&\n            progress?.latestScore !== undefined\n              ? progress.latestScore < 70\n              : false;\n\n          const trackingData = miscTrackingData(\n            LearningOutcomeLevels.One,\n            id,\n            progress?.latestScore,\n            outcome\n          );\n\n          return (\n            <ChildLearningOutcomeRow row as=\"li\" key={id}>\n              <FlexBox minWidth={32} width={32} justifyContent=\"center\">\n                <LearningOutcomeTile\n                  learningOutcomeDetails={{\n                    id,\n                    level: LearningOutcomeLevels.One,\n                    outcome,\n                    percentComplete,\n                  }}\n                  size=\"small\"\n                  popover={false}\n                />\n              </FlexBox>\n              <FlexBox column gap={8}>\n                <Anchor\n                  variant=\"interface\"\n                  href={getLearningOutcomePath(id)}\n                  target=\"_blank\"\n                  whiteSpace=\"normal\"\n                  onClick={() => childLearningOutcomeOnClick?.(trackingData)}\n                >\n                  {outcome}\n                </Anchor>\n                {showNeedsReviewIndicator && (\n                  <FlexBox>\n                    <LearningOutcomeLowAssessmentBadge />\n                  </FlexBox>\n                )}\n              </FlexBox>\n            </ChildLearningOutcomeRow>\n          );\n        })}\n      </FlexBox>\n    );\n  };\n\n  return (\n    <Flyout\n      aria-label={`${levelLabel} details`}\n      closeLabel={`Close ${levelLabel} details`}\n      expanded={expanded}\n      onClose={onClose}\n      openFrom=\"right\"\n      title={<Text variant=\"title-sm\">{`${levelLabel} details`}</Text>}\n    >\n      <FlexBox gap={32} mt={32} mx={24} column>\n        {/* Badges, Outcome, Topic tags, Progress */}\n        <FlexBox gap={24} column>\n          {showBestMatchCTA && (!bestMatchData?.urlPath || bestMatchError) && (\n            <Alert\n              placement=\"inline\"\n              type=\"subtle\"\n              data-testid=\"best-match-alert\"\n            >\n              {`We were unable to load the associated ${levelLabel.toLocaleLowerCase()}. Please refresh the\n            page and try again.`}\n            </Alert>\n          )}\n          <FlexBox justifyContent=\"space-between\" alignItems=\"center\">\n            <LearningOutcomeLevelBadge level={level} size=\"base\" />\n            {hasLowLatestAssessment && <LearningOutcomeLowAssessmentBadge />}\n          </FlexBox>\n          <FlexBox gap={16} column>\n            <StyledAnchor\n              href={learningOutcomeHref}\n              onClick={() => learningOutcomeOnClick?.()}\n            >\n              <Text as=\"h2\" variant=\"title-md\">\n                {outcome}\n              </Text>\n            </StyledAnchor>\n            {showSkills && (\n              <FlexBox alignItems=\"center\" gap={12} flexWrap=\"wrap\">\n                {sortedSkills.map((skill) => (\n                  <SkillTag\n                    key={skill.id}\n                    data-testid=\"skill-tag\"\n                    px={8}\n                    py={4}\n                    variant=\"interface\"\n                    href={getSkillsAreaPath(skill.slug)}\n                    onClick={() => skillTagOnClick?.(skill.slug)}\n                  >\n                    <FlexBox center>\n                      <Text>{skill.title}</Text>\n                    </FlexBox>\n                  </SkillTag>\n                ))}\n              </FlexBox>\n            )}\n          </FlexBox>\n          <FlexBox borderY={1} borderColor=\"background-hover\" py={16}>\n            {renderProgress()}\n          </FlexBox>\n        </FlexBox>\n\n        {/* Assessment scores */}\n        <FlexBox gap={16} column>\n          <Text variant=\"title-xs\" as=\"h3\">\n            Evaluation results\n          </Text>\n          <LearningOutcomeAssessmentScores\n            highestScore={highestScore}\n            highestScoreAchievedAt={highestScoreAchievedAt}\n            latestScore={latestScore}\n            latestScoreAchievedAt={latestScoreAchievedAt}\n          />\n        </FlexBox>\n\n        {/* For level 2 and 3 LOs only: Children LOs goes below here */}\n        <FlexBox gap={16} column>\n          <Text variant=\"title-xs\" as=\"h3\">\n            {isLevelTwoLearningOutcome ? `Subskills` : `Skills`}\n          </Text>\n          {isLevelTwoLearningOutcome ? renderSubskills() : renderSkills()}\n        </FlexBox>\n\n        {/* For level 2 LOs only: show Parent LOs */}\n        {showParentLOs && (\n          <FlexBox gap={16} mb={16} column>\n            <Text variant=\"title-xs\" as=\"h3\">\n              Builds toward...\n            </Text>\n            <LearningOutcomeCardList\n              learningOutcomes={parentLOs}\n              onClick={parentLearningOutcomeOnClick}\n            />\n          </FlexBox>\n        )}\n      </FlexBox>\n      <FlexBox\n        borderTop={1}\n        bg=\"white\"\n        bottom=\"-3px\"\n        boxShadow=\"0px -4px 16px 0px #00000014\"\n        borderColor=\"border-tertiary\"\n        py={12}\n        px={16}\n        position=\"sticky\"\n        justifyContent=\"center\"\n        gap={12}\n      >\n        {showBestMatchCTA ? bestMatchCTA : null}\n        {assessmentEligible ? (\n          <StrokeButton\n            href={assessmentHref}\n            width={showBestMatchCTA ? { _: 209, xs: '50%' } : '100%'}\n          >\n            Evaluate\n          </StrokeButton>\n        ) : (\n          <ToolTip\n            id=\"disabled-evaluate\"\n            data-testid=\"disabled-evaluate\"\n            info={`Not available for this ${levelLabel.toLowerCase()}`}\n            placement=\"inline\"\n            inheritDims\n          >\n            <StrokeButton\n              aria-describedby=\"disabled-evaluate\"\n              aria-disabled\n              width={showBestMatchCTA ? 209 : '100%'}\n            >\n              Evaluate\n            </StrokeButton>\n          </ToolTip>\n        )}\n      </FlexBox>\n    </Flyout>\n  );\n};\n"],"mappings":"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"}

package/dist/LearningOutcomeFlyout/types.d.ts

@@ -64,4 +64,5 @@ interface LearningOutcomeFlyoutProps {
   showBestMatchCTA?: boolean;
 }
 //#endregion
-export { LearningOutcomeFlyoutProps, LearningOutcomeSkill };
+export { LearningOutcomeFlyoutProps, LearningOutcomeSkill };
+//# sourceMappingURL=types.d.ts.map

package/dist/LearningOutcomeFlyout/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/LearningOutcomeFlyout/types.ts"],"sourcesContent":[],"mappings":";;;;aAEY,mBAAA;;;AAAZ;AAKiB,UAAA,oBAAA,CAAoB;EAOpB,EAAA,EAAA,MAAA;EAML,IAAA,EAAA,MAAA;EAKK,KAAA,CAAA,EAAA,MAAA,GAAA,IAAA;EAMP,cAAA,CAAA,EApBS,mBAoBkB,GAAA,IAAA;;AAQvB,UAzBG,qBAAA,CAyBH;EACH,EAAA,EAAA,MAAA;EAAoB,OAAA,EAAA,MAAA;EAcd,KAAA,EAAA,MAAA,GAAA,IAAA,GAAA,SAA0B;;AAOJ,KAzC3B,sBAAA,GAyC2B;EACC,OAAA,EAAA,MAAA,GAAA,IAAA;EAGnB,KAAA,CAAA,EAAA,MAAA,GAAA,IAAA;CAA8B;UAxClC,8BAAA;QACT;;;;UAKE,2BAAA;SACD;;;;;;;cAOK;WACH;;;;;;;;;;;;;UAcM,0BAAA;;;mBAGE;;;;uCAIoB;wCACC;;;qBAGnB"}

package/dist/LearningOutcomeFlyout/types.js

@@ -6,4 +6,5 @@ let SkillClassification = /* @__PURE__ */ function(SkillClassification$1) {
 }({});
 
 //#endregion
-export { SkillClassification };
+export { SkillClassification };
+//# sourceMappingURL=types.js.map

package/dist/LearningOutcomeFlyout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../src/LearningOutcomeFlyout/types.ts"],"sourcesContent":["import { LearningOutcomeLevels } from '../LearningOutcomeBadges';\n\nexport enum SkillClassification {\n  Language = 'language',\n  Subject = 'subject',\n}\n\nexport interface LearningOutcomeSkill {\n  id: string;\n  slug: string;\n  title?: string | null;\n  classification?: SkillClassification | null;\n}\n\nexport interface ParentLearningOutcome {\n  id: string;\n  outcome: string;\n  level: number | null | undefined;\n}\n\nexport type BestMatchContainerType = {\n  urlPath: string | null;\n  title?: string | null;\n};\n\nexport interface BestMatchContainerResponseType {\n  data: BestMatchContainerType | null;\n  loading: boolean;\n  error: boolean;\n}\n\ninterface LearningOutcomeDetailsProps {\n  level: LearningOutcomeLevels;\n  outcome: string;\n  percentComplete: number | undefined | null;\n  highestScore: number | undefined | null;\n  highestScoreAchievedAt: string | undefined | null;\n  latestScore: number | undefined | null;\n  latestScoreAchievedAt: string | undefined | null;\n  parentLOs?: ParentLearningOutcome[];\n  skills?: LearningOutcomeSkill[] | null;\n  childLearningOutcomes?: {\n    id: string;\n    outcome: string;\n    percentComplete?: number | undefined | null;\n    progress?: {\n      latestScore?: number | null;\n      covered: boolean | undefined | null;\n      coveredAt?: string | null;\n      highestScore?: number | null;\n    };\n  }[];\n}\n\nexport interface LearningOutcomeFlyoutProps {\n  expanded: boolean;\n  onClose: () => void;\n  learningOutcome: LearningOutcomeDetailsProps;\n  learningOutcomeHref: string;\n  learningOutcomeOnClick?: () => void;\n  skillTagOnClick?: (skillSlug: string) => void;\n  childLearningOutcomeOnClick?: (misc: Record<string, string>) => void;\n  parentLearningOutcomeOnClick?: (misc: Record<string, string>) => void;\n  assessmentHref?: string;\n  assessmentEligible?: boolean;\n  bestMatchResponse: BestMatchContainerResponseType;\n  bestMatchOnClick?: () => void;\n  showBestMatchCTA?: boolean;\n}\n"],"mappings":";AAEA,IAAY,sEAAL;AACL;AACA"}

package/dist/LearningOutcomePopover/index.d.ts

@@ -10,4 +10,5 @@ interface LearningOutcomePopoverProps {
 }
 declare const LearningOutcomePopover: React.FC<LearningOutcomePopoverProps>;
 //#endregion
-export { LearningOutcomePopover };
+export { LearningOutcomePopover };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/LearningOutcomePopover/index.tsx"],"sourcesContent":[],"mappings":";;;UAaU,2BAAA;eAEJ,KAAA,CAAM,UAAU,kBAChB,KAAA,CAAM,UAAU;EAHZ,EAAA,EAAA,MAAA;EAEY,MAAA,EAAA,OAAA;EAAhB,sBAAM,EAIc,kCAJd;EACU,gBAAA,CAAA,EAAA,MAAA;;AAGI,cAsCb,sBAtCa,EAsCW,KAAA,CAAM,EAtCjB,CAsCoB,2BAtCpB,CAAA"}

package/dist/LearningOutcomePopover/index.js

@@ -113,4 +113,5 @@ const LearningOutcomePopover = ({ activeElRef, isOpen, learningOutcomeDetails, .
 };
 
 //#endregion
-export { LearningOutcomePopover };
+export { LearningOutcomePopover };
+//# sourceMappingURL=index.js.map