@membranehq/react 0.1.0

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

@@ -0,0 +1,47 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import useEventStopPropagation from '../../helpers/hooks/useEventStopPropagation.mjs';
+import { dropdownRecipe } from '../../recipes/dropdown.mjs';
+import { Input } from '../../ui-kit/styled/input.mjs';
+import { DROPDOWN_SEARCH_INPUT_ID } from './constants.mjs';
+
+const Search = forwardRef(
+  ({ value, onChange, autoFocus, className, placeholder, ...props }, ref) => {
+    const styles = dropdownRecipe();
+    function handleSearchChange(event) {
+      onChange?.(event.target.value);
+    }
+    const handleEventAndStopPropagation = useEventStopPropagation(true);
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        className: 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": DROPDOWN_SEARCH_INPUT_ID,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+const SearchDivider = () => {
+  const styles = dropdownRecipe();
+  return /* @__PURE__ */ jsx("hr", { className: styles["search-divider"] });
+};
+
+export { Search, SearchDivider };

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

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

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

@@ -0,0 +1,47 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { BackButton } from './BackButton.mjs';
+import { ClearSearchButton } from './ClearSearchButton.mjs';
+import { Content } from './Content.mjs';
+import { ErrorHeading } from './ErrorHeading.mjs';
+import { InfoHeading } from './InfoHeading.mjs';
+import { Item } from './Item.mjs';
+import { ItemHint } from './ItemHint.mjs';
+import { ItemIcon } from './ItemIcon.mjs';
+import { ItemNestingIndicator } from './ItemNestingIndicator.mjs';
+import { ItemTitle } from './ItemTitle.mjs';
+import { List } from './List.mjs';
+import { ListHeader } from './ListHeader.mjs';
+import { LoadingItem } from './LoadingItem.mjs';
+import { NoOptionsHeading } from './NoOptionsHeading.mjs';
+import { Panel } from './Panel.mjs';
+import { PopoverContainer } from './PopoverContainer.mjs';
+import { SearchDivider, Search } from './Search.mjs';
+
+const DropdownUI = Object.assign(PopoverContainer, {
+  Content,
+  Search,
+  SearchDivider,
+  ClearSearchButton,
+  Panel,
+  List,
+  Item,
+  ListHeader,
+  BackButton,
+  NoOptionsHeading,
+  ErrorHeading,
+  InfoHeading,
+  LoadingItem,
+  ItemIcon,
+  ItemTitle,
+  ItemNestingIndicator,
+  ItemHint
+});
+
+export { DropdownUI };

package/dist/esm/components/DropdownUI/item-aria-context.mjs

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

package/dist/esm/components/DropdownUI/sva-recipe.mjs

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

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

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

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

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

package/dist/esm/components/IntegrationElements/DataSource/DataCollectionSelect.mjs

@@ -0,0 +1,118 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { getFormula, parseDataLocationPath, DataLocationType, schemaWithTitle } from '@membranehq/sdk';
+import { toHeaderCase } from 'js-convert-case';
+import useSWR from 'swr';
+import { ComboBox } from '../../ComboBox/ComboBox.mjs';
+import { DataBuilderForm } from '../../DataBuilder/Form.mjs';
+import { useIntegrationApp } from '../../../contexts/integration-app-context.mjs';
+import { makeDataField } from '../../DataBuilder/index.mjs';
+import '../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../DataBuilderUI/ActionBar.mjs';
+import { Cell } from '../../DataBuilderUI/Cell.mjs';
+import 'clsx';
+import '../../DataBuilderUI/styles.module.css.mjs';
+import { Row } from '../../DataBuilderUI/Row.mjs';
+import '../../DataBuilderUI/Title.mjs';
+import { useIntegrationElementContext } from '../integration-element-context.mjs';
+
+function DataCollectionSelect({
+  value,
+  onChange,
+  variablesSchema
+}) {
+  const { integrationId } = useIntegrationElementContext();
+  const client = useIntegrationApp();
+  let currentKey = value?.collectionKey;
+  let currentParameters = value?.collectionParameters;
+  const isDynamicLocation = !!getFormula(currentKey);
+  if (value?.path && !currentKey) {
+    const pointer = 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 != DataLocationType.directory);
+  const options = [];
+  filtered.map((location2) => {
+    options.push({
+      value: location2.key,
+      label: location2.name?.toString() ?? 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell, { type: "name", children: "Data Collection" }),
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", disabled: isLoading, span: "grow", children: /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          value: currentKey,
+          onChange: handleKeyChange,
+          disabled: isLoading,
+          options: options?.length > 0 ? options : void 0,
+          schema: { type: "string" },
+          variablesSchema
+        }
+      ) })
+    ] }),
+    showParameters && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+      DataBuilderForm,
+      {
+        onChange: handleParametersChange,
+        field: makeDataField({
+          schema: schemaWithTitle(
+            location ? location.parametersSchema : {
+              type: "object",
+              additionalProperties: true
+            },
+            "Parameters"
+          ),
+          value: currentParameters,
+          variablesSchema
+        })
+      }
+    ) })
+  ] });
+}
+
+export { DataCollectionSelect };

package/dist/esm/components/IntegrationElements/DataSource/UdmSelect.mjs

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

package/dist/esm/components/IntegrationElements/DataSource/index.mjs

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

package/dist/esm/components/IntegrationElements/integration-element-context.mjs

@@ -0,0 +1,42 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { IntegrationElementLevel } from '@membranehq/sdk';
+import { useIntegrationAppConnection, IntegrationAppConnectionProvider } from '../../contexts/integration-app-connection-context.mjs';
+import { useIntegrationAppIntegration, IntegrationAppIntegrationProvider } from '../../contexts/integration-app-integration-context.mjs';
+
+const IntegrationElementContext = createContext({});
+function useIntegrationElementContext() {
+  return useContext(IntegrationElementContext);
+}
+const IntegrationElementProvider = ({
+  children,
+  integrationId: integrationIdfromParams,
+  connectionId: connectionIdFromParams
+}) => {
+  const { connectionId: connectionIdFromContext } = useIntegrationAppConnection();
+  const { integrationId: integrationIdFromContext } = useIntegrationAppIntegration();
+  const integrationId = integrationIdfromParams ?? integrationIdFromContext;
+  const connectionId = connectionIdFromParams ?? connectionIdFromContext;
+  const level = connectionId ? IntegrationElementLevel.CONNECTION : integrationId ? IntegrationElementLevel.CONNECTOR : IntegrationElementLevel.UNIVERSAL;
+  return /* @__PURE__ */ jsx(
+    IntegrationElementContext.Provider,
+    {
+      value: {
+        integrationId,
+        connectionId,
+        level
+      },
+      children: /* @__PURE__ */ jsx(IntegrationAppIntegrationProvider, { integrationId, children: /* @__PURE__ */ jsx(IntegrationAppConnectionProvider, { connectionId, children }) })
+    }
+  );
+};
+
+export { IntegrationElementProvider, useIntegrationElementContext };

package/dist/esm/components/Integrations/IntegrationAvatar/index.mjs

@@ -0,0 +1,48 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { IconMoodSadFilled, IconMoodSmileFilled } from '@tabler/icons-react';
+import 'react';
+import '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import '../../../styled-system/jsx/is-valid-prop.mjs';
+import { Box } from '../../../styled-system/jsx/box.mjs';
+import { VisuallyHidden } from '../../../styled-system/jsx/visually-hidden.mjs';
+import { Avatar } from '../../../ui-kit/avatar.mjs';
+import { Icon } from '../../../ui-kit/styled/icon.mjs';
+
+const IntegrationAvatarStatus = ({ integration, ...props }) => {
+  if (!integration.connection) return null;
+  const disconnected = integration.connection.disconnected;
+  const StatusIcon = disconnected ? IconMoodSadFilled : IconMoodSmileFilled;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        position: "absolute",
+        color: "white",
+        top: "-1.5",
+        right: "-1.5",
+        fill: disconnected ? "error.11" : "success.11",
+        bg: "white",
+        borderRadius: "full",
+        children: /* @__PURE__ */ jsx(StatusIcon, { "aria-hidden": "true", ...props })
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: disconnected ? " - disconnected" : " - connected" })
+  ] });
+};
+const IntegrationAvatar = ({ integration, ...props }) => {
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", ...props, children: [
+    /* @__PURE__ */ jsx(Avatar, { src: integration.logoUri, name: integration.name, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(IntegrationAvatarStatus, { integration })
+  ] });
+};
+
+export { IntegrationAvatar };

package/dist/esm/components/Integrations/IntegrationItem/index.mjs

@@ -0,0 +1,51 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { forwardRef, Children, Fragment as Fragment$1 } from 'react';
+import { Button } from '../../../ui-kit/button.mjs';
+import { Text } from '../../../ui-kit/styled/text.mjs';
+import { IntegrationAvatar } from '../IntegrationAvatar/index.mjs';
+
+const IntegrationItem = forwardRef(({ integration, children, asChild, ...props }, ref) => {
+  const hasDirectChild = Boolean(children && Children.only(children) && React.isValidElement(children));
+  const directDescendant = hasDirectChild ? children : /* @__PURE__ */ jsx(Fragment$1, {});
+  return /* @__PURE__ */ jsx(
+    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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { color: "gray.12", size: "xs", children: integration.name }),
+          /* @__PURE__ */ jsx(IntegrationAvatar, { integration })
+        ] })
+      })
+    }
+  );
+});
+
+export { IntegrationItem };

package/dist/esm/components/Integrations/IntegrationItemSkeleton.mjs

@@ -0,0 +1,46 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import { Flex } from '../../styled-system/jsx/flex.mjs';
+import { Circle } from '../../styled-system/jsx/circle.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import { Skeleton } from '../../ui-kit/styled/skeleton.mjs';
+
+const IntegrationItemSkeleton = forwardRef(
+  ({ ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        display: "flex",
+        bg: "white",
+        justifyContent: "start",
+        alignItems: "center",
+        gap: "2",
+        flexDirection: "column",
+        p: "3",
+        pt: "5",
+        borderRadius: "md",
+        minH: "28",
+        whiteSpace: "wrap",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Skeleton, { borderRadius: "full", children: /* @__PURE__ */ jsx(Circle, { size: "10" }) }),
+          /* @__PURE__ */ jsx(Skeleton, { h: "4", w: "3/5" })
+        ]
+      }
+    );
+  }
+);
+
+export { IntegrationItemSkeleton };