import { jsx as a } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import L from "classnames";
import { useMemo as h } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { TypographyVariant as _ } from "../Typography/types.js";
import d from "../Typography/Typography.js";
import { SL_GRID_CLASS as e, SL_LABEL_CLASS as I, SL_CONTENT_CLASS as N, SL_ITEM_CLASS as m, SL_ITEM_WITH_HIGHLIGHT_CLASS as y, SL_BASE_CLASS as v, SL_EXPANDED_CLASS as D, SL_ALIGN_END as O } from "./constants.js";
/* empty css                    */
import { useStructuredListItems as b } from "./useStructuredListItem.js";
const $ = "6-6";
function k({
  ["aria-label"]: n,
  items: p,
  highlightable: c,
  renderValue: S,
  renderLabel: t,
  layout: l = $,
  grid: A = !0,
  classNames: i,
  align: u = "end",
  condensed: o = !0
}) {
  const [C, f] = h(() => l.split("-").map((r) => `${e}--width-${r}-of-12`), [l]), T = b(p), s = o ? _.CAPTION : _.BODY;
  return /* @__PURE__ */ a("dl", { className: L(v, i, { [O]: u === "end", [D]: !o }), "aria-label": n, children: T.map((r, E) => /* @__PURE__ */ a(
    "div",
    {
      "data-testid": r.id ?? r.label,
      className: L(m, {
        [y]: c,
        [e]: A
      }),
      children: [
        /* @__PURE__ */ a("dt", { className: L(I, C), children: t ? t(r.label, r.key, r.rawValue) : /* @__PURE__ */ a(d, { variant: s, children: r.label }) }),
        /* @__PURE__ */ a("dd", { className: L(N, f), "data-testid": `${r.id ?? r.label}-value`, children: r.render ? r.render(r) : S ? S(r.value, r.key, r.type, r.config) : /* @__PURE__ */ a(d, { variant: s, children: r.value }) })
      ]
    },
    `${E}_${r.uid || "0"}`
  )) });
}
export {
  k as default
};
