@membranehq/react 0.1.0

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

@@ -0,0 +1,50 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+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 = dropdown.dropdownRecipe();
+    function handleSearchChange(event) {
+      onChange?.(event.target.value);
+    }
+    const handleEventAndStopPropagation = useEventStopPropagation.default(true);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        className: clsx.clsx(styles["search-input"], className),
+        role: "searchbox",
+        placeholder: placeholder || "Start typing to search...",
+        value,
+        autoFocus,
+        onChange: handleSearchChange,
+        onKeyUp: handleEventAndStopPropagation,
+        onClick: handleEventAndStopPropagation,
+        "data-navigation-emitter-id": constants.DROPDOWN_SEARCH_INPUT_ID,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+const SearchDivider = () => {
+  const styles = dropdown.dropdownRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: styles["search-divider"] });
+};
+
+exports.Search = Search;
+exports.SearchDivider = SearchDivider;

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

@@ -0,0 +1,15 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+const DROPDOWN_NAVIGATOR_ID = "dropdown-navigator";
+const DROPDOWN_SEARCH_INPUT_ID = "dropdown-search-input";
+
+exports.DROPDOWN_NAVIGATOR_ID = DROPDOWN_NAVIGATOR_ID;
+exports.DROPDOWN_SEARCH_INPUT_ID = DROPDOWN_SEARCH_INPUT_ID;

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

@@ -0,0 +1,49 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var BackButton = require('./BackButton.cjs');
+var ClearSearchButton = require('./ClearSearchButton.cjs');
+var Content = require('./Content.cjs');
+var ErrorHeading = require('./ErrorHeading.cjs');
+var InfoHeading = require('./InfoHeading.cjs');
+var Item = require('./Item.cjs');
+var ItemHint = require('./ItemHint.cjs');
+var ItemIcon = require('./ItemIcon.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,
+  Search: Search.Search,
+  SearchDivider: Search.SearchDivider,
+  ClearSearchButton: ClearSearchButton.ClearSearchButton,
+  Panel: Panel.Panel,
+  List: List.List,
+  Item: Item.Item,
+  ListHeader: ListHeader.ListHeader,
+  BackButton: BackButton.BackButton,
+  NoOptionsHeading: NoOptionsHeading.NoOptionsHeading,
+  ErrorHeading: ErrorHeading.ErrorHeading,
+  InfoHeading: InfoHeading.InfoHeading,
+  LoadingItem: LoadingItem.LoadingItem,
+  ItemIcon: ItemIcon.ItemIcon,
+  ItemTitle: ItemTitle.ItemTitle,
+  ItemNestingIndicator: ItemNestingIndicator.ItemNestingIndicator,
+  ItemHint: ItemHint.ItemHint
+});
+
+exports.DropdownUI = DropdownUI;

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

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+
+const DropdownItemAriaContext = React.createContext({});
+const DropdownItemAriaContextProvider = DropdownItemAriaContext.Provider;
+const useDropdownItemAriaContext = () => {
+  return React.useContext(DropdownItemAriaContext);
+};
+
+exports.DropdownItemAriaContextProvider = DropdownItemAriaContextProvider;
+exports.useDropdownItemAriaContext = useDropdownItemAriaContext;

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

@@ -0,0 +1,30 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+require('../../styled-system/css/css.cjs');
+var cva = require('../../styled-system/css/cva.cjs');
+require('../../styled-system/helpers.cjs');
+
+const scrollShadow = cva.cva({
+  base: {
+    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.scrollShadow = scrollShadow;

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

@@ -0,0 +1,15 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+const preventFocusShift = (e) => {
+  e.preventDefault();
+};
+
+exports.preventFocusShift = preventFocusShift;

package/dist/cjs/components/FloatingPortalBoundary/index.cjs

@@ -0,0 +1,54 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@ark-ui/react');
+
+const BoundaryContext = React.createContext("");
+const BOUNDARY_DATA_KEY = "data-floating-portal-boundary";
+function FloatingPortalBoundary({
+  children,
+  id,
+  ...props
+}) {
+  const generatedId = React.useId();
+  if (!React.isValidElement(children)) {
+    if (process.env.NODE_ENV === "development") {
+      console.error("Error: FloatingPortalBoundary must have exactly one child element");
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(BoundaryContext.Provider, { value: id || generatedId, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(BoundaryContext.Provider, { value: id || generatedId, children: React.cloneElement(children, {
+    [BOUNDARY_DATA_KEY]: id || generatedId,
+    ...props,
+    ...children.props
+  }) });
+}
+function BoundedPortal({
+  children,
+  usePortal = true
+}) {
+  const boundaryId = React.useContext(BoundaryContext);
+  const [container, setContainer] = React.useState(null);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    const container2 = usePortal instanceof HTMLElement ? usePortal : document.querySelector(`[${BOUNDARY_DATA_KEY}="${boundaryId}"]`);
+    setContainer(container2);
+  }, []);
+  containerRef.current = container;
+  if (!containerRef.current) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { disabled: !usePortal, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { container: containerRef, disabled: !usePortal, children });
+}
+
+exports.BoundedPortal = BoundedPortal;
+exports.FloatingPortalBoundary = FloatingPortalBoundary;

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

@@ -0,0 +1,120 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@membranehq/sdk');
+var jsConvertCase = require('js-convert-case');
+var useSWR = require('swr');
+var ComboBox = require('../../ComboBox/ComboBox.cjs');
+var Form = require('../../DataBuilder/Form.cjs');
+var integrationAppContext = require('../../../contexts/integration-app-context.cjs');
+var index = require('../../DataBuilder/index.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../../DataBuilderUI/styles.module.css.cjs');
+var Row = require('../../DataBuilderUI/Row.cjs');
+require('../../DataBuilderUI/Title.cjs');
+var integrationElementContext = require('../integration-element-context.cjs');
+
+function DataCollectionSelect({
+  value,
+  onChange,
+  variablesSchema
+}) {
+  const { integrationId } = integrationElementContext.useIntegrationElementContext();
+  const client = integrationAppContext.useIntegrationApp();
+  let currentKey = value?.collectionKey;
+  let currentParameters = value?.collectionParameters;
+  const isDynamicLocation = !!sdk.getFormula(currentKey);
+  if (value?.path && !currentKey) {
+    const pointer = sdk.parseDataLocationPath(value?.path);
+    currentKey = pointer?.key;
+    currentParameters = pointer?.parameters;
+  }
+  const { data: location } = useSWR(
+    currentKey && !isDynamicLocation ? `/integrations/${integrationId}/data/${currentKey}` : null,
+    (uri) => client.get(uri)
+  );
+  const { data: locations = [], isLoading } = useSWR(`/integrations/${integrationId}/data`, (uri) => client.get(uri));
+  const filtered = locations.filter(({ type }) => type != sdk.DataLocationType.directory);
+  const options = [];
+  filtered.map((location2) => {
+    options.push({
+      value: location2.key,
+      label: location2.name?.toString() ?? jsConvertCase.toHeaderCase(location2.key)
+    });
+  });
+  function handleKeyChange(key) {
+    if (key !== currentKey) {
+      return onChange({
+        collectionKey: key,
+        collectionParameters: void 0,
+        // Backward compat
+        // Remove it when we migrated all the configs to not use path/defaultPath
+        path: void 0,
+        defaultPath: void 0
+      });
+    }
+  }
+  function handleParametersChange(parameters) {
+    const patch = currentKey ? {
+      collectionKey: currentKey,
+      collectionParameters: parameters
+    } : {
+      collectionKey: void 0,
+      collectionParameters: void 0
+    };
+    onChange({
+      ...patch,
+      // Backward compat
+      // Remove it when we migrated all the configs to not use path/defaultPath
+      path: void 0,
+      defaultPath: void 0
+    });
+  }
+  const showParameters = location?.parametersSchema || isDynamicLocation;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "name", children: "Data Collection" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", disabled: isLoading, span: "grow", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ComboBox.ComboBox,
+        {
+          value: currentKey,
+          onChange: handleKeyChange,
+          disabled: isLoading,
+          options: options?.length > 0 ? options : void 0,
+          schema: { type: "string" },
+          variablesSchema
+        }
+      ) })
+    ] }),
+    showParameters && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Form.DataBuilderForm,
+      {
+        onChange: handleParametersChange,
+        field: index.makeDataField({
+          schema: sdk.schemaWithTitle(
+            location ? location.parametersSchema : {
+              type: "object",
+              additionalProperties: true
+            },
+            "Parameters"
+          ),
+          value: currentParameters,
+          variablesSchema
+        })
+      }
+    ) })
+  ] });
+}
+
+exports.DataCollectionSelect = DataCollectionSelect;

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

@@ -0,0 +1,36 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@membranehq/sdk');
+var ComboBox = require('../../ComboBox/ComboBox.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../DataBuilderUI/ActionBar.cjs');
+var Cell = require('../../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../../DataBuilderUI/styles.module.css.cjs');
+var Row = require('../../DataBuilderUI/Row.cjs');
+require('../../DataBuilderUI/Title.cjs');
+
+function UdmSelect({ value, onChange }) {
+  const options = [];
+  for (const [key, udm] of Object.entries(sdk.UNIFIED_DATA_MODELS)) {
+    options.push({
+      label: udm.pluralName,
+      value: key
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Row.Row, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "name", children: "Data Model" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { type: "combobox", children: /* @__PURE__ */ jsxRuntime.jsx(ComboBox.ComboBox, { placeholder: "Select Universal Data Model", value, options, onChange }) })
+  ] });
+}
+
+exports.UdmSelect = UdmSelect;

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

@@ -0,0 +1,95 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sdk = require('@membranehq/sdk');
+var AdvancedOptions = require('../../AdvancedOptions.cjs');
+var SimpleInput = require('../../SimpleInput/SimpleInput.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+require('../../DataBuilderUI/ActionBar.cjs');
+require('../../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../../DataBuilderUI/styles.module.css.cjs');
+require('../../DataBuilderUI/Row.cjs');
+require('../../DataBuilderUI/Title.cjs');
+require('../../Textarea/index.cjs');
+require('../../SimpleInput/recipe.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 }) });
+}
+function LevelSpecificDataSourceConfig(props) {
+  const { level } = integrationElementContext.useIntegrationElementContext();
+  const { value, onChange, configureEvents } = props;
+  function patchValue(patch) {
+    onChange({
+      ...value ?? {},
+      ...patch
+    });
+  }
+  switch (level) {
+    case sdk.IntegrationElementLevel.UNIVERSAL:
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UdmSelect.UdmSelect, { value: value?.udm, onChange: (udm) => patchValue({ udm }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(AdvancedOptions.AdvancedOptions, { children: configureEvents && /* @__PURE__ */ jsxRuntime.jsx(DataSourceConfigureEvents, { value, onChange }) })
+      ] });
+    case sdk.IntegrationElementLevel.CONNECTOR:
+    case sdk.IntegrationElementLevel.CONNECTION:
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DataCollectionSelect.DataCollectionSelect,
+          {
+            value,
+            onChange: (value2) => patchValue(value2),
+            variablesSchema: props.variablesSchema
+          }
+        ),
+        configureEvents && /* @__PURE__ */ jsxRuntime.jsx(AdvancedOptions.AdvancedOptions, { openByDefault: !!(value?.pullUpdatesIntervalSeconds ?? value?.fullSyncIntervalSeconds), children: /* @__PURE__ */ jsxRuntime.jsx(DataSourceConfigureEvents, { value, onChange }) })
+      ] });
+    default:
+      return null;
+  }
+}
+function DataSourceConfigureEvents({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Change how often we pulls updates from the data source." }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SimpleInput.SimpleInput,
+      {
+        label: "Pull updates interval (seconds)",
+        value: value?.pullUpdatesIntervalSeconds?.toString(),
+        onChange: (pullUpdatesIntervalSeconds) => onChange({
+          ...value,
+          pullUpdatesIntervalSeconds: Number(pullUpdatesIntervalSeconds)
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SimpleInput.SimpleInput,
+      {
+        label: "Full sync interval (seconds)",
+        value: value?.fullSyncIntervalSeconds?.toString(),
+        onChange: (fullSyncIntervalSeconds) => onChange({
+          ...value,
+          fullSyncIntervalSeconds: Number(fullSyncIntervalSeconds)
+        })
+      }
+    )
+  ] });
+}
+
+exports.DataSourceConfig = DataSourceConfig;
+exports.DataSourceConfigureEvents = DataSourceConfigureEvents;

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

@@ -0,0 +1,45 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/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() {
+  return React.useContext(IntegrationElementContext);
+}
+const IntegrationElementProvider = ({
+  children,
+  integrationId: integrationIdfromParams,
+  connectionId: connectionIdFromParams
+}) => {
+  const { connectionId: connectionIdFromContext } = integrationAppConnectionContext.useIntegrationAppConnection();
+  const { integrationId: integrationIdFromContext } = integrationAppIntegrationContext.useIntegrationAppIntegration();
+  const integrationId = integrationIdfromParams ?? integrationIdFromContext;
+  const connectionId = connectionIdFromParams ?? connectionIdFromContext;
+  const level = connectionId ? sdk.IntegrationElementLevel.CONNECTION : integrationId ? sdk.IntegrationElementLevel.CONNECTOR : sdk.IntegrationElementLevel.UNIVERSAL;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IntegrationElementContext.Provider,
+    {
+      value: {
+        integrationId,
+        connectionId,
+        level
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(integrationAppIntegrationContext.IntegrationAppIntegrationProvider, { integrationId, children: /* @__PURE__ */ jsxRuntime.jsx(integrationAppConnectionContext.IntegrationAppConnectionProvider, { connectionId, children }) })
+    }
+  );
+};
+
+exports.IntegrationElementProvider = IntegrationElementProvider;
+exports.useIntegrationElementContext = useIntegrationElementContext;

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

@@ -0,0 +1,50 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var iconsReact = require('@tabler/icons-react');
+require('react');
+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');
+var visuallyHidden = require('../../../styled-system/jsx/visually-hidden.cjs');
+var avatar = require('../../../ui-kit/avatar.cjs');
+var icon = require('../../../ui-kit/styled/icon.cjs');
+
+const IntegrationAvatarStatus = ({ integration, ...props }) => {
+  if (!integration.connection) return null;
+  const disconnected = integration.connection.disconnected;
+  const StatusIcon = disconnected ? iconsReact.IconMoodSadFilled : iconsReact.IconMoodSmileFilled;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      icon.Icon,
+      {
+        position: "absolute",
+        color: "white",
+        top: "-1.5",
+        right: "-1.5",
+        fill: disconnected ? "error.11" : "success.11",
+        bg: "white",
+        borderRadius: "full",
+        children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { "aria-hidden": "true", ...props })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, { children: disconnected ? " - disconnected" : " - connected" })
+  ] });
+};
+const IntegrationAvatar = ({ integration, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(box.Box, { position: "relative", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(avatar.Avatar, { src: integration.logoUri, name: integration.name, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx(IntegrationAvatarStatus, { integration })
+  ] });
+};
+
+exports.IntegrationAvatar = IntegrationAvatar;

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

@@ -0,0 +1,53 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var button = require('../../../ui-kit/button.cjs');
+var text = require('../../../ui-kit/styled/text.cjs');
+var index = require('../IntegrationAvatar/index.cjs');
+
+const IntegrationItem = React.forwardRef(({ integration, children, asChild, ...props }, ref) => {
+  const hasDirectChild = Boolean(children && React.Children.only(children) && React.isValidElement(children));
+  const directDescendant = hasDirectChild ? children : /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      ref,
+      variant: "subtle",
+      display: "flex",
+      bg: {
+        base: "white",
+        _hover: "revert-layer"
+      },
+      justifyContent: "start",
+      alignItems: "center",
+      gap: "2",
+      flexDirection: "column-reverse",
+      maxH: "initial",
+      h: "initial",
+      p: "3",
+      pt: "5",
+      borderRadius: "md",
+      minH: "28",
+      whiteSpace: "wrap",
+      ...props,
+      asChild: asChild && hasDirectChild,
+      children: React.cloneElement(directDescendant, {
+        children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(text.Text, { color: "gray.12", size: "xs", children: integration.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.IntegrationAvatar, { integration })
+        ] })
+      })
+    }
+  );
+});
+
+exports.IntegrationItem = IntegrationItem;