@preply/ds-web-lib 11.0.0 → 11.1.0

package/dist/CountryFlag-DVDKHmQH.js

@@ -0,0 +1,43 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { forwardRef } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { countryNames, getCountryFlagUrl } from "@preply/ds-core";
+import './assets/CountryFlag.css';var index_module_default = { flag: "flag__wPkCc" };
+//#endregion
+//#region src/components/CountryFlag/CountryFlag.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var placeholderSvg = "data:image/svg+xml;base64,PHN2ZyBkYXRhLXByZXBseS1kcy1jb21wb25lbnQ9IlN2Z0NvdW50cnlGbGFnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIi8+";
+/**
+* Renders an `img` element with the country flag. Passes down all the other props to the `img` element.
+*
+* @example
+* <CountryFlag code="ua" alt="Ukraine" />
+*
+* @example Lazy loading the img
+* <CountryFlag code="ua" alt="Ukraine" loading="lazy" />
+*/
+var CountryFlag = forwardRef(function CountryFlag({ alt, dataset, size = "small", simplified = true, code: countryCode, ...rest }, ref) {
+	const width = size === "large" ? 32 : size === "medium" ? 24 : 16;
+	const height = width * 3 / 4;
+	const imgProps = {
+		alt,
+		src: typeof countryCode !== "string" || !countryNames[countryCode] ? placeholderSvg : getCountryFlagUrl({
+			countryCode,
+			simplified,
+			requester: "WebCountryFlag"
+		}),
+		width,
+		height,
+		className: index_module_default.flag
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+		...rest,
+		ref,
+		...imgProps,
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.CountryFlag })
+	});
+});
+//#endregion
+export { CountryFlag as t };

package/dist/Dialog.module-Db2BJAn4.js

@@ -0,0 +1,21 @@
+import './assets/Dialog.css';var Dialog_module_default = {
+	dialog: "dialog__80F7X",
+	slideInUp: "slideInUp__Ni5JT",
+	slideOutDown: "slideOutDown__g4ZMG",
+	footer: "footer__xkM-4",
+	opacityIn: "opacityIn__p29KJ",
+	opacityOut: "opacityOut__4QmKk",
+	slideOutUp: "slideOutUp__FRb6L",
+	overlay: "overlay__otkvG",
+	close: "close__-TGOq",
+	title: "title__tGVp1",
+	description: "description__84a0F",
+	header: "header__ADm9A",
+	scrollEndDetector: "scrollEndDetector__Zrfqq",
+	buttonStack: "buttonStack__KhEjj",
+	stepControls: "stepControls__FoOIr",
+	previous: "previous__q2IlS",
+	next: "next__h6v4X"
+};
+//#endregion
+export { Dialog_module_default as t };

package/dist/DialogCloseButton-DjDd9Mid.js

@@ -0,0 +1,98 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as useRenderElement } from "./useRenderElement-ZBds6eRN.js";
+import { n as useDialogRootContext } from "./DialogRootContext-Bz8RW-Mq.js";
+import { t as useDialogClose } from "./useDialogClose-BzFIyWco.js";
+import { t as IconButton } from "./IconButton-BPKpgfep.js";
+import { genericAriaLabels } from "./utils/shared-strings.js";
+import { t as Dialog_module_default } from "./Dialog.module-Db2BJAn4.js";
+import * as React$1 from "react";
+import { forwardRef } from "react";
+import { useIntl } from "react-intl";
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/close/DialogClose.js
+/**
+* A button that closes the dialog.
+* Renders a `<button>` element.
+*
+* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+*/
+var DialogClose = /* @__PURE__ */ React$1.forwardRef(function DialogClose(componentProps, forwardedRef) {
+	const { render, className, disabled = false, nativeButton = true, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const { getRootProps, ref } = useDialogClose({
+		disabled,
+		open: store.useState("open"),
+		setOpen: store.setOpen,
+		nativeButton
+	});
+	return useRenderElement("button", componentProps, {
+		state: React$1.useMemo(() => ({ disabled }), [disabled]),
+		ref: [forwardedRef, ref],
+		props: [elementProps, getRootProps]
+	});
+});
+if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
+//#endregion
+//#region ../media-icons/dist/24/TokyoUIClose.svg
+var SvgTokyoUiClose = ({ title, titleId, ...props }, ref) => /* @__PURE__ */ React$1.createElement("svg", {
+	"data-preply-ds-component": "SvgTokyoUIIcon",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	ref,
+	"aria-labelledby": titleId,
+	...props
+}, title ? /* @__PURE__ */ React$1.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React$1.createElement("path", {
+	fillRule: "evenodd",
+	d: "M7.044 5.63 5.63 7.044l4.95 4.95-4.95 4.95 1.414 1.414 4.95-4.95 4.95 4.95 1.414-1.414-4.95-4.95 4.95-4.95-1.414-1.414-4.95 4.95-4.95-4.95Z",
+	clipRule: "evenodd"
+}));
+var ForwardRef = forwardRef(SvgTokyoUiClose);
+//#endregion
+//#region src/components/Dialog/primitives/DialogCloseButton.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* The DialogCloseButton is a container which defaults to:
+* 1. Displaying an `IconButton` child with a `TokyoUIClose` icon, which can be
+*    overridden with the `children` prop.
+* 2. Being absolutely positioned at the top right corner of the dialog, which
+*    can be overridden with the `className` prop.
+*
+* @example
+* <DialogCloseButton className={myCustomPositioningStyle}>
+*   <MyCustomCloseButton />
+* </DialogCloseButton>
+*
+* If you want the default button but need to pass your own props to it, you
+* can use the `DefaultCloseButton` wrapper component.
+*
+* @example
+* <DialogCloseButton>
+*     <DialogDefaultCloseButton
+*       variant="onColor"
+*       dataset={{ testid: 'close-button' }}
+*     />
+* </DialogCloseButton>
+*/
+var DialogCloseButton = forwardRef(function DialogCloseButton({ children, className }, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: [Dialog_module_default.close, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogClose, {
+			ref,
+			render: children !== null && children !== void 0 ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDefaultCloseButton, {})
+		})
+	});
+});
+var DialogDefaultCloseButton = forwardRef(function DefaultCloseButton(props, ref) {
+	const { formatMessage } = useIntl();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, {
+		ref,
+		size: "small",
+		variant: "ghost",
+		dataset: { testid: "dialog-close" },
+		assistiveText: formatMessage(genericAriaLabels.close),
+		svg: ForwardRef,
+		...props
+	});
+});
+//#endregion
+export { DialogDefaultCloseButton as n, DialogCloseButton as t };

package/dist/DialogDescription-8zw9t6pm.js

@@ -0,0 +1,44 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as useRenderElement } from "./useRenderElement-ZBds6eRN.js";
+import { t as useBaseUiId } from "./useBaseUiId-CWAD_PSs.js";
+import { n as useDialogRootContext } from "./DialogRootContext-Bz8RW-Mq.js";
+import { t as Dialog_module_default } from "./Dialog.module-Db2BJAn4.js";
+import * as React$1 from "react";
+import { forwardRef } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/description/DialogDescription.js
+/**
+* A paragraph with additional information about the dialog.
+* Renders a `<p>` element.
+*
+* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+*/
+var DialogDescription$1 = /* @__PURE__ */ React$1.forwardRef(function DialogDescription(componentProps, forwardedRef) {
+	const { render, className, id: idProp, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const id = useBaseUiId(idProp);
+	store.useSyncedValueWithCleanup("descriptionElementId", id);
+	return useRenderElement("p", componentProps, {
+		ref: forwardedRef,
+		props: [{ id }, elementProps]
+	});
+});
+if (process.env.NODE_ENV !== "production") DialogDescription$1.displayName = "DialogDescription";
+//#endregion
+//#region src/components/Dialog/primitives/DialogDescription.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var DialogDescription = forwardRef(function DialogDescription({ children, className, dataset, ...props }, ref) {
+	if (!children) return null;
+	const classNames = [Dialog_module_default.description, className].filter(Boolean).join(" ");
+	const datasetProps = getDatasetProps(dataset);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription$1, {
+		ref,
+		className: classNames,
+		...datasetProps,
+		...props,
+		children
+	});
+});
+//#endregion
+export { DialogDescription as t };

package/dist/DialogRoot-B67oJduC.js

@@ -0,0 +1,335 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { f as useRefWithInit, t as useRenderElement, u as EMPTY_OBJECT } from "./useRenderElement-ZBds6eRN.js";
+import { S as useEventCallback } from "./floating-ui.utils.dom-CoeTbDZx.js";
+import { A as inertValue, F as useOpenChangeComplete, L as COMPOSITE_KEYS, M as popupStateMapping, ft as transitionStatusMapping, j as CommonPopupDataAttributes, o as getEmptyContext, r as InternalBackdrop, v as FloatingFocusManager, y as FloatingPortal } from "./useOpenInteractionType-D8vA_ZKI.js";
+import { n as useDialogRootContext, t as DialogRootContext } from "./DialogRootContext-Bz8RW-Mq.js";
+import { n as useDialogRoot, t as DialogStore } from "./store-sN_eYeZT.js";
+import { t as Dialog_module_default } from "./Dialog.module-Db2BJAn4.js";
+import * as React$1 from "react";
+import { useCallback, useEffect, useState } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { usePortalElement } from "@preply/ds-web-root";
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/backdrop/DialogBackdrop.js
+var stateAttributesMapping$1 = {
+	...popupStateMapping,
+	...transitionStatusMapping
+};
+/**
+* An overlay displayed beneath the popup.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+*/
+var DialogBackdrop = /* @__PURE__ */ React$1.forwardRef(function DialogBackdrop(componentProps, forwardedRef) {
+	const { render, className, forceRender = false, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const open = store.useState("open");
+	const nested = store.useState("nested");
+	const mounted = store.useState("mounted");
+	const transitionStatus = store.useState("transitionStatus");
+	return useRenderElement("div", componentProps, {
+		state: React$1.useMemo(() => ({
+			open,
+			transitionStatus
+		}), [open, transitionStatus]),
+		ref: [store.context.backdropRef, forwardedRef],
+		stateAttributesMapping: stateAttributesMapping$1,
+		props: [{
+			role: "presentation",
+			hidden: !mounted,
+			style: {
+				userSelect: "none",
+				WebkitUserSelect: "none"
+			}
+		}, elementProps],
+		enabled: forceRender || !nested
+	});
+});
+if (process.env.NODE_ENV !== "production") DialogBackdrop.displayName = "DialogBackdrop";
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/popup/DialogPopupCssVars.js
+var DialogPopupCssVars = /* @__PURE__ */ function(DialogPopupCssVars) {
+	/**
+	* Indicates how many dialogs are nested within.
+	* @type {number}
+	*/
+	DialogPopupCssVars["nestedDialogs"] = "--nested-dialogs";
+	return DialogPopupCssVars;
+}({});
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/popup/DialogPopupDataAttributes.js
+var DialogPopupDataAttributes = function(DialogPopupDataAttributes) {
+	/**
+	* Present when the dialog is open.
+	*/
+	DialogPopupDataAttributes[DialogPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+	/**
+	* Present when the dialog is closed.
+	*/
+	DialogPopupDataAttributes[DialogPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+	/**
+	* Present when the dialog is animating in.
+	*/
+	DialogPopupDataAttributes[DialogPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+	/**
+	* Present when the dialog is animating out.
+	*/
+	DialogPopupDataAttributes[DialogPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+	/**
+	* Present when the dialog is nested within another dialog.
+	*/
+	DialogPopupDataAttributes["nested"] = "data-nested";
+	/**
+	* Present when the dialog has other open dialogs nested within it.
+	*/
+	DialogPopupDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
+	return DialogPopupDataAttributes;
+}({});
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/portal/DialogPortalContext.js
+var DialogPortalContext = /* @__PURE__ */ React$1.createContext(void 0);
+if (process.env.NODE_ENV !== "production") DialogPortalContext.displayName = "DialogPortalContext";
+function useDialogPortalContext() {
+	const value = React$1.useContext(DialogPortalContext);
+	if (value === void 0) throw new Error("Base UI: <Dialog.Portal> is missing.");
+	return value;
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/popup/DialogPopup.js
+var import_jsx_runtime = require_jsx_runtime();
+var stateAttributesMapping = {
+	...popupStateMapping,
+	...transitionStatusMapping,
+	nestedDialogOpen(value) {
+		return value ? { [DialogPopupDataAttributes.nestedDialogOpen]: "" } : null;
+	}
+};
+/**
+* A container for the dialog contents.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+*/
+var DialogPopup = /* @__PURE__ */ React$1.forwardRef(function DialogPopup(componentProps, forwardedRef) {
+	const { className, finalFocus, initialFocus, render, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const descriptionElementId = store.useState("descriptionElementId");
+	const dismissible = store.useState("dismissible");
+	const floatingRootContext = store.useState("floatingRootContext");
+	const rootPopupProps = store.useState("popupProps");
+	const modal = store.useState("modal");
+	const mounted = store.useState("mounted");
+	const nested = store.useState("nested");
+	const nestedOpenDialogCount = store.useState("nestedOpenDialogCount");
+	const open = store.useState("open");
+	const openMethod = store.useState("openMethod");
+	const titleElementId = store.useState("titleElementId");
+	const transitionStatus = store.useState("transitionStatus");
+	useDialogPortalContext();
+	useOpenChangeComplete({
+		open,
+		ref: store.context.popupRef,
+		onComplete() {
+			if (open) {
+				var _store$context$openCh, _store$context;
+				(_store$context$openCh = (_store$context = store.context).openChangeComplete) === null || _store$context$openCh === void 0 || _store$context$openCh.call(_store$context, true);
+			}
+		}
+	});
+	const defaultInitialFocus = useEventCallback((interactionType) => {
+		if (interactionType === "touch") return store.context.popupRef.current;
+		return true;
+	});
+	const resolvedInitialFocus = initialFocus === void 0 ? defaultInitialFocus : initialFocus;
+	const nestedDialogOpen = nestedOpenDialogCount > 0;
+	const element = useRenderElement("div", componentProps, {
+		state: React$1.useMemo(() => ({
+			open,
+			nested,
+			transitionStatus,
+			nestedDialogOpen
+		}), [
+			open,
+			nested,
+			transitionStatus,
+			nestedDialogOpen
+		]),
+		props: [
+			rootPopupProps,
+			{
+				"aria-labelledby": titleElementId !== null && titleElementId !== void 0 ? titleElementId : void 0,
+				"aria-describedby": descriptionElementId !== null && descriptionElementId !== void 0 ? descriptionElementId : void 0,
+				role: "dialog",
+				tabIndex: -1,
+				hidden: !mounted,
+				onKeyDown(event) {
+					if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
+				},
+				style: { [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount }
+			},
+			elementProps
+		],
+		ref: [
+			forwardedRef,
+			store.context.popupRef,
+			store.getElementSetter("popupElement")
+		],
+		stateAttributesMapping
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React$1.Fragment, { children: [mounted && modal === true && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalBackdrop, {
+		ref: store.context.internalBackdropRef,
+		inert: inertValue(!open)
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingFocusManager, {
+		context: floatingRootContext,
+		openInteractionType: openMethod,
+		disabled: !mounted,
+		closeOnFocusOut: dismissible,
+		initialFocus: resolvedInitialFocus,
+		returnFocus: finalFocus,
+		modal: modal !== false,
+		restoreFocus: "popup",
+		children: element
+	})] });
+});
+if (process.env.NODE_ENV !== "production") DialogPopup.displayName = "DialogPopup";
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/portal/DialogPortal.js
+/**
+* A portal element that moves the popup to a different part of the DOM.
+* By default, the portal element is appended to `<body>`.
+*
+* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+*/
+function DialogPortal(props) {
+	const { children, keepMounted = false, container } = props;
+	const { store } = useDialogRootContext();
+	if (!(store.useState("mounted") || keepMounted)) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalContext.Provider, {
+		value: keepMounted,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingPortal, {
+			root: container,
+			children
+		})
+	});
+}
+//#endregion
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/root/DialogRoot.js
+var INITIAL_STATE = {
+	open: false,
+	dismissible: true,
+	nested: false,
+	popupElement: null,
+	triggerElement: null,
+	modal: true,
+	descriptionElementId: void 0,
+	titleElementId: void 0,
+	openMethod: null,
+	mounted: false,
+	transitionStatus: "idle",
+	nestedOpenDialogCount: 0,
+	triggerProps: EMPTY_OBJECT,
+	popupProps: EMPTY_OBJECT,
+	floatingRootContext: getEmptyContext()
+};
+/**
+* Groups all parts of the dialog.
+* Doesn’t render its own HTML element.
+*
+* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+*/
+var DialogRoot$1 = function DialogRoot(props) {
+	const { children, open: openProp, defaultOpen: defaultOpenProp = false, onOpenChange, onOpenChangeComplete, dismissible = true, modal = true, actionsRef } = props;
+	const parentDialogRootContext = useDialogRootContext(true);
+	const nested = Boolean(parentDialogRootContext);
+	const store = useRefWithInit(DialogStore.create, INITIAL_STATE).current;
+	store.useControlledProp("open", openProp, defaultOpenProp);
+	store.useSyncedValues({
+		dismissible,
+		nested,
+		modal
+	});
+	store.useContextCallback("openChange", onOpenChange);
+	store.useContextCallback("openChangeComplete", onOpenChangeComplete);
+	useDialogRoot({
+		store,
+		actionsRef,
+		parentContext: parentDialogRootContext === null || parentDialogRootContext === void 0 ? void 0 : parentDialogRootContext.store.context,
+		onOpenChange
+	});
+	const contextValue = React$1.useMemo(() => ({ store }), [store]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogRootContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+if (process.env.NODE_ENV !== "production") DialogRoot$1.displayName = "DialogRoot";
+//#endregion
+//#region src/components/Dialog/primitives/DialogRoot.tsx
+var DialogRoot = ({ children, open, onOpen, onClose, overlay = true, size = "md", mobileFullHeight = false, className, dataset, ...props }) => {
+	const container = usePortalElement();
+	const respondToHeightChange = useResponsiveFullHeightStyle(open);
+	const onOpenChange = useCallback((open) => {
+		if (!open) onClose === null || onClose === void 0 || onClose();
+		else onOpen === null || onOpen === void 0 || onOpen();
+	}, [onClose, onOpen]);
+	const classNames = [Dialog_module_default.dialog, className].filter(Boolean).join(" ");
+	const datasetProps = getDatasetProps(dataset, { preplyDsComponent: webComponentNames.DialogRoot });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogRoot$1, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, {
+			container,
+			children: [overlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogBackdrop, {
+				className: Dialog_module_default.overlay,
+				forceRender: true,
+				"data-testid": "dialog-overlay",
+				"data-preply-ds-component": webComponentNames.DialogOverlay
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPopup, {
+				ref: respondToHeightChange,
+				className: classNames,
+				...getResponsiveSizeAttributes(size),
+				"data-mobile-full-height": mobileFullHeight ? "" : void 0,
+				...datasetProps,
+				...props,
+				children
+			})]
+		})
+	});
+};
+function useResponsiveFullHeightStyle(isOpen) {
+	const [el, setEl] = useState(null);
+	const captureRef = useCallback((node) => setEl(node), []);
+	useEffect(() => {
+		if (!isOpen || !el) return;
+		const toggleFullHeight = async () => {
+			const animations = el.getAnimations().map((a) => a.finished);
+			await Promise.allSettled(animations);
+			const { y } = el.getBoundingClientRect();
+			el.toggleAttribute("data-no-border-radius", y === 0);
+		};
+		toggleFullHeight();
+		window.addEventListener("resize", toggleFullHeight);
+		const resizeObserver = new ResizeObserver(toggleFullHeight);
+		resizeObserver.observe(el);
+		return () => {
+			window.removeEventListener("resize", toggleFullHeight);
+			resizeObserver.disconnect();
+		};
+	}, [isOpen, el]);
+	return captureRef;
+}
+function getResponsiveSizeAttributes(size) {
+	if (typeof size === "string") return { "data-size": size };
+	const dataAttrs = {};
+	if (typeof size._ === "string") dataAttrs["data-size"] = size._;
+	if (typeof size["narrow-l"] === "string") dataAttrs["data-size-narrow-l"] = size["narrow-l"];
+	if (typeof size["medium-s"] === "string") dataAttrs["data-size-medium-s"] = size["medium-s"];
+	if (typeof size["medium-l"] === "string") dataAttrs["data-size-medium-l"] = size["medium-l"];
+	if (typeof size["wide-s"] === "string") dataAttrs["data-size-wide-s"] = size["wide-s"];
+	if (typeof size["wide-l"] === "string") dataAttrs["data-size-wide-l"] = size["wide-l"];
+	return dataAttrs;
+}
+//#endregion
+export { DialogRoot as t };

package/dist/DialogRootContext-Bz8RW-Mq.js

@@ -0,0 +1,12 @@
+"use client";
+import * as React$1 from "react";
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/root/DialogRootContext.js
+var DialogRootContext = /* @__PURE__ */ React$1.createContext(void 0);
+if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
+function useDialogRootContext(optional) {
+	const dialogRootContext = React$1.useContext(DialogRootContext);
+	if (optional === false && dialogRootContext === void 0) throw new Error("Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.");
+	return dialogRootContext;
+}
+//#endregion
+export { useDialogRootContext as n, DialogRootContext as t };

package/dist/DialogTitle-C2Nn2ys-.js

@@ -0,0 +1,43 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as useRenderElement } from "./useRenderElement-ZBds6eRN.js";
+import { t as useBaseUiId } from "./useBaseUiId-CWAD_PSs.js";
+import { n as useDialogRootContext } from "./DialogRootContext-Bz8RW-Mq.js";
+import { t as Dialog_module_default } from "./Dialog.module-Db2BJAn4.js";
+import * as React$1 from "react";
+import { forwardRef } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+//#region ../../node_modules/@base-ui-components/react/esm/dialog/title/DialogTitle.js
+/**
+* A heading that labels the dialog.
+* Renders an `<h2>` element.
+*
+* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+*/
+var DialogTitle$1 = /* @__PURE__ */ React$1.forwardRef(function DialogTitle(componentProps, forwardedRef) {
+	const { render, className, id: idProp, ...elementProps } = componentProps;
+	const { store } = useDialogRootContext();
+	const id = useBaseUiId(idProp);
+	store.useSyncedValueWithCleanup("titleElementId", id);
+	return useRenderElement("h2", componentProps, {
+		ref: forwardedRef,
+		props: [{ id }, elementProps]
+	});
+});
+if (process.env.NODE_ENV !== "production") DialogTitle$1.displayName = "DialogTitle";
+//#endregion
+//#region src/components/Dialog/primitives/DialogTitle.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var DialogTitle = forwardRef(function DialogTitle({ children, className, dataset, ...props }, ref) {
+	const classNames = [Dialog_module_default.title, className].filter(Boolean).join(" ");
+	const datasetProps = getDatasetProps(dataset);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle$1, {
+		ref,
+		className: classNames,
+		...datasetProps,
+		...props,
+		children
+	});
+});
+//#endregion
+export { DialogTitle as t };

package/dist/Divider-DvwDWB9_.js

@@ -0,0 +1,17 @@
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import "react";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import './assets/Divider.css';var Divider_module_default = {
+	Divider: "Divider__kU514",
+	"size-small": "size-small__OdB2p",
+	"size-large": "size-large__4iJ0a"
+};
+//#endregion
+//#region src/components/Divider/Divider.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var Divider = ({ size = "small" }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", {
+	className: `${Divider_module_default.Divider} ${Divider_module_default[`size-${size}`]}`,
+	"data-preply-ds-component": webComponentNames.Divider
+});
+//#endregion
+export { Divider as t };