import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { forwardRef } from "react";
import cx from "classnames";
import { useId } from "@gooddata/sdk-ui-kit";
// done like this instead of a template string so that the code is greppable for the individual classes
const screenClasses = {
    xs: "layout-xs",
    sm: "layout-sm",
    md: "layout-md",
    lg: "layout-lg",
    xl: "layout-xl",
};
export const DashboardItem = forwardRef(({ className, screen, description, exportData, titleId, as: Element = "figure", ...props }, ref) => {
    const id = useId();
    const itemFigureId = `dashboard-item-${id}`;
    return (_jsxs(Element, { ...props, ...exportData, className: cx(className, "highcharts-description", "s-dash-item", "dash-item", screenClasses[screen]), ref: ref, "aria-describedby": description && exportData ? itemFigureId : undefined, "aria-labelledby": titleId || undefined, children: [description ? (_jsx("span", { className: "sr-only", id: itemFigureId, children: description })) : null, props.children] }));
});
DashboardItem.displayName = "DashboardItem";
