@vodafone_de/brix-components 3.0.1 → 3.0.2
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/dist/BackgroundColor-JObp_2xA.js +14 -0
- package/dist/BorderColor-BummoQ1-.js +24 -0
- package/dist/BorderRadius-ClUShVLu.js +10 -0
- package/dist/BorderWidth-DfOlyKK7.js +16 -0
- package/dist/CornerStyle-JEbGNArR.js +6 -0
- package/dist/FontWeight-CR22KTex.js +8 -0
- package/dist/HeadingSize-CfCRn3Lh.js +12 -0
- package/dist/IconColor-CtC9WUgr.js +10 -0
- package/dist/ObjectColor-BZDBuV8H.js +22 -0
- package/dist/Opacity-smkGiwsf.js +6 -0
- package/dist/SizeTypes-Ck_RdzIf.js +8 -0
- package/dist/Spacing-D0HQH9YJ.js +16 -0
- package/dist/TextBodySize-BcZR9mh2.js +6 -0
- package/dist/TextColor-BXiR5Uq9.js +16 -0
- package/dist/colorUtils-uLZF5UIN.js +94 -0
- package/dist/components/Accordion/index.js +195 -0
- package/dist/components/AccordionGroup/index.js +59 -0
- package/dist/components/Badge/index.js +11 -0
- package/dist/components/Body/index.js +72 -6
- package/dist/components/BottomBar/index.js +79 -0
- package/dist/components/Button/index.js +24 -0
- package/dist/components/ButtonAsLink/index.js +7 -0
- package/dist/components/ButtonGroup/index.js +34 -0
- package/dist/components/Card/index.js +18 -0
- package/dist/components/Carousel/index.js +497 -0
- package/dist/components/Checkbox/index.js +218 -0
- package/dist/components/CheckboxGroup/index.js +58 -0
- package/dist/components/Collapsible/index.js +85 -0
- package/dist/components/ColorSwatch/index.js +87 -0
- package/dist/components/ColorSwatchGroup/index.js +43 -0
- package/dist/components/Container/index.js +76 -0
- package/dist/components/DateInput/index.js +86 -0
- package/dist/components/DemoBox/index.js +21 -0
- package/dist/components/Dialog/index.js +172 -0
- package/dist/components/DiscoveryCard/index.js +130 -0
- package/dist/components/DiscoveryCardGroup/index.js +53 -0
- package/dist/components/Divider/index.js +30 -0
- package/dist/components/Fieldset/index.js +41 -0
- package/dist/components/FilterGroup/index.js +148 -0
- package/dist/components/Flex/index.js +17 -0
- package/dist/components/FlexItem/index.js +41 -0
- package/dist/components/FootnoteContent/index.js +39 -0
- package/dist/components/FootnoteLink/index.js +46 -0
- package/dist/components/Form/index.js +20 -0
- package/dist/components/FormElement/index.js +31 -0
- package/dist/components/FormHelperLabel/index.js +21 -0
- package/dist/components/FormHelperMessage/index.js +47 -0
- package/dist/components/FormHelperStatusIcon/index.js +50 -0
- package/dist/components/GoogleMap/index.js +196 -0
- package/dist/components/Grid/index.js +39 -0
- package/dist/components/GridItem/index.js +12 -0
- package/dist/components/Heading/index.js +94 -0
- package/dist/components/HifiIcon/index.js +31 -0
- package/dist/components/Icon/index.js +38 -0
- package/dist/components/IconButton/index.js +85 -0
- package/dist/components/IconSnippet/index.js +112 -0
- package/dist/components/IconSnippet/styled.d.ts +1 -1
- package/dist/components/IconSnippetList/index.js +25 -0
- package/dist/components/Image/index.js +84 -0
- package/dist/components/ImageHeader/index.js +262 -0
- package/dist/components/ImageHeader/styled.d.ts +4 -4
- package/dist/components/InlineLink/index.js +43 -0
- package/dist/components/Input/index.js +55 -0
- package/dist/components/Label/index.js +22 -0
- package/dist/components/Legend/index.js +60 -0
- package/dist/components/Link/index.js +19 -0
- package/dist/components/LinkAsButton/index.js +7 -0
- package/dist/components/LinkList/index.js +64 -0
- package/dist/components/LinkListItem/index.js +316 -0
- package/dist/components/LoadingSpinner/index.js +70 -0
- package/dist/components/Notification/index.js +181 -0
- package/dist/components/Overlay/index.js +33 -0
- package/dist/components/PickerGroup/index.js +282 -0
- package/dist/components/Price/index.js +18 -0
- package/dist/components/ProductCard/index.js +81 -0
- package/dist/components/RadioGroup/index.js +197 -0
- package/dist/components/ResponsiveImage/index.js +89 -0
- package/dist/components/RichText/index.js +7 -0
- package/dist/components/ScreenreaderOnly/index.js +6 -0
- package/dist/components/SearchInput/index.js +140 -0
- package/dist/components/SelectInput/index.js +160 -0
- package/dist/components/Stepper/index.js +205 -0
- package/dist/components/SuggestInput/index.js +387 -0
- package/dist/components/Switch/index.js +169 -0
- package/dist/components/TabularPrice/index.js +8 -0
- package/dist/components/TextList/index.js +10 -0
- package/dist/components/Textarea/index.js +156 -0
- package/dist/components/Tray/index.js +218 -0
- package/dist/easing-Dm-pO8SY.js +6 -0
- package/dist/filterProps-Cewck8OH.js +13 -0
- package/dist/foundations/GlobalStyle/index.js +3 -292
- package/dist/foundations/PatternProps/index.js +1 -0
- package/dist/foundations/media-query/forcedColors/index.js +12 -0
- package/dist/foundations/media-query/reducedMotion/index.js +21 -0
- package/dist/foundations/media-query/viewport/index.js +6 -0
- package/dist/foundations/token/getBackgroundColor/index.js +5 -0
- package/dist/foundations/token/getBodySize/index.js +13 -2
- package/dist/foundations/token/getBorderColor/index.js +5 -0
- package/dist/foundations/token/getBorderRadius/index.js +15 -0
- package/dist/foundations/token/getBorderWidth/index.js +19 -0
- package/dist/foundations/token/getBottomSpacing/index.js +14 -0
- package/dist/foundations/token/getFontWeight/index.js +13 -0
- package/dist/foundations/token/getHeadingSize/index.js +27 -0
- package/dist/foundations/token/getHoverColor/index.js +7 -0
- package/dist/foundations/token/getIconColor/index.js +5 -0
- package/dist/foundations/token/getObjectColor/index.js +5 -0
- package/dist/foundations/token/getOpacity/index.js +11 -0
- package/dist/foundations/token/getPressColor/index.js +7 -0
- package/dist/foundations/token/getSpacing/index.js +5 -0
- package/dist/foundations/token/getTextColor/index.js +5 -0
- package/dist/foundations/token/getTextDecoration/index.js +13 -0
- package/dist/getCssVar-BP6T9pFM.js +6 -0
- package/dist/hooks/useFocusWithin/index.js +36 -0
- package/dist/hooks/useForcedColors/index.js +9 -0
- package/dist/hooks/useMediaQuery/index.js +19 -0
- package/dist/hooks/useReducedMotion/index.js +9 -0
- package/dist/hooks/useThirdPartyConsent/index.js +54 -0
- package/dist/hooks/useViewport/index.js +24 -0
- package/dist/index-BXLT6ke-.js +79 -0
- package/dist/index-C4XnzWFL.js +61 -0
- package/dist/index-CeJsIf3Z.js +208 -0
- package/dist/index-Ck2bCrhT.js +32 -0
- package/dist/index-CzTqNQTT.js +79 -0
- package/dist/index-D6hvbziL.js +167 -0
- package/dist/index-DQhtQZ85.js +24 -0
- package/dist/props-Czq9XX2J.js +6 -0
- package/dist/{index-BaPlSfS3.js → renderInlineRichTextFromOpenText-CA52y1-B.js} +3 -105
- package/dist/shadow-u158mzuN.js +4 -0
- package/dist/styled-BpvuD699.js +45 -0
- package/dist/styled-CDWclYAa.js +124 -0
- package/dist/styled-CXSdomF5.js +34 -0
- package/dist/styled-CpoX5USb.js +71 -0
- package/dist/styled-DZo6MwrF.js +245 -0
- package/dist/styled-FNJyDkPV.js +165 -0
- package/dist/styled-Wlt68LfQ.js +133 -0
- package/dist/styled-ZpQohvyx.js +29 -0
- package/dist/tags-DI6H1biK.js +29 -0
- package/package.json +2 -1
- package/dist/index-BoPDwZgt.js +0 -18
|
@@ -0,0 +1,24 @@
|
|
|
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
|
+
};
|
|
22
|
+
export {
|
|
23
|
+
useViewport
|
|
24
|
+
};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { iconSizeSm } from "@vfde-react/inline-icon-library";
|
|
3
|
+
import { c as ButtonIconStyled } from "./styled-FNJyDkPV.js";
|
|
4
|
+
import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-CA52y1-B.js";
|
|
5
|
+
import styled from "styled-components";
|
|
6
|
+
import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
|
|
7
|
+
import { s as spacingMd, b as spacingNone, a as spacingXs } from "./Spacing-D0HQH9YJ.js";
|
|
8
|
+
import { f as filterProps } from "./filterProps-Cewck8OH.js";
|
|
9
|
+
import forcedColors from "./foundations/media-query/forcedColors/index.js";
|
|
10
|
+
import { getBodySize } from "./foundations/token/getBodySize/index.js";
|
|
11
|
+
import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
|
|
12
|
+
import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
|
|
13
|
+
import { getSpacing } from "./foundations/token/getSpacing/index.js";
|
|
14
|
+
import { getTextColor } from "./foundations/token/getTextColor/index.js";
|
|
15
|
+
import { c as colorBorderFocus } from "./BorderColor-BummoQ1-.js";
|
|
16
|
+
import { a as borderWidthFocus } from "./BorderWidth-DfOlyKK7.js";
|
|
17
|
+
import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
|
|
18
|
+
import { f as colorTextBrand } from "./TextColor-BXiR5Uq9.js";
|
|
19
|
+
const getLinkIcon = (icon) => /* @__PURE__ */ jsx(ButtonIconStyled, { name: icon.name, iconPosition: icon.position, size: iconSizeSm });
|
|
20
|
+
const linkBaseCssObject = {
|
|
21
|
+
...forcedColors({
|
|
22
|
+
color: "LinkText"
|
|
23
|
+
}),
|
|
24
|
+
display: "flex",
|
|
25
|
+
width: "fit-content",
|
|
26
|
+
flexWrap: "nowrap",
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
justifyContent: "center",
|
|
29
|
+
cursor: "pointer",
|
|
30
|
+
gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
|
|
31
|
+
...getBodySize(textBodyMd),
|
|
32
|
+
"&:focus-visible": {
|
|
33
|
+
...forcedColors({
|
|
34
|
+
outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
|
|
35
|
+
}),
|
|
36
|
+
boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
|
|
37
|
+
outline: "none",
|
|
38
|
+
textDecoration: "underline"
|
|
39
|
+
},
|
|
40
|
+
color: getTextColor(colorTextBrand),
|
|
41
|
+
"&:visited": {
|
|
42
|
+
...forcedColors({
|
|
43
|
+
color: "VisitedText"
|
|
44
|
+
}),
|
|
45
|
+
color: getTextColor(colorTextBrand)
|
|
46
|
+
},
|
|
47
|
+
background: "transparent",
|
|
48
|
+
textDecoration: "none",
|
|
49
|
+
"&:hover": {
|
|
50
|
+
textDecoration: "underline"
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
const LinkStyled = styled.a.withConfig({
|
|
54
|
+
shouldForwardProp: filterProps(),
|
|
55
|
+
displayName: "LinkStyled",
|
|
56
|
+
componentId: "sc-1eekm6o-0"
|
|
57
|
+
})(linkBaseCssObject, ({
|
|
58
|
+
bottomSpacing = spacingMd
|
|
59
|
+
}) => getBottomSpacing({
|
|
60
|
+
bottomSpacing
|
|
61
|
+
}));
|
|
62
|
+
const LinkAsButtonStyled = styled.button.withConfig({
|
|
63
|
+
shouldForwardProp: filterProps(),
|
|
64
|
+
displayName: "LinkAsButtonStyled",
|
|
65
|
+
componentId: "sc-d0hr7z-0"
|
|
66
|
+
})(linkBaseCssObject, ({
|
|
67
|
+
bottomSpacing = spacingMd
|
|
68
|
+
}) => getBottomSpacing({
|
|
69
|
+
bottomSpacing
|
|
70
|
+
}));
|
|
71
|
+
const LinkAsButton = (props) => /* @__PURE__ */ jsxs(LinkAsButtonStyled, { ...props, children: [
|
|
72
|
+
renderInlineRichTextFromOpenText(props.children),
|
|
73
|
+
getLinkIcon(props.icon)
|
|
74
|
+
] });
|
|
75
|
+
export {
|
|
76
|
+
LinkAsButton as L,
|
|
77
|
+
LinkStyled as a,
|
|
78
|
+
getLinkIcon as g
|
|
79
|
+
};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { iconSizeSm } from "@vfde-react/inline-icon-library";
|
|
3
|
+
import { l as leftPosition, c as ButtonIconStyled, b as buttonHeight, g as getButtonAppearance, p as primaryAppearance } from "./styled-FNJyDkPV.js";
|
|
4
|
+
import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-CA52y1-B.js";
|
|
5
|
+
import styled from "styled-components";
|
|
6
|
+
import { getBodySize } from "./foundations/token/getBodySize/index.js";
|
|
7
|
+
import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
|
|
8
|
+
import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
|
|
9
|
+
import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
|
|
10
|
+
import { getSpacing } from "./foundations/token/getSpacing/index.js";
|
|
11
|
+
import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
|
|
12
|
+
import { b as fontWeightRegular } from "./FontWeight-CR22KTex.js";
|
|
13
|
+
import { a as spacingXs, d as spacingXl, b as spacingNone, s as spacingMd } from "./Spacing-D0HQH9YJ.js";
|
|
14
|
+
import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
|
|
15
|
+
import { f as filterProps } from "./filterProps-Cewck8OH.js";
|
|
16
|
+
const getButtonIcon = (icon) => {
|
|
17
|
+
if (!icon || !icon.name) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
const position = icon.position || leftPosition;
|
|
21
|
+
return /* @__PURE__ */ jsx(ButtonIconStyled, { iconPosition: position, size: iconSizeSm, name: icon.name });
|
|
22
|
+
};
|
|
23
|
+
const ButtonAsLinkStyled = styled.a.withConfig({
|
|
24
|
+
shouldForwardProp: filterProps(),
|
|
25
|
+
displayName: "ButtonAsLinkStyled",
|
|
26
|
+
componentId: "sc-c87xxk-0"
|
|
27
|
+
})({
|
|
28
|
+
appearance: "none",
|
|
29
|
+
display: "flex",
|
|
30
|
+
flexWrap: "nowrap",
|
|
31
|
+
alignItems: "center",
|
|
32
|
+
justifyContent: "center",
|
|
33
|
+
cursor: "pointer",
|
|
34
|
+
gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
|
|
35
|
+
padding: `${getSpacing(spacingXs)} ${getSpacing(spacingXl)}`,
|
|
36
|
+
borderRadius: getBorderRadius(borderRadiusMd),
|
|
37
|
+
fontWeight: getFontWeight(fontWeightRegular),
|
|
38
|
+
height: buttonHeight,
|
|
39
|
+
textDecoration: "none",
|
|
40
|
+
"&:hover": {
|
|
41
|
+
textDecoration: "none"
|
|
42
|
+
}
|
|
43
|
+
}, getBodySize(textBodyMd), ({
|
|
44
|
+
width = "auto"
|
|
45
|
+
}) => ({
|
|
46
|
+
width: "full" === width ? "100%" : "fit-content"
|
|
47
|
+
}), ({
|
|
48
|
+
appearance = primaryAppearance
|
|
49
|
+
}) => getButtonAppearance(appearance), ({
|
|
50
|
+
bottomSpacing = spacingMd
|
|
51
|
+
}) => getBottomSpacing({
|
|
52
|
+
bottomSpacing
|
|
53
|
+
}));
|
|
54
|
+
const ButtonAsLink = (props) => /* @__PURE__ */ jsxs(ButtonAsLinkStyled, { ...props, children: [
|
|
55
|
+
renderInlineRichTextFromOpenText(props.children),
|
|
56
|
+
getButtonIcon(props == null ? void 0 : props.icon)
|
|
57
|
+
] });
|
|
58
|
+
export {
|
|
59
|
+
ButtonAsLink as B,
|
|
60
|
+
getButtonIcon as g
|
|
61
|
+
};
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { S as ScreenreaderOnly } from "./index-DQhtQZ85.js";
|
|
3
|
+
import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-CA52y1-B.js";
|
|
4
|
+
import styled from "styled-components";
|
|
5
|
+
import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
|
|
6
|
+
import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
|
|
7
|
+
import { getHeadingSize } from "./foundations/token/getHeadingSize/index.js";
|
|
8
|
+
import { getSpacing } from "./foundations/token/getSpacing/index.js";
|
|
9
|
+
import { getTextColor } from "./foundations/token/getTextColor/index.js";
|
|
10
|
+
import { getTextDecoration } from "./foundations/token/getTextDecoration/index.js";
|
|
11
|
+
import { f as fontWeightBold, b as fontWeightRegular } from "./FontWeight-CR22KTex.js";
|
|
12
|
+
import { s as spacingMd, b as spacingNone, a as spacingXs } from "./Spacing-D0HQH9YJ.js";
|
|
13
|
+
import { g as colorTextCritical, a as colorTextNeutral } from "./TextColor-BXiR5Uq9.js";
|
|
14
|
+
import { f as filterProps } from "./filterProps-Cewck8OH.js";
|
|
15
|
+
const priceOrientationHorizontal = "horizontal";
|
|
16
|
+
const priceOrientationVertical = "vertical";
|
|
17
|
+
const priceSizeSm = "sm";
|
|
18
|
+
const priceSizeMd = "md";
|
|
19
|
+
const priceSizeLg = "lg";
|
|
20
|
+
const priceAlignLeft = "left";
|
|
21
|
+
const priceAlignCenter = "center";
|
|
22
|
+
const priceDefaultProps = {
|
|
23
|
+
bottomSpacing: spacingMd,
|
|
24
|
+
orientation: priceOrientationVertical,
|
|
25
|
+
align: priceAlignLeft
|
|
26
|
+
};
|
|
27
|
+
const internalizePriceProps = (props) => {
|
|
28
|
+
const {
|
|
29
|
+
orientation,
|
|
30
|
+
align,
|
|
31
|
+
bottomSpacing,
|
|
32
|
+
...rest
|
|
33
|
+
} = props;
|
|
34
|
+
return {
|
|
35
|
+
...rest,
|
|
36
|
+
align,
|
|
37
|
+
bottomSpacing,
|
|
38
|
+
$orientation: orientation
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
const textDecorationStrikethrough = "Strikethrough";
|
|
42
|
+
const PriceOuterWrapperStyled = styled.div.withConfig({
|
|
43
|
+
displayName: "PriceOuterWrapperStyled",
|
|
44
|
+
componentId: "sc-f6y6iv-0"
|
|
45
|
+
})([""]);
|
|
46
|
+
const PriceInnerWrapperStyled = styled.div.withConfig({
|
|
47
|
+
shouldForwardProp: filterProps(["aria-live"]),
|
|
48
|
+
displayName: "PriceInnerWrapperStyled",
|
|
49
|
+
componentId: "sc-f6y6iv-1"
|
|
50
|
+
})(({
|
|
51
|
+
align
|
|
52
|
+
}) => ({
|
|
53
|
+
textAlign: align
|
|
54
|
+
}), ({
|
|
55
|
+
bottomSpacing = spacingMd
|
|
56
|
+
}) => getBottomSpacing({
|
|
57
|
+
bottomSpacing
|
|
58
|
+
}));
|
|
59
|
+
const StrikePriceStyled = styled.div.withConfig({
|
|
60
|
+
displayName: "StrikePriceStyled",
|
|
61
|
+
componentId: "sc-f6y6iv-2"
|
|
62
|
+
})(getHeadingSize("xs"), {
|
|
63
|
+
fontWeight: getFontWeight(fontWeightBold),
|
|
64
|
+
textDecoration: getTextDecoration(textDecorationStrikethrough),
|
|
65
|
+
color: getTextColor(colorTextCritical)
|
|
66
|
+
});
|
|
67
|
+
const PriceOrientationStyled = styled.div.withConfig({
|
|
68
|
+
shouldForwardProp: filterProps(),
|
|
69
|
+
displayName: "PriceOrientationStyled",
|
|
70
|
+
componentId: "sc-f6y6iv-3"
|
|
71
|
+
})(({
|
|
72
|
+
orientation
|
|
73
|
+
}) => {
|
|
74
|
+
if ("horizontal" === orientation) {
|
|
75
|
+
return {
|
|
76
|
+
display: "flex",
|
|
77
|
+
gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
|
|
78
|
+
alignItems: "baseline"
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
return {};
|
|
82
|
+
}, ({
|
|
83
|
+
orientation,
|
|
84
|
+
align
|
|
85
|
+
}) => {
|
|
86
|
+
if ("horizontal" !== orientation) {
|
|
87
|
+
return {};
|
|
88
|
+
}
|
|
89
|
+
return {
|
|
90
|
+
justifyContent: align
|
|
91
|
+
};
|
|
92
|
+
});
|
|
93
|
+
const PriceStyled = styled.div.withConfig({
|
|
94
|
+
shouldForwardProp: filterProps(),
|
|
95
|
+
displayName: "PriceStyled",
|
|
96
|
+
componentId: "sc-f6y6iv-4"
|
|
97
|
+
})(({
|
|
98
|
+
size
|
|
99
|
+
}) => getHeadingSize(size), {
|
|
100
|
+
fontWeight: getFontWeight(fontWeightBold),
|
|
101
|
+
color: getTextColor(colorTextNeutral)
|
|
102
|
+
});
|
|
103
|
+
const PriceSuffixStyled = styled.div.withConfig({
|
|
104
|
+
shouldForwardProp: filterProps(),
|
|
105
|
+
displayName: "PriceSuffixStyled",
|
|
106
|
+
componentId: "sc-f6y6iv-5"
|
|
107
|
+
})(getHeadingSize("xs"), {
|
|
108
|
+
color: getTextColor(colorTextNeutral)
|
|
109
|
+
});
|
|
110
|
+
const isTabularPriceProp = (props) => {
|
|
111
|
+
return props.component === "TabularPrice";
|
|
112
|
+
};
|
|
113
|
+
const createScreenReaderText = (price, strikePrice, suffix) => {
|
|
114
|
+
if (!strikePrice) {
|
|
115
|
+
return `${price} ${suffix}`;
|
|
116
|
+
}
|
|
117
|
+
return `Standardpreis ${strikePrice} - Angebotspreis ${price} ${suffix}`;
|
|
118
|
+
};
|
|
119
|
+
const Price = (props) => {
|
|
120
|
+
if (isTabularPriceProp(props)) {
|
|
121
|
+
return /* @__PURE__ */ jsx(TabularPrice, { ...props });
|
|
122
|
+
}
|
|
123
|
+
const {
|
|
124
|
+
orientation = priceOrientationVertical,
|
|
125
|
+
align = priceAlignLeft,
|
|
126
|
+
prefix,
|
|
127
|
+
price,
|
|
128
|
+
offerProductName,
|
|
129
|
+
...priceProps
|
|
130
|
+
} = props;
|
|
131
|
+
const priceToRender = prefix ? `${prefix} ${price}` : price;
|
|
132
|
+
return /* @__PURE__ */ jsxs(PriceOuterWrapperStyled, { className: props.className, ...{
|
|
133
|
+
"aria-live": props["aria-live"]
|
|
134
|
+
}, children: [
|
|
135
|
+
offerProductName && /* @__PURE__ */ jsx("meta", { itemProp: "name", content: offerProductName }),
|
|
136
|
+
/* @__PURE__ */ jsx(ScreenreaderOnly, { children: createScreenReaderText(props.price, props.strikePrice, props.suffix) }),
|
|
137
|
+
/* @__PURE__ */ jsxs(PriceInnerWrapperStyled, { ...priceProps, orientation, align, ...{
|
|
138
|
+
"aria-hidden": true
|
|
139
|
+
}, itemProp: offerProductName ? "offers" : void 0, itemType: offerProductName ? "https://schema.org/Offer" : void 0, itemScope: offerProductName ? true : void 0, children: [
|
|
140
|
+
offerProductName && /* @__PURE__ */ jsx("meta", { itemProp: "priceCurrency", content: "EUR" }),
|
|
141
|
+
props.strikePrice ? /* @__PURE__ */ jsx(StrikePriceStyled, { children: renderInlineRichTextFromOpenText(priceProps.strikePrice) }) : null,
|
|
142
|
+
/* @__PURE__ */ jsxs(PriceOrientationStyled, { orientation, align, itemProp: offerProductName ? "price" : void 0, content: offerProductName ? price : void 0, children: [
|
|
143
|
+
/* @__PURE__ */ jsx(PriceStyled, { size: priceProps.size, children: renderInlineRichTextFromOpenText(priceToRender) }),
|
|
144
|
+
/* @__PURE__ */ jsx(PriceSuffixStyled, { children: renderInlineRichTextFromOpenText(priceProps.suffix) })
|
|
145
|
+
] })
|
|
146
|
+
] })
|
|
147
|
+
] });
|
|
148
|
+
};
|
|
149
|
+
const TabularPriceInnerWrapperStyled = styled.div.withConfig({
|
|
150
|
+
shouldForwardProp: filterProps(["aria-live"]),
|
|
151
|
+
displayName: "TabularPriceInnerWrapperStyled",
|
|
152
|
+
componentId: "sc-142fiyo-0"
|
|
153
|
+
})({
|
|
154
|
+
display: "flex",
|
|
155
|
+
flexDirection: "row",
|
|
156
|
+
alignItems: "baseline",
|
|
157
|
+
gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`
|
|
158
|
+
}, ({
|
|
159
|
+
bottomSpacing = spacingMd
|
|
160
|
+
}) => getBottomSpacing({
|
|
161
|
+
bottomSpacing
|
|
162
|
+
}));
|
|
163
|
+
const TabularPricePrefixStyled = styled.div.withConfig({
|
|
164
|
+
shouldForwardProp: filterProps(),
|
|
165
|
+
displayName: "TabularPricePrefixStyled",
|
|
166
|
+
componentId: "sc-142fiyo-1"
|
|
167
|
+
})(getHeadingSize("xs"), {
|
|
168
|
+
flexGrow: 1,
|
|
169
|
+
color: getTextColor(colorTextNeutral)
|
|
170
|
+
}, ({
|
|
171
|
+
prefixWeight = fontWeightRegular
|
|
172
|
+
}) => ({
|
|
173
|
+
fontWeight: getFontWeight(prefixWeight)
|
|
174
|
+
}));
|
|
175
|
+
const TabularPrice = ({
|
|
176
|
+
prefixWeight,
|
|
177
|
+
offerProductName,
|
|
178
|
+
...props
|
|
179
|
+
}) => {
|
|
180
|
+
return /* @__PURE__ */ jsxs(PriceOuterWrapperStyled, { className: props.className, ...{
|
|
181
|
+
"aria-live": props["aria-live"]
|
|
182
|
+
}, children: [
|
|
183
|
+
offerProductName && /* @__PURE__ */ jsx("meta", { itemProp: "name", content: offerProductName }),
|
|
184
|
+
/* @__PURE__ */ jsx(ScreenreaderOnly, { children: createScreenReaderText(props.price, props.strikePrice, props.prefix) }),
|
|
185
|
+
/* @__PURE__ */ jsxs(TabularPriceInnerWrapperStyled, { ...props, ...{
|
|
186
|
+
"aria-hidden": true
|
|
187
|
+
}, itemProp: offerProductName ? "offers" : void 0, itemType: offerProductName ? "https://schema.org/Offer" : void 0, itemScope: offerProductName ? true : void 0, children: [
|
|
188
|
+
offerProductName && /* @__PURE__ */ jsx("meta", { itemProp: "priceCurrency", content: "EUR" }),
|
|
189
|
+
/* @__PURE__ */ jsx(TabularPricePrefixStyled, { prefixWeight, children: props.prefix }),
|
|
190
|
+
props.strikePrice ? /* @__PURE__ */ jsx(StrikePriceStyled, { children: renderInlineRichTextFromOpenText(props.strikePrice) }) : null,
|
|
191
|
+
/* @__PURE__ */ jsx(PriceStyled, { size: props.size, itemProp: offerProductName ? "price" : void 0, content: offerProductName ? props.price : void 0, children: renderInlineRichTextFromOpenText(props.price) })
|
|
192
|
+
] })
|
|
193
|
+
] });
|
|
194
|
+
};
|
|
195
|
+
export {
|
|
196
|
+
Price as P,
|
|
197
|
+
TabularPrice as T,
|
|
198
|
+
priceAlignCenter as a,
|
|
199
|
+
priceOrientationVertical as b,
|
|
200
|
+
priceSizeSm as c,
|
|
201
|
+
priceAlignLeft as d,
|
|
202
|
+
createScreenReaderText as e,
|
|
203
|
+
priceOrientationHorizontal as f,
|
|
204
|
+
priceSizeLg as g,
|
|
205
|
+
priceDefaultProps as h,
|
|
206
|
+
internalizePriceProps as i,
|
|
207
|
+
priceSizeMd as p
|
|
208
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
const breakpoint_medium_number = 768;
|
|
2
|
+
const breakpoint_medium = `${breakpoint_medium_number}px`;
|
|
3
|
+
const breakpoint_large_number = 1025;
|
|
4
|
+
const breakpoint_large = `${breakpoint_large_number}px`;
|
|
5
|
+
const mediumMediaQuery = `screen and (min-width: ${breakpoint_medium})`;
|
|
6
|
+
const largeMediaQuery = `screen and (min-width: ${breakpoint_large})`;
|
|
7
|
+
const md = (stylesInViewport) => {
|
|
8
|
+
return {
|
|
9
|
+
[`@media ${mediumMediaQuery}`]: {
|
|
10
|
+
...stylesInViewport
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
const lg = (stylesInViewport) => {
|
|
15
|
+
return {
|
|
16
|
+
[`@media ${largeMediaQuery}`]: {
|
|
17
|
+
...stylesInViewport
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
const viewport = {
|
|
22
|
+
md,
|
|
23
|
+
lg
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
breakpoint_large as a,
|
|
27
|
+
breakpoint_medium_number as b,
|
|
28
|
+
breakpoint_medium as c,
|
|
29
|
+
largeMediaQuery as l,
|
|
30
|
+
mediumMediaQuery as m,
|
|
31
|
+
viewport as v
|
|
32
|
+
};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { IconLoader, iconSizeXs, iconSizeSm } from "@vfde-react/inline-icon-library";
|
|
3
|
+
import { a as spacingXs, e as spacing2Xs, c as spacingSm, s as spacingMd } from "./Spacing-D0HQH9YJ.js";
|
|
4
|
+
import { s as smallSize, m as mediumSize } from "./SizeTypes-Ck_RdzIf.js";
|
|
5
|
+
import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-CA52y1-B.js";
|
|
6
|
+
import styled from "styled-components";
|
|
7
|
+
import forcedColors from "./foundations/media-query/forcedColors/index.js";
|
|
8
|
+
import { getBodySize } from "./foundations/token/getBodySize/index.js";
|
|
9
|
+
import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
|
|
10
|
+
import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
|
|
11
|
+
import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
|
|
12
|
+
import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
|
|
13
|
+
import { getSpacing } from "./foundations/token/getSpacing/index.js";
|
|
14
|
+
import { c as borderRadiusFull } from "./BorderRadius-ClUShVLu.js";
|
|
15
|
+
import { f as fontWeightBold } from "./FontWeight-CR22KTex.js";
|
|
16
|
+
import { a as textBodySm, t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
|
|
17
|
+
import { g as getForegroundColor } from "./colorUtils-uLZF5UIN.js";
|
|
18
|
+
import { f as filterProps } from "./filterProps-Cewck8OH.js";
|
|
19
|
+
import { e as colorObjectSuccess, f as colorObjectNeutral, g as colorObjectAccent, c as colorObjectBrand } from "./ObjectColor-BZDBuV8H.js";
|
|
20
|
+
const BadgeAppearanceColor = {
|
|
21
|
+
primary: colorObjectBrand,
|
|
22
|
+
secondary: colorObjectAccent,
|
|
23
|
+
tertiary: colorObjectNeutral,
|
|
24
|
+
success: colorObjectSuccess
|
|
25
|
+
};
|
|
26
|
+
const BadgeStyled = styled.span.withConfig({
|
|
27
|
+
shouldForwardProp: filterProps(),
|
|
28
|
+
displayName: "BadgeStyled",
|
|
29
|
+
componentId: "sc-zs45ak-0"
|
|
30
|
+
})({
|
|
31
|
+
display: "inline-flex",
|
|
32
|
+
alignItems: "center",
|
|
33
|
+
whiteSpace: "nowrap",
|
|
34
|
+
maxWidth: "100%",
|
|
35
|
+
width: "max-content",
|
|
36
|
+
gap: getSpacing(spacingXs),
|
|
37
|
+
borderRadius: getBorderRadius(borderRadiusFull),
|
|
38
|
+
fontWeight: getFontWeight(fontWeightBold),
|
|
39
|
+
overflow: "hidden"
|
|
40
|
+
}, ({
|
|
41
|
+
size = mediumSize
|
|
42
|
+
}) => {
|
|
43
|
+
if (smallSize === size) {
|
|
44
|
+
return {
|
|
45
|
+
padding: `${getSpacing(spacing2Xs)} ${getSpacing(spacingSm)}`,
|
|
46
|
+
...getBodySize(textBodySm)
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
return {
|
|
50
|
+
...getBodySize(textBodyMd),
|
|
51
|
+
padding: `${getSpacing(spacing2Xs)} ${getSpacing(spacingMd)}`
|
|
52
|
+
};
|
|
53
|
+
}, ({
|
|
54
|
+
appearance = "primary"
|
|
55
|
+
}) => {
|
|
56
|
+
const backgroundColor = getObjectColor(BadgeAppearanceColor[appearance]);
|
|
57
|
+
const foregroundColor = getForegroundColor(BadgeAppearanceColor[appearance]);
|
|
58
|
+
return {
|
|
59
|
+
...forcedColors({
|
|
60
|
+
background: "CanvasText",
|
|
61
|
+
color: "Canvas"
|
|
62
|
+
}),
|
|
63
|
+
background: backgroundColor,
|
|
64
|
+
color: foregroundColor
|
|
65
|
+
};
|
|
66
|
+
}, getBottomSpacing);
|
|
67
|
+
const Badge = ({
|
|
68
|
+
children,
|
|
69
|
+
bottomSpacing = spacingMd,
|
|
70
|
+
...props
|
|
71
|
+
}) => /* @__PURE__ */ jsxs(BadgeStyled, { ...props, bottomSpacing, children: [
|
|
72
|
+
props.icon ? /* @__PURE__ */ jsx(IconLoader, { name: props.icon, size: props.size === smallSize ? iconSizeXs : iconSizeSm }) : null,
|
|
73
|
+
renderInlineRichTextFromOpenText(children)
|
|
74
|
+
] });
|
|
75
|
+
export {
|
|
76
|
+
Badge as B,
|
|
77
|
+
BadgeStyled as a,
|
|
78
|
+
BadgeAppearanceColor as b
|
|
79
|
+
};
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { cloneElement } from "react";
|
|
3
|
+
import { p as parse, l as libExports, r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-CA52y1-B.js";
|
|
4
|
+
import Body from "./components/Body/index.js";
|
|
5
|
+
import FootnoteLink from "./components/FootnoteLink/index.js";
|
|
6
|
+
import Heading from "./components/Heading/index.js";
|
|
7
|
+
import InlineLink from "./components/InlineLink/index.js";
|
|
8
|
+
import { f as headingHtmlTags, o as olTagName, g as strongTagName, i as supTagName, u as ulTagName } from "./tags-DI6H1biK.js";
|
|
9
|
+
import { s as spacingMd, b as spacingNone } from "./Spacing-D0HQH9YJ.js";
|
|
10
|
+
import styled from "styled-components";
|
|
11
|
+
import { getBodySize } from "./foundations/token/getBodySize/index.js";
|
|
12
|
+
import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
|
|
13
|
+
import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
|
|
14
|
+
import { getSpacing } from "./foundations/token/getSpacing/index.js";
|
|
15
|
+
import { b as fontWeightRegular } from "./FontWeight-CR22KTex.js";
|
|
16
|
+
import { a as textBodySm, t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
|
|
17
|
+
import { f as filterProps } from "./filterProps-Cewck8OH.js";
|
|
18
|
+
import { t as textHeadingXs, b as textHeadingSm, a as textHeadingMd, c as textHeadingLg, d as textHeadingXl } from "./HeadingSize-CfCRn3Lh.js";
|
|
19
|
+
import { v4 } from "uuid";
|
|
20
|
+
const getUid = () => {
|
|
21
|
+
return v4();
|
|
22
|
+
};
|
|
23
|
+
const mapSizeToTag = {
|
|
24
|
+
h1: textHeadingXl,
|
|
25
|
+
h2: textHeadingLg,
|
|
26
|
+
h3: textHeadingMd,
|
|
27
|
+
h4: textHeadingSm,
|
|
28
|
+
h5: textHeadingXs,
|
|
29
|
+
h6: textHeadingXs
|
|
30
|
+
};
|
|
31
|
+
const getOptions = (paragraphSpacing, additionalProps = {}) => {
|
|
32
|
+
const options = {
|
|
33
|
+
replace(domNode) {
|
|
34
|
+
if (domNode instanceof libExports.Element) {
|
|
35
|
+
if (headingHtmlTags.includes(domNode.name)) {
|
|
36
|
+
return /* @__PURE__ */ jsx(Heading, { ...additionalProps.heading, size: mapSizeToTag[domNode.name], bottomSpacing: paragraphSpacing, children: libExports.domToReact(domNode.children, options) });
|
|
37
|
+
}
|
|
38
|
+
if ("li" === domNode.name) {
|
|
39
|
+
return /* @__PURE__ */ jsx(TextListItem, { ...additionalProps.li, children: libExports.domToReact(domNode.children, options) });
|
|
40
|
+
}
|
|
41
|
+
if ("ol" === domNode.name) {
|
|
42
|
+
return /* @__PURE__ */ jsx(TextList, { ...additionalProps.ol, tag: olTagName, children: libExports.domToReact(domNode.children, options) });
|
|
43
|
+
}
|
|
44
|
+
if ("ul" === domNode.name) {
|
|
45
|
+
return /* @__PURE__ */ jsx(TextList, { ...additionalProps.ul, children: libExports.domToReact(domNode.children, options) });
|
|
46
|
+
}
|
|
47
|
+
if ("strong" === domNode.name) {
|
|
48
|
+
return /* @__PURE__ */ jsx(Body, { ...additionalProps.strong, tag: strongTagName, children: libExports.domToReact(domNode.children, options) });
|
|
49
|
+
}
|
|
50
|
+
if ("small" === domNode.name) {
|
|
51
|
+
return /* @__PURE__ */ jsx(Body, { ...additionalProps.small, size: textBodySm, children: libExports.domToReact(domNode.children, options) });
|
|
52
|
+
}
|
|
53
|
+
if ("sup" === domNode.name) {
|
|
54
|
+
return /* @__PURE__ */ jsx(Body, { ...additionalProps.sup, tag: supTagName, children: libExports.domToReact(domNode.children, options) });
|
|
55
|
+
}
|
|
56
|
+
if ("p" === domNode.name) {
|
|
57
|
+
return /* @__PURE__ */ jsx(Body, { ...additionalProps.p, bottomSpacing: paragraphSpacing, children: libExports.domToReact(domNode.children, options) });
|
|
58
|
+
}
|
|
59
|
+
if ("a" === domNode.name) {
|
|
60
|
+
const linkLabel = libExports.domToReact(domNode.children, options);
|
|
61
|
+
const isNumber = parseInt(linkLabel, 10);
|
|
62
|
+
const href = domNode.attribs.href;
|
|
63
|
+
const isAnchor = href.indexOf("#") === 0;
|
|
64
|
+
if (!isNaN(isNumber) && isAnchor) {
|
|
65
|
+
return /* @__PURE__ */ jsx(FootnoteLink, { uid: getUid(), contentUid: href.replace("#", ""), screenReaderLabel: "Details zur Fußnote", children: linkLabel });
|
|
66
|
+
}
|
|
67
|
+
return /* @__PURE__ */ jsx(InlineLink, { ...additionalProps.a, href: domNode.attribs.href, children: libExports.domToReact(domNode.children, options) });
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
return options;
|
|
73
|
+
};
|
|
74
|
+
const parseHtml = (html, paragraphSpacing, tagProps = {}) => {
|
|
75
|
+
const parsed = parse(html, getOptions(paragraphSpacing, tagProps));
|
|
76
|
+
return parsed;
|
|
77
|
+
};
|
|
78
|
+
const RichText = ({
|
|
79
|
+
html,
|
|
80
|
+
paragraphSpacing,
|
|
81
|
+
bottomSpacing,
|
|
82
|
+
tagProps = {}
|
|
83
|
+
}) => {
|
|
84
|
+
let parsedHtml = parseHtml(html, paragraphSpacing, tagProps);
|
|
85
|
+
if (parsedHtml && typeof parsedHtml !== "string" && bottomSpacing) {
|
|
86
|
+
if (!Array.isArray(parsedHtml)) {
|
|
87
|
+
parsedHtml = [parsedHtml];
|
|
88
|
+
}
|
|
89
|
+
if (Array.isArray(parsedHtml)) {
|
|
90
|
+
parsedHtml[parsedHtml.length - 1] = cloneElement(parsedHtml[parsedHtml.length - 1], {
|
|
91
|
+
bottomSpacing
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
return /* @__PURE__ */ jsx(Fragment, { children: parsedHtml });
|
|
96
|
+
};
|
|
97
|
+
const TextListItemStyled = styled.li.withConfig({
|
|
98
|
+
shouldForwardProp: filterProps(),
|
|
99
|
+
displayName: "TextListItemStyled",
|
|
100
|
+
componentId: "sc-e2ohp8-0"
|
|
101
|
+
})({
|
|
102
|
+
display: "list-item",
|
|
103
|
+
marginBottom: getSpacing(spacingMd)
|
|
104
|
+
}, ({
|
|
105
|
+
bottomSpacing = spacingNone
|
|
106
|
+
}) => getBottomSpacing({
|
|
107
|
+
bottomSpacing
|
|
108
|
+
}));
|
|
109
|
+
const TextListStyled = styled.ul.withConfig({
|
|
110
|
+
shouldForwardProp: filterProps(),
|
|
111
|
+
displayName: "TextListStyled",
|
|
112
|
+
componentId: "sc-e2ohp8-1"
|
|
113
|
+
})({
|
|
114
|
+
display: "block",
|
|
115
|
+
marginBlockStart: "0px",
|
|
116
|
+
marginBlockEnd: "0px",
|
|
117
|
+
marginInlineStart: "0px",
|
|
118
|
+
marginInlineEnd: "0px",
|
|
119
|
+
paddingInlineStart: getSpacing(spacingMd),
|
|
120
|
+
marginBottom: getSpacing(spacingMd)
|
|
121
|
+
}, ({
|
|
122
|
+
as
|
|
123
|
+
}) => ({
|
|
124
|
+
listStyleType: olTagName === as ? "decimal" : "disc"
|
|
125
|
+
}), ({
|
|
126
|
+
size = textBodyMd
|
|
127
|
+
}) => getBodySize(size), ({
|
|
128
|
+
weight = fontWeightRegular
|
|
129
|
+
}) => {
|
|
130
|
+
return {
|
|
131
|
+
fontWeight: getFontWeight(weight)
|
|
132
|
+
};
|
|
133
|
+
}, ({
|
|
134
|
+
bottomSpacing = spacingMd
|
|
135
|
+
}) => getBottomSpacing({
|
|
136
|
+
bottomSpacing
|
|
137
|
+
}));
|
|
138
|
+
const TextListItem = ({
|
|
139
|
+
children,
|
|
140
|
+
...props
|
|
141
|
+
}) => /* @__PURE__ */ jsx(TextListItemStyled, { ...props, children });
|
|
142
|
+
const TextList = ({
|
|
143
|
+
items,
|
|
144
|
+
children,
|
|
145
|
+
bottomSpacing,
|
|
146
|
+
itemSpacing,
|
|
147
|
+
tag = ulTagName,
|
|
148
|
+
...props
|
|
149
|
+
}) => {
|
|
150
|
+
const getContent = (items2, children2) => {
|
|
151
|
+
if (items2) {
|
|
152
|
+
return items2.map(function(item) {
|
|
153
|
+
return /* @__PURE__ */ jsx(TextListItem, { bottomSpacing: itemSpacing || item.bottomSpacing, children: "string" === typeof item.children ? /* @__PURE__ */ jsx(RichText, { html: item.children }) : renderInlineRichTextFromOpenText(item.children) }, item.uid);
|
|
154
|
+
});
|
|
155
|
+
} else if (children2) {
|
|
156
|
+
return children2;
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
bottomSpacing = itemSpacing ? spacingNone : bottomSpacing;
|
|
160
|
+
return /* @__PURE__ */ jsx(TextListStyled, { ...props, bottomSpacing, as: tag, children: getContent(items, children) });
|
|
161
|
+
};
|
|
162
|
+
export {
|
|
163
|
+
RichText as R,
|
|
164
|
+
TextListItem as T,
|
|
165
|
+
TextList as a,
|
|
166
|
+
getUid as g
|
|
167
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { f as filterProps } from "./filterProps-Cewck8OH.js";
|
|
4
|
+
const screenreaderOnly = {
|
|
5
|
+
position: "absolute",
|
|
6
|
+
left: "-10000px",
|
|
7
|
+
top: "auto",
|
|
8
|
+
width: "1px",
|
|
9
|
+
height: "1px",
|
|
10
|
+
overflow: "hidden"
|
|
11
|
+
};
|
|
12
|
+
const ScreenReaderOnlyStyled = styled.div.withConfig({
|
|
13
|
+
shouldForwardProp: filterProps(),
|
|
14
|
+
displayName: "ScreenReaderOnlyStyled",
|
|
15
|
+
componentId: "sc-1r7az4k-0"
|
|
16
|
+
})(screenreaderOnly);
|
|
17
|
+
const ScreenreaderOnly = ({
|
|
18
|
+
children,
|
|
19
|
+
...props
|
|
20
|
+
}) => /* @__PURE__ */ jsx(ScreenReaderOnlyStyled, { ...props, children });
|
|
21
|
+
export {
|
|
22
|
+
ScreenreaderOnly as S,
|
|
23
|
+
screenreaderOnly as s
|
|
24
|
+
};
|