@integration-app/react 2.0.3-beta.0 → 2.0.3-beta.2

package/dist/esm/components/Tag/Components.mjs

@@ -0,0 +1,62 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import classes from './styles.module.css.mjs';
+import useEventStopPropagation from '../../hooks/useEventStopPropagation.mjs';
+import { SvgIcon, SvgIconType } from '../SvgIcon/index.mjs';
+
+function TagSvgIcon({
+  type,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SvgIcon,
+    {
+      className: clsx(classes.tagIcon, className),
+      type,
+      ...props
+    }
+  );
+}
+function TagImage({
+  className,
+  alt,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt,
+      className: clsx(classes.tagIcon, classes.tagImageIcon, className),
+      ...props
+    }
+  );
+}
+function TagConfigButton({
+  error = false,
+  icon = SvgIconType.Settings,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx(
+        classes.tagConfigButton,
+        error && classes.tagConfigButtonError
+      ),
+      onClick: useEventStopPropagation(onClick),
+      children: /* @__PURE__ */ jsx(SvgIcon, { type: icon })
+    }
+  );
+}
+
+export { TagConfigButton, TagImage, TagSvgIcon };

package/dist/esm/components/Tag/SegmentSeparator.mjs

@@ -0,0 +1,23 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { SvgIcon, SvgIconType } from '../SvgIcon/index.mjs';
+import classes from './styles.module.css.mjs';
+
+function SegmentSeparator() {
+  return /* @__PURE__ */ jsx(
+    SvgIcon,
+    {
+      type: SvgIconType.ChevronRight,
+      className: classes.segmentSeparator
+    }
+  );
+}
+
+export { SegmentSeparator };

package/dist/esm/components/Tag/TagPlaceholder.mjs

@@ -0,0 +1,33 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Tag } from './index.mjs';
+import classes from './styles.module.css.mjs';
+import clsx from 'clsx';
+
+const TagPlaceholder = forwardRef(
+  function({ children, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        className: clsx(
+          classes.tagPlaceholder,
+          !!props?.onClick && classes.tagPlaceholder__clickable,
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+export { TagPlaceholder };

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

@@ -0,0 +1,83 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { SvgIconType } from '../SvgIcon/index.mjs';
+import { Truncate } from '../Truncate/index.mjs';
+import useEventStopPropagation from '../../hooks/useEventStopPropagation.mjs';
+import { TagSvgIcon, TagImage, TagConfigButton } from './Components.mjs';
+import classes from './styles.module.css.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+export { TagPlaceholder } from './TagPlaceholder.mjs';
+
+const GenericTag = forwardRef(function({
+  truncate,
+  inactive,
+  disabled,
+  className,
+  onClick,
+  children,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx(
+        classes.tagGeneric,
+        (inactive || disabled) && classes.tagGeneric__disabled,
+        className
+      ),
+      ref,
+      onClick: useEventStopPropagation(onClick),
+      ...props,
+      children: truncate ? /* @__PURE__ */ jsx(Truncate, { children }) : children
+    }
+  );
+});
+const TagBasic = forwardRef(function({ className, tooltip, ...props }, ref) {
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { tooltip, children: /* @__PURE__ */ jsx(
+      GenericTag,
+      {
+        ref,
+        className: className || classes.tagDefaultColors,
+        ...props
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    GenericTag,
+    {
+      ref,
+      className: className || classes.tagDefaultColors,
+      ...props
+    }
+  );
+});
+const Tag = Object.assign(TagBasic, {
+  SvgIcon: TagSvgIcon,
+  Image: TagImage,
+  ConfigButton: TagConfigButton,
+  Lookup: TagLookup
+});
+function TagLookup({
+  children,
+  disabled = false,
+  onConfigClick,
+  configError
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tag.SvgIcon, { type: SvgIconType.Lookup }),
+    children,
+    !disabled && /* @__PURE__ */ jsx(Tag.ConfigButton, { onClick: onConfigClick, error: configError })
+  ] });
+}
+
+export { GenericTag, Tag, Tag as default };

package/dist/esm/components/Tag/styles.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from '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));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\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));\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));\n}\n\n.styles-module_tagDefaultColors__JlCHo {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\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));\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));\n}\n\n.styles-module_tagConfigButton__3WdyL:hover {\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\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));\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity));\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));\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));\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n}\n\n.styles-module_tagPlaceholder__c2oMP:empty {\n  width: 100%;\n  min-width: 7rem;\n}\n\n.styles-module_segmentSeparator__hQRZZ {\n  margin-left: 0.125rem;\n  margin-right: 0.125rem;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  flex-grow: 0;\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","segmentSeparator":"styles-module_segmentSeparator__hQRZZ"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/Textarea/Textarea.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".Textarea-module_container__9C-DH {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .Textarea-module_container__9C-DH {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .Textarea-module_container__9C-DH {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .Textarea-module_container__9C-DH {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .Textarea-module_container__9C-DH {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .Textarea-module_container__9C-DH {\n    max-width: 1536px;\n  }\n}\n.Textarea-module_uikit-textarea__RLweT {\n  border-radius: 0.25rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 100ms;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  border-width: 1px;\n}\n.Textarea-module_uikit-textarea__RLweT::-moz-placeholder {\n  --tw-placeholder-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-placeholder-opacity));\n}\n.Textarea-module_uikit-textarea__RLweT::placeholder {\n  --tw-placeholder-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-placeholder-opacity));\n}\n.Textarea-module_uikit-textarea__RLweT {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n.Textarea-module_uikit-textarea__RLweT:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.Textarea-module_uikit-textarea__RLweT:focus + .Textarea-module_uikit-textareaIcon__dN-ZG {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n.Textarea-module_uikit-textarea__RLweT:disabled {\n  --tw-text-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-text-opacity));\n}\n.Textarea-module_uikit-textarea__RLweT:disabled::-moz-placeholder {\n  --tw-placeholder-opacity: 1;\n  color: rgb(221 221 221 / var(--tw-placeholder-opacity));\n}\n.Textarea-module_uikit-textarea__RLweT:disabled::placeholder {\n  --tw-placeholder-opacity: 1;\n  color: rgb(221 221 221 / var(--tw-placeholder-opacity));\n}\n.Textarea-module_uikit-textarea__RLweT + .Textarea-module_uikit-textareaIcon__dN-ZG,.Textarea-module_uikit-textarea__RLweT:disabled + .Textarea-module_uikit-textareaIcon__dN-ZG {\n  --tw-text-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-text-opacity));\n}\n.Textarea-module_uikit-textarea__RLweT:focus + .Textarea-module_uikit-textareaIcon__dN-ZG {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n.Textarea-module_uikit-textarea__border__PQAca {\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.Textarea-module_uikit-textarea__border__PQAca:focus {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 0 0 / var(--tw-border-opacity));\n}\n.Textarea-module_uikit-textarea__border__PQAca:disabled {\n  --tw-border-opacity: 0.6;\n}\n.Textarea-module_uikit-textarea__border__PQAca:hover:not(:disabled,:focus) {\n  --tw-border-opacity: 1;\n  border-color: rgb(170 170 170 / var(--tw-border-opacity));\n}\n.Textarea-module_uikit-textarea__background__gl3as {\n  --tw-border-opacity: 1;\n  border-color: rgb(248 248 248 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n}\n.Textarea-module_uikit-textarea__background__gl3as:focus {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 0 0 / var(--tw-border-opacity));\n}\n.Textarea-module_uikit-textarea__background__gl3as:disabled {\n  --tw-border-opacity: 0.6;\n  --tw-bg-opacity: 0.6;\n}\n.Textarea-module_uikit-textarea__background__gl3as:hover:not(:disabled,:focus) {\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n}\n.Textarea-module_uikit-textarea__transparent__tgMUt {\n  border-color: transparent;\n  background-color: transparent;\n}\n.Textarea-module_uikit-textarea__transparent__tgMUt:hover:not(:disabled,:focus) + .Textarea-module_uikit-textareaIcon__dN-ZG {\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n}\n.Textarea-module_textareaWrapper__Aamhs {\n  --uikit-textarea-max-height: auto;\n\n  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */\n  display: grid;\n  width: 100%;\n  overflow-y: hidden;\n}\n.Textarea-module_textareaWrapper__Aamhs::after {\n  /* Note the weird space! Needed to prevent jumpy behavior */\n  content: attr(data-replicated-value) ' ';\n\n  /* This is how textarea text behaves */\n  white-space: pre-wrap;\n\n  /* Hidden from view, clicks, and screen readers */\n  visibility: hidden;\n\n  /* Add max height limit */\n  max-height: var(--uikit-textarea-max-height, auto);\n\n  /* Identical style required */\n\n  border-radius: 0.25rem;\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-duration: 100ms;\n\n  padding-top: 0.5rem;\n\n  padding-bottom: 0.5rem;\n\n  border-width: 1px;\n}\n.Textarea-module_textareaWrapper__Aamhs > textarea {\n  /* You could leave this, but after a user resizes, then it ruins the auto sizing */\n  resize: none;\n  overflow: auto;\n}\n.Textarea-module_textareaWrapper__Aamhs > textarea,\n.Textarea-module_textareaWrapper__Aamhs::after {\n  /* Place on top of each other */\n  grid-area: 1 / 1 / 2 / 2;\n}\n";
+var classes = {"container":"Textarea-module_container__9C-DH","uikit-textarea":"Textarea-module_uikit-textarea__RLweT","uikit-textareaIcon":"Textarea-module_uikit-textareaIcon__dN-ZG","uikit-textarea__border":"Textarea-module_uikit-textarea__border__PQAca","uikit-textarea__background":"Textarea-module_uikit-textarea__background__gl3as","uikit-textarea__transparent":"Textarea-module_uikit-textarea__transparent__tgMUt","textareaWrapper":"Textarea-module_textareaWrapper__Aamhs"};
+styleInject(css_248z);
+
+export { classes as default };

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

@@ -0,0 +1,82 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import classes from './Textarea.module.css.mjs';
+
+const CssPropTextareaMaxHeight = "--uikit-textarea-max-height";
+const Textarea = forwardRef(
+  ({ autoHeight, ...props }, ref) => {
+    if (autoHeight) {
+      return /* @__PURE__ */ jsx(
+        TextareaWithAutoHeight,
+        {
+          ref,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      GenericTextarea,
+      {
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+const GenericTextarea = forwardRef(
+  ({ className, variant, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: clsx(
+          classes["uikit-textarea"],
+          getClassNameByVariant(variant),
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+const TextareaWithAutoHeight = forwardRef(({ maxHeight, ...props }, ref) => {
+  const refWrapper = useRef(null);
+  const handleOnInput = (e) => {
+    const wrapper = refWrapper.current;
+    if (wrapper) {
+      wrapper.dataset.replicatedValue = e.target.value;
+    }
+  };
+  useEffect(() => {
+    const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+    refWrapper?.current?.style.setProperty(
+      CssPropTextareaMaxHeight,
+      `${maxHeightValue}`
+    );
+  }, [maxHeight]);
+  return /* @__PURE__ */ jsx("div", { ref: refWrapper, className: classes.textareaWrapper, children: /* @__PURE__ */ jsx(GenericTextarea, { ref, onInput: handleOnInput, ...props }) });
+});
+function getClassNameByVariant(variant) {
+  switch (variant) {
+    case "background":
+      return classes["uikit-textarea__background"];
+    case "transparent":
+      return classes["uikit-textarea__transparent"];
+    case "border":
+    default:
+      return classes["uikit-textarea__border"];
+  }
+}
+
+export { Textarea };

package/dist/esm/components/Toggle/Toggle.mjs

@@ -0,0 +1,56 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Switch } from '@headlessui/react';
+import clsx from 'clsx';
+import { SvgIcon, SvgIconType } from '../SvgIcon/index.mjs';
+import classes from './Toggle.module.css.mjs';
+
+function Toggle({ children, ...props }) {
+  function toggleChange() {
+    props?.onChange?.(props?.checked);
+  }
+  function handleChange(checked2) {
+    props?.onChange?.(checked2);
+  }
+  if (children) {
+    return /* @__PURE__ */ jsxs("label", { className: classes.labelWrapper, children: [
+      /* @__PURE__ */ jsx(Toggle, { ...props }),
+      /* @__PURE__ */ jsx("span", { onClick: toggleChange, children })
+    ] });
+  }
+  const { checked, disabled, loading, onChange, className, ...restProps } = props;
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      checked,
+      onChange: handleChange,
+      className: clsx(
+        classes.wrapper,
+        className,
+        checked && !disabled && classes.wrapper__on,
+        disabled && classes.wrapper__disabled
+      ),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: clsx(
+            classes.circle,
+            checked ? classes.circle__on : classes.circle__off,
+            loading && classes.circle__loading
+          ),
+          children: loading && /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Loader, className: classes.loader })
+        }
+      )
+    }
+  );
+}
+
+export { Toggle };

package/dist/esm/components/Toggle/Toggle.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".Toggle-module_labelWrapper__uiOuA {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  cursor: pointer;\n}\n\n.Toggle-module_wrapper__BDsrR {\n  position: relative;\n  display: inline-flex;\n  height: 1.25rem;\n  flex-shrink: 0;\n  align-items: center;\n  border-radius: 9999px;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n  width: 2.4rem;\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n}\n\n.Toggle-module_wrapper__BDsrR:not(.Toggle-module_wrapper__disabled__IJ8tH):hover {\n    background-color: #dfdfdf;\n  }\n\n.Toggle-module_wrapper__on__g1pHA {\n  background-color: #619446;\n}\n\n.Toggle-module_wrapper__on__g1pHA:not(.Toggle-module_wrapper__disabled__IJ8tH):hover {\n    background-color: #4a7035;\n  }\n\n.Toggle-module_wrapper__disabled__IJ8tH {\n  pointer-events: none;\n}\n\n.Toggle-module_label__gfTxr {\n  font-size: 0.625rem;\n  position: absolute;\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.Toggle-module_label__on__X-sD1 {\n  --tw-translate-x: 0.375rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.Toggle-module_label__off__1LfXm {\n  --tw-translate-x: 1.1rem;\n}\n\n.Toggle-module_circle__dHPyg {\n  display: inline-block;\n  height: 0.625rem;\n  width: 0.625rem;\n  border-radius: 9999px;\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  --tw-bg-opacity: 1;\n  background-color: rgb(105 105 105 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n}\n\n.Toggle-module_circle__off__FzFMV {\n  --tw-translate-x: 0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.Toggle-module_circle__on__4bnd7 {\n  --tw-translate-x: 1.5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.Toggle-module_circle__loading__2BmHG {\n  background-color: transparent !important;\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n  transform: scale(125%);\n}\n\n.Toggle-module_wrapper__on__g1pHA .Toggle-module_circle__dHPyg {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.Toggle-module_wrapper__disabled__IJ8tH .Toggle-module_circle__dHPyg {\n  background-color: #bebebe;\n  color: #bebebe;\n}\n";
+var classes = {"labelWrapper":"Toggle-module_labelWrapper__uiOuA","wrapper":"Toggle-module_wrapper__BDsrR","wrapper__disabled":"Toggle-module_wrapper__disabled__IJ8tH","wrapper__on":"Toggle-module_wrapper__on__g1pHA","label":"Toggle-module_label__gfTxr","label__on":"Toggle-module_label__on__X-sD1","label__off":"Toggle-module_label__off__1LfXm","circle":"Toggle-module_circle__dHPyg","circle__off":"Toggle-module_circle__off__FzFMV","circle__on":"Toggle-module_circle__on__4bnd7","circle__loading":"Toggle-module_circle__loading__2BmHG"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/Toggle/ToggleOnOff.mjs

@@ -0,0 +1,65 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Switch } from '@headlessui/react';
+import clsx from 'clsx';
+import { SvgIcon, SvgIconType } from '../SvgIcon/index.mjs';
+import classes from './Toggle.module.css.mjs';
+
+function ToggleOnOff({
+  checked,
+  disabled,
+  loading,
+  onChange,
+  className,
+  ...props
+}) {
+  function handleChange(checked2) {
+    onChange?.(checked2);
+  }
+  return /* @__PURE__ */ jsxs(
+    Switch,
+    {
+      checked,
+      onChange: handleChange,
+      className: clsx(
+        classes.wrapper,
+        className,
+        checked && !disabled && classes.wrapper__on,
+        disabled && classes.wrapper__disabled
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              classes.label,
+              checked ? classes.label__on : classes.label__off
+            ),
+            children: checked ? "on" : "off"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              classes.circle,
+              checked ? classes.circle__on : classes.circle__off,
+              loading && classes.circle__loading
+            ),
+            children: loading && /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Loader, className: classes.loader })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ToggleOnOff };

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

@@ -0,0 +1,74 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Root, Trigger, Positioner, Content, Arrow, ArrowTip } from '../../ui-kit/styled/tooltip.mjs';
+import { token } from '../../styled-system/tokens/index.mjs';
+
+const Tooltip = forwardRef(
+  ({
+    tooltip,
+    placement = "right",
+    delayToShow = 300,
+    delayToHide = 50,
+    offset = [0, 6],
+    className,
+    children,
+    disabled
+  }, ref) => {
+    const [crossAxis, mainAxis] = offset;
+    return /* @__PURE__ */ jsxs(
+      Root,
+      {
+        lazyMount: true,
+        openDelay: delayToShow,
+        closeDelay: delayToHide,
+        positioning: {
+          offset: {
+            mainAxis,
+            crossAxis
+          },
+          placement
+        },
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Trigger, { asChild: true, children }),
+          /* @__PURE__ */ jsx(Positioner, { className, children: /* @__PURE__ */ jsxs(
+            Content,
+            {
+              background: "neutral.3",
+              rounded: "sm",
+              color: "black",
+              shadow: "none",
+              fontWeight: "normal",
+              ref,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Arrow,
+                  {
+                    style: {
+                      // https://github.com/cschroeter/park-ui/issues/411
+                      // @ts-ignore
+                      "--arrow-background": token(`colors.neutral.3`),
+                      "--arrow-size": token(`spacing.2`)
+                    },
+                    children: /* @__PURE__ */ jsx(ArrowTip, {})
+                  }
+                ),
+                tooltip
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+
+export { Tooltip };

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

@@ -0,0 +1,98 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useIsTextTruncated } from '../../hooks/useIsTextTruncated.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+import { Text } from '../../ui-kit/styled/text.mjs';
+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 { Flex } from '../../styled-system/jsx/flex.mjs';
+
+function Truncate({
+  mode = "middle",
+  children,
+  endLetters = 5,
+  className
+}) {
+  const overflowContainer = useRef(null);
+  const isTruncated = useIsTextTruncated(overflowContainer);
+  if (typeof children !== "string" || children.length < endLetters) {
+    return className ? /* @__PURE__ */ jsx("span", { className, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (mode === "end") {
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        disabled: !isTruncated,
+        tooltip: children,
+        placement: "top-start",
+        ref: overflowContainer,
+        className,
+        children: /* @__PURE__ */ jsx(Box, { truncate: true, children })
+      }
+    );
+  }
+  const [startSegment, endSegment] = getSplittedStringAt(
+    children,
+    getSplitStringPosition(children, endLetters)
+  );
+  return /* @__PURE__ */ jsx(Tooltip, { disabled: !isTruncated, tooltip: children, placement: "top-start", children: /* @__PURE__ */ jsx(Text, { as: "span", display: "inline-flex", overflow: "hidden", maxW: "full", children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      display: "inline-flex",
+      w: "fit-content",
+      maxW: "full",
+      flexDirection: "row",
+      wrap: "nowrap",
+      className,
+      children: [
+        startSegment && /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: overflowContainer,
+            display: "inline-block",
+            flexGrow: "1",
+            truncate: true,
+            children: startSegment
+          }
+        ),
+        endSegment && /* @__PURE__ */ jsx(Box, { display: "inline-block", flexShrink: "0", flexGrow: "0", children: endSegment })
+      ]
+    }
+  ) }) });
+}
+function getSplitStringPosition(string, endLetters) {
+  const stringLength = string.length;
+  const lastIndexOfSpace = string.lastIndexOf(" ");
+  const lastIndexOfAngleBracket = string.lastIndexOf(">");
+  if (stringLength <= endLetters) {
+    return stringLength;
+  }
+  if (lastIndexOfSpace < 0 && lastIndexOfAngleBracket < 0) {
+    return endLetters;
+  }
+  const positionOfDelimiter = stringLength - Math.max(lastIndexOfAngleBracket, lastIndexOfSpace);
+  if (positionOfDelimiter > endLetters * 1.8) {
+    return endLetters;
+  }
+  return positionOfDelimiter;
+}
+function getSplittedStringAt(str, position) {
+  const startSegment = str.slice(0, -position).replace(/\s/g, "\xA0");
+  const endSegment = str.slice(-1 * position).replace(/\s/g, "\xA0");
+  if (!startSegment && endSegment) {
+    return [endSegment];
+  }
+  return [startSegment, endSegment];
+}
+
+export { Truncate };

package/dist/esm/contexts/integration-app-client-context.mjs

@@ -0,0 +1,27 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const IntegrationAppClientContext = 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__ */ jsx(IntegrationAppClientContext.Provider, { value: { client }, children });
+};
+function useIntegrationAppClient() {
+  return useContext(IntegrationAppClientContext);
+}
+
+export { IntegrationAppClientProvider, useIntegrationAppClient };