@khanacademy/perseus 1.1.2 → 1.3.0

package/dist/index.js

@@ -20,13 +20,14 @@ var pureMarkdown = require('@khanacademy/pure-markdown');
 var aphrodite = require('aphrodite');
 var MathQuill = require('mathquill');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
-var wonderBlocksPopover = require('@khanacademy/wonder-blocks-popover');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var Tooltip$1 = require('@khanacademy/wonder-blocks-tooltip');
 var Button = require('@khanacademy/wonder-blocks-button');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksPopover = require('@khanacademy/wonder-blocks-popover');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var debounce = require('lodash.debounce');
 var Link = require('@khanacademy/wonder-blocks-link');
@@ -64,10 +65,11 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown);
 var MathQuill__default = /*#__PURE__*/_interopDefaultLegacy(MathQuill);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip$1);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
@@ -24481,1192 +24483,52 @@ const styles$y = aphrodite.StyleSheet.create({
   }
 });
 
-const black = "#000000";
-const grayDarker = "#333333";
-const grayDark = "#555555";
-const gray = "#999999";
-const grayLight = "#AAAAAA";
-const grayLighter = "#DDDDDD";
-const white = "#FFFFFF";
-const blue = "#005A88";
-const blueDark = "#2C3747";
-const green = "#76A005";
-const red = "#CF5044";
-const yellow = "#FFC40D";
-const orange = "#BF4F04";
-const pink = "#C3325F";
-const purple = "#7A43B6";
-const bodyBackground = "#FFFFFF";
-const textColor = "#444444";
-const linkColor = "#005987";
-const linkColorHover = "#678D00";
-const sansFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
-const serifFontFamily = "Georgia,'Times New Roman',Times,serif";
-const monoFontFamily = "Monaco,Menlo,Consolas,'Courier New',monospace";
-const baseFontSize = "14px";
-const baseFontFamily = "inherit";
-const baseLineHeight = "20px";
-const altFontFamily = "Georgia,'Times New Roman',Times,serif";
-const headingsFontFamily = "inherit";
-const headingsFontWeight = "bold";
-const headingsColor = "inherit";
-const fontSizeLarge = "18px";
-const fontSizeSmall = "12px";
-const fontSizeMini = "10.5px";
-const paddingLarge = "11px 19px";
-const paddingSmall = "2px 10px";
-const paddingMini = "0 6px";
-const baseBorderRadius = "4px";
-const borderRadiusLarge = "6px";
-const borderRadiusSmall = "3px";
-const tableBackground = "#000000";
-const tableBackgroundAccent = "#F9F9F9";
-const tableBackgroundHover = "#F5F5F5";
-const tableBorder = "#DDDDDD";
-const btnBackground = "#FFFFFF";
-const btnBackgroundHighlight = "rgb(230, 230, 230)";
-const btnBorder = "#CCCCCC";
-const btnPrimaryBackground = "#0088CC";
-const btnPrimaryBackgroundHighlight = "rgb(0, 68, 204)";
-const btnInfoBackground = "#5BC0DE";
-const btnInfoBackgroundHighlight = "#2F96B4";
-const btnSuccessBackground = "#62C462";
-const btnSuccessBackgroundHighlight = "#51A351";
-const btnWarningBackground = "rgb(251, 180, 81)";
-const btnWarningBackgroundHighlight = "#F89406";
-const btnDangerBackground = "#EE5F5B";
-const btnDangerBackgroundHighlight = "#BD362F";
-const btnInverseBackground = "#444444";
-const btnInverseBackgroundHighlight = "#222222";
-const inputBackground = "#FFFFFF";
-const inputBorder = "#CCCCCC";
-const inputBorderRadius = "4px";
-const inputDisabledBackground = "#EEEEEE";
-const formActionsBackground = "#F5F5F5";
-const inputHeight = "30px";
-const dropdownBackground = "#FFFFFF";
-const dropdownBorder = "rgba(0, 0, 0, 0.2)";
-const dropdownDividerTop = "#E5E5E5";
-const dropdownDividerBottom = "#FFFFFF";
-const dropdownLinkColor = "#333333";
-const dropdownLinkColorHover = "#FFFFFF";
-const dropdownLinkColorActive = "#FFFFFF";
-const dropdownLinkBackgroundActive = "#0088CC";
-const dropdownLinkBackgroundHover = "#0088CC";
-const zindexDropdown = 1000;
-const zindexPopover = 1010;
-const zindexTooltip = 1030;
-const zindexFixedNavbar = 1030;
-const zindexHeader = 1060;
-const zindexModalBackdrop = 1070;
-const zindexModal = 1080;
-const zindexAboveModal = 1090;
-const iconSpritePath = "../img/glyphicons-halflings.png";
-const iconWhiteSpritePath = "../img/glyphicons-halflings-white.png";
-const placeholderText = "#999999";
-const hrBorder = "#EEEEEE";
-const horizontalComponentOffset = "180px";
-const wellBackground = "#F5F5F5";
-const navbarCollapseWidth = "979px";
-const navbarCollapseDesktopWidth = "980px";
-const navbarHeight = "40px";
-const navbarBackgroundHighlight = "#FFFFFF";
-const navbarBackground = "rgb(242, 242, 242)";
-const navbarBorder = "rgb(212, 212, 212)";
-const navbarText = "#777777";
-const navbarLinkColor = "#777777";
-const navbarLinkColorHover = "#333333";
-const navbarLinkColorActive = "#555555";
-const navbarLinkBackgroundHover = "#000000";
-const navbarLinkBackgroundActive = "rgb(230, 230, 230)";
-const navbarBrandColor = "#777777";
-const navbarInverseBackground = "#111111";
-const navbarInverseBackgroundHighlight = "#222222";
-const navbarInverseBorder = "#252525";
-const navbarInverseText = "#999999";
-const navbarInverseLinkColor = "#999999";
-const navbarInverseLinkColorHover = "#FFFFFF";
-const navbarInverseLinkColorActive = "#FFFFFF";
-const navbarInverseLinkBackgroundHover = "#000000";
-const navbarInverseLinkBackgroundActive = "#111111";
-const navbarInverseSearchBackground = "rgb(82, 82, 82)";
-const navbarInverseSearchBackgroundFocus = "#FFFFFF";
-const navbarInverseSearchBorder = "#111111";
-const navbarInverseSearchPlaceholderColor = "#CCCCCC";
-const navbarInverseBrandColor = "#999999";
-const paginationBackground = "#FFFFFF";
-const paginationBorder = "#DDDDDD";
-const paginationActiveBackground = "#F5F5F5";
-const heroUnitBackground = "#EEEEEE";
-const heroUnitHeadingColor = "inherit";
-const heroUnitLeadColor = "inherit";
-const warningText = "#C09853";
-const warningBackground = "#FCF8E3";
-const warningBorder = "rgb(251, 239, 213)";
-const errorText = "#B94A48";
-const errorBackground = "#F2DEDE";
-const errorBorder = "rgb(238, 211, 215)";
-const successText = "#468847";
-const successBackground = "#DFF0D8";
-const successBorder = "rgb(212, 232, 197)";
-const infoText = "#4A7C17";
-const infoBackground = "#EDF2DF";
-const infoBorder = "rgb(228, 232, 197)";
-const tooltipColor = "#FFFFFF";
-const tooltipBackground = "#000000";
-const tooltipArrowWidth = "5px";
-const tooltipArrowColor = "#000000";
-const popoverBackground = "#FFFFFF";
-const popoverArrowWidth = "10px";
-const popoverArrowColor = "#FFFFFF";
-const popoverTitleBackground = "rgb(247, 247, 247)";
-const popoverArrowOuterWidth = "11px";
-const popoverArrowOuterColor = "rgba(0, 0, 0, 0.25)";
-const gridColumns = "12";
-const gridColumnWidth = "60px";
-const gridGutterWidth = "20px";
-const gridRowWidth = "940px";
-const gridColumnWidth1200 = "70px";
-const gridGutterWidth1200 = "30px";
-const gridRowWidth1200 = "1170px";
-const gridColumnWidth768 = "42px";
-const gridGutterWidth768 = "20px";
-const gridRowWidth768 = "724px";
-const fluidGridColumnWidth = "6.382978723404255%";
-const fluidGridGutterWidth = "2.127659574468085%";
-const fluidGridColumnWidth1200 = "5.982905982905983%";
-const fluidGridGutterWidth1200 = "2.564102564102564%";
-const fluidGridColumnWidth768 = "5.801104972375691%";
-const fluidGridGutterWidth768 = "2.7624309392265194%";
-const kaGreen = "#71B307";
-const kaGreenLight = "#BED47A";
-const kaBlue = "#314453";
-const kaBlueLight = "#4D6779";
-const grayExtraDark = "#111111";
-const grayExtraLight = "#EEEEEE";
-const graySuperLight = "#F7F7F7";
-const whiteDark = "#FDFDFD";
-const dark = "#21242C";
-const blueDarkUnsaturated = "#3B414E";
-const blueDarkSaturated = "#1F3043";
-const blueLight = "#A9C0D1";
-const greenLight = "#C6D1AD";
-const greenDark = "#356700";
-const yellowGreen = "#9DB63B";
-const okGreen = "#A7CF5B";
-const alertRed = "#C42420";
-const coral = "#EE6666";
-const grayBlue = "#9AB3B9";
-const lightPageBackground = "#FDFDFD";
-const yclaBlue = "#49BAD5";
-const yclaTeal = "#56D0B3";
-const yclaTealDark = "#50C1A7";
-const yclaGreenDark = "#3D9A82";
-const yclaGreen = "#81C262";
-const learnstormBlue = "#4898FC";
-const homepageBlue = "#46A8BF";
-const backgroundBlue = "#00294A";
-const teacherSignupBlue = "#335d7d";
-const homepageGreen = "#2B8E7B";
-const streakColor = "#F79734";
-const facebookColor = "#1A60A2";
-const blueGoogleColor = "#2CAFE2";
-const redGoogleColor = "#BF4434";
-const homepageColor = "#2D585E";
-const lightTextColor = "#898989";
-const fontSizeTiny = "11px";
-const fontSizeNormal = "14px";
-const fontSizeMedium = "16px";
-const fontSizeExtraLarge = "24px";
-const fontSizeHuge = "36px";
-const fontSizeBakana = "48px";
-const fontSizeBananas = "60px";
-const fixedWidthFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
-const contentPadding = "20px";
-const primaryButtonBackground = "#89B908";
-const primaryButtonBorder = "#76A005";
-const buttonTextColor = "rgb(122, 122, 122)";
-const buttonBorderRadius = "3px";
-const basicBorderColor = "#CCCCCC";
-const minContainerWidth = "1000px";
-const maxContainerWidth = "1200px";
-const formHintColor = "#999999";
-const guidelineExampleText = "#606060";
-const hoverCardWidth = "450px";
-const menuHighlightColor = "#96AB4F";
-const menuHighlightBorderColor = "#76A005";
-const menuActiveTextColor = "#FFFFFF";
-const menuInactiveTextColor = "#444444";
-const menuSubheaderTextColor = "rgb(120, 120, 120)";
-const menuBorderColor = "#94A170";
-const unreadBackgroundColor = "#ECEEF4";
-const menuLineHeight = "18px";
-const menuSubheaderLineHeight = "17px";
-const menuSubheaderFontSize = "9px";
-const notificationBarColor = "#4858A4";
-const modalBodyTopPadding = "20px";
-const modalDialogPadding = "15px";
-const modalSectionPadding = "9px";
-const mathDomain1 = "#11ACCD";
-const mathDomain2 = "#63D9EA";
-const mathDomain3 = "#027d97";
-const mathDomain4 = "#085566";
-const partnerContentDomain1 = "#01A995";
-const partnerContentDomain2 = "#01D1C1";
-const partnerContentDomain3 = "#208170";
-const partnerContentDomain4 = "#144F44";
-const csDomain1 = "#1FAB54";
-const csDomain2 = "#74CF70";
-const csDomain3 = "#0D923F";
-const csDomain4 = "#085E29";
-const economicsDomain1 = "#E07D10";
-const economicsDomain2 = "#FFBE26";
-const economicsDomain3 = "#A75A05";
-const economicsDomain4 = "#953C02";
-const collegeCareersMoreDomain1 = "#01A995";
-const collegeCareersMoreDomain2 = "#01D1C1";
-const collegeCareersMoreDomain3 = "#208170";
-const collegeCareersMoreDomain4 = "#144F44";
-const humanitiesDomain1 = "#E84D39";
-const humanitiesDomain2 = "#FF8482";
-const humanitiesDomain3 = "#BE2612";
-const humanitiesDomain4 = "#8C1C0D";
-const gtpDomain1 = "#1865F2";
-const gtpDomain2 = "#1865F2";
-const gtpDomain3 = "#1865F2";
-const gtpDomain4 = "#1865F2";
-const scienceDomain1 = "#CA337C";
-const scienceDomain2 = "#FF92C6";
-const scienceDomain3 = "#9E034E";
-const scienceDomain4 = "#6B0235";
-const testPrepDomain1 = "#1865F2";
-const testPrepDomain2 = "#1865F2";
-const testPrepDomain3 = "#1865F2";
-const testPrepDomain4 = "#1865F2";
-const defaultDomain1 = "#1865F2";
-const defaultDomain2 = "#66afe9";
-const defaultDomain3 = "#1152b0";
-const defaultDomain4 = "#0d3d82";
-const defaultDomainColor = "#314453";
-const defaultSubjectColor = "#4D6779";
-const defaultTopicColor = "#6A8DA6";
-const defaultHoverColor = "#314453";
-const defaultLinkColor = "#314453";
-const defaultLinkHoverColor = "#6A8DA6";
-const scienceDomainColor = "#94424F";
-const scienceSubjectColor = "#9D4A5A";
-const scienceTopicColor = "#C55F73";
-const scienceHoverColor = "#94424F";
-const scienceLinkColor = "#94424F";
-const scienceLinkHoverColor = "#C55F73";
-const humanitiesDomainColor = "#AD3434";
-const humanitiesSubjectColor = "#C13B31";
-const humanitiesTopicColor = "#D24A45";
-const humanitiesHoverColor = "#AD3434";
-const humanitiesLinkColor = "#AD3434";
-const humanitiesLinkHoverColor = "#D24A45";
-const economicsDomainColor = "#B77033";
-const economicsSubjectColor = "#BF7B34";
-const economicsTopicColor = "#D1933B";
-const economicsHoverColor = "#B77033";
-const economicsLinkColor = "#B77033";
-const economicsLinkHoverColor = "#D1933B";
-const csDomainColor = "#437A39";
-const csSubjectColor = "#53893E";
-const csTopicColor = "#689B51";
-const csHoverColor = "#437A39";
-const csLinkColor = "#437A39";
-const csLinkHoverColor = "#689B51";
-const partnerContentDomainColor = "#218270";
-const partnerContentSubjectColor = "#2C8D7B";
-const partnerContentTopicColor = "#329A86";
-const partnerContentHoverColor = "#218270";
-const partnerContentLinkColor = "#218270";
-const partnerContentLinkHoverColor = "#329A86";
-const essayDomainColor = "#0071B3";
-const mathDomainColor = "#1C758A";
-const mathSubjectColor = "#46A8BF";
-const mathTopicColor = "#4FBAD4";
-const mathHoverColor = "#1C758A";
-const mathLinkColor = "#1C758A";
-const mathLinkHoverColor = "#4FBAD4";
-const testPrepDomainColor = "#644172";
-const testPrepSubjectColor = "#7E5F8E";
-const testPrepTopicColor = "#9A72AC";
-const testPrepHoverColor = "#644172";
-const testPrepLinkColor = "#644172";
-const testPrepLinkHoverColor = "#9A72AC";
-const collegeCareersMoreDomainColor = "#218270";
-const collegeCareersMoreSubjectColor = "#2C8D7B";
-const collegeCareersMoreTopicColor = "#329A86";
-const collegeCareersMoreHoverColor = "#218270";
-const collegeCareersMoreLinkColor = "#218270";
-const collegeCareersMoreLinkHoverColor = "#329A86";
-const satDomainColor = "#0084CE";
-const satSubjectColor = "#0084CE";
-const satTopicColor = "#0084CE";
-const satHoverColor = "#0084CE";
-const satLinkColor = "#0084CE";
-const satLinkHoverColor = "#0084CE";
-const colorProficient = "#1C758A";
-const colorPracticed = "rgb(158, 221, 235)";
-const colorMastery1 = "rgb(90, 197, 221)";
-const colorMastery2 = "rgb(42, 174, 203)";
-const colorMastery3 = "#1C758A";
-const colorSuggested = "#73982C";
-const colorReview = "#E35D04";
-const colorNotStarted = "#CCCCCC";
-const colorStarted = "#C7E5F7";
-const colorStruggling = "#C30202";
-const colorPersonal = "#00809C";
-const colorPractice = "#96D9FF";
-const colorEnergyPoints = "#005987";
-const pureSmMin$1 = "568px";
-const pureMdMin$1 = "768px";
-const pureLgMin$1 = "1024px";
-const pureXlMin$1 = "1200px";
-const pureXsMax$1 = "567px";
-const pureSmMax$1 = "767px";
-const pureMdMax$1 = "1023px";
-const 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]: {
- *
- *           },
- *       },
- *   });
- */
-const {
-  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, ")")
-};
-
-const 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)"
-};
-const borderRadius = 4;
-const 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"
-};
-const 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"
-};
-const 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: { // For in-page tabs and leaf page breadcrumbs
-    ...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
-
-  }
-};
+class HighlightTooltip extends React__namespace.PureComponent {
+  _getFocusRect() {
+    const {
+      focusNode,
+      focusOffset,
+      offsetParent
+    } = this.props; // Get a range of *just* the focus point of the selection.
 
-var globalStyles = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    colors: colors$1,
-    borderRadius: borderRadius,
-    fonts: fonts,
-    typography: typography
-});
+    const 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.
 
-const 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
-});
+    const 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!
 
-class NewTooltip extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-
-    _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
-        });
-      }
-
-      this.props.onDismiss && this.props.onDismiss();
-    });
-
-    _defineProperty(this, "_popoverContentColor", () => {
-      const {
-        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() {
-    const {
-      toggleOnHover,
-      showOnMount
-    } = this.props;
-    const {
-      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() {
-    const {
-      side,
-      children,
-      content,
-      dismissOnClickClose
-    } = this.props;
-    const {
-      onMouseEnter,
-      onMouseLeave
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
-      content: /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
-        color: this._popoverContentColor(),
-        closeButtonVisible: dismissOnClickClose,
-        style: {}
-      }, content),
-      placement: side,
-      opened: this._shouldShowTooltip(),
-      onClose: this._handleDismiss,
-      dismissEnabled: false,
-      testId: "question-id"
-    }, /*#__PURE__*/React__namespace.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__namespace.PureComponent {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "_tooltip", void 0);
-  }
-
-  _getFocusRect() {
-    const {
-      focusNode,
-      focusOffset,
-      offsetParent
-    } = this.props; // Get a range of *just* the focus point of the selection.
-
-    const 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.
-
-    const 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.
 
 
     const {
@@ -25690,29 +24552,30 @@ class HighlightTooltip extends React__namespace.PureComponent {
 
     if (!focusRect) {
       return null;
-    }
+    } // using div instead of TooltipContent because
+    // TooltipContent wouldn't let me overwrite
+    // user-select and onClick
+
 
     const content = /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$x.tooltipLabel)
+      className: aphrodite.css(styles$x.tooltipLabel),
+      onClick: this.props.onClick
     }, this.props.label);
-    return /*#__PURE__*/React__namespace.createElement(NewTooltip, {
-      content: content,
-      color: colors$1.kaBlue,
-      inverted: true,
-      onClick: this.props.onClick,
+    const 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__namespace.createElement("div", {
+      style: style,
       onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave,
-      toggleOnHover: false,
-      showOnMount: true,
-      ref: e => this._tooltip = e
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        position: "absolute",
-        left: focusRect.left,
-        top: focusRect.top,
-        height: focusRect.height
-      }
-    }));
+      onMouseLeave: this.props.onMouseLeave
+    }, /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+      content: content,
+      opened: true
+    }, /*#__PURE__*/React__namespace.createElement("div", null)));
   }
 
 }
@@ -25724,7 +24587,10 @@ const styles$x = aphrodite.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__default["default"].medium_16, "px"),
+    cursor: "pointer"
   }
 });
 
@@ -25875,7 +24741,7 @@ class SelectionTracker extends React__namespace.PureComponent {
     });
 
     _defineProperty(this, "_handleSelectionChange", () => {
-      this._updateTrackedSelection(this.props.buildHighlight);
+      this._updateTrackedSelection();
 
       if (this.state.mouseState === "down") {
         this.setState({
@@ -25901,15 +24767,15 @@ class SelectionTracker extends React__namespace.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() {
@@ -25966,15 +24832,18 @@ class SelectionTracker extends React__namespace.PureComponent {
     };
   }
   /**
-   * Compute the current TrackedSelection from the document state.
+   * Compute and update the TrackedSelection to reflect the document state.
    */
 
 
-  _computeTrackedSelection(buildHighlight) {
+  _updateTrackedSelection() {
     const focusAndRange = this._computeFocusAndRange();
 
     if (!focusAndRange) {
-      return null;
+      this.setState({
+        trackedSelection: null
+      });
+      return;
     }
 
     const {
@@ -25982,26 +24851,20 @@ class SelectionTracker extends React__namespace.PureComponent {
       focusOffset,
       range
     } = focusAndRange;
-    const proposedHighlight = buildHighlight(range);
+    const proposedHighlight = this.props.buildHighlight(range);
 
     if (!proposedHighlight) {
-      return null;
+      this.setState({
+        trackedSelection: null
+      });
+      return;
     }
 
-    return {
+    const trackedSelection = {
       focusNode,
       focusOffset,
       proposedHighlight
     };
-  }
-  /**
-   * Update the TrackedSelection to reflect the document state.
-   */
-
-
-  _updateTrackedSelection(buildHighlight) {
-    const trackedSelection = this._computeTrackedSelection(buildHighlight);
-
     this.setState({
       trackedSelection
     });
@@ -26379,10 +25242,6 @@ const styles$w = aphrodite.StyleSheet.create({
   }
 });
 
-const getLineHeightForNode = (line1, line2) => {
-  return $__default["default"](line2).offset().top - $__default["default"](line1).offset().top;
-};
-
 function getInitialParseState() {
   return {
     currentRef: [],
@@ -26750,65 +25609,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__namespace.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() {
-    const body = this.body;
-    const 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__namespace.createElement("div", {
-      className: aphrodite.css(styles$v.measurer)
-    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: ref => this.body = ref,
+      className: aphrodite.css(styles$v.measurer),
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      ref: ref => this._line = ref,
       className: "paragraph"
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      ref: ref => this.end = ref
-    })));
+    }, "Line Height Measurement"));
   }
 
 }
-
 const styles$v = aphrodite.StyleSheet.create({
   measurer: {
     position: "absolute",
-    width: "100%",
     top: 0,
     left: 0,
+    visibility: "hidden",
     // keep from blocking text selection
     zIndex: -1
   }
@@ -26855,7 +25689,7 @@ class Passage extends React__namespace.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);
@@ -27419,6 +26253,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]: {
+ *
+ *           },
+ *       },
+ *   });
+ */
+const {
+  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, ")")
+};
+
 const {
   zIndexAboveScratchpad,
   zIndexInteractiveComponent,
@@ -29144,6 +28017,129 @@ class Radio$1 extends React__namespace.Component {
     });
   }
 
+  static validate(userInput, rubric) {
+    const 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__namespace._("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__namespace._("'None of the above' may not be selected " + "when other answers are selected.")
+      };
+    }
+
+    const correct = userInput.choicesSelected.every((selected, i) => {
+      let 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) {
+      let noneOfTheAboveIndex = null;
+      let noneOfTheAboveSelected = false;
+      const choiceStates = props.choiceStates;
+      const choicesSelected = choiceStates.map(() => false);
+      const countChoices = props.countChoices;
+      const numCorrect = props.numCorrect;
+
+      for (let i = 0; i < choicesSelected.length; i++) {
+        const 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 */
+
+
+    const {
+      values
+    } = props;
+
+    if (values) {
+      let noneOfTheAboveIndex = null;
+      let noneOfTheAboveSelected = false;
+      const choicesSelected = [...values];
+      const countChoices = props.countChoices;
+      const numCorrect = props.numCorrect;
+      const valuesLength = values.length;
+
+      for (let i = 0; i < valuesLength; i++) {
+        const index = props.choices[i].originalIndex;
+        choicesSelected[index] = values[i];
+
+        if (props.choices[i].isNoneOfTheAbove) {
+          noneOfTheAboveIndex = index;
+
+          if (choicesSelected[i]) {
+            noneOfTheAboveSelected = true;
+          }
+        }
+      }
+
+      return {
+        choicesSelected,
+        noneOfTheAboveIndex,
+        noneOfTheAboveSelected,
+        countChoices,
+        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.
@@ -29274,129 +28270,6 @@ class Radio$1 extends React__namespace.Component {
     });
   }
 
-  static validate(userInput, rubric) {
-    const 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__namespace._("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__namespace._("'None of the above' may not be selected " + "when other answers are selected.")
-      };
-    }
-
-    const correct = userInput.choicesSelected.every((selected, i) => {
-      let 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) {
-      let noneOfTheAboveIndex = null;
-      let noneOfTheAboveSelected = false;
-      const choiceStates = props.choiceStates;
-      const choicesSelected = choiceStates.map(() => false);
-      const countChoices = props.countChoices;
-      const numCorrect = props.numCorrect;
-
-      for (let i = 0; i < choicesSelected.length; i++) {
-        const 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 */
-
-
-    const {
-      values
-    } = props;
-
-    if (values) {
-      let noneOfTheAboveIndex = null;
-      let noneOfTheAboveSelected = false;
-      const choicesSelected = [...values];
-      const countChoices = props.countChoices;
-      const numCorrect = props.numCorrect;
-      const valuesLength = values.length;
-
-      for (let i = 0; i < valuesLength; i++) {
-        const index = props.choices[i].originalIndex;
-        choicesSelected[index] = values[i];
-
-        if (props.choices[i].isNoneOfTheAbove) {
-          noneOfTheAboveIndex = index;
-
-          if (choicesSelected[i]) {
-            noneOfTheAboveSelected = true;
-          }
-        }
-      }
-
-      return {
-        choicesSelected,
-        noneOfTheAboveIndex,
-        noneOfTheAboveSelected,
-        countChoices,
-        numCorrect
-      };
-    } // Nothing checked
-
-
-    return {
-      choicesSelected: props.choices.map(() => false)
-    };
-  }
-
 }
 
 _defineProperty(Radio$1, "defaultProps", {
@@ -36054,51 +34927,1032 @@ class InteractiveGraph extends React__namespace.Component {
     // actually just wrong
 
 
-    if (!hasValue || ___default["default"].isEqual(state, rubric.graph)) {
-      // We're where we started.
-      return {
-        type: "invalid",
-        message: null
-      };
+    if (!hasValue || ___default["default"].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
+};
+
+const black = "#000000";
+const grayDarker = "#333333";
+const grayDark = "#555555";
+const gray = "#999999";
+const grayLight = "#AAAAAA";
+const grayLighter = "#DDDDDD";
+const white = "#FFFFFF";
+const blue = "#005A88";
+const blueDark = "#2C3747";
+const green = "#76A005";
+const red = "#CF5044";
+const yellow = "#FFC40D";
+const orange = "#BF4F04";
+const pink = "#C3325F";
+const purple = "#7A43B6";
+const bodyBackground = "#FFFFFF";
+const textColor = "#444444";
+const linkColor = "#005987";
+const linkColorHover = "#678D00";
+const sansFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
+const serifFontFamily = "Georgia,'Times New Roman',Times,serif";
+const monoFontFamily = "Monaco,Menlo,Consolas,'Courier New',monospace";
+const baseFontSize = "14px";
+const baseFontFamily = "inherit";
+const baseLineHeight = "20px";
+const altFontFamily = "Georgia,'Times New Roman',Times,serif";
+const headingsFontFamily = "inherit";
+const headingsFontWeight = "bold";
+const headingsColor = "inherit";
+const fontSizeLarge = "18px";
+const fontSizeSmall = "12px";
+const fontSizeMini = "10.5px";
+const paddingLarge = "11px 19px";
+const paddingSmall = "2px 10px";
+const paddingMini = "0 6px";
+const baseBorderRadius = "4px";
+const borderRadiusLarge = "6px";
+const borderRadiusSmall = "3px";
+const tableBackground = "#000000";
+const tableBackgroundAccent = "#F9F9F9";
+const tableBackgroundHover = "#F5F5F5";
+const tableBorder = "#DDDDDD";
+const btnBackground = "#FFFFFF";
+const btnBackgroundHighlight = "rgb(230, 230, 230)";
+const btnBorder = "#CCCCCC";
+const btnPrimaryBackground = "#0088CC";
+const btnPrimaryBackgroundHighlight = "rgb(0, 68, 204)";
+const btnInfoBackground = "#5BC0DE";
+const btnInfoBackgroundHighlight = "#2F96B4";
+const btnSuccessBackground = "#62C462";
+const btnSuccessBackgroundHighlight = "#51A351";
+const btnWarningBackground = "rgb(251, 180, 81)";
+const btnWarningBackgroundHighlight = "#F89406";
+const btnDangerBackground = "#EE5F5B";
+const btnDangerBackgroundHighlight = "#BD362F";
+const btnInverseBackground = "#444444";
+const btnInverseBackgroundHighlight = "#222222";
+const inputBackground = "#FFFFFF";
+const inputBorder = "#CCCCCC";
+const inputBorderRadius = "4px";
+const inputDisabledBackground = "#EEEEEE";
+const formActionsBackground = "#F5F5F5";
+const inputHeight = "30px";
+const dropdownBackground = "#FFFFFF";
+const dropdownBorder = "rgba(0, 0, 0, 0.2)";
+const dropdownDividerTop = "#E5E5E5";
+const dropdownDividerBottom = "#FFFFFF";
+const dropdownLinkColor = "#333333";
+const dropdownLinkColorHover = "#FFFFFF";
+const dropdownLinkColorActive = "#FFFFFF";
+const dropdownLinkBackgroundActive = "#0088CC";
+const dropdownLinkBackgroundHover = "#0088CC";
+const zindexDropdown = 1000;
+const zindexPopover = 1010;
+const zindexTooltip = 1030;
+const zindexFixedNavbar = 1030;
+const zindexHeader = 1060;
+const zindexModalBackdrop = 1070;
+const zindexModal = 1080;
+const zindexAboveModal = 1090;
+const iconSpritePath = "../img/glyphicons-halflings.png";
+const iconWhiteSpritePath = "../img/glyphicons-halflings-white.png";
+const placeholderText = "#999999";
+const hrBorder = "#EEEEEE";
+const horizontalComponentOffset = "180px";
+const wellBackground = "#F5F5F5";
+const navbarCollapseWidth = "979px";
+const navbarCollapseDesktopWidth = "980px";
+const navbarHeight = "40px";
+const navbarBackgroundHighlight = "#FFFFFF";
+const navbarBackground = "rgb(242, 242, 242)";
+const navbarBorder = "rgb(212, 212, 212)";
+const navbarText = "#777777";
+const navbarLinkColor = "#777777";
+const navbarLinkColorHover = "#333333";
+const navbarLinkColorActive = "#555555";
+const navbarLinkBackgroundHover = "#000000";
+const navbarLinkBackgroundActive = "rgb(230, 230, 230)";
+const navbarBrandColor = "#777777";
+const navbarInverseBackground = "#111111";
+const navbarInverseBackgroundHighlight = "#222222";
+const navbarInverseBorder = "#252525";
+const navbarInverseText = "#999999";
+const navbarInverseLinkColor = "#999999";
+const navbarInverseLinkColorHover = "#FFFFFF";
+const navbarInverseLinkColorActive = "#FFFFFF";
+const navbarInverseLinkBackgroundHover = "#000000";
+const navbarInverseLinkBackgroundActive = "#111111";
+const navbarInverseSearchBackground = "rgb(82, 82, 82)";
+const navbarInverseSearchBackgroundFocus = "#FFFFFF";
+const navbarInverseSearchBorder = "#111111";
+const navbarInverseSearchPlaceholderColor = "#CCCCCC";
+const navbarInverseBrandColor = "#999999";
+const paginationBackground = "#FFFFFF";
+const paginationBorder = "#DDDDDD";
+const paginationActiveBackground = "#F5F5F5";
+const heroUnitBackground = "#EEEEEE";
+const heroUnitHeadingColor = "inherit";
+const heroUnitLeadColor = "inherit";
+const warningText = "#C09853";
+const warningBackground = "#FCF8E3";
+const warningBorder = "rgb(251, 239, 213)";
+const errorText = "#B94A48";
+const errorBackground = "#F2DEDE";
+const errorBorder = "rgb(238, 211, 215)";
+const successText = "#468847";
+const successBackground = "#DFF0D8";
+const successBorder = "rgb(212, 232, 197)";
+const infoText = "#4A7C17";
+const infoBackground = "#EDF2DF";
+const infoBorder = "rgb(228, 232, 197)";
+const tooltipColor = "#FFFFFF";
+const tooltipBackground = "#000000";
+const tooltipArrowWidth = "5px";
+const tooltipArrowColor = "#000000";
+const popoverBackground = "#FFFFFF";
+const popoverArrowWidth = "10px";
+const popoverArrowColor = "#FFFFFF";
+const popoverTitleBackground = "rgb(247, 247, 247)";
+const popoverArrowOuterWidth = "11px";
+const popoverArrowOuterColor = "rgba(0, 0, 0, 0.25)";
+const gridColumns = "12";
+const gridColumnWidth = "60px";
+const gridGutterWidth = "20px";
+const gridRowWidth = "940px";
+const gridColumnWidth1200 = "70px";
+const gridGutterWidth1200 = "30px";
+const gridRowWidth1200 = "1170px";
+const gridColumnWidth768 = "42px";
+const gridGutterWidth768 = "20px";
+const gridRowWidth768 = "724px";
+const fluidGridColumnWidth = "6.382978723404255%";
+const fluidGridGutterWidth = "2.127659574468085%";
+const fluidGridColumnWidth1200 = "5.982905982905983%";
+const fluidGridGutterWidth1200 = "2.564102564102564%";
+const fluidGridColumnWidth768 = "5.801104972375691%";
+const fluidGridGutterWidth768 = "2.7624309392265194%";
+const kaGreen = "#71B307";
+const kaGreenLight = "#BED47A";
+const kaBlue = "#314453";
+const kaBlueLight = "#4D6779";
+const grayExtraDark = "#111111";
+const grayExtraLight = "#EEEEEE";
+const graySuperLight = "#F7F7F7";
+const whiteDark = "#FDFDFD";
+const dark = "#21242C";
+const blueDarkUnsaturated = "#3B414E";
+const blueDarkSaturated = "#1F3043";
+const blueLight = "#A9C0D1";
+const greenLight = "#C6D1AD";
+const greenDark = "#356700";
+const yellowGreen = "#9DB63B";
+const okGreen = "#A7CF5B";
+const alertRed = "#C42420";
+const coral = "#EE6666";
+const grayBlue = "#9AB3B9";
+const lightPageBackground = "#FDFDFD";
+const yclaBlue = "#49BAD5";
+const yclaTeal = "#56D0B3";
+const yclaTealDark = "#50C1A7";
+const yclaGreenDark = "#3D9A82";
+const yclaGreen = "#81C262";
+const learnstormBlue = "#4898FC";
+const homepageBlue = "#46A8BF";
+const backgroundBlue = "#00294A";
+const teacherSignupBlue = "#335d7d";
+const homepageGreen = "#2B8E7B";
+const streakColor = "#F79734";
+const facebookColor = "#1A60A2";
+const blueGoogleColor = "#2CAFE2";
+const redGoogleColor = "#BF4434";
+const homepageColor = "#2D585E";
+const lightTextColor = "#898989";
+const fontSizeTiny = "11px";
+const fontSizeNormal = "14px";
+const fontSizeMedium = "16px";
+const fontSizeExtraLarge = "24px";
+const fontSizeHuge = "36px";
+const fontSizeBakana = "48px";
+const fontSizeBananas = "60px";
+const fixedWidthFontFamily = "'Helvetica Neue',Helvetica,Arial,sans-serif";
+const contentPadding = "20px";
+const primaryButtonBackground = "#89B908";
+const primaryButtonBorder = "#76A005";
+const buttonTextColor = "rgb(122, 122, 122)";
+const buttonBorderRadius = "3px";
+const basicBorderColor = "#CCCCCC";
+const minContainerWidth = "1000px";
+const maxContainerWidth = "1200px";
+const formHintColor = "#999999";
+const guidelineExampleText = "#606060";
+const hoverCardWidth = "450px";
+const menuHighlightColor = "#96AB4F";
+const menuHighlightBorderColor = "#76A005";
+const menuActiveTextColor = "#FFFFFF";
+const menuInactiveTextColor = "#444444";
+const menuSubheaderTextColor = "rgb(120, 120, 120)";
+const menuBorderColor = "#94A170";
+const unreadBackgroundColor = "#ECEEF4";
+const menuLineHeight = "18px";
+const menuSubheaderLineHeight = "17px";
+const menuSubheaderFontSize = "9px";
+const notificationBarColor = "#4858A4";
+const modalBodyTopPadding = "20px";
+const modalDialogPadding = "15px";
+const modalSectionPadding = "9px";
+const mathDomain1 = "#11ACCD";
+const mathDomain2 = "#63D9EA";
+const mathDomain3 = "#027d97";
+const mathDomain4 = "#085566";
+const partnerContentDomain1 = "#01A995";
+const partnerContentDomain2 = "#01D1C1";
+const partnerContentDomain3 = "#208170";
+const partnerContentDomain4 = "#144F44";
+const csDomain1 = "#1FAB54";
+const csDomain2 = "#74CF70";
+const csDomain3 = "#0D923F";
+const csDomain4 = "#085E29";
+const economicsDomain1 = "#E07D10";
+const economicsDomain2 = "#FFBE26";
+const economicsDomain3 = "#A75A05";
+const economicsDomain4 = "#953C02";
+const collegeCareersMoreDomain1 = "#01A995";
+const collegeCareersMoreDomain2 = "#01D1C1";
+const collegeCareersMoreDomain3 = "#208170";
+const collegeCareersMoreDomain4 = "#144F44";
+const humanitiesDomain1 = "#E84D39";
+const humanitiesDomain2 = "#FF8482";
+const humanitiesDomain3 = "#BE2612";
+const humanitiesDomain4 = "#8C1C0D";
+const gtpDomain1 = "#1865F2";
+const gtpDomain2 = "#1865F2";
+const gtpDomain3 = "#1865F2";
+const gtpDomain4 = "#1865F2";
+const scienceDomain1 = "#CA337C";
+const scienceDomain2 = "#FF92C6";
+const scienceDomain3 = "#9E034E";
+const scienceDomain4 = "#6B0235";
+const testPrepDomain1 = "#1865F2";
+const testPrepDomain2 = "#1865F2";
+const testPrepDomain3 = "#1865F2";
+const testPrepDomain4 = "#1865F2";
+const defaultDomain1 = "#1865F2";
+const defaultDomain2 = "#66afe9";
+const defaultDomain3 = "#1152b0";
+const defaultDomain4 = "#0d3d82";
+const defaultDomainColor = "#314453";
+const defaultSubjectColor = "#4D6779";
+const defaultTopicColor = "#6A8DA6";
+const defaultHoverColor = "#314453";
+const defaultLinkColor = "#314453";
+const defaultLinkHoverColor = "#6A8DA6";
+const scienceDomainColor = "#94424F";
+const scienceSubjectColor = "#9D4A5A";
+const scienceTopicColor = "#C55F73";
+const scienceHoverColor = "#94424F";
+const scienceLinkColor = "#94424F";
+const scienceLinkHoverColor = "#C55F73";
+const humanitiesDomainColor = "#AD3434";
+const humanitiesSubjectColor = "#C13B31";
+const humanitiesTopicColor = "#D24A45";
+const humanitiesHoverColor = "#AD3434";
+const humanitiesLinkColor = "#AD3434";
+const humanitiesLinkHoverColor = "#D24A45";
+const economicsDomainColor = "#B77033";
+const economicsSubjectColor = "#BF7B34";
+const economicsTopicColor = "#D1933B";
+const economicsHoverColor = "#B77033";
+const economicsLinkColor = "#B77033";
+const economicsLinkHoverColor = "#D1933B";
+const csDomainColor = "#437A39";
+const csSubjectColor = "#53893E";
+const csTopicColor = "#689B51";
+const csHoverColor = "#437A39";
+const csLinkColor = "#437A39";
+const csLinkHoverColor = "#689B51";
+const partnerContentDomainColor = "#218270";
+const partnerContentSubjectColor = "#2C8D7B";
+const partnerContentTopicColor = "#329A86";
+const partnerContentHoverColor = "#218270";
+const partnerContentLinkColor = "#218270";
+const partnerContentLinkHoverColor = "#329A86";
+const essayDomainColor = "#0071B3";
+const mathDomainColor = "#1C758A";
+const mathSubjectColor = "#46A8BF";
+const mathTopicColor = "#4FBAD4";
+const mathHoverColor = "#1C758A";
+const mathLinkColor = "#1C758A";
+const mathLinkHoverColor = "#4FBAD4";
+const testPrepDomainColor = "#644172";
+const testPrepSubjectColor = "#7E5F8E";
+const testPrepTopicColor = "#9A72AC";
+const testPrepHoverColor = "#644172";
+const testPrepLinkColor = "#644172";
+const testPrepLinkHoverColor = "#9A72AC";
+const collegeCareersMoreDomainColor = "#218270";
+const collegeCareersMoreSubjectColor = "#2C8D7B";
+const collegeCareersMoreTopicColor = "#329A86";
+const collegeCareersMoreHoverColor = "#218270";
+const collegeCareersMoreLinkColor = "#218270";
+const collegeCareersMoreLinkHoverColor = "#329A86";
+const satDomainColor = "#0084CE";
+const satSubjectColor = "#0084CE";
+const satTopicColor = "#0084CE";
+const satHoverColor = "#0084CE";
+const satLinkColor = "#0084CE";
+const satLinkHoverColor = "#0084CE";
+const colorProficient = "#1C758A";
+const colorPracticed = "rgb(158, 221, 235)";
+const colorMastery1 = "rgb(90, 197, 221)";
+const colorMastery2 = "rgb(42, 174, 203)";
+const colorMastery3 = "#1C758A";
+const colorSuggested = "#73982C";
+const colorReview = "#E35D04";
+const colorNotStarted = "#CCCCCC";
+const colorStarted = "#C7E5F7";
+const colorStruggling = "#C30202";
+const colorPersonal = "#00809C";
+const colorPractice = "#96D9FF";
+const colorEnergyPoints = "#005987";
+const pureSmMin = "568px";
+const pureMdMin = "768px";
+const pureLgMin = "1024px";
+const pureXlMin = "1200px";
+const pureXsMax = "567px";
+const pureSmMax = "767px";
+const pureMdMax = "1023px";
+const 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
+});
+
+const 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)"
+};
+const borderRadius = 4;
+const 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"
+};
+const 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"
+};
+const 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: { // For in-page tabs and leaf page breadcrumbs
+    ...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__namespace.Component {
   constructor() {
     super(...arguments);