@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/AvatarChooser/index.js

@@ -1,105 +1,78 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import { FlexBox, FormError, Input, TextButton } from '@codecademy/gamut';
-import { pxRem, theme } from '@codecademy/gamut-styles';
-import { useCallback, useRef, useState } from 'react';
-import * as React from 'react';
-import { Avatar } from '../Avatar';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from "../Avatar/index.js";
+import { FlexBox, FormError, Input, TextButton } from "@codecademy/gamut";
+import { pxRem, theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { useCallback, useRef, useState } from "react";
+
+//#region src/AvatarChooser/index.tsx
 const baseSize = 75;
 const smBreakpointSize = 120;
-const StyledAvatar = /*#__PURE__*/_styled(Avatar, {
-  target: "e1ouehc42",
-  label: "StyledAvatar"
-})("img{width:", pxRem(baseSize), ";height:", pxRem(baseSize), ";}", theme.breakpoints.sm, "{img{width:", pxRem(smBreakpointSize), ";height:", pxRem(smBreakpointSize), ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BdmF0YXJDaG9vc2VyL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Qm1DIiwiZmlsZSI6Ii4uLy4uL3NyYy9BdmF0YXJDaG9vc2VyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEZsZXhCb3gsXG4gIEZvcm1FcnJvcixcbiAgSW5wdXQsXG4gIFRleHRCdXR0b24sXG4gIFVzZUZvcm1SZXR1cm4sXG4gIFZhbGlkYXRlLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBweFJlbSwgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEF2YXRhciB9IGZyb20gJy4uL0F2YXRhcic7XG5cbnR5cGUgQXZhdGFyQ2hvb3NlclByb3BzID0ge1xuICBzcmM6IHN0cmluZztcbiAgbmFtZT86IHN0cmluZztcbiAgcmVnaXN0ZXI/OiBVc2VGb3JtUmV0dXJuWydyZWdpc3RlciddO1xuICBvbkltYWdlQ2hhbmdlZD86IChpbWFnZUZpbGVMaXN0OiBGaWxlTGlzdCkgPT4gdm9pZDtcbiAgdmFsaWRhdGU/OlxuICAgIHwgVmFsaWRhdGU8RmlsZUxpc3QsIFtGaWxlTGlzdF0+XG4gICAgfCBSZWNvcmQ8c3RyaW5nLCBWYWxpZGF0ZTxGaWxlTGlzdCwgW0ZpbGVMaXN0XT4+O1xuICBlcnJvcj86IHN0cmluZztcbn07XG5cbmNvbnN0IGJhc2VTaXplID0gNzU7XG5jb25zdCBzbUJyZWFrcG9pbnRTaXplID0gMTIwO1xuXG5jb25zdCBTdHlsZWRBdmF0YXIgPSBzdHlsZWQoQXZhdGFyKWBcbiAgaW1nIHtcbiAgICB3aWR0aDogJHtweFJlbShiYXNlU2l6ZSl9O1xuICAgIGhlaWdodDogJHtweFJlbShiYXNlU2l6ZSl9O1xuICB9XG5cbiAgJHt0aGVtZS5icmVha3BvaW50cy5zbX0ge1xuICAgIGltZyB7XG4gICAgICB3aWR0aDogJHtweFJlbShzbUJyZWFrcG9pbnRTaXplKX07XG4gICAgICBoZWlnaHQ6ICR7cHhSZW0oc21CcmVha3BvaW50U2l6ZSl9O1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQoSW5wdXQpYFxuICBkaXNwbGF5OiBub25lO1xuYDtcblxuY29uc3QgU3R5bGVkRm9ybUVycm9yID0gc3R5bGVkKEZvcm1FcnJvcilgXG4gIHBvc2l0aW9uOiBpbml0aWFsO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQXZhdGFyQ2hvb3NlcjogUmVhY3QuRkM8QXZhdGFyQ2hvb3NlclByb3BzPiA9ICh7XG4gIHNyYzogZXhpc3RpbmdTcmMsXG4gIG9uSW1hZ2VDaGFuZ2VkLFxuICBlcnJvcixcbiAgcmVnaXN0ZXIsXG4gIHZhbGlkYXRlID0gdmFsaWRhdGVQaG90b1VwbG9hZCxcbiAgbmFtZSA9ICdBdmF0YXIgUGhvdG8nLFxufSkgPT4ge1xuICBjb25zdCBbaW1hZ2VTcmMsIHNldEltYWdlU3JjXSA9IHVzZVN0YXRlPHN0cmluZz4oZXhpc3RpbmdTcmMpO1xuICBjb25zdCBjaG9vc2VQaG90b0xhYmVsUmVmID0gdXNlUmVmPEhUTUxMYWJlbEVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IG9uQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50OiBSZWFjdC5Gb3JtRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50Py50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgIGNvbnN0IGltYWdlRmlsZWxpc3QgPSB0YXJnZXQ/LmZpbGVzO1xuICAgICAgY29uc3QgaW1hZ2VGaWxlID0gaW1hZ2VGaWxlbGlzdD8uWzBdO1xuXG4gICAgICBpZiAoaW1hZ2VGaWxlbGlzdCkgb25JbWFnZUNoYW5nZWQ/LihpbWFnZUZpbGVsaXN0KTtcbiAgICAgIGlmIChpbWFnZUZpbGUpIHNldEltYWdlU3JjKFVSTC5jcmVhdGVPYmplY3RVUkwoaW1hZ2VGaWxlKSk7XG4gICAgfSxcbiAgICBbc2V0SW1hZ2VTcmMsIG9uSW1hZ2VDaGFuZ2VkXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEZsZXhCb3hcbiAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICB3aWR0aD1cImZpdC1jb250ZW50XCJcbiAgICAgIG1heFdpZHRoPXtweFJlbSgxMjApfVxuICAgICAgYXJpYS1saXZlPVwicG9saXRlXCJcbiAgICA+XG4gICAgICA8U3R5bGVkQXZhdGFyIHNyYz17aW1hZ2VTcmN9IGRpc2FibGVEcm9wc2hhZG93IGFsdD1cIkF2YXRhciBQaG90b1wiIC8+XG4gICAgICA8VGV4dEJ1dHRvblxuICAgICAgICBtdD17eyBfOiA0LCBzbTogMTIgfX1cbiAgICAgICAgb25DbGljaz17KCkgPT4gY2hvb3NlUGhvdG9MYWJlbFJlZi5jdXJyZW50Py5jbGljaygpfVxuICAgICAgPlxuICAgICAgICB7LyogaHR0cHM6Ly9naXRodWIuY29tL2pzeC1lc2xpbnQvZXNsaW50LXBsdWdpbi1qc3gtYTExeS9ibG9iL21haW4vZG9jcy9ydWxlcy9sYWJlbC1oYXMtYXNzb2NpYXRlZC1jb250cm9sLm1kICovfVxuICAgICAgICB7LyogZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGpzeC1hMTF5L2xhYmVsLWhhcy1hc3NvY2lhdGVkLWNvbnRyb2wgKi99XG4gICAgICAgIDxsYWJlbCByZWY9e2Nob29zZVBob3RvTGFiZWxSZWZ9IGh0bWxGb3I9XCJhdmF0YXItY2hvb3NlclwiPlxuICAgICAgICAgIENob29zZSBQaG90b1xuICAgICAgICA8L2xhYmVsPlxuICAgICAgPC9UZXh0QnV0dG9uPlxuXG4gICAgICA8SGlkZGVuSW5wdXRcbiAgICAgICAgdHlwZT1cImZpbGVcIlxuICAgICAgICBpZD1cImF2YXRhci1jaG9vc2VyXCJcbiAgICAgICAgYXJpYS1pbnZhbGlkPXtCb29sZWFuKGVycm9yKX1cbiAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgICB7Li4ucmVnaXN0ZXI/LihuYW1lLCB7XG4gICAgICAgICAgb25DaGFuZ2UsXG4gICAgICAgICAgdmFsaWRhdGUsXG4gICAgICAgICAgcmVxdWlyZWQ6IGZhbHNlLFxuICAgICAgICB9KX1cbiAgICAgIC8+XG4gICAgICB7ZXJyb3IgJiYgPFN0eWxlZEZvcm1FcnJvciByb2xlPVwiYWxlcnRcIj57ZXJyb3J9PC9TdHlsZWRGb3JtRXJyb3I+fVxuICAgIDwvRmxleEJveD5cbiAgKTtcbn07XG5cbmNvbnN0IHZhbGlkYXRlUGhvdG9VcGxvYWQgPSAoZmlsZXM6IEZpbGVMaXN0KTogYm9vbGVhbiB8IHN0cmluZyA9PiB7XG4gIGNvbnN0IE1BWF9GSUxFX1NJWkUgPSA1MjQyODgwO1xuICBjb25zdCBNQVhfRklMRV9TSVpFX0lOX01CID0gNTtcblxuICBjb25zdCBmaWxlID0gZmlsZXM/Lml0ZW0oMCk7XG4gIGlmICghZmlsZSkgcmV0dXJuIHRydWU7XG5cbiAgY29uc3QgeyB0eXBlLCBzaXplIH0gPSBmaWxlO1xuICBpZiAoIVsnaW1hZ2UvanBlZycsICdpbWFnZS9wbmcnXS5pbmNsdWRlcyh0eXBlKSlcbiAgICByZXR1cm4gJ1BsZWFzZSB1cGxvYWQgYSBqcGVnIG9yIHBuZyBmaWxlLic7XG5cbiAgaWYgKHNpemUgPiBNQVhfRklMRV9TSVpFKVxuICAgIHJldHVybiBgU29ycnksIHdlIGNhbm5vdCBhY2NlcHQgZmlsZXMgbGFyZ2VyIHRoYW4gJHtNQVhfRklMRV9TSVpFX0lOX01CfSBNQi5gO1xuXG4gIHJldHVybiB0cnVlO1xufTtcbiJdfQ== */"));
-const HiddenInput = /*#__PURE__*/_styled(Input, {
-  target: "e1ouehc41",
-  label: "HiddenInput"
-})(process.env.NODE_ENV === "production" ? {
-  name: "eivff4",
-  styles: "display:none"
-} : {
-  name: "eivff4",
-  styles: "display:none/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BdmF0YXJDaG9vc2VyL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQ2lDIiwiZmlsZSI6Ii4uLy4uL3NyYy9BdmF0YXJDaG9vc2VyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEZsZXhCb3gsXG4gIEZvcm1FcnJvcixcbiAgSW5wdXQsXG4gIFRleHRCdXR0b24sXG4gIFVzZUZvcm1SZXR1cm4sXG4gIFZhbGlkYXRlLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBweFJlbSwgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEF2YXRhciB9IGZyb20gJy4uL0F2YXRhcic7XG5cbnR5cGUgQXZhdGFyQ2hvb3NlclByb3BzID0ge1xuICBzcmM6IHN0cmluZztcbiAgbmFtZT86IHN0cmluZztcbiAgcmVnaXN0ZXI/OiBVc2VGb3JtUmV0dXJuWydyZWdpc3RlciddO1xuICBvbkltYWdlQ2hhbmdlZD86IChpbWFnZUZpbGVMaXN0OiBGaWxlTGlzdCkgPT4gdm9pZDtcbiAgdmFsaWRhdGU/OlxuICAgIHwgVmFsaWRhdGU8RmlsZUxpc3QsIFtGaWxlTGlzdF0+XG4gICAgfCBSZWNvcmQ8c3RyaW5nLCBWYWxpZGF0ZTxGaWxlTGlzdCwgW0ZpbGVMaXN0XT4+O1xuICBlcnJvcj86IHN0cmluZztcbn07XG5cbmNvbnN0IGJhc2VTaXplID0gNzU7XG5jb25zdCBzbUJyZWFrcG9pbnRTaXplID0gMTIwO1xuXG5jb25zdCBTdHlsZWRBdmF0YXIgPSBzdHlsZWQoQXZhdGFyKWBcbiAgaW1nIHtcbiAgICB3aWR0aDogJHtweFJlbShiYXNlU2l6ZSl9O1xuICAgIGhlaWdodDogJHtweFJlbShiYXNlU2l6ZSl9O1xuICB9XG5cbiAgJHt0aGVtZS5icmVha3BvaW50cy5zbX0ge1xuICAgIGltZyB7XG4gICAgICB3aWR0aDogJHtweFJlbShzbUJyZWFrcG9pbnRTaXplKX07XG4gICAgICBoZWlnaHQ6ICR7cHhSZW0oc21CcmVha3BvaW50U2l6ZSl9O1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQoSW5wdXQpYFxuICBkaXNwbGF5OiBub25lO1xuYDtcblxuY29uc3QgU3R5bGVkRm9ybUVycm9yID0gc3R5bGVkKEZvcm1FcnJvcilgXG4gIHBvc2l0aW9uOiBpbml0aWFsO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQXZhdGFyQ2hvb3NlcjogUmVhY3QuRkM8QXZhdGFyQ2hvb3NlclByb3BzPiA9ICh7XG4gIHNyYzogZXhpc3RpbmdTcmMsXG4gIG9uSW1hZ2VDaGFuZ2VkLFxuICBlcnJvcixcbiAgcmVnaXN0ZXIsXG4gIHZhbGlkYXRlID0gdmFsaWRhdGVQaG90b1VwbG9hZCxcbiAgbmFtZSA9ICdBdmF0YXIgUGhvdG8nLFxufSkgPT4ge1xuICBjb25zdCBbaW1hZ2VTcmMsIHNldEltYWdlU3JjXSA9IHVzZVN0YXRlPHN0cmluZz4oZXhpc3RpbmdTcmMpO1xuICBjb25zdCBjaG9vc2VQaG90b0xhYmVsUmVmID0gdXNlUmVmPEhUTUxMYWJlbEVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IG9uQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50OiBSZWFjdC5Gb3JtRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50Py50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgIGNvbnN0IGltYWdlRmlsZWxpc3QgPSB0YXJnZXQ/LmZpbGVzO1xuICAgICAgY29uc3QgaW1hZ2VGaWxlID0gaW1hZ2VGaWxlbGlzdD8uWzBdO1xuXG4gICAgICBpZiAoaW1hZ2VGaWxlbGlzdCkgb25JbWFnZUNoYW5nZWQ/LihpbWFnZUZpbGVsaXN0KTtcbiAgICAgIGlmIChpbWFnZUZpbGUpIHNldEltYWdlU3JjKFVSTC5jcmVhdGVPYmplY3RVUkwoaW1hZ2VGaWxlKSk7XG4gICAgfSxcbiAgICBbc2V0SW1hZ2VTcmMsIG9uSW1hZ2VDaGFuZ2VkXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEZsZXhCb3hcbiAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICB3aWR0aD1cImZpdC1jb250ZW50XCJcbiAgICAgIG1heFdpZHRoPXtweFJlbSgxMjApfVxuICAgICAgYXJpYS1saXZlPVwicG9saXRlXCJcbiAgICA+XG4gICAgICA8U3R5bGVkQXZhdGFyIHNyYz17aW1hZ2VTcmN9IGRpc2FibGVEcm9wc2hhZG93IGFsdD1cIkF2YXRhciBQaG90b1wiIC8+XG4gICAgICA8VGV4dEJ1dHRvblxuICAgICAgICBtdD17eyBfOiA0LCBzbTogMTIgfX1cbiAgICAgICAgb25DbGljaz17KCkgPT4gY2hvb3NlUGhvdG9MYWJlbFJlZi5jdXJyZW50Py5jbGljaygpfVxuICAgICAgPlxuICAgICAgICB7LyogaHR0cHM6Ly9naXRodWIuY29tL2pzeC1lc2xpbnQvZXNsaW50LXBsdWdpbi1qc3gtYTExeS9ibG9iL21haW4vZG9jcy9ydWxlcy9sYWJlbC1oYXMtYXNzb2NpYXRlZC1jb250cm9sLm1kICovfVxuICAgICAgICB7LyogZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGpzeC1hMTF5L2xhYmVsLWhhcy1hc3NvY2lhdGVkLWNvbnRyb2wgKi99XG4gICAgICAgIDxsYWJlbCByZWY9e2Nob29zZVBob3RvTGFiZWxSZWZ9IGh0bWxGb3I9XCJhdmF0YXItY2hvb3NlclwiPlxuICAgICAgICAgIENob29zZSBQaG90b1xuICAgICAgICA8L2xhYmVsPlxuICAgICAgPC9UZXh0QnV0dG9uPlxuXG4gICAgICA8SGlkZGVuSW5wdXRcbiAgICAgICAgdHlwZT1cImZpbGVcIlxuICAgICAgICBpZD1cImF2YXRhci1jaG9vc2VyXCJcbiAgICAgICAgYXJpYS1pbnZhbGlkPXtCb29sZWFuKGVycm9yKX1cbiAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgICB7Li4ucmVnaXN0ZXI/LihuYW1lLCB7XG4gICAgICAgICAgb25DaGFuZ2UsXG4gICAgICAgICAgdmFsaWRhdGUsXG4gICAgICAgICAgcmVxdWlyZWQ6IGZhbHNlLFxuICAgICAgICB9KX1cbiAgICAgIC8+XG4gICAgICB7ZXJyb3IgJiYgPFN0eWxlZEZvcm1FcnJvciByb2xlPVwiYWxlcnRcIj57ZXJyb3J9PC9TdHlsZWRGb3JtRXJyb3I+fVxuICAgIDwvRmxleEJveD5cbiAgKTtcbn07XG5cbmNvbnN0IHZhbGlkYXRlUGhvdG9VcGxvYWQgPSAoZmlsZXM6IEZpbGVMaXN0KTogYm9vbGVhbiB8IHN0cmluZyA9PiB7XG4gIGNvbnN0IE1BWF9GSUxFX1NJWkUgPSA1MjQyODgwO1xuICBjb25zdCBNQVhfRklMRV9TSVpFX0lOX01CID0gNTtcblxuICBjb25zdCBmaWxlID0gZmlsZXM/Lml0ZW0oMCk7XG4gIGlmICghZmlsZSkgcmV0dXJuIHRydWU7XG5cbiAgY29uc3QgeyB0eXBlLCBzaXplIH0gPSBmaWxlO1xuICBpZiAoIVsnaW1hZ2UvanBlZycsICdpbWFnZS9wbmcnXS5pbmNsdWRlcyh0eXBlKSlcbiAgICByZXR1cm4gJ1BsZWFzZSB1cGxvYWQgYSBqcGVnIG9yIHBuZyBmaWxlLic7XG5cbiAgaWYgKHNpemUgPiBNQVhfRklMRV9TSVpFKVxuICAgIHJldHVybiBgU29ycnksIHdlIGNhbm5vdCBhY2NlcHQgZmlsZXMgbGFyZ2VyIHRoYW4gJHtNQVhfRklMRV9TSVpFX0lOX01CfSBNQi5gO1xuXG4gIHJldHVybiB0cnVlO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledFormError = /*#__PURE__*/_styled(FormError, {
-  target: "e1ouehc40",
-  label: "StyledFormError"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1l8affw",
-  styles: "position:initial;text-align:center"
-} : {
-  name: "1l8affw",
-  styles: "position:initial;text-align:center/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BdmF0YXJDaG9vc2VyL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErQ3lDIiwiZmlsZSI6Ii4uLy4uL3NyYy9BdmF0YXJDaG9vc2VyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEZsZXhCb3gsXG4gIEZvcm1FcnJvcixcbiAgSW5wdXQsXG4gIFRleHRCdXR0b24sXG4gIFVzZUZvcm1SZXR1cm4sXG4gIFZhbGlkYXRlLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBweFJlbSwgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEF2YXRhciB9IGZyb20gJy4uL0F2YXRhcic7XG5cbnR5cGUgQXZhdGFyQ2hvb3NlclByb3BzID0ge1xuICBzcmM6IHN0cmluZztcbiAgbmFtZT86IHN0cmluZztcbiAgcmVnaXN0ZXI/OiBVc2VGb3JtUmV0dXJuWydyZWdpc3RlciddO1xuICBvbkltYWdlQ2hhbmdlZD86IChpbWFnZUZpbGVMaXN0OiBGaWxlTGlzdCkgPT4gdm9pZDtcbiAgdmFsaWRhdGU/OlxuICAgIHwgVmFsaWRhdGU8RmlsZUxpc3QsIFtGaWxlTGlzdF0+XG4gICAgfCBSZWNvcmQ8c3RyaW5nLCBWYWxpZGF0ZTxGaWxlTGlzdCwgW0ZpbGVMaXN0XT4+O1xuICBlcnJvcj86IHN0cmluZztcbn07XG5cbmNvbnN0IGJhc2VTaXplID0gNzU7XG5jb25zdCBzbUJyZWFrcG9pbnRTaXplID0gMTIwO1xuXG5jb25zdCBTdHlsZWRBdmF0YXIgPSBzdHlsZWQoQXZhdGFyKWBcbiAgaW1nIHtcbiAgICB3aWR0aDogJHtweFJlbShiYXNlU2l6ZSl9O1xuICAgIGhlaWdodDogJHtweFJlbShiYXNlU2l6ZSl9O1xuICB9XG5cbiAgJHt0aGVtZS5icmVha3BvaW50cy5zbX0ge1xuICAgIGltZyB7XG4gICAgICB3aWR0aDogJHtweFJlbShzbUJyZWFrcG9pbnRTaXplKX07XG4gICAgICBoZWlnaHQ6ICR7cHhSZW0oc21CcmVha3BvaW50U2l6ZSl9O1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQoSW5wdXQpYFxuICBkaXNwbGF5OiBub25lO1xuYDtcblxuY29uc3QgU3R5bGVkRm9ybUVycm9yID0gc3R5bGVkKEZvcm1FcnJvcilgXG4gIHBvc2l0aW9uOiBpbml0aWFsO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQXZhdGFyQ2hvb3NlcjogUmVhY3QuRkM8QXZhdGFyQ2hvb3NlclByb3BzPiA9ICh7XG4gIHNyYzogZXhpc3RpbmdTcmMsXG4gIG9uSW1hZ2VDaGFuZ2VkLFxuICBlcnJvcixcbiAgcmVnaXN0ZXIsXG4gIHZhbGlkYXRlID0gdmFsaWRhdGVQaG90b1VwbG9hZCxcbiAgbmFtZSA9ICdBdmF0YXIgUGhvdG8nLFxufSkgPT4ge1xuICBjb25zdCBbaW1hZ2VTcmMsIHNldEltYWdlU3JjXSA9IHVzZVN0YXRlPHN0cmluZz4oZXhpc3RpbmdTcmMpO1xuICBjb25zdCBjaG9vc2VQaG90b0xhYmVsUmVmID0gdXNlUmVmPEhUTUxMYWJlbEVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IG9uQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50OiBSZWFjdC5Gb3JtRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50Py50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgIGNvbnN0IGltYWdlRmlsZWxpc3QgPSB0YXJnZXQ/LmZpbGVzO1xuICAgICAgY29uc3QgaW1hZ2VGaWxlID0gaW1hZ2VGaWxlbGlzdD8uWzBdO1xuXG4gICAgICBpZiAoaW1hZ2VGaWxlbGlzdCkgb25JbWFnZUNoYW5nZWQ/LihpbWFnZUZpbGVsaXN0KTtcbiAgICAgIGlmIChpbWFnZUZpbGUpIHNldEltYWdlU3JjKFVSTC5jcmVhdGVPYmplY3RVUkwoaW1hZ2VGaWxlKSk7XG4gICAgfSxcbiAgICBbc2V0SW1hZ2VTcmMsIG9uSW1hZ2VDaGFuZ2VkXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEZsZXhCb3hcbiAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICB3aWR0aD1cImZpdC1jb250ZW50XCJcbiAgICAgIG1heFdpZHRoPXtweFJlbSgxMjApfVxuICAgICAgYXJpYS1saXZlPVwicG9saXRlXCJcbiAgICA+XG4gICAgICA8U3R5bGVkQXZhdGFyIHNyYz17aW1hZ2VTcmN9IGRpc2FibGVEcm9wc2hhZG93IGFsdD1cIkF2YXRhciBQaG90b1wiIC8+XG4gICAgICA8VGV4dEJ1dHRvblxuICAgICAgICBtdD17eyBfOiA0LCBzbTogMTIgfX1cbiAgICAgICAgb25DbGljaz17KCkgPT4gY2hvb3NlUGhvdG9MYWJlbFJlZi5jdXJyZW50Py5jbGljaygpfVxuICAgICAgPlxuICAgICAgICB7LyogaHR0cHM6Ly9naXRodWIuY29tL2pzeC1lc2xpbnQvZXNsaW50LXBsdWdpbi1qc3gtYTExeS9ibG9iL21haW4vZG9jcy9ydWxlcy9sYWJlbC1oYXMtYXNzb2NpYXRlZC1jb250cm9sLm1kICovfVxuICAgICAgICB7LyogZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGpzeC1hMTF5L2xhYmVsLWhhcy1hc3NvY2lhdGVkLWNvbnRyb2wgKi99XG4gICAgICAgIDxsYWJlbCByZWY9e2Nob29zZVBob3RvTGFiZWxSZWZ9IGh0bWxGb3I9XCJhdmF0YXItY2hvb3NlclwiPlxuICAgICAgICAgIENob29zZSBQaG90b1xuICAgICAgICA8L2xhYmVsPlxuICAgICAgPC9UZXh0QnV0dG9uPlxuXG4gICAgICA8SGlkZGVuSW5wdXRcbiAgICAgICAgdHlwZT1cImZpbGVcIlxuICAgICAgICBpZD1cImF2YXRhci1jaG9vc2VyXCJcbiAgICAgICAgYXJpYS1pbnZhbGlkPXtCb29sZWFuKGVycm9yKX1cbiAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgICB7Li4ucmVnaXN0ZXI/LihuYW1lLCB7XG4gICAgICAgICAgb25DaGFuZ2UsXG4gICAgICAgICAgdmFsaWRhdGUsXG4gICAgICAgICAgcmVxdWlyZWQ6IGZhbHNlLFxuICAgICAgICB9KX1cbiAgICAgIC8+XG4gICAgICB7ZXJyb3IgJiYgPFN0eWxlZEZvcm1FcnJvciByb2xlPVwiYWxlcnRcIj57ZXJyb3J9PC9TdHlsZWRGb3JtRXJyb3I+fVxuICAgIDwvRmxleEJveD5cbiAgKTtcbn07XG5cbmNvbnN0IHZhbGlkYXRlUGhvdG9VcGxvYWQgPSAoZmlsZXM6IEZpbGVMaXN0KTogYm9vbGVhbiB8IHN0cmluZyA9PiB7XG4gIGNvbnN0IE1BWF9GSUxFX1NJWkUgPSA1MjQyODgwO1xuICBjb25zdCBNQVhfRklMRV9TSVpFX0lOX01CID0gNTtcblxuICBjb25zdCBmaWxlID0gZmlsZXM/Lml0ZW0oMCk7XG4gIGlmICghZmlsZSkgcmV0dXJuIHRydWU7XG5cbiAgY29uc3QgeyB0eXBlLCBzaXplIH0gPSBmaWxlO1xuICBpZiAoIVsnaW1hZ2UvanBlZycsICdpbWFnZS9wbmcnXS5pbmNsdWRlcyh0eXBlKSlcbiAgICByZXR1cm4gJ1BsZWFzZSB1cGxvYWQgYSBqcGVnIG9yIHBuZyBmaWxlLic7XG5cbiAgaWYgKHNpemUgPiBNQVhfRklMRV9TSVpFKVxuICAgIHJldHVybiBgU29ycnksIHdlIGNhbm5vdCBhY2NlcHQgZmlsZXMgbGFyZ2VyIHRoYW4gJHtNQVhfRklMRV9TSVpFX0lOX01CfSBNQi5gO1xuXG4gIHJldHVybiB0cnVlO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export const AvatarChooser = ({
-  src: existingSrc,
-  onImageChanged,
-  error,
-  register,
-  validate = validatePhotoUpload,
-  name = 'Avatar Photo'
-}) => {
-  const [imageSrc, setImageSrc] = useState(existingSrc);
-  const choosePhotoLabelRef = useRef(null);
-  const onChange = useCallback(event => {
-    const target = event?.target;
-    const imageFilelist = target?.files;
-    const imageFile = imageFilelist?.[0];
-    if (imageFilelist) onImageChanged?.(imageFilelist);
-    if (imageFile) setImageSrc(URL.createObjectURL(imageFile));
-  }, [setImageSrc, onImageChanged]);
-  return /*#__PURE__*/_jsxs(FlexBox, {
-    alignItems: "center",
-    flexDirection: "column",
-    justifyContent: "center",
-    width: "fit-content",
-    maxWidth: pxRem(120),
-    "aria-live": "polite",
-    children: [/*#__PURE__*/_jsx(StyledAvatar, {
-      src: imageSrc,
-      disableDropshadow: true,
-      alt: "Avatar Photo"
-    }), /*#__PURE__*/_jsx(TextButton, {
-      mt: {
-        _: 4,
-        sm: 12
-      },
-      onClick: () => choosePhotoLabelRef.current?.click(),
-      children: /*#__PURE__*/_jsx("label", {
-        ref: choosePhotoLabelRef,
-        htmlFor: "avatar-chooser",
-        children: "Choose Photo"
-      })
-    }), /*#__PURE__*/_jsx(HiddenInput, {
-      type: "file",
-      id: "avatar-chooser",
-      "aria-invalid": Boolean(error),
-      name: name,
-      onChange: onChange,
-      ...register?.(name, {
-        onChange,
-        validate,
-        required: false
-      })
-    }), error && /*#__PURE__*/_jsx(StyledFormError, {
-      role: "alert",
-      children: error
-    })]
-  });
+const StyledAvatar = /* @__PURE__ */ styled(Avatar, {
+	target: "e1hggsdq0",
+	label: "brand-StyledAvatar"
+})("img{width:", pxRem(baseSize), ";height:", pxRem(baseSize), ";}", theme.breakpoints.sm, "{img{width:", pxRem(smBreakpointSize), ";height:", pxRem(smBreakpointSize), ";}}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0F2YXRhckNob29zZXIvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvQXZhdGFyQ2hvb3Nlci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRmxleEJveCxcbiAgRm9ybUVycm9yLFxuICBJbnB1dCxcbiAgVGV4dEJ1dHRvbixcbiAgVXNlRm9ybVJldHVybixcbiAgVmFsaWRhdGUsXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHB4UmVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXZhdGFyIH0gZnJvbSAnLi4vQXZhdGFyJztcblxudHlwZSBBdmF0YXJDaG9vc2VyUHJvcHMgPSB7XG4gIHNyYzogc3RyaW5nO1xuICBuYW1lPzogc3RyaW5nO1xuICByZWdpc3Rlcj86IFVzZUZvcm1SZXR1cm5bJ3JlZ2lzdGVyJ107XG4gIG9uSW1hZ2VDaGFuZ2VkPzogKGltYWdlRmlsZUxpc3Q6IEZpbGVMaXN0KSA9PiB2b2lkO1xuICB2YWxpZGF0ZT86XG4gICAgfCBWYWxpZGF0ZTxGaWxlTGlzdCwgW0ZpbGVMaXN0XT5cbiAgICB8IFJlY29yZDxzdHJpbmcsIFZhbGlkYXRlPEZpbGVMaXN0LCBbRmlsZUxpc3RdPj47XG4gIGVycm9yPzogc3RyaW5nO1xufTtcblxuY29uc3QgYmFzZVNpemUgPSA3NTtcbmNvbnN0IHNtQnJlYWtwb2ludFNpemUgPSAxMjA7XG5cbmNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChBdmF0YXIpYFxuICBpbWcge1xuICAgIHdpZHRoOiAke3B4UmVtKGJhc2VTaXplKX07XG4gICAgaGVpZ2h0OiAke3B4UmVtKGJhc2VTaXplKX07XG4gIH1cblxuICAke3RoZW1lLmJyZWFrcG9pbnRzLnNtfSB7XG4gICAgaW1nIHtcbiAgICAgIHdpZHRoOiAke3B4UmVtKHNtQnJlYWtwb2ludFNpemUpfTtcbiAgICAgIGhlaWdodDogJHtweFJlbShzbUJyZWFrcG9pbnRTaXplKX07XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBIaWRkZW5JbnB1dCA9IHN0eWxlZChJbnB1dClgXG4gIGRpc3BsYXk6IG5vbmU7XG5gO1xuXG5jb25zdCBTdHlsZWRGb3JtRXJyb3IgPSBzdHlsZWQoRm9ybUVycm9yKWBcbiAgcG9zaXRpb246IGluaXRpYWw7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXJDaG9vc2VyOiBSZWFjdC5GQzxBdmF0YXJDaG9vc2VyUHJvcHM+ID0gKHtcbiAgc3JjOiBleGlzdGluZ1NyYyxcbiAgb25JbWFnZUNoYW5nZWQsXG4gIGVycm9yLFxuICByZWdpc3RlcixcbiAgdmFsaWRhdGUgPSB2YWxpZGF0ZVBob3RvVXBsb2FkLFxuICBuYW1lID0gJ0F2YXRhciBQaG90bycsXG59KSA9PiB7XG4gIGNvbnN0IFtpbWFnZVNyYywgc2V0SW1hZ2VTcmNdID0gdXNlU3RhdGU8c3RyaW5nPihleGlzdGluZ1NyYyk7XG4gIGNvbnN0IGNob29zZVBob3RvTGFiZWxSZWYgPSB1c2VSZWY8SFRNTExhYmVsRWxlbWVudD4obnVsbCk7XG5cbiAgY29uc3Qgb25DaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQ/LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xuICAgICAgY29uc3QgaW1hZ2VGaWxlbGlzdCA9IHRhcmdldD8uZmlsZXM7XG4gICAgICBjb25zdCBpbWFnZUZpbGUgPSBpbWFnZUZpbGVsaXN0Py5bMF07XG5cbiAgICAgIGlmIChpbWFnZUZpbGVsaXN0KSBvbkltYWdlQ2hhbmdlZD8uKGltYWdlRmlsZWxpc3QpO1xuICAgICAgaWYgKGltYWdlRmlsZSkgc2V0SW1hZ2VTcmMoVVJMLmNyZWF0ZU9iamVjdFVSTChpbWFnZUZpbGUpKTtcbiAgICB9LFxuICAgIFtzZXRJbWFnZVNyYywgb25JbWFnZUNoYW5nZWRdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RmxleEJveFxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgIHdpZHRoPVwiZml0LWNvbnRlbnRcIlxuICAgICAgbWF4V2lkdGg9e3B4UmVtKDEyMCl9XG4gICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgID5cbiAgICAgIDxTdHlsZWRBdmF0YXIgc3JjPXtpbWFnZVNyY30gZGlzYWJsZURyb3BzaGFkb3cgYWx0PVwiQXZhdGFyIFBob3RvXCIgLz5cbiAgICAgIDxUZXh0QnV0dG9uXG4gICAgICAgIG10PXt7IF86IDQsIHNtOiAxMiB9fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBjaG9vc2VQaG90b0xhYmVsUmVmLmN1cnJlbnQ/LmNsaWNrKCl9XG4gICAgICA+XG4gICAgICAgIHsvKiBodHRwczovL2dpdGh1Yi5jb20vanN4LWVzbGludC9lc2xpbnQtcGx1Z2luLWpzeC1hMTF5L2Jsb2IvbWFpbi9kb2NzL3J1bGVzL2xhYmVsLWhhcy1hc3NvY2lhdGVkLWNvbnRyb2wubWQgKi99XG4gICAgICAgIHsvKiBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUganN4LWExMXkvbGFiZWwtaGFzLWFzc29jaWF0ZWQtY29udHJvbCAqL31cbiAgICAgICAgPGxhYmVsIHJlZj17Y2hvb3NlUGhvdG9MYWJlbFJlZn0gaHRtbEZvcj1cImF2YXRhci1jaG9vc2VyXCI+XG4gICAgICAgICAgQ2hvb3NlIFBob3RvXG4gICAgICAgIDwvbGFiZWw+XG4gICAgICA8L1RleHRCdXR0b24+XG5cbiAgICAgIDxIaWRkZW5JbnB1dFxuICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgIGlkPVwiYXZhdGFyLWNob29zZXJcIlxuICAgICAgICBhcmlhLWludmFsaWQ9e0Jvb2xlYW4oZXJyb3IpfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAgIHsuLi5yZWdpc3Rlcj8uKG5hbWUsIHtcbiAgICAgICAgICBvbkNoYW5nZSxcbiAgICAgICAgICB2YWxpZGF0ZSxcbiAgICAgICAgICByZXF1aXJlZDogZmFsc2UsXG4gICAgICAgIH0pfVxuICAgICAgLz5cbiAgICAgIHtlcnJvciAmJiA8U3R5bGVkRm9ybUVycm9yIHJvbGU9XCJhbGVydFwiPntlcnJvcn08L1N0eWxlZEZvcm1FcnJvcj59XG4gICAgPC9GbGV4Qm94PlxuICApO1xufTtcblxuY29uc3QgdmFsaWRhdGVQaG90b1VwbG9hZCA9IChmaWxlczogRmlsZUxpc3QpOiBib29sZWFuIHwgc3RyaW5nID0+IHtcbiAgY29uc3QgTUFYX0ZJTEVfU0laRSA9IDUyNDI4ODA7XG4gIGNvbnN0IE1BWF9GSUxFX1NJWkVfSU5fTUIgPSA1O1xuXG4gIGNvbnN0IGZpbGUgPSBmaWxlcz8uaXRlbSgwKTtcbiAgaWYgKCFmaWxlKSByZXR1cm4gdHJ1ZTtcblxuICBjb25zdCB7IHR5cGUsIHNpemUgfSA9IGZpbGU7XG4gIGlmICghWydpbWFnZS9qcGVnJywgJ2ltYWdlL3BuZyddLmluY2x1ZGVzKHR5cGUpKVxuICAgIHJldHVybiAnUGxlYXNlIHVwbG9hZCBhIGpwZWcgb3IgcG5nIGZpbGUuJztcblxuICBpZiAoc2l6ZSA+IE1BWF9GSUxFX1NJWkUpXG4gICAgcmV0dXJuIGBTb3JyeSwgd2UgY2Fubm90IGFjY2VwdCBmaWxlcyBsYXJnZXIgdGhhbiAke01BWF9GSUxFX1NJWkVfSU5fTUJ9IE1CLmA7XG5cbiAgcmV0dXJuIHRydWU7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCcUIifQ== */");
+const HiddenInput = /* @__PURE__ */ styled(Input, {
+	target: "e1hggsdq1",
+	label: "brand-HiddenInput"
+})("display:none;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0F2YXRhckNob29zZXIvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvQXZhdGFyQ2hvb3Nlci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRmxleEJveCxcbiAgRm9ybUVycm9yLFxuICBJbnB1dCxcbiAgVGV4dEJ1dHRvbixcbiAgVXNlRm9ybVJldHVybixcbiAgVmFsaWRhdGUsXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHB4UmVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXZhdGFyIH0gZnJvbSAnLi4vQXZhdGFyJztcblxudHlwZSBBdmF0YXJDaG9vc2VyUHJvcHMgPSB7XG4gIHNyYzogc3RyaW5nO1xuICBuYW1lPzogc3RyaW5nO1xuICByZWdpc3Rlcj86IFVzZUZvcm1SZXR1cm5bJ3JlZ2lzdGVyJ107XG4gIG9uSW1hZ2VDaGFuZ2VkPzogKGltYWdlRmlsZUxpc3Q6IEZpbGVMaXN0KSA9PiB2b2lkO1xuICB2YWxpZGF0ZT86XG4gICAgfCBWYWxpZGF0ZTxGaWxlTGlzdCwgW0ZpbGVMaXN0XT5cbiAgICB8IFJlY29yZDxzdHJpbmcsIFZhbGlkYXRlPEZpbGVMaXN0LCBbRmlsZUxpc3RdPj47XG4gIGVycm9yPzogc3RyaW5nO1xufTtcblxuY29uc3QgYmFzZVNpemUgPSA3NTtcbmNvbnN0IHNtQnJlYWtwb2ludFNpemUgPSAxMjA7XG5cbmNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChBdmF0YXIpYFxuICBpbWcge1xuICAgIHdpZHRoOiAke3B4UmVtKGJhc2VTaXplKX07XG4gICAgaGVpZ2h0OiAke3B4UmVtKGJhc2VTaXplKX07XG4gIH1cblxuICAke3RoZW1lLmJyZWFrcG9pbnRzLnNtfSB7XG4gICAgaW1nIHtcbiAgICAgIHdpZHRoOiAke3B4UmVtKHNtQnJlYWtwb2ludFNpemUpfTtcbiAgICAgIGhlaWdodDogJHtweFJlbShzbUJyZWFrcG9pbnRTaXplKX07XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBIaWRkZW5JbnB1dCA9IHN0eWxlZChJbnB1dClgXG4gIGRpc3BsYXk6IG5vbmU7XG5gO1xuXG5jb25zdCBTdHlsZWRGb3JtRXJyb3IgPSBzdHlsZWQoRm9ybUVycm9yKWBcbiAgcG9zaXRpb246IGluaXRpYWw7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXJDaG9vc2VyOiBSZWFjdC5GQzxBdmF0YXJDaG9vc2VyUHJvcHM+ID0gKHtcbiAgc3JjOiBleGlzdGluZ1NyYyxcbiAgb25JbWFnZUNoYW5nZWQsXG4gIGVycm9yLFxuICByZWdpc3RlcixcbiAgdmFsaWRhdGUgPSB2YWxpZGF0ZVBob3RvVXBsb2FkLFxuICBuYW1lID0gJ0F2YXRhciBQaG90bycsXG59KSA9PiB7XG4gIGNvbnN0IFtpbWFnZVNyYywgc2V0SW1hZ2VTcmNdID0gdXNlU3RhdGU8c3RyaW5nPihleGlzdGluZ1NyYyk7XG4gIGNvbnN0IGNob29zZVBob3RvTGFiZWxSZWYgPSB1c2VSZWY8SFRNTExhYmVsRWxlbWVudD4obnVsbCk7XG5cbiAgY29uc3Qgb25DaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQ/LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xuICAgICAgY29uc3QgaW1hZ2VGaWxlbGlzdCA9IHRhcmdldD8uZmlsZXM7XG4gICAgICBjb25zdCBpbWFnZUZpbGUgPSBpbWFnZUZpbGVsaXN0Py5bMF07XG5cbiAgICAgIGlmIChpbWFnZUZpbGVsaXN0KSBvbkltYWdlQ2hhbmdlZD8uKGltYWdlRmlsZWxpc3QpO1xuICAgICAgaWYgKGltYWdlRmlsZSkgc2V0SW1hZ2VTcmMoVVJMLmNyZWF0ZU9iamVjdFVSTChpbWFnZUZpbGUpKTtcbiAgICB9LFxuICAgIFtzZXRJbWFnZVNyYywgb25JbWFnZUNoYW5nZWRdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RmxleEJveFxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgIHdpZHRoPVwiZml0LWNvbnRlbnRcIlxuICAgICAgbWF4V2lkdGg9e3B4UmVtKDEyMCl9XG4gICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgID5cbiAgICAgIDxTdHlsZWRBdmF0YXIgc3JjPXtpbWFnZVNyY30gZGlzYWJsZURyb3BzaGFkb3cgYWx0PVwiQXZhdGFyIFBob3RvXCIgLz5cbiAgICAgIDxUZXh0QnV0dG9uXG4gICAgICAgIG10PXt7IF86IDQsIHNtOiAxMiB9fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBjaG9vc2VQaG90b0xhYmVsUmVmLmN1cnJlbnQ/LmNsaWNrKCl9XG4gICAgICA+XG4gICAgICAgIHsvKiBodHRwczovL2dpdGh1Yi5jb20vanN4LWVzbGludC9lc2xpbnQtcGx1Z2luLWpzeC1hMTF5L2Jsb2IvbWFpbi9kb2NzL3J1bGVzL2xhYmVsLWhhcy1hc3NvY2lhdGVkLWNvbnRyb2wubWQgKi99XG4gICAgICAgIHsvKiBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUganN4LWExMXkvbGFiZWwtaGFzLWFzc29jaWF0ZWQtY29udHJvbCAqL31cbiAgICAgICAgPGxhYmVsIHJlZj17Y2hvb3NlUGhvdG9MYWJlbFJlZn0gaHRtbEZvcj1cImF2YXRhci1jaG9vc2VyXCI+XG4gICAgICAgICAgQ2hvb3NlIFBob3RvXG4gICAgICAgIDwvbGFiZWw+XG4gICAgICA8L1RleHRCdXR0b24+XG5cbiAgICAgIDxIaWRkZW5JbnB1dFxuICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgIGlkPVwiYXZhdGFyLWNob29zZXJcIlxuICAgICAgICBhcmlhLWludmFsaWQ9e0Jvb2xlYW4oZXJyb3IpfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAgIHsuLi5yZWdpc3Rlcj8uKG5hbWUsIHtcbiAgICAgICAgICBvbkNoYW5nZSxcbiAgICAgICAgICB2YWxpZGF0ZSxcbiAgICAgICAgICByZXF1aXJlZDogZmFsc2UsXG4gICAgICAgIH0pfVxuICAgICAgLz5cbiAgICAgIHtlcnJvciAmJiA8U3R5bGVkRm9ybUVycm9yIHJvbGU9XCJhbGVydFwiPntlcnJvcn08L1N0eWxlZEZvcm1FcnJvcj59XG4gICAgPC9GbGV4Qm94PlxuICApO1xufTtcblxuY29uc3QgdmFsaWRhdGVQaG90b1VwbG9hZCA9IChmaWxlczogRmlsZUxpc3QpOiBib29sZWFuIHwgc3RyaW5nID0+IHtcbiAgY29uc3QgTUFYX0ZJTEVfU0laRSA9IDUyNDI4ODA7XG4gIGNvbnN0IE1BWF9GSUxFX1NJWkVfSU5fTUIgPSA1O1xuXG4gIGNvbnN0IGZpbGUgPSBmaWxlcz8uaXRlbSgwKTtcbiAgaWYgKCFmaWxlKSByZXR1cm4gdHJ1ZTtcblxuICBjb25zdCB7IHR5cGUsIHNpemUgfSA9IGZpbGU7XG4gIGlmICghWydpbWFnZS9qcGVnJywgJ2ltYWdlL3BuZyddLmluY2x1ZGVzKHR5cGUpKVxuICAgIHJldHVybiAnUGxlYXNlIHVwbG9hZCBhIGpwZWcgb3IgcG5nIGZpbGUuJztcblxuICBpZiAoc2l6ZSA+IE1BWF9GSUxFX1NJWkUpXG4gICAgcmV0dXJuIGBTb3JyeSwgd2UgY2Fubm90IGFjY2VwdCBmaWxlcyBsYXJnZXIgdGhhbiAke01BWF9GSUxFX1NJWkVfSU5fTUJ9IE1CLmA7XG5cbiAgcmV0dXJuIHRydWU7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDb0IifQ== */");
+const StyledFormError = /* @__PURE__ */ styled(FormError, {
+	target: "e1hggsdq2",
+	label: "brand-StyledFormError"
+})("position:initial;text-align:center;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0F2YXRhckNob29zZXIvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvQXZhdGFyQ2hvb3Nlci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRmxleEJveCxcbiAgRm9ybUVycm9yLFxuICBJbnB1dCxcbiAgVGV4dEJ1dHRvbixcbiAgVXNlRm9ybVJldHVybixcbiAgVmFsaWRhdGUsXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHB4UmVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXZhdGFyIH0gZnJvbSAnLi4vQXZhdGFyJztcblxudHlwZSBBdmF0YXJDaG9vc2VyUHJvcHMgPSB7XG4gIHNyYzogc3RyaW5nO1xuICBuYW1lPzogc3RyaW5nO1xuICByZWdpc3Rlcj86IFVzZUZvcm1SZXR1cm5bJ3JlZ2lzdGVyJ107XG4gIG9uSW1hZ2VDaGFuZ2VkPzogKGltYWdlRmlsZUxpc3Q6IEZpbGVMaXN0KSA9PiB2b2lkO1xuICB2YWxpZGF0ZT86XG4gICAgfCBWYWxpZGF0ZTxGaWxlTGlzdCwgW0ZpbGVMaXN0XT5cbiAgICB8IFJlY29yZDxzdHJpbmcsIFZhbGlkYXRlPEZpbGVMaXN0LCBbRmlsZUxpc3RdPj47XG4gIGVycm9yPzogc3RyaW5nO1xufTtcblxuY29uc3QgYmFzZVNpemUgPSA3NTtcbmNvbnN0IHNtQnJlYWtwb2ludFNpemUgPSAxMjA7XG5cbmNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChBdmF0YXIpYFxuICBpbWcge1xuICAgIHdpZHRoOiAke3B4UmVtKGJhc2VTaXplKX07XG4gICAgaGVpZ2h0OiAke3B4UmVtKGJhc2VTaXplKX07XG4gIH1cblxuICAke3RoZW1lLmJyZWFrcG9pbnRzLnNtfSB7XG4gICAgaW1nIHtcbiAgICAgIHdpZHRoOiAke3B4UmVtKHNtQnJlYWtwb2ludFNpemUpfTtcbiAgICAgIGhlaWdodDogJHtweFJlbShzbUJyZWFrcG9pbnRTaXplKX07XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBIaWRkZW5JbnB1dCA9IHN0eWxlZChJbnB1dClgXG4gIGRpc3BsYXk6IG5vbmU7XG5gO1xuXG5jb25zdCBTdHlsZWRGb3JtRXJyb3IgPSBzdHlsZWQoRm9ybUVycm9yKWBcbiAgcG9zaXRpb246IGluaXRpYWw7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXJDaG9vc2VyOiBSZWFjdC5GQzxBdmF0YXJDaG9vc2VyUHJvcHM+ID0gKHtcbiAgc3JjOiBleGlzdGluZ1NyYyxcbiAgb25JbWFnZUNoYW5nZWQsXG4gIGVycm9yLFxuICByZWdpc3RlcixcbiAgdmFsaWRhdGUgPSB2YWxpZGF0ZVBob3RvVXBsb2FkLFxuICBuYW1lID0gJ0F2YXRhciBQaG90bycsXG59KSA9PiB7XG4gIGNvbnN0IFtpbWFnZVNyYywgc2V0SW1hZ2VTcmNdID0gdXNlU3RhdGU8c3RyaW5nPihleGlzdGluZ1NyYyk7XG4gIGNvbnN0IGNob29zZVBob3RvTGFiZWxSZWYgPSB1c2VSZWY8SFRNTExhYmVsRWxlbWVudD4obnVsbCk7XG5cbiAgY29uc3Qgb25DaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQ/LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xuICAgICAgY29uc3QgaW1hZ2VGaWxlbGlzdCA9IHRhcmdldD8uZmlsZXM7XG4gICAgICBjb25zdCBpbWFnZUZpbGUgPSBpbWFnZUZpbGVsaXN0Py5bMF07XG5cbiAgICAgIGlmIChpbWFnZUZpbGVsaXN0KSBvbkltYWdlQ2hhbmdlZD8uKGltYWdlRmlsZWxpc3QpO1xuICAgICAgaWYgKGltYWdlRmlsZSkgc2V0SW1hZ2VTcmMoVVJMLmNyZWF0ZU9iamVjdFVSTChpbWFnZUZpbGUpKTtcbiAgICB9LFxuICAgIFtzZXRJbWFnZVNyYywgb25JbWFnZUNoYW5nZWRdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RmxleEJveFxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgIHdpZHRoPVwiZml0LWNvbnRlbnRcIlxuICAgICAgbWF4V2lkdGg9e3B4UmVtKDEyMCl9XG4gICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgID5cbiAgICAgIDxTdHlsZWRBdmF0YXIgc3JjPXtpbWFnZVNyY30gZGlzYWJsZURyb3BzaGFkb3cgYWx0PVwiQXZhdGFyIFBob3RvXCIgLz5cbiAgICAgIDxUZXh0QnV0dG9uXG4gICAgICAgIG10PXt7IF86IDQsIHNtOiAxMiB9fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBjaG9vc2VQaG90b0xhYmVsUmVmLmN1cnJlbnQ/LmNsaWNrKCl9XG4gICAgICA+XG4gICAgICAgIHsvKiBodHRwczovL2dpdGh1Yi5jb20vanN4LWVzbGludC9lc2xpbnQtcGx1Z2luLWpzeC1hMTF5L2Jsb2IvbWFpbi9kb2NzL3J1bGVzL2xhYmVsLWhhcy1hc3NvY2lhdGVkLWNvbnRyb2wubWQgKi99XG4gICAgICAgIHsvKiBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUganN4LWExMXkvbGFiZWwtaGFzLWFzc29jaWF0ZWQtY29udHJvbCAqL31cbiAgICAgICAgPGxhYmVsIHJlZj17Y2hvb3NlUGhvdG9MYWJlbFJlZn0gaHRtbEZvcj1cImF2YXRhci1jaG9vc2VyXCI+XG4gICAgICAgICAgQ2hvb3NlIFBob3RvXG4gICAgICAgIDwvbGFiZWw+XG4gICAgICA8L1RleHRCdXR0b24+XG5cbiAgICAgIDxIaWRkZW5JbnB1dFxuICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgIGlkPVwiYXZhdGFyLWNob29zZXJcIlxuICAgICAgICBhcmlhLWludmFsaWQ9e0Jvb2xlYW4oZXJyb3IpfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAgIHsuLi5yZWdpc3Rlcj8uKG5hbWUsIHtcbiAgICAgICAgICBvbkNoYW5nZSxcbiAgICAgICAgICB2YWxpZGF0ZSxcbiAgICAgICAgICByZXF1aXJlZDogZmFsc2UsXG4gICAgICAgIH0pfVxuICAgICAgLz5cbiAgICAgIHtlcnJvciAmJiA8U3R5bGVkRm9ybUVycm9yIHJvbGU9XCJhbGVydFwiPntlcnJvcn08L1N0eWxlZEZvcm1FcnJvcj59XG4gICAgPC9GbGV4Qm94PlxuICApO1xufTtcblxuY29uc3QgdmFsaWRhdGVQaG90b1VwbG9hZCA9IChmaWxlczogRmlsZUxpc3QpOiBib29sZWFuIHwgc3RyaW5nID0+IHtcbiAgY29uc3QgTUFYX0ZJTEVfU0laRSA9IDUyNDI4ODA7XG4gIGNvbnN0IE1BWF9GSUxFX1NJWkVfSU5fTUIgPSA1O1xuXG4gIGNvbnN0IGZpbGUgPSBmaWxlcz8uaXRlbSgwKTtcbiAgaWYgKCFmaWxlKSByZXR1cm4gdHJ1ZTtcblxuICBjb25zdCB7IHR5cGUsIHNpemUgfSA9IGZpbGU7XG4gIGlmICghWydpbWFnZS9qcGVnJywgJ2ltYWdlL3BuZyddLmluY2x1ZGVzKHR5cGUpKVxuICAgIHJldHVybiAnUGxlYXNlIHVwbG9hZCBhIGpwZWcgb3IgcG5nIGZpbGUuJztcblxuICBpZiAoc2l6ZSA+IE1BWF9GSUxFX1NJWkUpXG4gICAgcmV0dXJuIGBTb3JyeSwgd2UgY2Fubm90IGFjY2VwdCBmaWxlcyBsYXJnZXIgdGhhbiAke01BWF9GSUxFX1NJWkVfSU5fTUJ9IE1CLmA7XG5cbiAgcmV0dXJuIHRydWU7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDd0IifQ== */");
+const AvatarChooser = ({ src: existingSrc, onImageChanged, error, register, validate = validatePhotoUpload, name = "Avatar Photo" }) => {
+	const [imageSrc, setImageSrc] = useState(existingSrc);
+	const choosePhotoLabelRef = useRef(null);
+	const onChange = useCallback((event) => {
+		const imageFilelist = (event?.target)?.files;
+		const imageFile = imageFilelist?.[0];
+		if (imageFilelist) onImageChanged?.(imageFilelist);
+		if (imageFile) setImageSrc(URL.createObjectURL(imageFile));
+	}, [setImageSrc, onImageChanged]);
+	return /* @__PURE__ */ React$1.createElement(FlexBox, {
+		alignItems: "center",
+		flexDirection: "column",
+		justifyContent: "center",
+		width: "fit-content",
+		maxWidth: pxRem(120),
+		"aria-live": "polite"
+	}, /* @__PURE__ */ React$1.createElement(StyledAvatar, {
+		src: imageSrc,
+		disableDropshadow: true,
+		alt: "Avatar Photo"
+	}), /* @__PURE__ */ React$1.createElement(TextButton, {
+		mt: {
+			_: 4,
+			sm: 12
+		},
+		onClick: () => choosePhotoLabelRef.current?.click()
+	}, /* @__PURE__ */ React$1.createElement("label", {
+		ref: choosePhotoLabelRef,
+		htmlFor: "avatar-chooser"
+	}, "Choose Photo")), /* @__PURE__ */ React$1.createElement(HiddenInput, {
+		type: "file",
+		id: "avatar-chooser",
+		"aria-invalid": Boolean(error),
+		name,
+		onChange,
+		...register?.(name, {
+			onChange,
+			validate,
+			required: false
+		})
+	}), error && /* @__PURE__ */ React$1.createElement(StyledFormError, { role: "alert" }, error));
 };
-const validatePhotoUpload = files => {
-  const MAX_FILE_SIZE = 5242880;
-  const MAX_FILE_SIZE_IN_MB = 5;
-  const file = files?.item(0);
-  if (!file) return true;
-  const {
-    type,
-    size
-  } = file;
-  if (!['image/jpeg', 'image/png'].includes(type)) return 'Please upload a jpeg or png file.';
-  if (size > MAX_FILE_SIZE) return `Sorry, we cannot accept files larger than ${MAX_FILE_SIZE_IN_MB} MB.`;
-  return true;
-};
+const validatePhotoUpload = (files) => {
+	const MAX_FILE_SIZE = 5242880;
+	const MAX_FILE_SIZE_IN_MB = 5;
+	const file = files?.item(0);
+	if (!file) return true;
+	const { type, size } = file;
+	if (!["image/jpeg", "image/png"].includes(type)) return "Please upload a jpeg or png file.";
+	if (size > MAX_FILE_SIZE) return `Sorry, we cannot accept files larger than ${MAX_FILE_SIZE_IN_MB} MB.`;
+	return true;
+};
+
+//#endregion
+export { AvatarChooser };
+//# sourceMappingURL=index.js.map

package/dist/AvatarChooser/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FlexBox","FormError","Input","TextButton","pxRem","theme","styled","useCallback","useRef","useState","React","Avatar","baseSize","smBreakpointSize","StyledAvatar","breakpoints","sm","HiddenInput","StyledFormError","AvatarChooser","src","existingSrc","onImageChanged","error","register","validate","validatePhotoUpload","name","imageSrc","setImageSrc","choosePhotoLabelRef","onChange","event","target","imageFilelist","files","imageFile","URL","createObjectURL","alignItems","flexDirection","justifyContent","width","maxWidth","aria-live","disableDropshadow","alt","mt","_","onClick","current","click","label","ref","htmlFor","type","id","aria-invalid","Boolean","required","role","MAX_FILE_SIZE","MAX_FILE_SIZE_IN_MB","file","item","size","includes"],"sources":["../../src/AvatarChooser/index.tsx"],"sourcesContent":["import {\n  FlexBox,\n  FormError,\n  Input,\n  TextButton,\n  UseFormReturn,\n  Validate,\n} from '@codecademy/gamut';\nimport { pxRem, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { Avatar } from '../Avatar';\n\ntype AvatarChooserProps = {\n  src: string;\n  name?: string;\n  register?: UseFormReturn['register'];\n  onImageChanged?: (imageFileList: FileList) => void;\n  validate?:\n    | Validate<FileList, [FileList]>\n    | Record<string, Validate<FileList, [FileList]>>;\n  error?: string;\n};\n\nconst baseSize = 75;\nconst smBreakpointSize = 120;\n\nconst StyledAvatar = styled(Avatar)`\n  img {\n    width: ${pxRem(baseSize)};\n    height: ${pxRem(baseSize)};\n  }\n\n  ${theme.breakpoints.sm} {\n    img {\n      width: ${pxRem(smBreakpointSize)};\n      height: ${pxRem(smBreakpointSize)};\n    }\n  }\n`;\n\nconst HiddenInput = styled(Input)`\n  display: none;\n`;\n\nconst StyledFormError = styled(FormError)`\n  position: initial;\n  text-align: center;\n`;\n\nexport const AvatarChooser: React.FC<AvatarChooserProps> = ({\n  src: existingSrc,\n  onImageChanged,\n  error,\n  register,\n  validate = validatePhotoUpload,\n  name = 'Avatar Photo',\n}) => {\n  const [imageSrc, setImageSrc] = useState<string>(existingSrc);\n  const choosePhotoLabelRef = useRef<HTMLLabelElement>(null);\n\n  const onChange = useCallback(\n    (event: React.FormEvent<HTMLInputElement>) => {\n      const target = event?.target as HTMLInputElement;\n      const imageFilelist = target?.files;\n      const imageFile = imageFilelist?.[0];\n\n      if (imageFilelist) onImageChanged?.(imageFilelist);\n      if (imageFile) setImageSrc(URL.createObjectURL(imageFile));\n    },\n    [setImageSrc, onImageChanged]\n  );\n\n  return (\n    <FlexBox\n      alignItems=\"center\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      width=\"fit-content\"\n      maxWidth={pxRem(120)}\n      aria-live=\"polite\"\n    >\n      <StyledAvatar src={imageSrc} disableDropshadow alt=\"Avatar Photo\" />\n      <TextButton\n        mt={{ _: 4, sm: 12 }}\n        onClick={() => choosePhotoLabelRef.current?.click()}\n      >\n        {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md */}\n        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n        <label ref={choosePhotoLabelRef} htmlFor=\"avatar-chooser\">\n          Choose Photo\n        </label>\n      </TextButton>\n\n      <HiddenInput\n        type=\"file\"\n        id=\"avatar-chooser\"\n        aria-invalid={Boolean(error)}\n        name={name}\n        onChange={onChange}\n        {...register?.(name, {\n          onChange,\n          validate,\n          required: false,\n        })}\n      />\n      {error && <StyledFormError role=\"alert\">{error}</StyledFormError>}\n    </FlexBox>\n  );\n};\n\nconst validatePhotoUpload = (files: FileList): boolean | string => {\n  const MAX_FILE_SIZE = 5242880;\n  const MAX_FILE_SIZE_IN_MB = 5;\n\n  const file = files?.item(0);\n  if (!file) return true;\n\n  const { type, size } = file;\n  if (!['image/jpeg', 'image/png'].includes(type))\n    return 'Please upload a jpeg or png file.';\n\n  if (size > MAX_FILE_SIZE)\n    return `Sorry, we cannot accept files larger than ${MAX_FILE_SIZE_IN_MB} MB.`;\n\n  return true;\n};\n"],"mappings":";;;;;;;;AA0BA,MAAMY,WAAW;AACjB,MAAMC,mBAAmB;AAEzB,MAAMC,eAAeR,uBAAOK,QAAAA;;;iBAEfP,MAAMQ,SAAAA,EAAAA,YACLR,MAAMQ,SAAAA,EAAAA,MAGhBP,MAAMU,YAAYC,IAAE,eAETZ,MAAMS,iBAAAA,EAAAA,YACLT,MAAMS,iBAAAA,EAAAA,OAAAA,k4JAAAA;AAKtB,MAAMI,cAAcX,uBAAOJ,OAAAA;;;;AAI3B,MAAMgB,kBAAkBZ,uBAAOL,WAAAA;;;;AAK/B,MAAakB,iBAA+C,EAC1DC,KAAKC,aACLC,gBACAC,OACAC,UACAC,WAAWC,qBACXC,OAAO,qBACR;CACC,MAAM,CAACC,UAAUC,eAAepB,SAAiBY,YAAAA;CACjD,MAAMS,sBAAsBtB,OAAyB,KAAA;CAErD,MAAMuB,WAAWxB,aACdyB,UAAAA;EAEC,MAAME,iBADSF,OAAOC,SACQE;EAC9B,MAAMC,YAAYF,gBAAgB;AAElC,MAAIA,cAAeZ,kBAAiBY,cAAAA;AACpC,MAAIE,UAAWP,aAAYQ,IAAIC,gBAAgBF,UAAAA,CAAAA;IAEjD,CAACP,aAAaP,eAAe,CAAA;AAG/B,QACE,wBAAA,cAACtB,SAAAA;EACCuC,YAAW;EACXC,eAAc;EACdC,gBAAe;EACfC,OAAM;EACNC,UAAUvC,MAAM,IAAA;EAChBwC,aAAU;IAEV,wBAAA,cAAC9B,cAAAA;EAAaM,KAAKQ;EAAUiB,mBAAAA;EAAkBC,KAAI;KACnD,wBAAA,cAAC3C,YAAAA;EACC4C,IAAI;GAAEC,GAAG;GAAGhC,IAAI;GAAG;EACnBiC,eAAenB,oBAAoBoB,SAASC,OAAAA;IAI5C,wBAAA,cAACC,SAAAA;EAAMC,KAAKvB;EAAqBwB,SAAQ;IAAiB,eAAA,CAAA,EAK5D,wBAAA,cAACrC,aAAAA;EACCsC,MAAK;EACLC,IAAG;EACHC,gBAAcC,QAAQnC,MAAAA;EAChBI;EACII;EACT,GAAGP,WAAWG,MAAM;GACnBI;GACAN;GACAkC,UAAU;GACZ,CAAE;KAEHpC,SAAS,wBAAA,cAACL,iBAAAA,EAAgB0C,MAAK,WAASrC,MAAAA,CAAAA;;AAK/C,MAAMG,uBAAuBS,UAAAA;CAC3B,MAAM0B,gBAAgB;CACtB,MAAMC,sBAAsB;CAE5B,MAAMC,OAAO5B,OAAO6B,KAAK,EAAA;AACzB,KAAI,CAACD,KAAM,QAAO;CAElB,MAAM,EAAER,MAAMU,SAASF;AACvB,KAAI,CAAC,CAAC,cAAc,YAAY,CAACG,SAASX,KAAAA,CACxC,QAAO;AAET,KAAIU,OAAOJ,cACT,QAAO,6CAA6CC,oBAAoB;AAE1E,QAAO"}

package/dist/BackToTopAnchor/index.cjs

@@ -0,0 +1,31 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/BackToTopAnchor/index.tsx
+const BackToTopAnchor = ({ targetId, showIcon = true, size = "base", onClick, variant }) => {
+	return /* @__PURE__ */ React.createElement(_codecademy_gamut.Anchor, {
+		onClick: () => {
+			document.getElementById(targetId)?.focus({ preventScroll: true });
+			window.scrollTo({
+				top: 0,
+				behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? void 0 : "smooth"
+			});
+			onClick?.();
+		},
+		variant: variant || "interface",
+		fontSize: size === "small" ? 14 : 18,
+		alignSelf: "end",
+		mt: 64
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		alignItems: "center",
+		justifyContent: "center"
+	}, showIcon && /* @__PURE__ */ React.createElement(_codecademy_gamut_icons.ArrowUpIcon, {
+		size: 24,
+		mr: 8
+	}), " Back to top"));
+};
+
+//#endregion
+exports.BackToTopAnchor = BackToTopAnchor;
+//# sourceMappingURL=index.cjs.map

package/dist/BackToTopAnchor/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Anchor","FlexBox","ArrowUpIcon","BackToTopAnchor","targetId","showIcon","size","onClick","variant","document","getElementById","focus","preventScroll","window","scrollTo","top","behavior","matchMedia","matches","undefined","fontSize","alignSelf","mt","alignItems","justifyContent","mr"],"sources":["../../src/BackToTopAnchor/index.tsx"],"sourcesContent":["import { Anchor, FlexBox } from '@codecademy/gamut';\nimport { ArrowUpIcon } from '@codecademy/gamut-icons';\n\ntype BackToTopAnchorProps = {\n  /** The id of the element to scroll to */\n  targetId: string;\n  /** Whether to show the arrow icon */\n  showIcon?: boolean;\n  /** The size of the anchor */\n  size?: 'small' | 'base';\n  /**  The onClick here usually contains tracking data */\n  onClick?: () => void;\n  variant?: false | 'inline' | 'standard' | 'interface';\n};\n\nexport const BackToTopAnchor: React.FC<BackToTopAnchorProps> = ({\n  targetId,\n  showIcon = true,\n  size = 'base',\n  onClick,\n  variant,\n}) => {\n  return (\n    <Anchor\n      onClick={() => {\n        // move focus to page title without scrolling page\n        document.getElementById(targetId)?.focus({ preventScroll: true });\n\n        // scroll to top (or jump to top if user prefers reduced motion)\n        window.scrollTo({\n          top: 0,\n          behavior: window.matchMedia('(prefers-reduced-motion: reduce)')\n            .matches\n            ? undefined\n            : 'smooth',\n        });\n\n        onClick?.();\n      }}\n      variant={variant || 'interface'}\n      fontSize={size === 'small' ? 14 : 18}\n      alignSelf=\"end\"\n      mt={64}\n    >\n      <FlexBox alignItems=\"center\" justifyContent=\"center\">\n        {showIcon && <ArrowUpIcon size={24} mr={8} />} Back to top\n      </FlexBox>\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;AAeA,MAAaG,mBAAmD,EAC9DC,UACAC,WAAW,MACXC,OAAO,QACPC,SACAC,cACD;AACC,QACE,sBAAA,cAACR,0BAAAA;EACCO,eAAS;AAEPE,YAASC,eAAeN,SAAAA,EAAWO,MAAM,EAAEC,eAAe,MAAK,CAAA;AAG/DC,UAAOC,SAAS;IACdC,KAAK;IACLC,UAAUH,OAAOI,WAAW,mCAAA,CACzBC,UACCC,SACA;IACN,CAAA;AAEAZ,cAAAA;;EAEFC,SAASA,WAAW;EACpBY,UAAUd,SAAS,UAAU,KAAK;EAClCe,WAAU;EACVC,IAAI;IAEJ,sBAAA,cAACrB,2BAAAA;EAAQsB,YAAW;EAASC,gBAAe;IACzCnB,YAAY,sBAAA,cAACH,qCAAAA;EAAYI,MAAM;EAAImB,IAAI;KAAM,eAAA,CAAA"}

package/dist/BackToTopAnchor/index.d.cts

@@ -0,0 +1,12 @@
+//#region src/BackToTopAnchor/index.d.ts
+type BackToTopAnchorProps = {
+  /** The id of the element to scroll to */targetId: string; /** Whether to show the arrow icon */
+  showIcon?: boolean; /** The size of the anchor */
+  size?: 'small' | 'base'; /**  The onClick here usually contains tracking data */
+  onClick?: () => void;
+  variant?: false | 'inline' | 'standard' | 'interface';
+};
+declare const BackToTopAnchor: React.FC<BackToTopAnchorProps>;
+//#endregion
+export { BackToTopAnchor };
+//# sourceMappingURL=index.d.cts.map

package/dist/BackToTopAnchor/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/BackToTopAnchor/index.tsx"],"mappings":";KAGK,oBAAA;EAAA,yCAEH,QAAA;EAEA,QAAA,YAFA;EAIA,IAAA;EAEA,OAAA;EACA,OAAA;AAAA;AAAA,cAGW,eAAA,EAAiB,KAAA,CAAM,EAAA,CAAG,oBAAA"}

package/dist/BackToTopAnchor/index.d.ts

@@ -1,13 +1,12 @@
+//#region src/BackToTopAnchor/index.d.ts
 type BackToTopAnchorProps = {
-    /** The id of the element to scroll to */
-    targetId: string;
-    /** Whether to show the arrow icon */
-    showIcon?: boolean;
-    /** The size of the anchor */
-    size?: 'small' | 'base';
-    /**  The onClick here usually contains tracking data */
-    onClick?: () => void;
-    variant?: false | 'inline' | 'standard' | 'interface';
+  /** The id of the element to scroll to */targetId: string; /** Whether to show the arrow icon */
+  showIcon?: boolean; /** The size of the anchor */
+  size?: 'small' | 'base'; /**  The onClick here usually contains tracking data */
+  onClick?: () => void;
+  variant?: false | 'inline' | 'standard' | 'interface';
 };
-export declare const BackToTopAnchor: React.FC<BackToTopAnchorProps>;
-export {};
+declare const BackToTopAnchor: React.FC<BackToTopAnchorProps>;
+//#endregion
+export { BackToTopAnchor };
+//# sourceMappingURL=index.d.ts.map

package/dist/BackToTopAnchor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/BackToTopAnchor/index.tsx"],"mappings":";KAGK,oBAAA;EAAA,yCAEH,QAAA;EAEA,QAAA,YAFA;EAIA,IAAA;EAEA,OAAA;EACA,OAAA;AAAA;AAAA,cAGW,eAAA,EAAiB,KAAA,CAAM,EAAA,CAAG,oBAAA"}

package/dist/BackToTopAnchor/index.js

@@ -1,38 +1,30 @@
-import { Anchor, FlexBox } from '@codecademy/gamut';
-import { ArrowUpIcon } from '@codecademy/gamut-icons';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BackToTopAnchor = ({
-  targetId,
-  showIcon = true,
-  size = 'base',
-  onClick,
-  variant
-}) => {
-  return /*#__PURE__*/_jsx(Anchor, {
-    onClick: () => {
-      // move focus to page title without scrolling page
-      document.getElementById(targetId)?.focus({
-        preventScroll: true
-      });
+import { Anchor, FlexBox } from "@codecademy/gamut";
+import { ArrowUpIcon } from "@codecademy/gamut-icons";
 
-      // scroll to top (or jump to top if user prefers reduced motion)
-      window.scrollTo({
-        top: 0,
-        behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? undefined : 'smooth'
-      });
-      onClick?.();
-    },
-    variant: variant || 'interface',
-    fontSize: size === 'small' ? 14 : 18,
-    alignSelf: "end",
-    mt: 64,
-    children: /*#__PURE__*/_jsxs(FlexBox, {
-      alignItems: "center",
-      justifyContent: "center",
-      children: [showIcon && /*#__PURE__*/_jsx(ArrowUpIcon, {
-        size: 24,
-        mr: 8
-      }), " Back to top"]
-    })
-  });
-};
+//#region src/BackToTopAnchor/index.tsx
+const BackToTopAnchor = ({ targetId, showIcon = true, size = "base", onClick, variant }) => {
+	return /* @__PURE__ */ React.createElement(Anchor, {
+		onClick: () => {
+			document.getElementById(targetId)?.focus({ preventScroll: true });
+			window.scrollTo({
+				top: 0,
+				behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? void 0 : "smooth"
+			});
+			onClick?.();
+		},
+		variant: variant || "interface",
+		fontSize: size === "small" ? 14 : 18,
+		alignSelf: "end",
+		mt: 64
+	}, /* @__PURE__ */ React.createElement(FlexBox, {
+		alignItems: "center",
+		justifyContent: "center"
+	}, showIcon && /* @__PURE__ */ React.createElement(ArrowUpIcon, {
+		size: 24,
+		mr: 8
+	}), " Back to top"));
+};
+
+//#endregion
+export { BackToTopAnchor };
+//# sourceMappingURL=index.js.map

package/dist/BackToTopAnchor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Anchor","FlexBox","ArrowUpIcon","BackToTopAnchor","targetId","showIcon","size","onClick","variant","document","getElementById","focus","preventScroll","window","scrollTo","top","behavior","matchMedia","matches","undefined","fontSize","alignSelf","mt","alignItems","justifyContent","mr"],"sources":["../../src/BackToTopAnchor/index.tsx"],"sourcesContent":["import { Anchor, FlexBox } from '@codecademy/gamut';\nimport { ArrowUpIcon } from '@codecademy/gamut-icons';\n\ntype BackToTopAnchorProps = {\n  /** The id of the element to scroll to */\n  targetId: string;\n  /** Whether to show the arrow icon */\n  showIcon?: boolean;\n  /** The size of the anchor */\n  size?: 'small' | 'base';\n  /**  The onClick here usually contains tracking data */\n  onClick?: () => void;\n  variant?: false | 'inline' | 'standard' | 'interface';\n};\n\nexport const BackToTopAnchor: React.FC<BackToTopAnchorProps> = ({\n  targetId,\n  showIcon = true,\n  size = 'base',\n  onClick,\n  variant,\n}) => {\n  return (\n    <Anchor\n      onClick={() => {\n        // move focus to page title without scrolling page\n        document.getElementById(targetId)?.focus({ preventScroll: true });\n\n        // scroll to top (or jump to top if user prefers reduced motion)\n        window.scrollTo({\n          top: 0,\n          behavior: window.matchMedia('(prefers-reduced-motion: reduce)')\n            .matches\n            ? undefined\n            : 'smooth',\n        });\n\n        onClick?.();\n      }}\n      variant={variant || 'interface'}\n      fontSize={size === 'small' ? 14 : 18}\n      alignSelf=\"end\"\n      mt={64}\n    >\n      <FlexBox alignItems=\"center\" justifyContent=\"center\">\n        {showIcon && <ArrowUpIcon size={24} mr={8} />} Back to top\n      </FlexBox>\n    </Anchor>\n  );\n};\n"],"mappings":";;;;AAeA,MAAaG,mBAAmD,EAC9DC,UACAC,WAAW,MACXC,OAAO,QACPC,SACAC,cACD;AACC,QACE,sBAAA,cAACR,QAAAA;EACCO,eAAS;AAEPE,YAASC,eAAeN,SAAAA,EAAWO,MAAM,EAAEC,eAAe,MAAK,CAAA;AAG/DC,UAAOC,SAAS;IACdC,KAAK;IACLC,UAAUH,OAAOI,WAAW,mCAAA,CACzBC,UACCC,SACA;IACN,CAAA;AAEAZ,cAAAA;;EAEFC,SAASA,WAAW;EACpBY,UAAUd,SAAS,UAAU,KAAK;EAClCe,WAAU;EACVC,IAAI;IAEJ,sBAAA,cAACrB,SAAAA;EAAQsB,YAAW;EAASC,gBAAe;IACzCnB,YAAY,sBAAA,cAACH,aAAAA;EAAYI,MAAM;EAAImB,IAAI;KAAM,eAAA,CAAA"}

package/dist/Banner/CountdownTimer.cjs

@@ -0,0 +1,96 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/Banner/CountdownTimer.tsx
+const MS_SECOND = 1e3;
+const MS_MINUTE = 60 * MS_SECOND;
+const MS_HOUR = 60 * MS_MINUTE;
+const MS_DAY = 24 * MS_HOUR;
+const getTimeRemaining = (target) => {
+	const diff = Math.max(0, target - Date.now());
+	return {
+		days: Math.floor(diff / MS_DAY),
+		hours: Math.floor(diff % MS_DAY / MS_HOUR),
+		minutes: Math.floor(diff % MS_HOUR / MS_MINUTE),
+		seconds: Math.floor(diff % MS_MINUTE / MS_SECOND)
+	};
+};
+const TimeUnit = /* @__PURE__ */ react.default.memo(({ value, label }) => /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+	fontFamily: "accent",
+	fontWeight: 700,
+	variant: "title-md",
+	fontSize: {
+		_: 20,
+		md: 26
+	},
+	as: "span",
+	color: "inherit"
+}, value.toString().padStart(2, "0")), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+	fontFamily: "accent",
+	fontWeight: 700,
+	variant: "title-md",
+	fontSize: {
+		_: 20,
+		md: 26
+	},
+	as: "span",
+	color: "inherit"
+}, label)));
+const Separator = /* @__PURE__ */ react.default.memo(() => /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+	fontFamily: "accent",
+	variant: "title-md",
+	fontSize: 16,
+	color: "inherit",
+	fontWeight: "bold"
+}, ":"));
+const CountdownTimer = ({ targetDate, onExpire }) => {
+	const targetTimestamp = (0, react.useMemo)(() => new Date(targetDate).getTime(), [targetDate]);
+	const [timeRemaining, setTimeRemaining] = (0, react.useState)(() => getTimeRemaining(targetTimestamp));
+	(0, react.useEffect)(() => {
+		setTimeRemaining(getTimeRemaining(targetTimestamp));
+		if (targetTimestamp <= Date.now()) {
+			onExpire?.();
+			return;
+		}
+		const id = window.setInterval(() => {
+			setTimeRemaining(getTimeRemaining(targetTimestamp));
+			if (targetTimestamp <= Date.now()) {
+				onExpire?.();
+				window.clearInterval(id);
+			}
+		}, MS_SECOND);
+		return () => window.clearInterval(id);
+	}, [targetTimestamp, onExpire]);
+	if (targetTimestamp <= Date.now()) return null;
+	const { days, hours, minutes, seconds } = timeRemaining;
+	return /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
+		display: "inline-flex",
+		alignItems: "center",
+		py: 8,
+		px: 16,
+		bg: "yellow-0",
+		borderRadius: 6,
+		color: "navy",
+		"data-testid": "branded-countdown-timer",
+		boxShadow: "minimal",
+		gap: 2
+	}, /* @__PURE__ */ react.default.createElement(TimeUnit, {
+		value: days,
+		label: "d"
+	}), /* @__PURE__ */ react.default.createElement(Separator, null), /* @__PURE__ */ react.default.createElement(TimeUnit, {
+		value: hours,
+		label: "h"
+	}), /* @__PURE__ */ react.default.createElement(Separator, null), /* @__PURE__ */ react.default.createElement(TimeUnit, {
+		value: minutes,
+		label: "m"
+	}), /* @__PURE__ */ react.default.createElement(Separator, null), /* @__PURE__ */ react.default.createElement(TimeUnit, {
+		value: seconds,
+		label: "s"
+	}));
+};
+
+//#endregion
+exports.CountdownTimer = CountdownTimer;
+//# sourceMappingURL=CountdownTimer.cjs.map

package/dist/Banner/CountdownTimer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownTimer.cjs","names":["Box","FlexBox","Text","React","useEffect","useMemo","useState","MS_SECOND","MS_MINUTE","MS_HOUR","MS_DAY","getTimeRemaining","target","diff","Math","max","Date","now","days","floor","hours","minutes","seconds","TimeUnit","memo","value","label","alignItems","fontFamily","fontWeight","variant","fontSize","_","md","as","color","toString","padStart","Separator","CountdownTimer","targetDate","onExpire","targetTimestamp","getTime","timeRemaining","setTimeRemaining","id","window","setInterval","next","clearInterval","display","py","px","bg","borderRadius","data-testid","boxShadow","gap"],"sources":["../../src/Banner/CountdownTimer.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport React, { useEffect, useMemo, useState } from 'react';\n\ninterface CountdownTimerProps {\n  targetDate: string;\n  onExpire?: () => void;\n}\n\ninterface TimeRemaining {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n}\n\nconst MS_SECOND = 1000;\nconst MS_MINUTE = 60 * MS_SECOND;\nconst MS_HOUR = 60 * MS_MINUTE;\nconst MS_DAY = 24 * MS_HOUR;\n\nconst getTimeRemaining = (target: number): TimeRemaining => {\n  const diff = Math.max(0, target - Date.now());\n\n  return {\n    days: Math.floor(diff / MS_DAY),\n    hours: Math.floor((diff % MS_DAY) / MS_HOUR),\n    minutes: Math.floor((diff % MS_HOUR) / MS_MINUTE),\n    seconds: Math.floor((diff % MS_MINUTE) / MS_SECOND),\n  };\n};\n\nconst TimeUnit = React.memo<{ value: number; label: string }>(\n  ({ value, label }) => (\n    <FlexBox alignItems=\"center\">\n      <Text\n        fontFamily=\"accent\"\n        fontWeight={700}\n        variant=\"title-md\"\n        fontSize={{ _: 20, md: 26 }}\n        as=\"span\"\n        color=\"inherit\"\n      >\n        {value.toString().padStart(2, '0')}\n      </Text>\n      <Text\n        fontFamily=\"accent\"\n        fontWeight={700}\n        variant=\"title-md\"\n        fontSize={{ _: 20, md: 26 }}\n        as=\"span\"\n        color=\"inherit\"\n      >\n        {label}\n      </Text>\n    </FlexBox>\n  )\n);\n\nconst Separator = React.memo(() => (\n  <Text\n    fontFamily=\"accent\"\n    variant=\"title-md\"\n    fontSize={16}\n    color=\"inherit\"\n    fontWeight=\"bold\"\n  >\n    :\n  </Text>\n));\n\nexport const CountdownTimer: React.FC<CountdownTimerProps> = ({\n  targetDate,\n  onExpire,\n}) => {\n  const targetTimestamp = useMemo(\n    () => new Date(targetDate).getTime(),\n    [targetDate]\n  );\n\n  const [timeRemaining, setTimeRemaining] = useState<TimeRemaining>(() =>\n    getTimeRemaining(targetTimestamp)\n  );\n\n  useEffect(() => {\n    setTimeRemaining(getTimeRemaining(targetTimestamp));\n\n    if (targetTimestamp <= Date.now()) {\n      onExpire?.();\n      return;\n    }\n\n    const id = window.setInterval(() => {\n      const next = getTimeRemaining(targetTimestamp);\n      setTimeRemaining(next);\n\n      if (targetTimestamp <= Date.now()) {\n        onExpire?.();\n        window.clearInterval(id);\n      }\n    }, MS_SECOND);\n\n    return () => window.clearInterval(id);\n  }, [targetTimestamp, onExpire]);\n\n  if (targetTimestamp <= Date.now()) {\n    return null;\n  }\n\n  const { days, hours, minutes, seconds } = timeRemaining;\n\n  return (\n    <Box\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      py={8}\n      px={16}\n      bg=\"yellow-0\"\n      borderRadius={6 as never}\n      color=\"navy\"\n      data-testid=\"branded-countdown-timer\"\n      boxShadow=\"minimal\"\n      gap={2 as never}\n    >\n      <TimeUnit value={days} label=\"d\" />\n      <Separator />\n      <TimeUnit value={hours} label=\"h\" />\n      <Separator />\n      <TimeUnit value={minutes} label=\"m\" />\n      <Separator />\n      <TimeUnit value={seconds} label=\"s\" />\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AAeA,MAAMO,YAAY;AAClB,MAAMC,YAAY,KAAKD;AACvB,MAAME,UAAU,KAAKD;AACrB,MAAME,SAAS,KAAKD;AAEpB,MAAME,oBAAoBC,WAAAA;CACxB,MAAMC,OAAOC,KAAKC,IAAI,GAAGH,SAASI,KAAKC,KAAG,CAAA;AAE1C,QAAO;EACLC,MAAMJ,KAAKK,MAAMN,OAAOH,OAAAA;EACxBU,OAAON,KAAKK,MAAM,OAAQT,SAAUD,QAAAA;EACpCY,SAASP,KAAKK,MAAM,OAAQV,UAAWD,UAAAA;EACvCc,SAASR,KAAKK,MAAM,OAAQX,YAAaD,UAAAA;EAC3C;;AAGF,MAAMgB,WAAWpB,8BAAMqB,MACpB,EAAEC,OAAOC,YACR,8BAAA,cAACzB,2BAAAA,EAAQ0B,YAAW,YAClB,8BAAA,cAACzB,wBAAAA;CACC0B,YAAW;CACXC,YAAY;CACZC,SAAQ;CACRC,UAAU;EAAEC,GAAG;EAAIC,IAAI;EAAG;CAC1BC,IAAG;CACHC,OAAM;GAELV,MAAMW,UAAQ,CAAGC,SAAS,GAAG,IAAA,CAAA,EAEhC,8BAAA,cAACnC,wBAAAA;CACC0B,YAAW;CACXC,YAAY;CACZC,SAAQ;CACRC,UAAU;EAAEC,GAAG;EAAIC,IAAI;EAAG;CAC1BC,IAAG;CACHC,OAAM;GAELT,MAAAA,CAAAA,CAAAA;AAMT,MAAMY,YAAYnC,8BAAMqB,WACtB,8BAAA,cAACtB,wBAAAA;CACC0B,YAAW;CACXE,SAAQ;CACRC,UAAU;CACVI,OAAM;CACNN,YAAW;GACZ,IAAA,CAAA;AAKH,MAAaU,kBAAiD,EAC5DC,YACAC,eACD;CACC,MAAMC,2CACE,IAAI1B,KAAKwB,WAAAA,CAAYG,SAAO,EAClC,CAACH,WAAW,CAAA;CAGd,MAAM,CAACI,eAAeC,8CACpBlC,iBAAiB+B,gBAAAA,CAAAA;AAGnBtC,4BAAU;AACRyC,mBAAiBlC,iBAAiB+B,gBAAAA,CAAAA;AAElC,MAAIA,mBAAmB1B,KAAKC,KAAG,EAAI;AACjCwB,eAAAA;AACA;;EAGF,MAAMK,KAAKC,OAAOC,kBAAY;AAE5BH,oBADalC,iBAAiB+B,gBAAAA,CACbO;AAEjB,OAAIP,mBAAmB1B,KAAKC,KAAG,EAAI;AACjCwB,gBAAAA;AACAM,WAAOG,cAAcJ,GAAAA;;KAEtBvC,UAAAA;AAEH,eAAawC,OAAOG,cAAcJ,GAAAA;IACjC,CAACJ,iBAAiBD,SAAS,CAAA;AAE9B,KAAIC,mBAAmB1B,KAAKC,KAAG,CAC7B,QAAO;CAGT,MAAM,EAAEC,MAAME,OAAOC,SAASC,YAAYsB;AAE1C,QACE,8BAAA,cAAC5C,uBAAAA;EACCmD,SAAQ;EACRxB,YAAW;EACXyB,IAAI;EACJC,IAAI;EACJC,IAAG;EACHC,cAAc;EACdpB,OAAM;EACNqB,eAAY;EACZC,WAAU;EACVC,KAAK;IAEL,8BAAA,cAACnC,UAAAA;EAASE,OAAOP;EAAMQ,OAAM;KAC7B,8BAAA,cAACY,WAAAA,KAAAA,EACD,8BAAA,cAACf,UAAAA;EAASE,OAAOL;EAAOM,OAAM;KAC9B,8BAAA,cAACY,WAAAA,KAAAA,EACD,8BAAA,cAACf,UAAAA;EAASE,OAAOJ;EAASK,OAAM;KAChC,8BAAA,cAACY,WAAAA,KAAAA,EACD,8BAAA,cAACf,UAAAA;EAASE,OAAOH;EAASI,OAAM"}

package/dist/Banner/CountdownTimer.d.cts

@@ -0,0 +1,11 @@
+import React from "react";
+
+//#region src/Banner/CountdownTimer.d.ts
+interface CountdownTimerProps {
+  targetDate: string;
+  onExpire?: () => void;
+}
+declare const CountdownTimer: React.FC<CountdownTimerProps>;
+//#endregion
+export { CountdownTimer };
+//# sourceMappingURL=CountdownTimer.d.cts.map

package/dist/Banner/CountdownTimer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownTimer.d.cts","names":[],"sources":["../../src/Banner/CountdownTimer.tsx"],"mappings":";;;UAGU,mBAAA;EACR,UAAA;EACA,QAAA;AAAA;AAAA,cAiEW,cAAA,EAAgB,KAAA,CAAM,EAAA,CAAG,mBAAA"}

package/dist/Banner/CountdownTimer.d.ts

@@ -1,7 +1,11 @@
-import React from 'react';
+import React from "react";
+
+//#region src/Banner/CountdownTimer.d.ts
 interface CountdownTimerProps {
-    targetDate: string;
-    onExpire?: () => void;
+  targetDate: string;
+  onExpire?: () => void;
 }
-export declare const CountdownTimer: React.FC<CountdownTimerProps>;
-export {};
+declare const CountdownTimer: React.FC<CountdownTimerProps>;
+//#endregion
+export { CountdownTimer };
+//# sourceMappingURL=CountdownTimer.d.ts.map

package/dist/Banner/CountdownTimer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownTimer.d.ts","names":[],"sources":["../../src/Banner/CountdownTimer.tsx"],"mappings":";;;UAGU,mBAAA;EACR,UAAA;EACA,QAAA;AAAA;AAAA,cAiEW,cAAA,EAAgB,KAAA,CAAM,EAAA,CAAG,mBAAA"}