"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../../chunk-BN4qSVkS.cjs");
const require_styles_themes = require("../../styles/themes.cjs");
const require_utils_strings = require("../../utils/strings.cjs");
require("../../styles/common.cjs");
const require_icons_constants = require("../../icons/constants.cjs");
const require_components_Icon_types = require("./types.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
react = require_chunk.__toESM(react);
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/Icon/Icon.tsx
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 = require_components_Icon_types.iconMap[name];
	/** Assume width is px relative to the root font size but specify
	* in ems to preserve scale for larger font sizes */
	const w = parseFloat((width / 12).toFixed(2));
	const h = square ? w : "auto";
	const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / 12).toFixed(2))}em` : mrProp;
	const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / 12).toFixed(2))}em` : mlProp;
	const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / 12).toFixed(2))}em` : mtProp;
	const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / 12).toFixed(2))}em` : mbProp;
	const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / 12).toFixed(2));
	const icon = react.default.createElement(IconComponent, iconProps, null);
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconContainer, {
		id,
		className,
		w,
		h,
		square,
		mr,
		ml,
		mt,
		mb,
		verticalAlign: va,
		fontColor: color,
		"data-tutorial-tip": tutorialStep?.toString(),
		children: icon
	});
}
const IconContainer = _emotion_styled.default.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 }) => require_utils_strings.isString(verticalAlign) ? verticalAlign : `${verticalAlign}em`};

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

  ${({ theme, fontColor }) => {
	const color = require_styles_themes.getFontColor(theme, fontColor, "inherit");
	return `
    svg, path {
      color: ${require_styles_themes.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.
      */

      .${require_icons_constants.invertFillColor} {
        fill: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
      }
      .${require_icons_constants.invertStrokeColor} {
        stroke: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
      }
    }
  `;
}}
`;
//#endregion
exports.Icon = Icon;
exports.IconContainer = IconContainer;
