@energie360/ui-library 0.1.1 → 0.1.2

package/modules/footer/footer.scss

@@ -0,0 +1,161 @@
+@use '../../base/abstracts/' as a;
+@use '../../elements/text-link/text-link.scss' as t;
+@use '../../layout/container/container.scss' as l;
+
+.footer {
+  &.reduced {
+    .footer__top {
+      display: none;
+    }
+
+    .footer__bottom-col {
+      display: flex;
+      column-gap: var(--e-space-4);
+    }
+
+    .footer__copyright {
+      order: 1;
+    }
+
+    .footer__meta-navigation {
+      order: 2;
+    }
+
+    .footer__language-nav {
+      position: static;
+    }
+  }
+}
+
+.footer__top {
+  padding-top: var(--e-space-10);
+  padding-bottom: var(--e-space-16);
+  background-color: var(--e-c-mono-50);
+
+  @include a.bp(lg) {
+    padding-top: var(--e-space-8);
+    padding-bottom: var(--e-space-10);
+  }
+}
+
+.footer__top-row {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: var(--e-space-12);
+}
+
+.footer__top-column {
+  white-space: nowrap;
+
+  &:nth-child(3) {
+    margin-right: auto;
+  }
+
+  &.service {
+    white-space: wrap;
+
+    @include a.bp(lg) {
+      a {
+        display: block;
+      }
+    }
+  }
+
+  @include a.type(200);
+
+  a {
+    @include t.text-link--secondary;
+
+    font-weight: var(--e-type-weight-strong);
+    -webkit-font-smoothing: antialiased; // This is an exception. Usually we only use this for large heading text.
+  }
+
+  @include a.bp(m) {
+    flex: 1 0 100%;
+  }
+}
+
+.footer__top-right-column {
+  @include a.bp(xl) {
+    flex: 1 0 100%;
+  }
+}
+
+.footer__social-links {
+  display: flex;
+  grid-gap: var(--e-space-6);
+}
+
+.footer__bottom {
+  background-color: var(--e-c-mono-100);
+  padding-top: var(--e-space-8);
+  padding-bottom: var(--e-space-6);
+}
+
+.footer__bottom-row {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+
+  @include a.bp(m) {
+    flex-direction: column;
+  }
+}
+
+.footer__language-nav {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  @include a.bp(lg) {
+    top: auto;
+    bottom: 0;
+  }
+
+  @include a.bp(m) {
+    position: relative;
+    margin-bottom: calc(var(--e-space-8) + #{a.rem(18)});
+  }
+}
+
+.footer__meta-navigation {
+  @include a.type(100);
+
+  display: flex;
+  grid-gap: var(--e-space-6);
+  margin-bottom: var(--e-space-3);
+
+  a {
+    @include t.text-link--secondary;
+  }
+
+  @include a.bp(lg) {
+    @include a.type(50);
+  }
+
+  @include a.bp(m) {
+    flex-direction: column;
+    grid-gap: var(--e-space-4);
+    margin-bottom: var(--e-space-8);
+  }
+}
+
+.footer__copyright {
+  @include a.type(100);
+
+  color: var(--e-c-mono-700);
+
+  @include a.bp(lg) {
+    @include a.type(50);
+  }
+
+  @include a.bp(m) {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+}
+
+.footer__container {
+  @include l.grid-container;
+}

package/modules/footer/u-footer.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+interface Props {
+  variant?: 'normal' | 'reduced'
+}
+
+const { variant = 'normal' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['footer', variant]">
+    <div class="footer__top">
+      <div class="footer__container">
+        <div class="footer__top-row">
+          <div class="footer__top-column">
+            <slot name="address"></slot>
+          </div>
+
+          <div class="footer__top-column">
+            <slot name="contact"></slot>
+          </div>
+
+          <div class="footer__top-column service">
+            <slot name="service"></slot>
+          </div>
+
+          <div class="footer__top-right-column">
+            <div class="footer__social-links">
+              <slot name="socialLinks"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer__bottom">
+      <div class="footer__container">
+        <div class="footer__bottom-row">
+          <div class="footer__bottom-col">
+            <div class="footer__meta-navigation">
+              <slot name="metaNav"></slot>
+            </div>
+
+            <div class="footer__copyright">
+              <slot name="copyright"></slot>
+            </div>
+          </div>
+
+          <div class="footer__language-nav">
+            <slot name="languageNav"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use './footer.scss';
+</style>

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "",
+  "type": "module",
   "main": "dist/index.js",
   "exports": {
     ".": "./dist/custom-elements.js",
@@ -11,31 +12,40 @@
     "./elements/*": "./elements/*",
     "./components": "./components/index.js",
     "./components/*": "./components/*",
+    "./modules": "./modules/index.js",
+    "./modules/*": "./modules/*",
     "./wizard": "./wizard/index.js",
-    "./wizard/*": "./wizard/*"
+    "./wizard/*": "./wizard/*",
+    "./utility/elements/*": "./dist/elements/*",
+    "./utility/layout/*": "./dist/layout/*"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.13.4",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@types/node": "^22.13.10",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.5.2",
-    "sass": "^1.85.0",
-    "typescript": "^5.7.3",
-    "vite": "^6.1.0",
+    "autoprefixer": "^10.4.21",
+    "chokidar": "^4.0.3",
+    "postcss": "^8.5.3",
+    "sass": "^1.86.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2",
     "vue": "^3.5.13",
-    "vue-tsc": "^2.2.2"
+    "vue-tsc": "^2.2.8"
   },
   "dependencies": {
-    "@energie360/design-tokens": "^1.1.0"
+    "@energie360/design-tokens": "^1.3.0"
   },
   "scripts": {
-    "dev": "NODE_ENV=development vite build --watch --mode developement",
-    "build": "vite build",
+    "dev:vite": "NODE_ENV=development vite build --watch --mode development",
+    "watch": "node ./watch.js",
+    "dev": "npm run build; npm run watch",
+    "build:utilities": "sass --load-path=node_modules utility:dist",
+    "build:base": "sass --load-path=node_modules base/main-base.scss:dist/base-style.css",
+    "build": "npm run build:utilities && npm run build:base",
     "prepublish": "npm run build",
     "type-check": "vue-tsc --build"
   }

package/utility/elements/text-link.scss

@@ -0,0 +1 @@
+@use '../../elements/text-link/text-link';

package/utility/layout/split.scss

@@ -0,0 +1 @@
+@use '../../layout/split/split';

package/utility/utility-text.js

@@ -0,0 +1 @@
+import '../elements/text-link/text-link.scss'

package/utils/object/deep-get.js

@@ -7,8 +7,7 @@
  * @param {Array} keys
  * @returns {*}
  */
-export const deepGet = (obj, keys) =>
-  keys.reduce((xs, x) => xs?.[x] ?? null, obj)
+export const deepGet = (obj, keys) => keys.reduce((xs, x) => xs?.[x] ?? null, obj)
 
 /**
  *

package/utils/translations/translate.js

@@ -1,4 +1,7 @@
 import { deepGetByPath } from '../object/deep-get.js'
+import translations from '../../i18n/i18n.ts'
+
+const DEFAULT_LANGUAGE = 'DE'
 
 /**
  *
@@ -8,3 +11,13 @@ import { deepGetByPath } from '../object/deep-get.js'
  */
 export const translate = (translationKeyPath, defaultValue = '') =>
   deepGetByPath(window._EC.translations, translationKeyPath) || defaultValue
+
+const getLanguage = () => {
+  const langAttr = document.documentElement.lang.split('-')[0].toUpperCase()
+
+  return langAttr === '' ? DEFAULT_LANGUAGE : langAttr
+}
+
+export const getTranslation = (key) => {
+  return translations[getLanguage()][key]
+}

package/vite.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
       entry: [
         resolve(__dirname, 'custom-elements.js'),
         resolve(__dirname, 'base-style.js'),
+        resolve(__dirname, 'utility/utility-text.js'),
       ],
       name: '@energie360/ui-library',
       formats: ['es'],

package/watch.js

@@ -0,0 +1,27 @@
+import chokidar from 'chokidar'
+import { execSync } from 'child_process'
+import { glob } from 'node:fs/promises'
+
+const watchOptions = {
+  persistent: true,
+  ignoreInitial: true,
+}
+
+const handlerError = (e) => {
+  console.error(e)
+}
+
+const watcherScss = chokidar.watch(await Array.fromAsync(glob('**/*.scss')), watchOptions)
+const reloadScss = () => {
+  try {
+    execSync('npm run build -s', { stdio: 'inherit' })
+    console.log('--> reload CSS')
+    // reloadJs()
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+watcherScss.on('add', reloadScss)
+watcherScss.on('change', reloadScss)
+watcherScss.on('error', handlerError)

package/wizard/wizard-intro/wizard-intro.scss

@@ -36,4 +36,8 @@
 
 .cta-slot {
   margin-top: var(--e-space-16);
+
+  @include a.bp(lg) {
+    margin-top: var(--e-space-12);
+  }
 }

package/wizard/wizard-layout/u-wizard-layout-block.vue

@@ -10,7 +10,7 @@ defineProps<Props>()
   <div class="wizard-layout-block">
     <div class="row row--centered">
       <div :class="[`col-${columns}`]">
-        <slot></slot>
+        <slot />
       </div>
     </div>
   </div>

package/wizard/wizard-layout/u-wizard-layout-element.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wizard-layout-element">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

package/wizard/wizard-layout/u-wizard-layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="wizard-layout">
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </template>

package/wizard/wizard-layout/wizard-layout.scss

@@ -18,12 +18,6 @@
   --e-wizard-block-bottom: #{a.rem(dt.$space-16)};
   --e-wizard-block-between: #{a.rem(dt.$space-6)};
 
-  @include a.bp(lg) {
-    --e-wizard-wrapper-top: #{a.rem(dt.$space-12)};
-    --e-wizard-wrapper-bottom: #{a.rem(dt.$space-20)};
-    --e-wizard-block-bottom: #{a.rem(dt.$space-12)};
-  }
-
   padding-top: var(--e-wizard-wrapper-top);
   padding-bottom: var(--e-wizard-wrapper-bottom);
 
@@ -37,4 +31,10 @@
       margin-top: var(--e-wizard-block-between);
     }
   }
+
+  @include a.bp(lg) {
+    --e-wizard-wrapper-top: #{a.rem(dt.$space-12)};
+    --e-wizard-wrapper-bottom: #{a.rem(dt.$space-20)};
+    --e-wizard-block-bottom: #{a.rem(dt.$space-12)};
+  }
 }

package/dist/base-style.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=base-style.js.map

package/dist/base-style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-style.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/custom-elements.css

@@ -1 +0,0 @@
-.icon[data-v-3ff10e21]{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-3ff10e21]{width:100%;height:100%}.icon.icon--inline[data-v-3ff10e21]{display:inline-block;vertical-align:baseline}@keyframes horizontal-8027a436{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-8027a436{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-8027a436]{position:relative;display:inline-flex;--dot-color: var(--e-c-mono-900)}.loader>span[data-v-8027a436]{display:block;width:8px;height:8px;border-radius:4px;background-color:var(--dot-color)}.loader.horizontal[data-v-8027a436]{width:64px}.loader.horizontal>span[data-v-8027a436]{transform:translate(0);animation-name:horizontal-8027a436;animation-duration:1s;animation-direction:alternate;animation-timing-function:cubic-bezier(.4,.61,.61,.4);animation-iteration-count:infinite}.loader.vertical[data-v-8027a436]{height:8px;width:8px}.loader.vertical>span[data-v-8027a436]{transform:translateY(0);animation-name:vertical-8027a436;animation-duration:2s;animation-timing-function:cubic-bezier(.47,.52,.165,1.005);animation-iteration-count:infinite}button[data-v-40a767c3]{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-40a767c3]{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-40a767c3],.button e-icon[data-v-40a767c3]{width:24px;height:24px}.button .button__loader[data-v-40a767c3]{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.button.disabled[data-v-40a767c3],.button[data-v-40a767c3]:disabled{pointer-events:none}.button.loading[data-v-40a767c3]{cursor:default}.button .icon[data-v-40a767c3],.button e-icon[data-v-40a767c3]{--icon-transition: fill var(--e-trs-duration-faster) var(--e-trs-easing-default)}.button[data-v-40a767c3]{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-40a767c3],.button e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-00)}.button .loader[data-v-40a767c3],.button e-loader[data-v-40a767c3]{--dot-color: var(--e-c-mono-00)}.button[data-v-40a767c3]:hover{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.button[data-v-40a767c3]:active,.button.loading[data-v-40a767c3]{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.button.disabled[data-v-40a767c3]:not(.loading),.button[data-v-40a767c3]:disabled:not(.loading){background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.button.outlined[data-v-40a767c3]{background-color:transparent;color:var(--e-c-primary-01-700);border:2px solid var(--e-c-primary-01-700)}.button.outlined .icon[data-v-40a767c3],.button.outlined e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-primary-01-700)}.button.outlined .loader[data-v-40a767c3],.button.outlined e-loader[data-v-40a767c3]{--dot-color: var(--e-c-primary-01-500)}.button.outlined[data-v-40a767c3]:hover{background-color:var(--e-c-primary-01-50);border-color:var(--e-c-primary-01-200)}.button.outlined[data-v-40a767c3]:active,.button.outlined.loading[data-v-40a767c3]{background-color:transparent;border-color:var(--e-c-primary-01-500)}.button.outlined.disabled[data-v-40a767c3]:not(.loading),.button.outlined[data-v-40a767c3]: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-40a767c3],.button.outlined.disabled:not(.loading) e-icon[data-v-40a767c3],.button.outlined:disabled:not(.loading) .icon[data-v-40a767c3],.button.outlined:disabled:not(.loading) e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-500)}.button.plain[data-v-40a767c3]{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-40a767c3],.button.plain e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-primary-01-700)}.button.plain[data-v-40a767c3]:hover{color:var(--e-c-secondary-01-900)}.button.plain:hover .icon[data-v-40a767c3],.button.plain:hover e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-secondary-01-900)}.button.plain[data-v-40a767c3]:active{color:var(--e-c-secondary-01-700)}.button.plain:active .icon[data-v-40a767c3],.button.plain:active e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.plain.disabled[data-v-40a767c3]:not(.loading),.button.plain[data-v-40a767c3]:disabled:not(.loading){background:none;color:var(--e-c-mono-500)}.button.plain.disabled:not(.loading) .icon[data-v-40a767c3],.button.plain.disabled:not(.loading) e-icon[data-v-40a767c3],.button.plain:disabled:not(.loading) .icon[data-v-40a767c3],.button.plain:disabled:not(.loading) e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-500)}.button.plain.loading .loader[data-v-40a767c3],.button.plain.loading e-loader[data-v-40a767c3]{--dot-color: var(--e-c-secondary-01-700)}.button.plain-small[data-v-40a767c3]{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-40a767c3],.button.plain-small e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-primary-01-700)}.button.plain-small[data-v-40a767c3]:hover{color:var(--e-c-secondary-01-900)}.button.plain-small:hover .icon[data-v-40a767c3],.button.plain-small:hover e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-secondary-01-900)}.button.plain-small[data-v-40a767c3]:active{color:var(--e-c-secondary-01-700)}.button.plain-small:active .icon[data-v-40a767c3],.button.plain-small:active e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.plain-small.disabled[data-v-40a767c3]:not(.loading),.button.plain-small[data-v-40a767c3]:disabled:not(.loading){background:none;color:var(--e-c-mono-500)}.button.plain-small.disabled:not(.loading) .icon[data-v-40a767c3],.button.plain-small.disabled:not(.loading) e-icon[data-v-40a767c3],.button.plain-small:disabled:not(.loading) .icon[data-v-40a767c3],.button.plain-small:disabled:not(.loading) e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-500)}.button.plain-small.loading .loader[data-v-40a767c3],.button.plain-small.loading e-loader[data-v-40a767c3]{--dot-color: var(--e-c-secondary-01-700)}.button.filled-inverted[data-v-40a767c3]{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-40a767c3]{--dot-color: var(--e-c-secondary-01-900)}.button.filled-inverted .icon[data-v-40a767c3],.button.filled-inverted e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-primary-01-700)}.button.filled-inverted[data-v-40a767c3]: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-40a767c3],.button.filled-inverted:hover e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.filled-inverted[data-v-40a767c3]:active,.button.filled-inverted.loading[data-v-40a767c3]{background-color:var(--e-c-primary-01-200);border-color:var(--e-c-primary-01-200)}.button.filled-inverted.disabled[data-v-40a767c3]:not(.loading),.button.filled-inverted[data-v-40a767c3]:disabled:not(.loading){color:var(--e-c-mono-700)}.button.filled-inverted.disabled:not(.loading) .icon[data-v-40a767c3],.button.filled-inverted.disabled:not(.loading) e-icon[data-v-40a767c3],.button.filled-inverted:disabled:not(.loading) .icon[data-v-40a767c3],.button.filled-inverted:disabled:not(.loading) e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-700)}.button.outlined-inverted[data-v-40a767c3]{background-color:transparent;border-color:var(--e-c-mono-00);color:var(--e-c-mono-00)}.button.outlined-inverted .icon[data-v-40a767c3],.button.outlined-inverted e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-00)}.button.outlined-inverted .loader[data-v-40a767c3],.button.outlined-inverted e-loader[data-v-40a767c3]{--dot-color: var(--e-c-mono-00)}.button.outlined-inverted[data-v-40a767c3]: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-40a767c3]:active,.button.outlined-inverted.loading[data-v-40a767c3]{background-color:transparent;border-color:var(--e-c-primary-01-500)}.button.outlined-inverted.disabled[data-v-40a767c3]:not(.loading),.button.outlined-inverted[data-v-40a767c3]: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-40a767c3],.button.outlined-inverted.disabled:not(.loading) e-icon[data-v-40a767c3],.button.outlined-inverted:disabled:not(.loading) .icon[data-v-40a767c3],.button.outlined-inverted:disabled:not(.loading) e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-500)}.button.secondary-outlined[data-v-40a767c3]{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-40a767c3],.button.secondary-outlined e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-secondary-02-500)}.button.secondary-outlined .loader[data-v-40a767c3],.button.secondary-outlined e-loader[data-v-40a767c3]{--dot-color: var(--e-c-secondary-02-500)}.button.secondary-outlined[data-v-40a767c3]:hover{background-color:var(--e-c-secondary-02-50);border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined[data-v-40a767c3]:active,.button.secondary-outlined.loading[data-v-40a767c3]{background-color:transparent;border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined.disabled[data-v-40a767c3]:not(.loading),.button.secondary-outlined[data-v-40a767c3]: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-40a767c3],.button.secondary-outlined.disabled:not(.loading) e-icon[data-v-40a767c3],.button.secondary-outlined:disabled:not(.loading) .icon[data-v-40a767c3],.button.secondary-outlined:disabled:not(.loading) e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-500)}.button.secondary-outlined-small[data-v-40a767c3]{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-40a767c3],.button.secondary-outlined-small e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-secondary-02-500)}.button.secondary-outlined-small .loader[data-v-40a767c3],.button.secondary-outlined-small e-loader[data-v-40a767c3]{--dot-color: var(--e-c-secondary-02-500)}.button.secondary-outlined-small[data-v-40a767c3]:hover{background-color:var(--e-c-secondary-02-50);border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined-small[data-v-40a767c3]:active,.button.secondary-outlined-small.loading[data-v-40a767c3]{background-color:transparent;border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined-small.disabled[data-v-40a767c3]:not(.loading),.button.secondary-outlined-small[data-v-40a767c3]: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-40a767c3],.button.secondary-outlined-small.disabled:not(.loading) e-icon[data-v-40a767c3],.button.secondary-outlined-small:disabled:not(.loading) .icon[data-v-40a767c3],.button.secondary-outlined-small:disabled:not(.loading) e-icon[data-v-40a767c3]{--icon-fill-color: var(--e-c-mono-500)}.button.loading[data-v-40a767c3]{color:transparent}.button.loading .icon[data-v-40a767c3],.button.loading e-icon[data-v-40a767c3]{--icon-fill-color: transparent}[data-v-4d752899]: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-4d752899],[data-v-4d752899]:after,[data-v-4d752899]:before{box-sizing:inherit}[data-v-4d752899]{outline:none}[data-v-4d752899]:focus-visible{outline-style:solid;outline-offset:4px;outline-color:#b3b3b3cc}[data-whatintent=mouse][data-v-4d752899] *:focus{outline:none}body[data-v-4d752899]{margin:0;min-height:100vh}h1[data-v-4d752899],h2[data-v-4d752899],h3[data-v-4d752899],h4[data-v-4d752899],h5[data-v-4d752899],h6[data-v-4d752899]{margin:0;text-wrap:balance;font-size:unset;font-weight:unset}p[data-v-4d752899],figure[data-v-4d752899],blockquote[data-v-4d752899]{margin:0}button[data-v-4d752899]{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-4d752899],ol[data-v-4d752899]{list-style:none;padding:0;margin:0}dl[data-v-4d752899],dt[data-v-4d752899],dd[data-v-4d752899]{margin:0}address[data-v-4d752899]{font-style:normal}img[data-v-4d752899],picture[data-v-4d752899]{max-width:100%;display:block}fieldset[data-v-4d752899]{padding:0;margin:0;border:0}.visually-hidden[data-v-4d752899]{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-4d752899]{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-4d752899],.icon-button e-icon[data-v-4d752899]{width:1.5rem;height:1.5rem}.icon-button .icon[data-v-4d752899],.icon-button e-icon[data-v-4d752899]{position:relative}.icon-button[data-v-4d752899]: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-4d752899]:hover:not(:disabled):before{transform:scale(1.05)}.icon-button[data-v-4d752899]:active:before{transform:scale(1)}.icon-button[data-v-4d752899]:disabled{cursor:default}.icon-button[data-v-4d752899]:before{background-color:var(--e-c-primary-01-700);border-color:var(--e-c-primary-01-700)}.icon-button .icon[data-v-4d752899],.icon-button e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-00)}.icon-button[data-v-4d752899]:hover:before{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.icon-button[data-v-4d752899]:active:before{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.icon-button[data-v-4d752899]:disabled:before{background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.icon-button.outlined[data-v-4d752899]:before{background-color:transparent;border-color:var(--e-c-mono-500)}.icon-button.outlined .icon[data-v-4d752899],.icon-button.outlined e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-900)}.icon-button.outlined[data-v-4d752899]:hover:before{border-color:var(--e-c-primary-01-200)}.icon-button.outlined[data-v-4d752899]:active:before{border-color:var(--e-c-primary-01-500)}.icon-button.outlined[data-v-4d752899]:disabled:before{border-color:var(--e-c-mono-500)}.icon-button.outlined:disabled .icon[data-v-4d752899],.icon-button.outlined:disabled e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.plain[data-v-4d752899]:before{background-color:transparent;border-color:transparent}.icon-button.plain .icon[data-v-4d752899],.icon-button.plain e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-primary-01-700)}.icon-button.plain[data-v-4d752899]:hover:before{background-color:var(--e-c-primary-01-50);border-color:var(--e-c-primary-01-50)}.icon-button.plain[data-v-4d752899]: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-4d752899],.icon-button.plain:disabled e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.filled-inverted[data-v-4d752899]:before{background-color:var(--e-c-mono-00);border-color:var(--e-c-mono-00)}.icon-button.filled-inverted .icon[data-v-4d752899],.icon-button.filled-inverted e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-primary-01-700)}.icon-button.filled-inverted[data-v-4d752899]: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-4d752899],.icon-button.filled-inverted:hover e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-secondary-01-700)}.icon-button.filled-inverted[data-v-4d752899]:active:before{background-color:var(--e-c-primary-01-200);border-color:var(--e-c-primary-01-200)}.icon-button.filled-inverted[data-v-4d752899]:disabled:before{background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.icon-button.filled-inverted:disabled .icon[data-v-4d752899],.icon-button.filled-inverted:disabled e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-700)}.icon-button.outlined-inverted[data-v-4d752899]:before{background-color:transparent;border-color:var(--e-c-mono-00)}.icon-button.outlined-inverted .icon[data-v-4d752899],.icon-button.outlined-inverted e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-00)}.icon-button.outlined-inverted[data-v-4d752899]:hover:before{border-color:var(--e-c-primary-01-200)}.icon-button.outlined-inverted[data-v-4d752899]:active:before{border-color:var(--e-c-primary-01-500)}.icon-button.outlined-inverted[data-v-4d752899]:disabled:before{border-color:var(--e-c-mono-500)}.icon-button.outlined-inverted:disabled .icon[data-v-4d752899],.icon-button.outlined-inverted:disabled e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.plain-inverted[data-v-4d752899]:before{background-color:transparent;border-color:transparent}.icon-button.plain-inverted .icon[data-v-4d752899],.icon-button.plain-inverted e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-00)}.icon-button.plain-inverted[data-v-4d752899]:hover:before{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.icon-button.plain-inverted[data-v-4d752899]: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-4d752899],.icon-button.plain-inverted:disabled e-icon[data-v-4d752899]{--icon-fill-color: var(--e-c-mono-500)}