@vodafone_de/brix-components 9.0.4 → 10.0.0

package/dist/components/GridItem/index.js

@@ -1,57 +1,14 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { d as divTagName, l as liTagName, n as navTagName, m as mainTagName, s as sectionTagName, a as asideTagName, b as articleTagName, u as ulTagName, o as olTagName } from "../../tags-D7CRQqc1.js";
-import { validateGridColSpan, GridContext } from "../Grid/index.js";
-import { G as GridItemStyled } from "../../styled-0KSRG-Fv.js";
-import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
-const gridItemTags = [divTagName, liTagName, navTagName, mainTagName, sectionTagName, asideTagName, articleTagName];
-const gridItemAligns = ["left", "center", "right"];
-const validateGridItemProps = (props) => {
-  if (!isObject(props)) {
-    return false;
-  }
-  const itemProps = props;
-  if (!hasMatchingComponentName(itemProps.component, "GridItem")) {
-    return false;
-  }
-  if (itemProps.sm && false === validateGridColSpan(itemProps.sm)) {
-    return false;
-  }
-  if (itemProps.md && false === validateGridColSpan(itemProps.md)) {
-    return false;
-  }
-  if (itemProps.lg && false === validateGridColSpan(itemProps.lg)) {
-    return false;
-  }
-  if (itemProps.align !== void 0 && !gridItemAligns.includes(itemProps.align)) {
-    return false;
-  }
-  if (itemProps.tag !== void 0 && !gridItemTags.includes(itemProps.tag)) {
-    return false;
-  }
-  if (itemProps.children === void 0) {
-    return false;
-  }
-  return true;
-};
-const isGridItemProps = (props) => {
-  return validateGridItemProps(props);
-};
-const GridItem = ({
-  sm = 12,
-  tag = divTagName,
-  ...props
-}) => {
-  const gridTag = useContext(GridContext).tag;
-  const gridSpacing = useContext(GridContext).spacing;
-  const gridAutoLayout = useContext(GridContext).autoLayout;
-  return /* @__PURE__ */ jsx(GridItemStyled, { ...props, as: gridTag === ulTagName || gridTag === olTagName ? liTagName : tag, spacing: gridSpacing, sm, ...gridAutoLayout, children: props.children });
-};
+import "react/jsx-runtime";
+import "react";
+import "../../tags-Cwgg3Gx2.js";
+import { b, G, c, g, i, v } from "../../index-Bu-7sSif.js";
+import "../../styled-DdeOXNN9.js";
 export {
-  GridItem as default,
-  gridItemAligns,
-  gridItemTags,
-  isGridItemProps,
-  validateGridItemProps
+  b as GridItemContext,
+  G as default,
+  c as gridItemAligns,
+  g as gridItemTags,
+  i as isGridItemProps,
+  v as validateGridItemProps
 };

package/dist/components/Heading/index.js

@@ -1,17 +1,16 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { F as FootnoteLink } from "../../index-BJHhIBYl.js";
+import { F as FootnoteLink } from "../../index-BsykXBqC.js";
 import { a as spacingXs, b as spacingSm, s as spacingMd, g as spacingLg, e as spacingXl } from "../../Spacing-8v6hcO2x.js";
-import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
-import { i as h5TagName, j as h4TagName, h as h3TagName, k as h2TagName, p as h1TagName, q as h6TagName, d as divTagName, c as spanTagName, r as pTagName } from "../../tags-D7CRQqc1.js";
+import { i as h5TagName, j as h4TagName, h as h3TagName, k as h2TagName, m as h1TagName, n as h6TagName, d as divTagName, c as spanTagName, p as pTagName } from "../../tags-Cwgg3Gx2.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";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { f as fontWeightBold, b as fontWeightLight, a as fontWeightRegular } from "../../FontWeight-DEBGHbtO.js";
 import { a as colorTextNeutral } from "../../TextColor-BXVMXUVE.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 import { d as textHeadingXl, c as textHeadingLg, a as textHeadingMd, b as textHeadingSm, t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 import { i as isBottomSpacing } from "../../isBottomSpacing-BxfreCZU.js";
@@ -116,7 +115,7 @@ const Heading = ({
   bottomSpacing = spacingMd,
   ...props
 }) => /* @__PURE__ */ jsxs(HeadingStyled, { ...props, bottomSpacing, children: [
-  renderInlineRichTextFromOpenText(props.children),
+  props.children,
   footnoteLink && /* @__PURE__ */ jsx(FootnoteLink, { ...footnoteLink })
 ] });
 export {

package/dist/components/HifiIcon/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { s as spacingMd } from "../../Spacing-8v6hcO2x.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 import { h as iconSize5xl, j as iconSize6xl, k as iconSize7xl, l as iconSize8xl, m as iconSize9xl } from "../../IconSize-AJp7xdJi.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";

package/dist/components/IconButton/index.js

@@ -10,12 +10,12 @@ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
 import { getOpacity } from "../../foundations/token/getOpacity/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { b as borderRadiusMd, c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd, a as borderRadiusFull } from "../../BorderRadius-2LdggXbQ.js";
 import { c as borderWidthSelected } from "../../BorderWidth-BjXpOdM5.js";
-import { b as buttonHeight, p as primaryAppearance } from "../../styled-7vJ7mrAA.js";
+import { b as buttonHeight, p as primaryAppearance } from "../../styled-BKH3egch.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
 import { 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 { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 import { g as getButtonAppearance, B as ButtonAppearanceColor } from "../../ButtonAppearanceHelper-DBCLijF0.js";
 const iconButtonShapeSquare = "square";

package/dist/components/IconSnippet/index.js

@@ -4,15 +4,15 @@ import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import InlineLink from "../InlineLink/index.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-C4eCcl02.js";
-import { d as divTagName, c as spanTagName } from "../../tags-D7CRQqc1.js";
+import { R as RichText } from "../../index-DP6Nlg-a.js";
+import { d as divTagName, c as spanTagName } from "../../tags-Cwgg3Gx2.js";
 import { a as iconSizeLg, f as iconSize3xl, i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import { b as spacingSm, s as spacingMd, c as spacingNone, a as spacingXs } from "../../Spacing-8v6hcO2x.js";
 import styled from "styled-components";
 import { I as IconLoader } from "../../index--RjkzZm0.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 const iconSnippetSizeSmall = "sm";
 const iconSnippetSizeLarge = "lg";

package/dist/components/IconSnippetList/index.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import Grid from "../Grid/index.js";
-import GridItem from "../GridItem/index.js";
+import { a as Grid, G as GridItem } from "../../index-Bu-7sSif.js";
 import IconSnippet from "../IconSnippet/index.js";
-import { u as ulTagName, l as liTagName } from "../../tags-D7CRQqc1.js";
+import { u as ulTagName, l as liTagName } from "../../tags-Cwgg3Gx2.js";
 import { c as spacingNone } from "../../Spacing-8v6hcO2x.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 const validateIconSnippetListProps = (props) => {

package/dist/components/Image/index.js

@@ -1,81 +1,140 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { a as ContainerContext } from "../../index-DbG0QL9D.js";
+import { d as GridContext, b as GridItemContext } from "../../index-Bu-7sSif.js";
 import UtilityLink from "../UtilityLink/index.js";
+import { useImageComponent, filterImagePropsToImageComponentProps } from "../../hooks/useImageComponent/index.js";
+import { g as getSizesFromGridConfig } from "../../getSizesFromGridConfig-DKOLupyb.js";
 import styled from "styled-components";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { b as borderRadiusMd, c as borderRadiusNone } from "../../BorderRadius-2LdggXbQ.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { b as borderRadiusMd, a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
-import { c as cornerStraight } from "../../CornerStyle-JEbGNArR.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
-import { p, m, q, r, s, n, t, x, d, h, c, w, z, o, a, b, u, e, i, g, f, l, k, j, v, y } from "../../validate-DYmFz2FF.js";
-const ImageStyled = styled.img.withConfig({
+import { s as spacingMd } from "../../Spacing-8v6hcO2x.js";
+import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
+const aspectRatio1_1 = "1/1";
+const aspectRatio3_4 = "3/4";
+const aspectRatio16_9 = "16/9";
+const aspectRatio21_9 = "21/9";
+const aspectRatio32_9 = "32/9";
+const aspectRatio48_9 = "48/9";
+const objectFitContain = "contain";
+const objectFitCover = "cover";
+const objectFitNone = "none";
+const ImageContainerStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
-  displayName: "ImageStyled",
+  displayName: "ImageContainerStyled",
   componentId: "sc-z3qszb-0"
 })({
-  display: "block",
-  width: "100%"
+  overflow: "hidden",
+  position: "relative",
+  "& img": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: "100%",
+    width: "100%"
+  }
 }, ({
-  objectFit = "contain"
+  aspectRatio
 }) => ({
-  objectFit
+  aspectRatio
 }), ({
-  objectPosition
+  roundedCorners
 }) => ({
-  objectPosition
+  borderRadius: roundedCorners ? getBorderRadius(borderRadiusMd) : getBorderRadius(borderRadiusNone)
 }), ({
-  horizontalAlignment = "left"
+  objectFit = "cover"
 }) => ({
-  marginLeft: horizontalAlignment === "left" ? 0 : "auto",
-  marginRight: horizontalAlignment === "right" ? 0 : "auto"
+  "& img": {
+    objectFit
+  }
 }), ({
-  corners = cornerStraight
+  width,
+  height
 }) => ({
-  borderRadius: corners === "rounded" ? getBorderRadius(borderRadiusMd) : getBorderRadius(borderRadiusNone)
+  width: width ? width : height ? "auto" : "100%",
+  height: height ? height : "auto"
 }), ({
-  aspectRatio
-}) => ({
-  aspectRatio
-}), getBottomSpacing);
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const aspectRatios = [aspectRatio1_1, aspectRatio3_4, aspectRatio16_9, aspectRatio21_9, aspectRatio32_9, aspectRatio48_9];
+const objectFits = [objectFitContain, objectFitCover, objectFitNone];
+const validateImageProps = (props) => {
+  if (!isObject(props)) {
+    return false;
+  }
+  const p = props;
+  if (!hasMatchingComponentName(p.component, "Image")) {
+    return false;
+  }
+  if (!p.src || typeof p.src !== "string") {
+    return false;
+  }
+  if (!p.aspectRatio || !aspectRatios.includes(p.aspectRatio)) {
+    return false;
+  }
+  if (p.objectFit !== void 0 && !objectFits.includes(p.objectFit)) {
+    return false;
+  }
+  if (p.roundedCorners !== void 0 && typeof p.roundedCorners !== "boolean") {
+    return false;
+  }
+  return true;
+};
+const isImageProps = (props) => {
+  return validateImageProps(props);
+};
 const Image = ({
-  alt = "",
   link,
+  aspectRatio,
+  roundedCorners,
+  objectFit,
+  width,
+  height,
+  bottomSpacing,
   ...props
 }) => {
-  const image = /* @__PURE__ */ jsx(ImageStyled, { ..."" === alt ? {
-    "aria-hidden": true
-  } : {}, ...props, alt });
+  const ImageComponent = useImageComponent();
+  const gridContext = useContext(GridContext);
+  const gridItemContext = useContext(GridItemContext);
+  const containerContext = useContext(ContainerContext);
+  const sizes = (gridContext == null ? void 0 : gridContext.nestedGridConfig) ? getSizesFromGridConfig(gridContext.nestedGridConfig, containerContext) : gridItemContext.nestedGridConfig ? getSizesFromGridConfig(gridItemContext.nestedGridConfig, containerContext) : getSizesFromGridConfig({
+    sm: 12
+  }, containerContext);
+  const imageComponentProps = {
+    ...filterImagePropsToImageComponentProps(props),
+    aspectRatio,
+    width,
+    height,
+    alt: props.alt || "",
+    // fallback value is needed because alt is optional in ImageProps but required in ImageComponentProps
+    sizes
+  };
+  const image = /* @__PURE__ */ jsx(ImageContainerStyled, { aspectRatio, roundedCorners, objectFit, width, height, bottomSpacing, children: /* @__PURE__ */ jsx(ImageComponent, { ...imageComponentProps }) });
   if (!link) {
     return image;
   }
-  return /* @__PURE__ */ jsx(UtilityLink, { ...link, children: image });
+  return /* @__PURE__ */ jsx(UtilityLink, { ...link, style: {
+    display: width || height ? "inline-block" : "block"
+  }, children: image });
 };
 export {
-  p as aspectRatio16_9,
-  m as aspectRatio1_1,
-  q as aspectRatio21_9,
-  r as aspectRatio32_9,
-  s as aspectRatio48_9,
-  n as aspectRatio4_3,
-  t as aspectRatios,
-  x as cornerStyles,
+  aspectRatio16_9,
+  aspectRatio1_1,
+  aspectRatio21_9,
+  aspectRatio32_9,
+  aspectRatio3_4,
+  aspectRatio48_9,
+  aspectRatios,
   Image as default,
-  d as horizontalAlignmentCenter,
-  h as horizontalAlignmentLeft,
-  c as horizontalAlignmentRight,
-  w as horizontalAlignments,
-  z as isImageProps,
-  o as objectFitContain,
-  a as objectFitCover,
-  b as objectFitNone,
-  u as objectFits,
-  e as objectPositionCenter,
-  i as objectPositionLeftBottom,
-  g as objectPositionLeftCenter,
-  f as objectPositionLeftTop,
-  l as objectPositionRightBottom,
-  k as objectPositionRightCenter,
-  j as objectPositionRightTop,
-  v as objectPositions,
-  y as validateImageProps
+  isImageProps,
+  objectFitContain,
+  objectFitCover,
+  objectFitNone,
+  objectFits,
+  validateImageProps
 };

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

@@ -1,64 +1,50 @@
 import { ImgHTMLAttributes } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
-import { CornerStyle } from '../../foundations/types/CornerStyle';
 import { UtilityLinkProps } from '../UtilityLink/props';
-export declare const objectFitContain = "contain";
-export declare const objectFitCover = "cover";
-export declare const objectFitNone = "none";
-export type ImageObjectFit = typeof objectFitContain | typeof objectFitCover | typeof objectFitNone;
-export declare const horizontalAlignmentLeft = "left";
-export declare const horizontalAlignmentRight = "right";
-export declare const horizontalAlignmentCenter = "center";
-export type ImageAlignment = typeof horizontalAlignmentLeft | typeof horizontalAlignmentRight | typeof horizontalAlignmentCenter;
-export declare const objectPositionCenter = "center";
-export declare const objectPositionLeftTop = "top left";
-export declare const objectPositionLeftCenter = "center left";
-export declare const objectPositionLeftBottom = "bottom left";
-export declare const objectPositionRightTop = "top right";
-export declare const objectPositionRightCenter = "center right";
-export declare const objectPositionRightBottom = "bottom right";
-export type ImageObjectPosition = typeof objectPositionCenter | typeof objectPositionLeftTop | typeof objectPositionLeftCenter | typeof objectPositionLeftBottom | typeof objectPositionRightTop | typeof objectPositionRightCenter | typeof objectPositionRightBottom;
 export declare const aspectRatio1_1 = "1/1";
-export declare const aspectRatio4_3 = "4/3";
+export declare const aspectRatio3_4 = "3/4";
 export declare const aspectRatio16_9 = "16/9";
 export declare const aspectRatio21_9 = "21/9";
 export declare const aspectRatio32_9 = "32/9";
 export declare const aspectRatio48_9 = "48/9";
-export type AspectRatio = typeof aspectRatio1_1 | typeof aspectRatio4_3 | typeof aspectRatio16_9 | typeof aspectRatio21_9 | typeof aspectRatio32_9 | typeof aspectRatio48_9;
-export interface ImageProps extends PatternProps, ImgHTMLAttributes<HTMLImageElement & HTMLSourceElement> {
+export type AspectRatio = typeof aspectRatio1_1 | typeof aspectRatio3_4 | typeof aspectRatio16_9 | typeof aspectRatio21_9 | typeof aspectRatio32_9 | typeof aspectRatio48_9;
+export declare const objectFitContain = "contain";
+export declare const objectFitCover = "cover";
+export declare const objectFitNone = "none";
+export type ImageObjectFit = typeof objectFitContain | typeof objectFitCover | typeof objectFitNone;
+export interface ImageProps extends PatternProps, ImgHTMLAttributes<HTMLImageElement> {
     /**
      * Pin component's name from string to the concrete name
      */
     component?: 'Image';
     /**
-     * Object-fit variations
+     * Image source URL
      */
-    objectFit?: ImageObjectFit;
+    src: string;
     /**
-     * objectPosition can be used for fine-tuning if the aspect ratio of the asset
-     * does not match the aspect ratio for the component in the layout 100%.
+     * Alternative description of image. Leave empty to mark image as decorative and hidden for screen readers.
      */
-    objectPosition?: ImageObjectPosition;
+    alt?: string;
     /**
-     * Horizontal alignment of image inside its container
+     * Image aspect-ratio
      */
-    horizontalAlignment?: ImageAlignment;
+    aspectRatio?: AspectRatio;
     /**
-     * Corner variations
+     * Images can optionally have rounded corners by using the “roundedCorners” property.
      */
-    corners?: CornerStyle;
+    roundedCorners?: boolean;
     /**
-     * Image source URL
+     * Object-fit variations
      */
-    src: string;
+    objectFit?: ImageObjectFit;
     /**
-     * Alternative description of image. Leave empty to mark image as decorative and hidden for screen readers.
+     * While using aspectRatio is preferred, setting of a fixed height is also valid
      */
-    alt?: string;
+    height?: number;
     /**
-     * Image aspect-ratio
+     * While using aspectRatio is preferred, setting of a fixed width is also valid
      */
-    aspectRatio: AspectRatio;
+    width?: number;
     /**
      * Utility link in case image should be wrapped in an Anchor element
      */

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

@@ -1,2 +1,2 @@
 import { ImageProps } from './props';
-export declare const ImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, ImageProps>> & string;
+export declare const ImageContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<ImageProps, "width" | "height" | "aspectRatio" | "bottomSpacing" | "objectFit" | "roundedCorners">>> & string;

package/dist/components/Image/validate.d.ts

@@ -1,8 +1,5 @@
-import { AspectRatio, ImageObjectFit, ImageObjectPosition, ImageProps } from './props';
+import { AspectRatio, ImageObjectFit, ImageProps } from './props';
 export declare const aspectRatios: AspectRatio[];
 export declare const objectFits: ImageObjectFit[];
-export declare const objectPositions: ImageObjectPosition[];
-export declare const horizontalAlignments: string[];
-export declare const cornerStyles: string[];
 export declare const validateImageProps: (props: unknown) => props is ImageProps;
 export declare const isImageProps: (props: unknown) => props is ImageProps;

package/dist/components/ImageHeader/index.js

@@ -2,20 +2,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Body from "../Body/index.js";
 import Button from "../Button/index.js";
-import Container from "../Container/index.js";
+import { C as Container } from "../../index-DbG0QL9D.js";
 import Heading, { headingAlignCenter } from "../Heading/index.js";
-import { P as Price, b as priceSizeSm } from "../../index-TL0X3rXH.js";
-import { R as RichText } from "../../index-C4eCcl02.js";
+import { P as Price, b as priceSizeSm } from "../../index-DCXRnuHz.js";
+import { R as RichText } from "../../index-DP6Nlg-a.js";
 import { b as fontWeightLight } from "../../FontWeight-DEBGHbtO.js";
 import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { s as spacingMd, b as spacingSm, e as spacingXl, a as spacingXs, f as spacing2Xs, c as spacingNone } from "../../Spacing-8v6hcO2x.js";
 import styled from "styled-components";
-import { B as Badge } from "../../index-j22agtAk.js";
+import ArtDirectedImage from "../ArtDirectedImage/index.js";
+import { B as Badge } from "../../index-DwGcrvTh.js";
 import ButtonGroup from "../ButtonGroup/index.js";
-import { a as flexOrientationVertical } from "../../styled-BxkvYuWW.js";
-import Grid from "../Grid/index.js";
-import GridItem from "../GridItem/index.js";
-import ResponsiveImage from "../ResponsiveImage/index.js";
+import { a as flexOrientationVertical } from "../../styled-CUp4EbPh.js";
+import { a as Grid, G as GridItem } from "../../index-Bu-7sSif.js";
 import viewport from "../../foundations/media-query/viewport/index.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBodySize } from "../../foundations/token/getBodySize/index.js";
@@ -88,29 +87,23 @@ const ImageHeaderImagesContainerStyled = styled(GridItem).withConfig({
     };
   }
 });
-const ImageHeaderResponsiveImageStyled = styled(ResponsiveImage).withConfig({
-  displayName: "ImageHeaderResponsiveImageStyled",
+const ImageHeaderArtDirectedImageStyled = styled(ArtDirectedImage).withConfig({
+  displayName: "ImageHeaderArtDirectedImageStyled",
   componentId: "sc-7ig3h-2"
 })({
+  width: "100%",
   ...viewport.lg({
-    width: "100%"
-  }),
-  img: {
-    ...viewport.lg({
-      height: "450px"
-    })
-  }
+    height: "450px"
+  })
 }, ({
   variant
 }) => {
   if (variant === imageHeaderVariantFull) {
     return {
-      img: {
-        minHeight: "450px",
-        ...viewport.lg({
-          minHeight: "unset"
-        })
-      }
+      minHeight: "450px",
+      ...viewport.lg({
+        minHeight: "unset"
+      })
     };
   }
 }, ({
@@ -244,7 +237,7 @@ const isImageHeaderProps = (props) => {
   return validateImageHeaderProps(props);
 };
 const ImageHeader = ({
-  responsiveImage,
+  artDirectedImage,
   badge,
   heading,
   subline,
@@ -286,7 +279,7 @@ const ImageHeader = ({
     }
   };
   return /* @__PURE__ */ jsx(Container, { padding: "None", className: props.className, children: /* @__PURE__ */ jsxs(ImageHeaderStyled, { ...props, position, variant, spacing: spacingNone, component: "Grid", children: [
-    /* @__PURE__ */ jsx(ImageHeaderImagesContainerStyled, { align: "center", variant, position, lg: 12 - contentGridDesktopColumns, children: /* @__PURE__ */ jsx(ImageHeaderResponsiveImageStyled, { images: responsiveImage.images, variant, position, bottomSpacing: spacingNone }) }),
+    /* @__PURE__ */ jsx(ImageHeaderImagesContainerStyled, { align: "center", variant, position, lg: 12 - contentGridDesktopColumns, children: /* @__PURE__ */ jsx(ImageHeaderArtDirectedImageStyled, { sources: artDirectedImage.sources, image: artDirectedImage.image, variant, position, bottomSpacing: spacingNone }) }),
     /* @__PURE__ */ jsxs(ImageHeaderContentStyled, { variant, position, contentGridDesktopColumns, lg: contentGridDesktopColumns, className: "Dark" === theme ? " Dark" : "", children: [
       badge && /* @__PURE__ */ jsx(ImageHeaderBadgeStyled, { ...badge, size: mediumSize, bottomSpacing: spacingNone }),
       /* @__PURE__ */ jsx(ImageHeaderHeadingStyled, { ...heading, id: headingId, align: headingAlignCenter, weight: fontWeightLight, bottomSpacing: spacingNone }),

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { ArtDirectedImageProps } from '../ArtDirectedImage/props';
 import { BadgeProps } from '../Badge/props';
 import { BodyProps } from '../Body/props';
 import { ButtonProps } from '../Button/props';
@@ -7,7 +8,6 @@ import { ButtonGroupProps } from '../ButtonGroup/props';
 import { GridColSpan } from '../Grid/props';
 import { HeadingProps } from '../Heading/props';
 import { PriceProps } from '../Price/props';
-import { ResponsiveImageProps } from '../ResponsiveImage/props';
 import { RichTextProps } from '../RichText/props';
 import { PatternProps } from '../../foundations/PatternProps';
 import { Theme } from '../../foundations/types/Theme';
@@ -29,7 +29,7 @@ export interface ImageHeaderProps extends PatternProps, HTMLAttributes<HTMLDivEl
     /**
      * Image header images for each viewport
      */
-    responsiveImage: ResponsiveImageProps;
+    artDirectedImage: ArtDirectedImageProps;
     /**
      * Badge
      */

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

@@ -2,7 +2,7 @@ import { ImageHeaderProps } from './props';
 export declare const getBadgeTopPosition: () => string;
 export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Grid').GridProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../Grid').GridProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ResponsiveImage').ResponsiveImageProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../ResponsiveImage').ResponsiveImageProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderArtDirectedImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ArtDirectedImage').ArtDirectedImageProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../ArtDirectedImage').ArtDirectedImageProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "contentGridDesktopColumns" | "variant">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderBadgeStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Badge').BadgeProps, never>> & string & Omit<import('react').FC<import('../Badge').BadgeProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderHeadingStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Heading').HeadingProps, never>> & string & Omit<import('react').FC<import('../Heading').HeadingProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/InfoBanner/index.js

@@ -17,7 +17,7 @@ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { a as colorBackgroundSubtle, f as colorBackgroundBrand } from "../../BackgroundColor-e0N9tdDR.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";
 const InfoBannerContainerStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "InfoBannerContainerStyled",

package/dist/components/InlineIcon/index.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { d as iconSizeXl, e as iconSize2xl, f as iconSize3xl, g as iconSize4xl, h as iconSize5xl } from "../../IconSize-AJp7xdJi.js";
 import styled from "styled-components";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const IconWithAccent = [iconSizeXl, iconSize2xl, iconSize3xl, iconSize4xl, iconSize5xl];
 const inlineIconModeFill = "fill";
 const inlineIconModeStroke = "stroke";

package/dist/components/InlineLink/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
-import { f as filterPropsForUnstyledComponent } from "../../filterProps-BJ5SpbnA.js";
+import { f as filterPropsForUnstyledComponent } from "../../filterProps-CxkibNnG.js";
 import { s as sanitizeLinkProps } from "../../sanitizeLinkProps-D2Kkovy1.js";
 import styled from "styled-components";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";

package/dist/components/Input/index.js

@@ -6,10 +6,9 @@ import FormHelperLabel from "../FormHelperLabel/index.js";
 import FormHelperMessage from "../FormHelperMessage/index.js";
 import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
 import { s as spacingMd, a as spacingXs } from "../../Spacing-8v6hcO2x.js";
-import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
 import { i } from "../../props-DDpgcryb.js";
-import { I as InputWrapperStyled, a as InputStyled } from "../../styled-xKyZg4q9.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-DmMk0W0J.js";
 const Input = forwardRef(({
   uid,
   status,
@@ -42,7 +41,7 @@ const Input = forwardRef(({
   return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, disabled: props.disabled, children: [
     /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
     /* @__PURE__ */ jsxs(InputWrapperStyled, { status, readOnly: props.readOnly, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
-      /* @__PURE__ */ jsx(InputStyled, { ...inputProps, placeholder: renderInlineRichTextFromOpenText(placeholder), ref, onChange }),
+      /* @__PURE__ */ jsx(InputStyled, { ...inputProps, placeholder, ref, onChange }),
       /* @__PURE__ */ jsx(FormHelperStatusIcon, { status })
     ] }),
     /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })