@flitsmeister/design-system 2.2.35 → 3.0.0

package/tokens/schema_exports/safedrive/safedrive.xml

@@ -1,248 +0,0 @@
-<resources>
-  <color name="shape_padding_padding_xl4">64</color>
-  <color name="shape_padding_padding_xl3">48</color>
-  <color name="shape_padding_padding_xl2">40</color>
-  <color name="shape_padding_padding_xl">32</color>
-  <color name="shape_padding_padding_lg">24</color>
-  <color name="shape_padding_padding_md">16</color>
-  <color name="shape_padding_padding_sm">12</color>
-  <color name="shape_padding_padding_xs">8</color>
-  <color name="shape_padding_padding_xs2">4</color>
-  <color name="shape_padding_padding_xs3">2</color>
-  <color name="shape_padding_padding_nudge">1</color>
-  <color name="shape_padding_padding_none">0</color>
-  <color name="shape_size_size_xl4">96</color>
-  <color name="shape_size_size_xl3">80</color>
-  <color name="shape_size_size_xl2">64</color>
-  <color name="shape_size_size_xl">48</color>
-  <color name="shape_size_size_lg">40</color>
-  <color name="shape_size_size_md">32</color>
-  <color name="shape_size_size_sm">24</color>
-  <color name="shape_size_size_xs">20</color>
-  <color name="shape_size_size_xs2">16</color>
-  <color name="shape_size_size_xs3">8</color>
-  <color name="shape_radius_radius_round">9001</color>
-  <color name="shape_radius_radius_xl4">64</color>
-  <color name="shape_radius_radius_xl3">48</color>
-  <color name="shape_radius_radius_xl2">40</color>
-  <color name="shape_radius_radius_xl2_dark">32</color>
-  <color name="shape_radius_radius_xl">32</color>
-  <color name="shape_radius_radius_lg">24</color>
-  <color name="shape_radius_radius_md">16</color>
-  <color name="shape_radius_radius_sm">12</color>
-  <color name="shape_radius_radius_xs">8</color>
-  <color name="shape_radius_radius_xs2">4</color>
-  <color name="shape_radius_radius_xs3">2</color>
-  <color name="shape_radius_radius_none">0</color>
-  <color name="shape_radius_radius_fmx">26.600000381469727</color>
-  <color name="shape_radius_radius_fmx_dark">0</color>
-  <color name="shape_stroke_with_stroke_none">0</color>
-  <color name="shape_stroke_with_stroke_xs">1</color>
-  <color name="shape_stroke_with_stroke_sm">2</color>
-  <color name="shape_stroke_with_stroke_md">4</color>
-  <color name="shape_stroke_with_stroke_md_dark">3</color>
-  <color name="shape_stroke_with_stroke_lg">8</color>
-  <color name="shape_stroke_with_stroke_xl">16</color>
-  <color name="shape_spacing">0</color>
-  <color name="shape_button_height_button_height_sm">40</color>
-  <color name="shape_button_height_button_heigh_md">48</color>
-  <color name="shape_button_height_button_height_lg">60</color>
-  <color name="shape_button_height_button_height_xl">80</color>
-  <color name="shape_button_width_button_width_auto">auto</color>
-  <color name="shape_button_width_button_width_min">240</color>
-  <color name="shape_button_width_button_width_fill">fill</color>
-  <color name="color_surface_neutral_default_highest">#ffffff</color>
-  <color name="color_surface_neutral_default_highest_dark">#2b2f32</color>
-  <color name="color_surface_neutral_default_higher">#f0f1f2</color>
-  <color name="color_surface_neutral_default_higher_dark">#1d1f20</color>
-  <color name="color_surface_neutral_default">#e1e3e5</color>
-  <color name="color_surface_neutral_default_dark">#161616</color>
-  <color name="color_surface_neutral_default_lower">#2b2f32</color>
-  <color name="color_surface_neutral_default_lower_dark">#0d0d0d</color>
-  <color name="color_surface_neutral_default_lowest">#161616</color>
-  <color name="color_surface_neutral_default_lowest_dark">#000000</color>
-  <color name="color_surface_brand_default">#007fe8</color>
-  <color name="color_surface_brand_default_dark">#0086f5</color>
-  <color name="color_surface_brand_default_alt">#d0ebff</color>
-  <color name="color_surface_brand_default_alt_dark">#273744</color>
-  <color name="color_surface_brand_pro">#ae61fa</color>
-  <color name="color_surface_brand_pro_alt">#f3d9fa</color>
-  <color name="color_surface_brand_pro_alt_dark">#862e9c</color>
-  <color name="color_surface_brand_pro_plus">#724899</color>
-  <color name="color_surface_functional_danger">#f24d4d</color>
-  <color name="color_surface_functional_danger_dark">#fa4848</color>
-  <color name="color_surface_functional_danger_alt">#ffe3e3</color>
-  <color name="color_surface_functional_danger_alt_dark">#492728</color>
-  <color name="color_surface_functional_warning">#ff8b17</color>
-  <color name="color_surface_functional_warning_dark">#fe942a</color>
-  <color name="color_surface_functional_warning_alt">#ffbe17</color>
-  <color name="color_surface_functional_warning_alt_dark">#d9480f</color>
-  <color name="color_surface_functional_attention">#ffcc00</color>
-  <color name="color_surface_functional_attention_alt">#fff9db</color>
-  <color name="color_surface_functional_info">#386bff</color>
-  <color name="color_surface_functional_info_dark">#2e74ff</color>
-  <color name="color_surface_functional_info_alt">#dbe4ff</color>
-  <color name="color_surface_functional_info_alt_dark">#364fc7</color>
-  <color name="color_surface_functional_success">#39a049</color>
-  <color name="color_surface_functional_success_dark">#38a849</color>
-  <color name="color_surface_functional_succes_alt">#d3f9d8</color>
-  <color name="color_surface_functional_succes_alt_dark">#17401d</color>
-  <color name="color_surface_utility_default_higher_opac0">rgba(240, 241, 242, 0)</color>
-  <color name="color_surface_utility_default_higher_opac0_dark">rgba(29, 31, 32, 0)</color>
-  <color name="color_surface_utility_defautl_opac75">rgba(255, 255, 255, 0.75)</color>
-  <color name="color_surface_utility_defautl_opac75_dark">rgba(0, 0, 0, 0.75)</color>
-  <color name="color_surface_utility_defautl_opac30">rgba(255, 255, 255, 0.3)</color>
-  <color name="color_surface_utility_defautl_opac30_dark">rgba(0, 0, 0, 0.3)</color>
-  <color name="color_surface_utility_scrim_lighter">rgba(0, 0, 0, 0.1)</color>
-  <color name="color_surface_utility_scrim">rgba(0, 0, 0, 0.66)</color>
-  <color name="color_surface_utility_scrim_darker">rgba(0, 0, 0, 0.85)</color>
-  <color name="color_surface_utility_scrim_darker_dark">rgba(0, 0, 0, 0.66)</color>
-  <color name="color_content_neutral_default">#161616</color>
-  <color name="color_content_neutral_default_dark">#f0f1f2</color>
-  <color name="color_content_neutral_default_alt">#6a747b</color>
-  <color name="color_content_neutral_default_alt_dark">#aab1b6</color>
-  <color name="color_content_neutral_weak">#cbcfd2</color>
-  <color name="color_content_neutral_weak_dark">#6a747b</color>
-  <color name="color_content_neutral_label">#ffffff</color>
-  <color name="color_content_neutral_label_dark">#f0f1f2</color>
-  <color name="color_content_neutral_label_inverse">#161616</color>
-  <color name="color_content_neutral_label_inverse_dark">#000000</color>
-  <color name="color_content_brand_default">#007fe8</color>
-  <color name="color_content_brand_default_dark">#0086f5</color>
-  <color name="color_content_brand_pro">#ae61fa</color>
-  <color name="color_content_brand_pro_plus">#724899</color>
-  <color name="color_content_functional_warning">#ff8b17</color>
-  <color name="color_content_functional_warning_dark">#fe942a</color>
-  <color name="color_content_functional_info">#345cce</color>
-  <color name="color_content_functional_info_dark">#2e74ff</color>
-  <color name="color_content_functional_success">#39a049</color>
-  <color name="color_content_functional_success_dark">#38a849</color>
-  <color name="color_content_functional_danger">#f24d4d</color>
-  <color name="color_content_functional_danger_dark">#fa4848</color>
-  <color name="color_content_functional_attention">#ffcc00</color>
-  <color name="color_outline_neutral_default">rgba(0, 0, 0, 0.1)</color>
-  <color name="color_outline_neutral_default_dark">rgba(255, 255, 255, 0.1)</color>
-  <color name="color_outline_neutral_default_alt">rgba(0, 0, 0, 0.2)</color>
-  <color name="color_outline_neutral_default_alt_dark">rgba(255, 255, 255, 0.2)</color>
-  <color name="color_outline_neutral_stronger">rgba(0, 0, 0, 0.3)</color>
-  <color name="color_outline_neutral_stronger_dark">rgba(255, 255, 255, 0.3)</color>
-  <color name="color_outline_neutral_strongest">#161616</color>
-  <color name="color_outline_neutral_strongest_dark">#f0f1f2</color>
-  <color name="color_outline_neutral_inverted">rgba(255, 255, 255, 0.1)</color>
-  <color name="color_outline_neutral_inverted_dark">rgba(0, 0, 0, 0.1)</color>
-  <color name="color_outline_neutral_inverted_strong">#ffffff</color>
-  <color name="color_outline_neutral_inverted_strong_dark">#000000</color>
-  <color name="color_outline_neutral_pin">rgba(0, 0, 0, 0.1)</color>
-  <color name="color_outline_brand_default">#007fe8</color>
-  <color name="color_outline_brand_default_dark">#0086f5</color>
-  <color name="color_outline_functional_danger">#f24d4d</color>
-  <color name="color_outline_functional_danger_dark">#fa4848</color>
-  <color name="color_outline_functional_danger_alt">#c92a2a</color>
-  <color name="color_outline_functional_warning">#ff8b17</color>
-  <color name="color_outline_functional_warning_dark">#fe942a</color>
-  <color name="color_outline_functional_warning_alt">#e8590c</color>
-  <color name="color_outline_functional_success">#39a049</color>
-  <color name="color_outline_functional_success_dark">#38a849</color>
-  <color name="color_outline_functional_informative">#345cce</color>
-  <color name="color_outline_functional_informative_dark">#2e74ff</color>
-  <color name="color_outline_functional_avg_speed_check">#364fc7</color>
-  <color name="color_special_feature_speedtrap">#007fe8</color>
-  <color name="color_special_feature_speedcam">#1eb3ff</color>
-  <color name="color_special_feature_avg_speed_check">#386bff</color>
-  <color name="color_special_feature_avg_speed_check_dark">#2e74ff</color>
-  <color name="color_special_feature_parking">#066cbf</color>
-  <color name="color_special_feature_parking_alt">#adcbe4</color>
-  <color name="color_special_feature_parking_alt_dark">#273744</color>
-  <color name="color_special_feature_police">#0c469e</color>
-  <color name="color_special_feature_firetruck">#c92a2a</color>
-  <color name="color_special_feature_ambulance">#ffeb12</color>
-  <color name="color_special_feature_emergency">#faff12</color>
-  <color name="color_special_feature_signal">#9fff53</color>
-  <color name="color_special_feature_default">#ffffff</color>
-  <color name="color_special_feature_default_dark">#40464a</color>
-  <color name="color_special_feature_trafficcam">#e1e3e5</color>
-  <color name="color_special_feature_trafficcam_dark">#40464a</color>
-  <color name="color_special_feature_tol">#40464a</color>
-  <color name="color_special_feature_tol_dark">#6a747b</color>
-  <color name="color_special_gradient_gerrit_start">#c2d84d</color>
-  <color name="color_special_gradient_gerrit_end">#7db527</color>
-  <color name="color_special_gradient_pro_start">#ae40f2</color>
-  <color name="color_special_gradient_pro_end">#4f19e9</color>
-  <color name="color_special_road_default">#40464a</color>
-  <color name="color_special_road_default_dark">#6a747b</color>
-  <color name="color_special_road_avg_speed_check">#386bff</color>
-  <color name="color_special_road_avg_speed_check_dark">#2e74ff</color>
-  <color name="color_special_road_avg_speed_check_alt">#364fc7</color>
-  <color name="color_special_road_danger">#f24d4d</color>
-  <color name="color_special_road_danger_dark">#fa4848</color>
-  <color name="color_special_road_danger_alt">#c92a2a</color>
-  <color name="color_special_road_warning">#ff8b17</color>
-  <color name="color_special_road_warning_dark">#fe942a</color>
-  <color name="color_special_road_warning_alt">#e8590c</color>
-  <color name="color_special_road_route">#1eb3ff</color>
-  <color name="color_special_road_route_alt">#007fe8</color>
-  <color name="color_special_road_route_alt_dark">#0086f5</color>
-  <color name="color_special_road_route_weak">#aab1b6</color>
-  <color name="color_special_road_route_weak_dark">#6a747b</color>
-  <color name="color_special_road_route_weak_alt">#6a747b</color>
-  <color name="color_special_road_route_weak_alt_dark">#40464a</color>
-  <color name="color_special_road_route_strong">#6a747b</color>
-  <color name="color_special_road_route_strong_dark">#aab1b6</color>
-  <color name="color_special_road_route_strong_alt">#40464a</color>
-  <color name="color_special_road_route_strong_alt_dark">#6a747b</color>
-  <color name="color_special_shadow_shadow_default">rgba(0, 0, 0, 0.15)</color>
-  <color name="color_special_shadow_shadow_default_dark">rgba(0, 0, 0, 0.3)</color>
-  <color name="color_system_black">#000000</color>
-  <color name="color_system_white">#ffffff</color>
-  <color name="color_system_dark">false</color>
-  <color name="color_system_dark_dark">true</color>
-  <color name="color_system_color">false</color>
-  <color name="color_system_color_dark">true</color>
-  <color name="color_system_show_dark">0</color>
-  <color name="color_system_show_dark_dark">100</color>
-  <color name="color_system_show_light">100</color>
-  <color name="color_system_show_light_dark">0</color>
-  <color name="color_system_theme">light</color>
-  <color name="color_system_theme_dark">dark</color>
-  <color name="color_system_utility01">#ff2cac</color>
-  <color name="color_system_utility02">#31daec</color>
-  <color name="color_system_utility03">#ffbe17</color>
-  <color name="color_system_utility04">#10ff7d</color>
-  <color name="modifiers_blur_sharpest">2</color>
-  <color name="modifiers_blur_sharpest_dark">0</color>
-  <color name="modifiers_blur_sharp">4</color>
-  <color name="modifiers_blur_sharp_dark">0</color>
-  <color name="modifiers_blur_default">8</color>
-  <color name="modifiers_blur_default_dark">0</color>
-  <color name="modifiers_blur_soft">16</color>
-  <color name="modifiers_blur_soft_dark">0</color>
-  <color name="modifiers_blur_softer">32</color>
-  <color name="modifiers_blur_softer_dark">0</color>
-  <color name="modifiers_timing_fastest">0.10000000149011612</color>
-  <color name="modifiers_timing_fastest_dark">0</color>
-  <color name="modifiers_timing_fast">0.20000000298023224</color>
-  <color name="modifiers_timing_fast_dark">0</color>
-  <color name="modifiers_timing_default">0.4000000059604645</color>
-  <color name="modifiers_timing_default_dark">0</color>
-  <color name="modifiers_timing_slow">0.6000000238418579</color>
-  <color name="modifiers_timing_slow_dark">0</color>
-  <color name="modifiers_timing_slowest">1</color>
-  <color name="modifiers_timing_slowest_dark">0</color>
-  <color name="modifiers_effects">0</color>
-  <color name="modifiers_opacity_faded">10</color>
-  <color name="modifiers_opacity_faded_dark">0</color>
-  <color name="modifiers_opacity_disabled">20</color>
-  <color name="modifiers_opacity_disabled_dark">0</color>
-  <color name="modifiers_opacity_default">66</color>
-  <color name="modifiers_opacity_default_dark">0</color>
-  <color name="modifiers_opacity_pressed">80</color>
-  <color name="modifiers_opacity_pressed_dark">0</color>
-  <color name="modifiers_opacity_solid">90</color>
-  <color name="modifiers_opacity_solid_dark">0</color>
-  <color name="modifiers_shadow_higher">10</color>
-  <color name="modifiers_shadow_higher_dark">0</color>
-  <color name="modifiers_shadow_default">8</color>
-  <color name="modifiers_shadow_default_dark">0</color>
-  <color name="modifiers_shadow_lower">4</color>
-  <color name="modifiers_shadow_lower_dark">0</color>
-</resources>

package/web/components/CookieConsent.vue

@@ -1,115 +0,0 @@
-<template>
-  <div 
-    class="cookie-settings z-10 transition-all duration-300 overflow-hidden shadow-lg border border-neutral-100 fixed flex flex-col gap-2 bottom-4 right-4 bg-white max-w-[360px] rounded-2xl px-4 py-3"
-    :class="{ 'translate-y-8 opacity-0 pointer-events-none': !settings.display }"
-  >
-    <span class="text-blue font-semibold">
-      {{ $t('cookies.title') }}
-    </span>
-    <div class="text-gray-800 text-sm font-light">
-      {{ $t('cookies.description') }}
-    </div>
-
-
-    <div v-if="settings.showAll === false" class="flex items-center gap-2 mt-2 w-full justify-evenly">
-      <button class="bg-blue text-sm text-white font-medium py-2 rounded-xl w-full" @click="toggleSetting('display')">
-        {{ $t('cookies.refuse') }}
-      </button>
-      <button class="bg-blue text-sm text-white font-medium py-2 rounded-xl w-full" @click="toggleSetting('showAll')">
-        {{ $t('cookies.customize') }}
-      </button>
-      <button class="bg-blue text-sm text-white font-medium py-2 rounded-xl w-full" @click="saveSettings(true)">
-        {{ $t('cookies.accept') }}
-      </button>
-    </div>
-
-    <Transition name="slide-up">
-      <form v-if="settings.showAll" class="flex flex-col gap-2" @submit.prevent="saveSettings">
-        <PermissionToggle
-          :title="this.$i18n.t('cookies.permissionsections.essentials.title')"
-          :description="this.$i18n.t('cookies.permissionsections.essentials.description')"
-          :value="settings.essentials"
-          :onToggle="() => toggleSetting('essentials')"
-        />
-        <PermissionToggle
-          :title="this.$i18n.t('cookies.permissionsections.preferences.title')"
-          :description="this.$i18n.t('cookies.permissionsections.preferences.description')"
-          :value="settings.preferences"
-          :onToggle="() => toggleSetting('preferences')"
-        />
-        <PermissionToggle
-          :title="this.$i18n.t('cookies.permissionsections.analytics.title')"
-          :description="this.$i18n.t('cookies.permissionsections.analytics.description')"
-          :value="settings.analytics"
-          :onToggle="() => toggleSetting('analytics')"
-        />
-        <PermissionToggle
-          :title="this.$i18n.t('cookies.permissionsections.marketing.title')"
-          :description="this.$i18n.t('cookies.permissionsections.marketing.description')"
-          :value="settings.marketing"
-          :onToggle="() => toggleSetting('marketing')"
-        />
-        <button type="submit" class="bg-blue text-white font-semibold py-2 px-4 rounded" @click="() => saveSettings">
-          {{ $t('cookies.save') }}
-        </button>
-      </form>
-    </Transition>
-
-  </div>
-</template>
-
-<script>
-  import { mapState, mapActions } from 'vuex';
-  import PermissionToggle from './PermissionToggle.vue';
-
-  export default {
-    components: {
-      PermissionToggle,
-    },
-    computed: {
-      ...mapState({
-        settings: (state) => state.cookieSettings,
-      }),
-    },
-    methods: {
-      ...mapActions(['toggleSetting', 'saveCookieSettings']),
-      async saveSettings(acceptAll = false) {
-        if (acceptAll === true) {
-          await this.toggleSetting({key: 'analytics',   value: true});
-          await this.toggleSetting({key: 'marketing',   value: true});
-          await this.toggleSetting({key: 'preferences', value: true});
-        }
-        
-        await this.toggleSetting({key: 'display', value: false});
-        await this.saveCookieSettings(this.settings);
-        this.updateGTMConsent(this.settings);
-      },
-      updateGTMConsent(settings) {
-        gtag('consent', 'update', {
-          'functionality_storage':    settings.essentials   ? 'granted' : 'denied',
-          'security_storage':         settings.essentials   ? 'granted' : 'denied',
-          'personalization_storage':  settings.preferences  ? 'granted' : 'denied',
-          'analytics_storage':        settings.analytics    ? 'granted' : 'denied',
-          'ad_storage':               settings.marketing    ? 'granted' : 'denied',
-          'ad_user_data':             settings.marketing    ? 'granted' : 'denied',
-          'ad_personalization':       settings.marketing    ? 'granted' : 'denied'
-        });
-      },
-    },
-  };
-</script>
-
-<style scoped>
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    transition: all 0.5s ease;
-    transform-origin: top;
-    max-height: 550px;
-  }
-
-  .slide-up-enter-from,
-  .slide-up-leave-to {
-    transform: translateY(100%);
-    max-height: 42px;
-  }
-</style>

package/web/components/Flag.vue

@@ -1,47 +0,0 @@
-<template>
-  <img :src="flagSrc" :alt="countryCode" :class="sizeClass" v-if="flagSrc" />
-  <span v-else class="text-red-500">x</span>
-</template>
-
-<script>
-import { isoToCountryCode } from 'flagpack-core';
-
-export default {
-  props: {
-    countryCode: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: 'medium',
-      validator: value => ['s', 'm', 'l'].includes(value)
-    }
-  },
-  computed: {
-    flagSrc() {
-      try {
-        const alpha2Code = isoToCountryCode(this.countryCode.toUpperCase(), 'alpha2');
-        if (!alpha2Code) {
-          throw new Error(`No alpha2 code found for country code: ${this.countryCode}`);
-        }
-        return require(`flagpack-core/svg/${this.size[0]}/${alpha2Code}.svg`);
-      } catch (error) {
-        console.error(error.message);
-        return null;
-      }
-    },
-    sizeClass() {
-      return {
-        s: 'w-4 h-3',
-        m: 'w-5 h-4',
-        l: 'w-8 h-6'
-      }[this.size];
-    }
-  }
-};
-</script>
-
-<style scoped>
-/* Add any necessary styles here */
-</style>

package/web/components/Icon.vue

@@ -1,31 +0,0 @@
-<template>
-    <svg v-if="name" :class="iconClass">
-        <use :xlink:href="`#${name}`"></use>
-    </svg>
-</template>
-
-<script>
-export default {
-    name: 'Icon',
-    props: {
-        name: {
-            type: String,
-            required: true
-        },
-        iconClass: {
-            type: String,
-            default: ''
-        }
-    }
-};
-</script>
-
-<style scoped>
-    svg {
-        /* inherit parent element font size and color by default */
-        width: 1em;
-        height: 1em;
-        fill: currentColor;
-        display: inline-block;
-    }
-</style>

package/web/components/LanguageSwitcher.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="z-10 fixed top-4 right-4 bg-white px-4 py-3">
-    <div class="relative inline-block text-left">
-      <div>
-        <button @click="toggleDropdown" type="button" :title="languages[currentLanguage].name" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-2xl text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
-          <Flag :countryCode="(languages[currentLanguage].flagiso) ? languages[currentLanguage].flagiso : currentLanguage" size="m" class="inline-block mr-2 my-auto" />
-
-          <svg class="-mr-1 ml-3 mt-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-          </svg>
-        </button>
-      </div>
-
-      <div v-if="dropdownOpen" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
-        <div class="py-1" role="none">
-          <a v-for="(language, key) in languages" :key="key" @click="changeLanguage(key)" :title="language.name" class="text-gray-700 block px-4 py-2 text-sm font-normal cursor-pointer hover:bg-gray-100" role="menuitem" tabindex="-1">
-            <Flag :countryCode="(language.flagiso) ? language.flagiso : key" size="s" class="inline-block mr-2" />
-            {{ language.name }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Flag from './Flag.vue';
-
-export default {
-  components: {
-    Flag
-  },
-  data() {
-    return {
-      currentLanguage: this.$i18n.locale,
-      dropdownOpen: false,
-      languages: {
-        en: { name: 'English', flagiso: 'gb-ukm'  },
-        da: { name: 'Dansk', flagiso: 'dk' },
-        de: { name: 'Deutsch' },
-        fi: { name: 'Suomi' },
-        fr: { name: 'Français' },
-        nl: { name: 'Nederlands' },
-        no: { name: 'Norsk' },
-        pl: { name: 'Polski' },
-        sv: { name: 'Svenska' },
-        es: { name: 'Español' }
-      }
-    };
-  },
-  methods: {
-    toggleDropdown() {
-      this.dropdownOpen = !this.dropdownOpen;
-    },
-    changeLanguage(languageKey) {
-      this.currentLanguage = languageKey;
-      this.$i18n.locale = languageKey;
-      this.dropdownOpen = false;
-    },
-    handleClickOutside(event) {
-      if (!this.$el.contains(event.target)) {
-        this.dropdownOpen = false;
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.handleClickOutside);
-  },
-  beforeUnmount() {
-    document.removeEventListener('click', this.handleClickOutside);
-  }
-};
-</script>
-
-<style scoped>
-/* Add any necessary styles here */
-</style>

package/web/components/PermissionToggle.vue

@@ -1,49 +0,0 @@
-<template>
-  <div
-    class="flex flex-col gap-2 bg-gray-50 p-3 rounded-xl text-xs cursor-pointer"
-    @click="handleToggle"
-  >
-    <div class="flex justify-between items-center">
-      <span class="text-blue font-semibold">{{ title }}</span>
-      <label class="inline-flex items-center cursor-pointer pointer-events-none">
-        <input
-          type="checkbox"
-          :checked="value"
-          class="sr-only peer"
-        />
-        <div class="relative w-7 h-4 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-300 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all dark:border-gray-600 peer-checked:bg-blue"></div>
-      </label>
-    </div>
-    <div class="text-gray-600">{{ description }}</div>
-  </div>
-</template>
-  
-<script>
-  export default {
-    props: {
-      title: {
-        type: String,
-        required: true
-      },
-      description: {
-        type: String,
-        required: true
-      },
-      value: {
-        type: Boolean,
-        required: true
-      },
-      onToggle: {
-        type: [Function, Promise],
-        required: false
-      }
-    },
-    methods: {
-      handleToggle() {
-        if (this.onToggle) this.onToggle();
-      }
-    }
-  };
-</script>
-  
- 

package/web/components/button-with-loader.vue

@@ -1,26 +0,0 @@
-<script>
-    const noop = () => {}
-    export default {
-        name: 'ButtonLoader',
-        props: ['label', 'loading', 'handler', 'email'],
-        computed: {
-            clickHandler: function() {
-                return this.handler || noop
-            }
-        }
-    }
-</script>
-<template>
-    <button class="font-bold cursor-pointer rounded-lg text-center p-3 flex justify-center" v-on:click="clickHandler">
-        <svg class="button_logo" v-if="email" width="24" height="21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 .5H3a3 3 0 00-3 3v14a3 3 0 003 3h18a3 3 0 003-3v-14a3 3 0 00-3-3zm-.3 4.8l-8 7c-.218.112-.456.18-.7.2a1.852 1.852 0 01-.7-.2l-8-7a.992.992 0 111.3-1.5l7.3 6.4 7.3-6.4a.972.972 0 011.4.1.9.9 0 01.1 1.4z" fill="#fff"/></svg>
-        <span v-if="!loading">{{ label }}</span>
-        <Loader v-if="loading" width="20px" height="20px"/>
-    </button>
-</template>
-
-<style scoped lang="scss">
-    button:disabled {
-        @apply text-gray-500;
-        cursor: auto;
-    }
-</style>