@cupra/ui-react 2.0.0-canary.7 → 2.0.0-canary.71

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-breadcrumbs";
+const m = (r) => {
+  const { className: s, children: c, ...e } = r;
+  return /* @__PURE__ */ o("ds-breadcrumbs-react", { class: s, ...e, children: c });
+};
+export {
+  m as Breadcrumbs
+};

package/dist/esm/components/BreadcrumbsItem/BreadcrumbsItem.js

@@ -0,0 +1,12 @@
+import { jsx as m } from "react/jsx-runtime";
+import e from "react";
+import "@cupra/ui-kit/react/ds-breadcrumbs-item";
+const i = (t) => {
+  const { className: s, children: o, ...a } = t;
+  return /* @__PURE__ */ m("ds-breadcrumbs-item-react", { class: s, ...a, children: o });
+}, r = ({ children: t }) => e.isValidElement(t) ? e.cloneElement(t, { slot: "item" }) : /* @__PURE__ */ m("div", { slot: "item", children: t });
+i.Item = r;
+r.displayName = "BreadcrumbsItem.Item";
+export {
+  i as BreadcrumbsItem
+};

package/dist/esm/components/DialogFullscreen/DialogFullscreen.js

@@ -0,0 +1,15 @@
+import { jsx as i } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-dialog-fullscreen";
+import "@cupra/ui-kit/react/utils/breakpoints";
+import "react";
+import { useHandleEvent as a } from "../../hooks/useHandleEvent.js";
+import { createPortal as m } from "react-dom";
+function P(r) {
+  const { className: e, children: t, onClose: l, withPortal: s, ...n } = r, { ref: c } = a({
+    "ds-dialog-fullscreen:close": l
+  }), o = /* @__PURE__ */ i("ds-dialog-fullscreen-react", { ref: c, class: e, ...n, children: t });
+  return s ? m(o, document.body) : o;
+}
+export {
+  P as DialogFullscreen
+};

package/dist/esm/components/IconButtonGroup/IconButtonGroup.js

@@ -0,0 +1,9 @@
+import { jsx as c } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-icon-button-group";
+function p(o) {
+  const { className: r, children: t, ...n } = o;
+  return /* @__PURE__ */ c("ds-icon-button-group-react", { class: r, ...n, children: t });
+}
+export {
+  p as IconButtonGroup
+};

package/dist/esm/components/InlineAlert/InlineAlert.js

@@ -0,0 +1,14 @@
+import { jsx as l } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-inline-alert";
+import "@cupra/ui-kit/react/utils/breakpoints";
+import "react";
+import { useHandleEvent as s } from "../../hooks/useHandleEvent.js";
+function d(e) {
+  const { className: r, children: o, onClose: t, ...n } = e, { ref: i } = s({
+    "inline-alert:close": t
+  });
+  return /* @__PURE__ */ l("ds-inline-alert-react", { ref: i, class: r, ...n, children: o });
+}
+export {
+  d as InlineAlert
+};

package/dist/esm/components/List/List.js

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

package/dist/esm/components/ListItem/ListItem.js

@@ -0,0 +1,13 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-list-item";
+import { Divider as n } from "../Divider/Divider.js";
+function u({ className: r, children: s, selected: o, disabled: d, variant: i, ...f }) {
+  const t = { ...f };
+  return i && (t.variant = i), o && (t.selected = !0), d && (t.disabled = !0), /* @__PURE__ */ m("div", { style: { width: "fit-content" }, children: [
+    /* @__PURE__ */ e("ds-list-item-react", { className: r, ...t, children: s }),
+    i !== "info" && /* @__PURE__ */ e(n, {})
+  ] });
+}
+export {
+  u as ListItem
+};

package/dist/esm/components/MediaControl/MediaControl.js

@@ -0,0 +1,12 @@
+import { jsx as n } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
+import "react";
+import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
+import "@cupra/ui-kit/react/ds-media-control";
+function u(o) {
+  const { className: r, onPlay: t, onPause: e, ...s } = o, { ref: a } = m({ "ds-media-control:play": t, "ds-media-control:pause": e });
+  return /* @__PURE__ */ n("ds-media-control-react", { ref: a, class: r, ...s });
+}
+export {
+  u as MediaControl
+};

package/dist/esm/components/NavigationControls/NavigationControls.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-navigation-controls";
+function c(o) {
+  const { className: r, children: t, ...n } = o;
+  return /* @__PURE__ */ s("ds-navigation-controls-react", { class: r, ...n, children: t });
+}
+export {
+  c as NavigationControls
+};

package/dist/esm/components/SecondaryNavigation/SecondaryNavigation.js

@@ -0,0 +1,17 @@
+import { jsx as o, Fragment as a } from "react/jsx-runtime";
+import { Children as m } from "react";
+import "@cupra/ui-kit/react/ds-secondary-navigation";
+import "@cupra/ui-kit/react/utils/breakpoints";
+import { useHandleEvent as d } from "../../hooks/useHandleEvent.js";
+function e(t) {
+  const { className: n, children: r, onSelect: s, ...i } = t, { ref: c } = d({
+    "ds-secondary-navigation:select": s
+  });
+  return /* @__PURE__ */ o("ds-secondary-navigation-react", { ref: c, class: n, ...i, children: r });
+}
+const l = ({ children: t, ...n }) => /* @__PURE__ */ o("a", { slot: "items", ...n, children: t }), p = ({ children: t }) => /* @__PURE__ */ o(a, { children: m.map(t, (n, r) => /* @__PURE__ */ o("div", { slot: "actions", children: n }, r)) });
+e.Item = l;
+e.Actions = p;
+export {
+  e as SecondaryNavigation
+};

package/dist/esm/index.js

@@ -0,0 +1,146 @@
+import { Accordion as t } from "./components/Accordion/Accordion.js";
+import { Badge as m } from "./components/Badge/Badge.js";
+import { BasicCard as f } from "./components/BasicCard/BasicCard.js";
+import { BasicCardImage as i } from "./components/BasicCardImage/BasicCardImage.js";
+import { BasicCardHeader as d } from "./components/BasicCardHeader/BasicCardHeader.js";
+import { BasicCardSection as c } from "./components/BasicCardSection/BasicCardSection.js";
+import { Breadcrumbs as u } from "./components/Breadcrumbs/Breadcrumbs.js";
+import { BreadcrumbsItem as B } from "./components/BreadcrumbsItem/BreadcrumbsItem.js";
+import { Bullets as C } from "./components/Bullets/Bullets.js";
+import { Button as T } from "./components/Button/Button.js";
+import { CarouselIndicator as L } from "./components/CarouselIndicator/CarouselIndicator.js";
+import { Checkbox as D } from "./components/Checkbox/Checkbox.js";
+import { Chip as k } from "./components/Chip/Chip.js";
+import { Chips as R } from "./components/Chips/Chips.js";
+import { Currency as H } from "./components/Currency/Currency.js";
+import { Dialog as w } from "./components/Dialog/Dialog.js";
+import { DialogBody as N } from "./components/DialogBody/DialogBody.js";
+import { DialogFooter as F } from "./components/DialogFooter/DialogFooter.js";
+import { DialogFullscreen as z } from "./components/DialogFullscreen/DialogFullscreen.js";
+import { DialogHeader as j } from "./components/DialogHeader/DialogHeader.js";
+import { Divider as J } from "./components/Divider/Divider.js";
+import { Drawer as Q } from "./components/Drawer/Drawer.js";
+import { Hyperlink as V } from "./components/Hyperlink/Hyperlink.js";
+import { Icon as X } from "./components/Icon/Icon.js";
+import { IconButton as Z } from "./components/IconButton/IconButton.js";
+import { Input as $ } from "./components/Input/Input.js";
+import { List as ro } from "./components/List/List.js";
+import { ListItem as to } from "./components/ListItem/ListItem.js";
+import { LinkButton as mo } from "./components/LinkButton/LinkButton.js";
+import { Loader as fo, LoaderLogo as ao } from "./components/Loader/Loader.js";
+import { Logo as no } from "./components/Logo/Logo.js";
+import { MainTitle as co } from "./components/MainTitle/MainTitle.js";
+import { MapPin as uo } from "./components/MapPin/MapPin.js";
+import { MediaControl as Bo } from "./components/MediaControl/MediaControl.js";
+import { Modal as Co } from "./components/Modal/Modal.js";
+import { PasswordInput as To } from "./components/PasswordInput/PasswordInput.js";
+import { PickerItem as Lo } from "./components/PickerItem/PickerItem.js";
+import { Radio as Do } from "./components/Radio/Radio.js";
+import { RadioButton as ko } from "./components/RadioButton/RadioButton.js";
+import { RadioButtonGroup as Ro } from "./components/RadioButtonGroup/RadioButtonGroup.js";
+import { Rating as Ho } from "./components/Rating/Rating.js";
+import { Search as wo } from "./components/Search/Search.js";
+import { SearchInput as No } from "./components/SearchInput/SearchInput.js";
+import { SecondaryNavigation as Fo } from "./components/SecondaryNavigation/SecondaryNavigation.js";
+import { SegmentedControl as zo } from "./components/SegmentedControl/SegmentedControl.js";
+import { Select as jo } from "./components/Select/Select.js";
+import { Selection as Jo } from "./components/Selection/Selection.js";
+import { Slider as Qo } from "./components/Slider/Slider.js";
+import { Tabs as Vo } from "./components/Tabs/Tabs.js";
+import { Tag as Xo } from "./components/Tag/Tag.js";
+import { Text as Zo } from "./components/Text/Text.js";
+import { TextInput as $o } from "./components/TextInput/TextInput.js";
+import { Textarea as rr } from "./components/Textarea/Textarea.js";
+import { ThemeProvider as tr } from "./components/ThemeProvider/ThemeProvider.js";
+import { ToggleButton as mr } from "./components/ToggleButton/ToggleButton.js";
+import { ToggleSwitch as fr } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as ir } from "./components/Tooltip/Tooltip.js";
+import { Toast as dr } from "./components/Toast/Toast.js";
+import { ToastMessage as cr } from "./components/ToastMessage/ToastMessage.js";
+import { InlineAlert as ur } from "./components/InlineAlert/InlineAlert.js";
+import { Avatar as Br } from "./components/Avatar/Avatar.js";
+import { StaticBox as Cr } from "./components/StaticBox/StaticBox.js";
+import { Stepper as Tr } from "./components/Stepper/Stepper.js";
+import { InteractiveCard as Lr } from "./components/InteractiveCard/InteractiveCard.js";
+import { SidebarNavigation as Dr } from "./components/SidebarNavigation/SidebarNavigation.js";
+import { IconButtonGroup as kr } from "./components/IconButtonGroup/IconButtonGroup.js";
+import { NavigationControls as Rr } from "./components/NavigationControls/NavigationControls.js";
+import { useBreakpoint as Hr } from "./hooks/useBreakpoint.js";
+import { useEventListeners as wr } from "./hooks/useEventListeners.js";
+import { useHandleEvent as Nr } from "./hooks/useHandleEvent.js";
+import "react";
+import { useResizeObserver as Fr } from "./hooks/useResizeObserver/useResizeObserver.js";
+export {
+  t as Accordion,
+  Br as Avatar,
+  m as Badge,
+  f as BasicCard,
+  d as BasicCardHeader,
+  i as BasicCardImage,
+  c as BasicCardSection,
+  u as Breadcrumbs,
+  B as BreadcrumbsItem,
+  C as Bullets,
+  T as Button,
+  L as CarouselIndicator,
+  D as Checkbox,
+  k as Chip,
+  R as Chips,
+  H as Currency,
+  w as Dialog,
+  N as DialogBody,
+  F as DialogFooter,
+  z as DialogFullscreen,
+  j as DialogHeader,
+  J as Divider,
+  Q as Drawer,
+  V as Hyperlink,
+  X as Icon,
+  Z as IconButton,
+  kr as IconButtonGroup,
+  ur as InlineAlert,
+  $ as Input,
+  Lr as InteractiveCard,
+  mo as LinkButton,
+  ro as List,
+  to as ListItem,
+  fo as Loader,
+  ao as LoaderLogo,
+  no as Logo,
+  co as MainTitle,
+  uo as MapPin,
+  Bo as MediaControl,
+  Co as Modal,
+  Rr as NavigationControls,
+  To as PasswordInput,
+  Lo as PickerItem,
+  Do as Radio,
+  ko as RadioButton,
+  Ro as RadioButtonGroup,
+  Ho as Rating,
+  wo as Search,
+  No as SearchInput,
+  Fo as SecondaryNavigation,
+  zo as SegmentedControl,
+  jo as Select,
+  Jo as Selection,
+  Dr as SidebarNavigation,
+  Qo as Slider,
+  Cr as StaticBox,
+  Tr as Stepper,
+  Vo as Tabs,
+  Xo as Tag,
+  Zo as Text,
+  $o as TextInput,
+  rr as Textarea,
+  tr as ThemeProvider,
+  dr as Toast,
+  cr as ToastMessage,
+  mr as ToggleButton,
+  fr as ToggleSwitch,
+  ir as Tooltip,
+  Hr as useBreakpoint,
+  wr as useEventListeners,
+  Nr as useHandleEvent,
+  Fr as useResizeObserver
+};

package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-breadcrumbs';
+import type { DsBreadcrumbsAttrs } from '@cupra/ui-kit/react/types/ds-breadcrumbs';
+export type BreadcrumbsProps = DsBreadcrumbsAttrs & {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+};
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => ReactElement;

package/dist/types/components/BreadcrumbsItem/BreadcrumbsItem.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement, type ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-breadcrumbs-item';
+import type { DsBreadcrumbsItemAttrs } from '@cupra/ui-kit/react/types/ds-breadcrumbs-item';
+export type BreadcrumbsItemProps = DsBreadcrumbsItemAttrs & {
+    className?: string;
+    children?: ReactNode;
+};
+export declare const BreadcrumbsItem: {
+    (props: BreadcrumbsItemProps): ReactElement;
+    Item: {
+        ({ children }: {
+            children: ReactNode;
+        }): ReactElement;
+        displayName: string;
+    };
+};

package/dist/types/components/IconButtonGroup/IconButtonGroup.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-icon-button-group';
+import type { DsIconButtonGroupAttrs } from '@cupra/ui-kit/react/types/ds-icon-button-group';
+type IconButtonGroupProps = DsIconButtonGroupAttrs & {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+};
+export declare function IconButtonGroup(props: IconButtonGroupProps): ReactElement;
+export {};

package/dist/types/components/InlineAlert/InlineAlert.d.ts

@@ -0,0 +1,9 @@
+import { DsInlineAlertAttrs } from '@cupra/ui-kit/react/types/ds-inline-alert';
+import { type ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-inline-alert';
+export type InlineAlertProps = DsInlineAlertAttrs & {
+    className?: string;
+    children?: ReactNode;
+    onClose?: (event: CustomEvent) => void;
+};
+export declare function InlineAlert(props: InlineAlertProps): ReactNode;

package/dist/types/components/List/List.d.ts

@@ -0,0 +1,9 @@
+import type { DsListAttrs } from '@cupra/ui-kit/react/types/ds-list';
+import { type ReactElement, ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-list';
+export interface ListProps extends Partial<DsListAttrs> {
+    className?: string;
+    children?: ReactNode;
+    size?: 'small' | 'medium';
+}
+export declare function List({ className, children, ...rest }: ListProps): ReactElement;

package/dist/types/components/ListItem/ListItem.d.ts

@@ -0,0 +1,10 @@
+import type { DsListItemAttrs } from '@cupra/ui-kit/react/types/ds-list-item';
+import { type ReactElement, type ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-list-item';
+export interface ListItemProps extends DsListItemAttrs {
+    className?: string;
+    children?: ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+}
+export declare function ListItem({ className, children, selected, disabled, variant, ...rest }: ListItemProps): ReactElement;

package/dist/types/components/MediaControl/MediaControl.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-media-control';
+import type { DsMediaControlAttrs } from '@cupra/ui-kit/react/types/ds-media-control';
+type MediaControlProps = DsMediaControlAttrs & {
+    className?: string;
+    onPlay?: (event: CustomEvent) => void;
+    onPause?: (event: CustomEvent) => void;
+};
+export declare function MediaControl(props: MediaControlProps): ReactElement;
+export {};

package/dist/types/components/NavigationControls/NavigationControls.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-navigation-controls';
+import type { DsNavigationControlsAttrs } from '@cupra/ui-kit/react/types/ds-navigation-controls';
+type NavigationControlsProps = DsNavigationControlsAttrs & {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+};
+export declare function NavigationControls(props: NavigationControlsProps): ReactElement;
+export {};

package/dist/{components → types/components}/Tag/Tag.d.ts

@@ -1,11 +1,10 @@
 import { type ReactElement } from 'react';
 import '@cupra/ui-kit/react/ds-tag';
 import { DsTagAttrs } from '@cupra/ui-kit/react/types/ds-tag';
-type Children = JSX.Element | JSX.Element[] | string;
-interface TabsProps extends DsTagAttrs {
-    onClickIcon?: (event: CustomEvent) => void;
-    children: Children;
+type TabsProps = DsTagAttrs & {
     className?: string;
-}
+    children: JSX.Element | JSX.Element[] | string;
+    onClickIcon?: (event: CustomEvent) => void;
+};
 export declare function Tag(props: Readonly<TabsProps>): ReactElement;
 export {};

package/dist/{components → types/components}/Text/Text.d.ts

@@ -1,9 +1,9 @@
 import { DsTextAttrs } from '@cupra/ui-kit/react/types/ds-text';
-import { type ReactElement } from 'react';
+import { type ReactElement, ReactNode } from 'react';
 import '@cupra/ui-kit/react/ds-text';
 type TextProps = DsTextAttrs & {
     className?: string;
-    children: JSX.Element | JSX.Element[] | string;
+    children?: ReactNode | string;
 };
 export declare function Text(props: TextProps): ReactElement;
 export {};

package/dist/{components → types/components}/index.d.ts

@@ -1,7 +1,11 @@
 export * from './Accordion/Accordion';
 export * from './Badge/Badge';
 export * from './BasicCard/BasicCard';
+export * from './BasicCardImage/BasicCardImage';
+export * from './BasicCardHeader/BasicCardHeader';
 export * from './BasicCardSection/BasicCardSection';
+export * from './Breadcrumbs/Breadcrumbs';
+export * from './BreadcrumbsItem/BreadcrumbsItem';
 export * from './Bullets/Bullets';
 export * from './Button/Button';
 export * from './CarouselIndicator/CarouselIndicator';
@@ -12,6 +16,7 @@ export * from './Currency/Currency';
 export * from './Dialog/Dialog';
 export * from './DialogBody/DialogBody';
 export * from './DialogFooter/DialogFooter';
+export * from './DialogFullscreen/DialogFullscreen';
 export * from './DialogHeader/DialogHeader';
 export * from './Divider/Divider';
 export * from './Drawer/Drawer';
@@ -19,11 +24,14 @@ export * from './Hyperlink/Hyperlink';
 export * from './Icon/Icon';
 export * from './IconButton/IconButton';
 export * from './Input/Input';
+export * from './List/List';
+export * from './ListItem/ListItem';
 export * from './LinkButton/LinkButton';
 export * from './Loader/Loader';
 export * from './Logo/Logo';
 export * from './MainTitle/MainTitle';
 export * from './MapPin/MapPin';
+export * from './MediaControl/MediaControl';
 export * from './Modal/Modal';
 export * from './PasswordInput/PasswordInput';
 export * from './PickerItem/PickerItem';
@@ -49,8 +57,12 @@ export * from './ToggleSwitch/ToggleSwitch';
 export * from './Tooltip/Tooltip';
 export * from './Toast/Toast';
 export * from './ToastMessage/ToastMessage';
+export * from './InlineAlert/InlineAlert';
 export * from './Avatar/Avatar';
 export * from './StaticBox/StaticBox';
 export * from './Stepper/Stepper';
 export * from './InteractiveCard/InteractiveCard';
 export * from './SidebarNavigation/SidebarNavigation';
+export * from './MediaControl/MediaControl';
+export * from './IconButtonGroup/IconButtonGroup';
+export * from './NavigationControls/NavigationControls';

package/package.json

@@ -1,24 +1,28 @@
 {
   "name": "@cupra/ui-react",
-  "version": "2.0.0-canary.7",
+  "version": "2.0.0-canary.71",
   "description": "React components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
   "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs"
     },
     "./*": {
-      "import": "./dist/components/*/*.js",
-      "types": "./dist/components/*/*.d.ts"
+      "types": "./dist/types/components/*/*.d.ts",
+      "import": "./dist/esm/components/*/*.js",
+      "require": "./dist/cjs/components/*/*.cjs"
     },
     "./hooks/*": {
-      "import": "./dist/hooks/*.js",
-      "types": "./dist/hooks/*.d.ts"
+      "types": "./dist/types/hooks/*.d.ts",
+      "import": "./dist/esm/hooks/*.js",
+      "require": "./dist/cjs/hooks/*.cjs"
     }
   },
   "files": [
@@ -47,7 +51,7 @@
   "peerDependencies": {
     "react": ">= 18.3.1 < 20",
     "react-dom": ">= 18.3.1 < 20",
-    "@cupra/ui-kit": "1.1.0-canary.4",
+    "@cupra/ui-kit": "2.0.0-canary.62",
     "typescript": ">=5.0.0"
   },
   "dependencies": {
@@ -64,19 +68,22 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.5",
+    "lottie-web": "^5.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "shadow-dom-testing-library": "^1.0.0",
-    "storybook": "^8.6.15",
+    "storybook": "^8.6.17",
     "typescript": "^5.8.2",
     "vite": "^6.4.1",
-    "@cupra/ui-kit": "1.1.0-canary.4"
+    "@cupra/ui-kit": "2.0.0-canary.62"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc --declaration --emitDeclarationOnly && vite build --emptyOutDir false",
-    "test": "npx vitest run",
+    "build": "rm -rf dist && pnpm --filter @cupra/ui-kit build:react && tsc --declaration --emitDeclarationOnly && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false",
+    "test": "vitest run",
     "generate-licenses": "npx generate-license-file --input package.json --output THIRD_PARTY_LICENSES.MD --overwrite --ci",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook:cupra-diagonal": "storybook build --output-dir dist-storybook/cupra-diagonal"
+    "storybook:cupra-diagonal": "pnpm --filter ui-kit build:react:dev && storybook dev --config-dir .storybook/themes/cupra-diagonal -p 6006",
+    "storybook:seat": "pnpm --filter ui-kit build:react:dev && storybook dev --config-dir .storybook/themes/seat -p 6006",
+    "build-storybook:cupra-diagonal": "storybook build --config-dir .storybook/themes/cupra-diagonal --output-dir dist-storybook/cupra-diagonal",
+    "build-storybook:seat": "storybook build --config-dir .storybook/themes/seat --output-dir dist-storybook/seat"
   }
 }

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

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

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

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const DefaultIcon: Story;
-export declare const WithInitials: Story;
-export declare const WithImage: Story;
-export declare const Disabled: Story;

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

@@ -1,8 +0,0 @@
-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/BasicCard/stories/CupraDiagonal.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Basic: Story;
-export declare const Featured: Story;
-export declare const CardGrid: Story;

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

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

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

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

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

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

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

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Tertiary: Story;
-export declare const Text: Story;
-export declare const PrimaryDestructive: Story;
-export declare const SecondaryDestructive: Story;
-export declare const TextDestructive: Story;
-export declare const PrimaryDisabled: Story;
-export declare const SecondaryDisabled: Story;
-export declare const TertiaryDisabled: Story;
-export declare const TextDisabled: Story;
-export declare const Medium: Story;
-export declare const Small: Story;
-export declare const CustomWithAnchorChildren: Story;
-export declare const CustomWithButtonChildren: Story;

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

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const InfiniteStart: Story;
-export declare const InfiniteCenter: Story;
-export declare const InfiniteEnd: Story;
-export declare const NotInfinite: Story;

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

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Unchecked: Story;
-export declare const Checked: Story;
-export declare const Indeterminate: Story;
-export declare const DisabledUnchecked: Story;
-export declare const DisabledChecked: Story;
-export declare const DisabledIndeterminate: Story;
-export declare const Invalid: Story;
-export declare const RequiredChecked: Story;
-export declare const WithHelperText: Story;
-export declare const WithInfoText: Story;
-export declare const ForcedError: Story;
-export declare const CheckedForcedError: Story;
-export declare const SmallLeftDefault: Story;
-export declare const SmallRightDefault: Story;
-export declare const MediumLeftDefault: Story;
-export declare const MediumRightDefault: Story;