@lumiastream/ui 0.8.7 → 0.8.8

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  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");
 
 // 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,
@@ -2143,8 +2276,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 +2288,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
       ]
     }
   );
-  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx14(
+  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx15(
     "button",
     {
       type: "button",
@@ -2166,15 +2299,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 +2341,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 +2360,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 +2374,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 +2436,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 +2445,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 +2470,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 +2504,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 +2544,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 +2554,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
       })
     ] })
   ] }) : null;
-  const textField = (params = {}) => /* @__PURE__ */ jsx14(
+  const textField = (params = {}) => /* @__PURE__ */ jsx15(
     VariableInputTextField,
     {
       t,
@@ -2449,7 +2582,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
     }
   );
   return /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       Popover,
       {
         anchorEl: containerRef.current,
@@ -2475,7 +2608,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
         children: pickerBody
       }
     ),
-    isAutoComplete ? /* @__PURE__ */ jsx14(
+    isAutoComplete ? /* @__PURE__ */ jsx15(
       Autocomplete2,
       {
         disableClearable: true,
@@ -2572,7 +2705,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
         renderInput: (params) => textField(params)
       }
     ) : textField(),
-    !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx14(
+    !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx15(
       VariableHighlightOverlay,
       {
         inputEl,
@@ -2585,7 +2718,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
   ] });
 });
 LSVariableInputField.displayName = "LSVariableInputField";
-var VariableInputTextField = forwardRef7(
+var VariableInputTextField = forwardRef8(
   ({
     t,
     id,
@@ -2611,10 +2744,10 @@ var VariableInputTextField = forwardRef7(
     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,7 +2777,7 @@ var VariableInputTextField = forwardRef7(
             startAdornment,
             endAdornment: /* @__PURE__ */ jsxs6(Fragment5, { children: [
               endAdornment ?? null,
-              currentValue ? /* @__PURE__ */ jsx14(Tooltip2, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx14(
+              currentValue ? /* @__PURE__ */ jsx15(Tooltip3, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx15(
                 InputAdornment2,
                 {
                   position: "end",
@@ -2660,7 +2793,7 @@ var VariableInputTextField = forwardRef7(
                   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 +2819,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 +2850,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 +2875,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 +2889,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 +2904,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 +2914,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 +2923,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 +2942,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 +2958,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 +2980,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 +2989,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 +2998,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 +3016,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 +3041,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 +3088,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 +3123,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 +3166,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 +3192,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 +3205,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 +3221,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 +3264,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 +3357,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 +3387,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 +3397,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 +3431,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 +3447,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 +3470,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 +3483,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 +3501,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 +3519,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 +3552,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 +3573,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 +3595,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 +3620,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 +3647,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 +3700,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 +3726,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 +3734,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 +3753,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 +3763,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 +3827,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 +3846,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 +3865,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 +3880,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 +3905,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 +3926,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 +3979,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 +4013,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 +4048,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 +4058,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 +4085,7 @@ function ShortcutDockGrid({
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: classNames17(
+      className: classNames16(
         "ls-shortcutdock",
         { "ls-shortcutdock--disabled": disabled, "ls-shortcutdock--readonly": readOnly },
         className
@@ -3963,7 +4096,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 +4107,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 +4124,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 +4152,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 +4178,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 +4186,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 +4201,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 +4228,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 +4240,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 +4253,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 +4266,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 +4274,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 +4285,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 +4302,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 +4329,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 +4367,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 +4403,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 +4414,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 +4423,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 +4445,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 +4475,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 +4491,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 +4526,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 +4562,7 @@ export {
   LSRadio,
   LSRadioGroup,
   LSSelect,
+  LSSlider,
   LSSliderInput,
   LSSwitch,
   LSTextField,