@vodafone_de/brix-components 9.0.4 → 10.0.0

package/dist/index-Bu-7sSif.js

@@ -0,0 +1,201 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { d as divTagName, u as ulTagName, o as olTagName, q as navTagName, r as mainTagName, s as sectionTagName, b as asideTagName, a as articleTagName, l as liTagName } from "./tags-Cwgg3Gx2.js";
+import { s as spacingMd } from "./Spacing-8v6hcO2x.js";
+import { G as GridItemStyled, a as GridStyled } from "./styled-DdeOXNN9.js";
+import { i as isObject, h as hasMatchingComponentName } from "./isObject-BYBrvoVW.js";
+import { i as isBottomSpacing } from "./isBottomSpacing-BxfreCZU.js";
+const resolveBreakpoints = (config) => {
+  const sm = config.sm ?? 12;
+  const md = config.md ?? sm;
+  const lg = config.lg ?? md;
+  return {
+    sm,
+    md,
+    lg
+  };
+};
+const calculateNestedGridConfig = (parentGridConfig, currentGridConfig) => {
+  const parent = resolveBreakpoints(parentGridConfig);
+  const current = resolveBreakpoints(currentGridConfig);
+  return {
+    sm: parent.sm * (current.sm / 12),
+    md: parent.md * (current.md / 12),
+    lg: parent.lg * (current.lg / 12)
+  };
+};
+const gridTags = [divTagName, ulTagName, olTagName, navTagName, mainTagName, sectionTagName, asideTagName, articleTagName];
+const gridAligns = ["left", "center", "right"];
+const gridSpacings = ["None", "Md"];
+const gridColSpan = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const validateGridColSpan = (colSpan) => {
+  if (!Number.isInteger(colSpan)) {
+    return false;
+  }
+  if (!gridColSpan.includes(colSpan)) {
+    return false;
+  }
+  return true;
+};
+const validateGridConfig = (config) => {
+  if (!isObject(config)) {
+    return false;
+  }
+  const gridConfig = config;
+  if (!gridConfig.sm || false === validateGridColSpan(gridConfig.sm)) {
+    return false;
+  }
+  if (gridConfig.md && false === validateGridColSpan(gridConfig.md)) {
+    return false;
+  }
+  if (gridConfig.lg && false === validateGridColSpan(gridConfig.lg)) {
+    return false;
+  }
+  return true;
+};
+const isGridConfig = (config) => validateGridConfig(config);
+const validateGridProps = (props) => {
+  if (!isObject(props)) {
+    return false;
+  }
+  const gridProps = props;
+  if (!hasMatchingComponentName(gridProps.component, "Grid")) {
+    return false;
+  }
+  if (gridProps.align !== void 0 && !gridAligns.includes(gridProps.align)) {
+    return false;
+  }
+  if (gridProps.tag !== void 0 && !gridTags.includes(gridProps.tag)) {
+    return false;
+  }
+  if (gridProps.spacing !== void 0 && !gridSpacings.includes(gridProps.spacing)) {
+    return false;
+  }
+  if (gridProps.bottomSpacing && !isBottomSpacing(gridProps.bottomSpacing)) {
+    return false;
+  }
+  return true;
+};
+const isGridProps = (props) => {
+  return validateGridProps(props);
+};
+const gridItemTags = [divTagName, liTagName, navTagName, mainTagName, sectionTagName, asideTagName, articleTagName];
+const gridItemAligns = ["left", "center", "right"];
+const validateGridItemProps = (props) => {
+  if (!isObject(props)) {
+    return false;
+  }
+  const itemProps = props;
+  if (!hasMatchingComponentName(itemProps.component, "GridItem")) {
+    return false;
+  }
+  if (itemProps.sm && false === validateGridColSpan(itemProps.sm)) {
+    return false;
+  }
+  if (itemProps.md && false === validateGridColSpan(itemProps.md)) {
+    return false;
+  }
+  if (itemProps.lg && false === validateGridColSpan(itemProps.lg)) {
+    return false;
+  }
+  if (itemProps.align !== void 0 && !gridItemAligns.includes(itemProps.align)) {
+    return false;
+  }
+  if (itemProps.tag !== void 0 && !gridItemTags.includes(itemProps.tag)) {
+    return false;
+  }
+  if (itemProps.children === void 0) {
+    return false;
+  }
+  return true;
+};
+const isGridItemProps = (props) => {
+  return validateGridItemProps(props);
+};
+const GridItemContext = createContext({
+  gridConfig: {
+    sm: 12
+  }
+});
+const GridItem = ({
+  sm = 12,
+  tag = divTagName,
+  ...props
+}) => {
+  const gridContext = useContext(GridContext);
+  const gridItemContext = useContext(GridItemContext);
+  const gridTag = gridContext == null ? void 0 : gridContext.tag;
+  const gridSpacing = gridContext == null ? void 0 : gridContext.spacing;
+  const gridAutoLayout = gridContext == null ? void 0 : gridContext.autoLayout;
+  const gridItemGridConfig = {
+    sm,
+    md: props.md,
+    lg: props.lg
+  };
+  let nestedGridConfig;
+  if (gridContext && gridContext.nestedGridConfig) {
+    nestedGridConfig = calculateNestedGridConfig(gridContext.nestedGridConfig, gridItemGridConfig);
+  } else if (gridContext && gridContext.autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridContext.autoLayout, gridItemGridConfig);
+  } else if (gridItemContext && gridItemContext.nestedGridConfig) {
+    nestedGridConfig = calculateNestedGridConfig(gridItemContext.nestedGridConfig, gridItemGridConfig);
+  } else if (gridItemContext && gridItemContext.gridConfig) {
+    nestedGridConfig = calculateNestedGridConfig(gridItemContext.gridConfig, gridItemGridConfig);
+  }
+  const gridItem = /* @__PURE__ */ jsx(GridItemStyled, { ...props, as: gridTag === ulTagName || gridTag === olTagName ? liTagName : tag, spacing: gridSpacing, sm, ...gridAutoLayout, children: props.children });
+  if (gridAutoLayout) {
+    return gridItem;
+  }
+  return /* @__PURE__ */ jsx(GridItemContext, { value: {
+    gridConfig: {
+      sm,
+      md: props.md,
+      lg: props.lg
+    },
+    nestedGridConfig
+  }, children: gridItem });
+};
+const GridContext = createContext(void 0);
+const Grid = ({
+  tag = divTagName,
+  spacing = spacingMd,
+  autoLayout,
+  ...props
+}) => {
+  const gridContext = useContext(GridContext);
+  const gridItemContext = useContext(GridItemContext);
+  let nestedGridConfig;
+  if (gridContext && gridContext.nestedGridConfig && autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridContext.nestedGridConfig, autoLayout);
+  } else if (gridContext && gridContext.autoLayout && autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridContext.autoLayout, autoLayout);
+  } else if (gridItemContext && gridItemContext.nestedGridConfig && autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridItemContext.nestedGridConfig, autoLayout);
+  } else if (gridItemContext && gridItemContext.gridConfig && autoLayout) {
+    nestedGridConfig = calculateNestedGridConfig(gridItemContext.gridConfig, autoLayout);
+  }
+  return /* @__PURE__ */ jsx(GridContext, { value: {
+    tag,
+    spacing,
+    autoLayout,
+    nestedGridConfig
+  }, children: /* @__PURE__ */ jsx(GridStyled, { ...props, as: tag, spacing, children: props.children }) });
+};
+export {
+  GridItem as G,
+  Grid as a,
+  GridItemContext as b,
+  gridItemAligns as c,
+  GridContext as d,
+  gridTags as e,
+  gridAligns as f,
+  gridItemTags as g,
+  gridSpacings as h,
+  isGridItemProps as i,
+  validateGridColSpan as j,
+  validateGridConfig as k,
+  isGridConfig as l,
+  validateGridProps as m,
+  isGridProps as n,
+  validateGridItemProps as v
+};

package/dist/{index-DCE5HNIR.js → index-C2E3JrhF.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-import { a as filterProps } from "./filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "./filterProps-CxkibNnG.js";
 const screenreaderOnly = {
   position: "absolute",
   width: "1px",

package/dist/{index-TL0X3rXH.js → index-DCXRnuHz.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { S as ScreenreaderOnly } from "./index-DCE5HNIR.js";
+import { S as ScreenreaderOnly } from "./index-C2E3JrhF.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
@@ -10,8 +10,7 @@ import { getTextDecoration } from "./foundations/token/getTextDecoration/index.j
 import { f as fontWeightBold, a as fontWeightRegular } from "./FontWeight-DEBGHbtO.js";
 import { s as spacingMd, c as spacingNone, a as spacingXs } from "./Spacing-8v6hcO2x.js";
 import { f as colorTextCritical, a as colorTextNeutral } from "./TextColor-BXVMXUVE.js";
-import { a as filterProps } from "./filterProps-BJ5SpbnA.js";
-import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import { a as filterProps } from "./filterProps-CxkibNnG.js";
 import { i as isObject, h as hasMatchingComponentName } from "./isObject-BYBrvoVW.js";
 import { i as isBottomSpacing } from "./isBottomSpacing-BxfreCZU.js";
 const priceOrientationHorizontal = "horizontal";
@@ -161,10 +160,10 @@ const Price = (props) => {
       "aria-hidden": true
     }, itemProp: offerProductName ? "offers" : void 0, itemType: offerProductName ? "https://schema.org/Offer" : void 0, itemScope: offerProductName ? true : void 0, children: [
       offerProductName && /* @__PURE__ */ jsx("meta", { itemProp: "priceCurrency", content: "EUR" }),
-      props.strikePrice ? /* @__PURE__ */ jsx(StrikePriceStyled, { children: renderInlineRichTextFromOpenText(priceProps.strikePrice) }) : null,
+      props.strikePrice ? /* @__PURE__ */ jsx(StrikePriceStyled, { children: priceProps.strikePrice }) : null,
       /* @__PURE__ */ jsxs(PriceOrientationStyled, { orientation, align, itemProp: offerProductName ? "price" : void 0, content: offerProductName ? price : void 0, children: [
-        /* @__PURE__ */ jsx(PriceStyled, { size: priceProps.size, children: renderInlineRichTextFromOpenText(priceToRender) }),
-        /* @__PURE__ */ jsx(PriceSuffixStyled, { children: renderInlineRichTextFromOpenText(priceProps.suffix) })
+        /* @__PURE__ */ jsx(PriceStyled, { size: priceProps.size, children: priceToRender }),
+        /* @__PURE__ */ jsx(PriceSuffixStyled, { children: priceProps.suffix })
       ] })
     ] })
   ] });
@@ -210,8 +209,8 @@ const TabularPrice = ({
     }, itemProp: offerProductName ? "offers" : void 0, itemType: offerProductName ? "https://schema.org/Offer" : void 0, itemScope: offerProductName ? true : void 0, children: [
       offerProductName && /* @__PURE__ */ jsx("meta", { itemProp: "priceCurrency", content: "EUR" }),
       /* @__PURE__ */ jsx(TabularPricePrefixStyled, { prefixWeight, children: props.prefix }),
-      props.strikePrice ? /* @__PURE__ */ jsx(StrikePriceStyled, { children: renderInlineRichTextFromOpenText(props.strikePrice) }) : null,
-      /* @__PURE__ */ jsx(PriceStyled, { size: props.size, itemProp: offerProductName ? "price" : void 0, content: offerProductName ? props.price : void 0, children: renderInlineRichTextFromOpenText(props.price) })
+      props.strikePrice ? /* @__PURE__ */ jsx(StrikePriceStyled, { children: props.strikePrice }) : null,
+      /* @__PURE__ */ jsx(PriceStyled, { size: props.size, itemProp: offerProductName ? "price" : void 0, content: offerProductName ? props.price : void 0, children: props.price })
     ] })
   ] });
 };

package/dist/index-DKCzYjXw.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+import { largeMediaQuery, mediumMediaQuery } from "./foundations/media-query/viewport/index.js";
+import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
+const viewportSm = "sm";
+const viewportMd = "md";
+const viewportLg = "lg";
+const useViewport = () => {
+  const tablet = useMediaQuery(mediumMediaQuery);
+  const desktop = useMediaQuery(largeMediaQuery);
+  const [viewportState, setViewportState] = useState(viewportSm);
+  useEffect(() => {
+    if (desktop) {
+      setViewportState(viewportLg);
+    } else if (tablet) {
+      setViewportState(viewportMd);
+    } else {
+      setViewportState(viewportSm);
+    }
+  }, [tablet, desktop]);
+  return viewportState;
+};
+export {
+  useViewport as u,
+  viewportLg as v
+};

package/dist/{index-C4eCcl02.js → index-DP6Nlg-a.js}

@@ -2,13 +2,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import parse, { Element, domToReact } from "html-react-parser";
 import Body from "./components/Body/index.js";
-import { F as FootnoteLink } from "./index-BJHhIBYl.js";
+import { F as FootnoteLink } from "./index-BsykXBqC.js";
 import Heading from "./components/Heading/index.js";
 import InlineLink from "./components/InlineLink/index.js";
 import { T as TableWrapper, e as TableHead, a as TableBody, d as TableFoot } from "./TableWrapper-Do9KCTGV.js";
-import { e as headingHtmlTags, o as olTagName, f as strongTagName, g as supTagName, u as ulTagName } from "./tags-D7CRQqc1.js";
+import { e as headingHtmlTags, o as olTagName, f as strongTagName, g as supTagName, u as ulTagName } from "./tags-Cwgg3Gx2.js";
 import { c as spacingNone, s as spacingMd } from "./Spacing-8v6hcO2x.js";
-import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
@@ -16,7 +15,7 @@ import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { a as fontWeightRegular } from "./FontWeight-DEBGHbtO.js";
 import { a as textBodySm, t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
-import { a as filterProps } from "./filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "./filterProps-CxkibNnG.js";
 import { t as textHeadingXs, b as textHeadingSm, a as textHeadingMd, c as textHeadingLg, d as textHeadingXl } from "./HeadingSize-CfCRn3Lh.js";
 const mapSizeToTag = {
   h1: textHeadingXl,
@@ -226,7 +225,7 @@ const TextList = ({
   const getContent = (items2, children2) => {
     if (items2) {
       return items2.map(function(item) {
-        return /* @__PURE__ */ jsx(TextListItem, { bottomSpacing: itemSpacing || item.bottomSpacing, children: "string" === typeof item.children ? /* @__PURE__ */ jsx(RichText, { html: item.children }) : renderInlineRichTextFromOpenText(item.children) }, item.uid);
+        return /* @__PURE__ */ jsx(TextListItem, { bottomSpacing: itemSpacing || item.bottomSpacing, children: "string" === typeof item.children ? /* @__PURE__ */ jsx(RichText, { html: item.children }) : item.children }, item.uid);
       });
     } else if (children2) {
       return children2;

package/dist/index-DbG0QL9D.js

@@ -0,0 +1,113 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+import styled from "styled-components";
+import { getBackgroundColor } from "./foundations/token/getBackgroundColor/index.js";
+import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { getTextColor } from "./foundations/token/getTextColor/index.js";
+import { j as colorBorderSubtle } from "./BorderColor-BummoQ1-.js";
+import { f as borderWidthDivider } from "./BorderWidth-BjXpOdM5.js";
+import { e as spacingXl, s as spacingMd, c as spacingNone, h as spacing5Xl } from "./Spacing-8v6hcO2x.js";
+import { a as colorTextNeutral } from "./TextColor-BXVMXUVE.js";
+import { a as filterProps } from "./filterProps-CxkibNnG.js";
+import { f as colorBackgroundBrand, e as colorBackgroundBrandGradient, a as colorBackgroundSubtle, c as colorBackgroundNeutral } from "./BackgroundColor-e0N9tdDR.js";
+const ContainerAppearanceColor = {
+  primary: colorBackgroundNeutral,
+  secondary: colorBackgroundSubtle,
+  tertiary: colorBackgroundBrandGradient,
+  alternative: colorBackgroundBrand
+};
+const ContainerBackgroundStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ContainerBackgroundStyled",
+  componentId: "sc-a9r652-0"
+})({
+  color: getTextColor(colorTextNeutral)
+}, ({
+  padding = spacingXl
+}) => ({
+  paddingTop: getSpacing(padding),
+  paddingBottom: getSpacing(padding)
+}), ({
+  appearance = "primary"
+}) => {
+  return {
+    background: getBackgroundColor(ContainerAppearanceColor[appearance])
+  };
+}, ({
+  border = false
+}) => {
+  if (!border) {
+    return {};
+  }
+  return {
+    borderBottom: `${getBorderWidth(borderWidthDivider)} solid ${getBorderColor(colorBorderSubtle)}`
+  };
+});
+const maxWidthBreakpoint = 1280;
+const containerMaxWidth = 1240;
+const maxWidthViewport = (stylesInViewport) => {
+  return {
+    [`@media screen and (min-width: ${maxWidthBreakpoint}px)`]: {
+      ...stylesInViewport
+    }
+  };
+};
+const ContainerCenterStyled = styled.div.withConfig({
+  displayName: "ContainerCenterStyled",
+  componentId: "sc-a9r652-1"
+})({
+  marginLeft: getSpacing(spacingMd),
+  marginRight: getSpacing(spacingMd)
+}, maxWidthViewport({
+  maxWidth: `${containerMaxWidth}px`,
+  marginLeft: "auto",
+  marginRight: "auto"
+}));
+const containerAppearances = ["primary", "secondary", "tertiary", "alternative"];
+const containerPaddings = [spacingNone, spacingXl, spacing5Xl];
+const validateContainerProps = (props) => {
+  if (!props || typeof props !== "object") {
+    return false;
+  }
+  const containerProps = props;
+  if (!containerProps.component || containerProps.component !== "Container") {
+    return false;
+  }
+  if (containerProps.appearance !== void 0 && !containerAppearances.includes(containerProps.appearance)) {
+    return false;
+  }
+  if (containerProps.border !== void 0 && typeof containerProps.border !== "boolean") {
+    return false;
+  }
+  if (containerProps.padding !== void 0 && !containerPaddings.includes(containerProps.padding)) {
+    return false;
+  }
+  if (containerProps.children === void 0) {
+    return false;
+  }
+  return true;
+};
+const isContainerProps = (props) => {
+  return validateContainerProps(props);
+};
+const ContainerContext = createContext(false);
+const Container = ({
+  className,
+  children,
+  appearance = "primary",
+  tag = "div",
+  ...props
+}) => /* @__PURE__ */ jsx(ContainerContext, { value: true, children: /* @__PURE__ */ jsx(ContainerBackgroundStyled, { className: `${className ? className : ""} ${["tertiary", "alternative"].indexOf(appearance) > -1 ? "Dark" : props.theme}`, appearance, as: tag, ...props, children: /* @__PURE__ */ jsx(ContainerCenterStyled, { children }) }) });
+export {
+  Container as C,
+  ContainerContext as a,
+  ContainerAppearanceColor as b,
+  containerAppearances as c,
+  containerPaddings as d,
+  containerMaxWidth as e,
+  isContainerProps as i,
+  maxWidthBreakpoint as m,
+  validateContainerProps as v
+};

package/dist/{index-CEotMXpL.js → index-Dd-A7i9Y.js}

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { a as ButtonIconStyled, l as leftPosition, r as rightPosition } from "./styled-7vJ7mrAA.js";
+import { a as ButtonIconStyled, l as leftPosition, r as rightPosition } from "./styled-BKH3egch.js";
 import { i as iconSizeSm } from "./IconSize-AJp7xdJi.js";
-import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { c as spacingNone, a as spacingXs, s as spacingMd } from "./Spacing-8v6hcO2x.js";
-import { a as filterProps } from "./filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "./filterProps-CxkibNnG.js";
 import forcedColors from "./foundations/media-query/forcedColors/index.js";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
 import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
@@ -115,7 +114,7 @@ const isLinkAsButtonProps = (props) => {
   return validateLinkAsButtonProps(props);
 };
 const LinkAsButton = (props) => /* @__PURE__ */ jsxs(LinkAsButtonStyled, { ...props, children: [
-  renderInlineRichTextFromOpenText(props.children),
+  props.children,
   getLinkIcon(props.icon, props.iconPosition)
 ] });
 export {

package/dist/{index-j22agtAk.js → index-DwGcrvTh.js}

@@ -1,9 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { a as FootnoteLinkStyled, F as FootnoteLink } from "./index-BJHhIBYl.js";
+import { a as FootnoteLinkStyled, F as FootnoteLink } from "./index-BsykXBqC.js";
 import { n as iconSizeXs, i as iconSizeSm } from "./IconSize-AJp7xdJi.js";
 import { s as smallSize, m as mediumSize } from "./SizeTypes-Ck_RdzIf.js";
 import { f as spacing2Xs, b as spacingSm, s as spacingMd, a as spacingXs } from "./Spacing-8v6hcO2x.js";
-import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { I as IconLoader, b as iconNames } from "./index--RjkzZm0.js";
 import forcedColors from "./foundations/media-query/forcedColors/index.js";
@@ -13,11 +12,11 @@ import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js"
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
-import { c as borderRadiusFull } from "./BorderRadius-ClUShVLu.js";
+import { a as borderRadiusFull } from "./BorderRadius-2LdggXbQ.js";
 import { f as fontWeightBold } from "./FontWeight-DEBGHbtO.js";
 import { a as textBodySm, t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
 import { g as getForegroundColor } from "./colorUtils-oJmiUVBK.js";
-import { a as filterProps } from "./filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "./filterProps-CxkibNnG.js";
 import { h as colorObjectSuccess, c as colorObjectNeutral, j as colorObjectAccent, a as colorObjectBrand } from "./ObjectColor-DxgEnOBM.js";
 import { h as hasMatchingComponentName } from "./isObject-BYBrvoVW.js";
 const primaryBadgeAppearance = "primary";
@@ -130,7 +129,7 @@ const Badge = ({
   ...props
 }) => /* @__PURE__ */ jsxs(BadgeStyled, { ...props, footnoteLink, bottomSpacing, children: [
   icon ? /* @__PURE__ */ jsx(BadgeIconStyled, { name: icon, size: props.size === smallSize ? iconSizeXs : iconSizeSm }) : null,
-  renderInlineRichTextFromOpenText(children),
+  children,
   footnoteLink && /* @__PURE__ */ jsx(FootnoteLink, { ...footnoteLink })
 ] });
 export {

package/dist/index.d.ts

@@ -38,8 +38,6 @@ export * from './components/RichtTextContentful';
 export { default as RichtTextContentful } from './components/RichtTextContentful';
 export * from './components/RichText';
 export { default as RichText } from './components/RichText';
-export * from './components/ResponsiveImage';
-export { default as ResponsiveImage } from './components/ResponsiveImage';
 export * from './components/Rating';
 export { default as Rating } from './components/Rating';
 export * from './components/RadioGroup';
@@ -176,6 +174,8 @@ export * from './components/Body';
 export { default as Body } from './components/Body';
 export * from './components/Badge';
 export { default as Badge } from './components/Badge';
+export * from './components/ArtDirectedImage';
+export { default as ArtDirectedImage } from './components/ArtDirectedImage';
 export * from './components/AccordionGroup';
 export { default as AccordionGroup } from './components/AccordionGroup';
 export * from './components/Accordion';
@@ -204,8 +204,10 @@ export * from './foundations/GlobalStyle';
 export * from './hooks/useViewport';
 export * from './hooks/useThirdPartyConsent';
 export * from './hooks/useReducedMotion';
+export * from './hooks/usePictureComponent';
 export * from './hooks/useMediaQuery';
 export * from './hooks/useLinkComponent';
+export * from './hooks/useImageComponent';
 export * from './hooks/useForcedColors';
 export * from './hooks/useFocusWithin';
 export * from './contentful/renderer';