@vodafone_de/brix-components 5.0.0 → 7.0.0

package/dist/{BackgroundColor-JObp_2xA.js → BackgroundColor-e0N9tdDR.js}

@@ -5,10 +5,10 @@ const colorBackgroundSubtle = "colorBackgroundSubtle";
 const colorBackgroundOverlay = "colorBackgroundOverlay";
 const colorBackgroundOverlayStatic = "colorBackgroundOverlayStatic";
 export {
-  colorBackgroundOverlay as a,
-  colorBackgroundOverlayStatic as b,
+  colorBackgroundSubtle as a,
+  colorBackgroundOverlay as b,
   colorBackgroundNeutral as c,
-  colorBackgroundBrandGradient as d,
-  colorBackgroundBrand as e,
-  colorBackgroundSubtle as f
+  colorBackgroundOverlayStatic as d,
+  colorBackgroundBrandGradient as e,
+  colorBackgroundBrand as f
 };

package/dist/components/Body/index.js

@@ -7,7 +7,9 @@ import styled from "styled-components";
 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 { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 const BodyStyled = styled.p.withConfig({
   shouldForwardProp: filterProps(),
@@ -15,7 +17,7 @@ const BodyStyled = styled.p.withConfig({
   componentId: "sc-1n7n7pv-0"
 })({
   outline: "none",
-  color: "inherit",
+  color: getTextColor(colorTextNeutral),
   verticalAlign: "baseline"
 }, ({
   size = textBodyMd

package/dist/components/BottomBar/index.js

@@ -4,7 +4,7 @@ import { useRef, useState, useEffect } from "react";
 import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import Container from "../Container/index.js";
 import styled from "styled-components";
-import { a as CardStyled } from "../../styled-WguHd6ON.js";
+import { a as CardStyled } from "../../styled-CYugcGtx.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";

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-WguHd6ON.js";
-import { C } from "../../styled-WguHd6ON.js";
+import { a as CardStyled } from "../../styled-CYugcGtx.js";
+import { C } from "../../styled-CYugcGtx.js";
 const Card = ({
   children,
   className,

package/dist/components/Carousel/index.js

@@ -6,9 +6,9 @@ import { useFocusWithin } from "../../hooks/useFocusWithin/index.js";
 import { l as liTagName, u as ulTagName } from "../../tags-DI6H1biK.js";
 import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
-import { a as CardStyled } from "../../styled-WguHd6ON.js";
+import { a as CardStyled } from "../../styled-CYugcGtx.js";
 import { G as GridStyled } from "../../styled-ZpQohvyx.js";
-import { G as GridItemStyled } from "../../styled-ChvU5bUu.js";
+import { G as GridItemStyled } from "../../styled-Cqp2oSjW.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";

package/dist/components/Container/index.js

@@ -11,7 +11,7 @@ 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 { e as colorBackgroundBrand, d as colorBackgroundBrandGradient, f as colorBackgroundSubtle, c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { f as colorBackgroundBrand, e as colorBackgroundBrandGradient, a as colorBackgroundSubtle, c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 const ContainerAppearanceColor = {
   primary: colorBackgroundNeutral,
   secondary: colorBackgroundSubtle,

package/dist/components/DateInput/index.js

@@ -7,7 +7,7 @@ import FormHelperLabel from "../FormHelperLabel/index.js";
 import FormHelperMessage from "../FormHelperMessage/index.js";
 import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
-import { a as InputStyled, I as InputWrapperStyled } from "../../styled-zTRfFBiH.js";
+import { a as InputStyled, I as InputWrapperStyled } from "../../styled-03irSJOQ.js";
 import { s as spacingMd, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
 const CalendarMonthIconStyled = styled(CalendarMonthIcon).withConfig({
@@ -65,7 +65,7 @@ const DateInput = forwardRef(({
   };
   return /* @__PURE__ */ jsxs(FormElement, { className: props.className, bottomSpacing, disabled: props.disabled, children: [
     /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
-    /* @__PURE__ */ jsxs(InputWrapperStyled, { status, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
+    /* @__PURE__ */ jsxs(InputWrapperStyled, { status, readOnly: props.readOnly, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
       /* @__PURE__ */ jsx(DateInputStyled, { ...inputProps, ref: innerRef, type: "date", onBlur: (event) => {
         if (props.onBlur) {
           props.onBlur(event);

package/dist/components/Dialog/index.js

@@ -13,7 +13,7 @@ import IconButton from "../IconButton/index.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { b as colorBackgroundOverlayStatic } from "../../BackgroundColor-JObp_2xA.js";
+import { d as colorBackgroundOverlayStatic } from "../../BackgroundColor-e0N9tdDR.js";
 import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 import Flex from "../Flex/index.js";
@@ -22,7 +22,7 @@ const DialogOverlayStyled = styled.div.withConfig({
   displayName: "DialogOverlayStyled",
   componentId: "sc-z6nqyy-0"
 })({
-  position: "absolute",
+  position: "fixed",
   top: 0,
   left: 0,
   padding: `0 ${getSpacing(spacingMd)}`,

package/dist/components/FilterGroup/index.js

@@ -15,7 +15,7 @@ import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
-import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { b as colorBorderUnselected, i as colorBorderSelected, c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
 import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
 import { b as borderWidthUnselected, a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
@@ -109,14 +109,14 @@ const FilterInputStyled = styled.input.withConfig({
 const FilterGroup = ({
   component: _component,
   uid,
-  elements,
+  filters,
   onUpdate,
   ...props
 }) => {
   const getValuesFromCheckedItems = () => {
-    return elements.reduce((valuesArr, element) => {
-      if (element.checked) {
-        valuesArr.push(element.value);
+    return filters.reduce((valuesArr, filter) => {
+      if (filter.checked) {
+        valuesArr.push(filter.value);
       }
       return valuesArr;
     }, []);
@@ -130,16 +130,16 @@ const FilterGroup = ({
     setCheckedValues(updateChecked);
     onUpdate(updateChecked);
   };
-  const getFilters = elements.map(({
+  const getFilters = filters.map(({
     children,
-    ...element
+    ...filter
   }) => {
-    const isChecked = element.value ? checkedValues.includes(element.value) : false;
-    return /* @__PURE__ */ jsxs(FilterStyled, { ...element.optionalLabelProps, checked: isChecked, children: [
-      element.iconName ? /* @__PURE__ */ jsx(FilterIconStyled, { name: element.iconName, size: iconSizeSm }) : null,
-      /* @__PURE__ */ jsx(FilterInputStyled, { ...element, type: "checkbox", defaultChecked: isChecked, onChange: handleChange }),
+    const isChecked = filter.value ? checkedValues.includes(filter.value) : false;
+    return /* @__PURE__ */ jsxs(FilterStyled, { ...filter.optionalLabelProps, checked: isChecked, children: [
+      filter.icon ? /* @__PURE__ */ jsx(FilterIconStyled, { name: filter.icon, size: iconSizeSm }) : null,
+      /* @__PURE__ */ jsx(FilterInputStyled, { ...filter, type: "checkbox", defaultChecked: isChecked, onChange: handleChange }),
       children
-    ] }, element.value);
+    ] }, filter.value);
   });
   return /* @__PURE__ */ jsx(Fieldset, { ...props, uid: `fieldset-${uid}`, children: /* @__PURE__ */ jsx(FilterGroupStyled, { children: getFilters }) });
 };

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

@@ -5,13 +5,20 @@ export interface FilterProps extends InputHTMLAttributes<HTMLInputElement> {
     /**
      * Specify a system icon to be displayed to the left of content.
      */
-    iconName?: IconName;
+    icon?: IconName;
     /**
      * Content of pill
      */
     children: ReactNode;
+    /**
+     * Value of the Filter
+     */
     value: string;
     optionalLabelProps?: HTMLAttributes<HTMLLabelElement>;
+    /**
+     * Defines whether the Filter should be checked on first render
+     */
+    checked?: boolean;
 }
 export interface FilterGroupProps extends FieldsetSharedProps {
     /**
@@ -21,7 +28,7 @@ export interface FilterGroupProps extends FieldsetSharedProps {
     /**
      * Array of PillProps
      */
-    elements: FilterProps[];
+    filters: FilterProps[];
     /**
      * function that is called on every update. The only parameter of this function is an array with the value of each selected pill.
      */

package/dist/components/GoogleMap/index.js

@@ -11,7 +11,7 @@ import { B as ButtonStyled, t as tertiaryAppearance } from "../../styled-CuLmB_m
 import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { a as colorBackgroundOverlay } from "../../BackgroundColor-JObp_2xA.js";
+import { b as colorBackgroundOverlay } from "../../BackgroundColor-e0N9tdDR.js";
 import Heading, { headingAlignCenter } from "../Heading/index.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
@@ -178,6 +178,9 @@ const GoogleMap = ({
   ...props
 }) => {
   const consent = useThirdPartyConsent();
+  const foo = "log";
+  const bar = console;
+  bar[foo]("Debug storybook & vite", apiKey);
   const [map, setMap] = useState(null);
   children = children || defaultBasicMap;
   useEffect(() => {

package/dist/components/GridItem/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { d as divTagName } from "../../tags-DI6H1biK.js";
-import { G as GridItemStyled } from "../../styled-ChvU5bUu.js";
+import { G as GridItemStyled } from "../../styled-Cqp2oSjW.js";
 const GridItem = ({
   sm = 12,
   tag = divTagName,

package/dist/components/IconSnippet/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { df as IconLoader, iu as iconSizeMd, io as iconSize2xl } from "../../index-Cbojl4_Q.js";
+import { df as IconLoader, it as iconSizeLg, iq as iconSize3xl, iv as iconSizeSm } from "../../index-Cbojl4_Q.js";
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import InlineLink from "../InlineLink/index.js";
@@ -12,8 +12,9 @@ import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
-const iconSnippetSizeSmall = "small";
-const iconSnippetSizeLarge = "large";
+const iconSnippetSizeSmall = "sm";
+const iconSnippetSizeLarge = "lg";
+const iconSnippetSize3Xl = "3xl";
 const iconSnippetPositionLeft = "left";
 const iconSnippetPositionCenter = "center";
 const iconSnippetAlignTop = "top";
@@ -97,7 +98,7 @@ const IconSnippet = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(IconSnippetStyled, { ...props, iconPosition, iconAlign, as: tag, children: [
-    /* @__PURE__ */ jsx(IconLoaderStyled, { size: size === iconSnippetSizeSmall ? iconSizeMd : iconSize2xl, name: props.icon }),
+    /* @__PURE__ */ jsx(IconLoaderStyled, { size: size === iconSnippetSizeLarge ? iconSizeLg : size === iconSnippetSize3Xl ? iconSize3xl : iconSizeSm, name: props.icon }),
     /* @__PURE__ */ jsx(IconSnippetContentStyled, { as: tag, iconPosition, children: getContents(contents) })
   ] });
 };
@@ -107,6 +108,7 @@ export {
   iconSnippetAlignTop,
   iconSnippetPositionCenter,
   iconSnippetPositionLeft,
+  iconSnippetSize3Xl,
   iconSnippetSizeLarge,
   iconSnippetSizeSmall
 };

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

@@ -8,9 +8,10 @@ import { LinkAsButtonProps } from '../LinkAsButton';
 import { RichTextProps } from '../RichText';
 import { PatternProps } from '../../foundations/PatternProps';
 import { divTagName, spanTagName } from '../../foundations/tags';
-export declare const iconSnippetSizeSmall = "small";
-export declare const iconSnippetSizeLarge = "large";
-export type IconSnippetSize = typeof iconSnippetSizeSmall | typeof iconSnippetSizeLarge;
+export declare const iconSnippetSizeSmall = "sm";
+export declare const iconSnippetSizeLarge = "lg";
+export declare const iconSnippetSize3Xl = "3xl";
+export type IconSnippetSize = typeof iconSnippetSizeSmall | typeof iconSnippetSizeLarge | typeof iconSnippetSize3Xl;
 export declare const iconSnippetPositionLeft = "left";
 export declare const iconSnippetPositionCenter = "center";
 export type IconSnippetPosition = typeof iconSnippetPositionLeft | typeof iconSnippetPositionCenter;

package/dist/components/ImageHeader/index.js

@@ -19,7 +19,7 @@ import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { a as colorBackgroundOverlay } from "../../BackgroundColor-JObp_2xA.js";
+import { b as colorBackgroundOverlay } from "../../BackgroundColor-e0N9tdDR.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
 import { a as flexOrientationVertical } from "../../styled-B0YKfXTz.js";
 const imageHeaderVariantFull = "full";

package/dist/components/Input/index.js

@@ -9,7 +9,7 @@ import { s as spacingMd, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
 import { i } from "../../props-DDpgcryb.js";
-import { I as InputWrapperStyled, a as InputStyled } from "../../styled-zTRfFBiH.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-03irSJOQ.js";
 const Input = forwardRef(({
   uid,
   status,
@@ -41,7 +41,7 @@ const Input = forwardRef(({
   };
   return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, disabled: props.disabled, children: [
     /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
-    /* @__PURE__ */ jsxs(InputWrapperStyled, { status, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
+    /* @__PURE__ */ jsxs(InputWrapperStyled, { status, readOnly: props.readOnly, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
       /* @__PURE__ */ jsx(InputStyled, { ...inputProps, placeholder: renderInlineRichTextFromOpenText(placeholder), ref, onChange }),
       /* @__PURE__ */ jsx(FormHelperStatusIcon, { status })
     ] }),

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

@@ -1,7 +1,7 @@
 import { InputHTMLAttributes } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
-import { InputStatus } from './props';
-export declare const InputWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PatternProps & {
+import { InputProps, InputStatus } from './props';
+export declare const InputWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PatternProps & Pick<InputProps, "readOnly"> & {
     status?: InputStatus;
 }>> & string;
 export declare const InputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputHTMLAttributes<HTMLInputElement>>> & string;

package/dist/components/LinkListItem/index.js

@@ -5,7 +5,6 @@ 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-ZHkR70j3.js";
-import Body from "../Body/index.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";
@@ -25,9 +24,10 @@ import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { b as colorIconBrand } from "../../IconColor-CtC9WUgr.js";
 import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-DsntmDNw.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import Body from "../Body/index.js";
 import Card from "../Card/index.js";
 import Icon from "../Icon/index.js";
-import { C as CardAppearanceColor } from "../../styled-WguHd6ON.js";
+import { C as CardAppearanceColor } from "../../styled-CYugcGtx.js";
 const linkListItemVariantVertical = "vertical";
 const linkListItemVariantHorizontal = "horizontal";
 const focusStyles = {
@@ -219,7 +219,10 @@ const LinkListItemContentStyled = styled.span.withConfig({
   display: "flex",
   gap: getSpacing(spacingXs),
   flexDirection: "row",
-  width: "100%"
+  width: "100%",
+  "& > *": {
+    flexShrink: 0
+  }
 }, ({
   orientation = linkListItemVariantHorizontal
 }) => {
@@ -235,7 +238,8 @@ const LinkListItemVerticalContentStyled = styled.span.withConfig({
   flexGrow: 1,
   gap: getSpacing(spacingXs),
   display: "flex",
-  flexDirection: "column"
+  flexDirection: "column",
+  flexShrink: 1
 });
 const LinkListItemLabelWrapperStyled = styled.span.withConfig({
   shouldForwardProp: filterProps(),
@@ -245,7 +249,8 @@ const LinkListItemLabelWrapperStyled = styled.span.withConfig({
   display: "flex",
   flexDirection: "column",
   flexGrow: 1,
-  alignItems: "flex-start"
+  alignItems: "flex-start",
+  flexShrink: 1
 });
 const LinkListLabelStyled = styled.span.withConfig({
   shouldForwardProp: filterProps(),
@@ -254,9 +259,15 @@ const LinkListLabelStyled = styled.span.withConfig({
 })(getHeadingSize(textHeadingXs), {
   textAlign: "left"
 });
+const LinkListSuffixStyled = styled(Body).withConfig({
+  displayName: "LinkListSuffixStyled",
+  componentId: "sc-1dmfu9f-9"
+})({
+  color: "inherit"
+});
 const LinkListItemChevronStyled = styled(Icon).withConfig({
   displayName: "LinkListItemChevronStyled",
-  componentId: "sc-1dmfu9f-9"
+  componentId: "sc-1dmfu9f-10"
 })({
   flexGrow: 0,
   flexShrink: 0,
@@ -277,7 +288,7 @@ const LinkListItem = (props) => {
   } = props;
   const LinkListIcon = icon ? /* @__PURE__ */ jsx(IconLoader, { name: icon, size: iconSizeMd }) : void 0;
   const LinkListLabel = /* @__PURE__ */ jsx(LinkListLabelStyled, { children: label });
-  const LinkListSuffix = suffix ? /* @__PURE__ */ jsx(Body, { tag: spanTagName, bottomSpacing: spacingNone, children: suffix }) : void 0;
+  const LinkListSuffix = suffix ? /* @__PURE__ */ jsx(LinkListSuffixStyled, { tag: spanTagName, bottomSpacing: spacingNone, children: suffix }) : void 0;
   const LinkListBadge = badge ? /* @__PURE__ */ jsx(Badge, { ...badge, size: smallSize, bottomSpacing: spacingNone }) : void 0;
   const LinkListChevron = /* @__PURE__ */ jsx(LinkListItemChevronStyled, { name: "ChevronRight", size: iconSizeMd });
   const Content = /* @__PURE__ */ jsx(LinkListItemContentWrapperStyled, { orientation, children: orientation === linkListItemVariantHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -8,4 +8,5 @@ export declare const LinkListItemContentStyled: import('styled-components/dist/t
 export declare const LinkListItemVerticalContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const LinkListItemLabelWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const LinkListLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LinkListSuffixStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Body').BodyProps, never>> & string & Omit<import('react').FC<import('../Body').BodyProps>, keyof import('react').Component<any, {}, any>>;
 export declare const LinkListItemChevronStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('@vfde-react/inline-icon-library').IconLoaderProps | import('../HifiIcon').HifiIconProps | import('../Icon').IconProps, import('styled-components/dist/types').BaseObject>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps | import('../HifiIcon').HifiIconProps | import('../Icon').IconProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/LoadingSpinner/index.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { S as ScreenreaderOnly } from "../../index-DQhtQZ85.js";
-import { L as LoadingSpinnerSVGStyled, a as LoadingSpinnerPathXsStyled, b as LoadingSpinnerPathOuter3Styled, c as LoadingSpinnerPathOuter2Styled, d as LoadingSpinnerPathOuter1Styled, e as LoadingSpinnerPathCenterStyled, f as LoadingSpinnerContainerStyled, g as LoadingSpinnerContentStyled, h as LoadingSpinnerLabelStyled, i as LoadingSpinnerChildrenStyled } from "../../styled-DZo6MwrF.js";
+import { L as LoadingSpinnerSVGStyled, a as LoadingSpinnerPathXsStyled, b as LoadingSpinnerPathOuter3Styled, c as LoadingSpinnerPathOuter2Styled, d as LoadingSpinnerPathOuter1Styled, e as LoadingSpinnerPathCenterStyled, f as LoadingSpinnerContainerStyled, g as LoadingSpinnerContentStyled, h as LoadingSpinnerLabelStyled, i as LoadingSpinnerChildrenStyled } from "../../styled-DMUiOi24.js";
 const LoadingSpinnerSVG = ({
   size = "lg",
   ...props

package/dist/components/Notification/index.js

@@ -20,7 +20,7 @@ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js"
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getIconColor } from "../../foundations/token/getIconColor/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
 import { g as borderWidthMd } from "../../BorderWidth-DfOlyKK7.js";
 import { d as colorIconInverse } from "../../IconColor-CtC9WUgr.js";
@@ -167,7 +167,7 @@ const Notification = ({
   } = notificationStatusVariants[status];
   const label = getNotificationLabel(status, contents);
   const notificationId = `notification-${uid}`;
-  return /* @__PURE__ */ jsxs(NotificationStyled, { ...props, status, role: "group", "aria-live": [notificationStatusError, notificationStatusWarning].indexOf(status) === -1 ? "polite" : "assertive", "aria-atomic": false, "aria-label": label, id: notificationId, children: [
+  return /* @__PURE__ */ jsxs(NotificationStyled, { role: "group", ...props, status, "aria-live": [notificationStatusError, notificationStatusWarning].indexOf(status) === -1 ? "polite" : "assertive", "aria-atomic": false, "aria-label": label, id: notificationId, children: [
     /* @__PURE__ */ jsx(NotificationSidebarStyled, { status, children: /* @__PURE__ */ jsx(IconLoader, { name: icon, size: iconSizeSm }) }),
     /* @__PURE__ */ jsx(NotificationWrapperStyled, { children: getContents(contents) })
   ] });

package/dist/components/Overlay/index.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
-import { b as colorBackgroundOverlayStatic } from "../../BackgroundColor-JObp_2xA.js";
+import { d as colorBackgroundOverlayStatic } from "../../BackgroundColor-e0N9tdDR.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 const overlayAppearancePrimary = "primary";
 const overlayAppearanceSecondary = "secondary";

package/dist/components/PickerGroup/index.js

@@ -24,7 +24,7 @@ import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
 import { getOpacity } from "../../foundations/token/getOpacity/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
-import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.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 { b as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-CR22KTex.js";

package/dist/components/SearchInput/index.js

@@ -9,7 +9,7 @@ import { p as primaryAppearance } from "../../styled-CuLmB_mg.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import Form from "../Form/index.js";
 import styled from "styled-components";
-import { I as InputWrapperStyled, a as InputStyled } from "../../styled-zTRfFBiH.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-03irSJOQ.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { f as filterProps } from "../../filterProps-Cewck8OH.js";
 const SearchInputButtonWrapperStyled = styled.div.withConfig({

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

@@ -2,7 +2,7 @@ import { InlineIconProps } from '@vfde-react/inline-icon-library';
 import { IconButtonProps } from '../IconButton/props';
 import { SearchInputProps } from './props';
 export declare const SearchInputButtonWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SearchInputWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "status" | keyof import('../..').PatternProps> & import('../..').PatternProps & {
+export declare const SearchInputWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "status" | keyof import('../..').PatternProps | "readOnly"> & import('../..').PatternProps & Pick<import('../Input').InputProps, "readOnly"> & {
     status?: import('../Input').InputStatus;
 }, Pick<SearchInputProps, "bottomSpacing" | "value">>> & string;
 export declare const SearchInputIconButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<IconButtonProps, IconButtonProps>> & string & Omit<import('react').FC<IconButtonProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/SelectInput/index.js

@@ -17,7 +17,7 @@ import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.j
 import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
-import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { c as colorBorderFocus, a as colorBorderNeutral, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "../../BorderColor-BummoQ1-.js";
 import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";

package/dist/components/SuggestInput/index.js

@@ -7,7 +7,7 @@ import FormHelperLabel from "../FormHelperLabel/index.js";
 import FormHelperMessage from "../FormHelperMessage/index.js";
 import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
-import { I as InputWrapperStyled, a as InputStyled } from "../../styled-zTRfFBiH.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-03irSJOQ.js";
 import { c as spacingSm, a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import Body from "../Body/index.js";
@@ -19,7 +19,7 @@ import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
 import Flex from "../Flex/index.js";

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

@@ -3,7 +3,7 @@ import { SuggestInputProps } from './props';
 import { FormElementProps } from '../FormElement/props.ts';
 import { InputStatus } from '../Input/props';
 export declare const SuggestInputFormElementStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FormElementProps>> & string;
-export declare const SuggestInputWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "status" | keyof PatternProps> & PatternProps & {
+export declare const SuggestInputWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "status" | keyof PatternProps | "readOnly"> & PatternProps & Pick<import('../Input/props').InputProps, "readOnly"> & {
     status?: InputStatus;
 }, PatternProps & {
     status?: InputStatus;

package/dist/components/Textarea/index.js

@@ -10,12 +10,14 @@ import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTex
 import styled from "styled-components";
 import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { a as colorBackgroundSubtle } from "../../BackgroundColor-e0N9tdDR.js";
 import { a as colorBorderNeutral, c as colorBorderFocus, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "../../BorderColor-BummoQ1-.js";
 import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
@@ -98,7 +100,13 @@ const TextareaStyled = styled.textarea.withConfig({
   return {
     resize: isResizable ? "vertical" : "none"
   };
-}, getHeadingSize(textHeadingXs));
+}, ({
+  readOnly
+}) => ({
+  ...readOnly && {
+    backgroundColor: getBackgroundColor(colorBackgroundSubtle)
+  }
+}), getHeadingSize(textHeadingXs));
 const TextareaStatusIcon = styled(FormHelperStatusIcon).withConfig({
   displayName: "TextareaStatusIcon",
   componentId: "sc-b8i4y6-2"

package/dist/components/Tray/index.js

@@ -16,7 +16,7 @@ import { s as shadow28 } from "../../shadow-u158mzuN.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { b as colorBackgroundOverlayStatic } from "../../BackgroundColor-JObp_2xA.js";
+import { d as colorBackgroundOverlayStatic } from "../../BackgroundColor-e0N9tdDR.js";
 import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 import { a as flexOrientationVertical } from "../../styled-B0YKfXTz.js";

package/dist/foundations/GlobalStyle/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { css, createGlobalStyle } from "styled-components";
-import { l as loadingSpinnerOverlayCssVar, j as loadingSpinnerOverlays } from "../../styled-DZo6MwrF.js";
+import { l as loadingSpinnerOverlayCssVar, j as loadingSpinnerOverlays } from "../../styled-DMUiOi24.js";
 import { c as breakpoint_medium, a as breakpoint_large } from "../../index-Ck2bCrhT.js";
 const colorVodafoneRed = "colorVodafoneRed";
 const colorVodafoneRedTint = "colorVodafoneRedTint";

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

@@ -1 +1 @@
-export declare const useMediaQuery: (query: string) => boolean[];
+export declare const useMediaQuery: (query: string, initialState?: boolean) => boolean[];

package/dist/hooks/useMediaQuery/index.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-const useMediaQuery = (query) => {
-  const [mediaQueryMatches, setMediaQueryMatches] = useState(false);
+const useMediaQuery = (query, initialState = false) => {
+  const [mediaQueryMatches, setMediaQueryMatches] = useState(initialState);
   useEffect(() => {
     const mediaQuery = window.matchMedia(query);
     const handleMediaQueryChange = (event) => {

package/dist/index.js

@@ -26,7 +26,7 @@ import { default as default22 } from "./components/InlineLink/index.js";
 import { default as default23, imageHeaderPositionLeft, imageHeaderPositionRight, imageHeaderVariantFull, imageHeaderVariantSplit } from "./components/ImageHeader/index.js";
 import { default as default24, aspectRatio16_9, aspectRatio1_1, aspectRatio21_9, aspectRatio32_9, aspectRatio3_4, aspectRatio48_9, horizontalAlignmentCenter, horizontalAlignmentLeft, horizontalAlignmentRight, objectFitContain, objectFitCover, objectFitNone, objectPositionCenter, objectPositionLeftBottom, objectPositionLeftCenter, objectPositionLeftTop, objectPositionRightBottom, objectPositionRightCenter, objectPositionRightTop } from "./components/Image/index.js";
 import { default as default25 } from "./components/IconSnippetList/index.js";
-import { default as default26, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
+import { default as default26, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSize3Xl, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
 import { default as default27, iconButtonShapeCircle, iconButtonShapeSquare } from "./components/IconButton/index.js";
 import { default as default28, iconSize5xl, iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from "./components/Icon/index.js";
 import { default as default29 } from "./components/HifiIcon/index.js";
@@ -95,7 +95,7 @@ import { useForcedColors } from "./hooks/useForcedColors/index.js";
 import { useFocusWithin } from "./hooks/useFocusWithin/index.js";
 import { a as a4, i as i2 } from "./props-DDpgcryb.js";
 import { e as e2, d as d2, c as c2, b as b2, f as f2, a as a5 } from "./styled-B0YKfXTz.js";
-import { C } from "./styled-WguHd6ON.js";
+import { C } from "./styled-CYugcGtx.js";
 export {
   default64 as Accordion,
   default63 as AccordionGroup,
@@ -237,6 +237,7 @@ export {
   iconSnippetAlignTop,
   iconSnippetPositionCenter,
   iconSnippetPositionLeft,
+  iconSnippetSize3Xl,
   iconSnippetSizeLarge,
   iconSnippetSizeSmall,
   imageHeaderPositionLeft,

package/dist/{styled-zTRfFBiH.js → styled-03irSJOQ.js}

@@ -8,7 +8,7 @@ import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js"
 import { getHeadingSize } from "./foundations/token/getHeadingSize/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
-import { c as colorBackgroundNeutral } from "./BackgroundColor-JObp_2xA.js";
+import { c as colorBackgroundNeutral, a as colorBackgroundSubtle } from "./BackgroundColor-e0N9tdDR.js";
 import { c as colorBorderFocus, a as colorBorderNeutral, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "./BorderColor-BummoQ1-.js";
 import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
 import { b as borderWidthUnselected } from "./BorderWidth-DfOlyKK7.js";
@@ -16,7 +16,7 @@ import { c as spacingSm, a as spacingXs } from "./Spacing-D0HQH9YJ.js";
 import { c as colorTextPlaceholder, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
 import { f as filterProps } from "./filterProps-Cewck8OH.js";
 const InputWrapperStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps(),
+  shouldForwardProp: filterProps(["readOnly"]),
   displayName: "InputWrapperStyled",
   componentId: "sc-1lx2jz-0"
 })({
@@ -32,6 +32,12 @@ const InputWrapperStyled = styled.div.withConfig({
   borderRadius: getBorderRadius(borderRadiusMd),
   backgroundColor: getBackgroundColor(colorBackgroundNeutral)
 }, ({
+  readOnly
+}) => ({
+  ...readOnly && {
+    backgroundColor: getBackgroundColor(colorBackgroundSubtle)
+  }
+}), ({
   status
 }) => {
   if (!status) {

package/dist/{styled-WguHd6ON.js → styled-CYugcGtx.js}

@@ -11,7 +11,7 @@ import { s as spacingMd } from "./Spacing-D0HQH9YJ.js";
 import { a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
 import { f as filterProps } from "./filterProps-Cewck8OH.js";
 import { g as getCssVar } from "./getCssVar-BP6T9pFM.js";
-import { d as colorBackgroundBrandGradient, c as colorBackgroundNeutral } from "./BackgroundColor-JObp_2xA.js";
+import { e as colorBackgroundBrandGradient, c as colorBackgroundNeutral } from "./BackgroundColor-e0N9tdDR.js";
 const CardAppearanceColor = {
   primary: colorBackgroundNeutral,
   secondary: colorBackgroundBrandGradient

package/dist/{styled-ChvU5bUu.js → styled-Cqp2oSjW.js}

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { a as CardStyled } from "./styled-WguHd6ON.js";
+import { a as CardStyled } from "./styled-CYugcGtx.js";
 import { D as DemoBoxStyled } from "./styled-ODPFCF1a.js";
 import { v as viewport } from "./index-Ck2bCrhT.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";

package/dist/{styled-DZo6MwrF.js → styled-DMUiOi24.js}

@@ -9,7 +9,7 @@ import { getHeadingSize } from "./foundations/token/getHeadingSize/index.js";
 import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
 import { getOpacity } from "./foundations/token/getOpacity/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
-import { a as colorBackgroundOverlay } from "./BackgroundColor-JObp_2xA.js";
+import { b as colorBackgroundOverlay } from "./BackgroundColor-e0N9tdDR.js";
 import { o as opacityOverlay } from "./Opacity-smkGiwsf.js";
 import { b as spacingNone } from "./Spacing-D0HQH9YJ.js";
 import { l as largeSize } from "./SizeTypes-Ck_RdzIf.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "5.0.0",
+  "version": "7.0.0",
   "exports": {
     "./package.json": "./package.json",
     ".": {