@cupra/ui-kit 1.1.0-canary.4 → 1.1.0-canary.6

package/dist/components/ds-media-control/ds-media-control.d.ts

@@ -0,0 +1,17 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import type { DsMediaControlAttrs } from './ds-media-control.types.ts';
+export declare class DsMediaControl extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    state: DsMediaControlAttrs['state'];
+    size: DsMediaControlAttrs['size'];
+    progress: DsMediaControlAttrs['progress'];
+    private get normalizedProgress();
+    protected get classes(): Record<string, boolean>;
+    private get iconSize();
+    private get iconName();
+    private get iconTemplate();
+    private handleToggle;
+    private onKeyDown;
+    private get progressTemplate();
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/ds-media-control/ds-media-control.js

@@ -0,0 +1,107 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../../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 { property as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, s, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? v(s, r) : s, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (t = (o ? n(s, r, t) : n(t)) || t);
+  return o && t && y(s, r, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.state = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
+      e.stopPropagation();
+      const s = this.state === "play" ? "pause" : "play";
+      this.state = s;
+      const r = s === "play" ? "ds-media-control:play" : "ds-media-control:pause";
+      this.dispatchEvent(new CustomEvent(r, { bubbles: !0, composed: !0 }));
+    }, this.onKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleToggle(e));
+    };
+  }
+  get normalizedProgress() {
+    const e = Number(this.progress ?? 0);
+    return Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.size]: !!this.size,
+      [this.state]: !!this.state
+    };
+  }
+  get iconSize() {
+    switch (this.size) {
+      case "large":
+        return 24;
+      case "small":
+        return 16;
+      default:
+        return 20;
+    }
+  }
+  get iconName() {
+    return this.state === "play" ? "pause" : "play";
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName,
+      size: this.iconSize
+    });
+  }
+  get progressTemplate() {
+    const e = this.size === "large" ? 46 : this.size === "small" ? 30 : 38, r = e / 2 - 2 / 2, o = r - 1, t = 2 * Math.PI * r, a = this.normalizedProgress / 100, n = t.toFixed(3), m = (t * (1 - a)).toFixed(3), h = `${-e / 2} ${-e / 2} ${e} ${e}`;
+    return p`
+            <svg part="progress" class="progress" viewBox="${h}" aria-hidden="true" focusable="false">
+                <circle
+                    class="indicator"
+                    cx="0"
+                    cy="0"
+                    r="${o}"
+                    fill="none"
+                    stroke-dasharray="${n}"
+                    stroke-dashoffset="${m}"
+                    vector-effect="non-scaling-stroke"
+                ></circle>
+            </svg>
+        `;
+  }
+  render() {
+    const e = this.state === "play" ? "pause" : "play";
+    return p`
+            <div
+                part="container"
+                class=${g(this.classes)}
+                role="button"
+                tabindex="0"
+                aria-label=${`${e} media ${this.size}`}
+                @click=${this.handleToggle}
+                @keydown=${this.onKeyDown}
+            >
+                ${this.progressTemplate}
+                ${this.iconTemplate}
+            </div>
+        `;
+  }
+};
+i.styles = [f];
+c([
+  l({ type: String, reflect: !0 })
+], i.prototype, "state", 2);
+c([
+  l({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+c([
+  l({ type: Number, reflect: !0 })
+], i.prototype, "progress", 2);
+i = c([
+  d("ds-media-control")
+], i);
+export {
+  i as DsMediaControl
+};

package/dist/components/ds-media-control/ds-media-control.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsMediaControl } from './ds-media-control';
+import './ds-media-control.ts';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-media-control': DsMediaControl;
+    }
+}

package/dist/components/ds-media-control/ds-media-control.types.d.ts

@@ -0,0 +1,8 @@
+import { CommonAttrs } from '../../types/types.ts';
+export type state = 'play' | 'pause';
+export type size = 'large' | 'medium' | 'small';
+export type DsMediaControlAttrs = {
+    state?: state;
+    size?: size;
+    progress?: number;
+} & CommonAttrs;

package/dist/components/ds-media-control/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist/components/ds-media-control/styles/common.styles.js

@@ -0,0 +1,54 @@
+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 "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = r`
+    :host {
+        display: contents;
+    }
+
+    [part='container'] {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3));
+        user-select: none;
+        cursor: pointer;
+        outline: none;
+    }
+
+    .container.small {
+        width: 32px;
+        height: 32px;
+    }
+    .container.medium {
+        width: 40px;
+        height: 40px;
+    }
+    .container.large {
+        width: 48px;
+        height: 48px;
+    }
+
+    .progress {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    .progress .indicator {
+        stroke: var(--ds-icon-color);
+        stroke-width: 1.5px;
+        transform: rotate(-90deg);
+    }
+
+    [part='container']:focus-visible {
+        box-shadow: 0 0 0 2px var(--ds-color-focus-ring, rgba(255, 255, 255, 0.6));
+    }
+`;
+export {
+  s as commonStyles
+};

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

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.1.0-canary.4", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.1.0-canary.6", 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");

package/dist/components/index.d.ts

@@ -63,3 +63,4 @@ import './ds-toast-message/ds-toast-message.ts';
 import './ds-toggle-button/ds-toggle-button.ts';
 import './ds-toggle-switch/ds-toggle-switch.ts';
 import './ds-tooltip/ds-tooltip.ts';
+import './ds-media-control/ds-media-control.ts';

package/dist/index.js

@@ -63,7 +63,8 @@ import "./components/ds-toast-message/ds-toast-message.js";
 import "./components/ds-toggle-button/ds-toggle-button.js";
 import "./components/ds-toggle-switch/ds-toggle-switch.js";
 import "./components/ds-tooltip/ds-tooltip.js";
-import { iconNames as No } from "./components/ds-icon/iconNames.js";
+import "./components/ds-media-control/ds-media-control.js";
+import { iconNames as bo } from "./components/ds-icon/iconNames.js";
 export {
-  No as iconNames
+  bo as iconNames
 };

package/dist/utils/IconsManager.js

@@ -25,7 +25,7 @@ class f {
     }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.4"), h = globalThis;
+const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.6"), h = globalThis;
 let n = h[c];
 n || (n = new f(), Object.defineProperty(h, c, {
   value: n,

package/dist/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.4"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.6"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

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.1.0-canary.4/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.1.0-canary.6/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-1-0-canary-4"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-6"), 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-1-0-canary-4"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-6"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist-react/components/ds-media-control/ds-media-control.d.ts

@@ -0,0 +1,17 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import type { DsMediaControlAttrs } from './ds-media-control.types.ts';
+export declare class DsMediaControl extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    state: DsMediaControlAttrs['state'];
+    size: DsMediaControlAttrs['size'];
+    progress: DsMediaControlAttrs['progress'];
+    private get normalizedProgress();
+    protected get classes(): Record<string, boolean>;
+    private get iconSize();
+    private get iconName();
+    private get iconTemplate();
+    private handleToggle;
+    private onKeyDown;
+    private get progressTemplate();
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/components/ds-media-control/ds-media-control.js

@@ -0,0 +1,107 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../../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 { property as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, s, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? v(s, r) : s, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (t = (o ? n(s, r, t) : n(t)) || t);
+  return o && t && y(s, r, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.state = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
+      e.stopPropagation();
+      const s = this.state === "play" ? "pause" : "play";
+      this.state = s;
+      const r = s === "play" ? "ds-media-control:play" : "ds-media-control:pause";
+      this.dispatchEvent(new CustomEvent(r, { bubbles: !0, composed: !0 }));
+    }, this.onKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleToggle(e));
+    };
+  }
+  get normalizedProgress() {
+    const e = Number(this.progress ?? 0);
+    return Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.size]: !!this.size,
+      [this.state]: !!this.state
+    };
+  }
+  get iconSize() {
+    switch (this.size) {
+      case "large":
+        return 24;
+      case "small":
+        return 16;
+      default:
+        return 20;
+    }
+  }
+  get iconName() {
+    return this.state === "play" ? "pause" : "play";
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName,
+      size: this.iconSize
+    });
+  }
+  get progressTemplate() {
+    const e = this.size === "large" ? 46 : this.size === "small" ? 30 : 38, r = e / 2 - 2 / 2, o = r - 1, t = 2 * Math.PI * r, a = this.normalizedProgress / 100, n = t.toFixed(3), m = (t * (1 - a)).toFixed(3), h = `${-e / 2} ${-e / 2} ${e} ${e}`;
+    return p`
+            <svg part="progress" class="progress" viewBox="${h}" aria-hidden="true" focusable="false">
+                <circle
+                    class="indicator"
+                    cx="0"
+                    cy="0"
+                    r="${o}"
+                    fill="none"
+                    stroke-dasharray="${n}"
+                    stroke-dashoffset="${m}"
+                    vector-effect="non-scaling-stroke"
+                ></circle>
+            </svg>
+        `;
+  }
+  render() {
+    const e = this.state === "play" ? "pause" : "play";
+    return p`
+            <div
+                part="container"
+                class=${g(this.classes)}
+                role="button"
+                tabindex="0"
+                aria-label=${`${e} media ${this.size}`}
+                @click=${this.handleToggle}
+                @keydown=${this.onKeyDown}
+            >
+                ${this.progressTemplate}
+                ${this.iconTemplate}
+            </div>
+        `;
+  }
+};
+i.styles = [f];
+c([
+  l({ type: String, reflect: !0 })
+], i.prototype, "state", 2);
+c([
+  l({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+c([
+  l({ type: Number, reflect: !0 })
+], i.prototype, "progress", 2);
+i = c([
+  d("ds-media-control")
+], i);
+export {
+  i as DsMediaControl
+};

package/dist-react/components/ds-media-control/ds-media-control.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsMediaControl } from './ds-media-control';
+import './ds-media-control.ts';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-media-control': DsMediaControl;
+    }
+}

package/dist-react/components/ds-media-control/ds-media-control.types.d.ts

@@ -0,0 +1,8 @@
+import { CommonAttrs } from '../../types/types.ts';
+export type state = 'play' | 'pause';
+export type size = 'large' | 'medium' | 'small';
+export type DsMediaControlAttrs = {
+    state?: state;
+    size?: size;
+    progress?: number;
+} & CommonAttrs;

package/dist-react/components/ds-media-control/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/components/ds-media-control/styles/common.styles.js

@@ -0,0 +1,54 @@
+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 "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = r`
+    :host {
+        display: contents;
+    }
+
+    [part='container'] {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        background: var(--ds-color-surface-contrast, rgba(9, 9, 11, 0.3));
+        user-select: none;
+        cursor: pointer;
+        outline: none;
+    }
+
+    .container.small {
+        width: 32px;
+        height: 32px;
+    }
+    .container.medium {
+        width: 40px;
+        height: 40px;
+    }
+    .container.large {
+        width: 48px;
+        height: 48px;
+    }
+
+    .progress {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    .progress .indicator {
+        stroke: var(--ds-icon-color);
+        stroke-width: 1.5px;
+        transform: rotate(-90deg);
+    }
+
+    [part='container']:focus-visible {
+        box-shadow: 0 0 0 2px var(--ds-color-focus-ring, rgba(255, 255, 255, 0.6));
+    }
+`;
+export {
+  s as commonStyles
+};

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

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/1.1.0-canary.4", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/1.1.0-canary.6", 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");

package/dist-react/components/index.d.ts

@@ -63,3 +63,4 @@ import './ds-toast-message/ds-toast-message.ts';
 import './ds-toggle-button/ds-toggle-button.ts';
 import './ds-toggle-switch/ds-toggle-switch.ts';
 import './ds-tooltip/ds-tooltip.ts';
+import './ds-media-control/ds-media-control.ts';

package/dist-react/index.js

@@ -63,7 +63,8 @@ import "./components/ds-toast-message/ds-toast-message.js";
 import "./components/ds-toggle-button/ds-toggle-button.js";
 import "./components/ds-toggle-switch/ds-toggle-switch.js";
 import "./components/ds-tooltip/ds-tooltip.js";
-import { iconNames as No } from "./components/ds-icon/iconNames.js";
+import "./components/ds-media-control/ds-media-control.js";
+import { iconNames as bo } from "./components/ds-icon/iconNames.js";
 export {
-  No as iconNames
+  bo as iconNames
 };

package/dist-react/utils/IconsManager.js

@@ -25,7 +25,7 @@ class f {
     }) : Promise.resolve('<svg class="ds-icon"></svg>'), l.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.4"), h = globalThis;
+const c = Symbol.for("@cupra/ui-kit/icons-manager/1.1.0-canary.6"), h = globalThis;
 let n = h[c];
 n || (n = new f(), Object.defineProperty(h, c, {
   value: n,

package/dist-react/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.4"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/1.1.0-canary.6"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

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.1.0-canary.4/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/1.1.0-canary.6/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-1-0-canary-4"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-6"), 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-1-0-canary-4"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-1-0-canary-6"), e = i(o);
   return n`${e}`;
 }
 export {

package/package.json

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