@royaloperahouse/chord 1.3.0 → 1.3.1-b-chord-development
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/CHANGELOG.md +6 -0
- package/README.md +99 -44
- package/dist/chord.cjs.development.js +27 -24
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +27 -24
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +2 -0
- package/package.json +11 -10
- package/README.GIT +0 -122
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## [1.3.1]
|
|
4
|
+
- Enable reduced size textLinks on PromoWithTags/asCard
|
|
5
|
+
|
|
3
6
|
## [1.3.0]
|
|
4
7
|
- Add Static Actvivity Cards as PromoWithTags variant
|
|
5
8
|
|
|
@@ -20,6 +23,9 @@
|
|
|
20
23
|
## [0.7.49]
|
|
21
24
|
- Change button behaviour on stream and DED pages
|
|
22
25
|
|
|
26
|
+
## [0.7.50]
|
|
27
|
+
- Add Static Actvivity Cards
|
|
28
|
+
|
|
23
29
|
## [0.7.48]
|
|
24
30
|
- Add background themes to Information component
|
|
25
31
|
|
package/README.md
CHANGED
|
@@ -1,67 +1,122 @@
|
|
|
1
|
-
# Royal Opera House -
|
|
1
|
+
# Royal Opera House - Front End Design System
|
|
2
2
|
|
|
3
|
-
Welcome to the Royal Opera House
|
|
3
|
+
Welcome to the Royal Opera House Front End Design System, `@royaloperahouse/chord`.
|
|
4
4
|
|
|
5
5
|
This package is a library of UI components intended to be used in the ROH website.
|
|
6
6
|
|
|
7
|
+
It uses React, TypeScript, TSDX and Storybook.
|
|
7
8
|
|
|
8
|
-
##
|
|
9
|
+
## Commands
|
|
10
|
+
|
|
11
|
+
The required package dependencies need to be insalled using `yarn`. Once ready you can issue the following:
|
|
12
|
+
|
|
13
|
+
To run Lint on the package use:
|
|
9
14
|
|
|
10
15
|
```bash
|
|
11
|
-
|
|
16
|
+
yarn lint # you can also use the --fix option to perform automatic fixes
|
|
12
17
|
```
|
|
18
|
+
|
|
19
|
+
To run the unit tests (using Jest) use:
|
|
20
|
+
|
|
13
21
|
```bash
|
|
14
|
-
|
|
22
|
+
yarn test # you can also use the -u option to update snapshots if needed
|
|
15
23
|
```
|
|
16
24
|
|
|
17
|
-
|
|
25
|
+
To run the unit tests (using Jest) and store them for display in storybook use:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
yarn test-storybook # you can also use the -u option to update snapshots if needed
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
To run storybook use:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
yarn storybook
|
|
35
|
+
```
|
|
18
36
|
|
|
19
|
-
|
|
20
|
-
import {
|
|
21
|
-
Footer, GlobalStyles, ThemeProvider, ThemeType,
|
|
22
|
-
} from '@royaloperahouse/chord';
|
|
37
|
+
To build a static version of storybook use:
|
|
23
38
|
|
|
39
|
+
```bash
|
|
40
|
+
yarn build-storybook
|
|
24
41
|
```
|
|
25
|
-
## Sample
|
|
26
|
-
|
|
27
|
-
```javascript
|
|
28
|
-
|
|
29
|
-
import {
|
|
30
|
-
Footer, GlobalStyles, ThemeProvider, ThemeType,
|
|
31
|
-
} from '@royaloperahouse/chord';
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const App = ({ children }: InnerProps): React.ReactElement => (
|
|
35
|
-
<ErrorBoundary>
|
|
36
|
-
<ThemeProvider theme={ThemeType.Core}>
|
|
37
|
-
<GlobalStyles />
|
|
38
|
-
<Wrapper>
|
|
39
|
-
<Header />
|
|
40
|
-
<GlobalStyle />
|
|
41
|
-
<HealthBanner />
|
|
42
|
-
<ErrorBoundary>
|
|
43
|
-
<Content>
|
|
44
|
-
{children}
|
|
45
|
-
</Content>
|
|
46
|
-
</ErrorBoundary>
|
|
47
|
-
<LiveChat />
|
|
48
|
-
</Wrapper>
|
|
49
|
-
<Footer data={footerData} />
|
|
50
|
-
</ThemeProvider>
|
|
51
|
-
</ErrorBoundary>
|
|
52
|
-
);
|
|
53
42
|
|
|
43
|
+
This will create a static copy in `./storybook-static`, and there is an index.html page inside the core directory. This allows the site to be previewed directly in the git repository via serving pages (it needs to be configured for that branch).
|
|
44
|
+
|
|
45
|
+
To deploy the storybook publically:
|
|
46
|
+
|
|
47
|
+
### Prerequisites
|
|
48
|
+
|
|
49
|
+
Make sure you have credentials for the *parent* 'Royal Opera House' AWS account in your `~/.aws/credentials` file. The deploy script expects these to be called `[parent]`.
|
|
50
|
+
|
|
51
|
+
You can get these values at:
|
|
52
|
+
|
|
53
|
+
AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' ->
|
|
54
|
+
'Command line or programmatic access'
|
|
55
|
+
|
|
56
|
+
### Deployment
|
|
57
|
+
|
|
58
|
+
To deploy, first *build* the storybook as above
|
|
59
|
+
|
|
60
|
+
then use:
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
yarn deploy-storybook
|
|
54
64
|
```
|
|
55
65
|
|
|
56
|
-
|
|
66
|
+
This will deploy the contents of `./storybook-static` to S3 as a static site accessible at [chord.roh.org.uk](chord.roh.org.uk)
|
|
67
|
+
|
|
68
|
+
To build the package use:
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
yarn build
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
To release a new version.
|
|
75
|
+
|
|
76
|
+
Release will be published in npm (NPM_TOKEN will be required)
|
|
77
|
+
Storybook will be pushed to bitbucket. *** Push will be done Ensure you don't have things pendint to push
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
MORE INFO TO FOLLOW - PARTICULARLY FOR THE CI SETUP AND HOW PACKAGES ARE PUSHED.
|
|
85
|
+
|
|
86
|
+
# Recommended Use of Package
|
|
87
|
+
|
|
88
|
+
The package is deployed to NPM, and can be installed using yarn or npm:
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
npm i --save @royaloperahouse/chord
|
|
92
|
+
```
|
|
93
|
+
```bash
|
|
94
|
+
yarn add @royaloperahouse/chord
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
# Processes to follow prior to commits
|
|
98
|
+
|
|
99
|
+
Before a commit is made you need to do the following:
|
|
100
|
+
|
|
101
|
+
- Make sure that you are in your own work branch (properly named, including the JIRA ticket number and a short description)
|
|
102
|
+
- `yarn lint` - ensure that you are not introducing errors
|
|
103
|
+
- `yarn test` - ensure that tests are running as expected
|
|
104
|
+
- `yarn test-storybook` - Save the test results to for the static site
|
|
105
|
+
- `yarn build-storybook` - Update the static site
|
|
106
|
+
- Commit your changes in your branch locally
|
|
57
107
|
|
|
58
|
-
|
|
108
|
+
Next, if you are ready to merge into the main development branch then:
|
|
59
109
|
|
|
60
|
-
|
|
110
|
+
- _*ensure that you pull the latest changes from that branch into your new branch, resolving any merge conflicts that may arise*_
|
|
111
|
+
- Commit any merge changes locally
|
|
112
|
+
- Push your branch changes to the origin repo
|
|
113
|
+
- Raise a Pull Request to merge back into the main development branch, AND ensure that the required reviewers are assigned.
|
|
114
|
+
- The reviewers may raise issues, and once resolved, they will be responsible for performing the merge.
|
|
61
115
|
|
|
62
|
-
|
|
116
|
+
### Example
|
|
63
117
|
|
|
118
|
+
There is an example implementation in the example folder. Alternatively there are also integration examples in storybook. Make sure to keep these updated so as to showcase the current components available.
|
|
64
119
|
|
|
65
|
-
|
|
120
|
+
### Bundle analysis
|
|
66
121
|
|
|
67
|
-
|
|
122
|
+
Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visulize it with `yarn analyze`.
|
|
@@ -68,7 +68,7 @@ var devices = {
|
|
|
68
68
|
};
|
|
69
69
|
|
|
70
70
|
var _templateObject;
|
|
71
|
-
var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
|
|
71
|
+
var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color- ", ");\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
|
|
72
72
|
var iconName = _ref.iconName;
|
|
73
73
|
return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
|
|
74
74
|
}, function (_ref2) {
|
|
@@ -571,7 +571,7 @@ var Directions = {
|
|
|
571
571
|
down: 'transform: rotate(90deg)',
|
|
572
572
|
reverse: 'transform: scaleX(-1)'
|
|
573
573
|
};
|
|
574
|
-
var Wrapper = /*#__PURE__*/styled__default.span(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n & svg {\n display: block;\n ", ";\n }\n\n & svg path {\n fill: var(--base-color-", ", ", ");\n }\n"])), function (_ref) {
|
|
574
|
+
var Wrapper = /*#__PURE__*/styled__default.span(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n & svg {\n display: block;\n ", ";\n }\n\n & svg path {\n fill: var(--base-color- ", ", ", ");\n }\n"])), function (_ref) {
|
|
575
575
|
var _ref$direction = _ref.direction,
|
|
576
576
|
direction = _ref$direction === void 0 ? 'right' : _ref$direction;
|
|
577
577
|
return Directions[direction];
|
|
@@ -2158,7 +2158,7 @@ var SecondaryButton = function SecondaryButton(_ref) {
|
|
|
2158
2158
|
};
|
|
2159
2159
|
|
|
2160
2160
|
var _templateObject$5, _templateObject2;
|
|
2161
|
-
var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n"])), function (_ref) {
|
|
2161
|
+
var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color- ", ");\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n"])), function (_ref) {
|
|
2162
2162
|
var color = _ref.color;
|
|
2163
2163
|
return color;
|
|
2164
2164
|
});
|
|
@@ -2210,7 +2210,7 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateO
|
|
|
2210
2210
|
});
|
|
2211
2211
|
|
|
2212
2212
|
var _templateObject$8;
|
|
2213
|
-
var BadgeWrapper = /*#__PURE__*/styled__default.svg(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: auto;\n\n g,\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2213
|
+
var BadgeWrapper = /*#__PURE__*/styled__default.svg(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: auto;\n\n g,\n path {\n fill: var(--base-color- ", ");\n }\n"])), function (_ref) {
|
|
2214
2214
|
var fillColor = _ref.fillColor;
|
|
2215
2215
|
return fillColor;
|
|
2216
2216
|
});
|
|
@@ -2259,7 +2259,7 @@ zLevels.forEach(function (name, index) {
|
|
|
2259
2259
|
|
|
2260
2260
|
var _templateObject$9, _templateObject2$1, _templateObject3;
|
|
2261
2261
|
var TabContainer = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
2262
|
-
var OptionItem = /*#__PURE__*/styled__default.a(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2262
|
+
var OptionItem = /*#__PURE__*/styled__default.a(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color- ", ");\n }\n"])), function (_ref) {
|
|
2263
2263
|
var colorPrimary = _ref.colorPrimary;
|
|
2264
2264
|
return colorPrimary;
|
|
2265
2265
|
});
|
|
@@ -2419,7 +2419,7 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
2419
2419
|
};
|
|
2420
2420
|
|
|
2421
2421
|
var _templateObject$b;
|
|
2422
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2422
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color- ", ");\n }\n"])), function (_ref) {
|
|
2423
2423
|
var fillColor = _ref.fillColor;
|
|
2424
2424
|
return fillColor;
|
|
2425
2425
|
});
|
|
@@ -2870,7 +2870,7 @@ var TabLink = function TabLink(_ref) {
|
|
|
2870
2870
|
};
|
|
2871
2871
|
|
|
2872
2872
|
var _templateObject$i, _templateObject2$6;
|
|
2873
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
2873
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color- ", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
2874
2874
|
var iconName = _ref.iconName;
|
|
2875
2875
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
2876
2876
|
}, function (_ref2) {
|
|
@@ -2902,7 +2902,7 @@ var TextLink = function TextLink(_ref) {
|
|
|
2902
2902
|
};
|
|
2903
2903
|
|
|
2904
2904
|
var _templateObject$j;
|
|
2905
|
-
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2905
|
+
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family- ", ");\n font-feature-settings: var(--font-feature-settings- ", ");\n font-size: var(--font-size- ", "- ", ");\n font-weight: var(--font-weight- ", "- ", ");\n letter-spacing: var(--letter-spacing- ", "- ", ");\n line-height: var(--line-height- ", "- ", ");\n text-transform: var(--text-transform- ", ");\n word-break: var(--word-break- ", ");\n"])), function (_ref) {
|
|
2906
2906
|
var typography = _ref.typography;
|
|
2907
2907
|
return typography;
|
|
2908
2908
|
}, function (_ref2) {
|
|
@@ -3010,15 +3010,15 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3010
3010
|
};
|
|
3011
3011
|
|
|
3012
3012
|
var _templateObject$k, _templateObject2$7, _templateObject3$2;
|
|
3013
|
-
var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(--base-color-", ");\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref) {
|
|
3013
|
+
var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(--base-color- ", ");\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref) {
|
|
3014
3014
|
var dark = _ref.dark;
|
|
3015
3015
|
return dark ? 'white' : 'black';
|
|
3016
3016
|
}, devices.mobileAndTablet);
|
|
3017
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid var(--base-color-", ");\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref2) {
|
|
3017
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid var(--base-color- ", ");\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref2) {
|
|
3018
3018
|
var dark = _ref2.dark;
|
|
3019
3019
|
return dark ? 'white' : 'black';
|
|
3020
3020
|
}, devices.mobile);
|
|
3021
|
-
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(--base-color-", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
3021
|
+
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(--base-color- ", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color- ", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
3022
3022
|
var dark = _ref3.dark;
|
|
3023
3023
|
return dark ? 'white' : 'black';
|
|
3024
3024
|
}, function (_ref4) {
|
|
@@ -3215,7 +3215,7 @@ var _templateObject$p;
|
|
|
3215
3215
|
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
3216
3216
|
|
|
3217
3217
|
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3218
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
3218
|
+
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color- ", ");\n && a {\n color: var(--base-color- ", ");\n }\n && svg path {\n fill: var(--base-color- ", ");\n }\n }\n"])), function (_ref) {
|
|
3219
3219
|
var selected = _ref.selected,
|
|
3220
3220
|
colorPrimary = _ref.colorPrimary;
|
|
3221
3221
|
|
|
@@ -3280,7 +3280,7 @@ var Basket$1 = function Basket(_ref) {
|
|
|
3280
3280
|
};
|
|
3281
3281
|
|
|
3282
3282
|
var _templateObject$r, _templateObject2$b;
|
|
3283
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
3283
|
+
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color- ", ");\n && svg path {\n fill: var(--base-color- ", ");\n }\n }\n"])), function (_ref) {
|
|
3284
3284
|
var selected = _ref.selected,
|
|
3285
3285
|
colorPrimary = _ref.colorPrimary;
|
|
3286
3286
|
|
|
@@ -3576,7 +3576,7 @@ var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$c || (_te
|
|
|
3576
3576
|
|
|
3577
3577
|
return "display: none;";
|
|
3578
3578
|
});
|
|
3579
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
3579
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color- ", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color- ", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
3580
3580
|
var colorPrimary = _ref.colorPrimary;
|
|
3581
3581
|
return colorPrimary;
|
|
3582
3582
|
}, function (_ref2) {
|
|
@@ -4216,7 +4216,7 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
|
|
|
4216
4216
|
var numberOfColumns = type === exports.CarouselType.LargeCard ? 5 : 4;
|
|
4217
4217
|
var gapsSpace = "calc(var(--grid-column-gap) * " + numberOfGaps + ")";
|
|
4218
4218
|
var gapsInMainGraid = 'calc(11 * var(--grid-column-gap))';
|
|
4219
|
-
var calcColumns = "calc(calc(80% -
|
|
4219
|
+
var calcColumns = "calc(calc(80% -" + gapsInMainGraid + ") * " + numberOfColumns + " / 12)";
|
|
4220
4220
|
return "\n & {\n .swiper-slide {\n width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n margin-right: var(--grid-column-gap);\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n ";
|
|
4221
4221
|
} else {
|
|
4222
4222
|
return "\n & {\n .swiper-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n -webkit-transform: translate3d(0, 0, 0);\n\n > div {\n height: calc(" + imagesHeightDesktop + "px + var(--line-height-body-2) + 12px);\n }\n }\n }\n ";
|
|
@@ -4231,7 +4231,7 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
|
|
|
4231
4231
|
var numberOfColumns = 10;
|
|
4232
4232
|
var gapsInMainGraid = 'calc(11 * var(--grid-column-gap))';
|
|
4233
4233
|
var mainGridWidth = 'calc(100% - calc(2 * var(--grid-margin)))';
|
|
4234
|
-
var columnWidth = "calc(calc(" + mainGridWidth + " -
|
|
4234
|
+
var columnWidth = "calc(calc(" + mainGridWidth + " -" + gapsInMainGraid + ") / 12)";
|
|
4235
4235
|
var calcColumns = "calc(" + columnWidth + " * " + numberOfColumns + ")";
|
|
4236
4236
|
var marginRight = active ? "calc(calc(var(--grid-column-gap) * 2) + " + columnWidth + ")" : "calc(calc(" + columnWidth + " * 2) + var(--grid-column-gap))";
|
|
4237
4237
|
return "\n && {\n .swiper-slide {\n width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n margin-right: " + marginRight + ";\n -webkit-transform: translate3d(0, 0, 0);\n }\n }";
|
|
@@ -5698,7 +5698,7 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5698
5698
|
}));
|
|
5699
5699
|
};
|
|
5700
5700
|
|
|
5701
|
-
var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
5701
|
+
var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
5702
5702
|
var LENGTH_TEXT = 28;
|
|
5703
5703
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
5704
5704
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -5766,12 +5766,13 @@ var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$
|
|
|
5766
5766
|
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
5767
5767
|
var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5768
5768
|
var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5769
|
-
var
|
|
5770
|
-
var
|
|
5769
|
+
var PromoWithTagsTextLink = /*#__PURE__*/styled__default(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5770
|
+
var asCardOverrides = /*#__PURE__*/styled.css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n\n ", " {\n font-size: var(--font-size-overline-2);\n font-weight: var(--font-weight-overline-2);\n line-height: var(--line-height-overline-2);\n letter-spacing: var(--letter-spacing-overline-2);\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
|
|
5771
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref10) {
|
|
5771
5772
|
var imageToLeft = _ref10.imageToLeft;
|
|
5772
5773
|
return imageToLeft ? 'left' : 'right';
|
|
5773
5774
|
}, devices.mobile);
|
|
5774
|
-
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(
|
|
5775
|
+
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n\n ", "\n"])), function (_ref11) {
|
|
5775
5776
|
var imageToLeft = _ref11.imageToLeft;
|
|
5776
5777
|
return imageToLeft ? 'right' : 'left';
|
|
5777
5778
|
}, devices.mobile, function (_ref12) {
|
|
@@ -5780,7 +5781,7 @@ var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObje
|
|
|
5780
5781
|
}, function (asCard) {
|
|
5781
5782
|
return asCard && asCardOverrides;
|
|
5782
5783
|
});
|
|
5783
|
-
var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(
|
|
5784
|
+
var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
|
|
5784
5785
|
|
|
5785
5786
|
var _excluded$j = ["text"],
|
|
5786
5787
|
_excluded2$3 = ["text"],
|
|
@@ -5864,12 +5865,14 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5864
5865
|
|
|
5865
5866
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
|
|
5866
5867
|
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
5867
|
-
var textLinkItems = textLinks ? textLinks.map(function (link) {
|
|
5868
|
+
var textLinkItems = textLinks ? textLinks.map(function (link, index) {
|
|
5868
5869
|
var _link$text = link.text,
|
|
5869
5870
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
5870
5871
|
restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
|
|
5871
5872
|
|
|
5872
|
-
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2,
|
|
5873
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
|
|
5874
|
+
key: index
|
|
5875
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTextLink, Object.assign({}, restTextLink), textLinkText));
|
|
5873
5876
|
}) : null;
|
|
5874
5877
|
return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
|
|
5875
5878
|
id: anchorLink,
|
|
@@ -6197,7 +6200,7 @@ var Quote = function Quote(_ref) {
|
|
|
6197
6200
|
};
|
|
6198
6201
|
|
|
6199
6202
|
var _templateObject$V;
|
|
6200
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
6203
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " -", ") calc(", " -", " -", ") repeat(12, minmax(0,1fr)) calc(", " -", " -", ") calc(", " -", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " -", ") repeat(12, minmax(0, 1fr)) calc(", " -", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " -", ") repeat(12, minmax(0, 1fr)) calc(", " -", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
6201
6204
|
var theme = _ref.theme;
|
|
6202
6205
|
return theme.colors.primary;
|
|
6203
6206
|
}, function (_ref2) {
|