@vodafone_de/brix-components 7.1.8 → 7.1.9

package/dist/contentful/live-preview-renderer/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useContentfulLiveUpdates, ContentfulLivePreviewProvider } from "@contentful/live-preview/react";
-import { m as mapContentToComponents } from "../../mapContentToComponents-DLxIwtHo.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-bL4ms1AC.js";
 const BrixLiveRendererComponents = ({
   data
 }) => {

package/dist/contentful/renderer/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import LivePreviewRenderer from "../live-preview-renderer/index.js";
-import { m as mapContentToComponents } from "../../mapContentToComponents-DLxIwtHo.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-bL4ms1AC.js";
 const Renderer = ({
   content,
   isDraftMode

package/dist/{cssVars-CR3xqdPx.js → cssVars-_wntC-Ac.js}

@@ -1,6 +1,6 @@
 import { css } from "styled-components";
-import { l as loadingSpinnerOverlayCssVar, j as loadingSpinnerOverlays } from "./styled-Du4LgXoA.js";
-import { c as breakpoint_medium, a as breakpoint_large } from "./index-Ck2bCrhT.js";
+import { l as loadingSpinnerOverlayCssVar, j as loadingSpinnerOverlays } from "./styled-D_F38PuI.js";
+import { b as breakpoint_medium, a as breakpoint_large } from "./breakpoint-CzBSbbY7.js";
 const colorVodafoneRed = "colorVodafoneRed";
 const colorVodafoneRedTint = "colorVodafoneRedTint";
 const colorRed = "colorRed";

package/dist/filterProps-CPul3CC8.js

@@ -0,0 +1,17 @@
+const propsNotPassToDomDefault = ["accordionType", "activeId", "activeIndex", "aspectRatio", "setActiveId", "align", "animated", "appearance", "aspectRatio", "autoLayout", "apiKey", "badge", "borderBottom", "bottomSpacing", "buttonLink", "buttons", "coloringMode", "colorSwatch", "component", "contentGridDesktopColumns", "corners", "coversFullPage", "description", "elevation", "expanded", "filterItems", "footnote", "gapSpacing", "grow", "handleOnClick", "handleOnToogle", "hasOverlay", "heading", "heightSm", "heightMd", "heightLg", "horizontalAlignment", "icon", "iconAlign", "iconName", "iconPosition", "image", "images", "internal", "isActive", "isChecked", "isDisabled", "isFullscreen", "isInHoverRange", "isLastItemInList", "isOpen", "isOrdered", "isSelected", "isTransparentBackground", "items", "jumpToClickedItem", "justify", "justifyHorizontal", "label", "lg", "loadingSpinnerChild", "mapId", "md", "message", "more", "needsBorder", "nextAriaLabel", "notificationType", "objectFit", "objectPosition", "offset", "onUpdate", "openMultiple", "orientation", "padding", "prefix", "prefixWeight", "prevAriaLabel", "price", "productId", "promoPrice", "screenReaderInstruction", "showList", "size", "sm", "sources", "spacing", "spinnerType", "status", "stretch", "strikePrice", "suffix", "tag", "textContent", "uid", "variant", "verticalPadding", "viewportHeight", "weight", "width"];
+const filterProps = (propsNotPassToDom = []) => {
+  const shouldForwardProp = (prop) => {
+    if ("string" !== typeof prop) {
+      return false;
+    }
+    return ![...propsNotPassToDom, ...propsNotPassToDomDefault].includes(prop);
+  };
+  return shouldForwardProp;
+};
+const filterPropsForUnstyledComponent = (props) => {
+  return Object.fromEntries(Object.entries(props).filter(([key]) => !propsNotPassToDomDefault.includes(key)));
+};
+export {
+  filterProps as a,
+  filterPropsForUnstyledComponent as f
+};

package/dist/foundations/GlobalStyle/index.js

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

package/dist/foundations/media-query/viewport/index.js

@@ -1,6 +1,26 @@
-import { v, l, m } from "../../../index-Ck2bCrhT.js";
+import { b as breakpoint_medium, a as breakpoint_large } from "../../../breakpoint-CzBSbbY7.js";
+const mediumMediaQuery = `screen and (min-width: ${breakpoint_medium})`;
+const largeMediaQuery = `screen and (min-width: ${breakpoint_large})`;
+const md = (stylesInViewport) => {
+  return {
+    [`@media ${mediumMediaQuery}`]: {
+      ...stylesInViewport
+    }
+  };
+};
+const lg = (stylesInViewport) => {
+  return {
+    [`@media ${largeMediaQuery}`]: {
+      ...stylesInViewport
+    }
+  };
+};
+const viewport = {
+  md,
+  lg
+};
 export {
-  v as default,
-  l as largeMediaQuery,
-  m as mediumMediaQuery
+  viewport as default,
+  largeMediaQuery,
+  mediumMediaQuery
 };

package/dist/hooks/useImageComponent/index.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType, JSX, ReactNode } from 'react';
+/**
+ * Props of the image component.
+ */
+export type ImageComponentProps = JSX.IntrinsicElements['img'];
+/**
+ * Image component type.
+ */
+export type ImageComponentType = ComponentType<ImageComponentProps>;
+/**
+ * Default image component using `<img>`.
+ */
+export declare const DefaultImage: ImageComponentType;
+/**
+ * Context for providing a custom image component.
+ */
+export declare const ImageContext: import('react').Context<ImageComponentType>;
+/**
+ * Hook to access the current image component from context.
+ */
+export declare const useImageComponent: () => ImageComponentType;
+/**
+ * Provider for ImageContext
+ */
+export declare const ImageProvider: ({ imageComponent, children, }: {
+    imageComponent: ImageComponentType;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useImageComponent/index.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const DefaultImage = (props) => /* @__PURE__ */ jsx("img", { ...props });
+const ImageContext = createContext(DefaultImage);
+const useImageComponent = () => useContext(ImageContext);
+const ImageProvider = ({
+  imageComponent,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(ImageContext, { value: imageComponent, children });
+};
+export {
+  DefaultImage,
+  ImageContext,
+  ImageProvider,
+  useImageComponent
+};

package/dist/hooks/usePictureComponent/index.d.ts

@@ -0,0 +1,25 @@
+import { ComponentType, ReactNode } from 'react';
+import { ArtDirectionImageProps } from '../../components/ArtDirectedImage';
+/**
+ * Picture component type.
+ */
+export type PictureComponentType = ComponentType<ArtDirectionImageProps>;
+/**
+ * Default picture component using `<picture>`.
+ */
+export declare const DefaultPicture: PictureComponentType;
+/**
+ * Context for providing a custom link component.
+ */
+export declare const PictureContext: import('react').Context<PictureComponentType>;
+/**
+ * Hook to access the current link component from context.
+ */
+export declare const usePictureComponent: () => PictureComponentType;
+/**
+ * Provider for LinkContext
+ */
+export declare const PictureProvider: ({ pictureComponent, children, }: {
+    pictureComponent: PictureComponentType;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/usePictureComponent/index.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { a as breakpoint_large, b as breakpoint_medium } from "../../breakpoint-CzBSbbY7.js";
+const DefaultPicture = ({
+  sources,
+  image,
+  ...props
+}) => /* @__PURE__ */ jsxs("picture", { ...props, children: [
+  sources.lg && /* @__PURE__ */ jsx("source", { media: `(min-width: ${breakpoint_large})`, srcSet: sources.lg.src }),
+  sources.md && /* @__PURE__ */ jsx("source", { media: `(min-width: ${breakpoint_medium})`, srcSet: sources.md.src }),
+  sources.sm && /* @__PURE__ */ jsx("source", { media: `(max-width: ${breakpoint_medium})`, srcSet: sources.sm.src }),
+  /* @__PURE__ */ jsx("img", { ...image })
+] });
+const PictureContext = createContext(DefaultPicture);
+const usePictureComponent = () => useContext(PictureContext);
+const PictureProvider = ({
+  pictureComponent,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(PictureContext, { value: pictureComponent, children });
+};
+export {
+  DefaultPicture,
+  PictureContext,
+  PictureProvider,
+  usePictureComponent
+};

package/dist/hooks/useViewport/index.js

@@ -1,6 +1,6 @@
 import "react";
-import "../../index-Ck2bCrhT.js";
-import { u } from "../../index-G2mpsxF7.js";
+import "../../foundations/media-query/viewport/index.js";
+import { u } from "../../index-DKCzYjXw.js";
 import "../useMediaQuery/index.js";
 export {
   u as useViewport

package/dist/{index-CHzok6W_.js → index-BPweURE-.js}

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { b as iconSizeSm } from "./props-7dcsjRUx.js";
-import "./styled-B1bxWqtW.js";
-import { l as leftPosition, a as ButtonIconStyled, b as buttonHeight, p as primaryAppearance } from "./styled-Dgv3RBlg.js";
+import "./styled-DUsRG1Xh.js";
+import { l as leftPosition, a as ButtonIconStyled, b as buttonHeight, p as primaryAppearance } from "./styled-Dk6VS_Sg.js";
 import { useLinkComponent } from "./hooks/useLinkComponent/index.js";
-import { a as filterProps, f as filterPropsForUnstyledComponent } from "./filterProps-BWnAPYBL.js";
+import { a as filterProps, f as filterPropsForUnstyledComponent } from "./filterProps-CPul3CC8.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import { s as sanitizeLinkProps } from "./sanitizeLinkProps-D2Kkovy1.js";
 import styled from "styled-components";
@@ -13,7 +13,7 @@ import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
-import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd } from "./BorderRadius-2LdggXbQ.js";
 import { f as fontWeightRegular } from "./FontWeight-C2pGs7aR.js";
 import { s as spacingNone, b as spacingXs, d as spacingXl, a as spacingMd } from "./Spacing-BMQelJYr.js";
 import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";

package/dist/{index-G2mpsxF7.js → index-DKCzYjXw.js}

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { l as largeMediaQuery, m as mediumMediaQuery } from "./index-Ck2bCrhT.js";
+import { largeMediaQuery, mediumMediaQuery } from "./foundations/media-query/viewport/index.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
 const viewportSm = "sm";
 const viewportMd = "md";

package/dist/{index-DLvMM1Dq.js → index-Vub90geg.js}

@@ -10,7 +10,7 @@ import { getTextDecoration } from "./foundations/token/getTextDecoration/index.j
 import { a as fontWeightBold, f as fontWeightRegular } from "./FontWeight-C2pGs7aR.js";
 import { a as spacingMd, s as spacingNone, b as spacingXs } from "./Spacing-BMQelJYr.js";
 import { g as colorTextCritical, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
-import { a as filterProps } from "./filterProps-BWnAPYBL.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 const priceOrientationHorizontal = "horizontal";
 const priceOrientationVertical = "vertical";

package/dist/{index-CifS-Z_9.js → index-rbdl_kyF.js}

@@ -5,13 +5,13 @@ 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 { T as TableHead, a as TableBody, b as TableFoot } from "./TableHead-C2zQ4jce.js";
-import { T as TableWrapper } from "./TableWrapper-C8SpplcL.js";
+import { T as TableHead, a as TableBody, b as TableFoot } from "./TableHead-Cfn2iQRg.js";
+import { T as TableWrapper } from "./TableWrapper-BrnjxwJz.js";
 import { k as headingHtmlTags, o as olTagName, q as strongTagName, r as supTagName, u as ulTagName } from "./tags-38kBhOn6.js";
 import { s as spacingNone } from "./Spacing-BMQelJYr.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { T as TextListItemStyled, a as TextListStyled } from "./styled-BYYivuzh.js";
-import { a as textHeadingXs, b as textHeadingSm, t as textHeadingMd, c as textHeadingLg, d as textHeadingXl } from "./HeadingSize-CqqUYZWV.js";
+import { T as TextListItemStyled, a as TextListStyled } from "./styled-DoOOutJj.js";
+import { t as textHeadingXs, b as textHeadingSm, a as textHeadingMd, c as textHeadingLg, d as textHeadingXl } from "./HeadingSize-CfCRn3Lh.js";
 import { a as textBodySm } from "./TextBodySize-BcZR9mh2.js";
 const mapSizeToTag = {
   h1: textHeadingXl,

package/dist/{index-ByPSWRQ0.js → index-tpq3BGwZ.js}

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { a as ButtonIconStyled } from "./styled-Dgv3RBlg.js";
+import { a as ButtonIconStyled } from "./styled-Dk6VS_Sg.js";
 import { b as iconSizeSm } from "./props-7dcsjRUx.js";
-import "./styled-B1bxWqtW.js";
+import "./styled-DUsRG1Xh.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { s as spacingNone, b as spacingXs, a as spacingMd } from "./Spacing-BMQelJYr.js";
-import { a as filterProps } from "./filterProps-BWnAPYBL.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.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";

package/dist/index.d.ts

@@ -32,8 +32,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';
@@ -166,6 +164,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';
@@ -194,8 +194,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';