@uh-design-system/component-library 0.5.2 → 0.6.0

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

@@ -16,33 +16,38 @@ export const CustomWidth = {
       }
     </style>
     <div class="ds-sb-custom-width">
-      <ds-text-input label='Smaller input' style='width: 150px'></ds-text-input>
-      <ds-text-input label='Full width input' style='width: 100%'></ds-text-input>
-      <!You can set any custom styles to the input element>
+      <ds-text-input ds-label='Smaller input' style='width: 150px'></ds-text-input>
+      <ds-text-input ds-label='Full width input' style='width: 100%'></ds-text-input>
+      <!-- You can set any custom styles to the input element -->
     </div>
   `,
 };
 export const UsingSlots = {
+    parameters: {
+        a11y: {
+            disable: true
+        }
+    },
     render: () => html `
-    <ds-text-input aria-label='Slotted label'>
-      <label ds-id='label' slot='label'><b>Slotted label</b></label>
-      <p slot='help-text'>Lorem ipsum</p>
-      <ds-icon name='archive' slot='prefix'></ds-icon>
+    <ds-text-input ds-id='input' aria-label='Slotted label'>
+      <label for='input' id='label' slot='label'><b>Slotted label</b></label>
+      <p slot='assistiveText'>Lorem ipsum</p>
+      <ds-icon ds-name='archive' slot='prefix'></ds-icon>
       <small slot='suffix'>Suffix</small>
-      <div slot='input-validity'>Validity slot</div>
+      <div slot='validity'>Validity slot</div>
     </ds-text-input>
   `,
 };
 const formValidationDOM = html `
   <form class="ds-sb-form-validation">
-    <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-text-input ds-type="number" ds-label="Minimum value" ds-id="min" ds-name="min" ds-min="5" ds-required></ds-text-input>
+    <ds-text-input ds-type="number" ds-label="Maximum value" ds-id="max" ds-name="max" ds-min="100" ds-required></ds-text-input>
+    <ds-text-input ds-type="email" ds-label="Email" ds-id="email" ds-name="email" ds-required></ds-text-input>
+    <ds-text-input ds-type="tel" ds-label="Telephone" ds-id="tel" ds-name="tel" ds-required></ds-text-input>
+    <ds-text-input ds-type="password" ds-label="Password" ds-id="password" ds-name="password" ds-required ds-action-button-aria-label="password toggle"></ds-text-input>
+    <ds-text-input ds-type="url" ds-label="Url" ds-id="url" ds-name="url" ds-required></ds-text-input>
     <div class="button-group ds-sb-form-validation__buttons">
-      <ds-button type="submit" value="Submit"></ds-button>
+      <ds-button ds-type="submit" ds-value="Submit"></ds-button>
     </div>
   </form>
 `;
@@ -71,10 +76,10 @@ export const FormValidation = {
 const clientSideValidationDOM = html `
   <div class="ds-sb-client-side-validation">
     <div id="example-error-container">
-      <ds-text-input id="example-error" label="Error message" assistive-text='Type "error" and move to next input to display a validation message.'></ds-text-input>
+      <ds-text-input id="example-error" ds-id="example-error-textinput" ds-label="Error message" ds-assistive-text='Type "error" and move to next input to display a validation message.'></ds-text-input>
     </div>
     <div id="example-success-container">
-      <ds-text-input id="example-success" label="Success message" assistive-text='Type "success" and move to next input to display a validation message.'></ds-text-input>
+      <ds-text-input id="example-success" ds-id="example-success-textinput" ds-label="Success message" ds-assistive-text='Type "success" and move to next input to display a validation message.'></ds-text-input>
     </div>
   </div>
 `;
@@ -108,9 +113,9 @@ export const ClientSideValidation = {
             const target = e.target;
             switch (target.value) {
                 case 'error':
-                    return errorElem.errorText = 'Error message';
+                    return errorElem.dsErrorText = 'Error message';
                 default:
-                    errorElem.errorText = "";
+                    errorElem.dsErrorText = "";
                     return;
             }
         });
@@ -118,9 +123,9 @@ export const ClientSideValidation = {
             const target = e.target;
             switch (target.value) {
                 case 'success':
-                    return successElem.successText = 'Success message';
+                    return successElem.dsSuccessText = 'Success message';
                 default:
-                    successElem.successText = "";
+                    successElem.dsSuccessText = "";
                     return;
             }
         });

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

@@ -8,68 +8,68 @@ const meta = {
 export default meta;
 export const WithPlaceholder = {};
 WithPlaceholder.args = {
-    label: 'Label',
-    placeholder: 'Placeholder',
+    dsLabel: 'Label',
+    dsPlaceholder: 'Placeholder',
 };
 export const WithAssistiveText = {};
 WithAssistiveText.args = {
-    label: 'Label',
-    assistiveText: 'Assistive text',
+    dsLabel: 'Label',
+    dsAssistiveText: 'Assistive text',
 };
 export const Disabled = {};
 Disabled.args = {
-    label: 'Label',
-    disabled: true,
+    dsLabel: 'Label',
+    dsDisabled: true,
 };
 export const ReadOnly = {};
 ReadOnly.args = {
-    label: 'Label',
-    value: 'Input text',
-    readonly: true,
+    dsLabel: 'Label',
+    dsValue: 'Input text',
+    dsReadonly: true,
 };
 export const Required = {};
 Required.args = {
-    label: 'Label',
-    required: true,
+    dsLabel: 'Label',
+    dsRequired: true,
 };
 export const Optional = {};
 Optional.args = {
-    label: 'Label',
-    optional: true,
+    dsLabel: 'Label',
+    dsOptional: true,
 };
 export const OptionalWithCustomText = {
-    render: () => html `<ds-text-input label="Optional" optional optional-text="vapaavalintainen"></ds-text-input>`
+    render: () => html `<ds-text-input ds-label="Optional" ds-optional ds-optional-text="vapaavalintainen"></ds-text-input>`
 };
 export const MaxLength = {};
 MaxLength.args = {
-    label: 'Label',
-    maxlength: 5,
-    assistiveText: 'Max length of 5'
+    dsLabel: 'Label',
+    dsMaxlength: 5,
+    dsAssistiveText: 'Max length of 5'
 };
 export const Valid = {};
 Valid.args = {
-    label: 'Label',
-    valid: true,
-    successText: 'Success text',
+    dsLabel: 'Label',
+    dsValid: true,
+    dsSuccessText: 'Success text',
 };
 export const Invalid = {};
 Invalid.args = {
-    label: 'Label',
-    invalid: true,
-    errorText: 'Error text',
+    dsLabel: 'Label',
+    dsInvalid: true,
+    dsErrorText: 'Error text',
 };
 export const WithIcon = {
     args: {
-        label: 'User',
-        icon: 'account_circle_fill',
-        type: 'email',
+        dsLabel: 'User',
+        dsIcon: 'account_circle_fill',
+        dsType: 'email',
     },
 };
 export const PasswordInput = {
     args: {
-        label: 'Label',
-        type: 'password',
-        actionButtonAriaLabel: 'Action button',
+        dsLabel: 'Label',
+        dsType: 'password',
+        dsActionButtonAriaLabel: 'Action button',
     },
     play: async ({ canvasElement, step }) => {
         const dsElem = await getDsElem(canvasElement, 'ds-text-input');
@@ -97,9 +97,9 @@ export const PasswordInput = {
 };
 export const SearchInput = {
     args: {
-        label: 'Label',
-        type: 'search',
-        actionButtonAriaLabel: 'Action button',
+        dsLabel: 'Label',
+        dsType: 'search',
+        dsActionButtonAriaLabel: 'Action button',
     },
     play: async ({ canvasElement, step }) => {
         const dsElem = await getDsElem(canvasElement, 'ds-text-input');
@@ -124,17 +124,17 @@ export const SearchInput = {
 };
 export const PrefixText = {
     args: {
-        label: 'Phone number',
-        prefixText: '+358',
-        type: 'tel',
-        hiddenAssistiveText: 'Without the country code',
+        dsLabel: 'Phone number',
+        dsPrefixText: '+358',
+        dsType: 'tel',
+        dsHiddenAssistiveText: 'Without the country code',
     },
 };
 export const SuffixText = {
     args: {
-        label: 'Timeout',
-        suffixText: 'minutes',
-        type: 'number',
-        hiddenAssistiveText: 'Enter the number of minutes',
+        dsLabel: 'Timeout',
+        dsSuffixText: 'minutes',
+        dsType: 'number',
+        dsHiddenAssistiveText: 'Enter the number of minutes',
     },
 };

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

@@ -1,72 +1,46 @@
 import { icons } from "../../../00-foundations/icons/iconList";
-import { textInputTypes } from "../utils";
 const meta = {
     title: 'Base Components/TextInput',
     component: 'ds-text-input',
+    argTypes: {
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name),
+        },
+    },
 };
 export default meta;
 export const Default = {
     args: {
-        label: "Label"
+        dsLabel: "Label"
     }
 };
 Default.args = {
-    label: 'Label',
+    dsLabel: 'Label',
 };
 export const Playground = {
-    argTypes: {
-        label: { control: 'text' },
-        placeholder: { control: 'text' },
-        identifier: { control: 'text' },
-        name: { control: 'text' },
-        disabled: { control: 'boolean' },
-        required: { control: 'boolean' },
-        readonly: { control: 'boolean' },
-        value: { control: 'text' },
-        min: { control: 'number' },
-        max: { control: 'number' },
-        maxlength: { control: 'number' },
-        pattern: { control: 'text' },
-        assistiveText: { control: 'text' },
-        prefixText: { control: 'text' },
-        suffixText: { control: 'text' },
-        errorText: { control: 'text' },
-        successText: { control: 'text' },
-        icon: {
-            control: 'select',
-            options: icons.map(icon => icon.name),
-        },
-        type: {
-            control: 'select',
-            options: textInputTypes,
-        },
-        ariaLabel: { name: 'aria-label', control: 'text' },
-        ariaLabelledby: { name: 'aria-labelledby', control: 'text' },
-        ariaDescribedby: { name: 'aria-describedby', control: 'text' },
-        autocomplete: { control: 'text' },
-    },
     args: {
-        label: 'Label',
-        placeholder: '',
-        identifier: 'input',
-        name: '',
-        disabled: false,
-        required: false,
-        readonly: false,
-        value: '',
-        min: -1,
-        max: -1,
-        maxlength: -1,
-        assistiveText: '',
-        prefixText: '',
-        suffixText: '',
-        errorText: '',
-        successText: '',
-        icon: '',
-        type: 'text',
-        autocomplete: '',
-        ariaLabel: '',
-        ariaLabelledby: '',
-        ariaDescribedby: '',
+        dsLabel: 'Label',
+        dsPlaceholder: '',
+        dsIdentifier: 'input',
+        dsName: '',
+        dsDisabled: false,
+        dsRequired: false,
+        dsReadonly: false,
+        dsValue: '',
+        dsMin: -1,
+        dsMax: -1,
+        dsMaxlength: -1,
+        dsAssistiveText: '',
+        dsPrefixText: '',
+        dsSuffixText: '',
+        dsErrorText: '',
+        dsSuccessText: '',
+        dsIcon: '',
+        dsType: 'text',
+        dsAutocomplete: '',
+        dsAriaLabel: '',
+        dsAriaLabelledby: '',
+        dsAriaDescribedby: '',
     }
 };

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("div", { key: 'f488f0f134c76c308763d47c57360e54ae299a06', class: "ds-visually-hidden" }, h("slot", { key: '20d5cdef8c333e5421c670e2558b511b1f235e7f' })));
+        return (h("div", { key: 'faa791957259a5ef05d2417a7b316e4cdabd8291', class: "ds-visually-hidden" }, h("slot", { key: 'd7c192f15bf2d74700205ad29f3bb78d0f9cce80' })));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/store.js

@@ -2,12 +2,18 @@ import { createStore } from "@stencil/store";
 ;
 const initialState = {
     validation: 'client',
+    language: 'en',
 };
 const { state, set } = createStore({
     ...initialState,
 });
 export const isValidation = (validation) => state.validation === validation;
-export const configure = ({ validation }) => {
+export const getLanguage = () => state.language;
+export const setLanguage = (language) => {
+    set('language', language);
+};
+export const configure = ({ validation, language }) => {
     set('validation', validation || initialState.validation);
+    set('language', language || initialState.language);
 };
 export default state;

package/dist/collection/utils/attributes/attributes.js

@@ -73,8 +73,8 @@ export const inheritAriaAttributes = (el, ignoreList) => {
     }
     return inheritSpecifiedAttributes(el, attributesToInherit);
 };
-export const inheritAttributes = (component, elem) => {
-    const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes]);
+export const inheritAttributes = (component, elem, attrsToIgnore = []) => {
+    const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes, ...attrsToIgnore]);
     const propsToIgnore = new Set(Object.keys(component));
     const attributes = {};
     for (const attr of elem.attributes) {

package/dist/collection/utils/button/buttonUtils.js

@@ -0,0 +1,14 @@
+export function handleButtonLoading(buttonElement, originalValue, loadValue, loadingDuration = 3000) {
+    if (buttonElement.getAttribute('is-loading') === 'true')
+        return;
+    const originalIsLoading = buttonElement.getAttribute('is-loading') || 'false';
+    const originalAriaDisabled = buttonElement.getAttribute('aria-disabled') || 'false';
+    buttonElement.setAttribute('value', loadValue);
+    buttonElement.setAttribute('is-loading', 'true');
+    buttonElement.setAttribute('aria-disabled', 'true');
+    setTimeout(() => {
+        buttonElement.setAttribute('value', originalValue);
+        buttonElement.setAttribute('is-loading', originalIsLoading);
+        buttonElement.setAttribute('aria-disabled', originalAriaDisabled);
+    }, loadingDuration);
+}

package/dist/collection/utils/colours/colourTypes.js

@@ -12,7 +12,7 @@ export const opaque = {
     '--ds-overlay-white': 'Opaque overlays|white',
 };
 export const semantic = {
-    '--ds-textColor': 'Semantic colours|text',
-    '--ds-bgColor': 'Semantic colours|background',
-    '--ds-borderColor': 'Semantic colours|border',
+    '$dsTextColor': 'Semantic colours|text',
+    '$dsBgColor': 'Semantic colours|background',
+    '$dsBorderColor': 'Semantic colours|border',
 };

package/dist/collection/utils/colours/colourUtils.js

@@ -22,17 +22,18 @@ const getStyles = (colourType) => {
     }
 };
 export const getColourVariables = (colourType) => {
-    const cssVariables = Array.from(getStyles(colourType).matchAll(/--[\w-]+:\s*[^;]+;/g)).map(match => match[0]);
+    const variablePattern = colourType === 'semantic' ? /\$[\w-]+:\s*[^;]+;/g : /--[\w-]+:\s*[^;]+;/g;
+    const cssVariables = Array.from(getStyles(colourType).matchAll(variablePattern)).map(match => match[0]);
     const categories = getCategories(colourType);
     return cssVariables
         .map(variable => {
         const [name, value] = variable.split(':').map(part => part.trim().replace(';', ''));
-        const cleanName = name.replace(/^--/, '');
+        const cleanName = name.replace(/^(\$|--)/, '');
         const categoryKey = Object.keys(categories).find(key => name.startsWith(key));
         if (categoryKey) {
             return { name: cleanName, variable, value, category: categories[categoryKey] };
         }
-        return null;
+        return { name: cleanName, variable, value, category: 'Other' };
     })
         .filter(variable => variable !== null);
 };
@@ -42,6 +43,7 @@ const createColourBox = (name, hex) => {
     const colourSwatch = document.createElement('div');
     colourSwatch.className = 'colour-swatch';
     colourSwatch.style.backgroundColor = hex;
+    colourSwatch.setAttribute('title', `${name}: ${hex}`);
     const colourInfo = document.createElement('div');
     colourInfo.className = 'colour-info';
     colourInfo.innerHTML = `${name} <br /> <code>${hex}</code>`;

package/dist/collection/utils/controls/controlUtils.js

@@ -1,2 +1,36 @@
-export const getOptionalText = (text, optionalText) => [text, Boolean(optionalText) ? optionalText : '(optional)'].join(' ');
+import { getLanguage } from "../../store";
+export const getOptionalText = (text, optionalText) => {
+    let defaultText = '(optional)';
+    switch (getLanguage()) {
+        case 'fi':
+            defaultText = '(valinnainen)';
+            break;
+        case 'sv':
+            defaultText = '(valfritt)';
+            break;
+        default:
+            break;
+    }
+    return [text, optionalText || defaultText].join(' ');
+};
 export const getRequiredText = (text) => [text, '*'].join(' ');
+export const atLeastOneOption = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Valitse vähintään yksi vaihtoehto.';
+        case 'sv':
+            return 'Vänligen välj minst ett alternativ.';
+        default:
+            return 'Please select at least one option.';
+    }
+};
+export const allOptions = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Valitse kaikki vaihtoehdot.';
+        case 'sv':
+            return 'Vänligen välj alla alternativ.';
+        default:
+            return 'Please select all options.';
+    }
+};

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

@@ -1,6 +1,7 @@
+import { getLanguage } from "../../store";
 export const opensInNewTab = (target) => target === '_blank';
-export const visuallyHiddenAssistiveText = (lang) => {
-    switch (lang) {
+export const visuallyHiddenAssistiveText = () => {
+    switch (getLanguage()) {
         case 'fi':
             return 'Avautuu uuteen välilehteen';
         case 'sv':

package/dist/collection/utils/spinner/spinnerUtils.js

@@ -0,0 +1,20 @@
+export function toggleSpinnerLoad(buttonElement, spinnerElement, results, buttonOriginalValue, loadValue, loadingDuration = 3000) {
+    if (buttonElement.getAttribute('is-loading') === 'true')
+        return;
+    console.log(buttonElement, spinnerElement, results);
+    const originalIsLoading = buttonElement.getAttribute('is-loading') || 'false';
+    const originalAriaDisabled = buttonElement.getAttribute('aria-disabled') || 'false';
+    buttonElement.setAttribute('value', loadValue);
+    buttonElement.setAttribute('is-loading', 'true');
+    buttonElement.setAttribute('aria-disabled', 'true');
+    results.classList.add('ds-sb-hidden');
+    spinnerElement.classList.remove('ds-sb-hidden');
+    setTimeout(() => {
+        buttonElement.setAttribute('value', buttonOriginalValue);
+        buttonElement.setAttribute('is-loading', originalIsLoading);
+        buttonElement.setAttribute('aria-disabled', originalAriaDisabled);
+        results.innerHTML = 'Sended';
+        results.classList.remove('ds-sb-hidden');
+        spinnerElement.classList.add('ds-sb-hidden');
+    }, loadingDuration);
+}

package/dist/collection/utils/tests/testUtils.js

@@ -29,3 +29,4 @@ export const addMockEventListener = (container, selector, eventName) => {
     elem.addEventListener(eventName, mockFunction);
     return mockFunction;
 };
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

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

@@ -85,11 +85,11 @@ export const createCategorySection = (category, fonts, renderedCategories) => {
 };
 export const getCSSClasses = (prefix) => {
     const stylesheets = Array.from(document.styleSheets);
-    let classNames = [];
-    for (let sheet of stylesheets) {
+    const classNames = [];
+    for (const sheet of stylesheets) {
         try {
             const rules = Array.from(sheet.cssRules);
-            for (let rule of rules) {
+            for (const rule of rules) {
                 if (rule.selectorText) {
                     const selector = rule.selectorText;
                     if (selector.startsWith(`.${prefix}`)) {

package/dist/collection/utils/utils.js

@@ -36,6 +36,16 @@ export const generateLoremIpsum = ({ paragraphs = 1, wordsPerParagraph = 50, sta
 export const formatAs = (value, suffix) => value.endsWith(suffix) ? value : `${value}${suffix}`;
 export const formatAsRem = (value) => formatAs(value, 'rem');
 export const formatAsPx = (value) => formatAs(value, 'px');
+export const slugifyText = (text) => {
+    return text
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, '-')
+        .replace(/[^\w-]+/g, '')
+        .replace(/--+/g, '-')
+        .replace(/^-+/, '')
+        .replace(/-+$/, '');
+};
 export const remToPx = (remString) => {
     const rootFontSize = 16;
     const rem = parseFloat(remString);
@@ -56,12 +66,3 @@ export function* idGenerator(id) {
         yield `${id}-${currentId++}`;
     }
 }
-export const getAriaLabel = (text, ariaLabel) => {
-    if (!ariaLabel) {
-        return undefined;
-    }
-    if (ariaLabel.startsWith(text)) {
-        return ariaLabel;
-    }
-    return [text, ariaLabel].join(' ');
-};

package/dist/component-library/{utils-cfc536bc.js → attributes-BD_lNRxn.js}

@@ -1 +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 t=[...r];return e&&e.length>0&&(t=t.filter((a=>!e.includes(a)))),a(i,t)},e=(a,i)=>{const e=new Set(["class","style",...r]),t=new Set(Object.keys(a)),l={};for(const a of i.attributes)t.has(a.name.replace(/-./g,(a=>a[1].toUpperCase())))||e.has(a.name)||(l[a.name]=a.value);return l},t=a=>{const r=parseFloat(a);return(i=""+16*r).endsWith("px")?i:`${i}px`;var i};function*l(a){let r=1;for(;;)yield`${a}-${r++}`}const o=(a,r)=>{if(r)return r.startsWith(a)?r:[a,r].join(" ")};export{a,e as b,l as c,o as g,i,t as r}
+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)},e=(a,i,e=[])=>{const l=new Set(["class","style",...r,...e]),t=new Set(Object.keys(a)),o={};for(const a of i.attributes)t.has(a.name.replace(/-./g,(a=>a[1].toUpperCase())))||l.has(a.name)||(o[a.name]=a.value);return o};export{a,i as b,e as 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-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-palette-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)}
+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 / 5%);--ds-overlay-black-10:rgb(0 0 0 / 10%);--ds-overlay-black-15:rgb(0 0 0 / 15%);--ds-overlay-black-30:rgb(0 0 0 / 30%);--ds-overlay-black-40:rgb(0 0 0 / 40%);--ds-overlay-black-50:rgb(0 0 0 / 50%);--ds-overlay-black-70:rgb(0 0 0 / 70%);--ds-overlay-black-80:rgb(0 0 0 / 80%);--ds-overlay-white-00:rgb(255 255 255 / 0%);--ds-overlay-white-05:rgb(255 255 255 / 5%);--ds-overlay-white-10:rgb(255 255 255 / 10%);--ds-overlay-white-15:rgb(255 255 255 / 15%);--ds-overlay-white-30:rgb(255 255 255 / 30%);--ds-overlay-white-40:rgb(255 255 255 / 40%);--ds-overlay-white-50:rgb(255 255 255 / 50%);--ds-overlay-white-70:rgb(255 255 255 / 70%);--ds-overlay-white-80:rgb(255 255 255 / 80%);--ds-palette-black:#000;--ds-palette-white:#fff;--ds-palette-black-03:#f7f7f7;--ds-palette-black-05:#f2f2f2;--ds-palette-black-10:#e6e6e6;--ds-palette-black-20:#ccc;--ds-palette-black-30:#b3b3b3;--ds-palette-black-40:#999;--ds-palette-black-50:#808080;--ds-palette-black-60:#666;--ds-palette-black-70:#4d4d4d;--ds-palette-black-80:#333;--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-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{}.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-palette-black-95)}.ds-text{}.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-palette-black-95);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-palette-black-95);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-palette-black-95);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-palette-black-95);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-palette-black-95);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-palette-black-95);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-palette-black-95);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-palette-black-95);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-palette-black-95);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-palette-black-95);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-palette-black-95);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}}