@codecademy/brand 5.10.0 → 6.0.0-alpha.0839dde39.0

package/dist/LearningOutcomeFlyout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Alert","Anchor","FillButton","FlexBox","Flyout","Shimmer","StrokeButton","Text","ToolTip","SmallCheckIcon","css","styled","LearningOutcomeAssessmentScores","learningOutcomeLabels","LearningOutcomeLevelBadge","LearningOutcomeLevels","LearningOutcomeLowAssessmentBadge","LearningOutcomeTile","LearningOutcomeCardList","SkillClassification","ChildLearningOutcomeRow","background","borderColor","borderTopWidth","borderLeftWidth","borderRightWidth","borderBottomWidth","borderStyle","padding","alignItems","justifyContent","gap","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","StyledAnchor","color","textDecoration","SkillTag","fontSize","borderRadius","border","bg","sortSkillsByClassification","skills","length","skillsCopy","slice","sortedSkills","sort","a","b","classification","Language","Subject","getLearningOutcomePath","id","getSkillsAreaPath","skillSlug","miscTrackingData","level","latestScore","outcome","misc","JSON","stringify","last_assessed_score","LO_level","title","unique_id","LearningOutcomeFlyout","expanded","learningOutcomeHref","learningOutcomeOnClick","childLearningOutcomeOnClick","parentLearningOutcomeOnClick","learningOutcome","highestScore","highestScoreAchievedAt","latestScoreAchievedAt","parentLOs","percentComplete","childLearningOutcomes","skillTagOnClick","onClose","assessmentHref","assessmentEligible","bestMatchResponse","bestMatchOnClick","showBestMatchCTA","percentCompletePercentage","levelLabel","hasLowLatestAssessment","Boolean","data","bestMatchData","loading","bestMatchLoading","error","bestMatchError","showSkills","isLevelTwoLearningOutcome","Two","showParentLOs","bestMatchCTA","width","data-testid","href","urlPath","disabled","onClick","renderProgress","height","mr","size","variant","renderSkills","as","renderSubskills","flexDirection","p","borderTop","map","childLo","progress","showNeedsReviewIndicator","undefined","trackingData","One","row","key","minWidth","learningOutcomeDetails","popover","column","target","whiteSpace","aria-label","closeLabel","openFrom","mt","mx","placement","type","toLocaleLowerCase","flexWrap","skill","px","py","slug","center","borderY","mb","learningOutcomes","bottom","boxShadow","position","_","xs","info","toLowerCase","inheritDims","aria-describedby","aria-disabled"],"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.cjs

@@ -0,0 +1,16 @@
+
+//#region src/LearningOutcomeFlyout/types.ts
+var SkillClassification;
+(function(SkillClassification) {
+	SkillClassification["Language"] = "language";
+	SkillClassification["Subject"] = "subject";
+})(SkillClassification || (SkillClassification = {}));
+
+//#endregion
+Object.defineProperty(exports, 'SkillClassification', {
+  enumerable: true,
+  get: function () {
+    return SkillClassification;
+  }
+});
+//# sourceMappingURL=types.cjs.map

package/dist/LearningOutcomeFlyout/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","names":["SkillClassification"],"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":";;;UAEYA,qBAAAA;;;GAAAA,wBAAAA,sBAAAA,CAAAA,EAAAA"}

package/dist/LearningOutcomeFlyout/types.d.cts

@@ -0,0 +1,66 @@
+import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.cjs";
+//#region src/LearningOutcomeFlyout/types.d.ts
+declare enum SkillClassification {
+  Language = "language",
+  Subject = "subject"
+}
+interface LearningOutcomeSkill {
+  id: string;
+  slug: string;
+  title?: string | null;
+  classification?: SkillClassification | null;
+}
+interface ParentLearningOutcome {
+  id: string;
+  outcome: string;
+  level: number | null | undefined;
+}
+type BestMatchContainerType = {
+  urlPath: string | null;
+  title?: string | null;
+};
+interface BestMatchContainerResponseType {
+  data: BestMatchContainerType | null;
+  loading: boolean;
+  error: boolean;
+}
+interface LearningOutcomeDetailsProps {
+  level: LearningOutcomeLevels;
+  outcome: string;
+  percentComplete: number | undefined | null;
+  highestScore: number | undefined | null;
+  highestScoreAchievedAt: string | undefined | null;
+  latestScore: number | undefined | null;
+  latestScoreAchievedAt: string | undefined | null;
+  parentLOs?: ParentLearningOutcome[];
+  skills?: LearningOutcomeSkill[] | null;
+  childLearningOutcomes?: {
+    id: string;
+    outcome: string;
+    percentComplete?: number | undefined | null;
+    progress?: {
+      latestScore?: number | null;
+      covered: boolean | undefined | null;
+      coveredAt?: string | null;
+      highestScore?: number | null;
+    };
+  }[];
+}
+interface LearningOutcomeFlyoutProps {
+  expanded: boolean;
+  onClose: () => void;
+  learningOutcome: LearningOutcomeDetailsProps;
+  learningOutcomeHref: string;
+  learningOutcomeOnClick?: () => void;
+  skillTagOnClick?: (skillSlug: string) => void;
+  childLearningOutcomeOnClick?: (misc: Record<string, string>) => void;
+  parentLearningOutcomeOnClick?: (misc: Record<string, string>) => void;
+  assessmentHref?: string;
+  assessmentEligible?: boolean;
+  bestMatchResponse: BestMatchContainerResponseType;
+  bestMatchOnClick?: () => void;
+  showBestMatchCTA?: boolean;
+}
+//#endregion
+export { LearningOutcomeFlyoutProps, LearningOutcomeSkill };
+//# sourceMappingURL=types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../src/LearningOutcomeFlyout/types.ts"],"mappings":";;aAEY,mBAAA;EACV,QAAA;EACA,OAAO;AAAA;AAAA,UAGQ,oBAAA;EACf,EAAA;EACA,IAAA;EACA,KAAA;EACA,cAAA,GAAiB,mBAAmB;AAAA;AAAA,UAGrB,qBAAA;EACf,EAAA;EACA,OAAA;EACA,KAAA;AAAA;AAAA,KAGU,sBAAA;EACV,OAAA;EACA,KAAK;AAAA;AAAA,UAGU,8BAAA;EACf,IAAA,EAAM,sBAAsB;EAC5B,OAAA;EACA,KAAA;AAAA;AAAA,UAGQ,2BAAA;EACR,KAAA,EAAO,qBAAA;EACP,OAAA;EACA,eAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;EACA,qBAAA;EACA,SAAA,GAAY,qBAAA;EACZ,MAAA,GAAS,oBAAA;EACT,qBAAA;IACE,EAAA;IACA,OAAA;IACA,eAAA;IACA,QAAA;MACE,WAAA;MACA,OAAA;MACA,SAAA;MACA,YAAA;IAAA;EAAA;AAAA;AAAA,UAKW,0BAAA;EACf,QAAA;EACA,OAAA;EACA,eAAA,EAAiB,2BAAA;EACjB,mBAAA;EACA,sBAAA;EACA,eAAA,IAAmB,SAAA;EACnB,2BAAA,IAA+B,IAAA,EAAM,MAAA;EACrC,4BAAA,IAAgC,IAAA,EAAM,MAAA;EACtC,cAAA;EACA,kBAAA;EACA,iBAAA,EAAmB,8BAAA;EACnB,gBAAA;EACA,gBAAA;AAAA"}

package/dist/LearningOutcomeFlyout/types.d.ts

@@ -1,63 +1,66 @@
-import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
-export declare enum SkillClassification {
-    Language = "language",
-    Subject = "subject"
+import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
+//#region src/LearningOutcomeFlyout/types.d.ts
+declare enum SkillClassification {
+  Language = "language",
+  Subject = "subject"
 }
-export interface LearningOutcomeSkill {
-    id: string;
-    slug: string;
-    title?: string | null;
-    classification?: SkillClassification | null;
+interface LearningOutcomeSkill {
+  id: string;
+  slug: string;
+  title?: string | null;
+  classification?: SkillClassification | null;
 }
-export interface ParentLearningOutcome {
-    id: string;
-    outcome: string;
-    level: number | null | undefined;
+interface ParentLearningOutcome {
+  id: string;
+  outcome: string;
+  level: number | null | undefined;
 }
-export type BestMatchContainerType = {
-    urlPath: string | null;
-    title?: string | null;
+type BestMatchContainerType = {
+  urlPath: string | null;
+  title?: string | null;
 };
-export interface BestMatchContainerResponseType {
-    data: BestMatchContainerType | null;
-    loading: boolean;
-    error: boolean;
+interface BestMatchContainerResponseType {
+  data: BestMatchContainerType | null;
+  loading: boolean;
+  error: boolean;
 }
 interface LearningOutcomeDetailsProps {
-    level: LearningOutcomeLevels;
+  level: LearningOutcomeLevels;
+  outcome: string;
+  percentComplete: number | undefined | null;
+  highestScore: number | undefined | null;
+  highestScoreAchievedAt: string | undefined | null;
+  latestScore: number | undefined | null;
+  latestScoreAchievedAt: string | undefined | null;
+  parentLOs?: ParentLearningOutcome[];
+  skills?: LearningOutcomeSkill[] | null;
+  childLearningOutcomes?: {
+    id: string;
     outcome: string;
-    percentComplete: number | undefined | null;
-    highestScore: number | undefined | null;
-    highestScoreAchievedAt: string | undefined | null;
-    latestScore: number | undefined | null;
-    latestScoreAchievedAt: string | undefined | null;
-    parentLOs?: ParentLearningOutcome[];
-    skills?: LearningOutcomeSkill[] | null;
-    childLearningOutcomes?: {
-        id: string;
-        outcome: string;
-        percentComplete?: number | undefined | null;
-        progress?: {
-            latestScore?: number | null;
-            covered: boolean | undefined | null;
-            coveredAt?: string | null;
-            highestScore?: number | null;
-        };
-    }[];
+    percentComplete?: number | undefined | null;
+    progress?: {
+      latestScore?: number | null;
+      covered: boolean | undefined | null;
+      coveredAt?: string | null;
+      highestScore?: number | null;
+    };
+  }[];
 }
-export interface LearningOutcomeFlyoutProps {
-    expanded: boolean;
-    onClose: () => void;
-    learningOutcome: LearningOutcomeDetailsProps;
-    learningOutcomeHref: string;
-    learningOutcomeOnClick?: () => void;
-    skillTagOnClick?: (skillSlug: string) => void;
-    childLearningOutcomeOnClick?: (misc: Record<string, string>) => void;
-    parentLearningOutcomeOnClick?: (misc: Record<string, string>) => void;
-    assessmentHref?: string;
-    assessmentEligible?: boolean;
-    bestMatchResponse: BestMatchContainerResponseType;
-    bestMatchOnClick?: () => void;
-    showBestMatchCTA?: boolean;
+interface LearningOutcomeFlyoutProps {
+  expanded: boolean;
+  onClose: () => void;
+  learningOutcome: LearningOutcomeDetailsProps;
+  learningOutcomeHref: string;
+  learningOutcomeOnClick?: () => void;
+  skillTagOnClick?: (skillSlug: string) => void;
+  childLearningOutcomeOnClick?: (misc: Record<string, string>) => void;
+  parentLearningOutcomeOnClick?: (misc: Record<string, string>) => void;
+  assessmentHref?: string;
+  assessmentEligible?: boolean;
+  bestMatchResponse: BestMatchContainerResponseType;
+  bestMatchOnClick?: () => void;
+  showBestMatchCTA?: boolean;
 }
-export {};
+//#endregion
+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"],"mappings":";;aAEY,mBAAA;EACV,QAAA;EACA,OAAA;AAAA;AAAA,UAGe,oBAAA;EACf,EAAA;EACA,IAAA;EACA,KAAA;EACA,cAAA,GAAiB,mBAAA;AAAA;AAAA,UAGF,qBAAA;EACf,EAAA;EACA,OAAA;EACA,KAAA;AAAA;AAAA,KAGU,sBAAA;EACV,OAAA;EACA,KAAA;AAAA;AAAA,UAGe,8BAAA;EACf,IAAA,EAAM,sBAAA;EACN,OAAA;EACA,KAAA;AAAA;AAAA,UAGQ,2BAAA;EACR,KAAA,EAAO,qBAAA;EACP,OAAA;EACA,eAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;EACA,qBAAA;EACA,SAAA,GAAY,qBAAA;EACZ,MAAA,GAAS,oBAAA;EACT,qBAAA;IACE,EAAA;IACA,OAAA;IACA,eAAA;IACA,QAAA;MACE,WAAA;MACA,OAAA;MACA,SAAA;MACA,YAAA;IAAA;EAAA;AAAA;AAAA,UAKW,0BAAA;EACf,QAAA;EACA,OAAA;EACA,eAAA,EAAiB,2BAAA;EACjB,mBAAA;EACA,sBAAA;EACA,eAAA,IAAmB,SAAA;EACnB,2BAAA,IAA+B,IAAA,EAAM,MAAA;EACrC,4BAAA,IAAgC,IAAA,EAAM,MAAA;EACtC,cAAA;EACA,kBAAA;EACA,iBAAA,EAAmB,8BAAA;EACnB,gBAAA;EACA,gBAAA;AAAA"}

package/dist/LearningOutcomeFlyout/types.js

@@ -1,5 +1,10 @@
-export let SkillClassification = /*#__PURE__*/function (SkillClassification) {
-  SkillClassification["Language"] = "language";
-  SkillClassification["Subject"] = "subject";
-  return SkillClassification;
-}({});
+//#region src/LearningOutcomeFlyout/types.ts
+var SkillClassification;
+(function(SkillClassification) {
+	SkillClassification["Language"] = "language";
+	SkillClassification["Subject"] = "subject";
+})(SkillClassification || (SkillClassification = {}));
+
+//#endregion
+export { SkillClassification };
+//# sourceMappingURL=types.js.map

package/dist/LearningOutcomeFlyout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["SkillClassification"],"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":";;UAEYA,qBAAAA;;;GAAAA,wBAAAA,sBAAAA,CAAAA,EAAAA"}

package/dist/LearningOutcomePopover/index.cjs

@@ -0,0 +1,95 @@
+const require_LearningOutcomeLevelBadge = require('../LearningOutcomeBadges/LearningOutcomeLevelBadge.cjs');
+const require_LearningOutcomeLowAssessmentBadge = require('../LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.cjs');
+require('../LearningOutcomeBadges/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/LearningOutcomePopover/index.tsx
+const POPOVER_WIDTH = 332;
+const POPOVER_HORIZONTAL_PADDING = 16;
+const ASSESSMENT_WIDTH = (POPOVER_WIDTH - POPOVER_HORIZONTAL_PADDING * 2) / 2;
+const Assessment = ({ score, type, noBorderLeft }) => /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+	borderTop: 1,
+	borderBottom: 1,
+	borderRight: 1,
+	borderLeft: !noBorderLeft ? 1 : void 0,
+	borderColor: "background-hover",
+	p: 8,
+	gap: 4,
+	width: ASSESSMENT_WIDTH
+}, /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+	variant: "p-small",
+	color: "text-secondary"
+}, type === "highest" ? "Highest score:" : "Most recent:"), score != null ? /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+	variant: "p-small",
+	color: score && score >= 70 ? "green-700" : "text",
+	fontWeight: 700
+}, `${score}%`) : /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+	variant: "p-small",
+	color: "text-disabled"
+}, "-"));
+const LearningOutcomePopover = ({ activeElRef, isOpen, learningOutcomeDetails, ...rest }) => {
+	const { level, outcome, latestScore, highestScore, percentComplete = 0 } = learningOutcomeDetails || {};
+	const lowLatestAssessment = Boolean(latestScore != null && latestScore < 70);
+	const renderProgress = () => /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, Boolean(percentComplete === 100) && /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+		width: 16,
+		height: 16,
+		borderRadius: "md",
+		bg: "primary",
+		mr: 8,
+		alignItems: "center",
+		justifyContent: "center"
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut_icons.SmallCheckIcon, {
+		size: 11,
+		color: "white"
+	})), /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+		color: "text",
+		variant: "p-small"
+	}, `${percentComplete}% progress`));
+	return /*#__PURE__*/ React.createElement(_codecademy_gamut.Popover, {
+		...rest,
+		isOpen,
+		targetRef: activeElRef,
+		position: "above",
+		beak: "center",
+		outline: true,
+		skipFocusTrap: true
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+		width: POPOVER_WIDTH,
+		pt: 24,
+		pb: 4,
+		px: POPOVER_HORIZONTAL_PADDING,
+		gap: 24,
+		column: true
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+		gap: 16,
+		column: true
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, { justifyContent: "space-between" }, !!level && /*#__PURE__*/ React.createElement(require_LearningOutcomeLevelBadge.LearningOutcomeLevelBadge, { level }), lowLatestAssessment && /*#__PURE__*/ React.createElement(require_LearningOutcomeLowAssessmentBadge.LearningOutcomeLowAssessmentBadge, null)), /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+		color: "text",
+		textAlign: "left",
+		variant: "title-xs",
+		whiteSpace: "break-spaces"
+	}, outcome), renderProgress()), /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+		alignItems: "flex-start",
+		gap: 4,
+		pt: 16,
+		pb: 12,
+		borderTop: 1,
+		borderColor: "background-hover",
+		column: true
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+		variant: "p-small",
+		fontWeight: 700
+	}, "Evaluation results"), /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, null, /*#__PURE__*/ React.createElement(Assessment, {
+		score: highestScore,
+		type: "highest"
+	}), /*#__PURE__*/ React.createElement(Assessment, {
+		score: latestScore,
+		type: "latest",
+		noBorderLeft: true
+	})))));
+};
+
+//#endregion
+exports.LearningOutcomePopover = LearningOutcomePopover;
+//# sourceMappingURL=index.cjs.map

package/dist/LearningOutcomePopover/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["FlexBox","Popover","Text","SmallCheckIcon","LearningOutcomeLevelBadge","LearningOutcomeLowAssessmentBadge","POPOVER_WIDTH","POPOVER_HORIZONTAL_PADDING","ASSESSMENT_WIDTH","Assessment","score","type","noBorderLeft","borderTop","borderBottom","borderRight","borderLeft","undefined","borderColor","p","gap","width","variant","color","fontWeight","LearningOutcomePopover","activeElRef","isOpen","learningOutcomeDetails","rest","level","outcome","latestScore","highestScore","percentComplete","lowLatestAssessment","Boolean","renderProgress","alignItems","height","borderRadius","bg","mr","justifyContent","size","targetRef","position","beak","outline","skipFocusTrap","pt","pb","px","column","textAlign","whiteSpace"],"sources":["../../src/LearningOutcomePopover/index.tsx"],"sourcesContent":["import { FlexBox, Popover, Text } from '@codecademy/gamut';\nimport { SmallCheckIcon } from '@codecademy/gamut-icons';\n\nimport {\n  LearningOutcomeLevelBadge,\n  LearningOutcomeLowAssessmentBadge,\n} from '../LearningOutcomeBadges';\nimport { LearningOutcomePopoverDetailsProps } from '../LearningOutcomeTile/types';\n\nconst POPOVER_WIDTH = 332;\nconst POPOVER_HORIZONTAL_PADDING = 16;\nconst ASSESSMENT_WIDTH = (POPOVER_WIDTH - POPOVER_HORIZONTAL_PADDING * 2) / 2;\n\ninterface LearningOutcomePopoverProps {\n  activeElRef:\n    | React.RefObject<HTMLDivElement | null>\n    | React.RefObject<HTMLAnchorElement | null>;\n  id: string;\n  isOpen: boolean;\n  learningOutcomeDetails: LearningOutcomePopoverDetailsProps;\n  horizontalOffset?: number;\n}\n\nconst Assessment: React.FC<{\n  score?: number | null | undefined;\n  type: 'highest' | 'latest';\n  noBorderLeft?: boolean;\n}> = ({ score, type, noBorderLeft }) => (\n  <FlexBox\n    borderTop={1}\n    borderBottom={1}\n    borderRight={1}\n    borderLeft={!noBorderLeft ? 1 : undefined}\n    borderColor=\"background-hover\"\n    p={8}\n    gap={4}\n    width={ASSESSMENT_WIDTH}\n  >\n    <Text variant=\"p-small\" color=\"text-secondary\">\n      {type === 'highest' ? 'Highest score:' : 'Most recent:'}\n    </Text>\n    {score != null ? (\n      <Text\n        variant=\"p-small\"\n        color={score && score >= 70 ? 'green-700' : 'text'}\n        fontWeight={700}\n      >\n        {`${score}%`}\n      </Text>\n    ) : (\n      <Text variant=\"p-small\" color=\"text-disabled\">\n        -\n      </Text>\n    )}\n  </FlexBox>\n);\n\nexport const LearningOutcomePopover: React.FC<LearningOutcomePopoverProps> = ({\n  activeElRef,\n  isOpen,\n  learningOutcomeDetails,\n  ...rest\n}) => {\n  const {\n    level,\n    outcome,\n    latestScore,\n    highestScore,\n    percentComplete = 0,\n  } = learningOutcomeDetails || {};\n\n  const lowLatestAssessment = Boolean(latestScore != null && latestScore < 70);\n\n  const renderProgress = () => (\n    <FlexBox alignItems=\"center\">\n      {Boolean(percentComplete === 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-small\"\n      >{`${percentComplete}% progress`}</Text>\n    </FlexBox>\n  );\n\n  return (\n    <Popover\n      {...rest}\n      isOpen={isOpen}\n      targetRef={activeElRef}\n      position=\"above\"\n      beak=\"center\"\n      outline\n      skipFocusTrap\n    >\n      <FlexBox\n        width={POPOVER_WIDTH}\n        pt={24}\n        pb={4}\n        px={POPOVER_HORIZONTAL_PADDING}\n        gap={24}\n        column\n      >\n        <FlexBox gap={16} column>\n          <FlexBox justifyContent=\"space-between\">\n            {!!level && <LearningOutcomeLevelBadge level={level} />}\n            {lowLatestAssessment && <LearningOutcomeLowAssessmentBadge />}\n          </FlexBox>\n          <Text\n            color=\"text\"\n            textAlign=\"left\"\n            variant=\"title-xs\"\n            whiteSpace=\"break-spaces\"\n          >\n            {outcome}\n          </Text>\n          {renderProgress()}\n        </FlexBox>\n\n        <FlexBox\n          alignItems=\"flex-start\"\n          gap={4}\n          pt={16}\n          pb={12}\n          borderTop={1}\n          borderColor=\"background-hover\"\n          column\n        >\n          <Text variant=\"p-small\" fontWeight={700}>\n            Evaluation results\n          </Text>\n          <FlexBox>\n            <Assessment score={highestScore} type=\"highest\" />\n            <Assessment score={latestScore} type=\"latest\" noBorderLeft />\n          </FlexBox>\n        </FlexBox>\n      </FlexBox>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;AASA,MAAMM,gBAAgB;AACtB,MAAMC,6BAA6B;AACnC,MAAMC,oBAAoBF,gBAAgBC,6BAA6B,KAAK;AAY5E,MAAME,cAIA,EAAEC,OAAOC,MAAMC,mBACnB,oBAAA,cAACZ,2BAAAA;CACCa,WAAW;CACXC,cAAc;CACdC,aAAa;CACbC,YAAY,CAACJ,eAAe,IAAIK;CAChCC,aAAY;CACZC,GAAG;CACHC,KAAK;CACLC,OAAOb;GAEP,oBAAA,cAACN,wBAAAA;CAAKoB,SAAQ;CAAUC,OAAM;GAC3BZ,SAAS,YAAY,mBAAmB,cAAA,GAE1CD,SAAS,OACR,oBAAA,cAACR,wBAAAA;CACCoB,SAAQ;CACRC,OAAOb,SAASA,SAAS,KAAK,cAAc;CAC5Cc,YAAY;GAEX,GAAGd,MAAM,EAAE,IAGd,oBAAA,cAACR,wBAAAA;CAAKoB,SAAQ;CAAUC,OAAM;GAAgB,GAAA,CAAA;AAOpD,MAAaE,0BAAiE,EAC5EC,aACAC,QACAC,wBACA,GAAGC,WACJ;CACC,MAAM,EACJC,OACAC,SACAC,aACAC,cACAC,kBAAkB,MAChBN,0BAA0B,CAAC;CAE/B,MAAMO,sBAAsBC,QAAQJ,eAAe,QAAQA,cAAc,EAAA;CAEzE,MAAMK,uBACJ,oBAAA,cAACrC,2BAAAA,EAAQsC,YAAW,YACjBF,QAAQF,oBAAoB,GAAA,KAC3B,oBAAA,cAAClC,2BAAAA;EACCqB,OAAO;EACPkB,QAAQ;EACRC,cAAa;EACbC,IAAG;EACHC,IAAI;EACJJ,YAAW;EACXK,gBAAe;IAEf,oBAAA,cAACxC,wCAAAA;EAAeyC,MAAM;EAAIrB,OAAM;MAGpC,oBAAA,cAACrB,wBAAAA;EACCqB,OAAM;EACND,SAAQ;IACR,GAAGY,gBAAgB,WAAW,CAAA;CAIpC,OACE,oBAAA,cAACjC,2BAAAA;EACE,GAAG4B;EACIF;EACRkB,WAAWnB;EACXoB,UAAS;EACTC,MAAK;EACLC,SAAAA;EACAC,eAAAA;IAEA,oBAAA,cAACjD,2BAAAA;EACCqB,OAAOf;EACP4C,IAAI;EACJC,IAAI;EACJC,IAAI7C;EACJa,KAAK;EACLiC,QAAAA;IAEA,oBAAA,cAACrD,2BAAAA;EAAQoB,KAAK;EAAIiC,QAAAA;IAChB,oBAAA,cAACrD,2BAAAA,EAAQ2C,gBAAe,mBACrB,CAAC,CAACb,SAAS,oBAAA,cAAC1B,6DAAAA,EAAiC0B,UAC7CK,uBAAuB,oBAAA,cAAC9B,6EAAAA,IAAAA,CAAAA,GAE3B,oBAAA,cAACH,wBAAAA;EACCqB,OAAM;EACN+B,WAAU;EACVhC,SAAQ;EACRiC,YAAW;IAEVxB,OAAAA,GAEFM,eAAAA,CAAAA,GAGH,oBAAA,cAACrC,2BAAAA;EACCsC,YAAW;EACXlB,KAAK;EACL8B,IAAI;EACJC,IAAI;EACJtC,WAAW;EACXK,aAAY;EACZmC,QAAAA;IAEA,oBAAA,cAACnD,wBAAAA;EAAKoB,SAAQ;EAAUE,YAAY;IAAK,oBAAA,GAGzC,oBAAA,cAACxB,2BAAAA,MACC,oBAAA,cAACS,YAAAA;EAAWC,OAAOuB;EAActB,MAAK;KACtC,oBAAA,cAACF,YAAAA;EAAWC,OAAOsB;EAAarB,MAAK;EAASC,cAAAA;;AAM1D"}

package/dist/LearningOutcomePopover/index.js

@@ -1,125 +1,95 @@
-import { FlexBox, Popover, Text } from '@codecademy/gamut';
-import { SmallCheckIcon } from '@codecademy/gamut-icons';
-import { LearningOutcomeLevelBadge, LearningOutcomeLowAssessmentBadge } from '../LearningOutcomeBadges';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LearningOutcomeLevelBadge } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
+import { LearningOutcomeLowAssessmentBadge } from "../LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.js";
+import "../LearningOutcomeBadges/index.js";
+import { FlexBox, Popover, Text } from "@codecademy/gamut";
+import { SmallCheckIcon } from "@codecademy/gamut-icons";
+
+//#region src/LearningOutcomePopover/index.tsx
 const POPOVER_WIDTH = 332;
 const POPOVER_HORIZONTAL_PADDING = 16;
 const ASSESSMENT_WIDTH = (POPOVER_WIDTH - POPOVER_HORIZONTAL_PADDING * 2) / 2;
-const Assessment = ({
-  score,
-  type,
-  noBorderLeft
-}) => /*#__PURE__*/_jsxs(FlexBox, {
-  borderTop: 1,
-  borderBottom: 1,
-  borderRight: 1,
-  borderLeft: !noBorderLeft ? 1 : undefined,
-  borderColor: "background-hover",
-  p: 8,
-  gap: 4,
-  width: ASSESSMENT_WIDTH,
-  children: [/*#__PURE__*/_jsx(Text, {
-    variant: "p-small",
-    color: "text-secondary",
-    children: type === 'highest' ? 'Highest score:' : 'Most recent:'
-  }), score != null ? /*#__PURE__*/_jsx(Text, {
-    variant: "p-small",
-    color: score && score >= 70 ? 'green-700' : 'text',
-    fontWeight: 700,
-    children: `${score}%`
-  }) : /*#__PURE__*/_jsx(Text, {
-    variant: "p-small",
-    color: "text-disabled",
-    children: "-"
-  })]
-});
-export const LearningOutcomePopover = ({
-  activeElRef,
-  isOpen,
-  learningOutcomeDetails,
-  ...rest
-}) => {
-  const {
-    level,
-    outcome,
-    latestScore,
-    highestScore,
-    percentComplete = 0
-  } = learningOutcomeDetails || {};
-  const lowLatestAssessment = Boolean(latestScore != null && latestScore < 70);
-  const renderProgress = () => /*#__PURE__*/_jsxs(FlexBox, {
-    alignItems: "center",
-    children: [Boolean(percentComplete === 100) && /*#__PURE__*/_jsx(FlexBox, {
-      width: 16,
-      height: 16,
-      borderRadius: "md",
-      bg: "primary",
-      mr: 8,
-      alignItems: "center",
-      justifyContent: "center",
-      children: /*#__PURE__*/_jsx(SmallCheckIcon, {
-        size: 11,
-        color: "white"
-      })
-    }), /*#__PURE__*/_jsx(Text, {
-      color: "text",
-      variant: "p-small",
-      children: `${percentComplete}% progress`
-    })]
-  });
-  return /*#__PURE__*/_jsx(Popover, {
-    ...rest,
-    isOpen: isOpen,
-    targetRef: activeElRef,
-    position: "above",
-    beak: "center",
-    outline: true,
-    skipFocusTrap: true,
-    children: /*#__PURE__*/_jsxs(FlexBox, {
-      width: POPOVER_WIDTH,
-      pt: 24,
-      pb: 4,
-      px: POPOVER_HORIZONTAL_PADDING,
-      gap: 24,
-      column: true,
-      children: [/*#__PURE__*/_jsxs(FlexBox, {
-        gap: 16,
-        column: true,
-        children: [/*#__PURE__*/_jsxs(FlexBox, {
-          justifyContent: "space-between",
-          children: [!!level && /*#__PURE__*/_jsx(LearningOutcomeLevelBadge, {
-            level: level
-          }), lowLatestAssessment && /*#__PURE__*/_jsx(LearningOutcomeLowAssessmentBadge, {})]
-        }), /*#__PURE__*/_jsx(Text, {
-          color: "text",
-          textAlign: "left",
-          variant: "title-xs",
-          whiteSpace: "break-spaces",
-          children: outcome
-        }), renderProgress()]
-      }), /*#__PURE__*/_jsxs(FlexBox, {
-        alignItems: "flex-start",
-        gap: 4,
-        pt: 16,
-        pb: 12,
-        borderTop: 1,
-        borderColor: "background-hover",
-        column: true,
-        children: [/*#__PURE__*/_jsx(Text, {
-          variant: "p-small",
-          fontWeight: 700,
-          children: "Evaluation results"
-        }), /*#__PURE__*/_jsxs(FlexBox, {
-          children: [/*#__PURE__*/_jsx(Assessment, {
-            score: highestScore,
-            type: "highest"
-          }), /*#__PURE__*/_jsx(Assessment, {
-            score: latestScore,
-            type: "latest",
-            noBorderLeft: true
-          })]
-        })]
-      })]
-    })
-  });
-};
+const Assessment = ({ score, type, noBorderLeft }) => /*#__PURE__*/ React.createElement(FlexBox, {
+	borderTop: 1,
+	borderBottom: 1,
+	borderRight: 1,
+	borderLeft: !noBorderLeft ? 1 : void 0,
+	borderColor: "background-hover",
+	p: 8,
+	gap: 4,
+	width: ASSESSMENT_WIDTH
+}, /*#__PURE__*/ React.createElement(Text, {
+	variant: "p-small",
+	color: "text-secondary"
+}, type === "highest" ? "Highest score:" : "Most recent:"), score != null ? /*#__PURE__*/ React.createElement(Text, {
+	variant: "p-small",
+	color: score && score >= 70 ? "green-700" : "text",
+	fontWeight: 700
+}, `${score}%`) : /*#__PURE__*/ React.createElement(Text, {
+	variant: "p-small",
+	color: "text-disabled"
+}, "-"));
+const LearningOutcomePopover = ({ activeElRef, isOpen, learningOutcomeDetails, ...rest }) => {
+	const { level, outcome, latestScore, highestScore, percentComplete = 0 } = learningOutcomeDetails || {};
+	const lowLatestAssessment = Boolean(latestScore != null && latestScore < 70);
+	const renderProgress = () => /*#__PURE__*/ React.createElement(FlexBox, { alignItems: "center" }, Boolean(percentComplete === 100) && /*#__PURE__*/ React.createElement(FlexBox, {
+		width: 16,
+		height: 16,
+		borderRadius: "md",
+		bg: "primary",
+		mr: 8,
+		alignItems: "center",
+		justifyContent: "center"
+	}, /*#__PURE__*/ React.createElement(SmallCheckIcon, {
+		size: 11,
+		color: "white"
+	})), /*#__PURE__*/ React.createElement(Text, {
+		color: "text",
+		variant: "p-small"
+	}, `${percentComplete}% progress`));
+	return /*#__PURE__*/ React.createElement(Popover, {
+		...rest,
+		isOpen,
+		targetRef: activeElRef,
+		position: "above",
+		beak: "center",
+		outline: true,
+		skipFocusTrap: true
+	}, /*#__PURE__*/ React.createElement(FlexBox, {
+		width: POPOVER_WIDTH,
+		pt: 24,
+		pb: 4,
+		px: POPOVER_HORIZONTAL_PADDING,
+		gap: 24,
+		column: true
+	}, /*#__PURE__*/ React.createElement(FlexBox, {
+		gap: 16,
+		column: true
+	}, /*#__PURE__*/ React.createElement(FlexBox, { justifyContent: "space-between" }, !!level && /*#__PURE__*/ React.createElement(LearningOutcomeLevelBadge, { level }), lowLatestAssessment && /*#__PURE__*/ React.createElement(LearningOutcomeLowAssessmentBadge, null)), /*#__PURE__*/ React.createElement(Text, {
+		color: "text",
+		textAlign: "left",
+		variant: "title-xs",
+		whiteSpace: "break-spaces"
+	}, outcome), renderProgress()), /*#__PURE__*/ React.createElement(FlexBox, {
+		alignItems: "flex-start",
+		gap: 4,
+		pt: 16,
+		pb: 12,
+		borderTop: 1,
+		borderColor: "background-hover",
+		column: true
+	}, /*#__PURE__*/ React.createElement(Text, {
+		variant: "p-small",
+		fontWeight: 700
+	}, "Evaluation results"), /*#__PURE__*/ React.createElement(FlexBox, null, /*#__PURE__*/ React.createElement(Assessment, {
+		score: highestScore,
+		type: "highest"
+	}), /*#__PURE__*/ React.createElement(Assessment, {
+		score: latestScore,
+		type: "latest",
+		noBorderLeft: true
+	})))));
+};
+
+//#endregion
+export { LearningOutcomePopover };
+//# sourceMappingURL=index.js.map