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

package/dist/CurriculumCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","Card","FlexBox","Text","pxRem","theme","styled","useMemo","React","Footer","Image","Subtitle","cardHeight","cardStyles","inProgress","completed","LineDecoration","colors","navy","CurriculumCard","beta","difficulty","description","headingLevel","image","isFullSize","isStaticSize","progressState","scope","tag","tagColor","text","title","showCareerPathVariant","showAltSubtitle","footerTextVariant","showDescription","difficultyVariant","horizontalOrientation","minHeight","minWidth","showProLogo","pro","boxVariant","isCareerPathVariant","toLowerCase","minimumHeight","contentType","display","flexDirection","_","xs","variant","isInteractive","position","maxWidth","pr","fontSize","mb","fontFamily","as","flexWrap","alignItems","my","pt","pb","ml","mr","isSmall"],"sources":["../../src/CurriculumCard/index.tsx"],"sourcesContent":["import { Box, Card, FlexBox, HeadingTags, Text } from '@codecademy/gamut';\nimport { pxRem, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useMemo } from 'react';\nimport * as React from 'react';\n\nimport { TagColor } from './BottomTag/index';\nimport { Footer } from './Footer/index';\nimport { Image } from './Image/index';\nimport { Subtitle, SubtitleProps } from './Subtitle';\n\nexport type ProgressState = 'inProgress' | 'completed';\n\nexport type FooterTextVariantType = 'enrolled' | 'inProgress';\n\nconst cardHeight = 180;\n\nconst cardStyles = {\n  inProgress: 'yellow',\n  completed: 'navy',\n} as const;\n\nexport type CardProps = React.ComponentProps<typeof Card>;\n\nexport type CurriculumCardProps = SubtitleProps & {\n  beta?: boolean;\n  /**\n   * Displays the curriculum type above the title\n   */\n  text: string;\n  title: string;\n  headingLevel?: HeadingTags;\n  image?: string;\n  isFullSize?: boolean;\n  isStaticSize?: boolean;\n  progressState?: ProgressState;\n  showProLogo?: boolean;\n  tag?: string;\n  tagColor?: TagColor;\n  showAltSubtitle?: boolean;\n  /**\n   * Changes In Progress card footer text from \"Enrolled...\" to \"In Progress...\"\n   */\n  footerTextVariant?: FooterTextVariantType;\n  /**\n   * optional text to be displayed below card subtitle\n   */\n  description?: string;\n  /**\n   * allows description to be shown in card body.\n   */\n  showDescription?: boolean;\n  /**\n   * career path cards are displayed with a variant style / decorative element\n   */\n  showCareerPathVariant?: boolean;\n  /**\n   * displays inner content with a horizontal orientation\n   */\n  horizontalOrientation?: boolean;\n\n  /**\n   * custom minimum height for curriculum card in pixels\n   */\n  minHeight?: CardProps['minHeight'];\n  /**\n   * custom minimum width for curriculum card in pixels\n   */\n  minWidth?: CardProps['minWidth'];\n};\n\nconst LineDecoration = styled(Box)`\n  border-top: 1px solid\n    ${({ inProgress }: { inProgress?: boolean }) =>\n      inProgress ? theme.colors.navy : theme.colors['navy-200']};\n`;\n\n/**\n *\n * @deprecated  This component is deprecated\n *\n * Please use the CareerPathCard, SkillPathCard, or CourseCard instead\n */\n\nexport const CurriculumCard: React.FC<CurriculumCardProps> = ({\n  beta,\n  difficulty,\n  description,\n  headingLevel = 'h3',\n  image,\n  isFullSize = false,\n  isStaticSize = false,\n  progressState,\n  scope,\n  tag,\n  tagColor,\n  text,\n  title,\n  showCareerPathVariant,\n  showAltSubtitle = false,\n  footerTextVariant = 'enrolled',\n  showDescription,\n  difficultyVariant,\n  horizontalOrientation,\n  minHeight,\n  minWidth,\n  showProLogo: pro,\n}) => {\n  const boxVariant = progressState && cardStyles[progressState];\n\n  const isCareerPathVariant =\n    text.toLowerCase() === 'career path' && showCareerPathVariant;\n\n  const minimumHeight = useMemo(() => {\n    if (minHeight) return minHeight;\n    return isStaticSize\n      ? pxRem(285)\n      : isFullSize\n      ? pxRem(cardHeight * 2 + 32)\n      : pxRem(cardHeight);\n  }, [isFullSize, isStaticSize, minHeight]);\n\n  const contentType = text === 'Course' && !pro ? 'Free Course' : text;\n  return (\n    <Card\n      display=\"flex\"\n      flexDirection={{\n        _: 'column',\n        xs: horizontalOrientation ? 'row' : 'column',\n      }}\n      minHeight={minimumHeight}\n      minWidth={minWidth}\n      variant={boxVariant ?? 'white'}\n      isInteractive\n      position=\"relative\"\n    >\n      <Box\n        maxWidth={horizontalOrientation ? 418 : 'none'}\n        pr={{ _: 0, xs: horizontalOrientation ? 40 : 0 }}\n      >\n        <Text display=\"flex\" fontSize={14} mb={12} fontFamily=\"accent\">\n          {contentType}\n        </Text>\n        <Text as={headingLevel} mb={4} fontSize={20}>\n          {title}\n        </Text>\n        {!progressState && (\n          <FlexBox flexWrap=\"wrap\" alignItems=\"center\">\n            <Subtitle\n              scope={scope}\n              difficulty={difficulty}\n              showAltSubtitle={showAltSubtitle}\n              difficultyVariant={difficultyVariant}\n            />\n          </FlexBox>\n        )}\n        {isCareerPathVariant && (\n          <LineDecoration inProgress={progressState === 'inProgress'} my={8} />\n        )}\n        {(isCareerPathVariant || showDescription) && (\n          <Text pt={8} pb={16} fontSize={14}>\n            {description}\n          </Text>\n        )}\n      </Box>\n      {isFullSize && image && (\n        <FlexBox\n          my=\"auto\"\n          ml=\"auto\"\n          mr={horizontalOrientation ? 0 : 'auto'}\n          pt={16}\n          pb={isCareerPathVariant ? 32 : 0}\n          pr={{ _: 0, xs: horizontalOrientation ? 24 : 0 }}\n        >\n          <Image\n            isSmall={isCareerPathVariant}\n            image={image}\n            progressState={progressState}\n          />\n        </FlexBox>\n      )}\n      <Footer\n        beta={beta}\n        progressState={progressState}\n        tag={tag}\n        tagColor={tagColor}\n        footerTextVariant={footerTextVariant}\n      />\n    </Card>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAeA,MAAMY,aAAa;AAEnB,MAAMC,aAAa;CACjBC,YAAY;CACZC,WAAW;CACb;AAmDA,MAAMC,iBAAiBV,6CAAON,uBAAAA;;;kCAEvB,EAAEc,iBACHA,aAAaT,+BAAMY,OAAOC,OAAOb,+BAAMY,OAAO,aAAW,KAAA,8nOAAA;;;;;;GAU/D,MAAaE,kBAAiD,EAC5DC,MACAC,YACAC,aACAC,eAAe,MACfC,OACAC,aAAa,OACbC,eAAe,OACfC,eACAC,OACAC,KACAC,UACAC,MACAC,OACAC,uBACAC,kBAAkB,OAClBC,oBAAoB,YACpBC,iBACAC,mBACAC,uBACAC,WACAC,UACAC,aAAaC,UACd;CACC,MAAMC,aAAahB,iBAAiBd,WAAWc;CAE/C,MAAMiB,sBACJb,KAAKc,aAAW,KAAO,iBAAiBZ;CAE1C,MAAMa,yCAAwB;AAC5B,MAAIP,UAAW,QAAOA;AACtB,SAAOb,mDACG,IAAA,GACND,iDACMb,aAAa,IAAI,GAAA,uCACjBA,WAAAA;IACT;EAACa;EAAYC;EAAca;EAAU,CAAA;CAExC,MAAMQ,cAAchB,SAAS,YAAY,CAACW,MAAM,gBAAgBX;AAChE,QACE,sBAAA,cAAC9B,wBAAAA;EACC+C,SAAQ;EACRC,eAAe;GACbC,GAAG;GACHC,IAAIb,wBAAwB,QAAQ;GACtC;EACAC,WAAWO;EACDN;EACVY,SAAST,cAAc;EACvBU,eAAAA;EACAC,UAAS;IAET,sBAAA,cAACtD,uBAAAA;EACCuD,UAAUjB,wBAAwB,MAAM;EACxCkB,IAAI;GAAEN,GAAG;GAAGC,IAAIb,wBAAwB,KAAK;GAAE;IAE/C,sBAAA,cAACnC,wBAAAA;EAAK6C,SAAQ;EAAOS,UAAU;EAAIC,IAAI;EAAIC,YAAW;IACnDZ,YAAAA,EAEH,sBAAA,cAAC5C,wBAAAA;EAAKyD,IAAIrC;EAAcmC,IAAI;EAAGD,UAAU;IACtCzB,MAAAA,EAEF,CAACL,iBACA,sBAAA,cAACzB,2BAAAA;EAAQ2D,UAAS;EAAOC,YAAW;IAClC,sBAAA,cAACnD,0BAAAA;EACQiB;EACKP;EACKa;EACEG;MAIxBO,uBACC,sBAAA,cAAC5B,gBAAAA;EAAeF,YAAYa,kBAAkB;EAAcoC,IAAI;MAEhEnB,uBAAuBR,oBACvB,sBAAA,cAACjC,wBAAAA;EAAK6D,IAAI;EAAGC,IAAI;EAAIR,UAAU;IAC5BnC,YAAAA,CAAAA,EAING,cAAcD,SACb,sBAAA,cAACtB,2BAAAA;EACC6D,IAAG;EACHG,IAAG;EACHC,IAAI7B,wBAAwB,IAAI;EAChC0B,IAAI;EACJC,IAAIrB,sBAAsB,KAAK;EAC/BY,IAAI;GAAEN,GAAG;GAAGC,IAAIb,wBAAwB,KAAK;GAAE;IAE/C,sBAAA,cAAC5B,uBAAAA;EACC0D,SAASxB;EACFpB;EACQG;MAIrB,sBAAA,cAAClB,sBAAAA;EACOW;EACSO;EACVE;EACKC;EACSK"}

package/dist/CurriculumCard/index.d.cts

@@ -0,0 +1,64 @@
+import { TagColor } from "./BottomTag/index.cjs";
+import { SubtitleProps } from "./Subtitle/index.cjs";
+import { Card, HeadingTags } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/CurriculumCard/index.d.ts
+type ProgressState = 'inProgress' | 'completed';
+type FooterTextVariantType = 'enrolled' | 'inProgress';
+type CardProps = React$1.ComponentProps<typeof Card>;
+type CurriculumCardProps = SubtitleProps & {
+  beta?: boolean;
+  /**
+   * Displays the curriculum type above the title
+   */
+  text: string;
+  title: string;
+  headingLevel?: HeadingTags;
+  image?: string;
+  isFullSize?: boolean;
+  isStaticSize?: boolean;
+  progressState?: ProgressState;
+  showProLogo?: boolean;
+  tag?: string;
+  tagColor?: TagColor;
+  showAltSubtitle?: boolean;
+  /**
+   * Changes In Progress card footer text from "Enrolled..." to "In Progress..."
+   */
+  footerTextVariant?: FooterTextVariantType;
+  /**
+   * optional text to be displayed below card subtitle
+   */
+  description?: string;
+  /**
+   * allows description to be shown in card body.
+   */
+  showDescription?: boolean;
+  /**
+   * career path cards are displayed with a variant style / decorative element
+   */
+  showCareerPathVariant?: boolean;
+  /**
+   * displays inner content with a horizontal orientation
+   */
+  horizontalOrientation?: boolean;
+  /**
+   * custom minimum height for curriculum card in pixels
+   */
+  minHeight?: CardProps['minHeight'];
+  /**
+   * custom minimum width for curriculum card in pixels
+   */
+  minWidth?: CardProps['minWidth'];
+};
+/**
+ *
+ * @deprecated  This component is deprecated
+ *
+ * Please use the CareerPathCard, SkillPathCard, or CourseCard instead
+ */
+declare const CurriculumCard: React$1.FC<CurriculumCardProps>;
+//#endregion
+export { CardProps, CurriculumCard, CurriculumCardProps, FooterTextVariantType, ProgressState };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/CurriculumCard/index.tsx"],"mappings":";;;;;;KAWY,aAAA;AAAA,KAEA,qBAAA;AAAA,KASA,SAAA,GAAY,OAAA,CAAM,cAAA,QAAsB,IAAA;AAAA,KAExC,mBAAA,GAAsB,aAAA;EAChC,IAAA;EAduB;;AAEzB;EAgBE,IAAA;EACA,KAAA;EACA,YAAA,GAAe,WAAA;EACf,KAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA,GAAgB,aAAA;EAChB,WAAA;EACA,GAAA;EACA,QAAA,GAAW,QAAA;EACX,eAAA;EAjBsD;;AAExD;EAmBE,iBAAA,GAAoB,qBAAA;;;;EAIpB,WAAA;EATW;;;EAaX,eAAA;EAiBoB;;;EAbpB,qBAAA;EA1BA;;;EA8BA,qBAAA;EA3BA;;;EAgCA,SAAA,GAAY,SAAA;EA7BI;;;EAiChB,QAAA,GAAW,SAAA;AAAA;;;;;;;cAgBA,cAAA,EAAgB,OAAA,CAAM,EAAA,CAAG,mBAAA"}

package/dist/CurriculumCard/index.d.ts

@@ -1,54 +1,56 @@
-import { Card, HeadingTags } from '@codecademy/gamut';
-import * as React from 'react';
-import { TagColor } from './BottomTag/index';
-import { SubtitleProps } from './Subtitle';
-export type ProgressState = 'inProgress' | 'completed';
-export type FooterTextVariantType = 'enrolled' | 'inProgress';
-export type CardProps = React.ComponentProps<typeof Card>;
-export type CurriculumCardProps = SubtitleProps & {
-    beta?: boolean;
-    /**
-     * Displays the curriculum type above the title
-     */
-    text: string;
-    title: string;
-    headingLevel?: HeadingTags;
-    image?: string;
-    isFullSize?: boolean;
-    isStaticSize?: boolean;
-    progressState?: ProgressState;
-    showProLogo?: boolean;
-    tag?: string;
-    tagColor?: TagColor;
-    showAltSubtitle?: boolean;
-    /**
-     * Changes In Progress card footer text from "Enrolled..." to "In Progress..."
-     */
-    footerTextVariant?: FooterTextVariantType;
-    /**
-     * optional text to be displayed below card subtitle
-     */
-    description?: string;
-    /**
-     * allows description to be shown in card body.
-     */
-    showDescription?: boolean;
-    /**
-     * career path cards are displayed with a variant style / decorative element
-     */
-    showCareerPathVariant?: boolean;
-    /**
-     * displays inner content with a horizontal orientation
-     */
-    horizontalOrientation?: boolean;
-    /**
-     * custom minimum height for curriculum card in pixels
-     */
-    minHeight?: CardProps['minHeight'];
-    /**
-     * custom minimum width for curriculum card in pixels
-     */
-    minWidth?: CardProps['minWidth'];
+import { TagColor } from "./BottomTag/index.js";
+import { SubtitleProps } from "./Subtitle/index.js";
+import { Card, HeadingTags } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/CurriculumCard/index.d.ts
+type ProgressState = 'inProgress' | 'completed';
+type FooterTextVariantType = 'enrolled' | 'inProgress';
+type CardProps = React$1.ComponentProps<typeof Card>;
+type CurriculumCardProps = SubtitleProps & {
+  beta?: boolean;
+  /**
+   * Displays the curriculum type above the title
+   */
+  text: string;
+  title: string;
+  headingLevel?: HeadingTags;
+  image?: string;
+  isFullSize?: boolean;
+  isStaticSize?: boolean;
+  progressState?: ProgressState;
+  showProLogo?: boolean;
+  tag?: string;
+  tagColor?: TagColor;
+  showAltSubtitle?: boolean;
+  /**
+   * Changes In Progress card footer text from "Enrolled..." to "In Progress..."
+   */
+  footerTextVariant?: FooterTextVariantType;
+  /**
+   * optional text to be displayed below card subtitle
+   */
+  description?: string;
+  /**
+   * allows description to be shown in card body.
+   */
+  showDescription?: boolean;
+  /**
+   * career path cards are displayed with a variant style / decorative element
+   */
+  showCareerPathVariant?: boolean;
+  /**
+   * displays inner content with a horizontal orientation
+   */
+  horizontalOrientation?: boolean;
+  /**
+   * custom minimum height for curriculum card in pixels
+   */
+  minHeight?: CardProps['minHeight'];
+  /**
+   * custom minimum width for curriculum card in pixels
+   */
+  minWidth?: CardProps['minWidth'];
 };
 /**
  *
@@ -56,4 +58,7 @@ export type CurriculumCardProps = SubtitleProps & {
  *
  * Please use the CareerPathCard, SkillPathCard, or CourseCard instead
  */
-export declare const CurriculumCard: React.FC<CurriculumCardProps>;
+declare const CurriculumCard: React$1.FC<CurriculumCardProps>;
+//#endregion
+export { CardProps, CurriculumCard, CurriculumCardProps, FooterTextVariantType, ProgressState };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/CurriculumCard/index.tsx"],"mappings":";;;;;;KAWY,aAAA;AAAA,KAEA,qBAAA;AAAA,KASA,SAAA,GAAY,OAAA,CAAM,cAAA,QAAsB,IAAA;AAAA,KAExC,mBAAA,GAAsB,aAAA;EAChC,IAAA;EAduB;;AAEzB;EAgBE,IAAA;EACA,KAAA;EACA,YAAA,GAAe,WAAA;EACf,KAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA,GAAgB,aAAA;EAChB,WAAA;EACA,GAAA;EACA,QAAA,GAAW,QAAA;EACX,eAAA;EAjBsD;;AAExD;EAmBE,iBAAA,GAAoB,qBAAA;;;;EAIpB,WAAA;EATW;;;EAaX,eAAA;EAiBoB;;;EAbpB,qBAAA;EA1BA;;;EA8BA,qBAAA;EA3BA;;;EAgCA,SAAA,GAAY,SAAA;EA7BI;;;EAiChB,QAAA,GAAW,SAAA;AAAA;;;;;;;cAgBA,cAAA,EAAgB,OAAA,CAAM,EAAA,CAAG,mBAAA"}

package/dist/CurriculumCard/index.js

@@ -1,129 +1,103 @@
-import _styled from "@emotion/styled/base";
-import { Box, Card, FlexBox, Text } from '@codecademy/gamut';
-import { pxRem, theme } from '@codecademy/gamut-styles';
-import { useMemo } from 'react';
-import * as React from 'react';
-import { Footer } from './Footer/index';
-import { Image } from './Image/index';
-import { Subtitle } from './Subtitle';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Footer } from "./Footer/index.js";
+import { Image } from "./Image/index.js";
+import { Subtitle } from "./Subtitle/index.js";
+import { Box, Card, FlexBox, Text } from "@codecademy/gamut";
+import { pxRem, theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { useMemo } from "react";
+
+//#region src/CurriculumCard/index.tsx
 const cardHeight = 180;
 const cardStyles = {
-  inProgress: 'yellow',
-  completed: 'navy'
+	inProgress: "yellow",
+	completed: "navy"
 };
-const LineDecoration = /*#__PURE__*/_styled(Box, {
-  target: "eytwivn0",
-  label: "LineDecoration"
-})("border-top:1px solid ", ({
-  inProgress
-}) => inProgress ? theme.colors.navy : theme.colors['navy-200'], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9DdXJyaWN1bHVtQ2FyZC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUVrQyIsImZpbGUiOiIuLi8uLi9zcmMvQ3VycmljdWx1bUNhcmQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBDYXJkLCBGbGV4Qm94LCBIZWFkaW5nVGFncywgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHB4UmVtLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUYWdDb2xvciB9IGZyb20gJy4vQm90dG9tVGFnL2luZGV4JztcbmltcG9ydCB7IEZvb3RlciB9IGZyb20gJy4vRm9vdGVyL2luZGV4JztcbmltcG9ydCB7IEltYWdlIH0gZnJvbSAnLi9JbWFnZS9pbmRleCc7XG5pbXBvcnQgeyBTdWJ0aXRsZSwgU3VidGl0bGVQcm9wcyB9IGZyb20gJy4vU3VidGl0bGUnO1xuXG5leHBvcnQgdHlwZSBQcm9ncmVzc1N0YXRlID0gJ2luUHJvZ3Jlc3MnIHwgJ2NvbXBsZXRlZCc7XG5cbmV4cG9ydCB0eXBlIEZvb3RlclRleHRWYXJpYW50VHlwZSA9ICdlbnJvbGxlZCcgfCAnaW5Qcm9ncmVzcyc7XG5cbmNvbnN0IGNhcmRIZWlnaHQgPSAxODA7XG5cbmNvbnN0IGNhcmRTdHlsZXMgPSB7XG4gIGluUHJvZ3Jlc3M6ICd5ZWxsb3cnLFxuICBjb21wbGV0ZWQ6ICduYXZ5Jyxcbn0gYXMgY29uc3Q7XG5cbmV4cG9ydCB0eXBlIENhcmRQcm9wcyA9IFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBDYXJkPjtcblxuZXhwb3J0IHR5cGUgQ3VycmljdWx1bUNhcmRQcm9wcyA9IFN1YnRpdGxlUHJvcHMgJiB7XG4gIGJldGE/OiBib29sZWFuO1xuICAvKipcbiAgICogRGlzcGxheXMgdGhlIGN1cnJpY3VsdW0gdHlwZSBhYm92ZSB0aGUgdGl0bGVcbiAgICovXG4gIHRleHQ6IHN0cmluZztcbiAgdGl0bGU6IHN0cmluZztcbiAgaGVhZGluZ0xldmVsPzogSGVhZGluZ1RhZ3M7XG4gIGltYWdlPzogc3RyaW5nO1xuICBpc0Z1bGxTaXplPzogYm9vbGVhbjtcbiAgaXNTdGF0aWNTaXplPzogYm9vbGVhbjtcbiAgcHJvZ3Jlc3NTdGF0ZT86IFByb2dyZXNzU3RhdGU7XG4gIHNob3dQcm9Mb2dvPzogYm9vbGVhbjtcbiAgdGFnPzogc3RyaW5nO1xuICB0YWdDb2xvcj86IFRhZ0NvbG9yO1xuICBzaG93QWx0U3VidGl0bGU/OiBib29sZWFuO1xuICAvKipcbiAgICogQ2hhbmdlcyBJbiBQcm9ncmVzcyBjYXJkIGZvb3RlciB0ZXh0IGZyb20gXCJFbnJvbGxlZC4uLlwiIHRvIFwiSW4gUHJvZ3Jlc3MuLi5cIlxuICAgKi9cbiAgZm9vdGVyVGV4dFZhcmlhbnQ/OiBGb290ZXJUZXh0VmFyaWFudFR5cGU7XG4gIC8qKlxuICAgKiBvcHRpb25hbCB0ZXh0IHRvIGJlIGRpc3BsYXllZCBiZWxvdyBjYXJkIHN1YnRpdGxlXG4gICAqL1xuICBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgLyoqXG4gICAqIGFsbG93cyBkZXNjcmlwdGlvbiB0byBiZSBzaG93biBpbiBjYXJkIGJvZHkuXG4gICAqL1xuICBzaG93RGVzY3JpcHRpb24/OiBib29sZWFuO1xuICAvKipcbiAgICogY2FyZWVyIHBhdGggY2FyZHMgYXJlIGRpc3BsYXllZCB3aXRoIGEgdmFyaWFudCBzdHlsZSAvIGRlY29yYXRpdmUgZWxlbWVudFxuICAgKi9cbiAgc2hvd0NhcmVlclBhdGhWYXJpYW50PzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIGRpc3BsYXlzIGlubmVyIGNvbnRlbnQgd2l0aCBhIGhvcml6b250YWwgb3JpZW50YXRpb25cbiAgICovXG4gIGhvcml6b250YWxPcmllbnRhdGlvbj86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIGN1c3RvbSBtaW5pbXVtIGhlaWdodCBmb3IgY3VycmljdWx1bSBjYXJkIGluIHBpeGVsc1xuICAgKi9cbiAgbWluSGVpZ2h0PzogQ2FyZFByb3BzWydtaW5IZWlnaHQnXTtcbiAgLyoqXG4gICAqIGN1c3RvbSBtaW5pbXVtIHdpZHRoIGZvciBjdXJyaWN1bHVtIGNhcmQgaW4gcGl4ZWxzXG4gICAqL1xuICBtaW5XaWR0aD86IENhcmRQcm9wc1snbWluV2lkdGgnXTtcbn07XG5cbmNvbnN0IExpbmVEZWNvcmF0aW9uID0gc3R5bGVkKEJveClgXG4gIGJvcmRlci10b3A6IDFweCBzb2xpZFxuICAgICR7KHsgaW5Qcm9ncmVzcyB9OiB7IGluUHJvZ3Jlc3M/OiBib29sZWFuIH0pID0+XG4gICAgICBpblByb2dyZXNzID8gdGhlbWUuY29sb3JzLm5hdnkgOiB0aGVtZS5jb2xvcnNbJ25hdnktMjAwJ119O1xuYDtcblxuLyoqXG4gKlxuICogQGRlcHJlY2F0ZWQgIFRoaXMgY29tcG9uZW50IGlzIGRlcHJlY2F0ZWRcbiAqXG4gKiBQbGVhc2UgdXNlIHRoZSBDYXJlZXJQYXRoQ2FyZCwgU2tpbGxQYXRoQ2FyZCwgb3IgQ291cnNlQ2FyZCBpbnN0ZWFkXG4gKi9cblxuZXhwb3J0IGNvbnN0IEN1cnJpY3VsdW1DYXJkOiBSZWFjdC5GQzxDdXJyaWN1bHVtQ2FyZFByb3BzPiA9ICh7XG4gIGJldGEsXG4gIGRpZmZpY3VsdHksXG4gIGRlc2NyaXB0aW9uLFxuICBoZWFkaW5nTGV2ZWwgPSAnaDMnLFxuICBpbWFnZSxcbiAgaXNGdWxsU2l6ZSA9IGZhbHNlLFxuICBpc1N0YXRpY1NpemUgPSBmYWxzZSxcbiAgcHJvZ3Jlc3NTdGF0ZSxcbiAgc2NvcGUsXG4gIHRhZyxcbiAgdGFnQ29sb3IsXG4gIHRleHQsXG4gIHRpdGxlLFxuICBzaG93Q2FyZWVyUGF0aFZhcmlhbnQsXG4gIHNob3dBbHRTdWJ0aXRsZSA9IGZhbHNlLFxuICBmb290ZXJUZXh0VmFyaWFudCA9ICdlbnJvbGxlZCcsXG4gIHNob3dEZXNjcmlwdGlvbixcbiAgZGlmZmljdWx0eVZhcmlhbnQsXG4gIGhvcml6b250YWxPcmllbnRhdGlvbixcbiAgbWluSGVpZ2h0LFxuICBtaW5XaWR0aCxcbiAgc2hvd1Byb0xvZ286IHBybyxcbn0pID0+IHtcbiAgY29uc3QgYm94VmFyaWFudCA9IHByb2dyZXNzU3RhdGUgJiYgY2FyZFN0eWxlc1twcm9ncmVzc1N0YXRlXTtcblxuICBjb25zdCBpc0NhcmVlclBhdGhWYXJpYW50ID1cbiAgICB0ZXh0LnRvTG93ZXJDYXNlKCkgPT09ICdjYXJlZXIgcGF0aCcgJiYgc2hvd0NhcmVlclBhdGhWYXJpYW50O1xuXG4gIGNvbnN0IG1pbmltdW1IZWlnaHQgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAobWluSGVpZ2h0KSByZXR1cm4gbWluSGVpZ2h0O1xuICAgIHJldHVybiBpc1N0YXRpY1NpemVcbiAgICAgID8gcHhSZW0oMjg1KVxuICAgICAgOiBpc0Z1bGxTaXplXG4gICAgICA/IHB4UmVtKGNhcmRIZWlnaHQgKiAyICsgMzIpXG4gICAgICA6IHB4UmVtKGNhcmRIZWlnaHQpO1xuICB9LCBbaXNGdWxsU2l6ZSwgaXNTdGF0aWNTaXplLCBtaW5IZWlnaHRdKTtcblxuICBjb25zdCBjb250ZW50VHlwZSA9IHRleHQgPT09ICdDb3Vyc2UnICYmICFwcm8gPyAnRnJlZSBDb3Vyc2UnIDogdGV4dDtcbiAgcmV0dXJuIChcbiAgICA8Q2FyZFxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj17e1xuICAgICAgICBfOiAnY29sdW1uJyxcbiAgICAgICAgeHM6IGhvcml6b250YWxPcmllbnRhdGlvbiA/ICdyb3cnIDogJ2NvbHVtbicsXG4gICAgICB9fVxuICAgICAgbWluSGVpZ2h0PXttaW5pbXVtSGVpZ2h0fVxuICAgICAgbWluV2lkdGg9e21pbldpZHRofVxuICAgICAgdmFyaWFudD17Ym94VmFyaWFudCA/PyAnd2hpdGUnfVxuICAgICAgaXNJbnRlcmFjdGl2ZVxuICAgICAgcG9zaXRpb249XCJyZWxhdGl2ZVwiXG4gICAgPlxuICAgICAgPEJveFxuICAgICAgICBtYXhXaWR0aD17aG9yaXpvbnRhbE9yaWVudGF0aW9uID8gNDE4IDogJ25vbmUnfVxuICAgICAgICBwcj17eyBfOiAwLCB4czogaG9yaXpvbnRhbE9yaWVudGF0aW9uID8gNDAgOiAwIH19XG4gICAgICA+XG4gICAgICAgIDxUZXh0IGRpc3BsYXk9XCJmbGV4XCIgZm9udFNpemU9ezE0fSBtYj17MTJ9IGZvbnRGYW1pbHk9XCJhY2NlbnRcIj5cbiAgICAgICAgICB7Y29udGVudFR5cGV9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICAgPFRleHQgYXM9e2hlYWRpbmdMZXZlbH0gbWI9ezR9IGZvbnRTaXplPXsyMH0+XG4gICAgICAgICAge3RpdGxlfVxuICAgICAgICA8L1RleHQ+XG4gICAgICAgIHshcHJvZ3Jlc3NTdGF0ZSAmJiAoXG4gICAgICAgICAgPEZsZXhCb3ggZmxleFdyYXA9XCJ3cmFwXCIgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAgPFN1YnRpdGxlXG4gICAgICAgICAgICAgIHNjb3BlPXtzY29wZX1cbiAgICAgICAgICAgICAgZGlmZmljdWx0eT17ZGlmZmljdWx0eX1cbiAgICAgICAgICAgICAgc2hvd0FsdFN1YnRpdGxlPXtzaG93QWx0U3VidGl0bGV9XG4gICAgICAgICAgICAgIGRpZmZpY3VsdHlWYXJpYW50PXtkaWZmaWN1bHR5VmFyaWFudH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICApfVxuICAgICAgICB7aXNDYXJlZXJQYXRoVmFyaWFudCAmJiAoXG4gICAgICAgICAgPExpbmVEZWNvcmF0aW9uIGluUHJvZ3Jlc3M9e3Byb2dyZXNzU3RhdGUgPT09ICdpblByb2dyZXNzJ30gbXk9ezh9IC8+XG4gICAgICAgICl9XG4gICAgICAgIHsoaXNDYXJlZXJQYXRoVmFyaWFudCB8fCBzaG93RGVzY3JpcHRpb24pICYmIChcbiAgICAgICAgICA8VGV4dCBwdD17OH0gcGI9ezE2fSBmb250U2l6ZT17MTR9PlxuICAgICAgICAgICAge2Rlc2NyaXB0aW9ufVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgKX1cbiAgICAgIDwvQm94PlxuICAgICAge2lzRnVsbFNpemUgJiYgaW1hZ2UgJiYgKFxuICAgICAgICA8RmxleEJveFxuICAgICAgICAgIG15PVwiYXV0b1wiXG4gICAgICAgICAgbWw9XCJhdXRvXCJcbiAgICAgICAgICBtcj17aG9yaXpvbnRhbE9yaWVudGF0aW9uID8gMCA6ICdhdXRvJ31cbiAgICAgICAgICBwdD17MTZ9XG4gICAgICAgICAgcGI9e2lzQ2FyZWVyUGF0aFZhcmlhbnQgPyAzMiA6IDB9XG4gICAgICAgICAgcHI9e3sgXzogMCwgeHM6IGhvcml6b250YWxPcmllbnRhdGlvbiA/IDI0IDogMCB9fVxuICAgICAgICA+XG4gICAgICAgICAgPEltYWdlXG4gICAgICAgICAgICBpc1NtYWxsPXtpc0NhcmVlclBhdGhWYXJpYW50fVxuICAgICAgICAgICAgaW1hZ2U9e2ltYWdlfVxuICAgICAgICAgICAgcHJvZ3Jlc3NTdGF0ZT17cHJvZ3Jlc3NTdGF0ZX1cbiAgICAgICAgICAvPlxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICApfVxuICAgICAgPEZvb3RlclxuICAgICAgICBiZXRhPXtiZXRhfVxuICAgICAgICBwcm9ncmVzc1N0YXRlPXtwcm9ncmVzc1N0YXRlfVxuICAgICAgICB0YWc9e3RhZ31cbiAgICAgICAgdGFnQ29sb3I9e3RhZ0NvbG9yfVxuICAgICAgICBmb290ZXJUZXh0VmFyaWFudD17Zm9vdGVyVGV4dFZhcmlhbnR9XG4gICAgICAvPlxuICAgIDwvQ2FyZD5cbiAgKTtcbn07XG4iXX0= */"));
-
+const LineDecoration = /* @__PURE__ */ styled(Box, {
+	target: "e1v380j50",
+	label: "brand-LineDecoration"
+})("border-top:1px solid\n    ", ({ inProgress }) => inProgress ? theme.colors.navy : theme.colors["navy-200"], ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0N1cnJpY3VsdW1DYXJkL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0N1cnJpY3VsdW1DYXJkL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIENhcmQsIEZsZXhCb3gsIEhlYWRpbmdUYWdzLCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgcHhSZW0sIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFRhZ0NvbG9yIH0gZnJvbSAnLi9Cb3R0b21UYWcvaW5kZXgnO1xuaW1wb3J0IHsgRm9vdGVyIH0gZnJvbSAnLi9Gb290ZXIvaW5kZXgnO1xuaW1wb3J0IHsgSW1hZ2UgfSBmcm9tICcuL0ltYWdlL2luZGV4JztcbmltcG9ydCB7IFN1YnRpdGxlLCBTdWJ0aXRsZVByb3BzIH0gZnJvbSAnLi9TdWJ0aXRsZSc7XG5cbmV4cG9ydCB0eXBlIFByb2dyZXNzU3RhdGUgPSAnaW5Qcm9ncmVzcycgfCAnY29tcGxldGVkJztcblxuZXhwb3J0IHR5cGUgRm9vdGVyVGV4dFZhcmlhbnRUeXBlID0gJ2Vucm9sbGVkJyB8ICdpblByb2dyZXNzJztcblxuY29uc3QgY2FyZEhlaWdodCA9IDE4MDtcblxuY29uc3QgY2FyZFN0eWxlcyA9IHtcbiAgaW5Qcm9ncmVzczogJ3llbGxvdycsXG4gIGNvbXBsZXRlZDogJ25hdnknLFxufSBhcyBjb25zdDtcblxuZXhwb3J0IHR5cGUgQ2FyZFByb3BzID0gUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIENhcmQ+O1xuXG5leHBvcnQgdHlwZSBDdXJyaWN1bHVtQ2FyZFByb3BzID0gU3VidGl0bGVQcm9wcyAmIHtcbiAgYmV0YT86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBEaXNwbGF5cyB0aGUgY3VycmljdWx1bSB0eXBlIGFib3ZlIHRoZSB0aXRsZVxuICAgKi9cbiAgdGV4dDogc3RyaW5nO1xuICB0aXRsZTogc3RyaW5nO1xuICBoZWFkaW5nTGV2ZWw/OiBIZWFkaW5nVGFncztcbiAgaW1hZ2U/OiBzdHJpbmc7XG4gIGlzRnVsbFNpemU/OiBib29sZWFuO1xuICBpc1N0YXRpY1NpemU/OiBib29sZWFuO1xuICBwcm9ncmVzc1N0YXRlPzogUHJvZ3Jlc3NTdGF0ZTtcbiAgc2hvd1Byb0xvZ28/OiBib29sZWFuO1xuICB0YWc/OiBzdHJpbmc7XG4gIHRhZ0NvbG9yPzogVGFnQ29sb3I7XG4gIHNob3dBbHRTdWJ0aXRsZT86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBDaGFuZ2VzIEluIFByb2dyZXNzIGNhcmQgZm9vdGVyIHRleHQgZnJvbSBcIkVucm9sbGVkLi4uXCIgdG8gXCJJbiBQcm9ncmVzcy4uLlwiXG4gICAqL1xuICBmb290ZXJUZXh0VmFyaWFudD86IEZvb3RlclRleHRWYXJpYW50VHlwZTtcbiAgLyoqXG4gICAqIG9wdGlvbmFsIHRleHQgdG8gYmUgZGlzcGxheWVkIGJlbG93IGNhcmQgc3VidGl0bGVcbiAgICovXG4gIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xuICAvKipcbiAgICogYWxsb3dzIGRlc2NyaXB0aW9uIHRvIGJlIHNob3duIGluIGNhcmQgYm9keS5cbiAgICovXG4gIHNob3dEZXNjcmlwdGlvbj86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBjYXJlZXIgcGF0aCBjYXJkcyBhcmUgZGlzcGxheWVkIHdpdGggYSB2YXJpYW50IHN0eWxlIC8gZGVjb3JhdGl2ZSBlbGVtZW50XG4gICAqL1xuICBzaG93Q2FyZWVyUGF0aFZhcmlhbnQ/OiBib29sZWFuO1xuICAvKipcbiAgICogZGlzcGxheXMgaW5uZXIgY29udGVudCB3aXRoIGEgaG9yaXpvbnRhbCBvcmllbnRhdGlvblxuICAgKi9cbiAgaG9yaXpvbnRhbE9yaWVudGF0aW9uPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogY3VzdG9tIG1pbmltdW0gaGVpZ2h0IGZvciBjdXJyaWN1bHVtIGNhcmQgaW4gcGl4ZWxzXG4gICAqL1xuICBtaW5IZWlnaHQ/OiBDYXJkUHJvcHNbJ21pbkhlaWdodCddO1xuICAvKipcbiAgICogY3VzdG9tIG1pbmltdW0gd2lkdGggZm9yIGN1cnJpY3VsdW0gY2FyZCBpbiBwaXhlbHNcbiAgICovXG4gIG1pbldpZHRoPzogQ2FyZFByb3BzWydtaW5XaWR0aCddO1xufTtcblxuY29uc3QgTGluZURlY29yYXRpb24gPSBzdHlsZWQoQm94KWBcbiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkXG4gICAgJHsoeyBpblByb2dyZXNzIH06IHsgaW5Qcm9ncmVzcz86IGJvb2xlYW4gfSkgPT5cbiAgICAgIGluUHJvZ3Jlc3MgPyB0aGVtZS5jb2xvcnMubmF2eSA6IHRoZW1lLmNvbG9yc1snbmF2eS0yMDAnXX07XG5gO1xuXG4vKipcbiAqXG4gKiBAZGVwcmVjYXRlZCAgVGhpcyBjb21wb25lbnQgaXMgZGVwcmVjYXRlZFxuICpcbiAqIFBsZWFzZSB1c2UgdGhlIENhcmVlclBhdGhDYXJkLCBTa2lsbFBhdGhDYXJkLCBvciBDb3Vyc2VDYXJkIGluc3RlYWRcbiAqL1xuXG5leHBvcnQgY29uc3QgQ3VycmljdWx1bUNhcmQ6IFJlYWN0LkZDPEN1cnJpY3VsdW1DYXJkUHJvcHM+ID0gKHtcbiAgYmV0YSxcbiAgZGlmZmljdWx0eSxcbiAgZGVzY3JpcHRpb24sXG4gIGhlYWRpbmdMZXZlbCA9ICdoMycsXG4gIGltYWdlLFxuICBpc0Z1bGxTaXplID0gZmFsc2UsXG4gIGlzU3RhdGljU2l6ZSA9IGZhbHNlLFxuICBwcm9ncmVzc1N0YXRlLFxuICBzY29wZSxcbiAgdGFnLFxuICB0YWdDb2xvcixcbiAgdGV4dCxcbiAgdGl0bGUsXG4gIHNob3dDYXJlZXJQYXRoVmFyaWFudCxcbiAgc2hvd0FsdFN1YnRpdGxlID0gZmFsc2UsXG4gIGZvb3RlclRleHRWYXJpYW50ID0gJ2Vucm9sbGVkJyxcbiAgc2hvd0Rlc2NyaXB0aW9uLFxuICBkaWZmaWN1bHR5VmFyaWFudCxcbiAgaG9yaXpvbnRhbE9yaWVudGF0aW9uLFxuICBtaW5IZWlnaHQsXG4gIG1pbldpZHRoLFxuICBzaG93UHJvTG9nbzogcHJvLFxufSkgPT4ge1xuICBjb25zdCBib3hWYXJpYW50ID0gcHJvZ3Jlc3NTdGF0ZSAmJiBjYXJkU3R5bGVzW3Byb2dyZXNzU3RhdGVdO1xuXG4gIGNvbnN0IGlzQ2FyZWVyUGF0aFZhcmlhbnQgPVxuICAgIHRleHQudG9Mb3dlckNhc2UoKSA9PT0gJ2NhcmVlciBwYXRoJyAmJiBzaG93Q2FyZWVyUGF0aFZhcmlhbnQ7XG5cbiAgY29uc3QgbWluaW11bUhlaWdodCA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGlmIChtaW5IZWlnaHQpIHJldHVybiBtaW5IZWlnaHQ7XG4gICAgcmV0dXJuIGlzU3RhdGljU2l6ZVxuICAgICAgPyBweFJlbSgyODUpXG4gICAgICA6IGlzRnVsbFNpemVcbiAgICAgID8gcHhSZW0oY2FyZEhlaWdodCAqIDIgKyAzMilcbiAgICAgIDogcHhSZW0oY2FyZEhlaWdodCk7XG4gIH0sIFtpc0Z1bGxTaXplLCBpc1N0YXRpY1NpemUsIG1pbkhlaWdodF0pO1xuXG4gIGNvbnN0IGNvbnRlbnRUeXBlID0gdGV4dCA9PT0gJ0NvdXJzZScgJiYgIXBybyA/ICdGcmVlIENvdXJzZScgOiB0ZXh0O1xuICByZXR1cm4gKFxuICAgIDxDYXJkXG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXt7XG4gICAgICAgIF86ICdjb2x1bW4nLFxuICAgICAgICB4czogaG9yaXpvbnRhbE9yaWVudGF0aW9uID8gJ3JvdycgOiAnY29sdW1uJyxcbiAgICAgIH19XG4gICAgICBtaW5IZWlnaHQ9e21pbmltdW1IZWlnaHR9XG4gICAgICBtaW5XaWR0aD17bWluV2lkdGh9XG4gICAgICB2YXJpYW50PXtib3hWYXJpYW50ID8/ICd3aGl0ZSd9XG4gICAgICBpc0ludGVyYWN0aXZlXG4gICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICA+XG4gICAgICA8Qm94XG4gICAgICAgIG1heFdpZHRoPXtob3Jpem9udGFsT3JpZW50YXRpb24gPyA0MTggOiAnbm9uZSd9XG4gICAgICAgIHByPXt7IF86IDAsIHhzOiBob3Jpem9udGFsT3JpZW50YXRpb24gPyA0MCA6IDAgfX1cbiAgICAgID5cbiAgICAgICAgPFRleHQgZGlzcGxheT1cImZsZXhcIiBmb250U2l6ZT17MTR9IG1iPXsxMn0gZm9udEZhbWlseT1cImFjY2VudFwiPlxuICAgICAgICAgIHtjb250ZW50VHlwZX1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgICA8VGV4dCBhcz17aGVhZGluZ0xldmVsfSBtYj17NH0gZm9udFNpemU9ezIwfT5cbiAgICAgICAgICB7dGl0bGV9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICAgeyFwcm9ncmVzc1N0YXRlICYmIChcbiAgICAgICAgICA8RmxleEJveCBmbGV4V3JhcD1cIndyYXBcIiBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICA8U3VidGl0bGVcbiAgICAgICAgICAgICAgc2NvcGU9e3Njb3BlfVxuICAgICAgICAgICAgICBkaWZmaWN1bHR5PXtkaWZmaWN1bHR5fVxuICAgICAgICAgICAgICBzaG93QWx0U3VidGl0bGU9e3Nob3dBbHRTdWJ0aXRsZX1cbiAgICAgICAgICAgICAgZGlmZmljdWx0eVZhcmlhbnQ9e2RpZmZpY3VsdHlWYXJpYW50fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICl9XG4gICAgICAgIHtpc0NhcmVlclBhdGhWYXJpYW50ICYmIChcbiAgICAgICAgICA8TGluZURlY29yYXRpb24gaW5Qcm9ncmVzcz17cHJvZ3Jlc3NTdGF0ZSA9PT0gJ2luUHJvZ3Jlc3MnfSBteT17OH0gLz5cbiAgICAgICAgKX1cbiAgICAgICAgeyhpc0NhcmVlclBhdGhWYXJpYW50IHx8IHNob3dEZXNjcmlwdGlvbikgJiYgKFxuICAgICAgICAgIDxUZXh0IHB0PXs4fSBwYj17MTZ9IGZvbnRTaXplPXsxNH0+XG4gICAgICAgICAgICB7ZGVzY3JpcHRpb259XG4gICAgICAgICAgPC9UZXh0PlxuICAgICAgICApfVxuICAgICAgPC9Cb3g+XG4gICAgICB7aXNGdWxsU2l6ZSAmJiBpbWFnZSAmJiAoXG4gICAgICAgIDxGbGV4Qm94XG4gICAgICAgICAgbXk9XCJhdXRvXCJcbiAgICAgICAgICBtbD1cImF1dG9cIlxuICAgICAgICAgIG1yPXtob3Jpem9udGFsT3JpZW50YXRpb24gPyAwIDogJ2F1dG8nfVxuICAgICAgICAgIHB0PXsxNn1cbiAgICAgICAgICBwYj17aXNDYXJlZXJQYXRoVmFyaWFudCA/IDMyIDogMH1cbiAgICAgICAgICBwcj17eyBfOiAwLCB4czogaG9yaXpvbnRhbE9yaWVudGF0aW9uID8gMjQgOiAwIH19XG4gICAgICAgID5cbiAgICAgICAgICA8SW1hZ2VcbiAgICAgICAgICAgIGlzU21hbGw9e2lzQ2FyZWVyUGF0aFZhcmlhbnR9XG4gICAgICAgICAgICBpbWFnZT17aW1hZ2V9XG4gICAgICAgICAgICBwcm9ncmVzc1N0YXRlPXtwcm9ncmVzc1N0YXRlfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvRmxleEJveD5cbiAgICAgICl9XG4gICAgICA8Rm9vdGVyXG4gICAgICAgIGJldGE9e2JldGF9XG4gICAgICAgIHByb2dyZXNzU3RhdGU9e3Byb2dyZXNzU3RhdGV9XG4gICAgICAgIHRhZz17dGFnfVxuICAgICAgICB0YWdDb2xvcj17dGFnQ29sb3J9XG4gICAgICAgIGZvb3RlclRleHRWYXJpYW50PXtmb290ZXJUZXh0VmFyaWFudH1cbiAgICAgIC8+XG4gICAgPC9DYXJkPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RXVCIn0= */");
 /**
- *
- * @deprecated  This component is deprecated
- *
- * Please use the CareerPathCard, SkillPathCard, or CourseCard instead
- */
+*
+* @deprecated  This component is deprecated
+*
+* Please use the CareerPathCard, SkillPathCard, or CourseCard instead
+*/ const CurriculumCard = ({ beta, difficulty, description, headingLevel = "h3", image, isFullSize = false, isStaticSize = false, progressState, scope, tag, tagColor, text, title, showCareerPathVariant, showAltSubtitle = false, footerTextVariant = "enrolled", showDescription, difficultyVariant, horizontalOrientation, minHeight, minWidth, showProLogo: pro }) => {
+	const boxVariant = progressState && cardStyles[progressState];
+	const isCareerPathVariant = text.toLowerCase() === "career path" && showCareerPathVariant;
+	const minimumHeight = useMemo(() => {
+		if (minHeight) return minHeight;
+		return isStaticSize ? pxRem(285) : isFullSize ? pxRem(cardHeight * 2 + 32) : pxRem(cardHeight);
+	}, [
+		isFullSize,
+		isStaticSize,
+		minHeight
+	]);
+	const contentType = text === "Course" && !pro ? "Free Course" : text;
+	return /* @__PURE__ */ React$1.createElement(Card, {
+		display: "flex",
+		flexDirection: {
+			_: "column",
+			xs: horizontalOrientation ? "row" : "column"
+		},
+		minHeight: minimumHeight,
+		minWidth,
+		variant: boxVariant ?? "white",
+		isInteractive: true,
+		position: "relative"
+	}, /* @__PURE__ */ React$1.createElement(Box, {
+		maxWidth: horizontalOrientation ? 418 : "none",
+		pr: {
+			_: 0,
+			xs: horizontalOrientation ? 40 : 0
+		}
+	}, /* @__PURE__ */ React$1.createElement(Text, {
+		display: "flex",
+		fontSize: 14,
+		mb: 12,
+		fontFamily: "accent"
+	}, contentType), /* @__PURE__ */ React$1.createElement(Text, {
+		as: headingLevel,
+		mb: 4,
+		fontSize: 20
+	}, title), !progressState && /* @__PURE__ */ React$1.createElement(FlexBox, {
+		flexWrap: "wrap",
+		alignItems: "center"
+	}, /* @__PURE__ */ React$1.createElement(Subtitle, {
+		scope,
+		difficulty,
+		showAltSubtitle,
+		difficultyVariant
+	})), isCareerPathVariant && /* @__PURE__ */ React$1.createElement(LineDecoration, {
+		inProgress: progressState === "inProgress",
+		my: 8
+	}), (isCareerPathVariant || showDescription) && /* @__PURE__ */ React$1.createElement(Text, {
+		pt: 8,
+		pb: 16,
+		fontSize: 14
+	}, description)), isFullSize && image && /* @__PURE__ */ React$1.createElement(FlexBox, {
+		my: "auto",
+		ml: "auto",
+		mr: horizontalOrientation ? 0 : "auto",
+		pt: 16,
+		pb: isCareerPathVariant ? 32 : 0,
+		pr: {
+			_: 0,
+			xs: horizontalOrientation ? 24 : 0
+		}
+	}, /* @__PURE__ */ React$1.createElement(Image, {
+		isSmall: isCareerPathVariant,
+		image,
+		progressState
+	})), /* @__PURE__ */ React$1.createElement(Footer, {
+		beta,
+		progressState,
+		tag,
+		tagColor,
+		footerTextVariant
+	}));
+};
 
-export const CurriculumCard = ({
-  beta,
-  difficulty,
-  description,
-  headingLevel = 'h3',
-  image,
-  isFullSize = false,
-  isStaticSize = false,
-  progressState,
-  scope,
-  tag,
-  tagColor,
-  text,
-  title,
-  showCareerPathVariant,
-  showAltSubtitle = false,
-  footerTextVariant = 'enrolled',
-  showDescription,
-  difficultyVariant,
-  horizontalOrientation,
-  minHeight,
-  minWidth,
-  showProLogo: pro
-}) => {
-  const boxVariant = progressState && cardStyles[progressState];
-  const isCareerPathVariant = text.toLowerCase() === 'career path' && showCareerPathVariant;
-  const minimumHeight = useMemo(() => {
-    if (minHeight) return minHeight;
-    return isStaticSize ? pxRem(285) : isFullSize ? pxRem(cardHeight * 2 + 32) : pxRem(cardHeight);
-  }, [isFullSize, isStaticSize, minHeight]);
-  const contentType = text === 'Course' && !pro ? 'Free Course' : text;
-  return /*#__PURE__*/_jsxs(Card, {
-    display: "flex",
-    flexDirection: {
-      _: 'column',
-      xs: horizontalOrientation ? 'row' : 'column'
-    },
-    minHeight: minimumHeight,
-    minWidth: minWidth,
-    variant: boxVariant ?? 'white',
-    isInteractive: true,
-    position: "relative",
-    children: [/*#__PURE__*/_jsxs(Box, {
-      maxWidth: horizontalOrientation ? 418 : 'none',
-      pr: {
-        _: 0,
-        xs: horizontalOrientation ? 40 : 0
-      },
-      children: [/*#__PURE__*/_jsx(Text, {
-        display: "flex",
-        fontSize: 14,
-        mb: 12,
-        fontFamily: "accent",
-        children: contentType
-      }), /*#__PURE__*/_jsx(Text, {
-        as: headingLevel,
-        mb: 4,
-        fontSize: 20,
-        children: title
-      }), !progressState && /*#__PURE__*/_jsx(FlexBox, {
-        flexWrap: "wrap",
-        alignItems: "center",
-        children: /*#__PURE__*/_jsx(Subtitle, {
-          scope: scope,
-          difficulty: difficulty,
-          showAltSubtitle: showAltSubtitle,
-          difficultyVariant: difficultyVariant
-        })
-      }), isCareerPathVariant && /*#__PURE__*/_jsx(LineDecoration, {
-        inProgress: progressState === 'inProgress',
-        my: 8
-      }), (isCareerPathVariant || showDescription) && /*#__PURE__*/_jsx(Text, {
-        pt: 8,
-        pb: 16,
-        fontSize: 14,
-        children: description
-      })]
-    }), isFullSize && image && /*#__PURE__*/_jsx(FlexBox, {
-      my: "auto",
-      ml: "auto",
-      mr: horizontalOrientation ? 0 : 'auto',
-      pt: 16,
-      pb: isCareerPathVariant ? 32 : 0,
-      pr: {
-        _: 0,
-        xs: horizontalOrientation ? 24 : 0
-      },
-      children: /*#__PURE__*/_jsx(Image, {
-        isSmall: isCareerPathVariant,
-        image: image,
-        progressState: progressState
-      })
-    }), /*#__PURE__*/_jsx(Footer, {
-      beta: beta,
-      progressState: progressState,
-      tag: tag,
-      tagColor: tagColor,
-      footerTextVariant: footerTextVariant
-    })]
-  });
-};
+//#endregion
+export { CurriculumCard };
+//# sourceMappingURL=index.js.map

package/dist/CurriculumCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","Card","FlexBox","Text","pxRem","theme","styled","useMemo","React","Footer","Image","Subtitle","cardHeight","cardStyles","inProgress","completed","LineDecoration","colors","navy","CurriculumCard","beta","difficulty","description","headingLevel","image","isFullSize","isStaticSize","progressState","scope","tag","tagColor","text","title","showCareerPathVariant","showAltSubtitle","footerTextVariant","showDescription","difficultyVariant","horizontalOrientation","minHeight","minWidth","showProLogo","pro","boxVariant","isCareerPathVariant","toLowerCase","minimumHeight","contentType","display","flexDirection","_","xs","variant","isInteractive","position","maxWidth","pr","fontSize","mb","fontFamily","as","flexWrap","alignItems","my","pt","pb","ml","mr","isSmall"],"sources":["../../src/CurriculumCard/index.tsx"],"sourcesContent":["import { Box, Card, FlexBox, HeadingTags, Text } from '@codecademy/gamut';\nimport { pxRem, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useMemo } from 'react';\nimport * as React from 'react';\n\nimport { TagColor } from './BottomTag/index';\nimport { Footer } from './Footer/index';\nimport { Image } from './Image/index';\nimport { Subtitle, SubtitleProps } from './Subtitle';\n\nexport type ProgressState = 'inProgress' | 'completed';\n\nexport type FooterTextVariantType = 'enrolled' | 'inProgress';\n\nconst cardHeight = 180;\n\nconst cardStyles = {\n  inProgress: 'yellow',\n  completed: 'navy',\n} as const;\n\nexport type CardProps = React.ComponentProps<typeof Card>;\n\nexport type CurriculumCardProps = SubtitleProps & {\n  beta?: boolean;\n  /**\n   * Displays the curriculum type above the title\n   */\n  text: string;\n  title: string;\n  headingLevel?: HeadingTags;\n  image?: string;\n  isFullSize?: boolean;\n  isStaticSize?: boolean;\n  progressState?: ProgressState;\n  showProLogo?: boolean;\n  tag?: string;\n  tagColor?: TagColor;\n  showAltSubtitle?: boolean;\n  /**\n   * Changes In Progress card footer text from \"Enrolled...\" to \"In Progress...\"\n   */\n  footerTextVariant?: FooterTextVariantType;\n  /**\n   * optional text to be displayed below card subtitle\n   */\n  description?: string;\n  /**\n   * allows description to be shown in card body.\n   */\n  showDescription?: boolean;\n  /**\n   * career path cards are displayed with a variant style / decorative element\n   */\n  showCareerPathVariant?: boolean;\n  /**\n   * displays inner content with a horizontal orientation\n   */\n  horizontalOrientation?: boolean;\n\n  /**\n   * custom minimum height for curriculum card in pixels\n   */\n  minHeight?: CardProps['minHeight'];\n  /**\n   * custom minimum width for curriculum card in pixels\n   */\n  minWidth?: CardProps['minWidth'];\n};\n\nconst LineDecoration = styled(Box)`\n  border-top: 1px solid\n    ${({ inProgress }: { inProgress?: boolean }) =>\n      inProgress ? theme.colors.navy : theme.colors['navy-200']};\n`;\n\n/**\n *\n * @deprecated  This component is deprecated\n *\n * Please use the CareerPathCard, SkillPathCard, or CourseCard instead\n */\n\nexport const CurriculumCard: React.FC<CurriculumCardProps> = ({\n  beta,\n  difficulty,\n  description,\n  headingLevel = 'h3',\n  image,\n  isFullSize = false,\n  isStaticSize = false,\n  progressState,\n  scope,\n  tag,\n  tagColor,\n  text,\n  title,\n  showCareerPathVariant,\n  showAltSubtitle = false,\n  footerTextVariant = 'enrolled',\n  showDescription,\n  difficultyVariant,\n  horizontalOrientation,\n  minHeight,\n  minWidth,\n  showProLogo: pro,\n}) => {\n  const boxVariant = progressState && cardStyles[progressState];\n\n  const isCareerPathVariant =\n    text.toLowerCase() === 'career path' && showCareerPathVariant;\n\n  const minimumHeight = useMemo(() => {\n    if (minHeight) return minHeight;\n    return isStaticSize\n      ? pxRem(285)\n      : isFullSize\n      ? pxRem(cardHeight * 2 + 32)\n      : pxRem(cardHeight);\n  }, [isFullSize, isStaticSize, minHeight]);\n\n  const contentType = text === 'Course' && !pro ? 'Free Course' : text;\n  return (\n    <Card\n      display=\"flex\"\n      flexDirection={{\n        _: 'column',\n        xs: horizontalOrientation ? 'row' : 'column',\n      }}\n      minHeight={minimumHeight}\n      minWidth={minWidth}\n      variant={boxVariant ?? 'white'}\n      isInteractive\n      position=\"relative\"\n    >\n      <Box\n        maxWidth={horizontalOrientation ? 418 : 'none'}\n        pr={{ _: 0, xs: horizontalOrientation ? 40 : 0 }}\n      >\n        <Text display=\"flex\" fontSize={14} mb={12} fontFamily=\"accent\">\n          {contentType}\n        </Text>\n        <Text as={headingLevel} mb={4} fontSize={20}>\n          {title}\n        </Text>\n        {!progressState && (\n          <FlexBox flexWrap=\"wrap\" alignItems=\"center\">\n            <Subtitle\n              scope={scope}\n              difficulty={difficulty}\n              showAltSubtitle={showAltSubtitle}\n              difficultyVariant={difficultyVariant}\n            />\n          </FlexBox>\n        )}\n        {isCareerPathVariant && (\n          <LineDecoration inProgress={progressState === 'inProgress'} my={8} />\n        )}\n        {(isCareerPathVariant || showDescription) && (\n          <Text pt={8} pb={16} fontSize={14}>\n            {description}\n          </Text>\n        )}\n      </Box>\n      {isFullSize && image && (\n        <FlexBox\n          my=\"auto\"\n          ml=\"auto\"\n          mr={horizontalOrientation ? 0 : 'auto'}\n          pt={16}\n          pb={isCareerPathVariant ? 32 : 0}\n          pr={{ _: 0, xs: horizontalOrientation ? 24 : 0 }}\n        >\n          <Image\n            isSmall={isCareerPathVariant}\n            image={image}\n            progressState={progressState}\n          />\n        </FlexBox>\n      )}\n      <Footer\n        beta={beta}\n        progressState={progressState}\n        tag={tag}\n        tagColor={tagColor}\n        footerTextVariant={footerTextVariant}\n      />\n    </Card>\n  );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAMY,aAAa;AAEnB,MAAMC,aAAa;CACjBC,YAAY;CACZC,WAAW;CACb;AAmDA,MAAMC,iBAAiBV,uBAAON,KAAAA;;;kCAEvB,EAAEc,iBACHA,aAAaT,MAAMY,OAAOC,OAAOb,MAAMY,OAAO,aAAW,KAAA,8nOAAA;;;;;;GAU/D,MAAaE,kBAAiD,EAC5DC,MACAC,YACAC,aACAC,eAAe,MACfC,OACAC,aAAa,OACbC,eAAe,OACfC,eACAC,OACAC,KACAC,UACAC,MACAC,OACAC,uBACAC,kBAAkB,OAClBC,oBAAoB,YACpBC,iBACAC,mBACAC,uBACAC,WACAC,UACAC,aAAaC,UACd;CACC,MAAMC,aAAahB,iBAAiBd,WAAWc;CAE/C,MAAMiB,sBACJb,KAAKc,aAAW,KAAO,iBAAiBZ;CAE1C,MAAMa,gBAAgBvC,cAAQ;AAC5B,MAAIgC,UAAW,QAAOA;AACtB,SAAOb,eACHtB,MAAM,IAAA,GACNqB,aACArB,MAAMQ,aAAa,IAAI,GAAA,GACvBR,MAAMQ,WAAAA;IACT;EAACa;EAAYC;EAAca;EAAU,CAAA;CAExC,MAAMQ,cAAchB,SAAS,YAAY,CAACW,MAAM,gBAAgBX;AAChE,QACE,wBAAA,cAAC9B,MAAAA;EACC+C,SAAQ;EACRC,eAAe;GACbC,GAAG;GACHC,IAAIb,wBAAwB,QAAQ;GACtC;EACAC,WAAWO;EACDN;EACVY,SAAST,cAAc;EACvBU,eAAAA;EACAC,UAAS;IAET,wBAAA,cAACtD,KAAAA;EACCuD,UAAUjB,wBAAwB,MAAM;EACxCkB,IAAI;GAAEN,GAAG;GAAGC,IAAIb,wBAAwB,KAAK;GAAE;IAE/C,wBAAA,cAACnC,MAAAA;EAAK6C,SAAQ;EAAOS,UAAU;EAAIC,IAAI;EAAIC,YAAW;IACnDZ,YAAAA,EAEH,wBAAA,cAAC5C,MAAAA;EAAKyD,IAAIrC;EAAcmC,IAAI;EAAGD,UAAU;IACtCzB,MAAAA,EAEF,CAACL,iBACA,wBAAA,cAACzB,SAAAA;EAAQ2D,UAAS;EAAOC,YAAW;IAClC,wBAAA,cAACnD,UAAAA;EACQiB;EACKP;EACKa;EACEG;MAIxBO,uBACC,wBAAA,cAAC5B,gBAAAA;EAAeF,YAAYa,kBAAkB;EAAcoC,IAAI;MAEhEnB,uBAAuBR,oBACvB,wBAAA,cAACjC,MAAAA;EAAK6D,IAAI;EAAGC,IAAI;EAAIR,UAAU;IAC5BnC,YAAAA,CAAAA,EAING,cAAcD,SACb,wBAAA,cAACtB,SAAAA;EACC6D,IAAG;EACHG,IAAG;EACHC,IAAI7B,wBAAwB,IAAI;EAChC0B,IAAI;EACJC,IAAIrB,sBAAsB,KAAK;EAC/BY,IAAI;GAAEN,GAAG;GAAGC,IAAIb,wBAAwB,KAAK;GAAE;IAE/C,wBAAA,cAAC5B,OAAAA;EACC0D,SAASxB;EACFpB;EACQG;MAIrB,wBAAA,cAAClB,QAAAA;EACOW;EACSO;EACVE;EACKC;EACSK"}

package/dist/DropdownButton/DropdownList.cjs

@@ -0,0 +1,59 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/DropdownButton/DropdownList.tsx
+const DropdownList = ({ dropdownItems, isMenu, menuButtonId, onClose }) => {
+	const listRefs = react.useRef(dropdownItems.map(() => /* @__PURE__ */ react.createRef()));
+	const handleKeyDown = (event, index) => {
+		if (event.key === "Tab") {
+			event.preventDefault();
+			onClose?.();
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			if (index > 0) {
+				const decrementVal = dropdownItems[index - 1] === "separator" ? 2 : 1;
+				listRefs.current[index - decrementVal].current?.focus();
+			}
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (index < dropdownItems.length - 1) {
+				const incrementVal = dropdownItems[index + 1] === "separator" ? 2 : 1;
+				listRefs.current[index + incrementVal].current?.focus();
+			}
+		}
+	};
+	return /* @__PURE__ */ react.createElement(_codecademy_gamut.Menu, {
+		variant: "popover",
+		border: "none",
+		minWidth: "max-content",
+		py: 4,
+		role: isMenu ? "menu" : void 0,
+		"aria-labelledby": menuButtonId || ""
+	}, dropdownItems.map((item, i) => {
+		if (item === "separator") return /* @__PURE__ */ react.createElement(_codecademy_gamut.MenuSeparator, {
+			key: `dropdown-separator-${i}`,
+			"aria-hidden": "true"
+		});
+		const { id, text, clickHandler, icon, ...linkProps } = item;
+		const onClick = (event) => {
+			clickHandler?.(event);
+			onClose?.();
+		};
+		return /* @__PURE__ */ react.createElement(_codecademy_gamut.MenuItem, {
+			key: id,
+			"data-testid": `dropdown-item-${id}`,
+			onClick,
+			icon,
+			tabIndex: 0,
+			onKeyDown: (e) => handleKeyDown(e, i),
+			ref: listRefs.current[i],
+			...linkProps
+		}, text);
+	}));
+};
+
+//#endregion
+exports.DropdownList = DropdownList;
+//# sourceMappingURL=DropdownList.cjs.map

package/dist/DropdownButton/DropdownList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownList.cjs","names":["Menu","MenuItem","MenuSeparator","React","DropdownList","dropdownItems","isMenu","menuButtonId","onClose","listRefs","useRef","map","createRef","handleKeyDown","event","index","key","preventDefault","isSeparatorEl","decrementVal","current","focus","length","incrementVal","variant","border","minWidth","py","role","undefined","aria-labelledby","item","i","aria-hidden","id","text","clickHandler","icon","linkProps","onClick","data-testid","tabIndex","onKeyDown","e","ref"],"sources":["../../src/DropdownButton/DropdownList.tsx"],"sourcesContent":["import { Menu, MenuItem, MenuSeparator } from '@codecademy/gamut';\nimport { GamutIconProps } from '@codecademy/gamut-icons';\nimport * as React from 'react';\n\nimport { DropdownButtonProps } from '.';\n\ntype AnchorProps = Partial<\n  Pick<HTMLAnchorElement, 'href' | 'target' | 'ariaLabel'>\n>;\n\nexport type DropdownItem = {\n  id: string;\n  icon?: React.ComponentType<GamutIconProps>;\n  text: string;\n  clickHandler?: (event: React.MouseEvent) => void;\n} & AnchorProps;\n\nexport type DropdownListProps = {\n  dropdownItems: (DropdownItem | 'separator')[];\n  menuButtonId?: string;\n  onClose?: () => void;\n} & Pick<DropdownButtonProps, 'isMenu'>;\n\nexport const DropdownList: React.FC<DropdownListProps> = ({\n  dropdownItems,\n  isMenu,\n  menuButtonId,\n  onClose,\n}) => {\n  const listRefs = React.useRef<React.RefObject<HTMLAnchorElement>[]>(\n    dropdownItems.map(() => React.createRef())\n  );\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent | React.KeyboardEvent,\n    index: number\n  ) => {\n    if (event.key === 'Tab') {\n      event.preventDefault();\n      onClose?.();\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (index > 0) {\n        const isSeparatorEl = dropdownItems[index - 1] === 'separator';\n        const decrementVal = isSeparatorEl ? 2 : 1;\n        // Move focus to the previous item in the list\n        listRefs.current[index - decrementVal].current?.focus();\n      }\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (index < dropdownItems.length - 1) {\n        const isSeparatorEl = dropdownItems[index + 1] === 'separator';\n        const incrementVal = isSeparatorEl ? 2 : 1;\n        // Move focus to the next item in the list\n        listRefs.current[index + incrementVal].current?.focus();\n      }\n    }\n  };\n\n  return (\n    <Menu\n      variant=\"popover\"\n      border=\"none\"\n      minWidth=\"max-content\"\n      py={4}\n      role={isMenu ? 'menu' : undefined}\n      aria-labelledby={menuButtonId || ''}\n    >\n      {dropdownItems.map((item, i) => {\n        if (item === 'separator') {\n          return (\n            // eslint-disable-next-line react/no-array-index-key\n            <MenuSeparator key={`dropdown-separator-${i}`} aria-hidden=\"true\" />\n          );\n        }\n\n        const { id, text, clickHandler, icon, ...linkProps } = item;\n\n        const onClick = (event: React.MouseEvent) => {\n          clickHandler?.(event);\n          onClose?.();\n        };\n\n        return (\n          <MenuItem\n            key={id}\n            data-testid={`dropdown-item-${id}`}\n            onClick={onClick}\n            icon={icon}\n            tabIndex={0}\n            onKeyDown={(e) => handleKeyDown(e, i)}\n            ref={listRefs.current[i]}\n            {...linkProps}\n          >\n            {text}\n          </MenuItem>\n        );\n      })}\n    </Menu>\n  );\n};\n"],"mappings":";;;;;;AAuBA,MAAaI,gBAA6C,EACxDC,eACAC,QACAC,cACAC,cACD;CACC,MAAMC,WAAWN,MAAMO,OACrBL,cAAcM,UAAUR,sBAAMS,WAAS,CAAA,CAAA;CAGzC,MAAMC,iBACJC,OACAC,UAAAA;AAEA,MAAID,MAAME,QAAQ,OAAO;AACvBF,SAAMG,gBAAc;AACpBT,cAAAA;aACSM,MAAME,QAAQ,WAAW;AAClCF,SAAMG,gBAAc;AACpB,OAAIF,QAAQ,GAAG;IAEb,MAAMI,eADgBd,cAAcU,QAAQ,OAAO,cACd,IAAI;AAEzCN,aAASW,QAAQL,QAAQI,cAAcC,SAASC,OAAAA;;aAEzCP,MAAME,QAAQ,aAAa;AACpCF,SAAMG,gBAAc;AACpB,OAAIF,QAAQV,cAAciB,SAAS,GAAG;IAEpC,MAAMC,eADgBlB,cAAcU,QAAQ,OAAO,cACd,IAAI;AAEzCN,aAASW,QAAQL,QAAQQ,cAAcH,SAASC,OAAAA;;;;AAKtD,QACE,sBAAA,cAACrB,wBAAAA;EACCwB,SAAQ;EACRC,QAAO;EACPC,UAAS;EACTC,IAAI;EACJC,MAAMtB,SAAS,SAASuB;EACxBC,mBAAiBvB,gBAAgB;IAEhCF,cAAcM,KAAKoB,MAAMC,MAAAA;AACxB,MAAID,SAAS,YACX,QAEE,sBAAA,cAAC7B,iCAAAA;GAAcc,KAAK,sBAAsBgB;GAAKC,eAAY;;EAI/D,MAAM,EAAEC,IAAIC,MAAMC,cAAcC,MAAM,GAAGC,cAAcP;EAEvD,MAAMQ,WAAWzB,UAAAA;AACfsB,kBAAetB,MAAAA;AACfN,cAAAA;;AAGF,SACE,sBAAA,cAACP,4BAAAA;GACCe,KAAKkB;GACLM,eAAa,iBAAiBN;GACrBK;GACHF;GACNI,UAAU;GACVC,YAAYC,MAAM9B,cAAc8B,GAAGX,EAAAA;GACnCY,KAAKnC,SAASW,QAAQY;GACrB,GAAGM;KAEHH,KAAAA;GAGP,CAAA"}

package/dist/DropdownButton/DropdownList.d.cts

@@ -0,0 +1,20 @@
+import { DropdownButtonProps } from "./index.cjs";
+import { GamutIconProps } from "@codecademy/gamut-icons";
+import * as React$1 from "react";
+
+//#region src/DropdownButton/DropdownList.d.ts
+type AnchorProps = Partial<Pick<HTMLAnchorElement, 'href' | 'target' | 'ariaLabel'>>;
+type DropdownItem = {
+  id: string;
+  icon?: React$1.ComponentType<GamutIconProps>;
+  text: string;
+  clickHandler?: (event: React$1.MouseEvent) => void;
+} & AnchorProps;
+type DropdownListProps = {
+  dropdownItems: (DropdownItem | 'separator')[];
+  menuButtonId?: string;
+  onClose?: () => void;
+} & Pick<DropdownButtonProps, 'isMenu'>;
+//#endregion
+export { DropdownListProps };
+//# sourceMappingURL=DropdownList.d.cts.map

package/dist/DropdownButton/DropdownList.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownList.d.cts","names":[],"sources":["../../src/DropdownButton/DropdownList.tsx"],"mappings":";;;;;KAMK,WAAA,GAAc,OAAA,CACjB,IAAA,CAAK,iBAAA;AAAA,KAGK,YAAA;EACV,EAAA;EACA,IAAA,GAAO,OAAA,CAAM,aAAA,CAAc,cAAA;EAC3B,IAAA;EACA,YAAA,IAAgB,KAAA,EAAO,OAAA,CAAM,UAAA;AAAA,IAC3B,WAAA;AAAA,KAEQ,iBAAA;EACV,aAAA,GAAgB,YAAA;EAChB,YAAA;EACA,OAAA;AAAA,IACE,IAAA,CAAK,mBAAA"}

package/dist/DropdownButton/DropdownList.d.ts

@@ -1,17 +1,20 @@
-import { GamutIconProps } from '@codecademy/gamut-icons';
-import * as React from 'react';
-import { DropdownButtonProps } from '.';
+import { DropdownButtonProps } from "./index.js";
+import * as React$1 from "react";
+import { GamutIconProps } from "@codecademy/gamut-icons";
+
+//#region src/DropdownButton/DropdownList.d.ts
 type AnchorProps = Partial<Pick<HTMLAnchorElement, 'href' | 'target' | 'ariaLabel'>>;
-export type DropdownItem = {
-    id: string;
-    icon?: React.ComponentType<GamutIconProps>;
-    text: string;
-    clickHandler?: (event: React.MouseEvent) => void;
+type DropdownItem = {
+  id: string;
+  icon?: React$1.ComponentType<GamutIconProps>;
+  text: string;
+  clickHandler?: (event: React$1.MouseEvent) => void;
 } & AnchorProps;
-export type DropdownListProps = {
-    dropdownItems: (DropdownItem | 'separator')[];
-    menuButtonId?: string;
-    onClose?: () => void;
+type DropdownListProps = {
+  dropdownItems: (DropdownItem | 'separator')[];
+  menuButtonId?: string;
+  onClose?: () => void;
 } & Pick<DropdownButtonProps, 'isMenu'>;
-export declare const DropdownList: React.FC<DropdownListProps>;
-export {};
+//#endregion
+export { DropdownListProps };
+//# sourceMappingURL=DropdownList.d.ts.map

package/dist/DropdownButton/DropdownList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownList.d.ts","names":[],"sources":["../../src/DropdownButton/DropdownList.tsx"],"mappings":";;;;;KAMK,WAAA,GAAc,OAAA,CACjB,IAAA,CAAK,iBAAA;AAAA,KAGK,YAAA;EACV,EAAA;EACA,IAAA,GAAO,OAAA,CAAM,aAAA,CAAc,cAAA;EAC3B,IAAA;EACA,YAAA,IAAgB,KAAA,EAAO,OAAA,CAAM,UAAA;AAAA,IAC3B,WAAA;AAAA,KAEQ,iBAAA;EACV,aAAA,GAAgB,YAAA;EAChB,YAAA;EACA,OAAA;AAAA,IACE,IAAA,CAAK,mBAAA"}