@membranehq/react 0.1.0

package/dist/cjs/components/Tag/Components.cjs

@@ -0,0 +1,38 @@
+"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 clsx = require('clsx');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
+var styles_module = require('./styles.module.css.cjs');
+var index = require('../SvgIcon/index.cjs');
+
+function TagSvgIcon({ type, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { className: clsx.clsx(styles_module.default.tagIcon, className), type, ...props });
+}
+function TagImage({ className, alt, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("img", { alt, className: clsx.clsx(styles_module.default.tagIcon, styles_module.default.tagImageIcon, className), ...props });
+}
+function TagConfigButton({ error = false, icon = svgIconType.SvgIconType.Settings, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx.clsx(styles_module.default.tagConfigButton, error && styles_module.default.tagConfigButtonError),
+      onClick: useEventStopPropagation.default(onClick),
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: icon })
+    }
+  );
+}
+
+exports.TagConfigButton = TagConfigButton;
+exports.TagImage = TagImage;
+exports.TagSvgIcon = TagSvgIcon;

package/dist/cjs/components/Tag/Tag.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 clsx = require('clsx');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../helpers/hooks/useEventStopPropagation.cjs');
+var index$1 = require('../Truncate/index.cjs');
+var Components = require('./Components.cjs');
+var styles_module = require('./styles.module.css.cjs');
+var index = require('../Tooltip/index.cjs');
+
+const GenericTag = React.forwardRef(function({ truncate, inactive, disabled, className, onClick, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: clsx.clsx(styles_module.default.tagGeneric, (inactive || disabled) && styles_module.default.tagGeneric__disabled, className),
+      ref,
+      onClick: useEventStopPropagation.default(onClick),
+      ...props,
+      children: truncate ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Truncate, { children }) : children
+    }
+  );
+});
+const TagBasic = React.forwardRef(function({ className, tooltip, ...props }, ref) {
+  if (tooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(GenericTag, { ref, className: className || styles_module.default.tagDefaultColors, ...props }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(GenericTag, { ref, className: className || styles_module.default.tagDefaultColors, ...props });
+});
+const Tag = Object.assign(TagBasic, {
+  SvgIcon: Components.TagSvgIcon,
+  Image: Components.TagImage,
+  ConfigButton: Components.TagConfigButton,
+  Lookup: TagLookup
+});
+function TagLookup({ children, disabled = false, onConfigClick, configError }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Tag.SvgIcon, { type: svgIconType.SvgIconType.Lookup }),
+    children,
+    !disabled && /* @__PURE__ */ jsxRuntime.jsx(Tag.ConfigButton, { onClick: onConfigClick, error: configError })
+  ] });
+}
+
+exports.GenericTag = GenericTag;
+exports.Tag = Tag;

package/dist/cjs/components/Tag/TagPlaceholder.cjs

@@ -0,0 +1,29 @@
+"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 styles_module = require('./styles.module.css.cjs');
+var Tag = require('./Tag.cjs');
+
+const TagPlaceholder = React.forwardRef(function({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag.Tag,
+    {
+      ref,
+      className: clsx.clsx(styles_module.default.tagPlaceholder, !!props?.onClick && styles_module.default.tagPlaceholder__clickable, className),
+      ...props,
+      children
+    }
+  );
+});
+
+exports.TagPlaceholder = TagPlaceholder;

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

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".styles-module_tagGeneric__tz0VU {\n  position: relative;\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  max-width: 100%;\n  min-height: 2rem;\n}\n\n.styles-module_tagGeneric__disabled__vgck7 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n\n.styles-module_tagGeneric__disabled__vgck7:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));\n}\n\n.styles-module_tagGeneric__disabled__vgck7 {\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n}\n\n.styles-module_tagDefaultColors__JlCHo {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n  border-width: 1px;\n  border-color: transparent;\n}\n\n.styles-module_tagDefaultColors__JlCHo:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(15 76 117 / var(--tw-bg-opacity, 1));\n}\n\n/* iconBefore */\n\n.styles-module_tagIcon__vEYaV {\n  flex-shrink: 0;\n  flex-grow: 0;\n  margin-right: 0.375rem;\n  height: 1.25rem;\n  width: 1.25rem;\n  margin-top: 0.025rem;\n}\n\n.styles-module_tagImageIcon__rokoa {\n  height: auto;\n  max-height: 1.25rem;\n  --tw-brightness: brightness(.5);\n  --tw-contrast: contrast(1.5);\n  --tw-grayscale: grayscale(100%);\n  --tw-invert: invert(100%);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.styles-module_tagConfigButton__3WdyL {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  height: 2rem;\n  width: 2rem;\n  border-top-right-radius: 0.25rem;\n  border-bottom-right-radius: 0.25rem;\n  transform: translateX(0.625rem);\n  border-left-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n\n.styles-module_tagConfigButton__3WdyL:hover {\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n  --tw-bg-opacity: 0.1;\n}\n\n.styles-module_tagConfigButton__3WdyL svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\n.styles-module_tagConfigButtonError__iTyh4 {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 54 5 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity, 1));\n}\n\n.styles-module_tagConfigButtonError__iTyh4:hover {\n  background-color: #9b2900;\n}\n\n/* ## Placeholder */\n\n.styles-module_tagPlaceholder__c2oMP {\n  background-color: transparent;\n  --tw-text-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-text-opacity, 1));\n}\n\n.styles-module_tagPlaceholder__clickable__Spl2o {\n  cursor: pointer;\n}\n\n.styles-module_tagPlaceholder__clickable__Spl2o:not(.styles-module_tagGeneric__disabled__vgck7):hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity, 1));\n}\n\n.styles-module_tagPlaceholder__c2oMP:empty {\n  width: 100%;\n  min-width: 7rem;\n  min-height: auto;\n}\n";
+var classes = {"tagGeneric":"styles-module_tagGeneric__tz0VU","tagGeneric__disabled":"styles-module_tagGeneric__disabled__vgck7","tagDefaultColors":"styles-module_tagDefaultColors__JlCHo","tagIcon":"styles-module_tagIcon__vEYaV","tagImageIcon":"styles-module_tagImageIcon__rokoa","tagConfigButton":"styles-module_tagConfigButton__3WdyL","tagConfigButtonError":"styles-module_tagConfigButtonError__iTyh4","tagPlaceholder":"styles-module_tagPlaceholder__c2oMP","tagPlaceholder__clickable":"styles-module_tagPlaceholder__clickable__Spl2o"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/Textarea/index.cjs

@@ -0,0 +1,48 @@
+"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 recipe = require('./recipe.cjs');
+
+const CssPropTextareaMaxHeight = "--uikit-textarea-max-height";
+const Textarea = React.forwardRef(({ autoHeight, ...props }, ref) => {
+  if (autoHeight) {
+    return /* @__PURE__ */ jsxRuntime.jsx(TextareaWithAutoHeight, { ref, ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(GenericTextarea, { ref, ...props });
+});
+Textarea.displayName = "Textarea";
+const textAreaClassName = recipe.textAreaRecipe();
+const GenericTextarea = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref, className: clsx.clsx(textAreaClassName, className), ...props, children });
+  }
+);
+const textAreaWrapperClassName = recipe.textAreaWrapperRecipe();
+const TextareaWithAutoHeight = React.forwardRef(
+  ({ maxHeight = "auto", ...props }, ref) => {
+    const refWrapper = React.useRef(null);
+    const handleOnInput = (e) => {
+      const wrapper = refWrapper.current;
+      if (wrapper) {
+        wrapper.dataset.replicatedValue = e.target.value;
+      }
+    };
+    React.useEffect(() => {
+      const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+      refWrapper?.current?.style.setProperty(CssPropTextareaMaxHeight, `${maxHeightValue}`);
+    }, [maxHeight]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: refWrapper, className: textAreaWrapperClassName, children: /* @__PURE__ */ jsxRuntime.jsx(GenericTextarea, { ref, onInput: handleOnInput, ...props }) });
+  }
+);
+
+exports.Textarea = Textarea;

package/dist/cjs/components/Textarea/recipe.cjs

@@ -0,0 +1,71 @@
+"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 textAreaRecipe = cva.cva({
+  base: {
+    w: "full",
+    py: "2",
+    px: "4",
+    rounded: "sm",
+    transition: "all",
+    transitionDuration: "faster",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    borderStyle: "solid",
+    bg: "transparent",
+    color: "black",
+    _focus: {
+      outline: "none"
+    },
+    _placeholder: {
+      color: "neutral.9"
+    },
+    _disabled: {
+      color: "neutral.8",
+      _placeholder: {
+        color: "neutral.7"
+      }
+    }
+  }
+});
+const textAreaWrapperRecipe = cva.cva({
+  base: {
+    display: "grid",
+    w: "full",
+    overflowY: "hidden",
+    _after: {
+      content: "attr(data-replicated-value) ' '",
+      whiteSpace: "pre-wrap",
+      visibility: "hidden",
+      maxH: "var(--uikit-textarea-max-height, auto)",
+      rounded: "sm",
+      px: "4",
+      py: "2",
+      transition: "all",
+      transitionDuration: "faster",
+      borderWidth: "1px",
+      borderColor: "transparent",
+      borderStyle: "solid",
+      gridArea: "1 / 1 / 2 / 2"
+    },
+    "& > textarea": {
+      resize: "none",
+      overflow: "auto",
+      gridArea: "1 / 1 / 2 / 2"
+    }
+  }
+});
+
+exports.textAreaRecipe = textAreaRecipe;
+exports.textAreaWrapperRecipe = textAreaWrapperRecipe;

package/dist/cjs/components/Toggle/index.cjs

@@ -0,0 +1,18 @@
+"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 _switch = require('../../ui-kit/switch.cjs');
+
+function Toggle(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch, { ...props, size: "md" });
+}
+
+exports.Toggle = Toggle;

package/dist/cjs/components/Tooltip/index.cjs

@@ -0,0 +1,116 @@
+"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 index = require('../FloatingPortalBoundary/index.cjs');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+var index$1 = require('../../styled-system/tokens/index.cjs');
+var tooltip = require('../../ui-kit/styled/tooltip.cjs');
+
+const tooltipRecipe = sva.sva({
+  className: "tooltip",
+  slots: ["content", "arrow-tip"],
+  base: {
+    content: {
+      shadow: "none",
+      fontWeight: "normal"
+    }
+  },
+  variants: {
+    type: {
+      default: {
+        content: {
+          background: "neutral.3",
+          rounded: "sm",
+          color: "black"
+        },
+        "arrow-tip": {
+          background: "neutral.3!"
+        }
+      },
+      dropdown: {
+        content: {
+          background: "black",
+          rounded: "xl",
+          color: "white",
+          fontWeight: "medium",
+          px: "2",
+          py: "1.5",
+          maxW: "full"
+        },
+        "arrow-tip": {
+          background: "black!"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
+const Tooltip = React.forwardRef(
+  ({
+    tooltip: tooltip$1,
+    placement = "right",
+    delayToShow = 300,
+    delayToHide = 50,
+    offset = [0, 6],
+    className,
+    children,
+    disabled,
+    withArrow = true,
+    type = "default",
+    usePortal = false,
+    id
+  }, ref) => {
+    const styles = tooltipRecipe({ type });
+    const [crossAxis, mainAxis] = offset;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      tooltip.Root,
+      {
+        lazyMount: true,
+        openDelay: delayToShow,
+        closeDelay: delayToHide,
+        positioning: {
+          offset: {
+            mainAxis,
+            crossAxis
+          },
+          placement
+        },
+        disabled,
+        ids: {
+          trigger: id
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(tooltip.Trigger, { asChild: true, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.BoundedPortal, { usePortal, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Positioner, { className, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Content, { className: styles.content, children: [
+            withArrow && /* @__PURE__ */ jsxRuntime.jsx(
+              tooltip.Arrow,
+              {
+                style: {
+                  // https://github.com/cschroeter/park-ui/issues/411
+                  "--arrow-size": index$1.token(`spacing.2`)
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.ArrowTip, { className: styles["arrow-tip"] })
+              }
+            ),
+            tooltip$1
+          ] }) }) })
+        ]
+      }
+    );
+  }
+);
+
+exports.Tooltip = Tooltip;

package/dist/cjs/components/Truncate/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 useIsTextTruncated = require('../../helpers/hooks/useIsTextTruncated.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 index = require('../Tooltip/index.cjs');
+
+function Truncate({
+  children,
+  endLetters = 5,
+  className,
+  id,
+  placement,
+  offset,
+  usePortal,
+  tooltipBuilder = (children2) => children2,
+  ...rest
+}) {
+  const overflowContainer = React.useRef(null);
+  const isTruncated = useIsTextTruncated.useIsTextTruncated(overflowContainer);
+  if (typeof children !== "string" || children.length < endLetters) {
+    return className ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, id, ...rest, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.Tooltip,
+    {
+      disabled: !isTruncated,
+      tooltip: tooltipBuilder(children),
+      type: "dropdown",
+      withArrow: false,
+      placement,
+      offset,
+      usePortal,
+      id,
+      children: /* @__PURE__ */ jsxRuntime.jsx(box.Box, { ref: overflowContainer, className, truncate: true, ...rest, children })
+    }
+  );
+}
+
+exports.Truncate = Truncate;

package/dist/cjs/contexts/integration-app-client-context.cjs

@@ -0,0 +1,28 @@
+"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');
+
+const IntegrationAppClientContext = React.createContext({
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'Integration... Remove this comment to see the full error message
+  client: null
+});
+IntegrationAppClientContext.displayName = "IntegrationAppClientContext";
+const IntegrationAppClientProvider = ({ client, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IntegrationAppClientContext.Provider, { value: { client }, children });
+};
+function useIntegrationAppClient() {
+  return React.useContext(IntegrationAppClientContext);
+}
+
+exports.IntegrationAppClientProvider = IntegrationAppClientProvider;
+exports.useIntegrationAppClient = useIntegrationAppClient;

package/dist/cjs/contexts/integration-app-connection-context.cjs

@@ -0,0 +1,29 @@
+"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');
+
+const IntegrationAppConnectionContext = React.createContext({
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'string'.
+  connectionId: null
+});
+IntegrationAppConnectionContext.displayName = "IntegrationAppConnectionContext";
+const IntegrationAppConnectionProvider = ({ connectionId, children }) => {
+  const value = React.useMemo(() => ({ connectionId }), [connectionId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(IntegrationAppConnectionContext.Provider, { value, children });
+};
+function useIntegrationAppConnection() {
+  return React.useContext(IntegrationAppConnectionContext);
+}
+
+exports.IntegrationAppConnectionProvider = IntegrationAppConnectionProvider;
+exports.useIntegrationAppConnection = useIntegrationAppConnection;

package/dist/cjs/contexts/integration-app-context.cjs

@@ -0,0 +1,48 @@
+"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');
+
+const IntegrationAppContext = React.createContext(null);
+IntegrationAppContext.displayName = "IntegrationAppClientContext";
+const IntegrationAppProvider = ({
+  token,
+  fetchToken,
+  credentials,
+  fetchCredentials,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'string'.
+  apiUri = null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'string'.
+  uiUri = null,
+  children
+}) => {
+  const client = React.useMemo(
+    () => new sdk.IntegrationAppClient({
+      token,
+      fetchToken,
+      credentials,
+      fetchCredentials,
+      apiUri,
+      uiUri
+    }),
+    [token, JSON.stringify(credentials), apiUri, uiUri]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(IntegrationAppContext.Provider, { value: client, children });
+};
+function useIntegrationApp() {
+  return React.useContext(IntegrationAppContext);
+}
+
+exports.IntegrationAppProvider = IntegrationAppProvider;
+exports.useIntegrationApp = useIntegrationApp;

package/dist/cjs/contexts/integration-app-integration-context.cjs

@@ -0,0 +1,29 @@
+"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');
+
+const IntegrationAppIntegrationContext = React.createContext({
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type... Remove this comment to see the full error message
+  integrationId: null
+});
+IntegrationAppIntegrationContext.displayName = "IntegrationAppIntegrationContext";
+const IntegrationAppIntegrationProvider = ({ integrationId, children }) => {
+  const value = React.useMemo(() => ({ integrationId }), [integrationId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(IntegrationAppIntegrationContext.Provider, { value, children });
+};
+function useIntegrationAppIntegration() {
+  return React.useContext(IntegrationAppIntegrationContext);
+}
+
+exports.IntegrationAppIntegrationProvider = IntegrationAppIntegrationProvider;
+exports.useIntegrationAppIntegration = useIntegrationAppIntegration;

package/dist/cjs/helpers/getRefElement.cjs

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+function getRefElement(ref) {
+  if (!ref) return null;
+  if (isRefObject(ref)) {
+    return ref.current ?? null;
+  }
+  return ref;
+}
+function isRefObject(ref) {
+  return !!ref ? typeof ref === "object" && "current" in ref : false;
+}
+
+exports.getRefElement = getRefElement;