@vodafone_de/brix-components 9.0.4 → 10.0.0

package/dist/components/Stepper/index.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import { useViewport } from "../../hooks/useViewport/index.js";
-import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import { u as useViewport } from "../../index-DKCzYjXw.js";
 import styled from "styled-components";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import viewport from "../../foundations/media-query/viewport/index.js";
@@ -17,7 +16,7 @@ import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { a as colorObjectBrand, b as colorObjectInverse } from "../../ObjectColor-DxgEnOBM.js";
 import { s as spacingMd } from "../../Spacing-8v6hcO2x.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const StepperItemStyled = styled.li.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "StepperItemStyled",
@@ -199,7 +198,7 @@ const Stepper = ({
     activeStep,
     steps,
     ariaLabelTemplate
-  }), children: /* @__PURE__ */ jsx(StepperStyled, { ref: stepperRef, ...props, children: steps.map((step, index) => /* @__PURE__ */ jsx(StepperItemStyled, { isActive: index + 1 === activeStep, next: index < activeStep, children: index + 1 === activeStep ? /* @__PURE__ */ jsx(StepperActiveItemStyled, { offset, "aria-current": "step", children: renderInlineRichTextFromOpenText(step) }) : renderInlineRichTextFromOpenText(step) }, `${step}`)) }) });
+  }), children: /* @__PURE__ */ jsx(StepperStyled, { ref: stepperRef, ...props, children: steps.map((step, index) => /* @__PURE__ */ jsx(StepperItemStyled, { isActive: index + 1 === activeStep, next: index < activeStep, children: index + 1 === activeStep ? /* @__PURE__ */ jsx(StepperActiveItemStyled, { offset, "aria-current": "step", children: step }) : step }, `${step}`)) }) });
 };
 export {
   Stepper as default

package/dist/components/SuggestInput/index.js

@@ -7,12 +7,11 @@ import FormHelperMessage from "../FormHelperMessage/index.js";
 import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
 import { I as IconLoader } from "../../index--RjkzZm0.js";
 import { a as inputStateError } 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";
 import { i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import { b as spacingSm, a as spacingXs, s as spacingMd } from "../../Spacing-8v6hcO2x.js";
-import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import Body from "../Body/index.js";
-import { f as strongTagName } from "../../tags-D7CRQqc1.js";
+import { f as strongTagName } from "../../tags-Cwgg3Gx2.js";
 import styled from "styled-components";
 import Card from "../Card/index.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
@@ -23,7 +22,7 @@ import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 import Flex from "../Flex/index.js";
 import LoadingSpinner from "../LoadingSpinner/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
@@ -375,7 +374,7 @@ const SuggestInput = forwardRef(({
         "aria-activedescendant": selectedOption > -1 ? `${uid}-item-${selectedOption}` : void 0,
         "aria-busy": isLoading ? isLoading : void 0,
         "aria-autocomplete": "list"
-      }, disabled, placeholder: renderInlineRichTextFromOpenText(placeholder), id: inputId }),
+      }, disabled, placeholder, id: inputId }),
       /* @__PURE__ */ jsxs(SuggestInputIconsBarStyled, { children: [
         /* @__PURE__ */ jsx(FlexItem, { grow: "full", children: /* @__PURE__ */ jsx(SuggestInputLoadingSpinner, { size: "xs", isActive: isLoading }) }),
         status && /* @__PURE__ */ jsx(FlexItem, { grow: "full", children: /* @__PURE__ */ jsx(FormHelperStatusIcon, { status }) }),

package/dist/components/Switch/index.js

@@ -15,12 +15,12 @@ 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 { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
-import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
+import { a as borderRadiusFull } from "../../BorderRadius-2LdggXbQ.js";
 import { a as borderWidthFocus, d as borderWidthSm } from "../../BorderWidth-BjXpOdM5.js";
 import { b as colorObjectInverse, d as colorObjectSelected, e as colorObjectUnselected } from "../../ObjectColor-DxgEnOBM.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";
 const getHandleIcon = (checked) => {
   const iconName = checked ? "Tick" : "Close";
   return /* @__PURE__ */ jsx(IconLoader, { size: iconSize2xs, name: iconName });

package/dist/components/TabGroup/index.js

@@ -16,12 +16,12 @@ import { getObjectColor } from "../../foundations/token/getObjectColor/index.js"
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { j as colorBorderSubtle, c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
-import { d as borderRadiusSm } from "../../BorderRadius-ClUShVLu.js";
+import { d as borderRadiusSm } from "../../BorderRadius-2LdggXbQ.js";
 import { a as borderWidthFocus } from "../../BorderWidth-BjXpOdM5.js";
 import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { a as colorObjectBrand } from "../../ObjectColor-DxgEnOBM.js";
 import { s as spacingMd, b as spacingSm, a as spacingXs, f as spacing2Xs, e as spacingXl } from "../../Spacing-8v6hcO2x.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const iconPositionLeft = "left";
 const iconPositionTop = "top";
 const tabGroupWidthFull = "full";

package/dist/components/TabularPrice/index.js

@@ -1,8 +1,7 @@
 "use client";
 import "react/jsx-runtime";
-import { T } from "../../index-TL0X3rXH.js";
-import "../../index-DCE5HNIR.js";
-import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import { T } from "../../index-DCXRnuHz.js";
+import "../../index-C2E3JrhF.js";
 export {
   T as default
 };

package/dist/components/TextList/index.js

@@ -1,9 +1,8 @@
 "use client";
 import "react/jsx-runtime";
-import { a, T } from "../../index-C4eCcl02.js";
-import "../../tags-D7CRQqc1.js";
+import { a, T } from "../../index-DP6Nlg-a.js";
+import "../../tags-Cwgg3Gx2.js";
 import "../../Spacing-8v6hcO2x.js";
-import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {
   a as TextListItem,
   T as default

package/dist/components/Textarea/index.js

@@ -6,7 +6,6 @@ import FormHelperLabel from "../FormHelperLabel/index.js";
 import FormHelperMessage from "../FormHelperMessage/index.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
 import { b as spacingSm, e as spacingXl, s as spacingMd, a as spacingXs } from "../../Spacing-8v6hcO2x.js";
-import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
@@ -19,11 +18,11 @@ import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBackgroundNeutral, a as colorBackgroundSubtle } from "../../BackgroundColor-e0N9tdDR.js";
 import { a as colorBorderNeutral, c as colorBorderFocus, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "../../BorderColor-BummoQ1-.js";
-import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd } from "../../BorderRadius-2LdggXbQ.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import { c as colorTextPlaceholder, a as colorTextNeutral } from "../../TextColor-BXVMXUVE.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";
 const TextareaWrapperStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
@@ -158,7 +157,7 @@ const Textarea = forwardRef(({
   return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, disabled, children: [
     /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
     /* @__PURE__ */ jsxs(TextareaWrapperStyled, { bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
-      /* @__PURE__ */ jsx(TextareaStyled, { ...textAreaProps, rows, status, placeholder: renderInlineRichTextFromOpenText(placeholder), isResizable, ref: innerRef }),
+      /* @__PURE__ */ jsx(TextareaStyled, { ...textAreaProps, rows, status, placeholder, isResizable, ref: innerRef }),
       /* @__PURE__ */ jsx(TextareaStatusIcon, { status, hasScrollbar })
     ] }),
     /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })

package/dist/components/TimeInput/index.js

@@ -6,7 +6,7 @@ import FormHelperLabel from "../FormHelperLabel/index.js";
 import FormHelperMessage from "../FormHelperMessage/index.js";
 import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
 import "../Input/index.js";
-import { a as InputStyled, I as InputWrapperStyled } from "../../styled-xKyZg4q9.js";
+import { a as InputStyled, I as InputWrapperStyled } from "../../styled-DmMk0W0J.js";
 import { i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import { s as spacingMd, a as spacingXs } from "../../Spacing-8v6hcO2x.js";
 import { bm as ClockIcon } from "../../_5gPlusIcon-CnxmOo1u.js";

package/dist/components/Tray/index.js

@@ -19,7 +19,7 @@ import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { d as colorBackgroundOverlayStatic } from "../../BackgroundColor-e0N9tdDR.js";
 import { a as borderWidthFocus } from "../../BorderWidth-BjXpOdM5.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
-import { a as flexOrientationVertical } from "../../styled-BxkvYuWW.js";
+import { a as flexOrientationVertical } from "../../styled-CUp4EbPh.js";
 const TrayOverlayStyled = styled("div").withConfig({
   displayName: "TrayOverlayStyled",
   componentId: "sc-os3mq3-0"

package/dist/components/UtilityLink/index.js

@@ -1,14 +1,32 @@
 "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";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
+import { a as borderWidthFocus } from "../../BorderWidth-BjXpOdM5.js";
+const UtilityLinkStyled = styled("a").withConfig({
+  displayName: "UtilityLinkStyled",
+  componentId: "sc-otjsul-0"
+})({
+  "&:focus-within": {
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+    }),
+    outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+    textDecoration: "underline"
+  }
+});
 const UtilityLink = ({
   children,
   ...props
 }) => {
   const LinkComponent = useLinkComponent();
-  return /* @__PURE__ */ jsx(LinkComponent, { ...sanitizeLinkProps(filterPropsForUnstyledComponent(props)), children });
+  return /* @__PURE__ */ jsx(UtilityLinkStyled, { as: LinkComponent, ...sanitizeLinkProps(filterPropsForUnstyledComponent(props)), children });
 };
 export {
   UtilityLink as default

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

@@ -0,0 +1 @@
+export declare const UtilityLinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement>, never>> & string;

package/dist/components/YoutubeVideo/index.js

@@ -5,9 +5,9 @@ import { useThirdPartyConsent } from "../../hooks/useThirdPartyConsent/index.js"
 import styled from "styled-components";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd } from "../../BorderRadius-2LdggXbQ.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";
 const YoutubeVideoStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "YoutubeVideoStyled",

package/dist/contentful/components.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { MapFunction } from './map/MapFunction';
-export declare const supportedComponents: readonly ["Accordion", "AccordionGroup", "Badge", "Body", "Button", "ButtonGroup", "ButtonAsLink", "Card", "Container", "ConsentMessage", "DiscoveryCard", "DiscoveryCardGroup", "Divider", "Grid", "GridItem", "Heading", "HifiIcon", "Link", "LinkAsButton", "LinkList", "IconSnippet", "IconSnippetList", "Image", "ImageHeader", "IconLoader", "Price", "MediaText", "ResponsiveImage", "RichTextContentful", "YoutubeVideo"];
+export declare const supportedComponents: readonly ["Accordion", "AccordionGroup", "Badge", "Body", "Button", "ButtonGroup", "ButtonAsLink", "Card", "Container", "ConsentMessage", "DiscoveryCard", "DiscoveryCardGroup", "Divider", "Grid", "GridItem", "Heading", "HifiIcon", "Link", "LinkAsButton", "LinkList", "IconSnippet", "IconSnippetList", "Image", "ImageHeader", "IconLoader", "Price", "MediaText", "ArtDirectedImage", "RichTextContentful", "YoutubeVideo"];
 type ComponentFeatures = {
     component: FC<any>;
     inspectorField: string;

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

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
 import "@contentful/live-preview/react";
-import { L } from "../../mapContentToComponents-C_O2rRrX.js";
+import { L } from "../../mapContentToComponents-DcPjYAXH.js";
 export {
   L as LivePreviewInspector
 };

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

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

package/dist/contentful/map/artDirectedImage.d.ts

@@ -0,0 +1,4 @@
+import { ArtDirectedImageProps } from '../../components/ArtDirectedImage';
+import { MapFunction } from './MapFunction';
+export declare const mapArtDirectedImageProps: (content: unknown) => ArtDirectedImageProps | false;
+export declare const mapArtDirectedImage: MapFunction;

package/dist/contentful/renderer/index.js

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

package/dist/{cssVars-ZsZIfkeD.js → cssVars-TmhA1NpG.js}

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import { l as loadingSpinnerOverlayCssVar, j as loadingSpinnerOverlays } from "./styled-BBXC0aka.js";
+import { l as loadingSpinnerOverlayCssVar, j as loadingSpinnerOverlays } from "./styled-D-fzMZNS.js";
 import { b as breakpoint_medium, a as breakpoint_large } from "./breakpoint-CzBSbbY7.js";
 const colorVodafoneRed = "colorVodafoneRed";
 const colorVodafoneRedTint = "colorVodafoneRedTint";

package/dist/filterProps-CxkibNnG.js

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

package/dist/foundations/GlobalStyle/index.js

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

package/dist/getSizesFromGridConfig-DKOLupyb.js

@@ -0,0 +1,48 @@
+import { m as maxWidthBreakpoint, e as containerMaxWidth } from "./index-DbG0QL9D.js";
+import { b as breakpoint_medium, a as breakpoint_large } from "./breakpoint-CzBSbbY7.js";
+const toVw = (cols) => cols ? `${cols / 12 * 100}vw` : void 0;
+const toPx = (cols) => cols ? `${containerMaxWidth * cols / 12}px` : void 0;
+const getSizesFromGridConfig = (gridConfig, containerContext = false) => {
+  const sm = toVw(gridConfig.sm) ?? "100vw";
+  const smPx = toPx(gridConfig.sm) ?? "1240px";
+  const md = toVw(gridConfig.md);
+  const mdPx = toPx(gridConfig.md);
+  const lgVw = toVw(gridConfig.lg);
+  const lgPx = toPx(gridConfig.lg);
+  if (containerContext) {
+    if (!md && !lgPx) {
+      return `(max-width: ${maxWidthBreakpoint}px) ${sm}, ${smPx}`;
+    }
+    if (md && !lgPx) {
+      if (sm === md) {
+        return `(max-width: ${maxWidthBreakpoint}px) ${md}, ${mdPx}`;
+      }
+      return `(max-width: ${breakpoint_medium}) ${sm}, (max-width: ${maxWidthBreakpoint}px) ${md}, ${mdPx}`;
+    }
+    if (lgPx) {
+      if (!md) {
+        return `(max-width: ${breakpoint_large}) ${sm}, (max-width: ${maxWidthBreakpoint}px) ${lgVw}, ${lgPx}`;
+      }
+      if (sm === md) {
+        return `(max-width: ${breakpoint_large}) ${md}, (max-width: ${maxWidthBreakpoint}px) ${lgVw}, ${lgPx}`;
+      }
+      return `(max-width: ${breakpoint_medium}) ${sm}, (max-width: ${breakpoint_large}) ${md}, (max-width: ${maxWidthBreakpoint}px) ${lgVw}, ${lgPx}`;
+    }
+  }
+  if (!md && !lgVw) {
+    return sm;
+  }
+  if (md && !lgVw) {
+    return sm === md ? md : `(max-width: ${breakpoint_medium}) ${sm}, ${md}`;
+  }
+  if (!md && lgVw) {
+    return `(max-width: ${breakpoint_large}) ${sm}, ${lgVw}`;
+  }
+  if (md && lgVw) {
+    return sm === md ? `(max-width: ${breakpoint_large}) ${md}, ${lgVw}` : `(max-width: ${breakpoint_medium}) ${sm}, (max-width: ${breakpoint_large}) ${md}, ${lgVw}`;
+  }
+  return "";
+};
+export {
+  getSizesFromGridConfig as g
+};

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

@@ -0,0 +1,37 @@
+import { ComponentType, JSX, ReactNode } from 'react';
+import { ImageProps } from '../../components/Image';
+/**
+ * Props of the image component.
+ */
+export type ImageComponentProps = JSX.IntrinsicElements['img'] & {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    aspectRatio?: `${number}/${number}`;
+};
+/**
+ * Image component type.
+ */
+export type ImageComponentType = ComponentType<ImageComponentProps>;
+/**
+ * Default image component using `<img>`.
+ * @todo Filter out non-standard image props here
+ */
+export declare const DefaultImage: ImageComponentType;
+/**
+ * Context for providing a custom image component.
+ */
+export declare const ImageContext: import('react').Context<ImageComponentType>;
+/**
+ * Hook to access the current image component from context.
+ */
+export declare const useImageComponent: () => ImageComponentType;
+/**
+ * Provider for ImageContext
+ */
+export declare const ImageProvider: ({ imageComponent, children, }: {
+    imageComponent: ImageComponentType;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const filterImagePropsToImageComponentProps: (props: ImageProps) => ImageComponentProps;

package/dist/hooks/useImageComponent/index.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { f as filterPropsForUnstyledComponent, p as propsNotPassToDomDefault } from "../../filterProps-CxkibNnG.js";
+const DefaultImage = (props) => /* @__PURE__ */ jsx("img", { ...filterPropsForUnstyledComponent(props) });
+const ImageContext = createContext(DefaultImage);
+const useImageComponent = () => useContext(ImageContext);
+const ImageProvider = ({
+  imageComponent,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(ImageContext, { value: imageComponent, children });
+};
+const imagePropsToPassOn = ["aspectRatio", "width", "height"];
+const filterImagePropsToImageComponentProps = (props) => {
+  return Object.fromEntries(Object.entries(props).filter(([key]) => imagePropsToPassOn.includes(key) || !propsNotPassToDomDefault.includes(key)));
+};
+export {
+  DefaultImage,
+  ImageContext,
+  ImageProvider,
+  filterImagePropsToImageComponentProps,
+  useImageComponent
+};

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

@@ -0,0 +1,49 @@
+import { ComponentType, JSX, ReactNode } from 'react';
+import { ArtDirectedImageSourceType } from '../../components/ArtDirectedImage';
+import { ImageProps } from '../../components/Image';
+/**
+ * Props of a single source for the picture component.
+ */
+type PictureComponentSourceProps = JSX.IntrinsicElements['source'] & {
+    srcSet: string;
+    media: string;
+};
+/**
+ * Props of the picture component.
+ */
+export type PictureComponentProps = JSX.IntrinsicElements['picture'] & {
+    sources: PictureComponentSourceProps[];
+    image: JSX.IntrinsicElements['img'] & {
+        src: string;
+        alt: string;
+        width?: number;
+        height?: number;
+        aspectRatio: `${number}/${number}`;
+    };
+};
+/**
+ * Picture component type.
+ */
+export type PictureComponentType = ComponentType<PictureComponentProps>;
+/**
+ * Default picture component using `<picture>`.
+ */
+export declare const DefaultPicture: PictureComponentType;
+/**
+ * Context for providing a custom picture component.
+ */
+export declare const PictureContext: import('react').Context<PictureComponentType>;
+/**
+ * Hook to access the current picture component from context.
+ */
+export declare const usePictureComponent: () => PictureComponentType;
+/**
+ * Provider for PictureContext
+ */
+export declare const PictureProvider: ({ pictureComponent, children, }: {
+    pictureComponent: PictureComponentType;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const filterImagePropsToPictureComponentImageProps: (props: ImageProps) => PictureComponentProps["image"];
+export declare const filterAspectRatioFromSources: (source: ArtDirectedImageSourceType) => PictureComponentSourceProps;
+export {};

package/dist/hooks/usePictureComponent/index.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, createElement, useContext } from "react";
+import { f as filterPropsForUnstyledComponent, p as propsNotPassToDomDefault } from "../../filterProps-CxkibNnG.js";
+const DefaultPicture = ({
+  sources,
+  image,
+  ...props
+}) => /* @__PURE__ */ jsxs("picture", { ...filterPropsForUnstyledComponent(props), children: [
+  sources.map(({
+    srcSet,
+    ...otherSourceProps
+  }) => /* @__PURE__ */ createElement("source", { ...filterPropsForUnstyledComponent(otherSourceProps), key: srcSet, srcSet })),
+  /* @__PURE__ */ jsx("img", { ...filterPropsForUnstyledComponent(image) })
+] });
+const PictureContext = createContext(DefaultPicture);
+const usePictureComponent = () => useContext(PictureContext);
+const PictureProvider = ({
+  pictureComponent,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(PictureContext, { value: pictureComponent, children });
+};
+const imagePropsToPassOn = ["aspectRatio"];
+const filterImagePropsToPictureComponentImageProps = (props) => {
+  return Object.fromEntries(Object.entries(props).filter(([key]) => imagePropsToPassOn.includes(key) || !propsNotPassToDomDefault.includes(key)));
+};
+const filterAspectRatioFromSources = (source) => {
+  console.log(source);
+  return Object.fromEntries(Object.entries(source).filter(([key]) => key !== "aspectRatio"));
+};
+export {
+  DefaultPicture,
+  PictureContext,
+  PictureProvider,
+  filterAspectRatioFromSources,
+  filterImagePropsToPictureComponentImageProps,
+  usePictureComponent
+};

package/dist/hooks/useViewport/index.js

@@ -1,22 +1,7 @@
-import { useState, useEffect } from "react";
-import { largeMediaQuery, mediumMediaQuery } from "../../foundations/media-query/viewport/index.js";
-import { v as viewportSm, a as viewportLg, b as viewportMd } from "../../Viewport-C35jx6QE.js";
-import { useMediaQuery } from "../useMediaQuery/index.js";
-const useViewport = () => {
-  const tablet = useMediaQuery(mediumMediaQuery);
-  const desktop = useMediaQuery(largeMediaQuery);
-  const [viewportState, setViewportState] = useState(viewportSm);
-  useEffect(() => {
-    if (desktop) {
-      setViewportState(viewportLg);
-    } else if (tablet) {
-      setViewportState(viewportMd);
-    } else {
-      setViewportState(viewportSm);
-    }
-  }, [tablet, desktop]);
-  return viewportState;
-};
+import "react";
+import "../../foundations/media-query/viewport/index.js";
+import { u } from "../../index-DKCzYjXw.js";
+import "../useMediaQuery/index.js";
 export {
-  useViewport
+  u as useViewport
 };

package/dist/{index-ClAH0TNC.js → index-72IFVw5W.js}

@@ -3,31 +3,33 @@ import { useMemo } from "react";
 import Flex from "./components/Flex/index.js";
 import FlexItem from "./components/FlexItem/index.js";
 import Heading, { isHeadingProps, headingAlignLeft } from "./components/Heading/index.js";
-import Image from "./components/Image/index.js";
+import Image, { isImageProps, aspectRatio16_9 } from "./components/Image/index.js";
 import Link, { isLinkProps } from "./components/Link/index.js";
-import { R as RichText } from "./index-C4eCcl02.js";
+import { R as RichText } from "./index-DP6Nlg-a.js";
 import RichTextContentful from "./components/RichtTextContentful/index.js";
 import YoutubeVideo from "./components/YoutubeVideo/index.js";
-import { r as pTagName, u as ulTagName, d as divTagName, l as liTagName } from "./tags-D7CRQqc1.js";
+import { p as pTagName, u as ulTagName, d as divTagName, l as liTagName } from "./tags-Cwgg3Gx2.js";
 import { a as fontWeightRegular } from "./FontWeight-DEBGHbtO.js";
 import { t as textHeadingXs, b as textHeadingSm } from "./HeadingSize-CfCRn3Lh.js";
 import { s as spacingMd, f as spacing2Xs, b as spacingSm, c as spacingNone } from "./Spacing-8v6hcO2x.js";
-import { useViewport } from "./hooks/useViewport/index.js";
+import { u as useViewport } from "./index-DKCzYjXw.js";
 import styled from "styled-components";
 import viewport from "./foundations/media-query/viewport/index.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 "./index-DCE5HNIR.js";
-import "./index-BJHhIBYl.js";
-import "html-react-parser";
+import { a as filterProps } from "./filterProps-CxkibNnG.js";
+import "./index-C2E3JrhF.js";
+import "./index-BsykXBqC.js";
+import "./index-DbG0QL9D.js";
+import "./index-Bu-7sSif.js";
 import "./hooks/useLinkComponent/index.js";
-import { z as isImageProps, p as aspectRatio16_9 } from "./validate-DYmFz2FF.js";
-import "./styled-7vJ7mrAA.js";
-import "./index-CEotMXpL.js";
+import "./components/UtilityLink/index.js";
+import "./hooks/useImageComponent/index.js";
+import "./styled-BKH3egch.js";
+import "./index-Dd-A7i9Y.js";
 import { i as isObject, h as hasMatchingComponentName } from "./isObject-BYBrvoVW.js";
 import { i as isBottomSpacing } from "./isBottomSpacing-BxfreCZU.js";
-import { a as flexOrientationVertical, f as flexOrientationHorizontal, b as flexJustifyStart } from "./styled-BxkvYuWW.js";
+import { a as flexOrientationVertical, f as flexOrientationHorizontal, b as flexJustifyStart } from "./styled-CUp4EbPh.js";
 const mediaTextPositionTop = "top";
 const mediaTextPositionLeft = "left";
 const mediaTextPositionRight = "right";

package/dist/{index-BJHhIBYl.js → index-BsykXBqC.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { S as ScreenreaderOnly } from "./index-DCE5HNIR.js";
+import { S as ScreenreaderOnly } from "./index-C2E3JrhF.js";
 import styled from "styled-components";
 import InlineLink from "./components/InlineLink/index.js";
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";