@baloise/ds-core 16.0.3 → 16.1.0-nightly.20240418

package/dist/collection/components/bal-radio/bal-radio-button/bal-radio-button.js

@@ -7,7 +7,7 @@ import { FOCUS_KEYS } from "../../../utils/focus-visible";
 import { isDescendant } from "../../../utils/helpers";
 import { ListenToElementStates } from "../../../utils/element-states";
 import { BalElementStateListener } from "../../../utils/element-states/element-states.listener";
-export class BalRadioButton {
+export class RadioButton {
     constructor() {
         this.keyboardMode = true;
         /**
@@ -458,10 +458,10 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], BalRadioButton.prototype, "createLogger", null);
+], RadioButton.prototype, "createLogger", null);
 __decorate([
     ListenToElementStates(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
-], BalRadioButton.prototype, "elementStateListener", null);
+], RadioButton.prototype, "elementStateListener", null);

package/dist/collection/components/bal-radio/bal-radio-group/bal-radio-group.js

@@ -289,7 +289,7 @@ export class RadioGroup {
             }
             return option;
         });
-        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-radio", { name: option.name || this.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
+        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-radio", { key: option.value, name: option.name || this.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
     }
     static get is() { return "bal-radio-group"; }
     static get properties() {

package/dist/collection/components/bal-select/bal-select.js

@@ -306,7 +306,7 @@ export class Select {
         }
     }
     /**
-     * Sets the focus on the input element
+     * Returns the value of the component
      */
     async getValue() {
         return this.rawValue;
@@ -693,7 +693,7 @@ export class Select {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { value: value, selected: true }, value)))), h("bal-popover", { onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
@@ -703,7 +703,7 @@ export class Select {
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
                 .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
@@ -1300,7 +1300,7 @@ export class Select {
                     "return": "Promise<string[]>"
                 },
                 "docs": {
-                    "text": "Sets the focus on the input element",
+                    "text": "Returns the value of the component",
                     "tags": []
                 }
             },

package/dist/collection/components/bal-spinner/bal-spinner.css

@@ -1 +1 @@
-bal-spinner,.bal-spinner{text-align:center;display:flex;justify-content:center;align-content:center}bal-spinner svg,.bal-spinner svg{transform:unset !important}
+bal-spinner,.bal-spinner{text-align:center;display:flex;justify-content:center;align-content:center;width:4rem}bal-spinner svg,.bal-spinner svg{transform:unset !important}.bal-spinner--small{width:2rem}.bal-spinner--circle{margin:auto;border-width:.25rem;border-style:solid;border-color:var(--bal-color-grey);border-radius:50%;border-top-color:var(--bal-color-primary);width:1.5rem;height:1.5rem}.bal-spinner--circle.bal-spinner--small{width:1.125rem;height:1.125rem;border-width:.2rem}.bal-spinner--circle.bal-spinner--animated{animation:spinner 1.6s linear infinite}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

package/dist/collection/components/bal-spinner/bal-spinner.interfaces.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />

package/dist/collection/components/bal-spinner/bal-spinner.js

@@ -3,6 +3,8 @@ import { h, Host } from "@stencil/core";
 import { rIC } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { raf } from "../../utils/helpers";
+import { BEM } from "../../utils/bem";
+import { ListenToConfig, defaultConfig } from "../../utils/config";
 export class Spinner {
     constructor() {
         /**
@@ -10,6 +12,10 @@ export class Spinner {
          * ------------------------------------------------------
          */
         this.animate = async () => {
+            if (!this.animated) {
+                this.destroy();
+                return;
+            }
             await this.load();
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
@@ -30,6 +36,9 @@ export class Spinner {
             this.el.innerHTML = '';
         };
         this.shouldAnimate = () => {
+            if (this.variation !== 'logo') {
+                return false;
+            }
             if (typeof window === 'undefined') {
                 return false;
             }
@@ -55,10 +64,12 @@ export class Spinner {
                 }
             });
         };
+        this.animated = defaultConfig.animated;
         this.inverted = false;
         this.deactivated = false;
         this.color = 'blue';
         this.small = false;
+        this.variation = 'logo';
     }
     createLogger(log) {
         this.log = log;
@@ -73,18 +84,43 @@ export class Spinner {
             }
         }
     }
+    variationWatcher(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            if (this.variation === 'circle') {
+                this.destroy();
+            }
+            else {
+                this.animate();
+            }
+        }
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     componentDidLoad() {
-        this.animate();
+        if (this.variation === 'logo') {
+            this.animate();
+        }
+        else {
+            this.destroy();
+        }
     }
     disconnectedCallback() {
         if (this.el && !this.el.isConnected) {
             this.destroy();
         }
     }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    configChanged(state) {
+        this.animated = state.animated;
+        if (state.animated === false) {
+            this.destroy();
+        }
+    }
     /**
      * GETTERS
      * ------------------------------------------------------
@@ -97,7 +133,8 @@ export class Spinner {
      * ------------------------------------------------------
      */
     render() {
-        return h(Host, { role: "progressbar", "aria-hidden": "true", style: { width: this.small ? '32px' : '64px' } });
+        const block = BEM.block('spinner');
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), role: "progressbar", "aria-hidden": "true" }));
     }
     static get is() { return "bal-spinner"; }
     static get originalStyleUrls() {
@@ -152,9 +189,14 @@ export class Spinner {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'blue' | 'white'",
+                    "original": "BalProps.BalSpinnerColor",
                     "resolved": "\"blue\" | \"white\"",
-                    "references": {}
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -183,14 +225,45 @@ export class Spinner {
                 "attribute": "small",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalSpinnerVariation",
+                    "resolved": "\"circle\" | \"logo\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the look of the spinner"
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "'logo'"
             }
         };
     }
+    static get states() {
+        return {
+            "animated": {}
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "deactivated",
                 "methodName": "deactivatedWatcher"
+            }, {
+                "propName": "variation",
+                "methodName": "variationWatcher"
             }];
     }
 }
@@ -200,3 +273,9 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Spinner.prototype, "createLogger", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Spinner.prototype, "configChanged", null);

package/dist/collection/components/bal-stack/bal-stack.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
-export class BalStack {
+export class Stack {
     constructor() {
         this.layout = 'horizontal';
         this.align = '';
@@ -314,4 +314,4 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], BalStack.prototype, "createLogger", null);
+], Stack.prototype, "createLogger", null);

package/dist/collection/components/bal-steps/bal-steps.js

@@ -178,7 +178,7 @@ export class Steps {
                 .map(t => t.label)
                 .join(',') }, h("nav", { role: "tablist", class: Object.assign({}, bemStepsNav.class()) }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
             .filter(step => !step.invisible)
-            .map(step => (h("bal-carousel-item", { class: Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
+            .map(step => (h("bal-carousel-item", { key: step.value, class: Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
     }
     static get is() { return "bal-steps"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-tabs/components/tab-nav.js

@@ -7,5 +7,5 @@ export const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMob
     const tabs = items.filter(tab => !tab.invisible);
     const isFullHeight = inNavbar && !isTouch;
     const Button = ({ item, index }) => (h(TabButton, { item: item, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab }));
-    return (h("div", { role: "tablist", id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) }, hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) }, h(Button, { item: tab, index: index })))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))), !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''), !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
+    return (h("div", { role: "tablist", id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) }, hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { key: tab.value, class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) }, h(Button, { item: tab, index: index })))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))), !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''), !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
 };

package/dist/collection/components/bal-tabs/components/tab-select.js

@@ -17,5 +17,5 @@ export const TabSelect = ({ items, value, onSelectTab }) => {
     };
     return (h("bal-select", { class: Object.assign({}, bemEl.class()), value: value, onBalChange: event => onChange(event) }, items
         .filter(tab => !tab.disabled && !tab.invisible)
-        .map(tab => (h("bal-select-option", { label: tab.label, value: tab.value }, tab.label)))));
+        .map(tab => (h("bal-select-option", { key: tab.value, label: tab.label, value: tab.value }, tab.label)))));
 };

package/dist/collection/components/bal-tag/bal-tag.css

@@ -1 +1 @@
-:root{--bal-tag-background: var(--bal-color-grey);--bal-tag-background-primary: var(--bal-color-primary);--bal-tag-background-grey: var(--bal-color-grey);--bal-tag-background-success: var(--bal-color-success-4);--bal-tag-background-info: var(--bal-color-info-4);--bal-tag-background-warning: var(--bal-color-warning-4);--bal-tag-background-danger: var(--bal-color-danger-4);--bal-tag-background-purple: var(--bal-color-purple-5);--bal-tag-background-red: var(--bal-color-red-5);--bal-tag-background-yellow: var(--bal-color-yellow-4);--bal-tag-background-green: var(--bal-color-green-4);--bal-tag-background-purple-light: var(--bal-color-purple-2);--bal-tag-background-red-light: var(--bal-color-red-2);--bal-tag-background-yellow-light: var(--bal-color-yellow-2);--bal-tag-background-green-light: var(--bal-color-green-2);--bal-tag-background-invalid: var(--bal-color-border-danger);--bal-tag-background-disabled: var(--bal-color-border-grey-dark);--bal-tag-radius: var(--bal-radius-rounded);--bal-tag-border-disabled-color: var(--bal-color-border-grey-dark);--bal-tag-text: var(--bal-color-primary);--bal-tag-text-primary: var(--bal-color-white);--bal-tag-text-grey: var(--bal-color-primary);--bal-tag-text-success: var(--bal-color-white);--bal-tag-text-info: var(--bal-color-white);--bal-tag-text-warning: var(--bal-color-primary);--bal-tag-text-danger: var(--bal-color-white);--bal-tag-text-purple: var(--bal-color-white);--bal-tag-text-red: var(--bal-color-white);--bal-tag-text-yellow: var(--bal-color-primary);--bal-tag-text-green: var(--bal-color-primary);--bal-tag-text-purple-light: var(--bal-color-primary);--bal-tag-text-red-light: var(--bal-color-primary);--bal-tag-text-yellow-light: var(--bal-color-primary);--bal-tag-text-green-light: var(--bal-color-primary);--bal-tag-text-invalid: var(--bal-color-text-white);--bal-tag-text-disabled: var(--bal-color-text-white)}.bal-tag{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:static;display:inline-flex;align-items:center;justify-content:center;min-height:2rem;line-height:1.5rem;padding:.25rem .75rem .25rem .75rem;background-color:var(--bal-tag-background);border-radius:var(--bal-tag-radius)}.bal-tag--is-small{padding:0 .75rem 0 .75rem;min-height:1.5rem}.bal-tag--is-medium{min-height:2.5rem;padding:.5rem 1rem .5rem 1rem}.bal-tag--is-large{min-height:3rem;padding:.75rem 1.5rem .75rem 1.5rem}.bal-tag--is-primary{background:var(--bal-tag-background-primary)}.bal-tag--is-grey{background:var(--bal-tag-background-grey)}.bal-tag--is-success{background:var(--bal-tag-background-success)}.bal-tag--is-info{background:var(--bal-tag-background-info)}.bal-tag--is-warning{background:var(--bal-tag-background-warning)}.bal-tag--is-danger{background:var(--bal-tag-background-danger)}.bal-tag--is-purple{background:var(--bal-tag-background-purple)}.bal-tag--is-red{background:var(--bal-tag-background-red)}.bal-tag--is-yellow{background:var(--bal-tag-background-yellow)}.bal-tag--is-green{background:var(--bal-tag-background-green)}.bal-tag--is-purple-light{background:var(--bal-tag-background-purple-light)}.bal-tag--is-red-light{background:var(--bal-tag-background-red-light)}.bal-tag--is-yellow-light{background:var(--bal-tag-background-yellow-light)}.bal-tag--is-green-light{background:var(--bal-tag-background-green-light)}.bal-tag--is-invalid{background:var(--bal-tag-background-invalid);color:var(--bal-color-text-white)}.bal-tag__label{font-family:var(--bal-font-family-text);color:var(--bal-tag-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal) !important;hyphens:auto;display:inline-flex;align-items:center;gap:.25rem}.bal-tag__label--is-small{font-size:var(--bal-text-size-small) !important;font-weight:var(--bal-font-weight-regular) !important}.bal-tag__label--is-medium{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-large{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-primary{color:var(--bal-tag-text-primary)}.bal-tag__label--is-grey{color:var(--bal-tag-text-grey)}.bal-tag__label--is-success{color:var(--bal-tag-text-success)}.bal-tag__label--is-info{color:var(--bal-tag-text-info)}.bal-tag__label--is-warning{color:var(--bal-tag-text-warning)}.bal-tag__label--is-danger{color:var(--bal-tag-text-danger)}.bal-tag__label--is-purple{color:var(--bal-tag-text-purple)}.bal-tag__label--is-red{color:var(--bal-tag-text-red)}.bal-tag__label--is-yellow{color:var(--bal-tag-text-yellow)}.bal-tag__label--is-green{color:var(--bal-tag-text-green)}.bal-tag__label--is-purple-light{color:var(--bal-tag-text-purple-light)}.bal-tag__label--is-red-light{color:var(--bal-tag-text-red-light)}.bal-tag__label--is-yellow-light{color:var(--bal-tag-text-yellow-light)}.bal-tag__label--is-green-light{color:var(--bal-tag-text-green-light)}.bal-tag__label--is-invalid{background:var(--bal-color-border-danger);color:var(--bal-tag-text-invalid)}.bal-tag__label--is-disabled{background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color)}.bal-tag--is-disabled{cursor:default;pointer-events:none;user-select:none;background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color);box-shadow:none;color:var(--bal-tag-text-disabled)}.bal-tag--is-disabled>span{color:var(--bal-tag-text-disabled)}.bal-tag__close{margin-left:.25rem;margin-right:-0.5rem}.bal-tag-group{display:flex;gap:.25rem}
+:root{--bal-tag-background: var(--bal-color-grey);--bal-tag-background-primary: var(--bal-color-primary);--bal-tag-background-grey: var(--bal-color-grey);--bal-tag-background-success: var(--bal-color-success-4);--bal-tag-background-info: var(--bal-color-info-4);--bal-tag-background-warning: var(--bal-color-warning-4);--bal-tag-background-danger: var(--bal-color-danger-4);--bal-tag-background-purple: var(--bal-color-purple-5);--bal-tag-background-red: var(--bal-color-red-5);--bal-tag-background-yellow: var(--bal-color-yellow-4);--bal-tag-background-green: var(--bal-color-green-4);--bal-tag-background-purple-light: var(--bal-color-purple-2);--bal-tag-background-red-light: var(--bal-color-red-2);--bal-tag-background-yellow-light: var(--bal-color-yellow-2);--bal-tag-background-green-light: var(--bal-color-green-2);--bal-tag-background-invalid: var(--bal-color-border-danger);--bal-tag-background-disabled: var(--bal-color-border-grey-dark);--bal-tag-radius: var(--bal-radius-rounded);--bal-tag-border-disabled-color: var(--bal-color-border-grey-dark);--bal-tag-text: var(--bal-color-primary);--bal-tag-text-primary: var(--bal-color-white);--bal-tag-text-grey: var(--bal-color-primary);--bal-tag-text-success: var(--bal-color-white);--bal-tag-text-info: var(--bal-color-white);--bal-tag-text-warning: var(--bal-color-primary);--bal-tag-text-danger: var(--bal-color-white);--bal-tag-text-purple: var(--bal-color-white);--bal-tag-text-red: var(--bal-color-white);--bal-tag-text-yellow: var(--bal-color-primary);--bal-tag-text-green: var(--bal-color-primary);--bal-tag-text-purple-light: var(--bal-color-primary);--bal-tag-text-red-light: var(--bal-color-primary);--bal-tag-text-yellow-light: var(--bal-color-primary);--bal-tag-text-green-light: var(--bal-color-primary);--bal-tag-text-invalid: var(--bal-color-text-white);--bal-tag-text-disabled: var(--bal-color-text-white);--bal-tag-size-small-font-size: var(--bal-text-size-small);--bal-tag-size-small-font-weight: var(--bal-font-weight-regular)}.bal-tag{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:static;display:inline-flex;align-items:center;justify-content:center;min-height:2rem;line-height:1.5rem;padding:.25rem .75rem .25rem .75rem;background-color:var(--bal-tag-background);border-radius:var(--bal-tag-radius)}.bal-tag--is-small{padding:0 .75rem 0 .75rem;min-height:1.5rem}.bal-tag--is-medium{min-height:2.5rem;padding:.5rem 1rem .5rem 1rem}.bal-tag--is-large{min-height:3rem;padding:.75rem 1.5rem .75rem 1.5rem}.bal-tag--is-primary{background:var(--bal-tag-background-primary)}.bal-tag--is-grey{background:var(--bal-tag-background-grey)}.bal-tag--is-success{background:var(--bal-tag-background-success)}.bal-tag--is-info{background:var(--bal-tag-background-info)}.bal-tag--is-warning{background:var(--bal-tag-background-warning)}.bal-tag--is-danger{background:var(--bal-tag-background-danger)}.bal-tag--is-purple{background:var(--bal-tag-background-purple)}.bal-tag--is-red{background:var(--bal-tag-background-red)}.bal-tag--is-yellow{background:var(--bal-tag-background-yellow)}.bal-tag--is-green{background:var(--bal-tag-background-green)}.bal-tag--is-purple-light{background:var(--bal-tag-background-purple-light)}.bal-tag--is-red-light{background:var(--bal-tag-background-red-light)}.bal-tag--is-yellow-light{background:var(--bal-tag-background-yellow-light)}.bal-tag--is-green-light{background:var(--bal-tag-background-green-light)}.bal-tag--is-invalid{background:var(--bal-tag-background-invalid);color:var(--bal-color-text-white)}.bal-tag__label{font-family:var(--bal-font-family-text);color:var(--bal-tag-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal) !important;hyphens:auto;display:inline-flex;align-items:center;gap:.25rem}.bal-tag__label--is-small{font-size:var(--bal-tag-size-small-font-size) !important;font-weight:var(--bal-tag-size-small-font-weight) !important}.bal-tag__label--is-medium{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-large{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-primary{color:var(--bal-tag-text-primary)}.bal-tag__label--is-grey{color:var(--bal-tag-text-grey)}.bal-tag__label--is-success{color:var(--bal-tag-text-success)}.bal-tag__label--is-info{color:var(--bal-tag-text-info)}.bal-tag__label--is-warning{color:var(--bal-tag-text-warning)}.bal-tag__label--is-danger{color:var(--bal-tag-text-danger)}.bal-tag__label--is-purple{color:var(--bal-tag-text-purple)}.bal-tag__label--is-red{color:var(--bal-tag-text-red)}.bal-tag__label--is-yellow{color:var(--bal-tag-text-yellow)}.bal-tag__label--is-green{color:var(--bal-tag-text-green)}.bal-tag__label--is-purple-light{color:var(--bal-tag-text-purple-light)}.bal-tag__label--is-red-light{color:var(--bal-tag-text-red-light)}.bal-tag__label--is-yellow-light{color:var(--bal-tag-text-yellow-light)}.bal-tag__label--is-green-light{color:var(--bal-tag-text-green-light)}.bal-tag__label--is-invalid{background:var(--bal-color-border-danger);color:var(--bal-tag-text-invalid)}.bal-tag__label--is-disabled{background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color)}.bal-tag--is-disabled{cursor:default;pointer-events:none;user-select:none;background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color);box-shadow:none;color:var(--bal-tag-text-disabled)}.bal-tag--is-disabled>span{color:var(--bal-tag-text-disabled)}.bal-tag__close{margin-left:.25rem;margin-right:-0.5rem}.bal-tag-group{display:flex;gap:.25rem}