@uh-design-system/component-library 1.4.0 → 1.5.0

package/dist/esm/ds-assistive-text_3.entry.js

@@ -0,0 +1,107 @@
+import { r as registerInstance, h, e as getElement, F as Fragment } from './index-CekDlrI5.js';
+import { c as cx } from './cx-_iBy9YIS.js';
+import { b as idGenerator, d as declareComponentDependencies, t as transformTagName, i as ifDefined } from './utils-BR594Mvg.js';
+import { i as inheritAttributes, b as inheritAriaAttributes } from './attributes-DfbgRyXR.js';
+import { g as getRequiredText, a as getOptionalText } from './controlUtils-B3bjtllb.js';
+import './store-zG2lF8d6.js';
+
+const dsAssistiveTextCss = () => `.ds-assistive-text__GqWYnG.sc-ds-assistive-text{display:inline-block;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-block-start:var(--ds-spacing-3xSmall)}`;
+
+const dsAssistiveTextIdGenerator = idGenerator('ds-assistive-text');
+const DsAssistiveText = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    dsId = dsAssistiveTextIdGenerator.next().value;
+    dsText;
+    render() {
+        const baseClass = cx('ds-assistive-text');
+        return (h("small", { key: 'd3c86bf04cc507d02e2005d5622862a67ba9668b', class: baseClass, id: this.dsId }, h("slot", { key: '5f9286f0adb0fc5a03008f4a5d7a2f0939985d7d' }, this.dsText)));
+    }
+};
+DsAssistiveText.style = dsAssistiveTextCss();
+
+const dsControlLabelCss = () => `.ds-control-label__GqWYnG__label{padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-control-label__GqWYnG{font-family:var(--ds-fontFamily-body);display:flex;flex-direction:column;margin-block-end:var(--ds-spacing-2xSmall)}.ds-control-label__GqWYnG:empty{display:none}`;
+
+const DsControlLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    inheritedAttributes = {};
+    get el() { return getElement(this); }
+    dsId;
+    dsHtmlFor;
+    dsLabel;
+    dsAssistiveText;
+    dsAssistiveTextId;
+    dsVisuallyHiddenAssistiveText;
+    dsVisuallyHiddenAssistiveTextId;
+    dsRequired;
+    dsOptional;
+    dsOptionalText;
+    get DsVisuallyHidden() {
+        return transformTagName('ds-visually-hidden', 'ds-control-label', this.el);
+    }
+    get DsAssistiveText() {
+        return transformTagName('ds-assistive-text', 'ds-control-label', this.el);
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+            ...inheritAttributes(this, this.el),
+        };
+    }
+    getLabelText = () => {
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLabel);
+        }
+        if (this.dsOptional) {
+            return getOptionalText(this.dsLabel, this.dsOptionalText);
+        }
+        return this.dsLabel;
+    };
+    render() {
+        const baseClass = cx('ds-control-label');
+        return (h("div", { key: 'fab508f4e3fa50aac9e734414eaa1f73c4483107', class: baseClass }, h("slot", { key: 'e483813e2f15ee7410400149ea53807f2f0f15ef', name: "label" }, this.dsLabel && (h("label", { key: 'af75b193d8fc93e60ed5e4c60ce5f18cf7a93552', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: '50194ab5f50307640b651281ba4f9827957b026c', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: 'cdd90c6b958c5234479e1eda45cf7a57bec439f3', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: 'feeee3fe0deb641b92692c2fb0940fc27ccec957', id: this.dsVisuallyHiddenAssistiveTextId, dsTag: "span" }, this.dsVisuallyHiddenAssistiveText)))));
+    }
+};
+declareComponentDependencies([h("ds-visually-hidden", null), h("ds-assistive-text", null)]);
+DsControlLabel.style = dsControlLabelCss();
+
+const dsFeedbackCss = () => `.sc-ds-feedback-h{display:contents}`;
+
+const DsFeedback = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    dsTag = 'div';
+    dsRole;
+    dsAriaLive = 'polite';
+    dsAriaAtomic = false;
+    dsSrOnly = false;
+    dsSrOnlyTag = 'div';
+    get DsVisuallyHidden() {
+        return transformTagName('ds-visually-hidden', 'ds-feedback', this.el);
+    }
+    componentWillRender() {
+        const eitherMessage = `Please provide either dsRole or dsAriaLive property`;
+        if (this.dsRole && this.dsAriaLive) {
+            console.warn(`ds-feedback: ${eitherMessage}. The dsAriaLive property is defined by default.`);
+            return;
+        }
+        if (!this.dsRole && !this.dsAriaLive) {
+            console.warn(`ds-feedback: ${eitherMessage}.`);
+            return;
+        }
+    }
+    render() {
+        const Elem = this.dsSrOnly ? this.DsVisuallyHidden : Fragment;
+        const elemProps = this.dsSrOnly ? { dsTag: this.dsSrOnlyTag } : {};
+        return (h(this.dsTag, { key: 'b02fd991b367850d177d30dfa7cf1f0c70f65ce9', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: '9e2433a937a4ca9534fc5df21fd4d73a171cb7be', ...elemProps }, h("slot", { key: '76e333cee98f1dfe2a14059c8ea6d559ee83e468' }))));
+    }
+};
+declareComponentDependencies([h("ds-visually-hidden", null)]);
+DsFeedback.style = dsFeedbackCss();
+
+export { DsAssistiveText as ds_assistive_text, DsControlLabel as ds_control_label, DsFeedback as ds_feedback };

package/dist/esm/ds-backdrop.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, e as getElement, h } from './index-WKPTmD1Z.js';
+import { r as registerInstance, c as createEvent, e as getElement, h } from './index-CekDlrI5.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-jGcD6jB5.js';
+import { c as cx } from './cx-_iBy9YIS.js';
 import { B as BACKDROP_TRANSITION_IN_DURATION, c as BACKDROP_TRANSITION_OUT_DURATION } from './constants-CLNvzo86.js';
 
-const dsBackdropCss = () => `.ds-backdrop__SPFJ1E{z-index:var(--ds-backdrop-z-index);max-width:100vw;max-height:100vh;max-height:100dvh}.ds-backdrop__SPFJ1E::backdrop{background-color:var(--ds-bgColor-transparent-onLight);transition:display var(--ds-backdrop-transition-out-duration) allow-discrete, overlay var(--ds-backdrop-transition-out-duration) allow-discrete, background-color var(--ds-backdrop-transition-out-duration) ease}@starting-style{.ds-backdrop__SPFJ1E::backdrop{background-color:var(--ds-bgColor-transparent-onLight)}}.ds-backdrop__SPFJ1E--in::backdrop{transition:display var(--ds-backdrop-transition-in-duration) allow-discrete, overlay var(--ds-backdrop-transition-in-duration) allow-discrete, background-color var(--ds-backdrop-transition-in-duration) ease}.ds-backdrop__SPFJ1E--open::backdrop{background-color:var(--ds-bgColor-backdrop)}@media (prefers-reduced-motion: reduce){.ds-backdrop__SPFJ1E::backdrop{transition:none}}html:has(.ds-modal__SPFJ1E--open){overflow:hidden}`;
+const dsBackdropCss = () => `.ds-backdrop__GqWYnG{z-index:var(--ds-backdrop-z-index);max-width:100vw;max-height:100vh;max-height:100dvh}.ds-backdrop__GqWYnG::backdrop{background-color:var(--ds-bgColor-transparent-onLight);transition:display var(--ds-backdrop-transition-out-duration) allow-discrete, overlay var(--ds-backdrop-transition-out-duration) allow-discrete, background-color var(--ds-backdrop-transition-out-duration) ease}@starting-style{.ds-backdrop__GqWYnG::backdrop{background-color:var(--ds-bgColor-transparent-onLight)}}.ds-backdrop__GqWYnG--in::backdrop{transition:display var(--ds-backdrop-transition-in-duration) allow-discrete, overlay var(--ds-backdrop-transition-in-duration) allow-discrete, background-color var(--ds-backdrop-transition-in-duration) ease}.ds-backdrop__GqWYnG--open::backdrop{background-color:var(--ds-bgColor-backdrop)}@media (prefers-reduced-motion: reduce){.ds-backdrop__GqWYnG::backdrop{transition:none}}html:has(.ds-modal__GqWYnG--open){overflow:hidden}`;
 
 const DsBackdrop = class {
     constructor(hostRef) {

package/dist/esm/ds-badge.entry.js

@@ -1,17 +1,18 @@
-import { h, r as registerInstance, e as getElement } from './index-WKPTmD1Z.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-CekDlrI5.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-jGcD6jB5.js';
-import { i as idGenerator, d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
+import { c as cx } from './cx-_iBy9YIS.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-BR594Mvg.js';
+import { c as componentFactory } from './componentFactory-DsTGhar0.js';
 
-const dsBadgeCss = () => `.ds-badge__SPFJ1E.sc-ds-badge{display:flex;width:fit-content;min-width:24px;min-height:24px;padding:0 var(--ds-spacing-3xSmall, 4px);justify-content:center;align-items:center;gap:var(--ds-spacing-3xSmall, 4px);border-radius:12px}.ds-badge__SPFJ1E--default.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-default)}.ds-badge__SPFJ1E--success.sc-ds-badge{background-color:var(--ds-bgColor-success);color:var(--ds-textColor-success)}.ds-badge__SPFJ1E--attention.sc-ds-badge{background-color:var(--ds-bgColor-attention);color:var(--ds-textColor-attention)}.ds-badge__SPFJ1E--danger.sc-ds-badge{background-color:var(--ds-bgColor-danger);color:var(--ds-textColor-danger)}.ds-badge__SPFJ1E--info.sc-ds-badge{background-color:var(--ds-bgColor-info);color:var(--ds-textColor-info)}.ds-badge__SPFJ1E--notification.sc-ds-badge{background-color:var(--ds-palette-red-50);color:var(--ds-textColor-white)}.ds-badge__SPFJ1E--primary.sc-ds-badge{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-badge__SPFJ1E--disabled.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-disabled-onLight)}.ds-badge__SPFJ1E__content.sc-ds-badge{display:flex;padding:0 var(--ds-spacing-3xSmall, 4px);flex-direction:column;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall, 8px)}.ds-badge__SPFJ1E__content__text.sc-ds-badge{white-space:nowrap}`;
+const dsBadgeCss = () => `.ds-badge__GqWYnG.sc-ds-badge{display:flex;width:fit-content;min-width:24px;min-height:24px;padding:0 var(--ds-spacing-3xSmall, 4px);justify-content:center;align-items:center;gap:var(--ds-spacing-3xSmall, 4px);border-radius:12px}.ds-badge__GqWYnG--default.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-default)}.ds-badge__GqWYnG--success.sc-ds-badge{background-color:var(--ds-bgColor-success);color:var(--ds-textColor-success)}.ds-badge__GqWYnG--attention.sc-ds-badge{background-color:var(--ds-bgColor-attention);color:var(--ds-textColor-attention)}.ds-badge__GqWYnG--danger.sc-ds-badge{background-color:var(--ds-bgColor-danger);color:var(--ds-textColor-danger)}.ds-badge__GqWYnG--info.sc-ds-badge{background-color:var(--ds-bgColor-info);color:var(--ds-textColor-info)}.ds-badge__GqWYnG--notification.sc-ds-badge{background-color:var(--ds-palette-red-50);color:var(--ds-textColor-white)}.ds-badge__GqWYnG--primary.sc-ds-badge{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-badge__GqWYnG--disabled.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-disabled-onLight)}.ds-badge__GqWYnG__content.sc-ds-badge{display:flex;padding:0 var(--ds-spacing-3xSmall, 4px);flex-direction:column;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall, 8px)}.ds-badge__GqWYnG__content__text.sc-ds-badge{white-space:nowrap}`;
 
-const dsBadgeIdGenerator = idGenerator('ds-badge');
-const DsBadge = class {
+const DsBadge = class extends Mixin(componentFactory('ds-badge')) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
     }
     get el() { return getElement(this); }
-    dsId = dsBadgeIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsText = '';
     dsVariant = 'default';
     dsHiddenAssistiveText;
@@ -19,9 +20,12 @@ const DsBadge = class {
     get DsVisuallyHidden() {
         return transformTagName('ds-visually-hidden', 'ds-badge', this.el);
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     render() {
         const baseClass = cx('ds-badge');
-        return (h("div", { key: '0b5952edb04767581882da7f90dcdab4f21898e4', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, h("div", { key: '51e361f5d2675fa832b3bf701148f825f0e28051', class: `${baseClass}__content` }, h("span", { key: '70a50201cf6f70566a6259af6f6eacb918414055', class: `ds-text-semibold-xs ${baseClass}__content__text`, id: this.dsId, "aria-label": this.dsAriaLabel }, h("slot", { key: 'b6a8cef352c1be691d0f96a01d4e9aa498b9cd73' }, this.dsText, this.dsHiddenAssistiveText && h(this.DsVisuallyHidden, { key: 'ba35968b6ab35158cd186c5f3eb21477967da0ef', dsTag: "span" }, this.dsHiddenAssistiveText))))));
+        return (h("div", { key: 'b08749fbb3b12081fd30f1f8eb6f837d5574fc61', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, h("div", { key: 'f24dc33357b0c204a6371bd41d3dca73f6b924ed', class: `${baseClass}__content` }, h("span", { key: '79e14788f16861a02fcbf72fb47c9b3b372edc74', class: `ds-text-semibold-xs ${baseClass}__content__text`, id: this.dsId, "aria-label": this.dsAriaLabel }, h("slot", { key: 'b6fc61084787a44eee082c63ee7ac3f3b15fc334' }, this.dsText, this.dsHiddenAssistiveText && h(this.DsVisuallyHidden, { key: '6cc3039896e761afd5c692a04201deae4a81f351', dsTag: "span" }, this.dsHiddenAssistiveText))))));
     }
 };
 declareComponentDependencies([h("ds-visually-hidden", null)]);

package/dist/esm/ds-breadcrumb.entry.js

@@ -1,10 +1,10 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h, H as Host } from './index-WKPTmD1Z.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h, H as Host } from './index-CekDlrI5.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-J5Ghj1_T.js';
-import { l as linkFactory } from './linkFactory-Dy94WoxH.js';
-import { c as cx } from './cx-jGcD6jB5.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-BR594Mvg.js';
+import { l as linkFactory } from './linkFactory-B1sHspXR.js';
+import { c as cx } from './cx-_iBy9YIS.js';
 
-const dsBreadcrumbCss = () => `.sc-ds-breadcrumb-h{display:contents}.ds-breadcrumb__SPFJ1E.sc-ds-breadcrumb{display:contents}.ds-breadcrumb__SPFJ1E--hidden.sc-ds-breadcrumb{display:none}.ds-breadcrumb__SPFJ1E__content.sc-ds-breadcrumb{display:inline;vertical-align:middle}.ds-breadcrumb__SPFJ1E__content__link.sc-ds-breadcrumb::part(link),.ds-breadcrumb__SPFJ1E__content__link.sc-ds-breadcrumb [part~="link"]{vertical-align:middle}.ds-breadcrumb__SPFJ1E__content__current-page.sc-ds-breadcrumb{color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-style:normal;font-weight:600;line-height:var(--ds-lineHeight-large);vertical-align:middle;letter-spacing:var(--ds-letterSpacing-wide)}`;
+const dsBreadcrumbCss = () => `.sc-ds-breadcrumb-h{display:contents}.ds-breadcrumb__GqWYnG.sc-ds-breadcrumb{display:contents}.ds-breadcrumb__GqWYnG--hidden.sc-ds-breadcrumb{display:none}.ds-breadcrumb__GqWYnG__content.sc-ds-breadcrumb{display:inline;vertical-align:middle}.ds-breadcrumb__GqWYnG__content__link.sc-ds-breadcrumb::part(link),.ds-breadcrumb__GqWYnG__content__link.sc-ds-breadcrumb [part~="link"]{vertical-align:middle}.ds-breadcrumb__GqWYnG__content__current-page.sc-ds-breadcrumb{color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-style:normal;font-weight:600;line-height:var(--ds-lineHeight-large);vertical-align:middle;letter-spacing:var(--ds-letterSpacing-wide)}`;
 
 const DsBreadcrumb = class extends Mixin(linkFactory) {
     constructor(hostRef) {

package/dist/esm/ds-breadcrumbs-collapsible.entry.js

@@ -1,5 +1,5 @@
-import { h, r as registerInstance, c as createEvent, e as getElement, F as Fragment } from './index-WKPTmD1Z.js';
-import { d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
+import { h, r as registerInstance, c as createEvent, e as getElement, F as Fragment } from './index-CekDlrI5.js';
+import { d as declareComponentDependencies, t as transformTagName } from './utils-BR594Mvg.js';
 
 const dsBreadcrumbsCollapsibleCss = () => `:host{display:contents}`;
 

package/dist/esm/ds-breadcrumbs-expand-button.entry.js

@@ -1,10 +1,10 @@
-import { h, r as registerInstance, c as createEvent, e as getElement } from './index-WKPTmD1Z.js';
+import { h, r as registerInstance, c as createEvent, e as getElement } from './index-CekDlrI5.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { g as getLanguage } from './store-CaI4gcSt.js';
-import { c as cx } from './cx-jGcD6jB5.js';
-import { d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
+import { g as getLanguage } from './store-zG2lF8d6.js';
+import { c as cx } from './cx-_iBy9YIS.js';
+import { d as declareComponentDependencies, t as transformTagName } from './utils-BR594Mvg.js';
 
-const dsBreadcrumbsExpandButtonCss = () => `.ds-breadcrumbs-expand-button__SPFJ1E.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__SPFJ1E--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__SPFJ1E__button.sc-ds-breadcrumbs-expand-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-breadcrumbs-expand-button__SPFJ1E__button.sc-ds-breadcrumbs-expand-button{background:none;border:none;padding:0;margin:0;overflow:visible;text-transform:none;display:inline;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:inherit;font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);vertical-align:middle;line-height:1.375;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-breadcrumbs-expand-button__SPFJ1E__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__SPFJ1E__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}`;
+const dsBreadcrumbsExpandButtonCss = () => `.ds-breadcrumbs-expand-button__GqWYnG.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__GqWYnG--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__GqWYnG__button.sc-ds-breadcrumbs-expand-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-breadcrumbs-expand-button__GqWYnG__button.sc-ds-breadcrumbs-expand-button{background:none;border:none;padding:0;margin:0;overflow:visible;text-transform:none;display:inline;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:inherit;font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);vertical-align:middle;line-height:1.375;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-breadcrumbs-expand-button__GqWYnG__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__GqWYnG__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}`;
 
 const DsBreadcrumbsExpandButton = class {
     constructor(hostRef) {

package/dist/esm/ds-breadcrumbs-separator.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, e as getElement, h } from './index-WKPTmD1Z.js';
-import { c as cx } from './cx-jGcD6jB5.js';
-import { t as transformTagName } from './utils-J5Ghj1_T.js';
+import { r as registerInstance, e as getElement, h } from './index-CekDlrI5.js';
+import { c as cx } from './cx-_iBy9YIS.js';
+import { t as transformTagName } from './utils-BR594Mvg.js';
 
-const dsBreadcrumbsSeparatorCss = () => `.ds-breadcrumbs-separator__SPFJ1E.sc-ds-breadcrumbs-separator{display:inline-block;line-height:var(--ds-lineHeight-large);vertical-align:middle;margin-left:var(--ds-spacing-3xSmall, 4px);margin-right:var(--ds-spacing-3xSmall, 4px)}@media (min-width: 60rem){.ds-breadcrumbs-separator__SPFJ1E.sc-ds-breadcrumbs-separator{margin-left:var(--ds-spacing-2xSmall, 8px);margin-right:var(--ds-spacing-2xSmall, 8px)}}`;
+const dsBreadcrumbsSeparatorCss = () => `.ds-breadcrumbs-separator__GqWYnG.sc-ds-breadcrumbs-separator{display:inline-block;line-height:var(--ds-lineHeight-large);vertical-align:middle;margin-left:var(--ds-spacing-3xSmall, 4px);margin-right:var(--ds-spacing-3xSmall, 4px)}@media (min-width: 60rem){.ds-breadcrumbs-separator__GqWYnG.sc-ds-breadcrumbs-separator{margin-left:var(--ds-spacing-2xSmall, 8px);margin-right:var(--ds-spacing-2xSmall, 8px)}}`;
 
 const DsBreadcrumbsSeparator = class {
     constructor(hostRef) {

package/dist/esm/ds-breadcrumbs.entry.js

@@ -1,12 +1,15 @@
-import { r as registerInstance, c as createEvent, e as getElement, h } from './index-WKPTmD1Z.js';
-import { c as cx } from './cx-jGcD6jB5.js';
-import { g as getLanguage } from './store-CaI4gcSt.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-CekDlrI5.js';
+import { c as cx } from './cx-_iBy9YIS.js';
+import { g as getLanguage } from './store-zG2lF8d6.js';
 import { i as isGreaterThanEqualBreakpointMediaQuery } from './utils-BW1GUsO7.js';
+import { c as componentFactory } from './componentFactory-DsTGhar0.js';
+import './utils-BR594Mvg.js';
 
-const dsBreadcrumbsCss = () => `.ds-breadcrumbs__SPFJ1E{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:24px;line-height:var(--ds-lineHeight-small)}@media (min-width: 60rem){.ds-breadcrumbs__SPFJ1E{min-height:32px}}.ds-breadcrumbs__SPFJ1E__breadcrumbs{display:inline-block;vertical-align:middle;margin:0;padding:1px 0;list-style:none;line-height:var(--ds-lineHeight-small);font-size:var(--ds-fontSize-14)}@media (min-width: 60rem){.ds-breadcrumbs__SPFJ1E__breadcrumbs{padding:var(--ds-spacing-4xSmall, 2px) 0;font-size:var(--ds-fontSize-16)}}`;
+const dsBreadcrumbsCss = () => `.ds-breadcrumbs__GqWYnG{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:24px;line-height:var(--ds-lineHeight-small)}@media (min-width: 60rem){.ds-breadcrumbs__GqWYnG{min-height:32px}}.ds-breadcrumbs__GqWYnG__breadcrumbs{display:inline-block;vertical-align:middle;margin:0;padding:1px 0;list-style:none;line-height:var(--ds-lineHeight-small);font-size:var(--ds-fontSize-14)}@media (min-width: 60rem){.ds-breadcrumbs__GqWYnG__breadcrumbs{padding:var(--ds-spacing-4xSmall, 2px) 0;font-size:var(--ds-fontSize-16)}}`;
 
-const DsBreadcrumbs = class {
+const DsBreadcrumbs = class extends Mixin(componentFactory('ds-breadcrumbs')) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
         this.dsSizeChange = createEvent(this, "dsSizeChange", 7);
     }
@@ -40,9 +43,12 @@ const DsBreadcrumbs = class {
     componentWillLoad() {
         this.size = this.isGreaterThanEqualMediumMediaQuery.matches ? 'medium' : 'small';
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     render() {
         const baseClass = cx('ds-breadcrumbs');
-        return (h("nav", { key: '32200ea636a5e0b12dd1b2aff968063aa9a292b1', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, h("div", { key: 'b68af73fe06dadfbbdbcc1327cc79e7896497fff', role: "list", class: `${baseClass}__breadcrumbs` }, h("slot", { key: '2d7af502821d4760b5e3d48a6132035d6df7435a' }))));
+        return (h("nav", { key: '7a439e6d24817a7d9f314e8435de435a987fae9f', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, h("div", { key: 'b43944527ac9b6102090598b31695c39f9e0f405', role: "list", class: `${baseClass}__breadcrumbs` }, h("slot", { key: '7b2d19de1a6ebab460e24cb71fe55eaf0abefa17' }))));
     }
     static get watchers() { return {
         "size": [{

package/dist/esm/ds-button.entry.js

@@ -1,14 +1,14 @@
-import { M as Mixin, r as registerInstance, e as getElement, f as forceUpdate, h } from './index-WKPTmD1Z.js';
+import { M as Mixin, r as registerInstance, e as getElement, f as forceUpdate, h } from './index-CekDlrI5.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { i as idGenerator, t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './utils-J5Ghj1_T.js';
-import { c as cx } from './cx-jGcD6jB5.js';
-import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-DwC_l-Le.js';
+import { t as transformTagName, i as ifDefined, d as declareComponentDependencies } from './utils-BR594Mvg.js';
+import { c as cx } from './cx-_iBy9YIS.js';
+import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-D1_FuBpp.js';
+import { c as componentFactory } from './componentFactory-DsTGhar0.js';
 
-const dsButtonCss = () => `.ds-no-style-leak.sc-ds-button *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button-h{display:inline-block}.sc-ds-button-h:has(.ds-button__SPFJ1E--full-width){width:100%}.ds-button__SPFJ1E.sc-ds-button{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);outline:4px solid transparent;justify-content:center;cursor:default}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--supplementary) .ds-button__SPFJ1E__value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button__SPFJ1E--supplementary.sc-ds-button:has(.ds-button__SPFJ1E__spinner) .ds-button__SPFJ1E__value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button__SPFJ1E__icon.sc-ds-button{height:1.5rem}.ds-button__SPFJ1E.sc-ds-button:has(.ds-button__SPFJ1E__spinner):not(.ds-button__SPFJ1E--small) .ds-button__SPFJ1E__value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__SPFJ1E__spinner.sc-ds-button{display:flex}.ds-button__SPFJ1E--icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--small):not(.ds-button__SPFJ1E--secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--small).ds-button__SPFJ1E--secondary{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--small).ds-button__SPFJ1E--icon-only{padding-left:0;padding-right:0}.ds-button__SPFJ1E--small.ds-button__SPFJ1E--icon-start.sc-ds-button,.ds-button__SPFJ1E--small.ds-button__SPFJ1E--icon-end.sc-ds-button{gap:var(--ds-spacing-3xSmall)}.ds-button__SPFJ1E--small.sc-ds-button:not(.ds-button__SPFJ1E--secondary){border-width:0px;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);line-height:150%;letter-spacing:var(--ds-letterSpacing-wide, 0);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__SPFJ1E--small.ds-button__SPFJ1E--secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);line-height:150%;letter-spacing:var(--ds-letterSpacing-wide, 0);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__SPFJ1E--small.ds-button__SPFJ1E--icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button__SPFJ1E--small.sc-ds-button .ds-button__SPFJ1E__icon.sc-ds-button{height:auto}.ds-button__SPFJ1E--icon-start.sc-ds-button:not(.ds-button__SPFJ1E--small) .ds-button__SPFJ1E__icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button__SPFJ1E--icon-end.sc-ds-button:not(.ds-button__SPFJ1E--small) .ds-button__SPFJ1E__icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue--active{background-color:var(--ds-bgColor-primary-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black--active{background-color:var(--ds-bgColor-black-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white--active{background-color:var(--ds-bgColor-white-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger{background-color:var(--ds-bgColor-danger-bold);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger:hover{background-color:var(--ds-bgColor-danger-bold-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger--active{background-color:var(--ds-bgColor-danger-bold-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue--active{background-color:var(--ds-bgColor-secondary-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black--active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white--active{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-danger);color:var(--ds-textColor-danger)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger:hover{background-color:var(--ds-bgColor-danger)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger--active{background-color:var(--ds-bgColor-danger-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue--active{background-color:var(--ds-bgColor-secondary-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black--active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white--active{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger{background-color:transparent;border-color:transparent;color:var(--ds-textColor-danger);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger:hover{background-color:var(--ds-bgColor-danger)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger:active,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger--active{background-color:var(--ds-bgColor-danger-hover)}.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger.ds-button__SPFJ1E--disabled,.ds-button__SPFJ1E.sc-ds-button:not(.ds-button__SPFJ1E--in-input).ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger.sc-ds-button{background-color:var(--ds-bgColor-danger-bold);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger-bold-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-bold-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--primary.ds-button__SPFJ1E--danger.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-danger);color:var(--ds-textColor-danger)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--secondary.ds-button__SPFJ1E--danger.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-danger);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger.sc-ds-button:active,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-hover)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger.ds-button__SPFJ1E--disabled.sc-ds-button,.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.ds-button__SPFJ1E--supplementary.ds-button__SPFJ1E--danger.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__SPFJ1E.ds-button__SPFJ1E--in-input.sc-ds-button{width:auto;height:100%;aspect-ratio:1/1}`;
+const dsButtonCss = () => `.ds-no-style-leak.sc-ds-button *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button-h{display:inline-block}.sc-ds-button-h:has(.ds-button__GqWYnG--full-width){width:100%}.ds-button__GqWYnG.sc-ds-button{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);outline:4px solid transparent;justify-content:center;cursor:default}.ds-button__GqWYnG__value[hidden].sc-ds-button{display:none}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--supplementary) .ds-button__GqWYnG__value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button__GqWYnG--supplementary.sc-ds-button:has(.ds-button__GqWYnG__spinner) .ds-button__GqWYnG__value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button__GqWYnG__icon.sc-ds-button{height:1.5rem}.ds-button__GqWYnG.sc-ds-button:has(.ds-button__GqWYnG__spinner):not(.ds-button__GqWYnG--small) .ds-button__GqWYnG__value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__GqWYnG__spinner.sc-ds-button{display:flex}.ds-button__GqWYnG--icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--small):not(.ds-button__GqWYnG--secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:var(--ds-button-min-height, 2.75rem);min-width:var(--ds-button-min-width, auto);padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--small).ds-button__GqWYnG--secondary{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-18);min-height:var(--ds-button-min-height, 2.75rem);min-width:var(--ds-button-min-width, auto);padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--small).ds-button__GqWYnG--icon-only{padding-left:0;padding-right:0}.ds-button__GqWYnG--small.ds-button__GqWYnG--icon-start.sc-ds-button,.ds-button__GqWYnG--small.ds-button__GqWYnG--icon-end.sc-ds-button{gap:var(--ds-spacing-3xSmall)}.ds-button__GqWYnG--small.sc-ds-button:not(.ds-button__GqWYnG--secondary){border-width:0px;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);line-height:150%;letter-spacing:var(--ds-letterSpacing-wide, 0);min-height:var(--ds-button-min-height, 2rem);min-width:var(--ds-button-min-width, auto);padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__GqWYnG--small.ds-button__GqWYnG--secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);line-height:150%;letter-spacing:var(--ds-letterSpacing-wide, 0);min-height:var(--ds-button-min-height, 2rem);min-width:var(--ds-button-min-width, auto);padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button__GqWYnG--small.ds-button__GqWYnG--icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button__GqWYnG--small.sc-ds-button .ds-button__GqWYnG__icon.sc-ds-button{height:auto}.ds-button__GqWYnG--icon-start.sc-ds-button:not(.ds-button__GqWYnG--small) .ds-button__GqWYnG__icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button__GqWYnG--icon-end.sc-ds-button:not(.ds-button__GqWYnG--small) .ds-button__GqWYnG__icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--blue{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--blue:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--blue:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--blue--active{background-color:var(--ds-bgColor-primary-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--blue.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--blue:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--black{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--black:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--black:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--black--active{background-color:var(--ds-bgColor-black-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--black.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--black:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--white{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--white:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--white:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--white--active{background-color:var(--ds-bgColor-white-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--white.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--white:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--danger:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--danger{background-color:var(--ds-bgColor-danger-bold);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--danger:hover{background-color:var(--ds-bgColor-danger-bold-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--danger:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--danger--active{background-color:var(--ds-bgColor-danger-bold-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--danger.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--primary.ds-button__GqWYnG--danger:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue--active{background-color:var(--ds-bgColor-secondary-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--black{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--black:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--black:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--black--active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--black.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--black:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--white{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--white:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--white:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--white--active{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--white.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--white:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-danger);color:var(--ds-textColor-danger)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger:hover{background-color:var(--ds-bgColor-danger)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger--active{background-color:var(--ds-bgColor-danger-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue--active{background-color:var(--ds-bgColor-secondary-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black--active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white--active{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger{background-color:transparent;border-color:transparent;color:var(--ds-textColor-danger);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger:hover{background-color:var(--ds-bgColor-danger)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger:active,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger--active{background-color:var(--ds-bgColor-danger-hover)}.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger.ds-button__GqWYnG--disabled,.ds-button__GqWYnG.sc-ds-button:not(.ds-button__GqWYnG--in-input).ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--blue.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--blue.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--black.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--black.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--white.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--white.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--danger.sc-ds-button{background-color:var(--ds-bgColor-danger-bold);border-color:transparent;color:var(--ds-textColor-white)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger-bold-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--danger.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-bold-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--danger.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--primary.ds-button__GqWYnG--danger.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--black.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--black.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--black.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--white.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--white.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--white.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-danger);color:var(--ds-textColor-danger)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--secondary.ds-button__GqWYnG--danger.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-textColor-default);outline:var(--ds-borderWidth-thin) solid transparent;outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-danger);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger.sc-ds-button:hover{background-color:var(--ds-bgColor-danger)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger.sc-ds-button:active,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger--active.sc-ds-button{background-color:var(--ds-bgColor-danger-hover)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger.ds-button__GqWYnG--disabled.sc-ds-button,.ds-button__GqWYnG.ds-button__GqWYnG--in-input.ds-button__GqWYnG--supplementary.ds-button__GqWYnG--danger.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button__GqWYnG.ds-button__GqWYnG--in-input.sc-ds-button{--ds-button-min-height:var(--ds-spacing-xLarge);width:auto;height:100%;aspect-ratio:1/1}`;
 
-const buttonIdGenerator = idGenerator('ds-button');
-const DsButton = class extends Mixin(ariaDeprecationFactory) {
+const DsButton = class extends Mixin(componentFactory('ds-button'), ariaDeprecationFactory) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
@@ -18,7 +18,7 @@ const DsButton = class extends Mixin(ariaDeprecationFactory) {
     pressedKeys = new Set();
     get el() { return getElement(this); }
     dsForm;
-    dsId = buttonIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsName = this.dsId;
     dsAutoFocus = false;
     dsText = '';
@@ -50,12 +50,24 @@ const DsButton = class extends Mixin(ariaDeprecationFactory) {
     dsHiddenAssistiveText;
     dsActive = false;
     dsInInput = false;
-    hasContent = false;
+    hasDefaultSlot = false;
     isActive = this.dsActive;
     text = '';
     async setFocus() {
         this.buttonEl.focus();
     }
+    hasDefaultSlotContent = () => {
+        return Array.from(this.el.childNodes).some(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const elem = node;
+                return !elem.hasAttribute('slot') || elem.getAttribute('slot') === '';
+            }
+            if (node.nodeType === Node.TEXT_NODE) {
+                return (node.textContent?.trim().length ?? 0) > 0;
+            }
+            return false;
+        });
+    };
     componentWillLoad() {
         this.getDeprecationWarningsForAriaAttributes(this.el);
         if (this.dsUseSpinner && !this.dsSpinnerHiddenText) {
@@ -68,20 +80,9 @@ const DsButton = class extends Mixin(ariaDeprecationFactory) {
         };
         this.text = this.dsText || this.dsValue;
     }
-    hasDefaultSlotContent = () => {
-        return Array.from(this.el.childNodes).some(node => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                const elem = node;
-                return !elem.hasAttribute('slot') || elem.getAttribute('slot') === '';
-            }
-            if (node.nodeType === Node.TEXT_NODE) {
-                return node.textContent?.trim().length > 0;
-            }
-            return false;
-        });
-    };
     componentDidLoad() {
-        this.hasContent = !!this.text || this.hasDefaultSlotContent();
+        this.componentMounted();
+        this.hasDefaultSlot = this.hasDefaultSlotContent();
     }
     dsTextObserver(newValue) {
         this.text = newValue || this.dsValue;
@@ -142,6 +143,9 @@ const DsButton = class extends Mixin(ariaDeprecationFactory) {
         }
         return this.dsColour;
     };
+    handleDefaultSlotChange = () => {
+        this.hasDefaultSlot = this.hasDefaultSlot || this.hasDefaultSlotContent();
+    };
     renderIcon = (baseClass) => {
         const iconClasses = classNames(`${baseClass}__icon`);
         const iconSize = this.dsSize === 'small' ? '1.25rem' : undefined;
@@ -149,11 +153,12 @@ const DsButton = class extends Mixin(ariaDeprecationFactory) {
         return h(DsIcon, { class: iconClasses, dsName: this.dsIcon, dsCustomSize: iconSize, dsTitle: this.dsIconTitle, dsAriaLabel: this.dsIconAriaLabel });
     };
     renderButton = () => {
+        const hasContent = !!this.text || this.hasDefaultSlot;
         const baseClass = cx('ds-button');
         const classes = classNames(`${baseClass} ${baseClass}--${this.dsVariant} ${baseClass}--${this.dsColour} ${baseClass}--${this.dsSize}`, {
-            [`${baseClass}--icon-start`]: this.dsIcon && this.dsIconPosition === 'start' && this.hasContent,
-            [`${baseClass}--icon-end`]: this.dsIcon && this.dsIconPosition === 'end' && this.hasContent,
-            [`${baseClass}--icon-only`]: this.dsIcon && !this.hasContent,
+            [`${baseClass}--icon-start`]: this.dsIcon && this.dsIconPosition === 'start' && hasContent,
+            [`${baseClass}--icon-end`]: this.dsIcon && this.dsIconPosition === 'end' && hasContent,
+            [`${baseClass}--icon-only`]: this.dsIcon && !hasContent,
             [`${baseClass}--full-width`]: this.dsFullWidth,
             [`${baseClass}--disabled`]: this.dsDisabled,
             [`${baseClass}--${this.dsColour}--active`]: this.isActive,
@@ -183,7 +188,7 @@ const DsButton = class extends Mixin(ariaDeprecationFactory) {
         }
         const ariaExpanded = this.dsAriaExpanded !== undefined ? (this.dsAriaExpanded ? 'true' : 'false') : inheritedAriaExpanded;
         const ariaPressed = this.dsAriaPressed !== undefined ? (this.dsAriaPressed ? 'true' : 'false') : inheritedAriaPressed;
-        return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, value: this.dsValue, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, ...ifDefined('autofocus', this.dsAutoFocus), ...ifDefined('role', role), ...ifDefined('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby), ...ifDefined('aria-expanded', ariaExpanded), ...ifDefined('aria-pressed', ariaPressed), ...ifDefined('aria-controls', ariaControls), ...ifDefined('aria-haspopup', ariaHaspopup), ...ifDefined('aria-hidden', this.dsAriaHidden ? 'true' : undefined), ...ifDefined('tabindex', this.dsTabIndex), ...restAttributes }, h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize === 'medium' ? 'medium' : null, dsCustomSize: this.dsSize === 'small' ? '1.25rem' : null }))), this.hasContent && (h("span", { class: `${baseClass}__value` }, h("slot", null), this.text, this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText))), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
+        return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, value: this.dsValue, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, ...ifDefined('autofocus', this.dsAutoFocus), ...ifDefined('role', role), ...ifDefined('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby), ...ifDefined('aria-expanded', ariaExpanded), ...ifDefined('aria-pressed', ariaPressed), ...ifDefined('aria-controls', ariaControls), ...ifDefined('aria-haspopup', ariaHaspopup), ...ifDefined('aria-hidden', this.dsAriaHidden ? 'true' : undefined), ...ifDefined('tabindex', this.dsTabIndex), ...restAttributes }, h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize === 'medium' ? 'medium' : null, dsCustomSize: this.dsSize === 'small' ? '1.25rem' : undefined }))), h("span", { class: `${baseClass}__value`, hidden: !hasContent }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.text), this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
     };
     render() {
         const buttonElement = this.renderButton();