import { a as IconSize } from "./constants2.js";
import { t as usePseudoClasses } from "./usePseudoClasses.js";
import { t as Icon_default } from "./Icon.js";
import { t as X_default } from "./X.js";
import classNames from "classnames";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./components/ListEditMode/styles.module.scss";
const IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
	const { refObject, isHovered } = usePseudoClasses();
	return /* @__PURE__ */ jsx("button", {
		ref: refObject,
		onClick,
		type: "button",
		className: classNames(styles["list-edit-mode__icon-button"]),
		"aria-label": ariaLabel,
		"aria-describedby": ariaDescribedby,
		children: /* @__PURE__ */ jsx(Icon_default, {
			isHovered,
			svgIcon: icon,
			size: IconSize.Small,
			color: color === "blue" ? "var(--color-action-graphics-onlight)" : "var(--color-destructive-graphics-normal"
		})
	});
};
const ListEditModeItem = (props) => {
	const { children, variant = "line", color = "neutral", onDelete, deleteButtonAriaLabel, contentId } = props;
	return /* @__PURE__ */ jsxs("li", {
		className: classNames(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
			[styles["list-edit-mode__item--line"]]: variant === "line",
			[styles["list-edit-mode__item--fill"]]: variant === "fill" || variant === "fill-negative"
		}),
		children: [children, onDelete && /* @__PURE__ */ jsx(IconButton, {
			icon: X_default,
			onClick: onDelete,
			color: "red",
			ariaLabel: deleteButtonAriaLabel,
			ariaDescribedby: contentId
		})]
	});
};
ListEditModeItem.displayName = "ListEditModeItem";
var ListEditMode_default = ListEditModeItem;
const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
var ListEditMode_default$1 = ListEditMode_default;
export { ListEditModeItem as i, listEditModeWrapperClassnames as n, IconButton as r, ListEditMode_default$1 as t };

//# sourceMappingURL=ListEditMode.js.map