"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _chunkDJDVATDRcjs = require('./chunk-DJDVATDR.cjs');



var _chunkKS6GHRZIcjs = require('./chunk-KS6GHRZI.cjs');


var _chunkRSHN4K6Ncjs = require('./chunk-RSHN4K6N.cjs');


var _chunkJA7KZV3Qcjs = require('./chunk-JA7KZV3Q.cjs');


var _chunkOBHJBBPCcjs = require('./chunk-OBHJBBPC.cjs');

// src/components/Icon/Icon.tsx
var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
var _jsxruntime = require('@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 = _chunkDJDVATDRcjs.iconMap[name];
  const w = parseFloat((width / _chunkRSHN4K6Ncjs.rootFontSizePx).toFixed(2));
  const h = square ? w : "auto";
  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkRSHN4K6Ncjs.rootFontSizePx).toFixed(2))}em` : mrProp;
  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkRSHN4K6Ncjs.rootFontSizePx).toFixed(2))}em` : mlProp;
  const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / _chunkRSHN4K6Ncjs.rootFontSizePx).toFixed(2))}em` : mtProp;
  const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / _chunkRSHN4K6Ncjs.rootFontSizePx).toFixed(2))}em` : mbProp;
  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkRSHN4K6Ncjs.rootFontSizePx).toFixed(2));
  const icon = _react2.default.createElement(IconComponent, iconProps, null);
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
    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 = _styled2.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 }) => _chunkJA7KZV3Qcjs.isString.call(void 0, verticalAlign) ? verticalAlign : `${verticalAlign}em`};

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

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

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




exports.Icon = Icon; exports.IconContainer = IconContainer;
