@uniformdev/mesh-sdk-react 19.69.0 → 19.71.1-alpha.103

package/dist/index.d.mts

@@ -42,21 +42,7 @@ declare const SvgMoreVerticalAlt: (props: SVGProps<SVGSVGElement>) => _emotion_r
 declare const SvgPlus: (props: SVGProps<SVGSVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare namespace index {
-  export {
-    SvgCaution as Caution,
-    SvgCheckmark as Checkmark,
-    SvgChevronDown as ChevronDown,
-    SvgClose as Close,
-    SvgDanger as Danger,
-    SvgExclamationPoint as ExclamationPoint,
-    SvgInfo as Info,
-    SvgLightbulb as Lightbulb,
-    SvgMagnifyingGlass as MagnifyingGlass,
-    SvgMaximizeAlt as MaximizeAlt,
-    SvgMinus as Minus,
-    SvgMoreVerticalAlt as MoreVerticalAlt,
-    SvgPlus as Plus,
-  };
+  export { SvgCaution as Caution, SvgCheckmark as Checkmark, SvgChevronDown as ChevronDown, SvgClose as Close, SvgDanger as Danger, SvgExclamationPoint as ExclamationPoint, SvgInfo as Info, SvgLightbulb as Lightbulb, SvgMagnifyingGlass as MagnifyingGlass, SvgMaximizeAlt as MaximizeAlt, SvgMinus as Minus, SvgMoreVerticalAlt as MoreVerticalAlt, SvgPlus as Plus };
 }
 
 /** @deprecated please use ObjectSearchListItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-list-item */
@@ -429,12 +415,18 @@ 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.AssetParameterLocation, {
+    type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
     type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.AIPromptMetadataLocation, {
+    type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.ParamTypeConfigLocation<TLocationValue, unknown>, {
@@ -444,12 +436,18 @@ 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.AssetParameterLocation, {
+        type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.AIPromptMetadataLocation, {
+        type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeConfigLocation<TLocationValue, unknown>, {
@@ -458,12 +456,18 @@ 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.AssetParameterLocation, {
+        type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.AIPromptMetadataLocation, {
+        type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeConfigLocation<TLocationValue, unknown>, {
@@ -586,6 +590,10 @@ type MeshDataVariableDefinition = Omit<DataVariableDefinition, 'default'> & {
      * If not passed, defaults to helpText.
      */
     tooltip?: string;
+    /**
+     If true the variable will be shown only in menus.
+     */
+    system?: boolean;
 };
 /**
  * Provides information for an undefined variable that might be referenced in data,
@@ -795,6 +803,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 */
@@ -1658,4 +1668,4 @@ declare function useUniformMeshSdk(): _uniformdev_mesh_sdk.UniformMeshSDK;
  */
 declare function createLocationValidator<TSetValue>(setValue: SetLocationValueDispatch<TSetValue>, validate: (newValue: TSetValue, currentResult: SetValueOptions | undefined) => SetValueOptions): SetLocationValueDispatch<TSetValue>;
 
-export { $createVariableNode, $isVariableNode, BaseRequestData, Brand, ControlledValuePlugin, DISCONNECT_VARIABLE_COMMAND, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, DataResourceDynamicInputProvider, DataResourceDynamicInputProviderProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListExplicit, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DisconnectVariableCommandArguments, DispatchResult, EDIT_VARIABLE_COMMAND, EditVariableCommandArguments, EntrySearch, EntrySearchContentType, EntrySearchProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, INSERT_VARIABLE_COMMAND, index as Icons, InputVariables, InputVariablesProps, InsertVariableCommandArguments, ItemListProps, KnownUndefinedVariableInfo, LinkButton, MeshApp, MeshAppProps, MeshDataVariableDefinition, MinimalDynamicInput, MinimalDynamicInputs, NoResultsProps, OPEN_INSERT_VARIABLE_COMMAND, ObjectSearchContainer, ObjectSearchContainerProps, ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, ObjectSearchFilterContainerProps, ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, ObjectSearchListItemProps, ObjectSearchProvider, ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, ObjectSearchResultItemButtonProps, ObjectSearchResultItemProps, ObjectSearchResultList, ObjectSearchResultListProps, ParamTypeDynamicDataProvider, ParamTypeDynamicDataProviderProps, ParameterConnectOptions, ParameterConnectionIndicator, ParameterConnectionIndicatorProps, ParameterOrSingleVariable, ParameterOrSingleVariableProps, ParameterVariables, ParameterVariablesProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SerializedVariableNode, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, UseVariablesMenu, UseVariablesMenuInput, VariableEditor, VariableEditorCompleteEvent, VariableEditorProps, VariableNode, VariableNodeState, VariableSourceGroup, VariablesAction, VariablesContext, VariablesEvents, VariablesList, VariablesPlugin, VariablesPluginProps, VariablesProvider, VariablesProviderProps, badgeIcon, convertConnectedDataToVariable, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, hasReferencedVariables, prettifyBindExpression, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, serializeVariablesEditorState, setVariablesEditorValue, urlEncodeRequestParameter, urlEncodeRequestUrl, useConnectedDataAsVariables, useDynamicInputsAsVariables, useMeshLocation, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariableEditor, useVariables, useVariablesMenu, variableDefaultTextValue, variablePrefix, variableSuffix, variablesToGroupedList, variablesToList };
+export { $createVariableNode, $isVariableNode, type BaseRequestData, type Brand, ControlledValuePlugin, DISCONNECT_VARIABLE_COMMAND, type DamItem, DamSelectedItem, type DamSelectedItemProps, DataRefreshButton, type DataRefreshButtonProps, DataResourceDynamicInputProvider, type DataResourceDynamicInputProviderProps, type DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListExplicit, type DataResourceVariablesListProps, DataSourceEditor, type DataSourceEditorProps, DataTypeEditor, type DataTypeEditorProps, type DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, type DisconnectVariableCommandArguments, type DispatchResult, EDIT_VARIABLE_COMMAND, type EditVariableCommandArguments, EntrySearch, type EntrySearchContentType, type EntrySearchProps, type EntrySearchQueryOptions, type EntrySearchResult, type EntrySearchRowProps, type EntrySearchSelectedItemProps, type GetProductOptions, type GetProductsOptions, INSERT_VARIABLE_COMMAND, index as Icons, InputVariables, type InputVariablesProps, type InsertVariableCommandArguments, type ItemListProps, type KnownUndefinedVariableInfo, LinkButton, MeshApp, type MeshAppProps, type MeshDataVariableDefinition, type MinimalDynamicInput, type MinimalDynamicInputs, type NoResultsProps, OPEN_INSERT_VARIABLE_COMMAND, ObjectSearchContainer, type ObjectSearchContainerProps, type ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, type ObjectSearchFilterContainerProps, type ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, type ObjectSearchListItemProps, ObjectSearchProvider, type ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, type ObjectSearchResultItemButtonProps, type ObjectSearchResultItemProps, ObjectSearchResultList, type ObjectSearchResultListProps, ParamTypeDynamicDataProvider, type ParamTypeDynamicDataProviderProps, type ParameterConnectOptions, ParameterConnectionIndicator, type ParameterConnectionIndicatorProps, ParameterOrSingleVariable, type ParameterOrSingleVariableProps, ParameterVariables, type ParameterVariablesProps, type ProductCategory, type ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, type ProductQueryCategory, ProductQueryContext, type ProductQueryContextValue, type ProductQueryProps, ProductSearch, ProductSearchContext, type ProductSearchContextValue, type ProductSearchProps, type ProductSearchResult, type ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, type QueryFilterProps, type QueryFilterSearchProps, type RequestAction, RequestBody, type RequestContext, type RequestData, RequestHeaders, RequestMethodSelect, type RequestParameter, RequestParameters, type RequestParametersProps, RequestProvider, type RequestProviderProps, RequestTypeContainer, type RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, type SearchQueryProps, type SelectedItemProps, SelectionField, type SelectionFieldValue, type SerializedVariableNode, type SetLocationValueDispatch, type SetLocationValueFunction, TextVariableRenderer, type UseVariablesMenu, type UseVariablesMenuInput, VariableEditor, type VariableEditorCompleteEvent, type VariableEditorProps, VariableNode, type VariableNodeState, type VariableSourceGroup, type VariablesAction, type VariablesContext, type VariablesEvents, VariablesList, VariablesPlugin, type VariablesPluginProps, VariablesProvider, type VariablesProviderProps, badgeIcon, convertConnectedDataToVariable, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, hasReferencedVariables, prettifyBindExpression, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, serializeVariablesEditorState, setVariablesEditorValue, urlEncodeRequestParameter, urlEncodeRequestUrl, useConnectedDataAsVariables, useDynamicInputsAsVariables, useMeshLocation, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariableEditor, useVariables, useVariablesMenu, variableDefaultTextValue, variablePrefix, variableSuffix, variablesToGroupedList, variablesToList };

package/dist/index.d.ts

@@ -42,21 +42,7 @@ declare const SvgMoreVerticalAlt: (props: SVGProps<SVGSVGElement>) => _emotion_r
 declare const SvgPlus: (props: SVGProps<SVGSVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare namespace index {
-  export {
-    SvgCaution as Caution,
-    SvgCheckmark as Checkmark,
-    SvgChevronDown as ChevronDown,
-    SvgClose as Close,
-    SvgDanger as Danger,
-    SvgExclamationPoint as ExclamationPoint,
-    SvgInfo as Info,
-    SvgLightbulb as Lightbulb,
-    SvgMagnifyingGlass as MagnifyingGlass,
-    SvgMaximizeAlt as MaximizeAlt,
-    SvgMinus as Minus,
-    SvgMoreVerticalAlt as MoreVerticalAlt,
-    SvgPlus as Plus,
-  };
+  export { SvgCaution as Caution, SvgCheckmark as Checkmark, SvgChevronDown as ChevronDown, SvgClose as Close, SvgDanger as Danger, SvgExclamationPoint as ExclamationPoint, SvgInfo as Info, SvgLightbulb as Lightbulb, SvgMagnifyingGlass as MagnifyingGlass, SvgMaximizeAlt as MaximizeAlt, SvgMinus as Minus, SvgMoreVerticalAlt as MoreVerticalAlt, SvgPlus as Plus };
 }
 
 /** @deprecated please use ObjectSearchListItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-list-item */
@@ -429,12 +415,18 @@ 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.AssetParameterLocation, {
+    type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
     type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.AIPromptMetadataLocation, {
+    type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.ParamTypeConfigLocation<TLocationValue, unknown>, {
@@ -444,12 +436,18 @@ 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.AssetParameterLocation, {
+        type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.AIPromptMetadataLocation, {
+        type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeConfigLocation<TLocationValue, unknown>, {
@@ -458,12 +456,18 @@ 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.AssetParameterLocation, {
+        type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.AIPromptMetadataLocation, {
+        type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeConfigLocation<TLocationValue, unknown>, {
@@ -586,6 +590,10 @@ type MeshDataVariableDefinition = Omit<DataVariableDefinition, 'default'> & {
      * If not passed, defaults to helpText.
      */
     tooltip?: string;
+    /**
+     If true the variable will be shown only in menus.
+     */
+    system?: boolean;
 };
 /**
  * Provides information for an undefined variable that might be referenced in data,
@@ -795,6 +803,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 */
@@ -1658,4 +1668,4 @@ declare function useUniformMeshSdk(): _uniformdev_mesh_sdk.UniformMeshSDK;
  */
 declare function createLocationValidator<TSetValue>(setValue: SetLocationValueDispatch<TSetValue>, validate: (newValue: TSetValue, currentResult: SetValueOptions | undefined) => SetValueOptions): SetLocationValueDispatch<TSetValue>;
 
-export { $createVariableNode, $isVariableNode, BaseRequestData, Brand, ControlledValuePlugin, DISCONNECT_VARIABLE_COMMAND, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, DataResourceDynamicInputProvider, DataResourceDynamicInputProviderProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListExplicit, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DisconnectVariableCommandArguments, DispatchResult, EDIT_VARIABLE_COMMAND, EditVariableCommandArguments, EntrySearch, EntrySearchContentType, EntrySearchProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, INSERT_VARIABLE_COMMAND, index as Icons, InputVariables, InputVariablesProps, InsertVariableCommandArguments, ItemListProps, KnownUndefinedVariableInfo, LinkButton, MeshApp, MeshAppProps, MeshDataVariableDefinition, MinimalDynamicInput, MinimalDynamicInputs, NoResultsProps, OPEN_INSERT_VARIABLE_COMMAND, ObjectSearchContainer, ObjectSearchContainerProps, ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, ObjectSearchFilterContainerProps, ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, ObjectSearchListItemProps, ObjectSearchProvider, ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, ObjectSearchResultItemButtonProps, ObjectSearchResultItemProps, ObjectSearchResultList, ObjectSearchResultListProps, ParamTypeDynamicDataProvider, ParamTypeDynamicDataProviderProps, ParameterConnectOptions, ParameterConnectionIndicator, ParameterConnectionIndicatorProps, ParameterOrSingleVariable, ParameterOrSingleVariableProps, ParameterVariables, ParameterVariablesProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SerializedVariableNode, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, UseVariablesMenu, UseVariablesMenuInput, VariableEditor, VariableEditorCompleteEvent, VariableEditorProps, VariableNode, VariableNodeState, VariableSourceGroup, VariablesAction, VariablesContext, VariablesEvents, VariablesList, VariablesPlugin, VariablesPluginProps, VariablesProvider, VariablesProviderProps, badgeIcon, convertConnectedDataToVariable, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, hasReferencedVariables, prettifyBindExpression, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, serializeVariablesEditorState, setVariablesEditorValue, urlEncodeRequestParameter, urlEncodeRequestUrl, useConnectedDataAsVariables, useDynamicInputsAsVariables, useMeshLocation, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariableEditor, useVariables, useVariablesMenu, variableDefaultTextValue, variablePrefix, variableSuffix, variablesToGroupedList, variablesToList };
+export { $createVariableNode, $isVariableNode, type BaseRequestData, type Brand, ControlledValuePlugin, DISCONNECT_VARIABLE_COMMAND, type DamItem, DamSelectedItem, type DamSelectedItemProps, DataRefreshButton, type DataRefreshButtonProps, DataResourceDynamicInputProvider, type DataResourceDynamicInputProviderProps, type DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListExplicit, type DataResourceVariablesListProps, DataSourceEditor, type DataSourceEditorProps, DataTypeEditor, type DataTypeEditorProps, type DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, type DisconnectVariableCommandArguments, type DispatchResult, EDIT_VARIABLE_COMMAND, type EditVariableCommandArguments, EntrySearch, type EntrySearchContentType, type EntrySearchProps, type EntrySearchQueryOptions, type EntrySearchResult, type EntrySearchRowProps, type EntrySearchSelectedItemProps, type GetProductOptions, type GetProductsOptions, INSERT_VARIABLE_COMMAND, index as Icons, InputVariables, type InputVariablesProps, type InsertVariableCommandArguments, type ItemListProps, type KnownUndefinedVariableInfo, LinkButton, MeshApp, type MeshAppProps, type MeshDataVariableDefinition, type MinimalDynamicInput, type MinimalDynamicInputs, type NoResultsProps, OPEN_INSERT_VARIABLE_COMMAND, ObjectSearchContainer, type ObjectSearchContainerProps, type ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, type ObjectSearchFilterContainerProps, type ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, type ObjectSearchListItemProps, ObjectSearchProvider, type ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, type ObjectSearchResultItemButtonProps, type ObjectSearchResultItemProps, ObjectSearchResultList, type ObjectSearchResultListProps, ParamTypeDynamicDataProvider, type ParamTypeDynamicDataProviderProps, type ParameterConnectOptions, ParameterConnectionIndicator, type ParameterConnectionIndicatorProps, ParameterOrSingleVariable, type ParameterOrSingleVariableProps, ParameterVariables, type ParameterVariablesProps, type ProductCategory, type ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, type ProductQueryCategory, ProductQueryContext, type ProductQueryContextValue, type ProductQueryProps, ProductSearch, ProductSearchContext, type ProductSearchContextValue, type ProductSearchProps, type ProductSearchResult, type ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, type QueryFilterProps, type QueryFilterSearchProps, type RequestAction, RequestBody, type RequestContext, type RequestData, RequestHeaders, RequestMethodSelect, type RequestParameter, RequestParameters, type RequestParametersProps, RequestProvider, type RequestProviderProps, RequestTypeContainer, type RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, type SearchQueryProps, type SelectedItemProps, SelectionField, type SelectionFieldValue, type SerializedVariableNode, type SetLocationValueDispatch, type SetLocationValueFunction, TextVariableRenderer, type UseVariablesMenu, type UseVariablesMenuInput, VariableEditor, type VariableEditorCompleteEvent, type VariableEditorProps, VariableNode, type VariableNodeState, type VariableSourceGroup, type VariablesAction, type VariablesContext, type VariablesEvents, VariablesList, VariablesPlugin, type VariablesPluginProps, VariablesProvider, type VariablesProviderProps, badgeIcon, convertConnectedDataToVariable, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, hasReferencedVariables, prettifyBindExpression, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, serializeVariablesEditorState, setVariablesEditorValue, urlEncodeRequestParameter, urlEncodeRequestUrl, useConnectedDataAsVariables, useDynamicInputsAsVariables, useMeshLocation, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariableEditor, useVariables, useVariablesMenu, variableDefaultTextValue, variablePrefix, variableSuffix, variablesToGroupedList, variablesToList };

package/dist/index.esm.js

@@ -2654,13 +2654,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
+import { LOCALE_DYNAMIC_INPUT_NAME } from "@uniformdev/canvas";
 import { useMemo as useMemo4 } from "react";
 import { Fragment as Fragment4, jsx as jsx26 } from "@emotion/react/jsx-runtime";
 function useDynamicInputsAsVariables(dynamicInputs) {
   return useMemo4(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2944,6 +2945,7 @@ function VariableChip({
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -2951,7 +2953,7 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   return /* @__PURE__ */ jsx29(
     MultilineChip,
     {
@@ -3002,7 +3004,7 @@ import {
 import { mergeRegister } from "@lexical/utils";
 import { AiFillPlusCircle } from "@react-icons/all-files/ai/AiFillPlusCircle";
 import { createVariableReference } from "@uniformdev/canvas";
-import { HorizontalRhythm as HorizontalRhythm2, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm2, MenuGroup, MenuItemInner, MenuItemSeparator } from "@uniformdev/design-system";
 import { dequal as dequal2 } from "dequal/lite";
 import {
   $createTextNode,
@@ -3766,7 +3768,7 @@ function VariablesPlugin({
                     currentCumulativeMenuIndex++;
                     const myCumulativeIndex = currentCumulativeMenuIndex;
                     return /* @__PURE__ */ jsx32(
-                      MenuItem2,
+                      MenuItemInner,
                       {
                         active: selectedIndex === myCumulativeIndex,
                         onClick: () => {
@@ -3968,6 +3970,7 @@ function VariableNodeComponent({
       displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4083,6 +4086,22 @@ var inputCompact = css21`
   padding-block: var(--spacing-sm);
   font-size: var(--fs-sm);
 `;
+var inputDisabled = css21`
+  cursor: not-allowed;
+  opacity: var(--opacity-50);
+`;
+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";
@@ -4201,7 +4220,7 @@ import { CLEAR_EDITOR_COMMAND } from "lexical";
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
 import { BsFillPlusCircleFill } from "@react-icons/all-files/bs/BsFillPlusCircleFill";
 import { CgUsbC } from "@react-icons/all-files/cg/CgUsbC";
-import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem2, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
 import { useRef as useRef11 } from "react";
 import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function SelectVariableMenu({
@@ -4244,7 +4263,7 @@ function SelectVariableMenu({
       menuLabel: menuTooltip,
       children: [
         showAddVariableMenuOptionForReals ? /* @__PURE__ */ jsx34(
-          MenuItem3,
+          MenuItem2,
           {
             onClick: async () => {
               const result = await editVariable("", getEditorContext == null ? void 0 : getEditorContext());
@@ -4266,7 +4285,7 @@ function SelectVariableMenu({
           return /* @__PURE__ */ jsx34(MenuGroup2, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
             const { name, displayName, helpText } = variable;
             return /* @__PURE__ */ jsxs19(
-              MenuItem3,
+              MenuItem2,
               {
                 id: name,
                 css: menuItemTextGroup,
@@ -4281,7 +4300,7 @@ function SelectVariableMenu({
           }) }, group.name);
         }),
         menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ jsx34(MenuItemSeparator2, {}) : null,
-        onResetVariables ? /* @__PURE__ */ jsx34(MenuItem3, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        onResetVariables ? /* @__PURE__ */ jsx34(MenuItem2, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
         tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ jsx34(MenuItemSeparator2, {}) : null,
         tip ? /* @__PURE__ */ jsx34("i", { css: variablesTipText, children: tip }) : null
       ]
@@ -4443,6 +4462,7 @@ function VariablesComposer(props) {
     /* @__PURE__ */ jsx37(
       OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -4491,14 +4511,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 +4607,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 +4620,7 @@ function InputVariables(props) {
     transformPaste,
     showAddVariableMenuOption,
     inputWhenNoVariables,
+    placeholder,
     caption,
     errorMessage,
     warningMessage,
@@ -4621,6 +4646,7 @@ function InputVariables(props) {
           dispatch({ type: "cancelEdit" });
         }
       },
+      css: disabled ? inputDisabled : "",
       children: [
         useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx39(
           InputVariablesOverlayMenu,
@@ -4636,7 +4662,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 +4731,7 @@ function InputVariablesOverlayMenu({
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ jsx39(Fragment9, { children });
+    return /* @__PURE__ */ jsx39(Fragment10, { children });
   }
   return /* @__PURE__ */ jsxs23("div", { css: menuContainer, children: [
     children,
@@ -5104,7 +5140,6 @@ var tableCellDragIcon = css25`
 `;
 var variableName = css25`
   border: none;
-  color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
   padding: 0;
   background: none;
@@ -5121,10 +5156,10 @@ 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);
+  const { variables, dispatch, readOnly } = useVariables();
+  const sorted = variablesToList(variables).filter((variable) => !variable.system);
   const onDragEnd = (res) => {
     var _a, _b;
     if (res.destination && res.source.droppableId === ((_a = res.destination) == null ? void 0 : _a.droppableId)) {
@@ -5142,7 +5177,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" }),
@@ -5150,7 +5185,7 @@ function VariablesList() {
         /* @__PURE__ */ jsx43(TableCellHead, {})
       ] }) }),
       /* @__PURE__ */ jsxs27(TableBody, { children: [
-        sorted.map(({ name, displayName, default: defaultValue, readOnly }, index) => {
+        sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
           const textValue = variableDefaultTextValue(defaultValue);
           return /* @__PURE__ */ jsx43(
@@ -5169,7 +5204,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ jsx43(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsx43(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: readOnly ? /* @__PURE__ */ jsx43("span", { css: variableName, children: text }) : /* @__PURE__ */ jsx43(
                       "button",
                       {
                         css: variableName,
@@ -5209,12 +5244,12 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx43(
+    !readOnly && /* @__PURE__ */ jsx43(
       AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
-        buttonText: "add variable",
+        buttonText: "Add variable",
         icon: "math-plus",
         css: { marginLeft: "var(--spacing-md)" }
       }
@@ -5770,7 +5805,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();
@@ -5794,7 +5829,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);
@@ -6749,7 +6784,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",
@@ -6776,7 +6811,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 }),
@@ -7094,7 +7129,7 @@ import {
   LoadingIndicator as LoadingIndicator5,
   LoadingOverlay as LoadingOverlay2,
   Menu as Menu4,
-  MenuItem as MenuItem4,
+  MenuItem as MenuItem3,
   ParameterGroup,
   ParameterImage,
   ParameterImageInner,
@@ -7150,7 +7185,7 @@ export {
   LoadingIndicator5 as LoadingIndicator,
   LoadingOverlay2 as LoadingOverlay,
   Menu4 as Menu,
-  MenuItem4 as MenuItem,
+  MenuItem3 as MenuItem,
   MeshApp,
   OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer,

package/dist/index.js

@@ -2856,13 +2856,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
+var import_canvas = require("@uniformdev/canvas");
 var import_react26 = require("react");
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 function useDynamicInputsAsVariables(dynamicInputs) {
   return (0, import_react26.useMemo)(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === import_canvas.LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2981,11 +2982,11 @@ var import_lite = require("dequal/lite");
 var import_react30 = require("react");
 
 // src/components/Variables/util/deserializeVariablesEditorState.ts
-var import_canvas = require("@uniformdev/canvas");
+var import_canvas2 = require("@uniformdev/canvas");
 var import_lexical = require("lexical");
 function deserializeVariablesEditorState(serialized) {
   const result = [];
-  (0, import_canvas.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
+  (0, import_canvas2.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
     if (type === "text") {
       const node = {
         type: import_lexical.TextNode.getType(),
@@ -3112,7 +3113,7 @@ var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerCont
 var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
 var import_selection = require("@lexical/selection");
 var import_utils2 = require("@lexical/utils");
-var import_canvas3 = require("@uniformdev/canvas");
+var import_canvas4 = require("@uniformdev/canvas");
 var import_design_system18 = require("@uniformdev/design-system");
 var import_lexical4 = require("lexical");
 var import_react39 = require("react");
@@ -3132,6 +3133,7 @@ function VariableChip({
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -3139,7 +3141,7 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react31.Fragment : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_design_system15.MultilineChip,
     {
@@ -3186,7 +3188,7 @@ var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerCont
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
 var import_utils = require("@lexical/utils");
 var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
-var import_canvas2 = require("@uniformdev/canvas");
+var import_canvas3 = require("@uniformdev/canvas");
 var import_design_system17 = require("@uniformdev/design-system");
 var import_lite2 = require("dequal/lite");
 var import_lexical3 = require("lexical");
@@ -3660,7 +3662,7 @@ function useVariablesMenu({
           var _a;
           const targetVariable = variables[value];
           if (overwriteExistingValue) {
-            setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(value));
+            setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(value));
             return true;
           }
           const variableNode = $createVariableNode(value, {
@@ -3830,7 +3832,7 @@ function VariablesPlugin({
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
             if (overwriteExistingValue) {
-              setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(reference));
+              setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(reference));
               return true;
             }
             const variableNode = $createVariableNode(reference, {
@@ -3944,7 +3946,7 @@ function VariablesPlugin({
                     currentCumulativeMenuIndex++;
                     const myCumulativeIndex = currentCumulativeMenuIndex;
                     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                      import_design_system17.MenuItem,
+                      import_design_system17.MenuItemInner,
                       {
                         active: selectedIndex === myCumulativeIndex,
                         onClick: () => {
@@ -4030,7 +4032,7 @@ var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
    * (albeit it won't get the fancy chip-node)
    */
   getTextContent() {
-    return (0, import_canvas3.createVariableReference)(this.reference);
+    return (0, import_canvas4.createVariableReference)(this.reference);
   }
   /** Creates the DOM wrapper that hosts the node */
   createDOM() {
@@ -4146,6 +4148,7 @@ function VariableNodeComponent({
       displayName: state.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system18.LoadingIndicator, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4261,16 +4264,32 @@ var inputCompact = import_react41.css`
   padding-block: var(--spacing-sm);
   font-size: var(--fs-sm);
 `;
+var inputDisabled = import_react41.css`
+  cursor: not-allowed;
+  opacity: var(--opacity-50);
+`;
+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"));
 var import_react42 = require("react");
 
 // src/components/Variables/util/hasReferencedVariables.ts
-var import_canvas4 = require("@uniformdev/canvas");
+var import_canvas5 = require("@uniformdev/canvas");
 function hasReferencedVariables(value) {
   let result = false;
-  (0, import_canvas4.parseVariableExpression)(value, (token, type) => {
+  (0, import_canvas5.parseVariableExpression)(value, (token, type) => {
     if (type === "variable") {
       result = true;
       return false;
@@ -4556,7 +4575,7 @@ function SingleLineTextPlugin() {
 }
 
 // src/components/Variables/util/serializeVariablesEditorState.ts
-var import_canvas5 = require("@uniformdev/canvas");
+var import_canvas6 = require("@uniformdev/canvas");
 var import_lexical8 = require("lexical");
 
 // src/components/Variables/util/variableExpression.ts
@@ -4575,7 +4594,7 @@ function serializeRecursive(node, buffer) {
     buffer.push(node.text.replace(variablePrefix, "\\${"));
   }
   if (node.type === VariableNode.getType()) {
-    buffer.push((0, import_canvas5.createVariableReference)(node.reference));
+    buffer.push((0, import_canvas6.createVariableReference)(node.reference));
   }
   if (node.type === import_lexical8.LineBreakNode.getType()) {
     buffer.push("\n");
@@ -4621,6 +4640,7 @@ function VariablesComposer(props) {
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_LexicalOnChangePlugin.OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -4658,13 +4678,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 +4786,7 @@ function InputVariables(props) {
     transformPaste,
     showAddVariableMenuOption,
     inputWhenNoVariables,
+    placeholder,
     caption,
     errorMessage,
     warningMessage,
@@ -4787,6 +4812,7 @@ function InputVariables(props) {
           dispatch({ type: "cancelEdit" });
         }
       },
+      css: disabled ? inputDisabled : "",
       children: [
         useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           InputVariablesOverlayMenu,
@@ -4802,7 +4828,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
               }
             )
           }
@@ -4878,7 +4914,7 @@ 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_canvas7 = require("@uniformdev/canvas");
 var import_design_system22 = require("@uniformdev/design-system");
 var import_react51 = require("react");
 
@@ -4983,7 +5019,7 @@ function ParameterConnectionIndicator({
 }) {
   const hasVariablesInValue = (0, import_react51.useMemo)(() => {
     let result = false;
-    (0, import_canvas6.bindVariablesToObject)({
+    (0, import_canvas7.bindVariablesToObject)({
       value,
       variables: {},
       handleBinding: () => {
@@ -5260,7 +5296,6 @@ var tableCellDragIcon = import_react55.css`
 `;
 var variableName = import_react55.css`
   border: none;
-  color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
   padding: 0;
   background: none;
@@ -5279,8 +5314,8 @@ var variableValue = import_react55.css`
 // src/components/Variables/VariablesList.tsx
 var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
 function VariablesList() {
-  const { variables, dispatch } = useVariables();
-  const sorted = variablesToList(variables);
+  const { variables, dispatch, readOnly } = useVariables();
+  const sorted = variablesToList(variables).filter((variable) => !variable.system);
   const onDragEnd = (res) => {
     var _a, _b;
     if (res.destination && res.source.droppableId === ((_a = res.destination) == null ? void 0 : _a.droppableId)) {
@@ -5306,7 +5341,7 @@ function VariablesList() {
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellHead, {})
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system25.TableBody, { children: [
-        sorted.map(({ name, displayName, default: defaultValue, readOnly }, index) => {
+        sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
           const textValue = variableDefaultTextValue(defaultValue);
           return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -5325,7 +5360,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.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: readOnly ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: variableName, children: text }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "button",
                       {
                         css: variableName,
@@ -5365,12 +5400,12 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       import_design_system25.AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
-        buttonText: "add variable",
+        buttonText: "Add variable",
         icon: "math-plus",
         css: { marginLeft: "var(--spacing-md)" }
       }
@@ -6248,11 +6283,11 @@ var DataRefreshButton = ({
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 var import_react65 = require("@emotion/react");
-var import_canvas8 = require("@uniformdev/canvas");
+var import_canvas9 = require("@uniformdev/canvas");
 var import_design_system33 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
-var import_canvas7 = require("@uniformdev/canvas");
+var import_canvas8 = require("@uniformdev/canvas");
 var import_react64 = require("react");
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var ObjectSearchContext = (0, import_react64.createContext)({
@@ -6342,7 +6377,7 @@ function useObjectSearchContext() {
   return (0, import_react64.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
-  const { result, errors } = (0, import_canvas7.bindVariablesToObject)({
+  const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
     value: query,
     variables: inputs,
     errorPrefix: "Dynamic input"
@@ -6388,7 +6423,7 @@ var ObjectSearchContainer = ({
       onSelectItem([]);
       return;
     }
-    const { result, errors } = (0, import_canvas8.bindVariables)({
+    const { result, errors } = (0, import_canvas9.bindVariables)({
       value: selectedValue,
       variables: flatVariables,
       errorPrefix: "Dynamic input"

package/dist/index.mjs

@@ -2654,13 +2654,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
+import { LOCALE_DYNAMIC_INPUT_NAME } from "@uniformdev/canvas";
 import { useMemo as useMemo4 } from "react";
 import { Fragment as Fragment4, jsx as jsx26 } from "@emotion/react/jsx-runtime";
 function useDynamicInputsAsVariables(dynamicInputs) {
   return useMemo4(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2944,6 +2945,7 @@ function VariableChip({
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -2951,7 +2953,7 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   return /* @__PURE__ */ jsx29(
     MultilineChip,
     {
@@ -3002,7 +3004,7 @@ import {
 import { mergeRegister } from "@lexical/utils";
 import { AiFillPlusCircle } from "@react-icons/all-files/ai/AiFillPlusCircle";
 import { createVariableReference } from "@uniformdev/canvas";
-import { HorizontalRhythm as HorizontalRhythm2, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm2, MenuGroup, MenuItemInner, MenuItemSeparator } from "@uniformdev/design-system";
 import { dequal as dequal2 } from "dequal/lite";
 import {
   $createTextNode,
@@ -3766,7 +3768,7 @@ function VariablesPlugin({
                     currentCumulativeMenuIndex++;
                     const myCumulativeIndex = currentCumulativeMenuIndex;
                     return /* @__PURE__ */ jsx32(
-                      MenuItem2,
+                      MenuItemInner,
                       {
                         active: selectedIndex === myCumulativeIndex,
                         onClick: () => {
@@ -3968,6 +3970,7 @@ function VariableNodeComponent({
       displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4083,6 +4086,22 @@ var inputCompact = css21`
   padding-block: var(--spacing-sm);
   font-size: var(--fs-sm);
 `;
+var inputDisabled = css21`
+  cursor: not-allowed;
+  opacity: var(--opacity-50);
+`;
+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";
@@ -4201,7 +4220,7 @@ import { CLEAR_EDITOR_COMMAND } from "lexical";
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
 import { BsFillPlusCircleFill } from "@react-icons/all-files/bs/BsFillPlusCircleFill";
 import { CgUsbC } from "@react-icons/all-files/cg/CgUsbC";
-import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem2, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
 import { useRef as useRef11 } from "react";
 import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function SelectVariableMenu({
@@ -4244,7 +4263,7 @@ function SelectVariableMenu({
       menuLabel: menuTooltip,
       children: [
         showAddVariableMenuOptionForReals ? /* @__PURE__ */ jsx34(
-          MenuItem3,
+          MenuItem2,
           {
             onClick: async () => {
               const result = await editVariable("", getEditorContext == null ? void 0 : getEditorContext());
@@ -4266,7 +4285,7 @@ function SelectVariableMenu({
           return /* @__PURE__ */ jsx34(MenuGroup2, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
             const { name, displayName, helpText } = variable;
             return /* @__PURE__ */ jsxs19(
-              MenuItem3,
+              MenuItem2,
               {
                 id: name,
                 css: menuItemTextGroup,
@@ -4281,7 +4300,7 @@ function SelectVariableMenu({
           }) }, group.name);
         }),
         menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ jsx34(MenuItemSeparator2, {}) : null,
-        onResetVariables ? /* @__PURE__ */ jsx34(MenuItem3, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        onResetVariables ? /* @__PURE__ */ jsx34(MenuItem2, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
         tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ jsx34(MenuItemSeparator2, {}) : null,
         tip ? /* @__PURE__ */ jsx34("i", { css: variablesTipText, children: tip }) : null
       ]
@@ -4443,6 +4462,7 @@ function VariablesComposer(props) {
     /* @__PURE__ */ jsx37(
       OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -4491,14 +4511,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 +4607,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 +4620,7 @@ function InputVariables(props) {
     transformPaste,
     showAddVariableMenuOption,
     inputWhenNoVariables,
+    placeholder,
     caption,
     errorMessage,
     warningMessage,
@@ -4621,6 +4646,7 @@ function InputVariables(props) {
           dispatch({ type: "cancelEdit" });
         }
       },
+      css: disabled ? inputDisabled : "",
       children: [
         useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx39(
           InputVariablesOverlayMenu,
@@ -4636,7 +4662,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 +4731,7 @@ function InputVariablesOverlayMenu({
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ jsx39(Fragment9, { children });
+    return /* @__PURE__ */ jsx39(Fragment10, { children });
   }
   return /* @__PURE__ */ jsxs23("div", { css: menuContainer, children: [
     children,
@@ -5104,7 +5140,6 @@ var tableCellDragIcon = css25`
 `;
 var variableName = css25`
   border: none;
-  color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
   padding: 0;
   background: none;
@@ -5121,10 +5156,10 @@ 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);
+  const { variables, dispatch, readOnly } = useVariables();
+  const sorted = variablesToList(variables).filter((variable) => !variable.system);
   const onDragEnd = (res) => {
     var _a, _b;
     if (res.destination && res.source.droppableId === ((_a = res.destination) == null ? void 0 : _a.droppableId)) {
@@ -5142,7 +5177,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" }),
@@ -5150,7 +5185,7 @@ function VariablesList() {
         /* @__PURE__ */ jsx43(TableCellHead, {})
       ] }) }),
       /* @__PURE__ */ jsxs27(TableBody, { children: [
-        sorted.map(({ name, displayName, default: defaultValue, readOnly }, index) => {
+        sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
           const textValue = variableDefaultTextValue(defaultValue);
           return /* @__PURE__ */ jsx43(
@@ -5169,7 +5204,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ jsx43(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsx43(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: readOnly ? /* @__PURE__ */ jsx43("span", { css: variableName, children: text }) : /* @__PURE__ */ jsx43(
                       "button",
                       {
                         css: variableName,
@@ -5209,12 +5244,12 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx43(
+    !readOnly && /* @__PURE__ */ jsx43(
       AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
-        buttonText: "add variable",
+        buttonText: "Add variable",
         icon: "math-plus",
         css: { marginLeft: "var(--spacing-md)" }
       }
@@ -5770,7 +5805,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();
@@ -5794,7 +5829,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);
@@ -6749,7 +6784,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",
@@ -6776,7 +6811,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 }),
@@ -7094,7 +7129,7 @@ import {
   LoadingIndicator as LoadingIndicator5,
   LoadingOverlay as LoadingOverlay2,
   Menu as Menu4,
-  MenuItem as MenuItem4,
+  MenuItem as MenuItem3,
   ParameterGroup,
   ParameterImage,
   ParameterImageInner,
@@ -7150,7 +7185,7 @@ export {
   LoadingIndicator5 as LoadingIndicator,
   LoadingOverlay2 as LoadingOverlay,
   Menu4 as Menu,
-  MenuItem4 as MenuItem,
+  MenuItem3 as MenuItem,
   MeshApp,
   OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.69.0",
+  "version": "19.71.1-alpha.103+2e172bb17",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,18 +50,18 @@
     "@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.69.0",
-    "@uniformdev/design-system": "19.69.0",
-    "@uniformdev/mesh-sdk": "19.69.0",
+    "@uniformdev/canvas": "19.71.1-alpha.103+2e172bb17",
+    "@uniformdev/design-system": "19.71.1-alpha.103+2e172bb17",
+    "@uniformdev/mesh-sdk": "19.71.1-alpha.103+2e172bb17",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
     "react-beautiful-dnd": "13.1.1",
     "react-hook-form": "^7.47.0",
-    "react-use": "17.4.0",
+    "react-use": "17.4.2",
     "timeago.js": "4.0.2",
     "uuid": "9.0.1",
-    "zod": "3.22.3"
+    "zod": "3.22.4"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.8.0",
@@ -73,9 +73,9 @@
     "@emotion/react": "11.11.1",
     "@storybook/react": "6.5.16",
     "@svgr/cli": "6.5.1",
-    "@types/react": "18.2.21",
-    "@types/react-beautiful-dnd": "13.1.4",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "18.2.40",
+    "@types/react-beautiful-dnd": "13.1.7",
+    "@types/react-dom": "18.2.17",
     "@types/uuid": "9.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "327658d8c6e5735499845ebb29d74906f2a43dad"
+  "gitHead": "2e172bb17f644b34be818605979a1436b8621c90"
 }