@integration-app/react 2.18.0 → 2.20.0

package/dist/esm/components/DataBuilder/hooks.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -12,16 +12,14 @@ import { getValueSpecFromSchema, doesSchemaMatchValueType } from '../ComboBox/va
 
 function useDataBuilderFieldCanUseVarFromVariables() {
   const { field, localSchema } = useDataBuilderField();
-  const localSchemaIsArrayOrObject = ["array", "object"].includes(
-    localSchema?.type || ""
-  );
+  const localSchemaIsArrayOrObject = ["array", "object"].includes(localSchema?.type || "");
   if (!localSchemaIsArrayOrObject) {
     return false;
   }
   const valueSpec = getValueSpecFromSchema(localSchema);
-  const hasMatchedVariables = Object.values(
-    field?.variablesSchema?.properties ?? {}
-  ).some((schema) => doesSchemaMatchValueType(schema, valueSpec, true));
+  const hasMatchedVariables = Object.values(field?.variablesSchema?.properties ?? {}).some(
+    (schema) => doesSchemaMatchValueType(schema, valueSpec, true)
+  );
   const hasOptionFactories = (field?.optionFactories ?? []).length > 0;
   return hasMatchedVariables || hasOptionFactories;
 }

package/dist/esm/components/DataBuilder/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -62,10 +62,7 @@ function addAdditionalPropertiesPropertyToNestedObjects(schema) {
     ...additionalPropertiesObject,
     // Iterate over all properties and calculate `additionalProperties` flag for them
     properties: Object.fromEntries(
-      Object.entries(schema?.properties ?? {}).map(([k, v]) => [
-        k,
-        addAdditionalPropertiesPropertyToNestedObjects(v)
-      ])
+      Object.entries(schema?.properties ?? {}).map(([k, v]) => [k, addAdditionalPropertiesPropertyToNestedObjects(v)])
     )
   };
 }

package/dist/esm/components/DataBuilder/styles.module.css.mjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 

package/dist/esm/components/DataBuilderUI/FieldControlPanel/FieldControlPanel.module.css.mjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 

package/dist/esm/components/DataBuilderUI/FieldControlPanel/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -16,17 +16,7 @@ function FieldControlPanelRoot({
   compact,
   noWrap
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        classes.panel,
-        compact && classes.panel__compact,
-        noWrap && classes.panel__noWrap
-      ),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className: clsx(classes.panel, compact && classes.panel__compact, noWrap && classes.panel__noWrap), children });
 }
 function FieldControlPanelText({ children }) {
   return /* @__PURE__ */ jsx("span", { className: classes.panel_text, children });

package/dist/esm/components/DataBuilderUI/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -21,102 +21,56 @@ import { Tooltip } from '../Tooltip/index.mjs';
 import classes from './styles.module.css.mjs';
 export { FieldControlPanel } from './FieldControlPanel/index.mjs';
 
-function RowRoot({
-  children,
-  className,
-  propertiesComponent,
-  embedded,
-  short
-}) {
+function RowRoot({ children, className, propertiesComponent, embedded, short }) {
   const childrenList = Array.isArray(children) ? children : [];
-  const nestedPropertiesComponent = childrenList.find(
-    (component) => component?.type === RowProperties
-  );
-  const nestedActionBarComponent = childrenList.find(
-    (component) => component?.type === ActionBar
-  );
+  const nestedPropertiesComponent = childrenList.find((component) => component?.type === RowProperties);
+  const nestedActionBarComponent = childrenList.find((component) => component?.type === ActionBar);
   const childComponents = !childrenList.length ? children : childrenList.filter(
     /* FIXME: strictNullCheck temporary fix */
     // @ts-expect-error TS(2345): Argument of type 'string | JSXElementConstructor<a... Remove this comment to see the full error message
     (component) => ![RowProperties, ActionBar].includes(component?.type)
   );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        classes.rowWrapper,
-        embedded && classes.rowWrapperEmbedded
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              classes.row,
-              embedded && classes.rowEmbedded,
-              short && classes.rowShort,
-              className
-            ),
-            children: [
-              childComponents,
-              nestedActionBarComponent
-            ]
-          }
-        ),
-        propertiesComponent,
-        nestedPropertiesComponent
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: clsx(classes.rowWrapper, embedded && classes.rowWrapperEmbedded), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(classes.row, embedded && classes.rowEmbedded, short && classes.rowShort, className), children: [
+      childComponents,
+      nestedActionBarComponent
+    ] }),
+    propertiesComponent,
+    nestedPropertiesComponent
+  ] });
 }
-const RowProperties = forwardRef(
-  ({ children, className, expanded, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(
-          classes.rowProperties,
-          expanded && classes.rowPropertiesExpanded,
-          className
-        ),
-        ...props,
-        ref,
-        children
-      }
-    );
-  }
-);
-RowProperties.displayName = "RowProperties";
-const Row = Object.assign(RowRoot, {
-  Properties: RowProperties
-});
-const PropertyRoot = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("span", { className: classes.propertyWrapper, children: /* @__PURE__ */ jsx("span", { className: clsx(classes.property, className), ...props, ref, children }) });
-});
-PropertyRoot.displayName = "PropertyRoot";
-const PropertyName = forwardRef(({ children, className, ...props }, ref) => {
+const RowProperties = forwardRef(({ children, className, expanded, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
-    "span",
+    "div",
     {
-      className: clsx(classes.propertyName, className),
+      className: clsx(classes.rowProperties, expanded && classes.rowPropertiesExpanded, className),
       ...props,
       ref,
       children
     }
   );
 });
-PropertyName.displayName = "PropertyName";
-const PropertyValue = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: clsx(classes.propertyValue, className),
-      ...props,
-      ref,
-      children
-    }
-  );
+RowProperties.displayName = "RowProperties";
+const Row = Object.assign(RowRoot, {
+  Properties: RowProperties
 });
+const PropertyRoot = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("span", { className: classes.propertyWrapper, children: /* @__PURE__ */ jsx("span", { className: clsx(classes.property, className), ...props, ref, children }) });
+  }
+);
+PropertyRoot.displayName = "PropertyRoot";
+const PropertyName = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("span", { className: clsx(classes.propertyName, className), ...props, ref, children });
+  }
+);
+PropertyName.displayName = "PropertyName";
+const PropertyValue = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("span", { className: clsx(classes.propertyValue, className), ...props, ref, children });
+  }
+);
 PropertyValue.displayName = "PropertyValue";
 const Property = Object.assign(PropertyRoot, {
   Name: PropertyName,
@@ -146,45 +100,27 @@ const CellRoot = forwardRef(
   }
 );
 CellRoot.displayName = "CellRoot";
-const CellName = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellName, className), ...props, ref, children });
-  }
-);
+const CellName = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellName, className), ...props, ref, children });
+});
 CellName.displayName = "CellName";
-const CellCombobox = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Cell,
-      {
-        className: clsx(classes.cellCombobox, className),
-        ...props,
-        ref,
-        children
-      }
-    );
-  }
-);
+const CellCombobox = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellCombobox, className), ...props, ref, children });
+});
 CellCombobox.displayName = "CellCombobox";
-const CellValue = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellValue, className), ...props, ref, children });
-  }
-);
+const CellValue = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellValue, className), ...props, ref, children });
+});
 CellValue.displayName = "CellValue";
 const CellDataInput = CellCombobox;
 CellDataInput.displayName = "CellDataInput";
-const CellInput = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellInput, className), ...props, ref, children });
-  }
-);
+const CellInput = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellInput, className), ...props, ref, children });
+});
 CellInput.displayName = "CellInput";
-const CellIcon = forwardRef(
-  ({ type, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellIcon, className), ...props, ref, children: /* @__PURE__ */ jsx(SvgIcon, { type }) });
-  }
-);
+const CellIcon = forwardRef(({ type, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cellIcon, className), ...props, ref, children: /* @__PURE__ */ jsx(SvgIcon, { type }) });
+});
 CellIcon.displayName = "CellIcon";
 const Cell = Object.assign(CellRoot, {
   Name: CellName,
@@ -209,12 +145,9 @@ const Title = forwardRef(
     childrenWrap = false,
     ...props
   }, ref) => {
-    const childrenAsText = Children.toArray(children).reduce(
-      (acc, el) => {
-        return acc + (typeof el === "string" ? el : "");
-      },
-      ""
-    );
+    const childrenAsText = Children.toArray(children).reduce((acc, el) => {
+      return acc + (typeof el === "string" ? el : "");
+    }, "");
     return /* @__PURE__ */ jsxs("div", { className: classes.title, ...props, ref, children: [
       /* @__PURE__ */ jsxs("div", { className: classes.title_leftSide, children: [
         leftSlot && /* @__PURE__ */ jsx("div", { children: leftSlot }),
@@ -232,37 +165,12 @@ const Title = forwardRef(
       ] }),
       /* @__PURE__ */ jsxs("div", { className: classes.title_rightSide, children: [
         rightSlot && /* @__PURE__ */ jsx(Fragment, { children: rightSlot }),
-        hasError && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(classes.title_dot, classes.title_dot__error)
-          }
-        ),
-        hasNameConflict && /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            tooltip: "Current field name is already used",
-            delayToShow: 0,
-            children: /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: clsx(
-                    classes.title_dot,
-                    classes["title_dot__name-conflict"]
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: css({ srOnly: true }), children: "Current field name is already used" })
-            ] })
-          }
-        ),
-        required && !hasError && !hasValue && /* @__PURE__ */ jsx(Tooltip, { tooltip: "Field is required", delayToShow: 0, children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(classes.title_dot, classes.title_dot__required)
-          }
-        ) })
+        hasError && /* @__PURE__ */ jsx("span", { className: clsx(classes.title_dot, classes.title_dot__error) }),
+        hasNameConflict && /* @__PURE__ */ jsx(Tooltip, { tooltip: "Current field name is already used", delayToShow: 0, children: /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx("span", { className: clsx(classes.title_dot, classes["title_dot__name-conflict"]) }),
+          /* @__PURE__ */ jsx("span", { className: css({ srOnly: true }), children: "Current field name is already used" })
+        ] }) }),
+        required && !hasError && !hasValue && /* @__PURE__ */ jsx(Tooltip, { tooltip: "Field is required", delayToShow: 0, children: /* @__PURE__ */ jsx("span", { className: clsx(classes.title_dot, classes.title_dot__required) }) })
       ] })
     ] });
   }
@@ -272,11 +180,9 @@ const Description = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx("div", { className: classes.description, ...props, ref, children });
 });
 Description.displayName = "Description";
-const ValueRoot = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { className: classes.cellValue, ...props, ref, children });
-  }
-);
+const ValueRoot = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { className: classes.cellValue, ...props, ref, children });
+});
 ValueRoot.displayName = "Value";
 const ValueCombobox = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(ValueRoot, { className: classes.cellValueCombobox, ...props, ref, children });
@@ -287,43 +193,49 @@ const Value = Object.assign(ValueRoot, {
   Tag: ValueCombobox,
   Inline: ValueRoot
 });
-const ActionBarRoot = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx(classes.actionBar, className), ...props, ref, children });
-});
+const ActionBarRoot = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { className: clsx(classes.actionBar, className), ...props, ref, children });
+  }
+);
 ActionBarRoot.displayName = "ActionBarRoot";
-const ActionBarGenericButton = forwardRef(({ className, iconType, tooltip, onClick, ...props }, ref) => {
-  const handleOnClick = useEventStopPropagation(
-    (e) => onClick?.(e)
-  );
-  const button = /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: clsx(classes.actionBarButton, className),
-      onClick: handleOnClick,
-      ...props,
-      ref,
-      children: iconType && /* @__PURE__ */ jsx(SvgIcon, { type: iconType })
+const ActionBarGenericButton = forwardRef(
+  ({ className, iconType, tooltip, onClick, ...props }, ref) => {
+    const handleOnClick = useEventStopPropagation(
+      (e) => onClick?.(e)
+    );
+    const button = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx(classes.actionBarButton, className),
+        onClick: handleOnClick,
+        ...props,
+        ref,
+        children: iconType && /* @__PURE__ */ jsx(SvgIcon, { type: iconType })
+      }
+    );
+    if (tooltip) {
+      return /* @__PURE__ */ jsx(Tooltip, { tooltip, children: button });
     }
-  );
-  if (tooltip) {
-    return /* @__PURE__ */ jsx(Tooltip, { tooltip, children: button });
+    return button;
   }
-  return button;
-});
+);
 ActionBarGenericButton.displayName = "ActionBarGenericButton";
-const ActionBarDeleteButton = forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    ActionBarGenericButton,
-    {
-      iconType: SvgIconType.Close,
-      tooltip: "Delete",
-      "aria-label": "Delete",
-      ...props,
-      ref
-    }
-  );
-});
+const ActionBarDeleteButton = forwardRef(
+  ({ ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      ActionBarGenericButton,
+      {
+        iconType: SvgIconType.Close,
+        tooltip: "Delete",
+        "aria-label": "Delete",
+        ...props,
+        ref
+      }
+    );
+  }
+);
 ActionBarDeleteButton.displayName = "ActionBarDeleteButton";
 const ActionBar = Object.assign(ActionBarRoot, {
   GenericButton: ActionBarGenericButton,

package/dist/esm/components/DataBuilderUI/styles.module.css.mjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 

package/dist/esm/components/DataInput/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 

package/dist/esm/components/DataInput/useResolvedDataSchema.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -15,9 +15,7 @@ function useDynamicDataSchema(schema, value) {
   const integrationApp = useIntegrationApp();
   const { connectionId } = useIntegrationAppConnection();
   const [previousSourceSchema, setPreviousSourceSchema] = useState(void 0);
-  const [resolvedSchema, setResolvedSchema] = useState(
-    schema
-  );
+  const [resolvedSchema, setResolvedSchema] = useState(schema);
   const [error, setError] = useState(void 0);
   async function resolveSchema(schema2, value2) {
     try {
@@ -42,11 +40,7 @@ function useDynamicDataSchema(schema, value) {
     if (schema) {
       void resolveSchema(schema, value);
     }
-  }, [
-    schema ? JSON.stringify(schema) : void 0,
-    value ? JSON.stringify(value) : void 0,
-    connectionId
-  ]);
+  }, [schema ? JSON.stringify(schema) : void 0, value ? JSON.stringify(value) : void 0, connectionId]);
   return { schema: resolvedSchema, error };
 }
 

package/dist/esm/components/DataLinks/data-link-tables-option-factory.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 

package/dist/esm/components/DropdownUI/BackButton.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -48,25 +48,27 @@ const dropdownBackButtonRecipe = sva({
     title: { fontWeight: "medium", color: "slate.11", fontSize: "sm" }
   }
 });
-const BackButton = forwardRef(({ className, children, ...props }, ref) => {
-  const { container, button, icon, title } = dropdownBackButtonRecipe();
-  const id = useId();
-  return /* @__PURE__ */ jsxs(Flex, { className: container, children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        ref,
-        variant: "ghost",
-        colorPalette: "gray",
-        className: clsx(button, className),
-        "aria-labelledby": id,
-        onMouseDown: preventFocusShift,
-        ...props,
-        children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.ChevronLeft, className: icon })
-      }
-    ),
-    /* @__PURE__ */ jsx(Text, { as: "span", className: title, id, children })
-  ] });
-});
+const BackButton = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { container, button, icon, title } = dropdownBackButtonRecipe();
+    const id = useId();
+    return /* @__PURE__ */ jsxs(Flex, { className: container, children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          ref,
+          variant: "ghost",
+          colorPalette: "gray",
+          className: clsx(button, className),
+          "aria-labelledby": id,
+          onMouseDown: preventFocusShift,
+          ...props,
+          children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.ChevronLeft, className: icon })
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { as: "span", className: title, id, children })
+    ] });
+  }
+);
 
 export { BackButton };

package/dist/esm/components/DropdownUI/ClearSearchButton.mjs

@@ -0,0 +1,57 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.20.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+import { IconButton } from '../../ui-kit/styled/icon-button.mjs';
+import { SvgIcon } from '../SvgIcon/index.mjs';
+
+const dropdownClearSearchButtonRecipe = sva({
+  className: "dropdown-clear-search-button",
+  slots: ["container", "button", "icon", "title"],
+  base: {
+    button: {
+      h: "6",
+      w: "6",
+      minW: "unset",
+      rounded: "md",
+      color: "slate.11",
+      _current: {
+        bg: "slate.3"
+      }
+    },
+    icon: {
+      w: "4",
+      h: "4"
+    }
+  }
+});
+const ClearSearchButton = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { button, icon } = dropdownClearSearchButtonRecipe();
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref,
+        variant: "ghost",
+        colorPalette: "gray",
+        className: clsx(button, className),
+        "aria-label": "Clear search",
+        ...props,
+        children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Close, className: icon })
+      }
+    );
+  }
+);
+
+export { ClearSearchButton };

package/dist/esm/components/DropdownUI/Content.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -16,9 +16,11 @@ import '../../styled-system/jsx/is-valid-prop.mjs';
 import { Flex } from '../../styled-system/jsx/flex.mjs';
 import '../../styled-system/patterns/visually-hidden.mjs';
 
-const Content = forwardRef(({ children, className, ...props }, ref) => {
-  const { content } = dropdownRecipe({});
-  return /* @__PURE__ */ jsx(Flex, { ref, className: clsx(content, className), ...props, children });
-});
+const Content = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { content } = dropdownRecipe({});
+    return /* @__PURE__ */ jsx(Flex, { ref, className: clsx(content, className), ...props, children });
+  }
+);
 
 export { Content };