@uh-design-system/component-library 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/component-library.cjs.js +1 -1
- package/dist/cjs/ds-accordion_3.cjs.entry.js +11 -10
- package/dist/cjs/ds-link-with-arrow.cjs.entry.js +3 -3
- package/dist/cjs/ds-link.cjs.entry.js +3 -3
- package/dist/cjs/ds-text-input.cjs.entry.js +3 -3
- package/dist/cjs/ds-visually-hidden.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/00-foundations/typography/stories/typography.stories.js +110 -0
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css +11 -3
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js +6 -6
- package/dist/collection/components/01-base-components/ds-button/ds-button.css +127 -63
- package/dist/collection/components/01-base-components/ds-button/ds-button.js +22 -1
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.examples.stories.js +6 -0
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js +10 -0
- package/dist/collection/components/01-base-components/ds-icon/ds-icon.js +2 -2
- package/dist/collection/components/01-base-components/ds-link/ds-link.css +91 -25
- package/dist/collection/components/01-base-components/ds-link/ds-link.js +3 -3
- package/dist/collection/components/01-base-components/ds-link/stories/ds-link.stories.js +1 -1
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css +86 -20
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js +3 -3
- package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.stories.js +1 -1
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css +30 -11
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js +3 -3
- package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js +1 -1
- package/dist/collection/utils/typography/typographyUtils.js +21 -0
- package/dist/component-library/component-library.css +1 -1
- package/dist/component-library/component-library.esm.js +1 -1
- package/dist/component-library/ds-accordion_3.entry.js +1 -1
- package/dist/component-library/ds-link-with-arrow.entry.js +1 -1
- package/dist/component-library/ds-link.entry.js +1 -1
- package/dist/component-library/ds-text-input.entry.js +1 -1
- package/dist/component-library/ds-visually-hidden.entry.js +1 -1
- package/dist/components/ds-accordion.js +7 -7
- package/dist/components/ds-button2.js +4 -2
- package/dist/components/ds-icon2.js +2 -2
- package/dist/components/ds-link-with-arrow.js +4 -4
- package/dist/components/ds-link.js +4 -4
- package/dist/components/ds-text-input.js +4 -4
- package/dist/components/ds-visually-hidden2.js +1 -1
- package/dist/esm/component-library.js +1 -1
- package/dist/esm/ds-accordion_3.entry.js +11 -10
- package/dist/esm/ds-link-with-arrow.entry.js +3 -3
- package/dist/esm/ds-link.entry.js +3 -3
- package/dist/esm/ds-text-input.entry.js +3 -3
- package/dist/esm/ds-visually-hidden.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/00-foundations/typography/stories/typography.stories.d.ts +9 -0
- package/dist/types/components/01-base-components/ds-button/ds-button.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.features.stories.d.ts +3 -0
- package/dist/types/components/01-base-components/ds-link/ds-link.d.ts +1 -1
- package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts +1 -1
- package/dist/types/components.d.ts +6 -4
- package/dist/types/utils/typography/typographyUtils.d.ts +1 -0
- package/package.json +2 -4
package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css
CHANGED
|
@@ -15,6 +15,14 @@
|
|
|
15
15
|
--ds-borderRadius-none: 0px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
:root {
|
|
19
|
+
--ds-breakpoint-xSmall: 20rem;
|
|
20
|
+
--ds-breakpoint-small: 30rem;
|
|
21
|
+
--ds-breakpoint-medium: 60rem;
|
|
22
|
+
--ds-breakpoint-large: 75rem;
|
|
23
|
+
--ds-breakpoint-xLarge: 90rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
18
26
|
:root {
|
|
19
27
|
--ds-fontFamily-heading: "Open Sans", sans-serif;
|
|
20
28
|
--ds-fontFamily-body: "Open Sans", sans-serif;
|
|
@@ -57,26 +65,83 @@
|
|
|
57
65
|
--ds-fontFamily-body: "Open Sans Variable", sans-serif;
|
|
58
66
|
}
|
|
59
67
|
}
|
|
60
|
-
|
|
61
|
-
|
|
68
|
+
:root {
|
|
69
|
+
--ds-breakpoint-xSmall: 20rem;
|
|
70
|
+
--ds-breakpoint-small: 30rem;
|
|
71
|
+
--ds-breakpoint-medium: 60rem;
|
|
72
|
+
--ds-breakpoint-large: 75rem;
|
|
73
|
+
--ds-breakpoint-xLarge: 90rem;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Body text styles */
|
|
77
|
+
.ds-bodyText--2xLarge {
|
|
78
|
+
color: var(--ds-textColor-default);
|
|
79
|
+
font-family: var(--ds-fontFamily-body);
|
|
80
|
+
font-size: var(--ds-fontSize-20);
|
|
81
|
+
font-weight: var(--ds-fontWeight-regular);
|
|
82
|
+
letter-spacing: var(--ds-letterSpacing-wide);
|
|
83
|
+
line-height: var(--ds-lineHeight-large);
|
|
84
|
+
}
|
|
85
|
+
@media (min-width: 30rem) {
|
|
86
|
+
.ds-bodyText--2xLarge {
|
|
87
|
+
font-size: var(--ds-fontSize-22);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.ds-bodyText--xLarge {
|
|
92
|
+
color: var(--ds-textColor-default);
|
|
93
|
+
font-family: var(--ds-fontFamily-body);
|
|
94
|
+
font-size: var(--ds-fontSize-18);
|
|
95
|
+
font-weight: var(--ds-fontWeight-regular);
|
|
96
|
+
letter-spacing: var(--ds-letterSpacing-wide);
|
|
97
|
+
line-height: var(--ds-lineHeight-large);
|
|
98
|
+
}
|
|
99
|
+
@media (min-width: 30rem) {
|
|
100
|
+
.ds-bodyText--xLarge {
|
|
101
|
+
font-size: var(--ds-fontSize-20);
|
|
102
|
+
}
|
|
62
103
|
}
|
|
63
|
-
|
|
64
|
-
|
|
104
|
+
|
|
105
|
+
.ds-bodyText--large {
|
|
106
|
+
color: var(--ds-textColor-default);
|
|
107
|
+
font-family: var(--ds-fontFamily-body);
|
|
108
|
+
font-size: var(--ds-fontSize-16);
|
|
109
|
+
font-weight: var(--ds-fontWeight-regular);
|
|
110
|
+
letter-spacing: var(--ds-letterSpacing-wide);
|
|
111
|
+
line-height: var(--ds-lineHeight-large);
|
|
65
112
|
}
|
|
66
|
-
|
|
67
|
-
|
|
113
|
+
@media (min-width: 30rem) {
|
|
114
|
+
.ds-bodyText--large {
|
|
115
|
+
font-size: var(--ds-fontSize-18);
|
|
116
|
+
}
|
|
68
117
|
}
|
|
69
|
-
|
|
70
|
-
|
|
118
|
+
|
|
119
|
+
.ds-bodyText--medium {
|
|
120
|
+
color: var(--ds-textColor-default);
|
|
121
|
+
font-family: var(--ds-fontFamily-body);
|
|
122
|
+
font-size: var(--ds-fontSize-14);
|
|
123
|
+
font-weight: var(--ds-fontWeight-regular);
|
|
124
|
+
letter-spacing: var(--ds-letterSpacing-wide);
|
|
125
|
+
line-height: var(--ds-lineHeight-large);
|
|
71
126
|
}
|
|
72
|
-
|
|
73
|
-
|
|
127
|
+
@media (min-width: 30rem) {
|
|
128
|
+
.ds-bodyText--medium {
|
|
129
|
+
font-size: var(--ds-fontSize-16);
|
|
130
|
+
}
|
|
74
131
|
}
|
|
75
|
-
|
|
76
|
-
|
|
132
|
+
|
|
133
|
+
.ds-bodyText--small {
|
|
134
|
+
color: var(--ds-textColor-default);
|
|
135
|
+
font-family: var(--ds-fontFamily-body);
|
|
136
|
+
font-size: var(--ds-fontSize-12);
|
|
137
|
+
font-weight: var(--ds-fontWeight-regular);
|
|
138
|
+
letter-spacing: var(--ds-letterSpacing-wide);
|
|
139
|
+
line-height: var(--ds-lineHeight-large);
|
|
77
140
|
}
|
|
78
|
-
|
|
79
|
-
|
|
141
|
+
@media (min-width: 30rem) {
|
|
142
|
+
.ds-bodyText--small {
|
|
143
|
+
font-size: var(--ds-fontSize-14);
|
|
144
|
+
}
|
|
80
145
|
}
|
|
81
146
|
|
|
82
147
|
:host {
|
|
@@ -92,6 +157,13 @@
|
|
|
92
157
|
font-size: var(--ds-fontSize-16);
|
|
93
158
|
text-decoration-line: none;
|
|
94
159
|
}
|
|
160
|
+
.ds-link-with-arrow:focus-visible, .ds-link-with-arrow:focus-within {
|
|
161
|
+
box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
|
|
162
|
+
outline-color: var(--ds-borderColor-black);
|
|
163
|
+
outline-offset: var(--ds-borderWidth-thin);
|
|
164
|
+
outline-style: solid;
|
|
165
|
+
outline-width: var(--ds-borderWidth-thin);
|
|
166
|
+
}
|
|
95
167
|
@media (min-width: 30rem) {
|
|
96
168
|
.ds-link-with-arrow {
|
|
97
169
|
font-size: var(--ds-fontSize-18);
|
|
@@ -133,10 +205,4 @@
|
|
|
133
205
|
}
|
|
134
206
|
.ds-link-with-arrow:active, .ds-link-with-arrow:focus-visible {
|
|
135
207
|
color: var(--ds-textColor-link-active);
|
|
136
|
-
}
|
|
137
|
-
.ds-link-with-arrow:focus-visible {
|
|
138
|
-
outline-style: solid;
|
|
139
|
-
outline-width: var(--ds-borderWidth-thin);
|
|
140
|
-
outline-offset: var(--ds-borderWidth-thin);
|
|
141
|
-
outline-color: var(--ds-palette-black);
|
|
142
208
|
}
|
package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js
CHANGED
|
@@ -14,7 +14,7 @@ export class DsLinkWithArrow {
|
|
|
14
14
|
iconPosition = 'start';
|
|
15
15
|
href;
|
|
16
16
|
target;
|
|
17
|
-
|
|
17
|
+
language;
|
|
18
18
|
componentWillLoad() {
|
|
19
19
|
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
20
20
|
if (opensInNewTab(this.target)) {
|
|
@@ -28,7 +28,7 @@ export class DsLinkWithArrow {
|
|
|
28
28
|
'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
|
|
29
29
|
'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
|
|
30
30
|
});
|
|
31
|
-
return (h("a", { key: '
|
|
31
|
+
return (h("a", { key: 'aa1a1272c0323f286e590f1a366f2101410a58c3', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, h("slot", { key: 'e348b24c8c5418cf0f33e18c5337066b6eb579a2', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'e523092b3dc32f936139c53e74195b927a219c0f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '0ec9d65ee348aa75108f9d87474551b6b3c4a0bb', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '55b5ef6cc061bea9f68d784e4e9fb0ebdac0002c', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '8c92b801ac0a1d52e12fead3c89703d41f90fa6a', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "ds-link-with-arrow"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -131,7 +131,7 @@ export class DsLinkWithArrow {
|
|
|
131
131
|
"attribute": "target",
|
|
132
132
|
"reflect": false
|
|
133
133
|
},
|
|
134
|
-
"
|
|
134
|
+
"language": {
|
|
135
135
|
"type": "string",
|
|
136
136
|
"mutable": false,
|
|
137
137
|
"complexType": {
|
|
@@ -31,7 +31,7 @@ export const Playground = {
|
|
|
31
31
|
control: 'select',
|
|
32
32
|
options: ['start', 'end'],
|
|
33
33
|
},
|
|
34
|
-
|
|
34
|
+
language: {
|
|
35
35
|
control: 'text',
|
|
36
36
|
description: 'ISO 639 language code. Known languages are: "en", "fi", "sv". When undefined will use browser\'s language.',
|
|
37
37
|
},
|
|
@@ -58,14 +58,37 @@
|
|
|
58
58
|
border-color: var(--ds-borderColor-default);
|
|
59
59
|
padding-inline: var(--ds-spacing-xSmall);
|
|
60
60
|
}
|
|
61
|
+
.ds-input--container:focus-visible, .ds-input--container:focus-within {
|
|
62
|
+
box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
|
|
63
|
+
outline-color: var(--ds-borderColor-black);
|
|
64
|
+
outline-offset: var(--ds-borderWidth-thin);
|
|
65
|
+
outline-style: solid;
|
|
66
|
+
outline-width: var(--ds-borderWidth-thin);
|
|
67
|
+
}
|
|
61
68
|
.ds-input--container.invalid {
|
|
62
69
|
background-color: var(--ds-bgColor-danger);
|
|
63
70
|
border-color: var(--ds-borderColor-danger);
|
|
64
71
|
}
|
|
72
|
+
.ds-input--container.invalid:hover:not(.ds-input--container.invalid:focus-within) {
|
|
73
|
+
background-color: var(--ds-bgColor-danger-hover);
|
|
74
|
+
border-color: var(--ds-borderColor-danger);
|
|
75
|
+
}
|
|
76
|
+
.ds-input--container.invalid.active {
|
|
77
|
+
background-color: var(--ds-bgColor-danger-active);
|
|
78
|
+
border-color: var(--ds-borderColor-danger);
|
|
79
|
+
}
|
|
65
80
|
.ds-input--container.valid {
|
|
66
81
|
background-color: var(--ds-bgColor-success);
|
|
67
82
|
border-color: var(--ds-borderColor-success);
|
|
68
83
|
}
|
|
84
|
+
.ds-input--container.valid:hover:not(.ds-input--container.valid:focus-within) {
|
|
85
|
+
background-color: var(--ds-bgColor-success-hover);
|
|
86
|
+
border-color: var(--ds-borderColor-success);
|
|
87
|
+
}
|
|
88
|
+
.ds-input--container.valid.active {
|
|
89
|
+
background-color: var(--ds-bgColor-success-active);
|
|
90
|
+
border-color: var(--ds-borderColor-success);
|
|
91
|
+
}
|
|
69
92
|
.ds-input--container.readonly, .ds-input--container.disabled {
|
|
70
93
|
background-color: var(--ds-bgColor-disabled-onLight);
|
|
71
94
|
border-color: var(--ds-borderColor-disabled-onLight);
|
|
@@ -74,19 +97,15 @@
|
|
|
74
97
|
outline: none;
|
|
75
98
|
}
|
|
76
99
|
.ds-input--container:has(input:active):not:has(input:disabled, input:readonly) {
|
|
77
|
-
border-color: var(--ds-borderColor-
|
|
78
|
-
}
|
|
79
|
-
.ds-input--container.active:not(.ds-input--container.disabled, .ds-input--container.readonly) {
|
|
80
|
-
border-color: var(--ds-borderColor-primary);
|
|
100
|
+
border-color: var(--ds-borderColor-default);
|
|
81
101
|
}
|
|
82
|
-
.ds-input--container:
|
|
83
|
-
border-color: var(--ds-borderColor-
|
|
102
|
+
.ds-input--container.active:not(.ds-input--container.disabled, .ds-input--container.readonly, .ds-input--container.invalid, .ds-input--container.valid) {
|
|
103
|
+
border-color: var(--ds-borderColor-default);
|
|
104
|
+
background-color: var(--ds-bgColor-white-active);
|
|
84
105
|
}
|
|
85
|
-
.ds-input--container:focus-within {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
outline-style: solid;
|
|
89
|
-
outline-color: var(--ds-palette-black);
|
|
106
|
+
.ds-input--container:hover:not(.ds-input--container.disabled, .ds-input--container.readonly, .ds-input--container.active, .ds-input--container.invalid, .ds-input--container.valid, .ds-input--container:focus-within) {
|
|
107
|
+
border-color: var(--ds-borderColor-default);
|
|
108
|
+
background-color: var(--ds-bgColor-white-hover);
|
|
90
109
|
}
|
|
91
110
|
.ds-input--container:focus-within:not(.ds-input--container:focus-within.invalid, .ds-input--container:focus-within.valid, .ds-input--container:focus-within.readonly) {
|
|
92
111
|
border-color: var(--ds-borderColor-primary);
|
|
@@ -104,14 +104,14 @@ export class DsTextInput {
|
|
|
104
104
|
}
|
|
105
105
|
render() {
|
|
106
106
|
const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
|
|
107
|
-
return (h(Fragment, { key: '
|
|
107
|
+
return (h(Fragment, { key: 'fe9d038685d4912e0b760bed83e21a6ae8582535' }, h("div", { key: '4c4a662fcbcbf2c9a04986ad44b018736c8ba0d7', class: "ds-input--label-container" }, h("slot", { key: '8fea3c6a05e3f5314eae43c2f2eeedc47735278a', name: "label" }, h("label", { key: '33aa9fa1ab0eba6c36b0e882d8a71000a2a2ff40', "data-optional-text": this.optionalText, class: classNames({ required: this.required, optional: this.optional }), htmlFor: this.dsId }, this.label)), h("slot", { key: '13f7adf5a85a2f2d8d5f3e7b829ff86707f75a3d', name: "help-text" }, h("small", { key: '3595ee7deb43919aeabb938a2f0cc0ce78ca181d', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '001fd7a38ef2034f7e650e86d00d5a30ee217c17', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'ec9f2c0d6ff40bd6c8a4618ec238e966a0756c19', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
|
|
108
108
|
disabled: this.disabled,
|
|
109
109
|
readonly: this.readonly,
|
|
110
110
|
valid: !!this.successText,
|
|
111
111
|
invalid: !!this.errorText,
|
|
112
112
|
focus: this.hasFocus,
|
|
113
113
|
active: !!this.inputActive,
|
|
114
|
-
}) }, this.renderPrefixContent(), h("input", { key: '
|
|
114
|
+
}) }, this.renderPrefixContent(), h("input", { key: '1cd22b415c330cb50c4c9663f6dec3a1e99e256b', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
|
|
115
115
|
classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
|
|
116
116
|
[this.successTextId]: this.successText,
|
|
117
117
|
[this.errorTextId]: this.errorText,
|
|
@@ -185,7 +185,7 @@ export class DsTextInput {
|
|
|
185
185
|
},
|
|
186
186
|
"getter": false,
|
|
187
187
|
"setter": false,
|
|
188
|
-
"attribute": "
|
|
188
|
+
"attribute": "id",
|
|
189
189
|
"reflect": false,
|
|
190
190
|
"defaultValue": "'input'"
|
|
191
191
|
},
|
package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export class DsVisuallyHidden {
|
|
3
3
|
render() {
|
|
4
|
-
return (h("slot", { key: '
|
|
4
|
+
return (h("slot", { key: '3a7edab043d1612c06a4eb6fedacec27216f3be3' }));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "ds-visually-hidden"; }
|
|
7
7
|
static get encapsulation() { return "shadow"; }
|
|
@@ -83,3 +83,24 @@ export const createCategorySection = (category, fonts, renderedCategories) => {
|
|
|
83
83
|
section.appendChild(gridContainer);
|
|
84
84
|
return section;
|
|
85
85
|
};
|
|
86
|
+
export const getCSSClasses = (prefix) => {
|
|
87
|
+
const stylesheets = Array.from(document.styleSheets);
|
|
88
|
+
let classNames = [];
|
|
89
|
+
for (let sheet of stylesheets) {
|
|
90
|
+
try {
|
|
91
|
+
const rules = Array.from(sheet.cssRules);
|
|
92
|
+
for (let rule of rules) {
|
|
93
|
+
if (rule.selectorText) {
|
|
94
|
+
const selector = rule.selectorText;
|
|
95
|
+
if (selector.startsWith(`.${prefix}`)) {
|
|
96
|
+
classNames.push(selector.substring(1));
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
catch (e) {
|
|
102
|
+
console.warn("Could not access stylesheet:", e);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
return classNames;
|
|
106
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
html{box-sizing:border-box}html *,html *::before,html *::after{box-sizing:inherit}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-overlay-black-00:rgb(0 0 0 / 0);--ds-overlay-black-05:rgb(0 0 0 / 0.05);--ds-overlay-black-10:rgb(0 0 0 / 0.1);--ds-overlay-black-15:rgb(0 0 0 / 0.15);--ds-overlay-black-30:rgb(0 0 0 / 0.3);--ds-overlay-black-40:rgb(0 0 0 / 0.4);--ds-overlay-black-50:rgb(0 0 0 / 0.5);--ds-overlay-black-70:rgb(0 0 0 / 0.7);--ds-overlay-black-80:rgb(0 0 0 / 0.8);--ds-overlay-white-00:rgb(255 255 255 / 0);--ds-overlay-white-05:rgb(255 255 255 / 0.05);--ds-overlay-white-10:rgb(255 255 255 / 0.1);--ds-overlay-white-15:rgb(255 255 255 / 0.15);--ds-overlay-white-30:rgb(255 255 255 / 0.3);--ds-overlay-white-40:rgb(255 255 255 / 0.4);--ds-overlay-white-50:rgb(255 255 255 / 0.5);--ds-overlay-white-70:rgb(255 255 255 / 0.7);--ds-overlay-white-80:rgb(255 255 255 / 0.8);--ds-palette-black:#000000;--ds-palette-white:#ffffff;--ds-palette-black-03:#f7f7f7;--ds-palette-black-05:#f2f2f2;--ds-palette-black-10:#e6e6e6;--ds-palette-black-20:#cccccc;--ds-palette-black-30:#b3b3b3;--ds-palette-black-40:#999999;--ds-palette-black-50:#808080;--ds-palette-black-60:#666666;--ds-palette-black-70:#4d4d4d;--ds-palette-black-80:#333333;--ds-palette-black-90:#1a1a1a;--ds-palette-black-95:#0c0c0c;--ds-palette-blue-05:#e5f8ff;--ds-palette-blue-10:#c2eeff;--ds-palette-blue-20:#8adeff;--ds-palette-blue-30:#5cd1ff;--ds-palette-blue-40:#1abeff;--ds-palette-blue-50:#009ad6;--ds-palette-blue-60:#0084b8;--ds-palette-blue-70:#005b80;--ds-palette-blue-80:#053c52;--ds-palette-blue-90:#032330;--ds-palette-green-05:#dffbe1;--ds-palette-green-10:#bef4c1;--ds-palette-green-20:#85e08a;--ds-palette-green-30:#66cc6b;--ds-palette-green-40:#43b149;--ds-palette-green-50:#279b2d;--ds-palette-green-60:#257e29;--ds-palette-green-70:#216325;--ds-palette-green-80:#183f19;--ds-palette-green-90:#0f2410;--ds-palette-mainBlue-05:#e5f5ff;--ds-palette-mainBlue-10:#cdebff;--ds-palette-mainBlue-20:#99d7ff;--ds-palette-mainBlue-30:#70c7ff;--ds-palette-mainBlue-40:#3db3ff;--ds-palette-mainBlue-50:#009bff;--ds-palette-mainBlue-60:#007fd1;--ds-palette-mainBlue-70:#005a94;--ds-palette-mainBlue-80:#003152;--ds-palette-mainBlue-90:#001929;--ds-palette-red-05:#ffeceb;--ds-palette-red-10:#ffd8d6;--ds-palette-red-20:#fdb7b4;--ds-palette-red-30:#f87c77;--ds-palette-red-40:#f0514c;--ds-palette-red-50:#d71f19;--ds-palette-red-60:#bd2828;--ds-palette-red-70:#8b2623;--ds-palette-red-80:#602220;--ds-palette-red-90:#321c1b;--ds-palette-yellow-05:#fff1db;--ds-palette-yellow-10:#ffe7c2;--ds-palette-yellow-20:#ffd799;--ds-palette-yellow-30:#fbc05f;--ds-palette-yellow-40:#eea22b;--ds-palette-yellow-50:#ce8103;--ds-palette-yellow-60:#b26d00;--ds-palette-yellow-70:#7a4b00;--ds-palette-yellow-80:#4e3104;--ds-palette-yellow-90:#282115}:root{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-80);--ds-textColor-success:var(--ds-palette-green-80);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link--standalone:var(--ds-palette-black-70);--ds-textColor-link--standalone-hover:var(--ds-palette-black-80);--ds-textColor-link--standalone-active:var(--ds-palette-black-95);--ds-textColor-link--standalone-focus:var(--ds-palette-black-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-overlay-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-white-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20)}:root{--ds-spacing-4xSmall:0.125rem;--ds-spacing-3xSmall:0.25rem;--ds-spacing-2xSmall:0.5rem;--ds-spacing-xSmall:0.75rem;--ds-spacing-small:1rem;--ds-spacing-medium:1.5rem;--ds-spacing-large:2rem;--ds-spacing-xLarge:2.5rem;--ds-spacing-2xLarge:3rem;--ds-spacing-3xLarge:3.5rem;--ds-spacing-4xLarge:4rem;--ds-spacing-5xLarge:4.5rem;--ds-spacing-layout-2xSmall:1rem;--ds-spacing-layout-xSmall:1.5rem;--ds-spacing-layout-small:2rem;--ds-spacing-layout-medium:3rem;--ds-spacing-layout-large:4rem;--ds-spacing-layout-xLarge:6rem;--ds-spacing-layout-2xLarge:8rem}html{font-size:100%}body{font-size:1rem}.heading--2xLarge,h1,.h1{font-size:2.25rem;line-height:1.166667;font-weight:700;font-variation-settings:"wdth" 90;letter-spacing:-1.2px;text-transform:uppercase}@media (min-width: 30rem){.heading--2xLarge,h1,.h1{font-size:3.5rem;line-height:1.142857;font-weight:700;font-variation-settings:"wdth" 90;letter-spacing:-1.4px;text-transform:uppercase}}.heading--xLarge,h2,.h2{font-size:1.875rem;line-height:1.2;font-weight:700;font-variation-settings:"wdth" 90;letter-spacing:-1.4px;text-transform:normal}@media (min-width: 30rem){.heading--xLarge,h2,.h2{font-size:3rem;line-height:1.083333;font-weight:700;font-variation-settings:"wdth" 90;letter-spacing:-1.4px;text-transform:normal}}.heading--large,h3,.h3{font-size:1.5rem;line-height:1.166667;font-weight:650;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}@media (min-width: 30rem){.heading--large,h3,.h3{font-size:2rem;line-height:1.125;font-weight:650;font-variation-settings:"wdth" 100;letter-spacing:-1.4px;text-transform:normal}}.heading--medium,h4,.h4{font-size:1.25rem;line-height:1.333333;font-weight:650;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}@media (min-width: 30rem){.heading--medium,h4,.h4{font-size:1.5rem;line-height:1.166667;font-weight:650;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}}.heading--small,h5,.h5{font-size:1.125rem;line-height:1.2;font-weight:600;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}@media (min-width: 30rem){.heading--small,h5,.h5{font-size:1.25rem;line-height:1.2;font-weight:600;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}}.heading--xSmall,h6,.h6{font-size:1rem;line-height:1.125;font-weight:700;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:uppercase}@media (min-width: 30rem){.heading--xSmall,h6,.h6{font-size:1.125rem;line-height:1.2;font-weight:700;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:uppercase}}.bodyText{line-height:1.5}.bodyText--2xLarge{font-size:1.375rem}.bodyText--xLarge{font-size:1.25rem}.bodyText--large{font-size:1.125rem}.bodyText--medium{font-size:1rem}.bodyText--small{font-size:0.875rem}.bodyText--xSmall{font-size:0.75rem}:root{--ds-fontFamily-heading:"Open Sans", sans-serif;--ds-fontFamily-body:"Open Sans", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:"Open Sans Variable", sans-serif;--ds-fontFamily-body:"Open Sans Variable", sans-serif}}.button-group{display:flex;flex-wrap:wrap;gap:var(--ds-spacing-xSmall)}
|
|
1
|
+
html{box-sizing:border-box}html *,html *::before,html *::after{box-sizing:inherit}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-overlay-black-00:rgb(0 0 0 / 0);--ds-overlay-black-05:rgb(0 0 0 / 0.05);--ds-overlay-black-10:rgb(0 0 0 / 0.1);--ds-overlay-black-15:rgb(0 0 0 / 0.15);--ds-overlay-black-30:rgb(0 0 0 / 0.3);--ds-overlay-black-40:rgb(0 0 0 / 0.4);--ds-overlay-black-50:rgb(0 0 0 / 0.5);--ds-overlay-black-70:rgb(0 0 0 / 0.7);--ds-overlay-black-80:rgb(0 0 0 / 0.8);--ds-overlay-white-00:rgb(255 255 255 / 0);--ds-overlay-white-05:rgb(255 255 255 / 0.05);--ds-overlay-white-10:rgb(255 255 255 / 0.1);--ds-overlay-white-15:rgb(255 255 255 / 0.15);--ds-overlay-white-30:rgb(255 255 255 / 0.3);--ds-overlay-white-40:rgb(255 255 255 / 0.4);--ds-overlay-white-50:rgb(255 255 255 / 0.5);--ds-overlay-white-70:rgb(255 255 255 / 0.7);--ds-overlay-white-80:rgb(255 255 255 / 0.8);--ds-palette-black:#000000;--ds-palette-white:#ffffff;--ds-palette-black-03:#f7f7f7;--ds-palette-black-05:#f2f2f2;--ds-palette-black-10:#e6e6e6;--ds-palette-black-20:#cccccc;--ds-palette-black-30:#b3b3b3;--ds-palette-black-40:#999999;--ds-palette-black-50:#808080;--ds-palette-black-60:#666666;--ds-palette-black-70:#4d4d4d;--ds-palette-black-80:#333333;--ds-palette-black-90:#1a1a1a;--ds-palette-black-95:#0c0c0c;--ds-palette-blue-05:#e5f8ff;--ds-palette-blue-10:#c2eeff;--ds-palette-blue-20:#8adeff;--ds-palette-blue-30:#5cd1ff;--ds-palette-blue-40:#1abeff;--ds-palette-blue-50:#009ad6;--ds-palette-blue-60:#0084b8;--ds-palette-blue-70:#005b80;--ds-palette-blue-80:#053c52;--ds-palette-blue-90:#032330;--ds-palette-green-05:#dffbe1;--ds-palette-green-10:#bef4c1;--ds-palette-green-20:#85e08a;--ds-palette-green-30:#66cc6b;--ds-palette-green-40:#43b149;--ds-palette-green-50:#279b2d;--ds-palette-green-60:#257e29;--ds-palette-green-70:#216325;--ds-palette-green-80:#183f19;--ds-palette-green-90:#0f2410;--ds-palette-mainBlue-05:#e5f5ff;--ds-palette-mainBlue-10:#cdebff;--ds-palette-mainBlue-20:#99d7ff;--ds-palette-mainBlue-30:#70c7ff;--ds-palette-mainBlue-40:#3db3ff;--ds-palette-mainBlue-50:#009bff;--ds-palette-mainBlue-60:#007fd1;--ds-palette-mainBlue-70:#005a94;--ds-palette-mainBlue-80:#003152;--ds-palette-mainBlue-90:#001929;--ds-palette-red-05:#ffeceb;--ds-palette-red-10:#ffd8d6;--ds-palette-red-20:#fdb7b4;--ds-palette-red-30:#f87c77;--ds-palette-red-40:#f0514c;--ds-palette-red-50:#d71f19;--ds-palette-red-60:#bd2828;--ds-palette-red-70:#8b2623;--ds-palette-red-80:#602220;--ds-palette-red-90:#321c1b;--ds-palette-yellow-05:#fff1db;--ds-palette-yellow-10:#ffe7c2;--ds-palette-yellow-20:#ffd799;--ds-palette-yellow-30:#fbc05f;--ds-palette-yellow-40:#eea22b;--ds-palette-yellow-50:#ce8103;--ds-palette-yellow-60:#b26d00;--ds-palette-yellow-70:#7a4b00;--ds-palette-yellow-80:#4e3104;--ds-palette-yellow-90:#282115}:root{--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-80);--ds-textColor-success:var(--ds-palette-green-80);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link--standalone:var(--ds-palette-black-70);--ds-textColor-link--standalone-hover:var(--ds-palette-black-80);--ds-textColor-link--standalone-active:var(--ds-palette-black-95);--ds-textColor-link--standalone-focus:var(--ds-palette-black-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-overlay-black-20);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-white-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20)}:root{--ds-spacing-4xSmall:0.125rem;--ds-spacing-3xSmall:0.25rem;--ds-spacing-2xSmall:0.5rem;--ds-spacing-xSmall:0.75rem;--ds-spacing-small:1rem;--ds-spacing-medium:1.5rem;--ds-spacing-large:2rem;--ds-spacing-xLarge:2.5rem;--ds-spacing-2xLarge:3rem;--ds-spacing-3xLarge:3.5rem;--ds-spacing-4xLarge:4rem;--ds-spacing-5xLarge:4.5rem;--ds-spacing-layout-2xSmall:1rem;--ds-spacing-layout-xSmall:1.5rem;--ds-spacing-layout-small:2rem;--ds-spacing-layout-medium:3rem;--ds-spacing-layout-large:4rem;--ds-spacing-layout-xLarge:6rem;--ds-spacing-layout-2xLarge:8rem}html{font-size:100%}body{font-size:1rem}.ds-font--heading{font-family:var(--ds-fontFamily-heading)}.ds-font--body{font-family:var(--ds-fontFamily-body)}.ds-font--regular{font-weight:var(--ds-fontWeight-regular)}.ds-font--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font--semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font--bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking--xtight{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking--tight{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking--normal{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking--wide{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking--xwide{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading--small{line-height:var(--ds-lineHeight-small)}.ds-leading--medium{line-height:var(--ds-lineHeight-medium)}.ds-leading--large{line-height:var(--ds-lineHeight-large)}.ds-leading--xlarge{line-height:var(--ds-lineHeight-xLarge)}.ds-width--normal{font-stretch:var(--ds-fontWidth-normal)}.ds-width--condense{font-stretch:var(--ds-fontWidth-condense)}.ds-number--proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph--16{margin-bottom:var(--ds-fontSize-16)}.ds-paragraph--20{margin-bottom:var(--ds-fontSize-20)}.ds-list--spacing{gap:4px}.ds-text-color--default{color:var(--ds-textColor-default)}.ds-text--2xl-regular{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text--xl-regular{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text--lg-regular{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text--md-regular{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text--sm-regular{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text--xs-regular{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text--2xl-semibold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xl-semibold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text--lg-semibold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text--md-semibold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text--sm-semibold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xs-semibold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text--2xl-bold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text--xl-bold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text--lg-bold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text--md-bold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text--sm-bold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text--xs-bold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-heading--2xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-40);font-weight:var(--ds-fontWeight-bold);letter-spacing:-1.2px;font-stretch:var(--ds-fontWidth-normal);line-height:48px;text-transform:uppercase}@media (min-width: 30rem){.ds-heading--2xLarge{font-size:var(--ds-fontSize-56);letter-spacing:var(--ds-letterSpacing-tight);line-height:64px;font-stretch:var(--ds-fontWidth-condense)}}.ds-heading--xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-32);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing-tight);line-height:36px;font-stretch:var(--ds-fontWidth-normal)}@media (min-width: 30rem){.ds-heading--xLarge{font-size:var(--ds-fontSize-48);line-height:52px;font-stretch:var(--ds-fontWidth-condense)}}.ds-heading--large{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-24);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing-normal);line-height:28px}@media (min-width: 30rem){.ds-heading--large{font-size:var(--ds-fontSize-32);font-weight:var(--ds-fontWeight-semiboldPlus);letter-spacing:var(--ds-letterSpacing-tight);line-height:36px}}.ds-heading--medium{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semiboldPlus);letter-spacing:var(--ds-letterSpacing-normal);line-height:28px}@media (min-width: 30rem){.ds-heading--medium{font-size:var(--ds-fontSize-24);line-height:24px}}.ds-heading--small{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-normal);line-height:20px}@media (min-width: 30rem){.ds-heading--small{font-size:var(--ds-fontSize-20);line-height:24px}}.ds-heading--xSmall{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-heading);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold);letter-spacing:var(--ds-letterSpacing-normal);line-height:18px;text-transform:uppercase}@media (min-width: 30rem){.ds-heading--xSmall{font-size:var(--ds-fontSize-18);line-height:20px}}.ds-bodyText--2xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--2xLarge{font-size:var(--ds-fontSize-22)}}.ds-bodyText--xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--xLarge{font-size:var(--ds-fontSize-20)}}.ds-bodyText--large{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--large{font-size:var(--ds-fontSize-18)}}.ds-bodyText--medium{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--medium{font-size:var(--ds-fontSize-16)}}.ds-bodyText--small{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--small{font-size:var(--ds-fontSize-14)}}:root{--ds-fontFamily-heading:"Open Sans", sans-serif;--ds-fontFamily-body:"Open Sans", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:"Open Sans Variable", sans-serif;--ds-fontFamily-body:"Open Sans Variable", sans-serif}}.button-group{display:flex;flex-wrap:wrap;gap:var(--ds-spacing-xSmall)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as i}from"./index-42701395.js";export{s as setNonce}from"./index-42701395.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-accordion_3",[[1,"ds-accordion",{variant:[1],borderAligned:[4,"border-aligned"],openByDefault:[4,"open-by-default"],accordionId:[1,"accordion-id"],headingLevel:[2,"heading-level"],useCloseButton:[4,"use-close-button"],closeButtonLabel:[1,"close-button-label"],hideTopBorder:[4,"hide-top-border"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[6,"ds-button",{value:[1],variant:[1],colour:[1],size:[1],fontWeight:[1,"font-weight"],icon:[1],iconPosition:[1,"icon-position"],type:[1],disabled:[4],ariaDisabled:[1,"aria-disabled"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],dsTitle:[1,"
|
|
1
|
+
import{p as e,b as i}from"./index-42701395.js";export{s as setNonce}from"./index-42701395.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-accordion_3",[[1,"ds-accordion",{variant:[1],borderAligned:[4,"border-aligned"],openByDefault:[4,"open-by-default"],accordionId:[1,"accordion-id"],headingLevel:[2,"heading-level"],useCloseButton:[4,"use-close-button"],closeButtonLabel:[1,"close-button-label"],hideTopBorder:[4,"hide-top-border"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[6,"ds-button",{value:[1],variant:[1],colour:[1],size:[1],fontWeight:[1,"font-weight"],icon:[1],iconPosition:[1,"icon-position"],type:[1],disabled:[4],fullWidth:[4,"full-width"],ariaDisabled:[1,"aria-disabled"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],dsTitle:[1,"title"],role:[1],hidden:[4],message:[32]}]]],["ds-text-input",[[6,"ds-text-input",{label:[1],placeholder:[1],dsId:[1,"id"],name:[1],disabled:[4],optional:[4],required:[4],readonly:[4],value:[1],min:[2],max:[2],maxlength:[2],pattern:[1],autocomplete:[1],optionalText:[1,"optional-text"],errorText:[1,"error-text"],successText:[1,"success-text"],assistiveText:[1,"assistive-text"],actionButtonAriaLabel:[1,"action-button-aria-label"],hiddenAssistiveText:[1,"hidden-assistive-text"],prefixText:[1,"prefix-text"],suffixText:[1,"suffix-text"],icon:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledBy:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],hasFocus:[32],clearButtonVisible:[32],passwordInputVisible:[32],inputActive:[32],togglePasswordVisibility:[64],clearInput:[64]}]]],["ds-link",[[1,"ds-link",{text:[1],size:[1],variant:[1],weight:[1],icon:[1025],iconPosition:[1025,"icon-position"],href:[1],target:[1],download:[4],language:[1,"lang"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{text:[1],iconPosition:[1,"icon-position"],href:[1],target:[1],language:[1,"lang"]}]]]],e))));
|