"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var BoxedIcon_exports = {};
__export(BoxedIcon_exports, {
  DEFAULT_BADGE_SIZE: () => DEFAULT_BADGE_SIZE,
  DEFAULT_BOX_SIZE: () => DEFAULT_BOX_SIZE,
  DEFAULT_ICON_SIZE: () => DEFAULT_ICON_SIZE,
  IconBox: () => IconBox,
  default: () => BoxedIcon_default
});
module.exports = __toCommonJS(BoxedIcon_exports);
var import_react = __toESM(require("react"));
var import_styled_components = __toESM(require("styled-components"));
var import_Flex = __toESM(require("../../layout/Flex"));
const DEFAULT_BOX_SIZE = 40;
const DEFAULT_ICON_SIZE = 16;
const DEFAULT_BADGE_SIZE = 20;
function getClipRectangleSize(badgeSize) {
  return 3 / 4 * badgeSize;
}
const getTopRightSquareClippedPolygon = (boxSize, rectangleSize) => {
  const diff = boxSize - rectangleSize;
  return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;
};
const Container = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
  heigth: p.size,
  width: p.size,
  alignItems: "center",
  justifyContent: "center",
  position: "relative"
}))``;
const IconBoxBackground = (0, import_styled_components.default)(import_Flex.default)`
  position: absolute;
  height: ${(p) => p.size}px;
  width: ${(p) => p.size}px;
  ${(p) => {
  return p.hasBadge && `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`;
}};
  border-radius: ${(p) => p.theme.radii[2]}px;
`;
const BadgeContainer = import_styled_components.default.div`
  position: absolute;
  ${(p) => `
    top: -${p.badgeSize / 2 - 2}px;
    right: -${p.badgeSize / 2 - 2}px;`}
`;
const IconBox = ({
  Badge,
  size = DEFAULT_BOX_SIZE,
  children,
  borderColor = "neutral.c40",
  badgeColor,
  badgeSize = DEFAULT_BADGE_SIZE
}) => {
  const hasBadge = !!Badge;
  return /* @__PURE__ */ import_react.default.createElement(Container, { size }, /* @__PURE__ */ import_react.default.createElement(
    IconBoxBackground,
    {
      size,
      badgeSize,
      hasBadge,
      border: "1px solid",
      borderColor
    }
  ), children, hasBadge && /* @__PURE__ */ import_react.default.createElement(BadgeContainer, { badgeSize }, /* @__PURE__ */ import_react.default.createElement(Badge, { size: badgeSize, color: badgeColor })));
};
const BoxedIcon = ({
  Icon,
  iconSize = DEFAULT_ICON_SIZE,
  iconColor,
  ...iconBoxProps
}) => {
  return /* @__PURE__ */ import_react.default.createElement(IconBox, { ...iconBoxProps }, /* @__PURE__ */ import_react.default.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor }));
};
var BoxedIcon_default = BoxedIcon;
//# sourceMappingURL=BoxedIcon.js.map
