@vodafone_de/brix-components 17.1.2 → 18.0.0

package/dist/{BorderRadius-Co-IV3fn.js → BorderRadius-0jhn76gB.js}

@@ -3,8 +3,8 @@ const borderRadiusSm = "borderRadiusSm";
 const borderRadiusMd = "borderRadiusMd";
 const borderRadiusFull = "borderRadiusFull";
 export {
-  borderRadiusSm as a,
+  borderRadiusNone as a,
   borderRadiusMd as b,
-  borderRadiusNone as c,
+  borderRadiusSm as c,
   borderRadiusFull as d
 };

package/dist/{BorderWidth-OZWeXaq_.js → BorderWidth-CwrNKc0Q.js}

@@ -6,8 +6,8 @@ const borderWidthFocus = "Focus";
 const borderWidthSm = "Sm";
 const borderWidthMd = "Md";
 export {
-  borderWidthFocus as a,
-  borderWidthUnselected as b,
+  borderWidthUnselected as a,
+  borderWidthFocus as b,
   borderWidthSelected as c,
   borderWidthSm as d,
   borderWidthDivider as e,

package/dist/ButtonAppearanceHelper-3qIbHGWJ.js

@@ -0,0 +1,102 @@
+import forcedColors from "./foundations/media-query/forcedColors/index.js";
+import { e as ease_in_sine } from "./easing-Dm-pO8SY.js";
+import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
+import { getHoverColor } from "./foundations/token/getHoverColor/index.js";
+import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
+import { getPressColor } from "./foundations/token/getPressColor/index.js";
+import { c as colorBorderFocus } from "./BorderColor-BACbvI20.js";
+import { b as borderWidthFocus, c as borderWidthSelected } from "./BorderWidth-CwrNKc0Q.js";
+import { a as colorObjectNeutral, d as colorObjectBrand, e as colorObjectInverse } from "./ObjectColor-CSHEae46.js";
+import { g as getForegroundColor } from "./colorUtils-c9PiZEci.js";
+const ButtonAppearanceColor = {
+  primary: colorObjectBrand,
+  secondary: colorObjectNeutral,
+  tertiary: colorObjectNeutral
+};
+const getButtonAppearanceColors = (appearance) => ({
+  background: getObjectColor(ButtonAppearanceColor[appearance]),
+  color: getForegroundColor(ButtonAppearanceColor[appearance]),
+  hoverBackgroundColor: getHoverColor(ButtonAppearanceColor[appearance]),
+  pressedBackgroundColor: getPressColor(ButtonAppearanceColor[appearance]),
+  focusColor: getBorderColor(colorBorderFocus)
+});
+const buildBaseButtonStyle = ({
+  background,
+  color,
+  hoverBackgroundColor,
+  pressedBackgroundColor,
+  focusColor
+}) => ({
+  ...forcedColors({
+    background: "ButtonFace",
+    color: "ButtonText"
+  }),
+  border: "unset",
+  background,
+  color,
+  transitionProperty: "background, color, box-shadow",
+  transitionDuration: "0.2s",
+  transitionTimingFunction: ease_in_sine,
+  /* No visible box-shadow. as transition endpoint for focus */
+  boxShadow: `inset transparent 0px 0px 0px ${hoverBackgroundColor}`,
+  "&:visited": {
+    ...forcedColors({
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    color,
+    background
+  },
+  "&:hover": {
+    ...forcedColors({
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    color,
+    background: hoverBackgroundColor,
+    /* No visible box-shadow. as transition point for focus and from tertiary */
+    boxShadow: `inset transparent 0px 0px 0px`
+  },
+  "&:active": {
+    ...forcedColors({
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    color,
+    backgroundColor: pressedBackgroundColor
+  },
+  "&:focus-visible, &:focus-within": {
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`,
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    boxShadow: `${focusColor} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+    color,
+    background: hoverBackgroundColor,
+    outline: "none"
+  }
+});
+const applyTertiaryAppearance = (style, background) => {
+  const color = getForegroundColor(colorObjectInverse);
+  return {
+    ...style,
+    color,
+    background: "transparent",
+    boxShadow: `inset ${background} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}`,
+    "&:visited": {
+      color,
+      background: "transparent"
+    }
+  };
+};
+const getButtonAppearance = (appearance) => {
+  const colors = getButtonAppearanceColors(appearance);
+  const style = buildBaseButtonStyle(colors);
+  return "tertiary" === appearance ? applyTertiaryAppearance(style, colors.background) : style;
+};
+export {
+  ButtonAppearanceColor as B,
+  getButtonAppearance as g
+};

package/dist/CornerStyle-n77nckhh.js

@@ -0,0 +1,7 @@
+const cornerStraight = "straight";
+const cornerRounded = "rounded";
+const cornerStyles = [cornerStraight, cornerRounded];
+export {
+  cornerStyles as a,
+  cornerRounded as c
+};

package/dist/{colorUtils-CfSj2Iqa.js → colorUtils-c9PiZEci.js}

@@ -1,4 +1,4 @@
-import { b as baseColors, a as backgroundColors, o as objectColors } from "./cssVars-DIZd9rHN.js";
+import { b as baseColors, a as backgroundColors, o as objectColors } from "./cssVars-DKs5LlTN.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { b as colorTextInverseStatic, a as colorTextNeutral, d as colorTextNeutralStatic, e as colorTextInverse } from "./TextColor-DsntmDNw.js";
 const backgroundForegroundColorMapping = {

package/dist/components/Accordion/index.js

@@ -18,7 +18,7 @@ import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
 import { g as getSpacing } from "../../index-l-i-mIeP.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { f as colorBorderSubtle, c as colorBorderFocus } from "../../BorderColor-BACbvI20.js";
-import { g as borderWidthNone, b as borderWidthUnselected, a as borderWidthFocus } from "../../BorderWidth-OZWeXaq_.js";
+import { g as borderWidthNone, a as borderWidthUnselected, b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
 import { f as fontWeightRegular, a as fontWeightBold } from "../../FontWeight-C8c-UnWu.js";
 import { s as spacingMd, b as spacingNone, a as spacingXs } from "../../Spacing-Dj-qX3Z5.js";
 import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-DsntmDNw.js";
@@ -137,6 +137,10 @@ const Accordion = ({
   const lastOpenStateRef = useRef(expanded);
   const [toggle, setToggle] = useState(expanded ? accordionToggleExpanded : accordionToggleCollapsed);
   const [animated, setAnimated] = useState(true);
+  const handleOnToggleRef = useRef(props.handleOnToggle);
+  useEffect(() => {
+    handleOnToggleRef.current = props.handleOnToggle;
+  });
   useEffect(() => {
     const target = ref.current;
     const observer = new MutationObserver(() => {
@@ -145,8 +149,8 @@ const Accordion = ({
         lastOpenStateRef.current = currentOpen;
         setAnimated(false);
         setToggle(currentOpen ? accordionToggleExpanded : accordionToggleCollapsed);
-        if (props.handleOnToggle) {
-          props.handleOnToggle(uid, currentOpen);
+        if (handleOnToggleRef.current) {
+          handleOnToggleRef.current(uid, currentOpen);
         }
       }
     });
@@ -157,7 +161,7 @@ const Accordion = ({
       });
     }
     return () => observer.disconnect();
-  }, [uid, props]);
+  }, [uid]);
   useEffect(() => {
     if (expanded && accordionToggleExpanded === toggle) {
       return;

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

@@ -161,12 +161,13 @@ export declare const accordionSchema: z.ZodObject<{
             error_location: z.ZodOptional<z.ZodString>;
         }, z.core.$loose>>;
     }, z.core.$loose>;
-    iconName: z.ZodOptional<z.ZodEnum<{
+    icon: z.ZodOptional<z.ZodEnum<{
         Menu: "Menu";
         Calendar: "Calendar";
         Filter: "Filter";
         Grid: "Grid";
         Notification: "Notification";
+        Video: "Video";
         Focus: "Focus";
         AbTest: "AbTest";
         Above28: "Above28";
@@ -721,7 +722,6 @@ export declare const accordionSchema: z.ZodObject<{
         VfHappyHelpful: "VfHappyHelpful";
         VfHappy: "VfHappy";
         VideoFrame: "VideoFrame";
-        Video: "Video";
         Virtuoso: "Virtuoso";
         VirusProtection: "VirusProtection";
         VocSensor: "VocSensor";

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

@@ -224,12 +224,13 @@ export declare const accordionGroupSchema: z.ZodObject<{
                 error_location: z.ZodOptional<z.ZodString>;
             }, z.core.$loose>>;
         }, z.core.$loose>;
-        iconName: z.ZodOptional<z.ZodEnum<{
+        icon: z.ZodOptional<z.ZodEnum<{
             Menu: "Menu";
             Calendar: "Calendar";
             Filter: "Filter";
             Grid: "Grid";
             Notification: "Notification";
+            Video: "Video";
             Focus: "Focus";
             AbTest: "AbTest";
             Above28: "Above28";
@@ -784,7 +785,6 @@ export declare const accordionGroupSchema: z.ZodObject<{
             VfHappyHelpful: "VfHappyHelpful";
             VfHappy: "VfHappy";
             VideoFrame: "VideoFrame";
-            Video: "Video";
             Virtuoso: "Virtuoso";
             VirusProtection: "VirusProtection";
             VocSensor: "VocSensor";

package/dist/components/ArtDirectedImage/index.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { a as ContainerContext } from "../../index-iCvdBgcJ.js";
-import { a as GridContext, c as GridItemContext } from "../../index-B0jIyAgf.js";
+import { a as ContainerContext } from "../../index-C_6tWuWh.js";
+import { a as GridContext, c as GridItemContext } from "../../index-E0RMtc9X.js";
 import { v as viewport, c as breakpoint_medium_number, a as breakpoint_large, b as breakpoint_medium } from "../../index-CG4uiVbZ.js";
 import { usePictureComponent, filterAspectRatioFromSources, filterImagePropsToPictureComponentImageProps } from "../../hooks/usePictureComponent/index.js";
-import { g as getSizesFromGridConfig } from "../../getSizesFromGridConfig-BqDW79mt.js";
+import { g as getSizesFromGridConfig } from "../../getSizesFromGridConfig-C-GBct4J.js";
 import styled from "styled-components";
 import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";

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

@@ -131,15 +131,6 @@ export declare const artDirectedImageSchema: z.ZodObject<{
             contain: "contain";
             cover: "cover";
         }>>;
-        objectPosition: z.ZodOptional<z.ZodEnum<{
-            center: "center";
-            "top left": "top left";
-            "center left": "center left";
-            "bottom left": "bottom left";
-            "top right": "top right";
-            "center right": "center right";
-            "bottom right": "bottom right";
-        }>>;
         roundedCorners: z.ZodOptional<z.ZodBoolean>;
         src: z.ZodString;
         alt: z.ZodOptional<z.ZodString>;

package/dist/components/Badge/index.js

@@ -4,7 +4,7 @@ import "../../index-DcEZ9vor.js";
 import "../../IconSize-Da9zhR76.js";
 import "../../SizeTypes-Ck_RdzIf.js";
 import "../../Spacing-Dj-qX3Z5.js";
-import { B } from "../../index-CWByESA7.js";
+import { B } from "../../index-h88pZ6zH.js";
 import { B as B2, b, a, p, s, c, t } from "../../props-Dt5kqR3j.js";
 export {
   B2 as BadgeAppearanceColor,

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

@@ -81,6 +81,7 @@ export declare const badgeSchema: z.ZodObject<{
         Filter: "Filter";
         Grid: "Grid";
         Notification: "Notification";
+        Video: "Video";
         Focus: "Focus";
         AbTest: "AbTest";
         Above28: "Above28";
@@ -635,7 +636,6 @@ export declare const badgeSchema: z.ZodObject<{
         VfHappyHelpful: "VfHappyHelpful";
         VfHappy: "VfHappy";
         VideoFrame: "VideoFrame";
-        Video: "Video";
         Virtuoso: "Virtuoso";
         VirusProtection: "VirusProtection";
         VocSensor: "VocSensor";

package/dist/components/BottomBar/index.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { C as Container } from "../../index-iCvdBgcJ.js";
+import { C as Container } from "../../index-C_6tWuWh.js";
 import { s as spacingMd, b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
 import { a as themeLight } from "../../Theme-B6kzt-0D.js";
 import styled from "styled-components";
-import { C as CardStyled } from "../../styled-bzTYGIm_.js";
+import { C as CardStyled } from "../../styled-DDY0xAl_.js";
 import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { g as getSpacing } from "../../index-l-i-mIeP.js";
-import { c as borderRadiusNone } from "../../BorderRadius-Co-IV3fn.js";
+import { a as borderRadiusNone } from "../../BorderRadius-0jhn76gB.js";
 import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
 const bottomBarExtraPadding = 100;
 const BottomBarStyled = styled(CardStyled).withConfig({
@@ -79,8 +79,8 @@ const BottomBar = ({
   useEffect(() => {
     document.documentElement.classList.toggle("HasObscuringBottomBar", visible);
     document.documentElement.style.setProperty("--bottomBarHeight", `${bottomBarHeight}px`);
-  }, [bottomBarHeight, props.children]);
-  return /* @__PURE__ */ jsx(BottomBarStyled, { "aria-hidden": true, className: `${theme} ${props.className}`, ref: bottomBarRef, ...props, visible, children: /* @__PURE__ */ jsx(Container, { padding: spacingNone, children: props.children }) });
+  }, [bottomBarHeight, props.children, visible]);
+  return /* @__PURE__ */ jsx(BottomBarStyled, { className: `${theme} ${props.className}`, inert: !visible, ref: bottomBarRef, ...props, visible, children: /* @__PURE__ */ jsx(Container, { padding: spacingNone, children: props.children }) });
 };
 export {
   BottomBar as default

package/dist/components/Button/ButtonAppearanceHelper.test.d.ts

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

package/dist/components/Button/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { B as ButtonAsLink, g as getButtonIcon } from "../../index-BIa9NKUU.js";
-import { B as ButtonStyled } from "../../styled-DRNdxc1V.js";
+import { B as ButtonAsLink, g as getButtonIcon } from "../../index-DqdKVD9N.js";
+import { B as ButtonStyled } from "../../styled-BJ9cE7xy.js";
 import { i } from "../../props-BrZdj0mO.js";
 const isButtonAsLinkProp = (props) => {
   return props.href !== void 0;

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

@@ -80,6 +80,7 @@ export declare const buttonSchema: z.ZodObject<{
         Filter: "Filter";
         Grid: "Grid";
         Notification: "Notification";
+        Video: "Video";
         Focus: "Focus";
         AbTest: "AbTest";
         Above28: "Above28";
@@ -634,7 +635,6 @@ export declare const buttonSchema: z.ZodObject<{
         VfHappyHelpful: "VfHappyHelpful";
         VfHappy: "VfHappy";
         VideoFrame: "VideoFrame";
-        Video: "Video";
         Virtuoso: "Virtuoso";
         VirusProtection: "VirusProtection";
         VocSensor: "VocSensor";

package/dist/components/ButtonAsLink/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { B } from "../../index-BIa9NKUU.js";
+import { B } from "../../index-DqdKVD9N.js";
 import "../../hooks/useLinkComponent/index.js";
 import "../../sanitizeLinkProps-D2Kkovy1.js";
 import "../../shouldForwardProp-CONMmlMa.js";

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

@@ -116,6 +116,7 @@ export declare const buttonGroupSchema: z.ZodObject<{
             Filter: "Filter";
             Grid: "Grid";
             Notification: "Notification";
+            Video: "Video";
             Focus: "Focus";
             AbTest: "AbTest";
             Above28: "Above28";
@@ -670,7 +671,6 @@ export declare const buttonGroupSchema: z.ZodObject<{
             VfHappyHelpful: "VfHappyHelpful";
             VfHappy: "VfHappy";
             VideoFrame: "VideoFrame";
-            Video: "Video";
             Virtuoso: "Virtuoso";
             VirusProtection: "VirusProtection";
             VocSensor: "VocSensor";

package/dist/components/Calendar/components/Footer/helpers/getFooterText.test.d.ts

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

package/dist/components/Calendar/index.js

@@ -27,8 +27,8 @@ import { getOpacity } from "../../foundations/token/getOpacity/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { d as colorBackgroundSubtle, a as colorBackgroundNeutral } from "../../BackgroundColor-Ba4D10TC.js";
 import { c as colorBorderFocus, a as colorBorderNeutral } from "../../BorderColor-BACbvI20.js";
-import { d as borderRadiusFull, a as borderRadiusSm } from "../../BorderRadius-Co-IV3fn.js";
-import { a as borderWidthFocus } from "../../BorderWidth-OZWeXaq_.js";
+import { d as borderRadiusFull, c as borderRadiusSm } from "../../BorderRadius-0jhn76gB.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
 import { f as fontWeightRegular, a as fontWeightBold } from "../../FontWeight-C8c-UnWu.js";
 import { f as colorObjectSelected } from "../../ObjectColor-CSHEae46.js";
 import { a as opacityDisabled, o as opacityOverlay } from "../../Opacity-smkGiwsf.js";
@@ -4784,80 +4784,84 @@ function createPlainFooterText(text) {
     sr: text
   };
 }
-function getFooterText(mode, error = false, selected) {
-  if (error) {
-    const text = getFooterTextForMode(mode);
-    return createPlainFooterText(text);
+function getSingleFooterText(selected) {
+  const date = selected;
+  if (!date) {
+    return createPlainFooterText(footerTexts.single.instruction);
   }
-  if (mode === "single") {
-    const date = selected;
-    if (!date) {
-      return createPlainFooterText(footerTexts.single.instruction);
-    }
+  return {
+    visual: formatTemplate(footerTexts.single.selected, {
+      date: formatShortDate(date)
+    }),
+    sr: formatTemplate(footerTexts.single.selected, {
+      date: formatLongDate(date)
+    })
+  };
+}
+function getRangeFooterText(selected) {
+  const range = selected;
+  if ((range == null ? void 0 : range.from) && (range == null ? void 0 : range.to)) {
     return {
-      visual: formatTemplate(footerTexts.single.selected, {
-        date: formatShortDate(date)
+      visual: formatTemplate(footerTexts.range.full, {
+        from: formatShortDate(range.from),
+        to: formatShortDate(range.to)
       }),
-      sr: formatTemplate(footerTexts.single.selected, {
-        date: formatLongDate(date)
+      sr: formatTemplate(footerTexts.range.full, {
+        from: formatLongDate(range.from),
+        to: formatLongDate(range.to)
       })
     };
   }
-  if (mode === "range") {
-    const range = selected;
-    if ((range == null ? void 0 : range.from) && (range == null ? void 0 : range.to)) {
-      return {
-        visual: formatTemplate(footerTexts.range.full, {
-          from: formatShortDate(range.from),
-          to: formatShortDate(range.to)
-        }),
-        sr: formatTemplate(footerTexts.range.full, {
-          from: formatLongDate(range.from),
-          to: formatLongDate(range.to)
-        })
-      };
-    }
-    if (range == null ? void 0 : range.from) {
-      return {
-        visual: formatTemplate(footerTexts.range.fromOnly, {
-          from: formatShortDate(range.from)
-        }),
-        sr: formatTemplate(footerTexts.range.fromOnly, {
-          from: formatLongDate(range.from)
-        })
-      };
-    }
-    return createPlainFooterText(footerTexts.range.instruction);
+  if (range == null ? void 0 : range.from) {
+    return {
+      visual: formatTemplate(footerTexts.range.fromOnly, {
+        from: formatShortDate(range.from)
+      }),
+      sr: formatTemplate(footerTexts.range.fromOnly, {
+        from: formatLongDate(range.from)
+      })
+    };
   }
-  if (mode === "multiple") {
-    const dates = selected ?? [];
-    if (!dates.length) {
-      return createPlainFooterText(footerTexts.multiple.instruction);
-    }
-    const shortList = dates.slice(0, 3).map((date) => formatShortDate(date)).join(", ");
-    const longList = dates.slice(0, 3).map((date) => formatLongDate(date)).join(", ");
-    if (dates.length > 3) {
-      return {
-        visual: formatTemplate(footerTexts.multiple.selectedMany, {
-          count: String(dates.length),
-          list: shortList
-        }),
-        sr: formatTemplate(footerTexts.multiple.selectedMany, {
-          count: String(dates.length),
-          list: longList
-        })
-      };
-    }
+  return createPlainFooterText(footerTexts.range.instruction);
+}
+function getMultipleFooterText(selected) {
+  const dates = selected ?? [];
+  if (!dates.length) {
+    return createPlainFooterText(footerTexts.multiple.instruction);
+  }
+  const shortList = dates.slice(0, 3).map((date) => formatShortDate(date)).join(", ");
+  const longList = dates.slice(0, 3).map((date) => formatLongDate(date)).join(", ");
+  if (dates.length > 3) {
     return {
-      visual: formatTemplate(footerTexts.multiple.selected, {
+      visual: formatTemplate(footerTexts.multiple.selectedMany, {
+        count: String(dates.length),
         list: shortList
       }),
-      sr: formatTemplate(footerTexts.multiple.selected, {
+      sr: formatTemplate(footerTexts.multiple.selectedMany, {
+        count: String(dates.length),
         list: longList
       })
     };
   }
-  return createPlainFooterText(footerTexts.single.instruction);
+  return {
+    visual: formatTemplate(footerTexts.multiple.selected, {
+      list: shortList
+    }),
+    sr: formatTemplate(footerTexts.multiple.selected, {
+      list: longList
+    })
+  };
+}
+const footerTextByMode = {
+  single: getSingleFooterText,
+  range: getRangeFooterText,
+  multiple: getMultipleFooterText
+};
+function getFooterText(mode, error = false, selected) {
+  if (error) {
+    return createPlainFooterText(getFooterTextForMode(mode));
+  }
+  return footerTextByMode[mode](selected);
 }
 const isDate = (value) => {
   return value instanceof Date && !isNaN(value.getTime());

package/dist/components/Callout/index.js

@@ -9,7 +9,7 @@ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index
 import { g as getSpacing } from "../../index-l-i-mIeP.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { d as colorBackgroundSubtle } from "../../BackgroundColor-Ba4D10TC.js";
-import { b as borderRadiusMd } from "../../BorderRadius-Co-IV3fn.js";
+import { b as borderRadiusMd } from "../../BorderRadius-0jhn76gB.js";
 import { s as spacingMd } from "../../Spacing-Dj-qX3Z5.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
 import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";

package/dist/components/Card/index.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { d as divTagName } from "../../tags-BeNegJAK.js";
 import { t as themeDark } from "../../Theme-B6kzt-0D.js";
-import { C as CardStyled } from "../../styled-bzTYGIm_.js";
+import { C as CardStyled } from "../../styled-DDY0xAl_.js";
 import { C, c, a, b, d } from "../../props-DDJfToj8.js";
 const Card = ({
   children,

package/dist/components/Carousel/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { C } from "../../index-C9M-9a7m.js";
+import { C } from "../../index-Cms5ie2I.js";
 export {
   C as default
 };

package/dist/components/Checkbox/index.js

@@ -17,8 +17,8 @@ import { getObjectColor } from "../../foundations/token/getObjectColor/index.js"
 import { getOpacity } from "../../foundations/token/getOpacity/index.js";
 import { g as getSpacing } from "../../index-l-i-mIeP.js";
 import { c as colorBorderFocus } from "../../BorderColor-BACbvI20.js";
-import { a as borderRadiusSm } from "../../BorderRadius-Co-IV3fn.js";
-import { a as borderWidthFocus } from "../../BorderWidth-OZWeXaq_.js";
+import { c as borderRadiusSm } from "../../BorderRadius-0jhn76gB.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
 import { s as spacingMd, a as spacingXs, b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
 import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";

package/dist/components/Collapsible/index.js

@@ -7,7 +7,7 @@ import { noReducedMotion } from "../../foundations/media-query/reducedMotion/ind
 import { a as ease_in_out_sine } from "../../easing-Dm-pO8SY.js";
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { g as getSpacing } from "../../index-l-i-mIeP.js";
-import { a as borderWidthFocus } from "../../BorderWidth-OZWeXaq_.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
 import { b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
 import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
 const CollapsibleStyled = styled.div.withConfig({

package/dist/components/ColorSwatch/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import { a as getComputedBackgroundColor, p as parseColorToRgbObject, b as getContrastRatio } from "../../colorUtils-CfSj2Iqa.js";
+import { a as getComputedBackgroundColor, p as parseColorToRgbObject, b as getContrastRatio } from "../../colorUtils-c9PiZEci.js";
 import styled from "styled-components";
 import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
@@ -80,7 +80,7 @@ const ColorSwatch = ({
         setNeedsBorder(false);
       }
     }
-  });
+  }, [color]);
   return /* @__PURE__ */ jsx(ColorSwatchSVGStyled, { className: props.className, size, ref, color, needsBorder, role: "img", "aria-label": props["aria-label"], "aria-roledescription": "Farbfeld", bottomSpacing, layout: props.layout, children: /* @__PURE__ */ jsx(ColorSwatchCircleStyled, { fill: color, size }) });
 };
 export {

package/dist/components/ConsentMessage/index.js

@@ -7,7 +7,7 @@ import Button from "../Button/index.js";
 import { d as buttonWidthAuto, a as consentVariantVideo, c as consentVariantMap } from "../../ButtonWidthBehavior-DuO_4JKC.js";
 import { b } from "../../ButtonWidthBehavior-DuO_4JKC.js";
 import styled from "styled-components";
-import { B as ButtonStyled } from "../../styled-DRNdxc1V.js";
+import { B as ButtonStyled } from "../../styled-BJ9cE7xy.js";
 import { b as breakpoint_medium } from "../../index-CG4uiVbZ.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { g as getSpacing } from "../../index-l-i-mIeP.js";

package/dist/components/Container/index.js

@@ -2,7 +2,7 @@
 import "react/jsx-runtime";
 import "react";
 import "../../Theme-B6kzt-0D.js";
-import { a, C } from "../../index-iCvdBgcJ.js";
+import { a, C } from "../../index-C_6tWuWh.js";
 import { C as C2, c, a as a2, b, d, e, f, g } from "../../props-A95cwKat.js";
 export {
   C2 as ContainerAppearanceColor,