@codecademy/gamut 68.1.1-alpha.613ffe.0 → 68.1.1-alpha.759cea.0

package/dist/Disclosure/index.js

@@ -1,4 +1,4 @@
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { useState } from 'react';
 import * as React from 'react';
 import { ExpandInCollapseOut } from '../Animation';

package/dist/Drawer/index.js

@@ -1,6 +1,6 @@
 import _styled from "@emotion/styled/base";
 import { breakpoints, css, timingValues } from '@codecademy/gamut-styles';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { useEffect, useRef } from 'react';
 import { useMedia } from 'react-use';
 import { Box } from '../Box';
@@ -10,7 +10,7 @@ const drawerVisibleStyle = focusVisibleStyle('-3px');
 const DrawerBase = /*#__PURE__*/_styled(motion.create(Box), {
   target: "ey2ori50",
   label: "DrawerBase"
-})(css(drawerVisibleStyle), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9EcmF3ZXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVtQiIsImZpbGUiOiIuLi8uLi9zcmMvRHJhd2VyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGJyZWFrcG9pbnRzLCBjc3MsIHRpbWluZ1ZhbHVlcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBBbmltYXRlUHJlc2VuY2UsIG1vdGlvbiB9IGZyb20gJ2ZyYW1lci1tb3Rpb24nO1xuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VNZWRpYSB9IGZyb20gJ3JlYWN0LXVzZSc7XG5cbmltcG9ydCB7IEJveCwgQm94UHJvcHMgfSBmcm9tICcuLi9Cb3gnO1xuaW1wb3J0IHsgZm9jdXNWaXNpYmxlU3R5bGUgfSBmcm9tICcuLi91dGlscyc7XG5cbmNvbnN0IGRyYXdlclZpc2libGVTdHlsZSA9IGZvY3VzVmlzaWJsZVN0eWxlKCctM3B4Jyk7XG5jb25zdCBEcmF3ZXJCYXNlID0gc3R5bGVkKG1vdGlvbi5jcmVhdGUoQm94KSkoY3NzKGRyYXdlclZpc2libGVTdHlsZSkpO1xuXG5leHBvcnQgaW50ZXJmYWNlIERyYXdlclByb3BzIGV4dGVuZHMgT21pdDxCb3hQcm9wcywgJ3dpZHRoJz4ge1xuICAvKipcbiAgICogV2hldGhlciB0aGUgZHJhd2VyIHNob3VsZCBiZSBvcGVuLlxuICAgKi9cbiAgZXhwYW5kZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogV2hpY2ggZWRnZSBvZiB0aGUgZHJhd2VyIGNvbnRlbnQgY29udGFpbmVyIGlzIGFsaWduZWQgdG8gZHVyaW5nIHRoZSBhbmltYXRpb24uXG4gICAqL1xuICBhbGlnbkNvbnRlbnRDb250YWluZXI/OiAnbGVmdCcgfCAncmlnaHQnO1xufVxuXG5leHBvcnQgY29uc3QgRHJhd2VyOiBSZWFjdC5GQzxEcmF3ZXJQcm9wcz4gPSAoe1xuICBhbGlnbkNvbnRlbnRDb250YWluZXIgPSAncmlnaHQnLFxuICBjaGlsZHJlbixcbiAgZXhwYW5kZWQsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGRyYXdlclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGlzRGVza3RvcCA9IHVzZU1lZGlhKGAobWluLXdpZHRoOiAke2JyZWFrcG9pbnRzLnNtfSlgKTtcbiAgY29uc3QgZnVsbFdpZHRoID0gaXNEZXNrdG9wID8gYDMwcmVtYCA6ICc3NXZ3JztcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChleHBhbmRlZCkgZHJhd2VyUmVmPy5jdXJyZW50Py5mb2N1cygpO1xuICB9LCBbZXhwYW5kZWRdKTtcblxuICByZXR1cm4gKFxuICAgIDxBbmltYXRlUHJlc2VuY2U+XG4gICAgICB7ZXhwYW5kZWQgPyAoXG4gICAgICAgIDxEcmF3ZXJCYXNlXG4gICAgICAgICAgYW5pbWF0ZT17eyB3aWR0aDogZnVsbFdpZHRoIH19XG4gICAgICAgICAgYmc9XCJiYWNrZ3JvdW5kLWN1cnJlbnRcIlxuICAgICAgICAgIGV4aXQ9e3sgd2lkdGg6IDAgfX1cbiAgICAgICAgICBpbml0aWFsPXt7IHdpZHRoOiAwIH19XG4gICAgICAgICAgb3ZlcmZsb3c9XCJjbGlwXCJcbiAgICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgICByZWY9e2RyYXdlclJlZn1cbiAgICAgICAgICB0YWJJbmRleD17LTF9XG4gICAgICAgICAgdHJhbnNpdGlvbj17eyBkdXJhdGlvbjogdGltaW5nVmFsdWVzLnNsb3cgLyAxMDAwIH19XG4gICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICA+XG4gICAgICAgICAgPEJveFxuICAgICAgICAgICAgYm9yZGVyUmFkaXVzPVwic21cIlxuICAgICAgICAgICAgaGVpZ2h0PVwiMTAwJVwiXG4gICAgICAgICAgICB7Li4ueyBbYWxpZ25Db250ZW50Q29udGFpbmVyXTogMCB9fVxuICAgICAgICAgICAgbWF4V2lkdGg9XCIxMDAlXCJcbiAgICAgICAgICAgIG1pbldpZHRoPXtmdWxsV2lkdGh9XG4gICAgICAgICAgICBvdmVyZmxvd1g9XCJoaWRkZW5cIlxuICAgICAgICAgICAgb3ZlcmZsb3dZPVwiYXV0b1wiXG4gICAgICAgICAgICBwPXs0fVxuICAgICAgICAgICAgcG9zaXRpb249XCJhYnNvbHV0ZVwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgIDwvQm94PlxuICAgICAgICA8L0RyYXdlckJhc2U+XG4gICAgICApIDogbnVsbH1cbiAgICA8L0FuaW1hdGVQcmVzZW5jZT5cbiAgKTtcbn07XG4iXX0= */");
+})(css(drawerVisibleStyle), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9EcmF3ZXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVtQiIsImZpbGUiOiIuLi8uLi9zcmMvRHJhd2VyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGJyZWFrcG9pbnRzLCBjc3MsIHRpbWluZ1ZhbHVlcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBBbmltYXRlUHJlc2VuY2UsIG1vdGlvbiB9IGZyb20gJ21vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZU1lZGlhIH0gZnJvbSAncmVhY3QtdXNlJztcblxuaW1wb3J0IHsgQm94LCBCb3hQcm9wcyB9IGZyb20gJy4uL0JveCc7XG5pbXBvcnQgeyBmb2N1c1Zpc2libGVTdHlsZSB9IGZyb20gJy4uL3V0aWxzJztcblxuY29uc3QgZHJhd2VyVmlzaWJsZVN0eWxlID0gZm9jdXNWaXNpYmxlU3R5bGUoJy0zcHgnKTtcbmNvbnN0IERyYXdlckJhc2UgPSBzdHlsZWQobW90aW9uLmNyZWF0ZShCb3gpKShjc3MoZHJhd2VyVmlzaWJsZVN0eWxlKSk7XG5cbmV4cG9ydCBpbnRlcmZhY2UgRHJhd2VyUHJvcHMgZXh0ZW5kcyBPbWl0PEJveFByb3BzLCAnd2lkdGgnPiB7XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBkcmF3ZXIgc2hvdWxkIGJlIG9wZW4uXG4gICAqL1xuICBleHBhbmRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBXaGljaCBlZGdlIG9mIHRoZSBkcmF3ZXIgY29udGVudCBjb250YWluZXIgaXMgYWxpZ25lZCB0byBkdXJpbmcgdGhlIGFuaW1hdGlvbi5cbiAgICovXG4gIGFsaWduQ29udGVudENvbnRhaW5lcj86ICdsZWZ0JyB8ICdyaWdodCc7XG59XG5cbmV4cG9ydCBjb25zdCBEcmF3ZXI6IFJlYWN0LkZDPERyYXdlclByb3BzPiA9ICh7XG4gIGFsaWduQ29udGVudENvbnRhaW5lciA9ICdyaWdodCcsXG4gIGNoaWxkcmVuLFxuICBleHBhbmRlZCxcbiAgLi4ucHJvcHNcbn0pID0+IHtcbiAgY29uc3QgZHJhd2VyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcbiAgY29uc3QgaXNEZXNrdG9wID0gdXNlTWVkaWEoYChtaW4td2lkdGg6ICR7YnJlYWtwb2ludHMuc219KWApO1xuICBjb25zdCBmdWxsV2lkdGggPSBpc0Rlc2t0b3AgPyBgMzByZW1gIDogJzc1dncnO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGV4cGFuZGVkKSBkcmF3ZXJSZWY/LmN1cnJlbnQ/LmZvY3VzKCk7XG4gIH0sIFtleHBhbmRlZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPEFuaW1hdGVQcmVzZW5jZT5cbiAgICAgIHtleHBhbmRlZCA/IChcbiAgICAgICAgPERyYXdlckJhc2VcbiAgICAgICAgICBhbmltYXRlPXt7IHdpZHRoOiBmdWxsV2lkdGggfX1cbiAgICAgICAgICBiZz1cImJhY2tncm91bmQtY3VycmVudFwiXG4gICAgICAgICAgZXhpdD17eyB3aWR0aDogMCB9fVxuICAgICAgICAgIGluaXRpYWw9e3sgd2lkdGg6IDAgfX1cbiAgICAgICAgICBvdmVyZmxvdz1cImNsaXBcIlxuICAgICAgICAgIHBvc2l0aW9uPVwicmVsYXRpdmVcIlxuICAgICAgICAgIHJlZj17ZHJhd2VyUmVmfVxuICAgICAgICAgIHRhYkluZGV4PXstMX1cbiAgICAgICAgICB0cmFuc2l0aW9uPXt7IGR1cmF0aW9uOiB0aW1pbmdWYWx1ZXMuc2xvdyAvIDEwMDAgfX1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgID5cbiAgICAgICAgICA8Qm94XG4gICAgICAgICAgICBib3JkZXJSYWRpdXM9XCJzbVwiXG4gICAgICAgICAgICBoZWlnaHQ9XCIxMDAlXCJcbiAgICAgICAgICAgIHsuLi57IFthbGlnbkNvbnRlbnRDb250YWluZXJdOiAwIH19XG4gICAgICAgICAgICBtYXhXaWR0aD1cIjEwMCVcIlxuICAgICAgICAgICAgbWluV2lkdGg9e2Z1bGxXaWR0aH1cbiAgICAgICAgICAgIG92ZXJmbG93WD1cImhpZGRlblwiXG4gICAgICAgICAgICBvdmVyZmxvd1k9XCJhdXRvXCJcbiAgICAgICAgICAgIHA9ezR9XG4gICAgICAgICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgIDwvRHJhd2VyQmFzZT5cbiAgICAgICkgOiBudWxsfVxuICAgIDwvQW5pbWF0ZVByZXNlbmNlPlxuICApO1xufTtcbiJdfQ== */");
 export const Drawer = ({
   alignContentContainer = 'right',
   children,

package/dist/FeatureShimmer/index.js

@@ -1,6 +1,6 @@
 import _styled from "@emotion/styled/base";
 import { css } from '@codecademy/gamut-styles';
-import { motion, useReducedMotion } from 'framer-motion';
+import { motion, useReducedMotion } from 'motion/react';
 import { Box } from '../Box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BaseContainer = motion.create(Box);
@@ -17,7 +17,7 @@ const Shimmer = /*#__PURE__*/_styled(BaseContainer, {
   left: '-100%',
   top: 0,
   bg: 'white-400'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9GZWF0dXJlU2hpbW1lci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT2dCIiwiZmlsZSI6Ii4uLy4uL3NyYy9GZWF0dXJlU2hpbW1lci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uLCB1c2VSZWR1Y2VkTW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCwgQm94UHJvcHMgfSBmcm9tICcuLi9Cb3gnO1xuXG5jb25zdCBCYXNlQ29udGFpbmVyID0gbW90aW9uLmNyZWF0ZShCb3gpO1xuY29uc3QgU2hpbW1lciA9IHN0eWxlZChCYXNlQ29udGFpbmVyKShcbiAgY3NzKHtcbiAgICBoZWlnaHQ6ICcxNTAlJyxcbiAgICB3aWR0aDogJ2NhbGMoMTAwJSAvIDkpJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMzBkZWcpJyxcbiAgICB0cmFuc2Zvcm1PcmlnaW46ICd0b3AgcmlnaHQnLFxuICAgIGZpbHRlcjogJ2JsdXIoMjVweCknLFxuICAgIGxlZnQ6ICctMTAwJScsXG4gICAgdG9wOiAwLFxuICAgIGJnOiAnd2hpdGUtNDAwJyxcbiAgfSlcbik7XG5cbmNvbnN0IGJveFZhcmlhbnRzID0ge1xuICBpblZpZXc6IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICdyZ2JhKDAsIDAsIDAsIDApJyxcbiAgICBib3JkZXJDb2xvcjogJ3JnYmEoMCwgMCwgMCwgMCknLFxuICAgIHRyYW5zaXRpb246IHtcbiAgICAgIGVhc2U6ICdlYXNlT3V0JyxcbiAgICAgIGR1cmF0aW9uOiAwLjMsXG4gICAgICBkZWxheTogNCxcbiAgICB9LFxuICB9LFxufTtcblxuY29uc3Qgc2hpbW1lclZhcmlhbnRzID0ge1xuICBpblZpZXc6IHtcbiAgICBsZWZ0OiAnMTIwJScsIC8vIGV4dHJhICUgdG8gYWNjb3VudCBmb3Igcm90YXRpb25cbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICdyZ2JhKDAsIDAsIDAsIDApJyxcbiAgICB0cmFuc2l0aW9uOiB7XG4gICAgICBsZWZ0OiB7XG4gICAgICAgIGVhc2U6ICdlYXNlSW5PdXQnLFxuICAgICAgICBkdXJhdGlvbjogMixcbiAgICAgICAgZGVsYXk6IDIsXG4gICAgICB9LFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB7XG4gICAgICAgIGVhc2U6ICdlYXNlT3V0JyxcbiAgICAgICAgZHVyYXRpb246IDEsXG4gICAgICAgIGRlbGF5OiA0LFxuICAgICAgfSxcbiAgICB9LFxuICB9LFxufTtcblxuZXhwb3J0IGNvbnN0IEZlYXR1cmVTaGltbWVyOiBSZWFjdC5GQzxPbWl0PEJveFByb3BzLCAncmVmJz4+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIC4uLnJlc3Rcbn0pID0+IHtcbiAgY29uc3Qgc2hvdWxkUmVkdWNlTW90aW9uID0gdXNlUmVkdWNlZE1vdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxCb3ggey4uLnJlc3R9PlxuICAgICAge3Nob3VsZFJlZHVjZU1vdGlvbiA/IChcbiAgICAgICAgY2hpbGRyZW5cbiAgICAgICkgOiAoXG4gICAgICAgIDxCYXNlQ29udGFpbmVyXG4gICAgICAgICAgYmc9XCJiYWNrZ3JvdW5kLXNlbGVjdGVkXCJcbiAgICAgICAgICBib3JkZXI9ezF9XG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIGJvcmRlclJhZGl1cz17cmVzdD8uYm9yZGVyUmFkaXVzfVxuICAgICAgICAgIGhlaWdodD17MX1cbiAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgcG9zaXRpb249XCJyZWxhdGl2ZVwiXG4gICAgICAgICAgdmFyaWFudHM9e2JveFZhcmlhbnRzfVxuICAgICAgICAgIHZpZXdwb3J0PXt7IG9uY2U6IHRydWUgfX1cbiAgICAgICAgICB3aGlsZUluVmlldz1cImluVmlld1wiXG4gICAgICAgICAgd2lkdGg9ezF9XG4gICAgICAgID5cbiAgICAgICAgICA8U2hpbW1lclxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJmZWF0dXJlLXNoaW1tZXJcIlxuICAgICAgICAgICAgdmFyaWFudHM9e3NoaW1tZXJWYXJpYW50c31cbiAgICAgICAgICAgIHZpZXdwb3J0PXt7IG9uY2U6IHRydWUgfX1cbiAgICAgICAgICAvPlxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9CYXNlQ29udGFpbmVyPlxuICAgICAgKX1cbiAgICA8L0JveD5cbiAgKTtcbn07XG4iXX0= */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9GZWF0dXJlU2hpbW1lci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT2dCIiwiZmlsZSI6Ii4uLy4uL3NyYy9GZWF0dXJlU2hpbW1lci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uLCB1c2VSZWR1Y2VkTW90aW9uIH0gZnJvbSAnbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgQm94LCBCb3hQcm9wcyB9IGZyb20gJy4uL0JveCc7XG5cbmNvbnN0IEJhc2VDb250YWluZXIgPSBtb3Rpb24uY3JlYXRlKEJveCk7XG5jb25zdCBTaGltbWVyID0gc3R5bGVkKEJhc2VDb250YWluZXIpKFxuICBjc3Moe1xuICAgIGhlaWdodDogJzE1MCUnLFxuICAgIHdpZHRoOiAnY2FsYygxMDAlIC8gOSknLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzMGRlZyknLFxuICAgIHRyYW5zZm9ybU9yaWdpbjogJ3RvcCByaWdodCcsXG4gICAgZmlsdGVyOiAnYmx1cigyNXB4KScsXG4gICAgbGVmdDogJy0xMDAlJyxcbiAgICB0b3A6IDAsXG4gICAgYmc6ICd3aGl0ZS00MDAnLFxuICB9KVxuKTtcblxuY29uc3QgYm94VmFyaWFudHMgPSB7XG4gIGluVmlldzoge1xuICAgIGJhY2tncm91bmRDb2xvcjogJ3JnYmEoMCwgMCwgMCwgMCknLFxuICAgIGJvcmRlckNvbG9yOiAncmdiYSgwLCAwLCAwLCAwKScsXG4gICAgdHJhbnNpdGlvbjoge1xuICAgICAgZWFzZTogJ2Vhc2VPdXQnIGFzIGNvbnN0LFxuICAgICAgZHVyYXRpb246IDAuMyxcbiAgICAgIGRlbGF5OiA0LFxuICAgIH0sXG4gIH0sXG59O1xuXG5jb25zdCBzaGltbWVyVmFyaWFudHMgPSB7XG4gIGluVmlldzoge1xuICAgIGxlZnQ6ICcxMjAlJywgLy8gZXh0cmEgJSB0byBhY2NvdW50IGZvciByb3RhdGlvblxuICAgIGJhY2tncm91bmRDb2xvcjogJ3JnYmEoMCwgMCwgMCwgMCknLFxuICAgIHRyYW5zaXRpb246IHtcbiAgICAgIGxlZnQ6IHtcbiAgICAgICAgZWFzZTogJ2Vhc2VJbk91dCcgYXMgY29uc3QsXG4gICAgICAgIGR1cmF0aW9uOiAyLFxuICAgICAgICBkZWxheTogMixcbiAgICAgIH0sXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHtcbiAgICAgICAgZWFzZTogJ2Vhc2VPdXQnIGFzIGNvbnN0LFxuICAgICAgICBkdXJhdGlvbjogMSxcbiAgICAgICAgZGVsYXk6IDQsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgRmVhdHVyZVNoaW1tZXI6IFJlYWN0LkZDPE9taXQ8Qm94UHJvcHMsICdyZWYnPj4gPSAoe1xuICBjaGlsZHJlbixcbiAgLi4ucmVzdFxufSkgPT4ge1xuICBjb25zdCBzaG91bGRSZWR1Y2VNb3Rpb24gPSB1c2VSZWR1Y2VkTW90aW9uKCk7XG4gIHJldHVybiAoXG4gICAgPEJveCB7Li4ucmVzdH0+XG4gICAgICB7c2hvdWxkUmVkdWNlTW90aW9uID8gKFxuICAgICAgICBjaGlsZHJlblxuICAgICAgKSA6IChcbiAgICAgICAgPEJhc2VDb250YWluZXJcbiAgICAgICAgICBiZz1cImJhY2tncm91bmQtc2VsZWN0ZWRcIlxuICAgICAgICAgIGJvcmRlcj17MX1cbiAgICAgICAgICBib3JkZXJDb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiXG4gICAgICAgICAgYm9yZGVyUmFkaXVzPXtyZXN0Py5ib3JkZXJSYWRpdXN9XG4gICAgICAgICAgaGVpZ2h0PXsxfVxuICAgICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgICB2YXJpYW50cz17Ym94VmFyaWFudHN9XG4gICAgICAgICAgdmlld3BvcnQ9e3sgb25jZTogdHJ1ZSB9fVxuICAgICAgICAgIHdoaWxlSW5WaWV3PVwiaW5WaWV3XCJcbiAgICAgICAgICB3aWR0aD17MX1cbiAgICAgICAgPlxuICAgICAgICAgIDxTaGltbWVyXG4gICAgICAgICAgICBkYXRhLXRlc3RpZD1cImZlYXR1cmUtc2hpbW1lclwiXG4gICAgICAgICAgICB2YXJpYW50cz17c2hpbW1lclZhcmlhbnRzfVxuICAgICAgICAgICAgdmlld3BvcnQ9e3sgb25jZTogdHJ1ZSB9fVxuICAgICAgICAgIC8+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L0Jhc2VDb250YWluZXI+XG4gICAgICApfVxuICAgIDwvQm94PlxuICApO1xufTtcbiJdfQ== */");
 const boxVariants = {
   inView: {
     backgroundColor: 'rgba(0, 0, 0, 0)',

package/dist/Form/SelectDropdown/SelectDropdown.js

@@ -198,7 +198,7 @@ export const SelectDropdown = ({
       inputWidth: inputWidth,
       isDisabled: disabled,
       isMulti: multiple,
-      isOptionDisabled: option => option.disabled,
+      isOptionDisabled: option => option.disabled ?? false,
       isSearchable: isSearchable,
       menuAlignment: menuAlignment,
       name: name,

package/dist/Form/SelectDropdown/types/internal.d.ts

@@ -14,7 +14,7 @@ export type InternalSelectProps = {
  * Ref type for programmatic focus management.
  * Used for managing focus on select input and remove all button.
  */
-export type ProgramaticFocusRef = React.MutableRefObject<HTMLDivElement> | React.MutableRefObject<null>;
+export type ProgramaticFocusRef = React.MutableRefObject<HTMLDivElement | null>;
 /**
  * Context value for SelectDropdown internal state management.
  * Provides access to focus state and refs for keyboard navigation.

package/dist/Form/elements/Form.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from 'react';
 import * as React from 'react';
+import { CompatibleComponentProps } from '../../utils';
 declare const StyledForm: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
@@ -28,9 +28,9 @@ declare const StyledForm: import("@emotion/styled").StyledComponent<{
         readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     }>;
-    alignContent?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "baseline" | "end" | "start" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | "space-evenly" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | undefined> | undefined;
-    alignItems?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "baseline" | "end" | "start" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "stretch" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | undefined> | undefined;
-    alignSelf?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | "baseline" | "end" | "start" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "stretch" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | undefined;
+    alignContent?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "stretch" | "space-around" | "space-between" | "space-evenly" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignContent | undefined) | undefined> | undefined;
+    alignItems?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "anchor-center" | "baseline" | "stretch" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignItems | undefined) | undefined> | undefined;
+    alignSelf?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "anchor-center" | "auto" | "baseline" | "stretch" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.AlignSelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.AlignSelf | undefined) | undefined> | undefined;
     bottom?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: {
             readonly physical: "bottom";
@@ -52,7 +52,7 @@ declare const StyledForm: import("@emotion/styled").StyledComponent<{
     display?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "display";
     }>;
-    flexBasis?: 0 | "initial" | "inherit" | "content" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "auto" | "fit-content" | "max-content" | "min-content" | "-webkit-auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | undefined> | undefined;
+    flexBasis?: 0 | "initial" | "inherit" | "content" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "fit-content" | "max-content" | "min-content" | "-webkit-auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.FlexBasis<import("@codecademy/variance/dist/types/properties").DefaultCSSPropertyValue> | undefined) | undefined> | undefined;
     flexDirection?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "flexDirection";
     }>;
@@ -70,10 +70,10 @@ declare const StyledForm: import("@emotion/styled").StyledComponent<{
     gridAutoRows?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "gridAutoRows";
     }>;
-    gridColumnEnd?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | "auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumnEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumnEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumnEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumnEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | undefined> | undefined;
-    gridColumnStart?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | "auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumnStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumnStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumnStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumnStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | undefined> | undefined;
-    gridRowEnd?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | "auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRowEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRowEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRowEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRowEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | undefined> | undefined;
-    gridRowStart?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | "auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRowStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRowStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRowStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRowStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | undefined> | undefined;
+    gridColumnEnd?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumnEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumnEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumnEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumnEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnEnd | undefined) | undefined> | undefined;
+    gridColumnStart?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumnStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumnStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumnStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumnStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumnStart | undefined) | undefined> | undefined;
+    gridRowEnd?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRowEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRowEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRowEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRowEnd | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowEnd | undefined) | undefined> | undefined;
+    gridRowStart?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRowStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRowStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRowStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRowStart | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRowStart | undefined) | undefined> | undefined;
     gridTemplateAreas?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "gridTemplateAreas";
     }>;
@@ -83,9 +83,9 @@ declare const StyledForm: import("@emotion/styled").StyledComponent<{
     gridTemplateRows?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "gridTemplateRows";
     }>;
-    justifyContent?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "left" | "right" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | "space-evenly" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifyContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifyContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifyContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifyContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | undefined> | undefined;
-    justifyItems?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "left" | "right" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "baseline" | "end" | "start" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "stretch" | "legacy" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifyItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifyItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifyItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifyItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | undefined> | undefined;
-    justifySelf?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "left" | "right" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | "baseline" | "end" | "start" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "stretch" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | undefined;
+    justifyContent?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "left" | "right" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "stretch" | "space-around" | "space-between" | "space-evenly" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifyContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifyContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifyContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifyContent | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyContent | undefined) | undefined> | undefined;
+    justifyItems?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "left" | "right" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "anchor-center" | "baseline" | "stretch" | "legacy" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifyItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifyItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifyItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifyItems | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifyItems | undefined) | undefined> | undefined;
+    justifySelf?: "center" | "initial" | "inherit" | "normal" | (string & {}) | "left" | "right" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "anchor-center" | "auto" | "baseline" | "stretch" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.JustifySelf | ((theme: import("@emotion/react").Theme) => import("csstype").Property.JustifySelf | undefined) | undefined> | undefined;
     left?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: {
             readonly physical: "left";
@@ -222,9 +222,9 @@ declare const StyledForm: import("@emotion/styled").StyledComponent<{
         readonly property: "gap";
         readonly scale: "spacing";
     }>;
-    gridArea?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | "auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | undefined;
-    gridColumn?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | "auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumn | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumn | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumn | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumn | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | undefined> | undefined;
-    gridRow?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | (number & {}) | "auto" | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRow | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRow | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRow | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRow | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | undefined> | undefined;
+    gridArea?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridArea | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridArea | undefined) | undefined> | undefined;
+    gridColumn?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumn | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumn | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridColumn | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridColumn | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridColumn | undefined) | undefined> | undefined;
+    gridRow?: "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRow | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRow | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | undefined> | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | import("@codecademy/variance").BreakpointMap<import("csstype").Property.GridRow | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | undefined> | import("@codecademy/variance").BreakpointArray<import("csstype").Property.GridRow | ((theme: import("@emotion/react").Theme) => import("csstype").Property.GridRow | undefined) | undefined> | undefined;
     inset?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "inset";
         readonly properties: {
@@ -526,7 +526,7 @@ declare const StyledForm: import("@emotion/styled").StyledComponent<{
     }>;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
-}, Pick<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "name" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "method" | "target" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | keyof React.ClassAttributes<HTMLFormElement>>, {}>;
-export type FormProps = ComponentProps<typeof StyledForm>;
+}, Pick<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "name" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "target" | "method" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | keyof React.ClassAttributes<HTMLFormElement>>, {}>;
+export type FormProps = CompatibleComponentProps<typeof StyledForm>;
 export declare const Form: React.FC<FormProps>;
 export {};

package/dist/Form/elements/Form.js

@@ -9,7 +9,7 @@ const formSystemProps = variance.compose(system.space, system.border, system.lay
 const StyledForm = /*#__PURE__*/_styled('form', _extends({}, {
   target: "e14c01oj0",
   label: "StyledForm"
-}, styledOptions()))(formSystemProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Gb3JtL2VsZW1lbnRzL0Zvcm0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVtQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvRm9ybS9lbGVtZW50cy9Gb3JtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZE9wdGlvbnMsIHN5c3RlbSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyB2YXJpYW5jZSB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IENvbXBvbmVudFByb3BzLCBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBmb3JtU3lzdGVtUHJvcHMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBzeXN0ZW0uc3BhY2UsXG4gIHN5c3RlbS5ib3JkZXIsXG4gIHN5c3RlbS5sYXlvdXQsXG4gIHN5c3RlbS5wb3NpdGlvbmluZyxcbiAgc3lzdGVtLmZsZXgsXG4gIHN5c3RlbS5ncmlkXG4pO1xuXG5jb25zdCBTdHlsZWRGb3JtID0gc3R5bGVkKCdmb3JtJywgc3R5bGVkT3B0aW9uczwnZm9ybSc+KCkpKGZvcm1TeXN0ZW1Qcm9wcyk7XG5cbmV4cG9ydCB0eXBlIEZvcm1Qcm9wcyA9IENvbXBvbmVudFByb3BzPHR5cGVvZiBTdHlsZWRGb3JtPjtcblxuZXhwb3J0IGNvbnN0IEZvcm06IFJlYWN0LkZDPEZvcm1Qcm9wcz4gPSBmb3J3YXJkUmVmKFxuICAoeyBtZXRob2QgPSAncG9zdCcsIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICAgIHJldHVybiA8U3R5bGVkRm9ybSB7Li4ucHJvcHN9IG1ldGhvZD17bWV0aG9kfSBub1ZhbGlkYXRlIHJlZj17cmVmfSAvPjtcbiAgfVxuKTtcbiJdfQ== */");
+}, styledOptions()))(formSystemProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Gb3JtL2VsZW1lbnRzL0Zvcm0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCbUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0Zvcm0vZWxlbWVudHMvRm9ybS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdHlsZWRPcHRpb25zLCBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBDb21wYXRpYmxlQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmNvbnN0IGZvcm1TeXN0ZW1Qcm9wcyA9IHZhcmlhbmNlLmNvbXBvc2UoXG4gIHN5c3RlbS5zcGFjZSxcbiAgc3lzdGVtLmJvcmRlcixcbiAgc3lzdGVtLmxheW91dCxcbiAgc3lzdGVtLnBvc2l0aW9uaW5nLFxuICBzeXN0ZW0uZmxleCxcbiAgc3lzdGVtLmdyaWRcbik7XG5cbmNvbnN0IFN0eWxlZEZvcm0gPSBzdHlsZWQoJ2Zvcm0nLCBzdHlsZWRPcHRpb25zPCdmb3JtJz4oKSkoZm9ybVN5c3RlbVByb3BzKTtcblxuZXhwb3J0IHR5cGUgRm9ybVByb3BzID0gQ29tcGF0aWJsZUNvbXBvbmVudFByb3BzPHR5cGVvZiBTdHlsZWRGb3JtPjtcblxuZXhwb3J0IGNvbnN0IEZvcm06IFJlYWN0LkZDPEZvcm1Qcm9wcz4gPSBmb3J3YXJkUmVmKFxuICAoeyBtZXRob2QgPSAncG9zdCcsIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICAgIHJldHVybiA8U3R5bGVkRm9ybSB7Li4ucHJvcHN9IG1ldGhvZD17bWV0aG9kfSBub1ZhbGlkYXRlIHJlZj17cmVmfSAvPjtcbiAgfVxuKTtcbiJdfQ== */");
 export const Form = /*#__PURE__*/forwardRef(({
   method = 'post',
   ...props

package/dist/Form/elements/FormError.d.ts

@@ -1,9 +1,9 @@
 import { StyleProps } from '@codecademy/variance';
-import { HTMLAttributes } from 'react';
 import * as React from 'react';
+import { CompatibleComponentProps } from '../../utils';
 declare const errorSpanVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "initial" | "absolute" | "inlineCentered"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }) => import("@codecademy/variance").CSSObject;
-type FormErrorProps = StyleProps<typeof errorSpanVariants> & HTMLAttributes<HTMLSpanElement>;
+type FormErrorProps = StyleProps<typeof errorSpanVariants> & CompatibleComponentProps<'span'>;
 export declare const FormError: React.FC<FormErrorProps>;
 export {};

package/dist/Form/elements/FormError.js

@@ -27,7 +27,7 @@ const errorSpanVariants = variant({
 const ErrorSpan = /*#__PURE__*/_styled("span", {
   target: "egb3lhk0",
   label: "ErrorSpan"
-})(errorSpanVariants, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Gb3JtL2VsZW1lbnRzL0Zvcm1FcnJvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJrQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvRm9ybS9lbGVtZW50cy9Gb3JtRXJyb3IudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUsIHZhcmlhbnQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEhUTUxBdHRyaWJ1dGVzIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBlcnJvclNwYW5WYXJpYW50cyA9IHZhcmlhbnQoe1xuICBiYXNlOiB7XG4gICAgbGVmdDogMCxcbiAgICB0b3A6IGBjYWxjKDEwMCUgLSAke3RoZW1lLnNwYWNpbmdbOF19KWAsXG4gICAgY29sb3I6ICdmZWVkYmFjay1lcnJvcicsXG4gICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgZm9udFNpemU6ICdzbWFsbCcsXG4gIH0sXG4gIGRlZmF1bHRWYXJpYW50OiAnaW5pdGlhbCcsXG4gIHZhcmlhbnRzOiB7XG4gICAgaW5pdGlhbDoge1xuICAgICAgcG9zaXRpb246ICdpbml0aWFsJyxcbiAgICB9LFxuICAgIGFic29sdXRlOiB7XG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB9LFxuICAgIGlubGluZUNlbnRlcmVkOiB7XG4gICAgICBwb3NpdGlvbjogJ2luaXRpYWwnLFxuICAgICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICB9LFxuICB9LFxufSk7XG5cbmNvbnN0IEVycm9yU3BhbiA9IHN0eWxlZC5zcGFuKGVycm9yU3BhblZhcmlhbnRzKTtcblxudHlwZSBGb3JtRXJyb3JQcm9wcyA9IFN0eWxlUHJvcHM8dHlwZW9mIGVycm9yU3BhblZhcmlhbnRzPiAmXG4gIEhUTUxBdHRyaWJ1dGVzPEhUTUxTcGFuRWxlbWVudD47XG5cbmV4cG9ydCBjb25zdCBGb3JtRXJyb3I6IFJlYWN0LkZDPEZvcm1FcnJvclByb3BzPiA9IChwcm9wcykgPT4ge1xuICByZXR1cm4gPEVycm9yU3BhbiB7Li4ucHJvcHN9IC8+O1xufTtcbiJdfQ== */");
+})(errorSpanVariants, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Gb3JtL2VsZW1lbnRzL0Zvcm1FcnJvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJrQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvRm9ybS9lbGVtZW50cy9Gb3JtRXJyb3IudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUsIHZhcmlhbnQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQ29tcGF0aWJsZUNvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBlcnJvclNwYW5WYXJpYW50cyA9IHZhcmlhbnQoe1xuICBiYXNlOiB7XG4gICAgbGVmdDogMCxcbiAgICB0b3A6IGBjYWxjKDEwMCUgLSAke3RoZW1lLnNwYWNpbmdbOF19KWAsXG4gICAgY29sb3I6ICdmZWVkYmFjay1lcnJvcicsXG4gICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgZm9udFNpemU6ICdzbWFsbCcsXG4gIH0sXG4gIGRlZmF1bHRWYXJpYW50OiAnaW5pdGlhbCcsXG4gIHZhcmlhbnRzOiB7XG4gICAgaW5pdGlhbDoge1xuICAgICAgcG9zaXRpb246ICdpbml0aWFsJyxcbiAgICB9LFxuICAgIGFic29sdXRlOiB7XG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB9LFxuICAgIGlubGluZUNlbnRlcmVkOiB7XG4gICAgICBwb3NpdGlvbjogJ2luaXRpYWwnLFxuICAgICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICB9LFxuICB9LFxufSk7XG5cbmNvbnN0IEVycm9yU3BhbiA9IHN0eWxlZC5zcGFuKGVycm9yU3BhblZhcmlhbnRzKTtcblxudHlwZSBGb3JtRXJyb3JQcm9wcyA9IFN0eWxlUHJvcHM8dHlwZW9mIGVycm9yU3BhblZhcmlhbnRzPiAmXG4gIENvbXBhdGlibGVDb21wb25lbnRQcm9wczwnc3Bhbic+O1xuXG5leHBvcnQgY29uc3QgRm9ybUVycm9yOiBSZWFjdC5GQzxGb3JtRXJyb3JQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgcmV0dXJuIDxFcnJvclNwYW4gey4uLnByb3BzfSAvPjtcbn07XG4iXX0= */");
 export const FormError = props => {
   return /*#__PURE__*/_jsx(ErrorSpan, {
     ...props

package/dist/Form/elements/FormGroup.d.ts

@@ -10,12 +10,14 @@ export interface FormGroupProps extends ComponentProps<typeof FormGroupContainer
     description?: string;
     labelSize?: 'small' | 'large';
 }
-declare const StyledFormGroupContainer: import("@emotion/styled").StyledComponent<{
+declare const StyledFormGroupContainer: import("@emotion/styled").StyledComponent<Omit<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & import("../../Box").BoxProps & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | keyof React.ClassAttributes<HTMLDivElement> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+} & import("../../Box").BoxProps & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | keyof React.ClassAttributes<HTMLDivElement> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, "onScrollEnd" | "onScrollEndCapture"> & import("../..").OptionalScrollProps & Omit<React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.LegacyRef<HTMLDivElement | null> | undefined;
+} & {
     theme?: import("@emotion/react").Theme | undefined;
-} & import("@codecademy/variance/dist/types/config").VariantProps<"spacing", false | "loose" | "fit" | "tight" | "padded"> & {
+} & import("@codecademy/variance/dist/types/config").VariantProps<"spacing", false | "fit" | "loose" | "tight" | "padded"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 declare const FormGroupContainer: React.FC<ComponentProps<typeof StyledFormGroupContainer>>;

package/dist/Form/inputs/Checkbox.d.ts

@@ -53,4 +53,4 @@ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'checked
      */
     dontAriaHideLabel?: boolean;
 };
-export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement | null>>;