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

package/dist/LearningOutcomePopover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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>\n    | React.RefObject<HTMLAnchorElement>;\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,sBAAA,cAACZ,SAAAA;CACCa,WAAW;CACXC,cAAc;CACdC,aAAa;CACbC,YAAY,CAACJ,eAAe,IAAIK;CAChCC,aAAY;CACZC,GAAG;CACHC,KAAK;CACLC,OAAOb;GAEP,sBAAA,cAACN,MAAAA;CAAKoB,SAAQ;CAAUC,OAAM;GAC3BZ,SAAS,YAAY,mBAAmB,eAAA,EAE1CD,SAAS,OACR,sBAAA,cAACR,MAAAA;CACCoB,SAAQ;CACRC,OAAOb,SAASA,SAAS,KAAK,cAAc;CAC5Cc,YAAY;GAEX,GAAGd,MAAM,GAAE,GAGd,sBAAA,cAACR,MAAAA;CAAKoB,SAAQ;CAAUC,OAAM;GAAgB,IAAA,CAAA;AAOpD,MAAaE,0BAAiE,EAC5EC,aACAC,QACAC,wBACA,GAAGC,WACJ;CACC,MAAM,EACJC,OACAC,SACAC,aACAC,cACAC,kBAAkB,MAChBN,0BAA0B,EAAC;CAE/B,MAAMO,sBAAsBC,QAAQJ,eAAe,QAAQA,cAAc,GAAA;CAEzE,MAAMK,uBACJ,sBAAA,cAACrC,SAAAA,EAAQsC,YAAW,YACjBF,QAAQF,oBAAoB,IAAA,IAC3B,sBAAA,cAAClC,SAAAA;EACCqB,OAAO;EACPkB,QAAQ;EACRC,cAAa;EACbC,IAAG;EACHC,IAAI;EACJJ,YAAW;EACXK,gBAAe;IAEf,sBAAA,cAACxC,gBAAAA;EAAeyC,MAAM;EAAIrB,OAAM;MAGpC,sBAAA,cAACrB,MAAAA;EACCqB,OAAM;EACND,SAAQ;IACR,GAAGY,gBAAgB,YAAW,CAAA;AAIpC,QACE,sBAAA,cAACjC,SAAAA;EACE,GAAG4B;EACIF;EACRkB,WAAWnB;EACXoB,UAAS;EACTC,MAAK;EACLC,SAAAA;EACAC,eAAAA;IAEA,sBAAA,cAACjD,SAAAA;EACCqB,OAAOf;EACP4C,IAAI;EACJC,IAAI;EACJC,IAAI7C;EACJa,KAAK;EACLiC,QAAAA;IAEA,sBAAA,cAACrD,SAAAA;EAAQoB,KAAK;EAAIiC,QAAAA;IAChB,sBAAA,cAACrD,SAAAA,EAAQ2C,gBAAe,mBACrB,CAAC,CAACb,SAAS,sBAAA,cAAC1B,2BAAAA,EAAiC0B,UAC7CK,uBAAuB,sBAAA,cAAC9B,mCAAAA,KAAAA,CAAAA,EAE3B,sBAAA,cAACH,MAAAA;EACCqB,OAAM;EACN+B,WAAU;EACVhC,SAAQ;EACRiC,YAAW;IAEVxB,QAAAA,EAEFM,gBAAAA,CAAAA,EAGH,sBAAA,cAACrC,SAAAA;EACCsC,YAAW;EACXlB,KAAK;EACL8B,IAAI;EACJC,IAAI;EACJtC,WAAW;EACXK,aAAY;EACZmC,QAAAA;IAEA,sBAAA,cAACnD,MAAAA;EAAKoB,SAAQ;EAAUE,YAAY;IAAK,qBAAA,EAGzC,sBAAA,cAACxB,SAAAA,MACC,sBAAA,cAACS,YAAAA;EAAWC,OAAOuB;EAActB,MAAK;KACtC,sBAAA,cAACF,YAAAA;EAAWC,OAAOsB;EAAarB,MAAK;EAASC,cAAAA"}

package/dist/LearningOutcomeTile/Tile.cjs

@@ -0,0 +1,72 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_types = require('./types.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+
+//#region src/LearningOutcomeTile/Tile.tsx
+const tileStyles = {
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: "md",
+	position: "relative"
+};
+const hoverVariants = (hover) => (0, _codecademy_gamut_styles.variant)({
+	prop: "progress",
+	variants: {
+		[require_types.Progress.notStarted]: { "&:hover": { bg: hover ? "background-hover" : void 0 } },
+		[require_types.Progress.inProgress]: { "&:hover": {
+			bg: hover ? "rgba(85, 51, 255, 0.12)" : void 0,
+			borderColor: hover ? "rgba(85, 51, 255, 0.12)" : void 0
+		} },
+		[require_types.Progress.completed]: { "&:hover": { bg: hover ? "primary-hover" : void 0 } }
+	}
+});
+const sizeVariants = (size) => (0, _codecademy_gamut_styles.variant)({
+	prop: "progress",
+	base: { border: size === "small" ? 1 : 2 },
+	variants: {
+		[require_types.Progress.notStarted]: {
+			width: size === "small" ? 32 : 40,
+			height: size === "small" ? 24 : 40
+		},
+		[require_types.Progress.inProgress]: {
+			width: size === "small" ? 32 : 40,
+			height: size === "small" ? 24 : 40
+		},
+		[require_types.Progress.completed]: {
+			width: size === "small" ? 20 : 40,
+			height: size === "small" ? 20 : 40
+		}
+	}
+});
+const Tile = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.FlexBox, {
+	target: "e1qbu8jf0",
+	label: "brand-Tile"
+})((props) => ({
+	...hoverVariants(props.hover)(props),
+	...sizeVariants(props.size)(props),
+	...(0, _codecademy_gamut_styles.variant)({
+		prop: "progress",
+		base: { ...tileStyles },
+		variants: {
+			[require_types.Progress.notStarted]: {
+				bg: "background-selected",
+				borderColor: "background-hover"
+			},
+			[require_types.Progress.inProgress]: {
+				bg: "rgba(58, 16, 229, 0.12)",
+				borderColor: "primary"
+			},
+			[require_types.Progress.completed]: {
+				bg: "primary",
+				borderColor: "border-tertiary"
+			}
+		}
+	})(props)
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xlYXJuaW5nT3V0Y29tZVRpbGUvVGlsZS50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9MZWFybmluZ091dGNvbWVUaWxlL1RpbGUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgUHJvZ3Jlc3MsIFNpemVUeXBlLCBUaWxlUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgdGlsZVN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgYm9yZGVyUmFkaXVzOiAnbWQnLFxuICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IGhvdmVyVmFyaWFudHMgPSAoaG92ZXI6IGJvb2xlYW4pID0+XG4gIHZhcmlhbnQoe1xuICAgIHByb3A6ICdwcm9ncmVzcycsXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIFtQcm9ncmVzcy5ub3RTdGFydGVkXToge1xuICAgICAgICAnJjpob3Zlcic6IHsgYmc6IGhvdmVyID8gJ2JhY2tncm91bmQtaG92ZXInIDogdW5kZWZpbmVkIH0sXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmluUHJvZ3Jlc3NdOiB7XG4gICAgICAgICcmOmhvdmVyJzoge1xuICAgICAgICAgIGJnOiBob3ZlciA/ICgncmdiYSg4NSwgNTEsIDI1NSwgMC4xMiknIGFzIG5ldmVyKSA6IHVuZGVmaW5lZCxcbiAgICAgICAgICBib3JkZXJDb2xvcjogaG92ZXIgPyAoJ3JnYmEoODUsIDUxLCAyNTUsIDAuMTIpJyBhcyBuZXZlcikgOiB1bmRlZmluZWQsXG4gICAgICAgIH0sIC8vIHRoaXMgaXMgcHJpbWFyeS1ob3ZlciBjb2xvciB3aXRoIDEyJSBvcGFjaXR5IChMWFAtNzcwNSB3aGVuIGxpZ2h0ZXIgcHJpbWFyeS1ob3ZlciBjb2xvciBpcyBhdmFpbGFibGUpXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmNvbXBsZXRlZF06IHtcbiAgICAgICAgJyY6aG92ZXInOiB7IGJnOiBob3ZlciA/ICdwcmltYXJ5LWhvdmVyJyA6IHVuZGVmaW5lZCB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KTtcblxuY29uc3Qgc2l6ZVZhcmlhbnRzID0gKHNpemU6IFNpemVUeXBlKSA9PlxuICB2YXJpYW50KHtcbiAgICBwcm9wOiAncHJvZ3Jlc3MnLFxuICAgIGJhc2U6IHtcbiAgICAgIGJvcmRlcjogc2l6ZSA9PT0gJ3NtYWxsJyA/IDEgOiAyLFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIFtQcm9ncmVzcy5ub3RTdGFydGVkXToge1xuICAgICAgICB3aWR0aDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDMyIDogNDAsXG4gICAgICAgIGhlaWdodDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDI0IDogNDAsXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmluUHJvZ3Jlc3NdOiB7XG4gICAgICAgIHdpZHRoOiBzaXplID09PSAnc21hbGwnID8gMzIgOiA0MCxcbiAgICAgICAgaGVpZ2h0OiBzaXplID09PSAnc21hbGwnID8gMjQgOiA0MCxcbiAgICAgIH0sXG4gICAgICBbUHJvZ3Jlc3MuY29tcGxldGVkXToge1xuICAgICAgICB3aWR0aDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDIwIDogNDAsXG4gICAgICAgIGhlaWdodDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDIwIDogNDAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pO1xuXG5leHBvcnQgY29uc3QgVGlsZSA9IHN0eWxlZChGbGV4Qm94KTxUaWxlUHJvcHM+KChwcm9wcykgPT4gKHtcbiAgLi4uaG92ZXJWYXJpYW50cyhwcm9wcy5ob3ZlcikocHJvcHMpLFxuICAuLi5zaXplVmFyaWFudHMocHJvcHMuc2l6ZSkocHJvcHMpLFxuICAuLi52YXJpYW50KHtcbiAgICBwcm9wOiAncHJvZ3Jlc3MnLFxuICAgIGJhc2U6IHtcbiAgICAgIC4uLnRpbGVTdHlsZXMsXG4gICAgfSxcbiAgICB2YXJpYW50czoge1xuICAgICAgW1Byb2dyZXNzLm5vdFN0YXJ0ZWRdOiB7XG4gICAgICAgIGJnOiAnYmFja2dyb3VuZC1zZWxlY3RlZCcsXG4gICAgICAgIGJvcmRlckNvbG9yOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmluUHJvZ3Jlc3NdOiB7XG4gICAgICAgIGJnOiAncmdiYSg1OCwgMTYsIDIyOSwgMC4xMiknIGFzIG5ldmVyLCAvLyB0aGlzIGlzIHByaW1hcnkgY29sb3Igd2l0aCAxMiUgb3BhY2l0eSAoTFhQLTc3MDUgd2hlbiBsaWdodGVyIHByaW1hcnkgY29sb3IgaXMgYXZhaWxhYmxlKVxuICAgICAgICBib3JkZXJDb2xvcjogJ3ByaW1hcnknLFxuICAgICAgfSxcbiAgICAgIFtQcm9ncmVzcy5jb21wbGV0ZWRdOiB7XG4gICAgICAgIGJnOiAncHJpbWFyeScsXG4gICAgICAgIGJvcmRlckNvbG9yOiAnYm9yZGVyLXRlcnRpYXJ5JyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSkocHJvcHMpLFxufSkpO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEb0IifQ== */");
+
+//#endregion
+exports.Tile = Tile;
+//# sourceMappingURL=Tile.cjs.map

package/dist/LearningOutcomeTile/Tile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.cjs","names":["FlexBox","variant","styled","Progress","tileStyles","alignItems","justifyContent","borderRadius","position","hoverVariants","hover","prop","variants","notStarted","bg","undefined","inProgress","borderColor","completed","sizeVariants","size","base","border","width","height","Tile","props"],"sources":["../../src/LearningOutcomeTile/Tile.tsx"],"sourcesContent":["import { FlexBox } from '@codecademy/gamut';\nimport { variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { Progress, SizeType, TileProps } from './types';\n\nconst tileStyles = {\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: 'md',\n  position: 'relative',\n} as const;\n\nconst hoverVariants = (hover: boolean) =>\n  variant({\n    prop: 'progress',\n    variants: {\n      [Progress.notStarted]: {\n        '&:hover': { bg: hover ? 'background-hover' : undefined },\n      },\n      [Progress.inProgress]: {\n        '&:hover': {\n          bg: hover ? ('rgba(85, 51, 255, 0.12)' as never) : undefined,\n          borderColor: hover ? ('rgba(85, 51, 255, 0.12)' as never) : undefined,\n        }, // this is primary-hover color with 12% opacity (LXP-7705 when lighter primary-hover color is available)\n      },\n      [Progress.completed]: {\n        '&:hover': { bg: hover ? 'primary-hover' : undefined },\n      },\n    },\n  });\n\nconst sizeVariants = (size: SizeType) =>\n  variant({\n    prop: 'progress',\n    base: {\n      border: size === 'small' ? 1 : 2,\n    },\n    variants: {\n      [Progress.notStarted]: {\n        width: size === 'small' ? 32 : 40,\n        height: size === 'small' ? 24 : 40,\n      },\n      [Progress.inProgress]: {\n        width: size === 'small' ? 32 : 40,\n        height: size === 'small' ? 24 : 40,\n      },\n      [Progress.completed]: {\n        width: size === 'small' ? 20 : 40,\n        height: size === 'small' ? 20 : 40,\n      },\n    },\n  });\n\nexport const Tile = styled(FlexBox)<TileProps>((props) => ({\n  ...hoverVariants(props.hover)(props),\n  ...sizeVariants(props.size)(props),\n  ...variant({\n    prop: 'progress',\n    base: {\n      ...tileStyles,\n    },\n    variants: {\n      [Progress.notStarted]: {\n        bg: 'background-selected',\n        borderColor: 'background-hover',\n      },\n      [Progress.inProgress]: {\n        bg: 'rgba(58, 16, 229, 0.12)' as never, // this is primary color with 12% opacity (LXP-7705 when lighter primary color is available)\n        borderColor: 'primary',\n      },\n      [Progress.completed]: {\n        bg: 'primary',\n        borderColor: 'border-tertiary',\n      },\n    },\n  })(props),\n}));\n"],"mappings":";;;;;;;;AAMA,MAAMI,aAAa;CACjBC,YAAY;CACZC,gBAAgB;CAChBC,cAAc;CACdC,UAAU;CACZ;AAEA,MAAMC,iBAAiBC,gDACb;CACNC,MAAM;CACNC,UAAU;GACPT,uBAASU,aAAa,EACrB,WAAW,EAAEC,IAAIJ,QAAQ,qBAAqBK,QAAU,EAC1D;GACCZ,uBAASa,aAAa,EACrB,WAAW;GACTF,IAAIJ,QAAS,4BAAsCK;GACnDE,aAAaP,QAAS,4BAAsCK;GAC9D,EACF;GACCZ,uBAASe,YAAY,EACpB,WAAW,EAAEJ,IAAIJ,QAAQ,kBAAkBK,QAAU,EACvD;EACF;CACF,CAAA;AAEF,MAAMI,gBAAgBC,+CACZ;CACNT,MAAM;CACNU,MAAM,EACJC,QAAQF,SAAS,UAAU,IAAI,GACjC;CACAR,UAAU;GACPT,uBAASU,aAAa;GACrBU,OAAOH,SAAS,UAAU,KAAK;GAC/BI,QAAQJ,SAAS,UAAU,KAAK;GAClC;GACCjB,uBAASa,aAAa;GACrBO,OAAOH,SAAS,UAAU,KAAK;GAC/BI,QAAQJ,SAAS,UAAU,KAAK;GAClC;GACCjB,uBAASe,YAAY;GACpBK,OAAOH,SAAS,UAAU,KAAK;GAC/BI,QAAQJ,SAAS,UAAU,KAAK;GAClC;EACF;CACF,CAAA;AAEF,MAAaK,OAAOvB,6CAAOF,2BAAAA;;;IAAqB0B,WAAW;CACzD,GAAGjB,cAAciB,MAAMhB,MAAK,CAAEgB,MAAM;CACpC,GAAGP,aAAaO,MAAMN,KAAI,CAAEM,MAAM;CAClC,yCAAW;EACTf,MAAM;EACNU,MAAM,EACJ,GAAGjB,YACL;EACAQ,UAAU;IACPT,uBAASU,aAAa;IACrBC,IAAI;IACJG,aAAa;IACf;IACCd,uBAASa,aAAa;IACrBF,IAAI;IACJG,aAAa;IACf;IACCd,uBAASe,YAAY;IACpBJ,IAAI;IACJG,aAAa;IACf;GACF;EACF,CAAA,CAAGS,MAAM;CACX,GAAA,02GAAA"}

package/dist/LearningOutcomeTile/Tile.js

@@ -1,79 +1,70 @@
-import _styled from "@emotion/styled/base";
-import { FlexBox } from '@codecademy/gamut';
-import { variant } from '@codecademy/gamut-styles';
-import { Progress } from './types';
+import { Progress } from "./types.js";
+import { FlexBox } from "@codecademy/gamut";
+import { variant } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+
+//#region src/LearningOutcomeTile/Tile.tsx
 const tileStyles = {
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: 'md',
-  position: 'relative'
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: "md",
+	position: "relative"
 };
-const hoverVariants = hover => variant({
-  prop: 'progress',
-  variants: {
-    [Progress.notStarted]: {
-      '&:hover': {
-        bg: hover ? 'background-hover' : undefined
-      }
-    },
-    [Progress.inProgress]: {
-      '&:hover': {
-        bg: hover ? 'rgba(85, 51, 255, 0.12)' : undefined,
-        borderColor: hover ? 'rgba(85, 51, 255, 0.12)' : undefined
-      } // this is primary-hover color with 12% opacity (LXP-7705 when lighter primary-hover color is available)
-    },
-    [Progress.completed]: {
-      '&:hover': {
-        bg: hover ? 'primary-hover' : undefined
-      }
-    }
-  }
+const hoverVariants = (hover) => variant({
+	prop: "progress",
+	variants: {
+		[Progress.notStarted]: { "&:hover": { bg: hover ? "background-hover" : void 0 } },
+		[Progress.inProgress]: { "&:hover": {
+			bg: hover ? "rgba(85, 51, 255, 0.12)" : void 0,
+			borderColor: hover ? "rgba(85, 51, 255, 0.12)" : void 0
+		} },
+		[Progress.completed]: { "&:hover": { bg: hover ? "primary-hover" : void 0 } }
+	}
 });
-const sizeVariants = size => variant({
-  prop: 'progress',
-  base: {
-    border: size === 'small' ? 1 : 2
-  },
-  variants: {
-    [Progress.notStarted]: {
-      width: size === 'small' ? 32 : 40,
-      height: size === 'small' ? 24 : 40
-    },
-    [Progress.inProgress]: {
-      width: size === 'small' ? 32 : 40,
-      height: size === 'small' ? 24 : 40
-    },
-    [Progress.completed]: {
-      width: size === 'small' ? 20 : 40,
-      height: size === 'small' ? 20 : 40
-    }
-  }
+const sizeVariants = (size) => variant({
+	prop: "progress",
+	base: { border: size === "small" ? 1 : 2 },
+	variants: {
+		[Progress.notStarted]: {
+			width: size === "small" ? 32 : 40,
+			height: size === "small" ? 24 : 40
+		},
+		[Progress.inProgress]: {
+			width: size === "small" ? 32 : 40,
+			height: size === "small" ? 24 : 40
+		},
+		[Progress.completed]: {
+			width: size === "small" ? 20 : 40,
+			height: size === "small" ? 20 : 40
+		}
+	}
 });
-export const Tile = /*#__PURE__*/_styled(FlexBox, {
-  target: "e4znlwe0",
-  label: "Tile"
-})(props => ({
-  ...hoverVariants(props.hover)(props),
-  ...sizeVariants(props.size)(props),
-  ...variant({
-    prop: 'progress',
-    base: {
-      ...tileStyles
-    },
-    variants: {
-      [Progress.notStarted]: {
-        bg: 'background-selected',
-        borderColor: 'background-hover'
-      },
-      [Progress.inProgress]: {
-        bg: 'rgba(58, 16, 229, 0.12)',
-        // this is primary color with 12% opacity (LXP-7705 when lighter primary color is available)
-        borderColor: 'primary'
-      },
-      [Progress.completed]: {
-        bg: 'primary',
-        borderColor: 'border-tertiary'
-      }
-    }
-  })(props)
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVUaWxlL1RpbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEb0IiLCJmaWxlIjoiLi4vLi4vc3JjL0xlYXJuaW5nT3V0Y29tZVRpbGUvVGlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGbGV4Qm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IFByb2dyZXNzLCBTaXplVHlwZSwgVGlsZVByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IHRpbGVTdHlsZXMgPSB7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBqdXN0aWZ5Q29udGVudDogJ2NlbnRlcicsXG4gIGJvcmRlclJhZGl1czogJ21kJyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG59IGFzIGNvbnN0O1xuXG5jb25zdCBob3ZlclZhcmlhbnRzID0gKGhvdmVyOiBib29sZWFuKSA9PlxuICB2YXJpYW50KHtcbiAgICBwcm9wOiAncHJvZ3Jlc3MnLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBbUHJvZ3Jlc3Mubm90U3RhcnRlZF06IHtcbiAgICAgICAgJyY6aG92ZXInOiB7IGJnOiBob3ZlciA/ICdiYWNrZ3JvdW5kLWhvdmVyJyA6IHVuZGVmaW5lZCB9LFxuICAgICAgfSxcbiAgICAgIFtQcm9ncmVzcy5pblByb2dyZXNzXToge1xuICAgICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgICBiZzogaG92ZXIgPyAoJ3JnYmEoODUsIDUxLCAyNTUsIDAuMTIpJyBhcyBuZXZlcikgOiB1bmRlZmluZWQsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IGhvdmVyID8gKCdyZ2JhKDg1LCA1MSwgMjU1LCAwLjEyKScgYXMgbmV2ZXIpIDogdW5kZWZpbmVkLFxuICAgICAgICB9LCAvLyB0aGlzIGlzIHByaW1hcnktaG92ZXIgY29sb3Igd2l0aCAxMiUgb3BhY2l0eSAoTFhQLTc3MDUgd2hlbiBsaWdodGVyIHByaW1hcnktaG92ZXIgY29sb3IgaXMgYXZhaWxhYmxlKVxuICAgICAgfSxcbiAgICAgIFtQcm9ncmVzcy5jb21wbGV0ZWRdOiB7XG4gICAgICAgICcmOmhvdmVyJzogeyBiZzogaG92ZXIgPyAncHJpbWFyeS1ob3ZlcicgOiB1bmRlZmluZWQgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSk7XG5cbmNvbnN0IHNpemVWYXJpYW50cyA9IChzaXplOiBTaXplVHlwZSkgPT5cbiAgdmFyaWFudCh7XG4gICAgcHJvcDogJ3Byb2dyZXNzJyxcbiAgICBiYXNlOiB7XG4gICAgICBib3JkZXI6IHNpemUgPT09ICdzbWFsbCcgPyAxIDogMixcbiAgICB9LFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBbUHJvZ3Jlc3Mubm90U3RhcnRlZF06IHtcbiAgICAgICAgd2lkdGg6IHNpemUgPT09ICdzbWFsbCcgPyAzMiA6IDQwLFxuICAgICAgICBoZWlnaHQ6IHNpemUgPT09ICdzbWFsbCcgPyAyNCA6IDQwLFxuICAgICAgfSxcbiAgICAgIFtQcm9ncmVzcy5pblByb2dyZXNzXToge1xuICAgICAgICB3aWR0aDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDMyIDogNDAsXG4gICAgICAgIGhlaWdodDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDI0IDogNDAsXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmNvbXBsZXRlZF06IHtcbiAgICAgICAgd2lkdGg6IHNpemUgPT09ICdzbWFsbCcgPyAyMCA6IDQwLFxuICAgICAgICBoZWlnaHQ6IHNpemUgPT09ICdzbWFsbCcgPyAyMCA6IDQwLFxuICAgICAgfSxcbiAgICB9LFxuICB9KTtcblxuZXhwb3J0IGNvbnN0IFRpbGUgPSBzdHlsZWQoRmxleEJveCk8VGlsZVByb3BzPigocHJvcHMpID0+ICh7XG4gIC4uLmhvdmVyVmFyaWFudHMocHJvcHMuaG92ZXIpKHByb3BzKSxcbiAgLi4uc2l6ZVZhcmlhbnRzKHByb3BzLnNpemUpKHByb3BzKSxcbiAgLi4udmFyaWFudCh7XG4gICAgcHJvcDogJ3Byb2dyZXNzJyxcbiAgICBiYXNlOiB7XG4gICAgICAuLi50aWxlU3R5bGVzLFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIFtQcm9ncmVzcy5ub3RTdGFydGVkXToge1xuICAgICAgICBiZzogJ2JhY2tncm91bmQtc2VsZWN0ZWQnLFxuICAgICAgICBib3JkZXJDb2xvcjogJ2JhY2tncm91bmQtaG92ZXInLFxuICAgICAgfSxcbiAgICAgIFtQcm9ncmVzcy5pblByb2dyZXNzXToge1xuICAgICAgICBiZzogJ3JnYmEoNTgsIDE2LCAyMjksIDAuMTIpJyBhcyBuZXZlciwgLy8gdGhpcyBpcyBwcmltYXJ5IGNvbG9yIHdpdGggMTIlIG9wYWNpdHkgKExYUC03NzA1IHdoZW4gbGlnaHRlciBwcmltYXJ5IGNvbG9yIGlzIGF2YWlsYWJsZSlcbiAgICAgICAgYm9yZGVyQ29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIH0sXG4gICAgICBbUHJvZ3Jlc3MuY29tcGxldGVkXToge1xuICAgICAgICBiZzogJ3ByaW1hcnknLFxuICAgICAgICBib3JkZXJDb2xvcjogJ2JvcmRlci10ZXJ0aWFyeScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pKHByb3BzKSxcbn0pKTtcbiJdfQ== */");
+const Tile = /* @__PURE__ */ styled(FlexBox, {
+	target: "e1qbu8jf0",
+	label: "brand-Tile"
+})((props) => ({
+	...hoverVariants(props.hover)(props),
+	...sizeVariants(props.size)(props),
+	...variant({
+		prop: "progress",
+		base: { ...tileStyles },
+		variants: {
+			[Progress.notStarted]: {
+				bg: "background-selected",
+				borderColor: "background-hover"
+			},
+			[Progress.inProgress]: {
+				bg: "rgba(58, 16, 229, 0.12)",
+				borderColor: "primary"
+			},
+			[Progress.completed]: {
+				bg: "primary",
+				borderColor: "border-tertiary"
+			}
+		}
+	})(props)
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xlYXJuaW5nT3V0Y29tZVRpbGUvVGlsZS50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9MZWFybmluZ091dGNvbWVUaWxlL1RpbGUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgUHJvZ3Jlc3MsIFNpemVUeXBlLCBUaWxlUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgdGlsZVN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgYm9yZGVyUmFkaXVzOiAnbWQnLFxuICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IGhvdmVyVmFyaWFudHMgPSAoaG92ZXI6IGJvb2xlYW4pID0+XG4gIHZhcmlhbnQoe1xuICAgIHByb3A6ICdwcm9ncmVzcycsXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIFtQcm9ncmVzcy5ub3RTdGFydGVkXToge1xuICAgICAgICAnJjpob3Zlcic6IHsgYmc6IGhvdmVyID8gJ2JhY2tncm91bmQtaG92ZXInIDogdW5kZWZpbmVkIH0sXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmluUHJvZ3Jlc3NdOiB7XG4gICAgICAgICcmOmhvdmVyJzoge1xuICAgICAgICAgIGJnOiBob3ZlciA/ICgncmdiYSg4NSwgNTEsIDI1NSwgMC4xMiknIGFzIG5ldmVyKSA6IHVuZGVmaW5lZCxcbiAgICAgICAgICBib3JkZXJDb2xvcjogaG92ZXIgPyAoJ3JnYmEoODUsIDUxLCAyNTUsIDAuMTIpJyBhcyBuZXZlcikgOiB1bmRlZmluZWQsXG4gICAgICAgIH0sIC8vIHRoaXMgaXMgcHJpbWFyeS1ob3ZlciBjb2xvciB3aXRoIDEyJSBvcGFjaXR5IChMWFAtNzcwNSB3aGVuIGxpZ2h0ZXIgcHJpbWFyeS1ob3ZlciBjb2xvciBpcyBhdmFpbGFibGUpXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmNvbXBsZXRlZF06IHtcbiAgICAgICAgJyY6aG92ZXInOiB7IGJnOiBob3ZlciA/ICdwcmltYXJ5LWhvdmVyJyA6IHVuZGVmaW5lZCB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KTtcblxuY29uc3Qgc2l6ZVZhcmlhbnRzID0gKHNpemU6IFNpemVUeXBlKSA9PlxuICB2YXJpYW50KHtcbiAgICBwcm9wOiAncHJvZ3Jlc3MnLFxuICAgIGJhc2U6IHtcbiAgICAgIGJvcmRlcjogc2l6ZSA9PT0gJ3NtYWxsJyA/IDEgOiAyLFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIFtQcm9ncmVzcy5ub3RTdGFydGVkXToge1xuICAgICAgICB3aWR0aDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDMyIDogNDAsXG4gICAgICAgIGhlaWdodDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDI0IDogNDAsXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmluUHJvZ3Jlc3NdOiB7XG4gICAgICAgIHdpZHRoOiBzaXplID09PSAnc21hbGwnID8gMzIgOiA0MCxcbiAgICAgICAgaGVpZ2h0OiBzaXplID09PSAnc21hbGwnID8gMjQgOiA0MCxcbiAgICAgIH0sXG4gICAgICBbUHJvZ3Jlc3MuY29tcGxldGVkXToge1xuICAgICAgICB3aWR0aDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDIwIDogNDAsXG4gICAgICAgIGhlaWdodDogc2l6ZSA9PT0gJ3NtYWxsJyA/IDIwIDogNDAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0pO1xuXG5leHBvcnQgY29uc3QgVGlsZSA9IHN0eWxlZChGbGV4Qm94KTxUaWxlUHJvcHM+KChwcm9wcykgPT4gKHtcbiAgLi4uaG92ZXJWYXJpYW50cyhwcm9wcy5ob3ZlcikocHJvcHMpLFxuICAuLi5zaXplVmFyaWFudHMocHJvcHMuc2l6ZSkocHJvcHMpLFxuICAuLi52YXJpYW50KHtcbiAgICBwcm9wOiAncHJvZ3Jlc3MnLFxuICAgIGJhc2U6IHtcbiAgICAgIC4uLnRpbGVTdHlsZXMsXG4gICAgfSxcbiAgICB2YXJpYW50czoge1xuICAgICAgW1Byb2dyZXNzLm5vdFN0YXJ0ZWRdOiB7XG4gICAgICAgIGJnOiAnYmFja2dyb3VuZC1zZWxlY3RlZCcsXG4gICAgICAgIGJvcmRlckNvbG9yOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgICB9LFxuICAgICAgW1Byb2dyZXNzLmluUHJvZ3Jlc3NdOiB7XG4gICAgICAgIGJnOiAncmdiYSg1OCwgMTYsIDIyOSwgMC4xMiknIGFzIG5ldmVyLCAvLyB0aGlzIGlzIHByaW1hcnkgY29sb3Igd2l0aCAxMiUgb3BhY2l0eSAoTFhQLTc3MDUgd2hlbiBsaWdodGVyIHByaW1hcnkgY29sb3IgaXMgYXZhaWxhYmxlKVxuICAgICAgICBib3JkZXJDb2xvcjogJ3ByaW1hcnknLFxuICAgICAgfSxcbiAgICAgIFtQcm9ncmVzcy5jb21wbGV0ZWRdOiB7XG4gICAgICAgIGJnOiAncHJpbWFyeScsXG4gICAgICAgIGJvcmRlckNvbG9yOiAnYm9yZGVyLXRlcnRpYXJ5JyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSkocHJvcHMpLFxufSkpO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEb0IifQ== */");
+
+//#endregion
+export { Tile };
+//# sourceMappingURL=Tile.js.map

package/dist/LearningOutcomeTile/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","names":["FlexBox","variant","styled","Progress","tileStyles","alignItems","justifyContent","borderRadius","position","hoverVariants","hover","prop","variants","notStarted","bg","undefined","inProgress","borderColor","completed","sizeVariants","size","base","border","width","height","Tile","props"],"sources":["../../src/LearningOutcomeTile/Tile.tsx"],"sourcesContent":["import { FlexBox } from '@codecademy/gamut';\nimport { variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { Progress, SizeType, TileProps } from './types';\n\nconst tileStyles = {\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: 'md',\n  position: 'relative',\n} as const;\n\nconst hoverVariants = (hover: boolean) =>\n  variant({\n    prop: 'progress',\n    variants: {\n      [Progress.notStarted]: {\n        '&:hover': { bg: hover ? 'background-hover' : undefined },\n      },\n      [Progress.inProgress]: {\n        '&:hover': {\n          bg: hover ? ('rgba(85, 51, 255, 0.12)' as never) : undefined,\n          borderColor: hover ? ('rgba(85, 51, 255, 0.12)' as never) : undefined,\n        }, // this is primary-hover color with 12% opacity (LXP-7705 when lighter primary-hover color is available)\n      },\n      [Progress.completed]: {\n        '&:hover': { bg: hover ? 'primary-hover' : undefined },\n      },\n    },\n  });\n\nconst sizeVariants = (size: SizeType) =>\n  variant({\n    prop: 'progress',\n    base: {\n      border: size === 'small' ? 1 : 2,\n    },\n    variants: {\n      [Progress.notStarted]: {\n        width: size === 'small' ? 32 : 40,\n        height: size === 'small' ? 24 : 40,\n      },\n      [Progress.inProgress]: {\n        width: size === 'small' ? 32 : 40,\n        height: size === 'small' ? 24 : 40,\n      },\n      [Progress.completed]: {\n        width: size === 'small' ? 20 : 40,\n        height: size === 'small' ? 20 : 40,\n      },\n    },\n  });\n\nexport const Tile = styled(FlexBox)<TileProps>((props) => ({\n  ...hoverVariants(props.hover)(props),\n  ...sizeVariants(props.size)(props),\n  ...variant({\n    prop: 'progress',\n    base: {\n      ...tileStyles,\n    },\n    variants: {\n      [Progress.notStarted]: {\n        bg: 'background-selected',\n        borderColor: 'background-hover',\n      },\n      [Progress.inProgress]: {\n        bg: 'rgba(58, 16, 229, 0.12)' as never, // this is primary color with 12% opacity (LXP-7705 when lighter primary color is available)\n        borderColor: 'primary',\n      },\n      [Progress.completed]: {\n        bg: 'primary',\n        borderColor: 'border-tertiary',\n      },\n    },\n  })(props),\n}));\n"],"mappings":";;;;;;AAMA,MAAMI,aAAa;CACjBC,YAAY;CACZC,gBAAgB;CAChBC,cAAc;CACdC,UAAU;CACZ;AAEA,MAAMC,iBAAiBC,UACrBT,QAAQ;CACNU,MAAM;CACNC,UAAU;GACPT,SAASU,aAAa,EACrB,WAAW,EAAEC,IAAIJ,QAAQ,qBAAqBK,QAAU,EAC1D;GACCZ,SAASa,aAAa,EACrB,WAAW;GACTF,IAAIJ,QAAS,4BAAsCK;GACnDE,aAAaP,QAAS,4BAAsCK;GAC9D,EACF;GACCZ,SAASe,YAAY,EACpB,WAAW,EAAEJ,IAAIJ,QAAQ,kBAAkBK,QAAU,EACvD;EACF;CACF,CAAA;AAEF,MAAMI,gBAAgBC,SACpBnB,QAAQ;CACNU,MAAM;CACNU,MAAM,EACJC,QAAQF,SAAS,UAAU,IAAI,GACjC;CACAR,UAAU;GACPT,SAASU,aAAa;GACrBU,OAAOH,SAAS,UAAU,KAAK;GAC/BI,QAAQJ,SAAS,UAAU,KAAK;GAClC;GACCjB,SAASa,aAAa;GACrBO,OAAOH,SAAS,UAAU,KAAK;GAC/BI,QAAQJ,SAAS,UAAU,KAAK;GAClC;GACCjB,SAASe,YAAY;GACpBK,OAAOH,SAAS,UAAU,KAAK;GAC/BI,QAAQJ,SAAS,UAAU,KAAK;GAClC;EACF;CACF,CAAA;AAEF,MAAaK,OAAOvB,uBAAOF,SAAAA;;;IAAqB0B,WAAW;CACzD,GAAGjB,cAAciB,MAAMhB,MAAK,CAAEgB,MAAM;CACpC,GAAGP,aAAaO,MAAMN,KAAI,CAAEM,MAAM;CAClC,GAAGzB,QAAQ;EACTU,MAAM;EACNU,MAAM,EACJ,GAAGjB,YACL;EACAQ,UAAU;IACPT,SAASU,aAAa;IACrBC,IAAI;IACJG,aAAa;IACf;IACCd,SAASa,aAAa;IACrBF,IAAI;IACJG,aAAa;IACf;IACCd,SAASe,YAAY;IACpBJ,IAAI;IACJG,aAAa;IACf;GACF;EACF,CAAA,CAAGS,MAAM;CACX,GAAA,02GAAA"}

package/dist/LearningOutcomeTile/index.cjs

@@ -0,0 +1,97 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_LearningOutcomeLevelBadge = require('../LearningOutcomeBadges/LearningOutcomeLevelBadge.cjs');
+const require_LearningOutcomeLowAssessmentBadge = require('../LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.cjs');
+require('../LearningOutcomeBadges/index.cjs');
+const require_index$1 = require('../LearningOutcomePopover/index.cjs');
+const require_types = require('./types.cjs');
+const require_Tile = require('./Tile.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/LearningOutcomeTile/index.tsx
+const ProgressText = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.Text, {
+	target: "e3gkdbx0",
+	label: "brand-ProgressText"
+})((props) => ({ ...(0, _codecademy_gamut_styles.variant)({
+	prop: "progress",
+	base: { fontSize: 14 },
+	variants: {
+		[require_types.Progress.notStarted]: {
+			color: "text-secondary",
+			fontWeight: 400
+		},
+		[require_types.Progress.inProgress]: {
+			color: "primary",
+			fontWeight: props.isSmall ? 400 : 700
+		},
+		[require_types.Progress.completed]: {}
+	}
+})(props) }), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xlYXJuaW5nT3V0Y29tZVRpbGUvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvTGVhcm5pbmdPdXRjb21lVGlsZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgU21hbGxDaGVja0ljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgbGVhcm5pbmdPdXRjb21lTGFiZWxzLFxuICBMZWFybmluZ091dGNvbWVMb3dBc3Nlc3NtZW50RG90LFxufSBmcm9tICcuLi9MZWFybmluZ091dGNvbWVCYWRnZXMnO1xuaW1wb3J0IHsgTGVhcm5pbmdPdXRjb21lUG9wb3ZlciB9IGZyb20gJy4uL0xlYXJuaW5nT3V0Y29tZVBvcG92ZXInO1xuaW1wb3J0IHsgVGlsZSB9IGZyb20gJy4vVGlsZSc7XG5pbXBvcnQge1xuICBMZWFybmluZ091dGNvbWVQb3BvdmVyRGV0YWlsc1Byb3BzLFxuICBMZWFybmluZ091dGNvbWVUaWxlUHJvcHMsXG4gIFByb2dyZXNzLFxufSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgUHJvZ3Jlc3NUZXh0ID0gc3R5bGVkKFRleHQpPHsgcHJvZ3Jlc3M6IFByb2dyZXNzOyBpc1NtYWxsOiBib29sZWFuIH0+KFxuICAocHJvcHMpID0+ICh7XG4gICAgLi4udmFyaWFudCh7XG4gICAgICBwcm9wOiAncHJvZ3Jlc3MnLFxuICAgICAgYmFzZToge1xuICAgICAgICBmb250U2l6ZTogMTQsXG4gICAgICB9LFxuICAgICAgdmFyaWFudHM6IHtcbiAgICAgICAgW1Byb2dyZXNzLm5vdFN0YXJ0ZWRdOiB7XG4gICAgICAgICAgY29sb3I6ICd0ZXh0LXNlY29uZGFyeScsXG4gICAgICAgICAgZm9udFdlaWdodDogNDAwLFxuICAgICAgICB9LFxuICAgICAgICBbUHJvZ3Jlc3MuaW5Qcm9ncmVzc106IHtcbiAgICAgICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgICAgIGZvbnRXZWlnaHQ6IHByb3BzLmlzU21hbGwgPyA0MDAgOiA3MDAsXG4gICAgICAgIH0sXG4gICAgICAgIFtQcm9ncmVzcy5jb21wbGV0ZWRdOiB7fSxcbiAgICAgIH0sXG4gICAgfSkocHJvcHMpLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IHByb2dyZXNzU3RhdGUgPSAocGVyY2VudENvbXBsZXRlOiBudW1iZXIpOiBQcm9ncmVzcyA9PiB7XG4gIGlmIChwZXJjZW50Q29tcGxldGUgPT09IDApIHtcbiAgICByZXR1cm4gUHJvZ3Jlc3Mubm90U3RhcnRlZDtcbiAgfVxuICBpZiAocGVyY2VudENvbXBsZXRlID4gMCAmJiBwZXJjZW50Q29tcGxldGUgPCAxMDApIHtcbiAgICByZXR1cm4gUHJvZ3Jlc3MuaW5Qcm9ncmVzcztcbiAgfVxuICByZXR1cm4gUHJvZ3Jlc3MuY29tcGxldGVkO1xufTtcblxuZXhwb3J0IGNvbnN0IExlYXJuaW5nT3V0Y29tZVRpbGU6IFJlYWN0LkZDPExlYXJuaW5nT3V0Y29tZVRpbGVQcm9wcz4gPSAoe1xuICBsZWFybmluZ091dGNvbWVEZXRhaWxzLFxuICBvbkNsaWNrLFxuICBob3ZlciA9IGZhbHNlLFxuICBwb3BvdmVyID0gZmFsc2UsXG4gIHNpemUgPSAnbm9ybWFsJyxcbn0pID0+IHtcbiAgY29uc3QgeyBpZCwgbGV2ZWwsIG91dGNvbWUsIGxhdGVzdFNjb3JlLCBwZXJjZW50Q29tcGxldGUgfSA9XG4gICAgbGVhcm5pbmdPdXRjb21lRGV0YWlscztcblxuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBhY3RpdmVFbFJlZiA9IHVzZVJlZjxIVE1MQW5jaG9yRWxlbWVudD4obnVsbCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNPcGVuKSB7XG4gICAgICAvLyBJZiB0aGUgcG9wb3ZlciBpcyBvcGVuLCB3ZSB3YW50IHRvIGZvY3VzIHRoZSBhY3RpdmUgZWxlbWVudFxuICAgICAgYWN0aXZlRWxSZWYuY3VycmVudD8uZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtpc09wZW5dKTtcblxuICBjb25zdCBwb3BvdmVyUHJvcHMgPVxuICAgIHBvcG92ZXIgJiYgaG92ZXJcbiAgICAgID8ge1xuICAgICAgICAgIHJlZjogYWN0aXZlRWxSZWYsXG4gICAgICAgICAgb25Nb3VzZUVudGVyOiAoKSA9PiBzZXRJc09wZW4odHJ1ZSksXG4gICAgICAgICAgb25Nb3VzZUxlYXZlOiAoKSA9PiBzZXRJc09wZW4oZmFsc2UpLFxuICAgICAgICAgIG9uRm9jdXM6ICgpID0+IHNldElzT3Blbih0cnVlKSwgLy8gRm9yIGtleWJvYXJkIHVzZXJzXG4gICAgICAgICAgb25CbHVyOiAoKSA9PiBzZXRJc09wZW4oZmFsc2UpLCAvLyBDbG9zZSBvbiBibHVyXG4gICAgICAgICAgJ2FyaWEtZGVzY3JpYmVkYnknOiBgJHtpZH0tcG9wb3ZlcmAsXG4gICAgICAgIH1cbiAgICAgIDoge307XG5cbiAgY29uc3QgaGlnaGVzdFNjb3JlID0gcG9wb3ZlclxuICAgID8gKGxlYXJuaW5nT3V0Y29tZURldGFpbHMgYXMgTGVhcm5pbmdPdXRjb21lUG9wb3ZlckRldGFpbHNQcm9wcylcbiAgICAgICAgPy5oaWdoZXN0U2NvcmVcbiAgICA6IHVuZGVmaW5lZDtcblxuICBjb25zdCBwZXJjZW50Q29tcGxldGVWYWx1ZSA9IHBlcmNlbnRDb21wbGV0ZSA/PyAwO1xuICBjb25zdCBwcm9ncmVzcyA9IHByb2dyZXNzU3RhdGUocGVyY2VudENvbXBsZXRlVmFsdWUpO1xuXG4gIGNvbnN0IGlzQ29tcGxldGVkID0gcHJvZ3Jlc3MgPT09IFByb2dyZXNzLmNvbXBsZXRlZDtcbiAgY29uc3QgaXNTbWFsbCA9IHNpemUgPT09ICdzbWFsbCc7XG4gIGNvbnN0IGhhc0xvd0xhdGVzdEFzc2Vzc21lbnQgPSBCb29sZWFuKFxuICAgIGxhdGVzdFNjb3JlICE9IG51bGwgJiYgbGF0ZXN0U2NvcmUgPCA3MFxuICApO1xuICBjb25zdCBzaG93TG93QXNzZXNzbWVudERvdCA9IGhhc0xvd0xhdGVzdEFzc2Vzc21lbnQgJiYgIWlzU21hbGw7XG5cbiAgY29uc3QgbG93QXNzZXNzbWVudExhYmVsID0gaGFzTG93TGF0ZXN0QXNzZXNzbWVudFxuICAgID8gJ01vc3QgcmVjZW50IGFzc2Vzc21lbnQgc2NvcmUgaXMgYmVsb3cgNzAlLCBuZWVkcyByZXZpZXcuICdcbiAgICA6ICcnO1xuICBjb25zdCBkZWZhdWx0QXJpYUxhYmVsID0gYCR7bGVhcm5pbmdPdXRjb21lTGFiZWxzW2xldmVsXX06ICR7b3V0Y29tZX0gJHtsb3dBc3Nlc3NtZW50TGFiZWx9UHJvZ3Jlc3MgJHtwZXJjZW50Q29tcGxldGVWYWx1ZX0lIGNvbXBsZXRlZC5gO1xuICBjb25zdCBldmFsdWF0aW9uVmFsdWVzTGFiZWwgPVxuICAgIGlzT3BlbiAmJiAoaGlnaGVzdFNjb3JlIHx8IGxhdGVzdFNjb3JlKVxuICAgICAgPyBgRXZhbHVhdGlvbiBWYWx1ZXMgLSAke1xuICAgICAgICAgIGhpZ2hlc3RTY29yZSA/IGBIaWdoZXN0IGFzc2Vzc21lbnQgc2NvcmUgJHtoaWdoZXN0U2NvcmV9LiBgIDogJydcbiAgICAgICAgfSR7bGF0ZXN0U2NvcmUgPyBgUmVjZW50IGFzc2Vzc21lbnQgc2NvcmUgJHtsYXRlc3RTY29yZX0uYCA6ICcnfWBcbiAgICAgIDogJyc7XG5cbiAgcmV0dXJuIChcbiAgICA8QW5jaG9yXG4gICAgICBhcmlhLWxhYmVsPXtgJHtkZWZhdWx0QXJpYUxhYmVsfSAke2V2YWx1YXRpb25WYWx1ZXNMYWJlbH1gfVxuICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgZGF0YS10ZXN0aWQ9e2BsZWFybmluZy1vdXRjb21lLXRpbGUtJHtpZH1gfVxuICAgICAgey4uLnBvcG92ZXJQcm9wc31cbiAgICA+XG4gICAgICA8VGlsZSBob3Zlcj17aG92ZXJ9IHByb2dyZXNzPXtwcm9ncmVzc30gc2l6ZT17c2l6ZX0+XG4gICAgICAgIHtpc0NvbXBsZXRlZCA/IChcbiAgICAgICAgICA8U21hbGxDaGVja0ljb25cbiAgICAgICAgICAgIHNpemU9e2lzU21hbGwgPyAxMiA6IDE2fVxuICAgICAgICAgICAgdGV4dENvbG9yPVwiYmFja2dyb3VuZC1jb250cmFzdFwiXG4gICAgICAgICAgLz5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICA8UHJvZ3Jlc3NUZXh0IHByb2dyZXNzPXtwcm9ncmVzc30gaXNTbWFsbD17aXNTbWFsbH0+XG4gICAgICAgICAgICB7YCR7cGVyY2VudENvbXBsZXRlVmFsdWV9JWB9XG4gICAgICAgICAgPC9Qcm9ncmVzc1RleHQ+XG4gICAgICAgICl9XG4gICAgICAgIHtzaG93TG93QXNzZXNzbWVudERvdCAmJiAoXG4gICAgICAgICAgPExlYXJuaW5nT3V0Y29tZUxvd0Fzc2Vzc21lbnREb3RcbiAgICAgICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICAgICAgdG9wPVwiLTIwJVwiXG4gICAgICAgICAgICByaWdodD1cIi0yMCVcIlxuICAgICAgICAgICAgaGFzQm9yZGVyXG4gICAgICAgICAgLz5cbiAgICAgICAgKX1cbiAgICAgIDwvVGlsZT5cbiAgICAgIHtpc09wZW4gJiYgKFxuICAgICAgICA8TGVhcm5pbmdPdXRjb21lUG9wb3ZlclxuICAgICAgICAgIGFjdGl2ZUVsUmVmPXthY3RpdmVFbFJlZn1cbiAgICAgICAgICBob3Jpem9udGFsT2Zmc2V0PXtpc1NtYWxsICYmIGlzQ29tcGxldGVkID8gMTU5IDogaXNTbWFsbCA/IDE1MyA6IDE1MH1cbiAgICAgICAgICBpZD17YCR7aWR9LXBvcG92ZXJgfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIGxlYXJuaW5nT3V0Y29tZURldGFpbHM9e1xuICAgICAgICAgICAgbGVhcm5pbmdPdXRjb21lRGV0YWlscyBhcyBMZWFybmluZ091dGNvbWVQb3BvdmVyRGV0YWlsc1Byb3BzXG4gICAgICAgICAgfVxuICAgICAgICAvPlxuICAgICAgKX1cbiAgICA8L0FuY2hvcj5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JxQiJ9 */");
+const progressState = (percentComplete) => {
+	if (percentComplete === 0) return require_types.Progress.notStarted;
+	if (percentComplete > 0 && percentComplete < 100) return require_types.Progress.inProgress;
+	return require_types.Progress.completed;
+};
+const LearningOutcomeTile = ({ learningOutcomeDetails, onClick, hover = false, popover = false, size = "normal" }) => {
+	const { id, level, outcome, latestScore, percentComplete } = learningOutcomeDetails;
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const activeElRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (isOpen) activeElRef.current?.focus();
+	}, [isOpen]);
+	const popoverProps = popover && hover ? {
+		ref: activeElRef,
+		onMouseEnter: () => setIsOpen(true),
+		onMouseLeave: () => setIsOpen(false),
+		onFocus: () => setIsOpen(true),
+		onBlur: () => setIsOpen(false),
+		"aria-describedby": `${id}-popover`
+	} : {};
+	const highestScore = popover ? learningOutcomeDetails?.highestScore : void 0;
+	const percentCompleteValue = percentComplete ?? 0;
+	const progress = progressState(percentCompleteValue);
+	const isCompleted = progress === require_types.Progress.completed;
+	const isSmall = size === "small";
+	const hasLowLatestAssessment = Boolean(latestScore != null && latestScore < 70);
+	const showLowAssessmentDot = hasLowLatestAssessment && !isSmall;
+	const lowAssessmentLabel = hasLowLatestAssessment ? "Most recent assessment score is below 70%, needs review. " : "";
+	const defaultAriaLabel = `${require_LearningOutcomeLevelBadge.learningOutcomeLabels[level]}: ${outcome} ${lowAssessmentLabel}Progress ${percentCompleteValue}% completed.`;
+	const evaluationValuesLabel = isOpen && (highestScore || latestScore) ? `Evaluation Values - ${highestScore ? `Highest assessment score ${highestScore}. ` : ""}${latestScore ? `Recent assessment score ${latestScore}.` : ""}` : "";
+	return /* @__PURE__ */ React.createElement(_codecademy_gamut.Anchor, {
+		"aria-label": `${defaultAriaLabel} ${evaluationValuesLabel}`,
+		variant: "interface",
+		onClick,
+		"data-testid": `learning-outcome-tile-${id}`,
+		...popoverProps
+	}, /* @__PURE__ */ React.createElement(require_Tile.Tile, {
+		hover,
+		progress,
+		size
+	}, isCompleted ? /* @__PURE__ */ React.createElement(_codecademy_gamut_icons.SmallCheckIcon, {
+		size: isSmall ? 12 : 16,
+		textColor: "background-contrast"
+	}) : /* @__PURE__ */ React.createElement(ProgressText, {
+		progress,
+		isSmall
+	}, `${percentCompleteValue}%`), showLowAssessmentDot && /* @__PURE__ */ React.createElement(require_LearningOutcomeLowAssessmentBadge.LearningOutcomeLowAssessmentDot, {
+		position: "absolute",
+		top: "-20%",
+		right: "-20%",
+		hasBorder: true
+	})), isOpen && /* @__PURE__ */ React.createElement(require_index$1.LearningOutcomePopover, {
+		activeElRef,
+		horizontalOffset: isSmall && isCompleted ? 159 : isSmall ? 153 : 150,
+		id: `${id}-popover`,
+		isOpen,
+		learningOutcomeDetails
+	}));
+};
+
+//#endregion
+exports.LearningOutcomeTile = LearningOutcomeTile;
+exports.progressState = progressState;
+//# sourceMappingURL=index.cjs.map

package/dist/LearningOutcomeTile/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Anchor","Text","SmallCheckIcon","variant","styled","useEffect","useRef","useState","learningOutcomeLabels","LearningOutcomeLowAssessmentDot","LearningOutcomePopover","Tile","Progress","ProgressText","props","prop","base","fontSize","variants","notStarted","color","fontWeight","inProgress","isSmall","completed","progressState","percentComplete","LearningOutcomeTile","learningOutcomeDetails","onClick","hover","popover","size","id","level","outcome","latestScore","isOpen","setIsOpen","activeElRef","current","focus","popoverProps","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","highestScore","undefined","percentCompleteValue","progress","isCompleted","hasLowLatestAssessment","Boolean","showLowAssessmentDot","lowAssessmentLabel","defaultAriaLabel","evaluationValuesLabel","aria-label","data-testid","textColor","position","top","right","hasBorder","horizontalOffset"],"sources":["../../src/LearningOutcomeTile/index.tsx"],"sourcesContent":["import { Anchor, Text } from '@codecademy/gamut';\nimport { SmallCheckIcon } from '@codecademy/gamut-icons';\nimport { variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n  learningOutcomeLabels,\n  LearningOutcomeLowAssessmentDot,\n} from '../LearningOutcomeBadges';\nimport { LearningOutcomePopover } from '../LearningOutcomePopover';\nimport { Tile } from './Tile';\nimport {\n  LearningOutcomePopoverDetailsProps,\n  LearningOutcomeTileProps,\n  Progress,\n} from './types';\n\nconst ProgressText = styled(Text)<{ progress: Progress; isSmall: boolean }>(\n  (props) => ({\n    ...variant({\n      prop: 'progress',\n      base: {\n        fontSize: 14,\n      },\n      variants: {\n        [Progress.notStarted]: {\n          color: 'text-secondary',\n          fontWeight: 400,\n        },\n        [Progress.inProgress]: {\n          color: 'primary',\n          fontWeight: props.isSmall ? 400 : 700,\n        },\n        [Progress.completed]: {},\n      },\n    })(props),\n  })\n);\n\nexport const progressState = (percentComplete: number): Progress => {\n  if (percentComplete === 0) {\n    return Progress.notStarted;\n  }\n  if (percentComplete > 0 && percentComplete < 100) {\n    return Progress.inProgress;\n  }\n  return Progress.completed;\n};\n\nexport const LearningOutcomeTile: React.FC<LearningOutcomeTileProps> = ({\n  learningOutcomeDetails,\n  onClick,\n  hover = false,\n  popover = false,\n  size = 'normal',\n}) => {\n  const { id, level, outcome, latestScore, percentComplete } =\n    learningOutcomeDetails;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const activeElRef = useRef<HTMLAnchorElement>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      // If the popover is open, we want to focus the active element\n      activeElRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  const popoverProps =\n    popover && hover\n      ? {\n          ref: activeElRef,\n          onMouseEnter: () => setIsOpen(true),\n          onMouseLeave: () => setIsOpen(false),\n          onFocus: () => setIsOpen(true), // For keyboard users\n          onBlur: () => setIsOpen(false), // Close on blur\n          'aria-describedby': `${id}-popover`,\n        }\n      : {};\n\n  const highestScore = popover\n    ? (learningOutcomeDetails as LearningOutcomePopoverDetailsProps)\n        ?.highestScore\n    : undefined;\n\n  const percentCompleteValue = percentComplete ?? 0;\n  const progress = progressState(percentCompleteValue);\n\n  const isCompleted = progress === Progress.completed;\n  const isSmall = size === 'small';\n  const hasLowLatestAssessment = Boolean(\n    latestScore != null && latestScore < 70\n  );\n  const showLowAssessmentDot = hasLowLatestAssessment && !isSmall;\n\n  const lowAssessmentLabel = hasLowLatestAssessment\n    ? 'Most recent assessment score is below 70%, needs review. '\n    : '';\n  const defaultAriaLabel = `${learningOutcomeLabels[level]}: ${outcome} ${lowAssessmentLabel}Progress ${percentCompleteValue}% completed.`;\n  const evaluationValuesLabel =\n    isOpen && (highestScore || latestScore)\n      ? `Evaluation Values - ${\n          highestScore ? `Highest assessment score ${highestScore}. ` : ''\n        }${latestScore ? `Recent assessment score ${latestScore}.` : ''}`\n      : '';\n\n  return (\n    <Anchor\n      aria-label={`${defaultAriaLabel} ${evaluationValuesLabel}`}\n      variant=\"interface\"\n      onClick={onClick}\n      data-testid={`learning-outcome-tile-${id}`}\n      {...popoverProps}\n    >\n      <Tile hover={hover} progress={progress} size={size}>\n        {isCompleted ? (\n          <SmallCheckIcon\n            size={isSmall ? 12 : 16}\n            textColor=\"background-contrast\"\n          />\n        ) : (\n          <ProgressText progress={progress} isSmall={isSmall}>\n            {`${percentCompleteValue}%`}\n          </ProgressText>\n        )}\n        {showLowAssessmentDot && (\n          <LearningOutcomeLowAssessmentDot\n            position=\"absolute\"\n            top=\"-20%\"\n            right=\"-20%\"\n            hasBorder\n          />\n        )}\n      </Tile>\n      {isOpen && (\n        <LearningOutcomePopover\n          activeElRef={activeElRef}\n          horizontalOffset={isSmall && isCompleted ? 159 : isSmall ? 153 : 150}\n          id={`${id}-popover`}\n          isOpen={isOpen}\n          learningOutcomeDetails={\n            learningOutcomeDetails as LearningOutcomePopoverDetailsProps\n          }\n        />\n      )}\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAMa,eAAeT,6CAAOH,wBAAAA;;;IACzBa,WAAW,EACV,yCAAW;CACTC,MAAM;CACNC,MAAM,EACJC,UAAU,IACZ;CACAC,UAAU;GACPN,uBAASO,aAAa;GACrBC,OAAO;GACPC,YAAY;GACd;GACCT,uBAASU,aAAa;GACrBF,OAAO;GACPC,YAAYP,MAAMS,UAAU,MAAM;GACpC;GACCX,uBAASY,YAAY,EAAC;EACzB;CACF,CAAA,CAAGV,MAAM,EACX,GAAA,03MAAA;AAGF,MAAaW,iBAAiBC,oBAAAA;AAC5B,KAAIA,oBAAoB,EACtB,QAAOd,uBAASO;AAElB,KAAIO,kBAAkB,KAAKA,kBAAkB,IAC3C,QAAOd,uBAASU;AAElB,QAAOV,uBAASY;;AAGlB,MAAaG,uBAA2D,EACtEC,wBACAC,SACAC,QAAQ,OACRC,UAAU,OACVC,OAAO,eACR;CACC,MAAM,EAAEC,IAAIC,OAAOC,SAASC,aAAaV,oBACvCE;CAEF,MAAM,CAACS,QAAQC,iCAAsB,MAAA;CACrC,MAAMC,gCAAwC,KAAA;AAE9ClC,4BAAU;AACR,MAAIgC,OAEFE,aAAYC,SAASC,OAAAA;IAEtB,CAACJ,OAAO,CAAA;CAEX,MAAMK,eACJX,WAAWD,QACP;EACEa,KAAKJ;EACLK,oBAAoBN,UAAU,KAAA;EAC9BO,oBAAoBP,UAAU,MAAA;EAC9BQ,eAAeR,UAAU,KAAA;EACzBS,cAAcT,UAAU,MAAA;EACxB,oBAAoB,GAAGL,GAAG;EAC5B,GACA,EAAC;CAEP,MAAMe,eAAejB,UAChBH,wBACGoB,eACJC;CAEJ,MAAMC,uBAAuBxB,mBAAmB;CAChD,MAAMyB,WAAW1B,cAAcyB,qBAAAA;CAE/B,MAAME,cAAcD,aAAavC,uBAASY;CAC1C,MAAMD,UAAUS,SAAS;CACzB,MAAMqB,yBAAyBC,QAC7BlB,eAAe,QAAQA,cAAc,GAAA;CAEvC,MAAMmB,uBAAuBF,0BAA0B,CAAC9B;CAExD,MAAMiC,qBAAqBH,yBACvB,8DACA;CACJ,MAAMI,mBAAmB,GAAGjD,wDAAsB0B,OAAO,IAAIC,QAAQ,GAAGqB,mBAAmB,WAAWN,qBAAqB;CAC3H,MAAMQ,wBACJrB,WAAWW,gBAAgBZ,eACvB,uBACEY,eAAe,4BAA4BA,aAAa,MAAM,KAC7DZ,cAAc,2BAA2BA,YAAY,KAAK,OAC7D;AAEN,QACE,sBAAA,cAACpC,0BAAAA;EACC2D,cAAY,GAAGF,iBAAiB,GAAGC;EACnCvD,SAAQ;EACC0B;EACT+B,eAAa,yBAAyB3B;EACrC,GAAGS;IAEJ,sBAAA,cAAC/B,mBAAAA;EAAYmB;EAAiBqB;EAAgBnB;IAC3CoB,cACC,sBAAA,cAAClD,wCAAAA;EACC8B,MAAMT,UAAU,KAAK;EACrBsC,WAAU;MAGZ,sBAAA,cAAChD,cAAAA;EAAuBsC;EAAmB5B;IACxC,GAAG2B,qBAAqB,GAAE,EAG9BK,wBACC,sBAAA,cAAC9C,2EAAAA;EACCqD,UAAS;EACTC,KAAI;EACJC,OAAM;EACNC,WAAAA;MAIL5B,UACC,sBAAA,cAAC3B,wCAAAA;EACc6B;EACb2B,kBAAkB3C,WAAW6B,cAAc,MAAM7B,UAAU,MAAM;EACjEU,IAAI,GAAGA,GAAG;EACFI;EAENT"}

package/dist/LearningOutcomeTile/index.d.cts

@@ -0,0 +1,8 @@
+import { LearningOutcomeTileProps, Progress } from "./types.cjs";
+
+//#region src/LearningOutcomeTile/index.d.ts
+declare const progressState: (percentComplete: number) => Progress;
+declare const LearningOutcomeTile: React.FC<LearningOutcomeTileProps>;
+//#endregion
+export { LearningOutcomeTile, progressState };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/LearningOutcomeTile/index.tsx"],"mappings":";;;cAwCa,aAAA,GAAiB,eAAA,aAA0B,QAAA;AAAA,cAU3C,mBAAA,EAAqB,KAAA,CAAM,EAAA,CAAG,wBAAA"}

package/dist/LearningOutcomeTile/index.d.ts

@@ -1,3 +1,8 @@
-import { LearningOutcomeTileProps, Progress } from './types';
-export declare const progressState: (percentComplete: number) => Progress;
-export declare const LearningOutcomeTile: React.FC<LearningOutcomeTileProps>;
+import { LearningOutcomeTileProps, Progress } from "./types.js";
+
+//#region src/LearningOutcomeTile/index.d.ts
+declare const progressState: (percentComplete: number) => Progress;
+declare const LearningOutcomeTile: React.FC<LearningOutcomeTileProps>;
+//#endregion
+export { LearningOutcomeTile, progressState };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/LearningOutcomeTile/index.tsx"],"mappings":";;;cAwCa,aAAA,GAAiB,eAAA,aAA0B,QAAA;AAAA,cAU3C,mBAAA,EAAqB,KAAA,CAAM,EAAA,CAAG,wBAAA"}