@vodafone_de/brix-components 7.0.8 → 7.0.9

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

@@ -5,7 +5,7 @@ import Body from "./components/Body/index.js";
 import FootnoteLink from "./components/FootnoteLink/index.js";
 import Heading from "./components/Heading/index.js";
 import InlineLink from "./components/InlineLink/index.js";
-import { f as headingHtmlTags, o as olTagName, g as strongTagName, i as supTagName, u as ulTagName } from "./tags-DI6H1biK.js";
+import { g as headingHtmlTags, o as olTagName, f as strongTagName, i as supTagName, u as ulTagName } from "./tags-D0ExIPLD.js";
 import { s as spacingMd, b as spacingNone } from "./Spacing-D0HQH9YJ.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
@@ -13,9 +13,9 @@ 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 { a as filterProps } from "./filterProps-CBnuV0LI.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 = () => {

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

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { df as IconLoader, ix as iconSizeXs, iv as iconSizeSm } from "./index-Cbojl4_Q.js";
+import IconLoader from "./components/IconLoader/index.js";
+import { a as iconSizeXs, b as iconSizeSm } from "./styled-DPHfwWsx.js";
 import { a as spacingXs, e as spacing2Xs, c as spacingSm, s as spacingMd } from "./Spacing-D0HQH9YJ.js";
 import { s as smallSize, m as mediumSize } from "./SizeTypes-Ck_RdzIf.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
@@ -12,10 +13,10 @@ 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";
+import { a as filterProps } from "./filterProps-CBnuV0LI.js";
 import { e as colorObjectSuccess, f as colorObjectNeutral, g as colorObjectAccent, c as colorObjectBrand } from "./ObjectColor-BZDBuV8H.js";
 const BadgeAppearanceColor = {
   primary: colorObjectBrand,

package/dist/{index-C5GzK6_0.js → index-Cqh8IRpl.js}

@@ -1,11 +1,11 @@
 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-C4eI47I1.js";
+import { b as iconSizeSm } from "./styled-DPHfwWsx.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
-import { s as spacingMd, b as spacingNone, a as spacingXs } from "./Spacing-D0HQH9YJ.js";
-import { f as filterProps } from "./filterProps-Cewck8OH.js";
+import { b as spacingNone, a as spacingXs, s as spacingMd } from "./Spacing-D0HQH9YJ.js";
+import { a as filterProps } from "./filterProps-CBnuV0LI.js";
 import forcedColors from "./foundations/media-query/forcedColors/index.js";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
 import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
@@ -29,7 +29,7 @@ const linkBaseCssObject = {
   cursor: "pointer",
   gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
   ...getBodySize(textBodyMd),
-  "&:focus-visible": {
+  "&:focus-within": {
     ...forcedColors({
       outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
     }),
@@ -50,11 +50,21 @@ const linkBaseCssObject = {
     textDecoration: "underline"
   }
 };
-const LinkStyled = styled.a.withConfig({
-  shouldForwardProp: filterProps(),
+const LinkStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(["href"]),
   displayName: "LinkStyled",
   componentId: "sc-1eekm6o-0"
-})(linkBaseCssObject, ({
+})(linkBaseCssObject, {
+  "& a": {
+    color: "inherit",
+    display: "flex",
+    gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+    textDecoration: "none"
+  },
+  "& a:focus-visible": {
+    outline: "none"
+  }
+}, ({
   bottomSpacing = spacingMd
 }) => getBottomSpacing({
   bottomSpacing

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-DQhtQZ85.js → index-GwyCjtti.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-import { f as filterProps } from "./filterProps-Cewck8OH.js";
+import { a as filterProps } from "./filterProps-CBnuV0LI.js";
 const screenreaderOnly = {
   position: "absolute",
   left: "-10000px",

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

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { S as ScreenreaderOnly } from "./index-DQhtQZ85.js";
-import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import { S as ScreenreaderOnly } from "./index-GwyCjtti.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
@@ -8,10 +7,11 @@ 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";
+import { a as filterProps } from "./filterProps-CBnuV0LI.js";
+import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 const priceOrientationHorizontal = "horizontal";
 const priceOrientationVertical = "vertical";
 const priceSizeSm = "sm";
@@ -19,25 +19,6 @@ const priceSizeMd = "md";
 const priceSizeLg = "lg";
 const priceAlignLeft = "left";
 const priceAlignCenter = "center";
-const priceDefaultProps = {
-  bottomSpacing: spacingMd,
-  orientation: priceOrientationVertical,
-  align: priceAlignLeft
-};
-const internalizePriceProps = (props) => {
-  const {
-    orientation,
-    align,
-    bottomSpacing,
-    ...rest
-  } = props;
-  return {
-    ...rest,
-    align,
-    bottomSpacing,
-    $orientation: orientation
-  };
-};
 const textDecorationStrikethrough = "Strikethrough";
 const PriceOuterWrapperStyled = styled.div.withConfig({
   displayName: "PriceOuterWrapperStyled",
@@ -134,7 +115,7 @@ const Price = (props) => {
   }, children: [
     offerProductName && /* @__PURE__ */ jsx("meta", { itemProp: "name", content: offerProductName }),
     /* @__PURE__ */ jsx(ScreenreaderOnly, { children: createScreenReaderText(props.price, props.strikePrice, props.suffix) }),
-    /* @__PURE__ */ jsxs(PriceInnerWrapperStyled, { ...priceProps, orientation, align, ...{
+    /* @__PURE__ */ jsxs(PriceInnerWrapperStyled, { ...priceProps, price, orientation, align, ...{
       "aria-hidden": true
     }, itemProp: offerProductName ? "offers" : void 0, itemType: offerProductName ? "https://schema.org/Offer" : void 0, itemScope: offerProductName ? true : void 0, children: [
       offerProductName && /* @__PURE__ */ jsx("meta", { itemProp: "priceCurrency", content: "EUR" }),
@@ -202,7 +183,5 @@ export {
   priceSizeLg as e,
   priceAlignLeft as f,
   priceAlignCenter as g,
-  priceDefaultProps as h,
-  internalizePriceProps as i,
   priceOrientationHorizontal as p
 };

package/dist/{index-C7meHOM4.js → index-hMlQuoyx.js}

@@ -1,6 +1,8 @@
 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 { b as iconSizeSm } from "./styled-DPHfwWsx.js";
+import { l as leftPosition, c as ButtonIconStyled, b as buttonHeight, g as getButtonAppearance, p as primaryAppearance } from "./styled-C4eI47I1.js";
+import { useLinkComponent } from "./hooks/useLinkComponent/index.js";
+import { a as filterProps, f as filterPropsForUnstyledComponent } from "./filterProps-CBnuV0LI.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
@@ -9,10 +11,9 @@ 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 spacingXs, d as spacingXl, b as spacingNone, s as spacingMd } from "./Spacing-D0HQH9YJ.js";
+import { a as fontWeightRegular } from "./FontWeight-DEBGHbtO.js";
+import { b as spacingNone, a as spacingXs, d as spacingXl, s as spacingMd } from "./Spacing-D0HQH9YJ.js";
 import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
-import { f as filterProps } from "./filterProps-Cewck8OH.js";
 const getButtonIcon = (icon) => {
   if (!icon || !icon.name) {
     return null;
@@ -20,25 +21,41 @@ const getButtonIcon = (icon) => {
   const position = icon.position || leftPosition;
   return /* @__PURE__ */ jsx(ButtonIconStyled, { iconPosition: position, size: iconSizeSm, name: icon.name });
 };
-const ButtonAsLinkStyled = styled.a.withConfig({
-  shouldForwardProp: filterProps(),
+const ButtonAsLinkStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(["href"]),
   displayName: "ButtonAsLinkStyled",
   componentId: "sc-c87xxk-0"
 })({
   appearance: "none",
-  display: "flex",
   flexWrap: "nowrap",
   alignItems: "center",
   justifyContent: "center",
   cursor: "pointer",
-  gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+  position: "relative",
   padding: `${getSpacing(spacingXs)} ${getSpacing(spacingXl)}`,
   borderRadius: getBorderRadius(borderRadiusMd),
   fontWeight: getFontWeight(fontWeightRegular),
   height: buttonHeight,
-  textDecoration: "none",
+  display: "flex",
   "&:hover": {
     textDecoration: "none"
+  },
+  "& a": {
+    color: "inherit",
+    display: "flex",
+    gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+    textDecoration: "none"
+  },
+  "& a:focus-visible": {
+    outline: "none"
+  },
+  "& a::after": {
+    content: '""',
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    top: 0,
+    left: 0
   }
 }, getBodySize(textBodyMd), ({
   width = "auto"
@@ -51,10 +68,15 @@ const ButtonAsLinkStyled = styled.a.withConfig({
 }) => getBottomSpacing({
   bottomSpacing
 }));
-const ButtonAsLink = (props) => /* @__PURE__ */ jsxs(ButtonAsLinkStyled, { ...props, children: [
-  renderInlineRichTextFromOpenText(props.children),
-  getButtonIcon(props == null ? void 0 : props.icon)
-] });
+const ButtonAsLink = (props) => {
+  const {
+    LinkComponent
+  } = useLinkComponent();
+  return /* @__PURE__ */ jsx(ButtonAsLinkStyled, { ...props, children: /* @__PURE__ */ jsxs(LinkComponent, { ...filterPropsForUnstyledComponent(props), children: [
+    renderInlineRichTextFromOpenText(props.children),
+    getButtonIcon(props == null ? void 0 : props.icon)
+  ] }) });
+};
 export {
   ButtonAsLink as B,
   getButtonIcon as g

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';
@@ -56,6 +60,8 @@ export * from './components/Input';
 export { default as Input } from './components/Input';
 export * from './components/InlineLink';
 export { default as InlineLink } from './components/InlineLink';
+export * from './components/InlineIcon';
+export { default as InlineIcon } from './components/InlineIcon';
 export * from './components/ImageHeader';
 export { default as ImageHeader } from './components/ImageHeader';
 export * from './components/Image';
@@ -64,6 +70,8 @@ export * from './components/IconSnippetList';
 export { default as IconSnippetList } from './components/IconSnippetList';
 export * from './components/IconSnippet';
 export { default as IconSnippet } from './components/IconSnippet';
+export * from './components/IconLoader';
+export { default as IconLoader } from './components/IconLoader';
 export * from './components/IconButton';
 export { default as IconButton } from './components/IconButton';
 export * from './components/Icon';
@@ -171,5 +179,6 @@ export * from './hooks/useViewport';
 export * from './hooks/useThirdPartyConsent';
 export * from './hooks/useReducedMotion';
 export * from './hooks/useMediaQuery';
+export * from './hooks/useLinkComponent';
 export * from './hooks/useForcedColors';
 export * from './hooks/useFocusWithin';