@khanacademy/perseus 1.1.2 → 1.3.0

package/dist/es/index.js

@@ -19,13 +19,14 @@ import { pureMarkdownRules } from '@khanacademy/pure-markdown';
 import { StyleSheet, css } from 'aphrodite';
 import MathQuill from 'mathquill';
 import { TextField } from '@khanacademy/wonder-blocks-form';
-import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import Button from '@khanacademy/wonder-blocks-button';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import Color from '@khanacademy/wonder-blocks-color';
 import { View, Text } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { Popover, PopoverContent, PopoverContentCore } from '@khanacademy/wonder-blocks-popover';
 import { OptionItem, SingleSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$1 from 'lodash.debounce';
 import Link from '@khanacademy/wonder-blocks-link';
@@ -24583,1191 +24584,52 @@ var styles$y = StyleSheet.create({
   }
 });
 
-var black = "#000000";
-var grayDarker = "#333333";
-var grayDark = "#555555";
-var gray = "#999999";
-var grayLight = "#AAAAAA";
-var grayLighter = "#DDDDDD";
-var white = "#FFFFFF";
-var blue = "#005A88";
-var blueDark = "#2C3747";
-var green = "#76A005";
-var red = "#CF5044";
-var yellow = "#FFC40D";
-var orange = "#BF4F04";
-var pink = "#C3325F";
-var purple = "#7A43B6";
-var bodyBackground = "#FFFFFF";
-var textColor = "#444444";
-var linkColor = "#005987";
-var linkColorHover = "#678D00";
-var sansFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
-var serifFontFamily = "Georgia,'Times New Roman',Times,serif";
-var monoFontFamily = "Monaco,Menlo,Consolas,'Courier New',monospace";
-var baseFontSize = "14px";
-var baseFontFamily = "inherit";
-var baseLineHeight = "20px";
-var altFontFamily = "Georgia,'Times New Roman',Times,serif";
-var headingsFontFamily = "inherit";
-var headingsFontWeight = "bold";
-var headingsColor = "inherit";
-var fontSizeLarge = "18px";
-var fontSizeSmall = "12px";
-var fontSizeMini = "10.5px";
-var paddingLarge = "11px 19px";
-var paddingSmall = "2px 10px";
-var paddingMini = "0 6px";
-var baseBorderRadius = "4px";
-var borderRadiusLarge = "6px";
-var borderRadiusSmall = "3px";
-var tableBackground = "#000000";
-var tableBackgroundAccent = "#F9F9F9";
-var tableBackgroundHover = "#F5F5F5";
-var tableBorder = "#DDDDDD";
-var btnBackground = "#FFFFFF";
-var btnBackgroundHighlight = "rgb(230, 230, 230)";
-var btnBorder = "#CCCCCC";
-var btnPrimaryBackground = "#0088CC";
-var btnPrimaryBackgroundHighlight = "rgb(0, 68, 204)";
-var btnInfoBackground = "#5BC0DE";
-var btnInfoBackgroundHighlight = "#2F96B4";
-var btnSuccessBackground = "#62C462";
-var btnSuccessBackgroundHighlight = "#51A351";
-var btnWarningBackground = "rgb(251, 180, 81)";
-var btnWarningBackgroundHighlight = "#F89406";
-var btnDangerBackground = "#EE5F5B";
-var btnDangerBackgroundHighlight = "#BD362F";
-var btnInverseBackground = "#444444";
-var btnInverseBackgroundHighlight = "#222222";
-var inputBackground = "#FFFFFF";
-var inputBorder = "#CCCCCC";
-var inputBorderRadius = "4px";
-var inputDisabledBackground = "#EEEEEE";
-var formActionsBackground = "#F5F5F5";
-var inputHeight = "30px";
-var dropdownBackground = "#FFFFFF";
-var dropdownBorder = "rgba(0, 0, 0, 0.2)";
-var dropdownDividerTop = "#E5E5E5";
-var dropdownDividerBottom = "#FFFFFF";
-var dropdownLinkColor = "#333333";
-var dropdownLinkColorHover = "#FFFFFF";
-var dropdownLinkColorActive = "#FFFFFF";
-var dropdownLinkBackgroundActive = "#0088CC";
-var dropdownLinkBackgroundHover = "#0088CC";
-var zindexDropdown = 1000;
-var zindexPopover = 1010;
-var zindexTooltip = 1030;
-var zindexFixedNavbar = 1030;
-var zindexHeader = 1060;
-var zindexModalBackdrop = 1070;
-var zindexModal = 1080;
-var zindexAboveModal = 1090;
-var iconSpritePath = "../img/glyphicons-halflings.png";
-var iconWhiteSpritePath = "../img/glyphicons-halflings-white.png";
-var placeholderText = "#999999";
-var hrBorder = "#EEEEEE";
-var horizontalComponentOffset = "180px";
-var wellBackground = "#F5F5F5";
-var navbarCollapseWidth = "979px";
-var navbarCollapseDesktopWidth = "980px";
-var navbarHeight = "40px";
-var navbarBackgroundHighlight = "#FFFFFF";
-var navbarBackground = "rgb(242, 242, 242)";
-var navbarBorder = "rgb(212, 212, 212)";
-var navbarText = "#777777";
-var navbarLinkColor = "#777777";
-var navbarLinkColorHover = "#333333";
-var navbarLinkColorActive = "#555555";
-var navbarLinkBackgroundHover = "#000000";
-var navbarLinkBackgroundActive = "rgb(230, 230, 230)";
-var navbarBrandColor = "#777777";
-var navbarInverseBackground = "#111111";
-var navbarInverseBackgroundHighlight = "#222222";
-var navbarInverseBorder = "#252525";
-var navbarInverseText = "#999999";
-var navbarInverseLinkColor = "#999999";
-var navbarInverseLinkColorHover = "#FFFFFF";
-var navbarInverseLinkColorActive = "#FFFFFF";
-var navbarInverseLinkBackgroundHover = "#000000";
-var navbarInverseLinkBackgroundActive = "#111111";
-var navbarInverseSearchBackground = "rgb(82, 82, 82)";
-var navbarInverseSearchBackgroundFocus = "#FFFFFF";
-var navbarInverseSearchBorder = "#111111";
-var navbarInverseSearchPlaceholderColor = "#CCCCCC";
-var navbarInverseBrandColor = "#999999";
-var paginationBackground = "#FFFFFF";
-var paginationBorder = "#DDDDDD";
-var paginationActiveBackground = "#F5F5F5";
-var heroUnitBackground = "#EEEEEE";
-var heroUnitHeadingColor = "inherit";
-var heroUnitLeadColor = "inherit";
-var warningText = "#C09853";
-var warningBackground = "#FCF8E3";
-var warningBorder = "rgb(251, 239, 213)";
-var errorText = "#B94A48";
-var errorBackground = "#F2DEDE";
-var errorBorder = "rgb(238, 211, 215)";
-var successText = "#468847";
-var successBackground = "#DFF0D8";
-var successBorder = "rgb(212, 232, 197)";
-var infoText = "#4A7C17";
-var infoBackground = "#EDF2DF";
-var infoBorder = "rgb(228, 232, 197)";
-var tooltipColor = "#FFFFFF";
-var tooltipBackground = "#000000";
-var tooltipArrowWidth = "5px";
-var tooltipArrowColor = "#000000";
-var popoverBackground = "#FFFFFF";
-var popoverArrowWidth = "10px";
-var popoverArrowColor = "#FFFFFF";
-var popoverTitleBackground = "rgb(247, 247, 247)";
-var popoverArrowOuterWidth = "11px";
-var popoverArrowOuterColor = "rgba(0, 0, 0, 0.25)";
-var gridColumns = "12";
-var gridColumnWidth = "60px";
-var gridGutterWidth = "20px";
-var gridRowWidth = "940px";
-var gridColumnWidth1200 = "70px";
-var gridGutterWidth1200 = "30px";
-var gridRowWidth1200 = "1170px";
-var gridColumnWidth768 = "42px";
-var gridGutterWidth768 = "20px";
-var gridRowWidth768 = "724px";
-var fluidGridColumnWidth = "6.382978723404255%";
-var fluidGridGutterWidth = "2.127659574468085%";
-var fluidGridColumnWidth1200 = "5.982905982905983%";
-var fluidGridGutterWidth1200 = "2.564102564102564%";
-var fluidGridColumnWidth768 = "5.801104972375691%";
-var fluidGridGutterWidth768 = "2.7624309392265194%";
-var kaGreen = "#71B307";
-var kaGreenLight = "#BED47A";
-var kaBlue = "#314453";
-var kaBlueLight = "#4D6779";
-var grayExtraDark = "#111111";
-var grayExtraLight = "#EEEEEE";
-var graySuperLight = "#F7F7F7";
-var whiteDark = "#FDFDFD";
-var dark = "#21242C";
-var blueDarkUnsaturated = "#3B414E";
-var blueDarkSaturated = "#1F3043";
-var blueLight = "#A9C0D1";
-var greenLight = "#C6D1AD";
-var greenDark = "#356700";
-var yellowGreen = "#9DB63B";
-var okGreen = "#A7CF5B";
-var alertRed = "#C42420";
-var coral = "#EE6666";
-var grayBlue = "#9AB3B9";
-var lightPageBackground = "#FDFDFD";
-var yclaBlue = "#49BAD5";
-var yclaTeal = "#56D0B3";
-var yclaTealDark = "#50C1A7";
-var yclaGreenDark = "#3D9A82";
-var yclaGreen = "#81C262";
-var learnstormBlue = "#4898FC";
-var homepageBlue = "#46A8BF";
-var backgroundBlue = "#00294A";
-var teacherSignupBlue = "#335d7d";
-var homepageGreen = "#2B8E7B";
-var streakColor = "#F79734";
-var facebookColor = "#1A60A2";
-var blueGoogleColor = "#2CAFE2";
-var redGoogleColor = "#BF4434";
-var homepageColor = "#2D585E";
-var lightTextColor = "#898989";
-var fontSizeTiny = "11px";
-var fontSizeNormal = "14px";
-var fontSizeMedium = "16px";
-var fontSizeExtraLarge = "24px";
-var fontSizeHuge = "36px";
-var fontSizeBakana = "48px";
-var fontSizeBananas = "60px";
-var fixedWidthFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
-var contentPadding = "20px";
-var primaryButtonBackground = "#89B908";
-var primaryButtonBorder = "#76A005";
-var buttonTextColor = "rgb(122, 122, 122)";
-var buttonBorderRadius = "3px";
-var basicBorderColor = "#CCCCCC";
-var minContainerWidth = "1000px";
-var maxContainerWidth = "1200px";
-var formHintColor = "#999999";
-var guidelineExampleText = "#606060";
-var hoverCardWidth = "450px";
-var menuHighlightColor = "#96AB4F";
-var menuHighlightBorderColor = "#76A005";
-var menuActiveTextColor = "#FFFFFF";
-var menuInactiveTextColor = "#444444";
-var menuSubheaderTextColor = "rgb(120, 120, 120)";
-var menuBorderColor = "#94A170";
-var unreadBackgroundColor = "#ECEEF4";
-var menuLineHeight = "18px";
-var menuSubheaderLineHeight = "17px";
-var menuSubheaderFontSize = "9px";
-var notificationBarColor = "#4858A4";
-var modalBodyTopPadding = "20px";
-var modalDialogPadding = "15px";
-var modalSectionPadding = "9px";
-var mathDomain1 = "#11ACCD";
-var mathDomain2 = "#63D9EA";
-var mathDomain3 = "#027d97";
-var mathDomain4 = "#085566";
-var partnerContentDomain1 = "#01A995";
-var partnerContentDomain2 = "#01D1C1";
-var partnerContentDomain3 = "#208170";
-var partnerContentDomain4 = "#144F44";
-var csDomain1 = "#1FAB54";
-var csDomain2 = "#74CF70";
-var csDomain3 = "#0D923F";
-var csDomain4 = "#085E29";
-var economicsDomain1 = "#E07D10";
-var economicsDomain2 = "#FFBE26";
-var economicsDomain3 = "#A75A05";
-var economicsDomain4 = "#953C02";
-var collegeCareersMoreDomain1 = "#01A995";
-var collegeCareersMoreDomain2 = "#01D1C1";
-var collegeCareersMoreDomain3 = "#208170";
-var collegeCareersMoreDomain4 = "#144F44";
-var humanitiesDomain1 = "#E84D39";
-var humanitiesDomain2 = "#FF8482";
-var humanitiesDomain3 = "#BE2612";
-var humanitiesDomain4 = "#8C1C0D";
-var gtpDomain1 = "#1865F2";
-var gtpDomain2 = "#1865F2";
-var gtpDomain3 = "#1865F2";
-var gtpDomain4 = "#1865F2";
-var scienceDomain1 = "#CA337C";
-var scienceDomain2 = "#FF92C6";
-var scienceDomain3 = "#9E034E";
-var scienceDomain4 = "#6B0235";
-var testPrepDomain1 = "#1865F2";
-var testPrepDomain2 = "#1865F2";
-var testPrepDomain3 = "#1865F2";
-var testPrepDomain4 = "#1865F2";
-var defaultDomain1 = "#1865F2";
-var defaultDomain2 = "#66afe9";
-var defaultDomain3 = "#1152b0";
-var defaultDomain4 = "#0d3d82";
-var defaultDomainColor = "#314453";
-var defaultSubjectColor = "#4D6779";
-var defaultTopicColor = "#6A8DA6";
-var defaultHoverColor = "#314453";
-var defaultLinkColor = "#314453";
-var defaultLinkHoverColor = "#6A8DA6";
-var scienceDomainColor = "#94424F";
-var scienceSubjectColor = "#9D4A5A";
-var scienceTopicColor = "#C55F73";
-var scienceHoverColor = "#94424F";
-var scienceLinkColor = "#94424F";
-var scienceLinkHoverColor = "#C55F73";
-var humanitiesDomainColor = "#AD3434";
-var humanitiesSubjectColor = "#C13B31";
-var humanitiesTopicColor = "#D24A45";
-var humanitiesHoverColor = "#AD3434";
-var humanitiesLinkColor = "#AD3434";
-var humanitiesLinkHoverColor = "#D24A45";
-var economicsDomainColor = "#B77033";
-var economicsSubjectColor = "#BF7B34";
-var economicsTopicColor = "#D1933B";
-var economicsHoverColor = "#B77033";
-var economicsLinkColor = "#B77033";
-var economicsLinkHoverColor = "#D1933B";
-var csDomainColor = "#437A39";
-var csSubjectColor = "#53893E";
-var csTopicColor = "#689B51";
-var csHoverColor = "#437A39";
-var csLinkColor = "#437A39";
-var csLinkHoverColor = "#689B51";
-var partnerContentDomainColor = "#218270";
-var partnerContentSubjectColor = "#2C8D7B";
-var partnerContentTopicColor = "#329A86";
-var partnerContentHoverColor = "#218270";
-var partnerContentLinkColor = "#218270";
-var partnerContentLinkHoverColor = "#329A86";
-var essayDomainColor = "#0071B3";
-var mathDomainColor = "#1C758A";
-var mathSubjectColor = "#46A8BF";
-var mathTopicColor = "#4FBAD4";
-var mathHoverColor = "#1C758A";
-var mathLinkColor = "#1C758A";
-var mathLinkHoverColor = "#4FBAD4";
-var testPrepDomainColor = "#644172";
-var testPrepSubjectColor = "#7E5F8E";
-var testPrepTopicColor = "#9A72AC";
-var testPrepHoverColor = "#644172";
-var testPrepLinkColor = "#644172";
-var testPrepLinkHoverColor = "#9A72AC";
-var collegeCareersMoreDomainColor = "#218270";
-var collegeCareersMoreSubjectColor = "#2C8D7B";
-var collegeCareersMoreTopicColor = "#329A86";
-var collegeCareersMoreHoverColor = "#218270";
-var collegeCareersMoreLinkColor = "#218270";
-var collegeCareersMoreLinkHoverColor = "#329A86";
-var satDomainColor = "#0084CE";
-var satSubjectColor = "#0084CE";
-var satTopicColor = "#0084CE";
-var satHoverColor = "#0084CE";
-var satLinkColor = "#0084CE";
-var satLinkHoverColor = "#0084CE";
-var colorProficient = "#1C758A";
-var colorPracticed = "rgb(158, 221, 235)";
-var colorMastery1 = "rgb(90, 197, 221)";
-var colorMastery2 = "rgb(42, 174, 203)";
-var colorMastery3 = "#1C758A";
-var colorSuggested = "#73982C";
-var colorReview = "#E35D04";
-var colorNotStarted = "#CCCCCC";
-var colorStarted = "#C7E5F7";
-var colorStruggling = "#C30202";
-var colorPersonal = "#00809C";
-var colorPractice = "#96D9FF";
-var colorEnergyPoints = "#005987";
-var pureSmMin$1 = "568px";
-var pureMdMin$1 = "768px";
-var pureLgMin$1 = "1024px";
-var pureXlMin$1 = "1200px";
-var pureXsMax$1 = "567px";
-var pureSmMax$1 = "767px";
-var pureMdMax$1 = "1023px";
-var pureLgMax$1 = "1199px";
+/**
+ * A tooltip to point to the focus of a highlight.
+ *
+ * We use the NewTooltip component, which positions itself not by coordinate,
+ * but by watching the position of a target DOM element. So, we render a 0x0
+ * DOM element, absolute-position it to the position of the the highlight
+ * focus, and point the tooltip at that 0x0 element.
+ *
+ * This technique enables NewTooltip to use its existing visibility-watching
+ * and scroll-tracking logic to effectively "watch" the focus of this
+ * highlight. So, we get lots of the repositioning logic for free! But we _do_
+ * still have to notify the tooltip to remeasure itself when the highlight
+ * focus _changes_.
+ */
 
-var globalConstants = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    black: black,
-    grayDarker: grayDarker,
-    grayDark: grayDark,
-    gray: gray,
-    grayLight: grayLight,
-    grayLighter: grayLighter,
-    white: white,
-    blue: blue,
-    blueDark: blueDark,
-    green: green,
-    red: red,
-    yellow: yellow,
-    orange: orange,
-    pink: pink,
-    purple: purple,
-    bodyBackground: bodyBackground,
-    textColor: textColor,
-    linkColor: linkColor,
-    linkColorHover: linkColorHover,
-    sansFontFamily: sansFontFamily,
-    serifFontFamily: serifFontFamily,
-    monoFontFamily: monoFontFamily,
-    baseFontSize: baseFontSize,
-    baseFontFamily: baseFontFamily,
-    baseLineHeight: baseLineHeight,
-    altFontFamily: altFontFamily,
-    headingsFontFamily: headingsFontFamily,
-    headingsFontWeight: headingsFontWeight,
-    headingsColor: headingsColor,
-    fontSizeLarge: fontSizeLarge,
-    fontSizeSmall: fontSizeSmall,
-    fontSizeMini: fontSizeMini,
-    paddingLarge: paddingLarge,
-    paddingSmall: paddingSmall,
-    paddingMini: paddingMini,
-    baseBorderRadius: baseBorderRadius,
-    borderRadiusLarge: borderRadiusLarge,
-    borderRadiusSmall: borderRadiusSmall,
-    tableBackground: tableBackground,
-    tableBackgroundAccent: tableBackgroundAccent,
-    tableBackgroundHover: tableBackgroundHover,
-    tableBorder: tableBorder,
-    btnBackground: btnBackground,
-    btnBackgroundHighlight: btnBackgroundHighlight,
-    btnBorder: btnBorder,
-    btnPrimaryBackground: btnPrimaryBackground,
-    btnPrimaryBackgroundHighlight: btnPrimaryBackgroundHighlight,
-    btnInfoBackground: btnInfoBackground,
-    btnInfoBackgroundHighlight: btnInfoBackgroundHighlight,
-    btnSuccessBackground: btnSuccessBackground,
-    btnSuccessBackgroundHighlight: btnSuccessBackgroundHighlight,
-    btnWarningBackground: btnWarningBackground,
-    btnWarningBackgroundHighlight: btnWarningBackgroundHighlight,
-    btnDangerBackground: btnDangerBackground,
-    btnDangerBackgroundHighlight: btnDangerBackgroundHighlight,
-    btnInverseBackground: btnInverseBackground,
-    btnInverseBackgroundHighlight: btnInverseBackgroundHighlight,
-    inputBackground: inputBackground,
-    inputBorder: inputBorder,
-    inputBorderRadius: inputBorderRadius,
-    inputDisabledBackground: inputDisabledBackground,
-    formActionsBackground: formActionsBackground,
-    inputHeight: inputHeight,
-    dropdownBackground: dropdownBackground,
-    dropdownBorder: dropdownBorder,
-    dropdownDividerTop: dropdownDividerTop,
-    dropdownDividerBottom: dropdownDividerBottom,
-    dropdownLinkColor: dropdownLinkColor,
-    dropdownLinkColorHover: dropdownLinkColorHover,
-    dropdownLinkColorActive: dropdownLinkColorActive,
-    dropdownLinkBackgroundActive: dropdownLinkBackgroundActive,
-    dropdownLinkBackgroundHover: dropdownLinkBackgroundHover,
-    zindexDropdown: zindexDropdown,
-    zindexPopover: zindexPopover,
-    zindexTooltip: zindexTooltip,
-    zindexFixedNavbar: zindexFixedNavbar,
-    zindexHeader: zindexHeader,
-    zindexModalBackdrop: zindexModalBackdrop,
-    zindexModal: zindexModal,
-    zindexAboveModal: zindexAboveModal,
-    iconSpritePath: iconSpritePath,
-    iconWhiteSpritePath: iconWhiteSpritePath,
-    placeholderText: placeholderText,
-    hrBorder: hrBorder,
-    horizontalComponentOffset: horizontalComponentOffset,
-    wellBackground: wellBackground,
-    navbarCollapseWidth: navbarCollapseWidth,
-    navbarCollapseDesktopWidth: navbarCollapseDesktopWidth,
-    navbarHeight: navbarHeight,
-    navbarBackgroundHighlight: navbarBackgroundHighlight,
-    navbarBackground: navbarBackground,
-    navbarBorder: navbarBorder,
-    navbarText: navbarText,
-    navbarLinkColor: navbarLinkColor,
-    navbarLinkColorHover: navbarLinkColorHover,
-    navbarLinkColorActive: navbarLinkColorActive,
-    navbarLinkBackgroundHover: navbarLinkBackgroundHover,
-    navbarLinkBackgroundActive: navbarLinkBackgroundActive,
-    navbarBrandColor: navbarBrandColor,
-    navbarInverseBackground: navbarInverseBackground,
-    navbarInverseBackgroundHighlight: navbarInverseBackgroundHighlight,
-    navbarInverseBorder: navbarInverseBorder,
-    navbarInverseText: navbarInverseText,
-    navbarInverseLinkColor: navbarInverseLinkColor,
-    navbarInverseLinkColorHover: navbarInverseLinkColorHover,
-    navbarInverseLinkColorActive: navbarInverseLinkColorActive,
-    navbarInverseLinkBackgroundHover: navbarInverseLinkBackgroundHover,
-    navbarInverseLinkBackgroundActive: navbarInverseLinkBackgroundActive,
-    navbarInverseSearchBackground: navbarInverseSearchBackground,
-    navbarInverseSearchBackgroundFocus: navbarInverseSearchBackgroundFocus,
-    navbarInverseSearchBorder: navbarInverseSearchBorder,
-    navbarInverseSearchPlaceholderColor: navbarInverseSearchPlaceholderColor,
-    navbarInverseBrandColor: navbarInverseBrandColor,
-    paginationBackground: paginationBackground,
-    paginationBorder: paginationBorder,
-    paginationActiveBackground: paginationActiveBackground,
-    heroUnitBackground: heroUnitBackground,
-    heroUnitHeadingColor: heroUnitHeadingColor,
-    heroUnitLeadColor: heroUnitLeadColor,
-    warningText: warningText,
-    warningBackground: warningBackground,
-    warningBorder: warningBorder,
-    errorText: errorText,
-    errorBackground: errorBackground,
-    errorBorder: errorBorder,
-    successText: successText,
-    successBackground: successBackground,
-    successBorder: successBorder,
-    infoText: infoText,
-    infoBackground: infoBackground,
-    infoBorder: infoBorder,
-    tooltipColor: tooltipColor,
-    tooltipBackground: tooltipBackground,
-    tooltipArrowWidth: tooltipArrowWidth,
-    tooltipArrowColor: tooltipArrowColor,
-    popoverBackground: popoverBackground,
-    popoverArrowWidth: popoverArrowWidth,
-    popoverArrowColor: popoverArrowColor,
-    popoverTitleBackground: popoverTitleBackground,
-    popoverArrowOuterWidth: popoverArrowOuterWidth,
-    popoverArrowOuterColor: popoverArrowOuterColor,
-    gridColumns: gridColumns,
-    gridColumnWidth: gridColumnWidth,
-    gridGutterWidth: gridGutterWidth,
-    gridRowWidth: gridRowWidth,
-    gridColumnWidth1200: gridColumnWidth1200,
-    gridGutterWidth1200: gridGutterWidth1200,
-    gridRowWidth1200: gridRowWidth1200,
-    gridColumnWidth768: gridColumnWidth768,
-    gridGutterWidth768: gridGutterWidth768,
-    gridRowWidth768: gridRowWidth768,
-    fluidGridColumnWidth: fluidGridColumnWidth,
-    fluidGridGutterWidth: fluidGridGutterWidth,
-    fluidGridColumnWidth1200: fluidGridColumnWidth1200,
-    fluidGridGutterWidth1200: fluidGridGutterWidth1200,
-    fluidGridColumnWidth768: fluidGridColumnWidth768,
-    fluidGridGutterWidth768: fluidGridGutterWidth768,
-    kaGreen: kaGreen,
-    kaGreenLight: kaGreenLight,
-    kaBlue: kaBlue,
-    kaBlueLight: kaBlueLight,
-    grayExtraDark: grayExtraDark,
-    grayExtraLight: grayExtraLight,
-    graySuperLight: graySuperLight,
-    whiteDark: whiteDark,
-    dark: dark,
-    blueDarkUnsaturated: blueDarkUnsaturated,
-    blueDarkSaturated: blueDarkSaturated,
-    blueLight: blueLight,
-    greenLight: greenLight,
-    greenDark: greenDark,
-    yellowGreen: yellowGreen,
-    okGreen: okGreen,
-    alertRed: alertRed,
-    coral: coral,
-    grayBlue: grayBlue,
-    lightPageBackground: lightPageBackground,
-    yclaBlue: yclaBlue,
-    yclaTeal: yclaTeal,
-    yclaTealDark: yclaTealDark,
-    yclaGreenDark: yclaGreenDark,
-    yclaGreen: yclaGreen,
-    learnstormBlue: learnstormBlue,
-    homepageBlue: homepageBlue,
-    backgroundBlue: backgroundBlue,
-    teacherSignupBlue: teacherSignupBlue,
-    homepageGreen: homepageGreen,
-    streakColor: streakColor,
-    facebookColor: facebookColor,
-    blueGoogleColor: blueGoogleColor,
-    redGoogleColor: redGoogleColor,
-    homepageColor: homepageColor,
-    lightTextColor: lightTextColor,
-    fontSizeTiny: fontSizeTiny,
-    fontSizeNormal: fontSizeNormal,
-    fontSizeMedium: fontSizeMedium,
-    fontSizeExtraLarge: fontSizeExtraLarge,
-    fontSizeHuge: fontSizeHuge,
-    fontSizeBakana: fontSizeBakana,
-    fontSizeBananas: fontSizeBananas,
-    fixedWidthFontFamily: fixedWidthFontFamily,
-    contentPadding: contentPadding,
-    primaryButtonBackground: primaryButtonBackground,
-    primaryButtonBorder: primaryButtonBorder,
-    buttonTextColor: buttonTextColor,
-    buttonBorderRadius: buttonBorderRadius,
-    basicBorderColor: basicBorderColor,
-    minContainerWidth: minContainerWidth,
-    maxContainerWidth: maxContainerWidth,
-    formHintColor: formHintColor,
-    guidelineExampleText: guidelineExampleText,
-    hoverCardWidth: hoverCardWidth,
-    menuHighlightColor: menuHighlightColor,
-    menuHighlightBorderColor: menuHighlightBorderColor,
-    menuActiveTextColor: menuActiveTextColor,
-    menuInactiveTextColor: menuInactiveTextColor,
-    menuSubheaderTextColor: menuSubheaderTextColor,
-    menuBorderColor: menuBorderColor,
-    unreadBackgroundColor: unreadBackgroundColor,
-    menuLineHeight: menuLineHeight,
-    menuSubheaderLineHeight: menuSubheaderLineHeight,
-    menuSubheaderFontSize: menuSubheaderFontSize,
-    notificationBarColor: notificationBarColor,
-    modalBodyTopPadding: modalBodyTopPadding,
-    modalDialogPadding: modalDialogPadding,
-    modalSectionPadding: modalSectionPadding,
-    mathDomain1: mathDomain1,
-    mathDomain2: mathDomain2,
-    mathDomain3: mathDomain3,
-    mathDomain4: mathDomain4,
-    partnerContentDomain1: partnerContentDomain1,
-    partnerContentDomain2: partnerContentDomain2,
-    partnerContentDomain3: partnerContentDomain3,
-    partnerContentDomain4: partnerContentDomain4,
-    csDomain1: csDomain1,
-    csDomain2: csDomain2,
-    csDomain3: csDomain3,
-    csDomain4: csDomain4,
-    economicsDomain1: economicsDomain1,
-    economicsDomain2: economicsDomain2,
-    economicsDomain3: economicsDomain3,
-    economicsDomain4: economicsDomain4,
-    collegeCareersMoreDomain1: collegeCareersMoreDomain1,
-    collegeCareersMoreDomain2: collegeCareersMoreDomain2,
-    collegeCareersMoreDomain3: collegeCareersMoreDomain3,
-    collegeCareersMoreDomain4: collegeCareersMoreDomain4,
-    humanitiesDomain1: humanitiesDomain1,
-    humanitiesDomain2: humanitiesDomain2,
-    humanitiesDomain3: humanitiesDomain3,
-    humanitiesDomain4: humanitiesDomain4,
-    gtpDomain1: gtpDomain1,
-    gtpDomain2: gtpDomain2,
-    gtpDomain3: gtpDomain3,
-    gtpDomain4: gtpDomain4,
-    scienceDomain1: scienceDomain1,
-    scienceDomain2: scienceDomain2,
-    scienceDomain3: scienceDomain3,
-    scienceDomain4: scienceDomain4,
-    testPrepDomain1: testPrepDomain1,
-    testPrepDomain2: testPrepDomain2,
-    testPrepDomain3: testPrepDomain3,
-    testPrepDomain4: testPrepDomain4,
-    defaultDomain1: defaultDomain1,
-    defaultDomain2: defaultDomain2,
-    defaultDomain3: defaultDomain3,
-    defaultDomain4: defaultDomain4,
-    defaultDomainColor: defaultDomainColor,
-    defaultSubjectColor: defaultSubjectColor,
-    defaultTopicColor: defaultTopicColor,
-    defaultHoverColor: defaultHoverColor,
-    defaultLinkColor: defaultLinkColor,
-    defaultLinkHoverColor: defaultLinkHoverColor,
-    scienceDomainColor: scienceDomainColor,
-    scienceSubjectColor: scienceSubjectColor,
-    scienceTopicColor: scienceTopicColor,
-    scienceHoverColor: scienceHoverColor,
-    scienceLinkColor: scienceLinkColor,
-    scienceLinkHoverColor: scienceLinkHoverColor,
-    humanitiesDomainColor: humanitiesDomainColor,
-    humanitiesSubjectColor: humanitiesSubjectColor,
-    humanitiesTopicColor: humanitiesTopicColor,
-    humanitiesHoverColor: humanitiesHoverColor,
-    humanitiesLinkColor: humanitiesLinkColor,
-    humanitiesLinkHoverColor: humanitiesLinkHoverColor,
-    economicsDomainColor: economicsDomainColor,
-    economicsSubjectColor: economicsSubjectColor,
-    economicsTopicColor: economicsTopicColor,
-    economicsHoverColor: economicsHoverColor,
-    economicsLinkColor: economicsLinkColor,
-    economicsLinkHoverColor: economicsLinkHoverColor,
-    csDomainColor: csDomainColor,
-    csSubjectColor: csSubjectColor,
-    csTopicColor: csTopicColor,
-    csHoverColor: csHoverColor,
-    csLinkColor: csLinkColor,
-    csLinkHoverColor: csLinkHoverColor,
-    partnerContentDomainColor: partnerContentDomainColor,
-    partnerContentSubjectColor: partnerContentSubjectColor,
-    partnerContentTopicColor: partnerContentTopicColor,
-    partnerContentHoverColor: partnerContentHoverColor,
-    partnerContentLinkColor: partnerContentLinkColor,
-    partnerContentLinkHoverColor: partnerContentLinkHoverColor,
-    essayDomainColor: essayDomainColor,
-    mathDomainColor: mathDomainColor,
-    mathSubjectColor: mathSubjectColor,
-    mathTopicColor: mathTopicColor,
-    mathHoverColor: mathHoverColor,
-    mathLinkColor: mathLinkColor,
-    mathLinkHoverColor: mathLinkHoverColor,
-    testPrepDomainColor: testPrepDomainColor,
-    testPrepSubjectColor: testPrepSubjectColor,
-    testPrepTopicColor: testPrepTopicColor,
-    testPrepHoverColor: testPrepHoverColor,
-    testPrepLinkColor: testPrepLinkColor,
-    testPrepLinkHoverColor: testPrepLinkHoverColor,
-    collegeCareersMoreDomainColor: collegeCareersMoreDomainColor,
-    collegeCareersMoreSubjectColor: collegeCareersMoreSubjectColor,
-    collegeCareersMoreTopicColor: collegeCareersMoreTopicColor,
-    collegeCareersMoreHoverColor: collegeCareersMoreHoverColor,
-    collegeCareersMoreLinkColor: collegeCareersMoreLinkColor,
-    collegeCareersMoreLinkHoverColor: collegeCareersMoreLinkHoverColor,
-    satDomainColor: satDomainColor,
-    satSubjectColor: satSubjectColor,
-    satTopicColor: satTopicColor,
-    satHoverColor: satHoverColor,
-    satLinkColor: satLinkColor,
-    satLinkHoverColor: satLinkHoverColor,
-    colorProficient: colorProficient,
-    colorPracticed: colorPracticed,
-    colorMastery1: colorMastery1,
-    colorMastery2: colorMastery2,
-    colorMastery3: colorMastery3,
-    colorSuggested: colorSuggested,
-    colorReview: colorReview,
-    colorNotStarted: colorNotStarted,
-    colorStarted: colorStarted,
-    colorStruggling: colorStruggling,
-    colorPersonal: colorPersonal,
-    colorPractice: colorPractice,
-    colorEnergyPoints: colorEnergyPoints,
-    pureSmMin: pureSmMin$1,
-    pureMdMin: pureMdMin$1,
-    pureLgMin: pureLgMin$1,
-    pureXlMin: pureXlMin$1,
-    pureXsMax: pureXsMax$1,
-    pureSmMax: pureSmMax$1,
-    pureMdMax: pureMdMax$1,
-    pureLgMax: pureLgMax$1
-});
-
-/**
- * A default set of media queries to use for different screen sizes. Based on
- * the breakpoints from purecss.
- *
- * Use like:
- *   StyleSheet.create({
- *       blah: {
- *           [mediaQueries.xs]: {
- *
- *           },
- *       },
- *   });
- */
-var {
-  pureXsMax,
-  pureSmMin,
-  pureSmMax,
-  pureMdMin,
-  pureMdMax,
-  pureLgMin,
-  pureLgMax,
-  pureXlMin
-} = constants$1;
-var mediaQueries = {
-  xs: "@media screen and (max-width: ".concat(pureXsMax, ")"),
-  sm: "@media screen and (min-width: ".concat(pureSmMin, ") and ") + "(max-width: ".concat(pureSmMax, ")"),
-  md: "@media screen and (min-width: ".concat(pureMdMin, ") and ") + "(max-width: ".concat(pureMdMax, ")"),
-  lg: "@media screen and (min-width: ".concat(pureLgMin, ") and ") + "(max-width: ".concat(pureLgMax, ")"),
-  xl: "@media screen and (min-width: ".concat(pureXlMin, ")"),
-  xsOrSmaller: "@media screen and (max-width: ".concat(pureXsMax, ")"),
-  smOrSmaller: "@media screen and (max-width: ".concat(pureSmMax, ")"),
-  mdOrSmaller: "@media screen and (max-width: ".concat(pureMdMax, ")"),
-  lgOrSmaller: "@media screen and (max-width: ".concat(pureLgMax, ")"),
-  smOrLarger: "@media screen and (min-width: ".concat(pureSmMin, ")"),
-  mdOrLarger: "@media screen and (min-width: ".concat(pureMdMin, ")"),
-  lgOrLarger: "@media screen and (min-width: ".concat(pureLgMin, ")"),
-  xlOrLarger: "@media screen and (min-width: ".concat(pureXlMin, ")")
-};
-
-var colors$1 = {
-  white: "#FFFFFF",
-  gray98: "#FAFAFA",
-  gray97: "#F6F7F7",
-  gray95: "#F0F1F2",
-  gray90: "#E3E5E6",
-  gray85: "#D6D8DA",
-  gray76: "#BABEC2",
-  gray72: "#999A9D",
-  gray68: "#888D93",
-  gray55: "#707378",
-  gray41: "#626569",
-  gray25: "#3B3E40",
-  gray17: "#21242C",
-  gray10: "#1499af",
-  black: "#000000",
-  // These colors are pulled out from constants.js, which is itself generated
-  // from variables.less. We should probably avoid duplicating these here.
-  alertRed,
-  homepageBlue,
-  kaBlue,
-  kaBlueLight,
-  kaGreen,
-  kaGreenLight,
-  learnstormBlue,
-  backgroundBlue,
-  adminGreen: "#78C008",
-  kaBlueExtraLight: "#39c2db",
-  kaBlueHover: "#0c7f99",
-  kaGreenHover: "#518005",
-  // Domain-agnostic colors related to the study guide experience in the
-  // content library.
-  skyDark: "#001f4d",
-  recommendationGold: "#ffbe26",
-  starAced: "#ff9c39",
-  // We interploate the domain colors into this colors object for
-  // historical reasons, but everyone using domain-specific colors
-  // should switch to using the domainColors() function to look up
-  // colors instead.
-  //
-  // TODO(davidflanagan): remove this line once everything is
-  // working correctly with the domainColors() accessor.
-  // ...domainToColorsMap,
-  // mission: missionColors,
-  // Colors for various OAuth providers
-  google: "#C1432f",
-  modernGoogle: "#be2612",
-  modernGoogleHover: "#8c1c0d",
-  facebook: "#4267B2",
-  modernFacebook: "#4267B2",
-  modernFacebookHover: "#00294a",
-  wonderBlocksGold: "#FFB100",
-  wonderBlocksLightBlue: "#37C5FD",
-  // We're using rgba instead of opacity to avoid affecting the focus outline
-  // when we just want to make the color transparent.
-  breadcrumbs: "rgba(255, 255, 255, 0.7)"
-};
-var borderRadius = 4;
-var breadcrumbStyles = {
-  color: colors$1.breadcrumbs,
-  fontFamily: "inherit",
-  fontSize: 15,
-  fontWeight: "bold",
-  letterSpacing: 0.8,
-  lineHeight: "19px",
-  textTransform: "uppercase",
-  // Disable subpixel antialiasing for OSX (improves light on dark text)
-  MozOsxFontSmoothing: "grayscale",
-  WebkitFontSmoothing: "antialiased"
-};
-var fonts = {
-  // The body of the page is setup to use 'Helvetica' by default and
-  // 'Lato' if/once it downloads. For your elements to follow this
-  // pattern, all you need is to make the text in your element
-  // inherit from the body using the "inherit" value.
-  regular: "inherit"
-};
-var typography = {
-  // For subject names
-  subjectHeadingDesktop: {
-    fontFamily: "inherit",
-    fontSize: 50,
-    fontWeight: "bold",
-    lineHeight: "61px"
-  },
-  subjectHeadingMobile: {
-    fontFamily: "inherit",
-    fontSize: 35,
-    fontWeight: "bold",
-    lineHeight: "37px"
-  },
-  // For the most important thing on the page
-  conceptHeadingDesktop: {
-    fontFamily: "inherit",
-    fontSize: 35,
-    fontWeight: "bold",
-    lineHeight: "37px"
-  },
-  conceptHeadingMobile: {
-    fontFamily: "inherit",
-    fontSize: 23,
-    fontWeight: "bold",
-    lineHeight: "27px"
-  },
-  // For sections or modules
-  subheadingDesktop: {
-    fontFamily: "inherit",
-    fontSize: 23,
-    fontWeight: "bold",
-    lineHeight: "27px"
-  },
-  subheadingMobile: {
-    fontFamily: "inherit",
-    fontSize: 20,
-    fontWeight: "bold",
-    lineHeight: "24px"
-  },
-  smallSubheadingDesktop: {
-    fontFamily: "inherit",
-    fontSize: 20,
-    lineHeight: 1.25
-  },
-  smallSubheadingMobile: {
-    fontFamily: "inherit",
-    fontSize: 15,
-    lineHeight: 1.25
-  },
-  // For callouts
-  smallHeading: {
-    color: colors$1.gray25,
-    fontFamily: "inherit",
-    fontSize: 17,
-    fontWeight: "bold",
-    lineHeight: "23px"
-  },
-  smallHeadingMobile: {
-    color: colors$1.gray25,
-    fontFamily: "inherit",
-    fontSize: 15,
-    fontWeight: "bold",
-    lineHeight: "18px"
-  },
-  // Accent headings
-  accentHeading: {
-    color: colors$1.gray68,
-    fontFamily: "inherit",
-    fontSize: 15,
-    fontWeight: "bold",
-    letterSpacing: 0.8,
-    lineHeight: "19px",
-    textTransform: "uppercase"
-  },
-  bodyLarge: {
-    // For articles with multiple paragraphs
-    fontFamily: fonts.regular,
-    fontSize: 20,
-    lineHeight: "30px"
-  },
-  bodySmall: {
-    // For small blocks of copy
-    fontFamily: fonts.regular,
-    fontSize: 17,
-    fontWeight: "normal",
-    lineHeight: "23px"
-  },
-  bodySmallBold: {
-    // For small blocks of copy
-    fontFamily: fonts.regular,
-    fontSize: 17,
-    fontWeight: "bold",
-    lineHeight: "23px"
-  },
-  bodyXsmall: {
-    // For metadata, descriptions, etc
-    fontFamily: fonts.regular,
-    fontSize: 15,
-    lineHeight: "22px"
-  },
-  bodyXsmallBold: {
-    // For emphasized metadata, descriptions, etc
-    fontFamily: "inherit",
-    fontSize: 15,
-    fontWeight: "bold",
-    lineHeight: "22px"
-  },
-  breadcrumb: breadcrumbStyles,
-  // For in-page tabs, breadcrumbs
-  breadcrumbSmall: _objectSpread2(_objectSpread2({}, breadcrumbStyles), {}, {
-    fontSize: 12,
-    lineHeight: "13px"
-  }),
-  labelLarge: {
-    // For chiclets and thumbnail titles
-    fontFamily: "inherit",
-    fontSize: 23,
-    fontWeight: "bold",
-    lineHeight: "27px"
-  },
-  labelMedium: {
-    // For chiclets and thumbnail titles
-    fontFamily: "inherit",
-    fontSize: 15,
-    fontWeight: "bold",
-    lineHeight: "18px"
-  },
-  labelSmall: {
-    // Generally used with labelLarge, for breadcrumbs in thumbnails
-    fontFamily: fonts.regular,
-    fontSize: 12,
-    lineHeight: "14px"
-  },
-  caption: {
-    // For image captions
-    fontFamily: fonts.regular,
-    fontSize: 14,
-    fontStyle: "italic",
-    lineHeight: "17px"
-  },
-  desktopScalingOnMobile: {
-    // For when you need Mobile Safari and friends to stick to desktop
-    // sizes
-    MozTextSizeAdjust: "100%",
-    MsTextSizeAdjust: "100%",
-    WebkitTextSizeAdjust: "100%"
-  },
-  // TODO (josh): This should move to within <ModalHeader>
-  modalSubtitle: {
-    fontSize: 12,
-    lineHeight: 1.65,
-    // NOTE (josh): Font smoothing used here to create a 'medium' weight
-    // font, between normal and bold, on webkit browsers.
-    // This prop is an a11y risk when used on non-bold text, since it
-    // makes text very thin, but it's fine on bold text.
-    WebkitFontSmoothing: "antialiased",
-    fontWeight: "bold"
-  },
-  // HACK(kevinb): temporary wonder blocks styles for header only
-  // TODO(kevinb): use components from wonder-blocks-typography instead
-  wonderBlocksHeader: {
-    paddingLeft: 16,
-    paddingRight: 16,
-    paddingBottom: 24,
-    paddingTop: 34,
-    [mediaQueries.mdOrLarger]: {
-      paddingBottom: 32
-    }
-  },
-  // HACK(kevinb): temporary wonder blocks styles for header only
-  // TODO(kevinb): use components from wonder-blocks-typography instead
-  wonderBlocksTitle: {
-    color: colors$1.white,
-    fontWeight: 900,
-    // "Black" weight
-    fontSize: 28,
-    lineHeight: "32px",
-    margin: 0,
-    [mediaQueries.mdOrLarger]: {
-      fontSize: 36,
-      lineHeight: "40px"
-    }
-  },
-  // HACK(kevinb): temporary wonder blocks styles for header only
-  // TODO(kevinb): use components from wonder-blocks-typography instead
-  wonderBlocksLabelLarge: {
-    fontSize: 16,
-    lineHeight: "20px",
-    fontWeight: 700 // Bold
-
-  }
-};
-
-var globalStyles = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    colors: colors$1,
-    borderRadius: borderRadius,
-    fonts: fonts,
-    typography: typography
-});
-
-var DefaultPropValues = Object.freeze({
-  side: "top",
-  offset: 0,
-  offsetFrom: "bubble",
-  tooltipMargin: 0,
-  noPadding: false,
-  color: colors$1.gray17,
-  inverted: false,
-  dismissOnClickClose: false,
-  toggleOnHover: true,
-  showOnMount: false
-});
+class HighlightTooltip extends React.PureComponent {
+  _getFocusRect() {
+    var {
+      focusNode,
+      focusOffset,
+      offsetParent
+    } = this.props; // Get a range of *just* the focus point of the selection.
 
-class NewTooltip extends React.Component {
-  constructor(props) {
-    super(props);
+    var focusRange = document.createRange();
+    focusRange.setStart(focusNode, focusOffset);
+    focusRange.setEnd(focusNode, focusOffset); // Then, get the bounding box of the collapsed range. This will be a
+    // zero-width rectangle, but still have positioning information, which
+    // we can use the position the tooltip.
+    //
+    // NOTE(mdr): If we used getClientBoundingRect here instead, Safari
+    //     would return an unpositioned rect. But all tested browsers at
+    //     time of writing (latest Chrome, Firefox, Safari) return at least
+    //     one rectangle from getClientRects, and it's well-positioned.
 
-    _defineProperty(this, "_handleDismiss", () => {
-      if (this.props.dismissed == null) {
-        // We're serving as an "uncontrolled component": our dismissed
-        // state is managed by us, not by incoming props.
-        this.setState({
-          dismissed: true
-        });
-      }
+    var focusRect = focusRange.getClientRects()[0]; // NOTE(mdr): ...except in the case where the focus is between two
+    //     paragraphs, in which case the focus range has no client rects?
+    //     Not sure why, or in what browsers (only noticed in Chrome 60),
+    //     but let's catch that case and bail out.
+    // TODO(mdr): Instead, we should somehow walk back the range until we
+    //     find an appropriate position for the tooltip. Sounds tricky!
 
-      this.props.onDismiss && this.props.onDismiss();
-    });
-
-    _defineProperty(this, "_popoverContentColor", () => {
-      var {
-        inverted,
-        color
-      } = this.props;
-
-      if (inverted) {
-        return "darkBlue";
-      } else if (color === "blue") {
-        return "blue";
-      }
-
-      return "white";
-    });
-
-    this.state = {
-      dismissed: props.dismissed != null ? props.dismissed : false,
-      hovered: false
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (Object.keys(nextProps).includes("dismissed")) {
-      this.setState({
-        dismissed: nextProps.dismissed
-      });
-    }
-  }
-
-  _shouldShowTooltip() {
-    var {
-      toggleOnHover,
-      showOnMount
-    } = this.props;
-    var {
-      dismissed
-    } = this.state; // If the tooltip was dismissed, or we're not sure yet, don't show it.
-
-    if (dismissed) {
-      return false;
-    } // If the tooltip should show on mount, and nothing has changed yet
-    // that would cause it to hide (i.e., the `dismissed` case above fell
-    // through), show the tooltip.
-
-
-    if (showOnMount) {
-      return true;
-    } // If the target is hovered, and our visibility is hover-based, show
-    // the tooltip.
-
-
-    if (toggleOnHover && this.state.hovered) {
-      return true;
-    }
-
-    return false;
-  }
-
-  render() {
-    var {
-      side,
-      children,
-      content,
-      dismissOnClickClose
-    } = this.props;
-    var {
-      onMouseEnter: _onMouseEnter,
-      onMouseLeave: _onMouseLeave
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Popover, {
-      content: /*#__PURE__*/React.createElement(PopoverContentCore, {
-        color: this._popoverContentColor(),
-        closeButtonVisible: dismissOnClickClose,
-        style: {}
-      }, content),
-      placement: side,
-      opened: this._shouldShowTooltip(),
-      onClose: this._handleDismiss,
-      dismissEnabled: false,
-      testId: "question-id"
-    }, /*#__PURE__*/React.createElement("div", {
-      onMouseEnter: () => {
-        _onMouseEnter && _onMouseEnter();
-        this.setState({
-          hovered: true
-        });
-      },
-      onMouseLeave: () => {
-        _onMouseLeave && _onMouseLeave();
-        this.setState({
-          hovered: false
-        });
-      }
-    }, children));
-  }
-
-}
-
-_defineProperty(NewTooltip, "defaultProps", DefaultPropValues);
-
-class HighlightTooltip extends React.PureComponent {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "_tooltip", void 0);
-  }
-
-  _getFocusRect() {
-    var {
-      focusNode,
-      focusOffset,
-      offsetParent
-    } = this.props; // Get a range of *just* the focus point of the selection.
-
-    var focusRange = document.createRange();
-    focusRange.setStart(focusNode, focusOffset);
-    focusRange.setEnd(focusNode, focusOffset); // Then, get the bounding box of the collapsed range. This will be a
-    // zero-width rectangle, but still have positioning information, which
-    // we can use the position the tooltip.
-    //
-    // NOTE(mdr): If we used getClientBoundingRect here instead, Safari
-    //     would return an unpositioned rect. But all tested browsers at
-    //     time of writing (latest Chrome, Firefox, Safari) return at least
-    //     one rectangle from getClientRects, and it's well-positioned.
-
-    var focusRect = focusRange.getClientRects()[0]; // NOTE(mdr): ...except in the case where the focus is between two
-    //     paragraphs, in which case the focus range has no client rects?
-    //     Not sure why, or in what browsers (only noticed in Chrome 60),
-    //     but let's catch that case and bail out.
-    // TODO(mdr): Instead, we should somehow walk back the range until we
-    //     find an appropriate position for the tooltip. Sounds tricky!
-
-    if (!focusRect) {
-      Log.log("[Highlighting] Known bug: Could not determine the focus " + 'position, so did not show an "Add Highlight" tooltip. ' + "https://app.asana.com/0/329800276300868/413878480039713 " + "(see also /r/asana-links)");
-      return null;
-    } // Compute the desired position of the tooltip relative to the offset
-    // parent.
+    if (!focusRect) {
+      Log.log("[Highlighting] Known bug: Could not determine the focus " + 'position, so did not show an "Add Highlight" tooltip. ' + "https://app.asana.com/0/329800276300868/413878480039713 " + "(see also /r/asana-links)");
+      return null;
+    } // Compute the desired position of the tooltip relative to the offset
+    // parent.
 
 
     var {
@@ -25791,29 +24653,30 @@ class HighlightTooltip extends React.PureComponent {
 
     if (!focusRect) {
       return null;
-    }
+    } // using div instead of TooltipContent because
+    // TooltipContent wouldn't let me overwrite
+    // user-select and onClick
+
 
     var content = /*#__PURE__*/React.createElement("div", {
-      className: css(styles$x.tooltipLabel)
+      className: css(styles$x.tooltipLabel),
+      onClick: this.props.onClick
     }, this.props.label);
-    return /*#__PURE__*/React.createElement(NewTooltip, {
-      content: content,
-      color: colors$1.kaBlue,
-      inverted: true,
-      onClick: this.props.onClick,
+    var style = {
+      position: "absolute",
+      left: focusRect.left,
+      // offset the spacing WB provides around tooltips
+      top: "calc(".concat(Math.round(focusRect.top), "px + 0.95em)"),
+      height: 0
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
       onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave,
-      toggleOnHover: false,
-      showOnMount: true,
-      ref: e => this._tooltip = e
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: "absolute",
-        left: focusRect.left,
-        top: focusRect.top,
-        height: focusRect.height
-      }
-    }));
+      onMouseLeave: this.props.onMouseLeave
+    }, /*#__PURE__*/React.createElement(Tooltip$1, {
+      content: content,
+      opened: true
+    }, /*#__PURE__*/React.createElement("div", null)));
   }
 
 }
@@ -25825,7 +24688,10 @@ var styles$x = StyleSheet.create({
     // the user accidentally selects the "Add highlight" tooltip text, then
     // we lose our reference to the _actual_ text they want to highlight,
     // and the "Add highlight" action fails.
-    userSelect: "none"
+    userSelect: "none",
+    fontFamily: "\"Lato\", sans-serif",
+    padding: "10px ".concat(Spacing.medium_16, "px"),
+    cursor: "pointer"
   }
 });
 
@@ -25976,7 +24842,7 @@ class SelectionTracker extends React.PureComponent {
     });
 
     _defineProperty(this, "_handleSelectionChange", () => {
-      this._updateTrackedSelection(this.props.buildHighlight);
+      this._updateTrackedSelection();
 
       if (this.state.mouseState === "down") {
         this.setState({
@@ -26002,15 +24868,15 @@ class SelectionTracker extends React.PureComponent {
     this._updateListeners(false, this.props.enabled);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.buildHighlight !== nextProps.buildHighlight) {
+  componentDidUpdate(prevProps) {
+    if (this.props.buildHighlight !== prevProps.buildHighlight) {
       // The highlight-building function changed, so the
       // proposedHighlight we built with it might be different, or no
       // longer be valid. Update accordingly.
-      this._updateTrackedSelection(nextProps.buildHighlight);
+      this._updateTrackedSelection();
     }
 
-    this._updateListeners(this.props.enabled, nextProps.enabled);
+    this._updateListeners(prevProps.enabled, this.props.enabled);
   }
 
   componentWillUnmount() {
@@ -26067,15 +24933,18 @@ class SelectionTracker extends React.PureComponent {
     };
   }
   /**
-   * Compute the current TrackedSelection from the document state.
+   * Compute and update the TrackedSelection to reflect the document state.
    */
 
 
-  _computeTrackedSelection(buildHighlight) {
+  _updateTrackedSelection() {
     var focusAndRange = this._computeFocusAndRange();
 
     if (!focusAndRange) {
-      return null;
+      this.setState({
+        trackedSelection: null
+      });
+      return;
     }
 
     var {
@@ -26083,26 +24952,20 @@ class SelectionTracker extends React.PureComponent {
       focusOffset,
       range
     } = focusAndRange;
-    var proposedHighlight = buildHighlight(range);
+    var proposedHighlight = this.props.buildHighlight(range);
 
     if (!proposedHighlight) {
-      return null;
+      this.setState({
+        trackedSelection: null
+      });
+      return;
     }
 
-    return {
+    var trackedSelection = {
       focusNode,
       focusOffset,
       proposedHighlight
     };
-  }
-  /**
-   * Update the TrackedSelection to reflect the document state.
-   */
-
-
-  _updateTrackedSelection(buildHighlight) {
-    var trackedSelection = this._computeTrackedSelection(buildHighlight);
-
     this.setState({
       trackedSelection
     });
@@ -26481,10 +25344,6 @@ var styles$w = StyleSheet.create({
   }
 });
 
-var getLineHeightForNode = (line1, line2) => {
-  return $(line2).offset().top - $(line1).offset().top;
-};
-
 function getInitialParseState() {
   return {
     currentRef: [],
@@ -26853,65 +25712,40 @@ var PassageMarkdown = {
   getInitialParseState
 };
 
-// A fake paragraph to measure the line height of the passage. In CSS we always
-// set the line height to 22 pixels, but when using the browser zoom feature,
-// the line height often ends up being a fractional number of pixels close to
-// 22 pixels.
+// A fake paragraph to measure the line height of the passage,
+// so we can adapt to browser zoom
 class LineHeightMeasurer extends React.Component {
   constructor() {
     super(...arguments);
 
-    _defineProperty(this, "_cachedLineHeight", void 0);
-
-    _defineProperty(this, "body", void 0);
-
-    _defineProperty(this, "end", void 0);
+    _defineProperty(this, "_line", void 0);
   }
 
   measureLineHeight() {
-    if (typeof this._cachedLineHeight !== "number") {
-      this.forceMeasureLineHeight();
+    if (!this._line) {
+      return 0;
     }
 
-    return this._cachedLineHeight;
-  }
-
-  forceMeasureLineHeight() {
-    var body = this.body;
-    var end = this.end;
-
-    if (!body || !end) {
-      return;
-    } // Add some text which magically fills an entire line.
-
-
-    body.textContent = " \u0080"; // Now, the line height is the difference between the top of the
-    // second line and the top of the first line.
-
-    this._cachedLineHeight = getLineHeightForNode(body, end); // Clear out the first line so it doesn't overlap the passage.
-
-    body.textContent = "";
+    return this._line.clientHeight;
   }
 
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$v.measurer)
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      ref: _ref => this.body = _ref,
+      className: css(styles$v.measurer),
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: _ref => this._line = _ref,
       className: "paragraph"
-    }), /*#__PURE__*/React.createElement("div", {
-      ref: _ref2 => this.end = _ref2
-    })));
+    }, "Line Height Measurement"));
   }
 
 }
-
 var styles$v = StyleSheet.create({
   measurer: {
     position: "absolute",
-    width: "100%",
     top: 0,
     left: 0,
+    visibility: "hidden",
     // keep from blocking text selection
     zIndex: -1
   }
@@ -26958,7 +25792,7 @@ class Passage extends React.Component {
       // listen for resize events.
 
 
-      (_this$_lineHeightMeas = this._lineHeightMeasurerRef) === null || _this$_lineHeightMeas === void 0 ? void 0 : _this$_lineHeightMeas.forceMeasureLineHeight();
+      (_this$_lineHeightMeas = this._lineHeightMeasurerRef) === null || _this$_lineHeightMeas === void 0 ? void 0 : _this$_lineHeightMeas.measureLineHeight();
 
       this._updateState();
     }, 500);
@@ -27252,9 +26086,9 @@ class Passage extends React.Component {
       onSerializedHighlightsUpdate: this._handleSerializedHighlightsUpdate,
       serializedHighlights: this.props.highlights
     }, /*#__PURE__*/React.createElement("div", {
-      ref: _ref4 => this._contentRef = _ref4
+      ref: _ref3 => this._contentRef = _ref3
     }, /*#__PURE__*/React.createElement(LineHeightMeasurer, {
-      ref: _ref3 => this._lineHeightMeasurerRef = _ref3
+      ref: _ref2 => this._lineHeightMeasurerRef = _ref2
     }), PassageMarkdown.output(parsed)));
   }
 
@@ -27522,6 +26356,45 @@ var PassageRef$1 = {
   }
 };
 
+/**
+ * A default set of media queries to use for different screen sizes. Based on
+ * the breakpoints from purecss.
+ *
+ * Use like:
+ *   StyleSheet.create({
+ *       blah: {
+ *           [mediaQueries.xs]: {
+ *
+ *           },
+ *       },
+ *   });
+ */
+var {
+  pureXsMax: pureXsMax$1,
+  pureSmMin: pureSmMin$1,
+  pureSmMax: pureSmMax$1,
+  pureMdMin: pureMdMin$1,
+  pureMdMax: pureMdMax$1,
+  pureLgMin: pureLgMin$1,
+  pureLgMax: pureLgMax$1,
+  pureXlMin: pureXlMin$1
+} = constants$1;
+var mediaQueries = {
+  xs: "@media screen and (max-width: ".concat(pureXsMax$1, ")"),
+  sm: "@media screen and (min-width: ".concat(pureSmMin$1, ") and ") + "(max-width: ".concat(pureSmMax$1, ")"),
+  md: "@media screen and (min-width: ".concat(pureMdMin$1, ") and ") + "(max-width: ".concat(pureMdMax$1, ")"),
+  lg: "@media screen and (min-width: ".concat(pureLgMin$1, ") and ") + "(max-width: ".concat(pureLgMax$1, ")"),
+  xl: "@media screen and (min-width: ".concat(pureXlMin$1, ")"),
+  xsOrSmaller: "@media screen and (max-width: ".concat(pureXsMax$1, ")"),
+  smOrSmaller: "@media screen and (max-width: ".concat(pureSmMax$1, ")"),
+  mdOrSmaller: "@media screen and (max-width: ".concat(pureMdMax$1, ")"),
+  lgOrSmaller: "@media screen and (max-width: ".concat(pureLgMax$1, ")"),
+  smOrLarger: "@media screen and (min-width: ".concat(pureSmMin$1, ")"),
+  mdOrLarger: "@media screen and (min-width: ".concat(pureMdMin$1, ")"),
+  lgOrLarger: "@media screen and (min-width: ".concat(pureLgMin$1, ")"),
+  xlOrLarger: "@media screen and (min-width: ".concat(pureXlMin$1, ")")
+};
+
 var {
   zIndexAboveScratchpad,
   zIndexInteractiveComponent,
@@ -29251,6 +28124,129 @@ class Radio$1 extends React.Component {
     });
   }
 
+  static validate(userInput, rubric) {
+    var numSelected = userInput.choicesSelected.reduce((sum, selected) => {
+      return sum + (selected ? 1 : 0);
+    }, 0);
+
+    if (numSelected === 0) {
+      return {
+        type: "invalid",
+        message: null
+      };
+    }
+
+    if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
+      return {
+        type: "invalid",
+        message: i18n._("Please choose the correct number of answers.")
+      }; // If NOTA and some other answer are checked, ...
+    }
+
+    if (userInput.noneOfTheAboveSelected && numSelected > 1) {
+      return {
+        type: "invalid",
+        message: i18n._("'None of the above' may not be selected " + "when other answers are selected.")
+      };
+    }
+
+    var correct = userInput.choicesSelected.every((selected, i) => {
+      var isCorrect;
+
+      if (userInput.noneOfTheAboveIndex === i) {
+        isCorrect = rubric.choices.every((choice, j) => {
+          return i === j || !choice.correct;
+        });
+      } else {
+        isCorrect = !!rubric.choices[i].correct;
+      }
+
+      return isCorrect === selected;
+    });
+    return {
+      type: "points",
+      earned: correct ? 1 : 0,
+      total: 1,
+      message: null
+    };
+  }
+
+  static getUserInputFromProps(props) {
+    // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
+    // future timeline implementers: this used to be {value: i} before
+    // multiple select was added)
+    if (props.choiceStates) {
+      var noneOfTheAboveIndex = null;
+      var noneOfTheAboveSelected = false;
+      var choiceStates = props.choiceStates;
+      var choicesSelected = choiceStates.map(() => false);
+      var countChoices = props.countChoices;
+      var numCorrect = props.numCorrect;
+
+      for (var i = 0; i < choicesSelected.length; i++) {
+        var index = props.choices[i].originalIndex;
+        choicesSelected[index] = choiceStates[i].selected;
+
+        if (props.choices[i].isNoneOfTheAbove) {
+          noneOfTheAboveIndex = index;
+
+          if (choicesSelected[i]) {
+            noneOfTheAboveSelected = true;
+          }
+        }
+      }
+
+      return {
+        countChoices,
+        choicesSelected,
+        numCorrect,
+        noneOfTheAboveIndex,
+        noneOfTheAboveSelected
+      }; // Support legacy choiceState implementation
+    }
+    /* istanbul ignore if - props.values is deprecated */
+
+
+    var {
+      values
+    } = props;
+
+    if (values) {
+      var _noneOfTheAboveIndex = null;
+      var _noneOfTheAboveSelected = false;
+      var _choicesSelected = [...values];
+      var _countChoices = props.countChoices;
+      var _numCorrect = props.numCorrect;
+      var valuesLength = values.length;
+
+      for (var _i = 0; _i < valuesLength; _i++) {
+        var _index = props.choices[_i].originalIndex;
+        _choicesSelected[_index] = values[_i];
+
+        if (props.choices[_i].isNoneOfTheAbove) {
+          _noneOfTheAboveIndex = _index;
+
+          if (_choicesSelected[_i]) {
+            _noneOfTheAboveSelected = true;
+          }
+        }
+      }
+
+      return {
+        choicesSelected: _choicesSelected,
+        noneOfTheAboveIndex: _noneOfTheAboveIndex,
+        noneOfTheAboveSelected: _noneOfTheAboveSelected,
+        countChoices: _countChoices,
+        numCorrect: _numCorrect
+      };
+    } // Nothing checked
+
+
+    return {
+      choicesSelected: props.choices.map(() => false)
+    };
+  }
+
   // TODO(LP-10672): I think this might be unused right now. I can't find anywhere
   // that we pass a value to `.focus()` and it seems to have been used for
   // adding hints when editing.
@@ -29381,129 +28377,6 @@ class Radio$1 extends React.Component {
     });
   }
 
-  static validate(userInput, rubric) {
-    var numSelected = userInput.choicesSelected.reduce((sum, selected) => {
-      return sum + (selected ? 1 : 0);
-    }, 0);
-
-    if (numSelected === 0) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-
-    if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
-      return {
-        type: "invalid",
-        message: i18n._("Please choose the correct number of answers.")
-      }; // If NOTA and some other answer are checked, ...
-    }
-
-    if (userInput.noneOfTheAboveSelected && numSelected > 1) {
-      return {
-        type: "invalid",
-        message: i18n._("'None of the above' may not be selected " + "when other answers are selected.")
-      };
-    }
-
-    var correct = userInput.choicesSelected.every((selected, i) => {
-      var isCorrect;
-
-      if (userInput.noneOfTheAboveIndex === i) {
-        isCorrect = rubric.choices.every((choice, j) => {
-          return i === j || !choice.correct;
-        });
-      } else {
-        isCorrect = !!rubric.choices[i].correct;
-      }
-
-      return isCorrect === selected;
-    });
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
-      message: null
-    };
-  }
-
-  static getUserInputFromProps(props) {
-    // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
-    // future timeline implementers: this used to be {value: i} before
-    // multiple select was added)
-    if (props.choiceStates) {
-      var noneOfTheAboveIndex = null;
-      var noneOfTheAboveSelected = false;
-      var choiceStates = props.choiceStates;
-      var choicesSelected = choiceStates.map(() => false);
-      var countChoices = props.countChoices;
-      var numCorrect = props.numCorrect;
-
-      for (var i = 0; i < choicesSelected.length; i++) {
-        var index = props.choices[i].originalIndex;
-        choicesSelected[index] = choiceStates[i].selected;
-
-        if (props.choices[i].isNoneOfTheAbove) {
-          noneOfTheAboveIndex = index;
-
-          if (choicesSelected[i]) {
-            noneOfTheAboveSelected = true;
-          }
-        }
-      }
-
-      return {
-        countChoices,
-        choicesSelected,
-        numCorrect,
-        noneOfTheAboveIndex,
-        noneOfTheAboveSelected
-      }; // Support legacy choiceState implementation
-    }
-    /* istanbul ignore if - props.values is deprecated */
-
-
-    var {
-      values
-    } = props;
-
-    if (values) {
-      var _noneOfTheAboveIndex = null;
-      var _noneOfTheAboveSelected = false;
-      var _choicesSelected = [...values];
-      var _countChoices = props.countChoices;
-      var _numCorrect = props.numCorrect;
-      var valuesLength = values.length;
-
-      for (var _i = 0; _i < valuesLength; _i++) {
-        var _index = props.choices[_i].originalIndex;
-        _choicesSelected[_index] = values[_i];
-
-        if (props.choices[_i].isNoneOfTheAbove) {
-          _noneOfTheAboveIndex = _index;
-
-          if (_choicesSelected[_i]) {
-            _noneOfTheAboveSelected = true;
-          }
-        }
-      }
-
-      return {
-        choicesSelected: _choicesSelected,
-        noneOfTheAboveIndex: _noneOfTheAboveIndex,
-        noneOfTheAboveSelected: _noneOfTheAboveSelected,
-        countChoices: _countChoices,
-        numCorrect: _numCorrect
-      };
-    } // Nothing checked
-
-
-    return {
-      choicesSelected: props.choices.map(() => false)
-    };
-  }
-
 }
 
 _defineProperty(Radio$1, "defaultProps", {
@@ -36195,51 +35068,1031 @@ class InteractiveGraph extends React.Component {
     // actually just wrong
 
 
-    if (!hasValue || _.isEqual(state, rubric.graph)) {
-      // We're where we started.
-      return {
-        type: "invalid",
-        message: null
-      };
+    if (!hasValue || _.isEqual(state, rubric.graph)) {
+      // We're where we started.
+      return {
+        type: "invalid",
+        message: null
+      };
+    }
+
+    return {
+      type: "points",
+      earned: 0,
+      total: 1,
+      message: null
+    };
+  }
+
+  static getUserInputFromProps(props) {
+    return props.graph;
+  }
+
+}
+
+_defineProperty(InteractiveGraph, "defaultProps", {
+  labels: ["x", "y"],
+  range: [[-10, 10], [-10, 10]],
+  step: [1, 1],
+  // $FlowFixMe[prop-missing]
+  backgroundImage: defaultBackgroundImage$1,
+  markings: "graph",
+  showTooltips: false,
+  showProtractor: false,
+  showRuler: false,
+  rulerLabel: "",
+  rulerTicks: 10,
+  graph: {
+    type: "linear"
+  }
+});
+
+var InteractiveGraph$1 = {
+  name: "interactive-graph",
+  displayName: "Interactive graph",
+  widget: InteractiveGraph
+};
+
+var black = "#000000";
+var grayDarker = "#333333";
+var grayDark = "#555555";
+var gray = "#999999";
+var grayLight = "#AAAAAA";
+var grayLighter = "#DDDDDD";
+var white = "#FFFFFF";
+var blue = "#005A88";
+var blueDark = "#2C3747";
+var green = "#76A005";
+var red = "#CF5044";
+var yellow = "#FFC40D";
+var orange = "#BF4F04";
+var pink = "#C3325F";
+var purple = "#7A43B6";
+var bodyBackground = "#FFFFFF";
+var textColor = "#444444";
+var linkColor = "#005987";
+var linkColorHover = "#678D00";
+var sansFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
+var serifFontFamily = "Georgia,'Times New Roman',Times,serif";
+var monoFontFamily = "Monaco,Menlo,Consolas,'Courier New',monospace";
+var baseFontSize = "14px";
+var baseFontFamily = "inherit";
+var baseLineHeight = "20px";
+var altFontFamily = "Georgia,'Times New Roman',Times,serif";
+var headingsFontFamily = "inherit";
+var headingsFontWeight = "bold";
+var headingsColor = "inherit";
+var fontSizeLarge = "18px";
+var fontSizeSmall = "12px";
+var fontSizeMini = "10.5px";
+var paddingLarge = "11px 19px";
+var paddingSmall = "2px 10px";
+var paddingMini = "0 6px";
+var baseBorderRadius = "4px";
+var borderRadiusLarge = "6px";
+var borderRadiusSmall = "3px";
+var tableBackground = "#000000";
+var tableBackgroundAccent = "#F9F9F9";
+var tableBackgroundHover = "#F5F5F5";
+var tableBorder = "#DDDDDD";
+var btnBackground = "#FFFFFF";
+var btnBackgroundHighlight = "rgb(230, 230, 230)";
+var btnBorder = "#CCCCCC";
+var btnPrimaryBackground = "#0088CC";
+var btnPrimaryBackgroundHighlight = "rgb(0, 68, 204)";
+var btnInfoBackground = "#5BC0DE";
+var btnInfoBackgroundHighlight = "#2F96B4";
+var btnSuccessBackground = "#62C462";
+var btnSuccessBackgroundHighlight = "#51A351";
+var btnWarningBackground = "rgb(251, 180, 81)";
+var btnWarningBackgroundHighlight = "#F89406";
+var btnDangerBackground = "#EE5F5B";
+var btnDangerBackgroundHighlight = "#BD362F";
+var btnInverseBackground = "#444444";
+var btnInverseBackgroundHighlight = "#222222";
+var inputBackground = "#FFFFFF";
+var inputBorder = "#CCCCCC";
+var inputBorderRadius = "4px";
+var inputDisabledBackground = "#EEEEEE";
+var formActionsBackground = "#F5F5F5";
+var inputHeight = "30px";
+var dropdownBackground = "#FFFFFF";
+var dropdownBorder = "rgba(0, 0, 0, 0.2)";
+var dropdownDividerTop = "#E5E5E5";
+var dropdownDividerBottom = "#FFFFFF";
+var dropdownLinkColor = "#333333";
+var dropdownLinkColorHover = "#FFFFFF";
+var dropdownLinkColorActive = "#FFFFFF";
+var dropdownLinkBackgroundActive = "#0088CC";
+var dropdownLinkBackgroundHover = "#0088CC";
+var zindexDropdown = 1000;
+var zindexPopover = 1010;
+var zindexTooltip = 1030;
+var zindexFixedNavbar = 1030;
+var zindexHeader = 1060;
+var zindexModalBackdrop = 1070;
+var zindexModal = 1080;
+var zindexAboveModal = 1090;
+var iconSpritePath = "../img/glyphicons-halflings.png";
+var iconWhiteSpritePath = "../img/glyphicons-halflings-white.png";
+var placeholderText = "#999999";
+var hrBorder = "#EEEEEE";
+var horizontalComponentOffset = "180px";
+var wellBackground = "#F5F5F5";
+var navbarCollapseWidth = "979px";
+var navbarCollapseDesktopWidth = "980px";
+var navbarHeight = "40px";
+var navbarBackgroundHighlight = "#FFFFFF";
+var navbarBackground = "rgb(242, 242, 242)";
+var navbarBorder = "rgb(212, 212, 212)";
+var navbarText = "#777777";
+var navbarLinkColor = "#777777";
+var navbarLinkColorHover = "#333333";
+var navbarLinkColorActive = "#555555";
+var navbarLinkBackgroundHover = "#000000";
+var navbarLinkBackgroundActive = "rgb(230, 230, 230)";
+var navbarBrandColor = "#777777";
+var navbarInverseBackground = "#111111";
+var navbarInverseBackgroundHighlight = "#222222";
+var navbarInverseBorder = "#252525";
+var navbarInverseText = "#999999";
+var navbarInverseLinkColor = "#999999";
+var navbarInverseLinkColorHover = "#FFFFFF";
+var navbarInverseLinkColorActive = "#FFFFFF";
+var navbarInverseLinkBackgroundHover = "#000000";
+var navbarInverseLinkBackgroundActive = "#111111";
+var navbarInverseSearchBackground = "rgb(82, 82, 82)";
+var navbarInverseSearchBackgroundFocus = "#FFFFFF";
+var navbarInverseSearchBorder = "#111111";
+var navbarInverseSearchPlaceholderColor = "#CCCCCC";
+var navbarInverseBrandColor = "#999999";
+var paginationBackground = "#FFFFFF";
+var paginationBorder = "#DDDDDD";
+var paginationActiveBackground = "#F5F5F5";
+var heroUnitBackground = "#EEEEEE";
+var heroUnitHeadingColor = "inherit";
+var heroUnitLeadColor = "inherit";
+var warningText = "#C09853";
+var warningBackground = "#FCF8E3";
+var warningBorder = "rgb(251, 239, 213)";
+var errorText = "#B94A48";
+var errorBackground = "#F2DEDE";
+var errorBorder = "rgb(238, 211, 215)";
+var successText = "#468847";
+var successBackground = "#DFF0D8";
+var successBorder = "rgb(212, 232, 197)";
+var infoText = "#4A7C17";
+var infoBackground = "#EDF2DF";
+var infoBorder = "rgb(228, 232, 197)";
+var tooltipColor = "#FFFFFF";
+var tooltipBackground = "#000000";
+var tooltipArrowWidth = "5px";
+var tooltipArrowColor = "#000000";
+var popoverBackground = "#FFFFFF";
+var popoverArrowWidth = "10px";
+var popoverArrowColor = "#FFFFFF";
+var popoverTitleBackground = "rgb(247, 247, 247)";
+var popoverArrowOuterWidth = "11px";
+var popoverArrowOuterColor = "rgba(0, 0, 0, 0.25)";
+var gridColumns = "12";
+var gridColumnWidth = "60px";
+var gridGutterWidth = "20px";
+var gridRowWidth = "940px";
+var gridColumnWidth1200 = "70px";
+var gridGutterWidth1200 = "30px";
+var gridRowWidth1200 = "1170px";
+var gridColumnWidth768 = "42px";
+var gridGutterWidth768 = "20px";
+var gridRowWidth768 = "724px";
+var fluidGridColumnWidth = "6.382978723404255%";
+var fluidGridGutterWidth = "2.127659574468085%";
+var fluidGridColumnWidth1200 = "5.982905982905983%";
+var fluidGridGutterWidth1200 = "2.564102564102564%";
+var fluidGridColumnWidth768 = "5.801104972375691%";
+var fluidGridGutterWidth768 = "2.7624309392265194%";
+var kaGreen = "#71B307";
+var kaGreenLight = "#BED47A";
+var kaBlue = "#314453";
+var kaBlueLight = "#4D6779";
+var grayExtraDark = "#111111";
+var grayExtraLight = "#EEEEEE";
+var graySuperLight = "#F7F7F7";
+var whiteDark = "#FDFDFD";
+var dark = "#21242C";
+var blueDarkUnsaturated = "#3B414E";
+var blueDarkSaturated = "#1F3043";
+var blueLight = "#A9C0D1";
+var greenLight = "#C6D1AD";
+var greenDark = "#356700";
+var yellowGreen = "#9DB63B";
+var okGreen = "#A7CF5B";
+var alertRed = "#C42420";
+var coral = "#EE6666";
+var grayBlue = "#9AB3B9";
+var lightPageBackground = "#FDFDFD";
+var yclaBlue = "#49BAD5";
+var yclaTeal = "#56D0B3";
+var yclaTealDark = "#50C1A7";
+var yclaGreenDark = "#3D9A82";
+var yclaGreen = "#81C262";
+var learnstormBlue = "#4898FC";
+var homepageBlue = "#46A8BF";
+var backgroundBlue = "#00294A";
+var teacherSignupBlue = "#335d7d";
+var homepageGreen = "#2B8E7B";
+var streakColor = "#F79734";
+var facebookColor = "#1A60A2";
+var blueGoogleColor = "#2CAFE2";
+var redGoogleColor = "#BF4434";
+var homepageColor = "#2D585E";
+var lightTextColor = "#898989";
+var fontSizeTiny = "11px";
+var fontSizeNormal = "14px";
+var fontSizeMedium = "16px";
+var fontSizeExtraLarge = "24px";
+var fontSizeHuge = "36px";
+var fontSizeBakana = "48px";
+var fontSizeBananas = "60px";
+var fixedWidthFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
+var contentPadding = "20px";
+var primaryButtonBackground = "#89B908";
+var primaryButtonBorder = "#76A005";
+var buttonTextColor = "rgb(122, 122, 122)";
+var buttonBorderRadius = "3px";
+var basicBorderColor = "#CCCCCC";
+var minContainerWidth = "1000px";
+var maxContainerWidth = "1200px";
+var formHintColor = "#999999";
+var guidelineExampleText = "#606060";
+var hoverCardWidth = "450px";
+var menuHighlightColor = "#96AB4F";
+var menuHighlightBorderColor = "#76A005";
+var menuActiveTextColor = "#FFFFFF";
+var menuInactiveTextColor = "#444444";
+var menuSubheaderTextColor = "rgb(120, 120, 120)";
+var menuBorderColor = "#94A170";
+var unreadBackgroundColor = "#ECEEF4";
+var menuLineHeight = "18px";
+var menuSubheaderLineHeight = "17px";
+var menuSubheaderFontSize = "9px";
+var notificationBarColor = "#4858A4";
+var modalBodyTopPadding = "20px";
+var modalDialogPadding = "15px";
+var modalSectionPadding = "9px";
+var mathDomain1 = "#11ACCD";
+var mathDomain2 = "#63D9EA";
+var mathDomain3 = "#027d97";
+var mathDomain4 = "#085566";
+var partnerContentDomain1 = "#01A995";
+var partnerContentDomain2 = "#01D1C1";
+var partnerContentDomain3 = "#208170";
+var partnerContentDomain4 = "#144F44";
+var csDomain1 = "#1FAB54";
+var csDomain2 = "#74CF70";
+var csDomain3 = "#0D923F";
+var csDomain4 = "#085E29";
+var economicsDomain1 = "#E07D10";
+var economicsDomain2 = "#FFBE26";
+var economicsDomain3 = "#A75A05";
+var economicsDomain4 = "#953C02";
+var collegeCareersMoreDomain1 = "#01A995";
+var collegeCareersMoreDomain2 = "#01D1C1";
+var collegeCareersMoreDomain3 = "#208170";
+var collegeCareersMoreDomain4 = "#144F44";
+var humanitiesDomain1 = "#E84D39";
+var humanitiesDomain2 = "#FF8482";
+var humanitiesDomain3 = "#BE2612";
+var humanitiesDomain4 = "#8C1C0D";
+var gtpDomain1 = "#1865F2";
+var gtpDomain2 = "#1865F2";
+var gtpDomain3 = "#1865F2";
+var gtpDomain4 = "#1865F2";
+var scienceDomain1 = "#CA337C";
+var scienceDomain2 = "#FF92C6";
+var scienceDomain3 = "#9E034E";
+var scienceDomain4 = "#6B0235";
+var testPrepDomain1 = "#1865F2";
+var testPrepDomain2 = "#1865F2";
+var testPrepDomain3 = "#1865F2";
+var testPrepDomain4 = "#1865F2";
+var defaultDomain1 = "#1865F2";
+var defaultDomain2 = "#66afe9";
+var defaultDomain3 = "#1152b0";
+var defaultDomain4 = "#0d3d82";
+var defaultDomainColor = "#314453";
+var defaultSubjectColor = "#4D6779";
+var defaultTopicColor = "#6A8DA6";
+var defaultHoverColor = "#314453";
+var defaultLinkColor = "#314453";
+var defaultLinkHoverColor = "#6A8DA6";
+var scienceDomainColor = "#94424F";
+var scienceSubjectColor = "#9D4A5A";
+var scienceTopicColor = "#C55F73";
+var scienceHoverColor = "#94424F";
+var scienceLinkColor = "#94424F";
+var scienceLinkHoverColor = "#C55F73";
+var humanitiesDomainColor = "#AD3434";
+var humanitiesSubjectColor = "#C13B31";
+var humanitiesTopicColor = "#D24A45";
+var humanitiesHoverColor = "#AD3434";
+var humanitiesLinkColor = "#AD3434";
+var humanitiesLinkHoverColor = "#D24A45";
+var economicsDomainColor = "#B77033";
+var economicsSubjectColor = "#BF7B34";
+var economicsTopicColor = "#D1933B";
+var economicsHoverColor = "#B77033";
+var economicsLinkColor = "#B77033";
+var economicsLinkHoverColor = "#D1933B";
+var csDomainColor = "#437A39";
+var csSubjectColor = "#53893E";
+var csTopicColor = "#689B51";
+var csHoverColor = "#437A39";
+var csLinkColor = "#437A39";
+var csLinkHoverColor = "#689B51";
+var partnerContentDomainColor = "#218270";
+var partnerContentSubjectColor = "#2C8D7B";
+var partnerContentTopicColor = "#329A86";
+var partnerContentHoverColor = "#218270";
+var partnerContentLinkColor = "#218270";
+var partnerContentLinkHoverColor = "#329A86";
+var essayDomainColor = "#0071B3";
+var mathDomainColor = "#1C758A";
+var mathSubjectColor = "#46A8BF";
+var mathTopicColor = "#4FBAD4";
+var mathHoverColor = "#1C758A";
+var mathLinkColor = "#1C758A";
+var mathLinkHoverColor = "#4FBAD4";
+var testPrepDomainColor = "#644172";
+var testPrepSubjectColor = "#7E5F8E";
+var testPrepTopicColor = "#9A72AC";
+var testPrepHoverColor = "#644172";
+var testPrepLinkColor = "#644172";
+var testPrepLinkHoverColor = "#9A72AC";
+var collegeCareersMoreDomainColor = "#218270";
+var collegeCareersMoreSubjectColor = "#2C8D7B";
+var collegeCareersMoreTopicColor = "#329A86";
+var collegeCareersMoreHoverColor = "#218270";
+var collegeCareersMoreLinkColor = "#218270";
+var collegeCareersMoreLinkHoverColor = "#329A86";
+var satDomainColor = "#0084CE";
+var satSubjectColor = "#0084CE";
+var satTopicColor = "#0084CE";
+var satHoverColor = "#0084CE";
+var satLinkColor = "#0084CE";
+var satLinkHoverColor = "#0084CE";
+var colorProficient = "#1C758A";
+var colorPracticed = "rgb(158, 221, 235)";
+var colorMastery1 = "rgb(90, 197, 221)";
+var colorMastery2 = "rgb(42, 174, 203)";
+var colorMastery3 = "#1C758A";
+var colorSuggested = "#73982C";
+var colorReview = "#E35D04";
+var colorNotStarted = "#CCCCCC";
+var colorStarted = "#C7E5F7";
+var colorStruggling = "#C30202";
+var colorPersonal = "#00809C";
+var colorPractice = "#96D9FF";
+var colorEnergyPoints = "#005987";
+var pureSmMin = "568px";
+var pureMdMin = "768px";
+var pureLgMin = "1024px";
+var pureXlMin = "1200px";
+var pureXsMax = "567px";
+var pureSmMax = "767px";
+var pureMdMax = "1023px";
+var pureLgMax = "1199px";
+
+var globalConstants = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    black: black,
+    grayDarker: grayDarker,
+    grayDark: grayDark,
+    gray: gray,
+    grayLight: grayLight,
+    grayLighter: grayLighter,
+    white: white,
+    blue: blue,
+    blueDark: blueDark,
+    green: green,
+    red: red,
+    yellow: yellow,
+    orange: orange,
+    pink: pink,
+    purple: purple,
+    bodyBackground: bodyBackground,
+    textColor: textColor,
+    linkColor: linkColor,
+    linkColorHover: linkColorHover,
+    sansFontFamily: sansFontFamily,
+    serifFontFamily: serifFontFamily,
+    monoFontFamily: monoFontFamily,
+    baseFontSize: baseFontSize,
+    baseFontFamily: baseFontFamily,
+    baseLineHeight: baseLineHeight,
+    altFontFamily: altFontFamily,
+    headingsFontFamily: headingsFontFamily,
+    headingsFontWeight: headingsFontWeight,
+    headingsColor: headingsColor,
+    fontSizeLarge: fontSizeLarge,
+    fontSizeSmall: fontSizeSmall,
+    fontSizeMini: fontSizeMini,
+    paddingLarge: paddingLarge,
+    paddingSmall: paddingSmall,
+    paddingMini: paddingMini,
+    baseBorderRadius: baseBorderRadius,
+    borderRadiusLarge: borderRadiusLarge,
+    borderRadiusSmall: borderRadiusSmall,
+    tableBackground: tableBackground,
+    tableBackgroundAccent: tableBackgroundAccent,
+    tableBackgroundHover: tableBackgroundHover,
+    tableBorder: tableBorder,
+    btnBackground: btnBackground,
+    btnBackgroundHighlight: btnBackgroundHighlight,
+    btnBorder: btnBorder,
+    btnPrimaryBackground: btnPrimaryBackground,
+    btnPrimaryBackgroundHighlight: btnPrimaryBackgroundHighlight,
+    btnInfoBackground: btnInfoBackground,
+    btnInfoBackgroundHighlight: btnInfoBackgroundHighlight,
+    btnSuccessBackground: btnSuccessBackground,
+    btnSuccessBackgroundHighlight: btnSuccessBackgroundHighlight,
+    btnWarningBackground: btnWarningBackground,
+    btnWarningBackgroundHighlight: btnWarningBackgroundHighlight,
+    btnDangerBackground: btnDangerBackground,
+    btnDangerBackgroundHighlight: btnDangerBackgroundHighlight,
+    btnInverseBackground: btnInverseBackground,
+    btnInverseBackgroundHighlight: btnInverseBackgroundHighlight,
+    inputBackground: inputBackground,
+    inputBorder: inputBorder,
+    inputBorderRadius: inputBorderRadius,
+    inputDisabledBackground: inputDisabledBackground,
+    formActionsBackground: formActionsBackground,
+    inputHeight: inputHeight,
+    dropdownBackground: dropdownBackground,
+    dropdownBorder: dropdownBorder,
+    dropdownDividerTop: dropdownDividerTop,
+    dropdownDividerBottom: dropdownDividerBottom,
+    dropdownLinkColor: dropdownLinkColor,
+    dropdownLinkColorHover: dropdownLinkColorHover,
+    dropdownLinkColorActive: dropdownLinkColorActive,
+    dropdownLinkBackgroundActive: dropdownLinkBackgroundActive,
+    dropdownLinkBackgroundHover: dropdownLinkBackgroundHover,
+    zindexDropdown: zindexDropdown,
+    zindexPopover: zindexPopover,
+    zindexTooltip: zindexTooltip,
+    zindexFixedNavbar: zindexFixedNavbar,
+    zindexHeader: zindexHeader,
+    zindexModalBackdrop: zindexModalBackdrop,
+    zindexModal: zindexModal,
+    zindexAboveModal: zindexAboveModal,
+    iconSpritePath: iconSpritePath,
+    iconWhiteSpritePath: iconWhiteSpritePath,
+    placeholderText: placeholderText,
+    hrBorder: hrBorder,
+    horizontalComponentOffset: horizontalComponentOffset,
+    wellBackground: wellBackground,
+    navbarCollapseWidth: navbarCollapseWidth,
+    navbarCollapseDesktopWidth: navbarCollapseDesktopWidth,
+    navbarHeight: navbarHeight,
+    navbarBackgroundHighlight: navbarBackgroundHighlight,
+    navbarBackground: navbarBackground,
+    navbarBorder: navbarBorder,
+    navbarText: navbarText,
+    navbarLinkColor: navbarLinkColor,
+    navbarLinkColorHover: navbarLinkColorHover,
+    navbarLinkColorActive: navbarLinkColorActive,
+    navbarLinkBackgroundHover: navbarLinkBackgroundHover,
+    navbarLinkBackgroundActive: navbarLinkBackgroundActive,
+    navbarBrandColor: navbarBrandColor,
+    navbarInverseBackground: navbarInverseBackground,
+    navbarInverseBackgroundHighlight: navbarInverseBackgroundHighlight,
+    navbarInverseBorder: navbarInverseBorder,
+    navbarInverseText: navbarInverseText,
+    navbarInverseLinkColor: navbarInverseLinkColor,
+    navbarInverseLinkColorHover: navbarInverseLinkColorHover,
+    navbarInverseLinkColorActive: navbarInverseLinkColorActive,
+    navbarInverseLinkBackgroundHover: navbarInverseLinkBackgroundHover,
+    navbarInverseLinkBackgroundActive: navbarInverseLinkBackgroundActive,
+    navbarInverseSearchBackground: navbarInverseSearchBackground,
+    navbarInverseSearchBackgroundFocus: navbarInverseSearchBackgroundFocus,
+    navbarInverseSearchBorder: navbarInverseSearchBorder,
+    navbarInverseSearchPlaceholderColor: navbarInverseSearchPlaceholderColor,
+    navbarInverseBrandColor: navbarInverseBrandColor,
+    paginationBackground: paginationBackground,
+    paginationBorder: paginationBorder,
+    paginationActiveBackground: paginationActiveBackground,
+    heroUnitBackground: heroUnitBackground,
+    heroUnitHeadingColor: heroUnitHeadingColor,
+    heroUnitLeadColor: heroUnitLeadColor,
+    warningText: warningText,
+    warningBackground: warningBackground,
+    warningBorder: warningBorder,
+    errorText: errorText,
+    errorBackground: errorBackground,
+    errorBorder: errorBorder,
+    successText: successText,
+    successBackground: successBackground,
+    successBorder: successBorder,
+    infoText: infoText,
+    infoBackground: infoBackground,
+    infoBorder: infoBorder,
+    tooltipColor: tooltipColor,
+    tooltipBackground: tooltipBackground,
+    tooltipArrowWidth: tooltipArrowWidth,
+    tooltipArrowColor: tooltipArrowColor,
+    popoverBackground: popoverBackground,
+    popoverArrowWidth: popoverArrowWidth,
+    popoverArrowColor: popoverArrowColor,
+    popoverTitleBackground: popoverTitleBackground,
+    popoverArrowOuterWidth: popoverArrowOuterWidth,
+    popoverArrowOuterColor: popoverArrowOuterColor,
+    gridColumns: gridColumns,
+    gridColumnWidth: gridColumnWidth,
+    gridGutterWidth: gridGutterWidth,
+    gridRowWidth: gridRowWidth,
+    gridColumnWidth1200: gridColumnWidth1200,
+    gridGutterWidth1200: gridGutterWidth1200,
+    gridRowWidth1200: gridRowWidth1200,
+    gridColumnWidth768: gridColumnWidth768,
+    gridGutterWidth768: gridGutterWidth768,
+    gridRowWidth768: gridRowWidth768,
+    fluidGridColumnWidth: fluidGridColumnWidth,
+    fluidGridGutterWidth: fluidGridGutterWidth,
+    fluidGridColumnWidth1200: fluidGridColumnWidth1200,
+    fluidGridGutterWidth1200: fluidGridGutterWidth1200,
+    fluidGridColumnWidth768: fluidGridColumnWidth768,
+    fluidGridGutterWidth768: fluidGridGutterWidth768,
+    kaGreen: kaGreen,
+    kaGreenLight: kaGreenLight,
+    kaBlue: kaBlue,
+    kaBlueLight: kaBlueLight,
+    grayExtraDark: grayExtraDark,
+    grayExtraLight: grayExtraLight,
+    graySuperLight: graySuperLight,
+    whiteDark: whiteDark,
+    dark: dark,
+    blueDarkUnsaturated: blueDarkUnsaturated,
+    blueDarkSaturated: blueDarkSaturated,
+    blueLight: blueLight,
+    greenLight: greenLight,
+    greenDark: greenDark,
+    yellowGreen: yellowGreen,
+    okGreen: okGreen,
+    alertRed: alertRed,
+    coral: coral,
+    grayBlue: grayBlue,
+    lightPageBackground: lightPageBackground,
+    yclaBlue: yclaBlue,
+    yclaTeal: yclaTeal,
+    yclaTealDark: yclaTealDark,
+    yclaGreenDark: yclaGreenDark,
+    yclaGreen: yclaGreen,
+    learnstormBlue: learnstormBlue,
+    homepageBlue: homepageBlue,
+    backgroundBlue: backgroundBlue,
+    teacherSignupBlue: teacherSignupBlue,
+    homepageGreen: homepageGreen,
+    streakColor: streakColor,
+    facebookColor: facebookColor,
+    blueGoogleColor: blueGoogleColor,
+    redGoogleColor: redGoogleColor,
+    homepageColor: homepageColor,
+    lightTextColor: lightTextColor,
+    fontSizeTiny: fontSizeTiny,
+    fontSizeNormal: fontSizeNormal,
+    fontSizeMedium: fontSizeMedium,
+    fontSizeExtraLarge: fontSizeExtraLarge,
+    fontSizeHuge: fontSizeHuge,
+    fontSizeBakana: fontSizeBakana,
+    fontSizeBananas: fontSizeBananas,
+    fixedWidthFontFamily: fixedWidthFontFamily,
+    contentPadding: contentPadding,
+    primaryButtonBackground: primaryButtonBackground,
+    primaryButtonBorder: primaryButtonBorder,
+    buttonTextColor: buttonTextColor,
+    buttonBorderRadius: buttonBorderRadius,
+    basicBorderColor: basicBorderColor,
+    minContainerWidth: minContainerWidth,
+    maxContainerWidth: maxContainerWidth,
+    formHintColor: formHintColor,
+    guidelineExampleText: guidelineExampleText,
+    hoverCardWidth: hoverCardWidth,
+    menuHighlightColor: menuHighlightColor,
+    menuHighlightBorderColor: menuHighlightBorderColor,
+    menuActiveTextColor: menuActiveTextColor,
+    menuInactiveTextColor: menuInactiveTextColor,
+    menuSubheaderTextColor: menuSubheaderTextColor,
+    menuBorderColor: menuBorderColor,
+    unreadBackgroundColor: unreadBackgroundColor,
+    menuLineHeight: menuLineHeight,
+    menuSubheaderLineHeight: menuSubheaderLineHeight,
+    menuSubheaderFontSize: menuSubheaderFontSize,
+    notificationBarColor: notificationBarColor,
+    modalBodyTopPadding: modalBodyTopPadding,
+    modalDialogPadding: modalDialogPadding,
+    modalSectionPadding: modalSectionPadding,
+    mathDomain1: mathDomain1,
+    mathDomain2: mathDomain2,
+    mathDomain3: mathDomain3,
+    mathDomain4: mathDomain4,
+    partnerContentDomain1: partnerContentDomain1,
+    partnerContentDomain2: partnerContentDomain2,
+    partnerContentDomain3: partnerContentDomain3,
+    partnerContentDomain4: partnerContentDomain4,
+    csDomain1: csDomain1,
+    csDomain2: csDomain2,
+    csDomain3: csDomain3,
+    csDomain4: csDomain4,
+    economicsDomain1: economicsDomain1,
+    economicsDomain2: economicsDomain2,
+    economicsDomain3: economicsDomain3,
+    economicsDomain4: economicsDomain4,
+    collegeCareersMoreDomain1: collegeCareersMoreDomain1,
+    collegeCareersMoreDomain2: collegeCareersMoreDomain2,
+    collegeCareersMoreDomain3: collegeCareersMoreDomain3,
+    collegeCareersMoreDomain4: collegeCareersMoreDomain4,
+    humanitiesDomain1: humanitiesDomain1,
+    humanitiesDomain2: humanitiesDomain2,
+    humanitiesDomain3: humanitiesDomain3,
+    humanitiesDomain4: humanitiesDomain4,
+    gtpDomain1: gtpDomain1,
+    gtpDomain2: gtpDomain2,
+    gtpDomain3: gtpDomain3,
+    gtpDomain4: gtpDomain4,
+    scienceDomain1: scienceDomain1,
+    scienceDomain2: scienceDomain2,
+    scienceDomain3: scienceDomain3,
+    scienceDomain4: scienceDomain4,
+    testPrepDomain1: testPrepDomain1,
+    testPrepDomain2: testPrepDomain2,
+    testPrepDomain3: testPrepDomain3,
+    testPrepDomain4: testPrepDomain4,
+    defaultDomain1: defaultDomain1,
+    defaultDomain2: defaultDomain2,
+    defaultDomain3: defaultDomain3,
+    defaultDomain4: defaultDomain4,
+    defaultDomainColor: defaultDomainColor,
+    defaultSubjectColor: defaultSubjectColor,
+    defaultTopicColor: defaultTopicColor,
+    defaultHoverColor: defaultHoverColor,
+    defaultLinkColor: defaultLinkColor,
+    defaultLinkHoverColor: defaultLinkHoverColor,
+    scienceDomainColor: scienceDomainColor,
+    scienceSubjectColor: scienceSubjectColor,
+    scienceTopicColor: scienceTopicColor,
+    scienceHoverColor: scienceHoverColor,
+    scienceLinkColor: scienceLinkColor,
+    scienceLinkHoverColor: scienceLinkHoverColor,
+    humanitiesDomainColor: humanitiesDomainColor,
+    humanitiesSubjectColor: humanitiesSubjectColor,
+    humanitiesTopicColor: humanitiesTopicColor,
+    humanitiesHoverColor: humanitiesHoverColor,
+    humanitiesLinkColor: humanitiesLinkColor,
+    humanitiesLinkHoverColor: humanitiesLinkHoverColor,
+    economicsDomainColor: economicsDomainColor,
+    economicsSubjectColor: economicsSubjectColor,
+    economicsTopicColor: economicsTopicColor,
+    economicsHoverColor: economicsHoverColor,
+    economicsLinkColor: economicsLinkColor,
+    economicsLinkHoverColor: economicsLinkHoverColor,
+    csDomainColor: csDomainColor,
+    csSubjectColor: csSubjectColor,
+    csTopicColor: csTopicColor,
+    csHoverColor: csHoverColor,
+    csLinkColor: csLinkColor,
+    csLinkHoverColor: csLinkHoverColor,
+    partnerContentDomainColor: partnerContentDomainColor,
+    partnerContentSubjectColor: partnerContentSubjectColor,
+    partnerContentTopicColor: partnerContentTopicColor,
+    partnerContentHoverColor: partnerContentHoverColor,
+    partnerContentLinkColor: partnerContentLinkColor,
+    partnerContentLinkHoverColor: partnerContentLinkHoverColor,
+    essayDomainColor: essayDomainColor,
+    mathDomainColor: mathDomainColor,
+    mathSubjectColor: mathSubjectColor,
+    mathTopicColor: mathTopicColor,
+    mathHoverColor: mathHoverColor,
+    mathLinkColor: mathLinkColor,
+    mathLinkHoverColor: mathLinkHoverColor,
+    testPrepDomainColor: testPrepDomainColor,
+    testPrepSubjectColor: testPrepSubjectColor,
+    testPrepTopicColor: testPrepTopicColor,
+    testPrepHoverColor: testPrepHoverColor,
+    testPrepLinkColor: testPrepLinkColor,
+    testPrepLinkHoverColor: testPrepLinkHoverColor,
+    collegeCareersMoreDomainColor: collegeCareersMoreDomainColor,
+    collegeCareersMoreSubjectColor: collegeCareersMoreSubjectColor,
+    collegeCareersMoreTopicColor: collegeCareersMoreTopicColor,
+    collegeCareersMoreHoverColor: collegeCareersMoreHoverColor,
+    collegeCareersMoreLinkColor: collegeCareersMoreLinkColor,
+    collegeCareersMoreLinkHoverColor: collegeCareersMoreLinkHoverColor,
+    satDomainColor: satDomainColor,
+    satSubjectColor: satSubjectColor,
+    satTopicColor: satTopicColor,
+    satHoverColor: satHoverColor,
+    satLinkColor: satLinkColor,
+    satLinkHoverColor: satLinkHoverColor,
+    colorProficient: colorProficient,
+    colorPracticed: colorPracticed,
+    colorMastery1: colorMastery1,
+    colorMastery2: colorMastery2,
+    colorMastery3: colorMastery3,
+    colorSuggested: colorSuggested,
+    colorReview: colorReview,
+    colorNotStarted: colorNotStarted,
+    colorStarted: colorStarted,
+    colorStruggling: colorStruggling,
+    colorPersonal: colorPersonal,
+    colorPractice: colorPractice,
+    colorEnergyPoints: colorEnergyPoints,
+    pureSmMin: pureSmMin,
+    pureMdMin: pureMdMin,
+    pureLgMin: pureLgMin,
+    pureXlMin: pureXlMin,
+    pureXsMax: pureXsMax,
+    pureSmMax: pureSmMax,
+    pureMdMax: pureMdMax,
+    pureLgMax: pureLgMax
+});
+
+var colors$1 = {
+  white: "#FFFFFF",
+  gray98: "#FAFAFA",
+  gray97: "#F6F7F7",
+  gray95: "#F0F1F2",
+  gray90: "#E3E5E6",
+  gray85: "#D6D8DA",
+  gray76: "#BABEC2",
+  gray72: "#999A9D",
+  gray68: "#888D93",
+  gray55: "#707378",
+  gray41: "#626569",
+  gray25: "#3B3E40",
+  gray17: "#21242C",
+  gray10: "#1499af",
+  black: "#000000",
+  // These colors are pulled out from constants.js, which is itself generated
+  // from variables.less. We should probably avoid duplicating these here.
+  alertRed,
+  homepageBlue,
+  kaBlue,
+  kaBlueLight,
+  kaGreen,
+  kaGreenLight,
+  learnstormBlue,
+  backgroundBlue,
+  adminGreen: "#78C008",
+  kaBlueExtraLight: "#39c2db",
+  kaBlueHover: "#0c7f99",
+  kaGreenHover: "#518005",
+  // Domain-agnostic colors related to the study guide experience in the
+  // content library.
+  skyDark: "#001f4d",
+  recommendationGold: "#ffbe26",
+  starAced: "#ff9c39",
+  // We interploate the domain colors into this colors object for
+  // historical reasons, but everyone using domain-specific colors
+  // should switch to using the domainColors() function to look up
+  // colors instead.
+  //
+  // TODO(davidflanagan): remove this line once everything is
+  // working correctly with the domainColors() accessor.
+  // ...domainToColorsMap,
+  // mission: missionColors,
+  // Colors for various OAuth providers
+  google: "#C1432f",
+  modernGoogle: "#be2612",
+  modernGoogleHover: "#8c1c0d",
+  facebook: "#4267B2",
+  modernFacebook: "#4267B2",
+  modernFacebookHover: "#00294a",
+  wonderBlocksGold: "#FFB100",
+  wonderBlocksLightBlue: "#37C5FD",
+  // We're using rgba instead of opacity to avoid affecting the focus outline
+  // when we just want to make the color transparent.
+  breadcrumbs: "rgba(255, 255, 255, 0.7)"
+};
+var borderRadius = 4;
+var breadcrumbStyles = {
+  color: colors$1.breadcrumbs,
+  fontFamily: "inherit",
+  fontSize: 15,
+  fontWeight: "bold",
+  letterSpacing: 0.8,
+  lineHeight: "19px",
+  textTransform: "uppercase",
+  // Disable subpixel antialiasing for OSX (improves light on dark text)
+  MozOsxFontSmoothing: "grayscale",
+  WebkitFontSmoothing: "antialiased"
+};
+var fonts = {
+  // The body of the page is setup to use 'Helvetica' by default and
+  // 'Lato' if/once it downloads. For your elements to follow this
+  // pattern, all you need is to make the text in your element
+  // inherit from the body using the "inherit" value.
+  regular: "inherit"
+};
+var typography = {
+  // For subject names
+  subjectHeadingDesktop: {
+    fontFamily: "inherit",
+    fontSize: 50,
+    fontWeight: "bold",
+    lineHeight: "61px"
+  },
+  subjectHeadingMobile: {
+    fontFamily: "inherit",
+    fontSize: 35,
+    fontWeight: "bold",
+    lineHeight: "37px"
+  },
+  // For the most important thing on the page
+  conceptHeadingDesktop: {
+    fontFamily: "inherit",
+    fontSize: 35,
+    fontWeight: "bold",
+    lineHeight: "37px"
+  },
+  conceptHeadingMobile: {
+    fontFamily: "inherit",
+    fontSize: 23,
+    fontWeight: "bold",
+    lineHeight: "27px"
+  },
+  // For sections or modules
+  subheadingDesktop: {
+    fontFamily: "inherit",
+    fontSize: 23,
+    fontWeight: "bold",
+    lineHeight: "27px"
+  },
+  subheadingMobile: {
+    fontFamily: "inherit",
+    fontSize: 20,
+    fontWeight: "bold",
+    lineHeight: "24px"
+  },
+  smallSubheadingDesktop: {
+    fontFamily: "inherit",
+    fontSize: 20,
+    lineHeight: 1.25
+  },
+  smallSubheadingMobile: {
+    fontFamily: "inherit",
+    fontSize: 15,
+    lineHeight: 1.25
+  },
+  // For callouts
+  smallHeading: {
+    color: colors$1.gray25,
+    fontFamily: "inherit",
+    fontSize: 17,
+    fontWeight: "bold",
+    lineHeight: "23px"
+  },
+  smallHeadingMobile: {
+    color: colors$1.gray25,
+    fontFamily: "inherit",
+    fontSize: 15,
+    fontWeight: "bold",
+    lineHeight: "18px"
+  },
+  // Accent headings
+  accentHeading: {
+    color: colors$1.gray68,
+    fontFamily: "inherit",
+    fontSize: 15,
+    fontWeight: "bold",
+    letterSpacing: 0.8,
+    lineHeight: "19px",
+    textTransform: "uppercase"
+  },
+  bodyLarge: {
+    // For articles with multiple paragraphs
+    fontFamily: fonts.regular,
+    fontSize: 20,
+    lineHeight: "30px"
+  },
+  bodySmall: {
+    // For small blocks of copy
+    fontFamily: fonts.regular,
+    fontSize: 17,
+    fontWeight: "normal",
+    lineHeight: "23px"
+  },
+  bodySmallBold: {
+    // For small blocks of copy
+    fontFamily: fonts.regular,
+    fontSize: 17,
+    fontWeight: "bold",
+    lineHeight: "23px"
+  },
+  bodyXsmall: {
+    // For metadata, descriptions, etc
+    fontFamily: fonts.regular,
+    fontSize: 15,
+    lineHeight: "22px"
+  },
+  bodyXsmallBold: {
+    // For emphasized metadata, descriptions, etc
+    fontFamily: "inherit",
+    fontSize: 15,
+    fontWeight: "bold",
+    lineHeight: "22px"
+  },
+  breadcrumb: breadcrumbStyles,
+  // For in-page tabs, breadcrumbs
+  breadcrumbSmall: _objectSpread2(_objectSpread2({}, breadcrumbStyles), {}, {
+    fontSize: 12,
+    lineHeight: "13px"
+  }),
+  labelLarge: {
+    // For chiclets and thumbnail titles
+    fontFamily: "inherit",
+    fontSize: 23,
+    fontWeight: "bold",
+    lineHeight: "27px"
+  },
+  labelMedium: {
+    // For chiclets and thumbnail titles
+    fontFamily: "inherit",
+    fontSize: 15,
+    fontWeight: "bold",
+    lineHeight: "18px"
+  },
+  labelSmall: {
+    // Generally used with labelLarge, for breadcrumbs in thumbnails
+    fontFamily: fonts.regular,
+    fontSize: 12,
+    lineHeight: "14px"
+  },
+  caption: {
+    // For image captions
+    fontFamily: fonts.regular,
+    fontSize: 14,
+    fontStyle: "italic",
+    lineHeight: "17px"
+  },
+  desktopScalingOnMobile: {
+    // For when you need Mobile Safari and friends to stick to desktop
+    // sizes
+    MozTextSizeAdjust: "100%",
+    MsTextSizeAdjust: "100%",
+    WebkitTextSizeAdjust: "100%"
+  },
+  // TODO (josh): This should move to within <ModalHeader>
+  modalSubtitle: {
+    fontSize: 12,
+    lineHeight: 1.65,
+    // NOTE (josh): Font smoothing used here to create a 'medium' weight
+    // font, between normal and bold, on webkit browsers.
+    // This prop is an a11y risk when used on non-bold text, since it
+    // makes text very thin, but it's fine on bold text.
+    WebkitFontSmoothing: "antialiased",
+    fontWeight: "bold"
+  },
+  // HACK(kevinb): temporary wonder blocks styles for header only
+  // TODO(kevinb): use components from wonder-blocks-typography instead
+  wonderBlocksHeader: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 24,
+    paddingTop: 34,
+    [mediaQueries.mdOrLarger]: {
+      paddingBottom: 32
     }
+  },
+  // HACK(kevinb): temporary wonder blocks styles for header only
+  // TODO(kevinb): use components from wonder-blocks-typography instead
+  wonderBlocksTitle: {
+    color: colors$1.white,
+    fontWeight: 900,
+    // "Black" weight
+    fontSize: 28,
+    lineHeight: "32px",
+    margin: 0,
+    [mediaQueries.mdOrLarger]: {
+      fontSize: 36,
+      lineHeight: "40px"
+    }
+  },
+  // HACK(kevinb): temporary wonder blocks styles for header only
+  // TODO(kevinb): use components from wonder-blocks-typography instead
+  wonderBlocksLabelLarge: {
+    fontSize: 16,
+    lineHeight: "20px",
+    fontWeight: 700 // Bold
 
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-
-  static getUserInputFromProps(props) {
-    return props.graph;
   }
+};
 
-}
-
-_defineProperty(InteractiveGraph, "defaultProps", {
-  labels: ["x", "y"],
-  range: [[-10, 10], [-10, 10]],
-  step: [1, 1],
-  // $FlowFixMe[prop-missing]
-  backgroundImage: defaultBackgroundImage$1,
-  markings: "graph",
-  showTooltips: false,
-  showProtractor: false,
-  showRuler: false,
-  rulerLabel: "",
-  rulerTicks: 10,
-  graph: {
-    type: "linear"
-  }
+var globalStyles = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    colors: colors$1,
+    borderRadius: borderRadius,
+    fonts: fonts,
+    typography: typography
 });
 
-var InteractiveGraph$1 = {
-  name: "interactive-graph",
-  displayName: "Interactive graph",
-  widget: InteractiveGraph
-};
-
 class AnswerChoice extends React.Component {
   constructor() {
     super(...arguments);