@codecademy/brand 4.0.0-alpha.fb4adf2b4d.0 → 4.0.0

package/dist/CurriculumCard/Footer/index.js

@@ -0,0 +1,54 @@
+import { Box, FlexBox, Text } from '@codecademy/gamut';
+import * as React from 'react';
+import { BetaSticker } from '../../BetaSticker';
+import { BottomTag } from '../BottomTag/index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Footer = ({
+  beta,
+  progressState,
+  tag,
+  tagColor,
+  footerTextVariant
+}) => {
+  if (progressState) {
+    return /*#__PURE__*/_jsxs(Box, {
+      mt: "auto",
+      children: [progressState === 'completed' && /*#__PURE__*/_jsx(Text, {
+        fontSize: 16,
+        fontFamily: "accent",
+        textColor: "yellow",
+        children: "Completed"
+      }), progressState === 'inProgress' && /*#__PURE__*/_jsxs(FlexBox, {
+        flexWrap: "wrap",
+        justifyContent: "space-between",
+        alignItems: "flex-end",
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(Text, {
+          fontFamily: "accent",
+          fontSize: 14,
+          children: footerTextVariant === 'inProgress' ? 'In Progress...' : 'Enrolled...'
+        }), /*#__PURE__*/_jsx(Text, {
+          textColor: "hyper",
+          children: "Keep Going"
+        })]
+      })]
+    });
+  }
+  if (beta) {
+    return /*#__PURE__*/_jsx(Box, {
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      pb: 16,
+      pr: 16,
+      children: /*#__PURE__*/_jsx(BetaSticker, {})
+    });
+  }
+  if (tag && tagColor) {
+    return /*#__PURE__*/_jsx(BottomTag, {
+      text: tag,
+      color: tagColor
+    });
+  }
+  return null;
+};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type ProgressState = 'inProgress' | 'completed';
+export type ImageProps = {
+    image: string;
+    progressState?: ProgressState;
+    isSmall?: boolean;
+};
+export declare const Image: React.FC<ImageProps>;
+export {};

package/dist/CurriculumCard/Image/index.js

@@ -0,0 +1,56 @@
+import _styled from "@emotion/styled/base";
+import { variant } from '@codecademy/gamut-styles';
+import { useState } from 'react';
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from 'react-use';
+import { BASE_STATIC_ASSET_PATH } from '../../remoteAssets/components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const variants = variant({
+  base: {
+    display: 'block',
+    margin: '0 auto'
+  },
+  variants: {
+    default: {
+      width: 160
+    },
+    small: {
+      width: 111
+    }
+  }
+});
+const StyledImg = /*#__PURE__*/_styled("img", {
+  target: "e17253uu0",
+  label: "StyledImg"
+})(variants, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DdXJyaWN1bHVtQ2FyZC9JbWFnZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJrQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQ3VycmljdWx1bUNhcmQvSW1hZ2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdyZWFjdC11c2UnO1xuXG5pbXBvcnQgeyBCQVNFX1NUQVRJQ19BU1NFVF9QQVRIIH0gZnJvbSAnLi4vLi4vcmVtb3RlQXNzZXRzL2NvbXBvbmVudHMnO1xuXG5jb25zdCB2YXJpYW50cyA9IHZhcmlhbnQoe1xuICBiYXNlOiB7XG4gICAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgICBtYXJnaW46ICcwIGF1dG8nLFxuICB9LFxuICB2YXJpYW50czoge1xuICAgIGRlZmF1bHQ6IHtcbiAgICAgIHdpZHRoOiAxNjAsXG4gICAgfSxcbiAgICBzbWFsbDoge1xuICAgICAgd2lkdGg6IDExMSxcbiAgICB9LFxuICB9LFxufSk7XG5cbmNvbnN0IFN0eWxlZEltZyA9IHN0eWxlZC5pbWcodmFyaWFudHMpO1xuXG50eXBlIFByb2dyZXNzU3RhdGUgPSAnaW5Qcm9ncmVzcycgfCAnY29tcGxldGVkJztcblxuY29uc3QgZ2V0UGxhY2Vob2xkZXJBc3NldFBhdGggPSAocGF0aFByb2dyZXNzU3RhdGU/OiBQcm9ncmVzc1N0YXRlKSA9PiB7XG4gIGNvbnN0IHByb2dyZXNzU3RhdGUgPSBwYXRoUHJvZ3Jlc3NTdGF0ZSA/IGAtJHtwYXRoUHJvZ3Jlc3NTdGF0ZX1gIDogJyc7XG4gIHJldHVybiBgJHtCQVNFX1NUQVRJQ19BU1NFVF9QQVRIfS9jdXJyaWN1bHVtL3BhdGgvcGxhY2Vob2xkZXIke3Byb2dyZXNzU3RhdGV9LnN2Z2A7XG59O1xuXG5leHBvcnQgdHlwZSBJbWFnZVByb3BzID0ge1xuICBpbWFnZTogc3RyaW5nO1xuICBwcm9ncmVzc1N0YXRlPzogUHJvZ3Jlc3NTdGF0ZTtcbiAgaXNTbWFsbD86IGJvb2xlYW47XG59O1xuXG5leHBvcnQgY29uc3QgSW1hZ2U6IFJlYWN0LkZDPEltYWdlUHJvcHM+ID0gKHtcbiAgaW1hZ2UsXG4gIHByb2dyZXNzU3RhdGUsXG4gIGlzU21hbGwsXG59KSA9PiB7XG4gIGNvbnN0IFtyZWFkeSwgc2V0UmVhZHldID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbZXJyb3IsIHNldEVycm9yXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICAvKiogRGVsYXkgaW5pdGlhbCByZW5kZXIgb25jZSB0byBlbnN1cmUgdGhhdCByZWh5ZHJhdGlvbiBkb2VzIG5vdCBjb25mbGljdCB3aXRoIHBvcnRhbCBtb3VudGluZyAqL1xuICB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBzZXRSZWFkeSh0eXBlb2YgZG9jdW1lbnQgIT09ICd1bmRlZmluZWQnKTtcbiAgfSwgW10pO1xuXG4gIGlmICghcmVhZHkpIHJldHVybiBudWxsO1xuXG4gIGNvbnN0IGFkZERlZmF1bHRJbWFnZVNvdXJjZSA9IChldmVudDogUmVhY3QuU3ludGhldGljRXZlbnQpID0+IHtcbiAgICBpZiAoIWVycm9yKSB7XG4gICAgICAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbWFnZUVsZW1lbnQpLm9uZXJyb3IgPSBudWxsO1xuICAgICAgKGV2ZW50LnRhcmdldCBhcyBIVE1MSW1hZ2VFbGVtZW50KS5zcmMgPVxuICAgICAgICBnZXRQbGFjZWhvbGRlckFzc2V0UGF0aChwcm9ncmVzc1N0YXRlKTtcbiAgICAgIHNldEVycm9yKHRydWUpO1xuICAgIH1cbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRJbWdcbiAgICAgIHZhcmlhbnQ9e2lzU21hbGwgPyAnc21hbGwnIDogJ2RlZmF1bHQnfVxuICAgICAgc3JjPXtpbWFnZX1cbiAgICAgIGFsdD1cIlwiXG4gICAgICBvbkVycm9yPXthZGREZWZhdWx0SW1hZ2VTb3VyY2V9XG4gICAgLz5cbiAgKTtcbn07XG4iXX0= */");
+const getPlaceholderAssetPath = pathProgressState => {
+  const progressState = pathProgressState ? `-${pathProgressState}` : '';
+  return `${BASE_STATIC_ASSET_PATH}/curriculum/path/placeholder${progressState}.svg`;
+};
+export const Image = ({
+  image,
+  progressState,
+  isSmall
+}) => {
+  const [ready, setReady] = useState(false);
+  const [error, setError] = useState(false);
+
+  /** Delay initial render once to ensure that rehydration does not conflict with portal mounting */
+  useIsomorphicLayoutEffect(() => {
+    setReady(typeof document !== 'undefined');
+  }, []);
+  if (!ready) return null;
+  const addDefaultImageSource = event => {
+    if (!error) {
+      event.target.onerror = null;
+      event.target.src = getPlaceholderAssetPath(progressState);
+      setError(true);
+    }
+  };
+  return /*#__PURE__*/_jsx(StyledImg, {
+    variant: isSmall ? 'small' : 'default',
+    src: image,
+    alt: "",
+    onError: addDefaultImageSource
+  });
+};

package/dist/CurriculumCard/Subtitle/helpers.d.ts

@@ -0,0 +1 @@
+export declare const pluralizeWithS: (scope: string, scopeCount: number) => string;

package/dist/CurriculumCard/Subtitle/helpers.js

@@ -0,0 +1,8 @@
+/* Quick and easy credit: https://stackoverflow.com/a/39835908 */
+export const pluralizeWithS = (scope, scopeCount) => {
+  // Out of all of our content types, only quizzes need a different way to be pluralized
+  if (scope.charAt(scope.length - 1) === 'z') {
+    return `${scope}${scopeCount !== 1 ? 'zes' : ''}`;
+  }
+  return `${scope}${scopeCount !== 1 ? 's' : ''}`;
+};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ContentDifficultyProps, DifficultyVariant } from '../Difficulty/types';
+export type SubtitleProps = Pick<ContentDifficultyProps, 'difficulty'> & {
+    scope: Record<string, number>;
+    showAltSubtitle?: boolean;
+    difficultyVariant?: DifficultyVariant;
+};
+export declare const Subtitle: React.FC<SubtitleProps>;

package/dist/CurriculumCard/Subtitle/index.js

@@ -0,0 +1,34 @@
+import { FlexBox, Text } from '@codecademy/gamut';
+import capitalize from 'lodash/capitalize';
+import * as React from 'react';
+import { Difficulty } from '../Difficulty';
+import { pluralizeWithS } from './helpers';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Subtitle = ({
+  difficulty,
+  scope,
+  showAltSubtitle = false,
+  difficultyVariant
+}) => {
+  const scopeToMap = Object.keys(scope).filter(val => scope[val] > 0);
+  const separatingChar = showAltSubtitle ? '|' : ',';
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!showAltSubtitle && /*#__PURE__*/_jsxs(FlexBox, {
+      fontSize: 14,
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Difficulty, {
+        variant: difficultyVariant,
+        difficulty: difficulty
+      }), scopeToMap.length ? separatingChar : null]
+    }), scopeToMap.map((scopeType, index) => /*#__PURE__*/_jsxs(Text, {
+      ml: showAltSubtitle && index === 0 ? 0 : 4,
+      variant: "p-small",
+      children: [/*#__PURE__*/_jsx("b", {
+        children: scope[scopeType]
+      }), ' ', /*#__PURE__*/_jsx(Text, {
+        textColor: "gray-900",
+        children: capitalize(pluralizeWithS(scopeType, scope[scopeType]))
+      }), ' ', index < scopeToMap.length - 1 && separatingChar, ' ']
+    }, `${scopeType}-count`))]
+  });
+};

package/dist/CurriculumCard/index.d.ts

@@ -0,0 +1,59 @@
+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'];
+};
+/**
+ *
+ * @deprecated  This component is deprecated
+ *
+ * Please use the CareerPathCard, SkillPathCard, or CourseCard instead
+ */
+export declare const CurriculumCard: React.FC<CurriculumCardProps>;

package/dist/CurriculumCard/index.js

@@ -0,0 +1,129 @@
+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";
+const cardHeight = 180;
+const cardStyles = {
+  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= */"));
+
+/**
+ *
+ * @deprecated  This component is deprecated
+ *
+ * Please use the CareerPathCard, SkillPathCard, or CourseCard instead
+ */
+
+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
+    })]
+  });
+};

package/dist/DropdownButton/DropdownList.d.ts

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

package/dist/DropdownButton/DropdownList.js

@@ -0,0 +1,73 @@
+import { Menu, MenuItem, MenuSeparator } from '@codecademy/gamut';
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export 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 isSeparatorEl = dropdownItems[index - 1] === 'separator';
+        const decrementVal = isSeparatorEl ? 2 : 1;
+        // Move focus to the previous item in the list
+        listRefs.current[index - decrementVal].current?.focus();
+      }
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (index < dropdownItems.length - 1) {
+        const isSeparatorEl = dropdownItems[index + 1] === 'separator';
+        const incrementVal = isSeparatorEl ? 2 : 1;
+        // Move focus to the next item in the list
+        listRefs.current[index + incrementVal].current?.focus();
+      }
+    }
+  };
+  return /*#__PURE__*/_jsx(Menu, {
+    variant: "popover",
+    border: "none",
+    minWidth: "max-content",
+    py: 4,
+    role: isMenu ? 'menu' : undefined,
+    "aria-labelledby": menuButtonId || '',
+    children: dropdownItems.map((item, i) => {
+      if (item === 'separator') {
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line react/no-array-index-key
+          _jsx(MenuSeparator, {
+            "aria-hidden": "true"
+          }, `dropdown-separator-${i}`)
+        );
+      }
+      const {
+        id,
+        text,
+        clickHandler,
+        icon,
+        ...linkProps
+      } = item;
+      const onClick = event => {
+        clickHandler?.(event);
+        onClose?.();
+      };
+      return /*#__PURE__*/_jsx(MenuItem, {
+        "data-testid": `dropdown-item-${id}`,
+        onClick: onClick,
+        icon: icon,
+        tabIndex: 0,
+        onKeyDown: e => handleKeyDown(e, i),
+        ref: listRefs.current[i],
+        ...linkProps,
+        children: text
+      }, id);
+    })
+  });
+};

package/dist/DropdownButton/index.d.ts

@@ -0,0 +1,74 @@
+import { ButtonProps, IconButton, PopoverProps, PopoverYPositionType } from '@codecademy/gamut';
+import { PropsWithChildren } from 'react';
+import * as React from 'react';
+import { DropdownListProps } from './DropdownList';
+export type DropdownButtonRefType = {
+    focus: HTMLButtonElement['focus'];
+};
+export type DropdownButtonProps = PropsWithChildren<{
+    align?: PopoverProps['align'];
+    buttonType?: 'fill' | 'stroke' | 'text' | 'kebab' | 'horizontalKebab';
+    defaultPosition?: PopoverYPositionType['position'];
+    dropdownItems: DropdownListProps['dropdownItems'];
+    horizontalOffset?: number;
+    /**
+     * Sets the size of the down arrow icon in the buttons that have text or the kebab and horizontal kebab icons.
+     */
+    iconSize?: number;
+    /**
+     * If the dropdown should semantically be a menu
+     */
+    isMenu?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    tipProps?: React.ComponentProps<typeof IconButton>['tipProps'];
+    verticalOffset?: number;
+} & ButtonProps>;
+export declare const DropdownButton: React.ForwardRefExoticComponent<(Omit<{
+    align?: PopoverProps["align"];
+    buttonType?: "fill" | "stroke" | "text" | "kebab" | "horizontalKebab";
+    defaultPosition?: PopoverYPositionType["position"];
+    dropdownItems: DropdownListProps["dropdownItems"];
+    horizontalOffset?: number;
+    /**
+     * Sets the size of the down arrow icon in the buttons that have text or the kebab and horizontal kebab icons.
+     */
+    iconSize?: number;
+    /**
+     * If the dropdown should semantically be a menu
+     */
+    isMenu?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    tipProps?: React.ComponentProps<typeof IconButton>["tipProps"];
+    verticalOffset?: number;
+} & import("@codecademy/gamut/dist/Button/shared").ButtonBaseProps & Omit<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "name" | "content" | "translate" | "property" | "hidden" | "form" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | keyof React.ClassAttributes<HTMLButtonElement> | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    children?: React.ReactNode | undefined;
+}, "ref"> | Omit<{
+    align?: PopoverProps["align"];
+    buttonType?: "fill" | "stroke" | "text" | "kebab" | "horizontalKebab";
+    defaultPosition?: PopoverYPositionType["position"];
+    dropdownItems: DropdownListProps["dropdownItems"];
+    horizontalOffset?: number;
+    /**
+     * Sets the size of the down arrow icon in the buttons that have text or the kebab and horizontal kebab icons.
+     */
+    iconSize?: number;
+    /**
+     * If the dropdown should semantically be a menu
+     */
+    isMenu?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    tipProps?: React.ComponentProps<typeof IconButton>["tipProps"];
+    verticalOffset?: number;
+} & import("@codecademy/gamut/dist/Button/shared").ButtonBaseProps & Omit<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "name" | "content" | "translate" | "property" | "hidden" | "form" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | keyof React.ClassAttributes<HTMLButtonElement> | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value"> & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "media" | "target" | "type" | "role" | "tabIndex" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | keyof React.ClassAttributes<HTMLAnchorElement> | "download" | "hrefLang" | "ping" | "referrerPolicy">, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    children?: React.ReactNode | undefined;
+}, "ref">) & React.RefAttributes<DropdownButtonRefType>>;