@energie360/ui-library 0.1.26 → 0.1.28

package/components/card-price-list/u-card-price-list.vue

@@ -26,7 +26,7 @@ defineProps<Props>()
 
         <span class="card-price-list__info">
           <UTooltip v-if="item.info" :title="item.info">
-            <UIcon name="info-circle"></UIcon>
+            <UIcon name="info-circle-filled"></UIcon>
           </UTooltip>
         </span>
       </dd>

package/components/definition-list/definition-list.scss

@@ -0,0 +1,5 @@
+.definition-list {
+  display: table;
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/components/definition-list/u-definition-list.vue

@@ -0,0 +1,7 @@
+<template>
+  <dd class="definition-list">
+    <slot />
+  </dd>
+</template>
+
+<style scoped lang="scss" src="./definition-list.scss"></style>

package/components/definition-list-item/definition-list-item.scss

@@ -0,0 +1,79 @@
+@use '../../base/abstracts' as a;
+
+.definition-list-item {
+  @include a.type(300);
+
+  display: table-row;
+
+  dt,
+  dd {
+    display: table-cell;
+    padding-bottom: var(--e-space-6);
+  }
+
+  dt {
+    @include a.type(300, strong);
+
+    padding-right: var(--e-space-10);
+    min-width: calc(220px + var(--e-space-10));
+  }
+
+  &:last-child {
+    dt,
+    dd {
+      padding-bottom: 0;
+    }
+  }
+
+  // Variants
+  &.small {
+    @include a.type(100);
+
+    dt,
+    dd {
+      padding-bottom: var(--e-space-4);
+    }
+
+    dt {
+      @include a.type(100, strong);
+    }
+  }
+
+  &.compact {
+    dt,
+    dd {
+      padding-bottom: var(--e-space-1);
+    }
+  }
+}
+
+@include a.bp(lg) {
+  .definition-list-item,
+  .definition-list-item.small {
+    @include a.type(200);
+
+    display: block;
+    padding-bottom: var(--e-space-6);
+
+    dt,
+    dd {
+      display: block;
+      padding-bottom: 0;
+    }
+
+    dt {
+      @include a.type(200, strong);
+
+      padding-bottom: var(--e-space-2);
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+
+      dt,
+      dd {
+        padding-bottom: var(--e-space-2);
+      }
+    }
+  }
+}

package/components/definition-list-item/u-definition-list-item.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+interface Props {
+  name?: string
+  value?: string
+  variant?: 'normal' | 'small'
+  compact?: boolean
+}
+
+const { name = '', value = '', variant = 'normal' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['definition-list-item', variant, { compact }]">
+    <dt>
+      <slot name="name">{{ name }}</slot>
+    </dt>
+
+    <dd>
+      <slot name="value">{{ value }}</slot>
+    </dd>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./definition-list-item.scss"></style>
+
+<style lang="scss">
+@use '../../elements/text-link/text-link' as t;
+@use '../../base/abstracts' as a;
+
+dd {
+  a {
+    @include t.text-link;
+
+    @include a.type(300);
+  }
+}
+
+.small {
+  dd {
+    a {
+      @include a.type(100);
+    }
+  }
+}
+
+@include a.bp(lg) {
+  dd a {
+    @include a.type(200);
+  }
+
+  .small {
+    dd a {
+      @include a.type(200);
+    }
+  }
+}
+</style>

package/components/download-list-item/u-download-list-item.vue

@@ -15,7 +15,7 @@ interface Props {
 const {
   visited,
   url = '',
-  data,
+  data = [],
   compact = false,
   headings = inject('headings', []),
 } = defineProps<Props>()
@@ -77,7 +77,7 @@ defineExpose({ click })
       >
       </component>
       <div class="download-list-item__icon-wrapper">
-        <UIcon name="mini-check" class="download-list-item__check" />
+        <UIcon name="check" class="download-list-item__check" />
 
         <svg
           class="download-list-item__download"

package/components/file-upload/u-file-upload.vue

@@ -212,7 +212,7 @@ const onRemoveError = (filename: string, lastModified: number) => {
     </div>
 
     <div v-if="maxFileCountError" class="file-upload__max-files-error">
-      <UIcon name="report" /> {{ getTranslation('maxFileCountAllowed', { $COUNT: 4 }) }}
+      <UIcon name="alert-octagon" /> {{ getTranslation('maxFileCountAllowed', { $COUNT: 4 }) }}
     </div>
   </div>
 </template>

package/components/index.js

@@ -68,3 +68,7 @@ export { default as USlider } from './slider/u-slider.vue'
 export { default as USpriteAnimation } from './sprite-animation/u-sprite-animation.vue'
 export { default as USliderProgressAnimation } from './slider-progress-animation/u-slider-progress-animation.vue'
 export { default as UStickyCta } from './sticky-cta/u-sticky-cta.vue'
+export { default as UNotificationItem } from './notification-item/u-notification-item.vue'
+export { default as UNotificationList } from './notification-list/u-notification-list.vue'
+export { default as UDefinitionList } from './definition-list/u-definition-list.vue'
+export { default as UDefinitionListItem } from './definition-list-item/u-definition-list-item.vue'

package/components/notification-item/notification-item.scss

@@ -0,0 +1,115 @@
+@use '../../base/abstracts' as a;
+
+.notification-item {
+  z-index: 1;
+  position: relative;
+  container-type: inline-size;
+  margin-bottom: -1px;
+}
+
+// Unread state
+.notification-item__inner {
+  padding: var(--e-space-4);
+  border-top: 1px solid var(--e-c-secondary-05-100);
+  border-bottom: 1px solid var(--e-c-secondary-05-100);
+  background-color: var(--e-c-secondary-05-50);
+  display: flex;
+  align-items: center;
+  transition: background-color a.$trs-default;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--e-c-secondary-05-100);
+  }
+
+  &:active {
+    background-color: var(--e-c-secondary-05-200);
+  }
+
+  @container (width < 740px) {
+    flex-wrap: wrap;
+    border-radius: var(--e-brd-radius-2);
+    border: 1px solid var(--e-c-secondary-05-100);
+    row-gap: var(--e-space-2);
+
+    .notification-item__text {
+      order: 1;
+      flex: 0 0 100%;
+      padding: 0;
+      margin-right: 0;
+    }
+
+    .notification-item__dot {
+      order: 2;
+    }
+
+    .notification-item__when {
+      padding: 3px 0;
+      order: 3;
+      margin-left: 0;
+    }
+
+    .notification-item__remove {
+      order: 4;
+      margin-left: auto;
+    }
+  }
+}
+
+// Read state
+.notification-item.read {
+  z-index: 0;
+
+  .notification-item__inner {
+    background-color: var(--e-c-mono-00);
+    border-color: var(--e-c-mono-100);
+
+    &:hover {
+      background-color: var(--e-c-primary-01-50);
+    }
+
+    &:active {
+      background-color: var(--e-c-primary-01-100);
+    }
+  }
+}
+
+.notification-item__text {
+  @include a.type(100);
+
+  margin-right: var(--e-space-2);
+  min-height: 24px;
+  padding: 1px 0;
+}
+
+.notification-item__dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  margin-right: var(--e-space-2);
+  background-color: var(--e-c-secondary-05-500);
+}
+
+.notification-item__when {
+  @include a.type(50);
+
+  white-space: nowrap;
+  color: var(--e-c-mono-700);
+  margin-left: auto;
+}
+
+.notification-item__remove {
+  cursor: pointer;
+  z-index: 1;
+  color: var(--e-c-primary-01-700);
+  margin-left: var(--e-space-6);
+
+  &:hover {
+    color: var(--e-c-secondary-01-900);
+  }
+}
+
+.visually-hidden {
+  @include a.visually-hidden;
+}

package/components/notification-item/u-notification-item.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { UIcon } from '../../elements'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props {
+  read: boolean
+  when: string
+  text?: string
+  removable: boolean
+}
+
+defineProps<Props>()
+const emits = defineEmits(['remove'])
+
+const onRemove = () => {
+  emits('remove')
+}
+</script>
+
+<template>
+  <div :class="['notification-item', { read, removable }]">
+    <div class="notification-item__inner">
+      <div v-if="!read" class="notification-item__dot"></div>
+
+      <div class="notification-item__text">
+        <slot><div v-html="text" /></slot>
+      </div>
+
+      <div class="notification-item__when">
+        {{ when }}
+      </div>
+
+      <div
+        v-if="removable"
+        class="notification-item__remove"
+        role="button"
+        @click.prevent.stop="onRemove"
+      >
+        <span class="visually-hidden">{{ getTranslation('removeNotification') }}</span>
+        <UIcon name="delete" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./notification-item.scss"></style>

package/components/notification-list/notification-list.scss

@@ -0,0 +1,37 @@
+@use '../../base/abstracts' as a;
+
+.notification-list {
+  container-type: inline-size;
+
+  &.is-empty {
+    // This vertical centered style only works in the portal-main layout.
+    // It's not really possible to do this "correctly" at the moment, because `portal-main__content` is `display: block`.
+    // With `display: flex` it would work, but this would need some refactoring.
+    position: relative;
+    top: 50%;
+    transform: translateY(-100%);
+  }
+}
+
+.notification-list__inner {
+  display: flex;
+  flex-direction: column;
+
+  @container (width < 740px) {
+    gap: var(--e-space-3);
+  }
+}
+
+.notification-list__empty-wrapper {
+  text-align: center;
+}
+
+.notification-list__empty_animation {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto var(--e-space-6);
+}
+
+.notification-list__empty-text {
+  @include a.type(300, strong);
+}

package/components/notification-list/u-notification-list.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+import { ref, onMounted, useTemplateRef } from 'vue'
+
+interface Props {
+  emptyText: string
+}
+
+defineProps<Props>()
+
+const innerEl = useTemplateRef('inner')
+const isEmpty = ref(false)
+const checkItems = () => {
+  const itemCount = innerEl.value.children.length
+
+  isEmpty.value = itemCount === 0
+}
+
+onMounted(() => {
+  checkItems()
+
+  const observer = new window.MutationObserver(() => {
+    checkItems()
+  })
+
+  observer.observe(innerEl.value, { childList: true, subtree: true })
+})
+</script>
+
+<template>
+  <div :class="['notification-list', { 'is-empty': isEmpty }]">
+    <div ref="inner" class="notification-list__inner">
+      <slot />
+    </div>
+
+    <div v-if="isEmpty" class="notification-list__empty-wrapper">
+      <div class="notification-list__empty_animation">
+        <DotLottieVue
+          autoplay
+          loop
+          src="/static/ui-assets/lottie/notification-empty.lottie"
+          style="height: 100%; width: 100%"
+        />
+      </div>
+
+      <p class="notification-list__empty-text">{{ emptyText }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./notification-list.scss"></style>

package/components/rating/u-rating.vue

@@ -47,7 +47,7 @@ const onDislike = () => {
 <template>
   <div class="rating">
     <button :class="['rating__button', 'up', { active: likeActive }]" type="button" @click="onLike">
-      <UIcon :name="likeActive ? 'thumbs-up-active' : 'thumbs-up'" />
+      <UIcon :name="likeActive ? 'thumbs-up-filled' : 'thumbs-up'" />
 
       <span class="visually-hidden">
         {{ likeText || getTranslation('like') }}
@@ -63,7 +63,7 @@ const onDislike = () => {
       type="button"
       @click="onDislike"
     >
-      <UIcon :name="dislikeActive ? 'thumbs-down-active' : 'thumbs-down'" />
+      <UIcon :name="dislikeActive ? 'thumbs-down-filled' : 'thumbs-down'" />
 
       <span class="visually-hidden">
         {{ dislikeText || getTranslation('dislike') }}

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

@@ -29,7 +29,7 @@ const {
 
     <div v-if="infoText" class="info-tooltip">
       <UTooltip :title="infoText">
-        <UIcon name="info"></UIcon>
+        <UIcon name="info-circle-filled"></UIcon>
       </UTooltip>
     </div>
   </div>

package/elements/numeric-stepper/u-numeric-stepper.vue

@@ -132,7 +132,7 @@ onMounted(() => {
       @click="onStepDown"
     >
       <span class="visually-hidden">{{ getTranslation('decreaseValue') }}</span>
-      <UIcon name="remove"></UIcon>
+      <UIcon name="minus"></UIcon>
     </button>
 
     <button
@@ -144,7 +144,7 @@ onMounted(() => {
       @click="onStepUp"
     >
       <span class="visually-hidden">{{ getTranslation('increaseValue') }}</span>
-      <UIcon name="add"></UIcon>
+      <UIcon name="plus"></UIcon>
     </button>
   </div>
 

package/elements/select-chip/u-select-chip.vue

@@ -31,7 +31,7 @@ const { onChange } = useRadio({ model, provideKey })
         { filled: model === value && !disabled, outlined: model !== value || disabled, disabled },
       ]"
     >
-      <UIcon v-if="model === value" name="mini-check" />
+      <UIcon v-if="model === value" name="check" />
       <slot name="label">
         {{ label }}
       </slot>

package/elements/select-chips/select-chips.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .select-chips {
   &.error {

package/elements/select-tile/select-tile.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 $transition-options: var(--e-trs-duration-faster) var(--e-trs-easing-default);
 $trs-pressed: var(--e-trs-duration-fastest) cubic-bezier(0.34, 1.56, 0.64, 1); // https://easings.net/#easeOutBack

package/elements/select-tile/u-select-tile.vue

@@ -50,4 +50,4 @@ const { onChange } = useRadio({ model, provideKey })
   </label>
 </template>
 
-<style scoped style="scss" src="./select-tile.scss"></style>
+<style scoped lang="scss" src="./select-tile.scss"></style>

package/elements/toggle-switch/u-toggle-switch.vue

@@ -26,7 +26,7 @@ const model = defineModel<boolean>({ default: false })
 
 const iconsMap = {
   small: ['close-small', 'check-small'],
-  big: ['close', 'mini-check'],
+  big: ['close', 'check'],
 }
 
 const uncheckIcon = computed(() => iconsMap[variant][0])

package/i18n/i18n.ts

@@ -23,6 +23,7 @@ const translations = {
     download: 'Herunterladen',
     like: 'Gefällt mir',
     dislike: 'Gefällt mir nicht',
+    removeNotification: 'Benachrichtigung entfernen',
   },
   FR: {
     yes: 'Ja',
@@ -48,6 +49,7 @@ const translations = {
     download: 'Télécharger',
     like: "J'aime ça",
     dislike: "je ne l'aime pas",
+    removeNotification: 'supprimer la notification',
   },
   IT: {
     yes: 'Ja',
@@ -73,6 +75,7 @@ const translations = {
     download: 'scaricamento',
     like: 'Mi piace',
     dislike: 'Non mi piace',
+    removeNotification: 'rimuovere la notifica',
   },
   EN: {
     yes: 'Ja',
@@ -98,6 +101,7 @@ const translations = {
     download: 'Download',
     like: 'I like it',
     dislike: 'I do not like it',
+    removeNotification: 'remove notification',
   },
 }
 

package/layout/index.js

@@ -4,3 +4,4 @@ export { default as UPortalContentAside } from './portal-content-aside/u-portal-
 export { default as UTileGrid } from './tile-grid/u-tile-grid.vue'
 export { default as UTileItem } from './tile-grid/u-tile-item.vue'
 export { default as UResponsiveContainer } from './responsive-container/u-responsive-container.vue'
+export { default as UPortalBlock } from './portal-block/u-portal-block.vue'

package/layout/portal-block/portal-block.scss

@@ -0,0 +1,8 @@
+.portal-block {
+  // default 'small'
+  margin-bottom: var(--e-space-6);
+
+  &.big {
+    margin-bottom: var(--e-space-10);
+  }
+}

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+interface Props {
+  big?: boolean
+  space?: 'small' | 'big'
+}
+
+const { space = 'small' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['portal-block', space]">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal-block.scss"></style>

package/layout/portal-main/portal-main.scss

@@ -81,6 +81,7 @@
 .portal-main__content {
   padding-top: var(--e-space-10);
   padding-bottom: var(--e-space-10);
+  flex: 1 1 100%;
 
   @include c.portal-content-container;
 

package/modules/content-title/content-title.scss

@@ -27,6 +27,10 @@
   @include a.type(500, strong);
 
   min-width: max-content;
+
+  @include a.bp(xl) {
+    min-width: auto;
+  }
 }
 
 .content-title__text {

package/modules/navigation-toolbar-side/navigation-toolbar-side.scss

@@ -15,7 +15,13 @@
     width: a.rem(88);
 
     .navigation-toolbar-side__logo {
-      width: a.rem(40);
+      .mini {
+        opacity: 1;
+      }
+
+      .large {
+        opacity: 0;
+      }
     }
 
     .navigation-toolbar-side__nav-links,
@@ -29,6 +35,11 @@
   width: a.rem(196);
   height: a.rem(40);
   margin-bottom: var(--e-space-12);
+
+  .mini {
+    position: absolute;
+    opacity: 0;
+  }
 }
 
 .navigation-toolbar-side__nav-links {
@@ -49,12 +60,6 @@
   width: 100%;
 }
 
-.navigation-toolbar-side__top-bar-logo {
-  img {
-    height: a.rem(24);
-  }
-}
-
 .navigation-toolbar-side__top-bar-ctas {
   display: flex;
   column-gap: var(--e-space-4);
@@ -62,28 +67,54 @@
 
 // Animation
 .navigation-toolbar-side {
+  --duration: var(--e-trs-duration-faster);
+
   &.is-collapsing {
     will-change: width;
-    transition: width var(--e-trs-duration-faster) var(--transition-ease-out);
+    transition: width var(--duration) var(--transition-ease-out);
     width: a.rem(88);
     overflow: hidden;
 
     .navigation-toolbar-side__nav-links,
     .navigation-toolbar-side__menu-ctas {
-      transition: padding var(--e-trs-duration-faster) var(--transition-ease-out);
+      transition: padding var(--duration) var(--transition-ease-out);
       padding: 0 var(--e-space-0_5);
     }
+
+    .navigation-toolbar-side__logo {
+      .mini {
+        opacity: 1;
+        transition: opacity var(--duration) var(--transition-ease-out);
+      }
+
+      .large {
+        opacity: 0;
+        transition: opacity var(--duration) var(--transition-ease-out);
+      }
+    }
   }
 
   &.is-expanding {
     will-change: width;
-    transition: all var(--e-trs-duration-faster) var(--transition-ease-out);
+    transition: all var(--duration) var(--transition-ease-out);
     width: var(--nav-width-expanded);
 
     .navigation-toolbar-side__nav-links,
     .navigation-toolbar-side__menu-ctas {
-      transition: padding var(--e-trs-duration-faster) var(--transition-ease-out);
+      transition: padding var(--duration) var(--transition-ease-out);
       padding: 0;
     }
+
+    .navigation-toolbar-side__logo {
+      .mini {
+        opacity: 0;
+        transition: opacity var(--duration) var(--transition-ease-out);
+      }
+
+      .large {
+        opacity: 1;
+        transition: opacity var(--duration) var(--transition-ease-out);
+      }
+    }
   }
 }

package/modules/navigation-toolbar-side/u-navigation-toolbar-side.vue

@@ -61,13 +61,16 @@ watch(
       },
     ]"
   >
-    <a class="navigation-toolbar-side__logo" :href="logoLink.href" :target="logoLink.target">
-      <img
-        v-if="isCollapsed || isExpanding"
-        :src="logoMinifiedImage.src"
-        :alt="logoMinifiedImage.alt"
-      />
-      <img v-else :src="logoImage.src" :alt="logoImage.alt" />
+    <a
+      :class="[
+        'navigation-toolbar-side__logo',
+        { 'is-collapsing': isCollapsing, 'is-expanding': isExpanding },
+      ]"
+      :href="logoLink.href"
+      :target="logoLink.target"
+    >
+      <img class="mini" :src="logoMinifiedImage.src" :alt="logoMinifiedImage.alt" />
+      <img class="large" :src="logoImage.src" :alt="logoImage.alt" />
     </a>
 
     <nav ref="mobile-panel" class="navigation-toolbar-side__nav-panel">

package/modules/search-filter/search-filter.scss

@@ -97,6 +97,17 @@
     }
   }
 
+  &.no-search {
+    display: flex;
+    width: 100%;
+
+    .search-filter__filter {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+  }
+
   @include mobile-filters;
 }
 

package/modules/search-filter/u-search-filter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useTemplateRef, onMounted } from 'vue'
+import { ref, useTemplateRef, onMounted, useSlots } from 'vue'
 import { UIconButton } from '../../elements'
 import { UBadge } from '../../components'
 
@@ -9,12 +9,16 @@ interface Props {
 
 defineProps<Props>()
 
+const slots = useSlots()
 const showFilters = ref(false)
 const filtersEl = useTemplateRef('filters')
 const filterCount = ref(0)
+const noSearch = ref(false)
 
 onMounted(() => {
   filterCount.value = filtersEl.value.children.length
+  noSearch.value = !slots.search
+  showFilters.value = noSearch.value === true
 })
 </script>
 
@@ -22,13 +26,17 @@ onMounted(() => {
   <div
     :class="[
       'search-filter',
-      { 'show-filters': showFilters, 'collapsed-desktop': filterCount + 1 >= 4 },
+      {
+        'show-filters': showFilters,
+        'collapsed-desktop': filterCount + 1 >= 4,
+        'no-search': noSearch,
+      },
     ]"
     :style="{
       '--field-count': filterCount + 1,
     }"
   >
-    <div class="search-filter__search">
+    <div v-if="!noSearch" class="search-filter__search">
       <slot name="search" />
 
       <div class="search-filter__filter-toggle">
@@ -52,3 +60,17 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss" src="./search-filter.scss"></style>
+
+<style lang="scss">
+@use '../../base/abstracts' as a;
+
+@include a.bp(m) {
+  .no-search {
+    .search-filter__filter {
+      .button {
+        width: fit-content;
+      }
+    }
+  }
+}
+</style>

package/modules/toast/u-toast-message.vue

@@ -13,7 +13,7 @@ const { id } = defineProps<Props>()
 
 enum MessageType {
   success = 'check-circle',
-  error = 'report',
+  error = 'alert-octagon',
 }
 
 const fadeIn = ref(false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -25,17 +25,17 @@
   "license": "MIT",
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^22.18.8",
+    "@types/node": "^22.19.0",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.22",
     "chokidar": "^4.0.3",
     "postcss": "^8.5.6",
-    "sass": "^1.93.2",
+    "sass": "^1.94.0",
     "typescript": "^5.9.3"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-vue": "^0.10.7",
     "@lottiefiles/lottie-player": "^2.0.12",
-    "swiper": "^11.2.10",
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {