import {
  iconMap
} from "./chunk-QVFTNYER.js";
import {
  invertFillColor,
  invertStrokeColor
} from "./chunk-VI6WTKMV.js";
import {
  rootFontSizePx
} from "./chunk-HGZGGJQB.js";
import {
  isString
} from "./chunk-HAC5YAGQ.js";
import {
  getFontColor
} from "./chunk-VAH342U2.js";

// src/components/Icon/Icon.tsx
import styled from "@emotion/styled";
import React from "react";
import { jsx } from "@emotion/react/jsx-runtime";
function Icon({
  className,
  name,
  width,
  square = false,
  tutorialStep,
  id,
  mr: mrProp = 0,
  ml: mlProp = 0,
  mt: mtProp = 0,
  mb: mbProp = 0,
  color = void 0,
  verticalAlign = "middle",
  iconProps
}) {
  const IconComponent = iconMap[name];
  const w = parseFloat((width / rootFontSizePx).toFixed(2));
  const h = square ? w : "auto";
  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / rootFontSizePx).toFixed(2))}em` : mrProp;
  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / rootFontSizePx).toFixed(2))}em` : mlProp;
  const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / rootFontSizePx).toFixed(2))}em` : mtProp;
  const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / rootFontSizePx).toFixed(2))}em` : mbProp;
  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
  const icon = React.createElement(IconComponent, iconProps, null);
  return /* @__PURE__ */ jsx(
    IconContainer,
    {
      id,
      className,
      w,
      h,
      square,
      mr,
      ml,
      mt,
      mb,
      verticalAlign: va,
      fontColor: color,
      "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
      children: icon
    }
  );
}
var IconContainer = styled.span`
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  ${({ mr, ml, mt, mb, w, h }) => `
    width: ${w}em;
    height: ${typeof h === "number" ? `${h}em` : h};
    /* ensure no shrink in flex containers: */
    min-width: ${w}em;
    ${mr ? `margin-right: ${mr};` : ""}
    ${ml ? `margin-left: ${ml};` : ""}
    ${mt ? `margin-top: ${mt};` : ""}
    ${mb ? `margin-bottom: ${mb};` : ""}
  `}

  vertical-align: ${({ verticalAlign }) => isString(verticalAlign) ? verticalAlign : `${verticalAlign}em`};

  ${({ square }) => {
  return square ? `
      svg {
        width: 100%;
        height: 100%;
      }
    ` : "";
}}

  ${({ theme, fontColor }) => {
  const color = getFontColor(theme, fontColor, "inherit");
  return `
    svg, path {
      color: ${getFontColor(theme, fontColor, "inherit")};

      /* 
        Provide a way for an SVG to invert relative to a specified color for
        dark mode support. Ideally we would just use filters, which works in
        Chrome even if the color is not specified, but doesn't work at all for
        SVG paths in Safari:
        filter: invert(100%); -webkit-filter: invert(100%);

        Instead we'll need a class for fills and a class for strokes. Icons
        that need inverted colors should use these classes on their paths.
      */

      .${invertFillColor} {
        fill: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
      }
      .${invertStrokeColor} {
        stroke: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
      }
    }
  `;
}}
`;

export {
  Icon,
  IconContainer
};
