import {
  setDefaultReactNodesTypography
} from "./chunk-EZI6E6UO.js";
import {
  toReactNodes
} from "./chunk-OYIPFTQC.js";
import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/TextIconAligner.tsx
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function TextIconAligner({
  content: contentProp,
  typography: typographyProp,
  rightIcon,
  leftIcon,
  onClick
}) {
  const defaultTypography = {
    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
    size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
    color: (typographyProp == null ? void 0 : typographyProp.color) || "text"
  };
  const nodesWithTypography = setDefaultReactNodesTypography(contentProp, {
    default: defaultTypography,
    link: __spreadProps(__spreadValues({}, defaultTypography), { color: "link" })
  });
  const content = toReactNodes(nodesWithTypography);
  const leftIconNode = leftIcon ? /* @__PURE__ */ jsx(
    Icon,
    {
      name: leftIcon.name,
      width: leftIcon.width ? leftIcon.width : 12,
      mr: leftIcon.mr || 6,
      color: leftIcon.color
    }
  ) : null;
  const rightIconNode = rightIcon ? /* @__PURE__ */ jsx(
    Icon,
    {
      name: rightIcon.name,
      width: rightIcon.width ? rightIcon.width : 12,
      ml: rightIcon.ml || 6,
      color: rightIcon.color
    }
  ) : null;
  return /* @__PURE__ */ jsxs(
    "span",
    {
      css: {
        cursor: onClick ? "pointer" : "inherit",
        display: "inline-flex",
        alignItems: "center"
      },
      onClick,
      children: [
        leftIconNode,
        content,
        rightIconNode
      ]
    }
  );
}

export {
  TextIconAligner
};
