import {
  isString
} from "./chunk-LAMQKQU3.js";
import {
  rootFontSizePx
} from "./chunk-JK4BP73A.js";
import {
  __async
} from "./chunk-CIGAQ47A.js";

// src/components/Icon.tsx
import styled from "@emotion/styled";
import { useLayoutEffect, useState } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var iconMap = {};
function loadIcon(iconName) {
  return __async(this, null, function* () {
    let IconComp;
    try {
      ({ default: IconComp } = yield import(
        /* webpackMode: "eager" */
        // this can't be a variable only, needs to have some string constraints:
        `./icons/${iconName}.js`
      ));
    } catch (e) {
      throw new Error(`Icon ${iconName} not found`);
    }
    iconMap[iconName] = IconComp;
  });
}
function Icon({
  className,
  name,
  width,
  tutorialStep,
  mr = 0,
  ml = 0,
  verticalAlign = "middle",
  color = void 0
}) {
  const [, setLoading] = useState(false);
  const IconComponent = iconMap[name] || null;
  useLayoutEffect(() => {
    void (() => __async(this, null, function* () {
      if (!iconMap[name]) {
        setLoading(true);
        yield loadIcon(name);
        setLoading(false);
      }
    }))();
  }, [name]);
  const w = parseFloat((width / rootFontSizePx).toFixed(2));
  const mrRems = parseFloat((mr / rootFontSizePx).toFixed(2));
  const mlRems = parseFloat((ml / rootFontSizePx).toFixed(2));
  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
  return /* @__PURE__ */ jsx(
    IconContainer,
    {
      className,
      w,
      mr: mrRems,
      ml: mlRems,
      verticalAlign: va,
      fontColor: color,
      "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
      children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {}) : null
    }
  );
}
var IconContainer = styled.span`
  pointer-events: none;
  display: inline-flex;
  ${({ mr, ml, w }) => `
    width: ${w}em;
    /* ensure no shrink in flex containers: */
    min-width: ${w}em;
    ${mr ? `margin-right: ${mr}em;` : ""}
    ${ml ? `margin-left: ${ml}em;` : ""}
  `}

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

  ${({ fontColor }) => `
    & svg {
      color: ${fontColor || "inherit"};
    }
  `}
`;

export {
  Icon,
  IconContainer
};
