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

package/dist/DropdownButton/index.js

@@ -0,0 +1,169 @@
+import _styled from "@emotion/styled/base";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { FillButton, IconButton, Popover, StrokeButton, TextButton } from '@codecademy/gamut';
+import { ArrowChevronDownFilledIcon, MiniKebabMenuIcon } from '@codecademy/gamut-icons';
+import { css, pxRem, styledOptions } from '@codecademy/gamut-styles';
+import { forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import * as React from 'react';
+import { DropdownList } from './DropdownList';
+import { useDynamicPopoverPosition } from './useDynamicPopoverPosition';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DownArrow = /*#__PURE__*/_styled(ArrowChevronDownFilledIcon, _extends({}, {
+  target: "e1mfstzo1",
+  label: "DownArrow"
+}, styledOptions))("margin-left:", pxRem(8), ";transition:transform 0.35s ease-out;", ({
+  isOpen
+}) => isOpen && 'transform: rotate(-180deg)', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ecm9wZG93bkJ1dHRvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0JFIiwiZmlsZSI6Ii4uLy4uL3NyYy9Ecm9wZG93bkJ1dHRvbi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCdXR0b25Qcm9wcyxcbiAgRmlsbEJ1dHRvbixcbiAgSWNvbkJ1dHRvbixcbiAgUG9wb3ZlcixcbiAgUG9wb3ZlclByb3BzLFxuICBQb3BvdmVyWVBvc2l0aW9uVHlwZSxcbiAgU3Ryb2tlQnV0dG9uLFxuICBUZXh0QnV0dG9uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBBcnJvd0NoZXZyb25Eb3duRmlsbGVkSWNvbixcbiAgTWluaUtlYmFiTWVudUljb24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgcHhSZW0sIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgZm9yd2FyZFJlZixcbiAgUHJvcHNXaXRoQ2hpbGRyZW4sXG4gIHVzZUlkLFxuICB1c2VJbXBlcmF0aXZlSGFuZGxlLFxuICB1c2VSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IERyb3Bkb3duTGlzdCwgRHJvcGRvd25MaXN0UHJvcHMgfSBmcm9tICcuL0Ryb3Bkb3duTGlzdCc7XG5pbXBvcnQgeyB1c2VEeW5hbWljUG9wb3ZlclBvc2l0aW9uIH0gZnJvbSAnLi91c2VEeW5hbWljUG9wb3ZlclBvc2l0aW9uJztcblxuY29uc3QgRG93bkFycm93ID0gc3R5bGVkKEFycm93Q2hldnJvbkRvd25GaWxsZWRJY29uLCBzdHlsZWRPcHRpb25zKTx7XG4gIGlzT3Blbj86IGJvb2xlYW47XG59PmBcbiAgbWFyZ2luLWxlZnQ6ICR7cHhSZW0oOCl9O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zNXMgZWFzZS1vdXQ7XG4gICR7KHsgaXNPcGVuIH0pID0+IGlzT3BlbiAmJiAndHJhbnNmb3JtOiByb3RhdGUoLTE4MGRlZyknfTtcbmA7XG5cbmNvbnN0IEhvcml6b250YWxLZWJhYkljb24gPSBzdHlsZWQoTWluaUtlYmFiTWVudUljb24pKFxuICBjc3Moe1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSg5MGRlZyknLFxuICB9KVxuKTtcblxuZXhwb3J0IHR5cGUgRHJvcGRvd25CdXR0b25SZWZUeXBlID0ge1xuICBmb2N1czogSFRNTEJ1dHRvbkVsZW1lbnRbJ2ZvY3VzJ107XG59O1xuXG5leHBvcnQgdHlwZSBEcm9wZG93bkJ1dHRvblByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG4gIHtcbiAgICBhbGlnbj86IFBvcG92ZXJQcm9wc1snYWxpZ24nXTtcbiAgICBidXR0b25UeXBlPzogJ2ZpbGwnIHwgJ3N0cm9rZScgfCAndGV4dCcgfCAna2ViYWInIHwgJ2hvcml6b250YWxLZWJhYic7XG4gICAgZGVmYXVsdFBvc2l0aW9uPzogUG9wb3ZlcllQb3NpdGlvblR5cGVbJ3Bvc2l0aW9uJ107XG4gICAgZHJvcGRvd25JdGVtczogRHJvcGRvd25MaXN0UHJvcHNbJ2Ryb3Bkb3duSXRlbXMnXTtcbiAgICBob3Jpem9udGFsT2Zmc2V0PzogbnVtYmVyO1xuICAgIC8qKlxuICAgICAqIFNldHMgdGhlIHNpemUgb2YgdGhlIGRvd24gYXJyb3cgaWNvbiBpbiB0aGUgYnV0dG9ucyB0aGF0IGhhdmUgdGV4dCBvciB0aGUga2ViYWIgYW5kIGhvcml6b250YWwga2ViYWIgaWNvbnMuXG4gICAgICovXG4gICAgaWNvblNpemU/OiBudW1iZXI7XG4gICAgLyoqXG4gICAgICogSWYgdGhlIGRyb3Bkb3duIHNob3VsZCBzZW1hbnRpY2FsbHkgYmUgYSBtZW51XG4gICAgICovXG4gICAgaXNNZW51PzogYm9vbGVhbjtcbiAgICBvbkNsaWNrPzogKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB2b2lkO1xuICAgIHRpcFByb3BzPzogUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEljb25CdXR0b24+Wyd0aXBQcm9wcyddO1xuICAgIHZlcnRpY2FsT2Zmc2V0PzogbnVtYmVyO1xuICB9ICYgQnV0dG9uUHJvcHNcbj47XG5cbmV4cG9ydCBjb25zdCBEcm9wZG93bkJ1dHRvbiA9IGZvcndhcmRSZWY8XG4gIERyb3Bkb3duQnV0dG9uUmVmVHlwZSxcbiAgRHJvcGRvd25CdXR0b25Qcm9wc1xuPihcbiAgKFxuICAgIHtcbiAgICAgIGFsaWduID0gJ2xlZnQnLFxuICAgICAgYnV0dG9uVHlwZSA9ICdmaWxsJyxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgZGVmYXVsdFBvc2l0aW9uID0gJ2JlbG93JyxcbiAgICAgIGRyb3Bkb3duSXRlbXMsXG4gICAgICBob3Jpem9udGFsT2Zmc2V0LFxuICAgICAgaWNvblNpemUsXG4gICAgICBpc01lbnUsXG4gICAgICBvbkNsaWNrLFxuICAgICAgdGlwUHJvcHMsXG4gICAgICB2ZXJ0aWNhbE9mZnNldCA9IDAsXG4gICAgICBzaXplLFxuICAgICAgdmFyaWFudCA9ICdwcmltYXJ5JyxcbiAgICAgIC4uLmJ1dHRvblN0eWxlUHJvcHNcbiAgICB9LFxuICAgIHJlZlxuICApID0+IHtcbiAgICBjb25zdCBidXR0b25JZCA9IHVzZUlkKCk7XG4gICAgY29uc3QgdGFyZ2V0UmVmID0gdXNlUmVmPEhUTUxBbmNob3JFbGVtZW50IHwgSFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuICAgIGNvbnN0IHsgcG9zaXRpb24sIHBvcG92ZXJDb250YWluZXJSZWZDYWxsYmFjayB9ID0gdXNlRHluYW1pY1BvcG92ZXJQb3NpdGlvbihcbiAgICAgIHtcbiAgICAgICAgdGFyZ2V0UmVmLFxuICAgICAgICB2ZXJ0aWNhbE9mZnNldCxcbiAgICAgICAgZGVmYXVsdFBvc2l0aW9uLFxuICAgICAgfVxuICAgICk7XG5cbiAgICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICBmb2N1czogKCkgPT4gdGFyZ2V0UmVmLmN1cnJlbnQ/LmZvY3VzKCksXG4gICAgfSkpO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICghaXNPcGVuKSB7XG4gICAgICAgIG9uQ2xpY2s/LihldmVudCk7XG4gICAgICB9XG4gICAgICBzZXRJc09wZW4oIWlzT3Blbik7XG4gICAgfTtcbiAgICBjb25zdCBoYW5kbGVSZXF1ZXN0Q2xvc2VkID0gKCkgPT4ge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9O1xuXG4gICAgY29uc3QgdGV4dEJ1dHRvbkRlZmF1bHRTaXplID0gJ25vcm1hbCc7XG4gICAgY29uc3QgaWNvbkJ1dHRvbkRlZmF1bHRTaXplID0gJ3NtYWxsJztcblxuICAgIGxldCBjbGlja1RhcmdldDogUmVhY3QuUmVhY3ROb2RlO1xuICAgIHN3aXRjaCAoYnV0dG9uVHlwZSkge1xuICAgICAgY2FzZSAnZmlsbCc6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxGaWxsQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1maWxsLWJ1dHRvblwiXG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IHRleHRCdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxEb3duQXJyb3cgaXNPcGVuPXtpc09wZW59IHNpemU9e2ljb25TaXplIHx8IDEyfSAvPlxuICAgICAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzdHJva2UnOlxuICAgICAgICBjbGlja1RhcmdldCA9IChcbiAgICAgICAgICA8U3Ryb2tlQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1zdHJva2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgdGV4dEJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHsuLi4oYnV0dG9uU3R5bGVQcm9wcyA/PyB7fSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPERvd25BcnJvdyBpc09wZW49e2lzT3Blbn0gc2l6ZT17aWNvblNpemUgfHwgMTJ9IC8+XG4gICAgICAgICAgPC9TdHJva2VCdXR0b24+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAndGV4dCc6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxUZXh0QnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1zdHJva2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgdGV4dEJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHsuLi4oYnV0dG9uU3R5bGVQcm9wcyA/PyB7fSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPERvd25BcnJvdyBpc09wZW49e2lzT3Blbn0gc2l6ZT17MTJ9IC8+XG4gICAgICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2tlYmFiJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIHJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNPcGVufVxuICAgICAgICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgICAgICAgaWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgaWNvbj17KCkgPT4gPE1pbmlLZWJhYk1lbnVJY29uIHNpemU9e2ljb25TaXplfSAvPn1cbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgaWNvbkJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24ta2ViYWItYnV0dG9uXCJcbiAgICAgICAgICAgIHRpcD1cIlNob3cgb3B0aW9uc1wiXG4gICAgICAgICAgICB0aXBQcm9wcz17dGlwUHJvcHN9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnaG9yaXpvbnRhbEtlYmFiJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJPcHRpb25zXCJcbiAgICAgICAgICAgIHJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNPcGVufVxuICAgICAgICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgICAgICAgaWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgaWNvbj17KCkgPT4gPEhvcml6b250YWxLZWJhYkljb24gc2l6ZT17aWNvblNpemV9IC8+fVxuICAgICAgICAgICAgc2l6ZT17c2l6ZSB8fCBpY29uQnV0dG9uRGVmYXVsdFNpemV9XG4gICAgICAgICAgICB2YXJpYW50PVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1ob3Jpem9udGFsLWtlYmFiLWJ1dHRvblwiXG4gICAgICAgICAgICB0aXBQcm9wcz17dGlwUHJvcHN9XG4gICAgICAgICAgICB0aXA9XCJTaG93IG1vcmUgb3B0aW9uc1wiXG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIHtjbGlja1RhcmdldH1cbiAgICAgICAge2Ryb3Bkb3duSXRlbXMubGVuZ3RoICE9PSAwICYmIChcbiAgICAgICAgICA8UG9wb3ZlclxuICAgICAgICAgICAgcG9wb3ZlckNvbnRhaW5lclJlZj17cG9wb3ZlckNvbnRhaW5lclJlZkNhbGxiYWNrfVxuICAgICAgICAgICAgdGFyZ2V0UmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIG9uUmVxdWVzdENsb3NlPXtoYW5kbGVSZXF1ZXN0Q2xvc2VkfVxuICAgICAgICAgICAgYWxpZ249e2FsaWdufVxuICAgICAgICAgICAgdmVydGljYWxPZmZzZXQ9e3ZlcnRpY2FsT2Zmc2V0fVxuICAgICAgICAgICAgaG9yaXpvbnRhbE9mZnNldD17aG9yaXpvbnRhbE9mZnNldH1cbiAgICAgICAgICAgIHBvc2l0aW9uPXtwb3NpdGlvbn1cbiAgICAgICAgICAgIG91dGxpbmVcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8RHJvcGRvd25MaXN0XG4gICAgICAgICAgICAgIGRyb3Bkb3duSXRlbXM9e2Ryb3Bkb3duSXRlbXN9XG4gICAgICAgICAgICAgIGlzTWVudT17aXNNZW51fVxuICAgICAgICAgICAgICBtZW51QnV0dG9uSWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgICBvbkNsb3NlPXtoYW5kbGVSZXF1ZXN0Q2xvc2VkfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1BvcG92ZXI+XG4gICAgICAgICl9XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuIl19 */"));
+const HorizontalKebabIcon = /*#__PURE__*/_styled(MiniKebabMenuIcon, {
+  target: "e1mfstzo0",
+  label: "HorizontalKebabIcon"
+})(css({
+  transform: 'rotate(90deg)'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ecm9wZG93bkJ1dHRvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUM0QiIsImZpbGUiOiIuLi8uLi9zcmMvRHJvcGRvd25CdXR0b24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQnV0dG9uUHJvcHMsXG4gIEZpbGxCdXR0b24sXG4gIEljb25CdXR0b24sXG4gIFBvcG92ZXIsXG4gIFBvcG92ZXJQcm9wcyxcbiAgUG9wb3ZlcllQb3NpdGlvblR5cGUsXG4gIFN0cm9rZUJ1dHRvbixcbiAgVGV4dEJ1dHRvbixcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHtcbiAgQXJyb3dDaGV2cm9uRG93bkZpbGxlZEljb24sXG4gIE1pbmlLZWJhYk1lbnVJY29uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MsIHB4UmVtLCBzdHlsZWRPcHRpb25zIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7XG4gIGZvcndhcmRSZWYsXG4gIFByb3BzV2l0aENoaWxkcmVuLFxuICB1c2VJZCxcbiAgdXNlSW1wZXJhdGl2ZUhhbmRsZSxcbiAgdXNlUmVmLFxuICB1c2VTdGF0ZSxcbn0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBEcm9wZG93bkxpc3QsIERyb3Bkb3duTGlzdFByb3BzIH0gZnJvbSAnLi9Ecm9wZG93bkxpc3QnO1xuaW1wb3J0IHsgdXNlRHluYW1pY1BvcG92ZXJQb3NpdGlvbiB9IGZyb20gJy4vdXNlRHluYW1pY1BvcG92ZXJQb3NpdGlvbic7XG5cbmNvbnN0IERvd25BcnJvdyA9IHN0eWxlZChBcnJvd0NoZXZyb25Eb3duRmlsbGVkSWNvbiwgc3R5bGVkT3B0aW9ucyk8e1xuICBpc09wZW4/OiBib29sZWFuO1xufT5gXG4gIG1hcmdpbi1sZWZ0OiAke3B4UmVtKDgpfTtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMzVzIGVhc2Utb3V0O1xuICAkeyh7IGlzT3BlbiB9KSA9PiBpc09wZW4gJiYgJ3RyYW5zZm9ybTogcm90YXRlKC0xODBkZWcpJ307XG5gO1xuXG5jb25zdCBIb3Jpem9udGFsS2ViYWJJY29uID0gc3R5bGVkKE1pbmlLZWJhYk1lbnVJY29uKShcbiAgY3NzKHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoOTBkZWcpJyxcbiAgfSlcbik7XG5cbmV4cG9ydCB0eXBlIERyb3Bkb3duQnV0dG9uUmVmVHlwZSA9IHtcbiAgZm9jdXM6IEhUTUxCdXR0b25FbGVtZW50Wydmb2N1cyddO1xufTtcblxuZXhwb3J0IHR5cGUgRHJvcGRvd25CdXR0b25Qcm9wcyA9IFByb3BzV2l0aENoaWxkcmVuPFxuICB7XG4gICAgYWxpZ24/OiBQb3BvdmVyUHJvcHNbJ2FsaWduJ107XG4gICAgYnV0dG9uVHlwZT86ICdmaWxsJyB8ICdzdHJva2UnIHwgJ3RleHQnIHwgJ2tlYmFiJyB8ICdob3Jpem9udGFsS2ViYWInO1xuICAgIGRlZmF1bHRQb3NpdGlvbj86IFBvcG92ZXJZUG9zaXRpb25UeXBlWydwb3NpdGlvbiddO1xuICAgIGRyb3Bkb3duSXRlbXM6IERyb3Bkb3duTGlzdFByb3BzWydkcm9wZG93bkl0ZW1zJ107XG4gICAgaG9yaXpvbnRhbE9mZnNldD86IG51bWJlcjtcbiAgICAvKipcbiAgICAgKiBTZXRzIHRoZSBzaXplIG9mIHRoZSBkb3duIGFycm93IGljb24gaW4gdGhlIGJ1dHRvbnMgdGhhdCBoYXZlIHRleHQgb3IgdGhlIGtlYmFiIGFuZCBob3Jpem9udGFsIGtlYmFiIGljb25zLlxuICAgICAqL1xuICAgIGljb25TaXplPzogbnVtYmVyO1xuICAgIC8qKlxuICAgICAqIElmIHRoZSBkcm9wZG93biBzaG91bGQgc2VtYW50aWNhbGx5IGJlIGEgbWVudVxuICAgICAqL1xuICAgIGlzTWVudT86IGJvb2xlYW47XG4gICAgb25DbGljaz86IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4gdm9pZDtcbiAgICB0aXBQcm9wcz86IFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBJY29uQnV0dG9uPlsndGlwUHJvcHMnXTtcbiAgICB2ZXJ0aWNhbE9mZnNldD86IG51bWJlcjtcbiAgfSAmIEJ1dHRvblByb3BzXG4+O1xuXG5leHBvcnQgY29uc3QgRHJvcGRvd25CdXR0b24gPSBmb3J3YXJkUmVmPFxuICBEcm9wZG93bkJ1dHRvblJlZlR5cGUsXG4gIERyb3Bkb3duQnV0dG9uUHJvcHNcbj4oXG4gIChcbiAgICB7XG4gICAgICBhbGlnbiA9ICdsZWZ0JyxcbiAgICAgIGJ1dHRvblR5cGUgPSAnZmlsbCcsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIGRlZmF1bHRQb3NpdGlvbiA9ICdiZWxvdycsXG4gICAgICBkcm9wZG93bkl0ZW1zLFxuICAgICAgaG9yaXpvbnRhbE9mZnNldCxcbiAgICAgIGljb25TaXplLFxuICAgICAgaXNNZW51LFxuICAgICAgb25DbGljayxcbiAgICAgIHRpcFByb3BzLFxuICAgICAgdmVydGljYWxPZmZzZXQgPSAwLFxuICAgICAgc2l6ZSxcbiAgICAgIHZhcmlhbnQgPSAncHJpbWFyeScsXG4gICAgICAuLi5idXR0b25TdHlsZVByb3BzXG4gICAgfSxcbiAgICByZWZcbiAgKSA9PiB7XG4gICAgY29uc3QgYnV0dG9uSWQgPSB1c2VJZCgpO1xuICAgIGNvbnN0IHRhcmdldFJlZiA9IHVzZVJlZjxIVE1MQW5jaG9yRWxlbWVudCB8IEhUTUxCdXR0b25FbGVtZW50PihudWxsKTtcbiAgICBjb25zdCB7IHBvc2l0aW9uLCBwb3BvdmVyQ29udGFpbmVyUmVmQ2FsbGJhY2sgfSA9IHVzZUR5bmFtaWNQb3BvdmVyUG9zaXRpb24oXG4gICAgICB7XG4gICAgICAgIHRhcmdldFJlZixcbiAgICAgICAgdmVydGljYWxPZmZzZXQsXG4gICAgICAgIGRlZmF1bHRQb3NpdGlvbixcbiAgICAgIH1cbiAgICApO1xuXG4gICAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICAgIHVzZUltcGVyYXRpdmVIYW5kbGUocmVmLCAoKSA9PiAoe1xuICAgICAgZm9jdXM6ICgpID0+IHRhcmdldFJlZi5jdXJyZW50Py5mb2N1cygpLFxuICAgIH0pKTtcblxuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB7XG4gICAgICBpZiAoIWlzT3Blbikge1xuICAgICAgICBvbkNsaWNrPy4oZXZlbnQpO1xuICAgICAgfVxuICAgICAgc2V0SXNPcGVuKCFpc09wZW4pO1xuICAgIH07XG4gICAgY29uc3QgaGFuZGxlUmVxdWVzdENsb3NlZCA9ICgpID0+IHtcbiAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgfTtcblxuICAgIGNvbnN0IHRleHRCdXR0b25EZWZhdWx0U2l6ZSA9ICdub3JtYWwnO1xuICAgIGNvbnN0IGljb25CdXR0b25EZWZhdWx0U2l6ZSA9ICdzbWFsbCc7XG5cbiAgICBsZXQgY2xpY2tUYXJnZXQ6IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICBzd2l0Y2ggKGJ1dHRvblR5cGUpIHtcbiAgICAgIGNhc2UgJ2ZpbGwnOlxuICAgICAgICBjbGlja1RhcmdldCA9IChcbiAgICAgICAgICA8RmlsbEJ1dHRvblxuICAgICAgICAgICAgcmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc09wZW59XG4gICAgICAgICAgICBpZD17YnV0dG9uSWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24tZmlsbC1idXR0b25cIlxuICAgICAgICAgICAgc2l6ZT17c2l6ZSB8fCB0ZXh0QnV0dG9uRGVmYXVsdFNpemV9XG4gICAgICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICAgICAgey4uLihidXR0b25TdHlsZVByb3BzID8/IHt9KX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8RG93bkFycm93IGlzT3Blbj17aXNPcGVufSBzaXplPXtpY29uU2l6ZSB8fCAxMn0gLz5cbiAgICAgICAgICA8L0ZpbGxCdXR0b24+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnc3Ryb2tlJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPFN0cm9rZUJ1dHRvblxuICAgICAgICAgICAgcmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc09wZW59XG4gICAgICAgICAgICBpZD17YnV0dG9uSWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24tc3Ryb2tlLWJ1dHRvblwiXG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IHRleHRCdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxEb3duQXJyb3cgaXNPcGVuPXtpc09wZW59IHNpemU9e2ljb25TaXplIHx8IDEyfSAvPlxuICAgICAgICAgIDwvU3Ryb2tlQnV0dG9uPlxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ3RleHQnOlxuICAgICAgICBjbGlja1RhcmdldCA9IChcbiAgICAgICAgICA8VGV4dEJ1dHRvblxuICAgICAgICAgICAgcmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBpZD17YnV0dG9uSWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24tc3Ryb2tlLWJ1dHRvblwiXG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IHRleHRCdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxEb3duQXJyb3cgaXNPcGVuPXtpc09wZW59IHNpemU9ezEyfSAvPlxuICAgICAgICAgIDwvVGV4dEJ1dHRvbj5cbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdrZWJhYic6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGFyaWEtaGFzcG9wdXA9XCJtZW51XCJcbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIGljb249eygpID0+IDxNaW5pS2ViYWJNZW51SWNvbiBzaXplPXtpY29uU2l6ZX0gLz59XG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IGljb25CdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICAgICAgICBkYXRhLXRlc3RpZD1cImRyb3Bkb3duLWtlYmFiLWJ1dHRvblwiXG4gICAgICAgICAgICB0aXA9XCJTaG93IG9wdGlvbnNcIlxuICAgICAgICAgICAgdGlwUHJvcHM9e3RpcFByb3BzfVxuICAgICAgICAgICAgey4uLihidXR0b25TdHlsZVByb3BzID8/IHt9KX1cbiAgICAgICAgICAvPlxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2hvcml6b250YWxLZWJhYic6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgICAgICBhcmlhLWxhYmVsPVwiT3B0aW9uc1wiXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGFyaWEtaGFzcG9wdXA9XCJtZW51XCJcbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIGljb249eygpID0+IDxIb3Jpem9udGFsS2ViYWJJY29uIHNpemU9e2ljb25TaXplfSAvPn1cbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgaWNvbkJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24taG9yaXpvbnRhbC1rZWJhYi1idXR0b25cIlxuICAgICAgICAgICAgdGlwUHJvcHM9e3RpcFByb3BzfVxuICAgICAgICAgICAgdGlwPVwiU2hvdyBtb3JlIG9wdGlvbnNcIlxuICAgICAgICAgICAgey4uLihidXR0b25TdHlsZVByb3BzID8/IHt9KX1cbiAgICAgICAgICAvPlxuICAgICAgICApO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICB7Y2xpY2tUYXJnZXR9XG4gICAgICAgIHtkcm9wZG93bkl0ZW1zLmxlbmd0aCAhPT0gMCAmJiAoXG4gICAgICAgICAgPFBvcG92ZXJcbiAgICAgICAgICAgIHBvcG92ZXJDb250YWluZXJSZWY9e3BvcG92ZXJDb250YWluZXJSZWZDYWxsYmFja31cbiAgICAgICAgICAgIHRhcmdldFJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgICAgICBvblJlcXVlc3RDbG9zZT17aGFuZGxlUmVxdWVzdENsb3NlZH1cbiAgICAgICAgICAgIGFsaWduPXthbGlnbn1cbiAgICAgICAgICAgIHZlcnRpY2FsT2Zmc2V0PXt2ZXJ0aWNhbE9mZnNldH1cbiAgICAgICAgICAgIGhvcml6b250YWxPZmZzZXQ9e2hvcml6b250YWxPZmZzZXR9XG4gICAgICAgICAgICBwb3NpdGlvbj17cG9zaXRpb259XG4gICAgICAgICAgICBvdXRsaW5lXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPERyb3Bkb3duTGlzdFxuICAgICAgICAgICAgICBkcm9wZG93bkl0ZW1zPXtkcm9wZG93bkl0ZW1zfVxuICAgICAgICAgICAgICBpc01lbnU9e2lzTWVudX1cbiAgICAgICAgICAgICAgbWVudUJ1dHRvbklkPXtidXR0b25JZH1cbiAgICAgICAgICAgICAgb25DbG9zZT17aGFuZGxlUmVxdWVzdENsb3NlZH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9Qb3BvdmVyPlxuICAgICAgICApfVxuICAgICAgPC8+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */");
+export const DropdownButton = /*#__PURE__*/forwardRef(({
+  align = 'left',
+  buttonType = 'fill',
+  children,
+  defaultPosition = 'below',
+  dropdownItems,
+  horizontalOffset,
+  iconSize,
+  isMenu,
+  onClick,
+  tipProps,
+  verticalOffset = 0,
+  size,
+  variant = 'primary',
+  ...buttonStyleProps
+}, ref) => {
+  const buttonId = useId();
+  const targetRef = useRef(null);
+  const {
+    position,
+    popoverContainerRefCallback
+  } = useDynamicPopoverPosition({
+    targetRef,
+    verticalOffset,
+    defaultPosition
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  useImperativeHandle(ref, () => ({
+    focus: () => targetRef.current?.focus()
+  }));
+  const handleClick = event => {
+    if (!isOpen) {
+      onClick?.(event);
+    }
+    setIsOpen(!isOpen);
+  };
+  const handleRequestClosed = () => {
+    setIsOpen(false);
+  };
+  const textButtonDefaultSize = 'normal';
+  const iconButtonDefaultSize = 'small';
+  let clickTarget;
+  switch (buttonType) {
+    case 'fill':
+      clickTarget = /*#__PURE__*/_jsxs(FillButton, {
+        ref: targetRef,
+        "aria-expanded": isOpen,
+        id: buttonId,
+        onClick: handleClick,
+        "data-testid": "dropdown-fill-button",
+        size: size || textButtonDefaultSize,
+        variant: variant,
+        ...(buttonStyleProps ?? {}),
+        children: [children, /*#__PURE__*/_jsx(DownArrow, {
+          isOpen: isOpen,
+          size: iconSize || 12
+        })]
+      });
+      break;
+    case 'stroke':
+      clickTarget = /*#__PURE__*/_jsxs(StrokeButton, {
+        ref: targetRef,
+        "aria-expanded": isOpen,
+        id: buttonId,
+        onClick: handleClick,
+        "data-testid": "dropdown-stroke-button",
+        size: size || textButtonDefaultSize,
+        variant: variant,
+        ...(buttonStyleProps ?? {}),
+        children: [children, /*#__PURE__*/_jsx(DownArrow, {
+          isOpen: isOpen,
+          size: iconSize || 12
+        })]
+      });
+      break;
+    case 'text':
+      clickTarget = /*#__PURE__*/_jsxs(TextButton, {
+        ref: targetRef,
+        id: buttonId,
+        onClick: handleClick,
+        "data-testid": "dropdown-stroke-button",
+        size: size || textButtonDefaultSize,
+        variant: variant,
+        ...(buttonStyleProps ?? {}),
+        children: [children, /*#__PURE__*/_jsx(DownArrow, {
+          isOpen: isOpen,
+          size: 12
+        })]
+      });
+      break;
+    case 'kebab':
+      clickTarget = /*#__PURE__*/_jsx(IconButton, {
+        ref: targetRef,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        id: buttonId,
+        icon: () => /*#__PURE__*/_jsx(MiniKebabMenuIcon, {
+          size: iconSize
+        }),
+        size: size || iconButtonDefaultSize,
+        variant: "secondary",
+        onClick: handleClick,
+        "data-testid": "dropdown-kebab-button",
+        tip: "Show options",
+        tipProps: tipProps,
+        ...(buttonStyleProps ?? {})
+      });
+      break;
+    case 'horizontalKebab':
+      clickTarget = /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": "Options",
+        ref: targetRef,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        id: buttonId,
+        icon: () => /*#__PURE__*/_jsx(HorizontalKebabIcon, {
+          size: iconSize
+        }),
+        size: size || iconButtonDefaultSize,
+        variant: "secondary",
+        onClick: handleClick,
+        "data-testid": "dropdown-horizontal-kebab-button",
+        tipProps: tipProps,
+        tip: "Show more options",
+        ...(buttonStyleProps ?? {})
+      });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [clickTarget, dropdownItems.length !== 0 && /*#__PURE__*/_jsx(Popover, {
+      popoverContainerRef: popoverContainerRefCallback,
+      targetRef: targetRef,
+      isOpen: isOpen,
+      onRequestClose: handleRequestClosed,
+      align: align,
+      verticalOffset: verticalOffset,
+      horizontalOffset: horizontalOffset,
+      position: position,
+      outline: true,
+      children: /*#__PURE__*/_jsx(DropdownList, {
+        dropdownItems: dropdownItems,
+        isMenu: isMenu,
+        menuButtonId: buttonId,
+        onClose: handleRequestClosed
+      })
+    })]
+  });
+});

package/dist/DropdownButton/useDynamicPopoverPosition.d.ts

@@ -0,0 +1,14 @@
+import { PopoverYPositionType } from '@codecademy/gamut';
+import { RefCallback, RefObject } from 'react';
+type Position = Required<PopoverYPositionType>['position'];
+export type UseDynamicPopoverPositionProps = {
+    targetRef: RefObject<HTMLElement>;
+    verticalOffset: number;
+    defaultPosition: Position;
+};
+export type UseDynamicPopoverPositionReturn = {
+    position: Position;
+    popoverContainerRefCallback: RefCallback<HTMLElement | null>;
+};
+export declare const useDynamicPopoverPosition: ({ targetRef, verticalOffset, defaultPosition, }: UseDynamicPopoverPositionProps) => UseDynamicPopoverPositionReturn;
+export {};

package/dist/DropdownButton/useDynamicPopoverPosition.js

@@ -0,0 +1,55 @@
+import { useCallback, useState } from 'react';
+import { useWindowScroll, useWindowSize } from 'react-use';
+
+// space between target and edge of window
+
+const getClearance = (targetEl, winHeight) => {
+  const {
+    top,
+    bottom
+  } = targetEl.getBoundingClientRect();
+  return {
+    above: top,
+    below: winHeight - bottom
+  };
+};
+const getClearanceNeeded = (popoverContainerEl, verticalOffset) => {
+  const {
+    height
+  } = popoverContainerEl.getBoundingClientRect();
+  return verticalOffset + height;
+};
+export const useDynamicPopoverPosition = ({
+  targetRef,
+  verticalOffset,
+  defaultPosition
+}) => {
+  const [popoverContainerEl, setPopoverContainerEl] = useState(null);
+
+  // called when the popover container is renderd or removed
+  const popoverContainerRefCallback = useCallback(instance => {
+    setPopoverContainerEl(instance);
+  }, []);
+  const {
+    height: winHeight
+  } = useWindowSize(); // re-calc on window resize
+  useWindowScroll(); // re-calc on scroll
+
+  if (targetRef?.current && popoverContainerEl) {
+    const clearance = getClearance(targetRef.current, winHeight);
+    const clearanceNeeded = getClearanceNeeded(popoverContainerEl, verticalOffset);
+    const clearedAbove = clearance.above >= clearanceNeeded;
+    const clearedBelow = clearance.below >= clearanceNeeded;
+    const verticallyCentered = clearance.above === clearance.below;
+    if (!verticallyCentered && (!clearedAbove || !clearedBelow)) {
+      return {
+        position: clearance.above > clearance.below ? 'above' : 'below',
+        popoverContainerRefCallback
+      };
+    }
+  }
+  return {
+    position: defaultPosition,
+    popoverContainerRefCallback
+  };
+};

package/dist/DropdownButton/useDynamicPopoverPosition.test.js

@@ -0,0 +1,85 @@
+import { act, renderHook } from '@testing-library/react';
+import { useDynamicPopoverPosition } from './useDynamicPopoverPosition';
+const WINDOW_HEIGHT = 1000;
+jest.mock('react-use', () => ({
+  useWindowSize: () => ({
+    height: WINDOW_HEIGHT
+  }),
+  useWindowScroll: () => ({
+    y: 0
+  })
+}));
+const testCases = [{
+  scenario: {
+    defaultPosition: 'below',
+    targetBox: {
+      top: 550,
+      bottom: 600,
+      height: 50
+    },
+    popoverContainerHeight: 200
+  },
+  expectation: {
+    position: 'below',
+    because: 'there is plenty of room for the popover beneath the target'
+  }
+}, {
+  scenario: {
+    defaultPosition: 'below',
+    targetBox: {
+      top: 850,
+      bottom: 900,
+      height: 50
+    },
+    popoverContainerHeight: 200
+  },
+  expectation: {
+    position: 'above',
+    because: 'the target is near the bottom of the window'
+  }
+}, {
+  scenario: {
+    defaultPosition: 'below',
+    targetBox: {
+      top: 550,
+      bottom: 600,
+      height: 50
+    },
+    popoverContainerHeight: 500
+  },
+  expectation: {
+    position: 'above',
+    because: 'the popover is too tall to fit beneath the target'
+  }
+}];
+describe('useDynamicPopoverPosition', () => {
+  test.each(testCases)(`for default position: $scenario.defaultPosition, with target: $scenario.targetBox, popover container height: $scenario.popoverContainerHeight, and window height: ${WINDOW_HEIGHT},
+    position should be: "$expectation.position" because $expectation.because`, async ({
+    scenario,
+    expectation
+  }) => {
+    const {
+      defaultPosition,
+      targetBox,
+      popoverContainerHeight
+    } = scenario;
+    const targetRef = {
+      current: {
+        getBoundingClientRect: () => targetBox
+      }
+    };
+    const {
+      result
+    } = renderHook(() => useDynamicPopoverPosition({
+      targetRef,
+      verticalOffset: 0,
+      defaultPosition
+    }));
+    await act(() => result.current.popoverContainerRefCallback({
+      getBoundingClientRect: () => ({
+        height: popoverContainerHeight
+      })
+    }));
+    expect(result.current.position).toEqual(expectation.position);
+  });
+});

package/dist/EmptySection/index.d.ts

@@ -0,0 +1,28 @@
+import { ButtonProps } from '@codecademy/gamut';
+import { IllustrationProps } from '@codecademy/gamut-illustrations';
+import * as React from 'react';
+import { DropdownButtonProps } from '..';
+export type EmptySectionProps = {
+    /**
+     * Paragraph text that displays beneath the heading text
+     */
+    bodyText?: string;
+    /**
+     * Button or dropdown button with an action for the user to take
+     */
+    children?: React.ReactElement<ButtonProps | DropdownButtonProps>;
+    /**
+     * The larger heading text that appears over the body text
+     */
+    headingText: string;
+    illustration: React.ComponentType<IllustrationProps>;
+    /**
+     * Whether the illustration appears to the left or right of the rest of the section's content
+     */
+    illustrationPosition?: 'left' | 'right';
+    /**
+     * Whether the pattern background stretches to the end of the left or right of the viewport
+     */
+    stretchDirection: 'left' | 'right' | 'none';
+};
+export declare const EmptySection: React.FC<EmptySectionProps>;

package/dist/EmptySection/index.js

@@ -0,0 +1,183 @@
+import _styled from "@emotion/styled/base";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { FlexBox, Text } from '@codecademy/gamut';
+import { DotLoose } from '@codecademy/gamut-patterns';
+import { pxRem, styledOptions, variant } from '@codecademy/gamut-styles';
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EmptyContainer = /*#__PURE__*/_styled(FlexBox, {
+  target: "eysqnl62",
+  label: "EmptyContainer"
+})(variant({
+  prop: 'stretchDirection',
+  defaultVariant: 'left',
+  base: {
+    justifySelf: 'center',
+    position: 'relative',
+    px: 32,
+    py: {
+      _: 64,
+      lg: 96
+    },
+    width: 1
+  },
+  variants: {
+    left: {
+      pl: {
+        sm: 0
+      },
+      pr: {
+        sm: 64,
+        lg: 96
+      }
+    },
+    right: {
+      pr: {
+        sm: 0
+      },
+      pl: {
+        sm: 64,
+        lg: 96
+      }
+    },
+    none: {}
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9FbXB0eVNlY3Rpb24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDdUIiLCJmaWxlIjoiLi4vLi4vc3JjL0VtcHR5U2VjdGlvbi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCdXR0b25Qcm9wcywgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IElsbHVzdHJhdGlvblByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWxsdXN0cmF0aW9ucyc7XG5pbXBvcnQgeyBEb3RMb29zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IHB4UmVtLCBzdHlsZWRPcHRpb25zLCB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IERyb3Bkb3duQnV0dG9uUHJvcHMgfSBmcm9tICcuLic7XG5cbmV4cG9ydCB0eXBlIEVtcHR5U2VjdGlvblByb3BzID0ge1xuICAvKipcbiAgICogUGFyYWdyYXBoIHRleHQgdGhhdCBkaXNwbGF5cyBiZW5lYXRoIHRoZSBoZWFkaW5nIHRleHRcbiAgICovXG4gIGJvZHlUZXh0Pzogc3RyaW5nO1xuICAvKipcbiAgICogQnV0dG9uIG9yIGRyb3Bkb3duIGJ1dHRvbiB3aXRoIGFuIGFjdGlvbiBmb3IgdGhlIHVzZXIgdG8gdGFrZVxuICAgKi9cbiAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdEVsZW1lbnQ8QnV0dG9uUHJvcHMgfCBEcm9wZG93bkJ1dHRvblByb3BzPjtcbiAgLyoqXG4gICAqIFRoZSBsYXJnZXIgaGVhZGluZyB0ZXh0IHRoYXQgYXBwZWFycyBvdmVyIHRoZSBib2R5IHRleHRcbiAgICovXG4gIGhlYWRpbmdUZXh0OiBzdHJpbmc7XG4gIGlsbHVzdHJhdGlvbjogUmVhY3QuQ29tcG9uZW50VHlwZTxJbGx1c3RyYXRpb25Qcm9wcz47XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBpbGx1c3RyYXRpb24gYXBwZWFycyB0byB0aGUgbGVmdCBvciByaWdodCBvZiB0aGUgcmVzdCBvZiB0aGUgc2VjdGlvbidzIGNvbnRlbnRcbiAgICovXG4gIGlsbHVzdHJhdGlvblBvc2l0aW9uPzogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIHBhdHRlcm4gYmFja2dyb3VuZCBzdHJldGNoZXMgdG8gdGhlIGVuZCBvZiB0aGUgbGVmdCBvciByaWdodCBvZiB0aGUgdmlld3BvcnRcbiAgICovXG4gIHN0cmV0Y2hEaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgfCAnbm9uZSc7XG59O1xuXG5jb25zdCBFbXB0eUNvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KShcbiAgdmFyaWFudCh7XG4gICAgcHJvcDogJ3N0cmV0Y2hEaXJlY3Rpb24nLFxuICAgIGRlZmF1bHRWYXJpYW50OiAnbGVmdCcsXG4gICAgYmFzZToge1xuICAgICAganVzdGlmeVNlbGY6ICdjZW50ZXInLFxuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICBweDogMzIsXG4gICAgICBweTogeyBfOiA2NCwgbGc6IDk2IH0sXG4gICAgICB3aWR0aDogMSxcbiAgICB9LFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBsZWZ0OiB7XG4gICAgICAgIHBsOiB7IHNtOiAwIH0sXG4gICAgICAgIHByOiB7IHNtOiA2NCwgbGc6IDk2IH0sXG4gICAgICB9LFxuICAgICAgcmlnaHQ6IHtcbiAgICAgICAgcHI6IHsgc206IDAgfSxcbiAgICAgICAgcGw6IHsgc206IDY0LCBsZzogOTYgfSxcbiAgICAgIH0sXG4gICAgICBub25lOiB7fSxcbiAgICB9LFxuICB9KVxuKTtcblxuY29uc3QgRG90cyA9IHN0eWxlZChEb3RMb29zZSkoXG4gIHZhcmlhbnQoe1xuICAgIHByb3A6ICdzdHJldGNoRGlyZWN0aW9uJyxcbiAgICBkZWZhdWx0VmFyaWFudDogJ2xlZnQnLFxuICAgIGJhc2U6IHtcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgdG9wOiAwLFxuICAgICAgYm90dG9tOiAwLFxuICAgICAgbGVmdDogLTE2LFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIGxlZnQ6IHtcbiAgICAgICAgbGVmdDoge1xuICAgICAgICAgIHhzOiAtMzIsXG4gICAgICAgICAgc206IC02NCxcbiAgICAgICAgICBsZzogLTk2LFxuICAgICAgICAgIHhsOiAnY2FsYygoMTI0OHB4IC0gMTAwdncpIC8gMiknLFxuICAgICAgICB9LFxuICAgICAgICB3aWR0aDoge1xuICAgICAgICAgIF86ICcxMDB2dycsXG4gICAgICAgICAgeHM6ICdjYWxjKDEwMHZ3IC0gMzJweCknLFxuICAgICAgICAgIHNtOiAnY2FsYygxMDB2dyAtIDY0cHgpJyxcbiAgICAgICAgICBsZzogJ2NhbGMoMTAwdncgLSA5NnB4KScsXG4gICAgICAgICAgeGw6ICdjYWxjKDEyNDhweCArICgoMTAwdncgLSAxMjQ4cHgpIC8gMikpJyxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgICByaWdodDoge1xuICAgICAgICBsZWZ0OiB7IHhzOiAwIH0sXG4gICAgICAgIHdpZHRoOiB7XG4gICAgICAgICAgXzogJzEwMHZ3JyxcbiAgICAgICAgICB4czogJ2NhbGMoMTAwdncgLSAzMnB4KScsXG4gICAgICAgICAgc206ICdjYWxjKDEwMHZ3IC0gNjRweCknLFxuICAgICAgICAgIGxnOiAnY2FsYygxMDB2dyAtIDk2cHgpJyxcbiAgICAgICAgICB4bDogJ2NhbGMoMTI0OHB4ICsgKCgxMDB2dyAtIDEyNDhweCkgLyAyKSknLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICAgIG5vbmU6IHtcbiAgICAgICAgbGVmdDogMCxcbiAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmNvbnN0IGlsbHVzdHJhdGlvblBvc2l0aW9uVmFyaWFudHMgPSB2YXJpYW50KHtcbiAgcHJvcDogJ2lsbHVzdHJhdGlvblBvc2l0aW9uJyxcbiAgZGVmYXVsdFZhcmlhbnQ6ICdyaWdodCcsXG4gIGJhc2U6IHtcbiAgICBteDogeyBfOiAnYXV0bycsIHNtOiAwIH0sXG4gICAgbWI6IHsgXzogMzIsIHNtOiAwIH0sXG4gIH0sXG4gIHZhcmlhbnRzOiB7XG4gICAgbGVmdDoge1xuICAgICAgbXI6IHsgc206IDQ4IH0sXG4gICAgfSxcbiAgICByaWdodDoge1xuICAgICAgbWw6IHsgc206IDQ4IH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG50eXBlIElsbHVzdHJhdGlvbkNvbnRhaW5lclByb3BzID0gU3R5bGVQcm9wczxcbiAgdHlwZW9mIGlsbHVzdHJhdGlvblBvc2l0aW9uVmFyaWFudHNcbj47XG5cbmNvbnN0IElsbHVzdHJhdGlvbkNvbnRhaW5lciA9IHN0eWxlZChcbiAgJ2RpdicsXG4gIHN0eWxlZE9wdGlvbnNcbik8SWxsdXN0cmF0aW9uQ29udGFpbmVyUHJvcHM+KGlsbHVzdHJhdGlvblBvc2l0aW9uVmFyaWFudHMpO1xuXG5leHBvcnQgY29uc3QgRW1wdHlTZWN0aW9uOiBSZWFjdC5GQzxFbXB0eVNlY3Rpb25Qcm9wcz4gPSAoe1xuICBib2R5VGV4dCxcbiAgY2hpbGRyZW4sXG4gIGhlYWRpbmdUZXh0LFxuICBpbGx1c3RyYXRpb246IElsbHVzdHJhdGlvbixcbiAgc3RyZXRjaERpcmVjdGlvbixcbiAgaWxsdXN0cmF0aW9uUG9zaXRpb24gPSBzdHJldGNoRGlyZWN0aW9uID09PSAncmlnaHQnID8gJ2xlZnQnIDogJ3JpZ2h0Jyxcbn0pID0+IHtcbiAgY29uc3QgZmxleERpcmVjdGlvbiA9XG4gICAgaWxsdXN0cmF0aW9uUG9zaXRpb24gPT09ICdyaWdodCcgPyAncm93LXJldmVyc2UnIDogJ3Jvdyc7XG5cbiAgcmV0dXJuIChcbiAgICA8RW1wdHlDb250YWluZXIgc3RyZXRjaERpcmVjdGlvbj17c3RyZXRjaERpcmVjdGlvbn0+XG4gICAgICA8RG90cyBzdHJldGNoRGlyZWN0aW9uPXtzdHJldGNoRGlyZWN0aW9ufSAvPlxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgbWF4V2lkdGg9XCI4MjJweFwiXG4gICAgICAgIGZsZXhCYXNpcz1cIjEwMCVcIlxuICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgYmc9XCJiYWNrZ3JvdW5kLWN1cnJlbnRcIlxuICAgICAgICBweT17NDh9XG4gICAgICAgIHB4PXt7IF86IDE2LCBzbTogNDgsIG1kOiA2NCB9fVxuICAgICAgICB6SW5kZXg9ezF9XG4gICAgICAgIGZsZXhEaXJlY3Rpb249e3sgXzogJ2NvbHVtbicsIHNtOiBmbGV4RGlyZWN0aW9uIH19XG4gICAgICAgIGp1c3RpZnlDb250ZW50PXt7IF86ICdzcGFjZS1hcm91bmQnLCBtZDogJ3NwYWNlLWJldHdlZW4nIH19XG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICB0ZXh0QWxpZ249e3sgXzogJ2NlbnRlcicsIHNtOiAnc3RhcnQnIH19XG4gICAgICA+XG4gICAgICAgIDxJbGx1c3RyYXRpb25Db250YWluZXIgaWxsdXN0cmF0aW9uUG9zaXRpb249e2lsbHVzdHJhdGlvblBvc2l0aW9ufT5cbiAgICAgICAgICA8SWxsdXN0cmF0aW9uIHdpZHRoPXtweFJlbSgxMDApfSAvPlxuICAgICAgICA8L0lsbHVzdHJhdGlvbkNvbnRhaW5lcj5cbiAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBhbGlnbkl0ZW1zPXt7IF86ICdjZW50ZXInLCBzbTogJ3N0YXJ0JyB9fVxuICAgICAgICA+XG4gICAgICAgICAgPFRleHQgYXM9XCJoMlwiIGZvbnRTaXplPXsyMn0gbWI9ezh9PlxuICAgICAgICAgICAge2hlYWRpbmdUZXh0fVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICB7Ym9keVRleHQgJiYgPFRleHQgbWI9ezMyfT57Ym9keVRleHR9PC9UZXh0Pn1cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvRmxleEJveD5cbiAgICAgIDwvRmxleEJveD5cbiAgICA8L0VtcHR5Q29udGFpbmVyPlxuICApO1xufTtcbiJdfQ== */");
+const Dots = /*#__PURE__*/_styled(DotLoose, {
+  target: "eysqnl61",
+  label: "Dots"
+})(variant({
+  prop: 'stretchDirection',
+  defaultVariant: 'left',
+  base: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: -16
+  },
+  variants: {
+    left: {
+      left: {
+        xs: -32,
+        sm: -64,
+        lg: -96,
+        xl: 'calc((1248px - 100vw) / 2)'
+      },
+      width: {
+        _: '100vw',
+        xs: 'calc(100vw - 32px)',
+        sm: 'calc(100vw - 64px)',
+        lg: 'calc(100vw - 96px)',
+        xl: 'calc(1248px + ((100vw - 1248px) / 2))'
+      }
+    },
+    right: {
+      left: {
+        xs: 0
+      },
+      width: {
+        _: '100vw',
+        xs: 'calc(100vw - 32px)',
+        sm: 'calc(100vw - 64px)',
+        lg: 'calc(100vw - 96px)',
+        xl: 'calc(1248px + ((100vw - 1248px) / 2))'
+      }
+    },
+    none: {
+      left: 0,
+      width: '100%'
+    }
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9FbXB0eVNlY3Rpb24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJEYSIsImZpbGUiOiIuLi8uLi9zcmMvRW1wdHlTZWN0aW9uL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJ1dHRvblByb3BzLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgSWxsdXN0cmF0aW9uUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pbGx1c3RyYXRpb25zJztcbmltcG9ydCB7IERvdExvb3NlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgcHhSZW0sIHN0eWxlZE9wdGlvbnMsIHZhcmlhbnQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgRHJvcGRvd25CdXR0b25Qcm9wcyB9IGZyb20gJy4uJztcblxuZXhwb3J0IHR5cGUgRW1wdHlTZWN0aW9uUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBQYXJhZ3JhcGggdGV4dCB0aGF0IGRpc3BsYXlzIGJlbmVhdGggdGhlIGhlYWRpbmcgdGV4dFxuICAgKi9cbiAgYm9keVRleHQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBCdXR0b24gb3IgZHJvcGRvd24gYnV0dG9uIHdpdGggYW4gYWN0aW9uIGZvciB0aGUgdXNlciB0byB0YWtlXG4gICAqL1xuICBjaGlsZHJlbj86IFJlYWN0LlJlYWN0RWxlbWVudDxCdXR0b25Qcm9wcyB8IERyb3Bkb3duQnV0dG9uUHJvcHM+O1xuICAvKipcbiAgICogVGhlIGxhcmdlciBoZWFkaW5nIHRleHQgdGhhdCBhcHBlYXJzIG92ZXIgdGhlIGJvZHkgdGV4dFxuICAgKi9cbiAgaGVhZGluZ1RleHQ6IHN0cmluZztcbiAgaWxsdXN0cmF0aW9uOiBSZWFjdC5Db21wb25lbnRUeXBlPElsbHVzdHJhdGlvblByb3BzPjtcbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIGlsbHVzdHJhdGlvbiBhcHBlYXJzIHRvIHRoZSBsZWZ0IG9yIHJpZ2h0IG9mIHRoZSByZXN0IG9mIHRoZSBzZWN0aW9uJ3MgY29udGVudFxuICAgKi9cbiAgaWxsdXN0cmF0aW9uUG9zaXRpb24/OiAnbGVmdCcgfCAncmlnaHQnO1xuICAvKipcbiAgICogV2hldGhlciB0aGUgcGF0dGVybiBiYWNrZ3JvdW5kIHN0cmV0Y2hlcyB0byB0aGUgZW5kIG9mIHRoZSBsZWZ0IG9yIHJpZ2h0IG9mIHRoZSB2aWV3cG9ydFxuICAgKi9cbiAgc3RyZXRjaERpcmVjdGlvbjogJ2xlZnQnIHwgJ3JpZ2h0JyB8ICdub25lJztcbn07XG5cbmNvbnN0IEVtcHR5Q29udGFpbmVyID0gc3R5bGVkKEZsZXhCb3gpKFxuICB2YXJpYW50KHtcbiAgICBwcm9wOiAnc3RyZXRjaERpcmVjdGlvbicsXG4gICAgZGVmYXVsdFZhcmlhbnQ6ICdsZWZ0JyxcbiAgICBiYXNlOiB7XG4gICAgICBqdXN0aWZ5U2VsZjogJ2NlbnRlcicsXG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgIHB4OiAzMixcbiAgICAgIHB5OiB7IF86IDY0LCBsZzogOTYgfSxcbiAgICAgIHdpZHRoOiAxLFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIGxlZnQ6IHtcbiAgICAgICAgcGw6IHsgc206IDAgfSxcbiAgICAgICAgcHI6IHsgc206IDY0LCBsZzogOTYgfSxcbiAgICAgIH0sXG4gICAgICByaWdodDoge1xuICAgICAgICBwcjogeyBzbTogMCB9LFxuICAgICAgICBwbDogeyBzbTogNjQsIGxnOiA5NiB9LFxuICAgICAgfSxcbiAgICAgIG5vbmU6IHt9LFxuICAgIH0sXG4gIH0pXG4pO1xuXG5jb25zdCBEb3RzID0gc3R5bGVkKERvdExvb3NlKShcbiAgdmFyaWFudCh7XG4gICAgcHJvcDogJ3N0cmV0Y2hEaXJlY3Rpb24nLFxuICAgIGRlZmF1bHRWYXJpYW50OiAnbGVmdCcsXG4gICAgYmFzZToge1xuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICB0b3A6IDAsXG4gICAgICBib3R0b206IDAsXG4gICAgICBsZWZ0OiAtMTYsXG4gICAgfSxcbiAgICB2YXJpYW50czoge1xuICAgICAgbGVmdDoge1xuICAgICAgICBsZWZ0OiB7XG4gICAgICAgICAgeHM6IC0zMixcbiAgICAgICAgICBzbTogLTY0LFxuICAgICAgICAgIGxnOiAtOTYsXG4gICAgICAgICAgeGw6ICdjYWxjKCgxMjQ4cHggLSAxMDB2dykgLyAyKScsXG4gICAgICAgIH0sXG4gICAgICAgIHdpZHRoOiB7XG4gICAgICAgICAgXzogJzEwMHZ3JyxcbiAgICAgICAgICB4czogJ2NhbGMoMTAwdncgLSAzMnB4KScsXG4gICAgICAgICAgc206ICdjYWxjKDEwMHZ3IC0gNjRweCknLFxuICAgICAgICAgIGxnOiAnY2FsYygxMDB2dyAtIDk2cHgpJyxcbiAgICAgICAgICB4bDogJ2NhbGMoMTI0OHB4ICsgKCgxMDB2dyAtIDEyNDhweCkgLyAyKSknLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICAgIHJpZ2h0OiB7XG4gICAgICAgIGxlZnQ6IHsgeHM6IDAgfSxcbiAgICAgICAgd2lkdGg6IHtcbiAgICAgICAgICBfOiAnMTAwdncnLFxuICAgICAgICAgIHhzOiAnY2FsYygxMDB2dyAtIDMycHgpJyxcbiAgICAgICAgICBzbTogJ2NhbGMoMTAwdncgLSA2NHB4KScsXG4gICAgICAgICAgbGc6ICdjYWxjKDEwMHZ3IC0gOTZweCknLFxuICAgICAgICAgIHhsOiAnY2FsYygxMjQ4cHggKyAoKDEwMHZ3IC0gMTI0OHB4KSAvIDIpKScsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgbm9uZToge1xuICAgICAgICBsZWZ0OiAwLFxuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcblxuY29uc3QgaWxsdXN0cmF0aW9uUG9zaXRpb25WYXJpYW50cyA9IHZhcmlhbnQoe1xuICBwcm9wOiAnaWxsdXN0cmF0aW9uUG9zaXRpb24nLFxuICBkZWZhdWx0VmFyaWFudDogJ3JpZ2h0JyxcbiAgYmFzZToge1xuICAgIG14OiB7IF86ICdhdXRvJywgc206IDAgfSxcbiAgICBtYjogeyBfOiAzMiwgc206IDAgfSxcbiAgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBsZWZ0OiB7XG4gICAgICBtcjogeyBzbTogNDggfSxcbiAgICB9LFxuICAgIHJpZ2h0OiB7XG4gICAgICBtbDogeyBzbTogNDggfSxcbiAgICB9LFxuICB9LFxufSk7XG5cbnR5cGUgSWxsdXN0cmF0aW9uQ29udGFpbmVyUHJvcHMgPSBTdHlsZVByb3BzPFxuICB0eXBlb2YgaWxsdXN0cmF0aW9uUG9zaXRpb25WYXJpYW50c1xuPjtcblxuY29uc3QgSWxsdXN0cmF0aW9uQ29udGFpbmVyID0gc3R5bGVkKFxuICAnZGl2JyxcbiAgc3R5bGVkT3B0aW9uc1xuKTxJbGx1c3RyYXRpb25Db250YWluZXJQcm9wcz4oaWxsdXN0cmF0aW9uUG9zaXRpb25WYXJpYW50cyk7XG5cbmV4cG9ydCBjb25zdCBFbXB0eVNlY3Rpb246IFJlYWN0LkZDPEVtcHR5U2VjdGlvblByb3BzPiA9ICh7XG4gIGJvZHlUZXh0LFxuICBjaGlsZHJlbixcbiAgaGVhZGluZ1RleHQsXG4gIGlsbHVzdHJhdGlvbjogSWxsdXN0cmF0aW9uLFxuICBzdHJldGNoRGlyZWN0aW9uLFxuICBpbGx1c3RyYXRpb25Qb3NpdGlvbiA9IHN0cmV0Y2hEaXJlY3Rpb24gPT09ICdyaWdodCcgPyAnbGVmdCcgOiAncmlnaHQnLFxufSkgPT4ge1xuICBjb25zdCBmbGV4RGlyZWN0aW9uID1cbiAgICBpbGx1c3RyYXRpb25Qb3NpdGlvbiA9PT0gJ3JpZ2h0JyA/ICdyb3ctcmV2ZXJzZScgOiAncm93JztcblxuICByZXR1cm4gKFxuICAgIDxFbXB0eUNvbnRhaW5lciBzdHJldGNoRGlyZWN0aW9uPXtzdHJldGNoRGlyZWN0aW9ufT5cbiAgICAgIDxEb3RzIHN0cmV0Y2hEaXJlY3Rpb249e3N0cmV0Y2hEaXJlY3Rpb259IC8+XG4gICAgICA8RmxleEJveFxuICAgICAgICBtYXhXaWR0aD1cIjgyMnB4XCJcbiAgICAgICAgZmxleEJhc2lzPVwiMTAwJVwiXG4gICAgICAgIHBvc2l0aW9uPVwicmVsYXRpdmVcIlxuICAgICAgICBiZz1cImJhY2tncm91bmQtY3VycmVudFwiXG4gICAgICAgIHB5PXs0OH1cbiAgICAgICAgcHg9e3sgXzogMTYsIHNtOiA0OCwgbWQ6IDY0IH19XG4gICAgICAgIHpJbmRleD17MX1cbiAgICAgICAgZmxleERpcmVjdGlvbj17eyBfOiAnY29sdW1uJywgc206IGZsZXhEaXJlY3Rpb24gfX1cbiAgICAgICAganVzdGlmeUNvbnRlbnQ9e3sgXzogJ3NwYWNlLWFyb3VuZCcsIG1kOiAnc3BhY2UtYmV0d2VlbicgfX1cbiAgICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICAgIHRleHRBbGlnbj17eyBfOiAnY2VudGVyJywgc206ICdzdGFydCcgfX1cbiAgICAgID5cbiAgICAgICAgPElsbHVzdHJhdGlvbkNvbnRhaW5lciBpbGx1c3RyYXRpb25Qb3NpdGlvbj17aWxsdXN0cmF0aW9uUG9zaXRpb259PlxuICAgICAgICAgIDxJbGx1c3RyYXRpb24gd2lkdGg9e3B4UmVtKDEwMCl9IC8+XG4gICAgICAgIDwvSWxsdXN0cmF0aW9uQ29udGFpbmVyPlxuICAgICAgICA8RmxleEJveFxuICAgICAgICAgIGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIlxuICAgICAgICAgIGFsaWduSXRlbXM9e3sgXzogJ2NlbnRlcicsIHNtOiAnc3RhcnQnIH19XG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dCBhcz1cImgyXCIgZm9udFNpemU9ezIyfSBtYj17OH0+XG4gICAgICAgICAgICB7aGVhZGluZ1RleHR9XG4gICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIHtib2R5VGV4dCAmJiA8VGV4dCBtYj17MzJ9Pntib2R5VGV4dH08L1RleHQ+fVxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgPC9GbGV4Qm94PlxuICAgIDwvRW1wdHlDb250YWluZXI+XG4gICk7XG59O1xuIl19 */");
+const illustrationPositionVariants = variant({
+  prop: 'illustrationPosition',
+  defaultVariant: 'right',
+  base: {
+    mx: {
+      _: 'auto',
+      sm: 0
+    },
+    mb: {
+      _: 32,
+      sm: 0
+    }
+  },
+  variants: {
+    left: {
+      mr: {
+        sm: 48
+      }
+    },
+    right: {
+      ml: {
+        sm: 48
+      }
+    }
+  }
+});
+const IllustrationContainer = /*#__PURE__*/_styled('div', _extends({}, {
+  target: "eysqnl60",
+  label: "IllustrationContainer"
+}, styledOptions))(illustrationPositionVariants, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9FbXB0eVNlY3Rpb24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRIOEIiLCJmaWxlIjoiLi4vLi4vc3JjL0VtcHR5U2VjdGlvbi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCdXR0b25Qcm9wcywgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IElsbHVzdHJhdGlvblByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWxsdXN0cmF0aW9ucyc7XG5pbXBvcnQgeyBEb3RMb29zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IHB4UmVtLCBzdHlsZWRPcHRpb25zLCB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IERyb3Bkb3duQnV0dG9uUHJvcHMgfSBmcm9tICcuLic7XG5cbmV4cG9ydCB0eXBlIEVtcHR5U2VjdGlvblByb3BzID0ge1xuICAvKipcbiAgICogUGFyYWdyYXBoIHRleHQgdGhhdCBkaXNwbGF5cyBiZW5lYXRoIHRoZSBoZWFkaW5nIHRleHRcbiAgICovXG4gIGJvZHlUZXh0Pzogc3RyaW5nO1xuICAvKipcbiAgICogQnV0dG9uIG9yIGRyb3Bkb3duIGJ1dHRvbiB3aXRoIGFuIGFjdGlvbiBmb3IgdGhlIHVzZXIgdG8gdGFrZVxuICAgKi9cbiAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdEVsZW1lbnQ8QnV0dG9uUHJvcHMgfCBEcm9wZG93bkJ1dHRvblByb3BzPjtcbiAgLyoqXG4gICAqIFRoZSBsYXJnZXIgaGVhZGluZyB0ZXh0IHRoYXQgYXBwZWFycyBvdmVyIHRoZSBib2R5IHRleHRcbiAgICovXG4gIGhlYWRpbmdUZXh0OiBzdHJpbmc7XG4gIGlsbHVzdHJhdGlvbjogUmVhY3QuQ29tcG9uZW50VHlwZTxJbGx1c3RyYXRpb25Qcm9wcz47XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBpbGx1c3RyYXRpb24gYXBwZWFycyB0byB0aGUgbGVmdCBvciByaWdodCBvZiB0aGUgcmVzdCBvZiB0aGUgc2VjdGlvbidzIGNvbnRlbnRcbiAgICovXG4gIGlsbHVzdHJhdGlvblBvc2l0aW9uPzogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIHBhdHRlcm4gYmFja2dyb3VuZCBzdHJldGNoZXMgdG8gdGhlIGVuZCBvZiB0aGUgbGVmdCBvciByaWdodCBvZiB0aGUgdmlld3BvcnRcbiAgICovXG4gIHN0cmV0Y2hEaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgfCAnbm9uZSc7XG59O1xuXG5jb25zdCBFbXB0eUNvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KShcbiAgdmFyaWFudCh7XG4gICAgcHJvcDogJ3N0cmV0Y2hEaXJlY3Rpb24nLFxuICAgIGRlZmF1bHRWYXJpYW50OiAnbGVmdCcsXG4gICAgYmFzZToge1xuICAgICAganVzdGlmeVNlbGY6ICdjZW50ZXInLFxuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICBweDogMzIsXG4gICAgICBweTogeyBfOiA2NCwgbGc6IDk2IH0sXG4gICAgICB3aWR0aDogMSxcbiAgICB9LFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBsZWZ0OiB7XG4gICAgICAgIHBsOiB7IHNtOiAwIH0sXG4gICAgICAgIHByOiB7IHNtOiA2NCwgbGc6IDk2IH0sXG4gICAgICB9LFxuICAgICAgcmlnaHQ6IHtcbiAgICAgICAgcHI6IHsgc206IDAgfSxcbiAgICAgICAgcGw6IHsgc206IDY0LCBsZzogOTYgfSxcbiAgICAgIH0sXG4gICAgICBub25lOiB7fSxcbiAgICB9LFxuICB9KVxuKTtcblxuY29uc3QgRG90cyA9IHN0eWxlZChEb3RMb29zZSkoXG4gIHZhcmlhbnQoe1xuICAgIHByb3A6ICdzdHJldGNoRGlyZWN0aW9uJyxcbiAgICBkZWZhdWx0VmFyaWFudDogJ2xlZnQnLFxuICAgIGJhc2U6IHtcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgdG9wOiAwLFxuICAgICAgYm90dG9tOiAwLFxuICAgICAgbGVmdDogLTE2LFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIGxlZnQ6IHtcbiAgICAgICAgbGVmdDoge1xuICAgICAgICAgIHhzOiAtMzIsXG4gICAgICAgICAgc206IC02NCxcbiAgICAgICAgICBsZzogLTk2LFxuICAgICAgICAgIHhsOiAnY2FsYygoMTI0OHB4IC0gMTAwdncpIC8gMiknLFxuICAgICAgICB9LFxuICAgICAgICB3aWR0aDoge1xuICAgICAgICAgIF86ICcxMDB2dycsXG4gICAgICAgICAgeHM6ICdjYWxjKDEwMHZ3IC0gMzJweCknLFxuICAgICAgICAgIHNtOiAnY2FsYygxMDB2dyAtIDY0cHgpJyxcbiAgICAgICAgICBsZzogJ2NhbGMoMTAwdncgLSA5NnB4KScsXG4gICAgICAgICAgeGw6ICdjYWxjKDEyNDhweCArICgoMTAwdncgLSAxMjQ4cHgpIC8gMikpJyxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgICByaWdodDoge1xuICAgICAgICBsZWZ0OiB7IHhzOiAwIH0sXG4gICAgICAgIHdpZHRoOiB7XG4gICAgICAgICAgXzogJzEwMHZ3JyxcbiAgICAgICAgICB4czogJ2NhbGMoMTAwdncgLSAzMnB4KScsXG4gICAgICAgICAgc206ICdjYWxjKDEwMHZ3IC0gNjRweCknLFxuICAgICAgICAgIGxnOiAnY2FsYygxMDB2dyAtIDk2cHgpJyxcbiAgICAgICAgICB4bDogJ2NhbGMoMTI0OHB4ICsgKCgxMDB2dyAtIDEyNDhweCkgLyAyKSknLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICAgIG5vbmU6IHtcbiAgICAgICAgbGVmdDogMCxcbiAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmNvbnN0IGlsbHVzdHJhdGlvblBvc2l0aW9uVmFyaWFudHMgPSB2YXJpYW50KHtcbiAgcHJvcDogJ2lsbHVzdHJhdGlvblBvc2l0aW9uJyxcbiAgZGVmYXVsdFZhcmlhbnQ6ICdyaWdodCcsXG4gIGJhc2U6IHtcbiAgICBteDogeyBfOiAnYXV0bycsIHNtOiAwIH0sXG4gICAgbWI6IHsgXzogMzIsIHNtOiAwIH0sXG4gIH0sXG4gIHZhcmlhbnRzOiB7XG4gICAgbGVmdDoge1xuICAgICAgbXI6IHsgc206IDQ4IH0sXG4gICAgfSxcbiAgICByaWdodDoge1xuICAgICAgbWw6IHsgc206IDQ4IH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG50eXBlIElsbHVzdHJhdGlvbkNvbnRhaW5lclByb3BzID0gU3R5bGVQcm9wczxcbiAgdHlwZW9mIGlsbHVzdHJhdGlvblBvc2l0aW9uVmFyaWFudHNcbj47XG5cbmNvbnN0IElsbHVzdHJhdGlvbkNvbnRhaW5lciA9IHN0eWxlZChcbiAgJ2RpdicsXG4gIHN0eWxlZE9wdGlvbnNcbik8SWxsdXN0cmF0aW9uQ29udGFpbmVyUHJvcHM+KGlsbHVzdHJhdGlvblBvc2l0aW9uVmFyaWFudHMpO1xuXG5leHBvcnQgY29uc3QgRW1wdHlTZWN0aW9uOiBSZWFjdC5GQzxFbXB0eVNlY3Rpb25Qcm9wcz4gPSAoe1xuICBib2R5VGV4dCxcbiAgY2hpbGRyZW4sXG4gIGhlYWRpbmdUZXh0LFxuICBpbGx1c3RyYXRpb246IElsbHVzdHJhdGlvbixcbiAgc3RyZXRjaERpcmVjdGlvbixcbiAgaWxsdXN0cmF0aW9uUG9zaXRpb24gPSBzdHJldGNoRGlyZWN0aW9uID09PSAncmlnaHQnID8gJ2xlZnQnIDogJ3JpZ2h0Jyxcbn0pID0+IHtcbiAgY29uc3QgZmxleERpcmVjdGlvbiA9XG4gICAgaWxsdXN0cmF0aW9uUG9zaXRpb24gPT09ICdyaWdodCcgPyAncm93LXJldmVyc2UnIDogJ3Jvdyc7XG5cbiAgcmV0dXJuIChcbiAgICA8RW1wdHlDb250YWluZXIgc3RyZXRjaERpcmVjdGlvbj17c3RyZXRjaERpcmVjdGlvbn0+XG4gICAgICA8RG90cyBzdHJldGNoRGlyZWN0aW9uPXtzdHJldGNoRGlyZWN0aW9ufSAvPlxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgbWF4V2lkdGg9XCI4MjJweFwiXG4gICAgICAgIGZsZXhCYXNpcz1cIjEwMCVcIlxuICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgYmc9XCJiYWNrZ3JvdW5kLWN1cnJlbnRcIlxuICAgICAgICBweT17NDh9XG4gICAgICAgIHB4PXt7IF86IDE2LCBzbTogNDgsIG1kOiA2NCB9fVxuICAgICAgICB6SW5kZXg9ezF9XG4gICAgICAgIGZsZXhEaXJlY3Rpb249e3sgXzogJ2NvbHVtbicsIHNtOiBmbGV4RGlyZWN0aW9uIH19XG4gICAgICAgIGp1c3RpZnlDb250ZW50PXt7IF86ICdzcGFjZS1hcm91bmQnLCBtZDogJ3NwYWNlLWJldHdlZW4nIH19XG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICB0ZXh0QWxpZ249e3sgXzogJ2NlbnRlcicsIHNtOiAnc3RhcnQnIH19XG4gICAgICA+XG4gICAgICAgIDxJbGx1c3RyYXRpb25Db250YWluZXIgaWxsdXN0cmF0aW9uUG9zaXRpb249e2lsbHVzdHJhdGlvblBvc2l0aW9ufT5cbiAgICAgICAgICA8SWxsdXN0cmF0aW9uIHdpZHRoPXtweFJlbSgxMDApfSAvPlxuICAgICAgICA8L0lsbHVzdHJhdGlvbkNvbnRhaW5lcj5cbiAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBhbGlnbkl0ZW1zPXt7IF86ICdjZW50ZXInLCBzbTogJ3N0YXJ0JyB9fVxuICAgICAgICA+XG4gICAgICAgICAgPFRleHQgYXM9XCJoMlwiIGZvbnRTaXplPXsyMn0gbWI9ezh9PlxuICAgICAgICAgICAge2hlYWRpbmdUZXh0fVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICB7Ym9keVRleHQgJiYgPFRleHQgbWI9ezMyfT57Ym9keVRleHR9PC9UZXh0Pn1cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvRmxleEJveD5cbiAgICAgIDwvRmxleEJveD5cbiAgICA8L0VtcHR5Q29udGFpbmVyPlxuICApO1xufTtcbiJdfQ== */");
+export const EmptySection = ({
+  bodyText,
+  children,
+  headingText,
+  illustration: Illustration,
+  stretchDirection,
+  illustrationPosition = stretchDirection === 'right' ? 'left' : 'right'
+}) => {
+  const flexDirection = illustrationPosition === 'right' ? 'row-reverse' : 'row';
+  return /*#__PURE__*/_jsxs(EmptyContainer, {
+    stretchDirection: stretchDirection,
+    children: [/*#__PURE__*/_jsx(Dots, {
+      stretchDirection: stretchDirection
+    }), /*#__PURE__*/_jsxs(FlexBox, {
+      maxWidth: "822px",
+      flexBasis: "100%",
+      position: "relative",
+      bg: "background-current",
+      py: 48,
+      px: {
+        _: 16,
+        sm: 48,
+        md: 64
+      },
+      zIndex: 1,
+      flexDirection: {
+        _: 'column',
+        sm: flexDirection
+      },
+      justifyContent: {
+        _: 'space-around',
+        md: 'space-between'
+      },
+      alignItems: "center",
+      textAlign: {
+        _: 'center',
+        sm: 'start'
+      },
+      children: [/*#__PURE__*/_jsx(IllustrationContainer, {
+        illustrationPosition: illustrationPosition,
+        children: /*#__PURE__*/_jsx(Illustration, {
+          width: pxRem(100)
+        })
+      }), /*#__PURE__*/_jsxs(FlexBox, {
+        flexDirection: "column",
+        alignItems: {
+          _: 'center',
+          sm: 'start'
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          as: "h2",
+          fontSize: 22,
+          mb: 8,
+          children: headingText
+        }), bodyText && /*#__PURE__*/_jsx(Text, {
+          mb: 32,
+          children: bodyText
+        }), children]
+      })]
+    })]
+  });
+};

package/dist/ErrorContents/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type ErrorContentsProps = {
+    /**
+     * Any debug info to display, such as ["User ID", <user-id>].
+     */
+    supportInformation?: [string, string][];
+};
+export declare const ErrorContents: React.FC<ErrorContentsProps>;

package/dist/ErrorContents/index.js

@@ -0,0 +1,48 @@
+import { Anchor, Box, Text } from '@codecademy/gamut';
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ErrorContents = ({
+  supportInformation
+}) => /*#__PURE__*/_jsxs(Box, {
+  maxWidth: "40rem",
+  my: 96,
+  mx: "auto",
+  as: "main",
+  children: [/*#__PURE__*/_jsx(Text, {
+    as: "h1",
+    fontSize: 44,
+    children: "Something has gone wrong"
+  }), /*#__PURE__*/_jsx(Text, {
+    as: "p",
+    my: 16,
+    children: "We're sorry, and our best are working to fix this. In the meantime, have you tried the following?"
+  }), /*#__PURE__*/_jsxs(Box, {
+    as: "ul",
+    children: [/*#__PURE__*/_jsx("li", {
+      children: "Refreshing this page."
+    }), /*#__PURE__*/_jsx("li", {
+      children: "Clearing your browser cache."
+    })]
+  }), /*#__PURE__*/_jsxs(Text, {
+    as: "p",
+    children: ["If that doesn't help, please let us know on our", ' ', /*#__PURE__*/_jsx(Anchor, {
+      href: "https://help.codecademy.com/hc/en-us",
+      children: "Help Center"
+    }), "!"]
+  }), supportInformation && /*#__PURE__*/_jsxs(Box, {
+    as: "details",
+    fontSize: 16,
+    textColor: "gray-900",
+    children: [/*#__PURE__*/_jsx(Box, {
+      as: "summary",
+      mt: 48,
+      mb: 8,
+      children: "Support information"
+    }), supportInformation.map(([key, value]) => /*#__PURE__*/_jsxs(Text, {
+      as: "code",
+      display: "block",
+      fontSize: "small",
+      children: [key, ": ", value]
+    }, key))]
+  })]
+});