@vodafone_de/brix-components 3.0.1 → 3.0.2

package/dist/foundations/GlobalStyle/index.js

@@ -1,296 +1,7 @@
 "use client";
-import styled, { keyframes, css, createGlobalStyle } from "styled-components";
-import { g as getCssVar, a as getBodySize } from "../../index-BoPDwZgt.js";
-import { f as filterProps, g as getBottomSpacing, s as spacingNone, B as Body, a as getSpacing } from "../../index-BaPlSfS3.js";
-const forcedColorsQuery = `(forced-colors: active)`;
-const forcedColors = (stylesInViewport) => {
-  return {
-    [`@media ${forcedColorsQuery}`]: {
-      ...stylesInViewport
-    }
-  };
-};
-const reducedMotionQuery = `(prefers-reduced-motion)`;
-const reducedMotion = (stylesInViewport) => {
-  return {
-    [`@media ${reducedMotionQuery}`]: {
-      ...stylesInViewport
-    }
-  };
-};
-const breakpoint_medium_number = 768;
-const breakpoint_medium = `${breakpoint_medium_number}px`;
-const breakpoint_large_number = 1025;
-const breakpoint_large = `${breakpoint_large_number}px`;
-const mediumMediaQuery = `screen and (min-width: ${breakpoint_medium})`;
-const largeMediaQuery = `screen and (min-width: ${breakpoint_large})`;
-const md = (stylesInViewport) => {
-  return {
-    [`@media ${mediumMediaQuery}`]: {
-      ...stylesInViewport
-    }
-  };
-};
-const lg = (stylesInViewport) => {
-  return {
-    [`@media ${largeMediaQuery}`]: {
-      ...stylesInViewport
-    }
-  };
-};
-const viewport = {
-  md,
-  lg
-};
-const getBackgroundColor = (color) => getCssVar(color);
-const headingSizes = {
-  xl: {
-    fontSize: getCssVar("headingXlFontSize"),
-    lineHeight: getCssVar("headingXlLineHeight")
-  },
-  lg: {
-    fontSize: getCssVar("headingLgFontSize"),
-    lineHeight: getCssVar("headingLgLineHeight")
-  },
-  md: {
-    fontSize: getCssVar("headingMdFontSize"),
-    lineHeight: getCssVar("headingMdLineHeight")
-  },
-  sm: {
-    fontSize: getCssVar("headingSmFontSize"),
-    lineHeight: getCssVar("headingSmLineHeight")
-  },
-  xs: {
-    fontSize: getCssVar("headingXsFontSize"),
-    lineHeight: getCssVar("headingXsLineHeight")
-  }
-};
-const getHeadingSize = (size) => headingSizes[size];
-const getObjectColor = (color) => getCssVar(color);
-const baseOpacity60 = "opacity60";
-const baseOpacity38 = "opacity38";
-const opacities = {
-  Overlay: baseOpacity60,
-  Disabled: baseOpacity38
-};
-const getOpacity = (opacity) => getCssVar(opacities[opacity]);
-const colorBackgroundOverlay = "colorBackgroundOverlay";
-const opacityOverlay = "Overlay";
-const largeSize = "lg";
-const loadingSpinnerOverlays = {
-  Light: `rgba(255, 255, 255, ${getOpacity(opacityOverlay)})`,
-  Dark: `rgba(38, 38, 38, ${getOpacity(opacityOverlay)})`
-};
-const loadingSpinnerOverlayCssVar = "loadingSpinnerOverlay";
-const calculateSpinnerHeight = (size, bottomSpacing, label) => {
-  const spinnerHeight = spinnerSvgSizes[size];
-  const labelHeight = label ? `${mapLabelStyleToSpinnerSize[size].fontSize} * ${mapLabelStyleToSpinnerSize[size].lineHeight}` : "0px";
-  return `calc(${spinnerHeight} + ${getSpacing(bottomSpacing)} + ${labelHeight})`;
-};
-const spinnerSvgSizes = {
-  xs: "24px",
-  sm: "76px",
-  md: "148px",
-  lg: "300px"
-};
-styled.div.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerContainerStyled",
-  componentId: "sc-1bnjzqj-0"
-})({
-  position: "relative",
-  height: "100%"
-}, ({
-  coversFullPage
-}) => {
-  if (coversFullPage) {
-    return {
-      position: "fixed",
-      zIndex: "1001"
-    };
-  }
-  return {};
-}, ({
-  bottomSpacing = spacingNone
-}) => getBottomSpacing({
-  bottomSpacing
-}));
-styled.div.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerContentStyled",
-  componentId: "sc-1bnjzqj-1"
-})({
-  display: "flex",
-  flexDirection: "column",
-  minHeight: "100%",
-  width: "fit-content",
-  justifyContent: "center",
-  alignItems: "center"
-}, ({
-  hasOverlay
-}) => {
-  if (hasOverlay) {
-    return {
-      background: getBackgroundColor(colorBackgroundOverlay),
-      position: "absolute",
-      zIndex: 1001,
-      width: "100%",
-      left: 0,
-      top: 0
-    };
-  } else {
-    return {};
-  }
-}, ({
-  coversFullPage
-}) => {
-  if (coversFullPage) {
-    return {
-      position: "fixed",
-      zIndex: "1001"
-    };
-  }
-  return {};
-});
-styled.div.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerChildrenStyled",
-  componentId: "sc-1bnjzqj-2"
-})({
-  width: "100%",
-  height: "100%",
-  "> *": {
-    minHeight: "inherit"
-  }
-}, ({
-  size = largeSize,
-  bottomSpacing = spacingNone,
-  label,
-  isActive
-}) => {
-  return isActive ? {
-    minHeight: calculateSpinnerHeight(size, bottomSpacing, label)
-  } : {};
-});
-styled.svg.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerSVGStyled",
-  componentId: "sc-1bnjzqj-3"
-})({
-  ...forcedColors({
-    stroke: "CanvasText"
-  }),
-  zIndex: 1001,
-  stroke: getObjectColor("colorObjectBrand")
-}, ({
-  size = largeSize
-}) => {
-  if (size === "xs") {
-    return {
-      width: "20px",
-      height: "20px",
-      ...viewport.md({
-        width: spinnerSvgSizes[size],
-        height: spinnerSvgSizes[size]
-      })
-    };
-  }
-  return {
-    width: spinnerSvgSizes[size],
-    height: spinnerSvgSizes[size]
-  };
-});
-const loadingSpinnerRotate = keyframes({
-  to: {
-    strokeDashoffset: 610
-  }
-});
-const loadingSpinnerXsRotate = keyframes({
-  to: {
-    strokeDashoffset: 166
-  }
-});
-const LoadingSpinnerPathStyled = styled.path.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerPathStyled",
-  componentId: "sc-1bnjzqj-4"
-})({
-  fill: "none",
-  strokeLinejoin: "round",
-  strokeLinecap: "round",
-  strokeDasharray: "120 32",
-  animationDuration: "5.0s",
-  animationTimingFunction: "linear",
-  animationIterationCount: "infinite"
-}, reducedMotion({
-  animation: "none"
-}), css(["animation-name:", ";"], loadingSpinnerRotate));
-styled(LoadingSpinnerPathStyled).withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerPathOuter3Styled",
-  componentId: "sc-1bnjzqj-5"
-})({
-  strokeWidth: 2,
-  opacity: "0.3"
-});
-styled(LoadingSpinnerPathStyled).withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerPathOuter2Styled",
-  componentId: "sc-1bnjzqj-6"
-})({
-  strokeWidth: 3,
-  opacity: "0.6"
-});
-styled(LoadingSpinnerPathStyled).withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerPathOuter1Styled",
-  componentId: "sc-1bnjzqj-7"
-})({
-  strokeWidth: 4
-});
-styled.path.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerPathCenterStyled",
-  componentId: "sc-1bnjzqj-8"
-})({
-  ...forcedColors({
-    fill: "CanvasText"
-  }),
-  fill: "#E60000"
-});
-styled.path.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerPathXsStyled",
-  componentId: "sc-1bnjzqj-9"
-})({
-  fill: "none",
-  strokeLinecap: "butt",
-  strokeWidth: 2,
-  strokeDasharray: "48 8",
-  strokeDashoffset: 56,
-  animationDuration: "5.0s",
-  animationTimingFunction: "linear",
-  animationIterationCount: "infinite"
-}, css(["animation-name:", ";"], loadingSpinnerXsRotate));
-const mapLabelStyleToSpinnerSize = {
-  xs: getBodySize("md"),
-  sm: getHeadingSize("xs"),
-  md: getHeadingSize("sm"),
-  lg: getHeadingSize("lg")
-};
-styled(Body).withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "LoadingSpinnerLabelStyled",
-  componentId: "sc-1bnjzqj-10"
-})(({
-  size = "lg"
-}) => {
-  return mapLabelStyleToSpinnerSize[size];
-}, getBottomSpacing({
-  bottomSpacing: spacingNone
-}), {
-  textAlign: "center"
-});
+import { css, createGlobalStyle } from "styled-components";
+import { l as loadingSpinnerOverlayCssVar, j as loadingSpinnerOverlays } from "../../styled-DZo6MwrF.js";
+import { c as breakpoint_medium, a as breakpoint_large } from "../../index-Ck2bCrhT.js";
 const colorVodafoneRed = "colorVodafoneRed";
 const colorVodafoneRedTint = "colorVodafoneRedTint";
 const colorRed = "colorRed";

package/dist/foundations/PatternProps/index.js

@@ -0,0 +1 @@
+

package/dist/foundations/media-query/forcedColors/index.js

@@ -0,0 +1,12 @@
+const forcedColorsQuery = `(forced-colors: active)`;
+const forcedColors = (stylesInViewport) => {
+  return {
+    [`@media ${forcedColorsQuery}`]: {
+      ...stylesInViewport
+    }
+  };
+};
+export {
+  forcedColors as default,
+  forcedColorsQuery
+};

package/dist/foundations/media-query/reducedMotion/index.js

@@ -0,0 +1,21 @@
+const reducedMotionQuery = `(prefers-reduced-motion)`;
+const noReducedMotionQuery = `(prefers-reduced-motion: no-preference)`;
+const reducedMotion = (stylesInViewport) => {
+  return {
+    [`@media ${reducedMotionQuery}`]: {
+      ...stylesInViewport
+    }
+  };
+};
+const noReducedMotion = (stylesInViewport) => {
+  return {
+    [`@media ${noReducedMotionQuery}`]: {
+      ...stylesInViewport
+    }
+  };
+};
+export {
+  reducedMotion as default,
+  noReducedMotion,
+  reducedMotionQuery
+};

package/dist/foundations/media-query/viewport/index.js

@@ -0,0 +1,6 @@
+import { v, l, m } from "../../../index-Ck2bCrhT.js";
+export {
+  v as default,
+  l as largeMediaQuery,
+  m as mediumMediaQuery
+};

package/dist/foundations/token/getBackgroundColor/index.js

@@ -0,0 +1,5 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const getBackgroundColor = (color) => getCssVar(color);
+export {
+  getBackgroundColor
+};

package/dist/foundations/token/getBodySize/index.js

@@ -1,4 +1,15 @@
-import { a } from "../../../index-BoPDwZgt.js";
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const bodySizes = {
+  md: {
+    fontSize: getCssVar("bodyMdFontSize"),
+    lineHeight: getCssVar("bodyMdLineHeight")
+  },
+  sm: {
+    fontSize: getCssVar("bodySmFontSize"),
+    lineHeight: getCssVar("bodySmLineHeight")
+  }
+};
+const getBodySize = (size) => bodySizes[size];
 export {
-  a as getBodySize
+  getBodySize
 };

package/dist/foundations/token/getBorderColor/index.js

@@ -0,0 +1,5 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const getBorderColor = (color) => getCssVar(color);
+export {
+  getBorderColor
+};

package/dist/foundations/token/getBorderRadius/index.js

@@ -0,0 +1,15 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const baseBorderRadius0 = "borderRadius0";
+const baseBorderRadius3 = "borderRadius3";
+const baseBorderRadius6 = "borderRadius6";
+const baseBorderRadius100 = "borderRadius100";
+const borderRadii = {
+  borderRadiusNone: baseBorderRadius0,
+  borderRadiusSm: baseBorderRadius3,
+  borderRadiusMd: baseBorderRadius6,
+  borderRadiusFull: baseBorderRadius100
+};
+const getBorderRadius = (radius) => getCssVar(borderRadii[radius]);
+export {
+  getBorderRadius
+};

package/dist/foundations/token/getBorderWidth/index.js

@@ -0,0 +1,19 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const baseBorderWidth0 = "borderWidth0";
+const baseBorderWidth1 = "borderWidth1";
+const baseBorderWidth2 = "borderWidth2";
+const baseBorderWidth4 = "borderWidth4";
+const borderWidths = {
+  None: baseBorderWidth0,
+  Divider: baseBorderWidth1,
+  Unselected: baseBorderWidth1,
+  Selected: baseBorderWidth2,
+  Navigation: baseBorderWidth4,
+  Focus: baseBorderWidth4,
+  Sm: baseBorderWidth1,
+  Md: baseBorderWidth2
+};
+const getBorderWidth = (borderWidth) => getCssVar(borderWidths[borderWidth]);
+export {
+  getBorderWidth
+};

package/dist/foundations/token/getBottomSpacing/index.js

@@ -0,0 +1,14 @@
+import { getSpacing } from "../getSpacing/index.js";
+const getBottomSpacing = ({
+  bottomSpacing
+}) => {
+  if (!bottomSpacing) {
+    return {};
+  }
+  return {
+    marginBottom: getSpacing(bottomSpacing)
+  };
+};
+export {
+  getBottomSpacing
+};

package/dist/foundations/token/getFontWeight/index.js

@@ -0,0 +1,13 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const baseWeight300 = "fontWeightLight";
+const baseWeight400 = "fontWeightRegular";
+const baseWeight700 = "fontWeightBold";
+const fontWeights = {
+  light: baseWeight300,
+  regular: baseWeight400,
+  bold: baseWeight700
+};
+const getFontWeight = (weight) => getCssVar(fontWeights[weight]);
+export {
+  getFontWeight
+};

package/dist/foundations/token/getHeadingSize/index.js

@@ -0,0 +1,27 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const headingSizes = {
+  xl: {
+    fontSize: getCssVar("headingXlFontSize"),
+    lineHeight: getCssVar("headingXlLineHeight")
+  },
+  lg: {
+    fontSize: getCssVar("headingLgFontSize"),
+    lineHeight: getCssVar("headingLgLineHeight")
+  },
+  md: {
+    fontSize: getCssVar("headingMdFontSize"),
+    lineHeight: getCssVar("headingMdLineHeight")
+  },
+  sm: {
+    fontSize: getCssVar("headingSmFontSize"),
+    lineHeight: getCssVar("headingSmLineHeight")
+  },
+  xs: {
+    fontSize: getCssVar("headingXsFontSize"),
+    lineHeight: getCssVar("headingXsLineHeight")
+  }
+};
+const getHeadingSize = (size) => headingSizes[size];
+export {
+  getHeadingSize
+};

package/dist/foundations/token/getHoverColor/index.js

@@ -0,0 +1,7 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const getHoverColor = (color) => {
+  return getCssVar(`${color}Hover`);
+};
+export {
+  getHoverColor
+};

package/dist/foundations/token/getIconColor/index.js

@@ -0,0 +1,5 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const getIconColor = (color) => getCssVar(color);
+export {
+  getIconColor
+};

package/dist/foundations/token/getObjectColor/index.js

@@ -0,0 +1,5 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const getObjectColor = (color) => getCssVar(color);
+export {
+  getObjectColor
+};

package/dist/foundations/token/getOpacity/index.js

@@ -0,0 +1,11 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const baseOpacity60 = "opacity60";
+const baseOpacity38 = "opacity38";
+const opacities = {
+  Overlay: baseOpacity60,
+  Disabled: baseOpacity38
+};
+const getOpacity = (opacity) => getCssVar(opacities[opacity]);
+export {
+  getOpacity
+};

package/dist/foundations/token/getPressColor/index.js

@@ -0,0 +1,7 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const getPressColor = (color) => {
+  return getCssVar(`${color}Press`);
+};
+export {
+  getPressColor
+};

package/dist/foundations/token/getSpacing/index.js

@@ -0,0 +1,5 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const getSpacing = (spacing) => getCssVar(`spacing${spacing}`);
+export {
+  getSpacing
+};

package/dist/foundations/token/getTextColor/index.js

@@ -0,0 +1,5 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const getTextColor = (color) => getCssVar(color);
+export {
+  getTextColor
+};

package/dist/foundations/token/getTextDecoration/index.js

@@ -0,0 +1,13 @@
+import { g as getCssVar } from "../../../getCssVar-BP6T9pFM.js";
+const baseTextDecorationNone = "textDecorationNone";
+const baseTextDecorationUnderline = "textDecorationUnderline";
+const baseTextDecorationStrikethrough = "textDecorationStrikethrough";
+const textDecorations = {
+  None: baseTextDecorationNone,
+  Underline: baseTextDecorationUnderline,
+  Strikethrough: baseTextDecorationStrikethrough
+};
+const getTextDecoration = (textDecoration) => getCssVar(textDecorations[textDecoration]);
+export {
+  getTextDecoration
+};

package/dist/getCssVar-BP6T9pFM.js

@@ -0,0 +1,6 @@
+const getCssVar = (cssVarName) => {
+  return `var(--${cssVarName})`;
+};
+export {
+  getCssVar as g
+};

package/dist/hooks/useFocusWithin/index.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+function useFocusWithin(ref) {
+  const [isFocused, setIsFocused] = useState(false);
+  const hasActiveElement = (element) => {
+    if (!document) {
+      return false;
+    }
+    if (!element) {
+      return false;
+    }
+    return element == null ? void 0 : element.contains(document.activeElement);
+  };
+  const eventHandler = () => {
+    if (!ref || !ref.current) {
+      return false;
+    }
+    setTimeout(() => {
+      if (!ref || !ref.current) {
+        return false;
+      }
+      setIsFocused(hasActiveElement(ref == null ? void 0 : ref.current));
+    }, 300);
+  };
+  useEffect(() => {
+    document.addEventListener("focusin", eventHandler, false);
+    document.addEventListener("focusout", eventHandler, false);
+    return () => {
+      document.removeEventListener("focusin", eventHandler, false);
+      document.removeEventListener("focusout", eventHandler, false);
+    };
+  }, [ref, setIsFocused]);
+  return isFocused;
+}
+export {
+  useFocusWithin
+};

package/dist/hooks/useForcedColors/index.js

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

package/dist/hooks/useMediaQuery/index.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+const useMediaQuery = (query) => {
+  const [mediaQueryMatches, setMediaQueryMatches] = useState(false);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    const handleMediaQueryChange = (event) => {
+      setMediaQueryMatches(event.matches);
+    };
+    setMediaQueryMatches(mediaQuery.matches);
+    mediaQuery.addEventListener("change", handleMediaQueryChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleMediaQueryChange);
+    };
+  }, [query]);
+  return [mediaQueryMatches];
+};
+export {
+  useMediaQuery
+};

package/dist/hooks/useReducedMotion/index.js

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

package/dist/hooks/useThirdPartyConsent/index.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+const consentStorageItemName = "adv_fcData";
+const consentStorageFeature = "permissions";
+const consentStorageKey = "LI-TPV";
+const checkThirdPartyConsentStorage = () => {
+  try {
+    const raw = sessionStorage.getItem(consentStorageItemName);
+    if (!raw) {
+      return false;
+    }
+    try {
+      const json = JSON.parse(raw);
+      if (!json[consentStorageFeature]) {
+        return false;
+      }
+      if (!json[consentStorageFeature][consentStorageKey]) {
+        return false;
+      }
+      return "true" === json[consentStorageFeature][consentStorageKey];
+    } catch (error) {
+      return false;
+    }
+  } catch (error) {
+    return false;
+  }
+};
+const useThirdPartyConsent = () => {
+  const [consent, setConsent] = useState(checkThirdPartyConsentStorage());
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setConsent(checkThirdPartyConsentStorage());
+    };
+    window.addEventListener("storage", handleStorageChange);
+    const originalSetItem = sessionStorage.setItem;
+    sessionStorage.setItem = (key, value) => {
+      originalSetItem.call(sessionStorage, key, value);
+      if (key === consentStorageItemName) {
+        handleStorageChange();
+      }
+    };
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      sessionStorage.setItem = originalSetItem;
+    };
+  }, []);
+  return consent;
+};
+export {
+  checkThirdPartyConsentStorage,
+  consentStorageFeature,
+  consentStorageItemName,
+  consentStorageKey,
+  useThirdPartyConsent
+};