@vodafone_de/brix-components 7.0.6 → 7.0.8

package/README.md

@@ -1,3 +1,4 @@
 # Highly experimental build
 
 Very likely no one will use this build in production.
+

package/dist/{FontWeight-DEBGHbtO.js → FontWeight-CR22KTex.js}

@@ -2,7 +2,7 @@ const fontWeightLight = "light";
 const fontWeightRegular = "regular";
 const fontWeightBold = "bold";
 export {
-  fontWeightRegular as a,
-  fontWeightLight as b,
+  fontWeightLight as a,
+  fontWeightRegular as b,
   fontWeightBold as f
 };

package/dist/components/Accordion/index.js

@@ -16,7 +16,7 @@ import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { j as colorBorderSubtle, c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
 import { f as borderWidthNone, b as borderWidthUnselected, a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
-import { a as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
+import { b as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
 import { s as spacingMd, b as spacingNone, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
 import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-DsntmDNw.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";

package/dist/components/Badge/index.js

@@ -4,7 +4,7 @@ import "../../index-Cbojl4_Q.js";
 import "../../Spacing-D0HQH9YJ.js";
 import "../../SizeTypes-Ck_RdzIf.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { a, B } from "../../index-CKvLGUdD.js";
+import { a, B } from "../../index-ZHkR70j3.js";
 export {
   a as BadgeAppearanceColor,
   B as default

package/dist/components/Body/index.js

@@ -8,7 +8,7 @@ import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
-import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 const BodyStyled = styled.p.withConfig({

package/dist/components/Button/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { B as ButtonAsLink, g as getButtonIcon } from "../../index-57IF0yrd.js";
-import { B as ButtonStyled } from "../../styled-DLS1p_AJ.js";
+import { B as ButtonAsLink, g as getButtonIcon } from "../../index-C7meHOM4.js";
+import { B as ButtonStyled } from "../../styled-BSqC5P9h.js";
 const buttonFullWidth = "full";
 const buttonAutoWidth = "auto";
 const isButtonAsLinkProp = (props) => {

package/dist/components/ButtonAsLink/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { B } from "../../index-57IF0yrd.js";
+import { B } from "../../index-C7meHOM4.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {
   B as default

package/dist/components/ButtonGroup/index.js

@@ -5,7 +5,7 @@ import Flex from "../Flex/index.js";
 import { f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-B0YKfXTz.js";
 import FlexItem from "../FlexItem/index.js";
 import { c as spacingSm, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
-import { u as useViewport } from "../../index-Cs0Hw0dj.js";
+import { useViewport } from "../../hooks/useViewport/index.js";
 const renderButtons = (buttons, isMobile, isReversed = false) => {
   if (!isMobile && isReversed) {
     buttons = buttons.slice().reverse();

package/dist/components/Carousel/components/CarouselContext.d.ts

@@ -1,4 +1,4 @@
-import { FC, RefObject } from 'react';
+import { FC, MutableRefObject } from 'react';
 import { CarouselRuntimeProps } from '../props';
 /**
  * Can either be false to indicate that no button should be rendered
@@ -6,7 +6,8 @@ import { CarouselRuntimeProps } from '../props';
  */
 export type CarouselButton = (() => void) | false;
 export type CarouselState = {
-    ref: RefObject<HTMLDivElement> | undefined;
+    ref: MutableRefObject<HTMLDivElement> | undefined;
+    visibleItems: number;
     interactive: number[];
     goPrev: CarouselButton;
     goNext: CarouselButton;

package/dist/components/Carousel/index.js

@@ -78,6 +78,7 @@ const scrollTo = (element, left, behavior = "smooth") => {
 };
 const initialState = {
   ref: void 0,
+  visibleItems: 1,
   interactive: [0],
   goPrev: false,
   goNext: false,
@@ -98,57 +99,56 @@ const CarouselProvider = ({
   const [scrollSpyIndex, setScrollSpyIndex] = useState(void 0);
   const [interactive, setInteractive] = useState([]);
   const [needsFirstPosition, setNeedsFirstPosition] = useState(activeIndex !== 0);
-  const [carouselLayoutedAttributes, setCarouselLayoutedAttributes] = useState(void 0);
+  const [itemWidth, setItemWidth] = useState(0);
+  const [visibleItems, setVisibleItems] = useState(1);
   const [goPrev, setGoPrev] = useState(false);
   const [goNext, setGoNext] = useState(false);
   const [numberOfIndicators, setNumberOfIndicators] = useState(0);
   const [activeIndicator, setActiveIndicator] = useState(props.items[props.activeIndex].index);
-  const getCarouselLayoutedAttributes = () => {
-    const carouselElement = ref.current;
-    if (!carouselElement) {
-      return;
-    }
-    const itemWidth = carouselElement.querySelector("[data-carousel-item]").offsetWidth;
-    const track = carouselElement.offsetWidth;
-    const numberOfItemsThatFitOnTrack = Math.floor(track / itemWidth);
-    const visibleItems = Math.min(numberOfItemsThatFitOnTrack, props.items.length);
-    if ((carouselLayoutedAttributes == null ? void 0 : carouselLayoutedAttributes.itemWidth) !== itemWidth || (carouselLayoutedAttributes == null ? void 0 : carouselLayoutedAttributes.visibleItems) !== visibleItems) {
-      setCarouselLayoutedAttributes({
-        itemWidth,
-        visibleItems
-      });
-    }
-  };
   useEffect(() => {
-    if (!carouselLayoutedAttributes) {
-      return;
-    }
     if (loop) {
       const update = props.items.filter((item) => !item.ghost).length;
       setNumberOfIndicators(update);
     } else {
-      const update = props.items.filter((item) => !item.ghost).length - carouselLayoutedAttributes.visibleItems + 1;
+      const update = props.items.filter((item) => !item.ghost).length - visibleItems + 1;
       setNumberOfIndicators(update);
     }
-  }, [loop, carouselLayoutedAttributes, props.items]);
+  }, [loop, visibleItems, props.items]);
   useEffect(() => {
-    if (!carouselLayoutedAttributes) {
+    if (!(ref == null ? void 0 : ref.current)) {
+      return;
+    }
+    if (!itemWidth) {
       return;
     }
-    let updateInteractive = [...Array(carouselLayoutedAttributes.visibleItems).keys()].map((i) => activeIndex + i);
+    const track = ref == null ? void 0 : ref.current.offsetWidth;
+    setVisibleItems(Math.floor(track / itemWidth));
+  }, [itemWidth]);
+  useEffect(() => {
+    let updateInteractive = [...Array(visibleItems).keys()].map((i) => activeIndex + i);
     if (focus) {
       updateInteractive = [...Array(props.items.length).keys()];
     }
     setInteractive(updateInteractive);
-  }, [focus, activeIndex, carouselLayoutedAttributes, props.items]);
+  }, [focus, activeIndex, visibleItems, props.items]);
   useEffect(() => {
     if (!(ref == null ? void 0 : ref.current)) {
       return;
     }
-    window.addEventListener("resize", getCarouselLayoutedAttributes);
-    getCarouselLayoutedAttributes();
+    const handleResize = () => {
+      if (!window) {
+        return;
+      }
+      if (!(ref == null ? void 0 : ref.current)) {
+        return;
+      }
+      const itemWidth2 = ref.current.querySelector("[data-carousel-item]").offsetWidth;
+      setItemWidth(itemWidth2);
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
     return () => {
-      window.removeEventListener("resize", getCarouselLayoutedAttributes);
+      window.removeEventListener("resize", handleResize);
     };
   }, [ref.current]);
   useEffect(() => {
@@ -156,31 +156,25 @@ const CarouselProvider = ({
     if (!(ref == null ? void 0 : ref.current)) {
       return;
     }
-    if (!carouselLayoutedAttributes) {
+    if (!itemWidth) {
       return;
     }
     const handleScroll = (event) => {
-      if (!carouselLayoutedAttributes) {
-        return;
-      }
       const left = event.target.scrollLeft;
-      const ucurrent = getItemByScroll(left - carouselLayoutedAttributes.itemWidth / 2, carouselLayoutedAttributes.itemWidth, props.items);
+      const ucurrent = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
       setScrollSpyIndex(ucurrent);
     };
     const handleScrollend = (event) => {
-      if (!carouselLayoutedAttributes) {
-        return;
-      }
       const left = event.target.scrollLeft;
-      let updateActiveIndex = getItemByScroll(left - carouselLayoutedAttributes.itemWidth / 2, carouselLayoutedAttributes.itemWidth, props.items);
+      let updateActiveIndex = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
       if (loop) {
         const ghosts = [];
-        for (let i = 0, x = carouselLayoutedAttributes.visibleItems; i < x; i += 1) {
+        for (let i = 0, x = visibleItems; i < x; i += 1) {
           ghosts.push(props.items[i + updateActiveIndex].ghost);
         }
         if (!ghosts.includes(false)) {
           updateActiveIndex = props.items.findIndex((item) => item.index === props.items[updateActiveIndex].index && !item.ghost);
-          const left2 = updateActiveIndex * carouselLayoutedAttributes.itemWidth;
+          const left2 = updateActiveIndex * itemWidth;
           const behavior = "instant";
           scrollTo(ref.current, left2, behavior);
         }
@@ -198,34 +192,31 @@ const CarouselProvider = ({
       (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("scroll", handleScroll);
       (_b2 = ref.current) == null ? void 0 : _b2.removeEventListener("scrollend", handleScrollend);
     };
-  }, [ref.current, carouselLayoutedAttributes, props.items]);
+  }, [ref.current, itemWidth, visibleItems, props.items]);
   useEffect(() => {
     if (!ref.current) {
       return;
     }
-    if (!carouselLayoutedAttributes) {
-      return;
-    }
     if (scrollSpyIndex) {
       return;
     }
     if (activeIndex === scrollSpyIndex) {
       return;
     }
-    const left = activeIndex * carouselLayoutedAttributes.itemWidth;
+    const left = activeIndex * itemWidth;
     const behavior = needsFirstPosition ? "instant" : "smooth";
     scrollTo(ref.current, left, behavior);
-  }, [activeIndex, scrollSpyIndex, ref.current, carouselLayoutedAttributes]);
+  }, [activeIndex, scrollSpyIndex, ref.current, itemWidth]);
   useEffect(() => {
-    if (!props.onUpdate || !carouselLayoutedAttributes) {
+    if (!props.onUpdate) {
       return;
     }
     const visibleIndexes = [];
-    for (let i = 0, x = carouselLayoutedAttributes.visibleItems; i < x; i += 1) {
+    for (let i = 0, x = visibleItems; i < x; i += 1) {
       visibleIndexes.push(props.items[i + activeIndex].index);
     }
     props.onUpdate(visibleIndexes);
-  }, [activeIndex, carouselLayoutedAttributes]);
+  }, [activeIndex]);
   const movePrev = () => {
     const prev = activeIndex > 0 ? activeIndex - 1 : props.items.length - 1;
     setActiveIndex(prev);
@@ -250,6 +241,7 @@ const CarouselProvider = ({
   return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: {
     state: {
       ref,
+      visibleItems,
       interactive,
       goPrev,
       goNext,
@@ -411,7 +403,7 @@ const CarouselIndicator = () => {
       activeIndicator
     }
   } = useContext(CarouselContext);
-  if (!numberOfIndicators || 1 >= numberOfIndicators) {
+  if (!numberOfIndicators) {
     return null;
   }
   const indicators = [...Array(numberOfIndicators).keys()];
@@ -495,9 +487,6 @@ const Carousel = ({
   gridConfig = carouselDefaultGridConfig,
   ...props
 }) => {
-  if (0 === items.length) {
-    return null;
-  }
   activeIndex = activeIndex ? activeIndex : 0;
   activeIndex = loop ? activeIndex + items.length : activeIndex;
   const loopableItems = getItems(items, loop);

package/dist/components/Carousel/utils/useScrollSpy.d.ts

@@ -0,0 +1,2 @@
+import { CarouselState } from '../components/CarouselContext';
+export declare const useScrollSpy: (carouselState: CarouselState) => number;

package/dist/components/ConsentMessage/index.js

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import Body, { bodyAlignCenter } from "../Body/index.js";
 import Button, { buttonAutoWidth } from "../Button/index.js";
 import styled from "styled-components";
-import { B as ButtonStyled, t as tertiaryAppearance } from "../../styled-DLS1p_AJ.js";
+import { B as ButtonStyled, t as tertiaryAppearance } from "../../styled-BSqC5P9h.js";
 import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";

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

@@ -4,5 +4,5 @@ export declare const ConsentMessageBackgroundStyled: import('styled-components/d
  * Blurring the image create artifacts on the edges,
  * so I position these edges outside the visible area with 16px from each side to hide them
  */
-export declare const ConsentMessageBackgroundMapStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<ConsentMessageProps, "theme" | "backgroundImage">>> & string;
+export declare const ConsentMessageBackgroundMapStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<ConsentMessageProps, "backgroundImage" | "theme">>> & string;
 export declare const ConsentMessageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/DemoBox/index.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import IconSnippet from "../IconSnippet/index.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
-import { g as getUid } from "../../index-BRs8j3Vq.js";
+import { g as getUid } from "../../index-BeSd-V81.js";
 import { D as DemoBoxStyled } from "../../styled-ODPFCF1a.js";
 const heading = {
   component: "Heading",

package/dist/components/Dialog/index.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
-import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
 import { a as textHeadingMd } from "../../HeadingSize-CfCRn3Lh.js";
 import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import Heading from "../Heading/index.js";

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

@@ -1,5 +1,5 @@
 import { DialogProps } from './props';
-export declare const DialogOverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<DialogProps, "buttons" | "heading"> & {
+export declare const DialogOverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<DialogProps, "heading" | "buttons"> & {
     open: boolean;
 }>> & string;
 export declare const DialogCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Card').CardProps, never>> & string & Omit<import('react').FC<import('../Card').CardProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/DiscoveryCard/index.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-import { R as RichText } from "../../index-BRs8j3Vq.js";
-import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
+import { R as RichText } from "../../index-BeSd-V81.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
 import { b as textHeadingSm } from "../../HeadingSize-CfCRn3Lh.js";
 import { s as spacingMd, b as spacingNone, a as spacingXs, c as spacingSm } from "../../Spacing-D0HQH9YJ.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
-import { b as BadgeStyled, B as Badge } from "../../index-CKvLGUdD.js";
+import { b as BadgeStyled, B as Badge } from "../../index-ZHkR70j3.js";
 import Body, { bodyAlignLeft, bodyAlignCenter } from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import Link from "../Link/index.js";
-import { P as Price, b as priceSizeSm, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-WLBo71sp.js";
+import { P as Price, b as priceSizeSm, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-aUJfXBUI.js";
 import Image, { aspectRatio16_9, aspectRatio1_1 } from "../Image/index.js";
 import { a as cornerRounded } from "../../CornerStyle-JEbGNArR.js";
 import styled from "styled-components";
@@ -18,7 +18,7 @@ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 import Card from "../Card/index.js";
-import { a as LinkStyled } from "../../index-DrySIh-D.js";
+import { a as LinkStyled } from "../../index-C5GzK6_0.js";
 const discoveryCardOrientationVertical = "vertical";
 const discoveryCardOrientationHorizontal = "horizontal";
 const DiscoveryCardStyled = styled(Card).withConfig({

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

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes } from 'react';
 import { DiscoveryCardProps } from './props';
-export declare const DiscoveryCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Card').CardProps, Omit<DiscoveryCardProps, "badge" | "heading" | "price" | "uid" | "body" | "link" | "image">>> & string & Omit<import('react').FC<import('../Card').CardProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DiscoveryCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Card').CardProps, Omit<DiscoveryCardProps, "heading" | "body" | "uid" | "badge" | "price" | "link" | "image">>> & string & Omit<import('react').FC<import('../Card').CardProps>, keyof import('react').Component<any, {}, any>>;
 export declare const DiscoveryCardContentyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DiscoveryCardImageLinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, Pick<DiscoveryCardProps, "orientation" | "bottomSpacing"> & AnchorHTMLAttributes<HTMLAnchorElement>>> & string;
 export declare const DiscoveryCardImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Image').ImageProps, never>> & string & Omit<import('react').FC<import('../Image').ImageProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/DiscoveryCardGroup/index.js

@@ -6,7 +6,7 @@ import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
-import { a as LinkStyled } from "../../index-DrySIh-D.js";
+import { a as LinkStyled } from "../../index-C5GzK6_0.js";
 const DiscoveryCardGroupGridStyled = styled(Grid).withConfig({
   displayName: "DiscoveryCardGroupGridStyled",
   componentId: "sc-6axszn-0"

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

@@ -1,2 +1,2 @@
 import { GoogleMapProps } from './props';
-export declare const GoogleMapStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<GoogleMapProps, "apiKey" | "consentMessage">>> & string;
+export declare const GoogleMapStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<GoogleMapProps, "consentMessage" | "apiKey">>> & string;

package/dist/components/Heading/index.js

@@ -9,7 +9,7 @@ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index
 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 } from "../../FontWeight-DEBGHbtO.js";
+import { f as fontWeightBold, a as fontWeightLight } from "../../FontWeight-CR22KTex.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 const headingAlignLeft = "left";

package/dist/components/IconButton/index.js

@@ -13,7 +13,7 @@ import { b as borderRadiusMd, c as borderRadiusFull } from "../../BorderRadius-C
 import { d as borderWidthSelected } from "../../BorderWidth-DfOlyKK7.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
 import { a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
-import { b as buttonHeight, g as getButtonAppearance, p as primaryAppearance, a as ButtonAppearanceColor } from "../../styled-DLS1p_AJ.js";
+import { b as buttonHeight, g as getButtonAppearance, p as primaryAppearance, a as ButtonAppearanceColor } from "../../styled-BSqC5P9h.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 const iconButtonShapeSquare = "square";

package/dist/components/IconSnippet/index.js

@@ -4,9 +4,9 @@ import { df as IconLoader, it as iconSizeLg, iq as iconSize3xl, iv as iconSizeSm
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import InlineLink from "../InlineLink/index.js";
-import { R as RichText } from "../../index-BRs8j3Vq.js";
+import { R as RichText } from "../../index-BeSd-V81.js";
 import { d as divTagName } from "../../tags-DI6H1biK.js";
-import { a as spacingXs, s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import Link from "../Link/index.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
@@ -95,11 +95,10 @@ const IconSnippet = ({
   iconPosition = iconSnippetPositionLeft,
   iconAlign = iconSnippetAlignTop,
   tag = divTagName,
-  icon,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(IconSnippetStyled, { ...props, iconPosition, iconAlign, as: tag, children: [
-    /* @__PURE__ */ jsx(IconLoaderStyled, { ...icon, bottomSpacing: spacingNone, size: size === iconSnippetSizeLarge ? iconSizeLg : size === iconSnippetSize3Xl ? iconSize3xl : iconSizeSm }),
+    /* @__PURE__ */ jsx(IconLoaderStyled, { size: size === iconSnippetSizeLarge ? iconSizeLg : size === iconSnippetSize3Xl ? iconSize3xl : iconSizeSm, name: props.icon }),
     /* @__PURE__ */ jsx(IconSnippetContentStyled, { as: tag, iconPosition, children: getContents(contents) })
   ] });
 };

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

@@ -1,4 +1,4 @@
-import { IconLoaderProps } from '@vfde-react/inline-icon-library';
+import { IconName } from '@vfde-react/inline-icon-library';
 import { HTMLAttributes } from 'react';
 import { BodyProps } from '../Body';
 import { HeadingProps } from '../Heading';
@@ -28,7 +28,7 @@ export interface IconSnippetProps extends PatternProps, HTMLAttributes<HTMLDivEl
     /**
      * Icon
      */
-    icon: Omit<IconLoaderProps, 'size' | 'bottomSpacing'>;
+    icon: IconName;
     /**
      * contents must be an array containing any combination of HeadingProps, BodyProps, RichTextProps and/or InlineLinkProps;
      */

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

@@ -1,5 +1,5 @@
 import { IconSnippetPosition, IconSnippetProps } from './props';
-export declare const IconSnippetStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<IconSnippetProps, "size" | "icon" | "contents">>> & string;
+export declare const IconSnippetStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<IconSnippetProps, "size" | "contents" | "icon">>> & string;
 export declare const IconLoaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@vfde-react/inline-icon-library').IconLoaderProps, never>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;
 export declare const IconSnippetContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     iconPosition: IconSnippetPosition;

package/dist/components/ImageHeader/index.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Body from "../Body/index.js";
-import { b as fontWeightLight } from "../../FontWeight-DEBGHbtO.js";
+import { a as fontWeightLight } from "../../FontWeight-CR22KTex.js";
 import { s as spacingMd, c as spacingSm, d as spacingXl, a as spacingXs, e as spacing2Xs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
-import { g as getUid, R as RichText } from "../../index-BRs8j3Vq.js";
+import { g as getUid, R as RichText } from "../../index-BeSd-V81.js";
 import Button from "../Button/index.js";
 import Container from "../Container/index.js";
 import Heading, { headingAlignCenter } from "../Heading/index.js";
-import { P as Price, b as priceSizeSm } from "../../index-WLBo71sp.js";
+import { P as Price, b as priceSizeSm } from "../../index-aUJfXBUI.js";
 import styled from "styled-components";
-import { B as Badge } from "../../index-CKvLGUdD.js";
+import { B as Badge } from "../../index-ZHkR70j3.js";
 import ButtonGroup from "../ButtonGroup/index.js";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";

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

@@ -1,9 +1,9 @@
 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, "variant" | "position">>> & 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, "variant" | "position">>> & 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, "variant" | "position">>> & 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, "variant" | "position" | "contentGridDesktopColumns">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+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 ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant" | "contentGridDesktopColumns">>> & 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>>;
 export declare const ImageHeaderButtonGroupStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../ButtonGroup').ButtonGroupProps, never>> & string & Omit<import('react').FC<import('../ButtonGroup').ButtonGroupProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/InlineLink/index.js

@@ -8,7 +8,7 @@ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js"
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
 import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
-import { f as colorTextBrand, a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
+import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-DsntmDNw.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 const hover = {
   textDecoration: "none",

package/dist/components/Legend/index.js

@@ -3,7 +3,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import IconSnippet, { iconSnippetAlignCenter } from "../IconSnippet/index.js";
-import { R as RichText } from "../../index-BRs8j3Vq.js";
+import { R as RichText } from "../../index-BeSd-V81.js";
 import styled from "styled-components";
 const LegendStyled = styled.legend.withConfig({
   displayName: "LegendStyled",

package/dist/components/Link/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { L as LinkAsButton, a as LinkStyled, g as getLinkIcon } from "../../index-DrySIh-D.js";
+import { L as LinkAsButton, a as LinkStyled, g as getLinkIcon } from "../../index-C5GzK6_0.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 const isLinkAsButtonProp = (props) => {
   return props.href === void 0;

package/dist/components/LinkAsButton/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { L } from "../../index-DrySIh-D.js";
+import { L } from "../../index-C5GzK6_0.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {
   L as default

package/dist/components/LinkListItem/index.js

@@ -4,7 +4,7 @@ import { iu as iconSizeMd, df as IconLoader } from "../../index-Cbojl4_Q.js";
 import { s as spanTagName } from "../../tags-DI6H1biK.js";
 import { s as spacingMd, a as spacingXs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
-import { B as Badge } from "../../index-CKvLGUdD.js";
+import { B as Badge } from "../../index-ZHkR70j3.js";
 import styled from "styled-components";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { e as ease_in_sine } from "../../easing-Dm-pO8SY.js";

package/dist/components/Notification/index.js

@@ -7,7 +7,7 @@ import ButtonGroup from "../ButtonGroup/index.js";
 import Flex from "../Flex/index.js";
 import Heading from "../Heading/index.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-BRs8j3Vq.js";
+import { R as RichText } from "../../index-BeSd-V81.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
 import { e as colorBorderCritical, f as colorBorderWarning, d as colorBorderSuccess, k as colorBorderInformation } from "../../BorderColor-BummoQ1-.js";

package/dist/components/PickerGroup/index.js

@@ -6,7 +6,7 @@ import { e as spacing2Xs, s as spacingMd, c as spacingSm, b as spacingNone } fro
 import { useState, useEffect } from "react";
 import Grid from "../Grid/index.js";
 import { df as IconLoader, iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
-import { B as Badge } from "../../index-CKvLGUdD.js";
+import { B as Badge } from "../../index-ZHkR70j3.js";
 import ColorSwatch from "../ColorSwatch/index.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
@@ -27,7 +27,7 @@ import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
 import { a as borderWidthFocus, d as borderWidthSelected } from "../../BorderWidth-DfOlyKK7.js";
-import { a as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
+import { b as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
 import { o as opacityOverlay } from "../../Opacity-smkGiwsf.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";

package/dist/components/Price/index.js

@@ -2,7 +2,7 @@
 import "react/jsx-runtime";
 import "../../index-DQhtQZ85.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { c, P, i, g, f, h, p, a, e, d, b } from "../../index-WLBo71sp.js";
+import { c, P, i, g, f, h, p, a, e, d, b } from "../../index-aUJfXBUI.js";
 export {
   c as createScreenReaderText,
   P as default,