import { jsxs, jsx } from "react/jsx-runtime";
import { Box } from "../../Box/Box.mjs";
import { useIcon } from "../../../hooks/useIcon/index.mjs";
import { root, up, left, right } from "./IconChevron.css.mjs";
const IconChevronSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs(
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    xmlSpace: "preserve",
    focusable: "false",
    fill: "currentColor",
    width: 16,
    height: 16,
    "aria-labelledby": titleId,
    ...props,
    children: [
      title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
      /* @__PURE__ */ jsx("path", { d: "M20.7 7.3c-.4-.4-1-.4-1.4 0L12 14.6 4.7 7.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l8 8c.2.2.5.3.7.3s.5-.1.7-.3l8-8c.4-.4.4-1 0-1.4z" })
    ]
  }
);
const IconChevron = ({
  direction = "down",
  ...props
}) => {
  const { className, ...iconProps } = useIcon(props);
  return /* @__PURE__ */ jsx(
    Box,
    {
      component: IconChevronSvg,
      className: [
        root,
        className,
        {
          [up]: direction === "up",
          [left]: direction === "left",
          [right]: direction === "right"
        }
      ],
      ...iconProps
    }
  );
};
export {
  IconChevron
};
