@vodafone_de/brix-components 7.0.8 → 7.0.9

package/dist/components/LoadingSpinner/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useState, 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-DMUiOi24.js";
+import { S as ScreenreaderOnly } from "../../index-GwyCjtti.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-CFTspqJH.js";
 const LoadingSpinnerSVG = ({
   size = "lg",
   ...props
@@ -31,10 +31,11 @@ const LoadingSpinner = ({
   coversFullPage,
   screenReaderLabel,
   screenReaderLabelCompleted,
-  //This default is set as the 'wrapper' element is currently containing the majority of the content of pages from our CMS.
+  //This default is set as the 'wrapper' element is currently containing the majority of the content of pages from our CMS
   getContentElements = () => document.getElementsByClassName("wrapper"),
   ...props
 }) => {
+  const [hasBeenMounted, setHasBeenMounted] = useState(false);
   const loadingSpinner = /* @__PURE__ */ jsxs(LoadingSpinnerContainerStyled, { className: props.className, role: isActive ? "progressbar" : void 0, "aria-busy": isActive && !screenReaderLabel ? true : void 0, "aria-live": "polite", "aria-label": isActive ? screenReaderLabel : void 0, coversFullPage, bottomSpacing, children: [
     isActive && /* @__PURE__ */ jsxs(LoadingSpinnerContentStyled, { size, hasOverlay: coversFullPage ? true : hasOverlay, coversFullPage, children: [
       size === "xs" ? /* @__PURE__ */ jsx(LoadingSpinnerXsSVG, { ...props, size }) : /* @__PURE__ */ jsx(LoadingSpinnerSVG, { ...props, size }),
@@ -45,6 +46,9 @@ const LoadingSpinner = ({
       inert: isActive ? true : void 0
     }, children }) })
   ] });
+  useEffect(() => {
+    setHasBeenMounted(true);
+  }, []);
   useEffect(() => {
     if (coversFullPage) {
       document.body.classList.toggle("HideOverflowY", isActive);
@@ -63,7 +67,10 @@ const LoadingSpinner = ({
       }
     };
   }, [isActive, coversFullPage]);
-  return coversFullPage ? createPortal(loadingSpinner, document.body) : loadingSpinner;
+  if (coversFullPage && hasBeenMounted) {
+    return createPortal(loadingSpinner, document.body);
+  }
+  return loadingSpinner;
 };
 export {
   LoadingSpinner as default

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { MediaTextProps } from './props';
+declare const MediaText: FC<MediaTextProps>;
+export default MediaText;
+export * from './props';

package/dist/components/MediaText/index.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Flex from "../Flex/index.js";
+import FlexItem from "../FlexItem/index.js";
+import Heading, { headingAlignLeft } from "../Heading/index.js";
+import Image, { aspectRatio16_9 } from "../Image/index.js";
+import Link from "../Link/index.js";
+import { g as getUid, R as RichText } from "../../index-9io8adeQ.js";
+import YoutubeVideo from "../YoutubeVideo/index.js";
+import { p as pTagName, u as ulTagName, d as divTagName, l as liTagName } from "../../tags-D0ExIPLD.js";
+import { a as fontWeightRegular } from "../../FontWeight-DEBGHbtO.js";
+import { b as textHeadingSm, t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { s as spacingMd, e as spacing2Xs, c as spacingSm, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { u as useViewport } from "../../index-Cs0Hw0dj.js";
+import styled from "styled-components";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
+import { a as flexOrientationVertical, f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-CPUu8mvT.js";
+const mediaTextPositionTop = "top";
+const mediaTextPositionLeft = "left";
+const mediaTextPositionRight = "right";
+const MediaTextStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "MediaTextStyled",
+  componentId: "sc-zs2pry-0"
+})(({
+  position,
+  bottomSpacing = spacingMd
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  ...viewport.md({
+    flexDirection: position === "top" ? "column" : position === "left" ? "row" : "row-reverse"
+  }),
+  ...getBottomSpacing({
+    bottomSpacing
+  })
+}));
+const MediaTextMediaStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "MediaTextMediaStyled",
+  componentId: "sc-zs2pry-1"
+})(({
+  position,
+  bottomSpacing = spacingMd
+}) => ({
+  flex: 1,
+  ...getBottomSpacing({
+    bottomSpacing
+  }),
+  ...viewport.md({
+    ...position != mediaTextPositionTop ? {
+      marginBottom: 0
+    } : {}
+  })
+}));
+const MediaTextContentStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "MediaTextContentStyled",
+  componentId: "sc-zs2pry-2"
+})(({
+  position
+}) => ({
+  flex: 1,
+  ...viewport.md({
+    ...position === "left" && {
+      paddingLeft: getSpacing(spacingMd)
+    },
+    ...position === "right" && {
+      paddingRight: getSpacing(spacingMd)
+    }
+  })
+}));
+const MediaText = ({
+  media,
+  position = mediaTextPositionLeft,
+  heading,
+  subline,
+  richText,
+  action,
+  ...props
+}) => {
+  const headingId = `heading-${getUid()}`;
+  const sublineId = `subline-${getUid()}`;
+  const viewport2 = useViewport();
+  const headingSpacing = subline ? spacing2Xs : spacingMd;
+  const hasMultipleActions = Array.isArray(action) && action.length > 1;
+  const actionFlexAs = hasMultipleActions ? ulTagName : divTagName;
+  const linkFlexItemAs = hasMultipleActions ? liTagName : divTagName;
+  const renderMedia = (media2) => {
+    if (!media2) return null;
+    switch (media2.component) {
+      case "Image":
+        return /* @__PURE__ */ jsx(Image, { ...media2, aspectRatio: media2.aspectRatio ?? aspectRatio16_9, bottomSpacing: spacingNone });
+      case "YoutubeVideo":
+        return /* @__PURE__ */ jsx(YoutubeVideo, { ...media2, bottomSpacing: spacingNone });
+      default:
+        console.warn(`Unsupported media component: ${media2.component}`);
+        return null;
+    }
+  };
+  const mediaContent = useMemo(() => renderMedia(media), [media]);
+  return /* @__PURE__ */ jsxs(MediaTextStyled, { position, ...props, children: [
+    /* @__PURE__ */ jsx(MediaTextMediaStyled, { position, children: mediaContent }),
+    /* @__PURE__ */ jsxs(MediaTextContentStyled, { position, children: [
+      /* @__PURE__ */ jsx(Heading, { ...heading, id: headingId, align: headingAlignLeft, size: textHeadingSm, bottomSpacing: headingSpacing }),
+      subline && /* @__PURE__ */ jsx(Heading, { ...subline, id: sublineId, align: headingAlignLeft, size: textHeadingXs, weight: fontWeightRegular, tag: pTagName, bottomSpacing: spacingMd }),
+      /* @__PURE__ */ jsx(RichText, { ...richText, bottomSpacing: spacingMd }),
+      /* @__PURE__ */ jsx(Flex, { bottomSpacing: spacingMd, gapSpacing: spacingSm, justify: flexJustifyStart, orientation: "sm" === viewport2 ? flexOrientationVertical : flexOrientationHorizontal, as: actionFlexAs, children: action && action.map((action2) => /* @__PURE__ */ jsx(FlexItem, { as: linkFlexItemAs, bottomSpacing: spacingNone, children: /* @__PURE__ */ jsx(Link, { ...action2 }) }, action2.uid)) })
+    ] })
+  ] });
+};
+export {
+  MediaText as default,
+  mediaTextPositionLeft,
+  mediaTextPositionRight,
+  mediaTextPositionTop
+};

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

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+import { HeadingProps } from '../Heading/props';
+import { ImageProps } from '../Image';
+import { LinkProps } from '../Link';
+import { RichTextProps } from '../RichText';
+import { YoutubeVideoProps } from '../YoutubeVideo';
+import { PatternProps } from '../../foundations/PatternProps';
+export declare const mediaTextPositionTop = "top";
+export declare const mediaTextPositionLeft = "left";
+export declare const mediaTextPositionRight = "right";
+export type MediaTextPosition = typeof mediaTextPositionTop | typeof mediaTextPositionLeft | typeof mediaTextPositionRight;
+export interface MediaTextProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'MediaText';
+    /**
+     * media prop can be either an Image or a YoutubeVideo
+     * The aspect ratio is by default 16 to 9.
+     */
+    media: Omit<ImageProps, 'bottomSpacing'> | Omit<YoutubeVideoProps, 'bottomSpacing'>;
+    /**
+     * MediaText media can be positioned on top, left or right.
+     */
+    position?: MediaTextPosition;
+    /**
+     * Heading
+     */
+    heading: Omit<HeadingProps, 'size' | 'weight' | 'bottomSpacing'>;
+    /**
+     * Subline
+     */
+    subline?: Omit<HeadingProps, 'size' | 'weight' | 'tag' | 'bottomSpacing'>;
+    /**
+     * Rich text
+     */
+    richText: Omit<RichTextProps, 'bottomSpacing'>;
+    /**
+     * Action, list of links
+     */
+    action?: LinkProps[];
+}

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

@@ -0,0 +1,4 @@
+import { MediaTextProps } from './props';
+export declare const MediaTextStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "bottomSpacing" | "position">>> & string;
+export declare const MediaTextMediaStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "bottomSpacing" | "position">>> & string;
+export declare const MediaTextContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "position">>> & string;

package/dist/components/Notification/index.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { df as IconLoader, iv as iconSizeSm } from "../../index-Cbojl4_Q.js";
 import Body from "../Body/index.js";
 import Button from "../Button/index.js";
 import ButtonGroup from "../ButtonGroup/index.js";
 import Flex from "../Flex/index.js";
 import Heading from "../Heading/index.js";
+import IconLoader from "../IconLoader/index.js";
+import { b as iconSizeSm } from "../../styled-DPHfwWsx.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-BeSd-V81.js";
+import { R as RichText } from "../../index-9io8adeQ.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
 import { e as colorBorderCritical, f as colorBorderWarning, d as colorBorderSuccess, k as colorBorderInformation } from "../../BorderColor-BummoQ1-.js";
@@ -25,7 +26,7 @@ import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
 import { g as borderWidthMd } from "../../BorderWidth-DfOlyKK7.js";
 import { d as colorIconInverse } from "../../IconColor-CtC9WUgr.js";
 import { s as spacingMd, c as spacingSm } from "../../Spacing-D0HQH9YJ.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const notificationStatusVariants = {
   info: {
     borderColor: getBorderColor(colorBorderInformation),

package/dist/components/Notification/notificationStatusVariants.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@vfde-react/inline-icon-library';
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
 import { NotificationStatus } from './props';
 type NotificationStatusVariant = {
     borderColor: string;

package/dist/components/Overlay/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { d as colorBackgroundOverlayStatic } from "../../BackgroundColor-e0N9tdDR.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const overlayAppearancePrimary = "primary";
 const overlayAppearanceSecondary = "secondary";
 const OverlayStyled = styled.div.withConfig({

package/dist/components/PickerGroup/components/Picker/props.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@vfde-react/inline-icon-library';
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
 import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 import { BadgeProps } from '../../../Badge/props';
 import { PatternProps } from '../../../../foundations/PatternProps';
@@ -33,7 +33,7 @@ export interface PickerProps extends Omit<PatternProps, 'bottomSpacing'>, HTMLAt
      */
     suffix?: string;
     /**
-     * Path to an immage asset
+     * Path to an image asset
      */
     imagePath?: string;
     /**
@@ -49,16 +49,18 @@ export interface PickerProps extends Omit<PatternProps, 'bottomSpacing'>, HTMLAt
      */
     badge?: Omit<BadgeProps, 'bottomSpacing'>;
     /**
-     *
+     * can only be set in apps and not in CMS
      */
     handleChange?: (a: string) => void;
     /**
      * if there are any optional input props needed to pass down to input component
      * all props that are passed by the PickerComponent are omitted
+     * can only be set in apps and not in CMS
      */
     inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name' | 'value' | 'checked' | 'disabled'>;
     /**
-     * if there are any optional input props needed to pass down to input component
+     * if there are any optional label props needed to pass down to label component
+     * can only be set in apps and not in CMS
      */
     labelProps?: Omit<InputHTMLAttributes<HTMLLabelElement>, 'children'>;
     /**

package/dist/components/PickerGroup/components/PickerElementIcon/index.d.ts

@@ -1,4 +1,4 @@
-import { IconLoaderProps } from '@vfde-react/inline-icon-library';
 import { FC } from 'react';
+import { IconLoaderProps } from '../../../IconLoader';
 export declare const PickerElementSystemIcon: FC<IconLoaderProps>;
 export default PickerElementSystemIcon;

package/dist/components/PickerGroup/components/PickerElementIcon/styled.d.ts

@@ -1 +1 @@
-export declare const PickerElementIconStyled: 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 PickerElementIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../../../IconLoader').IconLoaderProps, never>> & string & Omit<import('react').FC<import('../../../IconLoader').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/PickerGroup/index.js

@@ -5,15 +5,16 @@ import { a as inputStateError } from "../../props-DDpgcryb.js";
 import { e as spacing2Xs, s as spacingMd, c as spacingSm, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import { useState, useEffect } from "react";
 import Grid from "../Grid/index.js";
-import { df as IconLoader, iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
-import { B as Badge } from "../../index-ZHkR70j3.js";
+import { B as Badge } from "../../index-BdPmdY9v.js";
 import ColorSwatch from "../ColorSwatch/index.js";
+import { c as iconSizeMd } from "../../styled-DPHfwWsx.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
+import IconLoader from "../IconLoader/index.js";
 import Image, { aspectRatio1_1 } from "../Image/index.js";
 import { v as viewport } from "../../index-Ck2bCrhT.js";
 import GridItem from "../GridItem/index.js";
-import { s as screenreaderOnly } from "../../index-DQhtQZ85.js";
+import { s as screenreaderOnly } from "../../index-GwyCjtti.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";
@@ -27,10 +28,10 @@ import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
 import { a as borderWidthFocus, d as borderWidthSelected } from "../../BorderWidth-DfOlyKK7.js";
-import { b as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { a as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { o as opacityOverlay } from "../../Opacity-smkGiwsf.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { getBodySize } from "../../foundations/token/getBodySize/index.js";

package/dist/components/Price/index.js

@@ -1,15 +1,13 @@
 "use client";
 import "react/jsx-runtime";
-import "../../index-DQhtQZ85.js";
+import "../../index-GwyCjtti.js";
+import { c, P, g, f, p, a, e, d, b } from "../../index-TImInHXt.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { c, P, i, g, f, h, p, a, e, d, b } from "../../index-aUJfXBUI.js";
 export {
   c as createScreenReaderText,
   P as default,
-  i as internalizePriceProps,
   g as priceAlignCenter,
   f as priceAlignLeft,
-  h as priceDefaultProps,
   p as priceOrientationHorizontal,
   a as priceOrientationVertical,
   e as priceSizeLg,

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

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
-import { Spacing } from '../../foundations/token/types/Spacing';
 export declare const priceOrientationHorizontal = "horizontal";
 export declare const priceOrientationVertical = "vertical";
 export type PriceOrientation = typeof priceOrientationHorizontal | typeof priceOrientationVertical;
@@ -27,7 +26,7 @@ export interface PriceSharedProps extends PatternProps, HTMLAttributes<HTMLDivEl
     /**
      * Main price
      */
-    price?: string;
+    price: string;
     /**
      * Product name that renders microdata attributes needed for SEO if set
      */
@@ -56,10 +55,3 @@ export interface PriceProps extends PriceSharedProps {
      */
     align?: PriceAlign;
 }
-export declare const priceDefaultProps: Partial<PriceProps>;
-export interface PriceInternalProps extends Omit<PriceProps, 'orientation'> {
-    $orientation: PriceOrientation;
-    bottomSpacing: Spacing;
-    align: PriceAlign;
-}
-export declare const internalizePriceProps: (props: PriceProps) => PriceInternalProps;

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

@@ -2,6 +2,6 @@ import { PriceProps, PriceSharedProps } from './props';
 export declare const PriceOuterWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PriceInnerWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PriceProps>> & string;
 export declare const StrikePriceStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PriceOrientationStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<PriceProps, "orientation" | "align">>> & string;
+export declare const PriceOrientationStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<PriceProps, "align" | "orientation">>> & string;
 export declare const PriceStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<PriceSharedProps, "size">>> & string;
 export declare const PriceSuffixStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/ProductCard/index.js

@@ -1,20 +1,20 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { it as iconSizeLg } from "../../index-Cbojl4_Q.js";
-import Image, { aspectRatio1_1 } from "../Image/index.js";
-import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
-import { a as textHeadingMd } from "../../HeadingSize-CfCRn3Lh.js";
-import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
-import { B as Badge } from "../../index-ZHkR70j3.js";
+import { B as Badge } from "../../index-BdPmdY9v.js";
 import Body from "../Body/index.js";
 import ColorSwatchGroup from "../ColorSwatchGroup/index.js";
 import Heading from "../Heading/index.js";
+import Image, { aspectRatio1_1 } from "../Image/index.js";
+import { d as iconSizeLg } from "../../styled-DPHfwWsx.js";
 import Link from "../Link/index.js";
-import { P as Price, d as priceSizeMd, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-aUJfXBUI.js";
+import { P as Price, d as priceSizeMd, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-TImInHXt.js";
+import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
+import { a as textHeadingMd } from "../../HeadingSize-CfCRn3Lh.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
-import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import Card from "../Card/index.js";
 import Icon from "../Icon/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 const ProductCardStyled = styled(Card).withConfig({
   displayName: "ProductCardStyled",
   componentId: "sc-1ps8gys-0"

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

@@ -1,6 +1,6 @@
 import { CardProps } from '../Card/props';
 import { IconProps } from '../Icon/props';
 export declare const ProductCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<CardProps, CardProps>> & string & Omit<import('react').FC<CardProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ProductCardIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('@vfde-react/inline-icon-library').IconLoaderProps | import('../HifiIcon').HifiIconProps | IconProps, IconProps>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps | import('../HifiIcon').HifiIconProps | IconProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ProductCardIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../IconLoader').IconLoaderProps | import('../HifiIcon').HifiIconProps | IconProps, IconProps>> & string & Omit<import('react').FC<import('../IconLoader').IconLoaderProps | import('../HifiIcon').HifiIconProps | IconProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ProductCardUpperContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never>> & string;
 export declare const ProductCardImageStyled: 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/RadioGroup/index.js

@@ -19,7 +19,7 @@ import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
 import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
 import { b as colorObjectSelected, a as colorObjectInverse } from "../../ObjectColor-BZDBuV8H.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const RadioContainer = styled(Flex).withConfig({
   shouldForwardProp: filterProps(["disabled"]),
   displayName: "RadioContainer",

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const StarSVG: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.SVGProps<SVGSVGElement>, never>> & string & Omit<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
+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,153 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import Fieldset from "../Fieldset/index.js";
+import styled from "styled-components";
+import { u as useViewport, v as viewportSm } from "../../index-Cs0Hw0dj.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 { 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 StarSVGBase = (props) => {
+  const viewport = useViewport();
+  let width = 32;
+  let height = 30.624;
+  if (viewport === viewportSm) {
+    width = 24;
+    height = 22.968;
+  }
+  return /* @__PURE__ */ jsx("svg", { style: {
+    display: "inline-block"
+  }, width, height, 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 StarSVG = styled(StarSVGBase).withConfig({
+  displayName: "StarSVG",
+  componentId: "sc-iheyat-0"
+})([""]);
+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 Rating = ({
+  value,
+  onUpdate,
+  className,
+  groupName,
+  uid,
+  component: _component,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = useState(value ?? 0);
+  const [hoverValue, setHoverValue] = useState(null);
+  useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const handleChange = (event) => {
+    const newValue = Number(event.target.value);
+    setInternalValue(newValue);
+    if (onUpdate) {
+      onUpdate(newValue);
+    }
+  };
+  const handleMouseEnter = (index) => {
+    setHoverValue(index + 1);
+  };
+  const handleMouseLeave = () => {
+    setHoverValue(null);
+  };
+  const handleClick = (starValue) => {
+    if (starValue === internalValue) {
+      setInternalValue(0);
+      if (onUpdate) {
+        onUpdate(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, {})
+    ] }, `star-${starValue}-${uid}`);
+  }) }) });
+};
+export {
+  HiddenRadioStyled,
+  StarLabelStyled,
+  StarsWrapperStyled,
+  Rating as default
+};