@preply/ds-web-lib 10.0.0 → 11.1.0

package/dist/components/LayoutFlex/tests/Relative.js

@@ -1,76 +1,61 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { LayoutFlex } from "../LayoutFlex.js";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as LayoutFlex } from "../../../LayoutFlex-e9auDvWD.js";
+import "react";
+//#region src/components/LayoutFlex/tests/Relative.tsx
+var import_jsx_runtime = require_jsx_runtime();
 function Div1(props) {
-  return /* @__PURE__ */ jsx("div", { style: {
-    background: "yellow"
-  }, children: props.children });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		style: { background: "yellow" },
+		children: props.children
+	});
 }
 function Div2(props) {
-  return /* @__PURE__ */ jsx("div", { style: {
-    background: "orange"
-  }, children: props.children });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		style: { background: "orange" },
+		children: props.children
+	});
 }
 function RelativeTrue() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: "RelativeTrue" }),
-    /* @__PURE__ */ jsxs(LayoutFlex, { dataset: {
-      testid: "RelativeTrue"
-    }, relative: true, children: [
-      /* @__PURE__ */ jsx(Div1, { children: "a" }),
-      /* @__PURE__ */ jsx(Div2, { children: "b" })
-    ] })
-  ] });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "RelativeTrue" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LayoutFlex, {
+		dataset: { testid: "RelativeTrue" },
+		relative: true,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div1, { children: "a" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div2, { children: "b" })]
+	})] });
 }
 function RelativeFalse() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: "RelativeFalse" }),
-    /* @__PURE__ */ jsxs(LayoutFlex, { dataset: {
-      testid: "RelativeFalse"
-    }, relative: false, children: [
-      /* @__PURE__ */ jsx(Div1, { children: "a" }),
-      /* @__PURE__ */ jsx(Div2, { children: "b" })
-    ] })
-  ] });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "RelativeFalse" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LayoutFlex, {
+		dataset: { testid: "RelativeFalse" },
+		relative: false,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div1, { children: "a" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div2, { children: "b" })]
+	})] });
 }
 function RelativeResponsive() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: "RelativeResponsive" }),
-    /* @__PURE__ */ jsxs(LayoutFlex, { dataset: {
-      testid: "RelativeResponsive"
-    }, relative: {
-      _: true,
-      "narrow-l": false,
-      "medium-s": true,
-      "medium-l": false,
-      "wide-s": true,
-      "wide-l": false
-    }, children: [
-      /* @__PURE__ */ jsx(Div1, { children: "a" }),
-      /* @__PURE__ */ jsx(Div2, { children: "b" })
-    ] })
-  ] });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "RelativeResponsive" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LayoutFlex, {
+		dataset: { testid: "RelativeResponsive" },
+		relative: {
+			_: true,
+			"narrow-l": false,
+			"medium-s": true,
+			"medium-l": false,
+			"wide-s": true,
+			"wide-l": false
+		},
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div1, { children: "a" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div2, { children: "b" })]
+	})] });
 }
 function RelativeResponsiveInvertedOrder() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: "RelativeResponsiveInvertedOrder" }),
-    /* @__PURE__ */ jsxs(LayoutFlex, { dataset: {
-      testid: "RelativeResponsiveInvertedOrder"
-    }, relative: {
-      "wide-l": false,
-      "wide-s": true,
-      "medium-l": false,
-      "medium-s": true,
-      "narrow-l": false,
-      _: true
-    }, children: [
-      /* @__PURE__ */ jsx(Div1, { children: "a" }),
-      /* @__PURE__ */ jsx(Div2, { children: "b" })
-    ] })
-  ] });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "RelativeResponsiveInvertedOrder" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LayoutFlex, {
+		dataset: { testid: "RelativeResponsiveInvertedOrder" },
+		relative: {
+			"wide-l": false,
+			"wide-s": true,
+			"medium-l": false,
+			"medium-s": true,
+			"narrow-l": false,
+			_: true
+		},
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div1, { children: "a" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Div2, { children: "b" })]
+	})] });
 }
-export {
-  RelativeFalse,
-  RelativeResponsive,
-  RelativeResponsiveInvertedOrder,
-  RelativeTrue
-};
+//#endregion
+export { RelativeFalse, RelativeResponsive, RelativeResponsiveInvertedOrder, RelativeTrue };

package/dist/components/LayoutFlexItem/LayoutFlexItem.js

@@ -1,54 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { moduleClassNames, booleanClassNames, getDatasetProps } from "@preply/ds-web-core";
-import { forwardRef } from "react";
-import { getAlignSelfClassNames } from "../../shared-styles/align-self/align-self.js";
-import { getLayoutHideClassnames } from "../../shared-styles/layout-hide/layout-hide.js";
-import { getLayoutRelativeClassnames } from "../../shared-styles/layout-relative/layout-relative.js";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import '../../assets/LayoutFlexItem.css';const LayoutFlexItem$1 = "LayoutFlexItem__0eYcj";
-const styles = {
-  LayoutFlexItem: LayoutFlexItem$1,
-  "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"
-};
-const LayoutFlexItem = forwardRef(function LayoutFlexItemComponent({
-  children,
-  alignSelf,
-  stretch = false,
-  tag,
-  hide,
-  relative,
-  dataset,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const classNames = moduleClassNames(styles, 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];
-  const Tag = tag != null ? tag : LAYOUT_TAG_DEFAULT;
-  const props = {
-    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
-    ref,
-    className: allClassNames.join(" "),
-    ...getDatasetProps(dataset, {
-      preplyDsComponent: webComponentNames.LayoutFlexItem
-    })
-  };
-  return /* @__PURE__ */ jsx(Tag, { ...props, children });
-});
-export {
-  LayoutFlexItem
-};
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as LayoutFlexItem } from "../../LayoutFlexItem-D9ziMmHe.js";
+export { LayoutFlexItem };

package/dist/components/LayoutGrid/LayoutGrid.js

@@ -1,37 +1,29 @@
-import { jsx } from "react/jsx-runtime";
-import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { getDatasetProps } from "@preply/ds-web-core";
-import { forwardRef } from "react";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
 import { getLayoutGridResponsiveColumnsStyles } from "../../shared-styles/layout-grid-responsive-columns/layout-grid-responsive-columns.js";
 import { getLayoutGridClassNames } from "../../shared-styles/layout-grid/layout-grid.js";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-const LayoutGrid = forwardRef(function LayoutGridComponent({
-  dataset,
-  children,
-  ...layoutGridBasePropsAndPropsPassedByRadixUI
-}, ref) {
-  const {
-    tag: Tag = LAYOUT_TAG_DEFAULT,
-    columns
-  } = layoutGridBasePropsAndPropsPassedByRadixUI;
-  const classNames = getLayoutGridClassNames("grid", layoutGridBasePropsAndPropsPassedByRadixUI);
-  const {
-    style,
-    classNames: columnClassNames
-  } = getLayoutGridResponsiveColumnsStyles(columns);
-  const allClassNames = [...classNames, ...columnClassNames];
-  const props = {
-    ...filterAttributesPassedByRadixUIAtRuntime(layoutGridBasePropsAndPropsPassedByRadixUI),
-    ref,
-    className: allClassNames.join(" "),
-    style,
-    ...getDatasetProps(dataset, {
-      preplyDsComponent: webComponentNames.LayoutGrid
-    })
-  };
-  return /* @__PURE__ */ jsx(Tag, { ...props, children });
+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";
+//#region src/components/LayoutGrid/LayoutGrid.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* A CSS `grid` wrapper.
+*/
+var LayoutGrid = forwardRef(function LayoutGridComponent({ dataset, children, ...layoutGridBasePropsAndPropsPassedByRadixUI }, ref) {
+	const { tag: Tag = LAYOUT_TAG_DEFAULT, columns } = layoutGridBasePropsAndPropsPassedByRadixUI;
+	const classNames = getLayoutGridClassNames("grid", layoutGridBasePropsAndPropsPassedByRadixUI);
+	const { style, classNames: columnClassNames } = getLayoutGridResponsiveColumnsStyles(columns);
+	const allClassNames = [...classNames, ...columnClassNames];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, {
+		...filterAttributesPassedByRadixUIAtRuntime(layoutGridBasePropsAndPropsPassedByRadixUI),
+		ref,
+		className: allClassNames.join(" "),
+		style,
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.LayoutGrid }),
+		children
+	});
 });
-export {
-  LayoutGrid
-};
+//#endregion
+export { LayoutGrid };

package/dist/components/LayoutGridItem/LayoutGridItem.js

@@ -1,41 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { moduleClassNames, getDatasetProps } from "@preply/ds-web-core";
-import { forwardRef } from "react";
-import { getAlignSelfClassNames } from "../../shared-styles/align-self/align-self.js";
-import { getLayoutHideClassnames } from "../../shared-styles/layout-hide/layout-hide.js";
-import { getLayoutRelativeClassnames } from "../../shared-styles/layout-relative/layout-relative.js";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import '../../assets/LayoutGridItem.css';const LayoutGridItem$1 = "LayoutGridItem__HXV4b";
-const styles = {
-  LayoutGridItem: LayoutGridItem$1
-};
-const LayoutGridItem = forwardRef(function LayoutGridItemComponent({
-  children,
-  alignSelf,
-  tag,
-  hide,
-  relative,
-  dataset,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const classNames = moduleClassNames(styles, webComponentNames.LayoutGridItem, []);
-  const alignSelfClassNames = getAlignSelfClassNames(alignSelf);
-  const hideClassNames = getLayoutHideClassnames(hide);
-  const relativeClassNames = getLayoutRelativeClassnames(relative);
-  const allClassNames = [...classNames, ...alignSelfClassNames, ...hideClassNames, ...relativeClassNames];
-  const Tag = tag != null ? tag : LAYOUT_TAG_DEFAULT;
-  const props = {
-    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
-    ref,
-    className: allClassNames.join(" "),
-    ...getDatasetProps(dataset, {
-      preplyDsComponent: webComponentNames.LayoutGridItem
-    })
-  };
-  return /* @__PURE__ */ jsx(Tag, { ...props, children });
-});
-export {
-  LayoutGridItem
-};
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as LayoutGridItem } from "../../LayoutGridItem-Q8Lnvrri.js";
+export { LayoutGridItem };

package/dist/components/Link/Link.js

@@ -1,72 +1,3 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { LINK_VARIANT_DEFAULT } from "@preply/ds-core";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { useHostname, moduleClassNames, stringClassNames, booleanClassNames, getExternalUrlProps, getDatasetProps } from "@preply/ds-web-core";
-import { forwardRef, cloneElement } from "react";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import '../../assets/Link.css';const Link$1 = "Link__0oP-l";
-const styles = {
-  Link: Link$1,
-  "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"
-};
-const 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(styles, 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__ */ jsx("a", { ...tagProps, ...externalUrlProps, children });
-});
-export {
-  Link
-};
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as Link } from "../../Link-CdoJVeER.js";
+export { Link };

package/dist/components/Loader/Loader.js

@@ -1,32 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { moduleClassNames, booleanClassNames, getDatasetProps } from "@preply/ds-web-core";
-import { forwardRef } from "react";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import { Spinner } from "../private/Spinner/Spinner.js";
-import '../../assets/Loader.css';const Loader$1 = "Loader__sOe0E";
-const styles = {
-  Loader: Loader$1,
-  "Loader--normal": "Loader--normal__pJxRq",
-  "Loader--inverted": "Loader--inverted__PauMY"
-};
-const Loader = forwardRef(function LoaderComponent({
-  size,
-  inverted = false,
-  dataset,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const classNames = moduleClassNames(styles, webComponentNames.Loader, [booleanClassNames("inverted", "normal", inverted)]);
-  const props = {
-    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
-    ref,
-    className: classNames.join(" "),
-    ...getDatasetProps(dataset, {
-      preplyDsComponent: webComponentNames.Loader
-    })
-  };
-  return /* @__PURE__ */ jsx("span", { ...props, children: /* @__PURE__ */ jsx(Spinner, { size }) });
-});
-export {
-  Loader
-};
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as Loader } from "../../Loader-BMOxdJce.js";
+export { Loader };

package/dist/components/NumberField/NumberField.js

@@ -1,39 +1,37 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { FormControl } from "../FormControl/FormControl.js";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import { t as FormControl } from "../../FormControl-qnbQL1iF.js";
 import { Input } from "../private/Input/Input.js";
-import "../private/Input/Textarea.js";
+import { forwardRef } from "react";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-const NumberField = forwardRef(function NumberField2({
-  id,
-  label,
-  description,
-  error,
-  required,
-  inputDataset,
-  dataset,
-  hideLabel,
-  onClick,
-  onValueChange,
-  onChange,
-  hasError,
-  useLegacyRequiredLabel,
-  // @ts-expect-error: removing className from `props`
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  className,
-  // @ts-expect-error: removing style from `props`
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  style,
-  ...props
-}, ref) {
-  const handleChange = (e) => {
-    onChange == null ? void 0 : onChange(e);
-    const value = e.target.value;
-    onValueChange == null ? void 0 : onValueChange(value ? Number(value) : void 0);
-  };
-  return /* @__PURE__ */ jsx(FormControl, { id, label, description, error, hasError, required, dataset, hideLabel, onClick, useLegacyRequiredLabel, preplyDsComponent: webComponentNames.NumberField, children: /* @__PURE__ */ jsx(Input, { ...props, type: "number", ref, dataset: inputDataset, onChange: handleChange }) });
+//#region src/components/NumberField/NumberField.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var NumberField = forwardRef(function NumberField({ id, label, description, error, required, inputDataset, dataset, hideLabel, onClick, onValueChange, onChange, hasError, useLegacyRequiredLabel, className, style, ...props }, ref) {
+	const handleChange = (e) => {
+		onChange === null || onChange === void 0 || onChange(e);
+		const value = e.target.value;
+		onValueChange === null || onValueChange === void 0 || onValueChange(value ? Number(value) : void 0);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormControl, {
+		id,
+		label,
+		description,
+		error,
+		hasError,
+		required,
+		dataset,
+		hideLabel,
+		onClick,
+		useLegacyRequiredLabel,
+		preplyDsComponent: webComponentNames.NumberField,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+			...props,
+			type: "number",
+			ref,
+			dataset: inputDataset,
+			onChange: handleChange
+		})
+	});
 });
-export {
-  NumberField
-};
+//#endregion
+export { NumberField };

package/dist/components/ObserveIntersection/ObserveIntersection.js

@@ -1,45 +1,44 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import { useEffect, useRef } from "react";
 import { getDatasetProps } from "@preply/ds-web-core";
-import { useRef, useEffect } from "react";
-const ObserveIntersection = ({
-  onIntersect,
-  once,
-  threshold,
-  tag,
-  dataset,
-  children
-}) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    const callback = ([entry], obs) => {
-      if (entry.isIntersecting) {
-        onIntersect();
-        if (once && ref.current) {
-          obs.unobserve(ref.current);
-        }
-      }
-    };
-    const options = {
-      threshold
-    };
-    const observer = new IntersectionObserver(callback, options);
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => observer.disconnect();
-  }, [onIntersect, once, threshold]);
-  const Tag = tag != null ? tag : LAYOUT_TAG_DEFAULT;
-  const props = {
-    ref,
-    ...getDatasetProps(dataset, {
-      preplyDsComponent: webComponentNames.ObserverIntersection
-    })
-  };
-  return /* @__PURE__ */ jsx(Tag, { ...props, children });
-};
-export {
-  ObserveIntersection
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
+//#region src/components/ObserveIntersection/ObserveIntersection.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* An [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) wrapper.
+*
+* Triggers a callback when the wrapped component intersects with the viewport.
+*
+* This can be useful in several use cases. Examples:
+*
+* - Track an experiment, once a certain component scrolls into view.
+* - Trigger an animation, or a feature (e.g.: onboarding instructions).
+*/
+var ObserveIntersection = ({ onIntersect, once, threshold, tag, dataset, children }) => {
+	const ref = useRef(null);
+	useEffect(() => {
+		const callback = ([entry], obs) => {
+			if (entry.isIntersecting) {
+				onIntersect();
+				if (once && ref.current) obs.unobserve(ref.current);
+			}
+		};
+		const options = { threshold };
+		const observer = new IntersectionObserver(callback, options);
+		if (ref.current) observer.observe(ref.current);
+		return () => observer.disconnect();
+	}, [
+		onIntersect,
+		once,
+		threshold
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(tag !== null && tag !== void 0 ? tag : LAYOUT_TAG_DEFAULT, {
+		ref,
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.ObserverIntersection }),
+		children
+	});
 };
+//#endregion
+export { ObserveIntersection };