@cupra/ui-kit 2.0.0-canary.129 → 2.0.0-canary.131

package/dist-react/esm/components/ds-search/ds-search.js

@@ -8,13 +8,12 @@ import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as c } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as l } from "../../utils/htmlWithTokens.js";
-import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { FormAssociatedMixin as d } from "../../mixins/FormAssociatedMixin.js";
-import { commonStyles as f, containerStyles as p, helperTextStyles as m, inputContainerStyles as h, inputFieldStyles as g } from "./styles/common.styles.js";
+import { FormAssociatedMixin as u } from "../../mixins/FormAssociatedMixin.js";
+import { commonStyles as d, containerStyles as f, helperTextStyles as p, inputContainerStyles as m, inputFieldStyles as h } from "./styles/common.styles.js";
 //#region src/components/ds-search/ds-search.ts
-var _ = class extends d(o) {
+var g = class extends u(o) {
 	constructor(...e) {
 		super(...e), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.name = "", this.placeholder = "", this.type = "text", this.focused = !1, this.handleFocus = () => {
 			this.focused = !0;
@@ -43,11 +42,11 @@ var _ = class extends d(o) {
 	}
 	static {
 		this.styles = [
+			d,
 			f,
 			p,
-			m,
-			g,
-			h
+			h,
+			m
 		];
 	}
 	firstUpdated() {
@@ -125,7 +124,7 @@ var _ = class extends d(o) {
 		return this.errorText ? t`<div class="error-text">${this.errorText}</div>` : e;
 	}
 	get styleTokens() {
-		return l`
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -140,7 +139,7 @@ var _ = class extends d(o) {
 	render() {
 		return t`
             ${this.styleTokens}
-            <div class=${u(this.classes)}>
+            <div class=${l(this.classes)}>
                 <div class="input-container">
                     ${this.searchIconTemplate}
                     ${this.inputTemplate}
@@ -156,23 +155,23 @@ a([n({
 	type: String,
 	reflect: !0,
 	attribute: "initial-value"
-})], _.prototype, "initialValue", void 0), a([n({ type: String })], _.prototype, "label", void 0), a([n({
+})], g.prototype, "initialValue", void 0), a([n({ type: String })], g.prototype, "label", void 0), a([n({
 	type: String,
 	attribute: "helper-text"
-})], _.prototype, "helperText", void 0), a([n({
+})], g.prototype, "helperText", void 0), a([n({
 	type: String,
 	attribute: "error-text"
-})], _.prototype, "errorText", void 0), a([n({
+})], g.prototype, "errorText", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], _.prototype, "disabled", void 0), a([n({
+})], g.prototype, "disabled", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], _.prototype, "success", void 0), a([n({
+})], g.prototype, "success", void 0), a([n({
 	type: String,
 	reflect: !0
-})], _.prototype, "mode", void 0), a([n({ type: String })], _.prototype, "size", void 0), a([n({ type: String })], _.prototype, "name", void 0), a([n({ type: String })], _.prototype, "placeholder", void 0), a([n({
+})], g.prototype, "mode", void 0), a([n({ type: String })], g.prototype, "size", void 0), a([n({ type: String })], g.prototype, "name", void 0), a([n({ type: String })], g.prototype, "placeholder", void 0), a([n({
 	type: String,
 	attribute: "max-length"
-})], _.prototype, "maxLength", void 0), a([n({ type: String })], _.prototype, "type", void 0), a([r()], _.prototype, "_value", void 0), a([r()], _.prototype, "focused", void 0), a([i(".input-field")], _.prototype, "inputField", void 0), _ = a([s("ds-search")], _);
+})], g.prototype, "maxLength", void 0), a([n({ type: String })], g.prototype, "type", void 0), a([r()], g.prototype, "_value", void 0), a([r()], g.prototype, "focused", void 0), a([i(".input-field")], g.prototype, "inputField", void 0), g = a([s("ds-search")], g);
 //#endregion

package/dist-react/esm/components/ds-skeleton/styles/common.styles.js

@@ -1,4 +1,5 @@
-import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/components/ds-skeleton/styles/common.styles.ts
 var t = e`
     :host {

package/dist-react/esm/components/ds-slider/ds-slider.js

@@ -9,21 +9,20 @@ import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as c } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as l } from "../../utils/htmlWithTokens.js";
-import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
-import { objectConverter as f } from "../../utils/objectConverter.js";
-import { formatNumber as p } from "../../utils/formatNumber/formatNumber.js";
-import { getStepValue as m } from "./utils/getStepValue/getStepValue.js";
-import { roundToDecimals as h } from "./utils/roundToDecimals/roundToDecimals.js";
-import { l as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.js";
+import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
+import { objectConverter as d } from "../../utils/objectConverter.js";
+import { formatNumber as f } from "../../utils/formatNumber/formatNumber.js";
+import { getStepValue as p } from "./utils/getStepValue/getStepValue.js";
+import { roundToDecimals as m } from "./utils/roundToDecimals/roundToDecimals.js";
+import { l as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/live.js";
-import { commonStyles as _, currentValueStyles as v, rangeValueStyles as y, thumbStyles as b, trackStyles as x } from "./styles/common.styles.js";
+import { commonStyles as g, currentValueStyles as _, rangeValueStyles as v, thumbStyles as y, trackStyles as b } from "./styles/common.styles.js";
 //#region src/components/ds-slider/ds-slider.ts
-var S, C = class extends d(o) {
+var x, S = class extends u(o) {
 	static {
-		S = this;
+		x = this;
 	}
 	constructor(...e) {
 		super(...e), this.min = 0, this.max = 100, this.minLabel = "", this.maxLabel = "", this.step = 1, this.initialValueMin = 0, this.mode = "light", this.locale = void 0, this.localeMatcher = "lookup", this.useGrouping = !0, this.minimumIntegerDigits = 1, this.minimumFractionDigits = 0, this.maximumFractionDigits = 3, this.size = "medium", this.disabled = !1, this.keyboardMode = !1, this._initialValuesApplied = !1, this.getNewValue = (e) => {
@@ -85,11 +84,11 @@ var S, C = class extends d(o) {
 	}
 	static {
 		this.styles = [
-			_,
-			x,
+			g,
 			b,
-			v,
-			y
+			y,
+			_,
+			v
 		];
 	}
 	get isRange() {
@@ -108,7 +107,7 @@ var S, C = class extends d(o) {
 		};
 	}
 	computeStep({ proposedValue: e, role: t }) {
-		return m({
+		return p({
 			step: this.step,
 			min: this.min,
 			max: this.max,
@@ -150,17 +149,17 @@ var S, C = class extends d(o) {
 		return e ? e.offsetWidth / 2 : 0;
 	}
 	static {
-		this.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-slider-thumb-radius, 0px)";
+		this.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-private-slider-thumb-radius, 0px)";
 	}
 	trackPosition(e) {
-		let t = S.THUMB_RADIUS_CSS_VAR;
+		let t = x.THUMB_RADIUS_CSS_VAR;
 		return `calc(${t} + (100% - ${t} * 2) * ${e / 100})`;
 	}
 	trackWidth(e) {
-		return `calc((100% - ${S.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
+		return `calc((100% - ${x.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
 	}
 	handleChange({ value: e, role: t }) {
-		let n = h({
+		let n = m({
 			value: e,
 			fractionDigits: this.maximumFractionDigits
 		}), r = t === "min" ? "_valueMin" : "_valueMax";
@@ -174,7 +173,7 @@ var S, C = class extends d(o) {
 		})));
 	}
 	formatNumber(e) {
-		return p({
+		return f({
 			value: e,
 			locale: this.locale,
 			...this.unitStyle && { style: this.unitStyle },
@@ -261,18 +260,18 @@ var S, C = class extends d(o) {
         `;
 	}
 	getInputTemplate(e) {
-		let n = this.getRoleById(e), r = this.editingField === n, i = n === "min" ? this._valueMin : this._valueMax, { formattedValue: a, unitSymbol: o, unitSymbolPosition: s } = this.formatNumber(i), c = this.unitSymbolPosition ?? s, l = this.unitSymbol ?? o, u = l ? c === "left" ? `${l} ${a}` : `${a} ${l}` : `${a}`, d = r ? "number" : "text", f = r ? String(i ?? "") : u, p = e === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, m = this.isRange ? e === 1 ? "Start value" : "End value" : "Value", h = p ?? m;
+		let n = this.getRoleById(e), r = this.editingField === n, i = n === "min" ? this._valueMin : this._valueMax, { formattedValue: a, unitSymbol: o, unitSymbolPosition: s } = this.formatNumber(i), c = this.unitSymbolPosition ?? s, l = this.unitSymbol ?? o, u = l ? c === "left" ? `${l} ${a}` : `${a} ${l}` : `${a}`, d = r ? "number" : "text", f = r ? String(i ?? "") : u, p = e === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, m = this.isRange ? e === 1 ? "Start value" : "End value" : "Value", g = p ?? m;
 		return t`
             <div class="input-wrapper">
                 <input
                     class="input-value input-value-${e}"
                     type=${d}
-                    .value=${g(f)}
+                    .value=${h(f)}
                     step=${String(this.step ?? 1)}
                     ?disabled=${this.disabled}
                     tabindex=${this.disabled ? -1 : 0}
                     aria-disabled=${String(!!this.disabled)}
-                    aria-label=${h}
+                    aria-label=${g}
                     ?readonly=${this.disabled}
                     @focus=${(t) => this.onInputFocus(t, e)}
                     @blur=${this.onInputBlur}
@@ -301,7 +300,7 @@ var S, C = class extends d(o) {
 		};
 	}
 	get styleTokens() {
-		return l`
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -312,7 +311,7 @@ var S, C = class extends d(o) {
 	render() {
 		return t`
             ${this.styleTokens}
-            <div class=${u(this.containerClasses)}>
+            <div class=${l(this.containerClasses)}>
                 <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track"  role="presentation">
                     ${this.thumbTemplates}
                     ${this.trackRangeTemplate}
@@ -323,78 +322,78 @@ var S, C = class extends d(o) {
         `;
 	}
 };
-a([n({ type: Number })], C.prototype, "min", void 0), a([n({ type: Number })], C.prototype, "max", void 0), a([n({
+a([n({ type: Number })], S.prototype, "min", void 0), a([n({ type: Number })], S.prototype, "max", void 0), a([n({
 	type: String,
 	attribute: "min-label"
-})], C.prototype, "minLabel", void 0), a([n({
+})], S.prototype, "minLabel", void 0), a([n({
 	type: String,
 	attribute: "max-label"
-})], C.prototype, "maxLabel", void 0), a([n({ type: Number })], C.prototype, "step", void 0), a([n({
+})], S.prototype, "maxLabel", void 0), a([n({ type: Number })], S.prototype, "step", void 0), a([n({
 	type: Number,
 	attribute: "initial-value-min"
-})], C.prototype, "initialValueMin", void 0), a([n({
+})], S.prototype, "initialValueMin", void 0), a([n({
 	type: Number,
 	attribute: "initial-value-max"
-})], C.prototype, "initialValueMax", void 0), a([n({
+})], S.prototype, "initialValueMax", void 0), a([n({
 	type: Number,
 	attribute: "value-min"
-})], C.prototype, "valueMin", void 0), a([n({
+})], S.prototype, "valueMin", void 0), a([n({
 	type: Number,
 	attribute: "value-max"
-})], C.prototype, "valueMax", void 0), a([n({
+})], S.prototype, "valueMax", void 0), a([n({
 	type: String,
 	reflect: !0
-})], C.prototype, "mode", void 0), a([n({
+})], S.prototype, "mode", void 0), a([n({
 	type: String,
 	attribute: "locale"
-})], C.prototype, "locale", void 0), a([n({
+})], S.prototype, "locale", void 0), a([n({
 	type: String,
 	attribute: "locale-matcher"
-})], C.prototype, "localeMatcher", void 0), a([n({
+})], S.prototype, "localeMatcher", void 0), a([n({
 	type: String,
 	attribute: "unit-symbol"
-})], C.prototype, "unitSymbol", void 0), a([n({
+})], S.prototype, "unitSymbol", void 0), a([n({
 	type: String,
 	attribute: "unit-symbol-position"
-})], C.prototype, "unitSymbolPosition", void 0), a([n({
+})], S.prototype, "unitSymbolPosition", void 0), a([n({
 	type: String,
 	attribute: "unit-style"
-})], C.prototype, "unitStyle", void 0), a([n({
+})], S.prototype, "unitStyle", void 0), a([n({
 	type: String,
 	attribute: "currency"
-})], C.prototype, "currency", void 0), a([n({
+})], S.prototype, "currency", void 0), a([n({
 	type: String,
 	attribute: "unit"
-})], C.prototype, "unit", void 0), a([n({
+})], S.prototype, "unit", void 0), a([n({
 	type: String,
 	attribute: "use-grouping",
 	converter: (e) => e === "auto" ? "auto" : typeof e == "boolean" ? e : e === "true" || e === "" ? !0 : e !== "false"
-})], C.prototype, "useGrouping", void 0), a([n({
+})], S.prototype, "useGrouping", void 0), a([n({
 	type: Number,
 	attribute: "minimum-integer-digits"
-})], C.prototype, "minimumIntegerDigits", void 0), a([n({
+})], S.prototype, "minimumIntegerDigits", void 0), a([n({
 	type: Number,
 	attribute: "minimum-fraction-digits"
-})], C.prototype, "minimumFractionDigits", void 0), a([n({
+})], S.prototype, "minimumFractionDigits", void 0), a([n({
 	type: Number,
 	attribute: "maximum-fraction-digits"
-})], C.prototype, "maximumFractionDigits", void 0), a([n({
+})], S.prototype, "maximumFractionDigits", void 0), a([n({
 	type: String,
 	attribute: "thousand-separator"
-})], C.prototype, "thousandSeparator", void 0), a([n({
+})], S.prototype, "thousandSeparator", void 0), a([n({
 	type: String,
 	attribute: "fraction-separator"
-})], C.prototype, "fractionSeparator", void 0), a([n({
+})], S.prototype, "fractionSeparator", void 0), a([n({
 	type: String,
-	converter: f
-})], C.prototype, "size", void 0), a([n({
+	converter: d
+})], S.prototype, "size", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], C.prototype, "disabled", void 0), a([n({
+})], S.prototype, "disabled", void 0), a([n({
 	type: String,
 	attribute: "input-min-aria-label"
-})], C.prototype, "inputMinAriaLabel", void 0), a([n({
+})], S.prototype, "inputMinAriaLabel", void 0), a([n({
 	type: String,
 	attribute: "input-max-aria-label"
-})], C.prototype, "inputMaxAriaLabel", void 0), a([i(".track")], C.prototype, "track", void 0), a([r()], C.prototype, "_valueMin", void 0), a([r()], C.prototype, "_valueMax", void 0), a([r()], C.prototype, "editingField", void 0), C = S = a([s("ds-slider")], C);
+})], S.prototype, "inputMaxAriaLabel", void 0), a([i(".track")], S.prototype, "track", void 0), a([r()], S.prototype, "_valueMin", void 0), a([r()], S.prototype, "_valueMax", void 0), a([r()], S.prototype, "editingField", void 0), S = x = a([s("ds-slider")], S);
 //#endregion

package/dist-react/esm/components/ds-slider/styles/common.styles.js

@@ -1,26 +1,25 @@
 import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
-import { cssWithTokens as t } from "../../../utils/cssWithTokens.js";
 //#region src/components/ds-slider/styles/common.styles.ts
-var n = e`
+var t = e`
     :host {
         display: block;
     }
-`, r = t`
+`, n = e`
     .current-value-container {
         position: relative;
     }
-    
+
     .current-value-text {
         display: inline-flex;
         position: absolute;
     }
-`, i = t`
+`, r = e`
     .range-value-container {
         display: flex;
         justify-content: space-between;
     }
-    
+
     .range-value-text {
         display: inline-flex;
     }
@@ -28,7 +27,7 @@ var n = e`
     .range-value-label:after {
         content: ':';
     }
-`, a = t`
+`, i = e`
     .track {
         position: relative;
         cursor: pointer;
@@ -42,14 +41,15 @@ var n = e`
         position: absolute;
     }
 
-    .track, .track-range {
+    .track,
+    .track-range {
         background-clip: content-box;
     }
-`, o = t`
+`, a = e`
     .thumb {
         z-index: 2;
         position: absolute;
     }
 `;
 //#endregion
-export { n as commonStyles, r as currentValueStyles, i as rangeValueStyles, o as thumbStyles, a as trackStyles };
+export { t as commonStyles, n as currentValueStyles, r as rangeValueStyles, a as thumbStyles, i as trackStyles };

package/dist-react/esm/components/ds-static-box/ds-static-box.js

@@ -8,20 +8,19 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
-import { htmlWithTokens as c } from "../../utils/htmlWithTokens.js";
-import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
-import { objectConverter as d } from "../../utils/objectConverter.js";
-import { observeScroll as f } from "../../utils/observeScroll/observeScroll.js";
-import { commonStyles as p } from "./styles/common.styles.js";
+import { ViewportMixin as l } from "../../mixins/ViewportMixin.js";
+import { objectConverter as u } from "../../utils/objectConverter.js";
+import { observeScroll as d } from "../../utils/observeScroll/observeScroll.js";
+import { commonStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-static-box/ds-static-box.ts
-var m = class extends u(o) {
+var p = class extends l(o) {
 	constructor(...e) {
 		super(...e), this.size = "medium", this.showTopShadow = !1, this.showBottomShadow = !1;
 	}
 	static {
-		this.styles = [p];
+		this.styles = [f];
 	}
 	get classes() {
 		let e = typeof this.size == "string" ? this.size : this.size[this.viewport];
@@ -38,7 +37,7 @@ var m = class extends u(o) {
 		};
 	}
 	get styleTokens() {
-		return c`
+		return e`
             <style>
                 .header {
                     display: ${this.headerItems?.length > 0 ? "block" : "none"};
@@ -51,7 +50,7 @@ var m = class extends u(o) {
         `;
 	}
 	onSlotChange() {
-		this.cleanupScrollObserver && this.cleanupScrollObserver(), this.cleanupScrollObserver = f(this.mainElement, ({ top: e, bottom: t }) => {
+		this.cleanupScrollObserver && this.cleanupScrollObserver(), this.cleanupScrollObserver = d(this.mainElement, ({ top: e, bottom: t }) => {
 			this.showTopShadow = e, this.showBottomShadow = t;
 		});
 	}
@@ -64,12 +63,12 @@ var m = class extends u(o) {
 	render() {
 		return e`
             ${this.styleTokens}
-            <div part="container" data-testid="ds-static-box-container" class=${l(this.classes)}>
+            <div part="container" data-testid="ds-static-box-container" class=${c(this.classes)}>
                 <div class="body">
                     <div part="header" class="header">
                         <slot name="header"></slot>
                     </div>
-                    <div class=${l(this.mainWrapperClasses)}>
+                    <div class=${c(this.mainWrapperClasses)}>
                         <div part="main" class="main ds-scroll" tabindex="0">
                             <slot name="main" @slotchange=${this.onSlotChange}></slot>
                         </div>
@@ -84,12 +83,12 @@ var m = class extends u(o) {
 };
 a([t({
 	type: String,
-	converter: d
-})], m.prototype, "size", void 0), a([i({
+	converter: u
+})], p.prototype, "size", void 0), a([i({
 	slot: "header",
 	flatten: !0
-})], m.prototype, "headerItems", void 0), a([i({
+})], p.prototype, "headerItems", void 0), a([i({
 	slot: "footer",
 	flatten: !0
-})], m.prototype, "footerItems", void 0), a([r(".main")], m.prototype, "mainElement", void 0), a([n()], m.prototype, "showTopShadow", void 0), a([n()], m.prototype, "showBottomShadow", void 0), m = a([s("ds-static-box")], m);
+})], p.prototype, "footerItems", void 0), a([r(".main")], p.prototype, "mainElement", void 0), a([n()], p.prototype, "showTopShadow", void 0), a([n()], p.prototype, "showBottomShadow", void 0), p = a([s("ds-static-box")], p);
 //#endregion

package/dist-react/esm/components/ds-table/ds-table.js

@@ -32,7 +32,7 @@ var l = class extends a {
 	}
 	render() {
 		return this.columnCount === 0 ? e : t`
-            <div class="table-wrapper" role="table" style=${s({ "--ui-kit-table-grid-template-columns-default": `repeat(${this.columnCount}, 1fr)` })}>
+            <div class="table-wrapper" role="table" style=${s({ "--ui-kit-private-table-grid-template-columns-default": `repeat(${this.columnCount}, 1fr)` })}>
                 <div class="header" role="rowgroup">
                     <slot name="header" @slotchange=${this.handleHeaderSlotChange}></slot>
                 </div>

package/dist-react/esm/components/ds-table/styles/common.styles.js

@@ -1,4 +1,5 @@
-import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/components/ds-table/styles/common.styles.ts
 var t = e`
     :host {

package/dist-react/esm/components/ds-table-cell/styles/common.styles.js

@@ -1,4 +1,5 @@
-import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/components/ds-table-cell/styles/common.styles.ts
 var t = e`
     :host {

package/dist-react/esm/components/ds-table-row/styles/common.styles.js

@@ -1,4 +1,5 @@
-import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/components/ds-table-row/styles/common.styles.ts
 var t = e`
     :host {

package/dist-react/esm/components/ds-tag/styles/common.styles.js

@@ -1,10 +1,11 @@
-import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/components/ds-tag/styles/common.styles.ts
 var t = e`
     :host {
         display: inline-block;
     }
-    
+
     .container {
         display: inline-flex;
         justify-content: center;

package/dist-react/esm/components/ds-text/ds-text.js

@@ -57,7 +57,7 @@ var m = new Set([
                 part="container" 
                 data-testid="ds-text-container" 
                 class=${l(this.classes)}
-                style=${f({ color: this.color || "var(--ui-kit-text-color)" })}
+                style=${f({ color: this.color || "var(--ui-kit-private-text-color)" })}
             >
                 ${this.value ? this.value : e}
                 <slot></slot>

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

@@ -50,7 +50,7 @@ var p = class extends o {
 	}
 	loadThemeStyles() {
 		return this.loadStyles ? new Promise((e, t) => {
-			let n = "/2.0.0-canary.129", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
+			let n = "/2.0.0-canary.131", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
 			if (document.head.querySelector(`link[href="${r}"]`)) e();
 			else {
 				let i = `ui-kit-theme-${n}`, a = document.getElementById(i), o = document.createElement("link");

package/dist-react/esm/components/ds-toast/ds-toast.js

@@ -6,10 +6,10 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as a } from "../base/UiKitElement.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
-import { o as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
-import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
 import { toastManager as l } from "./utils/ToastManager.js";
 import { c as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/repeat.js";
@@ -47,7 +47,7 @@ var p = class extends a {
 			let e = document.querySelector(`[data-id="${n.referenceId}"]`);
 			if (e) {
 				let t = e.cloneNode(!0);
-				t.setAttribute("data-template", "false"), t.setAttribute("data-id", n.id), i = s(t.outerHTML);
+				t.setAttribute("data-template", "false"), t.setAttribute("data-id", n.id), i = c(t.outerHTML);
 			}
 		} else i = this.componentFactory.createToastMessage({
 			"data-id": n.id,
@@ -56,7 +56,7 @@ var p = class extends a {
 			text: n.text,
 			status: n.status
 		});
-		return t`<div class=${c(r)} data-id="${n.id}">${i}</div>`;
+		return t`<div class=${s(r)} data-id="${n.id}">${i}</div>`;
 	}
 	get containerClasses() {
 		return {
@@ -68,7 +68,7 @@ var p = class extends a {
 		return t`
             <div
                 part="toast-container"
-                class=${c(this.containerClasses)}
+                class=${s(this.containerClasses)}
                 @animationend=${this.handleAnimationEnd}
                 aria-live="polite"
             >

package/dist-react/esm/components/ds-toggle-switch/ds-toggle-switch.js

@@ -8,17 +8,16 @@ import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as s } from "../../utils/htmlWithTokens.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { commonStyles as l } from "./styles/common.styles.js";
+import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-toggle-switch/ds-toggle-switch.ts
-var u = class extends i {
+var l = class extends i {
 	constructor(...e) {
 		super(...e), this.size = "medium", this._checked = void 0, this._checkedState = !1, this.disabled = !1, this.mode = "light";
 	}
 	static {
-		this.styles = [l];
+		this.styles = [c];
 	}
 	get checked() {
 		return this._checked ?? this._checkedState;
@@ -41,7 +40,7 @@ var u = class extends i {
 		e.stopPropagation(), !this.checked && this.handleClick();
 	}
 	get styleTokens() {
-		return s`
+		return e`
             <style>
                 :host {
                     color-scheme: ${this.mode};
@@ -62,7 +61,7 @@ var u = class extends i {
 		return e`
             ${this.styleTokens}
             <div
-                class=${c(this.labelClasses)}
+                class=${s(this.labelClasses)}
                 @click=${this.handleClick}
             >
                 <slot name="off" @click=${this.handleClickOff}></slot>
@@ -85,20 +84,20 @@ var u = class extends i {
         `;
 	}
 };
-r([t({ type: String })], u.prototype, "size", void 0), r([t({
+r([t({ type: String })], l.prototype, "size", void 0), r([t({
 	type: Boolean,
 	attribute: "checked",
 	converter: o,
 	reflect: !0
-})], u.prototype, "_checked", void 0), r([n()], u.prototype, "_checkedState", void 0), r([t({
+})], l.prototype, "_checked", void 0), r([n()], l.prototype, "_checkedState", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "disabled", void 0), r([t({
+})], l.prototype, "disabled", void 0), r([t({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), r([t({
+})], l.prototype, "mode", void 0), r([t({
 	type: String,
 	attribute: "data-aria-label"
-})], u.prototype, "dataAriaLabel", void 0), u = r([a("ds-toggle-switch")], u);
+})], l.prototype, "dataAriaLabel", void 0), l = r([a("ds-toggle-switch")], l);
 //#endregion