@cupra/ui-kit 1.0.0-canary.16 → 1.0.0-canary.17

package/dist/components/base/UiKitElement.js

@@ -1,31 +1,33 @@
-import { themeContext as d } from "../ds-theme-provider/themeContext.js";
-import { consume as m } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { themeContext as m } from "../ds-theme-provider/themeContext.js";
+import { THEME_STORAGE_KEY as d } from "../../core/theme.constants.js";
+import { consume as u } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
 import { pubSub as p } from "../../utils/PubSub.js";
-import { stylesRegistry as u } from "../../utils/StylesRegistry/StylesRegistry.js";
+import { stylesRegistry as S } from "../../utils/StylesRegistry/StylesRegistry.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
 import "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import { LitElement as y } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as S } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { css as f, adoptStyles as C } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-var T = Object.defineProperty, l = (n, e, t, i) => {
+import { property as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { css as C, adoptStyles as T } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, l = (n, e, t, i) => {
   for (var o = void 0, a = n.length - 1, s; a >= 0; a--)
     (s = n[a]) && (o = s(e, t, o) || o);
-  return o && T(e, t, o), o;
+  return o && g(e, t, o), o;
 };
-const g = f`:host([unresolved]){visibility:hidden}`, h = class c extends y {
+const E = C`:host([unresolved]){visibility:hidden}`, h = class c extends y {
   constructor() {
     super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
       this.pubSubTheme = e;
     }, this.pubSubTheme = p.subscribe("theme", this.handleChangeTheme);
   }
   get theme() {
-    return this.contextTheme ?? this.pubSubTheme;
+    const e = sessionStorage == null ? void 0 : sessionStorage.getItem(d);
+    return this.contextTheme ?? this.pubSubTheme ?? e;
   }
   connectedCallback() {
     super.connectedCallback(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.setAttribute("unresolved", "");
     const e = this.constructor, t = Array.isArray(e.styles) ? e.styles : [e.styles].filter(Boolean);
-    C(this.shadowRoot, [...t, g]), this.applyThemeStyles();
+    T(this.shadowRoot, [...t, E]), this.applyThemeStyles();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), p.unsubscribe("theme", this.handleChangeTheme);
@@ -48,7 +50,7 @@ const g = f`:host([unresolved]){visibility:hidden}`, h = class c extends y {
     if (!(!this.theme || !(e != null && e.length)))
       try {
         const t = await Promise.all(
-          e.map((s) => u.getStyles({ componentName: s, theme: this.theme }))
+          e.map((s) => S.getStyles({ componentName: s, theme: this.theme }))
         ), i = this.supportsAdoptedSheets(), o = this.shadowRoot.adoptedStyleSheets || [], a = this.appliedConstructables ? o.filter((s) => !this.appliedConstructables.includes(s)) : o;
         this.appliedConstructables = [], this.appliedStyleTags.forEach((s) => s.remove()), this.appliedStyleTags = [], t.forEach((s) => {
           if (s)
@@ -68,11 +70,11 @@ const g = f`:host([unresolved]){visibility:hidden}`, h = class c extends y {
   }
 };
 l([
-  S({ attribute: !1 }),
-  m({ context: d, subscribe: !0 })
+  b({ attribute: !1 }),
+  u({ context: m, subscribe: !0 })
 ], h.prototype, "contextTheme");
 l([
-  b()
+  f()
 ], h.prototype, "pubSubTheme");
 let N = h;
 export {

package/dist/components/ds-theme-provider/ds-theme-provider.js

@@ -1,31 +1,32 @@
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { provide as f } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.js";
-import { pubSub as c } from "../../utils/PubSub.js";
+import { THEME_STORAGE_KEY as p } from "../../core/theme.constants.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { provide as c } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.js";
+import { pubSub as u } from "../../utils/PubSub.js";
 import { booleanConverter as i } from "../../utils/booleanConverter.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u, html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import { LitElement as $ } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { nothing as y, html as $ } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { LitElement as v } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
 import { state as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { fontsConfig as v } from "../../styles/fonts-config.js";
-import { themeContext as w } from "./themeContext.js";
-var F = Object.defineProperty, S = Object.getOwnPropertyDescriptor, d = (t, o, s, r) => {
-  for (var e = r > 1 ? void 0 : r ? S(o, s) : o, a = t.length - 1, n; a >= 0; a--)
+import { fontsConfig as F } from "../../styles/fonts-config.js";
+import { themeContext as S } from "./themeContext.js";
+var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, h = (t, o, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? E(o, s) : o, a = t.length - 1, n; a >= 0; a--)
     (n = t[a]) && (e = (r ? n(o, s, e) : n(e)) || e);
-  return r && e && F(o, s, e), e;
+  return r && e && w(o, s, e), e;
 };
-let m = class extends $ {
+let m = class extends v {
   constructor() {
     super(...arguments), this.loadFonts = !0, this.loadStyles = !0, this.cssLoaded = !1, this.loadedFonts = /* @__PURE__ */ new Set();
   }
   updated(t) {
-    super.updated(t), t.has("theme") && (c.publish("theme", this.theme), window.DS_THEME = this.theme, this.loadThemeFonts(), this.loadThemeStyles().then(() => {
+    super.updated(t), t.has("theme") && (u.publish("theme", this.theme), sessionStorage == null || sessionStorage.setItem(p, this.theme), this.loadThemeFonts(), this.loadThemeStyles().then(() => {
       this.cssLoaded = !0;
     }));
   }
   loadThemeFonts() {
     var t;
-    (t = v[this.theme]) == null || t.fonts.forEach((o) => {
+    (t = F[this.theme]) == null || t.fonts.forEach((o) => {
       this.loadThemeFont(o);
     });
   }
@@ -53,7 +54,7 @@ let m = class extends $ {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0-canary.16", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.17", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");
@@ -62,27 +63,27 @@ let m = class extends $ {
     }) : Promise.resolve();
   }
   render() {
-    return this.cssLoaded ? y`<slot></slot>` : u;
+    return this.cssLoaded ? $`<slot></slot>` : y;
   }
 };
-d([
-  h({ type: Boolean, converter: i, attribute: "load-fonts" })
+h([
+  d({ type: Boolean, converter: i, attribute: "load-fonts" })
 ], m.prototype, "loadFonts", 2);
-d([
-  h({ type: Boolean, converter: i, attribute: "load-styles" })
+h([
+  d({ type: Boolean, converter: i, attribute: "load-styles" })
 ], m.prototype, "loadStyles", 2);
-d([
-  f({ context: w }),
-  h({ type: String })
+h([
+  c({ context: S }),
+  d({ type: String })
 ], m.prototype, "theme", 2);
-d([
+h([
   l()
 ], m.prototype, "cssLoaded", 2);
-d([
+h([
   l()
 ], m.prototype, "loadedFonts", 2);
-m = d([
-  p("ds-theme-provider")
+m = h([
+  f("ds-theme-provider")
 ], m);
 export {
   m as DsThemeProvider

package/dist/core/theme.constants.d.ts

@@ -0,0 +1 @@
+export declare const THEME_STORAGE_KEY: "@cupra/ui-kit/theme";

package/dist/core/theme.constants.js

@@ -0,0 +1,4 @@
+const t = "@cupra/ui-kit/theme";
+export {
+  t as THEME_STORAGE_KEY
+};

package/dist/utils/IconsManager.js

@@ -1,12 +1,14 @@
+import { THEME_STORAGE_KEY as i } from "../core/theme.constants.js";
 import { pubSub as n } from "./PubSub.js";
 class c {
   constructor() {
     this.icons = {}, this.handleChangeTheme = (t) => {
       this.theme = t;
       const h = Object.keys(this.icons);
-      this.icons = {}, h.forEach((s) => this.fetchIcon(s));
+      this.icons = {}, h.forEach((e) => this.fetchIcon(e));
     }, this.fetchIcon = async (t, h = {}) => {
-      !this.theme && window.DS_THEME && (this.theme = window.DS_THEME);
+      const e = sessionStorage == null ? void 0 : sessionStorage.getItem(i);
+      !this.theme && e && (this.theme = e);
       const s = await this.getCachedIcon(t);
       return s || (this.icons[t] = this.loadIcon(t, h), this.icons[t]);
     }, n.subscribe("theme", this.handleChangeTheme);
@@ -17,14 +19,14 @@ class c {
   getCachedIcon(t) {
     return this.icons[t];
   }
-  loadIcon(t, { cache: h = "force-cache", ...s }) {
+  loadIcon(t, { cache: h = "force-cache", ...e }) {
     return this.theme ? fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${t}.svg`, {
       cache: h,
-      ...s
-    }).then((e) => e.text()).catch((e) => ((e == null ? void 0 : e.name) !== "AbortError" && console.error(`Failed to fetch icon "${t}":`, e), "")) : Promise.resolve('<svg class="ds-icon"></svg>');
+      ...e
+    }).then((s) => s.text()).catch((s) => ((s == null ? void 0 : s.name) !== "AbortError" && console.error(`Failed to fetch icon "${t}":`, s), "")) : Promise.resolve('<svg class="ds-icon"></svg>');
   }
 }
-const o = c.getInstance();
+const r = c.getInstance();
 export {
-  o as iconsManager
+  r as iconsManager
 };

package/dist/utils/PubSub.d.ts

@@ -5,11 +5,9 @@ type LastPublishedData = {
     [key: string]: any;
 };
 export declare class PubSub {
-    private static instance;
     subscribers: Subscribers;
     lastPublishedData: LastPublishedData;
     constructor();
-    static getInstance(): PubSub;
     subscribe(event: string, callback: Function): any;
     unsubscribe(event: string, callback: Function): void;
     publish(event: string, data: unknown): void;

package/dist/utils/PubSub.js

@@ -1,28 +1,33 @@
-class i {
+class c {
   constructor() {
     this.subscribers = {}, this.lastPublishedData = {};
   }
-  static getInstance() {
-    return i.instance || (i.instance = new i()), i.instance;
-  }
   subscribe(s, r) {
     return this.subscribers[s] || (this.subscribers[s] = []), this.subscribers[s].push(r), this.lastPublishedData[s];
   }
   unsubscribe(s, r) {
-    this.subscribers[s] && (this.subscribers[s] = this.subscribers[s].filter((t) => t !== r));
+    this.subscribers[s] && (this.subscribers[s] = this.subscribers[s].filter((i) => i !== r));
   }
   publish(s, r) {
-    this.lastPublishedData[s] = r, this.subscribers[s] && this.subscribers[s].forEach((t) => {
+    this.lastPublishedData[s] = r, this.subscribers[s] && this.subscribers[s].forEach((i) => {
       try {
-        t(r);
-      } catch (c) {
-        console.error(`Error in subscriber for event "${s}":`, c);
+        i(r);
+      } catch (e) {
+        console.error(`Error in subscriber for event "${s}":`, e);
       }
     });
   }
 }
-const b = i.getInstance();
+const u = Symbol.for("@cupra/ui-kit/pubsub"), t = globalThis;
+let b = t[u];
+b || (b = new c(), Object.defineProperty(t, u, {
+  value: b,
+  writable: !1,
+  configurable: !1,
+  enumerable: !1
+}));
+const a = b;
 export {
-  i as PubSub,
-  b as pubSub
+  c as PubSub,
+  a as pubSub
 };

package/dist/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.0.0-canary.16/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.0.0-canary.17/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-16"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-17"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-16"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-17"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist-react/components/base/UiKitElement.js

@@ -1,31 +1,33 @@
-import { themeContext as d } from "../ds-theme-provider/themeContext.js";
-import { consume as m } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { themeContext as m } from "../ds-theme-provider/themeContext.js";
+import { THEME_STORAGE_KEY as d } from "../../core/theme.constants.js";
+import { consume as u } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
 import { pubSub as p } from "../../utils/PubSub.js";
-import { stylesRegistry as u } from "../../utils/StylesRegistry/StylesRegistry.js";
+import { stylesRegistry as S } from "../../utils/StylesRegistry/StylesRegistry.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
 import "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import { LitElement as y } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as S } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { css as f, adoptStyles as C } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-var T = Object.defineProperty, l = (n, e, t, i) => {
+import { property as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { css as C, adoptStyles as T } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, l = (n, e, t, i) => {
   for (var o = void 0, a = n.length - 1, s; a >= 0; a--)
     (s = n[a]) && (o = s(e, t, o) || o);
-  return o && T(e, t, o), o;
+  return o && g(e, t, o), o;
 };
-const g = f`:host([unresolved]){visibility:hidden}`, h = class c extends y {
+const E = C`:host([unresolved]){visibility:hidden}`, h = class c extends y {
   constructor() {
     super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
       this.pubSubTheme = e;
     }, this.pubSubTheme = p.subscribe("theme", this.handleChangeTheme);
   }
   get theme() {
-    return this.contextTheme ?? this.pubSubTheme;
+    const e = sessionStorage == null ? void 0 : sessionStorage.getItem(d);
+    return this.contextTheme ?? this.pubSubTheme ?? e;
   }
   connectedCallback() {
     super.connectedCallback(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.setAttribute("unresolved", "");
     const e = this.constructor, t = Array.isArray(e.styles) ? e.styles : [e.styles].filter(Boolean);
-    C(this.shadowRoot, [...t, g]), this.applyThemeStyles();
+    T(this.shadowRoot, [...t, E]), this.applyThemeStyles();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), p.unsubscribe("theme", this.handleChangeTheme);
@@ -48,7 +50,7 @@ const g = f`:host([unresolved]){visibility:hidden}`, h = class c extends y {
     if (!(!this.theme || !(e != null && e.length)))
       try {
         const t = await Promise.all(
-          e.map((s) => u.getStyles({ componentName: s, theme: this.theme }))
+          e.map((s) => S.getStyles({ componentName: s, theme: this.theme }))
         ), i = this.supportsAdoptedSheets(), o = this.shadowRoot.adoptedStyleSheets || [], a = this.appliedConstructables ? o.filter((s) => !this.appliedConstructables.includes(s)) : o;
         this.appliedConstructables = [], this.appliedStyleTags.forEach((s) => s.remove()), this.appliedStyleTags = [], t.forEach((s) => {
           if (s)
@@ -68,11 +70,11 @@ const g = f`:host([unresolved]){visibility:hidden}`, h = class c extends y {
   }
 };
 l([
-  S({ attribute: !1 }),
-  m({ context: d, subscribe: !0 })
+  b({ attribute: !1 }),
+  u({ context: m, subscribe: !0 })
 ], h.prototype, "contextTheme");
 l([
-  b()
+  f()
 ], h.prototype, "pubSubTheme");
 let N = h;
 export {

package/dist-react/components/ds-theme-provider/ds-theme-provider.js

@@ -1,31 +1,32 @@
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { provide as f } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.js";
-import { pubSub as c } from "../../utils/PubSub.js";
+import { THEME_STORAGE_KEY as p } from "../../core/theme.constants.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { provide as c } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.js";
+import { pubSub as u } from "../../utils/PubSub.js";
 import { booleanConverter as i } from "../../utils/booleanConverter.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u, html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import { LitElement as $ } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { nothing as y, html as $ } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { LitElement as v } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
 import { state as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { fontsConfig as v } from "../../styles/fonts-config.js";
-import { themeContext as w } from "./themeContext.js";
-var F = Object.defineProperty, S = Object.getOwnPropertyDescriptor, d = (t, o, s, r) => {
-  for (var e = r > 1 ? void 0 : r ? S(o, s) : o, a = t.length - 1, n; a >= 0; a--)
+import { fontsConfig as F } from "../../styles/fonts-config.js";
+import { themeContext as S } from "./themeContext.js";
+var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, h = (t, o, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? E(o, s) : o, a = t.length - 1, n; a >= 0; a--)
     (n = t[a]) && (e = (r ? n(o, s, e) : n(e)) || e);
-  return r && e && F(o, s, e), e;
+  return r && e && w(o, s, e), e;
 };
-let m = class extends $ {
+let m = class extends v {
   constructor() {
     super(...arguments), this.loadFonts = !0, this.loadStyles = !0, this.cssLoaded = !1, this.loadedFonts = /* @__PURE__ */ new Set();
   }
   updated(t) {
-    super.updated(t), t.has("theme") && (c.publish("theme", this.theme), window.DS_THEME = this.theme, this.loadThemeFonts(), this.loadThemeStyles().then(() => {
+    super.updated(t), t.has("theme") && (u.publish("theme", this.theme), sessionStorage == null || sessionStorage.setItem(p, this.theme), this.loadThemeFonts(), this.loadThemeStyles().then(() => {
       this.cssLoaded = !0;
     }));
   }
   loadThemeFonts() {
     var t;
-    (t = v[this.theme]) == null || t.fonts.forEach((o) => {
+    (t = F[this.theme]) == null || t.fonts.forEach((o) => {
       this.loadThemeFont(o);
     });
   }
@@ -53,7 +54,7 @@ let m = class extends $ {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.0.0-canary.16", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.0.0-canary.17", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");
@@ -62,27 +63,27 @@ let m = class extends $ {
     }) : Promise.resolve();
   }
   render() {
-    return this.cssLoaded ? y`<slot></slot>` : u;
+    return this.cssLoaded ? $`<slot></slot>` : y;
   }
 };
-d([
-  h({ type: Boolean, converter: i, attribute: "load-fonts" })
+h([
+  d({ type: Boolean, converter: i, attribute: "load-fonts" })
 ], m.prototype, "loadFonts", 2);
-d([
-  h({ type: Boolean, converter: i, attribute: "load-styles" })
+h([
+  d({ type: Boolean, converter: i, attribute: "load-styles" })
 ], m.prototype, "loadStyles", 2);
-d([
-  f({ context: w }),
-  h({ type: String })
+h([
+  c({ context: S }),
+  d({ type: String })
 ], m.prototype, "theme", 2);
-d([
+h([
   l()
 ], m.prototype, "cssLoaded", 2);
-d([
+h([
   l()
 ], m.prototype, "loadedFonts", 2);
-m = d([
-  p("ds-theme-provider")
+m = h([
+  f("ds-theme-provider")
 ], m);
 export {
   m as DsThemeProvider

package/dist-react/core/theme.constants.d.ts

@@ -0,0 +1 @@
+export declare const THEME_STORAGE_KEY: "@cupra/ui-kit/theme";

package/dist-react/core/theme.constants.js

@@ -0,0 +1,4 @@
+const t = "@cupra/ui-kit/theme";
+export {
+  t as THEME_STORAGE_KEY
+};

package/dist-react/utils/IconsManager.js

@@ -1,12 +1,14 @@
+import { THEME_STORAGE_KEY as i } from "../core/theme.constants.js";
 import { pubSub as n } from "./PubSub.js";
 class c {
   constructor() {
     this.icons = {}, this.handleChangeTheme = (t) => {
       this.theme = t;
       const h = Object.keys(this.icons);
-      this.icons = {}, h.forEach((s) => this.fetchIcon(s));
+      this.icons = {}, h.forEach((e) => this.fetchIcon(e));
     }, this.fetchIcon = async (t, h = {}) => {
-      !this.theme && window.DS_THEME && (this.theme = window.DS_THEME);
+      const e = sessionStorage == null ? void 0 : sessionStorage.getItem(i);
+      !this.theme && e && (this.theme = e);
       const s = await this.getCachedIcon(t);
       return s || (this.icons[t] = this.loadIcon(t, h), this.icons[t]);
     }, n.subscribe("theme", this.handleChangeTheme);
@@ -17,14 +19,14 @@ class c {
   getCachedIcon(t) {
     return this.icons[t];
   }
-  loadIcon(t, { cache: h = "force-cache", ...s }) {
+  loadIcon(t, { cache: h = "force-cache", ...e }) {
     return this.theme ? fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${t}.svg`, {
       cache: h,
-      ...s
-    }).then((e) => e.text()).catch((e) => ((e == null ? void 0 : e.name) !== "AbortError" && console.error(`Failed to fetch icon "${t}":`, e), "")) : Promise.resolve('<svg class="ds-icon"></svg>');
+      ...e
+    }).then((s) => s.text()).catch((s) => ((s == null ? void 0 : s.name) !== "AbortError" && console.error(`Failed to fetch icon "${t}":`, s), "")) : Promise.resolve('<svg class="ds-icon"></svg>');
   }
 }
-const o = c.getInstance();
+const r = c.getInstance();
 export {
-  o as iconsManager
+  r as iconsManager
 };

package/dist-react/utils/PubSub.d.ts

@@ -5,11 +5,9 @@ type LastPublishedData = {
     [key: string]: any;
 };
 export declare class PubSub {
-    private static instance;
     subscribers: Subscribers;
     lastPublishedData: LastPublishedData;
     constructor();
-    static getInstance(): PubSub;
     subscribe(event: string, callback: Function): any;
     unsubscribe(event: string, callback: Function): void;
     publish(event: string, data: unknown): void;

package/dist-react/utils/PubSub.js

@@ -1,28 +1,33 @@
-class i {
+class c {
   constructor() {
     this.subscribers = {}, this.lastPublishedData = {};
   }
-  static getInstance() {
-    return i.instance || (i.instance = new i()), i.instance;
-  }
   subscribe(s, r) {
     return this.subscribers[s] || (this.subscribers[s] = []), this.subscribers[s].push(r), this.lastPublishedData[s];
   }
   unsubscribe(s, r) {
-    this.subscribers[s] && (this.subscribers[s] = this.subscribers[s].filter((t) => t !== r));
+    this.subscribers[s] && (this.subscribers[s] = this.subscribers[s].filter((i) => i !== r));
   }
   publish(s, r) {
-    this.lastPublishedData[s] = r, this.subscribers[s] && this.subscribers[s].forEach((t) => {
+    this.lastPublishedData[s] = r, this.subscribers[s] && this.subscribers[s].forEach((i) => {
       try {
-        t(r);
-      } catch (c) {
-        console.error(`Error in subscriber for event "${s}":`, c);
+        i(r);
+      } catch (e) {
+        console.error(`Error in subscriber for event "${s}":`, e);
       }
     });
   }
 }
-const b = i.getInstance();
+const u = Symbol.for("@cupra/ui-kit/pubsub"), t = globalThis;
+let b = t[u];
+b || (b = new c(), Object.defineProperty(t, u, {
+  value: b,
+  writable: !1,
+  configurable: !1,
+  enumerable: !1
+}));
+const a = b;
 export {
-  i as PubSub,
-  b as pubSub
+  c as PubSub,
+  a as pubSub
 };

package/dist-react/utils/StylesRegistry/StylesRegistry.js

@@ -5,7 +5,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/1.0.0-canary.16/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.0.0-canary.17/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist-react/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-16"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-17"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-16"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-17"), e = i(o);
   return n`${e}`;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "1.0.0-canary.16",
+  "version": "1.0.0-canary.17",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",