@preply/ds-web-lib 2.3.0 → 2.4.0

package/dist/components/Badge/Badge.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { forwardRef } from "react";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import { Icon } from "../Icon/Icon.js";
 import '../../assets/Badge.css';const badge = "badge__Aj95L";
 const styles = {
@@ -28,7 +28,7 @@ const Badge = forwardRef(function BadgeComponent({
   children,
   accent,
   inverted,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const size = getActualSize(sizeProp);
   const dataset = {
@@ -42,7 +42,7 @@ const Badge = forwardRef(function BadgeComponent({
     dataset.inverted = !!inverted;
   }
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: styles.badge,
     ...getDatasetProps(dataset, {

package/dist/components/Box/Box.js

@@ -3,7 +3,7 @@ import { BOX_RADIUS_DEFAULT, LAYOUT_TAG_DEFAULT, BOX_PADDING_DEFAULT } from "@pr
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { moduleClassNames, stringClassNames, getDatasetProps } from "@preply/ds-web-core";
 import { forwardRef } from "react";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import { getLayoutPaddingClassnames } from "../../shared-styles/layout-padding/layout-padding.js";
 import '../../assets/Box.css';const Box$1 = "Box__sKgFi";
 const styles = {
@@ -165,14 +165,14 @@ const Box = forwardRef(function BoxComponent({
   padding = BOX_PADDING_DEFAULT,
   tag,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const classNames = moduleClassNames(styles, webComponentNames.Box, [stringClassNames("box-radius", radius), stringClassNames("background", background)]);
   const paddingClassNames = getLayoutPaddingClassnames(padding);
   const Tag = tag != null ? tag : LAYOUT_TAG_DEFAULT;
   const allClassNames = [...classNames, ...paddingClassNames];
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: allClassNames.join(" "),
     ...getDatasetProps(dataset, {

package/dist/components/Checkbox/Checkbox.d.ts

@@ -46,7 +46,7 @@ export type CheckboxProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | '
  *
  * It is uncontrolled by default, and can be manually controlled via the `checked` prop.
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "aria-describedby" | "onFocus" | "onBlur" | "id" | "defaultChecked" | "aria-label" | "aria-labelledby" | "onChange" | "name" | "checked" | "required"> & {
+export declare const Checkbox: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "defaultChecked" | "id" | "aria-describedby" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "name" | "checked" | "required"> & {
     /**
      * Shows the component's error state, and sets `aria-invalid="true"` on the input element.
      */

package/dist/components/Checkbox/Checkbox.js

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { moduleClassNames, stringClassNames, getDatasetProps } from "@preply/ds-web-core";
 import { renderIcon } from "../../utils/render-icon.js";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import { useIndeterminate } from "./hooks/useIndeterminate.js";
 import '../../assets/Checkbox.css';const SvgRemove = ({
   title,
@@ -60,7 +60,7 @@ const Checkbox = forwardRef(function Checkbox2({
     onCheckedChange
   });
   const classNames = moduleClassNames(styles, "checkbox", [stringClassNames(`dsInternalSimulation`, dsInternalSimulation)]);
-  return /* @__PURE__ */ jsxs("div", { ...filterHTMLAttributes(restPropsPassedByRadixUI), className: classNames.join(" "), "data-preply-ds-component": webComponentNames.Checkbox, children: [
+  return /* @__PURE__ */ jsxs("div", { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), className: classNames.join(" "), "data-preply-ds-component": webComponentNames.Checkbox, children: [
     /* @__PURE__ */ jsx("input", { id, name, type: "checkbox", required, disabled, checked, defaultChecked, "aria-checked": ariaChecked, "aria-invalid": hasError === true ? true : void 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, onChange: onChangeHandler, ref: mergedRef, onBlur, onFocus, ...getDatasetProps(dataset) }),
     renderIcon(ForwardRef, {
       focusable: "false",

package/dist/components/Chips/Chips.js

@@ -5,7 +5,7 @@ import { getDatasetProps } from "@preply/ds-web-core";
 import * as React from "react";
 import { forwardRef } from "react";
 import { Icon } from "../Icon/Icon.js";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import { useIntl } from "react-intl";
 import { genericAriaLabels } from "../../utils/shared-strings.js";
 import '../../assets/Chips.css';const chips = "chips__EeC-E";
@@ -44,14 +44,14 @@ Chips.Item = forwardRef(function ChipsItem({
   onRemove,
   "aria-controls": ariaControls,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const {
     formatMessage
   } = useIntl();
   const toggle = () => onToggle == null ? void 0 : onToggle(!pressed);
   const remove = onRemove != null ? onRemove : toggle;
-  return /* @__PURE__ */ jsxs("li", { ...filterHTMLAttributes(restProps), ref, className: styles.chip, ...getDatasetProps(dataset, {
+  return /* @__PURE__ */ jsxs("li", { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, className: styles.chip, ...getDatasetProps(dataset, {
     preplyDsComponent: webComponentNames.Chip
   }), children: [
     /* @__PURE__ */ jsxs("button", { type: "button", className: styles["chip-toggle"], "aria-pressed": pressed, "aria-controls": ariaControls, onClick: toggle, onKeyUp: (e) => {

package/dist/components/FieldButton/FieldButton.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { moduleClassNames, getDatasetProps } from "@preply/ds-web-core";
 import { forwardRef } from "react";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/FieldButton.css';const FieldButton$1 = "FieldButton__OWtNd";
 const styles = {
   FieldButton: FieldButton$1
@@ -13,7 +13,7 @@ const FieldButton = forwardRef(function FieldButtonComponent({
   assistiveText,
   onClick,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const classNames = moduleClassNames(styles, webComponentNames.FieldButton);
   const handleClick = (ev) => {
@@ -21,7 +21,7 @@ const FieldButton = forwardRef(function FieldButtonComponent({
     onClick == null ? void 0 : onClick(ev);
   };
   const ownProps = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ...getDatasetProps(dataset, {
       preplyDsComponent: webComponentNames.FieldButton
     }),

package/dist/components/Heading/Heading.js

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { getColorClassNames } from "../../shared-styles/color/color.js";
 import { getTextAccentClassnames } from "../../shared-styles/text-accent/text-accent.js";
 import { getTextCenteredClassnames } from "../../shared-styles/text-centered/text-centered.js";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/Heading.css';const Heading$1 = "Heading__Lv13n";
 const styles = {
   Heading: Heading$1,
@@ -117,7 +117,7 @@ const Heading = forwardRef(function HeadingComponent({
   centered,
   dataset,
   id,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const Tag = tag || level || "h1";
   const classNames = moduleClassNames(styles, webComponentNames.Heading, variant ? stringClassNames("variant", variant) : booleanClassNames(`level-${level}-large`, `level-${level}-normal`, large));
@@ -128,7 +128,7 @@ const Heading = forwardRef(function HeadingComponent({
   const colorClassNames = getColorClassNames(color);
   const allClassNames = ["preply-ds-heading", ...classNames, ...centeredClassNames, ...accentClassNames, ...colorClassNames];
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     className: allClassNames.join(" "),
     ...getDatasetProps(dataset, {
       preplyDsComponent: webComponentNames.Heading

package/dist/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,QAAQ,EAER,UAAU,EACV,eAAe,EACf,YAAY,EACf,MAAM,iBAAiB,CAAC;AAGzB,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAc,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAG5E,MAAM,MAAM,SAAS,GAAG;IACpB;;;;;;;;;;;;OAYG;IACH,GAAG,EAAE,qBAAqB,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,IAAI,mFAuCf,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,QAAQ,EAER,UAAU,EACV,eAAe,EACf,YAAY,EACf,MAAM,iBAAiB,CAAC;AAGzB,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAc,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAG5E,MAAM,MAAM,SAAS,GAAG;IACpB;;;;;;;;;;;;OAYG;IACH,GAAG,EAAE,qBAAqB,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,IAAI,mFAgDf,CAAC"}

package/dist/components/Icon/Icon.js

@@ -5,7 +5,7 @@ import { moduleClassNames, booleanClassNames, getDatasetProps } from "@preply/ds
 import { forwardRef } from "react";
 import { getColorClassNames } from "../../shared-styles/color/color.js";
 import { getTextAccentClassnames } from "../../shared-styles/text-accent/text-accent.js";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import { renderIcon } from "../../utils/render-icon.js";
 import { getExpColorClassNames } from "../../shared-styles/exp-color/exp-color.js";
 import '../../assets/Icon.css';const Icon$1 = "Icon__jDdMD";
@@ -29,7 +29,7 @@ const Icon = forwardRef(function IconComponent({
   color,
   label,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const useNumericSize = !Number.isNaN(Number(size));
   const style = useNumericSize ? {
@@ -43,7 +43,7 @@ const Icon = forwardRef(function IconComponent({
   const expColorClassNames = accent ? [] : getExpColorClassNames(expColor);
   const allClassNames = [...classNames, ...accentClassNames, ...colorClassNames, ...expColorClassNames];
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     className: allClassNames.join(" "),
     ...getDatasetProps(dataset, {
       preplyDsComponent: webComponentNames.Icon

package/dist/components/LayoutFlex/LayoutFlex.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import { getGapAttr, getRelativeAttr, getDisplayAttr, getAlignItemsAttr, getJustifyContentAttr, getDirectionAttr, getPaddingAttr, DO_NOT_ADD_DATA_ATTRIBUTE, getWrapAttr } from "./style/getStyleAttrs.js";
 import { s as styles$1 } from "../../layout-gap.module-B_tyw31T.js";
 import { s as styles$2 } from "../../layout-hide.module-Bpl3Pl-a.js";
@@ -25,7 +25,7 @@ const LayoutFlex = forwardRef(function LayoutFlexComponent(props, ref) {
     alignItems,
     justifyContent,
     tag: Tag = LAYOUT_TAG_DEFAULT,
-    ...restProps
+    ...restPropsPassedByRadixUI
   } = props;
   const classNames = [
     // Temporary trick to avoid global styles
@@ -75,7 +75,7 @@ const LayoutFlex = forwardRef(function LayoutFlexComponent(props, ref) {
     paddingAttr = paddingResult.attr;
   }
   const tagProps = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: classNames.join(" "),
     "data-ds-gap": gapAttr,

package/dist/components/LayoutFlexItem/LayoutFlexItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutFlexItem.d.ts","sourceRoot":"","sources":["../../../src/components/LayoutFlexItem/LayoutFlexItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,EAEP,eAAe,EACf,SAAS,EACT,UAAU,EACb,MAAM,iBAAiB,CAAC;AAGzB,OAAO,KAAK,EAAE,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,MAAM,WAAW,KAAK;IAClB,SAAS,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,2EA4BzB,CAAC"}
+{"version":3,"file":"LayoutFlexItem.d.ts","sourceRoot":"","sources":["../../../src/components/LayoutFlexItem/LayoutFlexItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,EAEP,eAAe,EACf,SAAS,EACT,UAAU,EACb,MAAM,iBAAiB,CAAC;AAGzB,OAAO,KAAK,EAAE,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,MAAM,WAAW,KAAK;IAClB,SAAS,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,2EAqCzB,CAAC"}

package/dist/components/LayoutFlexItem/LayoutFlexItem.js

@@ -6,7 +6,7 @@ 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 { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/LayoutFlexItem.css';const LayoutFlexItem$1 = "LayoutFlexItem__0eYcj";
 const styles = {
   LayoutFlexItem: LayoutFlexItem$1,
@@ -31,7 +31,7 @@ const LayoutFlexItem = forwardRef(function LayoutFlexItemComponent({
   hide,
   relative,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const classNames = moduleClassNames(styles, webComponentNames.LayoutFlexItem, booleanClassNames("stretch", "no-stretch", stretch));
   const alignSelfClassNames = getAlignSelfClassNames(alignSelf);
@@ -40,7 +40,7 @@ const LayoutFlexItem = forwardRef(function LayoutFlexItemComponent({
   const allClassNames = [...classNames, ...alignSelfClassNames, ...hideClassNames, ...relativeClassNames];
   const Tag = tag != null ? tag : LAYOUT_TAG_DEFAULT;
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: allClassNames.join(" "),
     ...getDatasetProps(dataset, {

package/dist/components/LayoutGrid/LayoutGrid.js

@@ -5,24 +5,24 @@ import { getDatasetProps } from "@preply/ds-web-core";
 import { forwardRef } from "react";
 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 { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 const LayoutGrid = forwardRef(function LayoutGridComponent({
   dataset,
   children,
-  ...layoutGridBaseProps
+  ...layoutGridBasePropsAndPropsPassedByRadixUI
 }, ref) {
   const {
     tag: Tag = LAYOUT_TAG_DEFAULT,
     columns
-  } = layoutGridBaseProps;
-  const classNames = getLayoutGridClassNames("grid", layoutGridBaseProps);
+  } = layoutGridBasePropsAndPropsPassedByRadixUI;
+  const classNames = getLayoutGridClassNames("grid", layoutGridBasePropsAndPropsPassedByRadixUI);
   const {
     style,
     classNames: columnClassNames
   } = getLayoutGridResponsiveColumnsStyles(columns);
   const allClassNames = [...classNames, ...columnClassNames];
   const props = {
-    ...filterHTMLAttributes(layoutGridBaseProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(layoutGridBasePropsAndPropsPassedByRadixUI),
     ref,
     className: allClassNames.join(" "),
     style,

package/dist/components/LayoutGridItem/LayoutGridItem.js

@@ -6,7 +6,7 @@ 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 { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/LayoutGridItem.css';const LayoutGridItem$1 = "LayoutGridItem__HXV4b";
 const styles = {
   LayoutGridItem: LayoutGridItem$1
@@ -18,7 +18,7 @@ const LayoutGridItem = forwardRef(function LayoutGridItemComponent({
   hide,
   relative,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const classNames = moduleClassNames(styles, webComponentNames.LayoutGridItem, []);
   const alignSelfClassNames = getAlignSelfClassNames(alignSelf);
@@ -27,7 +27,7 @@ const LayoutGridItem = forwardRef(function LayoutGridItemComponent({
   const allClassNames = [...classNames, ...alignSelfClassNames, ...hideClassNames, ...relativeClassNames];
   const Tag = tag != null ? tag : LAYOUT_TAG_DEFAULT;
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: allClassNames.join(" "),
     ...getDatasetProps(dataset, {

package/dist/components/Link/Link.js

@@ -4,7 +4,7 @@ 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 { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/Link.css';const Link$1 = "Link__0oP-l";
 const styles = {
   Link: Link$1,
@@ -42,14 +42,14 @@ const Link = forwardRef(function LinkComponent(props, ref) {
     inline,
     dsInternalSimulation,
     noUnderline,
-    ...restProps
+    ...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 = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     href: actualHref,
     download,

package/dist/components/Loader/Loader.js

@@ -2,7 +2,7 @@ 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 { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import { Spinner } from "../private/Spinner/Spinner.js";
 import '../../assets/Loader.css';const Loader$1 = "Loader__sOe0E";
 const styles = {
@@ -14,11 +14,11 @@ const Loader = forwardRef(function LoaderComponent({
   size,
   inverted = false,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const classNames = moduleClassNames(styles, webComponentNames.Loader, [booleanClassNames("inverted", "normal", inverted)]);
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: classNames.join(" "),
     ...getDatasetProps(dataset, {

package/dist/components/PreplyLogo/PreplyLogo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreplyLogo.d.ts","sourceRoot":"","sources":["../../../src/components/PreplyLogo/PreplyLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,MAAM,MAAM,KAAK,GAAG;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA6BF,eAAO,MAAM,UAAU,+EAgCrB,CAAC"}
+{"version":3,"file":"PreplyLogo.d.ts","sourceRoot":"","sources":["../../../src/components/PreplyLogo/PreplyLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,MAAM,MAAM,KAAK,GAAG;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA6BF,eAAO,MAAM,UAAU,+EAuCrB,CAAC"}

package/dist/components/PreplyLogo/PreplyLogo.js

@@ -3,7 +3,7 @@ import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-n
 import { moduleClassNames, booleanClassNames, getDatasetProps } from "@preply/ds-web-core";
 import * as React from "react";
 import { forwardRef } from "react";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/PreplyLogo.css';const PreplyLogo$1 = "PreplyLogo__Grf-P";
 const styles = {
   PreplyLogo: PreplyLogo$1,
@@ -47,14 +47,14 @@ const PreplyLogo = forwardRef(function PreplyLogoComponent({
   inverted = false,
   size = "m",
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const classNames = moduleClassNames(styles, webComponentNames.PreplyLogo, [booleanClassNames("inverted", void 0, inverted)]);
   let mode = MODES.DEFAULT;
   if (iconOnly) mode = MODES.ICON_ONLY;
   if (business) mode = MODES.BUSINESS;
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: classNames.join(" "),
     ...getDatasetProps(dataset, {

package/dist/components/Text/Text.js

@@ -6,7 +6,7 @@ import { forwardRef } from "react";
 import { getColorClassNames } from "../../shared-styles/color/color.js";
 import { getTextAccentClassnames } from "../../shared-styles/text-accent/text-accent.js";
 import { getTextCenteredClassnames } from "../../shared-styles/text-centered/text-centered.js";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/Text.css';const Text$1 = "Text__uVacy";
 const styles = {
   Text: Text$1,
@@ -244,7 +244,7 @@ const Text = forwardRef(function TextComponent({
   strong,
   centered,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const actualVariant = variant || (size ? void 0 : TEXT_VARIANT_DEFAULT);
   const actualSize = variant ? void 0 : size;
@@ -257,7 +257,7 @@ const Text = forwardRef(function TextComponent({
   const centeredClassNames = getTextCenteredClassnames(centered);
   const allClassNames = [...classNames, ...accentClassNames, ...colorClassNames, ...centeredClassNames];
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: allClassNames.join(" "),
     ...getDatasetProps(dataset, {

package/dist/components/TextHighlighted/TextHighlighted.js

@@ -3,7 +3,7 @@ import { TEXT_HIGHLIGHT_DEFAULT, TEXT_INLINE_TAG_DEFAULT } from "@preply/ds-core
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { moduleClassNames, stringClassNames, getDatasetProps } from "@preply/ds-web-core";
 import { forwardRef } from "react";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/TextHighlighted.css';const TextHighlighted$1 = "TextHighlighted__ehLpO";
 const styles = {
   TextHighlighted: TextHighlighted$1,
@@ -23,11 +23,11 @@ const TextHighlighted = forwardRef(function TextHighlightedComponent({
   highlight = TEXT_HIGHLIGHT_DEFAULT,
   tag: Tag = TEXT_INLINE_TAG_DEFAULT,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const classNames = moduleClassNames(styles, webComponentNames.TextHighlighted, [stringClassNames("highlight", highlight)]);
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: classNames.join(" "),
     ...getDatasetProps(dataset, {

package/dist/components/TextInline/TextInline.js

@@ -6,7 +6,7 @@ import { forwardRef } from "react";
 import { getColorClassNames } from "../../shared-styles/color/color.js";
 import { getTextAccentClassnames } from "../../shared-styles/text-accent/text-accent.js";
 import { getTextWeightClassNames } from "../../shared-styles/text-weight/text-weight.js";
-import { filterHTMLAttributes } from "../../utils/filterHTMLAttributes.js";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import '../../assets/TextInline.css';const TextInline$1 = "TextInline__SqhPj";
 const styles = {
   TextInline: TextInline$1,
@@ -20,7 +20,7 @@ const TextInline = forwardRef(function TextInlineComponent({
   italic = false,
   tag: Tag = TEXT_INLINE_TAG_DEFAULT,
   dataset,
-  ...restProps
+  ...restPropsPassedByRadixUI
 }, ref) {
   const classNames = moduleClassNames(styles, webComponentNames.TextInline, [booleanClassNames("italic", void 0, italic)]);
   const actualColor = accent ? void 0 : color;
@@ -30,7 +30,7 @@ const TextInline = forwardRef(function TextInlineComponent({
   const weightClassNames = getTextWeightClassNames(weight);
   const allClassNames = [...classNames, ...accentClassNames, ...colorClassNames, ...weightClassNames];
   const props = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ref,
     className: allClassNames.join(" "),
     ...getDatasetProps(dataset, {

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

@@ -3,9 +3,9 @@ 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 { filterHTMLAttributes } from "../../../utils/filterHTMLAttributes.js";
 import '../../../assets/ButtonBase.css';const ButtonBase$1 = "ButtonBase__lIl-s";
 const styles = {
   "button-width--width-full": "button-width--width-full__nJNYU",
@@ -220,7 +220,7 @@ const ButtonBase = forwardRef(function ButtonBaseComponent(props, forwardedRef)
     dsInternalSimulation,
     preplyDsComponent,
     className,
-    ...restProps
+    ...restPropsPassedByRadixUI
   } = props;
   const {
     selected
@@ -250,7 +250,7 @@ const ButtonBase = forwardRef(function ButtonBaseComponent(props, forwardedRef)
   ) : 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 = {
-    ...filterHTMLAttributes(restProps),
+    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
     ...getDatasetProps(dataset, {
       preplyDsComponent
     }),

package/dist/utils/{filterHTMLAttributes.d.ts → filterAttributesPassedByRadixUIAtRuntime.d.ts}

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'react';
 /**
  * Filters an object to only include whitelisted HTML attributes.
  * This is useful for safe props spreading to enable integration with third-party libs like radix-ui.
@@ -7,5 +8,5 @@
  * With `filterHTMLAttributes`, we're allowing known props required for Tooltip/Popover, and avoiding
  * spreading ALL the `{...rest}` props down, to prevent opening doors to all sorts of weird "hacks".
  */
-export declare const filterHTMLAttributes: <T extends Record<string, unknown>>(attributes: T) => { [K in Extract<keyof T, "aria-describedby" | "onPointerMove" | "onPointerLeave" | "onPointerDown" | "onFocus" | "onBlur" | "onClick" | "onTouchStart" | "onTouchEnd" | "id">]: T[K]; };
-//# sourceMappingURL=filterHTMLAttributes.d.ts.map
+export declare const filterAttributesPassedByRadixUIAtRuntime: <T extends Record<string, unknown>>(attributes: T) => { [K in Extract<keyof T, keyof HTMLAttributes<HTMLElement>>]: T[K]; };
+//# sourceMappingURL=filterAttributesPassedByRadixUIAtRuntime.d.ts.map

package/dist/utils/filterAttributesPassedByRadixUIAtRuntime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterAttributesPassedByRadixUIAtRuntime.d.ts","sourceRoot":"","sources":["../../src/utils/filterAttributesPassedByRadixUIAtRuntime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAwBvC;;;;;;;;GAQG;AACH,eAAO,MAAM,wCAAwC,6HAMpD,CAAC"}

package/dist/utils/filterAttributesPassedByRadixUIAtRuntime.js

@@ -0,0 +1,26 @@
+const HTML_ATTRIBUTES_WHITE_LIST = [
+  "aria-describedby",
+  // @ts-expect-error data-state is not recognized as a valid HTML attribute 🤔
+  "data-state",
+  "onPointerMove",
+  "onPointerLeave",
+  "onPointerDown",
+  "onFocus",
+  // @todo double-check if this prop is actually passed.
+  "onBlur",
+  // @todo double-check if this prop is actually passed.
+  "onClick",
+  "onTouchStart",
+  "onTouchEnd",
+  "id",
+  // @todo double-check if this prop is actually passed.
+  "tabIndex"
+  // @todo double-check if this prop is actually passed.
+];
+const ATTRIBUTES_SET = new Set(HTML_ATTRIBUTES_WHITE_LIST);
+const filterAttributesPassedByRadixUIAtRuntime = (attributes) => {
+  return Object.fromEntries(Object.entries(attributes).filter(([key]) => ATTRIBUTES_SET.has(key)));
+};
+export {
+  filterAttributesPassedByRadixUIAtRuntime
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preply/ds-web-lib",
-    "version": "2.3.0",
+    "version": "2.4.0",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -34,22 +34,22 @@
         "sonner": "^1.7.4"
     },
     "peerDependencies": {
-        "@preply/ds-core": "2.3.0",
-        "@preply/ds-media-icons": "2.3.0",
-        "@preply/ds-visual-coverage-preply-component-names": "2.3.0",
-        "@preply/ds-web-core": "2.3.0",
-        "@preply/ds-web-root": "2.3.0",
+        "@preply/ds-core": "2.4.0",
+        "@preply/ds-media-icons": "2.4.0",
+        "@preply/ds-visual-coverage-preply-component-names": "2.4.0",
+        "@preply/ds-web-core": "2.4.0",
+        "@preply/ds-web-root": "2.4.0",
         "react": "^16 || ^18",
         "react-dom": "^16 || ^18",
         "react-intl": "^6.5.5"
     },
     "devDependencies": {
-        "@preply/ds-core": "2.3.0",
-        "@preply/ds-docs-toolkit": "2.3.0",
-        "@preply/ds-media-icons": "2.3.0",
-        "@preply/ds-visual-coverage-preply-component-names": "2.3.0",
-        "@preply/ds-web-core": "2.3.0",
-        "@preply/ds-web-root": "2.3.0",
+        "@preply/ds-core": "2.4.0",
+        "@preply/ds-docs-toolkit": "2.4.0",
+        "@preply/ds-media-icons": "2.4.0",
+        "@preply/ds-visual-coverage-preply-component-names": "2.4.0",
+        "@preply/ds-web-core": "2.4.0",
+        "@preply/ds-web-root": "2.4.0",
         "@storybook/react": "8.5.8",
         "@testing-library/react": "16.2.0",
         "@types/react-is": "^18.2.0",
@@ -65,5 +65,5 @@
         "vite-plugin-svgr": "4.3.0",
         "vitest-browser-react": "^0.1.1"
     },
-    "gitHead": "211e51a1372c2f5a3141548bace21be487b1a46c"
+    "gitHead": "c98fb6c9479efe8c39f9c493668bb3e291b2d263"
 }

package/dist/utils/filterHTMLAttributes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"filterHTMLAttributes.d.ts","sourceRoot":"","sources":["../../src/utils/filterHTMLAttributes.ts"],"names":[],"mappings":"AAqBA;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,+OAIhC,CAAC"}

package/dist/utils/filterHTMLAttributes.js

@@ -1,8 +0,0 @@
-const ATTRIBUTES_WHITE_LIST = ["aria-describedby", "onPointerMove", "onPointerLeave", "onPointerDown", "onFocus", "onBlur", "onClick", "onTouchStart", "onTouchEnd", "id"];
-const ATTRIBUTES_SET = new Set(ATTRIBUTES_WHITE_LIST);
-const filterHTMLAttributes = (attributes) => {
-  return Object.fromEntries(Object.entries(attributes).filter(([key]) => ATTRIBUTES_SET.has(key)));
-};
-export {
-  filterHTMLAttributes
-};