@cupra/ui-kit 2.0.0-canary.113 → 2.0.0-canary.115

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

@@ -1,140 +1,143 @@
-import { x as e } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
-import { o as t } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import { o as e } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { s as t, u as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
+import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
+import { VERSION_TAG_SUFFIX as r } from "./version.js";
 //#region src/utils/componentFactory.ts
-var n = {
-	createIcon: (n) => (r("ds-icon-react", () => import("../components/ds-icon/ds-icon.js")), e`
-            <ds-icon-react
-                class=${t(n?.class)}
-                data-testid=${t(n?.["data-testid"])}
-                @click=${n?.["@click"]}
-                @keydown=${n?.["@keydown"]}
-                icon-name=${n?.["icon-name"]}
-                color=${t(n?.color)}
-                background-color=${t(n?.["background-color"])}
-                size=${t(n?.size)}
-                aria-label=${t(n?.["aria-label"])}
-                aria-hidden=${t(n?.["aria-hidden"])}
-                role=${t(n?.role)}
-                tabindex=${t(n?.tabindex)}
+var i = t(`ds-icon${r}`), a = t(`ds-calendar-day${r}`), o = t(`ds-button${r}`), s = t(`ds-divider${r}`), c = t(`ds-icon-button${r}`), l = t(`ds-loader-spinner${r}`), u = t(`ds-skeleton${r}`), d = t(`ds-toast-message${r}`), f = t(`ds-inline-alert${r}`), p = t(`ds-tooltip${r}`), m = {
+	createIcon: (t) => (h(`ds-icon${r}`, () => import("../components/ds-icon/ds-icon.js")), n`
+            <${i}
+                class=${e(t?.class)}
+                data-testid=${e(t?.["data-testid"])}
+                @click=${t?.["@click"]}
+                @keydown=${t?.["@keydown"]}
+                icon-name=${t?.["icon-name"]}
+                color=${e(t?.color)}
+                background-color=${e(t?.["background-color"])}
+                size=${e(t?.size)}
+                aria-label=${e(t?.["aria-label"])}
+                aria-hidden=${e(t?.["aria-hidden"])}
+                role=${e(t?.role)}
+                tabindex=${e(t?.tabindex)}
             >
-                ${n.children}
-            </ds-icon-react>
+                ${t.children}
+            </${i}>
         `),
-	createCalendarDay: (n = {}) => (r("ds-calendar-day-react", () => import("../components/ds-calendar-day/ds-calendar-day.js")), e`
-            <ds-calendar-day-react
-                class=${t(n?.class)}
-                day=${t(n?.day)}
-                size=${t(n?.size)}
-                ?disabled=${n?.disabled}
-                ?selected=${n?.selected}
-                ?today=${n?.today}
-                ?outside-month=${n?.["outside-month"]}
-                data-testid=${t(n?.["data-testid"])}
-            ></ds-calendar-day-react>
+	createCalendarDay: (t = {}) => (h(`ds-calendar-day${r}`, () => import("../components/ds-calendar-day/ds-calendar-day.js")), n`
+            <${a}
+                class=${e(t?.class)}
+                day=${e(t?.day)}
+                size=${e(t?.size)}
+                ?disabled=${t?.disabled}
+                ?selected=${t?.selected}
+                ?today=${t?.today}
+                ?outside-month=${t?.["outside-month"]}
+                data-testid=${e(t?.["data-testid"])}
+            ></${a}>
         `),
-	createButton: (n = {}) => (r("ds-button-react", () => import("../components/ds-button/ds-button.js")), e`
-            <ds-button-react
-                class=${n?.class}
-                @click=${n?.["@click"]}
-                .size=${t(n?.size)}
-                type=${n?.type}
-                icon-position=${n?.["icon-position"]}
-                .rounded=${n?.rounded}
-                .full-width=${n?.["full-width"]}
-                variant=${n?.variant ?? "primary"}
-                mode=${n?.mode ?? "light"}
-                .disabled=${n?.disabled}
-                icon-name=${n?.["icon-name"]}
-                html-tag-name=${n?.["html-tag-name"]}
-                href=${n?.href}
-                rel=${n?.rel}
-                target=${n?.target}
-                data-testid=${n?.["data-testid"]}
-            >
-                ${n.children}
-            </ds-button-react>
-        `),
-	createDivider: (t = {}) => (r("ds-divider-react", () => import("../components/ds-divider/ds-divider.js")), e`
-            <ds-divider-react
+	createButton: (t = {}) => (h(`ds-button${r}`, () => import("../components/ds-button/ds-button.js")), n`
+            <${o}
                 class=${t?.class}
+                @click=${t?.["@click"]}
+                .size=${e(t?.size)}
+                type=${t?.type}
+                icon-position=${t?.["icon-position"]}
+                .rounded=${t?.rounded}
+                .full-width=${t?.["full-width"]}
                 variant=${t?.variant ?? "primary"}
-                orientation=${t?.orientation ?? "horizontal"}
+                mode=${t?.mode ?? "light"}
+                .disabled=${t?.disabled}
+                icon-name=${t?.["icon-name"]}
+                html-tag-name=${t?.["html-tag-name"]}
+                href=${t?.href}
+                rel=${t?.rel}
+                target=${t?.target}
                 data-testid=${t?.["data-testid"]}
             >
-            </ds-divider-react>
+                ${t.children}
+            </${o}>
         `),
-	createIconButton: (n = {}) => (r("ds-icon-button-react", () => import("../components/ds-icon-button/ds-icon-button.js")), e`
-            <ds-icon-button-react
-                class=${n?.class}
-                @click=${n?.["@click"]}
-                size=${t(n?.size)}
-                variant=${n?.variant ?? "primary"}
-                mode=${n?.mode ?? "light"}
-                .disabled=${n?.disabled}
-                icon-name=${n?.["icon-name"]}
-                html-tag-name=${n?.["html-tag-name"]}
-                href=${n?.href}
-                rel=${n?.rel}
-                target=${n?.target}
-                data-testid=${n?.["data-testid"]}
-                data-aria-label=${n?.["data-aria-label"]}
+	createDivider: (e = {}) => (h(`ds-divider${r}`, () => import("../components/ds-divider/ds-divider.js")), n`
+            <${s}
+                class=${e?.class}
+                variant=${e?.variant ?? "primary"}
+                orientation=${e?.orientation ?? "horizontal"}
+                data-testid=${e?.["data-testid"]}
             >
-                ${n.children}
-            </ds-icon-button-react>
+            </${s}>
         `),
-	createLoaderSpinner: (t = {}) => (r("ds-loader-spinner-react", () => import("../components/ds-loader-spinner/ds-loader-spinner.js")), e`
-            <ds-loader-spinner-react
-                ?show=${t?.show}
-                orientation=${t?.orientation ?? "row"}
+	createIconButton: (t = {}) => (h(`ds-icon-button${r}`, () => import("../components/ds-icon-button/ds-icon-button.js")), n`
+            <${c}
+                class=${t?.class}
+                @click=${t?.["@click"]}
+                size=${e(t?.size)}
+                variant=${t?.variant ?? "primary"}
                 mode=${t?.mode ?? "light"}
-            ></ds-loader-spinner-react>
+                .disabled=${t?.disabled}
+                icon-name=${t?.["icon-name"]}
+                html-tag-name=${t?.["html-tag-name"]}
+                href=${t?.href}
+                rel=${t?.rel}
+                target=${t?.target}
+                data-testid=${t?.["data-testid"]}
+                data-aria-label=${t?.["data-aria-label"]}
+            >
+                ${t.children}
+            </${c}>
+        `),
+	createLoaderSpinner: (e = {}) => (h(`ds-loader-spinner${r}`, () => import("../components/ds-loader-spinner/ds-loader-spinner.js")), n`
+            <${l}
+                ?show=${e?.show}
+                orientation=${e?.orientation ?? "row"}
+                mode=${e?.mode ?? "light"}
+            ></${l}>
         `),
-	createSkeleton: (n = {}) => (r("ds-skeleton-react", () => import("../components/ds-skeleton/ds-skeleton.js")), e`
-            <ds-skeleton-react
-                class=${t(n?.class)}
-                data-testid=${t(n?.["data-testid"])}
-                variant=${t(n?.variant)}
-                width=${t(n?.width)}
-                height=${t(n?.height)}
-                animation=${t(n?.animation)}
-            ></ds-skeleton-react>
+	createSkeleton: (t = {}) => (h(`ds-skeleton${r}`, () => import("../components/ds-skeleton/ds-skeleton.js")), n`
+            <${u}
+                class=${e(t?.class)}
+                data-testid=${e(t?.["data-testid"])}
+                variant=${e(t?.variant)}
+                width=${e(t?.width)}
+                height=${e(t?.height)}
+                animation=${e(t?.animation)}
+            ></${u}>
         `),
-	createToastMessage: (t) => (r("ds-toast-message-react", () => import("../components/ds-toast-message/ds-toast-message.js")), e`
-            <ds-toast-message-react
-                data-id="${t["data-id"]}"
-                data-template="${t["data-template"]}"
-                title="${t.title}"
-                text="${t.text}"
-                status="${t.status}"
-            ></ds-toast-message-react>
+	createToastMessage: (e) => (h(`ds-toast-message${r}`, () => import("../components/ds-toast-message/ds-toast-message.js")), n`
+            <${d}
+                data-id="${e["data-id"]}"
+                data-template="${e["data-template"]}"
+                title="${e.title}"
+                text="${e.text}"
+                status="${e.status}"
+            ></${d}>
         `),
-	createInlineAlert: (t) => (r("ds-inline-alert-react", () => import("../components/ds-inline-alert/ds-inline-alert.js")), e`
-            <ds-inline-alert-react
-                title="${t.title}"
-                text="${t.text}"
-                status="${t.status}"
-                ?show=${t.show ?? !0}
-            ></ds-inline-alert-react>
+	createInlineAlert: (e) => (h(`ds-inline-alert${r}`, () => import("../components/ds-inline-alert/ds-inline-alert.js")), n`
+            <${f}
+                title="${e.title}"
+                text="${e.text}"
+                status="${e.status}"
+                ?show=${e.show ?? !0}
+            ></${f}>
         `),
-	createTooltip: (n = {}) => (r("ds-tooltip-react", () => import("../components/ds-tooltip/ds-tooltip.js")), e`
-            <ds-tooltip-react
-                mode=${t(n.mode)}
-                ?show=${n.show ?? !1}
-                ?disable-hover-listener=${n?.["disable-hover-listener"]}
-                ?disable-focus-listener=${n?.["disable-focus-listener"]}
-                ?disable-press-listener=${n?.["disable-press-listener"]}
+	createTooltip: (t = {}) => (h(`ds-tooltip${r}`, () => import("../components/ds-tooltip/ds-tooltip.js")), n`
+            <${p}
+                class=${e(t?.class)}
+                mode=${e(t.mode)}
+                ?show=${t.show ?? !1}
+                ?disable-hover-listener=${t?.["disable-hover-listener"]}
+                ?disable-focus-listener=${t?.["disable-focus-listener"]}
+                ?disable-press-listener=${t?.["disable-press-listener"]}
             >
-                ${n.children}
-                <div slot="content">${n.content}</div>
-            </ds-tooltip-react>
+                ${t.children}
+                <div slot="content">${t.content}</div>
+            </${p}>
         `)
 };
-function r(e, t) {
+function h(e, t) {
 	try {
 		typeof window < "u" && typeof customElements < "u" && !customElements.get(e) && t().catch((e) => {});
 	} catch {}
 }
 //#endregion
-export { n as reactFactory };
+export { m as reactFactory };

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

@@ -2,7 +2,7 @@ import { i as e, r as t } from "../node_modules/.pnpm/@lit_reactive-element@2.1.
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/utils/cssWithTokens.ts
 function n(n, ...r) {
-	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-113"))}`;
+	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-115"))}`;
 }
 //#endregion
 export { n as cssWithTokens };

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

@@ -4,7 +4,7 @@ import { o as t } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-ht
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
 //#region src/utils/htmlWithTokens.ts
 function n(n, ...r) {
-	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-113"))}`;
+	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-115"))}`;
 }
 //#endregion
 export { n as htmlWithTokens };

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

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

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

@@ -1,2 +1,3 @@
 import './components/index';
 export { iconNames } from './components/ds-icon/iconNames.ts';
+export { VERSION, VERSION_TAG_SUFFIX } from './utils/version.ts';

package/dist-react/types/utils/componentFactory.d.ts

@@ -20,6 +20,7 @@ export type ComponentFactory = {
     createToastMessage: GetAttributes<DsToastMessageAttrs>;
     createInlineAlert: GetAttributes<DsInlineAlertAttrs>;
     createTooltip: GetAttributes<DsTooltipAttrs & {
+        class?: string;
         children?: any;
         content?: any;
     }>;

package/dist-react/types/utils/version.d.ts

@@ -0,0 +1,2 @@
+export declare const VERSION: string;
+export declare const VERSION_TAG_SUFFIX: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "2.0.0-canary.113",
+  "version": "2.0.0-canary.115",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -117,7 +117,7 @@
     "lottie-web": "^5.13.0",
     "nodemon": "^3.1.14",
     "playwright": "1.56.1",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.12",
     "postcss-cli": "^11.0.1",
     "postcss-custom-media": "^11.0.6",
     "postcss-import": "^16.1.0",