@lumiastream/ui 0.7.7 → 0.8.1

package/dist/components.js

@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/lumia-ui.css
-styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var(--cardHover, var(--transwhite, rgba(255, 255, 255, 0.05))) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker #rbgcp-eyedropper-btn,\n.ls-color-picker #rbgcp-eyedropper-btn svg,\n.ls-color-picker #rbgcp-eyedropper-btn svg * {\n  color: var(--white, #fff) !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");
+styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n  max-height: none !important;\n}\n.ls-color-picker__gradient {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  min-width: 24px;\n  margin-left: 0.35rem;\n  border-radius: var(--radius, 1rem);\n  background: var(--primary, #ff4076) !important;\n  color: var(--alwayswhite, var(--white, #fff)) !important;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n  user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n  color: currentcolor !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n  filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n  filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n  width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n  position: relative;\n  min-width: 0;\n  width: 100%;\n  min-height: var(--ls-control-height);\n  margin: 0;\n  border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0 0.875rem 0.5rem 0.875rem;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n  display: block;\n  width: auto;\n  max-width: calc(100% - 1rem);\n  margin: 0;\n  padding: 0 0.25rem;\n  color: var(--neutralLight1, var(--white, #fff));\n  font-size: 0.875rem;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n  display: flex;\n  min-width: 0;\n  min-height: calc(var(--ls-control-height) - 14px);\n  align-items: center;\n  gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n  flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n  justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n  min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n  display: block;\n  margin-top: 0.25rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.75rem;\n  line-height: 1.25;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radius, 1rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff !important;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description {\n  display: block;\n  cursor: default;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: var(--neutralLight2, #cac9d5);\n  overflow-wrap: break-word;\n  line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n  opacity: 1;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n  position: absolute;\n  margin: 0;\n  border: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  pointer-events: none;\n  background: transparent;\n  color: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  z-index: 0;\n}\n.ls-variable-highlight__token {\n  border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n  color: var(--customVariables, #69ffd2);\n  background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n  position: fixed;\n  z-index: 2000;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  max-width: 320px;\n  padding: 6px 10px;\n  border-radius: 8px;\n  background: var(--neutralDark1, #171628);\n  border: 1px solid var(--neutralDark4, #393853);\n  color: var(--neutralLight2, #cac9d5);\n  font-size: 0.75rem;\n  line-height: 1.3;\n  pointer-events: none;\n  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n.ls-chat-message {\n  position: relative;\n  font-size: 0.95em;\n  line-height: 1.4;\n  color: var(--white, var(--neutralLight1, #fff));\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.ls-chat-message img {\n  display: inline-block;\n}\n.ls-chat-message__reply {\n  display: block;\n  margin-bottom: 0.15em;\n  font-size: 0.82em;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n  vertical-align: middle;\n}\n.ls-chat-message__avatar {\n  width: 1.3em;\n  height: 1.3em;\n  border-radius: 9999px;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site {\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n  width: 1.2em;\n  height: 1.2em;\n  vertical-align: middle;\n}\n.ls-chat-message__time {\n  margin-right: 0.35em;\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__badges {\n  vertical-align: middle;\n}\n.ls-chat-message__badges img {\n  height: 1.05em;\n  vertical-align: middle;\n  margin-right: 0.25em;\n}\n.ls-chat-message__username {\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n  cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-chat-message__text {\n  vertical-align: middle;\n}\n.ls-chat-message__text img {\n  vertical-align: middle;\n}\n.ls-chat-message__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.ls-chat-message__modbar {\n  display: flex;\n  overflow: hidden;\n  border-radius: 0.75rem;\n  background-color: var(--separator, #0a0821);\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n  background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n  color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n  display: flex;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 1em;\n  border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n  border-left: 4px solid var(--primary, #ff4076);\n  border-radius: 1em;\n  background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n  color: var(--white, var(--neutralLight1, #fff));\n  padding: 1em;\n  line-height: 1.35;\n}\n.ls-eventlist-item__main {\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  min-width: 0;\n}\n.ls-eventlist-item__identity {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5em;\n  min-width: 1.5em;\n  height: 1.5em;\n  overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n  border-radius: 1em;\n  background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ls-eventlist-item__username {\n  min-width: 0;\n  font-weight: 700;\n  font-size: 0.875em;\n  word-break: break-all;\n}\n.ls-eventlist-item__body {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__message {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n  min-width: 0;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-eventlist-item__time {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.875em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  align-self: center;\n  gap: 0.5em;\n  flex-shrink: 0;\n}\n.ls-modqueue-item {\n  display: flex;\n  align-items: stretch;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n  padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n  display: flex;\n  height: 4rem;\n  width: 4rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  color: var(--primary, #ff4076);\n  font-size: 1.75rem;\n  line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n}\n.ls-modqueue-item__body {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 9999px;\n  border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n  font-weight: 700;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 12rem;\n}\n.ls-modqueue-item__command {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  padding: 0.05rem 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n  font-size: 0.875rem;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-modqueue-item__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n  padding: 0;\n  border-radius: 0.5rem;\n  transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n  background-color: transparent;\n  opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n}\n.ls-modlog {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n  display: flex;\n  justify-content: flex-end;\n}\n.ls-modlog__clear {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 0;\n  border-radius: 0.75rem;\n  background: transparent;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n  color: var(--white, #fff);\n}\n.ls-modlog__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.375rem;\n  overflow: auto;\n}\n.ls-modlog__row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n  background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-modlog__avatar {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 9999px;\n}\n.ls-modlog__title {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.375rem;\n  padding: 0.05rem 0.4rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--ls-modlog-accent, var(--primary, #ff4076));\n  background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.6875rem;\n  font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.35;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n  flex: 1;\n}\n.ls-songreq__empty {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.75rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n  height: 3.5rem;\n  width: 3.5rem;\n  flex-shrink: 0;\n  border-radius: 0.75rem;\n  object-fit: cover;\n}\n.ls-songreq__nowbody {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n.ls-songreq__title {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__artist {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n  overflow: hidden;\n  font-size: 0.6875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n  margin-top: 0.375rem;\n  height: 0.375rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n  height: 100%;\n  border-radius: 9999px;\n  background-color: var(--success, #1db954);\n  transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-songreq__btn {\n  display: inline-flex;\n  height: 2rem;\n  width: 2rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background: transparent;\n  font-size: 0.875rem;\n  line-height: 1;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-songreq__queue {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n}\n.ls-songreq__queuehead {\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: auto;\n}\n.ls-songreq__queueempty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.375rem 0.5rem;\n  transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.ls-songreq__itembody {\n  min-width: 0;\n  flex: 1;\n}\n.ls-songreq__itemtitle {\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-modqueue__search-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.5rem;\n  border: 1px solid currentcolor;\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n  opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n  color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n}\n.ls-modqueue__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-modqueue__readonly {\n  font-size: 0.625rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n  flex-shrink: 0;\n}\n.ls-chatbox {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ls-chatbox__list {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n.ls-chatbox__jump {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  backdrop-filter: blur(4px);\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n  transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n  margin-left: 0.25rem;\n  border-radius: 9999px;\n  background-color: var(--primary, #ff4076);\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n  flex: 2 1 0%;\n  min-width: 100px;\n  width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n  flex: 1 1 0%;\n  min-width: 7.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n  flex: 0 1 auto;\n  min-width: 5.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n  height: 55px;\n  flex-shrink: 0;\n}\n.ls-panel {\n  --ls-panel-padding: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: var(--ls-panel-bg, #1b1834);\n  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n}\n.ls-panel__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n  min-width: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-panel__title--label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-panel__close {\n  display: flex;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.5rem;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-panel__body {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n  padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n  flex-shrink: 0;\n  padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ls-modal--absolute {\n  position: absolute;\n}\n.ls-modal__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n  backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n  position: relative;\n  width: 100%;\n  max-width: var(--ls-modal-max-width, min(560px, 92vw));\n  max-height: 85vh;\n}\n.ls-modal__card--fit {\n  width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog {\n  margin-top: 0.5rem;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog__card {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  border-radius: 1rem;\n  outline: none;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n  padding: 1rem;\n}\n.ls-dialog__card--full {\n  border-radius: 0;\n}\n.ls-dialog__top {\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n.ls-dialog__top--full {\n  margin-top: 2rem;\n}\n.ls-dialog__top-side {\n  flex: 1;\n}\n.ls-dialog__title {\n  font-size: 1.25rem;\n  color: var(--white, #fff);\n}\n.ls-dialog__close {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  user-select: none;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-dialog__close-label {\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: auto;\n}\n.ls-dialog__bottom {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-bottom: 1rem;\n}\n.ls-eventlist {\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n  line-height: 1.35;\n}\n.ls-eventlist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5em;\n  overflow-y: auto;\n}\n.ls-eventlist__row {\n  flex-shrink: 0;\n  animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  border-radius: 1em;\n  padding: 1em;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n  width: 1.6em;\n  height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1.5em);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ls-streamstatus {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: auto;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.625rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n  position: relative;\n  display: inline-flex;\n  height: 0.75rem;\n  width: 0.75rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n  animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ls-streamstatus__indicator-dot {\n  position: relative;\n  height: 0.75rem;\n  width: 0.75rem;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n  background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n.ls-streamstatus__status-label {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n  display: flex;\n  flex-shrink: 0;\n  align-items: stretch;\n  gap: 0.5rem;\n}\n.ls-streamstatus__total {\n  display: flex;\n  flex-shrink: 0;\n  flex-direction: column;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n  font-size: 1.875rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n  margin-top: 0.25rem;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.25rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n  display: grid;\n  flex-shrink: 0;\n  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n  gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 0.125rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n  display: inline-flex;\n  margin-left: auto;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n  overflow: hidden;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n  width: 10px;\n  flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-viewerslist__head {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-viewerslist__count {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n  min-width: 0;\n  flex: 1;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  color: var(--white, #fff);\n  outline: none;\n}\n.ls-viewerslist__search:focus {\n  border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n  color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n  min-width: 0;\n  flex: 1;\n}\n.ls-viewerslist__hint {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.125rem;\n  overflow: auto;\n}\n.ls-viewerslist__group {\n  margin-top: 0.375rem;\n  flex-shrink: 0;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n  margin-top: 0;\n}\n.ls-viewerslist__viewer {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.25rem 0.375rem;\n  transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.ls-viewerslist__platform {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-viewerslist__username {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n  box-sizing: border-box;\n}\n.ls-shortcutdock {\n  display: grid;\n  width: 100%;\n  align-content: start;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-shortcutdock--disabled {\n  opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n  position: relative;\n  min-width: 0;\n}\n.ls-shortcutdock__btn {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n  background-color: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  color: var(--white, #fff);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n  border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n  cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.15rem;\n  line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n  font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n  width: 2rem;\n  height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n  width: 60%;\n  height: 60%;\n  border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  padding-inline: 0.125rem;\n  text-align: center;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1.2;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n  font-size: clamp(1rem, 1.4vw, 1.5rem);\n  font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n  width: 100%;\n  height: 100%;\n  font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n  width: 60%;\n  height: 60%;\n}\n.ls-shortcutdock__remove {\n  position: absolute;\n  top: -0.375rem;\n  right: -0.375rem;\n  z-index: 1;\n  display: flex;\n  height: 1.25rem;\n  width: 1.25rem;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 9999px;\n  background-color: var(--error, #fd5454);\n  padding: 0;\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: var(--white, #fff);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n  transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n  opacity: 0.8;\n}\n.ls-shortcutdock__add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  font-size: 1.5rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n  color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n  box-sizing: border-box;\n}\n.ls-goals {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ls-goals__empty {\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  font-size: 0.875rem;\n}\n.ls-goals__icon {\n  display: flex;\n  align-self: center;\n  align-items: center;\n  line-height: 1;\n}\n.ls-goals__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 600;\n  color: var(--white, #fff);\n}\n.ls-goals__value {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n  opacity: 0.6;\n}\n.ls-goals__bar {\n  margin-top: 0.375rem;\n  height: 0.625rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n  height: 100%;\n  border-radius: 9999px;\n  background-image:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n      var(--ls-goals-accent, var(--primary, #ff4076)));\n  transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n  flex-shrink: 0;\n  min-width: 2.75rem;\n  text-align: right;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n  display: inline-block;\n  height: 1.15em;\n  width: auto;\n  max-width: 1.5em;\n  vertical-align: middle;\n  object-fit: contain;\n}\n.ls-chatbox__platform-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n  border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n  border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n  background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius, 1rem);\n  border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n  background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n  background-color: var(--background, #151230);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n  position: relative;\n  display: flex;\n  min-height: 2.75rem;\n  width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  padding-inline: 0.5rem;\n}\n.ls-widget__side {\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-widget__side--right {\n  margin-left: auto;\n}\n.ls-widget__title {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n}\n.ls-widget__btn {\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.375rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n  font: inherit;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-widget__body {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: auto;\n}\n");
 
 // src/components/LSButton/LSButton.tsx
 import Button from "@mui/material/Button";
@@ -39,6 +39,7 @@ var LSButton = ({
   className,
   sx,
   style,
+  noSvgColorOverride,
   ...props
 }) => {
   const resolvedColor = color ?? (primary ? "primary" : "primary");
@@ -64,7 +65,8 @@ var LSButton = ({
         ...secondaryOutlinedStyles ? [secondaryOutlinedStyles] : []
       ],
       className: classNames(
-        "mui-ls-button cursor-pointer rounded-2xl pb-1.5 pt-1.5 hover:opacity-80 svg-current-color",
+        "mui-ls-button cursor-pointer rounded-2xl pb-1.5 pt-1.5 hover:opacity-80",
+        !noSvgColorOverride && "svg-current-color",
         extended ? "pl-12 pr-12 mui-ls-button--extended" : "pl-6 pr-6",
         `mui-ls-button--${resolvedColor}`,
         `mui-ls-button--${variant}`,
@@ -93,7 +95,12 @@ var LSInput = forwardRef(
       inputAfterText,
       maxWidth,
       className = "",
+      inputRef: inputRefProp,
+      inputProps: htmlInputPropsProp,
+      InputProps: inputPropsProp,
+      InputLabelProps: inputLabelPropsProp,
       slotProps: slotPropsProp,
+      showborder,
       onChange,
       onChangeStart,
       onChangeEnd,
@@ -104,6 +111,7 @@ var LSInput = forwardRef(
       style,
       centerText,
       $noMinHeight,
+      color,
       bypasscolor,
       textColor,
       fullWidth = true,
@@ -130,21 +138,24 @@ var LSInput = forwardRef(
     const callerInputSlot = slotPropsProp?.input ?? {};
     const callerHtmlInputSlot = slotPropsProp?.htmlInput ?? {};
     const callerInputLabelSlot = slotPropsProp?.inputLabel ?? {};
-    const resolvedStartAdornment = callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
-    const resolvedEndAdornment = callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
+    const resolvedStartAdornment = inputPropsProp?.startAdornment ?? callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
+    const resolvedEndAdornment = inputPropsProp?.endAdornment ?? callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
     const helperContent = helperText ?? (typeof error === "string" ? error : "");
     const hasError = typeof error === "string" ? true : Boolean(error);
     const resolvedMaxWidth = maxWidth ?? style?.maxWidth;
+    const resolvedColor = color ?? bypasscolor;
     const valueProps = hasExplicitValue ? { value: normalizedValue } : {};
     const slotProps = {
       ...slotPropsProp ?? {},
       input: {
         ...callerInputSlot,
+        ...inputPropsProp ?? {},
         startAdornment: resolvedStartAdornment,
         endAdornment: resolvedEndAdornment,
-        readOnly: rest.readOnly ?? callerInputSlot.readOnly,
+        readOnly: rest.readOnly ?? inputPropsProp?.readOnly ?? callerInputSlot.readOnly,
         sx: {
           ...callerInputSlot.sx ?? {},
+          ...inputPropsProp?.sx ?? {},
           "& input, & textarea": {
             textAlign: centerText ? "center" : void 0,
             color: textColor ?? void 0
@@ -153,10 +164,12 @@ var LSInput = forwardRef(
       },
       inputLabel: {
         shrink: true,
-        ...callerInputLabelSlot
+        ...callerInputLabelSlot,
+        ...inputLabelPropsProp ?? {}
       },
       htmlInput: {
-        ...callerHtmlInputSlot
+        ...callerHtmlInputSlot,
+        ...htmlInputPropsProp ?? {}
       }
     };
     const TextFieldComponent = TextField;
@@ -180,11 +193,11 @@ var LSInput = forwardRef(
             size: rest.size,
             margin: "dense",
             variant: "outlined",
-            color: bypasscolor === "default" || bypasscolor === "inherit" ? "primary" : bypasscolor,
+            color: resolvedColor === "default" || resolvedColor === "inherit" ? "primary" : resolvedColor,
             fullWidth,
             onChange: handleChange,
             slotProps,
-            inputRef: ref,
+            inputRef: ref ?? inputRefProp,
             helperText: helperContent,
             error: hasError
           }
@@ -376,21 +389,52 @@ var LSSliderInput = ({
 };
 LSSliderInput.displayName = "LSSliderInput";
 
+// src/components/LSSwitch/LSSwitch.tsx
+import MatSwitch from "@mui/material/Switch";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var LSSwitch = forwardRef2(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx4(
+  MatSwitch,
+  {
+    sx: {
+      "& .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track": { backgroundColor: "var(--white, #ffffff)", opacity: 1 },
+      "& .MuiSwitch-switchBase": { color: "var(--primaryDark, #923553)" },
+      "& .MuiSwitch-switchBase.Mui-checked": { color: "var(--primary, #FF4076)" }
+    },
+    ...rest,
+    slotProps: {
+      ...slotProps,
+      input: {
+        ...slotProps?.input ?? {},
+        ref
+      }
+    }
+  }
+));
+LSSwitch.displayName = "LSSwitch";
+
 // src/components/LSSelect/LSSelect.tsx
 import FormControl2 from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import Select from "@mui/material/Select";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var LSSelect = ({
-  className = "",
-  style,
-  ...props
-}) => {
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var InfoIcon = () => /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx5(
+  "path",
+  {
+    d: "M7 0C3.1402 0 0 3.1402 0 7C0 10.8598 3.1402 14 7 14C10.8598 14 14 10.8598 14 7C14 3.1402 10.8598 0 7 0ZM7.7 11.2H6.3V9.8H7.7V11.2ZM8.3832 7.7805C8.246 7.8911 8.1137 7.9968 8.0087 8.1018C7.7231 8.3867 7.7007 8.6457 7.7 8.6569V8.75H6.3V8.6331C6.3 8.5505 6.3203 7.8092 7.0182 7.1113C7.1547 6.9748 7.3241 6.8362 7.5019 6.692C8.0157 6.2755 8.3531 5.9717 8.3531 5.5531C8.34497 5.19947 8.19875 4.86308 7.94574 4.61588C7.69273 4.36869 7.35303 4.23034 6.99931 4.23043C6.64559 4.23052 6.30595 4.36905 6.05307 4.61637C5.80019 4.8637 5.65415 5.20017 5.6462 5.5538H4.2462C4.2462 4.0355 5.4817 2.8 7 2.8C8.5183 2.8 9.7538 4.0355 9.7538 5.5538C9.7538 6.6717 8.9285 7.3388 8.3832 7.7805Z",
+    fill: "#CAC9D5"
+  }
+) });
+var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
   const {
     placeholder,
+    info,
+    inputRef: inputRefProp,
     displayEmpty: displayEmptyProp,
     renderValue: renderValueProp,
-    variant: _variant,
+    variant = "outlined",
     MenuProps,
     ...rest
   } = props;
@@ -401,7 +445,7 @@ var LSSelect = ({
   const value = rest.multiple === true ? Array.isArray(rest.value) ? rest.value : rest.value === void 0 || rest.value === null || rest.value === "" ? [] : [rest.value] : rest.value ?? "";
   const renderValue = renderValueProp ?? (placeholderText ? (selected) => {
     if (selected === "" || Array.isArray(selected) && selected.length === 0) {
-      return /* @__PURE__ */ jsx4("span", { style: { color: "var(--neutralLight3)" }, children: placeholderText });
+      return /* @__PURE__ */ jsx5("span", { style: { color: "var(--neutralLight3, var(--grey, #9392a1))" }, children: placeholderText });
     }
     return Array.isArray(selected) ? selected.join(", ") : selected;
   } : void 0);
@@ -412,21 +456,21 @@ var LSSelect = ({
       paper: {
         ...MenuProps?.slotProps?.paper ?? {},
         sx: {
-          background: "var(--neutralDark2) !important",
-          backgroundColor: "var(--neutralDark2)",
-          color: "var(--neutralLight1)",
-          border: "1px solid var(--neutralDark4)",
+          background: "var(--neutralDark2, var(--cardbackground, #211f45)) !important",
+          backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))",
+          color: "var(--neutralLight1, var(--white, #fff))",
+          border: "1px solid var(--neutralDark4, var(--cardborder, #393853))",
           borderRadius: "var(--radius, 1rem)",
           boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
           "& .MuiList-root": {
-            backgroundColor: "var(--neutralDark2)"
+            backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))"
           },
           "& .MuiListSubheader-root": {
-            backgroundColor: "var(--neutralDark1)",
-            color: "var(--neutralLight2)"
+            backgroundColor: "var(--neutralDark1, var(--darkerbg, #18162f))",
+            color: "var(--neutralLight2, var(--white2, #cac9d5))"
           },
           "& .MuiMenuItem-root": {
-            color: "var(--neutralLight1)"
+            color: "var(--neutralLight1, var(--white, #fff))"
           },
           ...MenuProps?.slotProps?.paper?.sx
         }
@@ -434,8 +478,8 @@ var LSSelect = ({
       list: {
         ...MenuProps?.slotProps?.list ?? {},
         sx: {
-          backgroundColor: "var(--neutralDark2)",
-          color: "var(--neutralLight1)",
+          backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))",
+          color: "var(--neutralLight1, var(--white, #fff))",
           ...MenuProps?.slotProps?.list?.sx
         }
       }
@@ -455,42 +499,50 @@ var LSSelect = ({
       size: rest.size,
       style,
       children: [
-        props.label && /* @__PURE__ */ jsx4(InputLabel, { shrink: true, id: labelId, children: props.label }),
-        /* @__PURE__ */ jsx4(
+        props.label && /* @__PURE__ */ jsxs2(InputLabel, { shrink: true, id: labelId, children: [
+          props.label,
+          info && /* @__PURE__ */ jsx5(Tooltip, { title: info, placement: "right", children: /* @__PURE__ */ jsx5("span", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: /* @__PURE__ */ jsx5(InfoIcon, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsx5(
           Select,
           {
             MenuProps: mergedMenuProps,
             className: "mui-ls-select",
-            variant: "outlined",
             labelId,
             label: props.label,
             displayEmpty,
             renderValue,
+            variant,
             ...rest,
             value,
+            inputRef: ref ?? inputRefProp,
             children: props.children
           }
         )
       ]
     }
   );
-};
+});
 LSSelect.displayName = "LSSelect";
 
+// src/components/LSSelect/index.ts
+import { default as default2 } from "@mui/material/MenuItem";
+import { default as default3 } from "@mui/material/ListSubheader";
+
 // src/components/LSCheckbox/LSCheckbox.tsx
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import { useController, useFormContext } from "react-hook-form";
 import classNames4 from "classnames";
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
-var LSCheckbox = forwardRef2(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
+var LSCheckbox = forwardRef4(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
   const CheckboxComponent = Checkbox;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     CheckboxComponent,
     {
       ...props,
-      checked,
+      checked: checked ?? false,
       className: classNames4("ls-checkbox", className, { "Mui-disabled": props.disabled }),
       ref,
       slotProps: {
@@ -515,8 +567,8 @@ function LSCheckboxField({
 }) {
   const formContext = useFormContext();
   const resolvedControl = control ?? formContext?.control;
-  if (!resolvedControl) return /* @__PURE__ */ jsx5(Fragment, {});
-  return /* @__PURE__ */ jsx5(
+  if (!resolvedControl) return /* @__PURE__ */ jsx6(Fragment, {});
+  return /* @__PURE__ */ jsx6(
     LSCheckboxFieldInner,
     {
       name,
@@ -539,13 +591,13 @@ function LSCheckboxFieldInner({
   checkboxProps
 }) {
   const { field } = useController({ name, control });
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     FormControlLabel,
     {
       className: classNames4("ls-checkbox-row", className),
       labelPlacement,
       disabled,
-      control: /* @__PURE__ */ jsx5(
+      control: /* @__PURE__ */ jsx6(
         LSCheckbox,
         {
           ...checkboxProps,
@@ -565,7 +617,7 @@ function LSCheckboxFieldInner({
 // src/components/LSColorPicker/LSColorPicker.tsx
 import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import GradientColorPicker from "react-best-gradient-color-picker";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_COLOR = "#ff4076";
 var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name, label, helperText, placeholder, hideGradientControls = false, usePopup = false, disabled = false }) => {
   const isPopupMode = usePopup === true;
@@ -603,7 +655,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
     if (!node) return void 0;
     const updateWidth = () => {
       const nextWidth = Math.max(node.clientWidth - 16, 220);
-      setPickerWidth(nextWidth);
+      setPickerWidth((prev) => prev === nextWidth ? prev : nextWidth);
     };
     updateWidth();
     const observer = new ResizeObserver(() => {
@@ -642,7 +694,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
         overflow: "visible"
       },
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           LSInput,
           {
             className: "ls-color-picker__input",
@@ -654,7 +706,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
             onBlur,
             placeholder,
             disabled,
-            endAdornment: /* @__PURE__ */ jsx6(
+            endAdornment: /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -667,12 +719,12 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
             )
           }
         ),
-        showPicker && /* @__PURE__ */ jsx6(
+        showPicker && /* @__PURE__ */ jsx7(
           "div",
           {
             className: isPopupMode ? "ls-color-picker__picker ls-color-picker__picker--popup" : "ls-color-picker__picker ls-color-picker__picker--inline",
             style: pickerContainerStyle,
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               GradientColorPicker,
               {
                 hidePresets: true,
@@ -721,8 +773,8 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
 };
 
 // src/components/LSDatePicker/LSDatePicker.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var toDateTimeLocalValue = (value) => {
   if (!value) return "";
   const date = new Date(value);
@@ -734,7 +786,7 @@ var fromDateTimeLocalValue = (value) => {
   if (!value) return "";
   return new Date(value).toISOString();
 };
-var LSDatePicker = forwardRef3(
+var LSDatePicker = forwardRef5(
   ({ value, onChange, onChangeStart, onChangeEnd, className, ...rest }, ref) => {
     const handleChange = (event) => {
       const nextValue = fromDateTimeLocalValue(event.target.value);
@@ -742,7 +794,7 @@ var LSDatePicker = forwardRef3(
       onChange?.(event, nextValue);
       onChangeEnd?.(event, nextValue);
     };
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       LSInput,
       {
         ...rest,
@@ -762,7 +814,7 @@ import { KeyboardArrowDown } from "@mui/icons-material";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField2 from "@mui/material/TextField";
 import { memo, startTransition, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var LSFontPicker = memo(function LSFontPicker2({
   value,
   onChange,
@@ -790,7 +842,7 @@ var LSFontPicker = memo(function LSFontPicker2({
     onChangeRef.current = onChange;
   }, [onLoadFonts, onChange]);
   useEffect3(() => {
-    setInputValue(currentValue);
+    setInputValue((prev) => prev === currentValue ? prev : currentValue);
   }, [currentValue]);
   useEffect3(() => {
     if (!currentValue || isAlertManager) return;
@@ -806,7 +858,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       onLoadFontsRef.current?.([nextValue]);
     });
   };
-  return /* @__PURE__ */ jsx8("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx9(
     AutocompleteComponent,
     {
       freeSolo: true,
@@ -816,7 +868,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       options: combinedFonts,
       value: currentValue,
       inputValue,
-      popupIcon: /* @__PURE__ */ jsx8(KeyboardArrowDown, {}),
+      popupIcon: /* @__PURE__ */ jsx9(KeyboardArrowDown, {}),
       isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
       onChange: (_event, newValue) => {
         handleValueChange(typeof newValue === "string" ? newValue : `${newValue ?? ""}`);
@@ -858,7 +910,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       noOptionsText: "No fonts found",
       renderOption: (props, option) => {
         const { key, ...optionProps } = props;
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx9(
           "li",
           {
             ...optionProps,
@@ -877,7 +929,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       },
       renderInput: (params) => {
         const { slotProps: paramsSlotProps = {}, ...restParams } = params;
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx9(
           TextFieldComponent,
           {
             ...restParams,
@@ -914,7 +966,7 @@ var LSFontPicker = memo(function LSFontPicker2({
 
 // src/components/LSMultiSelect/LSMultiSelect.tsx
 import { MenuItem } from "@mui/material";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var LSMultiSelect = ({
   options,
   placeholder = "Select...",
@@ -928,7 +980,7 @@ var LSMultiSelect = ({
     } = event;
     onChange(typeof value2 === "string" ? value2.split(",") : value2);
   };
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     LSSelect,
     {
       multiple: true,
@@ -939,10 +991,10 @@ var LSMultiSelect = ({
       onChange: handleChange,
       displayEmpty: true,
       renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "ls-multi-select-value", children: [
-        /* @__PURE__ */ jsx9("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map(
+        /* @__PURE__ */ jsx10("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map(
           (val) => options.find((opt) => opt.value === val)?.label ?? val
         ).join(", ") : placeholder }),
-        /* @__PURE__ */ jsx9("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
+        /* @__PURE__ */ jsx10("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
       ] }),
       MenuProps: {
         // The previous version of this also set `PaperProps` here — that
@@ -993,7 +1045,7 @@ var LSMultiSelect = ({
             }
           },
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               LSCheckbox,
               {
                 checked: (value ?? []).includes(option.value),
@@ -1001,7 +1053,7 @@ var LSMultiSelect = ({
                 disableRipple: true
               }
             ),
-            /* @__PURE__ */ jsx9("span", { children: option.label })
+            /* @__PURE__ */ jsx10("span", { children: option.label })
           ]
         },
         option.value
@@ -1015,18 +1067,18 @@ import FormControlLabel2 from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import classNames5 from "classnames";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var LSRadio = ({ className = "", ...props }) => {
-  return /* @__PURE__ */ jsx10(Radio, { ...props, className: classNames5("ls-radio", className) });
+  return /* @__PURE__ */ jsx11(Radio, { ...props, className: classNames5("ls-radio", className) });
 };
 var LSRadioGroup = ({ selections, className = "", optionClassName = "", row, ...props }) => {
-  return /* @__PURE__ */ jsx10(RadioGroup, { ...props, row, className: classNames5("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(RadioGroup, { ...props, row, className: classNames5("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx11(
     FormControlLabel2,
     {
       className: classNames5("ls-radio-row", optionClassName),
       value: selection.value,
       disabled: selection.disabled,
-      control: /* @__PURE__ */ jsx10(LSRadio, {}),
+      control: /* @__PURE__ */ jsx11(LSRadio, {}),
       label: selection.label
     },
     selection.value
@@ -1036,13 +1088,13 @@ LSRadioGroup.displayName = "LSRadioGroup";
 
 // src/components/LSTextField/LSTextField.tsx
 import TextField3 from "@mui/material/TextField";
-import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var LSTextField = forwardRef4(
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var LSTextField = forwardRef6(
   (props, ref) => {
     const { slotProps, ...rest } = props;
     const paramsInputLabel = slotProps?.inputLabel ?? {};
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       TextField3,
       {
         ...rest,
@@ -1070,26 +1122,232 @@ import InputAdornment2 from "@mui/material/InputAdornment";
 import Popover from "@mui/material/Popover";
 import Search from "@mui/icons-material/Search";
 import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip2 from "@mui/material/Tooltip";
 import {
-  Fragment as Fragment2,
+  Fragment as Fragment4,
   createContext,
-  forwardRef as forwardRef5,
+  forwardRef as forwardRef7,
   useCallback as useCallback2,
   useContext,
+  useEffect as useEffect5,
+  useMemo as useMemo4,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
+
+// src/components/LSVariableInputField/VariableHighlightOverlay.tsx
+import {
+  Fragment as Fragment2,
   useEffect as useEffect4,
+  useLayoutEffect,
   useMemo as useMemo3,
   useRef as useRef3,
   useState as useState4
 } from "react";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var TOKEN_RE = /\{\{[^{}]+\}\}/g;
+var COPIED_STYLE_PROPS = [
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "letterSpacing",
+  "wordSpacing",
+  "textTransform",
+  "textIndent",
+  "lineHeight",
+  "tabSize",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "direction"
+];
+var tokenClass = (type) => {
+  if (type === "func") return "ls-variable-highlight__token--function";
+  if (type === "system") return "ls-variable-highlight__token--system";
+  return "ls-variable-highlight__token--custom";
+};
+var parseSegments = (value, classify, describe) => {
+  const segments = [];
+  let last = 0;
+  let match;
+  TOKEN_RE.lastIndex = 0;
+  while ((match = TOKEN_RE.exec(value)) != null) {
+    if (match.index > last) {
+      segments.push({ text: value.slice(last, match.index), token: false });
+    }
+    const raw = match[0];
+    const base = raw.slice(2, -2).split("=")[0].trim();
+    segments.push({ text: raw, token: true, type: classify(base), desc: describe(base) });
+    last = match.index + raw.length;
+  }
+  if (last < value.length) {
+    segments.push({ text: value.slice(last), token: false });
+  }
+  return segments;
+};
+var VariableHighlightOverlay = ({
+  inputEl,
+  value,
+  multiline,
+  classify,
+  describe
+}) => {
+  const layerRef = useRef3(null);
+  const textColorRef = useRef3("");
+  const [tooltip, setTooltip] = useState4(null);
+  const segments = useMemo3(
+    () => parseSegments(value, classify, describe),
+    [value, classify, describe]
+  );
+  const hasTokens = useMemo3(() => segments.some((segment) => segment.token), [segments]);
+  useLayoutEffect(() => {
+    const layer = layerRef.current;
+    if (!inputEl || !layer || !hasTokens) {
+      return;
+    }
+    const sync = () => {
+      const computed = getComputedStyle(inputEl);
+      for (const prop of COPIED_STYLE_PROPS) {
+        layer.style[prop] = computed[prop];
+      }
+      const isTransparent = computed.color === "rgba(0, 0, 0, 0)" || computed.color === "transparent";
+      if (!isTransparent) {
+        textColorRef.current = computed.color;
+      }
+      layer.style.color = isTransparent ? textColorRef.current || computed.color : computed.color;
+      layer.style.whiteSpace = multiline ? "pre-wrap" : "pre";
+      layer.style.top = `${inputEl.offsetTop}px`;
+      layer.style.left = `${inputEl.offsetLeft}px`;
+      layer.style.width = `${inputEl.offsetWidth}px`;
+      layer.style.height = `${inputEl.offsetHeight}px`;
+      layer.scrollTop = inputEl.scrollTop;
+      layer.scrollLeft = inputEl.scrollLeft;
+    };
+    sync();
+    const onScroll = () => {
+      layer.scrollTop = inputEl.scrollTop;
+      layer.scrollLeft = inputEl.scrollLeft;
+    };
+    inputEl.addEventListener("scroll", onScroll);
+    const observer = new ResizeObserver(sync);
+    observer.observe(inputEl);
+    window.addEventListener("resize", sync);
+    return () => {
+      inputEl.removeEventListener("scroll", onScroll);
+      observer.disconnect();
+      window.removeEventListener("resize", sync);
+    };
+  }, [inputEl, multiline, hasTokens, segments]);
+  useLayoutEffect(() => {
+    if (!inputEl || !hasTokens) {
+      return;
+    }
+    const style = inputEl.style;
+    const prev = {
+      color: style.color,
+      caretColor: style.caretColor,
+      fill: style.webkitTextFillColor,
+      position: style.position,
+      zIndex: style.zIndex
+    };
+    const computed = getComputedStyle(inputEl);
+    if (computed.color !== "rgba(0, 0, 0, 0)" && computed.color !== "transparent") {
+      textColorRef.current = computed.color;
+    }
+    style.caretColor = computed.color;
+    style.color = "transparent";
+    style.webkitTextFillColor = "transparent";
+    if (computed.position === "static") {
+      style.position = "relative";
+    }
+    style.zIndex = "1";
+    return () => {
+      style.color = prev.color;
+      style.caretColor = prev.caretColor;
+      style.webkitTextFillColor = prev.fill;
+      style.position = prev.position;
+      style.zIndex = prev.zIndex;
+    };
+  }, [inputEl, hasTokens]);
+  useEffect4(() => {
+    if (!inputEl || !hasTokens) {
+      setTooltip(null);
+      return;
+    }
+    const onMove = (event) => {
+      const layer = layerRef.current;
+      if (!layer) {
+        return;
+      }
+      const spans = layer.querySelectorAll(".ls-variable-highlight__token");
+      for (const span of Array.from(spans)) {
+        const desc = span.getAttribute("data-desc");
+        if (!desc) {
+          continue;
+        }
+        for (const rect of Array.from(span.getClientRects())) {
+          if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {
+            setTooltip({ text: desc, top: rect.top, left: rect.left + rect.width / 2 });
+            return;
+          }
+        }
+      }
+      setTooltip(null);
+    };
+    const onLeave = () => setTooltip(null);
+    const el = inputEl;
+    el.addEventListener("mousemove", onMove);
+    el.addEventListener("mouseleave", onLeave);
+    return () => {
+      el.removeEventListener("mousemove", onMove);
+      el.removeEventListener("mouseleave", onLeave);
+    };
+  }, [inputEl, hasTokens, segments]);
+  if (!inputEl?.parentElement || !hasTokens) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    createPortal(
+      /* @__PURE__ */ jsx13("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map(
+        (segment, index) => segment.token ? /* @__PURE__ */ jsx13(
+          "span",
+          {
+            "data-desc": segment.desc || void 0,
+            className: `ls-variable-highlight__token ${tokenClass(segment.type ?? "custom")}`,
+            children: segment.text
+          },
+          index
+        ) : /* @__PURE__ */ jsx13(Fragment2, { children: segment.text }, index)
+      ) }),
+      inputEl.parentElement
+    ),
+    tooltip ? createPortal(
+      /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "ls-variable-highlight__tooltip",
+          style: { top: tooltip.top, left: tooltip.left },
+          children: tooltip.text
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+};
+
+// src/components/LSVariableInputField/LSVariableInputField.tsx
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 import { createElement } from "react";
 var LSVariableInputContext = createContext({});
 var LSVariableInputProvider = ({
   children,
   value
 }) => {
-  return /* @__PURE__ */ jsx12(LSVariableInputContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx14(LSVariableInputContext.Provider, { value, children });
 };
 var DEFAULT_FUNCTION_VARIABLES = [
   "sum_variables",
@@ -1308,7 +1566,7 @@ var getVariableColorClass = (variableType, isSuggested) => {
   return "ls-variable-token--custom";
 };
 var CHILD_VARIABLE_COLOR_CLASS = "ls-variable-token--child";
-var LSVariableInputField = forwardRef5((props, ref) => {
+var LSVariableInputField = forwardRef7((props, ref) => {
   const context = useContext(LSVariableInputContext);
   const {
     name,
@@ -1347,6 +1605,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     $renderOption,
     allowedVariableOrigin,
     systemVariables: systemVariablesProp,
+    variableExamples: variableExamplesProp,
     functionVariables: functionVariablesProp,
     translate,
     onVariableTranslationsNeeded,
@@ -1355,50 +1614,75 @@ var LSVariableInputField = forwardRef5((props, ref) => {
   } = props;
   const t = translate ?? context.translate ?? defaultTranslate;
   const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
-  const variableRecords = useMemo3(
+  const variableExamples = variableExamplesProp ?? context.variableExamples ?? {};
+  const variableRecords = useMemo4(
     () => normalizeVariableRecords(rawSystemVariables),
     [rawSystemVariables]
   );
-  const functionVariables = useMemo3(
+  const functionVariables = useMemo4(
     () => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES,
     [context.functionVariables, functionVariablesProp]
   );
   const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
   const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
   const translationKeyExists = translationKeyExistsProp ?? context.translationKeyExists;
-  const containerRef = useRef3(null);
-  const variableId = useRef3(`variable-input-${name ?? "field"}`);
-  const [showVariables, setShowVariables] = useState4(false);
-  const [searchQuery, setSearchQuery] = useState4("");
-  const functionVariableSet = useMemo3(
+  const containerRef = useRef4(null);
+  const variableId = useRef4(`variable-input-${name ?? "field"}`);
+  const [showVariables, setShowVariables] = useState5(false);
+  const [searchQuery, setSearchQuery] = useState5("");
+  const functionVariableSet = useMemo4(
     () => new Set(functionVariables),
     [functionVariables]
   );
-  const allowedVariableDefinitions = useMemo3(
+  const [inputEl, setInputEl] = useState5(null);
+  const mergedInputRef = useCallback2(
+    (node) => {
+      setInputEl(node ?? null);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  const currentVariableValue = useMemo4(() => {
+    if (typeof value !== "string") return null;
+    const match = value.trim().match(/^\{\{([^{}=]+)\}\}$/);
+    if (!match) return null;
+    const key = match[1].trim();
+    if (functionVariableSet.has(key)) return null;
+    const record = variableRecords[key];
+    if (!record || record.isFunction) return null;
+    const { displayValue, fullValue } = getVariableValueDisplay(record.value);
+    if (displayValue === "" || displayValue == null) return null;
+    return { displayValue, fullValue };
+  }, [value, variableRecords, functionVariableSet]);
+  const allowedVariableDefinitions = useMemo4(
     () => normalizeAllowedDefinitions(allowedVariables),
     [allowedVariables]
   );
-  const allowedVariableDefinitionLookup = useMemo3(() => {
+  const allowedVariableDefinitionLookup = useMemo4(() => {
     const lookup = /* @__PURE__ */ new Map();
     allowedVariableDefinitions.forEach(
       (definition) => lookup.set(definition.name, definition)
     );
     return lookup;
   }, [allowedVariableDefinitions]);
-  const allowedVariableNames = useMemo3(
+  const allowedVariableNames = useMemo4(
     () => allowedVariableDefinitions.map((definition) => definition.name),
     [allowedVariableDefinitions]
   );
-  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableDefinitions);
-  const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
-  const [expandedPaths, setExpandedPaths] = useState4(
+  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState5(allowedVariableDefinitions);
+  const [filteredSystemVariables, setFilteredSystemVariables] = useState5([]);
+  const [expandedPaths, setExpandedPaths] = useState5(
     () => /* @__PURE__ */ new Set()
   );
-  const [autoExpandPaths, setAutoExpandPaths] = useState4(
+  const [autoExpandPaths, setAutoExpandPaths] = useState5(
     () => /* @__PURE__ */ new Set()
   );
   const shouldRenderPicker = !hideVariables && showVariables;
-  const systemVariableValueTrees = useMemo3(() => {
+  const systemVariableValueTrees = useMemo4(() => {
     const map = /* @__PURE__ */ new Map();
     if (!shouldRenderPicker) return map;
     Object.values(variableRecords).forEach((variable) => {
@@ -1408,7 +1692,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     });
     return map;
   }, [shouldRenderPicker, variableRecords]);
-  const allowedExampleTrees = useMemo3(() => {
+  const allowedExampleTrees = useMemo4(() => {
     const map = /* @__PURE__ */ new Map();
     if (!shouldRenderPicker) return map;
     allowedVariableDefinitions.forEach((definition) => {
@@ -1418,7 +1702,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     });
     return map;
   }, [allowedVariableDefinitions, shouldRenderPicker]);
-  useEffect4(() => {
+  useEffect5(() => {
     requestTranslations?.();
   }, [requestTranslations]);
   const isPathExpanded = useCallback2(
@@ -1485,7 +1769,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     },
     [namespaceHas, t]
   );
-  const knownOrigins = useMemo3(() => {
+  const knownOrigins = useMemo4(() => {
     return Array.from(
       new Set(
         Object.values(variableRecords).map(
@@ -1632,7 +1916,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     },
     [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!shouldRenderPicker) {
       return;
     }
@@ -1772,7 +2056,23 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     onChange?.(currentValue ? `${currentValue}${newValue}` : newValue);
   };
   const insertVariable = (variable) => {
-    appendValue(`{{${variable}}}`);
+    const token = `{{${variable}}}`;
+    const el = inputEl;
+    if (el && typeof value === "string" && el.selectionStart != null) {
+      const start = el.selectionStart;
+      const end = el.selectionEnd ?? start;
+      onChange?.(`${value.slice(0, start)}${token}${value.slice(end)}`);
+      const caret = start + token.length;
+      requestAnimationFrame(() => {
+        try {
+          el.focus();
+          el.setSelectionRange(caret, caret);
+        } catch {
+        }
+      });
+    } else {
+      appendValue(token);
+    }
     setShowVariables(false);
   };
   const handleFilterOptions = (options, params) => {
@@ -1780,13 +2080,13 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     afterFilter?.(filtered);
     return filtered;
   };
-  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5(
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs6(
     "div",
     {
       className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
       children: [
-        /* @__PURE__ */ jsx12("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
-        variableType === "func" && /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
+        variableType === "func" && /* @__PURE__ */ jsx14(
           "span",
           {
             className: "ls-variable-token__badge",
@@ -1797,7 +2097,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
       ]
     }
   );
-  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx12(
+  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx14(
     "button",
     {
       type: "button",
@@ -1808,15 +2108,15 @@ var LSVariableInputField = forwardRef5((props, ref) => {
       className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
       "aria-label": expanded ? "Collapse" : "Expand",
       "aria-expanded": expanded,
-      children: /* @__PURE__ */ jsx12(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
+      children: /* @__PURE__ */ jsx14(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
     }
   );
-  const renderExpandSpacer = () => /* @__PURE__ */ jsx12("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
+  const renderExpandSpacer = () => /* @__PURE__ */ jsx14("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
   const getVariableValuePreview = (variableValue) => {
     const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
     return { displayValue, fullValue };
   };
-  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx12(
+  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx14(
     "input",
     {
       className: "ls-variable-picker__value-input",
@@ -1833,8 +2133,8 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     const fullToken = `${rootToken}.${node.relativePath}`;
     const expanded = node.isExpandable && isPathExpanded(fullToken);
     const { displayValue, fullValue } = getVariableValuePreview(node.value);
-    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      /* @__PURE__ */ jsxs6(
         "div",
         {
           className: "ls-variable-picker__row ls-variable-picker__row--child",
@@ -1843,31 +2143,57 @@ var LSVariableInputField = forwardRef5((props, ref) => {
             else insertVariable(fullToken);
           },
           children: [
-            /* @__PURE__ */ jsxs5(
+            /* @__PURE__ */ jsxs6(
               "div",
               {
                 className: "ls-variable-picker__token-cell",
                 style: { paddingLeft: `${node.depth * 1.25}rem` },
                 children: [
                   node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx14(
                     "div",
                     {
                       className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
-                      children: /* @__PURE__ */ jsx12("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
+                      children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__description", children: node.displayKey }),
-            /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
+            /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: node.displayKey }),
+            /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
           ]
         }
       ),
       expanded && renderValueChildRows(rootToken, node.children)
     ] }, fullToken);
   });
+  const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
+    examples.map((example) => /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "ls-variable-picker__row ls-variable-picker__row--child",
+        onClick: () => insertVariable(example.snippet),
+        children: [
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: "ls-variable-picker__token-cell",
+              style: { paddingLeft: "1.25rem" },
+              children: [
+                renderExpandSpacer(),
+                /* @__PURE__ */ jsx14("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: example.label }),
+          /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value" })
+        ]
+      },
+      example.snippet
+    ))
+  ] });
   const toOptionLabelString = (input) => {
     if (typeof input === "string") return input;
     if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint")
@@ -1919,7 +2245,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
           isSelected ? "ls-variable-option--selected" : ""
         ].filter(Boolean).join(" ")
       },
-      thumb ? /* @__PURE__ */ jsx12(
+      thumb ? /* @__PURE__ */ jsx14(
         "img",
         {
           src: thumb,
@@ -1927,24 +2253,24 @@ var LSVariableInputField = forwardRef5((props, ref) => {
           alt: ""
         }
       ) : null,
-      /* @__PURE__ */ jsxs5("div", { className: "ls-variable-option__body", children: [
-        /* @__PURE__ */ jsx12("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
-        helperText ? /* @__PURE__ */ jsx12("div", { className: "ls-variable-option__helper", children: helperText }) : null
+      /* @__PURE__ */ jsxs6("div", { className: "ls-variable-option__body", children: [
+        /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
+        helperText ? /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__helper", children: helperText }) : null
       ] })
     );
   };
   const showSuggestedSection = shouldRenderPicker && allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
-  const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
-      /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__intro-text", children: t(
+  const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__intro", children: [
+      /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__intro-text", children: t(
         "overlay-variables.variables-description",
         "Use variables that will automatically be replaced before sending out the text"
       ) }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         LSInput,
         {
           autoFocus: true,
-          startAdornment: /* @__PURE__ */ jsx12(Search, { style: { color: "#fff", width: 20, height: 20 } }),
+          startAdornment: /* @__PURE__ */ jsx14(Search, { style: { color: "#fff", width: 20, height: 20 } }),
           placeholder: t("common.search", "Search"),
           value: searchQuery,
           onChange: (e) => setSearchQuery(e.target.value),
@@ -1952,14 +2278,14 @@ var LSVariableInputField = forwardRef5((props, ref) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__header", children: [
-      /* @__PURE__ */ jsx12("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
-      /* @__PURE__ */ jsx12("div", { children: t("commands.description", "Description") }),
-      /* @__PURE__ */ jsx12("div", { children: t("common.value", "Value") })
+    /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__header", children: [
+      /* @__PURE__ */ jsx14("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
+      /* @__PURE__ */ jsx14("div", { children: t("commands.description", "Description") }),
+      /* @__PURE__ */ jsx14("div", { children: t("common.value", "Value") })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__list", children: [
-      showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "ls-variable-picker__field", children: [
-        /* @__PURE__ */ jsx12("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
+    /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__list", children: [
+      showSuggestedSection && /* @__PURE__ */ jsxs6("fieldset", { className: "ls-variable-picker__field", children: [
+        /* @__PURE__ */ jsx14("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
         filteredAllowedVariables.map((definition, idx) => {
           const variableType = getAllowedVariableVisualType(
             definition.name
@@ -1972,8 +2298,8 @@ var LSVariableInputField = forwardRef5((props, ref) => {
           const expanded = expandable && isPathExpanded(definition.name);
           const isLast = idx === filteredAllowedVariables.length - 1;
           const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
-          return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+            /* @__PURE__ */ jsxs6(
               "div",
               {
                 className: rowCls,
@@ -1983,12 +2309,12 @@ var LSVariableInputField = forwardRef5((props, ref) => {
                   else insertVariable(definition.name);
                 },
                 children: [
-                  /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
+                  /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__token-cell", children: [
                     expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
                     renderVariableToken(definition.name, variableType, true)
                   ] }),
-                  /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
+                  /* @__PURE__ */ jsx14(
                     "div",
                     {
                       className: "ls-variable-picker__value",
@@ -2009,11 +2335,12 @@ var LSVariableInputField = forwardRef5((props, ref) => {
           variable.value
         );
         const rootToken = variable.example ?? variable.name;
+        const examples = variableExamples[variable.name] ?? [];
         const tree = systemVariableValueTrees.get(variable.name);
-        const expandable = !!tree && tree.length > 0;
+        const expandable = examples.length > 0 || !!tree && tree.length > 0;
         const expanded = expandable && isPathExpanded(rootToken);
-        return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-          /* @__PURE__ */ jsxs5(
+        return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+          /* @__PURE__ */ jsxs6(
             "div",
             {
               className: "ls-variable-picker__row",
@@ -2022,21 +2349,21 @@ var LSVariableInputField = forwardRef5((props, ref) => {
                 else insertVariable(rootToken);
               },
               children: [
-                /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
+                /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__token-cell", children: [
                   expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
                   renderVariableToken(variable.name, variableType)
                 ] }),
-                /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
-                /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
+                /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
+                /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
               ]
             }
           ),
-          expanded && tree && renderValueChildRows(rootToken, tree)
+          expanded && (examples.length > 0 ? renderExampleChildRows(variable, examples) : tree && renderValueChildRows(rootToken, tree))
         ] }, variable.name);
       })
     ] })
   ] }) : null;
-  const textField = (params = {}) => /* @__PURE__ */ jsx12(
+  const textField = (params = {}) => /* @__PURE__ */ jsx14(
     VariableInputTextField,
     {
       t,
@@ -2059,11 +2386,12 @@ var LSVariableInputField = forwardRef5((props, ref) => {
       inputProps,
       allowedVariables,
       showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
-      ref
+      currentValue: currentVariableValue,
+      ref: mergedInputRef
     }
   );
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsx14(
       Popover,
       {
         anchorEl: containerRef.current,
@@ -2089,7 +2417,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
         children: pickerBody
       }
     ),
-    isAutoComplete ? /* @__PURE__ */ jsx12(
+    isAutoComplete ? /* @__PURE__ */ jsx14(
       Autocomplete2,
       {
         disableClearable: true,
@@ -2185,11 +2513,21 @@ var LSVariableInputField = forwardRef5((props, ref) => {
         onClose: onPopupClose,
         renderInput: (params) => textField(params)
       }
-    ) : textField()
+    ) : textField(),
+    !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx14(
+      VariableHighlightOverlay,
+      {
+        inputEl,
+        value,
+        multiline,
+        classify: getAllowedVariableVisualType,
+        describe: getAllowedVariableDescription
+      }
+    ) : null
   ] });
 });
 LSVariableInputField.displayName = "LSVariableInputField";
-var VariableInputTextField = forwardRef5(
+var VariableInputTextField = forwardRef7(
   ({
     t,
     id,
@@ -2209,15 +2547,16 @@ var VariableInputTextField = forwardRef5(
     clickedVariableIcon,
     params = {},
     containerRef,
-    showVariableIcon
+    showVariableIcon,
+    currentValue
   }, ref) => {
     const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
     const paramsSlotInput = params?.slotProps?.input ?? {};
     const explicitStartAdornment = inputProps?.startAdornment;
-    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx12(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
+    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx14(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
     const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
     const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx14(
       LSTextField,
       {
         id,
@@ -2245,9 +2584,25 @@ var VariableInputTextField = forwardRef5(
             ...inputPropsSlotInput,
             ...paramsSlotInput,
             startAdornment,
-            endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            endAdornment: /* @__PURE__ */ jsxs6(Fragment5, { children: [
               endAdornment ?? null,
-              showVariableIcon ? /* @__PURE__ */ jsx12(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx12(
+              currentValue ? /* @__PURE__ */ jsx14(Tooltip2, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx14(
+                InputAdornment2,
+                {
+                  position: "end",
+                  className: "ls-variable-input-current-value",
+                  style: {
+                    maxWidth: 120,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    opacity: 0.6,
+                    fontSize: "0.75em"
+                  },
+                  children: currentValue.displayValue
+                }
+              ) }) : null,
+              showVariableIcon ? /* @__PURE__ */ jsx14(Tooltip2, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx14(
                 InputAdornment2,
                 {
                   position: "end",
@@ -2266,7 +2621,1733 @@ var VariableInputTextField = forwardRef5(
   }
 );
 VariableInputTextField.displayName = "VariableInputTextField";
+
+// src/components/ChatMessageItem/ChatMessageItem.tsx
+import { useState as useState6 } from "react";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Menu from "@mui/material/Menu";
+import MenuItem2 from "@mui/material/MenuItem";
+import Tooltip3 from "@mui/material/Tooltip";
+import classNames7 from "classnames";
+
+// src/components/PlatformIcon/PlatformIcon.tsx
+import classNames6 from "classnames";
+
+// src/assets/platforms/discord.svg
+var discord_default = 'data:image/svg+xml,<svg width="106" height="84" viewBox="0 0 106 84" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M87.6564 10.3044C81.1722 7.33742 74.33 5.21982 67.3004 4.00432C67.2367 3.99362 67.1713 4.00292 67.1131 4.03082C67.0549 4.05872 67.0068 4.10392 66.9754 4.16012C66.0941 5.71802 65.1192 7.75572 64.4379 9.35102C56.8605 8.20442 49.153 8.20442 41.5757 9.35102C40.8157 7.57392 39.956 5.84082 39.0007 4.16012C38.9686 4.10452 38.9204 4.05982 38.8624 4.03202C38.8044 4.00422 38.7393 3.99452 38.6757 4.00432C31.6445 5.21322 24.8008 7.33202 18.3196 10.3044C18.2642 10.3255 18.2178 10.3652 18.1884 10.4166C5.22598 29.7281 1.66978 48.5661 3.41358 67.1673C3.41978 67.2545 3.47608 67.3418 3.54478 67.3978C11.093 72.9727 19.5358 77.229 28.5133 79.986C28.5767 80.005 28.6448 80.005 28.7077 79.983C28.7707 79.962 28.8252 79.921 28.8633 79.867C30.7883 77.25 32.5007 74.4893 33.9757 71.5854C34.0065 71.5256 34.017 71.4575 34.0057 71.3913C33.9945 71.325 33.962 71.2641 33.9132 71.2178C33.8809 71.1874 33.8426 71.164 33.8007 71.1492C31.108 70.1174 28.5001 68.8777 26.0008 67.4415C25.931 67.402 25.8791 67.3373 25.8558 67.2607C25.8325 67.1842 25.8397 67.1016 25.8758 67.0302C25.8971 66.9838 25.9292 66.9432 25.9696 66.9118C26.4946 66.5192 27.0196 66.1079 27.5195 65.6966C27.5637 65.6612 27.6167 65.6385 27.6729 65.6308C27.729 65.6231 27.7862 65.6308 27.8383 65.653C44.2069 73.1059 61.9254 73.1059 78.094 65.653C78.148 65.6297 78.2074 65.6214 78.2657 65.6291C78.324 65.6368 78.3792 65.6601 78.4253 65.6966C78.9253 66.1079 79.4503 66.5192 79.9753 66.9118C80.0178 66.9428 80.052 66.9838 80.0747 67.0312C80.0975 67.0786 80.1081 67.1308 80.1056 67.1833C80.1031 67.2358 80.0876 67.2868 80.0605 67.3319C80.0334 67.3769 79.9955 67.4146 79.9503 67.4415C77.4566 68.8909 74.8454 70.1291 72.1441 71.143C72.101 71.1585 72.0619 71.1834 72.0295 71.2157C71.9971 71.248 71.9722 71.287 71.9566 71.3299C71.9421 71.3716 71.9363 71.4157 71.9396 71.4596C71.9428 71.5035 71.955 71.5464 71.9753 71.5854C73.4753 74.4831 75.194 77.25 77.0815 79.867C77.1197 79.921 77.1741 79.962 77.2371 79.983C77.3 80.005 77.3681 80.005 77.4315 79.986C86.424 77.238 94.881 72.9807 102.438 67.3978C102.475 67.3717 102.507 67.3374 102.53 67.2975C102.552 67.2576 102.566 67.2131 102.569 67.1673C104.656 45.6622 99.075 26.98 87.7814 10.4228C87.77 10.3955 87.753 10.3708 87.7315 10.3504C87.71 10.33 87.6844 10.3144 87.6564 10.3044ZM36.4195 55.8383C31.4883 55.8383 27.432 51.3267 27.432 45.7931C27.432 40.2532 31.4133 35.7416 36.4195 35.7416C41.4632 35.7416 45.4819 40.2906 45.4069 45.7931C45.4069 51.3267 41.4257 55.8383 36.4195 55.8383ZM69.6441 55.8383C64.7192 55.8383 60.6567 51.3267 60.6567 45.7931C60.6567 40.2532 64.6379 35.7416 69.6441 35.7416C74.6878 35.7416 78.7128 40.2906 78.6315 45.7931C78.6315 51.3267 74.6878 55.8383 69.6441 55.8383Z" fill="%235C65EB"/>%0A</svg>%0A';
+
+// src/assets/platforms/facebook.svg
+var facebook_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 fill-rule="evenodd" clip-rule="evenodd" d="M15.725 22V14.255H18.325L18.714 11.237H15.724V9.31C15.724 8.436 15.967 7.83999 17.221 7.83999H18.819V5.14C18.0451 5.05764 17.2673 5.01758 16.489 5.02C14.185 5.02 12.608 6.427 12.608 9.01001V11.237H9.99998V14.255H12.607V22H3.104C2.494 22 2 21.506 2 20.896V3.104C2 2.494 2.494 2 3.104 2H20.896C21.506 2 22 2.494 22 3.104V20.896C22 21.506 21.506 22 20.896 22H15.725Z" fill="%23087BEA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M15.725 22V14.255H18.325L18.714 11.237H15.724V9.31C15.724 8.436 15.967 7.83999 17.221 7.83999H18.819V5.14C18.0451 5.05764 17.2673 5.01758 16.489 5.02C14.185 5.02 12.608 6.427 12.608 9.01001V11.237H9.99998V14.255H12.607V22H3.104C2.494 22 2 21.506 2 20.896V3.104C2 2.494 2.494 2 3.104 2H20.896C21.506 2 22 2.494 22 3.104V20.896C22 21.506 21.506 22 20.896 22H15.725Z" fill="url(%23paint0_linear_2516_9002)"/>%0A<defs>%0A<linearGradient id="paint0_linear_2516_9002" x1="12" y1="21.4156" x2="12" y2="2" gradientUnits="userSpaceOnUse">%0A<stop stop-color="%230062E0"/>%0A<stop offset="1" stop-color="%2319AFFF"/>%0A</linearGradient>%0A</defs>%0A</svg>%0A';
+
+// src/assets/platforms/kick.svg
+var kick_default = 'data:image/svg+xml,<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4H9.62501V8H11.5V6H13.375V4H19V10H17.125V12H15.2501V14H17.125V16H19V22H13.375V20H11.5V18H9.62501V22H4V4Z" fill="%2342FD0A"/>%0A</svg>%0A';
+
+// src/assets/platforms/lumiaLogo.svg
+var lumiaLogo_default = 'data:image/svg+xml,<svg width="310" height="310" viewBox="0 0 310 310" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M126.553 283.309C127.43 287.957 131.415 291.316 136.051 291.316H169.708C175.05 291.316 179.381 286.894 179.381 281.44C179.381 275.986 175.05 271.564 169.708 271.564H144.039L143.398 268.171H175.938C181.167 268.171 185.449 263.929 185.607 258.593C186.654 223.171 200.493 199.947 215.267 176.455C215.835 175.551 216.406 174.646 216.978 173.739C231.175 151.218 246.29 127.243 246.29 93.0565C246.29 62.8306 234.545 39.9721 216.68 24.8443C199.061 9.92486 176.088 3 153.931 3C111.466 3 64 34.5184 64 94.0485C64 125.271 77.7676 152.459 90.9936 175.734C93.021 179.302 95.0189 182.748 96.9655 186.105C101.552 194.017 105.855 201.438 109.59 208.807C114.864 219.212 118.437 228.471 119.591 237.069C120.254 242.013 124.426 245.675 129.313 245.603C134.2 245.532 138.268 241.75 138.792 236.788C139.637 228.792 143.857 219.28 150.879 208.043C156.859 198.472 164.275 188.55 172.113 178.062C173.39 176.353 174.678 174.629 175.974 172.889C185.05 160.696 194.398 147.799 201.456 134.841C208.481 121.94 213.766 108.051 213.766 93.8831C213.766 76.7114 207.388 62.1228 196.289 51.9119C185.292 41.7953 170.319 36.5602 153.931 36.5602C121.603 36.5602 96.5239 63.0978 96.5239 93.8831C96.5239 102.894 98.2899 116.42 103.002 128.055C107.497 139.153 116.502 152.529 132.734 152.529C140.658 152.529 147.148 149.581 151.972 144.611C156.532 139.912 159.099 133.942 160.625 128.478C163.474 118.279 163.454 106.831 163.444 100.801C163.444 100.461 163.443 100.139 163.443 99.8347C163.443 94.3804 159.112 89.9589 153.77 89.9589C148.427 89.9589 144.096 94.3804 144.096 99.8347L144.096 100.278C144.097 106.623 144.099 115.617 142.02 123.061C140.977 126.793 139.63 129.264 138.229 130.709C137.091 131.881 135.571 132.777 132.734 132.777C128.902 132.777 124.639 129.786 120.881 120.508C117.341 111.767 115.871 100.908 115.871 93.8831C115.871 74.0802 132.215 56.3118 153.931 56.3118C166.346 56.3118 176.454 60.252 183.337 66.5848C190.118 72.8234 194.419 81.9583 194.419 93.8831C194.419 103.191 190.885 113.604 184.547 125.243C178.239 136.824 169.677 148.705 160.57 160.938C159.324 162.612 158.067 164.294 156.804 165.983C149.006 176.413 141.025 187.088 134.568 197.42C132.864 200.148 131.222 202.918 129.687 205.719C128.753 203.708 127.777 201.712 126.773 199.73C122.771 191.834 118.024 183.646 113.312 175.518C111.429 172.269 109.551 169.03 107.728 165.822C94.5791 142.683 83.3469 119.531 83.3469 94.0485C83.3469 47.7729 119.698 22.7516 153.931 22.7516C172.389 22.7516 190.759 28.5564 204.329 40.047C217.653 51.3293 226.943 68.5611 226.943 93.0565C226.943 121.353 214.634 140.915 199.947 164.257C199.628 164.764 199.308 165.273 198.986 165.784C185.181 187.737 170.104 212.49 166.842 248.419H131.683C128.796 248.419 126.061 249.735 124.223 252.007C122.386 254.279 121.638 257.27 122.184 260.164L126.553 283.309Z" fill="%23FF4469"/>%0A<path d="M167.2 295.575C167.2 304.617 160.299 306.817 151.787 306.817C143.275 306.817 136.375 304.617 136.375 295.575H167.2Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M185.804 111.539C186.466 109.832 185.647 107.901 183.975 107.226L172.394 102.546C170.722 101.87 168.83 102.706 168.169 104.413C167.507 106.119 168.326 108.051 169.998 108.726L181.579 113.406C183.251 114.082 185.142 113.246 185.804 111.539Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M123.949 113.947C124.697 115.616 126.628 116.35 128.263 115.587L139.59 110.297C141.225 109.533 141.944 107.561 141.196 105.892C140.448 104.222 138.516 103.488 136.881 104.252L125.555 109.542C123.92 110.306 123.201 112.278 123.949 113.947Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M141.106 94.8617C141.679 93.122 140.762 91.2371 139.058 90.6518L127.254 86.5969C125.55 86.0115 123.703 86.9473 123.13 88.687C122.557 90.4268 123.473 92.3116 125.177 92.897L136.982 96.9519C138.686 97.5372 140.532 96.6014 141.106 94.8617Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M147.751 87.1376C149.438 86.5012 150.3 84.5896 149.676 82.8679L145.355 70.9337C144.732 69.212 142.86 68.3322 141.173 68.9686C139.487 69.605 138.625 71.5166 139.248 73.2383L143.569 85.1725C144.193 86.8942 146.065 87.774 147.751 87.1376Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M159.968 86.4852C161.656 87.1168 163.526 86.2316 164.145 84.5081L168.433 72.5617C169.052 70.8382 168.185 68.9291 166.496 68.2975C164.808 67.666 162.938 68.5511 162.32 70.2746L158.032 82.221C157.413 83.9445 158.28 85.8537 159.968 86.4852Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M167.942 93.9614C168.717 95.6179 170.66 96.3197 172.283 95.5289L183.524 90.0507C185.146 89.26 185.834 87.2761 185.059 85.6196C184.285 83.9631 182.341 83.2613 180.719 84.052L169.478 89.5302C167.855 90.321 167.168 92.3049 167.942 93.9614Z" fill="%23FF4469"/>%0A</svg>%0A';
+
+// src/assets/platforms/tiktok.svg
+var tiktok_default = 'data:image/svg+xml,<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M47.163 27.1414C50.7816 29.7268 55.2145 31.2479 60.0023 31.2479V22.0395C59.0962 22.0397 58.1924 21.9452 57.306 21.7575V29.0059C52.5185 29.0059 48.0862 27.4847 44.4666 24.8995V43.6913C44.4666 53.0918 36.8421 60.712 27.4372 60.712C23.9281 60.712 20.6665 59.6516 17.957 57.8331C21.0494 60.9934 25.3619 62.9538 30.133 62.9538C39.5384 62.9538 47.1633 55.3337 47.1633 45.9327V27.1414H47.163V27.1414ZM50.4892 17.8512C48.6399 15.8319 47.4257 13.2223 47.163 10.3372V9.15283H44.6078C45.251 12.8197 47.4447 15.9525 50.4892 17.8512ZM23.9056 50.6194C22.8724 49.2653 22.314 47.6089 22.3165 45.9058C22.3165 41.6063 25.8039 38.1203 30.1065 38.1203C30.9083 38.1201 31.7054 38.2428 32.4695 38.4851V29.0709C31.5765 28.9486 30.6752 28.8966 29.7743 28.9157V36.2433C29.0096 36.0009 28.2122 35.8778 27.4101 35.8786C23.1076 35.8786 19.6203 39.3643 19.6203 43.6643C19.6203 46.7048 21.3635 49.3371 23.9056 50.6194Z" fill="%23FF004F"/>%0A<path d="M44.4647 24.8993C48.0843 27.4845 52.5166 29.0057 57.3041 29.0057V21.7573C54.6318 21.1884 52.266 19.7926 50.4873 17.8512C47.4427 15.9523 45.2491 12.8195 44.6059 9.15283H37.8942V45.9323C37.879 50.2201 34.3975 53.6919 30.1042 53.6919C27.5742 53.6919 25.3266 52.4866 23.9031 50.6194C21.3612 49.3371 19.6181 46.7046 19.6181 43.6645C19.6181 39.3649 23.1053 35.8788 27.4079 35.8788C28.2322 35.8788 29.0267 36.0071 29.772 36.2435V28.9159C20.5324 29.1067 13.1016 36.6524 13.1016 45.9325C13.1016 50.5651 14.952 54.7648 17.9553 57.8333C20.6648 59.6516 23.9264 60.7122 27.4355 60.7122C36.8406 60.7122 44.4649 53.0916 44.4649 43.6913V24.8993H44.4647Z" fill="white"/>%0A<path d="M57.3049 21.7573V19.7974C54.8951 19.8011 52.5327 19.1265 50.4882 17.851C52.298 19.8315 54.6813 21.197 57.3049 21.7573ZM44.6067 9.1528C44.5454 8.80237 44.4983 8.44962 44.4656 8.09553V6.91113H35.1985V43.691C35.1837 47.9782 31.7024 51.45 27.4087 51.45C26.1481 51.45 24.958 51.151 23.904 50.6195C25.3274 52.4865 27.5751 53.6917 30.105 53.6917C34.398 53.6917 37.88 50.2202 37.895 45.9325V9.1528H44.6067ZM29.7733 28.9158V26.8294C28.9989 26.7236 28.2182 26.6705 27.4366 26.6709C18.0308 26.6707 10.4062 34.2912 10.4062 43.691C10.4062 49.5842 13.4028 54.7778 17.9564 57.8329C14.9531 54.7646 13.1026 50.5647 13.1026 45.9323C13.1026 36.6523 20.5333 29.1066 29.7733 28.9158Z" fill="%2300F2EA"/>%0A</svg>%0A';
+
+// src/assets/platforms/twitch.svg
+var twitch_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="M4.875 4L3 7.125V21.5H8V24H10.5L13 21.5H16.125L21.75 15.875V4H4.875ZM19.25 14.625L16.125 17.75H13L10.5 20.25V17.75H6.75V6.5H19.25V14.625Z" fill="%23874BF6"/>%0A<path d="M14.875 9H16.75V14H14.875V9Z" fill="%23874BF6"/>%0A<path d="M11.125 9H13V14H11.125V9Z" fill="%23874BF6"/>%0A</svg>%0A';
+
+// src/assets/platforms/twitter.svg
+var twitter_default = 'data:image/svg+xml,<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M387.014 83.988C376.599 99.48 363.821 112.686 348.68 123.607C348.83 126.535 348.905 129.846 348.905 133.537C348.905 154.05 345.914 174.587 339.933 195.149C333.952 215.711 324.816 235.392 312.524 254.193C300.233 272.994 285.591 289.65 268.6 304.161C251.609 318.672 231.185 330.243 207.327 338.872C183.47 347.502 157.902 351.817 130.622 351.817C88.0468 351.817 48.8396 340.323 13 317.336C19.3611 318.044 25.4619 318.398 31.3025 318.398C66.8703 318.398 98.6381 307.442 126.606 285.532C110.022 285.228 95.1701 280.123 82.0499 270.217C68.9297 260.311 59.9007 247.653 54.9628 232.243C59.8435 233.173 64.6607 233.638 69.4142 233.638C76.2565 233.638 82.9893 232.745 89.6125 230.96C71.9146 227.416 57.2326 218.601 45.5667 204.516C33.9012 190.432 28.0684 174.175 28.0684 155.747V154.797C38.9314 160.812 50.5186 164.011 62.8299 164.395C52.3458 157.406 44.0334 148.291 37.8929 137.052C31.752 125.813 28.6815 113.65 28.6815 100.563C28.6815 86.761 32.14 73.9088 39.0571 62.0062C58.3033 85.6243 81.6241 104.501 109.019 118.635C136.415 132.77 165.806 140.62 197.191 142.185C195.852 136.607 195.181 130.785 195.179 124.72C195.179 103.545 202.673 85.4646 217.66 70.4788C232.647 55.4929 250.728 48 271.903 48C294.073 48 312.747 56.0725 327.925 72.2175C345.266 68.7826 361.503 62.5696 376.636 53.5787C370.806 71.9272 359.572 86.0818 342.933 96.0425C358.226 94.2253 372.92 90.2071 387.014 83.988Z" fill="%231D9BF0"/>%0A</svg>%0A';
+
+// src/assets/platforms/youtube.svg
+var youtube_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12.5612 5H12.6669C13.643 5.00347 18.5892 5.03817 19.9229 5.38749C20.3261 5.4941 20.6935 5.7019 20.9884 5.99013C21.2833 6.27836 21.4953 6.63692 21.6033 7.02998C21.7233 7.46952 21.8076 8.05133 21.8646 8.65166L21.8765 8.77195L21.9026 9.0727L21.9121 9.19298C21.9893 10.2502 21.9988 11.2403 22 11.4566V11.5434C21.9988 11.7678 21.9882 12.825 21.9026 13.9262L21.8931 14.0476L21.8825 14.1679C21.823 14.8295 21.7352 15.4865 21.6033 15.97C21.4957 16.3632 21.2837 16.722 20.9888 17.0102C20.6939 17.2985 20.3262 17.5062 19.9229 17.6125C18.5454 17.9734 13.3093 17.9988 12.5837 18H12.4151C12.0481 18 10.5304 17.9931 8.93906 17.9399L8.73717 17.9329L8.63385 17.9283L8.43078 17.9202L8.2277 17.9121C6.90949 17.8554 5.65423 17.764 5.07589 17.6114C4.67269 17.5052 4.30522 17.2976 4.0103 17.0096C3.71538 16.7215 3.50335 16.363 3.39546 15.97C3.26364 15.4877 3.17576 14.8295 3.11638 14.1679L3.10688 14.0464L3.09738 13.9262C3.03877 13.1424 3.00629 12.357 3 11.5711V11.43C3.00238 11.1813 3.01188 10.3219 3.076 9.37343L3.08432 9.25429L3.08788 9.19415L3.09738 9.07385L3.12351 8.77311L3.13538 8.65281C3.19239 8.0525 3.27671 7.46952 3.39665 7.03115C3.50435 6.63792 3.7163 6.27919 4.01124 5.99091C4.30617 5.70263 4.67374 5.49494 5.07707 5.38865C5.65541 5.23828 6.91069 5.14574 8.22889 5.08791L8.43078 5.07981L8.63503 5.07287L8.73717 5.0694L8.94024 5.0613C10.0705 5.02549 11.2011 5.00544 12.332 5.00116H12.5612V5ZM10.6005 8.71297V14.2859L15.5372 11.5006L10.6005 8.71297Z" fill="%23FF0000"/>%0A</svg>%0A';
+
+// src/components/PlatformIcon/PlatformIcon.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var PLATFORM_ICON_URLS = {
+  twitch: twitch_default,
+  youtube: youtube_default,
+  kick: kick_default,
+  tiktok: tiktok_default,
+  facebook: facebook_default,
+  twitter: twitter_default,
+  x: twitter_default,
+  discord: discord_default,
+  lumia: lumiaLogo_default,
+  lumiastream: lumiaLogo_default
+};
+var getPlatformIconUrl = (platform) => {
+  if (!platform) {
+    return void 0;
+  }
+  return PLATFORM_ICON_URLS[String(platform).trim().toLowerCase()];
+};
+function PlatformIcon({ platform, fallback = true, size, className, title, style }) {
+  const url = getPlatformIconUrl(platform) ?? (fallback ? lumiaLogo_default : void 0);
+  if (!url) {
+    return null;
+  }
+  const sizeStyle = size !== void 0 ? { height: typeof size === "number" ? `${size}px` : size } : void 0;
+  return /* @__PURE__ */ jsx15("img", { className: classNames6("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
+}
+PlatformIcon.displayName = "PlatformIcon";
+
+// src/components/ChatMessageItem/modActionIcons.tsx
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var DeleteIcon = () => /* @__PURE__ */ jsx16("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+  "path",
+  {
+    d: "M14.375 2.7H11.875V1.2C11.875 0.538125 11.3145 0 10.625 0H4.375C3.68555 0 3.125 0.538125 3.125 1.2V2.7H0.625C0.279297 2.7 0 2.96813 0 3.3V3.9C0 3.9825 0.0703125 4.05 0.15625 4.05H1.33594L1.81836 13.8563C1.84961 14.4956 2.40039 15 3.06641 15H11.9336C12.6016 15 13.1504 14.4975 13.1816 13.8563L13.6641 4.05H14.8438C14.9297 4.05 15 3.9825 15 3.9V3.3C15 2.96813 14.7207 2.7 14.375 2.7ZM10.4688 2.7H4.53125V1.35H10.4688V2.7Z",
+    fill: "currentColor"
+  }
+) });
+var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M11.3569 12.0002H2.78544C2.61494 12.0002 2.45143 11.9325 2.33087 11.8119C2.21031 11.6914 2.14258 11.5278 2.14258 11.3574V2.57164C2.14258 2.45797 2.18773 2.34896 2.2681 2.26859C2.34848 2.18822 2.45749 2.14307 2.57115 2.14307H11.3569C11.5274 2.14307 11.6909 2.2108 11.8114 2.33135C11.932 2.45191 11.9997 2.61543 11.9997 2.78592V11.3574C11.9997 11.5278 11.932 11.6914 11.8114 11.8119C11.6909 11.9325 11.5274 12.0002 11.3569 12.0002Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M2.14286 1.28571H9.85714V0.642857C9.85714 0.472361 9.78941 0.308848 9.66885 0.188289C9.54829 0.0677294 9.38478 0 9.21428 0H0.75C0.551088 0 0.360322 0.0790177 0.21967 0.21967C0.0790177 0.360322 0 0.551088 0 0.75V9.21428C0 9.38478 0.0677294 9.54829 0.188289 9.66885C0.308848 9.78941 0.472361 9.85714 0.642857 9.85714H1.28571V2.14286C1.28571 1.91553 1.37602 1.69751 1.53677 1.53677C1.69751 1.37602 1.91553 1.28571 2.14286 1.28571Z",
+      fill: "currentColor"
+    }
+  )
+] });
+var PinOnIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M10.6667 7.99992V2.66659H11.3333V1.33325H4.66667V2.66659H5.33333V7.99992L4 9.33325V10.6666H7.46667V14.6666H8.53333V10.6666H12V9.33325L10.6667 7.99992Z", fill: "currentColor" }) });
+var PinOffIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+  "path",
+  {
+    d: "M10.6667 7.99992V2.66659H11.3333V1.33325H4.66667V2.66659H5.33333V7.99992L4 9.33325V10.6666H7.46667V14.6666H8.53333V10.6666H12V9.33325L10.6667 7.99992ZM5.86667 9.33325L6.66667 8.53325V2.66659H9.33333V8.53325L10.1333 9.33325H5.86667Z",
+    fill: "currentColor"
+  }
+) });
+var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxs7("g", { clipPath: "url(#ls-chat-translate-clip)", children: [
+    /* @__PURE__ */ jsx16("path", { d: "M34.9975 45.927L32.605 53H26.5L36.741 25.5H43.803L54 53H47.5815L45.189 45.927H34.9975ZM43.9845 41.879L40.25 30.758H39.9805L36.246 41.879H43.9845Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx16(
+      "path",
+      {
+        d: "M10 20C10 17.0826 11.1589 14.2847 13.2218 12.2218C15.2847 10.1589 18.0826 9 21 9H59.5C62.4174 9 65.2153 10.1589 67.2782 12.2218C69.3411 14.2847 70.5 17.0826 70.5 20V36.5H87C89.9174 36.5 92.7153 37.6589 94.7782 39.7218C96.8411 41.7847 98 44.5826 98 47.5V86C98 88.9174 96.8411 91.7153 94.7782 93.7782C92.7153 95.8411 89.9174 97 87 97H48.5C45.5826 97 42.7847 95.8411 40.7218 93.7782C38.6589 91.7153 37.5 88.9174 37.5 86V69.5H21C18.0826 69.5 15.2847 68.3411 13.2218 66.2782C11.1589 64.2153 10 61.4174 10 58.5V20ZM21 14.5C19.5413 14.5 18.1424 15.0795 17.1109 16.1109C16.0795 17.1424 15.5 18.5413 15.5 20V58.5C15.5 59.9587 16.0795 61.3576 17.1109 62.3891C18.1424 63.4205 19.5413 64 21 64H59.5C60.9587 64 62.3576 63.4205 63.3891 62.3891C64.4205 61.3576 65 59.9587 65 58.5V20C65 18.5413 64.4205 17.1424 63.3891 16.1109C62.3576 15.0795 60.9587 14.5 59.5 14.5H21ZM60.259 69.4725C61.3187 71.1262 62.4737 72.6772 63.724 74.1255C59.61 77.288 54.5225 79.631 48.5 81.2315C49.479 82.425 50.9805 84.724 51.5525 86C57.74 84.0255 62.9925 81.358 67.4255 77.783C71.699 81.4405 76.99 84.1905 83.5405 85.879C84.272 84.482 85.8175 82.1775 87 80.984C80.8125 79.5925 75.6865 77.167 71.49 73.922C75.2355 69.8135 78.211 64.8415 80.4055 58.7585H87V53H70.5V58.7585H74.7075C72.9585 63.4005 70.6375 67.2615 67.7115 70.4735C66.9028 69.613 66.1409 68.7097 65.429 67.7675C63.8757 68.76 62.098 69.3463 60.259 69.4725Z",
+        fill: "currentColor"
+      }
+    )
+  ] }),
+  /* @__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)" }) }) })
+] });
+var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M71.333 62.417C72.1697 62.417 73.0017 62.465 73.8252 62.5576C65.2189 65.3659 59 73.4561 59 83C59 88.8767 61.3585 94.202 65.1797 98.083H13.375V84.708C13.3751 78.7961 15.724 73.1267 19.9043 68.9463C24.0848 64.7658 29.7549 62.417 35.667 62.417H71.333ZM53.5 8.91699C60.0033 8.91699 66.2403 11.5001 70.8389 16.0986C75.4374 20.6972 78.0205 26.9342 78.0205 33.4375C78.0205 39.9408 75.4374 46.1778 70.8389 50.7764C66.2403 55.3749 60.0033 57.958 53.5 57.958C46.9967 57.958 40.7597 55.3749 36.1611 50.7764C31.5626 46.1778 28.9795 39.9408 28.9795 33.4375C28.9795 26.9342 31.5626 20.6972 36.1611 16.0986C40.7597 11.5001 46.9967 8.91699 53.5 8.91699Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M72.4414 77.9153C71.0064 79.9384 70.3336 82.4041 70.5422 84.8757C70.7508 87.3473 71.8274 89.6654 73.5814 91.4193C75.3353 93.1732 77.6533 94.2498 80.1249 94.4584C82.5965 94.6671 85.0622 93.9943 87.0853 92.5592L72.4414 77.9153ZM74.9159 75.4426L89.5598 90.0865C90.9949 88.0634 91.6677 85.5977 91.4591 83.126C91.2504 80.6544 90.1738 78.3364 88.4199 76.5825C86.666 74.8286 84.348 73.752 81.8764 73.5433C79.4047 73.3347 76.939 74.0075 74.9159 75.4426ZM71.101 93.9014C68.4752 91.2759 66.9999 87.7148 66.9998 84.0015C66.9996 80.2882 68.4745 76.727 71.1001 74.1012C73.7256 71.4754 77.2868 70.0002 81 70C84.7133 69.9998 88.2745 71.4748 90.9003 74.1003C93.5259 76.7259 95.0009 80.2869 95.0009 84C95.0009 87.7131 93.5259 91.2741 90.9003 93.8997C88.2748 96.5252 84.7137 98.0003 81.0006 98.0003C77.2875 98.0003 73.7265 96.5252 71.101 93.8997V93.9014Z",
+      fill: "currentColor"
+    }
+  )
+] });
+var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M71.333 62.917C72.1697 62.917 73.0017 62.965 73.8252 63.0576C65.2189 65.8659 59 73.9561 59 83.5C59 89.3767 61.3585 94.702 65.1797 98.583H13.375V85.208C13.3751 79.2961 15.724 73.6267 19.9043 69.4463C24.0848 65.2658 29.7549 62.917 35.667 62.917H71.333ZM53.5 9.41699C60.0033 9.41699 66.2403 12.0001 70.8389 16.5986C75.4374 21.1972 78.0205 27.4342 78.0205 33.9375C78.0205 40.4408 75.4374 46.6778 70.8389 51.2764C66.2403 55.8749 60.0033 58.458 53.5 58.458C46.9967 58.458 40.7597 55.8749 36.1611 51.2764C31.5626 46.6778 28.9795 40.4408 28.9795 33.9375C28.9795 27.4342 31.5626 21.1972 36.1611 16.5986C40.7597 12.0001 46.9967 9.41699 53.5 9.41699Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M81.1936 70.3225C88.8545 70.3225 95.0646 76.5325 95.0646 84.1935C95.0646 91.8544 88.8545 98.0644 81.1936 98.0644C73.5327 98.0644 67.3226 91.8544 67.3226 84.1935C67.3226 76.5325 73.5327 70.3225 81.1936 70.3225ZM81.1936 75.8709C80.8257 75.8709 80.4729 76.017 80.2128 76.2772C79.9526 76.5373 79.8065 76.8901 79.8065 77.258V84.1935C79.8066 84.5613 79.9528 84.9141 80.2129 85.1742L84.3742 89.3354C84.6358 89.5881 84.9862 89.7279 85.3499 89.7248C85.7136 89.7216 86.0615 89.5757 86.3187 89.3185C86.5758 89.0614 86.7217 88.7135 86.7249 88.3498C86.728 87.9861 86.5882 87.6357 86.3356 87.3741L82.5807 83.6192V77.258C82.5807 76.8901 82.4346 76.5373 82.1744 76.2772C81.9143 76.017 81.5615 75.8709 81.1936 75.8709Z",
+      fill: "currentColor"
+    }
+  )
+] });
+var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 3 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M1.47273 0.727539C1.90909 0.727539 2.27273 0.854812 2.56364 1.10936C2.85455 1.373 3 1.7639 3 2.28209C3 2.80027 2.85455 3.19118 2.56364 3.45481C2.27273 3.72754 1.90909 3.8639 1.47273 3.8639C1.05455 3.8639 0.704544 3.72754 0.422727 3.45481C0.140909 3.19118 -2.265e-08 2.80027 0 2.28209C2.265e-08 1.7639 0.140909 1.373 0.422728 1.10936C0.704544 0.854812 1.05455 0.727539 1.47273 0.727539Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M1.47273 7.86426C1.90909 7.86426 2.27273 7.99152 2.56364 8.2461C2.85455 8.50974 3 8.90064 3 9.4188C3 9.93702 2.85455 10.3279 2.56364 10.5916C2.27273 10.8643 1.90909 11.0006 1.47273 11.0006C1.05455 11.0006 0.704544 10.8643 0.422727 10.5916C0.140909 10.3279 -2.265e-08 9.93702 0 9.4188C2.26506e-08 8.90064 0.140909 8.50974 0.422727 8.2461C0.704544 7.99152 1.05455 7.86426 1.47273 7.86426Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx16(
+    "path",
+    {
+      d: "M1.47273 15C1.90909 15 2.27273 15.1273 2.56364 15.3818C2.85455 15.6454 3 16.0363 3 16.5545C3 17.0727 2.85455 17.4636 2.56364 17.7272C2.27273 18 1.90909 18.1363 1.47273 18.1363C1.05455 18.1363 0.704544 18 0.422727 17.7272C0.140909 17.4636 -2.26494e-08 17.0727 0 16.5545C2.26515e-08 16.0363 0.140909 15.6454 0.422727 15.3818C0.704544 15.1273 1.05455 15 1.47273 15Z",
+      fill: "currentColor"
+    }
+  )
+] });
+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(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.41744 57.156C8.37638 53.1769 9.89556 49.6483 13.4609 48.4949L13.5498 48.3446C13.6541 48.1403 13.793 47.9557 13.9604 47.7987C14.1762 47.6409 14.42 47.5249 14.679 47.4573L14.8774 47.3823C32.1633 41.0487 39.9576 31.5414 44.44 25.0849C44.44 31.4254 46.0343 39.6905 48.8401 47.6896C51.7212 55.8795 55.8816 63.8716 60.9595 69.3659C55.6696 67.8643 49.0317 65.9535 38.2332 67.4208C37.7811 68.5196 37.5217 69.6878 37.4669 70.8741C37.4311 71.2442 37.4735 71.6177 37.5914 71.9704C37.7094 72.3228 37.8998 72.647 38.1509 72.9216L38.3154 73.072C38.9997 73.6929 39.335 74.0002 39.4856 74.5531C39.5861 75.285 39.5559 76.0289 39.3965 76.7506L39.335 77.208C39.0817 79.2076 40.0534 79.6171 41.0185 80.0265C41.9833 80.4363 42.736 80.7638 43.1261 81.8625C43.1535 81.9514 43.1535 82.0467 43.1261 82.1355C42.7291 84.183 41.4152 85.3023 40.0947 86.4285C39.773 86.7084 39.4443 86.9883 39.1639 87.2543H39.1229C36.4403 89.3974 34.6268 88.824 33.2513 87.1043C32.1701 85.7392 31.4174 83.6917 30.7194 81.774L30.4183 80.9412C29.2879 77.5695 28.3736 74.1295 27.681 70.6421L27.4483 69.6183C26.853 69.7822 26.2303 69.9666 25.5801 70.1576C24.759 70.3965 23.9378 70.656 23.1234 70.9151L22.8634 71.0109C22.7283 71.0995 22.5701 71.1465 22.4083 71.1465C22.2466 71.1465 22.0884 71.0995 21.9532 71.0109C17.6352 72.4441 14.0288 70.3965 11.6201 66.9839C10.6031 65.5438 9.81597 63.9552 9.28652 62.2745C8.74424 60.6207 8.45135 58.8957 8.41744 57.156ZM68.5073 22.0478C68.2911 22.2123 68.0442 22.3323 67.7809 22.4008C67.5179 22.4693 67.2435 22.485 66.9742 22.4469C66.7048 22.4088 66.4459 22.3177 66.212 22.1789C65.9784 22.04 65.7746 21.8563 65.6127 21.6383L65.5648 21.5768C65.2511 21.1374 65.1207 20.5936 65.2013 20.0601C65.2815 19.5267 65.5667 19.0452 65.9961 18.7171C69.3218 16.2669 72.6339 13.7963 75.9597 11.4007C76.3982 11.084 76.9422 10.9472 77.479 11.0185C78.0266 11.1023 78.5188 11.3992 78.8474 11.8443V11.8784C79.1633 12.3189 79.2912 12.8661 79.2034 13.4004C79.1638 13.6716 79.0703 13.9322 78.928 14.1667C78.7859 14.4011 78.598 14.6048 78.3754 14.7654L68.5073 22.0478ZM79.3128 61.4282C79.042 61.4227 78.7751 61.3637 78.5274 61.2549C78.2793 61.1458 78.0556 60.9891 77.8688 60.7937C77.6802 60.6005 77.5318 60.3718 77.4319 60.1212C77.3322 59.8707 77.283 59.6027 77.2871 59.3331V59.2852C77.2871 59.0122 77.3419 58.742 77.448 58.4906C77.554 58.239 77.7096 58.0111 77.9053 57.8204C78.101 57.6297 78.333 57.4796 78.5877 57.3797C78.8424 57.2797 79.1146 57.2313 79.3881 57.2377C83.0629 57.2377 86.7992 57.3741 90.474 57.4425C91.0266 57.455 91.5517 57.6842 91.936 58.0801C92.3202 58.4762 92.5326 59.0072 92.527 59.5581C92.5162 60.1118 92.2876 60.6387 91.8906 61.0257C91.6957 61.2167 91.4648 61.367 91.2109 61.4678C90.9571 61.5686 90.6855 61.6179 90.4125 61.6126L79.3333 61.4011L79.3128 61.4282ZM79.6345 50.7061C79.3632 50.7293 79.0896 50.6986 78.8305 50.6156C78.5711 50.5325 78.3308 50.3988 78.124 50.2222C77.9169 50.0455 77.7472 49.8296 77.6249 49.5871C77.5022 49.3443 77.4294 49.0799 77.4103 48.8089V48.761C77.3796 48.2206 77.5598 47.6891 77.9131 47.2782C78.2666 46.8671 78.7657 46.6085 79.3059 46.5565C82.7276 46.2835 86.2109 45.9901 89.6393 45.7716C90.1872 45.7376 90.7265 45.9198 91.1409 46.2783C91.5556 46.6371 91.8125 47.1437 91.8563 47.6896C91.8781 47.9615 91.8449 48.235 91.7594 48.4938C91.6735 48.753 91.5365 48.9922 91.3568 49.1979C90.9958 49.6159 90.4848 49.8758 89.9333 49.9212C86.6145 50.249 82.9671 50.522 79.6345 50.6994V50.7061ZM78.1564 40.7483C77.8917 40.8234 77.6149 40.8455 77.3417 40.8137C77.0684 40.7818 76.804 40.6966 76.5637 40.5628C76.3234 40.4291 76.1122 40.2495 75.9414 40.0344C75.7709 39.819 75.6446 39.5723 75.5696 39.3085C75.4946 39.0474 75.4721 38.7744 75.504 38.5051C75.5358 38.2354 75.6208 37.9749 75.7542 37.7385C76.0253 37.256 76.4746 36.8983 77.0067 36.7421C80.5719 35.807 84.1235 34.6606 87.6889 33.7049C87.9503 33.6301 88.2241 33.608 88.4943 33.6396C88.7645 33.6711 89.0258 33.7561 89.2628 33.8893C89.7409 34.1548 90.0966 34.5952 90.255 35.1176C90.4053 35.65 90.3383 36.2197 90.0692 36.7028C89.8001 37.1862 89.3503 37.5436 88.8179 37.6975L78.1495 40.7348L78.1564 40.7483ZM73.8451 30.9749C73.5998 31.0968 73.3327 31.1693 73.0595 31.1883C72.7859 31.2073 72.5113 31.1724 72.2516 31.0855C71.9917 30.9987 71.7514 30.8617 71.5446 30.6823C71.3378 30.5029 71.1683 30.2846 71.0463 30.0399C70.9211 29.7961 70.8464 29.5297 70.8264 29.2566C70.8065 28.9834 70.8417 28.709 70.93 28.4497C71.1066 27.9257 71.4826 27.4919 71.977 27.2416L82.2418 22.1297C82.4862 22.0031 82.7537 21.9268 83.028 21.9055C83.3026 21.8841 83.5787 21.918 83.84 22.0053C84.1011 22.0925 84.3419 22.2313 84.5482 22.4133C84.7544 22.5953 84.9219 22.8168 85.0407 23.0647C85.1644 23.309 85.238 23.5756 85.2569 23.8488C85.2757 24.1219 85.2394 24.396 85.15 24.655C84.9731 25.1771 84.5969 25.6087 84.103 25.8561L73.8382 30.9749H73.8451ZM48.6211 19.2085C48.71 19.1062 48.8058 19.0106 48.8949 18.9219C49.1757 18.6015 49.5206 18.3435 49.9076 18.1643C50.3495 18.0167 50.8243 17.9978 51.2763 18.1097C52.8161 18.3554 54.4653 19.4747 56.1419 21.1878C60.2477 25.4125 64.5726 33.4729 67.6522 41.9429C70.7315 50.4126 72.5791 59.2511 71.6553 64.9909C71.3062 67.1273 70.5809 68.854 69.3902 69.9937L69.3287 70.0416C68.8279 70.4004 68.2485 70.6346 67.6383 70.7241C67.5843 70.6748 67.5273 70.6294 67.4672 70.5876C63.3683 67.6663 59.7414 62.8207 56.6892 57.1217C57.4693 57.272 58.4684 56.6917 59.4266 55.702C64.2168 50.6651 61.8628 41.861 55.8885 39.8204C53.4523 39.0012 51.03 39.0012 50.0718 39.4721L49.9694 39.5266C47.7795 31.0978 47.1566 23.3036 48.6211 19.2085Z",
+    fill: "currentColor"
+  }
+) });
+var VipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.42 3C17.7447 2.99997 18.0645 3.07898 18.3518 3.23021C18.6391 3.38144 18.8853 3.60034 19.069 3.868L19.156 4.008L22.49 9.84C22.6936 10.196 22.7828 10.6059 22.7456 11.0143C22.7084 11.4226 22.5466 11.8097 22.282 12.123L22.168 12.246L12.885 21.529C12.6673 21.7467 12.3769 21.8764 12.0694 21.8931C11.762 21.9099 11.4592 21.8127 11.219 21.62L11.117 21.53L1.83403 12.246C1.54405 11.9562 1.35016 11.5842 1.27861 11.1805C1.20707 10.7768 1.26132 10.3608 1.43403 9.989L1.51203 9.839L4.84503 4.007C5.00611 3.72508 5.23342 3.48661 5.50731 3.31221C5.78119 3.13781 6.09342 3.03271 6.41703 3.006L6.58003 3H17.42ZM7.29303 9.293C7.10555 9.48053 7.00024 9.73484 7.00024 10C7.00024 10.2652 7.10555 10.5195 7.29303 10.707L11.116 14.53C11.2321 14.6461 11.3699 14.7382 11.5216 14.8011C11.6733 14.8639 11.8358 14.8962 12 14.8962C12.1642 14.8962 12.3268 14.8639 12.4785 14.8011C12.6301 14.7382 12.7679 14.6461 12.884 14.53L16.707 10.707C16.8025 10.6148 16.8787 10.5044 16.9311 10.3824C16.9835 10.2604 17.0111 10.1292 17.0123 9.9964C17.0134 9.86362 16.9881 9.73194 16.9378 9.60905C16.8876 9.48615 16.8133 9.3745 16.7194 9.28061C16.6255 9.18671 16.5139 9.11246 16.391 9.06218C16.2681 9.0119 16.1364 8.9866 16.0036 8.98775C15.8708 8.9889 15.7396 9.01649 15.6176 9.0689C15.4956 9.12131 15.3853 9.19749 15.293 9.293L12 12.586L8.70703 9.293C8.5195 9.10553 8.26519 9.00021 8.00003 9.00021C7.73486 9.00021 7.48055 9.10553 7.29303 9.293Z",
+    fill: "currentColor"
+  }
+) });
+var RemoveVipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+  "path",
+  {
+    d: "M17.9995 13C18.6561 13 19.3069 13.1296 19.9136 13.3809C20.5201 13.6321 21.0714 14.0006 21.5356 14.4648C21.9998 14.9291 22.3684 15.4804 22.6196 16.0869C22.8708 16.6934 22.9995 17.3435 22.9995 18C22.9995 18.6565 22.8708 19.3066 22.6196 19.9131C22.3684 20.5196 21.9998 21.0709 21.5356 21.5352C21.0714 21.9994 20.5201 22.3679 19.9136 22.6191C19.3069 22.8704 18.6561 23 17.9995 23C16.6736 22.9999 15.4019 22.4727 14.4644 21.5352C13.5268 20.5975 12.9995 19.326 12.9995 18C12.9995 16.674 13.5268 15.4025 14.4644 14.4648C15.4019 13.5273 16.6736 13.0001 17.9995 13ZM17.4204 3C17.7449 3.00004 18.0649 3.07933 18.3521 3.23047C18.6392 3.38169 18.8852 3.60063 19.0688 3.86816L19.1558 4.00781L22.4897 9.83984C22.6933 10.1958 22.7828 10.6063 22.7456 11.0146C22.7083 11.4229 22.5462 11.8098 22.2817 12.123L22.1675 12.2461L21.3745 13.0381C20.413 12.3829 19.2507 12 17.9995 12C14.686 12.0003 11.9995 14.6864 11.9995 18C11.9995 19.2515 12.3832 20.4134 13.0386 21.375L12.8853 21.5293C12.6676 21.7469 12.3771 21.8767 12.0698 21.8936C11.7625 21.9103 11.4593 21.8127 11.2192 21.6201L11.1167 21.5303L1.8335 12.2461C1.54369 11.9563 1.35037 11.5842 1.27881 11.1807C1.20728 10.777 1.26145 10.3611 1.43408 9.98926L1.51221 9.83887L4.84521 4.00684C5.00627 3.72505 5.23356 3.48685 5.50732 3.3125C5.78107 3.13819 6.09308 3.03263 6.4165 3.00586L6.57959 3H17.4204ZM15.2222 18.5557H20.7778V17.4443H15.2222V18.5557ZM16.0034 8.9873C15.8707 8.98848 15.7396 9.01695 15.6177 9.06934C15.4957 9.12174 15.3847 9.19748 15.2925 9.29297L11.9995 12.5859L8.70654 9.29297C8.51904 9.10565 8.26456 9 7.99951 9C7.73453 9.00013 7.47989 9.10561 7.29248 9.29297C7.10516 9.48047 7.00049 9.73495 7.00049 10C7.00049 10.265 7.10516 10.5195 7.29248 10.707L11.1157 14.5303C11.2318 14.6464 11.3703 14.7379 11.522 14.8008C11.6734 14.8635 11.8356 14.8964 11.9995 14.8965C12.1636 14.8965 12.3264 14.8636 12.478 14.8008C12.6297 14.7379 12.7682 14.6464 12.8843 14.5303L16.7065 10.707C16.802 10.6149 16.8787 10.5047 16.9312 10.3828C16.9836 10.2608 17.0111 10.1289 17.0122 9.99609C17.0133 9.86355 16.9881 9.73207 16.938 9.60938C16.8877 9.48649 16.8131 9.37416 16.7192 9.28027C16.6255 9.18657 16.5138 9.11273 16.3911 9.0625C16.2682 9.01223 16.1362 8.98615 16.0034 8.9873Z",
+    fill: "currentColor"
+  }
+) });
+var ModeratorIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 20 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 2.13654C9.51779 2.13654 9.05533 2.3281 8.71435 2.66907C8.37338 3.01005 8.18182 3.47251 8.18182 3.95472C8.18182 4.43693 8.37338 4.8994 8.71435 5.24037C9.05533 5.58135 9.51779 5.7729 10 5.7729C10.4822 5.7729 10.9447 5.58135 11.2856 5.24037C11.6266 4.8994 11.8182 4.43693 11.8182 3.95472C11.8182 3.47251 11.6266 3.01005 11.2856 2.66907C10.9447 2.3281 10.4822 2.13654 10 2.13654ZM7.4287 1.38343C8.11065 0.701475 9.03558 0.318359 10 0.318359C10.9644 0.318359 11.8893 0.701475 12.5713 1.38343C13.2532 2.06538 13.6364 2.9903 13.6364 3.95472C13.6364 4.91915 13.2532 5.84407 12.5713 6.52602C11.8893 7.20797 10.9644 7.59109 10 7.59109C9.03558 7.59109 8.11065 7.20797 7.4287 6.52602C6.74675 5.84407 6.36364 4.91915 6.36364 3.95472C6.36364 2.9903 6.74675 2.06538 7.4287 1.38343ZM3.63636 5.7729C3.39526 5.7729 3.16403 5.86868 2.99354 6.03917C2.82305 6.20966 2.72727 6.44089 2.72727 6.682C2.72727 6.9231 2.82305 7.15433 2.99354 7.32482C3.16403 7.49531 3.39526 7.59109 3.63636 7.59109C3.87747 7.59109 4.1087 7.49531 4.27919 7.32482C4.44968 7.15433 4.54545 6.9231 4.54545 6.682C4.54545 6.44089 4.44968 6.20966 4.27919 6.03917C4.1087 5.86868 3.87747 5.7729 3.63636 5.7729ZM1.70789 4.75352C2.21935 4.24206 2.91305 3.95472 3.63636 3.95472C4.35968 3.95472 5.05337 4.24206 5.56484 4.75352C6.0763 5.26499 6.36364 5.95868 6.36364 6.682C6.36364 7.40531 6.0763 8.09901 5.56484 8.61047C5.05337 9.12193 4.35968 9.40927 3.63636 9.40927C2.91305 9.40927 2.21935 9.12193 1.70789 8.61047C1.19643 8.09901 0.909091 7.40531 0.909091 6.682C0.909091 5.95868 1.19643 5.26499 1.70789 4.75352ZM16.3636 5.7729C16.1225 5.7729 15.8913 5.86868 15.7208 6.03917C15.5503 6.20966 15.4545 6.44089 15.4545 6.682C15.4545 6.9231 15.5503 7.15433 15.7208 7.32482C15.8913 7.49531 16.1225 7.59109 16.3636 7.59109C16.6047 7.59109 16.836 7.49531 17.0065 7.32482C17.1769 7.15433 17.2727 6.9231 17.2727 6.682C17.2727 6.44089 17.1769 6.20966 17.0065 6.03917C16.836 5.86868 16.6047 5.7729 16.3636 5.7729ZM14.4352 4.75352C14.9466 4.24206 15.6403 3.95472 16.3636 3.95472C17.087 3.95472 17.7806 4.24206 18.2921 4.75352C18.8036 5.26499 19.0909 5.95868 19.0909 6.682C19.0909 7.40531 18.8036 8.09901 18.2921 8.61047C17.7806 9.12193 17.087 9.40927 16.3636 9.40927C15.6403 9.40927 14.9466 9.12193 14.4352 8.61047C13.9237 8.09901 13.6364 7.40531 13.6364 6.682C13.6364 5.95868 13.9237 5.26499 14.4352 4.75352ZM10 10.3177C9.27296 10.3177 8.56259 10.5355 7.96053 10.9431C7.39298 11.3273 6.94622 11.8635 6.67059 12.4891L6.45141 14.8638H13.6364V14.0048C13.5338 13.0925 13.3802 12.5464 13.157 12.1348C12.9377 11.7303 12.6105 11.3803 12.0198 10.9299C11.422 10.5308 10.7191 10.3177 10 10.3177ZM15.4545 14.8638H18.1818V13.9548C18.1818 13.9548 18.1818 13.9548 18.1818 13.9548C18.1818 13.577 18.064 13.2085 17.8449 12.9006C17.6258 12.5928 17.3162 12.3608 16.9592 12.2371C16.708 12.15 16.1524 12.1222 15.4066 12.4951C15.3508 12.523 15.2936 12.5446 15.2356 12.5602C15.3305 12.9552 15.3978 13.384 15.4492 13.8563C15.4528 13.889 15.4545 13.9219 15.4545 13.9547V14.8638ZM14.5331 10.9019C14.16 10.3498 13.6784 9.90601 13.0986 9.46605C13.0855 9.45617 13.0722 9.44664 13.0587 9.43747C12.1558 8.82623 11.0904 8.49954 10 8.49954C8.90962 8.49954 7.84425 8.82623 6.9413 9.43747C6.38148 9.81643 5.90002 10.294 5.5184 10.8435C5.25068 10.6815 4.96166 10.5539 4.65786 10.465C3.93258 10.2527 3.15917 10.2716 2.44515 10.5192C1.73113 10.7668 1.11198 11.2306 0.673772 11.8463C0.235558 12.462 5.52698e-05 13.1989 0 13.9547V15.7729C0 16.275 0.407014 16.682 0.909091 16.682H19.0909C19.593 16.682 20 16.275 20 15.7729V13.9547C19.9999 13.199 19.7644 12.462 19.3262 11.8463C18.888 11.2306 18.2689 10.7668 17.5548 10.5192C16.7351 10.235 15.6658 10.3327 14.5934 10.8689C14.5728 10.8792 14.5526 10.8903 14.5331 10.9019ZM4.83553 12.5883C4.63736 12.4144 4.40269 12.2848 4.14711 12.21C3.78447 12.1038 3.39777 12.1133 3.04076 12.2371C2.68375 12.3608 2.37417 12.5928 2.15507 12.9006C1.93597 13.2085 1.81822 13.5769 1.81818 13.9547C1.81818 13.9547 1.81818 13.9547 1.81818 13.9547V14.8638H4.6255L4.83553 12.5883Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/components/ChatMessageItem/ChatMessageItem.tsx
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_MOD_ACTION_LABELS = {
+  delete: "Delete Message",
+  copy: "Copy to clipboard",
+  translate: "Translate message",
+  pin: "Pin Message",
+  unpin: "Unpin Message",
+  shoutout: "Shoutout",
+  ban: "Ban User",
+  unban: "Unban User",
+  timeout: "Timeout User",
+  warn: "Warn User",
+  "add-vip": "Add VIP",
+  "remove-vip": "Remove VIP",
+  "add-moderator": "Add Moderator",
+  "remove-moderator": "Remove Moderator",
+  profile: "View Profile"
+};
+function ModActionButton({
+  title,
+  placement,
+  danger,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx17(Tooltip3, { title, placement, children: /* @__PURE__ */ jsx17(
+    "span",
+    {
+      className: classNames7("ls-chat-message__modbtn", { "ls-chat-message__modbtn--danger": danger }),
+      onClick,
+      children
+    }
+  ) });
+}
+function ChatMessageItem({
+  username,
+  displayname,
+  message,
+  avatar,
+  fallbackAvatar,
+  avatarPrefix,
+  color,
+  timestamp,
+  reply,
+  badges,
+  platform,
+  platformIcon,
+  actions,
+  showAvatar = true,
+  showTimestamp = false,
+  showBadges = true,
+  className,
+  title,
+  data,
+  modActions,
+  onModAction,
+  modActionLabels,
+  modActionsTooltipPlacement = "top",
+  modMenuAnchor = "pointer",
+  isSelf = false,
+  isVip = false,
+  isMod = false,
+  isPinned = false,
+  onUsernameClick,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const [hovered, setHovered] = useState6(false);
+  const [menuPosition, setMenuPosition] = useState6(null);
+  const [menuAnchorEl, setMenuAnchorEl] = useState6(null);
+  const name = displayname || username;
+  const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx17(PlatformIcon, { platform }) : null);
+  const has = (action) => Boolean(modActions?.includes(action));
+  const label = (action) => modActionLabels?.[action] ?? DEFAULT_MOD_ACTION_LABELS[action];
+  const vipAction = isVip ? "remove-vip" : "add-vip";
+  const moderatorAction = isMod ? "remove-moderator" : "add-moderator";
+  const overflowActions = ["shoutout", vipAction, moderatorAction, "unban"];
+  const hasOverflowMenuItems = overflowActions.some((action) => has(action));
+  const hasVisibleModActions = Boolean(onModAction && modActions?.some((action) => action !== "profile"));
+  const closeMenu = () => {
+    setMenuPosition(null);
+    setMenuAnchorEl(null);
+  };
+  const fire = (action) => {
+    onModAction?.(action, data);
+  };
+  const handleMenuOpen = (event) => {
+    if (!hasOverflowMenuItems) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (modMenuAnchor === "element") {
+      setMenuAnchorEl((prev) => prev ? null : event.currentTarget);
+    } else {
+      setMenuPosition((prev) => prev === null ? { top: event.clientY - 4, left: event.clientX - 2 } : null);
+    }
+  };
+  const menuItem = (action, icon) => has(action) ? /* @__PURE__ */ jsxs8(
+    MenuItem2,
+    {
+      onClick: () => {
+        fire(action);
+        closeMenu();
+      },
+      children: [
+        /* @__PURE__ */ jsx17(ListItemIcon, { children: /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
+        /* @__PURE__ */ jsx17(ListItemText, { children: label(action) })
+      ]
+    },
+    action
+  ) : null;
+  const builtInActions = hasVisibleModActions && hovered && !actions ? /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__modbar", children: [
+    has("delete") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx17(DeleteIcon, {}) }),
+    has("pin") && /* @__PURE__ */ jsx17(
+      ModActionButton,
+      {
+        title: label(isPinned ? "unpin" : "pin"),
+        placement: modActionsTooltipPlacement,
+        onClick: () => fire(isPinned ? "unpin" : "pin"),
+        children: isPinned ? /* @__PURE__ */ jsx17(PinOffIcon, {}) : /* @__PURE__ */ jsx17(PinOnIcon, {})
+      }
+    ),
+    has("copy") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx17(CopyIcon, {}) }),
+    has("translate") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx17(TranslateIcon, {}) }),
+    has("ban") && !isSelf && /* @__PURE__ */ jsx17(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx17(BanUserIcon, {}) }),
+    has("timeout") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx17(TimeoutUserIcon, {}) }),
+    hasOverflowMenuItems && /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx17(MenuDotsIcon, {}) })
+  ] }) : null;
+  const actionsNode = actions ?? builtInActions;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: classNames7("ls-chat-message", className),
+      title,
+      onClick: () => {
+        closeMenu();
+        onClick?.();
+      },
+      onMouseEnter: () => {
+        setHovered(true);
+        onMouseEnter?.();
+      },
+      onMouseLeave: () => {
+        setHovered(false);
+        closeMenu();
+        onMouseLeave?.();
+      },
+      children: [
+        reply ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__reply", children: reply }) : null,
+        showAvatar && avatarPrefix ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
+        showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx17("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
+        siteIcon ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
+        showTimestamp && timestamp ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__time", children: timestamp }) : null,
+        showBadges && badges ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__badges", children: badges }) : null,
+        onUsernameClick ? /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            type: "button",
+            className: "ls-chat-message__username ls-chat-message__username--clickable",
+            style: color ? { color } : void 0,
+            onClick: (e) => {
+              e.stopPropagation();
+              onUsernameClick();
+            },
+            children: [
+              name,
+              ":"
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__username", style: color ? { color } : void 0, children: [
+          name,
+          ":"
+        ] }),
+        " ",
+        /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__text", children: message }),
+        actionsNode ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
+        onModAction && hasOverflowMenuItems ? /* @__PURE__ */ jsxs8(
+          Menu,
+          {
+            open: modMenuAnchor === "element" ? menuAnchorEl !== null : menuPosition !== null,
+            onClose: closeMenu,
+            anchorEl: modMenuAnchor === "element" ? menuAnchorEl : void 0,
+            anchorReference: modMenuAnchor === "element" ? "anchorEl" : "anchorPosition",
+            anchorPosition: modMenuAnchor === "pointer" && menuPosition !== null ? menuPosition : void 0,
+            anchorOrigin: modMenuAnchor === "element" ? { vertical: "bottom", horizontal: "right" } : void 0,
+            transformOrigin: modMenuAnchor === "element" ? { vertical: "top", horizontal: "right" } : void 0,
+            children: [
+              menuItem("shoutout", /* @__PURE__ */ jsx17(ShoutoutIcon, {})),
+              menuItem(vipAction, isVip ? /* @__PURE__ */ jsx17(RemoveVipIcon, {}) : /* @__PURE__ */ jsx17(VipIcon, {})),
+              menuItem(moderatorAction, /* @__PURE__ */ jsx17(ModeratorIcon, {})),
+              menuItem("unban", /* @__PURE__ */ jsx17(BanUserIcon, {}))
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+ChatMessageItem.displayName = "ChatMessageItem";
+
+// src/components/ChatboxPanel/ChatboxPanel.tsx
+import { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
+import MenuItem3 from "@mui/material/MenuItem";
+import classNames8 from "classnames";
+
+// src/components/ChatboxPanel/useAutoScroll.ts
+import { useCallback as useCallback3, useRef as useRef5, useState as useState7 } from "react";
+var useAutoScroll = (threshold = 24, options) => {
+  const containerRef = useRef5(null);
+  const shouldAutoScrollRef = useRef5(true);
+  const [isAtBottom, setIsAtBottom] = useState7(true);
+  const reverse = options?.reverse ?? false;
+  const isNearBottom = useCallback3(() => {
+    if (!containerRef.current) return true;
+    if (reverse) {
+      return containerRef.current.scrollTop <= threshold;
+    }
+    const { scrollHeight, scrollTop, clientHeight } = containerRef.current;
+    return scrollHeight - scrollTop - clientHeight <= threshold;
+  }, [reverse, threshold]);
+  const updateAutoScroll = useCallback3(() => {
+    const near = isNearBottom();
+    shouldAutoScrollRef.current = near;
+    setIsAtBottom(near);
+  }, [isNearBottom]);
+  const scrollToBottom = useCallback3(
+    (force = false) => {
+      if (!containerRef.current) return;
+      if (force || shouldAutoScrollRef.current) {
+        containerRef.current.scrollTop = reverse ? 0 : containerRef.current.scrollHeight;
+        shouldAutoScrollRef.current = true;
+        setIsAtBottom(true);
+      }
+    },
+    [reverse]
+  );
+  return {
+    containerRef,
+    isAtBottom,
+    onScroll: updateAutoScroll,
+    scrollToBottom,
+    updateAutoScroll
+  };
+};
+
+// src/components/ChatboxPanel/ChatboxPanel.tsx
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChatboxPanel({
+  children,
+  messageCount,
+  lastMessageKey,
+  reverse = false,
+  fontSize = 14,
+  fontFamily,
+  spaceBetweenMessages = 14,
+  showSendBar = true,
+  sendValue,
+  onSendValueChange,
+  onSend,
+  sendDisabled,
+  inputDisabled,
+  inputPlaceholder = "send message",
+  platform = "",
+  onPlatformChange,
+  platforms,
+  allPlatformsLabel,
+  platformLabel = "Platform",
+  chatAs,
+  onChatAsChange,
+  chatAsLabel = "Chat as",
+  chatAsSelfLabel = "Self",
+  chatAsBotLabel = "Bot",
+  sendLabel = "Send",
+  jumpToLatestLabel = "Jump to latest",
+  id,
+  className
+}) {
+  const { containerRef, isAtBottom, onScroll, scrollToBottom } = useAutoScroll(24, { reverse });
+  const [unreadCount, setUnreadCount] = useState8(0);
+  const [internalValue, setInternalValue] = useState8("");
+  const prevCountRef = useRef6(0);
+  const prevLastKeyRef = useRef6(null);
+  const hasInitializedRef = useRef6(false);
+  const lineHeight = Math.round(fontSize * 1.35);
+  const isControlled = sendValue !== void 0 || onSendValueChange !== void 0;
+  const inputValue = (isControlled ? sendValue : internalValue) ?? "";
+  useEffect6(() => {
+    scrollToBottom(true);
+  }, [scrollToBottom]);
+  useEffect6(() => {
+    scrollToBottom();
+  }, [messageCount, lastMessageKey, scrollToBottom]);
+  useEffect6(() => {
+    scrollToBottom(true);
+  }, [reverse, scrollToBottom]);
+  useEffect6(() => {
+    const prevCount = prevCountRef.current;
+    const prevLastKey = prevLastKeyRef.current;
+    const nextLastKey = lastMessageKey === void 0 || lastMessageKey === null ? null : String(lastMessageKey);
+    prevCountRef.current = messageCount;
+    prevLastKeyRef.current = nextLastKey;
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      return;
+    }
+    if (messageCount === 0 || isAtBottom) {
+      setUnreadCount(0);
+      return;
+    }
+    let delta = 0;
+    if (messageCount > prevCount) {
+      delta = messageCount - prevCount;
+    } else if (messageCount === prevCount && nextLastKey && nextLastKey !== prevLastKey) {
+      delta = 1;
+    }
+    if (delta > 0) {
+      setUnreadCount((count) => count + delta);
+    }
+  }, [messageCount, lastMessageKey, isAtBottom]);
+  useEffect6(() => {
+    if (isAtBottom && unreadCount !== 0) {
+      setUnreadCount(0);
+    }
+  }, [isAtBottom, unreadCount]);
+  const hasPlatformSelect = Boolean(onPlatformChange && (allPlatformsLabel != null || platforms && platforms.length > 0));
+  const handleInputChange = (value) => {
+    if (!isControlled) {
+      setInternalValue(value);
+    }
+    onSendValueChange?.(value);
+  };
+  const handleSend = () => {
+    if (!onSend) return;
+    if (!isControlled && !inputValue.trim()) return;
+    onSend(inputValue, platform, chatAs);
+    if (!isControlled) {
+      setInternalValue("");
+    }
+  };
+  return /* @__PURE__ */ jsxs9("div", { className: classNames8("ls-chatbox", className), id, children: [
+    /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__viewport", children: [
+      /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: "ls-chatbox__list",
+          ref: containerRef,
+          onScroll,
+          style: {
+            fontSize: `${fontSize}px`,
+            lineHeight: `${lineHeight}px`,
+            gap: `${spaceBetweenMessages}px`,
+            fontFamily: fontFamily || "inherit"
+          },
+          children
+        }
+      ),
+      !isAtBottom && /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          type: "button",
+          className: "ls-chatbox__jump",
+          onClick: () => {
+            scrollToBottom(true);
+            setUnreadCount(0);
+          },
+          children: [
+            /* @__PURE__ */ jsxs9(
+              "svg",
+              {
+                className: classNames8("ls-chatbox__jump-arrow", { "ls-chatbox__jump-arrow--up": reverse }),
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx18("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                  /* @__PURE__ */ jsx18("polyline", { points: "19 12 12 19 5 12" })
+                ]
+              }
+            ),
+            jumpToLatestLabel,
+            unreadCount > 0 && /* @__PURE__ */ jsx18("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
+          ]
+        }
+      )
+    ] }),
+    showSendBar && onSend ? /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__sendbar", children: [
+      /* @__PURE__ */ jsx18(
+        LSInput,
+        {
+          className: "ls-chatbox__input",
+          placeholder: inputPlaceholder,
+          value: inputValue,
+          disabled: inputDisabled,
+          onChange: (e) => handleInputChange(e.target.value),
+          onKeyUp: (e) => {
+            if (e.key === "Enter") handleSend();
+          }
+        }
+      ),
+      hasPlatformSelect ? /* @__PURE__ */ jsxs9(
+        LSSelect,
+        {
+          className: "ls-chatbox__platform",
+          label: platformLabel,
+          value: platform,
+          displayEmpty: true,
+          onChange: (e) => onPlatformChange?.(String(e.target.value)),
+          children: [
+            allPlatformsLabel != null && /* @__PURE__ */ jsx18(MenuItem3, { value: "", children: allPlatformsLabel }),
+            platforms?.map((option) => /* @__PURE__ */ jsx18(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs9("span", { className: "ls-chatbox__platform-option", children: [
+              /* @__PURE__ */ jsx18(PlatformIcon, { platform: option.value, fallback: false }),
+              option.label
+            ] }) }, option.value))
+          ]
+        }
+      ) : null,
+      onChatAsChange ? /* @__PURE__ */ jsxs9(
+        LSSelect,
+        {
+          className: "ls-chatbox__chatas",
+          label: chatAsLabel,
+          value: chatAs ?? "self",
+          onChange: (e) => onChatAsChange(e.target.value === "bot" ? "bot" : "self"),
+          children: [
+            /* @__PURE__ */ jsx18(MenuItem3, { value: "self", children: chatAsSelfLabel }),
+            /* @__PURE__ */ jsx18(MenuItem3, { value: "bot", children: chatAsBotLabel })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx18(
+        LSButton,
+        {
+          className: "ls-chatbox__send",
+          label: sendLabel,
+          color: "secondary",
+          disabled: sendDisabled ?? (!isControlled ? !inputValue.trim() : void 0),
+          onClick: handleSend
+        }
+      )
+    ] }) : null
+  ] });
+}
+ChatboxPanel.displayName = "ChatboxPanel";
+
+// src/components/ModalChrome/DialogChrome.tsx
+import Fade from "@mui/material/Fade";
+import Modal from "@mui/material/Modal";
+import classNames9 from "classnames";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var DIMENSIONS = {
+  small: { width: "30%", height: "30%" },
+  longS: { width: "50%", height: "30%" },
+  medium: { width: "50%", height: "50%" },
+  longM: { width: "70%", height: "50%" },
+  large: { width: "80%", height: "80%" },
+  longL: { width: "90%", height: "80%" },
+  tall: { width: "40%", height: "70%" },
+  full: { width: "100%", height: "calc(100% - 1rem)" }
+};
+var DefaultCloseIcon = () => /* @__PURE__ */ jsxs10("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx19("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx19("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
+] });
+var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
+  const modalBackground = overlayProps?.background ? overlayProps.background : !overlayProps?.noBackground ? "var(--gradientBg, var(--background, #151230))" : void 0;
+  const dimensions = overlayProps?.size && DIMENSIONS[overlayProps.size] || { width: "90%", height: "90%" };
+  return /* @__PURE__ */ jsx19(
+    Modal,
+    {
+      disableEnforceFocus: true,
+      open: props.open ?? true,
+      onClose: (_e, reason) => {
+        if (props.$disableBackdropClose && (reason === "backdropClick" || reason === "escapeKeyDown")) return;
+        props.close?.();
+      },
+      className: "ls-dialog",
+      style: { ...props.style, zIndex: `${props.zIndex ? props.zIndex : "2500"} !important` },
+      children: /* @__PURE__ */ jsx19(Fade, { in: props.open, children: /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          className: classNames9("ls-dialog__card", {
+            "ls-dialog__card--pad": !overlayProps?.noOuterPadding,
+            "ls-dialog__card--full": overlayProps?.size === "full"
+          }),
+          style: overlayProps?.noStyle ? {} : {
+            backgroundImage: props.backgroundImage ? `url(${props.backgroundImage})` : "",
+            background: modalBackground,
+            width: dimensions.width,
+            height: dimensions.height
+          },
+          title: "",
+          children: [
+            !props.$hideTop && /* @__PURE__ */ jsxs10(
+              "div",
+              {
+                className: classNames9("ls-dialog__top", { "ls-dialog__top--full": overlayProps?.size === "full" }),
+                style: { padding: props.$noPadTitle ? "0" : "1rem" },
+                children: [
+                  /* @__PURE__ */ jsx19("div", { className: "ls-dialog__top-side", children: props.$leftText }),
+                  /* @__PURE__ */ jsx19("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
+                  props.hideClose ? /* @__PURE__ */ jsx19("div", { className: "ls-dialog__top-side" }) : /* @__PURE__ */ jsx19("div", { className: "ls-dialog__close", children: /* @__PURE__ */ jsxs10("span", { onClick: props.close, className: "ls-dialog__close-btn", children: [
+                    /* @__PURE__ */ jsx19("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
+                    closeIcon ?? /* @__PURE__ */ jsx19(DefaultCloseIcon, {})
+                  ] }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx19(
+              "div",
+              {
+                className: classNames9("ls-dialog__body", props.containerClass),
+                style: { backgroundImage: props.backgroundImage ? `url(${props.backgroundImage})` : "", padding: props.noPadding ? 0 : "20px 0" },
+                children
+              }
+            ),
+            !props.$hideBottom && /* @__PURE__ */ jsxs10("div", { className: "ls-dialog__bottom", children: [
+              /* @__PURE__ */ jsx19(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
+              props.showTest && /* @__PURE__ */ jsx19(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+};
+DialogChrome.displayName = "DialogChrome";
+
+// src/components/ModalChrome/ModalChrome.tsx
+import classNames11 from "classnames";
+
+// src/components/ModalChrome/PanelChrome.tsx
+import classNames10 from "classnames";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+function PanelChrome({
+  title,
+  titleVariant = "heading",
+  onClose,
+  showClose = true,
+  onClickAway,
+  headerActions,
+  footer,
+  padding,
+  className,
+  bodyClassName,
+  style,
+  children
+}) {
+  const hasHeader = Boolean(title || headerActions || onClose && showClose);
+  const mergedStyle = padding ? { ...style, ["--ls-panel-padding"]: padding } : style;
+  const panel = /* @__PURE__ */ jsxs11("div", { className: classNames10("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
+    hasHeader ? /* @__PURE__ */ jsxs11("div", { className: "ls-panel__header", children: [
+      title ? /* @__PURE__ */ jsx20("span", { className: classNames10("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx20("span", {}),
+      /* @__PURE__ */ jsxs11("span", { className: "ls-panel__header-actions", children: [
+        headerActions,
+        onClose && showClose ? /* @__PURE__ */ jsx20("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx20("div", { className: classNames10("ls-panel__body", bodyClassName), children }),
+    footer ? /* @__PURE__ */ jsx20("div", { className: "ls-panel__footer", children: footer }) : null
+  ] });
+  if (onClickAway) {
+    return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+      /* @__PURE__ */ jsx20("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
+      panel
+    ] });
+  }
+  return panel;
+}
+PanelChrome.displayName = "PanelChrome";
+
+// src/components/ModalChrome/ModalChrome.tsx
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+function ModalChrome({
+  open = true,
+  onClose,
+  position = "fixed",
+  title,
+  titleVariant,
+  showClose,
+  headerActions,
+  footer,
+  maxWidth,
+  fitContent,
+  centerContent,
+  padding = "1.25rem",
+  cardClassName,
+  bodyClassName,
+  backdropClassName,
+  cardStyle,
+  className,
+  children
+}) {
+  if (!open) {
+    return null;
+  }
+  const mergedCardStyle = maxWidth ? { ...cardStyle, ["--ls-modal-max-width"]: maxWidth } : cardStyle;
+  return /* @__PURE__ */ jsxs12("div", { className: classNames11("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
+    /* @__PURE__ */ jsx21("div", { className: classNames11("ls-modal__backdrop", backdropClassName), onClick: onClose }),
+    /* @__PURE__ */ jsx21(
+      PanelChrome,
+      {
+        className: classNames11(
+          "ls-modal__card",
+          { "ls-modal__card--fit": fitContent, "ls-modal__card--center": centerContent },
+          cardClassName
+        ),
+        style: mergedCardStyle,
+        title,
+        titleVariant,
+        onClose,
+        showClose,
+        headerActions,
+        footer,
+        padding,
+        bodyClassName,
+        children
+      }
+    )
+  ] });
+}
+ModalChrome.displayName = "ModalChrome";
+
+// src/components/WidgetChrome/WidgetChrome.tsx
+import classNames12 from "classnames";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+function WidgetChromeButton({ active, buttonRef, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx22("button", { ref: buttonRef, type: "button", className: classNames12("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
+}
+WidgetChromeButton.displayName = "WidgetChromeButton";
+function WidgetChrome({ title, leftActions, rightActions, headerExtra, showHeader = true, className, headerClassName, bodyClassName, style, id, children }) {
+  return /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget", className), style, id, children: [
+    showHeader ? /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget__header", headerClassName), children: [
+      /* @__PURE__ */ jsx22("div", { className: "ls-widget__side", children: leftActions }),
+      /* @__PURE__ */ jsx22("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx22("span", { children: title }) }),
+      /* @__PURE__ */ jsx22("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
+      headerExtra
+    ] }) : null,
+    /* @__PURE__ */ jsx22("div", { className: classNames12("ls-widget__body", bodyClassName), children })
+  ] });
+}
+WidgetChrome.displayName = "WidgetChrome";
+
+// src/components/EventListItem/EventListItem.tsx
+import classNames13 from "classnames";
+
+// src/components/EventList/EventTypeIcon.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var createEventIcon = (def) => {
+  const Icon = (props) => /* @__PURE__ */ jsx23("svg", { width: def.width, height: def.height, viewBox: def.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: def.paths.map((path, index) => /* @__PURE__ */ jsx23("path", { fill: "currentColor", ...path }, index)) });
+  return Icon;
+};
+var EVENT_TYPE_FALLBACK_ICON = createEventIcon({ width: "77", height: "77", viewBox: "0 0 77 77", paths: [{ d: "M32.0348 67.8488C32.2317 68.9076 33.1257 69.6727 34.166 69.6727H41.7175C42.9162 69.6727 43.8879 68.6655 43.8879 67.4232C43.8879 66.1808 42.9162 65.1736 41.7175 65.1736H35.9581L35.8144 64.4007H43.1152C44.2884 64.4007 45.2493 63.4344 45.2847 62.219C45.5196 54.1506 48.6247 48.8606 51.9394 43.5096C52.0669 43.3038 52.1949 43.0976 52.3233 42.8909C55.5088 37.7611 58.9 32.3001 58.9 24.5131C58.9 17.6282 56.2649 12.4215 52.2565 8.9757C48.3033 5.57735 43.149 4 38.1777 4C28.6499 4 18 11.1793 18 24.739C18 31.851 21.089 38.0439 24.0565 43.3454C24.5114 44.1581 24.9596 44.943 25.3964 45.7078C26.4256 47.5099 27.3909 49.2003 28.229 50.8789C29.4122 53.2488 30.2139 55.3578 30.4727 57.3163C30.6216 58.4425 31.5576 59.2766 32.6541 59.2603C33.7507 59.244 34.6633 58.3825 34.7809 57.2524C34.9706 55.4309 35.9174 53.2643 37.4928 50.7048C38.8347 48.5248 40.4985 46.2646 42.2571 43.8756C42.5436 43.4864 42.8327 43.0937 43.1233 42.6975C45.1598 39.9201 47.2572 36.9825 48.8406 34.0308C50.417 31.0923 51.6027 27.9286 51.6027 24.7014C51.6027 20.79 50.1716 17.467 47.6813 15.1412C45.2141 12.8368 41.8546 11.6443 38.1777 11.6443C30.9242 11.6443 25.2973 17.6891 25.2973 24.7014C25.2973 26.7539 25.6936 29.8348 26.7508 32.4851C27.7593 35.0129 29.7798 38.0597 33.4218 38.0597C35.1995 38.0597 36.6557 37.3883 37.738 36.2561C38.7611 35.1859 39.3371 33.826 39.6795 32.5814C40.3187 30.2583 40.3144 27.6507 40.3121 26.2771C40.312 26.1997 40.3118 26.1263 40.3118 26.057C40.3118 24.8147 39.3401 23.8075 38.1414 23.8075C36.9427 23.8075 35.971 24.8147 35.971 26.057L35.971 26.1579C35.9713 27.6034 35.9717 29.6519 35.5051 31.3476C35.2712 32.1976 34.969 32.7605 34.6545 33.0895C34.3992 33.3566 34.0583 33.5607 33.4218 33.5607C32.5619 33.5607 31.6054 32.8794 30.7623 30.766C29.968 28.7751 29.6382 26.3016 29.6382 24.7014C29.6382 20.1907 33.3053 16.1434 38.1777 16.1434C40.9631 16.1434 43.231 17.0409 44.7754 18.4834C46.2969 19.9044 47.2619 21.9851 47.2619 24.7014C47.2619 26.8215 46.469 29.1934 45.0468 31.8445C43.6316 34.4825 41.7105 37.1887 39.6673 39.9752C39.3877 40.3564 39.1055 40.7396 38.8222 41.1243C37.0726 43.5001 35.2818 45.9317 33.8333 48.2851C33.4508 48.9065 33.0824 49.5373 32.7382 50.1753C32.5285 49.7174 32.3096 49.2626 32.0842 48.8112C31.1862 47.0126 30.1213 45.1476 29.064 43.2961C28.6415 42.5561 28.2201 41.8183 27.8112 41.0877C24.861 35.817 22.3408 30.5434 22.3408 24.739C22.3408 14.1984 30.497 8.49902 38.1777 8.49902C42.3191 8.49902 46.4406 9.82125 49.4853 12.4386C52.4747 15.0085 54.5592 18.9335 54.5592 24.5131C54.5592 30.9585 51.7975 35.4143 48.5022 40.7311C48.4306 40.8466 48.3587 40.9625 48.2866 41.0789C45.1891 46.0794 41.8063 51.7178 41.0743 59.9017H33.1858C32.5382 59.9017 31.9245 60.2014 31.5122 60.7189C31.0998 61.2365 30.932 61.9178 31.0546 62.5769L32.0348 67.8488Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M41.1547 70.6428C41.1547 72.7023 39.6065 73.2035 37.6967 73.2035C35.7868 73.2035 34.2386 72.7023 34.2386 70.6428H41.1547Z" }, { d: "M45.3289 28.7231C45.4774 28.3343 45.2937 27.8944 44.9186 27.7405L42.3201 26.6745C41.945 26.5206 41.5206 26.7111 41.3721 27.0998C41.2237 27.4886 41.4074 27.9285 41.7825 28.0823L44.381 29.1484C44.7561 29.3022 45.1805 29.1118 45.3289 28.7231Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M31.4505 29.2716C31.6184 29.6518 32.0518 29.819 32.4186 29.6451L34.96 28.44C35.3268 28.2661 35.4881 27.8169 35.3203 27.4367C35.1525 27.0565 34.7191 26.8893 34.3522 27.0632L31.8109 28.2682C31.444 28.4422 31.2827 28.8914 31.4505 29.2716Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M35.3 24.9243C35.4287 24.528 35.223 24.0987 34.8407 23.9653L32.1921 23.0417C31.8098 22.9084 31.3955 23.1215 31.2669 23.5178C31.1382 23.9141 31.3439 24.3434 31.7262 24.4768L34.3748 25.4004C34.7571 25.5337 35.1714 25.3206 35.3 24.9243Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M36.7911 23.1649C37.1695 23.0199 37.3629 22.5845 37.223 22.1923L36.2535 19.474C36.1137 19.0818 35.6936 18.8814 35.3152 19.0263C34.9368 19.1713 34.7434 19.6067 34.8833 19.9989L35.8528 22.7173C35.9926 23.1094 36.4127 23.3098 36.7911 23.1649Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M39.5322 23.0163C39.911 23.1602 40.3305 22.9585 40.4693 22.5659L41.4314 19.8448C41.5702 19.4522 41.3757 19.0173 40.9969 18.8735C40.6181 18.7296 40.1986 18.9313 40.0598 19.3238L39.0977 22.045C38.9589 22.4376 39.1534 22.8724 39.5322 23.0163Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M41.3214 24.7192C41.4951 25.0965 41.9311 25.2564 42.2952 25.0763L44.8173 23.8284C45.1813 23.6483 45.3356 23.1964 45.1618 22.8191C44.988 22.4418 44.552 22.2819 44.1879 22.4621L41.6659 23.7099C41.3018 23.89 41.1476 24.3419 41.3214 24.7192Z", fillRule: "evenodd", clipRule: "evenodd" }] });
+var EVENT_TYPE_ICONS = {
+  follower: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M12.027 21.9999C11.8 22.0004 11.5751 21.9485 11.3653 21.8473C11.1556 21.7461 10.965 21.5975 10.8046 21.41L3.62036 13.0238C3.08903 12.4036 2.67151 11.6635 2.39327 10.8488C2.11502 10.034 1.98189 9.1616 2.00198 8.28479C2.02207 7.40799 2.19497 6.54514 2.51013 5.7489C2.82529 4.95266 3.2761 4.23971 3.83507 3.65353C4.37293 3.09266 5.00222 2.66427 5.68527 2.39401C6.36831 2.12376 7.09106 2.01719 7.81022 2.0807C9.24938 2.19144 10.6049 2.90962 11.6237 4.10122L12.027 4.57192L12.61 3.89135C13.1413 3.27115 13.7753 2.7838 14.4733 2.45902C15.1713 2.13425 15.9187 1.97885 16.6698 2.00231C17.421 2.02577 18.1601 2.2276 18.8423 2.59549C19.5244 2.96338 20.1351 3.48961 20.6373 4.14209C21.1178 4.7699 21.4848 5.50446 21.7163 6.30176C21.9479 7.09907 22.0391 7.94272 21.9847 8.78218C21.8898 10.4621 21.2746 12.0443 20.2539 13.2337L13.2496 21.4099H13.2495C13.089 21.5974 12.8984 21.7461 12.6886 21.8473C12.4789 21.9486 12.254 22.0005 12.027 22V21.9999ZM7.4451 4.49251C6.62811 4.48009 5.83631 4.82243 5.22337 5.45308C4.87364 5.81932 4.59152 6.26491 4.39423 6.76266C4.19694 7.26041 4.08863 7.79987 4.0759 8.34811C4.06316 8.89635 4.14628 9.44186 4.32018 9.95136C4.49407 10.4608 4.75509 10.9236 5.08731 11.3114L12.027 19.4123L18.7868 11.5215C20.1654 9.91226 20.304 7.32882 19.0958 5.76265C18.782 5.3544 18.4003 5.02508 17.9739 4.79479C17.5474 4.56449 17.0853 4.43806 16.6156 4.42319C16.1459 4.40833 15.6786 4.50536 15.2421 4.70834C14.8057 4.91133 14.4092 5.21603 14.077 5.60383L12.7605 7.14054C12.6642 7.25298 12.5498 7.34217 12.424 7.40302C12.2981 7.46387 12.1632 7.49519 12.027 7.49519C11.8908 7.49519 11.7559 7.46387 11.6301 7.40302C11.5042 7.34217 11.3899 7.25298 11.2935 7.14054L10.1569 5.8137C9.43779 4.97274 8.46298 4.49784 7.4451 4.49261V4.49251Z" }] }),
+  subscribers: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M12 7.58534L13.193 11.5042H16.7718L13.891 13.5455L15.0712 17.3384L12 15.0199L8.92878 17.3384L10.109 13.5455L7.22818 11.5042H10.807L12 7.58534ZM8.92878 8.98403H3.26859C2.03756 8.98403 1.52992 10.5591 2.53251 11.2648L7.15204 14.541L5.33722 20.35C4.96918 21.5219 6.33981 22.467 7.31702 21.7235L12 18.1953L16.683 21.7361C17.6602 22.4796 19.0308 21.5345 18.6628 20.3626L16.848 14.5536L21.4675 11.2774C22.4701 10.5591 21.9624 8.99664 20.7314 8.99664H15.0712L13.2056 2.89781C12.8376 1.70073 11.137 1.70073 10.7817 2.89781L8.92878 8.98403Z" }] }),
+  gifts: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M10 9C10 7.67392 10.5268 6.40215 11.4645 5.46447C12.4021 4.52678 13.6739 4 15 4C16.3261 4 17.5979 4.52678 18.5355 5.46447C19.4732 6.40215 20 7.67392 20 9C20 7.67392 20.5268 6.40215 21.4645 5.46447C22.4021 4.52678 23.6739 4 25 4C26.3261 4 27.5979 4.52678 28.5355 5.46447C29.4732 6.40215 30 7.67392 30 9V9.012C30 9.152 30 9.552 29.924 10H34C34.5304 10 35.0391 10.2107 35.4142 10.5858C35.7893 10.9609 36 11.4696 36 12V14C36 14.5304 35.7893 15.0391 35.4142 15.4142C35.0391 15.7893 34.5304 16 34 16H6C5.46957 16 4.96086 15.7893 4.58579 15.4142C4.21071 15.0391 4 14.5304 4 14V12C4 11.4696 4.21071 10.9609 4.58579 10.5858C4.96086 10.2107 5.46957 10 6 10H10.076C10.0232 9.67336 9.99775 9.34288 10 9.012V9ZM12.136 10H18V9C18 8.60603 17.9224 8.21593 17.7716 7.85195C17.6209 7.48797 17.3999 7.15726 17.1213 6.87868C16.8427 6.6001 16.512 6.37913 16.1481 6.22836C15.7841 6.0776 15.394 6 15 6C14.606 6 14.2159 6.0776 13.8519 6.22836C13.488 6.37913 13.1573 6.6001 12.8787 6.87868C12.6001 7.15726 12.3791 7.48797 12.2284 7.85195C12.0776 8.21593 12 8.60603 12 9C12 9.17 12.004 9.548 12.09 9.86C12.102 9.90769 12.1174 9.95448 12.136 10V10ZM22 10H27.864C27.8824 9.95439 27.8978 9.90763 27.91 9.86C27.996 9.548 28 9.17 28 9C28 8.20435 27.6839 7.44129 27.1213 6.87868C26.5587 6.31607 25.7956 6 25 6C24.2044 6 23.4413 6.31607 22.8787 6.87868C22.3161 7.44129 22 8.20435 22 9V10ZM34 18V33C34 33.7956 33.6839 34.5587 33.1213 35.1213C32.5587 35.6839 31.7956 36 31 36H22V18H34ZM9 36C8.20435 36 7.44129 35.6839 6.87868 35.1213C6.31607 34.5587 6 33.7956 6 33V18H18V36H9Z" }] }),
+  redemption: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M4.29091 1.74561L2.83636 4.14459V15.1799H6.71515V17.0991H8.65454L10.5939 15.1799H13.0182L17.3818 10.8618V1.74561H4.29091ZM15.4424 9.90218L13.0182 12.3012H10.5939L8.65454 14.2204V12.3012H5.74546V3.6648H15.4424V9.90218Z" }, { d: "M12.0472 5.58398H13.5017V9.42238H12.0472V5.58398Z" }, { d: "M9.14003 5.58398H10.5946V9.42238H9.14003V5.58398Z" }, { d: "M17.3825 22.3945C19.4147 22.3945 21.0621 20.747 21.0621 18.7148C21.0621 16.6826 19.4147 15.0352 17.3825 15.0352C15.3503 15.0352 13.7028 16.6826 13.7028 18.7148C13.7028 20.747 15.3503 22.3945 17.3825 22.3945Z", stroke: "white", strokeWidth: "1.5" }, { d: "M17.7877 16.6938C18.6549 17.0695 19.0541 17.3742 19.4038 18.31", stroke: "white", strokeLinecap: "round" }] }),
+  donation: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM8.5 14V16H11V18H13V16H14C14.663 16 15.2989 15.7366 15.7678 15.2678C16.2366 14.7989 16.5 14.163 16.5 13.5C16.5 12.837 16.2366 12.2011 15.7678 11.7322C15.2989 11.2634 14.663 11 14 11H10C9.86739 11 9.74021 10.9473 9.64645 10.8536C9.55268 10.7598 9.5 10.6326 9.5 10.5C9.5 10.3674 9.55268 10.2402 9.64645 10.1464C9.74021 10.0527 9.86739 10 10 10H15.5V8H13V6H11V8H10C9.33696 8 8.70107 8.26339 8.23223 8.73223C7.76339 9.20107 7.5 9.83696 7.5 10.5C7.5 11.163 7.76339 11.7989 8.23223 12.2678C8.70107 12.7366 9.33696 13 10 13H14C14.1326 13 14.2598 13.0527 14.3536 13.1464C14.4473 13.2402 14.5 13.3674 14.5 13.5C14.5 13.6326 14.4473 13.7598 14.3536 13.8536C14.2598 13.9473 14.1326 14 14 14H8.5Z" }] }),
+  bits: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M11.9643 21.9696C11.9576 21.9524 10.6184 19.981 8.98838 17.5888C7.35834 15.1965 6.02743 13.2363 6.03081 13.2328C6.03418 13.2293 7.36412 14.0442 8.9862 15.0438C10.6083 16.0434 11.9571 16.8618 11.9834 16.8624C12.0098 16.8631 13.365 16.0436 14.9949 15.0413C16.6247 14.0391 17.9685 13.2132 17.9809 13.2059C18.0087 13.1898 18.3202 12.7302 14.8869 17.7713C13.3032 20.0966 12.0005 21.9995 11.992 22C11.9835 22.0005 11.9711 21.9867 11.9643 21.9696ZM9.30797 14.3989C7.83646 13.4917 6.49018 12.6623 6.31624 12.5558L6 12.362L8.98571 7.20124C10.6278 4.36279 11.9753 2.02918 11.9801 2.01543C11.9849 2.00168 11.9941 1.99606 12.0005 2.00293C12.0242 2.02827 17.9949 12.3594 17.9887 12.3643C17.9625 12.3849 11.9958 16.0511 11.9904 16.0499C11.9866 16.0491 10.7795 15.3061 9.30797 14.3989Z" }] }),
+  kicks: createEventIcon({ width: "79", height: "79", viewBox: "0 0 79 79", paths: [{ d: "M37.9846 4.24886C38.9663 3.88709 39.9927 3.88711 40.9299 4.24886L61.3693 11.7557C62.3059 12.1175 63.1091 12.7508 63.5998 13.6551L74.4445 32.6942C74.9356 33.5985 75.1141 34.6389 74.9357 35.6336L71.1867 57.2498C71.0083 58.2447 70.4729 59.1947 69.7141 59.828L53.1135 73.9373C52.3103 74.5706 51.3723 74.9325 50.3459 74.9325H28.6584C27.632 74.9325 26.6494 74.5706 25.8908 73.9373L9.29023 59.828C8.53159 59.1495 7.99608 58.2447 7.81757 57.2498L4.06855 35.6336C3.89007 34.5936 4.06902 33.5985 4.55976 32.6942L15.4045 13.6551C15.8953 12.796 16.698 12.1175 17.635 11.7557L38.0295 4.24886H37.9846ZM21.0275 18.3123V60.4149H34.8615V51.0535H39.4582V55.7117H44.0549V60.37H57.8889V46.3504H53.2922V41.6922H48.6516V37.034H53.2922V32.3768H57.8889V18.3573H44.0549V23.0155H39.4582V27.6737H34.8615V18.3123H21.0275Z" }] }),
+  extension: createEventIcon({ width: "69", height: "69", viewBox: "0 0 69 69", paths: [{ d: "M58.5636 46.1921L34.7814 5L11 46.1921L34.7814 32.4614L58.5636 46.1921Z" }, { d: "M58.5636 50.7695L34.7814 37.0388L11 50.769L34.7814 64.5002L58.5636 50.7695Z" }] }),
+  points: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M32.474 19.9999C32.474 13.1107 26.8892 7.52589 19.9999 7.52589C13.1107 7.52591 7.52591 13.1107 7.52589 19.9999C7.52589 26.8892 13.1107 32.474 19.9999 32.474C26.8892 32.474 32.474 26.8892 32.474 19.9999ZM34.9999 19.9999C34.9999 28.2842 28.2842 34.9999 19.9999 34.9999C11.7157 34.9999 5 28.2842 5 19.9999C5.00002 11.7157 11.7157 5.00002 19.9999 5C28.2842 5 34.9999 11.7157 34.9999 19.9999Z" }, { d: "M20.3537 11.9525C20.6223 11.3325 21.3286 11.037 21.9544 11.2712L22.0146 11.2957L22.3204 11.4296C23.8327 12.1001 25.0862 12.7827 26.1251 13.7727C27.1799 14.778 27.9368 16.0246 28.5982 17.7041L28.7291 18.046L28.7504 18.1074C28.9523 18.7443 28.6213 19.4345 27.9884 19.6711C27.3555 19.9076 26.6528 19.6037 26.3875 18.9905L26.3631 18.9301L26.2481 18.6304C25.6733 17.1703 25.0912 16.2766 24.3826 15.6013C23.6579 14.9106 22.7234 14.3721 21.3014 13.7409L21.0106 13.6134L20.9517 13.586C20.3528 13.2897 20.0852 12.5726 20.3537 11.9525Z" }] }),
+  raids: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M14.75 15C15.716 15 16.5 15.784 16.5 16.75L16.499 17.712C16.616 19.902 14.988 21.009 12.067 21.009C9.157 21.009 7.5 19.919 7.5 17.75V16.75C7.5 15.784 8.284 15 9.25 15H14.75V15ZM3.75 10H8.126C7.95152 10.679 7.95823 11.3919 8.14546 12.0675C8.3327 12.743 8.6939 13.3577 9.193 13.85L9.355 14.001L9.25 14C8.64983 13.9998 8.06606 14.1959 7.58778 14.5585C7.10949 14.921 6.76294 15.4301 6.601 16.008L6.567 16.009C3.657 16.009 2 14.919 2 12.75V11.75C2 10.784 2.784 10 3.75 10ZM20.25 10C21.216 10 22 10.784 22 11.75L21.999 12.712C22.116 14.902 20.488 16.009 17.567 16.009L17.398 16.007C17.2443 15.4623 16.9265 14.9781 16.488 14.6203C16.0495 14.2625 15.5115 14.0484 14.947 14.007L14.75 14L14.645 14.001C15.2001 13.5134 15.6089 12.8813 15.8259 12.175C16.0429 11.4688 16.0596 10.7162 15.874 10.001L20.25 10ZM12 8C12.394 8 12.7841 8.0776 13.1481 8.22836C13.512 8.37913 13.8427 8.6001 14.1213 8.87868C14.3999 9.15726 14.6209 9.48797 14.7716 9.85195C14.9224 10.2159 15 10.606 15 11C15 11.394 14.9224 11.7841 14.7716 12.1481C14.6209 12.512 14.3999 12.8427 14.1213 13.1213C13.8427 13.3999 13.512 13.6209 13.1481 13.7716C12.7841 13.9224 12.394 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11C9 10.2044 9.31607 9.44129 9.87868 8.87868C10.4413 8.31607 11.2044 8 12 8V8ZM6.5 3C7.29565 3 8.05871 3.31607 8.62132 3.87868C9.18393 4.44129 9.5 5.20435 9.5 6C9.5 6.79565 9.18393 7.55871 8.62132 8.12132C8.05871 8.68393 7.29565 9 6.5 9C5.70435 9 4.94129 8.68393 4.37868 8.12132C3.81607 7.55871 3.5 6.79565 3.5 6C3.5 5.20435 3.81607 4.44129 4.37868 3.87868C4.94129 3.31607 5.70435 3 6.5 3V3ZM17.5 3C18.2956 3 19.0587 3.31607 19.6213 3.87868C20.1839 4.44129 20.5 5.20435 20.5 6C20.5 6.79565 20.1839 7.55871 19.6213 8.12132C19.0587 8.68393 18.2956 9 17.5 9C16.7044 9 15.9413 8.68393 15.3787 8.12132C14.8161 7.55871 14.5 6.79565 14.5 6C14.5 5.20435 14.8161 4.44129 15.3787 3.87868C15.9413 3.31607 16.7044 3 17.5 3Z" }] }),
+  hypetrain: createEventIcon({ width: "239", height: "239", viewBox: "0 0 239 239", paths: [{ d: "M7 78.6188V75.3315C7 74.3002 7.35948 73.4461 8.07843 72.7693C8.79739 72.0925 9.67974 71.7541 10.7255 71.7541H90.0392C91.085 71.7541 91.9673 72.0925 92.6863 72.7693C93.4052 73.4461 93.7647 74.3002 93.7647 75.3315V78.6188C93.7647 79.6501 93.4052 80.5041 92.6863 81.1809C91.9673 81.8577 91.085 82.1961 90.0392 82.1961H85.4314V99.2127H107.588C107.85 96.3122 109.075 93.8628 111.265 91.8646C113.454 89.8665 116.052 88.8674 119.059 88.8674C122.065 88.8674 124.647 89.8665 126.804 91.8646C128.961 93.8628 130.17 96.3122 130.431 99.2127H144.255V64.2127C142.817 64.1482 141.592 63.5843 140.578 62.5207C139.565 61.4572 139.059 60.1842 139.059 58.7017V55.511C139.059 54.0285 139.631 52.7394 140.775 51.6436C141.918 50.5479 143.275 50 144.843 50H165.627C167.196 50 168.52 50.5479 169.598 51.6436C170.676 52.7394 171.216 54.0285 171.216 55.511V58.7017C171.216 60.1842 170.742 61.4572 169.794 62.5207C168.846 63.5843 167.654 64.1482 166.216 64.2127V99.2127H182.49C185.366 99.2127 187.833 100.244 189.892 102.307C191.951 104.369 192.98 106.819 192.98 109.655V139.82L232 190H182.392V158.674H174.941C176.052 161.381 176.608 164.25 176.608 167.279C176.608 173.531 174.369 178.881 169.892 183.329C165.415 187.776 160.007 190 153.667 190C147.327 190 141.902 187.776 137.392 183.329C132.882 178.881 130.627 173.531 130.627 167.279C130.627 164.25 131.183 161.381 132.294 158.674H121.804C122.98 161.51 123.569 164.378 123.569 167.279C123.569 173.531 121.297 178.881 116.755 183.329C112.212 187.776 106.771 190 100.431 190C94.0915 190 88.683 187.776 84.2059 183.329C79.7288 178.881 77.4902 173.531 77.4902 167.279C77.4902 164.25 78.0457 161.381 79.1569 158.674H66.8039C68.0458 161.704 68.6667 164.572 68.6667 167.279C68.6667 173.531 66.3954 178.881 61.8529 183.329C57.3105 187.776 51.8693 190 45.5294 190C39.1895 190 33.7647 187.776 29.2549 183.329C24.7451 178.881 22.4902 173.531 22.4902 167.279C22.4902 164.314 23.0784 161.413 24.2549 158.577C21.7059 158.191 19.5817 157.03 17.8824 155.097C16.183 153.163 15.3333 150.907 15.3333 148.329L15.1373 82.1961H10.7255C9.67974 82.1961 8.79739 81.8577 8.07843 81.1809C7.35948 80.5041 7 79.6501 7 78.6188ZM28.4706 119.323C28.4706 121.515 29.2549 123.368 30.8235 124.883C32.3922 126.397 34.2876 127.155 36.5098 127.155H51.6078C53.8301 127.155 55.6928 126.397 57.1961 124.883C58.6994 123.368 59.451 121.515 59.451 119.323V95.6354C59.451 93.5083 58.683 91.6874 57.1471 90.1727C55.6111 88.6579 53.7647 87.9006 51.6078 87.9006H36.5098C34.2876 87.9006 32.3922 88.674 30.8235 90.221C29.2549 91.768 28.4706 93.5727 28.4706 95.6354V119.323Z" }] }),
+  retweets: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M4.49841 3.88L8.93041 8.02001L7.56641 9.48L5.49841 7.55V16C5.49841 17.1 6.39441 18 7.49841 18H12.9984V20H7.49841C5.28941 20 3.49841 18.21 3.49841 16V7.55L1.43041 9.48L0.0664062 8.02001L4.49841 3.88ZM16.4984 6H10.9984V4H16.4984C18.7074 4 20.4984 5.79 20.4984 8V16.45L22.5664 14.52L23.9304 15.98L19.4984 20.12L15.0664 15.98L16.4304 14.52L18.4984 16.45V8C18.4984 6.9 17.6024 6 16.4984 6Z" }] }),
+  likes: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M34.6055 20.8477C35.2617 19.9805 35.625 18.918 35.625 17.8125C35.625 16.0586 34.6445 14.3985 33.0664 13.4727C32.6601 13.2344 32.1976 13.109 31.7266 13.1094H22.3594L22.5938 8.30862C22.6484 7.14847 22.2383 6.0469 21.4414 5.20706C21.0503 4.79311 20.5785 4.46375 20.0551 4.23935C19.5318 4.01494 18.9679 3.90025 18.3984 3.90237C16.3672 3.90237 14.5703 5.26956 14.0313 7.22659L10.6758 19.375H10.6641V36.0938H29.1133C29.4727 36.0938 29.8242 36.0235 30.1484 35.8828C32.0078 35.0899 33.207 33.2735 33.207 31.2578C33.207 30.7657 33.1367 30.2813 32.9961 29.8125C33.6523 28.9453 34.0156 27.8828 34.0156 26.7774C34.0156 26.2852 33.9453 25.8008 33.8047 25.3321C34.4609 24.4649 34.8242 23.4024 34.8242 22.2969C34.8164 21.8047 34.7461 21.3164 34.6055 20.8477V20.8477ZM4.375 20.625V34.8438C4.375 35.5352 4.93359 36.0938 5.625 36.0938H8.16406V19.375H5.625C4.93359 19.375 4.375 19.9336 4.375 20.625Z" }] }),
+  purchases: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M2 10.6667C2 9.42899 2.47411 8.242 3.31802 7.36683C4.16193 6.49167 5.30653 6 6.5 6H33.5C34.6935 6 35.8381 6.49167 36.682 7.36683C37.5259 8.242 38 9.42899 38 10.6667V22.3333H2V10.6667ZM27.875 13C27.5766 13 27.2905 13.1229 27.0795 13.3417C26.8685 13.5605 26.75 13.8572 26.75 14.1667V16.5C26.75 16.8094 26.8685 17.1062 27.0795 17.325C27.2905 17.5437 27.5766 17.6667 27.875 17.6667H32.375C32.6734 17.6667 32.9595 17.5437 33.1705 17.325C33.3815 17.1062 33.5 16.8094 33.5 16.5V14.1667C33.5 13.8572 33.3815 13.5605 33.1705 13.3417C32.9595 13.1229 32.6734 13 32.375 13H27.875ZM2 27V29.3333C2 30.571 2.47411 31.758 3.31802 32.6332C4.16193 33.5083 5.30653 34 6.5 34H33.5C34.6935 34 35.8381 33.5083 36.682 32.6332C37.5259 31.758 38 30.571 38 29.3333V27H2Z" }] }),
+  superstickers: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M19.5 4C10.9394 4 4 10.9394 4 19.5C4 28.0606 10.9394 35 19.5 35C28.0606 35 35 28.0606 35 19.5C35 19.0596 34.825 18.6371 34.5136 18.3257L20.6743 4.48641C20.3629 4.17497 19.9404 4 19.5 4ZM20.5259 9.03526C20.5191 9.15866 20.5142 9.28475 20.5117 9.41323C20.4743 11.2826 20.9189 13.584 22.7929 15.6021C24.631 17.5817 27.0717 18.1953 29.2046 18.2729C29.398 18.2799 29.5874 18.2824 29.7719 18.2812L20.5259 9.03526ZM21.0503 6.25626L21.0495 6.25835C21.0503 6.25618 21.0505 6.25558 21.0503 6.25626Z", fillRule: "evenodd", clipRule: "evenodd" }] }),
+  superchats: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M20 34.1289C28.836 34.1289 36 27.832 36 20.0644C36 12.2968 28.836 6 20 6C11.164 6 4 12.2968 4 20.0644C4 23.6006 5.486 26.8355 7.94 29.3068C7.746 31.3481 7.106 33.5864 6.398 35.2661C6.24 35.6398 6.546 36.0577 6.944 35.9934C11.456 35.25 14.138 34.1088 15.304 33.514C16.8358 33.9245 18.4146 34.1312 20 34.1289V34.1289Z" }] }),
+  stars: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M35.4727 13.793L25.5547 12.3516L21.1211 3.3633C21 3.1172 20.8008 2.91798 20.5547 2.79689C19.9375 2.4922 19.1875 2.74611 18.8789 3.3633L14.4453 12.3516L4.52736 13.793C4.25392 13.832 4.00392 13.961 3.81251 14.1563C3.58111 14.3941 3.4536 14.7141 3.458 15.0459C3.46239 15.3777 3.59833 15.6942 3.83595 15.9258L11.0117 22.9219L9.31642 32.8008C9.27666 33.0306 9.30209 33.2669 9.38982 33.483C9.47756 33.6991 9.62408 33.8863 9.81278 34.0234C10.0015 34.1604 10.2248 34.2418 10.4574 34.2584C10.6901 34.275 10.9227 34.2261 11.1289 34.1172L20 29.4531L28.8711 34.1172C29.1133 34.2461 29.3945 34.2891 29.6641 34.2422C30.3438 34.125 30.8008 33.4805 30.6836 32.8008L28.9883 22.9219L36.1641 15.9258C36.3594 15.7344 36.4883 15.4844 36.5274 15.211C36.6328 14.5274 36.1563 13.8945 35.4727 13.793V13.793Z" }] }),
+  fans: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M15 13.75C15 14.7446 14.605 15.6984 13.9017 16.4016C13.1984 17.1049 12.2446 17.5 11.25 17.5C10.7576 17.5001 10.2699 17.4032 9.81485 17.2148C9.35983 17.0264 8.94639 16.7501 8.59815 16.4019C8.2499 16.0537 7.97369 15.6402 7.78527 15.1852C7.59685 14.7302 7.49993 14.2425 7.50004 13.75C7.50004 11.6783 9.17837 10 11.25 10C13.3217 10 15 11.6783 15 13.75ZM3.33337 23.6108C3.33337 20.6558 8.60837 19.1667 11.25 19.1667C13.8917 19.1667 19.1667 20.6558 19.1667 23.6108V30H3.33337V23.6108ZM32.5 13.75C32.5 14.7446 32.105 15.6984 31.4017 16.4016C30.6984 17.1049 29.7446 17.5 28.75 17.5C28.2576 17.5001 27.7699 17.4032 27.3148 17.2148C26.8598 17.0264 26.4464 16.7501 26.0981 16.4019C25.7499 16.0537 25.4737 15.6402 25.2853 15.1852C25.0969 14.7302 24.9999 14.2425 25 13.75C25 11.6783 26.6784 10 28.75 10C30.8217 10 32.5 11.6783 32.5 13.75ZM22.5 12.5C22.5 13.163 22.2366 13.7989 21.7678 14.2678C21.299 14.7366 20.6631 15 20 15C19.337 15 18.7011 14.7366 18.2323 14.2678C17.7634 13.7989 17.5 13.163 17.5 12.5C17.5 11.837 17.7634 11.2011 18.2323 10.7322C18.7011 10.2634 19.337 10 20 10C20.6631 10 21.299 10.2634 21.7678 10.7322C22.2366 11.2011 22.5 11.837 22.5 12.5V12.5ZM20.8334 23.6108C20.8334 20.6558 26.1084 19.1667 28.75 19.1667C31.3917 19.1667 36.6667 20.6558 36.6667 23.6108V30H20.8334V23.6108Z" }, { d: "M23.9584 18.4875C23.7367 18.5692 23.5167 18.6558 23.3017 18.7483C22.3267 19.165 21.3409 19.7283 20.5751 20.4817C20.3701 20.6842 20.1751 20.905 20.0001 21.1458C19.8267 20.9092 19.6344 20.6871 19.4251 20.4817C18.6592 19.7283 17.6742 19.165 16.6976 18.7483C16.4809 18.6558 16.262 18.5688 16.0409 18.4875C17.3101 17.83 18.9417 17.5 20.0001 17.5C21.0584 17.5 22.6901 17.83 23.9584 18.4875Z", fillRule: "evenodd", clipRule: "evenodd" }] }),
+  shares: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M28.7857 24.25C27.3222 24.25 25.9772 24.7692 24.9154 25.6376L18.2812 21.384C18.4777 20.4723 18.4777 19.5276 18.2812 18.616L24.9154 14.3624C25.9772 15.2308 27.3222 15.75 28.7857 15.75C32.2177 15.75 35 12.8958 35 9.375C35 5.85421 32.2177 3 28.7857 3C25.3537 3 22.5714 5.85421 22.5714 9.375C22.5714 9.85034 22.6226 10.3133 22.7188 10.759L16.0846 15.0126C15.0228 14.1442 13.6777 13.625 12.2143 13.625C8.78225 13.625 6 16.4792 6 20C6 23.5208 8.78225 26.375 12.2143 26.375C13.6777 26.375 15.0228 25.8558 16.0846 24.9874L22.7188 29.241C22.6207 29.6955 22.5713 30.1596 22.5714 30.625C22.5714 34.1458 25.3537 37 28.7857 37C32.2177 37 35 34.1458 35 30.625C35 27.1042 32.2177 24.25 28.7857 24.25Z" }] }),
+  loyalty: createEventIcon({ width: "20", height: "20", viewBox: "0 0 20 20", paths: [{ d: "M16.5045 9.99998C16.5045 13.5923 13.5923 16.5045 9.99998 16.5045C6.40761 16.5045 3.49542 13.5923 3.49542 9.99998C3.49542 6.40761 6.40761 3.49542 9.99998 3.49542C13.5923 3.49542 16.5045 6.40761 16.5045 9.99998ZM18 9.99998C18 14.4182 14.4182 18 9.99998 18C5.58172 18 2 14.4182 2 9.99998C2 5.58172 5.58172 2 9.99998 2C14.4182 2 18 5.58172 18 9.99998ZM9.99998 16.2442C13.4486 16.2442 16.2442 13.4486 16.2442 9.99998C16.2442 6.55139 13.4486 3.75577 9.99998 3.75577C6.55139 3.75577 3.75577 6.55139 3.75577 9.99998C3.75577 13.4486 6.55139 16.2442 9.99998 16.2442ZM8.09761 6.5488H6.80644V7.30459H7.99759V7.75807H6.80644V8.51388H7.99759V13.4511H12.8894V12.432H9.08042V6.5505H8.09761V6.5488ZM10.137 6.5488H13.1936V7.30459H10.137V6.5488ZM13.1936 7.75807H10.137V8.51388H13.1936V7.75807Z", fillRule: "evenodd", clipRule: "evenodd" }] })
+};
+function EventTypeIcon({ type, ...props }) {
+  const Icon = (type != null ? EVENT_TYPE_ICONS[String(type).trim().toLowerCase()] : void 0) ?? EVENT_TYPE_FALLBACK_ICON;
+  return /* @__PURE__ */ jsx23(Icon, { ...props });
+}
+EventTypeIcon.displayName = "EventTypeIcon";
+
+// src/components/EventListItem/EventListItem.tsx
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+function EventListItem({
+  username,
+  message,
+  userMessage,
+  avatar,
+  fallbackAvatar,
+  timestamp,
+  platformIcon,
+  alertIcon,
+  eventType,
+  accentColor,
+  colorFullBackground,
+  showAvatar = true,
+  showTimestamp = true,
+  showMessage = true,
+  actions,
+  onUsernameClick,
+  className
+}) {
+  const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx24(EventTypeIcon, { type: eventType }) : null);
+  const style = {};
+  if (accentColor) {
+    style.borderLeftColor = accentColor;
+  }
+  if (colorFullBackground && accentColor) {
+    style.backgroundColor = `color-mix(in srgb, ${accentColor} 22%, var(--cardbackground, var(--neutralDark2, #211d3e)))`;
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: classNames13("ls-eventlist-item", className), style, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__main", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__identity", children: [
+        /* @__PURE__ */ jsx24(
+          "span",
+          {
+            className: classNames13("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
+            role: onUsernameClick ? "button" : void 0,
+            tabIndex: onUsernameClick ? 0 : void 0,
+            onClick: onUsernameClick,
+            onKeyDown: onUsernameClick ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onUsernameClick();
+              }
+            } : void 0,
+            children: username
+          }
+        ),
+        platformIcon ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
+        showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx24("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
+        resolvedAlertIcon ? /* @__PURE__ */ jsx24(
+          "span",
+          {
+            className: "ls-eventlist-item__icon",
+            style: accentColor ? { color: accentColor } : void 0,
+            children: resolvedAlertIcon
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__body", children: [
+        message ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__message", children: message }) : null,
+        showMessage && userMessage ? /* @__PURE__ */ jsxs14("span", { className: "ls-eventlist-item__usermessage", children: [
+          "\u201C",
+          userMessage,
+          "\u201D"
+        ] }) : null
+      ] }),
+      showTimestamp && timestamp ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx24("div", { className: "ls-eventlist-item__actions", children: actions }) : null
+  ] });
+}
+EventListItem.displayName = "EventListItem";
+
+// src/components/EventList/EventList.tsx
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
+import classNames14 from "classnames";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+var PIN_THRESHOLD = 24;
+function EventList({
+  items,
+  id,
+  showAvatars = true,
+  showTimestamps = true,
+  showMessages = true,
+  showPlatformIcons = true,
+  showActions = true,
+  colorFullBackground = false,
+  fallbackAvatar,
+  itemGap,
+  emptyText = "No events yet",
+  emptyIcon = "\u{1F389}",
+  emptyClassName,
+  autoScroll = true,
+  newestAt = "top",
+  onEndReached,
+  endReachedThreshold = 24,
+  className
+}) {
+  const listRef = useRef7(null);
+  const pinnedRef = useRef7(true);
+  useEffect7(() => {
+    const el = listRef.current;
+    if (!autoScroll || !el || !pinnedRef.current) {
+      return;
+    }
+    el.scrollTop = newestAt === "top" ? 0 : el.scrollHeight;
+  }, [items, autoScroll, newestAt]);
+  const handleScroll = () => {
+    const el = listRef.current;
+    if (!el) {
+      return;
+    }
+    const distanceFromEnd = el.scrollHeight - el.scrollTop - el.clientHeight;
+    const distanceFromNewest = newestAt === "top" ? el.scrollTop : distanceFromEnd;
+    const distanceFromOldest = newestAt === "top" ? distanceFromEnd : el.scrollTop;
+    pinnedRef.current = distanceFromNewest <= PIN_THRESHOLD;
+    if (onEndReached && distanceFromOldest <= endReachedThreshold) {
+      onEndReached();
+    }
+  };
+  return /* @__PURE__ */ jsx25("div", { className: classNames14("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
+    emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
+    /* @__PURE__ */ jsx25("span", { children: emptyText })
+  ] }) : /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: "ls-eventlist__list",
+      ref: listRef,
+      onScroll: handleScroll,
+      style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
+      children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
+        EventListItem,
+        {
+          username: item.username,
+          message: item.message,
+          userMessage: item.userMessage,
+          avatar: item.avatar,
+          fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
+          timestamp: item.timestamp,
+          platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
+          alertIcon: item.alertIcon,
+          eventType: item.eventType,
+          accentColor: item.accentColor,
+          colorFullBackground,
+          showAvatar: showAvatars,
+          showTimestamp: showTimestamps,
+          showMessage: showMessages,
+          actions: showActions ? item.actions : void 0,
+          onUsernameClick: item.onUsernameClick
+        }
+      ) }, item.id))
+    }
+  ) });
+}
+EventList.displayName = "EventList";
+
+// src/components/StreamStatusPanel/StreamStatusPanel.tsx
+import Tooltip4 from "@mui/material/Tooltip";
+import classNames15 from "classnames";
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+var LS_INFO_TOOLTIP_SX = {
+  backgroundColor: "#1b1834",
+  border: "1px solid #393853",
+  borderRadius: "0.75rem",
+  padding: "0.55rem 0.7rem",
+  maxWidth: 300,
+  color: "#ffffff",
+  fontSize: "0.75rem",
+  lineHeight: 1.5,
+  boxShadow: "0 10px 30px rgba(0, 0, 0, 0.45)"
+};
+var formatStatValue = (value) => value >= 1e3 ? `${value.toString().slice(0, -3)} K` : value.toString();
+var TrendUpArrow = () => /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx26("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.50059 8C3.36798 8 3.2408 7.94732 3.14704 7.85355C3.05327 7.75978 3.00059 7.63261 3.00059 7.5L3.00059 1.707L0.854589 3.854C0.808102 3.90049 0.752912 3.93736 0.692173 3.96252C0.631433 3.98768 0.566333 4.00063 0.500589 4.00063C0.434845 4.00063 0.369745 3.98768 0.309006 3.96252C0.248266 3.93736 0.193077 3.90049 0.146589 3.854C0.100101 3.80751 0.0632247 3.75232 0.0380658 3.69158C0.0129069 3.63084 -4.20509e-05 3.56574 -4.20451e-05 3.5C-4.20394e-05 3.43426 0.012907 3.36916 0.0380658 3.30842C0.0632247 3.24768 0.100101 3.19249 0.146589 3.146L3.14659 0.146C3.19304 0.0994364 3.24821 0.0624939 3.30896 0.0372874C3.3697 0.0120808 3.43482 -0.000893905 3.50059 -0.000893899C3.56636 -0.000893893 3.63148 0.0120809 3.69222 0.0372874C3.75297 0.062494 3.80814 0.0994365 3.85459 0.146L6.85459 3.146C6.90108 3.19249 6.93795 3.24768 6.96311 3.30842C6.98827 3.36916 7.00122 3.43426 7.00122 3.5C7.00122 3.56574 6.98827 3.63084 6.96311 3.69158C6.93795 3.75232 6.90108 3.80751 6.85459 3.854C6.7607 3.94789 6.63336 4.00063 6.50059 4.00063C6.43485 4.00063 6.36975 3.98768 6.30901 3.96252C6.24827 3.93736 6.19308 3.90049 6.14659 3.854L4.00059 1.707L4.00059 7.5C4.00059 7.63261 3.94791 7.75978 3.85414 7.85355C3.76037 7.94732 3.6332 8 3.50059 8Z", fill: "currentColor" }) });
+var TrendDownArrow = () => /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx26("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.50063 0C3.63324 0 3.76042 0.0526785 3.85419 0.146447C3.94795 0.240215 4.00063 0.367392 4.00063 0.5L4.00063 6.293L6.14663 4.146C6.19312 4.09951 6.24831 4.06264 6.30905 4.03748C6.36979 4.01232 6.43489 3.99937 6.50063 3.99937C6.56638 3.99937 6.63148 4.01232 6.69222 4.03748C6.75295 4.06264 6.80814 4.09951 6.85463 4.146C6.90112 4.19249 6.938 4.24768 6.96316 4.30842C6.98831 4.36916 7.00126 4.43426 7.00126 4.5C7.00126 4.56574 6.98831 4.63084 6.96316 4.69158C6.938 4.75232 6.90112 4.80751 6.85463 4.854L3.85463 7.854C3.80819 7.90056 3.75301 7.93751 3.69227 7.96271C3.63152 7.98792 3.5664 8.00089 3.50063 8.00089C3.43486 8.00089 3.36974 7.98792 3.309 7.96271C3.24825 7.93751 3.19308 7.90056 3.14663 7.854L0.146632 4.854C0.100144 4.80751 0.0632674 4.75232 0.0381083 4.69158C0.0129493 4.63084 0 4.56574 0 4.5C0 4.43426 0.0129493 4.36916 0.0381083 4.30842C0.0632674 4.24768 0.100144 4.19249 0.146632 4.146C0.240518 4.05211 0.367856 3.99937 0.500632 3.99937C0.566376 3.99937 0.631476 4.01232 0.692215 4.03748C0.752955 4.06264 0.808144 4.09951 0.854632 4.146L3.00063 6.293L3.00063 0.5C3.00063 0.367392 3.05331 0.240215 3.14708 0.146447C3.24085 0.0526785 3.36802 0 3.50063 0Z", fill: "currentColor" }) });
+function StreamStatusPanel({
+  online = false,
+  statusLabel,
+  statusSublabel,
+  statusSlot,
+  totalLabel,
+  totalValue,
+  totalAccentColor,
+  platforms,
+  platformsEmptyText = "No platforms connected",
+  stats = [],
+  statsLabelPosition = "bottom",
+  statsColumns,
+  emptyText = "No stream data",
+  id,
+  className
+}) {
+  const hasStatus = statusSlot != null || statusLabel != null;
+  const hasTotal = totalValue != null;
+  const hasPlatforms = platforms != null;
+  const hasStats = stats.length > 0;
+  if (!hasStatus && !hasTotal && !hasPlatforms && !hasStats) {
+    return /* @__PURE__ */ jsx26("div", { className: classNames15("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
+  }
+  return /* @__PURE__ */ jsxs16("div", { className: classNames15("ls-streamstatus", className), id, children: [
+    hasStatus ? /* @__PURE__ */ jsx26("div", { className: "ls-streamstatus__status", children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
+      /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__indicator", children: [
+        online ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__indicator-ping" }) : null,
+        /* @__PURE__ */ jsx26("span", { className: classNames15("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
+      ] }),
+      /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__status-body", children: [
+        /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
+        statusSublabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
+      ] })
+    ] }) }) : null,
+    hasTotal || hasPlatforms ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__overview", children: [
+      hasTotal ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__total", children: [
+        /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
+        totalLabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
+      ] }) : null,
+      hasPlatforms ? /* @__PURE__ */ jsx26("div", { className: "ls-streamstatus__platforms", children: platforms.length === 0 ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platforms-empty", children: platformsEmptyText }) : platforms.map((platform) => /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__platform", children: [
+        /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__platform-info", children: [
+          platform.icon != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-icon", children: platform.icon }) : getPlatformIconUrl(String(platform.id)) ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-icon", children: /* @__PURE__ */ jsx26(PlatformIcon, { platform: String(platform.id) }) }) : /* @__PURE__ */ jsx26(
+            "span",
+            {
+              className: "ls-streamstatus__platform-dot",
+              style: platform.accentColor ? { backgroundColor: platform.accentColor } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-label", children: platform.label })
+        ] }),
+        /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-value", children: platform.value })
+      ] }, platform.id)) }) : null
+    ] }) : null,
+    hasStats ? /* @__PURE__ */ jsx26(
+      "div",
+      {
+        className: "ls-streamstatus__stats",
+        style: statsColumns ? { gridTemplateColumns: `repeat(${statsColumns}, minmax(0, 1fr))` } : void 0,
+        children: stats.map((stat) => {
+          const label = stat.label != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
+          const showHead = stat.icon != null || stat.actions != null || statsLabelPosition === "top" && label != null;
+          const displayValue = typeof stat.value === "number" ? formatStatValue(stat.value) : stat.value;
+          const trend = typeof stat.value === "number" && stat.previousValue != null ? stat.value - stat.previousValue >= 0 ? "up" : "down" : void 0;
+          const node = /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat", style: stat.tooltip != null ? { cursor: "help" } : void 0, children: [
+            showHead ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat-head", children: [
+              stat.icon != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
+              statsLabelPosition === "top" ? label : null,
+              stat.actions != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
+            ] }) : null,
+            /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-value", style: stat.accentColor ? { color: stat.accentColor } : void 0, children: trend ? /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__stat-trendrow", children: [
+              displayValue,
+              trend === "up" ? /* @__PURE__ */ jsx26(TrendUpArrow, {}) : /* @__PURE__ */ jsx26(TrendDownArrow, {})
+            ] }) : displayValue }),
+            statsLabelPosition === "bottom" ? label : null,
+            stat.sub != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
+          ] }, stat.id);
+          return stat.tooltip != null ? /* @__PURE__ */ jsx26(Tooltip4, { title: stat.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }, stat.id) : node;
+        })
+      }
+    ) : null
+  ] });
+}
+StreamStatusPanel.displayName = "StreamStatusPanel";
+
+// src/components/ViewersList/ViewersList.tsx
+import * as React from "react";
+import { useMemo as useMemo5, useState as useState9 } from "react";
+import classNames16 from "classnames";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+function ViewersList({
+  viewers,
+  groups,
+  countLabel,
+  showSearch = true,
+  searchPlaceholder = "Search\u2026",
+  searchSlot,
+  showAvatars = true,
+  fallbackAvatar,
+  hint,
+  emptyText = "No viewers",
+  emptyIcon = "\u{1F440}",
+  onUsernameClick,
+  id,
+  className
+}) {
+  const [query, setQuery] = useState9("");
+  const internalSearch = showSearch && !searchSlot;
+  const filtered = useMemo5(
+    () => internalSearch && query ? viewers.filter((viewer) => viewer.username.toLowerCase().includes(query.toLowerCase())) : viewers,
+    [internalSearch, viewers, query]
+  );
+  const sections = useMemo5(() => {
+    if (!groups || groups.length === 0) {
+      return [{ key: "", viewers: filtered }];
+    }
+    const known = new Set(groups.map((group) => group.key));
+    const grouped = groups.map((group) => ({ key: group.key, label: group.label, viewers: filtered.filter((viewer) => viewer.group === group.key) }));
+    const rest = filtered.filter((viewer) => !viewer.group || !known.has(viewer.group));
+    return [...grouped, { key: "", viewers: rest }].filter((section) => section.viewers.length > 0);
+  }, [groups, filtered]);
+  const showHead = countLabel != null || searchSlot != null || internalSearch;
+  return /* @__PURE__ */ jsxs17("div", { className: classNames16("ls-viewerslist", className), id, children: [
+    showHead ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__head", children: [
+      countLabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
+      searchSlot ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
+      internalSearch ? /* @__PURE__ */ jsx27("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
+    ] }) : null,
+    hint != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__hint", children: hint }) : null,
+    filtered.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__empty", children: [
+      emptyIcon ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
+      /* @__PURE__ */ jsx27("span", { children: emptyText })
+    ] }) : /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs17(React.Fragment, { children: [
+      section.label != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__group", children: section.label }) : null,
+      section.viewers.map((viewer) => {
+        const avatarSrc = viewer.avatar || viewer.fallbackAvatar || fallbackAvatar;
+        const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx27(PlatformIcon, { platform: viewer.platform }) : null);
+        return /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__viewer", children: [
+          showAvatars && avatarSrc ? /* @__PURE__ */ jsx27("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
+          platformIcon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
+          /* @__PURE__ */ jsx27(
+            "span",
+            {
+              className: classNames16("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
+              title: viewer.username,
+              role: onUsernameClick ? "button" : void 0,
+              tabIndex: onUsernameClick ? 0 : void 0,
+              onClick: onUsernameClick ? () => onUsernameClick(viewer) : void 0,
+              onKeyDown: onUsernameClick ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onUsernameClick(viewer);
+                }
+              } : void 0,
+              children: viewer.username
+            }
+          ),
+          viewer.badges != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
+          viewer.actions != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
+        ] }, viewer.id);
+      })
+    ] }, section.key || "__ungrouped")) })
+  ] });
+}
+ViewersList.displayName = "ViewersList";
+
+// src/components/ShortcutDockGrid/ShortcutDockGrid.tsx
+import classNames17 from "classnames";
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+var softAccent = (color) => /^#[0-9a-fA-F]{6}$/.test(color) ? `${color}66` : color;
+function ShortcutDockGrid({
+  buttons,
+  onTrigger,
+  editMode = false,
+  onRemove,
+  onAdd,
+  addLabel = "\uFF0B",
+  addTitle = "Add button",
+  removeTitle = "Remove",
+  selectedId = null,
+  minButtonSize = 70,
+  rowHeight,
+  useColors = true,
+  disabled = false,
+  readOnly = false,
+  emptyText,
+  renderButton,
+  id,
+  className
+}) {
+  const showAdd = editMode && Boolean(onAdd);
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      className: classNames17(
+        "ls-shortcutdock",
+        { "ls-shortcutdock--disabled": disabled, "ls-shortcutdock--readonly": readOnly },
+        className
+      ),
+      id,
+      style: {
+        gridTemplateColumns: `repeat(auto-fill, minmax(${minButtonSize}px, 1fr))`,
+        gridAutoRows: rowHeight ? `${rowHeight}px` : "auto"
+      },
+      children: [
+        buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx28("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
+        buttons.map((button) => {
+          const large = (button.w ?? 1) > 1 || (button.h ?? 1) > 1;
+          const selected = selectedId != null && selectedId === button.id;
+          const colored = useColors && Boolean(button.color);
+          const cellStyle = {
+            gridColumn: `span ${button.w ?? 1}`,
+            gridRow: `span ${button.h ?? 1}`,
+            ...rowHeight ? {} : { minHeight: minButtonSize },
+            ...colored ? { ["--ls-shortcutdock-accent"]: button.color, ["--ls-shortcutdock-accent-soft"]: softAccent(button.color) } : {}
+          };
+          const node = /* @__PURE__ */ jsx28(
+            "button",
+            {
+              type: "button",
+              className: classNames17("ls-shortcutdock__btn", {
+                "ls-shortcutdock__btn--selected": selected,
+                "ls-shortcutdock__btn--colored": colored && !selected,
+                "ls-shortcutdock__btn--icon-only": button.label == null && button.content == null,
+                "ls-shortcutdock__btn--lg": large
+              }),
+              disabled: disabled || button.disabled,
+              onClick: () => {
+                if (!disabled && !readOnly) {
+                  onTrigger?.(button.id);
+                }
+              },
+              children: button.content ?? /* @__PURE__ */ jsxs18(Fragment9, { children: [
+                button.image ? /* @__PURE__ */ jsx28("img", { className: "ls-shortcutdock__btn-image", src: button.image, alt: "" }) : button.icon != null ? /* @__PURE__ */ jsx28("span", { className: "ls-shortcutdock__icon", children: button.icon }) : null,
+                button.label != null ? /* @__PURE__ */ jsx28("span", { className: "ls-shortcutdock__label", children: button.label }) : null
+              ] })
+            }
+          );
+          return /* @__PURE__ */ jsxs18("div", { className: "ls-shortcutdock__cell", style: cellStyle, title: button.title, children: [
+            renderButton ? renderButton(button, node) : node,
+            editMode && onRemove ? /* @__PURE__ */ jsx28("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
+          ] }, button.id);
+        }),
+        showAdd ? /* @__PURE__ */ jsx28(
+          "button",
+          {
+            type: "button",
+            className: "ls-shortcutdock__add",
+            style: rowHeight ? void 0 : { minHeight: minButtonSize },
+            title: addTitle,
+            onClick: onAdd,
+            children: addLabel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+ShortcutDockGrid.displayName = "ShortcutDockGrid";
+
+// src/components/GoalsList/GoalsList.tsx
+import Tooltip5 from "@mui/material/Tooltip";
+import classNames18 from "classnames";
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+var GOAL_TOOLTIP_SX = {
+  backgroundColor: "#1b1834",
+  border: "1px solid #393853",
+  borderRadius: "0.75rem",
+  padding: "0.55rem 0.7rem",
+  maxWidth: 300,
+  color: "#ffffff",
+  fontSize: "0.75rem",
+  lineHeight: 1.5,
+  boxShadow: "0 10px 30px rgba(0, 0, 0, 0.45)"
+};
+var clampPercent = (value) => Math.max(0, Math.min(100, Math.round(value)));
+var resolvePercent = (goal) => {
+  if (goal.percent != null) {
+    return clampPercent(goal.percent);
+  }
+  if (!goal.target) {
+    return 0;
+  }
+  return clampPercent((goal.current ?? 0) / goal.target * 100);
+};
+function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goal data yet", id, className }) {
+  const fmt = (value, goal) => formatValue ? formatValue(value, goal) : value;
+  return /* @__PURE__ */ jsx29("div", { className: classNames18("ls-goals", className), id, children: goals.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "ls-goals__empty", children: emptyText }) : goals.map((goal) => {
+    const percent = resolvePercent(goal);
+    const rowStyle = {
+      ...goal.accentColor ? { ["--ls-goals-accent"]: goal.accentColor } : {},
+      ...goal.tooltip != null ? { cursor: "help" } : {}
+    };
+    const node = /* @__PURE__ */ jsxs19("div", { className: "ls-goals__row", style: rowStyle, children: [
+      /* @__PURE__ */ jsxs19("div", { className: "ls-goals__head", children: [
+        goal.icon != null ? /* @__PURE__ */ jsx29("span", { className: "ls-goals__icon", children: goal.icon }) : null,
+        /* @__PURE__ */ jsx29("span", { className: "ls-goals__label", children: goal.label }),
+        /* @__PURE__ */ jsx29("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
+          fmt(goal.current ?? 0, goal),
+          " ",
+          /* @__PURE__ */ jsxs19("span", { className: "ls-goals__target", children: [
+            "/ ",
+            fmt(goal.target ?? 0, goal)
+          ] })
+        ] }) }),
+        showPercent ? /* @__PURE__ */ jsxs19("span", { className: "ls-goals__percent", children: [
+          percent,
+          "%"
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx29("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx29("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
+    ] }, goal.id);
+    return goal.tooltip != null ? /* @__PURE__ */ jsx29(Tooltip5, { title: goal.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: GOAL_TOOLTIP_SX } }, children: node }, goal.id) : node;
+  }) });
+}
+GoalsList.displayName = "GoalsList";
+
+// src/components/ModQueueItem/ModQueueItem.tsx
+import IconButton from "@mui/material/IconButton";
+import classNames19 from "classnames";
+
+// src/components/ModQueueItem/icons.tsx
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+function CrossBoxIcon({ className }) {
+  return /* @__PURE__ */ jsxs20("svg", { className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx30("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
+    /* @__PURE__ */ jsx30(
+      "path",
+      {
+        d: "M14.3571 7.71806L12.8756 6.23657L10.2843 8.82791L7.69292 6.23657L6.21143 7.71806L8.80276 10.3094L6.21143 12.9007L7.69292 14.3822L10.2843 11.7909L12.8756 14.3822L14.3571 12.9007L11.7657 10.3094L14.3571 7.71806Z",
+        fill: "#E76E6E"
+      }
+    )
+  ] });
+}
+function TickBoxIcon({ className }) {
+  return /* @__PURE__ */ jsxs20("svg", { className, width: "22", height: "21", viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx30("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
+    /* @__PURE__ */ jsx30(
+      "path",
+      {
+        d: "M14.8908 5.49829L9.85209 12.1414L6.87311 9.16455L5.49854 10.5391L10.0798 15.1203L16.4952 6.87287L14.8908 5.49829Z",
+        fill: "#93F0A2"
+      }
+    )
+  ] });
+}
+
+// src/components/ModQueueItem/ModQueueItem.tsx
+import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+function ModQueueItem({
+  username,
+  avatar,
+  fallbackAvatar,
+  command,
+  message,
+  icon,
+  actions,
+  onApprove,
+  onDeny,
+  className
+}) {
+  return /* @__PURE__ */ jsxs21("div", { className: classNames19("ls-modqueue-item", className), children: [
+    icon ? /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
+    /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__body", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__head", children: [
+        avatar || fallbackAvatar ? /* @__PURE__ */ jsx31("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
+        username ? /* @__PURE__ */ jsx31(
+          "span",
+          {
+            className: "ls-modqueue-item__username",
+            title: typeof username === "string" ? username : void 0,
+            children: username
+          }
+        ) : null,
+        command ? /* @__PURE__ */ jsx31("span", { className: "ls-modqueue-item__command", children: command }) : null
+      ] }),
+      message ? /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__message", children: [
+        "\u201C",
+        message,
+        "\u201D"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
+      /* @__PURE__ */ jsx31(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onDeny, "aria-label": "Deny", children: /* @__PURE__ */ jsx31(CrossBoxIcon, { className: "ls-modqueue-item__action-icon" }) }),
+      /* @__PURE__ */ jsx31(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onApprove, "aria-label": "Approve", children: /* @__PURE__ */ jsx31(TickBoxIcon, { className: "ls-modqueue-item__action-icon" }) })
+    ] }) })
+  ] });
+}
+ModQueueItem.displayName = "ModQueueItem";
+
+// src/components/ModQueueList/ModQueueList.tsx
+import { useMemo as useMemo6, useState as useState10 } from "react";
+import ButtonBase from "@mui/material/ButtonBase";
+import classNames20 from "classnames";
+
+// src/components/ModQueueList/icons.tsx
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+function SearchIcon({ className }) {
+  return /* @__PURE__ */ jsx32("svg", { className, width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M5.6 1.4C4.48609 1.4 3.4178 1.8425 2.63015 2.63015C1.8425 3.4178 1.4 4.48609 1.4 5.6C1.4 6.15155 1.50864 6.6977 1.71971 7.20727C1.93078 7.71684 2.24015 8.17984 2.63015 8.56985C3.02016 8.95986 3.48316 9.26923 3.99273 9.48029C4.5023 9.69136 5.04845 9.8 5.6 9.8C6.15155 9.8 6.6977 9.69136 7.20727 9.48029C7.71684 9.26923 8.17984 8.95986 8.56985 8.56985C8.95986 8.17984 9.26923 7.71684 9.48029 7.20727C9.69136 6.6977 9.8 6.15155 9.8 5.6C9.8 4.48609 9.3575 3.4178 8.56985 2.63015C7.7822 1.8425 6.71391 1.4 5.6 1.4ZM1.6402 1.6402C2.69041 0.589998 4.11479 0 5.6 0C7.08521 0 8.50959 0.589998 9.5598 1.6402C10.61 2.69041 11.2 4.11479 11.2 5.6C11.2 6.3354 11.0552 7.0636 10.7737 7.74303C10.582 8.20579 10.3296 8.63975 10.0237 9.03377L13.795 12.805C14.0683 13.0784 14.0683 13.5216 13.795 13.795C13.5216 14.0683 13.0784 14.0683 12.805 13.795L9.03377 10.0237C8.63975 10.3296 8.20579 10.582 7.74303 10.7737C7.0636 11.0552 6.3354 11.2 5.6 11.2C4.8646 11.2 4.1364 11.0552 3.45697 10.7737C2.77755 10.4923 2.16021 10.0798 1.6402 9.5598C1.12019 9.03979 0.707701 8.42245 0.426275 7.74303C0.144848 7.0636 0 6.3354 0 5.6C4.20903e-08 4.11479 0.589998 2.69041 1.6402 1.6402Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function EmptyModQueueIcon({ className }) {
+  return /* @__PURE__ */ jsxs22("svg", { className, width: "39", height: "39", viewBox: "0 0 39 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx32(
+      "path",
+      {
+        d: "M17.8486 23.9297C17.8487 26.2984 19.0186 28.5764 20.8398 30H11V26.25C11.002 24.8582 11.5559 23.5242 12.54 22.54C13.5242 21.5559 14.8582 21.0019 16.25 21H17.8486V23.9297Z",
+        fill: "#CAC9D5"
+      }
+    ),
+    /* @__PURE__ */ jsx32(
+      "path",
+      {
+        d: "M24.9043 19.7451C24.6452 20.2749 24.5 20.8705 24.5 21.5C24.5 23.3373 25.7389 24.8844 27.4268 25.3535C26.8965 27.1804 25.5079 28.7064 23.75 29.1641C21.4908 28.5758 19.84 26.2235 19.8398 23.7354V21.0205L23.75 19.2109L24.9043 19.7451Z",
+        fill: "#CAC9D5"
+      }
+    ),
+    /* @__PURE__ */ jsx32("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
+    /* @__PURE__ */ jsx32("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
+    /* @__PURE__ */ jsx32(
+      "path",
+      {
+        d: "M18.5 9C19.5384 9 20.5536 9.30789 21.417 9.88477C22.2802 10.4616 22.9532 11.282 23.3506 12.2412C23.7478 13.2004 23.852 14.2561 23.6494 15.2744C23.4468 16.2928 22.9461 17.2278 22.2119 17.9619C21.8356 18.3383 21.4066 18.6536 20.9404 18.8984L20.248 19.2002C20.0129 19.2832 19.771 19.3504 19.5244 19.3994C18.5062 19.602 17.4504 19.4978 16.4912 19.1006C15.5319 18.7032 14.7117 18.0302 14.1348 17.167C13.5579 16.3036 13.25 15.2884 13.25 14.25C13.25 12.8576 13.8035 11.5227 14.7881 10.5381C15.7726 9.55352 17.1076 9 18.5 9Z",
+        fill: "#CAC9D5"
+      }
+    )
+  ] });
+}
+
+// src/components/ModQueueList/ModQueueList.tsx
+import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+var matches = (item, q) => {
+  if (!q) {
+    return true;
+  }
+  const hay = item.searchText ?? `${item.username ?? ""} ${typeof item.command === "string" ? item.command : ""} ${typeof item.message === "string" ? item.message : ""}`;
+  return hay.toLowerCase().includes(q.toLowerCase());
+};
+function ModQueueList({
+  items,
+  id,
+  showSearch = true,
+  searchPlaceholder = "Search by username or command ...",
+  searchValue,
+  onSearchChange,
+  searchSlot,
+  canModerate = true,
+  showAvatars = true,
+  showMessages = true,
+  fallbackAvatar,
+  emptyText = "Mod queue is empty",
+  emptyIcon,
+  approveAllLabel = "Approve all",
+  denyAllLabel = "Deny all",
+  onApprove,
+  onDeny,
+  className
+}) {
+  const [internalQuery, setInternalQuery] = useState10("");
+  const query = searchValue !== void 0 ? searchValue : internalQuery;
+  const handleSearchChange = (value) => {
+    if (searchValue === void 0) {
+      setInternalQuery(value);
+    }
+    onSearchChange?.(value);
+  };
+  const internalSearch = showSearch && !searchSlot;
+  const filtered = useMemo6(() => internalSearch ? items.filter((item) => matches(item, query)) : items, [internalSearch, items, query]);
+  return /* @__PURE__ */ jsxs23("div", { className: classNames20("ls-modqueue", className), id, children: [
+    searchSlot ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx33(
+      LSInput,
+      {
+        size: "small",
+        placeholder: searchPlaceholder,
+        startAdornment: /* @__PURE__ */ jsx33(SearchIcon, { className: "ls-modqueue__search-icon" }),
+        value: query,
+        onChange: (e) => handleSearchChange(String(e.target.value ?? ""))
+      }
+    ) }) : null,
+    filtered.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__empty", children: [
+      /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx33(EmptyModQueueIcon, {}) }),
+      /* @__PURE__ */ jsx33("span", { children: emptyText })
+    ] }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
+      canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__bulk", children: [
+        onDeny ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
+          /* @__PURE__ */ jsx33(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
+          denyAllLabel
+        ] }) : null,
+        onApprove ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--approve", disableRipple: true, onClick: () => onApprove("all"), children: [
+          /* @__PURE__ */ jsx33(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
+          approveAllLabel
+        ] }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx33(
+        ModQueueItem,
+        {
+          icon: item.icon,
+          avatar: showAvatars ? item.avatar : void 0,
+          fallbackAvatar: showAvatars ? item.fallbackAvatar ?? fallbackAvatar : void 0,
+          username: item.username,
+          command: item.command,
+          message: showMessages ? item.message : void 0,
+          onApprove: () => onApprove?.(item.id),
+          onDeny: () => onDeny?.(item.id),
+          actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__readonly", children: "read-only" }))
+        },
+        item.id
+      )) })
+    ] })
+  ] });
+}
+ModQueueList.displayName = "ModQueueList";
+
+// src/components/ModActivityLog/ModActivityLog.tsx
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import classNames21 from "classnames";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", autoScroll, className }) {
+  const listRef = useRef8(null);
+  useEffect8(() => {
+    if (autoScroll && listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [logs, autoScroll]);
+  return /* @__PURE__ */ jsxs24("div", { className: classNames21("ls-modlog", className), children: [
+    onClear && logs.length > 0 ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__toolbar", children: /* @__PURE__ */ jsx34("button", { type: "button", className: "ls-modlog__clear", onClick: onClear, children: clearLabel }) }) : null,
+    logs.length === 0 ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__empty", children: emptyText ?? "No activity yet" }) : /* @__PURE__ */ jsx34("div", { className: "ls-modlog__list", ref: listRef, children: logs.map((log, i) => {
+      const rowStyle = {
+        ...log.tabColor ? { ["--ls-modlog-accent"]: log.tabColor } : {},
+        ...log.barColor ? { ["--ls-modlog-bar"]: log.barColor } : {}
+      };
+      return /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__row", style: rowStyle, children: [
+        /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__head", children: [
+          log.avatar ? /* @__PURE__ */ jsx34("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
+          log.title ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__title", children: log.title }) : null,
+          log.time ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__time", children: log.time }) : null
+        ] }),
+        log.message ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__message", children: log.message }) : null
+      ] }, log.id ?? i);
+    }) })
+  ] });
+}
+ModActivityLog.displayName = "ModActivityLog";
+
+// src/components/SongRequestList/SongRequestList.tsx
+import { useState as useState11 } from "react";
+import classNames22 from "classnames";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+function SongRequestList({
+  nowPlaying,
+  progress = 0,
+  isPlaying = true,
+  queue,
+  showArt = true,
+  showRequester = true,
+  showQueue = true,
+  onPlayPause,
+  onSkip,
+  onRemove,
+  onAddSong,
+  addPlaceholder = "Add a song or paste a link...",
+  addLabel = "Add",
+  addDisabled = false,
+  emptyText,
+  className
+}) {
+  const [addValue, setAddValue] = useState11("");
+  const submitAdd = () => {
+    const query = addValue.trim();
+    if (!query || addDisabled || !onAddSong) {
+      return;
+    }
+    onAddSong(query);
+    setAddValue("");
+  };
+  const addBar = onAddSong ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__addbar", children: [
+    /* @__PURE__ */ jsx35(
+      LSInput,
+      {
+        className: "ls-songreq__addinput",
+        size: "small",
+        placeholder: addPlaceholder,
+        value: addValue,
+        disabled: addDisabled,
+        onChange: (event) => setAddValue(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            submitAdd();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx35(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
+  ] }) : null;
+  if (!nowPlaying) {
+    if (!addBar) {
+      return /* @__PURE__ */ jsx35("div", { className: classNames22("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
+    }
+    return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
+      addBar,
+      /* @__PURE__ */ jsx35("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
+    ] });
+  }
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
+    addBar,
+    /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__now", children: [
+      showArt && nowPlaying.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
+      /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__nowbody", children: [
+        /* @__PURE__ */ jsx35("div", { className: "ls-songreq__title", children: nowPlaying.title }),
+        nowPlaying.artist ? /* @__PURE__ */ jsx35("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
+        showRequester && nowPlaying.requester ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__requester", children: [
+          "requested by ",
+          nowPlaying.requester
+        ] }) : null,
+        /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
+      ] }),
+      /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__controls", children: [
+        onPlayPause ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__btn", onClick: onPlayPause, title: isPlaying ? "Pause" : "Play", "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? "\u23F8" : "\u25B6" }) : null,
+        onSkip ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
+      ] })
+    ] }),
+    showQueue ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queue", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queuehead", children: [
+        "Up next \xB7 ",
+        queue.length
+      ] }),
+      /* @__PURE__ */ jsx35("div", { className: "ls-songreq__queuelist", children: queue.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "ls-songreq__queueempty", children: "Queue is empty" }) : queue.map((item) => /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__item", children: [
+        showArt && item.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
+        /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itembody", children: [
+          /* @__PURE__ */ jsx35("div", { className: "ls-songreq__itemtitle", children: item.title }),
+          /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itemmeta", children: [
+            item.artist,
+            showRequester && item.requester ? ` \xB7 ${item.requester}` : ""
+          ] })
+        ] }),
+        onRemove ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
+      ] }, item.id)) })
+    ] }) : null
+  ] });
+}
+SongRequestList.displayName = "SongRequestList";
 export {
+  ChatMessageItem,
+  ChatboxPanel,
+  DialogChrome,
+  EVENT_TYPE_FALLBACK_ICON,
+  EVENT_TYPE_ICONS,
+  EventList,
+  EventListItem,
+  EventTypeIcon,
+  GoalsList,
   LSButton,
   LSCheckbox,
   LSCheckboxField,
@@ -2279,7 +4360,24 @@ export {
   LSRadioGroup,
   LSSelect,
   LSSliderInput,
+  LSSwitch,
   LSTextField,
   LSVariableInputField,
-  LSVariableInputProvider
+  LSVariableInputProvider,
+  ModActivityLog,
+  ModQueueItem,
+  ModQueueList,
+  ModalChrome,
+  PLATFORM_ICON_URLS,
+  PanelChrome,
+  PlatformIcon,
+  ShortcutDockGrid,
+  SongRequestList,
+  StreamStatusPanel,
+  ViewersList,
+  WidgetChrome,
+  WidgetChromeButton,
+  formatStatValue,
+  getPlatformIconUrl,
+  useAutoScroll
 };