@preply/ds-web-lib 10.0.0 → 11.1.0

package/dist/components/private/ButtonBase/ButtonBase.js

@@ -1,247 +1,3 @@
-"use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { BUTTON_VARIANT_DEFAULT, BUTTON_SIZE_DEFAULT } from "@preply/ds-core";
-import { useHostname, booleanClassNames, stringClassNames, moduleClassNames, getDatasetProps, getExternalUrlProps, moduleLocals, mapEdgeKeyToStandard } from "@preply/ds-web-core";
-import { forwardRef, useRef, cloneElement } from "react";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import { Spinner } from "../Spinner/Spinner.js";
-import { useMergeRefs } from "../../../utils/useMergeRefs.js";
-import '../../../assets/ButtonBase.css';const ButtonBase$1 = "ButtonBase__lIl-s";
-const styles = {
-  "button-width--width-full": "button-width--width-full__nJNYU",
-  "button-width--width-auto": "button-width--width-auto__gsqlf",
-  "button-width--narrow-l--width-full": "button-width--narrow-l--width-full__y2YjC",
-  "button-width--narrow-l--width-auto": "button-width--narrow-l--width-auto__1qVpi",
-  "button-width--medium-s--width-full": "button-width--medium-s--width-full__IdW9b",
-  "button-width--medium-s--width-auto": "button-width--medium-s--width-auto__hrO4e",
-  "button-width--medium-l--width-full": "button-width--medium-l--width-full__Oc0vB",
-  "button-width--medium-l--width-auto": "button-width--medium-l--width-auto__RNuIr",
-  "button-width--wide-s--width-full": "button-width--wide-s--width-full__-egYf",
-  "button-width--wide-s--width-auto": "button-width--wide-s--width-auto__h-tgw",
-  "button-width--wide-l--width-full": "button-width--wide-l--width-full__OWgAy",
-  "button-width--wide-l--width-auto": "button-width--wide-l--width-auto__orWDN",
-  ButtonBase: ButtonBase$1,
-  "ButtonBase--content": "ButtonBase--content__F9k22",
-  "ButtonBase--is-icon-button": "ButtonBase--is-icon-button__48zlf",
-  "ButtonBase--is-icon-button-size-large": "ButtonBase--is-icon-button-size-large__9HVLW",
-  "ButtonBase--busy": "ButtonBase--busy__XAkcK",
-  "ButtonBase--dsInternalSimulation-focus": "ButtonBase--dsInternalSimulation-focus__8jkWp",
-  "ButtonBase--is-busy": "ButtonBase--is-busy__OpmZd",
-  "ButtonBase--width-full": "ButtonBase--width-full__rPUpd",
-  "ButtonBase--width-auto": "ButtonBase--width-auto__4ebPj",
-  "ButtonBase--narrow-l--width-full": "ButtonBase--narrow-l--width-full__Bwysi",
-  "ButtonBase--narrow-l--width-auto": "ButtonBase--narrow-l--width-auto__r52SI",
-  "ButtonBase--medium-s--width-full": "ButtonBase--medium-s--width-full__nsvpl",
-  "ButtonBase--medium-s--width-auto": "ButtonBase--medium-s--width-auto__hcYr9",
-  "ButtonBase--medium-l--width-full": "ButtonBase--medium-l--width-full__6AYGL",
-  "ButtonBase--medium-l--width-auto": "ButtonBase--medium-l--width-auto__BGHr5",
-  "ButtonBase--wide-s--width-full": "ButtonBase--wide-s--width-full__4w-XJ",
-  "ButtonBase--wide-s--width-auto": "ButtonBase--wide-s--width-auto__5eGoZ",
-  "ButtonBase--wide-l--width-full": "ButtonBase--wide-l--width-full__8LbNM",
-  "ButtonBase--wide-l--width-auto": "ButtonBase--wide-l--width-auto__ys3sp",
-  "ButtonBase--size-large": "ButtonBase--size-large__mHtSn",
-  "ButtonBase--size-medium": "ButtonBase--size-medium__5Qsuj",
-  "ButtonBase--is-icon-button-size-medium": "ButtonBase--is-icon-button-size-medium__HRsbM",
-  "ButtonBase--size-small": "ButtonBase--size-small__Ajd60",
-  "ButtonBase--is-icon-button-size-small": "ButtonBase--is-icon-button-size-small__Me6wm",
-  "ButtonBase--narrow-l--size-large": "ButtonBase--narrow-l--size-large__3gfd8",
-  "ButtonBase--narrow-l--is-icon-button-size-large": "ButtonBase--narrow-l--is-icon-button-size-large__mWjvJ",
-  "ButtonBase--narrow-l--size-medium": "ButtonBase--narrow-l--size-medium__BhXNK",
-  "ButtonBase--narrow-l--is-icon-button-size-medium": "ButtonBase--narrow-l--is-icon-button-size-medium__RWwYm",
-  "ButtonBase--narrow-l--size-small": "ButtonBase--narrow-l--size-small__Vl2nb",
-  "ButtonBase--narrow-l--is-icon-button-size-small": "ButtonBase--narrow-l--is-icon-button-size-small__-dAMj",
-  "ButtonBase--medium-s--size-large": "ButtonBase--medium-s--size-large__x6d3B",
-  "ButtonBase--medium-s--is-icon-button-size-large": "ButtonBase--medium-s--is-icon-button-size-large__54tXt",
-  "ButtonBase--medium-s--size-medium": "ButtonBase--medium-s--size-medium__l27CC",
-  "ButtonBase--medium-s--is-icon-button-size-medium": "ButtonBase--medium-s--is-icon-button-size-medium__zUviu",
-  "ButtonBase--medium-s--size-small": "ButtonBase--medium-s--size-small__49UoI",
-  "ButtonBase--medium-s--is-icon-button-size-small": "ButtonBase--medium-s--is-icon-button-size-small__IvyNG",
-  "ButtonBase--medium-l--size-large": "ButtonBase--medium-l--size-large__HywFW",
-  "ButtonBase--medium-l--is-icon-button-size-large": "ButtonBase--medium-l--is-icon-button-size-large__7IhZP",
-  "ButtonBase--medium-l--size-medium": "ButtonBase--medium-l--size-medium__Tf265",
-  "ButtonBase--medium-l--is-icon-button-size-medium": "ButtonBase--medium-l--is-icon-button-size-medium__bwlaM",
-  "ButtonBase--medium-l--size-small": "ButtonBase--medium-l--size-small__t2X0A",
-  "ButtonBase--medium-l--is-icon-button-size-small": "ButtonBase--medium-l--is-icon-button-size-small__LyC6d",
-  "ButtonBase--wide-s--size-large": "ButtonBase--wide-s--size-large__revq4",
-  "ButtonBase--wide-s--is-icon-button-size-large": "ButtonBase--wide-s--is-icon-button-size-large__ECs3C",
-  "ButtonBase--wide-s--size-medium": "ButtonBase--wide-s--size-medium__LcWNl",
-  "ButtonBase--wide-s--is-icon-button-size-medium": "ButtonBase--wide-s--is-icon-button-size-medium__XgG6m",
-  "ButtonBase--wide-s--size-small": "ButtonBase--wide-s--size-small__zMihk",
-  "ButtonBase--wide-s--is-icon-button-size-small": "ButtonBase--wide-s--is-icon-button-size-small__86pYD",
-  "ButtonBase--wide-l--size-large": "ButtonBase--wide-l--size-large__dkSfM",
-  "ButtonBase--wide-l--is-icon-button-size-large": "ButtonBase--wide-l--is-icon-button-size-large__Exb49",
-  "ButtonBase--wide-l--size-medium": "ButtonBase--wide-l--size-medium__DSTMt",
-  "ButtonBase--wide-l--is-icon-button-size-medium": "ButtonBase--wide-l--is-icon-button-size-medium__wftX5",
-  "ButtonBase--wide-l--size-small": "ButtonBase--wide-l--size-small__1o3ZA",
-  "ButtonBase--wide-l--is-icon-button-size-small": "ButtonBase--wide-l--is-icon-button-size-small__Xqy2p",
-  "ButtonBase--variant-primary": "ButtonBase--variant-primary__EgRuu",
-  "ButtonBase--variant-primary--dsInternalSimulation-hover": "ButtonBase--variant-primary--dsInternalSimulation-hover__qshA-",
-  "ButtonBase--variant-primary--dsInternalSimulation-active": "ButtonBase--variant-primary--dsInternalSimulation-active__RQanZ",
-  "ButtonBase--variant-secondary": "ButtonBase--variant-secondary__GphQb",
-  "ButtonBase--variant-secondary--dsInternalSimulation-hover": "ButtonBase--variant-secondary--dsInternalSimulation-hover__ndGIz",
-  "ButtonBase--variant-secondary--dsInternalSimulation-active": "ButtonBase--variant-secondary--dsInternalSimulation-active__k4I5F",
-  "ButtonBase--variant-tertiary": "ButtonBase--variant-tertiary__O9c3W",
-  "ButtonBase--variant-tertiary--dsInternalSimulation-hover": "ButtonBase--variant-tertiary--dsInternalSimulation-hover__4-xa1",
-  "ButtonBase--variant-tertiary--dsInternalSimulation-active": "ButtonBase--variant-tertiary--dsInternalSimulation-active__-10gZ",
-  "ButtonBase--variant-quaternary": "ButtonBase--variant-quaternary__pLeI5",
-  "ButtonBase--variant-quaternary--dsInternalSimulation-hover": "ButtonBase--variant-quaternary--dsInternalSimulation-hover__ED-s6",
-  "ButtonBase--variant-quaternary--dsInternalSimulation-active": "ButtonBase--variant-quaternary--dsInternalSimulation-active__4fmhU",
-  "ButtonBase--variant-ghost": "ButtonBase--variant-ghost__ezCgl",
-  "ButtonBase--variant-ghost--dsInternalSimulation-hover": "ButtonBase--variant-ghost--dsInternalSimulation-hover__N-vL2",
-  "ButtonBase--variant-ghost--dsInternalSimulation-active": "ButtonBase--variant-ghost--dsInternalSimulation-active__ap8Wb",
-  "ButtonBase--variant-ghost--is-selected": "ButtonBase--variant-ghost--is-selected__vHgdy",
-  "ButtonBase--variant-critical": "ButtonBase--variant-critical__0FoGb",
-  "ButtonBase--variant-critical--dsInternalSimulation-hover": "ButtonBase--variant-critical--dsInternalSimulation-hover__DcuKz",
-  "ButtonBase--variant-critical--dsInternalSimulation-active": "ButtonBase--variant-critical--dsInternalSimulation-active__-D3p9",
-  "ButtonBase--variant-onColor": "ButtonBase--variant-onColor__gDgiZ",
-  "ButtonBase--variant-onColor--dsInternalSimulation-hover": "ButtonBase--variant-onColor--dsInternalSimulation-hover__GtnDL",
-  "ButtonBase--variant-onColor--dsInternalSimulation-active": "ButtonBase--variant-onColor--dsInternalSimulation-active__4ca8i",
-  "ButtonBase--variant-classroom": "ButtonBase--variant-classroom__HVQMA",
-  "ButtonBase--variant-classroom--dsInternalSimulation-hover": "ButtonBase--variant-classroom--dsInternalSimulation-hover__h2nxf",
-  "ButtonBase--variant-classroom--dsInternalSimulation-active": "ButtonBase--variant-classroom--dsInternalSimulation-active__3uCrs",
-  "ButtonBase--variant-classroom--is-selected": "ButtonBase--variant-classroom--is-selected__o47f2",
-  "ButtonBase--variant-primaryB2b": "ButtonBase--variant-primaryB2b__mqIFn",
-  "ButtonBase--variant-primaryB2b--dsInternalSimulation-hover": "ButtonBase--variant-primaryB2b--dsInternalSimulation-hover__s-6Io",
-  "ButtonBase--variant-primaryB2b--dsInternalSimulation-active": "ButtonBase--variant-primaryB2b--dsInternalSimulation-active__5Zy8P",
-  "ButtonBase--variant-primaryTutor": "ButtonBase--variant-primaryTutor__0m-N0",
-  "ButtonBase--variant-primaryTutor--dsInternalSimulation-hover": "ButtonBase--variant-primaryTutor--dsInternalSimulation-hover__-St95",
-  "ButtonBase--variant-primaryTutor--dsInternalSimulation-active": "ButtonBase--variant-primaryTutor--dsInternalSimulation-active__U8f46",
-  "ButtonBase--variant-inverted": "ButtonBase--variant-inverted__espSx",
-  "ButtonBase--variant-inverted--dsInternalSimulation-hover": "ButtonBase--variant-inverted--dsInternalSimulation-hover__2QLK5",
-  "ButtonBase--variant-inverted--dsInternalSimulation-active": "ButtonBase--variant-inverted--dsInternalSimulation-active__XPR7p",
-  "ButtonBase--variant-newFeature": "ButtonBase--variant-newFeature__kiL3X",
-  "ButtonBase--variant-newFeature--dsInternalSimulation-hover": "ButtonBase--variant-newFeature--dsInternalSimulation-hover__MJYRN",
-  "ButtonBase--variant-newFeature--dsInternalSimulation-active": "ButtonBase--variant-newFeature--dsInternalSimulation-active__eVKIo",
-  "ButtonBase--variant-ai": "ButtonBase--variant-ai__QQ5F5",
-  "ButtonBase--variant-ai--dsInternalSimulation-hover": "ButtonBase--variant-ai--dsInternalSimulation-hover__sEFmg",
-  "ButtonBase--variant-ai--dsInternalSimulation-active": "ButtonBase--variant-ai--dsInternalSimulation-active__wLX6u",
-  "ButtonBase--no-wrap": "ButtonBase--no-wrap__U0fYw"
-};
-const BUTTON_BASE = "ButtonBase";
-const isSelectable = (arg) => Object.prototype.hasOwnProperty.call(arg, "selected");
-const renderContent = ({
-  children,
-  busy
-}) => {
-  const contentClassNames = [...moduleLocals(styles, BUTTON_BASE, ["content"])];
-  const busyClassNames = [...moduleLocals(styles, BUTTON_BASE, ["busy"])];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: contentClassNames.join(" "), children }),
-    busy && /* @__PURE__ */ jsx("span", { className: busyClassNames.join(" "), children: /* @__PURE__ */ jsx(Spinner, {}) })
-  ] });
-};
-const ButtonBase = forwardRef(function ButtonBaseComponent(props, forwardedRef) {
-  const {
-    id,
-    variant = BUTTON_VARIANT_DEFAULT,
-    size = BUTTON_SIZE_DEFAULT,
-    fullWidth = false,
-    wrap = false,
-    href,
-    download,
-    opensInNewTab,
-    nofollow,
-    submitsForm,
-    assistiveText,
-    onClick,
-    onKeyDown,
-    onKeyUp,
-    onMouseDown,
-    onMouseUp,
-    onMouseEnter,
-    onMouseMove,
-    onPointerDown,
-    onPointerEnter,
-    disabled,
-    busy,
-    isIconButton,
-    as,
-    url,
-    a11yLabel,
-    dataset,
-    children,
-    dsInternalSimulation,
-    preplyDsComponent,
-    className,
-    ...restPropsPassedByRadixUI
-  } = props;
-  const {
-    selected
-  } = isSelectable(props) ? props : {
-    selected: void 0
-  };
-  const hostname = useHostname();
-  const innerRef = useRef(null);
-  const ref = useMergeRefs(innerRef, forwardedRef);
-  const handleClick = (event) => {
-    if (disabled || busy) {
-      event.preventDefault();
-    }
-    onClick == null ? void 0 : onClick(event);
-  };
-  const handleKeyPress = (event) => {
-    var _a;
-    const key = mapEdgeKeyToStandard(event.key);
-    if (key === " " || key === "Enter") {
-      event.preventDefault();
-      (_a = innerRef.current) == null ? void 0 : _a.click();
-    }
-  };
-  const dsInternalSimulationClassname = dsInternalSimulation === "focus" ? (
-    // The focus management is centralized in ButtonBase and not variant-dependent
-    booleanClassNames(`dsInternalSimulation-focus`, void 0, true)
-  ) : stringClassNames(`variant-${variant}--dsInternalSimulation`, dsInternalSimulation);
-  const classNames = moduleClassNames(styles, BUTTON_BASE, [dsInternalSimulationClassname, stringClassNames("variant", variant), stringClassNames("size", size), isIconButton ? stringClassNames("is-icon-button-size", size) : [], booleanClassNames(void 0, "no-wrap", wrap), booleanClassNames("width-full", "width-auto", fullWidth), booleanClassNames("is-busy", void 0, busy), booleanClassNames("is-icon-button", void 0, isIconButton), booleanClassNames(`variant-${variant}--is-selected`, void 0, selected)]);
-  const buttonProps = {
-    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
-    ...getDatasetProps(dataset, {
-      preplyDsComponent
-    }),
-    className: [...classNames, className].join(" "),
-    "aria-label": assistiveText || a11yLabel,
-    onClick: handleClick,
-    disabled,
-    "aria-disabled": disabled || busy ? true : void 0,
-    ref,
-    id,
-    onKeyDown,
-    onKeyUp,
-    onMouseDown,
-    onMouseUp,
-    onMouseEnter,
-    onMouseMove,
-    onPointerDown,
-    onPointerEnter
-  };
-  const actualHref = href || url;
-  const linkProps = {
-    ...buttonProps,
-    download,
-    ref,
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    href: actualHref,
-    onKeyDown: handleKeyPress
-  };
-  if (actualHref) {
-    return /* @__PURE__ */ jsx("a", { ...linkProps, ...getExternalUrlProps(hostname, actualHref, opensInNewTab, nofollow), children: renderContent({
-      children,
-      busy
-    }) });
-  }
-  if (as) {
-    return cloneElement(as, {
-      ...linkProps
-    }, renderContent({
-      children,
-      busy
-    }));
-  }
-  return /* @__PURE__ */ jsx("button", { ...buttonProps, type: submitsForm ? "submit" : "button", children: renderContent({
-    children,
-    busy
-  }) });
-});
-export {
-  ButtonBase
-};
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { t as ButtonBase } from "../../../ButtonBase-8eUyTWxX.js";
+export { ButtonBase };

package/dist/components/private/Input/Input.js

@@ -1,23 +1,31 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { n as Input_module_default, t as InputContainer } from "../../../InputContainer-CzzuOe_p.js";
 import { forwardRef } from "react";
-import { I as InputContainer, s as styles } from "../../../InputContainer-oHJlLWIi.js";
 import { getDatasetProps } from "@preply/ds-web-core";
-const Input = forwardRef(function InputComponent({
-  button,
-  icon,
-  dataset,
-  onChange,
-  onValueChange,
-  ...props
-}, ref) {
-  const datasetProps = getDatasetProps(dataset);
-  const handleChange = (e) => {
-    onChange == null ? void 0 : onChange(e);
-    onValueChange == null ? void 0 : onValueChange(e.target.value);
-  };
-  return /* @__PURE__ */ jsx(InputContainer, { button, icon, children: /* @__PURE__ */ jsx("input", { ...datasetProps, ...props, ref, onChange: handleChange, className: styles.input }) });
+//#region src/components/private/Input/Input.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* A component to render input with optional icon and button.
+* For internal use only.
+*/
+var Input = forwardRef(function InputComponent({ button, icon, dataset, onChange, onValueChange, ...props }, ref) {
+	const datasetProps = getDatasetProps(dataset);
+	const handleChange = (e) => {
+		onChange === null || onChange === void 0 || onChange(e);
+		onValueChange === null || onValueChange === void 0 || onValueChange(e.target.value);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputContainer, {
+		button,
+		icon,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			...datasetProps,
+			...props,
+			ref,
+			onChange: handleChange,
+			className: Input_module_default.input
+		})
+	});
 });
-export {
-  Input
-};
+//#endregion
+export { Input };

package/dist/components/private/Input/InputContainer.js

@@ -1,5 +1,3 @@
-import "react/jsx-runtime";
-import { I } from "../../../InputContainer-oHJlLWIi.js";
-export {
-  I as InputContainer
-};
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { t as InputContainer } from "../../../InputContainer-CzzuOe_p.js";
+export { InputContainer };

package/dist/components/private/Input/Textarea.js

@@ -1,24 +1,28 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { n as Input_module_default, t as InputContainer } from "../../../InputContainer-CzzuOe_p.js";
 import { forwardRef } from "react";
-import { I as InputContainer, s as styles } from "../../../InputContainer-oHJlLWIi.js";
 import { getDatasetProps } from "@preply/ds-web-core";
-const Textarea = forwardRef(function TextareaComponent({
-  dataset,
-  onChange,
-  onValueChange,
-  resize = "vertical",
-  ...props
-}, ref) {
-  const datasetProps = getDatasetProps(dataset);
-  const handleChange = (e) => {
-    onChange == null ? void 0 : onChange(e);
-    onValueChange == null ? void 0 : onValueChange(e.target.value);
-  };
-  return /* @__PURE__ */ jsx(InputContainer, { children: /* @__PURE__ */ jsx("textarea", { ...datasetProps, ...props, onChange: handleChange, ref, className: styles.input, style: {
-    resize
-  } }) });
+//#region src/components/private/Input/Textarea.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* A component to render a textarea.
+* For internal use only.
+*/
+var Textarea = forwardRef(function TextareaComponent({ dataset, onChange, onValueChange, resize = "vertical", ...props }, ref) {
+	const datasetProps = getDatasetProps(dataset);
+	const handleChange = (e) => {
+		onChange === null || onChange === void 0 || onChange(e);
+		onValueChange === null || onValueChange === void 0 || onValueChange(e.target.value);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+		...datasetProps,
+		...props,
+		onChange: handleChange,
+		ref,
+		className: Input_module_default.input,
+		style: { resize }
+	}) });
 });
-export {
-  Textarea
-};
+//#endregion
+export { Textarea };

package/dist/components/private/Input/index.js

@@ -1,6 +1,4 @@
+import "../../../jsx-runtime-i4KUlhDu.js";
 import { Input } from "./Input.js";
 import { Textarea } from "./Textarea.js";
-export {
-  Input,
-  Textarea
-};
+export { Input, Textarea };

package/dist/components/private/Spinner/Spinner.js

@@ -1,52 +1,3 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { SPINNER_SIZE_DEFAULT } from "@preply/ds-core";
-import { moduleClassNames, stringClassNames, moduleLocals } from "@preply/ds-web-core";
-import * as React from "react";
-import { forwardRef } from "react";
-import '../../../assets/Spinner.css';const Spinner$1 = "Spinner__U3f6H";
-const spin = "spin__6opuF";
-const styles = {
-  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
-};
-const SvgEllipsis = ({
-  title,
-  titleId,
-  ...props
-}, ref) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ref, "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.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" }));
-const ForwardRef$1 = forwardRef(SvgEllipsis);
-const SvgSpinner = ({
-  title,
-  titleId,
-  ...props
-}, ref) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", fill: "none", ref, "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_1785_4234)" }, /* @__PURE__ */ React.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.createElement("path", { opacity: 0.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.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_1785_4234" }, /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "white" }))));
-const ForwardRef = forwardRef(SvgSpinner);
-const SPINNER = "Spinner";
-const Spinner = ({
-  size = SPINNER_SIZE_DEFAULT
-}) => {
-  const classNames = moduleClassNames(styles, SPINNER, [stringClassNames("size", size)]);
-  const animatedClassNames = [...moduleLocals(styles, SPINNER, ["animated"])];
-  const staticClassNames = [...moduleLocals(styles, SPINNER, ["static"])];
-  return /* @__PURE__ */ jsxs("span", { className: classNames.join(" "), children: [
-    /* @__PURE__ */ jsx("span", { className: animatedClassNames.join(" "), children: /* @__PURE__ */ jsx(ForwardRef, {}) }),
-    /* @__PURE__ */ jsx("span", { className: staticClassNames.join(" "), children: /* @__PURE__ */ jsx(ForwardRef$1, {}) })
-  ] });
-};
-export {
-  Spinner
-};
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { t as Spinner } from "../../../Spinner-Ck8KQA22.js";
+export { Spinner };

package/dist/components/private/VisuallyHidden/VisuallyHidden.js

@@ -1,15 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import '../../../assets/VisuallyHidden.css';const visuallyHidden = "visuallyHidden__u7xQ9";
-const styles = {
-  visuallyHidden
-};
-function VisuallyHidden({
-  as = "span",
-  children
-}) {
-  const Component = as != null ? as : "span";
-  return /* @__PURE__ */ jsx(Component, { className: styles.visuallyHidden, children });
-}
-export {
-  VisuallyHidden
-};
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { t as VisuallyHidden } from "../../../VisuallyHidden-CtcHcZCK.js";
+export { VisuallyHidden };

package/dist/components-BIYP8wHJ.js

@@ -0,0 +1,200 @@
+"use client";
+import { t as Icon } from "./Icon-CixAeOSd.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
+import { t as Text } from "./Text-CaOF75Z-.js";
+import { t as Button } from "./Button-C35BZJZT.js";
+import { r as AlertBanner_module_default } from "./AlertBannerProvider-Cf7w9AOq.js";
+import { AlertBannerComponentContext, AlertBannerRoot } from "./components/AlertBanner/primitives/AlertBannerRoot.js";
+import { AlertBannerIcon } from "./components/AlertBanner/primitives/AlertBannerIcon.js";
+import { t as VisuallyHidden } from "./VisuallyHidden-CtcHcZCK.js";
+import { t as IconButton } from "./IconButton-BPKpgfep.js";
+import { Children, cloneElement, forwardRef, isValidElement, useContext } from "react";
+import { getDatasetProps, moduleClassNames } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { usePortalElement as usePortalElement$1 } from "@preply/ds-web-root";
+import { FormattedMessage } from "react-intl";
+import './assets/components.css';//#region src/components/AlertBanner/primitives/AlertBannerText.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var alertBannerA11yPrefixMap = {
+	critical: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedMessage, {
+		id: "preply-ds.alert-banner.critical-prefix",
+		defaultMessage: "Alert:",
+		description: "Prefix every alert banner shown to the user. It's announced by screen readers as 'Alert: 'the alert message (for instance: 'Alert: We can't renew your subscription.')."
+	}),
+	warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedMessage, {
+		id: "preply-ds.alert-banner.warning-prefix",
+		defaultMessage: "Warning:",
+		description: "Prefix every warning banner shown to the user. It's announced by screen readers as 'Warning: 'the alert message (for instance: 'Warning: Your credit card is about to expire.')."
+	}),
+	positive: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedMessage, {
+		id: "preply-ds.alert-banner.positive-prefix",
+		defaultMessage: "Update:",
+		description: "Prefix every positive banner shown to the user. It's announced by screen readers as 'Warning: 'the alert message (for instance: 'Warning: Your subscription has been renewed successfully.')."
+	})
+};
+/**
+* The AlertBannerText is a container which defaults to displaying a `Text` child with a
+* `default-regular` variant, which can be overridden with the `children` prop. The passed text is
+* also prefixed with a visually hidden text to allow screen reader user to remind of the existence
+* of the region rendered by `AlertBannerProvider`.
+*
+* @example
+* <AlertBannerText>
+*   Alert banner message goes here.
+* </AlertBannerText>
+*
+* @example
+* // Set `Text` props
+* <AlertBannerText tag="span">
+*   Alert banner message goes here.
+* </AlertBannerText>
+*
+* @example
+* // Override `Text` `variant` prop
+* <AlertBannerText variant="default-semibold">
+*   Alert banner message goes here.
+* </AlertBannerText>
+*
+* @example
+* // Override styles via `className` prop
+* <AlertBannerText className={myCustomStyles.text}>
+*   Alert banner message goes here.
+* </AlertBannerText>
+*
+* @see AlertBannerProvider
+*/
+var AlertBannerText = forwardRef(function AlertBannerText({ className, children, ...props }, ref) {
+	const { variant } = useContext(AlertBannerComponentContext);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+		ref,
+		variant: "default-regular",
+		accent: "primary",
+		className: [AlertBanner_module_default.description, className].filter(Boolean).join(" "),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(VisuallyHidden, { children: alertBannerA11yPrefixMap[variant] }),
+			" ",
+			children
+		]
+	});
+});
+//#endregion
+//#region src/components/AlertBanner/primitives/AlertBannerAction.tsx
+var buttonDefaultProps = {
+	variant: "secondary",
+	size: "small",
+	wrap: true,
+	fullWidth: {
+		_: true,
+		"medium-l": false
+	}
+};
+/**
+* The AlertBannerAction is a container that sets defaults when Button or IconButton are passed.
+*
+* @example
+* <AlertBannerAction className={myCustomStyle}>
+*   <Button {...} />
+* </AlertBannerAction>
+*
+* If you want the default action but need to pass your own props to it, you
+* can use the `DefaultAlertBannerAction` component.
+*
+* @example
+* <AlertBannerAction>
+*    <Button
+*      leadingSvgIcon={MyCustomIcon}
+*    >
+*       My custom text
+*    </Button
+* </AlertBannerAction>
+*
+* @see Button
+* @see IconButton
+*/
+var AlertBannerAction = forwardRef(function AlertBannerAction({ className, children, ...props }, ref) {
+	const classNames = [AlertBanner_module_default.action, className].filter(Boolean).join(" ");
+	const patchedChildren = Children.map(children, (child) => {
+		if (!isDsButton(child)) return child;
+		return cloneElement(child, {
+			...buttonDefaultProps,
+			...child.props,
+			ref,
+			...props
+		});
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: classNames,
+		"data-preply-ds-component": webComponentNames.AlertBannerAction,
+		children: patchedChildren
+	});
+});
+function isDsButton(node) {
+	if (!isValidElement(node)) return false;
+	return node.type === Button || node.type === IconButton;
+}
+//#endregion
+//#region src/components/AlertBanner/AlertBanner.tsx
+/**
+* The Alert Banner communicates important and time-sensitive messages that require user attention.
+*
+* From an accessibility perspective, the description is prefixed to announce the importance of the
+* banner.
+*
+* @example
+* <AlertBanner
+*   variant="alert"
+*   description="Failed to renew the subscription."
+*   actionLabel="Try again"
+*   actionOnClick={retryPayment}
+* />
+*/
+var AlertBanner = (props) => {
+	const { variant, description, action, dataset } = props;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertBannerRoot, {
+		variant,
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.AlertBanner }),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertBannerIcon, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertBannerText, { children: description }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertBannerAction, { children: action })
+		]
+	});
+};
+var index_module_default = {
+	IconTile: "IconTile__JN1Mo",
+	"IconTile--size-small": "IconTile--size-small__8PuLN",
+	"IconTile--size-base": "IconTile--size-base__8cobE",
+	"IconTile--size-medium": "IconTile--size-medium__AYnun",
+	"IconTile--size-large": "IconTile--size-large__R159S",
+	"IconTile--tone-neutral": "IconTile--tone-neutral__RakY4",
+	"IconTile--tone-info": "IconTile--tone-info__yqu8Y",
+	"IconTile--tone-ai": "IconTile--tone-ai__IsgQT",
+	"IconTile--tone-positive": "IconTile--tone-positive__5fQ5C",
+	"IconTile--tone-warning": "IconTile--tone-warning__wCeLx",
+	"IconTile--tone-critical": "IconTile--tone-critical__FeCE3"
+};
+//#endregion
+//#region src/components/IconTile/IconTile.tsx
+function getIconSize(size) {
+	switch (size) {
+		case "small": return "16";
+		case "medium": return "32";
+		case "large": return "48";
+	}
+	return "24";
+}
+var IconTile = forwardRef(function IconComponent({ size = "base", tone = "neutral", dataset, ...iconProps }, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: moduleClassNames(index_module_default, webComponentNames.IconTile, [`size-${size}`, `tone-${tone}`]).join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.IconTile }),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+			...iconProps,
+			accent: "primary",
+			size: getIconSize(size),
+			ref
+		})
+	});
+});
+//#endregion
+export { AlertBannerText as a, AlertBannerAction as i, IconTile as n, AlertBanner as r, usePortalElement$1 as t };