import { jsxs, jsx } from "react/jsx-runtime";
import { Box } from "../../Box/Box.mjs";
import { useIcon } from "../../../hooks/useIcon/index.mjs";
import { root, rotate, flip, mirror } from "./IconArrow.css.mjs";
const IconArrowSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs(
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    width: 16,
    height: 16,
    viewBox: "0 0 24 24",
    focusable: "false",
    fill: "currentColor",
    "aria-labelledby": titleId,
    ...props,
    children: [
      title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
      /* @__PURE__ */ jsx("path", { d: "m11.293 4.293-7 7a1 1 0 1 0 1.414 1.414L11 7.414V19a1 1 0 1 0 2 0V7.414l5.293 5.293a1 1 0 1 0 1.414-1.414l-7-7a1 1 0 0 0-1.414 0Z" })
    ]
  }
);
const IconArrow = ({ direction = "up", ...props }) => {
  const { className, ...iconProps } = useIcon(props);
  return /* @__PURE__ */ jsx(
    Box,
    {
      component: IconArrowSvg,
      className: [
        root,
        className,
        {
          [rotate]: direction === "right" || direction === "left",
          [flip]: direction === "down",
          [mirror]: direction === "left"
        }
      ],
      ...iconProps
    }
  );
};
export {
  IconArrow
};
