var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
import { jsx } from "react/jsx-runtime";
import React from "react";
import {
  oneOf,
  elementType,
  string,
  checkPropTypes,
  oneOfType,
  number
} from "prop-types";
import { withTheme } from "styled-components";
import get from "lodash.get";
import Box from "../Box";
const Icon = (_a) => {
  var _b = _a, {
    as: Component,
    size = 12,
    width = size,
    height = size,
    fill,
    stroke,
    theme,
    title,
    description,
    ariaLabel
  } = _b, props = __objRest(_b, [
    "as",
    "size",
    "width",
    "height",
    "fill",
    "stroke",
    "theme",
    "title",
    "description",
    "ariaLabel"
  ]);
  const componentWithTitle = (propsTitle) => {
    const titleId = `${ariaLabel}-titleId`;
    let ariaDescribedBy = titleId;
    const titleElement = /* @__PURE__ */ jsx("title", { id: titleId, children: title }, titleId);
    let svgChildren = [titleElement];
    if (description) {
      const descId = `${ariaLabel}-descId`;
      const descElement = /* @__PURE__ */ jsx("desc", { id: descId, children: description }, descId);
      ariaDescribedBy += ` ${descId}`;
      svgChildren = [...svgChildren, descElement];
    }
    const defaultProps = __spreadProps(__spreadValues({}, Component.defaultProps), {
      role: "img",
      "aria-describedby": ariaDescribedBy
    });
    const newSvg = React.createElement(
      "svg",
      __spreadValues(__spreadValues({}, propsTitle), defaultProps),
      svgChildren,
      Component().props.children
    );
    return newSvg;
  };
  return /* @__PURE__ */ jsx(
    Box,
    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
      as: title && ariaLabel ? componentWithTitle : Component,
      width: get(theme.yoga.spacing, width, width),
      height: get(theme.yoga.spacing, height, height)
    }, fill && { fill: get(theme.yoga.colors, fill, fill) }), stroke && { stroke: get(theme.yoga.colors, stroke, stroke) }), props), {
      "aria-hidden": title ? void 0 : true
    })
  );
};
const commonSizes = [
  "xxxsmall",
  "xxsmall",
  "xsmall",
  "small",
  "medium",
  "large",
  "xlarge",
  "xxlarge",
  "xxxlarge",
  "huge",
  "xhuge"
];
Icon.propTypes = {
  /** SVG to be rendered. */
  as: elementType.isRequired,
  /** Fill color. Use it as one of theme.colors
   * tokens (vibin, neutral, stamina...) */
  fill: string,
  /** Stroke color. Use it as one of theme.colors
   * tokens (vibin, neutral, stamina...) */
  stroke: string,
  /** Text that will be displayed in the title element, used for accessibility */
  title: string,
  /** Text used as element description, used for accessibility.
   * A title must be given in order to use description corretly.
   */
  description: string,
  /** Text used as identifier for aria-describedby, title and description */
  ariaLabel: (props, propName, componentName) => {
    const { title, ariaLabel } = props;
    if (title && !ariaLabel) {
      return new Error(
        `accessible elements, such as title, must receive the ${propName} property as an identifier.`
      );
    }
    checkPropTypes(
      {
        [propName]: string
      },
      { ariaLabel },
      "prop",
      componentName
    );
    return null;
  },
  /** Horizontal size of the SVG. Use it as one of
   * theme.spacing tokens (xxsmall, small, medium...) */
  width: oneOfType([oneOf(commonSizes), string, number]),
  /** Vertical size of the SVG. Use it as one of
   * theme.spacing tokens (xxsmall, small, medium...) */
  height: oneOfType([oneOf(commonSizes), string, number]),
  /** Size for vertical and horizontal of the SVG.
   * Use it as one of theme.spacing tokens (xxsmall, small, medium...) */
  size: oneOfType([oneOf(commonSizes), string, number])
};
var Icon_default = withTheme(Icon);
export {
  Icon_default as default
};
