@adyen/adyen-platform-experience-web/dist/es/components/internal/StructuredList/StructuredList.js


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