@vodafone_de/brix-components 9.0.5 → 10.0.0

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';