@lumiastream/ui 0.8.7 → 0.8.9

package/dist/components.js

@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/lumia-ui.css
-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-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\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 .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\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-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !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-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n  max-height: none !important;\n}\n.ls-color-picker__gradient {\n  color: var(--neutralLight1, var(--white, #fff)) !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 !important;\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__row.ls-variable-picker__example-description {\n  display: block;\n  cursor: default;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: var(--neutralLight2, #cac9d5);\n  overflow-wrap: break-word;\n  line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n  opacity: 1;\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--suggested {\n  color: var(--suggestedVariables, #ffb469);\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-highlight__layer {\n  position: absolute;\n  margin: 0;\n  border: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  pointer-events: none;\n  background: transparent;\n  color: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  z-index: 0;\n}\n.ls-variable-highlight__token {\n  border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n  color: var(--customVariables, #69ffd2);\n  background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n  background: color-mix(in srgb, var(--suggestedVariables, #ffb469) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n  position: fixed;\n  z-index: 2000;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  max-width: 320px;\n  padding: 6px 10px;\n  border-radius: 8px;\n  background: var(--neutralDark1, #171628);\n  border: 1px solid var(--neutralDark4, #393853);\n  color: var(--neutralLight2, #cac9d5);\n  font-size: 0.75rem;\n  line-height: 1.3;\n  pointer-events: none;\n  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\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.ls-chat-message {\n  position: relative;\n  font-size: 0.95em;\n  line-height: 1.4;\n  color: var(--white, var(--neutralLight1, #fff));\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.ls-chat-message img {\n  display: inline-block;\n}\n.ls-chat-message__reply {\n  display: block;\n  margin-bottom: 0.15em;\n  font-size: 0.82em;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n  vertical-align: middle;\n}\n.ls-chat-message__avatar {\n  width: 1.3em;\n  height: 1.3em;\n  border-radius: 9999px;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site {\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n  width: 1.2em;\n  height: 1.2em;\n  vertical-align: middle;\n}\n.ls-chat-message__time {\n  margin-right: 0.35em;\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__badges {\n  vertical-align: middle;\n}\n.ls-chat-message__badges img {\n  height: 1.05em;\n  vertical-align: middle;\n  margin-right: 0.25em;\n}\n.ls-chat-message__username {\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n  cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-chat-message__text {\n  vertical-align: middle;\n}\n.ls-chat-message__text img {\n  vertical-align: middle;\n}\n.ls-chat-message__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.ls-chat-message__modbar {\n  display: flex;\n  overflow: hidden;\n  border-radius: 0.75rem;\n  background-color: var(--separator, #0a0821);\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n  background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n  color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n  display: flex;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 1em;\n  border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n  border-left: 4px solid var(--primary, #ff4076);\n  border-radius: 1em;\n  background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n  color: var(--white, var(--neutralLight1, #fff));\n  padding: 1em;\n  line-height: 1.35;\n}\n.ls-eventlist-item__main {\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  min-width: 0;\n}\n.ls-eventlist-item__identity {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5em;\n  min-width: 1.5em;\n  height: 1.5em;\n  overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n  border-radius: 1em;\n  background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ls-eventlist-item__username {\n  min-width: 0;\n  font-weight: 700;\n  font-size: 0.875em;\n  word-break: break-all;\n}\n.ls-eventlist-item__amount {\n  flex-shrink: 0;\n  padding: 0.05em 0.5em;\n  border-radius: 1em;\n  background-color: color-mix(in srgb, currentColor 16%, transparent);\n  font-weight: 700;\n  font-size: 0.75em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__body {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__message {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n  min-width: 0;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-eventlist-item__time {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.875em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  align-self: center;\n  gap: 0.5em;\n  flex-shrink: 0;\n}\n.ls-modqueue-item {\n  display: flex;\n  align-items: stretch;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n  padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n  display: flex;\n  height: 4rem;\n  width: 4rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  color: var(--primary, #ff4076);\n  font-size: 1.75rem;\n  line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n}\n.ls-modqueue-item__body {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 9999px;\n  border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n  font-weight: 700;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 12rem;\n}\n.ls-modqueue-item__command {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  padding: 0.05rem 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n  font-size: 0.875rem;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-modqueue-item__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n  padding: 0;\n  border-radius: 0.5rem;\n  transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n  background-color: transparent;\n  opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n}\n.ls-modlog {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n  display: flex;\n  justify-content: flex-end;\n}\n.ls-modlog__clear {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 0;\n  border-radius: 0.75rem;\n  background: transparent;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n  color: var(--white, #fff);\n}\n.ls-modlog__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.375rem;\n  overflow: auto;\n}\n.ls-modlog__row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n  background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-modlog__avatar {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 9999px;\n}\n.ls-modlog__title {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.375rem;\n  padding: 0.05rem 0.4rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--ls-modlog-accent, var(--primary, #ff4076));\n  background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.6875rem;\n  font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.35;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n  flex: 1;\n}\n.ls-songreq__empty {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.75rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n  height: 3.5rem;\n  width: 3.5rem;\n  flex-shrink: 0;\n  border-radius: 0.75rem;\n  object-fit: cover;\n}\n.ls-songreq__nowbody {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n.ls-songreq__title {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__artist {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n  overflow: hidden;\n  font-size: 0.6875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n  margin-top: 0.375rem;\n  height: 0.375rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n  height: 100%;\n  border-radius: 9999px;\n  background-color: var(--success, #1db954);\n  transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-songreq__btn {\n  display: inline-flex;\n  height: 2rem;\n  width: 2rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background: transparent;\n  font-size: 0.875rem;\n  line-height: 1;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-songreq__queue {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n}\n.ls-songreq__queuehead {\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: auto;\n}\n.ls-songreq__queueempty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.375rem 0.5rem;\n  transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.ls-songreq__itembody {\n  min-width: 0;\n  flex: 1;\n}\n.ls-songreq__itemtitle {\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-modqueue__search-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.5rem;\n  border: 1px solid currentcolor;\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n  opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n  color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n}\n.ls-modqueue__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-modqueue__readonly {\n  font-size: 0.625rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n  flex-shrink: 0;\n}\n.ls-chatbox {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ls-chatbox__list {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n.ls-chatbox__jump {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  backdrop-filter: blur(4px);\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n  transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n  margin-left: 0.25rem;\n  border-radius: 9999px;\n  background-color: var(--primary, #ff4076);\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n  flex: 2 1 0%;\n  min-width: 100px;\n  width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n  flex: 1 1 0%;\n  min-width: 7.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n  flex: 0 1 auto;\n  min-width: 5.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n  height: 55px;\n  flex-shrink: 0;\n}\n.ls-panel {\n  --ls-panel-padding: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: var(--ls-panel-bg, #1b1834);\n  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n}\n.ls-panel__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n  min-width: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-panel__title--label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-panel__close {\n  display: flex;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.5rem;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-panel__body {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n  padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n  flex-shrink: 0;\n  padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ls-modal--absolute {\n  position: absolute;\n}\n.ls-modal__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n  backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n  position: relative;\n  width: 100%;\n  max-width: var(--ls-modal-max-width, min(560px, 92vw));\n  max-height: 85vh;\n}\n.ls-modal__card--fit {\n  width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog {\n  margin-top: 0.5rem;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog__card {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  border-radius: 1rem;\n  outline: none;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n  padding: 1rem;\n}\n.ls-dialog__card--full {\n  border-radius: 0;\n}\n.ls-dialog__top {\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n.ls-dialog__top--full {\n  margin-top: 2rem;\n}\n.ls-dialog__top-side {\n  flex: 1;\n}\n.ls-dialog__title {\n  font-size: 1.25rem;\n  color: var(--white, #fff);\n}\n.ls-dialog__close {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  user-select: none;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-dialog__close-label {\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: auto;\n}\n.ls-dialog__bottom {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-bottom: 1rem;\n}\n.ls-eventlist {\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n  line-height: 1.35;\n}\n.ls-eventlist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5em;\n  overflow-y: auto;\n}\n.ls-eventlist__row {\n  flex-shrink: 0;\n  animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  border-radius: 1em;\n  padding: 1em;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n  width: 1.6em;\n  height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1.5em);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ls-streamstatus {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: auto;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.625rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n  position: relative;\n  display: inline-flex;\n  height: 0.75rem;\n  width: 0.75rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n  animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ls-streamstatus__indicator-dot {\n  position: relative;\n  height: 0.75rem;\n  width: 0.75rem;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n  background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n.ls-streamstatus__status-label {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n  display: flex;\n  flex-shrink: 0;\n  align-items: stretch;\n  gap: 0.5rem;\n}\n.ls-streamstatus__total {\n  display: flex;\n  flex-shrink: 0;\n  flex-direction: column;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n  font-size: 1.875rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n  margin-top: 0.25rem;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.25rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n  display: grid;\n  flex-shrink: 0;\n  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n  gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 0.125rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n  display: inline-flex;\n  margin-left: auto;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n  overflow: hidden;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n  width: 10px;\n  flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-viewerslist__head {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-viewerslist__count {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n  min-width: 0;\n  flex: 1;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  color: var(--white, #fff);\n  outline: none;\n}\n.ls-viewerslist__search:focus {\n  border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n  color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n  min-width: 0;\n  flex: 1;\n}\n.ls-viewerslist__hint {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.125rem;\n  overflow: auto;\n}\n.ls-viewerslist__group {\n  margin-top: 0.375rem;\n  flex-shrink: 0;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n  margin-top: 0;\n}\n.ls-viewerslist__viewer {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.25rem 0.375rem;\n  transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.ls-viewerslist__platform {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-viewerslist__username {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n  box-sizing: border-box;\n}\n.ls-shortcutdock {\n  display: grid;\n  width: 100%;\n  align-content: start;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-shortcutdock--disabled {\n  opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n  position: relative;\n  min-width: 0;\n}\n.ls-shortcutdock__btn {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n  background-color: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  color: var(--white, #fff);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n  border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n  cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.15rem;\n  line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n  font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n  width: 2rem;\n  height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n  width: 60%;\n  height: 60%;\n  border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  padding-inline: 0.125rem;\n  text-align: center;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1.2;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n  font-size: clamp(1rem, 1.4vw, 1.5rem);\n  font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n  width: 100%;\n  height: 100%;\n  font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n  width: 60%;\n  height: 60%;\n}\n.ls-shortcutdock__remove {\n  position: absolute;\n  top: -0.375rem;\n  right: -0.375rem;\n  z-index: 1;\n  display: flex;\n  height: 1.25rem;\n  width: 1.25rem;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 9999px;\n  background-color: var(--error, #fd5454);\n  padding: 0;\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: var(--white, #fff);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n  transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n  opacity: 0.8;\n}\n.ls-shortcutdock__add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  font-size: 1.5rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n  color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n  box-sizing: border-box;\n}\n.ls-goals {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ls-goals__empty {\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  font-size: 0.875rem;\n}\n.ls-goals__icon {\n  display: flex;\n  align-self: center;\n  align-items: center;\n  line-height: 1;\n}\n.ls-goals__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 600;\n  color: var(--white, #fff);\n}\n.ls-goals__value {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n  opacity: 0.6;\n}\n.ls-goals__bar {\n  margin-top: 0.375rem;\n  height: 0.625rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n  height: 100%;\n  border-radius: 9999px;\n  background-image:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n      var(--ls-goals-accent, var(--primary, #ff4076)));\n  transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n  flex-shrink: 0;\n  min-width: 2.75rem;\n  text-align: right;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n  display: inline-block;\n  height: 1.15em;\n  width: auto;\n  max-width: 1.5em;\n  vertical-align: middle;\n  object-fit: contain;\n}\n.ls-chatbox__platform-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n  border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n  border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n  background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius, 1rem);\n  border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n  background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n  background-color: var(--background, #151230);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n  position: relative;\n  display: flex;\n  min-height: 2.75rem;\n  width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  padding-inline: 0.5rem;\n}\n.ls-widget__side {\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-widget__side--right {\n  margin-left: auto;\n}\n.ls-widget__title {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n}\n.ls-widget__btn {\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.375rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n  font: inherit;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-widget__body {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: auto;\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.mui-ls-select-form-control,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.MuiFormControl-root.mui-ls-input,\n.MuiFormControl-root.mui-ls-select-form-control,\n.MuiFormControl-root.mui-ls-slider-input-root {\n  margin-top: 0.875rem;\n  padding-top: 0;\n}\n.MuiFormControl-root.mui-ls-select-form-control {\n  min-width: 100px;\n  margin-bottom: 0.3rem;\n}\n.mui-ls-slider-input-root .MuiFormControl-root.mui-ls-input,\n.mui-ls-slider-input-style .MuiFormControl-root.mui-ls-input,\n.MuiFormControl-root.mui-ls-slider-input-value.mui-ls-input {\n  margin-top: 0;\n  padding-top: 0;\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 .MuiTextField-root {\n  width: 100%;\n  margin: 0;\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-ls-slider-input-control.MuiOutlinedInput-root,\n.mui-ls-slider-input-control .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 .MuiOutlinedInput-notchedOutline,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-control .MuiOutlinedInput-notchedOutline {\n  border: 2px solid var(--cardborder, var(--neutralDark4, #393853));\n}\n.mui-ls-input .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,\n.mui-ls-select:hover .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-control.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !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  background-color: var(--background, var(--neutralDark1, #18162f));\n  color: var(--white, var(--neutralLight1, #fff));\n  min-height: var(--ls-control-height);\n}\n.mui-ls-slider-input-control.MuiInputBase-root {\n  background-color: transparent;\n  color: var(--white, var(--neutralLight1, #fff));\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-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\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  background-color: var(--background, var(--neutralDark1, #18162f));\n  color: var(--white, var(--neutralLight1, #fff));\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 .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root,\n.mui-ls-slider-input-root .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  transform: translate(14px, -10px) scale(0.875);\n  font-size: 1rem;\n  line-height: 1.4375em;\n  color: var(--white, var(--neutralLight1, #fff)) !important;\n}\n.mui-ls-input .MuiOutlinedInput-notchedOutline legend,\n.mui-ls-select-form-control .MuiOutlinedInput-notchedOutline legend,\n.mui-ls-slider-input-control .MuiOutlinedInput-notchedOutline legend {\n  font-size: 0.875rem;\n}\n.mui-ls-input legend,\n.mui-ls-select-form-control legend,\n.mui-ls-slider-input-root legend {\n  max-width: unset !important;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg,\n.mui-ls-slider-input-root .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-select .MuiSvgIcon-root {\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.mui-autocomplete-select button {\n  box-shadow: none;\n}\n.mui-autocomplete-select .MuiSvgIcon-root {\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-select-form-control .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-select-form-control .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-control.Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-root .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-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !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-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n  max-height: none !important;\n}\n.ls-color-picker__gradient {\n  color: var(--neutralLight1, var(--white, #fff)) !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-control.MuiOutlinedInput-root {\n  height: var(--ls-control-height);\n  min-height: var(--ls-control-height);\n  padding: 0 1rem;\n}\n.mui-ls-slider-input-control > .mui-ls-slider-input-content {\n  box-sizing: border-box;\n  display: flex;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  align-items: center;\n  padding: 0 !important;\n}\n.mui-ls-slider-input-control > .mui-ls-slider-input-content:focus {\n  outline: none;\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-row .MuiSlider-root {\n  height: 3px;\n  padding: 8px 0;\n}\n.mui-ls-slider-input-row .MuiSlider-track,\n.mui-ls-slider-input-row .MuiSlider-rail {\n  height: 3px;\n  border: 0;\n}\n.mui-ls-slider-input-row .MuiSlider-thumb {\n  width: 18px;\n  height: 18px;\n}\n.mui-ls-slider-input-style input::-webkit-outer-spin-button,\n.mui-ls-slider-input-style input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.mui-ls-slider-input-style input {\n  max-width: 100px;\n  padding: 0.25rem 0.5rem;\n}\n.mui-ls-slider-input-style.noMargin .MuiTextField-root {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.mui-ls-slider-input-content .mui-ls-slider-input-style {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  flex: 1 1 auto;\n  width: 100%;\n  grid-template-columns: minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: 0.5rem;\n  height: 100%;\n  min-width: 0;\n  transform: none !important;\n}\n.mui-ls-slider-input-info {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  line-height: 1;\n}\n.mui-ls-slider-input-info svg {\n  display: block;\n  width: 14px;\n  height: 14px;\n}\n.mui-ls-slider-input-content .mui-ls-slider-input-style--input-only {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n.mui-ls-slider-input-track {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  height: 2rem;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  border-radius: 9999px;\n}\n.mui-ls-slider-input-track--popout {\n  padding-right: 0;\n}\n.mui-ls-slider-input-track--start-icon {\n  gap: 0.5rem;\n  padding-left: 0;\n}\n.mui-ls-slider-input-track--end-icon {\n  gap: 0.5rem;\n  padding-right: 0;\n}\n.mui-ls-slider-input-style .MuiSlider-root {\n  width: 100%;\n  min-width: 0;\n  height: 3px;\n  padding: 8px 0;\n}\n.mui-ls-slider-input-style .MuiSlider-track,\n.mui-ls-slider-input-style .MuiSlider-rail {\n  height: 3px;\n  border: 0;\n}\n.mui-ls-slider-input-style .MuiSlider-thumb {\n  width: 18px;\n  height: 18px;\n}\n.mui-ls-slider-input-style .MuiSlider-valueLabel {\n  z-index: 3;\n}\n.mui-ls-slider-input-style .ls-slider-input-icon {\n  display: inline-flex;\n  width: 20px;\n  min-width: 20px;\n  height: 20px;\n  min-height: 20px;\n  align-items: center;\n  justify-content: center;\n}\n.mui-ls-slider-input-style .ls-slider-input-icon svg {\n  width: 20px;\n  min-width: 20px;\n  height: 20px;\n  min-height: 20px;\n}\n.mui-ls-slider-input-style .ls-custom-range-input,\n.ls-custom-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 6px;\n  border-radius: 15px;\n  background: var(--cardborder, var(--neutralDark4, #393853));\n  cursor: pointer;\n  outline: none;\n}\n.mui-ls-slider-input-style .ls-custom-range-input::-webkit-slider-thumb,\n.ls-custom-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 50%;\n  background-color: var(--white, #fff);\n  transition: 0.2s ease-in-out;\n}\n.mui-ls-slider-input-style .ls-custom-range-input::-moz-range-thumb,\n.ls-custom-range-input::-moz-range-thumb {\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 50%;\n  background-color: var(--white, #fff);\n  transition: 0.2s ease-in-out;\n}\n.mui-ls-slider-input-style .ls-custom-range-input::-webkit-slider-thumb:hover,\n.ls-custom-range-input::-webkit-slider-thumb:hover {\n  box-shadow: 0 0 0 10px var(--primaryShadow, rgba(255, 64, 118, 0.18));\n}\n.mui-ls-slider-input-style .ls-custom-range-input:active::-webkit-slider-thumb,\n.mui-ls-slider-input-style .ls-custom-range-input:focus::-webkit-slider-thumb,\n.ls-custom-range-input:active::-webkit-slider-thumb,\n.ls-custom-range-input:focus::-webkit-slider-thumb {\n  box-shadow: 0 0 0 13px var(--primaryShadow, rgba(255, 64, 118, 0.18));\n}\n.mui-ls-slider-input-style .ls-custom-range-input::-moz-range-thumb:hover,\n.ls-custom-range-input::-moz-range-thumb:hover {\n  box-shadow: 0 0 0 10px var(--primaryShadow, rgba(255, 64, 118, 0.18));\n}\n.mui-ls-slider-input-style .ls-custom-range-input:active::-moz-range-thumb,\n.mui-ls-slider-input-style .ls-custom-range-input:focus::-moz-range-thumb,\n.ls-custom-range-input:active::-moz-range-thumb,\n.ls-custom-range-input:focus::-moz-range-thumb {\n  box-shadow: 0 0 0 13px var(--primaryShadow, rgba(255, 64, 118, 0.18));\n}\n.mui-ls-slider-input-style .ls-slider-value-input {\n  width: 96px !important;\n  height: 36px !important;\n  min-height: 36px !important;\n}\n.mui-ls-slider-input-style .ls-slider-value-input .MuiInputBase-root {\n  height: 36px !important;\n  max-width: 96px !important;\n  min-height: 36px !important;\n  border-radius: 15px !important;\n}\n.mui-ls-slider-input-style .ls-slider-value-input .MuiOutlinedInput-notchedOutline {\n  border-radius: 15px !important;\n}\n.mui-ls-slider-input-style .ls-slider-value-input input {\n  max-width: none;\n  padding: 0.35rem 0.75rem;\n  text-align: left;\n}\n.mui-ls-slider-input-adornment {\n  justify-self: center;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n}\n.mui-ls-slider-input-style .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\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 !important;\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__row.ls-variable-picker__example-description {\n  display: block;\n  cursor: default;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: var(--neutralLight2, #cac9d5);\n  overflow-wrap: break-word;\n  line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n  opacity: 1;\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--suggested {\n  color: var(--suggestedVariables, #ffb469);\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-highlight__layer {\n  position: absolute;\n  margin: 0;\n  border: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  pointer-events: none;\n  background: transparent;\n  color: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  z-index: 0;\n}\n.ls-variable-highlight__token {\n  border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n  color: var(--customVariables, #69ffd2);\n  background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n  background: color-mix(in srgb, var(--suggestedVariables, #ffb469) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n  position: fixed;\n  z-index: 2000;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  max-width: 320px;\n  padding: 6px 10px;\n  border-radius: 8px;\n  background: var(--neutralDark1, #171628);\n  border: 1px solid var(--neutralDark4, #393853);\n  color: var(--neutralLight2, #cac9d5);\n  font-size: 0.75rem;\n  line-height: 1.3;\n  overflow-wrap: anywhere;\n  pointer-events: none;\n  white-space: pre-line;\n  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\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.ls-chat-message {\n  position: relative;\n  font-size: 0.95em;\n  line-height: 1.4;\n  color: var(--white, var(--neutralLight1, #fff));\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.ls-chat-message img {\n  display: inline-block;\n}\n.ls-chat-message__reply {\n  display: block;\n  margin-bottom: 0.15em;\n  font-size: 0.82em;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n  vertical-align: middle;\n}\n.ls-chat-message__avatar {\n  width: 1.3em;\n  height: 1.3em;\n  border-radius: 9999px;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site {\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n  width: 1.2em;\n  height: 1.2em;\n  vertical-align: middle;\n}\n.ls-chat-message__time {\n  margin-right: 0.35em;\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__badges {\n  vertical-align: middle;\n}\n.ls-chat-message__badges img {\n  height: 1.05em;\n  vertical-align: middle;\n  margin-right: 0.25em;\n}\n.ls-chat-message__username {\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n  cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-chat-message__text {\n  vertical-align: middle;\n}\n.ls-chat-message__text img {\n  vertical-align: middle;\n}\n.ls-chat-message__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.ls-chat-message__modbar {\n  display: flex;\n  overflow: hidden;\n  border-radius: 0.75rem;\n  background-color: var(--separator, #0a0821);\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n  background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n  color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n  display: flex;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 1em;\n  border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n  border-left: 4px solid var(--primary, #ff4076);\n  border-radius: 1em;\n  background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n  color: var(--white, var(--neutralLight1, #fff));\n  padding: 1em;\n  line-height: 1.35;\n}\n.ls-eventlist-item__main {\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  min-width: 0;\n}\n.ls-eventlist-item__identity {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5em;\n  min-width: 1.5em;\n  height: 1.5em;\n  overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n  border-radius: 1em;\n  background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ls-eventlist-item__username {\n  min-width: 0;\n  font-weight: 700;\n  font-size: 0.875em;\n  word-break: break-all;\n}\n.ls-eventlist-item__amount {\n  flex-shrink: 0;\n  padding: 0.05em 0.5em;\n  border-radius: 1em;\n  background-color: color-mix(in srgb, currentColor 16%, transparent);\n  font-weight: 700;\n  font-size: 0.75em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__body {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__message {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n  min-width: 0;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-eventlist-item__time {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.875em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  align-self: center;\n  gap: 0.5em;\n  flex-shrink: 0;\n}\n.ls-modqueue-item {\n  display: flex;\n  align-items: stretch;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n  padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n  display: flex;\n  height: 4rem;\n  width: 4rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  color: var(--primary, #ff4076);\n  font-size: 1.75rem;\n  line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n}\n.ls-modqueue-item__body {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 9999px;\n  border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n  font-weight: 700;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 12rem;\n}\n.ls-modqueue-item__command {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  padding: 0.05rem 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n  font-size: 0.875rem;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-modqueue-item__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n  padding: 0;\n  border-radius: 0.5rem;\n  transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n  background-color: transparent;\n  opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n}\n.ls-modlog {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n  display: flex;\n  justify-content: flex-end;\n}\n.ls-modlog__clear {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 0;\n  border-radius: 0.75rem;\n  background: transparent;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n  color: var(--white, #fff);\n}\n.ls-modlog__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.375rem;\n  overflow: auto;\n}\n.ls-modlog__row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n  background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-modlog__avatar {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 9999px;\n}\n.ls-modlog__title {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.375rem;\n  padding: 0.05rem 0.4rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--ls-modlog-accent, var(--primary, #ff4076));\n  background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.6875rem;\n  font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.35;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n  flex: 1;\n}\n.ls-songreq__empty {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.75rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n  height: 3.5rem;\n  width: 3.5rem;\n  flex-shrink: 0;\n  border-radius: 0.75rem;\n  object-fit: cover;\n}\n.ls-songreq__nowbody {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n.ls-songreq__title {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__artist {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n  overflow: hidden;\n  font-size: 0.6875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n  margin-top: 0.375rem;\n  height: 0.375rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n  height: 100%;\n  border-radius: 9999px;\n  background-color: var(--success, #1db954);\n  transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-songreq__btn {\n  display: inline-flex;\n  height: 2rem;\n  width: 2rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background: transparent;\n  font-size: 0.875rem;\n  line-height: 1;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-songreq__queue {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n}\n.ls-songreq__queuehead {\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: auto;\n}\n.ls-songreq__queueempty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.375rem 0.5rem;\n  transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.ls-songreq__itembody {\n  min-width: 0;\n  flex: 1;\n}\n.ls-songreq__itemtitle {\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-modqueue__search-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.5rem;\n  border: 1px solid currentcolor;\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n  opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n  color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n}\n.ls-modqueue__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-modqueue__readonly {\n  font-size: 0.625rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n  flex-shrink: 0;\n}\n.ls-chatbox {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ls-chatbox__list {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n.ls-chatbox__jump {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  backdrop-filter: blur(4px);\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n  transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n  margin-left: 0.25rem;\n  border-radius: 9999px;\n  background-color: var(--primary, #ff4076);\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n  flex: 2 1 0%;\n  min-width: 100px;\n  width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n  flex: 1 1 0%;\n  min-width: 7.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n  flex: 0 1 auto;\n  min-width: 5.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n  height: 55px;\n  flex-shrink: 0;\n}\n.ls-panel {\n  --ls-panel-padding: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: var(--ls-panel-bg, #1b1834);\n  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n}\n.ls-panel__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n  min-width: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-panel__title--label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-panel__close {\n  display: flex;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.5rem;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-panel__body {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n  padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n  flex-shrink: 0;\n  padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ls-modal--absolute {\n  position: absolute;\n}\n.ls-modal__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n  backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n  position: relative;\n  width: 100%;\n  max-width: var(--ls-modal-max-width, min(560px, 92vw));\n  max-height: 85vh;\n}\n.ls-modal__card--fit {\n  width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog {\n  margin-top: 0.5rem;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog__card {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  border-radius: 1rem;\n  outline: none;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n  padding: 1rem;\n}\n.ls-dialog__card--full {\n  border-radius: 0;\n}\n.ls-dialog__top {\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n.ls-dialog__top--full {\n  margin-top: 2rem;\n}\n.ls-dialog__top-side {\n  flex: 1;\n}\n.ls-dialog__title {\n  font-size: 1.25rem;\n  color: var(--white, #fff);\n}\n.ls-dialog__close {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  user-select: none;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-dialog__close-label {\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: auto;\n}\n.ls-dialog__bottom {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-bottom: 1rem;\n}\n.ls-eventlist {\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n  line-height: 1.35;\n}\n.ls-eventlist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5em;\n  overflow-y: auto;\n}\n.ls-eventlist__row {\n  flex-shrink: 0;\n  animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  border-radius: 1em;\n  padding: 1em;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n  width: 1.6em;\n  height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1.5em);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ls-streamstatus {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: auto;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.625rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n  position: relative;\n  display: inline-flex;\n  height: 0.75rem;\n  width: 0.75rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n  animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ls-streamstatus__indicator-dot {\n  position: relative;\n  height: 0.75rem;\n  width: 0.75rem;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n  background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n.ls-streamstatus__status-label {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n  display: flex;\n  flex-shrink: 0;\n  align-items: stretch;\n  gap: 0.5rem;\n}\n.ls-streamstatus__total {\n  display: flex;\n  flex-shrink: 0;\n  flex-direction: column;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n  font-size: 1.875rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n  margin-top: 0.25rem;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.25rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n  display: grid;\n  flex-shrink: 0;\n  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n  gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 0.125rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n  display: inline-flex;\n  margin-left: auto;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n  overflow: hidden;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n  width: 10px;\n  flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-viewerslist__head {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-viewerslist__count {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n  min-width: 0;\n  flex: 1;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  color: var(--white, #fff);\n  outline: none;\n}\n.ls-viewerslist__search:focus {\n  border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n  color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n  min-width: 0;\n  flex: 1;\n}\n.ls-viewerslist__hint {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.125rem;\n  overflow: auto;\n}\n.ls-viewerslist__group {\n  margin-top: 0.375rem;\n  flex-shrink: 0;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n  margin-top: 0;\n}\n.ls-viewerslist__viewer {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.25rem 0.375rem;\n  transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.ls-viewerslist__platform {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-viewerslist__username {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n  box-sizing: border-box;\n}\n.ls-shortcutdock {\n  display: grid;\n  width: 100%;\n  align-content: start;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-shortcutdock--disabled {\n  opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n  position: relative;\n  min-width: 0;\n}\n.ls-shortcutdock__btn {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n  background-color: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  color: var(--white, #fff);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n  border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n  cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.15rem;\n  line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n  font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n  width: 2rem;\n  height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n  width: 60%;\n  height: 60%;\n  border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  padding-inline: 0.125rem;\n  text-align: center;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1.2;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n  font-size: clamp(1rem, 1.4vw, 1.5rem);\n  font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n  width: 100%;\n  height: 100%;\n  font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n  width: 60%;\n  height: 60%;\n}\n.ls-shortcutdock__remove {\n  position: absolute;\n  top: -0.375rem;\n  right: -0.375rem;\n  z-index: 1;\n  display: flex;\n  height: 1.25rem;\n  width: 1.25rem;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 9999px;\n  background-color: var(--error, #fd5454);\n  padding: 0;\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: var(--white, #fff);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n  transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n  opacity: 0.8;\n}\n.ls-shortcutdock__add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  font-size: 1.5rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n  color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n  box-sizing: border-box;\n}\n.ls-goals {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ls-goals__empty {\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  font-size: 0.875rem;\n}\n.ls-goals__icon {\n  display: flex;\n  align-self: center;\n  align-items: center;\n  line-height: 1;\n}\n.ls-goals__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 600;\n  color: var(--white, #fff);\n}\n.ls-goals__value {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n  opacity: 0.6;\n}\n.ls-goals__bar {\n  margin-top: 0.375rem;\n  height: 0.625rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n  height: 100%;\n  border-radius: 9999px;\n  background-image:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n      var(--ls-goals-accent, var(--primary, #ff4076)));\n  transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n  flex-shrink: 0;\n  min-width: 2.75rem;\n  text-align: right;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n  display: inline-block;\n  height: 1.15em;\n  width: auto;\n  max-width: 1.5em;\n  vertical-align: middle;\n  object-fit: contain;\n}\n.ls-chatbox__platform-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n  border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n  border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n  background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius, 1rem);\n  border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n  background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n  background-color: var(--background, #151230);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n  position: relative;\n  display: flex;\n  min-height: 2.75rem;\n  width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  padding-inline: 0.5rem;\n}\n.ls-widget__side {\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-widget__side--right {\n  margin-left: auto;\n}\n.ls-widget__title {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n}\n.ls-widget__btn {\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.375rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n  font: inherit;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-widget__body {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: auto;\n}\n");
 
 // src/components/LSButton/LSButton.tsx
 import Button from "@mui/material/Button";
@@ -208,11 +208,23 @@ var LSInput = forwardRef(
 );
 LSInput.displayName = "LSInput";
 
-// src/components/LSSliderInput/LSSliderInput.tsx
+// src/components/LSSlider/LSSlider.tsx
 import Slider from "@mui/material/Slider";
-import classNames3 from "classnames";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var LSSlider = ({ color, sx, ...props }) => {
+  const validColor = color && ["primary", "secondary", "error", "info", "success", "warning"].includes(color) ? color : void 0;
+  const resolvedSx = [{ color: "var(--white, #fff)" }, ...Array.isArray(sx) ? sx : sx ? [sx] : []];
+  return /* @__PURE__ */ jsx3(Slider, { ...props, color: validColor, sx: resolvedSx });
+};
+
+// src/components/LSSliderInput/LSSliderInput.tsx
+import FormControl2 from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import InputLabel from "@mui/material/InputLabel";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef as forwardRef2, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var normalizeSliderValue = (rawValue) => {
   if (typeof rawValue === "number") {
     return Number.isFinite(rawValue) ? rawValue : 0;
@@ -227,173 +239,290 @@ var normalizeSliderValue = (rawValue) => {
   }
   return 0;
 };
-var LSSliderInput = ({
-  name,
-  value,
-  defaultValue,
-  isFloat,
-  isMiliseconds,
-  isFloatMiliseconds,
-  label,
-  inline,
-  hasInfo,
-  infoOpen,
-  infoClose,
-  max = Number.MAX_SAFE_INTEGER,
-  min = 0,
-  step = 1,
-  type = "number",
-  inputAfterText,
-  onChange,
-  inputProps = {},
-  helperText,
-  fullWidth = false,
-  hideInput = false,
-  hideSlider = false,
-  valueLabelFormat,
-  ...rest
-}) => {
-  const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
-  const actualToDisplay = useCallback(
-    (input) => {
-      const numericValue = normalizeSliderValue(input);
-      if (!isValueFloat) {
-        return numericValue;
-      }
-      const divisor = isFloatMiliseconds ? 1e3 : 1;
-      return Number((numericValue / divisor).toFixed(1));
-    },
-    [isFloatMiliseconds, isValueFloat]
-  );
-  const displayStep = useMemo(() => actualToDisplay(step), [actualToDisplay, step]);
-  const resolvedDefaultValue = defaultValue ?? 0;
-  const [displayValue, setDisplayValue] = useState(() => actualToDisplay(defaultValue ?? value ?? resolvedDefaultValue));
-  const displayMaximum = useMemo(() => actualToDisplay(max), [actualToDisplay, max]);
-  const displayMinimum = useMemo(() => actualToDisplay(min), [actualToDisplay, min]);
-  const sliderValue = typeof displayValue === "number" ? Math.min(displayMaximum, Math.max(displayMinimum, displayValue)) : displayMinimum;
-  const stepPrecision = useMemo(() => {
-    const stepString = String(displayStep);
-    const decimalIndex = stepString.indexOf(".");
-    return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
-  }, [displayStep]);
-  useEffect(() => {
-    if (value !== void 0) {
-      setDisplayValue(actualToDisplay(value));
-    }
-  }, [actualToDisplay, value]);
-  const normalizeDisplayValue = useCallback(
-    (input) => {
-      const bounded = Math.min(displayMaximum, Math.max(displayMinimum, input));
-      if (!Number.isFinite(displayStep) || displayStep <= 0) {
-        return bounded;
-      }
-      const snapped = Math.round((bounded - displayMinimum) / displayStep) * displayStep + displayMinimum;
-      return Number(snapped.toFixed(stepPrecision));
-    },
-    [displayMaximum, displayMinimum, displayStep, stepPrecision]
-  );
-  const handleInputChange = useCallback(
-    ({ target: { value: inputValue } }) => {
-      setDisplayValue(inputValue ?? "");
-      if (inputValue === "" || inputValue === null) {
-        if (typeof onChange === "function") {
-          onChange(void 0);
+var getDecimalPlaces = (stepValue) => {
+  if (!stepValue || stepValue >= 1) {
+    return 0;
+  }
+  const stepString = stepValue.toString();
+  const decimalIndex = stepString.indexOf(".");
+  return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
+};
+var InfoIcon = () => /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx4(
+  "path",
+  {
+    d: "M7 0C3.1402 0 0 3.1402 0 7C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7C14 3.1402 10.8598 0 7 0ZM7.7 11.2H6.3V9.8H7.7V11.2ZM8.3832 7.7805C8.246 7.8911 8.1137 7.9968 8.0087 8.1018C7.7231 8.3867 7.7007 8.6457 7.7 8.6569V8.75H6.3V8.6331C6.3 8.5505 6.3203 7.8092 7.0182 7.1113C7.1547 6.9748 7.3241 6.8362 7.5019 6.692C8.0157 6.2755 8.3531 5.9717 8.3531 5.5531C8.34497 5.19947 8.19875 4.86308 7.94574 4.61588C7.69273 4.36869 7.35303 4.23034 6.99931 4.23043C6.64559 4.23052 6.30595 4.36905 6.05307 4.61637C5.80019 4.8637 5.65415 5.20017 5.6462 5.5538H4.2462C4.2462 4.0355 5.4817 2.8 7 2.8C8.5183 2.8 9.7538 4.0355 9.7538 5.5538C9.7538 6.6717 8.9285 7.3388 8.3832 7.7805Z",
+    fill: "currentColor"
+  }
+) });
+var SliderInputContent = forwardRef2(
+  ({ className, children, ownerState, inputRef, value, defaultValue, ...props }, ref) => {
+    const resolvedRef = ref ?? inputRef;
+    return /* @__PURE__ */ jsx4("div", { ...props, ref: resolvedRef, className: `${className ?? ""} mui-ls-slider-input-content`.trim(), role: "group", children });
+  }
+);
+SliderInputContent.displayName = "SliderInputContent";
+var LSSliderInput = forwardRef2(
+  ({
+    name,
+    value,
+    defaultValue,
+    isFloat,
+    isMiliseconds,
+    isFloatMiliseconds,
+    label,
+    helperText,
+    info,
+    hasInfo,
+    infoOpen,
+    infoClose,
+    max = Number.MAX_SAFE_INTEGER,
+    min = 0,
+    sliderMin,
+    sliderMax,
+    step = 1,
+    allowAnyDecimal,
+    type = "number",
+    inputAfterText,
+    endAdornment,
+    onChange,
+    sliderProps = {},
+    inputProps = {},
+    color,
+    startIcon,
+    endIcon,
+    inPopout,
+    hideInput = false,
+    hideSlider = false,
+    fullWidth = false,
+    valueLabelDisplay = "auto",
+    valueLabelFormat,
+    ...rest
+  }, ref) => {
+    const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
+    const rangeUnit = typeof (endAdornment ?? inputAfterText) === "string" && String(endAdornment ?? inputAfterText).trim().length ? ` ${endAdornment ?? inputAfterText}` : "";
+    const actualSliderMin = sliderMin ?? min;
+    const actualSliderMax = sliderMax ?? max;
+    const actualToDisplay = useCallback(
+      (input) => {
+        const numericValue = normalizeSliderValue(input);
+        if (allowAnyDecimal) {
+          return numericValue;
         }
-        return;
-      }
-      const numericValue = Number(inputValue);
-      if (Number.isNaN(numericValue)) {
-        return;
-      }
-      const normalizedDisplayValue = normalizeDisplayValue(numericValue);
-      const updatedValue = isFloatMiliseconds ? normalizedDisplayValue * 1e3 : normalizedDisplayValue;
-      const upperBound = typeof max === "number" ? max : Number.MAX_SAFE_INTEGER;
-      const lowerBound = typeof min === "number" ? min : 0;
-      const isValid = updatedValue >= lowerBound && updatedValue <= upperBound;
-      if (isValid && typeof onChange === "function") {
-        onChange(updatedValue);
+        if (isFloatMiliseconds) {
+          const decimalPlaces2 = getDecimalPlaces(step);
+          return Number((numericValue / 1e3).toFixed(Math.max(1, decimalPlaces2)));
+        }
+        const decimalPlaces = getDecimalPlaces(step);
+        if (decimalPlaces > 0) {
+          return Number(numericValue.toFixed(decimalPlaces));
+        }
+        return isValueFloat ? Number(numericValue.toFixed(1)) : numericValue;
+      },
+      [allowAnyDecimal, isFloatMiliseconds, isValueFloat, step]
+    );
+    const resolvedDefaultValue = defaultValue ?? 0;
+    const [actualValue, setActualValue] = useState(() => normalizeSliderValue(value ?? resolvedDefaultValue));
+    const [displayValue, setDisplayValue] = useState(() => actualToDisplay(value ?? resolvedDefaultValue));
+    const [rangeError, setRangeError] = useState(null);
+    const displayStep = useMemo(() => actualToDisplay(step), [actualToDisplay, step]);
+    const displayMaximum = useMemo(() => actualToDisplay(max), [actualToDisplay, max]);
+    const displayMinimum = useMemo(() => actualToDisplay(min), [actualToDisplay, min]);
+    const inputStep = allowAnyDecimal ? "any" : displayStep;
+    const sliderColor = color === "secondary" ? "secondary" : "primary";
+    useEffect(() => {
+      if (value !== void 0) {
+        const normalizedValue = normalizeSliderValue(value);
+        setActualValue(normalizedValue);
+        setDisplayValue(actualToDisplay(normalizedValue));
+        setRangeError(null);
       }
-    },
-    [isFloatMiliseconds, max, min, normalizeDisplayValue, onChange]
-  );
-  const handleSliderChange = useCallback(
-    (_, sliderInputValue) => {
-      const numericValue = typeof sliderInputValue === "number" ? sliderInputValue : sliderInputValue[0];
-      const normalizedDisplayValue = normalizeDisplayValue(numericValue);
-      setDisplayValue(normalizedDisplayValue);
-      const nextValue = isFloatMiliseconds ? normalizedDisplayValue * 1e3 : normalizedDisplayValue;
+    }, [actualToDisplay, value]);
+    const buildRangeError = useCallback(
+      (updatedValue) => {
+        if (Number.isNaN(updatedValue)) {
+          return null;
+        }
+        if (updatedValue < min) {
+          return `Min ${displayMinimum}${rangeUnit}`;
+        }
+        if (updatedValue > max) {
+          return `Max ${displayMaximum}${rangeUnit}`;
+        }
+        return null;
+      },
+      [displayMaximum, displayMinimum, max, min, rangeUnit]
+    );
+    const handleInputChange = useCallback(
+      (event, nextValue) => {
+        const inputValue = nextValue ?? event?.target?.value ?? "";
+        setDisplayValue(inputValue);
+        if (inputValue === "" || inputValue === null || inputValue === void 0) {
+          setRangeError(null);
+          return;
+        }
+        const rawValue = Number(inputValue);
+        if (Number.isNaN(rawValue)) {
+          setRangeError(null);
+          return;
+        }
+        const updatedValue = Number(isFloatMiliseconds ? rawValue * 1e3 : rawValue);
+        const nextRangeError = buildRangeError(updatedValue);
+        setRangeError(nextRangeError);
+        if (!nextRangeError) {
+          setActualValue(updatedValue);
+          onChange?.(updatedValue);
+        }
+      },
+      [buildRangeError, isFloatMiliseconds, onChange]
+    );
+    const handleSliderChanging = useCallback((_, sliderInputValue) => {
+      const nextValue = normalizeSliderValue(Array.isArray(sliderInputValue) ? sliderInputValue[0] : sliderInputValue);
+      setActualValue(nextValue);
+      setDisplayValue(actualToDisplay(nextValue));
+      setRangeError(null);
+    }, [actualToDisplay]);
+    const handleSliderChanged = useCallback((_, sliderInputValue) => {
+      const nextValue = normalizeSliderValue(Array.isArray(sliderInputValue) ? sliderInputValue[0] : sliderInputValue ?? actualValue);
+      setActualValue(nextValue);
+      setDisplayValue(actualToDisplay(nextValue));
+      setRangeError(null);
       onChange?.(nextValue);
-    },
-    [isFloatMiliseconds, normalizeDisplayValue, onChange]
-  );
-  const controlsRow = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames3("mui-ls-slider-input-row", {
-        "mui-ls-slider-input-row--slider": !hideSlider,
-        "mui-ls-slider-input-row--input": hideInput
-      }),
-      children: [
-        !hideSlider && /* @__PURE__ */ jsx3(
-          Slider,
-          {
-            value: sliderValue,
-            onChange: handleSliderChange,
-            onBlur: rest.onBlur,
-            color: "primary",
-            valueLabelDisplay: "auto",
-            valueLabelFormat: (v) => valueLabelFormat?.(v) ?? `${v}${inputAfterText ?? ""}`,
-            min: displayMinimum,
-            max: displayMaximum,
-            step: displayStep,
-            sx: { flex: 1, minWidth: 0 }
-          }
-        ),
-        !hideInput && /* @__PURE__ */ jsx3(
-          LSInput,
-          {
-            ...rest,
-            ...inputProps,
-            type,
-            name,
-            onChange: (_event, nextValue) => handleInputChange({ target: { value: nextValue ?? "" } }),
-            value: displayValue ?? "",
-            inputAfterText,
-            slotProps: {
-              ...inputProps?.slotProps ?? {},
-              htmlInput: {
-                ...inputProps?.slotProps?.htmlInput ?? {},
-                min: displayMinimum,
-                max: displayMaximum,
-                step: displayStep,
-                inputMode: stepPrecision > 0 ? "decimal" : "numeric"
+    }, [actualToDisplay, actualValue, onChange]);
+    const sliderProgress = useMemo(() => {
+      const range = actualSliderMax - actualSliderMin;
+      if (!Number.isFinite(range) || range <= 0) {
+        return 0;
+      }
+      return Math.min(100, Math.max(0, (actualValue - actualSliderMin) / range * 100));
+    }, [actualSliderMax, actualSliderMin, actualValue]);
+    const resolvedHelperText = rangeError ? void 0 : inputProps?.helperText;
+    const resolvedError = rangeError ? true : inputProps?.error;
+    const { sx: sliderSx, className: sliderClassName, style: sliderStyle, disabled: sliderDisabled, ...sliderRestProps } = sliderProps;
+    const resolvedSliderSx = [
+      { flex: 1, minWidth: 0, color: "var(--white, #fff)" },
+      ...Array.isArray(sliderSx) ? sliderSx : sliderSx ? [sliderSx] : []
+    ];
+    const inputValueClassName = `${inputProps?.className ?? ""} ls-slider-value-input mui-ls-slider-input-value`.trim();
+    const htmlInputProps = {
+      ...inputProps?.slotProps?.htmlInput ?? {},
+      ...inputProps?.inputProps ?? {},
+      name,
+      min: displayMinimum,
+      max: displayMaximum,
+      step: inputStep,
+      inputMode: typeof inputStep === "number" && inputStep % 1 !== 0 ? "decimal" : "numeric"
+    };
+    const showInfoIcon = Boolean(info || hasInfo);
+    const labelId = label && name ? `${name}-slider-label` : void 0;
+    const sliderInputId = name ? `${name}-slider-input` : void 0;
+    const sliderControls = /* @__PURE__ */ jsxs("div", { className: `mui-ls-slider-input-style ${hideSlider ? "mui-ls-slider-input-style--input-only" : ""} ${label ? "noMargin" : ""}`, children: [
+      !hideSlider && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: [
+            "mui-ls-slider-input-track",
+            inPopout ? "mui-ls-slider-input-track--popout" : "",
+            startIcon ? "mui-ls-slider-input-track--start-icon" : "",
+            endIcon ? "mui-ls-slider-input-track--end-icon" : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            startIcon && /* @__PURE__ */ jsx4("span", { className: "ls-slider-input-icon", children: startIcon }),
+            inPopout ? /* @__PURE__ */ jsx4(
+              "input",
+              {
+                className: `ls-custom-range-input ${sliderClassName ?? ""}`.trim(),
+                style: {
+                  background: `linear-gradient(to right, var(--white, #fff) ${sliderProgress}%, var(--white50, rgba(255, 255, 255, 0.5)) ${sliderProgress}%)`,
+                  padding: 0,
+                  maxWidth: "70px",
+                  marginRight: 0,
+                  ...sliderStyle
+                },
+                type: "range",
+                name,
+                value: String(actualValue),
+                min: actualSliderMin,
+                max: actualSliderMax,
+                step,
+                disabled: sliderDisabled,
+                onChange: ({ target: { value: nextSliderValue } }) => {
+                  handleSliderChanging({}, Number(nextSliderValue));
+                },
+                onMouseUp: () => handleSliderChanged({}),
+                onTouchEnd: () => handleSliderChanged({})
               }
-            },
-            fullWidth: hideSlider ? fullWidth : false,
-            $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" } : {}
+            ) : /* @__PURE__ */ jsx4(
+              LSSlider,
+              {
+                ...sliderRestProps,
+                name,
+                color: sliderColor,
+                value: actualValue,
+                step,
+                min: actualSliderMin,
+                max: actualSliderMax,
+                valueLabelDisplay,
+                valueLabelFormat: (sliderValue) => valueLabelFormat?.(sliderValue) ?? `${sliderValue}${endAdornment ?? inputAfterText ?? ""}`,
+                onChange: handleSliderChanging,
+                onChangeCommitted: handleSliderChanged,
+                sx: resolvedSliderSx
+              }
+            ),
+            endIcon && /* @__PURE__ */ jsx4("span", { className: "ls-slider-input-icon", children: endIcon })
+          ]
+        }
+      ),
+      !hideInput && /* @__PURE__ */ jsx4(
+        LSInput,
+        {
+          ...rest,
+          ...inputProps,
+          type,
+          name,
+          color,
+          size: "small",
+          onChange: handleInputChange,
+          className: hideSlider ? inputProps?.className : inputValueClassName,
+          value: displayValue,
+          error: resolvedError,
+          helperText: resolvedHelperText,
+          fullWidth: hideSlider ? fullWidth : false,
+          inputRef: ref,
+          slotProps: {
+            ...inputProps?.slotProps ?? {},
+            htmlInput: htmlInputProps
           }
-        )
-      ]
-    }
-  );
-  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 })
-  ] });
-};
+        }
+      ),
+      !hideInput && (endAdornment ?? inputAfterText) && /* @__PURE__ */ jsx4("div", { className: "mui-ls-slider-input-adornment", children: endAdornment ?? inputAfterText })
+    ] });
+    return /* @__PURE__ */ jsxs(FormControl2, { variant: "outlined", className: "mui-ls-slider-input-root", fullWidth: true, error: Boolean(rangeError), children: [
+      label && /* @__PURE__ */ jsxs(InputLabel, { shrink: true, id: labelId, htmlFor: sliderInputId, children: [
+        label,
+        showInfoIcon && /* @__PURE__ */ jsx4(Tooltip, { title: info ?? "", placement: "top", onOpen: infoOpen, onClose: infoClose, children: /* @__PURE__ */ jsx4("span", { className: "mui-ls-slider-input-info", "aria-label": typeof info === "string" ? info : void 0, children: /* @__PURE__ */ jsx4(InfoIcon, {}) }) })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        OutlinedInput,
+        {
+          id: sliderInputId,
+          label,
+          notched: Boolean(label),
+          className: "mui-ls-slider-input-control",
+          inputComponent: SliderInputContent,
+          inputProps: { children: sliderControls }
+        }
+      ),
+      (helperText || rangeError) && /* @__PURE__ */ jsx4(FormHelperText, { className: "mui-ls-slider-input-helper", children: rangeError ?? helperText })
+    ] });
+  }
+);
 LSSliderInput.displayName = "LSSliderInput";
 
 // src/components/LSSwitch/LSSwitch.tsx
 import MatSwitch from "@mui/material/Switch";
-import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var LSSwitch = forwardRef2(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx4(
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LSSwitch = forwardRef3(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx5(
   MatSwitch,
   {
     sx: {
@@ -414,20 +543,20 @@ var LSSwitch = forwardRef2(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx4
 LSSwitch.displayName = "LSSwitch";
 
 // src/components/LSSelect/LSSelect.tsx
-import FormControl2 from "@mui/material/FormControl";
-import InputLabel from "@mui/material/InputLabel";
+import FormControl3 from "@mui/material/FormControl";
+import InputLabel2 from "@mui/material/InputLabel";
 import Select from "@mui/material/Select";
-import Tooltip from "@mui/material/Tooltip";
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var InfoIcon = () => /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx5(
+import Tooltip2 from "@mui/material/Tooltip";
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var InfoIcon2 = () => /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx6(
   "path",
   {
     d: "M7 0C3.1402 0 0 3.1402 0 7C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7C14 3.1402 10.8598 0 7 0ZM7.7 11.2H6.3V9.8H7.7V11.2ZM8.3832 7.7805C8.246 7.8911 8.1137 7.9968 8.0087 8.1018C7.7231 8.3867 7.7007 8.6457 7.7 8.6569V8.75H6.3V8.6331C6.3 8.5505 6.3203 7.8092 7.0182 7.1113C7.1547 6.9748 7.3241 6.8362 7.5019 6.692C8.0157 6.2755 8.3531 5.9717 8.3531 5.5531C8.34497 5.19947 8.19875 4.86308 7.94574 4.61588C7.69273 4.36869 7.35303 4.23034 6.99931 4.23043C6.64559 4.23052 6.30595 4.36905 6.05307 4.61637C5.80019 4.8637 5.65415 5.20017 5.6462 5.5538H4.2462C4.2462 4.0355 5.4817 2.8 7 2.8C8.5183 2.8 9.7538 4.0355 9.7538 5.5538C9.7538 6.6717 8.9285 7.3388 8.3832 7.7805Z",
     fill: "#CAC9D5"
   }
 ) });
-var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
+var LSSelect = forwardRef4(({ className = "", style, ...props }, ref) => {
   const {
     placeholder,
     info,
@@ -445,7 +574,7 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
   const value = rest.multiple === true ? Array.isArray(rest.value) ? rest.value : rest.value === void 0 || rest.value === null || rest.value === "" ? [] : [rest.value] : rest.value ?? "";
   const renderValue = renderValueProp ?? (placeholderText ? (selected) => {
     if (selected === "" || Array.isArray(selected) && selected.length === 0) {
-      return /* @__PURE__ */ jsx5("span", { style: { color: "var(--neutralLight3, var(--grey, #9392a1))" }, children: placeholderText });
+      return /* @__PURE__ */ jsx6("span", { style: { color: "var(--neutralLight3, var(--grey, #9392a1))" }, children: placeholderText });
     }
     return Array.isArray(selected) ? selected.join(", ") : selected;
   } : void 0);
@@ -472,6 +601,16 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
           "& .MuiMenuItem-root": {
             color: "var(--neutralLight1, var(--white, #fff))"
           },
+          "& .MuiMenuItem-root:hover, & .MuiMenuItem-root.Mui-focusVisible": {
+            backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 14%, transparent) !important"
+          },
+          "& .MuiMenuItem-root.Mui-selected": {
+            backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 24%, transparent) !important",
+            color: "var(--neutralLight1, var(--white, #fff)) !important"
+          },
+          "& .MuiMenuItem-root.Mui-selected:hover, & .MuiMenuItem-root.Mui-selected.Mui-focusVisible": {
+            backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 30%, transparent) !important"
+          },
           ...MenuProps?.slotProps?.paper?.sx
         }
       },
@@ -486,24 +625,18 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
     }
   };
   return /* @__PURE__ */ jsxs2(
-    FormControl2,
+    FormControl3,
     {
       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__ */ jsxs2(InputLabel, { shrink: true, id: labelId, children: [
+        props.label && /* @__PURE__ */ jsxs2(InputLabel2, { shrink: true, id: labelId, children: [
           props.label,
-          info && /* @__PURE__ */ jsx5(Tooltip, { title: info, placement: "right", children: /* @__PURE__ */ jsx5("span", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: /* @__PURE__ */ jsx5(InfoIcon, {}) }) })
+          info && /* @__PURE__ */ jsx6(Tooltip2, { title: info, placement: "right", children: /* @__PURE__ */ jsx6("span", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: /* @__PURE__ */ jsx6(InfoIcon2, {}) }) })
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           Select,
           {
             MenuProps: mergedMenuProps,
@@ -532,18 +665,18 @@ import { default as default3 } from "@mui/material/ListSubheader";
 // src/components/LSCheckbox/LSCheckbox.tsx
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import { useController, useFormContext } from "react-hook-form";
-import classNames4 from "classnames";
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
-var LSCheckbox = forwardRef4(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
+import classNames3 from "classnames";
+import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+var LSCheckbox = forwardRef5(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
   const CheckboxComponent = Checkbox;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     CheckboxComponent,
     {
       ...props,
       checked: checked ?? false,
-      className: classNames4("ls-checkbox", className, { "Mui-disabled": props.disabled }),
+      className: classNames3("ls-checkbox", className, { "Mui-disabled": props.disabled }),
       ref,
       slotProps: {
         ...slotProps ?? {},
@@ -567,8 +700,8 @@ function LSCheckboxField({
 }) {
   const formContext = useFormContext();
   const resolvedControl = control ?? formContext?.control;
-  if (!resolvedControl) return /* @__PURE__ */ jsx6(Fragment, {});
-  return /* @__PURE__ */ jsx6(
+  if (!resolvedControl) return /* @__PURE__ */ jsx7(Fragment, {});
+  return /* @__PURE__ */ jsx7(
     LSCheckboxFieldInner,
     {
       name,
@@ -591,13 +724,13 @@ function LSCheckboxFieldInner({
   checkboxProps
 }) {
   const { field } = useController({ name, control });
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     FormControlLabel,
     {
-      className: classNames4("ls-checkbox-row", className),
+      className: classNames3("ls-checkbox-row", className),
       labelPlacement,
       disabled,
-      control: /* @__PURE__ */ jsx6(
+      control: /* @__PURE__ */ jsx7(
         LSCheckbox,
         {
           ...checkboxProps,
@@ -617,7 +750,7 @@ function LSCheckboxFieldInner({
 // src/components/LSColorPicker/LSColorPicker.tsx
 import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import GradientColorPicker from "react-best-gradient-color-picker";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_COLOR = "#ff4076";
 var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name, label, helperText, placeholder, hideGradientControls = false, usePopup = false, disabled = false }) => {
   const isPopupMode = usePopup === true;
@@ -694,7 +827,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
         overflow: "visible"
       },
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           LSInput,
           {
             className: "ls-color-picker__input",
@@ -706,7 +839,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
             onBlur,
             placeholder,
             disabled,
-            endAdornment: /* @__PURE__ */ jsx7(
+            endAdornment: /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -719,12 +852,12 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
             )
           }
         ),
-        showPicker && /* @__PURE__ */ jsx7(
+        showPicker && /* @__PURE__ */ jsx8(
           "div",
           {
             className: isPopupMode ? "ls-color-picker__picker ls-color-picker__picker--popup" : "ls-color-picker__picker ls-color-picker__picker--inline",
             style: pickerContainerStyle,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx8(
               GradientColorPicker,
               {
                 hidePresets: true,
@@ -773,8 +906,8 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
 };
 
 // src/components/LSDatePicker/LSDatePicker.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var toDateTimeLocalValue = (value) => {
   if (!value) return "";
   const date = new Date(value);
@@ -786,7 +919,7 @@ var fromDateTimeLocalValue = (value) => {
   if (!value) return "";
   return new Date(value).toISOString();
 };
-var LSDatePicker = forwardRef5(
+var LSDatePicker = forwardRef6(
   ({ value, onChange, onChangeStart, onChangeEnd, className, ...rest }, ref) => {
     const handleChange = (event) => {
       const nextValue = fromDateTimeLocalValue(event.target.value);
@@ -794,7 +927,7 @@ var LSDatePicker = forwardRef5(
       onChange?.(event, nextValue);
       onChangeEnd?.(event, nextValue);
     };
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       LSInput,
       {
         ...rest,
@@ -814,7 +947,7 @@ 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 { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var LSFontPicker = memo(function LSFontPicker2({
   value,
   onChange,
@@ -858,7 +991,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       onLoadFontsRef.current?.([nextValue]);
     });
   };
-  return /* @__PURE__ */ jsx9("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx10(
     AutocompleteComponent,
     {
       freeSolo: true,
@@ -868,7 +1001,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       options: combinedFonts,
       value: currentValue,
       inputValue,
-      popupIcon: /* @__PURE__ */ jsx9(KeyboardArrowDown, {}),
+      popupIcon: /* @__PURE__ */ jsx10(KeyboardArrowDown, {}),
       isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
       onChange: (_event, newValue) => {
         handleValueChange(typeof newValue === "string" ? newValue : `${newValue ?? ""}`);
@@ -910,7 +1043,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       noOptionsText: "No fonts found",
       renderOption: (props, option) => {
         const { key, ...optionProps } = props;
-        return /* @__PURE__ */ jsx9(
+        return /* @__PURE__ */ jsx10(
           "li",
           {
             ...optionProps,
@@ -929,7 +1062,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       },
       renderInput: (params) => {
         const { slotProps: paramsSlotProps = {}, ...restParams } = params;
-        return /* @__PURE__ */ jsx9(
+        return /* @__PURE__ */ jsx10(
           TextFieldComponent,
           {
             ...restParams,
@@ -966,7 +1099,7 @@ var LSFontPicker = memo(function LSFontPicker2({
 
 // src/components/LSMultiSelect/LSMultiSelect.tsx
 import { MenuItem } from "@mui/material";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var LSMultiSelect = ({
   options,
   placeholder = "Select...",
@@ -980,7 +1113,7 @@ var LSMultiSelect = ({
     } = event;
     onChange(typeof value2 === "string" ? value2.split(",") : value2);
   };
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     LSSelect,
     {
       multiple: true,
@@ -991,10 +1124,10 @@ var LSMultiSelect = ({
       onChange: handleChange,
       displayEmpty: true,
       renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "ls-multi-select-value", children: [
-        /* @__PURE__ */ jsx10("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map(
+        /* @__PURE__ */ jsx11("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__ */ jsx10("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
+        /* @__PURE__ */ jsx11("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
       ] }),
       MenuProps: {
         // The previous version of this also set `PaperProps` here — that
@@ -1045,7 +1178,7 @@ var LSMultiSelect = ({
             }
           },
           children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               LSCheckbox,
               {
                 checked: (value ?? []).includes(option.value),
@@ -1053,7 +1186,7 @@ var LSMultiSelect = ({
                 disableRipple: true
               }
             ),
-            /* @__PURE__ */ jsx10("span", { children: option.label })
+            /* @__PURE__ */ jsx11("span", { children: option.label })
           ]
         },
         option.value
@@ -1066,19 +1199,19 @@ var LSMultiSelect = ({
 import FormControlLabel2 from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
-import classNames5 from "classnames";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import classNames4 from "classnames";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var LSRadio = ({ className = "", ...props }) => {
-  return /* @__PURE__ */ jsx11(Radio, { ...props, className: classNames5("ls-radio", className) });
+  return /* @__PURE__ */ jsx12(Radio, { ...props, className: classNames4("ls-radio", className) });
 };
 var LSRadioGroup = ({ selections, className = "", optionClassName = "", row, ...props }) => {
-  return /* @__PURE__ */ jsx11(RadioGroup, { ...props, row, className: classNames5("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(RadioGroup, { ...props, row, className: classNames4("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx12(
     FormControlLabel2,
     {
-      className: classNames5("ls-radio-row", optionClassName),
+      className: classNames4("ls-radio-row", optionClassName),
       value: selection.value,
       disabled: selection.disabled,
-      control: /* @__PURE__ */ jsx11(LSRadio, {}),
+      control: /* @__PURE__ */ jsx12(LSRadio, {}),
       label: selection.label
     },
     selection.value
@@ -1088,13 +1221,13 @@ LSRadioGroup.displayName = "LSRadioGroup";
 
 // src/components/LSTextField/LSTextField.tsx
 import TextField3 from "@mui/material/TextField";
-import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var LSTextField = forwardRef6(
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var LSTextField = forwardRef7(
   (props, ref) => {
     const { slotProps, ...rest } = props;
     const paramsInputLabel = slotProps?.inputLabel ?? {};
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       TextField3,
       {
         ...rest,
@@ -1122,11 +1255,11 @@ import InputAdornment2 from "@mui/material/InputAdornment";
 import Popover from "@mui/material/Popover";
 import Search from "@mui/icons-material/Search";
 import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
-import Tooltip2 from "@mui/material/Tooltip";
+import Tooltip3 from "@mui/material/Tooltip";
 import {
   Fragment as Fragment4,
   createContext,
-  forwardRef as forwardRef7,
+  forwardRef as forwardRef8,
   useCallback as useCallback2,
   useContext,
   useEffect as useEffect5,
@@ -1145,7 +1278,7 @@ import {
   useState as useState4
 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var TOKEN_START = "{{";
 var TOKEN_END = "}}";
 var COPIED_STYLE_PROPS = [
@@ -1229,7 +1362,7 @@ var parseSegments = (value, classify, describe) => {
   }
   return segments;
 };
-var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx13(
+var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx14(
   "span",
   {
     "data-desc": segment.desc || void 0,
@@ -1243,7 +1376,7 @@ var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx13(
     ] }) : segment.text
   },
   key
-) : /* @__PURE__ */ jsx13(Fragment2, { children: segment.text }, key);
+) : /* @__PURE__ */ jsx14(Fragment2, { children: segment.text }, key);
 var VariableHighlightOverlay = ({
   inputEl,
   value,
@@ -1367,11 +1500,11 @@ var VariableHighlightOverlay = ({
   }
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     createPortal(
-      /* @__PURE__ */ jsx13("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map((segment, index) => renderSegment(segment, String(index))) }),
+      /* @__PURE__ */ jsx14("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map((segment, index) => renderSegment(segment, String(index))) }),
       inputEl.parentElement
     ),
     tooltip ? createPortal(
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         "div",
         {
           className: "ls-variable-highlight__tooltip",
@@ -1385,14 +1518,14 @@ var VariableHighlightOverlay = ({
 };
 
 // src/components/LSVariableInputField/LSVariableInputField.tsx
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 import { createElement } from "react";
 var LSVariableInputContext = createContext({});
 var LSVariableInputProvider = ({
   children,
   value
 }) => {
-  return /* @__PURE__ */ jsx14(LSVariableInputContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx15(LSVariableInputContext.Provider, { value, children });
 };
 var DEFAULT_FUNCTION_VARIABLES = [
   "sum_variables",
@@ -1611,7 +1744,7 @@ var getVariableColorClass = (variableType, isSuggested) => {
   return "ls-variable-token--custom";
 };
 var CHILD_VARIABLE_COLOR_CLASS = "ls-variable-token--child";
-var LSVariableInputField = forwardRef7((props, ref) => {
+var LSVariableInputField = forwardRef8((props, ref) => {
   const context = useContext(LSVariableInputContext);
   const {
     name,
@@ -1691,18 +1824,6 @@ var LSVariableInputField = forwardRef7((props, ref) => {
     },
     [ref]
   );
-  const currentVariableValue = useMemo4(() => {
-    if (typeof value !== "string") return null;
-    const match = value.trim().match(/^\{\{([^{}=]+)\}\}$/);
-    if (!match) return null;
-    const key = match[1].trim();
-    if (functionVariableSet.has(key)) return null;
-    const record = variableRecords[key];
-    if (!record || record.isFunction) return null;
-    const { displayValue, fullValue } = getVariableValueDisplay(record.value);
-    if (displayValue === "" || displayValue == null) return null;
-    return { displayValue, fullValue };
-  }, [value, variableRecords, functionVariableSet]);
   const allowedVariableDefinitions = useMemo4(
     () => normalizeAllowedDefinitions(allowedVariables),
     [allowedVariables]
@@ -1947,6 +2068,64 @@ var LSVariableInputField = forwardRef7((props, ref) => {
     },
     [resolveAllowedVariableOrigin, variableRecords]
   );
+  const getVariableRecordForToken = useCallback2(
+    (variableName) => {
+      if (!variableName) return void 0;
+      const direct = variableRecords[variableName];
+      if (direct) return direct;
+      return getAllowedVariableRecord(variableName);
+    },
+    [getAllowedVariableRecord, variableRecords]
+  );
+  const getVariableValueForToken = useCallback2(
+    (variableName) => {
+      if (!variableName) return void 0;
+      const directRecord = getVariableRecordForToken(variableName);
+      if (directRecord) {
+        if (directRecord.isFunction || functionVariableSet.has(directRecord.name))
+          return void 0;
+        return directRecord.value;
+      }
+      const segments = variableName.split(".");
+      for (let index = segments.length - 1; index > 0; index -= 1) {
+        const rootName = segments.slice(0, index).join(".");
+        const record = getVariableRecordForToken(rootName);
+        if (!record || record.isFunction || functionVariableSet.has(record.name))
+          continue;
+        let current = record.value;
+        for (const segment of segments.slice(index)) {
+          if (Array.isArray(current)) {
+            const itemIndex = Number(segment);
+            current = Number.isInteger(itemIndex) ? current[itemIndex] : void 0;
+          } else if (isPlainObject(current)) {
+            current = current[segment];
+          } else {
+            current = void 0;
+          }
+          if (current === void 0) break;
+        }
+        if (current !== void 0) return current;
+      }
+      return getAllowedVariableValue(variableName);
+    },
+    [
+      functionVariableSet,
+      getAllowedVariableValue,
+      getVariableRecordForToken
+    ]
+  );
+  const getInputVariableDescription = useCallback2(
+    (variableName) => {
+      const description = getAllowedVariableDescription(variableName);
+      const variableValue = getVariableValueForToken(variableName);
+      const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
+      const valueDisplay = fullValue || displayValue;
+      if (!valueDisplay) return description;
+      return `${description}
+value: "${valueDisplay}"`;
+    },
+    [getAllowedVariableDescription, getVariableValueForToken]
+  );
   const getAllowedVariableVisualType = useCallback2(
     (variableName) => {
       const record = getAllowedVariableRecord(variableName);
@@ -2143,8 +2322,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
     {
       className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
       children: [
-        /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
-        variableType === "func" && /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
+        variableType === "func" && /* @__PURE__ */ jsx15(
           "span",
           {
             className: "ls-variable-token__badge",
@@ -2155,7 +2334,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
       ]
     }
   );
-  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx14(
+  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx15(
     "button",
     {
       type: "button",
@@ -2166,15 +2345,15 @@ var LSVariableInputField = forwardRef7((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__ */ jsx14(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
+      children: /* @__PURE__ */ jsx15(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
     }
   );
-  const renderExpandSpacer = () => /* @__PURE__ */ jsx14("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
+  const renderExpandSpacer = () => /* @__PURE__ */ jsx15("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
   const getVariableValuePreview = (variableValue) => {
     const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
     return { displayValue, fullValue };
   };
-  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx14(
+  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx15(
     "input",
     {
       className: "ls-variable-picker__value-input",
@@ -2208,18 +2387,18 @@ var LSVariableInputField = forwardRef7((props, ref) => {
                 style: { paddingLeft: `${node.depth * 1.25}rem` },
                 children: [
                   node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "div",
                     {
                       className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
-                      children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
+                      children: /* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: node.displayKey }),
-            /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
+            /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: node.displayKey }),
+            /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
           ]
         }
       ),
@@ -2227,7 +2406,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
     ] }, fullToken);
   });
   const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
+    /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
     examples.map((example) => /* @__PURE__ */ jsxs6(
       "div",
       {
@@ -2241,12 +2420,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
               style: { paddingLeft: "1.25rem" },
               children: [
                 renderExpandSpacer(),
-                /* @__PURE__ */ jsx14("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
+                /* @__PURE__ */ jsx15("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: example.label }),
-          /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value" })
+          /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: example.label }),
+          /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value" })
         ]
       },
       example.snippet
@@ -2303,7 +2482,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
           isSelected ? "ls-variable-option--selected" : ""
         ].filter(Boolean).join(" ")
       },
-      thumb ? /* @__PURE__ */ jsx14(
+      thumb ? /* @__PURE__ */ jsx15(
         "img",
         {
           src: thumb,
@@ -2312,23 +2491,23 @@ var LSVariableInputField = forwardRef7((props, ref) => {
         }
       ) : null,
       /* @__PURE__ */ jsxs6("div", { className: "ls-variable-option__body", children: [
-        /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
-        helperText ? /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__helper", children: helperText }) : null
+        /* @__PURE__ */ jsx15("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
+        helperText ? /* @__PURE__ */ jsx15("div", { className: "ls-variable-option__helper", children: helperText }) : null
       ] })
     );
   };
   const showSuggestedSection = shouldRenderPicker && allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
   const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
     /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__intro", children: [
-      /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__intro-text", children: t(
+      /* @__PURE__ */ jsx15("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__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         LSInput,
         {
           autoFocus: true,
-          startAdornment: /* @__PURE__ */ jsx14(Search, { style: { color: "#fff", width: 20, height: 20 } }),
+          startAdornment: /* @__PURE__ */ jsx15(Search, { style: { color: "#fff", width: 20, height: 20 } }),
           placeholder: t("common.search", "Search"),
           value: searchQuery,
           onChange: (e) => setSearchQuery(e.target.value),
@@ -2337,13 +2516,13 @@ var LSVariableInputField = forwardRef7((props, ref) => {
       )
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__header", children: [
-      /* @__PURE__ */ jsx14("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
-      /* @__PURE__ */ jsx14("div", { children: t("commands.description", "Description") }),
-      /* @__PURE__ */ jsx14("div", { children: t("common.value", "Value") })
+      /* @__PURE__ */ jsx15("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
+      /* @__PURE__ */ jsx15("div", { children: t("commands.description", "Description") }),
+      /* @__PURE__ */ jsx15("div", { children: t("common.value", "Value") })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__list", children: [
       showSuggestedSection && /* @__PURE__ */ jsxs6("fieldset", { className: "ls-variable-picker__field", children: [
-        /* @__PURE__ */ jsx14("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
+        /* @__PURE__ */ jsx15("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
         filteredAllowedVariables.map((definition, idx) => {
           const variableType = getAllowedVariableVisualType(
             definition.name
@@ -2371,8 +2550,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
                     expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
                     renderVariableToken(definition.name, variableType, true)
                   ] }),
-                  /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
+                  /* @__PURE__ */ jsx15(
                     "div",
                     {
                       className: "ls-variable-picker__value",
@@ -2411,8 +2590,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
                   expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
                   renderVariableToken(variable.name, variableType)
                 ] }),
-                /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
-                /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
+                /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
+                /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
               ]
             }
           ),
@@ -2421,7 +2600,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
       })
     ] })
   ] }) : null;
-  const textField = (params = {}) => /* @__PURE__ */ jsx14(
+  const textField = (params = {}) => /* @__PURE__ */ jsx15(
     VariableInputTextField,
     {
       t,
@@ -2444,12 +2623,11 @@ var LSVariableInputField = forwardRef7((props, ref) => {
       inputProps,
       allowedVariables,
       showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
-      currentValue: currentVariableValue,
       ref: mergedInputRef
     }
   );
   return /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       Popover,
       {
         anchorEl: containerRef.current,
@@ -2475,7 +2653,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
         children: pickerBody
       }
     ),
-    isAutoComplete ? /* @__PURE__ */ jsx14(
+    isAutoComplete ? /* @__PURE__ */ jsx15(
       Autocomplete2,
       {
         disableClearable: true,
@@ -2572,20 +2750,20 @@ var LSVariableInputField = forwardRef7((props, ref) => {
         renderInput: (params) => textField(params)
       }
     ) : textField(),
-    !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx14(
+    !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx15(
       VariableHighlightOverlay,
       {
         inputEl,
         value,
         multiline,
         classify: getInputVariableVisualType,
-        describe: getAllowedVariableDescription
+        describe: getInputVariableDescription
       }
     ) : null
   ] });
 });
 LSVariableInputField.displayName = "LSVariableInputField";
-var VariableInputTextField = forwardRef7(
+var VariableInputTextField = forwardRef8(
   ({
     t,
     id,
@@ -2605,16 +2783,15 @@ var VariableInputTextField = forwardRef7(
     clickedVariableIcon,
     params = {},
     containerRef,
-    showVariableIcon,
-    currentValue
+    showVariableIcon
   }, ref) => {
     const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
     const paramsSlotInput = params?.slotProps?.input ?? {};
     const explicitStartAdornment = inputProps?.startAdornment;
-    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx14(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
+    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx15(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
     const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
     const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       LSTextField,
       {
         id,
@@ -2644,23 +2821,7 @@ var VariableInputTextField = forwardRef7(
             startAdornment,
             endAdornment: /* @__PURE__ */ jsxs6(Fragment5, { children: [
               endAdornment ?? null,
-              currentValue ? /* @__PURE__ */ jsx14(Tooltip2, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx14(
-                InputAdornment2,
-                {
-                  position: "end",
-                  className: "ls-variable-input-current-value",
-                  style: {
-                    maxWidth: 120,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    opacity: 0.6,
-                    fontSize: "0.75em"
-                  },
-                  children: currentValue.displayValue
-                }
-              ) }) : null,
-              showVariableIcon ? /* @__PURE__ */ jsx14(Tooltip2, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx14(
+              showVariableIcon ? /* @__PURE__ */ jsx15(Tooltip3, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx15(
                 InputAdornment2,
                 {
                   position: "end",
@@ -2686,11 +2847,11 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Menu from "@mui/material/Menu";
 import MenuItem2 from "@mui/material/MenuItem";
-import Tooltip3 from "@mui/material/Tooltip";
-import classNames7 from "classnames";
+import Tooltip4 from "@mui/material/Tooltip";
+import classNames6 from "classnames";
 
 // src/components/PlatformIcon/PlatformIcon.tsx
-import classNames6 from "classnames";
+import classNames5 from "classnames";
 
 // src/assets/platforms/discord.svg
 var discord_default = 'data:image/svg+xml,<svg width="106" height="84" viewBox="0 0 106 84" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M87.6564 10.3044C81.1722 7.33742 74.33 5.21982 67.3004 4.00432C67.2367 3.99362 67.1713 4.00292 67.1131 4.03082C67.0549 4.05872 67.0068 4.10392 66.9754 4.16012C66.0941 5.71802 65.1192 7.75572 64.4379 9.35102C56.8605 8.20442 49.153 8.20442 41.5757 9.35102C40.8157 7.57392 39.956 5.84082 39.0007 4.16012C38.9686 4.10452 38.9204 4.05982 38.8624 4.03202C38.8044 4.00422 38.7393 3.99452 38.6757 4.00432C31.6445 5.21322 24.8008 7.33202 18.3196 10.3044C18.2642 10.3255 18.2178 10.3652 18.1884 10.4166C5.22598 29.7281 1.66978 48.5661 3.41358 67.1673C3.41978 67.2545 3.47608 67.3418 3.54478 67.3978C11.093 72.9727 19.5358 77.229 28.5133 79.986C28.5767 80.005 28.6448 80.005 28.7077 79.983C28.7707 79.962 28.8252 79.921 28.8633 79.867C30.7883 77.25 32.5007 74.4893 33.9757 71.5854C34.0065 71.5256 34.017 71.4575 34.0057 71.3913C33.9945 71.325 33.962 71.2641 33.9132 71.2178C33.8809 71.1874 33.8426 71.164 33.8007 71.1492C31.108 70.1174 28.5001 68.8777 26.0008 67.4415C25.931 67.402 25.8791 67.3373 25.8558 67.2607C25.8325 67.1842 25.8397 67.1016 25.8758 67.0302C25.8971 66.9838 25.9292 66.9432 25.9696 66.9118C26.4946 66.5192 27.0196 66.1079 27.5195 65.6966C27.5637 65.6612 27.6167 65.6385 27.6729 65.6308C27.729 65.6231 27.7862 65.6308 27.8383 65.653C44.2069 73.1059 61.9254 73.1059 78.094 65.653C78.148 65.6297 78.2074 65.6214 78.2657 65.6291C78.324 65.6368 78.3792 65.6601 78.4253 65.6966C78.9253 66.1079 79.4503 66.5192 79.9753 66.9118C80.0178 66.9428 80.052 66.9838 80.0747 67.0312C80.0975 67.0786 80.1081 67.1308 80.1056 67.1833C80.1031 67.2358 80.0876 67.2868 80.0605 67.3319C80.0334 67.3769 79.9955 67.4146 79.9503 67.4415C77.4566 68.8909 74.8454 70.1291 72.1441 71.143C72.101 71.1585 72.0619 71.1834 72.0295 71.2157C71.9971 71.248 71.9722 71.287 71.9566 71.3299C71.9421 71.3716 71.9363 71.4157 71.9396 71.4596C71.9428 71.5035 71.955 71.5464 71.9753 71.5854C73.4753 74.4831 75.194 77.25 77.0815 79.867C77.1197 79.921 77.1741 79.962 77.2371 79.983C77.3 80.005 77.3681 80.005 77.4315 79.986C86.424 77.238 94.881 72.9807 102.438 67.3978C102.475 67.3717 102.507 67.3374 102.53 67.2975C102.552 67.2576 102.566 67.2131 102.569 67.1673C104.656 45.6622 99.075 26.98 87.7814 10.4228C87.77 10.3955 87.753 10.3708 87.7315 10.3504C87.71 10.33 87.6844 10.3144 87.6564 10.3044ZM36.4195 55.8383C31.4883 55.8383 27.432 51.3267 27.432 45.7931C27.432 40.2532 31.4133 35.7416 36.4195 35.7416C41.4632 35.7416 45.4819 40.2906 45.4069 45.7931C45.4069 51.3267 41.4257 55.8383 36.4195 55.8383ZM69.6441 55.8383C64.7192 55.8383 60.6567 51.3267 60.6567 45.7931C60.6567 40.2532 64.6379 35.7416 69.6441 35.7416C74.6878 35.7416 78.7128 40.2906 78.6315 45.7931C78.6315 51.3267 74.6878 55.8383 69.6441 55.8383Z" fill="%235C65EB"/>%0A</svg>%0A';
@@ -2717,7 +2878,7 @@ var twitter_default = 'data:image/svg+xml,<svg width="400" height="400" viewBox=
 var youtube_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12.5612 5H12.6669C13.643 5.00347 18.5892 5.03817 19.9229 5.38749C20.3261 5.4941 20.6935 5.7019 20.9884 5.99013C21.2833 6.27836 21.4953 6.63692 21.6033 7.02998C21.7233 7.46952 21.8076 8.05133 21.8646 8.65166L21.8765 8.77195L21.9026 9.0727L21.9121 9.19298C21.9893 10.2502 21.9988 11.2403 22 11.4566V11.5434C21.9988 11.7678 21.9882 12.825 21.9026 13.9262L21.8931 14.0476L21.8825 14.1679C21.823 14.8295 21.7352 15.4865 21.6033 15.97C21.4957 16.3632 21.2837 16.722 20.9888 17.0102C20.6939 17.2985 20.3262 17.5062 19.9229 17.6125C18.5454 17.9734 13.3093 17.9988 12.5837 18H12.4151C12.0481 18 10.5304 17.9931 8.93906 17.9399L8.73717 17.9329L8.63385 17.9283L8.43078 17.9202L8.2277 17.9121C6.90949 17.8554 5.65423 17.764 5.07589 17.6114C4.67269 17.5052 4.30522 17.2976 4.0103 17.0096C3.71538 16.7215 3.50335 16.363 3.39546 15.97C3.26364 15.4877 3.17576 14.8295 3.11638 14.1679L3.10688 14.0464L3.09738 13.9262C3.03877 13.1424 3.00629 12.357 3 11.5711V11.43C3.00238 11.1813 3.01188 10.3219 3.076 9.37343L3.08432 9.25429L3.08788 9.19415L3.09738 9.07385L3.12351 8.77311L3.13538 8.65281C3.19239 8.0525 3.27671 7.46952 3.39665 7.03115C3.50435 6.63792 3.7163 6.27919 4.01124 5.99091C4.30617 5.70263 4.67374 5.49494 5.07707 5.38865C5.65541 5.23828 6.91069 5.14574 8.22889 5.08791L8.43078 5.07981L8.63503 5.07287L8.73717 5.0694L8.94024 5.0613C10.0705 5.02549 11.2011 5.00544 12.332 5.00116H12.5612V5ZM10.6005 8.71297V14.2859L15.5372 11.5006L10.6005 8.71297Z" fill="%23FF0000"/>%0A</svg>%0A';
 
 // src/components/PlatformIcon/PlatformIcon.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var PLATFORM_ICON_URLS = {
   twitch: twitch_default,
   youtube: youtube_default,
@@ -2742,13 +2903,13 @@ function PlatformIcon({ platform, fallback = true, size, className, title, style
     return null;
   }
   const sizeStyle = size !== void 0 ? { height: typeof size === "number" ? `${size}px` : size } : void 0;
-  return /* @__PURE__ */ jsx15("img", { className: classNames6("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
+  return /* @__PURE__ */ jsx16("img", { className: classNames5("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
 }
 PlatformIcon.displayName = "PlatformIcon";
 
 // src/components/ChatMessageItem/modActionIcons.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
-var DeleteIcon = () => /* @__PURE__ */ jsx16("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+var DeleteIcon = () => /* @__PURE__ */ jsx17("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
   "path",
   {
     d: "M14.375 2.7H11.875V1.2C11.875 0.538125 11.3145 0 10.625 0H4.375C3.68555 0 3.125 0.538125 3.125 1.2V2.7H0.625C0.279297 2.7 0 2.96813 0 3.3V3.9C0 3.9825 0.0703125 4.05 0.15625 4.05H1.33594L1.81836 13.8563C1.84961 14.4956 2.40039 15 3.06641 15H11.9336C12.6016 15 13.1504 14.4975 13.1816 13.8563L13.6641 4.05H14.8438C14.9297 4.05 15 3.9825 15 3.9V3.3C15 2.96813 14.7207 2.7 14.375 2.7ZM10.4688 2.7H4.53125V1.35H10.4688V2.7Z",
@@ -2756,14 +2917,14 @@ var DeleteIcon = () => /* @__PURE__ */ jsx16("svg", { width: "15", height: "15",
   }
 ) });
 var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M11.3569 12.0002H2.78544C2.61494 12.0002 2.45143 11.9325 2.33087 11.8119C2.21031 11.6914 2.14258 11.5278 2.14258 11.3574V2.57164C2.14258 2.45797 2.18773 2.34896 2.2681 2.26859C2.34848 2.18822 2.45749 2.14307 2.57115 2.14307H11.3569C11.5274 2.14307 11.6909 2.2108 11.8114 2.33135C11.932 2.45191 11.9997 2.61543 11.9997 2.78592V11.3574C11.9997 11.5278 11.932 11.6914 11.8114 11.8119C11.6909 11.9325 11.5274 12.0002 11.3569 12.0002Z",
       fill: "currentColor"
     }
   ),
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M2.14286 1.28571H9.85714V0.642857C9.85714 0.472361 9.78941 0.308848 9.66885 0.188289C9.54829 0.0677294 9.38478 0 9.21428 0H0.75C0.551088 0 0.360322 0.0790177 0.21967 0.21967C0.0790177 0.360322 0 0.551088 0 0.75V9.21428C0 9.38478 0.0677294 9.54829 0.188289 9.66885C0.308848 9.78941 0.472361 9.85714 0.642857 9.85714H1.28571V2.14286C1.28571 1.91553 1.37602 1.69751 1.53677 1.53677C1.69751 1.37602 1.91553 1.28571 2.14286 1.28571Z",
@@ -2771,8 +2932,8 @@ var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", v
     }
   )
 ] });
-var PinOnIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M10.6667 7.99992V2.66659H11.3333V1.33325H4.66667V2.66659H5.33333V7.99992L4 9.33325V10.6666H7.46667V14.6666H8.53333V10.6666H12V9.33325L10.6667 7.99992Z", fill: "currentColor" }) });
-var PinOffIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+var PinOnIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17("path", { d: "M10.6667 7.99992V2.66659H11.3333V1.33325H4.66667V2.66659H5.33333V7.99992L4 9.33325V10.6666H7.46667V14.6666H8.53333V10.6666H12V9.33325L10.6667 7.99992Z", fill: "currentColor" }) });
+var PinOffIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
   "path",
   {
     d: "M10.6667 7.99992V2.66659H11.3333V1.33325H4.66667V2.66659H5.33333V7.99992L4 9.33325V10.6666H7.46667V14.6666H8.53333V10.6666H12V9.33325L10.6667 7.99992ZM5.86667 9.33325L6.66667 8.53325V2.66659H9.33333V8.53325L10.1333 9.33325H5.86667Z",
@@ -2781,8 +2942,8 @@ var PinOffIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16",
 ) });
 var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ jsxs7("g", { clipPath: "url(#ls-chat-translate-clip)", children: [
-    /* @__PURE__ */ jsx16("path", { d: "M34.9975 45.927L32.605 53H26.5L36.741 25.5H43.803L54 53H47.5815L45.189 45.927H34.9975ZM43.9845 41.879L40.25 30.758H39.9805L36.246 41.879H43.9845Z", fill: "currentColor" }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17("path", { d: "M34.9975 45.927L32.605 53H26.5L36.741 25.5H43.803L54 53H47.5815L45.189 45.927H34.9975ZM43.9845 41.879L40.25 30.758H39.9805L36.246 41.879H43.9845Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx17(
       "path",
       {
         d: "M10 20C10 17.0826 11.1589 14.2847 13.2218 12.2218C15.2847 10.1589 18.0826 9 21 9H59.5C62.4174 9 65.2153 10.1589 67.2782 12.2218C69.3411 14.2847 70.5 17.0826 70.5 20V36.5H87C89.9174 36.5 92.7153 37.6589 94.7782 39.7218C96.8411 41.7847 98 44.5826 98 47.5V86C98 88.9174 96.8411 91.7153 94.7782 93.7782C92.7153 95.8411 89.9174 97 87 97H48.5C45.5826 97 42.7847 95.8411 40.7218 93.7782C38.6589 91.7153 37.5 88.9174 37.5 86V69.5H21C18.0826 69.5 15.2847 68.3411 13.2218 66.2782C11.1589 64.2153 10 61.4174 10 58.5V20ZM21 14.5C19.5413 14.5 18.1424 15.0795 17.1109 16.1109C16.0795 17.1424 15.5 18.5413 15.5 20V58.5C15.5 59.9587 16.0795 61.3576 17.1109 62.3891C18.1424 63.4205 19.5413 64 21 64H59.5C60.9587 64 62.3576 63.4205 63.3891 62.3891C64.4205 61.3576 65 59.9587 65 58.5V20C65 18.5413 64.4205 17.1424 63.3891 16.1109C62.3576 15.0795 60.9587 14.5 59.5 14.5H21ZM60.259 69.4725C61.3187 71.1262 62.4737 72.6772 63.724 74.1255C59.61 77.288 54.5225 79.631 48.5 81.2315C49.479 82.425 50.9805 84.724 51.5525 86C57.74 84.0255 62.9925 81.358 67.4255 77.783C71.699 81.4405 76.99 84.1905 83.5405 85.879C84.272 84.482 85.8175 82.1775 87 80.984C80.8125 79.5925 75.6865 77.167 71.49 73.922C75.2355 69.8135 78.211 64.8415 80.4055 58.7585H87V53H70.5V58.7585H74.7075C72.9585 63.4005 70.6375 67.2615 67.7115 70.4735C66.9028 69.613 66.1409 68.7097 65.429 67.7675C63.8757 68.76 62.098 69.3463 60.259 69.4725Z",
@@ -2790,17 +2951,17 @@ var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "1
       }
     )
   ] }),
-  /* @__PURE__ */ jsx16("defs", { children: /* @__PURE__ */ jsx16("clipPath", { id: "ls-chat-translate-clip", children: /* @__PURE__ */ jsx16("rect", { width: "88", height: "88", fill: "#fff", transform: "translate(10 9)" }) }) })
+  /* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "ls-chat-translate-clip", children: /* @__PURE__ */ jsx17("rect", { width: "88", height: "88", fill: "#fff", transform: "translate(10 9)" }) }) })
 ] });
 var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M71.333 62.417C72.1697 62.417 73.0017 62.465 73.8252 62.5576C65.2189 65.3659 59 73.4561 59 83C59 88.8767 61.3585 94.202 65.1797 98.083H13.375V84.708C13.3751 78.7961 15.724 73.1267 19.9043 68.9463C24.0848 64.7658 29.7549 62.417 35.667 62.417H71.333ZM53.5 8.91699C60.0033 8.91699 66.2403 11.5001 70.8389 16.0986C75.4374 20.6972 78.0205 26.9342 78.0205 33.4375C78.0205 39.9408 75.4374 46.1778 70.8389 50.7764C66.2403 55.3749 60.0033 57.958 53.5 57.958C46.9967 57.958 40.7597 55.3749 36.1611 50.7764C31.5626 46.1778 28.9795 39.9408 28.9795 33.4375C28.9795 26.9342 31.5626 20.6972 36.1611 16.0986C40.7597 11.5001 46.9967 8.91699 53.5 8.91699Z",
       fill: "currentColor"
     }
   ),
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M72.4414 77.9153C71.0064 79.9384 70.3336 82.4041 70.5422 84.8757C70.7508 87.3473 71.8274 89.6654 73.5814 91.4193C75.3353 93.1732 77.6533 94.2498 80.1249 94.4584C82.5965 94.6671 85.0622 93.9943 87.0853 92.5592L72.4414 77.9153ZM74.9159 75.4426L89.5598 90.0865C90.9949 88.0634 91.6677 85.5977 91.4591 83.126C91.2504 80.6544 90.1738 78.3364 88.4199 76.5825C86.666 74.8286 84.348 73.752 81.8764 73.5433C79.4047 73.3347 76.939 74.0075 74.9159 75.4426ZM71.101 93.9014C68.4752 91.2759 66.9999 87.7148 66.9998 84.0015C66.9996 80.2882 68.4745 76.727 71.1001 74.1012C73.7256 71.4754 77.2868 70.0002 81 70C84.7133 69.9998 88.2745 71.4748 90.9003 74.1003C93.5259 76.7259 95.0009 80.2869 95.0009 84C95.0009 87.7131 93.5259 91.2741 90.9003 93.8997C88.2748 96.5252 84.7137 98.0003 81.0006 98.0003C77.2875 98.0003 73.7265 96.5252 71.101 93.8997V93.9014Z",
@@ -2809,14 +2970,14 @@ var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16"
   )
 ] });
 var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M71.333 62.917C72.1697 62.917 73.0017 62.965 73.8252 63.0576C65.2189 65.8659 59 73.9561 59 83.5C59 89.3767 61.3585 94.702 65.1797 98.583H13.375V85.208C13.3751 79.2961 15.724 73.6267 19.9043 69.4463C24.0848 65.2658 29.7549 62.917 35.667 62.917H71.333ZM53.5 9.41699C60.0033 9.41699 66.2403 12.0001 70.8389 16.5986C75.4374 21.1972 78.0205 27.4342 78.0205 33.9375C78.0205 40.4408 75.4374 46.6778 70.8389 51.2764C66.2403 55.8749 60.0033 58.458 53.5 58.458C46.9967 58.458 40.7597 55.8749 36.1611 51.2764C31.5626 46.6778 28.9795 40.4408 28.9795 33.9375C28.9795 27.4342 31.5626 21.1972 36.1611 16.5986C40.7597 12.0001 46.9967 9.41699 53.5 9.41699Z",
       fill: "currentColor"
     }
   ),
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M81.1936 70.3225C88.8545 70.3225 95.0646 76.5325 95.0646 84.1935C95.0646 91.8544 88.8545 98.0644 81.1936 98.0644C73.5327 98.0644 67.3226 91.8544 67.3226 84.1935C67.3226 76.5325 73.5327 70.3225 81.1936 70.3225ZM81.1936 75.8709C80.8257 75.8709 80.4729 76.017 80.2128 76.2772C79.9526 76.5373 79.8065 76.8901 79.8065 77.258V84.1935C79.8066 84.5613 79.9528 84.9141 80.2129 85.1742L84.3742 89.3354C84.6358 89.5881 84.9862 89.7279 85.3499 89.7248C85.7136 89.7216 86.0615 89.5757 86.3187 89.3185C86.5758 89.0614 86.7217 88.7135 86.7249 88.3498C86.728 87.9861 86.5882 87.6357 86.3356 87.3741L82.5807 83.6192V77.258C82.5807 76.8901 82.4346 76.5373 82.1744 76.2772C81.9143 76.017 81.5615 75.8709 81.1936 75.8709Z",
@@ -2825,21 +2986,21 @@ var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height:
   )
 ] });
 var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 3 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M1.47273 0.727539C1.90909 0.727539 2.27273 0.854812 2.56364 1.10936C2.85455 1.373 3 1.7639 3 2.28209C3 2.80027 2.85455 3.19118 2.56364 3.45481C2.27273 3.72754 1.90909 3.8639 1.47273 3.8639C1.05455 3.8639 0.704544 3.72754 0.422727 3.45481C0.140909 3.19118 -2.265e-08 2.80027 0 2.28209C2.265e-08 1.7639 0.140909 1.373 0.422728 1.10936C0.704544 0.854812 1.05455 0.727539 1.47273 0.727539Z",
       fill: "currentColor"
     }
   ),
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M1.47273 7.86426C1.90909 7.86426 2.27273 7.99152 2.56364 8.2461C2.85455 8.50974 3 8.90064 3 9.4188C3 9.93702 2.85455 10.3279 2.56364 10.5916C2.27273 10.8643 1.90909 11.0006 1.47273 11.0006C1.05455 11.0006 0.704544 10.8643 0.422727 10.5916C0.140909 10.3279 -2.265e-08 9.93702 0 9.4188C2.26506e-08 8.90064 0.140909 8.50974 0.422727 8.2461C0.704544 7.99152 1.05455 7.86426 1.47273 7.86426Z",
       fill: "currentColor"
     }
   ),
-  /* @__PURE__ */ jsx16(
+  /* @__PURE__ */ jsx17(
     "path",
     {
       d: "M1.47273 15C1.90909 15 2.27273 15.1273 2.56364 15.3818C2.85455 15.6454 3 16.0363 3 16.5545C3 17.0727 2.85455 17.4636 2.56364 17.7272C2.27273 18 1.90909 18.1363 1.47273 18.1363C1.05455 18.1363 0.704544 18 0.422727 17.7272C0.140909 17.4636 -2.26494e-08 17.0727 0 16.5545C2.26515e-08 16.0363 0.140909 15.6454 0.422727 15.3818C0.704544 15.1273 1.05455 15 1.47273 15Z",
@@ -2847,7 +3008,7 @@ var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16
     }
   )
 ] });
-var ShoutoutIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+var ShoutoutIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
   "path",
   {
     fillRule: "evenodd",
@@ -2856,7 +3017,7 @@ var ShoutoutIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16
     fill: "currentColor"
   }
 ) });
-var VipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+var VipIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
   "path",
   {
     fillRule: "evenodd",
@@ -2865,14 +3026,14 @@ var VipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", vi
     fill: "currentColor"
   }
 ) });
-var RemoveVipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+var RemoveVipIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
   "path",
   {
     d: "M17.9995 13C18.6561 13 19.3069 13.1296 19.9136 13.3809C20.5201 13.6321 21.0714 14.0006 21.5356 14.4648C21.9998 14.9291 22.3684 15.4804 22.6196 16.0869C22.8708 16.6934 22.9995 17.3435 22.9995 18C22.9995 18.6565 22.8708 19.3066 22.6196 19.9131C22.3684 20.5196 21.9998 21.0709 21.5356 21.5352C21.0714 21.9994 20.5201 22.3679 19.9136 22.6191C19.3069 22.8704 18.6561 23 17.9995 23C16.6736 22.9999 15.4019 22.4727 14.4644 21.5352C13.5268 20.5975 12.9995 19.326 12.9995 18C12.9995 16.674 13.5268 15.4025 14.4644 14.4648C15.4019 13.5273 16.6736 13.0001 17.9995 13ZM17.4204 3C17.7449 3.00004 18.0649 3.07933 18.3521 3.23047C18.6392 3.38169 18.8852 3.60063 19.0688 3.86816L19.1558 4.00781L22.4897 9.83984C22.6933 10.1958 22.7828 10.6063 22.7456 11.0146C22.7083 11.4229 22.5462 11.8098 22.2817 12.123L22.1675 12.2461L21.3745 13.0381C20.413 12.3829 19.2507 12 17.9995 12C14.686 12.0003 11.9995 14.6864 11.9995 18C11.9995 19.2515 12.3832 20.4134 13.0386 21.375L12.8853 21.5293C12.6676 21.7469 12.3771 21.8767 12.0698 21.8936C11.7625 21.9103 11.4593 21.8127 11.2192 21.6201L11.1167 21.5303L1.8335 12.2461C1.54369 11.9563 1.35037 11.5842 1.27881 11.1807C1.20728 10.777 1.26145 10.3611 1.43408 9.98926L1.51221 9.83887L4.84521 4.00684C5.00627 3.72505 5.23356 3.48685 5.50732 3.3125C5.78107 3.13819 6.09308 3.03263 6.4165 3.00586L6.57959 3H17.4204ZM15.2222 18.5557H20.7778V17.4443H15.2222V18.5557ZM16.0034 8.9873C15.8707 8.98848 15.7396 9.01695 15.6177 9.06934C15.4957 9.12174 15.3847 9.19748 15.2925 9.29297L11.9995 12.5859L8.70654 9.29297C8.51904 9.10565 8.26456 9 7.99951 9C7.73453 9.00013 7.47989 9.10561 7.29248 9.29297C7.10516 9.48047 7.00049 9.73495 7.00049 10C7.00049 10.265 7.10516 10.5195 7.29248 10.707L11.1157 14.5303C11.2318 14.6464 11.3703 14.7379 11.522 14.8008C11.6734 14.8635 11.8356 14.8964 11.9995 14.8965C12.1636 14.8965 12.3264 14.8636 12.478 14.8008C12.6297 14.7379 12.7682 14.6464 12.8843 14.5303L16.7065 10.707C16.802 10.6149 16.8787 10.5047 16.9312 10.3828C16.9836 10.2608 17.0111 10.1289 17.0122 9.99609C17.0133 9.86355 16.9881 9.73207 16.938 9.60938C16.8877 9.48649 16.8131 9.37416 16.7192 9.28027C16.6255 9.18657 16.5138 9.11273 16.3911 9.0625C16.2682 9.01223 16.1362 8.98615 16.0034 8.9873Z",
     fill: "currentColor"
   }
 ) });
-var ModeratorIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 20 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+var ModeratorIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 20 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
   "path",
   {
     fillRule: "evenodd",
@@ -2883,7 +3044,7 @@ var ModeratorIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "1
 ) });
 
 // src/components/ChatMessageItem/ChatMessageItem.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_MOD_ACTION_LABELS = {
   delete: "Delete Message",
   copy: "Copy to clipboard",
@@ -2908,10 +3069,10 @@ function ModActionButton({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx17(Tooltip3, { title, placement, children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(Tooltip4, { title, placement, children: /* @__PURE__ */ jsx18(
     "span",
     {
-      className: classNames7("ls-chat-message__modbtn", { "ls-chat-message__modbtn--danger": danger }),
+      className: classNames6("ls-chat-message__modbtn", { "ls-chat-message__modbtn--danger": danger }),
       onClick,
       children
     }
@@ -2955,7 +3116,7 @@ function ChatMessageItem({
   const [menuPosition, setMenuPosition] = useState6(null);
   const [menuAnchorEl, setMenuAnchorEl] = useState6(null);
   const name = displayname || username;
-  const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx17(PlatformIcon, { platform }) : null);
+  const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx18(PlatformIcon, { platform }) : null);
   const has = (action) => Boolean(modActions?.includes(action));
   const label = (action) => modActionLabels?.[action] ?? DEFAULT_MOD_ACTION_LABELS[action];
   const vipAction = isVip ? "remove-vip" : "add-vip";
@@ -2990,34 +3151,34 @@ function ChatMessageItem({
         closeMenu();
       },
       children: [
-        /* @__PURE__ */ jsx17(ListItemIcon, { children: /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
-        /* @__PURE__ */ jsx17(ListItemText, { children: label(action) })
+        /* @__PURE__ */ jsx18(ListItemIcon, { children: /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
+        /* @__PURE__ */ jsx18(ListItemText, { children: label(action) })
       ]
     },
     action
   ) : null;
   const builtInActions = hasVisibleModActions && hovered && !actions ? /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__modbar", children: [
-    has("delete") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx17(DeleteIcon, {}) }),
-    has("pin") && /* @__PURE__ */ jsx17(
+    has("delete") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx18(DeleteIcon, {}) }),
+    has("pin") && /* @__PURE__ */ jsx18(
       ModActionButton,
       {
         title: label(isPinned ? "unpin" : "pin"),
         placement: modActionsTooltipPlacement,
         onClick: () => fire(isPinned ? "unpin" : "pin"),
-        children: isPinned ? /* @__PURE__ */ jsx17(PinOffIcon, {}) : /* @__PURE__ */ jsx17(PinOnIcon, {})
+        children: isPinned ? /* @__PURE__ */ jsx18(PinOffIcon, {}) : /* @__PURE__ */ jsx18(PinOnIcon, {})
       }
     ),
-    has("copy") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx17(CopyIcon, {}) }),
-    has("translate") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx17(TranslateIcon, {}) }),
-    has("ban") && !isSelf && /* @__PURE__ */ jsx17(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx17(BanUserIcon, {}) }),
-    has("timeout") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx17(TimeoutUserIcon, {}) }),
-    hasOverflowMenuItems && /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx17(MenuDotsIcon, {}) })
+    has("copy") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx18(CopyIcon, {}) }),
+    has("translate") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx18(TranslateIcon, {}) }),
+    has("ban") && !isSelf && /* @__PURE__ */ jsx18(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx18(BanUserIcon, {}) }),
+    has("timeout") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx18(TimeoutUserIcon, {}) }),
+    hasOverflowMenuItems && /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx18(MenuDotsIcon, {}) })
   ] }) : null;
   const actionsNode = actions ?? builtInActions;
   return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: classNames7("ls-chat-message", className),
+      className: classNames6("ls-chat-message", className),
       title,
       onClick: () => {
         closeMenu();
@@ -3033,12 +3194,12 @@ function ChatMessageItem({
         onMouseLeave?.();
       },
       children: [
-        reply ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__reply", children: reply }) : null,
-        showAvatar && avatarPrefix ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
-        showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx17("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
-        siteIcon ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
-        showTimestamp && timestamp ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__time", children: timestamp }) : null,
-        showBadges && badges ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__badges", children: badges }) : null,
+        reply ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__reply", children: reply }) : null,
+        showAvatar && avatarPrefix ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
+        showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx18("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
+        siteIcon ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
+        showTimestamp && timestamp ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__time", children: timestamp }) : null,
+        showBadges && badges ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__badges", children: badges }) : null,
         onUsernameClick ? /* @__PURE__ */ jsxs8(
           "button",
           {
@@ -3059,8 +3220,8 @@ function ChatMessageItem({
           ":"
         ] }),
         " ",
-        /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__text", children: message }),
-        actionsNode ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
+        /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__text", children: message }),
+        actionsNode ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
         onModAction && hasOverflowMenuItems ? /* @__PURE__ */ jsxs8(
           Menu,
           {
@@ -3072,10 +3233,10 @@ function ChatMessageItem({
             anchorOrigin: modMenuAnchor === "element" ? { vertical: "bottom", horizontal: "right" } : void 0,
             transformOrigin: modMenuAnchor === "element" ? { vertical: "top", horizontal: "right" } : void 0,
             children: [
-              menuItem("shoutout", /* @__PURE__ */ jsx17(ShoutoutIcon, {})),
-              menuItem(vipAction, isVip ? /* @__PURE__ */ jsx17(RemoveVipIcon, {}) : /* @__PURE__ */ jsx17(VipIcon, {})),
-              menuItem(moderatorAction, /* @__PURE__ */ jsx17(ModeratorIcon, {})),
-              menuItem("unban", /* @__PURE__ */ jsx17(BanUserIcon, {}))
+              menuItem("shoutout", /* @__PURE__ */ jsx18(ShoutoutIcon, {})),
+              menuItem(vipAction, isVip ? /* @__PURE__ */ jsx18(RemoveVipIcon, {}) : /* @__PURE__ */ jsx18(VipIcon, {})),
+              menuItem(moderatorAction, /* @__PURE__ */ jsx18(ModeratorIcon, {})),
+              menuItem("unban", /* @__PURE__ */ jsx18(BanUserIcon, {}))
             ]
           }
         ) : null
@@ -3088,7 +3249,7 @@ ChatMessageItem.displayName = "ChatMessageItem";
 // src/components/ChatboxPanel/ChatboxPanel.tsx
 import { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
 import MenuItem3 from "@mui/material/MenuItem";
-import classNames8 from "classnames";
+import classNames7 from "classnames";
 
 // src/components/ChatboxPanel/useAutoScroll.ts
 import { useCallback as useCallback3, useRef as useRef5, useState as useState7 } from "react";
@@ -3131,7 +3292,7 @@ var useAutoScroll = (threshold = 24, options) => {
 };
 
 // src/components/ChatboxPanel/ChatboxPanel.tsx
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 function ChatboxPanel({
   children,
   messageCount,
@@ -3224,9 +3385,9 @@ function ChatboxPanel({
       setInternalValue("");
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: classNames8("ls-chatbox", className), id, children: [
+  return /* @__PURE__ */ jsxs9("div", { className: classNames7("ls-chatbox", className), id, children: [
     /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__viewport", children: [
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         "div",
         {
           className: "ls-chatbox__list",
@@ -3254,7 +3415,7 @@ function ChatboxPanel({
             /* @__PURE__ */ jsxs9(
               "svg",
               {
-                className: classNames8("ls-chatbox__jump-arrow", { "ls-chatbox__jump-arrow--up": reverse }),
+                className: classNames7("ls-chatbox__jump-arrow", { "ls-chatbox__jump-arrow--up": reverse }),
                 width: "14",
                 height: "14",
                 viewBox: "0 0 24 24",
@@ -3264,19 +3425,19 @@ function ChatboxPanel({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ jsx18("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-                  /* @__PURE__ */ jsx18("polyline", { points: "19 12 12 19 5 12" })
+                  /* @__PURE__ */ jsx19("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                  /* @__PURE__ */ jsx19("polyline", { points: "19 12 12 19 5 12" })
                 ]
               }
             ),
             jumpToLatestLabel,
-            unreadCount > 0 && /* @__PURE__ */ jsx18("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
+            unreadCount > 0 && /* @__PURE__ */ jsx19("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
           ]
         }
       )
     ] }),
     showSendBar && onSend ? /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__sendbar", children: [
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         LSInput,
         {
           className: "ls-chatbox__input",
@@ -3298,9 +3459,9 @@ function ChatboxPanel({
           displayEmpty: true,
           onChange: (e) => onPlatformChange?.(String(e.target.value)),
           children: [
-            allPlatformsLabel != null && /* @__PURE__ */ jsx18(MenuItem3, { value: "", children: allPlatformsLabel }),
-            platforms?.map((option) => /* @__PURE__ */ jsx18(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs9("span", { className: "ls-chatbox__platform-option", children: [
-              /* @__PURE__ */ jsx18(PlatformIcon, { platform: option.value, fallback: false }),
+            allPlatformsLabel != null && /* @__PURE__ */ jsx19(MenuItem3, { value: "", children: allPlatformsLabel }),
+            platforms?.map((option) => /* @__PURE__ */ jsx19(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs9("span", { className: "ls-chatbox__platform-option", children: [
+              /* @__PURE__ */ jsx19(PlatformIcon, { platform: option.value, fallback: false }),
               option.label
             ] }) }, option.value))
           ]
@@ -3314,12 +3475,12 @@ function ChatboxPanel({
           value: chatAs ?? "self",
           onChange: (e) => onChatAsChange(e.target.value === "bot" ? "bot" : "self"),
           children: [
-            /* @__PURE__ */ jsx18(MenuItem3, { value: "self", children: chatAsSelfLabel }),
-            /* @__PURE__ */ jsx18(MenuItem3, { value: "bot", children: chatAsBotLabel })
+            /* @__PURE__ */ jsx19(MenuItem3, { value: "self", children: chatAsSelfLabel }),
+            /* @__PURE__ */ jsx19(MenuItem3, { value: "bot", children: chatAsBotLabel })
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         LSButton,
         {
           className: "ls-chatbox__send",
@@ -3337,8 +3498,8 @@ ChatboxPanel.displayName = "ChatboxPanel";
 // src/components/ModalChrome/DialogChrome.tsx
 import Fade from "@mui/material/Fade";
 import Modal from "@mui/material/Modal";
-import classNames9 from "classnames";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import classNames8 from "classnames";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var DIMENSIONS = {
   small: { width: "30%", height: "30%" },
   longS: { width: "50%", height: "30%" },
@@ -3350,14 +3511,14 @@ var DIMENSIONS = {
   full: { width: "100%", height: "calc(100% - 1rem)" }
 };
 var DefaultCloseIcon = () => /* @__PURE__ */ jsxs10("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ jsx19("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
-  /* @__PURE__ */ jsx19("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
+  /* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx20("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx20("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
 ] });
 var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
   const modalBackground = overlayProps?.background ? overlayProps.background : !overlayProps?.noBackground ? "var(--gradientBg, var(--background, #151230))" : void 0;
   const dimensions = overlayProps?.size && DIMENSIONS[overlayProps.size] || { width: "90%", height: "90%" };
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     Modal,
     {
       disableEnforceFocus: true,
@@ -3368,10 +3529,10 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
       },
       className: "ls-dialog",
       style: { ...props.style, zIndex: `${props.zIndex ? props.zIndex : "2500"} !important` },
-      children: /* @__PURE__ */ jsx19(Fade, { in: props.open, children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsx20(Fade, { in: props.open, children: /* @__PURE__ */ jsxs10(
         "div",
         {
-          className: classNames9("ls-dialog__card", {
+          className: classNames8("ls-dialog__card", {
             "ls-dialog__card--pad": !overlayProps?.noOuterPadding,
             "ls-dialog__card--full": overlayProps?.size === "full"
           }),
@@ -3386,29 +3547,29 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
             !props.$hideTop && /* @__PURE__ */ jsxs10(
               "div",
               {
-                className: classNames9("ls-dialog__top", { "ls-dialog__top--full": overlayProps?.size === "full" }),
+                className: classNames8("ls-dialog__top", { "ls-dialog__top--full": overlayProps?.size === "full" }),
                 style: { padding: props.$noPadTitle ? "0" : "1rem" },
                 children: [
-                  /* @__PURE__ */ jsx19("div", { className: "ls-dialog__top-side", children: props.$leftText }),
-                  /* @__PURE__ */ jsx19("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
-                  props.hideClose ? /* @__PURE__ */ jsx19("div", { className: "ls-dialog__top-side" }) : /* @__PURE__ */ jsx19("div", { className: "ls-dialog__close", children: /* @__PURE__ */ jsxs10("span", { onClick: props.close, className: "ls-dialog__close-btn", children: [
-                    /* @__PURE__ */ jsx19("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
-                    closeIcon ?? /* @__PURE__ */ jsx19(DefaultCloseIcon, {})
+                  /* @__PURE__ */ jsx20("div", { className: "ls-dialog__top-side", children: props.$leftText }),
+                  /* @__PURE__ */ jsx20("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
+                  props.hideClose ? /* @__PURE__ */ jsx20("div", { className: "ls-dialog__top-side" }) : /* @__PURE__ */ jsx20("div", { className: "ls-dialog__close", children: /* @__PURE__ */ jsxs10("span", { onClick: props.close, className: "ls-dialog__close-btn", children: [
+                    /* @__PURE__ */ jsx20("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
+                    closeIcon ?? /* @__PURE__ */ jsx20(DefaultCloseIcon, {})
                   ] }) })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(
               "div",
               {
-                className: classNames9("ls-dialog__body", props.containerClass),
+                className: classNames8("ls-dialog__body", props.containerClass),
                 style: { backgroundImage: props.backgroundImage ? `url(${props.backgroundImage})` : "", padding: props.noPadding ? 0 : "20px 0" },
                 children
               }
             ),
             !props.$hideBottom && /* @__PURE__ */ jsxs10("div", { className: "ls-dialog__bottom", children: [
-              /* @__PURE__ */ jsx19(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
-              props.showTest && /* @__PURE__ */ jsx19(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
+              /* @__PURE__ */ jsx20(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
+              props.showTest && /* @__PURE__ */ jsx20(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
             ] })
           ]
         }
@@ -3419,11 +3580,11 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
 DialogChrome.displayName = "DialogChrome";
 
 // src/components/ModalChrome/ModalChrome.tsx
-import classNames11 from "classnames";
+import classNames10 from "classnames";
 
 // src/components/ModalChrome/PanelChrome.tsx
-import classNames10 from "classnames";
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import classNames9 from "classnames";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function PanelChrome({
   title,
   titleVariant = "heading",
@@ -3440,20 +3601,20 @@ function PanelChrome({
 }) {
   const hasHeader = Boolean(title || headerActions || onClose && showClose);
   const mergedStyle = padding ? { ...style, ["--ls-panel-padding"]: padding } : style;
-  const panel = /* @__PURE__ */ jsxs11("div", { className: classNames10("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
+  const panel = /* @__PURE__ */ jsxs11("div", { className: classNames9("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
     hasHeader ? /* @__PURE__ */ jsxs11("div", { className: "ls-panel__header", children: [
-      title ? /* @__PURE__ */ jsx20("span", { className: classNames10("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx20("span", {}),
+      title ? /* @__PURE__ */ jsx21("span", { className: classNames9("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx21("span", {}),
       /* @__PURE__ */ jsxs11("span", { className: "ls-panel__header-actions", children: [
         headerActions,
-        onClose && showClose ? /* @__PURE__ */ jsx20("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
+        onClose && showClose ? /* @__PURE__ */ jsx21("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx20("div", { className: classNames10("ls-panel__body", bodyClassName), children }),
-    footer ? /* @__PURE__ */ jsx20("div", { className: "ls-panel__footer", children: footer }) : null
+    /* @__PURE__ */ jsx21("div", { className: classNames9("ls-panel__body", bodyClassName), children }),
+    footer ? /* @__PURE__ */ jsx21("div", { className: "ls-panel__footer", children: footer }) : null
   ] });
   if (onClickAway) {
     return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-      /* @__PURE__ */ jsx20("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
+      /* @__PURE__ */ jsx21("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
       panel
     ] });
   }
@@ -3462,7 +3623,7 @@ function PanelChrome({
 PanelChrome.displayName = "PanelChrome";
 
 // src/components/ModalChrome/ModalChrome.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function ModalChrome({
   open = true,
   onClose,
@@ -3487,12 +3648,12 @@ function ModalChrome({
     return null;
   }
   const mergedCardStyle = maxWidth ? { ...cardStyle, ["--ls-modal-max-width"]: maxWidth } : cardStyle;
-  return /* @__PURE__ */ jsxs12("div", { className: classNames11("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
-    /* @__PURE__ */ jsx21("div", { className: classNames11("ls-modal__backdrop", backdropClassName), onClick: onClose }),
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs12("div", { className: classNames10("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
+    /* @__PURE__ */ jsx22("div", { className: classNames10("ls-modal__backdrop", backdropClassName), onClick: onClose }),
+    /* @__PURE__ */ jsx22(
       PanelChrome,
       {
-        className: classNames11(
+        className: classNames10(
           "ls-modal__card",
           { "ls-modal__card--fit": fitContent, "ls-modal__card--center": centerContent },
           cardClassName
@@ -3514,32 +3675,32 @@ function ModalChrome({
 ModalChrome.displayName = "ModalChrome";
 
 // src/components/WidgetChrome/WidgetChrome.tsx
-import classNames12 from "classnames";
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import classNames11 from "classnames";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function WidgetChromeButton({ active, buttonRef, className, children, ...rest }) {
-  return /* @__PURE__ */ jsx22("button", { ref: buttonRef, type: "button", className: classNames12("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
+  return /* @__PURE__ */ jsx23("button", { ref: buttonRef, type: "button", className: classNames11("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
 }
 WidgetChromeButton.displayName = "WidgetChromeButton";
 function WidgetChrome({ title, leftActions, rightActions, headerExtra, showHeader = true, className, headerClassName, bodyClassName, style, id, children }) {
-  return /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget", className), style, id, children: [
-    showHeader ? /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget__header", headerClassName), children: [
-      /* @__PURE__ */ jsx22("div", { className: "ls-widget__side", children: leftActions }),
-      /* @__PURE__ */ jsx22("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx22("span", { children: title }) }),
-      /* @__PURE__ */ jsx22("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
+  return /* @__PURE__ */ jsxs13("div", { className: classNames11("ls-widget", className), style, id, children: [
+    showHeader ? /* @__PURE__ */ jsxs13("div", { className: classNames11("ls-widget__header", headerClassName), children: [
+      /* @__PURE__ */ jsx23("div", { className: "ls-widget__side", children: leftActions }),
+      /* @__PURE__ */ jsx23("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx23("span", { children: title }) }),
+      /* @__PURE__ */ jsx23("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
       headerExtra
     ] }) : null,
-    /* @__PURE__ */ jsx22("div", { className: classNames12("ls-widget__body", bodyClassName), children })
+    /* @__PURE__ */ jsx23("div", { className: classNames11("ls-widget__body", bodyClassName), children })
   ] });
 }
 WidgetChrome.displayName = "WidgetChrome";
 
 // src/components/EventListItem/EventListItem.tsx
-import classNames13 from "classnames";
+import classNames12 from "classnames";
 
 // src/components/EventList/EventTypeIcon.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var createEventIcon = (def) => {
-  const Icon = (props) => /* @__PURE__ */ jsx23("svg", { width: def.width, height: def.height, viewBox: def.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: def.paths.map((path, index) => /* @__PURE__ */ jsx23("path", { fill: "currentColor", ...path }, index)) });
+  const Icon = (props) => /* @__PURE__ */ jsx24("svg", { width: def.width, height: def.height, viewBox: def.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: def.paths.map((path, index) => /* @__PURE__ */ jsx24("path", { fill: "currentColor", ...path }, index)) });
   return Icon;
 };
 var EVENT_TYPE_FALLBACK_ICON = createEventIcon({ width: "77", height: "77", viewBox: "0 0 77 77", paths: [{ d: "M32.0348 67.8488C32.2317 68.9076 33.1257 69.6727 34.166 69.6727H41.7175C42.9162 69.6727 43.8879 68.6655 43.8879 67.4232C43.8879 66.1808 42.9162 65.1736 41.7175 65.1736H35.9581L35.8144 64.4007H43.1152C44.2884 64.4007 45.2493 63.4344 45.2847 62.219C45.5196 54.1506 48.6247 48.8606 51.9394 43.5096C52.0669 43.3038 52.1949 43.0976 52.3233 42.8909C55.5088 37.7611 58.9 32.3001 58.9 24.5131C58.9 17.6282 56.2649 12.4215 52.2565 8.9757C48.3033 5.57735 43.149 4 38.1777 4C28.6499 4 18 11.1793 18 24.739C18 31.851 21.089 38.0439 24.0565 43.3454C24.5114 44.1581 24.9596 44.943 25.3964 45.7078C26.4256 47.5099 27.3909 49.2003 28.229 50.8789C29.4122 53.2488 30.2139 55.3578 30.4727 57.3163C30.6216 58.4425 31.5576 59.2766 32.6541 59.2603C33.7507 59.244 34.6633 58.3825 34.7809 57.2524C34.9706 55.4309 35.9174 53.2643 37.4928 50.7048C38.8347 48.5248 40.4985 46.2646 42.2571 43.8756C42.5436 43.4864 42.8327 43.0937 43.1233 42.6975C45.1598 39.9201 47.2572 36.9825 48.8406 34.0308C50.417 31.0923 51.6027 27.9286 51.6027 24.7014C51.6027 20.79 50.1716 17.467 47.6813 15.1412C45.2141 12.8368 41.8546 11.6443 38.1777 11.6443C30.9242 11.6443 25.2973 17.6891 25.2973 24.7014C25.2973 26.7539 25.6936 29.8348 26.7508 32.4851C27.7593 35.0129 29.7798 38.0597 33.4218 38.0597C35.1995 38.0597 36.6557 37.3883 37.738 36.2561C38.7611 35.1859 39.3371 33.826 39.6795 32.5814C40.3187 30.2583 40.3144 27.6507 40.3121 26.2771C40.312 26.1997 40.3118 26.1263 40.3118 26.057C40.3118 24.8147 39.3401 23.8075 38.1414 23.8075C36.9427 23.8075 35.971 24.8147 35.971 26.057L35.971 26.1579C35.9713 27.6034 35.9717 29.6519 35.5051 31.3476C35.2712 32.1976 34.969 32.7605 34.6545 33.0895C34.3992 33.3566 34.0583 33.5607 33.4218 33.5607C32.5619 33.5607 31.6054 32.8794 30.7623 30.766C29.968 28.7751 29.6382 26.3016 29.6382 24.7014C29.6382 20.1907 33.3053 16.1434 38.1777 16.1434C40.9631 16.1434 43.231 17.0409 44.7754 18.4834C46.2969 19.9044 47.2619 21.9851 47.2619 24.7014C47.2619 26.8215 46.469 29.1934 45.0468 31.8445C43.6316 34.4825 41.7105 37.1887 39.6673 39.9752C39.3877 40.3564 39.1055 40.7396 38.8222 41.1243C37.0726 43.5001 35.2818 45.9317 33.8333 48.2851C33.4508 48.9065 33.0824 49.5373 32.7382 50.1753C32.5285 49.7174 32.3096 49.2626 32.0842 48.8112C31.1862 47.0126 30.1213 45.1476 29.064 43.2961C28.6415 42.5561 28.2201 41.8183 27.8112 41.0877C24.861 35.817 22.3408 30.5434 22.3408 24.739C22.3408 14.1984 30.497 8.49902 38.1777 8.49902C42.3191 8.49902 46.4406 9.82125 49.4853 12.4386C52.4747 15.0085 54.5592 18.9335 54.5592 24.5131C54.5592 30.9585 51.7975 35.4143 48.5022 40.7311C48.4306 40.8466 48.3587 40.9625 48.2866 41.0789C45.1891 46.0794 41.8063 51.7178 41.0743 59.9017H33.1858C32.5382 59.9017 31.9245 60.2014 31.5122 60.7189C31.0998 61.2365 30.932 61.9178 31.0546 62.5769L32.0348 67.8488Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M41.1547 70.6428C41.1547 72.7023 39.6065 73.2035 37.6967 73.2035C35.7868 73.2035 34.2386 72.7023 34.2386 70.6428H41.1547Z" }, { d: "M45.3289 28.7231C45.4774 28.3343 45.2937 27.8944 44.9186 27.7405L42.3201 26.6745C41.945 26.5206 41.5206 26.7111 41.3721 27.0998C41.2237 27.4886 41.4074 27.9285 41.7825 28.0823L44.381 29.1484C44.7561 29.3022 45.1805 29.1118 45.3289 28.7231Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M31.4505 29.2716C31.6184 29.6518 32.0518 29.819 32.4186 29.6451L34.96 28.44C35.3268 28.2661 35.4881 27.8169 35.3203 27.4367C35.1525 27.0565 34.7191 26.8893 34.3522 27.0632L31.8109 28.2682C31.444 28.4422 31.2827 28.8914 31.4505 29.2716Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M35.3 24.9243C35.4287 24.528 35.223 24.0987 34.8407 23.9653L32.1921 23.0417C31.8098 22.9084 31.3955 23.1215 31.2669 23.5178C31.1382 23.9141 31.3439 24.3434 31.7262 24.4768L34.3748 25.4004C34.7571 25.5337 35.1714 25.3206 35.3 24.9243Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M36.7911 23.1649C37.1695 23.0199 37.3629 22.5845 37.223 22.1923L36.2535 19.474C36.1137 19.0818 35.6936 18.8814 35.3152 19.0263C34.9368 19.1713 34.7434 19.6067 34.8833 19.9989L35.8528 22.7173C35.9926 23.1094 36.4127 23.3098 36.7911 23.1649Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M39.5322 23.0163C39.911 23.1602 40.3305 22.9585 40.4693 22.5659L41.4314 19.8448C41.5702 19.4522 41.3757 19.0173 40.9969 18.8735C40.6181 18.7296 40.1986 18.9313 40.0598 19.3238L39.0977 22.045C38.9589 22.4376 39.1534 22.8724 39.5322 23.0163Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M41.3214 24.7192C41.4951 25.0965 41.9311 25.2564 42.2952 25.0763L44.8173 23.8284C45.1813 23.6483 45.3356 23.1964 45.1618 22.8191C44.988 22.4418 44.552 22.2819 44.1879 22.4621L41.6659 23.7099C41.3018 23.89 41.1476 24.3419 41.3214 24.7192Z", fillRule: "evenodd", clipRule: "evenodd" }] });
@@ -3567,12 +3728,12 @@ var EVENT_TYPE_ICONS = {
 };
 function EventTypeIcon({ type, ...props }) {
   const Icon = (type != null ? EVENT_TYPE_ICONS[String(type).trim().toLowerCase()] : void 0) ?? EVENT_TYPE_FALLBACK_ICON;
-  return /* @__PURE__ */ jsx23(Icon, { ...props });
+  return /* @__PURE__ */ jsx24(Icon, { ...props });
 }
 EventTypeIcon.displayName = "EventTypeIcon";
 
 // src/components/EventListItem/EventListItem.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function EventListItem({
   username,
   message,
@@ -3593,7 +3754,7 @@ function EventListItem({
   onUsernameClick,
   className
 }) {
-  const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx24(EventTypeIcon, { type: eventType }) : null);
+  const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx25(EventTypeIcon, { type: eventType }) : null);
   const style = {};
   if (accentColor) {
     style.borderLeftColor = accentColor;
@@ -3601,13 +3762,13 @@ function EventListItem({
   if (colorFullBackground && accentColor) {
     style.backgroundColor = `color-mix(in srgb, ${accentColor} 22%, var(--cardbackground, var(--neutralDark2, #211d3e)))`;
   }
-  return /* @__PURE__ */ jsxs14("div", { className: classNames13("ls-eventlist-item", className), style, children: [
+  return /* @__PURE__ */ jsxs14("div", { className: classNames12("ls-eventlist-item", className), style, children: [
     /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__main", children: [
       /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__identity", children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "span",
           {
-            className: classNames13("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
+            className: classNames12("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
             role: onUsernameClick ? "button" : void 0,
             tabIndex: onUsernameClick ? 0 : void 0,
             onClick: onUsernameClick,
@@ -3620,9 +3781,9 @@ function EventListItem({
             children: username
           }
         ),
-        platformIcon ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
-        showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx24("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
-        resolvedAlertIcon ? /* @__PURE__ */ jsx24(
+        platformIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
+        showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx25("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
+        resolvedAlertIcon ? /* @__PURE__ */ jsx25(
           "span",
           {
             className: "ls-eventlist-item__icon",
@@ -3630,27 +3791,27 @@ function EventListItem({
             children: resolvedAlertIcon
           }
         ) : null,
-        amountBadge != null ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__amount", style: accentColor ? { color: accentColor } : void 0, children: amountBadge }) : null
+        amountBadge != null ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__amount", style: accentColor ? { color: accentColor } : void 0, children: amountBadge }) : null
       ] }),
       /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__body", children: [
-        message ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__message", children: message }) : null,
+        message ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__message", children: message }) : null,
         showMessage && userMessage ? /* @__PURE__ */ jsxs14("span", { className: "ls-eventlist-item__usermessage", children: [
           "\u201C",
           userMessage,
           "\u201D"
         ] }) : null
       ] }),
-      showTimestamp && timestamp ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
+      showTimestamp && timestamp ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx24("div", { className: "ls-eventlist-item__actions", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx25("div", { className: "ls-eventlist-item__actions", children: actions }) : null
   ] });
 }
 EventListItem.displayName = "EventListItem";
 
 // src/components/EventList/EventList.tsx
 import { useEffect as useEffect7, useRef as useRef7 } from "react";
-import classNames14 from "classnames";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import classNames13 from "classnames";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var PIN_THRESHOLD = 24;
 function EventList({
   items,
@@ -3694,17 +3855,17 @@ function EventList({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ jsx25("div", { className: classNames14("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
-    emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
-    /* @__PURE__ */ jsx25("span", { children: emptyText })
-  ] }) : /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26("div", { className: classNames13("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames13("ls-eventlist__empty", emptyClassName), children: [
+    emptyIcon ? /* @__PURE__ */ jsx26("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
+    /* @__PURE__ */ jsx26("span", { children: emptyText })
+  ] }) : /* @__PURE__ */ jsx26(
     "div",
     {
       className: "ls-eventlist__list",
       ref: listRef,
       onScroll: handleScroll,
       style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
-      children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
+      children: items.map((item) => /* @__PURE__ */ jsx26("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx26(
         EventListItem,
         {
           username: item.username,
@@ -3713,7 +3874,7 @@ function EventList({
           avatar: item.avatar,
           fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
           timestamp: item.timestamp,
-          platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
+          platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx26(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
           alertIcon: item.alertIcon,
           amountBadge: item.amountBadge,
           eventType: item.eventType,
@@ -3732,9 +3893,9 @@ function EventList({
 EventList.displayName = "EventList";
 
 // src/components/StreamStatusPanel/StreamStatusPanel.tsx
-import Tooltip4 from "@mui/material/Tooltip";
-import classNames15 from "classnames";
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import Tooltip5 from "@mui/material/Tooltip";
+import classNames14 from "classnames";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var LS_INFO_TOOLTIP_SX = {
   backgroundColor: "#1b1834",
   border: "1px solid #393853",
@@ -3747,8 +3908,8 @@ var LS_INFO_TOOLTIP_SX = {
   boxShadow: "0 10px 30px rgba(0, 0, 0, 0.45)"
 };
 var formatStatValue = (value) => value >= 1e3 ? `${value.toString().slice(0, -3)} K` : value.toString();
-var TrendUpArrow = () => /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx26("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.50059 8C3.36798 8 3.2408 7.94732 3.14704 7.85355C3.05327 7.75978 3.00059 7.63261 3.00059 7.5L3.00059 1.707L0.854589 3.854C0.808102 3.90049 0.752912 3.93736 0.692173 3.96252C0.631433 3.98768 0.566333 4.00063 0.500589 4.00063C0.434845 4.00063 0.369745 3.98768 0.309006 3.96252C0.248266 3.93736 0.193077 3.90049 0.146589 3.854C0.100101 3.80751 0.0632247 3.75232 0.0380658 3.69158C0.0129069 3.63084 -4.20509e-05 3.56574 -4.20451e-05 3.5C-4.20394e-05 3.43426 0.012907 3.36916 0.0380658 3.30842C0.0632247 3.24768 0.100101 3.19249 0.146589 3.146L3.14659 0.146C3.19304 0.0994364 3.24821 0.0624939 3.30896 0.0372874C3.3697 0.0120808 3.43482 -0.000893905 3.50059 -0.000893899C3.56636 -0.000893893 3.63148 0.0120809 3.69222 0.0372874C3.75297 0.062494 3.80814 0.0994365 3.85459 0.146L6.85459 3.146C6.90108 3.19249 6.93795 3.24768 6.96311 3.30842C6.98827 3.36916 7.00122 3.43426 7.00122 3.5C7.00122 3.56574 6.98827 3.63084 6.96311 3.69158C6.93795 3.75232 6.90108 3.80751 6.85459 3.854C6.7607 3.94789 6.63336 4.00063 6.50059 4.00063C6.43485 4.00063 6.36975 3.98768 6.30901 3.96252C6.24827 3.93736 6.19308 3.90049 6.14659 3.854L4.00059 1.707L4.00059 7.5C4.00059 7.63261 3.94791 7.75978 3.85414 7.85355C3.76037 7.94732 3.6332 8 3.50059 8Z", fill: "currentColor" }) });
-var TrendDownArrow = () => /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx26("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.50063 0C3.63324 0 3.76042 0.0526785 3.85419 0.146447C3.94795 0.240215 4.00063 0.367392 4.00063 0.5L4.00063 6.293L6.14663 4.146C6.19312 4.09951 6.24831 4.06264 6.30905 4.03748C6.36979 4.01232 6.43489 3.99937 6.50063 3.99937C6.56638 3.99937 6.63148 4.01232 6.69222 4.03748C6.75295 4.06264 6.80814 4.09951 6.85463 4.146C6.90112 4.19249 6.938 4.24768 6.96316 4.30842C6.98831 4.36916 7.00126 4.43426 7.00126 4.5C7.00126 4.56574 6.98831 4.63084 6.96316 4.69158C6.938 4.75232 6.90112 4.80751 6.85463 4.854L3.85463 7.854C3.80819 7.90056 3.75301 7.93751 3.69227 7.96271C3.63152 7.98792 3.5664 8.00089 3.50063 8.00089C3.43486 8.00089 3.36974 7.98792 3.309 7.96271C3.24825 7.93751 3.19308 7.90056 3.14663 7.854L0.146632 4.854C0.100144 4.80751 0.0632674 4.75232 0.0381083 4.69158C0.0129493 4.63084 0 4.56574 0 4.5C0 4.43426 0.0129493 4.36916 0.0381083 4.30842C0.0632674 4.24768 0.100144 4.19249 0.146632 4.146C0.240518 4.05211 0.367856 3.99937 0.500632 3.99937C0.566376 3.99937 0.631476 4.01232 0.692215 4.03748C0.752955 4.06264 0.808144 4.09951 0.854632 4.146L3.00063 6.293L3.00063 0.5C3.00063 0.367392 3.05331 0.240215 3.14708 0.146447C3.24085 0.0526785 3.36802 0 3.50063 0Z", fill: "currentColor" }) });
+var TrendUpArrow = () => /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx27("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.50059 8C3.36798 8 3.2408 7.94732 3.14704 7.85355C3.05327 7.75978 3.00059 7.63261 3.00059 7.5L3.00059 1.707L0.854589 3.854C0.808102 3.90049 0.752912 3.93736 0.692173 3.96252C0.631433 3.98768 0.566333 4.00063 0.500589 4.00063C0.434845 4.00063 0.369745 3.98768 0.309006 3.96252C0.248266 3.93736 0.193077 3.90049 0.146589 3.854C0.100101 3.80751 0.0632247 3.75232 0.0380658 3.69158C0.0129069 3.63084 -4.20509e-05 3.56574 -4.20451e-05 3.5C-4.20394e-05 3.43426 0.012907 3.36916 0.0380658 3.30842C0.0632247 3.24768 0.100101 3.19249 0.146589 3.146L3.14659 0.146C3.19304 0.0994364 3.24821 0.0624939 3.30896 0.0372874C3.3697 0.0120808 3.43482 -0.000893905 3.50059 -0.000893899C3.56636 -0.000893893 3.63148 0.0120809 3.69222 0.0372874C3.75297 0.062494 3.80814 0.0994365 3.85459 0.146L6.85459 3.146C6.90108 3.19249 6.93795 3.24768 6.96311 3.30842C6.98827 3.36916 7.00122 3.43426 7.00122 3.5C7.00122 3.56574 6.98827 3.63084 6.96311 3.69158C6.93795 3.75232 6.90108 3.80751 6.85459 3.854C6.7607 3.94789 6.63336 4.00063 6.50059 4.00063C6.43485 4.00063 6.36975 3.98768 6.30901 3.96252C6.24827 3.93736 6.19308 3.90049 6.14659 3.854L4.00059 1.707L4.00059 7.5C4.00059 7.63261 3.94791 7.75978 3.85414 7.85355C3.76037 7.94732 3.6332 8 3.50059 8Z", fill: "currentColor" }) });
+var TrendDownArrow = () => /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx27("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.50063 0C3.63324 0 3.76042 0.0526785 3.85419 0.146447C3.94795 0.240215 4.00063 0.367392 4.00063 0.5L4.00063 6.293L6.14663 4.146C6.19312 4.09951 6.24831 4.06264 6.30905 4.03748C6.36979 4.01232 6.43489 3.99937 6.50063 3.99937C6.56638 3.99937 6.63148 4.01232 6.69222 4.03748C6.75295 4.06264 6.80814 4.09951 6.85463 4.146C6.90112 4.19249 6.938 4.24768 6.96316 4.30842C6.98831 4.36916 7.00126 4.43426 7.00126 4.5C7.00126 4.56574 6.98831 4.63084 6.96316 4.69158C6.938 4.75232 6.90112 4.80751 6.85463 4.854L3.85463 7.854C3.80819 7.90056 3.75301 7.93751 3.69227 7.96271C3.63152 7.98792 3.5664 8.00089 3.50063 8.00089C3.43486 8.00089 3.36974 7.98792 3.309 7.96271C3.24825 7.93751 3.19308 7.90056 3.14663 7.854L0.146632 4.854C0.100144 4.80751 0.0632674 4.75232 0.0381083 4.69158C0.0129493 4.63084 0 4.56574 0 4.5C0 4.43426 0.0129493 4.36916 0.0381083 4.30842C0.0632674 4.24768 0.100144 4.19249 0.146632 4.146C0.240518 4.05211 0.367856 3.99937 0.500632 3.99937C0.566376 3.99937 0.631476 4.01232 0.692215 4.03748C0.752955 4.06264 0.808144 4.09951 0.854632 4.146L3.00063 6.293L3.00063 0.5C3.00063 0.367392 3.05331 0.240215 3.14708 0.146447C3.24085 0.0526785 3.36802 0 3.50063 0Z", fill: "currentColor" }) });
 function StreamStatusPanel({
   online = false,
   statusLabel,
@@ -3772,20 +3933,20 @@ function StreamStatusPanel({
   const hasTotal = totalValue != null;
   const hasPlatforms = platforms != null;
   const hasStats = stats.length > 0;
-  const infoTooltip = (node, tip) => tip != null ? /* @__PURE__ */ jsx26(Tooltip4, { title: tip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }) : node;
+  const infoTooltip = (node, tip) => tip != null ? /* @__PURE__ */ jsx27(Tooltip5, { title: tip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }) : node;
   if (!hasStatus && !hasTotal && !hasPlatforms && !hasStats) {
-    return /* @__PURE__ */ jsx26("div", { className: classNames15("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
+    return /* @__PURE__ */ jsx27("div", { className: classNames14("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
   }
-  return /* @__PURE__ */ jsxs16("div", { className: classNames15("ls-streamstatus", className), id, children: [
+  return /* @__PURE__ */ jsxs16("div", { className: classNames14("ls-streamstatus", className), id, children: [
     hasStatus ? infoTooltip(
-      /* @__PURE__ */ jsx26("div", { className: "ls-streamstatus__status", style: statusTooltip != null ? { cursor: "help" } : void 0, children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
+      /* @__PURE__ */ jsx27("div", { className: "ls-streamstatus__status", style: statusTooltip != null ? { cursor: "help" } : void 0, children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
         /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__indicator", children: [
-          online ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__indicator-ping" }) : null,
-          /* @__PURE__ */ jsx26("span", { className: classNames15("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
+          online ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__indicator-ping" }) : null,
+          /* @__PURE__ */ jsx27("span", { className: classNames14("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
         ] }),
         /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__status-body", children: [
-          /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
-          statusSublabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
+          /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
+          statusSublabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
         ] })
       ] }) }),
       statusTooltip
@@ -3793,49 +3954,49 @@ function StreamStatusPanel({
     hasTotal || hasPlatforms ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__overview", children: [
       hasTotal ? infoTooltip(
         /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__total", style: totalTooltip != null ? { cursor: "help" } : void 0, children: [
-          /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
-          totalLabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
+          /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
+          totalLabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
         ] }),
         totalTooltip
       ) : null,
-      hasPlatforms ? /* @__PURE__ */ jsx26("div", { className: "ls-streamstatus__platforms", children: platforms.length === 0 ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platforms-empty", children: platformsEmptyText }) : platforms.map((platform) => /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__platform", children: [
+      hasPlatforms ? /* @__PURE__ */ jsx27("div", { className: "ls-streamstatus__platforms", children: platforms.length === 0 ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platforms-empty", children: platformsEmptyText }) : platforms.map((platform) => /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__platform", children: [
         /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__platform-info", children: [
-          platform.icon != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-icon", children: platform.icon }) : getPlatformIconUrl(String(platform.id)) ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-icon", children: /* @__PURE__ */ jsx26(PlatformIcon, { platform: String(platform.id) }) }) : /* @__PURE__ */ jsx26(
+          platform.icon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-icon", children: platform.icon }) : getPlatformIconUrl(String(platform.id)) ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-icon", children: /* @__PURE__ */ jsx27(PlatformIcon, { platform: String(platform.id) }) }) : /* @__PURE__ */ jsx27(
             "span",
             {
               className: "ls-streamstatus__platform-dot",
               style: platform.accentColor ? { backgroundColor: platform.accentColor } : void 0
             }
           ),
-          /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-label", children: platform.label })
+          /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-label", children: platform.label })
         ] }),
-        /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-value", children: platform.value })
+        /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-value", children: platform.value })
       ] }, platform.id)) }) : null
     ] }) : null,
-    hasStats ? /* @__PURE__ */ jsx26(
+    hasStats ? /* @__PURE__ */ jsx27(
       "div",
       {
         className: "ls-streamstatus__stats",
         style: statsColumns ? { gridTemplateColumns: `repeat(${statsColumns}, minmax(0, 1fr))` } : void 0,
         children: stats.map((stat) => {
-          const label = stat.label != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
+          const label = stat.label != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
           const showHead = stat.icon != null || stat.actions != null || statsLabelPosition === "top" && label != null;
           const displayValue = typeof stat.value === "number" ? formatStatValue(stat.value) : stat.value;
           const trend = typeof stat.value === "number" && stat.previousValue != null ? stat.value - stat.previousValue >= 0 ? "up" : "down" : void 0;
           const node = /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat", style: stat.tooltip != null ? { cursor: "help" } : void 0, children: [
             showHead ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat-head", children: [
-              stat.icon != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
+              stat.icon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
               statsLabelPosition === "top" ? label : null,
-              stat.actions != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
+              stat.actions != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
             ] }) : null,
-            /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-value", style: stat.accentColor ? { color: stat.accentColor } : void 0, children: trend ? /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__stat-trendrow", children: [
+            /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-value", style: stat.accentColor ? { color: stat.accentColor } : void 0, children: trend ? /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__stat-trendrow", children: [
               displayValue,
-              trend === "up" ? /* @__PURE__ */ jsx26(TrendUpArrow, {}) : /* @__PURE__ */ jsx26(TrendDownArrow, {})
+              trend === "up" ? /* @__PURE__ */ jsx27(TrendUpArrow, {}) : /* @__PURE__ */ jsx27(TrendDownArrow, {})
             ] }) : displayValue }),
             statsLabelPosition === "bottom" ? label : null,
-            stat.sub != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
+            stat.sub != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
           ] }, stat.id);
-          return stat.tooltip != null ? /* @__PURE__ */ jsx26(Tooltip4, { title: stat.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }, stat.id) : node;
+          return stat.tooltip != null ? /* @__PURE__ */ jsx27(Tooltip5, { title: stat.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }, stat.id) : node;
         })
       }
     ) : null
@@ -3846,8 +4007,8 @@ StreamStatusPanel.displayName = "StreamStatusPanel";
 // src/components/ViewersList/ViewersList.tsx
 import * as React from "react";
 import { useMemo as useMemo5, useState as useState9 } from "react";
-import classNames16 from "classnames";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import classNames15 from "classnames";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function ViewersList({
   viewers,
   groups,
@@ -3880,28 +4041,28 @@ function ViewersList({
     return [...grouped, { key: "", viewers: rest }].filter((section) => section.viewers.length > 0);
   }, [groups, filtered]);
   const showHead = countLabel != null || searchSlot != null || internalSearch;
-  return /* @__PURE__ */ jsxs17("div", { className: classNames16("ls-viewerslist", className), id, children: [
+  return /* @__PURE__ */ jsxs17("div", { className: classNames15("ls-viewerslist", className), id, children: [
     showHead ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__head", children: [
-      countLabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
-      searchSlot ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
-      internalSearch ? /* @__PURE__ */ jsx27("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
+      countLabel != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
+      searchSlot ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
+      internalSearch ? /* @__PURE__ */ jsx28("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
     ] }) : null,
-    hint != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__hint", children: hint }) : null,
+    hint != null ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__hint", children: hint }) : null,
     filtered.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__empty", children: [
-      emptyIcon ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
-      /* @__PURE__ */ jsx27("span", { children: emptyText })
-    ] }) : /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs17(React.Fragment, { children: [
-      section.label != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__group", children: section.label }) : null,
+      emptyIcon ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
+      /* @__PURE__ */ jsx28("span", { children: emptyText })
+    ] }) : /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs17(React.Fragment, { children: [
+      section.label != null ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__group", children: section.label }) : null,
       section.viewers.map((viewer) => {
         const avatarSrc = viewer.avatar || viewer.fallbackAvatar || fallbackAvatar;
-        const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx27(PlatformIcon, { platform: viewer.platform }) : null);
+        const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx28(PlatformIcon, { platform: viewer.platform }) : null);
         return /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__viewer", children: [
-          showAvatars && avatarSrc ? /* @__PURE__ */ jsx27("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
-          platformIcon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
-          /* @__PURE__ */ jsx27(
+          showAvatars && avatarSrc ? /* @__PURE__ */ jsx28("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
+          platformIcon != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
+          /* @__PURE__ */ jsx28(
             "span",
             {
-              className: classNames16("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
+              className: classNames15("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
               title: viewer.username,
               role: onUsernameClick ? "button" : void 0,
               tabIndex: onUsernameClick ? 0 : void 0,
@@ -3915,8 +4076,8 @@ function ViewersList({
               children: viewer.username
             }
           ),
-          viewer.badges != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
-          viewer.actions != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
+          viewer.badges != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
+          viewer.actions != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
         ] }, viewer.id);
       })
     ] }, section.key || "__ungrouped")) })
@@ -3925,8 +4086,8 @@ function ViewersList({
 ViewersList.displayName = "ViewersList";
 
 // src/components/ShortcutDockGrid/ShortcutDockGrid.tsx
-import classNames17 from "classnames";
-import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import classNames16 from "classnames";
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var softAccent = (color) => /^#[0-9a-fA-F]{6}$/.test(color) ? `${color}66` : color;
 function ShortcutDockGrid({
   buttons,
@@ -3952,7 +4113,7 @@ function ShortcutDockGrid({
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: classNames17(
+      className: classNames16(
         "ls-shortcutdock",
         { "ls-shortcutdock--disabled": disabled, "ls-shortcutdock--readonly": readOnly },
         className
@@ -3963,7 +4124,7 @@ function ShortcutDockGrid({
         gridAutoRows: rowHeight ? `${rowHeight}px` : "auto"
       },
       children: [
-        buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx28("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
+        buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx29("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
         buttons.map((button) => {
           const large = (button.w ?? 1) > 1 || (button.h ?? 1) > 1;
           const selected = selectedId != null && selectedId === button.id;
@@ -3974,11 +4135,11 @@ function ShortcutDockGrid({
             ...rowHeight ? {} : { minHeight: minButtonSize },
             ...colored ? { ["--ls-shortcutdock-accent"]: button.color, ["--ls-shortcutdock-accent-soft"]: softAccent(button.color) } : {}
           };
-          const node = /* @__PURE__ */ jsx28(
+          const node = /* @__PURE__ */ jsx29(
             "button",
             {
               type: "button",
-              className: classNames17("ls-shortcutdock__btn", {
+              className: classNames16("ls-shortcutdock__btn", {
                 "ls-shortcutdock__btn--selected": selected,
                 "ls-shortcutdock__btn--colored": colored && !selected,
                 "ls-shortcutdock__btn--icon-only": button.label == null && button.content == null,
@@ -3991,17 +4152,17 @@ function ShortcutDockGrid({
                 }
               },
               children: button.content ?? /* @__PURE__ */ jsxs18(Fragment9, { children: [
-                button.image ? /* @__PURE__ */ jsx28("img", { className: "ls-shortcutdock__btn-image", src: button.image, alt: "" }) : button.icon != null ? /* @__PURE__ */ jsx28("span", { className: "ls-shortcutdock__icon", children: button.icon }) : null,
-                button.label != null ? /* @__PURE__ */ jsx28("span", { className: "ls-shortcutdock__label", children: button.label }) : null
+                button.image ? /* @__PURE__ */ jsx29("img", { className: "ls-shortcutdock__btn-image", src: button.image, alt: "" }) : button.icon != null ? /* @__PURE__ */ jsx29("span", { className: "ls-shortcutdock__icon", children: button.icon }) : null,
+                button.label != null ? /* @__PURE__ */ jsx29("span", { className: "ls-shortcutdock__label", children: button.label }) : null
               ] })
             }
           );
           return /* @__PURE__ */ jsxs18("div", { className: "ls-shortcutdock__cell", style: cellStyle, title: button.title, children: [
             renderButton ? renderButton(button, node) : node,
-            editMode && onRemove ? /* @__PURE__ */ jsx28("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
+            editMode && onRemove ? /* @__PURE__ */ jsx29("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
           ] }, button.id);
         }),
-        showAdd ? /* @__PURE__ */ jsx28(
+        showAdd ? /* @__PURE__ */ jsx29(
           "button",
           {
             type: "button",
@@ -4019,9 +4180,9 @@ function ShortcutDockGrid({
 ShortcutDockGrid.displayName = "ShortcutDockGrid";
 
 // src/components/GoalsList/GoalsList.tsx
-import Tooltip5 from "@mui/material/Tooltip";
-import classNames18 from "classnames";
-import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import Tooltip6 from "@mui/material/Tooltip";
+import classNames17 from "classnames";
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var GOAL_TOOLTIP_SX = {
   backgroundColor: "#1b1834",
   border: "1px solid #393853",
@@ -4045,7 +4206,7 @@ var resolvePercent = (goal) => {
 };
 function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goal data yet", id, className }) {
   const fmt = (value, goal) => formatValue ? formatValue(value, goal) : value;
-  return /* @__PURE__ */ jsx29("div", { className: classNames18("ls-goals", className), id, children: goals.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "ls-goals__empty", children: emptyText }) : goals.map((goal) => {
+  return /* @__PURE__ */ jsx30("div", { className: classNames17("ls-goals", className), id, children: goals.length === 0 ? /* @__PURE__ */ jsx30("div", { className: "ls-goals__empty", children: emptyText }) : goals.map((goal) => {
     const percent = resolvePercent(goal);
     const rowStyle = {
       ...goal.accentColor ? { ["--ls-goals-accent"]: goal.accentColor } : {},
@@ -4053,9 +4214,9 @@ function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goa
     };
     const node = /* @__PURE__ */ jsxs19("div", { className: "ls-goals__row", style: rowStyle, children: [
       /* @__PURE__ */ jsxs19("div", { className: "ls-goals__head", children: [
-        goal.icon != null ? /* @__PURE__ */ jsx29("span", { className: "ls-goals__icon", children: goal.icon }) : null,
-        /* @__PURE__ */ jsx29("span", { className: "ls-goals__label", children: goal.label }),
-        /* @__PURE__ */ jsx29("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
+        goal.icon != null ? /* @__PURE__ */ jsx30("span", { className: "ls-goals__icon", children: goal.icon }) : null,
+        /* @__PURE__ */ jsx30("span", { className: "ls-goals__label", children: goal.label }),
+        /* @__PURE__ */ jsx30("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
           fmt(goal.current ?? 0, goal),
           " ",
           /* @__PURE__ */ jsxs19("span", { className: "ls-goals__target", children: [
@@ -4068,23 +4229,23 @@ function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goa
           "%"
         ] }) : null
       ] }),
-      /* @__PURE__ */ jsx29("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx29("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
+      /* @__PURE__ */ jsx30("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx30("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
     ] }, goal.id);
-    return goal.tooltip != null ? /* @__PURE__ */ jsx29(Tooltip5, { title: goal.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: GOAL_TOOLTIP_SX } }, children: node }, goal.id) : node;
+    return goal.tooltip != null ? /* @__PURE__ */ jsx30(Tooltip6, { title: goal.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: GOAL_TOOLTIP_SX } }, children: node }, goal.id) : node;
   }) });
 }
 GoalsList.displayName = "GoalsList";
 
 // src/components/ModQueueItem/ModQueueItem.tsx
 import IconButton from "@mui/material/IconButton";
-import classNames19 from "classnames";
+import classNames18 from "classnames";
 
 // src/components/ModQueueItem/icons.tsx
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function CrossBoxIcon({ className }) {
   return /* @__PURE__ */ jsxs20("svg", { className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx30("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
+    /* @__PURE__ */ jsx31(
       "path",
       {
         d: "M14.3571 7.71806L12.8756 6.23657L10.2843 8.82791L7.69292 6.23657L6.21143 7.71806L8.80276 10.3094L6.21143 12.9007L7.69292 14.3822L10.2843 11.7909L12.8756 14.3822L14.3571 12.9007L11.7657 10.3094L14.3571 7.71806Z",
@@ -4095,8 +4256,8 @@ function CrossBoxIcon({ className }) {
 }
 function TickBoxIcon({ className }) {
   return /* @__PURE__ */ jsxs20("svg", { className, width: "22", height: "21", viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx30("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
+    /* @__PURE__ */ jsx31(
       "path",
       {
         d: "M14.8908 5.49829L9.85209 12.1414L6.87311 9.16455L5.49854 10.5391L10.0798 15.1203L16.4952 6.87287L14.8908 5.49829Z",
@@ -4107,7 +4268,7 @@ function TickBoxIcon({ className }) {
 }
 
 // src/components/ModQueueItem/ModQueueItem.tsx
-import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 function ModQueueItem({
   username,
   avatar,
@@ -4120,12 +4281,12 @@ function ModQueueItem({
   onDeny,
   className
 }) {
-  return /* @__PURE__ */ jsxs21("div", { className: classNames19("ls-modqueue-item", className), children: [
-    icon ? /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
+  return /* @__PURE__ */ jsxs21("div", { className: classNames18("ls-modqueue-item", className), children: [
+    icon ? /* @__PURE__ */ jsx32("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
     /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__body", children: [
       /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__head", children: [
-        avatar || fallbackAvatar ? /* @__PURE__ */ jsx31("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
-        username ? /* @__PURE__ */ jsx31(
+        avatar || fallbackAvatar ? /* @__PURE__ */ jsx32("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
+        username ? /* @__PURE__ */ jsx32(
           "span",
           {
             className: "ls-modqueue-item__username",
@@ -4133,7 +4294,7 @@ function ModQueueItem({
             children: username
           }
         ) : null,
-        command ? /* @__PURE__ */ jsx31("span", { className: "ls-modqueue-item__command", children: command }) : null
+        command ? /* @__PURE__ */ jsx32("span", { className: "ls-modqueue-item__command", children: command }) : null
       ] }),
       message ? /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__message", children: [
         "\u201C",
@@ -4141,9 +4302,9 @@ function ModQueueItem({
         "\u201D"
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
-      /* @__PURE__ */ jsx31(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onDeny, "aria-label": "Deny", children: /* @__PURE__ */ jsx31(CrossBoxIcon, { className: "ls-modqueue-item__action-icon" }) }),
-      /* @__PURE__ */ jsx31(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onApprove, "aria-label": "Approve", children: /* @__PURE__ */ jsx31(TickBoxIcon, { className: "ls-modqueue-item__action-icon" }) })
+    /* @__PURE__ */ jsx32("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
+      /* @__PURE__ */ jsx32(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onDeny, "aria-label": "Deny", children: /* @__PURE__ */ jsx32(CrossBoxIcon, { className: "ls-modqueue-item__action-icon" }) }),
+      /* @__PURE__ */ jsx32(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onApprove, "aria-label": "Approve", children: /* @__PURE__ */ jsx32(TickBoxIcon, { className: "ls-modqueue-item__action-icon" }) })
     ] }) })
   ] });
 }
@@ -4152,12 +4313,12 @@ ModQueueItem.displayName = "ModQueueItem";
 // src/components/ModQueueList/ModQueueList.tsx
 import { useMemo as useMemo6, useState as useState10 } from "react";
 import ButtonBase from "@mui/material/ButtonBase";
-import classNames20 from "classnames";
+import classNames19 from "classnames";
 
 // src/components/ModQueueList/icons.tsx
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function SearchIcon({ className }) {
-  return /* @__PURE__ */ jsx32("svg", { className, width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33("svg", { className, width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33(
     "path",
     {
       fillRule: "evenodd",
@@ -4169,23 +4330,23 @@ function SearchIcon({ className }) {
 }
 function EmptyModQueueIcon({ className }) {
   return /* @__PURE__ */ jsxs22("svg", { className, width: "39", height: "39", viewBox: "0 0 39 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       "path",
       {
         d: "M17.8486 23.9297C17.8487 26.2984 19.0186 28.5764 20.8398 30H11V26.25C11.002 24.8582 11.5559 23.5242 12.54 22.54C13.5242 21.5559 14.8582 21.0019 16.25 21H17.8486V23.9297Z",
         fill: "#CAC9D5"
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       "path",
       {
         d: "M24.9043 19.7451C24.6452 20.2749 24.5 20.8705 24.5 21.5C24.5 23.3373 25.7389 24.8844 27.4268 25.3535C26.8965 27.1804 25.5079 28.7064 23.75 29.1641C21.4908 28.5758 19.84 26.2235 19.8398 23.7354V21.0205L23.75 19.2109L24.9043 19.7451Z",
         fill: "#CAC9D5"
       }
     ),
-    /* @__PURE__ */ jsx32("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
-    /* @__PURE__ */ jsx32("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
+    /* @__PURE__ */ jsx33("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
+    /* @__PURE__ */ jsx33(
       "path",
       {
         d: "M18.5 9C19.5384 9 20.5536 9.30789 21.417 9.88477C22.2802 10.4616 22.9532 11.282 23.3506 12.2412C23.7478 13.2004 23.852 14.2561 23.6494 15.2744C23.4468 16.2928 22.9461 17.2278 22.2119 17.9619C21.8356 18.3383 21.4066 18.6536 20.9404 18.8984L20.248 19.2002C20.0129 19.2832 19.771 19.3504 19.5244 19.3994C18.5062 19.602 17.4504 19.4978 16.4912 19.1006C15.5319 18.7032 14.7117 18.0302 14.1348 17.167C13.5579 16.3036 13.25 15.2884 13.25 14.25C13.25 12.8576 13.8035 11.5227 14.7881 10.5381C15.7726 9.55352 17.1076 9 18.5 9Z",
@@ -4196,7 +4357,7 @@ function EmptyModQueueIcon({ className }) {
 }
 
 // src/components/ModQueueList/ModQueueList.tsx
-import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var matches = (item, q) => {
   if (!q) {
     return true;
@@ -4234,32 +4395,32 @@ function ModQueueList({
   };
   const internalSearch = showSearch && !searchSlot;
   const filtered = useMemo6(() => internalSearch ? items.filter((item) => matches(item, query)) : items, [internalSearch, items, query]);
-  return /* @__PURE__ */ jsxs23("div", { className: classNames20("ls-modqueue", className), id, children: [
-    searchSlot ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs23("div", { className: classNames19("ls-modqueue", className), id, children: [
+    searchSlot ? /* @__PURE__ */ jsx34("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx34("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx34(
       LSInput,
       {
         size: "small",
         placeholder: searchPlaceholder,
-        startAdornment: /* @__PURE__ */ jsx33(SearchIcon, { className: "ls-modqueue__search-icon" }),
+        startAdornment: /* @__PURE__ */ jsx34(SearchIcon, { className: "ls-modqueue__search-icon" }),
         value: query,
         onChange: (e) => handleSearchChange(String(e.target.value ?? ""))
       }
     ) }) : null,
     filtered.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__empty", children: [
-      /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx33(EmptyModQueueIcon, {}) }),
-      /* @__PURE__ */ jsx33("span", { children: emptyText })
+      /* @__PURE__ */ jsx34("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx34(EmptyModQueueIcon, {}) }),
+      /* @__PURE__ */ jsx34("span", { children: emptyText })
     ] }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
       canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__bulk", children: [
         onDeny ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
-          /* @__PURE__ */ jsx33(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
+          /* @__PURE__ */ jsx34(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
           denyAllLabel
         ] }) : null,
         onApprove ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--approve", disableRipple: true, onClick: () => onApprove("all"), children: [
-          /* @__PURE__ */ jsx33(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
+          /* @__PURE__ */ jsx34(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
           approveAllLabel
         ] }) : null
       ] }) : null,
-      /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx34(
         ModQueueItem,
         {
           icon: item.icon,
@@ -4270,7 +4431,7 @@ function ModQueueList({
           message: showMessages ? item.message : void 0,
           onApprove: () => onApprove?.(item.id),
           onDeny: () => onDeny?.(item.id),
-          actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__readonly", children: "read-only" }))
+          actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx34("span", { className: "ls-modqueue__readonly", children: "read-only" }))
         },
         item.id
       )) })
@@ -4281,8 +4442,8 @@ ModQueueList.displayName = "ModQueueList";
 
 // src/components/ModActivityLog/ModActivityLog.tsx
 import { useEffect as useEffect8, useRef as useRef8 } from "react";
-import classNames21 from "classnames";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import classNames20 from "classnames";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", autoScroll, className }) {
   const listRef = useRef8(null);
   useEffect8(() => {
@@ -4290,20 +4451,20 @@ function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", a
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [logs, autoScroll]);
-  return /* @__PURE__ */ jsxs24("div", { className: classNames21("ls-modlog", className), children: [
-    onClear && logs.length > 0 ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__toolbar", children: /* @__PURE__ */ jsx34("button", { type: "button", className: "ls-modlog__clear", onClick: onClear, children: clearLabel }) }) : null,
-    logs.length === 0 ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__empty", children: emptyText ?? "No activity yet" }) : /* @__PURE__ */ jsx34("div", { className: "ls-modlog__list", ref: listRef, children: logs.map((log, i) => {
+  return /* @__PURE__ */ jsxs24("div", { className: classNames20("ls-modlog", className), children: [
+    onClear && logs.length > 0 ? /* @__PURE__ */ jsx35("div", { className: "ls-modlog__toolbar", children: /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-modlog__clear", onClick: onClear, children: clearLabel }) }) : null,
+    logs.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "ls-modlog__empty", children: emptyText ?? "No activity yet" }) : /* @__PURE__ */ jsx35("div", { className: "ls-modlog__list", ref: listRef, children: logs.map((log, i) => {
       const rowStyle = {
         ...log.tabColor ? { ["--ls-modlog-accent"]: log.tabColor } : {},
         ...log.barColor ? { ["--ls-modlog-bar"]: log.barColor } : {}
       };
       return /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__row", style: rowStyle, children: [
         /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__head", children: [
-          log.avatar ? /* @__PURE__ */ jsx34("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
-          log.title ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__title", children: log.title }) : null,
-          log.time ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__time", children: log.time }) : null
+          log.avatar ? /* @__PURE__ */ jsx35("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
+          log.title ? /* @__PURE__ */ jsx35("span", { className: "ls-modlog__title", children: log.title }) : null,
+          log.time ? /* @__PURE__ */ jsx35("span", { className: "ls-modlog__time", children: log.time }) : null
         ] }),
-        log.message ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__message", children: log.message }) : null
+        log.message ? /* @__PURE__ */ jsx35("div", { className: "ls-modlog__message", children: log.message }) : null
       ] }, log.id ?? i);
     }) })
   ] });
@@ -4312,8 +4473,8 @@ ModActivityLog.displayName = "ModActivityLog";
 
 // src/components/SongRequestList/SongRequestList.tsx
 import { useState as useState11 } from "react";
-import classNames22 from "classnames";
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import classNames21 from "classnames";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function SongRequestList({
   nowPlaying,
   progress = 0,
@@ -4342,7 +4503,7 @@ function SongRequestList({
     setAddValue("");
   };
   const addBar = onAddSong ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__addbar", children: [
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       LSInput,
       {
         className: "ls-songreq__addinput",
@@ -4358,34 +4519,34 @@ function SongRequestList({
         }
       }
     ),
-    /* @__PURE__ */ jsx35(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
+    /* @__PURE__ */ jsx36(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
   ] }) : null;
   if (!nowPlaying) {
     if (!addBar) {
-      return /* @__PURE__ */ jsx35("div", { className: classNames22("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
+      return /* @__PURE__ */ jsx36("div", { className: classNames21("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
     }
-    return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
+    return /* @__PURE__ */ jsxs25("div", { className: classNames21("ls-songreq", className), children: [
       addBar,
-      /* @__PURE__ */ jsx35("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
+      /* @__PURE__ */ jsx36("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
     ] });
   }
   const clampedProgress = Math.min(100, Math.max(0, progress));
-  return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
+  return /* @__PURE__ */ jsxs25("div", { className: classNames21("ls-songreq", className), children: [
     addBar,
     /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__now", children: [
-      showArt && nowPlaying.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
+      showArt && nowPlaying.art ? /* @__PURE__ */ jsx36("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
       /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__nowbody", children: [
-        /* @__PURE__ */ jsx35("div", { className: "ls-songreq__title", children: nowPlaying.title }),
-        nowPlaying.artist ? /* @__PURE__ */ jsx35("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
+        /* @__PURE__ */ jsx36("div", { className: "ls-songreq__title", children: nowPlaying.title }),
+        nowPlaying.artist ? /* @__PURE__ */ jsx36("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
         showRequester && nowPlaying.requester ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__requester", children: [
           "requested by ",
           nowPlaying.requester
         ] }) : null,
-        /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
+        /* @__PURE__ */ jsx36("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx36("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
       ] }),
       /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__controls", children: [
-        onPlayPause ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__btn", onClick: onPlayPause, title: isPlaying ? "Pause" : "Play", "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? "\u23F8" : "\u25B6" }) : null,
-        onSkip ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
+        onPlayPause ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ls-songreq__btn", onClick: onPlayPause, title: isPlaying ? "Pause" : "Play", "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? "\u23F8" : "\u25B6" }) : null,
+        onSkip ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
       ] })
     ] }),
     showQueue ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queue", children: [
@@ -4393,16 +4554,16 @@ function SongRequestList({
         "Up next \xB7 ",
         queue.length
       ] }),
-      /* @__PURE__ */ jsx35("div", { className: "ls-songreq__queuelist", children: queue.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "ls-songreq__queueempty", children: "Queue is empty" }) : queue.map((item) => /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__item", children: [
-        showArt && item.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
+      /* @__PURE__ */ jsx36("div", { className: "ls-songreq__queuelist", children: queue.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "ls-songreq__queueempty", children: "Queue is empty" }) : queue.map((item) => /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__item", children: [
+        showArt && item.art ? /* @__PURE__ */ jsx36("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
         /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itembody", children: [
-          /* @__PURE__ */ jsx35("div", { className: "ls-songreq__itemtitle", children: item.title }),
+          /* @__PURE__ */ jsx36("div", { className: "ls-songreq__itemtitle", children: item.title }),
           /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itemmeta", children: [
             item.artist,
             showRequester && item.requester ? ` \xB7 ${item.requester}` : ""
           ] })
         ] }),
-        onRemove ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
+        onRemove ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
       ] }, item.id)) })
     ] }) : null
   ] });
@@ -4429,6 +4590,7 @@ export {
   LSRadio,
   LSRadioGroup,
   LSSelect,
+  LSSlider,
   LSSliderInput,
   LSSwitch,
   LSTextField,