@preply/ds-web-lib 11.0.0 → 11.1.0

package/dist/components/Chips/SingleSelectChips.js

@@ -1,63 +1,100 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import "../../render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
 import { useControllableState } from "../../utils/useControllableState/useControllableState.js";
-import { C as ChipsRoot, D as DEFAULT_ORIENTATION, a as ChipsList, b as ChipListItem, c as ChipButton, d as ChipLabel } from "../../ChipsPrimitive-DzsaOWgY.js";
+import { a as ChipsList, i as ChipListItem, o as ChipsRoot, r as ChipLabel, s as DEFAULT_ORIENTATION, t as ChipButton } from "../../ChipsPrimitive-Bezq7ptE.js";
+import { createRequiredContext } from "../../utils/createRequiredContext.js";
+import { forwardRef } from "react";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import { createRequiredContext } from "../../utils/createRequiredContext.js";
-const [Provider, useSingleSelectChipsContext] = createRequiredContext("SingleSelectChips");
-const SingleSelectChips = forwardRef(function SingleSelectChips2({
-  items,
-  children,
-  orientation = DEFAULT_ORIENTATION,
-  "aria-label": ariaLabel,
-  "aria-controls": ariaControls,
-  value: valueProp,
-  onValueChange: onValueChangeProp,
-  defaultValue,
-  dataset,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const [value, onValueChange] = useControllableState({
-    value: valueProp,
-    onValueChange: onValueChangeProp,
-    defaultValue: defaultValue != null ? defaultValue : null
-  });
-  const content = items ? items.map(({
-    label,
-    value: value2,
-    ...props
-  }) => /* @__PURE__ */ jsx(SingleSelectChipsItem, { value: value2, ...props, children: label }, value2)) : children;
-  return /* @__PURE__ */ jsx(Provider, { value: {
-    value,
-    onValueChange
-  }, children: /* @__PURE__ */ jsx(ChipsRoot, { orientation, children: /* @__PURE__ */ jsx(ChipsList, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, orientation, "aria-orientation": orientation, "aria-label": ariaLabel, "aria-controls": ariaControls, role: "listbox", "aria-multiselectable": "false", ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.SingleSelectChips
-  }), children: content }) }) });
+//#region src/components/Chips/SingleSelectChips.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var [Provider, useSingleSelectChipsContext] = createRequiredContext("SingleSelectChips");
+/**
+* A chips component that allows selection of a single option from a group.
+* Users can select one chip at a time, and clicking a selected chip will deselect it.
+*
+* @remarks
+* **Keyboard interactions:**
+* - **Tab** to enter/exit the component (uses [roving tabindex pattern](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex))
+* - **Arrow keys** to navigate between chips within the group
+* - **Space/Enter** to select/deselect the focused chip
+*
+* @example
+* ```tsx
+* <SingleSelectChips aria-label="Choose a skill" defaultValue="vocabulary">
+*   <SingleSelectChipsItem value="vocabulary">Vocabulary</SingleSelectChipsItem>
+*   <SingleSelectChipsItem value="speaking">Speaking</SingleSelectChipsItem>
+*   <SingleSelectChipsItem value="listening">Listening</SingleSelectChipsItem>
+* </SingleSelectChips>
+* ```
+*/
+var SingleSelectChips = forwardRef(function SingleSelectChips({ items, children, orientation = DEFAULT_ORIENTATION, "aria-label": ariaLabel, "aria-controls": ariaControls, value: valueProp, onValueChange: onValueChangeProp, defaultValue, dataset, ...restPropsPassedByRadixUI }, ref) {
+	const [value, onValueChange] = useControllableState({
+		value: valueProp,
+		onValueChange: onValueChangeProp,
+		defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null
+	});
+	const content = items ? items.map(({ label, value, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SingleSelectChipsItem, {
+		value,
+		...props,
+		children: label
+	}, value)) : children;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
+		value: {
+			value,
+			onValueChange
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipsRoot, {
+			orientation,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipsList, {
+				...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+				ref,
+				orientation,
+				"aria-orientation": orientation,
+				"aria-label": ariaLabel,
+				"aria-controls": ariaControls,
+				role: "listbox",
+				"aria-multiselectable": "false",
+				...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.SingleSelectChips }),
+				children: content
+			})
+		})
+	});
 });
-const SingleSelectChipsItem = forwardRef(function SingleSelectChipsItem2({
-  value,
-  children,
-  icon,
-  countryFlagCode,
-  disabled,
-  counter,
-  dataset,
-  dsInternalSimulation,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const {
-    value: selectedValue,
-    onValueChange
-  } = useSingleSelectChipsContext();
-  const isSelected = selectedValue === value;
-  return /* @__PURE__ */ jsx(ChipListItem, { role: "presentation", children: /* @__PURE__ */ jsx(ChipButton, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, role: "option", "aria-selected": isSelected, onClick: () => onValueChange(isSelected ? null : value), icon, countryFlagCode, disabled, dsInternalSimulation, ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.SingleSelectChipsItem
-  }), children: /* @__PURE__ */ jsx(ChipLabel, { counter, children }) }) });
+/**
+* Individual chip item for use within SingleSelectChips.
+*
+* @example
+* ```tsx
+* <SingleSelectChipsItem value="english">
+*   English
+* </SingleSelectChipsItem>
+* ```
+*/
+var SingleSelectChipsItem = forwardRef(function SingleSelectChipsItem({ value, children, icon, countryFlagCode, disabled, counter, dataset, dsInternalSimulation, ...restPropsPassedByRadixUI }, ref) {
+	const { value: selectedValue, onValueChange } = useSingleSelectChipsContext();
+	const isSelected = selectedValue === value;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipListItem, {
+		role: "presentation",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipButton, {
+			...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+			ref,
+			role: "option",
+			"aria-selected": isSelected,
+			onClick: () => onValueChange(isSelected ? null : value),
+			icon,
+			countryFlagCode,
+			disabled,
+			dsInternalSimulation,
+			...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.SingleSelectChipsItem }),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipLabel, {
+				counter,
+				children
+			})
+		})
+	});
 });
-export {
-  SingleSelectChips,
-  SingleSelectChipsItem
-};
+//#endregion
+export { SingleSelectChips, SingleSelectChipsItem };

package/dist/components/Chips/private/ChipsPrimitive.js

@@ -1,17 +1,4 @@
-import "react/jsx-runtime";
-import { c, e, d, b, a, C, D } from "../../../ChipsPrimitive-DzsaOWgY.js";
-import "react";
-import "../../../utils/RovingTabIndex/RovingTabIndexProvider.js";
-import "../../Icon/Icon.js";
-import "../../../utils/Orientation/OrientationProvider.js";
-import "../../CountryFlag/CountryFlag.js";
-import "@preply/ds-core";
-export {
-  c as ChipButton,
-  e as ChipCounter,
-  d as ChipLabel,
-  b as ChipListItem,
-  a as ChipsList,
-  C as ChipsRoot,
-  D as DEFAULT_ORIENTATION
-};
+import "../../../render-icon-Ch3b2dE0.js";
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { a as ChipsList, i as ChipListItem, n as ChipCounter, o as ChipsRoot, r as ChipLabel, s as DEFAULT_ORIENTATION, t as ChipButton } from "../../../ChipsPrimitive-Bezq7ptE.js";
+export { ChipButton, ChipCounter, ChipLabel, ChipListItem, ChipsList, ChipsRoot, DEFAULT_ORIENTATION };

package/dist/components/CountryFlag/CountryFlag.js

@@ -1,44 +1,3 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { countryNames, getCountryFlagUrl } from "@preply/ds-core";
-import { getDatasetProps } from "@preply/ds-web-core";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import '../../assets/CountryFlag.css';const flag = "flag__wPkCc";
-const styles = {
-  flag
-};
-const placeholderSvg = "data:image/svg+xml;base64,PHN2ZyBkYXRhLXByZXBseS1kcy1jb21wb25lbnQ9IlN2Z0NvdW50cnlGbGFnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIi8+";
-const CountryFlag = forwardRef(function CountryFlag2({
-  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 countryCodeIsInvalid = typeof countryCode !== "string" || !countryNames[countryCode];
-  const src = countryCodeIsInvalid ? placeholderSvg : getCountryFlagUrl({
-    countryCode,
-    simplified,
-    requester: "WebCountryFlag"
-  });
-  const imgProps = {
-    alt,
-    src,
-    width,
-    height,
-    className: styles.flag
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is set in the object above
-    /* @__PURE__ */ jsx("img", { ...rest, ref, ...imgProps, ...getDatasetProps(dataset, {
-      preplyDsComponent: webComponentNames.CountryFlag
-    }) })
-  );
-});
-export {
-  CountryFlag
-};
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as CountryFlag } from "../../CountryFlag-DVDKHmQH.js";
+export { CountryFlag };

package/dist/components/Dialog/Dialog.js

@@ -1,33 +1,58 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { DialogRoot } from "./primitives/DialogRoot.js";
-import { DialogTitle } from "./primitives/DialogTitle.js";
-import { DialogDescription } from "./primitives/DialogDescription.js";
-import { DialogCloseButton } from "./primitives/DialogCloseButton.js";
-import { s as styles } from "../../Dialog.module-Ba1X7b3N.js";
+import "../../render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import "../../store-sN_eYeZT.js";
+import { t as DialogRoot } from "../../DialogRoot-B67oJduC.js";
+import { t as DialogCloseButton } from "../../DialogCloseButton-DjDd9Mid.js";
+import { t as DialogDescription } from "../../DialogDescription-8zw9t6pm.js";
+import { t as DialogTitle } from "../../DialogTitle-C2Nn2ys-.js";
+import { t as Dialog_module_default } from "../../Dialog.module-Db2BJAn4.js";
+import "react";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-const Dialog = ({
-  open,
-  title,
-  description,
-  leadingElement,
-  children,
-  size = "md",
-  hideHeader,
-  onClose,
-  mobileFullHeight,
-  dataset
-}) => /* @__PURE__ */ jsxs(DialogRoot, { open, onClose, size, mobileFullHeight, dataset, "data-preply-ds-component": webComponentNames.Dialog, children: [
-  /* @__PURE__ */ jsx(DialogCloseButton, {}),
-  /* @__PURE__ */ jsxs("header", { className: styles.header, "data-preply-ds-component": webComponentNames.DialogHeader, children: [
-    leadingElement,
-    !hideHeader && /* @__PURE__ */ jsxs("hgroup", { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: description })
-    ] })
-  ] }),
-  children
-] });
-export {
-  Dialog
-};
+//#region src/components/Dialog/Dialog.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* A modal dialog component that can be used to show content in an overlay.
+*
+* Composed of:
+* - Dialog: The main component
+* - DialogActions: Footer actions with primary and secondary buttons
+* - DialogSteps: Steps component for multi-step flows
+* - DialogStep: Step component for each step
+* - DialogStepsActions: Actions component for the steps
+*
+* @example
+* <Dialog
+*   open={isOpen}
+*   onClose={handleClose}
+*   title="Save Changes"
+*   description="Optional description"
+* >
+*   Content
+*   <DialogFooter>
+*     <DialogButtonStack>
+*       <Button onClick={handleCancel}>Cancel</Button>
+*       <Button onClick={handleSave}>Save</Button>
+*     </DialogButtonStack>
+*   </DialogFooter>
+* </Dialog>
+*/
+var Dialog = ({ open, title, description, leadingElement, children, size = "md", hideHeader, onClose, mobileFullHeight, dataset }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogRoot, {
+	open,
+	onClose,
+	size,
+	mobileFullHeight,
+	dataset,
+	"data-preply-ds-component": webComponentNames.Dialog,
+	children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogCloseButton, {}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
+			className: Dialog_module_default.header,
+			"data-preply-ds-component": webComponentNames.DialogHeader,
+			children: [leadingElement, !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("hgroup", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: title }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { children: description })] })]
+		}),
+		children
+	]
+});
+//#endregion
+export { Dialog };

package/dist/components/Dialog/DialogSteps.js

@@ -1,33 +1,44 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Steps, useStepsContext } from "../Steps/Steps.js";
-import { s as styles } from "../../Dialog.module-Ba1X7b3N.js";
+import "../../render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import { t as Dialog_module_default } from "../../Dialog.module-Db2BJAn4.js";
 import { DialogFooter } from "./primitives/DialogFooter.js";
+import { r as useStepsContext, t as Steps } from "../../Steps-DbN5vFrP.js";
+import "react";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-const DialogSteps = Steps;
-const DialogStep = Steps.Step;
-const DialogStepsNext = Steps.Next;
-const DialogStepsPrevious = Steps.Previous;
-function DialogStepsActions({
-  primaryButton,
-  nextButton = /* @__PURE__ */ jsx(DialogStepsNext, {}),
-  previousButton = /* @__PURE__ */ jsx(DialogStepsPrevious, {})
-}) {
-  const {
-    currentStep,
-    totalSteps
-  } = useStepsContext();
-  const isFirstStep = currentStep === 1;
-  const isLastStep = currentStep === totalSteps;
-  return /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs("div", { className: styles.stepControls, "data-preply-ds-component": webComponentNames.DialogSteps, children: [
-    !isFirstStep && /* @__PURE__ */ jsx("div", { className: styles.previous, "data-preply-ds-component": webComponentNames.DialogStepsPreviousContainer, children: previousButton }),
-    /* @__PURE__ */ jsx("div", { className: styles.next, "data-preply-ds-component": webComponentNames.DialogStepsNextContainer, children: isLastStep ? primaryButton : nextButton })
-  ] }) });
+//#region src/components/Dialog/DialogSteps.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var DialogSteps = Steps;
+var DialogStep = Steps.Step;
+var DialogStepsNext = Steps.Next;
+var DialogStepsPrevious = Steps.Previous;
+/**
+* Wrapper around the Steps actions for usage in Dialog.
+*
+* @example
+* <DialogSteps>
+*   <DialogStepsActions
+*     primaryButton={<Button size="medium" variant="primary" onClick={handleSave}>Save</Button>}
+*   />
+* </DialogSteps>
+*/
+function DialogStepsActions({ primaryButton, nextButton = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogStepsNext, {}), previousButton = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogStepsPrevious, {}) }) {
+	const { currentStep, totalSteps } = useStepsContext();
+	const isFirstStep = currentStep === 1;
+	const isLastStep = currentStep === totalSteps;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: Dialog_module_default.stepControls,
+		"data-preply-ds-component": webComponentNames.DialogSteps,
+		children: [!isFirstStep && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: Dialog_module_default.previous,
+			"data-preply-ds-component": webComponentNames.DialogStepsPreviousContainer,
+			children: previousButton
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: Dialog_module_default.next,
+			"data-preply-ds-component": webComponentNames.DialogStepsNextContainer,
+			children: isLastStep ? primaryButton : nextButton
+		})]
+	}) });
 }
-export {
-  DialogStep,
-  DialogSteps,
-  DialogStepsActions,
-  DialogStepsNext,
-  DialogStepsPrevious
-};
+//#endregion
+export { DialogStep, DialogSteps, DialogStepsActions, DialogStepsNext, DialogStepsPrevious };

package/dist/components/Dialog/primitives/DialogActions.js

@@ -1,23 +1,30 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
 import { DialogFooter } from "./DialogFooter.js";
+import "../../../useBreakpointMatch-D9a3CTNK.js";
 import { DialogButtonStack } from "./DialogButtonStack.js";
-const DialogActions = ({
-  primaryButton,
-  secondaryButton
-}) => {
-  const onPrimaryButtonClick = useCallback((e) => {
-    var _a;
-    (_a = e.currentTarget.closest("[role=dialog]")) == null ? void 0 : _a.toggleAttribute("data-slides-up", true);
-  }, []);
-  return /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs(DialogButtonStack, { children: [
-    secondaryButton,
-    /* @__PURE__ */ jsx("div", { style: {
-      display: "contents"
-    }, onClick: onPrimaryButtonClick, children: primaryButton })
-  ] }) });
-};
-export {
-  DialogActions
+import { useCallback } from "react";
+//#region src/components/Dialog/primitives/DialogActions.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* @deprecated use `DialogFooter` and `DialogButtonStack` instead
+* @example
+* <DialogFooter>
+*   <DialogButtonStack>
+*     <Button variant="secondary">Cancel</Button>
+*     <Button variant="primary">Save</Button>
+*   </DialogButtonStack>
+* </DialogFooter>
+*/
+var DialogActions = ({ primaryButton, secondaryButton }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogButtonStack, { children: [secondaryButton, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		style: { display: "contents" },
+		onClick: useCallback((e) => {
+			var _e$currentTarget$clos;
+			(_e$currentTarget$clos = e.currentTarget.closest("[role=dialog]")) === null || _e$currentTarget$clos === void 0 || _e$currentTarget$clos.toggleAttribute("data-slides-up", true);
+		}, []),
+		children: primaryButton
+	})] }) });
 };
+//#endregion
+export { DialogActions };

package/dist/components/Dialog/primitives/DialogButtonStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogButtonStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/primitives/DialogButtonStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,iBAAiB;IAR1B;;;;OAIG;;wCAoBN,CAAC"}
+{"version":3,"file":"DialogButtonStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/primitives/DialogButtonStack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAI/C,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,iBAAiB;IAR1B;;;;OAIG;;wCAsBN,CAAC"}

package/dist/components/Dialog/primitives/DialogButtonStack.js

@@ -1,18 +1,25 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as Dialog_module_default } from "../../../Dialog.module-Db2BJAn4.js";
+import { t as useBreakpointMatch } from "../../../useBreakpointMatch-D9a3CTNK.js";
 import { forwardRef } from "react";
-import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { getDatasetProps } from "@preply/ds-web-core";
-const DialogButtonStack = forwardRef(function DialogButtonStack2({
-  children,
-  className,
-  dataset,
-  ...props
-}, ref) {
-  const classNames = [styles.buttonStack, className].filter(Boolean).join(" ");
-  const datasetProps = getDatasetProps(dataset);
-  return /* @__PURE__ */ jsx("div", { ref, className: classNames, "data-preply-ds-component": webComponentNames.DialogButtonStack, ...datasetProps, ...props, children });
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+//#region src/components/Dialog/primitives/DialogButtonStack.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var DialogButtonStack = forwardRef(function DialogButtonStack({ children, className, dataset, ...props }, ref) {
+	const classNames = [Dialog_module_default.buttonStack, className].filter(Boolean).join(" ");
+	const datasetProps = getDatasetProps(dataset);
+	const horiZontalLayout = useBreakpointMatch("narrow-l");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref,
+		className: classNames,
+		"data-preply-ds-component": webComponentNames.DialogButtonStack,
+		"data-horizontal-layout": horiZontalLayout ? "" : void 0,
+		...datasetProps,
+		...props,
+		children
+	});
 });
-export {
-  DialogButtonStack
-};
+//#endregion
+export { DialogButtonStack };

package/dist/components/Dialog/primitives/DialogCloseButton.d.ts

@@ -29,5 +29,5 @@ export type DialogCloseButtonProps = {
  */
 export declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export type DialogDefaultCloseButtonProps = IconButtonProps;
-export declare const DialogDefaultCloseButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogDefaultCloseButton: React.ForwardRefExoticComponent<Omit<import('../../private/ButtonBase/ButtonBase').ButtonBaseProps, "children" | "preplyDsComponent" | "fullWidth" | "wrap" | "isIconButton"> & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=DialogCloseButton.d.ts.map

package/dist/components/Dialog/primitives/DialogCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/primitives/DialogCloseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAc,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI1E,MAAM,MAAM,sBAAsB,GAAG;IACjC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,kGAS7B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,eAAe,CAAC;AAE5D,eAAO,MAAM,wBAAwB,2FAgBnC,CAAC"}
+{"version":3,"file":"DialogCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/primitives/DialogCloseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAc,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI1E,MAAM,MAAM,sBAAsB,GAAG;IACjC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,kGAS7B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,eAAe,CAAC;AAE5D,eAAO,MAAM,wBAAwB,yNAgBnC,CAAC"}

package/dist/components/Dialog/primitives/DialogCloseButton.js

@@ -1,67 +1,4 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { forwardRef } from "react";
-import { useIntl } from "react-intl";
-import { IconButton } from "../../IconButton/IconButton.js";
-import { genericAriaLabels } from "../../../utils/shared-strings.js";
-import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
-import { u as useDialogClose } from "../../../useDialogClose-C9x1leGd.js";
-import { u as useDialogRootContext } from "../../../DialogRootContext-BCXmmJAw.js";
-import { u as useRenderElement } from "../../../useRenderElement-DtYPTE_y.js";
-const DialogClose = /* @__PURE__ */ React.forwardRef(function DialogClose2(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const open = store.useState("open");
-  const {
-    getRootProps,
-    ref
-  } = useDialogClose({
-    disabled,
-    open,
-    setOpen: store.setOpen,
-    nativeButton
-  });
-  const state = React.useMemo(() => ({
-    disabled
-  }), [disabled]);
-  return useRenderElement("button", componentProps, {
-    state,
-    ref: [forwardedRef, ref],
-    props: [elementProps, getRootProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
-const SvgTokyoUiClose = ({
-  title,
-  titleId,
-  ...props
-}, ref) => /* @__PURE__ */ React.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.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.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" }));
-const ForwardRef = forwardRef(SvgTokyoUiClose);
-const DialogCloseButton = forwardRef(function DialogCloseButton2({
-  children,
-  className
-}, ref) {
-  const classNames = [styles.close, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: classNames, children: /* @__PURE__ */ jsx(DialogClose, { ref, render: children != null ? children : /* @__PURE__ */ jsx(DialogDefaultCloseButton, {}) }) });
-});
-const DialogDefaultCloseButton = forwardRef(function DefaultCloseButton(props, ref) {
-  const {
-    formatMessage
-  } = useIntl();
-  return /* @__PURE__ */ jsx(IconButton, { ref, size: "small", variant: "ghost", dataset: {
-    testid: "dialog-close"
-  }, assistiveText: formatMessage(genericAriaLabels.close), svg: ForwardRef, ...props });
-});
-export {
-  DialogCloseButton,
-  DialogDefaultCloseButton
-};
+import "../../../render-icon-Ch3b2dE0.js";
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { n as DialogDefaultCloseButton, t as DialogCloseButton } from "../../../DialogCloseButton-DjDd9Mid.js";
+export { DialogCloseButton, DialogDefaultCloseButton };

package/dist/components/Dialog/primitives/DialogDescription.js

@@ -1,43 +1,3 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { forwardRef } from "react";
-import { getDatasetProps } from "@preply/ds-web-core";
-import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
-import { u as useDialogRootContext } from "../../../DialogRootContext-BCXmmJAw.js";
-import { u as useRenderElement } from "../../../useRenderElement-DtYPTE_y.js";
-import { u as useBaseUiId } from "../../../useBaseUiId-DavsGYu9.js";
-const DialogDescription$1 = /* @__PURE__ */ React.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";
-const DialogDescription2 = forwardRef(function DialogDescription22({
-  children,
-  className,
-  dataset,
-  ...props
-}, ref) {
-  if (!children) return null;
-  const classNames = [styles.description, className].filter(Boolean).join(" ");
-  const datasetProps = getDatasetProps(dataset);
-  return /* @__PURE__ */ jsx(DialogDescription$1, { ref, className: classNames, ...datasetProps, ...props, children });
-});
-export {
-  DialogDescription2 as DialogDescription
-};
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { t as DialogDescription } from "../../../DialogDescription-8zw9t6pm.js";
+export { DialogDescription };