@cupra/ui-kit 2.0.0-canary.145 → 2.0.0-canary.147

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

@@ -14,18 +14,19 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map
 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 "../ds-text-input/ds-text-input.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 g, currentValueStyles as _, rangeValueStyles as v, thumbStyles as y, trackStyles as b } from "./styles/common.styles.js";
+import { commonStyles as g, currentValueStyles as _, inputResetStyles as v, rangeValueStyles as y, thumbStyles as b, trackStyles as x } from "./styles/common.styles.js";
 //#region src/components/ds-slider/ds-slider.ts
-var x, S = class extends u(o) {
+var S, C = class extends u(o) {
 	static {
-		x = this;
+		S = 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) => {
+		super(...e), this.variant = "primary", 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) => {
 			let { width: t, left: n } = this.track.getBoundingClientRect(), r = this.thumbRadius, i = e.type.indexOf("mouse") === -1 ? e.touches[0].clientX : e.clientX, a = t - r * 2, o = Math.min(Math.max(0, i - n - r), a), s = a > 0 ? o * 100 / a : 0;
 			return this.min + s * (this.max - this.min) / 100;
 		}, this.setActiveThumb = (e) => {
@@ -85,15 +86,19 @@ var x, S = class extends u(o) {
 	static {
 		this.styles = [
 			g,
+			x,
 			b,
-			y,
 			_,
+			y,
 			v
 		];
 	}
 	get isRange() {
 		return typeof this.initialValueMax == "number" || typeof this.valueMax == "number";
 	}
+	get sliderSizeToTextInputSize() {
+		return (typeof this.size == "string" ? this.size : this.size?.[this.viewport]) === "large" ? "large" : "medium";
+	}
 	isControlled(e) {
 		return typeof (e === "min" ? this.valueMin : this.valueMax) == "number";
 	}
@@ -152,11 +157,11 @@ var x, S = class extends u(o) {
 		this.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-private-slider-thumb-radius, 0px)";
 	}
 	trackPosition(e) {
-		let t = x.THUMB_RADIUS_CSS_VAR;
+		let t = S.THUMB_RADIUS_CSS_VAR;
 		return `calc(${t} + (100% - ${t} * 2) * ${e / 100})`;
 	}
 	trackWidth(e) {
-		return `calc((100% - ${x.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
+		return `calc((100% - ${S.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
 	}
 	handleChange({ value: e, role: t }) {
 		let n = m({
@@ -263,22 +268,24 @@ var x, S = class extends u(o) {
 		let n = this.getRoleById(e), r = this.editingField === n, i = n === "min" ? this._valueMin : this._valueMax, { formattedNumber: 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=${h(f)}
-                    step=${String(this.step ?? 1)}
-                    ?disabled=${this.disabled}
-                    tabindex=${this.disabled ? -1 : 0}
-                    aria-disabled=${String(!!this.disabled)}
-                    aria-label=${g}
-                    ?readonly=${this.disabled}
-                    @focus=${(t) => this.onInputFocus(t, e)}
-                    @blur=${this.onInputBlur}
-                    @change=${(t) => this.commitInputValue(t, e)}
-                    @keydown=${(t) => this.onInputKeyDown(t, e)}
-                    title=${f}
-                />
+                <ds-text-input size=${this.sliderSizeToTextInputSize} hide-clear-button>
+                    <input
+                        class="input-value input-value-${e}"
+                        type=${d}
+                        .value=${h(f)}
+                        step=${String(this.step ?? 1)}
+                        ?disabled=${this.disabled}
+                        tabindex=${this.disabled ? -1 : 0}
+                        aria-disabled=${String(!!this.disabled)}
+                        aria-label=${g}
+                        ?readonly=${this.disabled}
+                        @focus=${(t) => this.onInputFocus(t, e)}
+                        @blur=${this.onInputBlur}
+                        @change=${(t) => this.commitInputValue(t, e)}
+                        @keydown=${(t) => this.onInputKeyDown(t, e)}
+                        title=${f}
+                    />
+                </ds-text-input>
             </div>
         `;
 	}
@@ -290,13 +297,48 @@ var x, S = class extends u(o) {
             </div>
         `;
 	}
+	getSecondaryInputTemplate(n) {
+		let r = this.getRoleById(n) === "min" ? this._valueMin : this._valueMax, { unitSymbol: i } = this.formatNumber(r), a = this.unitSymbol ?? i, o = n === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, s = this.isRange ? n === 1 ? "Start value" : "End value" : "Value", c = o ?? s;
+		return t`
+            <div class="secondary-input-group">
+                <div class="secondary-input-wrapper">
+                    <ds-text-input size="xlarge" hide-clear-button>
+                        <input
+                            class="secondary-input-value secondary-input-value-${n}"
+                            type="number"
+                            .value=${h(String(r ?? ""))}
+                            step=${String(this.step ?? 1)}
+                            ?disabled=${this.disabled}
+                            tabindex=${this.disabled ? -1 : 0}
+                            aria-disabled=${String(!!this.disabled)}
+                            aria-label=${c}
+                            ?readonly=${this.disabled}
+                            @change=${(e) => this.commitInputValue(e, n)}
+                            @keydown=${(e) => this.onInputKeyDown(e, n)}
+                            title=${String(r ?? "")}
+                        />
+                    </ds-text-input>
+                </div>
+                ${a ? t`<span class="secondary-unit-text">${a}</span>` : e}
+            </div>
+        `;
+	}
+	get secondaryInputsTemplate() {
+		return t`
+            <div class="secondary-inputs-container">
+                ${this.getSecondaryInputTemplate(1)}
+                ${this.isRange ? t`<span class="secondary-inputs-separator">-</span>${this.getSecondaryInputTemplate(2)}` : e}
+            </div>
+        `;
+	}
 	get containerClasses() {
 		let e = typeof this.size == "string" ? this.size : this.size?.[this.viewport];
 		return {
 			container: !0,
 			[this.mode]: !!this.mode,
 			[e]: !!e,
-			disabled: !!this.disabled
+			disabled: !!this.disabled,
+			[`variant-${this.variant}`]: !!this.variant
 		};
 	}
 	get styleTokens() {
@@ -309,91 +351,93 @@ var x, S = class extends u(o) {
         `;
 	}
 	render() {
+		let n = this.variant === "secondary";
 		return t`
             ${this.styleTokens}
             <div class=${l(this.containerClasses)}>
-                <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track"  role="presentation">
+                ${n ? this.secondaryInputsTemplate : e}
+                <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track" role="presentation">
                     ${this.thumbTemplates}
                     ${this.trackRangeTemplate}
                 </div>
                 <div class="range-value-container">${this.rangeValuesTemplates}</div>
-                ${this.inputsTemplate}
+                ${n ? e : this.inputsTemplate}
             </div>
         `;
 	}
 };
-a([n({ type: Number })], S.prototype, "min", void 0), a([n({ type: Number })], S.prototype, "max", void 0), a([n({
+a([n({ type: String })], C.prototype, "variant", void 0), a([n({ type: Number })], C.prototype, "min", void 0), a([n({ type: Number })], C.prototype, "max", void 0), a([n({
 	type: String,
 	attribute: "min-label"
-})], S.prototype, "minLabel", void 0), a([n({
+})], C.prototype, "minLabel", void 0), a([n({
 	type: String,
 	attribute: "max-label"
-})], S.prototype, "maxLabel", void 0), a([n({ type: Number })], S.prototype, "step", void 0), a([n({
+})], C.prototype, "maxLabel", void 0), a([n({ type: Number })], C.prototype, "step", void 0), a([n({
 	type: Number,
 	attribute: "initial-value-min"
-})], S.prototype, "initialValueMin", void 0), a([n({
+})], C.prototype, "initialValueMin", void 0), a([n({
 	type: Number,
 	attribute: "initial-value-max"
-})], S.prototype, "initialValueMax", void 0), a([n({
+})], C.prototype, "initialValueMax", void 0), a([n({
 	type: Number,
 	attribute: "value-min"
-})], S.prototype, "valueMin", void 0), a([n({
+})], C.prototype, "valueMin", void 0), a([n({
 	type: Number,
 	attribute: "value-max"
-})], S.prototype, "valueMax", void 0), a([n({
+})], C.prototype, "valueMax", void 0), a([n({
 	type: String,
 	reflect: !0
-})], S.prototype, "mode", void 0), a([n({
+})], C.prototype, "mode", void 0), a([n({
 	type: String,
 	attribute: "locale"
-})], S.prototype, "locale", void 0), a([n({
+})], C.prototype, "locale", void 0), a([n({
 	type: String,
 	attribute: "locale-matcher"
-})], S.prototype, "localeMatcher", void 0), a([n({
+})], C.prototype, "localeMatcher", void 0), a([n({
 	type: String,
 	attribute: "unit-symbol"
-})], S.prototype, "unitSymbol", void 0), a([n({
+})], C.prototype, "unitSymbol", void 0), a([n({
 	type: String,
 	attribute: "unit-symbol-position"
-})], S.prototype, "unitSymbolPosition", void 0), a([n({
+})], C.prototype, "unitSymbolPosition", void 0), a([n({
 	type: String,
 	attribute: "unit-style"
-})], S.prototype, "unitStyle", void 0), a([n({
+})], C.prototype, "unitStyle", void 0), a([n({
 	type: String,
 	attribute: "currency"
-})], S.prototype, "currency", void 0), a([n({
+})], C.prototype, "currency", void 0), a([n({
 	type: String,
 	attribute: "unit"
-})], S.prototype, "unit", void 0), a([n({
+})], C.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"
-})], S.prototype, "useGrouping", void 0), a([n({
+})], C.prototype, "useGrouping", void 0), a([n({
 	type: Number,
 	attribute: "minimum-integer-digits"
-})], S.prototype, "minimumIntegerDigits", void 0), a([n({
+})], C.prototype, "minimumIntegerDigits", void 0), a([n({
 	type: Number,
 	attribute: "minimum-fraction-digits"
-})], S.prototype, "minimumFractionDigits", void 0), a([n({
+})], C.prototype, "minimumFractionDigits", void 0), a([n({
 	type: Number,
 	attribute: "maximum-fraction-digits"
-})], S.prototype, "maximumFractionDigits", void 0), a([n({
+})], C.prototype, "maximumFractionDigits", void 0), a([n({
 	type: String,
 	attribute: "thousand-separator"
-})], S.prototype, "thousandSeparator", void 0), a([n({
+})], C.prototype, "thousandSeparator", void 0), a([n({
 	type: String,
 	attribute: "fraction-separator"
-})], S.prototype, "fractionSeparator", void 0), a([n({
+})], C.prototype, "fractionSeparator", void 0), a([n({
 	type: String,
 	converter: d
-})], S.prototype, "size", void 0), a([n({
+})], C.prototype, "size", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], S.prototype, "disabled", void 0), a([n({
+})], C.prototype, "disabled", void 0), a([n({
 	type: String,
 	attribute: "input-min-aria-label"
-})], S.prototype, "inputMinAriaLabel", void 0), a([n({
+})], C.prototype, "inputMinAriaLabel", void 0), a([n({
 	type: String,
 	attribute: "input-max-aria-label"
-})], 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);
+})], 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);
 //#endregion

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

@@ -50,6 +50,19 @@ var t = e`
         z-index: 2;
         position: absolute;
     }
+`, o = e`
+    .input-value::-webkit-inner-spin-button,
+    .input-value::-webkit-outer-spin-button,
+    .secondary-input-value::-webkit-inner-spin-button,
+    .secondary-input-value::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    .input-value[type='number'],
+    .secondary-input-value[type='number'] {
+        -moz-appearance: textfield;
+    }
 `;
 //#endregion
-export { t as commonStyles, n as currentValueStyles, r as rangeValueStyles, a as thumbStyles, i as trackStyles };
+export { t as commonStyles, n as currentValueStyles, o as inputResetStyles, r as rangeValueStyles, a as thumbStyles, i as trackStyles };

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

@@ -17,7 +17,7 @@ import { commonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-text-input/ds-text-input.ts
 var f = class extends l(i) {
 	constructor(...e) {
-		super(...e), this.keyboardMode = !1, this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
+		super(...e), this.keyboardMode = !1, this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelRemoveButton = "", this.hideClearButton = !1, this.handleClickIcon = () => {
 			this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach((e) => this.nativeInput.dispatchEvent(new Event(e, {
 				bubbles: !0,
 				composed: !0
@@ -58,7 +58,7 @@ var f = class extends l(i) {
         `;
 	}
 	get iconTemplate() {
-		return !this.nativeInput?.value?.length || this.inputStates.readonly ? e : o`<ds-icon-button
+		return this.hideClearButton || !this.nativeInput?.value?.length || this.inputStates.readonly ? e : o`<ds-icon-button
             class="icon-button"
             icon-name="cross"
             size=${c(this.size)}
@@ -100,6 +100,9 @@ r([n({ type: String })], f.prototype, "size", void 0), r([n({
 })], f.prototype, "readonlyText", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label-remove-button"
-})], f.prototype, "dataAriaLabelRemoveButton", void 0), f = r([a("ds-text-input")], f);
+})], f.prototype, "dataAriaLabelRemoveButton", void 0), r([n({
+	type: Boolean,
+	attribute: "hide-clear-button"
+})], f.prototype, "hideClearButton", void 0), f = r([a("ds-text-input")], f);
 //#endregion
 export { f as DsTextInput };

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.145", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
+			let n = "/2.0.0-canary.147", 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/decorators/customUiKitElement.js

@@ -11,7 +11,7 @@ function t(t, n) {
 				this.componentName = a;
 			}
 			connectedCallback() {
-				r.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.145");
+				r.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.147");
 			}
 		});
 	};

package/dist-react/esm/utils/IconsManager.js

@@ -25,7 +25,7 @@ var n = class {
 			return console.error(`Failed to fetch icon "${e}":`, t), "";
 		}), t.subscribe("theme", this.handleChangeTheme);
 	}
-}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.145"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.147"), i = globalThis, a = i[r];
 a || (a = new n(), Object.defineProperty(i, r, {
 	value: a,
 	writable: !1,

package/dist-react/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ var e = class {
 			}
 		});
 	}
-}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.145"), n = globalThis, r = n[t];
+}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.147"), n = globalThis, r = n[t];
 r || (r = new e(), Object.defineProperty(n, t, {
 	value: r,
 	writable: !1,

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

@@ -4,7 +4,7 @@ var t = e(20), n = class e {
 	constructor() {
 		this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({ componentName: e, theme: n }) => {
 			if (!n || !e) return;
-			let r = `https://ds-assets.cupra.com/2.0.0-canary.145/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
+			let r = `https://ds-assets.cupra.com/2.0.0-canary.147/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
 			if (i) return i;
 			let a = t(() => this.fetchStyle({ url: r })).then((e) => (e || this.stylePromises.delete(r), e));
 			return this.stylePromises.set(r, a), this.stylePromises.get(r);

package/dist-react/esm/utils/version.js

@@ -1,4 +1,4 @@
 //#region src/utils/version.ts
-var e = "2.0.0-canary.145", t = `--v${e.replaceAll(".", "-")}`;
+var e = "2.0.0-canary.147", t = `--v${e.replaceAll(".", "-")}`;
 //#endregion
 export { e as VERSION, t as VERSION_TAG_SUFFIX };

package/dist-react/types/components/ds-slider/ds-slider.d.ts

@@ -1,9 +1,11 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-text-input/ds-text-input.ts';
 import { type FormatedNumber } from '../../utils/formatNumber/formatNumber.ts';
 import { type PropertyValues } from 'lit';
-import type { DsSliderAttrs } from './ds-slider.types';
+import type { DsSliderAttrs, DsSliderVariant } from './ds-slider.types';
 declare const DsSlider_base: (new (...args: any[]) => import("../../mixins/ViewportMixin").ViewportInterface) & typeof UiKitElement;
 export declare class DsSlider extends DsSlider_base {
+    variant: DsSliderVariant;
     min: DsSliderAttrs['min'];
     max: DsSliderAttrs['max'];
     minLabel: DsSliderAttrs['min-label'];
@@ -41,6 +43,7 @@ export declare class DsSlider extends DsSlider_base {
     private _initialValuesApplied;
     static styles: import("lit").CSSResult[];
     protected get isRange(): boolean;
+    private get sliderSizeToTextInputSize();
     private isControlled;
     private getRoleById;
     private get currentValues();
@@ -77,6 +80,8 @@ export declare class DsSlider extends DsSlider_base {
     protected onThumbKeyDown: (event: KeyboardEvent, id: 1 | 2) => void;
     protected getInputTemplate(id: 1 | 2): import("lit").TemplateResult<1>;
     protected get inputsTemplate(): import("lit").TemplateResult<1>;
+    protected getSecondaryInputTemplate(id: 1 | 2): import("lit").TemplateResult<1>;
+    protected get secondaryInputsTemplate(): import("lit").TemplateResult<1>;
     protected get containerClasses(): {
         [x: string]: boolean;
         container: boolean;

package/dist-react/types/components/ds-slider/ds-slider.types.d.ts

@@ -1,6 +1,7 @@
 import { type Viewports } from '../../utils/breakpoints.ts';
 import type { Currency, Decimal, Integer0To20, Integer1To21, Locale, NoUnit, Percent, Unit } from '../../utils/formatNumber/formatNumber.ts';
 import type { CommonAttrs } from '../../types/types';
+export type DsSliderVariant = 'primary' | 'secondary';
 type PresetSize = 'large' | 'medium';
 type Size = PresetSize | string;
 type ResponsiveSize = Partial<Record<Viewports, Size>>;
@@ -47,6 +48,7 @@ type ControlledMax = {
 };
 type SliderValueProps = (UncontrolledMin | ControlledMin) & (UncontrolledMax | ControlledMax);
 export type DsSliderAttrs = CommonAttrs & {
+    variant?: DsSliderVariant;
     min?: number;
     max?: number;
     'min-label'?: string;

package/dist-react/types/components/ds-slider/styles/common.styles.d.ts

@@ -3,3 +3,4 @@ export declare const currentValueStyles: import("lit").CSSResult;
 export declare const rangeValueStyles: import("lit").CSSResult;
 export declare const trackStyles: import("lit").CSSResult;
 export declare const thumbStyles: import("lit").CSSResult;
+export declare const inputResetStyles: import("lit").CSSResult;

package/dist-react/types/components/ds-text-input/ds-text-input.d.ts

@@ -12,6 +12,7 @@ export declare class DsTextInput extends DsTextInput_base {
     invalidError: DsTextInputAttrs['invalid-error'];
     readonlyText: DsTextInputAttrs['readonly-text'];
     dataAriaLabelRemoveButton: DsTextInputAttrs['data-aria-label-remove-button'];
+    hideClearButton: boolean;
     protected handleClickIcon: () => void;
     private get classes();
     render(): import("lit").TemplateResult<1>;

package/dist-react/types/components/ds-text-input/ds-text-input.types.d.ts

@@ -1,9 +1,10 @@
 import type { CommonAttrs } from '../../types/types';
 export type DsTextInputAttrs = {
-    size?: 'large' | 'medium';
+    size?: 'large' | 'medium' | 'xlarge';
     'helper-text'?: string;
     'forced-error'?: string;
     'invalid-error'?: string;
     'readonly-text'?: string;
     'data-aria-label-remove-button'?: string;
+    'hide-clear-button'?: boolean;
 } & CommonAttrs;

package/package.json

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