@vodafone_de/brix-components 7.0.3 → 7.0.5

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/RichText/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
 import "react";
-import { R } from "../../index-BeSd-V81.js";
+import { R } from "../../index-ClmKFtnx.js";
 export {
   R as default
 };

package/dist/components/SearchInput/index.js

@@ -5,7 +5,7 @@ import { forwardRef, useState, useRef, useImperativeHandle } from "react";
 import FormHelperLabel from "../FormHelperLabel/index.js";
 import IconButton, { iconButtonShapeSquare } from "../IconButton/index.js";
 import { b as spacingNone, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
-import { p as primaryAppearance } from "../../styled-BSqC5P9h.js";
+import { p as primaryAppearance } from "../../styled-DLS1p_AJ.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import Form from "../Form/index.js";
 import styled from "styled-components";

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";
@@ -12,7 +12,7 @@ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index
 import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
 import { g as colorBorderBrand, a as colorBorderNeutral, h as colorBorderInverse } from "../../BorderColor-BummoQ1-.js";
-import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { c as colorObjectBrand, a as colorObjectInverse } from "../../ObjectColor-BZDBuV8H.js";
 import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";

package/dist/components/TabularPrice/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { T } from "../../index-aUJfXBUI.js";
+import { T } from "../../index-WLBo71sp.js";
 import "../../index-DQhtQZ85.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {

package/dist/components/TextList/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { a, T } from "../../index-BeSd-V81.js";
+import { a, T } from "../../index-ClmKFtnx.js";
 import "../../tags-DI6H1biK.js";
 import "../../Spacing-D0HQH9YJ.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";

package/dist/components/Tray/index.js

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import ButtonGroup from "../ButtonGroup/index.js";
 import Heading from "../Heading/index.js";
-import { f as fontWeightBold } from "../../FontWeight-CR22KTex.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";

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-C7meHOM4.js → index-57IF0yrd.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { iv as iconSizeSm } from "./index-Cbojl4_Q.js";
-import { l as leftPosition, c as ButtonIconStyled, b as buttonHeight, g as getButtonAppearance, p as primaryAppearance } from "./styled-BSqC5P9h.js";
+import { l as leftPosition, c as ButtonIconStyled, b as buttonHeight, g as getButtonAppearance, p as primaryAppearance } from "./styled-DLS1p_AJ.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
@@ -9,7 +9,7 @@ import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js"
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
-import { b as fontWeightRegular } from "./FontWeight-CR22KTex.js";
+import { a as fontWeightRegular } from "./FontWeight-DEBGHbtO.js";
 import { a as spacingXs, d as spacingXl, b as spacingNone, s as spacingMd } from "./Spacing-D0HQH9YJ.js";
 import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
 import { f as filterProps } from "./filterProps-Cewck8OH.js";

package/dist/{index-ZHkR70j3.js → index-CKvLGUdD.js}

@@ -12,7 +12,7 @@ import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { c as borderRadiusFull } from "./BorderRadius-ClUShVLu.js";
-import { f as fontWeightBold } from "./FontWeight-CR22KTex.js";
+import { f as fontWeightBold } from "./FontWeight-DEBGHbtO.js";
 import { a as textBodySm, t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
 import { b as getForegroundColor } from "./colorUtils-BSfFfgbi.js";
 import { f as filterProps } from "./filterProps-Cewck8OH.js";

package/dist/{index-BeSd-V81.js → index-ClmKFtnx.js}

@@ -13,14 +13,11 @@ 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 { getSpacing } from "./foundations/token/getSpacing/index.js";
-import { b as fontWeightRegular } from "./FontWeight-CR22KTex.js";
+import { a as fontWeightRegular } from "./FontWeight-DEBGHbtO.js";
 import { a as textBodySm, t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
 import { f as filterProps } from "./filterProps-Cewck8OH.js";
 import { t as textHeadingXs, b as textHeadingSm, a as textHeadingMd, c as textHeadingLg, d as textHeadingXl } from "./HeadingSize-CfCRn3Lh.js";
-import { v4 } from "uuid";
-const getUid = () => {
-  return v4();
-};
+import { g as getUid } from "./index-DR3e19BE.js";
 const mapSizeToTag = {
   h1: textHeadingXl,
   h2: textHeadingLg,
@@ -163,6 +160,5 @@ const TextList = ({
 export {
   RichText as R,
   TextList as T,
-  TextListItem as a,
-  getUid as g
+  TextListItem as a
 };

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-DR3e19BE.js

@@ -0,0 +1,7 @@
+import { v4 } from "uuid";
+const getUid = () => {
+  return v4();
+};
+export {
+  getUid as g
+};

package/dist/{index-C5GzK6_0.js → index-DrySIh-D.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { iv as iconSizeSm } from "./index-Cbojl4_Q.js";
-import { c as ButtonIconStyled } from "./styled-BSqC5P9h.js";
+import { c as ButtonIconStyled } from "./styled-DLS1p_AJ.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";

package/dist/{index-aUJfXBUI.js → index-WLBo71sp.js}

@@ -8,7 +8,7 @@ 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 { getTextDecoration } from "./foundations/token/getTextDecoration/index.js";
-import { f as fontWeightBold, b as fontWeightRegular } from "./FontWeight-CR22KTex.js";
+import { f as fontWeightBold, a as fontWeightRegular } from "./FontWeight-DEBGHbtO.js";
 import { s as spacingMd, b as spacingNone, a as spacingXs } from "./Spacing-D0HQH9YJ.js";
 import { g as colorTextCritical, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
 import { f as filterProps } from "./filterProps-Cewck8OH.js";

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';
@@ -38,6 +40,8 @@ export * from './components/Overlay';
 export { default as Overlay } from './components/Overlay';
 export * from './components/Notification';
 export { default as Notification } from './components/Notification';
+export * from './components/MediaText';
+export { default as MediaText } from './components/MediaText';
 export * from './components/LoadingSpinner';
 export { default as LoadingSpinner } from './components/LoadingSpinner';
 export * from './components/LinkListItem';