@energie360/ui-library 0.1.0 → 0.1.1

package/components/table/u-table-row.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+interface Props {
+  highlight?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div role="row" :class="['table-row', { highlight }]">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table-row.scss';
+</style>

package/components/table/u-table.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="table-scroll-wrapper">
+    <div role="table" class="table">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table.scss';
+</style>

package/components/tooltip/dom.js

@@ -0,0 +1,167 @@
+/**
+ * Wrap an element with another element
+ *
+ * @param {Node} el
+ * @param {string} wrapper - Tag name of wrapper element. Can also have a classname (like emmet notation)
+ *
+ * @returns {Node}
+ */
+export const wrap = (el, wrapper) => {
+  const parsedWrapper = wrapper.split('.')
+  const wrapperEl = document.createElement(parsedWrapper[0])
+
+  if (parsedWrapper.length > 1) {
+    wrapperEl.className = parsedWrapper.slice(1).join(' ')
+  }
+
+  el.parentNode.insertBefore(wrapperEl, el)
+  wrapperEl.appendChild(el)
+
+  return wrapperEl
+}
+
+/**
+ * Get element position relative to document.
+ *
+ * @param {Node} el
+ * @returns {{top: number, left: number, width: number, height: number}}
+ */
+export const getElementPosition = (el) => {
+  const elRect = el.getBoundingClientRect()
+  const scrollTop = window.scrollY
+  const scrollLeft = window.scrollX
+
+  return {
+    top: elRect.top + scrollTop,
+    left: elRect.left + scrollLeft,
+    width: elRect.width,
+    height: elRect.height,
+  }
+}
+
+/**
+ * Decode HTML encoded string.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+export const htmlDecode = (str) => {
+  const doc = new DOMParser().parseFromString(str, 'text/html')
+  return doc.documentElement.textContent
+}
+
+export const htmlToDocFragment = (str) => {
+  const tpl = document.createElement('template')
+  tpl.innerHTML = str
+  return tpl.content.cloneNode(true)
+}
+
+/**
+ * Reverse order of direct child nodes of given parent.
+ *
+ * @param {Node} parent
+ */
+export const reverseChildren = (parent) => {
+  for (let i = 1; i < parent.childNodes.length; i++) {
+    parent.insertBefore(parent.childNodes[i], parent.firstChild)
+  }
+}
+
+/**
+ * Check if element is in a slotted element.
+ *
+ * @param {Element} el
+ * @returns {boolean}
+ */
+const isInSlottedElement = (el) => {
+  const parentEl = el.parentElement
+
+  if (parentEl === document.body || !parentEl) {
+    return false
+  }
+
+  if (parentEl.assignedSlot) {
+    return true
+  } else {
+    return isInSlottedElement(parentEl)
+  }
+}
+
+/**
+ *
+ * @param {Element} el
+ * @returns {boolean}
+ */
+const isOffsetParent = (el) => {
+  const style = getComputedStyle(el)
+  return style.position === 'relative' || style.position === 'absolute'
+}
+
+/**
+ * Get the expected offsetParent within nested shadow roots.
+ *
+ * Because elements are nested in web components or slotted in web components we can't get desired offsetParent.
+ *
+ * @param {Element} el
+ * @returns {Element}
+ */
+export const getOffsetParent = (el) => {
+  if (el === document.body) {
+    // We arrived at the top.
+    // 'body' must be the offsetParent then.
+    return el
+  }
+
+  const offsetParent = el.offsetParent
+
+  if (offsetParent === document.body || offsetParent === null) {
+    // It's possible that we're a slotted element, in which case we'll always have the potentially 'wrong' offsetParent 'body'.
+    // Dig deeper...
+    if (el.assignedSlot) {
+      // A <slot> doesn't have an offsetParent. Let's use the parentNode.
+      const parentElement = el.assignedSlot.parentElement
+
+      // Handle case where the parent node actually is an offsetParent
+      if (isOffsetParent(parentElement)) {
+        return parentElement
+      }
+
+      return getOffsetParent(el.assignedSlot.parentElement)
+    }
+
+    if (isInSlottedElement(el)) {
+      return getOffsetParent(el.parentElement)
+    }
+
+    if (el.getRootNode() instanceof ShadowRoot) {
+      // If we're nested in another shadow root we'll also always get 'body' as offsetParent.
+      // Check the offsetParent of the current host element.
+      return getOffsetParent(el.getRootNode().host)
+    }
+  }
+
+  return offsetParent
+}
+
+/**
+ * Get offset positions of parent which is not 'static'.
+ *
+ * @param {Element} el
+ * @returns {Object}
+ */
+export const getOffsetParentPosition = (el) => {
+  const offsetParent = getOffsetParent(el)
+  const elRect = el.getBoundingClientRect()
+  const offsetParentRect = offsetParent.getBoundingClientRect()
+
+  return {
+    top: elRect.top - offsetParentRect.top,
+    left: elRect.left - offsetParentRect.left,
+  }
+}
+
+export const moveChildren = (sourceParent, targetParent) => {
+  while (sourceParent.childNodes.length > 0) {
+    targetParent.appendChild(sourceParent.childNodes[0])
+  }
+}

package/components/tooltip/popover.js

@@ -0,0 +1,200 @@
+import { getViewportDimensions } from './viewport'
+import { getOffsetParentPosition } from './dom'
+
+const defaultOptions = {
+  offset: 0,
+  viewportPadding: 0,
+  placement: 'top-left',
+}
+
+/**
+ * This simply calculates the desired position of the popover and returns the coordinates.
+ * It won't change the DOM.
+ *
+ * @param {Element} refEl
+ * @param {Element} popoverEl
+ * @param {Object} options - Options object
+ * @param {number} options.offset - offset to refEl in px
+ * @param {number} options.viewportPadding - Padding to viewport in px
+ * @param {string} options.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+ */
+export const getPopoverPosition = (refEl, popoverEl, options = {}) => {
+  options = Object.assign({}, defaultOptions, options)
+
+  const refRect = refEl.getBoundingClientRect()
+  let popoverRect = popoverEl.getBoundingClientRect()
+
+  const offsetParent = getOffsetParentPosition(refEl)
+
+  let top
+  let left
+  const offsetTop = offsetParent.top
+  const offsetLeft = offsetParent.left
+  const { vpWidth } = getViewportDimensions()
+  const docHeight = document.documentElement.scrollHeight
+  const scrollY = window.scrollY
+
+  if (popoverRect.width === 0 && popoverRect.height === 0) {
+    // Popover probably has display:none.
+    // Make it visible for a frame to get the correct dimensions.
+    popoverEl.style.display = 'block'
+    popoverRect = popoverEl.getBoundingClientRect()
+    popoverEl.style.display = ''
+  }
+
+  switch (options.placement) {
+    case 'top-right':
+      top = offsetTop - popoverRect.height - options.offset
+      left = offsetLeft + refRect.width - popoverRect.width
+      // console.log(left)
+      break
+
+    case 'top-left':
+      top = offsetTop - popoverRect.height - options.offset
+      left = offsetLeft
+      break
+
+    case 'bottom-right':
+      top = offsetTop + refRect.height + options.offset
+      left = offsetLeft + refRect.width - popoverRect.width
+      break
+
+    case 'bottom-left':
+      top = offsetTop + refRect.height + options.offset
+      left = offsetLeft
+      break
+
+    // TODO: add remaining placement options
+    case 'bottom-center':
+      break
+
+    case 'top-center':
+  }
+
+  // Add corrections to position if necessary
+
+  // Check left or right overflow
+  const leftDiff = refRect.left - offsetLeft
+  if (left + leftDiff < options.viewportPadding) {
+    left = 0 - leftDiff + options.viewportPadding
+  } else if (
+    left + leftDiff + popoverRect.width >
+    vpWidth - options.viewportPadding
+  ) {
+    left = vpWidth - leftDiff - popoverRect.width - options.viewportPadding
+  }
+
+  // Check top or bottom overflow
+  const topDiff = refRect.top - offsetTop
+  if (top + topDiff + scrollY < options.viewportPadding) {
+    // popover is too high.
+    // console.log('too high')
+    // Switch position to bottom
+    top = offsetTop + refRect.height + options.offset
+  } else if (
+    top + topDiff + scrollY + popoverRect.height >
+    docHeight - options.viewportPadding
+  ) {
+    // popover is too low.
+    // console.log('too low')
+    // Swith position to top.
+    top = offsetTop - popoverRect.height - options.offset
+  }
+
+  return {
+    top,
+    left,
+  }
+}
+
+/**
+ * Calculates the desired position of the popover relative to <body>.
+ *
+ * @param {Element} refEl
+ * @param {Element} popoverEl
+ * @param {Object} options - Options object
+ * @param {number} options.offset - offset to refEl in px
+ * @param {number} options.viewportPadding - Padding to viewport in px
+ * @param {string} options.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+ */
+export const getPopoverPositionBody = (refEl, popoverEl, options = {}) => {
+  options = Object.assign({}, defaultOptions, options)
+
+  const refRect = refEl.getBoundingClientRect()
+  let popoverRect = popoverEl.getBoundingClientRect()
+
+  let top
+  let left
+  const topCorrection = 0
+  let leftCorrection = 0
+  const scrollY = window.scrollY
+  const scrollX = window.scrollX
+  const { vpWidth } = getViewportDimensions()
+  // const docHeight = document.documentElement.scrollHeight
+  const refTop = refRect.top + scrollY
+  const refLeft = refRect.left + scrollX
+
+  if (popoverRect.width === 0 && popoverRect.height === 0) {
+    // Popover probably has display:none.
+    // Make it visible for a frame to get the correct dimensions.
+    popoverEl.style.display = 'block'
+    popoverRect = popoverEl.getBoundingClientRect()
+    popoverEl.style.display = ''
+  }
+
+  switch (options.placement) {
+    case 'top-right':
+      // top = offsetTop - popoverRect.height - options.offset
+      // left = offsetLeft + refRect.width - popoverRect.width
+      // console.log(left)
+      break
+
+    case 'top-left':
+      // top = offsetTop - popoverRect.height - options.offset
+      // left = offsetLeft
+      break
+
+    case 'bottom-right':
+      // top = offsetTop + refRect.height + options.offset
+      // left = offsetLeft + refRect.width - popoverRect.width
+      break
+
+    case 'bottom-left':
+      // top = offsetTop + refRect.height + options.offset
+      // left = offsetLeft
+      break
+
+    case 'bottom-center':
+      top = refTop + refRect.height + options.offset
+      left = refLeft + refRect.width / 2 - popoverRect.width / 2
+      break
+
+    case 'top-center':
+      top = refTop - options.offset - popoverRect.height
+      left = refLeft + refRect.width / 2 - popoverRect.width / 2
+  }
+
+  // Add corrections to position if necessary
+
+  // Check left or right overflow
+  if (left < options.viewportPadding) {
+    // too left
+    leftCorrection = Math.abs(left) + options.viewportPadding
+    left = options.viewportPadding
+  } else if (left + popoverRect.width > vpWidth - options.viewportPadding) {
+    // too right
+    leftCorrection =
+      vpWidth - options.viewportPadding - popoverRect.width - left
+    left = vpWidth - options.viewportPadding - popoverRect.width
+  }
+
+  // Check top or bottom overflow
+  // TODO: Add these corrections
+
+  return {
+    top,
+    left,
+    leftCorrection,
+    topCorrection,
+  }
+}

package/components/tooltip/tooltip.scss

@@ -0,0 +1,75 @@
+@use '../../base/abstracts/' as a;
+
+.tooltip {
+  pointer-events: none;
+  z-index: a.$layer-tooltip;
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: a.rem(360);
+  min-width: a.rem(84);
+  opacity: 0;
+  transform: translateY(-5px);
+  transition:
+    opacity a.$trs-default,
+    transform a.$trs-default;
+
+  @include a.bp(lg) {
+    max-width: a.rem(280);
+  }
+
+  .tooltip__content {
+    @include a.type(100);
+
+    // This nesting here is only to make the new sass compiler happy.
+    & {
+      z-index: 0;
+      position: relative;
+      padding: var(--e-space-2);
+      background-color: var(--e-c-mono-00);
+      box-shadow: var(--e-elevation-sm);
+      border: 1px solid var(--e-c-mono-100);
+      border-radius: var(--e-brd-radius-1);
+    }
+
+    @include a.bp(lg) {
+      @include a.type(50);
+
+      padding: var(--e-space-3);
+    }
+  }
+
+  .tooltip__pointer {
+    position: absolute;
+    bottom: -4px;
+    left: calc(50% - 6px);
+
+    &::before {
+      content: '';
+      display: block;
+      width: 10px;
+      height: 9.6px;
+      transform: rotate(53.13deg) skewX(15.36deg);
+      box-shadow: var(--e-elevation-sm);
+      background-color: var(--e-c-mono-00);
+      border-right: 1px solid var(--e-c-mono-100);
+      border-bottom: 1px solid var(--e-c-mono-100);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 5px;
+      left: -2px;
+      width: 14px;
+      height: 7px;
+      background: var(--e-c-mono-00);
+    }
+  }
+
+  // States
+  &.tooltip--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/components/tooltip/u-tooltip.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getPopoverPositionBody } from './popover'
+
+interface Props {
+  title: string
+  placement?:
+    | 'top-right'
+    | 'top-left'
+    | 'top-center'
+    | 'bottom-right'
+    | 'bottom-left'
+    | 'bottom-center'
+  offset?: number
+  viewportPadding?: number
+}
+
+const {
+  placement = 'top-center',
+  offset = 12,
+  viewportPadding = 20,
+} = defineProps<Props>()
+
+const tooltip = ref(null)
+const root = ref(null)
+const pointer = ref(null)
+
+const showTooltip = () => {
+  const popoverPosition = getPopoverPositionBody(root.value, tooltip.value, {
+    offset,
+    placement,
+    viewportPadding,
+  })
+
+  // Set position
+  tooltip.value.style.top = `${popoverPosition.top}px`
+  tooltip.value.style.left = `${popoverPosition.left}px`
+
+  // Fix pointer position if necessary
+  if (popoverPosition.leftCorrection) {
+    pointer.value.style.transform = `translateX(${popoverPosition.leftCorrection * -1}px)`
+  }
+
+  tooltip.value.ariaHidden = 'false'
+  tooltip.value.classList.toggle('tooltip--open', true)
+}
+
+const hideTooltip = () => {
+  const onTransitionend = () => {
+    tooltip.value.removeEventListener('transitionend', onTransitionend)
+
+    tooltip.value.style.top = ''
+    tooltip.value.style.left = ''
+    pointer.value.style.transform = ''
+  }
+
+  tooltip.value.addEventListener('transitionend', onTransitionend)
+
+  tooltip.value.ariaHidden = 'true'
+  tooltip.value.classList.toggle('tooltip--open', false)
+}
+
+// On desktop (or non-touch devices) mouse events will be fired before the pointer events.
+// For mobile and touch devices it's th opposite, pointer events will be fired first.
+// This way we can detect on what device we are and handle the behaviour accordingly.
+const onMouseenter = () => {
+  showTooltip()
+}
+
+const onMouseleave = () => {
+  hideTooltip()
+}
+</script>
+
+<template>
+  <span @mouseenter="onMouseenter" @mouseleave="onMouseleave" ref="root">
+    <slot></slot>
+  </span>
+
+  <Teleport to="body">
+    <div ref="tooltip" class="tooltip">
+      <div class="tooltip__content">
+        {{ title }}
+      </div>
+      <span class="tooltip__pointer" ref="pointer"></span>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+@use './tooltip.scss';
+</style>

package/components/tooltip/viewport.js

@@ -0,0 +1,21 @@
+/**
+ * Get element offset relative to document.
+ *
+ * @param {Element} el
+ * @returns {{top: *, left: *, width, height}}
+ */
+export const getElOffset = (el) => {
+  const rect = el.getBoundingClientRect()
+
+  return {
+    top: window.scrollY + rect.top,
+    left: window.scrollX + rect.left,
+    width: rect.width,
+    height: rect.height,
+  }
+}
+
+export const getViewportDimensions = () => ({
+  vpWidth: window.innerWidth,
+  vpHeight: window.innerHeight,
+})

package/custom-elements.js

@@ -0,0 +1 @@
+export * from './elements/elements'

package/dist/base-style.css

@@ -17,4 +17,4 @@
  *
  *
  * © 2020 MyFonts Inc
-*/body{margin:0;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;font-size:unset;font-weight:unset}p,figure,blockquote{margin:0}button{padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:inherit;background:none}ul,ol{list-style:none;padding:0;margin:0}dl,dt,dd{margin:0}address{font-style:normal}img,picture{max-width:100%;display:block}fieldset{padding:0;margin:0;border:0}html{box-sizing:border-box;scroll-behavior:smooth;min-height:100vh}*,*:before,*:after{box-sizing:inherit}body{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)}*{outline:none}*:focus-visible{outline-style:solid;outline-offset:4px;outline-color:#b3b3b3cc}[data-whatintent=mouse] *:focus{outline:none}@font-face{font-family:Glober;font-weight:400;font-style:normal;font-display:swap;src:url(/static/ui-assets/fonts/Glober/Glober-Regular/font.woff2) format("woff2"),url(/static/ui-assets/fonts/Glober/Glober-Regular/font.woff) format("woff")}@font-face{font-family:Glober;font-weight:700;font-style:normal;font-display:swap;src:url(/static/ui-assets/fonts/Glober/Glober-Bold/font.woff2) format("woff2"),url(/static/ui-assets/fonts/Glober/Glober-Bold/font.woff) format("woff")}:root{--e-c-primary-01-50: #edf6e9;--e-c-primary-01-50-rgb: 237, 246, 233;--e-c-primary-01-100: #dbedd4;--e-c-primary-01-100-rgb: 219, 237, 212;--e-c-primary-01-200: #9cce89;--e-c-primary-01-200-rgb: 156, 206, 137;--e-c-primary-01-500: #4ba528;--e-c-primary-01-500-rgb: 75, 165, 40;--e-c-primary-01-700: #3c8420;--e-c-primary-01-700-rgb: 60, 132, 32;--e-c-primary-01-900: #316b1a;--e-c-primary-01-900-rgb: 49, 107, 26;--e-c-secondary-01-50: #e5f2eb;--e-c-secondary-01-50-rgb: 229, 242, 235;--e-c-secondary-01-100: #cce5d8;--e-c-secondary-01-100-rgb: 204, 229, 216;--e-c-secondary-01-200: #73b894;--e-c-secondary-01-200-rgb: 115, 184, 148;--e-c-secondary-01-500: #007d3c;--e-c-secondary-01-500-rgb: 0, 125, 60;--e-c-secondary-01-700: #006430;--e-c-secondary-01-700-rgb: 0, 100, 48;--e-c-secondary-01-900: #005127;--e-c-secondary-01-900-rgb: 0, 81, 39;--e-c-secondary-02-50: #ede9ee;--e-c-secondary-02-50-rgb: 237, 233, 238;--e-c-secondary-02-100: #dcd3de;--e-c-secondary-02-100-rgb: 220, 211, 222;--e-c-secondary-02-200: #9f86a4;--e-c-secondary-02-200-rgb: 159, 134, 164;--e-c-secondary-02-500: #50235a;--e-c-secondary-02-500-rgb: 80, 35, 90;--e-c-secondary-02-700: #401c48;--e-c-secondary-02-700-rgb: 64, 28, 72;--e-c-secondary-02-900: #34173b;--e-c-secondary-02-900-rgb: 52, 23, 59;--e-c-secondary-03-50: #f8e7ed;--e-c-secondary-03-50-rgb: 248, 231, 237;--e-c-secondary-03-100: #f1cfdb;--e-c-secondary-03-100-rgb: 241, 207, 219;--e-c-secondary-03-200: #d97b9c;--e-c-secondary-03-200-rgb: 217, 123, 156;--e-c-secondary-03-500: #b90f4b;--e-c-secondary-03-500-rgb: 185, 15, 75;--e-c-secondary-03-700: #940c3c;--e-c-secondary-03-700-rgb: 148, 12, 60;--e-c-secondary-03-900: #780a31;--e-c-secondary-03-900-rgb: 120, 10, 49;--e-c-secondary-04-50: #fffbe5;--e-c-secondary-04-50-rgb: 255, 251, 229;--e-c-secondary-04-100: #fff7cc;--e-c-secondary-04-100-rgb: 255, 247, 204;--e-c-secondary-04-200: #ffe973;--e-c-secondary-04-200-rgb: 255, 233, 115;--e-c-secondary-04-500: #ffd700;--e-c-secondary-04-500-rgb: 255, 215, 0;--e-c-secondary-04-700: #ccac00;--e-c-secondary-04-700-rgb: 204, 172, 0;--e-c-secondary-04-900: #a68c00;--e-c-secondary-04-900-rgb: 166, 140, 0;--e-c-secondary-05-50: #e5f5fc;--e-c-secondary-05-50-rgb: 229, 245, 252;--e-c-secondary-05-100: #cceaf8;--e-c-secondary-05-100-rgb: 204, 234, 248;--e-c-secondary-05-200: #73c5ec;--e-c-secondary-05-200-rgb: 115, 197, 236;--e-c-secondary-05-500: #0096dc;--e-c-secondary-05-500-rgb: 0, 150, 220;--e-c-secondary-05-700: #0078b0;--e-c-secondary-05-700-rgb: 0, 120, 176;--e-c-secondary-05-900: #00618f;--e-c-secondary-05-900-rgb: 0, 97, 143;--e-c-secondary-06-50: #f4e6e5;--e-c-secondary-06-50-rgb: 244, 230, 229;--e-c-secondary-06-100: #e9cdcc;--e-c-secondary-06-100-rgb: 233, 205, 204;--e-c-secondary-06-200: #c27673;--e-c-secondary-06-200-rgb: 194, 118, 115;--e-c-secondary-06-500: #910500;--e-c-secondary-06-500-rgb: 145, 5, 0;--e-c-secondary-06-700: #740400;--e-c-secondary-06-700-rgb: 116, 4, 0;--e-c-secondary-06-900: #5e0300;--e-c-secondary-06-900-rgb: 94, 3, 0;--e-c-mono-50: #f5f5f5;--e-c-mono-50-rgb: 245, 245, 245;--e-c-mono-100: #ececec;--e-c-mono-100-rgb: 236, 236, 236;--e-c-mono-200: #dddddd;--e-c-mono-200-rgb: 221, 221, 221;--e-c-mono-500: #b3b3b3;--e-c-mono-500-rgb: 179, 179, 179;--e-c-mono-700: #6b6b6b;--e-c-mono-700-rgb: 107, 107, 107;--e-c-mono-900: #333333;--e-c-mono-900-rgb: 51, 51, 51;--e-c-mono-00: #ffffff;--e-c-mono-00-rgb: 255, 255, 255;--e-c-signal-01-100: #b6e6cf;--e-c-signal-01-100-rgb: 182, 230, 207;--e-c-signal-01-500: #1aa764;--e-c-signal-01-500-rgb: 26, 167, 100;--e-c-signal-01-700: #0e6f41;--e-c-signal-01-700-rgb: 14, 111, 65;--e-c-signal-01-900: #004926;--e-c-signal-01-900-rgb: 0, 73, 38;--e-c-signal-02-100: #ffe2b6;--e-c-signal-02-100-rgb: 255, 226, 182;--e-c-signal-02-500: #ff9800;--e-c-signal-02-500-rgb: 255, 152, 0;--e-c-signal-02-700: #cc7a00;--e-c-signal-02-700-rgb: 204, 122, 0;--e-c-signal-02-900: #703600;--e-c-signal-02-900-rgb: 112, 54, 0;--e-c-signal-03-100: #ffb5c4;--e-c-signal-03-100-rgb: 255, 181, 196;--e-c-signal-03-500: #ff0c3e;--e-c-signal-03-500-rgb: 255, 12, 62;--e-c-signal-03-700: #b90d31;--e-c-signal-03-700-rgb: 185, 13, 49;--e-c-signal-03-900: #790019;--e-c-signal-03-900-rgb: 121, 0, 25;--e-space-1: 4px;--e-space-2: 8px;--e-space-3: 12px;--e-space-4: 16px;--e-space-5: 20px;--e-space-6: 24px;--e-space-7: 28px;--e-space-8: 32px;--e-space-9: 36px;--e-space-10: 40px;--e-space-11: 44px;--e-space-12: 48px;--e-space-14: 56px;--e-space-16: 64px;--e-space-20: 80px;--e-space-24: 96px;--e-space-28: 112px;--e-space-30: 120px;--e-space-32: 128px;--e-space-36: 144px;--e-space-40: 160px;--e-space-44: 176px;--e-space-48: 192px;--e-space-52: 208px;--e-space-56: 224px;--e-space-60: 240px;--e-space-64: 256px;--e-space-72: 288px;--e-space-80: 320px;--e-space-96: 384px;--e-space-0_5: 2px;--e-space-1_5: 6px;--e-space-2_5: 10px;--e-space-3_5: 14px;--e-type-font-body: Glober;--e-type-font-fallback: "Helvetica Neue", helvetica, arial, sans-serif;--e-type-font-base-size: 16px;--e-type-size-50: 12px;--e-type-size-100: 14px;--e-type-size-200: 16px;--e-type-size-300: 18px;--e-type-size-400: 20px;--e-type-size-500: 22px;--e-type-size-600: 26px;--e-type-size-700: 26px;--e-type-size-800: 32px;--e-type-size-900: 48px;--e-type-size-1000: 56px;--e-type-line-height-50: 1.5 ;--e-type-line-height-100: calc(22 / 14);--e-type-line-height-200: 1.5 ;--e-type-line-height-300: calc(28 / 18);--e-type-line-height-400: 1.3 ;--e-type-line-height-500: calc(30 / 22);--e-type-line-height-600: calc(36 / 26);--e-type-line-height-700: calc(34 / 26);--e-type-line-height-800: 1.1875 ;--e-type-line-height-900: 1.125 ;--e-type-line-height-1000: calc(62 / 56);--e-type-weight-weak: 400;--e-type-weight-strong: 700;--e-type-decoration-enhance: underline;--e-trs-duration-fastest: .1s;--e-trs-duration-faster: .2s;--e-trs-duration-fast: .4s;--e-trs-duration-slow: .6s;--e-trs-duration-slower: .8s;--e-trs-duration-slowest: 1s;--e-trs-easing-default: ease-in-out;--e-brd-radius-1: 4px;--e-brd-radius-2: 8px;--e-brd-radius-3: 12px;--e-brd-radius-4: 16px;--e-brd-radius-5: 20px;--e-brd-radius-6: 24px;--e-mq-breakpoint-xs: 480px;--e-mq-breakpoint-s: 520px;--e-mq-breakpoint-m: 740px;--e-mq-breakpoint-lg: 1020px;--e-mq-breakpoint-xl: 1240px;--e-mq-breakpoint-2xl: 1520px;--e-layout-site-width: 1680px;--e-layout-site-width-lg: 1020px;--e-layout-site-width-m: 740px;--e-layout-site-width-s: 520px;--e-layout-grid-columns: 12;--e-elevation-xs: 0px 1px 2px rgba(0, 0, 0, .05);--e-elevation-sm: 0px 1px 3px rgba(0, 0, 0, .1), 0px 1px 2px -1px rgba(0, 0, 0, .1);--e-elevation-md: 0px 4px 6px -1px rgba(0, 0, 0, .1), 0px 2px 4px -2px rgba(0, 0, 0, .1);--e-elevation-lg: 0px 10px 15px -3px rgba(0, 0, 0, .1), 0px 4px 6px -4px rgba(0, 0, 0, .1);--e-elevation-xl: 0px 20px 25px -5px rgba(0, 0, 0, .1), 0px 8px 10px -6px rgba(0, 0, 0, .1);--e-elevation-2xl: 0px 25px 50px -12px rgba(0, 0, 0, .25)}e-button:not(:defined),e-icon-button:not(:defined),e-icon:not(:defined),e-loader:not(:defined){opacity:0}
+*/body{margin:0;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;font-size:unset;font-weight:unset}p,figure,blockquote{margin:0}button{padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:inherit;background:none}ul,ol{list-style:none;padding:0;margin:0}dl,dt,dd{margin:0}address{font-style:normal}img,picture{max-width:100%;display:block}fieldset{padding:0;margin:0;border:0}input,textarea,select{font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;margin:0}input,select,textarea{font-size:var(--e-type-size-200);line-height:var(--e-type-line-height-200);letter-spacing:.01875rem}input::-moz-placeholder{color:var(--e-c-mono-700)}input::placeholder{color:var(--e-c-mono-700)}input:disabled::-moz-placeholder{color:var(--e-c-mono-500)}input:disabled::placeholder{color:var(--e-c-mono-500)}[type=search]::-webkit-search-cancel-button{display:none}[type=date]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}select:invalid{color:var(--e-c-mono-700)}textarea{resize:vertical}html{box-sizing:border-box;scroll-behavior:smooth;min-height:100vh}*,*:before,*:after{box-sizing:inherit}body{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)}*{outline:none}*:focus-visible{outline-style:solid;outline-offset:4px;outline-color:#b3b3b3cc}[data-whatintent=mouse] *:focus{outline:none}@font-face{font-family:Glober;font-weight:400;font-style:normal;font-display:swap;src:url(/static/ui-assets/fonts/Glober/Glober-Regular/font.woff2) format("woff2"),url(/static/ui-assets/fonts/Glober/Glober-Regular/font.woff) format("woff")}@font-face{font-family:Glober;font-weight:700;font-style:normal;font-display:swap;src:url(/static/ui-assets/fonts/Glober/Glober-Bold/font.woff2) format("woff2"),url(/static/ui-assets/fonts/Glober/Glober-Bold/font.woff) format("woff")}:root{--e-c-primary-01-50: #edf6e9;--e-c-primary-01-50-rgb: 237, 246, 233;--e-c-primary-01-100: #dbedd4;--e-c-primary-01-100-rgb: 219, 237, 212;--e-c-primary-01-200: #9cce89;--e-c-primary-01-200-rgb: 156, 206, 137;--e-c-primary-01-500: #4ba528;--e-c-primary-01-500-rgb: 75, 165, 40;--e-c-primary-01-700: #3c8420;--e-c-primary-01-700-rgb: 60, 132, 32;--e-c-primary-01-900: #316b1a;--e-c-primary-01-900-rgb: 49, 107, 26;--e-c-secondary-01-50: #e5f2eb;--e-c-secondary-01-50-rgb: 229, 242, 235;--e-c-secondary-01-100: #cce5d8;--e-c-secondary-01-100-rgb: 204, 229, 216;--e-c-secondary-01-200: #73b894;--e-c-secondary-01-200-rgb: 115, 184, 148;--e-c-secondary-01-500: #007d3c;--e-c-secondary-01-500-rgb: 0, 125, 60;--e-c-secondary-01-700: #006430;--e-c-secondary-01-700-rgb: 0, 100, 48;--e-c-secondary-01-900: #005127;--e-c-secondary-01-900-rgb: 0, 81, 39;--e-c-secondary-02-50: #ede9ee;--e-c-secondary-02-50-rgb: 237, 233, 238;--e-c-secondary-02-100: #dcd3de;--e-c-secondary-02-100-rgb: 220, 211, 222;--e-c-secondary-02-200: #9f86a4;--e-c-secondary-02-200-rgb: 159, 134, 164;--e-c-secondary-02-500: #50235a;--e-c-secondary-02-500-rgb: 80, 35, 90;--e-c-secondary-02-700: #401c48;--e-c-secondary-02-700-rgb: 64, 28, 72;--e-c-secondary-02-900: #34173b;--e-c-secondary-02-900-rgb: 52, 23, 59;--e-c-secondary-03-50: #f8e7ed;--e-c-secondary-03-50-rgb: 248, 231, 237;--e-c-secondary-03-100: #f1cfdb;--e-c-secondary-03-100-rgb: 241, 207, 219;--e-c-secondary-03-200: #d97b9c;--e-c-secondary-03-200-rgb: 217, 123, 156;--e-c-secondary-03-500: #b90f4b;--e-c-secondary-03-500-rgb: 185, 15, 75;--e-c-secondary-03-700: #940c3c;--e-c-secondary-03-700-rgb: 148, 12, 60;--e-c-secondary-03-900: #780a31;--e-c-secondary-03-900-rgb: 120, 10, 49;--e-c-secondary-04-50: #fffbe5;--e-c-secondary-04-50-rgb: 255, 251, 229;--e-c-secondary-04-100: #fff7cc;--e-c-secondary-04-100-rgb: 255, 247, 204;--e-c-secondary-04-200: #ffe973;--e-c-secondary-04-200-rgb: 255, 233, 115;--e-c-secondary-04-500: #ffd700;--e-c-secondary-04-500-rgb: 255, 215, 0;--e-c-secondary-04-700: #ccac00;--e-c-secondary-04-700-rgb: 204, 172, 0;--e-c-secondary-04-900: #a68c00;--e-c-secondary-04-900-rgb: 166, 140, 0;--e-c-secondary-05-50: #e5f5fc;--e-c-secondary-05-50-rgb: 229, 245, 252;--e-c-secondary-05-100: #cceaf8;--e-c-secondary-05-100-rgb: 204, 234, 248;--e-c-secondary-05-200: #73c5ec;--e-c-secondary-05-200-rgb: 115, 197, 236;--e-c-secondary-05-500: #0096dc;--e-c-secondary-05-500-rgb: 0, 150, 220;--e-c-secondary-05-700: #0078b0;--e-c-secondary-05-700-rgb: 0, 120, 176;--e-c-secondary-05-900: #00618f;--e-c-secondary-05-900-rgb: 0, 97, 143;--e-c-secondary-06-50: #f4e6e5;--e-c-secondary-06-50-rgb: 244, 230, 229;--e-c-secondary-06-100: #e9cdcc;--e-c-secondary-06-100-rgb: 233, 205, 204;--e-c-secondary-06-200: #c27673;--e-c-secondary-06-200-rgb: 194, 118, 115;--e-c-secondary-06-500: #910500;--e-c-secondary-06-500-rgb: 145, 5, 0;--e-c-secondary-06-700: #740400;--e-c-secondary-06-700-rgb: 116, 4, 0;--e-c-secondary-06-900: #5e0300;--e-c-secondary-06-900-rgb: 94, 3, 0;--e-c-mono-50: #f5f5f5;--e-c-mono-50-rgb: 245, 245, 245;--e-c-mono-100: #ececec;--e-c-mono-100-rgb: 236, 236, 236;--e-c-mono-200: #dddddd;--e-c-mono-200-rgb: 221, 221, 221;--e-c-mono-500: #b3b3b3;--e-c-mono-500-rgb: 179, 179, 179;--e-c-mono-700: #6b6b6b;--e-c-mono-700-rgb: 107, 107, 107;--e-c-mono-900: #333333;--e-c-mono-900-rgb: 51, 51, 51;--e-c-mono-00: #ffffff;--e-c-mono-00-rgb: 255, 255, 255;--e-c-signal-01-100: #b6e6cf;--e-c-signal-01-100-rgb: 182, 230, 207;--e-c-signal-01-500: #1aa764;--e-c-signal-01-500-rgb: 26, 167, 100;--e-c-signal-01-700: #0e6f41;--e-c-signal-01-700-rgb: 14, 111, 65;--e-c-signal-01-900: #004926;--e-c-signal-01-900-rgb: 0, 73, 38;--e-c-signal-02-100: #ffe2b6;--e-c-signal-02-100-rgb: 255, 226, 182;--e-c-signal-02-500: #ff9800;--e-c-signal-02-500-rgb: 255, 152, 0;--e-c-signal-02-700: #cc7a00;--e-c-signal-02-700-rgb: 204, 122, 0;--e-c-signal-02-900: #703600;--e-c-signal-02-900-rgb: 112, 54, 0;--e-c-signal-03-100: #ffb5c4;--e-c-signal-03-100-rgb: 255, 181, 196;--e-c-signal-03-500: #ff0c3e;--e-c-signal-03-500-rgb: 255, 12, 62;--e-c-signal-03-700: #b90d31;--e-c-signal-03-700-rgb: 185, 13, 49;--e-c-signal-03-900: #790019;--e-c-signal-03-900-rgb: 121, 0, 25;--e-space-1: 4px;--e-space-2: 8px;--e-space-3: 12px;--e-space-4: 16px;--e-space-5: 20px;--e-space-6: 24px;--e-space-7: 28px;--e-space-8: 32px;--e-space-9: 36px;--e-space-10: 40px;--e-space-11: 44px;--e-space-12: 48px;--e-space-14: 56px;--e-space-16: 64px;--e-space-20: 80px;--e-space-24: 96px;--e-space-28: 112px;--e-space-30: 120px;--e-space-32: 128px;--e-space-36: 144px;--e-space-40: 160px;--e-space-44: 176px;--e-space-48: 192px;--e-space-52: 208px;--e-space-56: 224px;--e-space-60: 240px;--e-space-64: 256px;--e-space-72: 288px;--e-space-80: 320px;--e-space-96: 384px;--e-space-0_5: 2px;--e-space-1_5: 6px;--e-space-2_5: 10px;--e-space-3_5: 14px;--e-type-font-body: Glober;--e-type-font-fallback: "Helvetica Neue", helvetica, arial, sans-serif;--e-type-font-base-size: 16px;--e-type-size-50: 12px;--e-type-size-100: 14px;--e-type-size-200: 16px;--e-type-size-300: 18px;--e-type-size-400: 20px;--e-type-size-500: 22px;--e-type-size-600: 26px;--e-type-size-700: 26px;--e-type-size-800: 32px;--e-type-size-900: 48px;--e-type-size-1000: 56px;--e-type-line-height-50: 1.5 ;--e-type-line-height-100: calc(22 / 14);--e-type-line-height-200: 1.5 ;--e-type-line-height-300: calc(28 / 18);--e-type-line-height-400: 1.3 ;--e-type-line-height-500: calc(30 / 22);--e-type-line-height-600: calc(36 / 26);--e-type-line-height-700: calc(34 / 26);--e-type-line-height-800: 1.1875 ;--e-type-line-height-900: 1.125 ;--e-type-line-height-1000: calc(62 / 56);--e-type-weight-weak: 400;--e-type-weight-strong: 700;--e-type-decoration-enhance: underline;--e-trs-duration-fastest: .1s;--e-trs-duration-faster: .2s;--e-trs-duration-fast: .4s;--e-trs-duration-slow: .6s;--e-trs-duration-slower: .8s;--e-trs-duration-slowest: 1s;--e-trs-easing-default: ease-in-out;--e-brd-radius-1: 4px;--e-brd-radius-2: 8px;--e-brd-radius-3: 12px;--e-brd-radius-4: 16px;--e-brd-radius-5: 20px;--e-brd-radius-6: 24px;--e-mq-breakpoint-xs: 480px;--e-mq-breakpoint-s: 520px;--e-mq-breakpoint-m: 740px;--e-mq-breakpoint-lg: 1020px;--e-mq-breakpoint-xl: 1240px;--e-mq-breakpoint-2xl: 1520px;--e-layout-site-width: 1680px;--e-layout-site-width-lg: 1020px;--e-layout-site-width-m: 740px;--e-layout-site-width-s: 520px;--e-layout-grid-columns: 12;--e-elevation-xs: 0px 1px 2px rgba(0, 0, 0, .05);--e-elevation-sm: 0px 1px 3px rgba(0, 0, 0, .1), 0px 1px 2px -1px rgba(0, 0, 0, .1);--e-elevation-md: 0px 4px 6px -1px rgba(0, 0, 0, .1), 0px 2px 4px -2px rgba(0, 0, 0, .1);--e-elevation-lg: 0px 10px 15px -3px rgba(0, 0, 0, .1), 0px 4px 6px -4px rgba(0, 0, 0, .1);--e-elevation-xl: 0px 20px 25px -5px rgba(0, 0, 0, .1), 0px 8px 10px -6px rgba(0, 0, 0, .1);--e-elevation-2xl: 0px 25px 50px -12px rgba(0, 0, 0, .25)}e-button:not(:defined),e-icon-button:not(:defined),e-icon:not(:defined),e-loader:not(:defined){opacity:0}

package/dist/custom-elements.css

@@ -0,0 +1 @@
+.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)}