import "../Glossary.css";
import { jsxs, jsx } from "react/jsx-runtime";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
import { L as Label } from "../Typography-Q-0_2LT9.js";
import { isString, ensureArray } from "./internal/functions.js";
const base = "Glossary_base_1e14a";
const row = "Glossary_row_1e14a";
const label = "Glossary_label_1e14a";
const valueList = "Glossary_valueList_1e14a";
const value = "Glossary_value_1e14a";
const componentWrapper = "Glossary_componentWrapper_1e14a";
const css = {
  base,
  row,
  label,
  valueList,
  value,
  componentWrapper,
  "align-left": "Glossary_align-left_1e14a",
  "align-right": "Glossary_align-right_1e14a"
};
const Row = ({ label: label2, value: value2 }) => {
  const valueArray = ensureArray(value2);
  return /* @__PURE__ */ jsxs("div", { className: css.row, children: [
    /* @__PURE__ */ jsx("dt", { className: css.label, children: /* @__PURE__ */ jsx(Label, { size: "default", children: label2 }) }),
    /* @__PURE__ */ jsx("div", { className: css.valueList, children: valueArray.map((item, idx) => /* @__PURE__ */ jsx("dd", { className: css.value, children: isString(item) ? item : /* @__PURE__ */ jsx("div", { className: css.componentWrapper, children: item }) }, idx)) })
  ] });
};
const Glossary = ({ content = [], alignValues = "left" }) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classes = [css.base, themeClass, css[`align-${alignValues}`]];
  return /* @__PURE__ */ jsx("dl", { className: classes.join(" "), children: content.map((row2, idx) => /* @__PURE__ */ jsx(Row, { label: row2.label, value: row2.value }, row2.label + idx)) });
};
export {
  Row,
  Glossary as default
};
