@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/LearningOutcomeFlyout/types.d.ts

@@ -1,67 +1,63 @@
-import { LearningOutcomeLevels } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
-import "../LearningOutcomeBadges/index.js";
-
-//#region src/LearningOutcomeFlyout/types.d.ts
-declare enum SkillClassification {
-  Language = "language",
-  Subject = "subject",
+import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
+export declare enum SkillClassification {
+    Language = "language",
+    Subject = "subject"
 }
-interface LearningOutcomeSkill {
-  id: string;
-  slug: string;
-  title?: string | null;
-  classification?: SkillClassification | null;
+export interface LearningOutcomeSkill {
+    id: string;
+    slug: string;
+    title?: string | null;
+    classification?: SkillClassification | null;
 }
-interface ParentLearningOutcome {
-  id: string;
-  outcome: string;
-  level: number | null | undefined;
+export interface ParentLearningOutcome {
+    id: string;
+    outcome: string;
+    level: number | null | undefined;
 }
-type BestMatchContainerType = {
-  urlPath: string | null;
-  title?: string | null;
+export type BestMatchContainerType = {
+    urlPath: string | null;
+    title?: string | null;
 };
-interface BestMatchContainerResponseType {
-  data: BestMatchContainerType | null;
-  loading: boolean;
-  error: boolean;
+export 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;
+    level: LearningOutcomeLevels;
     outcome: string;
-    percentComplete?: number | undefined | null;
-    progress?: {
-      latestScore?: number | null;
-      covered: boolean | undefined | null;
-      coveredAt?: string | null;
-      highestScore?: number | null;
-    };
-  }[];
+    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;
+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;
 }
-//#endregion
-export { LearningOutcomeFlyoutProps, LearningOutcomeSkill };
+export {};

package/dist/LearningOutcomeFlyout/types.js

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

package/dist/LearningOutcomePopover/index.d.ts

@@ -1,13 +1,10 @@
-import { LearningOutcomePopoverDetailsProps } from "../LearningOutcomeTile/types.js";
-
-//#region src/LearningOutcomePopover/index.d.ts
+import { LearningOutcomePopoverDetailsProps } from '../LearningOutcomeTile/types';
 interface LearningOutcomePopoverProps {
-  activeElRef: React.RefObject<HTMLDivElement> | React.RefObject<HTMLAnchorElement>;
-  id: string;
-  isOpen: boolean;
-  learningOutcomeDetails: LearningOutcomePopoverDetailsProps;
-  horizontalOffset?: number;
+    activeElRef: React.RefObject<HTMLDivElement> | React.RefObject<HTMLAnchorElement>;
+    id: string;
+    isOpen: boolean;
+    learningOutcomeDetails: LearningOutcomePopoverDetailsProps;
+    horizontalOffset?: number;
 }
-declare const LearningOutcomePopover: React.FC<LearningOutcomePopoverProps>;
-//#endregion
-export { LearningOutcomePopover };
+export declare const LearningOutcomePopover: React.FC<LearningOutcomePopoverProps>;
+export {};

package/dist/LearningOutcomePopover/index.js

@@ -1,116 +1,125 @@
-import { LearningOutcomeLevelBadge } from "../LearningOutcomeBadges/LearningOutcomeLevelBadge.js";
-import { LearningOutcomeLowAssessmentBadge } from "../LearningOutcomeBadges/LearningOutcomeLowAssessmentBadge.js";
-import { FlexBox, Popover, Text } from "@codecademy/gamut";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { SmallCheckIcon } from "@codecademy/gamut-icons";
-
-//#region src/LearningOutcomePopover/index.tsx
+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";
 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 : void 0,
-	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: "-"
-	})]
+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: "-"
+  })]
 });
-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,
-		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 }), 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
-				})] })]
-			})]
-		})
-	});
-};
-
-//#endregion
-export { LearningOutcomePopover };
+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
+          })]
+        })]
+      })]
+    })
+  });
+};

package/dist/LearningOutcomeTile/Tile.d.ts

@@ -0,0 +1,7 @@
+import { TileProps } from './types';
+export declare const Tile: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").FlexBoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+} & TileProps, {}, {}>;

package/dist/LearningOutcomeTile/Tile.js

@@ -1,66 +1,79 @@
-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
+import _styled from "@emotion/styled/base";
+import { FlexBox } from '@codecademy/gamut';
+import { variant } from '@codecademy/gamut-styles';
+import { Progress } from './types';
 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" : 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 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 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
+    }
+  }
 });
-const Tile = styled(FlexBox)((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)
-}));
-
-//#endregion
-export { Tile };
+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== */");

package/dist/LearningOutcomeTile/index.d.ts

@@ -1,7 +1,3 @@
-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 };
+import { LearningOutcomeTileProps, Progress } from './types';
+export declare const progressState: (percentComplete: number) => Progress;
+export declare const LearningOutcomeTile: React.FC<LearningOutcomeTileProps>;