@energie360/ui-library 0.1.0 → 0.1.1

package/elements/index.js

@@ -1,33 +1,8 @@
-import { ButtonElement as Button } from './button/button.js'
-import { IconButtonElement as IconButton } from './icon-button/icon-button.js'
-import { IconElement as Icon } from './icon/icon.js'
-import { LoaderElement as Loader } from './loader/loader.js'
-
 /**
- * These exports allow best tree-shaking behaviour.
- * Obviously you'll have to import 'manually' all the elements you need.
- *
- * @example
- * import { IconButton } from '@energie360/ui-library'
- * IconButton.register()
+ * It's not recommended to import components from this file, because tree-shaking won't work then.
+ * -> https://vite.dev/guide/performance#avoid-barrel-files
  */
-export { Button, IconButton, Icon, Loader }
-
-/**
- * With this export you get all the elements. Meaning all the elements will be inlcuded in your bundle, even if you register only one element.
- *
- * @example
- * import { Elements } from '@energie360/ui-library'
- * Elements.Button.register()
- */
-
-/**
- *
- * @type {{IconButton: {register: function(): void}, Button: {register: function(): void}, Loader: {register: function(): void}, Icon: {register: function(): void}}}
- */
-export const Elements = {
-  Button,
-  IconButton,
-  Icon,
-  Loader,
-}
+export { default as UButton } from './button/u-button.vue'
+export { default as UIcon } from './icon/u-icon.vue'
+export { default as UIconButton } from './icon-button/u-icon-button.vue'
+export { default as ULoader } from './loader/u-loader.vue'

package/elements/loader/loader.js

@@ -1,5 +1,5 @@
 import { defineCustomElement } from 'vue'
-import Loader from './loader.vue'
+import Loader from './u-loader.vue'
 import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
 import ceStyles from './loader.ce.scss?inline'
 import styles from './loader.scss?inline'
@@ -8,6 +8,6 @@ Loader.styles = [customElementBaseStyle, ceStyles, styles]
 
 export const LoaderElement = {
   register: () => {
-    customElements.define('e-loader', defineCustomElement(Loader))
+    customElements.define('u-loader', defineCustomElement(Loader))
   },
 }

package/elements/loader/{loader.vue → u-loader.vue}

@@ -1,10 +1,9 @@
-<script setup>
-defineProps({
-  anim: {
-    type: String,
-    default: 'horizontal',
-  },
-})
+<script setup lang="ts">
+interface Props {
+  anim?: string
+}
+
+const { anim = 'horizontal' } = defineProps<Props>()
 </script>
 
 <template>

package/elements/spectro/spectro.scss

@@ -0,0 +1,13 @@
+.spectro {
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

package/elements/spectro/u-spectro.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="spectro">
+    <div class="inner">
+      <img src="/static/ui-assets/images/spectro.svg" alt="" aria-hidden="true" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './spectro.scss';
+</style>

package/elements/text-field/text-field.scss

@@ -0,0 +1,30 @@
+@use '../../base/abstracts' as a;
+@use '../form-field' as f;
+
+.text-field {
+  @include f.form-field-base(input);
+  @include f.form-field-states-all(input);
+  @include f.form-field-error;
+  @include f.form-field-suffix-icon;
+  @include f.form-field-prefix-icon;
+
+  .visually-hidden {
+    @include a.visually-hidden;
+  }
+
+  // Type: Password
+  .password-toggle {
+    display: block;
+    border-radius: var(--e-brd-radius-1);
+    color: var(--e-c-primary-01-500);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--e-c-secondary-01-900);
+    }
+
+    &:active {
+      color: var(--e-c-secondary-01-700);
+    }
+  }
+}

package/elements/text-field/text-field.types.ts

@@ -0,0 +1,6 @@
+export enum TextFieldTypes {
+  text = 'text',
+  number = 'number',
+  email = 'email',
+  password = 'password',
+}

package/elements/text-field/u-text-field.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+import { TextFieldTypes } from './text-field.types'
+import { computed, ref, useSlots, useTemplateRef, useId } from 'vue'
+import { translate } from '../../utils/translations/translate'
+
+interface Props {
+  label?: string
+  type: TextFieldTypes
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  placeholder?: string
+  error?: boolean
+  unit?: string
+  helpText?: string
+  errorMessage?: string
+}
+
+let inputId = useId()
+
+const {
+  disabled = false,
+  readonly = false,
+  required = false,
+  type = TextFieldTypes.text,
+  helpText = '',
+  errorMessage = '',
+} = defineProps<Props>()
+
+const slots = useSlots()
+
+const input = useTemplateRef('input')
+
+const isFocused = ref(false)
+const isHovering = ref(false)
+const hasValue = ref(false)
+const forceFloatLabel = ref(false)
+
+const spacer = '.&nbsp;'
+
+// In some cases we need to change the input type within the component (for example for the password-show behaviour)
+const _inputType = ref(type)
+
+const onFocus = () => {
+  if (readonly || disabled) {
+    return
+  }
+
+  isFocused.value = true
+}
+
+const onBlur = () => {
+  isFocused.value = false
+}
+
+const onInput = () => {
+  hasValue.value = input.value.value !== ''
+}
+
+const onHover = () => {
+  if (readonly || disabled) {
+    return
+  }
+
+  isHovering.value = true
+}
+
+const onHoverOut = () => {
+  isHovering.value = false
+}
+
+const hasHelpText = computed(() => {
+  return !!helpText || !!slots.helpText || required
+})
+
+const needsHelpTextSpacer = computed(() => {
+  return !!helpText || !!slots.helpText
+})
+
+const onPasswordToggle = () => {
+  _inputType.value =
+    _inputType.value === TextFieldTypes.password
+      ? TextFieldTypes.text
+      : TextFieldTypes.password
+}
+
+const passwordIcon = computed(() => {
+  return _inputType.value === TextFieldTypes.password
+    ? 'password'
+    : 'password-show'
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'text-field',
+      {
+        required,
+        disabled,
+        readonly,
+        focus: isFocused,
+        hover: isHovering,
+        'has-value': hasValue,
+        'float-label': isFocused || hasValue || placeholder || forceFloatLabel,
+        'has-error': error,
+        'show-help-text': !required || hasHelpText,
+      },
+    ]"
+    @mouseenter="onHover"
+    @mouseleave="onHoverOut"
+  >
+    <div class="wrapper">
+      <div class="label">
+        <slot name="label"
+          ><label :for="inputId">{{ label }}</label></slot
+        >
+      </div>
+
+      <div class="control">
+        <slot
+          ><input
+            ref="input"
+            :id="inputId"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            :type="_inputType"
+            :disabled
+            :readonly
+            :placeholder
+            :required
+        /></slot>
+
+        <div class="control-border"></div>
+      </div>
+
+      <!-- TYPE: PASSWORD -->
+      <span class="suffix-action" v-if="type === TextFieldTypes.password">
+        <button type="button" class="password-toggle" @click="onPasswordToggle">
+          <UIcon :name="passwordIcon"></UIcon>
+        </button>
+      </span>
+    </div>
+
+    <div class="help-text">
+      <span class="optional-text"
+        >{{ translate('common.optional')
+        }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
+      ><slot name="helpText">{{ helpText }}</slot>
+    </div>
+
+    <div class="error-messages-container">
+      <slot name="error-message"
+        ><span>{{ errorMessage }}</span></slot
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './text-field.scss';
+</style>

package/elements/types.ts

@@ -0,0 +1,12 @@
+// TODO: @Dani if you have a better naming please update it.
+
+export interface Cta {
+  label: string
+  href: string
+  target: string
+}
+
+export interface Image {
+  src: string
+  alt: string
+}

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/layout/grid/grid.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use '../../base/abstracts' as a;
 @use 'grid.mixin' as *;
-
 @use 'grid-row';
 
 // These loops create column classes for the breakpoints 2xl, xl, lg, m and s.
@@ -14,7 +13,7 @@
     @include grid-col($i);
   }
 
-  @if ($i < a.$grid-columns) {
+  @if $i < a.$grid-columns {
     .col-indent-#{$i} {
       @include grid-col-indent($i);
     }
@@ -28,7 +27,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-2xl-#{$i} {
         @include grid-col-indent($i);
       }
@@ -48,7 +47,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-xl-#{$i} {
         @include grid-col-indent($i);
       }
@@ -68,7 +67,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-lg-#{$i} {
         @include grid-col-indent($i);
       }
@@ -88,7 +87,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-m-#{$i} {
         @include grid-col-indent($i);
       }
@@ -108,7 +107,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-s-#{$i} {
         @include grid-col-indent($i);
       }

package/package.json

@@ -1,25 +1,34 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.js",
   "exports": {
-    ".": "./dist/index.js",
+    ".": "./dist/custom-elements.js",
+    "./package.json": "./package.json",
     "./base-style.css": "./dist/base-style.css",
+    "./elements": "./elements/index.js",
     "./elements/*": "./elements/*",
+    "./components": "./components/index.js",
     "./components/*": "./components/*",
+    "./wizard": "./wizard/index.js",
     "./wizard/*": "./wizard/*"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.13.4",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.5.1",
-    "sass": "^1.83.4",
-    "vite": "^6.0.7",
-    "vue": "^3.5.13"
+    "postcss": "^8.5.2",
+    "sass": "^1.85.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.2"
   },
   "dependencies": {
     "@energie360/design-tokens": "^1.1.0"
@@ -27,6 +36,7 @@
   "scripts": {
     "dev": "NODE_ENV=development vite build --watch --mode developement",
     "build": "vite build",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "type-check": "vue-tsc --build"
   }
 }

package/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/{vite.config.js → vite.config.ts}

@@ -10,7 +10,7 @@ export default defineConfig({
     sourcemap: true,
     lib: {
       entry: [
-        resolve(__dirname, 'index.js'),
+        resolve(__dirname, 'custom-elements.js'),
         resolve(__dirname, 'base-style.js'),
       ],
       name: '@energie360/ui-library',

package/wizard/index.js

@@ -0,0 +1,4 @@
+export { default as UWizardIntro } from './wizard-intro/u-wizard-intro.vue'
+export { default as UWizardLayout } from './wizard-layout/u-wizard-layout.vue'
+export { default as UWizardLayoutBlock } from './wizard-layout/u-wizard-layout-block.vue'
+export { default as UWizardLayoutElement } from './wizard-layout/u-wizard-layout-element.vue'

package/wizard/wizard-intro/{wizard-intro.vue → u-wizard-intro.vue}

@@ -1,9 +1,10 @@
-<script setup>
-defineProps({
-  title: String,
-  description: String,
-  ctaText: String
-})
+<script setup lang="ts">
+interface Props {
+  title?: string
+  description?: string
+}
+
+defineProps<Props>()
 </script>
 
 <template>
@@ -11,12 +12,14 @@ defineProps({
     <div class="left-col">
       <div>
         <div class="title-slot">
-          <slot name="title"><h1>{{ title }}</h1></slot>
+          <slot name="title"
+            ><h1>{{ title }}</h1></slot
+          >
         </div>
 
         <div class="description-slot">
           <slot name="description">
-            <p v-html="description"/>
+            <p v-html="description" />
           </slot>
         </div>
 
@@ -27,7 +30,7 @@ defineProps({
     </div>
 
     <div class="right-col">
-      <slot name="content-right"></slot>
+      <slot name="contentRight"></slot>
     </div>
   </div>
 </template>

package/wizard/wizard-layout/{wizard-layout-block.vue → u-wizard-layout-block.vue}

@@ -1,7 +1,9 @@
-<script setup>
-defineProps({
-  columns: [Number, String],
-})
+<script setup lang="ts">
+interface Props {
+  columns: string | number
+}
+
+defineProps<Props>()
 </script>
 
 <template>

package/dist/index.css

@@ -1 +0,0 @@
-.icon[data-v-7772a60e]{display:block;fill:var(--icon-fill-color, currentColor);width:var(--icon-width, 24px);height:var(--icon-height, 24px);transition:var(--icon-transition, none)}.icon.icon--custom-size[data-v-7772a60e]{width:100%;height:100%}.icon.icon--inline[data-v-7772a60e]{display:inline-block;vertical-align:baseline}@keyframes horizontal-a2f9c45c{0%{transform:translate(0)}20%{transform:translate(0);opacity:1;width:8px}50%{transform:translate(24px);opacity:.7;width:16px}80%{transform:translate(56px);opacity:1;width:8px}to{transform:translate(56px)}}@keyframes vertical-a2f9c45c{0%{transform:translateY(0)}50%{transform:translateY(0);opacity:1;height:8px}55%{transform:translateY(-12px);opacity:.7;height:16px}60%{transform:translateY(0);opacity:1;height:8px}70%{transform:translateY(-4px)}to{transform:translateY(0)}}.loader[data-v-a2f9c45c]{position:relative;display:inline-flex;--dot-color: var(--e-c-mono-900)}.loader>span[data-v-a2f9c45c]{display:block;width:8px;height:8px;border-radius:4px;background-color:var(--dot-color)}.loader.horizontal[data-v-a2f9c45c]{width:64px}.loader.horizontal>span[data-v-a2f9c45c]{transform:translate(0);animation-name:horizontal-a2f9c45c;animation-duration:1s;animation-direction:alternate;animation-timing-function:cubic-bezier(.4,.61,.61,.4);animation-iteration-count:infinite}.loader.vertical[data-v-a2f9c45c]{height:8px;width:8px}.loader.vertical>span[data-v-a2f9c45c]{transform:translateY(0);animation-name:vertical-a2f9c45c;animation-duration:2s;animation-timing-function:cubic-bezier(.47,.52,.165,1.005);animation-iteration-count:infinite}button[data-v-9f038231]{padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:inherit;background:none}.button[data-v-9f038231]{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.875rem;grid-gap:var(--e-space-2);border-radius:24px;transition:background-color var(--e-trs-duration-faster) var(--e-trs-easing-default),box-shadow var(--e-trs-duration-faster) var(--e-trs-easing-default),color var(--e-trs-duration-faster) var(--e-trs-easing-default),border var(--e-trs-duration-faster) var(--e-trs-easing-default);border-width:2px;border-style:solid;text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer;font-size:var(--e-type-size-200);line-height:var(--e-type-line-height-200);letter-spacing:.00625rem;font-weight:var(--e-type-weight-strong);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button .icon[data-v-9f038231],.button e-icon[data-v-9f038231]{width:24px;height:24px}@media print{.button[data-v-9f038231]{font-size:calc(var(--e-type-size-200) * .75);line-height:calc(var(--e-type-line-height-200) * .75)}}.button .button__loader[data-v-9f038231]{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.button.disabled[data-v-9f038231],.button[data-v-9f038231]:disabled{pointer-events:none}.button[loading][data-v-9f038231]{cursor:default}.button .icon[data-v-9f038231],.button e-icon[data-v-9f038231]{--icon-transition: fill var(--e-trs-duration-faster) var(--e-trs-easing-default)}.button[data-v-9f038231]{background-color:var(--e-c-primary-01-700);color:var(--e-c-mono-00);border-color:var(--e-c-primary-01-700)}.button .icon[data-v-9f038231],.button e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-00)}.button .loader[data-v-9f038231],.button e-loader[data-v-9f038231]{--dot-color: var(--e-c-mono-00)}.button[data-v-9f038231]:hover{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.button[data-v-9f038231]:active,.button[loading][data-v-9f038231]{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.button.disabled[data-v-9f038231]:not([loading]),.button[data-v-9f038231]:disabled:not([loading]){background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.button.outlined[data-v-9f038231]{background-color:transparent;color:var(--e-c-primary-01-700);border:2px solid var(--e-c-primary-01-700)}.button.outlined .icon[data-v-9f038231],.button.outlined e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-primary-01-700)}.button.outlined .loader[data-v-9f038231],.button.outlined e-loader[data-v-9f038231]{--dot-color: var(--e-c-primary-01-500)}.button.outlined[data-v-9f038231]:hover{background-color:var(--e-c-primary-01-50);border-color:var(--e-c-primary-01-200)}.button.outlined[data-v-9f038231]:active,.button.outlined[loading][data-v-9f038231]{background-color:transparent;border-color:var(--e-c-primary-01-500)}.button.outlined.disabled[data-v-9f038231]:not([loading]),.button.outlined[data-v-9f038231]:disabled:not([loading]){border-color:var(--e-c-mono-500);background-color:transparent;color:var(--e-c-mono-500)}.button.outlined.disabled:not([loading]) .icon[data-v-9f038231],.button.outlined.disabled:not([loading]) e-icon[data-v-9f038231],.button.outlined:disabled:not([loading]) .icon[data-v-9f038231],.button.outlined:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.plain[data-v-9f038231]{padding:var(--e-space-2) var(--e-space-3);color:var(--e-c-primary-01-700);background:none;border:0;text-decoration:none;grid-gap:var(--e-space-1)}.button.plain .icon[data-v-9f038231],.button.plain e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-primary-01-700)}.button.plain[data-v-9f038231]:hover{color:var(--e-c-secondary-01-900)}.button.plain:hover .icon[data-v-9f038231],.button.plain:hover e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-900)}.button.plain[data-v-9f038231]:active{color:var(--e-c-secondary-01-700)}.button.plain:active .icon[data-v-9f038231],.button.plain:active e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.plain.disabled[data-v-9f038231]:not([loading]),.button.plain[data-v-9f038231]:disabled:not([loading]){background:none;color:var(--e-c-mono-500)}.button.plain.disabled:not([loading]) .icon[data-v-9f038231],.button.plain.disabled:not([loading]) e-icon[data-v-9f038231],.button.plain:disabled:not([loading]) .icon[data-v-9f038231],.button.plain:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.plain[loading] .loader[data-v-9f038231],.button.plain[loading] e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-01-700)}.button.plain-small[data-v-9f038231]{padding:var(--e-space-2) var(--e-space-3);color:var(--e-c-primary-01-700);background:none;border:0;text-decoration:none;grid-gap:var(--e-space-1);font-size:var(--e-type-size-100);line-height:var(--e-type-line-height-100);letter-spacing:.025rem;font-weight:var(--e-type-weight-strong);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button.plain-small .icon[data-v-9f038231],.button.plain-small e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-primary-01-700)}.button.plain-small[data-v-9f038231]:hover{color:var(--e-c-secondary-01-900)}.button.plain-small:hover .icon[data-v-9f038231],.button.plain-small:hover e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-900)}.button.plain-small[data-v-9f038231]:active{color:var(--e-c-secondary-01-700)}.button.plain-small:active .icon[data-v-9f038231],.button.plain-small:active e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.plain-small.disabled[data-v-9f038231]:not([loading]),.button.plain-small[data-v-9f038231]:disabled:not([loading]){background:none;color:var(--e-c-mono-500)}.button.plain-small.disabled:not([loading]) .icon[data-v-9f038231],.button.plain-small.disabled:not([loading]) e-icon[data-v-9f038231],.button.plain-small:disabled:not([loading]) .icon[data-v-9f038231],.button.plain-small:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.plain-small[loading] .loader[data-v-9f038231],.button.plain-small[loading] e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-01-700)}@media print{.button.plain-small[data-v-9f038231]{font-size:calc(var(--e-type-size-100) * .75);line-height:calc(var(--e-type-line-height-100) * .75)}}.button.filled-inverted[data-v-9f038231]{background-color:var(--e-c-mono-00);border-color:var(--e-c-mono-00);color:var(--e-c-primary-01-700)}.button.filled-inverted e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-01-900)}.button.filled-inverted .icon[data-v-9f038231],.button.filled-inverted e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-primary-01-700)}.button.filled-inverted[data-v-9f038231]:hover{background-color:var(--e-c-primary-01-100);border-color:var(--e-c-primary-01-100);color:var(--e-c-secondary-01-700)}.button.filled-inverted:hover .icon[data-v-9f038231],.button.filled-inverted:hover e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.filled-inverted[data-v-9f038231]:active,.button.filled-inverted[loading][data-v-9f038231]{background-color:var(--e-c-primary-01-200);border-color:var(--e-c-primary-01-200)}.button.filled-inverted.disabled[data-v-9f038231]:not([loading]),.button.filled-inverted[data-v-9f038231]:disabled:not([loading]){color:var(--e-c-mono-700)}.button.filled-inverted.disabled:not([loading]) .icon[data-v-9f038231],.button.filled-inverted.disabled:not([loading]) e-icon[data-v-9f038231],.button.filled-inverted:disabled:not([loading]) .icon[data-v-9f038231],.button.filled-inverted:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-700)}.button.outlined-inverted[data-v-9f038231]{background-color:transparent;border-color:var(--e-c-mono-00);color:var(--e-c-mono-00)}.button.outlined-inverted .icon[data-v-9f038231],.button.outlined-inverted e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-00)}.button.outlined-inverted .loader[data-v-9f038231],.button.outlined-inverted e-loader[data-v-9f038231]{--dot-color: var(--e-c-mono-00)}.button.outlined-inverted[data-v-9f038231]:hover{background-color:rgba(var(--e-c-primary-01-900-rgb),.7);border-color:var(--e-c-primary-01-200)}.button.outlined-inverted[data-v-9f038231]:active,.button.outlined-inverted[loading][data-v-9f038231]{background-color:transparent;border-color:var(--e-c-primary-01-500)}.button.outlined-inverted.disabled[data-v-9f038231]:not([loading]),.button.outlined-inverted[data-v-9f038231]:disabled:not([loading]){color:var(--e-c-mono-500);border:2px solid var(--e-c-mono-500);background-color:transparent}.button.outlined-inverted.disabled:not([loading]) .icon[data-v-9f038231],.button.outlined-inverted.disabled:not([loading]) e-icon[data-v-9f038231],.button.outlined-inverted:disabled:not([loading]) .icon[data-v-9f038231],.button.outlined-inverted:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.secondary-outlined[data-v-9f038231]{background-color:transparent;color:var(--e-c-secondary-02-500);border:2px solid var(--e-c-secondary-02-500)}.button.secondary-outlined .icon[data-v-9f038231],.button.secondary-outlined e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-02-500)}.button.secondary-outlined .loader[data-v-9f038231],.button.secondary-outlined e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-02-500)}.button.secondary-outlined[data-v-9f038231]:hover{background-color:var(--e-c-secondary-02-50);border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined[data-v-9f038231]:active,.button.secondary-outlined[loading][data-v-9f038231]{background-color:transparent;border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined.disabled[data-v-9f038231]:not([loading]),.button.secondary-outlined[data-v-9f038231]:disabled:not([loading]){border-color:var(--e-c-mono-500);background-color:transparent;color:var(--e-c-mono-500)}.button.secondary-outlined.disabled:not([loading]) .icon[data-v-9f038231],.button.secondary-outlined.disabled:not([loading]) e-icon[data-v-9f038231],.button.secondary-outlined:disabled:not([loading]) .icon[data-v-9f038231],.button.secondary-outlined:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.secondary-outlined-small[data-v-9f038231]{padding:var(--e-space-2_5) var(--e-space-6);background-color:transparent;color:var(--e-c-secondary-02-500);border:2px solid var(--e-c-secondary-02-500);font-size:var(--e-type-size-100);line-height:var(--e-type-line-height-100);letter-spacing:.025rem;font-weight:var(--e-type-weight-strong);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button.secondary-outlined-small .icon[data-v-9f038231],.button.secondary-outlined-small e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-02-500)}.button.secondary-outlined-small .loader[data-v-9f038231],.button.secondary-outlined-small e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-02-500)}.button.secondary-outlined-small[data-v-9f038231]:hover{background-color:var(--e-c-secondary-02-50);border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined-small[data-v-9f038231]:active,.button.secondary-outlined-small[loading][data-v-9f038231]{background-color:transparent;border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined-small.disabled[data-v-9f038231]:not([loading]),.button.secondary-outlined-small[data-v-9f038231]:disabled:not([loading]){border-color:var(--e-c-mono-500);background-color:transparent;color:var(--e-c-mono-500)}.button.secondary-outlined-small.disabled:not([loading]) .icon[data-v-9f038231],.button.secondary-outlined-small.disabled:not([loading]) e-icon[data-v-9f038231],.button.secondary-outlined-small:disabled:not([loading]) .icon[data-v-9f038231],.button.secondary-outlined-small:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}@media print{.button.secondary-outlined-small[data-v-9f038231]{font-size:calc(var(--e-type-size-100) * .75);line-height:calc(var(--e-type-line-height-100) * .75)}}.button[loading][data-v-9f038231]{color:transparent}.button[loading] .icon[data-v-9f038231],.button[loading] e-icon[data-v-9f038231]{--icon-fill-color: transparent}[data-v-c55bae2c]:host{font-family:var(--e-type-font-body),var(--e-type-font-fallback);font-size:var(--e-type-size-300);font-weight:var(--e-type-weight-weak);line-height:var(--e-type-line-height-300);color:var(--e-c-mono-900);box-sizing:border-box}[data-v-c55bae2c],[data-v-c55bae2c]:after,[data-v-c55bae2c]:before{box-sizing:inherit}[data-v-c55bae2c]{outline:none}[data-v-c55bae2c]:focus-visible{outline-style:solid;outline-offset:4px;outline-color:#b3b3b3cc}[data-whatintent=mouse][data-v-c55bae2c] *:focus{outline:none}body[data-v-c55bae2c]{margin:0;min-height:100vh}h1[data-v-c55bae2c],h2[data-v-c55bae2c],h3[data-v-c55bae2c],h4[data-v-c55bae2c],h5[data-v-c55bae2c],h6[data-v-c55bae2c]{margin:0;text-wrap:balance;font-size:unset;font-weight:unset}p[data-v-c55bae2c],figure[data-v-c55bae2c],blockquote[data-v-c55bae2c]{margin:0}button[data-v-c55bae2c]{padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:inherit;background:none}ul[data-v-c55bae2c],ol[data-v-c55bae2c]{list-style:none;padding:0;margin:0}dl[data-v-c55bae2c],dt[data-v-c55bae2c],dd[data-v-c55bae2c]{margin:0}address[data-v-c55bae2c]{font-style:normal}img[data-v-c55bae2c],picture[data-v-c55bae2c]{max-width:100%;display:block}fieldset[data-v-c55bae2c]{padding:0;margin:0;border:0}.visually-hidden[data-v-c55bae2c]{position:absolute;display:block;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}.icon-button[data-v-c55bae2c]{position:relative;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:100%;color:transparent;cursor:pointer}.icon-button .icon[data-v-c55bae2c],.icon-button e-icon[data-v-c55bae2c]{width:1.5rem;height:1.5rem}.icon-button .icon[data-v-c55bae2c],.icon-button e-icon[data-v-c55bae2c]{position:relative}.icon-button[data-v-c55bae2c]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:100%;border-width:2px;border-style:solid;transition:background-color var(--e-trs-duration-faster) var(--e-trs-easing-default),border-color var(--e-trs-duration-faster) var(--e-trs-easing-default),transform var(--e-trs-duration-faster) var(--e-trs-easing-default)}.icon-button[data-v-c55bae2c]:hover:not(:disabled):before{transform:scale(1.05)}.icon-button[data-v-c55bae2c]:active:before{transform:scale(1)}.icon-button[data-v-c55bae2c]:disabled{cursor:default}.icon-button[data-v-c55bae2c]:before{background-color:var(--e-c-primary-01-700);border-color:var(--e-c-primary-01-700)}.icon-button .icon[data-v-c55bae2c],.icon-button e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button[data-v-c55bae2c]:hover:before{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.icon-button[data-v-c55bae2c]:active:before{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.icon-button[data-v-c55bae2c]:disabled:before{background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.icon-button.outlined[data-v-c55bae2c]:before{background-color:transparent;border-color:var(--e-c-mono-500)}.icon-button.outlined .icon[data-v-c55bae2c],.icon-button.outlined e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-900)}.icon-button.outlined[data-v-c55bae2c]:hover:before{border-color:var(--e-c-primary-01-200)}.icon-button.outlined[data-v-c55bae2c]:active:before{border-color:var(--e-c-primary-01-500)}.icon-button.outlined[data-v-c55bae2c]:disabled:before{border-color:var(--e-c-mono-500)}.icon-button.outlined:disabled .icon[data-v-c55bae2c],.icon-button.outlined:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.plain[data-v-c55bae2c]:before{background-color:transparent;border-color:transparent}.icon-button.plain .icon[data-v-c55bae2c],.icon-button.plain e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-primary-01-700)}.icon-button.plain[data-v-c55bae2c]:hover:before{background-color:var(--e-c-primary-01-50);border-color:var(--e-c-primary-01-50)}.icon-button.plain[data-v-c55bae2c]:active:before{background-color:var(--e-c-primary-01-100);border-color:var(--e-c-primary-01-100)}.icon-button.plain:disabled .icon[data-v-c55bae2c],.icon-button.plain:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.filled-inverted[data-v-c55bae2c]:before{background-color:var(--e-c-mono-00);border-color:var(--e-c-mono-00)}.icon-button.filled-inverted .icon[data-v-c55bae2c],.icon-button.filled-inverted e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-primary-01-700)}.icon-button.filled-inverted[data-v-c55bae2c]:hover:before{background-color:var(--e-c-primary-01-100);border-color:var(--e-c-primary-01-100)}.icon-button.filled-inverted:hover .icon[data-v-c55bae2c],.icon-button.filled-inverted:hover e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-secondary-01-700)}.icon-button.filled-inverted[data-v-c55bae2c]:active:before{background-color:var(--e-c-primary-01-200);border-color:var(--e-c-primary-01-200)}.icon-button.filled-inverted[data-v-c55bae2c]:disabled:before{background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.icon-button.filled-inverted:disabled .icon[data-v-c55bae2c],.icon-button.filled-inverted:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-700)}.icon-button.outlined-inverted[data-v-c55bae2c]:before{background-color:transparent;border-color:var(--e-c-mono-00)}.icon-button.outlined-inverted .icon[data-v-c55bae2c],.icon-button.outlined-inverted e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button.outlined-inverted[data-v-c55bae2c]:hover:before{border-color:var(--e-c-primary-01-200)}.icon-button.outlined-inverted[data-v-c55bae2c]:active:before{border-color:var(--e-c-primary-01-500)}.icon-button.outlined-inverted[data-v-c55bae2c]:disabled:before{border-color:var(--e-c-mono-500)}.icon-button.outlined-inverted:disabled .icon[data-v-c55bae2c],.icon-button.outlined-inverted:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.plain-inverted[data-v-c55bae2c]:before{background-color:transparent;border-color:transparent}.icon-button.plain-inverted .icon[data-v-c55bae2c],.icon-button.plain-inverted e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button.plain-inverted[data-v-c55bae2c]:hover:before{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.icon-button.plain-inverted[data-v-c55bae2c]:active:before{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.icon-button.plain-inverted:disabled .icon[data-v-c55bae2c],.icon-button.plain-inverted:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-500)}