@cupra/ui-react 1.0.0-canary.3 → 1.0.0-canary.30

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 });

package/dist/components/MainTitle/MainTitle.d.ts

@@ -0,0 +1,17 @@
+import type { DsMainTitleAttrs } from '@cupra/ui-kit/react/types/ds-main-title';
+import { type ElementType, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-main-title';
+type MainTitleSubProps = HTMLAttributes<HTMLElement> & {
+    as: ElementType;
+    children: ReactNode;
+};
+type MainTitleProps = DsMainTitleAttrs & {
+    className?: string;
+    children: ReactNode;
+};
+export declare function MainTitle(props: MainTitleProps): ReactElement;
+export declare namespace MainTitle {
+    var Title: (props: MainTitleSubProps) => ReactElement;
+    var Description: (props: MainTitleSubProps) => ReactElement;
+}
+export {};

package/dist/components/MainTitle/MainTitle.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-main-title";
+function n(t) {
+  const { className: r, children: i, ...o } = t;
+  return /* @__PURE__ */ e("ds-main-title-react", { class: r, ...o, children: i });
+}
+function s(t) {
+  const { as: r, children: i, ...o } = t;
+  return /* @__PURE__ */ e(r, { slot: "title", ...o, children: i });
+}
+function c(t) {
+  const { as: r, children: i, ...o } = t;
+  return /* @__PURE__ */ e(r, { slot: "description", ...o, children: i });
+}
+n.Title = s;
+n.Description = c;
+export {
+  n as MainTitle
+};

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MainTitle } from '../MainTitle';
+declare const meta: Meta<typeof MainTitle>;
+export default meta;
+type Story = StoryObj<typeof MainTitle>;
+export declare const Default: Story;
+export declare const SemanticH1: Story;
+export declare const CustomTags: Story;
+export declare const TitleOnly: Story;

package/dist/components/MapPin/MapPin.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-map-pin';
 import { type DsMapPinAttrs } from '@cupra/ui-kit/react/types/ds-map-pin';
 type MapPinProps = DsMapPinAttrs & {
     onChange?: (event: CustomEvent) => void;

package/dist/components/MapPin/MapPin.js

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

package/dist/components/Modal/Modal.d.ts

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

package/dist/components/Modal/Modal.js

@@ -1,11 +1,13 @@
 import { jsx as n } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as f } from "../../hooks/useHandleEvent.js";
 import p from "../../node_modules/.pnpm/styled-components@6.1.19_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-modal";
+import { createPortal as C } from "react-dom";
 function e() {
 }
-const C = p.div`
+const k = p.div`
     margin: 0;
     width: 100%;
     height: 100%;
@@ -20,8 +22,8 @@ function l(t) {
     onClickCloseButton: i = e,
     onClickConfirmButton: s = e,
     onClickCancelButton: u = e,
-    className: a,
-    withPortal: m,
+    className: m,
+    withPortal: a,
     ...r
   } = t, { ref: d } = f({
     "click-close-button": i,
@@ -29,21 +31,21 @@ function l(t) {
     "click-cancel-button": u
   });
   if (!r.open) return null;
-  const c = /* @__PURE__ */ n("ds-modal-react", { ref: d, class: a, ...r, children: o });
-  return m ? /* @__PURE__ */ n("ds-portal-react", { style: { display: "none" }, children: c }) : c;
+  const c = /* @__PURE__ */ n("ds-modal-react", { ref: d, class: m, ...r, children: o });
+  return a ? C(c, document.body) : c;
 }
-function h({ children: t }) {
+function b({ children: t }) {
   return /* @__PURE__ */ n("div", { slot: "title", children: t });
 }
-function k({ className: t = "", children: o }) {
+function h({ className: t = "", children: o }) {
   return /* @__PURE__ */ n("div", { slot: "content", className: `ds-scroll ${t}`.trim(), children: o });
 }
-function b({ children: t }) {
-  return /* @__PURE__ */ n(C, { slot: "content", children: t });
+function v({ children: t }) {
+  return /* @__PURE__ */ n(k, { slot: "content", children: t });
 }
-l.Title = h;
-l.Content = k;
-l.FullScreenContent = b;
+l.Title = b;
+l.Content = h;
+l.FullScreenContent = v;
 export {
   l as Modal
 };

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -1,6 +1,6 @@
 import { DsPasswordInputAttrs } from '@cupra/ui-kit/react/types/ds-password-input';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-password-input';
 type PasswordInputProps = DsPasswordInputAttrs & {
     className?: string;
     onChange?: (event: typeof InputEvent) => void;

package/dist/components/PasswordInput/PasswordInput.js

@@ -1,42 +1,40 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-password-input";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
-import { useHandleEvent as x } from "../../hooks/useHandleEvent.js";
-function H(n) {
+import { useHandleEvent as b } from "../../hooks/useHandleEvent.js";
+function L(l) {
   const {
-    className: t,
-    children: b,
-    onChange: o,
-    onInput: s,
+    className: d,
+    children: w,
+    onChange: c,
+    onInput: u,
     inputId: e,
-    placeHolder: a,
-    value: p,
-    label: l,
-    required: i,
-    disabled: d,
-    pattern: c,
-    maxLength: u,
-    minLength: h,
-    ...m
-  } = n, { ref: f } = x({ change: o, input: s });
-  return /* @__PURE__ */ g("ds-password-input-react", { ref: f, class: t, ...m, children: [
-    /* @__PURE__ */ r("label", { htmlFor: e, children: l }),
-    /* @__PURE__ */ r(
-      "input",
-      {
-        id: e,
-        type: "password",
-        placeholder: a,
-        value: p,
-        required: i,
-        disabled: d,
-        minLength: h,
-        maxLength: u,
-        pattern: c
-      }
-    )
+    placeHolder: r,
+    value: t,
+    label: m,
+    required: n,
+    disabled: o,
+    pattern: p,
+    maxLength: s,
+    minLength: a,
+    ...h
+  } = l, { ref: f } = b({ change: c, input: u }), g = {
+    type: "password",
+    ...!!e && { id: e },
+    ...!!r && { placeholder: r },
+    ...!!t && { value: t },
+    ...!!n && { required: n },
+    ...!!o && { disabled: o },
+    ...!!a && { minLength: a },
+    ...!!s && { maxLength: s },
+    ...!!p && { pattern: p }
+  };
+  return /* @__PURE__ */ x("ds-password-input-react", { ref: f, class: d, ...h, children: [
+    /* @__PURE__ */ i("label", { htmlFor: e, children: m }),
+    /* @__PURE__ */ i("input", { ...g })
   ] });
 }
 export {
-  H as PasswordInput
+  L as PasswordInput
 };

package/dist/components/PickerItem/PickerItem.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-picker-item';
 import type { DsPickerItemAttrs } from '@cupra/ui-kit/react/types/ds-picker-item';
 type PickerItemProps = DsPickerItemAttrs & {
     className?: string;

package/dist/components/PickerItem/PickerItem.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-picker-item";
 import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
 function a(r) {
   const { className: i, children: t, onClick: s, size: e, ...c } = r, { ref: o } = m({

package/dist/components/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-radio';
 import { DsRadioAttrs } from '@cupra/ui-kit/react/types/ds-radio';
 import { DsRadioGroupAttrs } from '@cupra/ui-kit/react/types/ds-radio-group';
 type Children = JSX.Element | JSX.Element[] | string;

package/dist/components/Radio/Radio.js

@@ -1,14 +1,15 @@
 import { jsx as s } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
-const c = ({ children: o, onChange: r, className: t, ...a }) => {
+import "@cupra/ui-kit/react/ds-radio";
+const i = ({ children: o, onChange: r, className: t, ...a }) => {
   const { ref: n } = e({ change: r });
   return /* @__PURE__ */ s("ds-radio-group-react", { ref: n, class: t, ...a, children: o });
-}, i = ({ children: o, className: r, ...t }) => /* @__PURE__ */ s("ds-radio-react", { class: r, ...t, children: o }), f = {
-  Group: c,
-  Button: i
+}, c = ({ children: o, className: r, ...t }) => /* @__PURE__ */ s("ds-radio-react", { class: r, ...t, children: o }), l = {
+  Group: i,
+  Button: c
 };
 export {
-  f as Radio
+  l as Radio
 };

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,6 +1,6 @@
 import type { DsRadioButtonAttrs } from '@cupra/ui-kit/react/types/ds-radio-button';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-radio-button';
 type RadioButtonProps = DsRadioButtonAttrs & {
     onChange?: (event: CustomEvent) => void;
     className?: string;

package/dist/components/RadioButton/RadioButton.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-radio-button";
 import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
 function p(o) {
   const { className: t, children: r, onChange: n, ...e } = o, { ref: s } = c({ change: n });

package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import type { DsRadioButtonGroupAttrs } from '@cupra/ui-kit/react/types/ds-radio-button-group';
 import { type ReactElement, type ReactNode } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-radio-button-group';
 export type RadioButtonGroupProps = DsRadioButtonGroupAttrs & {
     onChange?: (event: CustomEvent) => void;
     className?: string;

package/dist/components/RadioButtonGroup/RadioButtonGroup.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-radio-button-group";
 import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
 function m(o) {
   const { className: r, children: t, onChange: n, ...e } = o, { ref: s } = c({ change: n });

package/dist/components/Rating/Rating.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-rating';
+import type { DsRatingAttrs } from '@cupra/ui-kit/react/types/ds-rating';
+type RatingProps = DsRatingAttrs & {
+    className?: string;
+};
+export declare function Rating(props: RatingProps): ReactElement;
+export {};

package/dist/components/Rating/Rating.js

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

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const FullFive: Story;
+export declare const RoundDownExample: Story;
+export declare const HalfStarExample: Story;
+export declare const NoRatingText: Story;
+export declare const Disabled: Story;

package/dist/components/Search/Search.d.ts

@@ -1,6 +1,6 @@
 import { DsSearchAttrs } from '@cupra/ui-kit/react/types/ds-search';
 import { type ChangeEvent } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-search';
 type SearchProps = DsSearchAttrs & {
     className?: string;
     onInput?: (event: ChangeEvent<HTMLInputElement>) => void;

package/dist/components/Search/Search.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-search";
 const c = t(({ onInput: r, className: a, ...e }, o) => /* @__PURE__ */ s("ds-search-react", { ref: o, class: a, onInput: r, ...e }));
 c.displayName = "Search";
 export {

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,6 +1,6 @@
 import { DsSearchInputAttrs } from '@cupra/ui-kit/react/types/ds-search-input';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-search-input';
 type SearchInputProps = DsSearchInputAttrs & {
     className?: string;
     onChange?: (event: typeof InputEvent) => void;

package/dist/components/SearchInput/SearchInput.js

@@ -1,17 +1,18 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-search-input";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as g } from "../../hooks/useHandleEvent.js";
-function H(e) {
+function I(e) {
   const {
     className: n,
     children: x,
     onChange: r,
     onInput: o,
     onClickPositionButton: i,
-    placeHolder: a,
+    placeHolder: p,
     type: P,
-    value: p,
+    value: a,
     label: c,
     required: l,
     disabled: s,
@@ -30,8 +31,8 @@ function H(e) {
     {
       type: "text",
       "aria-label": c,
-      placeholder: a,
-      value: p,
+      placeholder: p,
+      value: a,
       required: l,
       disabled: s,
       minLength: d,
@@ -42,5 +43,5 @@ function H(e) {
   ) });
 }
 export {
-  H as SearchInput
+  I as SearchInput
 };

package/dist/components/SecondaryNavigation/SecondaryNavigation.d.ts

@@ -1,6 +1,6 @@
 import { DsSecondaryNavigationAttrs } from '@cupra/ui-kit/react/types/ds-secondary-navigation';
-import { type ReactElement, type ReactNode } from 'react';
-import '@cupra/ui-kit/react';
+import { type AnchorHTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-secondary-navigation';
 type SecondaryNavigationProps = DsSecondaryNavigationAttrs & {
     className?: string;
     children?: ReactNode;
@@ -8,11 +8,12 @@ type SecondaryNavigationProps = DsSecondaryNavigationAttrs & {
 };
 export declare function SecondaryNavigation(props: SecondaryNavigationProps): ReactElement;
 export declare namespace SecondaryNavigation {
-    var Items: ({ children }: {
-        children: ReactNode;
-    }) => ReactElement;
+    var Item: ({ children, ...rest }: ItemProps) => ReactElement;
     var Actions: ({ children }: {
         children: ReactNode;
     }) => ReactElement;
 }
+type ItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: ReactNode;
+};
 export {};

package/dist/components/SecondaryNavigation/SecondaryNavigation.js

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

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,6 +1,6 @@
 import { DsSegmentedControlAttrs } from '@cupra/ui-kit/react/types/ds-segmented-control';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-segmented-control';
 type SegmentedControlProps = DsSegmentedControlAttrs & {
     onChange?: (event: CustomEvent) => void;
     className?: string;

package/dist/components/SegmentedControl/SegmentedControl.js

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

package/dist/components/Select/Select.d.ts

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

package/dist/components/Select/Select.js

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

package/dist/components/Selection/Selection.d.ts

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

package/dist/components/Selection/Selection.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-selection";
 function i(e) {
   const { className: o, children: s, ...r } = e;
   return /* @__PURE__ */ t("ds-selection-react", { class: o, ...r });

package/dist/components/SidebarNavigation/SidebarNavigation.d.ts

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

package/dist/components/SidebarNavigation/SidebarNavigation.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-sidebar-navigation";
 function s(t) {
   const { className: i, children: r, ...n } = t;
   return /* @__PURE__ */ e("ds-sidebar-navigation-react", { class: i, ...n, children: r });

package/dist/components/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
-import { DsSliderAttrs } from '@cupra/ui-kit/components/ds-slider/ds-slider.types';
+import '@cupra/ui-kit/react/ds-slider';
+import { DsSliderAttrs } from '@cupra/ui-kit/react/types/ds-slider';
 type SliderProps = DsSliderAttrs & {
     className?: string;
 };

package/dist/components/Slider/Slider.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-slider";
 function l(s) {
   const { className: e, children: o, size: r, ...i } = s;
   return /* @__PURE__ */ t(