@preply/ds-web-lib 10.0.0 → 11.1.0

package/dist/Select-Bo7PX_8V.js

@@ -0,0 +1,124 @@
+"use client";
+import { t as Icon } from "./Icon-CixAeOSd.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as ForwardRef$1 } from "./TokyoUIChevronDown-DGcVqR1z.js";
+import { useBreakpointMatch } from "./components/SelectField/hooks/useBreakpointMatch.js";
+import * as React$1 from "react";
+import { forwardRef, 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";
+import { Select } from "radix-ui";
+import './assets/Select.css';//#region ../media-icons/dist/24/TokyoUICheckmark.svg
+var SvgTokyoUiCheckmark = ({ 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: "M8.707 18 4 13.293l1.414-1.414 3.293 3.293L18 5.879l1.414 1.414L8.707 18Z",
+	clipRule: "evenodd"
+}));
+var ForwardRef = forwardRef(SvgTokyoUiCheckmark);
+var SelectField_module_default = {
+	trigger: "trigger__e7qqO",
+	chevron: "chevron__jR5Zn",
+	content: "content__NwpTO",
+	viewport: "viewport__SgLBh",
+	item: "item__iOFtY",
+	indicator: "indicator__FesN8",
+	group: "group__rZ-2W",
+	groupLabel: "groupLabel__fC3jF",
+	"mobile-content-show": "mobile-content-show__KWt2y",
+	"mobile-content-hide": "mobile-content-hide__RbAVZ",
+	"fade-in": "fade-in__KIt7M",
+	"fade-out": "fade-out__zj-by"
+};
+//#endregion
+//#region src/components/SelectField/Select.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var Select$1 = forwardRef(function Select$2({ value, defaultValue, placeholder, disabled, onValueChange, children, dataset, icon, name, id, required, onFocus, onBlur, onKeyDown, onKeyUp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-errormessage": ariaErrorMessage }, ref) {
+	const [isOpen, setIsOpen] = useState(false);
+	const portalElement = usePortalElement();
+	const datasetProps = getDatasetProps(dataset, { preplyDsComponent: webComponentNames.Select });
+	const isPopover = useBreakpointMatch("medium-s");
+	const handleValueChange = (newValue) => {
+		onValueChange === null || onValueChange === void 0 || onValueChange(newValue);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select.Root, {
+		value,
+		defaultValue,
+		onValueChange: handleValueChange,
+		disabled,
+		name,
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		required,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select.Trigger, {
+			ref,
+			id,
+			className: SelectField_module_default.trigger,
+			onFocus,
+			onBlur,
+			onKeyDown,
+			onKeyUp,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"aria-describedby": ariaDescribedby,
+			"aria-invalid": ariaInvalid,
+			"aria-errormessage": ariaErrorMessage,
+			...datasetProps,
+			children: [
+				icon,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Value, { placeholder }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Icon, {
+					className: SelectField_module_default.chevron,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { svg: ForwardRef$1 })
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Portal, {
+			container: portalElement,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Content, {
+				position: isPopover ? "popper" : void 0,
+				sideOffset: isPopover ? 5 : void 0,
+				className: SelectField_module_default.content,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Viewport, {
+					className: SelectField_module_default.viewport,
+					role: "group",
+					tabIndex: 0,
+					children
+				})
+			})
+		})]
+	});
+});
+function SelectOption({ value, disabled, children, leadingIcon, dataset }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select.Item, {
+		value,
+		disabled,
+		className: SelectField_module_default.item,
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.SelectFieldOption }),
+		children: [
+			leadingIcon,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.ItemText, { children }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.ItemIndicator, {
+				className: SelectField_module_default.indicator,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { svg: ForwardRef })
+			})
+		]
+	});
+}
+function SelectGroup({ children, label }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select.Group, {
+		className: SelectField_module_default.group,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select.Label, {
+			className: SelectField_module_default.groupLabel,
+			children: label
+		}), children]
+	});
+}
+//#endregion
+export { SelectGroup as n, SelectOption as r, Select$1 as t };

package/dist/Slider-Crg4DEn_.js

@@ -0,0 +1,64 @@
+"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 { Slider } from "radix-ui";
+import './assets/Slider.css';var Slider_module_default = {
+	root: "root__QwW3E",
+	track: "track__iifdu",
+	range: "range__ZdmUh",
+	thumb: "thumb__7W7O-"
+};
+//#endregion
+//#region src/components/Slider/Slider.tsx
+var import_jsx_runtime = require_jsx_runtime();
+function filterThumbProps(props) {
+	const thumbProps = {};
+	Object.entries(props).forEach(([key, value]) => {
+		switch (key) {
+			case "id":
+			case "aria-label":
+			case "aria-labelledby":
+			case "aria-describedby":
+			case "aria-invalid":
+			case "aria-errormessage": thumbProps[key] = value;
+		}
+	});
+	return thumbProps;
+}
+/**
+* A slider input that allows users to select a single value from a range.
+*
+* @example Uncontrolled
+* <Slider />
+* <Slider defaultValue={50} />
+*
+* @example Controlled
+* const [value, setValue] = useState(50)
+* <Slider value={value} onValueChange={setValue} />
+*/
+var Slider$1 = forwardRef(function Slider$2({ value, defaultValue = 0, onValueChange, min = 0, max = 100, step = 1, dataset, ...thumbProps }, ref) {
+	const datasetProps = getDatasetProps(dataset, { preplyDsComponent: webComponentNames.Slider });
+	const handleValueChange = onValueChange ? (newValue) => onValueChange(newValue[0]) : void 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Slider.Root, {
+		ref,
+		...datasetProps,
+		className: Slider_module_default.root,
+		value: value !== void 0 ? [value] : void 0,
+		defaultValue: defaultValue !== void 0 ? [defaultValue] : void 0,
+		onValueChange: handleValueChange,
+		min,
+		max,
+		step,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider.Track, {
+			className: Slider_module_default.track,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider.Range, { className: Slider_module_default.range })
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slider.Thumb, {
+			...filterThumbProps(thumbProps),
+			className: Slider_module_default.thumb
+		})]
+	});
+});
+//#endregion
+export { filterThumbProps as n, Slider_module_default as r, Slider$1 as t };

package/dist/Spinner-Ck8KQA22.js

@@ -0,0 +1,86 @@
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import * as React$1 from "react";
+import { forwardRef } from "react";
+import { moduleClassNames, moduleLocals, stringClassNames } from "@preply/ds-web-core";
+import { SPINNER_SIZE_DEFAULT } from "@preply/ds-core";
+import './assets/Spinner.css';//#region src/components/private/Spinner/style/index.module.less
+var Spinner$1 = "Spinner__U3f6H";
+var spin = "spin__6opuF";
+var index_module_default = {
+	Spinner: Spinner$1,
+	"Spinner--size-default": "Spinner--size-default__xo-Jk",
+	"Spinner--size-large": "Spinner--size-large__2nk5J",
+	"Spinner--narrow-l--size-default": "Spinner--narrow-l--size-default__gRrq1",
+	"Spinner--narrow-l--size-large": "Spinner--narrow-l--size-large__6gb70",
+	"Spinner--medium-s--size-default": "Spinner--medium-s--size-default__bJg-R",
+	"Spinner--medium-s--size-large": "Spinner--medium-s--size-large__HAPhI",
+	"Spinner--medium-l--size-default": "Spinner--medium-l--size-default__AuHDV",
+	"Spinner--medium-l--size-large": "Spinner--medium-l--size-large__MlfBE",
+	"Spinner--wide-s--size-default": "Spinner--wide-s--size-default__3sTOC",
+	"Spinner--wide-s--size-large": "Spinner--wide-s--size-large__AkfHJ",
+	"Spinner--wide-l--size-default": "Spinner--wide-l--size-default__FDlfA",
+	"Spinner--wide-l--size-large": "Spinner--wide-l--size-large__Oyg7h",
+	"Spinner--static": "Spinner--static__3-otL",
+	"Spinner--animated": "Spinner--animated__K3vs3",
+	spin
+};
+//#endregion
+//#region src/components/private/Spinner/svg/ellipsis.svg
+var SvgEllipsis = ({ title, titleId, ...props }, ref) => /* @__PURE__ */ React$1.createElement("svg", {
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg",
+	ref,
+	"aria-labelledby": titleId,
+	...props
+}, title ? /* @__PURE__ */ React$1.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React$1.createElement("path", {
+	fillRule: "evenodd",
+	clipRule: "evenodd",
+	d: "M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm9-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
+}));
+var ForwardRef$1 = forwardRef(SvgEllipsis);
+//#endregion
+//#region src/components/private/Spinner/svg/spinner.svg
+var SvgSpinner = ({ title, titleId, ...props }, ref) => /* @__PURE__ */ React$1.createElement("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 32 32",
+	fill: "none",
+	ref,
+	"aria-labelledby": titleId,
+	...props
+}, title ? /* @__PURE__ */ React$1.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React$1.createElement("g", { clipPath: "url(#clip0_1785_4234)" }, /* @__PURE__ */ React$1.createElement("path", {
+	d: "M30 15.9996C30.0002 18.5815 29.2863 21.1132 27.9373 23.3148C26.5884 25.5163 24.6569 27.302 22.3564 28.4743C20.0559 29.6465 17.476 30.1598 14.902 29.9573C12.328 29.7548 9.86014 28.8444 7.77126 27.3269C5.68238 25.8093 4.05386 23.7436 3.06576 21.3582C2.07765 18.9728 1.76846 16.3606 2.17236 13.8104C2.57627 11.2602 3.67753 8.8714 5.35439 6.90808C7.03126 4.94475 9.2184 3.48339 11.674 2.68557",
+	strokeWidth: 3,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}), /* @__PURE__ */ React$1.createElement("path", {
+	opacity: .3,
+	d: "M16 29.9996C23.732 29.9996 30 23.7316 30 15.9996C30 8.26758 23.732 1.99956 16 1.99956C8.26801 1.99956 2 8.26758 2 15.9996C2 23.7316 8.26801 29.9996 16 29.9996Z",
+	strokeWidth: 3,
+	strokeLinejoin: "round"
+})), /* @__PURE__ */ React$1.createElement("defs", null, /* @__PURE__ */ React$1.createElement("clipPath", { id: "clip0_1785_4234" }, /* @__PURE__ */ React$1.createElement("rect", {
+	width: 32,
+	height: 32,
+	fill: "white"
+}))));
+var ForwardRef = forwardRef(SvgSpinner);
+//#endregion
+//#region src/components/private/Spinner/Spinner.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var SPINNER = "Spinner";
+var Spinner = ({ size = SPINNER_SIZE_DEFAULT }) => {
+	const classNames = moduleClassNames(index_module_default, SPINNER, [stringClassNames("size", size)]);
+	const animatedClassNames = [...moduleLocals(index_module_default, SPINNER, ["animated"])];
+	const staticClassNames = [...moduleLocals(index_module_default, SPINNER, ["static"])];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		className: classNames.join(" "),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: animatedClassNames.join(" "),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ForwardRef, {})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: staticClassNames.join(" "),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ForwardRef$1, {})
+		})]
+	});
+};
+//#endregion
+export { Spinner as t };

package/dist/Stars-D5QspUBE.js

@@ -0,0 +1,72 @@
+import { t as renderIcon } from "./render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import "react";
+import StarIcon from "@preply/ds-media-icons/dist/24/TokyoUIStar.svg";
+import StarFilledIcon from "@preply/ds-media-icons/dist/24/TokyoUIStarFilled.svg";
+import './assets/Stars.css';//#region src/components/Rating/style/index.module.less
+var rating = "rating__Le8xf";
+var ratingInput = "ratingInput__aOeLl";
+var stars = "stars__7wYnu";
+var index_module_default = {
+	rating,
+	"rating--size-small": "rating--size-small__mIdaG",
+	"rating--size-medium": "rating--size-medium__2tNG2",
+	"rating--size-large": "rating--size-large__tZXTm",
+	"rating--narrow-l--size-small": "rating--narrow-l--size-small__nDn-T",
+	"rating--narrow-l--size-medium": "rating--narrow-l--size-medium__Vfex3",
+	"rating--narrow-l--size-large": "rating--narrow-l--size-large__YVlZT",
+	"rating--medium-s--size-small": "rating--medium-s--size-small__tDVGz",
+	"rating--medium-s--size-medium": "rating--medium-s--size-medium__m53Rx",
+	"rating--medium-s--size-large": "rating--medium-s--size-large__QaGl7",
+	"rating--medium-l--size-small": "rating--medium-l--size-small__6rJT2",
+	"rating--medium-l--size-medium": "rating--medium-l--size-medium__PPIhH",
+	"rating--medium-l--size-large": "rating--medium-l--size-large__WIjDu",
+	"rating--wide-s--size-small": "rating--wide-s--size-small__8ulej",
+	"rating--wide-s--size-medium": "rating--wide-s--size-medium__2FRMh",
+	"rating--wide-s--size-large": "rating--wide-s--size-large__mc81k",
+	"rating--wide-l--size-small": "rating--wide-l--size-small__JpDLa",
+	"rating--wide-l--size-medium": "rating--wide-l--size-medium__WvAyR",
+	"rating--wide-l--size-large": "rating--wide-l--size-large__VXvoH",
+	ratingInput,
+	stars,
+	"ratingInput--dsInternalSimulation-hover": "ratingInput--dsInternalSimulation-hover__YfddP",
+	"focus-style": "focus-style__SSYAT",
+	"ratingInput--dsInternalSimulation-focus": "ratingInput--dsInternalSimulation-focus__18rP3"
+};
+//#endregion
+//#region src/components/Rating/Stars.tsx
+var import_jsx_runtime = require_jsx_runtime();
+function FilledStars({ filledPerc }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		"data-filled": "true",
+		style: { width: `${filledPerc * 100}%` },
+		children: [
+			renderIcon(StarFilledIcon),
+			renderIcon(StarFilledIcon),
+			renderIcon(StarFilledIcon),
+			renderIcon(StarFilledIcon),
+			renderIcon(StarFilledIcon)
+		]
+	});
+}
+function EmptyStars() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		"data-filled": "false",
+		children: [
+			renderIcon(StarIcon),
+			renderIcon(StarIcon),
+			renderIcon(StarIcon),
+			renderIcon(StarIcon),
+			renderIcon(StarIcon)
+		]
+	});
+}
+function Stars({ filledPerc }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: index_module_default.stars,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilledStars, { filledPerc }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyStars, {})]
+	});
+}
+//#endregion
+export { index_module_default as n, Stars as t };

package/dist/Steps-DbN5vFrP.js

@@ -0,0 +1,173 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as Text } from "./Text-CaOF75Z-.js";
+import { t as Heading } from "./Heading-DA9gHfsx.js";
+import { t as Button } from "./Button-C35BZJZT.js";
+import { t as ProgressSteps } from "./ProgressSteps-BSqopxqv.js";
+import { createContext, forwardRef, isValidElement, useContext, useId, useState } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { FormattedMessage } from "react-intl";
+import './assets/Steps.css';var Steps_module_default = {
+	steps: "steps__BxrkC",
+	header: "header__HFxfM"
+};
+//#endregion
+//#region src/components/Steps/Steps.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var StepsContext = createContext(void 0);
+var useStepsContext = () => {
+	const context = useContext(StepsContext);
+	if (context === void 0) throw new Error("Steps navigation components must be used within a Steps component");
+	return context || {};
+};
+var StepsPrevious = forwardRef(function StepsPrevious({ onClick, disabled, variant = "ghost", ...props }, ref) {
+	const { goToPreviousStep, currentStep, isNavigating, contentId } = useStepsContext();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+		...props,
+		ref,
+		size: "medium",
+		variant,
+		onClick: (e) => {
+			onClick === null || onClick === void 0 || onClick(e);
+			if (e.defaultPrevented) return;
+			goToPreviousStep();
+		},
+		disabled: currentStep === 1 || isNavigating || disabled,
+		"aria-controls": contentId,
+		children: props.children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedMessage, {
+			id: "preply-ds.steps.previous",
+			defaultMessage: "Previous",
+			description: "Button used to navigate to the previous step"
+		})
+	});
+});
+var StepsNext = forwardRef(function StepsNext({ onClick, disabled, variant = "primary", ...props }, ref) {
+	const { goToNextStep, currentStep, totalSteps, isNavigating, contentId } = useStepsContext();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+		...props,
+		ref,
+		size: "medium",
+		variant,
+		onClick: (e) => {
+			onClick === null || onClick === void 0 || onClick(e);
+			if (e.defaultPrevented) return;
+			goToNextStep();
+		},
+		disabled: currentStep === totalSteps || isNavigating || disabled,
+		"aria-controls": contentId,
+		children: props.children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedMessage, {
+			id: "preply-ds.steps.next",
+			defaultMessage: "Next",
+			description: "Button used to navigate to the next step"
+		})
+	});
+});
+var StepsComponent = ({ children, "aria-label": ariaLabel, initialStep = 1, onStepChange, dataset }) => {
+	const contentId = useId();
+	const [currentStep, setCurrentStep] = useState(initialStep);
+	const [isNavigating, setIsNavigating] = useState(false);
+	const stepChildren = [];
+	const otherChildren = [];
+	children === null || children === void 0 || children.forEach((child) => {
+		if (isValidElement(child) && child.type === Step) stepChildren.push(child);
+		else otherChildren.push(child);
+	});
+	const totalSteps = stepChildren.length;
+	const datasetProps = getDatasetProps(dataset, { preplyDsComponent: webComponentNames.Steps });
+	const handleStepChange = async (nextStep) => {
+		const boundedNextStep = Math.min(Math.max(nextStep, 1), totalSteps);
+		if (!onStepChange) {
+			setCurrentStep(boundedNextStep);
+			return;
+		}
+		setIsNavigating(true);
+		try {
+			const interceptedStep = await onStepChange(currentStep, boundedNextStep);
+			setCurrentStep(interceptedStep !== null && interceptedStep !== void 0 ? interceptedStep : boundedNextStep);
+		} finally {
+			setIsNavigating(false);
+		}
+	};
+	const goToPreviousStep = () => handleStepChange(currentStep - 1);
+	const goToNextStep = () => handleStepChange(currentStep + 1);
+	const goToStep = (step) => handleStepChange(step);
+	const contextValue = {
+		goToPreviousStep,
+		goToNextStep,
+		goToStep,
+		currentStep,
+		totalSteps,
+		isNavigating,
+		contentId
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		...datasetProps,
+		className: Steps_module_default.steps,
+		id: contentId,
+		"aria-live": "polite",
+		"aria-busy": isNavigating,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressSteps, {
+			currentStep,
+			totalSteps,
+			"aria-label": ariaLabel
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: Steps_module_default.content,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StepsContext.Provider, {
+				value: contextValue,
+				children: [stepChildren[currentStep - 1], otherChildren]
+			})
+		})]
+	});
+};
+var Step = ({ title, description, children, hideHeader }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("hgroup", {
+	className: Steps_module_default.header,
+	hidden: hideHeader,
+	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, {
+		tag: "h3",
+		variant: {
+			_: "medium",
+			"medium-l": "large"
+		},
+		children: title
+	}), description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		variant: "default-regular",
+		accent: "secondary",
+		children: description
+	})]
+}), children] });
+/**
+* This component allows users to navigate through a series of steps, providing
+* a structured way to complete tasks or forms. It will also handle screen reader
+* announcements and progress indicators.
+*
+* To create a step, wrap the content of each step in a `Steps.Step` component.
+* Any non-`Steps.Step` children will be rendered outside of the steps flow,
+* right after the currently active step.
+*
+* To navigate between steps, use the `Steps.Previous` and `Steps.Next` components.
+* Alternatively, you can use the `StepsContext` directly to call
+* `goToPreviousStep`, `goToNextStep`, or `goToStep`.
+*
+* @example
+* <Steps aria-label="Onboarding Steps" onStepChange={handleStepValidation}>
+*   <Steps.Step title="Subject" description="What do you want to learn?">
+*     <SubjectStep />
+*   </Steps.Step>
+*   <Steps.Step title="Availability" description="When would you like to have classes?">
+*     <AvailabilityStep />
+*   </Steps.Step>
+*
+*   <LayoutFlex justifyContent="space-between">
+*     <Steps.Previous variant="tertiary">Back</Steps.Previous>
+*     <Steps.Next variant="primary">Continue</Steps.Next>
+*   </LayoutFlex>
+* </Steps>
+*/
+var Steps = Object.assign(StepsComponent, {
+	Step,
+	Previous: StepsPrevious,
+	Next: StepsNext
+});
+//#endregion
+export { StepsContext as n, useStepsContext as r, Steps as t };

package/dist/Switch-Ck_xB0ID.js

@@ -0,0 +1,49 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { forwardRef, useState } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import './assets/Switch.css';var Switch_module_default = {
+	Switch: "Switch__-4XFt",
+	thumb: "thumb__qAYMq"
+};
+//#endregion
+//#region src/components/Switch/Switch.tsx
+var import_jsx_runtime = require_jsx_runtime();
+function filterSwitchProps(props) {
+	const filteredProps = {};
+	Object.entries(props).forEach(([key, value]) => {
+		switch (key) {
+			case "id":
+			case "disabled":
+			case "aria-label":
+			case "aria-labelledby":
+			case "aria-describedby":
+			case "aria-invalid":
+			case "aria-errormessage": filteredProps[key] = value;
+		}
+	});
+	return filteredProps;
+}
+var Switch = forwardRef(function Switch({ checked: forceChecked, defaultChecked, onCheckedChange, dataset, ...otherProps }, ref) {
+	const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
+	const isControlled = forceChecked !== void 0;
+	const checked = isControlled ? forceChecked : internalChecked;
+	const handleClick = () => {
+		const newValue = !checked;
+		if (!isControlled) setInternalChecked(newValue);
+		onCheckedChange === null || onCheckedChange === void 0 || onCheckedChange(newValue);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		...filterSwitchProps(otherProps),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.Switch }),
+		ref,
+		role: "switch",
+		"aria-checked": checked,
+		className: Switch_module_default.Switch,
+		onClick: handleClick,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: Switch_module_default.thumb })
+	});
+});
+//#endregion
+export { Switch as t };