@vodafone_de/brix-components 7.0.2 → 7.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/README.md +0 -1
  2. package/dist/components/Badge/index.js +1 -1
  3. package/dist/components/Button/index.js +2 -2
  4. package/dist/components/ButtonAsLink/index.js +1 -1
  5. package/dist/components/ButtonGroup/index.js +1 -1
  6. package/dist/components/ConsentMessage/index.js +106 -0
  7. package/dist/components/{GoogleMap/components/ConsentMessage → ConsentMessage}/props.d.ts +12 -3
  8. package/dist/components/{GoogleMap/components/ConsentMessage → ConsentMessage}/styled.d.ts +4 -3
  9. package/dist/components/DiscoveryCard/index.js +2 -2
  10. package/dist/components/DiscoveryCard/styled.d.ts +1 -1
  11. package/dist/components/DiscoveryCardGroup/index.js +1 -1
  12. package/dist/components/GoogleMap/index.js +4 -92
  13. package/dist/components/GoogleMap/mapBackground.d.ts +6 -0
  14. package/dist/components/GoogleMap/props.d.ts +1 -1
  15. package/dist/components/IconButton/index.js +1 -1
  16. package/dist/components/IconSnippet/styled.d.ts +1 -1
  17. package/dist/components/ImageHeader/index.js +1 -1
  18. package/dist/components/ImageHeader/styled.d.ts +4 -4
  19. package/dist/components/InlineLink/index.js +1 -1
  20. package/dist/components/Link/index.js +1 -1
  21. package/dist/components/LinkAsButton/index.js +1 -1
  22. package/dist/components/LinkListItem/index.js +1 -1
  23. package/dist/components/LinkListItem/styled.d.ts +1 -1
  24. package/dist/components/PickerGroup/index.js +1 -1
  25. package/dist/components/Price/styled.d.ts +1 -1
  26. package/dist/components/ProductCard/index.js +1 -1
  27. package/dist/components/Rating/assets/StarSVG.d.ts +3 -0
  28. package/dist/components/Rating/index.d.ts +6 -0
  29. package/dist/components/Rating/index.js +154 -0
  30. package/dist/components/Rating/props.d.ts +22 -0
  31. package/dist/components/Rating/styled.d.ts +6 -0
  32. package/dist/components/SearchInput/index.js +1 -1
  33. package/dist/components/Stepper/index.js +1 -1
  34. package/dist/components/TimeInput/index.d.ts +4 -0
  35. package/dist/components/TimeInput/index.js +104 -0
  36. package/dist/components/TimeInput/props.d.ts +13 -0
  37. package/dist/components/TimeInput/styled.d.ts +6 -0
  38. package/dist/components/YoutubeVideo/index.d.ts +6 -0
  39. package/dist/components/YoutubeVideo/index.js +85 -0
  40. package/dist/components/YoutubeVideo/props.d.ts +40 -0
  41. package/dist/components/YoutubeVideo/styled.d.ts +3 -0
  42. package/dist/components/YoutubeVideo/youtubeVideoBackground.d.ts +6 -0
  43. package/dist/foundations/GlobalStyle/index.d.ts +1 -3
  44. package/dist/foundations/GlobalStyle/index.js +1 -4
  45. package/dist/hooks/useViewport/index.js +5 -22
  46. package/dist/{index-DhnCGoB_.js → index-C5GzK6_0.js} +1 -1
  47. package/dist/{index-VyKg-44v.js → index-C7meHOM4.js} +1 -1
  48. package/dist/index-Cs0Hw0dj.js +25 -0
  49. package/dist/{index-B7B_2CjL.js → index-ZHkR70j3.js} +0 -2
  50. package/dist/index.d.ts +8 -0
  51. package/dist/index.js +144 -131
  52. package/dist/{styled-CuLmB_mg.js → styled-BSqC5P9h.js} +1 -1
  53. package/package.json +1 -1
  54. package/dist/components/GoogleMap/components/ConsentMessage/bg.d.ts +0 -6
  55. /package/dist/components/{GoogleMap/components/ConsentMessage → ConsentMessage}/index.d.ts +0 -0
@@ -0,0 +1,154 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { useState, useEffect, useRef } from "react";
4
+ import { u as useViewport, v as viewportSm } from "../../index-Cs0Hw0dj.js";
5
+ import Fieldset from "../Fieldset/index.js";
6
+ import styled from "styled-components";
7
+ import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
8
+ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
9
+ import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
10
+ import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
11
+ import { getSpacing } from "../../foundations/token/getSpacing/index.js";
12
+ import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
13
+ import { c as colorBorderFocus, i as colorBorderSelected, a as colorBorderNeutral, b as colorBorderUnselected } from "../../BorderColor-BummoQ1-.js";
14
+ import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
15
+ import { b as colorObjectSelected } from "../../ObjectColor-BZDBuV8H.js";
16
+ import { a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
17
+ const StarSVG = (props) => /* @__PURE__ */ jsx("svg", { style: {
18
+ display: "inline-block"
19
+ }, 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" }) });
20
+ const getSvgPathStyles = (props) => ({
21
+ fill: props.selected ? getObjectColor(colorObjectSelected) : props.isInHoverRange ? getHoverColor(colorBackgroundNeutral) : "transparent",
22
+ strokeWidth: "1px",
23
+ stroke: props.selected ? getBorderColor(colorBorderSelected) : props.isInHoverRange ? getBorderColor(colorBorderNeutral) : getBorderColor(colorBorderUnselected)
24
+ });
25
+ const getHoverSvgPathStyles = (props) => ({
26
+ fill: props.selected ? getHoverColor(colorObjectSelected) : getHoverColor(colorBackgroundNeutral),
27
+ strokeWidth: "1px",
28
+ stroke: props.selected ? getBorderColor(colorBorderSelected) : getBorderColor(colorBorderNeutral)
29
+ });
30
+ const StarsWrapperStyled = styled.div.withConfig({
31
+ displayName: "StarsWrapperStyled",
32
+ componentId: "sc-1nbg0l6-0"
33
+ })({
34
+ display: "flex",
35
+ gap: getSpacing(spacingXs)
36
+ });
37
+ const StarLabelStyled = styled.label.withConfig({
38
+ displayName: "StarLabelStyled",
39
+ componentId: "sc-1nbg0l6-1"
40
+ })(({
41
+ selected,
42
+ isInHoverRange
43
+ }) => {
44
+ const normalStyles = getSvgPathStyles({
45
+ selected,
46
+ isInHoverRange
47
+ });
48
+ const hoverStyles = getHoverSvgPathStyles({
49
+ selected
50
+ });
51
+ return {
52
+ cursor: "pointer",
53
+ display: "inline-flex",
54
+ alignItems: "center",
55
+ justifyContent: "center",
56
+ svg: {
57
+ path: {
58
+ ...normalStyles,
59
+ transition: "fill 200ms, stroke 200ms"
60
+ }
61
+ },
62
+ "&:hover svg path": {
63
+ ...hoverStyles,
64
+ transition: "fill 200ms, stroke 200ms"
65
+ },
66
+ // Apply focus-visible styles on label when input is focused
67
+ "&:has(:focus-visible)": {
68
+ outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
69
+ outlineOffset: "2px"
70
+ }
71
+ };
72
+ });
73
+ const HiddenRadioStyled = styled.input.withConfig({
74
+ displayName: "HiddenRadioStyled",
75
+ componentId: "sc-1nbg0l6-2"
76
+ })({
77
+ border: 0,
78
+ clip: "rect(0 0 0 0)",
79
+ clipPath: "inset(50%)",
80
+ height: "1px",
81
+ margin: "-1px",
82
+ overflow: "hidden",
83
+ padding: 0,
84
+ position: "absolute",
85
+ whiteSpace: "nowrap",
86
+ width: "1px"
87
+ });
88
+ const useStarSize = () => {
89
+ const viewport = useViewport();
90
+ if (viewport === viewportSm) {
91
+ return {
92
+ width: 24,
93
+ height: 22.968
94
+ };
95
+ }
96
+ return {
97
+ width: 32,
98
+ height: 30.624
99
+ };
100
+ };
101
+ const Rating = ({
102
+ value,
103
+ onValueChange,
104
+ className,
105
+ groupName,
106
+ uid,
107
+ component: _component,
108
+ ...props
109
+ }) => {
110
+ const [internalValue, setInternalValue] = useState(value ?? 0);
111
+ const [hoverValue, setHoverValue] = useState(null);
112
+ const starSize = useStarSize();
113
+ useEffect(() => {
114
+ if (value !== void 0) {
115
+ setInternalValue(value);
116
+ }
117
+ }, [value]);
118
+ const handleChange = (event) => {
119
+ const newValue = Number(event.target.value);
120
+ setInternalValue(newValue);
121
+ if (onValueChange) {
122
+ onValueChange(newValue);
123
+ }
124
+ };
125
+ const handleMouseEnter = (index) => {
126
+ setHoverValue(index + 1);
127
+ };
128
+ const handleMouseLeave = () => {
129
+ setHoverValue(null);
130
+ };
131
+ const handleClick = (starValue) => {
132
+ if (starValue === internalValue) {
133
+ setInternalValue(0);
134
+ if (onValueChange) {
135
+ onValueChange(0);
136
+ }
137
+ }
138
+ };
139
+ const ref = useRef(null);
140
+ return /* @__PURE__ */ jsx(Fieldset, { ...props, uid, ref, children: /* @__PURE__ */ jsx(StarsWrapperStyled, { className, role: "radiogroup", children: [...Array(5)].map((_, index) => {
141
+ const starValue = index + 1;
142
+ const isInHoverRange = hoverValue !== null && starValue <= hoverValue;
143
+ return /* @__PURE__ */ jsxs(StarLabelStyled, { selected: starValue <= internalValue, isInHoverRange, htmlFor: `${uid}-star-${starValue}`, onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, "aria-label": `${starValue} von 5 Sternen`, children: [
144
+ /* @__PURE__ */ jsx(HiddenRadioStyled, { type: "radio", id: `${uid}-star-${starValue}`, name: groupName || uid, value: starValue, checked: starValue === internalValue, onChange: handleChange, onClick: () => handleClick(starValue) }),
145
+ /* @__PURE__ */ jsx(StarSVG, { width: starSize.width, height: starSize.height })
146
+ ] }, `star-${starValue}-${uid}`);
147
+ }) }) });
148
+ };
149
+ export {
150
+ HiddenRadioStyled,
151
+ StarLabelStyled,
152
+ StarsWrapperStyled,
153
+ Rating as default
154
+ };
@@ -0,0 +1,22 @@
1
+ import { FieldsetSharedProps } from '../Fieldset';
2
+ /**
3
+ * Props for the Rating component
4
+ */
5
+ export interface RatingProps extends Omit<FieldsetSharedProps, 'status' | 'errorMessage' | 'disabled'> {
6
+ /**
7
+ * The current rating value (number of stars selected)
8
+ */
9
+ value?: number;
10
+ /**
11
+ * Callback fired when the rating value changes
12
+ */
13
+ onValueChange?: (value: number) => void;
14
+ /**
15
+ * Optional group name to identify the rating group for accessibility
16
+ */
17
+ groupName?: string;
18
+ /**
19
+ * Pin component's name from string to the concrete name
20
+ */
21
+ component?: 'Rating';
22
+ }
@@ -0,0 +1,6 @@
1
+ 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;
2
+ 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>, {
3
+ selected: boolean;
4
+ isInHoverRange?: boolean;
5
+ }>> & string;
6
+ 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;
@@ -5,7 +5,7 @@ import { forwardRef, useState, useRef, useImperativeHandle } from "react";
5
5
  import FormHelperLabel from "../FormHelperLabel/index.js";
6
6
  import IconButton, { iconButtonShapeSquare } from "../IconButton/index.js";
7
7
  import { b as spacingNone, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
8
- import { p as primaryAppearance } from "../../styled-CuLmB_mg.js";
8
+ import { p as primaryAppearance } from "../../styled-BSqC5P9h.js";
9
9
  import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
10
10
  import Form from "../Form/index.js";
11
11
  import styled from "styled-components";
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { useState, useRef, useEffect } from "react";
4
- import { useViewport } from "../../hooks/useViewport/index.js";
4
+ import { u as useViewport } from "../../index-Cs0Hw0dj.js";
5
5
  import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
6
6
  import styled from "styled-components";
7
7
  import forcedColors from "../../foundations/media-query/forcedColors/index.js";
@@ -0,0 +1,4 @@
1
+ import { TimeInputProps } from './props';
2
+ declare const TimeInput: import('react').ForwardRefExoticComponent<TimeInputProps & import('react').RefAttributes<HTMLInputElement>>;
3
+ export default TimeInput;
4
+ export * from './props';
@@ -0,0 +1,104 @@
1
+ "use client";
2
+ import { jsxs, jsx } from "react/jsx-runtime";
3
+ import { bm as ClockIcon, iv as iconSizeSm } from "../../index-Cbojl4_Q.js";
4
+ import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from "react";
5
+ import { s as spacingMd, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
6
+ import FormElement from "../FormElement/index.js";
7
+ import FormHelperLabel from "../FormHelperLabel/index.js";
8
+ import FormHelperMessage from "../FormHelperMessage/index.js";
9
+ import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
10
+ import "../Input/index.js";
11
+ import styled from "styled-components";
12
+ import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
13
+ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
14
+ import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
15
+ import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
16
+ import { a as InputStyled, I as InputWrapperStyled } from "../../styled-03irSJOQ.js";
17
+ import { a as inputStateError } from "../../props-DDpgcryb.js";
18
+ const ClockIconStyled = styled(ClockIcon).withConfig({
19
+ displayName: "ClockIconStyled",
20
+ componentId: "sc-1odlw8-0"
21
+ })(({
22
+ browserSupportsPicker
23
+ }) => {
24
+ return {
25
+ cursor: browserSupportsPicker ? "pointer" : "default",
26
+ "&:focus": {
27
+ outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`
28
+ }
29
+ };
30
+ });
31
+ const TimeInputStyled = styled(InputStyled).withConfig({
32
+ displayName: "TimeInputStyled",
33
+ componentId: "sc-1odlw8-1"
34
+ })({
35
+ "&::-webkit-calendar-picker-indicator": {
36
+ display: "none"
37
+ }
38
+ });
39
+ function isChromium() {
40
+ const ua = navigator.userAgent;
41
+ if ("userAgentData" in navigator) {
42
+ return navigator.userAgentData.brands.some((b) => /Chromium|Chrome/i.test(b.brand));
43
+ }
44
+ return /Chrome/.test(ua) && !/Edg|OPR|Brave|Firefox|Safari/.test(ua);
45
+ }
46
+ const TimeInput = forwardRef(({
47
+ uid,
48
+ status,
49
+ errorMessage,
50
+ helperText,
51
+ label,
52
+ onUpdate,
53
+ bottomSpacing = spacingMd,
54
+ ...props
55
+ }, outerRef) => {
56
+ const [internalStatus, setInternalStatus] = useState(status);
57
+ const innerRef = useRef(null);
58
+ const [browserSupportsPicker, setBrowserSupportsPicker] = useState(false);
59
+ useImperativeHandle(outerRef, () => innerRef.current, []);
60
+ const messageId = `text-${uid}`;
61
+ const internalStatusIsError = inputStateError === internalStatus;
62
+ const inputProps = {
63
+ ...props,
64
+ id: uid,
65
+ "aria-describedby": !internalStatusIsError && helperText || internalStatusIsError && errorMessage ? messageId : void 0,
66
+ "aria-invalid": internalStatusIsError ? true : void 0
67
+ };
68
+ useEffect(() => {
69
+ setInternalStatus(status);
70
+ }, [status]);
71
+ useEffect(() => {
72
+ typeof window !== "undefined" && setBrowserSupportsPicker(isChromium());
73
+ }, []);
74
+ const handleUpdate = (event) => {
75
+ if (props.onBlur) {
76
+ props.onBlur(event);
77
+ }
78
+ if (!onUpdate) {
79
+ return;
80
+ }
81
+ onUpdate(event.target.value);
82
+ };
83
+ const handlePickerInteraction = () => {
84
+ if (innerRef.current) {
85
+ innerRef.current.showPicker();
86
+ }
87
+ };
88
+ return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, disabled: props.disabled, children: [
89
+ /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
90
+ /* @__PURE__ */ jsxs(InputWrapperStyled, { status: internalStatus, readOnly: props.readOnly, bottomSpacing: inputStateError !== internalStatus && helperText || inputStateError === internalStatus && errorMessage ? spacingXs : void 0, children: [
91
+ /* @__PURE__ */ jsx(TimeInputStyled, { ...inputProps, ref: innerRef, type: "time", onBlur: handleUpdate }),
92
+ /* @__PURE__ */ jsx(FormHelperStatusIcon, { status: internalStatus }),
93
+ /* @__PURE__ */ jsx(ClockIconStyled, { size: iconSizeSm, onClick: handlePickerInteraction, onKeyDown: (e) => {
94
+ if (e.key === "Enter" || e.key === " ") {
95
+ handlePickerInteraction();
96
+ }
97
+ }, browserSupportsPicker, role: browserSupportsPicker ? "button" : void 0, tabIndex: browserSupportsPicker ? 0 : void 0 })
98
+ ] }),
99
+ /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status: internalStatus, message: inputStateError === internalStatus ? errorMessage : helperText })
100
+ ] });
101
+ });
102
+ export {
103
+ TimeInput as default
104
+ };
@@ -0,0 +1,13 @@
1
+ import { InputHTMLAttributes } from 'react';
2
+ import { InputSharedProps } from '../Input';
3
+ export interface TimeInputProps extends InputSharedProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
4
+ /**
5
+ * function that is called on every update. While input[type=time] is special,
6
+ * this os fired on blur
7
+ */
8
+ onUpdate?: (a: string) => void;
9
+ /**
10
+ * Pin component's name from string to the concrete name
11
+ */
12
+ component?: 'TimeInput';
13
+ }
@@ -0,0 +1,6 @@
1
+ import { InlineIconProps } from '@vfde-react/inline-icon-library';
2
+ import { InputHTMLAttributes } from 'react';
3
+ export declare const ClockIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<InlineIconProps, InlineIconProps & {
4
+ browserSupportsPicker: boolean;
5
+ }>> & string & Omit<import('react').FC<InlineIconProps>, keyof import('react').Component<any, {}, any>>;
6
+ export declare const TimeInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, InputHTMLAttributes<HTMLInputElement>>> & string;
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ import { YoutubeVideoProps } from './props';
3
+ declare const YoutubeVideo: FC<YoutubeVideoProps>;
4
+ export default YoutubeVideo;
5
+ export * from './props';
6
+ export * from './styled';
@@ -0,0 +1,85 @@
1
+ "use client";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { useThirdPartyConsent } from "../../hooks/useThirdPartyConsent/index.js";
4
+ import ConsentMessage from "../ConsentMessage/index.js";
5
+ import styled from "styled-components";
6
+ import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
7
+ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
8
+ import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
9
+ import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
10
+ const YoutubeVideoStyled = styled.div.withConfig({
11
+ displayName: "YoutubeVideoStyled",
12
+ componentId: "sc-1q2uytw-0"
13
+ })(({
14
+ roundedCorner,
15
+ bottomSpacing = spacingMd
16
+ }) => ({
17
+ position: "relative",
18
+ width: "100%",
19
+ paddingBottom: "56.25%",
20
+ height: 0,
21
+ overflow: "hidden",
22
+ ...roundedCorner && {
23
+ borderRadius: getBorderRadius(borderRadiusMd)
24
+ },
25
+ ...getBottomSpacing({
26
+ bottomSpacing
27
+ })
28
+ }));
29
+ const YoutubeVideoIframeStyled = styled.iframe.withConfig({
30
+ displayName: "YoutubeVideoIframeStyled",
31
+ componentId: "sc-1q2uytw-1"
32
+ })({
33
+ position: "absolute",
34
+ top: 0,
35
+ left: 0,
36
+ width: "100%",
37
+ height: "100%",
38
+ border: 0
39
+ });
40
+ const getYouTubeUrl = ({
41
+ videoId,
42
+ privacyEnhanced,
43
+ startTime,
44
+ forceCaption
45
+ }) => {
46
+ const baseDomain = privacyEnhanced ? "https://www.youtube-nocookie.com" : "https://www.youtube.com";
47
+ const url = new URL(`/embed/${videoId}`, baseDomain);
48
+ if (startTime) {
49
+ url.searchParams.set("start", startTime.toString());
50
+ }
51
+ if (forceCaption) {
52
+ const captionSettings = {
53
+ cc_load_policy: "1",
54
+ cc_lang_pref: "de",
55
+ hl: "de"
56
+ };
57
+ for (const [key, value] of Object.entries(captionSettings)) {
58
+ url.searchParams.set(key, value);
59
+ }
60
+ }
61
+ return url.toString();
62
+ };
63
+ const YoutubeVideo = ({
64
+ videoId,
65
+ title,
66
+ roundedCorner,
67
+ privacyEnhanced,
68
+ startTime,
69
+ forceCaption,
70
+ consentMessage,
71
+ ...props
72
+ }) => {
73
+ const consent = useThirdPartyConsent();
74
+ return /* @__PURE__ */ jsx(YoutubeVideoStyled, { ...props, roundedCorner, children: !consent ? /* @__PURE__ */ jsx(ConsentMessage, { ...consentMessage }) : /* @__PURE__ */ jsx(YoutubeVideoIframeStyled, { src: getYouTubeUrl({
75
+ privacyEnhanced,
76
+ videoId,
77
+ startTime,
78
+ forceCaption
79
+ }), title, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" }) });
80
+ };
81
+ export {
82
+ YoutubeVideoIframeStyled,
83
+ YoutubeVideoStyled,
84
+ YoutubeVideo as default
85
+ };
@@ -0,0 +1,40 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import { PatternProps } from '../../foundations/PatternProps';
3
+ import { ConsentMessageProps } from '../ConsentMessage/props';
4
+ export interface YoutubeVideoProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
5
+ /**
6
+ * Pin component's name from string to the concrete name
7
+ */
8
+ component?: 'YoutubeVideo';
9
+ /**
10
+ * Youtube video id
11
+ */
12
+ videoId: string;
13
+ /**
14
+ * Youtube Video Title
15
+ */
16
+ title?: string;
17
+ /**
18
+ * Display video with rounded corners
19
+ */
20
+ roundedCorner?: boolean;
21
+ /**
22
+ * Enhance privacy to avoid cookies before interaction and minimize tracking by Youtube.
23
+ * If set to true, the embedded player will not be used to personalise the YouTube experience of the user.
24
+ * Ads in Privacy Enhanced Mode are non-personalised and views of our videos won’t influence ads outside of our website.
25
+ */
26
+ privacyEnhanced?: boolean;
27
+ /**
28
+ * Set a specific starting time in seconds
29
+ */
30
+ startTime?: string;
31
+ /**
32
+ * Force Youtube video caption
33
+ */
34
+ forceCaption?: boolean;
35
+ /**
36
+ * consentMessage component that will be shown if user
37
+ * did not accept cookies already
38
+ */
39
+ consentMessage: ConsentMessageProps;
40
+ }
@@ -0,0 +1,3 @@
1
+ import { YoutubeVideoProps } from '.';
2
+ export declare const YoutubeVideoStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<YoutubeVideoProps, "bottomSpacing" | "roundedCorner">>> & string;
3
+ export declare const YoutubeVideoIframeStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, never>> & string;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * This file contains the Youtube video background for the consent message as base 64 encoded gif
3
+ * Even if that is relativly small,
4
+ * that would be an ideal candidat for lasy loading ;)
5
+ */
6
+ export declare const youtubeVideoBackground = "R0lGODlhjgHmAPYAACIiIhAQEB0dHRUVFRoaGg8PDwwMDBEREQ0NDRkZGR4eHhwcHBMTEx8fHxgYGBcXFxsbGxQUFBISEg4ODhYWFiAgICEhIQsLCwoKCgkJCQgICJ2ZmCMjI56Zmf8AAAcHB////56amZ2ZmfDw8Kenp6ampuHh4aWlpWxsbDAwMMTExDExMTIyMoiIiDQ0NGtra7W1taioqOLi4jMzMy8vL21tbZiYmFBQUIqKii0tLSQkJE5OTkFBQT8/P09PT3p6epeXl3t7ey4uLlxcXGlpaYmJicXFxfHx8dPT015eXkBAQNLS0kxMTMPDw25ubmpqaiwsLLe3t19fX01NTXl5eXx8fCYmJllZWZqamgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQEAgD/ACH+KUdJRiByZXNpemVkIHdpdGggaHR0cHM6Ly9lemdpZi5jb20vcmVzaXplACwAAAAAjgHmAAAH/4ABgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJypIIBs7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn0AiOBhft7u/w8fLz9PX29/j5+vv8/f7/AAMKHEiwoMF3Bhw1Q6ftgjSHDdk9gwjRWUWJGB22syhRY0d4GeWxA9nRokeRGg+qXMmypcuX9RI2Wsiwps2bOHM+hHZxW89sFINO5Mlx5ESKI1OG9Bgy6caTIN05jTcV5j2ZjGjq3Mq1q9evYMOKRadu5tizaNOqXcu2rbOyWf8RyJ1LV66Bus3w0r2rd2/fvnff1pWWl+ZCu+meaeW7bXFgt5AjS/YKd9GEv5gza97MubPnz6BDi8bM1+5cxppLn1Zt+vRgv60FBy6M2HG0w4oLP1bceDK3yooujx5OvLjx48iTK1/OvLlzzqVn/3Uk/Ln169iza9/OvXv2CdQnXBZPHgH58+jljke/vrzw9+nVV69bfT5y+97z69/Pv/9c8I2wJ+CABBZo4IEIJqhggeYt6KCADbIXIYTnyTegeRimN96E5TUo34cYhijehPT99V6IdOG3mYr+XQcgIw/GKOOMNNZo44045qjjjjxWeCGHBwLZoYbrWVghkOH1qOT/kkw26eSTUEYpZY6OFDCBlVaKV0CWV5KH5ZYDcnlgllxiOeWZaKap5ppsyljllnDGKeecdNZp55145qnnnnVeyeeXZsLp552DzqnloIXK6eWhfnqpaJddgmkmemSSKaCYbWbK5pt/durpp6CGKuqopJZq6qmokqplnInSiSigsFZ6KJiMyhppo+cVwGmqvPbq66/ABivssMQWS+cjcAaQrK5xKtuss8dCa+yc0k5r7bXYZqttsMsIousk327CrLeDfGtuuMoSgu6y6oaLrrTpjutstZ3Sm6y91G6r7755duvvv7u8W4i7AqubrrdbJnJuwgwjvOyz88pZLbkJQ4sv/8AYZ6zxxoscMIjHIAvicQAhGzIyISOfnIjKHLfs8sskHyDzzDTXbPPNOOdsc8w69+zzzzLzzHPNJMc89MxFpxx0yDQXLXLJKB+S8scsi+x01JRUbYnWMOMC9Ndghy322GSXbfbZaKdN9tFH59x20kMnfbPRH9dNNNyFVK010lxfLUnfJqst+OCEF2744YgnrvjijN/NyNkSNC755JRXbvnlmA/uiAScd+7556CHLvrokY9+AOmen0666qDLXLrrnc/8euuw18y57bZHjrbumffu++9pb4768MQXb/zxyCev/PLMN58868ufDv3n06fOuuuy1x666rhLf/vr10sfPv/vvGMvvs/llx98I8637/778Mcv//z012///fi3Lnz+/Pfv//8ADKAAB9i8zTHggAhMoAIVyLkFOvCBDJBABCUYQQRS8IANlOAFJ9jACWKQghoEoQY52LkKhvCDIczg5z5IQhV6roXLgyEBZ0jDGhaQfRDMoQ53yMMe+vCHQAyiEIdIxCJu0IQPzKAFK+hB0GGQgyx0oQlVKMMUvrB9VbShBAxYxC568YtgDKMYx0jGMprxjGE8YhC32Ag0uvGNcIyjHOdIxzrSkY2MYEAE9sjHPvoxAnr8ox8DuUdC9lGPhizkAfmIyEICspGAZKQiETjJQCJyh49MYCZzuEk7evL/k6AMJRjxuIhECvKUqEylKlfJyla68pWwjKUsU2lKVy7SkKbEpQI7uchI8hKTm8zkL2/JSVHK0RG1nKUyl8nMZjrzmdCMpjSnSc1m9lKWyWQlAxxRzW5685vgDKc4x0nOcsZym42IwADWOYA9spOd6uzjO9epznbW0572dCc849nOfgoyn/+Mpz75CNBVFtScCE2oQhfKUFWikxH3nKdEJ0rRilr0ohjNqEY3OtGIatSjFAXpPCNKUHrCs58nRelI6SlQgO5zoKo86EH9iM+G2nSaD12ESDnK05769KdADapQh0rUohr1qEjtaT09ek+S8lOl+3xnUyPAzaRa9apY/82qVrfK1a56latUbQQ7KTAACpCVrOtE61jnada0ujWtan3rV+dK17ra9a54BasjymrWvvr1r4ANrGAHS9jCGvawiE1sYfnaV7c29p1tfexfHYvWs/IVsnKtbEXbWtaMxlWuoM2raEdLz70q9rSoTa1qV8va1rr2tbBNLGP9OlvU1haxs+0sYG9bW8bC9ayctSxwKdtZzMK1uKFVa1gZcdvYOve50I2udKdL3epa97quHYBpzfqA7j6AAt8Nb2G/G1jycle8iDUvdtfL3va6973wpa52GwFe79r3vvjNr373y9/++ve/9f2vgO0bYO6C97wE7i6CDazgAHv3wH0NL/96/ape8j74r+o1MIPHC+H4evjDp50vIxw84BKb+MQoTrGKV8ziFrv4xQImcYllvN/62hjBEsZxgyN8Yx6bN8NAPm2GRbwIGsP4yEhOspKXzOQmO/nJUGYxBRxRXwf418r3xXKUt8zlLnv5y2AOs4unTF8HmPnMaE6zmtfM5ja7+c1wjrOcz/wAM3c3zXV2c57zjGU7e7fPaN7zfrVs50Br2cSHVnGixczoRvOXzIzg85wnTelKW/rSmM60pjfN6UpL2spq/rSh2bznQtPZ0JL+c53/bGr8glrAr+6zqpsM6UWIutO4zrWud83rXvv618AONrBrrYhbC/vYyE62spf/zexmOzvUjnhAAqZN7Wpb+9rYzra2t61tB0zb29U287XBHe4EeJvc1j6zudct7m+fG9zwTrO51T3vd6ub0vUW97P3ze9+Y/oBjkA3twdO8IIb/OAIT7jCF87whQuc2w9/OLUj/u2JV7zb6I44vcP9bnejmd3yrne+763vNo9c2QBvhMQbzvKWu/zlMI+5zGdO85rb/ObcTjkjVo7znvv850APutCHTnSW63wR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";
@@ -1,3 +1 @@
1
- export declare const GlobalStyle: import('react').NamedExoticComponent<import('styled-components').ExecutionProps & {
2
- localWebfont?: boolean;
3
- }>;
1
+ export declare const GlobalStyle: import('react').NamedExoticComponent<import('styled-components').ExecutionProps & object>;
@@ -219,10 +219,7 @@ const textColors = {
219
219
  }
220
220
  };
221
221
  const cssVars = css([":root{--fontSize14:14px;--fontSize16:16px;--fontSize18:18px;--fontSize20:20px;--fontSize24:24px;--fontSize28:28px;--fontSize32:32px;--fontSize40:40px;--fontSize56:56px;--fontSize64:64px;--lineHeight112:1.125;--lineHeight114:1.1428571429;--lineHeight120:1.2;--lineHeight125:1.25;--lineHeight128:1.2857142857;--lineHeight133:1.3333333333;--lineHeight140:1.4;--lineHeight144:1.4444444444;--fontWeightLight:300;--fontWeightRegular:400;--fontWeightBold:700;--shadow28:rgba(0,0,0,0.2) 0px 2px 8px;--spacing0:0px;--spacing4:4px;--spacing8:8px;--spacing12:12px;--spacing16:16px;--spacing20:20px;--spacing24:24px;--spacing28:28px;--spacing32:32px;--spacing40:40px;--spacing48:48px;--spacing56:56px;--spacing64:64px;--spacing72:72px;--spacing80:80px;--spacingNone:var(--spacing0);--spacing2Xs:var(--spacing4);--spacingXs:var(--spacing8);--spacingSm:var(--spacing12);--spacingMd:var(--spacing16);--spacingLg:var(--spacing20);--spacingXl:var(--spacing24);--spacing2Xl:var(--spacing24);--spacing3Xl:var(--spacing32);--spacing4Xl:var(--spacing40);--spacing5Xl:var(--spacing48);--spacing6Xl:var(--spacing48);--spacing7Xl:var(--spacing48);@media screen and (min-width:", "){--spacingMd:var(--spacing20);--spacingLg:var(--spacing20);--spacingXl:var(--spacing28);--spacing2Xl:var(--spacing32);--spacing3Xl:var(--spacing40);--spacing4Xl:var(--spacing48);--spacing5Xl:var(--spacing56);--spacing6Xl:var(--spacing56);--spacing7Xl:var(--spacing56);}@media screen and (min-width:", "){--spacingSm:var(--spacing16);--spacingLg:var(--spacing24);--spacingXl:var(--spacing32);--spacing2Xl:var(--spacing40);--spacing3Xl:var(--spacing48);--spacing4Xl:var(--spacing56);--spacing5Xl:var(--spacing64);--spacing6Xl:var(--spacing72);--spacing7Xl:var(--spacing80);}--borderRadius0:0px;--borderRadius3:3px;--borderRadius6:6px;--borderRadius100:100px;--textDecorationNone:none;--textDecorationUnderline:underline;--textDecorationStrikethrough:line-through;--opacity60:0.6;--opacity38:0.38;--borderWidth0:0px;--borderWidth1:1px;--borderWidth2:2px;--borderWidth4:4px;--colorVodafoneRed:#e60000;--colorVodafoneRedTint:#ea1a1a;--colorRed:#bd0000;--colorRedTint:#f06666;--colorVodafoneDarkRed:#820000;--colorVodafoneDarkRedTint:#8a0f0f;--colorTurquoise:#00697c;--colorTurquoiseTint:#0096ad;--colorAubergine:#5e2750;--colorAubergineTint:#b04a98;--colorFreshOrange:#eb6100;--colorFreshOrangeTint:#eb9700;--colorLemonYellow:#fecb00;--colorLemonYellowTint:#fecb00;--colorSpringGreen:#008a00;--colorSpringGreenTint:#b7bf10;--colorBlue:#005ea5;--colorBlueTint:#5f9bc8;--colorAquaBlue:#0096ad;--colorAquaBlueTint:#00b0ca;--colorVodafoneWhite:#ffffff;--colorVodafoneWhiteAlpha:#ffffffb3;--colorBlack05:#f2f2f2;--colorBlack25:#bebebe;--colorBlack50:#7e7e7e;--colorBlack60:#666666;--colorBlack85:#262626;--colorBlack95:#0d0d0d;--colorBlack95Alpha:#0d0d0db3;--colorVodafoneGradient:linear-gradient(45deg,#8a0f0f 0%,#e60000 100%);--colorObjectBrand:var(--", ");--colorObjectNeutral:var(--", ");--colorObjectSubtle:var(--", ");--colorObjectInverse:var(--", ");--colorObjectAccent:var(--", ");--colorObjectSuccess:var(--", ");--colorObjectCritical:var(--", ");--colorObjectWarning:var(--", ");--colorObjectInformation:var(--", ");--colorObjectSelected:var(--", ");--colorObjectUnselected:var(--", ");--colorObjectBrandHover:color-mix(in srgb,var(--colorObjectBrand),#000 8%);--colorObjectNeutralHover:color-mix(in srgb,var(--colorObjectNeutral),#fff 8%);--colorObjectSubtleHover:color-mix(in srgb,var(--colorObjectSubtle),#000 8%);--colorObjectInverseHover:color-mix(in srgb,var(--colorObjectInverse),#000 8%);--colorObjectAccentHover:color-mix(in srgb,var(--colorObjectAccent),#000 8%);--colorObjectSuccessHover:color-mix(in srgb,var(--colorObjectSuccess),#000 8%);--colorObjectCriticalHover:color-mix(in srgb,var(--colorObjectCritical),#000 8%);--colorObjectWarningHover:color-mix(in srgb,var(--colorObjectWarning),#000 8%);--colorObjectInformationHover:color-mix(in srgb,var(--colorObjectInformation),#000 8%);--colorObjectSelectedHover:color-mix(in srgb,var(--colorObjectSelected),#000 8%);--colorObjectUnselectedHover:color-mix(in srgb,var(--colorObjectUnselected),#000 8%);--colorObjectBrandPress:color-mix(in srgb,var(--colorObjectBrand),#000 16%);--colorObjectNeutralPress:color-mix(in srgb,var(--colorObjectNeutral),#fff 16%);--colorObjectSubtlePress:color-mix(in srgb,var(--colorObjectSubtle),#000 16%);--colorObjectInversePress:color-mix(in srgb,var(--colorObjectInverse),#000 16%);--colorObjectAccentPress:color-mix(in srgb,var(--colorObjectAccent),#000 16%);--colorObjectSuccessPress:color-mix(in srgb,var(--colorObjectSuccess),#000 16%);--colorObjectCriticalPress:color-mix(in srgb,var(--colorObjectCritical),#000 16%);--colorObjectWarningPress:color-mix(in srgb,var(--colorObjectWarning),#000 16%);--colorObjectInformationPress:color-mix(in srgb,var(--colorObjectInformation),#000 16%);--colorObjectSelectedPress:color-mix(in srgb,var(--colorObjectSelected),#000 16%);--colorObjectUnselectedPress:color-mix(in srgb,var(--colorObjectUnselected),#000 16%);--colorBackgroundBrand:var(--", ");--colorBackgroundBrandGradient:var(--", ");--colorBackgroundNeutral:var(--", ");--colorBackgroundSubtle:var(--", ");--colorBackgroundOverlay:var(--", ");--colorBackgroundOverlayStatic:var(--", ");--colorBackgroundBrandHover:color-mix(in srgb,var(--colorBackgroundBrand),#000 8%);--colorBackgroundNeutralHover:color-mix(in srgb,var(--colorBackgroundNeutral),#000 8%);--colorBackgroundSubtleHover:color-mix(in srgb,var(--colorBackgroundSubtle),#000 8%);--colorBackgroundBrandPress:color-mix(in srgb,var(--colorBackgroundBrand),#000 16%);--colorBackgroundNeutralPress:color-mix(in srgb,var(--colorBackgroundNeutral),#000 16%);--colorBackgroundSubtlePress:color-mix(in srgb,var(--colorBackgroundSubtle),#000 16%);--colorTextBrand:var(--", ");--colorTextNeutral:var(--", ");--colorTextNeutralStatic:var(--", ");--colorTextInverse:var(--", ");--colorTextInverseStatic:var(--", ");--colorTextCritical:var(--", ");--colorTextPlaceholder:var(--", ");--colorBorderBrand:var(--", ");--colorBorderNeutral:var(--", ");--colorBorderSubtle:var(--", ");--colorBorderInverse:var(--", ");--colorBorderAccent:var(--", ");--colorBorderSuccess:var(--", ");--colorBorderCritical:var(--", ");--colorBorderWarning:var(--", ");--colorBorderInformation:var(--", ");--colorBorderSelected:var(--", ");--colorBorderUnselected:var(--", ");--colorBorderFocus:var(--", ");--colorIconBrand:var(--", ");--colorIconNeutral:var(--", ");--colorIconNeutralStatic:var(--", ");--colorIconInverse:var(--", ");--colorIconInverseStatic:var(--", ");--colorIconSuccess:var(--", ");--colorIconCritical:var(--", ");--colorIconWarning:var(--", ");--colorIconInformation:var(--", ");--", ":", ";.Dark{--colorObjectBrand:var(--", ");--colorObjectNeutral:var(--", ");--colorObjectSubtle:var(--", ");--colorObjectInverse:var(--", ");--colorObjectAccent:var(--", ");--colorObjectSuccess:var(--", ");--colorObjectCritical:var(--", ");--colorObjectWarning:var(--", ");--colorObjectInformation:var(--", ");--colorObjectSelected:var(--", ");--colorObjectUnselected:var(--", ");--colorObjectBrandHover:color-mix(in srgb,var(--colorObjectBrand),#000 8%);--colorObjectNeutralHover:color-mix(in srgb,var(--colorObjectNeutral),#000 8%);--colorObjectSubtleHover:color-mix(in srgb,var(--colorObjectSubtle),#000 8%);--colorObjectInverseHover:color-mix(in srgb,var(--colorObjectInverse),#fff 8%);--colorObjectAccentHover:color-mix(in srgb,var(--colorObjectAccent),#000 8%);--colorObjectSuccessHover:color-mix(in srgb,var(--colorObjectSuccess),#000 8%);--colorObjectCriticalHover:color-mix(in srgb,var(--colorObjectCritical),#000 8%);--colorObjectWarningHover:color-mix(in srgb,var(--colorObjectWarning),#000 8%);--colorObjectInformationHover:color-mix(in srgb,var(--colorObjectInformation),#000 8%);--colorObjectSelectedHover:color-mix(in srgb,var(--colorObjectSelected),#000 8%);--colorObjectUnselectedHover:color-mix(in srgb,var(--colorObjectUnselected),#000 8%);--colorObjectBrandPress:color-mix(in srgb,var(--colorObjectBrand),#000 16%);--colorObjectNeutralPress:color-mix(in srgb,var(--colorObjectNeutral),#000 16%);--colorObjectSubtlePress:color-mix(in srgb,var(--colorObjectSubtle),#000 16%);--colorObjectInversePress:color-mix(in srgb,var(--colorObjectInverse),#fff 16%);--colorObjectAccentPress:color-mix(in srgb,var(--colorObjectAccent),#000 16%);--colorObjectSuccessPress:color-mix(in srgb,var(--colorObjectSuccess),#000 16%);--colorObjectCriticalPress:color-mix(in srgb,var(--colorObjectCritical),#000 16%);--colorObjectWarningPress:color-mix(in srgb,var(--colorObjectWarning),#000 16%);--colorObjectInformationPress:color-mix(in srgb,var(--colorObjectInformation),#000 16%);--colorObjectSelectedPress:color-mix(in srgb,var(--colorObjectSelected),#000 16%);--colorObjectUnselectedPress:color-mix(in srgb,var(--colorObjectUnselected),#000 16%);--colorBackgroundBrand:var(--", ");--colorBackgroundNeutral:var(--", ");--colorBackgroundSubtle:var(--", ");--colorBackgroundOverlay:var(--", ");--colorBackgroundOverlayStatic:var(--", ");--colorBackgroundBrandHover:color-mix(in srgb,var(--colorBackgroundBrand),#000 8%);--colorBackgroundNeutralHover:color-mix(in srgb,var(--colorBackgroundNeutral),#fff 8%);--colorBackgroundSubtleHover:color-mix(in srgb,var(--colorBackgroundSubtle),#fff 8%);--colorBackgroundBrandPress:color-mix(in srgb,var(--colorBackgroundBrand),#000 16%);--colorBackgroundNeutralPress:color-mix(in srgb,var(--colorBackgroundNeutral),#fff 16%);--colorBackgroundSubtlePress:color-mix(in srgb,var(--colorBackgroundSubtle),#fff 16%);--colorTextBrand:var(--", ");--colorTextNeutral:var(--", ");--colorTextNeutralStatic:var(--", ");--colorTextInverse:var(--", ");--colorTextInverseStatic:var(--", ");--colorTextCritical:var(--", ");--colorTextPlaceholder:var(--", ");--colorBorderBrand:var(--", ");--colorBorderNeutral:var(--", ");--colorBorderSubtle:var(--", ");--colorBorderInverse:var(--", ");--colorBorderAccent:var(--", ");--colorBorderSuccess:var(--", ");--colorBorderCritical:var(--", ");--colorBorderWarning:var(--", ");--colorBorderInformation:var(--", ");--colorBorderSelected:var(--", ");--colorBorderUnselected:var(--", ");--colorBorderFocus:var(--", ");--colorIconBrand:var(--", ");--colorIconNeutral:var(--", ");--colorIconNeutralStatic:var(--", ");--colorIconInverse:var(--", ");--colorIconInverseStatic:var(--", ");--colorIconSuccess:var(--", ");--colorIconCritical:var(--", ");--colorIconWarning:var(--", ");--colorIconInformation:var(--", ");--", ":", ";}.DarkMobile{@media screen and (max-width:", "){--colorObjectBrand:var(--", ");--colorObjectNeutral:var(--", ");--colorObjectSubtle:var(--", ");--colorObjectInverse:var(--", ");--colorObjectAccent:var(--", ");--colorObjectSuccess:var(--", ");--colorObjectCritical:var(--", ");--colorObjectWarning:var(--", ");--colorObjectInformation:var(--", ");--colorObjectSelected:var(--", ");--colorObjectUnselected:var(--", ");--colorObjectBrandHover:color-mix(in srgb,var(--colorObjectBrand),#000 8%);--colorObjectNeutralHover:color-mix(in srgb,var(--colorObjectNeutral),#000 8%);--colorObjectSubtleHover:color-mix(in srgb,var(--colorObjectSubtle),#000 8%);--colorObjectInverseHover:color-mix(in srgb,var(--colorObjectInverse),#fff 8%);--colorObjectAccentHover:color-mix(in srgb,var(--colorObjectAccent),#000 8%);--colorObjectSuccessHover:color-mix(in srgb,var(--colorObjectSuccess),#000 8%);--colorObjectCriticalHover:color-mix(in srgb,var(--colorObjectCritical),#000 8%);--colorObjectWarningHover:color-mix(in srgb,var(--colorObjectWarning),#000 8%);--colorObjectInformationHover:color-mix(in srgb,var(--colorObjectInformation),#000 8%);--colorObjectSelectedHover:color-mix(in srgb,var(--colorObjectSelected),#000 8%);--colorObjectUnselectedHover:color-mix(in srgb,var(--colorObjectUnselected),#000 8%);--colorObjectBrandPress:color-mix(in srgb,var(--colorObjectBrand),#000 16%);--colorObjectNeutralPress:color-mix(in srgb,var(--colorObjectNeutral),#000 16%);--colorObjectSubtlePress:color-mix(in srgb,var(--colorObjectSubtle),#000 16%);--colorObjectInversePress:color-mix(in srgb,var(--colorObjectInverse),#fff 16%);--colorObjectAccentPress:color-mix(in srgb,var(--colorObjectAccent),#000 16%);--colorObjectSuccessPress:color-mix(in srgb,var(--colorObjectSuccess),#000 16%);--colorObjectCriticalPress:color-mix(in srgb,var(--colorObjectCritical),#000 16%);--colorObjectWarningPress:color-mix(in srgb,var(--colorObjectWarning),#000 16%);--colorObjectInformationPress:color-mix(in srgb,var(--colorObjectInformation),#000 16%);--colorObjectSelectedPress:color-mix(in srgb,var(--colorObjectSelected),#000 16%);--colorObjectUnselectedPress:color-mix(in srgb,var(--colorObjectUnselected),#000 16%);--colorBackgroundBrand:var(--", ");--colorBackgroundNeutral:var(--", ");--colorBackgroundSubtle:var(--", ");--colorBackgroundBrandHover:color-mix(in srgb,var(--colorBackgroundBrand),#000 8%);--colorBackgroundNeutralHover:color-mix(in srgb,var(--colorBackgroundNeutral),#fff 8%);--colorBackgroundSubtleHover:color-mix(in srgb,var(--colorBackgroundSubtle),#fff 8%);--colorBackgroundBrandPress:color-mix(in srgb,var(--colorBackgroundBrand),#000 16%);--colorBackgroundNeutralPress:color-mix(in srgb,var(--colorBackgroundNeutral),#fff 16%);--colorBackgroundSubtlePress:color-mix(in srgb,var(--colorBackgroundSubtle),#fff 16%);--colorTextBrand:var(--", ");--colorTextNeutral:var(--", ");--colorTextNeutralStatic:var(--", ");--colorTextInverse:var(--", ");--colorTextInverseStatic:var(--", ");--colorTextCritical:var(--", ");--colorTextPlaceholder:var(--", ");--colorBorderBrand:var(--", ");--colorBorderNeutral:var(--", ");--colorBorderSubtle:var(--", ");--colorBorderInverse:var(--", ");--colorBorderAccent:var(--", ");--colorBorderSuccess:var(--", ");--colorBorderCritical:var(--", ");--colorBorderWarning:var(--", ");--colorBorderInformation:var(--", ");--colorBorderSelected:var(--", ");--colorBorderUnselected:var(--", ");--colorBorderFocus:var(--", ");--colorIconBrand:var(--", ");--colorIconNeutral:var(--", ");--colorIconNeutralStatic:var(--", ");--colorIconInverse:var(--", ");--colorIconInverseStatic:var(--", ");--colorIconSuccess:var(--", ");--colorIconCritical:var(--", ");--colorIconWarning:var(--", ");--colorIconInformation:var(--", ");--", ":", ";}}}:root{--bodyMdFontSize:var(--fontSize16);--bodyMdLineHeight:var(--lineHeight125);@media screen and (min-width:", "){--bodyMdFontSize:var(--fontSize18);--bodyMdLineHeight:var(--lineHeight144);}--bodySmFontSize:var(--fontSize14);--bodySmLineHeight:var(--lineHeight128);--headingXlFontSize:var(--fontSize32);--headingXlLineHeight:var(--lineHeight125);@media screen and (min-width:", "){--headingXlFontSize:var(--fontSize56);--headingXlLineHeight:var(--lineHeight114);}@media screen and (min-width:", "){--headingXlFontSize:var(--fontSize64);--headingXlLineHeight:var(--lineHeight112);}--headingLgFontSize:var(--fontSize28);--headingLgLineHeight:var(--lineHeight128);@media screen and (min-width:", "){--headingLgFontSize:var(--fontSize40);--headingLgLineHeight:var(--lineHeight120);}@media screen and (min-width:", "){--headingLgFontSize:var(--fontSize56);--headingLgLineHeight:var(--lineHeight114);}--headingMdFontSize:var(--fontSize24);--headingMdLineHeight:var(--lineHeight133);@media screen and (min-width:", "){--headingMdFontSize:var(--fontSize32);--headingMdLineHeight:var(--lineHeight125);}@media screen and (min-width:", "){--headingMdFontSize:var(--fontSize40);--headingMdLineHeight:var(--lineHeight120);}--headingSmFontSize:var(--fontSize20);--headingSmLineHeight:var(--lineHeight140);@media screen and (min-width:", "){--headingSmFontSize:var(--fontSize24);--headingSmLineHeight:var(--lineHeight133);}@media screen and (min-width:", "){--headingSmFontSize:var(--fontSize28);--headingSmLineHeight:var(--lineHeight128);}--headingXsFontSize:var(--fontSize18);--headingXsLineHeight:var(--lineHeight144);@media screen and (min-width:", "){--headingXsFontSize:var(--fontSize20);--headingXsLineHeight:var(--lineHeight140);}@media screen and (min-width:", "){--headingXsFontSize:var(--fontSize20);--headingXsLineHeight:var(--lineHeight140);}}:root{--iconSize2xs:16px;--iconSizeXs:20px;--iconSizeSm:20px;--iconSizeMd:24px;--iconSizeLg:32px;--iconSizeXl:36px;--iconSize2xl:40px;--iconSize3xl:48px;--iconSize4xl:56px;--iconSize5xl:64px;--iconSize6xl:72px;--iconSize7xl:84px;--iconSize8xl:96px;--iconSize9xl:120px;@media screen and (min-width:", "){--iconSize2xs:16px;--iconSizeXs:20px;--iconSizeSm:24px;--iconSizeMd:32px;--iconSizeLg:36px;--iconSizeXl:40px;--iconSize2xl:48px;--iconSize3xl:56px;--iconSize4xl:64px;--iconSize5xl:72px;--iconSize6xl:84px;--iconSize7xl:96px;--iconSize8xl:120px;--iconSize9xl:192px;}}"], breakpoint_medium, breakpoint_large, objectColors.colorObjectBrand.Light, objectColors.colorObjectNeutral.Light, objectColors.colorObjectSubtle.Light, objectColors.colorObjectInverse.Light, objectColors.colorObjectAccent.Light, objectColors.colorObjectSuccess.Light, objectColors.colorObjectCritical.Light, objectColors.colorObjectWarning.Light, objectColors.colorObjectInformation.Light, objectColors.colorObjectSelected.Light, objectColors.colorObjectUnselected.Light, backgroundColors.colorBackgroundBrand.Light, backgroundColors.colorBackgroundBrandGradient.Light, backgroundColors.colorBackgroundNeutral.Light, backgroundColors.colorBackgroundSubtle.Light, backgroundColors.colorBackgroundOverlay.Light, backgroundColors.colorBackgroundOverlayStatic.Light, textColors.colorTextBrand.Light, textColors.colorTextNeutral.Light, textColors.colorTextNeutralStatic.Light, textColors.colorTextInverse.Light, textColors.colorTextInverseStatic.Light, textColors.colorTextCritical.Light, textColors.colorTextPlaceholder.Light, borderColors.colorBorderBrand.Light, borderColors.colorBorderNeutral.Light, borderColors.colorBorderSubtle.Light, borderColors.colorBorderInverse.Light, borderColors.colorBorderAccent.Light, borderColors.colorBorderSuccess.Light, borderColors.colorBorderCritical.Light, borderColors.colorBorderWarning.Light, borderColors.colorBorderInformation.Light, borderColors.colorBorderSelected.Light, borderColors.colorBorderUnselected.Light, borderColors.colorBorderFocus.Light, iconColors.colorIconBrand.Light, iconColors.colorIconNeutral.Light, iconColors.colorIconNeutralStatic.Light, iconColors.colorIconInverse.Light, iconColors.colorIconInverseStatic.Light, iconColors.colorIconSuccess.Light, iconColors.colorIconCritical.Light, iconColors.colorIconWarning.Light, iconColors.colorIconInformation.Light, loadingSpinnerOverlayCssVar, loadingSpinnerOverlays.Light, objectColors.colorObjectBrand.Dark, objectColors.colorObjectNeutral.Dark, objectColors.colorObjectSubtle.Dark, objectColors.colorObjectInverse.Dark, objectColors.colorObjectAccent.Dark, objectColors.colorObjectSuccess.Dark, objectColors.colorObjectCritical.Dark, objectColors.colorObjectWarning.Dark, objectColors.colorObjectInformation.Dark, objectColors.colorObjectSelected.Dark, objectColors.colorObjectUnselected.Dark, backgroundColors.colorBackgroundBrand.Dark, backgroundColors.colorBackgroundNeutral.Dark, backgroundColors.colorBackgroundSubtle.Dark, backgroundColors.colorBackgroundOverlay.Dark, backgroundColors.colorBackgroundOverlayStatic.Dark, textColors.colorTextBrand.Dark, textColors.colorTextNeutral.Dark, textColors.colorTextNeutralStatic.Dark, textColors.colorTextInverse.Dark, textColors.colorTextInverseStatic.Dark, textColors.colorTextCritical.Dark, textColors.colorTextPlaceholder.Dark, borderColors.colorBorderBrand.Dark, borderColors.colorBorderNeutral.Dark, borderColors.colorBorderSubtle.Dark, borderColors.colorBorderInverse.Dark, borderColors.colorBorderAccent.Dark, borderColors.colorBorderSuccess.Dark, borderColors.colorBorderCritical.Dark, borderColors.colorBorderWarning.Dark, borderColors.colorBorderInformation.Dark, borderColors.colorBorderSelected.Dark, borderColors.colorBorderUnselected.Dark, borderColors.colorBorderFocus.Dark, iconColors.colorIconBrand.Dark, iconColors.colorIconNeutral.Dark, iconColors.colorIconBrand.Dark, iconColors.colorIconInverse.Dark, iconColors.colorIconInverseStatic.Dark, iconColors.colorIconSuccess.Dark, iconColors.colorIconCritical.Dark, iconColors.colorIconWarning.Dark, iconColors.colorIconInformation.Dark, loadingSpinnerOverlayCssVar, loadingSpinnerOverlays.Dark, breakpoint_medium, objectColors.colorObjectBrand.Dark, objectColors.colorObjectNeutral.Dark, objectColors.colorObjectSubtle.Dark, objectColors.colorObjectInverse.Dark, objectColors.colorObjectAccent.Dark, objectColors.colorObjectSuccess.Dark, objectColors.colorObjectCritical.Dark, objectColors.colorObjectWarning.Dark, objectColors.colorObjectInformation.Dark, objectColors.colorObjectSelected.Dark, objectColors.colorObjectUnselected.Dark, backgroundColors.colorBackgroundBrand.Dark, backgroundColors.colorBackgroundNeutral.Dark, backgroundColors.colorBackgroundSubtle.Dark, textColors.colorTextBrand.Dark, textColors.colorTextNeutral.Dark, textColors.colorTextNeutralStatic.Dark, textColors.colorTextInverse.Dark, textColors.colorTextInverseStatic.Dark, textColors.colorTextCritical.Dark, textColors.colorTextPlaceholder.Dark, borderColors.colorBorderBrand.Dark, borderColors.colorBorderNeutral.Dark, borderColors.colorBorderSubtle.Dark, borderColors.colorBorderInverse.Dark, borderColors.colorBorderAccent.Dark, borderColors.colorBorderSuccess.Dark, borderColors.colorBorderCritical.Dark, borderColors.colorBorderWarning.Dark, borderColors.colorBorderInformation.Dark, borderColors.colorBorderSelected.Dark, borderColors.colorBorderUnselected.Dark, borderColors.colorBorderFocus.Dark, iconColors.colorIconBrand.Dark, iconColors.colorIconNeutral.Dark, iconColors.colorIconBrand.Dark, iconColors.colorIconInverse.Dark, iconColors.colorIconInverseStatic.Dark, iconColors.colorIconSuccess.Dark, iconColors.colorIconCritical.Dark, iconColors.colorIconWarning.Dark, iconColors.colorIconInformation.Dark, loadingSpinnerOverlayCssVar, loadingSpinnerOverlays.Dark, breakpoint_medium, breakpoint_medium, breakpoint_large, breakpoint_medium, breakpoint_large, breakpoint_medium, breakpoint_large, breakpoint_medium, breakpoint_large, breakpoint_medium, breakpoint_large, breakpoint_medium);
222
- const getWebFont = (_localWebfont = false) => {
223
- return "https://www.vodafone.de/simplicity/assets/css/fonts/VodafoneVF_Wght_W.woff2";
224
- };
225
- const GlobalStyle = createGlobalStyle(['@font-face{font-family:"VodafoneVari";src:url(', ' ) format("woff2");font-style:normal;font-display:swap;}@font-face{font-family:"Vodafone";src:url(https://www.vodafone.de/simplicity/assets/css/fonts/VodafoneRg.eot);src:url(https://www.vodafone.de/simplicity/assets/css/fonts/VodafoneRg.woff2) format("woff2"),url(https://www.vodafone.de/simplicity/assets/css/fonts/VodafoneRg.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Vodafone";src:url(https://www.vodafone.de/simplicity/assets/css/fonts/vodafonergbd-webfont.eot);src:url(https://www.vodafone.de/simplicity/assets/css/fonts/vodafonergbd-webfont.woff2) format("woff2"),url(https://www.vodafone.de/simplicity/assets/css/fonts/vodafonergbd-webfont.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Vodafone";src:url(https://www.vodafone.de/simplicity/assets/css/fonts/VodafoneLt.eot);src:url(https://www.vodafone.de/simplicity/assets/css/fonts/VodafoneLt.woff2) format("woff2"),url(https://www.vodafone.de/simplicity/assets/css/fonts/VodafoneLt.woff) format("woff");font-weight:100;font-style:normal;font-display:swap}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,button,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:top;}p{vertical-align:baseline;}html{line-height:1;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}ol,ul{list-style:none;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle;}q,blockquote{quotes:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none;}a img{border:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}html{font-size:14px}body{color:#333;font-family:"VodafoneVari","Arial",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1;background:#fff;}*{box-sizing:border-box;}input,textarea{font-family:"VodafoneVari","Arial",sans-serif;border:none;box-shadow:none;max-width:100%;}input:focus{border:none;}hr{margin-block-start:0;}select{-moz-appearance:none;-webkit-appearance:none;appearance:none;}.HideOverflowY{overflow-y:hidden;}.HasObscuringBottomBar{scroll-padding-bottom:var(--bottomBarHeight);padding-bottom:var(--bottomBarHeight)}', ""], (props) => getWebFont(props.localWebfont), cssVars);
222
+ const GlobalStyle = createGlobalStyle(['html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,button,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:top;}p{vertical-align:baseline;}html{line-height:1;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}ol,ul{list-style:none;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle;}q,blockquote{quotes:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none;}a img{border:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}html{font-size:14px}body{color:#333;font-family:"VodafoneVari","Arial",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1;background:#fff;}*{box-sizing:border-box;}input,textarea{font-family:"VodafoneVari","Arial",sans-serif;border:none;box-shadow:none;max-width:100%;}input:focus{border:none;}hr{margin-block-start:0;}select{-moz-appearance:none;-webkit-appearance:none;appearance:none;}.HideOverflowY{overflow-y:hidden;}.HasObscuringBottomBar{scroll-padding-bottom:var(--bottomBarHeight);padding-bottom:var(--bottomBarHeight)}', ""], cssVars);
226
223
  export {
227
224
  GlobalStyle
228
225
  };
@@ -1,24 +1,7 @@
1
- import { useState, useEffect } from "react";
2
- import { l as largeMediaQuery, m as mediumMediaQuery } from "../../index-Ck2bCrhT.js";
3
- import { useMediaQuery } from "../useMediaQuery/index.js";
4
- const viewportSm = "sm";
5
- const viewportMd = "md";
6
- const viewportLg = "lg";
7
- const useViewport = () => {
8
- const tablet = useMediaQuery(mediumMediaQuery);
9
- const desktop = useMediaQuery(largeMediaQuery);
10
- const [viewportState, setViewportState] = useState(viewportSm);
11
- useEffect(() => {
12
- if (desktop) {
13
- setViewportState(viewportLg);
14
- } else if (tablet) {
15
- setViewportState(viewportMd);
16
- } else {
17
- setViewportState(viewportSm);
18
- }
19
- }, [tablet, desktop]);
20
- return viewportState;
21
- };
1
+ import "react";
2
+ import "../../index-Ck2bCrhT.js";
3
+ import { u } from "../../index-Cs0Hw0dj.js";
4
+ import "../useMediaQuery/index.js";
22
5
  export {
23
- useViewport
6
+ u as useViewport
24
7
  };
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { iv as iconSizeSm } from "./index-Cbojl4_Q.js";
3
- import { c as ButtonIconStyled } from "./styled-CuLmB_mg.js";
3
+ import { c as ButtonIconStyled } from "./styled-BSqC5P9h.js";
4
4
  import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
5
5
  import styled from "styled-components";
6
6
  import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { iv as iconSizeSm } from "./index-Cbojl4_Q.js";
3
- import { l as leftPosition, c as ButtonIconStyled, b as buttonHeight, g as getButtonAppearance, p as primaryAppearance } from "./styled-CuLmB_mg.js";
3
+ import { l as leftPosition, c as ButtonIconStyled, b as buttonHeight, g as getButtonAppearance, p as primaryAppearance } from "./styled-BSqC5P9h.js";
4
4
  import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
5
5
  import styled from "styled-components";
6
6
  import { getBodySize } from "./foundations/token/getBodySize/index.js";