import { jsx as _jsx } from "react/jsx-runtime";
import { Dropdown as DropdownTheme } from '@redocly/theme/components/Dropdown/Dropdown';
import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
import { Button } from '@redocly/theme/components/Button/Button';
import { typedMemo } from '@redocly/theme/core/openapi';
import { styled } from '../../../styled-components.js';
function DropdownComponent({ options, value, onChange, className, triggerVariant = 'outlined', triggerSize = 'small', }) {
    const activeLabel = options.find((opt) => opt.value === value)?.label;
    if (options.length === 1)
        return _jsx(Title, { children: activeLabel });
    return (_jsx(DropdownTheme, { className: className, trigger: _jsx(Button, { variant: triggerVariant, size: triggerSize, type: "button", children: activeLabel }), withArrow: true, children: _jsx(DropdownMenu, { children: options.map((opt) => (_jsx(StyledDropdownMenuItem, { active: opt.value === value, onAction: () => onChange(opt), suffix: opt.value === value && _jsx(StyledCheckmarkIcon, {}), children: opt.label }, opt.label))) }) }));
}
export const Dropdown = typedMemo(DropdownComponent);
const StyledCheckmarkIcon = styled(CheckmarkIcon) `
  width: 16px;
  height: 16px;
  margin-left: auto;
`;
const StyledDropdownMenuItem = styled(DropdownMenuItem) `
  --dropdown-menu-item-justify-content: space-between;

  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xxs) var(--spacing-sm);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
`;
const Title = styled.span `
  margin-right: var(--spacing-unit);
  cursor: default;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-color-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
`;
//# sourceMappingURL=Dropdown.js.map