@vodafone_de/brix-components 7.0.0 → 7.0.2

package/dist/components/Badge/index.js

@@ -4,7 +4,7 @@ import "../../index-Cbojl4_Q.js";
 import "../../Spacing-D0HQH9YJ.js";
 import "../../SizeTypes-Ck_RdzIf.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { a, B } from "../../index-ZHkR70j3.js";
+import { a, B } from "../../index-B7B_2CjL.js";
 export {
   a as BadgeAppearanceColor,
   B as default

package/dist/components/DiscoveryCard/index.js

@@ -6,7 +6,7 @@ import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
 import { b as textHeadingSm } from "../../HeadingSize-CfCRn3Lh.js";
 import { s as spacingMd, b as spacingNone, a as spacingXs, c as spacingSm } from "../../Spacing-D0HQH9YJ.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
-import { b as BadgeStyled, B as Badge } from "../../index-ZHkR70j3.js";
+import { b as BadgeStyled, B as Badge } from "../../index-B7B_2CjL.js";
 import Body, { bodyAlignLeft, bodyAlignCenter } from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import Link from "../Link/index.js";

package/dist/components/ImageHeader/index.js

@@ -10,7 +10,7 @@ import Container from "../Container/index.js";
 import Heading, { headingAlignCenter } from "../Heading/index.js";
 import { P as Price, b as priceSizeSm } from "../../index-aUJfXBUI.js";
 import styled from "styled-components";
-import { B as Badge } from "../../index-ZHkR70j3.js";
+import { B as Badge } from "../../index-B7B_2CjL.js";
 import ButtonGroup from "../ButtonGroup/index.js";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";

package/dist/components/LinkListItem/index.js

@@ -4,7 +4,7 @@ import { iu as iconSizeMd, df as IconLoader } from "../../index-Cbojl4_Q.js";
 import { s as spanTagName } from "../../tags-DI6H1biK.js";
 import { s as spacingMd, a as spacingXs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
-import { B as Badge } from "../../index-ZHkR70j3.js";
+import { B as Badge } from "../../index-B7B_2CjL.js";
 import styled from "styled-components";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { e as ease_in_sine } from "../../easing-Dm-pO8SY.js";

package/dist/components/PickerGroup/index.js

@@ -6,7 +6,7 @@ import { e as spacing2Xs, s as spacingMd, c as spacingSm, b as spacingNone } fro
 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-B7B_2CjL.js";
 import ColorSwatch from "../ColorSwatch/index.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";

package/dist/components/ProductCard/index.js

@@ -5,7 +5,7 @@ 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-B7B_2CjL.js";
 import Body from "../Body/index.js";
 import ColorSwatchGroup from "../ColorSwatchGroup/index.js";
 import Heading from "../Heading/index.js";

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

@@ -1,2 +1,7 @@
 import { RefObject } from 'react';
+/**
+ * The useFocusWithin hook is a custom React Hook that tracks
+ * whether any element inside a given DOM node currently has focus (i.e., focus is "within" that node).
+ * This is useful for building components like dropdowns, modals, or form sections that should respond to focus in their subtree.
+ */
 export declare function useFocusWithin(ref: RefObject<HTMLElement>): boolean;

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

@@ -1 +1,4 @@
+/**
+ * the useForcedColors hook to detect if forced colors mode is active in the browser.
+ */
 export declare const useForcedColors: () => boolean;

package/dist/hooks/useForcedColors/index.js

@@ -1,7 +1,7 @@
 import { forcedColorsQuery } from "../../foundations/media-query/forcedColors/index.js";
 import { useMediaQuery } from "../useMediaQuery/index.js";
 const useForcedColors = () => {
-  const [reducedMotion] = useMediaQuery(forcedColorsQuery);
+  const reducedMotion = useMediaQuery(forcedColorsQuery);
   return reducedMotion;
 };
 export {

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

@@ -1 +1,7 @@
-export declare const useMediaQuery: (query: string, initialState?: boolean) => boolean[];
+/**
+ * The useMediaQuery hook is a custom React Hook that allows
+ * to respond to changes in a CSS media query.
+ *
+ * It's useful for building responsive UIs that adapt to screen size, orientation, or other media features.
+ */
+export declare const useMediaQuery: (query: string, initialState?: boolean) => boolean;

package/dist/hooks/useMediaQuery/index.js

@@ -12,7 +12,7 @@ const useMediaQuery = (query, initialState = false) => {
       mediaQuery.removeEventListener("change", handleMediaQueryChange);
     };
   }, [query]);
-  return [mediaQueryMatches];
+  return mediaQueryMatches;
 };
 export {
   useMediaQuery

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

@@ -1 +1,5 @@
+/**
+ * The useReducedMotion hook is a custom React Hook that detects
+ * whether the user has requested reduced motion in their system accessibility settings—typically to minimize animations and transitions.
+ */
 export declare const useReducedMotion: () => boolean;

package/dist/hooks/useReducedMotion/index.js

@@ -1,7 +1,7 @@
 import { reducedMotionQuery } from "../../foundations/media-query/reducedMotion/index.js";
 import { useMediaQuery } from "../useMediaQuery/index.js";
 const useReducedMotion = () => {
-  const [reducedMotion] = useMediaQuery(reducedMotionQuery);
+  const reducedMotion = useMediaQuery(reducedMotionQuery);
   return reducedMotion;
 };
 export {

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

@@ -15,4 +15,8 @@ export interface WindowWithScodeLoaded extends Window {
     };
 }
 export declare const checkThirdPartyConsentStorage: () => boolean;
+/**
+ * The useThirdPartyConsent hook is a custom React Hook designed to
+ * track and respond to changes in a user's third-party consent status,
+ */
 export declare const useThirdPartyConsent: () => boolean;

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

@@ -1,2 +1,7 @@
 import { ViewportName } from '../../foundations/token/types/Viewport';
+/**
+ * The useViewport hook is a custom React Hook that determines the current viewport size
+ * is matching one of our three size categories:
+ * sm, md or lg
+ */
 export declare const useViewport: () => ViewportName;

package/dist/hooks/useViewport/index.js

@@ -5,8 +5,8 @@ const viewportSm = "sm";
 const viewportMd = "md";
 const viewportLg = "lg";
 const useViewport = () => {
-  const [tablet] = useMediaQuery(mediumMediaQuery);
-  const [desktop] = useMediaQuery(largeMediaQuery);
+  const tablet = useMediaQuery(mediumMediaQuery);
+  const desktop = useMediaQuery(largeMediaQuery);
   const [viewportState, setViewportState] = useState(viewportSm);
   useEffect(() => {
     if (desktop) {

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

@@ -64,12 +64,14 @@ const BadgeStyled = styled.span.withConfig({
     color: foregroundColor
   };
 }, getBottomSpacing);
+const SECRET = "chpt_619be55aeaf9c59";
 const Badge = ({
   children,
   bottomSpacing = spacingMd,
   ...props
 }) => /* @__PURE__ */ jsxs(BadgeStyled, { ...props, bottomSpacing, children: [
   props.icon ? /* @__PURE__ */ jsx(IconLoader, { name: props.icon, size: props.size === smallSize ? iconSizeXs : iconSizeSm }) : null,
+  SECRET,
   renderInlineRichTextFromOpenText(children)
 ] });
 export {

package/dist/index.js

@@ -64,7 +64,7 @@ import { B } from "./index-VyKg-44v.js";
 import { default as default60, buttonAutoWidth, buttonFullWidth } from "./components/Button/index.js";
 import { default as default61 } from "./components/BottomBar/index.js";
 import { default as default62, bodyAlignCenter, bodyAlignLeft, bodyAlignRight } from "./components/Body/index.js";
-import { B as B2, a as a3 } from "./index-ZHkR70j3.js";
+import { B as B2, a as a3 } from "./index-B7B_2CjL.js";
 import { default as default63 } from "./components/AccordionGroup/index.js";
 import { default as default64, accordionToggleCollapsed, accordionToggleCollapsing, accordionToggleExpanded } from "./components/Accordion/index.js";
 import { getTextDecoration } from "./foundations/token/getTextDecoration/index.js";

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.0",
+  "version": "7.0.2",
   "exports": {
     "./package.json": "./package.json",
     ".": {