@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.
- package/README.md +0 -1
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Button/index.js +2 -2
- package/dist/components/ButtonAsLink/index.js +1 -1
- package/dist/components/ButtonGroup/index.js +1 -1
- package/dist/components/ConsentMessage/index.js +106 -0
- package/dist/components/{GoogleMap/components/ConsentMessage → ConsentMessage}/props.d.ts +12 -3
- package/dist/components/{GoogleMap/components/ConsentMessage → ConsentMessage}/styled.d.ts +4 -3
- package/dist/components/DiscoveryCard/index.js +2 -2
- package/dist/components/DiscoveryCard/styled.d.ts +1 -1
- package/dist/components/DiscoveryCardGroup/index.js +1 -1
- package/dist/components/GoogleMap/index.js +4 -92
- package/dist/components/GoogleMap/mapBackground.d.ts +6 -0
- package/dist/components/GoogleMap/props.d.ts +1 -1
- package/dist/components/IconButton/index.js +1 -1
- package/dist/components/IconSnippet/styled.d.ts +1 -1
- package/dist/components/ImageHeader/index.js +1 -1
- package/dist/components/ImageHeader/styled.d.ts +4 -4
- package/dist/components/InlineLink/index.js +1 -1
- package/dist/components/Link/index.js +1 -1
- package/dist/components/LinkAsButton/index.js +1 -1
- package/dist/components/LinkListItem/index.js +1 -1
- package/dist/components/LinkListItem/styled.d.ts +1 -1
- package/dist/components/PickerGroup/index.js +1 -1
- package/dist/components/Price/styled.d.ts +1 -1
- package/dist/components/ProductCard/index.js +1 -1
- package/dist/components/Rating/assets/StarSVG.d.ts +3 -0
- package/dist/components/Rating/index.d.ts +6 -0
- package/dist/components/Rating/index.js +154 -0
- package/dist/components/Rating/props.d.ts +22 -0
- package/dist/components/Rating/styled.d.ts +6 -0
- package/dist/components/SearchInput/index.js +1 -1
- package/dist/components/Stepper/index.js +1 -1
- package/dist/components/TimeInput/index.d.ts +4 -0
- package/dist/components/TimeInput/index.js +104 -0
- package/dist/components/TimeInput/props.d.ts +13 -0
- package/dist/components/TimeInput/styled.d.ts +6 -0
- package/dist/components/YoutubeVideo/index.d.ts +6 -0
- package/dist/components/YoutubeVideo/index.js +85 -0
- package/dist/components/YoutubeVideo/props.d.ts +40 -0
- package/dist/components/YoutubeVideo/styled.d.ts +3 -0
- package/dist/components/YoutubeVideo/youtubeVideoBackground.d.ts +6 -0
- package/dist/foundations/GlobalStyle/index.d.ts +1 -3
- package/dist/foundations/GlobalStyle/index.js +1 -4
- package/dist/hooks/useViewport/index.js +5 -22
- package/dist/{index-DhnCGoB_.js → index-C5GzK6_0.js} +1 -1
- package/dist/{index-VyKg-44v.js → index-C7meHOM4.js} +1 -1
- package/dist/index-Cs0Hw0dj.js +25 -0
- package/dist/{index-B7B_2CjL.js → index-ZHkR70j3.js} +0 -2
- package/dist/index.d.ts +8 -0
- package/dist/index.js +144 -131
- package/dist/{styled-CuLmB_mg.js → styled-BSqC5P9h.js} +1 -1
- package/package.json +1 -1
- package/dist/components/GoogleMap/components/ConsentMessage/bg.d.ts +0 -6
- /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-
|
|
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 "../../
|
|
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,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,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/ObcTjkjVo7znvv850APutCHTnSW63wRDiCA0gmQgKU73elNfzrTpU71pzc96lC/OrWnzvSoT1vpWv9618cudqx/Pexg97q1u772sxOc7UWPu9znTvduB7zqeM+73vfO9777/e+AD7zg9471/78Xvupe13vixQ72tHM97WhX+9a1Dne3w3zqdY+5A+4++M57/vOgD73oR0/60pv+9KgnfOAPb3YCbL4Rh0+97GdP+9rb/va4z73ulf56RjQdAsAHPgGCP3ziB//4xS8+8oXPfKULf/hOh8DSpe/86E8f+tTPe/YBv/3de//74A//93u/iAQc//zoT7/618/+9rv//fCPv/zn337lvx/77Lf/85uvf/xLf/n/J3UBaH0EWIB/R33dJ34K6HTkpwjmR38QGIESOIEUWIEWeIEYmIEauIEc6H/qp3/893/oV3wJ4AgPyIEomIIquIIs2IIu+IIwaIEl2AgEsAALEHw3aP+DNggBN8iDOdiDPQh8QciD5zeExzeERuh+SaiEMdiETviEUBiFHDiDjFCDOniFWJiFWriFXNiFXviFYBiGYviDOuiDZOiFPmiGOziGQliGbiiEZkiEOQiHOIiEcFiGRIiDebh+cyiFfhiFVLgIVjiGhFiIhniIiJiIiriIjNiIjviIV6iGiCiJa4iFatiGZwiEZCiHWniEepiGBOAIgwiJpFiKpniKqJiKqriKrNiKWBiKjcCDAiAANkiLtWiLV4iLXaiLrtiLvviLwBiMwhiMsMgIEDCLyJiMyriMzNiMzviM0BiN0siMCwCN1biMt9iM1+iM2ziLtViN3fiNtwj/jjqIjOWYi7RojuR4jrnYjlnIi+sohvA4jPTYisW4CMc4jfq4j/zYj/74jwAZkAI5kARZkATZjfu4jQh5jeBojtj4jerokPNoi7zokFtIkfeoCPlokBzZkR75kSAZkiI5kiRZkhwJAY4AAQowiyspjSvZkswIky05kyZZkzZ5kziZkzq5k86Iko2wAAoQlEI5lERZlEZ5lEiZlEq5lEQpAExZlCz5klI5k1PZlFDplEGJlU65lVUpkywZk8n4kssolF/Jk2Z5lmiJjD7JCED5lG75lnAZl3I5l3RZl3Z5l3iZl0iJlVR5lHx5lWLJlVT5l1kpkzAZlchIll95mM3I/5iCyZWJOZZruQhtqZeWeZmYmZmauZmc2Zme+ZmWuQCOUJlC2QAKYJqgmZqquZqs2Zqu+ZqqKZo/2QC0WZu2eZu4mZu6uZu7eZq16Zu8qZvAiZtBeZvD+ZvAmZy0WZynmZzFaZrLCZ3IiZqo6ZtGWZ3L6ZbQCZvc2Z3eeZSyyQgCEJzkWZ7meZ7omZ7quZ7s2Z7umZ7HaZvxGZzKGZ3SSZz2aZzUeZ/82Zz3WZTU6Z/NOZT/SaCluZ8CCprhuQjj+Z4O+qAQGqESOqEUWqEWeqEYmqG2uaCK0KAa+qEgGqIiOqIkWqImyp4C4AgCUAEs2qIu+qIwGqMy2qK0GaMNMP+jLFqjL3qjNnqjPFqjuEmjQmqbOVoBPgqkRpqkRJqjRBqhRnqiUBqlUnqhKdoIK4qjWJqlWrqlXNqlXvqlYBqmYjqmZPqkWKqjRcqkP5qmTPqkPKqkbvqjS3qkQFqbbhqnR4qndrqbevqhVcoIClCmgjqohFqohnqoiJqoirqojDqoN/qnixCojTqplFqplnqpmJqpmiqmkKoICmABoBqqogqqFTCqpnqqpWoBpcqioZqqrbqqqeqqq0qqsRqrtKqqrKqqtAqjuAqrLdqruNqrMyqsv7qpxnqsyJqsXKoAjvCpp/qs0Bqt0jqt1Fqt1nqt2Iqq2bqt0mqr1jqrr3r/q6Pqqro6rr+qq8Vaq8Tqq8JKqu2arsqaqczaCM7KrfZ6r/iar/q6r/zar/76rwB7rbkasN86sBYwr4zQAAS7sAzbsA77sBAbsRI7saeKsIvQAACQsRYAABubsR77sR27sR0Lsh+rsSPLsaNqsh4bqiiLsinrsqBqsjHLsS4Ls9BqsxSbszq7szzbswfrCBhbskI7tERbtEZ7tEibtEq7tEzbtE5Lskd7sjQ7tCNbtTRbtTEbsqLaslmbtRo7tVwLs1zLsjiLsynrs2gbqg0AtE/btm77tnAbt3I7t3Rbt3Z7t04rtU2rtyUrsiLbtyT7t0m7to0QtHh7uIibuIq7/7iM27iO+7hyS7iMUAEfywGVm7GWa7kAoLklm7mby7mYW7SgS7Sj+7alC7mom7qqu7qsS7eSe7GtG7uym7qna7SaywG467mhK7S3K7qXy7S4O7vC67SvqwiGO7zIm7zKu7zMO7zFmwjH27zSO73UW73Wu7TPiwjRe73c273e+72tm72HsL3gW77me77o67biawjkm77u+77wi77rWwjtG7/2e7/4u7zzSwj1m7/++78A7Lj7Owj9G8AGfMAI/LYDLAgFnMAO/MAQXLILHAANHMEWfMEAPMEVjMEc3MHuq8EeHMIibL8gPMImfMLgW8IovMIsLL0q3MIwHMOy+8IyXP/DNizAbHvDOrzDiEvDPPzDQNy2PhzERFzERjvERpzESozEStzEQczEThzFOgzFUlzFMUzFVpzFKIzFWtzFIczFXhzGFwzGYlzGDkzGZpzGAYzGatzG+MvGbhzH7wvHclzH5kvHdpzH3YvHetzH1MvHfhzI+pvDglzId0zIhpzIe4zIitzIf8zIjhzJg1y4klzJzAvIlpzJeIvJmtzJc8vJnhzK6gvJolzKigvKppzKSIvKqtzKQ8vKrhzLGQvLsuzKtFzLqnzLuGzKurzLotzLvuzJwBzMmjzMxGzJxnzMkpzMyuzIzNzMivzM0GzI0jzNglzN1uzH2JzNerzN3Gz/x978zXIczuLsxuRczmp8zuhsxuq8zmLczu7sxfAcz1o8z/RsxfZ8z1Kcz/rsxPzcz0tMygBdyv880EVc0Ab9xAKd0J2M0AzNww790FO80BJdyRFd0TV80Rh9xRS90Y2s0R7NwiAd0lvc0SRdyCN90iOc0ir9xSbd0n3M0jDNwTI902P80jZdxzWd0xC80zx9xjj9023s00J9wERd1Gsc1Ehdxke91P7b1E79xkod1V0M1VQdvyrsAVq91Vzd1V791WAd1mI91mRd1ltdBGid1mq91mzd1m791nAd13I913Rd13Z913id13q913zd12tdBR47wZJaAVJQA4Z92Iid/9iKvdiM3diO/diQHdmGjQKUXdmWfdmYndmavdmc3dme/dmgHdqiPdqkXdqmfdqondqXLQUtarGKsADyqaHzyZ/rOdu9KZzvadu4nZu6XaHPKaW9HaLBDaKzPZzDjZscmggbmZbM3dzO/dzQHd3NOJkOiH5XQAQQ0ANUAAV/2N3e/d3gHd4wCARAAIGBqAgPFwUykAAtAAI+4HOVl3nynW3xXXP1TXT3PXT5LXRd5wRUMAJHQAVUgHANmAgUoGbq7QDtvQNoRgRS8ABOcAVUcAUOcAMKQAUOIAVEsOH+1uEe/uEgHuJvxgEjAAImYAIgcAQ0kGZNYANJYAJQoGbElv8It6XeFLDgftUCLTAEN1AFVFAFD0AFFoADV8ADVVAFLQBiSr7kTN7kTt5aDxAFR2AFAjACKkAAfyUFCUABUrAAu4VMf6TeEdDeU9BHLVAFVwAEQ9ACQdADRBABVbDmTqDjN1Xndn7neJ7nqtQAJnAERDAERyADQuBH5R0BQAAAgrQ/nqPeEkDmnmNlEgABTRcBLqAAEjAAEtB04KVFnN7pTuTpoB7qL4QEMgACIDACSJAAn3MCNjAEKmABoeMINxMDSHAAVCADPAA8ur7rvN7rvn44DUABMjACEFABYYMs/JLsyr7szN7s2mIFVgAq1NEi1F7t1n7t2J7tmfEii5DWFFWhFDGREk9BFVXxEfRgFOHuFN9uEgjx7VEh7vAuFQghElNxFOEO7+4+7yhBFe+u7+ye7/bA7lJR7/ce7/Ie8Pt+8O8O8OMeE+Uu7uve8FThCBeAARZv8Rlw8Rq/8Rzf8R7/8R6f8SA/8iMv8iSP8Sef8hxv8ifP8h/v8iof8ykP8zJf8zZ/8yGP8zrf8TQ/8hdA8Tsf9EI/9ERf9EZ/9Eif9Eq/9Ey/8T/fNVAf9VI/9VRf9VZ/9Vif9Vq/9Vzf9V7/9WAf9mI/9mRf9mZ/9mif9qYQCAA7";
|
|
@@ -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
|
|
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
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
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-
|
|
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-
|
|
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";
|