@preply/ds-web-lib 10.0.0 → 11.1.0

package/dist/components/Chips/MultiSelectChips.js

@@ -1,70 +1,104 @@
 "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, useMultiSelectChipsContext] = createRequiredContext("MultiSelectChips");
-const MultiSelectChips = forwardRef(function MultiSelectChips2({
-  items,
-  children,
-  orientation = DEFAULT_ORIENTATION,
-  "aria-label": ariaLabel,
-  "aria-controls": ariaControls,
-  value: valueProp,
-  onValueChange: onValueChangeProp,
-  defaultValue,
-  dataset,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const [values, onValueChange] = useControllableState({
-    value: valueProp,
-    onValueChange: onValueChangeProp,
-    defaultValue: defaultValue != null ? defaultValue : []
-  });
-  const onToggle = (value, isSelected) => {
-    if (isSelected) {
-      onValueChange(values.filter((v) => v !== value));
-    } else {
-      onValueChange([...values, value]);
-    }
-  };
-  const content = items ? items.map(({
-    label,
-    value,
-    ...props
-  }) => /* @__PURE__ */ jsx(MultiSelectChipsItem, { value, ...props, children: label }, value)) : children;
-  return /* @__PURE__ */ jsx(Provider, { value: {
-    values,
-    onToggle
-  }, 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": "true", ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.MultiSelectChips
-  }), children: content }) }) });
+//#region src/components/Chips/MultiSelectChips.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var [Provider, useMultiSelectChipsContext] = createRequiredContext("MultiSelectChips");
+/**
+* A chips component that allows selection of multiple options from a group.
+* Users can select multiple chips, 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 toggle selection of the focused chip
+*
+* @example
+* ```tsx
+* <MultiSelectChips aria-label="Select skills" defaultValue={['vocabulary', 'speaking']}>
+*   <MultiSelectChipsItem value="vocabulary">Vocabulary</MultiSelectChipsItem>
+*   <MultiSelectChipsItem value="speaking">Speaking</MultiSelectChipsItem>
+*   <MultiSelectChipsItem value="listening">Listening</MultiSelectChipsItem>
+* </MultiSelectChips>
+* ```
+*/
+var MultiSelectChips = forwardRef(function MultiSelectChips({ items, children, orientation = DEFAULT_ORIENTATION, "aria-label": ariaLabel, "aria-controls": ariaControls, value: valueProp, onValueChange: onValueChangeProp, defaultValue, dataset, ...restPropsPassedByRadixUI }, ref) {
+	const [values, onValueChange] = useControllableState({
+		value: valueProp,
+		onValueChange: onValueChangeProp,
+		defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : []
+	});
+	const onToggle = (value, isSelected) => {
+		if (isSelected) onValueChange(values.filter((v) => v !== value));
+		else onValueChange([...values, value]);
+	};
+	const content = items ? items.map(({ label, value, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MultiSelectChipsItem, {
+		value,
+		...props,
+		children: label
+	}, value)) : children;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
+		value: {
+			values,
+			onToggle
+		},
+		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": "true",
+				...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.MultiSelectChips }),
+				children: content
+			})
+		})
+	});
 });
-const MultiSelectChipsItem = forwardRef(function MultiSelectChipsItem2({
-  value,
-  children,
-  icon,
-  countryFlagCode,
-  disabled,
-  counter,
-  dataset,
-  dsInternalSimulation,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const {
-    values,
-    onToggle
-  } = useMultiSelectChipsContext();
-  const isSelected = values.includes(value);
-  return /* @__PURE__ */ jsx(ChipListItem, { role: "presentation", children: /* @__PURE__ */ jsx(ChipButton, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, role: "option", "aria-selected": isSelected, onClick: () => onToggle(value, isSelected), icon, countryFlagCode, disabled, dsInternalSimulation, ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.MultiSelectChipsItem
-  }), children: /* @__PURE__ */ jsx(ChipLabel, { counter, children }) }) });
+/**
+* Individual chip item for use within MultiSelectChips.
+*
+* @example
+* ```tsx
+* <MultiSelectChipsItem value="english">
+*   English
+* </MultiSelectChipsItem>
+* ```
+*/
+var MultiSelectChipsItem = forwardRef(function MultiSelectChipsItem({ value, children, icon, countryFlagCode, disabled, counter, dataset, dsInternalSimulation, ...restPropsPassedByRadixUI }, ref) {
+	const { values, onToggle } = useMultiSelectChipsContext();
+	const isSelected = values.includes(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: () => onToggle(value, isSelected),
+			icon,
+			countryFlagCode,
+			disabled,
+			dsInternalSimulation,
+			...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.MultiSelectChipsItem }),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipLabel, {
+				counter,
+				children
+			})
+		})
+	});
 });
-export {
-  MultiSelectChips,
-  MultiSelectChipsItem
-};
+//#endregion
+export { MultiSelectChips, MultiSelectChipsItem };

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"}