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

package/dist/DropdownButton/index.js

@@ -1,137 +1,169 @@
-import { DropdownList } from "./DropdownList.js";
-import { useDynamicPopoverPosition } from "./useDynamicPopoverPosition.js";
-import { FillButton, IconButton, Popover, StrokeButton, TextButton } from "@codecademy/gamut";
-import { css, pxRem, styledOptions } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { forwardRef, useId, useImperativeHandle, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowChevronDownFilledIcon, MiniKebabMenuIcon } from "@codecademy/gamut-icons";
-
-//#region src/DropdownButton/index.tsx
-const DownArrow = styled(ArrowChevronDownFilledIcon, styledOptions)`
-  margin-left: ${pxRem(8)};
-  transition: transform 0.35s ease-out;
-  ${({ isOpen }) => isOpen && "transform: rotate(-180deg)"};
-`;
-const HorizontalKebabIcon = styled(MiniKebabMenuIcon)(css({ transform: "rotate(90deg)" }));
-const DropdownButton = forwardRef(({ align = "left", buttonType = "fill", children, defaultPosition = "below", dropdownItems, horizontalOffset, iconSize, isMenu, onClick, tipProps, verticalOffset = 0, size, variant: variant$1 = "primary", ...buttonStyleProps }, ref) => {
-	const buttonId = useId();
-	const targetRef = useRef(null);
-	const { position, popoverContainerRefCallback } = useDynamicPopoverPosition({
-		targetRef,
-		verticalOffset,
-		defaultPosition
-	});
-	const [isOpen, setIsOpen] = useState(false);
-	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__ */ jsxs(FillButton, {
-				ref: targetRef,
-				"aria-expanded": isOpen,
-				id: buttonId,
-				onClick: handleClick,
-				"data-testid": "dropdown-fill-button",
-				size: size || textButtonDefaultSize,
-				variant: variant$1,
-				...buttonStyleProps ?? {},
-				children: [children, /* @__PURE__ */ jsx(DownArrow, {
-					isOpen,
-					size: iconSize || 12
-				})]
-			});
-			break;
-		case "stroke":
-			clickTarget = /* @__PURE__ */ jsxs(StrokeButton, {
-				ref: targetRef,
-				"aria-expanded": isOpen,
-				id: buttonId,
-				onClick: handleClick,
-				"data-testid": "dropdown-stroke-button",
-				size: size || textButtonDefaultSize,
-				variant: variant$1,
-				...buttonStyleProps ?? {},
-				children: [children, /* @__PURE__ */ jsx(DownArrow, {
-					isOpen,
-					size: iconSize || 12
-				})]
-			});
-			break;
-		case "text":
-			clickTarget = /* @__PURE__ */ jsxs(TextButton, {
-				ref: targetRef,
-				id: buttonId,
-				onClick: handleClick,
-				"data-testid": "dropdown-stroke-button",
-				size: size || textButtonDefaultSize,
-				variant: variant$1,
-				...buttonStyleProps ?? {},
-				children: [children, /* @__PURE__ */ jsx(DownArrow, {
-					isOpen,
-					size: 12
-				})]
-			});
-			break;
-		case "kebab":
-			clickTarget = /* @__PURE__ */ jsx(IconButton, {
-				ref: targetRef,
-				"aria-expanded": isOpen,
-				"aria-haspopup": "menu",
-				id: buttonId,
-				icon: () => /* @__PURE__ */ jsx(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__ */ jsx(IconButton, {
-			"aria-label": "Options",
-			ref: targetRef,
-			"aria-expanded": isOpen,
-			"aria-haspopup": "menu",
-			id: buttonId,
-			icon: () => /* @__PURE__ */ jsx(HorizontalKebabIcon, { size: iconSize }),
-			size: size || iconButtonDefaultSize,
-			variant: "secondary",
-			onClick: handleClick,
-			"data-testid": "dropdown-horizontal-kebab-button",
-			tipProps,
-			tip: "Show more options",
-			...buttonStyleProps ?? {}
-		});
-	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [clickTarget, dropdownItems.length !== 0 && /* @__PURE__ */ jsx(Popover, {
-		popoverContainerRef: popoverContainerRefCallback,
-		targetRef,
-		isOpen,
-		onRequestClose: handleRequestClosed,
-		align,
-		verticalOffset,
-		horizontalOffset,
-		position,
-		outline: true,
-		children: /* @__PURE__ */ jsx(DropdownList, {
-			dropdownItems,
-			isMenu,
-			menuButtonId: buttonId,
-			onClose: handleRequestClosed
-		})
-	})] });
-});
-
-//#endregion
-export { DropdownButton };
+import _styled from "@emotion/styled/base";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { FillButton, IconButton, Popover, StrokeButton, TextButton } from '@codecademy/gamut';
+import { ArrowChevronDownFilledIcon, MiniKebabMenuIcon } from '@codecademy/gamut-icons';
+import { css, pxRem, styledOptions } from '@codecademy/gamut-styles';
+import { forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import * as React from 'react';
+import { DropdownList } from './DropdownList';
+import { useDynamicPopoverPosition } from './useDynamicPopoverPosition';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DownArrow = /*#__PURE__*/_styled(ArrowChevronDownFilledIcon, _extends({}, {
+  target: "e1mfstzo1",
+  label: "DownArrow"
+}, styledOptions))("margin-left:", pxRem(8), ";transition:transform 0.35s ease-out;", ({
+  isOpen
+}) => isOpen && 'transform: rotate(-180deg)', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ecm9wZG93bkJ1dHRvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0JFIiwiZmlsZSI6Ii4uLy4uL3NyYy9Ecm9wZG93bkJ1dHRvbi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCdXR0b25Qcm9wcyxcbiAgRmlsbEJ1dHRvbixcbiAgSWNvbkJ1dHRvbixcbiAgUG9wb3ZlcixcbiAgUG9wb3ZlclByb3BzLFxuICBQb3BvdmVyWVBvc2l0aW9uVHlwZSxcbiAgU3Ryb2tlQnV0dG9uLFxuICBUZXh0QnV0dG9uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBBcnJvd0NoZXZyb25Eb3duRmlsbGVkSWNvbixcbiAgTWluaUtlYmFiTWVudUljb24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgcHhSZW0sIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgZm9yd2FyZFJlZixcbiAgUHJvcHNXaXRoQ2hpbGRyZW4sXG4gIHVzZUlkLFxuICB1c2VJbXBlcmF0aXZlSGFuZGxlLFxuICB1c2VSZWYsXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IERyb3Bkb3duTGlzdCwgRHJvcGRvd25MaXN0UHJvcHMgfSBmcm9tICcuL0Ryb3Bkb3duTGlzdCc7XG5pbXBvcnQgeyB1c2VEeW5hbWljUG9wb3ZlclBvc2l0aW9uIH0gZnJvbSAnLi91c2VEeW5hbWljUG9wb3ZlclBvc2l0aW9uJztcblxuY29uc3QgRG93bkFycm93ID0gc3R5bGVkKEFycm93Q2hldnJvbkRvd25GaWxsZWRJY29uLCBzdHlsZWRPcHRpb25zKTx7XG4gIGlzT3Blbj86IGJvb2xlYW47XG59PmBcbiAgbWFyZ2luLWxlZnQ6ICR7cHhSZW0oOCl9O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zNXMgZWFzZS1vdXQ7XG4gICR7KHsgaXNPcGVuIH0pID0+IGlzT3BlbiAmJiAndHJhbnNmb3JtOiByb3RhdGUoLTE4MGRlZyknfTtcbmA7XG5cbmNvbnN0IEhvcml6b250YWxLZWJhYkljb24gPSBzdHlsZWQoTWluaUtlYmFiTWVudUljb24pKFxuICBjc3Moe1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSg5MGRlZyknLFxuICB9KVxuKTtcblxuZXhwb3J0IHR5cGUgRHJvcGRvd25CdXR0b25SZWZUeXBlID0ge1xuICBmb2N1czogSFRNTEJ1dHRvbkVsZW1lbnRbJ2ZvY3VzJ107XG59O1xuXG5leHBvcnQgdHlwZSBEcm9wZG93bkJ1dHRvblByb3BzID0gUHJvcHNXaXRoQ2hpbGRyZW48XG4gIHtcbiAgICBhbGlnbj86IFBvcG92ZXJQcm9wc1snYWxpZ24nXTtcbiAgICBidXR0b25UeXBlPzogJ2ZpbGwnIHwgJ3N0cm9rZScgfCAndGV4dCcgfCAna2ViYWInIHwgJ2hvcml6b250YWxLZWJhYic7XG4gICAgZGVmYXVsdFBvc2l0aW9uPzogUG9wb3ZlcllQb3NpdGlvblR5cGVbJ3Bvc2l0aW9uJ107XG4gICAgZHJvcGRvd25JdGVtczogRHJvcGRvd25MaXN0UHJvcHNbJ2Ryb3Bkb3duSXRlbXMnXTtcbiAgICBob3Jpem9udGFsT2Zmc2V0PzogbnVtYmVyO1xuICAgIC8qKlxuICAgICAqIFNldHMgdGhlIHNpemUgb2YgdGhlIGRvd24gYXJyb3cgaWNvbiBpbiB0aGUgYnV0dG9ucyB0aGF0IGhhdmUgdGV4dCBvciB0aGUga2ViYWIgYW5kIGhvcml6b250YWwga2ViYWIgaWNvbnMuXG4gICAgICovXG4gICAgaWNvblNpemU/OiBudW1iZXI7XG4gICAgLyoqXG4gICAgICogSWYgdGhlIGRyb3Bkb3duIHNob3VsZCBzZW1hbnRpY2FsbHkgYmUgYSBtZW51XG4gICAgICovXG4gICAgaXNNZW51PzogYm9vbGVhbjtcbiAgICBvbkNsaWNrPzogKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB2b2lkO1xuICAgIHRpcFByb3BzPzogUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEljb25CdXR0b24+Wyd0aXBQcm9wcyddO1xuICAgIHZlcnRpY2FsT2Zmc2V0PzogbnVtYmVyO1xuICB9ICYgQnV0dG9uUHJvcHNcbj47XG5cbmV4cG9ydCBjb25zdCBEcm9wZG93bkJ1dHRvbiA9IGZvcndhcmRSZWY8XG4gIERyb3Bkb3duQnV0dG9uUmVmVHlwZSxcbiAgRHJvcGRvd25CdXR0b25Qcm9wc1xuPihcbiAgKFxuICAgIHtcbiAgICAgIGFsaWduID0gJ2xlZnQnLFxuICAgICAgYnV0dG9uVHlwZSA9ICdmaWxsJyxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgZGVmYXVsdFBvc2l0aW9uID0gJ2JlbG93JyxcbiAgICAgIGRyb3Bkb3duSXRlbXMsXG4gICAgICBob3Jpem9udGFsT2Zmc2V0LFxuICAgICAgaWNvblNpemUsXG4gICAgICBpc01lbnUsXG4gICAgICBvbkNsaWNrLFxuICAgICAgdGlwUHJvcHMsXG4gICAgICB2ZXJ0aWNhbE9mZnNldCA9IDAsXG4gICAgICBzaXplLFxuICAgICAgdmFyaWFudCA9ICdwcmltYXJ5JyxcbiAgICAgIC4uLmJ1dHRvblN0eWxlUHJvcHNcbiAgICB9LFxuICAgIHJlZlxuICApID0+IHtcbiAgICBjb25zdCBidXR0b25JZCA9IHVzZUlkKCk7XG4gICAgY29uc3QgdGFyZ2V0UmVmID0gdXNlUmVmPEhUTUxBbmNob3JFbGVtZW50IHwgSFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuICAgIGNvbnN0IHsgcG9zaXRpb24sIHBvcG92ZXJDb250YWluZXJSZWZDYWxsYmFjayB9ID0gdXNlRHluYW1pY1BvcG92ZXJQb3NpdGlvbihcbiAgICAgIHtcbiAgICAgICAgdGFyZ2V0UmVmLFxuICAgICAgICB2ZXJ0aWNhbE9mZnNldCxcbiAgICAgICAgZGVmYXVsdFBvc2l0aW9uLFxuICAgICAgfVxuICAgICk7XG5cbiAgICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+ICh7XG4gICAgICBmb2N1czogKCkgPT4gdGFyZ2V0UmVmLmN1cnJlbnQ/LmZvY3VzKCksXG4gICAgfSkpO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGlmICghaXNPcGVuKSB7XG4gICAgICAgIG9uQ2xpY2s/LihldmVudCk7XG4gICAgICB9XG4gICAgICBzZXRJc09wZW4oIWlzT3Blbik7XG4gICAgfTtcbiAgICBjb25zdCBoYW5kbGVSZXF1ZXN0Q2xvc2VkID0gKCkgPT4ge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9O1xuXG4gICAgY29uc3QgdGV4dEJ1dHRvbkRlZmF1bHRTaXplID0gJ25vcm1hbCc7XG4gICAgY29uc3QgaWNvbkJ1dHRvbkRlZmF1bHRTaXplID0gJ3NtYWxsJztcblxuICAgIGxldCBjbGlja1RhcmdldDogUmVhY3QuUmVhY3ROb2RlO1xuICAgIHN3aXRjaCAoYnV0dG9uVHlwZSkge1xuICAgICAgY2FzZSAnZmlsbCc6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxGaWxsQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1maWxsLWJ1dHRvblwiXG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IHRleHRCdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxEb3duQXJyb3cgaXNPcGVuPXtpc09wZW59IHNpemU9e2ljb25TaXplIHx8IDEyfSAvPlxuICAgICAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzdHJva2UnOlxuICAgICAgICBjbGlja1RhcmdldCA9IChcbiAgICAgICAgICA8U3Ryb2tlQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1zdHJva2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgdGV4dEJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHsuLi4oYnV0dG9uU3R5bGVQcm9wcyA/PyB7fSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPERvd25BcnJvdyBpc09wZW49e2lzT3Blbn0gc2l6ZT17aWNvblNpemUgfHwgMTJ9IC8+XG4gICAgICAgICAgPC9TdHJva2VCdXR0b24+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAndGV4dCc6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxUZXh0QnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1zdHJva2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgdGV4dEJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgICAgIHsuLi4oYnV0dG9uU3R5bGVQcm9wcyA/PyB7fSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPERvd25BcnJvdyBpc09wZW49e2lzT3Blbn0gc2l6ZT17MTJ9IC8+XG4gICAgICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2tlYmFiJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIHJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNPcGVufVxuICAgICAgICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgICAgICAgaWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgaWNvbj17KCkgPT4gPE1pbmlLZWJhYk1lbnVJY29uIHNpemU9e2ljb25TaXplfSAvPn1cbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgaWNvbkJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24ta2ViYWItYnV0dG9uXCJcbiAgICAgICAgICAgIHRpcD1cIlNob3cgb3B0aW9uc1wiXG4gICAgICAgICAgICB0aXBQcm9wcz17dGlwUHJvcHN9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnaG9yaXpvbnRhbEtlYmFiJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJPcHRpb25zXCJcbiAgICAgICAgICAgIHJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNPcGVufVxuICAgICAgICAgICAgYXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuICAgICAgICAgICAgaWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgaWNvbj17KCkgPT4gPEhvcml6b250YWxLZWJhYkljb24gc2l6ZT17aWNvblNpemV9IC8+fVxuICAgICAgICAgICAgc2l6ZT17c2l6ZSB8fCBpY29uQnV0dG9uRGVmYXVsdFNpemV9XG4gICAgICAgICAgICB2YXJpYW50PVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJkcm9wZG93bi1ob3Jpem9udGFsLWtlYmFiLWJ1dHRvblwiXG4gICAgICAgICAgICB0aXBQcm9wcz17dGlwUHJvcHN9XG4gICAgICAgICAgICB0aXA9XCJTaG93IG1vcmUgb3B0aW9uc1wiXG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIHtjbGlja1RhcmdldH1cbiAgICAgICAge2Ryb3Bkb3duSXRlbXMubGVuZ3RoICE9PSAwICYmIChcbiAgICAgICAgICA8UG9wb3ZlclxuICAgICAgICAgICAgcG9wb3ZlckNvbnRhaW5lclJlZj17cG9wb3ZlckNvbnRhaW5lclJlZkNhbGxiYWNrfVxuICAgICAgICAgICAgdGFyZ2V0UmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIG9uUmVxdWVzdENsb3NlPXtoYW5kbGVSZXF1ZXN0Q2xvc2VkfVxuICAgICAgICAgICAgYWxpZ249e2FsaWdufVxuICAgICAgICAgICAgdmVydGljYWxPZmZzZXQ9e3ZlcnRpY2FsT2Zmc2V0fVxuICAgICAgICAgICAgaG9yaXpvbnRhbE9mZnNldD17aG9yaXpvbnRhbE9mZnNldH1cbiAgICAgICAgICAgIHBvc2l0aW9uPXtwb3NpdGlvbn1cbiAgICAgICAgICAgIG91dGxpbmVcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8RHJvcGRvd25MaXN0XG4gICAgICAgICAgICAgIGRyb3Bkb3duSXRlbXM9e2Ryb3Bkb3duSXRlbXN9XG4gICAgICAgICAgICAgIGlzTWVudT17aXNNZW51fVxuICAgICAgICAgICAgICBtZW51QnV0dG9uSWQ9e2J1dHRvbklkfVxuICAgICAgICAgICAgICBvbkNsb3NlPXtoYW5kbGVSZXF1ZXN0Q2xvc2VkfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L1BvcG92ZXI+XG4gICAgICAgICl9XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG4pO1xuIl19 */"));
+const HorizontalKebabIcon = /*#__PURE__*/_styled(MiniKebabMenuIcon, {
+  target: "e1mfstzo0",
+  label: "HorizontalKebabIcon"
+})(css({
+  transform: 'rotate(90deg)'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ecm9wZG93bkJ1dHRvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUM0QiIsImZpbGUiOiIuLi8uLi9zcmMvRHJvcGRvd25CdXR0b24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQnV0dG9uUHJvcHMsXG4gIEZpbGxCdXR0b24sXG4gIEljb25CdXR0b24sXG4gIFBvcG92ZXIsXG4gIFBvcG92ZXJQcm9wcyxcbiAgUG9wb3ZlcllQb3NpdGlvblR5cGUsXG4gIFN0cm9rZUJ1dHRvbixcbiAgVGV4dEJ1dHRvbixcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHtcbiAgQXJyb3dDaGV2cm9uRG93bkZpbGxlZEljb24sXG4gIE1pbmlLZWJhYk1lbnVJY29uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MsIHB4UmVtLCBzdHlsZWRPcHRpb25zIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7XG4gIGZvcndhcmRSZWYsXG4gIFByb3BzV2l0aENoaWxkcmVuLFxuICB1c2VJZCxcbiAgdXNlSW1wZXJhdGl2ZUhhbmRsZSxcbiAgdXNlUmVmLFxuICB1c2VTdGF0ZSxcbn0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBEcm9wZG93bkxpc3QsIERyb3Bkb3duTGlzdFByb3BzIH0gZnJvbSAnLi9Ecm9wZG93bkxpc3QnO1xuaW1wb3J0IHsgdXNlRHluYW1pY1BvcG92ZXJQb3NpdGlvbiB9IGZyb20gJy4vdXNlRHluYW1pY1BvcG92ZXJQb3NpdGlvbic7XG5cbmNvbnN0IERvd25BcnJvdyA9IHN0eWxlZChBcnJvd0NoZXZyb25Eb3duRmlsbGVkSWNvbiwgc3R5bGVkT3B0aW9ucyk8e1xuICBpc09wZW4/OiBib29sZWFuO1xufT5gXG4gIG1hcmdpbi1sZWZ0OiAke3B4UmVtKDgpfTtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMzVzIGVhc2Utb3V0O1xuICAkeyh7IGlzT3BlbiB9KSA9PiBpc09wZW4gJiYgJ3RyYW5zZm9ybTogcm90YXRlKC0xODBkZWcpJ307XG5gO1xuXG5jb25zdCBIb3Jpem9udGFsS2ViYWJJY29uID0gc3R5bGVkKE1pbmlLZWJhYk1lbnVJY29uKShcbiAgY3NzKHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoOTBkZWcpJyxcbiAgfSlcbik7XG5cbmV4cG9ydCB0eXBlIERyb3Bkb3duQnV0dG9uUmVmVHlwZSA9IHtcbiAgZm9jdXM6IEhUTUxCdXR0b25FbGVtZW50Wydmb2N1cyddO1xufTtcblxuZXhwb3J0IHR5cGUgRHJvcGRvd25CdXR0b25Qcm9wcyA9IFByb3BzV2l0aENoaWxkcmVuPFxuICB7XG4gICAgYWxpZ24/OiBQb3BvdmVyUHJvcHNbJ2FsaWduJ107XG4gICAgYnV0dG9uVHlwZT86ICdmaWxsJyB8ICdzdHJva2UnIHwgJ3RleHQnIHwgJ2tlYmFiJyB8ICdob3Jpem9udGFsS2ViYWInO1xuICAgIGRlZmF1bHRQb3NpdGlvbj86IFBvcG92ZXJZUG9zaXRpb25UeXBlWydwb3NpdGlvbiddO1xuICAgIGRyb3Bkb3duSXRlbXM6IERyb3Bkb3duTGlzdFByb3BzWydkcm9wZG93bkl0ZW1zJ107XG4gICAgaG9yaXpvbnRhbE9mZnNldD86IG51bWJlcjtcbiAgICAvKipcbiAgICAgKiBTZXRzIHRoZSBzaXplIG9mIHRoZSBkb3duIGFycm93IGljb24gaW4gdGhlIGJ1dHRvbnMgdGhhdCBoYXZlIHRleHQgb3IgdGhlIGtlYmFiIGFuZCBob3Jpem9udGFsIGtlYmFiIGljb25zLlxuICAgICAqL1xuICAgIGljb25TaXplPzogbnVtYmVyO1xuICAgIC8qKlxuICAgICAqIElmIHRoZSBkcm9wZG93biBzaG91bGQgc2VtYW50aWNhbGx5IGJlIGEgbWVudVxuICAgICAqL1xuICAgIGlzTWVudT86IGJvb2xlYW47XG4gICAgb25DbGljaz86IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4gdm9pZDtcbiAgICB0aXBQcm9wcz86IFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBJY29uQnV0dG9uPlsndGlwUHJvcHMnXTtcbiAgICB2ZXJ0aWNhbE9mZnNldD86IG51bWJlcjtcbiAgfSAmIEJ1dHRvblByb3BzXG4+O1xuXG5leHBvcnQgY29uc3QgRHJvcGRvd25CdXR0b24gPSBmb3J3YXJkUmVmPFxuICBEcm9wZG93bkJ1dHRvblJlZlR5cGUsXG4gIERyb3Bkb3duQnV0dG9uUHJvcHNcbj4oXG4gIChcbiAgICB7XG4gICAgICBhbGlnbiA9ICdsZWZ0JyxcbiAgICAgIGJ1dHRvblR5cGUgPSAnZmlsbCcsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIGRlZmF1bHRQb3NpdGlvbiA9ICdiZWxvdycsXG4gICAgICBkcm9wZG93bkl0ZW1zLFxuICAgICAgaG9yaXpvbnRhbE9mZnNldCxcbiAgICAgIGljb25TaXplLFxuICAgICAgaXNNZW51LFxuICAgICAgb25DbGljayxcbiAgICAgIHRpcFByb3BzLFxuICAgICAgdmVydGljYWxPZmZzZXQgPSAwLFxuICAgICAgc2l6ZSxcbiAgICAgIHZhcmlhbnQgPSAncHJpbWFyeScsXG4gICAgICAuLi5idXR0b25TdHlsZVByb3BzXG4gICAgfSxcbiAgICByZWZcbiAgKSA9PiB7XG4gICAgY29uc3QgYnV0dG9uSWQgPSB1c2VJZCgpO1xuICAgIGNvbnN0IHRhcmdldFJlZiA9IHVzZVJlZjxIVE1MQW5jaG9yRWxlbWVudCB8IEhUTUxCdXR0b25FbGVtZW50PihudWxsKTtcbiAgICBjb25zdCB7IHBvc2l0aW9uLCBwb3BvdmVyQ29udGFpbmVyUmVmQ2FsbGJhY2sgfSA9IHVzZUR5bmFtaWNQb3BvdmVyUG9zaXRpb24oXG4gICAgICB7XG4gICAgICAgIHRhcmdldFJlZixcbiAgICAgICAgdmVydGljYWxPZmZzZXQsXG4gICAgICAgIGRlZmF1bHRQb3NpdGlvbixcbiAgICAgIH1cbiAgICApO1xuXG4gICAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICAgIHVzZUltcGVyYXRpdmVIYW5kbGUocmVmLCAoKSA9PiAoe1xuICAgICAgZm9jdXM6ICgpID0+IHRhcmdldFJlZi5jdXJyZW50Py5mb2N1cygpLFxuICAgIH0pKTtcblxuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB7XG4gICAgICBpZiAoIWlzT3Blbikge1xuICAgICAgICBvbkNsaWNrPy4oZXZlbnQpO1xuICAgICAgfVxuICAgICAgc2V0SXNPcGVuKCFpc09wZW4pO1xuICAgIH07XG4gICAgY29uc3QgaGFuZGxlUmVxdWVzdENsb3NlZCA9ICgpID0+IHtcbiAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgfTtcblxuICAgIGNvbnN0IHRleHRCdXR0b25EZWZhdWx0U2l6ZSA9ICdub3JtYWwnO1xuICAgIGNvbnN0IGljb25CdXR0b25EZWZhdWx0U2l6ZSA9ICdzbWFsbCc7XG5cbiAgICBsZXQgY2xpY2tUYXJnZXQ6IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICBzd2l0Y2ggKGJ1dHRvblR5cGUpIHtcbiAgICAgIGNhc2UgJ2ZpbGwnOlxuICAgICAgICBjbGlja1RhcmdldCA9IChcbiAgICAgICAgICA8RmlsbEJ1dHRvblxuICAgICAgICAgICAgcmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc09wZW59XG4gICAgICAgICAgICBpZD17YnV0dG9uSWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24tZmlsbC1idXR0b25cIlxuICAgICAgICAgICAgc2l6ZT17c2l6ZSB8fCB0ZXh0QnV0dG9uRGVmYXVsdFNpemV9XG4gICAgICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICAgICAgey4uLihidXR0b25TdHlsZVByb3BzID8/IHt9KX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8RG93bkFycm93IGlzT3Blbj17aXNPcGVufSBzaXplPXtpY29uU2l6ZSB8fCAxMn0gLz5cbiAgICAgICAgICA8L0ZpbGxCdXR0b24+XG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnc3Ryb2tlJzpcbiAgICAgICAgY2xpY2tUYXJnZXQgPSAoXG4gICAgICAgICAgPFN0cm9rZUJ1dHRvblxuICAgICAgICAgICAgcmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc09wZW59XG4gICAgICAgICAgICBpZD17YnV0dG9uSWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24tc3Ryb2tlLWJ1dHRvblwiXG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IHRleHRCdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxEb3duQXJyb3cgaXNPcGVuPXtpc09wZW59IHNpemU9e2ljb25TaXplIHx8IDEyfSAvPlxuICAgICAgICAgIDwvU3Ryb2tlQnV0dG9uPlxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ3RleHQnOlxuICAgICAgICBjbGlja1RhcmdldCA9IChcbiAgICAgICAgICA8VGV4dEJ1dHRvblxuICAgICAgICAgICAgcmVmPXt0YXJnZXRSZWZ9XG4gICAgICAgICAgICBpZD17YnV0dG9uSWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24tc3Ryb2tlLWJ1dHRvblwiXG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IHRleHRCdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICB7Li4uKGJ1dHRvblN0eWxlUHJvcHMgPz8ge30pfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxEb3duQXJyb3cgaXNPcGVuPXtpc09wZW59IHNpemU9ezEyfSAvPlxuICAgICAgICAgIDwvVGV4dEJ1dHRvbj5cbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdrZWJhYic6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGFyaWEtaGFzcG9wdXA9XCJtZW51XCJcbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIGljb249eygpID0+IDxNaW5pS2ViYWJNZW51SWNvbiBzaXplPXtpY29uU2l6ZX0gLz59XG4gICAgICAgICAgICBzaXplPXtzaXplIHx8IGljb25CdXR0b25EZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICAgICAgICBkYXRhLXRlc3RpZD1cImRyb3Bkb3duLWtlYmFiLWJ1dHRvblwiXG4gICAgICAgICAgICB0aXA9XCJTaG93IG9wdGlvbnNcIlxuICAgICAgICAgICAgdGlwUHJvcHM9e3RpcFByb3BzfVxuICAgICAgICAgICAgey4uLihidXR0b25TdHlsZVByb3BzID8/IHt9KX1cbiAgICAgICAgICAvPlxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2hvcml6b250YWxLZWJhYic6XG4gICAgICAgIGNsaWNrVGFyZ2V0ID0gKFxuICAgICAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgICAgICBhcmlhLWxhYmVsPVwiT3B0aW9uc1wiXG4gICAgICAgICAgICByZWY9e3RhcmdldFJlZn1cbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzT3Blbn1cbiAgICAgICAgICAgIGFyaWEtaGFzcG9wdXA9XCJtZW51XCJcbiAgICAgICAgICAgIGlkPXtidXR0b25JZH1cbiAgICAgICAgICAgIGljb249eygpID0+IDxIb3Jpem9udGFsS2ViYWJJY29uIHNpemU9e2ljb25TaXplfSAvPn1cbiAgICAgICAgICAgIHNpemU9e3NpemUgfHwgaWNvbkJ1dHRvbkRlZmF1bHRTaXplfVxuICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZHJvcGRvd24taG9yaXpvbnRhbC1rZWJhYi1idXR0b25cIlxuICAgICAgICAgICAgdGlwUHJvcHM9e3RpcFByb3BzfVxuICAgICAgICAgICAgdGlwPVwiU2hvdyBtb3JlIG9wdGlvbnNcIlxuICAgICAgICAgICAgey4uLihidXR0b25TdHlsZVByb3BzID8/IHt9KX1cbiAgICAgICAgICAvPlxuICAgICAgICApO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICB7Y2xpY2tUYXJnZXR9XG4gICAgICAgIHtkcm9wZG93bkl0ZW1zLmxlbmd0aCAhPT0gMCAmJiAoXG4gICAgICAgICAgPFBvcG92ZXJcbiAgICAgICAgICAgIHBvcG92ZXJDb250YWluZXJSZWY9e3BvcG92ZXJDb250YWluZXJSZWZDYWxsYmFja31cbiAgICAgICAgICAgIHRhcmdldFJlZj17dGFyZ2V0UmVmfVxuICAgICAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgICAgICBvblJlcXVlc3RDbG9zZT17aGFuZGxlUmVxdWVzdENsb3NlZH1cbiAgICAgICAgICAgIGFsaWduPXthbGlnbn1cbiAgICAgICAgICAgIHZlcnRpY2FsT2Zmc2V0PXt2ZXJ0aWNhbE9mZnNldH1cbiAgICAgICAgICAgIGhvcml6b250YWxPZmZzZXQ9e2hvcml6b250YWxPZmZzZXR9XG4gICAgICAgICAgICBwb3NpdGlvbj17cG9zaXRpb259XG4gICAgICAgICAgICBvdXRsaW5lXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPERyb3Bkb3duTGlzdFxuICAgICAgICAgICAgICBkcm9wZG93bkl0ZW1zPXtkcm9wZG93bkl0ZW1zfVxuICAgICAgICAgICAgICBpc01lbnU9e2lzTWVudX1cbiAgICAgICAgICAgICAgbWVudUJ1dHRvbklkPXtidXR0b25JZH1cbiAgICAgICAgICAgICAgb25DbG9zZT17aGFuZGxlUmVxdWVzdENsb3NlZH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9Qb3BvdmVyPlxuICAgICAgICApfVxuICAgICAgPC8+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */");
+export const DropdownButton = /*#__PURE__*/forwardRef(({
+  align = 'left',
+  buttonType = 'fill',
+  children,
+  defaultPosition = 'below',
+  dropdownItems,
+  horizontalOffset,
+  iconSize,
+  isMenu,
+  onClick,
+  tipProps,
+  verticalOffset = 0,
+  size,
+  variant = 'primary',
+  ...buttonStyleProps
+}, ref) => {
+  const buttonId = useId();
+  const targetRef = useRef(null);
+  const {
+    position,
+    popoverContainerRefCallback
+  } = useDynamicPopoverPosition({
+    targetRef,
+    verticalOffset,
+    defaultPosition
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  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__*/_jsxs(FillButton, {
+        ref: targetRef,
+        "aria-expanded": isOpen,
+        id: buttonId,
+        onClick: handleClick,
+        "data-testid": "dropdown-fill-button",
+        size: size || textButtonDefaultSize,
+        variant: variant,
+        ...(buttonStyleProps ?? {}),
+        children: [children, /*#__PURE__*/_jsx(DownArrow, {
+          isOpen: isOpen,
+          size: iconSize || 12
+        })]
+      });
+      break;
+    case 'stroke':
+      clickTarget = /*#__PURE__*/_jsxs(StrokeButton, {
+        ref: targetRef,
+        "aria-expanded": isOpen,
+        id: buttonId,
+        onClick: handleClick,
+        "data-testid": "dropdown-stroke-button",
+        size: size || textButtonDefaultSize,
+        variant: variant,
+        ...(buttonStyleProps ?? {}),
+        children: [children, /*#__PURE__*/_jsx(DownArrow, {
+          isOpen: isOpen,
+          size: iconSize || 12
+        })]
+      });
+      break;
+    case 'text':
+      clickTarget = /*#__PURE__*/_jsxs(TextButton, {
+        ref: targetRef,
+        id: buttonId,
+        onClick: handleClick,
+        "data-testid": "dropdown-stroke-button",
+        size: size || textButtonDefaultSize,
+        variant: variant,
+        ...(buttonStyleProps ?? {}),
+        children: [children, /*#__PURE__*/_jsx(DownArrow, {
+          isOpen: isOpen,
+          size: 12
+        })]
+      });
+      break;
+    case 'kebab':
+      clickTarget = /*#__PURE__*/_jsx(IconButton, {
+        ref: targetRef,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        id: buttonId,
+        icon: () => /*#__PURE__*/_jsx(MiniKebabMenuIcon, {
+          size: iconSize
+        }),
+        size: size || iconButtonDefaultSize,
+        variant: "secondary",
+        onClick: handleClick,
+        "data-testid": "dropdown-kebab-button",
+        tip: "Show options",
+        tipProps: tipProps,
+        ...(buttonStyleProps ?? {})
+      });
+      break;
+    case 'horizontalKebab':
+      clickTarget = /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": "Options",
+        ref: targetRef,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        id: buttonId,
+        icon: () => /*#__PURE__*/_jsx(HorizontalKebabIcon, {
+          size: iconSize
+        }),
+        size: size || iconButtonDefaultSize,
+        variant: "secondary",
+        onClick: handleClick,
+        "data-testid": "dropdown-horizontal-kebab-button",
+        tipProps: tipProps,
+        tip: "Show more options",
+        ...(buttonStyleProps ?? {})
+      });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [clickTarget, dropdownItems.length !== 0 && /*#__PURE__*/_jsx(Popover, {
+      popoverContainerRef: popoverContainerRefCallback,
+      targetRef: targetRef,
+      isOpen: isOpen,
+      onRequestClose: handleRequestClosed,
+      align: align,
+      verticalOffset: verticalOffset,
+      horizontalOffset: horizontalOffset,
+      position: position,
+      outline: true,
+      children: /*#__PURE__*/_jsx(DropdownList, {
+        dropdownItems: dropdownItems,
+        isMenu: isMenu,
+        menuButtonId: buttonId,
+        onClose: handleRequestClosed
+      })
+    })]
+  });
+});

package/dist/DropdownButton/useDynamicPopoverPosition.d.ts

@@ -0,0 +1,14 @@
+import { PopoverYPositionType } from '@codecademy/gamut';
+import { RefCallback, RefObject } from 'react';
+type Position = Required<PopoverYPositionType>['position'];
+export type UseDynamicPopoverPositionProps = {
+    targetRef: RefObject<HTMLElement>;
+    verticalOffset: number;
+    defaultPosition: Position;
+};
+export type UseDynamicPopoverPositionReturn = {
+    position: Position;
+    popoverContainerRefCallback: RefCallback<HTMLElement | null>;
+};
+export declare const useDynamicPopoverPosition: ({ targetRef, verticalOffset, defaultPosition, }: UseDynamicPopoverPositionProps) => UseDynamicPopoverPositionReturn;
+export {};

package/dist/DropdownButton/useDynamicPopoverPosition.js

@@ -1,40 +1,55 @@
-import { useCallback, useState } from "react";
-import { useWindowScroll, useWindowSize } from "react-use";
+import { useCallback, useState } from 'react';
+import { useWindowScroll, useWindowSize } from 'react-use';
+
+// space between target and edge of window
 
-//#region src/DropdownButton/useDynamicPopoverPosition.ts
 const getClearance = (targetEl, winHeight) => {
-	const { top, bottom } = targetEl.getBoundingClientRect();
-	return {
-		above: top,
-		below: winHeight - bottom
-	};
+  const {
+    top,
+    bottom
+  } = targetEl.getBoundingClientRect();
+  return {
+    above: top,
+    below: winHeight - bottom
+  };
 };
 const getClearanceNeeded = (popoverContainerEl, verticalOffset) => {
-	const { height } = popoverContainerEl.getBoundingClientRect();
-	return verticalOffset + height;
-};
-const useDynamicPopoverPosition = ({ targetRef, verticalOffset, defaultPosition }) => {
-	const [popoverContainerEl, setPopoverContainerEl] = useState(null);
-	const popoverContainerRefCallback = useCallback((instance) => {
-		setPopoverContainerEl(instance);
-	}, []);
-	const { height: winHeight } = useWindowSize();
-	useWindowScroll();
-	if (targetRef?.current && popoverContainerEl) {
-		const clearance = getClearance(targetRef.current, winHeight);
-		const clearanceNeeded = getClearanceNeeded(popoverContainerEl, verticalOffset);
-		const clearedAbove = clearance.above >= clearanceNeeded;
-		const clearedBelow = clearance.below >= clearanceNeeded;
-		if (!(clearance.above === clearance.below) && (!clearedAbove || !clearedBelow)) return {
-			position: clearance.above > clearance.below ? "above" : "below",
-			popoverContainerRefCallback
-		};
-	}
-	return {
-		position: defaultPosition,
-		popoverContainerRefCallback
-	};
+  const {
+    height
+  } = popoverContainerEl.getBoundingClientRect();
+  return verticalOffset + height;
 };
+export const useDynamicPopoverPosition = ({
+  targetRef,
+  verticalOffset,
+  defaultPosition
+}) => {
+  const [popoverContainerEl, setPopoverContainerEl] = useState(null);
+
+  // called when the popover container is renderd or removed
+  const popoverContainerRefCallback = useCallback(instance => {
+    setPopoverContainerEl(instance);
+  }, []);
+  const {
+    height: winHeight
+  } = useWindowSize(); // re-calc on window resize
+  useWindowScroll(); // re-calc on scroll
 
-//#endregion
-export { useDynamicPopoverPosition };
+  if (targetRef?.current && popoverContainerEl) {
+    const clearance = getClearance(targetRef.current, winHeight);
+    const clearanceNeeded = getClearanceNeeded(popoverContainerEl, verticalOffset);
+    const clearedAbove = clearance.above >= clearanceNeeded;
+    const clearedBelow = clearance.below >= clearanceNeeded;
+    const verticallyCentered = clearance.above === clearance.below;
+    if (!verticallyCentered && (!clearedAbove || !clearedBelow)) {
+      return {
+        position: clearance.above > clearance.below ? 'above' : 'below',
+        popoverContainerRefCallback
+      };
+    }
+  }
+  return {
+    position: defaultPosition,
+    popoverContainerRefCallback
+  };
+};

package/dist/DropdownButton/useDynamicPopoverPosition.test.js

@@ -0,0 +1,85 @@
+import { act, renderHook } from '@testing-library/react';
+import { useDynamicPopoverPosition } from './useDynamicPopoverPosition';
+const WINDOW_HEIGHT = 1000;
+jest.mock('react-use', () => ({
+  useWindowSize: () => ({
+    height: WINDOW_HEIGHT
+  }),
+  useWindowScroll: () => ({
+    y: 0
+  })
+}));
+const testCases = [{
+  scenario: {
+    defaultPosition: 'below',
+    targetBox: {
+      top: 550,
+      bottom: 600,
+      height: 50
+    },
+    popoverContainerHeight: 200
+  },
+  expectation: {
+    position: 'below',
+    because: 'there is plenty of room for the popover beneath the target'
+  }
+}, {
+  scenario: {
+    defaultPosition: 'below',
+    targetBox: {
+      top: 850,
+      bottom: 900,
+      height: 50
+    },
+    popoverContainerHeight: 200
+  },
+  expectation: {
+    position: 'above',
+    because: 'the target is near the bottom of the window'
+  }
+}, {
+  scenario: {
+    defaultPosition: 'below',
+    targetBox: {
+      top: 550,
+      bottom: 600,
+      height: 50
+    },
+    popoverContainerHeight: 500
+  },
+  expectation: {
+    position: 'above',
+    because: 'the popover is too tall to fit beneath the target'
+  }
+}];
+describe('useDynamicPopoverPosition', () => {
+  test.each(testCases)(`for default position: $scenario.defaultPosition, with target: $scenario.targetBox, popover container height: $scenario.popoverContainerHeight, and window height: ${WINDOW_HEIGHT},
+    position should be: "$expectation.position" because $expectation.because`, async ({
+    scenario,
+    expectation
+  }) => {
+    const {
+      defaultPosition,
+      targetBox,
+      popoverContainerHeight
+    } = scenario;
+    const targetRef = {
+      current: {
+        getBoundingClientRect: () => targetBox
+      }
+    };
+    const {
+      result
+    } = renderHook(() => useDynamicPopoverPosition({
+      targetRef,
+      verticalOffset: 0,
+      defaultPosition
+    }));
+    await act(() => result.current.popoverContainerRefCallback({
+      getBoundingClientRect: () => ({
+        height: popoverContainerHeight
+      })
+    }));
+    expect(result.current.position).toEqual(expectation.position);
+  });
+});

package/dist/EmptySection/index.d.ts

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