@lumiastream/ui 0.2.5 → 0.2.6

package/dist/index.js

@@ -21,29 +21,57 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/lumia-ui.css
-styleInject(".ls-button,\n.ls-button *,\n.ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-button,\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-button,\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: none;\n  user-select: none;\n}\n.ls-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  border-radius: var(--radiusContainerSm, 0.375rem);\n  border: 1px solid color-mix(in srgb, #fff 10%, transparent);\n  color: var(--neutralLight1, #f4f3ff);\n  font-weight: 500;\n  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);\n  transition:\n    filter 150ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n}\n.ls-button--small {\n  padding-inline: 0.75rem;\n  padding-block: 0.25rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.ls-button--medium {\n  padding-inline: 1rem;\n  padding-block: 0.5rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.ls-button--large {\n  padding-inline: 1.5rem;\n  padding-block: 0.75rem;\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.ls-button:hover {\n  filter: brightness(1.1);\n}\n.ls-button:focus {\n  outline: none;\n}\n.ls-button:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 8px 18px rgba(0, 0, 0, 0.18);\n}\n.ls-button:active {\n  filter: brightness(0.95);\n}\n.ls-button:disabled,\n.ls-button[aria-disabled=true] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-button:disabled:hover,\n.ls-button[aria-disabled=true]:hover {\n  filter: none;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radiusContainerSm, 0.375rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 2fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n");
+styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  min-width: 24px;\n  margin-left: 0.35rem;\n  border-radius: var(--radius, 1rem);\n  background: var(--primary, #ff4076) !important;\n  color: var(--alwayswhite, var(--white, #fff)) !important;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n  user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n  color: currentcolor !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n  filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n  filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n  width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n  position: relative;\n  min-width: 0;\n  width: 100%;\n  min-height: var(--ls-control-height);\n  margin: 0;\n  border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0 0.875rem 0.5rem 0.875rem;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n  display: block;\n  width: auto;\n  max-width: calc(100% - 1rem);\n  margin: 0;\n  padding: 0 0.25rem;\n  color: var(--neutralLight1, var(--white, #fff));\n  font-size: 0.875rem;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n  display: flex;\n  min-width: 0;\n  min-height: calc(var(--ls-control-height) - 14px);\n  align-items: center;\n  gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n  flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n  justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n  min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n  display: block;\n  margin-top: 0.25rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.75rem;\n  line-height: 1.25;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radius, 1rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n");
 
 // src/components/LSButton/LSButton.tsx
+import Button from "@mui/material/Button";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 var LSButton = ({
+  label,
+  disabled = false,
+  loading = false,
+  variant = "contained",
+  extended = 0,
+  color,
   primary = false,
-  size = "medium",
   backgroundColor,
-  label,
+  className,
+  sx,
+  style,
   ...props
 }) => {
-  const background = backgroundColor ?? (primary ? "var(--primary, #ff4076)" : "var(--neutralDark4, #46435f)");
+  const resolvedColor = color ?? (primary ? "primary" : "primary");
+  const muiColor = resolvedColor === "neutral" ? void 0 : resolvedColor;
+  const backgroundSx = backgroundColor ? { backgroundColor, "&:hover": { backgroundColor } } : null;
+  const secondaryOutlinedStyles = resolvedColor === "secondary" && variant === "outlined" ? {
+    color: "var(--white) !important",
+    "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+      color: "inherit"
+    }
+  } : null;
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
-      type: "button",
-      className: [
-        "ls-button",
-        size === "small" ? "ls-button--small" : size === "large" ? "ls-button--large" : "ls-button--medium"
-      ].join(" "),
-      style: { background },
+      disabled: disabled || loading,
+      variant,
+      color: muiColor,
+      style,
+      sx: [
+        { borderRadius: "1rem", transition: "opacity 300ms ease-in-out" },
+        ...backgroundSx ? [backgroundSx] : [],
+        ...Array.isArray(sx) ? sx : sx ? [sx] : [],
+        ...secondaryOutlinedStyles ? [secondaryOutlinedStyles] : []
+      ],
+      className: classNames(
+        "mui-ls-button cursor-pointer rounded-2xl pb-1.5 pt-1.5 hover:opacity-80 svg-current-color",
+        extended ? "pl-12 pr-12 mui-ls-button--extended" : "pl-6 pr-6",
+        `mui-ls-button--${resolvedColor}`,
+        `mui-ls-button--${variant}`,
+        className
+      ),
       ...props,
-      children: label
+      children: loading ? "Loading..." : label
     }
   );
 };
@@ -52,7 +80,7 @@ var LSButton = ({
 import FormControl from "@mui/material/FormControl";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
-import classNames from "classnames";
+import classNames2 from "classnames";
 import { forwardRef } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LSInput = forwardRef(
@@ -149,7 +177,7 @@ var LSInput = forwardRef(
       FormControl,
       {
         variant: "outlined",
-        className: classNames("mui-ls-input", className, {
+        className: classNames2("mui-ls-input", className, {
           noMinHeight: $noMinHeight,
           bypassMuiColor: bypasscolor || bypasscolor === "default"
         }),
@@ -182,7 +210,7 @@ LSInput.displayName = "LSInput";
 
 // src/components/LSSliderInput/LSSliderInput.tsx
 import Slider from "@mui/material/Slider";
-import classNames2 from "classnames";
+import classNames3 from "classnames";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var normalizeSliderValue = (rawValue) => {
@@ -301,7 +329,7 @@ var LSSliderInput = ({
   const controlsRow = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames2("mui-ls-slider-input-row", {
+      className: classNames3("mui-ls-slider-input-row", {
         "mui-ls-slider-input-row--slider": !hideSlider,
         "mui-ls-slider-input-row--input": hideInput
       }),
@@ -342,28 +370,20 @@ var LSSliderInput = ({
               inputMode: stepPrecision > 0 ? "decimal" : "numeric"
             },
             fullWidth: hideSlider ? fullWidth : false,
-            $noMinHeight: !fullWidth,
-            className: hideSlider ? inputProps?.className : `${inputProps?.className ?? ""} small noMinHeight`.trim(),
-            style: hideSlider ? inputProps?.style : { width: 96, maxWidth: 96, flexShrink: 0 },
+            $noMinHeight: false,
+            className: hideSlider ? inputProps?.className : `${inputProps?.className ?? ""} mui-ls-slider-input-value`.trim(),
+            style: hideSlider ? inputProps?.style : { width: 112, maxWidth: 112, flexShrink: 0 },
             ...!hideSlider ? { size: "small" } : {}
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: classNames2("mui-ls-slider-input-root", { "mui-ls-slider-input-root--fullWidth": fullWidth }), children: [
-    /* @__PURE__ */ jsxs(
-      "fieldset",
-      {
-        className: classNames2("mui-ls-slider-input-fieldset", {
-          "mui-ls-slider-input-fieldset--fullWidth": fullWidth
-        }),
-        children: [
-          label && /* @__PURE__ */ jsx3("legend", { className: "mui-ls-slider-input-legend", children: label }),
-          controlsRow
-        ]
-      }
-    ),
+  return /* @__PURE__ */ jsxs("div", { className: "mui-ls-slider-input-root", children: [
+    /* @__PURE__ */ jsxs("fieldset", { className: "mui-ls-slider-input-fieldset", children: [
+      label && /* @__PURE__ */ jsx3("legend", { className: "mui-ls-slider-input-legend", children: label }),
+      controlsRow
+    ] }),
     helperText && /* @__PURE__ */ jsx3("small", { className: "mui-ls-slider-input-helper", children: helperText })
   ] });
 };
@@ -374,8 +394,19 @@ import FormControl2 from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import Select from "@mui/material/Select";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var LSSelect = ({ className = "", style, ...props }) => {
-  const { placeholder, displayEmpty: displayEmptyProp, renderValue: renderValueProp, variant: _variant, MenuProps, ...rest } = props;
+var LSSelect = ({
+  className = "",
+  style,
+  ...props
+}) => {
+  const {
+    placeholder,
+    displayEmpty: displayEmptyProp,
+    renderValue: renderValueProp,
+    variant: _variant,
+    MenuProps,
+    ...rest
+  } = props;
   const labelKey = props.name ?? (typeof props.label === "string" ? props.label : void 0);
   const labelId = props.label && labelKey ? `label_${labelKey}` : void 0;
   const placeholderText = typeof placeholder === "string" ? placeholder : "";
@@ -398,6 +429,7 @@ var LSSelect = ({ className = "", style, ...props }) => {
           backgroundColor: "var(--neutralDark2)",
           color: "var(--neutralLight1)",
           border: "1px solid var(--neutralDark4)",
+          borderRadius: "var(--radius, 1rem)",
           boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
           ...MenuProps?.slotProps?.paper?.sx
         }
@@ -418,6 +450,7 @@ var LSSelect = ({ className = "", style, ...props }) => {
         backgroundColor: "var(--neutralDark2)",
         color: "var(--neutralLight1)",
         border: "1px solid var(--neutralDark4)",
+        borderRadius: "var(--radius, 1rem)",
         boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
         "& .MuiList-root": {
           backgroundColor: "var(--neutralDark2)"
@@ -433,24 +466,39 @@ var LSSelect = ({ className = "", style, ...props }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs2(FormControl2, { variant: "outlined", className: `${className} mui-ls-select-form-control`, sx: { marginBottom: ".3rem", marginTop: ".5rem", minWidth: "100px", width: "100%" }, size: rest.size, style, children: [
-    props.label && /* @__PURE__ */ jsx4(InputLabel, { shrink: true, id: labelId, children: props.label }),
-    /* @__PURE__ */ jsx4(
-      Select,
-      {
-        MenuProps: mergedMenuProps,
-        className: "mui-ls-select",
-        variant: "outlined",
-        labelId,
-        label: props.label,
-        displayEmpty,
-        renderValue,
-        ...rest,
-        value,
-        children: props.children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    FormControl2,
+    {
+      variant: "outlined",
+      className: `${className} mui-ls-select-form-control`,
+      sx: {
+        marginBottom: ".3rem",
+        marginTop: ".5rem",
+        minWidth: "100px",
+        width: "100%"
+      },
+      size: rest.size,
+      style,
+      children: [
+        props.label && /* @__PURE__ */ jsx4(InputLabel, { shrink: true, id: labelId, children: props.label }),
+        /* @__PURE__ */ jsx4(
+          Select,
+          {
+            MenuProps: mergedMenuProps,
+            className: "mui-ls-select",
+            variant: "outlined",
+            labelId,
+            label: props.label,
+            displayEmpty,
+            renderValue,
+            ...rest,
+            value,
+            children: props.children
+          }
+        )
+      ]
+    }
+  );
 };
 LSSelect.displayName = "LSSelect";
 
@@ -459,7 +507,7 @@ import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import { forwardRef as forwardRef2 } from "react";
 import { useController, useFormContext } from "react-hook-form";
-import classNames3 from "classnames";
+import classNames4 from "classnames";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var LSCheckbox = forwardRef2(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
   const CheckboxComponent = Checkbox;
@@ -468,7 +516,7 @@ var LSCheckbox = forwardRef2(({ className = "", checked, inputRef, slotProps, ..
     {
       ...props,
       checked,
-      className: classNames3("ls-checkbox", className, { "Mui-disabled": props.disabled }),
+      className: classNames4("ls-checkbox", className, { "Mui-disabled": props.disabled }),
       ref,
       slotProps: {
         ...slotProps ?? {},
@@ -496,7 +544,7 @@ function LSCheckboxField({
   return /* @__PURE__ */ jsx5(
     FormControlLabel,
     {
-      className: classNames3("ls-checkbox-row", className),
+      className: classNames4("ls-checkbox-row", className),
       labelPlacement,
       disabled,
       control: /* @__PURE__ */ jsx5(
@@ -534,7 +582,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
     right: 0,
     top: "calc(100% + 0.5rem)",
     zIndex: 1e3,
-    borderRadius: "0.5rem",
+    borderRadius: "1rem",
     background: "var(--neutralDark1)",
     padding: "0.5rem",
     boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)"
@@ -545,7 +593,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
     height: inlinePickerHeight,
     minHeight: inlinePickerHeight,
     marginTop: "0.5rem",
-    borderRadius: "0.5rem",
+    borderRadius: "1rem",
     background: "var(--neutralDark1)",
     padding: "0.5rem",
     boxSizing: "border-box",
@@ -675,15 +723,36 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
 import { KeyboardArrowDown } from "@mui/icons-material";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField2 from "@mui/material/TextField";
-import { memo, startTransition, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import {
+  memo,
+  startTransition,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], localFonts = [], onLoadFonts, defaultValue = "Roboto", placeholder = "Select a font", isAlertManager = false, label, helperText }) {
+var LSFontPicker = memo(function LSFontPicker2({
+  value,
+  onChange,
+  fonts = [],
+  localFonts = [],
+  onLoadFonts,
+  defaultValue = "Roboto",
+  placeholder = "Select a font",
+  isAlertManager = false,
+  label,
+  helperText
+}) {
   const AutocompleteComponent = Autocomplete;
   const TextFieldComponent = TextField2;
   const [inputValue, setInputValue] = useState3(value ?? defaultValue);
   const onLoadFontsRef = useRef2(onLoadFonts);
   const onChangeRef = useRef2(onChange);
-  const combinedFonts = useMemo2(() => Array.from(/* @__PURE__ */ new Set([...localFonts, ...fonts])).sort(), [fonts, localFonts]);
+  const combinedFonts = useMemo2(
+    () => Array.from(/* @__PURE__ */ new Set([...localFonts, ...fonts])).sort(),
+    [fonts, localFonts]
+  );
   const currentValue = value ?? defaultValue;
   useEffect3(() => {
     onLoadFontsRef.current = onLoadFonts;
@@ -719,7 +788,9 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
       popupIcon: /* @__PURE__ */ jsx7(KeyboardArrowDown, {}),
       isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
       onChange: (_event, newValue) => {
-        handleValueChange(typeof newValue === "string" ? newValue : `${newValue ?? ""}`);
+        handleValueChange(
+          typeof newValue === "string" ? newValue : `${newValue ?? ""}`
+        );
       },
       onInputChange: (_event, newInputValue, reason) => {
         if (reason === "input" || reason === "clear") {
@@ -734,7 +805,7 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
           sx: {
             background: "var(--neutralDark3)",
             border: "1px solid var(--neutralDark4)",
-            borderRadius: "var(--radiusContainerSm)",
+            borderRadius: "var(--radius, 1rem)",
             boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
             color: "var(--neutralLight1)",
             marginTop: "4px"
@@ -783,7 +854,7 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
           helperText,
           placeholder,
           fullWidth: true,
-          className: "mui-ls-input noMinHeight",
+          className: "mui-ls-input",
           variant: "outlined",
           sx: {
             "& .MuiOutlinedInput-root": {
@@ -803,7 +874,13 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
 // src/components/LSMultiSelect/LSMultiSelect.tsx
 import { MenuItem } from "@mui/material";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, label }) => {
+var LSMultiSelect = ({
+  options,
+  placeholder = "Select...",
+  value,
+  onChange,
+  label
+}) => {
   const handleChange = (event) => {
     const {
       target: { value: value2 }
@@ -821,7 +898,9 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
       onChange: handleChange,
       displayEmpty: true,
       renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "ls-multi-select-value", children: [
-        /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map((val) => options.find((opt) => opt.value === val)?.label ?? val).join(", ") : placeholder }),
+        /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map(
+          (val) => options.find((opt) => opt.value === val)?.label ?? val
+        ).join(", ") : placeholder }),
         /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
       ] }),
       MenuProps: {
@@ -832,6 +911,7 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
               backgroundColor: "var(--neutralDark2)",
               color: "var(--neutralLight1)",
               border: "1px solid var(--neutralDark4)",
+              borderRadius: "var(--radius, 1rem)",
               boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
               backdropFilter: "none",
               opacity: 1,
@@ -854,6 +934,7 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
             opacity: 1,
             maxHeight: "280px !important",
             border: "1px solid var(--neutralDark4)",
+            borderRadius: "var(--radius, 1rem)",
             "& .MuiList-root": {
               backgroundColor: "var(--neutralDark2)"
             }
@@ -877,7 +958,14 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
             }
           },
           children: [
-            /* @__PURE__ */ jsx8(LSCheckbox, { checked: (value ?? []).includes(option.value), tabIndex: -1, disableRipple: true }),
+            /* @__PURE__ */ jsx8(
+              LSCheckbox,
+              {
+                checked: (value ?? []).includes(option.value),
+                tabIndex: -1,
+                disableRipple: true
+              }
+            ),
             /* @__PURE__ */ jsx8("span", { children: option.label })
           ]
         },
@@ -891,16 +979,16 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
 import FormControlLabel2 from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
-import classNames4 from "classnames";
+import classNames5 from "classnames";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var LSRadio = ({ className = "", ...props }) => {
-  return /* @__PURE__ */ jsx9(Radio, { ...props, className: classNames4("ls-radio", className) });
+  return /* @__PURE__ */ jsx9(Radio, { ...props, className: classNames5("ls-radio", className) });
 };
 var LSRadioGroup = ({ selections, className = "", optionClassName = "", row, ...props }) => {
-  return /* @__PURE__ */ jsx9(RadioGroup, { ...props, row, className: classNames4("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx9(RadioGroup, { ...props, row, className: classNames5("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx9(
     FormControlLabel2,
     {
-      className: classNames4("ls-radio-row", optionClassName),
+      className: classNames5("ls-radio-row", optionClassName),
       value: selection.value,
       disabled: selection.disabled,
       control: /* @__PURE__ */ jsx9(LSRadio, {}),
@@ -915,47 +1003,65 @@ LSRadioGroup.displayName = "LSRadioGroup";
 import TextField3 from "@mui/material/TextField";
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var LSTextField = forwardRef3((props, ref) => {
-  const { InputLabelProps, InputProps, slotProps, ...rest } = props;
-  return /* @__PURE__ */ jsx10(
-    TextField3,
-    {
-      ...rest,
-      variant: "outlined",
-      slotProps: {
-        ...slotProps ?? {},
-        input: {
-          ...slotProps?.input ?? {},
-          ...InputProps ?? {},
-          sx: {
-            ...slotProps?.input?.sx ?? {},
-            ...InputProps?.sx ?? {}
+var LSTextField = forwardRef3(
+  (props, ref) => {
+    const { InputLabelProps, InputProps, slotProps, ...rest } = props;
+    return /* @__PURE__ */ jsx10(
+      TextField3,
+      {
+        ...rest,
+        variant: "outlined",
+        className: "mui-ls-input",
+        slotProps: {
+          ...slotProps ?? {},
+          input: {
+            ...slotProps?.input ?? {},
+            ...InputProps ?? {},
+            sx: {
+              ...slotProps?.input?.sx ?? {},
+              ...InputProps?.sx ?? {}
+            }
+          },
+          inputLabel: {
+            ...slotProps?.inputLabel ?? {},
+            shrink: true,
+            ...InputLabelProps ?? {}
           }
         },
-        inputLabel: {
-          ...slotProps?.inputLabel ?? {},
-          shrink: true,
-          ...InputLabelProps ?? {}
-        }
-      },
-      ref
-    }
-  );
-});
+        ref
+      }
+    );
+  }
+);
 LSTextField.displayName = "LSTextField";
 
 // src/components/LSVariableInputField/LSVariableInputField.tsx
-import Autocomplete2, { createFilterOptions } from "@mui/material/Autocomplete";
+import Autocomplete2, {
+  createFilterOptions
+} from "@mui/material/Autocomplete";
 import InputAdornment2 from "@mui/material/InputAdornment";
 import Popover from "@mui/material/Popover";
 import Search from "@mui/icons-material/Search";
-import ArrowRight from "@mui/icons-material/ArrowRight";
+import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
 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,
+  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 }) => {
+var LSVariableInputProvider = ({
+  children,
+  value
+}) => {
   return /* @__PURE__ */ jsx11(LSVariableInputContext.Provider, { value, children });
 };
 var DEFAULT_FUNCTION_VARIABLES = [
@@ -1007,7 +1113,9 @@ var renderPrimitiveValue = (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 ? "..." : ""}]`;
+    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 ? "..." : ""}}`;
@@ -1076,9 +1184,12 @@ var normalizeVariableRecords = (systemVariables) => {
 };
 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" || key === "commands.variable") return "Variable";
-  if (key === "overlay-variables.description" || key === "commands.description") return "Description";
+  if (key === "overlay-variables.variables-description")
+    return "Use variables that will automatically be replaced before sending out the text";
+  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";
@@ -1104,7 +1215,11 @@ var normalizeAllowedDefinitions = (allowedVariables) => {
       variableName = variable.trim();
     } else if (variable && typeof variable === "object") {
       const typedVariable = variable;
-      const candidateName = [typedVariable.name, typedVariable.key, typedVariable.variable].find((value) => typeof value === "string");
+      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;
@@ -1119,10 +1234,13 @@ var normalizeAllowedDefinitions = (allowedVariables) => {
 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 (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(" ");
+    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) => {
@@ -1136,7 +1254,11 @@ var visualTypeRank = (variableType) => {
   return 2;
 };
 var orderItemsByVariableType = (items, getType) => {
-  const grouped = { custom: [], func: [], system: [] };
+  const grouped = {
+    custom: [],
+    func: [],
+    system: []
+  };
   items.forEach((item) => grouped[getType(item)].push(item));
   return [...grouped.custom, ...grouped.func, ...grouped.system];
 };
@@ -1152,7 +1274,8 @@ var humanizeVariableName = (rawName) => {
   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 "ls-variable-token--custom";
+  if (isSuggested && variableType !== "func")
+    return "ls-variable-token--custom";
   if (variableType === "func") return "ls-variable-token--function";
   if (variableType === "system") return "ls-variable-token--system";
   return "ls-variable-token--custom";
@@ -1205,8 +1328,14 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   } = props;
   const t = translate ?? context.translate ?? defaultTranslate;
   const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
-  const variableRecords = useMemo3(() => normalizeVariableRecords(rawSystemVariables), [rawSystemVariables]);
-  const functionVariables = useMemo3(() => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES, [context.functionVariables, functionVariablesProp]);
+  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;
@@ -1214,18 +1343,33 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   const variableId = useRef3(`variable-input-${name ?? "field"}`);
   const [showVariables, setShowVariables] = useState4(false);
   const [searchQuery, setSearchQuery] = useState4("");
-  const functionVariableSet = useMemo3(() => new Set(functionVariables), [functionVariables]);
-  const allowedVariableDefinitions = useMemo3(() => normalizeAllowedDefinitions(allowedVariables), [allowedVariables]);
+  const functionVariableSet = useMemo3(
+    () => new Set(functionVariables),
+    [functionVariables]
+  );
+  const allowedVariableDefinitions = useMemo3(
+    () => normalizeAllowedDefinitions(allowedVariables),
+    [allowedVariables]
+  );
   const allowedVariableDefinitionLookup = useMemo3(() => {
     const lookup = /* @__PURE__ */ new Map();
-    allowedVariableDefinitions.forEach((definition) => lookup.set(definition.name, definition));
+    allowedVariableDefinitions.forEach(
+      (definition) => lookup.set(definition.name, definition)
+    );
     return lookup;
   }, [allowedVariableDefinitions]);
-  const allowedVariableNames = useMemo3(() => allowedVariableDefinitions.map((definition) => definition.name), [allowedVariableDefinitions]);
+  const allowedVariableNames = useMemo3(
+    () => allowedVariableDefinitions.map((definition) => definition.name),
+    [allowedVariableDefinitions]
+  );
   const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableDefinitions);
   const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
-  const [expandedPaths, setExpandedPaths] = useState4(() => /* @__PURE__ */ new Set());
-  const [autoExpandPaths, setAutoExpandPaths] = useState4(() => /* @__PURE__ */ new Set());
+  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) => {
@@ -1247,7 +1391,10 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   useEffect4(() => {
     requestTranslations?.();
   }, [requestTranslations]);
-  const isPathExpanded = useCallback2((path) => expandedPaths.has(path) || autoExpandPaths.has(path), [autoExpandPaths, expandedPaths]);
+  const isPathExpanded = useCallback2(
+    (path) => expandedPaths.has(path) || autoExpandPaths.has(path),
+    [autoExpandPaths, expandedPaths]
+  );
   const toggleExpand = useCallback2(
     (path) => {
       const expanded = expandedPaths.has(path) || autoExpandPaths.has(path);
@@ -1293,12 +1440,16 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       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 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 });
+        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;
     },
@@ -1307,7 +1458,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   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)
+        Object.values(variableRecords).map(
+          (variable) => typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : ""
+        ).filter((origin) => origin.length > 0)
       )
     );
   }, [variableRecords]);
@@ -1321,10 +1474,18 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       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);
+        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}_`));
+      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)
@@ -1342,7 +1503,13 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       );
       return inferredOrigins.length === 1 ? inferredOrigins[0] : void 0;
     },
-    [allowedVariableDefinitionLookup, allowedVariableOrigin, knownOrigins, namespaceHas, variableRecords]
+    [
+      allowedVariableDefinitionLookup,
+      allowedVariableOrigin,
+      knownOrigins,
+      namespaceHas,
+      variableRecords
+    ]
   );
   const resolveVariableDescription = useCallback2(
     (variableName, fallbackDescription, origin) => {
@@ -1350,8 +1517,10 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       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;
+      if (typeof defaultTranslated === "string" && defaultTranslated !== defaultTranslationKey)
+        return defaultTranslated;
+      if (fallbackDescription && fallbackDescription.trim().length > 0)
+        return fallbackDescription;
       return humanizeVariableName(variableName);
     },
     [resolveTranslationFromNamespace, t]
@@ -1359,9 +1528,16 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   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 t(`variables.${variable.description}`, void 0, {
+          example: variable.example,
+          interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" }
+        });
       }
-      return resolveVariableDescription(variable?.name ?? "", variable?.description, variable?.origin);
+      return resolveVariableDescription(
+        variable?.name ?? "",
+        variable?.description,
+        variable?.origin
+      );
     },
     [resolveVariableDescription, t]
   );
@@ -1382,9 +1558,19 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       if (variable) return getSystemVariableDescription(variable);
       const fromDefinition = allowedVariableDefinitionLookup.get(variableName);
       const origin = resolveAllowedVariableOrigin(variableName);
-      return resolveVariableDescription(variableName, fromDefinition?.description, origin);
+      return resolveVariableDescription(
+        variableName,
+        fromDefinition?.description,
+        origin
+      );
     },
-    [allowedVariableDefinitionLookup, getSystemVariableDescription, resolveAllowedVariableOrigin, resolveVariableDescription, variableRecords]
+    [
+      allowedVariableDefinitionLookup,
+      getSystemVariableDescription,
+      resolveAllowedVariableOrigin,
+      resolveVariableDescription,
+      variableRecords
+    ]
   );
   const getAllowedVariableValue = useCallback2(
     (variableName) => {
@@ -1440,14 +1626,21 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     };
     if (allowedVariableNames.length > 0) {
       if (!query) {
-        setFilteredAllowedVariables(orderItemsByVariableType(allowedVariableDefinitions, (definition) => getAllowedVariableVisualType(definition.name)));
+        setFilteredAllowedVariables(
+          orderItemsByVariableType(
+            allowedVariableDefinitions,
+            (definition) => getAllowedVariableVisualType(definition.name)
+          )
+        );
       } else {
         const nameMatches = [];
         const descMatches = [];
         const nestedMatches = [];
         allowedVariableDefinitions.forEach((definition) => {
           const nameLower = definition.name?.toLowerCase();
-          const descLower = getAllowedVariableDescription(definition.name)?.toLowerCase();
+          const descLower = getAllowedVariableDescription(
+            definition.name
+          )?.toLowerCase();
           if (nameLower?.includes(query)) {
             nameMatches.push(definition);
             return;
@@ -1461,8 +1654,16 @@ var LSVariableInputField = forwardRef4((props, ref) => {
             nestedMatches.push(definition);
           }
         });
-        const sortByDef = (items) => sortItemsByVariableTypeThenName(items, (definition) => getAllowedVariableVisualType(definition.name), (definition) => definition.name);
-        setFilteredAllowedVariables([...sortByDef(nameMatches), ...sortByDef(descMatches), ...sortByDef(nestedMatches)]);
+        const sortByDef = (items) => sortItemsByVariableTypeThenName(
+          items,
+          (definition) => getAllowedVariableVisualType(definition.name),
+          (definition) => definition.name
+        );
+        setFilteredAllowedVariables([
+          ...sortByDef(nameMatches),
+          ...sortByDef(descMatches),
+          ...sortByDef(nestedMatches)
+        ]);
       }
     } else {
       setFilteredAllowedVariables([]);
@@ -1477,7 +1678,12 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     const allRecords = Object.values(variableRecords);
     if (!query) {
       const visible = allRecords.filter(shouldKeep);
-      setFilteredSystemVariables(orderItemsByVariableType(visible, (variable) => visualTypeFromRecord(variable)));
+      setFilteredSystemVariables(
+        orderItemsByVariableType(
+          visible,
+          (variable) => visualTypeFromRecord(variable)
+        )
+      );
     } else {
       const nameMatches = [];
       const descMatches = [];
@@ -1500,8 +1706,16 @@ var LSVariableInputField = forwardRef4((props, ref) => {
           nestedMatches.push(variable);
         }
       });
-      const sortSys = (items) => sortItemsByVariableTypeThenName(items, (variable) => visualTypeFromRecord(variable), (variable) => variable?.name ?? "");
-      setFilteredSystemVariables([...sortSys(nameMatches), ...sortSys(descMatches), ...sortSys(nestedMatches)]);
+      const sortSys = (items) => sortItemsByVariableTypeThenName(
+        items,
+        (variable) => visualTypeFromRecord(variable),
+        (variable) => variable?.name ?? ""
+      );
+      setFilteredSystemVariables([
+        ...sortSys(nameMatches),
+        ...sortSys(descMatches),
+        ...sortSys(nestedMatches)
+      ]);
     }
     setAutoExpandPaths(nextAutoExpand);
   }, [
@@ -1532,10 +1746,23 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     afterFilter?.(filtered);
     return filtered;
   };
-  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`, children: [
-    /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
-    variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__badge", title: t("variables.functionvariables", "Function variables"), children: "fx" })
-  ] });
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
+      children: [
+        /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
+        variableType === "func" && /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: "ls-variable-token__badge",
+            title: t("variables.functionvariables", "Function variables"),
+            children: "fx"
+          }
+        )
+      ]
+    }
+  );
   const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx11(
     "button",
     {
@@ -1547,7 +1774,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
       "aria-label": expanded ? "Collapse" : "Expand",
       "aria-expanded": expanded,
-      children: /* @__PURE__ */ jsx11(ArrowRight, { style: { width: 14, height: 14 } })
+      children: /* @__PURE__ */ jsx11(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
     }
   );
   const renderExpandSpacer = () => /* @__PURE__ */ jsx11("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
@@ -1555,6 +1782,19 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
     return { displayValue, fullValue };
   };
+  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx11(
+    "input",
+    {
+      className: "ls-variable-picker__value-input",
+      title: fullValue,
+      readOnly: true,
+      value: fullValue || displayValue,
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      onKeyDown: (e) => e.stopPropagation(),
+      "aria-label": t("common.value", "Value")
+    }
+  );
   const renderValueChildRows = (rootToken, nodes) => nodes.map((node) => {
     const fullToken = `${rootToken}.${node.relativePath}`;
     const expanded = node.isExpandable && isPathExpanded(fullToken);
@@ -1569,12 +1809,25 @@ var LSVariableInputField = forwardRef4((props, ref) => {
             else insertVariable(fullToken);
           },
           children: [
-            /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", style: { paddingLeft: `${node.depth * 1.25}rem` }, children: [
-              node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
-              /* @__PURE__ */ jsx11("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` }) })
-            ] }),
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: "ls-variable-picker__token-cell",
+                style: { paddingLeft: `${node.depth * 1.25}rem` },
+                children: [
+                  node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
+                  /* @__PURE__ */ jsx11(
+                    "div",
+                    {
+                      className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
+                      children: /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: node.displayKey }),
-            /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
+            /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
           ]
         }
       ),
@@ -1583,15 +1836,18 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   });
   const toOptionLabelString = (input) => {
     if (typeof input === "string") return input;
-    if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint") return String(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);
+      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);
+      if (typeof valueCandidate === "number" || typeof valueCandidate === "boolean" || typeof valueCandidate === "bigint")
+        return String(valueCandidate);
       try {
         return JSON.stringify(input);
       } catch {
@@ -1604,7 +1860,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     if (typeof getOptionLabel === "function") {
       try {
         const customLabel = getOptionLabel(option);
-        return toOptionLabelString(customLabel === void 0 ? option : customLabel);
+        return toOptionLabelString(
+          customLabel === void 0 ? option : customLabel
+        );
       } catch {
         return toOptionLabelString(option);
       }
@@ -1621,9 +1879,20 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       {
         ...optionProps,
         key: String(opt?.label ?? opt?.value ?? ""),
-        className: `ls-variable-option${isSelected ? " ls-variable-option--selected" : ""}`
+        className: [
+          optionProps.className,
+          "ls-variable-option",
+          isSelected ? "ls-variable-option--selected" : ""
+        ].filter(Boolean).join(" ")
       },
-      thumb ? /* @__PURE__ */ jsx11("img", { src: thumb, className: "ls-variable-option__thumb", alt: "" }) : /* @__PURE__ */ jsx11("span", { className: "ls-variable-option__thumb ls-variable-option__thumb--placeholder" }),
+      thumb ? /* @__PURE__ */ jsx11(
+        "img",
+        {
+          src: thumb,
+          className: "ls-variable-option__thumb",
+          alt: ""
+        }
+      ) : null,
       /* @__PURE__ */ jsxs5("div", { className: "ls-variable-option__body", children: [
         /* @__PURE__ */ jsx11("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
         helperText ? /* @__PURE__ */ jsx11("div", { className: "ls-variable-option__helper", children: helperText }) : null
@@ -1633,22 +1902,24 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   const showSuggestedSection = allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
   const pickerBody = /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
     /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
-      /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__intro-text", children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
+      /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__intro-text", 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 } }),
+          startAdornment: /* @__PURE__ */ jsx11(Search, { style: { color: "#fff", width: 20, height: 20 } }),
           placeholder: t("common.search", "Search"),
           value: searchQuery,
           onChange: (e) => setSearchQuery(e.target.value),
-          type: "text",
-          style: { padding: "1rem 0 0" }
+          type: "text"
         }
       )
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__header", children: [
-      /* @__PURE__ */ jsx11("div", { children: t("commands.variable", "Variable") }),
+      /* @__PURE__ */ jsx11("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
       /* @__PURE__ */ jsx11("div", { children: t("commands.description", "Description") }),
       /* @__PURE__ */ jsx11("div", { children: t("common.value", "Value") })
     ] }),
@@ -1656,9 +1927,13 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "ls-variable-picker__field", children: [
         /* @__PURE__ */ jsx11("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
         filteredAllowedVariables.map((definition, idx) => {
-          const variableType = getAllowedVariableVisualType(definition.name);
+          const variableType = getAllowedVariableVisualType(
+            definition.name
+          );
           const tree = getAllowedVariableTree(definition);
-          const { displayValue, fullValue } = getVariableValuePreview(getAllowedVariableValue(definition.name) ?? definition.example);
+          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;
@@ -1669,7 +1944,8 @@ var LSVariableInputField = forwardRef4((props, ref) => {
               {
                 className: rowCls,
                 onClick: () => {
-                  if (expandable && !expanded) toggleExpand(definition.name);
+                  if (expandable && !expanded)
+                    toggleExpand(definition.name);
                   else insertVariable(definition.name);
                 },
                 children: [
@@ -1678,7 +1954,14 @@ var LSVariableInputField = forwardRef4((props, ref) => {
                     renderVariableToken(definition.name, variableType, true)
                   ] }),
                   /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
-                  /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
+                  /* @__PURE__ */ jsx11(
+                    "div",
+                    {
+                      className: "ls-variable-picker__value",
+                      title: fullValue,
+                      children: renderVariableValueInput(displayValue, fullValue)
+                    }
+                  )
                 ]
               }
             ),
@@ -1688,7 +1971,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       ] }),
       filteredSystemVariables?.map((variable) => {
         const variableType = visualTypeFromRecord(variable);
-        const { displayValue, fullValue } = getVariableValuePreview(variable.value);
+        const { displayValue, fullValue } = getVariableValuePreview(
+          variable.value
+        );
         const rootToken = variable.example ?? variable.name;
         const tree = systemVariableValueTrees.get(variable.name);
         const expandable = !!tree && tree.length > 0;
@@ -1708,7 +1993,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
                   renderVariableToken(variable.name, variableType)
                 ] }),
                 /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
-                /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
+                /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
               ]
             }
           ),
@@ -1739,7 +2024,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       clickedVariableIcon,
       inputProps,
       allowedVariables,
-      showVariableIcon: !hideVariables,
+      showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
       ref
     }
   );
@@ -1761,7 +2046,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
               // 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)"
+              border: "1px solid var(--neutralDark4, #393853)",
+              borderRadius: "var(--radius, 1rem)",
+              overflow: "hidden"
             }
           }
         },
@@ -1810,7 +2097,55 @@ var LSVariableInputField = forwardRef4((props, ref) => {
         filterOptions: handleFilterOptions,
         renderOption: $renderOption ?? renderOption ?? defaultRenderOption,
         slots: ListboxComponent ? { listbox: ListboxComponent } : void 0,
-        slotProps: { listbox: { onScroll: onScrollListBox } },
+        slotProps: {
+          popper: {
+            className: "ls-variable-autocomplete-popper"
+          },
+          paper: {
+            className: "ls-variable-autocomplete-paper",
+            sx: {
+              border: "1px solid var(--neutralDark4, var(--cardborder, #393853))",
+              borderRadius: "var(--radius, 1rem)",
+              backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))",
+              color: "var(--neutralLight1, var(--white, #fff))",
+              boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+              overflow: "hidden"
+            }
+          },
+          listbox: {
+            className: "ls-variable-autocomplete-listbox",
+            onScroll: onScrollListBox,
+            sx: {
+              padding: "0.25rem 0",
+              backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))",
+              color: "var(--neutralLight1, var(--white, #fff))",
+              "& .MuiAutocomplete-option": {
+                display: "flex",
+                minHeight: 44,
+                alignItems: "center",
+                padding: "0.625rem 1rem",
+                color: "var(--neutralLight1, var(--white, #fff))",
+                fontSize: "1rem",
+                lineHeight: 1.35,
+                transition: "background-color 120ms ease, color 120ms ease"
+              },
+              "& .MuiAutocomplete-option:hover, & .MuiAutocomplete-option.Mui-focused, & .MuiAutocomplete-option[data-focus='true'], & .MuiAutocomplete-option[aria-selected='true']": {
+                backgroundColor: "var(--cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)))",
+                color: "var(--neutralLight1, var(--white, #fff))"
+              }
+            }
+          },
+          popupIndicator: {
+            className: "ls-variable-autocomplete-popup-indicator",
+            sx: {
+              color: "var(--neutralLight1, var(--white, #fff))",
+              "& svg": {
+                color: "var(--neutralLight1, var(--white, #fff))",
+                fill: "currentColor"
+              }
+            }
+          }
+        },
         onHighlightChange,
         onOpen: onPopupOpen,
         onClose: onPopupClose,
@@ -1846,7 +2181,9 @@ var VariableInputTextField = forwardRef4(
     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 explicitStartAdornment = inputProps?.startAdornment;
+    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx11(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
+    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment ?? resolvedExplicitStartAdornment;
     const endAdornment = paramsInputProps.endAdornment ?? paramsSlotInputProps.endAdornment ?? inputPropsInputProps.endAdornment ?? inputPropsSlotInputProps.endAdornment;
     return /* @__PURE__ */ jsx11(
       LSTextField,
@@ -1855,7 +2192,7 @@ var VariableInputTextField = forwardRef4(
         name,
         label,
         type,
-        color: "secondary",
+        color: "primary",
         variant,
         disabled,
         autoFocus,
@@ -1865,8 +2202,8 @@ var VariableInputTextField = forwardRef4(
         maxRows,
         value,
         fullWidth: true,
-        className: `mui-ls-input noMinHeight ${params?.className ?? ""} ${inputProps?.className ?? ""}`.trim(),
-        onChange: onChange ? ((e) => onChange(e.target.value)) : void 0,
+        className: `mui-ls-input ${params?.className ?? ""} ${inputProps?.className ?? ""}`.trim(),
+        onChange: onChange ? (e) => onChange(e.target.value) : void 0,
         ...inputProps,
         ...params,
         InputProps: {
@@ -1877,16 +2214,22 @@ var VariableInputTextField = forwardRef4(
           startAdornment,
           endAdornment: /* @__PURE__ */ jsxs5(Fragment2, { children: [
             endAdornment ?? null,
-            showVariableIcon ? /* @__PURE__ */ jsx11(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx11(
-              InputAdornment2,
+            showVariableIcon ? /* @__PURE__ */ jsx11(
+              Tooltip,
               {
-                position: "end",
-                onClick: clickedVariableIcon,
-                ref: containerRef,
-                className: "ls-variable-input-adornment",
-                children: "{}"
+                title: t("chatbot.allowed-variables", "Allowed Variables"),
+                children: /* @__PURE__ */ jsx11(
+                  InputAdornment2,
+                  {
+                    position: "end",
+                    onClick: clickedVariableIcon,
+                    ref: containerRef,
+                    className: "ls-variable-input-adornment",
+                    children: "{}"
+                  }
+                )
               }
-            ) }) : null
+            ) : null
           ] })
         },
         inputRef: ref