@lumiastream/ui 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/ChatMessageItem.js +1 -1
  2. package/dist/ChatboxPanel.js +1 -1
  3. package/dist/EventList.js +1 -1
  4. package/dist/EventListItem.js +1 -1
  5. package/dist/GoalsList.js +1 -1
  6. package/dist/LSButton.js +1 -1
  7. package/dist/LSCheckbox.js +1 -1
  8. package/dist/LSColorPicker.js +1 -1
  9. package/dist/LSDatePicker.js +1 -1
  10. package/dist/LSFontPicker.js +1 -1
  11. package/dist/LSInput.js +1 -1
  12. package/dist/LSMultiSelect.js +1 -1
  13. package/dist/LSRadio.js +1 -1
  14. package/dist/LSSelect.js +1 -1
  15. package/dist/LSSliderInput.js +1 -1
  16. package/dist/LSSwitch.js +1 -1
  17. package/dist/LSTextField.js +1 -1
  18. package/dist/LSVariableInputField.d.ts +6 -0
  19. package/dist/LSVariableInputField.js +382 -81
  20. package/dist/ModActivityLog.js +1 -1
  21. package/dist/ModQueueItem.js +1 -1
  22. package/dist/ModQueueList.js +1 -1
  23. package/dist/ModalChrome.js +1 -1
  24. package/dist/PlatformIcon.js +1 -1
  25. package/dist/ShortcutDockGrid.js +1 -1
  26. package/dist/SongRequestList.js +1 -1
  27. package/dist/StreamStatusPanel.js +1 -1
  28. package/dist/ViewersList.js +1 -1
  29. package/dist/WidgetChrome.js +1 -1
  30. package/dist/components.js +704 -401
  31. package/dist/index.js +1017 -714
  32. package/dist/se-import.js +1015 -712
  33. package/package.json +2 -2
package/dist/components.js CHANGED
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
21
21
  }
22
22
 
23
23
  // src/lumia-ui.css
24
- 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__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-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__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");
24
+ 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--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__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");
25
25
 
26
26
  // src/components/LSButton/LSButton.tsx
27
27
  import Button from "@mui/material/Button";
@@ -1124,24 +1124,230 @@ import Search from "@mui/icons-material/Search";
1124
1124
  import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
1125
1125
  import Tooltip2 from "@mui/material/Tooltip";
1126
1126
  import {
1127
- Fragment as Fragment2,
1127
+ Fragment as Fragment4,
1128
1128
  createContext,
1129
1129
  forwardRef as forwardRef7,
1130
1130
  useCallback as useCallback2,
1131
1131
  useContext,
1132
+ useEffect as useEffect5,
1133
+ useMemo as useMemo4,
1134
+ useRef as useRef4,
1135
+ useState as useState5
1136
+ } from "react";
1137
+
1138
+ // src/components/LSVariableInputField/VariableHighlightOverlay.tsx
1139
+ import {
1140
+ Fragment as Fragment2,
1132
1141
  useEffect as useEffect4,
1142
+ useLayoutEffect,
1133
1143
  useMemo as useMemo3,
1134
1144
  useRef as useRef3,
1135
1145
  useState as useState4
1136
1146
  } from "react";
1147
+ import { createPortal } from "react-dom";
1137
1148
  import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
1149
+ var TOKEN_RE = /\{\{[^{}]+\}\}/g;
1150
+ var COPIED_STYLE_PROPS = [
1151
+ "fontFamily",
1152
+ "fontSize",
1153
+ "fontWeight",
1154
+ "fontStyle",
1155
+ "fontVariant",
1156
+ "letterSpacing",
1157
+ "wordSpacing",
1158
+ "textTransform",
1159
+ "textIndent",
1160
+ "lineHeight",
1161
+ "tabSize",
1162
+ "paddingTop",
1163
+ "paddingRight",
1164
+ "paddingBottom",
1165
+ "paddingLeft",
1166
+ "direction"
1167
+ ];
1168
+ var tokenClass = (type) => {
1169
+ if (type === "func") return "ls-variable-highlight__token--function";
1170
+ if (type === "system") return "ls-variable-highlight__token--system";
1171
+ return "ls-variable-highlight__token--custom";
1172
+ };
1173
+ var parseSegments = (value, classify, describe) => {
1174
+ const segments = [];
1175
+ let last = 0;
1176
+ let match;
1177
+ TOKEN_RE.lastIndex = 0;
1178
+ while ((match = TOKEN_RE.exec(value)) != null) {
1179
+ if (match.index > last) {
1180
+ segments.push({ text: value.slice(last, match.index), token: false });
1181
+ }
1182
+ const raw = match[0];
1183
+ const base = raw.slice(2, -2).split("=")[0].trim();
1184
+ segments.push({ text: raw, token: true, type: classify(base), desc: describe(base) });
1185
+ last = match.index + raw.length;
1186
+ }
1187
+ if (last < value.length) {
1188
+ segments.push({ text: value.slice(last), token: false });
1189
+ }
1190
+ return segments;
1191
+ };
1192
+ var VariableHighlightOverlay = ({
1193
+ inputEl,
1194
+ value,
1195
+ multiline,
1196
+ classify,
1197
+ describe
1198
+ }) => {
1199
+ const layerRef = useRef3(null);
1200
+ const textColorRef = useRef3("");
1201
+ const [tooltip, setTooltip] = useState4(null);
1202
+ const segments = useMemo3(
1203
+ () => parseSegments(value, classify, describe),
1204
+ [value, classify, describe]
1205
+ );
1206
+ const hasTokens = useMemo3(() => segments.some((segment) => segment.token), [segments]);
1207
+ useLayoutEffect(() => {
1208
+ const layer = layerRef.current;
1209
+ if (!inputEl || !layer || !hasTokens) {
1210
+ return;
1211
+ }
1212
+ const sync = () => {
1213
+ const computed = getComputedStyle(inputEl);
1214
+ for (const prop of COPIED_STYLE_PROPS) {
1215
+ layer.style[prop] = computed[prop];
1216
+ }
1217
+ const isTransparent = computed.color === "rgba(0, 0, 0, 0)" || computed.color === "transparent";
1218
+ if (!isTransparent) {
1219
+ textColorRef.current = computed.color;
1220
+ }
1221
+ layer.style.color = isTransparent ? textColorRef.current || computed.color : computed.color;
1222
+ layer.style.whiteSpace = multiline ? "pre-wrap" : "pre";
1223
+ layer.style.top = `${inputEl.offsetTop}px`;
1224
+ layer.style.left = `${inputEl.offsetLeft}px`;
1225
+ layer.style.width = `${inputEl.offsetWidth}px`;
1226
+ layer.style.height = `${inputEl.offsetHeight}px`;
1227
+ layer.scrollTop = inputEl.scrollTop;
1228
+ layer.scrollLeft = inputEl.scrollLeft;
1229
+ };
1230
+ sync();
1231
+ const onScroll = () => {
1232
+ layer.scrollTop = inputEl.scrollTop;
1233
+ layer.scrollLeft = inputEl.scrollLeft;
1234
+ };
1235
+ inputEl.addEventListener("scroll", onScroll);
1236
+ const observer = new ResizeObserver(sync);
1237
+ observer.observe(inputEl);
1238
+ window.addEventListener("resize", sync);
1239
+ return () => {
1240
+ inputEl.removeEventListener("scroll", onScroll);
1241
+ observer.disconnect();
1242
+ window.removeEventListener("resize", sync);
1243
+ };
1244
+ }, [inputEl, multiline, hasTokens, segments]);
1245
+ useLayoutEffect(() => {
1246
+ if (!inputEl || !hasTokens) {
1247
+ return;
1248
+ }
1249
+ const style = inputEl.style;
1250
+ const prev = {
1251
+ color: style.color,
1252
+ caretColor: style.caretColor,
1253
+ fill: style.webkitTextFillColor,
1254
+ position: style.position,
1255
+ zIndex: style.zIndex
1256
+ };
1257
+ const computed = getComputedStyle(inputEl);
1258
+ if (computed.color !== "rgba(0, 0, 0, 0)" && computed.color !== "transparent") {
1259
+ textColorRef.current = computed.color;
1260
+ }
1261
+ style.caretColor = computed.color;
1262
+ style.color = "transparent";
1263
+ style.webkitTextFillColor = "transparent";
1264
+ if (computed.position === "static") {
1265
+ style.position = "relative";
1266
+ }
1267
+ style.zIndex = "1";
1268
+ return () => {
1269
+ style.color = prev.color;
1270
+ style.caretColor = prev.caretColor;
1271
+ style.webkitTextFillColor = prev.fill;
1272
+ style.position = prev.position;
1273
+ style.zIndex = prev.zIndex;
1274
+ };
1275
+ }, [inputEl, hasTokens]);
1276
+ useEffect4(() => {
1277
+ if (!inputEl || !hasTokens) {
1278
+ setTooltip(null);
1279
+ return;
1280
+ }
1281
+ const onMove = (event) => {
1282
+ const layer = layerRef.current;
1283
+ if (!layer) {
1284
+ return;
1285
+ }
1286
+ const spans = layer.querySelectorAll(".ls-variable-highlight__token");
1287
+ for (const span of Array.from(spans)) {
1288
+ const desc = span.getAttribute("data-desc");
1289
+ if (!desc) {
1290
+ continue;
1291
+ }
1292
+ for (const rect of Array.from(span.getClientRects())) {
1293
+ if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {
1294
+ setTooltip({ text: desc, top: rect.top, left: rect.left + rect.width / 2 });
1295
+ return;
1296
+ }
1297
+ }
1298
+ }
1299
+ setTooltip(null);
1300
+ };
1301
+ const onLeave = () => setTooltip(null);
1302
+ const el = inputEl;
1303
+ el.addEventListener("mousemove", onMove);
1304
+ el.addEventListener("mouseleave", onLeave);
1305
+ return () => {
1306
+ el.removeEventListener("mousemove", onMove);
1307
+ el.removeEventListener("mouseleave", onLeave);
1308
+ };
1309
+ }, [inputEl, hasTokens, segments]);
1310
+ if (!inputEl?.parentElement || !hasTokens) {
1311
+ return null;
1312
+ }
1313
+ return /* @__PURE__ */ jsxs5(Fragment3, { children: [
1314
+ createPortal(
1315
+ /* @__PURE__ */ jsx13("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map(
1316
+ (segment, index) => segment.token ? /* @__PURE__ */ jsx13(
1317
+ "span",
1318
+ {
1319
+ "data-desc": segment.desc || void 0,
1320
+ className: `ls-variable-highlight__token ${tokenClass(segment.type ?? "custom")}`,
1321
+ children: segment.text
1322
+ },
1323
+ index
1324
+ ) : /* @__PURE__ */ jsx13(Fragment2, { children: segment.text }, index)
1325
+ ) }),
1326
+ inputEl.parentElement
1327
+ ),
1328
+ tooltip ? createPortal(
1329
+ /* @__PURE__ */ jsx13(
1330
+ "div",
1331
+ {
1332
+ className: "ls-variable-highlight__tooltip",
1333
+ style: { top: tooltip.top, left: tooltip.left },
1334
+ children: tooltip.text
1335
+ }
1336
+ ),
1337
+ document.body
1338
+ ) : null
1339
+ ] });
1340
+ };
1341
+
1342
+ // src/components/LSVariableInputField/LSVariableInputField.tsx
1343
+ import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
1138
1344
  import { createElement } from "react";
1139
1345
  var LSVariableInputContext = createContext({});
1140
1346
  var LSVariableInputProvider = ({
1141
1347
  children,
1142
1348
  value
1143
1349
  }) => {
1144
- return /* @__PURE__ */ jsx13(LSVariableInputContext.Provider, { value, children });
1350
+ return /* @__PURE__ */ jsx14(LSVariableInputContext.Provider, { value, children });
1145
1351
  };
1146
1352
  var DEFAULT_FUNCTION_VARIABLES = [
1147
1353
  "sum_variables",
@@ -1399,6 +1605,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1399
1605
  $renderOption,
1400
1606
  allowedVariableOrigin,
1401
1607
  systemVariables: systemVariablesProp,
1608
+ variableExamples: variableExamplesProp,
1402
1609
  functionVariables: functionVariablesProp,
1403
1610
  translate,
1404
1611
  onVariableTranslationsNeeded,
@@ -1407,50 +1614,75 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1407
1614
  } = props;
1408
1615
  const t = translate ?? context.translate ?? defaultTranslate;
1409
1616
  const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
1410
- const variableRecords = useMemo3(
1617
+ const variableExamples = variableExamplesProp ?? context.variableExamples ?? {};
1618
+ const variableRecords = useMemo4(
1411
1619
  () => normalizeVariableRecords(rawSystemVariables),
1412
1620
  [rawSystemVariables]
1413
1621
  );
1414
- const functionVariables = useMemo3(
1622
+ const functionVariables = useMemo4(
1415
1623
  () => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES,
1416
1624
  [context.functionVariables, functionVariablesProp]
1417
1625
  );
1418
1626
  const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
1419
1627
  const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
1420
1628
  const translationKeyExists = translationKeyExistsProp ?? context.translationKeyExists;
1421
- const containerRef = useRef3(null);
1422
- const variableId = useRef3(`variable-input-${name ?? "field"}`);
1423
- const [showVariables, setShowVariables] = useState4(false);
1424
- const [searchQuery, setSearchQuery] = useState4("");
1425
- const functionVariableSet = useMemo3(
1629
+ const containerRef = useRef4(null);
1630
+ const variableId = useRef4(`variable-input-${name ?? "field"}`);
1631
+ const [showVariables, setShowVariables] = useState5(false);
1632
+ const [searchQuery, setSearchQuery] = useState5("");
1633
+ const functionVariableSet = useMemo4(
1426
1634
  () => new Set(functionVariables),
1427
1635
  [functionVariables]
1428
1636
  );
1429
- const allowedVariableDefinitions = useMemo3(
1637
+ const [inputEl, setInputEl] = useState5(null);
1638
+ const mergedInputRef = useCallback2(
1639
+ (node) => {
1640
+ setInputEl(node ?? null);
1641
+ if (typeof ref === "function") {
1642
+ ref(node);
1643
+ } else if (ref) {
1644
+ ref.current = node;
1645
+ }
1646
+ },
1647
+ [ref]
1648
+ );
1649
+ const currentVariableValue = useMemo4(() => {
1650
+ if (typeof value !== "string") return null;
1651
+ const match = value.trim().match(/^\{\{([^{}=]+)\}\}$/);
1652
+ if (!match) return null;
1653
+ const key = match[1].trim();
1654
+ if (functionVariableSet.has(key)) return null;
1655
+ const record = variableRecords[key];
1656
+ if (!record || record.isFunction) return null;
1657
+ const { displayValue, fullValue } = getVariableValueDisplay(record.value);
1658
+ if (displayValue === "" || displayValue == null) return null;
1659
+ return { displayValue, fullValue };
1660
+ }, [value, variableRecords, functionVariableSet]);
1661
+ const allowedVariableDefinitions = useMemo4(
1430
1662
  () => normalizeAllowedDefinitions(allowedVariables),
1431
1663
  [allowedVariables]
1432
1664
  );
1433
- const allowedVariableDefinitionLookup = useMemo3(() => {
1665
+ const allowedVariableDefinitionLookup = useMemo4(() => {
1434
1666
  const lookup = /* @__PURE__ */ new Map();
1435
1667
  allowedVariableDefinitions.forEach(
1436
1668
  (definition) => lookup.set(definition.name, definition)
1437
1669
  );
1438
1670
  return lookup;
1439
1671
  }, [allowedVariableDefinitions]);
1440
- const allowedVariableNames = useMemo3(
1672
+ const allowedVariableNames = useMemo4(
1441
1673
  () => allowedVariableDefinitions.map((definition) => definition.name),
1442
1674
  [allowedVariableDefinitions]
1443
1675
  );
1444
- const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableDefinitions);
1445
- const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
1446
- const [expandedPaths, setExpandedPaths] = useState4(
1676
+ const [filteredAllowedVariables, setFilteredAllowedVariables] = useState5(allowedVariableDefinitions);
1677
+ const [filteredSystemVariables, setFilteredSystemVariables] = useState5([]);
1678
+ const [expandedPaths, setExpandedPaths] = useState5(
1447
1679
  () => /* @__PURE__ */ new Set()
1448
1680
  );
1449
- const [autoExpandPaths, setAutoExpandPaths] = useState4(
1681
+ const [autoExpandPaths, setAutoExpandPaths] = useState5(
1450
1682
  () => /* @__PURE__ */ new Set()
1451
1683
  );
1452
1684
  const shouldRenderPicker = !hideVariables && showVariables;
1453
- const systemVariableValueTrees = useMemo3(() => {
1685
+ const systemVariableValueTrees = useMemo4(() => {
1454
1686
  const map = /* @__PURE__ */ new Map();
1455
1687
  if (!shouldRenderPicker) return map;
1456
1688
  Object.values(variableRecords).forEach((variable) => {
@@ -1460,7 +1692,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1460
1692
  });
1461
1693
  return map;
1462
1694
  }, [shouldRenderPicker, variableRecords]);
1463
- const allowedExampleTrees = useMemo3(() => {
1695
+ const allowedExampleTrees = useMemo4(() => {
1464
1696
  const map = /* @__PURE__ */ new Map();
1465
1697
  if (!shouldRenderPicker) return map;
1466
1698
  allowedVariableDefinitions.forEach((definition) => {
@@ -1470,7 +1702,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1470
1702
  });
1471
1703
  return map;
1472
1704
  }, [allowedVariableDefinitions, shouldRenderPicker]);
1473
- useEffect4(() => {
1705
+ useEffect5(() => {
1474
1706
  requestTranslations?.();
1475
1707
  }, [requestTranslations]);
1476
1708
  const isPathExpanded = useCallback2(
@@ -1537,7 +1769,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1537
1769
  },
1538
1770
  [namespaceHas, t]
1539
1771
  );
1540
- const knownOrigins = useMemo3(() => {
1772
+ const knownOrigins = useMemo4(() => {
1541
1773
  return Array.from(
1542
1774
  new Set(
1543
1775
  Object.values(variableRecords).map(
@@ -1684,7 +1916,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1684
1916
  },
1685
1917
  [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
1686
1918
  );
1687
- useEffect4(() => {
1919
+ useEffect5(() => {
1688
1920
  if (!shouldRenderPicker) {
1689
1921
  return;
1690
1922
  }
@@ -1824,7 +2056,23 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1824
2056
  onChange?.(currentValue ? `${currentValue}${newValue}` : newValue);
1825
2057
  };
1826
2058
  const insertVariable = (variable) => {
1827
- appendValue(`{{${variable}}}`);
2059
+ const token = `{{${variable}}}`;
2060
+ const el = inputEl;
2061
+ if (el && typeof value === "string" && el.selectionStart != null) {
2062
+ const start = el.selectionStart;
2063
+ const end = el.selectionEnd ?? start;
2064
+ onChange?.(`${value.slice(0, start)}${token}${value.slice(end)}`);
2065
+ const caret = start + token.length;
2066
+ requestAnimationFrame(() => {
2067
+ try {
2068
+ el.focus();
2069
+ el.setSelectionRange(caret, caret);
2070
+ } catch {
2071
+ }
2072
+ });
2073
+ } else {
2074
+ appendValue(token);
2075
+ }
1828
2076
  setShowVariables(false);
1829
2077
  };
1830
2078
  const handleFilterOptions = (options, params) => {
@@ -1832,13 +2080,13 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1832
2080
  afterFilter?.(filtered);
1833
2081
  return filtered;
1834
2082
  };
1835
- const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5(
2083
+ const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs6(
1836
2084
  "div",
1837
2085
  {
1838
2086
  className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
1839
2087
  children: [
1840
- /* @__PURE__ */ jsx13("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
1841
- variableType === "func" && /* @__PURE__ */ jsx13(
2088
+ /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
2089
+ variableType === "func" && /* @__PURE__ */ jsx14(
1842
2090
  "span",
1843
2091
  {
1844
2092
  className: "ls-variable-token__badge",
@@ -1849,7 +2097,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1849
2097
  ]
1850
2098
  }
1851
2099
  );
1852
- const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx13(
2100
+ const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx14(
1853
2101
  "button",
1854
2102
  {
1855
2103
  type: "button",
@@ -1860,15 +2108,15 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1860
2108
  className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
1861
2109
  "aria-label": expanded ? "Collapse" : "Expand",
1862
2110
  "aria-expanded": expanded,
1863
- children: /* @__PURE__ */ jsx13(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
2111
+ children: /* @__PURE__ */ jsx14(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
1864
2112
  }
1865
2113
  );
1866
- const renderExpandSpacer = () => /* @__PURE__ */ jsx13("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
2114
+ const renderExpandSpacer = () => /* @__PURE__ */ jsx14("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
1867
2115
  const getVariableValuePreview = (variableValue) => {
1868
2116
  const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
1869
2117
  return { displayValue, fullValue };
1870
2118
  };
1871
- const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx13(
2119
+ const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx14(
1872
2120
  "input",
1873
2121
  {
1874
2122
  className: "ls-variable-picker__value-input",
@@ -1885,8 +2133,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1885
2133
  const fullToken = `${rootToken}.${node.relativePath}`;
1886
2134
  const expanded = node.isExpandable && isPathExpanded(fullToken);
1887
2135
  const { displayValue, fullValue } = getVariableValuePreview(node.value);
1888
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
1889
- /* @__PURE__ */ jsxs5(
2136
+ return /* @__PURE__ */ jsxs6(Fragment4, { children: [
2137
+ /* @__PURE__ */ jsxs6(
1890
2138
  "div",
1891
2139
  {
1892
2140
  className: "ls-variable-picker__row ls-variable-picker__row--child",
@@ -1895,31 +2143,57 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1895
2143
  else insertVariable(fullToken);
1896
2144
  },
1897
2145
  children: [
1898
- /* @__PURE__ */ jsxs5(
2146
+ /* @__PURE__ */ jsxs6(
1899
2147
  "div",
1900
2148
  {
1901
2149
  className: "ls-variable-picker__token-cell",
1902
2150
  style: { paddingLeft: `${node.depth * 1.25}rem` },
1903
2151
  children: [
1904
2152
  node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
1905
- /* @__PURE__ */ jsx13(
2153
+ /* @__PURE__ */ jsx14(
1906
2154
  "div",
1907
2155
  {
1908
2156
  className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
1909
- children: /* @__PURE__ */ jsx13("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
2157
+ children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
1910
2158
  }
1911
2159
  )
1912
2160
  ]
1913
2161
  }
1914
2162
  ),
1915
- /* @__PURE__ */ jsx13("div", { className: "ls-variable-picker__description", children: node.displayKey }),
1916
- /* @__PURE__ */ jsx13("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
2163
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: node.displayKey }),
2164
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
1917
2165
  ]
1918
2166
  }
1919
2167
  ),
1920
2168
  expanded && renderValueChildRows(rootToken, node.children)
1921
2169
  ] }, fullToken);
1922
2170
  });
2171
+ const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
2172
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
2173
+ examples.map((example) => /* @__PURE__ */ jsxs6(
2174
+ "div",
2175
+ {
2176
+ className: "ls-variable-picker__row ls-variable-picker__row--child",
2177
+ onClick: () => insertVariable(example.snippet),
2178
+ children: [
2179
+ /* @__PURE__ */ jsxs6(
2180
+ "div",
2181
+ {
2182
+ className: "ls-variable-picker__token-cell",
2183
+ style: { paddingLeft: "1.25rem" },
2184
+ children: [
2185
+ renderExpandSpacer(),
2186
+ /* @__PURE__ */ jsx14("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
2187
+ ]
2188
+ }
2189
+ ),
2190
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: example.label }),
2191
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value" })
2192
+ ]
2193
+ },
2194
+ example.snippet
2195
+ ))
2196
+ ] });
1923
2197
  const toOptionLabelString = (input) => {
1924
2198
  if (typeof input === "string") return input;
1925
2199
  if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint")
@@ -1971,7 +2245,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1971
2245
  isSelected ? "ls-variable-option--selected" : ""
1972
2246
  ].filter(Boolean).join(" ")
1973
2247
  },
1974
- thumb ? /* @__PURE__ */ jsx13(
2248
+ thumb ? /* @__PURE__ */ jsx14(
1975
2249
  "img",
1976
2250
  {
1977
2251
  src: thumb,
@@ -1979,24 +2253,24 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1979
2253
  alt: ""
1980
2254
  }
1981
2255
  ) : null,
1982
- /* @__PURE__ */ jsxs5("div", { className: "ls-variable-option__body", children: [
1983
- /* @__PURE__ */ jsx13("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
1984
- helperText ? /* @__PURE__ */ jsx13("div", { className: "ls-variable-option__helper", children: helperText }) : null
2256
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-option__body", children: [
2257
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
2258
+ helperText ? /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__helper", children: helperText }) : null
1985
2259
  ] })
1986
2260
  );
1987
2261
  };
1988
2262
  const showSuggestedSection = shouldRenderPicker && allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
1989
- const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
1990
- /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
1991
- /* @__PURE__ */ jsx13("div", { className: "ls-variable-picker__intro-text", children: t(
2263
+ const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
2264
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__intro", children: [
2265
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__intro-text", children: t(
1992
2266
  "overlay-variables.variables-description",
1993
2267
  "Use variables that will automatically be replaced before sending out the text"
1994
2268
  ) }),
1995
- /* @__PURE__ */ jsx13(
2269
+ /* @__PURE__ */ jsx14(
1996
2270
  LSInput,
1997
2271
  {
1998
2272
  autoFocus: true,
1999
- startAdornment: /* @__PURE__ */ jsx13(Search, { style: { color: "#fff", width: 20, height: 20 } }),
2273
+ startAdornment: /* @__PURE__ */ jsx14(Search, { style: { color: "#fff", width: 20, height: 20 } }),
2000
2274
  placeholder: t("common.search", "Search"),
2001
2275
  value: searchQuery,
2002
2276
  onChange: (e) => setSearchQuery(e.target.value),
@@ -2004,14 +2278,14 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2004
2278
  }
2005
2279
  )
2006
2280
  ] }),
2007
- /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__header", children: [
2008
- /* @__PURE__ */ jsx13("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
2009
- /* @__PURE__ */ jsx13("div", { children: t("commands.description", "Description") }),
2010
- /* @__PURE__ */ jsx13("div", { children: t("common.value", "Value") })
2281
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__header", children: [
2282
+ /* @__PURE__ */ jsx14("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
2283
+ /* @__PURE__ */ jsx14("div", { children: t("commands.description", "Description") }),
2284
+ /* @__PURE__ */ jsx14("div", { children: t("common.value", "Value") })
2011
2285
  ] }),
2012
- /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__list", children: [
2013
- showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "ls-variable-picker__field", children: [
2014
- /* @__PURE__ */ jsx13("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
2286
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__list", children: [
2287
+ showSuggestedSection && /* @__PURE__ */ jsxs6("fieldset", { className: "ls-variable-picker__field", children: [
2288
+ /* @__PURE__ */ jsx14("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
2015
2289
  filteredAllowedVariables.map((definition, idx) => {
2016
2290
  const variableType = getAllowedVariableVisualType(
2017
2291
  definition.name
@@ -2024,8 +2298,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2024
2298
  const expanded = expandable && isPathExpanded(definition.name);
2025
2299
  const isLast = idx === filteredAllowedVariables.length - 1;
2026
2300
  const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
2027
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
2028
- /* @__PURE__ */ jsxs5(
2301
+ return /* @__PURE__ */ jsxs6(Fragment4, { children: [
2302
+ /* @__PURE__ */ jsxs6(
2029
2303
  "div",
2030
2304
  {
2031
2305
  className: rowCls,
@@ -2035,12 +2309,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2035
2309
  else insertVariable(definition.name);
2036
2310
  },
2037
2311
  children: [
2038
- /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
2312
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__token-cell", children: [
2039
2313
  expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
2040
2314
  renderVariableToken(definition.name, variableType, true)
2041
2315
  ] }),
2042
- /* @__PURE__ */ jsx13("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
2043
- /* @__PURE__ */ jsx13(
2316
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
2317
+ /* @__PURE__ */ jsx14(
2044
2318
  "div",
2045
2319
  {
2046
2320
  className: "ls-variable-picker__value",
@@ -2061,11 +2335,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2061
2335
  variable.value
2062
2336
  );
2063
2337
  const rootToken = variable.example ?? variable.name;
2338
+ const examples = variableExamples[variable.name] ?? [];
2064
2339
  const tree = systemVariableValueTrees.get(variable.name);
2065
- const expandable = !!tree && tree.length > 0;
2340
+ const expandable = examples.length > 0 || !!tree && tree.length > 0;
2066
2341
  const expanded = expandable && isPathExpanded(rootToken);
2067
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
2068
- /* @__PURE__ */ jsxs5(
2342
+ return /* @__PURE__ */ jsxs6(Fragment4, { children: [
2343
+ /* @__PURE__ */ jsxs6(
2069
2344
  "div",
2070
2345
  {
2071
2346
  className: "ls-variable-picker__row",
@@ -2074,21 +2349,21 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2074
2349
  else insertVariable(rootToken);
2075
2350
  },
2076
2351
  children: [
2077
- /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
2352
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__token-cell", children: [
2078
2353
  expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
2079
2354
  renderVariableToken(variable.name, variableType)
2080
2355
  ] }),
2081
- /* @__PURE__ */ jsx13("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
2082
- /* @__PURE__ */ jsx13("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
2356
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
2357
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
2083
2358
  ]
2084
2359
  }
2085
2360
  ),
2086
- expanded && tree && renderValueChildRows(rootToken, tree)
2361
+ expanded && (examples.length > 0 ? renderExampleChildRows(variable, examples) : tree && renderValueChildRows(rootToken, tree))
2087
2362
  ] }, variable.name);
2088
2363
  })
2089
2364
  ] })
2090
2365
  ] }) : null;
2091
- const textField = (params = {}) => /* @__PURE__ */ jsx13(
2366
+ const textField = (params = {}) => /* @__PURE__ */ jsx14(
2092
2367
  VariableInputTextField,
2093
2368
  {
2094
2369
  t,
@@ -2111,11 +2386,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2111
2386
  inputProps,
2112
2387
  allowedVariables,
2113
2388
  showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
2114
- ref
2389
+ currentValue: currentVariableValue,
2390
+ ref: mergedInputRef
2115
2391
  }
2116
2392
  );
2117
- return /* @__PURE__ */ jsxs5(Fragment3, { children: [
2118
- /* @__PURE__ */ jsx13(
2393
+ return /* @__PURE__ */ jsxs6(Fragment5, { children: [
2394
+ /* @__PURE__ */ jsx14(
2119
2395
  Popover,
2120
2396
  {
2121
2397
  anchorEl: containerRef.current,
@@ -2141,7 +2417,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2141
2417
  children: pickerBody
2142
2418
  }
2143
2419
  ),
2144
- isAutoComplete ? /* @__PURE__ */ jsx13(
2420
+ isAutoComplete ? /* @__PURE__ */ jsx14(
2145
2421
  Autocomplete2,
2146
2422
  {
2147
2423
  disableClearable: true,
@@ -2237,7 +2513,17 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2237
2513
  onClose: onPopupClose,
2238
2514
  renderInput: (params) => textField(params)
2239
2515
  }
2240
- ) : textField()
2516
+ ) : textField(),
2517
+ !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx14(
2518
+ VariableHighlightOverlay,
2519
+ {
2520
+ inputEl,
2521
+ value,
2522
+ multiline,
2523
+ classify: getAllowedVariableVisualType,
2524
+ describe: getAllowedVariableDescription
2525
+ }
2526
+ ) : null
2241
2527
  ] });
2242
2528
  });
2243
2529
  LSVariableInputField.displayName = "LSVariableInputField";
@@ -2261,15 +2547,16 @@ var VariableInputTextField = forwardRef7(
2261
2547
  clickedVariableIcon,
2262
2548
  params = {},
2263
2549
  containerRef,
2264
- showVariableIcon
2550
+ showVariableIcon,
2551
+ currentValue
2265
2552
  }, ref) => {
2266
2553
  const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
2267
2554
  const paramsSlotInput = params?.slotProps?.input ?? {};
2268
2555
  const explicitStartAdornment = inputProps?.startAdornment;
2269
- const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx13(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
2556
+ const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx14(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
2270
2557
  const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
2271
2558
  const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
2272
- return /* @__PURE__ */ jsx13(
2559
+ return /* @__PURE__ */ jsx14(
2273
2560
  LSTextField,
2274
2561
  {
2275
2562
  id,
@@ -2297,9 +2584,25 @@ var VariableInputTextField = forwardRef7(
2297
2584
  ...inputPropsSlotInput,
2298
2585
  ...paramsSlotInput,
2299
2586
  startAdornment,
2300
- endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
2587
+ endAdornment: /* @__PURE__ */ jsxs6(Fragment5, { children: [
2301
2588
  endAdornment ?? null,
2302
- showVariableIcon ? /* @__PURE__ */ jsx13(Tooltip2, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx13(
2589
+ currentValue ? /* @__PURE__ */ jsx14(Tooltip2, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx14(
2590
+ InputAdornment2,
2591
+ {
2592
+ position: "end",
2593
+ className: "ls-variable-input-current-value",
2594
+ style: {
2595
+ maxWidth: 120,
2596
+ overflow: "hidden",
2597
+ textOverflow: "ellipsis",
2598
+ whiteSpace: "nowrap",
2599
+ opacity: 0.6,
2600
+ fontSize: "0.75em"
2601
+ },
2602
+ children: currentValue.displayValue
2603
+ }
2604
+ ) }) : null,
2605
+ showVariableIcon ? /* @__PURE__ */ jsx14(Tooltip2, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx14(
2303
2606
  InputAdornment2,
2304
2607
  {
2305
2608
  position: "end",
@@ -2320,7 +2623,7 @@ var VariableInputTextField = forwardRef7(
2320
2623
  VariableInputTextField.displayName = "VariableInputTextField";
2321
2624
 
2322
2625
  // src/components/ChatMessageItem/ChatMessageItem.tsx
2323
- import { useState as useState5 } from "react";
2626
+ import { useState as useState6 } from "react";
2324
2627
  import ListItemIcon from "@mui/material/ListItemIcon";
2325
2628
  import ListItemText from "@mui/material/ListItemText";
2326
2629
  import Menu from "@mui/material/Menu";
@@ -2356,7 +2659,7 @@ var twitter_default = 'data:image/svg+xml,<svg width="400" height="400" viewBox=
2356
2659
  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';
2357
2660
 
2358
2661
  // src/components/PlatformIcon/PlatformIcon.tsx
2359
- import { jsx as jsx14 } from "react/jsx-runtime";
2662
+ import { jsx as jsx15 } from "react/jsx-runtime";
2360
2663
  var PLATFORM_ICON_URLS = {
2361
2664
  twitch: twitch_default,
2362
2665
  youtube: youtube_default,
@@ -2381,28 +2684,28 @@ function PlatformIcon({ platform, fallback = true, size, className, title, style
2381
2684
  return null;
2382
2685
  }
2383
2686
  const sizeStyle = size !== void 0 ? { height: typeof size === "number" ? `${size}px` : size } : void 0;
2384
- return /* @__PURE__ */ jsx14("img", { className: classNames6("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
2687
+ return /* @__PURE__ */ jsx15("img", { className: classNames6("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
2385
2688
  }
2386
2689
  PlatformIcon.displayName = "PlatformIcon";
2387
2690
 
2388
2691
  // src/components/ChatMessageItem/modActionIcons.tsx
2389
- import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
2390
- var DeleteIcon = () => /* @__PURE__ */ jsx15("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15(
2692
+ import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
2693
+ 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(
2391
2694
  "path",
2392
2695
  {
2393
2696
  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",
2394
2697
  fill: "currentColor"
2395
2698
  }
2396
2699
  ) });
2397
- var CopyIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2398
- /* @__PURE__ */ jsx15(
2700
+ var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2701
+ /* @__PURE__ */ jsx16(
2399
2702
  "path",
2400
2703
  {
2401
2704
  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",
2402
2705
  fill: "currentColor"
2403
2706
  }
2404
2707
  ),
2405
- /* @__PURE__ */ jsx15(
2708
+ /* @__PURE__ */ jsx16(
2406
2709
  "path",
2407
2710
  {
2408
2711
  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",
@@ -2410,18 +2713,18 @@ var CopyIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "12", height: "12", v
2410
2713
  }
2411
2714
  )
2412
2715
  ] });
2413
- var PinOnIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("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" }) });
2414
- var PinOffIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15(
2716
+ 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" }) });
2717
+ 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(
2415
2718
  "path",
2416
2719
  {
2417
2720
  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",
2418
2721
  fill: "currentColor"
2419
2722
  }
2420
2723
  ) });
2421
- var TranslateIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2422
- /* @__PURE__ */ jsxs6("g", { clipPath: "url(#ls-chat-translate-clip)", children: [
2423
- /* @__PURE__ */ jsx15("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" }),
2424
- /* @__PURE__ */ jsx15(
2724
+ var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2725
+ /* @__PURE__ */ jsxs7("g", { clipPath: "url(#ls-chat-translate-clip)", children: [
2726
+ /* @__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" }),
2727
+ /* @__PURE__ */ jsx16(
2425
2728
  "path",
2426
2729
  {
2427
2730
  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",
@@ -2429,17 +2732,17 @@ var TranslateIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "1
2429
2732
  }
2430
2733
  )
2431
2734
  ] }),
2432
- /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "ls-chat-translate-clip", children: /* @__PURE__ */ jsx15("rect", { width: "88", height: "88", fill: "#fff", transform: "translate(10 9)" }) }) })
2735
+ /* @__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)" }) }) })
2433
2736
  ] });
2434
- var BanUserIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2435
- /* @__PURE__ */ jsx15(
2737
+ var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2738
+ /* @__PURE__ */ jsx16(
2436
2739
  "path",
2437
2740
  {
2438
2741
  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",
2439
2742
  fill: "currentColor"
2440
2743
  }
2441
2744
  ),
2442
- /* @__PURE__ */ jsx15(
2745
+ /* @__PURE__ */ jsx16(
2443
2746
  "path",
2444
2747
  {
2445
2748
  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",
@@ -2447,15 +2750,15 @@ var BanUserIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16"
2447
2750
  }
2448
2751
  )
2449
2752
  ] });
2450
- var TimeoutUserIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 107 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2451
- /* @__PURE__ */ jsx15(
2753
+ var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2754
+ /* @__PURE__ */ jsx16(
2452
2755
  "path",
2453
2756
  {
2454
2757
  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",
2455
2758
  fill: "currentColor"
2456
2759
  }
2457
2760
  ),
2458
- /* @__PURE__ */ jsx15(
2761
+ /* @__PURE__ */ jsx16(
2459
2762
  "path",
2460
2763
  {
2461
2764
  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",
@@ -2463,22 +2766,22 @@ var TimeoutUserIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height:
2463
2766
  }
2464
2767
  )
2465
2768
  ] });
2466
- var MenuDotsIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 3 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2467
- /* @__PURE__ */ jsx15(
2769
+ var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 3 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2770
+ /* @__PURE__ */ jsx16(
2468
2771
  "path",
2469
2772
  {
2470
2773
  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",
2471
2774
  fill: "currentColor"
2472
2775
  }
2473
2776
  ),
2474
- /* @__PURE__ */ jsx15(
2777
+ /* @__PURE__ */ jsx16(
2475
2778
  "path",
2476
2779
  {
2477
2780
  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",
2478
2781
  fill: "currentColor"
2479
2782
  }
2480
2783
  ),
2481
- /* @__PURE__ */ jsx15(
2784
+ /* @__PURE__ */ jsx16(
2482
2785
  "path",
2483
2786
  {
2484
2787
  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",
@@ -2486,7 +2789,7 @@ var MenuDotsIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16
2486
2789
  }
2487
2790
  )
2488
2791
  ] });
2489
- var ShoutoutIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15(
2792
+ 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(
2490
2793
  "path",
2491
2794
  {
2492
2795
  fillRule: "evenodd",
@@ -2495,7 +2798,7 @@ var ShoutoutIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16
2495
2798
  fill: "currentColor"
2496
2799
  }
2497
2800
  ) });
2498
- var VipIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15(
2801
+ 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(
2499
2802
  "path",
2500
2803
  {
2501
2804
  fillRule: "evenodd",
@@ -2504,14 +2807,14 @@ var VipIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", vi
2504
2807
  fill: "currentColor"
2505
2808
  }
2506
2809
  ) });
2507
- var RemoveVipIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15(
2810
+ 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(
2508
2811
  "path",
2509
2812
  {
2510
2813
  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",
2511
2814
  fill: "currentColor"
2512
2815
  }
2513
2816
  ) });
2514
- var ModeratorIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 20 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15(
2817
+ 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(
2515
2818
  "path",
2516
2819
  {
2517
2820
  fillRule: "evenodd",
@@ -2522,7 +2825,7 @@ var ModeratorIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "1
2522
2825
  ) });
2523
2826
 
2524
2827
  // src/components/ChatMessageItem/ChatMessageItem.tsx
2525
- import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
2828
+ import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
2526
2829
  var DEFAULT_MOD_ACTION_LABELS = {
2527
2830
  delete: "Delete Message",
2528
2831
  copy: "Copy to clipboard",
@@ -2547,7 +2850,7 @@ function ModActionButton({
2547
2850
  onClick,
2548
2851
  children
2549
2852
  }) {
2550
- return /* @__PURE__ */ jsx16(Tooltip3, { title, placement, children: /* @__PURE__ */ jsx16(
2853
+ return /* @__PURE__ */ jsx17(Tooltip3, { title, placement, children: /* @__PURE__ */ jsx17(
2551
2854
  "span",
2552
2855
  {
2553
2856
  className: classNames7("ls-chat-message__modbtn", { "ls-chat-message__modbtn--danger": danger }),
@@ -2590,11 +2893,11 @@ function ChatMessageItem({
2590
2893
  onMouseEnter,
2591
2894
  onMouseLeave
2592
2895
  }) {
2593
- const [hovered, setHovered] = useState5(false);
2594
- const [menuPosition, setMenuPosition] = useState5(null);
2595
- const [menuAnchorEl, setMenuAnchorEl] = useState5(null);
2896
+ const [hovered, setHovered] = useState6(false);
2897
+ const [menuPosition, setMenuPosition] = useState6(null);
2898
+ const [menuAnchorEl, setMenuAnchorEl] = useState6(null);
2596
2899
  const name = displayname || username;
2597
- const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx16(PlatformIcon, { platform }) : null);
2900
+ const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx17(PlatformIcon, { platform }) : null);
2598
2901
  const has = (action) => Boolean(modActions?.includes(action));
2599
2902
  const label = (action) => modActionLabels?.[action] ?? DEFAULT_MOD_ACTION_LABELS[action];
2600
2903
  const vipAction = isVip ? "remove-vip" : "add-vip";
@@ -2621,7 +2924,7 @@ function ChatMessageItem({
2621
2924
  setMenuPosition((prev) => prev === null ? { top: event.clientY - 4, left: event.clientX - 2 } : null);
2622
2925
  }
2623
2926
  };
2624
- const menuItem = (action, icon) => has(action) ? /* @__PURE__ */ jsxs7(
2927
+ const menuItem = (action, icon) => has(action) ? /* @__PURE__ */ jsxs8(
2625
2928
  MenuItem2,
2626
2929
  {
2627
2930
  onClick: () => {
@@ -2629,31 +2932,31 @@ function ChatMessageItem({
2629
2932
  closeMenu();
2630
2933
  },
2631
2934
  children: [
2632
- /* @__PURE__ */ jsx16(ListItemIcon, { children: /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
2633
- /* @__PURE__ */ jsx16(ListItemText, { children: label(action) })
2935
+ /* @__PURE__ */ jsx17(ListItemIcon, { children: /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
2936
+ /* @__PURE__ */ jsx17(ListItemText, { children: label(action) })
2634
2937
  ]
2635
2938
  },
2636
2939
  action
2637
2940
  ) : null;
2638
- const builtInActions = hasVisibleModActions && hovered && !actions ? /* @__PURE__ */ jsxs7("span", { className: "ls-chat-message__modbar", children: [
2639
- has("delete") && /* @__PURE__ */ jsx16(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx16(DeleteIcon, {}) }),
2640
- has("pin") && /* @__PURE__ */ jsx16(
2941
+ const builtInActions = hasVisibleModActions && hovered && !actions ? /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__modbar", children: [
2942
+ has("delete") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx17(DeleteIcon, {}) }),
2943
+ has("pin") && /* @__PURE__ */ jsx17(
2641
2944
  ModActionButton,
2642
2945
  {
2643
2946
  title: label(isPinned ? "unpin" : "pin"),
2644
2947
  placement: modActionsTooltipPlacement,
2645
2948
  onClick: () => fire(isPinned ? "unpin" : "pin"),
2646
- children: isPinned ? /* @__PURE__ */ jsx16(PinOffIcon, {}) : /* @__PURE__ */ jsx16(PinOnIcon, {})
2949
+ children: isPinned ? /* @__PURE__ */ jsx17(PinOffIcon, {}) : /* @__PURE__ */ jsx17(PinOnIcon, {})
2647
2950
  }
2648
2951
  ),
2649
- has("copy") && /* @__PURE__ */ jsx16(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx16(CopyIcon, {}) }),
2650
- has("translate") && /* @__PURE__ */ jsx16(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx16(TranslateIcon, {}) }),
2651
- has("ban") && !isSelf && /* @__PURE__ */ jsx16(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx16(BanUserIcon, {}) }),
2652
- has("timeout") && /* @__PURE__ */ jsx16(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx16(TimeoutUserIcon, {}) }),
2653
- hasOverflowMenuItems && /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx16(MenuDotsIcon, {}) })
2952
+ has("copy") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx17(CopyIcon, {}) }),
2953
+ has("translate") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx17(TranslateIcon, {}) }),
2954
+ has("ban") && !isSelf && /* @__PURE__ */ jsx17(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx17(BanUserIcon, {}) }),
2955
+ has("timeout") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx17(TimeoutUserIcon, {}) }),
2956
+ hasOverflowMenuItems && /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx17(MenuDotsIcon, {}) })
2654
2957
  ] }) : null;
2655
2958
  const actionsNode = actions ?? builtInActions;
2656
- return /* @__PURE__ */ jsxs7(
2959
+ return /* @__PURE__ */ jsxs8(
2657
2960
  "div",
2658
2961
  {
2659
2962
  className: classNames7("ls-chat-message", className),
@@ -2672,13 +2975,13 @@ function ChatMessageItem({
2672
2975
  onMouseLeave?.();
2673
2976
  },
2674
2977
  children: [
2675
- reply ? /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__reply", children: reply }) : null,
2676
- showAvatar && avatarPrefix ? /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
2677
- showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx16("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
2678
- siteIcon ? /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
2679
- showTimestamp && timestamp ? /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__time", children: timestamp }) : null,
2680
- showBadges && badges ? /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__badges", children: badges }) : null,
2681
- onUsernameClick ? /* @__PURE__ */ jsxs7(
2978
+ reply ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__reply", children: reply }) : null,
2979
+ showAvatar && avatarPrefix ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
2980
+ showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx17("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
2981
+ siteIcon ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
2982
+ showTimestamp && timestamp ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__time", children: timestamp }) : null,
2983
+ showBadges && badges ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__badges", children: badges }) : null,
2984
+ onUsernameClick ? /* @__PURE__ */ jsxs8(
2682
2985
  "button",
2683
2986
  {
2684
2987
  type: "button",
@@ -2693,14 +2996,14 @@ function ChatMessageItem({
2693
2996
  ":"
2694
2997
  ]
2695
2998
  }
2696
- ) : /* @__PURE__ */ jsxs7("span", { className: "ls-chat-message__username", style: color ? { color } : void 0, children: [
2999
+ ) : /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__username", style: color ? { color } : void 0, children: [
2697
3000
  name,
2698
3001
  ":"
2699
3002
  ] }),
2700
3003
  " ",
2701
- /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__text", children: message }),
2702
- actionsNode ? /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
2703
- onModAction && hasOverflowMenuItems ? /* @__PURE__ */ jsxs7(
3004
+ /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__text", children: message }),
3005
+ actionsNode ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
3006
+ onModAction && hasOverflowMenuItems ? /* @__PURE__ */ jsxs8(
2704
3007
  Menu,
2705
3008
  {
2706
3009
  open: modMenuAnchor === "element" ? menuAnchorEl !== null : menuPosition !== null,
@@ -2711,10 +3014,10 @@ function ChatMessageItem({
2711
3014
  anchorOrigin: modMenuAnchor === "element" ? { vertical: "bottom", horizontal: "right" } : void 0,
2712
3015
  transformOrigin: modMenuAnchor === "element" ? { vertical: "top", horizontal: "right" } : void 0,
2713
3016
  children: [
2714
- menuItem("shoutout", /* @__PURE__ */ jsx16(ShoutoutIcon, {})),
2715
- menuItem(vipAction, isVip ? /* @__PURE__ */ jsx16(RemoveVipIcon, {}) : /* @__PURE__ */ jsx16(VipIcon, {})),
2716
- menuItem(moderatorAction, /* @__PURE__ */ jsx16(ModeratorIcon, {})),
2717
- menuItem("unban", /* @__PURE__ */ jsx16(BanUserIcon, {}))
3017
+ menuItem("shoutout", /* @__PURE__ */ jsx17(ShoutoutIcon, {})),
3018
+ menuItem(vipAction, isVip ? /* @__PURE__ */ jsx17(RemoveVipIcon, {}) : /* @__PURE__ */ jsx17(VipIcon, {})),
3019
+ menuItem(moderatorAction, /* @__PURE__ */ jsx17(ModeratorIcon, {})),
3020
+ menuItem("unban", /* @__PURE__ */ jsx17(BanUserIcon, {}))
2718
3021
  ]
2719
3022
  }
2720
3023
  ) : null
@@ -2725,16 +3028,16 @@ function ChatMessageItem({
2725
3028
  ChatMessageItem.displayName = "ChatMessageItem";
2726
3029
 
2727
3030
  // src/components/ChatboxPanel/ChatboxPanel.tsx
2728
- import { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
3031
+ import { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
2729
3032
  import MenuItem3 from "@mui/material/MenuItem";
2730
3033
  import classNames8 from "classnames";
2731
3034
 
2732
3035
  // src/components/ChatboxPanel/useAutoScroll.ts
2733
- import { useCallback as useCallback3, useRef as useRef4, useState as useState6 } from "react";
3036
+ import { useCallback as useCallback3, useRef as useRef5, useState as useState7 } from "react";
2734
3037
  var useAutoScroll = (threshold = 24, options) => {
2735
- const containerRef = useRef4(null);
2736
- const shouldAutoScrollRef = useRef4(true);
2737
- const [isAtBottom, setIsAtBottom] = useState6(true);
3038
+ const containerRef = useRef5(null);
3039
+ const shouldAutoScrollRef = useRef5(true);
3040
+ const [isAtBottom, setIsAtBottom] = useState7(true);
2738
3041
  const reverse = options?.reverse ?? false;
2739
3042
  const isNearBottom = useCallback3(() => {
2740
3043
  if (!containerRef.current) return true;
@@ -2770,7 +3073,7 @@ var useAutoScroll = (threshold = 24, options) => {
2770
3073
  };
2771
3074
 
2772
3075
  // src/components/ChatboxPanel/ChatboxPanel.tsx
2773
- import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
3076
+ import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
2774
3077
  function ChatboxPanel({
2775
3078
  children,
2776
3079
  messageCount,
@@ -2802,24 +3105,24 @@ function ChatboxPanel({
2802
3105
  className
2803
3106
  }) {
2804
3107
  const { containerRef, isAtBottom, onScroll, scrollToBottom } = useAutoScroll(24, { reverse });
2805
- const [unreadCount, setUnreadCount] = useState7(0);
2806
- const [internalValue, setInternalValue] = useState7("");
2807
- const prevCountRef = useRef5(0);
2808
- const prevLastKeyRef = useRef5(null);
2809
- const hasInitializedRef = useRef5(false);
3108
+ const [unreadCount, setUnreadCount] = useState8(0);
3109
+ const [internalValue, setInternalValue] = useState8("");
3110
+ const prevCountRef = useRef6(0);
3111
+ const prevLastKeyRef = useRef6(null);
3112
+ const hasInitializedRef = useRef6(false);
2810
3113
  const lineHeight = Math.round(fontSize * 1.35);
2811
3114
  const isControlled = sendValue !== void 0 || onSendValueChange !== void 0;
2812
3115
  const inputValue = (isControlled ? sendValue : internalValue) ?? "";
2813
- useEffect5(() => {
3116
+ useEffect6(() => {
2814
3117
  scrollToBottom(true);
2815
3118
  }, [scrollToBottom]);
2816
- useEffect5(() => {
3119
+ useEffect6(() => {
2817
3120
  scrollToBottom();
2818
3121
  }, [messageCount, lastMessageKey, scrollToBottom]);
2819
- useEffect5(() => {
3122
+ useEffect6(() => {
2820
3123
  scrollToBottom(true);
2821
3124
  }, [reverse, scrollToBottom]);
2822
- useEffect5(() => {
3125
+ useEffect6(() => {
2823
3126
  const prevCount = prevCountRef.current;
2824
3127
  const prevLastKey = prevLastKeyRef.current;
2825
3128
  const nextLastKey = lastMessageKey === void 0 || lastMessageKey === null ? null : String(lastMessageKey);
@@ -2843,7 +3146,7 @@ function ChatboxPanel({
2843
3146
  setUnreadCount((count) => count + delta);
2844
3147
  }
2845
3148
  }, [messageCount, lastMessageKey, isAtBottom]);
2846
- useEffect5(() => {
3149
+ useEffect6(() => {
2847
3150
  if (isAtBottom && unreadCount !== 0) {
2848
3151
  setUnreadCount(0);
2849
3152
  }
@@ -2863,9 +3166,9 @@ function ChatboxPanel({
2863
3166
  setInternalValue("");
2864
3167
  }
2865
3168
  };
2866
- return /* @__PURE__ */ jsxs8("div", { className: classNames8("ls-chatbox", className), id, children: [
2867
- /* @__PURE__ */ jsxs8("div", { className: "ls-chatbox__viewport", children: [
2868
- /* @__PURE__ */ jsx17(
3169
+ return /* @__PURE__ */ jsxs9("div", { className: classNames8("ls-chatbox", className), id, children: [
3170
+ /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__viewport", children: [
3171
+ /* @__PURE__ */ jsx18(
2869
3172
  "div",
2870
3173
  {
2871
3174
  className: "ls-chatbox__list",
@@ -2880,7 +3183,7 @@ function ChatboxPanel({
2880
3183
  children
2881
3184
  }
2882
3185
  ),
2883
- !isAtBottom && /* @__PURE__ */ jsxs8(
3186
+ !isAtBottom && /* @__PURE__ */ jsxs9(
2884
3187
  "button",
2885
3188
  {
2886
3189
  type: "button",
@@ -2890,7 +3193,7 @@ function ChatboxPanel({
2890
3193
  setUnreadCount(0);
2891
3194
  },
2892
3195
  children: [
2893
- /* @__PURE__ */ jsxs8(
3196
+ /* @__PURE__ */ jsxs9(
2894
3197
  "svg",
2895
3198
  {
2896
3199
  className: classNames8("ls-chatbox__jump-arrow", { "ls-chatbox__jump-arrow--up": reverse }),
@@ -2903,19 +3206,19 @@ function ChatboxPanel({
2903
3206
  strokeLinecap: "round",
2904
3207
  strokeLinejoin: "round",
2905
3208
  children: [
2906
- /* @__PURE__ */ jsx17("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
2907
- /* @__PURE__ */ jsx17("polyline", { points: "19 12 12 19 5 12" })
3209
+ /* @__PURE__ */ jsx18("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
3210
+ /* @__PURE__ */ jsx18("polyline", { points: "19 12 12 19 5 12" })
2908
3211
  ]
2909
3212
  }
2910
3213
  ),
2911
3214
  jumpToLatestLabel,
2912
- unreadCount > 0 && /* @__PURE__ */ jsx17("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
3215
+ unreadCount > 0 && /* @__PURE__ */ jsx18("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
2913
3216
  ]
2914
3217
  }
2915
3218
  )
2916
3219
  ] }),
2917
- showSendBar && onSend ? /* @__PURE__ */ jsxs8("div", { className: "ls-chatbox__sendbar", children: [
2918
- /* @__PURE__ */ jsx17(
3220
+ showSendBar && onSend ? /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__sendbar", children: [
3221
+ /* @__PURE__ */ jsx18(
2919
3222
  LSInput,
2920
3223
  {
2921
3224
  className: "ls-chatbox__input",
@@ -2928,7 +3231,7 @@ function ChatboxPanel({
2928
3231
  }
2929
3232
  }
2930
3233
  ),
2931
- hasPlatformSelect ? /* @__PURE__ */ jsxs8(
3234
+ hasPlatformSelect ? /* @__PURE__ */ jsxs9(
2932
3235
  LSSelect,
2933
3236
  {
2934
3237
  className: "ls-chatbox__platform",
@@ -2937,15 +3240,15 @@ function ChatboxPanel({
2937
3240
  displayEmpty: true,
2938
3241
  onChange: (e) => onPlatformChange?.(String(e.target.value)),
2939
3242
  children: [
2940
- allPlatformsLabel != null && /* @__PURE__ */ jsx17(MenuItem3, { value: "", children: allPlatformsLabel }),
2941
- platforms?.map((option) => /* @__PURE__ */ jsx17(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs8("span", { className: "ls-chatbox__platform-option", children: [
2942
- /* @__PURE__ */ jsx17(PlatformIcon, { platform: option.value, fallback: false }),
3243
+ allPlatformsLabel != null && /* @__PURE__ */ jsx18(MenuItem3, { value: "", children: allPlatformsLabel }),
3244
+ platforms?.map((option) => /* @__PURE__ */ jsx18(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs9("span", { className: "ls-chatbox__platform-option", children: [
3245
+ /* @__PURE__ */ jsx18(PlatformIcon, { platform: option.value, fallback: false }),
2943
3246
  option.label
2944
3247
  ] }) }, option.value))
2945
3248
  ]
2946
3249
  }
2947
3250
  ) : null,
2948
- onChatAsChange ? /* @__PURE__ */ jsxs8(
3251
+ onChatAsChange ? /* @__PURE__ */ jsxs9(
2949
3252
  LSSelect,
2950
3253
  {
2951
3254
  className: "ls-chatbox__chatas",
@@ -2953,12 +3256,12 @@ function ChatboxPanel({
2953
3256
  value: chatAs ?? "self",
2954
3257
  onChange: (e) => onChatAsChange(e.target.value === "bot" ? "bot" : "self"),
2955
3258
  children: [
2956
- /* @__PURE__ */ jsx17(MenuItem3, { value: "self", children: chatAsSelfLabel }),
2957
- /* @__PURE__ */ jsx17(MenuItem3, { value: "bot", children: chatAsBotLabel })
3259
+ /* @__PURE__ */ jsx18(MenuItem3, { value: "self", children: chatAsSelfLabel }),
3260
+ /* @__PURE__ */ jsx18(MenuItem3, { value: "bot", children: chatAsBotLabel })
2958
3261
  ]
2959
3262
  }
2960
3263
  ) : null,
2961
- /* @__PURE__ */ jsx17(
3264
+ /* @__PURE__ */ jsx18(
2962
3265
  LSButton,
2963
3266
  {
2964
3267
  className: "ls-chatbox__send",
@@ -2977,7 +3280,7 @@ ChatboxPanel.displayName = "ChatboxPanel";
2977
3280
  import Fade from "@mui/material/Fade";
2978
3281
  import Modal from "@mui/material/Modal";
2979
3282
  import classNames9 from "classnames";
2980
- import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
3283
+ import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
2981
3284
  var DIMENSIONS = {
2982
3285
  small: { width: "30%", height: "30%" },
2983
3286
  longS: { width: "50%", height: "30%" },
@@ -2988,15 +3291,15 @@ var DIMENSIONS = {
2988
3291
  tall: { width: "40%", height: "70%" },
2989
3292
  full: { width: "100%", height: "calc(100% - 1rem)" }
2990
3293
  };
2991
- var DefaultCloseIcon = () => /* @__PURE__ */ jsxs9("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [
2992
- /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "10" }),
2993
- /* @__PURE__ */ jsx18("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
2994
- /* @__PURE__ */ jsx18("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
3294
+ 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: [
3295
+ /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
3296
+ /* @__PURE__ */ jsx19("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
3297
+ /* @__PURE__ */ jsx19("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
2995
3298
  ] });
2996
3299
  var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
2997
3300
  const modalBackground = overlayProps?.background ? overlayProps.background : !overlayProps?.noBackground ? "var(--gradientBg, var(--background, #151230))" : void 0;
2998
3301
  const dimensions = overlayProps?.size && DIMENSIONS[overlayProps.size] || { width: "90%", height: "90%" };
2999
- return /* @__PURE__ */ jsx18(
3302
+ return /* @__PURE__ */ jsx19(
3000
3303
  Modal,
3001
3304
  {
3002
3305
  disableEnforceFocus: true,
@@ -3007,7 +3310,7 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3007
3310
  },
3008
3311
  className: "ls-dialog",
3009
3312
  style: { ...props.style, zIndex: `${props.zIndex ? props.zIndex : "2500"} !important` },
3010
- children: /* @__PURE__ */ jsx18(Fade, { in: props.open, children: /* @__PURE__ */ jsxs9(
3313
+ children: /* @__PURE__ */ jsx19(Fade, { in: props.open, children: /* @__PURE__ */ jsxs10(
3011
3314
  "div",
3012
3315
  {
3013
3316
  className: classNames9("ls-dialog__card", {
@@ -3022,22 +3325,22 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3022
3325
  },
3023
3326
  title: "",
3024
3327
  children: [
3025
- !props.$hideTop && /* @__PURE__ */ jsxs9(
3328
+ !props.$hideTop && /* @__PURE__ */ jsxs10(
3026
3329
  "div",
3027
3330
  {
3028
3331
  className: classNames9("ls-dialog__top", { "ls-dialog__top--full": overlayProps?.size === "full" }),
3029
3332
  style: { padding: props.$noPadTitle ? "0" : "1rem" },
3030
3333
  children: [
3031
- /* @__PURE__ */ jsx18("div", { className: "ls-dialog__top-side", children: props.$leftText }),
3032
- /* @__PURE__ */ jsx18("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
3033
- props.hideClose ? /* @__PURE__ */ jsx18("div", { className: "ls-dialog__top-side" }) : /* @__PURE__ */ jsx18("div", { className: "ls-dialog__close", children: /* @__PURE__ */ jsxs9("span", { onClick: props.close, className: "ls-dialog__close-btn", children: [
3034
- /* @__PURE__ */ jsx18("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
3035
- closeIcon ?? /* @__PURE__ */ jsx18(DefaultCloseIcon, {})
3334
+ /* @__PURE__ */ jsx19("div", { className: "ls-dialog__top-side", children: props.$leftText }),
3335
+ /* @__PURE__ */ jsx19("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
3336
+ 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: [
3337
+ /* @__PURE__ */ jsx19("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
3338
+ closeIcon ?? /* @__PURE__ */ jsx19(DefaultCloseIcon, {})
3036
3339
  ] }) })
3037
3340
  ]
3038
3341
  }
3039
3342
  ),
3040
- /* @__PURE__ */ jsx18(
3343
+ /* @__PURE__ */ jsx19(
3041
3344
  "div",
3042
3345
  {
3043
3346
  className: classNames9("ls-dialog__body", props.containerClass),
@@ -3045,9 +3348,9 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3045
3348
  children
3046
3349
  }
3047
3350
  ),
3048
- !props.$hideBottom && /* @__PURE__ */ jsxs9("div", { className: "ls-dialog__bottom", children: [
3049
- /* @__PURE__ */ jsx18(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
3050
- props.showTest && /* @__PURE__ */ jsx18(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
3351
+ !props.$hideBottom && /* @__PURE__ */ jsxs10("div", { className: "ls-dialog__bottom", children: [
3352
+ /* @__PURE__ */ jsx19(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
3353
+ props.showTest && /* @__PURE__ */ jsx19(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
3051
3354
  ] })
3052
3355
  ]
3053
3356
  }
@@ -3062,7 +3365,7 @@ import classNames11 from "classnames";
3062
3365
 
3063
3366
  // src/components/ModalChrome/PanelChrome.tsx
3064
3367
  import classNames10 from "classnames";
3065
- import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
3368
+ import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
3066
3369
  function PanelChrome({
3067
3370
  title,
3068
3371
  titleVariant = "heading",
@@ -3079,20 +3382,20 @@ function PanelChrome({
3079
3382
  }) {
3080
3383
  const hasHeader = Boolean(title || headerActions || onClose && showClose);
3081
3384
  const mergedStyle = padding ? { ...style, ["--ls-panel-padding"]: padding } : style;
3082
- const panel = /* @__PURE__ */ jsxs10("div", { className: classNames10("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
3083
- hasHeader ? /* @__PURE__ */ jsxs10("div", { className: "ls-panel__header", children: [
3084
- title ? /* @__PURE__ */ jsx19("span", { className: classNames10("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx19("span", {}),
3085
- /* @__PURE__ */ jsxs10("span", { className: "ls-panel__header-actions", children: [
3385
+ const panel = /* @__PURE__ */ jsxs11("div", { className: classNames10("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
3386
+ hasHeader ? /* @__PURE__ */ jsxs11("div", { className: "ls-panel__header", children: [
3387
+ title ? /* @__PURE__ */ jsx20("span", { className: classNames10("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx20("span", {}),
3388
+ /* @__PURE__ */ jsxs11("span", { className: "ls-panel__header-actions", children: [
3086
3389
  headerActions,
3087
- onClose && showClose ? /* @__PURE__ */ jsx19("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
3390
+ onClose && showClose ? /* @__PURE__ */ jsx20("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
3088
3391
  ] })
3089
3392
  ] }) : null,
3090
- /* @__PURE__ */ jsx19("div", { className: classNames10("ls-panel__body", bodyClassName), children }),
3091
- footer ? /* @__PURE__ */ jsx19("div", { className: "ls-panel__footer", children: footer }) : null
3393
+ /* @__PURE__ */ jsx20("div", { className: classNames10("ls-panel__body", bodyClassName), children }),
3394
+ footer ? /* @__PURE__ */ jsx20("div", { className: "ls-panel__footer", children: footer }) : null
3092
3395
  ] });
3093
3396
  if (onClickAway) {
3094
- return /* @__PURE__ */ jsxs10(Fragment4, { children: [
3095
- /* @__PURE__ */ jsx19("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
3397
+ return /* @__PURE__ */ jsxs11(Fragment6, { children: [
3398
+ /* @__PURE__ */ jsx20("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
3096
3399
  panel
3097
3400
  ] });
3098
3401
  }
@@ -3101,7 +3404,7 @@ function PanelChrome({
3101
3404
  PanelChrome.displayName = "PanelChrome";
3102
3405
 
3103
3406
  // src/components/ModalChrome/ModalChrome.tsx
3104
- import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
3407
+ import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
3105
3408
  function ModalChrome({
3106
3409
  open = true,
3107
3410
  onClose,
@@ -3126,9 +3429,9 @@ function ModalChrome({
3126
3429
  return null;
3127
3430
  }
3128
3431
  const mergedCardStyle = maxWidth ? { ...cardStyle, ["--ls-modal-max-width"]: maxWidth } : cardStyle;
3129
- return /* @__PURE__ */ jsxs11("div", { className: classNames11("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
3130
- /* @__PURE__ */ jsx20("div", { className: classNames11("ls-modal__backdrop", backdropClassName), onClick: onClose }),
3131
- /* @__PURE__ */ jsx20(
3432
+ return /* @__PURE__ */ jsxs12("div", { className: classNames11("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
3433
+ /* @__PURE__ */ jsx21("div", { className: classNames11("ls-modal__backdrop", backdropClassName), onClick: onClose }),
3434
+ /* @__PURE__ */ jsx21(
3132
3435
  PanelChrome,
3133
3436
  {
3134
3437
  className: classNames11(
@@ -3154,20 +3457,20 @@ ModalChrome.displayName = "ModalChrome";
3154
3457
 
3155
3458
  // src/components/WidgetChrome/WidgetChrome.tsx
3156
3459
  import classNames12 from "classnames";
3157
- import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
3460
+ import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
3158
3461
  function WidgetChromeButton({ active, buttonRef, className, children, ...rest }) {
3159
- return /* @__PURE__ */ jsx21("button", { ref: buttonRef, type: "button", className: classNames12("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
3462
+ return /* @__PURE__ */ jsx22("button", { ref: buttonRef, type: "button", className: classNames12("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
3160
3463
  }
3161
3464
  WidgetChromeButton.displayName = "WidgetChromeButton";
3162
3465
  function WidgetChrome({ title, leftActions, rightActions, headerExtra, showHeader = true, className, headerClassName, bodyClassName, style, id, children }) {
3163
- return /* @__PURE__ */ jsxs12("div", { className: classNames12("ls-widget", className), style, id, children: [
3164
- showHeader ? /* @__PURE__ */ jsxs12("div", { className: classNames12("ls-widget__header", headerClassName), children: [
3165
- /* @__PURE__ */ jsx21("div", { className: "ls-widget__side", children: leftActions }),
3166
- /* @__PURE__ */ jsx21("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx21("span", { children: title }) }),
3167
- /* @__PURE__ */ jsx21("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
3466
+ return /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget", className), style, id, children: [
3467
+ showHeader ? /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget__header", headerClassName), children: [
3468
+ /* @__PURE__ */ jsx22("div", { className: "ls-widget__side", children: leftActions }),
3469
+ /* @__PURE__ */ jsx22("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx22("span", { children: title }) }),
3470
+ /* @__PURE__ */ jsx22("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
3168
3471
  headerExtra
3169
3472
  ] }) : null,
3170
- /* @__PURE__ */ jsx21("div", { className: classNames12("ls-widget__body", bodyClassName), children })
3473
+ /* @__PURE__ */ jsx22("div", { className: classNames12("ls-widget__body", bodyClassName), children })
3171
3474
  ] });
3172
3475
  }
3173
3476
  WidgetChrome.displayName = "WidgetChrome";
@@ -3176,9 +3479,9 @@ WidgetChrome.displayName = "WidgetChrome";
3176
3479
  import classNames13 from "classnames";
3177
3480
 
3178
3481
  // src/components/EventList/EventTypeIcon.tsx
3179
- import { jsx as jsx22 } from "react/jsx-runtime";
3482
+ import { jsx as jsx23 } from "react/jsx-runtime";
3180
3483
  var createEventIcon = (def) => {
3181
- const Icon = (props) => /* @__PURE__ */ jsx22("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__ */ jsx22("path", { fill: "currentColor", ...path }, index)) });
3484
+ 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)) });
3182
3485
  return Icon;
3183
3486
  };
3184
3487
  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" }] });
@@ -3206,12 +3509,12 @@ var EVENT_TYPE_ICONS = {
3206
3509
  };
3207
3510
  function EventTypeIcon({ type, ...props }) {
3208
3511
  const Icon = (type != null ? EVENT_TYPE_ICONS[String(type).trim().toLowerCase()] : void 0) ?? EVENT_TYPE_FALLBACK_ICON;
3209
- return /* @__PURE__ */ jsx22(Icon, { ...props });
3512
+ return /* @__PURE__ */ jsx23(Icon, { ...props });
3210
3513
  }
3211
3514
  EventTypeIcon.displayName = "EventTypeIcon";
3212
3515
 
3213
3516
  // src/components/EventListItem/EventListItem.tsx
3214
- import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
3517
+ import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
3215
3518
  function EventListItem({
3216
3519
  username,
3217
3520
  message,
@@ -3231,7 +3534,7 @@ function EventListItem({
3231
3534
  onUsernameClick,
3232
3535
  className
3233
3536
  }) {
3234
- const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx23(EventTypeIcon, { type: eventType }) : null);
3537
+ const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx24(EventTypeIcon, { type: eventType }) : null);
3235
3538
  const style = {};
3236
3539
  if (accentColor) {
3237
3540
  style.borderLeftColor = accentColor;
@@ -3239,10 +3542,10 @@ function EventListItem({
3239
3542
  if (colorFullBackground && accentColor) {
3240
3543
  style.backgroundColor = `color-mix(in srgb, ${accentColor} 22%, var(--cardbackground, var(--neutralDark2, #211d3e)))`;
3241
3544
  }
3242
- return /* @__PURE__ */ jsxs13("div", { className: classNames13("ls-eventlist-item", className), style, children: [
3243
- /* @__PURE__ */ jsxs13("div", { className: "ls-eventlist-item__main", children: [
3244
- /* @__PURE__ */ jsxs13("div", { className: "ls-eventlist-item__identity", children: [
3245
- /* @__PURE__ */ jsx23(
3545
+ return /* @__PURE__ */ jsxs14("div", { className: classNames13("ls-eventlist-item", className), style, children: [
3546
+ /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__main", children: [
3547
+ /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__identity", children: [
3548
+ /* @__PURE__ */ jsx24(
3246
3549
  "span",
3247
3550
  {
3248
3551
  className: classNames13("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
@@ -3258,9 +3561,9 @@ function EventListItem({
3258
3561
  children: username
3259
3562
  }
3260
3563
  ),
3261
- platformIcon ? /* @__PURE__ */ jsx23("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
3262
- showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx23("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx23("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
3263
- resolvedAlertIcon ? /* @__PURE__ */ jsx23(
3564
+ platformIcon ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
3565
+ showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx24("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
3566
+ resolvedAlertIcon ? /* @__PURE__ */ jsx24(
3264
3567
  "span",
3265
3568
  {
3266
3569
  className: "ls-eventlist-item__icon",
@@ -3269,25 +3572,25 @@ function EventListItem({
3269
3572
  }
3270
3573
  ) : null
3271
3574
  ] }),
3272
- /* @__PURE__ */ jsxs13("div", { className: "ls-eventlist-item__body", children: [
3273
- message ? /* @__PURE__ */ jsx23("span", { className: "ls-eventlist-item__message", children: message }) : null,
3274
- showMessage && userMessage ? /* @__PURE__ */ jsxs13("span", { className: "ls-eventlist-item__usermessage", children: [
3575
+ /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__body", children: [
3576
+ message ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__message", children: message }) : null,
3577
+ showMessage && userMessage ? /* @__PURE__ */ jsxs14("span", { className: "ls-eventlist-item__usermessage", children: [
3275
3578
  "\u201C",
3276
3579
  userMessage,
3277
3580
  "\u201D"
3278
3581
  ] }) : null
3279
3582
  ] }),
3280
- showTimestamp && timestamp ? /* @__PURE__ */ jsx23("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
3583
+ showTimestamp && timestamp ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
3281
3584
  ] }),
3282
- actions ? /* @__PURE__ */ jsx23("div", { className: "ls-eventlist-item__actions", children: actions }) : null
3585
+ actions ? /* @__PURE__ */ jsx24("div", { className: "ls-eventlist-item__actions", children: actions }) : null
3283
3586
  ] });
3284
3587
  }
3285
3588
  EventListItem.displayName = "EventListItem";
3286
3589
 
3287
3590
  // src/components/EventList/EventList.tsx
3288
- import { useEffect as useEffect6, useRef as useRef6 } from "react";
3591
+ import { useEffect as useEffect7, useRef as useRef7 } from "react";
3289
3592
  import classNames14 from "classnames";
3290
- import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
3593
+ import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
3291
3594
  var PIN_THRESHOLD = 24;
3292
3595
  function EventList({
3293
3596
  items,
@@ -3309,9 +3612,9 @@ function EventList({
3309
3612
  endReachedThreshold = 24,
3310
3613
  className
3311
3614
  }) {
3312
- const listRef = useRef6(null);
3313
- const pinnedRef = useRef6(true);
3314
- useEffect6(() => {
3615
+ const listRef = useRef7(null);
3616
+ const pinnedRef = useRef7(true);
3617
+ useEffect7(() => {
3315
3618
  const el = listRef.current;
3316
3619
  if (!autoScroll || !el || !pinnedRef.current) {
3317
3620
  return;
@@ -3331,17 +3634,17 @@ function EventList({
3331
3634
  onEndReached();
3332
3635
  }
3333
3636
  };
3334
- return /* @__PURE__ */ jsx24("div", { className: classNames14("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs14("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
3335
- emptyIcon ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
3336
- /* @__PURE__ */ jsx24("span", { children: emptyText })
3337
- ] }) : /* @__PURE__ */ jsx24(
3637
+ return /* @__PURE__ */ jsx25("div", { className: classNames14("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
3638
+ emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
3639
+ /* @__PURE__ */ jsx25("span", { children: emptyText })
3640
+ ] }) : /* @__PURE__ */ jsx25(
3338
3641
  "div",
3339
3642
  {
3340
3643
  className: "ls-eventlist__list",
3341
3644
  ref: listRef,
3342
3645
  onScroll: handleScroll,
3343
3646
  style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
3344
- children: items.map((item) => /* @__PURE__ */ jsx24("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx24(
3647
+ children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
3345
3648
  EventListItem,
3346
3649
  {
3347
3650
  username: item.username,
@@ -3350,7 +3653,7 @@ function EventList({
3350
3653
  avatar: item.avatar,
3351
3654
  fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
3352
3655
  timestamp: item.timestamp,
3353
- platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx24(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
3656
+ platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
3354
3657
  alertIcon: item.alertIcon,
3355
3658
  eventType: item.eventType,
3356
3659
  accentColor: item.accentColor,
@@ -3370,7 +3673,7 @@ EventList.displayName = "EventList";
3370
3673
  // src/components/StreamStatusPanel/StreamStatusPanel.tsx
3371
3674
  import Tooltip4 from "@mui/material/Tooltip";
3372
3675
  import classNames15 from "classnames";
3373
- import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
3676
+ import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
3374
3677
  var LS_INFO_TOOLTIP_SX = {
3375
3678
  backgroundColor: "#1b1834",
3376
3679
  border: "1px solid #393853",
@@ -3383,8 +3686,8 @@ var LS_INFO_TOOLTIP_SX = {
3383
3686
  boxShadow: "0 10px 30px rgba(0, 0, 0, 0.45)"
3384
3687
  };
3385
3688
  var formatStatValue = (value) => value >= 1e3 ? `${value.toString().slice(0, -3)} K` : value.toString();
3386
- var TrendUpArrow = () => /* @__PURE__ */ jsx25("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx25("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" }) });
3387
- var TrendDownArrow = () => /* @__PURE__ */ jsx25("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx25("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" }) });
3689
+ 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" }) });
3690
+ 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" }) });
3388
3691
  function StreamStatusPanel({
3389
3692
  online = false,
3390
3693
  statusLabel,
@@ -3407,62 +3710,62 @@ function StreamStatusPanel({
3407
3710
  const hasPlatforms = platforms != null;
3408
3711
  const hasStats = stats.length > 0;
3409
3712
  if (!hasStatus && !hasTotal && !hasPlatforms && !hasStats) {
3410
- return /* @__PURE__ */ jsx25("div", { className: classNames15("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
3713
+ return /* @__PURE__ */ jsx26("div", { className: classNames15("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
3411
3714
  }
3412
- return /* @__PURE__ */ jsxs15("div", { className: classNames15("ls-streamstatus", className), id, children: [
3413
- hasStatus ? /* @__PURE__ */ jsx25("div", { className: "ls-streamstatus__status", children: statusSlot ?? /* @__PURE__ */ jsxs15(Fragment5, { children: [
3414
- /* @__PURE__ */ jsxs15("span", { className: "ls-streamstatus__indicator", children: [
3415
- online ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__indicator-ping" }) : null,
3416
- /* @__PURE__ */ jsx25("span", { className: classNames15("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
3715
+ return /* @__PURE__ */ jsxs16("div", { className: classNames15("ls-streamstatus", className), id, children: [
3716
+ hasStatus ? /* @__PURE__ */ jsx26("div", { className: "ls-streamstatus__status", children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
3717
+ /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__indicator", children: [
3718
+ online ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__indicator-ping" }) : null,
3719
+ /* @__PURE__ */ jsx26("span", { className: classNames15("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
3417
3720
  ] }),
3418
- /* @__PURE__ */ jsxs15("span", { className: "ls-streamstatus__status-body", children: [
3419
- /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
3420
- statusSublabel != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
3721
+ /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__status-body", children: [
3722
+ /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
3723
+ statusSublabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
3421
3724
  ] })
3422
3725
  ] }) }) : null,
3423
- hasTotal || hasPlatforms ? /* @__PURE__ */ jsxs15("div", { className: "ls-streamstatus__overview", children: [
3424
- hasTotal ? /* @__PURE__ */ jsxs15("div", { className: "ls-streamstatus__total", children: [
3425
- /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
3426
- totalLabel != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
3726
+ hasTotal || hasPlatforms ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__overview", children: [
3727
+ hasTotal ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__total", children: [
3728
+ /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
3729
+ totalLabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
3427
3730
  ] }) : null,
3428
- hasPlatforms ? /* @__PURE__ */ jsx25("div", { className: "ls-streamstatus__platforms", children: platforms.length === 0 ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__platforms-empty", children: platformsEmptyText }) : platforms.map((platform) => /* @__PURE__ */ jsxs15("div", { className: "ls-streamstatus__platform", children: [
3429
- /* @__PURE__ */ jsxs15("span", { className: "ls-streamstatus__platform-info", children: [
3430
- platform.icon != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__platform-icon", children: platform.icon }) : getPlatformIconUrl(String(platform.id)) ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__platform-icon", children: /* @__PURE__ */ jsx25(PlatformIcon, { platform: String(platform.id) }) }) : /* @__PURE__ */ jsx25(
3731
+ 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: [
3732
+ /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__platform-info", children: [
3733
+ 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(
3431
3734
  "span",
3432
3735
  {
3433
3736
  className: "ls-streamstatus__platform-dot",
3434
3737
  style: platform.accentColor ? { backgroundColor: platform.accentColor } : void 0
3435
3738
  }
3436
3739
  ),
3437
- /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__platform-label", children: platform.label })
3740
+ /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-label", children: platform.label })
3438
3741
  ] }),
3439
- /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__platform-value", children: platform.value })
3742
+ /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-value", children: platform.value })
3440
3743
  ] }, platform.id)) }) : null
3441
3744
  ] }) : null,
3442
- hasStats ? /* @__PURE__ */ jsx25(
3745
+ hasStats ? /* @__PURE__ */ jsx26(
3443
3746
  "div",
3444
3747
  {
3445
3748
  className: "ls-streamstatus__stats",
3446
3749
  style: statsColumns ? { gridTemplateColumns: `repeat(${statsColumns}, minmax(0, 1fr))` } : void 0,
3447
3750
  children: stats.map((stat) => {
3448
- const label = stat.label != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
3751
+ const label = stat.label != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
3449
3752
  const showHead = stat.icon != null || stat.actions != null || statsLabelPosition === "top" && label != null;
3450
3753
  const displayValue = typeof stat.value === "number" ? formatStatValue(stat.value) : stat.value;
3451
3754
  const trend = typeof stat.value === "number" && stat.previousValue != null ? stat.value - stat.previousValue >= 0 ? "up" : "down" : void 0;
3452
- const node = /* @__PURE__ */ jsxs15("div", { className: "ls-streamstatus__stat", style: stat.tooltip != null ? { cursor: "help" } : void 0, children: [
3453
- showHead ? /* @__PURE__ */ jsxs15("div", { className: "ls-streamstatus__stat-head", children: [
3454
- stat.icon != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
3755
+ const node = /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat", style: stat.tooltip != null ? { cursor: "help" } : void 0, children: [
3756
+ showHead ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat-head", children: [
3757
+ stat.icon != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
3455
3758
  statsLabelPosition === "top" ? label : null,
3456
- stat.actions != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
3759
+ stat.actions != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
3457
3760
  ] }) : null,
3458
- /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__stat-value", style: stat.accentColor ? { color: stat.accentColor } : void 0, children: trend ? /* @__PURE__ */ jsxs15("span", { className: "ls-streamstatus__stat-trendrow", children: [
3761
+ /* @__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: [
3459
3762
  displayValue,
3460
- trend === "up" ? /* @__PURE__ */ jsx25(TrendUpArrow, {}) : /* @__PURE__ */ jsx25(TrendDownArrow, {})
3763
+ trend === "up" ? /* @__PURE__ */ jsx26(TrendUpArrow, {}) : /* @__PURE__ */ jsx26(TrendDownArrow, {})
3461
3764
  ] }) : displayValue }),
3462
3765
  statsLabelPosition === "bottom" ? label : null,
3463
- stat.sub != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
3766
+ stat.sub != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
3464
3767
  ] }, stat.id);
3465
- return stat.tooltip != null ? /* @__PURE__ */ jsx25(Tooltip4, { title: stat.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }, stat.id) : node;
3768
+ 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;
3466
3769
  })
3467
3770
  }
3468
3771
  ) : null
@@ -3472,9 +3775,9 @@ StreamStatusPanel.displayName = "StreamStatusPanel";
3472
3775
 
3473
3776
  // src/components/ViewersList/ViewersList.tsx
3474
3777
  import * as React from "react";
3475
- import { useMemo as useMemo4, useState as useState8 } from "react";
3778
+ import { useMemo as useMemo5, useState as useState9 } from "react";
3476
3779
  import classNames16 from "classnames";
3477
- import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
3780
+ import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
3478
3781
  function ViewersList({
3479
3782
  viewers,
3480
3783
  groups,
@@ -3491,13 +3794,13 @@ function ViewersList({
3491
3794
  id,
3492
3795
  className
3493
3796
  }) {
3494
- const [query, setQuery] = useState8("");
3797
+ const [query, setQuery] = useState9("");
3495
3798
  const internalSearch = showSearch && !searchSlot;
3496
- const filtered = useMemo4(
3799
+ const filtered = useMemo5(
3497
3800
  () => internalSearch && query ? viewers.filter((viewer) => viewer.username.toLowerCase().includes(query.toLowerCase())) : viewers,
3498
3801
  [internalSearch, viewers, query]
3499
3802
  );
3500
- const sections = useMemo4(() => {
3803
+ const sections = useMemo5(() => {
3501
3804
  if (!groups || groups.length === 0) {
3502
3805
  return [{ key: "", viewers: filtered }];
3503
3806
  }
@@ -3507,25 +3810,25 @@ function ViewersList({
3507
3810
  return [...grouped, { key: "", viewers: rest }].filter((section) => section.viewers.length > 0);
3508
3811
  }, [groups, filtered]);
3509
3812
  const showHead = countLabel != null || searchSlot != null || internalSearch;
3510
- return /* @__PURE__ */ jsxs16("div", { className: classNames16("ls-viewerslist", className), id, children: [
3511
- showHead ? /* @__PURE__ */ jsxs16("div", { className: "ls-viewerslist__head", children: [
3512
- countLabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
3513
- searchSlot ? /* @__PURE__ */ jsx26("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
3514
- internalSearch ? /* @__PURE__ */ jsx26("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
3813
+ return /* @__PURE__ */ jsxs17("div", { className: classNames16("ls-viewerslist", className), id, children: [
3814
+ showHead ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__head", children: [
3815
+ countLabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
3816
+ searchSlot ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
3817
+ internalSearch ? /* @__PURE__ */ jsx27("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
3515
3818
  ] }) : null,
3516
- hint != null ? /* @__PURE__ */ jsx26("div", { className: "ls-viewerslist__hint", children: hint }) : null,
3517
- filtered.length === 0 ? /* @__PURE__ */ jsxs16("div", { className: "ls-viewerslist__empty", children: [
3518
- emptyIcon ? /* @__PURE__ */ jsx26("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
3519
- /* @__PURE__ */ jsx26("span", { children: emptyText })
3520
- ] }) : /* @__PURE__ */ jsx26("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs16(React.Fragment, { children: [
3521
- section.label != null ? /* @__PURE__ */ jsx26("div", { className: "ls-viewerslist__group", children: section.label }) : null,
3819
+ hint != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__hint", children: hint }) : null,
3820
+ filtered.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__empty", children: [
3821
+ emptyIcon ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
3822
+ /* @__PURE__ */ jsx27("span", { children: emptyText })
3823
+ ] }) : /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs17(React.Fragment, { children: [
3824
+ section.label != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__group", children: section.label }) : null,
3522
3825
  section.viewers.map((viewer) => {
3523
3826
  const avatarSrc = viewer.avatar || viewer.fallbackAvatar || fallbackAvatar;
3524
- const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx26(PlatformIcon, { platform: viewer.platform }) : null);
3525
- return /* @__PURE__ */ jsxs16("div", { className: "ls-viewerslist__viewer", children: [
3526
- showAvatars && avatarSrc ? /* @__PURE__ */ jsx26("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
3527
- platformIcon != null ? /* @__PURE__ */ jsx26("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
3528
- /* @__PURE__ */ jsx26(
3827
+ const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx27(PlatformIcon, { platform: viewer.platform }) : null);
3828
+ return /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__viewer", children: [
3829
+ showAvatars && avatarSrc ? /* @__PURE__ */ jsx27("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
3830
+ platformIcon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
3831
+ /* @__PURE__ */ jsx27(
3529
3832
  "span",
3530
3833
  {
3531
3834
  className: classNames16("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
@@ -3542,8 +3845,8 @@ function ViewersList({
3542
3845
  children: viewer.username
3543
3846
  }
3544
3847
  ),
3545
- viewer.badges != null ? /* @__PURE__ */ jsx26("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
3546
- viewer.actions != null ? /* @__PURE__ */ jsx26("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
3848
+ viewer.badges != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
3849
+ viewer.actions != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
3547
3850
  ] }, viewer.id);
3548
3851
  })
3549
3852
  ] }, section.key || "__ungrouped")) })
@@ -3553,7 +3856,7 @@ ViewersList.displayName = "ViewersList";
3553
3856
 
3554
3857
  // src/components/ShortcutDockGrid/ShortcutDockGrid.tsx
3555
3858
  import classNames17 from "classnames";
3556
- import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
3859
+ import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
3557
3860
  var softAccent = (color) => /^#[0-9a-fA-F]{6}$/.test(color) ? `${color}66` : color;
3558
3861
  function ShortcutDockGrid({
3559
3862
  buttons,
@@ -3576,7 +3879,7 @@ function ShortcutDockGrid({
3576
3879
  className
3577
3880
  }) {
3578
3881
  const showAdd = editMode && Boolean(onAdd);
3579
- return /* @__PURE__ */ jsxs17(
3882
+ return /* @__PURE__ */ jsxs18(
3580
3883
  "div",
3581
3884
  {
3582
3885
  className: classNames17(
@@ -3590,7 +3893,7 @@ function ShortcutDockGrid({
3590
3893
  gridAutoRows: rowHeight ? `${rowHeight}px` : "auto"
3591
3894
  },
3592
3895
  children: [
3593
- buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx27("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
3896
+ buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx28("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
3594
3897
  buttons.map((button) => {
3595
3898
  const large = (button.w ?? 1) > 1 || (button.h ?? 1) > 1;
3596
3899
  const selected = selectedId != null && selectedId === button.id;
@@ -3601,7 +3904,7 @@ function ShortcutDockGrid({
3601
3904
  ...rowHeight ? {} : { minHeight: minButtonSize },
3602
3905
  ...colored ? { ["--ls-shortcutdock-accent"]: button.color, ["--ls-shortcutdock-accent-soft"]: softAccent(button.color) } : {}
3603
3906
  };
3604
- const node = /* @__PURE__ */ jsx27(
3907
+ const node = /* @__PURE__ */ jsx28(
3605
3908
  "button",
3606
3909
  {
3607
3910
  type: "button",
@@ -3617,18 +3920,18 @@ function ShortcutDockGrid({
3617
3920
  onTrigger?.(button.id);
3618
3921
  }
3619
3922
  },
3620
- children: button.content ?? /* @__PURE__ */ jsxs17(Fragment7, { children: [
3621
- button.image ? /* @__PURE__ */ jsx27("img", { className: "ls-shortcutdock__btn-image", src: button.image, alt: "" }) : button.icon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-shortcutdock__icon", children: button.icon }) : null,
3622
- button.label != null ? /* @__PURE__ */ jsx27("span", { className: "ls-shortcutdock__label", children: button.label }) : null
3923
+ children: button.content ?? /* @__PURE__ */ jsxs18(Fragment9, { children: [
3924
+ 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,
3925
+ button.label != null ? /* @__PURE__ */ jsx28("span", { className: "ls-shortcutdock__label", children: button.label }) : null
3623
3926
  ] })
3624
3927
  }
3625
3928
  );
3626
- return /* @__PURE__ */ jsxs17("div", { className: "ls-shortcutdock__cell", style: cellStyle, title: button.title, children: [
3929
+ return /* @__PURE__ */ jsxs18("div", { className: "ls-shortcutdock__cell", style: cellStyle, title: button.title, children: [
3627
3930
  renderButton ? renderButton(button, node) : node,
3628
- editMode && onRemove ? /* @__PURE__ */ jsx27("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
3931
+ editMode && onRemove ? /* @__PURE__ */ jsx28("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
3629
3932
  ] }, button.id);
3630
3933
  }),
3631
- showAdd ? /* @__PURE__ */ jsx27(
3934
+ showAdd ? /* @__PURE__ */ jsx28(
3632
3935
  "button",
3633
3936
  {
3634
3937
  type: "button",
@@ -3648,7 +3951,7 @@ ShortcutDockGrid.displayName = "ShortcutDockGrid";
3648
3951
  // src/components/GoalsList/GoalsList.tsx
3649
3952
  import Tooltip5 from "@mui/material/Tooltip";
3650
3953
  import classNames18 from "classnames";
3651
- import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
3954
+ import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
3652
3955
  var GOAL_TOOLTIP_SX = {
3653
3956
  backgroundColor: "#1b1834",
3654
3957
  border: "1px solid #393853",
@@ -3672,32 +3975,32 @@ var resolvePercent = (goal) => {
3672
3975
  };
3673
3976
  function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goal data yet", id, className }) {
3674
3977
  const fmt = (value, goal) => formatValue ? formatValue(value, goal) : value;
3675
- return /* @__PURE__ */ jsx28("div", { className: classNames18("ls-goals", className), id, children: goals.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "ls-goals__empty", children: emptyText }) : goals.map((goal) => {
3978
+ 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) => {
3676
3979
  const percent = resolvePercent(goal);
3677
3980
  const rowStyle = {
3678
3981
  ...goal.accentColor ? { ["--ls-goals-accent"]: goal.accentColor } : {},
3679
3982
  ...goal.tooltip != null ? { cursor: "help" } : {}
3680
3983
  };
3681
- const node = /* @__PURE__ */ jsxs18("div", { className: "ls-goals__row", style: rowStyle, children: [
3682
- /* @__PURE__ */ jsxs18("div", { className: "ls-goals__head", children: [
3683
- goal.icon != null ? /* @__PURE__ */ jsx28("span", { className: "ls-goals__icon", children: goal.icon }) : null,
3684
- /* @__PURE__ */ jsx28("span", { className: "ls-goals__label", children: goal.label }),
3685
- /* @__PURE__ */ jsx28("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs18(Fragment8, { children: [
3984
+ const node = /* @__PURE__ */ jsxs19("div", { className: "ls-goals__row", style: rowStyle, children: [
3985
+ /* @__PURE__ */ jsxs19("div", { className: "ls-goals__head", children: [
3986
+ goal.icon != null ? /* @__PURE__ */ jsx29("span", { className: "ls-goals__icon", children: goal.icon }) : null,
3987
+ /* @__PURE__ */ jsx29("span", { className: "ls-goals__label", children: goal.label }),
3988
+ /* @__PURE__ */ jsx29("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
3686
3989
  fmt(goal.current ?? 0, goal),
3687
3990
  " ",
3688
- /* @__PURE__ */ jsxs18("span", { className: "ls-goals__target", children: [
3991
+ /* @__PURE__ */ jsxs19("span", { className: "ls-goals__target", children: [
3689
3992
  "/ ",
3690
3993
  fmt(goal.target ?? 0, goal)
3691
3994
  ] })
3692
3995
  ] }) }),
3693
- showPercent ? /* @__PURE__ */ jsxs18("span", { className: "ls-goals__percent", children: [
3996
+ showPercent ? /* @__PURE__ */ jsxs19("span", { className: "ls-goals__percent", children: [
3694
3997
  percent,
3695
3998
  "%"
3696
3999
  ] }) : null
3697
4000
  ] }),
3698
- /* @__PURE__ */ jsx28("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx28("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
4001
+ /* @__PURE__ */ jsx29("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx29("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
3699
4002
  ] }, goal.id);
3700
- return goal.tooltip != null ? /* @__PURE__ */ jsx28(Tooltip5, { title: goal.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: GOAL_TOOLTIP_SX } }, children: node }, goal.id) : node;
4003
+ 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;
3701
4004
  }) });
3702
4005
  }
3703
4006
  GoalsList.displayName = "GoalsList";
@@ -3707,11 +4010,11 @@ import IconButton from "@mui/material/IconButton";
3707
4010
  import classNames19 from "classnames";
3708
4011
 
3709
4012
  // src/components/ModQueueItem/icons.tsx
3710
- import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
4013
+ import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
3711
4014
  function CrossBoxIcon({ className }) {
3712
- return /* @__PURE__ */ jsxs19("svg", { className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
3713
- /* @__PURE__ */ jsx29("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
3714
- /* @__PURE__ */ jsx29(
4015
+ return /* @__PURE__ */ jsxs20("svg", { className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4016
+ /* @__PURE__ */ jsx30("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
4017
+ /* @__PURE__ */ jsx30(
3715
4018
  "path",
3716
4019
  {
3717
4020
  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",
@@ -3721,9 +4024,9 @@ function CrossBoxIcon({ className }) {
3721
4024
  ] });
3722
4025
  }
3723
4026
  function TickBoxIcon({ className }) {
3724
- return /* @__PURE__ */ jsxs19("svg", { className, width: "22", height: "21", viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
3725
- /* @__PURE__ */ jsx29("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
3726
- /* @__PURE__ */ jsx29(
4027
+ return /* @__PURE__ */ jsxs20("svg", { className, width: "22", height: "21", viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4028
+ /* @__PURE__ */ jsx30("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
4029
+ /* @__PURE__ */ jsx30(
3727
4030
  "path",
3728
4031
  {
3729
4032
  d: "M14.8908 5.49829L9.85209 12.1414L6.87311 9.16455L5.49854 10.5391L10.0798 15.1203L16.4952 6.87287L14.8908 5.49829Z",
@@ -3734,7 +4037,7 @@ function TickBoxIcon({ className }) {
3734
4037
  }
3735
4038
 
3736
4039
  // src/components/ModQueueItem/ModQueueItem.tsx
3737
- import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
4040
+ import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
3738
4041
  function ModQueueItem({
3739
4042
  username,
3740
4043
  avatar,
@@ -3747,12 +4050,12 @@ function ModQueueItem({
3747
4050
  onDeny,
3748
4051
  className
3749
4052
  }) {
3750
- return /* @__PURE__ */ jsxs20("div", { className: classNames19("ls-modqueue-item", className), children: [
3751
- icon ? /* @__PURE__ */ jsx30("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
3752
- /* @__PURE__ */ jsxs20("div", { className: "ls-modqueue-item__body", children: [
3753
- /* @__PURE__ */ jsxs20("div", { className: "ls-modqueue-item__head", children: [
3754
- avatar || fallbackAvatar ? /* @__PURE__ */ jsx30("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
3755
- username ? /* @__PURE__ */ jsx30(
4053
+ return /* @__PURE__ */ jsxs21("div", { className: classNames19("ls-modqueue-item", className), children: [
4054
+ icon ? /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
4055
+ /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__body", children: [
4056
+ /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__head", children: [
4057
+ avatar || fallbackAvatar ? /* @__PURE__ */ jsx31("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
4058
+ username ? /* @__PURE__ */ jsx31(
3756
4059
  "span",
3757
4060
  {
3758
4061
  className: "ls-modqueue-item__username",
@@ -3760,31 +4063,31 @@ function ModQueueItem({
3760
4063
  children: username
3761
4064
  }
3762
4065
  ) : null,
3763
- command ? /* @__PURE__ */ jsx30("span", { className: "ls-modqueue-item__command", children: command }) : null
4066
+ command ? /* @__PURE__ */ jsx31("span", { className: "ls-modqueue-item__command", children: command }) : null
3764
4067
  ] }),
3765
- message ? /* @__PURE__ */ jsxs20("div", { className: "ls-modqueue-item__message", children: [
4068
+ message ? /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__message", children: [
3766
4069
  "\u201C",
3767
4070
  message,
3768
4071
  "\u201D"
3769
4072
  ] }) : null
3770
4073
  ] }),
3771
- /* @__PURE__ */ jsx30("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs20(Fragment9, { children: [
3772
- /* @__PURE__ */ jsx30(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onDeny, "aria-label": "Deny", children: /* @__PURE__ */ jsx30(CrossBoxIcon, { className: "ls-modqueue-item__action-icon" }) }),
3773
- /* @__PURE__ */ jsx30(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onApprove, "aria-label": "Approve", children: /* @__PURE__ */ jsx30(TickBoxIcon, { className: "ls-modqueue-item__action-icon" }) })
4074
+ /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
4075
+ /* @__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" }) }),
4076
+ /* @__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" }) })
3774
4077
  ] }) })
3775
4078
  ] });
3776
4079
  }
3777
4080
  ModQueueItem.displayName = "ModQueueItem";
3778
4081
 
3779
4082
  // src/components/ModQueueList/ModQueueList.tsx
3780
- import { useMemo as useMemo5, useState as useState9 } from "react";
4083
+ import { useMemo as useMemo6, useState as useState10 } from "react";
3781
4084
  import ButtonBase from "@mui/material/ButtonBase";
3782
4085
  import classNames20 from "classnames";
3783
4086
 
3784
4087
  // src/components/ModQueueList/icons.tsx
3785
- import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
4088
+ import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
3786
4089
  function SearchIcon({ className }) {
3787
- return /* @__PURE__ */ jsx31("svg", { className, width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx31(
4090
+ 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(
3788
4091
  "path",
3789
4092
  {
3790
4093
  fillRule: "evenodd",
@@ -3795,24 +4098,24 @@ function SearchIcon({ className }) {
3795
4098
  ) });
3796
4099
  }
3797
4100
  function EmptyModQueueIcon({ className }) {
3798
- return /* @__PURE__ */ jsxs21("svg", { className, width: "39", height: "39", viewBox: "0 0 39 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
3799
- /* @__PURE__ */ jsx31(
4101
+ return /* @__PURE__ */ jsxs22("svg", { className, width: "39", height: "39", viewBox: "0 0 39 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4102
+ /* @__PURE__ */ jsx32(
3800
4103
  "path",
3801
4104
  {
3802
4105
  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",
3803
4106
  fill: "#CAC9D5"
3804
4107
  }
3805
4108
  ),
3806
- /* @__PURE__ */ jsx31(
4109
+ /* @__PURE__ */ jsx32(
3807
4110
  "path",
3808
4111
  {
3809
4112
  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",
3810
4113
  fill: "#CAC9D5"
3811
4114
  }
3812
4115
  ),
3813
- /* @__PURE__ */ jsx31("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
3814
- /* @__PURE__ */ jsx31("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
3815
- /* @__PURE__ */ jsx31(
4116
+ /* @__PURE__ */ jsx32("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
4117
+ /* @__PURE__ */ jsx32("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
4118
+ /* @__PURE__ */ jsx32(
3816
4119
  "path",
3817
4120
  {
3818
4121
  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",
@@ -3823,7 +4126,7 @@ function EmptyModQueueIcon({ className }) {
3823
4126
  }
3824
4127
 
3825
4128
  // src/components/ModQueueList/ModQueueList.tsx
3826
- import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
4129
+ import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
3827
4130
  var matches = (item, q) => {
3828
4131
  if (!q) {
3829
4132
  return true;
@@ -3851,7 +4154,7 @@ function ModQueueList({
3851
4154
  onDeny,
3852
4155
  className
3853
4156
  }) {
3854
- const [internalQuery, setInternalQuery] = useState9("");
4157
+ const [internalQuery, setInternalQuery] = useState10("");
3855
4158
  const query = searchValue !== void 0 ? searchValue : internalQuery;
3856
4159
  const handleSearchChange = (value) => {
3857
4160
  if (searchValue === void 0) {
@@ -3860,33 +4163,33 @@ function ModQueueList({
3860
4163
  onSearchChange?.(value);
3861
4164
  };
3862
4165
  const internalSearch = showSearch && !searchSlot;
3863
- const filtered = useMemo5(() => internalSearch ? items.filter((item) => matches(item, query)) : items, [internalSearch, items, query]);
3864
- return /* @__PURE__ */ jsxs22("div", { className: classNames20("ls-modqueue", className), id, children: [
3865
- searchSlot ? /* @__PURE__ */ jsx32("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx32("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx32(
4166
+ const filtered = useMemo6(() => internalSearch ? items.filter((item) => matches(item, query)) : items, [internalSearch, items, query]);
4167
+ return /* @__PURE__ */ jsxs23("div", { className: classNames20("ls-modqueue", className), id, children: [
4168
+ searchSlot ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx33(
3866
4169
  LSInput,
3867
4170
  {
3868
4171
  size: "small",
3869
4172
  placeholder: searchPlaceholder,
3870
- startAdornment: /* @__PURE__ */ jsx32(SearchIcon, { className: "ls-modqueue__search-icon" }),
4173
+ startAdornment: /* @__PURE__ */ jsx33(SearchIcon, { className: "ls-modqueue__search-icon" }),
3871
4174
  value: query,
3872
4175
  onChange: (e) => handleSearchChange(String(e.target.value ?? ""))
3873
4176
  }
3874
4177
  ) }) : null,
3875
- filtered.length === 0 ? /* @__PURE__ */ jsxs22("div", { className: "ls-modqueue__empty", children: [
3876
- /* @__PURE__ */ jsx32("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx32(EmptyModQueueIcon, {}) }),
3877
- /* @__PURE__ */ jsx32("span", { children: emptyText })
3878
- ] }) : /* @__PURE__ */ jsxs22(Fragment10, { children: [
3879
- canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs22("div", { className: "ls-modqueue__bulk", children: [
3880
- onDeny ? /* @__PURE__ */ jsxs22(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
3881
- /* @__PURE__ */ jsx32(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
4178
+ filtered.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__empty", children: [
4179
+ /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx33(EmptyModQueueIcon, {}) }),
4180
+ /* @__PURE__ */ jsx33("span", { children: emptyText })
4181
+ ] }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
4182
+ canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__bulk", children: [
4183
+ onDeny ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
4184
+ /* @__PURE__ */ jsx33(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
3882
4185
  denyAllLabel
3883
4186
  ] }) : null,
3884
- onApprove ? /* @__PURE__ */ jsxs22(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--approve", disableRipple: true, onClick: () => onApprove("all"), children: [
3885
- /* @__PURE__ */ jsx32(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
4187
+ onApprove ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--approve", disableRipple: true, onClick: () => onApprove("all"), children: [
4188
+ /* @__PURE__ */ jsx33(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
3886
4189
  approveAllLabel
3887
4190
  ] }) : null
3888
4191
  ] }) : null,
3889
- /* @__PURE__ */ jsx32("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx32(
4192
+ /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx33(
3890
4193
  ModQueueItem,
3891
4194
  {
3892
4195
  icon: item.icon,
@@ -3897,7 +4200,7 @@ function ModQueueList({
3897
4200
  message: showMessages ? item.message : void 0,
3898
4201
  onApprove: () => onApprove?.(item.id),
3899
4202
  onDeny: () => onDeny?.(item.id),
3900
- actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx32("span", { className: "ls-modqueue__readonly", children: "read-only" }))
4203
+ actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__readonly", children: "read-only" }))
3901
4204
  },
3902
4205
  item.id
3903
4206
  )) })
@@ -3907,30 +4210,30 @@ function ModQueueList({
3907
4210
  ModQueueList.displayName = "ModQueueList";
3908
4211
 
3909
4212
  // src/components/ModActivityLog/ModActivityLog.tsx
3910
- import { useEffect as useEffect7, useRef as useRef7 } from "react";
4213
+ import { useEffect as useEffect8, useRef as useRef8 } from "react";
3911
4214
  import classNames21 from "classnames";
3912
- import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
4215
+ import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
3913
4216
  function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", autoScroll, className }) {
3914
- const listRef = useRef7(null);
3915
- useEffect7(() => {
4217
+ const listRef = useRef8(null);
4218
+ useEffect8(() => {
3916
4219
  if (autoScroll && listRef.current) {
3917
4220
  listRef.current.scrollTop = listRef.current.scrollHeight;
3918
4221
  }
3919
4222
  }, [logs, autoScroll]);
3920
- return /* @__PURE__ */ jsxs23("div", { className: classNames21("ls-modlog", className), children: [
3921
- onClear && logs.length > 0 ? /* @__PURE__ */ jsx33("div", { className: "ls-modlog__toolbar", children: /* @__PURE__ */ jsx33("button", { type: "button", className: "ls-modlog__clear", onClick: onClear, children: clearLabel }) }) : null,
3922
- logs.length === 0 ? /* @__PURE__ */ jsx33("div", { className: "ls-modlog__empty", children: emptyText ?? "No activity yet" }) : /* @__PURE__ */ jsx33("div", { className: "ls-modlog__list", ref: listRef, children: logs.map((log, i) => {
4223
+ return /* @__PURE__ */ jsxs24("div", { className: classNames21("ls-modlog", className), children: [
4224
+ 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,
4225
+ 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) => {
3923
4226
  const rowStyle = {
3924
4227
  ...log.tabColor ? { ["--ls-modlog-accent"]: log.tabColor } : {},
3925
4228
  ...log.barColor ? { ["--ls-modlog-bar"]: log.barColor } : {}
3926
4229
  };
3927
- return /* @__PURE__ */ jsxs23("div", { className: "ls-modlog__row", style: rowStyle, children: [
3928
- /* @__PURE__ */ jsxs23("div", { className: "ls-modlog__head", children: [
3929
- log.avatar ? /* @__PURE__ */ jsx33("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
3930
- log.title ? /* @__PURE__ */ jsx33("span", { className: "ls-modlog__title", children: log.title }) : null,
3931
- log.time ? /* @__PURE__ */ jsx33("span", { className: "ls-modlog__time", children: log.time }) : null
4230
+ return /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__row", style: rowStyle, children: [
4231
+ /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__head", children: [
4232
+ log.avatar ? /* @__PURE__ */ jsx34("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
4233
+ log.title ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__title", children: log.title }) : null,
4234
+ log.time ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__time", children: log.time }) : null
3932
4235
  ] }),
3933
- log.message ? /* @__PURE__ */ jsx33("div", { className: "ls-modlog__message", children: log.message }) : null
4236
+ log.message ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__message", children: log.message }) : null
3934
4237
  ] }, log.id ?? i);
3935
4238
  }) })
3936
4239
  ] });
@@ -3938,9 +4241,9 @@ function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", a
3938
4241
  ModActivityLog.displayName = "ModActivityLog";
3939
4242
 
3940
4243
  // src/components/SongRequestList/SongRequestList.tsx
3941
- import { useState as useState10 } from "react";
4244
+ import { useState as useState11 } from "react";
3942
4245
  import classNames22 from "classnames";
3943
- import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
4246
+ import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
3944
4247
  function SongRequestList({
3945
4248
  nowPlaying,
3946
4249
  progress = 0,
@@ -3959,7 +4262,7 @@ function SongRequestList({
3959
4262
  emptyText,
3960
4263
  className
3961
4264
  }) {
3962
- const [addValue, setAddValue] = useState10("");
4265
+ const [addValue, setAddValue] = useState11("");
3963
4266
  const submitAdd = () => {
3964
4267
  const query = addValue.trim();
3965
4268
  if (!query || addDisabled || !onAddSong) {
@@ -3968,8 +4271,8 @@ function SongRequestList({
3968
4271
  onAddSong(query);
3969
4272
  setAddValue("");
3970
4273
  };
3971
- const addBar = onAddSong ? /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__addbar", children: [
3972
- /* @__PURE__ */ jsx34(
4274
+ const addBar = onAddSong ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__addbar", children: [
4275
+ /* @__PURE__ */ jsx35(
3973
4276
  LSInput,
3974
4277
  {
3975
4278
  className: "ls-songreq__addinput",
@@ -3985,51 +4288,51 @@ function SongRequestList({
3985
4288
  }
3986
4289
  }
3987
4290
  ),
3988
- /* @__PURE__ */ jsx34(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
4291
+ /* @__PURE__ */ jsx35(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
3989
4292
  ] }) : null;
3990
4293
  if (!nowPlaying) {
3991
4294
  if (!addBar) {
3992
- return /* @__PURE__ */ jsx34("div", { className: classNames22("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
4295
+ return /* @__PURE__ */ jsx35("div", { className: classNames22("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
3993
4296
  }
3994
- return /* @__PURE__ */ jsxs24("div", { className: classNames22("ls-songreq", className), children: [
4297
+ return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
3995
4298
  addBar,
3996
- /* @__PURE__ */ jsx34("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
4299
+ /* @__PURE__ */ jsx35("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
3997
4300
  ] });
3998
4301
  }
3999
4302
  const clampedProgress = Math.min(100, Math.max(0, progress));
4000
- return /* @__PURE__ */ jsxs24("div", { className: classNames22("ls-songreq", className), children: [
4303
+ return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
4001
4304
  addBar,
4002
- /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__now", children: [
4003
- showArt && nowPlaying.art ? /* @__PURE__ */ jsx34("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
4004
- /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__nowbody", children: [
4005
- /* @__PURE__ */ jsx34("div", { className: "ls-songreq__title", children: nowPlaying.title }),
4006
- nowPlaying.artist ? /* @__PURE__ */ jsx34("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
4007
- showRequester && nowPlaying.requester ? /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__requester", children: [
4305
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__now", children: [
4306
+ showArt && nowPlaying.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
4307
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__nowbody", children: [
4308
+ /* @__PURE__ */ jsx35("div", { className: "ls-songreq__title", children: nowPlaying.title }),
4309
+ nowPlaying.artist ? /* @__PURE__ */ jsx35("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
4310
+ showRequester && nowPlaying.requester ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__requester", children: [
4008
4311
  "requested by ",
4009
4312
  nowPlaying.requester
4010
4313
  ] }) : null,
4011
- /* @__PURE__ */ jsx34("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx34("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
4314
+ /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
4012
4315
  ] }),
4013
- /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__controls", children: [
4014
- onPlayPause ? /* @__PURE__ */ jsx34("button", { type: "button", className: "ls-songreq__btn", onClick: onPlayPause, title: isPlaying ? "Pause" : "Play", "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? "\u23F8" : "\u25B6" }) : null,
4015
- onSkip ? /* @__PURE__ */ jsx34("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
4316
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__controls", children: [
4317
+ 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,
4318
+ onSkip ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
4016
4319
  ] })
4017
4320
  ] }),
4018
- showQueue ? /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__queue", children: [
4019
- /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__queuehead", children: [
4321
+ showQueue ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queue", children: [
4322
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queuehead", children: [
4020
4323
  "Up next \xB7 ",
4021
4324
  queue.length
4022
4325
  ] }),
4023
- /* @__PURE__ */ jsx34("div", { className: "ls-songreq__queuelist", children: queue.length === 0 ? /* @__PURE__ */ jsx34("div", { className: "ls-songreq__queueempty", children: "Queue is empty" }) : queue.map((item) => /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__item", children: [
4024
- showArt && item.art ? /* @__PURE__ */ jsx34("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
4025
- /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__itembody", children: [
4026
- /* @__PURE__ */ jsx34("div", { className: "ls-songreq__itemtitle", children: item.title }),
4027
- /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__itemmeta", children: [
4326
+ /* @__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: [
4327
+ showArt && item.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
4328
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itembody", children: [
4329
+ /* @__PURE__ */ jsx35("div", { className: "ls-songreq__itemtitle", children: item.title }),
4330
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itemmeta", children: [
4028
4331
  item.artist,
4029
4332
  showRequester && item.requester ? ` \xB7 ${item.requester}` : ""
4030
4333
  ] })
4031
4334
  ] }),
4032
- onRemove ? /* @__PURE__ */ jsx34("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
4335
+ onRemove ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
4033
4336
  ] }, item.id)) })
4034
4337
  ] }) : null
4035
4338
  ] });