@codecademy/brand 4.0.0-alpha.b1cfc89ee2.0 → 4.0.0-alpha.b5e5d575e.0

package/dist/EditorialImage/index.mjs

@@ -1,20 +0,0 @@
-import styles_module_default from "./styles.module.mjs";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/EditorialImage/index.tsx
-const EditorialImage = ({ image, alt, caption }) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-	className: styles_module_default.imageContainer,
-	children: /* @__PURE__ */ jsx("img", {
-		className: styles_module_default.image,
-		alt,
-		src: image
-	})
-}), caption && /* @__PURE__ */ jsx("span", {
-	className: styles_module_default.caption,
-	children: caption
-})] });
-
-//#endregion
-export { EditorialImage };
-//# sourceMappingURL=index.mjs.map

package/dist/EditorialImage/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["EditorialImage: React.FC<EditorialImageProps>","styles"],"sources":["../../src/EditorialImage/index.tsx"],"sourcesContent":["import * as React from 'react';\n\n// eslint-disable-next-line gamut/no-css-standalone\nimport styles from './styles.module.scss';\n\nexport type EditorialImageProps = {\n  /** The URL used for the image src */\n  image: string;\n  /** Alternative text for the image  */\n  alt: string;\n  /** An optional caption that will display below the image  */\n  caption?: string;\n};\n\nexport const EditorialImage: React.FC<EditorialImageProps> = ({\n  image,\n  alt,\n  caption,\n}) => (\n  <div>\n    <div className={styles.imageContainer}>\n      <img className={styles.image} alt={alt} src={image} />\n    </div>\n    {caption && <span className={styles.caption}>{caption}</span>}\n  </div>\n);\n"],"mappings":";;;;;AAcA,MAAaA,kBAAiD,EAC5D,OACA,KACA,cAEA,qBAAC,oBACC,oBAAC;CAAI,WAAWC,sBAAO;WACrB,oBAAC;EAAI,WAAWA,sBAAO;EAAY;EAAK,KAAK;GAAS;EAClD,EACL,WAAW,oBAAC;CAAK,WAAWA,sBAAO;WAAU;EAAe,IACzD"}

package/dist/EditorialImage/styles.module.cjs

@@ -1,6 +0,0 @@
-
-//#region src/EditorialImage/styles.module.scss
-var styles_module_default = "assets/styles.module-Daicays_.scss";
-
-//#endregion
-//# sourceMappingURL=styles.module.cjs.map

package/dist/EditorialImage/styles.module.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.module.cjs","names":[],"sources":["../../src/EditorialImage/styles.module.scss"],"sourcesContent":["__ROLLDOWN_ASSET_FILENAME__"],"mappings":";;4BAAA,oCAAA"}

package/dist/EditorialImage/styles.module.mjs

@@ -1,6 +0,0 @@
-//#region src/EditorialImage/styles.module.scss
-var styles_module_default = "assets/styles.module-Daicays_.scss";
-
-//#endregion
-export { styles_module_default as default };
-//# sourceMappingURL=styles.module.mjs.map

package/dist/EditorialImage/styles.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.module.mjs","names":[],"sources":["../../src/EditorialImage/styles.module.scss"],"sourcesContent":["__ROLLDOWN_ASSET_FILENAME__"],"mappings":";4BAAA,oCAAA"}

package/dist/EmptySection/index.cjs

@@ -1,160 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
-
-//#region src/EmptySection/index.tsx
-const EmptyContainer = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)((0, _codecademy_gamut_styles.variant)({
-	prop: "stretchDirection",
-	defaultVariant: "left",
-	base: {
-		justifySelf: "center",
-		position: "relative",
-		px: 32,
-		py: {
-			_: 64,
-			lg: 96
-		},
-		width: 1
-	},
-	variants: {
-		left: {
-			pl: { sm: 0 },
-			pr: {
-				sm: 64,
-				lg: 96
-			}
-		},
-		right: {
-			pr: { sm: 0 },
-			pl: {
-				sm: 64,
-				lg: 96
-			}
-		},
-		none: {}
-	}
-}));
-const Dots = (0, _emotion_styled.default)(_codecademy_gamut_patterns.DotLoose)((0, _codecademy_gamut_styles.variant)({
-	prop: "stretchDirection",
-	defaultVariant: "left",
-	base: {
-		position: "absolute",
-		top: 0,
-		bottom: 0,
-		left: -16
-	},
-	variants: {
-		left: {
-			left: {
-				xs: -32,
-				sm: -64,
-				lg: -96,
-				xl: "calc((1248px - 100vw) / 2)"
-			},
-			width: {
-				_: "100vw",
-				xs: "calc(100vw - 32px)",
-				sm: "calc(100vw - 64px)",
-				lg: "calc(100vw - 96px)",
-				xl: "calc(1248px + ((100vw - 1248px) / 2))"
-			}
-		},
-		right: {
-			left: { xs: 0 },
-			width: {
-				_: "100vw",
-				xs: "calc(100vw - 32px)",
-				sm: "calc(100vw - 64px)",
-				lg: "calc(100vw - 96px)",
-				xl: "calc(1248px + ((100vw - 1248px) / 2))"
-			}
-		},
-		none: {
-			left: 0,
-			width: "100%"
-		}
-	}
-}));
-const illustrationPositionVariants = (0, _codecademy_gamut_styles.variant)({
-	prop: "illustrationPosition",
-	defaultVariant: "right",
-	base: {
-		mx: {
-			_: "auto",
-			sm: 0
-		},
-		mb: {
-			_: 32,
-			sm: 0
-		}
-	},
-	variants: {
-		left: { mr: { sm: 48 } },
-		right: { ml: { sm: 48 } }
-	}
-});
-const IllustrationContainer = (0, _emotion_styled.default)("div", _codecademy_gamut_styles.styledOptions)(illustrationPositionVariants);
-const EmptySection = ({ bodyText, children, headingText, illustration: Illustration, stretchDirection, illustrationPosition = stretchDirection === "right" ? "left" : "right" }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EmptyContainer, {
-		stretchDirection,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dots, { stretchDirection }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-			maxWidth: "822px",
-			flexBasis: "100%",
-			position: "relative",
-			bg: "background-current",
-			py: 48,
-			px: {
-				_: 16,
-				sm: 48,
-				md: 64
-			},
-			zIndex: 1,
-			flexDirection: {
-				_: "column",
-				sm: illustrationPosition === "right" ? "row-reverse" : "row"
-			},
-			justifyContent: {
-				_: "space-around",
-				md: "space-between"
-			},
-			alignItems: "center",
-			textAlign: {
-				_: "center",
-				sm: "start"
-			},
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IllustrationContainer, {
-				illustrationPosition,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Illustration, { width: (0, _codecademy_gamut_styles.pxRem)(100) })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-				flexDirection: "column",
-				alignItems: {
-					_: "center",
-					sm: "start"
-				},
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-						as: "h2",
-						fontSize: 22,
-						mb: 8,
-						children: headingText
-					}),
-					bodyText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-						mb: 32,
-						children: bodyText
-					}),
-					children
-				]
-			})]
-		})]
-	});
-};
-
-//#endregion
-exports.EmptySection = EmptySection;
-//# sourceMappingURL=index.cjs.map

package/dist/EmptySection/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["FlexBox","DotLoose","styledOptions","EmptySection: React.FC<EmptySectionProps>","Text"],"sources":["../../src/EmptySection/index.tsx"],"sourcesContent":["import { ButtonProps, FlexBox, Text } from '@codecademy/gamut';\nimport { IllustrationProps } from '@codecademy/gamut-illustrations';\nimport { DotLoose } from '@codecademy/gamut-patterns';\nimport { pxRem, styledOptions, variant } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { DropdownButtonProps } from '..';\n\nexport type EmptySectionProps = {\n  /**\n   * Paragraph text that displays beneath the heading text\n   */\n  bodyText?: string;\n  /**\n   * Button or dropdown button with an action for the user to take\n   */\n  children?: React.ReactElement<ButtonProps | DropdownButtonProps>;\n  /**\n   * The larger heading text that appears over the body text\n   */\n  headingText: string;\n  illustration: React.ComponentType<IllustrationProps>;\n  /**\n   * Whether the illustration appears to the left or right of the rest of the section's content\n   */\n  illustrationPosition?: 'left' | 'right';\n  /**\n   * Whether the pattern background stretches to the end of the left or right of the viewport\n   */\n  stretchDirection: 'left' | 'right' | 'none';\n};\n\nconst EmptyContainer = styled(FlexBox)(\n  variant({\n    prop: 'stretchDirection',\n    defaultVariant: 'left',\n    base: {\n      justifySelf: 'center',\n      position: 'relative',\n      px: 32,\n      py: { _: 64, lg: 96 },\n      width: 1,\n    },\n    variants: {\n      left: {\n        pl: { sm: 0 },\n        pr: { sm: 64, lg: 96 },\n      },\n      right: {\n        pr: { sm: 0 },\n        pl: { sm: 64, lg: 96 },\n      },\n      none: {},\n    },\n  })\n);\n\nconst Dots = styled(DotLoose)(\n  variant({\n    prop: 'stretchDirection',\n    defaultVariant: 'left',\n    base: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: -16,\n    },\n    variants: {\n      left: {\n        left: {\n          xs: -32,\n          sm: -64,\n          lg: -96,\n          xl: 'calc((1248px - 100vw) / 2)',\n        },\n        width: {\n          _: '100vw',\n          xs: 'calc(100vw - 32px)',\n          sm: 'calc(100vw - 64px)',\n          lg: 'calc(100vw - 96px)',\n          xl: 'calc(1248px + ((100vw - 1248px) / 2))',\n        },\n      },\n      right: {\n        left: { xs: 0 },\n        width: {\n          _: '100vw',\n          xs: 'calc(100vw - 32px)',\n          sm: 'calc(100vw - 64px)',\n          lg: 'calc(100vw - 96px)',\n          xl: 'calc(1248px + ((100vw - 1248px) / 2))',\n        },\n      },\n      none: {\n        left: 0,\n        width: '100%',\n      },\n    },\n  })\n);\n\nconst illustrationPositionVariants = variant({\n  prop: 'illustrationPosition',\n  defaultVariant: 'right',\n  base: {\n    mx: { _: 'auto', sm: 0 },\n    mb: { _: 32, sm: 0 },\n  },\n  variants: {\n    left: {\n      mr: { sm: 48 },\n    },\n    right: {\n      ml: { sm: 48 },\n    },\n  },\n});\n\ntype IllustrationContainerProps = StyleProps<\n  typeof illustrationPositionVariants\n>;\n\nconst IllustrationContainer = styled(\n  'div',\n  styledOptions\n)<IllustrationContainerProps>(illustrationPositionVariants);\n\nexport const EmptySection: React.FC<EmptySectionProps> = ({\n  bodyText,\n  children,\n  headingText,\n  illustration: Illustration,\n  stretchDirection,\n  illustrationPosition = stretchDirection === 'right' ? 'left' : 'right',\n}) => {\n  const flexDirection =\n    illustrationPosition === 'right' ? 'row-reverse' : 'row';\n\n  return (\n    <EmptyContainer stretchDirection={stretchDirection}>\n      <Dots stretchDirection={stretchDirection} />\n      <FlexBox\n        maxWidth=\"822px\"\n        flexBasis=\"100%\"\n        position=\"relative\"\n        bg=\"background-current\"\n        py={48}\n        px={{ _: 16, sm: 48, md: 64 }}\n        zIndex={1}\n        flexDirection={{ _: 'column', sm: flexDirection }}\n        justifyContent={{ _: 'space-around', md: 'space-between' }}\n        alignItems=\"center\"\n        textAlign={{ _: 'center', sm: 'start' }}\n      >\n        <IllustrationContainer illustrationPosition={illustrationPosition}>\n          <Illustration width={pxRem(100)} />\n        </IllustrationContainer>\n        <FlexBox\n          flexDirection=\"column\"\n          alignItems={{ _: 'center', sm: 'start' }}\n        >\n          <Text as=\"h2\" fontSize={22} mb={8}>\n            {headingText}\n          </Text>\n          {bodyText && <Text mb={32}>{bodyText}</Text>}\n          {children}\n        </FlexBox>\n      </FlexBox>\n    </EmptyContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkCA,MAAM,8CAAwBA,0BAAQ,uCAC5B;CACN,MAAM;CACN,gBAAgB;CAChB,MAAM;EACJ,aAAa;EACb,UAAU;EACV,IAAI;EACJ,IAAI;GAAE,GAAG;GAAI,IAAI;GAAI;EACrB,OAAO;EACR;CACD,UAAU;EACR,MAAM;GACJ,IAAI,EAAE,IAAI,GAAG;GACb,IAAI;IAAE,IAAI;IAAI,IAAI;IAAI;GACvB;EACD,OAAO;GACL,IAAI,EAAE,IAAI,GAAG;GACb,IAAI;IAAE,IAAI;IAAI,IAAI;IAAI;GACvB;EACD,MAAM,EAAE;EACT;CACF,CAAC,CACH;AAED,MAAM,oCAAcC,oCAAS,uCACnB;CACN,MAAM;CACN,gBAAgB;CAChB,MAAM;EACJ,UAAU;EACV,KAAK;EACL,QAAQ;EACR,MAAM;EACP;CACD,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL;GACD,OAAO;IACL,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL;GACF;EACD,OAAO;GACL,MAAM,EAAE,IAAI,GAAG;GACf,OAAO;IACL,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL;GACF;EACD,MAAM;GACJ,MAAM;GACN,OAAO;GACR;EACF;CACF,CAAC,CACH;AAED,MAAM,qEAAuC;CAC3C,MAAM;CACN,gBAAgB;CAChB,MAAM;EACJ,IAAI;GAAE,GAAG;GAAQ,IAAI;GAAG;EACxB,IAAI;GAAE,GAAG;GAAI,IAAI;GAAG;EACrB;CACD,UAAU;EACR,MAAM,EACJ,IAAI,EAAE,IAAI,IAAI,EACf;EACD,OAAO,EACL,IAAI,EAAE,IAAI,IAAI,EACf;EACF;CACF,CAAC;AAMF,MAAM,qDACJ,OACAC,uCACD,CAA6B,6BAA6B;AAE3D,MAAaC,gBAA6C,EACxD,UACA,UACA,aACA,cAAc,cACd,kBACA,uBAAuB,qBAAqB,UAAU,SAAS,cAC3D;AAIJ,QACE,4CAAC;EAAiC;aAChC,2CAAC,QAAuB,mBAAoB,EAC5C,4CAACH;GACC,UAAS;GACT,WAAU;GACV,UAAS;GACT,IAAG;GACH,IAAI;GACJ,IAAI;IAAE,GAAG;IAAI,IAAI;IAAI,IAAI;IAAI;GAC7B,QAAQ;GACR,eAAe;IAAE,GAAG;IAAU,IAblC,yBAAyB,UAAU,gBAAgB;IAaE;GACjD,gBAAgB;IAAE,GAAG;IAAgB,IAAI;IAAiB;GAC1D,YAAW;GACX,WAAW;IAAE,GAAG;IAAU,IAAI;IAAS;cAEvC,2CAAC;IAA4C;cAC3C,2CAAC,gBAAa,2CAAa,IAAI,GAAI;KACb,EACxB,4CAACA;IACC,eAAc;IACd,YAAY;KAAE,GAAG;KAAU,IAAI;KAAS;;KAExC,2CAACI;MAAK,IAAG;MAAK,UAAU;MAAI,IAAI;gBAC7B;OACI;KACN,YAAY,2CAACA;MAAK,IAAI;gBAAK;OAAgB;KAC3C;;KACO;IACF;GACK"}

package/dist/EmptySection/index.d.cts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/EmptySection/index.tsx"],"sourcesContent":[],"mappings":";;;;;;KAUY,iBAAA;;AAAZ;;EAQ8C,QAAA,CAAA,EAAA,MAAA;EAAjC;;;EAKsB,QAAA,CAAA,EALtB,OAAA,CAAM,YAKgB,CALH,WAKG,GALW,mBAKX,CAAA;EA0GtB;;;;gBA1GG,OAAA,CAAM,cAAc;;;;;;;;;;cA0GvB,cAAc,OAAA,CAAM,GAAG"}

package/dist/EmptySection/index.d.mts

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

package/dist/EmptySection/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/EmptySection/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAUY,iBAAA;;;AAAZ;EAQgC,QAAA,CAAA,EAAA,MAAA;EAAc;;;EAK9B,QAAM,CAAA,EALT,OAAA,CAAM,YAKG,CALU,WAKV,GALwB,mBAKxB,CAAA;EAAa;AA0GnC;;;gBA1GgB,OAAA,CAAM,cAAc;;;;;;;;;;cA0GvB,cAAc,OAAA,CAAM,GAAG"}

package/dist/EmptySection/index.mjs

@@ -1,157 +0,0 @@
-import { FlexBox, Text } from "@codecademy/gamut";
-import { pxRem, styledOptions, variant } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { DotLoose } from "@codecademy/gamut-patterns";
-
-//#region src/EmptySection/index.tsx
-const EmptyContainer = styled(FlexBox)(variant({
-	prop: "stretchDirection",
-	defaultVariant: "left",
-	base: {
-		justifySelf: "center",
-		position: "relative",
-		px: 32,
-		py: {
-			_: 64,
-			lg: 96
-		},
-		width: 1
-	},
-	variants: {
-		left: {
-			pl: { sm: 0 },
-			pr: {
-				sm: 64,
-				lg: 96
-			}
-		},
-		right: {
-			pr: { sm: 0 },
-			pl: {
-				sm: 64,
-				lg: 96
-			}
-		},
-		none: {}
-	}
-}));
-const Dots = styled(DotLoose)(variant({
-	prop: "stretchDirection",
-	defaultVariant: "left",
-	base: {
-		position: "absolute",
-		top: 0,
-		bottom: 0,
-		left: -16
-	},
-	variants: {
-		left: {
-			left: {
-				xs: -32,
-				sm: -64,
-				lg: -96,
-				xl: "calc((1248px - 100vw) / 2)"
-			},
-			width: {
-				_: "100vw",
-				xs: "calc(100vw - 32px)",
-				sm: "calc(100vw - 64px)",
-				lg: "calc(100vw - 96px)",
-				xl: "calc(1248px + ((100vw - 1248px) / 2))"
-			}
-		},
-		right: {
-			left: { xs: 0 },
-			width: {
-				_: "100vw",
-				xs: "calc(100vw - 32px)",
-				sm: "calc(100vw - 64px)",
-				lg: "calc(100vw - 96px)",
-				xl: "calc(1248px + ((100vw - 1248px) / 2))"
-			}
-		},
-		none: {
-			left: 0,
-			width: "100%"
-		}
-	}
-}));
-const illustrationPositionVariants = variant({
-	prop: "illustrationPosition",
-	defaultVariant: "right",
-	base: {
-		mx: {
-			_: "auto",
-			sm: 0
-		},
-		mb: {
-			_: 32,
-			sm: 0
-		}
-	},
-	variants: {
-		left: { mr: { sm: 48 } },
-		right: { ml: { sm: 48 } }
-	}
-});
-const IllustrationContainer = styled("div", styledOptions)(illustrationPositionVariants);
-const EmptySection = ({ bodyText, children, headingText, illustration: Illustration, stretchDirection, illustrationPosition = stretchDirection === "right" ? "left" : "right" }) => {
-	return /* @__PURE__ */ jsxs(EmptyContainer, {
-		stretchDirection,
-		children: [/* @__PURE__ */ jsx(Dots, { stretchDirection }), /* @__PURE__ */ jsxs(FlexBox, {
-			maxWidth: "822px",
-			flexBasis: "100%",
-			position: "relative",
-			bg: "background-current",
-			py: 48,
-			px: {
-				_: 16,
-				sm: 48,
-				md: 64
-			},
-			zIndex: 1,
-			flexDirection: {
-				_: "column",
-				sm: illustrationPosition === "right" ? "row-reverse" : "row"
-			},
-			justifyContent: {
-				_: "space-around",
-				md: "space-between"
-			},
-			alignItems: "center",
-			textAlign: {
-				_: "center",
-				sm: "start"
-			},
-			children: [/* @__PURE__ */ jsx(IllustrationContainer, {
-				illustrationPosition,
-				children: /* @__PURE__ */ jsx(Illustration, { width: pxRem(100) })
-			}), /* @__PURE__ */ jsxs(FlexBox, {
-				flexDirection: "column",
-				alignItems: {
-					_: "center",
-					sm: "start"
-				},
-				children: [
-					/* @__PURE__ */ jsx(Text, {
-						as: "h2",
-						fontSize: 22,
-						mb: 8,
-						children: headingText
-					}),
-					bodyText && /* @__PURE__ */ jsx(Text, {
-						mb: 32,
-						children: bodyText
-					}),
-					children
-				]
-			})]
-		})]
-	});
-};
-
-//#endregion
-export { EmptySection };
-//# sourceMappingURL=index.mjs.map

package/dist/EmptySection/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["EmptySection: React.FC<EmptySectionProps>"],"sources":["../../src/EmptySection/index.tsx"],"sourcesContent":["import { ButtonProps, FlexBox, Text } from '@codecademy/gamut';\nimport { IllustrationProps } from '@codecademy/gamut-illustrations';\nimport { DotLoose } from '@codecademy/gamut-patterns';\nimport { pxRem, styledOptions, variant } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport { DropdownButtonProps } from '..';\n\nexport type EmptySectionProps = {\n  /**\n   * Paragraph text that displays beneath the heading text\n   */\n  bodyText?: string;\n  /**\n   * Button or dropdown button with an action for the user to take\n   */\n  children?: React.ReactElement<ButtonProps | DropdownButtonProps>;\n  /**\n   * The larger heading text that appears over the body text\n   */\n  headingText: string;\n  illustration: React.ComponentType<IllustrationProps>;\n  /**\n   * Whether the illustration appears to the left or right of the rest of the section's content\n   */\n  illustrationPosition?: 'left' | 'right';\n  /**\n   * Whether the pattern background stretches to the end of the left or right of the viewport\n   */\n  stretchDirection: 'left' | 'right' | 'none';\n};\n\nconst EmptyContainer = styled(FlexBox)(\n  variant({\n    prop: 'stretchDirection',\n    defaultVariant: 'left',\n    base: {\n      justifySelf: 'center',\n      position: 'relative',\n      px: 32,\n      py: { _: 64, lg: 96 },\n      width: 1,\n    },\n    variants: {\n      left: {\n        pl: { sm: 0 },\n        pr: { sm: 64, lg: 96 },\n      },\n      right: {\n        pr: { sm: 0 },\n        pl: { sm: 64, lg: 96 },\n      },\n      none: {},\n    },\n  })\n);\n\nconst Dots = styled(DotLoose)(\n  variant({\n    prop: 'stretchDirection',\n    defaultVariant: 'left',\n    base: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: -16,\n    },\n    variants: {\n      left: {\n        left: {\n          xs: -32,\n          sm: -64,\n          lg: -96,\n          xl: 'calc((1248px - 100vw) / 2)',\n        },\n        width: {\n          _: '100vw',\n          xs: 'calc(100vw - 32px)',\n          sm: 'calc(100vw - 64px)',\n          lg: 'calc(100vw - 96px)',\n          xl: 'calc(1248px + ((100vw - 1248px) / 2))',\n        },\n      },\n      right: {\n        left: { xs: 0 },\n        width: {\n          _: '100vw',\n          xs: 'calc(100vw - 32px)',\n          sm: 'calc(100vw - 64px)',\n          lg: 'calc(100vw - 96px)',\n          xl: 'calc(1248px + ((100vw - 1248px) / 2))',\n        },\n      },\n      none: {\n        left: 0,\n        width: '100%',\n      },\n    },\n  })\n);\n\nconst illustrationPositionVariants = variant({\n  prop: 'illustrationPosition',\n  defaultVariant: 'right',\n  base: {\n    mx: { _: 'auto', sm: 0 },\n    mb: { _: 32, sm: 0 },\n  },\n  variants: {\n    left: {\n      mr: { sm: 48 },\n    },\n    right: {\n      ml: { sm: 48 },\n    },\n  },\n});\n\ntype IllustrationContainerProps = StyleProps<\n  typeof illustrationPositionVariants\n>;\n\nconst IllustrationContainer = styled(\n  'div',\n  styledOptions\n)<IllustrationContainerProps>(illustrationPositionVariants);\n\nexport const EmptySection: React.FC<EmptySectionProps> = ({\n  bodyText,\n  children,\n  headingText,\n  illustration: Illustration,\n  stretchDirection,\n  illustrationPosition = stretchDirection === 'right' ? 'left' : 'right',\n}) => {\n  const flexDirection =\n    illustrationPosition === 'right' ? 'row-reverse' : 'row';\n\n  return (\n    <EmptyContainer stretchDirection={stretchDirection}>\n      <Dots stretchDirection={stretchDirection} />\n      <FlexBox\n        maxWidth=\"822px\"\n        flexBasis=\"100%\"\n        position=\"relative\"\n        bg=\"background-current\"\n        py={48}\n        px={{ _: 16, sm: 48, md: 64 }}\n        zIndex={1}\n        flexDirection={{ _: 'column', sm: flexDirection }}\n        justifyContent={{ _: 'space-around', md: 'space-between' }}\n        alignItems=\"center\"\n        textAlign={{ _: 'center', sm: 'start' }}\n      >\n        <IllustrationContainer illustrationPosition={illustrationPosition}>\n          <Illustration width={pxRem(100)} />\n        </IllustrationContainer>\n        <FlexBox\n          flexDirection=\"column\"\n          alignItems={{ _: 'center', sm: 'start' }}\n        >\n          <Text as=\"h2\" fontSize={22} mb={8}>\n            {headingText}\n          </Text>\n          {bodyText && <Text mb={32}>{bodyText}</Text>}\n          {children}\n        </FlexBox>\n      </FlexBox>\n    </EmptyContainer>\n  );\n};\n"],"mappings":";;;;;;;;AAkCA,MAAM,iBAAiB,OAAO,QAAQ,CACpC,QAAQ;CACN,MAAM;CACN,gBAAgB;CAChB,MAAM;EACJ,aAAa;EACb,UAAU;EACV,IAAI;EACJ,IAAI;GAAE,GAAG;GAAI,IAAI;GAAI;EACrB,OAAO;EACR;CACD,UAAU;EACR,MAAM;GACJ,IAAI,EAAE,IAAI,GAAG;GACb,IAAI;IAAE,IAAI;IAAI,IAAI;IAAI;GACvB;EACD,OAAO;GACL,IAAI,EAAE,IAAI,GAAG;GACb,IAAI;IAAE,IAAI;IAAI,IAAI;IAAI;GACvB;EACD,MAAM,EAAE;EACT;CACF,CAAC,CACH;AAED,MAAM,OAAO,OAAO,SAAS,CAC3B,QAAQ;CACN,MAAM;CACN,gBAAgB;CAChB,MAAM;EACJ,UAAU;EACV,KAAK;EACL,QAAQ;EACR,MAAM;EACP;CACD,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL;GACD,OAAO;IACL,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL;GACF;EACD,OAAO;GACL,MAAM,EAAE,IAAI,GAAG;GACf,OAAO;IACL,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACL;GACF;EACD,MAAM;GACJ,MAAM;GACN,OAAO;GACR;EACF;CACF,CAAC,CACH;AAED,MAAM,+BAA+B,QAAQ;CAC3C,MAAM;CACN,gBAAgB;CAChB,MAAM;EACJ,IAAI;GAAE,GAAG;GAAQ,IAAI;GAAG;EACxB,IAAI;GAAE,GAAG;GAAI,IAAI;GAAG;EACrB;CACD,UAAU;EACR,MAAM,EACJ,IAAI,EAAE,IAAI,IAAI,EACf;EACD,OAAO,EACL,IAAI,EAAE,IAAI,IAAI,EACf;EACF;CACF,CAAC;AAMF,MAAM,wBAAwB,OAC5B,OACA,cACD,CAA6B,6BAA6B;AAE3D,MAAaA,gBAA6C,EACxD,UACA,UACA,aACA,cAAc,cACd,kBACA,uBAAuB,qBAAqB,UAAU,SAAS,cAC3D;AAIJ,QACE,qBAAC;EAAiC;aAChC,oBAAC,QAAuB,mBAAoB,EAC5C,qBAAC;GACC,UAAS;GACT,WAAU;GACV,UAAS;GACT,IAAG;GACH,IAAI;GACJ,IAAI;IAAE,GAAG;IAAI,IAAI;IAAI,IAAI;IAAI;GAC7B,QAAQ;GACR,eAAe;IAAE,GAAG;IAAU,IAblC,yBAAyB,UAAU,gBAAgB;IAaE;GACjD,gBAAgB;IAAE,GAAG;IAAgB,IAAI;IAAiB;GAC1D,YAAW;GACX,WAAW;IAAE,GAAG;IAAU,IAAI;IAAS;cAEvC,oBAAC;IAA4C;cAC3C,oBAAC,gBAAa,OAAO,MAAM,IAAI,GAAI;KACb,EACxB,qBAAC;IACC,eAAc;IACd,YAAY;KAAE,GAAG;KAAU,IAAI;KAAS;;KAExC,oBAAC;MAAK,IAAG;MAAK,UAAU;MAAI,IAAI;gBAC7B;OACI;KACN,YAAY,oBAAC;MAAK,IAAI;gBAAK;OAAgB;KAC3C;;KACO;IACF;GACK"}

package/dist/ErrorContents/index.cjs

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

package/dist/ErrorContents/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["ErrorContents: React.FC<ErrorContentsProps>","Box","Text","Anchor"],"sources":["../../src/ErrorContents/index.tsx"],"sourcesContent":["import { Anchor, Box, Text } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport type ErrorContentsProps = {\n  /**\n   * Any debug info to display, such as [\"User ID\", <user-id>].\n   */\n  supportInformation?: [string, string][];\n};\n\nexport const ErrorContents: React.FC<ErrorContentsProps> = ({\n  supportInformation,\n}) => (\n  <Box maxWidth=\"40rem\" my={96} mx=\"auto\" as=\"main\">\n    <Text as=\"h1\" fontSize={44}>\n      Something has gone wrong\n    </Text>\n    <Text as=\"p\" my={16}>\n      We&apos;re sorry, and our best are working to fix this. In the meantime,\n      have you tried the following?\n    </Text>\n    <Box as=\"ul\">\n      <li>Refreshing this page.</li>\n      <li>Clearing your browser cache.</li>\n    </Box>\n    <Text as=\"p\">\n      If that doesn&apos;t help, please let us know on our{' '}\n      <Anchor href=\"https://help.codecademy.com/hc/en-us\">Help Center</Anchor>!\n    </Text>\n\n    {supportInformation && (\n      <Box as=\"details\" fontSize={16} textColor=\"gray-900\">\n        <Box as=\"summary\" mt={48} mb={8}>\n          Support information\n        </Box>\n        {supportInformation.map(([key, value]) => (\n          <Text as=\"code\" display=\"block\" fontSize=\"small\" key={key}>\n            {key}: {value}\n          </Text>\n        ))}\n      </Box>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;;;AAUA,MAAaA,iBAA+C,EAC1D,yBAEA,4CAACC;CAAI,UAAS;CAAQ,IAAI;CAAI,IAAG;CAAO,IAAG;;EACzC,2CAACC;GAAK,IAAG;GAAK,UAAU;aAAI;IAErB;EACP,2CAACA;GAAK,IAAG;GAAI,IAAI;aAAI;IAGd;EACP,4CAACD;GAAI,IAAG;cACN,2CAAC,kBAAG,0BAA0B,EAC9B,2CAAC,kBAAG,iCAAiC;IACjC;EACN,4CAACC;GAAK,IAAG;;IAAI;IAC0C;IACrD,2CAACC;KAAO,MAAK;eAAuC;MAAoB;;;IACnE;EAEN,sBACC,4CAACF;GAAI,IAAG;GAAU,UAAU;GAAI,WAAU;cACxC,2CAACA;IAAI,IAAG;IAAU,IAAI;IAAI,IAAI;cAAG;KAE3B,EACL,mBAAmB,KAAK,CAAC,KAAK,WAC7B,4CAACC;IAAK,IAAG;IAAO,SAAQ;IAAQ,UAAS;;KACtC;KAAI;KAAG;;MAD4C,IAE/C,CACP;IACE;;EAEJ"}

package/dist/ErrorContents/index.d.cts

@@ -1,13 +0,0 @@
-import * as React$1 from "react";
-
-//#region src/ErrorContents/index.d.ts
-type ErrorContentsProps = {
-  /**
-   * Any debug info to display, such as ["User ID", <user-id>].
-   */
-  supportInformation?: [string, string][];
-};
-declare const ErrorContents: React$1.FC<ErrorContentsProps>;
-//#endregion
-export { ErrorContents, ErrorContentsProps };
-//# sourceMappingURL=index.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/ErrorContents/index.tsx"],"sourcesContent":[],"mappings":";;;KAGY,kBAAA;;AAAZ;AAOA;;;cAAa,eAAe,OAAA,CAAM,GAAG"}

package/dist/ErrorContents/index.d.mts

@@ -1,13 +0,0 @@
-import * as React$1 from "react";
-
-//#region src/ErrorContents/index.d.ts
-type ErrorContentsProps = {
-  /**
-   * Any debug info to display, such as ["User ID", <user-id>].
-   */
-  supportInformation?: [string, string][];
-};
-declare const ErrorContents: React$1.FC<ErrorContentsProps>;
-//#endregion
-export { ErrorContents, ErrorContentsProps };
-//# sourceMappingURL=index.d.mts.map

package/dist/ErrorContents/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/ErrorContents/index.tsx"],"sourcesContent":[],"mappings":";;;KAGY,kBAAA;;AAAZ;AAOA;;;cAAa,eAAe,OAAA,CAAM,GAAG"}

package/dist/ErrorContents/index.mjs

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

package/dist/ErrorContents/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["ErrorContents: React.FC<ErrorContentsProps>"],"sources":["../../src/ErrorContents/index.tsx"],"sourcesContent":["import { Anchor, Box, Text } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport type ErrorContentsProps = {\n  /**\n   * Any debug info to display, such as [\"User ID\", <user-id>].\n   */\n  supportInformation?: [string, string][];\n};\n\nexport const ErrorContents: React.FC<ErrorContentsProps> = ({\n  supportInformation,\n}) => (\n  <Box maxWidth=\"40rem\" my={96} mx=\"auto\" as=\"main\">\n    <Text as=\"h1\" fontSize={44}>\n      Something has gone wrong\n    </Text>\n    <Text as=\"p\" my={16}>\n      We&apos;re sorry, and our best are working to fix this. In the meantime,\n      have you tried the following?\n    </Text>\n    <Box as=\"ul\">\n      <li>Refreshing this page.</li>\n      <li>Clearing your browser cache.</li>\n    </Box>\n    <Text as=\"p\">\n      If that doesn&apos;t help, please let us know on our{' '}\n      <Anchor href=\"https://help.codecademy.com/hc/en-us\">Help Center</Anchor>!\n    </Text>\n\n    {supportInformation && (\n      <Box as=\"details\" fontSize={16} textColor=\"gray-900\">\n        <Box as=\"summary\" mt={48} mb={8}>\n          Support information\n        </Box>\n        {supportInformation.map(([key, value]) => (\n          <Text as=\"code\" display=\"block\" fontSize=\"small\" key={key}>\n            {key}: {value}\n          </Text>\n        ))}\n      </Box>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;AAUA,MAAaA,iBAA+C,EAC1D,yBAEA,qBAAC;CAAI,UAAS;CAAQ,IAAI;CAAI,IAAG;CAAO,IAAG;;EACzC,oBAAC;GAAK,IAAG;GAAK,UAAU;aAAI;IAErB;EACP,oBAAC;GAAK,IAAG;GAAI,IAAI;aAAI;IAGd;EACP,qBAAC;GAAI,IAAG;cACN,oBAAC,kBAAG,0BAA0B,EAC9B,oBAAC,kBAAG,iCAAiC;IACjC;EACN,qBAAC;GAAK,IAAG;;IAAI;IAC0C;IACrD,oBAAC;KAAO,MAAK;eAAuC;MAAoB;;;IACnE;EAEN,sBACC,qBAAC;GAAI,IAAG;GAAU,UAAU;GAAI,WAAU;cACxC,oBAAC;IAAI,IAAG;IAAU,IAAI;IAAI,IAAI;cAAG;KAE3B,EACL,mBAAmB,KAAK,CAAC,KAAK,WAC7B,qBAAC;IAAK,IAAG;IAAO,SAAQ;IAAQ,UAAS;;KACtC;KAAI;KAAG;;MAD4C,IAE/C,CACP;IACE;;EAEJ"}