@hitachivantara/uikit-react-core/dist/esm/IconContainer/IconContainer.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { createClasses, useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
import { getColor } from "@hitachivantara/uikit-styles";
const { staticClasses, useClasses } = createClasses("HvIconContainer", {
  root: {
    display: "inline-flex",
    flex: "0 0 auto",
    // ensure icon doesn't flex grow/shrink
    fontSize: `var(--isize, 16px)`,
    // default size of 16px
    transition: "rotate 0.2s ease",
    justifyContent: "center",
    alignItems: "center",
    padding: 8
    // default padding
    // we're assuming svg children inherits from text color and size
  },
  xs: {
    fontSize: 12,
    padding: 10
  },
  sm: {
    fontSize: 16
  },
  md: {
    fontSize: 32
  },
  lg: {
    fontSize: 96
  },
  xl: {
    fontSize: 112
  }
});
const HvIconContainer = forwardRef(function HvIconContainer2(props, ref) {
  const {
    className,
    classes: classesProp,
    style,
    color,
    size = "S",
    rotate,
    children,
    ...others
  } = useDefaultProps("HvIconContainer", props);
  const { cx, classes } = useClasses(classesProp);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cx(classes.root, className, {
        [classes[mapSizes(size)]]: size
      }),
      style: mergeStyles(style, {
        "--isize": typeof size === "number" ? `${size}px` : void 0,
        color: getColor(color),
        rotate: rotate ? "180deg" : void 0,
        ...style
      }),
      ...others,
      children
    }
  );
});
function mapSizes(size) {
  if (typeof size === "number") return void 0;
  const iconSizeMap = {
    XS: "xs",
    S: "sm",
    M: "md",
    L: "lg"
  };
  return iconSizeMap[size] || size;
}
export {
  HvIconContainer,
  staticClasses as iconContainerClasses,
  staticClasses,
  useClasses
};