@bonprix-ds/react-dialog 1.0.2 → 1.1.0

package/dist/no-styles.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Dialog.css

@@ -0,0 +1,7 @@
+/* Radix prepends focus guards to `body` while a dialog is open. Chromium saves the scroll anchor of a page that is
+   left as an `nth-child` path, which the guards shift, so going back would restore the scroll position of another
+   element. Without an anchor, Chromium restores the plain scroll offset. Keyed to the guards rather than to the
+   open state, so it holds through the closing animation and across every copy of the package on the page. */
+:root:has(> body > [data-radix-focus-guard]) {
+  overflow-anchor: none;
+}

package/dist/src/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../../src/Dialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport DialogRoot, { ButtonSection, Content, PrimaryButton, SecondaryButton, Title, type Props } from \"./DialogRoot\";\n\nexport type { Props } from \"./DialogRoot\";\n\nconst Dialog = (props: Props) => <DialogRoot {...props} />;\n\nDialog.displayName = \"Dialog\";\n\nDialog.Title = Title;\nDialog.Content = Content;\nDialog.ButtonSection = ButtonSection;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\n\nexport default Dialog;\n"],"mappings":";;;;AAMA,IAAM,KAAU,MAAiB,kBAAC,GAAD,EAAY,GAAI,EAAQ,CAAA;AAEzD,EAAO,cAAc,UAErB,EAAO,QAAQ,GACf,EAAO,UAAU,GACjB,EAAO,gBAAgB,GACvB,EAAO,gBAAgB,GACvB,EAAO,kBAAkB"}
+{"version":3,"file":"Dialog.js","names":["DialogRoot","Dialog","props","Title","Content","ButtonSection","PrimaryButton","SecondaryButton"],"sources":["../../src/Dialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport DialogRoot, { ButtonSection, Content, PrimaryButton, SecondaryButton, Title, type Props } from \"./DialogRoot\";\n\nexport type { Props } from \"./DialogRoot\";\n\nconst Dialog = (props: Props) => <DialogRoot {...props} />;\n\nDialog.displayName = \"Dialog\";\n\nDialog.Title = Title;\nDialog.Content = Content;\nDialog.ButtonSection = ButtonSection;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\n\nexport default Dialog;\n"],"mappings":";;;;AAMA,IAAMC,KAAU,MAAiB,kBAACD,GAAD,EAAY,GAAIE,EAAQ,CAAA;AAEzD,EAAO,cAAc,UAErB,EAAO,QAAQC,GACf,EAAO,UAAUC,GACjB,EAAO,gBAAgBC,GACvB,EAAO,gBAAgBC,GACvB,EAAO,kBAAkBC"}

package/dist/src/DialogRoot.d.ts

@@ -1,14 +1,32 @@
 import React, { ComponentProps, ElementType, ReactNode } from "react";
-export interface Props {
-    /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */
-    isOpen: boolean;
+import "./Dialog.css";
+interface BaseProps {
     /** Here, all of the subcomponents should be placed. */
     children: ReactNode;
-    /** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `isOpen` property. */
+    /** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `open` property. */
     onClose: () => void;
     /** The z-index of the dialog. */
     zIndex?: number;
+    /** Optional image slot that gets rendered left to (desktop) or above (mobile) the `children`.  */
+    image?: ReactNode;
+    /** Additional CSS classes for the wrapper element around `image`, not the image itself. Useful to specify height and tweak layout. */
+    imageWrapperClassName?: string;
 }
+type OpenProps = BaseProps & {
+    /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */
+    open: boolean;
+    /** @deprecated [is-open-prop] Use `open` instead. */
+    isOpen?: never;
+};
+type DeprecatedOpenProps = BaseProps & {
+    open?: never;
+    /**
+     * Controls the visibility of the dialog. Should be used in conjunction with `onClose`.
+     * @deprecated [is-open-prop] Use `open` instead.
+     */
+    isOpen: boolean;
+};
+export type Props = DeprecatedOpenProps | OpenProps;
 export interface DialogTitleProps {
     /** The title to display in the dialog. */
     children: string;
@@ -28,7 +46,7 @@ type DialogButtonProps<C extends ElementType> = {
     component?: C;
 } & Omit<ComponentProps<C>, "component">;
 declare const DialogRoot: {
-    ({ isOpen, onClose, zIndex, children }: Props): React.JSX.Element;
+    ({ open, isOpen, onClose, zIndex, children, image, imageWrapperClassName }: Props): React.JSX.Element;
     displayName: string;
 };
 export declare const Title: {

package/dist/src/DialogRoot.js

@@ -1,68 +1,122 @@
 "use client";
 import "react";
 import * as e from "@radix-ui/react-dialog";
-import { tv as t } from "tailwind-variants";
-import n from "@bonprix-ds/react-button";
-import r from "@bonprix-ds/react-overlay";
-import { useInnerOpen as i } from "@bonprix-ds/utils";
-import { jsx as a } from "react/jsx-runtime";
+import { twMerge as t } from "tailwind-merge";
+import { tv as n } from "tailwind-variants";
+import { backdrop as r, fadeAnimation as i } from "@bonprix-ds/internal-components";
+import a from "@bonprix-ds/react-button";
+import o from "@bonprix-ds/react-icon-button";
+import { ZIndexContext as s, useInnerOpen as c, usePrefersReducedMotion as l } from "@bonprix-ds/utils";
+import { warnDeprecated as u } from "@bonprix-ds/utils/deprecation";
+import "#styles";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/DialogRoot.tsx
-var o = t({ slots: {
-	title: "typography-bonprix-h4 text-clr-primary px-10",
-	wrapper: "flex flex-col gap-5 h-full",
-	scrollArea: "px-10 h-full scroll-area relative",
-	contentWrapper: "flex flex-col overflow-hidden",
-	buttonSection: "px-10 flex justify-center flex-wrap gap-3"
-} }), s = ({ isOpen: e, onClose: t, zIndex: n, children: s }) => {
-	let { wrapper: c } = o(), { innerOpen: l } = i(e);
-	return /* @__PURE__ */ a(r, {
-		isOpen: l,
-		onClose: t,
-		zIndex: n,
-		isDialog: !0,
-		componentName: "dialog",
-		children: /* @__PURE__ */ a("div", {
-			className: c(),
-			children: s
-		})
+var p = n({
+	slots: {
+		modal: [
+			"preflight fixed start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+			"h-fit min-h-[12.375rem] w-[37.5rem] max-w-[calc(100vw-2.5rem)] l:w-[67.5rem]",
+			"max-h-[calc(100dvh-var(--app-safe-area-inset-bottom,2.5rem)*2)]",
+			"box-border grid grid-rows-1 justify-items-center"
+		],
+		imageBox: "flex h-full w-full",
+		contentBox: "relative box-border flex w-full max-w-[37.5rem] flex-col bg-clr-bg-modal py-7",
+		title: "typography-bonprix-h4 px-7 text-clr-primary",
+		closeButtonWrapper: "absolute end-1 top-1",
+		wrapper: "flex h-full flex-col gap-5",
+		scrollArea: "scroll-area relative h-full px-7",
+		contentWrapper: "flex flex-col overflow-hidden",
+		buttonSection: "flex flex-col gap-3 px-7"
+	},
+	variants: {
+		image: { true: { modal: "grid-cols-1 grid-rows-2 l:grid-cols-2 l:grid-rows-1" } },
+		prefersReducedMotion: { false: { modal: [i()] } }
+	}
+}), m = ({ open: n, isOpen: i, onClose: a, zIndex: m = 2, children: h, image: g, imageWrapperClassName: _ = "" }) => {
+	i !== void 0 && u("is-open-prop");
+	let { wrapper: v } = p(), { innerOpen: y } = c(n ?? i ?? !1), { modal: b, imageBox: x, contentBox: S, closeButtonWrapper: C } = p({
+		prefersReducedMotion: l(),
+		image: !!g
+	});
+	return /* @__PURE__ */ d(e.Root, {
+		open: y,
+		children: /* @__PURE__ */ f(e.Portal, { children: [/* @__PURE__ */ d(e.Overlay, {
+			className: r(),
+			onClick: a,
+			style: { zIndex: m - 1 }
+		}), /* @__PURE__ */ d(e.Content, {
+			className: b(),
+			style: { zIndex: m },
+			"data-bpds": "dialog",
+			"aria-modal": "true",
+			children: /* @__PURE__ */ f(s.Provider, {
+				value: m,
+				children: [g && /* @__PURE__ */ d("div", {
+					className: t(x(), _),
+					style: { zIndex: m },
+					children: g
+				}), /* @__PURE__ */ f("div", {
+					className: S(),
+					style: { zIndex: m },
+					children: [
+						/* @__PURE__ */ d(e.Close, {
+							asChild: !0,
+							children: /* @__PURE__ */ d("div", {
+								className: C(),
+								children: /* @__PURE__ */ d(o, {
+									variant: "tertiary",
+									icon: "closer",
+									size: "small",
+									label: "Schließen",
+									onClick: a
+								})
+							})
+						}),
+						/* @__PURE__ */ d(e.Description, { className: "sr-only" }),
+						/* @__PURE__ */ d("div", {
+							className: v(),
+							children: h
+						})
+					]
+				})]
+			})
+		})] })
 	});
-}, c = ({ children: t }) => {
-	let { title: n } = o();
-	return /* @__PURE__ */ a(e.Title, {
+}, h = ({ children: t }) => {
+	let { title: n } = p();
+	return /* @__PURE__ */ d(e.Title, {
 		className: n(),
 		children: t
 	});
-}, l = ({ children: e }) => {
-	let { scrollArea: t, contentWrapper: n } = o();
-	return /* @__PURE__ */ a("div", {
+}, g = ({ children: e }) => {
+	let { scrollArea: t, contentWrapper: n } = p();
+	return /* @__PURE__ */ d("div", {
 		className: t(),
-		children: /* @__PURE__ */ a("div", {
+		children: /* @__PURE__ */ d("div", {
 			className: n(),
 			children: e
 		})
 	});
-}, u = ({ children: e }) => {
-	let { buttonSection: t } = o();
-	return /* @__PURE__ */ a("div", {
+}, _ = ({ children: e }) => {
+	let { buttonSection: t } = p();
+	return /* @__PURE__ */ d("div", {
 		className: t(),
 		children: e
 	});
-}, d = ({ children: e, component: t = "button", ...r }) => /* @__PURE__ */ a(n, {
+}, v = ({ children: e, component: t = "button", ...n }) => /* @__PURE__ */ d(a, {
 	component: t,
-	...r,
-	contentWidth: !0,
+	...n,
 	size: "large",
 	children: e
-}), f = ({ children: e, component: t = "button", ...r }) => /* @__PURE__ */ a(n, {
+}), y = ({ children: e, component: t = "button", ...n }) => /* @__PURE__ */ d(a, {
 	component: t,
-	...r,
-	contentWidth: !0,
+	...n,
 	variant: "secondary",
 	size: "large",
 	children: e
 });
-s.displayName = "Dialog", c.displayName = "Dialog.Title", l.displayName = "Dialog.Content", u.displayName = "Dialog.ButtonSection", d.displayName = "Dialog.PrimaryButton", f.displayName = "Dialog.SecondaryButton";
+m.displayName = "Dialog", h.displayName = "Dialog.Title", g.displayName = "Dialog.Content", _.displayName = "Dialog.ButtonSection", v.displayName = "Dialog.PrimaryButton", y.displayName = "Dialog.SecondaryButton";
 //#endregion
-export { u as ButtonSection, l as Content, d as PrimaryButton, f as SecondaryButton, c as Title, s as default };
+export { _ as ButtonSection, g as Content, v as PrimaryButton, y as SecondaryButton, h as Title, m as default };
 
 //# sourceMappingURL=DialogRoot.js.map

package/dist/src/DialogRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogRoot.js","names":[],"sources":["../../src/DialogRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport Button from \"@bonprix-ds/react-button\";\nimport Overlay from \"@bonprix-ds/react-overlay\";\nimport { useInnerOpen } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n  slots: {\n    title: \"typography-bonprix-h4 text-clr-primary px-10\",\n    wrapper: \"flex flex-col gap-5 h-full\",\n    scrollArea: \"px-10 h-full scroll-area relative\",\n    contentWrapper: \"flex flex-col overflow-hidden\",\n    buttonSection: \"px-10 flex justify-center flex-wrap gap-3\",\n  },\n});\n\nexport interface Props {\n  /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */\n  isOpen: boolean;\n  /** Here, all of the subcomponents should be placed. */\n  children: ReactNode;\n  /** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `isOpen` property. */\n  onClose: () => void;\n  /** The z-index of the dialog. */\n  zIndex?: number;\n}\n\nexport interface DialogTitleProps {\n  /** The title to display in the dialog. */\n  children: string;\n}\n\nexport interface DialogContentProps {\n  /** The content to display in the dialog. */\n  children: ReactNode;\n}\n\nexport interface DialogButtonSectionProps {\n  /** Primary and secondary buttons should be placed inside this section. */\n  children: ReactNode;\n}\n\ntype DialogButtonProps<C extends ElementType> = {\n  /** The button text to render. */\n  children: string;\n  /** The semantic component to render the Button. Preferrably `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, \"component\">;\n\nconst DialogRoot = ({ isOpen, onClose, zIndex, children }: Props) => {\n  const { wrapper } = generateClasses();\n  const { innerOpen } = useInnerOpen(isOpen);\n\n  return (\n    <Overlay isOpen={innerOpen} onClose={onClose} zIndex={zIndex} isDialog componentName=\"dialog\">\n      <div className={wrapper()}>{children}</div>\n    </Overlay>\n  );\n};\n\nexport const Title = ({ children }: DialogTitleProps) => {\n  const { title } = generateClasses();\n\n  return <DialogPrimitive.Title className={title()}>{children}</DialogPrimitive.Title>;\n};\n\nexport const Content = ({ children }: DialogContentProps) => {\n  const { scrollArea, contentWrapper } = generateClasses();\n\n  return (\n    <div className={scrollArea()}>\n      <div className={contentWrapper()}>{children}</div>\n    </div>\n  );\n};\n\nexport const ButtonSection = ({ children }: DialogButtonSectionProps) => {\n  const { buttonSection } = generateClasses();\n\n  return <div className={buttonSection()}>{children}</div>;\n};\n\nexport const PrimaryButton = <C extends ElementType>({ children, component = \"button\" as C, ...props }: DialogButtonProps<C>) => {\n  const Component: ElementType = component;\n  return (\n    <Button component={Component} {...props} contentWidth size=\"large\">\n      {children}\n    </Button>\n  );\n};\n\nexport const SecondaryButton = <C extends ElementType>({ children, component = \"button\" as C, ...props }: DialogButtonProps<C>) => {\n  const Component: ElementType = component;\n  return (\n    <Button component={Component} {...props} contentWidth variant=\"secondary\" size=\"large\">\n      {children}\n    </Button>\n  );\n};\n\nDialogRoot.displayName = \"Dialog\";\n\nTitle.displayName = \"Dialog.Title\";\n\nContent.displayName = \"Dialog.Content\";\n\nButtonSection.displayName = \"Dialog.ButtonSection\";\n\nPrimaryButton.displayName = \"Dialog.PrimaryButton\";\n\nSecondaryButton.displayName = \"Dialog.SecondaryButton\";\n\nexport default DialogRoot;\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAkB,EAAG,EACzB,OAAO;CACL,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,EACF,CAAC,GAmCK,KAAc,EAAE,WAAQ,YAAS,WAAQ,kBAAsB;CACnE,IAAM,EAAE,eAAY,EAAgB,GAC9B,EAAE,iBAAc,EAAa,CAAM;CAEzC,OACE,kBAAC,GAAD;EAAS,QAAQ;EAAoB;EAAiB;EAAQ,UAAA;EAAS,eAAc;EACnF,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAQ;GAAI;EAAc,CAAA;CACnC,CAAA;AAEb,GAEa,KAAS,EAAE,kBAAiC;CACvD,IAAM,EAAE,aAAU,EAAgB;CAElC,OAAO,kBAAC,EAAgB,OAAjB;EAAuB,WAAW,EAAM;EAAI;CAAgC,CAAA;AACrF,GAEa,KAAW,EAAE,kBAAmC;CAC3D,IAAM,EAAE,eAAY,sBAAmB,EAAgB;CAEvD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW;EACzB,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAe;GAAI;EAAc,CAAA;CAC9C,CAAA;AAET,GAEa,KAAiB,EAAE,kBAAyC;CACvE,IAAM,EAAE,qBAAkB,EAAgB;CAE1C,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAc;EAAI;CAAc,CAAA;AACzD,GAEa,KAAwC,EAAE,aAAU,eAAY,UAAe,GAAG,QAG3F,kBAAC,GAAD;CAAmB;CAAW,GAAI;CAAO,cAAA;CAAa,MAAK;CACxD;AACK,CAAA,GAIC,KAA0C,EAAE,aAAU,eAAY,UAAe,GAAG,QAG7F,kBAAC,GAAD;CAAmB;CAAW,GAAI;CAAO,cAAA;CAAa,SAAQ;CAAY,MAAK;CAC5E;AACK,CAAA;AAIZ,EAAW,cAAc,UAEzB,EAAM,cAAc,gBAEpB,EAAQ,cAAc,kBAEtB,EAAc,cAAc,wBAE5B,EAAc,cAAc,wBAE5B,EAAgB,cAAc"}
+{"version":3,"file":"DialogRoot.js","names":["Component","DialogPrimitive","Button","IconButton","generateClasses","tv","fadeAnimation","DialogRoot","isOpen","warnDeprecated","useInnerOpen","open","usePrefersReducedMotion","image","innerOpen","backdrop","onClose","zIndex","modal","ZIndexContext","twMerge","imageBox","imageWrapperClassName","contentBox","closeButtonWrapper","wrapper","Title","title","Content","scrollArea","contentWrapper","ButtonSection","buttonSection","PrimaryButton","props","SecondaryButton"],"sources":["../../src/DialogRoot.tsx"],"sourcesContent":["\"use client\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { tv } from \"tailwind-variants\";\n\nimport { backdrop, fadeAnimation } from \"@bonprix-ds/internal-components\";\nimport Button from \"@bonprix-ds/react-button\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport { usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport { useInnerOpen } from \"@bonprix-ds/utils\";\nimport { warnDeprecated } from \"@bonprix-ds/utils/deprecation\";\n\nimport \"./Dialog.css\";\n\nconst generateClasses = tv({\n  slots: {\n    modal: [\n      \"preflight fixed start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\", // Fixed position and centering\n      \"h-fit min-h-[12.375rem] w-[37.5rem] max-w-[calc(100vw-2.5rem)] l:w-[67.5rem]\", // Size considering spacing to screen edges\n      \"max-h-[calc(100dvh-var(--app-safe-area-inset-bottom,2.5rem)*2)]\",\n      \"box-border grid grid-rows-1 justify-items-center\",\n    ],\n    imageBox: \"flex h-full w-full\",\n    contentBox: \"relative box-border flex w-full max-w-[37.5rem] flex-col bg-clr-bg-modal py-7\",\n    title: \"typography-bonprix-h4 px-7 text-clr-primary\",\n    closeButtonWrapper: \"absolute end-1 top-1\",\n    wrapper: \"flex h-full flex-col gap-5\",\n    scrollArea: \"scroll-area relative h-full px-7\",\n    contentWrapper: \"flex flex-col overflow-hidden\",\n    buttonSection: \"flex flex-col gap-3 px-7\",\n  },\n  variants: {\n    image: {\n      true: {\n        modal: \"grid-cols-1 grid-rows-2 l:grid-cols-2 l:grid-rows-1\",\n      },\n    },\n    prefersReducedMotion: {\n      false: {\n        modal: [fadeAnimation()],\n      },\n    },\n  },\n});\n\ninterface BaseProps {\n  /** Here, all of the subcomponents should be placed. */\n  children: ReactNode;\n  /** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `open` property. */\n  onClose: () => void;\n  /** The z-index of the dialog. */\n  zIndex?: number;\n  /** Optional image slot that gets rendered left to (desktop) or above (mobile) the `children`.  */\n  image?: ReactNode;\n  /** Additional CSS classes for the wrapper element around `image`, not the image itself. Useful to specify height and tweak layout. */\n  imageWrapperClassName?: string;\n}\n\ntype OpenProps = BaseProps & {\n  /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */\n  open: boolean;\n  /** @deprecated [is-open-prop] Use `open` instead. */\n  isOpen?: never;\n};\n\ntype DeprecatedOpenProps = BaseProps & {\n  open?: never;\n  /**\n   * Controls the visibility of the dialog. Should be used in conjunction with `onClose`.\n   * @deprecated [is-open-prop] Use `open` instead.\n   */\n  isOpen: boolean;\n};\n\nexport type Props = DeprecatedOpenProps | OpenProps;\n\nexport interface DialogTitleProps {\n  /** The title to display in the dialog. */\n  children: string;\n}\n\nexport interface DialogContentProps {\n  /** The content to display in the dialog. */\n  children: ReactNode;\n}\n\nexport interface DialogButtonSectionProps {\n  /** Primary and secondary buttons should be placed inside this section. */\n  children: ReactNode;\n}\n\ntype DialogButtonProps<C extends ElementType> = {\n  /** The button text to render. */\n  children: string;\n  /** The semantic component to render the Button. Preferrably `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, \"component\">;\n\nconst DialogRoot = ({ open, isOpen, onClose, zIndex = 2, children, image, imageWrapperClassName = \"\" }: Props) => {\n  if (isOpen !== undefined) warnDeprecated(\"is-open-prop\");\n  const { wrapper } = generateClasses();\n  const { innerOpen } = useInnerOpen(open ?? isOpen ?? false);\n\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  const { modal, imageBox, contentBox, closeButtonWrapper } = generateClasses({ prefersReducedMotion, image: !!image });\n  const closeLabel = \"Schließen\";\n\n  return (\n    <DialogPrimitive.Root open={innerOpen}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay className={backdrop()} onClick={onClose} style={{ zIndex: zIndex - 1 }} />\n        <DialogPrimitive.Content className={modal()} style={{ zIndex }} data-bpds=\"dialog\" aria-modal=\"true\">\n          <ZIndexContext.Provider value={zIndex}>\n            {image && (\n              <div className={twMerge(imageBox(), imageWrapperClassName)} style={{ zIndex }}>\n                {image}\n              </div>\n            )}\n            <div className={contentBox()} style={{ zIndex }}>\n              <DialogPrimitive.Close asChild>\n                <div className={closeButtonWrapper()}>\n                  <IconButton variant=\"tertiary\" icon=\"closer\" size=\"small\" label={closeLabel} onClick={onClose} />\n                </div>\n              </DialogPrimitive.Close>\n              <DialogPrimitive.Description className=\"sr-only\"></DialogPrimitive.Description>\n              <div className={wrapper()}>{children}</div>\n            </div>\n          </ZIndexContext.Provider>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n};\n\nexport const Title = ({ children }: DialogTitleProps) => {\n  const { title } = generateClasses();\n\n  return <DialogPrimitive.Title className={title()}>{children}</DialogPrimitive.Title>;\n};\n\nexport const Content = ({ children }: DialogContentProps) => {\n  const { scrollArea, contentWrapper } = generateClasses();\n\n  return (\n    <div className={scrollArea()}>\n      <div className={contentWrapper()}>{children}</div>\n    </div>\n  );\n};\n\nexport const ButtonSection = ({ children }: DialogButtonSectionProps) => {\n  const { buttonSection } = generateClasses();\n\n  return <div className={buttonSection()}>{children}</div>;\n};\n\nexport const PrimaryButton = <C extends ElementType>({ children, component = \"button\" as C, ...props }: DialogButtonProps<C>) => {\n  const Component: ElementType = component;\n  return (\n    <Button component={Component} {...props} size=\"large\">\n      {children}\n    </Button>\n  );\n};\n\nexport const SecondaryButton = <C extends ElementType>({ children, component = \"button\" as C, ...props }: DialogButtonProps<C>) => {\n  const Component: ElementType = component;\n  return (\n    <Button component={Component} {...props} variant=\"secondary\" size=\"large\">\n      {children}\n    </Button>\n  );\n};\n\nDialogRoot.displayName = \"Dialog\";\nTitle.displayName = \"Dialog.Title\";\nContent.displayName = \"Dialog.Content\";\nButtonSection.displayName = \"Dialog.ButtonSection\";\nPrimaryButton.displayName = \"Dialog.PrimaryButton\";\nSecondaryButton.displayName = \"Dialog.SecondaryButton\";\n\nexport default DialogRoot;\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAMI,IAAkBC,EAAG;CACzB,OAAO;EACL,OAAO;GACL;GACA;GACA;GACA;EACF;EACA,UAAU;EACV,YAAY;EACZ,OAAO;EACP,oBAAoB;EACpB,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,eAAe;CACjB;CACA,UAAU;EACR,OAAO,EACL,MAAM,EACJ,OAAO,sDACT,EACF;EACA,sBAAsB,EACpB,OAAO,EACL,OAAO,CAACC,EAAc,CAAC,EACzB,EACF;CACF;AACF,CAAC,GAuDKC,KAAc,EAAE,SAAM,WAAQ,YAAS,YAAS,GAAG,aAAU,UAAO,2BAAwB,SAAgB;CAChH,AAAIC,MAAW,KAAA,KAAWC,EAAe,cAAc;CACvD,IAAM,EAAE,eAAYL,EAAgB,GAC9B,EAAE,iBAAcM,EAAaC,KAAQH,KAAU,EAAK,GAIpD,EAAE,UAAO,aAAU,eAAY,0BAAuBJ,EAAgB;EAAE,sBAFjDQ,EAEiD;EAAsB,OAAO,CAAC,CAACC;CAAM,CAAC;CAGpH,OACE,kBAACZ,EAAgB,MAAjB;EAAsB,MAAMa;EAC1B,UAAA,kBAACb,EAAgB,QAAjB,EAAA,UAAA,CACE,kBAACA,EAAgB,SAAjB;GAAyB,WAAWc,EAAS;GAAG,SAASC;GAAS,OAAO,EAAE,QAAQC,IAAS,EAAE;EAAI,CAAA,GAClG,kBAAChB,EAAgB,SAAjB;GAAyB,WAAWiB,EAAM;GAAG,OAAO,EAAE,UAAO;GAAG,aAAU;GAAS,cAAW;GAC5F,UAAA,kBAACC,EAAc,UAAf;IAAwB,OAAOF;IAA/B,UAAA,CACGJ,KACC,kBAAC,OAAD;KAAK,WAAWO,EAAQC,EAAS,GAAGC,CAAqB;KAAG,OAAO,EAAE,UAAO;KACzE,UAAAT;IACE,CAAA,GAEP,kBAAC,OAAD;KAAK,WAAWU,EAAW;KAAG,OAAO,EAAE,UAAO;KAA9C,UAAA;MACE,kBAACtB,EAAgB,OAAjB;OAAuB,SAAA;OACrB,UAAA,kBAAC,OAAD;QAAK,WAAWuB,EAAmB;QACjC,UAAA,kBAACrB,GAAD;SAAY,SAAQ;SAAW,MAAK;SAAS,MAAK;SAAQ,OAAO;SAAY,SAASa;QAAU,CAAA;OAC7F,CAAA;MACgB,CAAA;MACvB,kBAACf,EAAgB,aAAjB,EAA6B,WAAU,UAAuC,CAAA;MAC9E,kBAAC,OAAD;OAAK,WAAWwB,EAAQ;OAAI;MAAc,CAAA;KACvC;IACiB,CAAA,CAAA;;EACD,CAAA,CACH,EAAA,CAAA;CACJ,CAAA;AAE1B,GAEaC,KAAS,EAAE,kBAAiC;CACvD,IAAM,EAAE,aAAUtB,EAAgB;CAElC,OAAO,kBAACH,EAAgB,OAAjB;EAAuB,WAAW0B,EAAM;EAAI;CAAgC,CAAA;AACrF,GAEaC,KAAW,EAAE,kBAAmC;CAC3D,IAAM,EAAE,eAAY,sBAAmBxB,EAAgB;CAEvD,OACE,kBAAC,OAAD;EAAK,WAAWyB,EAAW;EACzB,UAAA,kBAAC,OAAD;GAAK,WAAWC,EAAe;GAAI;EAAc,CAAA;CAC9C,CAAA;AAET,GAEaC,KAAiB,EAAE,kBAAyC;CACvE,IAAM,EAAE,qBAAkB3B,EAAgB;CAE1C,OAAO,kBAAC,OAAD;EAAK,WAAW4B,EAAc;EAAI;CAAc,CAAA;AACzD,GAEaC,KAAwC,EAAE,aAAU,eAAY,UAAe,GAAGC,QAG3F,kBAAChC,GAAD;CAAmBF;CAAW,GAAIkC;CAAO,MAAK;CAC3C;AACK,CAAA,GAICC,KAA0C,EAAE,aAAU,eAAY,UAAe,GAAGD,QAG7F,kBAAChC,GAAD;CAAmBF;CAAW,GAAIkC;CAAO,SAAQ;CAAY,MAAK;CAC/D;AACK,CAAA;AAIZ,EAAW,cAAc,UACzB,EAAM,cAAc,gBACpB,EAAQ,cAAc,kBACtB,EAAc,cAAc,wBAC5B,EAAc,cAAc,wBAC5B,EAAgB,cAAc"}

package/dist/styles.js

@@ -0,0 +1 @@
+import "./src/Dialog.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonprix-ds/react-dialog",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Dialog component, implemented in React, for the Bonprix Design System.",
   "keywords": [],
   "license": "UNLICENSED",
@@ -17,9 +17,18 @@
     "!dist/**/*.test.d.ts"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "./dist/styles.js"
+  ],
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "imports": {
+    "#styles": {
+      "browser": "./dist/styles.js",
+      "default": "./dist/no-styles.js"
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -33,19 +42,23 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "1.1.23",
-    "@bonprix-ds/react-button": "1.1.1",
-    "@bonprix-ds/react-overlay": "1.0.2",
-    "@bonprix-ds/utils": "0.2.2"
+    "tailwind-merge": "2.6.1",
+    "@bonprix-ds/internal-components": "0.2.2",
+    "@bonprix-ds/react-button": "1.1.2",
+    "@bonprix-ds/react-icon-button": "1.2.2",
+    "@bonprix-ds/utils": "0.3.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
-    "@vitejs/plugin-react": "6.1.1",
-    "rollup-preserve-directives": "1.1.3",
-    "vite": "8.3.0"
+    "vite": "8.3.2",
+    "vitest": "4.1.11",
+    "@bonprix-ds/vite-config": "0.0.0"
   },
   "peerDependencies": {
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "^19",
+    "react-dom": "^19",
     "tailwind-variants": "0.3.1"
   },
   "scripts": {