@khanacademy/perseus 39.0.1 → 40.0.0

package/dist/styles/global-styles.d.ts

@@ -1,48 +1,3 @@
 /// <reference path="../../types/aphrodite.d.ts" />
-import type { StyleDeclaration } from "aphrodite";
-export declare const colors: {
-    readonly white: "#FFFFFF";
-    readonly gray98: "#FAFAFA";
-    readonly gray97: "#F6F7F7";
-    readonly gray95: "#F0F1F2";
-    readonly gray90: "#E3E5E6";
-    readonly gray85: "#D6D8DA";
-    readonly gray76: "#BABEC2";
-    readonly gray72: "#999A9D";
-    readonly gray68: "#888D93";
-    readonly gray55: "#707378";
-    readonly gray41: "#626569";
-    readonly gray25: "#3B3E40";
-    readonly gray17: "#21242C";
-    readonly gray10: "#1499af";
-    readonly black: "#000000";
-    readonly alertRed: "#C42420";
-    readonly homepageBlue: "#46A8BF";
-    readonly kaBlue: "#314453";
-    readonly kaBlueLight: "#4D6779";
-    readonly kaGreen: "#71B307";
-    readonly kaGreenLight: "#BED47A";
-    readonly learnstormBlue: "#4898FC";
-    readonly backgroundBlue: "#00294A";
-    readonly adminGreen: "#78C008";
-    readonly kaBlueExtraLight: "#39c2db";
-    readonly kaBlueHover: "#0c7f99";
-    readonly kaGreenHover: "#518005";
-    readonly skyDark: "#001f4d";
-    readonly recommendationGold: "#ffbe26";
-    readonly starAced: "#ff9c39";
-    readonly google: "#C1432f";
-    readonly modernGoogle: "#be2612";
-    readonly modernGoogleHover: "#8c1c0d";
-    readonly facebook: "#4267B2";
-    readonly modernFacebook: "#4267B2";
-    readonly modernFacebookHover: "#00294a";
-    readonly wonderBlocksGold: "#FFB100";
-    readonly wonderBlocksLightBlue: "#37C5FD";
-    readonly breadcrumbs: "rgba(255, 255, 255, 0.7)";
-};
-export declare const borderRadius = 4;
-export declare const fonts: {
-    readonly regular: "inherit";
-};
-export declare const typography: StyleDeclaration;
+import type { CSSProperties } from "aphrodite";
+export declare const bodyXsmallBold: CSSProperties;

package/dist/widgets/grapher/util.d.ts

@@ -1,8 +1,5 @@
 import type { LinearType, QuadraticType, SinusoidType, TangentType, ExponentialType, LogarithmType, AbsoluteValueType } from "./grapher-types";
 import type { Coord } from "../../interactive2/types";
-export declare const DEFAULT_BACKGROUND_IMAGE: {
-    readonly url: null;
-};
 declare const functionTypeMapping: {
     readonly linear: LinearType;
     readonly quadratic: QuadraticType;
@@ -17,7 +14,6 @@ type FunctionTypeMappingKeys = keyof typeof functionTypeMapping;
 type ConditionalGraderType<T extends FunctionTypeMappingKeys> = T extends "linear" ? LinearType : T extends "quadratic" ? QuadraticType : T extends "sinusoid" ? SinusoidType : T extends "tangent" ? TangentType : T extends "exponential" ? ExponentialType : T extends "logarithm" ? LogarithmType : T extends "absolute_value" ? AbsoluteValueType : never;
 export declare function functionForType<T extends FunctionTypeMappingKeys>(type: T): ConditionalGraderType<T>;
 export declare const getEquationString: (props: any) => string;
-export declare const pointsFromNormalized: (coordsList: ReadonlyArray<Coord>, range: [Coord, Coord], step: [number, number], snapStep: [number, number]) => ReadonlyArray<Coord>;
 export declare const maybePointsFromNormalized: (coordsList: ReadonlyArray<Coord> | null | undefined, range: [Coord, Coord], step: [number, number], snapStep: [number, number]) => ReadonlyArray<Coord> | null | undefined;
 export declare const defaultPlotProps: (type: FunctionTypeMappingKeys, graph: any) => any;
 export declare const chooseType: <T>(list: ReadonlyArray<T>) => T | undefined;

package/dist/widgets/interactive-graphs/graphs/components/movable-point-view.d.ts

@@ -5,19 +5,9 @@ type Props = {
     point: vec.Vector2;
     color?: string | undefined;
     dragging: boolean;
-    focusBehavior: FocusBehaviorConfig;
+    showFocusRing: boolean;
     cursor?: CSSCursor | undefined;
     onClick?: () => unknown;
 };
-type FocusBehaviorConfig = ControlledFocusBehavior | UncontrolledFocusBehavior;
-type ControlledFocusBehavior = {
-    type: "controlled";
-    showFocusRing: boolean;
-};
-type UncontrolledFocusBehavior = {
-    type: "uncontrolled";
-    tabIndex: number;
-    onFocusChange?: (event: React.FocusEvent, isFocused: boolean) => unknown;
-};
 export declare const MovablePointView: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGGElement>>;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/movable-point.d.ts

@@ -9,7 +9,8 @@ type Props = {
     color?: string;
     cursor?: CSSCursor | undefined;
     constrain?: KeyboardMovementConstraint;
-    onFocusChange?: (event: React.FocusEvent, isFocused: boolean) => unknown;
+    onFocus?: ((event: React.FocusEvent) => unknown) | undefined;
+    onBlur?: ((event: React.FocusEvent) => unknown) | undefined;
 };
 export declare const MovablePoint: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGGElement | null>>;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/use-control-point.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { CSSCursor } from "./css-cursor";
+import type { KeyboardMovementConstraint } from "../use-draggable";
+import type { vec } from "mafs";
+type Params = {
+    point: vec.Vector2;
+    color?: string | undefined;
+    cursor?: CSSCursor | undefined;
+    constrain?: KeyboardMovementConstraint;
+    onMove?: ((newPoint: vec.Vector2) => unknown) | undefined;
+    onClick?: (() => unknown) | undefined;
+    onFocus?: ((event: React.FocusEvent) => unknown) | undefined;
+    onBlur?: ((event: React.FocusEvent) => unknown) | undefined;
+    forwardedRef?: React.ForwardedRef<SVGGElement | null> | undefined;
+};
+type Return = {
+    focusableHandle: React.ReactNode;
+    visiblePoint: React.ReactNode;
+    focusableHandleRef: React.RefObject<SVGGElement>;
+    visiblePointRef: React.RefObject<SVGGElement>;
+};
+export declare function useControlPoint(params: Params): Return;
+export {};

package/dist/widgets/interactive-graphs/graphs/polygon.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import type { MafsGraphProps, PolygonGraphState } from "../types";
 type Props = MafsGraphProps<PolygonGraphState>;
-export declare const PolygonGraph: (props: Props) => React.JSX.Element;
+export declare const LimitedPolygonGraph: (props: Props) => React.JSX.Element;
+export declare const UnlimitedPolygonGraph: (props: Props) => React.JSX.Element;
 export declare const hasFocusVisible: (element: Element | null | undefined) => boolean;
+export declare const PolygonGraph: (props: Props) => React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/mafs-graph.d.ts

@@ -24,7 +24,6 @@ export type MafsGraphProps = {
     readOnly: boolean;
     static: boolean | null | undefined;
 };
-export declare const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 export declare const MafsGraph: (props: MafsGraphProps) => React.JSX.Element;
 export declare const calculateNestedSVGCoords: (range: vec.Vector2[], width: number, height: number) => {
     viewboxX: number;

package/dist/widgets/interactive-graphs/reducer/interactive-graph-action.d.ts

@@ -34,6 +34,11 @@ export declare const actions: {
     polygon: {
         movePoint: typeof movePoint;
         moveAll: typeof moveAll;
+        addPoint: typeof addPoint;
+        removePoint: typeof removePoint;
+        focusPoint: typeof focusPoint;
+        blurPoint: typeof blurPoint;
+        clickPoint: typeof clickPoint;
     };
     quadratic: {
         movePoint: typeof movePoint;

package/dist/widgets/interactive-graphs/types.d.ts

@@ -8,7 +8,9 @@ export type MafsGraphProps<T extends InteractiveGraphState> = {
     graphState: T;
     dispatch: (action: InteractiveGraphAction) => unknown;
 };
+export type InteractiveGraphType = "none" | "angle" | "segment" | "linear-system" | "linear" | "ray" | "polygon" | "point" | "circle" | "quadratic" | "sinusoid";
 export type InteractiveGraphState = AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | NoneGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
+export type UnlimitedGraphState = PointGraphState | PolygonGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     range: [xRange: Interval, yRange: Interval];
@@ -49,6 +51,11 @@ export interface PolygonGraphState extends InteractiveGraphStateCommon {
     showSides: boolean;
     snapTo: "grid" | "angles" | "sides";
     coords: Coord[];
+    numSides?: number | "unlimited";
+    focusedPointIndex: number | null;
+    showRemovePointButton: boolean;
+    interactionMode: InteractionMode;
+    showKeyboardInteractionInvitation: boolean;
 }
 export interface CircleGraphState extends InteractiveGraphStateCommon {
     type: "circle";

package/dist/widgets/interactive-graphs/utils.d.ts

@@ -1,3 +1,4 @@
+import type { InteractiveGraphState, UnlimitedGraphState } from "./types";
 import type { Coord } from "../../interactive2/types";
 import type { PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
 import type { Interval, vec } from "mafs";
@@ -6,6 +7,7 @@ import type { Interval, vec } from "mafs";
  * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
  */
 export declare const TARGET_SIZE = 44;
+export declare const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 export declare const normalizePoints: <A extends Coord[]>(range: PerseusInteractiveGraphWidgetOptions["range"], step: PerseusInteractiveGraphWidgetOptions["step"], coordsList: A, noSnap?: boolean) => A;
 export declare const normalizeCoords: <A extends Coord[]>(coordsList: A, ranges: PerseusInteractiveGraphWidgetOptions["range"]) => A;
 export declare function bound({ snapStep, range, point, }: {
@@ -13,3 +15,4 @@ export declare function bound({ snapStep, range, point, }: {
     range: [Interval, Interval];
     point: vec.Vector2;
 }): vec.Vector2;
+export declare function isUnlimitedGraphState(state: InteractiveGraphState): state is UnlimitedGraphState;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "39.0.1",
+    "version": "40.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -40,14 +40,14 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.15",
-        "@khanacademy/keypad-context": "^1.0.3",
-        "@khanacademy/kmath": "^0.1.15",
-        "@khanacademy/math-input": "^21.1.2",
-        "@khanacademy/perseus-core": "1.5.2",
-        "@khanacademy/perseus-linter": "^1.2.3",
-        "@khanacademy/pure-markdown": "^0.3.10",
-        "@khanacademy/simple-markdown": "^0.13.3",
+        "@khanacademy/kas": "^0.3.16",
+        "@khanacademy/keypad-context": "^1.0.4",
+        "@khanacademy/kmath": "^0.1.16",
+        "@khanacademy/math-input": "^21.1.3",
+        "@khanacademy/perseus-core": "1.5.3",
+        "@khanacademy/perseus-linter": "^1.2.4",
+        "@khanacademy/pure-markdown": "^0.3.11",
+        "@khanacademy/simple-markdown": "^0.13.4",
         "@types/classnames": "2.2.0",
         "@use-gesture/react": "^10.2.27",
         "mafs": "0.19.0",
@@ -78,6 +78,7 @@
         "aphrodite": "^1.2.5",
         "classnames": "1.1.4",
         "create-react-class": "15.6.3",
+        "csstype": "^3.1.3",
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
         "lodash.debounce": "^4.0.8",

package/dist/components/constants.d.ts

@@ -1,7 +0,0 @@
-export declare const devices: {
-    readonly PHONE: "phone";
-    readonly TABLET: "tablet";
-    readonly DESKTOP: "desktop";
-};
-export declare const lintGutterWidth = 36;
-export declare const perseusFrameBorderWidth = 1;

package/dist/styles/global-constants.d.ts

@@ -1,342 +0,0 @@
-export declare const black = "#000000";
-export declare const grayDarker = "#333333";
-export declare const grayDark = "#555555";
-export declare const gray = "#999999";
-export declare const grayLight = "#AAAAAA";
-export declare const grayLighter = "#DDDDDD";
-export declare const white = "#FFFFFF";
-export declare const blue = "#005A88";
-export declare const blueDark = "#2C3747";
-export declare const green = "#76A005";
-export declare const red = "#CF5044";
-export declare const yellow = "#FFC40D";
-export declare const orange = "#BF4F04";
-export declare const pink = "#C3325F";
-export declare const purple = "#7A43B6";
-export declare const bodyBackground = "#FFFFFF";
-export declare const textColor = "#444444";
-export declare const linkColor = "#005987";
-export declare const linkColorHover = "#678D00";
-export declare const sansFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
-export declare const serifFontFamily = "Georgia,'Times New Roman',Times,serif";
-export declare const monoFontFamily = "Monaco,Menlo,Consolas,'Courier New',monospace";
-export declare const baseFontSize = "14px";
-export declare const baseFontFamily = "inherit";
-export declare const baseLineHeight = "20px";
-export declare const altFontFamily = "Georgia,'Times New Roman',Times,serif";
-export declare const headingsFontFamily = "inherit";
-export declare const headingsFontWeight = "bold";
-export declare const headingsColor = "inherit";
-export declare const fontSizeLarge = "18px";
-export declare const fontSizeSmall = "12px";
-export declare const fontSizeMini = "10.5px";
-export declare const paddingLarge = "11px 19px";
-export declare const paddingSmall = "2px 10px";
-export declare const paddingMini = "0 6px";
-export declare const baseBorderRadius = "4px";
-export declare const borderRadiusLarge = "6px";
-export declare const borderRadiusSmall = "3px";
-export declare const tableBackground = "#000000";
-export declare const tableBackgroundAccent = "#F9F9F9";
-export declare const tableBackgroundHover = "#F5F5F5";
-export declare const tableBorder = "#DDDDDD";
-export declare const btnBackground = "#FFFFFF";
-export declare const btnBackgroundHighlight = "rgb(230, 230, 230)";
-export declare const btnBorder = "#CCCCCC";
-export declare const btnPrimaryBackground = "#0088CC";
-export declare const btnPrimaryBackgroundHighlight = "rgb(0, 68, 204)";
-export declare const btnInfoBackground = "#5BC0DE";
-export declare const btnInfoBackgroundHighlight = "#2F96B4";
-export declare const btnSuccessBackground = "#62C462";
-export declare const btnSuccessBackgroundHighlight = "#51A351";
-export declare const btnWarningBackground = "rgb(251, 180, 81)";
-export declare const btnWarningBackgroundHighlight = "#F89406";
-export declare const btnDangerBackground = "#EE5F5B";
-export declare const btnDangerBackgroundHighlight = "#BD362F";
-export declare const btnInverseBackground = "#444444";
-export declare const btnInverseBackgroundHighlight = "#222222";
-export declare const inputBackground = "#FFFFFF";
-export declare const inputBorder = "#CCCCCC";
-export declare const inputBorderRadius = "4px";
-export declare const inputDisabledBackground = "#EEEEEE";
-export declare const formActionsBackground = "#F5F5F5";
-export declare const inputHeight = "30px";
-export declare const dropdownBackground = "#FFFFFF";
-export declare const dropdownBorder = "rgba(0, 0, 0, 0.2)";
-export declare const dropdownDividerTop = "#E5E5E5";
-export declare const dropdownDividerBottom = "#FFFFFF";
-export declare const dropdownLinkColor = "#333333";
-export declare const dropdownLinkColorHover = "#FFFFFF";
-export declare const dropdownLinkColorActive = "#FFFFFF";
-export declare const dropdownLinkBackgroundActive = "#0088CC";
-export declare const dropdownLinkBackgroundHover = "#0088CC";
-export declare const zindexDropdown = 1000;
-export declare const zindexPopover = 1010;
-export declare const zindexTooltip = 1030;
-export declare const zindexFixedNavbar = 1030;
-export declare const zindexHeader = 1060;
-export declare const zindexModalBackdrop = 1070;
-export declare const zindexModal = 1080;
-export declare const zindexAboveModal = 1090;
-export declare const iconSpritePath = "../img/glyphicons-halflings.png";
-export declare const iconWhiteSpritePath = "../img/glyphicons-halflings-white.png";
-export declare const placeholderText = "#999999";
-export declare const hrBorder = "#EEEEEE";
-export declare const horizontalComponentOffset = "180px";
-export declare const wellBackground = "#F5F5F5";
-export declare const navbarCollapseWidth = "979px";
-export declare const navbarCollapseDesktopWidth = "980px";
-export declare const navbarHeight = "40px";
-export declare const navbarBackgroundHighlight = "#FFFFFF";
-export declare const navbarBackground = "rgb(242, 242, 242)";
-export declare const navbarBorder = "rgb(212, 212, 212)";
-export declare const navbarText = "#777777";
-export declare const navbarLinkColor = "#777777";
-export declare const navbarLinkColorHover = "#333333";
-export declare const navbarLinkColorActive = "#555555";
-export declare const navbarLinkBackgroundHover = "#000000";
-export declare const navbarLinkBackgroundActive = "rgb(230, 230, 230)";
-export declare const navbarBrandColor = "#777777";
-export declare const navbarInverseBackground = "#111111";
-export declare const navbarInverseBackgroundHighlight = "#222222";
-export declare const navbarInverseBorder = "#252525";
-export declare const navbarInverseText = "#999999";
-export declare const navbarInverseLinkColor = "#999999";
-export declare const navbarInverseLinkColorHover = "#FFFFFF";
-export declare const navbarInverseLinkColorActive = "#FFFFFF";
-export declare const navbarInverseLinkBackgroundHover = "#000000";
-export declare const navbarInverseLinkBackgroundActive = "#111111";
-export declare const navbarInverseSearchBackground = "rgb(82, 82, 82)";
-export declare const navbarInverseSearchBackgroundFocus = "#FFFFFF";
-export declare const navbarInverseSearchBorder = "#111111";
-export declare const navbarInverseSearchPlaceholderColor = "#CCCCCC";
-export declare const navbarInverseBrandColor = "#999999";
-export declare const paginationBackground = "#FFFFFF";
-export declare const paginationBorder = "#DDDDDD";
-export declare const paginationActiveBackground = "#F5F5F5";
-export declare const heroUnitBackground = "#EEEEEE";
-export declare const heroUnitHeadingColor = "inherit";
-export declare const heroUnitLeadColor = "inherit";
-export declare const warningText = "#C09853";
-export declare const warningBackground = "#FCF8E3";
-export declare const warningBorder = "rgb(251, 239, 213)";
-export declare const errorText = "#B94A48";
-export declare const errorBackground = "#F2DEDE";
-export declare const errorBorder = "rgb(238, 211, 215)";
-export declare const successText = "#468847";
-export declare const successBackground = "#DFF0D8";
-export declare const successBorder = "rgb(212, 232, 197)";
-export declare const infoText = "#4A7C17";
-export declare const infoBackground = "#EDF2DF";
-export declare const infoBorder = "rgb(228, 232, 197)";
-export declare const tooltipColor = "#FFFFFF";
-export declare const tooltipBackground = "#000000";
-export declare const tooltipArrowWidth = "5px";
-export declare const tooltipArrowColor = "#000000";
-export declare const popoverBackground = "#FFFFFF";
-export declare const popoverArrowWidth = "10px";
-export declare const popoverArrowColor = "#FFFFFF";
-export declare const popoverTitleBackground = "rgb(247, 247, 247)";
-export declare const popoverArrowOuterWidth = "11px";
-export declare const popoverArrowOuterColor = "rgba(0, 0, 0, 0.25)";
-export declare const gridColumns = "12";
-export declare const gridColumnWidth = "60px";
-export declare const gridGutterWidth = "20px";
-export declare const gridRowWidth = "940px";
-export declare const gridColumnWidth1200 = "70px";
-export declare const gridGutterWidth1200 = "30px";
-export declare const gridRowWidth1200 = "1170px";
-export declare const gridColumnWidth768 = "42px";
-export declare const gridGutterWidth768 = "20px";
-export declare const gridRowWidth768 = "724px";
-export declare const fluidGridColumnWidth = "6.382978723404255%";
-export declare const fluidGridGutterWidth = "2.127659574468085%";
-export declare const fluidGridColumnWidth1200 = "5.982905982905983%";
-export declare const fluidGridGutterWidth1200 = "2.564102564102564%";
-export declare const fluidGridColumnWidth768 = "5.801104972375691%";
-export declare const fluidGridGutterWidth768 = "2.7624309392265194%";
-export declare const kaGreen = "#71B307";
-export declare const kaGreenLight = "#BED47A";
-export declare const kaBlue = "#314453";
-export declare const kaBlueLight = "#4D6779";
-export declare const grayExtraDark = "#111111";
-export declare const grayExtraLight = "#EEEEEE";
-export declare const graySuperLight = "#F7F7F7";
-export declare const whiteDark = "#FDFDFD";
-export declare const dark = "#21242C";
-export declare const blueDarkUnsaturated = "#3B414E";
-export declare const blueDarkSaturated = "#1F3043";
-export declare const blueLight = "#A9C0D1";
-export declare const greenLight = "#C6D1AD";
-export declare const greenDark = "#356700";
-export declare const yellowGreen = "#9DB63B";
-export declare const okGreen = "#A7CF5B";
-export declare const alertRed = "#C42420";
-export declare const coral = "#EE6666";
-export declare const grayBlue = "#9AB3B9";
-export declare const lightPageBackground = "#FDFDFD";
-export declare const yclaBlue = "#49BAD5";
-export declare const yclaTeal = "#56D0B3";
-export declare const yclaTealDark = "#50C1A7";
-export declare const yclaGreenDark = "#3D9A82";
-export declare const yclaGreen = "#81C262";
-export declare const learnstormBlue = "#4898FC";
-export declare const homepageBlue = "#46A8BF";
-export declare const backgroundBlue = "#00294A";
-export declare const teacherSignupBlue = "#335d7d";
-export declare const homepageGreen = "#2B8E7B";
-export declare const streakColor = "#F79734";
-export declare const facebookColor = "#1A60A2";
-export declare const blueGoogleColor = "#2CAFE2";
-export declare const redGoogleColor = "#BF4434";
-export declare const homepageColor = "#2D585E";
-export declare const lightTextColor = "#898989";
-export declare const fontSizeTiny = "11px";
-export declare const fontSizeNormal = "14px";
-export declare const fontSizeMedium = "16px";
-export declare const fontSizeExtraLarge = "24px";
-export declare const fontSizeHuge = "36px";
-export declare const fontSizeBakana = "48px";
-export declare const fontSizeBananas = "60px";
-export declare const fixedWidthFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
-export declare const contentPadding = "20px";
-export declare const primaryButtonBackground = "#89B908";
-export declare const primaryButtonBorder = "#76A005";
-export declare const buttonTextColor = "rgb(122, 122, 122)";
-export declare const buttonBorderRadius = "3px";
-export declare const basicBorderColor = "#CCCCCC";
-export declare const minContainerWidth = "1000px";
-export declare const maxContainerWidth = "1200px";
-export declare const formHintColor = "#999999";
-export declare const guidelineExampleText = "#606060";
-export declare const hoverCardWidth = "450px";
-export declare const menuHighlightColor = "#96AB4F";
-export declare const menuHighlightBorderColor = "#76A005";
-export declare const menuActiveTextColor = "#FFFFFF";
-export declare const menuInactiveTextColor = "#444444";
-export declare const menuSubheaderTextColor = "rgb(120, 120, 120)";
-export declare const menuBorderColor = "#94A170";
-export declare const unreadBackgroundColor = "#ECEEF4";
-export declare const menuLineHeight = "18px";
-export declare const menuSubheaderLineHeight = "17px";
-export declare const menuSubheaderFontSize = "9px";
-export declare const notificationBarColor = "#4858A4";
-export declare const modalBodyTopPadding = "20px";
-export declare const modalDialogPadding = "15px";
-export declare const modalSectionPadding = "9px";
-export declare const mathDomain1 = "#11ACCD";
-export declare const mathDomain2 = "#63D9EA";
-export declare const mathDomain3 = "#027d97";
-export declare const mathDomain4 = "#085566";
-export declare const partnerContentDomain1 = "#01A995";
-export declare const partnerContentDomain2 = "#01D1C1";
-export declare const partnerContentDomain3 = "#208170";
-export declare const partnerContentDomain4 = "#144F44";
-export declare const csDomain1 = "#1FAB54";
-export declare const csDomain2 = "#74CF70";
-export declare const csDomain3 = "#0D923F";
-export declare const csDomain4 = "#085E29";
-export declare const economicsDomain1 = "#E07D10";
-export declare const economicsDomain2 = "#FFBE26";
-export declare const economicsDomain3 = "#A75A05";
-export declare const economicsDomain4 = "#953C02";
-export declare const collegeCareersMoreDomain1 = "#01A995";
-export declare const collegeCareersMoreDomain2 = "#01D1C1";
-export declare const collegeCareersMoreDomain3 = "#208170";
-export declare const collegeCareersMoreDomain4 = "#144F44";
-export declare const humanitiesDomain1 = "#E84D39";
-export declare const humanitiesDomain2 = "#FF8482";
-export declare const humanitiesDomain3 = "#BE2612";
-export declare const humanitiesDomain4 = "#8C1C0D";
-export declare const gtpDomain1 = "#1865F2";
-export declare const gtpDomain2 = "#1865F2";
-export declare const gtpDomain3 = "#1865F2";
-export declare const gtpDomain4 = "#1865F2";
-export declare const scienceDomain1 = "#CA337C";
-export declare const scienceDomain2 = "#FF92C6";
-export declare const scienceDomain3 = "#9E034E";
-export declare const scienceDomain4 = "#6B0235";
-export declare const testPrepDomain1 = "#1865F2";
-export declare const testPrepDomain2 = "#1865F2";
-export declare const testPrepDomain3 = "#1865F2";
-export declare const testPrepDomain4 = "#1865F2";
-export declare const defaultDomain1 = "#1865F2";
-export declare const defaultDomain2 = "#66afe9";
-export declare const defaultDomain3 = "#1152b0";
-export declare const defaultDomain4 = "#0d3d82";
-export declare const defaultDomainColor = "#314453";
-export declare const defaultSubjectColor = "#4D6779";
-export declare const defaultTopicColor = "#6A8DA6";
-export declare const defaultHoverColor = "#314453";
-export declare const defaultLinkColor = "#314453";
-export declare const defaultLinkHoverColor = "#6A8DA6";
-export declare const scienceDomainColor = "#94424F";
-export declare const scienceSubjectColor = "#9D4A5A";
-export declare const scienceTopicColor = "#C55F73";
-export declare const scienceHoverColor = "#94424F";
-export declare const scienceLinkColor = "#94424F";
-export declare const scienceLinkHoverColor = "#C55F73";
-export declare const humanitiesDomainColor = "#AD3434";
-export declare const humanitiesSubjectColor = "#C13B31";
-export declare const humanitiesTopicColor = "#D24A45";
-export declare const humanitiesHoverColor = "#AD3434";
-export declare const humanitiesLinkColor = "#AD3434";
-export declare const humanitiesLinkHoverColor = "#D24A45";
-export declare const economicsDomainColor = "#B77033";
-export declare const economicsSubjectColor = "#BF7B34";
-export declare const economicsTopicColor = "#D1933B";
-export declare const economicsHoverColor = "#B77033";
-export declare const economicsLinkColor = "#B77033";
-export declare const economicsLinkHoverColor = "#D1933B";
-export declare const csDomainColor = "#437A39";
-export declare const csSubjectColor = "#53893E";
-export declare const csTopicColor = "#689B51";
-export declare const csHoverColor = "#437A39";
-export declare const csLinkColor = "#437A39";
-export declare const csLinkHoverColor = "#689B51";
-export declare const partnerContentDomainColor = "#218270";
-export declare const partnerContentSubjectColor = "#2C8D7B";
-export declare const partnerContentTopicColor = "#329A86";
-export declare const partnerContentHoverColor = "#218270";
-export declare const partnerContentLinkColor = "#218270";
-export declare const partnerContentLinkHoverColor = "#329A86";
-export declare const essayDomainColor = "#0071B3";
-export declare const mathDomainColor = "#1C758A";
-export declare const mathSubjectColor = "#46A8BF";
-export declare const mathTopicColor = "#4FBAD4";
-export declare const mathHoverColor = "#1C758A";
-export declare const mathLinkColor = "#1C758A";
-export declare const mathLinkHoverColor = "#4FBAD4";
-export declare const testPrepDomainColor = "#644172";
-export declare const testPrepSubjectColor = "#7E5F8E";
-export declare const testPrepTopicColor = "#9A72AC";
-export declare const testPrepHoverColor = "#644172";
-export declare const testPrepLinkColor = "#644172";
-export declare const testPrepLinkHoverColor = "#9A72AC";
-export declare const collegeCareersMoreDomainColor = "#218270";
-export declare const collegeCareersMoreSubjectColor = "#2C8D7B";
-export declare const collegeCareersMoreTopicColor = "#329A86";
-export declare const collegeCareersMoreHoverColor = "#218270";
-export declare const collegeCareersMoreLinkColor = "#218270";
-export declare const collegeCareersMoreLinkHoverColor = "#329A86";
-export declare const colorProficient = "#1C758A";
-export declare const colorPracticed = "rgb(158, 221, 235)";
-export declare const colorMastery1 = "rgb(90, 197, 221)";
-export declare const colorMastery2 = "rgb(42, 174, 203)";
-export declare const colorMastery3 = "#1C758A";
-export declare const colorSuggested = "#73982C";
-export declare const colorReview = "#E35D04";
-export declare const colorNotStarted = "#CCCCCC";
-export declare const colorStarted = "#C7E5F7";
-export declare const colorStruggling = "#C30202";
-export declare const colorPersonal = "#00809C";
-export declare const colorPractice = "#96D9FF";
-export declare const colorEnergyPoints = "#005987";
-export declare const pureSmMin = "568px";
-export declare const pureMdMin = "768px";
-export declare const pureLgMin = "1024px";
-export declare const pureXlMin = "1200px";
-export declare const pureXsMax = "567px";
-export declare const pureSmMax = "767px";
-export declare const pureMdMax = "1023px";
-export declare const pureLgMax = "1199px";