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

package/dist/Avatar/index.d.cts

@@ -0,0 +1,41 @@
+import { VisualTheme } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { ResponsiveProp } from "@codecademy/variance";
+
+//#region src/Avatar/index.d.ts
+type AvatarImageProps = {
+  alt: string;
+  'aria-labelledby'?: never;
+} | {
+  alt?: never;
+  'aria-labelledby': string;
+};
+type AvatarBaseProps = {
+  /**
+   * path to image asset
+   */
+  src: string;
+  /**
+   * Disables the drop shadow entirely.
+   */
+  disableDropshadow?: boolean;
+  /**
+   * Size of the Avatar.
+   */
+  size?: ResponsiveProp<24 | 32 | 40 | 48 | 64 | 118> | '100%';
+  /**
+   * Overrides styles on the Avatar container.
+   */
+  className?: string;
+  /**
+   * @deprecated
+   * This will be determined automatically by the theme moving forward.
+   * Supplying it will determine the color of drop shadow.
+   */
+  mode?: VisualTheme;
+};
+type AvatarProps = AvatarBaseProps & AvatarImageProps;
+declare const Avatar: React$1.FC<AvatarProps>;
+//#endregion
+export { Avatar, AvatarBaseProps, AvatarImageProps, AvatarProps };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/Avatar/index.tsx"],"mappings":";;;;;KAiDY,gBAAA;EACN,GAAA;EAAa,iBAAA;AAAA;EACb,GAAA;EAAa,iBAAA;AAAA;AAAA,KAEP,eAAA;EAFN;;;EAMJ,GAAA;EAJU;;;EASV,iBAAA;EALA;;;EAUA,IAAA,GAAO,cAAA;EAKP;;;EAAA,SAAA;EAOkB;AAGpB;;;;EAHE,IAAA,GAAO,WAAA;AAAA;AAAA,KAGG,WAAA,GAAc,eAAA,GAAkB,gBAAA;AAAA,cAE/B,MAAA,EAAQ,OAAA,CAAM,EAAA,CAAG,WAAA"}

package/dist/Avatar/index.d.ts

@@ -1,36 +1,41 @@
-import { VisualTheme } from '@codecademy/gamut';
-import { ResponsiveProp } from '@codecademy/variance';
-import * as React from 'react';
-export type AvatarImageProps = {
-    alt: string;
-    'aria-labelledby'?: never;
+import { VisualTheme } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { ResponsiveProp } from "@codecademy/variance";
+
+//#region src/Avatar/index.d.ts
+type AvatarImageProps = {
+  alt: string;
+  'aria-labelledby'?: never;
 } | {
-    alt?: never;
-    'aria-labelledby': string;
+  alt?: never;
+  'aria-labelledby': string;
 };
-export type AvatarBaseProps = {
-    /**
-     * path to image asset
-     */
-    src: string;
-    /**
-     * Disables the drop shadow entirely.
-     */
-    disableDropshadow?: boolean;
-    /**
-     * Size of the Avatar.
-     */
-    size?: ResponsiveProp<24 | 32 | 40 | 48 | 64 | 118> | '100%';
-    /**
-     * Overrides styles on the Avatar container.
-     */
-    className?: string;
-    /**
-     * @deprecated
-     * This will be determined automatically by the theme moving forward.
-     * Supplying it will determine the color of drop shadow.
-     */
-    mode?: VisualTheme;
+type AvatarBaseProps = {
+  /**
+   * path to image asset
+   */
+  src: string;
+  /**
+   * Disables the drop shadow entirely.
+   */
+  disableDropshadow?: boolean;
+  /**
+   * Size of the Avatar.
+   */
+  size?: ResponsiveProp<24 | 32 | 40 | 48 | 64 | 118> | '100%';
+  /**
+   * Overrides styles on the Avatar container.
+   */
+  className?: string;
+  /**
+   * @deprecated
+   * This will be determined automatically by the theme moving forward.
+   * Supplying it will determine the color of drop shadow.
+   */
+  mode?: VisualTheme;
 };
-export type AvatarProps = AvatarBaseProps & AvatarImageProps;
-export declare const Avatar: React.FC<AvatarProps>;
+type AvatarProps = AvatarBaseProps & AvatarImageProps;
+declare const Avatar: React$1.FC<AvatarProps>;
+//#endregion
+export { Avatar, AvatarBaseProps, AvatarImageProps, AvatarProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Avatar/index.tsx"],"mappings":";;;;;KAiDY,gBAAA;EACN,GAAA;EAAa,iBAAA;AAAA;EACb,GAAA;EAAa,iBAAA;AAAA;AAAA,KAEP,eAAA;EAFN;;;EAMJ,GAAA;EAJU;;;EASV,iBAAA;EALA;;;EAUA,IAAA,GAAO,cAAA;EAKP;;;EAAA,SAAA;EAOkB;AAGpB;;;;EAHE,IAAA,GAAO,WAAA;AAAA;AAAA,KAGG,WAAA,GAAc,eAAA,GAAkB,gBAAA;AAAA,cAE/B,MAAA,EAAQ,OAAA,CAAM,EAAA,CAAG,WAAA"}

package/dist/Avatar/index.js

@@ -1,45 +1,42 @@
-import _styled from "@emotion/styled/base";
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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 { styledOptions, system, theme } from '@codecademy/gamut-styles';
-import { css } from '@emotion/react';
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Image = /*#__PURE__*/_styled('img', _extends({}, {
-  target: "e1u51ndw1",
-  label: "Image"
-}, styledOptions()))(system.layout, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BdmF0YXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9jIiwiZmlsZSI6Ii4uLy4uL3NyYy9BdmF0YXIvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVmlzdWFsVGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBzdHlsZWRPcHRpb25zLCBzeXN0ZW0sIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFJlc3BvbnNpdmVQcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBJbWFnZSA9IHN0eWxlZCgnaW1nJywgc3R5bGVkT3B0aW9uczwnaW1nJz4oKSkoc3lzdGVtLmxheW91dCk7XG5cbmNvbnN0IEF2YXRhckNvbnRhaW5lciA9IHN0eWxlZC5kaXY8e1xuICBtb2RlPzogVmlzdWFsVGhlbWU7XG4gIGRpc2FibGVEcm9wc2hhZG93PzogYm9vbGVhbjtcbn0+YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IHRhYmxlO1xuXG4gICR7KHsgZGlzYWJsZURyb3BzaGFkb3csIG1vZGUgfSkgPT5cbiAgICAhZGlzYWJsZURyb3BzaGFkb3cgJiZcbiAgICBjc3NgXG4gICAgICAmOjpiZWZvcmUge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45Mik7XG4gICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IGJvdHRvbSByaWdodDtcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHttb2RlXG4gICAgICAgICAgPyBtb2RlID09PSAnbGlnaHQnXG4gICAgICAgICAgICA/IHRoZW1lLmNvbG9ycy5saWdodEdyZWVuXG4gICAgICAgICAgICA6IHRoZW1lLmNvbG9ycy5ncmVlblxuICAgICAgICAgIDogdGhlbWUuY29sb3JzWydmZWVkYmFjay1zdWNjZXNzJ119O1xuICAgICAgfVxuICAgIGB9XG5cbiAgJHtJbWFnZX0ge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgb2JqZWN0LWZpdDogY292ZXI7XG5cbiAgICAkeyh7IGRpc2FibGVEcm9wc2hhZG93IH0pID0+XG4gICAgICAhZGlzYWJsZURyb3BzaGFkb3cgJiZcbiAgICAgIGNzc2BcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjkyKTtcbiAgICAgICAgdHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7XG4gICAgICBgfVxuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBBdmF0YXJJbWFnZVByb3BzID1cbiAgfCB7IGFsdDogc3RyaW5nOyAnYXJpYS1sYWJlbGxlZGJ5Jz86IG5ldmVyIH1cbiAgfCB7IGFsdD86IG5ldmVyOyAnYXJpYS1sYWJlbGxlZGJ5Jzogc3RyaW5nIH07XG5cbmV4cG9ydCB0eXBlIEF2YXRhckJhc2VQcm9wcyA9IHtcbiAgLyoqXG4gICAqIHBhdGggdG8gaW1hZ2UgYXNzZXRcbiAgICovXG4gIHNyYzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBEaXNhYmxlcyB0aGUgZHJvcCBzaGFkb3cgZW50aXJlbHkuXG4gICAqL1xuICBkaXNhYmxlRHJvcHNoYWRvdz86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFNpemUgb2YgdGhlIEF2YXRhci5cbiAgICovXG4gIHNpemU/OiBSZXNwb25zaXZlUHJvcDwyNCB8IDMyIHwgNDAgfCA0OCB8IDY0IHwgMTE4PiB8ICcxMDAlJztcblxuICAvKipcbiAgICogT3ZlcnJpZGVzIHN0eWxlcyBvbiB0aGUgQXZhdGFyIGNvbnRhaW5lci5cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogQGRlcHJlY2F0ZWRcbiAgICogVGhpcyB3aWxsIGJlIGRldGVybWluZWQgYXV0b21hdGljYWxseSBieSB0aGUgdGhlbWUgbW92aW5nIGZvcndhcmQuXG4gICAqIFN1cHBseWluZyBpdCB3aWxsIGRldGVybWluZSB0aGUgY29sb3Igb2YgZHJvcCBzaGFkb3cuXG4gICAqL1xuICBtb2RlPzogVmlzdWFsVGhlbWU7XG59O1xuXG5leHBvcnQgdHlwZSBBdmF0YXJQcm9wcyA9IEF2YXRhckJhc2VQcm9wcyAmIEF2YXRhckltYWdlUHJvcHM7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXI6IFJlYWN0LkZDPEF2YXRhclByb3BzPiA9ICh7XG4gIG1vZGUsXG4gIGRpc2FibGVEcm9wc2hhZG93LFxuICAvLyBFTlQtMzYxIEZpeGVkIEZpcmVmb3ggSXNzdWUsIHNldCBkZWZhdWx0IHNpemUgdG8gMjQgZnJvbSAxMThcbiAgc2l6ZSA9IDI0LFxuICBjbGFzc05hbWUsXG4gIC4uLmF2YXRhckltYWdlUHJvcHNcbn0pID0+IChcbiAgPEF2YXRhckNvbnRhaW5lclxuICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgIG1vZGU9e21vZGV9XG4gICAgZGlzYWJsZURyb3BzaGFkb3c9e2Rpc2FibGVEcm9wc2hhZG93fVxuICAgIGRhdGEtdGVzdGlkPVwiYXZhdGFyLWNvbnRhaW5lclwiXG4gID5cbiAgICA8SW1hZ2UgZGltZW5zaW9ucz17c2l6ZX0gey4uLmF2YXRhckltYWdlUHJvcHN9IC8+XG4gIDwvQXZhdGFyQ29udGFpbmVyPlxuKTtcbiJdfQ== */");
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "im73wu-AvatarContainer",
-  styles: "transform:scale(0.92);transform-origin:top left;label:AvatarContainer;"
-} : {
-  name: "im73wu-AvatarContainer",
-  styles: "transform:scale(0.92);transform-origin:top left;label:AvatarContainer;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BdmF0YXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDUyIsImZpbGUiOiIuLi8uLi9zcmMvQXZhdGFyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFZpc3VhbFRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgc3R5bGVkT3B0aW9ucywgc3lzdGVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBSZXNwb25zaXZlUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuY29uc3QgSW1hZ2UgPSBzdHlsZWQoJ2ltZycsIHN0eWxlZE9wdGlvbnM8J2ltZyc+KCkpKHN5c3RlbS5sYXlvdXQpO1xuXG5jb25zdCBBdmF0YXJDb250YWluZXIgPSBzdHlsZWQuZGl2PHtcbiAgbW9kZT86IFZpc3VhbFRoZW1lO1xuICBkaXNhYmxlRHJvcHNoYWRvdz86IGJvb2xlYW47XG59PmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiB0YWJsZTtcblxuICAkeyh7IGRpc2FibGVEcm9wc2hhZG93LCBtb2RlIH0pID0+XG4gICAgIWRpc2FibGVEcm9wc2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgJjo6YmVmb3JlIHtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOTIpO1xuICAgICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBib3R0b20gcmlnaHQ7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7bW9kZVxuICAgICAgICAgID8gbW9kZSA9PT0gJ2xpZ2h0J1xuICAgICAgICAgICAgPyB0aGVtZS5jb2xvcnMubGlnaHRHcmVlblxuICAgICAgICAgICAgOiB0aGVtZS5jb2xvcnMuZ3JlZW5cbiAgICAgICAgICA6IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stc3VjY2VzcyddfTtcbiAgICAgIH1cbiAgICBgfVxuXG4gICR7SW1hZ2V9IHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuXG4gICAgJHsoeyBkaXNhYmxlRHJvcHNoYWRvdyB9KSA9PlxuICAgICAgIWRpc2FibGVEcm9wc2hhZG93ICYmXG4gICAgICBjc3NgXG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45Mik7XG4gICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBsZWZ0O1xuICAgICAgYH1cbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgQXZhdGFySW1hZ2VQcm9wcyA9XG4gIHwgeyBhbHQ6IHN0cmluZzsgJ2FyaWEtbGFiZWxsZWRieSc/OiBuZXZlciB9XG4gIHwgeyBhbHQ/OiBuZXZlcjsgJ2FyaWEtbGFiZWxsZWRieSc6IHN0cmluZyB9O1xuXG5leHBvcnQgdHlwZSBBdmF0YXJCYXNlUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBwYXRoIHRvIGltYWdlIGFzc2V0XG4gICAqL1xuICBzcmM6IHN0cmluZztcblxuICAvKipcbiAgICogRGlzYWJsZXMgdGhlIGRyb3Agc2hhZG93IGVudGlyZWx5LlxuICAgKi9cbiAgZGlzYWJsZURyb3BzaGFkb3c/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBBdmF0YXIuXG4gICAqL1xuICBzaXplPzogUmVzcG9uc2l2ZVByb3A8MjQgfCAzMiB8IDQwIHwgNDggfCA2NCB8IDExOD4gfCAnMTAwJSc7XG5cbiAgLyoqXG4gICAqIE92ZXJyaWRlcyBzdHlsZXMgb24gdGhlIEF2YXRhciBjb250YWluZXIuXG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEBkZXByZWNhdGVkXG4gICAqIFRoaXMgd2lsbCBiZSBkZXRlcm1pbmVkIGF1dG9tYXRpY2FsbHkgYnkgdGhlIHRoZW1lIG1vdmluZyBmb3J3YXJkLlxuICAgKiBTdXBwbHlpbmcgaXQgd2lsbCBkZXRlcm1pbmUgdGhlIGNvbG9yIG9mIGRyb3Agc2hhZG93LlxuICAgKi9cbiAgbW9kZT86IFZpc3VhbFRoZW1lO1xufTtcblxuZXhwb3J0IHR5cGUgQXZhdGFyUHJvcHMgPSBBdmF0YXJCYXNlUHJvcHMgJiBBdmF0YXJJbWFnZVByb3BzO1xuXG5leHBvcnQgY29uc3QgQXZhdGFyOiBSZWFjdC5GQzxBdmF0YXJQcm9wcz4gPSAoe1xuICBtb2RlLFxuICBkaXNhYmxlRHJvcHNoYWRvdyxcbiAgLy8gRU5ULTM2MSBGaXhlZCBGaXJlZm94IElzc3VlLCBzZXQgZGVmYXVsdCBzaXplIHRvIDI0IGZyb20gMTE4XG4gIHNpemUgPSAyNCxcbiAgY2xhc3NOYW1lLFxuICAuLi5hdmF0YXJJbWFnZVByb3BzXG59KSA9PiAoXG4gIDxBdmF0YXJDb250YWluZXJcbiAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICBtb2RlPXttb2RlfVxuICAgIGRpc2FibGVEcm9wc2hhZG93PXtkaXNhYmxlRHJvcHNoYWRvd31cbiAgICBkYXRhLXRlc3RpZD1cImF2YXRhci1jb250YWluZXJcIlxuICA+XG4gICAgPEltYWdlIGRpbWVuc2lvbnM9e3NpemV9IHsuLi5hdmF0YXJJbWFnZVByb3BzfSAvPlxuICA8L0F2YXRhckNvbnRhaW5lcj5cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const AvatarContainer = /*#__PURE__*/_styled("div", {
-  target: "e1u51ndw0",
-  label: "AvatarContainer"
-})("position:relative;display:table;", ({
-  disableDropshadow,
-  mode
-}) => !disableDropshadow && /*#__PURE__*/css("&::before{content:'';position:absolute;border-radius:50%;transform:scale(0.92);transform-origin:bottom right;height:100%;width:100%;background-color:", mode ? mode === 'light' ? theme.colors.lightGreen : theme.colors.green : theme.colors['feedback-success'], ";};label:AvatarContainer;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BdmF0YXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCTyIsImZpbGUiOiIuLi8uLi9zcmMvQXZhdGFyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFZpc3VhbFRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgc3R5bGVkT3B0aW9ucywgc3lzdGVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBSZXNwb25zaXZlUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuY29uc3QgSW1hZ2UgPSBzdHlsZWQoJ2ltZycsIHN0eWxlZE9wdGlvbnM8J2ltZyc+KCkpKHN5c3RlbS5sYXlvdXQpO1xuXG5jb25zdCBBdmF0YXJDb250YWluZXIgPSBzdHlsZWQuZGl2PHtcbiAgbW9kZT86IFZpc3VhbFRoZW1lO1xuICBkaXNhYmxlRHJvcHNoYWRvdz86IGJvb2xlYW47XG59PmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiB0YWJsZTtcblxuICAkeyh7IGRpc2FibGVEcm9wc2hhZG93LCBtb2RlIH0pID0+XG4gICAgIWRpc2FibGVEcm9wc2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgJjo6YmVmb3JlIHtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOTIpO1xuICAgICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBib3R0b20gcmlnaHQ7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7bW9kZVxuICAgICAgICAgID8gbW9kZSA9PT0gJ2xpZ2h0J1xuICAgICAgICAgICAgPyB0aGVtZS5jb2xvcnMubGlnaHRHcmVlblxuICAgICAgICAgICAgOiB0aGVtZS5jb2xvcnMuZ3JlZW5cbiAgICAgICAgICA6IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stc3VjY2VzcyddfTtcbiAgICAgIH1cbiAgICBgfVxuXG4gICR7SW1hZ2V9IHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuXG4gICAgJHsoeyBkaXNhYmxlRHJvcHNoYWRvdyB9KSA9PlxuICAgICAgIWRpc2FibGVEcm9wc2hhZG93ICYmXG4gICAgICBjc3NgXG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45Mik7XG4gICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBsZWZ0O1xuICAgICAgYH1cbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgQXZhdGFySW1hZ2VQcm9wcyA9XG4gIHwgeyBhbHQ6IHN0cmluZzsgJ2FyaWEtbGFiZWxsZWRieSc/OiBuZXZlciB9XG4gIHwgeyBhbHQ/OiBuZXZlcjsgJ2FyaWEtbGFiZWxsZWRieSc6IHN0cmluZyB9O1xuXG5leHBvcnQgdHlwZSBBdmF0YXJCYXNlUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBwYXRoIHRvIGltYWdlIGFzc2V0XG4gICAqL1xuICBzcmM6IHN0cmluZztcblxuICAvKipcbiAgICogRGlzYWJsZXMgdGhlIGRyb3Agc2hhZG93IGVudGlyZWx5LlxuICAgKi9cbiAgZGlzYWJsZURyb3BzaGFkb3c/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBBdmF0YXIuXG4gICAqL1xuICBzaXplPzogUmVzcG9uc2l2ZVByb3A8MjQgfCAzMiB8IDQwIHwgNDggfCA2NCB8IDExOD4gfCAnMTAwJSc7XG5cbiAgLyoqXG4gICAqIE92ZXJyaWRlcyBzdHlsZXMgb24gdGhlIEF2YXRhciBjb250YWluZXIuXG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEBkZXByZWNhdGVkXG4gICAqIFRoaXMgd2lsbCBiZSBkZXRlcm1pbmVkIGF1dG9tYXRpY2FsbHkgYnkgdGhlIHRoZW1lIG1vdmluZyBmb3J3YXJkLlxuICAgKiBTdXBwbHlpbmcgaXQgd2lsbCBkZXRlcm1pbmUgdGhlIGNvbG9yIG9mIGRyb3Agc2hhZG93LlxuICAgKi9cbiAgbW9kZT86IFZpc3VhbFRoZW1lO1xufTtcblxuZXhwb3J0IHR5cGUgQXZhdGFyUHJvcHMgPSBBdmF0YXJCYXNlUHJvcHMgJiBBdmF0YXJJbWFnZVByb3BzO1xuXG5leHBvcnQgY29uc3QgQXZhdGFyOiBSZWFjdC5GQzxBdmF0YXJQcm9wcz4gPSAoe1xuICBtb2RlLFxuICBkaXNhYmxlRHJvcHNoYWRvdyxcbiAgLy8gRU5ULTM2MSBGaXhlZCBGaXJlZm94IElzc3VlLCBzZXQgZGVmYXVsdCBzaXplIHRvIDI0IGZyb20gMTE4XG4gIHNpemUgPSAyNCxcbiAgY2xhc3NOYW1lLFxuICAuLi5hdmF0YXJJbWFnZVByb3BzXG59KSA9PiAoXG4gIDxBdmF0YXJDb250YWluZXJcbiAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICBtb2RlPXttb2RlfVxuICAgIGRpc2FibGVEcm9wc2hhZG93PXtkaXNhYmxlRHJvcHNoYWRvd31cbiAgICBkYXRhLXRlc3RpZD1cImF2YXRhci1jb250YWluZXJcIlxuICA+XG4gICAgPEltYWdlIGRpbWVuc2lvbnM9e3NpemV9IHsuLi5hdmF0YXJJbWFnZVByb3BzfSAvPlxuICA8L0F2YXRhckNvbnRhaW5lcj5cbik7XG4iXX0= */")), " ", Image, "{position:relative;border-radius:50%;object-fit:cover;", ({
-  disableDropshadow
-}) => !disableDropshadow && _ref, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BdmF0YXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlFIiwiZmlsZSI6Ii4uLy4uL3NyYy9BdmF0YXIvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVmlzdWFsVGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBzdHlsZWRPcHRpb25zLCBzeXN0ZW0sIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFJlc3BvbnNpdmVQcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBJbWFnZSA9IHN0eWxlZCgnaW1nJywgc3R5bGVkT3B0aW9uczwnaW1nJz4oKSkoc3lzdGVtLmxheW91dCk7XG5cbmNvbnN0IEF2YXRhckNvbnRhaW5lciA9IHN0eWxlZC5kaXY8e1xuICBtb2RlPzogVmlzdWFsVGhlbWU7XG4gIGRpc2FibGVEcm9wc2hhZG93PzogYm9vbGVhbjtcbn0+YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IHRhYmxlO1xuXG4gICR7KHsgZGlzYWJsZURyb3BzaGFkb3csIG1vZGUgfSkgPT5cbiAgICAhZGlzYWJsZURyb3BzaGFkb3cgJiZcbiAgICBjc3NgXG4gICAgICAmOjpiZWZvcmUge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45Mik7XG4gICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IGJvdHRvbSByaWdodDtcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHttb2RlXG4gICAgICAgICAgPyBtb2RlID09PSAnbGlnaHQnXG4gICAgICAgICAgICA/IHRoZW1lLmNvbG9ycy5saWdodEdyZWVuXG4gICAgICAgICAgICA6IHRoZW1lLmNvbG9ycy5ncmVlblxuICAgICAgICAgIDogdGhlbWUuY29sb3JzWydmZWVkYmFjay1zdWNjZXNzJ119O1xuICAgICAgfVxuICAgIGB9XG5cbiAgJHtJbWFnZX0ge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgb2JqZWN0LWZpdDogY292ZXI7XG5cbiAgICAkeyh7IGRpc2FibGVEcm9wc2hhZG93IH0pID0+XG4gICAgICAhZGlzYWJsZURyb3BzaGFkb3cgJiZcbiAgICAgIGNzc2BcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjkyKTtcbiAgICAgICAgdHJhbnNmb3JtLW9yaWdpbjogdG9wIGxlZnQ7XG4gICAgICBgfVxuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBBdmF0YXJJbWFnZVByb3BzID1cbiAgfCB7IGFsdDogc3RyaW5nOyAnYXJpYS1sYWJlbGxlZGJ5Jz86IG5ldmVyIH1cbiAgfCB7IGFsdD86IG5ldmVyOyAnYXJpYS1sYWJlbGxlZGJ5Jzogc3RyaW5nIH07XG5cbmV4cG9ydCB0eXBlIEF2YXRhckJhc2VQcm9wcyA9IHtcbiAgLyoqXG4gICAqIHBhdGggdG8gaW1hZ2UgYXNzZXRcbiAgICovXG4gIHNyYzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBEaXNhYmxlcyB0aGUgZHJvcCBzaGFkb3cgZW50aXJlbHkuXG4gICAqL1xuICBkaXNhYmxlRHJvcHNoYWRvdz86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFNpemUgb2YgdGhlIEF2YXRhci5cbiAgICovXG4gIHNpemU/OiBSZXNwb25zaXZlUHJvcDwyNCB8IDMyIHwgNDAgfCA0OCB8IDY0IHwgMTE4PiB8ICcxMDAlJztcblxuICAvKipcbiAgICogT3ZlcnJpZGVzIHN0eWxlcyBvbiB0aGUgQXZhdGFyIGNvbnRhaW5lci5cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogQGRlcHJlY2F0ZWRcbiAgICogVGhpcyB3aWxsIGJlIGRldGVybWluZWQgYXV0b21hdGljYWxseSBieSB0aGUgdGhlbWUgbW92aW5nIGZvcndhcmQuXG4gICAqIFN1cHBseWluZyBpdCB3aWxsIGRldGVybWluZSB0aGUgY29sb3Igb2YgZHJvcCBzaGFkb3cuXG4gICAqL1xuICBtb2RlPzogVmlzdWFsVGhlbWU7XG59O1xuXG5leHBvcnQgdHlwZSBBdmF0YXJQcm9wcyA9IEF2YXRhckJhc2VQcm9wcyAmIEF2YXRhckltYWdlUHJvcHM7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXI6IFJlYWN0LkZDPEF2YXRhclByb3BzPiA9ICh7XG4gIG1vZGUsXG4gIGRpc2FibGVEcm9wc2hhZG93LFxuICAvLyBFTlQtMzYxIEZpeGVkIEZpcmVmb3ggSXNzdWUsIHNldCBkZWZhdWx0IHNpemUgdG8gMjQgZnJvbSAxMThcbiAgc2l6ZSA9IDI0LFxuICBjbGFzc05hbWUsXG4gIC4uLmF2YXRhckltYWdlUHJvcHNcbn0pID0+IChcbiAgPEF2YXRhckNvbnRhaW5lclxuICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgIG1vZGU9e21vZGV9XG4gICAgZGlzYWJsZURyb3BzaGFkb3c9e2Rpc2FibGVEcm9wc2hhZG93fVxuICAgIGRhdGEtdGVzdGlkPVwiYXZhdGFyLWNvbnRhaW5lclwiXG4gID5cbiAgICA8SW1hZ2UgZGltZW5zaW9ucz17c2l6ZX0gey4uLmF2YXRhckltYWdlUHJvcHN9IC8+XG4gIDwvQXZhdGFyQ29udGFpbmVyPlxuKTtcbiJdfQ== */"));
-export const Avatar = ({
-  mode,
-  disableDropshadow,
-  // ENT-361 Fixed Firefox Issue, set default size to 24 from 118
-  size = 24,
-  className,
-  ...avatarImageProps
-}) => /*#__PURE__*/_jsx(AvatarContainer, {
-  className: className,
-  mode: mode,
-  disableDropshadow: disableDropshadow,
-  "data-testid": "avatar-container",
-  children: /*#__PURE__*/_jsx(Image, {
-    dimensions: size,
-    ...avatarImageProps
-  })
-});
+import { styledOptions, system, theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { css as css$1 } from "@emotion/react";
+
+//#region src/Avatar/index.tsx
+const Image = /* @__PURE__ */ styled("img", {
+	target: "e1n8wu6u0",
+	label: "brand-Image",
+	...styledOptions()
+})(system.layout, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0F2YXRhci9pbmRleC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9BdmF0YXIvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFZpc3VhbFRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgc3R5bGVkT3B0aW9ucywgc3lzdGVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBSZXNwb25zaXZlUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuY29uc3QgSW1hZ2UgPSBzdHlsZWQoJ2ltZycsIHN0eWxlZE9wdGlvbnM8J2ltZyc+KCkpKHN5c3RlbS5sYXlvdXQpO1xuXG5jb25zdCBBdmF0YXJDb250YWluZXIgPSBzdHlsZWQuZGl2PHtcbiAgbW9kZT86IFZpc3VhbFRoZW1lO1xuICBkaXNhYmxlRHJvcHNoYWRvdz86IGJvb2xlYW47XG59PmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiB0YWJsZTtcblxuICAkeyh7IGRpc2FibGVEcm9wc2hhZG93LCBtb2RlIH0pID0+XG4gICAgIWRpc2FibGVEcm9wc2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgJjo6YmVmb3JlIHtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOTIpO1xuICAgICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBib3R0b20gcmlnaHQ7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7bW9kZVxuICAgICAgICAgID8gbW9kZSA9PT0gJ2xpZ2h0J1xuICAgICAgICAgICAgPyB0aGVtZS5jb2xvcnMubGlnaHRHcmVlblxuICAgICAgICAgICAgOiB0aGVtZS5jb2xvcnMuZ3JlZW5cbiAgICAgICAgICA6IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stc3VjY2VzcyddfTtcbiAgICAgIH1cbiAgICBgfVxuXG4gICR7SW1hZ2V9IHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuXG4gICAgJHsoeyBkaXNhYmxlRHJvcHNoYWRvdyB9KSA9PlxuICAgICAgIWRpc2FibGVEcm9wc2hhZG93ICYmXG4gICAgICBjc3NgXG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45Mik7XG4gICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBsZWZ0O1xuICAgICAgYH1cbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgQXZhdGFySW1hZ2VQcm9wcyA9XG4gIHwgeyBhbHQ6IHN0cmluZzsgJ2FyaWEtbGFiZWxsZWRieSc/OiBuZXZlciB9XG4gIHwgeyBhbHQ/OiBuZXZlcjsgJ2FyaWEtbGFiZWxsZWRieSc6IHN0cmluZyB9O1xuXG5leHBvcnQgdHlwZSBBdmF0YXJCYXNlUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBwYXRoIHRvIGltYWdlIGFzc2V0XG4gICAqL1xuICBzcmM6IHN0cmluZztcblxuICAvKipcbiAgICogRGlzYWJsZXMgdGhlIGRyb3Agc2hhZG93IGVudGlyZWx5LlxuICAgKi9cbiAgZGlzYWJsZURyb3BzaGFkb3c/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBBdmF0YXIuXG4gICAqL1xuICBzaXplPzogUmVzcG9uc2l2ZVByb3A8MjQgfCAzMiB8IDQwIHwgNDggfCA2NCB8IDExOD4gfCAnMTAwJSc7XG5cbiAgLyoqXG4gICAqIE92ZXJyaWRlcyBzdHlsZXMgb24gdGhlIEF2YXRhciBjb250YWluZXIuXG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEBkZXByZWNhdGVkXG4gICAqIFRoaXMgd2lsbCBiZSBkZXRlcm1pbmVkIGF1dG9tYXRpY2FsbHkgYnkgdGhlIHRoZW1lIG1vdmluZyBmb3J3YXJkLlxuICAgKiBTdXBwbHlpbmcgaXQgd2lsbCBkZXRlcm1pbmUgdGhlIGNvbG9yIG9mIGRyb3Agc2hhZG93LlxuICAgKi9cbiAgbW9kZT86IFZpc3VhbFRoZW1lO1xufTtcblxuZXhwb3J0IHR5cGUgQXZhdGFyUHJvcHMgPSBBdmF0YXJCYXNlUHJvcHMgJiBBdmF0YXJJbWFnZVByb3BzO1xuXG5leHBvcnQgY29uc3QgQXZhdGFyOiBSZWFjdC5GQzxBdmF0YXJQcm9wcz4gPSAoe1xuICBtb2RlLFxuICBkaXNhYmxlRHJvcHNoYWRvdyxcbiAgLy8gRU5ULTM2MSBGaXhlZCBGaXJlZm94IElzc3VlLCBzZXQgZGVmYXVsdCBzaXplIHRvIDI0IGZyb20gMTE4XG4gIHNpemUgPSAyNCxcbiAgY2xhc3NOYW1lLFxuICAuLi5hdmF0YXJJbWFnZVByb3BzXG59KSA9PiAoXG4gIDxBdmF0YXJDb250YWluZXJcbiAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICBtb2RlPXttb2RlfVxuICAgIGRpc2FibGVEcm9wc2hhZG93PXtkaXNhYmxlRHJvcHNoYWRvd31cbiAgICBkYXRhLXRlc3RpZD1cImF2YXRhci1jb250YWluZXJcIlxuICA+XG4gICAgPEltYWdlIGRpbWVuc2lvbnM9e3NpemV9IHsuLi5hdmF0YXJJbWFnZVByb3BzfSAvPlxuICA8L0F2YXRhckNvbnRhaW5lcj5cbik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT2MifQ== */");
+const AvatarContainer = /* @__PURE__ */ styled("div", {
+	target: "e1n8wu6u1",
+	label: "brand-AvatarContainer"
+})("position:relative;display:table;", ({ disableDropshadow, mode }) => !disableDropshadow && css$1`
+      &::before {
+        content: '';
+        position: absolute;
+        border-radius: 50%;
+        transform: scale(0.92);
+        transform-origin: bottom right;
+        height: 100%;
+        width: 100%;
+        background-color: ${mode ? mode === "light" ? theme.colors.lightGreen : theme.colors.green : theme.colors["feedback-success"]};
+      }
+    `, " ", Image, "{position:relative;border-radius:50%;object-fit:cover;", ({ disableDropshadow }) => !disableDropshadow && css$1`
+        transform: scale(0.92);
+        transform-origin: top left;
+      `, "}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0F2YXRhci9pbmRleC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9BdmF0YXIvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFZpc3VhbFRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgc3R5bGVkT3B0aW9ucywgc3lzdGVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBSZXNwb25zaXZlUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuY29uc3QgSW1hZ2UgPSBzdHlsZWQoJ2ltZycsIHN0eWxlZE9wdGlvbnM8J2ltZyc+KCkpKHN5c3RlbS5sYXlvdXQpO1xuXG5jb25zdCBBdmF0YXJDb250YWluZXIgPSBzdHlsZWQuZGl2PHtcbiAgbW9kZT86IFZpc3VhbFRoZW1lO1xuICBkaXNhYmxlRHJvcHNoYWRvdz86IGJvb2xlYW47XG59PmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiB0YWJsZTtcblxuICAkeyh7IGRpc2FibGVEcm9wc2hhZG93LCBtb2RlIH0pID0+XG4gICAgIWRpc2FibGVEcm9wc2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgJjo6YmVmb3JlIHtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOTIpO1xuICAgICAgICB0cmFuc2Zvcm0tb3JpZ2luOiBib3R0b20gcmlnaHQ7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7bW9kZVxuICAgICAgICAgID8gbW9kZSA9PT0gJ2xpZ2h0J1xuICAgICAgICAgICAgPyB0aGVtZS5jb2xvcnMubGlnaHRHcmVlblxuICAgICAgICAgICAgOiB0aGVtZS5jb2xvcnMuZ3JlZW5cbiAgICAgICAgICA6IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stc3VjY2VzcyddfTtcbiAgICAgIH1cbiAgICBgfVxuXG4gICR7SW1hZ2V9IHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuXG4gICAgJHsoeyBkaXNhYmxlRHJvcHNoYWRvdyB9KSA9PlxuICAgICAgIWRpc2FibGVEcm9wc2hhZG93ICYmXG4gICAgICBjc3NgXG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45Mik7XG4gICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBsZWZ0O1xuICAgICAgYH1cbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgQXZhdGFySW1hZ2VQcm9wcyA9XG4gIHwgeyBhbHQ6IHN0cmluZzsgJ2FyaWEtbGFiZWxsZWRieSc/OiBuZXZlciB9XG4gIHwgeyBhbHQ/OiBuZXZlcjsgJ2FyaWEtbGFiZWxsZWRieSc6IHN0cmluZyB9O1xuXG5leHBvcnQgdHlwZSBBdmF0YXJCYXNlUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBwYXRoIHRvIGltYWdlIGFzc2V0XG4gICAqL1xuICBzcmM6IHN0cmluZztcblxuICAvKipcbiAgICogRGlzYWJsZXMgdGhlIGRyb3Agc2hhZG93IGVudGlyZWx5LlxuICAgKi9cbiAgZGlzYWJsZURyb3BzaGFkb3c/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBBdmF0YXIuXG4gICAqL1xuICBzaXplPzogUmVzcG9uc2l2ZVByb3A8MjQgfCAzMiB8IDQwIHwgNDggfCA2NCB8IDExOD4gfCAnMTAwJSc7XG5cbiAgLyoqXG4gICAqIE92ZXJyaWRlcyBzdHlsZXMgb24gdGhlIEF2YXRhciBjb250YWluZXIuXG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEBkZXByZWNhdGVkXG4gICAqIFRoaXMgd2lsbCBiZSBkZXRlcm1pbmVkIGF1dG9tYXRpY2FsbHkgYnkgdGhlIHRoZW1lIG1vdmluZyBmb3J3YXJkLlxuICAgKiBTdXBwbHlpbmcgaXQgd2lsbCBkZXRlcm1pbmUgdGhlIGNvbG9yIG9mIGRyb3Agc2hhZG93LlxuICAgKi9cbiAgbW9kZT86IFZpc3VhbFRoZW1lO1xufTtcblxuZXhwb3J0IHR5cGUgQXZhdGFyUHJvcHMgPSBBdmF0YXJCYXNlUHJvcHMgJiBBdmF0YXJJbWFnZVByb3BzO1xuXG5leHBvcnQgY29uc3QgQXZhdGFyOiBSZWFjdC5GQzxBdmF0YXJQcm9wcz4gPSAoe1xuICBtb2RlLFxuICBkaXNhYmxlRHJvcHNoYWRvdyxcbiAgLy8gRU5ULTM2MSBGaXhlZCBGaXJlZm94IElzc3VlLCBzZXQgZGVmYXVsdCBzaXplIHRvIDI0IGZyb20gMTE4XG4gIHNpemUgPSAyNCxcbiAgY2xhc3NOYW1lLFxuICAuLi5hdmF0YXJJbWFnZVByb3BzXG59KSA9PiAoXG4gIDxBdmF0YXJDb250YWluZXJcbiAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICBtb2RlPXttb2RlfVxuICAgIGRpc2FibGVEcm9wc2hhZG93PXtkaXNhYmxlRHJvcHNoYWRvd31cbiAgICBkYXRhLXRlc3RpZD1cImF2YXRhci1jb250YWluZXJcIlxuICA+XG4gICAgPEltYWdlIGRpbWVuc2lvbnM9e3NpemV9IHsuLi5hdmF0YXJJbWFnZVByb3BzfSAvPlxuICA8L0F2YXRhckNvbnRhaW5lcj5cbik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU3dCIn0= */");
+const Avatar = ({ mode, disableDropshadow, size = 24, className, ...avatarImageProps }) => /* @__PURE__ */ React$1.createElement(AvatarContainer, {
+	className,
+	mode,
+	disableDropshadow,
+	"data-testid": "avatar-container"
+}, /* @__PURE__ */ React$1.createElement(Image, {
+	dimensions: size,
+	...avatarImageProps
+}));
+
+//#endregion
+export { Avatar };
+//# sourceMappingURL=index.js.map

package/dist/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["styledOptions","system","theme","css","styled","React","Image","layout","AvatarContainer","disableDropshadow","mode","colors","lightGreen","green","Avatar","size","className","avatarImageProps","data-testid","dimensions"],"sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import { VisualTheme } from '@codecademy/gamut';\nimport { styledOptions, system, theme } from '@codecademy/gamut-styles';\nimport { ResponsiveProp } from '@codecademy/variance';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nconst Image = styled('img', styledOptions<'img'>())(system.layout);\n\nconst AvatarContainer = styled.div<{\n  mode?: VisualTheme;\n  disableDropshadow?: boolean;\n}>`\n  position: relative;\n  display: table;\n\n  ${({ disableDropshadow, mode }) =>\n    !disableDropshadow &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        border-radius: 50%;\n        transform: scale(0.92);\n        transform-origin: bottom right;\n        height: 100%;\n        width: 100%;\n        background-color: ${mode\n          ? mode === 'light'\n            ? theme.colors.lightGreen\n            : theme.colors.green\n          : theme.colors['feedback-success']};\n      }\n    `}\n\n  ${Image} {\n    position: relative;\n    border-radius: 50%;\n    object-fit: cover;\n\n    ${({ disableDropshadow }) =>\n      !disableDropshadow &&\n      css`\n        transform: scale(0.92);\n        transform-origin: top left;\n      `}\n  }\n`;\n\nexport type AvatarImageProps =\n  | { alt: string; 'aria-labelledby'?: never }\n  | { alt?: never; 'aria-labelledby': string };\n\nexport type AvatarBaseProps = {\n  /**\n   * path to image asset\n   */\n  src: string;\n\n  /**\n   * Disables the drop shadow entirely.\n   */\n  disableDropshadow?: boolean;\n\n  /**\n   * Size of the Avatar.\n   */\n  size?: ResponsiveProp<24 | 32 | 40 | 48 | 64 | 118> | '100%';\n\n  /**\n   * Overrides styles on the Avatar container.\n   */\n  className?: string;\n\n  /**\n   * @deprecated\n   * This will be determined automatically by the theme moving forward.\n   * Supplying it will determine the color of drop shadow.\n   */\n  mode?: VisualTheme;\n};\n\nexport type AvatarProps = AvatarBaseProps & AvatarImageProps;\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  mode,\n  disableDropshadow,\n  // ENT-361 Fixed Firefox Issue, set default size to 24 from 118\n  size = 24,\n  className,\n  ...avatarImageProps\n}) => (\n  <AvatarContainer\n    className={className}\n    mode={mode}\n    disableDropshadow={disableDropshadow}\n    data-testid=\"avatar-container\"\n  >\n    <Image dimensions={size} {...avatarImageProps} />\n  </AvatarContainer>\n);\n"],"mappings":";;;;;;AAOA,MAAMM,QAAQF,uBAAO,OAAA;;;IAAOJ,eAAsB;GAAEC,OAAOM,QAAM,sjHAAA;AAEjE,MAAMC,kBAAkBJ,uBAAAA,OAAAA;;;wCAOnB,EAAEK,mBAAmBC,WACtB,CAACD,qBACDN,KAAG;;;;;;;;;4BASqBO,OAChBA,SAAS,UACPR,MAAMS,OAAOC,aACbV,MAAMS,OAAOE,QACfX,MAAMS,OAAO,oBAAoB;;OAExC,KAEDL,OAAAA,2DAKG,EAAEG,wBACH,CAACA,qBACDN,KAAG;;;SAGF,KAAA,sjHAAA;AAuCP,MAAaW,UAAiC,EAC5CJ,MACAD,mBAEAM,OAAO,IACPC,WACA,GAAGC,uBAEH,wBAAA,cAACT,iBAAAA;CACYQ;CACLN;CACaD;CACnBS,eAAY;GAEZ,wBAAA,cAACZ,OAAAA;CAAMa,YAAYJ;CAAO,GAAGE"}

package/dist/AvatarChooser/index.cjs

@@ -0,0 +1,80 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../Avatar/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/AvatarChooser/index.tsx
+const baseSize = 75;
+const smBreakpointSize = 120;
+const StyledAvatar = /* @__PURE__ */ (0, _emotion_styled.default)(require_index.Avatar, {
+	target: "e1hggsdq0",
+	label: "brand-StyledAvatar"
+})("img{width:", (0, _codecademy_gamut_styles.pxRem)(baseSize), ";height:", (0, _codecademy_gamut_styles.pxRem)(baseSize), ";}", _codecademy_gamut_styles.theme.breakpoints.sm, "{img{width:", (0, _codecademy_gamut_styles.pxRem)(smBreakpointSize), ";height:", (0, _codecademy_gamut_styles.pxRem)(smBreakpointSize), ";}}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0F2YXRhckNob29zZXIvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvQXZhdGFyQ2hvb3Nlci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRmxleEJveCxcbiAgRm9ybUVycm9yLFxuICBJbnB1dCxcbiAgVGV4dEJ1dHRvbixcbiAgVXNlRm9ybVJldHVybixcbiAgVmFsaWRhdGUsXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHB4UmVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXZhdGFyIH0gZnJvbSAnLi4vQXZhdGFyJztcblxudHlwZSBBdmF0YXJDaG9vc2VyUHJvcHMgPSB7XG4gIHNyYzogc3RyaW5nO1xuICBuYW1lPzogc3RyaW5nO1xuICByZWdpc3Rlcj86IFVzZUZvcm1SZXR1cm5bJ3JlZ2lzdGVyJ107XG4gIG9uSW1hZ2VDaGFuZ2VkPzogKGltYWdlRmlsZUxpc3Q6IEZpbGVMaXN0KSA9PiB2b2lkO1xuICB2YWxpZGF0ZT86XG4gICAgfCBWYWxpZGF0ZTxGaWxlTGlzdCwgW0ZpbGVMaXN0XT5cbiAgICB8IFJlY29yZDxzdHJpbmcsIFZhbGlkYXRlPEZpbGVMaXN0LCBbRmlsZUxpc3RdPj47XG4gIGVycm9yPzogc3RyaW5nO1xufTtcblxuY29uc3QgYmFzZVNpemUgPSA3NTtcbmNvbnN0IHNtQnJlYWtwb2ludFNpemUgPSAxMjA7XG5cbmNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChBdmF0YXIpYFxuICBpbWcge1xuICAgIHdpZHRoOiAke3B4UmVtKGJhc2VTaXplKX07XG4gICAgaGVpZ2h0OiAke3B4UmVtKGJhc2VTaXplKX07XG4gIH1cblxuICAke3RoZW1lLmJyZWFrcG9pbnRzLnNtfSB7XG4gICAgaW1nIHtcbiAgICAgIHdpZHRoOiAke3B4UmVtKHNtQnJlYWtwb2ludFNpemUpfTtcbiAgICAgIGhlaWdodDogJHtweFJlbShzbUJyZWFrcG9pbnRTaXplKX07XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBIaWRkZW5JbnB1dCA9IHN0eWxlZChJbnB1dClgXG4gIGRpc3BsYXk6IG5vbmU7XG5gO1xuXG5jb25zdCBTdHlsZWRGb3JtRXJyb3IgPSBzdHlsZWQoRm9ybUVycm9yKWBcbiAgcG9zaXRpb246IGluaXRpYWw7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBBdmF0YXJDaG9vc2VyOiBSZWFjdC5GQzxBdmF0YXJDaG9vc2VyUHJvcHM+ID0gKHtcbiAgc3JjOiBleGlzdGluZ1NyYyxcbiAgb25JbWFnZUNoYW5nZWQsXG4gIGVycm9yLFxuICByZWdpc3RlcixcbiAgdmFsaWRhdGUgPSB2YWxpZGF0ZVBob3RvVXBsb2FkLFxuICBuYW1lID0gJ0F2YXRhciBQaG90bycsXG59KSA9PiB7XG4gIGNvbnN0IFtpbWFnZVNyYywgc2V0SW1hZ2VTcmNdID0gdXNlU3RhdGU8c3RyaW5nPihleGlzdGluZ1NyYyk7XG4gIGNvbnN0IGNob29zZVBob3RvTGFiZWxSZWYgPSB1c2VSZWY8SFRNTExhYmVsRWxlbWVudD4obnVsbCk7XG5cbiAgY29uc3Qgb25DaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQ/LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xuICAgICAgY29uc3QgaW1hZ2VGaWxlbGlzdCA9IHRhcmdldD8uZmlsZXM7XG4gICAgICBjb25zdCBpbWFnZUZpbGUgPSBpbWFnZUZpbGVsaXN0Py5bMF07XG5cbiAgICAgIGlmIChpbWFnZUZpbGVsaXN0KSBvbkltYWdlQ2hhbmdlZD8uKGltYWdlRmlsZWxpc3QpO1xuICAgICAgaWYgKGltYWdlRmlsZSkgc2V0SW1hZ2VTcmMoVVJMLmNyZWF0ZU9iamVjdFVSTChpbWFnZUZpbGUpKTtcbiAgICB9LFxuICAgIFtzZXRJbWFnZVNyYywgb25JbWFnZUNoYW5nZWRdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RmxleEJveFxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgIHdpZHRoPVwiZml0LWNvbnRlbnRcIlxuICAgICAgbWF4V2lkdGg9e3B4UmVtKDEyMCl9XG4gICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgID5cbiAgICAgIDxTdHlsZWRBdmF0YXIgc3JjPXtpbWFnZVNyY30gZGlzYWJsZURyb3BzaGFkb3cgYWx0PVwiQXZhdGFyIFBob3RvXCIgLz5cbiAgICAgIDxUZXh0QnV0dG9uXG4gICAgICAgIG10PXt7IF86IDQsIHNtOiAxMiB9fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBjaG9vc2VQaG90b0xhYmVsUmVmLmN1cnJlbnQ/LmNsaWNrKCl9XG4gICAgICA+XG4gICAgICAgIHsvKiBodHRwczovL2dpdGh1Yi5jb20vanN4LWVzbGludC9lc2xpbnQtcGx1Z2luLWpzeC1hMTF5L2Jsb2IvbWFpbi9kb2NzL3J1bGVzL2xhYmVsLWhhcy1hc3NvY2lhdGVkLWNvbnRyb2wubWQgKi99XG4gICAgICAgIHsvKiBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUganN4LWExMXkvbGFiZWwtaGFzLWFzc29jaWF0ZWQtY29udHJvbCAqL31cbiAgICAgICAgPGxhYmVsIHJlZj17Y2hvb3NlUGhvdG9MYWJlbFJlZn0gaHRtbEZvcj1cImF2YXRhci1jaG9vc2VyXCI+XG4gICAgICAgICAgQ2hvb3NlIFBob3RvXG4gICAgICAgIDwvbGFiZWw+XG4gICAgICA8L1RleHRCdXR0b24+XG5cbiAgICAgIDxIaWRkZW5JbnB1dFxuICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgIGlkPVwiYXZhdGFyLWNob29zZXJcIlxuICAgICAgICBhcmlhLWludmFsaWQ9e0Jvb2xlYW4oZXJyb3IpfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAgIHsuLi5yZWdpc3Rlcj8uKG5hbWUsIHtcbiAgICAgICAgICBvbkNoYW5nZSxcbiAgICAgICAgICB2YWxpZGF0ZSxcbiAgICAgICAgICByZXF1aXJlZDogZmFsc2UsXG4gICAgICAgIH0pfVxuICAgICAgLz5cbiAgICAgIHtlcnJvciAmJiA8U3R5bGVkRm9ybUVycm9yIHJvbGU9XCJhbGVydFwiPntlcnJvcn08L1N0eWxlZEZvcm1FcnJvcj59XG4gICAgPC9GbGV4Qm94PlxuICApO1xufTtcblxuY29uc3QgdmFsaWRhdGVQaG90b1VwbG9hZCA9IChmaWxlczogRmlsZUxpc3QpOiBib29sZWFuIHwgc3RyaW5nID0+IHtcbiAgY29uc3QgTUFYX0ZJTEVfU0laRSA9IDUyNDI4ODA7XG4gIGNvbnN0IE1BWF9GSUxFX1NJWkVfSU5fTUIgPSA1O1xuXG4gIGNvbnN0IGZpbGUgPSBmaWxlcz8uaXRlbSgwKTtcbiAgaWYgKCFmaWxlKSByZXR1cm4gdHJ1ZTtcblxuICBjb25zdCB7IHR5cGUsIHNpemUgfSA9IGZpbGU7XG4gIGlmICghWydpbWFnZS9qcGVnJywgJ2ltYWdlL3BuZyddLmluY2x1ZGVzKHR5cGUpKVxuICAgIHJldHVybiAnUGxlYXNlIHVwbG9hZCBhIGpwZWcgb3IgcG5nIGZpbGUuJztcblxuICBpZiAoc2l6ZSA+IE1BWF9GSUxFX1NJWkUpXG4gICAgcmV0dXJuIGBTb3JyeSwgd2UgY2Fubm90IGFjY2VwdCBmaWxlcyBsYXJnZXIgdGhhbiAke01BWF9GSUxFX1NJWkVfSU5fTUJ9IE1CLmA7XG5cbiAgcmV0dXJuIHRydWU7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCcUIifQ== */");
+const HiddenInput = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.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__ */ (0, _emotion_styled.default)(_codecademy_gamut.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] = (0, react.useState)(existingSrc);
+	const choosePhotoLabelRef = (0, react.useRef)(null);
+	const onChange = (0, react.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.createElement(_codecademy_gamut.FlexBox, {
+		alignItems: "center",
+		flexDirection: "column",
+		justifyContent: "center",
+		width: "fit-content",
+		maxWidth: (0, _codecademy_gamut_styles.pxRem)(120),
+		"aria-live": "polite"
+	}, /* @__PURE__ */ react.createElement(StyledAvatar, {
+		src: imageSrc,
+		disableDropshadow: true,
+		alt: "Avatar Photo"
+	}), /* @__PURE__ */ react.createElement(_codecademy_gamut.TextButton, {
+		mt: {
+			_: 4,
+			sm: 12
+		},
+		onClick: () => choosePhotoLabelRef.current?.click()
+	}, /* @__PURE__ */ react.createElement("label", {
+		ref: choosePhotoLabelRef,
+		htmlFor: "avatar-chooser"
+	}, "Choose Photo")), /* @__PURE__ */ react.createElement(HiddenInput, {
+		type: "file",
+		id: "avatar-chooser",
+		"aria-invalid": Boolean(error),
+		name,
+		onChange,
+		...register?.(name, {
+			onChange,
+			validate,
+			required: false
+		})
+	}), error && /* @__PURE__ */ react.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;
+};
+
+//#endregion
+exports.AvatarChooser = AvatarChooser;
+//# sourceMappingURL=index.cjs.map

package/dist/AvatarChooser/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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,6CAAOK,sBAAAA;;;qDAETC,SAAAA,EAAAA,gDACCA,SAAAA,EAAAA,MAGhBP,+BAAMU,YAAYC,IAAE,mDAEHH,iBAAAA,EAAAA,gDACCA,iBAAAA,EAAAA,OAAAA,k4JAAAA;AAKtB,MAAMI,cAAcX,6CAAOJ,yBAAAA;;;;AAI3B,MAAMgB,kBAAkBZ,6CAAOL,6BAAAA;;;;AAK/B,MAAakB,iBAA+C,EAC1DC,KAAKC,aACLC,gBACAC,OACAC,UACAC,WAAWC,qBACXC,OAAO,qBACR;CACC,MAAM,CAACC,UAAUC,mCAAgCR,YAAAA;CACjD,MAAMS,wCAA+C,KAAA;CAErD,MAAMC,mCACHC,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,sBAAA,cAACtB,2BAAAA;EACCuC,YAAW;EACXC,eAAc;EACdC,gBAAe;EACfC,OAAM;EACNC,8CAAgB,IAAA;EAChBC,aAAU;IAEV,sBAAA,cAAC9B,cAAAA;EAAaM,KAAKQ;EAAUiB,mBAAAA;EAAkBC,KAAI;KACnD,sBAAA,cAAC3C,8BAAAA;EACC4C,IAAI;GAAEC,GAAG;GAAGhC,IAAI;GAAG;EACnBiC,eAAenB,oBAAoBoB,SAASC,OAAAA;IAI5C,sBAAA,cAACC,SAAAA;EAAMC,KAAKvB;EAAqBwB,SAAQ;IAAiB,eAAA,CAAA,EAK5D,sBAAA,cAACrC,aAAAA;EACCsC,MAAK;EACLC,IAAG;EACHC,gBAAcC,QAAQnC,MAAAA;EAChBI;EACII;EACT,GAAGP,WAAWG,MAAM;GACnBI;GACAN;GACAkC,UAAU;GACZ,CAAE;KAEHpC,SAAS,sBAAA,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/AvatarChooser/index.d.cts

@@ -0,0 +1,16 @@
+import { UseFormReturn, Validate } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/AvatarChooser/index.d.ts
+type AvatarChooserProps = {
+  src: string;
+  name?: string;
+  register?: UseFormReturn['register'];
+  onImageChanged?: (imageFileList: FileList) => void;
+  validate?: Validate<FileList, [FileList]> | Record<string, Validate<FileList, [FileList]>>;
+  error?: string;
+};
+declare const AvatarChooser: React$1.FC<AvatarChooserProps>;
+//#endregion
+export { AvatarChooser };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/AvatarChooser/index.tsx"],"mappings":";;;;KAeK,kBAAA;EACH,GAAA;EACA,IAAA;EACA,QAAA,GAAW,aAAA;EACX,cAAA,IAAkB,aAAA,EAAe,QAAA;EACjC,QAAA,GACI,QAAA,CAAS,QAAA,GAAW,QAAA,KACpB,MAAA,SAAe,QAAA,CAAS,QAAA,GAAW,QAAA;EACvC,KAAA;AAAA;AAAA,cA6BW,aAAA,EAAe,OAAA,CAAM,EAAA,CAAG,kBAAA"}

package/dist/AvatarChooser/index.d.ts

@@ -1,12 +1,16 @@
-import { UseFormReturn, Validate } from '@codecademy/gamut';
-import * as React from 'react';
+import { UseFormReturn, Validate } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/AvatarChooser/index.d.ts
 type AvatarChooserProps = {
-    src: string;
-    name?: string;
-    register?: UseFormReturn['register'];
-    onImageChanged?: (imageFileList: FileList) => void;
-    validate?: Validate<FileList, [FileList]> | Record<string, Validate<FileList, [FileList]>>;
-    error?: string;
+  src: string;
+  name?: string;
+  register?: UseFormReturn['register'];
+  onImageChanged?: (imageFileList: FileList) => void;
+  validate?: Validate<FileList, [FileList]> | Record<string, Validate<FileList, [FileList]>>;
+  error?: string;
 };
-export declare const AvatarChooser: React.FC<AvatarChooserProps>;
-export {};
+declare const AvatarChooser: React$1.FC<AvatarChooserProps>;
+//#endregion
+export { AvatarChooser };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/AvatarChooser/index.tsx"],"mappings":";;;;KAeK,kBAAA;EACH,GAAA;EACA,IAAA;EACA,QAAA,GAAW,aAAA;EACX,cAAA,IAAkB,aAAA,EAAe,QAAA;EACjC,QAAA,GACI,QAAA,CAAS,QAAA,GAAW,QAAA,KACpB,MAAA,SAAe,QAAA,CAAS,QAAA,GAAW,QAAA;EACvC,KAAA;AAAA;AAAA,cA6BW,aAAA,EAAe,OAAA,CAAM,EAAA,CAAG,kBAAA"}