@membranehq/react 0.15.2 → 0.15.4

package/dist/cjs/components/DataBuilder/Formula/extractTime.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -12,27 +12,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var Form = require('../Form.cjs');
-var index = require('../index.cjs');
+var formComponentsContext = require('../form-components-context.cjs');
+var index$1 = require('../index.cjs');
 
 const ExtractTimeFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Extract time"
     ] });
   }
 );
 function ExtractTimeFormulaDropdown(props) {
+  const { DataBuilderForm } = formComponentsContext.useFormComponents();
   const { onChange, variablesSchema, optionFactories, formula } = props;
   function handleVariableChange(value) {
     onChange?.({
       $extractTime: value
     });
   }
-  const field = index.makeDataField({
+  const field = index$1.makeDataField({
     schema: {
       title: "Extract time from",
       type: "string",
@@ -42,7 +43,7 @@ function ExtractTimeFormulaDropdown(props) {
     variablesSchema,
     optionFactories
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Form.DataBuilderForm, { field, onChange: handleVariableChange });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataBuilderForm, { field, onChange: handleVariableChange });
 }
 
 exports.ExtractTimeFormulaDropdown = ExtractTimeFormulaDropdown;

package/dist/cjs/components/DataBuilder/Formula/findAppRecordId.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/findExternalRecordId.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/firstName.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -12,28 +12,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var Form = require('../Form.cjs');
-var index = require('../index.cjs');
+var formComponentsContext = require('../form-components-context.cjs');
+var index$1 = require('../index.cjs');
 
 const FirstNameFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Extract first name"
     ] });
   }
 );
 FirstNameFormula.displayName = "FirstNameFormula";
 function FirstNameFormulaDropdown(props) {
+  const { DataBuilderForm } = formComponentsContext.useFormComponents();
   const { onChange, variablesSchema, optionFactories, formula } = props;
   function handleVariableChange(value) {
     onChange?.({
       $firstName: value
     });
   }
-  const field = index.makeDataField({
+  const field = index$1.makeDataField({
     schema: {
       title: "Extract first name from",
       type: "string"
@@ -42,7 +43,7 @@ function FirstNameFormulaDropdown(props) {
     variablesSchema,
     optionFactories
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Form.DataBuilderForm, { field, onChange: handleVariableChange });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataBuilderForm, { field, onChange: handleVariableChange });
 }
 
 exports.FirstNameFormulaDropdown = FirstNameFormulaDropdown;

package/dist/cjs/components/DataBuilder/Formula/firstNotEmpty.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -14,9 +14,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@membranehq/sdk');
 var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
-var index$1 = require('../../DataInput/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var fieldContext = require('../field-context.cjs');
+var formComponentsContext = require('../form-components-context.cjs');
+var index$1 = require('../index.cjs');
 
 const FirstNotEmptyFormula = React.forwardRef(
   (props, ref) => {
@@ -41,18 +42,22 @@ function FirstNotEmptyDropdown({
   return /* @__PURE__ */ jsxRuntime.jsx(FirstNotEmptyNested, { field: renderedField, onChange, schema: localSchema });
 }
 function FirstNotEmptyNested({ field, onChange, schema }) {
+  const { DataBuilderForm } = formComponentsContext.useFormComponents();
+  const dataField = index$1.makeDataField({
+    schema: sdk.schemaWithTitle(
+      {
+        type: "array",
+        items: schema
+      },
+      "Values"
+    ),
+    value: field.value?.$firstNotEmpty ?? [],
+    variablesSchema: field.variablesSchema
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    index$1.DataInput,
+    DataBuilderForm,
     {
-      schema: sdk.schemaWithTitle(
-        {
-          type: "array",
-          items: schema
-        },
-        "Values"
-      ),
-      value: field.value?.$firstNotEmpty ?? [],
-      variablesSchema: field.variablesSchema,
+      field: dataField,
       onChange: (value) => {
         onChange?.({ $firstNotEmpty: value });
       }

package/dist/cjs/components/DataBuilder/Formula/formula-components-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/iterate.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -13,8 +13,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@membranehq/sdk');
-var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
-var index = require('../index.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index$1 = require('../index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var dataField = require('../data-field.cjs');
 var DataBuilderFormField = require('../DataBuilderFormField.cjs');
@@ -22,8 +22,8 @@ var fieldContext = require('../field-context.cjs');
 
 const IterateFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Iterate over"
     ] });
   }
@@ -31,7 +31,7 @@ const IterateFormula = React.forwardRef(
 IterateFormula.displayName = "IterateFormula";
 function IteratedFormulaDropdown({ onChange, formula }) {
   const { field } = fieldContext.default();
-  const fieldWithFormulaValues = index.makeDataField({
+  const fieldWithFormulaValues = index$1.makeDataField({
     schema: field.schema,
     variablesSchema: field.variablesSchema,
     value: {

package/dist/cjs/components/DataBuilder/Formula/jsonata.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -12,28 +12,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var Form = require('../Form.cjs');
-var index = require('../index.cjs');
+var formComponentsContext = require('../form-components-context.cjs');
+var index$1 = require('../index.cjs');
 
 const JsonataFormulaTag = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Jsonata"
     ] });
   }
 );
 JsonataFormulaTag.displayName = "JsonataFormulaTag";
 function JsonataFormulaDropdown(props) {
+  const { DataBuilderForm } = formComponentsContext.useFormComponents();
   const { onChange, variablesSchema, optionFactories, formula } = props;
   function handleVariableChange(value) {
     onChange?.({
       $jsonata: value
     });
   }
-  const field = index.makeDataField({
+  const field = index$1.makeDataField({
     schema: {
       title: "Jsonata",
       type: "string"
@@ -42,7 +43,7 @@ function JsonataFormulaDropdown(props) {
     variablesSchema,
     optionFactories
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Form.DataBuilderForm, { field, onChange: handleVariableChange });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataBuilderForm, { field, onChange: handleVariableChange });
 }
 
 exports.JsonataFormulaDropdown = JsonataFormulaDropdown;

package/dist/cjs/components/DataBuilder/Formula/lastName.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -12,21 +12,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var Form = require('../Form.cjs');
-var index = require('../index.cjs');
+var formComponentsContext = require('../form-components-context.cjs');
+var index$1 = require('../index.cjs');
 
 const LastNameFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Extract last name"
     ] });
   }
 );
 LastNameFormula.displayName = "LastNameFormula";
 function LastNameFormulaDropdown(props) {
+  const { DataBuilderForm } = formComponentsContext.useFormComponents();
   const { onChange, variablesSchema, optionFactories, formula } = props;
   function handleVariableChange(value) {
     onChange?.({
@@ -37,13 +38,13 @@ function LastNameFormulaDropdown(props) {
     title: "Extract last name from",
     type: "string"
   };
-  const field = index.makeDataField({
+  const field = index$1.makeDataField({
     schema: valueSchema,
     value: formula.value,
     variablesSchema,
     optionFactories
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Form.DataBuilderForm, { field, onChange: handleVariableChange });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataBuilderForm, { field, onChange: handleVariableChange });
 }
 
 exports.LastNameFormulaDropdown = LastNameFormulaDropdown;

package/dist/cjs/components/DataBuilder/Formula/lookup.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/map.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -12,16 +12,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
-var index = require('../index.cjs');
+var index$1 = require('../index.cjs');
 var fieldContext = require('../field-context.cjs');
-var Form = require('../Form.cjs');
+var formComponentsContext = require('../form-components-context.cjs');
 var ValueMapping = require('../Nested/ValueMapping.cjs');
 
 const MapFormula = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
     " Map values"
   ] });
 });
@@ -31,6 +31,7 @@ function MapFormulaDropdown({
   onChange,
   variablesSchema
 }) {
+  const { DataBuilderForm } = formComponentsContext.useFormComponents();
   const { field } = fieldContext.default();
   const mappingField = {
     ...field,
@@ -54,9 +55,9 @@ function MapFormulaDropdown({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Form.DataBuilderForm,
+      DataBuilderForm,
       {
-        field: index.makeDataField({
+        field: index$1.makeDataField({
           schema: { type: "string", title: "Source Value" },
           value: formula.args?.value,
           variablesSchema

package/dist/cjs/components/DataBuilder/Formula/mergeObjects.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -13,15 +13,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sdk = require('@membranehq/sdk');
-var index$1 = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
-var index = require('../../DataInput/index.cjs');
+var index = require('../../ComboBox/Badges/EditorTagBadge/index.cjs');
 var svgIconType = require('../../SvgIcon/svg-icon-type.cjs');
 var fieldContext = require('../field-context.cjs');
+var formComponentsContext = require('../form-components-context.cjs');
+var index$1 = require('../index.cjs');
 
 const MergeObjectsFormula = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(index$1.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$1.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.EditorTagBadge, { variant: "formula", ref, onClick: props.onClick, onDelete: props.onDelete, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.EditorTagBadgeIcon, { type: svgIconType.SvgIconType.Function }),
       " Merge objects"
     ] });
   }
@@ -32,18 +33,22 @@ function MergeObjectsDropdown({
   formula
 }) {
   const { field } = fieldContext.default();
+  const { DataBuilderForm } = formComponentsContext.useFormComponents();
+  const dataField = index$1.makeDataField({
+    schema: sdk.schemaWithTitle(
+      {
+        type: "array",
+        items: field.schema
+      },
+      "Objects to Merge"
+    ),
+    value: formula.args,
+    variablesSchema: field.variablesSchema
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    index.DataInput,
+    DataBuilderForm,
     {
-      schema: sdk.schemaWithTitle(
-        {
-          type: "array",
-          items: field.schema
-        },
-        "Objects to Merge"
-      ),
-      value: formula.args,
-      variablesSchema: field.variablesSchema,
+      field: dataField,
       onChange: (value) => {
         onChange?.({ $mergeObjects: value });
       }

package/dist/cjs/components/DataBuilder/Formula/noUi.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/tpl.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/var.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/ArrayItems.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/AddingFieldSelector.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/ControlPanel.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/ControlPanelForNonObjectRootField.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/FieldListWrapper/FieldListWrapper.module.css.cjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject = require('style-inject');
 
-var css_248z = ".FieldListWrapper-module_container__gog9U {\n\n  padding-bottom: 0.25rem;\n\n  padding-top: 0.75rem;\n\n  cursor: pointer\n}\n.FieldListWrapper-module_container__collapsed__9x5Po {\n\n  margin-top: -2.5rem;\n\n  padding-top: 2.5rem;\n\n  position: relative;\n\n  z-index: 10;\n\n  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n\n  --tw-gradient-from: transparent var(--tw-gradient-from-position);\n\n  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n\n  --tw-gradient-to: #fff var(--tw-gradient-to-position);\n\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) 40%\n}\n.FieldListWrapper-module_button__fkFJa {\n\n  padding-left: 0px;\n\n  padding-right: 0px;\n\n  padding-top: 0.125rem;\n\n  padding-bottom: 0.125rem;\n\n  border-bottom-width: 1px;\n\n  border-color: transparent;\n\n  display: flex;\n\n  flex-direction: row;\n\n  align-items: center;\n\n  gap: 0.25rem;\n\n  --tw-text-opacity: 1;\n\n  color: rgb(13 121 194 / var(--tw-text-opacity, 1))\n}\n.FieldListWrapper-module_button__fkFJa svg {\n\n  height: 1rem;\n\n  width: 1rem\n}\n.FieldListWrapper-module_button__fkFJa:hover,\n.FieldListWrapper-module_container__gog9U:hover button {\n\n  border-style: dashed;\n\n  --tw-border-opacity: 1;\n\n  border-color: rgb(13 121 194 / var(--tw-border-opacity, 1))\n}\n";
+var css_248z = ".FieldListWrapper-module_container__gog9U {\n  padding-bottom: 0.25rem;\n  padding-top: 0.75rem;\n  cursor: pointer\n}\n.FieldListWrapper-module_container__collapsed__9x5Po {\n  margin-top: -2.5rem;\n  padding-top: 2.5rem;\n  position: relative;\n  z-index: 10;\n  background: linear-gradient(to bottom, transparent, var(--iap-colors-bg-default) 40%)\n}\n.FieldListWrapper-module_button__fkFJa {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n  border-bottom-width: 1px;\n  border-color: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.25rem;\n  --tw-text-opacity: 1;\n  color: rgb(13 121 194 / var(--tw-text-opacity, 1))\n}\n.FieldListWrapper-module_button__fkFJa svg {\n  height: 1rem;\n  width: 1rem\n}\n.FieldListWrapper-module_button__fkFJa:hover,\n.FieldListWrapper-module_container__gog9U:hover button {\n  border-style: dashed;\n  --tw-border-opacity: 1;\n  border-color: rgb(13 121 194 / var(--tw-border-opacity, 1))\n}\n";
 var classes = {"container":"FieldListWrapper-module_container__gog9U","container__collapsed":"FieldListWrapper-module_container__collapsed__9x5Po","button":"FieldListWrapper-module_button__fkFJa"};
 styleInject(css_248z);
 

package/dist/cjs/components/DataBuilder/Nested/FieldListWrapper/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/LevelKeysConflictProvider.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/NoSchema.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/ObjectFields.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/ValueMapping.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/RedactedToggleButton.cjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.2
+ * v0.15.4
  */
 'use client';
 
@@ -36,7 +36,7 @@ const redactedToggleButtonRecipe = sva.sva({
       w: "6",
       minW: "unset",
       rounded: "md",
-      color: "slate.10"
+      color: "fg.subtle"
     },
     icon: {
       w: "4",