@vodafone_de/brix-components 17.1.2 → 18.0.0

package/dist/foundations/BrixComponentProps/validate.d.ts

@@ -106,6 +106,7 @@ export declare const minimalPropsSchema: z.ZodObject<{
         ToggleButtonProvider: "ToggleButtonProvider";
         Tray: "Tray";
         UtilityLink: "UtilityLink";
+        Video: "Video";
         YouTubeVideo: "YouTubeVideo";
     }>;
     uid: z.ZodString;
@@ -215,6 +216,7 @@ export declare const cmsBrixComponentPropsSchema: z.ZodObject<{
         ToggleButtonProvider: "ToggleButtonProvider";
         Tray: "Tray";
         UtilityLink: "UtilityLink";
+        Video: "Video";
         YouTubeVideo: "YouTubeVideo";
     }>;
     uid: z.ZodString;
@@ -385,6 +387,7 @@ export declare const cmsPatternPropsSchema: z.ZodObject<{
         ToggleButtonProvider: "ToggleButtonProvider";
         Tray: "Tray";
         UtilityLink: "UtilityLink";
+        Video: "Video";
         YouTubeVideo: "YouTubeVideo";
     }>;
     uid: z.ZodString;

package/dist/foundations/GlobalStyle/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { createGlobalStyle } from "styled-components";
-import { c as cssVars } from "../../cssVars-DIZd9rHN.js";
+import { c as cssVars } from "../../cssVars-DKs5LlTN.js";
 const cssReset = `
   /**
    * @TODO Das gehört nicht in global style

package/dist/foundations/colorMaps.d.ts

@@ -0,0 +1,18 @@
+import { Color } from './token/base/baseColors';
+import { BackgroundColor } from './types/BackgroundColor';
+import { BorderColor } from './types/BorderColor';
+import { IconColor } from './types/IconColor';
+import { ObjectColor } from './types/ObjectColor';
+import { TextColor } from './types/TextColor';
+import { Theme } from './types/Theme';
+/**
+ * Raw color token maps used to generate the CSS custom properties in cssVars.tsx.
+ * Kept in their own file so cssVars.tsx itself stays focused on the CSS variable
+ * string generation (which needs to stay a single file, see cssVars.test.ts).
+ */
+export declare const baseColors: Record<Color, string>;
+export declare const backgroundColors: Record<BackgroundColor, Record<Theme, Color>>;
+export declare const borderColors: Record<BorderColor, Record<Theme, Color>>;
+export declare const iconColors: Record<IconColor, Record<Theme, Color>>;
+export declare const objectColors: Record<ObjectColor, Record<Theme, Color>>;
+export declare const textColors: Record<TextColor, Record<Theme, Color>>;

package/dist/foundations/cssVars.d.ts

@@ -1,9 +1,3 @@
-import { Color } from './token/base/baseColors';
-import { BackgroundColor } from './types/BackgroundColor';
-import { ObjectColor } from './types/ObjectColor';
-import { Theme } from './types/Theme';
-export declare const baseColors: Record<Color, string>;
-export declare const backgroundColors: Record<BackgroundColor, Record<Theme, Color>>;
-export declare const objectColors: Record<ObjectColor, Record<Theme, Color>>;
+export { backgroundColors, baseColors, objectColors } from './colorMaps';
 export declare const cssVarsString: string;
 export declare const cssVars: import('styled-components').RuleSet<object>;

package/dist/foundations/cssVars.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/foundations/layout/index.js

@@ -1,17 +1,20 @@
 import { m as mediumMediaQuery, l as largeMediaQuery } from "../../index-CG4uiVbZ.js";
 import { g as getSpacing } from "../../index-l-i-mIeP.js";
-const translateLayoutPropsToCss = (layoutProps) => {
-  const spacingKeys = ["top", "bottom", "left", "right", "marginTop", "marginLeft", "marginRight"];
-  const responsiveKeys = ["flexDirection", "justifyContent", "alignItems", "alignSelf", "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight"];
-  const translatedProps = Object.fromEntries(Object.entries(layoutProps).filter(([key]) => !responsiveKeys.includes(key)));
+const spacingKeys = ["top", "bottom", "left", "right", "marginTop", "marginLeft", "marginRight"];
+const responsiveKeys = ["flexDirection", "justifyContent", "alignItems", "alignSelf", "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight"];
+const applySpacingProps = (translatedProps, layoutProps) => {
   spacingKeys.forEach((key) => {
     if (layoutProps[key] !== void 0) {
       translatedProps[key] = getSpacing(layoutProps[key]);
     }
   });
+};
+const applyStickyOrFixedTopOffset = (translatedProps, layoutProps) => {
   if (layoutProps.top && (layoutProps.position === "sticky" || layoutProps.position === "fixed")) {
     translatedProps.top = `calc(var(--header-height) + ${translatedProps.top})`;
   }
+};
+const applyResponsiveProps = (translatedProps, layoutProps) => {
   let mdStyles = {};
   let lgStyles = {};
   responsiveKeys.forEach((key) => {
@@ -40,10 +43,24 @@ const translateLayoutPropsToCss = (layoutProps) => {
       };
     }
   });
-  if (Object.keys(mdStyles).length !== 0) translatedProps[`@media ${mediumMediaQuery}`] = {
+  return {
+    mdStyles,
+    lgStyles
+  };
+};
+const translateLayoutPropsToCss = (layoutProps) => {
+  const translatedProps = Object.fromEntries(Object.entries(layoutProps).filter(([key]) => !responsiveKeys.includes(key)));
+  const mutableProps = translatedProps;
+  applySpacingProps(mutableProps, layoutProps);
+  applyStickyOrFixedTopOffset(mutableProps, layoutProps);
+  const {
+    mdStyles,
+    lgStyles
+  } = applyResponsiveProps(mutableProps, layoutProps);
+  if (Object.keys(mdStyles).length !== 0) mutableProps[`@media ${mediumMediaQuery}`] = {
     ...mdStyles
   };
-  if (Object.keys(lgStyles).length !== 0) translatedProps[`@media ${largeMediaQuery}`] = {
+  if (Object.keys(lgStyles).length !== 0) mutableProps[`@media ${largeMediaQuery}`] = {
     ...lgStyles
   };
   return translatedProps;

package/dist/foundations/typographyAndIconSizeCssVars.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Typography (body/heading font-size and line-height) and icon-size CSS custom properties.
+ * Split out of cssVars.tsx because this part of the CSS var string is purely breakpoint-driven
+ * (no color token lookups), unlike the rest of cssVarsString which the cssVars.test.ts regression
+ * test parses for color-map wiring.
+ */
+export declare const typographyAndIconSizeCssVars = "\n    :root {\n        --bodyMdFontSize: var(--fontSize16);\n        --bodyMdLineHeight: var(--lineHeight125);\n\n        @media screen and (min-width: 768px) {\n            --bodyMdFontSize: var(--fontSize18);\n            --bodyMdLineHeight: var(--lineHeight144);\n        }\n\n        --bodySmFontSize: var(--fontSize14);\n        --bodySmLineHeight: var(--lineHeight128);\n\n        --headingXlFontSize: var(--fontSize32);\n        --headingXlLineHeight: var(--lineHeight125);\n\n        @media screen and (min-width: 768px) {\n            --headingXlFontSize: var(--fontSize56);\n            --headingXlLineHeight: var(--lineHeight114);\n        }\n        @media screen and (min-width: 1025px) {\n            --headingXlFontSize: var(--fontSize64);\n            --headingXlLineHeight: var(--lineHeight112);\n        }\n\n        --headingLgFontSize: var(--fontSize28);\n        --headingLgLineHeight: var(--lineHeight128);\n\n        @media screen and (min-width: 768px) {\n            --headingLgFontSize: var(--fontSize40);\n            --headingLgLineHeight: var(--lineHeight120);\n        }\n        @media screen and (min-width: 1025px) {\n            --headingLgFontSize: var(--fontSize56);\n            --headingLgLineHeight: var(--lineHeight114);\n        }\n\n        --headingMdFontSize: var(--fontSize24);\n        --headingMdLineHeight: var(--lineHeight133);\n\n        @media screen and (min-width: 768px) {\n            --headingMdFontSize: var(--fontSize32);\n            --headingMdLineHeight: var(--lineHeight125);\n        }\n        @media screen and (min-width: 1025px) {\n            --headingMdFontSize: var(--fontSize40);\n            --headingMdLineHeight: var(--lineHeight120);\n        }\n\n        --headingSmFontSize: var(--fontSize20);\n        --headingSmLineHeight: var(--lineHeight140);\n\n        @media screen and (min-width: 768px) {\n            --headingSmFontSize: var(--fontSize24);\n            --headingSmLineHeight: var(--lineHeight133);\n        }\n        @media screen and (min-width: 1025px) {\n            --headingSmFontSize: var(--fontSize28);\n            --headingSmLineHeight: var(--lineHeight128);\n        }\n\n        --headingXsFontSize: var(--fontSize18);\n        --headingXsLineHeight: var(--lineHeight144);\n\n        @media screen and (min-width: 768px) {\n            --headingXsFontSize: var(--fontSize20);\n            --headingXsLineHeight: var(--lineHeight140);\n        }\n        @media screen and (min-width: 1025px) {\n            --headingXsFontSize: var(--fontSize20);\n            --headingXsLineHeight: var(--lineHeight140);\n        }\n    }\n    :root {\n        --iconSize2xs: 16px;\n        --iconSizeXs: 20px;\n        --iconSizeSm: 20px;\n        --iconSizeMd: 24px;\n        --iconSizeLg: 32px;\n        --iconSizeXl: 36px;\n        --iconSize2xl: 40px;\n        --iconSize3xl: 48px;\n        --iconSize4xl: 56px;\n        --iconSize5xl: 64px;\n        --iconSize6xl: 72px;\n        --iconSize7xl: 84px;\n        --iconSize8xl: 96px;\n        --iconSize9xl: 120px;\n\n        @media screen and (min-width: 768px) {\n            --iconSize2xs: 16px;\n            --iconSizeXs: 20px;\n            --iconSizeSm: 24px;\n            --iconSizeMd: 32px;\n            --iconSizeLg: 36px;\n            --iconSizeXl: 40px;\n            --iconSize2xl: 48px;\n            --iconSize3xl: 56px;\n            --iconSize4xl: 64px;\n            --iconSize5xl: 72px;\n            --iconSize6xl: 84px;\n            --iconSize7xl: 96px;\n            --iconSize8xl: 120px;\n            --iconSize9xl: 192px;\n        }\n    }\n";

package/dist/getSizesFromGridConfig-C-GBct4J.js

@@ -0,0 +1,28 @@
+import { m as maxWidthBreakpoint, c as containerMaxWidth } from "./index-C_6tWuWh.js";
+import { b as breakpoint_medium, a as breakpoint_large } from "./index-CG4uiVbZ.js";
+const toVw = (cols) => cols ? `${cols / 12 * 100}vw` : void 0;
+const toPx = (cols) => cols ? `${containerMaxWidth * cols / 12}px` : void 0;
+const getSizesFromGridConfig = (gridConfig, containerContext = false) => {
+  const sm = toVw(gridConfig.sm) ?? "100vw";
+  const smPx = toPx(gridConfig.sm) ?? "1240px";
+  const md = toVw(gridConfig.md);
+  const mdPx = toPx(gridConfig.md);
+  const lg = toVw(gridConfig.lg);
+  const lgPx = toPx(gridConfig.lg);
+  const segments = [];
+  if (md && sm !== md) {
+    segments.push(`(max-width: ${breakpoint_medium}) ${sm}`);
+  }
+  if (lg) {
+    segments.push(`(max-width: ${breakpoint_large}) ${md ?? sm}`);
+  }
+  const finalVw = lg ?? md ?? sm;
+  const finalPx = lgPx ?? mdPx ?? smPx;
+  if (!containerContext) {
+    return [...segments, finalVw].join(", ");
+  }
+  return [...segments, `(max-width: ${maxWidthBreakpoint}px) ${finalVw}, ${finalPx}`].join(", ");
+};
+export {
+  getSizesFromGridConfig as g
+};

package/dist/{index-XoIBkRyI.js → index-BLp5wi_X.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { isValidElement, cloneElement, createElement, useEffect } from "react";
-import { d as divTagName, c as spanTagName, g as headingHtmlTags, r as olTagName, e as strongTagName, f as supTagName, u as ulTagName } from "./tags-BeNegJAK.js";
+import { c as spanTagName, d as divTagName, g as headingHtmlTags, f as supTagName, e as strongTagName, r as olTagName, u as ulTagName } from "./tags-BeNegJAK.js";
 import { c as spacingSm, b as spacingNone, s as spacingMd } from "./Spacing-Dj-qX3Z5.js";
 import parse, { Element, domToReact } from "html-react-parser";
 import Body from "./components/Body/index.js";
@@ -18,12 +18,13 @@ import { f as colorBorderSubtle, a as colorBorderNeutral } from "./BorderColor-B
 import { a as fontWeightBold, f as fontWeightRegular } from "./FontWeight-C8c-UnWu.js";
 import { a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
 import Divider from "./components/Divider/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";
 import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
-import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { a as textBodySm, t as textBodyMd } from "./TextBodySize-CP9q4gRv.js";
-import { s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";
 import "./index-Dgu9iIhb.js";
+import "./props-GrMT6XLD.js";
 import "./hooks/useLinkComponent/index.js";
 import { t as textHeadingXs, a as textHeadingSm, b as textHeadingMd, c as textHeadingLg, d as textHeadingXl } from "./HeadingSize-O__w72MO.js";
 var ElementType;
@@ -430,7 +431,8 @@ const createListItems = (content, listType) => content.map((item, index) => ({
   uid: `contentful-${listType}-item-${index}`,
   richText: {
     component: richTextContentfulComponentName,
-    html: wrapInDocument(item.content)
+    html: wrapInDocument(item.content),
+    paragraphSpacing: spacingNone
   }
 }));
 const getCellDataValue = (cell, key) => {
@@ -546,29 +548,29 @@ const contentfulHeaderlessTableToTableProps = (tableRows) => {
     footCells: footerRow ? mapTableCells(footerRow, false, true) : void 0
   };
 };
-const getOptions$1 = (paragraphSpacing = void 0, tagProps = {}) => {
+const getOptions$1 = (tagProps = {}) => {
   const options = {
     renderMark: {
       [MARKS.BOLD]: (text) => {
-        return /* @__PURE__ */ jsx(Body, { tag: "strong", children: text });
+        return /* @__PURE__ */ jsx(Body, { tag: "strong", bottomSpacing: spacingNone, children: text });
       },
       [MARKS.ITALIC]: (text) => {
-        return /* @__PURE__ */ jsx(Body, { tag: "span", children: text });
+        return /* @__PURE__ */ jsx(Body, { tag: "span", bottomSpacing: spacingNone, children: text });
       },
       [MARKS.UNDERLINE]: (text) => {
-        return /* @__PURE__ */ jsx(Body, { tag: "span", children: text });
+        return /* @__PURE__ */ jsx(Body, { tag: "span", bottomSpacing: spacingNone, children: text });
       },
       [MARKS.CODE]: (text) => {
-        return /* @__PURE__ */ jsx(Body, { tag: "span", children: text });
+        return /* @__PURE__ */ jsx(Body, { tag: "span", bottomSpacing: spacingNone, children: text });
       },
       [MARKS.SUPERSCRIPT]: (text) => {
-        return /* @__PURE__ */ jsx(Body, { tag: "sup", children: text });
+        return /* @__PURE__ */ jsx(Body, { tag: "sup", bottomSpacing: spacingNone, children: text });
       },
       [MARKS.SUBSCRIPT]: (text) => {
-        return /* @__PURE__ */ jsx(Body, { tag: "span", children: text });
+        return /* @__PURE__ */ jsx(Body, { tag: "span", bottomSpacing: spacingNone, children: text });
       },
       [MARKS.STRIKETHROUGH]: (text) => {
-        return /* @__PURE__ */ jsx(Body, { tag: "span", children: text });
+        return /* @__PURE__ */ jsx(Body, { tag: "span", bottomSpacing: spacingNone, children: text });
       }
     },
     renderNode: {
@@ -576,34 +578,34 @@ const getOptions$1 = (paragraphSpacing = void 0, tagProps = {}) => {
         if (node.data.nestedPatch) {
           return children;
         }
-        return /* @__PURE__ */ jsx(Body, { ...tagProps.p, bottomSpacing: paragraphSpacing, children });
+        return /* @__PURE__ */ jsx(Body, { ...tagProps.p, bottomSpacing: spacingNone, children });
       },
       [BLOCKS.HEADING_1]: (_block, children) => {
-        return /* @__PURE__ */ jsx(Heading, { size: "xl", children });
+        return /* @__PURE__ */ jsx(Heading, { size: "xl", bottomSpacing: spacingNone, children });
       },
       [BLOCKS.HEADING_2]: (_block, children) => {
-        return /* @__PURE__ */ jsx(Heading, { size: "lg", children });
+        return /* @__PURE__ */ jsx(Heading, { size: "lg", bottomSpacing: spacingNone, children });
       },
       [BLOCKS.HEADING_3]: (_block, children) => {
-        return /* @__PURE__ */ jsx(Heading, { size: "md", children });
+        return /* @__PURE__ */ jsx(Heading, { size: "md", bottomSpacing: spacingNone, children });
       },
       [BLOCKS.HEADING_4]: (_block, children) => {
-        return /* @__PURE__ */ jsx(Heading, { size: "sm", children });
+        return /* @__PURE__ */ jsx(Heading, { size: "sm", bottomSpacing: spacingNone, children });
       },
       [BLOCKS.HEADING_5]: (_block, children) => {
-        return /* @__PURE__ */ jsx(Heading, { size: "xs", children });
+        return /* @__PURE__ */ jsx(Heading, { size: "xs", bottomSpacing: spacingNone, children });
       },
       [BLOCKS.HEADING_6]: (_block, children) => {
-        return /* @__PURE__ */ jsx(Heading, { tag: "h6", size: "xs", children });
+        return /* @__PURE__ */ jsx(Heading, { tag: "h6", size: "xs", bottomSpacing: spacingNone, children });
       },
       [BLOCKS.OL_LIST]: (block, _children) => {
-        return /* @__PURE__ */ jsx(TextList, { tag: "ol", items: createListItems(block.content, "ol") });
+        return /* @__PURE__ */ jsx(TextList, { tag: "ol", items: createListItems(block.content, "ol"), bottomSpacing: spacingNone });
       },
       [BLOCKS.UL_LIST]: (block, _children) => {
-        return /* @__PURE__ */ jsx(TextList, { tag: "ul", items: createListItems(block.content, "ul") });
+        return /* @__PURE__ */ jsx(TextList, { tag: "ul", items: createListItems(block.content, "ul"), bottomSpacing: spacingNone });
       },
       [BLOCKS.HR]: () => {
-        return /* @__PURE__ */ jsx(Divider, {});
+        return /* @__PURE__ */ jsx(Divider, { bottomSpacing: spacingNone });
       },
       [BLOCKS.TABLE]: (node) => {
         const tableRows = node.content.filter((row) => row.nodeType === BLOCKS.TABLE_ROW);
@@ -648,15 +650,31 @@ const RichTextContentfulStyled = styled.div.withConfig({
   shouldForwardProp,
   displayName: "RichTextContentfulStyled",
   componentId: "sc-114rr0m-0"
-})(({
-  bottomSpacing
-}) => ({
-  ...getBottomSpacing({
+})(
+  ({
     bottomSpacing
-  })
-}), ({
-  layout
-}) => layout && translateLayoutPropsToCss(layout));
+  }) => ({
+    ...getBottomSpacing({
+      bottomSpacing
+    })
+  }),
+  /**
+   * The spacing between content blocks is owned by this container instead of the
+   * individual blocks. An inline root (`span`) must stay in the phrasing content
+   * flow, so it cannot become a flex container.
+   */
+  ({
+    as,
+    paragraphSpacing = spacingMd
+  }) => as === spanTagName ? {} : {
+    display: "flex",
+    flexDirection: "column",
+    gap: getSpacing(paragraphSpacing)
+  },
+  ({
+    layout
+  }) => layout && translateLayoutPropsToCss(layout)
+);
 const richTextContentfulTags = [divTagName, spanTagName];
 const RichTextContentful = ({
   html,
@@ -667,8 +685,8 @@ const RichTextContentful = ({
   ...props
 }) => {
   var _a;
-  const rendered = documentToReactComponents(html, getOptions$1(paragraphSpacing, tagProps));
-  return /* @__PURE__ */ jsx(RichTextContentfulStyled, { ...props, as: (_a = tagProps.root) == null ? void 0 : _a.tag, bottomSpacing, layout, children: rendered });
+  const rendered = documentToReactComponents(html, getOptions$1(tagProps));
+  return /* @__PURE__ */ jsx(RichTextContentfulStyled, { ...props, as: (_a = tagProps.root) == null ? void 0 : _a.tag, paragraphSpacing, bottomSpacing, layout, children: rendered });
 };
 const TableCell = ({
   richText,
@@ -732,154 +750,164 @@ const mapSizeToTag = {
   h5: textHeadingXs,
   h6: textHeadingXs
 };
+const footnoteScreenReaderLabel = "Details zur Fußnote";
 const getTableAlign = (align) => {
   return align === tableAlignLeft || align === tableAlignRight ? align : void 0;
 };
-const getOptions = (paragraphSpacing, additionalProps = {}) => {
-  let uid = 0;
-  const getTextListItemHtml = (listItemNode) => {
-    const childrenHtml = render(listItemNode.children);
-    if (childrenHtml.trim()) {
-      return childrenHtml;
+const findChildElement = (node, name) => node.children.find((child) => child instanceof Element && child.name === name);
+const getTextListItemHtml = (listItemNode) => {
+  const childrenHtml = render(listItemNode.children);
+  if (childrenHtml.trim()) {
+    return childrenHtml;
+  }
+  return render(listItemNode).replace(/^<li[^>]*>/, "").replace(/<\/li>$/, "");
+};
+const createTextListItems = (listNode, listKey, itemProps) => listNode.children.flatMap((child, itemIndex) => {
+  if (!(child instanceof Element) || child.name !== "li") {
+    return [];
+  }
+  return [{
+    ...itemProps,
+    uid: `${listKey}-item-${itemIndex}`,
+    richText: {
+      component: richTextComponentName,
+      html: getTextListItemHtml(child)
     }
-    return render(listItemNode).replace(/^<li[^>]*>/, "").replace(/<\/li>$/, "");
+  }];
+});
+const parseTableCells = (tr) => tr.children.filter((cell) => cell instanceof Element && (cell.name === "td" || cell.name === "th")).map((cell) => {
+  const attribs = cell.attribs || {};
+  return {
+    richText: {
+      component: richTextComponentName,
+      html: render(cell.children)
+    },
+    align: getTableAlign(attribs.align),
+    as: cell.name === "th" ? "th" : "td",
+    colSpan: attribs.colspan ? parseInt(attribs.colspan, 10) : void 0,
+    scope: attribs.scope
   };
-  const createTextListItems = (listNode, listKey) => {
-    return listNode.children.flatMap((child, itemIndex) => {
-      if (!(child instanceof Element) || child.name !== "li") {
-        return [];
-      }
-      return [{
-        ...additionalProps.li,
-        uid: `${listKey}-item-${itemIndex}`,
-        richText: {
-          component: richTextComponentName,
-          html: getTextListItemHtml(child)
-        }
-      }];
-    });
+});
+const parseTableColumns = (thead) => {
+  const tr = thead && findChildElement(thead, "tr");
+  if (!tr) {
+    return [];
+  }
+  return tr.children.filter((child) => child instanceof Element && child.name === "th").map((th, i) => {
+    const attribs = th.attribs || {};
+    return {
+      key: attribs.key || `col${i}`,
+      label: {
+        component: richTextComponentName,
+        html: render(th.children)
+      },
+      align: getTableAlign(attribs.align)
+    };
+  });
+};
+const parseTableRows = (tbody) => {
+  var _a;
+  if (!tbody) {
+    return {
+      rows: [],
+      sideHeader: false
+    };
+  }
+  const sideheaderAttrib = (_a = tbody.attribs) == null ? void 0 : _a.sideheader;
+  const sideHeader = typeof sideheaderAttrib !== "undefined" && (sideheaderAttrib === "" || sideheaderAttrib === "true");
+  const rows = tbody.children.filter((child) => child instanceof Element && child.name === "tr").map((tr, i) => ({
+    key: `row${i}`,
+    cells: parseTableCells(tr)
+  }));
+  return {
+    rows,
+    sideHeader
+  };
+};
+const parseTableFootCells = (tfoot) => {
+  const tr = tfoot && findChildElement(tfoot, "tr");
+  return tr ? parseTableCells(tr) : [];
+};
+const getTableProps = (domNode) => {
+  const thead = findChildElement(domNode, "thead");
+  const tbody = findChildElement(domNode, "tbody");
+  const tfoot = findChildElement(domNode, "tfoot");
+  const {
+    rows,
+    sideHeader
+  } = parseTableRows(tbody);
+  const footCells = parseTableFootCells(tfoot);
+  return {
+    columns: parseTableColumns(thead),
+    rows,
+    sideHeader,
+    footCells: footCells.length ? footCells : void 0
+  };
+};
+const renderHeading = (domNode, key, options, paragraphSpacing, headingProps) => /* @__PURE__ */ jsx(Heading, { ...headingProps, size: mapSizeToTag[domNode.name], bottomSpacing: paragraphSpacing, children: domToReact(domNode.children, options) }, key);
+const renderList = (domNode, key, listProps, itemProps, tag) => /* @__PURE__ */ jsx(TextList, { ...listProps, ...tag ? {
+  tag
+} : {}, items: createTextListItems(domNode, key, itemProps) }, key);
+const renderTable = (domNode, key) => /* @__PURE__ */ jsx(TableWrapper, { ...getTableProps(domNode) }, key);
+const renderStrong = (domNode, key, options, strongProps) => /* @__PURE__ */ jsx(Body, { ...strongProps, tag: strongTagName, children: domToReact(domNode.children, options) }, key);
+const renderSmall = (domNode, key, options, smallProps) => /* @__PURE__ */ jsx(Body, { ...smallProps, size: textBodySm, children: domToReact(domNode.children, options) }, key);
+const renderSup = (domNode, key, options, supProps, uidState) => {
+  const children = domToReact(domNode.children, options);
+  if (Number.isInteger(parseInt(children))) {
+    uidState.current += 1;
+    return /* @__PURE__ */ jsx(FootnoteLink, { uid: `footnote-link-${uidState.current}-${children}`, contentUid: `footnote-content-${children}`, screenReaderLabel: footnoteScreenReaderLabel, children }, key);
+  }
+  return /* @__PURE__ */ jsx(Body, { ...supProps, tag: supTagName, children }, key);
+};
+const renderParagraph = (domNode, key, options, paragraphSpacing, pProps) => {
+  if (domNode.children.some((child) => child instanceof Element && (child.name === "ol" || child.name === "ul"))) {
+    return domToReact(domNode.children, options);
+  }
+  return /* @__PURE__ */ jsx(Body, { ...pProps, bottomSpacing: paragraphSpacing, children: domToReact(domNode.children, options) }, key);
+};
+const renderLink = (domNode, key, options, aProps, uidState) => {
+  const linkLabel = domToReact(domNode.children, options);
+  const isNumber = parseInt(linkLabel, 10);
+  const href = domNode.attribs.href;
+  const isAnchor = href && href.indexOf("#") === 0;
+  if (!isNaN(isNumber) && isAnchor) {
+    return /* @__PURE__ */ jsx(FootnoteLink, { uid: `${uidState.current}`, contentUid: href.replace("#", ""), screenReaderLabel: footnoteScreenReaderLabel, children: linkLabel }, key);
+  }
+  return /* @__PURE__ */ jsx(InlineLink, { ...aProps, href: domNode.attribs.href, target: domNode.attribs.target, children: domToReact(domNode.children, options) }, key);
+};
+const tagHandlers = {
+  li: () => null,
+  ol: (domNode, key, ctx) => renderList(domNode, key, ctx.additionalProps.ol, ctx.additionalProps.li, olTagName),
+  ul: (domNode, key, ctx) => renderList(domNode, key, ctx.additionalProps.ul, ctx.additionalProps.li),
+  table: (domNode, key) => renderTable(domNode, key),
+  strong: (domNode, key, ctx) => renderStrong(domNode, key, ctx.options, ctx.additionalProps.strong),
+  small: (domNode, key, ctx) => renderSmall(domNode, key, ctx.options, ctx.additionalProps.small),
+  sup: (domNode, key, ctx) => renderSup(domNode, key, ctx.options, ctx.additionalProps.sup, ctx.uidState),
+  p: (domNode, key, ctx) => renderParagraph(domNode, key, ctx.options, ctx.paragraphSpacing, ctx.additionalProps.p),
+  a: (domNode, key, ctx) => renderLink(domNode, key, ctx.options, ctx.additionalProps.a, ctx.uidState)
+};
+for (const headingTag of headingHtmlTags) {
+  tagHandlers[headingTag] = (domNode, key, ctx) => renderHeading(domNode, key, ctx.options, ctx.paragraphSpacing, ctx.additionalProps.heading);
+}
+const getOptions = (paragraphSpacing, additionalProps = {}) => {
+  const uidState = {
+    current: 0
   };
   const options = {
     replace(domNode, index) {
-      if (domNode instanceof Element) {
-        const key = `rt-${domNode.name}-${index}`;
-        if (headingHtmlTags.includes(domNode.name)) {
-          return /* @__PURE__ */ jsx(Heading, { ...additionalProps.heading, size: mapSizeToTag[domNode.name], bottomSpacing: paragraphSpacing, children: domToReact(domNode.children, options) }, key);
-        }
-        if ("li" === domNode.name) {
-          return null;
-        }
-        if ("ol" === domNode.name) {
-          return /* @__PURE__ */ jsx(TextList, { ...additionalProps.ol, tag: olTagName, items: createTextListItems(domNode, key) }, key);
-        }
-        if ("ul" === domNode.name) {
-          return /* @__PURE__ */ jsx(TextList, { ...additionalProps.ul, items: createTextListItems(domNode, key) }, key);
-        }
-        if (domNode.name === "table") {
-          const thead = domNode.children.find((child) => child instanceof Element && child.name === "thead");
-          const tbody = domNode.children.find((child) => child instanceof Element && child.name === "tbody");
-          const tfoot = domNode.children.find((child) => child instanceof Element && child.name === "tfoot");
-          let columns = [];
-          if (thead) {
-            const tr = thead.children.find((child) => child instanceof Element && child.name === "tr");
-            if (tr) {
-              columns = tr.children.filter((child) => child instanceof Element && child.name === "th").map((th, i) => {
-                const attribs = th.attribs || {};
-                const align = getTableAlign(attribs.align);
-                return {
-                  key: attribs.key || `col${i}`,
-                  label: {
-                    component: richTextComponentName,
-                    html: render(th.children)
-                  },
-                  align
-                };
-              });
-            }
-          }
-          let rows = [];
-          let sideHeader = false;
-          if (tbody) {
-            if (tbody.attribs && typeof tbody.attribs.sideheader !== "undefined") {
-              sideHeader = tbody.attribs.sideheader === "" || tbody.attribs.sideheader === "true";
-            }
-            rows = tbody.children.filter((child) => child instanceof Element && child.name === "tr").map((tr, i) => ({
-              key: `row${i}`,
-              cells: tr.children.filter((cell) => cell instanceof Element && (cell.name === "td" || cell.name === "th")).map((cell) => {
-                const attribs = cell.attribs || {};
-                const align = getTableAlign(attribs.align);
-                const as = cell.name === "th" ? "th" : "td";
-                const colSpan = attribs.colspan ? parseInt(attribs.colspan, 10) : void 0;
-                const scope = attribs.scope;
-                return {
-                  richText: {
-                    component: richTextComponentName,
-                    html: render(cell.children)
-                  },
-                  align,
-                  as,
-                  colSpan,
-                  scope
-                };
-              })
-            }));
-          }
-          let footCells = [];
-          if (tfoot) {
-            const tr = tfoot.children.find((child) => child instanceof Element && child.name === "tr");
-            if (tr) {
-              footCells = tr.children.filter((cell) => cell instanceof Element && (cell.name === "td" || cell.name === "th")).map((cell) => {
-                const attribs = cell.attribs || {};
-                const align = getTableAlign(attribs.align);
-                const as = cell.name === "th" ? "th" : "td";
-                const colSpan = attribs.colspan ? parseInt(attribs.colspan, 10) : void 0;
-                const scope = attribs.scope;
-                return {
-                  richText: {
-                    component: richTextComponentName,
-                    html: render(cell.children)
-                  },
-                  align,
-                  as,
-                  colSpan,
-                  scope
-                };
-              });
-            }
-          }
-          return /* @__PURE__ */ jsx(TableWrapper, { columns, rows, sideHeader, footCells: footCells.length ? footCells : void 0 }, key);
-        }
-        if ("strong" === domNode.name) {
-          return /* @__PURE__ */ jsx(Body, { ...additionalProps.strong, tag: strongTagName, children: domToReact(domNode.children, options) }, key);
-        }
-        if ("small" === domNode.name) {
-          return /* @__PURE__ */ jsx(Body, { ...additionalProps.small, size: textBodySm, children: domToReact(domNode.children, options) }, key);
-        }
-        if ("sup" === domNode.name) {
-          const children = domToReact(domNode.children, options);
-          if (Number.isInteger(parseInt(children))) {
-            uid += 1;
-            return /* @__PURE__ */ jsx(FootnoteLink, { uid: `footnote-link-${uid}-${children}`, contentUid: `footnote-content-${children}`, screenReaderLabel: "Details zur Fußnote", children }, key);
-          }
-          return /* @__PURE__ */ jsx(Body, { ...additionalProps.sup, tag: supTagName, children }, key);
-        }
-        if ("p" === domNode.name) {
-          if (domNode.children.some((child) => child instanceof Element && (child.name === "ol" || child.name === "ul"))) {
-            return domToReact(domNode.children, options);
-          }
-          return /* @__PURE__ */ jsx(Body, { ...additionalProps.p, bottomSpacing: paragraphSpacing, children: domToReact(domNode.children, options) }, key);
-        }
-        if ("a" === domNode.name) {
-          const linkLabel = domToReact(domNode.children, options);
-          const isNumber = parseInt(linkLabel, 10);
-          const href = domNode.attribs.href;
-          const isAnchor = href && href.indexOf("#") === 0;
-          if (!isNaN(isNumber) && isAnchor) {
-            return /* @__PURE__ */ jsx(FootnoteLink, { uid: `${uid}`, contentUid: href.replace("#", ""), screenReaderLabel: "Details zur Fußnote", children: linkLabel }, key);
-          }
-          return /* @__PURE__ */ jsx(InlineLink, { ...additionalProps.a, href: domNode.attribs.href, target: domNode.attribs.target, children: domToReact(domNode.children, options) }, key);
-        }
+      if (!(domNode instanceof Element)) {
+        return void 0;
+      }
+      const handler = tagHandlers[domNode.name];
+      if (!handler) {
+        return void 0;
       }
+      return handler(domNode, `rt-${domNode.name}-${index}`, {
+        options,
+        paragraphSpacing,
+        additionalProps,
+        uidState
+      });
     }
   };
   return options;