@vodafone_de/brix-components 7.0.5 → 7.0.7

package/dist/components/Card/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { d as divTagName } from "../../tags-DI6H1biK.js";
+import { d as divTagName } from "../../tags-Bz98Tkqt.js";
 import { a as CardStyled } from "../../styled-CYugcGtx.js";
 import { C } from "../../styled-CYugcGtx.js";
 const Card = ({

package/dist/components/Carousel/components/CarouselContext.d.ts

@@ -1,4 +1,4 @@
-import { FC, MutableRefObject } from 'react';
+import { FC, RefObject } from 'react';
 import { CarouselRuntimeProps } from '../props';
 /**
  * Can either be false to indicate that no button should be rendered
@@ -6,8 +6,7 @@ import { CarouselRuntimeProps } from '../props';
  */
 export type CarouselButton = (() => void) | false;
 export type CarouselState = {
-    ref: MutableRefObject<HTMLDivElement> | undefined;
-    visibleItems: number;
+    ref: RefObject<HTMLDivElement> | undefined;
     interactive: number[];
     goPrev: CarouselButton;
     goNext: CarouselButton;

package/dist/components/Carousel/index.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "@af-utils/scrollend-polyfill";
 import { createContext, useRef, useState, useEffect, useContext, createElement } from "react";
 import { useFocusWithin } from "../../hooks/useFocusWithin/index.js";
-import { l as liTagName, u as ulTagName } from "../../tags-DI6H1biK.js";
+import { l as liTagName, u as ulTagName } from "../../tags-Bz98Tkqt.js";
 import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
 import { a as CardStyled } from "../../styled-CYugcGtx.js";
@@ -78,7 +78,6 @@ const scrollTo = (element, left, behavior = "smooth") => {
 };
 const initialState = {
   ref: void 0,
-  visibleItems: 1,
   interactive: [0],
   goPrev: false,
   goNext: false,
@@ -99,56 +98,57 @@ const CarouselProvider = ({
   const [scrollSpyIndex, setScrollSpyIndex] = useState(void 0);
   const [interactive, setInteractive] = useState([]);
   const [needsFirstPosition, setNeedsFirstPosition] = useState(activeIndex !== 0);
-  const [itemWidth, setItemWidth] = useState(0);
-  const [visibleItems, setVisibleItems] = useState(1);
+  const [carouselLayoutedAttributes, setCarouselLayoutedAttributes] = useState(void 0);
   const [goPrev, setGoPrev] = useState(false);
   const [goNext, setGoNext] = useState(false);
   const [numberOfIndicators, setNumberOfIndicators] = useState(0);
   const [activeIndicator, setActiveIndicator] = useState(props.items[props.activeIndex].index);
+  const getCarouselLayoutedAttributes = () => {
+    const carouselElement = ref.current;
+    if (!carouselElement) {
+      return;
+    }
+    const itemWidth = carouselElement.querySelector("[data-carousel-item]").offsetWidth;
+    const track = carouselElement.offsetWidth;
+    const numberOfItemsThatFitOnTrack = Math.floor(track / itemWidth);
+    const visibleItems = Math.min(numberOfItemsThatFitOnTrack, props.items.length);
+    if ((carouselLayoutedAttributes == null ? void 0 : carouselLayoutedAttributes.itemWidth) !== itemWidth || (carouselLayoutedAttributes == null ? void 0 : carouselLayoutedAttributes.visibleItems) !== visibleItems) {
+      setCarouselLayoutedAttributes({
+        itemWidth,
+        visibleItems
+      });
+    }
+  };
   useEffect(() => {
+    if (!carouselLayoutedAttributes) {
+      return;
+    }
     if (loop) {
       const update = props.items.filter((item) => !item.ghost).length;
       setNumberOfIndicators(update);
     } else {
-      const update = props.items.filter((item) => !item.ghost).length - visibleItems + 1;
+      const update = props.items.filter((item) => !item.ghost).length - carouselLayoutedAttributes.visibleItems + 1;
       setNumberOfIndicators(update);
     }
-  }, [loop, visibleItems, props.items]);
+  }, [loop, carouselLayoutedAttributes, props.items]);
   useEffect(() => {
-    if (!(ref == null ? void 0 : ref.current)) {
-      return;
-    }
-    if (!itemWidth) {
+    if (!carouselLayoutedAttributes) {
       return;
     }
-    const track = ref == null ? void 0 : ref.current.offsetWidth;
-    setVisibleItems(Math.floor(track / itemWidth));
-  }, [itemWidth]);
-  useEffect(() => {
-    let updateInteractive = [...Array(visibleItems).keys()].map((i) => activeIndex + i);
+    let updateInteractive = [...Array(carouselLayoutedAttributes.visibleItems).keys()].map((i) => activeIndex + i);
     if (focus) {
       updateInteractive = [...Array(props.items.length).keys()];
     }
     setInteractive(updateInteractive);
-  }, [focus, activeIndex, visibleItems, props.items]);
+  }, [focus, activeIndex, carouselLayoutedAttributes, props.items]);
   useEffect(() => {
     if (!(ref == null ? void 0 : ref.current)) {
       return;
     }
-    const handleResize = () => {
-      if (!window) {
-        return;
-      }
-      if (!(ref == null ? void 0 : ref.current)) {
-        return;
-      }
-      const itemWidth2 = ref.current.querySelector("[data-carousel-item]").offsetWidth;
-      setItemWidth(itemWidth2);
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
+    window.addEventListener("resize", getCarouselLayoutedAttributes);
+    getCarouselLayoutedAttributes();
     return () => {
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("resize", getCarouselLayoutedAttributes);
     };
   }, [ref.current]);
   useEffect(() => {
@@ -156,25 +156,31 @@ const CarouselProvider = ({
     if (!(ref == null ? void 0 : ref.current)) {
       return;
     }
-    if (!itemWidth) {
+    if (!carouselLayoutedAttributes) {
       return;
     }
     const handleScroll = (event) => {
+      if (!carouselLayoutedAttributes) {
+        return;
+      }
       const left = event.target.scrollLeft;
-      const ucurrent = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
+      const ucurrent = getItemByScroll(left - carouselLayoutedAttributes.itemWidth / 2, carouselLayoutedAttributes.itemWidth, props.items);
       setScrollSpyIndex(ucurrent);
     };
     const handleScrollend = (event) => {
+      if (!carouselLayoutedAttributes) {
+        return;
+      }
       const left = event.target.scrollLeft;
-      let updateActiveIndex = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
+      let updateActiveIndex = getItemByScroll(left - carouselLayoutedAttributes.itemWidth / 2, carouselLayoutedAttributes.itemWidth, props.items);
       if (loop) {
         const ghosts = [];
-        for (let i = 0, x = visibleItems; i < x; i += 1) {
+        for (let i = 0, x = carouselLayoutedAttributes.visibleItems; i < x; i += 1) {
           ghosts.push(props.items[i + updateActiveIndex].ghost);
         }
         if (!ghosts.includes(false)) {
           updateActiveIndex = props.items.findIndex((item) => item.index === props.items[updateActiveIndex].index && !item.ghost);
-          const left2 = updateActiveIndex * itemWidth;
+          const left2 = updateActiveIndex * carouselLayoutedAttributes.itemWidth;
           const behavior = "instant";
           scrollTo(ref.current, left2, behavior);
         }
@@ -192,31 +198,34 @@ const CarouselProvider = ({
       (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("scroll", handleScroll);
       (_b2 = ref.current) == null ? void 0 : _b2.removeEventListener("scrollend", handleScrollend);
     };
-  }, [ref.current, itemWidth, visibleItems, props.items]);
+  }, [ref.current, carouselLayoutedAttributes, props.items]);
   useEffect(() => {
     if (!ref.current) {
       return;
     }
+    if (!carouselLayoutedAttributes) {
+      return;
+    }
     if (scrollSpyIndex) {
       return;
     }
     if (activeIndex === scrollSpyIndex) {
       return;
     }
-    const left = activeIndex * itemWidth;
+    const left = activeIndex * carouselLayoutedAttributes.itemWidth;
     const behavior = needsFirstPosition ? "instant" : "smooth";
     scrollTo(ref.current, left, behavior);
-  }, [activeIndex, scrollSpyIndex, ref.current, itemWidth]);
+  }, [activeIndex, scrollSpyIndex, ref.current, carouselLayoutedAttributes]);
   useEffect(() => {
-    if (!props.onUpdate) {
+    if (!props.onUpdate || !carouselLayoutedAttributes) {
       return;
     }
     const visibleIndexes = [];
-    for (let i = 0, x = visibleItems; i < x; i += 1) {
+    for (let i = 0, x = carouselLayoutedAttributes.visibleItems; i < x; i += 1) {
       visibleIndexes.push(props.items[i + activeIndex].index);
     }
     props.onUpdate(visibleIndexes);
-  }, [activeIndex]);
+  }, [activeIndex, carouselLayoutedAttributes]);
   const movePrev = () => {
     const prev = activeIndex > 0 ? activeIndex - 1 : props.items.length - 1;
     setActiveIndex(prev);
@@ -241,7 +250,6 @@ const CarouselProvider = ({
   return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: {
     state: {
       ref,
-      visibleItems,
       interactive,
       goPrev,
       goNext,
@@ -403,7 +411,7 @@ const CarouselIndicator = () => {
       activeIndicator
     }
   } = useContext(CarouselContext);
-  if (!numberOfIndicators) {
+  if (!numberOfIndicators || 1 >= numberOfIndicators) {
     return null;
   }
   const indicators = [...Array(numberOfIndicators).keys()];
@@ -487,6 +495,9 @@ const Carousel = ({
   gridConfig = carouselDefaultGridConfig,
   ...props
 }) => {
+  if (0 === items.length) {
+    return null;
+  }
   activeIndex = activeIndex ? activeIndex : 0;
   activeIndex = loop ? activeIndex + items.length : activeIndex;
   const loopableItems = getItems(items, loop);

package/dist/components/DemoBox/index.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import IconSnippet from "../IconSnippet/index.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
-import { g as getUid } from "../../index-DR3e19BE.js";
+import { g as getUid } from "../../index-D2J2U7wz.js";
 import { D as DemoBoxStyled } from "../../styled-ODPFCF1a.js";
 const heading = {
   component: "Heading",
@@ -15,7 +15,9 @@ const richText = {
   html: "<p>This is a placeholder.</p>",
   uid: getUid()
 };
-const DemoBox = (props) => /* @__PURE__ */ jsx(DemoBoxStyled, { ...props, children: /* @__PURE__ */ jsx(IconSnippet, { size: "small", icon: "Sync", bottomSpacing: "None", contents: [heading, richText] }) });
+const DemoBox = (props) => /* @__PURE__ */ jsx(DemoBoxStyled, { ...props, children: /* @__PURE__ */ jsx(IconSnippet, { size: "sm", icon: {
+  name: "Sync"
+}, bottomSpacing: "None", contents: [heading, richText] }) });
 export {
   DemoBox as default
 };

package/dist/components/DiscoveryCard/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-import { R as RichText } from "../../index-ClmKFtnx.js";
+import { R as RichText } from "../../index-D2J2U7wz.js";
 import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { b as textHeadingSm } from "../../HeadingSize-CfCRn3Lh.js";
 import { s as spacingMd, b as spacingNone, a as spacingXs, c as spacingSm } from "../../Spacing-D0HQH9YJ.js";

package/dist/components/Grid/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { l as liTagName, d as divTagName } from "../../tags-DI6H1biK.js";
+import { l as liTagName, d as divTagName } from "../../tags-Bz98Tkqt.js";
 import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import { Children, cloneElement } from "react";
 import { G as GridStyled } from "../../styled-ZpQohvyx.js";

package/dist/components/GridItem/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { d as divTagName } from "../../tags-DI6H1biK.js";
+import { d as divTagName } from "../../tags-Bz98Tkqt.js";
 import { G as GridItemStyled } from "../../styled-Cqp2oSjW.js";
 const GridItem = ({
   sm = 12,

package/dist/components/Heading/index.js

@@ -4,7 +4,7 @@ import FootnoteLink from "../FootnoteLink/index.js";
 import { a as spacingXs, c as spacingSm, s as spacingMd, f as spacingLg, d as spacingXl } from "../../Spacing-D0HQH9YJ.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
-import { h as h5TagName, a as h4TagName, b as h3TagName, c as h2TagName, e as h1TagName, f as headingHtmlTags } from "../../tags-DI6H1biK.js";
+import { h as h5TagName, a as h4TagName, b as h3TagName, c as h2TagName, e as h1TagName, f as headingHtmlTags } from "../../tags-Bz98Tkqt.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
 import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";

package/dist/components/IconSnippet/index.js

@@ -4,9 +4,9 @@ import { df as IconLoader, it as iconSizeLg, iq as iconSize3xl, iv as iconSizeSm
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import InlineLink from "../InlineLink/index.js";
-import { R as RichText } from "../../index-ClmKFtnx.js";
-import { d as divTagName } from "../../tags-DI6H1biK.js";
-import { a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { R as RichText } from "../../index-D2J2U7wz.js";
+import { d as divTagName } from "../../tags-Bz98Tkqt.js";
+import { a as spacingXs, s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import Link from "../Link/index.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
@@ -95,10 +95,11 @@ const IconSnippet = ({
   iconPosition = iconSnippetPositionLeft,
   iconAlign = iconSnippetAlignTop,
   tag = divTagName,
+  icon,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(IconSnippetStyled, { ...props, iconPosition, iconAlign, as: tag, children: [
-    /* @__PURE__ */ jsx(IconLoaderStyled, { size: size === iconSnippetSizeLarge ? iconSizeLg : size === iconSnippetSize3Xl ? iconSize3xl : iconSizeSm, name: props.icon }),
+    /* @__PURE__ */ jsx(IconLoaderStyled, { ...icon, bottomSpacing: spacingNone, size: size === iconSnippetSizeLarge ? iconSizeLg : size === iconSnippetSize3Xl ? iconSize3xl : iconSizeSm }),
     /* @__PURE__ */ jsx(IconSnippetContentStyled, { as: tag, iconPosition, children: getContents(contents) })
   ] });
 };

package/dist/components/IconSnippet/props.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@vfde-react/inline-icon-library';
+import { IconLoaderProps } from '@vfde-react/inline-icon-library';
 import { HTMLAttributes } from 'react';
 import { BodyProps } from '../Body';
 import { HeadingProps } from '../Heading';
@@ -28,7 +28,7 @@ export interface IconSnippetProps extends PatternProps, HTMLAttributes<HTMLDivEl
     /**
      * Icon
      */
-    icon: IconName;
+    icon: Omit<IconLoaderProps, 'size' | 'bottomSpacing'>;
     /**
      * contents must be an array containing any combination of HeadingProps, BodyProps, RichTextProps and/or InlineLinkProps;
      */

package/dist/components/IconSnippetList/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
 import IconSnippet from "../IconSnippet/index.js";
-import { u as ulTagName, l as liTagName } from "../../tags-DI6H1biK.js";
+import { u as ulTagName, l as liTagName } from "../../tags-Bz98Tkqt.js";
 import { b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 const IconSnippetList = ({
   component: _component,

package/dist/components/ImageHeader/index.js

@@ -4,12 +4,11 @@ import Body from "../Body/index.js";
 import { b as fontWeightLight } from "../../FontWeight-DEBGHbtO.js";
 import { s as spacingMd, c as spacingSm, d as spacingXl, a as spacingXs, e as spacing2Xs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
-import { g as getUid } from "../../index-DR3e19BE.js";
+import { g as getUid, R as RichText } from "../../index-D2J2U7wz.js";
 import Button from "../Button/index.js";
 import Container from "../Container/index.js";
 import Heading, { headingAlignCenter } from "../Heading/index.js";
 import { P as Price, b as priceSizeSm } from "../../index-WLBo71sp.js";
-import { R as RichText } from "../../index-ClmKFtnx.js";
 import styled from "styled-components";
 import { B as Badge } from "../../index-CKvLGUdD.js";
 import ButtonGroup from "../ButtonGroup/index.js";

package/dist/components/Legend/index.js

@@ -3,7 +3,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import IconSnippet, { iconSnippetAlignCenter } from "../IconSnippet/index.js";
-import { R as RichText } from "../../index-ClmKFtnx.js";
+import { R as RichText } from "../../index-D2J2U7wz.js";
 import styled from "styled-components";
 const LegendStyled = styled.legend.withConfig({
   displayName: "LegendStyled",

package/dist/components/LinkList/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { u as ulTagName, l as liTagName } from "../../tags-DI6H1biK.js";
+import { u as ulTagName, l as liTagName } from "../../tags-Bz98Tkqt.js";
 import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import LinkListItem, { linkListItemVariantVertical, linkListItemVariantHorizontal } from "../LinkListItem/index.js";
 import styled from "styled-components";

package/dist/components/LinkListItem/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { iu as iconSizeMd, df as IconLoader } from "../../index-Cbojl4_Q.js";
-import { s as spanTagName } from "../../tags-DI6H1biK.js";
+import { s as spanTagName } from "../../tags-Bz98Tkqt.js";
 import { s as spacingMd, a as spacingXs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { B as Badge } from "../../index-CKvLGUdD.js";

package/dist/components/MediaText/index.js

@@ -1,41 +1,39 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import Body from "../Body/index.js";
 import Flex from "../Flex/index.js";
 import FlexItem from "../FlexItem/index.js";
 import Heading, { headingAlignLeft } from "../Heading/index.js";
 import Image, { aspectRatio16_9 } from "../Image/index.js";
 import Link from "../Link/index.js";
+import { g as getUid, R as RichText } from "../../index-D2J2U7wz.js";
 import YoutubeVideo from "../YoutubeVideo/index.js";
-import { u as ulTagName, d as divTagName, l as liTagName } from "../../tags-DI6H1biK.js";
+import { p as pTagName, u as ulTagName, d as divTagName, l as liTagName } from "../../tags-Bz98Tkqt.js";
 import { a as fontWeightRegular } from "../../FontWeight-DEBGHbtO.js";
 import { b as textHeadingSm, t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { s as spacingMd, e as spacing2Xs, c as spacingSm, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
-import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
 import { u as useViewport } from "../../index-Cs0Hw0dj.js";
-import { g as getUid } from "../../index-DR3e19BE.js";
 import styled from "styled-components";
 import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 import { a as flexOrientationVertical, f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-B0YKfXTz.js";
-const mediaTextOrientationTop = "top";
-const mediaTextOrientationLeft = "left";
-const mediaTextOrientationRight = "right";
+const mediaTextPositionTop = "top";
+const mediaTextPositionLeft = "left";
+const mediaTextPositionRight = "right";
 const MediaTextStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "MediaTextStyled",
   componentId: "sc-zs2pry-0"
 })(({
-  orientation,
+  position,
   bottomSpacing = spacingMd
 }) => ({
   display: "flex",
   flexDirection: "column",
   ...viewport.md({
-    flexDirection: orientation === "top" ? "column" : orientation === "left" ? "row" : "row-reverse"
+    flexDirection: position === "top" ? "column" : position === "left" ? "row" : "row-reverse"
   }),
   ...getBottomSpacing({
     bottomSpacing
@@ -46,7 +44,7 @@ const MediaTextMediaStyled = styled.div.withConfig({
   displayName: "MediaTextMediaStyled",
   componentId: "sc-zs2pry-1"
 })(({
-  orientation,
+  position,
   bottomSpacing = spacingMd
 }) => ({
   flex: 1,
@@ -54,7 +52,7 @@ const MediaTextMediaStyled = styled.div.withConfig({
     bottomSpacing
   }),
   ...viewport.md({
-    ...orientation != mediaTextOrientationTop ? {
+    ...position != mediaTextPositionTop ? {
       marginBottom: 0
     } : {}
   })
@@ -64,24 +62,24 @@ const MediaTextContentStyled = styled.div.withConfig({
   displayName: "MediaTextContentStyled",
   componentId: "sc-zs2pry-2"
 })(({
-  orientation
+  position
 }) => ({
   flex: 1,
   ...viewport.md({
-    ...orientation === "left" && {
+    ...position === "left" && {
       paddingLeft: getSpacing(spacingMd)
     },
-    ...orientation === "right" && {
+    ...position === "right" && {
       paddingRight: getSpacing(spacingMd)
     }
   })
 }));
 const MediaText = ({
   media,
-  orientation = mediaTextOrientationLeft,
+  position = mediaTextPositionLeft,
   heading,
   subline,
-  body,
+  richText,
   action,
   ...props
 }) => {
@@ -96,7 +94,7 @@ const MediaText = ({
     if (!media2) return null;
     switch (media2.component) {
       case "Image":
-        return /* @__PURE__ */ jsx(Image, { ...media2, aspectRatio: aspectRatio16_9, bottomSpacing: spacingNone });
+        return /* @__PURE__ */ jsx(Image, { ...media2, aspectRatio: media2.aspectRatio ?? aspectRatio16_9, bottomSpacing: spacingNone });
       case "YoutubeVideo":
         return /* @__PURE__ */ jsx(YoutubeVideo, { ...media2, bottomSpacing: spacingNone });
       default:
@@ -105,19 +103,19 @@ const MediaText = ({
     }
   };
   const mediaContent = useMemo(() => renderMedia(media), [media]);
-  return /* @__PURE__ */ jsxs(MediaTextStyled, { orientation, ...props, children: [
-    /* @__PURE__ */ jsx(MediaTextMediaStyled, { orientation, children: mediaContent }),
-    /* @__PURE__ */ jsxs(MediaTextContentStyled, { orientation, children: [
+  return /* @__PURE__ */ jsxs(MediaTextStyled, { position, ...props, children: [
+    /* @__PURE__ */ jsx(MediaTextMediaStyled, { position, children: mediaContent }),
+    /* @__PURE__ */ jsxs(MediaTextContentStyled, { position, children: [
       /* @__PURE__ */ jsx(Heading, { ...heading, id: headingId, align: headingAlignLeft, size: textHeadingSm, bottomSpacing: headingSpacing }),
-      subline && /* @__PURE__ */ jsx(Heading, { ...subline, id: sublineId, align: headingAlignLeft, size: textHeadingXs, weight: fontWeightRegular, bottomSpacing: spacingMd }),
-      /* @__PURE__ */ jsx(Body, { ...body, size: textBodyMd, bottomSpacing: spacingMd }),
+      subline && /* @__PURE__ */ jsx(Heading, { ...subline, id: sublineId, align: headingAlignLeft, size: textHeadingXs, weight: fontWeightRegular, tag: pTagName, bottomSpacing: spacingMd }),
+      /* @__PURE__ */ jsx(RichText, { ...richText, bottomSpacing: spacingMd }),
       /* @__PURE__ */ jsx(Flex, { bottomSpacing: spacingMd, gapSpacing: spacingSm, justify: flexJustifyStart, orientation: "sm" === viewport2 ? flexOrientationVertical : flexOrientationHorizontal, as: actionFlexAs, children: action && action.map((action2) => /* @__PURE__ */ jsx(FlexItem, { as: linkFlexItemAs, bottomSpacing: spacingNone, children: /* @__PURE__ */ jsx(Link, { ...action2 }) }, action2.uid)) })
     ] })
   ] });
 };
 export {
   MediaText as default,
-  mediaTextOrientationLeft,
-  mediaTextOrientationRight,
-  mediaTextOrientationTop
+  mediaTextPositionLeft,
+  mediaTextPositionRight,
+  mediaTextPositionTop
 };

package/dist/components/MediaText/props.d.ts

@@ -1,14 +1,14 @@
 import { HTMLAttributes } from 'react';
-import { BodyProps } from '../Body/props';
 import { HeadingProps } from '../Heading/props';
 import { ImageProps } from '../Image';
 import { LinkProps } from '../Link';
+import { RichTextProps } from '../RichText';
 import { YoutubeVideoProps } from '../YoutubeVideo';
 import { PatternProps } from '../../foundations/PatternProps';
-export declare const mediaTextOrientationTop = "top";
-export declare const mediaTextOrientationLeft = "left";
-export declare const mediaTextOrientationRight = "right";
-export type MediaTextOrientation = typeof mediaTextOrientationTop | typeof mediaTextOrientationLeft | typeof mediaTextOrientationRight;
+export declare const mediaTextPositionTop = "top";
+export declare const mediaTextPositionLeft = "left";
+export declare const mediaTextPositionRight = "right";
+export type MediaTextPosition = typeof mediaTextPositionTop | typeof mediaTextPositionLeft | typeof mediaTextPositionRight;
 export interface MediaTextProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Pin component's name from string to the concrete name
@@ -16,13 +16,13 @@ export interface MediaTextProps extends PatternProps, HTMLAttributes<HTMLDivElem
     component?: 'MediaText';
     /**
      * media prop can be either an Image or a YoutubeVideo
-     * The aspect ratio is always 16 to 1. This must be taken into account when selecting the asset.
+     * The aspect ratio is by default 16 to 9.
      */
     media: Omit<ImageProps, 'bottomSpacing'> | Omit<YoutubeVideoProps, 'bottomSpacing'>;
     /**
-     * MediaText media can be orientated top, left or right.
+     * MediaText media can be positioned on top, left or right.
      */
-    orientation?: MediaTextOrientation;
+    position?: MediaTextPosition;
     /**
      * Heading
      */
@@ -30,11 +30,11 @@ export interface MediaTextProps extends PatternProps, HTMLAttributes<HTMLDivElem
     /**
      * Subline
      */
-    subline?: Omit<HeadingProps, 'size' | 'weight' | 'bottomSpacing'>;
+    subline?: Omit<HeadingProps, 'size' | 'weight' | 'tag' | 'bottomSpacing'>;
     /**
      * Body
      */
-    body: Omit<BodyProps, 'size' | 'weight' | 'bottomSpacing'>;
+    richText: Omit<RichTextProps, 'bottomSpacing'>;
     /**
      * Action, list of links
      */

package/dist/components/MediaText/styled.d.ts

@@ -1,4 +1,4 @@
 import { MediaTextProps } from './props';
-export declare const MediaTextStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "orientation" | "bottomSpacing">>> & string;
-export declare const MediaTextMediaStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "orientation" | "bottomSpacing">>> & string;
-export declare const MediaTextContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "orientation">>> & string;
+export declare const MediaTextStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "bottomSpacing" | "position">>> & string;
+export declare const MediaTextMediaStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "bottomSpacing" | "position">>> & string;
+export declare const MediaTextContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "position">>> & string;

package/dist/components/Notification/index.js

@@ -7,7 +7,7 @@ import ButtonGroup from "../ButtonGroup/index.js";
 import Flex from "../Flex/index.js";
 import Heading from "../Heading/index.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-ClmKFtnx.js";
+import { R as RichText } from "../../index-D2J2U7wz.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
 import { e as colorBorderCritical, f as colorBorderWarning, d as colorBorderSuccess, k as colorBorderInformation } from "../../BorderColor-BummoQ1-.js";

package/dist/components/Rating/assets/StarSVG.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
-declare const StarSVG: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+import { default as React } from 'react';
+declare const StarSVG: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.SVGProps<SVGSVGElement>, never>> & string & Omit<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default StarSVG;

package/dist/components/Rating/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
-import { u as useViewport, v as viewportSm } from "../../index-Cs0Hw0dj.js";
 import Fieldset from "../Fieldset/index.js";
 import styled from "styled-components";
+import { u as useViewport, v as viewportSm } from "../../index-Cs0Hw0dj.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
@@ -14,9 +14,22 @@ import { c as colorBorderFocus, i as colorBorderSelected, a as colorBorderNeutra
 import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
 import { b as colorObjectSelected } from "../../ObjectColor-BZDBuV8H.js";
 import { a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
-const StarSVG = (props) => /* @__PURE__ */ jsx("svg", { style: {
-  display: "inline-block"
-}, width: "26", height: "25", viewBox: "0 0 26 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M1 9.95223L9.26911 8.58599L12.8296 1L16.6847 8.44108L25 9.48408L19.1147 15.449L20.6911 23.6799L13.199 19.9252L5.85987 23.9682L7.11465 15.6831L1 9.95223Z", fill: "white", stroke: "#7E7E7E", strokeLinecap: "round", strokeLinejoin: "round" }) });
+const StarSVGBase = (props) => {
+  const viewport = useViewport();
+  let width = 32;
+  let height = 30.624;
+  if (viewport === viewportSm) {
+    width = 24;
+    height = 22.968;
+  }
+  return /* @__PURE__ */ jsx("svg", { style: {
+    display: "inline-block"
+  }, width, height, viewBox: "0 0 26 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M1 9.95223L9.26911 8.58599L12.8296 1L16.6847 8.44108L25 9.48408L19.1147 15.449L20.6911 23.6799L13.199 19.9252L5.85987 23.9682L7.11465 15.6831L1 9.95223Z", fill: "white", stroke: "#7E7E7E", strokeLinecap: "round", strokeLinejoin: "round" }) });
+};
+const StarSVG = styled(StarSVGBase).withConfig({
+  displayName: "StarSVG",
+  componentId: "sc-iheyat-0"
+})([""]);
 const getSvgPathStyles = (props) => ({
   fill: props.selected ? getObjectColor(colorObjectSelected) : props.isInHoverRange ? getHoverColor(colorBackgroundNeutral) : "transparent",
   strokeWidth: "1px",
@@ -85,22 +98,9 @@ const HiddenRadioStyled = styled.input.withConfig({
   whiteSpace: "nowrap",
   width: "1px"
 });
-const useStarSize = () => {
-  const viewport = useViewport();
-  if (viewport === viewportSm) {
-    return {
-      width: 24,
-      height: 22.968
-    };
-  }
-  return {
-    width: 32,
-    height: 30.624
-  };
-};
 const Rating = ({
   value,
-  onValueChange,
+  onUpdate,
   className,
   groupName,
   uid,
@@ -109,7 +109,6 @@ const Rating = ({
 }) => {
   const [internalValue, setInternalValue] = useState(value ?? 0);
   const [hoverValue, setHoverValue] = useState(null);
-  const starSize = useStarSize();
   useEffect(() => {
     if (value !== void 0) {
       setInternalValue(value);
@@ -118,8 +117,8 @@ const Rating = ({
   const handleChange = (event) => {
     const newValue = Number(event.target.value);
     setInternalValue(newValue);
-    if (onValueChange) {
-      onValueChange(newValue);
+    if (onUpdate) {
+      onUpdate(newValue);
     }
   };
   const handleMouseEnter = (index) => {
@@ -131,8 +130,8 @@ const Rating = ({
   const handleClick = (starValue) => {
     if (starValue === internalValue) {
       setInternalValue(0);
-      if (onValueChange) {
-        onValueChange(0);
+      if (onUpdate) {
+        onUpdate(0);
       }
     }
   };
@@ -142,7 +141,7 @@ const Rating = ({
     const isInHoverRange = hoverValue !== null && starValue <= hoverValue;
     return /* @__PURE__ */ jsxs(StarLabelStyled, { selected: starValue <= internalValue, isInHoverRange, htmlFor: `${uid}-star-${starValue}`, onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, "aria-label": `${starValue} von 5 Sternen`, children: [
       /* @__PURE__ */ jsx(HiddenRadioStyled, { type: "radio", id: `${uid}-star-${starValue}`, name: groupName || uid, value: starValue, checked: starValue === internalValue, onChange: handleChange, onClick: () => handleClick(starValue) }),
-      /* @__PURE__ */ jsx(StarSVG, { width: starSize.width, height: starSize.height })
+      /* @__PURE__ */ jsx(StarSVG, {})
     ] }, `star-${starValue}-${uid}`);
   }) }) });
 };

package/dist/components/Rating/props.d.ts

@@ -2,7 +2,7 @@ import { FieldsetSharedProps } from '../Fieldset';
 /**
  * Props for the Rating component
  */
-export interface RatingProps extends Omit<FieldsetSharedProps, 'status' | 'errorMessage' | 'disabled'> {
+export interface RatingProps extends Omit<FieldsetSharedProps, 'status' | 'errorMessage' | 'disabled' | 'helperText'> {
     /**
      * The current rating value (number of stars selected)
      */
@@ -10,7 +10,7 @@ export interface RatingProps extends Omit<FieldsetSharedProps, 'status' | 'error
     /**
      * Callback fired when the rating value changes
      */
-    onValueChange?: (value: number) => void;
+    onUpdate?: (value: number) => void;
     /**
      * Optional group name to identify the rating group for accessibility
      */

package/dist/components/RichText/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
 import "react";
-import { R } from "../../index-ClmKFtnx.js";
+import { R } from "../../index-D2J2U7wz.js";
 export {
   R as default
 };

package/dist/components/SuggestInput/index.js

@@ -11,7 +11,7 @@ import { I as InputWrapperStyled, a as InputStyled } from "../../styled-03irSJOQ
 import { c as spacingSm, a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import Body from "../Body/index.js";
-import { g as strongTagName } from "../../tags-DI6H1biK.js";
+import { g as strongTagName } from "../../tags-Bz98Tkqt.js";
 import styled from "styled-components";
 import Card from "../Card/index.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";

package/dist/components/TextList/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
-import { a, T } from "../../index-ClmKFtnx.js";
-import "../../tags-DI6H1biK.js";
+import { a, T } from "../../index-D2J2U7wz.js";
+import "../../tags-Bz98Tkqt.js";
 import "../../Spacing-D0HQH9YJ.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {

package/dist/{index-ClmKFtnx.js → index-D2J2U7wz.js}

@@ -5,7 +5,7 @@ import Body from "./components/Body/index.js";
 import FootnoteLink from "./components/FootnoteLink/index.js";
 import Heading from "./components/Heading/index.js";
 import InlineLink from "./components/InlineLink/index.js";
-import { f as headingHtmlTags, o as olTagName, g as strongTagName, i as supTagName, u as ulTagName } from "./tags-DI6H1biK.js";
+import { f as headingHtmlTags, o as olTagName, g as strongTagName, i as supTagName, u as ulTagName } from "./tags-Bz98Tkqt.js";
 import { s as spacingMd, b as spacingNone } from "./Spacing-D0HQH9YJ.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
@@ -17,7 +17,10 @@ import { a as fontWeightRegular } from "./FontWeight-DEBGHbtO.js";
 import { a as textBodySm, t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
 import { f as filterProps } from "./filterProps-Cewck8OH.js";
 import { t as textHeadingXs, b as textHeadingSm, a as textHeadingMd, c as textHeadingLg, d as textHeadingXl } from "./HeadingSize-CfCRn3Lh.js";
-import { g as getUid } from "./index-DR3e19BE.js";
+import { v4 } from "uuid";
+const getUid = () => {
+  return v4();
+};
 const mapSizeToTag = {
   h1: textHeadingXl,
   h2: textHeadingLg,
@@ -160,5 +163,6 @@ const TextList = ({
 export {
   RichText as R,
   TextList as T,
-  TextListItem as a
+  TextListItem as a,
+  getUid as g
 };

package/dist/index.js

@@ -2,7 +2,7 @@ import { default as default2, YoutubeVideoIframeStyled, YoutubeVideoStyled } fro
 import { default as default3 } from "./components/Tray/index.js";
 import { default as default4 } from "./components/TimeInput/index.js";
 import { default as default5 } from "./components/Textarea/index.js";
-import { R, T, a } from "./index-ClmKFtnx.js";
+import { R, T, a } from "./index-D2J2U7wz.js";
 import { P, T as T2, c, i, g, f, h, p, a as a2, e, d, b } from "./index-WLBo71sp.js";
 import { default as default6 } from "./components/Switch/index.js";
 import { default as default7 } from "./components/SuggestInput/index.js";
@@ -17,7 +17,7 @@ import { default as default14 } from "./components/ProductCard/index.js";
 import { default as default15 } from "./components/PickerGroup/index.js";
 import { default as default16, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
 import { default as default17, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
-import { default as default18, mediaTextOrientationLeft, mediaTextOrientationRight, mediaTextOrientationTop } from "./components/MediaText/index.js";
+import { default as default18, mediaTextPositionLeft, mediaTextPositionRight, mediaTextPositionTop } from "./components/MediaText/index.js";
 import { default as default19 } from "./components/LoadingSpinner/index.js";
 import { default as default20, linkListItemVariantHorizontal, linkListItemVariantVertical } from "./components/LinkListItem/index.js";
 import { default as default21, linkListVariantColumn, linkListVariantRow } from "./components/LinkList/index.js";
@@ -268,9 +268,9 @@ export {
   linkListItemVariantVertical,
   linkListVariantColumn,
   linkListVariantRow,
-  mediaTextOrientationLeft,
-  mediaTextOrientationRight,
-  mediaTextOrientationTop,
+  mediaTextPositionLeft,
+  mediaTextPositionRight,
+  mediaTextPositionTop,
   m as mediumMediaQuery,
   noReducedMotion,
   notificationStatusError,

package/dist/{tags-DI6H1biK.js → tags-Bz98Tkqt.js}

@@ -5,6 +5,7 @@ const h4TagName = "h4";
 const h5TagName = "h5";
 const h6TagName = "h6";
 const headingHtmlTags = [h1TagName, h2TagName, h3TagName, h4TagName, h5TagName, h6TagName];
+const pTagName = "p";
 const divTagName = "div";
 const spanTagName = "span";
 const strongTagName = "strong";
@@ -24,6 +25,7 @@ export {
   supTagName as i,
   liTagName as l,
   olTagName as o,
+  pTagName as p,
   spanTagName as s,
   ulTagName as u
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "7.0.5",
+  "version": "7.0.7",
   "exports": {
     "./package.json": "./package.json",
     ".": {

package/dist/components/Carousel/utils/useScrollSpy.d.ts

@@ -1,2 +0,0 @@
-import { CarouselState } from '../components/CarouselContext';
-export declare const useScrollSpy: (carouselState: CarouselState) => number;

package/dist/index-DR3e19BE.js

@@ -1,7 +0,0 @@
-import { v4 } from "uuid";
-const getUid = () => {
-  return v4();
-};
-export {
-  getUid as g
-};