@cupra/ui-react 0.1.0-canary.0 → 1.0.0-canary.2

package/dist/packages/ui-kit/dist-react/index.js

@@ -92,7 +92,7 @@ let Li = class extends Event {
     }, this.onProviderRequest = (o) => {
       if (o.context !== this.context || (o.contextTarget ?? o.composedPath()[0]) === this.host) return;
       const n = /* @__PURE__ */ new Set();
-      for (const [h, { consumerHost: u }] of this.subscriptions) n.has(h) || (n.add(h), u.dispatchEvent(new ui(this.context, u, h, !0)));
+      for (const [d, { consumerHost: u }] of this.subscriptions) n.has(d) || (n.add(d), u.dispatchEvent(new ui(this.context, u, d, !0)));
       o.stopPropagation();
     }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (s = (r = this.host).addController) == null || s.call(r, this);
   }
@@ -128,13 +128,13 @@ function me({ context: t }) {
         const n = /* @__PURE__ */ new WeakMap();
         o = { get() {
           return n.get(this);
-        }, set(h) {
-          r.get(this).setValue(h), n.set(this, h);
+        }, set(d) {
+          r.get(this).setValue(d), n.set(this, d);
         }, configurable: !0, enumerable: !0 };
       } else {
         const n = s.set;
-        o = { ...s, set(h) {
-          r.get(this).setValue(h), n == null || n.call(this, h);
+        o = { ...s, set(d) {
+          r.get(this).setValue(d), n == null || n.call(this, d);
         } };
       }
       return void Object.defineProperty(e, i, o);
@@ -184,14 +184,14 @@ class Xt {
   }
 }
 const ee = Xt.getInstance();
-class Zt {
+class Jt {
   constructor() {
     this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({
       componentName: e,
       theme: i
     }) => {
       if (!i || !e) return;
-      const r = `https://ds-assets.cupra.com/0.2.0-canary.0/styles/${i}/components/${e}.css`, s = this.getCachedStyleSheetPromise({ url: r });
+      const r = `https://ds-assets.cupra.com/1.0.0-canary.2/styles/${i}/components/${e}.css`, s = this.getCachedStyleSheetPromise({ url: r });
       if (s) return s;
       const o = this.fetchStyle({ url: r }).then((n) => (n || this.stylePromises.delete(r), n));
       return this.stylePromises.set(r, o), this.stylePromises.get(r);
@@ -209,10 +209,10 @@ class Zt {
     return this.stylePromises.get(e);
   }
   static getInstance() {
-    return Zt.instance || (Zt.instance = new Zt()), Zt.instance;
+    return Jt.instance || (Jt.instance = new Jt()), Jt.instance;
   }
 }
-const Mi = Zt.getInstance();
+const Mi = Jt.getInstance();
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -237,7 +237,7 @@ let vi = class {
     return this.cssText;
   }
 };
-const bi = (t) => new vi(typeof t == "string" ? t : t + "", void 0, Cs), d = (t, ...e) => {
+const bi = (t) => new vi(typeof t == "string" ? t : t + "", void 0, Cs), h = (t, ...e) => {
   const i = t.length === 1 ? t[0] : e.reduce(((r, s, o) => r + ((n) => {
     if (n._$cssResult$ === !0) return n.cssText;
     if (typeof n == "number") return n;
@@ -407,9 +407,9 @@ let Yt = class extends HTMLElement {
     var i, r;
     const s = this.constructor, o = s._$Eh.get(t);
     if (o !== void 0 && this._$Em !== o) {
-      const n = s.getPropertyOptions(o), h = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : Ye;
+      const n = s.getPropertyOptions(o), d = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : Ye;
       this._$Em = o;
-      const u = h.fromAttribute(e, n.type);
+      const u = d.fromAttribute(e, n.type);
       this[o] = u ?? ((r = this._$Ej) == null ? void 0 : r.get(o)) ?? u, this._$Em = null;
     }
   }
@@ -448,8 +448,8 @@ let Yt = class extends HTMLElement {
       }
       const r = this.constructor.elementProperties;
       if (r.size > 0) for (const [s, o] of r) {
-        const { wrapped: n } = o, h = this[s];
-        n !== !0 || this._$AL.has(s) || h === void 0 || this.C(s, void 0, o, h);
+        const { wrapped: n } = o, d = this[s];
+        n !== !0 || this._$AL.has(s) || d === void 0 || this.C(s, void 0, o, d);
       }
     }
     let e = !1;
@@ -499,8 +499,8 @@ Yt.elementStyles = [], Yt.shadowRootOptions = { mode: "open" }, Yt[Oe("elementPr
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Xe = globalThis, Ze = Xe.trustedTypes, Xs = Ze ? Ze.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, yi = "$lit$", Tt = `lit$${Math.random().toFixed(9).slice(2)}$`, gi = "?" + Tt, Wi = `<${gi}>`, Mt = document, Ae = () => Mt.createComment(""), _e = (t) => t === null || typeof t != "object" && typeof t != "function", zs = Array.isArray, qi = (t) => zs(t) || typeof (t == null ? void 0 : t[Symbol.iterator]) == "function", us = `[ 	
-\f\r]`, ke = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Zs = /-->/g, Js = />/g, Pt = RegExp(`>|${us}(?:([^\\s"'>=/]+)(${us}*=${us}*(?:[^ 	
+const Xe = globalThis, Je = Xe.trustedTypes, Xs = Je ? Je.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, yi = "$lit$", Tt = `lit$${Math.random().toFixed(9).slice(2)}$`, gi = "?" + Tt, Wi = `<${gi}>`, Mt = document, Ae = () => Mt.createComment(""), _e = (t) => t === null || typeof t != "object" && typeof t != "function", zs = Array.isArray, qi = (t) => zs(t) || typeof (t == null ? void 0 : t[Symbol.iterator]) == "function", us = `[ 	
+\f\r]`, ke = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Js = /-->/g, Zs = />/g, Pt = RegExp(`>|${us}(?:([^\\s"'>=/]+)(${us}*=${us}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), Qs = /'/g, ti = /"/g, fi = /^(?:script|style|textarea|title)$/i, Ki = (t) => (e, ...i) => ({ _$litType$: t, strings: e, values: i }), l = Ki(1), ut = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), ei = /* @__PURE__ */ new WeakMap(), Lt = Mt.createTreeWalker(Mt, 129);
 function xi(t, e) {
   if (!zs(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
@@ -509,12 +509,12 @@ function xi(t, e) {
 const Gi = (t, e) => {
   const i = t.length - 1, r = [];
   let s, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = ke;
-  for (let h = 0; h < i; h++) {
-    const u = t[h];
+  for (let d = 0; d < i; d++) {
+    const u = t[d];
     let g, $, v = -1, x = 0;
-    for (; x < u.length && (n.lastIndex = x, $ = n.exec(u), $ !== null); ) x = n.lastIndex, n === ke ? $[1] === "!--" ? n = Zs : $[1] !== void 0 ? n = Js : $[2] !== void 0 ? (fi.test($[2]) && (s = RegExp("</" + $[2], "g")), n = Pt) : $[3] !== void 0 && (n = Pt) : n === Pt ? $[0] === ">" ? (n = s ?? ke, v = -1) : $[1] === void 0 ? v = -2 : (v = n.lastIndex - $[2].length, g = $[1], n = $[3] === void 0 ? Pt : $[3] === '"' ? ti : Qs) : n === ti || n === Qs ? n = Pt : n === Zs || n === Js ? n = ke : (n = Pt, s = void 0);
-    const S = n === Pt && t[h + 1].startsWith("/>") ? " " : "";
-    o += n === ke ? u + Wi : v >= 0 ? (r.push(g), u.slice(0, v) + yi + u.slice(v) + Tt + S) : u + Tt + (v === -2 ? h : S);
+    for (; x < u.length && (n.lastIndex = x, $ = n.exec(u), $ !== null); ) x = n.lastIndex, n === ke ? $[1] === "!--" ? n = Js : $[1] !== void 0 ? n = Zs : $[2] !== void 0 ? (fi.test($[2]) && (s = RegExp("</" + $[2], "g")), n = Pt) : $[3] !== void 0 && (n = Pt) : n === Pt ? $[0] === ">" ? (n = s ?? ke, v = -1) : $[1] === void 0 ? v = -2 : (v = n.lastIndex - $[2].length, g = $[1], n = $[3] === void 0 ? Pt : $[3] === '"' ? ti : Qs) : n === ti || n === Qs ? n = Pt : n === Js || n === Zs ? n = ke : (n = Pt, s = void 0);
+    const S = n === Pt && t[d + 1].startsWith("/>") ? " " : "";
+    o += n === ke ? u + Wi : v >= 0 ? (r.push(g), u.slice(0, v) + yi + u.slice(v) + Tt + S) : u + Tt + (v === -2 ? d : S);
   }
   return [xi(t, o + (t[i] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), r];
 };
@@ -523,21 +523,21 @@ class Pe {
     let s;
     this.parts = [];
     let o = 0, n = 0;
-    const h = e.length - 1, u = this.parts, [g, $] = Gi(e, i);
+    const d = e.length - 1, u = this.parts, [g, $] = Gi(e, i);
     if (this.el = Pe.createElement(g, r), Lt.currentNode = this.el.content, i === 2 || i === 3) {
       const v = this.el.content.firstChild;
       v.replaceWith(...v.childNodes);
     }
-    for (; (s = Lt.nextNode()) !== null && u.length < h; ) {
+    for (; (s = Lt.nextNode()) !== null && u.length < d; ) {
       if (s.nodeType === 1) {
         if (s.hasAttributes()) for (const v of s.getAttributeNames()) if (v.endsWith(yi)) {
           const x = $[n++], S = s.getAttribute(v).split(Tt), T = /([.?@])?(.*)/.exec(x);
-          u.push({ type: 1, index: o, name: T[2], strings: S, ctor: T[1] === "." ? Xi : T[1] === "?" ? Zi : T[1] === "@" ? Ji : ts }), s.removeAttribute(v);
+          u.push({ type: 1, index: o, name: T[2], strings: S, ctor: T[1] === "." ? Xi : T[1] === "?" ? Ji : T[1] === "@" ? Zi : ts }), s.removeAttribute(v);
         } else v.startsWith(Tt) && (u.push({ type: 6, index: o }), s.removeAttribute(v));
         if (fi.test(s.tagName)) {
           const v = s.textContent.split(Tt), x = v.length - 1;
           if (x > 0) {
-            s.textContent = Ze ? Ze.emptyScript : "";
+            s.textContent = Je ? Je.emptyScript : "";
             for (let S = 0; S < x; S++) s.append(v[S], Ae()), Lt.nextNode(), u.push({ type: 2, index: ++o });
             s.append(v[x], Ae());
           }
@@ -559,8 +559,8 @@ function ie(t, e, i = t, r) {
   var s, o;
   if (e === ut) return e;
   let n = r !== void 0 ? (s = i._$Co) == null ? void 0 : s[r] : i._$Cl;
-  const h = _e(e) ? void 0 : e._$litDirective$;
-  return (n == null ? void 0 : n.constructor) !== h && ((o = n == null ? void 0 : n._$AO) == null || o.call(n, !1), h === void 0 ? n = void 0 : (n = new h(t), n._$AT(t, i, r)), r !== void 0 ? (i._$Co ?? (i._$Co = []))[r] = n : i._$Cl = n), n !== void 0 && (e = ie(t, n._$AS(t, e.values), n, r)), e;
+  const d = _e(e) ? void 0 : e._$litDirective$;
+  return (n == null ? void 0 : n.constructor) !== d && ((o = n == null ? void 0 : n._$AO) == null || o.call(n, !1), d === void 0 ? n = void 0 : (n = new d(t), n._$AT(t, i, r)), r !== void 0 ? (i._$Co ?? (i._$Co = []))[r] = n : i._$Cl = n), n !== void 0 && (e = ie(t, n._$AS(t, e.values), n, r)), e;
 }
 let Yi = class {
   constructor(t, e) {
@@ -575,13 +575,13 @@ let Yi = class {
   u(t) {
     const { el: { content: e }, parts: i } = this._$AD, r = ((t == null ? void 0 : t.creationScope) ?? Mt).importNode(e, !0);
     Lt.currentNode = r;
-    let s = Lt.nextNode(), o = 0, n = 0, h = i[0];
-    for (; h !== void 0; ) {
-      if (o === h.index) {
+    let s = Lt.nextNode(), o = 0, n = 0, d = i[0];
+    for (; d !== void 0; ) {
+      if (o === d.index) {
         let u;
-        h.type === 2 ? u = new ve(s, s.nextSibling, this, t) : h.type === 1 ? u = new h.ctor(s, h.name, h.strings, this, t) : h.type === 6 && (u = new Qi(s, this, t)), this._$AV.push(u), h = i[++n];
+        d.type === 2 ? u = new ve(s, s.nextSibling, this, t) : d.type === 1 ? u = new d.ctor(s, d.name, d.strings, this, t) : d.type === 6 && (u = new Qi(s, this, t)), this._$AV.push(u), d = i[++n];
       }
-      o !== (h == null ? void 0 : h.index) && (s = Lt.nextNode(), o++);
+      o !== (d == null ? void 0 : d.index) && (s = Lt.nextNode(), o++);
     }
     return Lt.currentNode = Mt, r;
   }
@@ -626,8 +626,8 @@ class ve {
     const { values: r, _$litType$: s } = e, o = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = Pe.createElement(xi(s.h, s.h[0]), this.options)), s);
     if (((i = this._$AH) == null ? void 0 : i._$AD) === o) this._$AH.p(r);
     else {
-      const n = new Yi(o, this), h = n.u(this.options);
-      n.p(r), this.T(h), this._$AH = n;
+      const n = new Yi(o, this), d = n.u(this.options);
+      n.p(r), this.T(d), this._$AH = n;
     }
   }
   _$AC(e) {
@@ -668,9 +668,9 @@ class ts {
     let n = !1;
     if (o === void 0) e = ie(this, e, i, 0), n = !_e(e) || e !== this._$AH && e !== ut, n && (this._$AH = e);
     else {
-      const h = e;
+      const d = e;
       let u, g;
-      for (e = o[0], u = 0; u < o.length - 1; u++) g = ie(this, h[r + u], i, u), g === ut && (g = this._$AH[u]), n || (n = !_e(g) || g !== this._$AH[u]), g === c ? e = c : e !== c && (e += (g ?? "") + o[u + 1]), this._$AH[u] = g;
+      for (e = o[0], u = 0; u < o.length - 1; u++) g = ie(this, d[r + u], i, u), g === ut && (g = this._$AH[u]), n || (n = !_e(g) || g !== this._$AH[u]), g === c ? e = c : e !== c && (e += (g ?? "") + o[u + 1]), this._$AH[u] = g;
     }
     n && !s && this.j(e);
   }
@@ -686,7 +686,7 @@ class Xi extends ts {
     this.element[this.name] = e === c ? void 0 : e;
   }
 }
-class Zi extends ts {
+class Ji extends ts {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -694,7 +694,7 @@ class Zi extends ts {
     this.element.toggleAttribute(this.name, !!e && e !== c);
   }
 }
-class Ji extends ts {
+class Zi extends ts {
   constructor(e, i, r, s, o) {
     super(e, i, r, s, o), this.type = 5;
   }
@@ -776,18 +776,18 @@ const sr = { attribute: !0, type: String, converter: Ye, reflect: !1, hasChanged
   let o = globalThis.litPropertyMetadata.get(s);
   if (o === void 0 && globalThis.litPropertyMetadata.set(s, o = /* @__PURE__ */ new Map()), r === "setter" && ((t = Object.create(t)).wrapped = !0), o.set(i.name, t), r === "accessor") {
     const { name: n } = i;
-    return { set(h) {
+    return { set(d) {
       const u = e.get.call(this);
-      e.set.call(this, h), this.requestUpdate(n, u, t);
-    }, init(h) {
-      return h !== void 0 && this.C(n, void 0, t, h), h;
+      e.set.call(this, d), this.requestUpdate(n, u, t);
+    }, init(d) {
+      return d !== void 0 && this.C(n, void 0, t, d), d;
     } };
   }
   if (r === "setter") {
     const { name: n } = i;
-    return function(h) {
+    return function(d) {
       const u = this[n];
-      e.call(this, h), this.requestUpdate(n, u, t);
+      e.call(this, d), this.requestUpdate(n, u, t);
     };
   }
   throw Error("Unsupported decorator location: " + r);
@@ -820,8 +820,8 @@ const Is = (t, e, i) => (i.configurable = !0, i.enumerable = !0, Reflect.decorat
 function lt(t, e) {
   return (i, r, s) => {
     const o = (n) => {
-      var h;
-      return ((h = n.renderRoot) == null ? void 0 : h.querySelector(t)) ?? null;
+      var d;
+      return ((d = n.renderRoot) == null ? void 0 : d.querySelector(t)) ?? null;
     };
     return Is(i, r, { get() {
       return o(this);
@@ -838,7 +838,7 @@ function tt(t) {
     const { slot: r, selector: s } = t ?? {}, o = "slot" + (r ? `[name=${r}]` : ":not([name])");
     return Is(e, i, { get() {
       var n;
-      const h = (n = this.renderRoot) == null ? void 0 : n.querySelector(o), u = (h == null ? void 0 : h.assignedElements(t)) ?? [];
+      const d = (n = this.renderRoot) == null ? void 0 : n.querySelector(o), u = (d == null ? void 0 : d.assignedElements(t)) ?? [];
       return s === void 0 ? u : u.filter(((g) => g.matches(s)));
     } });
   };
@@ -863,7 +863,7 @@ var rr = Object.defineProperty, $i = (t, e, i, r) => {
     (n = t[o]) && (s = n(e, i, s) || s);
   return s && rr(e, i, s), s;
 };
-const or = d`:host([unresolved]){visibility:hidden}`, _s = class wi extends pt {
+const or = h`:host([unresolved]){visibility:hidden}`, _s = class wi extends pt {
   constructor() {
     super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
       this.pubSubTheme = e;
@@ -903,11 +903,11 @@ const or = d`:host([unresolved]){visibility:hidden}`, _s = class wi extends pt {
         this.appliedConstructables = [], this.appliedStyleTags.forEach((n) => n.remove()), this.appliedStyleTags = [], i.forEach((n) => {
           if (n)
             if (r) {
-              const h = new CSSStyleSheet();
-              h.replaceSync(n), this.appliedConstructables.push(h);
+              const d = new CSSStyleSheet();
+              d.replaceSync(n), this.appliedConstructables.push(d);
             } else {
-              const h = document.createElement("style");
-              h.textContent = n, this.shadowRoot.appendChild(h), this.appliedStyleTags.push(h);
+              const d = document.createElement("style");
+              d.textContent = n, this.shadowRoot.appendChild(d), this.appliedStyleTags.push(d);
             }
         }), r && (this.shadowRoot.adoptedStyleSheets = [...o, ...this.appliedConstructables]);
       } catch (i) {
@@ -925,7 +925,7 @@ $i([
   y()
 ], _s.prototype, "pubSubTheme");
 let f = _s;
-const nr = d`
+const nr = h`
     :host {
         display: block;
         width: 100%;
@@ -1053,7 +1053,7 @@ const ze = (t) => t ?? c, ar = {
             <ds-icon-button-react
                 class=${t == null ? void 0 : t.class}
                 @click=${t == null ? void 0 : t["@click"]}
-                .size=${ze(t == null ? void 0 : t.size)}
+                size=${ze(t == null ? void 0 : t.size)}
                 variant=${(t == null ? void 0 : t.variant) ?? "primary"}
                 mode=${(t == null ? void 0 : t.mode) ?? "light"}
                 .disabled=${t == null ? void 0 : t.disabled}
@@ -1092,15 +1092,15 @@ function b(t, e) {
       throw new TypeError("@customUiKitElement requires a class that extends HTMLElement.");
     const n = `${t}-react`;
     if (customElements.get(n)) return;
-    let h = e != null && e.skipTagAsComponentName ? [] : [t];
-    Array.isArray(e == null ? void 0 : e.extendComponentNames) && (h = [...e.extendComponentNames, ...h]), (o = (r = window == null ? void 0 : window.customElements) == null ? void 0 : r.define) == null || o.call(
+    let d = e != null && e.skipTagAsComponentName ? [] : [t];
+    Array.isArray(e == null ? void 0 : e.extendComponentNames) && (d = [...e.extendComponentNames, ...d]), (o = (r = window == null ? void 0 : window.customElements) == null ? void 0 : r.define) == null || o.call(
       r,
       n,
       (s = class extends i {
         constructor() {
           super(...arguments), this.componentFactory = ar;
         }
-      }, s.componentName = h, s)
+      }, s.componentName = d, s)
     );
   };
 }
@@ -1149,7 +1149,7 @@ let ys = class extends Bs {
 ys.directiveName = "unsafeHTML", ys.resultType = 1;
 const es = Ns(ys);
 function C(t, ...e) {
-  const i = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v0-2-0-canary-0"), r = es(i);
+  const i = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-2"), r = es(i);
   return l`${r}`;
 }
 /**
@@ -1286,7 +1286,7 @@ Ut([
 mt = Ut([
   b("ds-accordion")
 ], mt);
-const hr = d`
+const dr = h`
     :host {
         display: block;
         width: 100%;
@@ -1305,10 +1305,10 @@ const hr = d`
         cursor: auto;
     }
 `;
-var dr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, ss = (t, e, i, r) => {
+var hr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, ss = (t, e, i, r) => {
   for (var s = r > 1 ? void 0 : r ? pr(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
-  return r && s && dr(e, i, s), s;
+  return r && s && hr(e, i, s), s;
 };
 let re = class extends f {
   constructor() {
@@ -1359,7 +1359,7 @@ let re = class extends f {
               ` : c;
   }
 };
-re.styles = [hr];
+re.styles = [dr];
 ss([
   a({ type: String, reflect: !0 })
 ], re.prototype, "mode", 2);
@@ -1423,7 +1423,7 @@ const Re = (t, e, i) => {
 function ot(t, e, i) {
   return t ? e(t) : i == null ? void 0 : i(t);
 }
-const ur = d`
+const ur = h`
     :host {
         display: contents;
     }
@@ -1443,7 +1443,7 @@ const ur = d`
     .button.full-width {
         width: 100%;
     }
-`, mr = d`
+`, mr = h`
     .text.container {
         display: inline-flex;
     }
@@ -1453,7 +1453,7 @@ const ur = d`
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-`, vr = d`
+`, vr = h`
     .loading-dots {
         display: inline-flex;
         align-items: baseline;
@@ -1708,7 +1708,7 @@ P([
 O = P([
   b("ds-button")
 ], O);
-const gr = d`
+const gr = h`
     :host {
         display: flex;
         width: 100%;
@@ -1741,12 +1741,12 @@ let oe = class extends f {
       let r = !1;
       const s = this.selectedIndex >= 3 && this.selectedIndex < this.selectorsNumber - 3, o = this.selectedIndex < 3, n = this.selectedIndex >= this.selectorsNumber - 3;
       e && (s && (i < this.selectedIndex - 3 || i > this.selectedIndex + 3) || o && i >= 5 || n && i < this.selectorsNumber - 5) && (r = e);
-      const h = {
+      const d = {
         selector: !0,
         selected: i === this.selectedIndex,
         hidden: r
       };
-      t.push(l` <div class=${p(h)}></div> `);
+      t.push(l` <div class=${p(d)}></div> `);
     }
     return t;
   }
@@ -1779,7 +1779,7 @@ const rs = (t) => {
     }
   };
   return e.formAssociated = !0, e;
-}, $r = d`
+}, $r = h`
     :host {
         display: block;
         width: 100%;
@@ -1960,7 +1960,7 @@ j([
 N = j([
   b("ds-checkbox")
 ], N);
-const kr = d`
+const kr = h`
     :host {
         display: inline-block;
     }
@@ -2109,11 +2109,7 @@ const Er = {
   toAttribute(t) {
     return JSON.stringify(t);
   }
-}, Or = d`
-    :host {
-        display: inline-block;
-    }
-
+}, Or = h`
     .container {
         display: inline-flex;
         position: relative;
@@ -2189,7 +2185,7 @@ var zr = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, $t = (t, e
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && zr(e, i, s), s;
 };
-let Z = class extends f {
+let J = class extends f {
   constructor() {
     super(...arguments), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
       this.handleScrollNav();
@@ -2283,34 +2279,34 @@ let Z = class extends f {
         `;
   }
 };
-Z.styles = [Or];
+J.styles = [Or];
 $t([
   a({ type: Array, attribute: "selected-chips", converter: Er, reflect: !0 })
-], Z.prototype, "selectedChips", 2);
+], J.prototype, "selectedChips", 2);
 $t([
   a({ type: Boolean, attribute: "multi-choice", converter: m })
-], Z.prototype, "multiChoice", 2);
+], J.prototype, "multiChoice", 2);
 $t([
   a({ type: String })
-], Z.prototype, "size", 2);
+], J.prototype, "size", 2);
 $t([
   a({ type: String, reflect: !0 })
-], Z.prototype, "mode", 2);
+], J.prototype, "mode", 2);
 $t([
   y()
-], Z.prototype, "hasScrollLeft", 2);
+], J.prototype, "hasScrollLeft", 2);
 $t([
   y()
-], Z.prototype, "hasScrollRight", 2);
+], J.prototype, "hasScrollRight", 2);
 $t([
   tt({ slot: "" })
-], Z.prototype, "chips", 2);
+], J.prototype, "chips", 2);
 $t([
   lt(".chips-container")
-], Z.prototype, "chipsContainer", 2);
-Z = $t([
+], J.prototype, "chipsContainer", 2);
+J = $t([
   b("ds-chips")
-], Z);
+], J);
 function Si({
   value: t,
   locale: e,
@@ -2319,7 +2315,7 @@ function Si({
   currency: s,
   localeMatcher: o = "lookup",
   minimumIntegerDigits: n = 1,
-  minimumFractionDigits: h = 0,
+  minimumFractionDigits: d = 0,
   maximumFractionDigits: u = 20,
   thousandSeparator: g,
   fractionSeparator: $,
@@ -2332,28 +2328,28 @@ function Si({
     ...s && { currency: s },
     localeMatcher: o,
     minimumIntegerDigits: n,
-    minimumFractionDigits: h,
+    minimumFractionDigits: d,
     maximumFractionDigits: u,
     useGrouping: v
   }).formatToParts(t ?? 0);
-  return z.forEach((dt, Se) => {
-    switch (dt.type) {
+  return z.forEach((ht, Se) => {
+    switch (ht.type) {
       case "unit":
       case "currency":
       case "percentSign":
-        S = dt.value, T = Se === 0 || (z[0].type === "minusSign" || z[0].type === "plusSign") && Se === 1 ? "left" : "right";
+        S = ht.value, T = Se === 0 || (z[0].type === "minusSign" || z[0].type === "plusSign") && Se === 1 ? "left" : "right";
         break;
       case "group":
-        x += g ?? dt.value;
+        x += g ?? ht.value;
         break;
       case "decimal":
-        x += $ ?? dt.value;
+        x += $ ?? ht.value;
         break;
       case "integer":
       case "fraction":
       case "plusSign":
       case "minusSign":
-        x += dt.value;
+        x += ht.value;
         break;
     }
   }), {
@@ -2362,7 +2358,7 @@ function Si({
     ...T && { unitSymbolPosition: T }
   };
 }
-const Ar = d`
+const Ar = h`
     :host {
         display: inline;
     }
@@ -2499,7 +2495,7 @@ A([
 E = A([
   b("ds-currency")
 ], E);
-const Nr = d`
+const Nr = h`
     :host {
         display: inline-block;
     }
@@ -2539,7 +2535,7 @@ gs.styles = [Nr];
 gs = Br([
   b("ds-dialog-body")
 ], gs);
-const Lr = d`
+const Lr = h`
     :host {
         display: flex;
     }
@@ -2553,7 +2549,7 @@ var Mr = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, ki = (t, e
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && Mr(e, i, s), s;
 };
-let Je = class extends f {
+let Ze = class extends f {
   constructor() {
     super(...arguments), this.withDivider = !0;
   }
@@ -2572,18 +2568,18 @@ let Je = class extends f {
         `;
   }
 };
-Je.styles = [Lr];
+Ze.styles = [Lr];
 ki([
   a({
     type: Boolean,
     attribute: "with-divider",
     converter: m
   })
-], Je.prototype, "withDivider", 2);
-Je = ki([
+], Ze.prototype, "withDivider", 2);
+Ze = ki([
   b("ds-dialog-footer")
-], Je);
-const jr = d`
+], Ze);
+const jr = h`
     :host {
         display: block;
     }
@@ -2645,13 +2641,13 @@ ne = os([
   b("ds-dialog-header")
 ], ne);
 const U = {
-  xs: d`@media(min-width: ${Bt.xs}px)`,
-  s: d`@media(min-width: ${Bt.s}px)`,
-  m: d`@media(min-width: ${Bt.m}px)`,
-  l: d`@media(min-width: ${Bt.l}px)`,
-  xl: d`@media(min-width: ${Bt.xl}px)`,
-  xxl: d`@media(min-width: ${Bt.xxl}px)`
-}, Ur = d`
+  xs: h`@media(min-width: ${Bt.xs}px)`,
+  s: h`@media(min-width: ${Bt.s}px)`,
+  m: h`@media(min-width: ${Bt.m}px)`,
+  l: h`@media(min-width: ${Bt.l}px)`,
+  xl: h`@media(min-width: ${Bt.xl}px)`,
+  xxl: h`@media(min-width: ${Bt.xxl}px)`
+}, Ur = h`
     :host {
         transition: display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
     }
@@ -2817,7 +2813,7 @@ be([
 Ct = be([
   b("ds-dialog")
 ], Ct);
-const Wr = d`
+const Wr = h`
     .divider {
         border: none;
         margin: 0;
@@ -2869,7 +2865,7 @@ ns([
 ae = ns([
   b("ds-divider")
 ], ae);
-const Gr = d`
+const Gr = h`
     :host {
         display: inline-flex;
     }
@@ -2964,7 +2960,7 @@ Ht([
 bt = Ht([
   b("ds-hyperlink")
 ], bt);
-const Zr = d`
+const Jr = h`
     :host {
         display: inline-flex;
     }
@@ -2981,10 +2977,10 @@ const Zr = d`
         padding: 0;
     }
 `;
-var Jr = Object.defineProperty, Qr = Object.getOwnPropertyDescriptor, et = (t, e, i, r) => {
+var Zr = Object.defineProperty, Qr = Object.getOwnPropertyDescriptor, et = (t, e, i, r) => {
   for (var s = r > 1 ? void 0 : r ? Qr(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
-  return r && s && Jr(e, i, s), s;
+  return r && s && Zr(e, i, s), s;
 };
 let V = class extends At(f) {
   constructor() {
@@ -3069,7 +3065,7 @@ let V = class extends At(f) {
         `;
   }
 };
-V.styles = [Zr];
+V.styles = [Jr];
 et([
   a({ type: String })
 ], V.prototype, "variant", 2);
@@ -3103,7 +3099,7 @@ et([
 V = et([
   b("ds-icon-button")
 ], V);
-class Jt {
+class Zt {
   constructor() {
     this.icons = {}, this.handleChangeTheme = (e) => {
       this.theme = e;
@@ -3112,7 +3108,7 @@ class Jt {
     }, this.fetchIcon = async (e, i = {}) => (!this.theme && window.DS_THEME && (this.theme = window.DS_THEME), await this.getCachedIcon(e) || (this.icons[e] = this.loadIcon(e, i), this.icons[e])), ee.subscribe("theme", this.handleChangeTheme);
   }
   static getInstance() {
-    return Jt.instance || (Jt.instance = new Jt()), Jt.instance;
+    return Zt.instance || (Zt.instance = new Zt()), Zt.instance;
   }
   getCachedIcon(e) {
     return this.icons[e];
@@ -3124,7 +3120,7 @@ class Jt {
     }).then((s) => s.text()).catch((s) => ((s == null ? void 0 : s.name) !== "AbortError" && console.error(`Failed to fetch icon "${e}":`, s), "")) : Promise.resolve('<svg class="ds-icon"></svg>');
   }
 }
-const ni = Jt.getInstance();
+const ni = Zt.getInstance();
 var to = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, Ti = (t) => {
   throw TypeError(t);
 }, Wt = (t, e, i, r) => {
@@ -3183,7 +3179,7 @@ let yt = class extends f {
   }
 };
 Ee = /* @__PURE__ */ new WeakMap();
-yt.styles = d`
+yt.styles = h`
         :host {
             line-height: 0;
             display: inline-block;
@@ -3245,7 +3241,7 @@ Ls([
 Ls([
   y()
 ], Ue.prototype, "theme");
-const oo = d`
+const oo = h`
     :host {
         display: block;
         width: 100%;
@@ -3268,7 +3264,7 @@ const oo = d`
             font-size 0.2s;
         white-space: nowrap;
     }
-`, no = d`
+`, no = h`
     .container {
         position: relative;
     }
@@ -3299,7 +3295,7 @@ const oo = d`
     .input-field:focus {
         outline: none;
     }
-`, ao = d`
+`, ao = h`
     .container {
         padding: 16px 0 0 0;
     }
@@ -3639,7 +3635,7 @@ wt([
 nt = wt([
   b("ds-input", { skipTagAsComponentName: !0 })
 ], nt);
-const uo = d`
+const uo = h`
     :host {
         display: inline-flex;
     }
@@ -3762,7 +3758,7 @@ it([
 H = it([
   b("ds-link-button")
 ], H);
-const bo = d`
+const bo = h`
     .track {
         width: 100%;
         position: relative;
@@ -3776,7 +3772,7 @@ const bo = d`
         height: 100%;
         display: block;
     }
-`, yo = d`
+`, yo = h`
     .track.large {
         height: 4px;
     }
@@ -3795,7 +3791,7 @@ const bo = d`
     .dark .fill {
         background-color: var(--ds-color-white);
     }
-`, go = [yo], fo = d`
+`, go = [yo], fo = h`
     .track.large {
         height: 4px;
     }
@@ -3814,7 +3810,7 @@ const bo = d`
     .dark .fill {
         background-color: var(--ds-color-white);
     }
-`, xo = [fo], $o = d``, wo = [$o];
+`, xo = [fo], $o = h``, wo = [$o];
 var So = Object.defineProperty, Ms = (t, e, i, r) => {
   for (var s = void 0, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = n(e, i, s) || s);
@@ -3864,7 +3860,7 @@ Ms([
 Ms([
   a({ type: String })
 ], Ve.prototype, "size");
-const ko = d`
+const ko = h`
     .fill {
         width: 33%;
         transform: translateX(-100%);
@@ -3895,8 +3891,8 @@ Ie = Eo([
   b("ds-loader-bar", { skipTagAsComponentName: !0 })
 ], Ie);
 function qt(t, ...e) {
-  const i = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v0-2-0-canary-0"), r = bi(i);
-  return d`${r}`;
+  const i = String.raw({ raw: t }, ...e).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-2"), r = bi(i);
+  return h`${r}`;
 }
 const zo = qt`
     .container {
@@ -3978,7 +3974,7 @@ as([
 le = as([
   b("ds-loader-dots")
 ], le);
-const _o = d`
+const _o = h`
     .backdrop {
         display: flex;
         position: fixed;
@@ -4092,7 +4088,7 @@ He([
 Dt = He([
   b("ds-loader-logo")
 ], Dt);
-const Bo = d`
+const Bo = h`
     :host {
         display: contents;
     }
@@ -4109,7 +4105,7 @@ const Bo = d`
     .container.default ::slotted([slot='text']) {
         display: none;
     }
-`, Lo = d`
+`, Lo = h`
     .spinner {
         width: 24px;
         height: 24px;
@@ -4182,11 +4178,11 @@ ls([
 ce = ls([
   b("ds-loader-spinner")
 ], ce);
-const Fo = d`
+const Fo = h`
     :host {
         display: contents;
     }
-`, Ro = d`
+`, Ro = h`
     .container {
         display: grid;
         grid-template-columns: auto auto;
@@ -4249,7 +4245,7 @@ Ds([
 Be = Ds([
   b("ds-logo")
 ], Be);
-const Ho = d`
+const Ho = h`
     :host {
         display: inline-block;
     }
@@ -4389,7 +4385,7 @@ _t([
 at = _t([
   b("ds-map-pin")
 ], at);
-const Ko = d`
+const Ko = h`
     :host {
         transition: display 300ms ease allow-discrete;
     }
@@ -4525,7 +4521,7 @@ const Ko = d`
                 '. cancelButton confirmButton';
         }
     }
-`, Go = d`
+`, Go = h`
     .container.full-screen {
         position: fixed;
         height: 100%;
@@ -4542,7 +4538,7 @@ const Ko = d`
     .icon {
         margin-bottom: 32px;
     }
-`, Yo = d`
+`, Yo = h`
     .container.dialog {
         position: fixed;
         height: auto;
@@ -4576,11 +4572,11 @@ const Ko = d`
             padding: 48px;
         }
     }
-`, Xo = d`
+`, Xo = h`
     .container.fit {
         position: absolute;
     }
-`, Zo = d`
+`, Jo = h`
     .container.full-screen.v-align-default {
         justify-content: flex-start;
         padding-top: 24px;
@@ -4666,10 +4662,10 @@ const Ko = d`
         margin-bottom: 24px;
     }
 `;
-var Jo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, rt = (t, e, i, r) => {
+var Zo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, rt = (t, e, i, r) => {
   for (var s = r > 1 ? void 0 : r ? Qo(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
-  return r && s && Jo(e, i, s), s;
+  return r && s && Zo(e, i, s), s;
 };
 let W = class extends At(f) {
   constructor() {
@@ -4822,7 +4818,7 @@ let W = class extends At(f) {
     ));
   }
 };
-W.styles = [Go, Yo, Xo, Ko, Zo];
+W.styles = [Go, Yo, Xo, Ko, Jo];
 rt([
   a({ type: Boolean, reflect: !0, converter: m })
 ], W.prototype, "open", 2);
@@ -4914,7 +4910,7 @@ const js = (t) => class extends t {
 function Fs(t) {
   return !t || typeof t != "string" && typeof t != "number" ? !1 : (typeof t == "string" ? Number(t) : t) > 0;
 }
-const tn = d`
+const tn = h`
     :host {
         display: contents;
     }
@@ -5042,7 +5038,7 @@ cs([
 Le = cs([
   b("ds-password-input", { extendComponentNames: ["ds-text-input"] })
 ], Le);
-const nn = d`
+const nn = h`
     :host {
         display: contents;
     }
@@ -5122,8 +5118,8 @@ We([
 jt = We([
   b("ds-picker-item")
 ], jt);
-var cn = Object.defineProperty, hn = Object.getOwnPropertyDescriptor, Ei = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? hn(e, i) : e, o = t.length - 1, n; o >= 0; o--)
+var cn = Object.defineProperty, dn = Object.getOwnPropertyDescriptor, Ei = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? dn(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && cn(e, i, s), s;
 };
@@ -5155,7 +5151,7 @@ Ei([
 $s = Ei([
   b("ds-portal", { skipTagAsComponentName: !0 })
 ], $s);
-const dn = d`
+const hn = h`
     .fill {
         transition: all 200ms ease-in-out;
     }
@@ -5177,14 +5173,14 @@ let te = class extends Ve {
               ` : c;
   }
 };
-te.styles = [...bn(te, te, "styles"), dn];
+te.styles = [...bn(te, te, "styles"), hn];
 Oi([
   a({ type: Number })
 ], te.prototype, "progress", 2);
 te = Oi([
   b("ds-progress-bar", { skipTagAsComponentName: !0 })
 ], te);
-const yn = d`
+const yn = h`
     :host {
         display: contents;
     }
@@ -5266,7 +5262,7 @@ Kt([
 ft = Kt([
   b("ds-radio-button-group")
 ], ft);
-const xn = d`
+const xn = h`
     :host {
         display: block;
         flex: 0 0 auto;
@@ -5445,7 +5441,7 @@ F([
   a({ type: String, attribute: "size" })
 ], B.prototype, "_size", 2);
 F([
-  a({ type: Boolean, attribute: "error" })
+  a({ type: Boolean, attribute: "error", converter: m })
 ], B.prototype, "_error", 2);
 F([
   a({ type: String, attribute: "error-text" })
@@ -5480,7 +5476,7 @@ F([
 B = F([
   b("ds-radio-button")
 ], B);
-const Sn = d`
+const Sn = h`
     :host {
         display: flex;
         flex-direction: column;
@@ -5561,7 +5557,7 @@ ge([
 Et = ge([
   b("ds-radio-group", { skipTagAsComponentName: !0 })
 ], Et);
-const Cn = d`
+const Cn = h`
     :host {
         display: inline-block;
     }
@@ -5603,7 +5599,7 @@ var En = Object.defineProperty, On = Object.getOwnPropertyDescriptor, St = (t, e
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && En(e, i, s), s;
 };
-let J = class extends f {
+let Z = class extends f {
   constructor() {
     super(...arguments), this.readonly = !1, this.checked = !1, this.disabled = !1, this.mode = "light", this.size = "large", this.handleClickInput = (t) => {
       this.readonly && t.preventDefault();
@@ -5667,35 +5663,35 @@ let J = class extends f {
         `;
   }
 };
-J.styles = [Cn];
+Z.styles = [Cn];
 St([
   a({ type: Boolean, converter: m, reflect: !0 })
-], J.prototype, "readonly", 2);
+], Z.prototype, "readonly", 2);
 St([
   a({ type: String, reflect: !0 })
-], J.prototype, "name", 2);
+], Z.prototype, "name", 2);
 St([
   a({ type: String })
-], J.prototype, "value", 2);
+], Z.prototype, "value", 2);
 St([
   a({ type: Boolean, converter: m, reflect: !0 })
-], J.prototype, "checked", 2);
+], Z.prototype, "checked", 2);
 St([
   a({ type: Boolean, converter: m, reflect: !0 })
-], J.prototype, "disabled", 2);
+], Z.prototype, "disabled", 2);
 St([
   a({ type: String, reflect: !0 })
-], J.prototype, "mode", 2);
+], Z.prototype, "mode", 2);
 St([
   a({ type: String })
-], J.prototype, "size", 2);
+], Z.prototype, "size", 2);
 St([
   As({ slot: "", flatten: !0 })
-], J.prototype, "_defaultSlotNodes", 2);
-J = St([
+], Z.prototype, "_defaultSlotNodes", 2);
+Z = St([
   b("ds-radio")
-], J);
-const zn = d`
+], Z);
+const zn = h`
     :host {
         display: contents;
     }
@@ -5844,7 +5840,7 @@ ct([
 K = ct([
   b("ds-search-input")
 ], K);
-const _n = d`
+const _n = h`
     :host {
         display: block;
         width: 100%;
@@ -5854,11 +5850,11 @@ const _n = d`
     .helper-text {
         user-select: none;
     }
-`, Pn = d`
+`, Pn = h`
     .container {
         position: relative;
     }
-`, Nn = d`
+`, Nn = h`
     .input-field::-webkit-search-decoration,
     .input-field::-webkit-search-cancel-button,
     .input-field::-webkit-search-results-button,
@@ -5879,14 +5875,14 @@ const _n = d`
     .input-field:focus {
         outline: none;
     }
-`, Bn = d`
+`, Bn = h`
     .helper-text {
         cursor: pointer;
         display: flex;
         justify-content: flex-start;
         align-items: center;
     }
-`, Ln = d`
+`, Ln = h`
     .input-container {
         align-items: center;
         justify-content: center;
@@ -6088,12 +6084,12 @@ L([
 _ = L([
   b("ds-search")
 ], _);
-const jn = d`
+const jn = h`
     :host {
         display: contents;
     }
 `;
-var Fn = Object.defineProperty, Rn = Object.getOwnPropertyDescriptor, ht = (t, e, i, r) => {
+var Fn = Object.defineProperty, Rn = Object.getOwnPropertyDescriptor, dt = (t, e, i, r) => {
   for (var s = r > 1 ? void 0 : r ? Rn(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && Fn(e, i, s), s;
@@ -6125,6 +6121,7 @@ let G = class extends At(f) {
   get classes() {
     return {
       nav: !0,
+      "ds-blur": !0,
       "scroll-left": this.hasScrollLeft,
       "scroll-right": this.hasScrollRight
     };
@@ -6238,7 +6235,7 @@ let G = class extends At(f) {
                 aria-hidden=${!this.openItems}
             >
                 <div
-                    class="dropdown"
+                    class="dropdown ds-blur"
                 >
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
@@ -6267,7 +6264,7 @@ let G = class extends At(f) {
                 aria-hidden=${!this.openCtas}
             >
                 <div
-                    class="dropdown"
+                    class="dropdown ds-blur"
 
                 >
                     <slot name="actions"></slot>
@@ -6280,37 +6277,37 @@ let G = class extends At(f) {
   }
 };
 G.styles = [jn];
-ht([
+dt([
   a({ type: String, attribute: "dropdown-button-text" })
 ], G.prototype, "dropdownButtonText", 2);
-ht([
+dt([
   a({ type: Number, attribute: "selected-index" })
 ], G.prototype, "selectedIndex", 2);
-ht([
+dt([
   y()
 ], G.prototype, "openItems", 2);
-ht([
+dt([
   y()
 ], G.prototype, "openCtas", 2);
-ht([
+dt([
   y()
 ], G.prototype, "hasScrollLeft", 2);
-ht([
+dt([
   y()
 ], G.prototype, "hasScrollRight", 2);
-ht([
+dt([
   tt({ slot: "items" })
 ], G.prototype, "items", 2);
-ht([
+dt([
   tt({ slot: "actions" })
 ], G.prototype, "ctas", 2);
-ht([
+dt([
   lt(".items-container")
 ], G.prototype, "itemsContainer", 2);
-G = ht([
+G = dt([
   b("ds-secondary-navigation")
 ], G);
-const Un = d`
+const Un = h`
     :host {
         display: flex;
         flex: 1 1 auto;
@@ -6359,12 +6356,12 @@ const Un = d`
         flex-shrink: 0;
     }
 `;
-var Vn = Object.defineProperty, Hn = Object.getOwnPropertyDescriptor, hs = (t, e, i, r) => {
+var Vn = Object.defineProperty, Hn = Object.getOwnPropertyDescriptor, ds = (t, e, i, r) => {
   for (var s = r > 1 ? void 0 : r ? Hn(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && Vn(e, i, s), s;
 };
-let he = class extends f {
+let de = class extends f {
   constructor() {
     super(...arguments), this.size = "medium", this.fullWidth = !1;
   }
@@ -6400,23 +6397,23 @@ let he = class extends f {
         `;
   }
 };
-he.styles = [Un];
-hs([
+de.styles = [Un];
+ds([
   a({ type: String })
-], he.prototype, "size", 2);
-hs([
+], de.prototype, "size", 2);
+ds([
   a({
     type: Boolean,
     converter: m,
     attribute: "full-width"
   })
-], he.prototype, "fullWidth", 2);
-hs([
+], de.prototype, "fullWidth", 2);
+ds([
   tt({ slot: "", flatten: !0 })
-], he.prototype, "slottedElements", 2);
-he = hs([
+], de.prototype, "slottedElements", 2);
+de = ds([
   b("ds-segmented-control")
-], he);
+], de);
 const ws = class {
   static handleKeydownWhenOpen(e, i) {
     switch (this.KEYS_WHEN_OPEN.has(e.key) && e.preventDefault(), e.key) {
@@ -6447,7 +6444,7 @@ const ws = class {
 };
 ws.KEYS_WHEN_OPEN = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End", "Enter", "Escape", " "]), ws.KEYS_WHEN_CLOSED = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", " "]);
 let li = ws;
-const Wn = d`
+const Wn = h`
     :host {
         display: contents;
     }
@@ -6623,8 +6620,8 @@ let I = class extends f {
       if (o.nodeType !== 3)
         return n;
       if (o.textContent.trim() === "") return "";
-      const h = document.createElement("span");
-      return h.classList.add("text"), h.appendChild(n), h;
+      const d = document.createElement("span");
+      return d.classList.add("text"), d.appendChild(n), d;
     });
     return l`
             <div class="select-outline">
@@ -6728,7 +6725,7 @@ R([
 I = R([
   b("ds-select")
 ], I);
-const Gn = d`
+const Gn = h`
     :host {
         display: inline-block;
     }
@@ -6790,9 +6787,9 @@ const ci = (t, e, i = 10) => {
   const r = Math.pow(10, i), s = Math.round(t * r), o = Math.round(e * r);
   return (s + o) / r;
 }, Te = ({ step: t = 1, min: e = 0, max: i = 100, proposedValue: r, role: s, currentValues: o }) => {
-  const n = s === "min" ? 1 : 2, h = r;
+  const n = s === "min" ? 1 : 2, d = r;
   let u, g = e, $ = i;
-  return Number.isFinite(h) ? (Object.keys(o).forEach((v) => {
+  return Number.isFinite(d) ? (Object.keys(o).forEach((v) => {
     if (Number(v) < n && o[v] >= g) {
       if (g = o[v], t === 0) return;
       let x = e;
@@ -6806,11 +6803,11 @@ const ci = (t, e, i = 10) => {
       $ = x;
     }
     g = ms({ value: g, min: e, max: i }), $ = ms({ value: $, min: e, max: i });
-  }), h <= g || h >= $ ? (u = Math.max(g, Math.min($, h)), { stepValue: u, minLimit: g, maxLimit: $ }) : t === 0 ? { stepValue: h, minLimit: g, maxLimit: $ } : (u = Math.round((h - g) / t) * t + g, u = h - u > $ - h ? $ : u, u = ms({ value: u, min: g, max: $ }), { stepValue: u, minLimit: g, maxLimit: $ })) : { stepValue: o[String(n)], minLimit: g, maxLimit: $ };
-}, Zn = ({ value: t, fractionDigits: e }) => {
+  }), d <= g || d >= $ ? (u = Math.max(g, Math.min($, d)), { stepValue: u, minLimit: g, maxLimit: $ }) : t === 0 ? { stepValue: d, minLimit: g, maxLimit: $ } : (u = Math.round((d - g) / t) * t + g, u = d - u > $ - d ? $ : u, u = ms({ value: u, min: g, max: $ }), { stepValue: u, minLimit: g, maxLimit: $ })) : { stepValue: o[String(n)], minLimit: g, maxLimit: $ };
+}, Jn = ({ value: t, fractionDigits: e }) => {
   const i = Math.pow(10, e);
   return Math.round(t * i) / i;
-}, Jn = d`
+}, Zn = h`
     :host {
         display: block;
     }
@@ -6965,7 +6962,7 @@ let w = class extends At(f) {
     return e === 0 ? 0 : (t - this.min) / e * 100;
   }
   handleChange({ value: t, role: e }) {
-    const i = Zn({ value: t, fractionDigits: this.maximumFractionDigits }), r = e === "min" ? "valueMin" : "valueMax";
+    const i = Jn({ value: t, fractionDigits: this.maximumFractionDigits }), r = e === "min" ? "valueMin" : "valueMax";
     this[r] !== i && (this[r] = i, this.dispatchEvent(
       new CustomEvent("change", {
         bubbles: !0,
@@ -7081,7 +7078,7 @@ let w = class extends At(f) {
       formattedValue: s,
       unitSymbol: o,
       unitSymbolPosition: n
-    } = this.formatNumber(r), h = this.unitSymbolPosition ?? n, u = this.unitSymbol ?? o, g = u ? h === "left" ? `${u} ${s}` : `${s} ${u}` : `${s}`, $ = i ? "number" : "text", v = i ? String(r ?? "") : g, x = t === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, S = typeof this.initialValueMax == "number" ? t === 1 ? "Start value" : "End value" : "Value", T = x ?? S;
+    } = this.formatNumber(r), d = this.unitSymbolPosition ?? n, u = this.unitSymbol ?? o, g = u ? d === "left" ? `${u} ${s}` : `${s} ${u}` : `${s}`, $ = i ? "number" : "text", v = i ? String(r ?? "") : g, x = t === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, S = typeof this.initialValueMax == "number" ? t === 1 ? "Start value" : "End value" : "Value", T = x ?? S;
     return l`
             <div class="input-wrapper">
                 <input
@@ -7144,7 +7141,7 @@ let w = class extends At(f) {
         `;
   }
 };
-w.styles = [Jn, ea, sa, Qn, ta];
+w.styles = [Zn, ea, sa, Qn, ta];
 k([
   a({ type: Number })
 ], w.prototype, "min", 2);
@@ -7248,12 +7245,12 @@ k([
 w = k([
   b("ds-slider")
 ], w);
-const oa = d`
+const oa = h`
     :host {
         display: block;
         width: 100%;
     }
-`, na = d`
+`, na = h`
     nav {
         display: flex;
         justify-content: flex-start;
@@ -7309,7 +7306,7 @@ const oa = d`
     .nav-container:hover .nav-arrow {
         visibility: visible;
     }
-`, aa = d`
+`, aa = h`
     ::slotted([slot='tab']) {
         white-space: nowrap;
         -webkit-user-select: none;
@@ -7327,7 +7324,7 @@ const oa = d`
     ::slotted([slot='tab'][selected]) {
         cursor: auto;
     }
-`, la = d`
+`, la = h`
     ::slotted([slot='panel']) {
         display: none;
     }
@@ -7345,10 +7342,10 @@ const oa = d`
     "icon-button-variant": "primary"
   }
 };
-var ha = Object.defineProperty, da = Object.getOwnPropertyDescriptor, X = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? da(e, i) : e, o = t.length - 1, n; o >= 0; o--)
+var da = Object.defineProperty, ha = Object.getOwnPropertyDescriptor, X = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? ha(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
-  return r && s && ha(e, i, s), s;
+  return r && s && da(e, i, s), s;
 };
 let D = class extends f {
   constructor() {
@@ -7436,9 +7433,9 @@ let D = class extends f {
   }
   selectTab(t) {
     var e, i, r, s, o;
-    (e = this.tabs) == null || e.forEach((h, u) => {
-      h.removeAttribute("selected"), h.setAttribute("aria-selected", u === t ? "true" : "false");
-    }), (i = this.tabs[t]) == null || i.setAttribute("selected", ""), this.panels.forEach((h) => h.removeAttribute("selected")), (r = this.panels[t]) == null || r.setAttribute("selected", "");
+    (e = this.tabs) == null || e.forEach((d, u) => {
+      d.removeAttribute("selected"), d.setAttribute("aria-selected", u === t ? "true" : "false");
+    }), (i = this.tabs[t]) == null || i.setAttribute("selected", ""), this.panels.forEach((d) => d.removeAttribute("selected")), (r = this.panels[t]) == null || r.setAttribute("selected", "");
     const n = (s = this.tabs) == null ? void 0 : s[this.selectedTab];
     this.nav.scrollLeft = (n == null ? void 0 : n.offsetLeft) - ((o = this.nav) == null ? void 0 : o.offsetWidth) / 2;
   }
@@ -7621,7 +7618,7 @@ Gt([
 xt = Gt([
   b("ds-tag")
 ], xt);
-const ba = d`
+const ba = h`
     :host {
         display: contents;
     }
@@ -7712,7 +7709,7 @@ kt([
 Q = kt([
   b("ds-text")
 ], Q);
-const fa = d`
+const fa = h`
     :host {
         display: contents;
     }
@@ -7860,7 +7857,7 @@ let Ft = class extends pt {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, e) => {
-      const i = "/0.2.0-canary.0", r = `https://ds-assets.cupra.com${i}/styles/${this.theme}/theme.css`;
+      const i = "/1.0.0-canary.2", r = `https://ds-assets.cupra.com${i}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const s = `ui-kit-theme-${i}`, o = document.getElementById(s), n = document.createElement("link");
@@ -7891,7 +7888,7 @@ xe([
 Ft = xe([
   b("ds-theme-provider")
 ], Ft);
-const Ta = d`
+const Ta = h`
     :host {
         display: contents;
     }
@@ -7997,7 +7994,7 @@ class Qt {
         exiting: !1
       };
       n.timeoutId = window.setTimeout(() => {
-        this.toasts.find((h) => h.id === i).exiting = !0, this.notifySubscribers();
+        this.toasts.find((d) => d.id === i).exiting = !0, this.notifySubscribers();
       }, s), this.toasts = [...this.toasts, n], this.notifySubscribers();
     }, this.handleRemoveToast = (e) => {
       const { id: i, referenceId: r } = e.detail || {};
@@ -8029,23 +8026,23 @@ class Qt {
     this.subscribers.forEach((i) => i(e));
   }
 }
-const hi = Qt.getInstance();
+const di = Qt.getInstance();
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { I: Ia } = tr, di = () => document.createComment(""), Ce = (t, e, i) => {
+const { I: Ia } = tr, hi = () => document.createComment(""), Ce = (t, e, i) => {
   var r;
   const s = t._$AA.parentNode, o = e === void 0 ? t._$AB : e._$AA;
   if (i === void 0) {
-    const n = s.insertBefore(di(), o), h = s.insertBefore(di(), o);
-    i = new Ia(n, h, t, t.options);
+    const n = s.insertBefore(hi(), o), d = s.insertBefore(hi(), o);
+    i = new Ia(n, d, t, t.options);
   } else {
-    const n = i._$AB.nextSibling, h = i._$AM, u = h !== t;
+    const n = i._$AB.nextSibling, d = i._$AM, u = d !== t;
     if (u) {
       let g;
-      (r = i._$AQ) == null || r.call(i, t), i._$AM = t, i._$AP !== void 0 && (g = t._$AU) !== h._$AU && i._$AP(g);
+      (r = i._$AQ) == null || r.call(i, t), i._$AM = t, i._$AP !== void 0 && (g = t._$AU) !== d._$AU && i._$AP(g);
     }
     if (n !== o || u) {
       let g = i._$AA;
@@ -8077,7 +8074,7 @@ const pi = (t, e, i) => {
     i === void 0 ? i = e : e !== void 0 && (r = e);
     const s = [], o = [];
     let n = 0;
-    for (const h of t) s[n] = r ? r(h, n) : n, o[n] = i(h, n), n++;
+    for (const d of t) s[n] = r ? r(d, n) : n, o[n] = i(d, n), n++;
     return { values: o, keys: s };
   }
   render(t, e, i) {
@@ -8086,20 +8083,20 @@ const pi = (t, e, i) => {
   update(t, [e, i, r]) {
     const s = Pa(t), { values: o, keys: n } = this.dt(e, i, r);
     if (!Array.isArray(s)) return this.ut = n, o;
-    const h = this.ut ?? (this.ut = []), u = [];
+    const d = this.ut ?? (this.ut = []), u = [];
     let g, $, v = 0, x = s.length - 1, S = 0, T = o.length - 1;
     for (; v <= x && S <= T; ) if (s[v] === null) v++;
     else if (s[x] === null) x--;
-    else if (h[v] === n[S]) u[S] = Nt(s[v], o[S]), v++, S++;
-    else if (h[x] === n[T]) u[T] = Nt(s[x], o[T]), x--, T--;
-    else if (h[v] === n[T]) u[T] = Nt(s[v], o[T]), Ce(t, u[T + 1], s[v]), v++, T--;
-    else if (h[x] === n[S]) u[S] = Nt(s[x], o[S]), Ce(t, s[v], s[x]), x--, S++;
-    else if (g === void 0 && (g = pi(n, S, T), $ = pi(h, v, x)), g.has(h[v])) if (g.has(h[x])) {
-      const z = $.get(n[S]), dt = z !== void 0 ? s[z] : null;
-      if (dt === null) {
+    else if (d[v] === n[S]) u[S] = Nt(s[v], o[S]), v++, S++;
+    else if (d[x] === n[T]) u[T] = Nt(s[x], o[T]), x--, T--;
+    else if (d[v] === n[T]) u[T] = Nt(s[v], o[T]), Ce(t, u[T + 1], s[v]), v++, T--;
+    else if (d[x] === n[S]) u[S] = Nt(s[x], o[S]), Ce(t, s[v], s[x]), x--, S++;
+    else if (g === void 0 && (g = pi(n, S, T), $ = pi(d, v, x)), g.has(d[v])) if (g.has(d[x])) {
+      const z = $.get(n[S]), ht = z !== void 0 ? s[z] : null;
+      if (ht === null) {
         const Se = Ce(t, s[v]);
         Nt(Se, o[S]), u[S] = Se;
-      } else u[S] = Nt(dt, o[S]), Ce(t, s[v], dt), s[z] = null;
+      } else u[S] = Nt(ht, o[S]), Ce(t, s[v], ht), s[z] = null;
       S++;
     } else vs(s[x]), x--;
     else vs(s[v]), v++;
@@ -8113,7 +8110,7 @@ const pi = (t, e, i) => {
     }
     return this.ut = n, _a(t, u), ut;
   }
-}), Ba = d`
+}), Ba = h`
     :host {
         display: contents;
     }
@@ -8154,7 +8151,7 @@ const pi = (t, e, i) => {
         left: 1rem;
         align-items: flex-start;
     }
-`, La = d`
+`, La = h`
     .toast {
         margin-bottom: 1rem;
         animation: toast-in-top 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
@@ -8227,7 +8224,7 @@ let Me = class extends f {
     super(...arguments), this.position = "top-right", this.toasts = [], this.unsubscribe = null;
   }
   connectedCallback() {
-    super.connectedCallback(), this.unsubscribe = hi.subscribe((t) => {
+    super.connectedCallback(), this.unsubscribe = di.subscribe((t) => {
       this.toasts = t;
     });
   }
@@ -8238,7 +8235,7 @@ let Me = class extends f {
     const e = t.target;
     if (e.classList.contains("exiting") && (t.animationName === "toast-out-left" || t.animationName === "toast-out-right")) {
       const i = e.getAttribute("data-id");
-      i && hi.removeToast(i);
+      i && di.removeToast(i);
     }
   }
   getToastMessageTemplate(t) {
@@ -8302,7 +8299,7 @@ var ja = Object.defineProperty, Fa = Object.getOwnPropertyDescriptor, qe = (t, e
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && ja(e, i, s), s;
 };
-let de = class extends O {
+let he = class extends O {
   constructor() {
     super(...arguments), this.checked = !1, this.checkedText = "", this.uncheckedText = "", this.rounded = !0;
   }
@@ -8345,20 +8342,20 @@ let de = class extends O {
 };
 qe([
   a({ type: Boolean, converter: m, reflect: !0 })
-], de.prototype, "checked", 2);
+], he.prototype, "checked", 2);
 qe([
   a({ type: String, attribute: "checked-text" })
-], de.prototype, "checkedText", 2);
+], he.prototype, "checkedText", 2);
 qe([
   a({ type: String, attribute: "unchecked-text" })
-], de.prototype, "uncheckedText", 2);
+], he.prototype, "uncheckedText", 2);
 qe([
   a({ type: Boolean, converter: m })
-], de.prototype, "rounded", 2);
-de = qe([
+], he.prototype, "rounded", 2);
+he = qe([
   b("ds-toggle-button", { skipTagAsComponentName: !0, extendComponentNames: ["ds-button"] })
-], de);
-const Ra = d`
+], he);
+const Ra = h`
     .container {
         display: flex;
         justify-content: flex-start;
@@ -8485,7 +8482,7 @@ we([
 It = we([
   b("ds-toggle-switch")
 ], It);
-const Ha = d`
+const Ha = h`
     :host {
         position: relative;
         display: inline-block;
@@ -8504,7 +8501,7 @@ const Ha = d`
         grid-template-columns: 1fr 1fr;
         justify-content: flex-end;
     }
-`, Wa = d`
+`, Wa = h`
     .tooltip {
         width: max-content;
         white-space: normal;
@@ -8573,7 +8570,7 @@ const Ha = d`
         bottom: 0;
         transform: none;
     }
-`, qa = d`
+`, qa = h`
     .arrow {
         width: 0;
         height: 0;
@@ -8821,13 +8818,13 @@ q([
 M = q([
   b("ds-tooltip")
 ], M);
-const Ya = d`
+const Ya = h`
     :host {
         display: contents;
     }
 `;
-var Xa = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, Ke = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? Za(e, i) : e, o = t.length - 1, n; o >= 0; o--)
+var Xa = Object.defineProperty, Ja = Object.getOwnPropertyDescriptor, Ke = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? Ja(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && Xa(e, i, s), s;
 };
@@ -8913,7 +8910,7 @@ Ke([
 Rt = Ke([
   b("ds-avatar")
 ], Rt);
-const Ja = d`
+const Za = h`
     :host {
         display: contents;
     }
@@ -8954,7 +8951,7 @@ let De = class extends f {
         `;
   }
 };
-De.styles = [Ja];
+De.styles = [Za];
 Us([
   a({ type: Number, attribute: "steps", reflect: !0 })
 ], De.prototype, "steps", 2);
@@ -8964,12 +8961,12 @@ Us([
 De = Us([
   b("ds-stepper")
 ], De);
-const el = d`
+const el = h`
     :host {
         display: contents;
     }
 `;
-var sl = Object.defineProperty, il = Object.getOwnPropertyDescriptor, ds = (t, e, i, r) => {
+var sl = Object.defineProperty, il = Object.getOwnPropertyDescriptor, hs = (t, e, i, r) => {
   for (var s = r > 1 ? void 0 : r ? il(e, i) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
   return r && s && sl(e, i, s), s;
@@ -9019,19 +9016,19 @@ let pe = class extends At(f) {
   }
 };
 pe.styles = [el];
-ds([
+hs([
   a({ type: String, converter: Fe })
 ], pe.prototype, "size", 2);
-ds([
+hs([
   As({ slot: "header", flatten: !0 })
 ], pe.prototype, "headerItems", 2);
-ds([
+hs([
   As({ slot: "footer", flatten: !0 })
 ], pe.prototype, "footerItems", 2);
-pe = ds([
+pe = hs([
   b("ds-static-box")
 ], pe);
-const rl = d`
+const rl = h`
     :host {
         display: contents;
     }
@@ -9070,7 +9067,7 @@ let ue = class extends f {
   }
   get contentTemplate() {
     return this.error ? c : l`
-            <div part="container" class=${p(this.classes)} data-testid="ds-interactive-card-container">
+            <div part="container" class=${p(this.classes)} data-testid="ds-interactive-card-container" tabindex="0">
                 <header class="header" part="header">
                     <div class="header-main">
                         <slot name="title" class="title" part="title"></slot>
@@ -9114,7 +9111,7 @@ ps([
 ue = ps([
   b("ds-interactive-card")
 ], ue);
-const al = d`
+const al = h`
     :host {
         display: contents;
     }
@@ -9145,7 +9142,18 @@ let je = class extends f {
       const e = t.target.assignedElements().find((i) => i.tagName === "DS-BUTTON");
       this.setMainCtaSize(e);
     }, this.setMainCtaSize = (t) => {
-      t && (t.size = { xxl: "large", xl: "large", l: "medium", m: "medium", s: "small", xs: "small", xxs: "small" });
+      t && t.setAttribute(
+        "size",
+        JSON.stringify({
+          xxl: "large",
+          xl: "large",
+          l: "medium",
+          m: "medium",
+          s: "small",
+          xs: "small",
+          xxs: "small"
+        })
+      );
     };
   }
   firstUpdated(t) {
@@ -9161,7 +9169,15 @@ let je = class extends f {
       "@click": this.toggleModal,
       "data-testid": "modal-button",
       "data-aria-label": "more actions",
-      size: { xxl: "large", xl: "large", l: "medium", m: "medium", s: "small", xs: "small", xxs: "small" }
+      size: JSON.stringify({
+        xxl: "large",
+        xl: "large",
+        l: "medium",
+        m: "medium",
+        s: "small",
+        xs: "small",
+        xxs: "small"
+      })
     });
   }
   classes() {