@vodafone_de/brix-components 7.1.9 → 7.1.11

package/dist/components/DiscoveryCardGroup/index.js

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import DiscoveryCard, { discoveryCardOrientationVertical } from "../DiscoveryCard/index.js";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
-import { a as LinkStyled } from "../../index-tpq3BGwZ.js";
+import { a as LinkStyled } from "../../index-ByPSWRQ0.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 const DiscoveryCardGroupGridStyled = styled(Grid).withConfig({

package/dist/components/Divider/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { D as DividerLineStyled } from "../../styled-B_ihuvyB.js";
+import { D as DividerLineStyled } from "../../styled-BKWEE3dx.js";
 const Divider = (props) => /* @__PURE__ */ jsx(DividerLineStyled, { ...props });
 export {
   Divider as default

package/dist/components/Fieldset/index.js

@@ -8,7 +8,7 @@ import Legend from "../Legend/index.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const fieldsetCssObject = {
   // Chrome gives a fieldset a min-width equal to its content, so we need to reset it here
   minWidth: "0px"
@@ -34,6 +34,7 @@ const Fieldset = forwardRef(({
     inputStateError !== status && helperText || inputStateError === status && errorMessage ? /* @__PURE__ */ jsx(FormHelperMessage, { id: `fieldset-message-${uid}`, message: inputStateError === status ? errorMessage : helperText, status, children: status === inputStateError && /* @__PURE__ */ jsx(NotificationErrorIcon, { size: "iconSizeXs" }) }) : null
   ] });
 });
+Fieldset.displayName = "Fieldset";
 export {
   Fieldset as default
 };

package/dist/components/FilterGroup/index.js

@@ -3,10 +3,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import Fieldset from "../Fieldset/index.js";
 import { b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import styled from "styled-components";
 import { I as IconLoader } from "../../index-C3dW-7e_.js";
-import { s as screenreaderOnly } from "../../screenreaderOnly-Dv2v6MAr.js";
+import { s as screenreaderOnly } from "../../index-DSF1zGyd.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBodySize } from "../../foundations/token/getBodySize/index.js";
@@ -19,13 +19,13 @@ import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBackgroundNeutral } from "../../BackgroundColor-DSOSZvNi.js";
 import { b as colorBorderUnselected, j as colorBorderSelected, c as colorBorderFocus } from "../../BorderColor-CYdSW9dg.js";
-import { a as borderRadiusFull } from "../../BorderRadius-2LdggXbQ.js";
+import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
 import { b as borderWidthUnselected, a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
 import { d as colorObjectSelected } from "../../ObjectColor-0RAzLGI5.js";
 import { b as spacingXs, s as spacingNone, e as spacing2Xs, c as spacingSm } from "../../Spacing-BMQelJYr.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
 import { a as colorTextNeutral, b as colorTextInverseStatic } from "../../TextColor-DsntmDNw.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const FilterGroupStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FilterGroupStyled",

package/dist/components/Flex/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { F as FlexStyled } from "../../styled-DG6HSLPJ.js";
-import { e, d, c, b, f, a } from "../../styled-DG6HSLPJ.js";
+import { F as FlexStyled } from "../../styled-O5mL4jlL.js";
+import { e, d, c, b, f, a } from "../../styled-O5mL4jlL.js";
 const Flex = ({
   children,
   ...props

package/dist/components/FlexItem/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const flexItemFullGrow = "full";
 const flexItemAutoGrow = "auto";
 const FlexItemStyled = styled.div.withConfig({

package/dist/components/FootnoteContent/index.js

@@ -7,7 +7,7 @@ import { getBorderColor } from "../../foundations/token/getBorderColor/index.js"
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { c as colorBorderFocus } from "../../BorderColor-CYdSW9dg.js";
 import { a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const rotate = keyframes(["0%{box-shadow:transparent 0px 0px 0px 0px;}50%{box-shadow:", " 0px 0px 2px ", ";}100%{box-shadow:transparent 0px 0px 0px 0px;}}"], getBorderColor(colorBorderFocus), getBorderWidth(borderWidthFocus));
 const FootnoteContentStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/FootnoteLink/index.js

@@ -1,55 +1,7 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import ScreenreaderOnly from "../ScreenreaderOnly/index.js";
-import styled from "styled-components";
-import InlineLink from "../InlineLink/index.js";
-import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
-import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { e as spacing2Xs } from "../../Spacing-BMQelJYr.js";
-const FootnoteLinkStyled = styled(InlineLink).withConfig({
-  displayName: "FootnoteLinkStyled",
-  componentId: "sc-ydos3j-0"
-})({
-  verticalAlign: "top",
-  fontSize: "0.7em",
-  fontWeight: getFontWeight("bold"),
-  textDecoration: "none",
-  display: "inline-block",
-  "& a": {
-    textDecoration: "underline",
-    paddingLeft: getSpacing(spacing2Xs),
-    paddingRight: getSpacing(spacing2Xs),
-    verticalAlign: "baseline",
-    fontSize: "inherit"
-  }
-});
-const FootnoteLink = ({
-  uid,
-  contentUid,
-  screenReaderLabel,
-  children,
-  component: _component
-}) => {
-  const onClick = (event) => {
-    const linkbackToContent = document.getElementById(`back-${contentUid}`);
-    if (!linkbackToContent) {
-      return;
-    }
-    linkbackToContent.setAttribute("href", `#${uid}`);
-    const details = linkbackToContent.closest("details");
-    if (details && null === details.getAttribute("open")) {
-      event.preventDefault();
-      details.setAttribute("open", "open");
-      setTimeout(() => {
-        event.target.click();
-      }, 15);
-    }
-  };
-  return /* @__PURE__ */ jsxs(FootnoteLinkStyled, { id: uid, href: `#${contentUid}`, onClick, children: [
-    children,
-    /* @__PURE__ */ jsx(ScreenreaderOnly, { children: screenReaderLabel })
-  ] });
-};
+import "react/jsx-runtime";
+import "../../index-DSF1zGyd.js";
+import { F } from "../../index-UJLGt4uV.js";
 export {
-  FootnoteLink as default
+  F as default
 };

package/dist/components/Form/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const FormStyled = styled.form.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FormStyled",

package/dist/components/FormElement/index.js

@@ -5,7 +5,7 @@ import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getOpacity } from "../../foundations/token/getOpacity/index.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const FormElementStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FormElementStyled",

package/dist/components/FormHelperStatusIcon/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import styled from "styled-components";
 import { I as IconLoader } from "../../index-C3dW-7e_.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";

package/dist/components/GoogleMap/index.js

@@ -6,16 +6,16 @@ import ConsentMessage from "../ConsentMessage/index.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 import { useThirdPartyConsent } from "../../hooks/useThirdPartyConsent/index.js";
 import styled from "styled-components";
-import viewport from "../../foundations/media-query/viewport/index.js";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { f as colorBorderSubtle } from "../../BorderColor-CYdSW9dg.js";
-import { b as borderRadiusMd, c as borderRadiusNone } from "../../BorderRadius-2LdggXbQ.js";
+import { b as borderRadiusMd, a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
 import { d as borderWidthSm } from "../../BorderWidth-eg_mz82k.js";
 import { c as cornerStraight } from "../../CornerStyle-JEbGNArR.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const MapInner = ({
   setMap,
   children

package/dist/components/Grid/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { createContext } from "react";
 import { d as divTagName, u as ulTagName, o as olTagName } from "../../tags-38kBhOn6.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
-import { G as GridStyled } from "../../styled-BKmRVjNA.js";
+import { G as GridStyled } from "../../styled-DGMsuBML.js";
 import { i as isObject, h as hasMatchingComponentName, a as isBottomSpacing } from "../../isObject-cuWKq2kY.js";
 const gridTags = [divTagName, ulTagName, olTagName];
 const gridAligns = ["left", "center", "right"];

package/dist/components/GridItem/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { d as divTagName, l as liTagName, n as navTagName, m as mainTagName, g as sectionTagName, i as asideTagName, j as articleTagName, u as ulTagName, o as olTagName } from "../../tags-38kBhOn6.js";
 import { validateGridColSpan, GridContext } from "../Grid/index.js";
-import { G as GridItemStyled } from "../../styled-D57p2ktn.js";
+import { G as GridItemStyled } from "../../styled-Cz2kpbgE.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-cuWKq2kY.js";
 const gridItemTags = [divTagName, liTagName, navTagName, mainTagName, sectionTagName, asideTagName, articleTagName];
 const gridItemAligns = ["left", "center", "right"];

package/dist/components/Heading/index.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import FootnoteLink from "../FootnoteLink/index.js";
+import { F as FootnoteLink } from "../../index-UJLGt4uV.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { H as HeadingStyled } from "../../styled-Csv7V9ez.js";
-import { a, h } from "../../styled-Csv7V9ez.js";
+import { H as HeadingStyled } from "../../styled-Dmb8-99g.js";
+import { a, h } from "../../styled-Dmb8-99g.js";
 import { a as h1TagName, b as h2TagName, h as h3TagName, c as h4TagName, e as h5TagName, f as h6TagName, d as divTagName, s as spanTagName, p as pTagName } from "../../tags-38kBhOn6.js";
 import { b as fontWeightLight, f as fontWeightRegular, a as fontWeightBold } from "../../FontWeight-C2pGs7aR.js";
-import { d as textHeadingXl, c as textHeadingLg, a as textHeadingMd, b as textHeadingSm, t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { d as textHeadingXl, c as textHeadingLg, t as textHeadingMd, b as textHeadingSm, a as textHeadingXs } from "../../HeadingSize-CqqUYZWV.js";
 import { i as isObject, h as hasMatchingComponentName, a as isBottomSpacing } from "../../isObject-cuWKq2kY.js";
 const headingSizes = [textHeadingXl, textHeadingLg, textHeadingMd, textHeadingSm, textHeadingXs];
 const headlingAligns = ["left", "center"];

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 { a as spacingMd } from "../../Spacing-BMQelJYr.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 const IconStyled = styled.img.withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/IconButton/index.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { I as IconLoader } from "../../index-C3dW-7e_.js";
 import { b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import styled from "styled-components";
 import { s as shadow28 } from "../../shadow-u158mzuN.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
@@ -11,12 +11,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, a as borderRadiusFull } from "../../BorderRadius-2LdggXbQ.js";
+import { b as borderRadiusMd, c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
 import { c as borderWidthSelected } from "../../BorderWidth-eg_mz82k.js";
-import { b as buttonHeight, p as primaryAppearance } from "../../styled-Dk6VS_Sg.js";
+import { b as buttonHeight, p as primaryAppearance } from "../../styled-Dgv3RBlg.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
 import { b as spacingXs, a as spacingMd } from "../../Spacing-BMQelJYr.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 import { g as getButtonAppearance, B as ButtonAppearanceColor } from "../../ButtonAppearanceHelper-D2SlSoU8.js";
 const iconButtonShapeSquare = "square";

package/dist/components/IconSnippet/index.js

@@ -3,17 +3,17 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import { d as iconSizeLg, g as iconSize3xl, b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import InlineLink from "../InlineLink/index.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-rbdl_kyF.js";
+import { R as RichText } from "../../index-Cmrx-D-0.js";
 import { d as divTagName } from "../../tags-38kBhOn6.js";
 import { c as spacingSm, a as spacingMd, s as spacingNone, b as spacingXs } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
 import { I as IconLoader } from "../../index-C3dW-7e_.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const iconSnippetSizeSmall = "sm";
 const iconSnippetSizeLarge = "lg";
 const iconSnippetSize3Xl = "3xl";

package/dist/components/Image/index.js

@@ -1,16 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useImageComponent } from "../../hooks/useImageComponent/index.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-CPul3CC8.js";
-const aspectRatio1_1 = "1/1";
-const aspectRatio4_3 = "4/3";
-const aspectRatio16_9 = "16/9";
-const aspectRatio21_9 = "21/9";
-const aspectRatio32_9 = "32/9";
-const aspectRatio48_9 = "48/9";
+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-BWnAPYBL.js";
+const objectFitContain = "contain";
+const objectFitCover = "cover";
+const objectFitNone = "none";
+const horizontalAlignmentLeft = "left";
+const horizontalAlignmentRight = "right";
+const horizontalAlignmentCenter = "center";
 const objectPositionCenter = "center";
 const objectPositionLeftTop = "top left";
 const objectPositionLeftCenter = "center left";
@@ -18,59 +19,47 @@ const objectPositionLeftBottom = "bottom left";
 const objectPositionRightTop = "top right";
 const objectPositionRightCenter = "center right";
 const objectPositionRightBottom = "bottom right";
-const objectFitContain = "contain";
-const objectFitCover = "cover";
-const objectFitNone = "none";
-const ImageContainerStyled = styled.div.withConfig({
+const aspectRatio1_1 = "1/1";
+const aspectRatio4_3 = "4/3";
+const aspectRatio16_9 = "16/9";
+const aspectRatio21_9 = "21/9";
+const aspectRatio32_9 = "32/9";
+const aspectRatio48_9 = "48/9";
+const ImageStyled = styled.img.withConfig({
   shouldForwardProp: filterProps(),
-  displayName: "ImageContainerStyled",
+  displayName: "ImageStyled",
   componentId: "sc-z3qszb-0"
 })({
-  overflow: "hidden",
-  position: "relative",
-  width: "100%",
-  height: "100%",
-  "& img": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    height: "100%",
-    objectFit: "cover",
-    width: "100%"
-  }
+  display: "block",
+  width: "100%"
 }, ({
-  aspectRatio
+  objectFit = "contain"
 }) => ({
-  aspectRatio
+  objectFit
 }), ({
-  roundedCorners
+  objectPosition
 }) => ({
-  borderRadius: roundedCorners ? getBorderRadius(borderRadiusMd) : getBorderRadius(borderRadiusNone)
+  objectPosition
 }), ({
-  objectFit = "contain"
+  horizontalAlignment = "left"
 }) => ({
-  "& img": {
-    objectFit
-  }
+  marginLeft: horizontalAlignment === "left" ? 0 : "auto",
+  marginRight: horizontalAlignment === "right" ? 0 : "auto"
 }), ({
-  objectPosition
+  corners = cornerStraight
 }) => ({
-  "& img": {
-    objectPosition
-  }
+  borderRadius: corners === "rounded" ? getBorderRadius(borderRadiusMd) : getBorderRadius(borderRadiusNone)
 }), ({
-  width,
-  height
+  aspectRatio
 }) => ({
-  width: width ? width : "100%",
-  height: height ? height : "100%"
-}));
+  aspectRatio
+}), getBottomSpacing);
 const Image = ({
+  alt = "",
   ...props
-}) => {
-  const ImageComponent = useImageComponent();
-  return /* @__PURE__ */ jsx(ImageContainerStyled, { aspectRatio: props.aspectRatio, roundedCorners: props.roundedCorners, objectFit: props.objectFit, objectPosition: props.objectPosition, width: props.width, height: props.height, children: /* @__PURE__ */ jsx(ImageComponent, { ...props }) });
-};
+}) => /* @__PURE__ */ jsx(ImageStyled, { ..."" === alt ? {
+  "aria-hidden": true
+} : {}, ...props, alt });
 export {
   aspectRatio16_9,
   aspectRatio1_1,
@@ -79,6 +68,9 @@ export {
   aspectRatio48_9,
   aspectRatio4_3,
   Image as default,
+  horizontalAlignmentCenter,
+  horizontalAlignmentLeft,
+  horizontalAlignmentRight,
   objectFitContain,
   objectFitCover,
   objectFitNone,

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

@@ -1,12 +1,14 @@
 import { ImgHTMLAttributes } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
-export declare const aspectRatio1_1 = "1/1";
-export declare const aspectRatio4_3 = "4/3";
-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;
+import { CornerStyle } from '../../foundations/types/CornerStyle';
+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";
@@ -15,50 +17,45 @@ 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 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> {
+export declare const aspectRatio1_1 = "1/1";
+export declare const aspectRatio4_3 = "4/3";
+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> {
     /**
      * Pin component's name from string to the concrete name
      */
     component?: 'Image';
     /**
-     * Image source URL
-     */
-    src: string;
-    /**
-     * Multiple sources for responsiveness
-     */
-    srcSet?: string;
-    /**
-     * Alternative description of image. Leave empty to mark image as decorative and hidden for screen readers.
+     * Object-fit variations
      */
-    alt?: string;
+    objectFit?: ImageObjectFit;
     /**
-     * Image aspect-ratio
+     * 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%.
      */
-    aspectRatio?: AspectRatio;
+    objectPosition?: ImageObjectPosition;
     /**
-     * Images can optionally have rounded corners by using the “roundedCorners” property.
+     * Horizontal alignment of image inside its container
      */
-    roundedCorners?: boolean;
+    horizontalAlignment?: ImageAlignment;
     /**
-     * Object-fit variations
+     * Corner variations
      */
-    objectFit?: ImageObjectFit;
+    corners?: CornerStyle;
     /**
-     * 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%.
+     * Image source URL
      */
-    objectPosition?: ImageObjectPosition;
+    src: string;
     /**
-     * While using aspectRatio is preferred, setting of a fixed height is also valid
+     * Alternative description of image. Leave empty to mark image as decorative and hidden for screen readers.
      */
-    height?: number;
+    alt?: string;
     /**
-     * While using aspectRatio is preferred, setting of a fixed width is also valid
+     * Image aspect-ratio
      */
-    width?: number;
+    aspectRatio: AspectRatio;
 }

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

@@ -1,2 +1,2 @@
 import { ImageProps } from './props';
-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" | "objectFit" | "objectPosition" | "roundedCorners">>> & string;
+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;

package/dist/components/ImageHeader/index.js

@@ -4,25 +4,25 @@ import Body from "../Body/index.js";
 import Button from "../Button/index.js";
 import Container from "../Container/index.js";
 import Heading from "../Heading/index.js";
-import { P as Price, b as priceSizeSm } from "../../index-Vub90geg.js";
-import { R as RichText } from "../../index-rbdl_kyF.js";
+import { P as Price, b as priceSizeSm } from "../../index-tT4JzApY.js";
+import { R as RichText } from "../../index-Cmrx-D-0.js";
 import { b as fontWeightLight } from "../../FontWeight-C2pGs7aR.js";
 import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { a as spacingMd, c as spacingSm, d as spacingXl, b as spacingXs, e as spacing2Xs, s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
-import ArtDirectedImage from "../ArtDirectedImage/index.js";
 import Badge from "../Badge/index.js";
 import ButtonGroup from "../ButtonGroup/index.js";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
-import viewport from "../../foundations/media-query/viewport/index.js";
+import ResponsiveImage from "../ResponsiveImage/index.js";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { b as colorBackgroundOverlay } from "../../BackgroundColor-DSOSZvNi.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
-import { a as flexOrientationVertical } from "../../styled-DG6HSLPJ.js";
-import { a as headingAlignCenter } from "../../styled-Csv7V9ez.js";
+import { a as flexOrientationVertical } from "../../styled-O5mL4jlL.js";
+import { a as headingAlignCenter } from "../../styled-Dmb8-99g.js";
 const imageHeaderVariantFull = "full";
 const imageHeaderVariantSplit = "split";
 const imageHeaderPositionRight = "right";
@@ -87,7 +87,7 @@ const ImageHeaderImagesContainerStyled = styled(GridItem).withConfig({
     };
   }
 });
-const ImageHeaderResponsiveImageStyled = styled(ArtDirectedImage).withConfig({
+const ImageHeaderResponsiveImageStyled = styled(ResponsiveImage).withConfig({
   displayName: "ImageHeaderResponsiveImageStyled",
   componentId: "sc-7ig3h-2"
 })({

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { ResponsiveImageProps } from '../ArtDirectedImage/props';
 import { BadgeProps } from '../Badge/props';
 import { BodyProps } from '../Body/props';
 import { ButtonProps } from '../Button/props';
@@ -8,6 +7,7 @@ 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';

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('../ArtDirectedImage').ArtDirectedImageProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../ArtDirectedImage').ArtDirectedImageProps>, 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 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>>;