@cupra/ui-react 1.0.0-canary.2 → 1.0.0-canary.21

package/README.md

@@ -18,10 +18,9 @@ If you need a **framework-agnostic** solution, consider `@cupra/ui-kit` (Web Com
 
 This library currently provides **official support for React 18**.
 
-- **Supported React versions:** `>=18.3.1 <19`
-- **React 19:** not officially supported yet. Work is in progress to add full support.
+- **Supported React versions:** `>=18.3.1 <20`
 
-Projects using React 19 may still install and use the library, but behaviour is not guaranteed until official support is released.
+Projects using other React versions may still install and use the library, but behaviour is not guaranteed until official support is released.
 
 ## Installation
 
@@ -48,6 +47,14 @@ npmRegistryServer: "https://registry.npmjs.org"
 
 ---
 
+## Documentation & Live Playground
+
+You can explore all `ui-react` Components, their APIs, theming options and live examples in the online documentation and playground:
+
+[https://diagonal.cupra.com/ui-react/index.html](https://diagonal.cupra.com/ui-react/index.html)
+
+---
+
 ## Versioning and Release Channels
 
 This package is distributed through npm using **two release channels**.
@@ -109,7 +116,10 @@ npm install @cupra/ui-react@0.1.4-canary.2
 
 ## Usage
 
-Wrap your React app with the `ThemeProvider`.  
+Import components via subpaths. Do not import from the package index:
+- @cupra/ui-react → React wrappers built on top of the Web Components (e.g. `import { Button } from '@cupra/ui-react/Button'`)
+
+Wrap your React app with `ThemeProvider`.  
 The provider requires **three props**:
 
 | Prop       | Type    | Required | Description                                   |
@@ -123,14 +133,16 @@ If `loadFonts` or `loadStyles` are `false`, you must manually include `<link>` t
 ### Option A — Manual CSS and font links
 
 ```tsx
-import { ThemeProvider, Button, Icon } from '@cupra/ui-react';
+import { ThemeProvider } from '@cupra/ui-react/ThemeProvider';
+import { Button } from '@cupra/ui-react/Button';
+import { Icon } from '@cupra/ui-react/Icon';
 
 export function App() {
     return (
         <>
             <link rel="preload" as="style" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
             <link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
-            <ThemeProvider theme="cupra" loadFonts={false} loadStyles={false}>
+            <ThemeProvider theme="cupra-diagonal" loadFonts={false} loadStyles={false}>
                 <Button variant="destructive" icon-name="filters-background">Click me</Button>
                 <Icon icon-name="filters-background" />
             </ThemeProvider>
@@ -142,11 +154,12 @@ export function App() {
 ### Option B — Provider loads assets automatically
 
 ```tsx
-import { ThemeProvider, Button } from '@cupra/ui-react';
+import { ThemeProvider } from '@cupra/ui-react/ThemeProvider';
+import { Button } from '@cupra/ui-react/Button';
 
 export function App() {
     return (
-        <ThemeProvider theme="cupra" loadFonts={true} loadStyles={true}>
+        <ThemeProvider theme="cupra-diagonal" loadFonts={true} loadStyles={true}>
             <Button variant="primary">Button</Button>
         </ThemeProvider>
     );

package/{THIRD-PARTY-LICENSES.MD → THIRD_PARTY_LICENSES.MD}

@@ -3,13 +3,13 @@ https://www.npmjs.com/package/generate-license-file
 
 The following npm package may be included in this product:
 
- - @cupra/ui-kit@16.0.1
+ - @cupra/ui-kit@1.0.0-canary.3
 
 This package contains the following license:
 
-# SEAT, S.A. Library EULA
+# SEAT, S.A. Library EULA 1.0
 
-SEAT, S.A.U. (hereinafter, “SEAT”) is a Spanish entity domiciled in Martorell (Barcelona), Autovía A-2, Km. 585, with a Tax Identification Number (C.I.F.) A-28.049.161, duly registered in the Mercantile Registry of Barcelona in Volume 23.662, folio 1, page number B-56.855 and whose contact email is [*].
+SEAT, S.A.U. (hereinafter, “SEAT”) is a Spanish entity domiciled in Martorell (Barcelona), Autovía A-2, Km. 585, with a Tax Identification Number (C.I.F.) A-28.049.161, duly registered in the Mercantile Registry of Barcelona in Volume 23.662, folio 1, page number B-56.855 and whose contact email is **ds.support@seat.es**
 SEAT releases this End-User License Agreement (“EULA”) to specify the rights and obligations when using a library or package applicable to this EULA (“Library”).
 
 ## Library Specification

package/dist/components/Accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 import { DsAccordionAttrs } from '@cupra/ui-kit/react/types/ds-accordion';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-accordion';
 import { type ReactElement } from 'react';
 type Children = JSX.Element | JSX.Element[] | string;
 interface AccordionProps extends DsAccordionAttrs {

package/dist/components/Accordion/Accordion.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-accordion";
 const n = ({ children: t, ...r }) => /* @__PURE__ */ o("ds-accordion-react", { ...r, children: t }), e = ({ children: t }) => /* @__PURE__ */ o("div", { slot: "title", children: t }), c = ({ children: t }) => /* @__PURE__ */ o("div", { slot: "content", children: t });
 n.Title = e;
 n.Content = c;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-avatar';
 import type { DsAvatarAttrs } from '@cupra/ui-kit/react/types/ds-avatar';
 export type AvatarProps = DsAvatarAttrs & {
     className?: string;

package/dist/components/Avatar/Avatar.js

@@ -1,11 +1,12 @@
-import { jsx as s } from "react/jsx-runtime";
-import { isValidElement as i, cloneElement as m } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
+import { isValidElement as n, cloneElement as s } from "react";
 import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
-function v(t) {
-  const { className: e, onClick: r, image: o, ...a } = t, { ref: l } = c({ click: r }), n = o && i(o) ? m(o, { slot: "media", ...o.props }) : null;
-  return /* @__PURE__ */ s("ds-avatar-react", { ref: l, class: e, ...a, children: n });
+import "@cupra/ui-kit/react/ds-avatar";
+function E(t) {
+  const { className: r, onClick: e, image: o, ...a } = t, { ref: i } = c({ click: e }), l = o && n(o) ? s(o, { slot: "media", ...o.props }) : null;
+  return /* @__PURE__ */ m("ds-avatar-react", { ref: i, class: r, ...a, children: l });
 }
 export {
-  v as Avatar
+  E as Avatar
 };

package/dist/components/Bullets/Bullets.d.ts

@@ -1,5 +1,5 @@
 import { DsBulletsAttrs } from '@cupra/ui-kit/react/types/ds-bullets';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-bullets';
 import { type ReactElement } from 'react';
 export interface BulletsProps extends DsBulletsAttrs {
     className?: string;

package/dist/components/Bullets/Bullets.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-bullets";
 const o = ({ className: t, ...r }) => /* @__PURE__ */ s("ds-bullets-react", { class: t, ...r });
 export {
   o as Bullets

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-button';
 import type { DsButtonAttrs } from '@cupra/ui-kit/react/types/ds-button';
 type ButtonProps = DsButtonAttrs & {
     className?: string;

package/dist/components/Button/Button.js

@@ -1,20 +1,21 @@
 import { jsx as c } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
-function u(o) {
-  const { className: r, children: s, onClick: e, size: t, ...i } = o, { ref: n } = m({ click: e });
+import "@cupra/ui-kit/react/ds-button";
+function d(o) {
+  const { className: r, children: i, onClick: s, size: t, ...e } = o, { ref: n } = m({ click: s });
   return /* @__PURE__ */ c(
     "ds-button-react",
     {
       ref: n,
       size: typeof t == "string" ? t : JSON.stringify(t),
       class: r,
-      ...i,
-      children: s
+      ...e,
+      children: i
     }
   );
 }
 export {
-  u as Button
+  d as Button
 };

package/dist/components/CarouselIndicator/CarouselIndicator.d.ts

@@ -1,6 +1,6 @@
 import { DsCarouselIndicatorAttrs } from '@cupra/ui-kit/react/types/ds-carousel-indicator';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-carousel-indicator';
 type CarouselIndicatorProps = DsCarouselIndicatorAttrs & {
     className?: string;
 };

package/dist/components/CarouselIndicator/CarouselIndicator.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-carousel-indicator";
 function i(r) {
   const { className: o, children: c, ...s } = r;
   return /* @__PURE__ */ t("ds-carousel-indicator-react", { class: o, ...s });

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-checkbox';
 import { DsCheckboxAttrs } from '@cupra/ui-kit/react/types/ds-checkbox';
 interface CheckboxProps extends DsCheckboxAttrs {
     onChange?: (event: CustomEvent) => void;

package/dist/components/Checkbox/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsx as c } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
-import { useHandleEvent as n } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
-function s({ onChange: o, children: r, ...e }) {
-  const { ref: t } = n({ change: o });
-  return /* @__PURE__ */ c("ds-checkbox-react", { ref: t, ...e, children: r });
+import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
+import "@cupra/ui-kit/react/ds-checkbox";
+function x({ onChange: o, children: r, ...t }) {
+  const { ref: e } = m({ change: o });
+  return /* @__PURE__ */ c("ds-checkbox-react", { ref: e, ...t, children: r });
 }
 export {
-  s as Checkbox
+  x as Checkbox
 };

package/dist/components/Chip/Chip.d.ts

@@ -1,6 +1,6 @@
 import { DsChipAttrs } from '@cupra/ui-kit/react/types/ds-chip';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-chip';
 type ChipProps = DsChipAttrs & {
     className?: string;
     children: JSX.Element | JSX.Element[] | string;

package/dist/components/Chip/Chip.js

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-chip";
 function p(r) {
   const { className: o, children: s, ...t } = r;
   return /* @__PURE__ */ c("ds-chip-react", { class: o, ...t, children: s });

package/dist/components/Chips/Chips.d.ts

@@ -1,6 +1,6 @@
 import { type DsChipsAttrs } from '@cupra/ui-kit/react/types/ds-chips';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-chips';
 type ChipsProps = DsChipsAttrs & {
     className?: string;
     children: JSX.Element | JSX.Element[] | string;

package/dist/components/Chips/Chips.js

@@ -1,13 +1,14 @@
 import { jsx as c } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-chips";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as i } from "../../hooks/useHandleEvent.js";
-function d(r) {
-  const { className: s, children: o, onChange: e, ...t } = r, { ref: n } = i({
-    "ds-chips:change": e
+function f(r) {
+  const { className: o, children: s, onChange: t, ...e } = r, { ref: n } = i({
+    "ds-chips:change": t
   });
-  return /* @__PURE__ */ c("ds-chips-react", { ref: n, class: s, ...t, children: o });
+  return /* @__PURE__ */ c("ds-chips-react", { ref: n, class: o, ...e, children: s });
 }
 export {
-  d as Chips
+  f as Chips
 };

package/dist/components/Currency/Currency.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-currency';
 import { DsCurrencyAttrs } from '@cupra/ui-kit/react/types/ds-currency';
 type CurrencyProps = DsCurrencyAttrs & {
     className?: string;

package/dist/components/Currency/Currency.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-currency";
 function n(r) {
   const { className: c, ...o } = r;
   return /* @__PURE__ */ s("ds-currency-react", { class: c, ...o });

package/dist/components/Dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { DsDialogAttrs } from '@cupra/ui-kit/react/types/ds-dialog';
 import { type ReactNode } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-dialog';
 type DialogProps = DsDialogAttrs & {
     className?: string;
     withPortal?: boolean;

package/dist/components/Dialog/Dialog.js

@@ -1,8 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-dialog";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
-function u(e) {
+function g(e) {
   const { className: n, children: l, onClose: s, withPortal: i, ...o } = e, { ref: a } = c({
     "ds-dialog:close": s
   });
@@ -11,5 +12,5 @@ function u(e) {
   return i ? /* @__PURE__ */ t("ds-portal-react", { style: { display: "none" }, children: r }) : r;
 }
 export {
-  u as Dialog
+  g as Dialog
 };

package/dist/components/DialogBody/DialogBody.d.ts

@@ -1,6 +1,6 @@
 import { DsDialogBodyAttrs } from '@cupra/ui-kit/react/types/ds-dialog-body';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-dialog-body';
 type DialogBodyProps = DsDialogBodyAttrs & {
     className?: string;
     children?: JSX.Element | JSX.Element[] | string;

package/dist/components/DialogBody/DialogBody.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-dialog-body";
 function i(o) {
   const { className: r, children: s, ...t } = o;
   return /* @__PURE__ */ a("ds-dialog-body-react", { class: r, ...t, children: s });

package/dist/components/DialogFooter/DialogFooter.d.ts

@@ -1,6 +1,6 @@
 import { DsDialogFooterAttrs } from '@cupra/ui-kit/react/types/ds-dialog-footer';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-dialog-footer';
 type DialogFooterProps = DsDialogFooterAttrs & {
     className?: string;
     children?: JSX.Element | JSX.Element[] | string;

package/dist/components/DialogFooter/DialogFooter.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-dialog-footer";
 function i(o) {
   const { className: r, children: t, ...e } = o;
   return /* @__PURE__ */ s("ds-dialog-footer-react", { class: r, ...e, children: t });

package/dist/components/DialogHeader/DialogHeader.d.ts

@@ -1,6 +1,6 @@
 import { DsDialogHeaderAttrs } from '@cupra/ui-kit/react/types/ds-dialog-header';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-dialog-header';
 type DialogHeaderProps = DsDialogHeaderAttrs & {
     className?: string;
     children?: JSX.Element | JSX.Element[] | string;

package/dist/components/DialogHeader/DialogHeader.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-dialog-header";
 function i(r) {
   const { className: e, children: o, ...a } = r;
   return /* @__PURE__ */ s("ds-dialog-header-react", { class: e, ...a, children: o });

package/dist/components/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import { DsDividerAttrs } from '@cupra/ui-kit/react/types/ds-divider';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-divider';
 export interface DividerProps extends DsDividerAttrs {
     className?: string;
 }

package/dist/components/Divider/Divider.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-divider";
 function d({ className: r, ...i }) {
   return /* @__PURE__ */ t("ds-divider-react", { class: r, ...i });
 }

package/dist/components/Hyperlink/Hyperlink.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-hyperlink';
 import { DsHyperlinkAttrs } from '@cupra/ui-kit/react/types/ds-hyperlink';
 export type HyperlinkProps = DsHyperlinkAttrs & {
     children: JSX.Element | JSX.Element[] | string;

package/dist/components/Hyperlink/Hyperlink.js

@@ -1,11 +1,12 @@
 import { jsx as i } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-hyperlink";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as n } from "../../hooks/useHandleEvent.js";
-function l({ children: r, onClick: t, ...e }) {
-  const { ref: o } = n({ click: t });
-  return /* @__PURE__ */ i("ds-hyperlink-react", { ref: o, ...e, children: r });
+function s({ children: r, onClick: t, ...o }) {
+  const { ref: e } = n({ click: t });
+  return /* @__PURE__ */ i("ds-hyperlink-react", { ref: e, ...o, children: r });
 }
 export {
-  l as Hyperlink
+  s as Hyperlink
 };

package/dist/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { DsIconAttrs } from '@cupra/ui-kit/react/types/ds-icon';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-icon';
 export interface IconProps extends DsIconAttrs {
     className?: string;
 }

package/dist/components/Icon/Icon.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-icon";
 function a(o) {
   const { "icon-name": n, className: c, ...r } = o;
   return /* @__PURE__ */ e("ds-icon-react", { "icon-name": n, class: c, ...r });

package/dist/components/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-icon-button';
 import { type DsIconButtonAttrs } from '@cupra/ui-kit/react/types/ds-icon-button';
 type IconButtonProps = DsIconButtonAttrs & {
     className?: string;

package/dist/components/IconButton/IconButton.js

@@ -1,19 +1,20 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-icon-button";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
-function l(o) {
-  const { className: r, onClick: n, size: t, ...s } = o, { ref: i } = c({ click: n });
+function u(o) {
+  const { className: r, onClick: i, size: t, ...n } = o, { ref: s } = c({ click: i });
   return /* @__PURE__ */ e(
     "ds-icon-button-react",
     {
-      ref: i,
+      ref: s,
       size: typeof t == "string" ? t : JSON.stringify(t),
       class: r,
-      ...s
+      ...n
     }
   );
 }
 export {
-  l as IconButton
+  u as IconButton
 };

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import { DsInputAttrs } from '@cupra/ui-kit/react/types/ds-input';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-input';
 import { ChangeEvent, FormEvent, ForwardRefExoticComponent, KeyboardEvent, RefAttributes } from 'react';
 type InputProps = DsInputAttrs & {
     className?: string;

package/dist/components/Input/Input.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-input";
 import { useHandleEvent as s } from "../../hooks/useHandleEvent.js";
 import { forwardRef as i, useImperativeHandle as u } from "react";
 const c = i(

package/dist/components/InteractiveCard/InteractiveCard.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-interactive-card';
 import type { DsInteractiveCardAttrs } from '@cupra/ui-kit/react/types/ds-interactive-card';
 type Children = JSX.Element | JSX.Element[] | string;
 type InteractiveCardProps = DsInteractiveCardAttrs & {

package/dist/components/InteractiveCard/InteractiveCard.js

@@ -1,10 +1,11 @@
 import { jsx as r } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
-import { useHandleEvent as p } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
+import { useHandleEvent as u } from "../../hooks/useHandleEvent.js";
+import "@cupra/ui-kit/react/ds-interactive-card";
 function e(t) {
-  const { className: d, children: v, onClick: m, ...C } = t, { ref: u } = p({ click: m });
-  return /* @__PURE__ */ r("ds-interactive-card-react", { ref: u, class: d, ...C, children: v });
+  const { className: d, children: v, onClick: m, ...C } = t, { ref: p } = u({ click: m });
+  return /* @__PURE__ */ r("ds-interactive-card-react", { ref: p, class: d, ...C, children: v });
 }
 const a = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "title", children: t }), i = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "subtitle", children: t }), n = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "meta", children: t }), o = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "content", children: t }), l = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "cta", children: t }), s = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "error-title", children: t }), c = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "error-text", children: t });
 e.Title = a;

package/dist/components/LinkButton/LinkButton.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-link-button';
 import { DsLinkButtonAttrs } from '@cupra/ui-kit/react/types/ds-link-button';
 type LinkButtonProps = DsLinkButtonAttrs & {
     children: JSX.Element | JSX.Element[] | string;

package/dist/components/LinkButton/LinkButton.js

@@ -1,11 +1,12 @@
 import { jsx as i } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-link-button";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
-function f({ children: t, onClick: o, ...r }) {
+function s({ children: t, onClick: o, ...r }) {
   const { ref: n } = e({ click: o });
   return /* @__PURE__ */ i("ds-link-button-react", { ref: n, ...r, children: t });
 }
 export {
-  f as LinkButton
+  s as LinkButton
 };

package/dist/components/Loader/Loader.d.ts

@@ -1,5 +1,8 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-loader-bar';
+import '@cupra/ui-kit/react/ds-loader-dots';
+import '@cupra/ui-kit/react/ds-loader-logo';
+import '@cupra/ui-kit/react/ds-loader-spinner';
 import { DsLoaderBarsAttrs } from '@cupra/ui-kit/react/types/ds-loader-bar';
 import { DsLoaderDotsAttrs } from '@cupra/ui-kit/react/types/ds-loader-dots';
 import { DsLoaderLogoAttrs } from '@cupra/ui-kit/react/types/ds-loader-logo';

package/dist/components/Loader/Loader.js

@@ -1,24 +1,27 @@
-import { jsx as e } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
-function o(r) {
-  return /* @__PURE__ */ e("ds-loader-logo-react", { ...r });
-}
+import { jsx as o } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-loader-bar";
+import "@cupra/ui-kit/react/ds-loader-dots";
+import "@cupra/ui-kit/react/ds-loader-logo";
+import "@cupra/ui-kit/react/ds-loader-spinner";
 function t(r) {
-  return /* @__PURE__ */ e("ds-loader-bar-react", { ...r });
+  return /* @__PURE__ */ o("ds-loader-logo-react", { ...r });
+}
+function e(r) {
+  return /* @__PURE__ */ o("ds-loader-bar-react", { ...r });
 }
 function n(r) {
-  return /* @__PURE__ */ e("ds-loader-dots-react", { ...r });
+  return /* @__PURE__ */ o("ds-loader-dots-react", { ...r });
 }
 function d(r) {
-  return /* @__PURE__ */ e("ds-loader-spinner-react", { ...r, children: r.text && /* @__PURE__ */ e("div", { slot: "text", children: r.text }) });
+  return /* @__PURE__ */ o("ds-loader-spinner-react", { ...r, children: r.text && /* @__PURE__ */ o("div", { slot: "text", children: r.text }) });
 }
-const c = {
-  Logo: o,
-  Bar: t,
+const u = {
+  Logo: t,
+  Bar: e,
   Dots: n,
   Spinner: d
 };
 export {
-  c as Loader,
-  o as LoaderLogo
+  u as Loader,
+  t as LoaderLogo
 };

package/dist/components/Logo/Logo.d.ts

@@ -1,6 +1,6 @@
 import { DsLogoAttrs } from '@cupra/ui-kit/react/types/ds-logo';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-logo';
 type LogoProps = DsLogoAttrs & {
     className?: string;
 };

package/dist/components/Logo/Logo.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-logo";
 function a(o) {
   const { className: r, children: c, ...s } = o;
   return /* @__PURE__ */ t("ds-logo-react", { class: r, ...s });