@preply/ds-web-lib 11.0.0 → 11.1.0

package/dist/FieldButton-B2slox8P.js

@@ -0,0 +1,32 @@
+"use client";
+import { filterAttributesPassedByRadixUIAtRuntime } from "./utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { forwardRef } from "react";
+import { getDatasetProps, moduleClassNames } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import './assets/FieldButton.css';var index_module_default = { FieldButton: "FieldButton__OWtNd" };
+//#endregion
+//#region src/components/FieldButton/FieldButton.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var FieldButton = forwardRef(function FieldButtonComponent({ svg: Svg, assistiveText, onClick, dataset, ...restPropsPassedByRadixUI }, ref) {
+	const classNames = moduleClassNames(index_module_default, webComponentNames.FieldButton);
+	const handleClick = (ev) => {
+		ev.stopPropagation();
+		onClick === null || onClick === void 0 || onClick(ev);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.FieldButton }),
+		className: classNames.join(" "),
+		title: assistiveText,
+		onClick: handleClick,
+		ref,
+		type: "button",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Svg, {
+			"aria-hidden": "true",
+			focusable: "false"
+		})
+	});
+});
+//#endregion
+export { FieldButton as t };

package/dist/FormControl-qnbQL1iF.js

@@ -0,0 +1,128 @@
+"use client";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { isValidElement, useId } 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 { Slot } from "radix-ui";
+import './assets/FormControl.css';var FormControl_module_default = {
+	container: "container__dtKps",
+	label: "label__S0tQE",
+	required: "required__GVzWg",
+	description: "description__h6Gw1",
+	error: "error__MGvA2"
+};
+//#endregion
+//#region src/components/FormControl/FormControl.tsx
+var import_jsx_runtime = require_jsx_runtime();
+function getInputAriaAttributes({ id, error, description, hasError }) {
+	const ariaAttributes = {};
+	if (hasError) ariaAttributes["aria-invalid"] = true;
+	if (error) {
+		ariaAttributes["aria-invalid"] = true;
+		ariaAttributes["aria-errormessage"] = `${id}-error`;
+	}
+	if (description) ariaAttributes["aria-describedby"] = `${id}-description`;
+	return ariaAttributes;
+}
+/**
+* FormControl component provides a consistent layout and accessibility
+* for the form fields. You can use it to create custom fields not supported
+* by the DS yet.
+*
+* Note that FormControl will implicitly provide some props to the child component:
+*
+* - `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;
+* - `aria-invalid` and `aria-errormessage` when `error` is provided;
+* - `aria-describedby` when `description` is provided;
+* - `required` when FormControl's `required` is true;
+*
+* @example
+* const MyCustomInput = styled.input`
+*     // ensures that the input label is visible when scrolled to
+*     scroll-margin-top: var(--ds-input-scroll-margin-top);
+*     &[aria-invalid='true'] {
+*         border-color: red;
+*     }
+* `
+*
+* <FormControl label="Email">
+*     <MyCustomInput />
+* </FormControl>
+*/
+var FormControl = ({ id: idProp, label, hideLabel, description, error, hasError, children, required, dataset, onClick, preplyDsComponent = webComponentNames.FormControl, useLegacyRequiredLabel = false }) => {
+	const generatedId = useId();
+	const id = idProp || generatedId;
+	const inputAriaAttributes = getInputAriaAttributes({
+		id,
+		error,
+		description,
+		hasError
+	});
+	const datasetProps = getDatasetProps(dataset, { preplyDsComponent });
+	/**
+	* Warn developers about improper usage
+	*/
+	if (process.env.NODE_ENV === "development") {
+		if (isValidElement(children)) {
+			const childProps = children.props;
+			if ("id" in childProps) console.error("FormControl: trying to pass id prop to the child component. Pass it to the FormControl instead.");
+			if ("required" in childProps) console.error("FormControl: trying to pass required prop to the child component. Pass it to the FormControl instead.");
+		}
+		if (!label) console.error("FormControl: label is required for accessibility reasons. Pass it to the field even if it's visually hidden.");
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: FormControl_module_default.container,
+		...datasetProps,
+		onClick,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+				htmlFor: id,
+				className: FormControl_module_default.label,
+				"data-hidden": hideLabel || !label,
+				"data-testid": "label",
+				children: [
+					label,
+					!!useLegacyRequiredLabel && required && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						"aria-hidden": true,
+						className: FormControl_module_default.required,
+						children: [" • ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedMessage, {
+							id: "preply-ds.fieldLabel.required",
+							defaultMessage: "Required",
+							description: "Form field required label"
+						})]
+					}),
+					!useLegacyRequiredLabel && !required && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						"aria-hidden": true,
+						className: FormControl_module_default.required,
+						children: [" • ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedMessage, {
+							id: "preply-ds.fieldLabel.optional",
+							defaultMessage: "Optional",
+							description: "Form field optional label"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Root, {
+				id,
+				required,
+				...inputAriaAttributes,
+				children
+			}),
+			error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: FormControl_module_default.error,
+				role: "alert",
+				id: `${id}-error`,
+				"data-testid": "error",
+				children: error
+			}) : description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: FormControl_module_default.description,
+				id: `${id}-description`,
+				"data-testid": "description",
+				children: description
+			}) : null
+		]
+	});
+};
+//#endregion
+export { FormControl as t };

package/dist/Heading-DA9gHfsx.js

@@ -0,0 +1,71 @@
+import { t as getTextAccentClassnames } from "./text-accent-CfUFx-1K.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "./utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as getTextCenteredClassnames } from "./text-centered-Dwp2_-Yp.js";
+import { forwardRef } from "react";
+import { getDatasetProps, moduleClassNames, stringClassNames } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import './assets/Heading.css';var index_module_default = {
+	Heading: "Heading__Lv13n",
+	"Heading--variant-massive": "Heading--variant-massive__xBbvd",
+	"Heading--variant-huge": "Heading--variant-huge__uNKwX",
+	"Heading--variant-extraLarge": "Heading--variant-extraLarge__O5YaA",
+	"Heading--variant-large": "Heading--variant-large__npEGh",
+	"Heading--variant-medium": "Heading--variant-medium__WRzNp",
+	"Heading--variant-small": "Heading--variant-small__RlTJl",
+	"Heading--narrow-l--variant-massive": "Heading--narrow-l--variant-massive__NkQiN",
+	"Heading--narrow-l--variant-huge": "Heading--narrow-l--variant-huge__xN-4a",
+	"Heading--narrow-l--variant-extraLarge": "Heading--narrow-l--variant-extraLarge__dhHS3",
+	"Heading--narrow-l--variant-large": "Heading--narrow-l--variant-large__O-yyq",
+	"Heading--narrow-l--variant-medium": "Heading--narrow-l--variant-medium__T3ZkZ",
+	"Heading--narrow-l--variant-small": "Heading--narrow-l--variant-small__nibGn",
+	"Heading--medium-s--variant-massive": "Heading--medium-s--variant-massive__dkhpb",
+	"Heading--medium-s--variant-huge": "Heading--medium-s--variant-huge__Td7XG",
+	"Heading--medium-s--variant-extraLarge": "Heading--medium-s--variant-extraLarge__puDN9",
+	"Heading--medium-s--variant-large": "Heading--medium-s--variant-large__UQMHF",
+	"Heading--medium-s--variant-medium": "Heading--medium-s--variant-medium__i2JwC",
+	"Heading--medium-s--variant-small": "Heading--medium-s--variant-small__UQTL9",
+	"Heading--medium-l--variant-massive": "Heading--medium-l--variant-massive__UtPA0",
+	"Heading--medium-l--variant-huge": "Heading--medium-l--variant-huge__BiY-j",
+	"Heading--medium-l--variant-extraLarge": "Heading--medium-l--variant-extraLarge__IP2Vo",
+	"Heading--medium-l--variant-large": "Heading--medium-l--variant-large__tV93Y",
+	"Heading--medium-l--variant-medium": "Heading--medium-l--variant-medium__945np",
+	"Heading--medium-l--variant-small": "Heading--medium-l--variant-small__ZUV1D",
+	"Heading--wide-s--variant-massive": "Heading--wide-s--variant-massive__BWmTX",
+	"Heading--wide-s--variant-huge": "Heading--wide-s--variant-huge__inkxv",
+	"Heading--wide-s--variant-extraLarge": "Heading--wide-s--variant-extraLarge__SQjI9",
+	"Heading--wide-s--variant-large": "Heading--wide-s--variant-large__UNDsi",
+	"Heading--wide-s--variant-medium": "Heading--wide-s--variant-medium__4OLaD",
+	"Heading--wide-s--variant-small": "Heading--wide-s--variant-small__ex4C1",
+	"Heading--wide-l--variant-massive": "Heading--wide-l--variant-massive__94l-9",
+	"Heading--wide-l--variant-huge": "Heading--wide-l--variant-huge__1qto2",
+	"Heading--wide-l--variant-extraLarge": "Heading--wide-l--variant-extraLarge__udFtI",
+	"Heading--wide-l--variant-large": "Heading--wide-l--variant-large__Y7k-Q",
+	"Heading--wide-l--variant-medium": "Heading--wide-l--variant-medium__xkuYd",
+	"Heading--wide-l--variant-small": "Heading--wide-l--variant-small__ORLbL"
+};
+//#endregion
+//#region src/components/Heading/Heading.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var Heading = forwardRef(function HeadingComponent({ children, variant, accent, tag, centered, dataset, id, className, ...restPropsPassedByRadixUI }, ref) {
+	const Tag = tag || "h1";
+	const classNames = moduleClassNames(index_module_default, webComponentNames.Heading, stringClassNames("variant", variant));
+	const centeredClassNames = getTextCenteredClassnames(centered);
+	const accentClassNames = getTextAccentClassnames(!accent, accent);
+	const allClassNames = [
+		...classNames,
+		...centeredClassNames,
+		...accentClassNames,
+		className
+	];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		className: allClassNames.join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.Heading }),
+		id,
+		ref,
+		children
+	});
+});
+//#endregion
+export { Heading as t };

package/dist/Icon-CixAeOSd.js

@@ -0,0 +1,48 @@
+import { t as getTextAccentClassnames } from "./text-accent-CfUFx-1K.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "./utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as renderIcon } from "./render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as getExpColorClassNames } from "./exp-color-C5mKAN91.js";
+import { forwardRef } from "react";
+import { getDatasetProps, moduleClassNames } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { ICON_SIZE_DEFAULT } from "@preply/ds-core";
+import './assets/Icon.css';var index_module_default = {
+	Icon: "Icon__jDdMD",
+	"Icon--size-16": "Icon--size-16__P1SXI",
+	"Icon--size-24": "Icon--size-24__vnVQ0",
+	"Icon--size-32": "Icon--size-32__gHIna",
+	"Icon--size-48": "Icon--size-48__0PUAE"
+};
+//#endregion
+//#region src/components/Icon/Icon.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var Icon = forwardRef(function IconComponent({ svg, size = ICON_SIZE_DEFAULT, accent, expColor, label, dataset, ...restPropsPassedByRadixUI }, ref) {
+	const classNames = moduleClassNames(index_module_default, webComponentNames.Icon, [`size-${size}`]);
+	const accentClassNames = getTextAccentClassnames(false, accent);
+	const expColorClassNames = accent ? [] : getExpColorClassNames(expColor);
+	const allClassNames = [
+		...classNames,
+		...accentClassNames,
+		...expColorClassNames
+	];
+	const props = {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		className: allClassNames.join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.Icon }),
+		ref
+	};
+	if (!svg) throw new Error("Icon prop svg is mandatory");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		...props,
+		role: "img",
+		"aria-hidden": !label,
+		"aria-label": label,
+		children: renderIcon(svg, {
+			"aria-hidden": "true",
+			focusable: "false"
+		})
+	});
+});
+//#endregion
+export { Icon as t };

package/dist/IconButton-BPKpgfep.js

@@ -0,0 +1,31 @@
+import { t as renderIcon } from "./render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as ButtonBase } from "./ButtonBase-8eUyTWxX.js";
+import { t as BubbleCounter_module_default } from "./BubbleCounter.module-BU2S0euA.js";
+import { forwardRef } from "react";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { BUTTON_SIZE_DEFAULT, BUTTON_VARIANT_DEFAULT } from "@preply/ds-core";
+import './assets/IconButton.css';var index_module_default = { IconButton: "IconButton__FZTVy" };
+//#endregion
+//#region src/components/IconButton/IconButton.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var IconButton = forwardRef(function IconButtonComponent({ variant = BUTTON_VARIANT_DEFAULT, size = BUTTON_SIZE_DEFAULT, url, a11yLabel, svg, ...props }, ref) {
+	const classNames = [index_module_default.IconButton, BubbleCounter_module_default.cutout].join(" ");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonBase, {
+		...props,
+		ref,
+		className: classNames,
+		isIconButton: true,
+		variant,
+		size,
+		url,
+		a11yLabel,
+		preplyDsComponent: webComponentNames.IconButton,
+		children: renderIcon(svg, {
+			"aria-hidden": "true",
+			focusable: "false"
+		})
+	});
+});
+//#endregion
+export { IconButton as t };

package/dist/InputContainer-CzzuOe_p.js

@@ -0,0 +1,38 @@
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import "react";
+import './assets/InputContainer.css';var Input_module_default = {
+	container: "container__B-gQ9",
+	input: "input__WZN7y",
+	icon: "icon__6Xfum",
+	trailingIcon: "trailingIcon__Bgnv4",
+	button: "button__auAU0"
+};
+//#endregion
+//#region src/components/private/Input/InputContainer.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* A wrapper for input-like elements to render optional icon, button and trailing icon.
+* For internal use only.
+*/
+function InputContainer({ button, icon, trailingIcon, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: Input_module_default.container,
+		children: [
+			!!icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: Input_module_default.icon,
+				children: icon
+			}),
+			children,
+			!!trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: Input_module_default.trailingIcon,
+				children: trailingIcon
+			}),
+			!!button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: Input_module_default.button,
+				children: button
+			})
+		]
+	});
+}
+//#endregion
+export { Input_module_default as n, InputContainer as t };

package/dist/LayoutFlex-e9auDvWD.js

@@ -0,0 +1,86 @@
+import { filterAttributesPassedByRadixUIAtRuntime } from "./utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { n as layout_padding_module_default } from "./layout-padding-ugY-yd2q.js";
+import { getAlignItemsAttr, getDirectionAttr, getDisplayAttr, getGapAttr, getJustifyContentAttr, getPaddingAttr, getRelativeAttr, getWrapAttr } from "./components/LayoutFlex/style/getStyleAttrs.js";
+import { t as layout_gap_module_default } from "./layout-gap.module-DLD8bcR4.js";
+import { t as layout_hide_module_default } from "./layout-hide.module-B1P0N4i3.js";
+import { t as layout_relative_module_default } from "./layout-relative.module-B5xrFD9j.js";
+import { forwardRef } from "react";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
+import './assets/LayoutFlex.css';//#region src/components/LayoutFlex/style/layout-flex.module.less
+var layout_flex_module_default = {};
+//#endregion
+//#region src/components/LayoutFlex/LayoutFlex.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* A component for rendering flex layout
+*
+* @example
+* <LayoutFlex direction="column" gap="12">
+*     <div />
+*     <div />
+* </LayoutFlex>
+*
+* @example
+* LayoutFlex can be nested to create more complex layouts
+*
+* <LayoutFlex direction="column" gap="12">
+*     <LayoutFlex gap="24">
+*         <div />
+*         <div />
+*     </LayoutFlex>
+*     <div />
+* </LayoutFlex>
+*/
+var LayoutFlex = forwardRef(function LayoutFlexComponent(props, ref) {
+	const { gap, hide, column, nowrap, inline, dataset, reverse, padding, children, relative, direction, alignItems, justifyContent, tag: Tag = LAYOUT_TAG_DEFAULT, ...restPropsPassedByRadixUI } = props;
+	const classNames = [
+		layout_flex_module_default.LayoutFlex,
+		layout_gap_module_default.LayoutGap,
+		layout_hide_module_default.LayoutHide,
+		layout_padding_module_default.layoutPadding,
+		layout_relative_module_default.LayoutRelative
+	];
+	const gapAttr = getGapAttr({ gap });
+	const wrapAttr = getWrapAttr({ nowrap });
+	const htmlRelative = getRelativeAttr({ relative });
+	const displayAttr = getDisplayAttr({
+		hide,
+		inline
+	});
+	const alignItemsAttr = getAlignItemsAttr({ alignItems });
+	const justifyContentAttr = getJustifyContentAttr({ justifyContent });
+	let directionAttr = void 0;
+	let columnReverseAttr = void 0;
+	const directionResult = getDirectionAttr({
+		direction,
+		column,
+		reverse
+	});
+	if (directionResult.applyThrough === "columnReverse") columnReverseAttr = directionResult.columnReverseAttr;
+	else directionAttr = directionResult.directionAttr;
+	let paddingAttr = void 0;
+	const paddingResult = getPaddingAttr({ padding });
+	if (paddingResult.applyThrough === "classnames") classNames.push(...paddingResult.classNames);
+	else paddingAttr = paddingResult.attr;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		ref,
+		className: classNames.join(" "),
+		"data-ds-gap": gapAttr,
+		"data-ds-nowrap": wrapAttr,
+		"data-ds-padding": paddingAttr,
+		"data-ds-display": displayAttr,
+		"data-ds-relative": htmlRelative,
+		"data-ds-direction": directionAttr,
+		"data-ds-alignitems": alignItemsAttr,
+		"data-ds-columnreverse": columnReverseAttr,
+		"data-ds-justifycontent": justifyContentAttr,
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.LayoutFlex }),
+		children
+	});
+});
+//#endregion
+export { LayoutFlex as t };

package/dist/LayoutFlexItem-D9ziMmHe.js

@@ -0,0 +1,48 @@
+import { filterAttributesPassedByRadixUIAtRuntime } from "./utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as getAlignSelfClassNames } from "./align-self-VrZUceie.js";
+import { getLayoutHideClassnames } from "./shared-styles/layout-hide/layout-hide.js";
+import { getLayoutRelativeClassnames } from "./shared-styles/layout-relative/layout-relative.js";
+import { forwardRef } from "react";
+import { booleanClassNames, getDatasetProps, moduleClassNames } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
+import './assets/LayoutFlexItem.css';var index_module_default = {
+	LayoutFlexItem: "LayoutFlexItem__0eYcj",
+	"LayoutFlexItem--stretch": "LayoutFlexItem--stretch__Jqv5O",
+	"LayoutFlexItem--no-stretch": "LayoutFlexItem--no-stretch__PvzwT",
+	"LayoutFlexItem--narrow-l--stretch": "LayoutFlexItem--narrow-l--stretch__qHYyW",
+	"LayoutFlexItem--narrow-l--no-stretch": "LayoutFlexItem--narrow-l--no-stretch__gerLX",
+	"LayoutFlexItem--medium-s--stretch": "LayoutFlexItem--medium-s--stretch__BzvqZ",
+	"LayoutFlexItem--medium-s--no-stretch": "LayoutFlexItem--medium-s--no-stretch__-yKBs",
+	"LayoutFlexItem--medium-l--stretch": "LayoutFlexItem--medium-l--stretch__Ta-hC",
+	"LayoutFlexItem--medium-l--no-stretch": "LayoutFlexItem--medium-l--no-stretch__aO4iE",
+	"LayoutFlexItem--wide-s--stretch": "LayoutFlexItem--wide-s--stretch__-5pQz",
+	"LayoutFlexItem--wide-s--no-stretch": "LayoutFlexItem--wide-s--no-stretch__cge-J",
+	"LayoutFlexItem--wide-l--stretch": "LayoutFlexItem--wide-l--stretch__7GhYM",
+	"LayoutFlexItem--wide-l--no-stretch": "LayoutFlexItem--wide-l--no-stretch__9tE4Z"
+};
+//#endregion
+//#region src/components/LayoutFlexItem/LayoutFlexItem.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var LayoutFlexItem = forwardRef(function LayoutFlexItemComponent({ children, alignSelf, stretch = false, tag, hide, relative, dataset, ...restPropsPassedByRadixUI }, ref) {
+	const classNames = moduleClassNames(index_module_default, webComponentNames.LayoutFlexItem, booleanClassNames("stretch", "no-stretch", stretch));
+	const alignSelfClassNames = getAlignSelfClassNames(alignSelf);
+	const hideClassNames = getLayoutHideClassnames(hide);
+	const relativeClassNames = getLayoutRelativeClassnames(relative);
+	const allClassNames = [
+		...classNames,
+		...alignSelfClassNames,
+		...hideClassNames,
+		...relativeClassNames
+	];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(tag !== null && tag !== void 0 ? tag : LAYOUT_TAG_DEFAULT, {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		ref,
+		className: allClassNames.join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.LayoutFlexItem }),
+		children
+	});
+});
+//#endregion
+export { LayoutFlexItem as t };

package/dist/LayoutGridItem-Q8Lnvrri.js

@@ -0,0 +1,34 @@
+import { filterAttributesPassedByRadixUIAtRuntime } from "./utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as getAlignSelfClassNames } from "./align-self-VrZUceie.js";
+import { getLayoutHideClassnames } from "./shared-styles/layout-hide/layout-hide.js";
+import { getLayoutRelativeClassnames } from "./shared-styles/layout-relative/layout-relative.js";
+import { forwardRef } from "react";
+import { getDatasetProps, moduleClassNames } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
+import './assets/LayoutGridItem.css';var index_module_default = { LayoutGridItem: "LayoutGridItem__HXV4b" };
+//#endregion
+//#region src/components/LayoutGridItem/LayoutGridItem.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var LayoutGridItem = forwardRef(function LayoutGridItemComponent({ children, alignSelf, tag, hide, relative, dataset, ...restPropsPassedByRadixUI }, ref) {
+	const classNames = moduleClassNames(index_module_default, webComponentNames.LayoutGridItem, []);
+	const alignSelfClassNames = getAlignSelfClassNames(alignSelf);
+	const hideClassNames = getLayoutHideClassnames(hide);
+	const relativeClassNames = getLayoutRelativeClassnames(relative);
+	const allClassNames = [
+		...classNames,
+		...alignSelfClassNames,
+		...hideClassNames,
+		...relativeClassNames
+	];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(tag !== null && tag !== void 0 ? tag : LAYOUT_TAG_DEFAULT, {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		ref,
+		className: allClassNames.join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.LayoutGridItem }),
+		children
+	});
+});
+//#endregion
+export { LayoutGridItem as t };

package/dist/Link-CdoJVeER.js

@@ -0,0 +1,66 @@
+"use client";
+import { filterAttributesPassedByRadixUIAtRuntime } from "./utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { cloneElement, forwardRef } from "react";
+import { booleanClassNames, getDatasetProps, getExternalUrlProps, moduleClassNames, stringClassNames, useHostname } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { LINK_VARIANT_DEFAULT } from "@preply/ds-core";
+import './assets/Link.css';var index_module_default = {
+	Link: "Link__0oP-l",
+	"Link--inline": "Link--inline__VOKvL",
+	"Link--noUnderline": "Link--noUnderline__CpiR9",
+	"Link--variant-accentDark": "Link--variant-accentDark__ECRfH",
+	"Link--variant-accentDark--dsInternalSimulation-hover": "Link--variant-accentDark--dsInternalSimulation-hover__JTAlS",
+	"Link--variant-accentDark--dsInternalSimulation-active": "Link--variant-accentDark--dsInternalSimulation-active__ew7GY",
+	"Link--variant-accentDarkInverted": "Link--variant-accentDarkInverted__csBv5",
+	"Link--variant-accentDarkInverted--dsInternalSimulation-hover": "Link--variant-accentDarkInverted--dsInternalSimulation-hover__eAUvo",
+	"Link--variant-accentDarkInverted--dsInternalSimulation-active": "Link--variant-accentDarkInverted--dsInternalSimulation-active__Xb-2-",
+	"Link--variant-neutral": "Link--variant-neutral__krm1o",
+	"Link--variant-neutral--dsInternalSimulation-hover": "Link--variant-neutral--dsInternalSimulation-hover__avwXp",
+	"Link--variant-neutral--dsInternalSimulation-active": "Link--variant-neutral--dsInternalSimulation-active__I8XiT",
+	"Link--variant-neutralInverted": "Link--variant-neutralInverted__gzzYq",
+	"Link--variant-neutralInverted--dsInternalSimulation-hover": "Link--variant-neutralInverted--dsInternalSimulation-hover__s6i9I",
+	"Link--variant-neutralInverted--dsInternalSimulation-active": "Link--variant-neutralInverted--dsInternalSimulation-active__y3WF5",
+	"Link--variant-unsetColors": "Link--variant-unsetColors__S5q1C",
+	"Link--variant-unsetColors--dsInternalSimulation-hover": "Link--variant-unsetColors--dsInternalSimulation-hover__ovNJh",
+	"Link--variant-unsetColors--dsInternalSimulation-active": "Link--variant-unsetColors--dsInternalSimulation-active__9v0om"
+};
+//#endregion
+//#region src/components/Link/Link.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* This is an inline element and will inherit font-size, line-height and
+* font-weight from the parent context. If you need to customise any of these
+* styles, all you have to do is wrap the <Link> in a Text or TextInline
+* component.
+*/
+var Link = forwardRef(function LinkComponent(props, ref) {
+	const { variant = LINK_VARIANT_DEFAULT, href, download, opensInNewTab, nofollow, assistiveText, onClick, as, url, dataset, children, inline, dsInternalSimulation, noUnderline, ...restPropsPassedByRadixUI } = props;
+	const hostname = useHostname();
+	const classNames = moduleClassNames(index_module_default, webComponentNames.Link, [
+		stringClassNames(`variant-${variant}--dsInternalSimulation`, dsInternalSimulation),
+		stringClassNames("variant", variant),
+		booleanClassNames("inline", void 0, inline),
+		booleanClassNames("noUnderline", void 0, noUnderline)
+	]);
+	const actualHref = href || url;
+	const externalUrlProps = actualHref ? getExternalUrlProps(hostname, actualHref, opensInNewTab, nofollow) : {};
+	const tagProps = {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		ref,
+		href: actualHref,
+		download,
+		"aria-label": assistiveText,
+		onClick,
+		className: classNames.join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.Link })
+	};
+	if (as) return cloneElement(as, { ...tagProps }, children);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+		...tagProps,
+		...externalUrlProps,
+		children
+	});
+});
+//#endregion
+export { Link as t };

package/dist/Loader-BMOxdJce.js

@@ -0,0 +1,26 @@
+import { filterAttributesPassedByRadixUIAtRuntime } from "./utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as Spinner } from "./Spinner-Ck8KQA22.js";
+import { forwardRef } from "react";
+import { booleanClassNames, getDatasetProps, moduleClassNames } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import './assets/Loader.css';var index_module_default = {
+	Loader: "Loader__sOe0E",
+	"Loader--normal": "Loader--normal__pJxRq",
+	"Loader--inverted": "Loader--inverted__PauMY"
+};
+//#endregion
+//#region src/components/Loader/Loader.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var Loader = forwardRef(function LoaderComponent({ size, inverted = false, dataset, ...restPropsPassedByRadixUI }, ref) {
+	const classNames = moduleClassNames(index_module_default, webComponentNames.Loader, [booleanClassNames("inverted", "normal", inverted)]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		ref,
+		className: classNames.join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.Loader }),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size })
+	});
+});
+//#endregion
+export { Loader as t };