@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/components/IconSnippetList/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const imageComponentName: "Image";

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

@@ -0,0 +1,4 @@
+import { ImageProps } from './props';
+declare const Image: ({ link, aspectRatio, roundedCorners, objectFit, width, height, bottomSpacing, sizes: sizesProp, ...props }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+export default Image;
+export * from './props';

package/dist/components/Image/index.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { a as ContainerContext } from "../../index-sVS9qq5A.js";
+import { a as GridContext, c as GridItemContext } from "../../index-Cx4q-LSt.js";
+import UtilityLink from "../UtilityLink/index.js";
+import { useImageComponent, filterImagePropsToImageComponentProps } from "../../hooks/useImageComponent/index.js";
+import { g as getSizesFromGridConfig } from "../../getSizesFromGridConfig-DR78nJ-p.js";
+import { I as ImageContainerStyled } from "../../styled-CEeMe8vd.js";
+import { a, b, c, d, e, f, g, h, i, j, k, l, m, o, n, p, q, r, s, t, u, v } from "../../props-CLadRD1u.js";
+const Image = ({
+  link,
+  aspectRatio,
+  roundedCorners,
+  objectFit,
+  width,
+  height,
+  bottomSpacing,
+  sizes: sizesProp,
+  ...props
+}) => {
+  const ImageComponent = useImageComponent();
+  const gridContext = useContext(GridContext);
+  const gridItemContext = useContext(GridItemContext);
+  const containerContext = useContext(ContainerContext);
+  const sizes = sizesProp ?? ((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, layout: props.layout, children: /* @__PURE__ */ jsx(ImageComponent, { ...imageComponentProps }) });
+  if (!link) {
+    return image;
+  }
+  return /* @__PURE__ */ jsx(UtilityLink, { ...link, style: {
+    display: width || height ? "inline-block" : "block"
+  }, children: image });
+};
+export {
+  a as aspectRatio16_9,
+  b as aspectRatio1_1,
+  c as aspectRatio21_9,
+  d as aspectRatio32_9,
+  e as aspectRatio3_4,
+  f as aspectRatio48_9,
+  g as aspectRatios,
+  Image as default,
+  h as horizontalAlignmentCenter,
+  i as horizontalAlignmentLeft,
+  j as horizontalAlignmentRight,
+  k as imageAlignments,
+  l as imageObjectFits,
+  m as imageObjectPositions,
+  o as objectFitContain,
+  n as objectFitCover,
+  p as objectPositionCenter,
+  q as objectPositionLeftBottom,
+  r as objectPositionLeftCenter,
+  s as objectPositionLeftTop,
+  t as objectPositionRightBottom,
+  u as objectPositionRightCenter,
+  v as objectPositionRightTop
+};

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

@@ -0,0 +1,83 @@
+import { ImgHTMLAttributes } from 'react';
+import { UtilityLinkProps } from '../UtilityLink/props';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { imageComponentName } from './componentName';
+export declare const objectFitContain: "contain";
+export declare const objectFitCover: "cover";
+export declare const imageObjectFits: readonly ["contain", "cover"];
+export type ImageObjectFit = (typeof imageObjectFits)[number];
+export declare const horizontalAlignmentLeft: "left";
+export declare const horizontalAlignmentRight: "right";
+export declare const horizontalAlignmentCenter: "center";
+export declare const imageAlignments: readonly ["left", "center", "right"];
+export type ImageAlignment = (typeof imageAlignments)[number];
+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 declare const imageObjectPositions: readonly ["center", "top left", "center left", "bottom left", "top right", "center right", "bottom right"];
+export type ImageObjectPosition = (typeof imageObjectPositions)[number];
+export declare const aspectRatio1_1: "1/1";
+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 declare const aspectRatios: AspectRatio[];
+export type AspectRatio = typeof aspectRatio1_1 | typeof aspectRatio3_4 | typeof aspectRatio16_9 | typeof aspectRatio21_9 | typeof aspectRatio32_9 | typeof aspectRatio48_9;
+/**
+ * Props for the Image component.
+ * Renders a responsive `<img>` element with optional aspect ratio, object-fit, and link wrapping.
+ * @see {@link https://www.vodafone.de/simplicity/pattern/?path=/docs/media-image--docs} Image stories
+ */
+export interface ImageProps extends BrixComponentProps, Omit<ImgHTMLAttributes<HTMLImageElement & HTMLSourceElement>, 'children'> {
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof imageComponentName;
+    /**
+     * How the image fills its container when an aspect ratio or fixed dimensions are set.
+     * - `cover`: Image covers the entire area (may crop)
+     * - `contain`: Image fits entirely within the area (may letterbox)
+     * @default cover
+     */
+    objectFit?: ImageObjectFit;
+    /**
+     * When `true`, the image is displayed with rounded corners.
+     */
+    roundedCorners?: boolean;
+    /**
+     * Image source URL.
+     */
+    src: string;
+    /**
+     * Alternative text for accessibility. Leave empty to mark the image as decorative
+     * (hidden from screen readers via `aria-hidden`).
+     */
+    alt?: string;
+    /**
+     * Constrains the image to a specific aspect ratio.
+     * - `1/1`: Square
+     * - `3/4`: Portrait
+     * - `16/9`: Widescreen
+     * - `21/9`: Ultra-wide
+     * - `32/9`: Banner
+     * - `48/9`: Extra-wide banner
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * Fixed height in pixels. Prefer `aspectRatio` for responsive behavior.
+     */
+    height?: number;
+    /**
+     * Fixed width in pixels. Prefer `aspectRatio` for responsive behavior.
+     */
+    width?: number;
+    /**
+     * Optional link wrapping the image, making it clickable.
+     */
+    link?: UtilityLinkProps;
+}

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

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

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

@@ -0,0 +1,86 @@
+import { default as z } from 'zod';
+import { ImageCmsProps } from '../../contentful/props';
+import { ValidationResult } from '../../utils/validation/Validation';
+export declare const imageSchema: z.ZodObject<{
+    uid: z.ZodString;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    component: z.ZodLiteral<"Image">;
+    objectFit: z.ZodOptional<z.ZodEnum<{
+        contain: "contain";
+        cover: "cover";
+    }>>;
+    roundedCorners: z.ZodOptional<z.ZodBoolean>;
+    src: z.ZodString;
+    alt: z.ZodOptional<z.ZodString>;
+    aspectRatio: z.ZodOptional<z.ZodEnum<{
+        "1/1": "1/1";
+        "3/4": "3/4";
+        "16/9": "16/9";
+        "21/9": "21/9";
+        "32/9": "32/9";
+        "48/9": "48/9";
+    }>>;
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+}, z.core.$loose>;
+export declare const validateImageProps: (props: unknown) => ValidationResult<ImageCmsProps>;
+export declare const isImageProps: (props: unknown) => props is ImageCmsProps;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const imageHeaderComponentName: "ImageHeader";

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

@@ -0,0 +1,4 @@
+import { ImageHeaderProps } from './props';
+declare const ImageHeader: ({ artDirectedImage, badge, heading, subline, price, action, variant, contentPosition, contentColumns, theme, ...props }: ImageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageHeader;
+export * from './props';

package/dist/components/ImageHeader/index.js

@@ -0,0 +1,298 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Body from "../Body/index.js";
+import { b as bodyComponentName } from "../../componentName-BoJP6JLf.js";
+import Button from "../Button/index.js";
+import "../../index-p6eyyJpy.js";
+import "../../index-lCL2zeQr.js";
+import { f as spacing2Xs, b as spacingNone, s as spacingMd, c as spacingSm, d as spacingXl, a as spacingXs } from "../../Spacing-Dj-qX3Z5.js";
+import Heading from "../Heading/index.js";
+import { h as headingAlignCenter } from "../../props-GrMT6XLD.js";
+import { h as headingComponentName } from "../../componentName-C1oXAOj7.js";
+import Price from "../Price/index.js";
+import { a as RichTextContentful, R as RichText } from "../../index-B39bJrc9.js";
+import { r as richTextContentfulComponentName, a as richTextComponentName } from "../../props-B5OwQmNC.js";
+import { v as viewport, a as breakpoint_large } from "../../index-CG4uiVbZ.js";
+import { b as fontWeightLight } from "../../FontWeight-C8c-UnWu.js";
+import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
+import { t as themeDark } from "../../Theme-B6kzt-0D.js";
+import { c as imageHeaderVariantFull, a as imageHeaderPositionRight, d as imageHeaderVariantSplit, i as imageHeaderPositionLeft } from "../../props-BT2CkRl1.js";
+import { b, e } from "../../props-BT2CkRl1.js";
+import styled from "styled-components";
+import ArtDirectedImage from "../ArtDirectedImage/index.js";
+import { B as Badge } from "../../index-yLLyPEd9.js";
+import ButtonGroup from "../ButtonGroup/index.js";
+import { C as Container } from "../../index-sVS9qq5A.js";
+import { k as flexOrientationVertical } from "../../props-BhXFN7yR.js";
+import { G as Grid, b as GridItem } from "../../index-Cx4q-LSt.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { e as colorBackgroundOverlay } from "../../BackgroundColor-Ba4D10TC.js";
+import { t as textBodyMd } from "../../TextBodySize-CP9q4gRv.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+import { h as priceSizeSm } from "../../props-E4PNCuS6.js";
+const imageHeaderHeight = 450;
+const ImageHeaderContainerStyled = styled(Container).withConfig({
+  displayName: "ImageHeaderContainerStyled",
+  componentId: "sc-10b6abe-0"
+})({
+  containerType: "inline-size"
+});
+const getBadgeTopPosition = () => {
+  return `calc(-0.5 * (${getSpacing(spacing2Xs)} * 2 + ${getBodySize(textBodyMd).fontSize} * ${getBodySize(textBodyMd).lineHeight}))`;
+};
+const ImageHeaderStyled = styled(Grid).withConfig({
+  displayName: "ImageHeaderStyled",
+  componentId: "sc-10b6abe-1"
+})({
+  alignItems: "center",
+  position: "relative",
+  marginRight: `calc(-1 * ${getSpacing(spacingMd)})`,
+  marginLeft: `calc(-1 * ${getSpacing(spacingMd)})`,
+  marginBottom: getSpacing(spacingNone),
+  ...viewport.lg({
+    width: "100%",
+    marginRight: "auto",
+    marginLeft: "auto"
+  })
+}, ({
+  contentPosition,
+  variant
+}) => ({
+  ...viewport.lg({
+    flexDirection: contentPosition === imageHeaderPositionRight ? "row" : "row-reverse",
+    ...variant === imageHeaderVariantFull && contentPosition === imageHeaderPositionRight && {
+      justifyContent: "flex-end"
+    }
+  })
+}));
+const ImageHeaderImagesContainerStyled = styled(GridItem).withConfig({
+  displayName: "ImageHeaderImagesContainerStyled",
+  componentId: "sc-10b6abe-2"
+})({
+  ...viewport.lg({
+    flexGrow: "1",
+    width: "auto"
+  })
+}, ({
+  variant,
+  contentPosition
+}) => {
+  if (variant === imageHeaderVariantSplit) {
+    const marginSide = contentPosition === imageHeaderPositionRight ? "marginLeft" : "marginRight";
+    return {
+      ...viewport.lg({
+        [marginSide]: "calc(-1*(100cqw - 100%) / 2)"
+      })
+    };
+  }
+}, ({
+  variant
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      ...viewport.lg({
+        flexBasis: "100%",
+        alignItems: "center",
+        marginRight: "calc(-1 * (100cqw - 100%) / 2)",
+        marginLeft: "calc(-1 * (100cqw - 100%) / 2)"
+      })
+    };
+  }
+});
+const ImageHeaderArtDirectedImageStyled = styled(ArtDirectedImage).withConfig({
+  displayName: "ImageHeaderArtDirectedImageStyled",
+  componentId: "sc-10b6abe-3"
+})({
+  width: "100%",
+  ...viewport.lg({
+    height: `${imageHeaderHeight}px`
+  })
+}, ({
+  variant
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      minHeight: `${imageHeaderHeight}px`,
+      ...viewport.lg({
+        minHeight: "unset"
+      })
+    };
+  }
+}, ({
+  contentPosition,
+  variant
+}) => {
+  if (variant === imageHeaderVariantSplit) {
+    return {
+      img: {
+        ...viewport.lg({
+          objectPosition: `${contentPosition === imageHeaderPositionLeft ? imageHeaderPositionLeft : imageHeaderPositionRight} center`
+        })
+      }
+    };
+  }
+});
+const ImageHeaderContentStyled = styled(GridItem).withConfig({
+  displayName: "ImageHeaderContentStyled",
+  componentId: "sc-10b6abe-4"
+})({
+  padding: `${getSpacing(spacingXl)} ${getSpacing(spacingMd)}`,
+  gap: getSpacing(spacingSm),
+  alignItems: "center",
+  position: "relative",
+  ...viewport.lg({
+    alignItems: "flex-start",
+    padding: 0
+  })
+}, ({
+  variant,
+  contentPosition,
+  contentColumns = 6
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      width: "100%",
+      position: "absolute",
+      bottom: 0,
+      background: getBackgroundColor(colorBackgroundOverlay),
+      ...viewport.lg({
+        width: `${100 / (12 / contentColumns)}%`,
+        background: "none",
+        bottom: "auto",
+        justifyContent: "center"
+      })
+    };
+  }
+  if (variant === imageHeaderVariantSplit) {
+    const paddingSide = contentPosition === imageHeaderPositionRight ? "paddingLeft" : "paddingRight";
+    return {
+      ...viewport.lg({
+        [paddingSide]: getSpacing(spacingMd)
+      })
+    };
+  }
+});
+const ImageHeaderBadgeStyled = styled(Badge).withConfig({
+  displayName: "ImageHeaderBadgeStyled",
+  componentId: "sc-10b6abe-5"
+})({
+  position: "absolute",
+  top: getBadgeTopPosition(),
+  ...viewport.lg({
+    position: "static",
+    top: 0
+  })
+});
+const ImageHeaderHeadingStyled = styled(Heading).withConfig({
+  displayName: "ImageHeaderHeadingStyled",
+  componentId: "sc-10b6abe-6"
+})({
+  ...viewport.lg({
+    textAlign: "left"
+  })
+});
+const ImageHeaderSublineWrapperStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "ImageHeaderSublineWrapperStyled",
+  componentId: "sc-10b6abe-7"
+})({
+  textAlign: "center",
+  ...viewport.lg({
+    textAlign: "left"
+  })
+});
+const ImageHeaderSublineHeadingStyled = styled(Heading).withConfig({
+  displayName: "ImageHeaderSublineHeadingStyled",
+  componentId: "sc-10b6abe-8"
+})({
+  textAlign: "center",
+  ...viewport.lg({
+    textAlign: "left"
+  })
+});
+const ImageHeaderButtonGroupStyled = styled(ButtonGroup).withConfig({
+  displayName: "ImageHeaderButtonGroupStyled",
+  componentId: "sc-10b6abe-9"
+})({
+  marginTop: getSpacing(spacingXs),
+  width: "100%",
+  justifyContent: "center",
+  ...viewport.lg({
+    justifyContent: "flex-start"
+  })
+}, ({
+  orientation
+}) => flexOrientationVertical === orientation ? viewport.md({
+  width: "auto"
+}) : {});
+const ImageHeader = ({
+  artDirectedImage,
+  badge,
+  heading,
+  subline,
+  price,
+  action,
+  variant = imageHeaderVariantSplit,
+  contentPosition = imageHeaderPositionLeft,
+  contentColumns = 6,
+  theme,
+  ...props
+}) => {
+  const headingId = `heading-${props.uid}`;
+  const getSubline = (subline2) => {
+    if (!subline2) return null;
+    switch (subline2.component) {
+      case headingComponentName:
+        return /* @__PURE__ */ jsx(ImageHeaderSublineHeadingStyled, { ...subline2, size: "md", tag: "div", bottomSpacing: spacingNone });
+      case richTextComponentName:
+        return /* @__PURE__ */ jsx(RichText, { ...subline2, bottomSpacing: spacingNone });
+      case richTextContentfulComponentName:
+        return /* @__PURE__ */ jsx(RichTextContentful, { ...subline2, bottomSpacing: spacingNone });
+      case bodyComponentName:
+        return /* @__PURE__ */ jsx(Body, { ...subline2, size: "md", bottomSpacing: spacingNone });
+      default:
+        return null;
+    }
+  };
+  const getAction = (action2) => {
+    if (!action2) return null;
+    switch (action2.component) {
+      case "Button":
+      case "ButtonAsLink":
+        return /* @__PURE__ */ jsx(Button, { ...action2, bottomSpacing: spacingNone });
+      case "ButtonGroup":
+        return /* @__PURE__ */ jsx(ImageHeaderButtonGroupStyled, { ...action2, bottomSpacing: spacingNone });
+      default:
+        return null;
+    }
+  };
+  const sources = Object.fromEntries(Object.entries(artDirectedImage.sources).map(([key, source]) => [key, {
+    ...source,
+    sizes: variant === imageHeaderVariantFull ? `(min-width: 1025px) and (max-width: 1920px) ${imageHeaderHeight * (48 / 9)}px, 100vw` : `(max-width: ${breakpoint_large}) 100vw, (min-width: 1025px) and (max-width: 1920px) ${imageHeaderHeight * (32 / 9)}px, 50vw`
+  }]));
+  return /* @__PURE__ */ jsx(ImageHeaderContainerStyled, { padding: spacingNone, className: props.className, theme, children: /* @__PURE__ */ jsxs(ImageHeaderStyled, { ...props, contentPosition, variant, gap: spacingNone, component: "Grid", children: [
+    /* @__PURE__ */ jsx(ImageHeaderImagesContainerStyled, { align: "center", variant, contentPosition, lg: 12 - contentColumns, children: /* @__PURE__ */ jsx(ImageHeaderArtDirectedImageStyled, { sources, image: {
+      ...artDirectedImage.image,
+      loading: "eager",
+      fetchPriority: "high"
+    }, variant, contentPosition, bottomSpacing: spacingNone }) }),
+    /* @__PURE__ */ jsxs(ImageHeaderContentStyled, { variant, contentPosition, contentColumns, lg: contentColumns, className: themeDark === theme ? ` ${themeDark}` : "", children: [
+      badge && /* @__PURE__ */ jsx(ImageHeaderBadgeStyled, { ...badge, size: mediumSize, bottomSpacing: spacingNone }),
+      /* @__PURE__ */ jsx(ImageHeaderHeadingStyled, { ...heading, id: headingId, align: headingAlignCenter, weight: fontWeightLight, bottomSpacing: spacingNone }),
+      subline && /* @__PURE__ */ jsx(ImageHeaderSublineWrapperStyled, { children: getSubline(subline) }),
+      price && /* @__PURE__ */ jsx(Price, { ...price, size: priceSizeSm, bottomSpacing: spacingNone }),
+      getAction(action)
+    ] })
+  ] }) });
+};
+export {
+  ImageHeader as default,
+  imageHeaderPositionLeft,
+  imageHeaderPositionRight,
+  b as imageHeaderPositions,
+  imageHeaderVariantFull,
+  imageHeaderVariantSplit,
+  e as imageHeaderVariants
+};

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

@@ -0,0 +1,91 @@
+import { HTMLAttributes } from 'react';
+import { ArtDirectedImageProps } from '../ArtDirectedImage/props';
+import { BadgeProps } from '../Badge/props';
+import { BodyProps } from '../Body/props';
+import { ButtonProps } from '../Button/props';
+import { ButtonAsLinkProps } from '../ButtonAsLink/props';
+import { ButtonGroupProps } from '../ButtonGroup/props';
+import { HeadingProps } from '../Heading/props';
+import { PriceProps } from '../Price/props';
+import { RichTextProps } from '../RichText/props';
+import { RichTextContentfulProps } from '../RichTextContentful';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { GridColSpan } from '../../foundations/GridConfig';
+import { Theme } from '../../foundations/types/Theme';
+import { imageHeaderComponentName } from './componentName';
+export declare const imageHeaderVariantFull: "full";
+export declare const imageHeaderVariantSplit: "split";
+export declare const imageHeaderVariants: readonly ["full", "split"];
+export type ImageHeaderVariant = (typeof imageHeaderVariants)[number];
+export declare const imageHeaderPositionRight: "right";
+export declare const imageHeaderPositionLeft: "left";
+export declare const imageHeaderPositions: readonly ["left", "right"];
+export type ImageHeaderPosition = (typeof imageHeaderPositions)[number];
+declare const allowedHeadingSizes: readonly ["lg", "xl"];
+export type AllowedHeadingSizes = (typeof allowedHeadingSizes)[number];
+/**
+ * Heading props restricted to the subset allowed in ImageHeader.
+ */
+export interface RestrictedHeadingProps extends Omit<HeadingProps, 'bottomSpacing' | 'weight' | 'align' | 'size'> {
+    size: AllowedHeadingSizes;
+}
+/**
+ * Props for the ImageHeader component.
+ * A hero section with a full-width or split-layout background image, heading, and optional actions.
+ * @see {@link https://www.vodafone.de/simplicity/pattern/?path=/docs/media-imageheader--docs} ImageHeader stories
+ */
+export interface ImageHeaderProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof imageHeaderComponentName;
+    /**
+     * Art-directed images for each viewport (mobile, tablet, desktop).
+     */
+    artDirectedImage: ArtDirectedImageProps;
+    /**
+     * Optional badge displayed above the heading.
+     */
+    badge?: Omit<BadgeProps, 'size'>;
+    /**
+     * Heading with size restricted to `'lg'` or `'xl'`.
+     */
+    heading: RestrictedHeadingProps;
+    /**
+     * Optional subline rendered below the heading. Accepts Body, Heading, RichText, or RichTextContentful props.
+     */
+    subline?: Omit<BodyProps, 'size' | 'bottomSpacing'> | Omit<HeadingProps, 'size' | 'bottomSpacing' | 'tag'> | Omit<RichTextProps, 'bottomSpacing'> | Omit<RichTextContentfulProps, 'bottomSpacing'>;
+    /**
+     * Optional price block displayed below the subline.
+     */
+    price?: Omit<PriceProps, 'size' | 'bottomSpacing'>;
+    /**
+     * Call-to-action element(s) — can be a Button, ButtonAsLink, or ButtonGroup.
+     */
+    action?: ButtonProps | ButtonAsLinkProps | ButtonGroupProps;
+    /**
+     * Layout variant of the image header.
+     * - `split`: Content overlays one side of the image
+     * - `full`: Content overlays the full-width image
+     * @default split
+     */
+    variant?: ImageHeaderVariant;
+    /**
+     * Horizontal position of the content block within the header.
+     * - `left`: Content aligned to the left
+     * - `right`: Content aligned to the right
+     * @default left
+     */
+    contentPosition?: ImageHeaderPosition;
+    /**
+     * Number of grid columns the content block spans on desktop (1–12).
+     */
+    contentColumns?: GridColSpan;
+    /**
+     * Color theme for text and actions.
+     * - `dark`: Dark text on light backgrounds
+     * - `light`: Light text on dark/image backgrounds
+     */
+    theme?: Theme;
+}
+export {};