@uniformdev/mesh-sdk-react 19.60.1-alpha.6 → 19.61.1-alpha.13

package/dist/index.d.mts

@@ -429,7 +429,9 @@ declare function DataResourceDynamicInputProvider(props: DataResourceDynamicInpu
  *
  * You can also combine (2) and (3) to get both explicit value typing and assertion of the location.
  */
-declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLocationValue = unknown, TLocationSetValue = TLocationValue>(expectedLocation?: TLocationType): Omit<Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
+declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLocationValue = unknown, TLocationSetValue = TLocationValue>(expectedLocation?: TLocationType): Omit<Extract<_uniformdev_mesh_sdk.AssetLibraryLocation, {
+    type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
     type: TLocationType;
@@ -444,7 +446,9 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
 }> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
     type: TLocationType;
 }>, "setValue"> & {
-    setValue: SetLocationValueDispatch<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
+    setValue: SetLocationValueDispatch<(Extract<_uniformdev_mesh_sdk.AssetLibraryLocation, {
+        type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
@@ -458,7 +462,9 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
         type: TLocationType;
-    }>)["value"], Parameters<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
+    }>)["value"], Parameters<(Extract<_uniformdev_mesh_sdk.AssetLibraryLocation, {
+        type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
@@ -795,6 +801,8 @@ type InputVariablesProps<TEditorContext = unknown> = {
     warningMessage?: string;
     /** (optional) sets and shows the the info message value */
     infoMessage?: string;
+    /** (optional) sets placeholder when there is no value */
+    placeholder?: string;
     /** (optional) sets caption text value */
     caption?: string;
     /** Disables editing the value of the input, editing variables, and adding variables */

package/dist/index.d.ts

@@ -429,7 +429,9 @@ declare function DataResourceDynamicInputProvider(props: DataResourceDynamicInpu
  *
  * You can also combine (2) and (3) to get both explicit value typing and assertion of the location.
  */
-declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLocationValue = unknown, TLocationSetValue = TLocationValue>(expectedLocation?: TLocationType): Omit<Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
+declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLocationValue = unknown, TLocationSetValue = TLocationValue>(expectedLocation?: TLocationType): Omit<Extract<_uniformdev_mesh_sdk.AssetLibraryLocation, {
+    type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
     type: TLocationType;
@@ -444,7 +446,9 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
 }> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
     type: TLocationType;
 }>, "setValue"> & {
-    setValue: SetLocationValueDispatch<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
+    setValue: SetLocationValueDispatch<(Extract<_uniformdev_mesh_sdk.AssetLibraryLocation, {
+        type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
@@ -458,7 +462,9 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
         type: TLocationType;
-    }>)["value"], Parameters<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
+    }>)["value"], Parameters<(Extract<_uniformdev_mesh_sdk.AssetLibraryLocation, {
+        type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
@@ -795,6 +801,8 @@ type InputVariablesProps<TEditorContext = unknown> = {
     warningMessage?: string;
     /** (optional) sets and shows the the info message value */
     infoMessage?: string;
+    /** (optional) sets placeholder when there is no value */
+    placeholder?: string;
     /** (optional) sets caption text value */
     caption?: string;
     /** Disables editing the value of the input, editing variables, and adding variables */

package/dist/index.esm.js

@@ -4083,6 +4083,18 @@ var inputCompact = css21`
   padding-block: var(--spacing-sm);
   font-size: var(--fs-sm);
 `;
+var placeholderCaption = css21`
+  position: absolute;
+  color: var(--gray-400);
+  inset: var(--spacing-base) var(--spacing-lg) var(--spacing-base) var(--spacing-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+`;
+var placeholderCompact = css21`
+  inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
+`;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 import * as React10 from "react";
@@ -4491,14 +4503,18 @@ import {
   PASTE_COMMAND as PASTE_COMMAND2
 } from "lexical";
 import { useEffect as useEffect13 } from "react";
-import { jsx as jsx38, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
-function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+function VariablesComposerInput({
+  css: css37,
+  placeholder,
+  ...contentEditableProps
+}) {
   return /* @__PURE__ */ jsxs22("div", { children: [
     /* @__PURE__ */ jsx38(
       PlainTextPlugin,
       {
         contentEditable: /* @__PURE__ */ jsx38(ContentEditable, { ...contentEditableProps }),
-        placeholder: null,
+        placeholder: placeholder ? /* @__PURE__ */ jsx38(Fragment9, { children: placeholder }) : null,
         ErrorBoundary: LexicalErrorBoundary
       }
     ),
@@ -4583,7 +4599,7 @@ function RichishCopyAndPastePlugin() {
 }
 
 // src/components/Variables/InputVariables.tsx
-import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 function InputVariables(props) {
   const {
     id,
@@ -4596,6 +4612,7 @@ function InputVariables(props) {
     transformPaste,
     showAddVariableMenuOption,
     inputWhenNoVariables,
+    placeholder,
     caption,
     errorMessage,
     warningMessage,
@@ -4636,7 +4653,17 @@ function InputVariables(props) {
                 "aria-label": ariaLabel,
                 "data-testid": dataTestId ? dataTestId : "input-container",
                 "data-text-value": value,
-                css: [input, styleVariant === "compact" ? inputCompact : null]
+                css: [input, styleVariant === "compact" ? inputCompact : null],
+                placeholder: placeholder ? /* @__PURE__ */ jsx39(
+                  Caption,
+                  {
+                    css: [
+                      placeholderCaption,
+                      styleVariant === "compact" ? placeholderCompact : null
+                    ],
+                    children: placeholder
+                  }
+                ) : void 0
               }
             )
           }
@@ -4695,7 +4722,7 @@ function InputVariablesOverlayMenu({
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ jsx39(Fragment9, { children });
+    return /* @__PURE__ */ jsx39(Fragment10, { children });
   }
   return /* @__PURE__ */ jsxs23("div", { css: menuContainer, children: [
     children,
@@ -4718,6 +4745,7 @@ import { useMemo as useMemo11 } from "react";
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
 import { css as css23 } from "@emotion/react";
+import { scrollbarStyles as scrollbarStyles3 } from "@uniformdev/design-system";
 var variableBindButton2 = css23`
   align-items: center;
   border: none;
@@ -4797,8 +4825,10 @@ var input2 = css23`
   }
 `;
 var inputMultiLine = (lines) => css23`
-  // 1.5 = line height, spacing-md = top and bottom padding
-  height: calc(${lines * 1.5}em + var(--spacing-md));
+  ${scrollbarStyles3}
+  // 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
+  // as the text looked to close to the bottom of the input
+  height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
   resize: vertical;
   overflow: auto;
 `;
@@ -5020,7 +5050,7 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : css24``,
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : css24``,
                     inputCss != null ? inputCss : css24``
                   ]
                 }
@@ -5118,7 +5148,7 @@ var variableValue = css25`
 `;
 
 // src/components/Variables/VariablesList.tsx
-import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -5139,7 +5169,7 @@ function VariablesList() {
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs27(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment11, { children: [
     /* @__PURE__ */ jsx43(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx43(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs27(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
       /* @__PURE__ */ jsx43(TableHead, { children: /* @__PURE__ */ jsxs27(TableRow, { children: [
         /* @__PURE__ */ jsx43(TableCellHead, { children: "Name" }),
@@ -5767,7 +5797,7 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-import { Fragment as Fragment11, jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
@@ -5791,7 +5821,7 @@ function RequestUrl() {
         request.baseRequest ? /* @__PURE__ */ jsx52("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
         /* @__PURE__ */ jsxs31("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs31(Fragment11, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs31(Fragment12, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
@@ -6746,7 +6776,7 @@ var ObjectSearchResultListTitle = css36`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-import { Fragment as Fragment12, jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
@@ -6773,7 +6803,7 @@ function ObjectSearchResultList({
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs40(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment13, { children: [
     /* @__PURE__ */ jsxs40("div", { role: "group", css: ObjectSearchResultListContainer, children: [
       /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx65("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),

package/dist/index.js

@@ -33,9 +33,9 @@ var src_exports = {};
 __export(src_exports, {
   $createVariableNode: () => $createVariableNode,
   $isVariableNode: () => $isVariableNode,
-  AddListButton: () => import_design_system40.AddListButton,
-  Button: () => import_design_system40.Button,
-  Callout: () => import_design_system40.Callout,
+  AddListButton: () => import_design_system41.AddListButton,
+  Button: () => import_design_system41.Button,
+  Callout: () => import_design_system41.Callout,
   ControlledValuePlugin: () => ControlledValuePlugin,
   DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem: () => DamSelectedItem,
@@ -47,24 +47,24 @@ __export(src_exports, {
   DataTypeEditor: () => DataTypeEditor,
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
-  DrawerContent: () => import_design_system40.DrawerContent,
+  DrawerContent: () => import_design_system41.DrawerContent,
   EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
   EntrySearch: () => EntrySearch,
-  Heading: () => import_design_system40.Heading,
+  Heading: () => import_design_system41.Heading,
   INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
   Icons: () => icons_exports,
-  Input: () => import_design_system40.Input,
-  InputComboBox: () => import_design_system40.InputComboBox,
-  InputKeywordSearch: () => import_design_system40.InputKeywordSearch,
-  InputSelect: () => import_design_system40.InputSelect,
-  InputToggle: () => import_design_system40.InputToggle,
+  Input: () => import_design_system41.Input,
+  InputComboBox: () => import_design_system41.InputComboBox,
+  InputKeywordSearch: () => import_design_system41.InputKeywordSearch,
+  InputSelect: () => import_design_system41.InputSelect,
+  InputToggle: () => import_design_system41.InputToggle,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system40.Label,
+  Label: () => import_design_system41.Label,
   LinkButton: () => LinkButton,
-  LoadingIndicator: () => import_design_system40.LoadingIndicator,
-  LoadingOverlay: () => import_design_system40.LoadingOverlay,
-  Menu: () => import_design_system40.Menu,
-  MenuItem: () => import_design_system40.MenuItem,
+  LoadingIndicator: () => import_design_system41.LoadingIndicator,
+  LoadingOverlay: () => import_design_system41.LoadingOverlay,
+  Menu: () => import_design_system41.Menu,
+  MenuItem: () => import_design_system41.MenuItem,
   MeshApp: () => MeshApp,
   OPEN_INSERT_VARIABLE_COMMAND: () => OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer: () => ObjectSearchContainer,
@@ -78,22 +78,22 @@ __export(src_exports, {
   ObjectSearchResultList: () => ObjectSearchResultList,
   ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
   ParameterConnectionIndicator: () => ParameterConnectionIndicator,
-  ParameterGroup: () => import_design_system40.ParameterGroup,
-  ParameterImage: () => import_design_system40.ParameterImage,
-  ParameterImageInner: () => import_design_system40.ParameterImageInner,
-  ParameterInput: () => import_design_system40.ParameterInput,
-  ParameterInputInner: () => import_design_system40.ParameterInputInner,
-  ParameterLabel: () => import_design_system40.ParameterLabel,
-  ParameterMenuButton: () => import_design_system40.ParameterMenuButton,
+  ParameterGroup: () => import_design_system41.ParameterGroup,
+  ParameterImage: () => import_design_system41.ParameterImage,
+  ParameterImageInner: () => import_design_system41.ParameterImageInner,
+  ParameterInput: () => import_design_system41.ParameterInput,
+  ParameterInputInner: () => import_design_system41.ParameterInputInner,
+  ParameterLabel: () => import_design_system41.ParameterLabel,
+  ParameterMenuButton: () => import_design_system41.ParameterMenuButton,
   ParameterOrSingleVariable: () => ParameterOrSingleVariable,
-  ParameterSelect: () => import_design_system40.ParameterSelect,
-  ParameterSelectInner: () => import_design_system40.ParameterSelectInner,
-  ParameterShell: () => import_design_system40.ParameterShell,
+  ParameterSelect: () => import_design_system41.ParameterSelect,
+  ParameterSelectInner: () => import_design_system41.ParameterSelectInner,
+  ParameterShell: () => import_design_system41.ParameterShell,
   ParameterShellContext: () => import_design_system14.ParameterShellContext,
-  ParameterTextarea: () => import_design_system40.ParameterTextarea,
-  ParameterTextareaInner: () => import_design_system40.ParameterTextareaInner,
-  ParameterToggle: () => import_design_system40.ParameterToggle,
-  ParameterToggleInner: () => import_design_system40.ParameterToggleInner,
+  ParameterTextarea: () => import_design_system41.ParameterTextarea,
+  ParameterTextareaInner: () => import_design_system41.ParameterTextareaInner,
+  ParameterToggle: () => import_design_system41.ParameterToggle,
+  ParameterToggleInner: () => import_design_system41.ParameterToggleInner,
   ParameterVariables: () => ParameterVariables,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
@@ -112,13 +112,13 @@ __export(src_exports, {
   RequestUrl: () => RequestUrl,
   RequestUrlInput: () => RequestUrlInput,
   ResolvableLoadingValue: () => ResolvableLoadingValue,
-  ScrollableList: () => import_design_system40.ScrollableList,
-  ScrollableListItem: () => import_design_system40.ScrollableListItem,
+  ScrollableList: () => import_design_system41.ScrollableList,
+  ScrollableListItem: () => import_design_system41.ScrollableListItem,
   SelectionField: () => SelectionField,
-  Switch: () => import_design_system40.Switch,
+  Switch: () => import_design_system41.Switch,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system40.Textarea,
-  Theme: () => import_design_system40.Theme,
+  Textarea: () => import_design_system41.Textarea,
+  Theme: () => import_design_system41.Theme,
   VariableEditor: () => VariableEditor,
   VariableNode: () => VariableNode,
   VariablesList: () => VariablesList,
@@ -4261,6 +4261,18 @@ var inputCompact = import_react41.css`
   padding-block: var(--spacing-sm);
   font-size: var(--fs-sm);
 `;
+var placeholderCaption = import_react41.css`
+  position: absolute;
+  color: var(--gray-400);
+  inset: var(--spacing-base) var(--spacing-lg) var(--spacing-base) var(--spacing-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+`;
+var placeholderCompact = import_react41.css`
+  inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
+`;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 var React10 = __toESM(require("react"));
@@ -4658,13 +4670,17 @@ var import_utils4 = require("@lexical/utils");
 var import_lexical9 = require("lexical");
 var import_react48 = require("react");
 var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
-function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
+function VariablesComposerInput({
+  css: css37,
+  placeholder,
+  ...contentEditableProps
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       import_LexicalPlainTextPlugin.PlainTextPlugin,
       {
         contentEditable: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_LexicalContentEditable.ContentEditable, { ...contentEditableProps }),
-        placeholder: null,
+        placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: placeholder }) : null,
         ErrorBoundary: import_LexicalErrorBoundary.default
       }
     ),
@@ -4762,6 +4778,7 @@ function InputVariables(props) {
     transformPaste,
     showAddVariableMenuOption,
     inputWhenNoVariables,
+    placeholder,
     caption,
     errorMessage,
     warningMessage,
@@ -4802,7 +4819,17 @@ function InputVariables(props) {
                 "aria-label": ariaLabel,
                 "data-testid": dataTestId ? dataTestId : "input-container",
                 "data-text-value": value,
-                css: [input, styleVariant === "compact" ? inputCompact : null]
+                css: [input, styleVariant === "compact" ? inputCompact : null],
+                placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_design_system20.Caption,
+                  {
+                    css: [
+                      placeholderCaption,
+                      styleVariant === "compact" ? placeholderCompact : null
+                    ],
+                    children: placeholder
+                  }
+                ) : void 0
               }
             )
           }
@@ -4879,11 +4906,12 @@ function InputVariablesOverlayMenu({
 // src/components/Variables/ParameterConnectionIndicator.tsx
 var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
 var import_canvas6 = require("@uniformdev/canvas");
-var import_design_system21 = require("@uniformdev/design-system");
+var import_design_system22 = require("@uniformdev/design-system");
 var import_react51 = require("react");
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
 var import_react50 = require("@emotion/react");
+var import_design_system21 = require("@uniformdev/design-system");
 var variableBindButton2 = import_react50.css`
   align-items: center;
   border: none;
@@ -4963,8 +4991,10 @@ var input2 = import_react50.css`
   }
 `;
 var inputMultiLine = (lines) => import_react50.css`
-  // 1.5 = line height, spacing-md = top and bottom padding
-  height: calc(${lines * 1.5}em + var(--spacing-md));
+  ${import_design_system21.scrollbarStyles}
+  // 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
+  // as the text looked to close to the bottom of the input
+  height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
   resize: vertical;
   overflow: auto;
 `;
@@ -4989,10 +5019,10 @@ function ParameterConnectionIndicator({
     });
     return result;
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system21.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system22.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { css: { flex: 1 }, children }),
     disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_design_system21.Menu,
+      import_design_system22.Menu,
       {
         placement: "bottom-start",
         withoutPortal: true,
@@ -5014,7 +5044,7 @@ function ParameterConnectionIndicator({
 }
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
-var import_design_system22 = require("@uniformdev/design-system");
+var import_design_system23 = require("@uniformdev/design-system");
 var import_react53 = require("react");
 
 // src/components/Variables/composer/OnDisconnectPlugin.tsx
@@ -5100,7 +5130,7 @@ function ParameterOrSingleVariable(props) {
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OnDisconnectPlugin, { onDisconnect: handleDisconnect }),
           editorRef ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorRefPlugin, { editorRef }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ControlledValuePlugin, { enabled: true, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system23.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               VariablesComposerInput,
               {
@@ -5128,7 +5158,7 @@ function ParameterOrSingleVariable(props) {
 
 // src/components/Variables/ParameterVariables.tsx
 var import_react54 = require("@emotion/react");
-var import_design_system23 = require("@uniformdev/design-system");
+var import_design_system24 = require("@uniformdev/design-system");
 var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
 function ParameterVariables(props) {
   const {
@@ -5167,7 +5197,7 @@ function ParameterVariables(props) {
         editorRef ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorRefPlugin, { editorRef }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-          import_design_system23.HorizontalRhythm,
+          import_design_system24.HorizontalRhythm,
           {
             align: "center",
             gap: "xs",
@@ -5186,7 +5216,7 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : import_react54.css``,
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : import_react54.css``,
                     inputCss != null ? inputCss : import_react54.css``
                   ]
                 }
@@ -5224,7 +5254,7 @@ ${prettifyBindExpression(bindExpression)}`
 
 // src/components/Variables/VariablesList.tsx
 var import_react56 = require("@emotion/react");
-var import_design_system24 = require("@uniformdev/design-system");
+var import_design_system25 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
@@ -5296,13 +5326,13 @@ function VariablesList() {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system24.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system24.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellHead, {})
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system25.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system25.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellHead, {})
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system24.TableBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system25.TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue, readOnly }, index) => {
           const text = displayName != null ? displayName : name;
           const textValue = variableDefaultTextValue(defaultValue);
@@ -5313,7 +5343,7 @@ function VariablesList() {
               index,
               isDragDisabled: sorted.length === 1,
               children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-                import_design_system24.TableRow,
+                import_design_system25.TableRow,
                 {
                   ref: provided2.innerRef,
                   ...provided2.dragHandleProps,
@@ -5322,7 +5352,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "button",
                       {
                         css: variableName,
@@ -5335,21 +5365,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: variableValue, title: textValue, children: textValue }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellData, { align: "right", children: readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: variableValue, title: textValue, children: textValue }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellData, { align: "right", children: readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
-                          import_design_system24.button,
+                          import_design_system25.button,
                           import_react56.css`
                                     background: transparent;
                                   `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.Icon, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.Icon, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -5363,7 +5393,7 @@ function VariablesList() {
       ] })
     ] }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      import_design_system24.AddListButton,
+      import_design_system25.AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
@@ -5399,7 +5429,7 @@ function DataResourceDynamicInputProviderRenderer({
 }
 
 // src/components/DataResourceVariablesList.tsx
-var import_design_system25 = require("@uniformdev/design-system");
+var import_design_system26 = require("@uniformdev/design-system");
 var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
 function DataResourceVariablesList(props) {
   const {
@@ -5429,9 +5459,9 @@ function DataResourceVariablesListExplicit({
     if (NoVariablesComponent) {
       return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system25.Callout, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system26.Callout, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system25.VerticalRhythm, { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system26.VerticalRhythm, { children: variableDefinitions.map((variableDefinition) => {
     var _a, _b, _c;
     const VariableRenderer = variableDefinition.type ? (_a = typeRenderers == null ? void 0 : typeRenderers[variableDefinition.type]) != null ? _a : TextVariableRenderer : TextVariableRenderer;
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -5473,7 +5503,7 @@ function TextVariableRenderer({ definition, value, setValue }) {
 
 // src/components/Request/RequestBody.tsx
 var import_react58 = require("@emotion/react");
-var import_design_system26 = require("@uniformdev/design-system");
+var import_design_system27 = require("@uniformdev/design-system");
 var import_react59 = require("react");
 
 // src/components/Request/RequestProvider.tsx
@@ -5616,7 +5646,7 @@ function RequestBody() {
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              import_design_system26.InputSelect,
+              import_design_system27.InputSelect,
               {
                 label: "Language",
                 showLabel: false,
@@ -5639,7 +5669,7 @@ function RequestBody() {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_design_system26.JsonEditor,
+          import_design_system27.JsonEditor,
           {
             height: 200,
             defaultValue: request.body,
@@ -5656,7 +5686,7 @@ function RequestBody() {
 }
 
 // src/components/Request/RequestHeaders.tsx
-var import_design_system27 = require("@uniformdev/design-system");
+var import_design_system28 = require("@uniformdev/design-system");
 var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
 function RequestHeaders({
   disableVariables,
@@ -5676,30 +5706,30 @@ function RequestHeaders({
       index
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellHead, { children: "Value" }),
-      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellHead, { children: "Omit If Empty" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellHead, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellHead, { children: "Omit If Empty" }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableCellData, { width: "50%", children: [
             baseHeader.key,
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("br", {}),
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableCellData, { width: "50%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableCellData, { width: "50%", children: [
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.WarningMessage, { message: "overridden below" }) : null
+            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
       deezHeaders.map((header, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_design_system27.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_design_system28.Input,
             {
               label: header.key,
               value: header.key,
@@ -5718,7 +5748,7 @@ function RequestHeaders({
               "data-testid": "header-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             InputVariables,
             {
               value: header.value,
@@ -5729,8 +5759,8 @@ function RequestHeaders({
               "data-testid": "header-value"
             }
           ) : null }),
-          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_design_system27.Input,
+          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_design_system28.Input,
             {
               type: "checkbox",
               checked: header.omitIfEmpty,
@@ -5753,13 +5783,13 @@ function RequestHeaders({
 }
 
 // src/components/Request/RequestMethodSelect.tsx
-var import_design_system28 = require("@uniformdev/design-system");
+var import_design_system29 = require("@uniformdev/design-system");
 var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_design_system28.InputSelect,
+    import_design_system29.InputSelect,
     {
       ...props,
       options: [
@@ -5774,7 +5804,7 @@ function RequestMethodSelect(props) {
 }
 
 // src/components/Request/RequestParameters.tsx
-var import_design_system29 = require("@uniformdev/design-system");
+var import_design_system30 = require("@uniformdev/design-system");
 var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
 function RequestParameters({
   disableVariables,
@@ -5795,30 +5825,30 @@ function RequestParameters({
       index
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellHead, { children: "Value" }),
-      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellHead, { children: "Omit If Empty" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellHead, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellHead, { children: "Omit If Empty" }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableCellData, { width: "50%", children: [
             baseParameter.key,
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("br", {}),
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableCellData, { width: "50%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableCellData, { width: "50%", children: [
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.WarningMessage, { message: "overridden below" }) : null
+            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
       deezParameters.map((parameter, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            import_design_system29.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            import_design_system30.Input,
             {
               label: parameter.key,
               value: parameter.key,
@@ -5841,7 +5871,7 @@ function RequestParameters({
               "data-testid": "parameter-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             InputVariables,
             {
               value: parameter.value,
@@ -5857,8 +5887,8 @@ function RequestParameters({
               enableEditingVariables: true
             }
           ) : null }),
-          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            import_design_system29.Input,
+          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            import_design_system30.Input,
             {
               type: "checkbox",
               checked: parameter.omitIfEmpty,
@@ -6154,7 +6184,7 @@ function convertRequestDataToDataType(dataType, requestData) {
 }
 
 // src/components/MeshApp.tsx
-var import_design_system30 = require("@uniformdev/design-system");
+var import_design_system31 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
@@ -6205,7 +6235,7 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system30.LoadingIndicator, {});
+    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system31.LoadingIndicator, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
@@ -6215,14 +6245,14 @@ var MeshApp = ({
     throw error;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system30.Theme, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system31.Theme, {}),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
 var import_react63 = require("@emotion/react");
-var import_design_system31 = require("@uniformdev/design-system");
+var import_design_system32 = require("@uniformdev/design-system");
 var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
   buttonText,
@@ -6230,9 +6260,9 @@ var DataRefreshButton = ({
   onRefreshData,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_design_system31.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_design_system32.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-      import_design_system31.LoadingIndicator,
+      import_design_system32.LoadingIndicator,
       {
         css: import_react63.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
@@ -6246,7 +6276,7 @@ var DataRefreshButton = ({
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 var import_react65 = require("@emotion/react");
 var import_canvas8 = require("@uniformdev/canvas");
-var import_design_system32 = require("@uniformdev/design-system");
+var import_design_system33 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 var import_canvas7 = require("@uniformdev/canvas");
@@ -6363,10 +6393,10 @@ var ObjectSearchContainer = ({
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
   const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
-  const body = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system32.VerticalRhythm, { children: [
+  const body = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system33.VerticalRhythm, { children: [
     searchFilters,
     !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-      import_design_system32.ScrollableList,
+      import_design_system33.ScrollableList,
       {
         role: "list",
         css: import_react65.css`
@@ -6406,8 +6436,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system32.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system32.VerticalRhythm, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system32.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system33.VerticalRhythm, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       InputVariables,
       {
         label,
@@ -6427,7 +6457,7 @@ var ObjectSearchContainer = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_design_system33 = require("@uniformdev/design-system");
+var import_design_system34 = require("@uniformdev/design-system");
 var import_react67 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
@@ -6493,7 +6523,7 @@ var ObjectSearchFilter = ({
       ],
       children: [
         memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          import_design_system33.InputSelect,
+          import_design_system34.InputSelect,
           {
             label: selectLabel,
             showLabel: false,
@@ -6503,7 +6533,7 @@ var ObjectSearchFilter = ({
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          import_design_system33.InputKeywordSearch,
+          import_design_system34.InputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
@@ -6528,11 +6558,11 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
 };
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
-var import_design_system35 = require("@uniformdev/design-system");
+var import_design_system36 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
 var import_react68 = require("@emotion/react");
-var import_design_system34 = require("@uniformdev/design-system");
+var import_design_system35 = require("@uniformdev/design-system");
 var ObjectListItemContainer = import_react68.css`
   align-items: center;
   border: 1px solid var(--gray-300);
@@ -6547,7 +6577,7 @@ var ObjectListItemContainerDisabled = import_react68.css`
   pointer-events: none;
 `;
 var ObjectListItemLoading = import_react68.css`
-  animation: ${import_design_system34.skeletonLoading} 1s linear infinite alternate;
+  animation: ${import_design_system35.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
   position: relative;
@@ -6655,8 +6685,8 @@ var ObjectSearchListItem = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
-          selected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system35.Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system35.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+          selected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Chip, { text: "selected", size: "xs" }) : null,
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
         ] }),
         !children ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: ObjectListItemUnControlledContent, children })
       ]
@@ -6668,14 +6698,14 @@ var ObjectSearchListItemLoadingSkeleton = () => {
 };
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-var import_design_system37 = require("@uniformdev/design-system");
+var import_design_system38 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
 var import_react69 = require("@emotion/react");
-var import_design_system36 = require("@uniformdev/design-system");
+var import_design_system37 = require("@uniformdev/design-system");
 var ButtonStyles = import_react69.css`
-  ${import_design_system36.button}
+  ${import_design_system37.button}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
   color: var(--brand-secondary-1);
@@ -6822,10 +6852,10 @@ var ObjectSearchResultItem = ({
         /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
         /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system37.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
-          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system37.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
           !createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
             !createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
               /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("strong", { children: "Last updated: " }),
@@ -6842,13 +6872,13 @@ var ObjectSearchResultItem = ({
     ] }) }),
     !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
       !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
-      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system37.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-var import_design_system38 = require("@uniformdev/design-system");
+var import_design_system39 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
@@ -6909,12 +6939,12 @@ function ObjectSearchResultList({
       /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system39.Counter, { count: selectedListItems.length })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-          import_design_system38.Button,
+          import_design_system39.Button,
           {
             buttonType: "ghostDestructive",
             size: "xs",
@@ -6959,7 +6989,7 @@ function ObjectSearchResultList({
 }
 
 // src/components/ObjectSearch/QueryFilter.tsx
-var import_design_system39 = require("@uniformdev/design-system");
+var import_design_system40 = require("@uniformdev/design-system");
 var import_react72 = require("react");
 var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
@@ -7008,7 +7038,7 @@ var QueryFilter = ({
   }, [onSetQuery, queryState]);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_design_system39.VerticalRhythm, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_design_system40.VerticalRhythm, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         InputVariables,
         {
@@ -7018,7 +7048,7 @@ var QueryFilter = ({
           disableInlineMenu: true,
           id: "qf_searchText",
           inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-            import_design_system39.InputKeywordSearch,
+            import_design_system40.InputKeywordSearch,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
@@ -7041,7 +7071,7 @@ var QueryFilter = ({
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_design_system39.InputSelect,
+              import_design_system40.InputSelect,
               {
                 id: "qf_contentType",
                 label: contentTypeLabel,
@@ -7068,7 +7098,7 @@ var QueryFilter = ({
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_design_system39.Input,
+              import_design_system40.Input,
               {
                 id: "qf_count",
                 label: countLabel,
@@ -7092,7 +7122,7 @@ var QueryFilter = ({
             onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_design_system39.InputSelect,
+              import_design_system40.InputSelect,
               {
                 label: sortLabel,
                 id: "qf_sortBy",
@@ -7122,7 +7152,7 @@ var QueryFilter = ({
             onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_design_system39.InputSelect,
+              import_design_system40.InputSelect,
               {
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
@@ -7207,7 +7237,7 @@ function createLocationValidator(setValue, validate) {
 }
 
 // src/index.ts
-var import_design_system40 = require("@uniformdev/design-system");
+var import_design_system41 = require("@uniformdev/design-system");
 __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -4083,6 +4083,18 @@ var inputCompact = css21`
   padding-block: var(--spacing-sm);
   font-size: var(--fs-sm);
 `;
+var placeholderCaption = css21`
+  position: absolute;
+  color: var(--gray-400);
+  inset: var(--spacing-base) var(--spacing-lg) var(--spacing-base) var(--spacing-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+`;
+var placeholderCompact = css21`
+  inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
+`;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 import * as React10 from "react";
@@ -4491,14 +4503,18 @@ import {
   PASTE_COMMAND as PASTE_COMMAND2
 } from "lexical";
 import { useEffect as useEffect13 } from "react";
-import { jsx as jsx38, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
-function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+function VariablesComposerInput({
+  css: css37,
+  placeholder,
+  ...contentEditableProps
+}) {
   return /* @__PURE__ */ jsxs22("div", { children: [
     /* @__PURE__ */ jsx38(
       PlainTextPlugin,
       {
         contentEditable: /* @__PURE__ */ jsx38(ContentEditable, { ...contentEditableProps }),
-        placeholder: null,
+        placeholder: placeholder ? /* @__PURE__ */ jsx38(Fragment9, { children: placeholder }) : null,
         ErrorBoundary: LexicalErrorBoundary
       }
     ),
@@ -4583,7 +4599,7 @@ function RichishCopyAndPastePlugin() {
 }
 
 // src/components/Variables/InputVariables.tsx
-import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 function InputVariables(props) {
   const {
     id,
@@ -4596,6 +4612,7 @@ function InputVariables(props) {
     transformPaste,
     showAddVariableMenuOption,
     inputWhenNoVariables,
+    placeholder,
     caption,
     errorMessage,
     warningMessage,
@@ -4636,7 +4653,17 @@ function InputVariables(props) {
                 "aria-label": ariaLabel,
                 "data-testid": dataTestId ? dataTestId : "input-container",
                 "data-text-value": value,
-                css: [input, styleVariant === "compact" ? inputCompact : null]
+                css: [input, styleVariant === "compact" ? inputCompact : null],
+                placeholder: placeholder ? /* @__PURE__ */ jsx39(
+                  Caption,
+                  {
+                    css: [
+                      placeholderCaption,
+                      styleVariant === "compact" ? placeholderCompact : null
+                    ],
+                    children: placeholder
+                  }
+                ) : void 0
               }
             )
           }
@@ -4695,7 +4722,7 @@ function InputVariablesOverlayMenu({
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ jsx39(Fragment9, { children });
+    return /* @__PURE__ */ jsx39(Fragment10, { children });
   }
   return /* @__PURE__ */ jsxs23("div", { css: menuContainer, children: [
     children,
@@ -4718,6 +4745,7 @@ import { useMemo as useMemo11 } from "react";
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
 import { css as css23 } from "@emotion/react";
+import { scrollbarStyles as scrollbarStyles3 } from "@uniformdev/design-system";
 var variableBindButton2 = css23`
   align-items: center;
   border: none;
@@ -4797,8 +4825,10 @@ var input2 = css23`
   }
 `;
 var inputMultiLine = (lines) => css23`
-  // 1.5 = line height, spacing-md = top and bottom padding
-  height: calc(${lines * 1.5}em + var(--spacing-md));
+  ${scrollbarStyles3}
+  // 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
+  // as the text looked to close to the bottom of the input
+  height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
   resize: vertical;
   overflow: auto;
 `;
@@ -5020,7 +5050,7 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : css24``,
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : css24``,
                     inputCss != null ? inputCss : css24``
                   ]
                 }
@@ -5118,7 +5148,7 @@ var variableValue = css25`
 `;
 
 // src/components/Variables/VariablesList.tsx
-import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -5139,7 +5169,7 @@ function VariablesList() {
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs27(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment11, { children: [
     /* @__PURE__ */ jsx43(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx43(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs27(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
       /* @__PURE__ */ jsx43(TableHead, { children: /* @__PURE__ */ jsxs27(TableRow, { children: [
         /* @__PURE__ */ jsx43(TableCellHead, { children: "Name" }),
@@ -5767,7 +5797,7 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-import { Fragment as Fragment11, jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
@@ -5791,7 +5821,7 @@ function RequestUrl() {
         request.baseRequest ? /* @__PURE__ */ jsx52("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
         /* @__PURE__ */ jsxs31("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs31(Fragment11, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs31(Fragment12, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
@@ -6746,7 +6776,7 @@ var ObjectSearchResultListTitle = css36`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-import { Fragment as Fragment12, jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
@@ -6773,7 +6803,7 @@ function ObjectSearchResultList({
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs40(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment13, { children: [
     /* @__PURE__ */ jsxs40("div", { role: "group", css: ObjectSearchResultListContainer, children: [
       /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx65("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.60.1-alpha.6+ac384b46c",
+  "version": "19.61.1-alpha.13+9ea7c72e6",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -44,24 +44,24 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.0.1",
+    "@hookform/resolvers": "^3.3.1",
     "@lexical/clipboard": "^0.12.0",
     "@lexical/react": "^0.12.0",
     "@lexical/selection": "^0.12.0",
     "@lexical/utils": "^0.12.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
-    "@uniformdev/canvas": "19.60.1-alpha.6+ac384b46c",
-    "@uniformdev/design-system": "19.60.1-alpha.6+ac384b46c",
-    "@uniformdev/mesh-sdk": "19.60.1-alpha.6+ac384b46c",
+    "@uniformdev/canvas": "19.61.1-alpha.13+9ea7c72e6",
+    "@uniformdev/design-system": "19.61.1-alpha.13+9ea7c72e6",
+    "@uniformdev/mesh-sdk": "19.61.1-alpha.13+9ea7c72e6",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
     "react-beautiful-dnd": "13.1.1",
-    "react-hook-form": "^7.43.9",
+    "react-hook-form": "^7.47.0",
     "react-use": "17.4.0",
     "timeago.js": "4.0.2",
     "uuid": "9.0.1",
-    "zod": "^3.21.4"
+    "zod": "3.22.4"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.8.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ac384b46c7694dbecf4983cb04cd66dc8904c5fa"
+  "gitHead": "9ea7c72e685bf1dd690149aa40a9b7a443d2ad28"
 }