@lumiastream/ui 0.8.0 → 0.8.2

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 +442 -83
  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 +764 -403
  31. package/dist/index.js +1077 -716
  32. package/dist/se-import.js +1075 -714
  33. package/package.json +3 -3
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--suggested {\n color: var(--suggestedVariables, #ffb469);\n background: color-mix(in srgb, var(--suggestedVariables, #ffb469) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n position: fixed;\n z-index: 2000;\n transform: translate(-50%, -100%);\n margin-top: -8px;\n max-width: 320px;\n padding: 6px 10px;\n border-radius: 8px;\n background: var(--neutralDark1, #171628);\n border: 1px solid var(--neutralDark4, #393853);\n color: var(--neutralLight2, #cac9d5);\n font-size: 0.75rem;\n line-height: 1.3;\n pointer-events: none;\n box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n min-width: 0;\n word-break: break-all;\n}\n.ls-variable-token__badge {\n display: inline-flex;\n margin-left: 0.5rem;\n flex-shrink: 0;\n align-items: center;\n border: 1px solid currentcolor;\n border-radius: var(--radius, 1rem);\n padding-inline: 0.25rem;\n padding-block: 0;\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n text-transform: uppercase;\n}\n.ls-chat-message {\n position: relative;\n font-size: 0.95em;\n line-height: 1.4;\n color: var(--white, var(--neutralLight1, #fff));\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ls-chat-message img {\n display: inline-block;\n}\n.ls-chat-message__reply {\n display: block;\n margin-bottom: 0.15em;\n font-size: 0.82em;\n color: var(--white2, var(--neutralLight3, #9392a1));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n vertical-align: middle;\n}\n.ls-chat-message__avatar {\n width: 1.3em;\n height: 1.3em;\n border-radius: 9999px;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site {\n display: inline-block;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n width: 1.2em;\n height: 1.2em;\n vertical-align: middle;\n}\n.ls-chat-message__time {\n margin-right: 0.35em;\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__badges {\n vertical-align: middle;\n}\n.ls-chat-message__badges img {\n height: 1.05em;\n vertical-align: middle;\n margin-right: 0.25em;\n}\n.ls-chat-message__username {\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n cursor: pointer;\n background: none;\n border: 0;\n padding: 0;\n font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-chat-message__text {\n vertical-align: middle;\n}\n.ls-chat-message__text img {\n vertical-align: middle;\n}\n.ls-chat-message__actions {\n position: absolute;\n top: 0;\n right: 0;\n}\n.ls-chat-message__modbar {\n display: flex;\n overflow: hidden;\n border-radius: 0.75rem;\n background-color: var(--separator, #0a0821);\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n display: flex;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 1em;\n border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n border-left: 4px solid var(--primary, #ff4076);\n border-radius: 1em;\n background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n color: var(--white, var(--neutralLight1, #fff));\n padding: 1em;\n line-height: 1.35;\n}\n.ls-eventlist-item__main {\n display: flex;\n flex-direction: column;\n gap: 0.2em;\n min-width: 0;\n}\n.ls-eventlist-item__identity {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n border-radius: 1em;\n background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.ls-eventlist-item__username {\n min-width: 0;\n font-weight: 700;\n font-size: 0.875em;\n word-break: break-all;\n}\n.ls-eventlist-item__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,275 @@ 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_START = "{{";
1150
+ var TOKEN_END = "}}";
1151
+ var COPIED_STYLE_PROPS = [
1152
+ "fontFamily",
1153
+ "fontSize",
1154
+ "fontWeight",
1155
+ "fontStyle",
1156
+ "fontVariant",
1157
+ "letterSpacing",
1158
+ "wordSpacing",
1159
+ "textTransform",
1160
+ "textIndent",
1161
+ "lineHeight",
1162
+ "tabSize",
1163
+ "paddingTop",
1164
+ "paddingRight",
1165
+ "paddingBottom",
1166
+ "paddingLeft",
1167
+ "direction"
1168
+ ];
1169
+ var tokenClass = (type) => {
1170
+ if (type === "func") return "ls-variable-highlight__token--function";
1171
+ if (type === "system") return "ls-variable-highlight__token--system";
1172
+ if (type === "suggested") return "ls-variable-highlight__token--suggested";
1173
+ return "ls-variable-highlight__token--custom";
1174
+ };
1175
+ var findTokenEnd = (value, start) => {
1176
+ let depth = 0;
1177
+ let index = start;
1178
+ while (index < value.length - 1) {
1179
+ const pair = value.slice(index, index + 2);
1180
+ if (pair === TOKEN_START) {
1181
+ depth += 1;
1182
+ index += 2;
1183
+ continue;
1184
+ }
1185
+ if (pair === TOKEN_END) {
1186
+ depth -= 1;
1187
+ index += 2;
1188
+ if (depth === 0) return index;
1189
+ continue;
1190
+ }
1191
+ index += 1;
1192
+ }
1193
+ return -1;
1194
+ };
1195
+ var getTokenBase = (raw) => raw.slice(2, -2).split("=")[0].trim();
1196
+ var parseTokenSegment = (raw, classify, describe) => {
1197
+ const inner = raw.slice(2, -2);
1198
+ const base = getTokenBase(raw);
1199
+ const children = inner.includes(TOKEN_START) ? parseSegments(inner, classify, describe) : void 0;
1200
+ return {
1201
+ text: raw,
1202
+ token: true,
1203
+ type: classify(base),
1204
+ desc: describe(base),
1205
+ children: children?.some((child) => child.token) ? children : void 0
1206
+ };
1207
+ };
1208
+ var parseSegments = (value, classify, describe) => {
1209
+ const segments = [];
1210
+ let index = 0;
1211
+ while (index < value.length) {
1212
+ const start = value.indexOf(TOKEN_START, index);
1213
+ if (start === -1) {
1214
+ segments.push({ text: value.slice(index), token: false });
1215
+ break;
1216
+ }
1217
+ if (start > index) {
1218
+ segments.push({ text: value.slice(index, start), token: false });
1219
+ }
1220
+ const end = findTokenEnd(value, start);
1221
+ if (end === -1) {
1222
+ segments.push({ text: value.slice(start), token: false });
1223
+ break;
1224
+ }
1225
+ segments.push(
1226
+ parseTokenSegment(value.slice(start, end), classify, describe)
1227
+ );
1228
+ index = end;
1229
+ }
1230
+ return segments;
1231
+ };
1232
+ var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx13(
1233
+ "span",
1234
+ {
1235
+ "data-desc": segment.desc || void 0,
1236
+ className: `ls-variable-highlight__token ${tokenClass(segment.type ?? "custom")}`,
1237
+ children: segment.children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
1238
+ TOKEN_START,
1239
+ segment.children.map(
1240
+ (child, index) => renderSegment(child, `${key}-${index}`)
1241
+ ),
1242
+ TOKEN_END
1243
+ ] }) : segment.text
1244
+ },
1245
+ key
1246
+ ) : /* @__PURE__ */ jsx13(Fragment2, { children: segment.text }, key);
1247
+ var VariableHighlightOverlay = ({
1248
+ inputEl,
1249
+ value,
1250
+ multiline,
1251
+ classify,
1252
+ describe
1253
+ }) => {
1254
+ const layerRef = useRef3(null);
1255
+ const textColorRef = useRef3("");
1256
+ const [tooltip, setTooltip] = useState4(null);
1257
+ const segments = useMemo3(
1258
+ () => parseSegments(value, classify, describe),
1259
+ [value, classify, describe]
1260
+ );
1261
+ const hasTokens = useMemo3(() => segments.some((segment) => segment.token), [segments]);
1262
+ useLayoutEffect(() => {
1263
+ const layer = layerRef.current;
1264
+ if (!inputEl || !layer || !hasTokens) {
1265
+ return;
1266
+ }
1267
+ const sync = () => {
1268
+ const computed = getComputedStyle(inputEl);
1269
+ for (const prop of COPIED_STYLE_PROPS) {
1270
+ layer.style[prop] = computed[prop];
1271
+ }
1272
+ const isTransparent = computed.color === "rgba(0, 0, 0, 0)" || computed.color === "transparent";
1273
+ if (!isTransparent) {
1274
+ textColorRef.current = computed.color;
1275
+ }
1276
+ layer.style.color = isTransparent ? textColorRef.current || computed.color : computed.color;
1277
+ layer.style.whiteSpace = multiline ? "pre-wrap" : "pre";
1278
+ layer.style.top = `${inputEl.offsetTop}px`;
1279
+ layer.style.left = `${inputEl.offsetLeft}px`;
1280
+ layer.style.width = `${inputEl.offsetWidth}px`;
1281
+ layer.style.height = `${inputEl.offsetHeight}px`;
1282
+ layer.scrollTop = inputEl.scrollTop;
1283
+ layer.scrollLeft = inputEl.scrollLeft;
1284
+ };
1285
+ sync();
1286
+ const onScroll = () => {
1287
+ layer.scrollTop = inputEl.scrollTop;
1288
+ layer.scrollLeft = inputEl.scrollLeft;
1289
+ };
1290
+ inputEl.addEventListener("scroll", onScroll);
1291
+ const observer = new ResizeObserver(sync);
1292
+ observer.observe(inputEl);
1293
+ window.addEventListener("resize", sync);
1294
+ return () => {
1295
+ inputEl.removeEventListener("scroll", onScroll);
1296
+ observer.disconnect();
1297
+ window.removeEventListener("resize", sync);
1298
+ };
1299
+ }, [inputEl, multiline, hasTokens, segments]);
1300
+ useLayoutEffect(() => {
1301
+ if (!inputEl || !hasTokens) {
1302
+ return;
1303
+ }
1304
+ const style = inputEl.style;
1305
+ const prev = {
1306
+ color: style.color,
1307
+ caretColor: style.caretColor,
1308
+ fill: style.webkitTextFillColor,
1309
+ position: style.position,
1310
+ zIndex: style.zIndex
1311
+ };
1312
+ const computed = getComputedStyle(inputEl);
1313
+ if (computed.color !== "rgba(0, 0, 0, 0)" && computed.color !== "transparent") {
1314
+ textColorRef.current = computed.color;
1315
+ }
1316
+ style.caretColor = computed.color;
1317
+ style.color = "transparent";
1318
+ style.webkitTextFillColor = "transparent";
1319
+ if (computed.position === "static") {
1320
+ style.position = "relative";
1321
+ }
1322
+ style.zIndex = "1";
1323
+ return () => {
1324
+ style.color = prev.color;
1325
+ style.caretColor = prev.caretColor;
1326
+ style.webkitTextFillColor = prev.fill;
1327
+ style.position = prev.position;
1328
+ style.zIndex = prev.zIndex;
1329
+ };
1330
+ }, [inputEl, hasTokens]);
1331
+ useEffect4(() => {
1332
+ if (!inputEl || !hasTokens) {
1333
+ setTooltip(null);
1334
+ return;
1335
+ }
1336
+ const onMove = (event) => {
1337
+ const layer = layerRef.current;
1338
+ if (!layer) {
1339
+ return;
1340
+ }
1341
+ const spans = layer.querySelectorAll(".ls-variable-highlight__token");
1342
+ for (const span of Array.from(spans).reverse()) {
1343
+ const desc = span.getAttribute("data-desc");
1344
+ if (!desc) {
1345
+ continue;
1346
+ }
1347
+ for (const rect of Array.from(span.getClientRects())) {
1348
+ if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {
1349
+ setTooltip({ text: desc, top: rect.top, left: rect.left + rect.width / 2 });
1350
+ return;
1351
+ }
1352
+ }
1353
+ }
1354
+ setTooltip(null);
1355
+ };
1356
+ const onLeave = () => setTooltip(null);
1357
+ const el = inputEl;
1358
+ el.addEventListener("mousemove", onMove);
1359
+ el.addEventListener("mouseleave", onLeave);
1360
+ return () => {
1361
+ el.removeEventListener("mousemove", onMove);
1362
+ el.removeEventListener("mouseleave", onLeave);
1363
+ };
1364
+ }, [inputEl, hasTokens, segments]);
1365
+ if (!inputEl?.parentElement || !hasTokens) {
1366
+ return null;
1367
+ }
1368
+ return /* @__PURE__ */ jsxs5(Fragment3, { children: [
1369
+ createPortal(
1370
+ /* @__PURE__ */ jsx13("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map((segment, index) => renderSegment(segment, String(index))) }),
1371
+ inputEl.parentElement
1372
+ ),
1373
+ tooltip ? createPortal(
1374
+ /* @__PURE__ */ jsx13(
1375
+ "div",
1376
+ {
1377
+ className: "ls-variable-highlight__tooltip",
1378
+ style: { top: tooltip.top, left: tooltip.left },
1379
+ children: tooltip.text
1380
+ }
1381
+ ),
1382
+ document.body
1383
+ ) : null
1384
+ ] });
1385
+ };
1386
+
1387
+ // src/components/LSVariableInputField/LSVariableInputField.tsx
1388
+ import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
1138
1389
  import { createElement } from "react";
1139
1390
  var LSVariableInputContext = createContext({});
1140
1391
  var LSVariableInputProvider = ({
1141
1392
  children,
1142
1393
  value
1143
1394
  }) => {
1144
- return /* @__PURE__ */ jsx13(LSVariableInputContext.Provider, { value, children });
1395
+ return /* @__PURE__ */ jsx14(LSVariableInputContext.Provider, { value, children });
1145
1396
  };
1146
1397
  var DEFAULT_FUNCTION_VARIABLES = [
1147
1398
  "sum_variables",
@@ -1399,6 +1650,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1399
1650
  $renderOption,
1400
1651
  allowedVariableOrigin,
1401
1652
  systemVariables: systemVariablesProp,
1653
+ variableExamples: variableExamplesProp,
1402
1654
  functionVariables: functionVariablesProp,
1403
1655
  translate,
1404
1656
  onVariableTranslationsNeeded,
@@ -1407,50 +1659,79 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1407
1659
  } = props;
1408
1660
  const t = translate ?? context.translate ?? defaultTranslate;
1409
1661
  const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
1410
- const variableRecords = useMemo3(
1662
+ const variableExamples = variableExamplesProp ?? context.variableExamples ?? {};
1663
+ const variableRecords = useMemo4(
1411
1664
  () => normalizeVariableRecords(rawSystemVariables),
1412
1665
  [rawSystemVariables]
1413
1666
  );
1414
- const functionVariables = useMemo3(
1667
+ const functionVariables = useMemo4(
1415
1668
  () => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES,
1416
1669
  [context.functionVariables, functionVariablesProp]
1417
1670
  );
1418
1671
  const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
1419
1672
  const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
1420
1673
  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(
1674
+ const containerRef = useRef4(null);
1675
+ const variableId = useRef4(`variable-input-${name ?? "field"}`);
1676
+ const [showVariables, setShowVariables] = useState5(false);
1677
+ const [searchQuery, setSearchQuery] = useState5("");
1678
+ const functionVariableSet = useMemo4(
1426
1679
  () => new Set(functionVariables),
1427
1680
  [functionVariables]
1428
1681
  );
1429
- const allowedVariableDefinitions = useMemo3(
1682
+ const [inputEl, setInputEl] = useState5(null);
1683
+ const mergedInputRef = useCallback2(
1684
+ (node) => {
1685
+ setInputEl(node ?? null);
1686
+ if (typeof ref === "function") {
1687
+ ref(node);
1688
+ } else if (ref) {
1689
+ ref.current = node;
1690
+ }
1691
+ },
1692
+ [ref]
1693
+ );
1694
+ const currentVariableValue = useMemo4(() => {
1695
+ if (typeof value !== "string") return null;
1696
+ const match = value.trim().match(/^\{\{([^{}=]+)\}\}$/);
1697
+ if (!match) return null;
1698
+ const key = match[1].trim();
1699
+ if (functionVariableSet.has(key)) return null;
1700
+ const record = variableRecords[key];
1701
+ if (!record || record.isFunction) return null;
1702
+ const { displayValue, fullValue } = getVariableValueDisplay(record.value);
1703
+ if (displayValue === "" || displayValue == null) return null;
1704
+ return { displayValue, fullValue };
1705
+ }, [value, variableRecords, functionVariableSet]);
1706
+ const allowedVariableDefinitions = useMemo4(
1430
1707
  () => normalizeAllowedDefinitions(allowedVariables),
1431
1708
  [allowedVariables]
1432
1709
  );
1433
- const allowedVariableDefinitionLookup = useMemo3(() => {
1710
+ const allowedVariableDefinitionLookup = useMemo4(() => {
1434
1711
  const lookup = /* @__PURE__ */ new Map();
1435
1712
  allowedVariableDefinitions.forEach(
1436
1713
  (definition) => lookup.set(definition.name, definition)
1437
1714
  );
1438
1715
  return lookup;
1439
1716
  }, [allowedVariableDefinitions]);
1440
- const allowedVariableNames = useMemo3(
1717
+ const allowedVariableNames = useMemo4(
1441
1718
  () => allowedVariableDefinitions.map((definition) => definition.name),
1442
1719
  [allowedVariableDefinitions]
1443
1720
  );
1444
- const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableDefinitions);
1445
- const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
1446
- const [expandedPaths, setExpandedPaths] = useState4(
1721
+ const allowedVariableNameSet = useMemo4(
1722
+ () => new Set(allowedVariableNames),
1723
+ [allowedVariableNames]
1724
+ );
1725
+ const [filteredAllowedVariables, setFilteredAllowedVariables] = useState5(allowedVariableDefinitions);
1726
+ const [filteredSystemVariables, setFilteredSystemVariables] = useState5([]);
1727
+ const [expandedPaths, setExpandedPaths] = useState5(
1447
1728
  () => /* @__PURE__ */ new Set()
1448
1729
  );
1449
- const [autoExpandPaths, setAutoExpandPaths] = useState4(
1730
+ const [autoExpandPaths, setAutoExpandPaths] = useState5(
1450
1731
  () => /* @__PURE__ */ new Set()
1451
1732
  );
1452
1733
  const shouldRenderPicker = !hideVariables && showVariables;
1453
- const systemVariableValueTrees = useMemo3(() => {
1734
+ const systemVariableValueTrees = useMemo4(() => {
1454
1735
  const map = /* @__PURE__ */ new Map();
1455
1736
  if (!shouldRenderPicker) return map;
1456
1737
  Object.values(variableRecords).forEach((variable) => {
@@ -1460,7 +1741,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1460
1741
  });
1461
1742
  return map;
1462
1743
  }, [shouldRenderPicker, variableRecords]);
1463
- const allowedExampleTrees = useMemo3(() => {
1744
+ const allowedExampleTrees = useMemo4(() => {
1464
1745
  const map = /* @__PURE__ */ new Map();
1465
1746
  if (!shouldRenderPicker) return map;
1466
1747
  allowedVariableDefinitions.forEach((definition) => {
@@ -1470,7 +1751,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1470
1751
  });
1471
1752
  return map;
1472
1753
  }, [allowedVariableDefinitions, shouldRenderPicker]);
1473
- useEffect4(() => {
1754
+ useEffect5(() => {
1474
1755
  requestTranslations?.();
1475
1756
  }, [requestTranslations]);
1476
1757
  const isPathExpanded = useCallback2(
@@ -1537,7 +1818,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1537
1818
  },
1538
1819
  [namespaceHas, t]
1539
1820
  );
1540
- const knownOrigins = useMemo3(() => {
1821
+ const knownOrigins = useMemo4(() => {
1541
1822
  return Array.from(
1542
1823
  new Set(
1543
1824
  Object.values(variableRecords).map(
@@ -1675,6 +1956,15 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1675
1956
  },
1676
1957
  [functionVariableSet, getAllowedVariableRecord]
1677
1958
  );
1959
+ const getInputVariableVisualType = useCallback2(
1960
+ (variableName) => {
1961
+ const variableType = getAllowedVariableVisualType(variableName);
1962
+ if (variableType === "func") return "func";
1963
+ if (allowedVariableNameSet.has(variableName)) return "suggested";
1964
+ return variableType;
1965
+ },
1966
+ [allowedVariableNameSet, getAllowedVariableVisualType]
1967
+ );
1678
1968
  const getAllowedVariableTree = useCallback2(
1679
1969
  (definition) => {
1680
1970
  const record = getAllowedVariableRecord(definition.name);
@@ -1684,7 +1974,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1684
1974
  },
1685
1975
  [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
1686
1976
  );
1687
- useEffect4(() => {
1977
+ useEffect5(() => {
1688
1978
  if (!shouldRenderPicker) {
1689
1979
  return;
1690
1980
  }
@@ -1753,9 +2043,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1753
2043
  } else {
1754
2044
  setFilteredAllowedVariables([]);
1755
2045
  }
1756
- const allowedSet = new Set(allowedVariableNames);
1757
2046
  const shouldKeep = (variable) => {
1758
- if (allowedSet.has(variable.name)) return false;
2047
+ if (allowedVariableNameSet.has(variable.name)) return false;
1759
2048
  if (!variable.origin) return true;
1760
2049
  if (!isOriginConnected) return true;
1761
2050
  return isOriginConnected(variable.origin);
@@ -1808,6 +2097,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1808
2097
  searchQuery,
1809
2098
  allowedVariableDefinitions,
1810
2099
  allowedVariableNames,
2100
+ allowedVariableNameSet,
1811
2101
  getAllowedVariableDescription,
1812
2102
  getAllowedVariableTree,
1813
2103
  getAllowedVariableVisualType,
@@ -1824,7 +2114,23 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1824
2114
  onChange?.(currentValue ? `${currentValue}${newValue}` : newValue);
1825
2115
  };
1826
2116
  const insertVariable = (variable) => {
1827
- appendValue(`{{${variable}}}`);
2117
+ const token = `{{${variable}}}`;
2118
+ const el = inputEl;
2119
+ if (el && typeof value === "string" && el.selectionStart != null) {
2120
+ const start = el.selectionStart;
2121
+ const end = el.selectionEnd ?? start;
2122
+ onChange?.(`${value.slice(0, start)}${token}${value.slice(end)}`);
2123
+ const caret = start + token.length;
2124
+ requestAnimationFrame(() => {
2125
+ try {
2126
+ el.focus();
2127
+ el.setSelectionRange(caret, caret);
2128
+ } catch {
2129
+ }
2130
+ });
2131
+ } else {
2132
+ appendValue(token);
2133
+ }
1828
2134
  setShowVariables(false);
1829
2135
  };
1830
2136
  const handleFilterOptions = (options, params) => {
@@ -1832,13 +2138,13 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1832
2138
  afterFilter?.(filtered);
1833
2139
  return filtered;
1834
2140
  };
1835
- const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5(
2141
+ const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs6(
1836
2142
  "div",
1837
2143
  {
1838
2144
  className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
1839
2145
  children: [
1840
- /* @__PURE__ */ jsx13("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
1841
- variableType === "func" && /* @__PURE__ */ jsx13(
2146
+ /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
2147
+ variableType === "func" && /* @__PURE__ */ jsx14(
1842
2148
  "span",
1843
2149
  {
1844
2150
  className: "ls-variable-token__badge",
@@ -1849,7 +2155,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1849
2155
  ]
1850
2156
  }
1851
2157
  );
1852
- const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx13(
2158
+ const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx14(
1853
2159
  "button",
1854
2160
  {
1855
2161
  type: "button",
@@ -1860,15 +2166,15 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1860
2166
  className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
1861
2167
  "aria-label": expanded ? "Collapse" : "Expand",
1862
2168
  "aria-expanded": expanded,
1863
- children: /* @__PURE__ */ jsx13(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
2169
+ children: /* @__PURE__ */ jsx14(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
1864
2170
  }
1865
2171
  );
1866
- const renderExpandSpacer = () => /* @__PURE__ */ jsx13("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
2172
+ const renderExpandSpacer = () => /* @__PURE__ */ jsx14("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
1867
2173
  const getVariableValuePreview = (variableValue) => {
1868
2174
  const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
1869
2175
  return { displayValue, fullValue };
1870
2176
  };
1871
- const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx13(
2177
+ const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx14(
1872
2178
  "input",
1873
2179
  {
1874
2180
  className: "ls-variable-picker__value-input",
@@ -1885,8 +2191,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1885
2191
  const fullToken = `${rootToken}.${node.relativePath}`;
1886
2192
  const expanded = node.isExpandable && isPathExpanded(fullToken);
1887
2193
  const { displayValue, fullValue } = getVariableValuePreview(node.value);
1888
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
1889
- /* @__PURE__ */ jsxs5(
2194
+ return /* @__PURE__ */ jsxs6(Fragment4, { children: [
2195
+ /* @__PURE__ */ jsxs6(
1890
2196
  "div",
1891
2197
  {
1892
2198
  className: "ls-variable-picker__row ls-variable-picker__row--child",
@@ -1895,31 +2201,57 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1895
2201
  else insertVariable(fullToken);
1896
2202
  },
1897
2203
  children: [
1898
- /* @__PURE__ */ jsxs5(
2204
+ /* @__PURE__ */ jsxs6(
1899
2205
  "div",
1900
2206
  {
1901
2207
  className: "ls-variable-picker__token-cell",
1902
2208
  style: { paddingLeft: `${node.depth * 1.25}rem` },
1903
2209
  children: [
1904
2210
  node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
1905
- /* @__PURE__ */ jsx13(
2211
+ /* @__PURE__ */ jsx14(
1906
2212
  "div",
1907
2213
  {
1908
2214
  className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
1909
- children: /* @__PURE__ */ jsx13("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
2215
+ children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
1910
2216
  }
1911
2217
  )
1912
2218
  ]
1913
2219
  }
1914
2220
  ),
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) })
2221
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: node.displayKey }),
2222
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
1917
2223
  ]
1918
2224
  }
1919
2225
  ),
1920
2226
  expanded && renderValueChildRows(rootToken, node.children)
1921
2227
  ] }, fullToken);
1922
2228
  });
2229
+ const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
2230
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
2231
+ examples.map((example) => /* @__PURE__ */ jsxs6(
2232
+ "div",
2233
+ {
2234
+ className: "ls-variable-picker__row ls-variable-picker__row--child",
2235
+ onClick: () => insertVariable(example.snippet),
2236
+ children: [
2237
+ /* @__PURE__ */ jsxs6(
2238
+ "div",
2239
+ {
2240
+ className: "ls-variable-picker__token-cell",
2241
+ style: { paddingLeft: "1.25rem" },
2242
+ children: [
2243
+ renderExpandSpacer(),
2244
+ /* @__PURE__ */ jsx14("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
2245
+ ]
2246
+ }
2247
+ ),
2248
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: example.label }),
2249
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value" })
2250
+ ]
2251
+ },
2252
+ example.snippet
2253
+ ))
2254
+ ] });
1923
2255
  const toOptionLabelString = (input) => {
1924
2256
  if (typeof input === "string") return input;
1925
2257
  if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint")
@@ -1971,7 +2303,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1971
2303
  isSelected ? "ls-variable-option--selected" : ""
1972
2304
  ].filter(Boolean).join(" ")
1973
2305
  },
1974
- thumb ? /* @__PURE__ */ jsx13(
2306
+ thumb ? /* @__PURE__ */ jsx14(
1975
2307
  "img",
1976
2308
  {
1977
2309
  src: thumb,
@@ -1979,24 +2311,24 @@ var LSVariableInputField = forwardRef7((props, ref) => {
1979
2311
  alt: ""
1980
2312
  }
1981
2313
  ) : 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
2314
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-option__body", children: [
2315
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
2316
+ helperText ? /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__helper", children: helperText }) : null
1985
2317
  ] })
1986
2318
  );
1987
2319
  };
1988
2320
  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(
2321
+ const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
2322
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__intro", children: [
2323
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__intro-text", children: t(
1992
2324
  "overlay-variables.variables-description",
1993
2325
  "Use variables that will automatically be replaced before sending out the text"
1994
2326
  ) }),
1995
- /* @__PURE__ */ jsx13(
2327
+ /* @__PURE__ */ jsx14(
1996
2328
  LSInput,
1997
2329
  {
1998
2330
  autoFocus: true,
1999
- startAdornment: /* @__PURE__ */ jsx13(Search, { style: { color: "#fff", width: 20, height: 20 } }),
2331
+ startAdornment: /* @__PURE__ */ jsx14(Search, { style: { color: "#fff", width: 20, height: 20 } }),
2000
2332
  placeholder: t("common.search", "Search"),
2001
2333
  value: searchQuery,
2002
2334
  onChange: (e) => setSearchQuery(e.target.value),
@@ -2004,14 +2336,14 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2004
2336
  }
2005
2337
  )
2006
2338
  ] }),
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") })
2339
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__header", children: [
2340
+ /* @__PURE__ */ jsx14("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
2341
+ /* @__PURE__ */ jsx14("div", { children: t("commands.description", "Description") }),
2342
+ /* @__PURE__ */ jsx14("div", { children: t("common.value", "Value") })
2011
2343
  ] }),
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") }),
2344
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__list", children: [
2345
+ showSuggestedSection && /* @__PURE__ */ jsxs6("fieldset", { className: "ls-variable-picker__field", children: [
2346
+ /* @__PURE__ */ jsx14("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
2015
2347
  filteredAllowedVariables.map((definition, idx) => {
2016
2348
  const variableType = getAllowedVariableVisualType(
2017
2349
  definition.name
@@ -2024,8 +2356,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2024
2356
  const expanded = expandable && isPathExpanded(definition.name);
2025
2357
  const isLast = idx === filteredAllowedVariables.length - 1;
2026
2358
  const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
2027
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
2028
- /* @__PURE__ */ jsxs5(
2359
+ return /* @__PURE__ */ jsxs6(Fragment4, { children: [
2360
+ /* @__PURE__ */ jsxs6(
2029
2361
  "div",
2030
2362
  {
2031
2363
  className: rowCls,
@@ -2035,12 +2367,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2035
2367
  else insertVariable(definition.name);
2036
2368
  },
2037
2369
  children: [
2038
- /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
2370
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__token-cell", children: [
2039
2371
  expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
2040
2372
  renderVariableToken(definition.name, variableType, true)
2041
2373
  ] }),
2042
- /* @__PURE__ */ jsx13("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
2043
- /* @__PURE__ */ jsx13(
2374
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
2375
+ /* @__PURE__ */ jsx14(
2044
2376
  "div",
2045
2377
  {
2046
2378
  className: "ls-variable-picker__value",
@@ -2061,11 +2393,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2061
2393
  variable.value
2062
2394
  );
2063
2395
  const rootToken = variable.example ?? variable.name;
2396
+ const examples = variableExamples[variable.name] ?? [];
2064
2397
  const tree = systemVariableValueTrees.get(variable.name);
2065
- const expandable = !!tree && tree.length > 0;
2398
+ const expandable = examples.length > 0 || !!tree && tree.length > 0;
2066
2399
  const expanded = expandable && isPathExpanded(rootToken);
2067
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
2068
- /* @__PURE__ */ jsxs5(
2400
+ return /* @__PURE__ */ jsxs6(Fragment4, { children: [
2401
+ /* @__PURE__ */ jsxs6(
2069
2402
  "div",
2070
2403
  {
2071
2404
  className: "ls-variable-picker__row",
@@ -2074,21 +2407,21 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2074
2407
  else insertVariable(rootToken);
2075
2408
  },
2076
2409
  children: [
2077
- /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
2410
+ /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__token-cell", children: [
2078
2411
  expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
2079
2412
  renderVariableToken(variable.name, variableType)
2080
2413
  ] }),
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) })
2414
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
2415
+ /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
2083
2416
  ]
2084
2417
  }
2085
2418
  ),
2086
- expanded && tree && renderValueChildRows(rootToken, tree)
2419
+ expanded && (examples.length > 0 ? renderExampleChildRows(variable, examples) : tree && renderValueChildRows(rootToken, tree))
2087
2420
  ] }, variable.name);
2088
2421
  })
2089
2422
  ] })
2090
2423
  ] }) : null;
2091
- const textField = (params = {}) => /* @__PURE__ */ jsx13(
2424
+ const textField = (params = {}) => /* @__PURE__ */ jsx14(
2092
2425
  VariableInputTextField,
2093
2426
  {
2094
2427
  t,
@@ -2111,11 +2444,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2111
2444
  inputProps,
2112
2445
  allowedVariables,
2113
2446
  showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
2114
- ref
2447
+ currentValue: currentVariableValue,
2448
+ ref: mergedInputRef
2115
2449
  }
2116
2450
  );
2117
- return /* @__PURE__ */ jsxs5(Fragment3, { children: [
2118
- /* @__PURE__ */ jsx13(
2451
+ return /* @__PURE__ */ jsxs6(Fragment5, { children: [
2452
+ /* @__PURE__ */ jsx14(
2119
2453
  Popover,
2120
2454
  {
2121
2455
  anchorEl: containerRef.current,
@@ -2141,7 +2475,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2141
2475
  children: pickerBody
2142
2476
  }
2143
2477
  ),
2144
- isAutoComplete ? /* @__PURE__ */ jsx13(
2478
+ isAutoComplete ? /* @__PURE__ */ jsx14(
2145
2479
  Autocomplete2,
2146
2480
  {
2147
2481
  disableClearable: true,
@@ -2237,7 +2571,17 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2237
2571
  onClose: onPopupClose,
2238
2572
  renderInput: (params) => textField(params)
2239
2573
  }
2240
- ) : textField()
2574
+ ) : textField(),
2575
+ !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx14(
2576
+ VariableHighlightOverlay,
2577
+ {
2578
+ inputEl,
2579
+ value,
2580
+ multiline,
2581
+ classify: getInputVariableVisualType,
2582
+ describe: getAllowedVariableDescription
2583
+ }
2584
+ ) : null
2241
2585
  ] });
2242
2586
  });
2243
2587
  LSVariableInputField.displayName = "LSVariableInputField";
@@ -2261,15 +2605,16 @@ var VariableInputTextField = forwardRef7(
2261
2605
  clickedVariableIcon,
2262
2606
  params = {},
2263
2607
  containerRef,
2264
- showVariableIcon
2608
+ showVariableIcon,
2609
+ currentValue
2265
2610
  }, ref) => {
2266
2611
  const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
2267
2612
  const paramsSlotInput = params?.slotProps?.input ?? {};
2268
2613
  const explicitStartAdornment = inputProps?.startAdornment;
2269
- const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx13(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
2614
+ const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx14(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
2270
2615
  const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
2271
2616
  const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
2272
- return /* @__PURE__ */ jsx13(
2617
+ return /* @__PURE__ */ jsx14(
2273
2618
  LSTextField,
2274
2619
  {
2275
2620
  id,
@@ -2297,9 +2642,25 @@ var VariableInputTextField = forwardRef7(
2297
2642
  ...inputPropsSlotInput,
2298
2643
  ...paramsSlotInput,
2299
2644
  startAdornment,
2300
- endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
2645
+ endAdornment: /* @__PURE__ */ jsxs6(Fragment5, { children: [
2301
2646
  endAdornment ?? null,
2302
- showVariableIcon ? /* @__PURE__ */ jsx13(Tooltip2, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx13(
2647
+ currentValue ? /* @__PURE__ */ jsx14(Tooltip2, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx14(
2648
+ InputAdornment2,
2649
+ {
2650
+ position: "end",
2651
+ className: "ls-variable-input-current-value",
2652
+ style: {
2653
+ maxWidth: 120,
2654
+ overflow: "hidden",
2655
+ textOverflow: "ellipsis",
2656
+ whiteSpace: "nowrap",
2657
+ opacity: 0.6,
2658
+ fontSize: "0.75em"
2659
+ },
2660
+ children: currentValue.displayValue
2661
+ }
2662
+ ) }) : null,
2663
+ showVariableIcon ? /* @__PURE__ */ jsx14(Tooltip2, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx14(
2303
2664
  InputAdornment2,
2304
2665
  {
2305
2666
  position: "end",
@@ -2320,7 +2681,7 @@ var VariableInputTextField = forwardRef7(
2320
2681
  VariableInputTextField.displayName = "VariableInputTextField";
2321
2682
 
2322
2683
  // src/components/ChatMessageItem/ChatMessageItem.tsx
2323
- import { useState as useState5 } from "react";
2684
+ import { useState as useState6 } from "react";
2324
2685
  import ListItemIcon from "@mui/material/ListItemIcon";
2325
2686
  import ListItemText from "@mui/material/ListItemText";
2326
2687
  import Menu from "@mui/material/Menu";
@@ -2356,7 +2717,7 @@ var twitter_default = 'data:image/svg+xml,<svg width="400" height="400" viewBox=
2356
2717
  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
2718
 
2358
2719
  // src/components/PlatformIcon/PlatformIcon.tsx
2359
- import { jsx as jsx14 } from "react/jsx-runtime";
2720
+ import { jsx as jsx15 } from "react/jsx-runtime";
2360
2721
  var PLATFORM_ICON_URLS = {
2361
2722
  twitch: twitch_default,
2362
2723
  youtube: youtube_default,
@@ -2381,28 +2742,28 @@ function PlatformIcon({ platform, fallback = true, size, className, title, style
2381
2742
  return null;
2382
2743
  }
2383
2744
  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 } });
2745
+ return /* @__PURE__ */ jsx15("img", { className: classNames6("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
2385
2746
  }
2386
2747
  PlatformIcon.displayName = "PlatformIcon";
2387
2748
 
2388
2749
  // 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(
2750
+ import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
2751
+ 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
2752
  "path",
2392
2753
  {
2393
2754
  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
2755
  fill: "currentColor"
2395
2756
  }
2396
2757
  ) });
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(
2758
+ var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2759
+ /* @__PURE__ */ jsx16(
2399
2760
  "path",
2400
2761
  {
2401
2762
  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
2763
  fill: "currentColor"
2403
2764
  }
2404
2765
  ),
2405
- /* @__PURE__ */ jsx15(
2766
+ /* @__PURE__ */ jsx16(
2406
2767
  "path",
2407
2768
  {
2408
2769
  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 +2771,18 @@ var CopyIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "12", height: "12", v
2410
2771
  }
2411
2772
  )
2412
2773
  ] });
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(
2774
+ 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" }) });
2775
+ 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
2776
  "path",
2416
2777
  {
2417
2778
  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
2779
  fill: "currentColor"
2419
2780
  }
2420
2781
  ) });
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(
2782
+ var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2783
+ /* @__PURE__ */ jsxs7("g", { clipPath: "url(#ls-chat-translate-clip)", children: [
2784
+ /* @__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" }),
2785
+ /* @__PURE__ */ jsx16(
2425
2786
  "path",
2426
2787
  {
2427
2788
  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 +2790,17 @@ var TranslateIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "1
2429
2790
  }
2430
2791
  )
2431
2792
  ] }),
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)" }) }) })
2793
+ /* @__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
2794
  ] });
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(
2795
+ var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2796
+ /* @__PURE__ */ jsx16(
2436
2797
  "path",
2437
2798
  {
2438
2799
  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
2800
  fill: "currentColor"
2440
2801
  }
2441
2802
  ),
2442
- /* @__PURE__ */ jsx15(
2803
+ /* @__PURE__ */ jsx16(
2443
2804
  "path",
2444
2805
  {
2445
2806
  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 +2808,15 @@ var BanUserIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16"
2447
2808
  }
2448
2809
  )
2449
2810
  ] });
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(
2811
+ var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2812
+ /* @__PURE__ */ jsx16(
2452
2813
  "path",
2453
2814
  {
2454
2815
  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
2816
  fill: "currentColor"
2456
2817
  }
2457
2818
  ),
2458
- /* @__PURE__ */ jsx15(
2819
+ /* @__PURE__ */ jsx16(
2459
2820
  "path",
2460
2821
  {
2461
2822
  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 +2824,22 @@ var TimeoutUserIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height:
2463
2824
  }
2464
2825
  )
2465
2826
  ] });
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(
2827
+ var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 3 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2828
+ /* @__PURE__ */ jsx16(
2468
2829
  "path",
2469
2830
  {
2470
2831
  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
2832
  fill: "currentColor"
2472
2833
  }
2473
2834
  ),
2474
- /* @__PURE__ */ jsx15(
2835
+ /* @__PURE__ */ jsx16(
2475
2836
  "path",
2476
2837
  {
2477
2838
  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
2839
  fill: "currentColor"
2479
2840
  }
2480
2841
  ),
2481
- /* @__PURE__ */ jsx15(
2842
+ /* @__PURE__ */ jsx16(
2482
2843
  "path",
2483
2844
  {
2484
2845
  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 +2847,7 @@ var MenuDotsIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16
2486
2847
  }
2487
2848
  )
2488
2849
  ] });
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(
2850
+ 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
2851
  "path",
2491
2852
  {
2492
2853
  fillRule: "evenodd",
@@ -2495,7 +2856,7 @@ var ShoutoutIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16
2495
2856
  fill: "currentColor"
2496
2857
  }
2497
2858
  ) });
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(
2859
+ 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
2860
  "path",
2500
2861
  {
2501
2862
  fillRule: "evenodd",
@@ -2504,14 +2865,14 @@ var VipIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", vi
2504
2865
  fill: "currentColor"
2505
2866
  }
2506
2867
  ) });
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(
2868
+ 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
2869
  "path",
2509
2870
  {
2510
2871
  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
2872
  fill: "currentColor"
2512
2873
  }
2513
2874
  ) });
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(
2875
+ 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
2876
  "path",
2516
2877
  {
2517
2878
  fillRule: "evenodd",
@@ -2522,7 +2883,7 @@ var ModeratorIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "1
2522
2883
  ) });
2523
2884
 
2524
2885
  // src/components/ChatMessageItem/ChatMessageItem.tsx
2525
- import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
2886
+ import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
2526
2887
  var DEFAULT_MOD_ACTION_LABELS = {
2527
2888
  delete: "Delete Message",
2528
2889
  copy: "Copy to clipboard",
@@ -2547,7 +2908,7 @@ function ModActionButton({
2547
2908
  onClick,
2548
2909
  children
2549
2910
  }) {
2550
- return /* @__PURE__ */ jsx16(Tooltip3, { title, placement, children: /* @__PURE__ */ jsx16(
2911
+ return /* @__PURE__ */ jsx17(Tooltip3, { title, placement, children: /* @__PURE__ */ jsx17(
2551
2912
  "span",
2552
2913
  {
2553
2914
  className: classNames7("ls-chat-message__modbtn", { "ls-chat-message__modbtn--danger": danger }),
@@ -2590,11 +2951,11 @@ function ChatMessageItem({
2590
2951
  onMouseEnter,
2591
2952
  onMouseLeave
2592
2953
  }) {
2593
- const [hovered, setHovered] = useState5(false);
2594
- const [menuPosition, setMenuPosition] = useState5(null);
2595
- const [menuAnchorEl, setMenuAnchorEl] = useState5(null);
2954
+ const [hovered, setHovered] = useState6(false);
2955
+ const [menuPosition, setMenuPosition] = useState6(null);
2956
+ const [menuAnchorEl, setMenuAnchorEl] = useState6(null);
2596
2957
  const name = displayname || username;
2597
- const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx16(PlatformIcon, { platform }) : null);
2958
+ const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx17(PlatformIcon, { platform }) : null);
2598
2959
  const has = (action) => Boolean(modActions?.includes(action));
2599
2960
  const label = (action) => modActionLabels?.[action] ?? DEFAULT_MOD_ACTION_LABELS[action];
2600
2961
  const vipAction = isVip ? "remove-vip" : "add-vip";
@@ -2621,7 +2982,7 @@ function ChatMessageItem({
2621
2982
  setMenuPosition((prev) => prev === null ? { top: event.clientY - 4, left: event.clientX - 2 } : null);
2622
2983
  }
2623
2984
  };
2624
- const menuItem = (action, icon) => has(action) ? /* @__PURE__ */ jsxs7(
2985
+ const menuItem = (action, icon) => has(action) ? /* @__PURE__ */ jsxs8(
2625
2986
  MenuItem2,
2626
2987
  {
2627
2988
  onClick: () => {
@@ -2629,31 +2990,31 @@ function ChatMessageItem({
2629
2990
  closeMenu();
2630
2991
  },
2631
2992
  children: [
2632
- /* @__PURE__ */ jsx16(ListItemIcon, { children: /* @__PURE__ */ jsx16("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
2633
- /* @__PURE__ */ jsx16(ListItemText, { children: label(action) })
2993
+ /* @__PURE__ */ jsx17(ListItemIcon, { children: /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
2994
+ /* @__PURE__ */ jsx17(ListItemText, { children: label(action) })
2634
2995
  ]
2635
2996
  },
2636
2997
  action
2637
2998
  ) : 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(
2999
+ const builtInActions = hasVisibleModActions && hovered && !actions ? /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__modbar", children: [
3000
+ has("delete") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx17(DeleteIcon, {}) }),
3001
+ has("pin") && /* @__PURE__ */ jsx17(
2641
3002
  ModActionButton,
2642
3003
  {
2643
3004
  title: label(isPinned ? "unpin" : "pin"),
2644
3005
  placement: modActionsTooltipPlacement,
2645
3006
  onClick: () => fire(isPinned ? "unpin" : "pin"),
2646
- children: isPinned ? /* @__PURE__ */ jsx16(PinOffIcon, {}) : /* @__PURE__ */ jsx16(PinOnIcon, {})
3007
+ children: isPinned ? /* @__PURE__ */ jsx17(PinOffIcon, {}) : /* @__PURE__ */ jsx17(PinOnIcon, {})
2647
3008
  }
2648
3009
  ),
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, {}) })
3010
+ has("copy") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx17(CopyIcon, {}) }),
3011
+ has("translate") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx17(TranslateIcon, {}) }),
3012
+ has("ban") && !isSelf && /* @__PURE__ */ jsx17(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx17(BanUserIcon, {}) }),
3013
+ has("timeout") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx17(TimeoutUserIcon, {}) }),
3014
+ hasOverflowMenuItems && /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx17(MenuDotsIcon, {}) })
2654
3015
  ] }) : null;
2655
3016
  const actionsNode = actions ?? builtInActions;
2656
- return /* @__PURE__ */ jsxs7(
3017
+ return /* @__PURE__ */ jsxs8(
2657
3018
  "div",
2658
3019
  {
2659
3020
  className: classNames7("ls-chat-message", className),
@@ -2672,13 +3033,13 @@ function ChatMessageItem({
2672
3033
  onMouseLeave?.();
2673
3034
  },
2674
3035
  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(
3036
+ reply ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__reply", children: reply }) : null,
3037
+ showAvatar && avatarPrefix ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
3038
+ showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx17("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
3039
+ siteIcon ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
3040
+ showTimestamp && timestamp ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__time", children: timestamp }) : null,
3041
+ showBadges && badges ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__badges", children: badges }) : null,
3042
+ onUsernameClick ? /* @__PURE__ */ jsxs8(
2682
3043
  "button",
2683
3044
  {
2684
3045
  type: "button",
@@ -2693,14 +3054,14 @@ function ChatMessageItem({
2693
3054
  ":"
2694
3055
  ]
2695
3056
  }
2696
- ) : /* @__PURE__ */ jsxs7("span", { className: "ls-chat-message__username", style: color ? { color } : void 0, children: [
3057
+ ) : /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__username", style: color ? { color } : void 0, children: [
2697
3058
  name,
2698
3059
  ":"
2699
3060
  ] }),
2700
3061
  " ",
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(
3062
+ /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__text", children: message }),
3063
+ actionsNode ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
3064
+ onModAction && hasOverflowMenuItems ? /* @__PURE__ */ jsxs8(
2704
3065
  Menu,
2705
3066
  {
2706
3067
  open: modMenuAnchor === "element" ? menuAnchorEl !== null : menuPosition !== null,
@@ -2711,10 +3072,10 @@ function ChatMessageItem({
2711
3072
  anchorOrigin: modMenuAnchor === "element" ? { vertical: "bottom", horizontal: "right" } : void 0,
2712
3073
  transformOrigin: modMenuAnchor === "element" ? { vertical: "top", horizontal: "right" } : void 0,
2713
3074
  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, {}))
3075
+ menuItem("shoutout", /* @__PURE__ */ jsx17(ShoutoutIcon, {})),
3076
+ menuItem(vipAction, isVip ? /* @__PURE__ */ jsx17(RemoveVipIcon, {}) : /* @__PURE__ */ jsx17(VipIcon, {})),
3077
+ menuItem(moderatorAction, /* @__PURE__ */ jsx17(ModeratorIcon, {})),
3078
+ menuItem("unban", /* @__PURE__ */ jsx17(BanUserIcon, {}))
2718
3079
  ]
2719
3080
  }
2720
3081
  ) : null
@@ -2725,16 +3086,16 @@ function ChatMessageItem({
2725
3086
  ChatMessageItem.displayName = "ChatMessageItem";
2726
3087
 
2727
3088
  // src/components/ChatboxPanel/ChatboxPanel.tsx
2728
- import { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
3089
+ import { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
2729
3090
  import MenuItem3 from "@mui/material/MenuItem";
2730
3091
  import classNames8 from "classnames";
2731
3092
 
2732
3093
  // src/components/ChatboxPanel/useAutoScroll.ts
2733
- import { useCallback as useCallback3, useRef as useRef4, useState as useState6 } from "react";
3094
+ import { useCallback as useCallback3, useRef as useRef5, useState as useState7 } from "react";
2734
3095
  var useAutoScroll = (threshold = 24, options) => {
2735
- const containerRef = useRef4(null);
2736
- const shouldAutoScrollRef = useRef4(true);
2737
- const [isAtBottom, setIsAtBottom] = useState6(true);
3096
+ const containerRef = useRef5(null);
3097
+ const shouldAutoScrollRef = useRef5(true);
3098
+ const [isAtBottom, setIsAtBottom] = useState7(true);
2738
3099
  const reverse = options?.reverse ?? false;
2739
3100
  const isNearBottom = useCallback3(() => {
2740
3101
  if (!containerRef.current) return true;
@@ -2770,7 +3131,7 @@ var useAutoScroll = (threshold = 24, options) => {
2770
3131
  };
2771
3132
 
2772
3133
  // src/components/ChatboxPanel/ChatboxPanel.tsx
2773
- import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
3134
+ import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
2774
3135
  function ChatboxPanel({
2775
3136
  children,
2776
3137
  messageCount,
@@ -2802,24 +3163,24 @@ function ChatboxPanel({
2802
3163
  className
2803
3164
  }) {
2804
3165
  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);
3166
+ const [unreadCount, setUnreadCount] = useState8(0);
3167
+ const [internalValue, setInternalValue] = useState8("");
3168
+ const prevCountRef = useRef6(0);
3169
+ const prevLastKeyRef = useRef6(null);
3170
+ const hasInitializedRef = useRef6(false);
2810
3171
  const lineHeight = Math.round(fontSize * 1.35);
2811
3172
  const isControlled = sendValue !== void 0 || onSendValueChange !== void 0;
2812
3173
  const inputValue = (isControlled ? sendValue : internalValue) ?? "";
2813
- useEffect5(() => {
3174
+ useEffect6(() => {
2814
3175
  scrollToBottom(true);
2815
3176
  }, [scrollToBottom]);
2816
- useEffect5(() => {
3177
+ useEffect6(() => {
2817
3178
  scrollToBottom();
2818
3179
  }, [messageCount, lastMessageKey, scrollToBottom]);
2819
- useEffect5(() => {
3180
+ useEffect6(() => {
2820
3181
  scrollToBottom(true);
2821
3182
  }, [reverse, scrollToBottom]);
2822
- useEffect5(() => {
3183
+ useEffect6(() => {
2823
3184
  const prevCount = prevCountRef.current;
2824
3185
  const prevLastKey = prevLastKeyRef.current;
2825
3186
  const nextLastKey = lastMessageKey === void 0 || lastMessageKey === null ? null : String(lastMessageKey);
@@ -2843,7 +3204,7 @@ function ChatboxPanel({
2843
3204
  setUnreadCount((count) => count + delta);
2844
3205
  }
2845
3206
  }, [messageCount, lastMessageKey, isAtBottom]);
2846
- useEffect5(() => {
3207
+ useEffect6(() => {
2847
3208
  if (isAtBottom && unreadCount !== 0) {
2848
3209
  setUnreadCount(0);
2849
3210
  }
@@ -2863,9 +3224,9 @@ function ChatboxPanel({
2863
3224
  setInternalValue("");
2864
3225
  }
2865
3226
  };
2866
- return /* @__PURE__ */ jsxs8("div", { className: classNames8("ls-chatbox", className), id, children: [
2867
- /* @__PURE__ */ jsxs8("div", { className: "ls-chatbox__viewport", children: [
2868
- /* @__PURE__ */ jsx17(
3227
+ return /* @__PURE__ */ jsxs9("div", { className: classNames8("ls-chatbox", className), id, children: [
3228
+ /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__viewport", children: [
3229
+ /* @__PURE__ */ jsx18(
2869
3230
  "div",
2870
3231
  {
2871
3232
  className: "ls-chatbox__list",
@@ -2880,7 +3241,7 @@ function ChatboxPanel({
2880
3241
  children
2881
3242
  }
2882
3243
  ),
2883
- !isAtBottom && /* @__PURE__ */ jsxs8(
3244
+ !isAtBottom && /* @__PURE__ */ jsxs9(
2884
3245
  "button",
2885
3246
  {
2886
3247
  type: "button",
@@ -2890,7 +3251,7 @@ function ChatboxPanel({
2890
3251
  setUnreadCount(0);
2891
3252
  },
2892
3253
  children: [
2893
- /* @__PURE__ */ jsxs8(
3254
+ /* @__PURE__ */ jsxs9(
2894
3255
  "svg",
2895
3256
  {
2896
3257
  className: classNames8("ls-chatbox__jump-arrow", { "ls-chatbox__jump-arrow--up": reverse }),
@@ -2903,19 +3264,19 @@ function ChatboxPanel({
2903
3264
  strokeLinecap: "round",
2904
3265
  strokeLinejoin: "round",
2905
3266
  children: [
2906
- /* @__PURE__ */ jsx17("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
2907
- /* @__PURE__ */ jsx17("polyline", { points: "19 12 12 19 5 12" })
3267
+ /* @__PURE__ */ jsx18("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
3268
+ /* @__PURE__ */ jsx18("polyline", { points: "19 12 12 19 5 12" })
2908
3269
  ]
2909
3270
  }
2910
3271
  ),
2911
3272
  jumpToLatestLabel,
2912
- unreadCount > 0 && /* @__PURE__ */ jsx17("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
3273
+ unreadCount > 0 && /* @__PURE__ */ jsx18("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
2913
3274
  ]
2914
3275
  }
2915
3276
  )
2916
3277
  ] }),
2917
- showSendBar && onSend ? /* @__PURE__ */ jsxs8("div", { className: "ls-chatbox__sendbar", children: [
2918
- /* @__PURE__ */ jsx17(
3278
+ showSendBar && onSend ? /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__sendbar", children: [
3279
+ /* @__PURE__ */ jsx18(
2919
3280
  LSInput,
2920
3281
  {
2921
3282
  className: "ls-chatbox__input",
@@ -2928,7 +3289,7 @@ function ChatboxPanel({
2928
3289
  }
2929
3290
  }
2930
3291
  ),
2931
- hasPlatformSelect ? /* @__PURE__ */ jsxs8(
3292
+ hasPlatformSelect ? /* @__PURE__ */ jsxs9(
2932
3293
  LSSelect,
2933
3294
  {
2934
3295
  className: "ls-chatbox__platform",
@@ -2937,15 +3298,15 @@ function ChatboxPanel({
2937
3298
  displayEmpty: true,
2938
3299
  onChange: (e) => onPlatformChange?.(String(e.target.value)),
2939
3300
  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 }),
3301
+ allPlatformsLabel != null && /* @__PURE__ */ jsx18(MenuItem3, { value: "", children: allPlatformsLabel }),
3302
+ platforms?.map((option) => /* @__PURE__ */ jsx18(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs9("span", { className: "ls-chatbox__platform-option", children: [
3303
+ /* @__PURE__ */ jsx18(PlatformIcon, { platform: option.value, fallback: false }),
2943
3304
  option.label
2944
3305
  ] }) }, option.value))
2945
3306
  ]
2946
3307
  }
2947
3308
  ) : null,
2948
- onChatAsChange ? /* @__PURE__ */ jsxs8(
3309
+ onChatAsChange ? /* @__PURE__ */ jsxs9(
2949
3310
  LSSelect,
2950
3311
  {
2951
3312
  className: "ls-chatbox__chatas",
@@ -2953,12 +3314,12 @@ function ChatboxPanel({
2953
3314
  value: chatAs ?? "self",
2954
3315
  onChange: (e) => onChatAsChange(e.target.value === "bot" ? "bot" : "self"),
2955
3316
  children: [
2956
- /* @__PURE__ */ jsx17(MenuItem3, { value: "self", children: chatAsSelfLabel }),
2957
- /* @__PURE__ */ jsx17(MenuItem3, { value: "bot", children: chatAsBotLabel })
3317
+ /* @__PURE__ */ jsx18(MenuItem3, { value: "self", children: chatAsSelfLabel }),
3318
+ /* @__PURE__ */ jsx18(MenuItem3, { value: "bot", children: chatAsBotLabel })
2958
3319
  ]
2959
3320
  }
2960
3321
  ) : null,
2961
- /* @__PURE__ */ jsx17(
3322
+ /* @__PURE__ */ jsx18(
2962
3323
  LSButton,
2963
3324
  {
2964
3325
  className: "ls-chatbox__send",
@@ -2977,7 +3338,7 @@ ChatboxPanel.displayName = "ChatboxPanel";
2977
3338
  import Fade from "@mui/material/Fade";
2978
3339
  import Modal from "@mui/material/Modal";
2979
3340
  import classNames9 from "classnames";
2980
- import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
3341
+ import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
2981
3342
  var DIMENSIONS = {
2982
3343
  small: { width: "30%", height: "30%" },
2983
3344
  longS: { width: "50%", height: "30%" },
@@ -2988,15 +3349,15 @@ var DIMENSIONS = {
2988
3349
  tall: { width: "40%", height: "70%" },
2989
3350
  full: { width: "100%", height: "calc(100% - 1rem)" }
2990
3351
  };
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" })
3352
+ 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: [
3353
+ /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
3354
+ /* @__PURE__ */ jsx19("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
3355
+ /* @__PURE__ */ jsx19("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
2995
3356
  ] });
2996
3357
  var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
2997
3358
  const modalBackground = overlayProps?.background ? overlayProps.background : !overlayProps?.noBackground ? "var(--gradientBg, var(--background, #151230))" : void 0;
2998
3359
  const dimensions = overlayProps?.size && DIMENSIONS[overlayProps.size] || { width: "90%", height: "90%" };
2999
- return /* @__PURE__ */ jsx18(
3360
+ return /* @__PURE__ */ jsx19(
3000
3361
  Modal,
3001
3362
  {
3002
3363
  disableEnforceFocus: true,
@@ -3007,7 +3368,7 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3007
3368
  },
3008
3369
  className: "ls-dialog",
3009
3370
  style: { ...props.style, zIndex: `${props.zIndex ? props.zIndex : "2500"} !important` },
3010
- children: /* @__PURE__ */ jsx18(Fade, { in: props.open, children: /* @__PURE__ */ jsxs9(
3371
+ children: /* @__PURE__ */ jsx19(Fade, { in: props.open, children: /* @__PURE__ */ jsxs10(
3011
3372
  "div",
3012
3373
  {
3013
3374
  className: classNames9("ls-dialog__card", {
@@ -3022,22 +3383,22 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3022
3383
  },
3023
3384
  title: "",
3024
3385
  children: [
3025
- !props.$hideTop && /* @__PURE__ */ jsxs9(
3386
+ !props.$hideTop && /* @__PURE__ */ jsxs10(
3026
3387
  "div",
3027
3388
  {
3028
3389
  className: classNames9("ls-dialog__top", { "ls-dialog__top--full": overlayProps?.size === "full" }),
3029
3390
  style: { padding: props.$noPadTitle ? "0" : "1rem" },
3030
3391
  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, {})
3392
+ /* @__PURE__ */ jsx19("div", { className: "ls-dialog__top-side", children: props.$leftText }),
3393
+ /* @__PURE__ */ jsx19("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
3394
+ 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: [
3395
+ /* @__PURE__ */ jsx19("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
3396
+ closeIcon ?? /* @__PURE__ */ jsx19(DefaultCloseIcon, {})
3036
3397
  ] }) })
3037
3398
  ]
3038
3399
  }
3039
3400
  ),
3040
- /* @__PURE__ */ jsx18(
3401
+ /* @__PURE__ */ jsx19(
3041
3402
  "div",
3042
3403
  {
3043
3404
  className: classNames9("ls-dialog__body", props.containerClass),
@@ -3045,9 +3406,9 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3045
3406
  children
3046
3407
  }
3047
3408
  ),
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 })
3409
+ !props.$hideBottom && /* @__PURE__ */ jsxs10("div", { className: "ls-dialog__bottom", children: [
3410
+ /* @__PURE__ */ jsx19(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
3411
+ props.showTest && /* @__PURE__ */ jsx19(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
3051
3412
  ] })
3052
3413
  ]
3053
3414
  }
@@ -3062,7 +3423,7 @@ import classNames11 from "classnames";
3062
3423
 
3063
3424
  // src/components/ModalChrome/PanelChrome.tsx
3064
3425
  import classNames10 from "classnames";
3065
- import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
3426
+ import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
3066
3427
  function PanelChrome({
3067
3428
  title,
3068
3429
  titleVariant = "heading",
@@ -3079,20 +3440,20 @@ function PanelChrome({
3079
3440
  }) {
3080
3441
  const hasHeader = Boolean(title || headerActions || onClose && showClose);
3081
3442
  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: [
3443
+ const panel = /* @__PURE__ */ jsxs11("div", { className: classNames10("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
3444
+ hasHeader ? /* @__PURE__ */ jsxs11("div", { className: "ls-panel__header", children: [
3445
+ title ? /* @__PURE__ */ jsx20("span", { className: classNames10("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx20("span", {}),
3446
+ /* @__PURE__ */ jsxs11("span", { className: "ls-panel__header-actions", children: [
3086
3447
  headerActions,
3087
- onClose && showClose ? /* @__PURE__ */ jsx19("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
3448
+ onClose && showClose ? /* @__PURE__ */ jsx20("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
3088
3449
  ] })
3089
3450
  ] }) : null,
3090
- /* @__PURE__ */ jsx19("div", { className: classNames10("ls-panel__body", bodyClassName), children }),
3091
- footer ? /* @__PURE__ */ jsx19("div", { className: "ls-panel__footer", children: footer }) : null
3451
+ /* @__PURE__ */ jsx20("div", { className: classNames10("ls-panel__body", bodyClassName), children }),
3452
+ footer ? /* @__PURE__ */ jsx20("div", { className: "ls-panel__footer", children: footer }) : null
3092
3453
  ] });
3093
3454
  if (onClickAway) {
3094
- return /* @__PURE__ */ jsxs10(Fragment4, { children: [
3095
- /* @__PURE__ */ jsx19("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
3455
+ return /* @__PURE__ */ jsxs11(Fragment6, { children: [
3456
+ /* @__PURE__ */ jsx20("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
3096
3457
  panel
3097
3458
  ] });
3098
3459
  }
@@ -3101,7 +3462,7 @@ function PanelChrome({
3101
3462
  PanelChrome.displayName = "PanelChrome";
3102
3463
 
3103
3464
  // src/components/ModalChrome/ModalChrome.tsx
3104
- import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
3465
+ import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
3105
3466
  function ModalChrome({
3106
3467
  open = true,
3107
3468
  onClose,
@@ -3126,9 +3487,9 @@ function ModalChrome({
3126
3487
  return null;
3127
3488
  }
3128
3489
  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(
3490
+ return /* @__PURE__ */ jsxs12("div", { className: classNames11("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
3491
+ /* @__PURE__ */ jsx21("div", { className: classNames11("ls-modal__backdrop", backdropClassName), onClick: onClose }),
3492
+ /* @__PURE__ */ jsx21(
3132
3493
  PanelChrome,
3133
3494
  {
3134
3495
  className: classNames11(
@@ -3154,20 +3515,20 @@ ModalChrome.displayName = "ModalChrome";
3154
3515
 
3155
3516
  // src/components/WidgetChrome/WidgetChrome.tsx
3156
3517
  import classNames12 from "classnames";
3157
- import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
3518
+ import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
3158
3519
  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 });
3520
+ return /* @__PURE__ */ jsx22("button", { ref: buttonRef, type: "button", className: classNames12("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
3160
3521
  }
3161
3522
  WidgetChromeButton.displayName = "WidgetChromeButton";
3162
3523
  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 }),
3524
+ return /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget", className), style, id, children: [
3525
+ showHeader ? /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget__header", headerClassName), children: [
3526
+ /* @__PURE__ */ jsx22("div", { className: "ls-widget__side", children: leftActions }),
3527
+ /* @__PURE__ */ jsx22("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx22("span", { children: title }) }),
3528
+ /* @__PURE__ */ jsx22("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
3168
3529
  headerExtra
3169
3530
  ] }) : null,
3170
- /* @__PURE__ */ jsx21("div", { className: classNames12("ls-widget__body", bodyClassName), children })
3531
+ /* @__PURE__ */ jsx22("div", { className: classNames12("ls-widget__body", bodyClassName), children })
3171
3532
  ] });
3172
3533
  }
3173
3534
  WidgetChrome.displayName = "WidgetChrome";
@@ -3176,9 +3537,9 @@ WidgetChrome.displayName = "WidgetChrome";
3176
3537
  import classNames13 from "classnames";
3177
3538
 
3178
3539
  // src/components/EventList/EventTypeIcon.tsx
3179
- import { jsx as jsx22 } from "react/jsx-runtime";
3540
+ import { jsx as jsx23 } from "react/jsx-runtime";
3180
3541
  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)) });
3542
+ 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
3543
  return Icon;
3183
3544
  };
3184
3545
  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 +3567,12 @@ var EVENT_TYPE_ICONS = {
3206
3567
  };
3207
3568
  function EventTypeIcon({ type, ...props }) {
3208
3569
  const Icon = (type != null ? EVENT_TYPE_ICONS[String(type).trim().toLowerCase()] : void 0) ?? EVENT_TYPE_FALLBACK_ICON;
3209
- return /* @__PURE__ */ jsx22(Icon, { ...props });
3570
+ return /* @__PURE__ */ jsx23(Icon, { ...props });
3210
3571
  }
3211
3572
  EventTypeIcon.displayName = "EventTypeIcon";
3212
3573
 
3213
3574
  // src/components/EventListItem/EventListItem.tsx
3214
- import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
3575
+ import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
3215
3576
  function EventListItem({
3216
3577
  username,
3217
3578
  message,
@@ -3231,7 +3592,7 @@ function EventListItem({
3231
3592
  onUsernameClick,
3232
3593
  className
3233
3594
  }) {
3234
- const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx23(EventTypeIcon, { type: eventType }) : null);
3595
+ const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx24(EventTypeIcon, { type: eventType }) : null);
3235
3596
  const style = {};
3236
3597
  if (accentColor) {
3237
3598
  style.borderLeftColor = accentColor;
@@ -3239,10 +3600,10 @@ function EventListItem({
3239
3600
  if (colorFullBackground && accentColor) {
3240
3601
  style.backgroundColor = `color-mix(in srgb, ${accentColor} 22%, var(--cardbackground, var(--neutralDark2, #211d3e)))`;
3241
3602
  }
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(
3603
+ return /* @__PURE__ */ jsxs14("div", { className: classNames13("ls-eventlist-item", className), style, children: [
3604
+ /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__main", children: [
3605
+ /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__identity", children: [
3606
+ /* @__PURE__ */ jsx24(
3246
3607
  "span",
3247
3608
  {
3248
3609
  className: classNames13("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
@@ -3258,9 +3619,9 @@ function EventListItem({
3258
3619
  children: username
3259
3620
  }
3260
3621
  ),
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(
3622
+ platformIcon ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
3623
+ showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx24("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
3624
+ resolvedAlertIcon ? /* @__PURE__ */ jsx24(
3264
3625
  "span",
3265
3626
  {
3266
3627
  className: "ls-eventlist-item__icon",
@@ -3269,25 +3630,25 @@ function EventListItem({
3269
3630
  }
3270
3631
  ) : null
3271
3632
  ] }),
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: [
3633
+ /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__body", children: [
3634
+ message ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__message", children: message }) : null,
3635
+ showMessage && userMessage ? /* @__PURE__ */ jsxs14("span", { className: "ls-eventlist-item__usermessage", children: [
3275
3636
  "\u201C",
3276
3637
  userMessage,
3277
3638
  "\u201D"
3278
3639
  ] }) : null
3279
3640
  ] }),
3280
- showTimestamp && timestamp ? /* @__PURE__ */ jsx23("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
3641
+ showTimestamp && timestamp ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
3281
3642
  ] }),
3282
- actions ? /* @__PURE__ */ jsx23("div", { className: "ls-eventlist-item__actions", children: actions }) : null
3643
+ actions ? /* @__PURE__ */ jsx24("div", { className: "ls-eventlist-item__actions", children: actions }) : null
3283
3644
  ] });
3284
3645
  }
3285
3646
  EventListItem.displayName = "EventListItem";
3286
3647
 
3287
3648
  // src/components/EventList/EventList.tsx
3288
- import { useEffect as useEffect6, useRef as useRef6 } from "react";
3649
+ import { useEffect as useEffect7, useRef as useRef7 } from "react";
3289
3650
  import classNames14 from "classnames";
3290
- import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
3651
+ import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
3291
3652
  var PIN_THRESHOLD = 24;
3292
3653
  function EventList({
3293
3654
  items,
@@ -3309,9 +3670,9 @@ function EventList({
3309
3670
  endReachedThreshold = 24,
3310
3671
  className
3311
3672
  }) {
3312
- const listRef = useRef6(null);
3313
- const pinnedRef = useRef6(true);
3314
- useEffect6(() => {
3673
+ const listRef = useRef7(null);
3674
+ const pinnedRef = useRef7(true);
3675
+ useEffect7(() => {
3315
3676
  const el = listRef.current;
3316
3677
  if (!autoScroll || !el || !pinnedRef.current) {
3317
3678
  return;
@@ -3331,17 +3692,17 @@ function EventList({
3331
3692
  onEndReached();
3332
3693
  }
3333
3694
  };
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(
3695
+ return /* @__PURE__ */ jsx25("div", { className: classNames14("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
3696
+ emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
3697
+ /* @__PURE__ */ jsx25("span", { children: emptyText })
3698
+ ] }) : /* @__PURE__ */ jsx25(
3338
3699
  "div",
3339
3700
  {
3340
3701
  className: "ls-eventlist__list",
3341
3702
  ref: listRef,
3342
3703
  onScroll: handleScroll,
3343
3704
  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(
3705
+ children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
3345
3706
  EventListItem,
3346
3707
  {
3347
3708
  username: item.username,
@@ -3350,7 +3711,7 @@ function EventList({
3350
3711
  avatar: item.avatar,
3351
3712
  fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
3352
3713
  timestamp: item.timestamp,
3353
- platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx24(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
3714
+ platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
3354
3715
  alertIcon: item.alertIcon,
3355
3716
  eventType: item.eventType,
3356
3717
  accentColor: item.accentColor,
@@ -3370,7 +3731,7 @@ EventList.displayName = "EventList";
3370
3731
  // src/components/StreamStatusPanel/StreamStatusPanel.tsx
3371
3732
  import Tooltip4 from "@mui/material/Tooltip";
3372
3733
  import classNames15 from "classnames";
3373
- import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
3734
+ import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
3374
3735
  var LS_INFO_TOOLTIP_SX = {
3375
3736
  backgroundColor: "#1b1834",
3376
3737
  border: "1px solid #393853",
@@ -3383,8 +3744,8 @@ var LS_INFO_TOOLTIP_SX = {
3383
3744
  boxShadow: "0 10px 30px rgba(0, 0, 0, 0.45)"
3384
3745
  };
3385
3746
  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" }) });
3747
+ 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" }) });
3748
+ 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
3749
  function StreamStatusPanel({
3389
3750
  online = false,
3390
3751
  statusLabel,
@@ -3407,62 +3768,62 @@ function StreamStatusPanel({
3407
3768
  const hasPlatforms = platforms != null;
3408
3769
  const hasStats = stats.length > 0;
3409
3770
  if (!hasStatus && !hasTotal && !hasPlatforms && !hasStats) {
3410
- return /* @__PURE__ */ jsx25("div", { className: classNames15("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
3771
+ return /* @__PURE__ */ jsx26("div", { className: classNames15("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
3411
3772
  }
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 }) })
3773
+ return /* @__PURE__ */ jsxs16("div", { className: classNames15("ls-streamstatus", className), id, children: [
3774
+ hasStatus ? /* @__PURE__ */ jsx26("div", { className: "ls-streamstatus__status", children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
3775
+ /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__indicator", children: [
3776
+ online ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__indicator-ping" }) : null,
3777
+ /* @__PURE__ */ jsx26("span", { className: classNames15("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
3417
3778
  ] }),
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
3779
+ /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__status-body", children: [
3780
+ /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
3781
+ statusSublabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
3421
3782
  ] })
3422
3783
  ] }) }) : 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
3784
+ hasTotal || hasPlatforms ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__overview", children: [
3785
+ hasTotal ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__total", children: [
3786
+ /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
3787
+ totalLabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
3427
3788
  ] }) : 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(
3789
+ 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: [
3790
+ /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__platform-info", children: [
3791
+ 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
3792
  "span",
3432
3793
  {
3433
3794
  className: "ls-streamstatus__platform-dot",
3434
3795
  style: platform.accentColor ? { backgroundColor: platform.accentColor } : void 0
3435
3796
  }
3436
3797
  ),
3437
- /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__platform-label", children: platform.label })
3798
+ /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-label", children: platform.label })
3438
3799
  ] }),
3439
- /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__platform-value", children: platform.value })
3800
+ /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-value", children: platform.value })
3440
3801
  ] }, platform.id)) }) : null
3441
3802
  ] }) : null,
3442
- hasStats ? /* @__PURE__ */ jsx25(
3803
+ hasStats ? /* @__PURE__ */ jsx26(
3443
3804
  "div",
3444
3805
  {
3445
3806
  className: "ls-streamstatus__stats",
3446
3807
  style: statsColumns ? { gridTemplateColumns: `repeat(${statsColumns}, minmax(0, 1fr))` } : void 0,
3447
3808
  children: stats.map((stat) => {
3448
- const label = stat.label != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
3809
+ const label = stat.label != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
3449
3810
  const showHead = stat.icon != null || stat.actions != null || statsLabelPosition === "top" && label != null;
3450
3811
  const displayValue = typeof stat.value === "number" ? formatStatValue(stat.value) : stat.value;
3451
3812
  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,
3813
+ const node = /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat", style: stat.tooltip != null ? { cursor: "help" } : void 0, children: [
3814
+ showHead ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat-head", children: [
3815
+ stat.icon != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
3455
3816
  statsLabelPosition === "top" ? label : null,
3456
- stat.actions != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
3817
+ stat.actions != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
3457
3818
  ] }) : 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: [
3819
+ /* @__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
3820
  displayValue,
3460
- trend === "up" ? /* @__PURE__ */ jsx25(TrendUpArrow, {}) : /* @__PURE__ */ jsx25(TrendDownArrow, {})
3821
+ trend === "up" ? /* @__PURE__ */ jsx26(TrendUpArrow, {}) : /* @__PURE__ */ jsx26(TrendDownArrow, {})
3461
3822
  ] }) : displayValue }),
3462
3823
  statsLabelPosition === "bottom" ? label : null,
3463
- stat.sub != null ? /* @__PURE__ */ jsx25("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
3824
+ stat.sub != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
3464
3825
  ] }, 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;
3826
+ 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
3827
  })
3467
3828
  }
3468
3829
  ) : null
@@ -3472,9 +3833,9 @@ StreamStatusPanel.displayName = "StreamStatusPanel";
3472
3833
 
3473
3834
  // src/components/ViewersList/ViewersList.tsx
3474
3835
  import * as React from "react";
3475
- import { useMemo as useMemo4, useState as useState8 } from "react";
3836
+ import { useMemo as useMemo5, useState as useState9 } from "react";
3476
3837
  import classNames16 from "classnames";
3477
- import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
3838
+ import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
3478
3839
  function ViewersList({
3479
3840
  viewers,
3480
3841
  groups,
@@ -3491,13 +3852,13 @@ function ViewersList({
3491
3852
  id,
3492
3853
  className
3493
3854
  }) {
3494
- const [query, setQuery] = useState8("");
3855
+ const [query, setQuery] = useState9("");
3495
3856
  const internalSearch = showSearch && !searchSlot;
3496
- const filtered = useMemo4(
3857
+ const filtered = useMemo5(
3497
3858
  () => internalSearch && query ? viewers.filter((viewer) => viewer.username.toLowerCase().includes(query.toLowerCase())) : viewers,
3498
3859
  [internalSearch, viewers, query]
3499
3860
  );
3500
- const sections = useMemo4(() => {
3861
+ const sections = useMemo5(() => {
3501
3862
  if (!groups || groups.length === 0) {
3502
3863
  return [{ key: "", viewers: filtered }];
3503
3864
  }
@@ -3507,25 +3868,25 @@ function ViewersList({
3507
3868
  return [...grouped, { key: "", viewers: rest }].filter((section) => section.viewers.length > 0);
3508
3869
  }, [groups, filtered]);
3509
3870
  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
3871
+ return /* @__PURE__ */ jsxs17("div", { className: classNames16("ls-viewerslist", className), id, children: [
3872
+ showHead ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__head", children: [
3873
+ countLabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
3874
+ searchSlot ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
3875
+ internalSearch ? /* @__PURE__ */ jsx27("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
3515
3876
  ] }) : 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,
3877
+ hint != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__hint", children: hint }) : null,
3878
+ filtered.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__empty", children: [
3879
+ emptyIcon ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
3880
+ /* @__PURE__ */ jsx27("span", { children: emptyText })
3881
+ ] }) : /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs17(React.Fragment, { children: [
3882
+ section.label != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__group", children: section.label }) : null,
3522
3883
  section.viewers.map((viewer) => {
3523
3884
  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(
3885
+ const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx27(PlatformIcon, { platform: viewer.platform }) : null);
3886
+ return /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__viewer", children: [
3887
+ showAvatars && avatarSrc ? /* @__PURE__ */ jsx27("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
3888
+ platformIcon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
3889
+ /* @__PURE__ */ jsx27(
3529
3890
  "span",
3530
3891
  {
3531
3892
  className: classNames16("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
@@ -3542,8 +3903,8 @@ function ViewersList({
3542
3903
  children: viewer.username
3543
3904
  }
3544
3905
  ),
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
3906
+ viewer.badges != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
3907
+ viewer.actions != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
3547
3908
  ] }, viewer.id);
3548
3909
  })
3549
3910
  ] }, section.key || "__ungrouped")) })
@@ -3553,7 +3914,7 @@ ViewersList.displayName = "ViewersList";
3553
3914
 
3554
3915
  // src/components/ShortcutDockGrid/ShortcutDockGrid.tsx
3555
3916
  import classNames17 from "classnames";
3556
- import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
3917
+ import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
3557
3918
  var softAccent = (color) => /^#[0-9a-fA-F]{6}$/.test(color) ? `${color}66` : color;
3558
3919
  function ShortcutDockGrid({
3559
3920
  buttons,
@@ -3576,7 +3937,7 @@ function ShortcutDockGrid({
3576
3937
  className
3577
3938
  }) {
3578
3939
  const showAdd = editMode && Boolean(onAdd);
3579
- return /* @__PURE__ */ jsxs17(
3940
+ return /* @__PURE__ */ jsxs18(
3580
3941
  "div",
3581
3942
  {
3582
3943
  className: classNames17(
@@ -3590,7 +3951,7 @@ function ShortcutDockGrid({
3590
3951
  gridAutoRows: rowHeight ? `${rowHeight}px` : "auto"
3591
3952
  },
3592
3953
  children: [
3593
- buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx27("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
3954
+ buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx28("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
3594
3955
  buttons.map((button) => {
3595
3956
  const large = (button.w ?? 1) > 1 || (button.h ?? 1) > 1;
3596
3957
  const selected = selectedId != null && selectedId === button.id;
@@ -3601,7 +3962,7 @@ function ShortcutDockGrid({
3601
3962
  ...rowHeight ? {} : { minHeight: minButtonSize },
3602
3963
  ...colored ? { ["--ls-shortcutdock-accent"]: button.color, ["--ls-shortcutdock-accent-soft"]: softAccent(button.color) } : {}
3603
3964
  };
3604
- const node = /* @__PURE__ */ jsx27(
3965
+ const node = /* @__PURE__ */ jsx28(
3605
3966
  "button",
3606
3967
  {
3607
3968
  type: "button",
@@ -3617,18 +3978,18 @@ function ShortcutDockGrid({
3617
3978
  onTrigger?.(button.id);
3618
3979
  }
3619
3980
  },
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
3981
+ children: button.content ?? /* @__PURE__ */ jsxs18(Fragment9, { children: [
3982
+ 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,
3983
+ button.label != null ? /* @__PURE__ */ jsx28("span", { className: "ls-shortcutdock__label", children: button.label }) : null
3623
3984
  ] })
3624
3985
  }
3625
3986
  );
3626
- return /* @__PURE__ */ jsxs17("div", { className: "ls-shortcutdock__cell", style: cellStyle, title: button.title, children: [
3987
+ return /* @__PURE__ */ jsxs18("div", { className: "ls-shortcutdock__cell", style: cellStyle, title: button.title, children: [
3627
3988
  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
3989
+ editMode && onRemove ? /* @__PURE__ */ jsx28("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
3629
3990
  ] }, button.id);
3630
3991
  }),
3631
- showAdd ? /* @__PURE__ */ jsx27(
3992
+ showAdd ? /* @__PURE__ */ jsx28(
3632
3993
  "button",
3633
3994
  {
3634
3995
  type: "button",
@@ -3648,7 +4009,7 @@ ShortcutDockGrid.displayName = "ShortcutDockGrid";
3648
4009
  // src/components/GoalsList/GoalsList.tsx
3649
4010
  import Tooltip5 from "@mui/material/Tooltip";
3650
4011
  import classNames18 from "classnames";
3651
- import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
4012
+ import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
3652
4013
  var GOAL_TOOLTIP_SX = {
3653
4014
  backgroundColor: "#1b1834",
3654
4015
  border: "1px solid #393853",
@@ -3672,32 +4033,32 @@ var resolvePercent = (goal) => {
3672
4033
  };
3673
4034
  function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goal data yet", id, className }) {
3674
4035
  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) => {
4036
+ 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
4037
  const percent = resolvePercent(goal);
3677
4038
  const rowStyle = {
3678
4039
  ...goal.accentColor ? { ["--ls-goals-accent"]: goal.accentColor } : {},
3679
4040
  ...goal.tooltip != null ? { cursor: "help" } : {}
3680
4041
  };
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: [
4042
+ const node = /* @__PURE__ */ jsxs19("div", { className: "ls-goals__row", style: rowStyle, children: [
4043
+ /* @__PURE__ */ jsxs19("div", { className: "ls-goals__head", children: [
4044
+ goal.icon != null ? /* @__PURE__ */ jsx29("span", { className: "ls-goals__icon", children: goal.icon }) : null,
4045
+ /* @__PURE__ */ jsx29("span", { className: "ls-goals__label", children: goal.label }),
4046
+ /* @__PURE__ */ jsx29("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
3686
4047
  fmt(goal.current ?? 0, goal),
3687
4048
  " ",
3688
- /* @__PURE__ */ jsxs18("span", { className: "ls-goals__target", children: [
4049
+ /* @__PURE__ */ jsxs19("span", { className: "ls-goals__target", children: [
3689
4050
  "/ ",
3690
4051
  fmt(goal.target ?? 0, goal)
3691
4052
  ] })
3692
4053
  ] }) }),
3693
- showPercent ? /* @__PURE__ */ jsxs18("span", { className: "ls-goals__percent", children: [
4054
+ showPercent ? /* @__PURE__ */ jsxs19("span", { className: "ls-goals__percent", children: [
3694
4055
  percent,
3695
4056
  "%"
3696
4057
  ] }) : null
3697
4058
  ] }),
3698
- /* @__PURE__ */ jsx28("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx28("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
4059
+ /* @__PURE__ */ jsx29("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx29("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
3699
4060
  ] }, 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;
4061
+ 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
4062
  }) });
3702
4063
  }
3703
4064
  GoalsList.displayName = "GoalsList";
@@ -3707,11 +4068,11 @@ import IconButton from "@mui/material/IconButton";
3707
4068
  import classNames19 from "classnames";
3708
4069
 
3709
4070
  // src/components/ModQueueItem/icons.tsx
3710
- import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
4071
+ import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
3711
4072
  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(
4073
+ return /* @__PURE__ */ jsxs20("svg", { className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4074
+ /* @__PURE__ */ jsx30("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
4075
+ /* @__PURE__ */ jsx30(
3715
4076
  "path",
3716
4077
  {
3717
4078
  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 +4082,9 @@ function CrossBoxIcon({ className }) {
3721
4082
  ] });
3722
4083
  }
3723
4084
  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(
4085
+ return /* @__PURE__ */ jsxs20("svg", { className, width: "22", height: "21", viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4086
+ /* @__PURE__ */ jsx30("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
4087
+ /* @__PURE__ */ jsx30(
3727
4088
  "path",
3728
4089
  {
3729
4090
  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 +4095,7 @@ function TickBoxIcon({ className }) {
3734
4095
  }
3735
4096
 
3736
4097
  // src/components/ModQueueItem/ModQueueItem.tsx
3737
- import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
4098
+ import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
3738
4099
  function ModQueueItem({
3739
4100
  username,
3740
4101
  avatar,
@@ -3747,12 +4108,12 @@ function ModQueueItem({
3747
4108
  onDeny,
3748
4109
  className
3749
4110
  }) {
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(
4111
+ return /* @__PURE__ */ jsxs21("div", { className: classNames19("ls-modqueue-item", className), children: [
4112
+ icon ? /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
4113
+ /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__body", children: [
4114
+ /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__head", children: [
4115
+ avatar || fallbackAvatar ? /* @__PURE__ */ jsx31("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
4116
+ username ? /* @__PURE__ */ jsx31(
3756
4117
  "span",
3757
4118
  {
3758
4119
  className: "ls-modqueue-item__username",
@@ -3760,31 +4121,31 @@ function ModQueueItem({
3760
4121
  children: username
3761
4122
  }
3762
4123
  ) : null,
3763
- command ? /* @__PURE__ */ jsx30("span", { className: "ls-modqueue-item__command", children: command }) : null
4124
+ command ? /* @__PURE__ */ jsx31("span", { className: "ls-modqueue-item__command", children: command }) : null
3764
4125
  ] }),
3765
- message ? /* @__PURE__ */ jsxs20("div", { className: "ls-modqueue-item__message", children: [
4126
+ message ? /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__message", children: [
3766
4127
  "\u201C",
3767
4128
  message,
3768
4129
  "\u201D"
3769
4130
  ] }) : null
3770
4131
  ] }),
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" }) })
4132
+ /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
4133
+ /* @__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" }) }),
4134
+ /* @__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
4135
  ] }) })
3775
4136
  ] });
3776
4137
  }
3777
4138
  ModQueueItem.displayName = "ModQueueItem";
3778
4139
 
3779
4140
  // src/components/ModQueueList/ModQueueList.tsx
3780
- import { useMemo as useMemo5, useState as useState9 } from "react";
4141
+ import { useMemo as useMemo6, useState as useState10 } from "react";
3781
4142
  import ButtonBase from "@mui/material/ButtonBase";
3782
4143
  import classNames20 from "classnames";
3783
4144
 
3784
4145
  // src/components/ModQueueList/icons.tsx
3785
- import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
4146
+ import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
3786
4147
  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(
4148
+ 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
4149
  "path",
3789
4150
  {
3790
4151
  fillRule: "evenodd",
@@ -3795,24 +4156,24 @@ function SearchIcon({ className }) {
3795
4156
  ) });
3796
4157
  }
3797
4158
  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(
4159
+ return /* @__PURE__ */ jsxs22("svg", { className, width: "39", height: "39", viewBox: "0 0 39 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4160
+ /* @__PURE__ */ jsx32(
3800
4161
  "path",
3801
4162
  {
3802
4163
  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
4164
  fill: "#CAC9D5"
3804
4165
  }
3805
4166
  ),
3806
- /* @__PURE__ */ jsx31(
4167
+ /* @__PURE__ */ jsx32(
3807
4168
  "path",
3808
4169
  {
3809
4170
  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
4171
  fill: "#CAC9D5"
3811
4172
  }
3812
4173
  ),
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(
4174
+ /* @__PURE__ */ jsx32("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
4175
+ /* @__PURE__ */ jsx32("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
4176
+ /* @__PURE__ */ jsx32(
3816
4177
  "path",
3817
4178
  {
3818
4179
  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 +4184,7 @@ function EmptyModQueueIcon({ className }) {
3823
4184
  }
3824
4185
 
3825
4186
  // src/components/ModQueueList/ModQueueList.tsx
3826
- import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
4187
+ import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
3827
4188
  var matches = (item, q) => {
3828
4189
  if (!q) {
3829
4190
  return true;
@@ -3851,7 +4212,7 @@ function ModQueueList({
3851
4212
  onDeny,
3852
4213
  className
3853
4214
  }) {
3854
- const [internalQuery, setInternalQuery] = useState9("");
4215
+ const [internalQuery, setInternalQuery] = useState10("");
3855
4216
  const query = searchValue !== void 0 ? searchValue : internalQuery;
3856
4217
  const handleSearchChange = (value) => {
3857
4218
  if (searchValue === void 0) {
@@ -3860,33 +4221,33 @@ function ModQueueList({
3860
4221
  onSearchChange?.(value);
3861
4222
  };
3862
4223
  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(
4224
+ const filtered = useMemo6(() => internalSearch ? items.filter((item) => matches(item, query)) : items, [internalSearch, items, query]);
4225
+ return /* @__PURE__ */ jsxs23("div", { className: classNames20("ls-modqueue", className), id, children: [
4226
+ searchSlot ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx33(
3866
4227
  LSInput,
3867
4228
  {
3868
4229
  size: "small",
3869
4230
  placeholder: searchPlaceholder,
3870
- startAdornment: /* @__PURE__ */ jsx32(SearchIcon, { className: "ls-modqueue__search-icon" }),
4231
+ startAdornment: /* @__PURE__ */ jsx33(SearchIcon, { className: "ls-modqueue__search-icon" }),
3871
4232
  value: query,
3872
4233
  onChange: (e) => handleSearchChange(String(e.target.value ?? ""))
3873
4234
  }
3874
4235
  ) }) : 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" }),
4236
+ filtered.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__empty", children: [
4237
+ /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx33(EmptyModQueueIcon, {}) }),
4238
+ /* @__PURE__ */ jsx33("span", { children: emptyText })
4239
+ ] }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
4240
+ canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__bulk", children: [
4241
+ onDeny ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
4242
+ /* @__PURE__ */ jsx33(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
3882
4243
  denyAllLabel
3883
4244
  ] }) : 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" }),
4245
+ onApprove ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--approve", disableRipple: true, onClick: () => onApprove("all"), children: [
4246
+ /* @__PURE__ */ jsx33(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
3886
4247
  approveAllLabel
3887
4248
  ] }) : null
3888
4249
  ] }) : null,
3889
- /* @__PURE__ */ jsx32("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx32(
4250
+ /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx33(
3890
4251
  ModQueueItem,
3891
4252
  {
3892
4253
  icon: item.icon,
@@ -3897,7 +4258,7 @@ function ModQueueList({
3897
4258
  message: showMessages ? item.message : void 0,
3898
4259
  onApprove: () => onApprove?.(item.id),
3899
4260
  onDeny: () => onDeny?.(item.id),
3900
- actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx32("span", { className: "ls-modqueue__readonly", children: "read-only" }))
4261
+ actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__readonly", children: "read-only" }))
3901
4262
  },
3902
4263
  item.id
3903
4264
  )) })
@@ -3907,30 +4268,30 @@ function ModQueueList({
3907
4268
  ModQueueList.displayName = "ModQueueList";
3908
4269
 
3909
4270
  // src/components/ModActivityLog/ModActivityLog.tsx
3910
- import { useEffect as useEffect7, useRef as useRef7 } from "react";
4271
+ import { useEffect as useEffect8, useRef as useRef8 } from "react";
3911
4272
  import classNames21 from "classnames";
3912
- import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
4273
+ import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
3913
4274
  function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", autoScroll, className }) {
3914
- const listRef = useRef7(null);
3915
- useEffect7(() => {
4275
+ const listRef = useRef8(null);
4276
+ useEffect8(() => {
3916
4277
  if (autoScroll && listRef.current) {
3917
4278
  listRef.current.scrollTop = listRef.current.scrollHeight;
3918
4279
  }
3919
4280
  }, [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) => {
4281
+ return /* @__PURE__ */ jsxs24("div", { className: classNames21("ls-modlog", className), children: [
4282
+ 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,
4283
+ 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
4284
  const rowStyle = {
3924
4285
  ...log.tabColor ? { ["--ls-modlog-accent"]: log.tabColor } : {},
3925
4286
  ...log.barColor ? { ["--ls-modlog-bar"]: log.barColor } : {}
3926
4287
  };
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
4288
+ return /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__row", style: rowStyle, children: [
4289
+ /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__head", children: [
4290
+ log.avatar ? /* @__PURE__ */ jsx34("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
4291
+ log.title ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__title", children: log.title }) : null,
4292
+ log.time ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__time", children: log.time }) : null
3932
4293
  ] }),
3933
- log.message ? /* @__PURE__ */ jsx33("div", { className: "ls-modlog__message", children: log.message }) : null
4294
+ log.message ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__message", children: log.message }) : null
3934
4295
  ] }, log.id ?? i);
3935
4296
  }) })
3936
4297
  ] });
@@ -3938,9 +4299,9 @@ function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", a
3938
4299
  ModActivityLog.displayName = "ModActivityLog";
3939
4300
 
3940
4301
  // src/components/SongRequestList/SongRequestList.tsx
3941
- import { useState as useState10 } from "react";
4302
+ import { useState as useState11 } from "react";
3942
4303
  import classNames22 from "classnames";
3943
- import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
4304
+ import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
3944
4305
  function SongRequestList({
3945
4306
  nowPlaying,
3946
4307
  progress = 0,
@@ -3959,7 +4320,7 @@ function SongRequestList({
3959
4320
  emptyText,
3960
4321
  className
3961
4322
  }) {
3962
- const [addValue, setAddValue] = useState10("");
4323
+ const [addValue, setAddValue] = useState11("");
3963
4324
  const submitAdd = () => {
3964
4325
  const query = addValue.trim();
3965
4326
  if (!query || addDisabled || !onAddSong) {
@@ -3968,8 +4329,8 @@ function SongRequestList({
3968
4329
  onAddSong(query);
3969
4330
  setAddValue("");
3970
4331
  };
3971
- const addBar = onAddSong ? /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__addbar", children: [
3972
- /* @__PURE__ */ jsx34(
4332
+ const addBar = onAddSong ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__addbar", children: [
4333
+ /* @__PURE__ */ jsx35(
3973
4334
  LSInput,
3974
4335
  {
3975
4336
  className: "ls-songreq__addinput",
@@ -3985,51 +4346,51 @@ function SongRequestList({
3985
4346
  }
3986
4347
  }
3987
4348
  ),
3988
- /* @__PURE__ */ jsx34(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
4349
+ /* @__PURE__ */ jsx35(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
3989
4350
  ] }) : null;
3990
4351
  if (!nowPlaying) {
3991
4352
  if (!addBar) {
3992
- return /* @__PURE__ */ jsx34("div", { className: classNames22("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
4353
+ return /* @__PURE__ */ jsx35("div", { className: classNames22("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
3993
4354
  }
3994
- return /* @__PURE__ */ jsxs24("div", { className: classNames22("ls-songreq", className), children: [
4355
+ return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
3995
4356
  addBar,
3996
- /* @__PURE__ */ jsx34("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
4357
+ /* @__PURE__ */ jsx35("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
3997
4358
  ] });
3998
4359
  }
3999
4360
  const clampedProgress = Math.min(100, Math.max(0, progress));
4000
- return /* @__PURE__ */ jsxs24("div", { className: classNames22("ls-songreq", className), children: [
4361
+ return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
4001
4362
  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: [
4363
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__now", children: [
4364
+ showArt && nowPlaying.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
4365
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__nowbody", children: [
4366
+ /* @__PURE__ */ jsx35("div", { className: "ls-songreq__title", children: nowPlaying.title }),
4367
+ nowPlaying.artist ? /* @__PURE__ */ jsx35("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
4368
+ showRequester && nowPlaying.requester ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__requester", children: [
4008
4369
  "requested by ",
4009
4370
  nowPlaying.requester
4010
4371
  ] }) : null,
4011
- /* @__PURE__ */ jsx34("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx34("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
4372
+ /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
4012
4373
  ] }),
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
4374
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__controls", children: [
4375
+ 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,
4376
+ onSkip ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
4016
4377
  ] })
4017
4378
  ] }),
4018
- showQueue ? /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__queue", children: [
4019
- /* @__PURE__ */ jsxs24("div", { className: "ls-songreq__queuehead", children: [
4379
+ showQueue ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queue", children: [
4380
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queuehead", children: [
4020
4381
  "Up next \xB7 ",
4021
4382
  queue.length
4022
4383
  ] }),
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: [
4384
+ /* @__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: [
4385
+ showArt && item.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
4386
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itembody", children: [
4387
+ /* @__PURE__ */ jsx35("div", { className: "ls-songreq__itemtitle", children: item.title }),
4388
+ /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itemmeta", children: [
4028
4389
  item.artist,
4029
4390
  showRequester && item.requester ? ` \xB7 ${item.requester}` : ""
4030
4391
  ] })
4031
4392
  ] }),
4032
- onRemove ? /* @__PURE__ */ jsx34("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
4393
+ onRemove ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
4033
4394
  ] }, item.id)) })
4034
4395
  ] }) : null
4035
4396
  ] });