@integration-app/react 2.1.2 → 2.1.4

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.4
  */
 'use client';
 
@@ -11,7 +11,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var svaRecipe = require('./sva-recipe.cjs');
+var dropdown = require('../../recipes/dropdown.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
@@ -19,12 +19,12 @@ var box = require('../../styled-system/jsx/box.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
 
 const PopoverContainer = React.forwardRef(({ children, className, ...props }, ref) => {
-  const styles = svaRecipe.dropdownRecipe({});
+  const styles = dropdown.dropdownRecipe({});
   return /* @__PURE__ */ jsxRuntime.jsx(
     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.4
  */
 'use client';
 
@@ -11,14 +11,14 @@
 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 useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
+var dropdown = require('../../recipes/dropdown.cjs');
 var input = require('../../ui-kit/styled/input.cjs');
 var constants = require('./constants.cjs');
 
 const Search = React.forwardRef(
   ({ value, onChange, autoFocus, className, placeholder, ...props }, ref) => {
-    const styles = svaRecipe.dropdownRecipe();
+    const styles = dropdown.dropdownRecipe();
     function handleSearchChange(event) {
       onChange?.(event.target.value);
     }
@@ -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.4
  */
 'use client';
 

package/dist/cjs/components/DropdownUI/index.cjs

@@ -2,26 +2,27 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
+var BackButton = require('./BackButton.cjs');
 var Content = require('./Content.cjs');
-var Search = require('./Search.cjs');
-var Panel = require('./Panel.cjs');
-var List = require('./List.cjs');
-var Item = require('./Item.cjs');
-var NoOptionsHeading = require('./NoOptionsHeading.cjs');
 var ErrorHeading = require('./ErrorHeading.cjs');
-var LoadingItem = require('./LoadingItem.cjs');
-var ListHeader = require('./ListHeader.cjs');
-var BackButton = require('./BackButton.cjs');
+var InfoHeading = require('./InfoHeading.cjs');
+var Item = require('./Item.cjs');
 var ItemIcon = require('./ItemIcon.cjs');
-var ItemTitle = require('./ItemTitle.cjs');
 var ItemNestingIndicator = require('./ItemNestingIndicator.cjs');
+var ItemTitle = require('./ItemTitle.cjs');
+var List = require('./List.cjs');
+var ListHeader = require('./ListHeader.cjs');
+var LoadingItem = require('./LoadingItem.cjs');
+var NoOptionsHeading = require('./NoOptionsHeading.cjs');
+var Panel = require('./Panel.cjs');
 var PopoverContainer = require('./PopoverContainer.cjs');
+var Search = require('./Search.cjs');
 
 const DropdownUI = Object.assign(PopoverContainer.PopoverContainer, {
   Content: Content.Content,
@@ -33,6 +34,7 @@ const DropdownUI = Object.assign(PopoverContainer.PopoverContainer, {
   BackButton: BackButton.BackButton,
   NoOptionsHeading: NoOptionsHeading.NoOptionsHeading,
   ErrorHeading: ErrorHeading.ErrorHeading,
+  InfoHeading: InfoHeading.InfoHeading,
   LoadingItem: LoadingItem.LoadingItem,
   ItemIcon: ItemIcon.ItemIcon,
   ItemTitle: ItemTitle.ItemTitle,

package/dist/cjs/components/DropdownUI/item-context.cjs

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

package/dist/cjs/components/DropdownUI/sva-recipe.cjs

@@ -2,181 +2,29 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 require('../../styled-system/css/css.cjs');
+var cva = require('../../styled-system/css/cva.cjs');
 require('../../styled-system/helpers.cjs');
-var sva = require('../../styled-system/css/sva.cjs');
 
-const dropdownRecipe = sva.sva({
-  className: "dropdown",
-  slots: [
-    "popover-container",
-    "content",
-    "panel",
-    "search-input",
-    "search-divider",
-    "list",
-    "item",
-    "no-options-heading",
-    "error-heading",
-    "error-heading-icon",
-    "loading-item-container",
-    "loading-item-icon",
-    "loading-item-title",
-    "items-list-header",
-    "item-title"
-  ],
+const scrollShadow = cva.cva({
   base: {
-    "popover-container": {
-      outline: "none",
-      display: "flex",
-      overflow: "hidden",
-      background: "white",
-      boxShadow: "xl",
-      rounded: "lg",
-      borderColor: "gray.2",
-      borderWidth: "0.5",
-      padding: "0",
-      maxW: "none",
-      maxH: "var(--available-height, 100%)",
-      h: "full",
-      w: "fit-content"
-    },
-    content: {
-      display: "flex",
-      flexDir: "column",
-      p: "1.5",
-      w: "full",
-      minW: "56",
-      maxW: "min(65em, 90vw)",
-      maxH: "var(--available-height, 100%)"
-    },
-    panel: {
-      display: "flex",
-      flexDir: "column",
-      overflow: "hidden",
-      pb: "1.5",
-      minH: "8",
-      _last: {
-        pb: "0"
-      }
-    },
-    "search-input": {
-      w: "full",
-      rounded: "none",
-      border: "none",
-      px: "2",
-      py: "1.5",
-      textStyle: "md",
-      fontWeight: "medium",
-      _placeholder: {}
-    },
-    "search-divider": {
-      pt: "0.5",
-      pb: "1.5"
-    },
-    list: {
-      overflowY: "auto",
-      position: "relative",
-      flexGrow: "1",
-      minH: "8",
-      maxW: "md"
-    },
-    item: {
-      display: "flex",
-      flexDir: "row",
-      gap: "1.5",
-      alignItems: "center",
-      px: "2",
-      py: "1",
-      cursor: "pointer",
-      minH: "6",
-      _hover: {
-        bg: "slate.3"
-      },
-      _current: {
-        bg: "slate.3"
-      },
-      rounded: "md"
-    },
-    "no-options-heading": {
-      display: "flex",
-      flexDir: "row",
-      gap: "1.5",
-      alignItems: "center",
-      px: "2",
-      py: "1",
-      minH: "6",
-      color: "slate.10",
-      fontWeight: "medium",
-      textStyle: "sm"
-    },
-    "error-heading": {
-      display: "flex",
-      flexDir: "row",
-      gap: "1.5",
-      alignItems: "center",
-      px: "2",
-      py: "1",
-      minH: "6",
-      fontWeight: "medium",
-      textStyle: "sm"
-    },
-    "error-heading-icon": {
-      color: "tomato.10",
-      h: "7",
-      w: "7"
-    },
-    "loading-item-container": {
-      display: "flex",
-      flexDir: "row",
-      gap: "1.5",
-      alignItems: "center",
-      px: "2",
-      py: "1"
-    },
-    "loading-item-icon": {
-      h: "6",
-      w: "6",
-      rounded: "md"
-    },
-    "loading-item-title": {
-      h: "5",
-      w: "3/5",
-      rounded: "md"
-    },
-    "items-list-header": {
-      display: "flex",
-      p: "2",
-      color: "slate.11",
-      textTransform: "uppercase",
-      fontSize: "xs",
-      fontWeight: "medium",
-      letterSpacing: "wide",
-      position: "sticky",
-      top: "0",
-      zIndex: "docked",
-      minH: "auto",
-      pointerEvents: "none",
-      background: "white"
-    },
-    "item-title": {
-      display: "flex",
-      flexGrow: "1",
-      flexDir: "row",
-      alignItems: "baseline",
-      gap: "1",
-      maxW: "full",
-      overflowWrap: "break-word",
-      textStyle: "sm",
-      fontWeight: "medium"
-    }
+    background: `
+      linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)),
+      linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%,
+      radial-gradient(farthest-side at 50% 0, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)),
+      radial-gradient(farthest-side at 50% 100%, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)) 0 100%
+    `,
+    backgroundColor: "transparent",
+    backgroundRepeat: "no-repeat",
+    backgroundAttachment: "local, local, scroll, scroll",
+    backgroundSize: "100% 15px, 100% 15px, 100% 2px, 100% 2px"
   }
 });
 
-exports.dropdownRecipe = dropdownRecipe;
+exports.scrollShadow = scrollShadow;

package/dist/cjs/components/DropdownUI/utils.cjs

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

package/dist/cjs/components/Formula/index.cjs

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

package/dist/cjs/components/Formula/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.4
  */
 'use client';
 

package/dist/cjs/components/InlineEditable.cjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var React = require('react');
+var clsx = require('clsx');
 var InlineEditable_module = require('./InlineEditable.module.css.cjs');
 
 function InlineEditable({
@@ -60,7 +60,7 @@ function InlineEditable({
   const style = {
     "--placeholder-text": `"${placeholderText}"`
   };
-  const classNames = clsx(
+  const classNames = clsx.clsx(
     InlineEditable_module.default.wrapper,
     className,
     requiredWarning && InlineEditable_module.default.wrapperRequired

package/dist/cjs/components/InlineEditable.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.4
  */
 'use client';
 

package/dist/cjs/components/Input/Input.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -11,8 +11,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var useAutofocus = require('../../helpers/hooks/useAutofocus.cjs');
 var Input_module = require('./Input.module.css.cjs');
-var useAutofocus = require('../../hooks/useAutofocus.cjs');
 
 const Input = React.forwardRef(
   ({ variant, className, autoFocus, ...props }, ref) => {
@@ -24,7 +24,7 @@ const Input = React.forwardRef(
       {
         ref: inputRef,
         autoComplete: "off",
-        className: clsx(
+        className: clsx.clsx(
           Input_module.default["uikit-input"],
           getClassNameByVariant(variant),
           className

package/dist/cjs/components/Input/Input.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.4
  */
 'use client';
 

package/dist/cjs/components/Input/SearchInput.cjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var React = require('react');
+var clsx = require('clsx');
 var Input = require('./Input.cjs');
 var SearchInput_module = require('./SearchInput.module.css.cjs');
 
@@ -20,7 +20,7 @@ const SearchInput = React.forwardRef(
       Input.Input,
       {
         id: "search-input",
-        className: clsx(className, SearchInput_module.default["uikit-searchInput"]),
+        className: clsx.clsx(className, SearchInput_module.default["uikit-searchInput"]),
         type: "search",
         ...props,
         ref

package/dist/cjs/components/Input/SearchInput.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.4
  */
 'use client';
 

package/dist/cjs/components/Input/index.cjs

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

package/dist/cjs/components/IntegrationElements/DataSource/DataCollectionSelect.cjs

@@ -2,22 +2,22 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var integrationElementContext = require('../integration-element-context.cjs');
-var useSWR = require('swr');
 var sdk = require('@integration-app/sdk');
 var jsConvertCase = require('js-convert-case');
-var index = require('../../DataBuilderUI/index.cjs');
+var useSWR = require('swr');
 var ComboBox = require('../../ComboBox/ComboBox.cjs');
 var Form = require('../../DataBuilder/Form.cjs');
-var index$1 = require('../../DataBuilder/index.cjs');
 var integrationAppContext = require('../../../contexts/integration-app-context.cjs');
+var index$1 = require('../../DataBuilder/index.cjs');
+var index = require('../../DataBuilderUI/index.cjs');
+var integrationElementContext = require('../integration-element-context.cjs');
 
 function DataCollectionSelect({
   value,

package/dist/cjs/components/IntegrationElements/DataSource/UdmSelect.cjs

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

package/dist/cjs/components/IntegrationElements/DataSource/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,17 +10,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var sdk = require('@integration-app/sdk');
-var integrationElementContext = require('../integration-element-context.cjs');
-var DataCollectionSelect = require('./DataCollectionSelect.cjs');
-var UdmSelect = require('./UdmSelect.cjs');
 var AdvancedOptions = require('../../AdvancedOptions.cjs');
 var SimpleInput = require('../../SimpleInput/SimpleInput.cjs');
+require('react');
+require('clsx');
 require('../../DataBuilderUI/index.cjs');
 require('../../Textarea/index.cjs');
 require('../../SimpleInput/SimpleInput.module.css.cjs');
-require('clsx');
-require('react');
 require('../../Radio/index.cjs');
+var integrationElementContext = require('../integration-element-context.cjs');
+var DataCollectionSelect = require('./DataCollectionSelect.cjs');
+var UdmSelect = require('./UdmSelect.cjs');
 
 function DataSourceConfig(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(LevelSpecificDataSourceConfig, { ...props }) });
@@ -100,6 +100,5 @@ function DataSourceConfigureEvents({
   ] });
 }
 
-exports.DataCollectionSelect = DataCollectionSelect.DataCollectionSelect;
 exports.DataSourceConfig = DataSourceConfig;
 exports.DataSourceConfigureEvents = DataSourceConfigureEvents;

package/dist/cjs/components/IntegrationElements/integration-element-context.cjs

@@ -2,17 +2,17 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var sdk = require('@integration-app/sdk');
 var React = require('react');
-var integrationAppIntegrationContext = require('../../contexts/integration-app-integration-context.cjs');
+var sdk = require('@integration-app/sdk');
 var integrationAppConnectionContext = require('../../contexts/integration-app-connection-context.cjs');
+var integrationAppIntegrationContext = require('../../contexts/integration-app-integration-context.cjs');
 
 const IntegrationElementContext = React.createContext({});
 function useIntegrationElementContext() {

package/dist/cjs/components/Integrations/IntegrationAvatar/index.cjs

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

package/dist/cjs/components/Integrations/IntegrationItem/index.cjs

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

package/dist/cjs/components/Integrations/IntegrationItemSkeleton.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
@@ -10,13 +10,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var skeleton = require('../../ui-kit/styled/skeleton.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');
 var circle = require('../../styled-system/jsx/circle.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
+var skeleton = require('../../ui-kit/styled/skeleton.cjs');
 
 const IntegrationItemSkeleton = React.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/cjs/components/Notification/Notification.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.4
  */
 'use client';