npm - wabtec-internal-volt-basic-components - Versions diffs - 1.0.0 → 1.2.0 - Mend

wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (773) hide show

package/dist/collection/components/upload-item/vds-upload-item.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class VdsUploadItem {
         return (h("div", { class: "vds-upload-item__remove-icon" }, h("vds-icon-button", { icon: this.status === 'loading' ? 'close' : 'trash', size: this.size === 'medium' ? 'small' : 'medium', variant: "secondary", setAriaLabel: "Remove item", onClick: (event => this.handleIconButtonClick(event)) })));
     }
     render() {
-        return (h(Host, { key: 'ab0650e6312bfe5faee20377f4325fd7467c5bb2' }, h("div", { key: 'fe0779f9529d0ad9e796ea1f1139c606a74ae908', class: combineClasses('vds-upload-item', `vds-upload-item--size-${this.size}`, `vds-upload-item--${this.status}`) }, h("div", { key: '690ea9fe83c861bc6dc7713c2625c731206c5e51', class: "vds-upload-item__content" }, this.renderInformativeIcon(), this.generateLabel(), this.renderRemoveButton()))));
+        return (h(Host, { key: '8994424ceeb17883a01f49afe676bf511b583339' }, h("div", { key: 'eae55db9a14a67f47fc632faa5a5febd9a8bf20a', class: combineClasses('vds-upload-item', `vds-upload-item--size-${this.size}`, `vds-upload-item--${this.status}`) }, h("div", { key: 'fbbff1067862ed18f8e3be2b9b116265cbe80b4a', class: "vds-upload-item__content" }, this.renderInformativeIcon(), this.generateLabel(), this.renderRemoveButton()))));
     }
     static get is() { return "vds-upload-item"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +54,6 @@ export class VdsUploadItem {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -70,11 +69,11 @@ export class VdsUploadItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'large' | 'medium'",
@@ -90,11 +89,11 @@ export class VdsUploadItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,11 +109,11 @@ export class VdsUploadItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "informative-icon",
                 "defaultValue": "'link-closed'"
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": false,
                 "complexType": {
                     "original": "'loading' | 'error' | 'default'",
@@ -130,11 +129,11 @@ export class VdsUploadItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "status",
                 "defaultValue": "'default'"
             },
             "loadingValue": {
                 "type": "number",
-                "attribute": "loading-value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -150,11 +149,11 @@ export class VdsUploadItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "loading-value",
                 "defaultValue": "75"
             },
             "loadingDuration": {
                 "type": "number",
-                "attribute": "loading-duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -170,6 +169,7 @@ export class VdsUploadItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "loading-duration",
                 "defaultValue": "500"
             }
         };

package/dist/collection/components/vds-basic-combo-box/vds-basic-combo-box.css CHANGED Viewed

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);
@@ -952,12 +966,12 @@
   padding: calc(var(--spacing-02) - 1px) calc(var(--spacing-03) - 1px);
   min-height: var(--spacing-07);
 }
-:host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content {
-  row-gap: var(--spacing-02);
-}
 :host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content.vds-combo-box__input-content--has-value {
   column-gap: var(--spacing-01);
 }
+:host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content {
+  row-gap: var(--spacing-02);
+}
 :host .vds-combo-box__container.vds-combo-box--size-small .vds-combo-box__input-content .vds-combo-box__chip-container {
   height: var(--spacing-04);
 }
@@ -977,12 +991,12 @@
   padding: calc(var(--spacing-03) - 1px) calc(var(--spacing-04) - 1px);
   min-height: var(--spacing-10);
 }
-:host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content {
-  row-gap: var(--spacing-03);
-}
 :host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content.vds-combo-box__input-content--has-value {
   column-gap: var(--spacing-02);
 }
+:host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content {
+  row-gap: var(--spacing-03);
+}
 :host .vds-combo-box__container.vds-combo-box--size-medium .vds-combo-box__input-content .vds-combo-box__chip-container {
   height: var(--spacing-06);
 }
@@ -1002,12 +1016,12 @@
   padding: calc(var(--spacing-04) - 1px) calc(var(--spacing-05) - 1px);
   min-height: var(--spacing-13);
 }
-:host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content {
-  row-gap: var(--spacing-03);
-}
 :host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content.vds-combo-box__input-content--has-value {
   column-gap: var(--spacing-02);
 }
+:host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content {
+  row-gap: var(--spacing-03);
+}
 :host .vds-combo-box__container.vds-combo-box--size-large .vds-combo-box__input-content .vds-combo-box__chip-container {
   height: var(--spacing-07);
 }

package/dist/collection/components/vds-basic-combo-box/vds-basic-combo-box.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { isValidIcon, setDirtyClass, getIconColor, toggleFocusClass } from "../input/vds-basic-input.utils";
 import { cloneAttributes } from "../../utils/clone-attributes";
+import { emitInputEvent } from "../../utils/form";
 export class VdsBasicComboBox {
     constructor() {
         /** Sets the combobox size. */
@@ -15,6 +16,7 @@ export class VdsBasicComboBox {
         this.internalValue = "";
     }
     valueChangedHandler(newValue) {
+        emitInputEvent(this.hostEl, newValue == null || newValue.length == 0 ? "" : newValue.join(","));
         this.valueChanged.emit(newValue);
     }
     /* Sets focus to the input element */
@@ -107,15 +109,21 @@ export class VdsBasicComboBox {
     handleActionButton() {
         this.actionIconClick.emit();
     }
+    getChipSelectedOptions() {
+        if (this.value == null || this.value.length === 0) {
+            return [];
+        }
+        return this.value.map((val) => (h("div", { class: "vds-combo-box__chip-container" }, h("vds-chip", { class: "vds-combo-box__chip", value: val, size: this.size, disabled: this.disabled || this.isReadonly, close: true, removeOnClose: false, onAfterClosed: () => this.handleCloseChip(val) }))));
+    }
     render() {
         var _a;
-        return (h(Host, { key: 'cb9772767f5d0fecb7df380a1fdd6d5cd8cd83f0', class: this.disabled ? "vds-combo-box--disabled" : "" }, h("div", { key: 'f1871a8ba103f7bc04f998607defed955cada9ee', ref: (el) => {
+        return (h(Host, { key: 'ca3197c462632efd369247d9290e928ff4f19b95', class: this.disabled ? "vds-combo-box--disabled" : "" }, h("div", { key: '0e682f78b52d2ecf7d5edee8917a2ce5f4683620', ref: (el) => {
                 if (el)
                     this.inputContainerRef = el;
-            }, class: combineClasses("vds-combo-box__container", `vds-combo-box--size-${this.size}`, this.error && "vds-combo-box__container--error", this.isReadonly && "vds-combo-box__container--readonly", this.disabled && "vds-combo-box__container--disabled") }, this.getInputIcon(this.informativeIcon), h("div", { key: '28097a9af267fab216e5c6d73ad85102b67fd898', class: combineClasses("vds-combo-box__input-content", ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "vds-combo-box__input-content--has-value" : "") }, this.value.map((val) => (h("div", { class: "vds-combo-box__chip-container" }, h("vds-chip", { class: "vds-combo-box__chip", value: val, size: this.size, disabled: this.disabled || this.isReadonly, close: true, removeOnClose: false, onAfterClosed: () => this.handleCloseChip(val) })))), h("input", Object.assign({ key: '4464f822757a6533a628be6a7420011ebd96a90c', ref: (el) => {
+            }, class: combineClasses("vds-combo-box__container", `vds-combo-box--size-${this.size}`, this.error && "vds-combo-box__container--error", this.isReadonly && "vds-combo-box__container--readonly", this.disabled && "vds-combo-box__container--disabled") }, this.getInputIcon(this.informativeIcon), h("div", { key: 'cfd8f0952aac81d7813436a696d70d1e91be91a3', class: combineClasses("vds-combo-box__input-content", ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "vds-combo-box__input-content--has-value" : "") }, this.getChipSelectedOptions(), h("input", Object.assign({ key: '7d26f8d9304d1c35ae86230dab83d25abb2f9eab', ref: (el) => {
                 if (el)
                     this.inputEl = el;
-            }, class: "vds-combo-box__input", type: "text", value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.isReadonly, onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style")))), this.showClearButton && (h("vds-icon-button", { key: '1c5150f902042a296e7520a7ed64ed29fc069d19', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: "close", size: this.getSizeIconButton(), onClick: () => this.clear() })), this.actionIcon && (h("vds-icon-button", { key: '1fa7db8fdde189f1c0e3e09f18c1de33c2c538f5', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: this.actionIcon, size: this.getSizeIconButton(), onClick: () => this.handleActionButton() })))));
+            }, class: "vds-combo-box__input", type: "text", value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.isReadonly, onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style")))), this.showClearButton && (h("vds-icon-button", { key: '0e5f655aacfdbcb9092966e294ceeb4322097339', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: "close", size: this.getSizeIconButton(), onClick: () => this.clear() })), this.actionIcon && (h("vds-icon-button", { key: 'be105f5c151421b1f20b8bf8992e097654e2f89a', variant: "secondary", disabled: this.disabled || this.isReadonly, icon: this.actionIcon, size: this.getSizeIconButton(), onClick: () => this.handleActionButton() })))));
     }
     static get is() { return "vds-basic-combo-box"; }
     static get encapsulation() { return "shadow"; }
@@ -133,7 +141,6 @@ export class VdsBasicComboBox {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"medium\" | \"large\" | \"small\"",
@@ -149,11 +156,11 @@ export class VdsBasicComboBox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "value": {
                 "type": "unknown",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string[]",
@@ -172,7 +179,6 @@ export class VdsBasicComboBox {
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -187,11 +193,11 @@ export class VdsBasicComboBox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "placeholder"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -206,11 +212,11 @@ export class VdsBasicComboBox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "disabled"
             },
             "isReadonly": {
                 "type": "boolean",
-                "attribute": "is-readonly",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -225,11 +231,11 @@ export class VdsBasicComboBox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "is-readonly"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -244,11 +250,11 @@ export class VdsBasicComboBox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "error"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -263,11 +269,11 @@ export class VdsBasicComboBox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "showClearButton": {
                 "type": "boolean",
-                "attribute": "show-clear-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -283,11 +289,11 @@ export class VdsBasicComboBox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-clear-button",
                 "defaultValue": "true"
             },
             "actionIcon": {
                 "type": "string",
-                "attribute": "action-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -303,6 +309,7 @@ export class VdsBasicComboBox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "action-icon",
                 "defaultValue": "\"zoom\""
             }
         };

package/dist/collection/components/vds-basic-combo-box/vds-basic-combo-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vds-basic-combo-box.js","sourceRoot":"","sources":["../../../src/components/vds-basic-combo-box/vds-basic-combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from \"@stencil/core\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { HTMLStencilElement, State, Watch } from \"@stencil/core/internal\";\nimport { isValidIcon, setDirtyClass, getIconColor, toggleFocusClass } from \"../input/vds-basic-input.utils\";\nimport { cloneAttributes } from \"../../utils/clone-attributes\";\n\n@Component({\n tag: \"vds-basic-combo-box\",\n styleUrl: \"vds-basic-combo-box.scss\",\n shadow: true,\n})\nexport class VdsBasicComboBox {\n /** Sets the combobox size. /\n @Prop({ mutable: true }) size: \"medium\" \| \"large\" \| \"small\" = \"medium\";\n /* Sets the combobox value. /\n @Prop({ mutable: true, reflect: true }) value: string[] = [];\n /* Sets the combobox placeholder. /\n @Prop({ mutable: true, reflect: true }) placeholder: string;\n /* Sets the combobox in disabled state. /\n @Prop({ mutable: true, reflect: true }) disabled: boolean;\n /* Sets the combobox in readonly state. /\n @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n /* Sets the combobox in error state. /\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /* Allows user to define a information icon inside the combobox at its left . /\n @Prop() informativeIcon: string;\n /* Sets the combobox clear button visibility. /\n @Prop() showClearButton: boolean = true;\n /* Allows user to define a search icon inside the input at its right (zoom by default) . /\n @Prop() actionIcon: string = \"zoom\";\n\n /* Emits event when the selected chips list change, this event contains the value of the selected chips /\n @Event() valueChanged: EventEmitter<string[]>;\n /* Emits an event when the clear button is clicked /\n @Event() cleared: EventEmitter<void>;\n /* Emits an event when the user click the actionIcon (the magnifying glass) /\n @Event() actionIconClick: EventEmitter<void>;\n /* Emits updated inputed value similar to the input event /\n @Event() changeInput: EventEmitter<string>;\n\n @State() internalValue: string = \"\";\n\n @Element() hostEl: HTMLElement;\n\n private inputContainerRef: HTMLDivElement;\n private inputEl: HTMLInputElement;\n\n @Watch(\"value\")\n valueChangedHandler(newValue: string[]): void {\n this.valueChanged.emit(newValue);\n }\n\n / Sets focus to the input element /\n @Method()\n public async setFocus(): Promise<void> {\n return new Promise((resolve) => {\n this.inputEl.focus();\n resolve();\n });\n }\n\n /\n Sets the autocomplete input value to handle filtering.\n \n @returns {Promise<void>} \n /\n @Method()\n public async setValue(value: string[]): Promise<void> {\n this.value = value;\n return Promise.resolve();\n }\n\n /\n Return the autocomplete value.\n \n @returns {Promise<string>} A promise that resolves by returning the autocomplete value.\n /\n @Method()\n public async getValue(): Promise<string[]> {\n return Promise.resolve(this.value);\n }\n\n /\n Clears the selected options and resets the value of the autocomplete.\n \n @returns {Promise<void>} A promise that resolves when the clearing operation is complete.\n /\n @Method()\n public async clear(): Promise<void> {\n this.value = [];\n this.internalValue = \"\";\n this.cleared.emit();\n return Promise.resolve();\n }\n\n /\n Displays vds-icon when icon string is valid\n \n @returns HTMLStencilElement\n /\n private getInputIcon(icon: string): HTMLStencilElement {\n if(!isValidIcon(icon)) return null;\n\n const inputState = this.disabled ? \"disabled\" : this.isReadonly ? \"readonly\" : \"normal\";\n const size = this.size === \"medium\" ? \"1rem\" : this.size === \"small\" ? \"0.75rem\" : \"1.25rem\";\n return (<vds-icon class=\"vds-combo-box__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n }\n\n /\n Sets value from input\"s event target.\n * Emits change, input and changeInput events.\n * Sets input as dirty when input\"s event is triggered.\n * Executes formatter prop function on every inputed value.\n \n @returns void\n /\n private handleInput(evt: InputEvent): void {\n evt.stopPropagation();\n const target = evt.target as HTMLInputElement;\n const inputEvent = new InputEvent(\"input\");\n setDirtyClass(this.hostEl);\n\n this.internalValue = target.value;\n\n this.changeInput.emit(this.internalValue);\n this.hostEl.dispatchEvent(inputEvent);\n }\n\n /\n Toggle class vds__input__container--focus in focus/blur input\"s event\n \n @returns void\n */\n private toggleFocusClass(): void {\n this.inputContainerRef && toggleFocusClass(this.inputContainerRef);\n }\n\n private handleCloseChip(val: string): void {\n this.value = this.value.filter(item => item !== val);\n }\n\n private getSizeIconButton(): \"medium\" \| \"large\" \| \"small\" \| \"extra-small\" {\n switch(this.size) {\n case \"small\": \n return \"extra-small\";\n case \"medium\": \n return \"small\";\n case \"large\": \n return \"medium\";\n default: \n return \"small\";\n }\n }\n\n private handleActionButton(): void {\n this.actionIconClick.emit();\n }\n\n render() {\n return (\n <Host class={this.disabled ? \"vds-combo-box--disabled\" : \"\"}>\n <div\n ref={(el): void => { if(el) this.inputContainerRef = el} }\n class={combineClasses(\n \"vds-combo-box__container\",\n `vds-combo-box--size-${this.size}`,\n this.error && \"vds-combo-box__container--error\",\n this.isReadonly && \"vds-combo-box__container--readonly\",\n this.disabled && \"vds-combo-box__container--disabled\"\n )}\n >\n {this.getInputIcon(this.informativeIcon)}\n <div class={combineClasses(\"vds-combo-box__input-content\", this.value?.length > 0 ? \"vds-combo-box__input-content--has-value\" : \"\")}>\n {this.value.map((val: string) => (\n <div class=\"vds-combo-box__chip-container\">\n <vds-chip \n class={\"vds-combo-box__chip\"}\n value={val}\n size={this.size}\n disabled={this.disabled \|\| this.isReadonly}\n close={true}\n removeOnClose={false}\n onAfterClosed={() => this.handleCloseChip(val)}>\n </vds-chip>\n </div>\n ))}\n <input\n ref={(el): void => { if(el) this.inputEl = el} }\n class={\"vds-combo-box__input\"}\n type={\"text\"}\n value={this.internalValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.isReadonly}\n onInput={(evt): void => this.handleInput(evt)}\n onFocus={(): void => this.toggleFocusClass()}\n onBlur={(): void => this.toggleFocusClass()}\n {...cloneAttributes(\n this.hostEl,\n \"class\",\n \"value\",\n \"disabled\",\n \"placeholder\",\n \"label\",\n \"style\",\n )}\n />\n </div>\n {this.showClearButton && (<vds-icon-button variant=\"secondary\" disabled={this.disabled \|\| this.isReadonly} icon={\"close\"} size={this.getSizeIconButton()} onClick={() => this.clear()} />)}\n {this.actionIcon && (<vds-icon-button variant=\"secondary\" disabled={this.disabled \|\| this.isReadonly} icon={this.actionIcon} size={this.getSizeIconButton()} onClick={() => this.handleActionButton()} />)}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"vds-basic-combo-box.js","sourceRoot":"","sources":["../../../src/components/vds-basic-combo-box/vds-basic-combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from \"@stencil/core\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { HTMLStencilElement, State, Watch } from \"@stencil/core/internal\";\nimport { isValidIcon, setDirtyClass, getIconColor, toggleFocusClass } from \"../input/vds-basic-input.utils\";\nimport { cloneAttributes } from \"../../utils/clone-attributes\";\nimport { emitInputEvent } from \"../../utils/form\";\n\n@Component({\n tag: \"vds-basic-combo-box\",\n styleUrl: \"vds-basic-combo-box.scss\",\n shadow: true,\n})\nexport class VdsBasicComboBox {\n /** Sets the combobox size. /\n @Prop({ mutable: true }) size: \"medium\" \| \"large\" \| \"small\" = \"medium\";\n /* Sets the combobox value. /\n @Prop({ mutable: true, reflect: true }) value: string[] = [];\n /* Sets the combobox placeholder. /\n @Prop({ mutable: true, reflect: true }) placeholder: string;\n /* Sets the combobox in disabled state. /\n @Prop({ mutable: true, reflect: true }) disabled: boolean;\n /* Sets the combobox in readonly state. /\n @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n /* Sets the combobox in error state. /\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /* Allows user to define a information icon inside the combobox at its left . /\n @Prop() informativeIcon: string;\n /* Sets the combobox clear button visibility. /\n @Prop() showClearButton: boolean = true;\n /* Allows user to define a search icon inside the input at its right (zoom by default) . /\n @Prop() actionIcon: string = \"zoom\";\n\n /* Emits event when the selected chips list change, this event contains the value of the selected chips /\n @Event() valueChanged: EventEmitter<string[]>;\n /* Emits an event when the clear button is clicked /\n @Event() cleared: EventEmitter<void>;\n /* Emits an event when the user click the actionIcon (the magnifying glass) /\n @Event() actionIconClick: EventEmitter<void>;\n /* Emits updated inputed value similar to the input event /\n @Event() changeInput: EventEmitter<string>;\n\n @State() internalValue: string = \"\";\n\n @Element() hostEl: HTMLElement;\n\n private inputContainerRef: HTMLDivElement;\n private inputEl: HTMLInputElement;\n\n @Watch(\"value\")\n valueChangedHandler(newValue: string[]): void {\n emitInputEvent(this.hostEl, newValue == null \|\| newValue.length == 0 ? \"\" : newValue.join(\",\"));\n this.valueChanged.emit(newValue);\n }\n\n / Sets focus to the input element /\n @Method()\n public async setFocus(): Promise<void> {\n return new Promise((resolve) => {\n this.inputEl.focus();\n resolve();\n });\n }\n\n /\n Sets the autocomplete input value to handle filtering.\n \n @returns {Promise<void>} \n /\n @Method()\n public async setValue(value: string[]): Promise<void> {\n this.value = value;\n return Promise.resolve();\n }\n\n /\n Return the autocomplete value.\n \n @returns {Promise<string>} A promise that resolves by returning the autocomplete value.\n /\n @Method()\n public async getValue(): Promise<string[]> {\n return Promise.resolve(this.value);\n }\n\n /\n Clears the selected options and resets the value of the autocomplete.\n \n @returns {Promise<void>} A promise that resolves when the clearing operation is complete.\n /\n @Method()\n public async clear(): Promise<void> {\n this.value = [];\n this.internalValue = \"\";\n this.cleared.emit();\n return Promise.resolve();\n }\n\n /\n Displays vds-icon when icon string is valid\n \n @returns HTMLStencilElement\n /\n private getInputIcon(icon: string): HTMLStencilElement {\n if(!isValidIcon(icon)) return null;\n\n const inputState = this.disabled ? \"disabled\" : this.isReadonly ? \"readonly\" : \"normal\";\n const size = this.size === \"medium\" ? \"1rem\" : this.size === \"small\" ? \"0.75rem\" : \"1.25rem\";\n return (<vds-icon class=\"vds-combo-box__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n }\n\n /\n Sets value from input\"s event target.\n * Emits change, input and changeInput events.\n * Sets input as dirty when input\"s event is triggered.\n * Executes formatter prop function on every inputed value.\n \n @returns void\n /\n private handleInput(evt: InputEvent): void {\n evt.stopPropagation();\n const target = evt.target as HTMLInputElement;\n const inputEvent = new InputEvent(\"input\");\n setDirtyClass(this.hostEl);\n\n this.internalValue = target.value;\n\n this.changeInput.emit(this.internalValue);\n this.hostEl.dispatchEvent(inputEvent);\n }\n\n /\n Toggle class vds__input__container--focus in focus/blur input\"s event\n \n @returns void\n */\n private toggleFocusClass(): void {\n this.inputContainerRef && toggleFocusClass(this.inputContainerRef);\n }\n\n private handleCloseChip(val: string): void {\n this.value = this.value.filter(item => item !== val);\n }\n\n private getSizeIconButton(): \"medium\" \| \"large\" \| \"small\" \| \"extra-small\" {\n switch(this.size) {\n case \"small\": \n return \"extra-small\";\n case \"medium\": \n return \"small\";\n case \"large\": \n return \"medium\";\n default: \n return \"small\";\n }\n }\n\n private handleActionButton(): void {\n this.actionIconClick.emit();\n }\n\n getChipSelectedOptions() {\n if (this.value == null \|\| this.value.length === 0) {\n return [];\n }\n\n return this.value.map((val: string) => (\n <div class=\"vds-combo-box__chip-container\">\n <vds-chip \n class={\"vds-combo-box__chip\"}\n value={val}\n size={this.size}\n disabled={this.disabled \|\| this.isReadonly}\n close={true}\n removeOnClose={false}\n onAfterClosed={() => this.handleCloseChip(val)}>\n </vds-chip>\n </div>\n ));\n }\n\n render() {\n return (\n <Host class={this.disabled ? \"vds-combo-box--disabled\" : \"\"}>\n <div\n ref={(el): void => { if(el) this.inputContainerRef = el} }\n class={combineClasses(\n \"vds-combo-box__container\",\n `vds-combo-box--size-${this.size}`,\n this.error && \"vds-combo-box__container--error\",\n this.isReadonly && \"vds-combo-box__container--readonly\",\n this.disabled && \"vds-combo-box__container--disabled\"\n )}\n >\n {this.getInputIcon(this.informativeIcon)}\n <div class={combineClasses(\"vds-combo-box__input-content\", this.value?.length > 0 ? \"vds-combo-box__input-content--has-value\" : \"\")}>\n {this.getChipSelectedOptions()}\n <input\n ref={(el): void => { if(el) this.inputEl = el} }\n class={\"vds-combo-box__input\"}\n type={\"text\"}\n value={this.internalValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.isReadonly}\n onInput={(evt): void => this.handleInput(evt)}\n onFocus={(): void => this.toggleFocusClass()}\n onBlur={(): void => this.toggleFocusClass()}\n {...cloneAttributes(\n this.hostEl,\n \"class\",\n \"value\",\n \"disabled\",\n \"placeholder\",\n \"label\",\n \"style\",\n )}\n />\n </div>\n {this.showClearButton && (<vds-icon-button variant=\"secondary\" disabled={this.disabled \|\| this.isReadonly} icon={\"close\"} size={this.getSizeIconButton()} onClick={() => this.clear()} />)}\n {this.actionIcon && (<vds-icon-button variant=\"secondary\" disabled={this.disabled \|\| this.isReadonly} icon={this.actionIcon} size={this.getSizeIconButton()} onClick={() => this.handleActionButton()} />)}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/constants/color-vars.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export default { "theme": { "color-background-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-background-brand-default": { "light": "#007DBA", "dark": "#056CA0" }, "color-background-brand-hover": { "light": "#056CA0", "dark": "#095B87" }, "color-background-brand-press": { "light": "#095B87", "dark": "#0E4A6C" }, "color-background-caution-default": { "light": "#D0A60B", "dark": "#FED133" }, "color-background-caution-lowest-default": { "light": "#FFF9E5", "dark": "#2F3834" }, "color-background-caution-lowest-hover": { "light": "#FEF3CC", "dark": "#46482E" }, "color-background-caution-lowest-press": { "light": "#FEE899", "dark": "#746722" }, "color-background-danger-default": { "light": "#F34336", "dark": "#C83E38" }, "color-background-danger-high-default": { "light": "#F34336", "dark": "#C83E38" }, "color-background-danger-high-hover": { "light": "#C83E38", "dark": "#9D3A3A" }, "color-background-danger-high-press": { "light": "#9D3A3A", "dark": "#72363B" }, "color-background-danger-lowest-default": { "light": "#FEECEB", "dark": "#72363B" }, "color-background-danger-lowest-hover": { "light": "#FCD9D6", "dark": "#47323D" }, "color-background-danger-lowest-press": { "light": "#FAB3AE", "dark": "#2E2B3A" }, "color-background-general-default": { "light": "#8F9295", "dark": "#BDBDBD" }, "color-background-general-lowest-default": { "light": "#f7f7f7", "dark": "#273646" }, "color-background-general-lowest-hover": { "light": "#EEEEEE", "dark": "#364351" }, "color-background-general-lowest-press": { "light": "#DEDEDE", "dark": "#535D67" }, "color-background-healthy-default": { "light": "#7FAE1B", "dark": "#B2CE76" }, "color-background-healthy-lowest-default": { "light": "#F2F7E8", "dark": "#223637" }, "color-background-healthy-lowest-hover": { "light": "#E5EED1", "dark": "#2C4333" }, "color-background-healthy-lowest-press": { "light": "#CBDEA3", "dark": "#415E2D" }, "color-background-information-default": { "light": "#056CA0", "dark": "#3397C7" }, "color-background-information-lowest-default": { "light": "#E6F2F8", "dark": "#153147" }, "color-background-information-lowest-hover": { "light": "#CCE5F1", "dark": "#133953" }, "color-background-information-lowest-press": { "light": "#99CBE3", "dark": "#0E4A6C" }, "color-background-neutral-default": { "light": "#E8E9EB", "dark": "#101924" }, "color-background-neutral-hover": { "light": "#CFD3D7", "dark": "#213142" }, "color-background-neutral-press": { "light": "#C4C8CE", "dark": "#334152" }, "color-background-neutral-lowest-default": { "light": "#F9FAFA", "dark": "#0B121A" }, "color-background-neutral-lowest-hover": { "light": "#E8E9EB", "dark": "#101924" }, "color-background-neutral-lowest-press": { "light": "#CFD3D7", "dark": "#213142" }, "color-background-warning-default": { "light": "#D17739", "dark": "#FFA261" }, "color-background-warning-lowest-default": { "light": "#FFF3EB", "dark": "#2F323A" }, "color-background-warning-lowest-hover": { "light": "#FFE7D7", "dark": "#463C3A" }, "color-background-warning-lowest-press": { "light": "#FFD0B0", "dark": "#745039" }, "color-border-high": { "light": "#041821", "dark": "#ffffff" }, "color-border-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-border-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-border-lower": { "light": "rgba(4, 24, 33, 0.1607843137)", "dark": "rgba(255, 255, 255, 0.1607843137)" }, "color-border-lowest": { "light": "rgba(4, 24, 33, 0.0784313725)", "dark": "rgba(255, 255, 255, 0.1215686275)" }, "color-border-brand": { "light": "#007DBA", "dark": "#66B1D5" }, "color-border-brand-hover": { "light": "#CCE5F1", "dark": "#133953" }, "color-border-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-border-danger": { "light": "#C83E38", "dark": "#F78E86" }, "color-border-healthy": { "light": "#6B9321", "dark": "#98BE48" }, "color-border-caution": { "light": "#D0A60B", "dark": "#FED133" }, "color-border-warning": { "light": "#D17739", "dark": "#FFA261" }, "color-border-information": { "light": "#056CA0", "dark": "#66B1D5" }, "color-border-general": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-border-focus-1": { "light": "#ffffff", "dark": "#041821" }, "color-border-focus-2": { "light": "#133953", "dark": "#CCE5F1" }, "color-border-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-border-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-border-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" }, "color-border-white-lower": { "light": "rgba(255, 255, 255, 0.1607843137)", "dark": "rgba(4, 24, 33, 0.1607843137)" }, "color-border-white-lowest": { "light": "rgba(255, 255, 255, 0.1215686275)", "dark": "rgba(4, 24, 33, 0.0784313725)" }, "color-icon-high": { "light": "#041821", "dark": "#ffffff" }, "color-icon-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-icon-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-icon-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-icon-healthy": { "light": "#6B9321", "dark": "#98BE48" }, "color-icon-caution": { "light": "#D0A60B", "dark": "#FED133" }, "color-icon-warning": { "light": "#D17739", "dark": "#FFA261" }, "color-icon-danger": { "light": "#C83E38", "dark": "#F78E86" }, "color-icon-information": { "light": "#056CA0", "dark": "#66B1D5" }, "color-icon-general": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-icon-brand-default": { "light": "#007DBA", "dark": "#66B1D5" }, "color-icon-brand-hover": { "light": "#056CA0", "dark": "#99CBE3" }, "color-icon-brand-press": { "light": "#095B87", "dark": "#CCE5F1" }, "color-icon-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-icon-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-icon-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" }, "color-interaction-black-medium": { "light": "rgba(16, 25, 36, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-interaction-black-low": { "light": "rgba(16, 25, 36, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-interaction-black-lower": { "light": "rgba(16, 25, 36, 0.1607843137)", "dark": "rgba(255, 255, 255, 0.1607843137)" }, "color-interaction-black-lowest": { "light": "rgba(16, 25, 36, 0.1215686275)", "dark": "rgba(255, 255, 255, 0.1215686275)" }, "color-interaction-brand-medium": { "light": "rgba(0, 125, 186, 0.6392156863)", "dark": "rgba(102, 177, 213, 0.6392156863)" }, "color-interaction-brand-low": { "light": "rgba(0, 122, 184, 0.3215686275)", "dark": "rgba(102, 177, 213, 0.3215686275)" }, "color-interaction-brand-lower": { "light": "rgba(0, 125, 186, 0.1607843137)", "dark": "rgba(102, 177, 213, 0.1607843137)" }, "color-interaction-brand-lowest": { "light": "rgba(0, 125, 186, 0.1215686275)", "dark": "rgba(102, 177, 213, 0.1215686275)" }, "color-interaction-danger-medium": { "light": "rgba(200, 62, 56, 0.6392156863)", "dark": "rgba(245, 104, 94, 0.6392156863)" }, "color-interaction-danger-low": { "light": "rgba(200, 62, 56, 0.3215686275)", "dark": "rgba(245, 104, 94, 0.3215686275)" }, "color-interaction-danger-lower": { "light": "rgba(200, 62, 56, 0.1607843137)", "dark": "rgba(245, 104, 94, 0.1607843137)" }, "color-interaction-danger-lowest": { "light": "rgba(200, 62, 56, 0.1215686275)", "dark": "rgba(245, 104, 94, 0.1215686275)" }, "color-interaction-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(16, 25, 36, 0.6392156863)" }, "color-interaction-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(16, 25, 36, 0.3215686275)" }, "color-interaction-white-lower": { "light": "rgba(255, 255, 255, 0.1607843137)", "dark": "rgba(16, 25, 36, 0.1607843137)" }, "color-interaction-white-lowest": { "light": "rgba(255, 255, 255, 0.1215686275)", "dark": "rgba(16, 25, 36, 0.1215686275)" }, "color-interaction-backdrop": { "light": "rgba(0, 0, 0, 0.3215686275)", "dark": "rgba(0, 0, 0, 0.6392156863)" }, "color-link-default": { "light": "#007DBA", "dark": "#66B1D5" }, "color-link-hover": { "light": "#056CA0", "dark": "#99CBE3" }, "color-link-press": { "light": "#095B87", "dark": "#CCE5F1" }, "color-text-high": { "light": "#041821", "dark": "#ffffff" }, "color-text-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-text-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-text-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.6392156863)" }, "color-text-brand": { "light": "#007DBA", "dark": "#007DBA" }, "color-text-caution-high": { "light": "#46482E", "dark": "#FEE899" }, "color-text-caution-medium": { "light": "#D0A60B", "dark": "#FEDC66" }, "color-text-danger-high": { "light": "#47323D", "dark": "#FAB3AE" }, "color-text-danger-medium": { "light": "#C83E38", "dark": "#F78E86" }, "color-text-general-high": { "light": "#364351", "dark": "#DEDEDE" }, "color-text-general-medium": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-text-healthy-high": { "light": "#2C4333", "dark": "#CBDEA3" }, "color-text-healthy-medium": { "light": "#6B9321", "dark": "#B2CE76" }, "color-text-information-high": { "light": "#133953", "dark": "#99CBE3" }, "color-text-information-medium": { "light": "#056CA0", "dark": "#66B1D5" }, "color-text-warning-high": { "light": "#463C3A", "dark": "#FFD0B0" }, "color-text-warning-medium": { "light": "#D17739", "dark": "#FFB988" }, "color-text-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-text-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-text-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" }, "surface-higher": { "light": "#ffffff", "dark": "#192938" }, "surface-high": { "light": "#ffffff", "dark": "#162431" }, "surface-medium": { "light": "#ffffff", "dark": "#0E0E0E" }, "surface-low": { "light": "#FBFBFB", "dark": "#000000" }, "surface-lower": { "light": "#F2F3F5", "dark": "#0E0E0E" }, "surface-neutral-default": { "light": "#ffffff", "dark": "#101924" }, "surface-neutral-hover": { "light": "#E8E9EB", "dark": "#213142" }, "surface-neutral-press": { "light": "#CFD3D7", "dark": "#6F7986" }, "surface-overlay-default": { "light": "#213142", "dark": "#ffffff" }, "surface-overlay-hover": { "light": "#334152", "dark": "#E8E9EB" }, "surface-overlay-press": { "light": "#6F7986", "dark": "#CFD3D7" }, "surface-elevation-01": { "light": "", "dark": "" }, "surface-elevation-02": { "light": "", "dark": "" }, "surface-elevation-03": { "light": "", "dark": "" }, "surface-elevation-04": { "light": "", "dark": "" }, "box-shadow-color-01": { "light": "rgba(0, 0, 0, 0.12)", "dark": "rgba(0, 0, 0, 0.24)" }, "box-shadow-color-02": { "light": "rgba(0, 0, 0, 0.14)", "dark": "rgba(0, 0, 0, 0.28)" } }, "global": { "white": "$white", "black": "$black " }, "icons": { "color-icon-high": { "light": "#041821", "dark": "#ffffff" }, "color-icon-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-icon-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-icon-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-icon-healthy": { "light": "#6B9321", "dark": "#98BE48" }, "color-icon-caution": { "light": "#D0A60B", "dark": "#FED133" }, "color-icon-warning": { "light": "#D17739", "dark": "#FFA261" }, "color-icon-danger": { "light": "#C83E38", "dark": "#F78E86" }, "color-icon-information": { "light": "#056CA0", "dark": "#66B1D5" }, "color-icon-general": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-icon-brand-default": { "light": "#007DBA", "dark": "#66B1D5" }, "color-icon-brand-hover": { "light": "#056CA0", "dark": "#99CBE3" }, "color-icon-brand-press": { "light": "#095B87", "dark": "#CCE5F1" }, "color-icon-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-icon-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-icon-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" } }, "borders": { "color-border-high": { "light": "#041821", "dark": "#ffffff" }, "color-border-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-border-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-border-lower": { "light": "rgba(4, 24, 33, 0.1607843137)", "dark": "rgba(255, 255, 255, 0.1607843137)" }, "color-border-lowest": { "light": "rgba(4, 24, 33, 0.0784313725)", "dark": "rgba(255, 255, 255, 0.1215686275)" }, "color-border-brand": { "light": "#007DBA", "dark": "#66B1D5" }, "color-border-brand-hover": { "light": "#CCE5F1", "dark": "#133953" }, "color-border-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-border-danger": { "light": "#C83E38", "dark": "#F78E86" }, "color-border-healthy": { "light": "#6B9321", "dark": "#98BE48" }, "color-border-caution": { "light": "#D0A60B", "dark": "#FED133" }, "color-border-warning": { "light": "#D17739", "dark": "#FFA261" }, "color-border-information": { "light": "#056CA0", "dark": "#66B1D5" }, "color-border-general": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-border-focus-1": { "light": "#ffffff", "dark": "#041821" }, "color-border-focus-2": { "light": "#133953", "dark": "#CCE5F1" }, "color-border-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-border-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-border-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" }, "color-border-white-lower": { "light": "rgba(255, 255, 255, 0.1607843137)", "dark": "rgba(4, 24, 33, 0.1607843137)" }, "color-border-white-lowest": { "light": "rgba(255, 255, 255, 0.1215686275)", "dark": "rgba(4, 24, 33, 0.0784313725)" } }, "palette": { "all": { "brand-50": "#E6F2F8", "brand-100": "#CCE5F1", "brand-200": "#99CBE3", "brand-300": "#66B1D5", "brand-400": "#3397C7", "brand-500": "#007DBA", "brand-main": "#007DBA", "brand-600": "#056CA0", "brand-700": "#095B87", "brand-800": "#0E4A6C", "brand-900": "#133953", "brand-950": "#153147", "brand-1000": "#041821", "brand-1000-medium": "#041821a3", "brand-1000-low": "#04182152", "brand-1000-lower": "#04182129", "brand-1000-lowest": "#04182114", "green-50": "#F2F7E8", "green-100": "#E5EED1", "green-200": "#CBDEA3", "green-300": "#B2CE76", "green-400": "#98BE48", "green-500": "#7FAE1B", "green-main": "#7FAE1B", "green-600": "#6B9321", "green-700": "#557827", "green-800": "#415E2D", "green-900": "#2C4333", "green-950": "#223637", "grey-50": "#f7f7f7", "grey-100": "#EEEEEE", "grey-200": "#DEDEDE", "grey-300": "#CDCDCD", "grey-400": "#BDBDBD", "grey-500": "#ADADAD", "grey-main": "#ADADAD", "grey-600": "#8F9295", "grey-700": "#71787F", "grey-800": "#535D67", "grey-900": "#364351", "grey-950": "#273646", "neutral-50": "#F9FAFA", "neutral-100": "#E8E9EB", "neutral-200": "#CFD3D7", "neutral-300": "#C4C8CE", "neutral-400": "#A1A7B0", "neutral-500": "#8A929D", "neutral-main": "#8A929D", "neutral-600": "#6F7986", "neutral-700": "#334152", "neutral-800": "#213142", "neutral-900": "#101924", "neutral-950": "#0B121A", "neutral-400-medium": "#a1a7b0a3", "neutral-400-low": "#a1a7b052", "neutral-400-lower": "#a1a7b029", "neutral-800-medium": "#213142a3", "neutral-800-low": "#21314252", "orange-50": "#FFF3EB", "orange-100": "#FFE7D7", "orange-200": "#FFD0B0", "orange-300": "#FFB988", "orange-400": "#FFA261", "orange-500": "#FF8B3A", "orange-main": "#FF8B3A", "orange-600": "#D17739", "orange-700": "#A2633A", "orange-800": "#745039", "orange-900": "#463C3A", "orange-950": "#2F323A", "red-50": "#FEECEB", "red-100": "#FCD9D6", "red-200": "#FAB3AE", "red-300": "#F78E86", "red-400": "#F5685E", "red-500": "#F34336", "red-main": "#F34336", "red-600": "#C83E38", "red-700": "#9D3A3A", "red-800": "#72363B", "red-900": "#47323D", "red-950": "#2E2B3A", "yellow-50": "#FFF9E5", "yellow-100": "#FEF3CC", "yellow-200": "#FEE899", "yellow-300": "#FEDC66", "yellow-400": "#FED133", "yellow-500": "#FEC600", "yellow-main": "#FEC600", "yellow-600": "#D0A60B", "yellow-700": "#A18717", "yellow-800": "#746722", "yellow-900": "#46482E", "yellow-950": "#2F3834" } } };
+export default { "theme": { "color-background-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-background-brand-default": { "light": "#007DBA", "dark": "#056CA0" }, "color-background-brand-hover": { "light": "#056CA0", "dark": "#095B87" }, "color-background-brand-press": { "light": "#095B87", "dark": "#0E4A6C" }, "color-background-caution-default": { "light": "#D0A60B", "dark": "#FED133" }, "color-background-caution-lowest-default": { "light": "#FFF9E5", "dark": "#2F3834" }, "color-background-caution-lowest-hover": { "light": "#FEF3CC", "dark": "#46482E" }, "color-background-caution-lowest-press": { "light": "#FEE899", "dark": "#746722" }, "color-background-danger-default": { "light": "#F34336", "dark": "#C83E38" }, "color-background-danger-high-default": { "light": "#F34336", "dark": "#C83E38" }, "color-background-danger-high-hover": { "light": "#C83E38", "dark": "#9D3A3A" }, "color-background-danger-high-press": { "light": "#9D3A3A", "dark": "#72363B" }, "color-background-danger-lowest-default": { "light": "#FEECEB", "dark": "#72363B" }, "color-background-danger-lowest-hover": { "light": "#FCD9D6", "dark": "#47323D" }, "color-background-danger-lowest-press": { "light": "#FAB3AE", "dark": "#2E2B3A" }, "color-background-general-default": { "light": "#8F9295", "dark": "#BDBDBD" }, "color-background-general-lowest-default": { "light": "#f7f7f7", "dark": "#273646" }, "color-background-general-lowest-hover": { "light": "#EEEEEE", "dark": "#364351" }, "color-background-general-lowest-press": { "light": "#DEDEDE", "dark": "#535D67" }, "color-background-healthy-default": { "light": "#7FAE1B", "dark": "#B2CE76" }, "color-background-healthy-lowest-default": { "light": "#F2F7E8", "dark": "#223637" }, "color-background-healthy-lowest-hover": { "light": "#E5EED1", "dark": "#2C4333" }, "color-background-healthy-lowest-press": { "light": "#CBDEA3", "dark": "#415E2D" }, "color-background-information-default": { "light": "#056CA0", "dark": "#3397C7" }, "color-background-information-lowest-default": { "light": "#E6F2F8", "dark": "#153147" }, "color-background-information-lowest-hover": { "light": "#CCE5F1", "dark": "#133953" }, "color-background-information-lowest-press": { "light": "#99CBE3", "dark": "#0E4A6C" }, "color-background-neutral-default": { "light": "#E8E9EB", "dark": "#101924" }, "color-background-neutral-hover": { "light": "#CFD3D7", "dark": "#213142" }, "color-background-neutral-press": { "light": "#C4C8CE", "dark": "#334152" }, "color-background-neutral-lowest-default": { "light": "#F9FAFA", "dark": "#0B121A" }, "color-background-neutral-lowest-hover": { "light": "#E8E9EB", "dark": "#101924" }, "color-background-neutral-lowest-press": { "light": "#CFD3D7", "dark": "#213142" }, "color-background-warning-default": { "light": "#D17739", "dark": "#FFA261" }, "color-background-warning-lowest-default": { "light": "#FFF3EB", "dark": "#2F323A" }, "color-background-warning-lowest-hover": { "light": "#FFE7D7", "dark": "#463C3A" }, "color-background-warning-lowest-press": { "light": "#FFD0B0", "dark": "#745039" }, "color-border-high": { "light": "#041821", "dark": "#ffffff" }, "color-border-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-border-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-border-lower": { "light": "rgba(4, 24, 33, 0.1607843137)", "dark": "rgba(255, 255, 255, 0.1607843137)" }, "color-border-lowest": { "light": "rgba(4, 24, 33, 0.0784313725)", "dark": "rgba(255, 255, 255, 0.1215686275)" }, "color-border-brand": { "light": "#007DBA", "dark": "#66B1D5" }, "color-border-brand-hover": { "light": "#CCE5F1", "dark": "#133953" }, "color-border-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-border-danger": { "light": "#C83E38", "dark": "#F78E86" }, "color-border-healthy": { "light": "#6B9321", "dark": "#98BE48" }, "color-border-caution": { "light": "#D0A60B", "dark": "#FED133" }, "color-border-warning": { "light": "#D17739", "dark": "#FFA261" }, "color-border-information": { "light": "#056CA0", "dark": "#66B1D5" }, "color-border-general": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-border-focus-1": { "light": "#ffffff", "dark": "#041821" }, "color-border-focus-2": { "light": "#133953", "dark": "#CCE5F1" }, "color-border-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-border-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-border-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" }, "color-border-white-lower": { "light": "rgba(255, 255, 255, 0.1607843137)", "dark": "rgba(4, 24, 33, 0.1607843137)" }, "color-border-white-lowest": { "light": "rgba(255, 255, 255, 0.1215686275)", "dark": "rgba(4, 24, 33, 0.0784313725)" }, "color-icon-high": { "light": "#041821", "dark": "#ffffff" }, "color-icon-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-icon-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-icon-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-icon-healthy": { "light": "#6B9321", "dark": "#98BE48" }, "color-icon-caution": { "light": "#D0A60B", "dark": "#FED133" }, "color-icon-warning": { "light": "#D17739", "dark": "#FFA261" }, "color-icon-danger": { "light": "#C83E38", "dark": "#F78E86" }, "color-icon-information": { "light": "#056CA0", "dark": "#66B1D5" }, "color-icon-general": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-icon-brand-default": { "light": "#007DBA", "dark": "#66B1D5" }, "color-icon-brand-hover": { "light": "#056CA0", "dark": "#99CBE3" }, "color-icon-brand-press": { "light": "#095B87", "dark": "#CCE5F1" }, "color-icon-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-icon-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-icon-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" }, "color-interaction-black-medium": { "light": "rgba(16, 25, 36, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-interaction-black-low": { "light": "rgba(16, 25, 36, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-interaction-black-lower": { "light": "rgba(16, 25, 36, 0.1607843137)", "dark": "rgba(255, 255, 255, 0.1607843137)" }, "color-interaction-black-lowest": { "light": "rgba(16, 25, 36, 0.1215686275)", "dark": "rgba(255, 255, 255, 0.1215686275)" }, "color-interaction-brand-medium": { "light": "rgba(0, 125, 186, 0.6392156863)", "dark": "rgba(102, 177, 213, 0.6392156863)" }, "color-interaction-brand-low": { "light": "rgba(0, 122, 184, 0.3215686275)", "dark": "rgba(102, 177, 213, 0.3215686275)" }, "color-interaction-brand-lower": { "light": "rgba(0, 125, 186, 0.1607843137)", "dark": "rgba(102, 177, 213, 0.1607843137)" }, "color-interaction-brand-lowest": { "light": "rgba(0, 125, 186, 0.1215686275)", "dark": "rgba(102, 177, 213, 0.1215686275)" }, "color-interaction-danger-medium": { "light": "rgba(200, 62, 56, 0.6392156863)", "dark": "rgba(245, 104, 94, 0.6392156863)" }, "color-interaction-danger-low": { "light": "rgba(200, 62, 56, 0.3215686275)", "dark": "rgba(245, 104, 94, 0.3215686275)" }, "color-interaction-danger-lower": { "light": "rgba(200, 62, 56, 0.1607843137)", "dark": "rgba(245, 104, 94, 0.1607843137)" }, "color-interaction-danger-lowest": { "light": "rgba(200, 62, 56, 0.1215686275)", "dark": "rgba(245, 104, 94, 0.1215686275)" }, "color-interaction-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(16, 25, 36, 0.6392156863)" }, "color-interaction-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(16, 25, 36, 0.3215686275)" }, "color-interaction-white-lower": { "light": "rgba(255, 255, 255, 0.1607843137)", "dark": "rgba(16, 25, 36, 0.1607843137)" }, "color-interaction-white-lowest": { "light": "rgba(255, 255, 255, 0.1215686275)", "dark": "rgba(16, 25, 36, 0.1215686275)" }, "color-interaction-backdrop": { "light": "rgba(0, 0, 0, 0.3215686275)", "dark": "rgba(0, 0, 0, 0.6392156863)" }, "color-link-default": { "light": "#007DBA", "dark": "#66B1D5" }, "color-link-hover": { "light": "#056CA0", "dark": "#99CBE3" }, "color-link-press": { "light": "#095B87", "dark": "#CCE5F1" }, "color-text-high": { "light": "#041821", "dark": "#ffffff" }, "color-text-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-text-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-text-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.6392156863)" }, "color-text-brand": { "light": "#007DBA", "dark": "#007DBA" }, "color-text-caution-high": { "light": "#46482E", "dark": "#FEE899" }, "color-text-caution-medium": { "light": "#D0A60B", "dark": "#FEDC66" }, "color-text-danger-high": { "light": "#47323D", "dark": "#FAB3AE" }, "color-text-danger-medium": { "light": "#C83E38", "dark": "#F78E86" }, "color-text-general-high": { "light": "#364351", "dark": "#DEDEDE" }, "color-text-general-medium": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-text-healthy-high": { "light": "#2C4333", "dark": "#CBDEA3" }, "color-text-healthy-medium": { "light": "#6B9321", "dark": "#B2CE76" }, "color-text-information-high": { "light": "#133953", "dark": "#99CBE3" }, "color-text-information-medium": { "light": "#056CA0", "dark": "#66B1D5" }, "color-text-warning-high": { "light": "#463C3A", "dark": "#FFD0B0" }, "color-text-warning-medium": { "light": "#D17739", "dark": "#FFB988" }, "color-text-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-text-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-text-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" }, "surface-higher": { "light": "#ffffff", "dark": "#192938" }, "surface-high": { "light": "#ffffff", "dark": "#162431" }, "surface-medium": { "light": "#ffffff", "dark": "#0E0E0E" }, "surface-low": { "light": "#FBFBFB", "dark": "#000000" }, "surface-lower": { "light": "#F2F3F5", "dark": "#0E0E0E" }, "surface-neutral-default": { "light": "#ffffff", "dark": "#101924" }, "surface-neutral-hover": { "light": "#E8E9EB", "dark": "#213142" }, "surface-neutral-press": { "light": "#CFD3D7", "dark": "#6F7986" }, "surface-overlay-default": { "light": "#213142", "dark": "#ffffff" }, "surface-overlay-hover": { "light": "#334152", "dark": "#E8E9EB" }, "surface-overlay-press": { "light": "#6F7986", "dark": "#CFD3D7" }, "surface-elevation-01": { "light": "", "dark": "" }, "surface-elevation-02": { "light": "", "dark": "" }, "surface-elevation-03": { "light": "", "dark": "" }, "surface-elevation-04": { "light": "", "dark": "" }, "box-shadow-color-01": { "light": "rgba(0, 0, 0, 0.12)", "dark": "rgba(0, 0, 0, 0.24)" }, "box-shadow-color-02": { "light": "rgba(0, 0, 0, 0.14)", "dark": "rgba(0, 0, 0, 0.28)" } }, "global": { "static-white": "#ffffff", "static-white-medium": "rgba(255, 255, 255, 0.6392156863)", "static-white-low": "rgba(255, 255, 255, 0.3215686275)", "static-white-lower": "rgba(255, 255, 255, 0.1607843137)", "static-white-lowest": "rgba(255, 255, 255, 0.1215686275)", "static-black": "#000000", "static-black-medium": "rgba(0, 0, 0, 0.6392156863)", "static-black-low": "rgba(0, 0, 0, 0.3215686275)", "static-black-lower": "rgba(0, 0, 0, 0.1607843137)", "static-black-lowest": "rgba(0, 0, 0, 0.1215686275)" }, "icons": { "color-icon-high": { "light": "#041821", "dark": "#ffffff" }, "color-icon-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-icon-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-icon-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-icon-healthy": { "light": "#6B9321", "dark": "#98BE48" }, "color-icon-caution": { "light": "#D0A60B", "dark": "#FED133" }, "color-icon-warning": { "light": "#D17739", "dark": "#FFA261" }, "color-icon-danger": { "light": "#C83E38", "dark": "#F78E86" }, "color-icon-information": { "light": "#056CA0", "dark": "#66B1D5" }, "color-icon-general": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-icon-brand-default": { "light": "#007DBA", "dark": "#66B1D5" }, "color-icon-brand-hover": { "light": "#056CA0", "dark": "#99CBE3" }, "color-icon-brand-press": { "light": "#095B87", "dark": "#CCE5F1" }, "color-icon-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-icon-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-icon-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" } }, "borders": { "color-border-high": { "light": "#041821", "dark": "#ffffff" }, "color-border-medium": { "light": "rgba(4, 24, 33, 0.6392156863)", "dark": "rgba(255, 255, 255, 0.6392156863)" }, "color-border-low": { "light": "rgba(4, 24, 33, 0.3215686275)", "dark": "rgba(255, 255, 255, 0.3215686275)" }, "color-border-lower": { "light": "rgba(4, 24, 33, 0.1607843137)", "dark": "rgba(255, 255, 255, 0.1607843137)" }, "color-border-lowest": { "light": "rgba(4, 24, 33, 0.0784313725)", "dark": "rgba(255, 255, 255, 0.1215686275)" }, "color-border-brand": { "light": "#007DBA", "dark": "#66B1D5" }, "color-border-brand-hover": { "light": "#CCE5F1", "dark": "#133953" }, "color-border-disabled": { "light": "rgba(33, 49, 66, 0.3215686275)", "dark": "rgba(161, 167, 176, 0.3215686275)" }, "color-border-danger": { "light": "#C83E38", "dark": "#F78E86" }, "color-border-healthy": { "light": "#6B9321", "dark": "#98BE48" }, "color-border-caution": { "light": "#D0A60B", "dark": "#FED133" }, "color-border-warning": { "light": "#D17739", "dark": "#FFA261" }, "color-border-information": { "light": "#056CA0", "dark": "#66B1D5" }, "color-border-general": { "light": "#8F9295", "dark": "#CDCDCD" }, "color-border-focus-1": { "light": "#ffffff", "dark": "#041821" }, "color-border-focus-2": { "light": "#133953", "dark": "#CCE5F1" }, "color-border-white-high": { "light": "#ffffff", "dark": "#041821" }, "color-border-white-medium": { "light": "rgba(255, 255, 255, 0.6392156863)", "dark": "rgba(4, 24, 33, 0.6392156863)" }, "color-border-white-low": { "light": "rgba(255, 255, 255, 0.3215686275)", "dark": "rgba(4, 24, 33, 0.3215686275)" }, "color-border-white-lower": { "light": "rgba(255, 255, 255, 0.1607843137)", "dark": "rgba(4, 24, 33, 0.1607843137)" }, "color-border-white-lowest": { "light": "rgba(255, 255, 255, 0.1215686275)", "dark": "rgba(4, 24, 33, 0.0784313725)" } }, "palette": { "all": { "static-brand-50": "#E6F2F8", "static-brand-100": "#CCE5F1", "static-brand-200": "#99CBE3", "static-brand-300": "#66B1D5", "static-brand-400": "#3397C7", "static-brand-500": "#007DBA", "static-brand-main": "#007DBA", "static-brand-600": "#056CA0", "static-brand-700": "#095B87", "static-brand-800": "#0E4A6C", "static-brand-900": "#133953", "static-brand-950": "#153147", "static-brand-1000": "#041821", "static-brand-1000-medium": "#041821a3", "static-brand-1000-low": "#04182152", "static-brand-1000-lower": "#04182129", "static-brand-1000-lowest": "#04182114", "static-green-50": "#F2F7E8", "static-green-100": "#E5EED1", "static-green-200": "#CBDEA3", "static-green-300": "#B2CE76", "static-green-400": "#98BE48", "static-green-500": "#7FAE1B", "static-green-main": "#7FAE1B", "static-green-600": "#6B9321", "static-green-700": "#557827", "static-green-800": "#415E2D", "static-green-900": "#2C4333", "static-green-950": "#223637", "static-grey-50": "#f7f7f7", "static-grey-100": "#EEEEEE", "static-grey-200": "#DEDEDE", "static-grey-300": "#CDCDCD", "static-grey-400": "#BDBDBD", "static-grey-500": "#ADADAD", "static-grey-main": "#ADADAD", "static-grey-600": "#8F9295", "static-grey-700": "#71787F", "static-grey-800": "#535D67", "static-grey-900": "#364351", "static-grey-950": "#273646", "static-neutral-50": "#F9FAFA", "static-neutral-100": "#E8E9EB", "static-neutral-200": "#CFD3D7", "static-neutral-300": "#C4C8CE", "static-neutral-400": "#A1A7B0", "static-neutral-500": "#8A929D", "static-neutral-main": "#8A929D", "static-neutral-600": "#6F7986", "static-neutral-700": "#334152", "static-neutral-800": "#213142", "static-neutral-900": "#101924", "static-neutral-950": "#0B121A", "static-neutral-400-medium": "#a1a7b0a3", "static-neutral-400-low": "#a1a7b052", "static-neutral-400-lower": "#a1a7b029", "static-neutral-800-medium": "#213142a3", "static-neutral-800-low": "#21314252", "static-orange-50": "#FFF3EB", "static-orange-100": "#FFE7D7", "static-orange-200": "#FFD0B0", "static-orange-300": "#FFB988", "static-orange-400": "#FFA261", "static-orange-500": "#FF8B3A", "static-orange-main": "#FF8B3A", "static-orange-600": "#D17739", "static-orange-700": "#A2633A", "static-orange-800": "#745039", "static-orange-900": "#463C3A", "static-orange-950": "#2F323A", "static-red-50": "#FEECEB", "static-red-100": "#FCD9D6", "static-red-200": "#FAB3AE", "static-red-300": "#F78E86", "static-red-400": "#F5685E", "static-red-500": "#F34336", "static-red-main": "#F34336", "static-red-600": "#C83E38", "static-red-700": "#9D3A3A", "static-red-800": "#72363B", "static-red-900": "#47323D", "static-red-950": "#2E2B3A", "static-yellow-50": "#FFF9E5", "static-yellow-100": "#FEF3CC", "static-yellow-200": "#FEE899", "static-yellow-300": "#FEDC66", "static-yellow-400": "#FED133", "static-yellow-500": "#FEC600", "static-yellow-main": "#FEC600", "static-yellow-600": "#D0A60B", "static-yellow-700": "#A18717", "static-yellow-800": "#746722", "static-yellow-900": "#46482E", "static-yellow-950": "#2F3834" } } };
 //# sourceMappingURL=color-vars.js.map