@vodafone_de/brix-components 3.0.0

package/dist/foundations/token/base/shadow.d.ts

@@ -0,0 +1 @@
+export declare const shadow28 = "shadow28";

package/dist/foundations/token/breakpoint.d.ts

@@ -0,0 +1,4 @@
+export declare const breakpoint_medium_number = 768;
+export declare const breakpoint_medium = "768px";
+export declare const breakpoint_large_number = 1025;
+export declare const breakpoint_large = "1025px";

package/dist/foundations/token/easing.d.ts

@@ -0,0 +1,2 @@
+export declare const ease_in_sine = "cubic-bezier(.47, 0, .745, .715)";
+export declare const ease_in_out_sine = "cubic-bezier(.445, .05, .55, .95)";

package/dist/foundations/token/getBackgroundColor/index.d.ts

@@ -0,0 +1,2 @@
+import { BackgroundColor } from '../types/BackgroundColor';
+export declare const getBackgroundColor: (color: BackgroundColor) => string;

package/dist/foundations/token/getBodySize/index.d.ts

@@ -0,0 +1,3 @@
+import { CSSObject } from 'styled-components';
+import { TextBodySize } from '../types/TextBodySize';
+export declare const getBodySize: (size: TextBodySize) => CSSObject;

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

@@ -0,0 +1,4 @@
+import { a } from "../../../index-BoPDwZgt.js";
+export {
+  a as getBodySize
+};

package/dist/foundations/token/getBorderColor/index.d.ts

@@ -0,0 +1,2 @@
+import { BorderColor } from '../types/BorderColor';
+export declare const getBorderColor: (color: BorderColor) => string;

package/dist/foundations/token/getBorderRadius/index.d.ts

@@ -0,0 +1,2 @@
+import { BorderRadius } from '../types/BorderRadius';
+export declare const getBorderRadius: (radius: BorderRadius) => string;

package/dist/foundations/token/getBorderWidth/index.d.ts

@@ -0,0 +1,2 @@
+import { GetBorderWidth } from '../types/BorderWidth';
+export declare const getBorderWidth: (borderWidth: GetBorderWidth) => string;

package/dist/foundations/token/getBottomSpacing/index.d.ts

@@ -0,0 +1,3 @@
+import { CSSObject } from 'styled-components';
+import { PatternProps } from '../../PatternProps';
+export declare const getBottomSpacing: ({ bottomSpacing }: PatternProps) => CSSObject;

package/dist/foundations/token/getFontWeight/index.d.ts

@@ -0,0 +1,2 @@
+import { FontWeight } from '../types/FontWeight';
+export declare const getFontWeight: (weight: FontWeight) => string;

package/dist/foundations/token/getHeadingSize/index.d.ts

@@ -0,0 +1,3 @@
+import { CSSObject } from 'styled-components';
+import { TextHeadingSize } from '../types/HeadingSize';
+export declare const getHeadingSize: (size: TextHeadingSize) => CSSObject;

package/dist/foundations/token/getHoverColor/index.d.ts

@@ -0,0 +1,3 @@
+import { BackgroundColor } from '../types/BackgroundColor';
+import { ObjectColor } from '../types/ObjectColor';
+export declare const getHoverColor: (color: ObjectColor | BackgroundColor) => string;

package/dist/foundations/token/getIconColor/index.d.ts

@@ -0,0 +1,2 @@
+import { IconColor } from '../types/IconColor';
+export declare const getIconColor: (color: IconColor) => string;

package/dist/foundations/token/getObjectColor/index.d.ts

@@ -0,0 +1,2 @@
+import { ObjectColor } from '../types/ObjectColor';
+export declare const getObjectColor: (color: ObjectColor) => string;

package/dist/foundations/token/getOpacity/index.d.ts

@@ -0,0 +1,2 @@
+import { Opacity } from '../types/Opacity';
+export declare const getOpacity: (opacity: Opacity) => string;

package/dist/foundations/token/getPressColor/index.d.ts

@@ -0,0 +1,3 @@
+import { BackgroundColor } from '../types/BackgroundColor';
+import { ObjectColor } from '../types/ObjectColor';
+export declare const getPressColor: (color: ObjectColor | BackgroundColor) => string;

package/dist/foundations/token/getSpacing/index.d.ts

@@ -0,0 +1,2 @@
+import { Spacing } from '../types/Spacing';
+export declare const getSpacing: (spacing: Spacing) => string;

package/dist/foundations/token/getTextColor/index.d.ts

@@ -0,0 +1,2 @@
+import { TextColor } from '../types/TextColor';
+export declare const getTextColor: (color: TextColor) => string;

package/dist/foundations/token/getTextDecoration/index.d.ts

@@ -0,0 +1,2 @@
+import { TextDecoration } from '../types/TextDecoration';
+export declare const getTextDecoration: (textDecoration: TextDecoration) => string;

package/dist/foundations/token/types/BackgroundColor.d.ts

@@ -0,0 +1,7 @@
+export declare const colorBackgroundBrand = "colorBackgroundBrand";
+export declare const colorBackgroundBrandGradient = "colorBackgroundBrandGradient";
+export declare const colorBackgroundNeutral = "colorBackgroundNeutral";
+export declare const colorBackgroundSubtle = "colorBackgroundSubtle";
+export declare const colorBackgroundOverlay = "colorBackgroundOverlay";
+export declare const colorBackgroundOverlayStatic = "colorBackgroundOverlayStatic";
+export type BackgroundColor = typeof colorBackgroundBrand | typeof colorBackgroundBrandGradient | typeof colorBackgroundNeutral | typeof colorBackgroundSubtle | typeof colorBackgroundOverlay | typeof colorBackgroundOverlayStatic;

package/dist/foundations/token/types/BorderColor.d.ts

@@ -0,0 +1,13 @@
+export declare const colorBorderBrand = "colorBorderBrand";
+export declare const colorBorderNeutral = "colorBorderNeutral";
+export declare const colorBorderSubtle = "colorBorderSubtle";
+export declare const colorBorderInverse = "colorBorderInverse";
+export declare const colorBorderAccent = "colorBorderAccent";
+export declare const colorBorderSuccess = "colorBorderSuccess";
+export declare const colorBorderCritical = "colorBorderCritical";
+export declare const colorBorderWarning = "colorBorderWarning";
+export declare const colorBorderInformation = "colorBorderInformation";
+export declare const colorBorderUnselected = "colorBorderUnselected";
+export declare const colorBorderSelected = "colorBorderSelected";
+export declare const colorBorderFocus = "colorBorderFocus";
+export type BorderColor = typeof colorBorderBrand | typeof colorBorderNeutral | typeof colorBorderSubtle | typeof colorBorderInverse | typeof colorBorderAccent | typeof colorBorderSuccess | typeof colorBorderCritical | typeof colorBorderWarning | typeof colorBorderInformation | typeof colorBorderUnselected | typeof colorBorderSelected | typeof colorBorderFocus;

package/dist/foundations/token/types/BorderRadius.d.ts

@@ -0,0 +1,5 @@
+export declare const borderRadiusNone = "borderRadiusNone";
+export declare const borderRadiusSm = "borderRadiusSm";
+export declare const borderRadiusMd = "borderRadiusMd";
+export declare const borderRadiusFull = "borderRadiusFull";
+export type BorderRadius = typeof borderRadiusNone | typeof borderRadiusSm | typeof borderRadiusMd | typeof borderRadiusFull;

package/dist/foundations/token/types/BorderWidth.d.ts

@@ -0,0 +1,9 @@
+export declare const borderWidthNone = "None";
+export declare const borderWidthDivider = "Divider";
+export declare const borderWidthUnselected = "Unselected";
+export declare const borderWidthSelected = "Selected";
+export declare const borderWidthNavigation = "Navigation";
+export declare const borderWidthFocus = "Focus";
+export declare const borderWidthSm = "Sm";
+export declare const borderWidthMd = "Md";
+export type GetBorderWidth = typeof borderWidthNone | typeof borderWidthDivider | typeof borderWidthUnselected | typeof borderWidthSelected | typeof borderWidthNavigation | typeof borderWidthFocus | typeof borderWidthMd | typeof borderWidthSm;

package/dist/foundations/token/types/FontWeight.d.ts

@@ -0,0 +1,4 @@
+export declare const fontWeightLight = "light";
+export declare const fontWeightRegular = "regular";
+export declare const fontWeightBold = "bold";
+export type FontWeight = typeof fontWeightLight | typeof fontWeightRegular | typeof fontWeightBold;

package/dist/foundations/token/types/HeadingSize.d.ts

@@ -0,0 +1,6 @@
+export declare const textHeadingXl = "xl";
+export declare const textHeadingLg = "lg";
+export declare const textHeadingMd = "md";
+export declare const textHeadingSm = "sm";
+export declare const textHeadingXs = "xs";
+export type TextHeadingSize = typeof textHeadingXl | typeof textHeadingLg | typeof textHeadingMd | typeof textHeadingSm | typeof textHeadingXs;

package/dist/foundations/token/types/IconColor.d.ts

@@ -0,0 +1,10 @@
+export declare const colorIconBrand = "colorIconBrand";
+export declare const colorIconNeutral = "colorIconNeutral";
+export declare const colorIconNeutralStatic = "colorIconNeutralStatic";
+export declare const colorIconInverse = "colorIconInverse";
+export declare const colorIconInverseStatic = "colorIconInverseStatic";
+export declare const colorIconSuccess = "colorIconSuccess";
+export declare const colorIconCritical = "colorIconCritical";
+export declare const colorIconWarning = "colorIconWarning";
+export declare const colorIconInformation = "colorIconInformation";
+export type IconColor = typeof colorIconBrand | typeof colorIconNeutral | typeof colorIconNeutralStatic | typeof colorIconInverse | typeof colorIconInverseStatic | typeof colorIconSuccess | typeof colorIconCritical | typeof colorIconWarning | typeof colorIconInformation;

package/dist/foundations/token/types/ObjectColor.d.ts

@@ -0,0 +1,12 @@
+export declare const colorObjectBrand = "colorObjectBrand";
+export declare const colorObjectNeutral = "colorObjectNeutral";
+export declare const colorObjectSubtle = "colorObjectSubtle";
+export declare const colorObjectInverse = "colorObjectInverse";
+export declare const colorObjectAccent = "colorObjectAccent";
+export declare const colorObjectSuccess = "colorObjectSuccess";
+export declare const colorObjectCritical = "colorObjectCritical";
+export declare const colorObjectWarning = "colorObjectWarning";
+export declare const colorObjectInformation = "colorObjectInformation";
+export declare const colorObjectSelected = "colorObjectSelected";
+export declare const colorObjectUnselected = "colorObjectUnselected";
+export type ObjectColor = typeof colorObjectBrand | typeof colorObjectNeutral | typeof colorObjectSubtle | typeof colorObjectInverse | typeof colorObjectAccent | typeof colorObjectSuccess | typeof colorObjectCritical | typeof colorObjectWarning | typeof colorObjectInformation | typeof colorObjectSelected | typeof colorObjectUnselected;

package/dist/foundations/token/types/Opacity.d.ts

@@ -0,0 +1,3 @@
+export declare const opacityOverlay = "Overlay";
+export declare const opacityDisabled = "Disabled";
+export type Opacity = typeof opacityOverlay | typeof opacityDisabled;

package/dist/foundations/token/types/Spacing.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 0/0/0
+ */
+export declare const spacingNone = "None";
+/**
+ * 4/4/4
+ */
+export declare const spacing2Xs = "2Xs";
+/**
+ * 8/8/8
+ */
+export declare const spacingXs = "Xs";
+/**
+ * 12/12/16
+ */
+export declare const spacingSm = "Sm";
+/**
+ * 16/20/20
+ */
+export declare const spacingMd = "Md";
+/**
+ * 20/20/24
+ */
+export declare const spacingLg = "Lg";
+/**
+ * 24/28/32
+ */
+export declare const spacingXl = "Xl";
+/**
+ * 24/32/40
+ */
+export declare const spacing2Xl = "2Xl";
+/**
+ * 32/40/48
+ */
+export declare const spacing3Xl = "3Xl";
+/**
+ * 40/48/56
+ */
+export declare const spacing4Xl = "4Xl";
+/**
+ * 48/56/64
+ */
+export declare const spacing5Xl = "5Xl";
+/**
+ * 48/56/72
+ */
+export declare const spacing6Xl = "6Xl";
+/**
+ * 48/56/80
+ */
+export declare const spacing7Xl = "7Xl";
+export type Spacing = typeof spacingNone | typeof spacing2Xs | typeof spacingXs | typeof spacingSm | typeof spacingMd | typeof spacingLg | typeof spacingXl | typeof spacing2Xl | typeof spacing3Xl | typeof spacing4Xl | typeof spacing5Xl | typeof spacing6Xl | typeof spacing7Xl;

package/dist/foundations/token/types/TextBodySize.d.ts

@@ -0,0 +1,3 @@
+export declare const textBodyMd = "md";
+export declare const textBodySm = "sm";
+export type TextBodySize = typeof textBodyMd | typeof textBodySm;

package/dist/foundations/token/types/TextColor.d.ts

@@ -0,0 +1,8 @@
+export declare const colorTextBrand = "colorTextBrand";
+export declare const colorTextNeutral = "colorTextNeutral";
+export declare const colorTextNeutralStatic = "colorTextNeutralStatic";
+export declare const colorTextInverse = "colorTextInverse";
+export declare const colorTextInverseStatic = "colorTextInverseStatic";
+export declare const colorTextCritical = "colorTextCritical";
+export declare const colorTextPlaceholder = "colorTextPlaceholder";
+export type TextColor = typeof colorTextBrand | typeof colorTextNeutral | typeof colorTextNeutralStatic | typeof colorTextInverse | typeof colorTextInverseStatic | typeof colorTextCritical | typeof colorTextPlaceholder;

package/dist/foundations/token/types/TextDecoration.d.ts

@@ -0,0 +1,4 @@
+export declare const textDecorationNone = "None";
+export declare const textDecorationUnderline = "Underline";
+export declare const textDecorationStrikethrough = "Strikethrough";
+export type TextDecoration = typeof textDecorationNone | typeof textDecorationUnderline | typeof textDecorationStrikethrough;

package/dist/foundations/token/types/Viewport.d.ts

@@ -0,0 +1,4 @@
+export declare const viewportSm = "sm";
+export declare const viewportMd = "md";
+export declare const viewportLg = "lg";
+export type ViewportName = typeof viewportSm | typeof viewportMd | typeof viewportLg;

package/dist/foundations/types/ButtonAppearances.d.ts

@@ -0,0 +1,4 @@
+export declare const primaryAppearance = "primary";
+export declare const secondaryAppearance = "secondary";
+export declare const tertiaryAppearance = "tertiary";
+export type ButtonAppearances = typeof primaryAppearance | typeof secondaryAppearance | typeof tertiaryAppearance;

package/dist/foundations/types/CornerStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const cornerStraight = "straight";
+export declare const cornerRounded = "rounded";
+export type CornerStyle = typeof cornerStraight | typeof cornerRounded;

package/dist/foundations/types/PositionType.d.ts

@@ -0,0 +1,6 @@
+export declare const leftPosition = "left";
+export declare const rightPosition = "right";
+export declare const topPosition = "top";
+export declare const bottomPosition = "bottom";
+type PositionType = typeof leftPosition | typeof rightPosition | typeof topPosition | typeof bottomPosition;
+export default PositionType;

package/dist/foundations/types/PositionedIconInterface.d.ts

@@ -0,0 +1,6 @@
+import { IconName } from '@vfde-react/inline-icon-library';
+import { default as PositionType } from './PositionType';
+export default interface PositionedIconInterface {
+    name: IconName;
+    position: PositionType;
+}

package/dist/foundations/types/SizeTypes.d.ts

@@ -0,0 +1,3 @@
+export declare const smallSize = "sm";
+export declare const largeSize = "lg";
+export declare const mediumSize = "md";

package/dist/foundations/types/SystemIconWithPosition.d.ts

@@ -0,0 +1,5 @@
+import { InlineIconProps } from '@vfde-react/inline-icon-library';
+import { default as PositionType } from './PositionType';
+export type SvgInlineIconFactoryPropsWithPosition = {
+    iconPosition: PositionType;
+} & InlineIconProps;

package/dist/foundations/types/Theme.d.ts

@@ -0,0 +1 @@
+export type Theme = 'Light' | 'Dark';

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

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useFocusWithin(ref: RefObject<HTMLElement>): boolean;

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

@@ -0,0 +1 @@
+export declare const useForcedColors: () => boolean;

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

@@ -0,0 +1 @@
+export declare const useMediaQuery: (query: string) => boolean[];

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

@@ -0,0 +1 @@
+export declare const useReducedMotion: () => boolean;

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

@@ -0,0 +1,18 @@
+export declare const consentStorageItemName = "adv_fcData";
+export declare const consentStorageFeature = "permissions";
+export declare const consentStorageKey = "LI-TPV";
+export type ConsentPermissionStorage = {
+    [key in typeof consentStorageKey]?: 'true' | 'false';
+};
+export type ConsentStorage = {
+    [key in typeof consentStorageFeature]?: ConsentPermissionStorage;
+};
+export interface WindowWithScodeLoaded extends Window {
+    adv_lib: {
+        consent: {
+            showBanner: () => void;
+        };
+    };
+}
+export declare const checkThirdPartyConsentStorage: () => boolean;
+export declare const useThirdPartyConsent: () => boolean;

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

@@ -0,0 +1,2 @@
+import { ViewportName } from '../../foundations/token/types/Viewport';
+export declare const useViewport: () => ViewportName;

package/dist/index-BoPDwZgt.js

@@ -0,0 +1,18 @@
+const getCssVar = (cssVarName) => {
+  return `var(--${cssVarName})`;
+};
+const bodySizes = {
+  md: {
+    fontSize: getCssVar("bodyMdFontSize"),
+    lineHeight: getCssVar("bodyMdLineHeight")
+  },
+  sm: {
+    fontSize: getCssVar("bodySmFontSize"),
+    lineHeight: getCssVar("bodySmLineHeight")
+  }
+};
+const getBodySize = (size) => bodySizes[size];
+export {
+  getBodySize as a,
+  getCssVar as g
+};

package/dist/index-DRj4iUs9.js

@@ -0,0 +1,117 @@
+import { jsx } from "react/jsx-runtime";
+import parse from "html-react-parser";
+import styled from "styled-components";
+import { g as getCssVar, a as getBodySize } from "./index-BoPDwZgt.js";
+const spacingNone = "None";
+const spacingSm = "Sm";
+const spacingMd = "Md";
+const textBodyMd = "md";
+const textBodySm = "sm";
+const renderInlineRichTextFromOpenText = (fromCms) => {
+  if (typeof fromCms === "string") {
+    return parse(fromCms);
+  }
+  if (Array.isArray(fromCms)) {
+    return fromCms.map(renderInlineRichTextFromOpenText);
+  }
+  return fromCms;
+};
+const getSpacing = (spacing) => getCssVar(`spacing${spacing}`);
+const getBottomSpacing = ({
+  bottomSpacing
+}) => {
+  if (!bottomSpacing) {
+    return {};
+  }
+  return {
+    marginBottom: getSpacing(bottomSpacing)
+  };
+};
+const baseWeight300 = "fontWeightLight";
+const baseWeight400 = "fontWeightRegular";
+const baseWeight700 = "fontWeightBold";
+const fontWeights = {
+  light: baseWeight300,
+  regular: baseWeight400,
+  bold: baseWeight700
+};
+const getFontWeight = (weight) => getCssVar(fontWeights[weight]);
+const fontWeightBold = "bold";
+const propsNotPassToDomDefault = ["accordionType", "activeId", "activeIndex", "setActiveId", "align", "animated", "appearance", "aspectRatio", "autoLayout", "apiKey", "badge", "borderBottom", "bottomSpacing", "buttonLink", "buttons", "coloringMode", "colorSwatch", "component", "corners", "description", "expanded", "filterItems", "gapSpacing", "grow", "handleOnClick", "handleOnToogle", "hasOverlay", "heading", "heightSm", "heightMd", "heightLg", "horizontalAlignment", "icon", "iconAlign", "iconName", "iconPosition", "images", "isActive", "isChecked", "isDisabled", "isFullscreen", "isOpen", "isOrdered", "isSelected", "isTransparentBackground", "items", "jumpToClickedItem", "justify", "justifyHorizontal", "lg", "loadingSpinnerChild", "mapId", "md", "message", "more", "nextAriaLabel", "notificationType", "objectFit", "objectPosition", "offset", "onUpdate", "openMultiple", "orientation", "padding", "prefix", "prefixWeight", "prevAriaLabel", "price", "productId", "promoPrice", "screenReaderInstruction", "showList", "size", "sm", "spacing", "spinnerType", "status", "stretch", "strikePrice", "suffix", "tag", "textContent", "uid", "variant", "verticalPadding", "viewportHeight", "weight", "width"];
+const filterProps = (propsNotPassToDom = []) => {
+  const shouldForwardProp = (prop) => {
+    if ("string" !== typeof prop) {
+      return false;
+    }
+    return ![...propsNotPassToDom, ...propsNotPassToDomDefault].includes(prop);
+  };
+  return shouldForwardProp;
+};
+const BodyStyled = styled.p.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "BodyStyled",
+  componentId: "sc-1n7n7pv-0"
+})({
+  outline: "none",
+  color: "inherit",
+  verticalAlign: "baseline"
+}, ({
+  size = textBodyMd
+}) => getBodySize(size), ({
+  weight,
+  tag
+}) => {
+  if ("strong" === tag) {
+    return {
+      fontWeight: getFontWeight(fontWeightBold)
+    };
+  }
+  if (!weight) {
+    return {};
+  }
+  return {
+    fontWeight: getFontWeight(weight)
+  };
+}, ({
+  tag
+}) => {
+  if ("sup" === tag) {
+    return {
+      verticalAlign: "super",
+      fontSize: "smaller"
+    };
+  }
+  if ("span" === tag) {
+    return {
+      display: "inline-block"
+    };
+  }
+  return {};
+}, ({
+  align
+}) => ({
+  textAlign: align
+}), getBottomSpacing);
+const bodyAlignLeft = "left";
+const bodyAlignCenter = "center";
+const bodyAlignRight = "right";
+const Body = ({
+  tag = "p",
+  bottomSpacing,
+  ...props
+}) => {
+  if (!bottomSpacing) {
+    bottomSpacing = textBodySm === props.size ? spacingSm : spacingMd;
+  }
+  return /* @__PURE__ */ jsx(BodyStyled, { ...props, bottomSpacing, as: tag, tag, children: renderInlineRichTextFromOpenText(props.children) });
+};
+export {
+  Body as B,
+  getSpacing as a,
+  bodyAlignLeft as b,
+  bodyAlignCenter as c,
+  bodyAlignRight as d,
+  filterProps as f,
+  getBottomSpacing as g,
+  spacingNone as s
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vodafone_de/brix-components",
+  "description": "Brix is the digital design system for vodafone.de",
+  "version": "3.0.0",
+  "private": false,
+  "exports": {
+    "./components/*": {
+      "import": "./dist/components/*/index.js",
+      "types": "./dist/components/*/index.d.ts"
+    },
+    "./foundations/*": {
+      "import": "./dist/foundations/*/index.js",
+      "types": "./dist/foundations/*/index.d.ts"
+    },
+    "./hooks/*": {
+      "import": "./dist/hooks/*/index.js",
+      "types": "./dist/hooks/*/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "@af-utils/scrollend-polyfill": "^0.0.14",
+    "@vis.gl/react-google-maps": "^1.5.1",
+    "html-react-parser": "^5.2.2",
+    "polished": "^4.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.17",
+    "uuid": "^11.1.0"
+  },
+  "author": {
+    "name": "Team Tetris",
+    "email": "brix@vodafone.com"
+  },
+  "license": "CC-BY-ND-4.0"
+}