@royaloperahouse/chord 1.3.0 → 1.3.1-c-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 +30 -21
- 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 +30 -21
- 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 // eslint-disable-next-line\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 // eslint-disable-next-line\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 // eslint-disable-next-line\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 // eslint-disable-next-line\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 // eslint-disable-next-line\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 // eslint-disable-next-line\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 // eslint-disable-next-line\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,6 +2902,8 @@ var TextLink = function TextLink(_ref) {
|
|
|
2902
2902
|
};
|
|
2903
2903
|
|
|
2904
2904
|
var _templateObject$j;
|
|
2905
|
+
/* eslint-disable */
|
|
2906
|
+
|
|
2905
2907
|
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
2908
|
var typography = _ref.typography;
|
|
2907
2909
|
return typography;
|
|
@@ -3010,15 +3012,15 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3010
3012
|
};
|
|
3011
3013
|
|
|
3012
3014
|
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) {
|
|
3015
|
+
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 // eslint-disable-next-line\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
3016
|
var dark = _ref.dark;
|
|
3015
3017
|
return dark ? 'white' : 'black';
|
|
3016
3018
|
}, 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) {
|
|
3019
|
+
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 // eslint-disable-next-line\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
3020
|
var dark = _ref2.dark;
|
|
3019
3021
|
return dark ? 'white' : 'black';
|
|
3020
3022
|
}, 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) {
|
|
3023
|
+
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n // eslint-disable-next-line\n background-color: var(--base-color- ", ");\n & svg {\n display: block;\n path {\n // eslint-disable-next-line\n fill: var(--base-color- ", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
3022
3024
|
var dark = _ref3.dark;
|
|
3023
3025
|
return dark ? 'white' : 'black';
|
|
3024
3026
|
}, function (_ref4) {
|
|
@@ -3215,7 +3217,9 @@ var _templateObject$p;
|
|
|
3215
3217
|
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
3218
|
|
|
3217
3219
|
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3218
|
-
|
|
3220
|
+
/* eslint-disable keyword-spacing */
|
|
3221
|
+
|
|
3222
|
+
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 /* eslint-disable */\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
3223
|
var selected = _ref.selected,
|
|
3220
3224
|
colorPrimary = _ref.colorPrimary;
|
|
3221
3225
|
|
|
@@ -3234,6 +3238,8 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_te
|
|
|
3234
3238
|
var colorPrimary = _ref4.colorPrimary;
|
|
3235
3239
|
return colorPrimary;
|
|
3236
3240
|
});
|
|
3241
|
+
/* eslint-enable */
|
|
3242
|
+
|
|
3237
3243
|
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
3238
3244
|
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
3239
3245
|
var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
@@ -3280,7 +3286,7 @@ var Basket$1 = function Basket(_ref) {
|
|
|
3280
3286
|
};
|
|
3281
3287
|
|
|
3282
3288
|
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
|
|
3289
|
+
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 /* eslint-disable */\n :hover {\n border-bottom: 1px solid var(--base-color- ", ");\n && svg path {\n fill: var(--base-color- ", ");\n }\n }\n /* eslint-enable */\n"])), function (_ref) {
|
|
3284
3290
|
var selected = _ref.selected,
|
|
3285
3291
|
colorPrimary = _ref.colorPrimary;
|
|
3286
3292
|
|
|
@@ -3576,7 +3582,7 @@ var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$c || (_te
|
|
|
3576
3582
|
|
|
3577
3583
|
return "display: none;";
|
|
3578
3584
|
});
|
|
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) {
|
|
3585
|
+
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 // eslint-disable-next-line\n color: var(--base-color- ", ");\n }\n }\n\n :hover {\n && svg path {\n // eslint-disable-next-line\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
3586
|
var colorPrimary = _ref.colorPrimary;
|
|
3581
3587
|
return colorPrimary;
|
|
3582
3588
|
}, function (_ref2) {
|
|
@@ -5698,7 +5704,7 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5698
5704
|
}));
|
|
5699
5705
|
};
|
|
5700
5706
|
|
|
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;
|
|
5707
|
+
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
5708
|
var LENGTH_TEXT = 28;
|
|
5703
5709
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
5704
5710
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -5766,12 +5772,13 @@ var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$
|
|
|
5766
5772
|
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
5773
|
var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5768
5774
|
var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5769
|
-
var
|
|
5770
|
-
var
|
|
5775
|
+
var PromoWithTagsTextLink = /*#__PURE__*/styled__default(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5776
|
+
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);
|
|
5777
|
+
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
5778
|
var imageToLeft = _ref10.imageToLeft;
|
|
5772
5779
|
return imageToLeft ? 'left' : 'right';
|
|
5773
5780
|
}, devices.mobile);
|
|
5774
|
-
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(
|
|
5781
|
+
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
5782
|
var imageToLeft = _ref11.imageToLeft;
|
|
5776
5783
|
return imageToLeft ? 'right' : 'left';
|
|
5777
5784
|
}, devices.mobile, function (_ref12) {
|
|
@@ -5780,7 +5787,7 @@ var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObje
|
|
|
5780
5787
|
}, function (asCard) {
|
|
5781
5788
|
return asCard && asCardOverrides;
|
|
5782
5789
|
});
|
|
5783
|
-
var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(
|
|
5790
|
+
var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
|
|
5784
5791
|
|
|
5785
5792
|
var _excluded$j = ["text"],
|
|
5786
5793
|
_excluded2$3 = ["text"],
|
|
@@ -5864,12 +5871,14 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5864
5871
|
|
|
5865
5872
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
|
|
5866
5873
|
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
5867
|
-
var textLinkItems = textLinks ? textLinks.map(function (link) {
|
|
5874
|
+
var textLinkItems = textLinks ? textLinks.map(function (link, index) {
|
|
5868
5875
|
var _link$text = link.text,
|
|
5869
5876
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
5870
5877
|
restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
|
|
5871
5878
|
|
|
5872
|
-
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2,
|
|
5879
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
|
|
5880
|
+
key: index
|
|
5881
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTextLink, Object.assign({}, restTextLink), textLinkText));
|
|
5873
5882
|
}) : null;
|
|
5874
5883
|
return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
|
|
5875
5884
|
id: anchorLink,
|
|
@@ -6197,7 +6206,7 @@ var Quote = function Quote(_ref) {
|
|
|
6197
6206
|
};
|
|
6198
6207
|
|
|
6199
6208
|
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) {
|
|
6209
|
+
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
6210
|
var theme = _ref.theme;
|
|
6202
6211
|
return theme.colors.primary;
|
|
6203
6212
|
}, function (_ref2) {
|