@royaloperahouse/chord 1.8.0 → 1.8.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 +8 -1
- package/README.md +248 -40
- package/dist/chord.cjs.development.js +57 -40
- 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 +57 -40
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/molecules/Card/Card.style.d.ts +4 -1
- package/dist/components/molecules/PageHeading/Impact/Impact.style.d.ts +1 -0
- package/dist/styles/viewports.d.ts +1 -0
- package/dist/types/card.d.ts +5 -0
- package/dist/types/impactHeader.d.ts +4 -0
- package/package.json +1 -1
- package/README.GIT +0 -275
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## [1.8.1-b]
|
|
4
|
+
- Card: add new prop for the line color on hover
|
|
5
|
+
|
|
6
|
+
## [1.8.1-a]
|
|
7
|
+
- ImpactHeader: replace css background image with html element
|
|
3
8
|
## [1.8.0]
|
|
4
9
|
- SearchBar: Disable
|
|
5
10
|
|
|
6
11
|
## [1.7.2]
|
|
7
12
|
- Add imageAltText to Card component
|
|
8
|
-
|
|
13
|
+
|
|
9
14
|
## [1.7.0]
|
|
15
|
+
- Add new ContentSummary component
|
|
16
|
+
- Add new ContentSummarySection component
|
|
10
17
|
- Add Content Summary Section and individual Content Summaries
|
|
11
18
|
|
|
12
19
|
## [1.6.3]
|
package/README.md
CHANGED
|
@@ -1,67 +1,275 @@
|
|
|
1
|
-
# Royal Opera House -
|
|
1
|
+
# Royal Opera House Chord - 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
|
+
The NPM packages are published at [https://www.npmjs.com/package/@royaloperahouse/chord](https://www.npmjs.com/package/@royaloperahouse/chord)
|
|
10
|
+
|
|
11
|
+
The Storybook for the latest version of the library is hosted at [chord.roh.org.uk](chord.roh.org.uk)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## Prerequisites
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
* Make sure the required package dependencies are installed using `yarn install`
|
|
18
|
+
|
|
19
|
+
* **To deploy the storybook publicly** you will need credentials for the **parent** 'Royal Opera House' AWS account in your `~/.aws/credentials` file.
|
|
20
|
+
* The deploy script expects these to be called `[parent]`.
|
|
21
|
+
|
|
22
|
+
* You can find these values at:
|
|
23
|
+
|
|
24
|
+
*AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
|
|
25
|
+
|
|
26
|
+
* **To deploy a preview** for demo / QA you will need the `CHROMATIC_PROJECT_TOKEN` -- find this in 1Password
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
* **To publish the NPM package** you will need the ROH `NPM_TOKEN` -- find this in 1Password
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## Versioning
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
We use [Semantic Versioning](https://semver.org/) for Chord.
|
|
36
|
+
|
|
37
|
+
Given a version number MAJOR.MINOR.PATCH, increment the:
|
|
38
|
+
|
|
39
|
+
* MAJOR version when you make incompatible library changes
|
|
40
|
+
* MINOR version when you add functionality in a backwards compatible manner
|
|
41
|
+
* PATCH version when you make backwards compatible bug fixes
|
|
42
|
+
|
|
43
|
+
When you create a new release always update the `CHANGELOG` and `package.json`
|
|
44
|
+
|
|
45
|
+
Increment your version from the latest stable version on `chord-releases`
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
## Deploying the Storybook
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
### **1. To build and deploy locally**
|
|
52
|
+
|
|
53
|
+
You can quickly build and serve the contents of `/storybook-static` from your local machine, for development and manual testing. To do this run:
|
|
9
54
|
|
|
10
55
|
```bash
|
|
11
|
-
|
|
56
|
+
yarn storybook
|
|
12
57
|
```
|
|
58
|
+
|
|
59
|
+
By default the storybook will be accessible at
|
|
60
|
+
[http://localhost:6006/]()
|
|
61
|
+
|
|
62
|
+
The server will hot-reload on most changes.
|
|
63
|
+
|
|
64
|
+
### **2. To deploy a preview version remotely**
|
|
65
|
+
|
|
66
|
+
You can deploy a release candidate, or work-in-progress to [Chromatic](https://www.chromatic.com/) for showcase or QA.
|
|
67
|
+
|
|
68
|
+
**NOTE:** you will need the `CHROMATIC_PROJECT_TOKEN` as described in *Prerequisites* above.
|
|
69
|
+
|
|
70
|
+
Either set the token as a shell variable or use a `.env` file in the chord root directory containing the token, as so:
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
CHROMATIC_PROJECT_TOKEN=tokengoeshere
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Run:
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
yarn deploy-storybook-dev
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
to build and deploy the storybook from your repo to Chromatic.
|
|
83
|
+
|
|
84
|
+
You will find the address of your deployed storybook in the console output, looking something like this:
|
|
85
|
+
|
|
86
|
+
`→ View your Storybook at https://randomHexString-randomAlphabeticalString.chromatic.com`
|
|
87
|
+
|
|
88
|
+
### **3. To deploy a release version**
|
|
89
|
+
|
|
90
|
+
You can deploy the contents of `./storybook-static` to S3 as a static site, which is permanently accessible at [chord.roh.org.uk](chord.roh.org.uk)
|
|
91
|
+
|
|
92
|
+
**NOTE:** To do this you will need the correct `AWS` credentials set up, as described in *Prerequisites* above.
|
|
93
|
+
|
|
94
|
+
First build the storybook using:
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
yarn build-storybook
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
then run:
|
|
101
|
+
|
|
13
102
|
```bash
|
|
14
|
-
|
|
103
|
+
yarn deploy-storybook
|
|
15
104
|
```
|
|
16
105
|
|
|
17
|
-
|
|
106
|
+
> **IMPORTANT:** This URL is intended to showcase the latest stable version of Chord, it should be kept up to date with the main `chord-releases` branch and should **only** be used for release versions. If you want to deploy a development version follow the steps above under *To deploy a preview version remotely*.
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
## Releasing a New Package Version
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
This is the procedure for releasing a new Chord NPM package.
|
|
113
|
+
|
|
114
|
+
There are two types of package:
|
|
115
|
+
|
|
116
|
+
A **snapshot** can be published to use a development version of the Chord library in our frontend staging environments, to perform integrated, manual testing.
|
|
117
|
+
|
|
118
|
+
A **stable** package is published for use in production.
|
|
119
|
+
|
|
120
|
+
**NOTE:** You will need the `NPM_TOKEN`, as described in 'Prerequisites' above.
|
|
18
121
|
|
|
19
|
-
|
|
20
|
-
import {
|
|
21
|
-
Footer, GlobalStyles, ThemeProvider, ThemeType,
|
|
22
|
-
} from '@royaloperahouse/chord';
|
|
122
|
+
### **1. To release a snapshot version**
|
|
23
123
|
|
|
124
|
+
> **IMPORTANT:** Make sure you always publish your **snapshots** from `chord-development` after merging in your feature branch.
|
|
125
|
+
|
|
126
|
+
For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Chord Library, as found in `chord-releases`, followed by an **unused** lowercase letter.
|
|
127
|
+
|
|
128
|
+
For example, if the latest stable release was 1.42.0, and the last snapshot published to NPM was 1.42.0-w, you would use RELEASE_VERSION `1.42.0-x`
|
|
129
|
+
|
|
130
|
+
To publish a snapshot use:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
The version published to NPM will be named, e.g. `1.42.0-a-chord-development`, use this to install the snapshot package in the frontend repos.
|
|
137
|
+
|
|
138
|
+
### **2. To release a stable version**
|
|
139
|
+
|
|
140
|
+
> **IMPORTANT:** Make sure you always publish your **stable** packages from `chord-releases` after merging in your feature branch.
|
|
141
|
+
|
|
142
|
+
For stable releases, increment your version from the latest **stable** version found on `chord-releases`, following the rules described in *Versioning* above, and use this as `RELEASE_VERSION`. (Make sure it matches the version in your `package.json` and `CHANGELOG.md`!)
|
|
143
|
+
|
|
144
|
+
To publish a stable package use:
|
|
145
|
+
|
|
146
|
+
```bash
|
|
147
|
+
NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-release
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
## Using the Package
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
The package is deployed to NPM, and can be installed using yarn or npm:
|
|
155
|
+
|
|
156
|
+
```bash
|
|
157
|
+
npm i --save @royaloperahouse/chord
|
|
158
|
+
```
|
|
159
|
+
```bash
|
|
160
|
+
yarn add @royaloperahouse/chord
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
## Testing
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
To **Lint** the package use:
|
|
168
|
+
|
|
169
|
+
```bash
|
|
170
|
+
yarn lint
|
|
171
|
+
# Use the --fix option to perform automatic fixes
|
|
24
172
|
```
|
|
25
|
-
## Sample
|
|
26
173
|
|
|
27
|
-
|
|
174
|
+
To run the **unit tests** (using Jest) use:
|
|
28
175
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} from '@royaloperahouse/chord';
|
|
176
|
+
```bash
|
|
177
|
+
yarn test
|
|
32
178
|
|
|
179
|
+
# Use the -u option to update snapshots if needed
|
|
180
|
+
# Run `yarn test:watch` to re-run tests on changes
|
|
181
|
+
```
|
|
33
182
|
|
|
34
|
-
|
|
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
|
-
);
|
|
183
|
+
To **run and and store the unit tests** for display in storybook use:
|
|
53
184
|
|
|
185
|
+
```bash
|
|
186
|
+
yarn test-storybook
|
|
187
|
+
# Use the -u option to update snapshots if needed
|
|
54
188
|
```
|
|
55
189
|
|
|
56
|
-
## Components
|
|
57
190
|
|
|
58
|
-
|
|
191
|
+
## Development Process
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
### **1. Branching Model**
|
|
195
|
+
* The Chord project lives in the `roh-components` *monorepo*
|
|
196
|
+
* When working on Chord, treat the `roh-components/packages/chord` directory as your root
|
|
197
|
+
* The Chord **development** branch is currently `chord-development`
|
|
198
|
+
* The Chord **main** branch is currently `chord-releases`
|
|
199
|
+
* All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. `feature/RD-1234-update-chord-documentation`
|
|
200
|
+
* Always create your feature branch FROM, and submit pull requests TO, the **main** branch
|
|
201
|
+
* For **QA / UAT** of a Chord component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
|
|
202
|
+
* For releasing an **NPM snapshot**: merge your feature branch into the **development** branch and publish the NPM snapshot from there
|
|
203
|
+
|
|
204
|
+
### **2. Detailed Workflow**
|
|
205
|
+
|
|
206
|
+
#### **Before review:**
|
|
207
|
+
|
|
208
|
+
* Git pull the latest version of `chord-releases`
|
|
209
|
+
* Checkout a new, correctly-named feature branch from `chord releases`
|
|
210
|
+
* Do your work on this feature branch
|
|
211
|
+
* Run: `yarn lint`
|
|
212
|
+
* Run: `yarn test`
|
|
213
|
+
* Commit your changes
|
|
214
|
+
* Create a pull request from your feature branch to `chord-releases`
|
|
215
|
+
* Add the appropriate reviewers
|
|
216
|
+
|
|
217
|
+
#### **Before QA / UAT:**
|
|
218
|
+
|
|
219
|
+
After your PR is approved, you have two options:
|
|
220
|
+
|
|
221
|
+
**i.** For QA of a component in isolation:
|
|
222
|
+
|
|
223
|
+
* Follow the steps above in *Deploying the Storybook -> 2. Deploying a preview version remotely*
|
|
224
|
+
* Share the generated Chromatic URL with the appropriate people for QA / UAT
|
|
225
|
+
|
|
226
|
+
**ii.** For integrated testing of a component in the frontend staging environments:
|
|
227
|
+
|
|
228
|
+
* Check out the `chord-development` branch
|
|
229
|
+
* Merge your work in to `chord-development`
|
|
230
|
+
* Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
|
|
231
|
+
* Git push the updated `chord-development` branch to remote
|
|
232
|
+
* Finally, in the frontend repo:
|
|
233
|
+
|
|
234
|
+
1. Update the `package.json` to reference the new snapshot version
|
|
235
|
+
2. Run: `yarn install`
|
|
236
|
+
3. Deploy the frontend to a staging environment
|
|
237
|
+
|
|
238
|
+
#### **When ready for production:**
|
|
239
|
+
|
|
240
|
+
* Return to your chord **feature branch**
|
|
241
|
+
* Update the chord version in `package.json`, incrementing from the last **stable** release, found in `chord-releases`, and following the rules described in the *Versioning* section
|
|
242
|
+
* Update `CHANGELOG.md`, adding the new version number and a short description of your changes
|
|
243
|
+
* Run: `yarn lint`
|
|
244
|
+
* Run: `yarn test`
|
|
245
|
+
* Run: `yarn test-storybook -u`
|
|
246
|
+
* Run: `yarn build-storybook`
|
|
247
|
+
* Git commit, push, and update your PR for final approval
|
|
248
|
+
* Merge your approved PR to `chord-releases`
|
|
249
|
+
* Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
|
|
250
|
+
* Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public Chord Storybook page
|
|
251
|
+
|
|
252
|
+
Once you have successfully published a new release version, you can open a ticket to update to this version in any of the frontend repos.
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
## Notes
|
|
256
|
+
---
|
|
257
|
+
### The `storybook-static` folder
|
|
258
|
+
|
|
259
|
+
This folder contains all the HTML / JS required to deploy the Storybook as a static site. It's autogenerated whenever the Storybook is built and therefore will show up a lot of merge conflicts when you merge other branches into your feature branch. It is best to leave generating the storybook until the later part of your workflow, but in case you run into conflicts earlier, it's ok to just delete the folder and regenerate using:
|
|
260
|
+
|
|
261
|
+
```bash
|
|
262
|
+
yarn build-storybook
|
|
263
|
+
```
|
|
59
264
|
|
|
60
|
-
|
|
265
|
+
For the same reason changes to this folder will cause a lot of big diffs, when looking at a PR, but can mostly be skimmed over unless something looks unusual.
|
|
61
266
|
|
|
62
|
-
|
|
267
|
+
---
|
|
268
|
+
### Examples
|
|
63
269
|
|
|
270
|
+
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
271
|
|
|
65
|
-
|
|
272
|
+
---
|
|
273
|
+
### Bundle analysis
|
|
66
274
|
|
|
67
|
-
|
|
275
|
+
Calculate the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visualize it with `yarn analyze`.
|
|
@@ -60,6 +60,7 @@ var breakpoints = {
|
|
|
60
60
|
lg: 1400
|
|
61
61
|
};
|
|
62
62
|
var devices = {
|
|
63
|
+
smallMobile: "only screen and (max-width: " + (breakpoints.xs - 1) + "px)",
|
|
63
64
|
mobile: "only screen and (max-width: " + (breakpoints.sm - 1) + "px)",
|
|
64
65
|
tablet: "only screen and (max-width: " + (breakpoints.md - 1) + "px) and (min-width: " + breakpoints.sm + "px)",
|
|
65
66
|
mobileAndTablet: "only screen and (max-width: " + (breakpoints.md - 1) + "px)",
|
|
@@ -4954,34 +4955,37 @@ var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$F || (_temp
|
|
|
4954
4955
|
var onlyShowButtonsOnHover = _ref.onlyShowButtonsOnHover;
|
|
4955
4956
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
4956
4957
|
});
|
|
4957
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: var(--base-color-
|
|
4958
|
+
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: var(--base-color-", ");\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref2) {
|
|
4959
|
+
var lineColor = _ref2.lineColor;
|
|
4960
|
+
return lineColor;
|
|
4961
|
+
}, zIndexes.contentOverlay);
|
|
4958
4962
|
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
4959
|
-
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (
|
|
4960
|
-
var fullWidth = _ref2.fullWidth;
|
|
4961
|
-
return fullWidth ? '0' : '20px';
|
|
4962
|
-
}, function (_ref3) {
|
|
4963
|
+
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref3) {
|
|
4963
4964
|
var fullWidth = _ref3.fullWidth;
|
|
4964
4965
|
return fullWidth ? '0' : '20px';
|
|
4966
|
+
}, function (_ref4) {
|
|
4967
|
+
var fullWidth = _ref4.fullWidth;
|
|
4968
|
+
return fullWidth ? '0' : '20px';
|
|
4965
4969
|
});
|
|
4966
4970
|
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
4967
4971
|
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
|
|
4968
4972
|
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4969
4973
|
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4970
4974
|
|
|
4971
|
-
var getButtonsOpacity = function getButtonsOpacity(
|
|
4972
|
-
var onlyShowButtonsOnHover =
|
|
4975
|
+
var getButtonsOpacity = function getButtonsOpacity(_ref5) {
|
|
4976
|
+
var onlyShowButtonsOnHover = _ref5.onlyShowButtonsOnHover;
|
|
4973
4977
|
return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
|
|
4974
4978
|
};
|
|
4975
4979
|
|
|
4976
|
-
var getButtonsMinHeight = function getButtonsMinHeight(
|
|
4977
|
-
var onlyShowButtonsOnHover =
|
|
4980
|
+
var getButtonsMinHeight = function getButtonsMinHeight(_ref6) {
|
|
4981
|
+
var onlyShowButtonsOnHover = _ref6.onlyShowButtonsOnHover;
|
|
4978
4982
|
return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
|
|
4979
4983
|
};
|
|
4980
4984
|
|
|
4981
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (
|
|
4982
|
-
var size =
|
|
4983
|
-
primaryButtonTextLength =
|
|
4984
|
-
tertiaryButtonTextLength =
|
|
4985
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref7) {
|
|
4986
|
+
var size = _ref7.size,
|
|
4987
|
+
primaryButtonTextLength = _ref7.primaryButtonTextLength,
|
|
4988
|
+
tertiaryButtonTextLength = _ref7.tertiaryButtonTextLength;
|
|
4985
4989
|
var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
|
|
4986
4990
|
|
|
4987
4991
|
if (isLinksLayoutColumn) {
|
|
@@ -4989,15 +4993,15 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 ||
|
|
|
4989
4993
|
}
|
|
4990
4994
|
|
|
4991
4995
|
return '';
|
|
4992
|
-
}, devices.mobile, getButtonsMinHeight, function (
|
|
4993
|
-
var fullWidth = _ref7.fullWidth;
|
|
4994
|
-
return fullWidth ? '0' : '20px';
|
|
4995
|
-
}, function (_ref8) {
|
|
4996
|
+
}, devices.mobile, getButtonsMinHeight, function (_ref8) {
|
|
4996
4997
|
var fullWidth = _ref8.fullWidth;
|
|
4997
4998
|
return fullWidth ? '0' : '20px';
|
|
4998
|
-
},
|
|
4999
|
-
var
|
|
5000
|
-
|
|
4999
|
+
}, function (_ref9) {
|
|
5000
|
+
var fullWidth = _ref9.fullWidth;
|
|
5001
|
+
return fullWidth ? '0' : '20px';
|
|
5002
|
+
}, devices.tablet, getButtonsMinHeight, function (_ref10) {
|
|
5003
|
+
var primaryButtonTextLength = _ref10.primaryButtonTextLength,
|
|
5004
|
+
tertiaryButtonTextLength = _ref10.tertiaryButtonTextLength;
|
|
5001
5005
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
|
|
5002
5006
|
|
|
5003
5007
|
if (isLinksLayoutColumnTablet) {
|
|
@@ -5059,7 +5063,9 @@ var Card = function Card(_ref) {
|
|
|
5059
5063
|
_ref$fullWidth = _ref.fullWidth,
|
|
5060
5064
|
fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
|
|
5061
5065
|
_ref$onlyShowButtonsO = _ref.onlyShowButtonsOnHover,
|
|
5062
|
-
onlyShowButtonsOnHover = _ref$onlyShowButtonsO === void 0 ? true : _ref$onlyShowButtonsO
|
|
5066
|
+
onlyShowButtonsOnHover = _ref$onlyShowButtonsO === void 0 ? true : _ref$onlyShowButtonsO,
|
|
5067
|
+
_ref$hoverLineColor = _ref.hoverLineColor,
|
|
5068
|
+
hoverLineColor = _ref$hoverLineColor === void 0 ? exports.Colors.Core : _ref$hoverLineColor;
|
|
5063
5069
|
|
|
5064
5070
|
var truncate = function truncate(str, n) {
|
|
5065
5071
|
return str.length >= n ? str.substr(0, n) : str;
|
|
@@ -5120,6 +5126,7 @@ var Card = function Card(_ref) {
|
|
|
5120
5126
|
flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
|
|
5121
5127
|
}
|
|
5122
5128
|
}, hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
|
|
5129
|
+
lineColor: hoverLineColor,
|
|
5123
5130
|
"data-testid": "hovercontainer"
|
|
5124
5131
|
}), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5125
5132
|
aspectRatio: exports.AspectRatio['4:3']
|
|
@@ -5188,6 +5195,7 @@ var Cards = function Cards(_ref) {
|
|
|
5188
5195
|
tags: card.tags,
|
|
5189
5196
|
withContinueWatching: card.withContinueWatching,
|
|
5190
5197
|
onlyShowButtonsOnHover: card.onlyShowButtonsOnHover,
|
|
5198
|
+
hoverLineColor: card.hoverLineColor,
|
|
5191
5199
|
fullWidth: card.fullWidth
|
|
5192
5200
|
}));
|
|
5193
5201
|
}));
|
|
@@ -5689,21 +5697,15 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
|
5689
5697
|
}))));
|
|
5690
5698
|
};
|
|
5691
5699
|
|
|
5692
|
-
var _templateObject$N, _templateObject2$x, _templateObject3$o, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$8;
|
|
5693
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n
|
|
5694
|
-
|
|
5695
|
-
|
|
5696
|
-
|
|
5697
|
-
|
|
5698
|
-
|
|
5699
|
-
|
|
5700
|
-
});
|
|
5701
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5702
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
5703
|
-
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5704
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5705
|
-
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5706
|
-
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5700
|
+
var _templateObject$N, _templateObject2$x, _templateObject3$o, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$8, _templateObject8$6;
|
|
5701
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
5702
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
5703
|
+
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5704
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
5705
|
+
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5706
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5707
|
+
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5708
|
+
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5707
5709
|
|
|
5708
5710
|
var _excluded$h = ["text"];
|
|
5709
5711
|
|
|
@@ -5716,7 +5718,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
5716
5718
|
customSponsorImage = _ref.customSponsorImage,
|
|
5717
5719
|
scrollHref = _ref.scrollHref,
|
|
5718
5720
|
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
5719
|
-
bgUrlDevice = _ref.bgUrlDevice
|
|
5721
|
+
bgUrlDevice = _ref.bgUrlDevice,
|
|
5722
|
+
bgImageAltText = _ref.bgImageAltText;
|
|
5720
5723
|
var truncatedText = text && text.substring(0, 75);
|
|
5721
5724
|
|
|
5722
5725
|
var _ref2 = link || {},
|
|
@@ -5727,7 +5730,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
5727
5730
|
bgUrlDesktop: bgUrlDesktop,
|
|
5728
5731
|
bgUrlDevice: bgUrlDevice,
|
|
5729
5732
|
"data-testid": "impact-wrapper"
|
|
5730
|
-
},
|
|
5733
|
+
}, /*#__PURE__*/React__default.createElement(ImpactHeaderImageWrapper, null, /*#__PURE__*/React__default.createElement("picture", {
|
|
5734
|
+
"data-testid": "impact-picture"
|
|
5735
|
+
}, bgUrlDevice && /*#__PURE__*/React__default.createElement("source", {
|
|
5736
|
+
srcSet: bgUrlDevice,
|
|
5737
|
+
media: "" + devices.mobile,
|
|
5738
|
+
"data-testid": "impact-mobile-image-source"
|
|
5739
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
5740
|
+
srcSet: bgUrlDesktop,
|
|
5741
|
+
media: "" + devices.desktop,
|
|
5742
|
+
"data-testid": "impact-desktop-image-source"
|
|
5743
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
5744
|
+
src: bgUrlDesktop,
|
|
5745
|
+
alt: bgImageAltText,
|
|
5746
|
+
"data-testid": "impact-image"
|
|
5747
|
+
}))), sponsor ? /*#__PURE__*/React__default.createElement(SponsorWrapper, {
|
|
5731
5748
|
"data-testid": "impact-sponsor"
|
|
5732
5749
|
}, customSponsorImage ? /*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
|
|
5733
5750
|
"data-testid": "impact-custom-sponsor"
|
|
@@ -5830,7 +5847,7 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5830
5847
|
}));
|
|
5831
5848
|
};
|
|
5832
5849
|
|
|
5833
|
-
var _templateObject$Q, _templateObject2$z, _templateObject3$q, _templateObject4$k, _templateObject5$e, _templateObject6$c, _templateObject7$9, _templateObject8$
|
|
5850
|
+
var _templateObject$Q, _templateObject2$z, _templateObject3$q, _templateObject4$k, _templateObject5$e, _templateObject6$c, _templateObject7$9, _templateObject8$7, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
5834
5851
|
var LENGTH_TEXT = 28;
|
|
5835
5852
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
5836
5853
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -5891,7 +5908,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
|
5891
5908
|
});
|
|
5892
5909
|
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
5893
5910
|
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
5894
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$
|
|
5911
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
5895
5912
|
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
5896
5913
|
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
5897
5914
|
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n"])));
|