@club-employes/utopia 2.11.0 → 2.11.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 // Type definitions for @club-employes/utopia
-import { DefineComponent } from 'vue'
+import { ComputedRef, DefineComponent } from 'vue'
 
 // Component prop types
 export interface BadgeProps {
@@ -21,7 +21,10 @@ export interface IconProps {
 
 export interface LogoProps {
   variant?: 'auto' | 'default' | 'white' | 'small' | 'small-white'
-  size?: 'small' | 'medium' | 'large'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  brand?: 'club-employes' | 'gifteo'
+  alt?: string
+  class?: string
 }
 
 export interface ThemeConfig {
@@ -47,6 +50,32 @@ export declare const clubEmployesDark: ThemeConfig
 export declare const gifteoLight: ThemeConfig
 export declare const gifteoDark: ThemeConfig
 
+// Composable types
+export type BrandTheme = 'club-employes' | 'gifteo'
+export type ThemeMode = 'light' | 'dark'
+
+export interface UseThemeReturn {
+  currentTheme: ComputedRef<ThemeConfig>
+  currentBrand: ComputedRef<BrandTheme>
+  currentMode: ComputedRef<ThemeMode>
+  currentBrandName: ComputedRef<string>
+  availableBrands: ComputedRef<Array<{ key: BrandTheme; name: string }>>
+  toggleBrand: () => void
+  toggleMode: () => void
+  setBrand: (brand: BrandTheme) => void
+  setMode: (mode: ThemeMode) => void
+}
+
+export interface UseFaviconReturn {
+  faviconUrl: ComputedRef<string>
+  refreshFavicon: () => void
+  updateFavicon: (faviconUrl: string) => void
+}
+
+// Composable exports
+export declare function useTheme(): UseThemeReturn
+export declare function useFavicon(): UseFaviconReturn
+
 // Type exports
 export type BadgeVariant = 'default' | 'success' | 'warning' | 'danger'
 export type BadgeSize = 'small' | 'medium'
@@ -56,4 +85,5 @@ export type IconName = string
 export type IconSize = 'small' | 'medium' | 'large'
 export type IconColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral' | 'current'
 export type LogoVariant = 'auto' | 'default' | 'white' | 'small' | 'small-white'
-export type LogoSize = 'small' | 'medium' | 'large'
+export type LogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+export type LogoBrand = 'club-employes' | 'gifteo'

package/dist/index.js

@@ -1,73 +1,144 @@
-import { defineComponent as h, computed as d, provide as $, onMounted as w, onBeforeUnmount as C, watch as k, createElementBlock as l, openBlock as c, renderSlot as p, normalizeClass as f, mergeProps as z, createCommentVNode as v, createElementVNode as m, ref as B, normalizeStyle as _ } from "vue";
-const I = ["data-theme"], L = /* @__PURE__ */ h({
+import { defineComponent as w, computed as u, ref as C, provide as I, onMounted as z, onBeforeUnmount as L, watch as k, createElementBlock as g, openBlock as h, renderSlot as y, normalizeClass as $, mergeProps as D, createCommentVNode as T, createElementVNode as v, normalizeStyle as A, onUnmounted as F } from "vue";
+const P = (n, t, o) => {
+  const r = n[t];
+  return r ? typeof r == "function" ? r() : Promise.resolve(r) : new Promise((l, d) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(d.bind(null, /* @__PURE__ */ new Error("Unknown variable dynamic import: " + t + (t.split("/").length !== o ? ". Note that variables only represent file names one level deep." : ""))));
+  });
+}, j = ["data-theme"], x = /* @__PURE__ */ w({
   __name: "ThemeProvider",
   props: {
     theme: {}
   },
-  setup(r) {
-    const e = r, t = d(() => e.theme.name);
-    let o = null;
-    const n = () => {
-      o && document.head.removeChild(o), o = document.createElement("style"), o.setAttribute("data-theme-provider", t.value), o.textContent = e.theme.cssContent, document.head.appendChild(o);
-    }, i = () => {
-      o && document.head.contains(o) && (document.head.removeChild(o), o = null);
+  setup(n) {
+    const t = n, o = u(() => t.theme.name), r = /* @__PURE__ */ new Map(), l = C(!1), d = async (s) => {
+      if (r.has(s))
+        return r.get(s);
+      const c = s.lastIndexOf("-"), m = s.substring(0, c), p = s.substring(c + 1);
+      try {
+        const S = await P(/* @__PURE__ */ Object.assign({ "../tokens/generated/club-employes/dark.css": () => import("./dark-CJ1ivx_-.js"), "../tokens/generated/club-employes/light.css": () => import("./light-CXtMcqsV.js"), "../tokens/generated/gifteo/dark.css": () => import("./dark-CZ1KmhXy.js"), "../tokens/generated/gifteo/light.css": () => import("./light-BAFzIOTZ.js") }), `../tokens/generated/${m}/${p}.css`, 5), E = S.default || S;
+        return r.set(s, E), E;
+      } catch (S) {
+        return console.warn(`Failed to preload theme CSS for ${s}:`, S), "";
+      }
+    }, a = async () => {
+      if (!l.value) {
+        l.value = !0, console.log("🎨 Switching to theme:", o.value);
+        try {
+          const s = await d(o.value);
+          if (!s) {
+            console.warn("No CSS content found for theme:", o.value), l.value = !1;
+            return;
+          }
+          document.body.classList.add("theme-transition"), await new Promise((p) => setTimeout(p, 50)), document.querySelectorAll("style[data-theme-css]").forEach((p) => p.remove());
+          const m = document.createElement("style");
+          m.setAttribute("data-theme-css", "true"), m.textContent = s, document.head.appendChild(m), document.body.setAttribute("data-theme", o.value), setTimeout(() => {
+            document.body.classList.remove("theme-transition"), l.value = !1;
+          }, 300), console.log("✅ Theme CSS applied smoothly:", o.value);
+        } catch (s) {
+          console.warn("Failed to inject theme CSS:", s), document.body.classList.remove("theme-transition"), l.value = !1;
+        }
+      }
+    }, e = () => {
+      document.body.removeAttribute("data-theme");
+      const s = document.querySelector("style[data-theme-css]");
+      s && s.remove();
     };
-    return $("theme", {
-      name: t,
-      config: e.theme
-    }), w(() => {
-      n();
-    }), C(() => {
-      i();
-    }), k(() => e.theme, () => {
-      n();
-    }, { deep: !0 }), (s, a) => (c(), l("div", {
+    return I("theme", {
+      name: o,
+      config: t.theme
+    }), z(async () => {
+      const s = document.querySelector("style[data-default-theme]"), c = [
+        "club-employes-light",
+        "club-employes-dark",
+        "gifteo-light",
+        "gifteo-dark"
+      ];
+      if (Promise.all(
+        c.map((m) => d(m))
+      ).then(() => {
+        console.log("🚀 All themes preloaded in cache");
+      }), s && o.value === "club-employes-light") {
+        console.log("✅ Default theme already loaded, skipping initial injection");
+        return;
+      }
+      await a();
+    }), L(() => {
+      e();
+    }), k(() => t.theme, () => {
+      console.log("Theme changed to:", t.theme.name), a();
+    }, { deep: !0 }), (() => {
+      if (document.querySelector("style[data-theme-transitions]")) return;
+      const c = document.createElement("style");
+      c.setAttribute("data-theme-transitions", "true"), c.textContent = `
+    body.theme-transition {
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+    
+    body.theme-transition *,
+    body.theme-transition *::before,
+    body.theme-transition *::after {
+      transition: background-color 0.3s ease, 
+                  color 0.3s ease, 
+                  border-color 0.3s ease, 
+                  box-shadow 0.3s ease,
+                  fill 0.3s ease,
+                  stroke 0.3s ease !important;
+    }
+    
+    /* Désactiver les transitions sur les éléments interactifs pour éviter les lags */
+    body.theme-transition button:hover,
+    body.theme-transition a:hover,
+    body.theme-transition [role="button"]:hover {
+      transition: none !important;
+    }
+  `, document.head.appendChild(c);
+    })(), (s, c) => (h(), g("div", {
       class: "theme-provider",
-      "data-theme": t.value
+      "data-theme": o.value
     }, [
-      p(s.$slots, "default", {}, void 0, !0)
-    ], 8, I));
+      y(s.$slots, "default", {}, void 0, !0)
+    ], 8, j));
   }
-}), g = (r, e) => {
-  const t = r.__vccOpts || r;
-  for (const [o, n] of e)
-    t[o] = n;
-  return t;
-}, U = /* @__PURE__ */ g(L, [["__scopeId", "data-v-0be50703"]]), M = /* @__PURE__ */ h({
+}), B = (n, t) => {
+  const o = n.__vccOpts || n;
+  for (const [r, l] of t)
+    o[r] = l;
+  return o;
+}, ae = /* @__PURE__ */ B(x, [["__scopeId", "data-v-de954be9"]]), O = /* @__PURE__ */ w({
   __name: "Badge",
   props: {
     variant: { default: "default" },
     size: { default: "medium" }
   },
-  setup(r) {
-    const e = r, t = d(() => {
-      const o = {
+  setup(n) {
+    const t = n, o = u(() => {
+      const r = {
         small: "sm",
         medium: "md"
       };
       return [
         "badge",
-        `badge--${e.variant}`,
-        `badge--${o[e.size]}`
+        `badge--${t.variant}`,
+        `badge--${r[t.size]}`
       ];
     });
-    return (o, n) => (c(), l("span", {
-      class: f(t.value)
+    return (r, l) => (h(), g("span", {
+      class: $(o.value)
     }, [
-      p(o.$slots, "default", {}, void 0, !0)
+      y(r.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), q = /* @__PURE__ */ g(M, [["__scopeId", "data-v-2a8fca7d"]]), S = ["disabled", "aria-disabled", "aria-label"], E = {
+}), re = /* @__PURE__ */ B(O, [["__scopeId", "data-v-2a8fca7d"]]), q = ["disabled", "aria-disabled", "aria-label"], U = {
   key: 0,
   class: "button-spinner",
   "aria-hidden": "true"
-}, T = {
+}, N = {
   key: 0,
   class: "button-icon button-icon--before"
-}, F = { class: "button-text" }, N = {
+}, G = { class: "button-text" }, R = {
   key: 1,
   class: "button-icon button-icon--after"
-}, P = /* @__PURE__ */ h({
+}, V = /* @__PURE__ */ w({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -78,38 +149,38 @@ const I = ["data-theme"], L = /* @__PURE__ */ h({
     ariaLabel: {}
   },
   emits: ["click"],
-  setup(r, { emit: e }) {
-    const t = r, o = e, n = d(() => {
-      const s = {
+  setup(n, { emit: t }) {
+    const o = n, r = t, l = u(() => {
+      const a = {
         small: "sm",
         medium: "md",
         large: "lg"
       };
       return [
         "button",
-        `button--${t.variant}`,
-        `button--${s[t.size]}`,
+        `button--${o.variant}`,
+        `button--${a[o.size]}`,
         {
-          "button--disabled": t.disabled,
-          "button--loading": t.loading,
-          "button--block": t.block
+          "button--disabled": o.disabled,
+          "button--loading": o.loading,
+          "button--block": o.block
         }
       ];
-    }), i = (s) => {
-      !t.disabled && !t.loading && o("click", s);
+    }), d = (a) => {
+      !o.disabled && !o.loading && r("click", a);
     };
-    return (s, a) => (c(), l("button", z({
-      class: n.value,
-      disabled: s.disabled || s.loading,
-      "aria-disabled": s.disabled || s.loading,
-      "aria-label": s.ariaLabel
-    }, s.$attrs, { onClick: i }), [
-      s.loading ? (c(), l("span", E, a[0] || (a[0] = [
-        m("svg", {
+    return (a, e) => (h(), g("button", D({
+      class: l.value,
+      disabled: a.disabled || a.loading,
+      "aria-disabled": a.disabled || a.loading,
+      "aria-label": a.ariaLabel
+    }, a.$attrs, { onClick: d }), [
+      a.loading ? (h(), g("span", U, e[0] || (e[0] = [
+        v("svg", {
           class: "spinner-icon",
           viewBox: "0 0 24 24"
         }, [
-          m("circle", {
+          v("circle", {
             class: "spinner-path",
             cx: "12",
             cy: "12",
@@ -121,13 +192,13 @@ const I = ["data-theme"], L = /* @__PURE__ */ h({
             "stroke-dasharray": "31.416",
             "stroke-dashoffset": "31.416"
           }, [
-            m("animate", {
+            v("animate", {
               attributeName: "stroke-dasharray",
               dur: "2s",
               values: "0 31.416;15.708 15.708;0 31.416",
               repeatCount: "indefinite"
             }),
-            m("animate", {
+            v("animate", {
               attributeName: "stroke-dashoffset",
               dur: "2s",
               values: "0;-15.708;-31.416",
@@ -135,23 +206,23 @@ const I = ["data-theme"], L = /* @__PURE__ */ h({
             })
           ])
         ], -1)
-      ]))) : v("", !0),
-      m("span", {
-        class: f(["button-content", { "button-content--hidden": s.loading }])
+      ]))) : T("", !0),
+      v("span", {
+        class: $(["button-content", { "button-content--hidden": a.loading }])
       }, [
-        s.$slots.icon ? (c(), l("span", T, [
-          p(s.$slots, "icon", {}, void 0, !0)
-        ])) : v("", !0),
-        m("span", F, [
-          p(s.$slots, "default", {}, void 0, !0)
+        a.$slots.icon ? (h(), g("span", N, [
+          y(a.$slots, "icon", {}, void 0, !0)
+        ])) : T("", !0),
+        v("span", G, [
+          y(a.$slots, "default", {}, void 0, !0)
         ]),
-        s.$slots.iconAfter ? (c(), l("span", N, [
-          p(s.$slots, "iconAfter", {}, void 0, !0)
-        ])) : v("", !0)
+        a.$slots.iconAfter ? (h(), g("span", R, [
+          y(a.$slots, "iconAfter", {}, void 0, !0)
+        ])) : T("", !0)
       ], 2)
-    ], 16, S));
+    ], 16, q));
   }
-}), G = /* @__PURE__ */ g(P, [["__scopeId", "data-v-c5f4114b"]]), A = ["aria-label", "innerHTML"], D = /* @__PURE__ */ h({
+}), le = /* @__PURE__ */ B(V, [["__scopeId", "data-v-c5f4114b"]]), H = ["aria-label", "innerHTML"], W = /* @__PURE__ */ w({
   __name: "Icon",
   props: {
     name: {},
@@ -160,17 +231,17 @@ const I = ["data-theme"], L = /* @__PURE__ */ h({
     alt: {},
     class: {}
   },
-  setup(r) {
-    const e = r, t = B(""), o = d(() => [
+  setup(n) {
+    const t = n, o = C(""), r = u(() => [
       "icon",
       `icon--${{
         small: "sm",
         medium: "md",
         large: "lg"
-      }[e.size]}`,
-      `icon--${e.color}`,
-      e.class
-    ].filter(Boolean)), n = d(() => ({
+      }[t.size]}`,
+      `icon--${t.color}`,
+      t.class
+    ].filter(Boolean)), l = u(() => ({
       color: {
         primary: "var(--theme-colors-brand-primary-600)",
         secondary: "var(--theme-colors-brand-secondary-600)",
@@ -179,16 +250,16 @@ const I = ["data-theme"], L = /* @__PURE__ */ h({
         danger: "var(--theme-colors-common-danger-600)",
         neutral: "var(--theme-colors-common-slate-600)",
         current: "currentColor"
-      }[e.color]
-    })), i = async (a) => {
+      }[t.color]
+    })), d = async (e) => {
       try {
-        const u = `/src/assets/icons-processed/${a}.svg`, b = await fetch(u);
-        if (!b.ok)
-          throw new Error(`Icon not found: ${a}`);
-        const y = (await b.text()).replace(/width="[^"]*"/g, "").replace(/height="[^"]*"/g, "").replace(/<svg([^>]*)>/g, '<svg$1 width="100%" height="100%">');
-        t.value = y;
-      } catch (u) {
-        console.error(`Failed to load icon: ${a}`, u), t.value = `
+        const i = `/src/assets/icons-processed/${e}.svg`, s = await fetch(i);
+        if (!s.ok)
+          throw new Error(`Icon not found: ${e}`);
+        const m = (await s.text()).replace(/width="[^"]*"/g, "").replace(/height="[^"]*"/g, "").replace(/<svg([^>]*)>/g, '<svg$1 width="100%" height="100%">');
+        o.value = m;
+      } catch (i) {
+        console.error(`Failed to load icon: ${e}`, i), o.value = `
       <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
         <path d="M12 8v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -196,76 +267,167 @@ const I = ["data-theme"], L = /* @__PURE__ */ h({
       </svg>
     `;
       }
-    }, s = (a) => a.includes("/") && a.split("/").pop() || a;
-    return k(() => e.name, (a) => {
-      const u = s(a);
-      i(u);
-    }, { immediate: !0 }), (a, u) => (c(), l("span", {
-      class: f(o.value),
-      style: _(n.value),
-      "aria-label": a.alt || a.name,
+    }, a = (e) => e.includes("/") && e.split("/").pop() || e;
+    return k(() => t.name, (e) => {
+      const i = a(e);
+      d(i);
+    }, { immediate: !0 }), (e, i) => (h(), g("span", {
+      class: $(r.value),
+      style: A(l.value),
+      "aria-label": e.alt || e.name,
       role: "img",
-      innerHTML: t.value
-    }, null, 14, A));
+      innerHTML: o.value
+    }, null, 14, H));
   }
-}), J = /* @__PURE__ */ g(D, [["__scopeId", "data-v-8bcf9243"]]), H = ["aria-label"], V = /* @__PURE__ */ h({
+}), ie = /* @__PURE__ */ B(W, [["__scopeId", "data-v-8bcf9243"]]), K = ["aria-label"], ce = /* @__PURE__ */ w({
   __name: "Logo",
   props: {
+    brand: {},
     variant: { default: "auto" },
     size: { default: "md" },
-    alt: { default: "Logo" },
+    alt: {},
     class: {}
   },
-  setup(r) {
-    const e = r, t = d(() => [
-      "logo",
-      `logo--${e.size}`,
-      `logo--${e.variant}`,
-      e.class
-    ].filter(Boolean)), o = d(() => {
-      const n = {
-        auto: "--theme-assets-logo-default",
-        default: "--theme-assets-logo-default",
-        white: "--theme-assets-logo-white",
-        small: "--theme-assets-logo-small",
-        "small-white": "--theme-assets-logo-small-white"
-      };
-      return {
-        backgroundImage: `var(${e.variant === "auto" && (e.size === "xs" || e.size === "sm") ? "--theme-assets-logo-small" : n[e.variant]})`
-      };
-    });
-    return (n, i) => (c(), l("div", {
-      class: f(t.value),
-      style: _(o.value),
-      "aria-label": n.alt || "Logo",
+  setup(n) {
+    const t = n, o = u(() => {
+      const l = t.brand ? `logo--${t.brand}` : "logo--auto-brand";
+      return [
+        "logo",
+        `logo--${t.size}`,
+        `logo--${t.variant}`,
+        l,
+        t.class
+      ].filter(Boolean);
+    }), r = u(() => t.brand === "gifteo" ? "Gifteo" : t.brand === "club-employes" ? "Club Employés" : "Logo");
+    return (l, d) => (h(), g("div", {
+      class: $(o.value),
+      "aria-label": l.alt || `Logo ${r.value}`,
       role: "img"
-    }, null, 14, H));
+    }, null, 10, K));
   }
-}), K = /* @__PURE__ */ g(V, [["__scopeId", "data-v-9417ac59"]]), Q = {
+}), Y = {
   name: "club-employes-light",
-  mode: "light",
-  cssFile: "/src/tokens/generated/club-employes/light.css"
-}, R = {
+  mode: "light"
+}, J = {
   name: "club-employes-dark",
-  mode: "dark",
-  cssFile: "/src/tokens/generated/club-employes/dark.css"
-}, W = {
+  mode: "dark"
+}, Q = {
   name: "gifteo-light",
-  mode: "light",
-  cssFile: "/src/tokens/generated/gifteo/light.css"
+  mode: "light"
 }, X = {
   name: "gifteo-dark",
-  mode: "dark",
-  cssFile: "/src/tokens/generated/gifteo/dark.css"
+  mode: "dark"
+}, M = {
+  BRAND: "utopia-theme-brand",
+  MODE: "utopia-theme-mode"
+}, Z = () => {
+  if (typeof window > "u") return "club-employes";
+  const n = localStorage.getItem(M.BRAND);
+  return n === "club-employes" || n === "gifteo" ? n : "club-employes";
+}, ee = () => {
+  if (typeof window > "u") return "light";
+  const n = localStorage.getItem(M.MODE);
+  return n === "light" || n === "dark" ? n : "light";
+}, te = (n) => {
+  typeof window < "u" && localStorage.setItem(M.BRAND, n);
+}, oe = (n) => {
+  typeof window < "u" && localStorage.setItem(M.MODE, n);
+}, f = C(Z()), b = C(ee()), _ = {
+  "club-employes": {
+    light: Y,
+    dark: J,
+    name: "Club Employés"
+  },
+  gifteo: {
+    light: Q,
+    dark: X,
+    name: "Gifteo"
+  }
 };
+function ne() {
+  const n = u(() => _[f.value][b.value]), t = u(() => _[f.value].name);
+  k(f, (e) => {
+    te(e);
+  }, { immediate: !1 }), k(b, (e) => {
+    oe(e);
+  }, { immediate: !1 });
+  const o = () => {
+    f.value = f.value === "club-employes" ? "gifteo" : "club-employes";
+  }, r = () => {
+    b.value = b.value === "light" ? "dark" : "light";
+  }, l = (e) => {
+    f.value = e;
+  }, d = (e) => {
+    b.value = e;
+  }, a = u(() => Object.keys(_).map((e) => ({
+    key: e,
+    name: _[e].name
+  })));
+  return {
+    // State
+    currentTheme: n,
+    currentBrand: u(() => f.value),
+    currentMode: u(() => b.value),
+    currentBrandName: t,
+    availableBrands: a,
+    // Actions
+    toggleBrand: o,
+    toggleMode: r,
+    setBrand: l,
+    setMode: d
+  };
+}
+function de() {
+  const { currentBrand: n, currentMode: t } = ne(), o = (i) => {
+    try {
+      const c = `--assets-logos-${i}-small`, p = getComputedStyle(document.documentElement).getPropertyValue(c).trim();
+      return p && p.startsWith("url(") && p.endsWith(")") ? p.slice(4, -1).replace(/['"`]/g, "") : null;
+    } catch (s) {
+      return console.warn("Erreur lors de la récupération du logo pour le favicon:", s), null;
+    }
+  }, r = (i) => i, l = (i) => {
+    try {
+      const s = document.querySelector('link[rel="icon"]');
+      s && s.remove();
+      const c = document.createElement("link");
+      c.rel = "icon", c.type = "image/svg+xml", c.href = i, document.head.appendChild(c);
+    } catch (s) {
+      console.warn("Erreur lors de la mise à jour du favicon:", s);
+    }
+  }, d = u(() => {
+    const i = o(n.value);
+    return i ? r(i) : "/favicon.ico";
+  }), a = () => {
+    const i = d.value;
+    i && l(i);
+  };
+  let e = null;
+  return z(() => {
+    setTimeout(a, 50), e = k(
+      [n, t],
+      () => {
+        a();
+      },
+      { immediate: !1 }
+    );
+  }), F(() => {
+    e && e();
+  }), {
+    faviconUrl: d,
+    refreshFavicon: a,
+    updateFavicon: l
+  };
+}
 export {
-  q as Badge,
-  G as Button,
-  J as Icon,
-  K as Logo,
-  U as ThemeProvider,
-  R as clubEmployesDark,
-  Q as clubEmployesLight,
+  re as Badge,
+  le as Button,
+  ie as Icon,
+  ce as Logo,
+  ae as ThemeProvider,
+  J as clubEmployesDark,
+  Y as clubEmployesLight,
   X as gifteoDark,
-  W as gifteoLight
+  Q as gifteoLight,
+  de as useFavicon,
+  ne as useTheme
 };