@vodafone_de/brix-components 7.0.8 → 7.0.9

package/dist/components/Accordion/index.js

@@ -1,8 +1,11 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { bf as ChevronDownIcon, df as IconLoader, iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
 import { useRef, useState, useEffect } from "react";
 import Collapsible from "../Collapsible/index.js";
+import IconLoader from "../IconLoader/index.js";
+import { c as iconSizeMd } from "../../styled-DPHfwWsx.js";
+import "../../NotificationErrorIcon-DMnAJgPN.js";
+import { bf as ChevronDownIcon } from "../../_5gPlusIcon-B_69VW4X.js";
 import styled from "styled-components";
 import Heading from "../Heading/index.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
@@ -16,10 +19,10 @@ 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 { b as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { a as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-DEBGHbtO.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";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const accordionToggleExpanded = "expanded";
 const accordionToggleCollapsing = "collapsing";
 const accordionToggleCollapsed = "collapsed";

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

@@ -1,4 +1,4 @@
-import { IconName } from '@vfde-react/inline-icon-library';
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
 import { HTMLAttributes, ReactNode } from 'react';
 import { HeadingProps } from '../Heading/props';
 import { PatternProps } from '../../foundations/PatternProps';

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

@@ -3,4 +3,4 @@ import { AccordionProps } from './props';
 export declare const AccordionStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, Omit<AccordionProps, "heading" | "uid">>> & string;
 export declare const AccordionSummaryStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, Omit<AccordionProps, "heading" | "uid">>> & string;
 export declare const AccordionHeadingStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<HeadingProps, HeadingProps>> & string & Omit<import('react').FC<HeadingProps>, keyof import('react').Component<any, {}, any>>;
-export declare const AccordionOpenIndicatorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@vfde-react/inline-icon-library').InlineIconProps, never>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').InlineIconProps>, keyof import('react').Component<any, {}, any>>;
+export declare const AccordionOpenIndicatorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", any> & string & Omit<import('react').FC<InlineIconProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/AccordionGroup/index.js

@@ -5,7 +5,7 @@ import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import { useState } from "react";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const AccordionGroupSingleExpand = ({
   bottomSpacing = spacingMd,
   ...props

package/dist/components/Badge/index.js

@@ -1,10 +1,11 @@
 "use client";
 import "react/jsx-runtime";
-import "../../index-Cbojl4_Q.js";
+import "../IconLoader/index.js";
+import "../../styled-DPHfwWsx.js";
 import "../../Spacing-D0HQH9YJ.js";
 import "../../SizeTypes-Ck_RdzIf.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { a, B } from "../../index-ZHkR70j3.js";
+import { a, B } from "../../index-BdPmdY9v.js";
 export {
   a as BadgeAppearanceColor,
   B as default

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

@@ -1,4 +1,4 @@
-import { IconName } from '@vfde-react/inline-icon-library';
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
 import { HTMLAttributes } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
 import { ObjectColor } from '../../foundations/token/types/ObjectColor';

package/dist/components/Body/index.js

@@ -8,9 +8,9 @@ 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-CR22KTex.js";
+import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const BodyStyled = styled.p.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "BodyStyled",

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

@@ -15,7 +15,7 @@ export interface BodyProps extends PatternProps, HTMLAttributes<HTMLParagraphEle
      */
     size?: TextBodySize;
     /**
-     * font weight can be light, regular or bold. if strong is used as a tag, bold is always used
+     * font weight can be light, regular or bold. if strong is used as a tag, weight is ignored and Body is always bold
      */
     weight?: FontWeight;
     /**

package/dist/components/BottomBar/index.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import Container from "../Container/index.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
-import { a as CardStyled } from "../../styled-CYugcGtx.js";
+import { a as CardStyled } from "../../styled-DINwm57V.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const bottomBarExtraPadding = 100;
 const BottomBarStyled = styled(CardStyled).withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/Button/index.js

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

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

@@ -6,5 +6,5 @@ import { ButtonProps } from './props';
  * base & alias tokens for now, but just keep it here
  */
 export declare const buttonHeight = "44px";
-export declare const ButtonIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('@vfde-react/inline-icon-library').IconLoaderProps, SvgInlineIconFactoryPropsWithPosition>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ButtonIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../IconLoader').IconLoaderProps, SvgInlineIconFactoryPropsWithPosition>> & string & Omit<import('react').FC<import('../IconLoader').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps>> & string;

package/dist/components/ButtonAsLink/index.js

@@ -1,6 +1,8 @@
 "use client";
 import "react/jsx-runtime";
-import { B } from "../../index-C7meHOM4.js";
+import { B } from "../../index-hMlQuoyx.js";
+import "../../hooks/useLinkComponent/index.js";
+import "../../filterProps-CBnuV0LI.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {
   B as default

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

@@ -1,2 +1,2 @@
 import { ButtonAsLinkProps } from './props';
-export declare const ButtonAsLinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, ButtonAsLinkProps>> & string;
+export declare const ButtonAsLinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ButtonAsLinkProps>> & string;

package/dist/components/ButtonGroup/index.js

@@ -1,17 +1,17 @@
 "use client";
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import Button from "../Button/index.js";
 import Flex from "../Flex/index.js";
-import { f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-B0YKfXTz.js";
+import { f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-CPUu8mvT.js";
 import FlexItem from "../FlexItem/index.js";
 import { c as spacingSm, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
-import { useViewport } from "../../hooks/useViewport/index.js";
+import { u as useViewport } from "../../index-Cs0Hw0dj.js";
 const renderButtons = (buttons, isMobile, isReversed = false) => {
   if (!isMobile && isReversed) {
     buttons = buttons.slice().reverse();
   }
   return buttons.map((button) => {
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(FlexItem, { as: "li", grow: isMobile ? "auto" : void 0, bottomSpacing: "None", children: /* @__PURE__ */ jsx(Button, { ...button, bottomSpacing: "None", width: isMobile ? "full" : button.width, children: button.children }, button.uid) }, button.uid) });
+    return /* @__PURE__ */ jsx(FlexItem, { as: "li", grow: isMobile ? "auto" : void 0, bottomSpacing: "None", children: /* @__PURE__ */ jsx(Button, { ...button, bottomSpacing: "None", width: isMobile ? "full" : button.width, children: button.children }, button.uid) }, button.uid);
   });
 };
 const ButtonGroup = ({

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

@@ -9,7 +9,7 @@ export interface ButtonGroupProps extends PatternProps, HTMLAttributes<HTMLDivEl
      */
     component?: 'ButtonGroup';
     /**
-     * if orientation is vertical
+     * if orientation is horizontal,
      * passed to flex as justify if viewport is tablet or larger
      * mobile is always rendered with justify-start
      */

package/dist/components/Card/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { d as divTagName } from "../../tags-DI6H1biK.js";
-import { a as CardStyled } from "../../styled-CYugcGtx.js";
-import { C } from "../../styled-CYugcGtx.js";
+import { d as divTagName } from "../../tags-D0ExIPLD.js";
+import { a as CardStyled } from "../../styled-DINwm57V.js";
+import { C } from "../../styled-DINwm57V.js";
 const Card = ({
   children,
   className,

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

@@ -1,11 +1,11 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
-import { articleTagName, asideTagName, divTagName, sectionTagName, spanTagName } from '../../foundations/tags';
+import { articleTagName, asideTagName, divTagName, mainTagName, navTagName, sectionTagName, spanTagName } from '../../foundations/tags';
 import { BackgroundColor } from '../../foundations/token/types/BackgroundColor';
 import { Theme } from '../../foundations/types/Theme';
 export type CardAppearance = 'primary' | 'secondary';
 export declare const CardAppearanceColor: Record<CardAppearance, BackgroundColor>;
-export type CardTag = typeof divTagName | typeof sectionTagName | typeof articleTagName | typeof asideTagName | typeof spanTagName;
+export type CardTag = typeof divTagName | typeof sectionTagName | typeof articleTagName | typeof asideTagName | typeof spanTagName | typeof navTagName | typeof mainTagName;
 export interface CardProps extends PatternProps, HTMLAttributes<HTMLElement> {
     /**
      * Card item content

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

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

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

@@ -3,5 +3,3 @@ import { CarouselProps } from '../props';
 type CarouselNavigationProps = Pick<CarouselProps, 'uid' | 'screenReaderInstruction' | 'prevAriaLabel' | 'nextAriaLabel'>;
 declare const CarouselNavigation: FC<CarouselNavigationProps>;
 export default CarouselNavigation;
-export * from '../props';
-export * from '../styled';

package/dist/components/Carousel/index.js

@@ -3,12 +3,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "@af-utils/scrollend-polyfill";
 import { createContext, useRef, useState, useEffect, useContext, createElement } from "react";
 import { useFocusWithin } from "../../hooks/useFocusWithin/index.js";
-import { l as liTagName, u as ulTagName } from "../../tags-DI6H1biK.js";
+import { l as liTagName, u as ulTagName } from "../../tags-D0ExIPLD.js";
 import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
-import { a as CardStyled } from "../../styled-CYugcGtx.js";
-import { G as GridStyled } from "../../styled-ZpQohvyx.js";
-import { G as GridItemStyled } from "../../styled-Cqp2oSjW.js";
+import { a as CardStyled } from "../../styled-DINwm57V.js";
+import { G as GridStyled } from "../../styled-BIc9Gu0G.js";
+import { G as GridItemStyled } from "../../styled-a-XazLSM.js";
 import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
@@ -16,9 +16,9 @@ import { getObjectColor } from "../../foundations/token/getObjectColor/index.js"
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
 import { c as colorObjectBrand, d as colorObjectUnselected } from "../../ObjectColor-BZDBuV8H.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 import IconButton from "../IconButton/index.js";
-import { S as ScreenreaderOnly } from "../../index-DQhtQZ85.js";
+import { S as ScreenreaderOnly } from "../../index-GwyCjtti.js";
 const getItems = (items, loop) => {
   const normalizedItems = [...items].map((item, index) => ({
     ...item,
@@ -78,7 +78,6 @@ const scrollTo = (element, left, behavior = "smooth") => {
 };
 const initialState = {
   ref: void 0,
-  visibleItems: 1,
   interactive: [0],
   goPrev: false,
   goNext: false,
@@ -99,56 +98,57 @@ const CarouselProvider = ({
   const [scrollSpyIndex, setScrollSpyIndex] = useState(void 0);
   const [interactive, setInteractive] = useState([]);
   const [needsFirstPosition, setNeedsFirstPosition] = useState(activeIndex !== 0);
-  const [itemWidth, setItemWidth] = useState(0);
-  const [visibleItems, setVisibleItems] = useState(1);
+  const [carouselLayoutedAttributes, setCarouselLayoutedAttributes] = useState(void 0);
   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 - visibleItems + 1;
+      const update = props.items.filter((item) => !item.ghost).length - carouselLayoutedAttributes.visibleItems + 1;
       setNumberOfIndicators(update);
     }
-  }, [loop, visibleItems, props.items]);
+  }, [loop, carouselLayoutedAttributes, props.items]);
   useEffect(() => {
-    if (!(ref == null ? void 0 : ref.current)) {
-      return;
-    }
-    if (!itemWidth) {
+    if (!carouselLayoutedAttributes) {
       return;
     }
-    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);
+    let updateInteractive = [...Array(carouselLayoutedAttributes.visibleItems).keys()].map((i) => activeIndex + i);
     if (focus) {
       updateInteractive = [...Array(props.items.length).keys()];
     }
     setInteractive(updateInteractive);
-  }, [focus, activeIndex, visibleItems, props.items]);
+  }, [focus, activeIndex, carouselLayoutedAttributes, props.items]);
   useEffect(() => {
     if (!(ref == null ? void 0 : ref.current)) {
       return;
     }
-    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();
+    window.addEventListener("resize", getCarouselLayoutedAttributes);
+    getCarouselLayoutedAttributes();
     return () => {
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("resize", getCarouselLayoutedAttributes);
     };
   }, [ref.current]);
   useEffect(() => {
@@ -156,25 +156,31 @@ const CarouselProvider = ({
     if (!(ref == null ? void 0 : ref.current)) {
       return;
     }
-    if (!itemWidth) {
+    if (!carouselLayoutedAttributes) {
       return;
     }
     const handleScroll = (event) => {
+      if (!carouselLayoutedAttributes) {
+        return;
+      }
       const left = event.target.scrollLeft;
-      const ucurrent = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
+      const ucurrent = getItemByScroll(left - carouselLayoutedAttributes.itemWidth / 2, carouselLayoutedAttributes.itemWidth, props.items);
       setScrollSpyIndex(ucurrent);
     };
     const handleScrollend = (event) => {
+      if (!carouselLayoutedAttributes) {
+        return;
+      }
       const left = event.target.scrollLeft;
-      let updateActiveIndex = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
+      let updateActiveIndex = getItemByScroll(left - carouselLayoutedAttributes.itemWidth / 2, carouselLayoutedAttributes.itemWidth, props.items);
       if (loop) {
         const ghosts = [];
-        for (let i = 0, x = visibleItems; i < x; i += 1) {
+        for (let i = 0, x = carouselLayoutedAttributes.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 * itemWidth;
+          const left2 = updateActiveIndex * carouselLayoutedAttributes.itemWidth;
           const behavior = "instant";
           scrollTo(ref.current, left2, behavior);
         }
@@ -192,31 +198,34 @@ const CarouselProvider = ({
       (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("scroll", handleScroll);
       (_b2 = ref.current) == null ? void 0 : _b2.removeEventListener("scrollend", handleScrollend);
     };
-  }, [ref.current, itemWidth, visibleItems, props.items]);
+  }, [ref.current, carouselLayoutedAttributes, props.items]);
   useEffect(() => {
     if (!ref.current) {
       return;
     }
+    if (!carouselLayoutedAttributes) {
+      return;
+    }
     if (scrollSpyIndex) {
       return;
     }
     if (activeIndex === scrollSpyIndex) {
       return;
     }
-    const left = activeIndex * itemWidth;
+    const left = activeIndex * carouselLayoutedAttributes.itemWidth;
     const behavior = needsFirstPosition ? "instant" : "smooth";
     scrollTo(ref.current, left, behavior);
-  }, [activeIndex, scrollSpyIndex, ref.current, itemWidth]);
+  }, [activeIndex, scrollSpyIndex, ref.current, carouselLayoutedAttributes]);
   useEffect(() => {
-    if (!props.onUpdate) {
+    if (!props.onUpdate || !carouselLayoutedAttributes) {
       return;
     }
     const visibleIndexes = [];
-    for (let i = 0, x = visibleItems; i < x; i += 1) {
+    for (let i = 0, x = carouselLayoutedAttributes.visibleItems; i < x; i += 1) {
       visibleIndexes.push(props.items[i + activeIndex].index);
     }
     props.onUpdate(visibleIndexes);
-  }, [activeIndex]);
+  }, [activeIndex, carouselLayoutedAttributes]);
   const movePrev = () => {
     const prev = activeIndex > 0 ? activeIndex - 1 : props.items.length - 1;
     setActiveIndex(prev);
@@ -241,7 +250,6 @@ const CarouselProvider = ({
   return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: {
     state: {
       ref,
-      visibleItems,
       interactive,
       goPrev,
       goNext,
@@ -403,7 +411,7 @@ const CarouselIndicator = () => {
       activeIndicator
     }
   } = useContext(CarouselContext);
-  if (!numberOfIndicators) {
+  if (!numberOfIndicators || 1 >= numberOfIndicators) {
     return null;
   }
   const indicators = [...Array(numberOfIndicators).keys()];
@@ -487,6 +495,9 @@ 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/Checkbox/index.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { iv as iconSizeSm, eB as NotificationErrorIcon } from "../../index-Cbojl4_Q.js";
+import { N as NotificationErrorIcon } from "../../NotificationErrorIcon-DMnAJgPN.js";
 import { useState, useEffect } from "react";
 import FormHelperMessage from "../FormHelperMessage/index.js";
+import { b as iconSizeSm } from "../../styled-DPHfwWsx.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
 import styled from "styled-components";
 import Label from "../Label/index.js";
@@ -21,7 +22,7 @@ import { d as borderRadiusSm } from "../../BorderRadius-ClUShVLu.js";
 import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
 import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 const CheckboxLabelStyled = styled(Label).withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/CheckboxGroup/index.js

@@ -5,10 +5,10 @@ import Checkbox from "../Checkbox/index.js";
 import Fieldset from "../Fieldset/index.js";
 import { f as spacingLg, s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
-import { F as FlexStyled } from "../../styled-B0YKfXTz.js";
+import { F as FlexStyled } from "../../styled-CPUu8mvT.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const CheckboxGroupStyled = styled(FlexStyled).withConfig({
   shouldForwardProp: filterProps(),
   displayName: "CheckboxGroupStyled",

package/dist/components/Collapsible/index.js

@@ -8,7 +8,7 @@ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js"
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
 import { b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const CollapsibleStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "CollapsibleStyled",

package/dist/components/ColorSwatch/index.js

@@ -2,14 +2,14 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { g as getComputedBackgroundColor, p as parseColorToRgbObject, a as getContrastRatio } from "../../colorUtils-BSfFfgbi.js";
-import { iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
 import styled from "styled-components";
+import { c as iconSizeMd } from "../../styled-DPHfwWsx.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { a as colorBorderNeutral } from "../../BorderColor-BummoQ1-.js";
 import { b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 const colorSwatchSizeSmall = "sm";
 const colorSwatchSizeMedium = "md";

package/dist/components/ColorSwatchGroup/index.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { s as spacingMd, e as spacing2Xs } from "../../Spacing-D0HQH9YJ.js";
 import ColorSwatch, { colorSwatchSizeSmall } from "../ColorSwatch/index.js";
-import { iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
+import { s as spacingMd, e as spacing2Xs } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
-import { F as FlexStyled } from "../../styled-B0YKfXTz.js";
+import { F as FlexStyled } from "../../styled-CPUu8mvT.js";
+import { c as iconSizeMd } from "../../styled-DPHfwWsx.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 const ColorSwatchListStyled = styled(FlexStyled).withConfig({
   shouldForwardProp: filterProps(),

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
+import { ColorSwatchProps, ColorSwatchSizes } from '../ColorSwatch';
 import { PatternProps } from '../../foundations/PatternProps';
-import { ColorSwatchProps, ColorSwatchSizes } from '../ColorSwatch/props';
 export interface ColorSwatchGroupProps extends PatternProps, HTMLAttributes<HTMLUListElement> {
     /**
      * Pin component's name from string to the concrete name

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-BSqC5P9h.js";
+import { B as ButtonStyled, t as tertiaryAppearance } from "../../styled-C4eI47I1.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, "backgroundImage" | "theme">>> & 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, "theme" | "backgroundImage">>> & 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/Container/index.js

@@ -10,7 +10,7 @@ import { j as colorBorderSubtle } from "../../BorderColor-BummoQ1-.js";
 import { e as borderWidthDivider } from "../../BorderWidth-DfOlyKK7.js";
 import { d as spacingXl, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 import { f as colorBackgroundBrand, e as colorBackgroundBrandGradient, a as colorBackgroundSubtle, c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 const ContainerAppearanceColor = {
   primary: colorBackgroundNeutral,
@@ -68,8 +68,9 @@ const Container = ({
   className,
   children,
   appearance = "primary",
+  tag = "div",
   ...props
-}) => /* @__PURE__ */ jsx(ContainerBackgroundStyled, { className: `${className ? className : ""} ${["tertiary", "alternative"].indexOf(appearance) > -1 ? "Dark" : props.theme}`, appearance, ...props, children: /* @__PURE__ */ jsx(ContainerCenterStyled, { children }) });
+}) => /* @__PURE__ */ jsx(ContainerBackgroundStyled, { className: `${className ? className : ""} ${["tertiary", "alternative"].indexOf(appearance) > -1 ? "Dark" : props.theme}`, appearance, as: tag, ...props, children: /* @__PURE__ */ jsx(ContainerCenterStyled, { children }) });
 export {
   ContainerAppearanceColor,
   Container as default