@cupra/ui-react 1.0.0-canary.9 → 1.0.1-canary.0

package/README.md

@@ -116,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                                   |
@@ -130,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>
@@ -149,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

@@ -1,52 +1,6 @@
 This file was generated with the generate-license-file npm package!
 https://www.npmjs.com/package/generate-license-file
 
-The following npm package may be included in this product:
-
- - @cupra/ui-kit@1.0.0-canary.3
-
-This package contains the following license:
-
-# 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 **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
-The specification of the Library does not form part of this EULA and is instead provided separately thought appropriate documentation accompanying the aforementioned Library. The Library is intended solely to support SEAT´s internal development projects.
-
-## License Grant
-SEAT hereby declares that all source code, files, fonts and other associated assets comprising the Library are the exclusive property of SEAT and/or its licensors.
-Subject to the terms and conditions of this EULA, SEAT grants you a limited, non-exclusive, non-transferable, and revocable license to download, install and use the Library strictly in accordance with this EULA.
-Any breach of the limitations or restrictions set forth herein shall result in the immediate and automatic termination of the license granted. Any use of the Library beyond the scope of the license shall constitute an infringement of SEAT´s intellectual property rights and a material breach of this EULA.  In the event of any such violation, the license shall automatically and immediately terminate without prior notice.
- If you violate any of these limitations or restrictions, the license grant will automatically and immediately expire. Any usage of the Library outside the scope of the applicable license constitutes an infringement of SEAT´s intellectual property rights as well as a material breach of this EULA.
-
-## Restrictions on Use
-You agree that you shall not, and shall not permit any third party to:
-
-1. license, sell, rent, lease, assign, distribute, transmit, host, outsource, disclose or otherwise commercially exploit the Library, or make the Library available to any third party in any manner;
-2. provide, disclose, or otherwise make accessible any features, functionalities, or components of the Library to any individual or entity outside your organization;
-3. Modify, reverse engineer, decompile or disassemble, or otherwise attempt to derive the source code, algorithms, methods or techniques of the Library;
-4. Remove, alter or obscure any proprietary notices, trademarks, labels or other intellectual property markings contained in or affixed to the Library;
-5. translate, adapt, arrange, or create derivative works based on the Library, or otherwise modify the Library, except as expressly permitted under this EULA;
-6. Use the Library in any manner that exceeds or is inconsistent with the rights granted under this EULA. The Library may be used solely for the purpose or in any context outside the scope of your business relationship with SEAT.
-
-## Copyright and ownership
-SEAT and its licensors retain all right, title, and interest in and to the Library, including without limitation, all associated copyrights, trademarks, trade secrets, patents, and other intellectual property rights.
-You are granted only the limited rights expressly set forth in the EULA. You acknowledge and agree that the Library is licensed, not sold, and that no ownership rights are transferred to you under this Agreement. All rights not expressly granted herein are reserved by SEAT and its licensors.
-
-## Modifications and availability
-SEAT reserves the right, at its sole discretion, to modify, suspend, or discontinue temporarily or permanently, the Library or any related services, with or without prior notice, and without incurring any liability to you or any third party.
-You acknowledge that the Library is not subject to regular maintenance or updates. Any updates, enhancements, or modifications shall be provided solely at SEAT´s discretion and without any obligation to do so.
-
-## Limitation of Liability
-To the maximum extent permitted by applicable law, SEAT and its licensors shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including but not limited to loss of profits, data, or business opportunities, arising out of or in connection with the use or inability to use the Library, even if SEAT has been advised of the possibility of such damages. SEAT´s total liability under this EULA shall in no event exceed the amount paid by you (if any) for the use of the Library.
-
-## Governing Law and Dispute resolution
-This EULA shall be governed by and construed in accordance with the common laws of Spain, without regard to its conflict of law principles. Any dispute, controversy, or claim arising out of or in connection with this EULA shall be submitted to the exclusive jurisdiction of the courts of the city of Barcelona (Spain).
-
------------
-
 The following npm package may be included in this product:
 
  - styled-components@6.1.19

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/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import type { DsBadgeAttrs } from '@cupra/ui-kit/react/types/ds-badge';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-badge';
+export interface BadgeProps extends DsBadgeAttrs {
+    className?: string;
+}
+export declare function Badge({ className, ...rest }: BadgeProps): ReactElement;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-badge";
+function s({ className: r, ...t }) {
+  return /* @__PURE__ */ e("ds-badge-react", { class: r, ...t });
+}
+export {
+  s as Badge
+};

package/dist/components/Badge/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Dot: Story;
+export declare const NumberBase: Story;
+export declare const NumberSmallInverted: Story;
+export declare const NumberInverted: Story;

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,15 +1,15 @@
-import { jsx as t } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import { jsx as l } from "react/jsx-runtime";
+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) {
-  const { className: n, children: l, onClose: s, withPortal: i, ...o } = e, { ref: a } = c({
+import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
+import { createPortal as c } from "react-dom";
+function P(t) {
+  const { className: r, children: e, onClose: s, withPortal: i, ...n } = t, { ref: a } = m({
     "ds-dialog:close": s
-  });
-  if (!o.open) return null;
-  const r = /* @__PURE__ */ t("ds-dialog-react", { ref: a, class: n, ...o, children: l });
-  return i ? /* @__PURE__ */ t("ds-portal-react", { style: { display: "none" }, children: r }) : r;
+  }), o = /* @__PURE__ */ l("ds-dialog-react", { ref: a, class: r, ...n, children: e });
+  return i ? c(o, document.body) : o;
 }
 export {
-  u as Dialog
+  P 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,9 +1,8 @@
 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 & {
+export type IconButtonProps = DsIconButtonAttrs & {
     className?: string;
     onClick?: (event: CustomEvent) => void;
 };
 export declare function IconButton(props: IconButtonProps): ReactElement;
-export {};

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';