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

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

@@ -0,0 +1,79 @@
+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'
+};
+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
+    }
+  }
+});
+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

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

package/dist/LearningOutcomeTile/index.js

@@ -0,0 +1,115 @@
+import _styled from "@emotion/styled/base";
+import { Anchor, Text } from '@codecademy/gamut';
+import { SmallCheckIcon } from '@codecademy/gamut-icons';
+import { variant } from '@codecademy/gamut-styles';
+import { useEffect, useRef, useState } from 'react';
+import { learningOutcomeLabels, LearningOutcomeLowAssessmentDot } from '../LearningOutcomeBadges';
+import { LearningOutcomePopover } from '../LearningOutcomePopover';
+import { Tile } from './Tile';
+import { Progress } from './types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ProgressText = /*#__PURE__*/_styled(Text, {
+  target: "ei97hfv0",
+  label: "ProgressText"
+})(props => ({
+  ...variant({
+    prop: 'progress',
+    base: {
+      fontSize: 14
+    },
+    variants: {
+      [Progress.notStarted]: {
+        color: 'text-secondary',
+        fontWeight: 400
+      },
+      [Progress.inProgress]: {
+        color: 'primary',
+        fontWeight: props.isSmall ? 400 : 700
+      },
+      [Progress.completed]: {}
+    }
+  })(props)
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVUaWxlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQnFCIiwiZmlsZSI6Ii4uLy4uL3NyYy9MZWFybmluZ091dGNvbWVUaWxlL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IFNtYWxsQ2hlY2tJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIGxlYXJuaW5nT3V0Y29tZUxhYmVscyxcbiAgTGVhcm5pbmdPdXRjb21lTG93QXNzZXNzbWVudERvdCxcbn0gZnJvbSAnLi4vTGVhcm5pbmdPdXRjb21lQmFkZ2VzJztcbmltcG9ydCB7IExlYXJuaW5nT3V0Y29tZVBvcG92ZXIgfSBmcm9tICcuLi9MZWFybmluZ091dGNvbWVQb3BvdmVyJztcbmltcG9ydCB7IFRpbGUgfSBmcm9tICcuL1RpbGUnO1xuaW1wb3J0IHtcbiAgTGVhcm5pbmdPdXRjb21lUG9wb3ZlckRldGFpbHNQcm9wcyxcbiAgTGVhcm5pbmdPdXRjb21lVGlsZVByb3BzLFxuICBQcm9ncmVzcyxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IFByb2dyZXNzVGV4dCA9IHN0eWxlZChUZXh0KTx7IHByb2dyZXNzOiBQcm9ncmVzczsgaXNTbWFsbDogYm9vbGVhbiB9PihcbiAgKHByb3BzKSA9PiAoe1xuICAgIC4uLnZhcmlhbnQoe1xuICAgICAgcHJvcDogJ3Byb2dyZXNzJyxcbiAgICAgIGJhc2U6IHtcbiAgICAgICAgZm9udFNpemU6IDE0LFxuICAgICAgfSxcbiAgICAgIHZhcmlhbnRzOiB7XG4gICAgICAgIFtQcm9ncmVzcy5ub3RTdGFydGVkXToge1xuICAgICAgICAgIGNvbG9yOiAndGV4dC1zZWNvbmRhcnknLFxuICAgICAgICAgIGZvbnRXZWlnaHQ6IDQwMCxcbiAgICAgICAgfSxcbiAgICAgICAgW1Byb2dyZXNzLmluUHJvZ3Jlc3NdOiB7XG4gICAgICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgICAgICBmb250V2VpZ2h0OiBwcm9wcy5pc1NtYWxsID8gNDAwIDogNzAwLFxuICAgICAgICB9LFxuICAgICAgICBbUHJvZ3Jlc3MuY29tcGxldGVkXToge30sXG4gICAgICB9LFxuICAgIH0pKHByb3BzKSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBwcm9ncmVzc1N0YXRlID0gKHBlcmNlbnRDb21wbGV0ZTogbnVtYmVyKTogUHJvZ3Jlc3MgPT4ge1xuICBpZiAocGVyY2VudENvbXBsZXRlID09PSAwKSB7XG4gICAgcmV0dXJuIFByb2dyZXNzLm5vdFN0YXJ0ZWQ7XG4gIH1cbiAgaWYgKHBlcmNlbnRDb21wbGV0ZSA+IDAgJiYgcGVyY2VudENvbXBsZXRlIDwgMTAwKSB7XG4gICAgcmV0dXJuIFByb2dyZXNzLmluUHJvZ3Jlc3M7XG4gIH1cbiAgcmV0dXJuIFByb2dyZXNzLmNvbXBsZXRlZDtcbn07XG5cbmV4cG9ydCBjb25zdCBMZWFybmluZ091dGNvbWVUaWxlOiBSZWFjdC5GQzxMZWFybmluZ091dGNvbWVUaWxlUHJvcHM+ID0gKHtcbiAgbGVhcm5pbmdPdXRjb21lRGV0YWlscyxcbiAgb25DbGljayxcbiAgaG92ZXIgPSBmYWxzZSxcbiAgcG9wb3ZlciA9IGZhbHNlLFxuICBzaXplID0gJ25vcm1hbCcsXG59KSA9PiB7XG4gIGNvbnN0IHsgaWQsIGxldmVsLCBvdXRjb21lLCBsYXRlc3RTY29yZSwgcGVyY2VudENvbXBsZXRlIH0gPVxuICAgIGxlYXJuaW5nT3V0Y29tZURldGFpbHM7XG5cbiAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgYWN0aXZlRWxSZWYgPSB1c2VSZWY8SFRNTEFuY2hvckVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgLy8gSWYgdGhlIHBvcG92ZXIgaXMgb3Blbiwgd2Ugd2FudCB0byBmb2N1cyB0aGUgYWN0aXZlIGVsZW1lbnRcbiAgICAgIGFjdGl2ZUVsUmVmLmN1cnJlbnQ/LmZvY3VzKCk7XG4gICAgfVxuICB9LCBbaXNPcGVuXSk7XG5cbiAgY29uc3QgcG9wb3ZlclByb3BzID1cbiAgICBwb3BvdmVyICYmIGhvdmVyXG4gICAgICA/IHtcbiAgICAgICAgICByZWY6IGFjdGl2ZUVsUmVmLFxuICAgICAgICAgIG9uTW91c2VFbnRlcjogKCkgPT4gc2V0SXNPcGVuKHRydWUpLFxuICAgICAgICAgIG9uTW91c2VMZWF2ZTogKCkgPT4gc2V0SXNPcGVuKGZhbHNlKSxcbiAgICAgICAgICBvbkZvY3VzOiAoKSA9PiBzZXRJc09wZW4odHJ1ZSksIC8vIEZvciBrZXlib2FyZCB1c2Vyc1xuICAgICAgICAgIG9uQmx1cjogKCkgPT4gc2V0SXNPcGVuKGZhbHNlKSwgLy8gQ2xvc2Ugb24gYmx1clxuICAgICAgICAgICdhcmlhLWRlc2NyaWJlZGJ5JzogYCR7aWR9LXBvcG92ZXJgLFxuICAgICAgICB9XG4gICAgICA6IHt9O1xuXG4gIGNvbnN0IGhpZ2hlc3RTY29yZSA9IHBvcG92ZXJcbiAgICA/IChsZWFybmluZ091dGNvbWVEZXRhaWxzIGFzIExlYXJuaW5nT3V0Y29tZVBvcG92ZXJEZXRhaWxzUHJvcHMpXG4gICAgICAgID8uaGlnaGVzdFNjb3JlXG4gICAgOiB1bmRlZmluZWQ7XG5cbiAgY29uc3QgcGVyY2VudENvbXBsZXRlVmFsdWUgPSBwZXJjZW50Q29tcGxldGUgPz8gMDtcbiAgY29uc3QgcHJvZ3Jlc3MgPSBwcm9ncmVzc1N0YXRlKHBlcmNlbnRDb21wbGV0ZVZhbHVlKTtcblxuICBjb25zdCBpc0NvbXBsZXRlZCA9IHByb2dyZXNzID09PSBQcm9ncmVzcy5jb21wbGV0ZWQ7XG4gIGNvbnN0IGlzU21hbGwgPSBzaXplID09PSAnc21hbGwnO1xuICBjb25zdCBoYXNMb3dMYXRlc3RBc3Nlc3NtZW50ID0gQm9vbGVhbihcbiAgICBsYXRlc3RTY29yZSAhPSBudWxsICYmIGxhdGVzdFNjb3JlIDwgNzBcbiAgKTtcbiAgY29uc3Qgc2hvd0xvd0Fzc2Vzc21lbnREb3QgPSBoYXNMb3dMYXRlc3RBc3Nlc3NtZW50ICYmICFpc1NtYWxsO1xuXG4gIGNvbnN0IGxvd0Fzc2Vzc21lbnRMYWJlbCA9IGhhc0xvd0xhdGVzdEFzc2Vzc21lbnRcbiAgICA/ICdNb3N0IHJlY2VudCBhc3Nlc3NtZW50IHNjb3JlIGlzIGJlbG93IDcwJSwgbmVlZHMgcmV2aWV3LiAnXG4gICAgOiAnJztcbiAgY29uc3QgZGVmYXVsdEFyaWFMYWJlbCA9IGAke2xlYXJuaW5nT3V0Y29tZUxhYmVsc1tsZXZlbF19OiAke291dGNvbWV9ICR7bG93QXNzZXNzbWVudExhYmVsfVByb2dyZXNzICR7cGVyY2VudENvbXBsZXRlVmFsdWV9JSBjb21wbGV0ZWQuYDtcbiAgY29uc3QgZXZhbHVhdGlvblZhbHVlc0xhYmVsID1cbiAgICBpc09wZW4gJiYgKGhpZ2hlc3RTY29yZSB8fCBsYXRlc3RTY29yZSlcbiAgICAgID8gYEV2YWx1YXRpb24gVmFsdWVzIC0gJHtcbiAgICAgICAgICBoaWdoZXN0U2NvcmUgPyBgSGlnaGVzdCBhc3Nlc3NtZW50IHNjb3JlICR7aGlnaGVzdFNjb3JlfS4gYCA6ICcnXG4gICAgICAgIH0ke2xhdGVzdFNjb3JlID8gYFJlY2VudCBhc3Nlc3NtZW50IHNjb3JlICR7bGF0ZXN0U2NvcmV9LmAgOiAnJ31gXG4gICAgICA6ICcnO1xuXG4gIHJldHVybiAoXG4gICAgPEFuY2hvclxuICAgICAgYXJpYS1sYWJlbD17YCR7ZGVmYXVsdEFyaWFMYWJlbH0gJHtldmFsdWF0aW9uVmFsdWVzTGFiZWx9YH1cbiAgICAgIHZhcmlhbnQ9XCJpbnRlcmZhY2VcIlxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIGRhdGEtdGVzdGlkPXtgbGVhcm5pbmctb3V0Y29tZS10aWxlLSR7aWR9YH1cbiAgICAgIHsuLi5wb3BvdmVyUHJvcHN9XG4gICAgPlxuICAgICAgPFRpbGUgaG92ZXI9e2hvdmVyfSBwcm9ncmVzcz17cHJvZ3Jlc3N9IHNpemU9e3NpemV9PlxuICAgICAgICB7aXNDb21wbGV0ZWQgPyAoXG4gICAgICAgICAgPFNtYWxsQ2hlY2tJY29uXG4gICAgICAgICAgICBzaXplPXtpc1NtYWxsID8gMTIgOiAxNn1cbiAgICAgICAgICAgIHRleHRDb2xvcj1cImJhY2tncm91bmQtY29udHJhc3RcIlxuICAgICAgICAgIC8+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPFByb2dyZXNzVGV4dCBwcm9ncmVzcz17cHJvZ3Jlc3N9IGlzU21hbGw9e2lzU21hbGx9PlxuICAgICAgICAgICAge2Ake3BlcmNlbnRDb21wbGV0ZVZhbHVlfSVgfVxuICAgICAgICAgIDwvUHJvZ3Jlc3NUZXh0PlxuICAgICAgICApfVxuICAgICAgICB7c2hvd0xvd0Fzc2Vzc21lbnREb3QgJiYgKFxuICAgICAgICAgIDxMZWFybmluZ091dGNvbWVMb3dBc3Nlc3NtZW50RG90XG4gICAgICAgICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgICAgICAgIHRvcD1cIi0yMCVcIlxuICAgICAgICAgICAgcmlnaHQ9XCItMjAlXCJcbiAgICAgICAgICAgIGhhc0JvcmRlclxuICAgICAgICAgIC8+XG4gICAgICAgICl9XG4gICAgICA8L1RpbGU+XG4gICAgICB7aXNPcGVuICYmIChcbiAgICAgICAgPExlYXJuaW5nT3V0Y29tZVBvcG92ZXJcbiAgICAgICAgICBhY3RpdmVFbFJlZj17YWN0aXZlRWxSZWZ9XG4gICAgICAgICAgaG9yaXpvbnRhbE9mZnNldD17aXNTbWFsbCAmJiBpc0NvbXBsZXRlZCA/IDE1OSA6IGlzU21hbGwgPyAxNTMgOiAxNTB9XG4gICAgICAgICAgaWQ9e2Ake2lkfS1wb3BvdmVyYH1cbiAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICBsZWFybmluZ091dGNvbWVEZXRhaWxzPXtcbiAgICAgICAgICAgIGxlYXJuaW5nT3V0Y29tZURldGFpbHMgYXMgTGVhcm5pbmdPdXRjb21lUG9wb3ZlckRldGFpbHNQcm9wc1xuICAgICAgICAgIH1cbiAgICAgICAgLz5cbiAgICAgICl9XG4gICAgPC9BbmNob3I+XG4gICk7XG59O1xuIl19 */");
+export const progressState = percentComplete => {
+  if (percentComplete === 0) {
+    return Progress.notStarted;
+  }
+  if (percentComplete > 0 && percentComplete < 100) {
+    return Progress.inProgress;
+  }
+  return Progress.completed;
+};
+export const LearningOutcomeTile = ({
+  learningOutcomeDetails,
+  onClick,
+  hover = false,
+  popover = false,
+  size = 'normal'
+}) => {
+  const {
+    id,
+    level,
+    outcome,
+    latestScore,
+    percentComplete
+  } = learningOutcomeDetails;
+  const [isOpen, setIsOpen] = useState(false);
+  const activeElRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      // If the popover is open, we want to focus the active element
+      activeElRef.current?.focus();
+    }
+  }, [isOpen]);
+  const popoverProps = popover && hover ? {
+    ref: activeElRef,
+    onMouseEnter: () => setIsOpen(true),
+    onMouseLeave: () => setIsOpen(false),
+    onFocus: () => setIsOpen(true),
+    // For keyboard users
+    onBlur: () => setIsOpen(false),
+    // Close on blur
+    'aria-describedby': `${id}-popover`
+  } : {};
+  const highestScore = popover ? learningOutcomeDetails?.highestScore : undefined;
+  const percentCompleteValue = percentComplete ?? 0;
+  const progress = progressState(percentCompleteValue);
+  const isCompleted = progress === 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 = `${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__*/_jsxs(Anchor, {
+    "aria-label": `${defaultAriaLabel} ${evaluationValuesLabel}`,
+    variant: "interface",
+    onClick: onClick,
+    "data-testid": `learning-outcome-tile-${id}`,
+    ...popoverProps,
+    children: [/*#__PURE__*/_jsxs(Tile, {
+      hover: hover,
+      progress: progress,
+      size: size,
+      children: [isCompleted ? /*#__PURE__*/_jsx(SmallCheckIcon, {
+        size: isSmall ? 12 : 16,
+        textColor: "background-contrast"
+      }) : /*#__PURE__*/_jsx(ProgressText, {
+        progress: progress,
+        isSmall: isSmall,
+        children: `${percentCompleteValue}%`
+      }), showLowAssessmentDot && /*#__PURE__*/_jsx(LearningOutcomeLowAssessmentDot, {
+        position: "absolute",
+        top: "-20%",
+        right: "-20%",
+        hasBorder: true
+      })]
+    }), isOpen && /*#__PURE__*/_jsx(LearningOutcomePopover, {
+      activeElRef: activeElRef,
+      horizontalOffset: isSmall && isCompleted ? 159 : isSmall ? 153 : 150,
+      id: `${id}-popover`,
+      isOpen: isOpen,
+      learningOutcomeDetails: learningOutcomeDetails
+    })]
+  });
+};

package/dist/LearningOutcomeTile/types.d.ts

@@ -0,0 +1,47 @@
+import { LearningOutcomeLevels } from '../LearningOutcomeBadges';
+export declare enum Progress {
+    notStarted = "notStarted",
+    inProgress = "inProgress",
+    completed = "completed"
+}
+export type SizeType = 'small' | 'normal';
+export interface TileProps {
+    hover: boolean;
+    progress: Progress;
+    size: SizeType;
+}
+interface LearningOutcomeTileDetailsProps {
+    id: string;
+    level: LearningOutcomeLevels;
+    outcome: string;
+    percentComplete: number | undefined | null;
+    latestScore?: number | undefined | null;
+}
+export interface LearningOutcomePopoverDetailsProps {
+    id: string;
+    level: LearningOutcomeLevels;
+    outcome: string;
+    percentComplete: number | undefined | null;
+    latestScore?: number | undefined | null;
+    highestScore?: number | undefined | null;
+}
+interface WithHoverAndWithPopover {
+    learningOutcomeDetails: LearningOutcomePopoverDetailsProps;
+    hover: true;
+    popover: true;
+}
+interface WithHoverAndWithoutPopover {
+    learningOutcomeDetails: LearningOutcomeTileDetailsProps;
+    hover: true;
+    popover: false;
+}
+interface WithoutHoverAndWithoutPopover {
+    learningOutcomeDetails: LearningOutcomeTileDetailsProps;
+    hover?: false;
+    popover?: false;
+}
+export type LearningOutcomeTileProps = {
+    onClick?: () => void;
+    size?: SizeType;
+} & (WithHoverAndWithPopover | WithHoverAndWithoutPopover | WithoutHoverAndWithoutPopover);
+export {};

package/dist/LearningOutcomeTile/types.js

@@ -0,0 +1,11 @@
+export let Progress = /*#__PURE__*/function (Progress) {
+  Progress["notStarted"] = "notStarted";
+  Progress["inProgress"] = "inProgress";
+  Progress["completed"] = "completed";
+  return Progress;
+}({});
+
+/* The following interfaces define the props for the LearningOutcomeTile component based on different states of hover and popover.
+When hover is true, popover prop is required (either true or false).
+When hover is false, popover prop is optional and defaults to false.
+*/

package/dist/ListSection/index.d.ts

@@ -0,0 +1,21 @@
+import { WithChildrenProp } from '@codecademy/gamut';
+import * as React from 'react';
+import { SectionButton } from '..';
+export interface ListSectionProps extends WithChildrenProp {
+    title: string;
+    headerButton?: SectionButton;
+    headerSecondaryButton?: SectionButton;
+    /**
+     * Number of items to be initally displayed
+     *
+     * @remarks
+     * If the initial display amount matches the number of list items, Show All button will not appear.
+     */
+    initialDisplayAmount?: number;
+    /**
+     * Optional callback function that will be called when the user clicks the "Show All" / "Show less" button.
+     * This is usually used for things like metrics tracking.
+     */
+    onShowAllOrLessClick?: (showAll: boolean) => void;
+}
+export declare const ListSection: React.FC<ListSectionProps>;

package/dist/ListSection/index.js

@@ -0,0 +1,64 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { theme } from '@codecademy/gamut-styles';
+import { Children, useState } from 'react';
+import * as React from 'react';
+import { PageSection } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+const UnstyledUnorderedList = /*#__PURE__*/_styled("ul", {
+  target: "e1rp91k11",
+  label: "UnstyledUnorderedList"
+})(process.env.NODE_ENV === "production" ? {
+  name: "v5al3",
+  styles: "list-style:none;padding:0;margin:0"
+} : {
+  name: "v5al3",
+  styles: "list-style:none;padding:0;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MaXN0U2VjdGlvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkJ1QyIsImZpbGUiOiIuLi8uLi9zcmMvTGlzdFNlY3Rpb24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENoaWxkcmVuLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgUGFnZVNlY3Rpb24sIFNlY3Rpb25CdXR0b24gfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGlzdFNlY3Rpb25Qcm9wcyBleHRlbmRzIFdpdGhDaGlsZHJlblByb3Age1xuICB0aXRsZTogc3RyaW5nO1xuICBoZWFkZXJCdXR0b24/OiBTZWN0aW9uQnV0dG9uO1xuICBoZWFkZXJTZWNvbmRhcnlCdXR0b24/OiBTZWN0aW9uQnV0dG9uO1xuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHRvIGJlIGluaXRhbGx5IGRpc3BsYXllZFxuICAgKlxuICAgKiBAcmVtYXJrc1xuICAgKiBJZiB0aGUgaW5pdGlhbCBkaXNwbGF5IGFtb3VudCBtYXRjaGVzIHRoZSBudW1iZXIgb2YgbGlzdCBpdGVtcywgU2hvdyBBbGwgYnV0dG9uIHdpbGwgbm90IGFwcGVhci5cbiAgICovXG4gIGluaXRpYWxEaXNwbGF5QW1vdW50PzogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBPcHRpb25hbCBjYWxsYmFjayBmdW5jdGlvbiB0aGF0IHdpbGwgYmUgY2FsbGVkIHdoZW4gdGhlIHVzZXIgY2xpY2tzIHRoZSBcIlNob3cgQWxsXCIgLyBcIlNob3cgbGVzc1wiIGJ1dHRvbi5cbiAgICogVGhpcyBpcyB1c3VhbGx5IHVzZWQgZm9yIHRoaW5ncyBsaWtlIG1ldHJpY3MgdHJhY2tpbmcuXG4gICAqL1xuICBvblNob3dBbGxPckxlc3NDbGljaz86IChzaG93QWxsOiBib29sZWFuKSA9PiB2b2lkO1xufVxuXG5jb25zdCBVbnN0eWxlZFVub3JkZXJlZExpc3QgPSBzdHlsZWQudWxgXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMDtcbmA7XG5cbmNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkLmxpYFxuICAmOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgIG1hcmdpbi1ib3R0b206ICR7dGhlbWUuc3BhY2luZ1syNF19O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgTGlzdFNlY3Rpb246IFJlYWN0LkZDPExpc3RTZWN0aW9uUHJvcHM+ID0gKHtcbiAgdGl0bGUsXG4gIGhlYWRlckJ1dHRvbixcbiAgaGVhZGVyU2Vjb25kYXJ5QnV0dG9uLFxuICBpbml0aWFsRGlzcGxheUFtb3VudCA9IDMsXG4gIG9uU2hvd0FsbE9yTGVzc0NsaWNrLFxuICBjaGlsZHJlbixcbn0pID0+IHtcbiAgY29uc3QgW3Nob3dBbGwsIHNldFNob3dBbGxdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGhhbmRsZVNob3dBbGwgPSAoKSA9PiB7XG4gICAgb25TaG93QWxsT3JMZXNzQ2xpY2s/Lighc2hvd0FsbCk7XG4gICAgc2V0U2hvd0FsbCghc2hvd0FsbCk7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyTGlzdEl0ZW1zID0gKCkgPT4ge1xuICAgIGNvbnN0IGxpc3RJdGVtcyA9IENoaWxkcmVuLm1hcChcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgKGNoaWxkKSA9PiAhIWNoaWxkICYmIDxTdHlsZWRMaXN0SXRlbT57Y2hpbGR9PC9TdHlsZWRMaXN0SXRlbT5cbiAgICApPy5maWx0ZXIoQm9vbGVhbik7XG5cbiAgICBpZiAoIWxpc3RJdGVtcykgcmV0dXJuIG51bGw7XG4gICAgaWYgKHNob3dBbGwpIHJldHVybiBsaXN0SXRlbXM7XG4gICAgcmV0dXJuIGxpc3RJdGVtcy5zbGljZSgwLCBpbml0aWFsRGlzcGxheUFtb3VudCk7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyRm9vdGVyQnV0dG9uID0gKCkgPT4ge1xuICAgIGlmIChDaGlsZHJlbi50b0FycmF5KGNoaWxkcmVuKS5sZW5ndGggPD0gaW5pdGlhbERpc3BsYXlBbW91bnQpIHJldHVybiBudWxsO1xuICAgIGNvbnN0IGJ1dHRvblRleHQgPSBgU2hvdyAke3Nob3dBbGwgPyAnTGVzcycgOiAnQWxsJ31gO1xuICAgIHJldHVybiB7XG4gICAgICB0ZXh0OiBidXR0b25UZXh0LFxuICAgICAgb25DbGljazogaGFuZGxlU2hvd0FsbCxcbiAgICAgICdhcmlhLWxhYmVsJzogYCR7YnV0dG9uVGV4dH0sICR7dGl0bGV9YCxcbiAgICB9O1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFBhZ2VTZWN0aW9uXG4gICAgICB0aXRsZT17dGl0bGV9XG4gICAgICBmb290ZXJCdXR0b249e3JlbmRlckZvb3RlckJ1dHRvbigpfVxuICAgICAgaGVhZGVyQnV0dG9uPXtoZWFkZXJCdXR0b259XG4gICAgICBoZWFkZXJTZWNvbmRhcnlCdXR0b249e2hlYWRlclNlY29uZGFyeUJ1dHRvbn1cbiAgICA+XG4gICAgICA8VW5zdHlsZWRVbm9yZGVyZWRMaXN0IGFyaWEtbGFiZWw9e3RpdGxlfSBhcmlhLWxpdmU9XCJwb2xpdGVcIj5cbiAgICAgICAge3JlbmRlckxpc3RJdGVtcygpfVxuICAgICAgPC9VbnN0eWxlZFVub3JkZXJlZExpc3Q+XG4gICAgPC9QYWdlU2VjdGlvbj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledListItem = /*#__PURE__*/_styled("li", {
+  target: "e1rp91k10",
+  label: "StyledListItem"
+})("&:not(:last-child){margin-bottom:", theme.spacing[24], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MaXN0U2VjdGlvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNnQyIsImZpbGUiOiIuLi8uLi9zcmMvTGlzdFNlY3Rpb24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENoaWxkcmVuLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgUGFnZVNlY3Rpb24sIFNlY3Rpb25CdXR0b24gfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGlzdFNlY3Rpb25Qcm9wcyBleHRlbmRzIFdpdGhDaGlsZHJlblByb3Age1xuICB0aXRsZTogc3RyaW5nO1xuICBoZWFkZXJCdXR0b24/OiBTZWN0aW9uQnV0dG9uO1xuICBoZWFkZXJTZWNvbmRhcnlCdXR0b24/OiBTZWN0aW9uQnV0dG9uO1xuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHRvIGJlIGluaXRhbGx5IGRpc3BsYXllZFxuICAgKlxuICAgKiBAcmVtYXJrc1xuICAgKiBJZiB0aGUgaW5pdGlhbCBkaXNwbGF5IGFtb3VudCBtYXRjaGVzIHRoZSBudW1iZXIgb2YgbGlzdCBpdGVtcywgU2hvdyBBbGwgYnV0dG9uIHdpbGwgbm90IGFwcGVhci5cbiAgICovXG4gIGluaXRpYWxEaXNwbGF5QW1vdW50PzogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBPcHRpb25hbCBjYWxsYmFjayBmdW5jdGlvbiB0aGF0IHdpbGwgYmUgY2FsbGVkIHdoZW4gdGhlIHVzZXIgY2xpY2tzIHRoZSBcIlNob3cgQWxsXCIgLyBcIlNob3cgbGVzc1wiIGJ1dHRvbi5cbiAgICogVGhpcyBpcyB1c3VhbGx5IHVzZWQgZm9yIHRoaW5ncyBsaWtlIG1ldHJpY3MgdHJhY2tpbmcuXG4gICAqL1xuICBvblNob3dBbGxPckxlc3NDbGljaz86IChzaG93QWxsOiBib29sZWFuKSA9PiB2b2lkO1xufVxuXG5jb25zdCBVbnN0eWxlZFVub3JkZXJlZExpc3QgPSBzdHlsZWQudWxgXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMDtcbmA7XG5cbmNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkLmxpYFxuICAmOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgIG1hcmdpbi1ib3R0b206ICR7dGhlbWUuc3BhY2luZ1syNF19O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgTGlzdFNlY3Rpb246IFJlYWN0LkZDPExpc3RTZWN0aW9uUHJvcHM+ID0gKHtcbiAgdGl0bGUsXG4gIGhlYWRlckJ1dHRvbixcbiAgaGVhZGVyU2Vjb25kYXJ5QnV0dG9uLFxuICBpbml0aWFsRGlzcGxheUFtb3VudCA9IDMsXG4gIG9uU2hvd0FsbE9yTGVzc0NsaWNrLFxuICBjaGlsZHJlbixcbn0pID0+IHtcbiAgY29uc3QgW3Nob3dBbGwsIHNldFNob3dBbGxdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGhhbmRsZVNob3dBbGwgPSAoKSA9PiB7XG4gICAgb25TaG93QWxsT3JMZXNzQ2xpY2s/Lighc2hvd0FsbCk7XG4gICAgc2V0U2hvd0FsbCghc2hvd0FsbCk7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyTGlzdEl0ZW1zID0gKCkgPT4ge1xuICAgIGNvbnN0IGxpc3RJdGVtcyA9IENoaWxkcmVuLm1hcChcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgKGNoaWxkKSA9PiAhIWNoaWxkICYmIDxTdHlsZWRMaXN0SXRlbT57Y2hpbGR9PC9TdHlsZWRMaXN0SXRlbT5cbiAgICApPy5maWx0ZXIoQm9vbGVhbik7XG5cbiAgICBpZiAoIWxpc3RJdGVtcykgcmV0dXJuIG51bGw7XG4gICAgaWYgKHNob3dBbGwpIHJldHVybiBsaXN0SXRlbXM7XG4gICAgcmV0dXJuIGxpc3RJdGVtcy5zbGljZSgwLCBpbml0aWFsRGlzcGxheUFtb3VudCk7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyRm9vdGVyQnV0dG9uID0gKCkgPT4ge1xuICAgIGlmIChDaGlsZHJlbi50b0FycmF5KGNoaWxkcmVuKS5sZW5ndGggPD0gaW5pdGlhbERpc3BsYXlBbW91bnQpIHJldHVybiBudWxsO1xuICAgIGNvbnN0IGJ1dHRvblRleHQgPSBgU2hvdyAke3Nob3dBbGwgPyAnTGVzcycgOiAnQWxsJ31gO1xuICAgIHJldHVybiB7XG4gICAgICB0ZXh0OiBidXR0b25UZXh0LFxuICAgICAgb25DbGljazogaGFuZGxlU2hvd0FsbCxcbiAgICAgICdhcmlhLWxhYmVsJzogYCR7YnV0dG9uVGV4dH0sICR7dGl0bGV9YCxcbiAgICB9O1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFBhZ2VTZWN0aW9uXG4gICAgICB0aXRsZT17dGl0bGV9XG4gICAgICBmb290ZXJCdXR0b249e3JlbmRlckZvb3RlckJ1dHRvbigpfVxuICAgICAgaGVhZGVyQnV0dG9uPXtoZWFkZXJCdXR0b259XG4gICAgICBoZWFkZXJTZWNvbmRhcnlCdXR0b249e2hlYWRlclNlY29uZGFyeUJ1dHRvbn1cbiAgICA+XG4gICAgICA8VW5zdHlsZWRVbm9yZGVyZWRMaXN0IGFyaWEtbGFiZWw9e3RpdGxlfSBhcmlhLWxpdmU9XCJwb2xpdGVcIj5cbiAgICAgICAge3JlbmRlckxpc3RJdGVtcygpfVxuICAgICAgPC9VbnN0eWxlZFVub3JkZXJlZExpc3Q+XG4gICAgPC9QYWdlU2VjdGlvbj5cbiAgKTtcbn07XG4iXX0= */"));
+export const ListSection = ({
+  title,
+  headerButton,
+  headerSecondaryButton,
+  initialDisplayAmount = 3,
+  onShowAllOrLessClick,
+  children
+}) => {
+  const [showAll, setShowAll] = useState(false);
+  const handleShowAll = () => {
+    onShowAllOrLessClick?.(!showAll);
+    setShowAll(!showAll);
+  };
+  const renderListItems = () => {
+    const listItems = Children.map(children, child => !!child && /*#__PURE__*/_jsx(StyledListItem, {
+      children: child
+    }))?.filter(Boolean);
+    if (!listItems) return null;
+    if (showAll) return listItems;
+    return listItems.slice(0, initialDisplayAmount);
+  };
+  const renderFooterButton = () => {
+    if (Children.toArray(children).length <= initialDisplayAmount) return null;
+    const buttonText = `Show ${showAll ? 'Less' : 'All'}`;
+    return {
+      text: buttonText,
+      onClick: handleShowAll,
+      'aria-label': `${buttonText}, ${title}`
+    };
+  };
+  return /*#__PURE__*/_jsx(PageSection, {
+    title: title,
+    footerButton: renderFooterButton(),
+    headerButton: headerButton,
+    headerSecondaryButton: headerSecondaryButton,
+    children: /*#__PURE__*/_jsx(UnstyledUnorderedList, {
+      "aria-label": title,
+      "aria-live": "polite",
+      children: renderListItems()
+    })
+  });
+};

package/dist/Loading/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export type LoadingProps = {
+    className?: string;
+};
+export declare const Loading: React.FC<LoadingProps>;

package/dist/Loading/index.js

@@ -0,0 +1,82 @@
+import { useCurrentMode } from '@codecademy/gamut-styles';
+import { useTheme } from '@emotion/react';
+import cx from 'classnames';
+import * as React from 'react';
+
+// eslint-disable-next-line gamut/no-css-standalone
+import styles from './styles.module.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Loading = ({
+  className
+}) => {
+  const {
+    colors
+  } = useTheme();
+  const mode = useCurrentMode();
+  const color1 = mode === 'light' ? colors['gray-300'] : colors['navy-600'];
+  const color2 = mode === 'light' ? colors['blue-800'] : colors['navy-200'];
+  const icon = /*#__PURE__*/_jsxs("svg", {
+    className: cx(styles.loading, className),
+    "data-testid": "loading",
+    xmlns: "https://www.w3.org/2000/svg",
+    width: "123",
+    height: "98.7",
+    viewBox: "0 0 123 98.7",
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "Loading Icon"
+    }), /*#__PURE__*/_jsx("path", {
+      className: cx(styles.path, styles.c),
+      stroke: color1,
+      fill: "none",
+      strokeMiterlimit: "10",
+      d: "M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7"
+    }), /*#__PURE__*/_jsx("path", {
+      className: cx(styles.path, styles.underline),
+      stroke: color1,
+      fill: "none",
+      strokeMiterlimit: "10",
+      d: "M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28"
+    }), /*#__PURE__*/_jsx("path", {
+      className: cx(styles.path, styles.outer),
+      stroke: color1,
+      fill: "none",
+      strokeMiterlimit: "10",
+      d: "M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7"
+    }), /*#__PURE__*/_jsx("path", {
+      className: cx(styles.path, styles.inner),
+      stroke: color1,
+      fill: "none",
+      strokeMiterlimit: "10",
+      d: "M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7"
+    }), /*#__PURE__*/_jsx("path", {
+      className: cx(styles.pathTwo, styles.c),
+      stroke: color2,
+      fill: "none",
+      strokeWidth: "3",
+      strokeMiterlimit: "10",
+      d: "M18.7 57.6c0 4.2.4 7.4 1.2 9.8 2.3 7.1 8.4 11 16.3 11 5.9 0 10.6-2.4 13.7-6.1.2-.4.3-.8-.1-1.2l-5.2-4.5c-.4-.3-.8-.3-1.2.1-2 2.2-4 3.5-7.3 3.5-3.5 0-6.2-1.7-7.4-5.1-.7-2-.8-4.4-.8-7.4 0-3.1.2-5.4.8-7.4 1.1-3.5 3.9-5.2 7.4-5.2 3.3 0 5.3 1.2 7.3 3.5.3.4.7.5 1.2.2l5.2-4.5c.4-.3.3-.8.1-1.2-3.1-3.8-7.8-6.2-13.7-6.2-7.9 0-14 3.9-16.3 11-.8 2.3-1.2 5.5-1.2 9.7"
+    }), /*#__PURE__*/_jsx("path", {
+      className: cx(styles.pathTwo, styles.underline),
+      stroke: color2,
+      fill: "none",
+      strokeWidth: "3",
+      strokeMiterlimit: "10",
+      d: "M120.7 97.2c.5 0 .8-.3.8-.8v-7.5c0-.5-.3-.8-.8-.8h-28c-.5 0-.8.3-.8.8v7.5c0 .5.3.8.8.8h28"
+    }), /*#__PURE__*/_jsx("path", {
+      className: cx(styles.pathTwo, styles.outer),
+      stroke: color2,
+      fill: "none",
+      strokeWidth: "3",
+      strokeMiterlimit: "10",
+      d: "M42.7 1.5H2.1 2c-.3.2-.5.5-.5.8v94c0 .3.1.5.3.7.1.1.3.1.5.1h80.8c.3 0 .5-.1.6-.3.1-.1.2-.3.2-.5v-94c0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.6-.2H42.7"
+    }), /*#__PURE__*/_jsx("path", {
+      className: cx(styles.pathTwo, styles.inner),
+      stroke: color2,
+      fill: "none",
+      strokeWidth: "3",
+      strokeMiterlimit: "10",
+      d: "M42.7 88H11.3h-.1c-.3-.1-.5-.4-.5-.7V11.5c0-.4.2-.6.5-.8h63.1c.3.1.5.4.5.8v75.7c0 .4-.2.6-.5.7H42.7"
+    })]
+  });
+  return icon;
+};

package/dist/LoadingCurriculumCard/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CardProps } from '../CurriculumCard';
+type LoadingCurriculumCardProps = {
+    variant?: CardProps['variant'];
+};
+export declare const LoadingCurriculumCard: React.FC<LoadingCurriculumCardProps>;
+export {};

package/dist/LoadingCurriculumCard/index.js

@@ -0,0 +1,82 @@
+import { Box, Card, FlexBox, Shimmer } from '@codecademy/gamut';
+import React from 'react';
+import { Divider } from '../ContentGroupBaseCard/shared';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LoadingCurriculumCard = ({
+  variant
+}) => /*#__PURE__*/_jsx(Card, {
+  variant: variant || 'beige',
+  borderRadius: "md",
+  borderColor: "border-primary",
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
+  p: 0,
+  height: "100%",
+  width: "100%",
+  children: /*#__PURE__*/_jsxs(FlexBox, {
+    flexDirection: "column",
+    textAlign: "left",
+    px: 12,
+    pt: 4,
+    pb: 0,
+    height: "100%",
+    children: [/*#__PURE__*/_jsx(Box, {
+      pt: 8,
+      children: /*#__PURE__*/_jsx(Shimmer, {
+        width: "40%",
+        height: 12
+      })
+    }), /*#__PURE__*/_jsxs(FlexBox, {
+      mt: "auto",
+      pt: 16,
+      height: "100%",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        pb: 32,
+        children: [/*#__PURE__*/_jsx(Shimmer, {
+          width: "70%",
+          height: 20,
+          pt: 8
+        }), /*#__PURE__*/_jsx(Shimmer, {
+          width: "62%",
+          height: 20,
+          pt: 8
+        }), /*#__PURE__*/_jsx(Shimmer, {
+          width: "61%",
+          height: 20,
+          pt: 8
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(FlexBox, {
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          children: [/*#__PURE__*/_jsxs(FlexBox, {
+            children: [/*#__PURE__*/_jsx(Shimmer, {
+              width: 25,
+              height: 20,
+              pb: 8
+            }), /*#__PURE__*/_jsx(Shimmer, {
+              width: 45,
+              height: 20,
+              pb: 8,
+              pl: 4
+            })]
+          }), /*#__PURE__*/_jsxs(FlexBox, {
+            children: [/*#__PURE__*/_jsx(Shimmer, {
+              width: 25,
+              height: 20,
+              pb: 8
+            }), /*#__PURE__*/_jsx(Shimmer, {
+              width: 45,
+              height: 20,
+              pb: 8,
+              pl: 4
+            })]
+          })]
+        })]
+      })]
+    })]
+  })
+});

package/dist/Logos/LogoCodecademy/index.d.ts

@@ -0,0 +1,2 @@
+import { SharedLogoProps } from '../shared';
+export declare const LogoCodecademy: React.FC<SharedLogoProps>;

package/dist/Logos/LogoCodecademy/index.js

@@ -0,0 +1,22 @@
+import { StyledSVGWrapper } from '../shared';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LogoCodecademy = ({
+  height = 30,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsxs(StyledSVGWrapper, {
+    height: height,
+    viewBox: "0 0 102 21.705",
+    ...rest,
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "Codecademy Logo"
+    }), /*#__PURE__*/_jsx("g", {
+      fill: "none",
+      fillRule: "nonzero",
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M4.213 14.896c-.192-.562-.278-1.275-.278-2.226 0-.95.086-1.664.278-2.226.513-1.599 1.86-2.485 3.637-2.485 1.326 0 2.353.54 3.06 1.404a.18.18 0 01-.022.26L9.732 10.66c-.086.066-.192.066-.256-.043-.45-.497-.9-.778-1.626-.778-.792 0-1.39.39-1.648 1.167-.128.454-.17.973-.17 1.664 0 .692.042 1.232.192 1.686.257.756.856 1.167 1.647 1.167.727 0 1.198-.28 1.626-.778.064-.086.171-.086.257-.022l1.155 1.038c.086.065.064.173.022.26-.707.842-1.734 1.382-3.06 1.382-1.775-.021-3.145-.886-3.658-2.507zm39.704 0c-.192-.562-.278-1.275-.278-2.226 0-.95.086-1.664.278-2.226.514-1.599 1.862-2.485 3.637-2.485 1.326 0 2.375.54 3.06 1.404a.18.18 0 01-.022.26l-1.155 1.037c-.086.066-.193.066-.257-.043-.45-.497-.899-.778-1.626-.778-.791 0-1.39.39-1.647 1.167-.15.454-.193.973-.193 1.664 0 .692.043 1.232.193 1.686.257.756.856 1.167 1.647 1.167.727 0 1.198-.28 1.626-.778.064-.086.171-.086.257-.022l1.155 1.038c.086.065.064.173.022.26-.707.842-1.734 1.382-3.06 1.382-1.775-.021-3.123-.886-3.637-2.507zm46.552 2.27c-.107 0-.192-.066-.192-.195v-5.187c0-1.167-.578-1.967-1.67-1.967-1.069 0-1.69.8-1.69 1.967v5.187c0 .108-.064.195-.192.195h-1.69c-.107 0-.192-.066-.192-.195v-5.187c0-1.167-.578-1.967-1.67-1.967-1.069 0-1.69.8-1.69 1.967v5.187c0 .108-.063.195-.192.195h-1.69c-.107 0-.192-.066-.192-.195V8.348c0-.108.064-.195.192-.195h1.69c.107 0 .193.065.193.195v.648h.021c.385-.562 1.155-1.037 2.332-1.037 1.048 0 1.883.432 2.418 1.189h.021c.684-.757 1.562-1.19 2.824-1.19 2.054 0 3.209 1.427 3.209 3.35v5.685c0 .108-.064.194-.193.194l-1.647-.021zm4.228 3.177c-.108 0-.193-.066-.193-.195v-1.491c0-.108.064-.194.193-.194h.32c.707 0 1.048-.325 1.327-1.06l.257-.756-3.231-8.494c-.043-.108.043-.194.15-.194h1.818c.107 0 .193.065.214.194l1.99 5.879h.043l1.904-5.879c.043-.108.107-.194.213-.194h1.733c.108 0 .193.065.15.194l-3.337 9.401c-.77 2.14-1.498 2.81-2.974 2.81l-.577-.021zm-76.93-6.009c.15-.475.192-.908.192-1.664 0-.756-.043-1.167-.192-1.664-.257-.757-.835-1.167-1.647-1.167-.813 0-1.412.432-1.669 1.167-.15.475-.193.886-.193 1.664 0 .756.043 1.189.193 1.664.257.757.835 1.167 1.669 1.167.812.022 1.39-.41 1.647-1.167zm-5.306.562c-.192-.627-.3-1.232-.3-2.226s.087-1.578.3-2.226c.492-1.578 1.84-2.485 3.637-2.485 1.776 0 3.124.907 3.615 2.485.193.627.3 1.232.3 2.226s-.086 1.578-.3 2.226c-.491 1.578-1.84 2.485-3.615 2.485-1.775 0-3.123-.907-3.637-2.485zm43.085-6.937c2.695 0 3.68.95 3.722 3.155v5.857c0 .13-.085.195-.192.195h-1.54c-.13 0-.193-.087-.193-.195v-.648h-.022c-.406.605-1.24 1.037-2.481 1.037-1.626 0-2.974-.865-2.974-2.745 0-1.945 1.348-2.853 3.53-2.853h.728c.128 0 .192.087.192.195v1.189c0 .13-.086.194-.192.194h-.407c-1.327 0-1.904.368-1.904 1.21 0 .757.535 1.124 1.519 1.124 1.262 0 1.968-.497 1.968-1.534v-3.004c-.043-.973-.535-1.405-1.968-1.405-.984 0-1.583.281-2.011.627-.086.064-.193.043-.257-.043l-.685-1.233c-.042-.086-.021-.172.043-.237.706-.54 1.67-.886 3.124-.886zm-21.66 3.803h2.502c.065 0 .108-.043.108-.108 0-.302-.043-.54-.108-.756-.235-.735-.877-1.167-1.711-1.167-.834 0-1.498.432-1.733 1.167-.021.087-.043.173-.064.28v.044c-.064.41-.086.735-.107 1.254-.003.434.033.868.107 1.296.021.13.064.26.107.39.278.885.984 1.361 1.968 1.361 1.006 0 1.626-.367 2.075-.864.086-.109.193-.109.278-.044l1.07.973c.086.065.086.173.021.26-.77.907-2.01 1.534-3.636 1.534-1.862 0-3.188-.93-3.68-2.507-.193-.584-.321-1.276-.321-2.205 0-.93.107-1.642.3-2.226.492-1.577 1.86-2.485 3.615-2.485 1.818 0 3.145.95 3.637 2.485.214.627.3 1.254.3 2.702 0 .13-.065.194-.193.194h-4.536c-.064 0-.085-.043-.085-.086v-1.405c0-.065.043-.087.085-.087zm-4.83-7.42c.107 0 .193.064.214.107v12.319c0 .13-.085.195-.192.195h-1.69c-.128 0-.193-.087-.193-.195v-.67h-.021c-.407.605-1.134 1.06-2.332 1.06-1.498 0-2.61-.714-3.06-2.162-.234-.692-.32-1.319-.32-2.529s.107-1.837.32-2.528c.45-1.427 1.52-2.14 2.996-2.161h1.262c.043.02.064.043.064.086v1.707c0 .044-.021.087-.064.087h-.727c-.792.021-1.348.432-1.583 1.167-.129.41-.193.864-.193 1.685 0 .822.064 1.276.193 1.686.235.735.812 1.146 1.625 1.146.835 0 1.412-.39 1.648-1.146a4.85 4.85 0 00.171-1.167V4.536c0-.13.085-.195.192-.195h1.69zm44.176 7.42h2.503c.064 0 .107-.043.107-.108 0-.302-.043-.54-.107-.756-.235-.735-.877-1.167-1.712-1.167-.834 0-1.497.432-1.732 1.167a5.779 5.779 0 00-.064.28v.044c-.064.41-.086.735-.107 1.254-.003.434.033.868.106 1.296.022.13.065.26.108.39.278.885.984 1.361 1.968 1.361 1.006 0 1.626-.367 2.075-.864.086-.109.193-.109.278-.044l1.07.973c.085.065.085.173.021.26-.77.907-2.011 1.534-3.637 1.534-1.86 0-3.187-.93-3.68-2.507-.192-.584-.32-1.276-.32-2.205 0-.93.107-1.642.3-2.226.491-1.577 1.86-2.485 3.614-2.485 1.819 0 3.145.95 3.638 2.485.213.627.3 1.254.3 2.702 0 .13-.065.194-.193.194h-4.536c-.064 0-.086-.043-.086-.086v-1.405c0-.065.043-.087.086-.087zm-4.829-7.42c.107 0 .193.064.236.172v12.319c0 .13-.086.194-.193.194h-1.69c-.128 0-.192-.086-.192-.194v-.67h-.022c-.428.605-1.155 1.059-2.353 1.059-1.498 0-2.61-.713-3.06-2.161-.235-.692-.32-1.34-.32-2.55 0-1.232.107-1.86.32-2.551.45-1.426 1.54-2.14 3.017-2.161h1.24c.129 0 .193.086.193.194v1.492c0 .13-.085.194-.192.194h-.727c-.792.022-1.349.433-1.584 1.167-.128.41-.192.865-.192 1.686s.064 1.275.192 1.686c.235.756.792 1.167 1.626 1.167.835 0 1.412-.41 1.648-1.167.085-.302.15-.649.17-1.167V4.536c0-.13.086-.195.193-.195h1.69zM50.078 19.534c.295 0 .357.09.357.362v1.447c0 .294-.083.362-.357.362h-5.723c-.296 0-.358-.09-.358-.362v-1.447c0-.295.052-.362.358-.362h5.723zM0 .362C0 .109.043.043 0 0h42.208c.23 0 .272.022.358 0v21.344c0 .231-.021.275 0 .362-.086-.022-.129 0-.358 0H0v-.002l.007-.028c.006-.037-.002-.053-.006-.012L0 21.69V.361zm2.146 19.173H40.42c-.043-.043 0-.107 0-.362V2.171H2.146v17.364z",
+        fill: "currentColor"
+      })
+    })]
+  });
+};

package/dist/Logos/LogoCodecademyMini/index.d.ts

@@ -0,0 +1,2 @@
+import { SharedLogoProps } from '../shared';
+export declare const LogoCodecademyMini: React.FC<SharedLogoProps>;

package/dist/Logos/LogoCodecademyMini/index.js

@@ -0,0 +1,18 @@
+import { StyledSVGWrapper } from '../shared';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LogoCodecademyMini = ({
+  height = 30,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsxs(StyledSVGWrapper, {
+    ...rest,
+    height: height,
+    viewBox: "0 0 28 22",
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "Codecademy Logo Mini"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M19.1955 0.043956C19.1955 0.043956 19.1955 0.0659341 19.1955 0.043956C19.2179 0.0879121 19.2402 0.131868 19.2626 0.197802V21.7582C19.2626 21.8242 19.2402 21.8681 19.2179 21.8901C19.1732 21.9341 19.1285 21.956 19.0615 21.956H0.178771C0.134078 21.956 0.0893855 21.956 0.0670391 21.9341C0.0223464 21.8901 0 21.8462 0 21.7802V0.175824C0 0.0879121 0.0446927 0.021978 0.111732 0H19.0615C19.1061 0 19.1732 0.021978 19.1955 0.043956ZM17.095 19.6923V2.28571C17.095 2.1978 17.0503 2.13187 16.9832 2.10989H2.23464C2.1676 2.13187 2.12291 2.1978 2.12291 2.28571V19.6923C2.12291 19.7802 2.1676 19.8462 2.23464 19.8681H16.9832C17.0503 19.8462 17.095 19.7802 17.095 19.6923ZM27.7989 19.8681C27.933 19.8681 28 19.9341 28 20.0659V21.8022C28 21.9341 27.9106 22 27.7989 22H21.2737C21.1397 22 21.0726 21.9121 21.0726 21.8022V20.0659C21.0726 19.9341 21.162 19.8681 21.2737 19.8681H27.7989ZM8.08939 8.08791C9.47486 8.08791 10.5475 8.63736 11.2849 9.51648C11.3296 9.58242 11.352 9.71429 11.2626 9.78022L10.0559 10.8352C9.96648 10.9011 9.85475 10.8791 9.78771 10.7912C9.34078 10.2857 8.84916 10 8.08939 10C7.26257 10 6.63687 10.3956 6.36872 11.1648C6.21229 11.6264 6.1676 12.1538 6.1676 12.8571C6.1676 13.5604 6.21229 14.1099 6.36872 14.5714C6.63687 15.3626 7.26257 15.7582 8.08939 15.7582C8.84916 15.7582 9.31844 15.4725 9.78771 14.967C9.85475 14.8791 9.96648 14.8791 10.0559 14.9451L11.2626 16C11.352 16.0659 11.3296 16.1758 11.2849 16.2637C10.5475 17.1209 9.47486 17.6703 8.08939 17.6703C6.23464 17.6703 4.82682 16.7692 4.2905 15.1429C4.08939 14.5714 4 13.8462 4 12.8791C4 11.9121 4.08939 11.1868 4.2905 10.6154C4.82682 8.98901 6.23464 8.08791 8.08939 8.08791Z",
+      fill: "currentColor"
+    })]
+  });
+};

package/dist/Logos/LogoCodecademyPro/index.d.ts

@@ -0,0 +1,2 @@
+import { SharedLogoProps } from '../shared';
+export declare const LogoCodecademyPro: React.FC<SharedLogoProps>;