@integration-app/react 2.1.2 → 2.1.3

package/dist/cjs/components/DataBuilderUI/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -11,10 +11,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index$1 = require('../SvgIcon/index.cjs');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
-var index$2 = require('../Tooltip/index.cjs');
 var useEventStopPropagation = require('../../hooks/useEventStopPropagation.cjs');
+var index$1 = require('../SvgIcon/index.cjs');
+var index$2 = require('../Tooltip/index.cjs');
 var styles_module = require('./styles.module.css.cjs');
 var index = require('./FieldControlPanel/index.cjs');
 
@@ -40,7 +40,7 @@ function RowRoot({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: clsx(
+      className: clsx.clsx(
         styles_module.default.rowWrapper,
         embedded && styles_module.default.rowWrapperEmbedded
       ),
@@ -48,7 +48,7 @@ function RowRoot({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: clsx(
+            className: clsx.clsx(
               styles_module.default.row,
               embedded && styles_module.default.rowEmbedded,
               short && styles_module.default.rowShort,
@@ -71,7 +71,7 @@ const RowProperties = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: clsx(
+        className: clsx.clsx(
           styles_module.default.rowProperties,
           expanded && styles_module.default.rowPropertiesExpanded,
           className
@@ -88,14 +88,14 @@ const Row = Object.assign(RowRoot, {
   Properties: RowProperties
 });
 const PropertyRoot = React.forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.propertyWrapper, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(styles_module.default.property, className), ...props, ref, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.propertyWrapper, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(styles_module.default.property, className), ...props, ref, children }) });
 });
 PropertyRoot.displayName = "PropertyRoot";
 const PropertyName = React.forwardRef(({ children, className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: clsx(styles_module.default.propertyName, className),
+      className: clsx.clsx(styles_module.default.propertyName, className),
       ...props,
       ref,
       children
@@ -107,7 +107,7 @@ const PropertyValue = React.forwardRef(({ children, className, ...props }, ref)
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: clsx(styles_module.default.propertyValue, className),
+      className: clsx.clsx(styles_module.default.propertyValue, className),
       ...props,
       ref,
       children
@@ -125,7 +125,7 @@ const CellRoot = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: clsx(
+        className: clsx.clsx(
           styles_module.default.cell,
           grow && styles_module.default.cellGrow,
           shrink && styles_module.default.cellShrink,
@@ -145,7 +145,7 @@ const CellRoot = React.forwardRef(
 CellRoot.displayName = "CellRoot";
 const CellName = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx(styles_module.default.cellName, className), ...props, ref, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx.clsx(styles_module.default.cellName, className), ...props, ref, children });
   }
 );
 CellName.displayName = "CellName";
@@ -154,7 +154,7 @@ const CellCombobox = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       Cell,
       {
-        className: clsx(styles_module.default.cellCombobox, className),
+        className: clsx.clsx(styles_module.default.cellCombobox, className),
         ...props,
         ref,
         children
@@ -165,7 +165,7 @@ const CellCombobox = React.forwardRef(
 CellCombobox.displayName = "CellCombobox";
 const CellValue = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx(styles_module.default.cellValue, className), ...props, ref, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx.clsx(styles_module.default.cellValue, className), ...props, ref, children });
   }
 );
 CellValue.displayName = "CellValue";
@@ -173,13 +173,13 @@ const CellDataInput = CellCombobox;
 CellDataInput.displayName = "CellDataInput";
 const CellInput = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx(styles_module.default.cellInput, className), ...props, ref, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx.clsx(styles_module.default.cellInput, className), ...props, ref, children });
   }
 );
 CellInput.displayName = "CellInput";
 const CellIcon = React.forwardRef(
   ({ type, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx(styles_module.default.cellIcon, className), ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx.clsx(styles_module.default.cellIcon, className), ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type }) });
   }
 );
 CellIcon.displayName = "CellIcon";
@@ -221,13 +221,13 @@ const Title = React.forwardRef(
         hasError && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: clsx(styles_module.default.title_dot, styles_module.default.title_dot__error)
+            className: clsx.clsx(styles_module.default.title_dot, styles_module.default.title_dot__error)
           }
         ),
         required && !hasError && !hasValue && /* @__PURE__ */ jsxRuntime.jsx(index$2.Tooltip, { tooltip: "Field is required", children: /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: clsx(styles_module.default.title_dot, styles_module.default.title_dot__required)
+            className: clsx.clsx(styles_module.default.title_dot, styles_module.default.title_dot__required)
           }
         ) })
       ] })
@@ -255,7 +255,7 @@ const Value = Object.assign(ValueRoot, {
   Inline: ValueRoot
 });
 const ActionBarRoot = React.forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(styles_module.default.actionBar, className), ...props, ref, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(styles_module.default.actionBar, className), ...props, ref, children });
 });
 ActionBarRoot.displayName = "ActionBarRoot";
 const ActionBarGenericButton = React.forwardRef(({ className, iconType, tooltip, onClick, ...props }, ref) => {
@@ -266,7 +266,7 @@ const ActionBarGenericButton = React.forwardRef(({ className, iconType, tooltip,
     "button",
     {
       type: "button",
-      className: clsx(styles_module.default.actionBarButton, className),
+      className: clsx.clsx(styles_module.default.actionBarButton, className),
       onClick: handleOnClick,
       ...props,
       ref,
@@ -301,7 +301,7 @@ function NestedLevel({ level = BASE_LEVEL, children }) {
   if (level === BASE_LEVEL - 1) {
     return children;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(styles_module.default.nestedLevel), children: /* @__PURE__ */ jsxRuntime.jsx(NestedLevel, { level: level - 1, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(styles_module.default.nestedLevel), children: /* @__PURE__ */ jsxRuntime.jsx(NestedLevel, { level: level - 1, children }) });
 }
 function DrilldownBlockContentWrapper({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.drilldownWrapper, children });

package/dist/cjs/components/DataBuilderUI/styles.module.css.cjs

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

package/dist/cjs/components/DataInput/index.cjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var Form = require('../DataBuilder/Form.cjs');
 var index = require('../DataBuilder/index.cjs');
+var Form = require('../DataBuilder/Form.cjs');
 
 function DataInput({
   schema,

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

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

package/dist/cjs/components/DropdownUI/BackButton.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -10,7 +10,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('../SvgIcon/index.cjs');
+var clsx = require('clsx');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
@@ -18,8 +18,9 @@ var sva = require('../../styled-system/css/sva.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
 var flex = require('../../styled-system/jsx/flex.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
-var text = require('../../ui-kit/styled/text.cjs');
 var iconButton = require('../../ui-kit/styled/icon-button.cjs');
+var text = require('../../ui-kit/styled/text.cjs');
+var index = require('../SvgIcon/index.cjs');
 var utils = require('./utils.cjs');
 
 const dropdownBackButtonRecipe = sva.sva({
@@ -37,7 +38,10 @@ const dropdownBackButtonRecipe = sva.sva({
       w: "6",
       minW: "unset",
       rounded: "md",
-      color: "slate.11"
+      color: "slate.11",
+      _current: {
+        bg: "slate.3"
+      }
     },
     icon: {
       w: "4",
@@ -47,9 +51,7 @@ const dropdownBackButtonRecipe = sva.sva({
   }
 });
 const BackButton = React.forwardRef(({ className, children, ...props }, ref) => {
-  const { container, button, icon, title } = dropdownBackButtonRecipe({
-    className
-  });
+  const { container, button, icon, title } = dropdownBackButtonRecipe();
   const id = React.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: container, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -58,7 +60,7 @@ const BackButton = React.forwardRef(({ className, children, ...props }, ref) =>
         ref,
         variant: "ghost",
         colorPalette: "gray",
-        className: button,
+        className: clsx.clsx(button, className),
         "aria-labelledby": id,
         onMouseDown: utils.preventFocusShift,
         ...props,

package/dist/cjs/components/DropdownUI/Content.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -11,16 +11,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var svaRecipe = require('./sva-recipe.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
 var flex = require('../../styled-system/jsx/flex.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
 
 const Content = React.forwardRef(({ children, className, ...props }, ref) => {
   const { content } = svaRecipe.dropdownRecipe({});
-  return /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { ref, className: clsx(content, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { ref, className: clsx.clsx(content, className), ...props, children });
 });
 
 exports.Content = Content;

package/dist/cjs/components/DropdownUI/ErrorHeading.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -11,9 +11,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var svaRecipe = require('./sva-recipe.cjs');
 var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
 var ItemIcon = require('./ItemIcon.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
 
 const ErrorHeading = React.forwardRef(({ className, text, ...props }, ref) => {
   const styles = svaRecipe.dropdownRecipe();
@@ -22,7 +22,7 @@ const ErrorHeading = React.forwardRef(({ className, text, ...props }, ref) => {
     {
       role: "heading",
       "aria-level": 2,
-      className: clsx(styles["error-heading"], className),
+      className: clsx.clsx(styles["error-heading"], className),
       ...props,
       ref,
       children: [

package/dist/cjs/components/DropdownUI/InfoHeading.cjs

@@ -0,0 +1,42 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.1.3
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var ItemIcon = require('./ItemIcon.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
+
+const InfoHeading = React.forwardRef(({ className, text, ...props }, ref) => {
+  const styles = svaRecipe.dropdownRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      role: "heading",
+      "aria-level": 2,
+      className: clsx.clsx(styles["info-heading"], className),
+      ...props,
+      ref,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ItemIcon.ItemIcon,
+          {
+            type: svgIconType.SvgIconType.InfoCircle,
+            className: styles["info-heading-icon"]
+          }
+        ),
+        text
+      ]
+    }
+  );
+});
+
+exports.InfoHeading = InfoHeading;

package/dist/cjs/components/DropdownUI/Item.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -12,9 +12,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var usehooksTs = require('usehooks-ts');
-var svaRecipe = require('./sva-recipe.cjs');
-var itemContext = require('./item-context.cjs');
 var useForwardedRef = require('../../hooks/useForwardedRef.cjs');
+var itemContext = require('./item-context.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
 var utils = require('./utils.cjs');
 
 const Item = React.forwardRef(({ children, className, current = false, ...props }, ref) => {
@@ -25,7 +25,7 @@ const Item = React.forwardRef(({ children, className, current = false, ...props
     {
       ref,
       active: current,
-      className: clsx(styles.item, className),
+      className: clsx.clsx(styles.item, className),
       "data-current": current || void 0,
       role: "listitem",
       "aria-labelledby": id,

package/dist/cjs/components/DropdownUI/ItemIcon.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -58,10 +58,10 @@ function ItemIcon({
 }) {
   const { icon } = itemIcon({ framed });
   if ("type" in props && props?.type) {
-    return /* @__PURE__ */ jsxRuntime.jsx(GenericSvgIcon, { className: clsx(icon, className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(GenericSvgIcon, { className: clsx.clsx(icon, className), ...props });
   }
   if ("src" in props && props?.src) {
-    return /* @__PURE__ */ jsxRuntime.jsx(GenericImgIcon, { className: clsx(icon, className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(GenericImgIcon, { className: clsx.clsx(icon, className), ...props });
   }
   return null;
 }

package/dist/cjs/components/DropdownUI/ItemNestingIndicator.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -37,11 +37,10 @@ const itemNestedIndicatorRecipe = sva.sva({
 });
 const pluralRules = new Intl.PluralRules("en");
 const pluralForms = {
-  one: "child",
-  other: "children"
+  one: " child",
+  other: " children"
 };
 function ItemNestingIndicator({
-  // TODO: add tests for counter
   count,
   children
 }) {
@@ -52,8 +51,8 @@ function ItemNestingIndicator({
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: clsx(styles["counter-hidden-title"], visuallyHidden.visuallyHidden()),
-          children: pluralForms[pluralRules.select(1)]
+          className: clsx.clsx(styles["counter-hidden-title"], visuallyHidden.visuallyHidden()),
+          children: pluralForms[pluralRules.select(count)]
         }
       )
     ] }),

package/dist/cjs/components/DropdownUI/ItemTitle.cjs

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

package/dist/cjs/components/DropdownUI/List.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -11,22 +11,23 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var svaRecipe = require('./sva-recipe.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
 var box = require('../../styled-system/jsx/box.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
 
 const List = React.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { list } = svaRecipe.dropdownRecipe();
+    const sc = svaRecipe.scrollShadow();
     return /* @__PURE__ */ jsxRuntime.jsx(
       box.Box,
       {
         role: "list",
         "aria-label": "Options",
-        className: clsx(list, className),
+        className: clsx.clsx(list, sc, className),
         ...props,
         ref,
         children

package/dist/cjs/components/DropdownUI/ListHeader.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -18,7 +18,7 @@ const ListHeader = React.forwardRef(({ children, className, ...props }, ref) =>
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: clsx(styles["items-list-header"], className),
+      className: clsx.clsx(styles["items-list-header"], className),
       role: "heading",
       "aria-level": 2,
       ref,

package/dist/cjs/components/DropdownUI/LoadingItem.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -11,13 +11,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var svaRecipe = require('./sva-recipe.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
 var flex = require('../../styled-system/jsx/flex.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
 var skeleton = require('../../ui-kit/styled/skeleton.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
 
 const LoadingItem = React.forwardRef(({ className, delay = 300, ...props }, ref) => {
   const styles = svaRecipe.dropdownRecipe();
@@ -38,7 +38,7 @@ const LoadingItem = React.forwardRef(({ className, delay = 300, ...props }, ref)
   return /* @__PURE__ */ jsxRuntime.jsxs(
     flex.Flex,
     {
-      className: clsx(styles["loading-item-container"], className),
+      className: clsx.clsx(styles["loading-item-container"], className),
       ...props,
       ref,
       children: [

package/dist/cjs/components/DropdownUI/NoOptionsHeading.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -20,7 +20,7 @@ const NoOptionsHeading = React.forwardRef(({ className, text, ...props }, ref) =
     {
       role: "heading",
       "aria-level": 2,
-      className: clsx(styles["no-options-heading"], className),
+      className: clsx.clsx(styles["no-options-heading"], className),
       ...props,
       ref,
       children: text

package/dist/cjs/components/DropdownUI/Panel.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -11,17 +11,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var svaRecipe = require('./sva-recipe.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
 var box = require('../../styled-system/jsx/box.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
 
 const Panel = React.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { panel } = svaRecipe.dropdownRecipe();
-    return /* @__PURE__ */ jsxRuntime.jsx(box.Box, { className: clsx(panel, className), ref, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(box.Box, { className: clsx.clsx(panel, className), ref, ...props, children });
   }
 );
 

package/dist/cjs/components/DropdownUI/PopoverContainer.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -11,12 +11,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var svaRecipe = require('./sva-recipe.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
 var box = require('../../styled-system/jsx/box.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
 
 const PopoverContainer = React.forwardRef(({ children, className, ...props }, ref) => {
   const styles = svaRecipe.dropdownRecipe({});
@@ -24,7 +24,7 @@ const PopoverContainer = React.forwardRef(({ children, className, ...props }, re
     box.Box,
     {
       ref,
-      className: clsx(styles["popover-container"], className),
+      className: clsx.clsx(styles["popover-container"], className),
       ...props,
       children
     }

package/dist/cjs/components/DropdownUI/Search.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.3
  */
 'use client';
 
@@ -11,10 +11,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var svaRecipe = require('./sva-recipe.cjs');
 var useEventStopPropagation = require('../../hooks/useEventStopPropagation.cjs');
 var input = require('../../ui-kit/styled/input.cjs');
 var constants = require('./constants.cjs');
+var svaRecipe = require('./sva-recipe.cjs');
 
 const Search = React.forwardRef(
   ({ value, onChange, autoFocus, className, placeholder, ...props }, ref) => {
@@ -27,7 +27,7 @@ const Search = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(
         input.Input,
         {
-          className: clsx(styles["search-input"], className),
+          className: clsx.clsx(styles["search-input"], className),
           role: "searchbox",
           placeholder: placeholder || "Start typing to search...",
           value,

package/dist/cjs/components/DropdownUI/constants.cjs

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