@uh-design-system/component-library 0.2.4 → 0.4.0

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css

@@ -16,10 +16,10 @@
   }
 }
 
-.label-container {
+.ds-input--label-container {
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.label-container label {
+.ds-input--label-container label {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -27,11 +27,17 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.label-container label.required::after {
+.ds-input--label-container label.required::after {
   content: " *";
   color: var(--ds-textColor-secondary);
 }
-.label-container small {
+.ds-input--label-container label.optional::after {
+  content: " (" attr(data-optional-text, "optional") ")";
+  color: var(--ds-textColor-secondary);
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-regular);
+}
+.ds-input--label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
@@ -41,8 +47,7 @@
   margin-block-start: var(--ds-spacing-3xSmall);
   color: var(--ds-textColor-secondary);
 }
-
-.input-container {
+.ds-input--container {
   box-sizing: border-box;
   width: 100%;
   display: inline-flex;
@@ -53,47 +58,66 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.input-container.invalid {
-  background-color: var(--ds-palette-danger-light);
+.ds-input--container:focus-visible, .ds-input--container:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-input--container.invalid {
+  background-color: var(--ds-bgColor-danger);
+  border-color: var(--ds-borderColor-danger);
+}
+.ds-input--container.invalid:hover:not(.ds-input--container.invalid:focus-within) {
+  background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.input-container.valid {
-  background-color: var(--ds-palette-success-light);
+.ds-input--container.invalid.active {
+  background-color: var(--ds-bgColor-danger-active);
+  border-color: var(--ds-borderColor-danger);
+}
+.ds-input--container.valid {
+  background-color: var(--ds-bgColor-success);
+  border-color: var(--ds-borderColor-success);
+}
+.ds-input--container.valid:hover:not(.ds-input--container.valid:focus-within) {
+  background-color: var(--ds-bgColor-success-hover);
+  border-color: var(--ds-borderColor-success);
+}
+.ds-input--container.valid.active {
+  background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.input-container.readonly, .input-container.disabled {
+.ds-input--container.readonly, .ds-input--container.disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.input-container:has(input:active) {
+.ds-input--container:has(input:active) {
   outline: none;
 }
-.input-container:has(input:active):not:has(input:disabled, input:readonly) {
-  border-color: var(--ds-borderColor-primary);
-}
-.input-container.active:not(.input-container.disabled, .input-container.readonly) {
-  border-color: var(--ds-borderColor-primary);
+.ds-input--container:has(input:active):not:has(input:disabled, input:readonly) {
+  border-color: var(--ds-borderColor-default);
 }
-.input-container:hover:not(.input-container.disabled, .input-container.readonly, .input-container.active) {
-  border-color: var(--ds-borderColor-black);
+.ds-input--container.active:not(.ds-input--container.disabled, .ds-input--container.readonly, .ds-input--container.invalid, .ds-input--container.valid) {
+  border-color: var(--ds-borderColor-default);
+  background-color: var(--ds-bgColor-white-active);
 }
-.input-container:focus-within {
-  outline-width: var(--ds-borderWidth-thin);
-  outline-offset: 1px;
-  outline-style: solid;
-  outline-color: var(--ds-palette-black);
+.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) {
+  border-color: var(--ds-borderColor-default);
+  background-color: var(--ds-bgColor-white-hover);
 }
-.input-container:focus-within:not(.input-container:focus-within.invalid, .input-container:focus-within.valid, .input-container:focus-within.readonly) {
+.ds-input--container:focus-within:not(.ds-input--container:focus-within.invalid, .ds-input--container:focus-within.valid, .ds-input--container:focus-within.readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.input-container:focus-within * > ds-button.suffix > button:focus-visible {
+.ds-input--container:focus-within * > ds-button.suffix > button:focus-visible {
   background-clip: padding-box;
   outline-offset: -5px;
   box-shadow: none;
   height: var(--ds-spacing-xLarge);
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.input-container > input {
+.ds-input--container > input {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -106,16 +130,16 @@
   height: var(--ds-spacing-xLarge);
   line-height: var(--ds-fontSize-24);
   color: var(--ds-textColor-default);
-  padding-block: var(--ds-spacing-4xSmall);
   border: none;
+  padding-block: var(--ds-spacing-4xSmall);
 }
-.input-container > input:disabled {
+.ds-input--container > input:disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.input-container > input:disabled::placeholder {
+.ds-input--container > input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.input-container > input::placeholder {
+.ds-input--container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -123,53 +147,53 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.input-container > input:focus {
+.ds-input--container > input:focus {
   outline: none;
   border: none;
 }
-.input-container > input[type=number] {
+.ds-input--container > input[type=number] {
   -moz-appearance: textfield;
 }
-.input-container > input::-webkit-search-decoration, .input-container > input::-webkit-search-cancel-button, .input-container > input::-webkit-search-results-button, .input-container > input::-webkit-search-results-decoration, .input-container > input::-webkit-inner-spin-button, .input-container > input::-webkit-outer-spin-button {
+.ds-input--container > input::-webkit-search-decoration, .ds-input--container > input::-webkit-search-cancel-button, .ds-input--container > input::-webkit-search-results-button, .ds-input--container > input::-webkit-search-results-decoration, .ds-input--container > input::-webkit-inner-spin-button, .ds-input--container > input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.input-container:has(span.prefix, ds-icon.prefix) {
+.ds-input--container:has(span.prefix, ds-icon.prefix) {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.input-container:has(span.prefix, ds-icon.prefix) > input {
+.ds-input--container:has(span.prefix, ds-icon.prefix) > input {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.input-container:has(ds-button.suffix) {
+.ds-input--container:has(ds-button.suffix) {
   padding-inline-end: unset;
 }
-.input-container span.prefix, .input-container span.suffix {
+.ds-input--container span.prefix, .ds-input--container span.suffix {
   color: var(--ds-palette-black-70);
 }
-.input-container ds-icon.prefix, .input-container ::slotted([slot=prefix]) {
+.ds-input--container ds-icon.prefix, .ds-input--container ::slotted([slot=prefix]) {
   height: 1.5rem;
   color: var(--ds-textColor-default);
 }
-.input-container ds-button.suffix {
+.ds-input--container ds-button.suffix {
   margin-top: calc(var(--ds-spacing-3xSmall) * -1);
   margin-right: calc(var(--ds-spacing-4xSmall) * -1);
   max-height: 40px;
 }
 
-.error-text-container,
-.success-text-container {
+.error-text--container,
+.success-text--container {
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-2xSmall);
 }
-.error-text-container ds-icon,
-.success-text-container ds-icon {
+.error-text--container ds-icon,
+.success-text--container ds-icon {
   display: block;
   height: 1.5rem;
 }
-.error-text-container small,
-.success-text-container small {
+.error-text--container small,
+.success-text--container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -177,10 +201,10 @@
   line-height: var(--ds-lineHeight-large);
 }
 
-.error-text-container {
+.error-text--container {
   color: var(--ds-textColor-danger);
 }
 
-.success-text-container {
+.success-text--container {
   color: var(--ds-textColor-success);
 }

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js

@@ -24,6 +24,7 @@ export class DsTextInput {
     dsId = 'input';
     name;
     disabled;
+    optional;
     required;
     readonly;
     value;
@@ -32,6 +33,7 @@ export class DsTextInput {
     maxlength;
     pattern;
     autocomplete;
+    optionalText;
     errorText;
     successText;
     assistiveText;
@@ -72,7 +74,7 @@ export class DsTextInput {
         const text = type === 'success' ? this.successText : this.errorText;
         const icon = type === 'success' ? 'check_circle_fill' : 'warning_fill';
         const className = type + '-text';
-        return (h("slot", { name: className }, text && (h("div", { class: `${className}-container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
+        return (h("slot", { name: className }, text && (h("div", { class: `${className}--container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
     }
     renderPrefixContent() {
         if (this.prefixText) {
@@ -102,14 +104,14 @@ export class DsTextInput {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: 'b36b842382f0f0635c5372a856b140f05f7f5cff' }, h("div", { key: '4cedfdd4a891b8317f8b948824c5fe18b8f2c345', class: "label-container" }, h("slot", { key: '5072f7cab04c4c6dcf3bc2a72f88c83f3da5c74b', name: "label" }, h("label", { key: '513249ab30b24df9ad204ec533eb5b0714a5b36e', class: classNames({ required: this.required }), htmlFor: this.dsId }, this.label)), h("slot", { key: 'c3e05ad3e51365c7e8df7a276b4fc089af4edba7', name: "help-text" }, h("small", { key: 'fdf1904fe96fd22b4ba650e693db0d3fcecdf33a', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: 'd9726a8a031a786169ff47a809f8309117d00eaa', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'c0fb788b2f35f478015169d2fc558885fc9c205a', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('input-container', {
+        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', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
                 invalid: !!this.errorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: 'adb2aa8a54d45aeeca8e209f0c0a28d2aa0141f8', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, 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 ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.successTextId]: this.successText,
                     [this.errorTextId]: this.errorText,
@@ -183,7 +185,7 @@ export class DsTextInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ds-id",
+                "attribute": "id",
                 "reflect": false,
                 "defaultValue": "'input'"
             },
@@ -225,6 +227,25 @@ export class DsTextInput {
                 "attribute": "disabled",
                 "reflect": false
             },
+            "optional": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "optional",
+                "reflect": false
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -377,6 +398,25 @@ export class DsTextInput {
                 "attribute": "autocomplete",
                 "reflect": false
             },
+            "optionalText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "optional-text",
+                "reflect": false
+            },
             "errorText": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/01-base-components/ds-text-input/{ds-text-input.examples.stories.js → stories/ds-text-input.examples.stories.js}

@@ -22,3 +22,16 @@ export const UsingSlots = {
     </ds-text-input>
   `,
 };
+export const FormValidation = {
+    render: () => html `
+    <form>
+      <ds-text-input type="number" label="Minimum value" id="min" name="min" min="5" required></ds-text-input>
+      <ds-text-input type="number" label="Maximum value" id="max" name="max" min="100" required></ds-text-input>
+      <ds-text-input type="email" label="Email" id="email" name="email" required></ds-text-input>
+      <ds-text-input type="tel" label="Telephone" id="tel" name="tel" required></ds-text-input>
+      <ds-text-input type="password" label="Password" id="password" name="password" required action-button-aria-label="password toggle"></ds-text-input>
+      <ds-text-input type="url" label="Url" id="url" name="url" required></ds-text-input>
+      <ds-button style="margin-top: 0.5rem" type="submit" value="Submit"></ds-button>
+    </form>
+  `,
+};

package/dist/collection/components/01-base-components/ds-text-input/{ds-text-input.features.stories.js → stories/ds-text-input.features.stories.js}

@@ -1,5 +1,6 @@
-import { getDsElem } from "../../../utils/tests/testUtils";
+import { getDsElem } from "../../../../utils/tests/testUtils";
 import { expect, userEvent, waitFor } from "@storybook/test";
+import { html } from "lit";
 const meta = {
     title: 'Base Components/TextInput/Features',
     component: 'ds-text-input',
@@ -31,6 +32,20 @@ Required.args = {
     label: 'Label',
     required: true,
 };
+export const Optional = {};
+Optional.args = {
+    label: 'Label',
+    optional: true,
+};
+export const OptionalWithCustomText = {
+    render: () => html `<ds-text-input label="Optional" optional optional-text="vapaavalintainen"></ds-text-input>`
+};
+export const MaxLength = {};
+MaxLength.args = {
+    label: 'Label',
+    maxlength: 5,
+    assistiveText: 'Max length of 5'
+};
 export const Valid = {};
 Valid.args = {
     label: 'Label',
@@ -45,9 +60,8 @@ Invalid.args = {
 };
 export const WithIcon = {
     args: {
-        label: 'Search',
-        icon: 'info',
-        helpText: 'Assistive text',
+        label: 'User',
+        icon: 'account_circle_fill',
         type: 'email',
     },
 };

package/dist/collection/components/01-base-components/ds-text-input/{ds-text-input.stories.js → stories/ds-text-input.stories.js}

@@ -1,5 +1,5 @@
-import { textInputTypes } from "./utils";
-import { icons } from "../../00-foundations/icons/iconList";
+import { textInputTypes } from "../utils";
+import { icons } from "../../../00-foundations/icons/iconList";
 const meta = {
     title: 'Base Components/TextInput',
     component: 'ds-text-input',

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DsVisuallyHidden {
     render() {
-        return (h("slot", { key: '390610148832811748f7700f0d438b257bdb354d' }));
+        return (h("slot", { key: '3a7edab043d1612c06a4eb6fedacec27216f3be3' }));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/introduction/introduction.stories.js

@@ -0,0 +1,9 @@
+import IntroDocs from "./Introduction.mdx";
+export default {
+    title: 'Introduction',
+    parameters: {
+        docs: {
+            page: IntroDocs,
+        },
+    },
+};

package/dist/collection/utils/link/linkUtils.js

@@ -0,0 +1,11 @@
+export const opensInNewTab = (target) => target === '_blank';
+export const visuallyHiddenAssistiveText = (lang) => {
+    switch (lang) {
+        case 'fi':
+            return 'Avautuu uuteen välilehteen';
+        case 'sv':
+            return 'Öppnas i en ny flik';
+        default:
+            return 'Opens in a new tab';
+    }
+};

package/dist/collection/utils/typography/typographyUtils.js

@@ -83,3 +83,24 @@ export const createCategorySection = (category, fonts, renderedCategories) => {
     section.appendChild(gridContainer);
     return section;
 };
+export const getCSSClasses = (prefix) => {
+    const stylesheets = Array.from(document.styleSheets);
+    let classNames = [];
+    for (let sheet of stylesheets) {
+        try {
+            const rules = Array.from(sheet.cssRules);
+            for (let rule of rules) {
+                if (rule.selectorText) {
+                    const selector = rule.selectorText;
+                    if (selector.startsWith(`.${prefix}`)) {
+                        classNames.push(selector.substring(1));
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.warn("Could not access stylesheet:", e);
+        }
+    }
+    return classNames;
+};

package/dist/collection/utils/utils.js

@@ -33,3 +33,8 @@ export function generateLoremIpsum({ paragraphs = 1, wordsPerParagraph = 50, sta
     }
     return generatedText.join('\n\n');
 }
+export function remToPx(remString) {
+    const rootFontSize = 16;
+    const rem = parseFloat(remString);
+    return `${rem * rootFontSize}px`;
+}

package/dist/component-library/attributes-9419ac39.js

@@ -0,0 +1 @@
+const a=(a,r=[])=>{const i={};return r.forEach((r=>{a.hasAttribute(r)&&(null!==a.getAttribute(r)&&(i[r]=a.getAttribute(r)),a.removeAttribute(r))})),i},r=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],i=(i,e)=>{let l=[...r];return e&&e.length>0&&(l=l.filter((a=>!e.includes(a)))),a(i,l)};export{a,i}

package/dist/component-library/component-library.css

@@ -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-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-90);--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-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-90);--ds-bgColor-black-hover:var(--ds-palette-black-70);--ds-bgColor-black-active:var(--ds-palette-white-60);--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);--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)}
+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)}

package/dist/component-library/component-library.esm.js

@@ -1 +1 @@
-import{p as e,b as i}from"./index-4200d514.js";export{s as setNonce}from"./index-4200d514.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-accordion_2",[[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"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],title:[1],role:[1],hidden:[4],message:[32]}]]],["ds-button_2",[[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-visually-hidden"]]],["ds-text-input",[[6,"ds-text-input",{label:[1],placeholder:[1],dsId:[1,"ds-id"],name:[1],disabled:[4],required:[4],readonly:[4],value:[1],min:[2],max:[2],maxlength:[2],pattern:[1],autocomplete:[1],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]}]]]],e))));
+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))));