@energie360/ui-library 0.0.3 → 0.1.0

package/elements/icon/icon.vue

@@ -5,7 +5,7 @@ import { assetsPath } from '../../globals.js'
 /**
  * Path prefix for icons.
  */
-const iconPath = assetsPath + '/icons/'
+const iconPath = assetsPath + 'icons/'
 
 /**
  * This map will hold all fetched icons. Should minimize unnecesary requests. It's just a cache.
@@ -13,7 +13,7 @@ const iconPath = assetsPath + '/icons/'
 const iconMap = new Map()
 
 /**
- * A simple (non-visible) placeholder, which will is used when an error happened or the icon couldn't be found.
+ * A simple (non-visible) placeholder, which is used when an error happened or the icon couldn't be found.
  */
 const svgPlaceholder = `
   <svg width="24" height="24"></svg>
@@ -50,6 +50,7 @@ const getIcon = (name) => {
       svgContent.value = text
     })
     .catch((err) => {
+      console.error(err)
       svgContent.value = svgPlaceholder
     })
 

package/elements/icon-button/icon-button.vue

@@ -20,7 +20,7 @@ defineProps({
       <Icon v-if="icon" :name="icon" />
 
       <span class="visually-hidden">
-        {{ label }}
+        <slot>{{ label }}</slot>
       </span>
     </a>
   </template>
@@ -30,7 +30,7 @@ defineProps({
       <Icon v-if="icon" :name="icon" />
 
       <span class="visually-hidden">
-        {{ label }}
+        <slot>{{ label }}</slot>
       </span>
     </button>
   </template>

package/elements/index.js

@@ -3,6 +3,28 @@ 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()
+ */
+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,

package/globals.js

@@ -1,4 +1,4 @@
 // A possible idea would be to use a cdn when the package is built.
 // Currently we'll use a fixed path for the assets on dev and prod. This must be made available by the application using ui-library.
 export const assetsPath =
-  import.meta.env.DEV === true ? '/static/ui-assets' : '/static/ui-assets'
+  import.meta.env.DEV === true ? '/static/ui-assets/' : '/static/ui-assets/'

package/layout/container/container.scss

@@ -0,0 +1,30 @@
+@use '../../base/abstracts' as a;
+@use '@energie360/design-tokens/dist/scss' as dt;
+
+// TODO: Move this mixin to abstratcs?
+@mixin grid-container {
+  margin: 0 auto;
+  max-width: a.rem(dt.$layout-site-width);
+  width: 100%;
+  padding-left: a.rem(a.$container-edge-2xl);
+  padding-right: a.rem(a.$container-edge-2xl);
+
+  @include a.bp(lg) {
+    padding-left: a.rem(a.$container-edge-lg);
+    padding-right: a.rem(a.$container-edge-lg);
+  }
+
+  @include a.bp(m) {
+    padding-left: a.rem(a.$container-edge-m);
+    padding-right: a.rem(a.$container-edge-m);
+  }
+
+  @include a.bp(s) {
+    padding-left: a.rem(a.$container-edge-s);
+    padding-right: a.rem(a.$container-edge-s);
+  }
+}
+
+.container {
+  @include grid-container;
+}

package/layout/grid/grid-row.scss

@@ -0,0 +1,10 @@
+@use 'sass:math';
+@use './grid.mixin' as g;
+
+.row {
+  @include g.grid-row;
+
+  &.row--centered {
+    justify-content: center;
+  }
+}

package/layout/grid/grid.mixin.scss

@@ -0,0 +1,90 @@
+@use 'sass:math';
+@use '../../base/abstracts' as a;
+
+/**
+Helper to colculate col width in %.
+Looks complicated because we use grid-gap on the row, which takes away from available width.
+ */
+@function col-width($size, $columns, $gutter) {
+  @return math.div(100% - (($columns - 1) * $gutter), $columns) * $size +
+    (($size - 1) * $gutter);
+}
+
+@mixin grid-row() {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: a.$grid-gutter-2xl;
+
+  @include a.bp(lg) {
+    grid-gap: a.$grid-gutter-lg;
+  }
+
+  @include a.bp(m) {
+    grid-gap: a.$grid-gutter-m;
+  }
+
+  @include a.bp(s) {
+    grid-gap: a.$grid-gutter-s;
+  }
+}
+
+/**
+Mixin to create a grid column cell.
+
+$cols: Column width of cell.
+$columns: Grid size (in columns). Default is set by global variable $grid-columns (defined via design token).
+ */
+@mixin grid-col($cols, $columns: a.$grid-columns) {
+  $width-2xl: col-width($cols, $columns, a.$grid-gutter-2xl);
+
+  flex: 0 0 $width-2xl;
+  max-width: $width-2xl;
+
+  @include a.bp(lg) {
+    $width-lg: col-width($cols, $columns, a.$grid-gutter-lg);
+
+    flex: 0 0 $width-lg;
+    max-width: $width-lg;
+  }
+
+  @include a.bp(m) {
+    $width-m: col-width($cols, $columns, a.$grid-gutter-m);
+
+    flex: 0 0 $width-m;
+    max-width: $width-m;
+  }
+
+  @include a.bp(s) {
+    $width-s: col-width($cols, $columns, a.$grid-gutter-s);
+
+    flex: 0 0 $width-s;
+    max-width: $width-s;
+  }
+}
+
+// TODO: Change args order -> $prop, $indent, $columns
+@mixin grid-col-space(
+  $indent,
+  $columns: a.$grid-columns,
+  $prop: 'margin-left'
+) {
+  #{$prop}: col-width($indent, $columns, a.$grid-gutter-2xl) +
+    a.$grid-gutter-2xl;
+
+  @include a.bp(lg) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-lg) +
+      a.$grid-gutter-lg;
+  }
+
+  @include a.bp(m) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-m) + a.$grid-gutter-m;
+  }
+
+  @include a.bp(s) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-s) + a.$grid-gutter-s;
+  }
+}
+
+@mixin grid-col-indent($indent, $columns: a.$grid-columns) {
+  @include grid-col-space($indent, $columns);
+}

package/layout/grid/grid.scss

@@ -0,0 +1,122 @@
+@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.
+// Obviously it will create classes that will probably never be used (CSS bloat).
+// We could be using only the grid-col mixins.
+// Or also define some commonly used responsive column configurations.
+// We'll have to figure it out...
+@for $i from 1 through a.$grid-columns {
+  .col-#{$i} {
+    @include grid-col($i);
+  }
+
+  @if ($i < a.$grid-columns) {
+    .col-indent-#{$i} {
+      @include grid-col-indent($i);
+    }
+  }
+}
+
+// For "2xl" breakpoint
+@include a.bp('2xl') {
+  @for $i from 1 through a.$grid-columns {
+    .col-2xl-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-2xl-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint xl
+    .col-indent-2xl-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "xl" breakpoint
+@include a.bp(xl) {
+  @for $i from 1 through a.$grid-columns {
+    .col-xl-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-xl-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint xl
+    .col-indent-xl-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "lg" breakpoint
+@include a.bp(lg) {
+  @for $i from 1 through a.$grid-columns {
+    .col-lg-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-lg-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint lg
+    .col-indent-lg-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "m" breakpoint
+@include a.bp(m) {
+  @for $i from 1 through a.$grid-columns {
+    .col-m-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-m-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint m
+    .col-indent-m-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "s" breakpoint
+@include a.bp(s) {
+  @for $i from 1 through a.$grid-columns {
+    .col-s-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if ($i < a.$grid-columns) {
+      .col-indent-s-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint s
+    .col-indent-s-0 {
+      margin-left: 0;
+    }
+  }
+}

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "",
   "main": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
-    "./style.css": "./dist/style.css",
-    "./elements/*": "./elements/*"
+    "./base-style.css": "./dist/base-style.css",
+    "./elements/*": "./elements/*",
+    "./components/*": "./components/*",
+    "./wizard/*": "./wizard/*"
   },
   "keywords": [],
   "author": "",

package/vite.config.js

@@ -9,7 +9,10 @@ export default defineConfig({
     cssCodeSplit: true,
     sourcemap: true,
     lib: {
-      entry: [resolve(__dirname, 'index.js'), resolve(__dirname, 'style.js')],
+      entry: [
+        resolve(__dirname, 'index.js'),
+        resolve(__dirname, 'base-style.js'),
+      ],
       name: '@energie360/ui-library',
       formats: ['es'],
       fileName: (format, entryName) => `${entryName}.js`,

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

@@ -0,0 +1,39 @@
+@use '../../base/abstracts' as a;
+
+.wizard-intro {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: var(--e-space-10);
+
+  @include a.bp(lg) {
+    row-gap: var(--e-space-12);
+    grid-template-columns: 1fr;
+  }
+}
+
+.left-col {
+  display: flex;
+  align-items: center;
+}
+
+.title-slot {
+  @include a.type(1000, strong);
+
+  @include a.bp(lg) {
+    @include a.type(800, strong);
+  }
+}
+
+.description-slot {
+  margin-top: var(--e-space-6);
+
+  @include a.type(300);
+
+  @include a.bp(m) {
+    @include a.type(200);
+  }
+}
+
+.cta-slot {
+  margin-top: var(--e-space-16);
+}

package/wizard/wizard-intro/wizard-intro.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  title: String,
+  description: String,
+  ctaText: String
+})
+</script>
+
+<template>
+  <div class="wizard-intro">
+    <div class="left-col">
+      <div>
+        <div class="title-slot">
+          <slot name="title"><h1>{{ title }}</h1></slot>
+        </div>
+
+        <div class="description-slot">
+          <slot name="description">
+            <p v-html="description"/>
+          </slot>
+        </div>
+
+        <div class="cta-slot">
+          <slot name="cta"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div class="right-col">
+      <slot name="content-right"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use './wizard-intro.scss';
+</style>

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

@@ -0,0 +1,45 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/grid/grid-row';
+@use '../../layout/grid/grid.mixin' as g;
+
+.wizard-layout-block + .wizard-layout-block {
+  margin-top: var(--e-wizard-block-bottom);
+}
+
+.wizard-layout-block {
+  .col-6 {
+    @include g.grid-col(6);
+
+    @include a.bp(xl) {
+      @include g.grid-col(8);
+    }
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-8 {
+    @include g.grid-col(8);
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-10 {
+    @include g.grid-col(10);
+
+    @include a.bp(lg) {
+      @include g.grid-col(8);
+    }
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-12 {
+    @include g.grid-col(12);
+  }
+}

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

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  columns: [Number, String],
+})
+</script>
+
+<template>
+  <div class="wizard-layout-block">
+    <div class="row row--centered">
+      <div :class="[`col-${columns}`]">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout-block.scss';
+</style>

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

@@ -0,0 +1,3 @@
+.wizard-layout-element + .wizard-layout-element {
+  margin-top: var(--e-wizard-block-between);
+}

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

@@ -0,0 +1,9 @@
+<template>
+  <div class="wizard-layout-element">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout-element.scss';
+</style>

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

@@ -0,0 +1,40 @@
+@use '@energie360/design-tokens/dist/scss/index' as dt;
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
+
+.container {
+  @include c.grid-container;
+
+  // TODO: Can we do this differently?
+  &.embedded {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.wizard-layout {
+  --e-wizard-wrapper-top: #{a.rem(dt.$space-28)};
+  --e-wizard-wrapper-bottom: #{a.rem(dt.$space-28)};
+  --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);
+
+  // Spacing rules
+  .wizard-layout-block + .wizard-layout-block {
+    margin-top: var(--e-wizard-block-bottom);
+  }
+
+  .wizard-layout-block {
+    .wizard-layout-element + .wizard-layout-element {
+      margin-top: var(--e-wizard-block-between);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+<template>
+  <div class="container">
+    <div class="wizard-layout">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout.scss';
+</style>

package/base/base-v2.scss

@@ -1,35 +0,0 @@
-/*
-Base styling and resets for all web-components.
-This must be loaded before all other styles.
-*/
-
-@use '@energie360/design-tokens/dist/css/design-tokens.css';
-@use 'resets';
-@use 'input-resets';
-@use 'focus-handling';
-@use '@energie360/design-tokens/dist/fonts/fonts.css';
-
-html {
-  box-sizing: border-box;
-  scroll-behavior: smooth;
-}
-
-html,
-body {
-  min-height: 100vh;
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: inherit;
-}
-
-body {
-  margin: 0;
-  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);
-}

package/base/index.scss

@@ -1,5 +0,0 @@
-@use './base';
-@use './resets';
-
-// TODO: _fonts.scss needs a variable '$host', which is set depedending on environment. figure it out how to get this here...
-// @import './fonts';

package/base/main.scss

@@ -1,14 +0,0 @@
-@use './resets';
-@use './html';
-@use './body';
-@use './focus-handling';
-@import '@energie360/design-tokens/dist/fonts/fonts.css';
-@import '@energie360/design-tokens/dist/css/design-tokens.css';
-
-e-button,
-e-icon-button,
-e-loader {
-  &:not(:defined) {
-    opacity: 0;
-  }
-}

package/dist/style.css

@@ -1,20 +0,0 @@
-@import"//hello.myfonts.net/count/3c2a64";/**
- * @license
- * MyFonts Webfont Build ID 3943012, 2020-09-02T07:30:46-0400
- *
- * The fonts listed in this notice are subject to the End User License
- * Agreement(s) entered into by the website owner. All other parties are
- * explicitly restricted from using the Licensed Webfonts(s).
- *
- * Webfont: Glober-Bold by Fontfabric
- * URL: https://www.myfonts.com/fonts/font-fabric/glober/bold/
- * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
- *
- *
- * Webfont: Glober-Regular by Fontfabric
- * URL: https://www.myfonts.com/fonts/font-fabric/glober/regular/
- * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
- *
- *
- * © 2020 MyFonts Inc
-*/@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)}body{margin:0;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance}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}e-button:not(:defined),e-icon-button:not(:defined),e-loader:not(:defined){opacity:0}

package/dist/style.js

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

package/dist/style.js.map

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