@vodafone_de/brix-components 7.0.3 → 7.0.4

package/README.md

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

package/dist/components/ButtonGroup/index.js

@@ -5,7 +5,7 @@ import Flex from "../Flex/index.js";
 import { f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-B0YKfXTz.js";
 import FlexItem from "../FlexItem/index.js";
 import { c as spacingSm, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
-import { 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();

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/Dialog/styled.d.ts

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

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
 import { ImageHeaderProps } from './props';
 export declare const getBadgeTopPosition: () => string;
-export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Grid').GridProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../Grid').GridProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ResponsiveImage').ResponsiveImageProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../ResponsiveImage').ResponsiveImageProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant" | "contentGridDesktopColumns">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Grid').GridProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../Grid').GridProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ResponsiveImage').ResponsiveImageProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../ResponsiveImage').ResponsiveImageProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "variant" | "position" | "contentGridDesktopColumns">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderBadgeStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Badge').BadgeProps, never>> & string & Omit<import('react').FC<import('../Badge').BadgeProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderHeadingStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Heading').HeadingProps, never>> & string & Omit<import('react').FC<import('../Heading').HeadingProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderButtonGroupStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../ButtonGroup').ButtonGroupProps, never>> & string & Omit<import('react').FC<import('../ButtonGroup').ButtonGroupProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/InlineLink/index.js

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

package/dist/components/Rating/assets/StarSVG.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const StarSVG: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default StarSVG;

package/dist/components/Rating/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { RatingProps } from './props';
+declare const Rating: FC<RatingProps>;
+export default Rating;
+export * from './props';
+export * from './styled';

package/dist/components/Rating/index.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { u as useViewport, v as viewportSm } from "../../index-Cs0Hw0dj.js";
+import Fieldset from "../Fieldset/index.js";
+import styled from "styled-components";
+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 { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
+import { c as colorBorderFocus, i as colorBorderSelected, a as colorBorderNeutral, b as colorBorderUnselected } from "../../BorderColor-BummoQ1-.js";
+import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
+import { b as colorObjectSelected } from "../../ObjectColor-BZDBuV8H.js";
+import { a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
+const StarSVG = (props) => /* @__PURE__ */ jsx("svg", { style: {
+  display: "inline-block"
+}, width: "26", height: "25", viewBox: "0 0 26 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M1 9.95223L9.26911 8.58599L12.8296 1L16.6847 8.44108L25 9.48408L19.1147 15.449L20.6911 23.6799L13.199 19.9252L5.85987 23.9682L7.11465 15.6831L1 9.95223Z", fill: "white", stroke: "#7E7E7E", strokeLinecap: "round", strokeLinejoin: "round" }) });
+const getSvgPathStyles = (props) => ({
+  fill: props.selected ? getObjectColor(colorObjectSelected) : props.isInHoverRange ? getHoverColor(colorBackgroundNeutral) : "transparent",
+  strokeWidth: "1px",
+  stroke: props.selected ? getBorderColor(colorBorderSelected) : props.isInHoverRange ? getBorderColor(colorBorderNeutral) : getBorderColor(colorBorderUnselected)
+});
+const getHoverSvgPathStyles = (props) => ({
+  fill: props.selected ? getHoverColor(colorObjectSelected) : getHoverColor(colorBackgroundNeutral),
+  strokeWidth: "1px",
+  stroke: props.selected ? getBorderColor(colorBorderSelected) : getBorderColor(colorBorderNeutral)
+});
+const StarsWrapperStyled = styled.div.withConfig({
+  displayName: "StarsWrapperStyled",
+  componentId: "sc-1nbg0l6-0"
+})({
+  display: "flex",
+  gap: getSpacing(spacingXs)
+});
+const StarLabelStyled = styled.label.withConfig({
+  displayName: "StarLabelStyled",
+  componentId: "sc-1nbg0l6-1"
+})(({
+  selected,
+  isInHoverRange
+}) => {
+  const normalStyles = getSvgPathStyles({
+    selected,
+    isInHoverRange
+  });
+  const hoverStyles = getHoverSvgPathStyles({
+    selected
+  });
+  return {
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    svg: {
+      path: {
+        ...normalStyles,
+        transition: "fill 200ms, stroke 200ms"
+      }
+    },
+    "&:hover svg path": {
+      ...hoverStyles,
+      transition: "fill 200ms, stroke 200ms"
+    },
+    // Apply focus-visible styles on label when input is focused
+    "&:has(:focus-visible)": {
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+      outlineOffset: "2px"
+    }
+  };
+});
+const HiddenRadioStyled = styled.input.withConfig({
+  displayName: "HiddenRadioStyled",
+  componentId: "sc-1nbg0l6-2"
+})({
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+});
+const useStarSize = () => {
+  const viewport = useViewport();
+  if (viewport === viewportSm) {
+    return {
+      width: 24,
+      height: 22.968
+    };
+  }
+  return {
+    width: 32,
+    height: 30.624
+  };
+};
+const Rating = ({
+  value,
+  onValueChange,
+  className,
+  groupName,
+  uid,
+  component: _component,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = useState(value ?? 0);
+  const [hoverValue, setHoverValue] = useState(null);
+  const starSize = useStarSize();
+  useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const handleChange = (event) => {
+    const newValue = Number(event.target.value);
+    setInternalValue(newValue);
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
+  };
+  const handleMouseEnter = (index) => {
+    setHoverValue(index + 1);
+  };
+  const handleMouseLeave = () => {
+    setHoverValue(null);
+  };
+  const handleClick = (starValue) => {
+    if (starValue === internalValue) {
+      setInternalValue(0);
+      if (onValueChange) {
+        onValueChange(0);
+      }
+    }
+  };
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsx(Fieldset, { ...props, uid, ref, children: /* @__PURE__ */ jsx(StarsWrapperStyled, { className, role: "radiogroup", children: [...Array(5)].map((_, index) => {
+    const starValue = index + 1;
+    const isInHoverRange = hoverValue !== null && starValue <= hoverValue;
+    return /* @__PURE__ */ jsxs(StarLabelStyled, { selected: starValue <= internalValue, isInHoverRange, htmlFor: `${uid}-star-${starValue}`, onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, "aria-label": `${starValue} von 5 Sternen`, children: [
+      /* @__PURE__ */ jsx(HiddenRadioStyled, { type: "radio", id: `${uid}-star-${starValue}`, name: groupName || uid, value: starValue, checked: starValue === internalValue, onChange: handleChange, onClick: () => handleClick(starValue) }),
+      /* @__PURE__ */ jsx(StarSVG, { width: starSize.width, height: starSize.height })
+    ] }, `star-${starValue}-${uid}`);
+  }) }) });
+};
+export {
+  HiddenRadioStyled,
+  StarLabelStyled,
+  StarsWrapperStyled,
+  Rating as default
+};

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

@@ -0,0 +1,22 @@
+import { FieldsetSharedProps } from '../Fieldset';
+/**
+ * Props for the Rating component
+ */
+export interface RatingProps extends Omit<FieldsetSharedProps, 'status' | 'errorMessage' | 'disabled'> {
+    /**
+     * The current rating value (number of stars selected)
+     */
+    value?: number;
+    /**
+     * Callback fired when the rating value changes
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Optional group name to identify the rating group for accessibility
+     */
+    groupName?: string;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Rating';
+}

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

@@ -0,0 +1,6 @@
+export declare const StarsWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StarLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    selected: boolean;
+    isInHoverRange?: boolean;
+}>> & string;
+export declare const HiddenRadioStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

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

@@ -10,4 +10,4 @@ export declare const CloseIconStyled: import('styled-components/dist/types').ISt
     value: string;
 }>> & string & Omit<import('react').FC<InlineIconProps>, keyof import('react').Component<any, {}, any>>;
 export declare const SearchInputCloseButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Pick<SearchInputProps, "disabled">>> & string;
-export declare const SearchInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import('react').InputHTMLAttributes<HTMLInputElement>> & import('react').InputHTMLAttributes<HTMLInputElement>, Omit<SearchInputProps, "uid" | "onReset" | "label" | "searchButtonLabel" | "onSearch">>> & string;
+export declare const SearchInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import('react').InputHTMLAttributes<HTMLInputElement>> & import('react').InputHTMLAttributes<HTMLInputElement>, Omit<SearchInputProps, "uid" | "label" | "onReset" | "searchButtonLabel" | "onSearch">>> & string;

package/dist/components/Stepper/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import { useViewport } from "../../hooks/useViewport/index.js";
+import { u as useViewport } from "../../index-Cs0Hw0dj.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";

package/dist/components/YoutubeVideo/index.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useThirdPartyConsent } from "../../hooks/useThirdPartyConsent/index.js";
+import ConsentMessage from "../ConsentMessage/index.js";
 import styled from "styled-components";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
 import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
-import ConsentMessage from "../ConsentMessage/index.js";
 const YoutubeVideoStyled = styled.div.withConfig({
   displayName: "YoutubeVideoStyled",
   componentId: "sc-1q2uytw-0"
@@ -17,7 +17,6 @@ const YoutubeVideoStyled = styled.div.withConfig({
   position: "relative",
   width: "100%",
   paddingBottom: "56.25%",
-  /* 16:9 aspect ratio */
   height: 0,
   overflow: "hidden",
   ...roundedCorner && {

package/dist/hooks/useViewport/index.js

@@ -1,24 +1,7 @@
-import { useState, useEffect } from "react";
-import { l as largeMediaQuery, m as mediumMediaQuery } from "../../index-Ck2bCrhT.js";
-import { useMediaQuery } from "../useMediaQuery/index.js";
-const viewportSm = "sm";
-const viewportMd = "md";
-const viewportLg = "lg";
-const useViewport = () => {
-  const tablet = useMediaQuery(mediumMediaQuery);
-  const desktop = useMediaQuery(largeMediaQuery);
-  const [viewportState, setViewportState] = useState(viewportSm);
-  useEffect(() => {
-    if (desktop) {
-      setViewportState(viewportLg);
-    } else if (tablet) {
-      setViewportState(viewportMd);
-    } else {
-      setViewportState(viewportSm);
-    }
-  }, [tablet, desktop]);
-  return viewportState;
-};
+import "react";
+import "../../index-Ck2bCrhT.js";
+import { u } from "../../index-Cs0Hw0dj.js";
+import "../useMediaQuery/index.js";
 export {
-  useViewport
+  u as useViewport
 };

package/dist/index-Cs0Hw0dj.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+import { l as largeMediaQuery, m as mediumMediaQuery } from "./index-Ck2bCrhT.js";
+import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
+const viewportSm = "sm";
+const viewportMd = "md";
+const viewportLg = "lg";
+const useViewport = () => {
+  const tablet = useMediaQuery(mediumMediaQuery);
+  const desktop = useMediaQuery(largeMediaQuery);
+  const [viewportState, setViewportState] = useState(viewportSm);
+  useEffect(() => {
+    if (desktop) {
+      setViewportState(viewportLg);
+    } else if (tablet) {
+      setViewportState(viewportMd);
+    } else {
+      setViewportState(viewportSm);
+    }
+  }, [tablet, desktop]);
+  return viewportState;
+};
+export {
+  useViewport as u,
+  viewportSm as v
+};

package/dist/index.d.ts

@@ -26,6 +26,8 @@ export * from './components/RichText';
 export { default as RichText } from './components/RichText';
 export * from './components/ResponsiveImage';
 export { default as ResponsiveImage } from './components/ResponsiveImage';
+export * from './components/Rating';
+export { default as Rating } from './components/Rating';
 export * from './components/RadioGroup';
 export { default as RadioGroup } from './components/RadioGroup';
 export * from './components/ProductCard';

package/dist/index.js

@@ -11,65 +11,66 @@ import { default as default9 } from "./components/SelectInput/index.js";
 import { default as default10 } from "./components/SearchInput/index.js";
 import { S } from "./index-DQhtQZ85.js";
 import { default as default11 } from "./components/ResponsiveImage/index.js";
-import { default as default12 } from "./components/RadioGroup/index.js";
-import { default as default13 } from "./components/ProductCard/index.js";
-import { default as default14 } from "./components/PickerGroup/index.js";
-import { default as default15, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
-import { default as default16, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
-import { default as default17 } from "./components/LoadingSpinner/index.js";
-import { default as default18, linkListItemVariantHorizontal, linkListItemVariantVertical } from "./components/LinkListItem/index.js";
-import { default as default19, linkListVariantColumn, linkListVariantRow } from "./components/LinkList/index.js";
+import { HiddenRadioStyled, default as default12, StarLabelStyled, StarsWrapperStyled } from "./components/Rating/index.js";
+import { default as default13 } from "./components/RadioGroup/index.js";
+import { default as default14 } from "./components/ProductCard/index.js";
+import { default as default15 } from "./components/PickerGroup/index.js";
+import { default as default16, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
+import { default as default17, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
+import { default as default18 } from "./components/LoadingSpinner/index.js";
+import { default as default19, linkListItemVariantHorizontal, linkListItemVariantVertical } from "./components/LinkListItem/index.js";
+import { default as default20, linkListVariantColumn, linkListVariantRow } from "./components/LinkList/index.js";
 import { L } from "./index-C5GzK6_0.js";
-import { default as default20 } from "./components/Link/index.js";
-import { default as default21 } from "./components/Legend/index.js";
-import { default as default22 } from "./components/Label/index.js";
-import { default as default23 } from "./components/Input/index.js";
-import { default as default24 } from "./components/InlineLink/index.js";
-import { default as default25, imageHeaderPositionLeft, imageHeaderPositionRight, imageHeaderVariantFull, imageHeaderVariantSplit } from "./components/ImageHeader/index.js";
-import { default as default26, 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 default27 } from "./components/IconSnippetList/index.js";
-import { default as default28, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSize3Xl, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
-import { default as default29, iconButtonShapeCircle, iconButtonShapeSquare } from "./components/IconButton/index.js";
-import { default as default30, iconSize5xl, iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from "./components/Icon/index.js";
-import { default as default31 } from "./components/HifiIcon/index.js";
-import { default as default32, headingAlignCenter, headingAlignLeft } from "./components/Heading/index.js";
-import { default as default33 } from "./components/GridItem/index.js";
-import { default as default34 } from "./components/Grid/index.js";
-import { default as default35 } from "./components/GoogleMap/index.js";
-import { default as default36, inputStatusIcons } from "./components/FormHelperStatusIcon/index.js";
-import { default as default37 } from "./components/FormHelperMessage/index.js";
-import { default as default38 } from "./components/FormHelperLabel/index.js";
-import { default as default39 } from "./components/FormElement/index.js";
-import { default as default40 } from "./components/Form/index.js";
-import { default as default41 } from "./components/FootnoteLink/index.js";
-import { default as default42 } from "./components/FootnoteContent/index.js";
-import { default as default43, flexItemAutoGrow, flexItemFullGrow } from "./components/FlexItem/index.js";
-import { default as default44 } from "./components/Flex/index.js";
-import { default as default45 } from "./components/FilterGroup/index.js";
-import { default as default46 } from "./components/Fieldset/index.js";
-import { default as default47 } from "./components/Divider/index.js";
-import { default as default48 } from "./components/DiscoveryCardGroup/index.js";
-import { default as default49, discoveryCardOrientationHorizontal, discoveryCardOrientationVertical } from "./components/DiscoveryCard/index.js";
-import { default as default50 } from "./components/Dialog/index.js";
-import { default as default51 } from "./components/DemoBox/index.js";
-import { default as default52 } from "./components/DateInput/index.js";
-import { default as default53, ContainerAppearanceColor } from "./components/Container/index.js";
-import { default as default54 } from "./components/ConsentMessage/index.js";
-import { default as default55 } from "./components/ColorSwatchGroup/index.js";
-import { default as default56, colorSwatchSizeMedium, colorSwatchSizeSmall } from "./components/ColorSwatch/index.js";
-import { default as default57 } from "./components/Collapsible/index.js";
-import { default as default58 } from "./components/CheckboxGroup/index.js";
-import { default as default59 } from "./components/Checkbox/index.js";
-import { default as default60 } from "./components/Carousel/index.js";
-import { default as default61 } from "./components/Card/index.js";
-import { default as default62 } from "./components/ButtonGroup/index.js";
+import { default as default21 } from "./components/Link/index.js";
+import { default as default22 } from "./components/Legend/index.js";
+import { default as default23 } from "./components/Label/index.js";
+import { default as default24 } from "./components/Input/index.js";
+import { default as default25 } from "./components/InlineLink/index.js";
+import { default as default26, imageHeaderPositionLeft, imageHeaderPositionRight, imageHeaderVariantFull, imageHeaderVariantSplit } from "./components/ImageHeader/index.js";
+import { default as default27, 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 default28 } from "./components/IconSnippetList/index.js";
+import { default as default29, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSize3Xl, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
+import { default as default30, iconButtonShapeCircle, iconButtonShapeSquare } from "./components/IconButton/index.js";
+import { default as default31, iconSize5xl, iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from "./components/Icon/index.js";
+import { default as default32 } from "./components/HifiIcon/index.js";
+import { default as default33, headingAlignCenter, headingAlignLeft } from "./components/Heading/index.js";
+import { default as default34 } from "./components/GridItem/index.js";
+import { default as default35 } from "./components/Grid/index.js";
+import { default as default36 } from "./components/GoogleMap/index.js";
+import { default as default37, inputStatusIcons } from "./components/FormHelperStatusIcon/index.js";
+import { default as default38 } from "./components/FormHelperMessage/index.js";
+import { default as default39 } from "./components/FormHelperLabel/index.js";
+import { default as default40 } from "./components/FormElement/index.js";
+import { default as default41 } from "./components/Form/index.js";
+import { default as default42 } from "./components/FootnoteLink/index.js";
+import { default as default43 } from "./components/FootnoteContent/index.js";
+import { default as default44, flexItemAutoGrow, flexItemFullGrow } from "./components/FlexItem/index.js";
+import { default as default45 } from "./components/Flex/index.js";
+import { default as default46 } from "./components/FilterGroup/index.js";
+import { default as default47 } from "./components/Fieldset/index.js";
+import { default as default48 } from "./components/Divider/index.js";
+import { default as default49 } from "./components/DiscoveryCardGroup/index.js";
+import { default as default50, discoveryCardOrientationHorizontal, discoveryCardOrientationVertical } from "./components/DiscoveryCard/index.js";
+import { default as default51 } from "./components/Dialog/index.js";
+import { default as default52 } from "./components/DemoBox/index.js";
+import { default as default53 } from "./components/DateInput/index.js";
+import { default as default54, ContainerAppearanceColor } from "./components/Container/index.js";
+import { default as default55 } from "./components/ConsentMessage/index.js";
+import { default as default56 } from "./components/ColorSwatchGroup/index.js";
+import { default as default57, colorSwatchSizeMedium, colorSwatchSizeSmall } from "./components/ColorSwatch/index.js";
+import { default as default58 } from "./components/Collapsible/index.js";
+import { default as default59 } from "./components/CheckboxGroup/index.js";
+import { default as default60 } from "./components/Checkbox/index.js";
+import { default as default61 } from "./components/Carousel/index.js";
+import { default as default62 } from "./components/Card/index.js";
+import { default as default63 } from "./components/ButtonGroup/index.js";
 import { B } from "./index-C7meHOM4.js";
-import { default as default63, buttonAutoWidth, buttonFullWidth } from "./components/Button/index.js";
-import { default as default64 } from "./components/BottomBar/index.js";
-import { default as default65, bodyAlignCenter, bodyAlignLeft, bodyAlignRight } from "./components/Body/index.js";
+import { default as default64, buttonAutoWidth, buttonFullWidth } from "./components/Button/index.js";
+import { default as default65 } from "./components/BottomBar/index.js";
+import { default as default66, bodyAlignCenter, bodyAlignLeft, bodyAlignRight } from "./components/Body/index.js";
 import { B as B2, a as a3 } from "./index-ZHkR70j3.js";
-import { default as default66 } from "./components/AccordionGroup/index.js";
-import { default as default67, accordionToggleCollapsed, accordionToggleCollapsing, accordionToggleExpanded } from "./components/Accordion/index.js";
+import { default as default67 } from "./components/AccordionGroup/index.js";
+import { default as default68, accordionToggleCollapsed, accordionToggleCollapsing, accordionToggleExpanded } from "./components/Accordion/index.js";
 import { getTextDecoration } from "./foundations/token/getTextDecoration/index.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
@@ -90,7 +91,7 @@ import { l, m } from "./index-Ck2bCrhT.js";
 import { noReducedMotion, reducedMotionQuery } from "./foundations/media-query/reducedMotion/index.js";
 import { forcedColorsQuery } from "./foundations/media-query/forcedColors/index.js";
 import { GlobalStyle } from "./foundations/GlobalStyle/index.js";
-import { useViewport } from "./hooks/useViewport/index.js";
+import { u } from "./index-Cs0Hw0dj.js";
 import { checkThirdPartyConsentStorage, consentStorageFeature, consentStorageItemName, consentStorageKey, useThirdPartyConsent } from "./hooks/useThirdPartyConsent/index.js";
 import { useReducedMotion } from "./hooks/useReducedMotion/index.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
@@ -100,75 +101,79 @@ 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-CYugcGtx.js";
 export {
-  default67 as Accordion,
-  default66 as AccordionGroup,
+  default68 as Accordion,
+  default67 as AccordionGroup,
   B2 as Badge,
   a3 as BadgeAppearanceColor,
-  default65 as Body,
-  default64 as BottomBar,
-  default63 as Button,
+  default66 as Body,
+  default65 as BottomBar,
+  default64 as Button,
   B as ButtonAsLink,
-  default62 as ButtonGroup,
-  default61 as Card,
+  default63 as ButtonGroup,
+  default62 as Card,
   C as CardAppearanceColor,
-  default60 as Carousel,
-  default59 as Checkbox,
-  default58 as CheckboxGroup,
-  default57 as Collapsible,
-  default56 as ColorSwatch,
-  default55 as ColorSwatchGroup,
-  default54 as ConsentMessage,
-  default53 as Container,
+  default61 as Carousel,
+  default60 as Checkbox,
+  default59 as CheckboxGroup,
+  default58 as Collapsible,
+  default57 as ColorSwatch,
+  default56 as ColorSwatchGroup,
+  default55 as ConsentMessage,
+  default54 as Container,
   ContainerAppearanceColor,
-  default52 as DateInput,
-  default51 as DemoBox,
-  default50 as Dialog,
-  default49 as DiscoveryCard,
-  default48 as DiscoveryCardGroup,
-  default47 as Divider,
-  default46 as Fieldset,
-  default45 as FilterGroup,
-  default44 as Flex,
-  default43 as FlexItem,
-  default42 as FootnoteContent,
-  default41 as FootnoteLink,
-  default40 as Form,
-  default39 as FormElement,
-  default38 as FormHelperLabel,
-  default37 as FormHelperMessage,
-  default36 as FormHelperStatusIcon,
+  default53 as DateInput,
+  default52 as DemoBox,
+  default51 as Dialog,
+  default50 as DiscoveryCard,
+  default49 as DiscoveryCardGroup,
+  default48 as Divider,
+  default47 as Fieldset,
+  default46 as FilterGroup,
+  default45 as Flex,
+  default44 as FlexItem,
+  default43 as FootnoteContent,
+  default42 as FootnoteLink,
+  default41 as Form,
+  default40 as FormElement,
+  default39 as FormHelperLabel,
+  default38 as FormHelperMessage,
+  default37 as FormHelperStatusIcon,
   GlobalStyle,
-  default35 as GoogleMap,
-  default34 as Grid,
-  default33 as GridItem,
-  default32 as Heading,
-  default31 as HifiIcon,
-  default30 as Icon,
-  default29 as IconButton,
-  default28 as IconSnippet,
-  default27 as IconSnippetList,
-  default26 as Image,
-  default25 as ImageHeader,
-  default24 as InlineLink,
-  default23 as Input,
-  default22 as Label,
-  default21 as Legend,
-  default20 as Link,
+  default36 as GoogleMap,
+  default35 as Grid,
+  default34 as GridItem,
+  default33 as Heading,
+  HiddenRadioStyled,
+  default32 as HifiIcon,
+  default31 as Icon,
+  default30 as IconButton,
+  default29 as IconSnippet,
+  default28 as IconSnippetList,
+  default27 as Image,
+  default26 as ImageHeader,
+  default25 as InlineLink,
+  default24 as Input,
+  default23 as Label,
+  default22 as Legend,
+  default21 as Link,
   L as LinkAsButton,
-  default19 as LinkList,
-  default18 as LinkListItem,
-  default17 as LoadingSpinner,
-  default16 as Notification,
-  default15 as Overlay,
-  default14 as PickerGroup,
+  default20 as LinkList,
+  default19 as LinkListItem,
+  default18 as LoadingSpinner,
+  default17 as Notification,
+  default16 as Overlay,
+  default15 as PickerGroup,
   P as Price,
-  default13 as ProductCard,
-  default12 as RadioGroup,
+  default14 as ProductCard,
+  default13 as RadioGroup,
+  default12 as Rating,
   default11 as ResponsiveImage,
   R as RichText,
   S as ScreenreaderOnly,
   default10 as SearchInput,
   default9 as SelectInput,
+  StarLabelStyled,
+  StarsWrapperStyled,
   default8 as Stepper,
   default7 as SuggestInput,
   default6 as Switch,
@@ -293,5 +298,5 @@ export {
   useMediaQuery,
   useReducedMotion,
   useThirdPartyConsent,
-  useViewport
+  u as useViewport
 };

package/package.json

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