@integration-app/react 2.20.0 → 2.22.0

package/dist/esm/components/DataBuilderUI/Row.mjs

@@ -0,0 +1,45 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+
+const dataBuilderRowRecipe = sva({
+  className: "data-builder-row",
+  slots: ["row"],
+  base: {
+    row: {
+      w: "full",
+      position: "relative",
+      display: "flex",
+      flexDir: "row",
+      flexWrap: "nowrap",
+      alignItems: "stretch",
+      justifyContent: "start"
+    }
+  },
+  variants: {
+    span: {
+      short: {
+        row: {
+          width: "fit-content"
+        }
+      },
+      default: {}
+    }
+  }
+});
+function Row({ children, className, span, ...rest }) {
+  const styles = dataBuilderRowRecipe({ span });
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles.row, className), ...rest, children });
+}
+
+export { Row, dataBuilderRowRecipe };

package/dist/esm/components/DataBuilderUI/Title.mjs

@@ -0,0 +1,120 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.0
+ */
+'use client';
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, Children } from 'react';
+import { clsx } from 'clsx';
+import { css } from '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+
+const dataBuilderTitleRecipe = sva({
+  className: "data-builder-title",
+  slots: ["root", "left-side", "right-side", "title", "title-wrap"],
+  base: {
+    root: {
+      display: "flex",
+      flexDir: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "2",
+      w: "full",
+      maxW: "full"
+    },
+    "left-side": {
+      display: "flex",
+      flexDir: "row",
+      alignItems: "center",
+      flex: "1"
+    },
+    "right-side": {
+      display: "flex",
+      flexDir: "row",
+      alignItems: "center",
+      gap: "1",
+      h: "full"
+    },
+    title: {
+      truncate: true,
+      flex: "1",
+      maxW: "fit-content",
+      whiteSpace: "nowrap",
+      fontWeight: "medium"
+    },
+    "title-wrap": {
+      whiteSpace: "normal"
+    }
+  }
+});
+const Title = forwardRef(
+  ({
+    children,
+    required,
+    hasValue,
+    hasError,
+    hasNameConflict,
+    leftSlot,
+    typeSelectorSlot,
+    rightSlot,
+    childrenWrap = false,
+    ...props
+  }, ref) => {
+    const styles = dataBuilderTitleRecipe();
+    const childrenAsText = Children.toArray(children).reduce((acc, el) => {
+      return acc + (typeof el === "string" ? el : "");
+    }, "");
+    const showRequiredDot = required && !hasError && !hasValue;
+    const hasRightSlot = rightSlot || hasError || showRequiredDot;
+    return /* @__PURE__ */ jsxs("div", { className: styles.root, ...props, ref, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles["left-side"], children: [
+        leftSlot && /* @__PURE__ */ jsx("div", { children: leftSlot }),
+        /* @__PURE__ */ jsx("span", { className: clsx(styles.title, childrenWrap && styles["title-wrap"]), title: childrenAsText, children }),
+        rightSlot && /* @__PURE__ */ jsx(Fragment, { children: typeSelectorSlot })
+      ] }),
+      hasRightSlot && /* @__PURE__ */ jsxs("div", { className: styles["right-side"], children: [
+        rightSlot && /* @__PURE__ */ jsx(Fragment, { children: rightSlot }),
+        hasError && /* @__PURE__ */ jsx(Dot, { reason: "Field has error" }),
+        hasNameConflict && /* @__PURE__ */ jsx(Dot, { reason: "Current field name is already used" }),
+        showRequiredDot && /* @__PURE__ */ jsx(Dot, { reason: "Field is required" })
+      ] })
+    ] });
+  }
+);
+Title.displayName = "Title";
+const dotRecipe = sva({
+  className: "data-builder-title-dot",
+  slots: ["root", "dot"],
+  base: {
+    root: {
+      w: "4",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    dot: {
+      flexShrink: "0",
+      flexGrow: "0",
+      w: "2",
+      h: "2",
+      bg: "tomato.10",
+      rounded: "full",
+      display: "inline-block",
+      cursor: "help"
+    }
+  }
+});
+const Dot = forwardRef(({ reason, className, ...rest }, ref) => {
+  const styles = dotRecipe();
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip: reason, delayToShow: 0, usePortal: true, children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+    /* @__PURE__ */ jsx("span", { className: styles.dot, ...rest, ref }),
+    /* @__PURE__ */ jsx("span", { className: css({ srOnly: true }), children: reason })
+  ] }) });
+});
+
+export { Dot, Title, dataBuilderTitleRecipe, dotRecipe };

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

@@ -1,14 +1,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import styleInject from 'style-inject';
 
-var css_248z = ".styles-module_rowWrapper__s8zSx {\n  position: relative;\n}\n\n.styles-module_row__RyekY {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  justify-content: flex-start;\n  border-radius: 0.25rem;\n  border-bottom-left-radius: 0;\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n\n.styles-module_rowShort__tlARy {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.styles-module_row__RyekY:first-child:last-child {\n  border-radius: 0.25rem;\n}\n\n.styles-module_cell__ZTpTA {\n  overflow-x: hidden;\n\n  /* Uses to help Truncate works well */\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: flex-start;\n\n  border-left-width: 1px;\n\n  --tw-border-opacity: 1;\n\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  min-height: 3rem;\n}\n\n.styles-module_cell__ZTpTA:first-child {\n  border-left-width: 0px;\n  border-bottom-left-radius: 0.25rem;\n  border-top-left-radius: 0.25rem;\n}\n\n.styles-module_cell__ZTpTA:last-child {\n  border-bottom-right-radius: 0.25rem;\n  border-top-right-radius: 0.25rem;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellGrow__N9BMH {\n  flex-grow: 1 !important;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellShrink__DX2QJ {\n  flex-shrink: 1 !important;\n  flex-grow: 0 !important;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellDisabled__0J77S {\n  --tw-gradient-via-position: 95%;\n  background-image: linear-gradient(to right, var(--tw-gradient-stops));\n  --tw-gradient-from: #F8F8F8 var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), #F8F8F8 var(--tw-gradient-via-position), var(--tw-gradient-to);\n  --tw-gradient-to: #fff var(--tw-gradient-to-position);\n  pointer-events: none;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellName__I0hSb {\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-wrap: nowrap;\n  align-self: stretch;\n  line-height: 1.5;\n  min-width: 10rem;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellCombobox__4XI6E {\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0px;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellCombobox__4XI6E > *[data-role='field-wrapper'] {\n  width: 100%;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellInput__3nmbF {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.styles-module_cellValue__HSpou {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellInput__3nmbF > input {\n  width: 100%;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellIcon__jfVwU {\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-wrap: nowrap;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity, 1));\n  padding: 0px;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellIcon__jfVwU svg {\n  margin: 0.75rem;\n  height: 1.25rem;\n  width: 1.25rem;\n  display: block;\n}\n\n.styles-module_rowWrapper__s8zSx.styles-module_rowWrapperEmbedded__C6L4N {\n  padding-top: 0px !important;\n}\n\n.styles-module_rowEmbedded__HR-4O {\n  border-radius: 0;\n  border-width: 0px;\n  margin: 0px;\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n.styles-module_rowEmbedded__HR-4O + .styles-module_rowEmbedded__HR-4O {\n  border-top-width: 1px;\n}\n\n.styles-module_rowEmbedded__HR-4O .styles-module_cellName__I0hSb {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n}\n\n.styles-module_title__MYqaj {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  width: 100%;\n  max-width: 100%;\n}\n\n.styles-module_title_leftSide__dtWos {\n  display: flex;\n  min-width: 0px;\n  flex: 1 1 0%;\n  flex-direction: row;\n  align-items: center;\n  gap: 0px;\n}\n\n.styles-module_title_rightSide__wCmXB {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.styles-module_title_title__EJEFa {\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: -moz-fit-content;\n  max-width: fit-content;\n  white-space: nowrap;\n}\n\n.styles-module_title_title__wrap__SPI-b {\n  white-space: normal;\n}\n\n.styles-module_title_dot__fZa-R {\n  flex-shrink: 0;\n  flex-grow: 0;\n  margin-top: 0.125rem;\n  display: inline-block;\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 9999px;\n}\n\n.styles-module_title_dot__error__oJq53 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(194 154 6 / var(--tw-bg-opacity, 1));\n}\n\n.styles-module_title_dot__name-conflict__f31SA {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity, 1));\n}\n\n.styles-module_title_dot__required__EDi-g {\n  cursor: help;\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity, 1));\n}\n\n.styles-module_titleBadge__L4l0M {\n  margin-left: 0.375rem;\n  order: 3;\n  transform: translateY(0.05rem);\n}\n\n.styles-module_titleBadge__L4l0M.styles-module_titleBadgeRightSide__yK3S0 {\n  margin-left: auto;\n}\n\n.styles-module_titleBadge__L4l0M.styles-module_titleBadgeRightSide__yK3S0 + .styles-module_titleBadgeRightSide__yK3S0 {\n  margin-left: 0px;\n}\n\n.styles-module_description__nrm2- {\n  margin-top: 0.125rem;\n  width: 100%;\n  font-size: 0.75rem;\n  --tw-text-opacity: 1;\n  color: rgb(39 39 39 / var(--tw-text-opacity, 1));\n  line-height: 1.2;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellCombobox__4XI6E .styles-module_description__nrm2- {\n  align-self: flex-start;\n}\n\n.styles-module_rowProperties__eYVmN {\n  display: block;\n  overflow: hidden;\n  font-size: 0.813rem;\n  line-height: 1.4;\n  width: -moz-fit-content;\n  width: fit-content;\n  max-width: calc(100% - 0.5rem);\n}\n\n.styles-module_rowProperties__eYVmN.styles-module_rowPropertiesExpanded__YkRyv {\n  width: 100%;\n  overflow: auto;\n  border-width: 1px;\n  border-top-width: 0px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n  border-bottom-right-radius: 0.25rem;\n  border-bottom-left-radius: 0.25rem;\n}\n\n.styles-module_rowProperties__eYVmN.styles-module_rowPropertiesExpanded__YkRyv:first-child {\n  border-radius: 0.25rem;\n  border-top-width: 1px;\n}\n\n.styles-module_propertyWrapper__7rA-l {\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n  border-bottom-right-radius: 0.25rem;\n  border-bottom-left-radius: 0.25rem;\n  display: inline-flex;\n  gap: 0.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));\n  padding-left: 0.5rem;\n  margin-left: -0.5rem;\n}\n\n.styles-module_property__YczwR {\n  border-left-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.styles-module_propertyName__rp7UZ {\n  --tw-text-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-text-opacity, 1));\n}\n\n.styles-module_propertyValue__-AKwp {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n\n.styles-module_propertyName__rp7UZ + .styles-module_propertyValue__-AKwp {\n  margin-left: 0.25rem;\n}\n\n/* ### Action Bar ### */\n\n.styles-module_actionBar__GudS0 {\n  /* @apply absolute left-full top-0 bottom-0 -ml-2.5; */\n  margin-left: -0.125rem;\n  margin-right: -0.625rem;\n  width: 1.25rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n}\n\n.styles-module_actionBarButton__llyoR {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.25rem;\n  width: 1.25rem;\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));\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_actionBarButton__llyoR:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));\n}\n\n/* stylelint-disable-next-line */\n\n.styles-module_actionBarButton__llyoR > svg {\n  height: 0.75rem;\n  width: 0.75rem;\n  stroke-width: 2;\n}\n\n/* ### Nested Levels ### */\n\n.styles-module_nestedLevel__fV46p {\n  position: relative;\n}\n\n.styles-module_nestedLevel__fV46p:not(:has(.styles-module_nestedLevel__fV46p)) {\n  margin-right: 0.625rem;\n}\n\n.styles-module_nestedLevel__fV46p > .styles-module_nestedLevel__fV46p {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');\n  background-size: 1px 1px;\n  background-repeat: repeat-y;\n  background-position: top 0 left 1rem;\n  padding-left: 2rem;\n}\n\n.styles-module_nestedLevel__fV46p .styles-module_nestedLevel__fV46p {\n  flex-grow: 1;\n}\n\n.styles-module_nestedLevel__fV46p:not(:empty) + .styles-module_nestedLevel__fV46p:not(:has(> .styles-module_nestedLevel__fV46p)),\n.styles-module_nestedLevel__fV46p:not(:empty) > .styles-module_nestedLevel__fV46p:has(> :not(.styles-module_nestedLevel__fV46p)) {\n  padding-top: 0.5rem;\n}\n\n.styles-module_nestedLevel__fV46p .styles-module_nestedLevel__fV46p:has(> :not(.styles-module_nestedLevel__fV46p))::before {\n  content: '';\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');\n  background-size: 3rem 1px;\n  background-repeat: repeat-x;\n  background-position: 0 0;\n  display: block;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: absolute;\n  top: 50%;\n  left: 1rem;\n  margin-top: 0.25rem;\n  width: 1rem;\n  height: 1px;\n}\n\n.styles-module_drilldownWrapper__pq6wB > .styles-module_nestedLevel__fV46p:last-child > .styles-module_nestedLevel__fV46p:last-child {\n  padding-bottom: 0.5rem;\n}\n";
-var classes = {"rowWrapper":"styles-module_rowWrapper__s8zSx","row":"styles-module_row__RyekY","rowShort":"styles-module_rowShort__tlARy","cell":"styles-module_cell__ZTpTA","cellGrow":"styles-module_cellGrow__N9BMH","cellShrink":"styles-module_cellShrink__DX2QJ","cellDisabled":"styles-module_cellDisabled__0J77S","cellName":"styles-module_cellName__I0hSb","cellCombobox":"styles-module_cellCombobox__4XI6E","cellInput":"styles-module_cellInput__3nmbF","cellValue":"styles-module_cellValue__HSpou","cellIcon":"styles-module_cellIcon__jfVwU","rowWrapperEmbedded":"styles-module_rowWrapperEmbedded__C6L4N","rowEmbedded":"styles-module_rowEmbedded__HR-4O","title":"styles-module_title__MYqaj","title_leftSide":"styles-module_title_leftSide__dtWos","title_rightSide":"styles-module_title_rightSide__wCmXB","title_title":"styles-module_title_title__EJEFa","title_title__wrap":"styles-module_title_title__wrap__SPI-b","title_dot":"styles-module_title_dot__fZa-R","title_dot__error":"styles-module_title_dot__error__oJq53","title_dot__name-conflict":"styles-module_title_dot__name-conflict__f31SA","title_dot__required":"styles-module_title_dot__required__EDi-g","description":"styles-module_description__nrm2-","rowProperties":"styles-module_rowProperties__eYVmN","rowPropertiesExpanded":"styles-module_rowPropertiesExpanded__YkRyv","propertyWrapper":"styles-module_propertyWrapper__7rA-l","property":"styles-module_property__YczwR","propertyName":"styles-module_propertyName__rp7UZ","propertyValue":"styles-module_propertyValue__-AKwp","actionBar":"styles-module_actionBar__GudS0","actionBarButton":"styles-module_actionBarButton__llyoR","nestedLevel":"styles-module_nestedLevel__fV46p","drilldownWrapper":"styles-module_drilldownWrapper__pq6wB"};
+var css_248z = "/* ### Nested Levels ### */\n.styles-module_nestedLevel__fV46p {\n  position: relative;\n}\n.styles-module_nestedLevel__fV46p:not(:has(.styles-module_nestedLevel__fV46p)) {\n  margin-right: 0.625rem;\n}\n.styles-module_nestedLevel__fV46p > .styles-module_nestedLevel__fV46p {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');\n  background-size: 1px 1px;\n  background-repeat: repeat-y;\n  background-position: top 0 left 1rem;\n  padding-left: 2rem;\n}\n.styles-module_nestedLevel__fV46p .styles-module_nestedLevel__fV46p {\n  flex-grow: 1;\n}\n.styles-module_nestedLevel__fV46p:not(:empty) + .styles-module_nestedLevel__fV46p:not(:has(> .styles-module_nestedLevel__fV46p)),\n.styles-module_nestedLevel__fV46p:not(:empty) > .styles-module_nestedLevel__fV46p:has(> :not(.styles-module_nestedLevel__fV46p)) {\n  padding-top: 0.5rem;\n}\n.styles-module_nestedLevel__fV46p .styles-module_nestedLevel__fV46p:has(> :not(.styles-module_nestedLevel__fV46p))::before {\n  content: '';\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');\n  background-size: 3rem 1px;\n  background-repeat: repeat-x;\n  background-position: 0 0;\n  display: block;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: absolute;\n  top: 50%;\n  left: 1rem;\n  margin-top: 0.25rem;\n  width: 1rem;\n  height: 1px;\n}\n";
+var classes = {"nestedLevel":"styles-module_nestedLevel__fV46p"};
 styleInject(css_248z);
 
 export { classes as default };

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

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

package/dist/esm/components/DataInput/useResolvedDataSchema.mjs

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

package/dist/esm/components/DataLinks/data-link-tables-option-factory.mjs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -14,7 +14,13 @@ 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 { Row, Cell, DrilldownBlockContentWrapper } from '../../DataBuilderUI/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({
@@ -76,8 +82,8 @@ function DataCollectionSelect({
   const showParameters = location?.parametersSchema || isDynamicLocation;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Row, { children: [
-      /* @__PURE__ */ jsx(Cell.Name, { children: "Data Collection" }),
-      /* @__PURE__ */ jsx(Cell.Combobox, { disabled: isLoading, className: "flex-grow", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Cell, { type: "name", children: "Data Collection" }),
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", disabled: isLoading, span: "grow", children: /* @__PURE__ */ jsx(
         ComboBox,
         {
           value: currentKey,
@@ -89,7 +95,7 @@ function DataCollectionSelect({
         }
       ) })
     ] }),
-    showParameters && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(DrilldownBlockContentWrapper, { children: /* @__PURE__ */ jsx(
+    showParameters && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
       DataBuilderForm,
       {
         onChange: handleParametersChange,
@@ -105,7 +111,7 @@ function DataCollectionSelect({
           variablesSchema
         })
       }
-    ) }) })
+    ) })
   ] });
 }
 

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

@@ -2,14 +2,20 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { UNIFIED_DATA_MODELS } from '@integration-app/sdk';
 import { ComboBox } from '../../ComboBox/ComboBox.mjs';
-import { Row, Cell } from '../../DataBuilderUI/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';
 
 function UdmSelect({ value, onChange }) {
   const options = [];
@@ -20,8 +26,8 @@ function UdmSelect({ value, onChange }) {
     });
   }
   return /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsx(Cell.Name, { children: "Data Model" }),
-    /* @__PURE__ */ jsx(Cell.Combobox, { children: /* @__PURE__ */ jsx(ComboBox, { placeholder: "Select Universal Data Model", value, options, onChange }) })
+    /* @__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 }) })
   ] });
 }
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -10,7 +10,13 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { IntegrationElementLevel } from '@integration-app/sdk';
 import { AdvancedOptions } from '../../AdvancedOptions.mjs';
 import { SimpleInput } from '../../SimpleInput/SimpleInput.mjs';
-import '../../DataBuilderUI/index.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';

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

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

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

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

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

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

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

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

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

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

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

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