npm - @lumiastream/ui - Versions diffs - 0.2.2 → 0.2.4-beta.1 - Mend

@lumiastream/ui 0.2.2 → 0.2.4-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -55,9 +55,9 @@ declare const LSInput: React.ForwardRefExoticComponent<Omit<LSInputProps$1, "ref
 interface LSInputPropsChild {
     name?: string;
-    value?: number;
+    value?: number | string | null;
     autoFocus?: boolean;
-    defaultValue?: number;
+    defaultValue?: number | string | null;
     label?: React.ReactNode;
     inline?: boolean;
     hasInfo?: boolean;
@@ -173,35 +173,56 @@ declare const LSTextField: React.ForwardRefExoticComponent<Omit<LSTextFieldProps
 interface IVariables {
     name: string;
     system: boolean;
+    isFunction?: boolean;
     locked?: boolean;
     origin: string;
+    pluginId?: string;
     allowedPlaces?: string[];
     description: string;
     counter?: boolean;
-    value: string | number;
+    example?: string;
+    value: string | number | boolean | null | Record<string, unknown> | unknown[];
+    hidden?: boolean;
 }
+type LSVariableDefinition = {
+    name: string;
+    description?: string;
+    origin?: string;
+    example?: unknown;
+};
 type LSVariableInputTranslate = (key: string, fallback?: string, options?: Record<string, unknown>) => string;
 type LSVariableInputContextValue = {
     systemVariables?: Record<string, unknown>;
     functionVariables?: string[];
     translate?: LSVariableInputTranslate;
     onVariableTranslationsNeeded?: () => void;
+    isOriginConnected?: (origin: string) => boolean;
+    translationKeyExists?: (key: string, namespace?: string) => boolean;
 };
 declare const LSVariableInputProvider: ({ children, value }: {
     children: ReactNode;
     value: LSVariableInputContextValue;
 }) => react_jsx_runtime.JSX.Element;
+type LSAutoCompleteOption = {
+    label?: string | number | boolean;
+    value?: unknown;
+    helperText?: string;
+    imageUrl?: string;
+    searchText?: string;
+    thumb?: string;
+    iconUrl?: string;
+    previewImageUrl?: string;
+    [key: string]: unknown;
+};
 type LSVariableInputFieldProps = {
     name?: string;
     label?: ReactNode;
     type?: string;
     isAutoComplete?: boolean;
-    autoCompleteOptions?: Array<{
-        label: string;
-        value: any;
-    }>;
+    autoCompleteOptions?: LSAutoCompleteOption[];
+    autoCompleteGroupBy?: (option: any) => string;
     hideVariables?: boolean;
-    allowedVariables?: IVariables[] | string[] | any;
+    allowedVariables?: IVariables[] | string[] | LSVariableDefinition[] | unknown[];
     disabled?: boolean;
     autoFocus?: boolean;
     inputProps?: any;
@@ -219,11 +240,23 @@ type LSVariableInputFieldProps = {
     onPopupOpen?: (e: any) => void;
     onAutocompleteKeyUp?: (e: any, value: any) => void;
     afterFilter?: (filtered: any[]) => void;
-    onChange?: (value: string) => void;
+    onChange?: (value: any) => void;
+    loading?: boolean;
+    getOptionLabel?: (option: any) => string;
+    isOptionEqualToValue?: (option: any, value: any) => boolean;
+    $disableInputChange?: boolean;
+    $getFullValueObject?: boolean;
+    $multiple?: boolean;
+    $disableCloseOnSelect?: boolean;
+    $freeSolo?: boolean;
+    $renderOption?: any;
+    allowedVariableOrigin?: string;
     systemVariables?: Record<string, unknown>;
     functionVariables?: string[];
     translate?: LSVariableInputTranslate;
     onVariableTranslationsNeeded?: () => void;
+    isOriginConnected?: (origin: string) => boolean;
+    translationKeyExists?: (key: string, namespace?: string) => boolean;
 };
 declare const LSVariableInputField: React.ForwardRefExoticComponent<LSVariableInputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/index.js CHANGED Viewed

@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 // src/tailwind.css
-styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n:root,\n:host {\n  --color-white: #fff;\n  --spacing: 0.25rem;\n  --text-sm: 0.875rem;\n  --text-sm--line-height: calc(1.25 / 0.875);\n  --text-base: 1rem;\n  --text-base--line-height: calc(1.5 / 1);\n  --text-lg: 1.125rem;\n  --text-lg--line-height: calc(1.75 / 1.125);\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --radius-md: 0.375rem;\n  --default-transition-duration: 150ms;\n  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.visible {\n  visibility: visible;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.static {\n  position: static;\n}\n.start {\n  inset-inline-start: var(--spacing);\n}\n.end {\n  inset-inline-end: var(--spacing);\n}\n.mb-1 {\n  margin-bottom: calc(var(--spacing) * 1);\n}\n.mb-4 {\n  margin-bottom: calc(var(--spacing) * 4);\n}\n.ml-2 {\n  margin-left: calc(var(--spacing) * 2);\n}\n.block {\n  display: block;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.h-6 {\n  height: calc(var(--spacing) * 6);\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[55vh\\] {\n  max-height: 55vh;\n}\n.min-h-\\[50vh\\] {\n  min-height: 50vh;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-6 {\n  width: calc(var(--spacing) * 6);\n}\n.w-\\[92vw\\] {\n  width: 92vw;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n.max-w-\\[1100px\\] {\n  max-width: 1100px;\n}\n.min-w-0 {\n  min-width: calc(var(--spacing) * 0);\n}\n.flex-1 {\n  flex: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.transform {\n  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.grid-cols-\\[minmax\\(300px\\,1\\.5fr\\)_2fr\\] {\n  grid-template-columns: minmax(300px, 1.5fr) 2fr;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-nowrap {\n  flex-wrap: nowrap;\n}\n.items-center {\n  align-items: center;\n}\n.items-start {\n  align-items: flex-start;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-2 {\n  gap: calc(var(--spacing) * 2);\n}\n.gap-8 {\n  gap: calc(var(--spacing) * 8);\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: var(--radius-md);\n}\n.border {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n}\n.border-b {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n}\n.border-current {\n  border-color: currentcolor;\n}\n.border-white\\/10 {\n  border-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n}\n.border-white\\/25 {\n  border-color: color-mix(in srgb, #fff 25%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 25%, transparent);\n  }\n}\n.bg-\\[\\#1b1a28\\] {\n  background-color: #1b1a28;\n}\n.bg-cover {\n  background-size: cover;\n}\n.bg-center {\n  background-position: center;\n}\n.bg-no-repeat {\n  background-repeat: no-repeat;\n}\n.p-0 {\n  padding: calc(var(--spacing) * 0);\n}\n.p-6 {\n  padding: calc(var(--spacing) * 6);\n}\n.px-1 {\n  padding-inline: calc(var(--spacing) * 1);\n}\n.px-3 {\n  padding-inline: calc(var(--spacing) * 3);\n}\n.px-4 {\n  padding-inline: calc(var(--spacing) * 4);\n}\n.px-6 {\n  padding-inline: calc(var(--spacing) * 6);\n}\n.py-0 {\n  padding-block: calc(var(--spacing) * 0);\n}\n.py-1 {\n  padding-block: calc(var(--spacing) * 1);\n}\n.py-2 {\n  padding-block: calc(var(--spacing) * 2);\n}\n.py-3 {\n  padding-block: calc(var(--spacing) * 3);\n}\n.py-4 {\n  padding-block: calc(var(--spacing) * 4);\n}\n.pr-4 {\n  padding-right: calc(var(--spacing) * 4);\n}\n.text-base {\n  font-size: var(--text-base);\n  line-height: var(--tw-leading, var(--text-base--line-height));\n}\n.text-lg {\n  font-size: var(--text-lg);\n  line-height: var(--tw-leading, var(--text-lg--line-height));\n}\n.text-sm {\n  font-size: var(--text-sm);\n  line-height: var(--tw-leading, var(--text-sm--line-height));\n}\n.text-\\[10px\\] {\n  font-size: 10px;\n}\n.leading-\\[1\\.25\\] {\n  --tw-leading: 1.25;\n  line-height: 1.25;\n}\n.leading-none {\n  --tw-leading: 1;\n  line-height: 1;\n}\n.font-medium {\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n}\n.font-semibold {\n  --tw-font-weight: var(--font-weight-semibold);\n  font-weight: var(--font-weight-semibold);\n}\n.break-words {\n  overflow-wrap: break-word;\n}\n.break-all {\n  word-break: break-all;\n}\n.text-ellipsis {\n  text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-\\[\\#f4f3ff\\] {\n  color: #f4f3ff;\n}\n.text-\\[var\\(--customVariables\\,\\#69ffd2\\)\\] {\n  color: var(--customVariables,#69ffd2);\n}\n.text-\\[var\\(--functionVariables\\,var\\(--semanticPurple\\,\\#b489ff\\)\\)\\] {\n  color: var(--functionVariables,var(--semanticPurple,#b489ff));\n}\n.text-\\[var\\(--neutralLight1\\,\\#f4f3ff\\)\\] {\n  color: var(--neutralLight1,#f4f3ff);\n}\n.text-\\[var\\(--neutralLight2\\,\\#cac9d5\\)\\] {\n  color: var(--neutralLight2,#cac9d5);\n}\n.text-\\[var\\(--neutralLight3\\,\\#9392a1\\)\\] {\n  color: var(--neutralLight3,#9392a1);\n}\n.text-\\[var\\(--normalVariables\\,var\\(--semanticBlue\\,\\#65b8ff\\)\\)\\] {\n  color: var(--normalVariables,var(--semanticBlue,#65b8ff));\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.shadow-\\[0_0_0_1px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\] {\n  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.25));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.shadow-\\[0_8px_18px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n  --tw-shadow: 0 8px 18px var(--tw-shadow-color, rgba(0,0,0,0.18));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.filter {\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    outline-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    --tw-gradient-from,\n    --tw-gradient-via,\n    --tw-gradient-to,\n    opacity,\n    box-shadow,\n    transform,\n    translate,\n    scale,\n    rotate,\n    filter,\n    -webkit-backdrop-filter,\n    backdrop-filter,\n    display,\n    content-visibility,\n    overlay,\n    pointer-events;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.\\[--neutralDark1\\:\\#1b1a28\\] {\n  --neutralDark1: #1b1a28;\n}\n.\\[--neutralDark2\\:\\#252338\\] {\n  --neutralDark2: #252338;\n}\n.\\[--neutralDark3\\:\\#312f47\\] {\n  --neutralDark3: #312f47;\n}\n.\\[--neutralDark4\\:\\#46435f\\] {\n  --neutralDark4: #46435f;\n}\n.\\[--neutralLight1\\:\\#f4f3ff\\] {\n  --neutralLight1: #f4f3ff;\n}\n.\\[--neutralLight2\\:\\#cac9d5\\] {\n  --neutralLight2: #cac9d5;\n}\n.\\[--neutralLight3\\:\\#9f9eb2\\] {\n  --neutralLight3: #9f9eb2;\n}\n.\\[--primary\\:\\#ff4076\\] {\n  --primary: #ff4076;\n}\n.\\[--radiusContainer\\:12px\\] {\n  --radiusContainer: 12px;\n}\n.\\[--radiusContainerSm\\:10px\\] {\n  --radiusContainerSm: 10px;\n}\n.\\[--secondary\\:\\#5f5dff\\] {\n  --secondary: #5f5dff;\n}\n.\\[--variable-custom-color\\:var\\(--customVariables\\,\\#69ffd2\\)\\] {\n  --variable-custom-color: var(--customVariables,#69ffd2);\n}\n.\\[--variable-function-color\\:var\\(--functionVariables\\,var\\(--semanticPurple\\,\\#b489ff\\)\\)\\] {\n  --variable-function-color: var(--functionVariables,var(--semanticPurple,#b489ff));\n}\n.\\[--variable-normal-color\\:var\\(--normalVariables\\,var\\(--semanticBlue\\,\\#65b8ff\\)\\)\\] {\n  --variable-normal-color: var(--normalVariables,var(--semanticBlue,#65b8ff));\n}\n.hover\\:brightness-110 {\n  &:hover {\n    @media (hover: hover) {\n      --tw-brightness: brightness(110%);\n      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n    }\n  }\n}\n.focus\\:ring-2 {\n  &:focus {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n}\n.focus\\:ring-\\[var\\(--primary\\,\\#ff4076\\)\\] {\n  &:focus {\n    --tw-ring-color: var(--primary,#ff4076);\n  }\n}\n.focus\\:ring-offset-2 {\n  &:focus {\n    --tw-ring-offset-width: 2px;\n    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  }\n}\n.focus\\:ring-offset-\\[var\\(--neutralDark1\\,\\#1b1a28\\)\\] {\n  &:focus {\n    --tw-ring-offset-color: var(--neutralDark1,#1b1a28);\n  }\n}\n.focus\\:outline-none {\n  &:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n}\n.active\\:opacity-80 {\n  &:active {\n    opacity: 80%;\n  }\n}\n.active\\:brightness-95 {\n  &:active {\n    --tw-brightness: brightness(95%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n}\n.disabled\\:cursor-not-allowed {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n.disabled\\:opacity-50 {\n  &:disabled {\n    opacity: 50%;\n  }\n}\n.\\[\\&_circle\\]\\:stroke-white {\n  & circle {\n    stroke: var(--color-white);\n  }\n}\n.\\[\\&_polyline\\]\\:stroke-white {\n  & polyline {\n    stroke: var(--color-white);\n  }\n}\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n');
+styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n:root,\n:host {\n  --color-white: #fff;\n  --spacing: 0.25rem;\n  --text-xs: 0.75rem;\n  --text-xs--line-height: calc(1 / 0.75);\n  --text-sm: 0.875rem;\n  --text-sm--line-height: calc(1.25 / 0.875);\n  --text-base: 1rem;\n  --text-base--line-height: calc(1.5 / 1);\n  --text-lg: 1.125rem;\n  --text-lg--line-height: calc(1.75 / 1.125);\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.375rem;\n  --default-transition-duration: 150ms;\n  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.visible {\n  visibility: visible;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.static {\n  position: static;\n}\n.start {\n  inset-inline-start: var(--spacing);\n}\n.end {\n  inset-inline-end: var(--spacing);\n}\n.m-0 {\n  margin: calc(var(--spacing) * 0);\n}\n.mb-1 {\n  margin-bottom: calc(var(--spacing) * 1);\n}\n.mb-2 {\n  margin-bottom: calc(var(--spacing) * 2);\n}\n.ml-2 {\n  margin-left: calc(var(--spacing) * 2);\n}\n.block {\n  display: block;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n.hidden {\n  display: none;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.h-5 {\n  height: calc(var(--spacing) * 5);\n}\n.h-6 {\n  height: calc(var(--spacing) * 6);\n}\n.h-8 {\n  height: calc(var(--spacing) * 8);\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[55vh\\] {\n  max-height: 55vh;\n}\n.min-h-\\[50vh\\] {\n  min-height: 50vh;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-5 {\n  width: calc(var(--spacing) * 5);\n}\n.w-6 {\n  width: calc(var(--spacing) * 6);\n}\n.w-8 {\n  width: calc(var(--spacing) * 8);\n}\n.w-\\[92vw\\] {\n  width: 92vw;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n.max-w-\\[1100px\\] {\n  max-width: 1100px;\n}\n.min-w-0 {\n  min-width: calc(var(--spacing) * 0);\n}\n.flex-1 {\n  flex: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.transform {\n  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.grid-cols-\\[minmax\\(260px\\,1\\.5fr\\)_2fr_minmax\\(140px\\,1fr\\)\\] {\n  grid-template-columns: minmax(260px, 1.5fr) 2fr minmax(140px, 1fr);\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-nowrap {\n  flex-wrap: nowrap;\n}\n.items-center {\n  align-items: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.justify-center {\n  justify-content: center;\n}\n.gap-1 {\n  gap: calc(var(--spacing) * 1);\n}\n.gap-2 {\n  gap: calc(var(--spacing) * 2);\n}\n.gap-4 {\n  gap: calc(var(--spacing) * 4);\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: var(--radius-md);\n}\n.rounded-sm {\n  border-radius: var(--radius-sm);\n}\n.border {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n}\n.border-0 {\n  border-style: var(--tw-border-style);\n  border-width: 0px;\n}\n.border-2 {\n  border-style: var(--tw-border-style);\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n}\n.border-b-0 {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 0px;\n}\n.border-solid {\n  --tw-border-style: solid;\n  border-style: solid;\n}\n.border-\\[var\\(--neutralDark4\\,\\#393853\\)\\] {\n  border-color: var(--neutralDark4,#393853);\n}\n.border-current {\n  border-color: currentcolor;\n}\n.border-white\\/10 {\n  border-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n}\n.border-white\\/25 {\n  border-color: color-mix(in srgb, #fff 25%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 25%, transparent);\n  }\n}\n.border-b-\\[var\\(--neutralDark4\\,\\#393853\\)\\] {\n  border-bottom-color: var(--neutralDark4,#393853);\n}\n.bg-\\[\\#1b1a28\\] {\n  background-color: #1b1a28;\n}\n.bg-\\[var\\(--primary\\)\\]\\/10 {\n  background-color: var(--primary);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--primary) 10%, transparent);\n  }\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-cover {\n  background-size: cover;\n}\n.bg-center {\n  background-position: center;\n}\n.bg-no-repeat {\n  background-repeat: no-repeat;\n}\n.object-cover {\n  object-fit: cover;\n}\n.p-0 {\n  padding: calc(var(--spacing) * 0);\n}\n.p-2 {\n  padding: calc(var(--spacing) * 2);\n}\n.p-6 {\n  padding: calc(var(--spacing) * 6);\n}\n.px-1 {\n  padding-inline: calc(var(--spacing) * 1);\n}\n.px-2 {\n  padding-inline: calc(var(--spacing) * 2);\n}\n.px-3 {\n  padding-inline: calc(var(--spacing) * 3);\n}\n.px-4 {\n  padding-inline: calc(var(--spacing) * 4);\n}\n.px-6 {\n  padding-inline: calc(var(--spacing) * 6);\n}\n.py-1 {\n  padding-block: calc(var(--spacing) * 1);\n}\n.py-2 {\n  padding-block: calc(var(--spacing) * 2);\n}\n.py-3 {\n  padding-block: calc(var(--spacing) * 3);\n}\n.py-\\[1px\\] {\n  padding-block: 1px;\n}\n.pt-0 {\n  padding-top: calc(var(--spacing) * 0);\n}\n.pt-2 {\n  padding-top: calc(var(--spacing) * 2);\n}\n.pr-4 {\n  padding-right: calc(var(--spacing) * 4);\n}\n.pb-0 {\n  padding-bottom: calc(var(--spacing) * 0);\n}\n.pb-2 {\n  padding-bottom: calc(var(--spacing) * 2);\n}\n.text-base {\n  font-size: var(--text-base);\n  line-height: var(--tw-leading, var(--text-base--line-height));\n}\n.text-lg {\n  font-size: var(--text-lg);\n  line-height: var(--tw-leading, var(--text-lg--line-height));\n}\n.text-sm {\n  font-size: var(--text-sm);\n  line-height: var(--tw-leading, var(--text-sm--line-height));\n}\n.text-xs {\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n}\n.text-\\[10px\\] {\n  font-size: 10px;\n}\n.leading-none {\n  --tw-leading: 1;\n  line-height: 1;\n}\n.font-bold {\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n}\n.font-medium {\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n}\n.font-semibold {\n  --tw-font-weight: var(--font-weight-semibold);\n  font-weight: var(--font-weight-semibold);\n}\n.break-words {\n  overflow-wrap: break-word;\n}\n.break-all {\n  word-break: break-all;\n}\n.text-ellipsis {\n  text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-\\[\\#f4f3ff\\] {\n  color: #f4f3ff;\n}\n.text-\\[var\\(--childVariables\\,\\#ffa66e\\)\\] {\n  color: var(--childVariables,#ffa66e);\n}\n.text-\\[var\\(--customVariables\\,\\#69ffd2\\)\\] {\n  color: var(--customVariables,#69ffd2);\n}\n.text-\\[var\\(--functionVariables\\,\\#b47eea\\)\\] {\n  color: var(--functionVariables,#b47eea);\n}\n.text-\\[var\\(--neutralLight1\\,\\#f4f3ff\\)\\] {\n  color: var(--neutralLight1,#f4f3ff);\n}\n.text-\\[var\\(--neutralLight2\\,\\#cac9d5\\)\\] {\n  color: var(--neutralLight2,#cac9d5);\n}\n.text-\\[var\\(--neutralLight3\\,\\#9392a1\\)\\] {\n  color: var(--neutralLight3,#9392a1);\n}\n.text-\\[var\\(--normalVariables\\,\\#69a5ff\\)\\] {\n  color: var(--normalVariables,#69a5ff);\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.shadow-\\[0_0_0_1px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\] {\n  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.25));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.shadow-\\[0_8px_18px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n  --tw-shadow: 0 8px 18px var(--tw-shadow-color, rgba(0,0,0,0.18));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.filter {\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    outline-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    --tw-gradient-from,\n    --tw-gradient-via,\n    --tw-gradient-to,\n    opacity,\n    box-shadow,\n    transform,\n    translate,\n    scale,\n    rotate,\n    filter,\n    -webkit-backdrop-filter,\n    backdrop-filter,\n    display,\n    content-visibility,\n    overlay,\n    pointer-events;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.\\[--neutralDark1\\:\\#1b1a28\\] {\n  --neutralDark1: #1b1a28;\n}\n.\\[--neutralDark2\\:\\#252338\\] {\n  --neutralDark2: #252338;\n}\n.\\[--neutralDark3\\:\\#312f47\\] {\n  --neutralDark3: #312f47;\n}\n.\\[--neutralDark4\\:\\#46435f\\] {\n  --neutralDark4: #46435f;\n}\n.\\[--neutralLight1\\:\\#f4f3ff\\] {\n  --neutralLight1: #f4f3ff;\n}\n.\\[--neutralLight2\\:\\#cac9d5\\] {\n  --neutralLight2: #cac9d5;\n}\n.\\[--neutralLight3\\:\\#9f9eb2\\] {\n  --neutralLight3: #9f9eb2;\n}\n.\\[--primary\\:\\#ff4076\\] {\n  --primary: #ff4076;\n}\n.\\[--radiusContainer\\:12px\\] {\n  --radiusContainer: 12px;\n}\n.\\[--radiusContainerSm\\:10px\\] {\n  --radiusContainerSm: 10px;\n}\n.\\[--secondary\\:\\#5f5dff\\] {\n  --secondary: #5f5dff;\n}\n.last-of-type\\:border-b-0 {\n  &:last-of-type {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 0px;\n  }\n}\n.hover\\:bg-\\[var\\(--neutralDark2\\,\\#1f1d36\\)\\]\\/40 {\n  &:hover {\n    @media (hover: hover) {\n      background-color: var(--neutralDark2,#1f1d36);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--neutralDark2,#1f1d36) 40%, transparent);\n      }\n    }\n  }\n}\n.hover\\:bg-\\[var\\(--neutralDark4\\,\\#393853\\)\\]\\/50 {\n  &:hover {\n    @media (hover: hover) {\n      background-color: var(--neutralDark4,#393853);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--neutralDark4,#393853) 50%, transparent);\n      }\n    }\n  }\n}\n.hover\\:bg-\\[var\\(--primary\\)\\]\\/20 {\n  &:hover {\n    @media (hover: hover) {\n      background-color: var(--primary);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--primary) 20%, transparent);\n      }\n    }\n  }\n}\n.hover\\:brightness-110 {\n  &:hover {\n    @media (hover: hover) {\n      --tw-brightness: brightness(110%);\n      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n    }\n  }\n}\n.focus\\:ring-2 {\n  &:focus {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n}\n.focus\\:ring-\\[var\\(--primary\\,\\#ff4076\\)\\] {\n  &:focus {\n    --tw-ring-color: var(--primary,#ff4076);\n  }\n}\n.focus\\:ring-offset-2 {\n  &:focus {\n    --tw-ring-offset-width: 2px;\n    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  }\n}\n.focus\\:ring-offset-\\[var\\(--neutralDark1\\,\\#1b1a28\\)\\] {\n  &:focus {\n    --tw-ring-offset-color: var(--neutralDark1,#1b1a28);\n  }\n}\n.focus\\:outline-none {\n  &:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n}\n.active\\:opacity-80 {\n  &:active {\n    opacity: 80%;\n  }\n}\n.active\\:brightness-95 {\n  &:active {\n    --tw-brightness: brightness(95%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n}\n.disabled\\:cursor-not-allowed {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n.disabled\\:opacity-50 {\n  &:disabled {\n    opacity: 50%;\n  }\n}\n.\\[\\&_circle\\]\\:stroke-white {\n  & circle {\n    stroke: var(--color-white);\n  }\n}\n.\\[\\&_polyline\\]\\:stroke-white {\n  & polyline {\n    stroke: var(--color-white);\n  }\n}\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n');
 // src/components/LSButton/LSButton.tsx
 import { jsx } from "react/jsx-runtime";
@@ -185,6 +185,20 @@ import Slider from "@mui/material/Slider";
 import classNames2 from "classnames";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var normalizeSliderValue = (rawValue) => {
+  if (typeof rawValue === "number") {
+    return Number.isFinite(rawValue) ? rawValue : 0;
+  }
+  if (typeof rawValue === "string") {
+    const trimmedValue = rawValue.trim();
+    if (!trimmedValue) {
+      return 0;
+    }
+    const numericValue = Number(trimmedValue);
+    return Number.isFinite(numericValue) ? numericValue : 0;
+  }
+  return 0;
+};
 var LSSliderInput = ({
   name,
   value,
@@ -214,13 +228,7 @@ var LSSliderInput = ({
   const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
   const actualToDisplay = useCallback(
     (input) => {
-      if (input === void 0 || input === null) {
-        return input;
-      }
-      const numericValue = Number(input);
-      if (Number.isNaN(numericValue)) {
-        return 0;
-      }
+      const numericValue = normalizeSliderValue(input);
       if (!isValueFloat) {
         return numericValue;
       }
@@ -241,7 +249,7 @@ var LSSliderInput = ({
     return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
   }, [displayStep]);
   useEffect(() => {
-    if (typeof value === "number" && Number.isNaN(value) === false) {
+    if (value !== void 0) {
       setDisplayValue(actualToDisplay(value));
     }
   }, [actualToDisplay, value]);
@@ -939,10 +947,13 @@ LSTextField.displayName = "LSTextField";
 // src/components/LSVariableInputField/LSVariableInputField.tsx
 import Autocomplete2, { createFilterOptions } from "@mui/material/Autocomplete";
 import InputAdornment2 from "@mui/material/InputAdornment";
-import Search from "@mui/icons-material/Search";
 import Popover from "@mui/material/Popover";
-import { createContext, forwardRef as forwardRef4, useCallback as useCallback2, useContext, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
-import { Fragment, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import Search from "@mui/icons-material/Search";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+import Tooltip from "@mui/material/Tooltip";
+import { Fragment, createContext, forwardRef as forwardRef4, useCallback as useCallback2, useContext, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { createElement } from "react";
 var LSVariableInputContext = createContext({});
 var LSVariableInputProvider = ({ children, value }) => {
   return /* @__PURE__ */ jsx11(LSVariableInputContext.Provider, { value, children });
@@ -963,8 +974,8 @@ var DEFAULT_FUNCTION_VARIABLES = [
   "screenshot",
   "overlay_screenshot",
   "obs_screenshot",
-  "obs_replay",
   "obs_vertical_replay",
+  "obs_replay",
   "get_queue_count",
   "lumia_uptime",
   "twitch_uptime",
@@ -979,15 +990,100 @@ var DEFAULT_FUNCTION_VARIABLES = [
   "ai_prompt",
   "viewer_profile_summary"
 ];
-var filter = createFilterOptions();
-var isNully = (value) => value === null || value === void 0;
+var MAX_OBJECT_DEPTH = 5;
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isExpandableValue = (value) => {
+  if (isPlainObject(value)) return Object.keys(value).length > 0;
+  if (Array.isArray(value)) return value.length > 0;
+  return false;
+};
+var isPrimitiveValue = (value) => value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+var renderPrimitiveValue = (value) => {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "boolean") return value.toString();
+  if (typeof value === "number") return value.toString();
+  if (typeof value === "string") return value;
+  return String(value);
+};
+var renderComplexPreview = (value) => {
+  if (Array.isArray(value)) {
+    return `Array(${value.length}) [${value.slice(0, 3).map((item) => typeof item === "string" ? `"${item}"` : typeof item === "object" ? "{...}" : String(item)).join(", ")}${value.length > 3 ? "..." : ""}]`;
+  }
+  const keys = Object.keys(value);
+  return `Object {${keys.slice(0, 2).join(", ")}${keys.length > 2 ? "..." : ""}}`;
+};
+var getVariableValueDisplay = (value) => {
+  const isComplexValue = !isPrimitiveValue(value) && value !== null && typeof value === "object";
+  const displayValue = isComplexValue ? renderComplexPreview(value) : renderPrimitiveValue(value);
+  const fullValue = isComplexValue ? JSON.stringify(value, null, 2) : renderPrimitiveValue(value);
+  return { displayValue, fullValue, isComplexValue };
+};
+var buildValueChildren = (value, parentPath, depth) => {
+  if (depth >= MAX_OBJECT_DEPTH) return [];
+  if (isPlainObject(value)) {
+    return Object.keys(value).map((key) => {
+      const childValue = value[key];
+      const relativePath = parentPath ? `${parentPath}.${key}` : key;
+      const expandable = depth + 1 < MAX_OBJECT_DEPTH && isExpandableValue(childValue);
+      return {
+        relativePath,
+        key,
+        displayKey: key,
+        depth: depth + 1,
+        value: childValue,
+        isExpandable: expandable,
+        children: expandable ? buildValueChildren(childValue, relativePath, depth + 1) : []
+      };
+    });
+  }
+  if (Array.isArray(value)) {
+    return value.map((item, idx) => {
+      const relativePath = parentPath ? `${parentPath}.${idx}` : String(idx);
+      const expandable = depth + 1 < MAX_OBJECT_DEPTH && isExpandableValue(item);
+      return {
+        relativePath,
+        key: String(idx),
+        displayKey: `[${idx}]`,
+        depth: depth + 1,
+        value: item,
+        isExpandable: expandable,
+        children: expandable ? buildValueChildren(item, relativePath, depth + 1) : []
+      };
+    });
+  }
+  return [];
+};
+var isVariableRecord = (value) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const v = value;
+  return typeof v.name === "string" && ("system" in v || "origin" in v || "value" in v);
+};
+var synthesizeRecord = (name, value) => ({
+  name,
+  system: false,
+  origin: "",
+  description: "",
+  value: value ?? ""
+});
+var normalizeVariableRecords = (systemVariables) => {
+  const out = {};
+  if (!systemVariables) return out;
+  for (const [key, raw] of Object.entries(systemVariables)) {
+    if (raw === void 0 || raw === null) continue;
+    out[key] = isVariableRecord(raw) ? raw : synthesizeRecord(key, raw);
+  }
+  return out;
+};
 var defaultTranslate = (key, fallback, options) => {
   if (fallback && fallback !== "-") return fallback;
   if (key === "overlay-variables.variables-description") return "Use variables that will automatically be replaced before sending out the text";
-  if (key === "overlay-variables.variable") return "Variable";
-  if (key === "overlay-variables.description") return "Description";
-  if (key === "assets.search") return "Search";
+  if (key === "overlay-variables.variable" || key === "commands.variable") return "Variable";
+  if (key === "overlay-variables.description" || key === "commands.description") return "Description";
+  if (key === "commands.suggested-variables") return "Suggested Variables";
+  if (key === "common.value") return "Value";
+  if (key === "common.search" || key === "assets.search") return "Search";
   if (key === "variables.functionvariables") return "Function variables";
+  if (key === "chatbot.allowed-variables") return "Allowed Variables";
   if (key.startsWith("variables.")) {
     const variableName = key.replace("variables.", "");
     const example = options?.example;
@@ -1002,6 +1098,8 @@ var normalizeAllowedDefinitions = (allowedVariables) => {
   allowedVariables.forEach((variable) => {
     let variableName = "";
     let description;
+    let origin;
+    let example;
     if (typeof variable === "string") {
       variableName = variable.trim();
     } else if (variable && typeof variable === "object") {
@@ -1009,13 +1107,57 @@ var normalizeAllowedDefinitions = (allowedVariables) => {
       const candidateName = [typedVariable.name, typedVariable.key, typedVariable.variable].find((value) => typeof value === "string");
       variableName = typeof candidateName === "string" ? candidateName.trim() : "";
       description = typeof typedVariable.description === "string" ? typedVariable.description.trim() : void 0;
+      origin = typeof typedVariable.origin === "string" ? typedVariable.origin.trim().toLowerCase() : void 0;
+      example = typedVariable.example;
     }
     if (!variableName || unique.has(variableName)) return;
     unique.add(variableName);
-    definitions.push({ name: variableName, description });
+    definitions.push({ name: variableName, description, origin, example });
   });
   return definitions;
 };
+var filter = createFilterOptions({
+  stringify: (option) => {
+    if (typeof option === "string") return option;
+    if (typeof option === "number" || typeof option === "boolean" || typeof option === "bigint") return String(option);
+    if (!option || typeof option !== "object") return "";
+    const typed = option;
+    return [typed.label, typed.value, typed.helperText, typed.searchText].filter((value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean").map((value) => String(value)).join(" ");
+  }
+});
+var visualTypeFromRecord = (variable) => {
+  if (variable?.isFunction) return "func";
+  if (variable?.system || variable?.locked) return "system";
+  return "custom";
+};
+var visualTypeRank = (variableType) => {
+  if (variableType === "custom") return 0;
+  if (variableType === "func") return 1;
+  return 2;
+};
+var orderItemsByVariableType = (items, getType) => {
+  const grouped = { custom: [], func: [], system: [] };
+  items.forEach((item) => grouped[getType(item)].push(item));
+  return [...grouped.custom, ...grouped.func, ...grouped.system];
+};
+var sortItemsByVariableTypeThenName = (items, getType, getName) => {
+  return [...items].sort((a, b) => {
+    const typeDiff = visualTypeRank(getType(a)) - visualTypeRank(getType(b));
+    if (typeDiff !== 0) return typeDiff;
+    return getName(a).localeCompare(getName(b));
+  });
+};
+var humanizeVariableName = (rawName) => {
+  if (!rawName) return "";
+  return rawName.replace(/^_+|_+$/g, "").replace(/_/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
+};
+var getVariableColorClass = (variableType, isSuggested) => {
+  if (isSuggested && variableType !== "func") return "text-[var(--customVariables,#69ffd2)]";
+  if (variableType === "func") return "text-[var(--functionVariables,#b47eea)]";
+  if (variableType === "system") return "text-[var(--normalVariables,#69a5ff)]";
+  return "text-[var(--customVariables,#69ffd2)]";
+};
+var CHILD_VARIABLE_COLOR_CLASS = "text-[var(--childVariables,#ffa66e)]";
 var LSVariableInputField = forwardRef4((props, ref) => {
   const context = useContext(LSVariableInputContext);
   const {
@@ -1024,6 +1166,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     type,
     isAutoComplete,
     autoCompleteOptions,
+    autoCompleteGroupBy,
     renderOption,
     hideVariables,
     allowedVariables,
@@ -1043,15 +1186,30 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     onPopupOpen,
     afterFilter,
     onChange,
+    loading,
+    getOptionLabel,
+    isOptionEqualToValue,
+    $disableInputChange,
+    $getFullValueObject,
+    $multiple,
+    $disableCloseOnSelect,
+    $freeSolo,
+    $renderOption,
+    allowedVariableOrigin,
     systemVariables: systemVariablesProp,
     functionVariables: functionVariablesProp,
     translate,
-    onVariableTranslationsNeeded
+    onVariableTranslationsNeeded,
+    isOriginConnected: isOriginConnectedProp,
+    translationKeyExists: translationKeyExistsProp
   } = props;
   const t = translate ?? context.translate ?? defaultTranslate;
-  const systemVariables = systemVariablesProp ?? context.systemVariables ?? {};
+  const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
+  const variableRecords = useMemo3(() => normalizeVariableRecords(rawSystemVariables), [rawSystemVariables]);
   const functionVariables = useMemo3(() => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES, [context.functionVariables, functionVariablesProp]);
   const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
+  const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
+  const translationKeyExists = translationKeyExistsProp ?? context.translationKeyExists;
   const containerRef = useRef3(null);
   const variableId = useRef3(`variable-input-${name ?? "field"}`);
   const [showVariables, setShowVariables] = useState4(false);
@@ -1064,93 +1222,300 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     return lookup;
   }, [allowedVariableDefinitions]);
   const allowedVariableNames = useMemo3(() => allowedVariableDefinitions.map((definition) => definition.name), [allowedVariableDefinitions]);
-  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableNames);
+  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableDefinitions);
   const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
+  const [expandedPaths, setExpandedPaths] = useState4(() => /* @__PURE__ */ new Set());
+  const [autoExpandPaths, setAutoExpandPaths] = useState4(() => /* @__PURE__ */ new Set());
+  const systemVariableValueTrees = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    Object.values(variableRecords).forEach((variable) => {
+      if (variable && isExpandableValue(variable.value)) {
+        map.set(variable.name, buildValueChildren(variable.value, "", 0));
+      }
+    });
+    return map;
+  }, [variableRecords]);
+  const allowedExampleTrees = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    allowedVariableDefinitions.forEach((definition) => {
+      if (isExpandableValue(definition.example)) {
+        map.set(definition.name, buildValueChildren(definition.example, "", 0));
+      }
+    });
+    return map;
+  }, [allowedVariableDefinitions]);
   useEffect4(() => {
     requestTranslations?.();
   }, [requestTranslations]);
-  const getVariableVisualType = useCallback2(
+  const isPathExpanded = useCallback2((path) => expandedPaths.has(path) || autoExpandPaths.has(path), [autoExpandPaths, expandedPaths]);
+  const toggleExpand = useCallback2(
+    (path) => {
+      const expanded = expandedPaths.has(path) || autoExpandPaths.has(path);
+      if (expanded) {
+        if (expandedPaths.has(path)) {
+          setExpandedPaths((prev) => {
+            const next = new Set(prev);
+            next.delete(path);
+            return next;
+          });
+        }
+        if (autoExpandPaths.has(path)) {
+          setAutoExpandPaths((prev) => {
+            const next = new Set(prev);
+            next.delete(path);
+            return next;
+          });
+        }
+      } else {
+        setExpandedPaths((prev) => {
+          const next = new Set(prev);
+          next.add(path);
+          return next;
+        });
+      }
+    },
+    [autoExpandPaths, expandedPaths]
+  );
+  const namespaceHas = useCallback2(
+    (key, namespace) => {
+      if (!translationKeyExists) return false;
+      try {
+        return translationKeyExists(key, namespace);
+      } catch {
+        return false;
+      }
+    },
+    [translationKeyExists]
+  );
+  const resolveTranslationFromNamespace = useCallback2(
+    (variableName, namespace) => {
+      const normalizedNamespace = typeof namespace === "string" ? namespace.trim().toLowerCase() : "";
+      if (!normalizedNamespace) return null;
+      const normalizedName = variableName.trim().toLowerCase();
+      if (!normalizedName) return null;
+      const unprefixedName = normalizedName.startsWith(`${normalizedNamespace}_`) ? normalizedName.slice(normalizedNamespace.length + 1) : normalizedName;
+      const prefixedName = normalizedName.startsWith(`${normalizedNamespace}_`) ? normalizedName : `${normalizedNamespace}_${normalizedName}`;
+      const candidateKeys = [prefixedName, unprefixedName];
+      for (const key of candidateKeys) {
+        if (namespaceHas(key, normalizedNamespace)) return t(key, void 0, { ns: normalizedNamespace });
+        if (namespaceHas(`variables.${key}`, normalizedNamespace)) return t(`variables.${key}`, void 0, { ns: normalizedNamespace });
+      }
+      return null;
+    },
+    [namespaceHas, t]
+  );
+  const knownOrigins = useMemo3(() => {
+    return Array.from(
+      new Set(
+        Object.values(variableRecords).map((variable) => typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : "").filter((origin) => origin.length > 0)
+      )
+    );
+  }, [variableRecords]);
+  const resolveAllowedVariableOrigin = useCallback2(
     (variableName) => {
-      if (functionVariableSet.has(variableName)) return "func";
-      return !isNully(systemVariables?.[variableName]) ? "system" : "custom";
+      const originFromProp = typeof allowedVariableOrigin === "string" ? allowedVariableOrigin.trim().toLowerCase() : "";
+      if (originFromProp) return originFromProp;
+      const fromDefinition = allowedVariableDefinitionLookup.get(variableName)?.origin;
+      if (fromDefinition) return fromDefinition;
+      const normalizedName = variableName.trim().toLowerCase();
+      if (!normalizedName) return void 0;
+      const prefixCandidate = normalizedName.split("_")[0];
+      if (prefixCandidate) {
+        const hasScopedTranslation = namespaceHas(normalizedName, prefixCandidate) || namespaceHas(`variables.${normalizedName}`, prefixCandidate) || namespaceHas(normalizedName.slice(prefixCandidate.length + 1), prefixCandidate) || namespaceHas(`variables.${normalizedName.slice(prefixCandidate.length + 1)}`, prefixCandidate);
+        if (hasScopedTranslation) return prefixCandidate;
+      }
+      const prefixedMatch = knownOrigins.find((origin) => normalizedName.startsWith(`${origin}_`));
+      if (prefixedMatch) return prefixedMatch;
+      const matchingOrigins = knownOrigins.filter(
+        (origin) => namespaceHas(normalizedName, origin) || namespaceHas(`variables.${normalizedName}`, origin) || namespaceHas(`${origin}_${normalizedName}`, origin)
+      );
+      if (matchingOrigins.length === 1) return matchingOrigins[0];
+      const inferredOrigins = Array.from(
+        new Set(
+          Object.values(variableRecords).filter((variable) => {
+            const variableNameLower = typeof variable?.name === "string" ? variable.name.trim().toLowerCase() : "";
+            const variableOrigin = typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : "";
+            if (!variableNameLower || !variableOrigin) return false;
+            return variableNameLower === normalizedName || variableNameLower === `${variableOrigin}_${normalizedName}`;
+          }).map((variable) => String(variable.origin).trim().toLowerCase()).filter((origin) => origin.length > 0)
+        )
+      );
+      return inferredOrigins.length === 1 ? inferredOrigins[0] : void 0;
     },
-    [functionVariableSet, systemVariables]
+    [allowedVariableDefinitionLookup, allowedVariableOrigin, knownOrigins, namespaceHas, variableRecords]
   );
-  const getVariableTypeSortRank = (variableType) => {
-    if (variableType === "custom") return 0;
-    if (variableType === "func") return 1;
-    return 2;
-  };
-  const orderByType = useCallback2(
-    (variableNames) => {
-      const grouped = { custom: [], func: [], system: [] };
-      variableNames.forEach((variableName) => {
-        grouped[getVariableVisualType(variableName)].push(variableName);
-      });
-      return [...grouped.custom, ...grouped.func, ...grouped.system];
+  const resolveVariableDescription = useCallback2(
+    (variableName, fallbackDescription, origin) => {
+      const fromOrigin = resolveTranslationFromNamespace(variableName, origin);
+      if (fromOrigin && fromOrigin.trim().length > 0) return fromOrigin;
+      const defaultTranslationKey = `variables.${variableName}`;
+      const defaultTranslated = t(defaultTranslationKey);
+      if (typeof defaultTranslated === "string" && defaultTranslated !== defaultTranslationKey) return defaultTranslated;
+      if (fallbackDescription && fallbackDescription.trim().length > 0) return fallbackDescription;
+      return humanizeVariableName(variableName);
     },
-    [getVariableVisualType]
+    [resolveTranslationFromNamespace, t]
   );
-  const sortByTypeThenName = useCallback2(
-    (variableNames) => [...variableNames].sort((a, b) => {
-      const typeDiff = getVariableTypeSortRank(getVariableVisualType(a)) - getVariableTypeSortRank(getVariableVisualType(b));
-      return typeDiff !== 0 ? typeDiff : a.localeCompare(b);
-    }),
-    [getVariableVisualType]
+  const getSystemVariableDescription = useCallback2(
+    (variable) => {
+      if (variable?.system && !variable?.pluginId) {
+        return t(`variables.${variable.description}`, void 0, { example: variable.example, interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } });
+      }
+      return resolveVariableDescription(variable?.name ?? "", variable?.description, variable?.origin);
+    },
+    [resolveVariableDescription, t]
+  );
+  const getAllowedVariableRecord = useCallback2(
+    (variableName) => {
+      const direct = variableRecords[variableName];
+      if (direct) return direct;
+      const normalizedOrigin = resolveAllowedVariableOrigin(variableName);
+      if (!normalizedOrigin) return void 0;
+      const prefixedName = variableName.startsWith(`${normalizedOrigin}_`) ? variableName : `${normalizedOrigin}_${variableName}`;
+      return variableRecords[prefixedName];
+    },
+    [resolveAllowedVariableOrigin, variableRecords]
   );
   const getAllowedVariableDescription = useCallback2(
     (variableName) => {
-      const fromDefinitions = allowedVariableDefinitionLookup.get(variableName)?.description;
-      if (fromDefinitions) return fromDefinitions;
-      const translationKey = `variables.${variableName}`;
-      const translated = t(translationKey, variableName);
-      return translated && translated !== translationKey ? translated : variableName;
+      const variable = variableRecords[variableName];
+      if (variable) return getSystemVariableDescription(variable);
+      const fromDefinition = allowedVariableDefinitionLookup.get(variableName);
+      const origin = resolveAllowedVariableOrigin(variableName);
+      return resolveVariableDescription(variableName, fromDefinition?.description, origin);
     },
-    [allowedVariableDefinitionLookup, t]
+    [allowedVariableDefinitionLookup, getSystemVariableDescription, resolveAllowedVariableOrigin, resolveVariableDescription, variableRecords]
   );
-  const filterBasedOnQuery = useCallback2(() => {
+  const getAllowedVariableValue = useCallback2(
+    (variableName) => {
+      if (!variableName) return void 0;
+      const direct = variableRecords[variableName]?.value;
+      if (direct !== void 0) return direct;
+      const normalizedOrigin = resolveAllowedVariableOrigin(variableName);
+      if (!normalizedOrigin) return void 0;
+      const prefixedName = variableName.startsWith(`${normalizedOrigin}_`) ? variableName : `${normalizedOrigin}_${variableName}`;
+      return variableRecords[prefixedName]?.value;
+    },
+    [resolveAllowedVariableOrigin, variableRecords]
+  );
+  const getAllowedVariableVisualType = useCallback2(
+    (variableName) => {
+      const record = getAllowedVariableRecord(variableName);
+      if (record) return visualTypeFromRecord(record);
+      if (functionVariableSet.has(variableName)) return "func";
+      return "custom";
+    },
+    [functionVariableSet, getAllowedVariableRecord]
+  );
+  const getAllowedVariableTree = useCallback2(
+    (definition) => {
+      const record = getAllowedVariableRecord(definition.name);
+      const liveTree = record ? systemVariableValueTrees.get(record.name) : void 0;
+      if (liveTree && liveTree.length > 0) return liveTree;
+      return allowedExampleTrees.get(definition.name);
+    },
+    [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
+  );
+  useEffect4(() => {
     const query = (searchQuery ?? "").toLowerCase().replace("{{", "").replace("}}", "").trim();
+    const nextAutoExpand = /* @__PURE__ */ new Set();
+    const collectNestedAutoExpand = (rootToken, tree) => {
+      if (!query || !tree || tree.length === 0) return false;
+      let hit = false;
+      const walk = (nodes) => {
+        nodes.forEach((node) => {
+          if (node.relativePath.toLowerCase().includes(query) || node.key.toLowerCase().includes(query)) {
+            hit = true;
+            const segments = node.relativePath.split(".");
+            for (let i = 0; i < segments.length; i++) {
+              const rel = segments.slice(0, i).join(".");
+              nextAutoExpand.add(rel ? `${rootToken}.${rel}` : rootToken);
+            }
+          }
+          if (node.children.length) walk(node.children);
+        });
+      };
+      walk(tree);
+      return hit;
+    };
     if (allowedVariableNames.length > 0) {
       if (!query) {
-        setFilteredAllowedVariables(orderByType(allowedVariableNames));
+        setFilteredAllowedVariables(orderItemsByVariableType(allowedVariableDefinitions, (definition) => getAllowedVariableVisualType(definition.name)));
       } else {
         const nameMatches = [];
         const descMatches = [];
-        allowedVariableNames.forEach((variable) => {
-          const nameLower = variable?.toLowerCase();
-          const descLower = getAllowedVariableDescription(variable)?.toLowerCase();
-          if (nameLower?.includes(query)) nameMatches.push(variable);
-          else if (descLower?.includes(query)) descMatches.push(variable);
+        const nestedMatches = [];
+        allowedVariableDefinitions.forEach((definition) => {
+          const nameLower = definition.name?.toLowerCase();
+          const descLower = getAllowedVariableDescription(definition.name)?.toLowerCase();
+          if (nameLower?.includes(query)) {
+            nameMatches.push(definition);
+            return;
+          }
+          if (descLower?.includes(query)) {
+            descMatches.push(definition);
+            return;
+          }
+          const tree = getAllowedVariableTree(definition);
+          if (tree && collectNestedAutoExpand(definition.name, tree)) {
+            nestedMatches.push(definition);
+          }
         });
-        setFilteredAllowedVariables([...sortByTypeThenName(nameMatches), ...sortByTypeThenName(descMatches)]);
+        const sortByDef = (items) => sortItemsByVariableTypeThenName(items, (definition) => getAllowedVariableVisualType(definition.name), (definition) => definition.name);
+        setFilteredAllowedVariables([...sortByDef(nameMatches), ...sortByDef(descMatches), ...sortByDef(nestedMatches)]);
       }
     } else {
       setFilteredAllowedVariables([]);
     }
-    const systemKeys = Object.keys(systemVariables ?? {}).filter((variableKey) => !isNully(systemVariables?.[variableKey]));
-    const allowedVariableSet = new Set(allowedVariableNames);
-    const candidates = [...functionVariables, ...systemKeys].filter((variableKey, idx, list) => list.indexOf(variableKey) === idx && !allowedVariableSet.has(variableKey));
+    const allowedSet = new Set(allowedVariableNames);
+    const shouldKeep = (variable) => {
+      if (allowedSet.has(variable.name)) return false;
+      if (!variable.origin) return true;
+      if (!isOriginConnected) return true;
+      return isOriginConnected(variable.origin);
+    };
+    const allRecords = Object.values(variableRecords);
     if (!query) {
-      setFilteredSystemVariables(orderByType(candidates));
+      const visible = allRecords.filter(shouldKeep);
+      setFilteredSystemVariables(orderItemsByVariableType(visible, (variable) => visualTypeFromRecord(variable)));
     } else {
       const nameMatches = [];
       const descMatches = [];
-      candidates.forEach((key) => {
-        const nameLower = key?.toLowerCase();
-        const descStr = t(`variables.${key}`, "-", {
-          example: systemVariables[key],
-          interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" }
-        });
-        const descLower = descStr?.toLowerCase();
-        if (nameLower?.includes(query)) nameMatches.push(key);
-        else if (descLower?.includes(query)) descMatches.push(key);
+      const nestedMatches = [];
+      allRecords.forEach((variable) => {
+        if (!shouldKeep(variable)) return;
+        const description = getSystemVariableDescription(variable);
+        const nameLower = variable.name?.toLowerCase();
+        const descLower = description?.toLowerCase();
+        if (nameLower?.includes(query)) {
+          nameMatches.push(variable);
+          return;
+        }
+        if (descLower?.includes(query)) {
+          descMatches.push(variable);
+          return;
+        }
+        const tree = systemVariableValueTrees.get(variable.name);
+        if (tree && collectNestedAutoExpand(variable.example ?? variable.name, tree)) {
+          nestedMatches.push(variable);
+        }
       });
-      setFilteredSystemVariables([...sortByTypeThenName(nameMatches), ...sortByTypeThenName(descMatches)]);
+      const sortSys = (items) => sortItemsByVariableTypeThenName(items, (variable) => visualTypeFromRecord(variable), (variable) => variable?.name ?? "");
+      setFilteredSystemVariables([...sortSys(nameMatches), ...sortSys(descMatches), ...sortSys(nestedMatches)]);
     }
-  }, [allowedVariableNames, functionVariables, getAllowedVariableDescription, orderByType, searchQuery, sortByTypeThenName, systemVariables, t]);
-  useEffect4(() => {
-    filterBasedOnQuery();
-  }, [filterBasedOnQuery]);
+    setAutoExpandPaths(nextAutoExpand);
+  }, [
+    searchQuery,
+    allowedVariableDefinitions,
+    allowedVariableNames,
+    getAllowedVariableDescription,
+    getAllowedVariableTree,
+    getAllowedVariableVisualType,
+    getSystemVariableDescription,
+    isOriginConnected,
+    systemVariableValueTrees,
+    variableRecords
+  ]);
   const clickedVariableIcon = () => {
     if (!hideVariables) setShowVariables((current) => !current);
   };
@@ -1160,25 +1525,218 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   };
   const insertVariable = (variable) => {
     appendValue(`{{${variable}}}`);
+    setShowVariables(false);
   };
-  const getVariableColorClass = (variableType, isSuggested = false) => {
-    if (isSuggested && variableType !== "func") return "text-[var(--customVariables,#69ffd2)]";
-    if (variableType === "func") return "text-[var(--functionVariables,var(--semanticPurple,#b489ff))]";
-    if (variableType === "system") return "text-[var(--normalVariables,var(--semanticBlue,#65b8ff))]";
-    return "text-[var(--customVariables,#69ffd2)]";
-  };
-  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `flex min-w-0 items-center ${getVariableColorClass(variableType, isSuggested)}`, children: [
-    /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${variableName}}}` }),
-    variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ml-2 inline-flex shrink-0 items-center rounded border border-current px-1 py-0 text-[10px] font-semibold uppercase leading-none", title: t("variables.functionvariables", "Function variables"), children: "fx" })
-  ] });
   const handleFilterOptions = (options, params) => {
     const filtered = filter(options, params);
     afterFilter?.(filtered);
     return filtered;
   };
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `flex min-w-0 items-center ${getVariableColorClass(variableType, isSuggested)}`, children: [
+    /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${variableName}}}` }),
+    variableType === "func" && /* @__PURE__ */ jsx11(
+      "span",
+      {
+        className: "ml-2 inline-flex shrink-0 items-center rounded border border-current px-1 py-[1px] text-[10px] font-semibold leading-none uppercase",
+        title: t("variables.functionvariables", "Function variables"),
+        children: "fx"
+      }
+    )
+  ] });
+  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx11(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleExpand(path);
+      },
+      className: "flex h-5 w-5 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[var(--neutralLight2,#cac9d5)] hover:bg-[var(--neutralDark4,#393853)]/50",
+      "aria-label": expanded ? "Collapse" : "Expand",
+      "aria-expanded": expanded,
+      children: /* @__PURE__ */ jsx11(
+        ArrowRight,
+        {
+          style: {
+            width: 14,
+            height: 14,
+            transform: expanded ? "rotate(90deg)" : "none",
+            transition: "transform 0.15s ease"
+          }
+        }
+      )
+    }
+  );
+  const renderExpandSpacer = () => /* @__PURE__ */ jsx11("span", { className: "inline-block h-5 w-5 shrink-0", "aria-hidden": true });
+  const getVariableValuePreview = (variableValue) => {
+    const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
+    return { displayValue, fullValue };
+  };
+  const renderValueChildRows = (rootToken, nodes) => nodes.map((node) => {
+    const fullToken = `${rootToken}.${node.relativePath}`;
+    const expanded = node.isExpandable && isPathExpanded(fullToken);
+    const { displayValue, fullValue } = getVariableValuePreview(node.value);
+    return /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b border-[var(--neutralDark4,#393853)] pb-2 pt-2 last-of-type:border-b-0 active:opacity-80",
+          onClick: () => {
+            if (node.isExpandable && !expanded) toggleExpand(fullToken);
+            else insertVariable(fullToken);
+          },
+          children: [
+            /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", style: { paddingLeft: `${node.depth * 1.25}rem` }, children: [
+              node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
+              /* @__PURE__ */ jsx11("div", { className: `flex min-w-0 items-center ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${fullToken}}}` }) })
+            ] }),
+            /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: node.displayKey }),
+            /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
+          ]
+        }
+      ),
+      expanded && renderValueChildRows(rootToken, node.children)
+    ] }, fullToken);
+  });
+  const toOptionLabelString = (input) => {
+    if (typeof input === "string") return input;
+    if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint") return String(input);
+    if (input === null || input === void 0) return "";
+    if (typeof input === "object") {
+      const labelCandidate = input.label;
+      if (typeof labelCandidate === "string") return labelCandidate;
+      if (typeof labelCandidate === "number" || typeof labelCandidate === "boolean" || typeof labelCandidate === "bigint") return String(labelCandidate);
+      const valueCandidate = input.value;
+      if (typeof valueCandidate === "string") return valueCandidate;
+      if (typeof valueCandidate === "number" || typeof valueCandidate === "boolean" || typeof valueCandidate === "bigint") return String(valueCandidate);
+      try {
+        return JSON.stringify(input);
+      } catch {
+        return "[object Object]";
+      }
+    }
+    return String(input);
+  };
+  const resolveOptionLabel = (option) => {
+    if (typeof getOptionLabel === "function") {
+      try {
+        const customLabel = getOptionLabel(option);
+        return toOptionLabelString(customLabel === void 0 ? option : customLabel);
+      } catch {
+        return toOptionLabelString(option);
+      }
+    }
+    return toOptionLabelString(option);
+  };
+  const defaultRenderOption = (optionProps, option) => {
+    const opt = option;
+    const thumb = opt?.imageUrl ?? opt?.thumb ?? opt?.iconUrl ?? opt?.previewImageUrl;
+    const helperText = typeof opt?.helperText === "string" ? opt.helperText : "";
+    const isSelected = opt?.value === value;
+    return /* @__PURE__ */ createElement(
+      "li",
+      {
+        ...optionProps,
+        key: String(opt?.label ?? opt?.value ?? ""),
+        className: `flex items-center gap-2 px-3 py-2 cursor-pointer ${isSelected ? "bg-[var(--primary)]/10 hover:bg-[var(--primary)]/20" : "hover:bg-[var(--neutralDark2,#1f1d36)]/40"}`
+      },
+      thumb ? /* @__PURE__ */ jsx11("img", { src: thumb, className: "h-8 w-8 rounded object-cover shrink-0", alt: "" }) : /* @__PURE__ */ jsx11("span", { className: "inline-block h-8 w-8 shrink-0" }),
+      /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx11("div", { className: "ellipse-1", children: resolveOptionLabel(opt) }),
+        helperText ? /* @__PURE__ */ jsx11("div", { className: "ellipse-1 text-xs text-[var(--neutralLight3,#9392a1)]", children: helperText }) : null
+      ] })
+    );
+  };
+  const showSuggestedSection = allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
+  const pickerBody = /* @__PURE__ */ jsxs5("div", { className: "flex max-h-[55vh] min-h-[50vh] w-[92vw] max-w-[1100px] flex-col overflow-hidden p-2", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "mb-2 text-[var(--neutralLight2,#cac9d5)]", children: [
+      /* @__PURE__ */ jsx11("div", { className: "text-sm", children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
+      /* @__PURE__ */ jsx11(
+        LSInput,
+        {
+          autoFocus: true,
+          startAdornment: /* @__PURE__ */ jsx11(Search, { style: { width: 18, height: 18 } }),
+          placeholder: t("common.search", "Search"),
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          type: "text",
+          style: { padding: "1rem 0 0" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] text-sm text-[var(--neutralLight3,#9392a1)]", children: [
+      /* @__PURE__ */ jsx11("div", { children: t("commands.variable", "Variable") }),
+      /* @__PURE__ */ jsx11("div", { children: t("commands.description", "Description") }),
+      /* @__PURE__ */ jsx11("div", { children: t("common.value", "Value") })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
+      showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "m-0 mb-2 w-full rounded-sm border-2 border-solid border-[var(--neutralDark4,#393853)] px-2 pb-0 pt-0", children: [
+        /* @__PURE__ */ jsx11("legend", { className: "flex items-center justify-center gap-2 px-2 text-sm text-[var(--neutralLight2,#cac9d5)]", children: t("commands.suggested-variables", "Suggested Variables") }),
+        filteredAllowedVariables.map((definition, idx) => {
+          const variableType = getAllowedVariableVisualType(definition.name);
+          const tree = getAllowedVariableTree(definition);
+          const { displayValue, fullValue } = getVariableValuePreview(getAllowedVariableValue(definition.name) ?? definition.example);
+          const expandable = !!tree && tree.length > 0;
+          const expanded = expandable && isPathExpanded(definition.name);
+          const isLast = idx === filteredAllowedVariables.length - 1;
+          return /* @__PURE__ */ jsxs5(Fragment, { children: [
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: `grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b ${isLast && !expanded ? "border-b-0" : "border-b-[var(--neutralDark4,#393853)]"} pb-2 pt-2 active:opacity-80`,
+                onClick: () => {
+                  if (expandable && !expanded) toggleExpand(definition.name);
+                  else insertVariable(definition.name);
+                },
+                children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", children: [
+                    expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
+                    renderVariableToken(definition.name, variableType, true)
+                  ] }),
+                  /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: getAllowedVariableDescription(definition.name) }),
+                  /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
+                ]
+              }
+            ),
+            expanded && tree && renderValueChildRows(definition.name, tree)
+          ] }, definition.name);
+        })
+      ] }),
+      filteredSystemVariables?.map((variable) => {
+        const variableType = visualTypeFromRecord(variable);
+        const { displayValue, fullValue } = getVariableValuePreview(variable.value);
+        const rootToken = variable.example ?? variable.name;
+        const tree = systemVariableValueTrees.get(variable.name);
+        const expandable = !!tree && tree.length > 0;
+        const expanded = expandable && isPathExpanded(rootToken);
+        return /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: "grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b border-[var(--neutralDark4,#393853)] pb-2 pt-2 last-of-type:border-b-0 active:opacity-80",
+              onClick: () => {
+                if (expandable && !expanded) toggleExpand(rootToken);
+                else insertVariable(rootToken);
+              },
+              children: [
+                /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", children: [
+                  expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
+                  renderVariableToken(variable.name, variableType)
+                ] }),
+                /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: getSystemVariableDescription(variable) }),
+                /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
+              ]
+            }
+          ),
+          expanded && tree && renderValueChildRows(rootToken, tree)
+        ] }, variable.name);
+      })
+    ] })
+  ] });
   const textField = (params = {}) => /* @__PURE__ */ jsx11(
     VariableInputTextField,
     {
+      t,
       params,
       id: variableId.current,
       containerRef,
@@ -1193,19 +1751,21 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       rows,
       maxRows,
       value,
-      onChange,
+      onChange: $disableInputChange ? void 0 : onChange,
       clickedVariableIcon,
       inputProps,
+      allowedVariables,
+      showVariableIcon: !hideVariables,
       ref
     }
   );
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx11(
       Popover,
       {
         anchorEl: containerRef.current,
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
         open: !hideVariables && showVariables,
         onClose: clickedVariableIcon,
         slotProps: {
@@ -1213,58 +1773,59 @@ var LSVariableInputField = forwardRef4((props, ref) => {
             sx: {
               color: "var(--neutralLight2, #cac9d5)",
               backgroundColor: "var(--neutralDark1, #171628)",
-              padding: 1,
+              // Paper has no padding of its own — the picker body's `p-2` is the
+              // single source of internal spacing. Adding paper padding on top of
+              // that compounds the inset and forces premature horizontal scroll.
+              padding: 0,
               border: "1px solid var(--neutralDark4, #393853)"
             }
           }
         },
-        children: /* @__PURE__ */ jsxs5("div", { className: "flex max-h-[55vh] min-h-[50vh] w-[92vw] max-w-[1100px] flex-col overflow-hidden [--variable-custom-color:var(--customVariables,#69ffd2)] [--variable-function-color:var(--functionVariables,var(--semanticPurple,#b489ff))] [--variable-normal-color:var(--normalVariables,var(--semanticBlue,#65b8ff))]", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "mb-4 text-[var(--neutralLight2,#cac9d5)]", children: [
-            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
-            /* @__PURE__ */ jsx11(
-              LSInput,
-              {
-                autoFocus: true,
-                startAdornment: /* @__PURE__ */ jsx11(Search, { style: { width: 18, height: 18 } }),
-                placeholder: t("assets.search", "Search"),
-                value: searchQuery,
-                onChange: (e) => setSearchQuery(e.target.value),
-                type: "text",
-                style: { padding: "1rem 0 0" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(300px,1.5fr)_2fr] gap-8 px-1 text-[var(--neutralLight3,#9392a1)]", children: [
-            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variable", "Variable") }),
-            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.description", "Description") })
-          ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
-            allowedVariableNames.length > 0 && filteredAllowedVariables?.map((variableName) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] items-start gap-8 border-b border-white/10 px-1 py-4 active:opacity-80", onClick: () => insertVariable(variableName), children: [
-              renderVariableToken(variableName, getVariableVisualType(variableName), true),
-              /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: getAllowedVariableDescription(variableName) })
-            ] }, variableName)),
-            filteredSystemVariables?.map((variableKey) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] items-start gap-8 border-b border-white/10 px-1 py-4 active:opacity-80", onClick: () => insertVariable(variableKey), children: [
-              renderVariableToken(variableKey, getVariableVisualType(variableKey)),
-              /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
-            ] }, variableKey))
-          ] })
-        ] })
+        children: pickerBody
       }
     ),
     isAutoComplete ? /* @__PURE__ */ jsx11(
       Autocomplete2,
       {
         disableClearable: true,
-        freeSolo: true,
+        openOnFocus: true,
         includeInputInList: true,
-        onChange: (_e, nextValue) => onChange?.(nextValue?.value ?? nextValue),
-        onInputChange: (_e, nextValue) => onChange?.(nextValue),
+        multiple: $multiple,
+        freeSolo: $freeSolo,
+        disableCloseOnSelect: $disableCloseOnSelect,
+        groupBy: autoCompleteGroupBy,
         options: autoCompleteOptions ?? [],
+        isOptionEqualToValue,
         value,
-        renderOption,
-        getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+        disabled,
+        loading,
+        getOptionLabel: resolveOptionLabel,
+        onChange: (_e, nextValue) => {
+          if ($getFullValueObject) {
+            onChange?.(nextValue);
+            return;
+          }
+          if ($multiple) {
+            const list = Array.isArray(nextValue) ? nextValue : nextValue ? [nextValue] : [];
+            const mapped = list.map((entry) => {
+              if (entry && typeof entry === "object" && "value" in entry) {
+                return entry.value;
+              }
+              return entry;
+            });
+            onChange?.(mapped);
+            return;
+          }
+          if (nextValue && typeof nextValue === "object" && "value" in nextValue) {
+            onChange?.(nextValue.value);
+            return;
+          }
+          onChange?.(nextValue);
+        },
+        onInputChange: $disableInputChange ? void 0 : (_e, nextValue) => onChange?.(nextValue),
         filterOptions: handleFilterOptions,
-        slots: { listbox: ListboxComponent },
+        renderOption: $renderOption ?? renderOption ?? defaultRenderOption,
+        slots: ListboxComponent ? { listbox: ListboxComponent } : void 0,
         slotProps: { listbox: { onScroll: onScrollListBox } },
         onHighlightChange,
         onOpen: onPopupOpen,
@@ -1276,7 +1837,33 @@ var LSVariableInputField = forwardRef4((props, ref) => {
 });
 LSVariableInputField.displayName = "LSVariableInputField";
 var VariableInputTextField = forwardRef4(
-  ({ id, name, label, type, variant, disabled, autoFocus, multiline, placeholder, rows, maxRows, value, onChange, inputProps, clickedVariableIcon, params = {}, containerRef }, ref) => {
+  ({
+    t,
+    id,
+    name,
+    label,
+    type,
+    variant,
+    disabled,
+    autoFocus,
+    multiline,
+    placeholder,
+    rows,
+    maxRows,
+    value,
+    onChange,
+    inputProps,
+    clickedVariableIcon,
+    params = {},
+    containerRef,
+    showVariableIcon
+  }, ref) => {
+    const inputPropsInputProps = inputProps?.InputProps ?? {};
+    const paramsInputProps = params?.InputProps ?? {};
+    const inputPropsSlotInputProps = inputProps?.slotProps?.input ?? {};
+    const paramsSlotInputProps = params?.slotProps?.input ?? {};
+    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment;
+    const endAdornment = paramsInputProps.endAdornment ?? paramsSlotInputProps.endAdornment ?? inputPropsInputProps.endAdornment ?? inputPropsSlotInputProps.endAdornment;
     return /* @__PURE__ */ jsx11(
       LSTextField,
       {
@@ -1295,21 +1882,23 @@ var VariableInputTextField = forwardRef4(
         value,
         fullWidth: true,
         className: `mui-ls-input noMinHeight ${params?.className ?? ""} ${inputProps?.className ?? ""}`.trim(),
-        onChange: (e) => onChange?.(e.target.value),
+        onChange: onChange ? ((e) => onChange(e.target.value)) : void 0,
         ...inputProps,
         ...params,
         InputProps: {
-          ...params?.InputProps ?? {},
-          ...inputProps?.InputProps ?? {},
-          endAdornment: /* @__PURE__ */ jsxs5(Fragment, { children: [
-            params?.slotProps?.input?.endAdornment ?? params?.InputProps?.endAdornment ?? null,
-            /* @__PURE__ */ jsx11(
+          ...inputPropsSlotInputProps,
+          ...inputPropsInputProps,
+          ...paramsSlotInputProps,
+          ...paramsInputProps,
+          startAdornment,
+          endAdornment: /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            endAdornment ?? null,
+            showVariableIcon ? /* @__PURE__ */ jsx11(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx11(
               InputAdornment2,
               {
                 position: "end",
                 onClick: clickedVariableIcon,
                 ref: containerRef,
-                className: "cursor-pointer",
                 sx: {
                   cursor: "pointer",
                   background: "var(--primary)",
@@ -1328,12 +1917,12 @@ var VariableInputTextField = forwardRef4(
                     color: "var(--neutralDark1)"
                   }
                 },
-                children: "{}"
+                children: /* @__PURE__ */ jsx11("span", { className: "font-bold", children: "{}" })
               }
-            )
+            ) }) : null
           ] })
         },
-        ref
+        inputRef: ref
       }
     );
   }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@lumiastream/ui",
-	"version": "0.2.2",
+	"version": "0.2.4-beta.1",
 	"author": "Lumia Stream",
 	"license": "ISC",
 	"description": "Lumia UI Kit",
@@ -52,7 +52,7 @@
 	"dependencies": {
 		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.14.1",
-		"@lumiastream/lumia-translations": "1.15.3",
+		"@lumiastream/lumia-translations": "1.15.4",
 		"@lumiastream/lumia-types": "^3.2.7",
 		"@mui/icons-material": "^9.0.0",
 		"@mui/material": "^9.0.0",