@lumiastream/ui 0.8.7 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
21
21
  }
22
22
 
23
23
  // src/lumia-ui.css
24
- styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n font: inherit;\n letter-spacing: inherit;\n color: inherit;\n margin: 0;\n}\n.ls-color-picker__preview {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n text-transform: uppercase;\n user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n color: var(--neutralLight2, var(--white2, #cac9d5));\n opacity: 0.45;\n background-color: var(--separator, #0a0821);\n cursor: not-allowed;\n}\n.mui-ls-button {\n border-radius: var(--radius, 1rem);\n padding: 0.375rem 1.5rem;\n text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n background: var(--primary, #ff4076);\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n background-color: var(--secondary, #535395);\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n background-color: var(--secondary, #535395);\n color: var(--neutralLight2, var(--white2, #cac9d5));\n opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n color: var(--primary, #ff4076);\n border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n border-color: var(--primary, #ff4076);\n background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n color: var(--neutralLight1, var(--white, #fff));\n border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n color: var(--neutralLight2, var(--white2, #cac9d5));\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n border-color: var(--secondary, #535395);\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n color: var(--error, #fd5454);\n border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n border-color: var(--error, #fd5454);\n background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n background-color: var(--neutralDark4, var(--cardborder, #393853));\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n color: var(--neutralLight1, var(--white, #fff));\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n border-color: var(--neutralLight3, var(--grey, #9392a1));\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n max-height: 24px;\n max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n cursor: pointer;\n opacity: 0.9;\n filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n display: flex;\n min-height: calc(var(--ls-control-height) - 2px);\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n min-width: 0;\n}\n.MuiSvgIcon-root svg {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n fill: currentcolor;\n stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n display: block;\n flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n color: var(--neutralLight3, var(--grey, #9392a1));\n opacity: 0.55;\n font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n color: var(--neutralLight1, var(--white, #fff));\n opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n border-radius: var(--radius, 1rem) !important;\n background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n padding: 0.25rem 0 !important;\n background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n position: sticky;\n top: 0;\n z-index: 1;\n min-height: 32px;\n padding: 0.45rem 1rem 0.25rem !important;\n background: var(--neutralDark1, var(--background, #18162f)) !important;\n color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n font-size: 0.75rem !important;\n font-weight: 700 !important;\n letter-spacing: 0 !important;\n line-height: 1.2 !important;\n text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n display: flex !important;\n min-height: 44px !important;\n align-items: center !important;\n padding: 0.625rem 1rem !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n font-size: 1rem !important;\n line-height: 1.35 !important;\n cursor: pointer !important;\n transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n width: 40px;\n height: 40px;\n flex: 0 0 40px;\n border-radius: var(--radius, 1rem);\n object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n min-width: 0;\n}\n.ls-variable-option__label {\n color: var(--neutralLight1, var(--white, #fff));\n font-weight: 500;\n line-height: 1.25;\n}\n.ls-variable-option__helper {\n margin-top: 0.125rem;\n color: var(--neutralLight3, var(--grey, #9392a1));\n font-size: 0.875rem;\n line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n max-height: none !important;\n}\n.ls-color-picker__gradient {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n min-width: 24px;\n margin-left: 0.35rem;\n border-radius: var(--radius, 1rem);\n background: var(--primary, #ff4076) !important;\n color: var(--alwayswhite, var(--white, #fff)) !important;\n font-weight: 800;\n line-height: 1;\n letter-spacing: 0;\n cursor: pointer;\n user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n color: currentcolor !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n position: relative;\n min-width: 0;\n width: 100%;\n min-height: var(--ls-control-height);\n margin: 0;\n border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n border-radius: var(--radius, 1rem);\n padding: 0 0.875rem 0.5rem 0.875rem;\n background: transparent;\n color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n display: block;\n width: auto;\n max-width: calc(100% - 1rem);\n margin: 0;\n padding: 0 0.25rem;\n color: var(--neutralLight1, var(--white, #fff));\n font-size: 0.875rem;\n line-height: 1.1;\n white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n display: flex;\n min-width: 0;\n min-height: calc(var(--ls-control-height) - 14px);\n align-items: center;\n gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n display: block;\n margin-top: 0.25rem;\n color: var(--neutralLight3, var(--grey, #9392a1));\n font-size: 0.75rem;\n line-height: 1.25;\n}\n.ls-multi-select-value {\n display: flex;\n width: 100%;\n min-width: 0;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n overflow: hidden;\n white-space: nowrap;\n}\n.ls-multi-select-value__label {\n min-width: 0;\n flex: 1 1 0%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-multi-select-value__count {\n flex-shrink: 0;\n white-space: nowrap;\n}\n.ls-color-picker__preview {\n position: relative;\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n border-radius: var(--radius, 1rem);\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n color: transparent;\n line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n box-shadow:\n 0 0 0 2px var(--primary, #ff4076),\n 0 0 0 4px var(--neutralDark1, #1b1a28),\n 0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n stroke: #fff !important;\n}\n.ls-variable-picker {\n --variable-custom-color: var(--customVariables, #69ffd2);\n --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n display: flex;\n width: 92vw;\n max-width: 1100px;\n min-height: 50vh;\n max-height: 55vh;\n flex-direction: column;\n overflow: hidden;\n padding: 1rem;\n}\n.ls-variable-picker__field {\n margin: 0 0 0.75rem;\n border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n border-radius: var(--radius, 1rem);\n padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n padding-inline: 0.375rem;\n color: var(--primary, #ff4076);\n font-size: 0.75rem;\n font-weight: 700;\n}\n.ls-variable-picker__intro {\n margin-bottom: 1rem;\n color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n display: grid;\n grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n gap: 2rem;\n}\n.ls-variable-picker__header {\n margin-bottom: 0.25rem;\n padding-inline: 0.25rem;\n padding-right: 1.7rem;\n color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n height: 100%;\n overflow: auto;\n padding-right: 1rem;\n}\n.ls-variable-picker__row {\n cursor: pointer;\n align-items: start;\n border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n width: 24px;\n height: 24px;\n flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n border-radius: var(--radius, 1rem);\n padding: 0;\n background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n color: var(--neutralLight2, #cac9d5);\n transition:\n background-color 140ms ease,\n border-color 140ms ease,\n color 140ms ease,\n transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n border-color: var(--primary, #ff4076);\n background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n transform: rotate(-90deg);\n transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n opacity: 0.8;\n}\n.ls-variable-picker__description {\n max-width: 600px;\n overflow-wrap: break-word;\n line-height: 1.25;\n word-break: break-all;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description {\n display: block;\n cursor: default;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n color: var(--neutralLight2, #cac9d5);\n overflow-wrap: break-word;\n line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n opacity: 1;\n}\n.ls-variable-picker__value {\n min-width: 0;\n}\n.ls-variable-picker__value-input {\n width: 100%;\n min-width: 0;\n cursor: text;\n overflow: hidden;\n border: 0;\n background: transparent;\n color: var(--neutralLight1, var(--white, #fff));\n caret-color: transparent;\n font: inherit;\n font-size: 1rem;\n line-height: 1.25;\n outline: 0;\n padding: 0;\n text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n display: flex;\n min-width: 0;\n align-items: center;\n}\n.ls-variable-token--suggested {\n color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n position: absolute;\n margin: 0;\n border: 0;\n box-sizing: border-box;\n overflow: hidden;\n pointer-events: none;\n background: transparent;\n color: inherit;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n z-index: 0;\n}\n.ls-variable-highlight__token {\n border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n color: var(--customVariables, #69ffd2);\n background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--suggested {\n color: var(--suggestedVariables, #ffb469);\n background: color-mix(in srgb, var(--suggestedVariables, #ffb469) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n position: fixed;\n z-index: 2000;\n transform: translate(-50%, -100%);\n margin-top: -8px;\n max-width: 320px;\n padding: 6px 10px;\n border-radius: 8px;\n background: var(--neutralDark1, #171628);\n border: 1px solid var(--neutralDark4, #393853);\n color: var(--neutralLight2, #cac9d5);\n font-size: 0.75rem;\n line-height: 1.3;\n pointer-events: none;\n box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n min-width: 0;\n word-break: break-all;\n}\n.ls-variable-token__badge {\n display: inline-flex;\n margin-left: 0.5rem;\n flex-shrink: 0;\n align-items: center;\n border: 1px solid currentcolor;\n border-radius: var(--radius, 1rem);\n padding-inline: 0.25rem;\n padding-block: 0;\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n text-transform: uppercase;\n}\n.ls-chat-message {\n position: relative;\n font-size: 0.95em;\n line-height: 1.4;\n color: var(--white, var(--neutralLight1, #fff));\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ls-chat-message img {\n display: inline-block;\n}\n.ls-chat-message__reply {\n display: block;\n margin-bottom: 0.15em;\n font-size: 0.82em;\n color: var(--white2, var(--neutralLight3, #9392a1));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n vertical-align: middle;\n}\n.ls-chat-message__avatar {\n width: 1.3em;\n height: 1.3em;\n border-radius: 9999px;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site {\n display: inline-block;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n width: 1.2em;\n height: 1.2em;\n vertical-align: middle;\n}\n.ls-chat-message__time {\n margin-right: 0.35em;\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__badges {\n vertical-align: middle;\n}\n.ls-chat-message__badges img {\n height: 1.05em;\n vertical-align: middle;\n margin-right: 0.25em;\n}\n.ls-chat-message__username {\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n cursor: pointer;\n background: none;\n border: 0;\n padding: 0;\n font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-chat-message__text {\n vertical-align: middle;\n}\n.ls-chat-message__text img {\n vertical-align: middle;\n}\n.ls-chat-message__actions {\n position: absolute;\n top: 0;\n right: 0;\n}\n.ls-chat-message__modbar {\n display: flex;\n overflow: hidden;\n border-radius: 0.75rem;\n background-color: var(--separator, #0a0821);\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n display: flex;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 1em;\n border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n border-left: 4px solid var(--primary, #ff4076);\n border-radius: 1em;\n background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n color: var(--white, var(--neutralLight1, #fff));\n padding: 1em;\n line-height: 1.35;\n}\n.ls-eventlist-item__main {\n display: flex;\n flex-direction: column;\n gap: 0.2em;\n min-width: 0;\n}\n.ls-eventlist-item__identity {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n border-radius: 1em;\n background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.ls-eventlist-item__username {\n min-width: 0;\n font-weight: 700;\n font-size: 0.875em;\n word-break: break-all;\n}\n.ls-eventlist-item__amount {\n flex-shrink: 0;\n padding: 0.05em 0.5em;\n border-radius: 1em;\n background-color: color-mix(in srgb, currentColor 16%, transparent);\n font-weight: 700;\n font-size: 0.75em;\n white-space: nowrap;\n}\n.ls-eventlist-item__body {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__message {\n min-width: 0;\n word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n min-width: 0;\n font-style: italic;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n word-break: break-all;\n}\n.ls-eventlist-item__time {\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n font-size: 0.875em;\n white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n align-self: center;\n gap: 0.5em;\n flex-shrink: 0;\n}\n.ls-modqueue-item {\n display: flex;\n align-items: stretch;\n gap: 0.5rem;\n border-radius: 1rem;\n background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n display: flex;\n height: 4rem;\n width: 4rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 1rem;\n background-color: var(--separator, #0a0821);\n color: var(--primary, #ff4076);\n font-size: 1.75rem;\n line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n display: flex;\n max-height: 100%;\n max-width: 100%;\n align-items: center;\n justify-content: center;\n line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.ls-modqueue-item__body {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.25rem;\n justify-content: flex-start;\n padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n font-weight: 700;\n color: var(--white, var(--neutralLight1, #fff));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 12rem;\n}\n.ls-modqueue-item__command {\n display: inline-flex;\n align-items: center;\n border-radius: 1rem;\n background-color: var(--separator, #0a0821);\n padding: 0.05rem 0.5rem;\n font-size: 0.8125rem;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n font-size: 0.875rem;\n font-style: italic;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n word-break: break-all;\n}\n.ls-modqueue-item__actions {\n display: flex;\n flex-shrink: 0;\n align-items: flex-start;\n gap: 0.5rem;\n padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n padding: 0;\n border-radius: 0.5rem;\n transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n background-color: transparent;\n opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n}\n.ls-modlog {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n display: flex;\n justify-content: flex-end;\n}\n.ls-modlog__clear {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n border: 0;\n border-radius: 0.75rem;\n background: transparent;\n padding: 0.25rem 0.625rem;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n color: var(--white, #fff);\n}\n.ls-modlog__empty {\n display: flex;\n height: 100%;\n flex: 1;\n align-items: center;\n justify-content: center;\n border-radius: 1rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.375rem;\n overflow: auto;\n}\n.ls-modlog__row {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n border-radius: 0.625rem;\n border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n padding: 0.5rem 0.625rem;\n font-size: 0.8125rem;\n background-color: var(--separator, var(--neutralDark2, #1b1834));\n background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-modlog__avatar {\n height: 1.25rem;\n width: 1.25rem;\n border-radius: 9999px;\n}\n.ls-modlog__title {\n display: inline-flex;\n align-items: center;\n border-radius: 0.375rem;\n padding: 0.05rem 0.4rem;\n font-size: 0.625rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--ls-modlog-accent, var(--primary, #ff4076));\n background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n margin-left: auto;\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n font-size: 0.6875rem;\n font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n word-break: break-word;\n overflow-wrap: anywhere;\n line-height: 1.35;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.75rem;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n flex: 1;\n}\n.ls-songreq__empty {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.75rem;\n background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n height: 3.5rem;\n width: 3.5rem;\n flex-shrink: 0;\n border-radius: 0.75rem;\n object-fit: cover;\n}\n.ls-songreq__nowbody {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.1rem;\n}\n.ls-songreq__title {\n overflow: hidden;\n font-size: 0.875rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-songreq__artist {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n overflow: hidden;\n font-size: 0.6875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n margin-top: 0.375rem;\n height: 0.375rem;\n width: 100%;\n overflow: hidden;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n height: 100%;\n border-radius: 9999px;\n background-color: var(--success, #1db954);\n transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-songreq__btn {\n display: inline-flex;\n height: 2rem;\n width: 2rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.625rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background: transparent;\n font-size: 0.875rem;\n line-height: 1;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-songreq__queue {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n}\n.ls-songreq__queuehead {\n margin-bottom: 0.25rem;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.25rem;\n overflow: auto;\n}\n.ls-songreq__queueempty {\n padding: 0.5rem 0.25rem;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: 0.75rem;\n padding: 0.375rem 0.5rem;\n transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n height: 2.25rem;\n width: 2.25rem;\n flex-shrink: 0;\n border-radius: 0.5rem;\n object-fit: cover;\n}\n.ls-songreq__itembody {\n min-width: 0;\n flex: 1;\n}\n.ls-songreq__itemtitle {\n overflow: hidden;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n flex-shrink: 0;\n cursor: pointer;\n border: 0;\n background: transparent;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n color: var(--error, #fd5454);\n}\n.ls-modqueue {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n}\n.ls-modqueue__search-icon {\n height: 1rem;\n width: 1rem;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n cursor: pointer;\n border-radius: 0.5rem;\n border: 1px solid currentcolor;\n background: transparent;\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n height: 1rem;\n width: 1rem;\n flex-shrink: 0;\n}\n.ls-modqueue__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.5rem;\n overflow: auto;\n}\n.ls-modqueue__readonly {\n font-size: 0.625rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n flex-shrink: 0;\n}\n.ls-chatbox {\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n position: relative;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.ls-chatbox__list {\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow-y: auto;\n padding: 0.75rem;\n}\n.ls-chatbox__jump {\n position: absolute;\n bottom: 0.75rem;\n right: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n border-radius: 9999px;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n padding: 0.5rem 0.75rem;\n font-size: 0.75rem;\n color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n backdrop-filter: blur(4px);\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n margin-left: 0.25rem;\n border-radius: 9999px;\n background-color: var(--primary, #ff4076);\n padding: 0.125rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 600;\n color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n flex: 2 1 0%;\n min-width: 100px;\n width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n flex: 1 1 0%;\n min-width: 7.5rem;\n height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n flex: 0 1 auto;\n min-width: 5.5rem;\n height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n height: 55px;\n flex-shrink: 0;\n}\n.ls-panel {\n --ls-panel-padding: 0.75rem;\n display: flex;\n flex-direction: column;\n border-radius: 1rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: var(--ls-panel-bg, #1b1834);\n box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n position: fixed;\n inset: 0;\n z-index: 20;\n}\n.ls-panel__header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n min-width: 0;\n font-size: 1rem;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-panel__title--label {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-panel__close {\n display: flex;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.5rem;\n background: transparent;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-panel__body {\n min-height: 0;\n flex: 1;\n overflow: auto;\n padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n flex-shrink: 0;\n padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n position: fixed;\n inset: 0;\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n}\n.ls-modal--absolute {\n position: absolute;\n}\n.ls-modal__backdrop {\n position: absolute;\n inset: 0;\n background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n position: relative;\n width: 100%;\n max-width: var(--ls-modal-max-width, min(560px, 92vw));\n max-height: 85vh;\n}\n.ls-modal__card--fit {\n width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.ls-dialog {\n margin-top: 0.5rem;\n display: flex;\n height: 100%;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n.ls-dialog__card {\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n overflow: hidden;\n border-radius: 1rem;\n outline: none;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n padding: 1rem;\n}\n.ls-dialog__card--full {\n border-radius: 0;\n}\n.ls-dialog__top {\n display: flex;\n width: 100%;\n align-items: flex-start;\n justify-content: space-between;\n}\n.ls-dialog__top--full {\n margin-top: 2rem;\n}\n.ls-dialog__top-side {\n flex: 1;\n}\n.ls-dialog__title {\n font-size: 1.25rem;\n color: var(--white, #fff);\n}\n.ls-dialog__close {\n display: flex;\n flex: 1;\n justify-content: flex-end;\n user-select: none;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n display: flex;\n cursor: pointer;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-dialog__close-label {\n cursor: pointer;\n font-size: 1rem;\n font-weight: 700;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n display: flex;\n width: 100%;\n flex: 1;\n min-height: 0;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n overflow: auto;\n}\n.ls-dialog__bottom {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n padding-bottom: 1rem;\n}\n.ls-eventlist {\n display: flex;\n height: 100%;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n line-height: 1.35;\n}\n.ls-eventlist__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.5em;\n overflow-y: auto;\n}\n.ls-eventlist__row {\n flex-shrink: 0;\n animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.75em;\n border-radius: 1em;\n padding: 1em;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n width: 1.6em;\n height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n from {\n opacity: 0;\n transform: translateX(-1.5em);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ls-streamstatus {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.75rem;\n overflow: auto;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.625rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n position: relative;\n display: inline-flex;\n height: 0.75rem;\n width: 0.75rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n.ls-streamstatus__indicator-dot {\n position: relative;\n height: 0.75rem;\n width: 0.75rem;\n border-radius: 9999px;\n background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n display: flex;\n min-width: 0;\n flex-direction: column;\n}\n.ls-streamstatus__status-label {\n overflow: hidden;\n font-size: 0.875rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n display: flex;\n flex-shrink: 0;\n align-items: stretch;\n gap: 0.5rem;\n}\n.ls-streamstatus__total {\n display: flex;\n flex-shrink: 0;\n flex-direction: column;\n justify-content: center;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n font-size: 1.875rem;\n font-weight: 700;\n line-height: 1;\n color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n margin-top: 0.25rem;\n font-size: 0.6875rem;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n gap: 0.25rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n display: inline-flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n font-size: 0.75rem;\n color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n height: 0.5rem;\n width: 0.5rem;\n flex-shrink: 0;\n border-radius: 9999px;\n background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n flex-shrink: 0;\n font-size: 0.75rem;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n display: grid;\n flex-shrink: 0;\n grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 0.125rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n height: 1rem;\n width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n display: inline-flex;\n margin-left: auto;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n overflow: hidden;\n font-size: 1.125rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n width: 10px;\n flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n min-width: 0;\n overflow: hidden;\n font-size: 0.6875rem;\n letter-spacing: 0.05em;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n}\n.ls-viewerslist__head {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.ls-viewerslist__count {\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n min-width: 0;\n flex: 1;\n border-radius: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n padding: 0.375rem 0.75rem;\n font-size: 0.8125rem;\n color: var(--white, #fff);\n outline: none;\n}\n.ls-viewerslist__search:focus {\n border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n min-width: 0;\n flex: 1;\n}\n.ls-viewerslist__hint {\n flex-shrink: 0;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.125rem;\n overflow: auto;\n}\n.ls-viewerslist__group {\n margin-top: 0.375rem;\n flex-shrink: 0;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n margin-top: 0;\n}\n.ls-viewerslist__viewer {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n border-radius: 0.5rem;\n padding: 0.25rem 0.375rem;\n transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n border-radius: 9999px;\n object-fit: cover;\n}\n.ls-viewerslist__platform {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-viewerslist__username {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n box-sizing: border-box;\n}\n.ls-shortcutdock {\n display: grid;\n width: 100%;\n align-content: start;\n gap: 0.5rem;\n overflow: auto;\n}\n.ls-shortcutdock--disabled {\n opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n text-align: center;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n position: relative;\n min-width: 0;\n}\n.ls-shortcutdock__btn {\n display: flex;\n height: 100%;\n width: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n cursor: pointer;\n border-radius: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n background-color: transparent;\n padding: 0.25rem;\n font: inherit;\n color: var(--white, #fff);\n box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.15rem;\n line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n border-radius: 0.375rem;\n object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n width: 2rem;\n height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n width: 60%;\n height: 60%;\n border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n padding-inline: 0.125rem;\n text-align: center;\n font-size: 0.625rem;\n font-weight: 600;\n line-height: 1.2;\n color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n font-size: clamp(1rem, 1.4vw, 1.5rem);\n font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n width: 100%;\n height: 100%;\n font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n width: 60%;\n height: 60%;\n}\n.ls-shortcutdock__remove {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n z-index: 1;\n display: flex;\n height: 1.25rem;\n width: 1.25rem;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n border-radius: 9999px;\n background-color: var(--error, #fd5454);\n padding: 0;\n font: inherit;\n font-size: 0.75rem;\n line-height: 1;\n color: var(--white, #fff);\n box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n opacity: 0.8;\n}\n.ls-shortcutdock__add {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 0.75rem;\n border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n background: transparent;\n padding: 0.25rem;\n font: inherit;\n font-size: 1.5rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n box-sizing: border-box;\n}\n.ls-goals {\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: 1rem;\n}\n.ls-goals__empty {\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n display: flex;\n align-items: baseline;\n gap: 0.375rem;\n font-size: 0.875rem;\n}\n.ls-goals__icon {\n display: flex;\n align-self: center;\n align-items: center;\n line-height: 1;\n}\n.ls-goals__label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 600;\n color: var(--white, #fff);\n}\n.ls-goals__value {\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n opacity: 0.6;\n}\n.ls-goals__bar {\n margin-top: 0.375rem;\n height: 0.625rem;\n width: 100%;\n overflow: hidden;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n height: 100%;\n border-radius: 9999px;\n background-image:\n linear-gradient(\n 90deg,\n color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n var(--ls-goals-accent, var(--primary, #ff4076)));\n transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n flex-shrink: 0;\n min-width: 2.75rem;\n text-align: right;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n display: inline-block;\n height: 1.15em;\n width: auto;\n max-width: 1.5em;\n vertical-align: middle;\n object-fit: contain;\n}\n.ls-chatbox__platform-option {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n position: relative;\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow: hidden;\n border-radius: var(--radius, 1rem);\n border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n background-color: var(--background, #151230);\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n position: relative;\n display: flex;\n min-height: 2.75rem;\n width: 100%;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n padding-inline: 0.5rem;\n}\n.ls-widget__side {\n display: flex;\n z-index: 10;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-widget__side--right {\n margin-left: auto;\n}\n.ls-widget__title {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 600;\n letter-spacing: 0.025em;\n white-space: nowrap;\n}\n.ls-widget__btn {\n display: flex;\n height: 2rem;\n width: 2rem;\n flex-shrink: 0;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.375rem;\n background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n font: inherit;\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n height: 1rem;\n width: 1rem;\n}\n.ls-widget__body {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n overflow: auto;\n}\n");
24
+ styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n font: inherit;\n letter-spacing: inherit;\n color: inherit;\n margin: 0;\n}\n.ls-color-picker__preview {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n text-transform: uppercase;\n user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n color: var(--neutralLight2, var(--white2, #cac9d5));\n opacity: 0.45;\n background-color: var(--separator, #0a0821);\n cursor: not-allowed;\n}\n.mui-ls-button {\n border-radius: var(--radius, 1rem);\n padding: 0.375rem 1.5rem;\n text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n background: var(--primary, #ff4076);\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n background-color: var(--secondary, #535395);\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n background-color: var(--secondary, #535395);\n color: var(--neutralLight2, var(--white2, #cac9d5));\n opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n color: var(--primary, #ff4076);\n border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n border-color: var(--primary, #ff4076);\n background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n color: var(--neutralLight1, var(--white, #fff));\n border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n color: var(--neutralLight2, var(--white2, #cac9d5));\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n border-color: var(--secondary, #535395);\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n color: var(--error, #fd5454);\n border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n border-color: var(--error, #fd5454);\n background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n background-color: var(--neutralDark4, var(--cardborder, #393853));\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n color: var(--neutralLight1, var(--white, #fff));\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n border-color: var(--neutralLight3, var(--grey, #9392a1));\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n max-height: 24px;\n max-width: 24px;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.ls-font-picker,\n.ls-color-picker__input {\n width: 100%;\n}\n.MuiFormControl-root.mui-ls-input,\n.MuiFormControl-root.mui-ls-select-form-control,\n.MuiFormControl-root.mui-ls-slider-input-root {\n margin-top: 0.875rem;\n padding-top: 0;\n}\n.MuiFormControl-root.mui-ls-select-form-control {\n min-width: 100px;\n margin-bottom: 0.3rem;\n}\n.mui-ls-slider-input-root .MuiFormControl-root.mui-ls-input,\n.mui-ls-slider-input-style .MuiFormControl-root.mui-ls-input,\n.MuiFormControl-root.mui-ls-slider-input-value.mui-ls-input {\n margin-top: 0;\n padding-top: 0;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n --ls-control-height: 55px;\n}\n.mui-ls-input .MuiTextField-root {\n width: 100%;\n margin: 0;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-control.MuiOutlinedInput-root,\n.mui-ls-slider-input-control .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-control .MuiOutlinedInput-notchedOutline {\n border: 2px solid var(--cardborder, var(--neutralDark4, #393853));\n}\n.mui-ls-input .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,\n.mui-ls-select:hover .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-control.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\n border-color: var(--primary, #ff4076) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n background-color: var(--background, var(--neutralDark1, #18162f));\n color: var(--white, var(--neutralLight1, #fff));\n min-height: var(--ls-control-height);\n}\n.mui-ls-slider-input-control.MuiInputBase-root {\n background-color: transparent;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.mui-ls-input.small .MuiInputBase-root {\n min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n cursor: pointer;\n opacity: 0.9;\n filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n display: flex;\n min-height: calc(var(--ls-control-height) - 2px);\n align-items: center;\n box-sizing: border-box;\n background-color: var(--background, var(--neutralDark1, #18162f));\n color: var(--white, var(--neutralLight1, #fff));\n border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n min-width: 0;\n}\n.MuiSvgIcon-root svg {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n fill: currentcolor;\n stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root,\n.mui-ls-slider-input-root .MuiInputLabel-root {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n transform: translate(14px, -10px) scale(0.875);\n font-size: 1rem;\n line-height: 1.4375em;\n color: var(--white, var(--neutralLight1, #fff)) !important;\n}\n.mui-ls-input .MuiOutlinedInput-notchedOutline legend,\n.mui-ls-select-form-control .MuiOutlinedInput-notchedOutline legend,\n.mui-ls-slider-input-control .MuiOutlinedInput-notchedOutline legend {\n font-size: 0.875rem;\n}\n.mui-ls-input legend,\n.mui-ls-select-form-control legend,\n.mui-ls-slider-input-root legend {\n max-width: unset !important;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg,\n.mui-ls-slider-input-root .MuiInputLabel-root svg {\n display: block;\n flex: 0 0 auto;\n}\n.mui-ls-select .MuiSvgIcon-root {\n color: var(--white, var(--neutralLight1, #fff));\n}\n.mui-autocomplete-select button {\n box-shadow: none;\n}\n.mui-autocomplete-select .MuiSvgIcon-root {\n color: var(--white, var(--neutralLight1, #fff));\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n color: var(--neutralLight3, var(--grey, #9392a1));\n opacity: 0.55;\n font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n color: var(--neutralLight1, var(--white, #fff));\n opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-select-form-control .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-select-form-control .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-control.Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-slider-input-root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n border-radius: var(--radius, 1rem) !important;\n background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n padding: 0.25rem 0 !important;\n background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n position: sticky;\n top: 0;\n z-index: 1;\n min-height: 32px;\n padding: 0.45rem 1rem 0.25rem !important;\n background: var(--neutralDark1, var(--background, #18162f)) !important;\n color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n font-size: 0.75rem !important;\n font-weight: 700 !important;\n letter-spacing: 0 !important;\n line-height: 1.2 !important;\n text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n display: flex !important;\n min-height: 44px !important;\n align-items: center !important;\n padding: 0.625rem 1rem !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n font-size: 1rem !important;\n line-height: 1.35 !important;\n cursor: pointer !important;\n transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n background: var(--cardHover, var(--transwhite, rgba(255, 255, 255, 0.05))) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n width: 40px;\n height: 40px;\n flex: 0 0 40px;\n border-radius: var(--radius, 1rem);\n object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n min-width: 0;\n}\n.ls-variable-option__label {\n color: var(--neutralLight1, var(--white, #fff));\n font-weight: 500;\n line-height: 1.25;\n}\n.ls-variable-option__helper {\n margin-top: 0.125rem;\n color: var(--neutralLight3, var(--grey, #9392a1));\n font-size: 0.875rem;\n line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n max-height: none !important;\n}\n.ls-color-picker__gradient {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n min-width: 24px;\n margin-left: 0.35rem;\n border-radius: var(--radius, 1rem);\n background: var(--primary, #ff4076) !important;\n color: var(--alwayswhite, var(--white, #fff)) !important;\n font-weight: 800;\n line-height: 1;\n letter-spacing: 0;\n cursor: pointer;\n user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n color: currentcolor !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n width: 100%;\n}\n.mui-ls-slider-input-control.MuiOutlinedInput-root {\n height: var(--ls-control-height);\n min-height: var(--ls-control-height);\n padding: 0 1rem;\n}\n.mui-ls-slider-input-control > .mui-ls-slider-input-content {\n box-sizing: border-box;\n display: flex;\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n min-width: 0;\n align-items: center;\n padding: 0 !important;\n}\n.mui-ls-slider-input-control > .mui-ls-slider-input-content:focus {\n outline: none;\n}\n.mui-ls-slider-input-row {\n display: flex;\n min-width: 0;\n min-height: calc(var(--ls-control-height) - 14px);\n align-items: center;\n gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n justify-content: stretch;\n}\n.mui-ls-slider-input-row .MuiSlider-root {\n height: 3px;\n padding: 8px 0;\n}\n.mui-ls-slider-input-row .MuiSlider-track,\n.mui-ls-slider-input-row .MuiSlider-rail {\n height: 3px;\n border: 0;\n}\n.mui-ls-slider-input-row .MuiSlider-thumb {\n width: 18px;\n height: 18px;\n}\n.mui-ls-slider-input-style input::-webkit-outer-spin-button,\n.mui-ls-slider-input-style input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.mui-ls-slider-input-style input {\n max-width: 100px;\n padding: 0.25rem 0.5rem;\n}\n.mui-ls-slider-input-style.noMargin .MuiTextField-root {\n margin-top: 0;\n margin-bottom: 0;\n}\n.mui-ls-slider-input-content .mui-ls-slider-input-style {\n position: relative;\n z-index: 1;\n display: grid;\n flex: 1 1 auto;\n width: 100%;\n grid-template-columns: minmax(0, 1fr) auto auto;\n align-items: center;\n gap: 0.5rem;\n height: 100%;\n min-width: 0;\n transform: none !important;\n}\n.mui-ls-slider-input-info {\n position: relative;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--neutralLight2, var(--white2, #cac9d5));\n line-height: 1;\n}\n.mui-ls-slider-input-info svg {\n display: block;\n width: 14px;\n height: 14px;\n}\n.mui-ls-slider-input-content .mui-ls-slider-input-style--input-only {\n grid-template-columns: minmax(0, 1fr) auto;\n}\n.mui-ls-slider-input-track {\n display: flex;\n width: 100%;\n min-width: 0;\n height: 2rem;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n border-radius: 9999px;\n}\n.mui-ls-slider-input-track--popout {\n padding-right: 0;\n}\n.mui-ls-slider-input-track--start-icon {\n gap: 0.5rem;\n padding-left: 0;\n}\n.mui-ls-slider-input-track--end-icon {\n gap: 0.5rem;\n padding-right: 0;\n}\n.mui-ls-slider-input-style .MuiSlider-root {\n width: 100%;\n min-width: 0;\n height: 3px;\n padding: 8px 0;\n}\n.mui-ls-slider-input-style .MuiSlider-track,\n.mui-ls-slider-input-style .MuiSlider-rail {\n height: 3px;\n border: 0;\n}\n.mui-ls-slider-input-style .MuiSlider-thumb {\n width: 18px;\n height: 18px;\n}\n.mui-ls-slider-input-style .MuiSlider-valueLabel {\n z-index: 3;\n}\n.mui-ls-slider-input-style .ls-slider-input-icon {\n display: inline-flex;\n width: 20px;\n min-width: 20px;\n height: 20px;\n min-height: 20px;\n align-items: center;\n justify-content: center;\n}\n.mui-ls-slider-input-style .ls-slider-input-icon svg {\n width: 20px;\n min-width: 20px;\n height: 20px;\n min-height: 20px;\n}\n.mui-ls-slider-input-style .ls-custom-range-input,\n.ls-custom-range-input {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 6px;\n border-radius: 15px;\n background: var(--cardborder, var(--neutralDark4, #393853));\n cursor: pointer;\n outline: none;\n}\n.mui-ls-slider-input-style .ls-custom-range-input::-webkit-slider-thumb,\n.ls-custom-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 50%;\n background-color: var(--white, #fff);\n transition: 0.2s ease-in-out;\n}\n.mui-ls-slider-input-style .ls-custom-range-input::-moz-range-thumb,\n.ls-custom-range-input::-moz-range-thumb {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 50%;\n background-color: var(--white, #fff);\n transition: 0.2s ease-in-out;\n}\n.mui-ls-slider-input-style .ls-custom-range-input::-webkit-slider-thumb:hover,\n.ls-custom-range-input::-webkit-slider-thumb:hover {\n box-shadow: 0 0 0 10px var(--primaryShadow, rgba(255, 64, 118, 0.18));\n}\n.mui-ls-slider-input-style .ls-custom-range-input:active::-webkit-slider-thumb,\n.mui-ls-slider-input-style .ls-custom-range-input:focus::-webkit-slider-thumb,\n.ls-custom-range-input:active::-webkit-slider-thumb,\n.ls-custom-range-input:focus::-webkit-slider-thumb {\n box-shadow: 0 0 0 13px var(--primaryShadow, rgba(255, 64, 118, 0.18));\n}\n.mui-ls-slider-input-style .ls-custom-range-input::-moz-range-thumb:hover,\n.ls-custom-range-input::-moz-range-thumb:hover {\n box-shadow: 0 0 0 10px var(--primaryShadow, rgba(255, 64, 118, 0.18));\n}\n.mui-ls-slider-input-style .ls-custom-range-input:active::-moz-range-thumb,\n.mui-ls-slider-input-style .ls-custom-range-input:focus::-moz-range-thumb,\n.ls-custom-range-input:active::-moz-range-thumb,\n.ls-custom-range-input:focus::-moz-range-thumb {\n box-shadow: 0 0 0 13px var(--primaryShadow, rgba(255, 64, 118, 0.18));\n}\n.mui-ls-slider-input-style .ls-slider-value-input {\n width: 96px !important;\n height: 36px !important;\n min-height: 36px !important;\n}\n.mui-ls-slider-input-style .ls-slider-value-input .MuiInputBase-root {\n height: 36px !important;\n max-width: 96px !important;\n min-height: 36px !important;\n border-radius: 15px !important;\n}\n.mui-ls-slider-input-style .ls-slider-value-input .MuiOutlinedInput-notchedOutline {\n border-radius: 15px !important;\n}\n.mui-ls-slider-input-style .ls-slider-value-input input {\n max-width: none;\n padding: 0.35rem 0.75rem;\n text-align: left;\n}\n.mui-ls-slider-input-adornment {\n justify-self: center;\n color: var(--white, var(--neutralLight1, #fff));\n white-space: nowrap;\n}\n.mui-ls-slider-input-style .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\n border-color: var(--primary, #ff4076) !important;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n display: block;\n margin-top: 0.25rem;\n color: var(--neutralLight3, var(--grey, #9392a1));\n font-size: 0.75rem;\n line-height: 1.25;\n}\n.ls-multi-select-value {\n display: flex;\n width: 100%;\n min-width: 0;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n overflow: hidden;\n white-space: nowrap;\n}\n.ls-multi-select-value__label {\n min-width: 0;\n flex: 1 1 0%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-multi-select-value__count {\n flex-shrink: 0;\n white-space: nowrap;\n}\n.ls-color-picker__preview {\n position: relative;\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n border-radius: var(--radius, 1rem);\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n color: transparent;\n line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n box-shadow:\n 0 0 0 2px var(--primary, #ff4076),\n 0 0 0 4px var(--neutralDark1, #1b1a28),\n 0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n stroke: #fff !important;\n}\n.ls-variable-picker {\n --variable-custom-color: var(--customVariables, #69ffd2);\n --variable-function-color: var(--functionVariables, var(--semanticPurple, #b489ff));\n --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n display: flex;\n width: 92vw;\n max-width: 1100px;\n min-height: 50vh;\n max-height: 55vh;\n flex-direction: column;\n overflow: hidden;\n padding: 1rem;\n}\n.ls-variable-picker__field {\n margin: 0 0 0.75rem;\n border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n border-radius: var(--radius, 1rem);\n padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n padding-inline: 0.375rem;\n color: var(--primary, #ff4076);\n font-size: 0.75rem;\n font-weight: 700;\n}\n.ls-variable-picker__intro {\n margin-bottom: 1rem;\n color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n display: grid;\n grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n gap: 2rem;\n}\n.ls-variable-picker__header {\n margin-bottom: 0.25rem;\n padding-inline: 0.25rem;\n padding-right: 1.7rem;\n color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n height: 100%;\n overflow: auto;\n padding-right: 1rem;\n}\n.ls-variable-picker__row {\n cursor: pointer;\n align-items: start;\n border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n width: 24px;\n height: 24px;\n flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n border-radius: var(--radius, 1rem);\n padding: 0;\n background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n color: var(--neutralLight2, #cac9d5);\n transition:\n background-color 140ms ease,\n border-color 140ms ease,\n color 140ms ease,\n transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n border-color: var(--primary, #ff4076);\n background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n transform: rotate(-90deg);\n transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n opacity: 0.8;\n}\n.ls-variable-picker__description {\n max-width: 600px;\n overflow-wrap: break-word;\n line-height: 1.25;\n word-break: break-all;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description {\n display: block;\n cursor: default;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n color: var(--neutralLight2, #cac9d5);\n overflow-wrap: break-word;\n line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n opacity: 1;\n}\n.ls-variable-picker__value {\n min-width: 0;\n}\n.ls-variable-picker__value-input {\n width: 100%;\n min-width: 0;\n cursor: text;\n overflow: hidden;\n border: 0;\n background: transparent;\n color: var(--neutralLight1, var(--white, #fff));\n caret-color: transparent;\n font: inherit;\n font-size: 1rem;\n line-height: 1.25;\n outline: 0;\n padding: 0;\n text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n display: flex;\n min-width: 0;\n align-items: center;\n}\n.ls-variable-token--suggested {\n color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n position: absolute;\n margin: 0;\n border: 0;\n box-sizing: border-box;\n overflow: hidden;\n pointer-events: none;\n background: transparent;\n color: inherit;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n z-index: 0;\n}\n.ls-variable-highlight__token {\n border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n color: var(--customVariables, #69ffd2);\n background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--suggested {\n color: var(--suggestedVariables, #ffb469);\n background: color-mix(in srgb, var(--suggestedVariables, #ffb469) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n position: fixed;\n z-index: 2000;\n transform: translate(-50%, -100%);\n margin-top: -8px;\n max-width: 320px;\n padding: 6px 10px;\n border-radius: 8px;\n background: var(--neutralDark1, #171628);\n border: 1px solid var(--neutralDark4, #393853);\n color: var(--neutralLight2, #cac9d5);\n font-size: 0.75rem;\n line-height: 1.3;\n pointer-events: none;\n box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n min-width: 0;\n word-break: break-all;\n}\n.ls-variable-token__badge {\n display: inline-flex;\n margin-left: 0.5rem;\n flex-shrink: 0;\n align-items: center;\n border: 1px solid currentcolor;\n border-radius: var(--radius, 1rem);\n padding-inline: 0.25rem;\n padding-block: 0;\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n text-transform: uppercase;\n}\n.ls-chat-message {\n position: relative;\n font-size: 0.95em;\n line-height: 1.4;\n color: var(--white, var(--neutralLight1, #fff));\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ls-chat-message img {\n display: inline-block;\n}\n.ls-chat-message__reply {\n display: block;\n margin-bottom: 0.15em;\n font-size: 0.82em;\n color: var(--white2, var(--neutralLight3, #9392a1));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n vertical-align: middle;\n}\n.ls-chat-message__avatar {\n width: 1.3em;\n height: 1.3em;\n border-radius: 9999px;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site {\n display: inline-block;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n width: 1.2em;\n height: 1.2em;\n vertical-align: middle;\n}\n.ls-chat-message__time {\n margin-right: 0.35em;\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__badges {\n vertical-align: middle;\n}\n.ls-chat-message__badges img {\n height: 1.05em;\n vertical-align: middle;\n margin-right: 0.25em;\n}\n.ls-chat-message__username {\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n cursor: pointer;\n background: none;\n border: 0;\n padding: 0;\n font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-chat-message__text {\n vertical-align: middle;\n}\n.ls-chat-message__text img {\n vertical-align: middle;\n}\n.ls-chat-message__actions {\n position: absolute;\n top: 0;\n right: 0;\n}\n.ls-chat-message__modbar {\n display: flex;\n overflow: hidden;\n border-radius: 0.75rem;\n background-color: var(--separator, #0a0821);\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n display: flex;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 1em;\n border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n border-left: 4px solid var(--primary, #ff4076);\n border-radius: 1em;\n background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n color: var(--white, var(--neutralLight1, #fff));\n padding: 1em;\n line-height: 1.35;\n}\n.ls-eventlist-item__main {\n display: flex;\n flex-direction: column;\n gap: 0.2em;\n min-width: 0;\n}\n.ls-eventlist-item__identity {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n border-radius: 1em;\n background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.ls-eventlist-item__username {\n min-width: 0;\n font-weight: 700;\n font-size: 0.875em;\n word-break: break-all;\n}\n.ls-eventlist-item__amount {\n flex-shrink: 0;\n padding: 0.05em 0.5em;\n border-radius: 1em;\n background-color: color-mix(in srgb, currentColor 16%, transparent);\n font-weight: 700;\n font-size: 0.75em;\n white-space: nowrap;\n}\n.ls-eventlist-item__body {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__message {\n min-width: 0;\n word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n min-width: 0;\n font-style: italic;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n word-break: break-all;\n}\n.ls-eventlist-item__time {\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n font-size: 0.875em;\n white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n align-self: center;\n gap: 0.5em;\n flex-shrink: 0;\n}\n.ls-modqueue-item {\n display: flex;\n align-items: stretch;\n gap: 0.5rem;\n border-radius: 1rem;\n background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n display: flex;\n height: 4rem;\n width: 4rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 1rem;\n background-color: var(--separator, #0a0821);\n color: var(--primary, #ff4076);\n font-size: 1.75rem;\n line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n display: flex;\n max-height: 100%;\n max-width: 100%;\n align-items: center;\n justify-content: center;\n line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.ls-modqueue-item__body {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.25rem;\n justify-content: flex-start;\n padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n font-weight: 700;\n color: var(--white, var(--neutralLight1, #fff));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 12rem;\n}\n.ls-modqueue-item__command {\n display: inline-flex;\n align-items: center;\n border-radius: 1rem;\n background-color: var(--separator, #0a0821);\n padding: 0.05rem 0.5rem;\n font-size: 0.8125rem;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n font-size: 0.875rem;\n font-style: italic;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n word-break: break-all;\n}\n.ls-modqueue-item__actions {\n display: flex;\n flex-shrink: 0;\n align-items: flex-start;\n gap: 0.5rem;\n padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n padding: 0;\n border-radius: 0.5rem;\n transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n background-color: transparent;\n opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n}\n.ls-modlog {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n display: flex;\n justify-content: flex-end;\n}\n.ls-modlog__clear {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n border: 0;\n border-radius: 0.75rem;\n background: transparent;\n padding: 0.25rem 0.625rem;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n color: var(--white, #fff);\n}\n.ls-modlog__empty {\n display: flex;\n height: 100%;\n flex: 1;\n align-items: center;\n justify-content: center;\n border-radius: 1rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.375rem;\n overflow: auto;\n}\n.ls-modlog__row {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n border-radius: 0.625rem;\n border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n padding: 0.5rem 0.625rem;\n font-size: 0.8125rem;\n background-color: var(--separator, var(--neutralDark2, #1b1834));\n background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-modlog__avatar {\n height: 1.25rem;\n width: 1.25rem;\n border-radius: 9999px;\n}\n.ls-modlog__title {\n display: inline-flex;\n align-items: center;\n border-radius: 0.375rem;\n padding: 0.05rem 0.4rem;\n font-size: 0.625rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--ls-modlog-accent, var(--primary, #ff4076));\n background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n margin-left: auto;\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n font-size: 0.6875rem;\n font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n word-break: break-word;\n overflow-wrap: anywhere;\n line-height: 1.35;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.75rem;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n flex: 1;\n}\n.ls-songreq__empty {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.75rem;\n background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n height: 3.5rem;\n width: 3.5rem;\n flex-shrink: 0;\n border-radius: 0.75rem;\n object-fit: cover;\n}\n.ls-songreq__nowbody {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.1rem;\n}\n.ls-songreq__title {\n overflow: hidden;\n font-size: 0.875rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-songreq__artist {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n overflow: hidden;\n font-size: 0.6875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n margin-top: 0.375rem;\n height: 0.375rem;\n width: 100%;\n overflow: hidden;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n height: 100%;\n border-radius: 9999px;\n background-color: var(--success, #1db954);\n transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-songreq__btn {\n display: inline-flex;\n height: 2rem;\n width: 2rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.625rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background: transparent;\n font-size: 0.875rem;\n line-height: 1;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-songreq__queue {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n}\n.ls-songreq__queuehead {\n margin-bottom: 0.25rem;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.25rem;\n overflow: auto;\n}\n.ls-songreq__queueempty {\n padding: 0.5rem 0.25rem;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: 0.75rem;\n padding: 0.375rem 0.5rem;\n transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n height: 2.25rem;\n width: 2.25rem;\n flex-shrink: 0;\n border-radius: 0.5rem;\n object-fit: cover;\n}\n.ls-songreq__itembody {\n min-width: 0;\n flex: 1;\n}\n.ls-songreq__itemtitle {\n overflow: hidden;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n flex-shrink: 0;\n cursor: pointer;\n border: 0;\n background: transparent;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n color: var(--error, #fd5454);\n}\n.ls-modqueue {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n}\n.ls-modqueue__search-icon {\n height: 1rem;\n width: 1rem;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n cursor: pointer;\n border-radius: 0.5rem;\n border: 1px solid currentcolor;\n background: transparent;\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n height: 1rem;\n width: 1rem;\n flex-shrink: 0;\n}\n.ls-modqueue__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.5rem;\n overflow: auto;\n}\n.ls-modqueue__readonly {\n font-size: 0.625rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n flex-shrink: 0;\n}\n.ls-chatbox {\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n position: relative;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.ls-chatbox__list {\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow-y: auto;\n padding: 0.75rem;\n}\n.ls-chatbox__jump {\n position: absolute;\n bottom: 0.75rem;\n right: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n border-radius: 9999px;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n padding: 0.5rem 0.75rem;\n font-size: 0.75rem;\n color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n backdrop-filter: blur(4px);\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n margin-left: 0.25rem;\n border-radius: 9999px;\n background-color: var(--primary, #ff4076);\n padding: 0.125rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 600;\n color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n flex: 2 1 0%;\n min-width: 100px;\n width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n flex: 1 1 0%;\n min-width: 7.5rem;\n height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n flex: 0 1 auto;\n min-width: 5.5rem;\n height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n height: 55px;\n flex-shrink: 0;\n}\n.ls-panel {\n --ls-panel-padding: 0.75rem;\n display: flex;\n flex-direction: column;\n border-radius: 1rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: var(--ls-panel-bg, #1b1834);\n box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n position: fixed;\n inset: 0;\n z-index: 20;\n}\n.ls-panel__header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n min-width: 0;\n font-size: 1rem;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-panel__title--label {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-panel__close {\n display: flex;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.5rem;\n background: transparent;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-panel__body {\n min-height: 0;\n flex: 1;\n overflow: auto;\n padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n flex-shrink: 0;\n padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n position: fixed;\n inset: 0;\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n}\n.ls-modal--absolute {\n position: absolute;\n}\n.ls-modal__backdrop {\n position: absolute;\n inset: 0;\n background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n position: relative;\n width: 100%;\n max-width: var(--ls-modal-max-width, min(560px, 92vw));\n max-height: 85vh;\n}\n.ls-modal__card--fit {\n width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.ls-dialog {\n margin-top: 0.5rem;\n display: flex;\n height: 100%;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n.ls-dialog__card {\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n overflow: hidden;\n border-radius: 1rem;\n outline: none;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n padding: 1rem;\n}\n.ls-dialog__card--full {\n border-radius: 0;\n}\n.ls-dialog__top {\n display: flex;\n width: 100%;\n align-items: flex-start;\n justify-content: space-between;\n}\n.ls-dialog__top--full {\n margin-top: 2rem;\n}\n.ls-dialog__top-side {\n flex: 1;\n}\n.ls-dialog__title {\n font-size: 1.25rem;\n color: var(--white, #fff);\n}\n.ls-dialog__close {\n display: flex;\n flex: 1;\n justify-content: flex-end;\n user-select: none;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n display: flex;\n cursor: pointer;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-dialog__close-label {\n cursor: pointer;\n font-size: 1rem;\n font-weight: 700;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n display: flex;\n width: 100%;\n flex: 1;\n min-height: 0;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n overflow: auto;\n}\n.ls-dialog__bottom {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n padding-bottom: 1rem;\n}\n.ls-eventlist {\n display: flex;\n height: 100%;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n line-height: 1.35;\n}\n.ls-eventlist__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.5em;\n overflow-y: auto;\n}\n.ls-eventlist__row {\n flex-shrink: 0;\n animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.75em;\n border-radius: 1em;\n padding: 1em;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n width: 1.6em;\n height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n from {\n opacity: 0;\n transform: translateX(-1.5em);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ls-streamstatus {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.75rem;\n overflow: auto;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.625rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n position: relative;\n display: inline-flex;\n height: 0.75rem;\n width: 0.75rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n.ls-streamstatus__indicator-dot {\n position: relative;\n height: 0.75rem;\n width: 0.75rem;\n border-radius: 9999px;\n background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n display: flex;\n min-width: 0;\n flex-direction: column;\n}\n.ls-streamstatus__status-label {\n overflow: hidden;\n font-size: 0.875rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n display: flex;\n flex-shrink: 0;\n align-items: stretch;\n gap: 0.5rem;\n}\n.ls-streamstatus__total {\n display: flex;\n flex-shrink: 0;\n flex-direction: column;\n justify-content: center;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n font-size: 1.875rem;\n font-weight: 700;\n line-height: 1;\n color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n margin-top: 0.25rem;\n font-size: 0.6875rem;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n gap: 0.25rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n display: inline-flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n font-size: 0.75rem;\n color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n height: 0.5rem;\n width: 0.5rem;\n flex-shrink: 0;\n border-radius: 9999px;\n background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n flex-shrink: 0;\n font-size: 0.75rem;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n display: grid;\n flex-shrink: 0;\n grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 0.125rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n height: 1rem;\n width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n display: inline-flex;\n margin-left: auto;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n overflow: hidden;\n font-size: 1.125rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n width: 10px;\n flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n min-width: 0;\n overflow: hidden;\n font-size: 0.6875rem;\n letter-spacing: 0.05em;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n}\n.ls-viewerslist__head {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.ls-viewerslist__count {\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n min-width: 0;\n flex: 1;\n border-radius: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n padding: 0.375rem 0.75rem;\n font-size: 0.8125rem;\n color: var(--white, #fff);\n outline: none;\n}\n.ls-viewerslist__search:focus {\n border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n min-width: 0;\n flex: 1;\n}\n.ls-viewerslist__hint {\n flex-shrink: 0;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.125rem;\n overflow: auto;\n}\n.ls-viewerslist__group {\n margin-top: 0.375rem;\n flex-shrink: 0;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n margin-top: 0;\n}\n.ls-viewerslist__viewer {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n border-radius: 0.5rem;\n padding: 0.25rem 0.375rem;\n transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n border-radius: 9999px;\n object-fit: cover;\n}\n.ls-viewerslist__platform {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-viewerslist__username {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n box-sizing: border-box;\n}\n.ls-shortcutdock {\n display: grid;\n width: 100%;\n align-content: start;\n gap: 0.5rem;\n overflow: auto;\n}\n.ls-shortcutdock--disabled {\n opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n text-align: center;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n position: relative;\n min-width: 0;\n}\n.ls-shortcutdock__btn {\n display: flex;\n height: 100%;\n width: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n cursor: pointer;\n border-radius: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n background-color: transparent;\n padding: 0.25rem;\n font: inherit;\n color: var(--white, #fff);\n box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.15rem;\n line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n border-radius: 0.375rem;\n object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n width: 2rem;\n height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n width: 60%;\n height: 60%;\n border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n padding-inline: 0.125rem;\n text-align: center;\n font-size: 0.625rem;\n font-weight: 600;\n line-height: 1.2;\n color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n font-size: clamp(1rem, 1.4vw, 1.5rem);\n font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n width: 100%;\n height: 100%;\n font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n width: 60%;\n height: 60%;\n}\n.ls-shortcutdock__remove {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n z-index: 1;\n display: flex;\n height: 1.25rem;\n width: 1.25rem;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n border-radius: 9999px;\n background-color: var(--error, #fd5454);\n padding: 0;\n font: inherit;\n font-size: 0.75rem;\n line-height: 1;\n color: var(--white, #fff);\n box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n opacity: 0.8;\n}\n.ls-shortcutdock__add {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 0.75rem;\n border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n background: transparent;\n padding: 0.25rem;\n font: inherit;\n font-size: 1.5rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n box-sizing: border-box;\n}\n.ls-goals {\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: 1rem;\n}\n.ls-goals__empty {\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n display: flex;\n align-items: baseline;\n gap: 0.375rem;\n font-size: 0.875rem;\n}\n.ls-goals__icon {\n display: flex;\n align-self: center;\n align-items: center;\n line-height: 1;\n}\n.ls-goals__label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 600;\n color: var(--white, #fff);\n}\n.ls-goals__value {\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n opacity: 0.6;\n}\n.ls-goals__bar {\n margin-top: 0.375rem;\n height: 0.625rem;\n width: 100%;\n overflow: hidden;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n height: 100%;\n border-radius: 9999px;\n background-image:\n linear-gradient(\n 90deg,\n color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n var(--ls-goals-accent, var(--primary, #ff4076)));\n transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n flex-shrink: 0;\n min-width: 2.75rem;\n text-align: right;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n display: inline-block;\n height: 1.15em;\n width: auto;\n max-width: 1.5em;\n vertical-align: middle;\n object-fit: contain;\n}\n.ls-chatbox__platform-option {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n position: relative;\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow: hidden;\n border-radius: var(--radius, 1rem);\n border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n background-color: var(--background, #151230);\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n position: relative;\n display: flex;\n min-height: 2.75rem;\n width: 100%;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n padding-inline: 0.5rem;\n}\n.ls-widget__side {\n display: flex;\n z-index: 10;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-widget__side--right {\n margin-left: auto;\n}\n.ls-widget__title {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 600;\n letter-spacing: 0.025em;\n white-space: nowrap;\n}\n.ls-widget__btn {\n display: flex;\n height: 2rem;\n width: 2rem;\n flex-shrink: 0;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.375rem;\n background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n font: inherit;\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n height: 1rem;\n width: 1rem;\n}\n.ls-widget__body {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n overflow: auto;\n}\n");
25
25
 
26
26
  // src/components/LSButton/LSButton.tsx
27
27
  import Button from "@mui/material/Button";
@@ -208,11 +208,23 @@ var LSInput = forwardRef(
208
208
  );
209
209
  LSInput.displayName = "LSInput";
210
210
 
211
- // src/components/LSSliderInput/LSSliderInput.tsx
211
+ // src/components/LSSlider/LSSlider.tsx
212
212
  import Slider from "@mui/material/Slider";
213
- import classNames3 from "classnames";
214
- import { useCallback, useEffect, useMemo, useState } from "react";
215
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
213
+ import { jsx as jsx3 } from "react/jsx-runtime";
214
+ var LSSlider = ({ color, sx, ...props }) => {
215
+ const validColor = color && ["primary", "secondary", "error", "info", "success", "warning"].includes(color) ? color : void 0;
216
+ const resolvedSx = [{ color: "var(--white, #fff)" }, ...Array.isArray(sx) ? sx : sx ? [sx] : []];
217
+ return /* @__PURE__ */ jsx3(Slider, { ...props, color: validColor, sx: resolvedSx });
218
+ };
219
+
220
+ // src/components/LSSliderInput/LSSliderInput.tsx
221
+ import FormControl2 from "@mui/material/FormControl";
222
+ import FormHelperText from "@mui/material/FormHelperText";
223
+ import InputLabel from "@mui/material/InputLabel";
224
+ import OutlinedInput from "@mui/material/OutlinedInput";
225
+ import Tooltip from "@mui/material/Tooltip";
226
+ import { forwardRef as forwardRef2, useCallback, useEffect, useMemo, useState } from "react";
227
+ import { jsx as jsx4, jsxs } from "react/jsx-runtime";
216
228
  var normalizeSliderValue = (rawValue) => {
217
229
  if (typeof rawValue === "number") {
218
230
  return Number.isFinite(rawValue) ? rawValue : 0;
@@ -227,173 +239,290 @@ var normalizeSliderValue = (rawValue) => {
227
239
  }
228
240
  return 0;
229
241
  };
230
- var LSSliderInput = ({
231
- name,
232
- value,
233
- defaultValue,
234
- isFloat,
235
- isMiliseconds,
236
- isFloatMiliseconds,
237
- label,
238
- inline,
239
- hasInfo,
240
- infoOpen,
241
- infoClose,
242
- max = Number.MAX_SAFE_INTEGER,
243
- min = 0,
244
- step = 1,
245
- type = "number",
246
- inputAfterText,
247
- onChange,
248
- inputProps = {},
249
- helperText,
250
- fullWidth = false,
251
- hideInput = false,
252
- hideSlider = false,
253
- valueLabelFormat,
254
- ...rest
255
- }) => {
256
- const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
257
- const actualToDisplay = useCallback(
258
- (input) => {
259
- const numericValue = normalizeSliderValue(input);
260
- if (!isValueFloat) {
261
- return numericValue;
262
- }
263
- const divisor = isFloatMiliseconds ? 1e3 : 1;
264
- return Number((numericValue / divisor).toFixed(1));
265
- },
266
- [isFloatMiliseconds, isValueFloat]
267
- );
268
- const displayStep = useMemo(() => actualToDisplay(step), [actualToDisplay, step]);
269
- const resolvedDefaultValue = defaultValue ?? 0;
270
- const [displayValue, setDisplayValue] = useState(() => actualToDisplay(defaultValue ?? value ?? resolvedDefaultValue));
271
- const displayMaximum = useMemo(() => actualToDisplay(max), [actualToDisplay, max]);
272
- const displayMinimum = useMemo(() => actualToDisplay(min), [actualToDisplay, min]);
273
- const sliderValue = typeof displayValue === "number" ? Math.min(displayMaximum, Math.max(displayMinimum, displayValue)) : displayMinimum;
274
- const stepPrecision = useMemo(() => {
275
- const stepString = String(displayStep);
276
- const decimalIndex = stepString.indexOf(".");
277
- return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
278
- }, [displayStep]);
279
- useEffect(() => {
280
- if (value !== void 0) {
281
- setDisplayValue(actualToDisplay(value));
282
- }
283
- }, [actualToDisplay, value]);
284
- const normalizeDisplayValue = useCallback(
285
- (input) => {
286
- const bounded = Math.min(displayMaximum, Math.max(displayMinimum, input));
287
- if (!Number.isFinite(displayStep) || displayStep <= 0) {
288
- return bounded;
289
- }
290
- const snapped = Math.round((bounded - displayMinimum) / displayStep) * displayStep + displayMinimum;
291
- return Number(snapped.toFixed(stepPrecision));
292
- },
293
- [displayMaximum, displayMinimum, displayStep, stepPrecision]
294
- );
295
- const handleInputChange = useCallback(
296
- ({ target: { value: inputValue } }) => {
297
- setDisplayValue(inputValue ?? "");
298
- if (inputValue === "" || inputValue === null) {
299
- if (typeof onChange === "function") {
300
- onChange(void 0);
242
+ var getDecimalPlaces = (stepValue) => {
243
+ if (!stepValue || stepValue >= 1) {
244
+ return 0;
245
+ }
246
+ const stepString = stepValue.toString();
247
+ const decimalIndex = stepString.indexOf(".");
248
+ return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
249
+ };
250
+ var InfoIcon = () => /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx4(
251
+ "path",
252
+ {
253
+ 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",
254
+ fill: "currentColor"
255
+ }
256
+ ) });
257
+ var SliderInputContent = forwardRef2(
258
+ ({ className, children, ownerState, inputRef, value, defaultValue, ...props }, ref) => {
259
+ const resolvedRef = ref ?? inputRef;
260
+ return /* @__PURE__ */ jsx4("div", { ...props, ref: resolvedRef, className: `${className ?? ""} mui-ls-slider-input-content`.trim(), role: "group", children });
261
+ }
262
+ );
263
+ SliderInputContent.displayName = "SliderInputContent";
264
+ var LSSliderInput = forwardRef2(
265
+ ({
266
+ name,
267
+ value,
268
+ defaultValue,
269
+ isFloat,
270
+ isMiliseconds,
271
+ isFloatMiliseconds,
272
+ label,
273
+ helperText,
274
+ info,
275
+ hasInfo,
276
+ infoOpen,
277
+ infoClose,
278
+ max = Number.MAX_SAFE_INTEGER,
279
+ min = 0,
280
+ sliderMin,
281
+ sliderMax,
282
+ step = 1,
283
+ allowAnyDecimal,
284
+ type = "number",
285
+ inputAfterText,
286
+ endAdornment,
287
+ onChange,
288
+ sliderProps = {},
289
+ inputProps = {},
290
+ color,
291
+ startIcon,
292
+ endIcon,
293
+ inPopout,
294
+ hideInput = false,
295
+ hideSlider = false,
296
+ fullWidth = false,
297
+ valueLabelDisplay = "auto",
298
+ valueLabelFormat,
299
+ ...rest
300
+ }, ref) => {
301
+ const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
302
+ const rangeUnit = typeof (endAdornment ?? inputAfterText) === "string" && String(endAdornment ?? inputAfterText).trim().length ? ` ${endAdornment ?? inputAfterText}` : "";
303
+ const actualSliderMin = sliderMin ?? min;
304
+ const actualSliderMax = sliderMax ?? max;
305
+ const actualToDisplay = useCallback(
306
+ (input) => {
307
+ const numericValue = normalizeSliderValue(input);
308
+ if (allowAnyDecimal) {
309
+ return numericValue;
301
310
  }
302
- return;
303
- }
304
- const numericValue = Number(inputValue);
305
- if (Number.isNaN(numericValue)) {
306
- return;
307
- }
308
- const normalizedDisplayValue = normalizeDisplayValue(numericValue);
309
- const updatedValue = isFloatMiliseconds ? normalizedDisplayValue * 1e3 : normalizedDisplayValue;
310
- const upperBound = typeof max === "number" ? max : Number.MAX_SAFE_INTEGER;
311
- const lowerBound = typeof min === "number" ? min : 0;
312
- const isValid = updatedValue >= lowerBound && updatedValue <= upperBound;
313
- if (isValid && typeof onChange === "function") {
314
- onChange(updatedValue);
315
- }
316
- },
317
- [isFloatMiliseconds, max, min, normalizeDisplayValue, onChange]
318
- );
319
- const handleSliderChange = useCallback(
320
- (_, sliderInputValue) => {
321
- const numericValue = typeof sliderInputValue === "number" ? sliderInputValue : sliderInputValue[0];
322
- const normalizedDisplayValue = normalizeDisplayValue(numericValue);
323
- setDisplayValue(normalizedDisplayValue);
324
- const nextValue = isFloatMiliseconds ? normalizedDisplayValue * 1e3 : normalizedDisplayValue;
311
+ if (isFloatMiliseconds) {
312
+ const decimalPlaces2 = getDecimalPlaces(step);
313
+ return Number((numericValue / 1e3).toFixed(Math.max(1, decimalPlaces2)));
314
+ }
315
+ const decimalPlaces = getDecimalPlaces(step);
316
+ if (decimalPlaces > 0) {
317
+ return Number(numericValue.toFixed(decimalPlaces));
318
+ }
319
+ return isValueFloat ? Number(numericValue.toFixed(1)) : numericValue;
320
+ },
321
+ [allowAnyDecimal, isFloatMiliseconds, isValueFloat, step]
322
+ );
323
+ const resolvedDefaultValue = defaultValue ?? 0;
324
+ const [actualValue, setActualValue] = useState(() => normalizeSliderValue(value ?? resolvedDefaultValue));
325
+ const [displayValue, setDisplayValue] = useState(() => actualToDisplay(value ?? resolvedDefaultValue));
326
+ const [rangeError, setRangeError] = useState(null);
327
+ const displayStep = useMemo(() => actualToDisplay(step), [actualToDisplay, step]);
328
+ const displayMaximum = useMemo(() => actualToDisplay(max), [actualToDisplay, max]);
329
+ const displayMinimum = useMemo(() => actualToDisplay(min), [actualToDisplay, min]);
330
+ const inputStep = allowAnyDecimal ? "any" : displayStep;
331
+ const sliderColor = color === "secondary" ? "secondary" : "primary";
332
+ useEffect(() => {
333
+ if (value !== void 0) {
334
+ const normalizedValue = normalizeSliderValue(value);
335
+ setActualValue(normalizedValue);
336
+ setDisplayValue(actualToDisplay(normalizedValue));
337
+ setRangeError(null);
338
+ }
339
+ }, [actualToDisplay, value]);
340
+ const buildRangeError = useCallback(
341
+ (updatedValue) => {
342
+ if (Number.isNaN(updatedValue)) {
343
+ return null;
344
+ }
345
+ if (updatedValue < min) {
346
+ return `Min ${displayMinimum}${rangeUnit}`;
347
+ }
348
+ if (updatedValue > max) {
349
+ return `Max ${displayMaximum}${rangeUnit}`;
350
+ }
351
+ return null;
352
+ },
353
+ [displayMaximum, displayMinimum, max, min, rangeUnit]
354
+ );
355
+ const handleInputChange = useCallback(
356
+ (event, nextValue) => {
357
+ const inputValue = nextValue ?? event?.target?.value ?? "";
358
+ setDisplayValue(inputValue);
359
+ if (inputValue === "" || inputValue === null || inputValue === void 0) {
360
+ setRangeError(null);
361
+ return;
362
+ }
363
+ const rawValue = Number(inputValue);
364
+ if (Number.isNaN(rawValue)) {
365
+ setRangeError(null);
366
+ return;
367
+ }
368
+ const updatedValue = Number(isFloatMiliseconds ? rawValue * 1e3 : rawValue);
369
+ const nextRangeError = buildRangeError(updatedValue);
370
+ setRangeError(nextRangeError);
371
+ if (!nextRangeError) {
372
+ setActualValue(updatedValue);
373
+ onChange?.(updatedValue);
374
+ }
375
+ },
376
+ [buildRangeError, isFloatMiliseconds, onChange]
377
+ );
378
+ const handleSliderChanging = useCallback((_, sliderInputValue) => {
379
+ const nextValue = normalizeSliderValue(Array.isArray(sliderInputValue) ? sliderInputValue[0] : sliderInputValue);
380
+ setActualValue(nextValue);
381
+ setDisplayValue(actualToDisplay(nextValue));
382
+ setRangeError(null);
383
+ }, [actualToDisplay]);
384
+ const handleSliderChanged = useCallback((_, sliderInputValue) => {
385
+ const nextValue = normalizeSliderValue(Array.isArray(sliderInputValue) ? sliderInputValue[0] : sliderInputValue ?? actualValue);
386
+ setActualValue(nextValue);
387
+ setDisplayValue(actualToDisplay(nextValue));
388
+ setRangeError(null);
325
389
  onChange?.(nextValue);
326
- },
327
- [isFloatMiliseconds, normalizeDisplayValue, onChange]
328
- );
329
- const controlsRow = /* @__PURE__ */ jsxs(
330
- "div",
331
- {
332
- className: classNames3("mui-ls-slider-input-row", {
333
- "mui-ls-slider-input-row--slider": !hideSlider,
334
- "mui-ls-slider-input-row--input": hideInput
335
- }),
336
- children: [
337
- !hideSlider && /* @__PURE__ */ jsx3(
338
- Slider,
339
- {
340
- value: sliderValue,
341
- onChange: handleSliderChange,
342
- onBlur: rest.onBlur,
343
- color: "primary",
344
- valueLabelDisplay: "auto",
345
- valueLabelFormat: (v) => valueLabelFormat?.(v) ?? `${v}${inputAfterText ?? ""}`,
346
- min: displayMinimum,
347
- max: displayMaximum,
348
- step: displayStep,
349
- sx: { flex: 1, minWidth: 0 }
350
- }
351
- ),
352
- !hideInput && /* @__PURE__ */ jsx3(
353
- LSInput,
354
- {
355
- ...rest,
356
- ...inputProps,
357
- type,
358
- name,
359
- onChange: (_event, nextValue) => handleInputChange({ target: { value: nextValue ?? "" } }),
360
- value: displayValue ?? "",
361
- inputAfterText,
362
- slotProps: {
363
- ...inputProps?.slotProps ?? {},
364
- htmlInput: {
365
- ...inputProps?.slotProps?.htmlInput ?? {},
366
- min: displayMinimum,
367
- max: displayMaximum,
368
- step: displayStep,
369
- inputMode: stepPrecision > 0 ? "decimal" : "numeric"
390
+ }, [actualToDisplay, actualValue, onChange]);
391
+ const sliderProgress = useMemo(() => {
392
+ const range = actualSliderMax - actualSliderMin;
393
+ if (!Number.isFinite(range) || range <= 0) {
394
+ return 0;
395
+ }
396
+ return Math.min(100, Math.max(0, (actualValue - actualSliderMin) / range * 100));
397
+ }, [actualSliderMax, actualSliderMin, actualValue]);
398
+ const resolvedHelperText = rangeError ? void 0 : inputProps?.helperText;
399
+ const resolvedError = rangeError ? true : inputProps?.error;
400
+ const { sx: sliderSx, className: sliderClassName, style: sliderStyle, disabled: sliderDisabled, ...sliderRestProps } = sliderProps;
401
+ const resolvedSliderSx = [
402
+ { flex: 1, minWidth: 0, color: "var(--white, #fff)" },
403
+ ...Array.isArray(sliderSx) ? sliderSx : sliderSx ? [sliderSx] : []
404
+ ];
405
+ const inputValueClassName = `${inputProps?.className ?? ""} ls-slider-value-input mui-ls-slider-input-value`.trim();
406
+ const htmlInputProps = {
407
+ ...inputProps?.slotProps?.htmlInput ?? {},
408
+ ...inputProps?.inputProps ?? {},
409
+ name,
410
+ min: displayMinimum,
411
+ max: displayMaximum,
412
+ step: inputStep,
413
+ inputMode: typeof inputStep === "number" && inputStep % 1 !== 0 ? "decimal" : "numeric"
414
+ };
415
+ const showInfoIcon = Boolean(info || hasInfo);
416
+ const labelId = label && name ? `${name}-slider-label` : void 0;
417
+ const sliderInputId = name ? `${name}-slider-input` : void 0;
418
+ const sliderControls = /* @__PURE__ */ jsxs("div", { className: `mui-ls-slider-input-style ${hideSlider ? "mui-ls-slider-input-style--input-only" : ""} ${label ? "noMargin" : ""}`, children: [
419
+ !hideSlider && /* @__PURE__ */ jsxs(
420
+ "div",
421
+ {
422
+ className: [
423
+ "mui-ls-slider-input-track",
424
+ inPopout ? "mui-ls-slider-input-track--popout" : "",
425
+ startIcon ? "mui-ls-slider-input-track--start-icon" : "",
426
+ endIcon ? "mui-ls-slider-input-track--end-icon" : ""
427
+ ].filter(Boolean).join(" "),
428
+ children: [
429
+ startIcon && /* @__PURE__ */ jsx4("span", { className: "ls-slider-input-icon", children: startIcon }),
430
+ inPopout ? /* @__PURE__ */ jsx4(
431
+ "input",
432
+ {
433
+ className: `ls-custom-range-input ${sliderClassName ?? ""}`.trim(),
434
+ style: {
435
+ background: `linear-gradient(to right, var(--white, #fff) ${sliderProgress}%, var(--white50, rgba(255, 255, 255, 0.5)) ${sliderProgress}%)`,
436
+ padding: 0,
437
+ maxWidth: "70px",
438
+ marginRight: 0,
439
+ ...sliderStyle
440
+ },
441
+ type: "range",
442
+ name,
443
+ value: String(actualValue),
444
+ min: actualSliderMin,
445
+ max: actualSliderMax,
446
+ step,
447
+ disabled: sliderDisabled,
448
+ onChange: ({ target: { value: nextSliderValue } }) => {
449
+ handleSliderChanging({}, Number(nextSliderValue));
450
+ },
451
+ onMouseUp: () => handleSliderChanged({}),
452
+ onTouchEnd: () => handleSliderChanged({})
370
453
  }
371
- },
372
- fullWidth: hideSlider ? fullWidth : false,
373
- $noMinHeight: false,
374
- className: hideSlider ? inputProps?.className : `${inputProps?.className ?? ""} mui-ls-slider-input-value`.trim(),
375
- style: hideSlider ? inputProps?.style : { width: 112, maxWidth: 112, flexShrink: 0 },
376
- ...!hideSlider ? { size: "small" } : {}
454
+ ) : /* @__PURE__ */ jsx4(
455
+ LSSlider,
456
+ {
457
+ ...sliderRestProps,
458
+ name,
459
+ color: sliderColor,
460
+ value: actualValue,
461
+ step,
462
+ min: actualSliderMin,
463
+ max: actualSliderMax,
464
+ valueLabelDisplay,
465
+ valueLabelFormat: (sliderValue) => valueLabelFormat?.(sliderValue) ?? `${sliderValue}${endAdornment ?? inputAfterText ?? ""}`,
466
+ onChange: handleSliderChanging,
467
+ onChangeCommitted: handleSliderChanged,
468
+ sx: resolvedSliderSx
469
+ }
470
+ ),
471
+ endIcon && /* @__PURE__ */ jsx4("span", { className: "ls-slider-input-icon", children: endIcon })
472
+ ]
473
+ }
474
+ ),
475
+ !hideInput && /* @__PURE__ */ jsx4(
476
+ LSInput,
477
+ {
478
+ ...rest,
479
+ ...inputProps,
480
+ type,
481
+ name,
482
+ color,
483
+ size: "small",
484
+ onChange: handleInputChange,
485
+ className: hideSlider ? inputProps?.className : inputValueClassName,
486
+ value: displayValue,
487
+ error: resolvedError,
488
+ helperText: resolvedHelperText,
489
+ fullWidth: hideSlider ? fullWidth : false,
490
+ inputRef: ref,
491
+ slotProps: {
492
+ ...inputProps?.slotProps ?? {},
493
+ htmlInput: htmlInputProps
377
494
  }
378
- )
379
- ]
380
- }
381
- );
382
- return /* @__PURE__ */ jsxs("div", { className: "mui-ls-slider-input-root", children: [
383
- /* @__PURE__ */ jsxs("fieldset", { className: "mui-ls-slider-input-fieldset", children: [
384
- label && /* @__PURE__ */ jsx3("legend", { className: "mui-ls-slider-input-legend", children: label }),
385
- controlsRow
386
- ] }),
387
- helperText && /* @__PURE__ */ jsx3("small", { className: "mui-ls-slider-input-helper", children: helperText })
388
- ] });
389
- };
495
+ }
496
+ ),
497
+ !hideInput && (endAdornment ?? inputAfterText) && /* @__PURE__ */ jsx4("div", { className: "mui-ls-slider-input-adornment", children: endAdornment ?? inputAfterText })
498
+ ] });
499
+ return /* @__PURE__ */ jsxs(FormControl2, { variant: "outlined", className: "mui-ls-slider-input-root", fullWidth: true, error: Boolean(rangeError), children: [
500
+ label && /* @__PURE__ */ jsxs(InputLabel, { shrink: true, id: labelId, htmlFor: sliderInputId, children: [
501
+ label,
502
+ showInfoIcon && /* @__PURE__ */ jsx4(Tooltip, { title: info ?? "", placement: "top", onOpen: infoOpen, onClose: infoClose, children: /* @__PURE__ */ jsx4("span", { className: "mui-ls-slider-input-info", "aria-label": typeof info === "string" ? info : void 0, children: /* @__PURE__ */ jsx4(InfoIcon, {}) }) })
503
+ ] }),
504
+ /* @__PURE__ */ jsx4(
505
+ OutlinedInput,
506
+ {
507
+ id: sliderInputId,
508
+ label,
509
+ notched: Boolean(label),
510
+ className: "mui-ls-slider-input-control",
511
+ inputComponent: SliderInputContent,
512
+ inputProps: { children: sliderControls }
513
+ }
514
+ ),
515
+ (helperText || rangeError) && /* @__PURE__ */ jsx4(FormHelperText, { className: "mui-ls-slider-input-helper", children: rangeError ?? helperText })
516
+ ] });
517
+ }
518
+ );
390
519
  LSSliderInput.displayName = "LSSliderInput";
391
520
 
392
521
  // src/components/LSSwitch/LSSwitch.tsx
393
522
  import MatSwitch from "@mui/material/Switch";
394
- import { forwardRef as forwardRef2 } from "react";
395
- import { jsx as jsx4 } from "react/jsx-runtime";
396
- var LSSwitch = forwardRef2(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx4(
523
+ import { forwardRef as forwardRef3 } from "react";
524
+ import { jsx as jsx5 } from "react/jsx-runtime";
525
+ var LSSwitch = forwardRef3(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx5(
397
526
  MatSwitch,
398
527
  {
399
528
  sx: {
@@ -414,20 +543,20 @@ var LSSwitch = forwardRef2(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx4
414
543
  LSSwitch.displayName = "LSSwitch";
415
544
 
416
545
  // src/components/LSSelect/LSSelect.tsx
417
- import FormControl2 from "@mui/material/FormControl";
418
- import InputLabel from "@mui/material/InputLabel";
546
+ import FormControl3 from "@mui/material/FormControl";
547
+ import InputLabel2 from "@mui/material/InputLabel";
419
548
  import Select from "@mui/material/Select";
420
- import Tooltip from "@mui/material/Tooltip";
421
- import { forwardRef as forwardRef3 } from "react";
422
- import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
423
- 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(
549
+ import Tooltip2 from "@mui/material/Tooltip";
550
+ import { forwardRef as forwardRef4 } from "react";
551
+ import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
552
+ var InfoIcon2 = () => /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx6(
424
553
  "path",
425
554
  {
426
555
  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",
427
556
  fill: "#CAC9D5"
428
557
  }
429
558
  ) });
430
- var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
559
+ var LSSelect = forwardRef4(({ className = "", style, ...props }, ref) => {
431
560
  const {
432
561
  placeholder,
433
562
  info,
@@ -445,7 +574,7 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
445
574
  const value = rest.multiple === true ? Array.isArray(rest.value) ? rest.value : rest.value === void 0 || rest.value === null || rest.value === "" ? [] : [rest.value] : rest.value ?? "";
446
575
  const renderValue = renderValueProp ?? (placeholderText ? (selected) => {
447
576
  if (selected === "" || Array.isArray(selected) && selected.length === 0) {
448
- return /* @__PURE__ */ jsx5("span", { style: { color: "var(--neutralLight3, var(--grey, #9392a1))" }, children: placeholderText });
577
+ return /* @__PURE__ */ jsx6("span", { style: { color: "var(--neutralLight3, var(--grey, #9392a1))" }, children: placeholderText });
449
578
  }
450
579
  return Array.isArray(selected) ? selected.join(", ") : selected;
451
580
  } : void 0);
@@ -472,6 +601,16 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
472
601
  "& .MuiMenuItem-root": {
473
602
  color: "var(--neutralLight1, var(--white, #fff))"
474
603
  },
604
+ "& .MuiMenuItem-root:hover, & .MuiMenuItem-root.Mui-focusVisible": {
605
+ backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 14%, transparent) !important"
606
+ },
607
+ "& .MuiMenuItem-root.Mui-selected": {
608
+ backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 24%, transparent) !important",
609
+ color: "var(--neutralLight1, var(--white, #fff)) !important"
610
+ },
611
+ "& .MuiMenuItem-root.Mui-selected:hover, & .MuiMenuItem-root.Mui-selected.Mui-focusVisible": {
612
+ backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 30%, transparent) !important"
613
+ },
475
614
  ...MenuProps?.slotProps?.paper?.sx
476
615
  }
477
616
  },
@@ -486,24 +625,18 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
486
625
  }
487
626
  };
488
627
  return /* @__PURE__ */ jsxs2(
489
- FormControl2,
628
+ FormControl3,
490
629
  {
491
630
  variant: "outlined",
492
631
  className: `${className} mui-ls-select-form-control`,
493
- sx: {
494
- marginBottom: ".3rem",
495
- marginTop: ".5rem",
496
- minWidth: "100px",
497
- width: "100%"
498
- },
499
632
  size: rest.size,
500
633
  style,
501
634
  children: [
502
- props.label && /* @__PURE__ */ jsxs2(InputLabel, { shrink: true, id: labelId, children: [
635
+ props.label && /* @__PURE__ */ jsxs2(InputLabel2, { shrink: true, id: labelId, children: [
503
636
  props.label,
504
- info && /* @__PURE__ */ jsx5(Tooltip, { title: info, placement: "right", children: /* @__PURE__ */ jsx5("span", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: /* @__PURE__ */ jsx5(InfoIcon, {}) }) })
637
+ info && /* @__PURE__ */ jsx6(Tooltip2, { title: info, placement: "right", children: /* @__PURE__ */ jsx6("span", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: /* @__PURE__ */ jsx6(InfoIcon2, {}) }) })
505
638
  ] }),
506
- /* @__PURE__ */ jsx5(
639
+ /* @__PURE__ */ jsx6(
507
640
  Select,
508
641
  {
509
642
  MenuProps: mergedMenuProps,
@@ -532,18 +665,18 @@ import { default as default3 } from "@mui/material/ListSubheader";
532
665
  // src/components/LSCheckbox/LSCheckbox.tsx
533
666
  import Checkbox from "@mui/material/Checkbox";
534
667
  import FormControlLabel from "@mui/material/FormControlLabel";
535
- import { forwardRef as forwardRef4 } from "react";
668
+ import { forwardRef as forwardRef5 } from "react";
536
669
  import { useController, useFormContext } from "react-hook-form";
537
- import classNames4 from "classnames";
538
- import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
539
- var LSCheckbox = forwardRef4(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
670
+ import classNames3 from "classnames";
671
+ import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
672
+ var LSCheckbox = forwardRef5(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
540
673
  const CheckboxComponent = Checkbox;
541
- return /* @__PURE__ */ jsx6(
674
+ return /* @__PURE__ */ jsx7(
542
675
  CheckboxComponent,
543
676
  {
544
677
  ...props,
545
678
  checked: checked ?? false,
546
- className: classNames4("ls-checkbox", className, { "Mui-disabled": props.disabled }),
679
+ className: classNames3("ls-checkbox", className, { "Mui-disabled": props.disabled }),
547
680
  ref,
548
681
  slotProps: {
549
682
  ...slotProps ?? {},
@@ -567,8 +700,8 @@ function LSCheckboxField({
567
700
  }) {
568
701
  const formContext = useFormContext();
569
702
  const resolvedControl = control ?? formContext?.control;
570
- if (!resolvedControl) return /* @__PURE__ */ jsx6(Fragment, {});
571
- return /* @__PURE__ */ jsx6(
703
+ if (!resolvedControl) return /* @__PURE__ */ jsx7(Fragment, {});
704
+ return /* @__PURE__ */ jsx7(
572
705
  LSCheckboxFieldInner,
573
706
  {
574
707
  name,
@@ -591,13 +724,13 @@ function LSCheckboxFieldInner({
591
724
  checkboxProps
592
725
  }) {
593
726
  const { field } = useController({ name, control });
594
- return /* @__PURE__ */ jsx6(
727
+ return /* @__PURE__ */ jsx7(
595
728
  FormControlLabel,
596
729
  {
597
- className: classNames4("ls-checkbox-row", className),
730
+ className: classNames3("ls-checkbox-row", className),
598
731
  labelPlacement,
599
732
  disabled,
600
- control: /* @__PURE__ */ jsx6(
733
+ control: /* @__PURE__ */ jsx7(
601
734
  LSCheckbox,
602
735
  {
603
736
  ...checkboxProps,
@@ -617,7 +750,7 @@ function LSCheckboxFieldInner({
617
750
  // src/components/LSColorPicker/LSColorPicker.tsx
618
751
  import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
619
752
  import GradientColorPicker from "react-best-gradient-color-picker";
620
- import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
753
+ import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
621
754
  var DEFAULT_COLOR = "#ff4076";
622
755
  var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name, label, helperText, placeholder, hideGradientControls = false, usePopup = false, disabled = false }) => {
623
756
  const isPopupMode = usePopup === true;
@@ -694,7 +827,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
694
827
  overflow: "visible"
695
828
  },
696
829
  children: [
697
- /* @__PURE__ */ jsx7(
830
+ /* @__PURE__ */ jsx8(
698
831
  LSInput,
699
832
  {
700
833
  className: "ls-color-picker__input",
@@ -706,7 +839,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
706
839
  onBlur,
707
840
  placeholder,
708
841
  disabled,
709
- endAdornment: /* @__PURE__ */ jsx7(
842
+ endAdornment: /* @__PURE__ */ jsx8(
710
843
  "button",
711
844
  {
712
845
  type: "button",
@@ -719,12 +852,12 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
719
852
  )
720
853
  }
721
854
  ),
722
- showPicker && /* @__PURE__ */ jsx7(
855
+ showPicker && /* @__PURE__ */ jsx8(
723
856
  "div",
724
857
  {
725
858
  className: isPopupMode ? "ls-color-picker__picker ls-color-picker__picker--popup" : "ls-color-picker__picker ls-color-picker__picker--inline",
726
859
  style: pickerContainerStyle,
727
- children: /* @__PURE__ */ jsx7(
860
+ children: /* @__PURE__ */ jsx8(
728
861
  GradientColorPicker,
729
862
  {
730
863
  hidePresets: true,
@@ -773,8 +906,8 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
773
906
  };
774
907
 
775
908
  // src/components/LSDatePicker/LSDatePicker.tsx
776
- import { forwardRef as forwardRef5 } from "react";
777
- import { jsx as jsx8 } from "react/jsx-runtime";
909
+ import { forwardRef as forwardRef6 } from "react";
910
+ import { jsx as jsx9 } from "react/jsx-runtime";
778
911
  var toDateTimeLocalValue = (value) => {
779
912
  if (!value) return "";
780
913
  const date = new Date(value);
@@ -786,7 +919,7 @@ var fromDateTimeLocalValue = (value) => {
786
919
  if (!value) return "";
787
920
  return new Date(value).toISOString();
788
921
  };
789
- var LSDatePicker = forwardRef5(
922
+ var LSDatePicker = forwardRef6(
790
923
  ({ value, onChange, onChangeStart, onChangeEnd, className, ...rest }, ref) => {
791
924
  const handleChange = (event) => {
792
925
  const nextValue = fromDateTimeLocalValue(event.target.value);
@@ -794,7 +927,7 @@ var LSDatePicker = forwardRef5(
794
927
  onChange?.(event, nextValue);
795
928
  onChangeEnd?.(event, nextValue);
796
929
  };
797
- return /* @__PURE__ */ jsx8(
930
+ return /* @__PURE__ */ jsx9(
798
931
  LSInput,
799
932
  {
800
933
  ...rest,
@@ -814,7 +947,7 @@ import { KeyboardArrowDown } from "@mui/icons-material";
814
947
  import Autocomplete from "@mui/material/Autocomplete";
815
948
  import TextField2 from "@mui/material/TextField";
816
949
  import { memo, startTransition, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
817
- import { jsx as jsx9 } from "react/jsx-runtime";
950
+ import { jsx as jsx10 } from "react/jsx-runtime";
818
951
  var LSFontPicker = memo(function LSFontPicker2({
819
952
  value,
820
953
  onChange,
@@ -858,7 +991,7 @@ var LSFontPicker = memo(function LSFontPicker2({
858
991
  onLoadFontsRef.current?.([nextValue]);
859
992
  });
860
993
  };
861
- return /* @__PURE__ */ jsx9("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx9(
994
+ return /* @__PURE__ */ jsx10("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx10(
862
995
  AutocompleteComponent,
863
996
  {
864
997
  freeSolo: true,
@@ -868,7 +1001,7 @@ var LSFontPicker = memo(function LSFontPicker2({
868
1001
  options: combinedFonts,
869
1002
  value: currentValue,
870
1003
  inputValue,
871
- popupIcon: /* @__PURE__ */ jsx9(KeyboardArrowDown, {}),
1004
+ popupIcon: /* @__PURE__ */ jsx10(KeyboardArrowDown, {}),
872
1005
  isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
873
1006
  onChange: (_event, newValue) => {
874
1007
  handleValueChange(typeof newValue === "string" ? newValue : `${newValue ?? ""}`);
@@ -910,7 +1043,7 @@ var LSFontPicker = memo(function LSFontPicker2({
910
1043
  noOptionsText: "No fonts found",
911
1044
  renderOption: (props, option) => {
912
1045
  const { key, ...optionProps } = props;
913
- return /* @__PURE__ */ jsx9(
1046
+ return /* @__PURE__ */ jsx10(
914
1047
  "li",
915
1048
  {
916
1049
  ...optionProps,
@@ -929,7 +1062,7 @@ var LSFontPicker = memo(function LSFontPicker2({
929
1062
  },
930
1063
  renderInput: (params) => {
931
1064
  const { slotProps: paramsSlotProps = {}, ...restParams } = params;
932
- return /* @__PURE__ */ jsx9(
1065
+ return /* @__PURE__ */ jsx10(
933
1066
  TextFieldComponent,
934
1067
  {
935
1068
  ...restParams,
@@ -966,7 +1099,7 @@ var LSFontPicker = memo(function LSFontPicker2({
966
1099
 
967
1100
  // src/components/LSMultiSelect/LSMultiSelect.tsx
968
1101
  import { MenuItem } from "@mui/material";
969
- import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
1102
+ import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
970
1103
  var LSMultiSelect = ({
971
1104
  options,
972
1105
  placeholder = "Select...",
@@ -980,7 +1113,7 @@ var LSMultiSelect = ({
980
1113
  } = event;
981
1114
  onChange(typeof value2 === "string" ? value2.split(",") : value2);
982
1115
  };
983
- return /* @__PURE__ */ jsx10(
1116
+ return /* @__PURE__ */ jsx11(
984
1117
  LSSelect,
985
1118
  {
986
1119
  multiple: true,
@@ -991,10 +1124,10 @@ var LSMultiSelect = ({
991
1124
  onChange: handleChange,
992
1125
  displayEmpty: true,
993
1126
  renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "ls-multi-select-value", children: [
994
- /* @__PURE__ */ jsx10("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map(
1127
+ /* @__PURE__ */ jsx11("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map(
995
1128
  (val) => options.find((opt) => opt.value === val)?.label ?? val
996
1129
  ).join(", ") : placeholder }),
997
- /* @__PURE__ */ jsx10("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
1130
+ /* @__PURE__ */ jsx11("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
998
1131
  ] }),
999
1132
  MenuProps: {
1000
1133
  // The previous version of this also set `PaperProps` here — that
@@ -1045,7 +1178,7 @@ var LSMultiSelect = ({
1045
1178
  }
1046
1179
  },
1047
1180
  children: [
1048
- /* @__PURE__ */ jsx10(
1181
+ /* @__PURE__ */ jsx11(
1049
1182
  LSCheckbox,
1050
1183
  {
1051
1184
  checked: (value ?? []).includes(option.value),
@@ -1053,7 +1186,7 @@ var LSMultiSelect = ({
1053
1186
  disableRipple: true
1054
1187
  }
1055
1188
  ),
1056
- /* @__PURE__ */ jsx10("span", { children: option.label })
1189
+ /* @__PURE__ */ jsx11("span", { children: option.label })
1057
1190
  ]
1058
1191
  },
1059
1192
  option.value
@@ -1066,19 +1199,19 @@ var LSMultiSelect = ({
1066
1199
  import FormControlLabel2 from "@mui/material/FormControlLabel";
1067
1200
  import Radio from "@mui/material/Radio";
1068
1201
  import RadioGroup from "@mui/material/RadioGroup";
1069
- import classNames5 from "classnames";
1070
- import { jsx as jsx11 } from "react/jsx-runtime";
1202
+ import classNames4 from "classnames";
1203
+ import { jsx as jsx12 } from "react/jsx-runtime";
1071
1204
  var LSRadio = ({ className = "", ...props }) => {
1072
- return /* @__PURE__ */ jsx11(Radio, { ...props, className: classNames5("ls-radio", className) });
1205
+ return /* @__PURE__ */ jsx12(Radio, { ...props, className: classNames4("ls-radio", className) });
1073
1206
  };
1074
1207
  var LSRadioGroup = ({ selections, className = "", optionClassName = "", row, ...props }) => {
1075
- return /* @__PURE__ */ jsx11(RadioGroup, { ...props, row, className: classNames5("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx11(
1208
+ return /* @__PURE__ */ jsx12(RadioGroup, { ...props, row, className: classNames4("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx12(
1076
1209
  FormControlLabel2,
1077
1210
  {
1078
- className: classNames5("ls-radio-row", optionClassName),
1211
+ className: classNames4("ls-radio-row", optionClassName),
1079
1212
  value: selection.value,
1080
1213
  disabled: selection.disabled,
1081
- control: /* @__PURE__ */ jsx11(LSRadio, {}),
1214
+ control: /* @__PURE__ */ jsx12(LSRadio, {}),
1082
1215
  label: selection.label
1083
1216
  },
1084
1217
  selection.value
@@ -1088,13 +1221,13 @@ LSRadioGroup.displayName = "LSRadioGroup";
1088
1221
 
1089
1222
  // src/components/LSTextField/LSTextField.tsx
1090
1223
  import TextField3 from "@mui/material/TextField";
1091
- import { forwardRef as forwardRef6 } from "react";
1092
- import { jsx as jsx12 } from "react/jsx-runtime";
1093
- var LSTextField = forwardRef6(
1224
+ import { forwardRef as forwardRef7 } from "react";
1225
+ import { jsx as jsx13 } from "react/jsx-runtime";
1226
+ var LSTextField = forwardRef7(
1094
1227
  (props, ref) => {
1095
1228
  const { slotProps, ...rest } = props;
1096
1229
  const paramsInputLabel = slotProps?.inputLabel ?? {};
1097
- return /* @__PURE__ */ jsx12(
1230
+ return /* @__PURE__ */ jsx13(
1098
1231
  TextField3,
1099
1232
  {
1100
1233
  ...rest,
@@ -1122,11 +1255,11 @@ import InputAdornment2 from "@mui/material/InputAdornment";
1122
1255
  import Popover from "@mui/material/Popover";
1123
1256
  import Search from "@mui/icons-material/Search";
1124
1257
  import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
1125
- import Tooltip2 from "@mui/material/Tooltip";
1258
+ import Tooltip3 from "@mui/material/Tooltip";
1126
1259
  import {
1127
1260
  Fragment as Fragment4,
1128
1261
  createContext,
1129
- forwardRef as forwardRef7,
1262
+ forwardRef as forwardRef8,
1130
1263
  useCallback as useCallback2,
1131
1264
  useContext,
1132
1265
  useEffect as useEffect5,
@@ -1145,7 +1278,7 @@ import {
1145
1278
  useState as useState4
1146
1279
  } from "react";
1147
1280
  import { createPortal } from "react-dom";
1148
- import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
1281
+ import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
1149
1282
  var TOKEN_START = "{{";
1150
1283
  var TOKEN_END = "}}";
1151
1284
  var COPIED_STYLE_PROPS = [
@@ -1229,7 +1362,7 @@ var parseSegments = (value, classify, describe) => {
1229
1362
  }
1230
1363
  return segments;
1231
1364
  };
1232
- var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx13(
1365
+ var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx14(
1233
1366
  "span",
1234
1367
  {
1235
1368
  "data-desc": segment.desc || void 0,
@@ -1243,7 +1376,7 @@ var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx13(
1243
1376
  ] }) : segment.text
1244
1377
  },
1245
1378
  key
1246
- ) : /* @__PURE__ */ jsx13(Fragment2, { children: segment.text }, key);
1379
+ ) : /* @__PURE__ */ jsx14(Fragment2, { children: segment.text }, key);
1247
1380
  var VariableHighlightOverlay = ({
1248
1381
  inputEl,
1249
1382
  value,
@@ -1367,11 +1500,11 @@ var VariableHighlightOverlay = ({
1367
1500
  }
1368
1501
  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
1369
1502
  createPortal(
1370
- /* @__PURE__ */ jsx13("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map((segment, index) => renderSegment(segment, String(index))) }),
1503
+ /* @__PURE__ */ jsx14("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map((segment, index) => renderSegment(segment, String(index))) }),
1371
1504
  inputEl.parentElement
1372
1505
  ),
1373
1506
  tooltip ? createPortal(
1374
- /* @__PURE__ */ jsx13(
1507
+ /* @__PURE__ */ jsx14(
1375
1508
  "div",
1376
1509
  {
1377
1510
  className: "ls-variable-highlight__tooltip",
@@ -1385,14 +1518,14 @@ var VariableHighlightOverlay = ({
1385
1518
  };
1386
1519
 
1387
1520
  // src/components/LSVariableInputField/LSVariableInputField.tsx
1388
- import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
1521
+ import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
1389
1522
  import { createElement } from "react";
1390
1523
  var LSVariableInputContext = createContext({});
1391
1524
  var LSVariableInputProvider = ({
1392
1525
  children,
1393
1526
  value
1394
1527
  }) => {
1395
- return /* @__PURE__ */ jsx14(LSVariableInputContext.Provider, { value, children });
1528
+ return /* @__PURE__ */ jsx15(LSVariableInputContext.Provider, { value, children });
1396
1529
  };
1397
1530
  var DEFAULT_FUNCTION_VARIABLES = [
1398
1531
  "sum_variables",
@@ -1611,7 +1744,7 @@ var getVariableColorClass = (variableType, isSuggested) => {
1611
1744
  return "ls-variable-token--custom";
1612
1745
  };
1613
1746
  var CHILD_VARIABLE_COLOR_CLASS = "ls-variable-token--child";
1614
- var LSVariableInputField = forwardRef7((props, ref) => {
1747
+ var LSVariableInputField = forwardRef8((props, ref) => {
1615
1748
  const context = useContext(LSVariableInputContext);
1616
1749
  const {
1617
1750
  name,
@@ -2143,8 +2276,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2143
2276
  {
2144
2277
  className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
2145
2278
  children: [
2146
- /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
2147
- variableType === "func" && /* @__PURE__ */ jsx14(
2279
+ /* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
2280
+ variableType === "func" && /* @__PURE__ */ jsx15(
2148
2281
  "span",
2149
2282
  {
2150
2283
  className: "ls-variable-token__badge",
@@ -2155,7 +2288,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2155
2288
  ]
2156
2289
  }
2157
2290
  );
2158
- const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx14(
2291
+ const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx15(
2159
2292
  "button",
2160
2293
  {
2161
2294
  type: "button",
@@ -2166,15 +2299,15 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2166
2299
  className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
2167
2300
  "aria-label": expanded ? "Collapse" : "Expand",
2168
2301
  "aria-expanded": expanded,
2169
- children: /* @__PURE__ */ jsx14(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
2302
+ children: /* @__PURE__ */ jsx15(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
2170
2303
  }
2171
2304
  );
2172
- const renderExpandSpacer = () => /* @__PURE__ */ jsx14("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
2305
+ const renderExpandSpacer = () => /* @__PURE__ */ jsx15("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
2173
2306
  const getVariableValuePreview = (variableValue) => {
2174
2307
  const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
2175
2308
  return { displayValue, fullValue };
2176
2309
  };
2177
- const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx14(
2310
+ const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx15(
2178
2311
  "input",
2179
2312
  {
2180
2313
  className: "ls-variable-picker__value-input",
@@ -2208,18 +2341,18 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2208
2341
  style: { paddingLeft: `${node.depth * 1.25}rem` },
2209
2342
  children: [
2210
2343
  node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
2211
- /* @__PURE__ */ jsx14(
2344
+ /* @__PURE__ */ jsx15(
2212
2345
  "div",
2213
2346
  {
2214
2347
  className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
2215
- children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
2348
+ children: /* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
2216
2349
  }
2217
2350
  )
2218
2351
  ]
2219
2352
  }
2220
2353
  ),
2221
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: node.displayKey }),
2222
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
2354
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: node.displayKey }),
2355
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
2223
2356
  ]
2224
2357
  }
2225
2358
  ),
@@ -2227,7 +2360,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2227
2360
  ] }, fullToken);
2228
2361
  });
2229
2362
  const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
2230
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
2363
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
2231
2364
  examples.map((example) => /* @__PURE__ */ jsxs6(
2232
2365
  "div",
2233
2366
  {
@@ -2241,12 +2374,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2241
2374
  style: { paddingLeft: "1.25rem" },
2242
2375
  children: [
2243
2376
  renderExpandSpacer(),
2244
- /* @__PURE__ */ jsx14("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx14("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
2377
+ /* @__PURE__ */ jsx15("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
2245
2378
  ]
2246
2379
  }
2247
2380
  ),
2248
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: example.label }),
2249
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value" })
2381
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: example.label }),
2382
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value" })
2250
2383
  ]
2251
2384
  },
2252
2385
  example.snippet
@@ -2303,7 +2436,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2303
2436
  isSelected ? "ls-variable-option--selected" : ""
2304
2437
  ].filter(Boolean).join(" ")
2305
2438
  },
2306
- thumb ? /* @__PURE__ */ jsx14(
2439
+ thumb ? /* @__PURE__ */ jsx15(
2307
2440
  "img",
2308
2441
  {
2309
2442
  src: thumb,
@@ -2312,23 +2445,23 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2312
2445
  }
2313
2446
  ) : null,
2314
2447
  /* @__PURE__ */ jsxs6("div", { className: "ls-variable-option__body", children: [
2315
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
2316
- helperText ? /* @__PURE__ */ jsx14("div", { className: "ls-variable-option__helper", children: helperText }) : null
2448
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
2449
+ helperText ? /* @__PURE__ */ jsx15("div", { className: "ls-variable-option__helper", children: helperText }) : null
2317
2450
  ] })
2318
2451
  );
2319
2452
  };
2320
2453
  const showSuggestedSection = shouldRenderPicker && allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
2321
2454
  const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
2322
2455
  /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__intro", children: [
2323
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__intro-text", children: t(
2456
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__intro-text", children: t(
2324
2457
  "overlay-variables.variables-description",
2325
2458
  "Use variables that will automatically be replaced before sending out the text"
2326
2459
  ) }),
2327
- /* @__PURE__ */ jsx14(
2460
+ /* @__PURE__ */ jsx15(
2328
2461
  LSInput,
2329
2462
  {
2330
2463
  autoFocus: true,
2331
- startAdornment: /* @__PURE__ */ jsx14(Search, { style: { color: "#fff", width: 20, height: 20 } }),
2464
+ startAdornment: /* @__PURE__ */ jsx15(Search, { style: { color: "#fff", width: 20, height: 20 } }),
2332
2465
  placeholder: t("common.search", "Search"),
2333
2466
  value: searchQuery,
2334
2467
  onChange: (e) => setSearchQuery(e.target.value),
@@ -2337,13 +2470,13 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2337
2470
  )
2338
2471
  ] }),
2339
2472
  /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__header", children: [
2340
- /* @__PURE__ */ jsx14("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
2341
- /* @__PURE__ */ jsx14("div", { children: t("commands.description", "Description") }),
2342
- /* @__PURE__ */ jsx14("div", { children: t("common.value", "Value") })
2473
+ /* @__PURE__ */ jsx15("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
2474
+ /* @__PURE__ */ jsx15("div", { children: t("commands.description", "Description") }),
2475
+ /* @__PURE__ */ jsx15("div", { children: t("common.value", "Value") })
2343
2476
  ] }),
2344
2477
  /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__list", children: [
2345
2478
  showSuggestedSection && /* @__PURE__ */ jsxs6("fieldset", { className: "ls-variable-picker__field", children: [
2346
- /* @__PURE__ */ jsx14("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
2479
+ /* @__PURE__ */ jsx15("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
2347
2480
  filteredAllowedVariables.map((definition, idx) => {
2348
2481
  const variableType = getAllowedVariableVisualType(
2349
2482
  definition.name
@@ -2371,8 +2504,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2371
2504
  expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
2372
2505
  renderVariableToken(definition.name, variableType, true)
2373
2506
  ] }),
2374
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
2375
- /* @__PURE__ */ jsx14(
2507
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
2508
+ /* @__PURE__ */ jsx15(
2376
2509
  "div",
2377
2510
  {
2378
2511
  className: "ls-variable-picker__value",
@@ -2411,8 +2544,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2411
2544
  expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
2412
2545
  renderVariableToken(variable.name, variableType)
2413
2546
  ] }),
2414
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
2415
- /* @__PURE__ */ jsx14("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
2547
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
2548
+ /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
2416
2549
  ]
2417
2550
  }
2418
2551
  ),
@@ -2421,7 +2554,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2421
2554
  })
2422
2555
  ] })
2423
2556
  ] }) : null;
2424
- const textField = (params = {}) => /* @__PURE__ */ jsx14(
2557
+ const textField = (params = {}) => /* @__PURE__ */ jsx15(
2425
2558
  VariableInputTextField,
2426
2559
  {
2427
2560
  t,
@@ -2449,7 +2582,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2449
2582
  }
2450
2583
  );
2451
2584
  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
2452
- /* @__PURE__ */ jsx14(
2585
+ /* @__PURE__ */ jsx15(
2453
2586
  Popover,
2454
2587
  {
2455
2588
  anchorEl: containerRef.current,
@@ -2475,7 +2608,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2475
2608
  children: pickerBody
2476
2609
  }
2477
2610
  ),
2478
- isAutoComplete ? /* @__PURE__ */ jsx14(
2611
+ isAutoComplete ? /* @__PURE__ */ jsx15(
2479
2612
  Autocomplete2,
2480
2613
  {
2481
2614
  disableClearable: true,
@@ -2572,7 +2705,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2572
2705
  renderInput: (params) => textField(params)
2573
2706
  }
2574
2707
  ) : textField(),
2575
- !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx14(
2708
+ !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx15(
2576
2709
  VariableHighlightOverlay,
2577
2710
  {
2578
2711
  inputEl,
@@ -2585,7 +2718,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
2585
2718
  ] });
2586
2719
  });
2587
2720
  LSVariableInputField.displayName = "LSVariableInputField";
2588
- var VariableInputTextField = forwardRef7(
2721
+ var VariableInputTextField = forwardRef8(
2589
2722
  ({
2590
2723
  t,
2591
2724
  id,
@@ -2611,10 +2744,10 @@ var VariableInputTextField = forwardRef7(
2611
2744
  const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
2612
2745
  const paramsSlotInput = params?.slotProps?.input ?? {};
2613
2746
  const explicitStartAdornment = inputProps?.startAdornment;
2614
- const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx14(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
2747
+ const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx15(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
2615
2748
  const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
2616
2749
  const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
2617
- return /* @__PURE__ */ jsx14(
2750
+ return /* @__PURE__ */ jsx15(
2618
2751
  LSTextField,
2619
2752
  {
2620
2753
  id,
@@ -2644,7 +2777,7 @@ var VariableInputTextField = forwardRef7(
2644
2777
  startAdornment,
2645
2778
  endAdornment: /* @__PURE__ */ jsxs6(Fragment5, { children: [
2646
2779
  endAdornment ?? null,
2647
- currentValue ? /* @__PURE__ */ jsx14(Tooltip2, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx14(
2780
+ currentValue ? /* @__PURE__ */ jsx15(Tooltip3, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx15(
2648
2781
  InputAdornment2,
2649
2782
  {
2650
2783
  position: "end",
@@ -2660,7 +2793,7 @@ var VariableInputTextField = forwardRef7(
2660
2793
  children: currentValue.displayValue
2661
2794
  }
2662
2795
  ) }) : null,
2663
- showVariableIcon ? /* @__PURE__ */ jsx14(Tooltip2, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx14(
2796
+ showVariableIcon ? /* @__PURE__ */ jsx15(Tooltip3, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx15(
2664
2797
  InputAdornment2,
2665
2798
  {
2666
2799
  position: "end",
@@ -2686,11 +2819,11 @@ import ListItemIcon from "@mui/material/ListItemIcon";
2686
2819
  import ListItemText from "@mui/material/ListItemText";
2687
2820
  import Menu from "@mui/material/Menu";
2688
2821
  import MenuItem2 from "@mui/material/MenuItem";
2689
- import Tooltip3 from "@mui/material/Tooltip";
2690
- import classNames7 from "classnames";
2822
+ import Tooltip4 from "@mui/material/Tooltip";
2823
+ import classNames6 from "classnames";
2691
2824
 
2692
2825
  // src/components/PlatformIcon/PlatformIcon.tsx
2693
- import classNames6 from "classnames";
2826
+ import classNames5 from "classnames";
2694
2827
 
2695
2828
  // src/assets/platforms/discord.svg
2696
2829
  var discord_default = 'data:image/svg+xml,<svg width="106" height="84" viewBox="0 0 106 84" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M87.6564 10.3044C81.1722 7.33742 74.33 5.21982 67.3004 4.00432C67.2367 3.99362 67.1713 4.00292 67.1131 4.03082C67.0549 4.05872 67.0068 4.10392 66.9754 4.16012C66.0941 5.71802 65.1192 7.75572 64.4379 9.35102C56.8605 8.20442 49.153 8.20442 41.5757 9.35102C40.8157 7.57392 39.956 5.84082 39.0007 4.16012C38.9686 4.10452 38.9204 4.05982 38.8624 4.03202C38.8044 4.00422 38.7393 3.99452 38.6757 4.00432C31.6445 5.21322 24.8008 7.33202 18.3196 10.3044C18.2642 10.3255 18.2178 10.3652 18.1884 10.4166C5.22598 29.7281 1.66978 48.5661 3.41358 67.1673C3.41978 67.2545 3.47608 67.3418 3.54478 67.3978C11.093 72.9727 19.5358 77.229 28.5133 79.986C28.5767 80.005 28.6448 80.005 28.7077 79.983C28.7707 79.962 28.8252 79.921 28.8633 79.867C30.7883 77.25 32.5007 74.4893 33.9757 71.5854C34.0065 71.5256 34.017 71.4575 34.0057 71.3913C33.9945 71.325 33.962 71.2641 33.9132 71.2178C33.8809 71.1874 33.8426 71.164 33.8007 71.1492C31.108 70.1174 28.5001 68.8777 26.0008 67.4415C25.931 67.402 25.8791 67.3373 25.8558 67.2607C25.8325 67.1842 25.8397 67.1016 25.8758 67.0302C25.8971 66.9838 25.9292 66.9432 25.9696 66.9118C26.4946 66.5192 27.0196 66.1079 27.5195 65.6966C27.5637 65.6612 27.6167 65.6385 27.6729 65.6308C27.729 65.6231 27.7862 65.6308 27.8383 65.653C44.2069 73.1059 61.9254 73.1059 78.094 65.653C78.148 65.6297 78.2074 65.6214 78.2657 65.6291C78.324 65.6368 78.3792 65.6601 78.4253 65.6966C78.9253 66.1079 79.4503 66.5192 79.9753 66.9118C80.0178 66.9428 80.052 66.9838 80.0747 67.0312C80.0975 67.0786 80.1081 67.1308 80.1056 67.1833C80.1031 67.2358 80.0876 67.2868 80.0605 67.3319C80.0334 67.3769 79.9955 67.4146 79.9503 67.4415C77.4566 68.8909 74.8454 70.1291 72.1441 71.143C72.101 71.1585 72.0619 71.1834 72.0295 71.2157C71.9971 71.248 71.9722 71.287 71.9566 71.3299C71.9421 71.3716 71.9363 71.4157 71.9396 71.4596C71.9428 71.5035 71.955 71.5464 71.9753 71.5854C73.4753 74.4831 75.194 77.25 77.0815 79.867C77.1197 79.921 77.1741 79.962 77.2371 79.983C77.3 80.005 77.3681 80.005 77.4315 79.986C86.424 77.238 94.881 72.9807 102.438 67.3978C102.475 67.3717 102.507 67.3374 102.53 67.2975C102.552 67.2576 102.566 67.2131 102.569 67.1673C104.656 45.6622 99.075 26.98 87.7814 10.4228C87.77 10.3955 87.753 10.3708 87.7315 10.3504C87.71 10.33 87.6844 10.3144 87.6564 10.3044ZM36.4195 55.8383C31.4883 55.8383 27.432 51.3267 27.432 45.7931C27.432 40.2532 31.4133 35.7416 36.4195 35.7416C41.4632 35.7416 45.4819 40.2906 45.4069 45.7931C45.4069 51.3267 41.4257 55.8383 36.4195 55.8383ZM69.6441 55.8383C64.7192 55.8383 60.6567 51.3267 60.6567 45.7931C60.6567 40.2532 64.6379 35.7416 69.6441 35.7416C74.6878 35.7416 78.7128 40.2906 78.6315 45.7931C78.6315 51.3267 74.6878 55.8383 69.6441 55.8383Z" fill="%235C65EB"/>%0A</svg>%0A';
@@ -2717,7 +2850,7 @@ var twitter_default = 'data:image/svg+xml,<svg width="400" height="400" viewBox=
2717
2850
  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';
2718
2851
 
2719
2852
  // src/components/PlatformIcon/PlatformIcon.tsx
2720
- import { jsx as jsx15 } from "react/jsx-runtime";
2853
+ import { jsx as jsx16 } from "react/jsx-runtime";
2721
2854
  var PLATFORM_ICON_URLS = {
2722
2855
  twitch: twitch_default,
2723
2856
  youtube: youtube_default,
@@ -2742,13 +2875,13 @@ function PlatformIcon({ platform, fallback = true, size, className, title, style
2742
2875
  return null;
2743
2876
  }
2744
2877
  const sizeStyle = size !== void 0 ? { height: typeof size === "number" ? `${size}px` : size } : void 0;
2745
- return /* @__PURE__ */ jsx15("img", { className: classNames6("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
2878
+ return /* @__PURE__ */ jsx16("img", { className: classNames5("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
2746
2879
  }
2747
2880
  PlatformIcon.displayName = "PlatformIcon";
2748
2881
 
2749
2882
  // src/components/ChatMessageItem/modActionIcons.tsx
2750
- import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
2751
- var DeleteIcon = () => /* @__PURE__ */ jsx16("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
2883
+ import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
2884
+ var DeleteIcon = () => /* @__PURE__ */ jsx17("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
2752
2885
  "path",
2753
2886
  {
2754
2887
  d: "M14.375 2.7H11.875V1.2C11.875 0.538125 11.3145 0 10.625 0H4.375C3.68555 0 3.125 0.538125 3.125 1.2V2.7H0.625C0.279297 2.7 0 2.96813 0 3.3V3.9C0 3.9825 0.0703125 4.05 0.15625 4.05H1.33594L1.81836 13.8563C1.84961 14.4956 2.40039 15 3.06641 15H11.9336C12.6016 15 13.1504 14.4975 13.1816 13.8563L13.6641 4.05H14.8438C14.9297 4.05 15 3.9825 15 3.9V3.3C15 2.96813 14.7207 2.7 14.375 2.7ZM10.4688 2.7H4.53125V1.35H10.4688V2.7Z",
@@ -2756,14 +2889,14 @@ var DeleteIcon = () => /* @__PURE__ */ jsx16("svg", { width: "15", height: "15",
2756
2889
  }
2757
2890
  ) });
2758
2891
  var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2759
- /* @__PURE__ */ jsx16(
2892
+ /* @__PURE__ */ jsx17(
2760
2893
  "path",
2761
2894
  {
2762
2895
  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",
2763
2896
  fill: "currentColor"
2764
2897
  }
2765
2898
  ),
2766
- /* @__PURE__ */ jsx16(
2899
+ /* @__PURE__ */ jsx17(
2767
2900
  "path",
2768
2901
  {
2769
2902
  d: "M2.14286 1.28571H9.85714V0.642857C9.85714 0.472361 9.78941 0.308848 9.66885 0.188289C9.54829 0.0677294 9.38478 0 9.21428 0H0.75C0.551088 0 0.360322 0.0790177 0.21967 0.21967C0.0790177 0.360322 0 0.551088 0 0.75V9.21428C0 9.38478 0.0677294 9.54829 0.188289 9.66885C0.308848 9.78941 0.472361 9.85714 0.642857 9.85714H1.28571V2.14286C1.28571 1.91553 1.37602 1.69751 1.53677 1.53677C1.69751 1.37602 1.91553 1.28571 2.14286 1.28571Z",
@@ -2771,8 +2904,8 @@ var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", v
2771
2904
  }
2772
2905
  )
2773
2906
  ] });
2774
- var PinOnIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M10.6667 7.99992V2.66659H11.3333V1.33325H4.66667V2.66659H5.33333V7.99992L4 9.33325V10.6666H7.46667V14.6666H8.53333V10.6666H12V9.33325L10.6667 7.99992Z", fill: "currentColor" }) });
2775
- var PinOffIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
2907
+ var PinOnIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17("path", { d: "M10.6667 7.99992V2.66659H11.3333V1.33325H4.66667V2.66659H5.33333V7.99992L4 9.33325V10.6666H7.46667V14.6666H8.53333V10.6666H12V9.33325L10.6667 7.99992Z", fill: "currentColor" }) });
2908
+ var PinOffIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
2776
2909
  "path",
2777
2910
  {
2778
2911
  d: "M10.6667 7.99992V2.66659H11.3333V1.33325H4.66667V2.66659H5.33333V7.99992L4 9.33325V10.6666H7.46667V14.6666H8.53333V10.6666H12V9.33325L10.6667 7.99992ZM5.86667 9.33325L6.66667 8.53325V2.66659H9.33333V8.53325L10.1333 9.33325H5.86667Z",
@@ -2781,8 +2914,8 @@ var PinOffIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16",
2781
2914
  ) });
2782
2915
  var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2783
2916
  /* @__PURE__ */ jsxs7("g", { clipPath: "url(#ls-chat-translate-clip)", children: [
2784
- /* @__PURE__ */ jsx16("path", { d: "M34.9975 45.927L32.605 53H26.5L36.741 25.5H43.803L54 53H47.5815L45.189 45.927H34.9975ZM43.9845 41.879L40.25 30.758H39.9805L36.246 41.879H43.9845Z", fill: "currentColor" }),
2785
- /* @__PURE__ */ jsx16(
2917
+ /* @__PURE__ */ jsx17("path", { d: "M34.9975 45.927L32.605 53H26.5L36.741 25.5H43.803L54 53H47.5815L45.189 45.927H34.9975ZM43.9845 41.879L40.25 30.758H39.9805L36.246 41.879H43.9845Z", fill: "currentColor" }),
2918
+ /* @__PURE__ */ jsx17(
2786
2919
  "path",
2787
2920
  {
2788
2921
  d: "M10 20C10 17.0826 11.1589 14.2847 13.2218 12.2218C15.2847 10.1589 18.0826 9 21 9H59.5C62.4174 9 65.2153 10.1589 67.2782 12.2218C69.3411 14.2847 70.5 17.0826 70.5 20V36.5H87C89.9174 36.5 92.7153 37.6589 94.7782 39.7218C96.8411 41.7847 98 44.5826 98 47.5V86C98 88.9174 96.8411 91.7153 94.7782 93.7782C92.7153 95.8411 89.9174 97 87 97H48.5C45.5826 97 42.7847 95.8411 40.7218 93.7782C38.6589 91.7153 37.5 88.9174 37.5 86V69.5H21C18.0826 69.5 15.2847 68.3411 13.2218 66.2782C11.1589 64.2153 10 61.4174 10 58.5V20ZM21 14.5C19.5413 14.5 18.1424 15.0795 17.1109 16.1109C16.0795 17.1424 15.5 18.5413 15.5 20V58.5C15.5 59.9587 16.0795 61.3576 17.1109 62.3891C18.1424 63.4205 19.5413 64 21 64H59.5C60.9587 64 62.3576 63.4205 63.3891 62.3891C64.4205 61.3576 65 59.9587 65 58.5V20C65 18.5413 64.4205 17.1424 63.3891 16.1109C62.3576 15.0795 60.9587 14.5 59.5 14.5H21ZM60.259 69.4725C61.3187 71.1262 62.4737 72.6772 63.724 74.1255C59.61 77.288 54.5225 79.631 48.5 81.2315C49.479 82.425 50.9805 84.724 51.5525 86C57.74 84.0255 62.9925 81.358 67.4255 77.783C71.699 81.4405 76.99 84.1905 83.5405 85.879C84.272 84.482 85.8175 82.1775 87 80.984C80.8125 79.5925 75.6865 77.167 71.49 73.922C75.2355 69.8135 78.211 64.8415 80.4055 58.7585H87V53H70.5V58.7585H74.7075C72.9585 63.4005 70.6375 67.2615 67.7115 70.4735C66.9028 69.613 66.1409 68.7097 65.429 67.7675C63.8757 68.76 62.098 69.3463 60.259 69.4725Z",
@@ -2790,17 +2923,17 @@ var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "1
2790
2923
  }
2791
2924
  )
2792
2925
  ] }),
2793
- /* @__PURE__ */ jsx16("defs", { children: /* @__PURE__ */ jsx16("clipPath", { id: "ls-chat-translate-clip", children: /* @__PURE__ */ jsx16("rect", { width: "88", height: "88", fill: "#fff", transform: "translate(10 9)" }) }) })
2926
+ /* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "ls-chat-translate-clip", children: /* @__PURE__ */ jsx17("rect", { width: "88", height: "88", fill: "#fff", transform: "translate(10 9)" }) }) })
2794
2927
  ] });
2795
2928
  var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2796
- /* @__PURE__ */ jsx16(
2929
+ /* @__PURE__ */ jsx17(
2797
2930
  "path",
2798
2931
  {
2799
2932
  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",
2800
2933
  fill: "currentColor"
2801
2934
  }
2802
2935
  ),
2803
- /* @__PURE__ */ jsx16(
2936
+ /* @__PURE__ */ jsx17(
2804
2937
  "path",
2805
2938
  {
2806
2939
  d: "M72.4414 77.9153C71.0064 79.9384 70.3336 82.4041 70.5422 84.8757C70.7508 87.3473 71.8274 89.6654 73.5814 91.4193C75.3353 93.1732 77.6533 94.2498 80.1249 94.4584C82.5965 94.6671 85.0622 93.9943 87.0853 92.5592L72.4414 77.9153ZM74.9159 75.4426L89.5598 90.0865C90.9949 88.0634 91.6677 85.5977 91.4591 83.126C91.2504 80.6544 90.1738 78.3364 88.4199 76.5825C86.666 74.8286 84.348 73.752 81.8764 73.5433C79.4047 73.3347 76.939 74.0075 74.9159 75.4426ZM71.101 93.9014C68.4752 91.2759 66.9999 87.7148 66.9998 84.0015C66.9996 80.2882 68.4745 76.727 71.1001 74.1012C73.7256 71.4754 77.2868 70.0002 81 70C84.7133 69.9998 88.2745 71.4748 90.9003 74.1003C93.5259 76.7259 95.0009 80.2869 95.0009 84C95.0009 87.7131 93.5259 91.2741 90.9003 93.8997C88.2748 96.5252 84.7137 98.0003 81.0006 98.0003C77.2875 98.0003 73.7265 96.5252 71.101 93.8997V93.9014Z",
@@ -2809,14 +2942,14 @@ var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16"
2809
2942
  )
2810
2943
  ] });
2811
2944
  var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2812
- /* @__PURE__ */ jsx16(
2945
+ /* @__PURE__ */ jsx17(
2813
2946
  "path",
2814
2947
  {
2815
2948
  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",
2816
2949
  fill: "currentColor"
2817
2950
  }
2818
2951
  ),
2819
- /* @__PURE__ */ jsx16(
2952
+ /* @__PURE__ */ jsx17(
2820
2953
  "path",
2821
2954
  {
2822
2955
  d: "M81.1936 70.3225C88.8545 70.3225 95.0646 76.5325 95.0646 84.1935C95.0646 91.8544 88.8545 98.0644 81.1936 98.0644C73.5327 98.0644 67.3226 91.8544 67.3226 84.1935C67.3226 76.5325 73.5327 70.3225 81.1936 70.3225ZM81.1936 75.8709C80.8257 75.8709 80.4729 76.017 80.2128 76.2772C79.9526 76.5373 79.8065 76.8901 79.8065 77.258V84.1935C79.8066 84.5613 79.9528 84.9141 80.2129 85.1742L84.3742 89.3354C84.6358 89.5881 84.9862 89.7279 85.3499 89.7248C85.7136 89.7216 86.0615 89.5757 86.3187 89.3185C86.5758 89.0614 86.7217 88.7135 86.7249 88.3498C86.728 87.9861 86.5882 87.6357 86.3356 87.3741L82.5807 83.6192V77.258C82.5807 76.8901 82.4346 76.5373 82.1744 76.2772C81.9143 76.017 81.5615 75.8709 81.1936 75.8709Z",
@@ -2825,21 +2958,21 @@ var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height:
2825
2958
  )
2826
2959
  ] });
2827
2960
  var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 3 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2828
- /* @__PURE__ */ jsx16(
2961
+ /* @__PURE__ */ jsx17(
2829
2962
  "path",
2830
2963
  {
2831
2964
  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",
2832
2965
  fill: "currentColor"
2833
2966
  }
2834
2967
  ),
2835
- /* @__PURE__ */ jsx16(
2968
+ /* @__PURE__ */ jsx17(
2836
2969
  "path",
2837
2970
  {
2838
2971
  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",
2839
2972
  fill: "currentColor"
2840
2973
  }
2841
2974
  ),
2842
- /* @__PURE__ */ jsx16(
2975
+ /* @__PURE__ */ jsx17(
2843
2976
  "path",
2844
2977
  {
2845
2978
  d: "M1.47273 15C1.90909 15 2.27273 15.1273 2.56364 15.3818C2.85455 15.6454 3 16.0363 3 16.5545C3 17.0727 2.85455 17.4636 2.56364 17.7272C2.27273 18 1.90909 18.1363 1.47273 18.1363C1.05455 18.1363 0.704544 18 0.422727 17.7272C0.140909 17.4636 -2.26494e-08 17.0727 0 16.5545C2.26515e-08 16.0363 0.140909 15.6454 0.422727 15.3818C0.704544 15.1273 1.05455 15 1.47273 15Z",
@@ -2847,7 +2980,7 @@ var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16
2847
2980
  }
2848
2981
  )
2849
2982
  ] });
2850
- var ShoutoutIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
2983
+ var ShoutoutIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
2851
2984
  "path",
2852
2985
  {
2853
2986
  fillRule: "evenodd",
@@ -2856,7 +2989,7 @@ var ShoutoutIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16
2856
2989
  fill: "currentColor"
2857
2990
  }
2858
2991
  ) });
2859
- var VipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
2992
+ var VipIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
2860
2993
  "path",
2861
2994
  {
2862
2995
  fillRule: "evenodd",
@@ -2865,14 +2998,14 @@ var VipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", vi
2865
2998
  fill: "currentColor"
2866
2999
  }
2867
3000
  ) });
2868
- var RemoveVipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
3001
+ var RemoveVipIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
2869
3002
  "path",
2870
3003
  {
2871
3004
  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",
2872
3005
  fill: "currentColor"
2873
3006
  }
2874
3007
  ) });
2875
- var ModeratorIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 20 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16(
3008
+ var ModeratorIcon = () => /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 20 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
2876
3009
  "path",
2877
3010
  {
2878
3011
  fillRule: "evenodd",
@@ -2883,7 +3016,7 @@ var ModeratorIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "1
2883
3016
  ) });
2884
3017
 
2885
3018
  // src/components/ChatMessageItem/ChatMessageItem.tsx
2886
- import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
3019
+ import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
2887
3020
  var DEFAULT_MOD_ACTION_LABELS = {
2888
3021
  delete: "Delete Message",
2889
3022
  copy: "Copy to clipboard",
@@ -2908,10 +3041,10 @@ function ModActionButton({
2908
3041
  onClick,
2909
3042
  children
2910
3043
  }) {
2911
- return /* @__PURE__ */ jsx17(Tooltip3, { title, placement, children: /* @__PURE__ */ jsx17(
3044
+ return /* @__PURE__ */ jsx18(Tooltip4, { title, placement, children: /* @__PURE__ */ jsx18(
2912
3045
  "span",
2913
3046
  {
2914
- className: classNames7("ls-chat-message__modbtn", { "ls-chat-message__modbtn--danger": danger }),
3047
+ className: classNames6("ls-chat-message__modbtn", { "ls-chat-message__modbtn--danger": danger }),
2915
3048
  onClick,
2916
3049
  children
2917
3050
  }
@@ -2955,7 +3088,7 @@ function ChatMessageItem({
2955
3088
  const [menuPosition, setMenuPosition] = useState6(null);
2956
3089
  const [menuAnchorEl, setMenuAnchorEl] = useState6(null);
2957
3090
  const name = displayname || username;
2958
- const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx17(PlatformIcon, { platform }) : null);
3091
+ const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx18(PlatformIcon, { platform }) : null);
2959
3092
  const has = (action) => Boolean(modActions?.includes(action));
2960
3093
  const label = (action) => modActionLabels?.[action] ?? DEFAULT_MOD_ACTION_LABELS[action];
2961
3094
  const vipAction = isVip ? "remove-vip" : "add-vip";
@@ -2990,34 +3123,34 @@ function ChatMessageItem({
2990
3123
  closeMenu();
2991
3124
  },
2992
3125
  children: [
2993
- /* @__PURE__ */ jsx17(ListItemIcon, { children: /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
2994
- /* @__PURE__ */ jsx17(ListItemText, { children: label(action) })
3126
+ /* @__PURE__ */ jsx18(ListItemIcon, { children: /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
3127
+ /* @__PURE__ */ jsx18(ListItemText, { children: label(action) })
2995
3128
  ]
2996
3129
  },
2997
3130
  action
2998
3131
  ) : null;
2999
3132
  const builtInActions = hasVisibleModActions && hovered && !actions ? /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__modbar", children: [
3000
- has("delete") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx17(DeleteIcon, {}) }),
3001
- has("pin") && /* @__PURE__ */ jsx17(
3133
+ has("delete") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx18(DeleteIcon, {}) }),
3134
+ has("pin") && /* @__PURE__ */ jsx18(
3002
3135
  ModActionButton,
3003
3136
  {
3004
3137
  title: label(isPinned ? "unpin" : "pin"),
3005
3138
  placement: modActionsTooltipPlacement,
3006
3139
  onClick: () => fire(isPinned ? "unpin" : "pin"),
3007
- children: isPinned ? /* @__PURE__ */ jsx17(PinOffIcon, {}) : /* @__PURE__ */ jsx17(PinOnIcon, {})
3140
+ children: isPinned ? /* @__PURE__ */ jsx18(PinOffIcon, {}) : /* @__PURE__ */ jsx18(PinOnIcon, {})
3008
3141
  }
3009
3142
  ),
3010
- has("copy") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx17(CopyIcon, {}) }),
3011
- has("translate") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx17(TranslateIcon, {}) }),
3012
- has("ban") && !isSelf && /* @__PURE__ */ jsx17(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx17(BanUserIcon, {}) }),
3013
- has("timeout") && /* @__PURE__ */ jsx17(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx17(TimeoutUserIcon, {}) }),
3014
- hasOverflowMenuItems && /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx17(MenuDotsIcon, {}) })
3143
+ has("copy") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx18(CopyIcon, {}) }),
3144
+ has("translate") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx18(TranslateIcon, {}) }),
3145
+ has("ban") && !isSelf && /* @__PURE__ */ jsx18(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx18(BanUserIcon, {}) }),
3146
+ has("timeout") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx18(TimeoutUserIcon, {}) }),
3147
+ hasOverflowMenuItems && /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx18(MenuDotsIcon, {}) })
3015
3148
  ] }) : null;
3016
3149
  const actionsNode = actions ?? builtInActions;
3017
3150
  return /* @__PURE__ */ jsxs8(
3018
3151
  "div",
3019
3152
  {
3020
- className: classNames7("ls-chat-message", className),
3153
+ className: classNames6("ls-chat-message", className),
3021
3154
  title,
3022
3155
  onClick: () => {
3023
3156
  closeMenu();
@@ -3033,12 +3166,12 @@ function ChatMessageItem({
3033
3166
  onMouseLeave?.();
3034
3167
  },
3035
3168
  children: [
3036
- reply ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__reply", children: reply }) : null,
3037
- showAvatar && avatarPrefix ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
3038
- showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx17("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
3039
- siteIcon ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
3040
- showTimestamp && timestamp ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__time", children: timestamp }) : null,
3041
- showBadges && badges ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__badges", children: badges }) : null,
3169
+ reply ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__reply", children: reply }) : null,
3170
+ showAvatar && avatarPrefix ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
3171
+ showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx18("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
3172
+ siteIcon ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
3173
+ showTimestamp && timestamp ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__time", children: timestamp }) : null,
3174
+ showBadges && badges ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__badges", children: badges }) : null,
3042
3175
  onUsernameClick ? /* @__PURE__ */ jsxs8(
3043
3176
  "button",
3044
3177
  {
@@ -3059,8 +3192,8 @@ function ChatMessageItem({
3059
3192
  ":"
3060
3193
  ] }),
3061
3194
  " ",
3062
- /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__text", children: message }),
3063
- actionsNode ? /* @__PURE__ */ jsx17("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
3195
+ /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__text", children: message }),
3196
+ actionsNode ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
3064
3197
  onModAction && hasOverflowMenuItems ? /* @__PURE__ */ jsxs8(
3065
3198
  Menu,
3066
3199
  {
@@ -3072,10 +3205,10 @@ function ChatMessageItem({
3072
3205
  anchorOrigin: modMenuAnchor === "element" ? { vertical: "bottom", horizontal: "right" } : void 0,
3073
3206
  transformOrigin: modMenuAnchor === "element" ? { vertical: "top", horizontal: "right" } : void 0,
3074
3207
  children: [
3075
- menuItem("shoutout", /* @__PURE__ */ jsx17(ShoutoutIcon, {})),
3076
- menuItem(vipAction, isVip ? /* @__PURE__ */ jsx17(RemoveVipIcon, {}) : /* @__PURE__ */ jsx17(VipIcon, {})),
3077
- menuItem(moderatorAction, /* @__PURE__ */ jsx17(ModeratorIcon, {})),
3078
- menuItem("unban", /* @__PURE__ */ jsx17(BanUserIcon, {}))
3208
+ menuItem("shoutout", /* @__PURE__ */ jsx18(ShoutoutIcon, {})),
3209
+ menuItem(vipAction, isVip ? /* @__PURE__ */ jsx18(RemoveVipIcon, {}) : /* @__PURE__ */ jsx18(VipIcon, {})),
3210
+ menuItem(moderatorAction, /* @__PURE__ */ jsx18(ModeratorIcon, {})),
3211
+ menuItem("unban", /* @__PURE__ */ jsx18(BanUserIcon, {}))
3079
3212
  ]
3080
3213
  }
3081
3214
  ) : null
@@ -3088,7 +3221,7 @@ ChatMessageItem.displayName = "ChatMessageItem";
3088
3221
  // src/components/ChatboxPanel/ChatboxPanel.tsx
3089
3222
  import { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
3090
3223
  import MenuItem3 from "@mui/material/MenuItem";
3091
- import classNames8 from "classnames";
3224
+ import classNames7 from "classnames";
3092
3225
 
3093
3226
  // src/components/ChatboxPanel/useAutoScroll.ts
3094
3227
  import { useCallback as useCallback3, useRef as useRef5, useState as useState7 } from "react";
@@ -3131,7 +3264,7 @@ var useAutoScroll = (threshold = 24, options) => {
3131
3264
  };
3132
3265
 
3133
3266
  // src/components/ChatboxPanel/ChatboxPanel.tsx
3134
- import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
3267
+ import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
3135
3268
  function ChatboxPanel({
3136
3269
  children,
3137
3270
  messageCount,
@@ -3224,9 +3357,9 @@ function ChatboxPanel({
3224
3357
  setInternalValue("");
3225
3358
  }
3226
3359
  };
3227
- return /* @__PURE__ */ jsxs9("div", { className: classNames8("ls-chatbox", className), id, children: [
3360
+ return /* @__PURE__ */ jsxs9("div", { className: classNames7("ls-chatbox", className), id, children: [
3228
3361
  /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__viewport", children: [
3229
- /* @__PURE__ */ jsx18(
3362
+ /* @__PURE__ */ jsx19(
3230
3363
  "div",
3231
3364
  {
3232
3365
  className: "ls-chatbox__list",
@@ -3254,7 +3387,7 @@ function ChatboxPanel({
3254
3387
  /* @__PURE__ */ jsxs9(
3255
3388
  "svg",
3256
3389
  {
3257
- className: classNames8("ls-chatbox__jump-arrow", { "ls-chatbox__jump-arrow--up": reverse }),
3390
+ className: classNames7("ls-chatbox__jump-arrow", { "ls-chatbox__jump-arrow--up": reverse }),
3258
3391
  width: "14",
3259
3392
  height: "14",
3260
3393
  viewBox: "0 0 24 24",
@@ -3264,19 +3397,19 @@ function ChatboxPanel({
3264
3397
  strokeLinecap: "round",
3265
3398
  strokeLinejoin: "round",
3266
3399
  children: [
3267
- /* @__PURE__ */ jsx18("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
3268
- /* @__PURE__ */ jsx18("polyline", { points: "19 12 12 19 5 12" })
3400
+ /* @__PURE__ */ jsx19("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
3401
+ /* @__PURE__ */ jsx19("polyline", { points: "19 12 12 19 5 12" })
3269
3402
  ]
3270
3403
  }
3271
3404
  ),
3272
3405
  jumpToLatestLabel,
3273
- unreadCount > 0 && /* @__PURE__ */ jsx18("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
3406
+ unreadCount > 0 && /* @__PURE__ */ jsx19("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
3274
3407
  ]
3275
3408
  }
3276
3409
  )
3277
3410
  ] }),
3278
3411
  showSendBar && onSend ? /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__sendbar", children: [
3279
- /* @__PURE__ */ jsx18(
3412
+ /* @__PURE__ */ jsx19(
3280
3413
  LSInput,
3281
3414
  {
3282
3415
  className: "ls-chatbox__input",
@@ -3298,9 +3431,9 @@ function ChatboxPanel({
3298
3431
  displayEmpty: true,
3299
3432
  onChange: (e) => onPlatformChange?.(String(e.target.value)),
3300
3433
  children: [
3301
- allPlatformsLabel != null && /* @__PURE__ */ jsx18(MenuItem3, { value: "", children: allPlatformsLabel }),
3302
- platforms?.map((option) => /* @__PURE__ */ jsx18(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs9("span", { className: "ls-chatbox__platform-option", children: [
3303
- /* @__PURE__ */ jsx18(PlatformIcon, { platform: option.value, fallback: false }),
3434
+ allPlatformsLabel != null && /* @__PURE__ */ jsx19(MenuItem3, { value: "", children: allPlatformsLabel }),
3435
+ platforms?.map((option) => /* @__PURE__ */ jsx19(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs9("span", { className: "ls-chatbox__platform-option", children: [
3436
+ /* @__PURE__ */ jsx19(PlatformIcon, { platform: option.value, fallback: false }),
3304
3437
  option.label
3305
3438
  ] }) }, option.value))
3306
3439
  ]
@@ -3314,12 +3447,12 @@ function ChatboxPanel({
3314
3447
  value: chatAs ?? "self",
3315
3448
  onChange: (e) => onChatAsChange(e.target.value === "bot" ? "bot" : "self"),
3316
3449
  children: [
3317
- /* @__PURE__ */ jsx18(MenuItem3, { value: "self", children: chatAsSelfLabel }),
3318
- /* @__PURE__ */ jsx18(MenuItem3, { value: "bot", children: chatAsBotLabel })
3450
+ /* @__PURE__ */ jsx19(MenuItem3, { value: "self", children: chatAsSelfLabel }),
3451
+ /* @__PURE__ */ jsx19(MenuItem3, { value: "bot", children: chatAsBotLabel })
3319
3452
  ]
3320
3453
  }
3321
3454
  ) : null,
3322
- /* @__PURE__ */ jsx18(
3455
+ /* @__PURE__ */ jsx19(
3323
3456
  LSButton,
3324
3457
  {
3325
3458
  className: "ls-chatbox__send",
@@ -3337,8 +3470,8 @@ ChatboxPanel.displayName = "ChatboxPanel";
3337
3470
  // src/components/ModalChrome/DialogChrome.tsx
3338
3471
  import Fade from "@mui/material/Fade";
3339
3472
  import Modal from "@mui/material/Modal";
3340
- import classNames9 from "classnames";
3341
- import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
3473
+ import classNames8 from "classnames";
3474
+ import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
3342
3475
  var DIMENSIONS = {
3343
3476
  small: { width: "30%", height: "30%" },
3344
3477
  longS: { width: "50%", height: "30%" },
@@ -3350,14 +3483,14 @@ var DIMENSIONS = {
3350
3483
  full: { width: "100%", height: "calc(100% - 1rem)" }
3351
3484
  };
3352
3485
  var DefaultCloseIcon = () => /* @__PURE__ */ jsxs10("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [
3353
- /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
3354
- /* @__PURE__ */ jsx19("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
3355
- /* @__PURE__ */ jsx19("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
3486
+ /* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "10" }),
3487
+ /* @__PURE__ */ jsx20("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
3488
+ /* @__PURE__ */ jsx20("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
3356
3489
  ] });
3357
3490
  var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3358
3491
  const modalBackground = overlayProps?.background ? overlayProps.background : !overlayProps?.noBackground ? "var(--gradientBg, var(--background, #151230))" : void 0;
3359
3492
  const dimensions = overlayProps?.size && DIMENSIONS[overlayProps.size] || { width: "90%", height: "90%" };
3360
- return /* @__PURE__ */ jsx19(
3493
+ return /* @__PURE__ */ jsx20(
3361
3494
  Modal,
3362
3495
  {
3363
3496
  disableEnforceFocus: true,
@@ -3368,10 +3501,10 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3368
3501
  },
3369
3502
  className: "ls-dialog",
3370
3503
  style: { ...props.style, zIndex: `${props.zIndex ? props.zIndex : "2500"} !important` },
3371
- children: /* @__PURE__ */ jsx19(Fade, { in: props.open, children: /* @__PURE__ */ jsxs10(
3504
+ children: /* @__PURE__ */ jsx20(Fade, { in: props.open, children: /* @__PURE__ */ jsxs10(
3372
3505
  "div",
3373
3506
  {
3374
- className: classNames9("ls-dialog__card", {
3507
+ className: classNames8("ls-dialog__card", {
3375
3508
  "ls-dialog__card--pad": !overlayProps?.noOuterPadding,
3376
3509
  "ls-dialog__card--full": overlayProps?.size === "full"
3377
3510
  }),
@@ -3386,29 +3519,29 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3386
3519
  !props.$hideTop && /* @__PURE__ */ jsxs10(
3387
3520
  "div",
3388
3521
  {
3389
- className: classNames9("ls-dialog__top", { "ls-dialog__top--full": overlayProps?.size === "full" }),
3522
+ className: classNames8("ls-dialog__top", { "ls-dialog__top--full": overlayProps?.size === "full" }),
3390
3523
  style: { padding: props.$noPadTitle ? "0" : "1rem" },
3391
3524
  children: [
3392
- /* @__PURE__ */ jsx19("div", { className: "ls-dialog__top-side", children: props.$leftText }),
3393
- /* @__PURE__ */ jsx19("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
3394
- props.hideClose ? /* @__PURE__ */ jsx19("div", { className: "ls-dialog__top-side" }) : /* @__PURE__ */ jsx19("div", { className: "ls-dialog__close", children: /* @__PURE__ */ jsxs10("span", { onClick: props.close, className: "ls-dialog__close-btn", children: [
3395
- /* @__PURE__ */ jsx19("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
3396
- closeIcon ?? /* @__PURE__ */ jsx19(DefaultCloseIcon, {})
3525
+ /* @__PURE__ */ jsx20("div", { className: "ls-dialog__top-side", children: props.$leftText }),
3526
+ /* @__PURE__ */ jsx20("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
3527
+ props.hideClose ? /* @__PURE__ */ jsx20("div", { className: "ls-dialog__top-side" }) : /* @__PURE__ */ jsx20("div", { className: "ls-dialog__close", children: /* @__PURE__ */ jsxs10("span", { onClick: props.close, className: "ls-dialog__close-btn", children: [
3528
+ /* @__PURE__ */ jsx20("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
3529
+ closeIcon ?? /* @__PURE__ */ jsx20(DefaultCloseIcon, {})
3397
3530
  ] }) })
3398
3531
  ]
3399
3532
  }
3400
3533
  ),
3401
- /* @__PURE__ */ jsx19(
3534
+ /* @__PURE__ */ jsx20(
3402
3535
  "div",
3403
3536
  {
3404
- className: classNames9("ls-dialog__body", props.containerClass),
3537
+ className: classNames8("ls-dialog__body", props.containerClass),
3405
3538
  style: { backgroundImage: props.backgroundImage ? `url(${props.backgroundImage})` : "", padding: props.noPadding ? 0 : "20px 0" },
3406
3539
  children
3407
3540
  }
3408
3541
  ),
3409
3542
  !props.$hideBottom && /* @__PURE__ */ jsxs10("div", { className: "ls-dialog__bottom", children: [
3410
- /* @__PURE__ */ jsx19(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
3411
- props.showTest && /* @__PURE__ */ jsx19(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
3543
+ /* @__PURE__ */ jsx20(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
3544
+ props.showTest && /* @__PURE__ */ jsx20(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
3412
3545
  ] })
3413
3546
  ]
3414
3547
  }
@@ -3419,11 +3552,11 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
3419
3552
  DialogChrome.displayName = "DialogChrome";
3420
3553
 
3421
3554
  // src/components/ModalChrome/ModalChrome.tsx
3422
- import classNames11 from "classnames";
3555
+ import classNames10 from "classnames";
3423
3556
 
3424
3557
  // src/components/ModalChrome/PanelChrome.tsx
3425
- import classNames10 from "classnames";
3426
- import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
3558
+ import classNames9 from "classnames";
3559
+ import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
3427
3560
  function PanelChrome({
3428
3561
  title,
3429
3562
  titleVariant = "heading",
@@ -3440,20 +3573,20 @@ function PanelChrome({
3440
3573
  }) {
3441
3574
  const hasHeader = Boolean(title || headerActions || onClose && showClose);
3442
3575
  const mergedStyle = padding ? { ...style, ["--ls-panel-padding"]: padding } : style;
3443
- const panel = /* @__PURE__ */ jsxs11("div", { className: classNames10("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
3576
+ const panel = /* @__PURE__ */ jsxs11("div", { className: classNames9("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
3444
3577
  hasHeader ? /* @__PURE__ */ jsxs11("div", { className: "ls-panel__header", children: [
3445
- title ? /* @__PURE__ */ jsx20("span", { className: classNames10("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx20("span", {}),
3578
+ title ? /* @__PURE__ */ jsx21("span", { className: classNames9("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx21("span", {}),
3446
3579
  /* @__PURE__ */ jsxs11("span", { className: "ls-panel__header-actions", children: [
3447
3580
  headerActions,
3448
- onClose && showClose ? /* @__PURE__ */ jsx20("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
3581
+ onClose && showClose ? /* @__PURE__ */ jsx21("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
3449
3582
  ] })
3450
3583
  ] }) : null,
3451
- /* @__PURE__ */ jsx20("div", { className: classNames10("ls-panel__body", bodyClassName), children }),
3452
- footer ? /* @__PURE__ */ jsx20("div", { className: "ls-panel__footer", children: footer }) : null
3584
+ /* @__PURE__ */ jsx21("div", { className: classNames9("ls-panel__body", bodyClassName), children }),
3585
+ footer ? /* @__PURE__ */ jsx21("div", { className: "ls-panel__footer", children: footer }) : null
3453
3586
  ] });
3454
3587
  if (onClickAway) {
3455
3588
  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
3456
- /* @__PURE__ */ jsx20("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
3589
+ /* @__PURE__ */ jsx21("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
3457
3590
  panel
3458
3591
  ] });
3459
3592
  }
@@ -3462,7 +3595,7 @@ function PanelChrome({
3462
3595
  PanelChrome.displayName = "PanelChrome";
3463
3596
 
3464
3597
  // src/components/ModalChrome/ModalChrome.tsx
3465
- import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
3598
+ import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
3466
3599
  function ModalChrome({
3467
3600
  open = true,
3468
3601
  onClose,
@@ -3487,12 +3620,12 @@ function ModalChrome({
3487
3620
  return null;
3488
3621
  }
3489
3622
  const mergedCardStyle = maxWidth ? { ...cardStyle, ["--ls-modal-max-width"]: maxWidth } : cardStyle;
3490
- return /* @__PURE__ */ jsxs12("div", { className: classNames11("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
3491
- /* @__PURE__ */ jsx21("div", { className: classNames11("ls-modal__backdrop", backdropClassName), onClick: onClose }),
3492
- /* @__PURE__ */ jsx21(
3623
+ return /* @__PURE__ */ jsxs12("div", { className: classNames10("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
3624
+ /* @__PURE__ */ jsx22("div", { className: classNames10("ls-modal__backdrop", backdropClassName), onClick: onClose }),
3625
+ /* @__PURE__ */ jsx22(
3493
3626
  PanelChrome,
3494
3627
  {
3495
- className: classNames11(
3628
+ className: classNames10(
3496
3629
  "ls-modal__card",
3497
3630
  { "ls-modal__card--fit": fitContent, "ls-modal__card--center": centerContent },
3498
3631
  cardClassName
@@ -3514,32 +3647,32 @@ function ModalChrome({
3514
3647
  ModalChrome.displayName = "ModalChrome";
3515
3648
 
3516
3649
  // src/components/WidgetChrome/WidgetChrome.tsx
3517
- import classNames12 from "classnames";
3518
- import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
3650
+ import classNames11 from "classnames";
3651
+ import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
3519
3652
  function WidgetChromeButton({ active, buttonRef, className, children, ...rest }) {
3520
- return /* @__PURE__ */ jsx22("button", { ref: buttonRef, type: "button", className: classNames12("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
3653
+ return /* @__PURE__ */ jsx23("button", { ref: buttonRef, type: "button", className: classNames11("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
3521
3654
  }
3522
3655
  WidgetChromeButton.displayName = "WidgetChromeButton";
3523
3656
  function WidgetChrome({ title, leftActions, rightActions, headerExtra, showHeader = true, className, headerClassName, bodyClassName, style, id, children }) {
3524
- return /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget", className), style, id, children: [
3525
- showHeader ? /* @__PURE__ */ jsxs13("div", { className: classNames12("ls-widget__header", headerClassName), children: [
3526
- /* @__PURE__ */ jsx22("div", { className: "ls-widget__side", children: leftActions }),
3527
- /* @__PURE__ */ jsx22("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx22("span", { children: title }) }),
3528
- /* @__PURE__ */ jsx22("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
3657
+ return /* @__PURE__ */ jsxs13("div", { className: classNames11("ls-widget", className), style, id, children: [
3658
+ showHeader ? /* @__PURE__ */ jsxs13("div", { className: classNames11("ls-widget__header", headerClassName), children: [
3659
+ /* @__PURE__ */ jsx23("div", { className: "ls-widget__side", children: leftActions }),
3660
+ /* @__PURE__ */ jsx23("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx23("span", { children: title }) }),
3661
+ /* @__PURE__ */ jsx23("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
3529
3662
  headerExtra
3530
3663
  ] }) : null,
3531
- /* @__PURE__ */ jsx22("div", { className: classNames12("ls-widget__body", bodyClassName), children })
3664
+ /* @__PURE__ */ jsx23("div", { className: classNames11("ls-widget__body", bodyClassName), children })
3532
3665
  ] });
3533
3666
  }
3534
3667
  WidgetChrome.displayName = "WidgetChrome";
3535
3668
 
3536
3669
  // src/components/EventListItem/EventListItem.tsx
3537
- import classNames13 from "classnames";
3670
+ import classNames12 from "classnames";
3538
3671
 
3539
3672
  // src/components/EventList/EventTypeIcon.tsx
3540
- import { jsx as jsx23 } from "react/jsx-runtime";
3673
+ import { jsx as jsx24 } from "react/jsx-runtime";
3541
3674
  var createEventIcon = (def) => {
3542
- const Icon = (props) => /* @__PURE__ */ jsx23("svg", { width: def.width, height: def.height, viewBox: def.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: def.paths.map((path, index) => /* @__PURE__ */ jsx23("path", { fill: "currentColor", ...path }, index)) });
3675
+ const Icon = (props) => /* @__PURE__ */ jsx24("svg", { width: def.width, height: def.height, viewBox: def.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: def.paths.map((path, index) => /* @__PURE__ */ jsx24("path", { fill: "currentColor", ...path }, index)) });
3543
3676
  return Icon;
3544
3677
  };
3545
3678
  var EVENT_TYPE_FALLBACK_ICON = createEventIcon({ width: "77", height: "77", viewBox: "0 0 77 77", paths: [{ d: "M32.0348 67.8488C32.2317 68.9076 33.1257 69.6727 34.166 69.6727H41.7175C42.9162 69.6727 43.8879 68.6655 43.8879 67.4232C43.8879 66.1808 42.9162 65.1736 41.7175 65.1736H35.9581L35.8144 64.4007H43.1152C44.2884 64.4007 45.2493 63.4344 45.2847 62.219C45.5196 54.1506 48.6247 48.8606 51.9394 43.5096C52.0669 43.3038 52.1949 43.0976 52.3233 42.8909C55.5088 37.7611 58.9 32.3001 58.9 24.5131C58.9 17.6282 56.2649 12.4215 52.2565 8.9757C48.3033 5.57735 43.149 4 38.1777 4C28.6499 4 18 11.1793 18 24.739C18 31.851 21.089 38.0439 24.0565 43.3454C24.5114 44.1581 24.9596 44.943 25.3964 45.7078C26.4256 47.5099 27.3909 49.2003 28.229 50.8789C29.4122 53.2488 30.2139 55.3578 30.4727 57.3163C30.6216 58.4425 31.5576 59.2766 32.6541 59.2603C33.7507 59.244 34.6633 58.3825 34.7809 57.2524C34.9706 55.4309 35.9174 53.2643 37.4928 50.7048C38.8347 48.5248 40.4985 46.2646 42.2571 43.8756C42.5436 43.4864 42.8327 43.0937 43.1233 42.6975C45.1598 39.9201 47.2572 36.9825 48.8406 34.0308C50.417 31.0923 51.6027 27.9286 51.6027 24.7014C51.6027 20.79 50.1716 17.467 47.6813 15.1412C45.2141 12.8368 41.8546 11.6443 38.1777 11.6443C30.9242 11.6443 25.2973 17.6891 25.2973 24.7014C25.2973 26.7539 25.6936 29.8348 26.7508 32.4851C27.7593 35.0129 29.7798 38.0597 33.4218 38.0597C35.1995 38.0597 36.6557 37.3883 37.738 36.2561C38.7611 35.1859 39.3371 33.826 39.6795 32.5814C40.3187 30.2583 40.3144 27.6507 40.3121 26.2771C40.312 26.1997 40.3118 26.1263 40.3118 26.057C40.3118 24.8147 39.3401 23.8075 38.1414 23.8075C36.9427 23.8075 35.971 24.8147 35.971 26.057L35.971 26.1579C35.9713 27.6034 35.9717 29.6519 35.5051 31.3476C35.2712 32.1976 34.969 32.7605 34.6545 33.0895C34.3992 33.3566 34.0583 33.5607 33.4218 33.5607C32.5619 33.5607 31.6054 32.8794 30.7623 30.766C29.968 28.7751 29.6382 26.3016 29.6382 24.7014C29.6382 20.1907 33.3053 16.1434 38.1777 16.1434C40.9631 16.1434 43.231 17.0409 44.7754 18.4834C46.2969 19.9044 47.2619 21.9851 47.2619 24.7014C47.2619 26.8215 46.469 29.1934 45.0468 31.8445C43.6316 34.4825 41.7105 37.1887 39.6673 39.9752C39.3877 40.3564 39.1055 40.7396 38.8222 41.1243C37.0726 43.5001 35.2818 45.9317 33.8333 48.2851C33.4508 48.9065 33.0824 49.5373 32.7382 50.1753C32.5285 49.7174 32.3096 49.2626 32.0842 48.8112C31.1862 47.0126 30.1213 45.1476 29.064 43.2961C28.6415 42.5561 28.2201 41.8183 27.8112 41.0877C24.861 35.817 22.3408 30.5434 22.3408 24.739C22.3408 14.1984 30.497 8.49902 38.1777 8.49902C42.3191 8.49902 46.4406 9.82125 49.4853 12.4386C52.4747 15.0085 54.5592 18.9335 54.5592 24.5131C54.5592 30.9585 51.7975 35.4143 48.5022 40.7311C48.4306 40.8466 48.3587 40.9625 48.2866 41.0789C45.1891 46.0794 41.8063 51.7178 41.0743 59.9017H33.1858C32.5382 59.9017 31.9245 60.2014 31.5122 60.7189C31.0998 61.2365 30.932 61.9178 31.0546 62.5769L32.0348 67.8488Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M41.1547 70.6428C41.1547 72.7023 39.6065 73.2035 37.6967 73.2035C35.7868 73.2035 34.2386 72.7023 34.2386 70.6428H41.1547Z" }, { d: "M45.3289 28.7231C45.4774 28.3343 45.2937 27.8944 44.9186 27.7405L42.3201 26.6745C41.945 26.5206 41.5206 26.7111 41.3721 27.0998C41.2237 27.4886 41.4074 27.9285 41.7825 28.0823L44.381 29.1484C44.7561 29.3022 45.1805 29.1118 45.3289 28.7231Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M31.4505 29.2716C31.6184 29.6518 32.0518 29.819 32.4186 29.6451L34.96 28.44C35.3268 28.2661 35.4881 27.8169 35.3203 27.4367C35.1525 27.0565 34.7191 26.8893 34.3522 27.0632L31.8109 28.2682C31.444 28.4422 31.2827 28.8914 31.4505 29.2716Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M35.3 24.9243C35.4287 24.528 35.223 24.0987 34.8407 23.9653L32.1921 23.0417C31.8098 22.9084 31.3955 23.1215 31.2669 23.5178C31.1382 23.9141 31.3439 24.3434 31.7262 24.4768L34.3748 25.4004C34.7571 25.5337 35.1714 25.3206 35.3 24.9243Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M36.7911 23.1649C37.1695 23.0199 37.3629 22.5845 37.223 22.1923L36.2535 19.474C36.1137 19.0818 35.6936 18.8814 35.3152 19.0263C34.9368 19.1713 34.7434 19.6067 34.8833 19.9989L35.8528 22.7173C35.9926 23.1094 36.4127 23.3098 36.7911 23.1649Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M39.5322 23.0163C39.911 23.1602 40.3305 22.9585 40.4693 22.5659L41.4314 19.8448C41.5702 19.4522 41.3757 19.0173 40.9969 18.8735C40.6181 18.7296 40.1986 18.9313 40.0598 19.3238L39.0977 22.045C38.9589 22.4376 39.1534 22.8724 39.5322 23.0163Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M41.3214 24.7192C41.4951 25.0965 41.9311 25.2564 42.2952 25.0763L44.8173 23.8284C45.1813 23.6483 45.3356 23.1964 45.1618 22.8191C44.988 22.4418 44.552 22.2819 44.1879 22.4621L41.6659 23.7099C41.3018 23.89 41.1476 24.3419 41.3214 24.7192Z", fillRule: "evenodd", clipRule: "evenodd" }] });
@@ -3567,12 +3700,12 @@ var EVENT_TYPE_ICONS = {
3567
3700
  };
3568
3701
  function EventTypeIcon({ type, ...props }) {
3569
3702
  const Icon = (type != null ? EVENT_TYPE_ICONS[String(type).trim().toLowerCase()] : void 0) ?? EVENT_TYPE_FALLBACK_ICON;
3570
- return /* @__PURE__ */ jsx23(Icon, { ...props });
3703
+ return /* @__PURE__ */ jsx24(Icon, { ...props });
3571
3704
  }
3572
3705
  EventTypeIcon.displayName = "EventTypeIcon";
3573
3706
 
3574
3707
  // src/components/EventListItem/EventListItem.tsx
3575
- import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
3708
+ import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
3576
3709
  function EventListItem({
3577
3710
  username,
3578
3711
  message,
@@ -3593,7 +3726,7 @@ function EventListItem({
3593
3726
  onUsernameClick,
3594
3727
  className
3595
3728
  }) {
3596
- const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx24(EventTypeIcon, { type: eventType }) : null);
3729
+ const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx25(EventTypeIcon, { type: eventType }) : null);
3597
3730
  const style = {};
3598
3731
  if (accentColor) {
3599
3732
  style.borderLeftColor = accentColor;
@@ -3601,13 +3734,13 @@ function EventListItem({
3601
3734
  if (colorFullBackground && accentColor) {
3602
3735
  style.backgroundColor = `color-mix(in srgb, ${accentColor} 22%, var(--cardbackground, var(--neutralDark2, #211d3e)))`;
3603
3736
  }
3604
- return /* @__PURE__ */ jsxs14("div", { className: classNames13("ls-eventlist-item", className), style, children: [
3737
+ return /* @__PURE__ */ jsxs14("div", { className: classNames12("ls-eventlist-item", className), style, children: [
3605
3738
  /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__main", children: [
3606
3739
  /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__identity", children: [
3607
- /* @__PURE__ */ jsx24(
3740
+ /* @__PURE__ */ jsx25(
3608
3741
  "span",
3609
3742
  {
3610
- className: classNames13("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
3743
+ className: classNames12("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
3611
3744
  role: onUsernameClick ? "button" : void 0,
3612
3745
  tabIndex: onUsernameClick ? 0 : void 0,
3613
3746
  onClick: onUsernameClick,
@@ -3620,9 +3753,9 @@ function EventListItem({
3620
3753
  children: username
3621
3754
  }
3622
3755
  ),
3623
- platformIcon ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
3624
- showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx24("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
3625
- resolvedAlertIcon ? /* @__PURE__ */ jsx24(
3756
+ platformIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
3757
+ showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx25("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
3758
+ resolvedAlertIcon ? /* @__PURE__ */ jsx25(
3626
3759
  "span",
3627
3760
  {
3628
3761
  className: "ls-eventlist-item__icon",
@@ -3630,27 +3763,27 @@ function EventListItem({
3630
3763
  children: resolvedAlertIcon
3631
3764
  }
3632
3765
  ) : null,
3633
- amountBadge != null ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__amount", style: accentColor ? { color: accentColor } : void 0, children: amountBadge }) : null
3766
+ amountBadge != null ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__amount", style: accentColor ? { color: accentColor } : void 0, children: amountBadge }) : null
3634
3767
  ] }),
3635
3768
  /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__body", children: [
3636
- message ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__message", children: message }) : null,
3769
+ message ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__message", children: message }) : null,
3637
3770
  showMessage && userMessage ? /* @__PURE__ */ jsxs14("span", { className: "ls-eventlist-item__usermessage", children: [
3638
3771
  "\u201C",
3639
3772
  userMessage,
3640
3773
  "\u201D"
3641
3774
  ] }) : null
3642
3775
  ] }),
3643
- showTimestamp && timestamp ? /* @__PURE__ */ jsx24("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
3776
+ showTimestamp && timestamp ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
3644
3777
  ] }),
3645
- actions ? /* @__PURE__ */ jsx24("div", { className: "ls-eventlist-item__actions", children: actions }) : null
3778
+ actions ? /* @__PURE__ */ jsx25("div", { className: "ls-eventlist-item__actions", children: actions }) : null
3646
3779
  ] });
3647
3780
  }
3648
3781
  EventListItem.displayName = "EventListItem";
3649
3782
 
3650
3783
  // src/components/EventList/EventList.tsx
3651
3784
  import { useEffect as useEffect7, useRef as useRef7 } from "react";
3652
- import classNames14 from "classnames";
3653
- import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
3785
+ import classNames13 from "classnames";
3786
+ import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
3654
3787
  var PIN_THRESHOLD = 24;
3655
3788
  function EventList({
3656
3789
  items,
@@ -3694,17 +3827,17 @@ function EventList({
3694
3827
  onEndReached();
3695
3828
  }
3696
3829
  };
3697
- return /* @__PURE__ */ jsx25("div", { className: classNames14("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
3698
- emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
3699
- /* @__PURE__ */ jsx25("span", { children: emptyText })
3700
- ] }) : /* @__PURE__ */ jsx25(
3830
+ return /* @__PURE__ */ jsx26("div", { className: classNames13("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames13("ls-eventlist__empty", emptyClassName), children: [
3831
+ emptyIcon ? /* @__PURE__ */ jsx26("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
3832
+ /* @__PURE__ */ jsx26("span", { children: emptyText })
3833
+ ] }) : /* @__PURE__ */ jsx26(
3701
3834
  "div",
3702
3835
  {
3703
3836
  className: "ls-eventlist__list",
3704
3837
  ref: listRef,
3705
3838
  onScroll: handleScroll,
3706
3839
  style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
3707
- children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
3840
+ children: items.map((item) => /* @__PURE__ */ jsx26("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx26(
3708
3841
  EventListItem,
3709
3842
  {
3710
3843
  username: item.username,
@@ -3713,7 +3846,7 @@ function EventList({
3713
3846
  avatar: item.avatar,
3714
3847
  fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
3715
3848
  timestamp: item.timestamp,
3716
- platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
3849
+ platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx26(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
3717
3850
  alertIcon: item.alertIcon,
3718
3851
  amountBadge: item.amountBadge,
3719
3852
  eventType: item.eventType,
@@ -3732,9 +3865,9 @@ function EventList({
3732
3865
  EventList.displayName = "EventList";
3733
3866
 
3734
3867
  // src/components/StreamStatusPanel/StreamStatusPanel.tsx
3735
- import Tooltip4 from "@mui/material/Tooltip";
3736
- import classNames15 from "classnames";
3737
- import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
3868
+ import Tooltip5 from "@mui/material/Tooltip";
3869
+ import classNames14 from "classnames";
3870
+ import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
3738
3871
  var LS_INFO_TOOLTIP_SX = {
3739
3872
  backgroundColor: "#1b1834",
3740
3873
  border: "1px solid #393853",
@@ -3747,8 +3880,8 @@ var LS_INFO_TOOLTIP_SX = {
3747
3880
  boxShadow: "0 10px 30px rgba(0, 0, 0, 0.45)"
3748
3881
  };
3749
3882
  var formatStatValue = (value) => value >= 1e3 ? `${value.toString().slice(0, -3)} K` : value.toString();
3750
- 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" }) });
3751
- 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" }) });
3883
+ var TrendUpArrow = () => /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx27("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.50059 8C3.36798 8 3.2408 7.94732 3.14704 7.85355C3.05327 7.75978 3.00059 7.63261 3.00059 7.5L3.00059 1.707L0.854589 3.854C0.808102 3.90049 0.752912 3.93736 0.692173 3.96252C0.631433 3.98768 0.566333 4.00063 0.500589 4.00063C0.434845 4.00063 0.369745 3.98768 0.309006 3.96252C0.248266 3.93736 0.193077 3.90049 0.146589 3.854C0.100101 3.80751 0.0632247 3.75232 0.0380658 3.69158C0.0129069 3.63084 -4.20509e-05 3.56574 -4.20451e-05 3.5C-4.20394e-05 3.43426 0.012907 3.36916 0.0380658 3.30842C0.0632247 3.24768 0.100101 3.19249 0.146589 3.146L3.14659 0.146C3.19304 0.0994364 3.24821 0.0624939 3.30896 0.0372874C3.3697 0.0120808 3.43482 -0.000893905 3.50059 -0.000893899C3.56636 -0.000893893 3.63148 0.0120809 3.69222 0.0372874C3.75297 0.062494 3.80814 0.0994365 3.85459 0.146L6.85459 3.146C6.90108 3.19249 6.93795 3.24768 6.96311 3.30842C6.98827 3.36916 7.00122 3.43426 7.00122 3.5C7.00122 3.56574 6.98827 3.63084 6.96311 3.69158C6.93795 3.75232 6.90108 3.80751 6.85459 3.854C6.7607 3.94789 6.63336 4.00063 6.50059 4.00063C6.43485 4.00063 6.36975 3.98768 6.30901 3.96252C6.24827 3.93736 6.19308 3.90049 6.14659 3.854L4.00059 1.707L4.00059 7.5C4.00059 7.63261 3.94791 7.75978 3.85414 7.85355C3.76037 7.94732 3.6332 8 3.50059 8Z", fill: "currentColor" }) });
3884
+ var TrendDownArrow = () => /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx27("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.50063 0C3.63324 0 3.76042 0.0526785 3.85419 0.146447C3.94795 0.240215 4.00063 0.367392 4.00063 0.5L4.00063 6.293L6.14663 4.146C6.19312 4.09951 6.24831 4.06264 6.30905 4.03748C6.36979 4.01232 6.43489 3.99937 6.50063 3.99937C6.56638 3.99937 6.63148 4.01232 6.69222 4.03748C6.75295 4.06264 6.80814 4.09951 6.85463 4.146C6.90112 4.19249 6.938 4.24768 6.96316 4.30842C6.98831 4.36916 7.00126 4.43426 7.00126 4.5C7.00126 4.56574 6.98831 4.63084 6.96316 4.69158C6.938 4.75232 6.90112 4.80751 6.85463 4.854L3.85463 7.854C3.80819 7.90056 3.75301 7.93751 3.69227 7.96271C3.63152 7.98792 3.5664 8.00089 3.50063 8.00089C3.43486 8.00089 3.36974 7.98792 3.309 7.96271C3.24825 7.93751 3.19308 7.90056 3.14663 7.854L0.146632 4.854C0.100144 4.80751 0.0632674 4.75232 0.0381083 4.69158C0.0129493 4.63084 0 4.56574 0 4.5C0 4.43426 0.0129493 4.36916 0.0381083 4.30842C0.0632674 4.24768 0.100144 4.19249 0.146632 4.146C0.240518 4.05211 0.367856 3.99937 0.500632 3.99937C0.566376 3.99937 0.631476 4.01232 0.692215 4.03748C0.752955 4.06264 0.808144 4.09951 0.854632 4.146L3.00063 6.293L3.00063 0.5C3.00063 0.367392 3.05331 0.240215 3.14708 0.146447C3.24085 0.0526785 3.36802 0 3.50063 0Z", fill: "currentColor" }) });
3752
3885
  function StreamStatusPanel({
3753
3886
  online = false,
3754
3887
  statusLabel,
@@ -3772,20 +3905,20 @@ function StreamStatusPanel({
3772
3905
  const hasTotal = totalValue != null;
3773
3906
  const hasPlatforms = platforms != null;
3774
3907
  const hasStats = stats.length > 0;
3775
- const infoTooltip = (node, tip) => tip != null ? /* @__PURE__ */ jsx26(Tooltip4, { title: tip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }) : node;
3908
+ const infoTooltip = (node, tip) => tip != null ? /* @__PURE__ */ jsx27(Tooltip5, { title: tip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }) : node;
3776
3909
  if (!hasStatus && !hasTotal && !hasPlatforms && !hasStats) {
3777
- return /* @__PURE__ */ jsx26("div", { className: classNames15("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
3910
+ return /* @__PURE__ */ jsx27("div", { className: classNames14("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
3778
3911
  }
3779
- return /* @__PURE__ */ jsxs16("div", { className: classNames15("ls-streamstatus", className), id, children: [
3912
+ return /* @__PURE__ */ jsxs16("div", { className: classNames14("ls-streamstatus", className), id, children: [
3780
3913
  hasStatus ? infoTooltip(
3781
- /* @__PURE__ */ jsx26("div", { className: "ls-streamstatus__status", style: statusTooltip != null ? { cursor: "help" } : void 0, children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
3914
+ /* @__PURE__ */ jsx27("div", { className: "ls-streamstatus__status", style: statusTooltip != null ? { cursor: "help" } : void 0, children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
3782
3915
  /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__indicator", children: [
3783
- online ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__indicator-ping" }) : null,
3784
- /* @__PURE__ */ jsx26("span", { className: classNames15("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
3916
+ online ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__indicator-ping" }) : null,
3917
+ /* @__PURE__ */ jsx27("span", { className: classNames14("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
3785
3918
  ] }),
3786
3919
  /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__status-body", children: [
3787
- /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
3788
- statusSublabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
3920
+ /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
3921
+ statusSublabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
3789
3922
  ] })
3790
3923
  ] }) }),
3791
3924
  statusTooltip
@@ -3793,49 +3926,49 @@ function StreamStatusPanel({
3793
3926
  hasTotal || hasPlatforms ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__overview", children: [
3794
3927
  hasTotal ? infoTooltip(
3795
3928
  /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__total", style: totalTooltip != null ? { cursor: "help" } : void 0, children: [
3796
- /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
3797
- totalLabel != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
3929
+ /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
3930
+ totalLabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
3798
3931
  ] }),
3799
3932
  totalTooltip
3800
3933
  ) : null,
3801
- 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: [
3934
+ hasPlatforms ? /* @__PURE__ */ jsx27("div", { className: "ls-streamstatus__platforms", children: platforms.length === 0 ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platforms-empty", children: platformsEmptyText }) : platforms.map((platform) => /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__platform", children: [
3802
3935
  /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__platform-info", children: [
3803
- 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(
3936
+ platform.icon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-icon", children: platform.icon }) : getPlatformIconUrl(String(platform.id)) ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-icon", children: /* @__PURE__ */ jsx27(PlatformIcon, { platform: String(platform.id) }) }) : /* @__PURE__ */ jsx27(
3804
3937
  "span",
3805
3938
  {
3806
3939
  className: "ls-streamstatus__platform-dot",
3807
3940
  style: platform.accentColor ? { backgroundColor: platform.accentColor } : void 0
3808
3941
  }
3809
3942
  ),
3810
- /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-label", children: platform.label })
3943
+ /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-label", children: platform.label })
3811
3944
  ] }),
3812
- /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__platform-value", children: platform.value })
3945
+ /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-value", children: platform.value })
3813
3946
  ] }, platform.id)) }) : null
3814
3947
  ] }) : null,
3815
- hasStats ? /* @__PURE__ */ jsx26(
3948
+ hasStats ? /* @__PURE__ */ jsx27(
3816
3949
  "div",
3817
3950
  {
3818
3951
  className: "ls-streamstatus__stats",
3819
3952
  style: statsColumns ? { gridTemplateColumns: `repeat(${statsColumns}, minmax(0, 1fr))` } : void 0,
3820
3953
  children: stats.map((stat) => {
3821
- const label = stat.label != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
3954
+ const label = stat.label != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
3822
3955
  const showHead = stat.icon != null || stat.actions != null || statsLabelPosition === "top" && label != null;
3823
3956
  const displayValue = typeof stat.value === "number" ? formatStatValue(stat.value) : stat.value;
3824
3957
  const trend = typeof stat.value === "number" && stat.previousValue != null ? stat.value - stat.previousValue >= 0 ? "up" : "down" : void 0;
3825
3958
  const node = /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat", style: stat.tooltip != null ? { cursor: "help" } : void 0, children: [
3826
3959
  showHead ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat-head", children: [
3827
- stat.icon != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
3960
+ stat.icon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
3828
3961
  statsLabelPosition === "top" ? label : null,
3829
- stat.actions != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
3962
+ stat.actions != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
3830
3963
  ] }) : null,
3831
- /* @__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: [
3964
+ /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-value", style: stat.accentColor ? { color: stat.accentColor } : void 0, children: trend ? /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__stat-trendrow", children: [
3832
3965
  displayValue,
3833
- trend === "up" ? /* @__PURE__ */ jsx26(TrendUpArrow, {}) : /* @__PURE__ */ jsx26(TrendDownArrow, {})
3966
+ trend === "up" ? /* @__PURE__ */ jsx27(TrendUpArrow, {}) : /* @__PURE__ */ jsx27(TrendDownArrow, {})
3834
3967
  ] }) : displayValue }),
3835
3968
  statsLabelPosition === "bottom" ? label : null,
3836
- stat.sub != null ? /* @__PURE__ */ jsx26("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
3969
+ stat.sub != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
3837
3970
  ] }, stat.id);
3838
- 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;
3971
+ return stat.tooltip != null ? /* @__PURE__ */ jsx27(Tooltip5, { title: stat.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: LS_INFO_TOOLTIP_SX } }, children: node }, stat.id) : node;
3839
3972
  })
3840
3973
  }
3841
3974
  ) : null
@@ -3846,8 +3979,8 @@ StreamStatusPanel.displayName = "StreamStatusPanel";
3846
3979
  // src/components/ViewersList/ViewersList.tsx
3847
3980
  import * as React from "react";
3848
3981
  import { useMemo as useMemo5, useState as useState9 } from "react";
3849
- import classNames16 from "classnames";
3850
- import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
3982
+ import classNames15 from "classnames";
3983
+ import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
3851
3984
  function ViewersList({
3852
3985
  viewers,
3853
3986
  groups,
@@ -3880,28 +4013,28 @@ function ViewersList({
3880
4013
  return [...grouped, { key: "", viewers: rest }].filter((section) => section.viewers.length > 0);
3881
4014
  }, [groups, filtered]);
3882
4015
  const showHead = countLabel != null || searchSlot != null || internalSearch;
3883
- return /* @__PURE__ */ jsxs17("div", { className: classNames16("ls-viewerslist", className), id, children: [
4016
+ return /* @__PURE__ */ jsxs17("div", { className: classNames15("ls-viewerslist", className), id, children: [
3884
4017
  showHead ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__head", children: [
3885
- countLabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
3886
- searchSlot ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
3887
- internalSearch ? /* @__PURE__ */ jsx27("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
4018
+ countLabel != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
4019
+ searchSlot ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
4020
+ internalSearch ? /* @__PURE__ */ jsx28("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
3888
4021
  ] }) : null,
3889
- hint != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__hint", children: hint }) : null,
4022
+ hint != null ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__hint", children: hint }) : null,
3890
4023
  filtered.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__empty", children: [
3891
- emptyIcon ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
3892
- /* @__PURE__ */ jsx27("span", { children: emptyText })
3893
- ] }) : /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs17(React.Fragment, { children: [
3894
- section.label != null ? /* @__PURE__ */ jsx27("div", { className: "ls-viewerslist__group", children: section.label }) : null,
4024
+ emptyIcon ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
4025
+ /* @__PURE__ */ jsx28("span", { children: emptyText })
4026
+ ] }) : /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs17(React.Fragment, { children: [
4027
+ section.label != null ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__group", children: section.label }) : null,
3895
4028
  section.viewers.map((viewer) => {
3896
4029
  const avatarSrc = viewer.avatar || viewer.fallbackAvatar || fallbackAvatar;
3897
- const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx27(PlatformIcon, { platform: viewer.platform }) : null);
4030
+ const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx28(PlatformIcon, { platform: viewer.platform }) : null);
3898
4031
  return /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__viewer", children: [
3899
- showAvatars && avatarSrc ? /* @__PURE__ */ jsx27("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
3900
- platformIcon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
3901
- /* @__PURE__ */ jsx27(
4032
+ showAvatars && avatarSrc ? /* @__PURE__ */ jsx28("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
4033
+ platformIcon != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
4034
+ /* @__PURE__ */ jsx28(
3902
4035
  "span",
3903
4036
  {
3904
- className: classNames16("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
4037
+ className: classNames15("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
3905
4038
  title: viewer.username,
3906
4039
  role: onUsernameClick ? "button" : void 0,
3907
4040
  tabIndex: onUsernameClick ? 0 : void 0,
@@ -3915,8 +4048,8 @@ function ViewersList({
3915
4048
  children: viewer.username
3916
4049
  }
3917
4050
  ),
3918
- viewer.badges != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
3919
- viewer.actions != null ? /* @__PURE__ */ jsx27("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
4051
+ viewer.badges != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
4052
+ viewer.actions != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
3920
4053
  ] }, viewer.id);
3921
4054
  })
3922
4055
  ] }, section.key || "__ungrouped")) })
@@ -3925,8 +4058,8 @@ function ViewersList({
3925
4058
  ViewersList.displayName = "ViewersList";
3926
4059
 
3927
4060
  // src/components/ShortcutDockGrid/ShortcutDockGrid.tsx
3928
- import classNames17 from "classnames";
3929
- import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
4061
+ import classNames16 from "classnames";
4062
+ import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
3930
4063
  var softAccent = (color) => /^#[0-9a-fA-F]{6}$/.test(color) ? `${color}66` : color;
3931
4064
  function ShortcutDockGrid({
3932
4065
  buttons,
@@ -3952,7 +4085,7 @@ function ShortcutDockGrid({
3952
4085
  return /* @__PURE__ */ jsxs18(
3953
4086
  "div",
3954
4087
  {
3955
- className: classNames17(
4088
+ className: classNames16(
3956
4089
  "ls-shortcutdock",
3957
4090
  { "ls-shortcutdock--disabled": disabled, "ls-shortcutdock--readonly": readOnly },
3958
4091
  className
@@ -3963,7 +4096,7 @@ function ShortcutDockGrid({
3963
4096
  gridAutoRows: rowHeight ? `${rowHeight}px` : "auto"
3964
4097
  },
3965
4098
  children: [
3966
- buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx28("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
4099
+ buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx29("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
3967
4100
  buttons.map((button) => {
3968
4101
  const large = (button.w ?? 1) > 1 || (button.h ?? 1) > 1;
3969
4102
  const selected = selectedId != null && selectedId === button.id;
@@ -3974,11 +4107,11 @@ function ShortcutDockGrid({
3974
4107
  ...rowHeight ? {} : { minHeight: minButtonSize },
3975
4108
  ...colored ? { ["--ls-shortcutdock-accent"]: button.color, ["--ls-shortcutdock-accent-soft"]: softAccent(button.color) } : {}
3976
4109
  };
3977
- const node = /* @__PURE__ */ jsx28(
4110
+ const node = /* @__PURE__ */ jsx29(
3978
4111
  "button",
3979
4112
  {
3980
4113
  type: "button",
3981
- className: classNames17("ls-shortcutdock__btn", {
4114
+ className: classNames16("ls-shortcutdock__btn", {
3982
4115
  "ls-shortcutdock__btn--selected": selected,
3983
4116
  "ls-shortcutdock__btn--colored": colored && !selected,
3984
4117
  "ls-shortcutdock__btn--icon-only": button.label == null && button.content == null,
@@ -3991,17 +4124,17 @@ function ShortcutDockGrid({
3991
4124
  }
3992
4125
  },
3993
4126
  children: button.content ?? /* @__PURE__ */ jsxs18(Fragment9, { children: [
3994
- 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,
3995
- button.label != null ? /* @__PURE__ */ jsx28("span", { className: "ls-shortcutdock__label", children: button.label }) : null
4127
+ button.image ? /* @__PURE__ */ jsx29("img", { className: "ls-shortcutdock__btn-image", src: button.image, alt: "" }) : button.icon != null ? /* @__PURE__ */ jsx29("span", { className: "ls-shortcutdock__icon", children: button.icon }) : null,
4128
+ button.label != null ? /* @__PURE__ */ jsx29("span", { className: "ls-shortcutdock__label", children: button.label }) : null
3996
4129
  ] })
3997
4130
  }
3998
4131
  );
3999
4132
  return /* @__PURE__ */ jsxs18("div", { className: "ls-shortcutdock__cell", style: cellStyle, title: button.title, children: [
4000
4133
  renderButton ? renderButton(button, node) : node,
4001
- editMode && onRemove ? /* @__PURE__ */ jsx28("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
4134
+ editMode && onRemove ? /* @__PURE__ */ jsx29("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
4002
4135
  ] }, button.id);
4003
4136
  }),
4004
- showAdd ? /* @__PURE__ */ jsx28(
4137
+ showAdd ? /* @__PURE__ */ jsx29(
4005
4138
  "button",
4006
4139
  {
4007
4140
  type: "button",
@@ -4019,9 +4152,9 @@ function ShortcutDockGrid({
4019
4152
  ShortcutDockGrid.displayName = "ShortcutDockGrid";
4020
4153
 
4021
4154
  // src/components/GoalsList/GoalsList.tsx
4022
- import Tooltip5 from "@mui/material/Tooltip";
4023
- import classNames18 from "classnames";
4024
- import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
4155
+ import Tooltip6 from "@mui/material/Tooltip";
4156
+ import classNames17 from "classnames";
4157
+ import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
4025
4158
  var GOAL_TOOLTIP_SX = {
4026
4159
  backgroundColor: "#1b1834",
4027
4160
  border: "1px solid #393853",
@@ -4045,7 +4178,7 @@ var resolvePercent = (goal) => {
4045
4178
  };
4046
4179
  function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goal data yet", id, className }) {
4047
4180
  const fmt = (value, goal) => formatValue ? formatValue(value, goal) : value;
4048
- 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) => {
4181
+ return /* @__PURE__ */ jsx30("div", { className: classNames17("ls-goals", className), id, children: goals.length === 0 ? /* @__PURE__ */ jsx30("div", { className: "ls-goals__empty", children: emptyText }) : goals.map((goal) => {
4049
4182
  const percent = resolvePercent(goal);
4050
4183
  const rowStyle = {
4051
4184
  ...goal.accentColor ? { ["--ls-goals-accent"]: goal.accentColor } : {},
@@ -4053,9 +4186,9 @@ function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goa
4053
4186
  };
4054
4187
  const node = /* @__PURE__ */ jsxs19("div", { className: "ls-goals__row", style: rowStyle, children: [
4055
4188
  /* @__PURE__ */ jsxs19("div", { className: "ls-goals__head", children: [
4056
- goal.icon != null ? /* @__PURE__ */ jsx29("span", { className: "ls-goals__icon", children: goal.icon }) : null,
4057
- /* @__PURE__ */ jsx29("span", { className: "ls-goals__label", children: goal.label }),
4058
- /* @__PURE__ */ jsx29("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
4189
+ goal.icon != null ? /* @__PURE__ */ jsx30("span", { className: "ls-goals__icon", children: goal.icon }) : null,
4190
+ /* @__PURE__ */ jsx30("span", { className: "ls-goals__label", children: goal.label }),
4191
+ /* @__PURE__ */ jsx30("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
4059
4192
  fmt(goal.current ?? 0, goal),
4060
4193
  " ",
4061
4194
  /* @__PURE__ */ jsxs19("span", { className: "ls-goals__target", children: [
@@ -4068,23 +4201,23 @@ function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goa
4068
4201
  "%"
4069
4202
  ] }) : null
4070
4203
  ] }),
4071
- /* @__PURE__ */ jsx29("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx29("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
4204
+ /* @__PURE__ */ jsx30("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx30("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
4072
4205
  ] }, goal.id);
4073
- 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;
4206
+ return goal.tooltip != null ? /* @__PURE__ */ jsx30(Tooltip6, { title: goal.tooltip, placement: "top", enterDelay: 120, slotProps: { tooltip: { sx: GOAL_TOOLTIP_SX } }, children: node }, goal.id) : node;
4074
4207
  }) });
4075
4208
  }
4076
4209
  GoalsList.displayName = "GoalsList";
4077
4210
 
4078
4211
  // src/components/ModQueueItem/ModQueueItem.tsx
4079
4212
  import IconButton from "@mui/material/IconButton";
4080
- import classNames19 from "classnames";
4213
+ import classNames18 from "classnames";
4081
4214
 
4082
4215
  // src/components/ModQueueItem/icons.tsx
4083
- import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
4216
+ import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
4084
4217
  function CrossBoxIcon({ className }) {
4085
4218
  return /* @__PURE__ */ jsxs20("svg", { className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4086
- /* @__PURE__ */ jsx30("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
4087
- /* @__PURE__ */ jsx30(
4219
+ /* @__PURE__ */ jsx31("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
4220
+ /* @__PURE__ */ jsx31(
4088
4221
  "path",
4089
4222
  {
4090
4223
  d: "M14.3571 7.71806L12.8756 6.23657L10.2843 8.82791L7.69292 6.23657L6.21143 7.71806L8.80276 10.3094L6.21143 12.9007L7.69292 14.3822L10.2843 11.7909L12.8756 14.3822L14.3571 12.9007L11.7657 10.3094L14.3571 7.71806Z",
@@ -4095,8 +4228,8 @@ function CrossBoxIcon({ className }) {
4095
4228
  }
4096
4229
  function TickBoxIcon({ className }) {
4097
4230
  return /* @__PURE__ */ jsxs20("svg", { className, width: "22", height: "21", viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4098
- /* @__PURE__ */ jsx30("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
4099
- /* @__PURE__ */ jsx30(
4231
+ /* @__PURE__ */ jsx31("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
4232
+ /* @__PURE__ */ jsx31(
4100
4233
  "path",
4101
4234
  {
4102
4235
  d: "M14.8908 5.49829L9.85209 12.1414L6.87311 9.16455L5.49854 10.5391L10.0798 15.1203L16.4952 6.87287L14.8908 5.49829Z",
@@ -4107,7 +4240,7 @@ function TickBoxIcon({ className }) {
4107
4240
  }
4108
4241
 
4109
4242
  // src/components/ModQueueItem/ModQueueItem.tsx
4110
- import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
4243
+ import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
4111
4244
  function ModQueueItem({
4112
4245
  username,
4113
4246
  avatar,
@@ -4120,12 +4253,12 @@ function ModQueueItem({
4120
4253
  onDeny,
4121
4254
  className
4122
4255
  }) {
4123
- return /* @__PURE__ */ jsxs21("div", { className: classNames19("ls-modqueue-item", className), children: [
4124
- icon ? /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
4256
+ return /* @__PURE__ */ jsxs21("div", { className: classNames18("ls-modqueue-item", className), children: [
4257
+ icon ? /* @__PURE__ */ jsx32("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
4125
4258
  /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__body", children: [
4126
4259
  /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__head", children: [
4127
- avatar || fallbackAvatar ? /* @__PURE__ */ jsx31("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
4128
- username ? /* @__PURE__ */ jsx31(
4260
+ avatar || fallbackAvatar ? /* @__PURE__ */ jsx32("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
4261
+ username ? /* @__PURE__ */ jsx32(
4129
4262
  "span",
4130
4263
  {
4131
4264
  className: "ls-modqueue-item__username",
@@ -4133,7 +4266,7 @@ function ModQueueItem({
4133
4266
  children: username
4134
4267
  }
4135
4268
  ) : null,
4136
- command ? /* @__PURE__ */ jsx31("span", { className: "ls-modqueue-item__command", children: command }) : null
4269
+ command ? /* @__PURE__ */ jsx32("span", { className: "ls-modqueue-item__command", children: command }) : null
4137
4270
  ] }),
4138
4271
  message ? /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__message", children: [
4139
4272
  "\u201C",
@@ -4141,9 +4274,9 @@ function ModQueueItem({
4141
4274
  "\u201D"
4142
4275
  ] }) : null
4143
4276
  ] }),
4144
- /* @__PURE__ */ jsx31("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
4145
- /* @__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" }) }),
4146
- /* @__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" }) })
4277
+ /* @__PURE__ */ jsx32("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
4278
+ /* @__PURE__ */ jsx32(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onDeny, "aria-label": "Deny", children: /* @__PURE__ */ jsx32(CrossBoxIcon, { className: "ls-modqueue-item__action-icon" }) }),
4279
+ /* @__PURE__ */ jsx32(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onApprove, "aria-label": "Approve", children: /* @__PURE__ */ jsx32(TickBoxIcon, { className: "ls-modqueue-item__action-icon" }) })
4147
4280
  ] }) })
4148
4281
  ] });
4149
4282
  }
@@ -4152,12 +4285,12 @@ ModQueueItem.displayName = "ModQueueItem";
4152
4285
  // src/components/ModQueueList/ModQueueList.tsx
4153
4286
  import { useMemo as useMemo6, useState as useState10 } from "react";
4154
4287
  import ButtonBase from "@mui/material/ButtonBase";
4155
- import classNames20 from "classnames";
4288
+ import classNames19 from "classnames";
4156
4289
 
4157
4290
  // src/components/ModQueueList/icons.tsx
4158
- import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
4291
+ import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
4159
4292
  function SearchIcon({ className }) {
4160
- 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(
4293
+ return /* @__PURE__ */ jsx33("svg", { className, width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33(
4161
4294
  "path",
4162
4295
  {
4163
4296
  fillRule: "evenodd",
@@ -4169,23 +4302,23 @@ function SearchIcon({ className }) {
4169
4302
  }
4170
4303
  function EmptyModQueueIcon({ className }) {
4171
4304
  return /* @__PURE__ */ jsxs22("svg", { className, width: "39", height: "39", viewBox: "0 0 39 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
4172
- /* @__PURE__ */ jsx32(
4305
+ /* @__PURE__ */ jsx33(
4173
4306
  "path",
4174
4307
  {
4175
4308
  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",
4176
4309
  fill: "#CAC9D5"
4177
4310
  }
4178
4311
  ),
4179
- /* @__PURE__ */ jsx32(
4312
+ /* @__PURE__ */ jsx33(
4180
4313
  "path",
4181
4314
  {
4182
4315
  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",
4183
4316
  fill: "#CAC9D5"
4184
4317
  }
4185
4318
  ),
4186
- /* @__PURE__ */ jsx32("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
4187
- /* @__PURE__ */ jsx32("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
4188
- /* @__PURE__ */ jsx32(
4319
+ /* @__PURE__ */ jsx33("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
4320
+ /* @__PURE__ */ jsx33("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
4321
+ /* @__PURE__ */ jsx33(
4189
4322
  "path",
4190
4323
  {
4191
4324
  d: "M18.5 9C19.5384 9 20.5536 9.30789 21.417 9.88477C22.2802 10.4616 22.9532 11.282 23.3506 12.2412C23.7478 13.2004 23.852 14.2561 23.6494 15.2744C23.4468 16.2928 22.9461 17.2278 22.2119 17.9619C21.8356 18.3383 21.4066 18.6536 20.9404 18.8984L20.248 19.2002C20.0129 19.2832 19.771 19.3504 19.5244 19.3994C18.5062 19.602 17.4504 19.4978 16.4912 19.1006C15.5319 18.7032 14.7117 18.0302 14.1348 17.167C13.5579 16.3036 13.25 15.2884 13.25 14.25C13.25 12.8576 13.8035 11.5227 14.7881 10.5381C15.7726 9.55352 17.1076 9 18.5 9Z",
@@ -4196,7 +4329,7 @@ function EmptyModQueueIcon({ className }) {
4196
4329
  }
4197
4330
 
4198
4331
  // src/components/ModQueueList/ModQueueList.tsx
4199
- import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
4332
+ import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
4200
4333
  var matches = (item, q) => {
4201
4334
  if (!q) {
4202
4335
  return true;
@@ -4234,32 +4367,32 @@ function ModQueueList({
4234
4367
  };
4235
4368
  const internalSearch = showSearch && !searchSlot;
4236
4369
  const filtered = useMemo6(() => internalSearch ? items.filter((item) => matches(item, query)) : items, [internalSearch, items, query]);
4237
- return /* @__PURE__ */ jsxs23("div", { className: classNames20("ls-modqueue", className), id, children: [
4238
- searchSlot ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx33(
4370
+ return /* @__PURE__ */ jsxs23("div", { className: classNames19("ls-modqueue", className), id, children: [
4371
+ searchSlot ? /* @__PURE__ */ jsx34("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx34("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx34(
4239
4372
  LSInput,
4240
4373
  {
4241
4374
  size: "small",
4242
4375
  placeholder: searchPlaceholder,
4243
- startAdornment: /* @__PURE__ */ jsx33(SearchIcon, { className: "ls-modqueue__search-icon" }),
4376
+ startAdornment: /* @__PURE__ */ jsx34(SearchIcon, { className: "ls-modqueue__search-icon" }),
4244
4377
  value: query,
4245
4378
  onChange: (e) => handleSearchChange(String(e.target.value ?? ""))
4246
4379
  }
4247
4380
  ) }) : null,
4248
4381
  filtered.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__empty", children: [
4249
- /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx33(EmptyModQueueIcon, {}) }),
4250
- /* @__PURE__ */ jsx33("span", { children: emptyText })
4382
+ /* @__PURE__ */ jsx34("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx34(EmptyModQueueIcon, {}) }),
4383
+ /* @__PURE__ */ jsx34("span", { children: emptyText })
4251
4384
  ] }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
4252
4385
  canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__bulk", children: [
4253
4386
  onDeny ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
4254
- /* @__PURE__ */ jsx33(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
4387
+ /* @__PURE__ */ jsx34(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
4255
4388
  denyAllLabel
4256
4389
  ] }) : null,
4257
4390
  onApprove ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--approve", disableRipple: true, onClick: () => onApprove("all"), children: [
4258
- /* @__PURE__ */ jsx33(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
4391
+ /* @__PURE__ */ jsx34(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
4259
4392
  approveAllLabel
4260
4393
  ] }) : null
4261
4394
  ] }) : null,
4262
- /* @__PURE__ */ jsx33("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx33(
4395
+ /* @__PURE__ */ jsx34("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx34(
4263
4396
  ModQueueItem,
4264
4397
  {
4265
4398
  icon: item.icon,
@@ -4270,7 +4403,7 @@ function ModQueueList({
4270
4403
  message: showMessages ? item.message : void 0,
4271
4404
  onApprove: () => onApprove?.(item.id),
4272
4405
  onDeny: () => onDeny?.(item.id),
4273
- actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx33("span", { className: "ls-modqueue__readonly", children: "read-only" }))
4406
+ actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx34("span", { className: "ls-modqueue__readonly", children: "read-only" }))
4274
4407
  },
4275
4408
  item.id
4276
4409
  )) })
@@ -4281,8 +4414,8 @@ ModQueueList.displayName = "ModQueueList";
4281
4414
 
4282
4415
  // src/components/ModActivityLog/ModActivityLog.tsx
4283
4416
  import { useEffect as useEffect8, useRef as useRef8 } from "react";
4284
- import classNames21 from "classnames";
4285
- import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
4417
+ import classNames20 from "classnames";
4418
+ import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
4286
4419
  function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", autoScroll, className }) {
4287
4420
  const listRef = useRef8(null);
4288
4421
  useEffect8(() => {
@@ -4290,20 +4423,20 @@ function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", a
4290
4423
  listRef.current.scrollTop = listRef.current.scrollHeight;
4291
4424
  }
4292
4425
  }, [logs, autoScroll]);
4293
- return /* @__PURE__ */ jsxs24("div", { className: classNames21("ls-modlog", className), children: [
4294
- 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,
4295
- 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) => {
4426
+ return /* @__PURE__ */ jsxs24("div", { className: classNames20("ls-modlog", className), children: [
4427
+ onClear && logs.length > 0 ? /* @__PURE__ */ jsx35("div", { className: "ls-modlog__toolbar", children: /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-modlog__clear", onClick: onClear, children: clearLabel }) }) : null,
4428
+ logs.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "ls-modlog__empty", children: emptyText ?? "No activity yet" }) : /* @__PURE__ */ jsx35("div", { className: "ls-modlog__list", ref: listRef, children: logs.map((log, i) => {
4296
4429
  const rowStyle = {
4297
4430
  ...log.tabColor ? { ["--ls-modlog-accent"]: log.tabColor } : {},
4298
4431
  ...log.barColor ? { ["--ls-modlog-bar"]: log.barColor } : {}
4299
4432
  };
4300
4433
  return /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__row", style: rowStyle, children: [
4301
4434
  /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__head", children: [
4302
- log.avatar ? /* @__PURE__ */ jsx34("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
4303
- log.title ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__title", children: log.title }) : null,
4304
- log.time ? /* @__PURE__ */ jsx34("span", { className: "ls-modlog__time", children: log.time }) : null
4435
+ log.avatar ? /* @__PURE__ */ jsx35("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
4436
+ log.title ? /* @__PURE__ */ jsx35("span", { className: "ls-modlog__title", children: log.title }) : null,
4437
+ log.time ? /* @__PURE__ */ jsx35("span", { className: "ls-modlog__time", children: log.time }) : null
4305
4438
  ] }),
4306
- log.message ? /* @__PURE__ */ jsx34("div", { className: "ls-modlog__message", children: log.message }) : null
4439
+ log.message ? /* @__PURE__ */ jsx35("div", { className: "ls-modlog__message", children: log.message }) : null
4307
4440
  ] }, log.id ?? i);
4308
4441
  }) })
4309
4442
  ] });
@@ -4312,8 +4445,8 @@ ModActivityLog.displayName = "ModActivityLog";
4312
4445
 
4313
4446
  // src/components/SongRequestList/SongRequestList.tsx
4314
4447
  import { useState as useState11 } from "react";
4315
- import classNames22 from "classnames";
4316
- import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
4448
+ import classNames21 from "classnames";
4449
+ import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
4317
4450
  function SongRequestList({
4318
4451
  nowPlaying,
4319
4452
  progress = 0,
@@ -4342,7 +4475,7 @@ function SongRequestList({
4342
4475
  setAddValue("");
4343
4476
  };
4344
4477
  const addBar = onAddSong ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__addbar", children: [
4345
- /* @__PURE__ */ jsx35(
4478
+ /* @__PURE__ */ jsx36(
4346
4479
  LSInput,
4347
4480
  {
4348
4481
  className: "ls-songreq__addinput",
@@ -4358,34 +4491,34 @@ function SongRequestList({
4358
4491
  }
4359
4492
  }
4360
4493
  ),
4361
- /* @__PURE__ */ jsx35(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
4494
+ /* @__PURE__ */ jsx36(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
4362
4495
  ] }) : null;
4363
4496
  if (!nowPlaying) {
4364
4497
  if (!addBar) {
4365
- return /* @__PURE__ */ jsx35("div", { className: classNames22("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
4498
+ return /* @__PURE__ */ jsx36("div", { className: classNames21("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
4366
4499
  }
4367
- return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
4500
+ return /* @__PURE__ */ jsxs25("div", { className: classNames21("ls-songreq", className), children: [
4368
4501
  addBar,
4369
- /* @__PURE__ */ jsx35("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
4502
+ /* @__PURE__ */ jsx36("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
4370
4503
  ] });
4371
4504
  }
4372
4505
  const clampedProgress = Math.min(100, Math.max(0, progress));
4373
- return /* @__PURE__ */ jsxs25("div", { className: classNames22("ls-songreq", className), children: [
4506
+ return /* @__PURE__ */ jsxs25("div", { className: classNames21("ls-songreq", className), children: [
4374
4507
  addBar,
4375
4508
  /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__now", children: [
4376
- showArt && nowPlaying.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
4509
+ showArt && nowPlaying.art ? /* @__PURE__ */ jsx36("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
4377
4510
  /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__nowbody", children: [
4378
- /* @__PURE__ */ jsx35("div", { className: "ls-songreq__title", children: nowPlaying.title }),
4379
- nowPlaying.artist ? /* @__PURE__ */ jsx35("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
4511
+ /* @__PURE__ */ jsx36("div", { className: "ls-songreq__title", children: nowPlaying.title }),
4512
+ nowPlaying.artist ? /* @__PURE__ */ jsx36("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
4380
4513
  showRequester && nowPlaying.requester ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__requester", children: [
4381
4514
  "requested by ",
4382
4515
  nowPlaying.requester
4383
4516
  ] }) : null,
4384
- /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx35("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
4517
+ /* @__PURE__ */ jsx36("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx36("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
4385
4518
  ] }),
4386
4519
  /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__controls", children: [
4387
- 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,
4388
- onSkip ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
4520
+ onPlayPause ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ls-songreq__btn", onClick: onPlayPause, title: isPlaying ? "Pause" : "Play", "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? "\u23F8" : "\u25B6" }) : null,
4521
+ onSkip ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
4389
4522
  ] })
4390
4523
  ] }),
4391
4524
  showQueue ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queue", children: [
@@ -4393,16 +4526,16 @@ function SongRequestList({
4393
4526
  "Up next \xB7 ",
4394
4527
  queue.length
4395
4528
  ] }),
4396
- /* @__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: [
4397
- showArt && item.art ? /* @__PURE__ */ jsx35("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
4529
+ /* @__PURE__ */ jsx36("div", { className: "ls-songreq__queuelist", children: queue.length === 0 ? /* @__PURE__ */ jsx36("div", { className: "ls-songreq__queueempty", children: "Queue is empty" }) : queue.map((item) => /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__item", children: [
4530
+ showArt && item.art ? /* @__PURE__ */ jsx36("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
4398
4531
  /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itembody", children: [
4399
- /* @__PURE__ */ jsx35("div", { className: "ls-songreq__itemtitle", children: item.title }),
4532
+ /* @__PURE__ */ jsx36("div", { className: "ls-songreq__itemtitle", children: item.title }),
4400
4533
  /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itemmeta", children: [
4401
4534
  item.artist,
4402
4535
  showRequester && item.requester ? ` \xB7 ${item.requester}` : ""
4403
4536
  ] })
4404
4537
  ] }),
4405
- onRemove ? /* @__PURE__ */ jsx35("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
4538
+ onRemove ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
4406
4539
  ] }, item.id)) })
4407
4540
  ] }) : null
4408
4541
  ] });
@@ -10157,7 +10290,7 @@ import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMe
10157
10290
 
10158
10291
  // src/se-import/ui/MarketplacePicker.tsx
10159
10292
  import { useEffect as useEffect9, useMemo as useMemo7, useState as useState12 } from "react";
10160
- import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
10293
+ import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
10161
10294
  function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed, onPick, onCancel }) {
10162
10295
  const candidateIds = useMemo7(() => getMarketplaceCandidates(seWidgetType), [seWidgetType]);
10163
10296
  const [candidates, setCandidates] = useState12(() => candidateIds.map((id) => ({ id, loading: true })));
@@ -10194,23 +10327,23 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
10194
10327
  };
10195
10328
  if (candidateIds.length === 0) {
10196
10329
  return /* @__PURE__ */ jsxs26("div", { className: "ui-flex-column ui-gap-2", style: { padding: 16 }, children: [
10197
- /* @__PURE__ */ jsx36("div", { style: { fontWeight: 600 }, children: "No marketplace replacements yet" }),
10330
+ /* @__PURE__ */ jsx37("div", { style: { fontWeight: 600 }, children: "No marketplace replacements yet" }),
10198
10331
  /* @__PURE__ */ jsxs26("div", { style: { fontSize: 13, opacity: 0.8 }, children: [
10199
10332
  "No curated marketplace overlays are listed for ",
10200
- /* @__PURE__ */ jsx36("code", { children: seWidgetType }),
10333
+ /* @__PURE__ */ jsx37("code", { children: seWidgetType }),
10201
10334
  " yet. Use AI generation or skip the widget for now."
10202
10335
  ] }),
10203
- /* @__PURE__ */ jsx36("div", { className: "ui-flex-row", style: { marginTop: 8 }, children: /* @__PURE__ */ jsx36(LSButton, { type: "button", color: "secondary", onClick: onCancel, label: "Close" }) })
10336
+ /* @__PURE__ */ jsx37("div", { className: "ui-flex-row", style: { marginTop: 8 }, children: /* @__PURE__ */ jsx37(LSButton, { type: "button", color: "secondary", onClick: onCancel, label: "Close" }) })
10204
10337
  ] });
10205
10338
  }
10206
10339
  return /* @__PURE__ */ jsxs26("div", { className: "ui-flex-column ui-gap-2", style: { padding: 16, minHeight: 420 }, children: [
10207
- /* @__PURE__ */ jsx36("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Pick a marketplace replacement" }),
10340
+ /* @__PURE__ */ jsx37("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Pick a marketplace replacement" }),
10208
10341
  /* @__PURE__ */ jsxs26("div", { style: { fontSize: 13, opacity: 0.8 }, children: [
10209
10342
  "Replacing ",
10210
- /* @__PURE__ */ jsx36("code", { children: seWidgetType }),
10343
+ /* @__PURE__ */ jsx37("code", { children: seWidgetType }),
10211
10344
  " with a layer from a curated Lumia Marketplace overlay."
10212
10345
  ] }),
10213
- /* @__PURE__ */ jsx36("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap", marginTop: 4 }, children: candidates.map((c) => /* @__PURE__ */ jsx36(
10346
+ /* @__PURE__ */ jsx37("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap", marginTop: 4 }, children: candidates.map((c) => /* @__PURE__ */ jsx37(
10214
10347
  LSButton,
10215
10348
  {
10216
10349
  type: "button",
@@ -10229,11 +10362,11 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
10229
10362
  ": ",
10230
10363
  activeCandidate.error
10231
10364
  ] }),
10232
- activeCandidate?.loading && /* @__PURE__ */ jsx36("div", { style: { padding: 12, fontSize: 13, opacity: 0.8 }, children: "Loading overlay\u2026" }),
10365
+ activeCandidate?.loading && /* @__PURE__ */ jsx37("div", { style: { padding: 12, fontSize: 13, opacity: 0.8 }, children: "Loading overlay\u2026" }),
10233
10366
  activeCandidate?.overlay && /* @__PURE__ */ jsxs26("div", { className: "ui-flex-row ui-gap-2", style: { alignItems: "stretch" }, children: [
10234
10367
  /* @__PURE__ */ jsxs26("div", { style: { flex: "0 0 200px", display: "flex", flexDirection: "column", gap: 4, maxHeight: 320, overflowY: "auto" }, children: [
10235
- /* @__PURE__ */ jsx36("div", { style: { fontSize: 12, fontWeight: 600, opacity: 0.8 }, children: "Layers" }),
10236
- activeLayers.map((l) => /* @__PURE__ */ jsx36(
10368
+ /* @__PURE__ */ jsx37("div", { style: { fontSize: 12, fontWeight: 600, opacity: 0.8 }, children: "Layers" }),
10369
+ activeLayers.map((l) => /* @__PURE__ */ jsx37(
10237
10370
  LSButton,
10238
10371
  {
10239
10372
  type: "button",
@@ -10241,19 +10374,19 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
10241
10374
  style: { justifyContent: "flex-start", textAlign: "left" },
10242
10375
  onClick: () => setActiveLayerId(l.id),
10243
10376
  label: /* @__PURE__ */ jsxs26("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
10244
- /* @__PURE__ */ jsx36("div", { style: { fontSize: 12, fontWeight: 600 }, children: l.label }),
10245
- /* @__PURE__ */ jsx36("div", { style: { fontSize: 10, opacity: 0.7 }, children: l.type })
10377
+ /* @__PURE__ */ jsx37("div", { style: { fontSize: 12, fontWeight: 600 }, children: l.label }),
10378
+ /* @__PURE__ */ jsx37("div", { style: { fontSize: 10, opacity: 0.7 }, children: l.type })
10246
10379
  ] })
10247
10380
  },
10248
10381
  l.id
10249
10382
  )),
10250
- activeLayers.length === 0 && /* @__PURE__ */ jsx36("div", { style: { fontSize: 12, opacity: 0.7 }, children: "No transplantable layers." })
10383
+ activeLayers.length === 0 && /* @__PURE__ */ jsx37("div", { style: { fontSize: 12, opacity: 0.7 }, children: "No transplantable layers." })
10251
10384
  ] }),
10252
- /* @__PURE__ */ jsx36("div", { style: { flex: 1, minHeight: 240, background: "rgba(0,0,0,0.3)", borderRadius: 6, overflow: "hidden" }, children: /* @__PURE__ */ jsx36(ActiveLayerPreview, { overlay: activeCandidate.overlay, layerId: activeLayerId, CustomEmbed }) })
10385
+ /* @__PURE__ */ jsx37("div", { style: { flex: 1, minHeight: 240, background: "rgba(0,0,0,0.3)", borderRadius: 6, overflow: "hidden" }, children: /* @__PURE__ */ jsx37(ActiveLayerPreview, { overlay: activeCandidate.overlay, layerId: activeLayerId, CustomEmbed }) })
10253
10386
  ] }),
10254
10387
  /* @__PURE__ */ jsxs26("div", { className: "ui-flex-row ui-gap-2", style: { marginTop: 12, justifyContent: "flex-end" }, children: [
10255
- /* @__PURE__ */ jsx36(LSButton, { type: "button", color: "secondary", variant: "outlined", onClick: onCancel, label: "Cancel" }),
10256
- /* @__PURE__ */ jsx36(
10388
+ /* @__PURE__ */ jsx37(LSButton, { type: "button", color: "secondary", variant: "outlined", onClick: onCancel, label: "Cancel" }),
10389
+ /* @__PURE__ */ jsx37(
10257
10390
  LSButton,
10258
10391
  {
10259
10392
  type: "button",
@@ -10267,13 +10400,13 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
10267
10400
  ] });
10268
10401
  }
10269
10402
  function ActiveLayerPreview({ overlay, layerId, CustomEmbed }) {
10270
- if (!layerId) return /* @__PURE__ */ jsx36("div", { style: { padding: 16, fontSize: 12, opacity: 0.7 }, children: "Select a layer to preview." });
10403
+ if (!layerId) return /* @__PURE__ */ jsx37("div", { style: { padding: 16, fontSize: 12, opacity: 0.7 }, children: "Select a layer to preview." });
10271
10404
  const module = overlay.settings?.modules?.[layerId];
10272
- if (!module) return /* @__PURE__ */ jsx36("div", { style: { padding: 16, fontSize: 12, opacity: 0.7 }, children: "Layer not found." });
10405
+ if (!module) return /* @__PURE__ */ jsx37("div", { style: { padding: 16, fontSize: 12, opacity: 0.7 }, children: "Layer not found." });
10273
10406
  const type = module.settings?.type;
10274
10407
  if (type === "custom" && module.content && CustomEmbed) {
10275
10408
  const c = module.content;
10276
- return /* @__PURE__ */ jsx36(
10409
+ return /* @__PURE__ */ jsx37(
10277
10410
  CustomEmbed,
10278
10411
  {
10279
10412
  codeId: c.codeId ?? layerId,
@@ -10285,10 +10418,10 @@ function ActiveLayerPreview({ overlay, layerId, CustomEmbed }) {
10285
10418
  );
10286
10419
  }
10287
10420
  return /* @__PURE__ */ jsxs26("div", { style: { padding: 16, fontSize: 12 }, children: [
10288
- /* @__PURE__ */ jsx36("div", { style: { fontWeight: 600, marginBottom: 8 }, children: module.settings?.title ?? type }),
10421
+ /* @__PURE__ */ jsx37("div", { style: { fontWeight: 600, marginBottom: 8 }, children: module.settings?.title ?? type }),
10289
10422
  /* @__PURE__ */ jsxs26("div", { style: { opacity: 0.8 }, children: [
10290
10423
  "Preview not available for module type ",
10291
- /* @__PURE__ */ jsx36("code", { children: String(type) }),
10424
+ /* @__PURE__ */ jsx37("code", { children: String(type) }),
10292
10425
  '. Click "Use this layer" to transplant it anyway.'
10293
10426
  ] })
10294
10427
  ] });
@@ -11477,7 +11610,7 @@ function getJwtInstructionSteps({ pasteHint = "above" } = {}) {
11477
11610
  }
11478
11611
 
11479
11612
  // src/se-import/ui/SEImportWizard.tsx
11480
- import { Fragment as Fragment14, jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
11613
+ import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
11481
11614
  function buildOverlaySaveBody(result, name, preview) {
11482
11615
  return {
11483
11616
  name: name.trim() || result.overlay.name,
@@ -11556,8 +11689,8 @@ function panelClass(extra) {
11556
11689
  }
11557
11690
  function ErrorPanel({ message, hint }) {
11558
11691
  return /* @__PURE__ */ jsxs27("div", { className: "se-import-error", children: [
11559
- /* @__PURE__ */ jsx37("div", { className: "se-import-error__title", children: message }),
11560
- hint && /* @__PURE__ */ jsx37("div", { className: "se-import-error__hint", children: hint })
11692
+ /* @__PURE__ */ jsx38("div", { className: "se-import-error__title", children: message }),
11693
+ hint && /* @__PURE__ */ jsx38("div", { className: "se-import-error__hint", children: hint })
11561
11694
  ] });
11562
11695
  }
11563
11696
  function Field({
@@ -11567,7 +11700,7 @@ function Field({
11567
11700
  placeholder,
11568
11701
  disabled
11569
11702
  }) {
11570
- return /* @__PURE__ */ jsx37("div", { className: "se-import-field", children: /* @__PURE__ */ jsx37(
11703
+ return /* @__PURE__ */ jsx38("div", { className: "se-import-field", children: /* @__PURE__ */ jsx38(
11571
11704
  LSInput,
11572
11705
  {
11573
11706
  label,
@@ -11579,7 +11712,7 @@ function Field({
11579
11712
  ) });
11580
11713
  }
11581
11714
  function ProgressBar({ value, max }) {
11582
- return /* @__PURE__ */ jsx37("progress", { className: "se-import-progress", value: max > 0 ? value : 0, max: max || 1 });
11715
+ return /* @__PURE__ */ jsx38("progress", { className: "se-import-progress", value: max > 0 ? value : 0, max: max || 1 });
11583
11716
  }
11584
11717
  function StatusCard({
11585
11718
  label,
@@ -11591,12 +11724,12 @@ function StatusCard({
11591
11724
  }) {
11592
11725
  return /* @__PURE__ */ jsxs27("div", { className: `se-import-stat se-import-stat--${tone}`, children: [
11593
11726
  /* @__PURE__ */ jsxs27("div", { className: "se-import-stat__label", children: [
11594
- icon && /* @__PURE__ */ jsx37("img", { src: icon, alt: "", className: "se-import-stat__icon" }),
11595
- /* @__PURE__ */ jsx37("span", { children: label })
11727
+ icon && /* @__PURE__ */ jsx38("img", { src: icon, alt: "", className: "se-import-stat__icon" }),
11728
+ /* @__PURE__ */ jsx38("span", { children: label })
11596
11729
  ] }),
11597
- /* @__PURE__ */ jsx37("div", { className: "se-import-stat__value", children: value }),
11598
- description && /* @__PURE__ */ jsx37("div", { className: "se-import-stat__description", children: description }),
11599
- sub && /* @__PURE__ */ jsx37("div", { className: "se-import-stat__sub", children: sub })
11730
+ /* @__PURE__ */ jsx38("div", { className: "se-import-stat__value", children: value }),
11731
+ description && /* @__PURE__ */ jsx38("div", { className: "se-import-stat__description", children: description }),
11732
+ sub && /* @__PURE__ */ jsx38("div", { className: "se-import-stat__sub", children: sub })
11600
11733
  ] });
11601
11734
  }
11602
11735
  function CoverageCards({ coverage }) {
@@ -11637,7 +11770,7 @@ function CoverageCards({ coverage }) {
11637
11770
  }
11638
11771
  ].filter((card) => card.value > 0);
11639
11772
  if (cards.length === 0) return null;
11640
- return /* @__PURE__ */ jsx37("div", { className: "se-import-grid se-import-grid--stats", children: cards.map((card) => /* @__PURE__ */ jsx37(
11773
+ return /* @__PURE__ */ jsx38("div", { className: "se-import-grid se-import-grid--stats", children: cards.map((card) => /* @__PURE__ */ jsx38(
11641
11774
  StatusCard,
11642
11775
  {
11643
11776
  label: card.label,
@@ -11674,7 +11807,7 @@ ${safeJs}
11674
11807
  })().catch(__seImportShowError);
11675
11808
  </script></body></html>`;
11676
11809
  }, [html, css, js, data]);
11677
- return /* @__PURE__ */ jsx37(
11810
+ return /* @__PURE__ */ jsx38(
11678
11811
  "iframe",
11679
11812
  {
11680
11813
  title: "ai-preview",
@@ -11692,10 +11825,10 @@ function StepHeader({
11692
11825
  subtitle
11693
11826
  }) {
11694
11827
  return /* @__PURE__ */ jsxs27("div", { className: "se-import-section-title", children: [
11695
- /* @__PURE__ */ jsx37("div", { className: "se-import-section-title__num", children: number }),
11828
+ /* @__PURE__ */ jsx38("div", { className: "se-import-section-title__num", children: number }),
11696
11829
  /* @__PURE__ */ jsxs27("div", { className: "se-import-section-title__content", children: [
11697
- /* @__PURE__ */ jsx37("h3", { children: title }),
11698
- subtitle && /* @__PURE__ */ jsx37("p", { children: subtitle })
11830
+ /* @__PURE__ */ jsx38("h3", { children: title }),
11831
+ subtitle && /* @__PURE__ */ jsx38("p", { children: subtitle })
11699
11832
  ] })
11700
11833
  ] });
11701
11834
  }
@@ -11756,8 +11889,8 @@ function ModeCard({
11756
11889
  e.currentTarget.style.transform = "translateY(0)";
11757
11890
  },
11758
11891
  children: [
11759
- icon && /* @__PURE__ */ jsx37("span", { className: "se-import-mode-card__icon", children: /* @__PURE__ */ jsx37("img", { src: icon, alt: "" }) }),
11760
- /* @__PURE__ */ jsx37(
11892
+ icon && /* @__PURE__ */ jsx38("span", { className: "se-import-mode-card__icon", children: /* @__PURE__ */ jsx38("img", { src: icon, alt: "" }) }),
11893
+ /* @__PURE__ */ jsx38(
11761
11894
  "div",
11762
11895
  {
11763
11896
  style: {
@@ -11768,7 +11901,7 @@ function ModeCard({
11768
11901
  children: title
11769
11902
  }
11770
11903
  ),
11771
- /* @__PURE__ */ jsx37(
11904
+ /* @__PURE__ */ jsx38(
11772
11905
  "div",
11773
11906
  {
11774
11907
  style: {
@@ -11780,7 +11913,7 @@ function ModeCard({
11780
11913
  children: body
11781
11914
  }
11782
11915
  ),
11783
- caveat && /* @__PURE__ */ jsx37("div", { style: { fontSize: 12, color: "var(--se-muted)", marginTop: "auto" }, children: caveat })
11916
+ caveat && /* @__PURE__ */ jsx38("div", { style: { fontSize: 12, color: "var(--se-muted)", marginTop: "auto" }, children: caveat })
11784
11917
  ]
11785
11918
  }
11786
11919
  );
@@ -11791,7 +11924,7 @@ function StepModePicker({
11791
11924
  onOpenFullImport
11792
11925
  }) {
11793
11926
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--wide"), children: [
11794
- /* @__PURE__ */ jsx37(
11927
+ /* @__PURE__ */ jsx38(
11795
11928
  StepHeader,
11796
11929
  {
11797
11930
  number: 1,
@@ -11809,19 +11942,19 @@ function StepModePicker({
11809
11942
  marginTop: onOpenFullImport ? 18 : 8
11810
11943
  },
11811
11944
  children: [
11812
- onOpenFullImport && /* @__PURE__ */ jsx37(
11945
+ onOpenFullImport && /* @__PURE__ */ jsx38(
11813
11946
  ModeCard,
11814
11947
  {
11815
11948
  title: "Move your full StreamElements setup",
11816
11949
  icon: source_se_default,
11817
11950
  body: /* @__PURE__ */ jsxs27(Fragment14, { children: [
11818
- /* @__PURE__ */ jsx37("div", { style: { marginBottom: 12 }, children: "Open the dedicated Lumia Stream import page for counters, commands, loyalty, timers, tips, and activity." }),
11819
- /* @__PURE__ */ jsx37("ul", { className: "se-import-mode-card__features", children: FULL_IMPORT_FEATURES.map((feat) => /* @__PURE__ */ jsx37("li", { children: feat }, feat)) })
11951
+ /* @__PURE__ */ jsx38("div", { style: { marginBottom: 12 }, children: "Open the dedicated Lumia Stream import page for counters, commands, loyalty, timers, tips, and activity." }),
11952
+ /* @__PURE__ */ jsx38("ul", { className: "se-import-mode-card__features", children: FULL_IMPORT_FEATURES.map((feat) => /* @__PURE__ */ jsx38("li", { children: feat }, feat)) })
11820
11953
  ] }),
11821
11954
  onClick: onOpenFullImport
11822
11955
  }
11823
11956
  ),
11824
- /* @__PURE__ */ jsx37(
11957
+ /* @__PURE__ */ jsx38(
11825
11958
  ModeCard,
11826
11959
  {
11827
11960
  primary: true,
@@ -11829,18 +11962,18 @@ function StepModePicker({
11829
11962
  icon: assets_default,
11830
11963
  body: /* @__PURE__ */ jsxs27(Fragment14, { children: [
11831
11964
  "Paste a single overlay's public preview URL to bring just that overlay over.",
11832
- /* @__PURE__ */ jsx37("div", { style: { marginTop: 10, color: "var(--se-muted)" }, children: "No login required \u2014 perfect for trying one overlay before deciding whether to migrate your whole account." })
11965
+ /* @__PURE__ */ jsx38("div", { style: { marginTop: 10, color: "var(--se-muted)" }, children: "No login required \u2014 perfect for trying one overlay before deciding whether to migrate your whole account." })
11833
11966
  ] }),
11834
11967
  onClick: onChooseUrl
11835
11968
  }
11836
11969
  ),
11837
- !onOpenFullImport && /* @__PURE__ */ jsx37(
11970
+ !onOpenFullImport && /* @__PURE__ */ jsx38(
11838
11971
  ModeCard,
11839
11972
  {
11840
11973
  title: "Import everything from StreamElements",
11841
11974
  body: /* @__PURE__ */ jsxs27(Fragment14, { children: [
11842
- /* @__PURE__ */ jsx37("div", { style: { marginBottom: 10 }, children: "Connect once and bring over your entire SE setup:" }),
11843
- /* @__PURE__ */ jsx37(
11975
+ /* @__PURE__ */ jsx38("div", { style: { marginBottom: 10 }, children: "Connect once and bring over your entire SE setup:" }),
11976
+ /* @__PURE__ */ jsx38(
11844
11977
  "ul",
11845
11978
  {
11846
11979
  style: {
@@ -11850,7 +11983,7 @@ function StepModePicker({
11850
11983
  gap: 6,
11851
11984
  fontSize: 13
11852
11985
  },
11853
- children: JWT_FEATURES.map((feat) => /* @__PURE__ */ jsx37("li", { children: feat }, feat))
11986
+ children: JWT_FEATURES.map((feat) => /* @__PURE__ */ jsx38("li", { children: feat }, feat))
11854
11987
  }
11855
11988
  )
11856
11989
  ] }),
@@ -11874,7 +12007,7 @@ function StepConnect({
11874
12007
  onUseUrl
11875
12008
  }) {
11876
12009
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--narrow"), children: [
11877
- /* @__PURE__ */ jsx37(
12010
+ /* @__PURE__ */ jsx38(
11878
12011
  StepHeader,
11879
12012
  {
11880
12013
  number: 1,
@@ -11882,7 +12015,7 @@ function StepConnect({
11882
12015
  subtitle: "Paste your StreamElements JWT to import overlays, live counters, chat commands, loyalty points, watch time, and recent events. The token is read in your browser only. Lumia never sends it to our servers."
11883
12016
  }
11884
12017
  ),
11885
- /* @__PURE__ */ jsx37(
12018
+ /* @__PURE__ */ jsx38(
11886
12019
  Field,
11887
12020
  {
11888
12021
  label: "StreamElements JWT",
@@ -11893,15 +12026,15 @@ function StepConnect({
11893
12026
  }
11894
12027
  ),
11895
12028
  busy && /* @__PURE__ */ jsxs27("div", { className: "se-import-token-loading", "aria-live": "polite", children: [
11896
- /* @__PURE__ */ jsx37("span", { className: "se-import-spinner" }),
11897
- /* @__PURE__ */ jsx37("span", { children: "Checking your token and loading StreamElements data." })
12029
+ /* @__PURE__ */ jsx38("span", { className: "se-import-spinner" }),
12030
+ /* @__PURE__ */ jsx38("span", { children: "Checking your token and loading StreamElements data." })
11898
12031
  ] }),
11899
12032
  channels && channels.length > 1 && /* @__PURE__ */ jsxs27("div", { className: "se-import-help se-import-help--info", children: [
11900
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__icon", children: "i" }),
12033
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "i" }),
11901
12034
  /* @__PURE__ */ jsxs27("div", { children: [
11902
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__title", children: "Pick a channel" }),
11903
- /* @__PURE__ */ jsx37("p", { children: "This account has multiple StreamElements channels. Choose which one to import from." }),
11904
- /* @__PURE__ */ jsx37("div", { style: { display: "grid", gap: 8, marginTop: 12 }, children: channels.map((c) => /* @__PURE__ */ jsxs27(
12035
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__title", children: "Pick a channel" }),
12036
+ /* @__PURE__ */ jsx38("p", { children: "This account has multiple StreamElements channels. Choose which one to import from." }),
12037
+ /* @__PURE__ */ jsx38("div", { style: { display: "grid", gap: 8, marginTop: 12 }, children: channels.map((c) => /* @__PURE__ */ jsxs27(
11905
12038
  "label",
11906
12039
  {
11907
12040
  style: {
@@ -11915,7 +12048,7 @@ function StepConnect({
11915
12048
  cursor: "pointer"
11916
12049
  },
11917
12050
  children: [
11918
- /* @__PURE__ */ jsx37(
12051
+ /* @__PURE__ */ jsx38(
11919
12052
  "input",
11920
12053
  {
11921
12054
  type: "radio",
@@ -11924,7 +12057,7 @@ function StepConnect({
11924
12057
  onChange: () => setSelectedChannelId(c._id)
11925
12058
  }
11926
12059
  ),
11927
- c.avatar && /* @__PURE__ */ jsx37(
12060
+ c.avatar && /* @__PURE__ */ jsx38(
11928
12061
  "img",
11929
12062
  {
11930
12063
  src: c.avatar,
@@ -11935,7 +12068,7 @@ function StepConnect({
11935
12068
  }
11936
12069
  ),
11937
12070
  /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column" }, children: [
11938
- /* @__PURE__ */ jsx37("span", { style: { fontWeight: 700 }, children: c.displayName ?? c.username }),
12071
+ /* @__PURE__ */ jsx38("span", { style: { fontWeight: 700 }, children: c.displayName ?? c.username }),
11939
12072
  /* @__PURE__ */ jsxs27("span", { style: { fontSize: 12, color: "var(--se-muted)" }, children: [
11940
12073
  c.provider,
11941
12074
  " \xB7 ",
@@ -11949,16 +12082,16 @@ function StepConnect({
11949
12082
  ] })
11950
12083
  ] }),
11951
12084
  /* @__PURE__ */ jsxs27("div", { className: "se-import-help", children: [
11952
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__icon", children: "i" }),
12085
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "i" }),
11953
12086
  /* @__PURE__ */ jsxs27("div", { children: [
11954
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__title", children: "How to find your JWT" }),
11955
- /* @__PURE__ */ jsx37("ol", { children: getJwtInstructionSteps({ pasteHint: "above" }).map((step, i) => /* @__PURE__ */ jsx37("li", { children: step.content }, i)) })
12087
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__title", children: "How to find your JWT" }),
12088
+ /* @__PURE__ */ jsx38("ol", { children: getJwtInstructionSteps({ pasteHint: "above" }).map((step, i) => /* @__PURE__ */ jsx38("li", { children: step.content }, i)) })
11956
12089
  ] })
11957
12090
  ] }),
11958
12091
  /* @__PURE__ */ jsxs27("div", { style: { marginTop: 16, fontSize: 13, color: "var(--se-muted)" }, children: [
11959
12092
  "Prefer to import just a single overlay without logging in?",
11960
12093
  " ",
11961
- /* @__PURE__ */ jsx37(
12094
+ /* @__PURE__ */ jsx38(
11962
12095
  "a",
11963
12096
  {
11964
12097
  href: "#",
@@ -11972,7 +12105,7 @@ function StepConnect({
11972
12105
  ),
11973
12106
  "."
11974
12107
  ] }),
11975
- error && /* @__PURE__ */ jsx37(ErrorPanel, { message: error.message, hint: error.hint })
12108
+ error && /* @__PURE__ */ jsx38(ErrorPanel, { message: error.message, hint: error.hint })
11976
12109
  ] });
11977
12110
  }
11978
12111
  function StepPickOverlay({
@@ -11990,7 +12123,7 @@ function StepPickOverlay({
11990
12123
  const allSelected = total > 0 && selectedCount === total;
11991
12124
  const hasAnySelected = selectedCount > 0;
11992
12125
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--wide"), children: [
11993
- /* @__PURE__ */ jsx37(
12126
+ /* @__PURE__ */ jsx38(
11994
12127
  StepHeader,
11995
12128
  {
11996
12129
  number: 2,
@@ -11999,18 +12132,18 @@ function StepPickOverlay({
11999
12132
  }
12000
12133
  ),
12001
12134
  loading && /* @__PURE__ */ jsxs27("div", { className: "se-import-help se-import-help--info", children: [
12002
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__icon", children: "\u2026" }),
12003
- /* @__PURE__ */ jsx37("div", { children: "Fetching your StreamElements overlays." })
12135
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "\u2026" }),
12136
+ /* @__PURE__ */ jsx38("div", { children: "Fetching your StreamElements overlays." })
12004
12137
  ] }),
12005
12138
  error && /* @__PURE__ */ jsxs27(Fragment14, { children: [
12006
- /* @__PURE__ */ jsx37(ErrorPanel, { message: error.message, hint: error.hint }),
12007
- /* @__PURE__ */ jsx37("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx37(LSButton, { type: "button", color: "secondary", onClick: onRetry, label: "Retry" }) })
12139
+ /* @__PURE__ */ jsx38(ErrorPanel, { message: error.message, hint: error.hint }),
12140
+ /* @__PURE__ */ jsx38("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx38(LSButton, { type: "button", color: "secondary", onClick: onRetry, label: "Retry" }) })
12008
12141
  ] }),
12009
12142
  !loading && !error && overlays && overlays.length === 0 && /* @__PURE__ */ jsxs27("div", { className: "se-import-help se-import-help--info", children: [
12010
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__icon", children: "i" }),
12143
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "i" }),
12011
12144
  /* @__PURE__ */ jsxs27("div", { children: [
12012
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__title", children: "No overlays found" }),
12013
- /* @__PURE__ */ jsx37("p", { children: "This StreamElements account doesn't have any overlays yet. Create one in the SE dashboard, or use the legacy preview URL flow from the Connect step." })
12145
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__title", children: "No overlays found" }),
12146
+ /* @__PURE__ */ jsx38("p", { children: "This StreamElements account doesn't have any overlays yet. Create one in the SE dashboard, or use the legacy preview URL flow from the Connect step." })
12014
12147
  ] })
12015
12148
  ] }),
12016
12149
  !loading && !error && overlays && overlays.length > 0 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
@@ -12038,7 +12171,7 @@ function StepPickOverlay({
12038
12171
  fontWeight: 600
12039
12172
  },
12040
12173
  children: [
12041
- /* @__PURE__ */ jsx37(
12174
+ /* @__PURE__ */ jsx38(
12042
12175
  LSCheckbox,
12043
12176
  {
12044
12177
  checked: allSelected,
@@ -12058,11 +12191,11 @@ function StepPickOverlay({
12058
12191
  ]
12059
12192
  }
12060
12193
  ),
12061
- /* @__PURE__ */ jsx37("span", { style: { fontSize: 13, color: "var(--se-muted)" }, children: hasAnySelected ? selectedCount > 1 ? `${selectedCount} overlays selected. Each will be created as its own Lumia overlay.` : "1 overlay selected. It will open the full review flow." : "Click overlays below to select them." })
12194
+ /* @__PURE__ */ jsx38("span", { style: { fontSize: 13, color: "var(--se-muted)" }, children: hasAnySelected ? selectedCount > 1 ? `${selectedCount} overlays selected. Each will be created as its own Lumia overlay.` : "1 overlay selected. It will open the full review flow." : "Click overlays below to select them." })
12062
12195
  ]
12063
12196
  }
12064
12197
  ),
12065
- /* @__PURE__ */ jsx37(
12198
+ /* @__PURE__ */ jsx38(
12066
12199
  "div",
12067
12200
  {
12068
12201
  className: "se-import-grid",
@@ -12088,7 +12221,7 @@ function StepPickOverlay({
12088
12221
  transition: "border-color 120ms, background 120ms"
12089
12222
  },
12090
12223
  children: [
12091
- /* @__PURE__ */ jsx37(
12224
+ /* @__PURE__ */ jsx38(
12092
12225
  LSCheckbox,
12093
12226
  {
12094
12227
  checked: selected,
@@ -12102,7 +12235,7 @@ function StepPickOverlay({
12102
12235
  }
12103
12236
  }
12104
12237
  ),
12105
- o.preview ? /* @__PURE__ */ jsx37(
12238
+ o.preview ? /* @__PURE__ */ jsx38(
12106
12239
  "img",
12107
12240
  {
12108
12241
  src: o.preview,
@@ -12116,7 +12249,7 @@ function StepPickOverlay({
12116
12249
  },
12117
12250
  loading: "lazy"
12118
12251
  }
12119
- ) : /* @__PURE__ */ jsx37(
12252
+ ) : /* @__PURE__ */ jsx38(
12120
12253
  "div",
12121
12254
  {
12122
12255
  style: {
@@ -12127,7 +12260,7 @@ function StepPickOverlay({
12127
12260
  }
12128
12261
  }
12129
12262
  ),
12130
- /* @__PURE__ */ jsx37(
12263
+ /* @__PURE__ */ jsx38(
12131
12264
  "div",
12132
12265
  {
12133
12266
  style: {
@@ -12186,7 +12319,7 @@ function StepURL({
12186
12319
  onSwitchToJwt
12187
12320
  }) {
12188
12321
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--narrow"), children: [
12189
- /* @__PURE__ */ jsx37(
12322
+ /* @__PURE__ */ jsx38(
12190
12323
  StepHeader,
12191
12324
  {
12192
12325
  number: 1,
@@ -12194,7 +12327,7 @@ function StepURL({
12194
12327
  subtitle: "StreamElements (classic or Element). The wizard auto-detects which one you pasted."
12195
12328
  }
12196
12329
  ),
12197
- /* @__PURE__ */ jsx37(
12330
+ /* @__PURE__ */ jsx38(
12198
12331
  LSInput,
12199
12332
  {
12200
12333
  label: "Overlay URL",
@@ -12205,14 +12338,14 @@ function StepURL({
12205
12338
  }
12206
12339
  ),
12207
12340
  /* @__PURE__ */ jsxs27("div", { className: "se-import-help", children: [
12208
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__icon", children: "i" }),
12341
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "i" }),
12209
12342
  /* @__PURE__ */ jsxs27("div", { children: [
12210
- /* @__PURE__ */ jsx37("div", { className: "se-import-help__title", children: "How to find the overlay URL" }),
12343
+ /* @__PURE__ */ jsx38("div", { className: "se-import-help__title", children: "How to find the overlay URL" }),
12211
12344
  /* @__PURE__ */ jsxs27("ol", { children: [
12212
12345
  /* @__PURE__ */ jsxs27("li", { children: [
12213
12346
  "Open",
12214
12347
  " ",
12215
- /* @__PURE__ */ jsx37(
12348
+ /* @__PURE__ */ jsx38(
12216
12349
  "a",
12217
12350
  {
12218
12351
  href: "https://streamelements.com/dashboard/overlays",
@@ -12223,14 +12356,14 @@ function StepURL({
12223
12356
  ),
12224
12357
  "."
12225
12358
  ] }),
12226
- /* @__PURE__ */ jsx37("li", { children: "Click the overlay you want to bring over." }),
12227
- /* @__PURE__ */ jsx37("li", { children: "Click Copy URL in the top right of the editor." }),
12228
- /* @__PURE__ */ jsx37("li", { children: "Paste it above." })
12359
+ /* @__PURE__ */ jsx38("li", { children: "Click the overlay you want to bring over." }),
12360
+ /* @__PURE__ */ jsx38("li", { children: "Click Copy URL in the top right of the editor." }),
12361
+ /* @__PURE__ */ jsx38("li", { children: "Paste it above." })
12229
12362
  ] })
12230
12363
  ] })
12231
12364
  ] }),
12232
- error && /* @__PURE__ */ jsx37(ErrorPanel, { message: error.message, hint: error.hint }),
12233
- error?.editorUrl && onSwitchToJwt && /* @__PURE__ */ jsx37("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx37(
12365
+ error && /* @__PURE__ */ jsx38(ErrorPanel, { message: error.message, hint: error.hint }),
12366
+ error?.editorUrl && onSwitchToJwt && /* @__PURE__ */ jsx38("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx38(
12234
12367
  LSButton,
12235
12368
  {
12236
12369
  type: "button",
@@ -12296,14 +12429,14 @@ function StepDiscovery({
12296
12429
  }
12297
12430
  ].filter((card) => card.value > 0);
12298
12431
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--wide"), children: [
12299
- /* @__PURE__ */ jsx37(
12432
+ /* @__PURE__ */ jsx38(
12300
12433
  StepHeader,
12301
12434
  {
12302
12435
  number: 2,
12303
12436
  title: overlayCount > 1 ? "Here's what we found in your overlays" : "Here's what we found in your overlay"
12304
12437
  }
12305
12438
  ),
12306
- topCards.length > 0 && /* @__PURE__ */ jsx37("div", { className: "se-import-grid se-import-grid--stats", children: topCards.map((card) => /* @__PURE__ */ jsx37(
12439
+ topCards.length > 0 && /* @__PURE__ */ jsx38("div", { className: "se-import-grid se-import-grid--stats", children: topCards.map((card) => /* @__PURE__ */ jsx38(
12307
12440
  StatusCard,
12308
12441
  {
12309
12442
  label: card.label,
@@ -12313,8 +12446,8 @@ function StepDiscovery({
12313
12446
  },
12314
12447
  card.key
12315
12448
  )) }),
12316
- /* @__PURE__ */ jsx37(CoverageCards, { coverage: result.coverage }),
12317
- reviewCount > 0 && /* @__PURE__ */ jsx37("div", { className: "se-import-grid se-import-grid--two", children: /* @__PURE__ */ jsx37(
12449
+ /* @__PURE__ */ jsx38(CoverageCards, { coverage: result.coverage }),
12450
+ reviewCount > 0 && /* @__PURE__ */ jsx38("div", { className: "se-import-grid se-import-grid--two", children: /* @__PURE__ */ jsx38(
12318
12451
  StatusCard,
12319
12452
  {
12320
12453
  label: "Review choices",
@@ -12333,18 +12466,18 @@ function StepOptions({
12333
12466
  hideName = false
12334
12467
  }) {
12335
12468
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--medium"), children: [
12336
- /* @__PURE__ */ jsx37(StepHeader, { number: 3, title: "Options", subtitle: "Choose how to handle your assets" }),
12469
+ /* @__PURE__ */ jsx38(StepHeader, { number: 3, title: "Options", subtitle: "Choose how to handle your assets" }),
12337
12470
  /* @__PURE__ */ jsxs27("label", { className: `se-import-option ${assetCount === 0 ? "se-import-option--disabled" : ""}`, children: [
12338
- /* @__PURE__ */ jsx37("span", { className: "se-import-option__icon", children: /* @__PURE__ */ jsx37("img", { src: assets_default, alt: "" }) }),
12471
+ /* @__PURE__ */ jsx38("span", { className: "se-import-option__icon", children: /* @__PURE__ */ jsx38("img", { src: assets_default, alt: "" }) }),
12339
12472
  /* @__PURE__ */ jsxs27("span", { className: "se-import-option__body", children: [
12340
- /* @__PURE__ */ jsx37("span", { className: "se-import-option__title", children: "Mirror StreamElements assets to Lumia storage" }),
12341
- /* @__PURE__ */ jsx37("span", { className: "se-import-option__copy", children: "Downloads every cdn.streamelements.com URL referenced in the overlay, uploads it to your Lumia asset library, then rewrites the URLs." })
12473
+ /* @__PURE__ */ jsx38("span", { className: "se-import-option__title", children: "Mirror StreamElements assets to Lumia storage" }),
12474
+ /* @__PURE__ */ jsx38("span", { className: "se-import-option__copy", children: "Downloads every cdn.streamelements.com URL referenced in the overlay, uploads it to your Lumia asset library, then rewrites the URLs." })
12342
12475
  ] }),
12343
12476
  /* @__PURE__ */ jsxs27("span", { className: "se-import-option__count", children: [
12344
12477
  assetCount,
12345
12478
  " files"
12346
12479
  ] }),
12347
- /* @__PURE__ */ jsx37(
12480
+ /* @__PURE__ */ jsx38(
12348
12481
  "input",
12349
12482
  {
12350
12483
  type: "checkbox",
@@ -12353,9 +12486,9 @@ function StepOptions({
12353
12486
  onChange: (e) => setOptions({ ...options, mirrorAssets: e.target.checked })
12354
12487
  }
12355
12488
  ),
12356
- /* @__PURE__ */ jsx37("span", { className: "se-import-toggle" })
12489
+ /* @__PURE__ */ jsx38("span", { className: "se-import-toggle" })
12357
12490
  ] }),
12358
- !hideName && /* @__PURE__ */ jsx37(
12491
+ !hideName && /* @__PURE__ */ jsx38(
12359
12492
  LSInput,
12360
12493
  {
12361
12494
  label: "Overlay name",
@@ -12386,9 +12519,9 @@ function AssetTransferAnimation({ complete }) {
12386
12519
  className: `se-import-transfer ${complete ? "se-import-transfer--complete" : ""}`,
12387
12520
  "aria-hidden": "true",
12388
12521
  children: [
12389
- /* @__PURE__ */ jsx37("div", { className: "se-import-transfer__source se-import-transfer__source--se", children: /* @__PURE__ */ jsx37("img", { src: source_se_default, alt: "" }) }),
12522
+ /* @__PURE__ */ jsx38("div", { className: "se-import-transfer__source se-import-transfer__source--se", children: /* @__PURE__ */ jsx38("img", { src: source_se_default, alt: "" }) }),
12390
12523
  /* @__PURE__ */ jsxs27("div", { className: "se-import-transfer__files", children: [
12391
- /* @__PURE__ */ jsx37(
12524
+ /* @__PURE__ */ jsx38(
12392
12525
  "img",
12393
12526
  {
12394
12527
  className: "se-import-transfer__file se-import-transfer__file--one",
@@ -12396,7 +12529,7 @@ function AssetTransferAnimation({ complete }) {
12396
12529
  alt: ""
12397
12530
  }
12398
12531
  ),
12399
- /* @__PURE__ */ jsx37(
12532
+ /* @__PURE__ */ jsx38(
12400
12533
  "img",
12401
12534
  {
12402
12535
  className: "se-import-transfer__file se-import-transfer__file--two",
@@ -12404,7 +12537,7 @@ function AssetTransferAnimation({ complete }) {
12404
12537
  alt: ""
12405
12538
  }
12406
12539
  ),
12407
- /* @__PURE__ */ jsx37(
12540
+ /* @__PURE__ */ jsx38(
12408
12541
  "img",
12409
12542
  {
12410
12543
  className: "se-import-transfer__file se-import-transfer__file--three",
@@ -12412,7 +12545,7 @@ function AssetTransferAnimation({ complete }) {
12412
12545
  alt: ""
12413
12546
  }
12414
12547
  ),
12415
- /* @__PURE__ */ jsx37(
12548
+ /* @__PURE__ */ jsx38(
12416
12549
  "img",
12417
12550
  {
12418
12551
  className: "se-import-transfer__file se-import-transfer__file--four",
@@ -12422,8 +12555,8 @@ function AssetTransferAnimation({ complete }) {
12422
12555
  )
12423
12556
  ] }),
12424
12557
  /* @__PURE__ */ jsxs27("div", { className: "se-import-transfer__source se-import-transfer__source--lumia", children: [
12425
- /* @__PURE__ */ jsx37("img", { src: source_lumia_default, alt: "" }),
12426
- complete && /* @__PURE__ */ jsx37("span", { className: "se-import-transfer__done", children: "\u2713" })
12558
+ /* @__PURE__ */ jsx38("img", { src: source_lumia_default, alt: "" }),
12559
+ complete && /* @__PURE__ */ jsx38("span", { className: "se-import-transfer__done", children: "\u2713" })
12427
12560
  ] })
12428
12561
  ]
12429
12562
  }
@@ -12443,7 +12576,7 @@ function StepMirror({
12443
12576
  const complete = !running && completed >= rows.length;
12444
12577
  const summary = running ? `Downloading... (${done + reused + keptOnCdn}/${rows.length})` : `Finished. ${done} mirrored${reused ? `, ${reused} reused` : ""}${keptOnCdn ? `, ${keptOnCdn} kept on CDN` : ""}${failed ? `, ${failed} failed` : ""}.`;
12445
12578
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--wide"), children: [
12446
- /* @__PURE__ */ jsx37(
12579
+ /* @__PURE__ */ jsx38(
12447
12580
  StepHeader,
12448
12581
  {
12449
12582
  number: 4,
@@ -12451,20 +12584,20 @@ function StepMirror({
12451
12584
  subtitle: "We're downloading your assets from StreamElements and preparing them for import."
12452
12585
  }
12453
12586
  ),
12454
- /* @__PURE__ */ jsx37(AssetTransferAnimation, { complete }),
12587
+ /* @__PURE__ */ jsx38(AssetTransferAnimation, { complete }),
12455
12588
  /* @__PURE__ */ jsxs27("div", { className: "se-import-mirror-head", children: [
12456
- /* @__PURE__ */ jsx37("span", { children: summary }),
12457
- /* @__PURE__ */ jsx37(ProgressBar, { value: completed, max: rows.length }),
12589
+ /* @__PURE__ */ jsx38("span", { children: summary }),
12590
+ /* @__PURE__ */ jsx38(ProgressBar, { value: completed, max: rows.length }),
12458
12591
  /* @__PURE__ */ jsxs27("strong", { children: [
12459
12592
  percent,
12460
12593
  "%"
12461
12594
  ] })
12462
12595
  ] }),
12463
- /* @__PURE__ */ jsx37("div", { className: "se-import-asset-list", children: rows.map((row, index) => /* @__PURE__ */ jsxs27("div", { className: `se-import-asset-row se-import-asset-row--${row.state}`, children: [
12464
- /* @__PURE__ */ jsx37("img", { className: "se-import-asset-row__icon", src: fileTypeIcon(row.url), alt: "" }),
12465
- /* @__PURE__ */ jsx37("span", { className: "se-import-asset-row__url", title: row.url, children: row.url }),
12466
- /* @__PURE__ */ jsx37("span", { className: "se-import-asset-row__state", children: mirrorLabel(row.state) }),
12467
- row.state === "failed" && /* @__PURE__ */ jsx37(
12596
+ /* @__PURE__ */ jsx38("div", { className: "se-import-asset-list", children: rows.map((row, index) => /* @__PURE__ */ jsxs27("div", { className: `se-import-asset-row se-import-asset-row--${row.state}`, children: [
12597
+ /* @__PURE__ */ jsx38("img", { className: "se-import-asset-row__icon", src: fileTypeIcon(row.url), alt: "" }),
12598
+ /* @__PURE__ */ jsx38("span", { className: "se-import-asset-row__url", title: row.url, children: row.url }),
12599
+ /* @__PURE__ */ jsx38("span", { className: "se-import-asset-row__state", children: mirrorLabel(row.state) }),
12600
+ row.state === "failed" && /* @__PURE__ */ jsx38(
12468
12601
  LSButton,
12469
12602
  {
12470
12603
  type: "button",
@@ -12476,7 +12609,7 @@ function StepMirror({
12476
12609
  label: "Retry"
12477
12610
  }
12478
12611
  ),
12479
- row.error && /* @__PURE__ */ jsx37("span", { className: "se-import-asset-row__error", children: row.error })
12612
+ row.error && /* @__PURE__ */ jsx38("span", { className: "se-import-asset-row__error", children: row.error })
12480
12613
  ] }, row.url)) })
12481
12614
  ] });
12482
12615
  }
@@ -12500,7 +12633,7 @@ function StepReview({
12500
12633
  marketplaceAvailable
12501
12634
  }) {
12502
12635
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--medium"), children: [
12503
- /* @__PURE__ */ jsx37(
12636
+ /* @__PURE__ */ jsx38(
12504
12637
  StepHeader,
12505
12638
  {
12506
12639
  number: 4,
@@ -12510,10 +12643,10 @@ function StepReview({
12510
12643
  ),
12511
12644
  /* @__PURE__ */ jsxs27("div", { className: "se-import-review-card", children: [
12512
12645
  /* @__PURE__ */ jsxs27("div", { children: [
12513
- /* @__PURE__ */ jsx37("div", { className: "se-import-review-card__type", children: item.seWidget.type }),
12514
- /* @__PURE__ */ jsx37("p", { children: item.reason })
12646
+ /* @__PURE__ */ jsx38("div", { className: "se-import-review-card__type", children: item.seWidget.type }),
12647
+ /* @__PURE__ */ jsx38("p", { children: item.reason })
12515
12648
  ] }),
12516
- /* @__PURE__ */ jsx37("div", { className: "se-import-review-card__status", children: item.flaggedOff ? "Auto-import disabled" : item.status })
12649
+ /* @__PURE__ */ jsx38("div", { className: "se-import-review-card__status", children: item.flaggedOff ? "Auto-import disabled" : item.status })
12517
12650
  ] }),
12518
12651
  remainingCount > 1 && /* Bulk-action row — shortcut to wrap up the review step when there are still
12519
12652
  several unactioned widgets and the user doesn't want to walk each one. */
@@ -12522,7 +12655,7 @@ function StepReview({
12522
12655
  remainingCount,
12523
12656
  " remaining"
12524
12657
  ] }),
12525
- /* @__PURE__ */ jsx37(
12658
+ /* @__PURE__ */ jsx38(
12526
12659
  LSButton,
12527
12660
  {
12528
12661
  type: "button",
@@ -12532,7 +12665,7 @@ function StepReview({
12532
12665
  label: "Keep all placeholders"
12533
12666
  }
12534
12667
  ),
12535
- /* @__PURE__ */ jsx37(
12668
+ /* @__PURE__ */ jsx38(
12536
12669
  LSButton,
12537
12670
  {
12538
12671
  type: "button",
@@ -12543,12 +12676,12 @@ function StepReview({
12543
12676
  }
12544
12677
  )
12545
12678
  ] }),
12546
- state === "generating" && /* @__PURE__ */ jsx37("div", { className: "se-import-muted", children: "Generating with AI. This can take 30-90 seconds." }),
12679
+ state === "generating" && /* @__PURE__ */ jsx38("div", { className: "se-import-muted", children: "Generating with AI. This can take 30-90 seconds." }),
12547
12680
  state === "generated" && generated && /* @__PURE__ */ jsxs27("div", { className: "se-import-generated", children: [
12548
- /* @__PURE__ */ jsx37("div", { className: "se-import-generated__title", children: "Preview" }),
12681
+ /* @__PURE__ */ jsx38("div", { className: "se-import-generated__title", children: "Preview" }),
12549
12682
  (() => {
12550
12683
  const landing = getAILandingBounds(item.seWidget, canvas);
12551
- return /* @__PURE__ */ jsx37(
12684
+ return /* @__PURE__ */ jsx38(
12552
12685
  CustomOverlayPreview,
12553
12686
  {
12554
12687
  html: generated.html ?? "",
@@ -12561,8 +12694,8 @@ function StepReview({
12561
12694
  );
12562
12695
  })(),
12563
12696
  /* @__PURE__ */ jsxs27("details", { className: "se-import-code", children: [
12564
- /* @__PURE__ */ jsx37("summary", { children: "Generated code" }),
12565
- /* @__PURE__ */ jsx37("pre", { children: JSON.stringify(
12697
+ /* @__PURE__ */ jsx38("summary", { children: "Generated code" }),
12698
+ /* @__PURE__ */ jsx38("pre", { children: JSON.stringify(
12566
12699
  {
12567
12700
  html: generated.html ?? "",
12568
12701
  css: generated.css ?? "",
@@ -12573,15 +12706,15 @@ function StepReview({
12573
12706
  ) })
12574
12707
  ] })
12575
12708
  ] }),
12576
- error && /* @__PURE__ */ jsx37(ErrorPanel, { message: error }),
12709
+ error && /* @__PURE__ */ jsx38(ErrorPanel, { message: error }),
12577
12710
  /* @__PURE__ */ jsxs27("details", { className: "se-import-code", children: [
12578
- /* @__PURE__ */ jsx37("summary", { children: "Original StreamElements config" }),
12579
- /* @__PURE__ */ jsx37("pre", { children: JSON.stringify(item.seWidget.variables ?? {}, null, 2) })
12711
+ /* @__PURE__ */ jsx38("summary", { children: "Original StreamElements config" }),
12712
+ /* @__PURE__ */ jsx38("pre", { children: JSON.stringify(item.seWidget.variables ?? {}, null, 2) })
12580
12713
  ] }),
12581
- /* @__PURE__ */ jsx37("div", { className: "se-import-actions se-import-actions--inline", children: state === "generated" ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
12582
- /* @__PURE__ */ jsx37(LSButton, { type: "button", color: "secondary", onClick: onRetry, label: "Try again" }),
12583
- /* @__PURE__ */ jsx37(LSButton, { type: "button", color: "secondary", onClick: onSkip, label: "Skip this widget" }),
12584
- /* @__PURE__ */ jsx37(
12714
+ /* @__PURE__ */ jsx38("div", { className: "se-import-actions se-import-actions--inline", children: state === "generated" ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
12715
+ /* @__PURE__ */ jsx38(LSButton, { type: "button", color: "secondary", onClick: onRetry, label: "Try again" }),
12716
+ /* @__PURE__ */ jsx38(LSButton, { type: "button", color: "secondary", onClick: onSkip, label: "Skip this widget" }),
12717
+ /* @__PURE__ */ jsx38(
12585
12718
  LSButton,
12586
12719
  {
12587
12720
  type: "button",
@@ -12591,7 +12724,7 @@ function StepReview({
12591
12724
  }
12592
12725
  )
12593
12726
  ] }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
12594
- !item.flaggedOff && /* @__PURE__ */ jsx37(
12727
+ !item.flaggedOff && /* @__PURE__ */ jsx38(
12595
12728
  LSButton,
12596
12729
  {
12597
12730
  type: "button",
@@ -12601,7 +12734,7 @@ function StepReview({
12601
12734
  label: "Keep placeholder"
12602
12735
  }
12603
12736
  ),
12604
- /* @__PURE__ */ jsx37(
12737
+ /* @__PURE__ */ jsx38(
12605
12738
  LSButton,
12606
12739
  {
12607
12740
  type: "button",
@@ -12611,7 +12744,7 @@ function StepReview({
12611
12744
  label: "Skip"
12612
12745
  }
12613
12746
  ),
12614
- marketplaceAvailable && /* @__PURE__ */ jsx37(
12747
+ marketplaceAvailable && /* @__PURE__ */ jsx38(
12615
12748
  LSButton,
12616
12749
  {
12617
12750
  type: "button",
@@ -12621,7 +12754,7 @@ function StepReview({
12621
12754
  label: "Pick from Marketplace"
12622
12755
  }
12623
12756
  ),
12624
- /* @__PURE__ */ jsx37(
12757
+ /* @__PURE__ */ jsx38(
12625
12758
  LSButton,
12626
12759
  {
12627
12760
  type: "button",
@@ -12632,7 +12765,7 @@ function StepReview({
12632
12765
  }
12633
12766
  )
12634
12767
  ] }) }),
12635
- item.flaggedOff && !marketplaceAvailable && state !== "generated" && /* @__PURE__ */ jsx37("div", { className: "se-import-muted", children: "No curated Marketplace replacement is configured for this widget yet." })
12768
+ item.flaggedOff && !marketplaceAvailable && state !== "generated" && /* @__PURE__ */ jsx38("div", { className: "se-import-muted", children: "No curated Marketplace replacement is configured for this widget yet." })
12636
12769
  ] });
12637
12770
  }
12638
12771
  var CUSTOM_WIDGET_TABS = [
@@ -12658,8 +12791,8 @@ function CustomWidgetCard({ widget }) {
12658
12791
  }, [value]);
12659
12792
  if (tabs.length === 0) return null;
12660
12793
  return /* @__PURE__ */ jsxs27("div", { className: "se-import-cw", children: [
12661
- /* @__PURE__ */ jsx37("div", { className: "se-import-cw__title", children: widget.title }),
12662
- /* @__PURE__ */ jsx37("div", { className: "se-import-cw__tabs", role: "tablist", children: tabs.map(({ key, label }) => /* @__PURE__ */ jsx37(
12794
+ /* @__PURE__ */ jsx38("div", { className: "se-import-cw__title", children: widget.title }),
12795
+ /* @__PURE__ */ jsx38("div", { className: "se-import-cw__tabs", role: "tablist", children: tabs.map(({ key, label }) => /* @__PURE__ */ jsx38(
12663
12796
  "button",
12664
12797
  {
12665
12798
  type: "button",
@@ -12672,17 +12805,17 @@ function CustomWidgetCard({ widget }) {
12672
12805
  key
12673
12806
  )) }),
12674
12807
  /* @__PURE__ */ jsxs27("div", { className: "se-import-cw__body", children: [
12675
- /* @__PURE__ */ jsx37("button", { type: "button", className: "se-import-cw__copy", onClick: handleCopy, children: copied ? "Copied!" : "Copy" }),
12676
- /* @__PURE__ */ jsx37("pre", { className: "se-import-cw__code", children: value })
12808
+ /* @__PURE__ */ jsx38("button", { type: "button", className: "se-import-cw__copy", onClick: handleCopy, children: copied ? "Copied!" : "Copy" }),
12809
+ /* @__PURE__ */ jsx38("pre", { className: "se-import-cw__code", children: value })
12677
12810
  ] })
12678
12811
  ] });
12679
12812
  }
12680
12813
  function CustomWidgetReview({ widgets }) {
12681
12814
  if (widgets.length === 0) return null;
12682
12815
  return /* @__PURE__ */ jsxs27("div", { className: "se-import-cw-review", children: [
12683
- /* @__PURE__ */ jsx37("h3", { children: "Custom widgets" }),
12684
- /* @__PURE__ */ jsx37("p", { className: "se-import-cw-review__hint", children: widgets.length === 1 ? "This overlay includes a custom-code widget. Copy any field and paste it straight into the StreamElements editor \u2014 values are shown exactly as StreamElements stores them, with no escaping." : `This overlay includes ${widgets.length} custom-code widgets. Copy any field and paste it straight into the StreamElements editor \u2014 values are shown exactly as StreamElements stores them, with no escaping.` }),
12685
- widgets.map((widget, index) => /* @__PURE__ */ jsx37(CustomWidgetCard, { widget }, `${widget.title}-${index}`))
12816
+ /* @__PURE__ */ jsx38("h3", { children: "Custom widgets" }),
12817
+ /* @__PURE__ */ jsx38("p", { className: "se-import-cw-review__hint", children: widgets.length === 1 ? "This overlay includes a custom-code widget. Copy any field and paste it straight into the StreamElements editor \u2014 values are shown exactly as StreamElements stores them, with no escaping." : `This overlay includes ${widgets.length} custom-code widgets. Copy any field and paste it straight into the StreamElements editor \u2014 values are shown exactly as StreamElements stores them, with no escaping.` }),
12818
+ widgets.map((widget, index) => /* @__PURE__ */ jsx38(CustomWidgetCard, { widget }, `${widget.title}-${index}`))
12686
12819
  ] });
12687
12820
  }
12688
12821
  function StepConfirm({
@@ -12707,20 +12840,20 @@ function StepConfirm({
12707
12840
  {}
12708
12841
  );
12709
12842
  return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--confirm"), children: [
12710
- /* @__PURE__ */ jsx37(StepHeader, { number: 5, title: "Confirm", subtitle: "Review and confirm your import" }),
12843
+ /* @__PURE__ */ jsx38(StepHeader, { number: 5, title: "Confirm", subtitle: "Review and confirm your import" }),
12711
12844
  /* @__PURE__ */ jsxs27("div", { className: "se-import-overview", children: [
12712
- /* @__PURE__ */ jsx37("h3", { children: "Overview" }),
12713
- /* @__PURE__ */ jsx37(
12845
+ /* @__PURE__ */ jsx38("h3", { children: "Overview" }),
12846
+ /* @__PURE__ */ jsx38(
12714
12847
  Row,
12715
12848
  {
12716
12849
  label: overlayCount > 1 ? "Overlays to create" : "Overlay",
12717
12850
  value: overlayCount > 1 ? `${overlayCount}` : options.name || result.overlay.name
12718
12851
  }
12719
12852
  ),
12720
- /* @__PURE__ */ jsx37(Row, { label: "Layers imported", value: `${layerCount}` }),
12721
- /* @__PURE__ */ jsx37(Row, { label: "Widgets", value: `${widgets}` }),
12722
- /* @__PURE__ */ jsx37(Row, { label: "Alerts", value: `${alertCount}` }),
12723
- /* @__PURE__ */ jsx37(
12853
+ /* @__PURE__ */ jsx38(Row, { label: "Layers imported", value: `${layerCount}` }),
12854
+ /* @__PURE__ */ jsx38(Row, { label: "Widgets", value: `${widgets}` }),
12855
+ /* @__PURE__ */ jsx38(Row, { label: "Alerts", value: `${alertCount}` }),
12856
+ /* @__PURE__ */ jsx38(
12724
12857
  Row,
12725
12858
  {
12726
12859
  label: "Assets to import",
@@ -12728,25 +12861,25 @@ function StepConfirm({
12728
12861
  meta: options.mirrorAssets ? `Mirrored to Lumia storage (${mirrored})` : "Skipped"
12729
12862
  }
12730
12863
  ),
12731
- /* @__PURE__ */ jsx37(
12864
+ /* @__PURE__ */ jsx38(
12732
12865
  Row,
12733
12866
  {
12734
12867
  label: "Import behavior",
12735
12868
  value: options.mirrorAssets ? "Mirror assets and rewrite URLs" : "Keep original asset URLs"
12736
12869
  }
12737
12870
  ),
12738
- reviewBuckets.generated ? /* @__PURE__ */ jsx37(Row, { label: "Generated with AI", value: `${reviewBuckets.generated}` }) : null,
12739
- reviewBuckets.skipped ? /* @__PURE__ */ jsx37(Row, { label: "Skipped", value: `${reviewBuckets.skipped}` }) : null,
12740
- reviewBuckets.kept ? /* @__PURE__ */ jsx37(Row, { label: "Kept as placeholder", value: `${reviewBuckets.kept}` }) : null
12871
+ reviewBuckets.generated ? /* @__PURE__ */ jsx38(Row, { label: "Generated with AI", value: `${reviewBuckets.generated}` }) : null,
12872
+ reviewBuckets.skipped ? /* @__PURE__ */ jsx38(Row, { label: "Skipped", value: `${reviewBuckets.skipped}` }) : null,
12873
+ reviewBuckets.kept ? /* @__PURE__ */ jsx38(Row, { label: "Kept as placeholder", value: `${reviewBuckets.kept}` }) : null
12741
12874
  ] }),
12742
- isAdmin && result.customWidgets && result.customWidgets.length > 0 && /* @__PURE__ */ jsx37(CustomWidgetReview, { widgets: result.customWidgets })
12875
+ isAdmin && result.customWidgets && result.customWidgets.length > 0 && /* @__PURE__ */ jsx38(CustomWidgetReview, { widgets: result.customWidgets })
12743
12876
  ] });
12744
12877
  }
12745
12878
  function Row({ label, value, meta }) {
12746
12879
  return /* @__PURE__ */ jsxs27("div", { className: "se-import-row", children: [
12747
- /* @__PURE__ */ jsx37("span", { children: label }),
12748
- /* @__PURE__ */ jsx37("strong", { children: value }),
12749
- meta && /* @__PURE__ */ jsx37("em", { children: meta })
12880
+ /* @__PURE__ */ jsx38("span", { children: label }),
12881
+ /* @__PURE__ */ jsx38("strong", { children: value }),
12882
+ meta && /* @__PURE__ */ jsx38("em", { children: meta })
12750
12883
  ] });
12751
12884
  }
12752
12885
  function SEImportWizard({
@@ -13639,21 +13772,21 @@ function SEImportWizard({
13639
13772
  return false;
13640
13773
  })();
13641
13774
  const activeIndex = visibleSteps.findIndex((item) => item.key === step);
13642
- return /* @__PURE__ */ jsx37("div", { className: "se-import", children: /* @__PURE__ */ jsxs27("div", { className: "se-import__shell", children: [
13643
- visibleSteps.length > 0 && /* @__PURE__ */ jsx37("header", { className: "se-import__header", children: /* @__PURE__ */ jsx37("div", { className: "se-import-stepper", children: visibleSteps.map((item, index) => /* @__PURE__ */ jsxs27(
13775
+ return /* @__PURE__ */ jsx38("div", { className: "se-import", children: /* @__PURE__ */ jsxs27("div", { className: "se-import__shell", children: [
13776
+ visibleSteps.length > 0 && /* @__PURE__ */ jsx38("header", { className: "se-import__header", children: /* @__PURE__ */ jsx38("div", { className: "se-import-stepper", children: visibleSteps.map((item, index) => /* @__PURE__ */ jsxs27(
13644
13777
  "div",
13645
13778
  {
13646
13779
  className: stepClass(index < activeIndex, index === activeIndex),
13647
13780
  children: [
13648
- /* @__PURE__ */ jsx37("div", { className: "se-import-step__label", children: item.label }),
13649
- /* @__PURE__ */ jsx37("div", { className: "se-import-step__line" }),
13650
- /* @__PURE__ */ jsx37("div", { className: "se-import-step__dot", children: index < activeIndex ? "\u2713" : index + 1 })
13781
+ /* @__PURE__ */ jsx38("div", { className: "se-import-step__label", children: item.label }),
13782
+ /* @__PURE__ */ jsx38("div", { className: "se-import-step__line" }),
13783
+ /* @__PURE__ */ jsx38("div", { className: "se-import-step__dot", children: index < activeIndex ? "\u2713" : index + 1 })
13651
13784
  ]
13652
13785
  },
13653
13786
  item.key
13654
13787
  )) }) }),
13655
13788
  /* @__PURE__ */ jsxs27("main", { className: "se-import__content", children: [
13656
- step === "mode" && /* @__PURE__ */ jsx37(
13789
+ step === "mode" && /* @__PURE__ */ jsx38(
13657
13790
  StepModePicker,
13658
13791
  {
13659
13792
  onChooseJwt: () => {
@@ -13667,7 +13800,7 @@ function SEImportWizard({
13667
13800
  onOpenFullImport: bindings.onOpenFullImport
13668
13801
  }
13669
13802
  ),
13670
- step === "connect" && /* @__PURE__ */ jsx37(
13803
+ step === "connect" && /* @__PURE__ */ jsx38(
13671
13804
  StepConnect,
13672
13805
  {
13673
13806
  jwt,
@@ -13683,7 +13816,7 @@ function SEImportWizard({
13683
13816
  }
13684
13817
  }
13685
13818
  ),
13686
- step === "pick" && /* @__PURE__ */ jsx37(
13819
+ step === "pick" && /* @__PURE__ */ jsx38(
13687
13820
  StepPickOverlay,
13688
13821
  {
13689
13822
  overlays: overlayList,
@@ -13696,7 +13829,7 @@ function SEImportWizard({
13696
13829
  onRetry: () => seClient && void loadOverlayList(seClient)
13697
13830
  }
13698
13831
  ),
13699
- step === "url" && /* @__PURE__ */ jsx37(
13832
+ step === "url" && /* @__PURE__ */ jsx38(
13700
13833
  StepURL,
13701
13834
  {
13702
13835
  url,
@@ -13710,7 +13843,7 @@ function SEImportWizard({
13710
13843
  }
13711
13844
  }
13712
13845
  ),
13713
- step === "discovery" && result && /* @__PURE__ */ jsx37(
13846
+ step === "discovery" && result && /* @__PURE__ */ jsx38(
13714
13847
  StepDiscovery,
13715
13848
  {
13716
13849
  result,
@@ -13718,7 +13851,7 @@ function SEImportWizard({
13718
13851
  overlayCount: Math.max(1, activeOverlaySummaries.length)
13719
13852
  }
13720
13853
  ),
13721
- step === "options" && /* @__PURE__ */ jsx37(
13854
+ step === "options" && /* @__PURE__ */ jsx38(
13722
13855
  StepOptions,
13723
13856
  {
13724
13857
  options,
@@ -13727,8 +13860,8 @@ function SEImportWizard({
13727
13860
  hideName: activeOverlaySummaries.length > 1
13728
13861
  }
13729
13862
  ),
13730
- step === "mirror" && /* @__PURE__ */ jsx37(StepMirror, { rows: mirrorRows, running: mirrorRunning, onRetry: retryMirrorRow }),
13731
- step === "review" && currentItem && result && !marketplacePickerOpen && /* @__PURE__ */ jsx37(
13863
+ step === "mirror" && /* @__PURE__ */ jsx38(StepMirror, { rows: mirrorRows, running: mirrorRunning, onRetry: retryMirrorRow }),
13864
+ step === "review" && currentItem && result && !marketplacePickerOpen && /* @__PURE__ */ jsx38(
13732
13865
  StepReview,
13733
13866
  {
13734
13867
  item: currentItem,
@@ -13755,7 +13888,7 @@ function SEImportWizard({
13755
13888
  marketplaceAvailable: hasMarketplaceCandidates(currentItem.seWidget.type)
13756
13889
  }
13757
13890
  ),
13758
- step === "review" && currentItem && marketplacePickerOpen && /* @__PURE__ */ jsx37("div", { className: panelClass("se-import-panel--wide"), children: /* @__PURE__ */ jsx37(
13891
+ step === "review" && currentItem && marketplacePickerOpen && /* @__PURE__ */ jsx38("div", { className: panelClass("se-import-panel--wide"), children: /* @__PURE__ */ jsx38(
13759
13892
  MarketplacePicker,
13760
13893
  {
13761
13894
  seWidgetType: currentItem.seWidget.type,
@@ -13765,7 +13898,7 @@ function SEImportWizard({
13765
13898
  onCancel: () => setMarketplacePickerOpen(false)
13766
13899
  }
13767
13900
  ) }),
13768
- step === "confirm" && result && /* @__PURE__ */ jsx37(
13901
+ step === "confirm" && result && /* @__PURE__ */ jsx38(
13769
13902
  StepConfirm,
13770
13903
  {
13771
13904
  result,
@@ -13778,7 +13911,7 @@ function SEImportWizard({
13778
13911
  )
13779
13912
  ] }),
13780
13913
  /* @__PURE__ */ jsxs27("footer", { className: "se-import-actions", children: [
13781
- step !== "mode" && /* @__PURE__ */ jsx37(
13914
+ step !== "mode" && /* @__PURE__ */ jsx38(
13782
13915
  LSButton,
13783
13916
  {
13784
13917
  type: "button",
@@ -13789,7 +13922,7 @@ function SEImportWizard({
13789
13922
  label: "Back"
13790
13923
  }
13791
13924
  ),
13792
- step !== "mode" && /* @__PURE__ */ jsx37(
13925
+ step !== "mode" && /* @__PURE__ */ jsx38(
13793
13926
  LSButton,
13794
13927
  {
13795
13928
  type: "button",
@@ -15016,6 +15149,7 @@ export {
15016
15149
  LSRadio,
15017
15150
  LSRadioGroup,
15018
15151
  LSSelect,
15152
+ LSSlider,
15019
15153
  LSSliderInput,
15020
15154
  LSSwitch,
15021
15155
  LSTextField,