@vodafone_de/brix-components 7.1.7 → 7.1.9

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-DXRuQeDl.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-RnVr222F.js";
-import { l as leftPosition, a as ButtonIconStyled, b as buttonHeight, p as primaryAppearance } from "./styled-q7r_5eaz.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-CTn92eZw.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-C69TqGKE.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-CTn92eZw.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-B5p4bosD.js → index-rbdl_kyF.js}

@@ -5,12 +5,12 @@ 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-C9Nyap9H.js";
-import { T as TableWrapper } from "./TableWrapper-BlScbDc6.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-DJWrbsIZ.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 = {

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

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { a as ButtonIconStyled } from "./styled-q7r_5eaz.js";
+import { a as ButtonIconStyled } from "./styled-Dk6VS_Sg.js";
 import { b as iconSizeSm } from "./props-7dcsjRUx.js";
-import "./styled-RnVr222F.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-CTn92eZw.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';

package/dist/index.js

@@ -2,10 +2,10 @@ 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-B5p4bosD.js";
-import { P, T as T2, c, g, f, p, a as a2, e, d, b } from "./index-C69TqGKE.js";
-import { a as a3, c as c2, d as d2, b as b2, T as T3, e as e2 } from "./TableHead-C9Nyap9H.js";
-import { T as T4, T as T5 } from "./TableWrapper-BlScbDc6.js";
+import { R, T, a } from "./index-rbdl_kyF.js";
+import { P, T as T2, c, g, f, p, a as a2, e, d, b } from "./index-Vub90geg.js";
+import { a as a3, c as c2, d as d2, b as b2, T as T3, e as e2 } from "./TableHead-Cfn2iQRg.js";
+import { T as T4, T as T5 } from "./TableWrapper-BrnjxwJz.js";
 import { PanelStyled, default as default6, TabGroupContainerStyled, TabGroupIndicatorStyled, TabGroupTabsScrollableContainerStyled, TabGroupTabsStyled, TabLabelStyled, TabStyled, iconPositionLeft, iconPositionTop, tabGroupWidthAuto, tabGroupWidthFull } from "./components/TabGroup/index.js";
 import { default as default7 } from "./components/Switch/index.js";
 import { default as default8 } from "./components/SuggestInput/index.js";
@@ -15,72 +15,72 @@ import { default as default11 } from "./components/SelectInput/index.js";
 import { default as default12 } from "./components/SearchInput/index.js";
 import { default as default13 } from "./components/ScreenreaderOnly/index.js";
 import { default as default14 } from "./components/RichtTextContentful/index.js";
-import { default as default15 } from "./components/ResponsiveImage/index.js";
-import { HiddenRadioStyled, default as default16, RatingFieldsetStyled, StarLabelStyled, StarsWrapperStyled } from "./components/Rating/index.js";
-import { default as default17 } from "./components/RadioGroup/index.js";
-import { default as default18 } from "./components/QuickLinkList/index.js";
-import { default as default19 } from "./components/ProductCard/index.js";
-import { default as default20 } from "./components/PickerGroup/index.js";
-import { default as default21, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
-import { default as default22 } from "./components/OpenTextFootnoteAdapter/index.js";
-import { default as default23, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
-import { default as default24, mediaTextPositionLeft, mediaTextPositionRight, mediaTextPositionTop } from "./components/MediaText/index.js";
-import { default as default25 } from "./components/LocalStyle/index.js";
-import { default as default26 } from "./components/LoadingSpinner/index.js";
-import { default as default27 } from "./components/LinkListItem/index.js";
-import { default as default28 } from "./components/LinkList/index.js";
-import { L } from "./index-M27FMM9r.js";
-import { default as default29 } from "./components/Link/index.js";
-import { default as default30 } from "./components/Legend/index.js";
-import { default as default31 } from "./components/Label/index.js";
-import { default as default32 } from "./components/Input/index.js";
-import { default as default33 } from "./components/InlineLink/index.js";
-import { default as default34 } from "./components/InlineIcon/index.js";
-import { default as default35, infoBannerAppearancePrimary, infoBannerAppearanceSecondary, infoBannerAppearanceTertiary } from "./components/InfoBanner/index.js";
-import { default as default36, imageHeaderPositionLeft, imageHeaderPositionRight, imageHeaderVariantFull, imageHeaderVariantSplit } from "./components/ImageHeader/index.js";
-import { default as default37, aspectRatio16_9, aspectRatio1_1, aspectRatio21_9, aspectRatio32_9, aspectRatio48_9, aspectRatio4_3, horizontalAlignmentCenter, horizontalAlignmentLeft, horizontalAlignmentRight, objectFitContain, objectFitCover, objectFitNone, objectPositionCenter, objectPositionLeftBottom, objectPositionLeftCenter, objectPositionLeftTop, objectPositionRightBottom, objectPositionRightCenter, objectPositionRightTop } from "./components/Image/index.js";
-import { default as default38 } from "./components/IconSnippetList/index.js";
-import { default as default39, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSize3Xl, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
+import { HiddenRadioStyled, default as default15, RatingFieldsetStyled, StarLabelStyled, StarsWrapperStyled } from "./components/Rating/index.js";
+import { default as default16 } from "./components/RadioGroup/index.js";
+import { default as default17 } from "./components/QuickLinkList/index.js";
+import { default as default18 } from "./components/ProductCard/index.js";
+import { default as default19 } from "./components/PickerGroup/index.js";
+import { default as default20, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
+import { default as default21 } from "./components/OpenTextFootnoteAdapter/index.js";
+import { default as default22, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
+import { default as default23, mediaTextPositionLeft, mediaTextPositionRight, mediaTextPositionTop } from "./components/MediaText/index.js";
+import { default as default24 } from "./components/LocalStyle/index.js";
+import { default as default25 } from "./components/LoadingSpinner/index.js";
+import { default as default26 } from "./components/LinkListItem/index.js";
+import { default as default27 } from "./components/LinkList/index.js";
+import { L } from "./index-tpq3BGwZ.js";
+import { default as default28 } from "./components/Link/index.js";
+import { default as default29 } from "./components/Legend/index.js";
+import { default as default30 } from "./components/Label/index.js";
+import { default as default31 } from "./components/Input/index.js";
+import { default as default32 } from "./components/InlineLink/index.js";
+import { default as default33 } from "./components/InlineIcon/index.js";
+import { default as default34, infoBannerAppearancePrimary, infoBannerAppearanceSecondary, infoBannerAppearanceTertiary } from "./components/InfoBanner/index.js";
+import { default as default35, imageHeaderPositionLeft, imageHeaderPositionRight, imageHeaderVariantFull, imageHeaderVariantSplit } from "./components/ImageHeader/index.js";
+import { default as default36, aspectRatio16_9, aspectRatio1_1, aspectRatio21_9, aspectRatio32_9, aspectRatio48_9, aspectRatio4_3, objectFitContain, objectFitCover, objectFitNone, objectPositionCenter, objectPositionLeftBottom, objectPositionLeftCenter, objectPositionLeftTop, objectPositionRightBottom, objectPositionRightCenter, objectPositionRightTop } from "./components/Image/index.js";
+import { default as default37 } from "./components/IconSnippetList/index.js";
+import { default as default38, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSize3Xl, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
 import { I, i, a as a4, v } from "./index-C3dW-7e_.js";
-import { default as default40, iconButtonShapeCircle, iconButtonShapeSquare } from "./components/IconButton/index.js";
-import { default as default41, iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from "./components/Icon/index.js";
-import { default as default42 } from "./components/HifiIcon/index.js";
-import { default as default43, headingSizes, headingTags, headingWeights, headlingAligns, isHeadingProps, validateHeadingProps } from "./components/Heading/index.js";
-import { default as default44, gridItemAligns, gridItemTags, isGridItemProps, validateGridItemProps } from "./components/GridItem/index.js";
-import { default as default45, GridContext, gridAligns, gridSpacings, gridTags, isGridConfig, isGridProps, validateGridColSpan, validateGridConfig, validateGridProps } from "./components/Grid/index.js";
-import { default as default46 } from "./components/GoogleMap/index.js";
-import { default as default47, inputStatusIcons } from "./components/FormHelperStatusIcon/index.js";
-import { default as default48 } from "./components/FormHelperMessage/index.js";
-import { default as default49 } from "./components/FormHelperLabel/index.js";
-import { default as default50 } from "./components/FormElement/index.js";
-import { default as default51 } from "./components/Form/index.js";
-import { default as default52 } from "./components/FootnoteLink/index.js";
-import { default as default53 } from "./components/FootnoteContent/index.js";
-import { default as default54, flexItemAutoGrow, flexItemFullGrow } from "./components/FlexItem/index.js";
-import { default as default55 } from "./components/Flex/index.js";
-import { default as default56 } from "./components/FilterGroup/index.js";
-import { default as default57 } from "./components/Fieldset/index.js";
-import { default as default58 } from "./components/Divider/index.js";
-import { default as default59 } from "./components/DiscoveryCardGroup/index.js";
-import { default as default60, discoveryCardOrientationHorizontal, discoveryCardOrientationVertical } from "./components/DiscoveryCard/index.js";
-import { default as default61 } from "./components/Dialog/index.js";
-import { default as default62 } from "./components/DemoBox/index.js";
-import { default as default63 } from "./components/DateInput/index.js";
-import { default as default64, containerAppearances, containerPaddings, isContainerProps, validateContainerProps } from "./components/Container/index.js";
-import { default as default65 } from "./components/ConsentMessage/index.js";
-import { default as default66 } from "./components/ColorSwatchGroup/index.js";
-import { default as default67, colorSwatchSizeMedium, colorSwatchSizeSmall } from "./components/ColorSwatch/index.js";
-import { default as default68 } from "./components/Collapsible/index.js";
-import { default as default69 } from "./components/CheckboxGroup/index.js";
-import { default as default70 } from "./components/Checkbox/index.js";
-import { default as default71 } from "./components/Carousel/index.js";
-import { default as default72 } from "./components/Card/index.js";
-import { default as default73 } from "./components/ButtonGroup/index.js";
-import { B } from "./index-DXRuQeDl.js";
-import { default as default74, buttonAutoWidth, buttonFullWidth } from "./components/Button/index.js";
-import { default as default75 } from "./components/BottomBar/index.js";
-import { default as default76, bodyAlignCenter, bodyAlignLeft, bodyAlignRight, bodyAligns, bodySizes, bodyTags, bodyWeights, isBodyProps, validateBodyProps } from "./components/Body/index.js";
-import { default as default77, badgeAppearances, badgeSizes, isBadgeProps, validateBadgeProps } from "./components/Badge/index.js";
+import { default as default39, iconButtonShapeCircle, iconButtonShapeSquare } from "./components/IconButton/index.js";
+import { default as default40, iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from "./components/Icon/index.js";
+import { default as default41 } from "./components/HifiIcon/index.js";
+import { default as default42, headingSizes, headingTags, headingWeights, headlingAligns, isHeadingProps, validateHeadingProps } from "./components/Heading/index.js";
+import { default as default43, gridItemAligns, gridItemTags, isGridItemProps, validateGridItemProps } from "./components/GridItem/index.js";
+import { default as default44, GridContext, gridAligns, gridSpacings, gridTags, isGridConfig, isGridProps, validateGridColSpan, validateGridConfig, validateGridProps } from "./components/Grid/index.js";
+import { default as default45 } from "./components/GoogleMap/index.js";
+import { default as default46, inputStatusIcons } from "./components/FormHelperStatusIcon/index.js";
+import { default as default47 } from "./components/FormHelperMessage/index.js";
+import { default as default48 } from "./components/FormHelperLabel/index.js";
+import { default as default49 } from "./components/FormElement/index.js";
+import { default as default50 } from "./components/Form/index.js";
+import { default as default51 } from "./components/FootnoteLink/index.js";
+import { default as default52 } from "./components/FootnoteContent/index.js";
+import { default as default53, flexItemAutoGrow, flexItemFullGrow } from "./components/FlexItem/index.js";
+import { default as default54 } from "./components/Flex/index.js";
+import { default as default55 } from "./components/FilterGroup/index.js";
+import { default as default56 } from "./components/Fieldset/index.js";
+import { default as default57 } from "./components/Divider/index.js";
+import { default as default58 } from "./components/DiscoveryCardGroup/index.js";
+import { default as default59, discoveryCardOrientationHorizontal, discoveryCardOrientationVertical } from "./components/DiscoveryCard/index.js";
+import { default as default60 } from "./components/Dialog/index.js";
+import { default as default61 } from "./components/DemoBox/index.js";
+import { default as default62 } from "./components/DateInput/index.js";
+import { default as default63, containerAppearances, containerPaddings, isContainerProps, validateContainerProps } from "./components/Container/index.js";
+import { default as default64 } from "./components/ConsentMessage/index.js";
+import { default as default65 } from "./components/ColorSwatchGroup/index.js";
+import { default as default66, colorSwatchSizeMedium, colorSwatchSizeSmall } from "./components/ColorSwatch/index.js";
+import { default as default67 } from "./components/Collapsible/index.js";
+import { default as default68 } from "./components/CheckboxGroup/index.js";
+import { default as default69 } from "./components/Checkbox/index.js";
+import { default as default70 } from "./components/Carousel/index.js";
+import { default as default71 } from "./components/Card/index.js";
+import { default as default72 } from "./components/ButtonGroup/index.js";
+import { B } from "./index-BPweURE-.js";
+import { default as default73, buttonAutoWidth, buttonFullWidth } from "./components/Button/index.js";
+import { default as default74 } from "./components/BottomBar/index.js";
+import { default as default75, bodyAlignCenter, bodyAlignLeft, bodyAlignRight, bodyAligns, bodySizes, bodyTags, bodyWeights, isBodyProps, validateBodyProps } from "./components/Body/index.js";
+import { default as default76, badgeAppearances, badgeSizes, isBadgeProps, validateBadgeProps } from "./components/Badge/index.js";
+import { default as default77 } from "./components/ArtDirectedImage/index.js";
 import { default as default78 } from "./components/AccordionGroup/index.js";
 import { default as default79, accordionToggleCollapsed, accordionToggleCollapsing, accordionToggleExpanded } from "./components/Accordion/index.js";
 import { getTextDecoration } from "./foundations/token/getTextDecoration/index.js";
@@ -99,114 +99,122 @@ import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
 import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
 import { getBackgroundColor } from "./foundations/token/getBackgroundColor/index.js";
-import { l, m } from "./index-Ck2bCrhT.js";
+import { largeMediaQuery, mediumMediaQuery } from "./foundations/media-query/viewport/index.js";
 import { noReducedMotion, reducedMotionQuery } from "./foundations/media-query/reducedMotion/index.js";
 import { forcedColorsQuery } from "./foundations/media-query/forcedColors/index.js";
 import { GlobalStyle, cssReset } from "./foundations/GlobalStyle/index.js";
-import { u } from "./index-G2mpsxF7.js";
+import { u } from "./index-DKCzYjXw.js";
 import { checkThirdPartyConsentStorage, consentStorageFeature, consentStorageItemName, consentStorageKey, useThirdPartyConsent } from "./hooks/useThirdPartyConsent/index.js";
 import { useReducedMotion } from "./hooks/useReducedMotion/index.js";
+import { DefaultPicture, PictureContext, PictureProvider, usePictureComponent } from "./hooks/usePictureComponent/index.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
 import { DefaultLink, LinkContext, LinkProvider, useLinkComponent } from "./hooks/useLinkComponent/index.js";
+import { DefaultImage, ImageContext, ImageProvider, useImageComponent } from "./hooks/useImageComponent/index.js";
 import { useForcedColors } from "./hooks/useForcedColors/index.js";
 import { useFocusWithin } from "./hooks/useFocusWithin/index.js";
 import "react/jsx-runtime";
 import "@contentful/live-preview/react";
-import { L as L2 } from "./mapContentToComponents-DRp1r1ht.js";
-import { a as a5, l as l2 } from "./styled-BlHKbHF4.js";
-import { a as a6, l as l3 } from "./styled-SllFJc7o.js";
+import { L as L2 } from "./mapContentToComponents-bL4ms1AC.js";
+import { a as a5, l } from "./styled-BlHKbHF4.js";
+import { a as a6, l as l2 } from "./styled-CKK_LUlC.js";
 import { a as a7, i as i2 } from "./props-DDpgcryb.js";
-import { I as I2, f as f2, i as i3, g as g2, h, j, d as d3, c as c3, b as b3, e as e3, a as a8, k, l as l4 } from "./props-7dcsjRUx.js";
-import { I as I3 } from "./styled-RnVr222F.js";
-import { a as a9, h as h2 } from "./styled-VAsSnb5y.js";
-import { e as e4, d as d4, c as c4, b as b4, f as f3, a as a10 } from "./styled-CyZvsdJs.js";
-import { C } from "./styled-jl0239KS.js";
-import { C as C2 } from "./styled-1OrCdMDT.js";
-import { B as B2, p as p2, s, a as a11, t } from "./styled-B-_SmQSA.js";
+import { I as I2, f as f2, i as i3, g as g2, h, j, d as d3, c as c3, b as b3, e as e3, a as a8, k, l as l3 } from "./props-7dcsjRUx.js";
+import { I as I3 } from "./styled-DUsRG1Xh.js";
+import { a as a9, h as h2 } from "./styled-Csv7V9ez.js";
+import { e as e4, d as d4, c as c4, b as b4, f as f3, a as a10 } from "./styled-DG6HSLPJ.js";
+import { C } from "./styled-C6Wms75x.js";
+import { C as C2 } from "./styled-CQLDmqmZ.js";
+import { B as B2, p as p2, s, a as a11, t } from "./styled-13a_Vk0D.js";
 export {
   default79 as Accordion,
   default78 as AccordionGroup,
-  default77 as Badge,
+  default77 as ArtDirectedImage,
+  default76 as Badge,
   B2 as BadgeAppearanceColor,
-  default76 as Body,
-  default75 as BottomBar,
-  default74 as Button,
+  default75 as Body,
+  default74 as BottomBar,
+  default73 as Button,
   B as ButtonAsLink,
-  default73 as ButtonGroup,
-  default72 as Card,
+  default72 as ButtonGroup,
+  default71 as Card,
   C2 as CardAppearanceColor,
-  default71 as Carousel,
-  default70 as Checkbox,
-  default69 as CheckboxGroup,
-  default68 as Collapsible,
-  default67 as ColorSwatch,
-  default66 as ColorSwatchGroup,
-  default65 as ConsentMessage,
-  default64 as Container,
+  default70 as Carousel,
+  default69 as Checkbox,
+  default68 as CheckboxGroup,
+  default67 as Collapsible,
+  default66 as ColorSwatch,
+  default65 as ColorSwatchGroup,
+  default64 as ConsentMessage,
+  default63 as Container,
   C as ContainerAppearanceColor,
-  default63 as DateInput,
+  default62 as DateInput,
+  DefaultImage,
   DefaultLink,
-  default62 as DemoBox,
-  default61 as Dialog,
-  default60 as DiscoveryCard,
-  default59 as DiscoveryCardGroup,
-  default58 as Divider,
-  default57 as Fieldset,
-  default56 as FilterGroup,
-  default55 as Flex,
-  default54 as FlexItem,
-  default53 as FootnoteContent,
-  default52 as FootnoteLink,
-  default51 as Form,
-  default50 as FormElement,
-  default49 as FormHelperLabel,
-  default48 as FormHelperMessage,
-  default47 as FormHelperStatusIcon,
+  DefaultPicture,
+  default61 as DemoBox,
+  default60 as Dialog,
+  default59 as DiscoveryCard,
+  default58 as DiscoveryCardGroup,
+  default57 as Divider,
+  default56 as Fieldset,
+  default55 as FilterGroup,
+  default54 as Flex,
+  default53 as FlexItem,
+  default52 as FootnoteContent,
+  default51 as FootnoteLink,
+  default50 as Form,
+  default49 as FormElement,
+  default48 as FormHelperLabel,
+  default47 as FormHelperMessage,
+  default46 as FormHelperStatusIcon,
   GlobalStyle,
-  default46 as GoogleMap,
-  default45 as Grid,
+  default45 as GoogleMap,
+  default44 as Grid,
   GridContext,
-  default44 as GridItem,
-  default43 as Heading,
+  default43 as GridItem,
+  default42 as Heading,
   HiddenRadioStyled,
-  default42 as HifiIcon,
-  default41 as Icon,
-  default40 as IconButton,
+  default41 as HifiIcon,
+  default40 as Icon,
+  default39 as IconButton,
   I as IconLoader,
-  default39 as IconSnippet,
-  default38 as IconSnippetList,
+  default38 as IconSnippet,
+  default37 as IconSnippetList,
   I2 as IconWithAccent,
-  default37 as Image,
-  default36 as ImageHeader,
-  default35 as InfoBanner,
-  default34 as InlineIcon,
+  default36 as Image,
+  ImageContext,
+  default35 as ImageHeader,
+  ImageProvider,
+  default34 as InfoBanner,
+  default33 as InlineIcon,
   I3 as InlineIconStyled,
-  default33 as InlineLink,
-  default32 as Input,
-  default31 as Label,
-  default30 as Legend,
-  default29 as Link,
+  default32 as InlineLink,
+  default31 as Input,
+  default30 as Label,
+  default29 as Legend,
+  default28 as Link,
   L as LinkAsButton,
   LinkContext,
-  default28 as LinkList,
-  default27 as LinkListItem,
+  default27 as LinkList,
+  default26 as LinkListItem,
   LinkProvider,
   L2 as LivePreviewInspector,
-  default26 as LoadingSpinner,
-  default25 as LocalStyle,
-  default24 as MediaText,
-  default23 as Notification,
-  default22 as OpenTextFootnoteAdapter,
-  default21 as Overlay,
+  default25 as LoadingSpinner,
+  default24 as LocalStyle,
+  default23 as MediaText,
+  default22 as Notification,
+  default21 as OpenTextFootnoteAdapter,
+  default20 as Overlay,
   PanelStyled,
-  default20 as PickerGroup,
+  default19 as PickerGroup,
+  PictureContext,
+  PictureProvider,
   P as Price,
-  default19 as ProductCard,
-  default18 as QuickLinkList,
-  default17 as RadioGroup,
-  default16 as Rating,
+  default18 as ProductCard,
+  default17 as QuickLinkList,
+  default16 as RadioGroup,
+  default15 as Rating,
   RatingFieldsetStyled,
-  default15 as ResponsiveImage,
   R as RichText,
   default14 as RichtTextContentful,
   default13 as ScreenreaderOnly,
@@ -310,9 +318,6 @@ export {
   headingTags,
   headingWeights,
   headlingAligns,
-  horizontalAlignmentCenter,
-  horizontalAlignmentLeft,
-  horizontalAlignmentRight,
   iconButtonShapeCircle,
   iconButtonShapeSquare,
   iconPositionLeft,
@@ -347,7 +352,7 @@ export {
   infoBannerAppearanceSecondary,
   infoBannerAppearanceTertiary,
   k as inlineIconModeFill,
-  l4 as inlineIconModeStroke,
+  l3 as inlineIconModeStroke,
   a7 as inputStateError,
   i2 as inputStateSuccess,
   inputStatusIcons,
@@ -359,15 +364,15 @@ export {
   isGridProps,
   isHeadingProps,
   a4 as isIconLoaderProps,
-  l as largeMediaQuery,
+  largeMediaQuery,
   a6 as linkListItemVariantHorizontal,
-  l3 as linkListItemVariantVertical,
+  l2 as linkListItemVariantVertical,
   a5 as linkListVariantColumn,
-  l2 as linkListVariantRow,
+  l as linkListVariantRow,
   mediaTextPositionLeft,
   mediaTextPositionRight,
   mediaTextPositionTop,
-  m as mediumMediaQuery,
+  mediumMediaQuery,
   noReducedMotion,
   notificationStatusError,
   notificationStatusInfo,
@@ -401,8 +406,10 @@ export {
   t as tertiaryBadgeAppearance,
   useFocusWithin,
   useForcedColors,
+  useImageComponent,
   useLinkComponent,
   useMediaQuery,
+  usePictureComponent,
   useReducedMotion,
   useThirdPartyConsent,
   u as useViewport,

package/dist/{mapContentToComponents-DRp1r1ht.js → mapContentToComponents-bL4ms1AC.js}

@@ -8,26 +8,26 @@ import LinkList from "./components/LinkList/index.js";
 import RichTextContentful from "./components/RichtTextContentful/index.js";
 import { jsx } from "react/jsx-runtime";
 import "./NotificationErrorIcon-DMnAJgPN.js";
-import "./styled-RnVr222F.js";
+import "./styled-DUsRG1Xh.js";
 import "html-react-parser";
-import "./styled-B-_SmQSA.js";
+import "./styled-13a_Vk0D.js";
 import { isBadgeProps } from "./components/Badge/index.js";
 import { i as isObject, h as hasMatchingComponentName } from "./isObject-cuWKq2kY.js";
 import { useContentfulInspectorMode } from "@contentful/live-preview/react";
 import "./components/ScreenreaderOnly/index.js";
 import "./components/FootnoteLink/index.js";
-import "./styled-jl0239KS.js";
+import "./styled-C6Wms75x.js";
 import "react";
-import "./styled-Djetw1lK.js";
-import "./styled-VAsSnb5y.js";
+import "./styled-D57p2ktn.js";
+import "./styled-Csv7V9ez.js";
 import "./hooks/useLinkComponent/index.js";
-import { l as linkListItemVariantVertical, a as linkListItemVariantHorizontal } from "./styled-SllFJc7o.js";
+import { l as linkListItemVariantVertical, a as linkListItemVariantHorizontal } from "./styled-CKK_LUlC.js";
 import { l as linkListVariantRow, a as linkListVariantColumn } from "./styled-BlHKbHF4.js";
-import "./styled-DOK4C5Ml.js";
-import "./styled-D8a-ap4J.js";
+import "./styled-QLVvcMdB.js";
+import "./styled-B_ihuvyB.js";
 import "./components/InlineLink/index.js";
-import "./TableHead-C9Nyap9H.js";
-import "./styled-DJWrbsIZ.js";
+import "./TableHead-Cfn2iQRg.js";
+import "./styled-DoOOutJj.js";
 const validateLegibleContent = (check) => {
   var _a, _b, _c, _d;
   if (null === check) {