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

package/dist/DropdownButton/DropdownList.js

@@ -1,73 +1,57 @@
-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);
-    })
-  });
-};
+import { Menu, MenuItem, MenuSeparator } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/DropdownButton/DropdownList.tsx
+const DropdownList = ({ dropdownItems, isMenu, menuButtonId, onClose }) => {
+	const listRefs = React$1.useRef(dropdownItems.map(() => /* @__PURE__ */ React$1.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$1.createElement(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$1.createElement(MenuSeparator, {
+			key: `dropdown-separator-${i}`,
+			"aria-hidden": "true"
+		});
+		const { id, text, clickHandler, icon, ...linkProps } = item;
+		const onClick = (event) => {
+			clickHandler?.(event);
+			onClose?.();
+		};
+		return /* @__PURE__ */ React$1.createElement(MenuItem, {
+			key: id,
+			"data-testid": `dropdown-item-${id}`,
+			onClick,
+			icon,
+			tabIndex: 0,
+			onKeyDown: (e) => handleKeyDown(e, i),
+			ref: listRefs.current[i],
+			...linkProps
+		}, text);
+	}));
+};
+
+//#endregion
+export { DropdownList };
+//# sourceMappingURL=DropdownList.js.map

package/dist/DropdownButton/DropdownList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownList.js","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,QAAMO,OACrBL,cAAcM,UAAUR,wBAAMS,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,wBAAA,cAACrB,MAAAA;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,wBAAA,cAAC7B,eAAAA;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,wBAAA,cAACP,UAAAA;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/index.cjs

@@ -0,0 +1,138 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_DropdownList = require('./DropdownList.cjs');
+const require_useDynamicPopoverPosition = require('./useDynamicPopoverPosition.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/DropdownButton/index.tsx
+const DownArrow = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut_icons.ArrowChevronDownFilledIcon, _codecademy_gamut_styles.styledOptions, {
+	target: "e11oyi20",
+	label: "brand-DownArrow"
+})("margin-left:", (0, _codecademy_gamut_styles.pxRem)(8), ";transition:transform 0.35s ease-out;", ({ isOpen }) => isOpen && "transform: rotate(-180deg)", ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0Ryb3Bkb3duQnV0dG9uL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0Ryb3Bkb3duQnV0dG9uL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCdXR0b25Qcm9wcyxcbiAgRmlsbEJ1dHRvbixcbiAgSWNvbkJ1dHRvbixcbiAgUG9wb3ZlcixcbiAgUG9wb3ZlclByb3BzLFxuICBQb3BvdmVyWVBvc2l0aW9uVHlwZSxcbiAgU3Ryb2tlQnV0dG9uLFxuICBUZXh0QnV0dG9uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBBcnJvd0NoZXZyb25Eb3duRmlsbGVkSWNvbixcbiAgTWluaUtlYmFiTWVudUljb24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgcHhSZW0sIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgZm9yd2FyZFJlZixcbiAgUHJvcHNXaXRoQ2hpbGRyZW4sXG4gIHVzZUlkLFxuICB1c2VJbXBlcmF0aXZlSGFuZGxlLFxuICB1c2VSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IERyb3Bkb3duTGlzdCwgRHJvcGRvd25MaXN0UHJvcHMgfSBmcm9tICcuL0Ryb3Bkb3duTGlzdCc7XG5pbXBvcnQgeyB1c2VEeW5hbWljUG9wb3ZlclBvc2l0aW9uIH0gZnJvbSAnLi91c2VEeW5hbWljUG9wb3ZlclBvc2l0aW9uJztcblxuY29uc3QgRG93bkFycm93ID0gc3R5bGVkKEFycm93Q2hldnJvbkRvd25GaWxsZWRJY29uLCBzdHlsZWRPcHRpb25zKTx7XG4gIGlzT3Blbj86IGJvb2xlYW47XG59PmBcbiAgbWFyZ2luLWxlZnQ6ICR7cHhSZW0oOCl9O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zNXMgZWFzZS1vdXQ7XG4gICR7KHsgaXNPcGVuIH0pID0+IGlzT3BlbiAmJiAndHJhbnNmb3JtOiByb3RhdGUoLTE4MGRlZyknfTtcbmA7XG5cbmNvbnN0IEhvcml6b250YWxLZWJhYkljb24gPSBzdHlsZWQoTWluaUtlYmFiTWVudUljb24pKFxuICBjc3Moe1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSg5MGRlZyknLFxuICB9KVxuKTtcblxuZXhwb3J0IHR5cGUgRHJvcGRvd25CdXR0b25SZWZUeXBlID0ge1xuICBmb2N1czogSFRNTEJ1dHRvbkVsZW1lbnRbJ2ZvY3VzJ107XG59O1xuXG5leHBvcnQgdHlwZSBEcm9wZG93bkJ1dHRvblByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG4gIHtcbiAgICBhbGlnbj86IFBvcG92ZXJQcm9wc1snYWxpZ24nXTtcbiAgICBidXR0b25UeXBlPzogJ2ZpbGwnIHwgJ3N0cm9rZScgfCAndGV4dCcgfCAna2ViYWInIHwgJ2hvcml6b250YWxLZWJhYic7XG4gICAgZGVmYXVsdFBvc2l0aW9uPzogUG9wb3ZlcllQb3NpdGlvblR5cGVbJ3Bvc2l0aW9uJ107XG4gICAgZHJvcGRvd25JdGVtczogRHJvcGRvd25MaXN0UHJvcHNbJ2Ryb3Bkb3duSXRlbXMnXTtcbiAgICBob3Jpem9udGFsT2Zmc2V0PzogbnVtYmVyO1xuICAgIC8qKlxuICAgICAqIFNldHMgdGhlIHNpemUgb2YgdGhlIGRvd24gYXJyb3cgaWNvbiBpbiB0aGUgYnV0dG9ucyB0aGF0IGhhdmUgdGV4dCBvciB0aGUga2ViYWIgYW5kIGhvcml6b250YWwga2ViYWIgaWNvbnMuXG4gICAgICovXG4gICAgaWNvblNpemU/OiBudW1iZXI7XG4gICAgLyoqXG4gICAgICogSWYgdGhlIGRyb3Bkb3duIHNob3VsZCBzZW1hbnRpY2FsbHkgYmUgYSBtZW51XG4gICAgICovXG4gICAgaXNNZW51PzogYm9vbGVhbjtcbiAgICBvbkNsaWNrPzogKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB2b2lkO1xuICAgIHRpcFByb3BzPzogUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEljb25CdXR0b24+Wyd0aXBQcm9wcyddO1xuICAgIHZlcnRpY2FsT2Zmc2V0PzogbnVtYmVyO1xuICB9ICYgQnV0dG9uUHJvcHNcbj47XG5cbmV4cG9ydCBjb25zdCBEcm9wZG93bkJ1dHRvbiA9IGZvcndhcmRSZWY8XG4gIERyb3Bkb3duQnV0dG9uUmVmVHlwZSxcbiAgRHJvcGRvd25CdXR0b25Qcm9wc1xuPihcbiAgKFxuICAgIHtcbiAgICAgIGFsaWduID0gJ2xlZnQnLFxuICAgICAgYnV0dG9uVHlwZSA9ICdmaWxsJyxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgZGVmYXVsdFBvc2l0aW9uID0gJ2JlbG93JyxcbiAgICAgIGRyb3Bkb3duSXRlbXMsXG4gICAgICBob3Jpem9udGFsT2Zmc2V0LFxuICAgICAgaWNvblNpemUsXG4gICAgICBpc01lbnUsXG4gICAgICBvbkNsaWNrLFxuICAgICAgdGlwUHJvcHMsXG4gICAgICB2ZXJ0aWNhbE9mZnNldCA9IDAsXG4gICAgICBzaXplLFxuICAgICAgdmFyaWFudCA9ICdwcmltYXJ5JyxcbiAgICAgIC4uLmJ1dHRvblN0eWxlUHJvcHNcbiAgICB9LFxuICAgIHJlZlxuICApID0+IHtcbiAgICBjb25zdCBidXR0b25JZCA9IHVzZUlkKCk7XG4gICAgY29uc3QgdGFyZ2V0UmVmID0gdXNlUmVmPEhUTUxBbmNob3JFbGVtZW50IHwgSFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuICAgIGNvbnN0IHsgcG9zaXRpb24sIHBvcG92ZXJDb250YWluZXJSZWZDYWxsYmFjayB9ID0gdXNlRHluYW1pY1BvcG92ZXJQb3NpdGlvbihcbiAgICAgIHtcbiAgICAgICAgdGFyZ2V0UmVmLFxuICAgICAgICB2ZXJ0aWNhbE9mZnNldCxcbiAgICAgICAgZGVmYXVsdFBvc2l0aW9uLFxuICAgICAgfVxuICAgICk7XG5cbiAgICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICBmb2N1czogKCkgPT4gdGFyZ2V0UmVmLmN1cnJlbnQ/LmZvY3VzKCksXG4gICAgfSkpO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICghaXNPcGVuKSB7XG4gICAgICAgIG9uQ2xpY2s/LihldmVudCk7XG4gICAgICB9XG4gICAgICBzZXRJc09wZW4oIWlzT3Blbik7XG4gICAgfTtcbiAgICBjb25zdCBoYW5kbGVSZXF1ZXN0Q2xvc2VkID0gKCkgPT4ge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9O1xuXG4gICAgY29uc3QgdGV4dEJ1dHRvbkRlZmF1bHRTaXplID0gJ25vcm1hbCc7XG4gICAgY29uc3QgaWNvbkJ1dHRvbkRlZmF1bHRTaXplID0gJ3NtYWxsJztcblxuICAgIGxldCBjbGlja1RhcmdldDogUmVhY3QuUmVhY3ROb2RlO1xuICAgIHN3aXRjaCAoYnV0dG9uVHlwZSkge1xuICAgICAgY2FzZSAnZmlsbCc6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxGaWxsQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1maWxsLWJ1dHRvblwiXG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IHRleHRCdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxEb3duQXJyb3cgaXNPcGVuPXtpc09wZW59IHNpemU9e2ljb25TaXplIHx8IDEyfSAvPlxuICAgICAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzdHJva2UnOlxuICAgICAgICBjbGlja1RhcmdldCA9IChcbiAgICAgICAgICA8U3Ryb2tlQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1zdHJva2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgdGV4dEJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHsuLi4oYnV0dG9uU3R5bGVQcm9wcyA/PyB7fSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPERvd25BcnJvdyBpc09wZW49e2lzT3Blbn0gc2l6ZT17aWNvblNpemUgfHwgMTJ9IC8+XG4gICAgICAgICAgPC9TdHJva2VCdXR0b24+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAndGV4dCc6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxUZXh0QnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1zdHJva2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgdGV4dEJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHsuLi4oYnV0dG9uU3R5bGVQcm9wcyA/PyB7fSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPERvd25BcnJvdyBpc09wZW49e2lzT3Blbn0gc2l6ZT17MTJ9IC8+XG4gICAgICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2tlYmFiJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIHJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNPcGVufVxuICAgICAgICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgICAgICAgaWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgaWNvbj17KCkgPT4gPE1pbmlLZWJhYk1lbnVJY29uIHNpemU9e2ljb25TaXplfSAvPn1cbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgaWNvbkJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24ta2ViYWItYnV0dG9uXCJcbiAgICAgICAgICAgIHRpcD1cIlNob3cgb3B0aW9uc1wiXG4gICAgICAgICAgICB0aXBQcm9wcz17dGlwUHJvcHN9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnaG9yaXpvbnRhbEtlYmFiJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJPcHRpb25zXCJcbiAgICAgICAgICAgIHJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNPcGVufVxuICAgICAgICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgICAgICAgaWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgaWNvbj17KCkgPT4gPEhvcml6b250YWxLZWJhYkljb24gc2l6ZT17aWNvblNpemV9IC8+fVxuICAgICAgICAgICAgc2l6ZT17c2l6ZSB8fCBpY29uQnV0dG9uRGVmYXVsdFNpemV9XG4gICAgICAgICAgICB2YXJpYW50PVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1ob3Jpem9udGFsLWtlYmFiLWJ1dHRvblwiXG4gICAgICAgICAgICB0aXBQcm9wcz17dGlwUHJvcHN9XG4gICAgICAgICAgICB0aXA9XCJTaG93IG1vcmUgb3B0aW9uc1wiXG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIHtjbGlja1RhcmdldH1cbiAgICAgICAge2Ryb3Bkb3duSXRlbXMubGVuZ3RoICE9PSAwICYmIChcbiAgICAgICAgICA8UG9wb3ZlclxuICAgICAgICAgICAgcG9wb3ZlckNvbnRhaW5lclJlZj17cG9wb3ZlckNvbnRhaW5lclJlZkNhbGxiYWNrfVxuICAgICAgICAgICAgdGFyZ2V0UmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIG9uUmVxdWVzdENsb3NlPXtoYW5kbGVSZXF1ZXN0Q2xvc2VkfVxuICAgICAgICAgICAgYWxpZ249e2FsaWdufVxuICAgICAgICAgICAgdmVydGljYWxPZmZzZXQ9e3ZlcnRpY2FsT2Zmc2V0fVxuICAgICAgICAgICAgaG9yaXpvbnRhbE9mZnNldD17aG9yaXpvbnRhbE9mZnNldH1cbiAgICAgICAgICAgIHBvc2l0aW9uPXtwb3NpdGlvbn1cbiAgICAgICAgICAgIG91dGxpbmVcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8RHJvcGRvd25MaXN0XG4gICAgICAgICAgICAgIGRyb3Bkb3duSXRlbXM9e2Ryb3Bkb3duSXRlbXN9XG4gICAgICAgICAgICAgIGlzTWVudT17aXNNZW51fVxuICAgICAgICAgICAgICBtZW51QnV0dG9uSWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgICBvbkNsb3NlPXtoYW5kbGVSZXF1ZXN0Q2xvc2VkfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1BvcG92ZXI+XG4gICAgICAgICl9XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCa0IifQ== */");
+const HorizontalKebabIcon = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut_icons.MiniKebabMenuIcon, {
+	target: "e11oyi21",
+	label: "brand-HorizontalKebabIcon"
+})((0, _codecademy_gamut_styles.css)({ transform: "rotate(90deg)" }), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0Ryb3Bkb3duQnV0dG9uL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0Ryb3Bkb3duQnV0dG9uL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCdXR0b25Qcm9wcyxcbiAgRmlsbEJ1dHRvbixcbiAgSWNvbkJ1dHRvbixcbiAgUG9wb3ZlcixcbiAgUG9wb3ZlclByb3BzLFxuICBQb3BvdmVyWVBvc2l0aW9uVHlwZSxcbiAgU3Ryb2tlQnV0dG9uLFxuICBUZXh0QnV0dG9uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBBcnJvd0NoZXZyb25Eb3duRmlsbGVkSWNvbixcbiAgTWluaUtlYmFiTWVudUljb24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgcHhSZW0sIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgZm9yd2FyZFJlZixcbiAgUHJvcHNXaXRoQ2hpbGRyZW4sXG4gIHVzZUlkLFxuICB1c2VJbXBlcmF0aXZlSGFuZGxlLFxuICB1c2VSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IERyb3Bkb3duTGlzdCwgRHJvcGRvd25MaXN0UHJvcHMgfSBmcm9tICcuL0Ryb3Bkb3duTGlzdCc7XG5pbXBvcnQgeyB1c2VEeW5hbWljUG9wb3ZlclBvc2l0aW9uIH0gZnJvbSAnLi91c2VEeW5hbWljUG9wb3ZlclBvc2l0aW9uJztcblxuY29uc3QgRG93bkFycm93ID0gc3R5bGVkKEFycm93Q2hldnJvbkRvd25GaWxsZWRJY29uLCBzdHlsZWRPcHRpb25zKTx7XG4gIGlzT3Blbj86IGJvb2xlYW47XG59PmBcbiAgbWFyZ2luLWxlZnQ6ICR7cHhSZW0oOCl9O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zNXMgZWFzZS1vdXQ7XG4gICR7KHsgaXNPcGVuIH0pID0+IGlzT3BlbiAmJiAndHJhbnNmb3JtOiByb3RhdGUoLTE4MGRlZyknfTtcbmA7XG5cbmNvbnN0IEhvcml6b250YWxLZWJhYkljb24gPSBzdHlsZWQoTWluaUtlYmFiTWVudUljb24pKFxuICBjc3Moe1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSg5MGRlZyknLFxuICB9KVxuKTtcblxuZXhwb3J0IHR5cGUgRHJvcGRvd25CdXR0b25SZWZUeXBlID0ge1xuICBmb2N1czogSFRNTEJ1dHRvbkVsZW1lbnRbJ2ZvY3VzJ107XG59O1xuXG5leHBvcnQgdHlwZSBEcm9wZG93bkJ1dHRvblByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG4gIHtcbiAgICBhbGlnbj86IFBvcG92ZXJQcm9wc1snYWxpZ24nXTtcbiAgICBidXR0b25UeXBlPzogJ2ZpbGwnIHwgJ3N0cm9rZScgfCAndGV4dCcgfCAna2ViYWInIHwgJ2hvcml6b250YWxLZWJhYic7XG4gICAgZGVmYXVsdFBvc2l0aW9uPzogUG9wb3ZlcllQb3NpdGlvblR5cGVbJ3Bvc2l0aW9uJ107XG4gICAgZHJvcGRvd25JdGVtczogRHJvcGRvd25MaXN0UHJvcHNbJ2Ryb3Bkb3duSXRlbXMnXTtcbiAgICBob3Jpem9udGFsT2Zmc2V0PzogbnVtYmVyO1xuICAgIC8qKlxuICAgICAqIFNldHMgdGhlIHNpemUgb2YgdGhlIGRvd24gYXJyb3cgaWNvbiBpbiB0aGUgYnV0dG9ucyB0aGF0IGhhdmUgdGV4dCBvciB0aGUga2ViYWIgYW5kIGhvcml6b250YWwga2ViYWIgaWNvbnMuXG4gICAgICovXG4gICAgaWNvblNpemU/OiBudW1iZXI7XG4gICAgLyoqXG4gICAgICogSWYgdGhlIGRyb3Bkb3duIHNob3VsZCBzZW1hbnRpY2FsbHkgYmUgYSBtZW51XG4gICAgICovXG4gICAgaXNNZW51PzogYm9vbGVhbjtcbiAgICBvbkNsaWNrPzogKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB2b2lkO1xuICAgIHRpcFByb3BzPzogUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEljb25CdXR0b24+Wyd0aXBQcm9wcyddO1xuICAgIHZlcnRpY2FsT2Zmc2V0PzogbnVtYmVyO1xuICB9ICYgQnV0dG9uUHJvcHNcbj47XG5cbmV4cG9ydCBjb25zdCBEcm9wZG93bkJ1dHRvbiA9IGZvcndhcmRSZWY8XG4gIERyb3Bkb3duQnV0dG9uUmVmVHlwZSxcbiAgRHJvcGRvd25CdXR0b25Qcm9wc1xuPihcbiAgKFxuICAgIHtcbiAgICAgIGFsaWduID0gJ2xlZnQnLFxuICAgICAgYnV0dG9uVHlwZSA9ICdmaWxsJyxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgZGVmYXVsdFBvc2l0aW9uID0gJ2JlbG93JyxcbiAgICAgIGRyb3Bkb3duSXRlbXMsXG4gICAgICBob3Jpem9udGFsT2Zmc2V0LFxuICAgICAgaWNvblNpemUsXG4gICAgICBpc01lbnUsXG4gICAgICBvbkNsaWNrLFxuICAgICAgdGlwUHJvcHMsXG4gICAgICB2ZXJ0aWNhbE9mZnNldCA9IDAsXG4gICAgICBzaXplLFxuICAgICAgdmFyaWFudCA9ICdwcmltYXJ5JyxcbiAgICAgIC4uLmJ1dHRvblN0eWxlUHJvcHNcbiAgICB9LFxuICAgIHJlZlxuICApID0+IHtcbiAgICBjb25zdCBidXR0b25JZCA9IHVzZUlkKCk7XG4gICAgY29uc3QgdGFyZ2V0UmVmID0gdXNlUmVmPEhUTUxBbmNob3JFbGVtZW50IHwgSFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuICAgIGNvbnN0IHsgcG9zaXRpb24sIHBvcG92ZXJDb250YWluZXJSZWZDYWxsYmFjayB9ID0gdXNlRHluYW1pY1BvcG92ZXJQb3NpdGlvbihcbiAgICAgIHtcbiAgICAgICAgdGFyZ2V0UmVmLFxuICAgICAgICB2ZXJ0aWNhbE9mZnNldCxcbiAgICAgICAgZGVmYXVsdFBvc2l0aW9uLFxuICAgICAgfVxuICAgICk7XG5cbiAgICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICBmb2N1czogKCkgPT4gdGFyZ2V0UmVmLmN1cnJlbnQ/LmZvY3VzKCksXG4gICAgfSkpO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICghaXNPcGVuKSB7XG4gICAgICAgIG9uQ2xpY2s/LihldmVudCk7XG4gICAgICB9XG4gICAgICBzZXRJc09wZW4oIWlzT3Blbik7XG4gICAgfTtcbiAgICBjb25zdCBoYW5kbGVSZXF1ZXN0Q2xvc2VkID0gKCkgPT4ge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9O1xuXG4gICAgY29uc3QgdGV4dEJ1dHRvbkRlZmF1bHRTaXplID0gJ25vcm1hbCc7XG4gICAgY29uc3QgaWNvbkJ1dHRvbkRlZmF1bHRTaXplID0gJ3NtYWxsJztcblxuICAgIGxldCBjbGlja1RhcmdldDogUmVhY3QuUmVhY3ROb2RlO1xuICAgIHN3aXRjaCAoYnV0dG9uVHlwZSkge1xuICAgICAgY2FzZSAnZmlsbCc6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxGaWxsQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1maWxsLWJ1dHRvblwiXG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IHRleHRCdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxEb3duQXJyb3cgaXNPcGVuPXtpc09wZW59IHNpemU9e2ljb25TaXplIHx8IDEyfSAvPlxuICAgICAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzdHJva2UnOlxuICAgICAgICBjbGlja1RhcmdldCA9IChcbiAgICAgICAgICA8U3Ryb2tlQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1zdHJva2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgdGV4dEJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHsuLi4oYnV0dG9uU3R5bGVQcm9wcyA/PyB7fSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPERvd25BcnJvdyBpc09wZW49e2lzT3Blbn0gc2l6ZT17aWNvblNpemUgfHwgMTJ9IC8+XG4gICAgICAgICAgPC9TdHJva2VCdXR0b24+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAndGV4dCc6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxUZXh0QnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1zdHJva2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgdGV4dEJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHsuLi4oYnV0dG9uU3R5bGVQcm9wcyA/PyB7fSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPERvd25BcnJvdyBpc09wZW49e2lzT3Blbn0gc2l6ZT17MTJ9IC8+XG4gICAgICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2tlYmFiJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIHJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNPcGVufVxuICAgICAgICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgICAgICAgaWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgaWNvbj17KCkgPT4gPE1pbmlLZWJhYk1lbnVJY29uIHNpemU9e2ljb25TaXplfSAvPn1cbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgaWNvbkJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24ta2ViYWItYnV0dG9uXCJcbiAgICAgICAgICAgIHRpcD1cIlNob3cgb3B0aW9uc1wiXG4gICAgICAgICAgICB0aXBQcm9wcz17dGlwUHJvcHN9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnaG9yaXpvbnRhbEtlYmFiJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJPcHRpb25zXCJcbiAgICAgICAgICAgIHJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNPcGVufVxuICAgICAgICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgICAgICAgaWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgaWNvbj17KCkgPT4gPEhvcml6b250YWxLZWJhYkljb24gc2l6ZT17aWNvblNpemV9IC8+fVxuICAgICAgICAgICAgc2l6ZT17c2l6ZSB8fCBpY29uQnV0dG9uRGVmYXVsdFNpemV9XG4gICAgICAgICAgICB2YXJpYW50PVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1ob3Jpem9udGFsLWtlYmFiLWJ1dHRvblwiXG4gICAgICAgICAgICB0aXBQcm9wcz17dGlwUHJvcHN9XG4gICAgICAgICAgICB0aXA9XCJTaG93IG1vcmUgb3B0aW9uc1wiXG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIHtjbGlja1RhcmdldH1cbiAgICAgICAge2Ryb3Bkb3duSXRlbXMubGVuZ3RoICE9PSAwICYmIChcbiAgICAgICAgICA8UG9wb3ZlclxuICAgICAgICAgICAgcG9wb3ZlckNvbnRhaW5lclJlZj17cG9wb3ZlckNvbnRhaW5lclJlZkNhbGxiYWNrfVxuICAgICAgICAgICAgdGFyZ2V0UmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIG9uUmVxdWVzdENsb3NlPXtoYW5kbGVSZXF1ZXN0Q2xvc2VkfVxuICAgICAgICAgICAgYWxpZ249e2FsaWdufVxuICAgICAgICAgICAgdmVydGljYWxPZmZzZXQ9e3ZlcnRpY2FsT2Zmc2V0fVxuICAgICAgICAgICAgaG9yaXpvbnRhbE9mZnNldD17aG9yaXpvbnRhbE9mZnNldH1cbiAgICAgICAgICAgIHBvc2l0aW9uPXtwb3NpdGlvbn1cbiAgICAgICAgICAgIG91dGxpbmVcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8RHJvcGRvd25MaXN0XG4gICAgICAgICAgICAgIGRyb3Bkb3duSXRlbXM9e2Ryb3Bkb3duSXRlbXN9XG4gICAgICAgICAgICAgIGlzTWVudT17aXNNZW51fVxuICAgICAgICAgICAgICBtZW51QnV0dG9uSWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgICBvbkNsb3NlPXtoYW5kbGVSZXF1ZXN0Q2xvc2VkfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1BvcG92ZXI+XG4gICAgICAgICl9XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDNEIifQ== */");
+const DropdownButton = /* @__PURE__ */ (0, react.forwardRef)(({ align = "left", buttonType = "fill", children, defaultPosition = "below", dropdownItems, horizontalOffset, iconSize, isMenu, onClick, tipProps, verticalOffset = 0, size, variant = "primary", ...buttonStyleProps }, ref) => {
+	const buttonId = (0, react.useId)();
+	const targetRef = (0, react.useRef)(null);
+	const { position, popoverContainerRefCallback } = require_useDynamicPopoverPosition.useDynamicPopoverPosition({
+		targetRef,
+		verticalOffset,
+		defaultPosition
+	});
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	(0, react.useImperativeHandle)(ref, () => ({ focus: () => targetRef.current?.focus() }));
+	const handleClick = (event) => {
+		if (!isOpen) onClick?.(event);
+		setIsOpen(!isOpen);
+	};
+	const handleRequestClosed = () => {
+		setIsOpen(false);
+	};
+	const textButtonDefaultSize = "normal";
+	const iconButtonDefaultSize = "small";
+	let clickTarget;
+	switch (buttonType) {
+		case "fill":
+			clickTarget = /* @__PURE__ */ react.createElement(_codecademy_gamut.FillButton, {
+				ref: targetRef,
+				"aria-expanded": isOpen,
+				id: buttonId,
+				onClick: handleClick,
+				"data-testid": "dropdown-fill-button",
+				size: size || textButtonDefaultSize,
+				variant,
+				...buttonStyleProps ?? {}
+			}, children, /* @__PURE__ */ react.createElement(DownArrow, {
+				isOpen,
+				size: iconSize || 12
+			}));
+			break;
+		case "stroke":
+			clickTarget = /* @__PURE__ */ react.createElement(_codecademy_gamut.StrokeButton, {
+				ref: targetRef,
+				"aria-expanded": isOpen,
+				id: buttonId,
+				onClick: handleClick,
+				"data-testid": "dropdown-stroke-button",
+				size: size || textButtonDefaultSize,
+				variant,
+				...buttonStyleProps ?? {}
+			}, children, /* @__PURE__ */ react.createElement(DownArrow, {
+				isOpen,
+				size: iconSize || 12
+			}));
+			break;
+		case "text":
+			clickTarget = /* @__PURE__ */ react.createElement(_codecademy_gamut.TextButton, {
+				ref: targetRef,
+				id: buttonId,
+				onClick: handleClick,
+				"data-testid": "dropdown-stroke-button",
+				size: size || textButtonDefaultSize,
+				variant,
+				...buttonStyleProps ?? {}
+			}, children, /* @__PURE__ */ react.createElement(DownArrow, {
+				isOpen,
+				size: 12
+			}));
+			break;
+		case "kebab":
+			clickTarget = /* @__PURE__ */ react.createElement(_codecademy_gamut.IconButton, {
+				ref: targetRef,
+				"aria-expanded": isOpen,
+				"aria-haspopup": "menu",
+				id: buttonId,
+				icon: () => /* @__PURE__ */ react.createElement(_codecademy_gamut_icons.MiniKebabMenuIcon, { size: iconSize }),
+				size: size || iconButtonDefaultSize,
+				variant: "secondary",
+				onClick: handleClick,
+				"data-testid": "dropdown-kebab-button",
+				tip: "Show options",
+				tipProps,
+				...buttonStyleProps ?? {}
+			});
+			break;
+		case "horizontalKebab": clickTarget = /* @__PURE__ */ react.createElement(_codecademy_gamut.IconButton, {
+			"aria-label": "Options",
+			ref: targetRef,
+			"aria-expanded": isOpen,
+			"aria-haspopup": "menu",
+			id: buttonId,
+			icon: () => /* @__PURE__ */ react.createElement(HorizontalKebabIcon, { size: iconSize }),
+			size: size || iconButtonDefaultSize,
+			variant: "secondary",
+			onClick: handleClick,
+			"data-testid": "dropdown-horizontal-kebab-button",
+			tipProps,
+			tip: "Show more options",
+			...buttonStyleProps ?? {}
+		});
+	}
+	return /* @__PURE__ */ react.createElement(react.Fragment, null, clickTarget, dropdownItems.length !== 0 && /* @__PURE__ */ react.createElement(_codecademy_gamut.Popover, {
+		popoverContainerRef: popoverContainerRefCallback,
+		targetRef,
+		isOpen,
+		onRequestClose: handleRequestClosed,
+		align,
+		verticalOffset,
+		horizontalOffset,
+		position,
+		outline: true
+	}, /* @__PURE__ */ react.createElement(require_DropdownList.DropdownList, {
+		dropdownItems,
+		isMenu,
+		menuButtonId: buttonId,
+		onClose: handleRequestClosed
+	})));
+});
+
+//#endregion
+exports.DropdownButton = DropdownButton;
+//# sourceMappingURL=index.cjs.map

package/dist/DropdownButton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["FillButton","IconButton","Popover","StrokeButton","TextButton","ArrowChevronDownFilledIcon","MiniKebabMenuIcon","css","pxRem","styledOptions","styled","forwardRef","useId","useImperativeHandle","useRef","useState","React","DropdownList","useDynamicPopoverPosition","DownArrow","isOpen","HorizontalKebabIcon","transform","DropdownButton","align","buttonType","children","defaultPosition","dropdownItems","horizontalOffset","iconSize","isMenu","onClick","tipProps","verticalOffset","size","variant","buttonStyleProps","ref","buttonId","targetRef","position","popoverContainerRefCallback","setIsOpen","focus","current","handleClick","event","handleRequestClosed","textButtonDefaultSize","iconButtonDefaultSize","clickTarget","aria-expanded","id","data-testid","aria-haspopup","icon","tip","aria-label","length","popoverContainerRef","onRequestClose","outline","menuButtonId","onClose"],"sources":["../../src/DropdownButton/index.tsx"],"sourcesContent":["import {\n  ButtonProps,\n  FillButton,\n  IconButton,\n  Popover,\n  PopoverProps,\n  PopoverYPositionType,\n  StrokeButton,\n  TextButton,\n} from '@codecademy/gamut';\nimport {\n  ArrowChevronDownFilledIcon,\n  MiniKebabMenuIcon,\n} from '@codecademy/gamut-icons';\nimport { css, pxRem, styledOptions } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport {\n  forwardRef,\n  PropsWithChildren,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport * as React from 'react';\n\nimport { DropdownList, DropdownListProps } from './DropdownList';\nimport { useDynamicPopoverPosition } from './useDynamicPopoverPosition';\n\nconst DownArrow = styled(ArrowChevronDownFilledIcon, styledOptions)<{\n  isOpen?: boolean;\n}>`\n  margin-left: ${pxRem(8)};\n  transition: transform 0.35s ease-out;\n  ${({ isOpen }) => isOpen && 'transform: rotate(-180deg)'};\n`;\n\nconst HorizontalKebabIcon = styled(MiniKebabMenuIcon)(\n  css({\n    transform: 'rotate(90deg)',\n  })\n);\n\nexport type DropdownButtonRefType = {\n  focus: HTMLButtonElement['focus'];\n};\n\nexport type DropdownButtonProps = PropsWithChildren<\n  {\n    align?: PopoverProps['align'];\n    buttonType?: 'fill' | 'stroke' | 'text' | 'kebab' | 'horizontalKebab';\n    defaultPosition?: PopoverYPositionType['position'];\n    dropdownItems: DropdownListProps['dropdownItems'];\n    horizontalOffset?: number;\n    /**\n     * Sets the size of the down arrow icon in the buttons that have text or the kebab and horizontal kebab icons.\n     */\n    iconSize?: number;\n    /**\n     * If the dropdown should semantically be a menu\n     */\n    isMenu?: boolean;\n    onClick?: (event: React.MouseEvent) => void;\n    tipProps?: React.ComponentProps<typeof IconButton>['tipProps'];\n    verticalOffset?: number;\n  } & ButtonProps\n>;\n\nexport const DropdownButton = forwardRef<\n  DropdownButtonRefType,\n  DropdownButtonProps\n>(\n  (\n    {\n      align = 'left',\n      buttonType = 'fill',\n      children,\n      defaultPosition = 'below',\n      dropdownItems,\n      horizontalOffset,\n      iconSize,\n      isMenu,\n      onClick,\n      tipProps,\n      verticalOffset = 0,\n      size,\n      variant = 'primary',\n      ...buttonStyleProps\n    },\n    ref\n  ) => {\n    const buttonId = useId();\n    const targetRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);\n    const { position, popoverContainerRefCallback } = useDynamicPopoverPosition(\n      {\n        targetRef,\n        verticalOffset,\n        defaultPosition,\n      }\n    );\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    useImperativeHandle(ref, () => ({\n      focus: () => targetRef.current?.focus(),\n    }));\n\n    const handleClick = (event: React.MouseEvent) => {\n      if (!isOpen) {\n        onClick?.(event);\n      }\n      setIsOpen(!isOpen);\n    };\n    const handleRequestClosed = () => {\n      setIsOpen(false);\n    };\n\n    const textButtonDefaultSize = 'normal';\n    const iconButtonDefaultSize = 'small';\n\n    let clickTarget: React.ReactNode;\n    switch (buttonType) {\n      case 'fill':\n        clickTarget = (\n          <FillButton\n            ref={targetRef}\n            aria-expanded={isOpen}\n            id={buttonId}\n            onClick={handleClick}\n            data-testid=\"dropdown-fill-button\"\n            size={size || textButtonDefaultSize}\n            variant={variant}\n            {...(buttonStyleProps ?? {})}\n          >\n            {children}\n            <DownArrow isOpen={isOpen} size={iconSize || 12} />\n          </FillButton>\n        );\n        break;\n      case 'stroke':\n        clickTarget = (\n          <StrokeButton\n            ref={targetRef}\n            aria-expanded={isOpen}\n            id={buttonId}\n            onClick={handleClick}\n            data-testid=\"dropdown-stroke-button\"\n            size={size || textButtonDefaultSize}\n            variant={variant}\n            {...(buttonStyleProps ?? {})}\n          >\n            {children}\n            <DownArrow isOpen={isOpen} size={iconSize || 12} />\n          </StrokeButton>\n        );\n        break;\n      case 'text':\n        clickTarget = (\n          <TextButton\n            ref={targetRef}\n            id={buttonId}\n            onClick={handleClick}\n            data-testid=\"dropdown-stroke-button\"\n            size={size || textButtonDefaultSize}\n            variant={variant}\n            {...(buttonStyleProps ?? {})}\n          >\n            {children}\n            <DownArrow isOpen={isOpen} size={12} />\n          </TextButton>\n        );\n        break;\n      case 'kebab':\n        clickTarget = (\n          <IconButton\n            ref={targetRef}\n            aria-expanded={isOpen}\n            aria-haspopup=\"menu\"\n            id={buttonId}\n            icon={() => <MiniKebabMenuIcon size={iconSize} />}\n            size={size || iconButtonDefaultSize}\n            variant=\"secondary\"\n            onClick={handleClick}\n            data-testid=\"dropdown-kebab-button\"\n            tip=\"Show options\"\n            tipProps={tipProps}\n            {...(buttonStyleProps ?? {})}\n          />\n        );\n        break;\n      case 'horizontalKebab':\n        clickTarget = (\n          <IconButton\n            aria-label=\"Options\"\n            ref={targetRef}\n            aria-expanded={isOpen}\n            aria-haspopup=\"menu\"\n            id={buttonId}\n            icon={() => <HorizontalKebabIcon size={iconSize} />}\n            size={size || iconButtonDefaultSize}\n            variant=\"secondary\"\n            onClick={handleClick}\n            data-testid=\"dropdown-horizontal-kebab-button\"\n            tipProps={tipProps}\n            tip=\"Show more options\"\n            {...(buttonStyleProps ?? {})}\n          />\n        );\n    }\n\n    return (\n      <>\n        {clickTarget}\n        {dropdownItems.length !== 0 && (\n          <Popover\n            popoverContainerRef={popoverContainerRefCallback}\n            targetRef={targetRef}\n            isOpen={isOpen}\n            onRequestClose={handleRequestClosed}\n            align={align}\n            verticalOffset={verticalOffset}\n            horizontalOffset={horizontalOffset}\n            position={position}\n            outline\n          >\n            <DropdownList\n              dropdownItems={dropdownItems}\n              isMenu={isMenu}\n              menuButtonId={buttonId}\n              onClose={handleRequestClosed}\n            />\n          </Popover>\n        )}\n      </>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAMmB,YAAYT,6CAAOL,oDAA4BI,wCAAAA;;;uDAG9B,EAAA,EAAA,0CAElB,EAAEW,aAAaA,UAAU,8BAAA,KAAA,8+RAAA;AAG9B,MAAMC,sBAAsBX,6CAAOJ,2CAAAA;;;qCAC7B,EACFgB,WAAW,iBACb,CAAA,EAAA,8+RAAA;AA4BF,MAAaC,iBAAiBZ,uCAK1B,EACEa,QAAQ,QACRC,aAAa,QACbC,UACAC,kBAAkB,SAClBC,eACAC,kBACAC,UACAC,QACAC,SACAC,UACAC,iBAAiB,GACjBC,MACAC,UAAU,WACV,GAAGC,oBAELC,QAAAA;CAEA,MAAMC,6BAAW3B;CACjB,MAAM4B,8BAA0D,KAAA;CAChE,MAAM,EAAEC,UAAUC,gCAAgCxB,4DAChD;EACEsB;EACAN;EACAP;EACF,CAAA;CAGF,MAAM,CAACP,QAAQuB,iCAAsB,MAAA;AAErC9B,gCAAoByB,YAAY,EAC9BM,aAAaJ,UAAUK,SAASD,OAAAA,EAClC,EAAA;CAEA,MAAME,eAAeC,UAAAA;AACnB,MAAI,CAAC3B,OACHY,WAAUe,MAAAA;AAEZJ,YAAU,CAACvB,OAAAA;;CAEb,MAAM4B,4BAAsB;AAC1BL,YAAU,MAAA;;CAGZ,MAAMM,wBAAwB;CAC9B,MAAMC,wBAAwB;CAE9B,IAAIC;AACJ,SAAQ1B,YAAR;EACE,KAAK;AACH0B,iBACE,sBAAA,cAACnD,8BAAAA;IACCsC,KAAKE;IACLY,iBAAehC;IACfiC,IAAId;IACJP,SAASc;IACTQ,eAAY;IACZnB,MAAMA,QAAQc;IACLb;IACR,GAAIC,oBAAoB,EAAE;MAE1BX,UACD,sBAAA,cAACP,WAAAA;IAAkBC;IAAQe,MAAML,YAAY;;AAGjD;EACF,KAAK;AACHqB,iBACE,sBAAA,cAAChD,gCAAAA;IACCmC,KAAKE;IACLY,iBAAehC;IACfiC,IAAId;IACJP,SAASc;IACTQ,eAAY;IACZnB,MAAMA,QAAQc;IACLb;IACR,GAAIC,oBAAoB,EAAE;MAE1BX,UACD,sBAAA,cAACP,WAAAA;IAAkBC;IAAQe,MAAML,YAAY;;AAGjD;EACF,KAAK;AACHqB,iBACE,sBAAA,cAAC/C,8BAAAA;IACCkC,KAAKE;IACLa,IAAId;IACJP,SAASc;IACTQ,eAAY;IACZnB,MAAMA,QAAQc;IACLb;IACR,GAAIC,oBAAoB,EAAE;MAE1BX,UACD,sBAAA,cAACP,WAAAA;IAAkBC;IAAQe,MAAM;;AAGrC;EACF,KAAK;AACHgB,iBACE,sBAAA,cAAClD,8BAAAA;IACCqC,KAAKE;IACLY,iBAAehC;IACfmC,iBAAc;IACdF,IAAId;IACJiB,YAAY,sBAAA,cAAClD,2CAAAA,EAAkB6B,MAAML;IACrCK,MAAMA,QAAQe;IACdd,SAAQ;IACRJ,SAASc;IACTQ,eAAY;IACZG,KAAI;IACMxB;IACT,GAAII,oBAAoB,EAAE;;AAG/B;EACF,KAAK,kBACHc,eACE,sBAAA,cAAClD,8BAAAA;GACCyD,cAAW;GACXpB,KAAKE;GACLY,iBAAehC;GACfmC,iBAAc;GACdF,IAAId;GACJiB,YAAY,sBAAA,cAACnC,qBAAAA,EAAoBc,MAAML;GACvCK,MAAMA,QAAQe;GACdd,SAAQ;GACRJ,SAASc;GACTQ,eAAY;GACFrB;GACVwB,KAAI;GACH,GAAIpB,oBAAoB,EAAE;;;AAKnC,QACE,sBAAA,cAAA,MAAA,UAAA,MACGc,aACAvB,cAAc+B,WAAW,KACxB,sBAAA,cAACzD,2BAAAA;EACC0D,qBAAqBlB;EACVF;EACHpB;EACRyC,gBAAgBb;EACTxB;EACSU;EACEL;EACRY;EACVqB,SAAAA;IAEA,sBAAA,cAAC7C,mCAAAA;EACgBW;EACPG;EACRgC,cAAcxB;EACdyB,SAAShB;;EAMrB"}

package/dist/DropdownButton/index.d.cts

@@ -0,0 +1,81 @@
+import { DropdownListProps } from "./DropdownList.cjs";
+import { ButtonProps, IconButton, PopoverProps, PopoverYPositionType } from "@codecademy/gamut";
+import * as react from "react";
+import { PropsWithChildren } from "react";
+import * as _emotion_react0 from "@emotion/react";
+import * as _codecademy_gamut_dist_Button_shared0 from "@codecademy/gamut/dist/Button/shared";
+
+//#region src/DropdownButton/index.d.ts
+type DropdownButtonRefType = {
+  focus: HTMLButtonElement['focus'];
+};
+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>;
+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;
+} & _codecademy_gamut_dist_Button_shared0.ButtonBaseProps & Omit<{
+  theme?: _emotion_react0.Theme | undefined;
+  as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+} & {
+  theme?: _emotion_react0.Theme | undefined;
+} & Pick<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "content" | "translate" | "property" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "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-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" | "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" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "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" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "type" | "disabled" | "name" | 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;
+} & _codecademy_gamut_dist_Button_shared0.ButtonBaseProps & Omit<{
+  theme?: _emotion_react0.Theme | undefined;
+  as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+} & {
+  theme?: _emotion_react0.Theme | undefined;
+} & Pick<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "content" | "translate" | "property" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "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-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" | "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" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "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" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "type" | "disabled" | "name" | keyof react.ClassAttributes<HTMLButtonElement> | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value"> & Pick<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "content" | "translate" | "property" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "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-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" | "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" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "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" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "media" | "target" | "type" | "href" | keyof react.ClassAttributes<HTMLAnchorElement> | "download" | "hrefLang" | "ping" | "referrerPolicy">, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+  children?: react.ReactNode | undefined;
+}, "ref">) & react.RefAttributes<DropdownButtonRefType>>;
+//#endregion
+export { DropdownButton, DropdownButtonProps, DropdownButtonRefType };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/DropdownButton/index.tsx"],"mappings":";;;;;;;;KA2CY,qBAAA;EACV,KAAA,EAAO,iBAAA;AAAA;AAAA,KAGG,mBAAA,GAAsB,iBAAA;EAE9B,KAAA,GAAQ,YAAA;EACR,UAAA;EACA,eAAA,GAAkB,oBAAA;EAClB,aAAA,EAAe,iBAAA;EACf,gBAAA;EANQ;;;EAUR,QAAA;EANkB;;;EAUlB,MAAA;EACA,OAAA,IAAW,KAAA,EAAO,KAAA,CAAM,UAAA;EACxB,QAAA,GAAW,KAAA,CAAM,cAAA,QAAsB,UAAA;EACvC,cAAA;AAAA,IACE,WAAA;AAAA,cAGO,cAAA,EAAc,KAAA,CAAA,yBAAA,EAAA,IAAA;UAnBf,YAAA;;oBAEU,oBAAA;iBACH,iBAAA;;EADG;;;;EAMlB;;;;aAKW,KAAA,EAAO,KAAA,CAAM,UAAA;aACb,KAAA,CAAM,cAAA,QAAsB,UAAA;;IAAR,qCAAA,CAAA,eAAA;;;;;;;;UAdvB,YAAA;;oBAEU,oBAAA;iBACH,iBAAA;;EAUG;;;;;;;;aAAP,KAAA,EAAO,KAAA,CAAM,UAAA;aACb,KAAA,CAAM,cAAA,QAAsB,UAAA;;IAAR,qCAAA,CAAA,eAAA"}