@lumiastream/ui 0.8.7 → 0.8.9
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/ChatMessageItem.js +1 -1
- package/dist/ChatboxPanel.js +11 -7
- package/dist/EventList.js +1 -1
- package/dist/EventListItem.js +1 -1
- package/dist/GoalsList.js +1 -1
- package/dist/LSButton.js +1 -1
- package/dist/LSCheckbox.js +1 -1
- package/dist/LSColorPicker.js +1 -1
- package/dist/LSDatePicker.js +1 -1
- package/dist/LSFontPicker.js +1 -1
- package/dist/LSInput.js +1 -1
- package/dist/LSMultiSelect.js +11 -7
- package/dist/LSRadio.js +1 -1
- package/dist/LSSelect.js +11 -7
- package/dist/LSSlider.d.ts +12 -0
- package/dist/LSSlider.js +36 -0
- package/dist/LSSliderInput.d.ts +22 -10
- package/dist/LSSliderInput.js +289 -160
- package/dist/LSSwitch.js +1 -1
- package/dist/LSTextField.js +1 -1
- package/dist/LSVariableInputField.js +61 -33
- package/dist/ModActivityLog.js +1 -1
- package/dist/ModQueueItem.js +1 -1
- package/dist/ModQueueList.js +1 -1
- package/dist/ModalChrome.js +1 -1
- package/dist/PlatformIcon.js +1 -1
- package/dist/ShortcutDockGrid.js +1 -1
- package/dist/SongRequestList.js +1 -1
- package/dist/StreamStatusPanel.js +1 -1
- package/dist/ViewersList.js +1 -1
- package/dist/WidgetChrome.js +1 -1
- package/dist/components.d.ts +3 -1
- package/dist/components.js +718 -556
- package/dist/index.d.ts +3 -1
- package/dist/index.js +900 -738
- package/dist/se-import.js +907 -743
- package/package.json +5 -1
package/dist/se-import.js
CHANGED
|
@@ -5026,11 +5026,48 @@ var LSInput = forwardRef(
|
|
|
5026
5026
|
);
|
|
5027
5027
|
LSInput.displayName = "LSInput";
|
|
5028
5028
|
|
|
5029
|
-
//
|
|
5029
|
+
// #style-inject:#style-inject
|
|
5030
|
+
function styleInject(css, { insertAt } = {}) {
|
|
5031
|
+
if (!css || typeof document === "undefined") return;
|
|
5032
|
+
const head = document.head || document.getElementsByTagName("head")[0];
|
|
5033
|
+
const style = document.createElement("style");
|
|
5034
|
+
style.type = "text/css";
|
|
5035
|
+
if (insertAt === "top") {
|
|
5036
|
+
if (head.firstChild) {
|
|
5037
|
+
head.insertBefore(style, head.firstChild);
|
|
5038
|
+
} else {
|
|
5039
|
+
head.appendChild(style);
|
|
5040
|
+
}
|
|
5041
|
+
} else {
|
|
5042
|
+
head.appendChild(style);
|
|
5043
|
+
}
|
|
5044
|
+
if (style.styleSheet) {
|
|
5045
|
+
style.styleSheet.cssText = css;
|
|
5046
|
+
} else {
|
|
5047
|
+
style.appendChild(document.createTextNode(css));
|
|
5048
|
+
}
|
|
5049
|
+
}
|
|
5050
|
+
|
|
5051
|
+
// src/lumia-ui.css
|
|
5052
|
+
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 overflow-wrap: anywhere;\n pointer-events: none;\n white-space: pre-line;\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");
|
|
5053
|
+
|
|
5054
|
+
// src/components/LSSlider/LSSlider.tsx
|
|
5030
5055
|
import Slider from "@mui/material/Slider";
|
|
5031
|
-
import
|
|
5032
|
-
|
|
5033
|
-
|
|
5056
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
5057
|
+
var LSSlider = ({ color, sx, ...props }) => {
|
|
5058
|
+
const validColor = color && ["primary", "secondary", "error", "info", "success", "warning"].includes(color) ? color : void 0;
|
|
5059
|
+
const resolvedSx = [{ color: "var(--white, #fff)" }, ...Array.isArray(sx) ? sx : sx ? [sx] : []];
|
|
5060
|
+
return /* @__PURE__ */ jsx3(Slider, { ...props, color: validColor, sx: resolvedSx });
|
|
5061
|
+
};
|
|
5062
|
+
|
|
5063
|
+
// src/components/LSSliderInput/LSSliderInput.tsx
|
|
5064
|
+
import FormControl2 from "@mui/material/FormControl";
|
|
5065
|
+
import FormHelperText from "@mui/material/FormHelperText";
|
|
5066
|
+
import InputLabel from "@mui/material/InputLabel";
|
|
5067
|
+
import OutlinedInput from "@mui/material/OutlinedInput";
|
|
5068
|
+
import Tooltip from "@mui/material/Tooltip";
|
|
5069
|
+
import { forwardRef as forwardRef2, useCallback, useEffect, useMemo, useState } from "react";
|
|
5070
|
+
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
5034
5071
|
var normalizeSliderValue = (rawValue) => {
|
|
5035
5072
|
if (typeof rawValue === "number") {
|
|
5036
5073
|
return Number.isFinite(rawValue) ? rawValue : 0;
|
|
@@ -5045,173 +5082,290 @@ var normalizeSliderValue = (rawValue) => {
|
|
|
5045
5082
|
}
|
|
5046
5083
|
return 0;
|
|
5047
5084
|
};
|
|
5048
|
-
var
|
|
5049
|
-
|
|
5050
|
-
|
|
5051
|
-
|
|
5052
|
-
|
|
5053
|
-
|
|
5054
|
-
|
|
5055
|
-
|
|
5056
|
-
|
|
5057
|
-
|
|
5058
|
-
|
|
5059
|
-
|
|
5060
|
-
|
|
5061
|
-
|
|
5062
|
-
|
|
5063
|
-
|
|
5064
|
-
|
|
5065
|
-
|
|
5066
|
-
|
|
5067
|
-
|
|
5068
|
-
|
|
5069
|
-
|
|
5070
|
-
|
|
5071
|
-
|
|
5072
|
-
|
|
5073
|
-
|
|
5074
|
-
|
|
5075
|
-
|
|
5076
|
-
|
|
5077
|
-
|
|
5078
|
-
|
|
5079
|
-
|
|
5080
|
-
|
|
5081
|
-
|
|
5082
|
-
|
|
5083
|
-
|
|
5084
|
-
|
|
5085
|
-
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
|
|
5089
|
-
|
|
5090
|
-
|
|
5091
|
-
|
|
5092
|
-
|
|
5093
|
-
|
|
5094
|
-
|
|
5095
|
-
|
|
5096
|
-
|
|
5097
|
-
|
|
5098
|
-
|
|
5099
|
-
|
|
5100
|
-
|
|
5101
|
-
|
|
5102
|
-
|
|
5103
|
-
|
|
5104
|
-
|
|
5105
|
-
|
|
5106
|
-
|
|
5107
|
-
|
|
5108
|
-
|
|
5109
|
-
|
|
5110
|
-
|
|
5111
|
-
|
|
5112
|
-
|
|
5113
|
-
|
|
5114
|
-
|
|
5115
|
-
|
|
5116
|
-
if (inputValue === "" || inputValue === null) {
|
|
5117
|
-
if (typeof onChange === "function") {
|
|
5118
|
-
onChange(void 0);
|
|
5085
|
+
var getDecimalPlaces = (stepValue) => {
|
|
5086
|
+
if (!stepValue || stepValue >= 1) {
|
|
5087
|
+
return 0;
|
|
5088
|
+
}
|
|
5089
|
+
const stepString = stepValue.toString();
|
|
5090
|
+
const decimalIndex = stepString.indexOf(".");
|
|
5091
|
+
return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
|
|
5092
|
+
};
|
|
5093
|
+
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(
|
|
5094
|
+
"path",
|
|
5095
|
+
{
|
|
5096
|
+
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",
|
|
5097
|
+
fill: "currentColor"
|
|
5098
|
+
}
|
|
5099
|
+
) });
|
|
5100
|
+
var SliderInputContent = forwardRef2(
|
|
5101
|
+
({ className, children, ownerState, inputRef, value, defaultValue, ...props }, ref) => {
|
|
5102
|
+
const resolvedRef = ref ?? inputRef;
|
|
5103
|
+
return /* @__PURE__ */ jsx4("div", { ...props, ref: resolvedRef, className: `${className ?? ""} mui-ls-slider-input-content`.trim(), role: "group", children });
|
|
5104
|
+
}
|
|
5105
|
+
);
|
|
5106
|
+
SliderInputContent.displayName = "SliderInputContent";
|
|
5107
|
+
var LSSliderInput = forwardRef2(
|
|
5108
|
+
({
|
|
5109
|
+
name,
|
|
5110
|
+
value,
|
|
5111
|
+
defaultValue,
|
|
5112
|
+
isFloat,
|
|
5113
|
+
isMiliseconds,
|
|
5114
|
+
isFloatMiliseconds,
|
|
5115
|
+
label,
|
|
5116
|
+
helperText,
|
|
5117
|
+
info,
|
|
5118
|
+
hasInfo,
|
|
5119
|
+
infoOpen,
|
|
5120
|
+
infoClose,
|
|
5121
|
+
max = Number.MAX_SAFE_INTEGER,
|
|
5122
|
+
min = 0,
|
|
5123
|
+
sliderMin,
|
|
5124
|
+
sliderMax,
|
|
5125
|
+
step = 1,
|
|
5126
|
+
allowAnyDecimal,
|
|
5127
|
+
type = "number",
|
|
5128
|
+
inputAfterText,
|
|
5129
|
+
endAdornment,
|
|
5130
|
+
onChange,
|
|
5131
|
+
sliderProps = {},
|
|
5132
|
+
inputProps = {},
|
|
5133
|
+
color,
|
|
5134
|
+
startIcon,
|
|
5135
|
+
endIcon,
|
|
5136
|
+
inPopout,
|
|
5137
|
+
hideInput = false,
|
|
5138
|
+
hideSlider = false,
|
|
5139
|
+
fullWidth = false,
|
|
5140
|
+
valueLabelDisplay = "auto",
|
|
5141
|
+
valueLabelFormat,
|
|
5142
|
+
...rest
|
|
5143
|
+
}, ref) => {
|
|
5144
|
+
const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
|
|
5145
|
+
const rangeUnit = typeof (endAdornment ?? inputAfterText) === "string" && String(endAdornment ?? inputAfterText).trim().length ? ` ${endAdornment ?? inputAfterText}` : "";
|
|
5146
|
+
const actualSliderMin = sliderMin ?? min;
|
|
5147
|
+
const actualSliderMax = sliderMax ?? max;
|
|
5148
|
+
const actualToDisplay = useCallback(
|
|
5149
|
+
(input) => {
|
|
5150
|
+
const numericValue = normalizeSliderValue(input);
|
|
5151
|
+
if (allowAnyDecimal) {
|
|
5152
|
+
return numericValue;
|
|
5119
5153
|
}
|
|
5120
|
-
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
|
|
5128
|
-
|
|
5129
|
-
|
|
5130
|
-
|
|
5131
|
-
|
|
5132
|
-
|
|
5154
|
+
if (isFloatMiliseconds) {
|
|
5155
|
+
const decimalPlaces2 = getDecimalPlaces(step);
|
|
5156
|
+
return Number((numericValue / 1e3).toFixed(Math.max(1, decimalPlaces2)));
|
|
5157
|
+
}
|
|
5158
|
+
const decimalPlaces = getDecimalPlaces(step);
|
|
5159
|
+
if (decimalPlaces > 0) {
|
|
5160
|
+
return Number(numericValue.toFixed(decimalPlaces));
|
|
5161
|
+
}
|
|
5162
|
+
return isValueFloat ? Number(numericValue.toFixed(1)) : numericValue;
|
|
5163
|
+
},
|
|
5164
|
+
[allowAnyDecimal, isFloatMiliseconds, isValueFloat, step]
|
|
5165
|
+
);
|
|
5166
|
+
const resolvedDefaultValue = defaultValue ?? 0;
|
|
5167
|
+
const [actualValue, setActualValue] = useState(() => normalizeSliderValue(value ?? resolvedDefaultValue));
|
|
5168
|
+
const [displayValue, setDisplayValue] = useState(() => actualToDisplay(value ?? resolvedDefaultValue));
|
|
5169
|
+
const [rangeError, setRangeError] = useState(null);
|
|
5170
|
+
const displayStep = useMemo(() => actualToDisplay(step), [actualToDisplay, step]);
|
|
5171
|
+
const displayMaximum = useMemo(() => actualToDisplay(max), [actualToDisplay, max]);
|
|
5172
|
+
const displayMinimum = useMemo(() => actualToDisplay(min), [actualToDisplay, min]);
|
|
5173
|
+
const inputStep = allowAnyDecimal ? "any" : displayStep;
|
|
5174
|
+
const sliderColor = color === "secondary" ? "secondary" : "primary";
|
|
5175
|
+
useEffect(() => {
|
|
5176
|
+
if (value !== void 0) {
|
|
5177
|
+
const normalizedValue = normalizeSliderValue(value);
|
|
5178
|
+
setActualValue(normalizedValue);
|
|
5179
|
+
setDisplayValue(actualToDisplay(normalizedValue));
|
|
5180
|
+
setRangeError(null);
|
|
5133
5181
|
}
|
|
5134
|
-
},
|
|
5135
|
-
|
|
5136
|
-
|
|
5137
|
-
|
|
5138
|
-
|
|
5139
|
-
|
|
5140
|
-
|
|
5141
|
-
|
|
5142
|
-
|
|
5182
|
+
}, [actualToDisplay, value]);
|
|
5183
|
+
const buildRangeError = useCallback(
|
|
5184
|
+
(updatedValue) => {
|
|
5185
|
+
if (Number.isNaN(updatedValue)) {
|
|
5186
|
+
return null;
|
|
5187
|
+
}
|
|
5188
|
+
if (updatedValue < min) {
|
|
5189
|
+
return `Min ${displayMinimum}${rangeUnit}`;
|
|
5190
|
+
}
|
|
5191
|
+
if (updatedValue > max) {
|
|
5192
|
+
return `Max ${displayMaximum}${rangeUnit}`;
|
|
5193
|
+
}
|
|
5194
|
+
return null;
|
|
5195
|
+
},
|
|
5196
|
+
[displayMaximum, displayMinimum, max, min, rangeUnit]
|
|
5197
|
+
);
|
|
5198
|
+
const handleInputChange = useCallback(
|
|
5199
|
+
(event, nextValue) => {
|
|
5200
|
+
const inputValue = nextValue ?? event?.target?.value ?? "";
|
|
5201
|
+
setDisplayValue(inputValue);
|
|
5202
|
+
if (inputValue === "" || inputValue === null || inputValue === void 0) {
|
|
5203
|
+
setRangeError(null);
|
|
5204
|
+
return;
|
|
5205
|
+
}
|
|
5206
|
+
const rawValue = Number(inputValue);
|
|
5207
|
+
if (Number.isNaN(rawValue)) {
|
|
5208
|
+
setRangeError(null);
|
|
5209
|
+
return;
|
|
5210
|
+
}
|
|
5211
|
+
const updatedValue = Number(isFloatMiliseconds ? rawValue * 1e3 : rawValue);
|
|
5212
|
+
const nextRangeError = buildRangeError(updatedValue);
|
|
5213
|
+
setRangeError(nextRangeError);
|
|
5214
|
+
if (!nextRangeError) {
|
|
5215
|
+
setActualValue(updatedValue);
|
|
5216
|
+
onChange?.(updatedValue);
|
|
5217
|
+
}
|
|
5218
|
+
},
|
|
5219
|
+
[buildRangeError, isFloatMiliseconds, onChange]
|
|
5220
|
+
);
|
|
5221
|
+
const handleSliderChanging = useCallback((_, sliderInputValue) => {
|
|
5222
|
+
const nextValue = normalizeSliderValue(Array.isArray(sliderInputValue) ? sliderInputValue[0] : sliderInputValue);
|
|
5223
|
+
setActualValue(nextValue);
|
|
5224
|
+
setDisplayValue(actualToDisplay(nextValue));
|
|
5225
|
+
setRangeError(null);
|
|
5226
|
+
}, [actualToDisplay]);
|
|
5227
|
+
const handleSliderChanged = useCallback((_, sliderInputValue) => {
|
|
5228
|
+
const nextValue = normalizeSliderValue(Array.isArray(sliderInputValue) ? sliderInputValue[0] : sliderInputValue ?? actualValue);
|
|
5229
|
+
setActualValue(nextValue);
|
|
5230
|
+
setDisplayValue(actualToDisplay(nextValue));
|
|
5231
|
+
setRangeError(null);
|
|
5143
5232
|
onChange?.(nextValue);
|
|
5144
|
-
},
|
|
5145
|
-
|
|
5146
|
-
|
|
5147
|
-
|
|
5148
|
-
|
|
5149
|
-
|
|
5150
|
-
|
|
5151
|
-
|
|
5152
|
-
|
|
5153
|
-
|
|
5154
|
-
|
|
5155
|
-
|
|
5156
|
-
|
|
5157
|
-
|
|
5158
|
-
|
|
5159
|
-
|
|
5160
|
-
|
|
5161
|
-
|
|
5162
|
-
|
|
5163
|
-
|
|
5164
|
-
|
|
5165
|
-
|
|
5166
|
-
|
|
5167
|
-
|
|
5168
|
-
|
|
5169
|
-
|
|
5170
|
-
|
|
5171
|
-
|
|
5172
|
-
|
|
5173
|
-
|
|
5174
|
-
|
|
5175
|
-
|
|
5176
|
-
|
|
5177
|
-
|
|
5178
|
-
|
|
5179
|
-
|
|
5180
|
-
|
|
5181
|
-
|
|
5182
|
-
|
|
5183
|
-
|
|
5184
|
-
|
|
5185
|
-
|
|
5186
|
-
|
|
5187
|
-
|
|
5233
|
+
}, [actualToDisplay, actualValue, onChange]);
|
|
5234
|
+
const sliderProgress = useMemo(() => {
|
|
5235
|
+
const range = actualSliderMax - actualSliderMin;
|
|
5236
|
+
if (!Number.isFinite(range) || range <= 0) {
|
|
5237
|
+
return 0;
|
|
5238
|
+
}
|
|
5239
|
+
return Math.min(100, Math.max(0, (actualValue - actualSliderMin) / range * 100));
|
|
5240
|
+
}, [actualSliderMax, actualSliderMin, actualValue]);
|
|
5241
|
+
const resolvedHelperText = rangeError ? void 0 : inputProps?.helperText;
|
|
5242
|
+
const resolvedError = rangeError ? true : inputProps?.error;
|
|
5243
|
+
const { sx: sliderSx, className: sliderClassName, style: sliderStyle, disabled: sliderDisabled, ...sliderRestProps } = sliderProps;
|
|
5244
|
+
const resolvedSliderSx = [
|
|
5245
|
+
{ flex: 1, minWidth: 0, color: "var(--white, #fff)" },
|
|
5246
|
+
...Array.isArray(sliderSx) ? sliderSx : sliderSx ? [sliderSx] : []
|
|
5247
|
+
];
|
|
5248
|
+
const inputValueClassName = `${inputProps?.className ?? ""} ls-slider-value-input mui-ls-slider-input-value`.trim();
|
|
5249
|
+
const htmlInputProps = {
|
|
5250
|
+
...inputProps?.slotProps?.htmlInput ?? {},
|
|
5251
|
+
...inputProps?.inputProps ?? {},
|
|
5252
|
+
name,
|
|
5253
|
+
min: displayMinimum,
|
|
5254
|
+
max: displayMaximum,
|
|
5255
|
+
step: inputStep,
|
|
5256
|
+
inputMode: typeof inputStep === "number" && inputStep % 1 !== 0 ? "decimal" : "numeric"
|
|
5257
|
+
};
|
|
5258
|
+
const showInfoIcon = Boolean(info || hasInfo);
|
|
5259
|
+
const labelId = label && name ? `${name}-slider-label` : void 0;
|
|
5260
|
+
const sliderInputId = name ? `${name}-slider-input` : void 0;
|
|
5261
|
+
const sliderControls = /* @__PURE__ */ jsxs("div", { className: `mui-ls-slider-input-style ${hideSlider ? "mui-ls-slider-input-style--input-only" : ""} ${label ? "noMargin" : ""}`, children: [
|
|
5262
|
+
!hideSlider && /* @__PURE__ */ jsxs(
|
|
5263
|
+
"div",
|
|
5264
|
+
{
|
|
5265
|
+
className: [
|
|
5266
|
+
"mui-ls-slider-input-track",
|
|
5267
|
+
inPopout ? "mui-ls-slider-input-track--popout" : "",
|
|
5268
|
+
startIcon ? "mui-ls-slider-input-track--start-icon" : "",
|
|
5269
|
+
endIcon ? "mui-ls-slider-input-track--end-icon" : ""
|
|
5270
|
+
].filter(Boolean).join(" "),
|
|
5271
|
+
children: [
|
|
5272
|
+
startIcon && /* @__PURE__ */ jsx4("span", { className: "ls-slider-input-icon", children: startIcon }),
|
|
5273
|
+
inPopout ? /* @__PURE__ */ jsx4(
|
|
5274
|
+
"input",
|
|
5275
|
+
{
|
|
5276
|
+
className: `ls-custom-range-input ${sliderClassName ?? ""}`.trim(),
|
|
5277
|
+
style: {
|
|
5278
|
+
background: `linear-gradient(to right, var(--white, #fff) ${sliderProgress}%, var(--white50, rgba(255, 255, 255, 0.5)) ${sliderProgress}%)`,
|
|
5279
|
+
padding: 0,
|
|
5280
|
+
maxWidth: "70px",
|
|
5281
|
+
marginRight: 0,
|
|
5282
|
+
...sliderStyle
|
|
5283
|
+
},
|
|
5284
|
+
type: "range",
|
|
5285
|
+
name,
|
|
5286
|
+
value: String(actualValue),
|
|
5287
|
+
min: actualSliderMin,
|
|
5288
|
+
max: actualSliderMax,
|
|
5289
|
+
step,
|
|
5290
|
+
disabled: sliderDisabled,
|
|
5291
|
+
onChange: ({ target: { value: nextSliderValue } }) => {
|
|
5292
|
+
handleSliderChanging({}, Number(nextSliderValue));
|
|
5293
|
+
},
|
|
5294
|
+
onMouseUp: () => handleSliderChanged({}),
|
|
5295
|
+
onTouchEnd: () => handleSliderChanged({})
|
|
5188
5296
|
}
|
|
5189
|
-
|
|
5190
|
-
|
|
5191
|
-
|
|
5192
|
-
|
|
5193
|
-
|
|
5194
|
-
|
|
5297
|
+
) : /* @__PURE__ */ jsx4(
|
|
5298
|
+
LSSlider,
|
|
5299
|
+
{
|
|
5300
|
+
...sliderRestProps,
|
|
5301
|
+
name,
|
|
5302
|
+
color: sliderColor,
|
|
5303
|
+
value: actualValue,
|
|
5304
|
+
step,
|
|
5305
|
+
min: actualSliderMin,
|
|
5306
|
+
max: actualSliderMax,
|
|
5307
|
+
valueLabelDisplay,
|
|
5308
|
+
valueLabelFormat: (sliderValue) => valueLabelFormat?.(sliderValue) ?? `${sliderValue}${endAdornment ?? inputAfterText ?? ""}`,
|
|
5309
|
+
onChange: handleSliderChanging,
|
|
5310
|
+
onChangeCommitted: handleSliderChanged,
|
|
5311
|
+
sx: resolvedSliderSx
|
|
5312
|
+
}
|
|
5313
|
+
),
|
|
5314
|
+
endIcon && /* @__PURE__ */ jsx4("span", { className: "ls-slider-input-icon", children: endIcon })
|
|
5315
|
+
]
|
|
5316
|
+
}
|
|
5317
|
+
),
|
|
5318
|
+
!hideInput && /* @__PURE__ */ jsx4(
|
|
5319
|
+
LSInput,
|
|
5320
|
+
{
|
|
5321
|
+
...rest,
|
|
5322
|
+
...inputProps,
|
|
5323
|
+
type,
|
|
5324
|
+
name,
|
|
5325
|
+
color,
|
|
5326
|
+
size: "small",
|
|
5327
|
+
onChange: handleInputChange,
|
|
5328
|
+
className: hideSlider ? inputProps?.className : inputValueClassName,
|
|
5329
|
+
value: displayValue,
|
|
5330
|
+
error: resolvedError,
|
|
5331
|
+
helperText: resolvedHelperText,
|
|
5332
|
+
fullWidth: hideSlider ? fullWidth : false,
|
|
5333
|
+
inputRef: ref,
|
|
5334
|
+
slotProps: {
|
|
5335
|
+
...inputProps?.slotProps ?? {},
|
|
5336
|
+
htmlInput: htmlInputProps
|
|
5195
5337
|
}
|
|
5196
|
-
|
|
5197
|
-
|
|
5198
|
-
|
|
5199
|
-
|
|
5200
|
-
|
|
5201
|
-
|
|
5202
|
-
|
|
5203
|
-
|
|
5204
|
-
|
|
5205
|
-
|
|
5206
|
-
|
|
5207
|
-
|
|
5338
|
+
}
|
|
5339
|
+
),
|
|
5340
|
+
!hideInput && (endAdornment ?? inputAfterText) && /* @__PURE__ */ jsx4("div", { className: "mui-ls-slider-input-adornment", children: endAdornment ?? inputAfterText })
|
|
5341
|
+
] });
|
|
5342
|
+
return /* @__PURE__ */ jsxs(FormControl2, { variant: "outlined", className: "mui-ls-slider-input-root", fullWidth: true, error: Boolean(rangeError), children: [
|
|
5343
|
+
label && /* @__PURE__ */ jsxs(InputLabel, { shrink: true, id: labelId, htmlFor: sliderInputId, children: [
|
|
5344
|
+
label,
|
|
5345
|
+
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, {}) }) })
|
|
5346
|
+
] }),
|
|
5347
|
+
/* @__PURE__ */ jsx4(
|
|
5348
|
+
OutlinedInput,
|
|
5349
|
+
{
|
|
5350
|
+
id: sliderInputId,
|
|
5351
|
+
label,
|
|
5352
|
+
notched: Boolean(label),
|
|
5353
|
+
className: "mui-ls-slider-input-control",
|
|
5354
|
+
inputComponent: SliderInputContent,
|
|
5355
|
+
inputProps: { children: sliderControls }
|
|
5356
|
+
}
|
|
5357
|
+
),
|
|
5358
|
+
(helperText || rangeError) && /* @__PURE__ */ jsx4(FormHelperText, { className: "mui-ls-slider-input-helper", children: rangeError ?? helperText })
|
|
5359
|
+
] });
|
|
5360
|
+
}
|
|
5361
|
+
);
|
|
5208
5362
|
LSSliderInput.displayName = "LSSliderInput";
|
|
5209
5363
|
|
|
5210
5364
|
// src/components/LSSwitch/LSSwitch.tsx
|
|
5211
5365
|
import MatSwitch from "@mui/material/Switch";
|
|
5212
|
-
import { forwardRef as
|
|
5213
|
-
import { jsx as
|
|
5214
|
-
var LSSwitch =
|
|
5366
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
5367
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
5368
|
+
var LSSwitch = forwardRef3(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx5(
|
|
5215
5369
|
MatSwitch,
|
|
5216
5370
|
{
|
|
5217
5371
|
sx: {
|
|
@@ -5232,20 +5386,20 @@ var LSSwitch = forwardRef2(({ slotProps, ...rest }, ref) => /* @__PURE__ */ jsx4
|
|
|
5232
5386
|
LSSwitch.displayName = "LSSwitch";
|
|
5233
5387
|
|
|
5234
5388
|
// src/components/LSSelect/LSSelect.tsx
|
|
5235
|
-
import
|
|
5236
|
-
import
|
|
5389
|
+
import FormControl3 from "@mui/material/FormControl";
|
|
5390
|
+
import InputLabel2 from "@mui/material/InputLabel";
|
|
5237
5391
|
import Select from "@mui/material/Select";
|
|
5238
|
-
import
|
|
5239
|
-
import { forwardRef as
|
|
5240
|
-
import { jsx as
|
|
5241
|
-
var
|
|
5392
|
+
import Tooltip2 from "@mui/material/Tooltip";
|
|
5393
|
+
import { forwardRef as forwardRef4 } from "react";
|
|
5394
|
+
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
5395
|
+
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(
|
|
5242
5396
|
"path",
|
|
5243
5397
|
{
|
|
5244
5398
|
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",
|
|
5245
5399
|
fill: "#CAC9D5"
|
|
5246
5400
|
}
|
|
5247
5401
|
) });
|
|
5248
|
-
var LSSelect =
|
|
5402
|
+
var LSSelect = forwardRef4(({ className = "", style, ...props }, ref) => {
|
|
5249
5403
|
const {
|
|
5250
5404
|
placeholder,
|
|
5251
5405
|
info,
|
|
@@ -5263,7 +5417,7 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
|
|
|
5263
5417
|
const value = rest.multiple === true ? Array.isArray(rest.value) ? rest.value : rest.value === void 0 || rest.value === null || rest.value === "" ? [] : [rest.value] : rest.value ?? "";
|
|
5264
5418
|
const renderValue = renderValueProp ?? (placeholderText ? (selected) => {
|
|
5265
5419
|
if (selected === "" || Array.isArray(selected) && selected.length === 0) {
|
|
5266
|
-
return /* @__PURE__ */
|
|
5420
|
+
return /* @__PURE__ */ jsx6("span", { style: { color: "var(--neutralLight3, var(--grey, #9392a1))" }, children: placeholderText });
|
|
5267
5421
|
}
|
|
5268
5422
|
return Array.isArray(selected) ? selected.join(", ") : selected;
|
|
5269
5423
|
} : void 0);
|
|
@@ -5290,6 +5444,16 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
|
|
|
5290
5444
|
"& .MuiMenuItem-root": {
|
|
5291
5445
|
color: "var(--neutralLight1, var(--white, #fff))"
|
|
5292
5446
|
},
|
|
5447
|
+
"& .MuiMenuItem-root:hover, & .MuiMenuItem-root.Mui-focusVisible": {
|
|
5448
|
+
backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 14%, transparent) !important"
|
|
5449
|
+
},
|
|
5450
|
+
"& .MuiMenuItem-root.Mui-selected": {
|
|
5451
|
+
backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 24%, transparent) !important",
|
|
5452
|
+
color: "var(--neutralLight1, var(--white, #fff)) !important"
|
|
5453
|
+
},
|
|
5454
|
+
"& .MuiMenuItem-root.Mui-selected:hover, & .MuiMenuItem-root.Mui-selected.Mui-focusVisible": {
|
|
5455
|
+
backgroundColor: "color-mix(in srgb, var(--primary, #ff4076) 30%, transparent) !important"
|
|
5456
|
+
},
|
|
5293
5457
|
...MenuProps?.slotProps?.paper?.sx
|
|
5294
5458
|
}
|
|
5295
5459
|
},
|
|
@@ -5304,24 +5468,18 @@ var LSSelect = forwardRef3(({ className = "", style, ...props }, ref) => {
|
|
|
5304
5468
|
}
|
|
5305
5469
|
};
|
|
5306
5470
|
return /* @__PURE__ */ jsxs2(
|
|
5307
|
-
|
|
5471
|
+
FormControl3,
|
|
5308
5472
|
{
|
|
5309
5473
|
variant: "outlined",
|
|
5310
5474
|
className: `${className} mui-ls-select-form-control`,
|
|
5311
|
-
sx: {
|
|
5312
|
-
marginBottom: ".3rem",
|
|
5313
|
-
marginTop: ".5rem",
|
|
5314
|
-
minWidth: "100px",
|
|
5315
|
-
width: "100%"
|
|
5316
|
-
},
|
|
5317
5475
|
size: rest.size,
|
|
5318
5476
|
style,
|
|
5319
5477
|
children: [
|
|
5320
|
-
props.label && /* @__PURE__ */ jsxs2(
|
|
5478
|
+
props.label && /* @__PURE__ */ jsxs2(InputLabel2, { shrink: true, id: labelId, children: [
|
|
5321
5479
|
props.label,
|
|
5322
|
-
info && /* @__PURE__ */
|
|
5480
|
+
info && /* @__PURE__ */ jsx6(Tooltip2, { title: info, placement: "right", children: /* @__PURE__ */ jsx6("span", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: /* @__PURE__ */ jsx6(InfoIcon2, {}) }) })
|
|
5323
5481
|
] }),
|
|
5324
|
-
/* @__PURE__ */
|
|
5482
|
+
/* @__PURE__ */ jsx6(
|
|
5325
5483
|
Select,
|
|
5326
5484
|
{
|
|
5327
5485
|
MenuProps: mergedMenuProps,
|
|
@@ -5350,18 +5508,18 @@ import { default as default3 } from "@mui/material/ListSubheader";
|
|
|
5350
5508
|
// src/components/LSCheckbox/LSCheckbox.tsx
|
|
5351
5509
|
import Checkbox from "@mui/material/Checkbox";
|
|
5352
5510
|
import FormControlLabel from "@mui/material/FormControlLabel";
|
|
5353
|
-
import { forwardRef as
|
|
5511
|
+
import { forwardRef as forwardRef5 } from "react";
|
|
5354
5512
|
import { useController, useFormContext } from "react-hook-form";
|
|
5355
|
-
import
|
|
5356
|
-
import { Fragment, jsx as
|
|
5357
|
-
var LSCheckbox =
|
|
5513
|
+
import classNames3 from "classnames";
|
|
5514
|
+
import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
|
|
5515
|
+
var LSCheckbox = forwardRef5(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
|
|
5358
5516
|
const CheckboxComponent = Checkbox;
|
|
5359
|
-
return /* @__PURE__ */
|
|
5517
|
+
return /* @__PURE__ */ jsx7(
|
|
5360
5518
|
CheckboxComponent,
|
|
5361
5519
|
{
|
|
5362
5520
|
...props,
|
|
5363
5521
|
checked: checked ?? false,
|
|
5364
|
-
className:
|
|
5522
|
+
className: classNames3("ls-checkbox", className, { "Mui-disabled": props.disabled }),
|
|
5365
5523
|
ref,
|
|
5366
5524
|
slotProps: {
|
|
5367
5525
|
...slotProps ?? {},
|
|
@@ -5378,11 +5536,11 @@ LSCheckbox.displayName = "LSCheckbox";
|
|
|
5378
5536
|
// src/components/LSColorPicker/LSColorPicker.tsx
|
|
5379
5537
|
import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
|
|
5380
5538
|
import GradientColorPicker from "react-best-gradient-color-picker";
|
|
5381
|
-
import { jsx as
|
|
5539
|
+
import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
5382
5540
|
|
|
5383
5541
|
// src/components/LSDatePicker/LSDatePicker.tsx
|
|
5384
|
-
import { forwardRef as
|
|
5385
|
-
import { jsx as
|
|
5542
|
+
import { forwardRef as forwardRef6 } from "react";
|
|
5543
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
5386
5544
|
var toDateTimeLocalValue = (value) => {
|
|
5387
5545
|
if (!value) return "";
|
|
5388
5546
|
const date = new Date(value);
|
|
@@ -5394,7 +5552,7 @@ var fromDateTimeLocalValue = (value) => {
|
|
|
5394
5552
|
if (!value) return "";
|
|
5395
5553
|
return new Date(value).toISOString();
|
|
5396
5554
|
};
|
|
5397
|
-
var LSDatePicker =
|
|
5555
|
+
var LSDatePicker = forwardRef6(
|
|
5398
5556
|
({ value, onChange, onChangeStart, onChangeEnd, className, ...rest }, ref) => {
|
|
5399
5557
|
const handleChange = (event) => {
|
|
5400
5558
|
const nextValue = fromDateTimeLocalValue(event.target.value);
|
|
@@ -5402,7 +5560,7 @@ var LSDatePicker = forwardRef5(
|
|
|
5402
5560
|
onChange?.(event, nextValue);
|
|
5403
5561
|
onChangeEnd?.(event, nextValue);
|
|
5404
5562
|
};
|
|
5405
|
-
return /* @__PURE__ */
|
|
5563
|
+
return /* @__PURE__ */ jsx9(
|
|
5406
5564
|
LSInput,
|
|
5407
5565
|
{
|
|
5408
5566
|
...rest,
|
|
@@ -5422,7 +5580,7 @@ import { KeyboardArrowDown } from "@mui/icons-material";
|
|
|
5422
5580
|
import Autocomplete from "@mui/material/Autocomplete";
|
|
5423
5581
|
import TextField2 from "@mui/material/TextField";
|
|
5424
5582
|
import { memo, startTransition, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
|
|
5425
|
-
import { jsx as
|
|
5583
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
5426
5584
|
var LSFontPicker = memo(function LSFontPicker2({
|
|
5427
5585
|
value,
|
|
5428
5586
|
onChange,
|
|
@@ -5466,7 +5624,7 @@ var LSFontPicker = memo(function LSFontPicker2({
|
|
|
5466
5624
|
onLoadFontsRef.current?.([nextValue]);
|
|
5467
5625
|
});
|
|
5468
5626
|
};
|
|
5469
|
-
return /* @__PURE__ */
|
|
5627
|
+
return /* @__PURE__ */ jsx10("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx10(
|
|
5470
5628
|
AutocompleteComponent,
|
|
5471
5629
|
{
|
|
5472
5630
|
freeSolo: true,
|
|
@@ -5476,7 +5634,7 @@ var LSFontPicker = memo(function LSFontPicker2({
|
|
|
5476
5634
|
options: combinedFonts,
|
|
5477
5635
|
value: currentValue,
|
|
5478
5636
|
inputValue,
|
|
5479
|
-
popupIcon: /* @__PURE__ */
|
|
5637
|
+
popupIcon: /* @__PURE__ */ jsx10(KeyboardArrowDown, {}),
|
|
5480
5638
|
isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
|
|
5481
5639
|
onChange: (_event, newValue) => {
|
|
5482
5640
|
handleValueChange(typeof newValue === "string" ? newValue : `${newValue ?? ""}`);
|
|
@@ -5518,7 +5676,7 @@ var LSFontPicker = memo(function LSFontPicker2({
|
|
|
5518
5676
|
noOptionsText: "No fonts found",
|
|
5519
5677
|
renderOption: (props, option) => {
|
|
5520
5678
|
const { key, ...optionProps } = props;
|
|
5521
|
-
return /* @__PURE__ */
|
|
5679
|
+
return /* @__PURE__ */ jsx10(
|
|
5522
5680
|
"li",
|
|
5523
5681
|
{
|
|
5524
5682
|
...optionProps,
|
|
@@ -5537,7 +5695,7 @@ var LSFontPicker = memo(function LSFontPicker2({
|
|
|
5537
5695
|
},
|
|
5538
5696
|
renderInput: (params) => {
|
|
5539
5697
|
const { slotProps: paramsSlotProps = {}, ...restParams } = params;
|
|
5540
|
-
return /* @__PURE__ */
|
|
5698
|
+
return /* @__PURE__ */ jsx10(
|
|
5541
5699
|
TextFieldComponent,
|
|
5542
5700
|
{
|
|
5543
5701
|
...restParams,
|
|
@@ -5574,25 +5732,25 @@ var LSFontPicker = memo(function LSFontPicker2({
|
|
|
5574
5732
|
|
|
5575
5733
|
// src/components/LSMultiSelect/LSMultiSelect.tsx
|
|
5576
5734
|
import { MenuItem } from "@mui/material";
|
|
5577
|
-
import { jsx as
|
|
5735
|
+
import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
5578
5736
|
|
|
5579
5737
|
// src/components/LSRadio/LSRadio.tsx
|
|
5580
5738
|
import FormControlLabel2 from "@mui/material/FormControlLabel";
|
|
5581
5739
|
import Radio from "@mui/material/Radio";
|
|
5582
5740
|
import RadioGroup from "@mui/material/RadioGroup";
|
|
5583
|
-
import
|
|
5584
|
-
import { jsx as
|
|
5741
|
+
import classNames4 from "classnames";
|
|
5742
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
5585
5743
|
var LSRadio = ({ className = "", ...props }) => {
|
|
5586
|
-
return /* @__PURE__ */
|
|
5744
|
+
return /* @__PURE__ */ jsx12(Radio, { ...props, className: classNames4("ls-radio", className) });
|
|
5587
5745
|
};
|
|
5588
5746
|
var LSRadioGroup = ({ selections, className = "", optionClassName = "", row, ...props }) => {
|
|
5589
|
-
return /* @__PURE__ */
|
|
5747
|
+
return /* @__PURE__ */ jsx12(RadioGroup, { ...props, row, className: classNames4("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx12(
|
|
5590
5748
|
FormControlLabel2,
|
|
5591
5749
|
{
|
|
5592
|
-
className:
|
|
5750
|
+
className: classNames4("ls-radio-row", optionClassName),
|
|
5593
5751
|
value: selection.value,
|
|
5594
5752
|
disabled: selection.disabled,
|
|
5595
|
-
control: /* @__PURE__ */
|
|
5753
|
+
control: /* @__PURE__ */ jsx12(LSRadio, {}),
|
|
5596
5754
|
label: selection.label
|
|
5597
5755
|
},
|
|
5598
5756
|
selection.value
|
|
@@ -5602,13 +5760,13 @@ LSRadioGroup.displayName = "LSRadioGroup";
|
|
|
5602
5760
|
|
|
5603
5761
|
// src/components/LSTextField/LSTextField.tsx
|
|
5604
5762
|
import TextField3 from "@mui/material/TextField";
|
|
5605
|
-
import { forwardRef as
|
|
5606
|
-
import { jsx as
|
|
5607
|
-
var LSTextField =
|
|
5763
|
+
import { forwardRef as forwardRef7 } from "react";
|
|
5764
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
5765
|
+
var LSTextField = forwardRef7(
|
|
5608
5766
|
(props, ref) => {
|
|
5609
5767
|
const { slotProps, ...rest } = props;
|
|
5610
5768
|
const paramsInputLabel = slotProps?.inputLabel ?? {};
|
|
5611
|
-
return /* @__PURE__ */
|
|
5769
|
+
return /* @__PURE__ */ jsx13(
|
|
5612
5770
|
TextField3,
|
|
5613
5771
|
{
|
|
5614
5772
|
...rest,
|
|
@@ -5636,11 +5794,11 @@ import InputAdornment2 from "@mui/material/InputAdornment";
|
|
|
5636
5794
|
import Popover from "@mui/material/Popover";
|
|
5637
5795
|
import Search from "@mui/icons-material/Search";
|
|
5638
5796
|
import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
|
|
5639
|
-
import
|
|
5797
|
+
import Tooltip3 from "@mui/material/Tooltip";
|
|
5640
5798
|
import {
|
|
5641
5799
|
Fragment as Fragment4,
|
|
5642
5800
|
createContext,
|
|
5643
|
-
forwardRef as
|
|
5801
|
+
forwardRef as forwardRef8,
|
|
5644
5802
|
useCallback as useCallback2,
|
|
5645
5803
|
useContext,
|
|
5646
5804
|
useEffect as useEffect5,
|
|
@@ -5659,7 +5817,7 @@ import {
|
|
|
5659
5817
|
useState as useState4
|
|
5660
5818
|
} from "react";
|
|
5661
5819
|
import { createPortal } from "react-dom";
|
|
5662
|
-
import { Fragment as Fragment3, jsx as
|
|
5820
|
+
import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
5663
5821
|
var TOKEN_START = "{{";
|
|
5664
5822
|
var TOKEN_END = "}}";
|
|
5665
5823
|
var COPIED_STYLE_PROPS = [
|
|
@@ -5743,7 +5901,7 @@ var parseSegments = (value, classify, describe) => {
|
|
|
5743
5901
|
}
|
|
5744
5902
|
return segments;
|
|
5745
5903
|
};
|
|
5746
|
-
var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */
|
|
5904
|
+
var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx14(
|
|
5747
5905
|
"span",
|
|
5748
5906
|
{
|
|
5749
5907
|
"data-desc": segment.desc || void 0,
|
|
@@ -5757,7 +5915,7 @@ var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx13(
|
|
|
5757
5915
|
] }) : segment.text
|
|
5758
5916
|
},
|
|
5759
5917
|
key
|
|
5760
|
-
) : /* @__PURE__ */
|
|
5918
|
+
) : /* @__PURE__ */ jsx14(Fragment2, { children: segment.text }, key);
|
|
5761
5919
|
var VariableHighlightOverlay = ({
|
|
5762
5920
|
inputEl,
|
|
5763
5921
|
value,
|
|
@@ -5881,11 +6039,11 @@ var VariableHighlightOverlay = ({
|
|
|
5881
6039
|
}
|
|
5882
6040
|
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
5883
6041
|
createPortal(
|
|
5884
|
-
/* @__PURE__ */
|
|
6042
|
+
/* @__PURE__ */ jsx14("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map((segment, index) => renderSegment(segment, String(index))) }),
|
|
5885
6043
|
inputEl.parentElement
|
|
5886
6044
|
),
|
|
5887
6045
|
tooltip ? createPortal(
|
|
5888
|
-
/* @__PURE__ */
|
|
6046
|
+
/* @__PURE__ */ jsx14(
|
|
5889
6047
|
"div",
|
|
5890
6048
|
{
|
|
5891
6049
|
className: "ls-variable-highlight__tooltip",
|
|
@@ -5899,7 +6057,7 @@ var VariableHighlightOverlay = ({
|
|
|
5899
6057
|
};
|
|
5900
6058
|
|
|
5901
6059
|
// src/components/LSVariableInputField/LSVariableInputField.tsx
|
|
5902
|
-
import { Fragment as Fragment5, jsx as
|
|
6060
|
+
import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
5903
6061
|
import { createElement } from "react";
|
|
5904
6062
|
var LSVariableInputContext = createContext({});
|
|
5905
6063
|
var DEFAULT_FUNCTION_VARIABLES = [
|
|
@@ -6119,7 +6277,7 @@ var getVariableColorClass = (variableType, isSuggested) => {
|
|
|
6119
6277
|
return "ls-variable-token--custom";
|
|
6120
6278
|
};
|
|
6121
6279
|
var CHILD_VARIABLE_COLOR_CLASS = "ls-variable-token--child";
|
|
6122
|
-
var LSVariableInputField =
|
|
6280
|
+
var LSVariableInputField = forwardRef8((props, ref) => {
|
|
6123
6281
|
const context = useContext(LSVariableInputContext);
|
|
6124
6282
|
const {
|
|
6125
6283
|
name,
|
|
@@ -6199,18 +6357,6 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6199
6357
|
},
|
|
6200
6358
|
[ref]
|
|
6201
6359
|
);
|
|
6202
|
-
const currentVariableValue = useMemo4(() => {
|
|
6203
|
-
if (typeof value !== "string") return null;
|
|
6204
|
-
const match = value.trim().match(/^\{\{([^{}=]+)\}\}$/);
|
|
6205
|
-
if (!match) return null;
|
|
6206
|
-
const key = match[1].trim();
|
|
6207
|
-
if (functionVariableSet.has(key)) return null;
|
|
6208
|
-
const record = variableRecords[key];
|
|
6209
|
-
if (!record || record.isFunction) return null;
|
|
6210
|
-
const { displayValue, fullValue } = getVariableValueDisplay(record.value);
|
|
6211
|
-
if (displayValue === "" || displayValue == null) return null;
|
|
6212
|
-
return { displayValue, fullValue };
|
|
6213
|
-
}, [value, variableRecords, functionVariableSet]);
|
|
6214
6360
|
const allowedVariableDefinitions = useMemo4(
|
|
6215
6361
|
() => normalizeAllowedDefinitions(allowedVariables),
|
|
6216
6362
|
[allowedVariables]
|
|
@@ -6455,6 +6601,64 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6455
6601
|
},
|
|
6456
6602
|
[resolveAllowedVariableOrigin, variableRecords]
|
|
6457
6603
|
);
|
|
6604
|
+
const getVariableRecordForToken = useCallback2(
|
|
6605
|
+
(variableName) => {
|
|
6606
|
+
if (!variableName) return void 0;
|
|
6607
|
+
const direct = variableRecords[variableName];
|
|
6608
|
+
if (direct) return direct;
|
|
6609
|
+
return getAllowedVariableRecord(variableName);
|
|
6610
|
+
},
|
|
6611
|
+
[getAllowedVariableRecord, variableRecords]
|
|
6612
|
+
);
|
|
6613
|
+
const getVariableValueForToken = useCallback2(
|
|
6614
|
+
(variableName) => {
|
|
6615
|
+
if (!variableName) return void 0;
|
|
6616
|
+
const directRecord = getVariableRecordForToken(variableName);
|
|
6617
|
+
if (directRecord) {
|
|
6618
|
+
if (directRecord.isFunction || functionVariableSet.has(directRecord.name))
|
|
6619
|
+
return void 0;
|
|
6620
|
+
return directRecord.value;
|
|
6621
|
+
}
|
|
6622
|
+
const segments = variableName.split(".");
|
|
6623
|
+
for (let index = segments.length - 1; index > 0; index -= 1) {
|
|
6624
|
+
const rootName = segments.slice(0, index).join(".");
|
|
6625
|
+
const record = getVariableRecordForToken(rootName);
|
|
6626
|
+
if (!record || record.isFunction || functionVariableSet.has(record.name))
|
|
6627
|
+
continue;
|
|
6628
|
+
let current = record.value;
|
|
6629
|
+
for (const segment of segments.slice(index)) {
|
|
6630
|
+
if (Array.isArray(current)) {
|
|
6631
|
+
const itemIndex = Number(segment);
|
|
6632
|
+
current = Number.isInteger(itemIndex) ? current[itemIndex] : void 0;
|
|
6633
|
+
} else if (isPlainObject(current)) {
|
|
6634
|
+
current = current[segment];
|
|
6635
|
+
} else {
|
|
6636
|
+
current = void 0;
|
|
6637
|
+
}
|
|
6638
|
+
if (current === void 0) break;
|
|
6639
|
+
}
|
|
6640
|
+
if (current !== void 0) return current;
|
|
6641
|
+
}
|
|
6642
|
+
return getAllowedVariableValue(variableName);
|
|
6643
|
+
},
|
|
6644
|
+
[
|
|
6645
|
+
functionVariableSet,
|
|
6646
|
+
getAllowedVariableValue,
|
|
6647
|
+
getVariableRecordForToken
|
|
6648
|
+
]
|
|
6649
|
+
);
|
|
6650
|
+
const getInputVariableDescription = useCallback2(
|
|
6651
|
+
(variableName) => {
|
|
6652
|
+
const description = getAllowedVariableDescription(variableName);
|
|
6653
|
+
const variableValue = getVariableValueForToken(variableName);
|
|
6654
|
+
const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
|
|
6655
|
+
const valueDisplay = fullValue || displayValue;
|
|
6656
|
+
if (!valueDisplay) return description;
|
|
6657
|
+
return `${description}
|
|
6658
|
+
value: "${valueDisplay}"`;
|
|
6659
|
+
},
|
|
6660
|
+
[getAllowedVariableDescription, getVariableValueForToken]
|
|
6661
|
+
);
|
|
6458
6662
|
const getAllowedVariableVisualType = useCallback2(
|
|
6459
6663
|
(variableName) => {
|
|
6460
6664
|
const record = getAllowedVariableRecord(variableName);
|
|
@@ -6651,8 +6855,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6651
6855
|
{
|
|
6652
6856
|
className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
|
|
6653
6857
|
children: [
|
|
6654
|
-
/* @__PURE__ */
|
|
6655
|
-
variableType === "func" && /* @__PURE__ */
|
|
6858
|
+
/* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
|
|
6859
|
+
variableType === "func" && /* @__PURE__ */ jsx15(
|
|
6656
6860
|
"span",
|
|
6657
6861
|
{
|
|
6658
6862
|
className: "ls-variable-token__badge",
|
|
@@ -6663,7 +6867,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6663
6867
|
]
|
|
6664
6868
|
}
|
|
6665
6869
|
);
|
|
6666
|
-
const renderExpandToggle = (path, expanded) => /* @__PURE__ */
|
|
6870
|
+
const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx15(
|
|
6667
6871
|
"button",
|
|
6668
6872
|
{
|
|
6669
6873
|
type: "button",
|
|
@@ -6674,15 +6878,15 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6674
6878
|
className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
|
|
6675
6879
|
"aria-label": expanded ? "Collapse" : "Expand",
|
|
6676
6880
|
"aria-expanded": expanded,
|
|
6677
|
-
children: /* @__PURE__ */
|
|
6881
|
+
children: /* @__PURE__ */ jsx15(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
|
|
6678
6882
|
}
|
|
6679
6883
|
);
|
|
6680
|
-
const renderExpandSpacer = () => /* @__PURE__ */
|
|
6884
|
+
const renderExpandSpacer = () => /* @__PURE__ */ jsx15("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
|
|
6681
6885
|
const getVariableValuePreview = (variableValue) => {
|
|
6682
6886
|
const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
|
|
6683
6887
|
return { displayValue, fullValue };
|
|
6684
6888
|
};
|
|
6685
|
-
const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */
|
|
6889
|
+
const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx15(
|
|
6686
6890
|
"input",
|
|
6687
6891
|
{
|
|
6688
6892
|
className: "ls-variable-picker__value-input",
|
|
@@ -6716,18 +6920,18 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6716
6920
|
style: { paddingLeft: `${node.depth * 1.25}rem` },
|
|
6717
6921
|
children: [
|
|
6718
6922
|
node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
|
|
6719
|
-
/* @__PURE__ */
|
|
6923
|
+
/* @__PURE__ */ jsx15(
|
|
6720
6924
|
"div",
|
|
6721
6925
|
{
|
|
6722
6926
|
className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
|
|
6723
|
-
children: /* @__PURE__ */
|
|
6927
|
+
children: /* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
|
|
6724
6928
|
}
|
|
6725
6929
|
)
|
|
6726
6930
|
]
|
|
6727
6931
|
}
|
|
6728
6932
|
),
|
|
6729
|
-
/* @__PURE__ */
|
|
6730
|
-
/* @__PURE__ */
|
|
6933
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: node.displayKey }),
|
|
6934
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
|
|
6731
6935
|
]
|
|
6732
6936
|
}
|
|
6733
6937
|
),
|
|
@@ -6735,7 +6939,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6735
6939
|
] }, fullToken);
|
|
6736
6940
|
});
|
|
6737
6941
|
const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
|
|
6738
|
-
/* @__PURE__ */
|
|
6942
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
|
|
6739
6943
|
examples.map((example) => /* @__PURE__ */ jsxs6(
|
|
6740
6944
|
"div",
|
|
6741
6945
|
{
|
|
@@ -6749,12 +6953,12 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6749
6953
|
style: { paddingLeft: "1.25rem" },
|
|
6750
6954
|
children: [
|
|
6751
6955
|
renderExpandSpacer(),
|
|
6752
|
-
/* @__PURE__ */
|
|
6956
|
+
/* @__PURE__ */ jsx15("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx15("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
|
|
6753
6957
|
]
|
|
6754
6958
|
}
|
|
6755
6959
|
),
|
|
6756
|
-
/* @__PURE__ */
|
|
6757
|
-
/* @__PURE__ */
|
|
6960
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: example.label }),
|
|
6961
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value" })
|
|
6758
6962
|
]
|
|
6759
6963
|
},
|
|
6760
6964
|
example.snippet
|
|
@@ -6811,7 +7015,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6811
7015
|
isSelected ? "ls-variable-option--selected" : ""
|
|
6812
7016
|
].filter(Boolean).join(" ")
|
|
6813
7017
|
},
|
|
6814
|
-
thumb ? /* @__PURE__ */
|
|
7018
|
+
thumb ? /* @__PURE__ */ jsx15(
|
|
6815
7019
|
"img",
|
|
6816
7020
|
{
|
|
6817
7021
|
src: thumb,
|
|
@@ -6820,23 +7024,23 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6820
7024
|
}
|
|
6821
7025
|
) : null,
|
|
6822
7026
|
/* @__PURE__ */ jsxs6("div", { className: "ls-variable-option__body", children: [
|
|
6823
|
-
/* @__PURE__ */
|
|
6824
|
-
helperText ? /* @__PURE__ */
|
|
7027
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
|
|
7028
|
+
helperText ? /* @__PURE__ */ jsx15("div", { className: "ls-variable-option__helper", children: helperText }) : null
|
|
6825
7029
|
] })
|
|
6826
7030
|
);
|
|
6827
7031
|
};
|
|
6828
7032
|
const showSuggestedSection = shouldRenderPicker && allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
|
|
6829
7033
|
const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
|
|
6830
7034
|
/* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__intro", children: [
|
|
6831
|
-
/* @__PURE__ */
|
|
7035
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__intro-text", children: t(
|
|
6832
7036
|
"overlay-variables.variables-description",
|
|
6833
7037
|
"Use variables that will automatically be replaced before sending out the text"
|
|
6834
7038
|
) }),
|
|
6835
|
-
/* @__PURE__ */
|
|
7039
|
+
/* @__PURE__ */ jsx15(
|
|
6836
7040
|
LSInput,
|
|
6837
7041
|
{
|
|
6838
7042
|
autoFocus: true,
|
|
6839
|
-
startAdornment: /* @__PURE__ */
|
|
7043
|
+
startAdornment: /* @__PURE__ */ jsx15(Search, { style: { color: "#fff", width: 20, height: 20 } }),
|
|
6840
7044
|
placeholder: t("common.search", "Search"),
|
|
6841
7045
|
value: searchQuery,
|
|
6842
7046
|
onChange: (e) => setSearchQuery(e.target.value),
|
|
@@ -6845,13 +7049,13 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6845
7049
|
)
|
|
6846
7050
|
] }),
|
|
6847
7051
|
/* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__header", children: [
|
|
6848
|
-
/* @__PURE__ */
|
|
6849
|
-
/* @__PURE__ */
|
|
6850
|
-
/* @__PURE__ */
|
|
7052
|
+
/* @__PURE__ */ jsx15("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
|
|
7053
|
+
/* @__PURE__ */ jsx15("div", { children: t("commands.description", "Description") }),
|
|
7054
|
+
/* @__PURE__ */ jsx15("div", { children: t("common.value", "Value") })
|
|
6851
7055
|
] }),
|
|
6852
7056
|
/* @__PURE__ */ jsxs6("div", { className: "ls-variable-picker__list", children: [
|
|
6853
7057
|
showSuggestedSection && /* @__PURE__ */ jsxs6("fieldset", { className: "ls-variable-picker__field", children: [
|
|
6854
|
-
/* @__PURE__ */
|
|
7058
|
+
/* @__PURE__ */ jsx15("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
|
|
6855
7059
|
filteredAllowedVariables.map((definition, idx) => {
|
|
6856
7060
|
const variableType = getAllowedVariableVisualType(
|
|
6857
7061
|
definition.name
|
|
@@ -6879,8 +7083,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6879
7083
|
expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
|
|
6880
7084
|
renderVariableToken(definition.name, variableType, true)
|
|
6881
7085
|
] }),
|
|
6882
|
-
/* @__PURE__ */
|
|
6883
|
-
/* @__PURE__ */
|
|
7086
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
|
|
7087
|
+
/* @__PURE__ */ jsx15(
|
|
6884
7088
|
"div",
|
|
6885
7089
|
{
|
|
6886
7090
|
className: "ls-variable-picker__value",
|
|
@@ -6919,8 +7123,8 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6919
7123
|
expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
|
|
6920
7124
|
renderVariableToken(variable.name, variableType)
|
|
6921
7125
|
] }),
|
|
6922
|
-
/* @__PURE__ */
|
|
6923
|
-
/* @__PURE__ */
|
|
7126
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
|
|
7127
|
+
/* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
|
|
6924
7128
|
]
|
|
6925
7129
|
}
|
|
6926
7130
|
),
|
|
@@ -6929,7 +7133,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6929
7133
|
})
|
|
6930
7134
|
] })
|
|
6931
7135
|
] }) : null;
|
|
6932
|
-
const textField = (params = {}) => /* @__PURE__ */
|
|
7136
|
+
const textField = (params = {}) => /* @__PURE__ */ jsx15(
|
|
6933
7137
|
VariableInputTextField,
|
|
6934
7138
|
{
|
|
6935
7139
|
t,
|
|
@@ -6952,12 +7156,11 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6952
7156
|
inputProps,
|
|
6953
7157
|
allowedVariables,
|
|
6954
7158
|
showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
|
|
6955
|
-
currentValue: currentVariableValue,
|
|
6956
7159
|
ref: mergedInputRef
|
|
6957
7160
|
}
|
|
6958
7161
|
);
|
|
6959
7162
|
return /* @__PURE__ */ jsxs6(Fragment5, { children: [
|
|
6960
|
-
/* @__PURE__ */
|
|
7163
|
+
/* @__PURE__ */ jsx15(
|
|
6961
7164
|
Popover,
|
|
6962
7165
|
{
|
|
6963
7166
|
anchorEl: containerRef.current,
|
|
@@ -6983,7 +7186,7 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
6983
7186
|
children: pickerBody
|
|
6984
7187
|
}
|
|
6985
7188
|
),
|
|
6986
|
-
isAutoComplete ? /* @__PURE__ */
|
|
7189
|
+
isAutoComplete ? /* @__PURE__ */ jsx15(
|
|
6987
7190
|
Autocomplete2,
|
|
6988
7191
|
{
|
|
6989
7192
|
disableClearable: true,
|
|
@@ -7080,20 +7283,20 @@ var LSVariableInputField = forwardRef7((props, ref) => {
|
|
|
7080
7283
|
renderInput: (params) => textField(params)
|
|
7081
7284
|
}
|
|
7082
7285
|
) : textField(),
|
|
7083
|
-
!hideVariables && typeof value === "string" ? /* @__PURE__ */
|
|
7286
|
+
!hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx15(
|
|
7084
7287
|
VariableHighlightOverlay,
|
|
7085
7288
|
{
|
|
7086
7289
|
inputEl,
|
|
7087
7290
|
value,
|
|
7088
7291
|
multiline,
|
|
7089
7292
|
classify: getInputVariableVisualType,
|
|
7090
|
-
describe:
|
|
7293
|
+
describe: getInputVariableDescription
|
|
7091
7294
|
}
|
|
7092
7295
|
) : null
|
|
7093
7296
|
] });
|
|
7094
7297
|
});
|
|
7095
7298
|
LSVariableInputField.displayName = "LSVariableInputField";
|
|
7096
|
-
var VariableInputTextField =
|
|
7299
|
+
var VariableInputTextField = forwardRef8(
|
|
7097
7300
|
({
|
|
7098
7301
|
t,
|
|
7099
7302
|
id,
|
|
@@ -7113,16 +7316,15 @@ var VariableInputTextField = forwardRef7(
|
|
|
7113
7316
|
clickedVariableIcon,
|
|
7114
7317
|
params = {},
|
|
7115
7318
|
containerRef,
|
|
7116
|
-
showVariableIcon
|
|
7117
|
-
currentValue
|
|
7319
|
+
showVariableIcon
|
|
7118
7320
|
}, ref) => {
|
|
7119
7321
|
const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
|
|
7120
7322
|
const paramsSlotInput = params?.slotProps?.input ?? {};
|
|
7121
7323
|
const explicitStartAdornment = inputProps?.startAdornment;
|
|
7122
|
-
const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */
|
|
7324
|
+
const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx15(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
|
|
7123
7325
|
const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
|
|
7124
7326
|
const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
|
|
7125
|
-
return /* @__PURE__ */
|
|
7327
|
+
return /* @__PURE__ */ jsx15(
|
|
7126
7328
|
LSTextField,
|
|
7127
7329
|
{
|
|
7128
7330
|
id,
|
|
@@ -7152,23 +7354,7 @@ var VariableInputTextField = forwardRef7(
|
|
|
7152
7354
|
startAdornment,
|
|
7153
7355
|
endAdornment: /* @__PURE__ */ jsxs6(Fragment5, { children: [
|
|
7154
7356
|
endAdornment ?? null,
|
|
7155
|
-
|
|
7156
|
-
InputAdornment2,
|
|
7157
|
-
{
|
|
7158
|
-
position: "end",
|
|
7159
|
-
className: "ls-variable-input-current-value",
|
|
7160
|
-
style: {
|
|
7161
|
-
maxWidth: 120,
|
|
7162
|
-
overflow: "hidden",
|
|
7163
|
-
textOverflow: "ellipsis",
|
|
7164
|
-
whiteSpace: "nowrap",
|
|
7165
|
-
opacity: 0.6,
|
|
7166
|
-
fontSize: "0.75em"
|
|
7167
|
-
},
|
|
7168
|
-
children: currentValue.displayValue
|
|
7169
|
-
}
|
|
7170
|
-
) }) : null,
|
|
7171
|
-
showVariableIcon ? /* @__PURE__ */ jsx14(Tooltip2, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx14(
|
|
7357
|
+
showVariableIcon ? /* @__PURE__ */ jsx15(Tooltip3, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx15(
|
|
7172
7358
|
InputAdornment2,
|
|
7173
7359
|
{
|
|
7174
7360
|
position: "end",
|
|
@@ -7194,11 +7380,11 @@ import ListItemIcon from "@mui/material/ListItemIcon";
|
|
|
7194
7380
|
import ListItemText from "@mui/material/ListItemText";
|
|
7195
7381
|
import Menu from "@mui/material/Menu";
|
|
7196
7382
|
import MenuItem2 from "@mui/material/MenuItem";
|
|
7197
|
-
import
|
|
7198
|
-
import
|
|
7383
|
+
import Tooltip4 from "@mui/material/Tooltip";
|
|
7384
|
+
import classNames6 from "classnames";
|
|
7199
7385
|
|
|
7200
7386
|
// src/components/PlatformIcon/PlatformIcon.tsx
|
|
7201
|
-
import
|
|
7387
|
+
import classNames5 from "classnames";
|
|
7202
7388
|
|
|
7203
7389
|
// src/assets/platforms/discord.svg
|
|
7204
7390
|
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';
|
|
@@ -7225,7 +7411,7 @@ var twitter_default = 'data:image/svg+xml,<svg width="400" height="400" viewBox=
|
|
|
7225
7411
|
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';
|
|
7226
7412
|
|
|
7227
7413
|
// src/components/PlatformIcon/PlatformIcon.tsx
|
|
7228
|
-
import { jsx as
|
|
7414
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
7229
7415
|
var PLATFORM_ICON_URLS = {
|
|
7230
7416
|
twitch: twitch_default,
|
|
7231
7417
|
youtube: youtube_default,
|
|
@@ -7250,13 +7436,13 @@ function PlatformIcon({ platform, fallback = true, size, className, title, style
|
|
|
7250
7436
|
return null;
|
|
7251
7437
|
}
|
|
7252
7438
|
const sizeStyle = size !== void 0 ? { height: typeof size === "number" ? `${size}px` : size } : void 0;
|
|
7253
|
-
return /* @__PURE__ */
|
|
7439
|
+
return /* @__PURE__ */ jsx16("img", { className: classNames5("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
|
|
7254
7440
|
}
|
|
7255
7441
|
PlatformIcon.displayName = "PlatformIcon";
|
|
7256
7442
|
|
|
7257
7443
|
// src/components/ChatMessageItem/modActionIcons.tsx
|
|
7258
|
-
import { jsx as
|
|
7259
|
-
var DeleteIcon = () => /* @__PURE__ */
|
|
7444
|
+
import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
7445
|
+
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(
|
|
7260
7446
|
"path",
|
|
7261
7447
|
{
|
|
7262
7448
|
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",
|
|
@@ -7264,14 +7450,14 @@ var DeleteIcon = () => /* @__PURE__ */ jsx16("svg", { width: "15", height: "15",
|
|
|
7264
7450
|
}
|
|
7265
7451
|
) });
|
|
7266
7452
|
var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
7267
|
-
/* @__PURE__ */
|
|
7453
|
+
/* @__PURE__ */ jsx17(
|
|
7268
7454
|
"path",
|
|
7269
7455
|
{
|
|
7270
7456
|
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",
|
|
7271
7457
|
fill: "currentColor"
|
|
7272
7458
|
}
|
|
7273
7459
|
),
|
|
7274
|
-
/* @__PURE__ */
|
|
7460
|
+
/* @__PURE__ */ jsx17(
|
|
7275
7461
|
"path",
|
|
7276
7462
|
{
|
|
7277
7463
|
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",
|
|
@@ -7279,8 +7465,8 @@ var CopyIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", v
|
|
|
7279
7465
|
}
|
|
7280
7466
|
)
|
|
7281
7467
|
] });
|
|
7282
|
-
var PinOnIcon = () => /* @__PURE__ */
|
|
7283
|
-
var PinOffIcon = () => /* @__PURE__ */
|
|
7468
|
+
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" }) });
|
|
7469
|
+
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(
|
|
7284
7470
|
"path",
|
|
7285
7471
|
{
|
|
7286
7472
|
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",
|
|
@@ -7289,8 +7475,8 @@ var PinOffIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16",
|
|
|
7289
7475
|
) });
|
|
7290
7476
|
var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
7291
7477
|
/* @__PURE__ */ jsxs7("g", { clipPath: "url(#ls-chat-translate-clip)", children: [
|
|
7292
|
-
/* @__PURE__ */
|
|
7293
|
-
/* @__PURE__ */
|
|
7478
|
+
/* @__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" }),
|
|
7479
|
+
/* @__PURE__ */ jsx17(
|
|
7294
7480
|
"path",
|
|
7295
7481
|
{
|
|
7296
7482
|
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",
|
|
@@ -7298,17 +7484,17 @@ var TranslateIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "1
|
|
|
7298
7484
|
}
|
|
7299
7485
|
)
|
|
7300
7486
|
] }),
|
|
7301
|
-
/* @__PURE__ */
|
|
7487
|
+
/* @__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)" }) }) })
|
|
7302
7488
|
] });
|
|
7303
7489
|
var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
7304
|
-
/* @__PURE__ */
|
|
7490
|
+
/* @__PURE__ */ jsx17(
|
|
7305
7491
|
"path",
|
|
7306
7492
|
{
|
|
7307
7493
|
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",
|
|
7308
7494
|
fill: "currentColor"
|
|
7309
7495
|
}
|
|
7310
7496
|
),
|
|
7311
|
-
/* @__PURE__ */
|
|
7497
|
+
/* @__PURE__ */ jsx17(
|
|
7312
7498
|
"path",
|
|
7313
7499
|
{
|
|
7314
7500
|
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",
|
|
@@ -7317,14 +7503,14 @@ var BanUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16"
|
|
|
7317
7503
|
)
|
|
7318
7504
|
] });
|
|
7319
7505
|
var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 107 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
7320
|
-
/* @__PURE__ */
|
|
7506
|
+
/* @__PURE__ */ jsx17(
|
|
7321
7507
|
"path",
|
|
7322
7508
|
{
|
|
7323
7509
|
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",
|
|
7324
7510
|
fill: "currentColor"
|
|
7325
7511
|
}
|
|
7326
7512
|
),
|
|
7327
|
-
/* @__PURE__ */
|
|
7513
|
+
/* @__PURE__ */ jsx17(
|
|
7328
7514
|
"path",
|
|
7329
7515
|
{
|
|
7330
7516
|
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",
|
|
@@ -7333,21 +7519,21 @@ var TimeoutUserIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height:
|
|
|
7333
7519
|
)
|
|
7334
7520
|
] });
|
|
7335
7521
|
var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 3 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
7336
|
-
/* @__PURE__ */
|
|
7522
|
+
/* @__PURE__ */ jsx17(
|
|
7337
7523
|
"path",
|
|
7338
7524
|
{
|
|
7339
7525
|
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",
|
|
7340
7526
|
fill: "currentColor"
|
|
7341
7527
|
}
|
|
7342
7528
|
),
|
|
7343
|
-
/* @__PURE__ */
|
|
7529
|
+
/* @__PURE__ */ jsx17(
|
|
7344
7530
|
"path",
|
|
7345
7531
|
{
|
|
7346
7532
|
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",
|
|
7347
7533
|
fill: "currentColor"
|
|
7348
7534
|
}
|
|
7349
7535
|
),
|
|
7350
|
-
/* @__PURE__ */
|
|
7536
|
+
/* @__PURE__ */ jsx17(
|
|
7351
7537
|
"path",
|
|
7352
7538
|
{
|
|
7353
7539
|
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",
|
|
@@ -7355,7 +7541,7 @@ var MenuDotsIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16
|
|
|
7355
7541
|
}
|
|
7356
7542
|
)
|
|
7357
7543
|
] });
|
|
7358
|
-
var ShoutoutIcon = () => /* @__PURE__ */
|
|
7544
|
+
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(
|
|
7359
7545
|
"path",
|
|
7360
7546
|
{
|
|
7361
7547
|
fillRule: "evenodd",
|
|
@@ -7364,7 +7550,7 @@ var ShoutoutIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16
|
|
|
7364
7550
|
fill: "currentColor"
|
|
7365
7551
|
}
|
|
7366
7552
|
) });
|
|
7367
|
-
var VipIcon = () => /* @__PURE__ */
|
|
7553
|
+
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(
|
|
7368
7554
|
"path",
|
|
7369
7555
|
{
|
|
7370
7556
|
fillRule: "evenodd",
|
|
@@ -7373,14 +7559,14 @@ var VipIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", vi
|
|
|
7373
7559
|
fill: "currentColor"
|
|
7374
7560
|
}
|
|
7375
7561
|
) });
|
|
7376
|
-
var RemoveVipIcon = () => /* @__PURE__ */
|
|
7562
|
+
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(
|
|
7377
7563
|
"path",
|
|
7378
7564
|
{
|
|
7379
7565
|
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",
|
|
7380
7566
|
fill: "currentColor"
|
|
7381
7567
|
}
|
|
7382
7568
|
) });
|
|
7383
|
-
var ModeratorIcon = () => /* @__PURE__ */
|
|
7569
|
+
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(
|
|
7384
7570
|
"path",
|
|
7385
7571
|
{
|
|
7386
7572
|
fillRule: "evenodd",
|
|
@@ -7391,7 +7577,7 @@ var ModeratorIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "1
|
|
|
7391
7577
|
) });
|
|
7392
7578
|
|
|
7393
7579
|
// src/components/ChatMessageItem/ChatMessageItem.tsx
|
|
7394
|
-
import { jsx as
|
|
7580
|
+
import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
7395
7581
|
var DEFAULT_MOD_ACTION_LABELS = {
|
|
7396
7582
|
delete: "Delete Message",
|
|
7397
7583
|
copy: "Copy to clipboard",
|
|
@@ -7416,10 +7602,10 @@ function ModActionButton({
|
|
|
7416
7602
|
onClick,
|
|
7417
7603
|
children
|
|
7418
7604
|
}) {
|
|
7419
|
-
return /* @__PURE__ */
|
|
7605
|
+
return /* @__PURE__ */ jsx18(Tooltip4, { title, placement, children: /* @__PURE__ */ jsx18(
|
|
7420
7606
|
"span",
|
|
7421
7607
|
{
|
|
7422
|
-
className:
|
|
7608
|
+
className: classNames6("ls-chat-message__modbtn", { "ls-chat-message__modbtn--danger": danger }),
|
|
7423
7609
|
onClick,
|
|
7424
7610
|
children
|
|
7425
7611
|
}
|
|
@@ -7463,7 +7649,7 @@ function ChatMessageItem({
|
|
|
7463
7649
|
const [menuPosition, setMenuPosition] = useState6(null);
|
|
7464
7650
|
const [menuAnchorEl, setMenuAnchorEl] = useState6(null);
|
|
7465
7651
|
const name = displayname || username;
|
|
7466
|
-
const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */
|
|
7652
|
+
const siteIcon = platformIcon ?? (platform ? /* @__PURE__ */ jsx18(PlatformIcon, { platform }) : null);
|
|
7467
7653
|
const has = (action) => Boolean(modActions?.includes(action));
|
|
7468
7654
|
const label = (action) => modActionLabels?.[action] ?? DEFAULT_MOD_ACTION_LABELS[action];
|
|
7469
7655
|
const vipAction = isVip ? "remove-vip" : "add-vip";
|
|
@@ -7498,34 +7684,34 @@ function ChatMessageItem({
|
|
|
7498
7684
|
closeMenu();
|
|
7499
7685
|
},
|
|
7500
7686
|
children: [
|
|
7501
|
-
/* @__PURE__ */
|
|
7502
|
-
/* @__PURE__ */
|
|
7687
|
+
/* @__PURE__ */ jsx18(ListItemIcon, { children: /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__menu-icon", children: icon }) }),
|
|
7688
|
+
/* @__PURE__ */ jsx18(ListItemText, { children: label(action) })
|
|
7503
7689
|
]
|
|
7504
7690
|
},
|
|
7505
7691
|
action
|
|
7506
7692
|
) : null;
|
|
7507
7693
|
const builtInActions = hasVisibleModActions && hovered && !actions ? /* @__PURE__ */ jsxs8("span", { className: "ls-chat-message__modbar", children: [
|
|
7508
|
-
has("delete") && /* @__PURE__ */
|
|
7509
|
-
has("pin") && /* @__PURE__ */
|
|
7694
|
+
has("delete") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("delete"), placement: modActionsTooltipPlacement, danger: true, onClick: () => fire("delete"), children: /* @__PURE__ */ jsx18(DeleteIcon, {}) }),
|
|
7695
|
+
has("pin") && /* @__PURE__ */ jsx18(
|
|
7510
7696
|
ModActionButton,
|
|
7511
7697
|
{
|
|
7512
7698
|
title: label(isPinned ? "unpin" : "pin"),
|
|
7513
7699
|
placement: modActionsTooltipPlacement,
|
|
7514
7700
|
onClick: () => fire(isPinned ? "unpin" : "pin"),
|
|
7515
|
-
children: isPinned ? /* @__PURE__ */
|
|
7701
|
+
children: isPinned ? /* @__PURE__ */ jsx18(PinOffIcon, {}) : /* @__PURE__ */ jsx18(PinOnIcon, {})
|
|
7516
7702
|
}
|
|
7517
7703
|
),
|
|
7518
|
-
has("copy") && /* @__PURE__ */
|
|
7519
|
-
has("translate") && /* @__PURE__ */
|
|
7520
|
-
has("ban") && !isSelf && /* @__PURE__ */
|
|
7521
|
-
has("timeout") && /* @__PURE__ */
|
|
7522
|
-
hasOverflowMenuItems && /* @__PURE__ */
|
|
7704
|
+
has("copy") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("copy"), placement: modActionsTooltipPlacement, onClick: () => fire("copy"), children: /* @__PURE__ */ jsx18(CopyIcon, {}) }),
|
|
7705
|
+
has("translate") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("translate"), placement: modActionsTooltipPlacement, onClick: () => fire("translate"), children: /* @__PURE__ */ jsx18(TranslateIcon, {}) }),
|
|
7706
|
+
has("ban") && !isSelf && /* @__PURE__ */ jsx18(ModActionButton, { title: label("ban"), placement: modActionsTooltipPlacement, onClick: () => fire("ban"), children: /* @__PURE__ */ jsx18(BanUserIcon, {}) }),
|
|
7707
|
+
has("timeout") && /* @__PURE__ */ jsx18(ModActionButton, { title: label("timeout"), placement: modActionsTooltipPlacement, onClick: () => fire("timeout"), children: /* @__PURE__ */ jsx18(TimeoutUserIcon, {}) }),
|
|
7708
|
+
hasOverflowMenuItems && /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__modbtn", onClick: handleMenuOpen, children: /* @__PURE__ */ jsx18(MenuDotsIcon, {}) })
|
|
7523
7709
|
] }) : null;
|
|
7524
7710
|
const actionsNode = actions ?? builtInActions;
|
|
7525
7711
|
return /* @__PURE__ */ jsxs8(
|
|
7526
7712
|
"div",
|
|
7527
7713
|
{
|
|
7528
|
-
className:
|
|
7714
|
+
className: classNames6("ls-chat-message", className),
|
|
7529
7715
|
title,
|
|
7530
7716
|
onClick: () => {
|
|
7531
7717
|
closeMenu();
|
|
@@ -7541,12 +7727,12 @@ function ChatMessageItem({
|
|
|
7541
7727
|
onMouseLeave?.();
|
|
7542
7728
|
},
|
|
7543
7729
|
children: [
|
|
7544
|
-
reply ? /* @__PURE__ */
|
|
7545
|
-
showAvatar && avatarPrefix ? /* @__PURE__ */
|
|
7546
|
-
showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */
|
|
7547
|
-
siteIcon ? /* @__PURE__ */
|
|
7548
|
-
showTimestamp && timestamp ? /* @__PURE__ */
|
|
7549
|
-
showBadges && badges ? /* @__PURE__ */
|
|
7730
|
+
reply ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__reply", children: reply }) : null,
|
|
7731
|
+
showAvatar && avatarPrefix ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__avatar-prefix", children: avatarPrefix }) : null,
|
|
7732
|
+
showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx18("img", { className: "ls-chat-message__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
|
|
7733
|
+
siteIcon ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__site", children: siteIcon }) : null,
|
|
7734
|
+
showTimestamp && timestamp ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__time", children: timestamp }) : null,
|
|
7735
|
+
showBadges && badges ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__badges", children: badges }) : null,
|
|
7550
7736
|
onUsernameClick ? /* @__PURE__ */ jsxs8(
|
|
7551
7737
|
"button",
|
|
7552
7738
|
{
|
|
@@ -7567,8 +7753,8 @@ function ChatMessageItem({
|
|
|
7567
7753
|
":"
|
|
7568
7754
|
] }),
|
|
7569
7755
|
" ",
|
|
7570
|
-
/* @__PURE__ */
|
|
7571
|
-
actionsNode ? /* @__PURE__ */
|
|
7756
|
+
/* @__PURE__ */ jsx18("span", { className: "ls-chat-message__text", children: message }),
|
|
7757
|
+
actionsNode ? /* @__PURE__ */ jsx18("span", { className: "ls-chat-message__actions", children: actionsNode }) : null,
|
|
7572
7758
|
onModAction && hasOverflowMenuItems ? /* @__PURE__ */ jsxs8(
|
|
7573
7759
|
Menu,
|
|
7574
7760
|
{
|
|
@@ -7580,10 +7766,10 @@ function ChatMessageItem({
|
|
|
7580
7766
|
anchorOrigin: modMenuAnchor === "element" ? { vertical: "bottom", horizontal: "right" } : void 0,
|
|
7581
7767
|
transformOrigin: modMenuAnchor === "element" ? { vertical: "top", horizontal: "right" } : void 0,
|
|
7582
7768
|
children: [
|
|
7583
|
-
menuItem("shoutout", /* @__PURE__ */
|
|
7584
|
-
menuItem(vipAction, isVip ? /* @__PURE__ */
|
|
7585
|
-
menuItem(moderatorAction, /* @__PURE__ */
|
|
7586
|
-
menuItem("unban", /* @__PURE__ */
|
|
7769
|
+
menuItem("shoutout", /* @__PURE__ */ jsx18(ShoutoutIcon, {})),
|
|
7770
|
+
menuItem(vipAction, isVip ? /* @__PURE__ */ jsx18(RemoveVipIcon, {}) : /* @__PURE__ */ jsx18(VipIcon, {})),
|
|
7771
|
+
menuItem(moderatorAction, /* @__PURE__ */ jsx18(ModeratorIcon, {})),
|
|
7772
|
+
menuItem("unban", /* @__PURE__ */ jsx18(BanUserIcon, {}))
|
|
7587
7773
|
]
|
|
7588
7774
|
}
|
|
7589
7775
|
) : null
|
|
@@ -7596,7 +7782,7 @@ ChatMessageItem.displayName = "ChatMessageItem";
|
|
|
7596
7782
|
// src/components/ChatboxPanel/ChatboxPanel.tsx
|
|
7597
7783
|
import { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
|
|
7598
7784
|
import MenuItem3 from "@mui/material/MenuItem";
|
|
7599
|
-
import
|
|
7785
|
+
import classNames7 from "classnames";
|
|
7600
7786
|
|
|
7601
7787
|
// src/components/ChatboxPanel/useAutoScroll.ts
|
|
7602
7788
|
import { useCallback as useCallback3, useRef as useRef5, useState as useState7 } from "react";
|
|
@@ -7639,7 +7825,7 @@ var useAutoScroll = (threshold = 24, options) => {
|
|
|
7639
7825
|
};
|
|
7640
7826
|
|
|
7641
7827
|
// src/components/ChatboxPanel/ChatboxPanel.tsx
|
|
7642
|
-
import { jsx as
|
|
7828
|
+
import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
7643
7829
|
function ChatboxPanel({
|
|
7644
7830
|
children,
|
|
7645
7831
|
messageCount,
|
|
@@ -7732,9 +7918,9 @@ function ChatboxPanel({
|
|
|
7732
7918
|
setInternalValue("");
|
|
7733
7919
|
}
|
|
7734
7920
|
};
|
|
7735
|
-
return /* @__PURE__ */ jsxs9("div", { className:
|
|
7921
|
+
return /* @__PURE__ */ jsxs9("div", { className: classNames7("ls-chatbox", className), id, children: [
|
|
7736
7922
|
/* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__viewport", children: [
|
|
7737
|
-
/* @__PURE__ */
|
|
7923
|
+
/* @__PURE__ */ jsx19(
|
|
7738
7924
|
"div",
|
|
7739
7925
|
{
|
|
7740
7926
|
className: "ls-chatbox__list",
|
|
@@ -7762,7 +7948,7 @@ function ChatboxPanel({
|
|
|
7762
7948
|
/* @__PURE__ */ jsxs9(
|
|
7763
7949
|
"svg",
|
|
7764
7950
|
{
|
|
7765
|
-
className:
|
|
7951
|
+
className: classNames7("ls-chatbox__jump-arrow", { "ls-chatbox__jump-arrow--up": reverse }),
|
|
7766
7952
|
width: "14",
|
|
7767
7953
|
height: "14",
|
|
7768
7954
|
viewBox: "0 0 24 24",
|
|
@@ -7772,19 +7958,19 @@ function ChatboxPanel({
|
|
|
7772
7958
|
strokeLinecap: "round",
|
|
7773
7959
|
strokeLinejoin: "round",
|
|
7774
7960
|
children: [
|
|
7775
|
-
/* @__PURE__ */
|
|
7776
|
-
/* @__PURE__ */
|
|
7961
|
+
/* @__PURE__ */ jsx19("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
|
|
7962
|
+
/* @__PURE__ */ jsx19("polyline", { points: "19 12 12 19 5 12" })
|
|
7777
7963
|
]
|
|
7778
7964
|
}
|
|
7779
7965
|
),
|
|
7780
7966
|
jumpToLatestLabel,
|
|
7781
|
-
unreadCount > 0 && /* @__PURE__ */
|
|
7967
|
+
unreadCount > 0 && /* @__PURE__ */ jsx19("span", { className: "ls-chatbox__jump-badge", children: unreadCount > 99 ? "99+" : unreadCount })
|
|
7782
7968
|
]
|
|
7783
7969
|
}
|
|
7784
7970
|
)
|
|
7785
7971
|
] }),
|
|
7786
7972
|
showSendBar && onSend ? /* @__PURE__ */ jsxs9("div", { className: "ls-chatbox__sendbar", children: [
|
|
7787
|
-
/* @__PURE__ */
|
|
7973
|
+
/* @__PURE__ */ jsx19(
|
|
7788
7974
|
LSInput,
|
|
7789
7975
|
{
|
|
7790
7976
|
className: "ls-chatbox__input",
|
|
@@ -7806,9 +7992,9 @@ function ChatboxPanel({
|
|
|
7806
7992
|
displayEmpty: true,
|
|
7807
7993
|
onChange: (e) => onPlatformChange?.(String(e.target.value)),
|
|
7808
7994
|
children: [
|
|
7809
|
-
allPlatformsLabel != null && /* @__PURE__ */
|
|
7810
|
-
platforms?.map((option) => /* @__PURE__ */
|
|
7811
|
-
/* @__PURE__ */
|
|
7995
|
+
allPlatformsLabel != null && /* @__PURE__ */ jsx19(MenuItem3, { value: "", children: allPlatformsLabel }),
|
|
7996
|
+
platforms?.map((option) => /* @__PURE__ */ jsx19(MenuItem3, { value: option.value, children: /* @__PURE__ */ jsxs9("span", { className: "ls-chatbox__platform-option", children: [
|
|
7997
|
+
/* @__PURE__ */ jsx19(PlatformIcon, { platform: option.value, fallback: false }),
|
|
7812
7998
|
option.label
|
|
7813
7999
|
] }) }, option.value))
|
|
7814
8000
|
]
|
|
@@ -7822,12 +8008,12 @@ function ChatboxPanel({
|
|
|
7822
8008
|
value: chatAs ?? "self",
|
|
7823
8009
|
onChange: (e) => onChatAsChange(e.target.value === "bot" ? "bot" : "self"),
|
|
7824
8010
|
children: [
|
|
7825
|
-
/* @__PURE__ */
|
|
7826
|
-
/* @__PURE__ */
|
|
8011
|
+
/* @__PURE__ */ jsx19(MenuItem3, { value: "self", children: chatAsSelfLabel }),
|
|
8012
|
+
/* @__PURE__ */ jsx19(MenuItem3, { value: "bot", children: chatAsBotLabel })
|
|
7827
8013
|
]
|
|
7828
8014
|
}
|
|
7829
8015
|
) : null,
|
|
7830
|
-
/* @__PURE__ */
|
|
8016
|
+
/* @__PURE__ */ jsx19(
|
|
7831
8017
|
LSButton,
|
|
7832
8018
|
{
|
|
7833
8019
|
className: "ls-chatbox__send",
|
|
@@ -7845,8 +8031,8 @@ ChatboxPanel.displayName = "ChatboxPanel";
|
|
|
7845
8031
|
// src/components/ModalChrome/DialogChrome.tsx
|
|
7846
8032
|
import Fade from "@mui/material/Fade";
|
|
7847
8033
|
import Modal from "@mui/material/Modal";
|
|
7848
|
-
import
|
|
7849
|
-
import { jsx as
|
|
8034
|
+
import classNames8 from "classnames";
|
|
8035
|
+
import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
7850
8036
|
var DIMENSIONS = {
|
|
7851
8037
|
small: { width: "30%", height: "30%" },
|
|
7852
8038
|
longS: { width: "50%", height: "30%" },
|
|
@@ -7858,14 +8044,14 @@ var DIMENSIONS = {
|
|
|
7858
8044
|
full: { width: "100%", height: "calc(100% - 1rem)" }
|
|
7859
8045
|
};
|
|
7860
8046
|
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: [
|
|
7861
|
-
/* @__PURE__ */
|
|
7862
|
-
/* @__PURE__ */
|
|
7863
|
-
/* @__PURE__ */
|
|
8047
|
+
/* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "10" }),
|
|
8048
|
+
/* @__PURE__ */ jsx20("line", { x1: "9", y1: "9", x2: "15", y2: "15", strokeLinecap: "round" }),
|
|
8049
|
+
/* @__PURE__ */ jsx20("line", { x1: "15", y1: "9", x2: "9", y2: "15", strokeLinecap: "round" })
|
|
7864
8050
|
] });
|
|
7865
8051
|
var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
|
|
7866
8052
|
const modalBackground = overlayProps?.background ? overlayProps.background : !overlayProps?.noBackground ? "var(--gradientBg, var(--background, #151230))" : void 0;
|
|
7867
8053
|
const dimensions = overlayProps?.size && DIMENSIONS[overlayProps.size] || { width: "90%", height: "90%" };
|
|
7868
|
-
return /* @__PURE__ */
|
|
8054
|
+
return /* @__PURE__ */ jsx20(
|
|
7869
8055
|
Modal,
|
|
7870
8056
|
{
|
|
7871
8057
|
disableEnforceFocus: true,
|
|
@@ -7876,10 +8062,10 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
|
|
|
7876
8062
|
},
|
|
7877
8063
|
className: "ls-dialog",
|
|
7878
8064
|
style: { ...props.style, zIndex: `${props.zIndex ? props.zIndex : "2500"} !important` },
|
|
7879
|
-
children: /* @__PURE__ */
|
|
8065
|
+
children: /* @__PURE__ */ jsx20(Fade, { in: props.open, children: /* @__PURE__ */ jsxs10(
|
|
7880
8066
|
"div",
|
|
7881
8067
|
{
|
|
7882
|
-
className:
|
|
8068
|
+
className: classNames8("ls-dialog__card", {
|
|
7883
8069
|
"ls-dialog__card--pad": !overlayProps?.noOuterPadding,
|
|
7884
8070
|
"ls-dialog__card--full": overlayProps?.size === "full"
|
|
7885
8071
|
}),
|
|
@@ -7894,29 +8080,29 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
|
|
|
7894
8080
|
!props.$hideTop && /* @__PURE__ */ jsxs10(
|
|
7895
8081
|
"div",
|
|
7896
8082
|
{
|
|
7897
|
-
className:
|
|
8083
|
+
className: classNames8("ls-dialog__top", { "ls-dialog__top--full": overlayProps?.size === "full" }),
|
|
7898
8084
|
style: { padding: props.$noPadTitle ? "0" : "1rem" },
|
|
7899
8085
|
children: [
|
|
7900
|
-
/* @__PURE__ */
|
|
7901
|
-
/* @__PURE__ */
|
|
7902
|
-
props.hideClose ? /* @__PURE__ */
|
|
7903
|
-
/* @__PURE__ */
|
|
7904
|
-
closeIcon ?? /* @__PURE__ */
|
|
8086
|
+
/* @__PURE__ */ jsx20("div", { className: "ls-dialog__top-side", children: props.$leftText }),
|
|
8087
|
+
/* @__PURE__ */ jsx20("div", { className: "ls-dialog__title", role: "heading", children: props.title }),
|
|
8088
|
+
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: [
|
|
8089
|
+
/* @__PURE__ */ jsx20("div", { className: "ls-dialog__close-label", children: props.closeLabel }),
|
|
8090
|
+
closeIcon ?? /* @__PURE__ */ jsx20(DefaultCloseIcon, {})
|
|
7905
8091
|
] }) })
|
|
7906
8092
|
]
|
|
7907
8093
|
}
|
|
7908
8094
|
),
|
|
7909
|
-
/* @__PURE__ */
|
|
8095
|
+
/* @__PURE__ */ jsx20(
|
|
7910
8096
|
"div",
|
|
7911
8097
|
{
|
|
7912
|
-
className:
|
|
8098
|
+
className: classNames8("ls-dialog__body", props.containerClass),
|
|
7913
8099
|
style: { backgroundImage: props.backgroundImage ? `url(${props.backgroundImage})` : "", padding: props.noPadding ? 0 : "20px 0" },
|
|
7914
8100
|
children
|
|
7915
8101
|
}
|
|
7916
8102
|
),
|
|
7917
8103
|
!props.$hideBottom && /* @__PURE__ */ jsxs10("div", { className: "ls-dialog__bottom", children: [
|
|
7918
|
-
/* @__PURE__ */
|
|
7919
|
-
props.showTest && /* @__PURE__ */
|
|
8104
|
+
/* @__PURE__ */ jsx20(LSButton, { style: props.buttonStyle && props.buttonStyle, color: props.color, label: props.saveLabel, onClick: props.save, disabled: props.saveDisabled }),
|
|
8105
|
+
props.showTest && /* @__PURE__ */ jsx20(LSButton, { color: "secondary", label: props.testLabel, onClick: props.test, disabled: props.testDisabled })
|
|
7920
8106
|
] })
|
|
7921
8107
|
]
|
|
7922
8108
|
}
|
|
@@ -7927,11 +8113,11 @@ var DialogChrome = ({ children, overlayProps, closeIcon, ...props }) => {
|
|
|
7927
8113
|
DialogChrome.displayName = "DialogChrome";
|
|
7928
8114
|
|
|
7929
8115
|
// src/components/ModalChrome/ModalChrome.tsx
|
|
7930
|
-
import
|
|
8116
|
+
import classNames10 from "classnames";
|
|
7931
8117
|
|
|
7932
8118
|
// src/components/ModalChrome/PanelChrome.tsx
|
|
7933
|
-
import
|
|
7934
|
-
import { Fragment as Fragment6, jsx as
|
|
8119
|
+
import classNames9 from "classnames";
|
|
8120
|
+
import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
7935
8121
|
function PanelChrome({
|
|
7936
8122
|
title,
|
|
7937
8123
|
titleVariant = "heading",
|
|
@@ -7948,20 +8134,20 @@ function PanelChrome({
|
|
|
7948
8134
|
}) {
|
|
7949
8135
|
const hasHeader = Boolean(title || headerActions || onClose && showClose);
|
|
7950
8136
|
const mergedStyle = padding ? { ...style, ["--ls-panel-padding"]: padding } : style;
|
|
7951
|
-
const panel = /* @__PURE__ */ jsxs11("div", { className:
|
|
8137
|
+
const panel = /* @__PURE__ */ jsxs11("div", { className: classNames9("ls-panel", { "ls-panel--no-header": !hasHeader }, className), style: mergedStyle, children: [
|
|
7952
8138
|
hasHeader ? /* @__PURE__ */ jsxs11("div", { className: "ls-panel__header", children: [
|
|
7953
|
-
title ? /* @__PURE__ */
|
|
8139
|
+
title ? /* @__PURE__ */ jsx21("span", { className: classNames9("ls-panel__title", { "ls-panel__title--label": titleVariant === "label" }), children: title }) : /* @__PURE__ */ jsx21("span", {}),
|
|
7954
8140
|
/* @__PURE__ */ jsxs11("span", { className: "ls-panel__header-actions", children: [
|
|
7955
8141
|
headerActions,
|
|
7956
|
-
onClose && showClose ? /* @__PURE__ */
|
|
8142
|
+
onClose && showClose ? /* @__PURE__ */ jsx21("button", { type: "button", className: "ls-panel__close", onClick: onClose, "aria-label": "Close", children: "\u2715" }) : null
|
|
7957
8143
|
] })
|
|
7958
8144
|
] }) : null,
|
|
7959
|
-
/* @__PURE__ */
|
|
7960
|
-
footer ? /* @__PURE__ */
|
|
8145
|
+
/* @__PURE__ */ jsx21("div", { className: classNames9("ls-panel__body", bodyClassName), children }),
|
|
8146
|
+
footer ? /* @__PURE__ */ jsx21("div", { className: "ls-panel__footer", children: footer }) : null
|
|
7961
8147
|
] });
|
|
7962
8148
|
if (onClickAway) {
|
|
7963
8149
|
return /* @__PURE__ */ jsxs11(Fragment6, { children: [
|
|
7964
|
-
/* @__PURE__ */
|
|
8150
|
+
/* @__PURE__ */ jsx21("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
|
|
7965
8151
|
panel
|
|
7966
8152
|
] });
|
|
7967
8153
|
}
|
|
@@ -7970,7 +8156,7 @@ function PanelChrome({
|
|
|
7970
8156
|
PanelChrome.displayName = "PanelChrome";
|
|
7971
8157
|
|
|
7972
8158
|
// src/components/ModalChrome/ModalChrome.tsx
|
|
7973
|
-
import { jsx as
|
|
8159
|
+
import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
7974
8160
|
function ModalChrome({
|
|
7975
8161
|
open = true,
|
|
7976
8162
|
onClose,
|
|
@@ -7995,12 +8181,12 @@ function ModalChrome({
|
|
|
7995
8181
|
return null;
|
|
7996
8182
|
}
|
|
7997
8183
|
const mergedCardStyle = maxWidth ? { ...cardStyle, ["--ls-modal-max-width"]: maxWidth } : cardStyle;
|
|
7998
|
-
return /* @__PURE__ */ jsxs12("div", { className:
|
|
7999
|
-
/* @__PURE__ */
|
|
8000
|
-
/* @__PURE__ */
|
|
8184
|
+
return /* @__PURE__ */ jsxs12("div", { className: classNames10("ls-modal", { "ls-modal--absolute": position === "absolute" }, className), role: "dialog", "aria-modal": "true", children: [
|
|
8185
|
+
/* @__PURE__ */ jsx22("div", { className: classNames10("ls-modal__backdrop", backdropClassName), onClick: onClose }),
|
|
8186
|
+
/* @__PURE__ */ jsx22(
|
|
8001
8187
|
PanelChrome,
|
|
8002
8188
|
{
|
|
8003
|
-
className:
|
|
8189
|
+
className: classNames10(
|
|
8004
8190
|
"ls-modal__card",
|
|
8005
8191
|
{ "ls-modal__card--fit": fitContent, "ls-modal__card--center": centerContent },
|
|
8006
8192
|
cardClassName
|
|
@@ -8022,32 +8208,32 @@ function ModalChrome({
|
|
|
8022
8208
|
ModalChrome.displayName = "ModalChrome";
|
|
8023
8209
|
|
|
8024
8210
|
// src/components/WidgetChrome/WidgetChrome.tsx
|
|
8025
|
-
import
|
|
8026
|
-
import { jsx as
|
|
8211
|
+
import classNames11 from "classnames";
|
|
8212
|
+
import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
8027
8213
|
function WidgetChromeButton({ active, buttonRef, className, children, ...rest }) {
|
|
8028
|
-
return /* @__PURE__ */
|
|
8214
|
+
return /* @__PURE__ */ jsx23("button", { ref: buttonRef, type: "button", className: classNames11("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
|
|
8029
8215
|
}
|
|
8030
8216
|
WidgetChromeButton.displayName = "WidgetChromeButton";
|
|
8031
8217
|
function WidgetChrome({ title, leftActions, rightActions, headerExtra, showHeader = true, className, headerClassName, bodyClassName, style, id, children }) {
|
|
8032
|
-
return /* @__PURE__ */ jsxs13("div", { className:
|
|
8033
|
-
showHeader ? /* @__PURE__ */ jsxs13("div", { className:
|
|
8034
|
-
/* @__PURE__ */
|
|
8035
|
-
/* @__PURE__ */
|
|
8036
|
-
/* @__PURE__ */
|
|
8218
|
+
return /* @__PURE__ */ jsxs13("div", { className: classNames11("ls-widget", className), style, id, children: [
|
|
8219
|
+
showHeader ? /* @__PURE__ */ jsxs13("div", { className: classNames11("ls-widget__header", headerClassName), children: [
|
|
8220
|
+
/* @__PURE__ */ jsx23("div", { className: "ls-widget__side", children: leftActions }),
|
|
8221
|
+
/* @__PURE__ */ jsx23("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx23("span", { children: title }) }),
|
|
8222
|
+
/* @__PURE__ */ jsx23("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
|
|
8037
8223
|
headerExtra
|
|
8038
8224
|
] }) : null,
|
|
8039
|
-
/* @__PURE__ */
|
|
8225
|
+
/* @__PURE__ */ jsx23("div", { className: classNames11("ls-widget__body", bodyClassName), children })
|
|
8040
8226
|
] });
|
|
8041
8227
|
}
|
|
8042
8228
|
WidgetChrome.displayName = "WidgetChrome";
|
|
8043
8229
|
|
|
8044
8230
|
// src/components/EventListItem/EventListItem.tsx
|
|
8045
|
-
import
|
|
8231
|
+
import classNames12 from "classnames";
|
|
8046
8232
|
|
|
8047
8233
|
// src/components/EventList/EventTypeIcon.tsx
|
|
8048
|
-
import { jsx as
|
|
8234
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
8049
8235
|
var createEventIcon = (def) => {
|
|
8050
|
-
const Icon = (props) => /* @__PURE__ */
|
|
8236
|
+
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)) });
|
|
8051
8237
|
return Icon;
|
|
8052
8238
|
};
|
|
8053
8239
|
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" }] });
|
|
@@ -8075,12 +8261,12 @@ var EVENT_TYPE_ICONS = {
|
|
|
8075
8261
|
};
|
|
8076
8262
|
function EventTypeIcon({ type, ...props }) {
|
|
8077
8263
|
const Icon = (type != null ? EVENT_TYPE_ICONS[String(type).trim().toLowerCase()] : void 0) ?? EVENT_TYPE_FALLBACK_ICON;
|
|
8078
|
-
return /* @__PURE__ */
|
|
8264
|
+
return /* @__PURE__ */ jsx24(Icon, { ...props });
|
|
8079
8265
|
}
|
|
8080
8266
|
EventTypeIcon.displayName = "EventTypeIcon";
|
|
8081
8267
|
|
|
8082
8268
|
// src/components/EventListItem/EventListItem.tsx
|
|
8083
|
-
import { jsx as
|
|
8269
|
+
import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
8084
8270
|
function EventListItem({
|
|
8085
8271
|
username,
|
|
8086
8272
|
message,
|
|
@@ -8101,7 +8287,7 @@ function EventListItem({
|
|
|
8101
8287
|
onUsernameClick,
|
|
8102
8288
|
className
|
|
8103
8289
|
}) {
|
|
8104
|
-
const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */
|
|
8290
|
+
const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx25(EventTypeIcon, { type: eventType }) : null);
|
|
8105
8291
|
const style = {};
|
|
8106
8292
|
if (accentColor) {
|
|
8107
8293
|
style.borderLeftColor = accentColor;
|
|
@@ -8109,13 +8295,13 @@ function EventListItem({
|
|
|
8109
8295
|
if (colorFullBackground && accentColor) {
|
|
8110
8296
|
style.backgroundColor = `color-mix(in srgb, ${accentColor} 22%, var(--cardbackground, var(--neutralDark2, #211d3e)))`;
|
|
8111
8297
|
}
|
|
8112
|
-
return /* @__PURE__ */ jsxs14("div", { className:
|
|
8298
|
+
return /* @__PURE__ */ jsxs14("div", { className: classNames12("ls-eventlist-item", className), style, children: [
|
|
8113
8299
|
/* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__main", children: [
|
|
8114
8300
|
/* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__identity", children: [
|
|
8115
|
-
/* @__PURE__ */
|
|
8301
|
+
/* @__PURE__ */ jsx25(
|
|
8116
8302
|
"span",
|
|
8117
8303
|
{
|
|
8118
|
-
className:
|
|
8304
|
+
className: classNames12("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
|
|
8119
8305
|
role: onUsernameClick ? "button" : void 0,
|
|
8120
8306
|
tabIndex: onUsernameClick ? 0 : void 0,
|
|
8121
8307
|
onClick: onUsernameClick,
|
|
@@ -8128,9 +8314,9 @@ function EventListItem({
|
|
|
8128
8314
|
children: username
|
|
8129
8315
|
}
|
|
8130
8316
|
),
|
|
8131
|
-
platformIcon ? /* @__PURE__ */
|
|
8132
|
-
showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */
|
|
8133
|
-
resolvedAlertIcon ? /* @__PURE__ */
|
|
8317
|
+
platformIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
|
|
8318
|
+
showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx25("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
|
|
8319
|
+
resolvedAlertIcon ? /* @__PURE__ */ jsx25(
|
|
8134
8320
|
"span",
|
|
8135
8321
|
{
|
|
8136
8322
|
className: "ls-eventlist-item__icon",
|
|
@@ -8138,27 +8324,27 @@ function EventListItem({
|
|
|
8138
8324
|
children: resolvedAlertIcon
|
|
8139
8325
|
}
|
|
8140
8326
|
) : null,
|
|
8141
|
-
amountBadge != null ? /* @__PURE__ */
|
|
8327
|
+
amountBadge != null ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__amount", style: accentColor ? { color: accentColor } : void 0, children: amountBadge }) : null
|
|
8142
8328
|
] }),
|
|
8143
8329
|
/* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__body", children: [
|
|
8144
|
-
message ? /* @__PURE__ */
|
|
8330
|
+
message ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__message", children: message }) : null,
|
|
8145
8331
|
showMessage && userMessage ? /* @__PURE__ */ jsxs14("span", { className: "ls-eventlist-item__usermessage", children: [
|
|
8146
8332
|
"\u201C",
|
|
8147
8333
|
userMessage,
|
|
8148
8334
|
"\u201D"
|
|
8149
8335
|
] }) : null
|
|
8150
8336
|
] }),
|
|
8151
|
-
showTimestamp && timestamp ? /* @__PURE__ */
|
|
8337
|
+
showTimestamp && timestamp ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
|
|
8152
8338
|
] }),
|
|
8153
|
-
actions ? /* @__PURE__ */
|
|
8339
|
+
actions ? /* @__PURE__ */ jsx25("div", { className: "ls-eventlist-item__actions", children: actions }) : null
|
|
8154
8340
|
] });
|
|
8155
8341
|
}
|
|
8156
8342
|
EventListItem.displayName = "EventListItem";
|
|
8157
8343
|
|
|
8158
8344
|
// src/components/EventList/EventList.tsx
|
|
8159
8345
|
import { useEffect as useEffect7, useRef as useRef7 } from "react";
|
|
8160
|
-
import
|
|
8161
|
-
import { jsx as
|
|
8346
|
+
import classNames13 from "classnames";
|
|
8347
|
+
import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
8162
8348
|
var PIN_THRESHOLD = 24;
|
|
8163
8349
|
function EventList({
|
|
8164
8350
|
items,
|
|
@@ -8202,17 +8388,17 @@ function EventList({
|
|
|
8202
8388
|
onEndReached();
|
|
8203
8389
|
}
|
|
8204
8390
|
};
|
|
8205
|
-
return /* @__PURE__ */
|
|
8206
|
-
emptyIcon ? /* @__PURE__ */
|
|
8207
|
-
/* @__PURE__ */
|
|
8208
|
-
] }) : /* @__PURE__ */
|
|
8391
|
+
return /* @__PURE__ */ jsx26("div", { className: classNames13("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames13("ls-eventlist__empty", emptyClassName), children: [
|
|
8392
|
+
emptyIcon ? /* @__PURE__ */ jsx26("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
|
|
8393
|
+
/* @__PURE__ */ jsx26("span", { children: emptyText })
|
|
8394
|
+
] }) : /* @__PURE__ */ jsx26(
|
|
8209
8395
|
"div",
|
|
8210
8396
|
{
|
|
8211
8397
|
className: "ls-eventlist__list",
|
|
8212
8398
|
ref: listRef,
|
|
8213
8399
|
onScroll: handleScroll,
|
|
8214
8400
|
style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
|
|
8215
|
-
children: items.map((item) => /* @__PURE__ */
|
|
8401
|
+
children: items.map((item) => /* @__PURE__ */ jsx26("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx26(
|
|
8216
8402
|
EventListItem,
|
|
8217
8403
|
{
|
|
8218
8404
|
username: item.username,
|
|
@@ -8221,7 +8407,7 @@ function EventList({
|
|
|
8221
8407
|
avatar: item.avatar,
|
|
8222
8408
|
fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
|
|
8223
8409
|
timestamp: item.timestamp,
|
|
8224
|
-
platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */
|
|
8410
|
+
platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx26(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
|
|
8225
8411
|
alertIcon: item.alertIcon,
|
|
8226
8412
|
amountBadge: item.amountBadge,
|
|
8227
8413
|
eventType: item.eventType,
|
|
@@ -8240,9 +8426,9 @@ function EventList({
|
|
|
8240
8426
|
EventList.displayName = "EventList";
|
|
8241
8427
|
|
|
8242
8428
|
// src/components/StreamStatusPanel/StreamStatusPanel.tsx
|
|
8243
|
-
import
|
|
8244
|
-
import
|
|
8245
|
-
import { Fragment as Fragment7, jsx as
|
|
8429
|
+
import Tooltip5 from "@mui/material/Tooltip";
|
|
8430
|
+
import classNames14 from "classnames";
|
|
8431
|
+
import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
8246
8432
|
var LS_INFO_TOOLTIP_SX = {
|
|
8247
8433
|
backgroundColor: "#1b1834",
|
|
8248
8434
|
border: "1px solid #393853",
|
|
@@ -8255,8 +8441,8 @@ var LS_INFO_TOOLTIP_SX = {
|
|
|
8255
8441
|
boxShadow: "0 10px 30px rgba(0, 0, 0, 0.45)"
|
|
8256
8442
|
};
|
|
8257
8443
|
var formatStatValue = (value) => value >= 1e3 ? `${value.toString().slice(0, -3)} K` : value.toString();
|
|
8258
|
-
var TrendUpArrow = () => /* @__PURE__ */
|
|
8259
|
-
var TrendDownArrow = () => /* @__PURE__ */
|
|
8444
|
+
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" }) });
|
|
8445
|
+
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" }) });
|
|
8260
8446
|
function StreamStatusPanel({
|
|
8261
8447
|
online = false,
|
|
8262
8448
|
statusLabel,
|
|
@@ -8280,20 +8466,20 @@ function StreamStatusPanel({
|
|
|
8280
8466
|
const hasTotal = totalValue != null;
|
|
8281
8467
|
const hasPlatforms = platforms != null;
|
|
8282
8468
|
const hasStats = stats.length > 0;
|
|
8283
|
-
const infoTooltip = (node, tip) => tip != null ? /* @__PURE__ */
|
|
8469
|
+
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;
|
|
8284
8470
|
if (!hasStatus && !hasTotal && !hasPlatforms && !hasStats) {
|
|
8285
|
-
return /* @__PURE__ */
|
|
8471
|
+
return /* @__PURE__ */ jsx27("div", { className: classNames14("ls-streamstatus", "ls-streamstatus--empty", className), id, children: emptyText });
|
|
8286
8472
|
}
|
|
8287
|
-
return /* @__PURE__ */ jsxs16("div", { className:
|
|
8473
|
+
return /* @__PURE__ */ jsxs16("div", { className: classNames14("ls-streamstatus", className), id, children: [
|
|
8288
8474
|
hasStatus ? infoTooltip(
|
|
8289
|
-
/* @__PURE__ */
|
|
8475
|
+
/* @__PURE__ */ jsx27("div", { className: "ls-streamstatus__status", style: statusTooltip != null ? { cursor: "help" } : void 0, children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
|
|
8290
8476
|
/* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__indicator", children: [
|
|
8291
|
-
online ? /* @__PURE__ */
|
|
8292
|
-
/* @__PURE__ */
|
|
8477
|
+
online ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__indicator-ping" }) : null,
|
|
8478
|
+
/* @__PURE__ */ jsx27("span", { className: classNames14("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
|
|
8293
8479
|
] }),
|
|
8294
8480
|
/* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__status-body", children: [
|
|
8295
|
-
/* @__PURE__ */
|
|
8296
|
-
statusSublabel != null ? /* @__PURE__ */
|
|
8481
|
+
/* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__status-label", children: statusLabel }),
|
|
8482
|
+
statusSublabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__status-sublabel", children: statusSublabel }) : null
|
|
8297
8483
|
] })
|
|
8298
8484
|
] }) }),
|
|
8299
8485
|
statusTooltip
|
|
@@ -8301,49 +8487,49 @@ function StreamStatusPanel({
|
|
|
8301
8487
|
hasTotal || hasPlatforms ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__overview", children: [
|
|
8302
8488
|
hasTotal ? infoTooltip(
|
|
8303
8489
|
/* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__total", style: totalTooltip != null ? { cursor: "help" } : void 0, children: [
|
|
8304
|
-
/* @__PURE__ */
|
|
8305
|
-
totalLabel != null ? /* @__PURE__ */
|
|
8490
|
+
/* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__total-value", style: totalAccentColor ? { color: totalAccentColor } : void 0, children: totalValue }),
|
|
8491
|
+
totalLabel != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__total-label", children: totalLabel }) : null
|
|
8306
8492
|
] }),
|
|
8307
8493
|
totalTooltip
|
|
8308
8494
|
) : null,
|
|
8309
|
-
hasPlatforms ? /* @__PURE__ */
|
|
8495
|
+
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: [
|
|
8310
8496
|
/* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__platform-info", children: [
|
|
8311
|
-
platform.icon != null ? /* @__PURE__ */
|
|
8497
|
+
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(
|
|
8312
8498
|
"span",
|
|
8313
8499
|
{
|
|
8314
8500
|
className: "ls-streamstatus__platform-dot",
|
|
8315
8501
|
style: platform.accentColor ? { backgroundColor: platform.accentColor } : void 0
|
|
8316
8502
|
}
|
|
8317
8503
|
),
|
|
8318
|
-
/* @__PURE__ */
|
|
8504
|
+
/* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-label", children: platform.label })
|
|
8319
8505
|
] }),
|
|
8320
|
-
/* @__PURE__ */
|
|
8506
|
+
/* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__platform-value", children: platform.value })
|
|
8321
8507
|
] }, platform.id)) }) : null
|
|
8322
8508
|
] }) : null,
|
|
8323
|
-
hasStats ? /* @__PURE__ */
|
|
8509
|
+
hasStats ? /* @__PURE__ */ jsx27(
|
|
8324
8510
|
"div",
|
|
8325
8511
|
{
|
|
8326
8512
|
className: "ls-streamstatus__stats",
|
|
8327
8513
|
style: statsColumns ? { gridTemplateColumns: `repeat(${statsColumns}, minmax(0, 1fr))` } : void 0,
|
|
8328
8514
|
children: stats.map((stat) => {
|
|
8329
|
-
const label = stat.label != null ? /* @__PURE__ */
|
|
8515
|
+
const label = stat.label != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-label", children: stat.label }) : null;
|
|
8330
8516
|
const showHead = stat.icon != null || stat.actions != null || statsLabelPosition === "top" && label != null;
|
|
8331
8517
|
const displayValue = typeof stat.value === "number" ? formatStatValue(stat.value) : stat.value;
|
|
8332
8518
|
const trend = typeof stat.value === "number" && stat.previousValue != null ? stat.value - stat.previousValue >= 0 ? "up" : "down" : void 0;
|
|
8333
8519
|
const node = /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat", style: stat.tooltip != null ? { cursor: "help" } : void 0, children: [
|
|
8334
8520
|
showHead ? /* @__PURE__ */ jsxs16("div", { className: "ls-streamstatus__stat-head", children: [
|
|
8335
|
-
stat.icon != null ? /* @__PURE__ */
|
|
8521
|
+
stat.icon != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-icon", children: stat.icon }) : null,
|
|
8336
8522
|
statsLabelPosition === "top" ? label : null,
|
|
8337
|
-
stat.actions != null ? /* @__PURE__ */
|
|
8523
|
+
stat.actions != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-actions", children: stat.actions }) : null
|
|
8338
8524
|
] }) : null,
|
|
8339
|
-
/* @__PURE__ */
|
|
8525
|
+
/* @__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: [
|
|
8340
8526
|
displayValue,
|
|
8341
|
-
trend === "up" ? /* @__PURE__ */
|
|
8527
|
+
trend === "up" ? /* @__PURE__ */ jsx27(TrendUpArrow, {}) : /* @__PURE__ */ jsx27(TrendDownArrow, {})
|
|
8342
8528
|
] }) : displayValue }),
|
|
8343
8529
|
statsLabelPosition === "bottom" ? label : null,
|
|
8344
|
-
stat.sub != null ? /* @__PURE__ */
|
|
8530
|
+
stat.sub != null ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__stat-sub", children: stat.sub }) : null
|
|
8345
8531
|
] }, stat.id);
|
|
8346
|
-
return stat.tooltip != null ? /* @__PURE__ */
|
|
8532
|
+
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;
|
|
8347
8533
|
})
|
|
8348
8534
|
}
|
|
8349
8535
|
) : null
|
|
@@ -8354,8 +8540,8 @@ StreamStatusPanel.displayName = "StreamStatusPanel";
|
|
|
8354
8540
|
// src/components/ViewersList/ViewersList.tsx
|
|
8355
8541
|
import * as React from "react";
|
|
8356
8542
|
import { useMemo as useMemo5, useState as useState9 } from "react";
|
|
8357
|
-
import
|
|
8358
|
-
import { jsx as
|
|
8543
|
+
import classNames15 from "classnames";
|
|
8544
|
+
import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
8359
8545
|
function ViewersList({
|
|
8360
8546
|
viewers,
|
|
8361
8547
|
groups,
|
|
@@ -8388,28 +8574,28 @@ function ViewersList({
|
|
|
8388
8574
|
return [...grouped, { key: "", viewers: rest }].filter((section) => section.viewers.length > 0);
|
|
8389
8575
|
}, [groups, filtered]);
|
|
8390
8576
|
const showHead = countLabel != null || searchSlot != null || internalSearch;
|
|
8391
|
-
return /* @__PURE__ */ jsxs17("div", { className:
|
|
8577
|
+
return /* @__PURE__ */ jsxs17("div", { className: classNames15("ls-viewerslist", className), id, children: [
|
|
8392
8578
|
showHead ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__head", children: [
|
|
8393
|
-
countLabel != null ? /* @__PURE__ */
|
|
8394
|
-
searchSlot ? /* @__PURE__ */
|
|
8395
|
-
internalSearch ? /* @__PURE__ */
|
|
8579
|
+
countLabel != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
|
|
8580
|
+
searchSlot ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
|
|
8581
|
+
internalSearch ? /* @__PURE__ */ jsx28("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
|
|
8396
8582
|
] }) : null,
|
|
8397
|
-
hint != null ? /* @__PURE__ */
|
|
8583
|
+
hint != null ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__hint", children: hint }) : null,
|
|
8398
8584
|
filtered.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__empty", children: [
|
|
8399
|
-
emptyIcon ? /* @__PURE__ */
|
|
8400
|
-
/* @__PURE__ */
|
|
8401
|
-
] }) : /* @__PURE__ */
|
|
8402
|
-
section.label != null ? /* @__PURE__ */
|
|
8585
|
+
emptyIcon ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
|
|
8586
|
+
/* @__PURE__ */ jsx28("span", { children: emptyText })
|
|
8587
|
+
] }) : /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs17(React.Fragment, { children: [
|
|
8588
|
+
section.label != null ? /* @__PURE__ */ jsx28("div", { className: "ls-viewerslist__group", children: section.label }) : null,
|
|
8403
8589
|
section.viewers.map((viewer) => {
|
|
8404
8590
|
const avatarSrc = viewer.avatar || viewer.fallbackAvatar || fallbackAvatar;
|
|
8405
|
-
const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */
|
|
8591
|
+
const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx28(PlatformIcon, { platform: viewer.platform }) : null);
|
|
8406
8592
|
return /* @__PURE__ */ jsxs17("div", { className: "ls-viewerslist__viewer", children: [
|
|
8407
|
-
showAvatars && avatarSrc ? /* @__PURE__ */
|
|
8408
|
-
platformIcon != null ? /* @__PURE__ */
|
|
8409
|
-
/* @__PURE__ */
|
|
8593
|
+
showAvatars && avatarSrc ? /* @__PURE__ */ jsx28("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
|
|
8594
|
+
platformIcon != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
|
|
8595
|
+
/* @__PURE__ */ jsx28(
|
|
8410
8596
|
"span",
|
|
8411
8597
|
{
|
|
8412
|
-
className:
|
|
8598
|
+
className: classNames15("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
|
|
8413
8599
|
title: viewer.username,
|
|
8414
8600
|
role: onUsernameClick ? "button" : void 0,
|
|
8415
8601
|
tabIndex: onUsernameClick ? 0 : void 0,
|
|
@@ -8423,8 +8609,8 @@ function ViewersList({
|
|
|
8423
8609
|
children: viewer.username
|
|
8424
8610
|
}
|
|
8425
8611
|
),
|
|
8426
|
-
viewer.badges != null ? /* @__PURE__ */
|
|
8427
|
-
viewer.actions != null ? /* @__PURE__ */
|
|
8612
|
+
viewer.badges != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
|
|
8613
|
+
viewer.actions != null ? /* @__PURE__ */ jsx28("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
|
|
8428
8614
|
] }, viewer.id);
|
|
8429
8615
|
})
|
|
8430
8616
|
] }, section.key || "__ungrouped")) })
|
|
@@ -8433,8 +8619,8 @@ function ViewersList({
|
|
|
8433
8619
|
ViewersList.displayName = "ViewersList";
|
|
8434
8620
|
|
|
8435
8621
|
// src/components/ShortcutDockGrid/ShortcutDockGrid.tsx
|
|
8436
|
-
import
|
|
8437
|
-
import { Fragment as Fragment9, jsx as
|
|
8622
|
+
import classNames16 from "classnames";
|
|
8623
|
+
import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
8438
8624
|
var softAccent = (color) => /^#[0-9a-fA-F]{6}$/.test(color) ? `${color}66` : color;
|
|
8439
8625
|
function ShortcutDockGrid({
|
|
8440
8626
|
buttons,
|
|
@@ -8460,7 +8646,7 @@ function ShortcutDockGrid({
|
|
|
8460
8646
|
return /* @__PURE__ */ jsxs18(
|
|
8461
8647
|
"div",
|
|
8462
8648
|
{
|
|
8463
|
-
className:
|
|
8649
|
+
className: classNames16(
|
|
8464
8650
|
"ls-shortcutdock",
|
|
8465
8651
|
{ "ls-shortcutdock--disabled": disabled, "ls-shortcutdock--readonly": readOnly },
|
|
8466
8652
|
className
|
|
@@ -8471,7 +8657,7 @@ function ShortcutDockGrid({
|
|
|
8471
8657
|
gridAutoRows: rowHeight ? `${rowHeight}px` : "auto"
|
|
8472
8658
|
},
|
|
8473
8659
|
children: [
|
|
8474
|
-
buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */
|
|
8660
|
+
buttons.length === 0 && !showAdd && emptyText != null ? /* @__PURE__ */ jsx29("div", { className: "ls-shortcutdock__empty", children: emptyText }) : null,
|
|
8475
8661
|
buttons.map((button) => {
|
|
8476
8662
|
const large = (button.w ?? 1) > 1 || (button.h ?? 1) > 1;
|
|
8477
8663
|
const selected = selectedId != null && selectedId === button.id;
|
|
@@ -8482,11 +8668,11 @@ function ShortcutDockGrid({
|
|
|
8482
8668
|
...rowHeight ? {} : { minHeight: minButtonSize },
|
|
8483
8669
|
...colored ? { ["--ls-shortcutdock-accent"]: button.color, ["--ls-shortcutdock-accent-soft"]: softAccent(button.color) } : {}
|
|
8484
8670
|
};
|
|
8485
|
-
const node = /* @__PURE__ */
|
|
8671
|
+
const node = /* @__PURE__ */ jsx29(
|
|
8486
8672
|
"button",
|
|
8487
8673
|
{
|
|
8488
8674
|
type: "button",
|
|
8489
|
-
className:
|
|
8675
|
+
className: classNames16("ls-shortcutdock__btn", {
|
|
8490
8676
|
"ls-shortcutdock__btn--selected": selected,
|
|
8491
8677
|
"ls-shortcutdock__btn--colored": colored && !selected,
|
|
8492
8678
|
"ls-shortcutdock__btn--icon-only": button.label == null && button.content == null,
|
|
@@ -8499,17 +8685,17 @@ function ShortcutDockGrid({
|
|
|
8499
8685
|
}
|
|
8500
8686
|
},
|
|
8501
8687
|
children: button.content ?? /* @__PURE__ */ jsxs18(Fragment9, { children: [
|
|
8502
|
-
button.image ? /* @__PURE__ */
|
|
8503
|
-
button.label != null ? /* @__PURE__ */
|
|
8688
|
+
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,
|
|
8689
|
+
button.label != null ? /* @__PURE__ */ jsx29("span", { className: "ls-shortcutdock__label", children: button.label }) : null
|
|
8504
8690
|
] })
|
|
8505
8691
|
}
|
|
8506
8692
|
);
|
|
8507
8693
|
return /* @__PURE__ */ jsxs18("div", { className: "ls-shortcutdock__cell", style: cellStyle, title: button.title, children: [
|
|
8508
8694
|
renderButton ? renderButton(button, node) : node,
|
|
8509
|
-
editMode && onRemove ? /* @__PURE__ */
|
|
8695
|
+
editMode && onRemove ? /* @__PURE__ */ jsx29("button", { type: "button", className: "ls-shortcutdock__remove", title: removeTitle, onClick: () => onRemove(button.id), children: "\u2715" }) : null
|
|
8510
8696
|
] }, button.id);
|
|
8511
8697
|
}),
|
|
8512
|
-
showAdd ? /* @__PURE__ */
|
|
8698
|
+
showAdd ? /* @__PURE__ */ jsx29(
|
|
8513
8699
|
"button",
|
|
8514
8700
|
{
|
|
8515
8701
|
type: "button",
|
|
@@ -8527,9 +8713,9 @@ function ShortcutDockGrid({
|
|
|
8527
8713
|
ShortcutDockGrid.displayName = "ShortcutDockGrid";
|
|
8528
8714
|
|
|
8529
8715
|
// src/components/GoalsList/GoalsList.tsx
|
|
8530
|
-
import
|
|
8531
|
-
import
|
|
8532
|
-
import { Fragment as Fragment10, jsx as
|
|
8716
|
+
import Tooltip6 from "@mui/material/Tooltip";
|
|
8717
|
+
import classNames17 from "classnames";
|
|
8718
|
+
import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
8533
8719
|
var GOAL_TOOLTIP_SX = {
|
|
8534
8720
|
backgroundColor: "#1b1834",
|
|
8535
8721
|
border: "1px solid #393853",
|
|
@@ -8553,7 +8739,7 @@ var resolvePercent = (goal) => {
|
|
|
8553
8739
|
};
|
|
8554
8740
|
function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goal data yet", id, className }) {
|
|
8555
8741
|
const fmt = (value, goal) => formatValue ? formatValue(value, goal) : value;
|
|
8556
|
-
return /* @__PURE__ */
|
|
8742
|
+
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) => {
|
|
8557
8743
|
const percent = resolvePercent(goal);
|
|
8558
8744
|
const rowStyle = {
|
|
8559
8745
|
...goal.accentColor ? { ["--ls-goals-accent"]: goal.accentColor } : {},
|
|
@@ -8561,9 +8747,9 @@ function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goa
|
|
|
8561
8747
|
};
|
|
8562
8748
|
const node = /* @__PURE__ */ jsxs19("div", { className: "ls-goals__row", style: rowStyle, children: [
|
|
8563
8749
|
/* @__PURE__ */ jsxs19("div", { className: "ls-goals__head", children: [
|
|
8564
|
-
goal.icon != null ? /* @__PURE__ */
|
|
8565
|
-
/* @__PURE__ */
|
|
8566
|
-
/* @__PURE__ */
|
|
8750
|
+
goal.icon != null ? /* @__PURE__ */ jsx30("span", { className: "ls-goals__icon", children: goal.icon }) : null,
|
|
8751
|
+
/* @__PURE__ */ jsx30("span", { className: "ls-goals__label", children: goal.label }),
|
|
8752
|
+
/* @__PURE__ */ jsx30("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
|
|
8567
8753
|
fmt(goal.current ?? 0, goal),
|
|
8568
8754
|
" ",
|
|
8569
8755
|
/* @__PURE__ */ jsxs19("span", { className: "ls-goals__target", children: [
|
|
@@ -8576,23 +8762,23 @@ function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goa
|
|
|
8576
8762
|
"%"
|
|
8577
8763
|
] }) : null
|
|
8578
8764
|
] }),
|
|
8579
|
-
/* @__PURE__ */
|
|
8765
|
+
/* @__PURE__ */ jsx30("div", { className: "ls-goals__bar", children: /* @__PURE__ */ jsx30("div", { className: "ls-goals__fill", style: { width: `${percent}%` } }) })
|
|
8580
8766
|
] }, goal.id);
|
|
8581
|
-
return goal.tooltip != null ? /* @__PURE__ */
|
|
8767
|
+
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;
|
|
8582
8768
|
}) });
|
|
8583
8769
|
}
|
|
8584
8770
|
GoalsList.displayName = "GoalsList";
|
|
8585
8771
|
|
|
8586
8772
|
// src/components/ModQueueItem/ModQueueItem.tsx
|
|
8587
8773
|
import IconButton from "@mui/material/IconButton";
|
|
8588
|
-
import
|
|
8774
|
+
import classNames18 from "classnames";
|
|
8589
8775
|
|
|
8590
8776
|
// src/components/ModQueueItem/icons.tsx
|
|
8591
|
-
import { jsx as
|
|
8777
|
+
import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
8592
8778
|
function CrossBoxIcon({ className }) {
|
|
8593
8779
|
return /* @__PURE__ */ jsxs20("svg", { className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
8594
|
-
/* @__PURE__ */
|
|
8595
|
-
/* @__PURE__ */
|
|
8780
|
+
/* @__PURE__ */ jsx31("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
|
|
8781
|
+
/* @__PURE__ */ jsx31(
|
|
8596
8782
|
"path",
|
|
8597
8783
|
{
|
|
8598
8784
|
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",
|
|
@@ -8603,8 +8789,8 @@ function CrossBoxIcon({ className }) {
|
|
|
8603
8789
|
}
|
|
8604
8790
|
function TickBoxIcon({ className }) {
|
|
8605
8791
|
return /* @__PURE__ */ jsxs20("svg", { className, width: "22", height: "21", viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
8606
|
-
/* @__PURE__ */
|
|
8607
|
-
/* @__PURE__ */
|
|
8792
|
+
/* @__PURE__ */ jsx31("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
|
|
8793
|
+
/* @__PURE__ */ jsx31(
|
|
8608
8794
|
"path",
|
|
8609
8795
|
{
|
|
8610
8796
|
d: "M14.8908 5.49829L9.85209 12.1414L6.87311 9.16455L5.49854 10.5391L10.0798 15.1203L16.4952 6.87287L14.8908 5.49829Z",
|
|
@@ -8615,7 +8801,7 @@ function TickBoxIcon({ className }) {
|
|
|
8615
8801
|
}
|
|
8616
8802
|
|
|
8617
8803
|
// src/components/ModQueueItem/ModQueueItem.tsx
|
|
8618
|
-
import { Fragment as Fragment11, jsx as
|
|
8804
|
+
import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
8619
8805
|
function ModQueueItem({
|
|
8620
8806
|
username,
|
|
8621
8807
|
avatar,
|
|
@@ -8628,12 +8814,12 @@ function ModQueueItem({
|
|
|
8628
8814
|
onDeny,
|
|
8629
8815
|
className
|
|
8630
8816
|
}) {
|
|
8631
|
-
return /* @__PURE__ */ jsxs21("div", { className:
|
|
8632
|
-
icon ? /* @__PURE__ */
|
|
8817
|
+
return /* @__PURE__ */ jsxs21("div", { className: classNames18("ls-modqueue-item", className), children: [
|
|
8818
|
+
icon ? /* @__PURE__ */ jsx32("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
|
|
8633
8819
|
/* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__body", children: [
|
|
8634
8820
|
/* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__head", children: [
|
|
8635
|
-
avatar || fallbackAvatar ? /* @__PURE__ */
|
|
8636
|
-
username ? /* @__PURE__ */
|
|
8821
|
+
avatar || fallbackAvatar ? /* @__PURE__ */ jsx32("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
|
|
8822
|
+
username ? /* @__PURE__ */ jsx32(
|
|
8637
8823
|
"span",
|
|
8638
8824
|
{
|
|
8639
8825
|
className: "ls-modqueue-item__username",
|
|
@@ -8641,7 +8827,7 @@ function ModQueueItem({
|
|
|
8641
8827
|
children: username
|
|
8642
8828
|
}
|
|
8643
8829
|
) : null,
|
|
8644
|
-
command ? /* @__PURE__ */
|
|
8830
|
+
command ? /* @__PURE__ */ jsx32("span", { className: "ls-modqueue-item__command", children: command }) : null
|
|
8645
8831
|
] }),
|
|
8646
8832
|
message ? /* @__PURE__ */ jsxs21("div", { className: "ls-modqueue-item__message", children: [
|
|
8647
8833
|
"\u201C",
|
|
@@ -8649,9 +8835,9 @@ function ModQueueItem({
|
|
|
8649
8835
|
"\u201D"
|
|
8650
8836
|
] }) : null
|
|
8651
8837
|
] }),
|
|
8652
|
-
/* @__PURE__ */
|
|
8653
|
-
/* @__PURE__ */
|
|
8654
|
-
/* @__PURE__ */
|
|
8838
|
+
/* @__PURE__ */ jsx32("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
|
|
8839
|
+
/* @__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" }) }),
|
|
8840
|
+
/* @__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" }) })
|
|
8655
8841
|
] }) })
|
|
8656
8842
|
] });
|
|
8657
8843
|
}
|
|
@@ -8660,12 +8846,12 @@ ModQueueItem.displayName = "ModQueueItem";
|
|
|
8660
8846
|
// src/components/ModQueueList/ModQueueList.tsx
|
|
8661
8847
|
import { useMemo as useMemo6, useState as useState10 } from "react";
|
|
8662
8848
|
import ButtonBase from "@mui/material/ButtonBase";
|
|
8663
|
-
import
|
|
8849
|
+
import classNames19 from "classnames";
|
|
8664
8850
|
|
|
8665
8851
|
// src/components/ModQueueList/icons.tsx
|
|
8666
|
-
import { jsx as
|
|
8852
|
+
import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
8667
8853
|
function SearchIcon({ className }) {
|
|
8668
|
-
return /* @__PURE__ */
|
|
8854
|
+
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(
|
|
8669
8855
|
"path",
|
|
8670
8856
|
{
|
|
8671
8857
|
fillRule: "evenodd",
|
|
@@ -8677,23 +8863,23 @@ function SearchIcon({ className }) {
|
|
|
8677
8863
|
}
|
|
8678
8864
|
function EmptyModQueueIcon({ className }) {
|
|
8679
8865
|
return /* @__PURE__ */ jsxs22("svg", { className, width: "39", height: "39", viewBox: "0 0 39 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
8680
|
-
/* @__PURE__ */
|
|
8866
|
+
/* @__PURE__ */ jsx33(
|
|
8681
8867
|
"path",
|
|
8682
8868
|
{
|
|
8683
8869
|
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",
|
|
8684
8870
|
fill: "#CAC9D5"
|
|
8685
8871
|
}
|
|
8686
8872
|
),
|
|
8687
|
-
/* @__PURE__ */
|
|
8873
|
+
/* @__PURE__ */ jsx33(
|
|
8688
8874
|
"path",
|
|
8689
8875
|
{
|
|
8690
8876
|
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",
|
|
8691
8877
|
fill: "#CAC9D5"
|
|
8692
8878
|
}
|
|
8693
8879
|
),
|
|
8694
|
-
/* @__PURE__ */
|
|
8695
|
-
/* @__PURE__ */
|
|
8696
|
-
/* @__PURE__ */
|
|
8880
|
+
/* @__PURE__ */ jsx33("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
|
|
8881
|
+
/* @__PURE__ */ jsx33("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
|
|
8882
|
+
/* @__PURE__ */ jsx33(
|
|
8697
8883
|
"path",
|
|
8698
8884
|
{
|
|
8699
8885
|
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",
|
|
@@ -8704,7 +8890,7 @@ function EmptyModQueueIcon({ className }) {
|
|
|
8704
8890
|
}
|
|
8705
8891
|
|
|
8706
8892
|
// src/components/ModQueueList/ModQueueList.tsx
|
|
8707
|
-
import { Fragment as Fragment12, jsx as
|
|
8893
|
+
import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
8708
8894
|
var matches = (item, q) => {
|
|
8709
8895
|
if (!q) {
|
|
8710
8896
|
return true;
|
|
@@ -8742,32 +8928,32 @@ function ModQueueList({
|
|
|
8742
8928
|
};
|
|
8743
8929
|
const internalSearch = showSearch && !searchSlot;
|
|
8744
8930
|
const filtered = useMemo6(() => internalSearch ? items.filter((item) => matches(item, query)) : items, [internalSearch, items, query]);
|
|
8745
|
-
return /* @__PURE__ */ jsxs23("div", { className:
|
|
8746
|
-
searchSlot ? /* @__PURE__ */
|
|
8931
|
+
return /* @__PURE__ */ jsxs23("div", { className: classNames19("ls-modqueue", className), id, children: [
|
|
8932
|
+
searchSlot ? /* @__PURE__ */ jsx34("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx34("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx34(
|
|
8747
8933
|
LSInput,
|
|
8748
8934
|
{
|
|
8749
8935
|
size: "small",
|
|
8750
8936
|
placeholder: searchPlaceholder,
|
|
8751
|
-
startAdornment: /* @__PURE__ */
|
|
8937
|
+
startAdornment: /* @__PURE__ */ jsx34(SearchIcon, { className: "ls-modqueue__search-icon" }),
|
|
8752
8938
|
value: query,
|
|
8753
8939
|
onChange: (e) => handleSearchChange(String(e.target.value ?? ""))
|
|
8754
8940
|
}
|
|
8755
8941
|
) }) : null,
|
|
8756
8942
|
filtered.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__empty", children: [
|
|
8757
|
-
/* @__PURE__ */
|
|
8758
|
-
/* @__PURE__ */
|
|
8943
|
+
/* @__PURE__ */ jsx34("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx34(EmptyModQueueIcon, {}) }),
|
|
8944
|
+
/* @__PURE__ */ jsx34("span", { children: emptyText })
|
|
8759
8945
|
] }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
|
|
8760
8946
|
canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__bulk", children: [
|
|
8761
8947
|
onDeny ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
|
|
8762
|
-
/* @__PURE__ */
|
|
8948
|
+
/* @__PURE__ */ jsx34(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
|
|
8763
8949
|
denyAllLabel
|
|
8764
8950
|
] }) : null,
|
|
8765
8951
|
onApprove ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--approve", disableRipple: true, onClick: () => onApprove("all"), children: [
|
|
8766
|
-
/* @__PURE__ */
|
|
8952
|
+
/* @__PURE__ */ jsx34(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
|
|
8767
8953
|
approveAllLabel
|
|
8768
8954
|
] }) : null
|
|
8769
8955
|
] }) : null,
|
|
8770
|
-
/* @__PURE__ */
|
|
8956
|
+
/* @__PURE__ */ jsx34("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx34(
|
|
8771
8957
|
ModQueueItem,
|
|
8772
8958
|
{
|
|
8773
8959
|
icon: item.icon,
|
|
@@ -8778,7 +8964,7 @@ function ModQueueList({
|
|
|
8778
8964
|
message: showMessages ? item.message : void 0,
|
|
8779
8965
|
onApprove: () => onApprove?.(item.id),
|
|
8780
8966
|
onDeny: () => onDeny?.(item.id),
|
|
8781
|
-
actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */
|
|
8967
|
+
actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx34("span", { className: "ls-modqueue__readonly", children: "read-only" }))
|
|
8782
8968
|
},
|
|
8783
8969
|
item.id
|
|
8784
8970
|
)) })
|
|
@@ -8789,8 +8975,8 @@ ModQueueList.displayName = "ModQueueList";
|
|
|
8789
8975
|
|
|
8790
8976
|
// src/components/ModActivityLog/ModActivityLog.tsx
|
|
8791
8977
|
import { useEffect as useEffect8, useRef as useRef8 } from "react";
|
|
8792
|
-
import
|
|
8793
|
-
import { jsx as
|
|
8978
|
+
import classNames20 from "classnames";
|
|
8979
|
+
import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
8794
8980
|
function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", autoScroll, className }) {
|
|
8795
8981
|
const listRef = useRef8(null);
|
|
8796
8982
|
useEffect8(() => {
|
|
@@ -8798,20 +8984,20 @@ function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", a
|
|
|
8798
8984
|
listRef.current.scrollTop = listRef.current.scrollHeight;
|
|
8799
8985
|
}
|
|
8800
8986
|
}, [logs, autoScroll]);
|
|
8801
|
-
return /* @__PURE__ */ jsxs24("div", { className:
|
|
8802
|
-
onClear && logs.length > 0 ? /* @__PURE__ */
|
|
8803
|
-
logs.length === 0 ? /* @__PURE__ */
|
|
8987
|
+
return /* @__PURE__ */ jsxs24("div", { className: classNames20("ls-modlog", className), children: [
|
|
8988
|
+
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,
|
|
8989
|
+
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) => {
|
|
8804
8990
|
const rowStyle = {
|
|
8805
8991
|
...log.tabColor ? { ["--ls-modlog-accent"]: log.tabColor } : {},
|
|
8806
8992
|
...log.barColor ? { ["--ls-modlog-bar"]: log.barColor } : {}
|
|
8807
8993
|
};
|
|
8808
8994
|
return /* @__PURE__ */ jsxs24("div", { className: "ls-modlog__row", style: rowStyle, children: [
|
|
8809
8995
|
/* @__PURE__ */ jsxs24("div", { className: "ls-modlog__head", children: [
|
|
8810
|
-
log.avatar ? /* @__PURE__ */
|
|
8811
|
-
log.title ? /* @__PURE__ */
|
|
8812
|
-
log.time ? /* @__PURE__ */
|
|
8996
|
+
log.avatar ? /* @__PURE__ */ jsx35("img", { className: "ls-modlog__avatar", src: log.avatar, alt: "" }) : null,
|
|
8997
|
+
log.title ? /* @__PURE__ */ jsx35("span", { className: "ls-modlog__title", children: log.title }) : null,
|
|
8998
|
+
log.time ? /* @__PURE__ */ jsx35("span", { className: "ls-modlog__time", children: log.time }) : null
|
|
8813
8999
|
] }),
|
|
8814
|
-
log.message ? /* @__PURE__ */
|
|
9000
|
+
log.message ? /* @__PURE__ */ jsx35("div", { className: "ls-modlog__message", children: log.message }) : null
|
|
8815
9001
|
] }, log.id ?? i);
|
|
8816
9002
|
}) })
|
|
8817
9003
|
] });
|
|
@@ -8820,8 +9006,8 @@ ModActivityLog.displayName = "ModActivityLog";
|
|
|
8820
9006
|
|
|
8821
9007
|
// src/components/SongRequestList/SongRequestList.tsx
|
|
8822
9008
|
import { useState as useState11 } from "react";
|
|
8823
|
-
import
|
|
8824
|
-
import { jsx as
|
|
9009
|
+
import classNames21 from "classnames";
|
|
9010
|
+
import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
8825
9011
|
function SongRequestList({
|
|
8826
9012
|
nowPlaying,
|
|
8827
9013
|
progress = 0,
|
|
@@ -8850,7 +9036,7 @@ function SongRequestList({
|
|
|
8850
9036
|
setAddValue("");
|
|
8851
9037
|
};
|
|
8852
9038
|
const addBar = onAddSong ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__addbar", children: [
|
|
8853
|
-
/* @__PURE__ */
|
|
9039
|
+
/* @__PURE__ */ jsx36(
|
|
8854
9040
|
LSInput,
|
|
8855
9041
|
{
|
|
8856
9042
|
className: "ls-songreq__addinput",
|
|
@@ -8866,34 +9052,34 @@ function SongRequestList({
|
|
|
8866
9052
|
}
|
|
8867
9053
|
}
|
|
8868
9054
|
),
|
|
8869
|
-
/* @__PURE__ */
|
|
9055
|
+
/* @__PURE__ */ jsx36(LSButton, { size: "small", label: addLabel, disabled: addDisabled || !addValue.trim(), onClick: submitAdd })
|
|
8870
9056
|
] }) : null;
|
|
8871
9057
|
if (!nowPlaying) {
|
|
8872
9058
|
if (!addBar) {
|
|
8873
|
-
return /* @__PURE__ */
|
|
9059
|
+
return /* @__PURE__ */ jsx36("div", { className: classNames21("ls-songreq", "ls-songreq--empty", className), children: emptyText ?? "Nothing playing" });
|
|
8874
9060
|
}
|
|
8875
|
-
return /* @__PURE__ */ jsxs25("div", { className:
|
|
9061
|
+
return /* @__PURE__ */ jsxs25("div", { className: classNames21("ls-songreq", className), children: [
|
|
8876
9062
|
addBar,
|
|
8877
|
-
/* @__PURE__ */
|
|
9063
|
+
/* @__PURE__ */ jsx36("div", { className: "ls-songreq__empty", children: emptyText ?? "Nothing playing" })
|
|
8878
9064
|
] });
|
|
8879
9065
|
}
|
|
8880
9066
|
const clampedProgress = Math.min(100, Math.max(0, progress));
|
|
8881
|
-
return /* @__PURE__ */ jsxs25("div", { className:
|
|
9067
|
+
return /* @__PURE__ */ jsxs25("div", { className: classNames21("ls-songreq", className), children: [
|
|
8882
9068
|
addBar,
|
|
8883
9069
|
/* @__PURE__ */ jsxs25("div", { className: "ls-songreq__now", children: [
|
|
8884
|
-
showArt && nowPlaying.art ? /* @__PURE__ */
|
|
9070
|
+
showArt && nowPlaying.art ? /* @__PURE__ */ jsx36("img", { className: "ls-songreq__art", src: nowPlaying.art, alt: "" }) : null,
|
|
8885
9071
|
/* @__PURE__ */ jsxs25("div", { className: "ls-songreq__nowbody", children: [
|
|
8886
|
-
/* @__PURE__ */
|
|
8887
|
-
nowPlaying.artist ? /* @__PURE__ */
|
|
9072
|
+
/* @__PURE__ */ jsx36("div", { className: "ls-songreq__title", children: nowPlaying.title }),
|
|
9073
|
+
nowPlaying.artist ? /* @__PURE__ */ jsx36("div", { className: "ls-songreq__artist", children: nowPlaying.artist }) : null,
|
|
8888
9074
|
showRequester && nowPlaying.requester ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__requester", children: [
|
|
8889
9075
|
"requested by ",
|
|
8890
9076
|
nowPlaying.requester
|
|
8891
9077
|
] }) : null,
|
|
8892
|
-
/* @__PURE__ */
|
|
9078
|
+
/* @__PURE__ */ jsx36("div", { className: "ls-songreq__progress", children: /* @__PURE__ */ jsx36("div", { className: "ls-songreq__progressbar", style: { width: `${clampedProgress}%` } }) })
|
|
8893
9079
|
] }),
|
|
8894
9080
|
/* @__PURE__ */ jsxs25("div", { className: "ls-songreq__controls", children: [
|
|
8895
|
-
onPlayPause ? /* @__PURE__ */
|
|
8896
|
-
onSkip ? /* @__PURE__ */
|
|
9081
|
+
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,
|
|
9082
|
+
onSkip ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ls-songreq__btn", onClick: onSkip, title: "Skip", "aria-label": "Skip", children: "\u23ED" }) : null
|
|
8897
9083
|
] })
|
|
8898
9084
|
] }),
|
|
8899
9085
|
showQueue ? /* @__PURE__ */ jsxs25("div", { className: "ls-songreq__queue", children: [
|
|
@@ -8901,16 +9087,16 @@ function SongRequestList({
|
|
|
8901
9087
|
"Up next \xB7 ",
|
|
8902
9088
|
queue.length
|
|
8903
9089
|
] }),
|
|
8904
|
-
/* @__PURE__ */
|
|
8905
|
-
showArt && item.art ? /* @__PURE__ */
|
|
9090
|
+
/* @__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: [
|
|
9091
|
+
showArt && item.art ? /* @__PURE__ */ jsx36("img", { className: "ls-songreq__itemart", src: item.art, alt: "" }) : null,
|
|
8906
9092
|
/* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itembody", children: [
|
|
8907
|
-
/* @__PURE__ */
|
|
9093
|
+
/* @__PURE__ */ jsx36("div", { className: "ls-songreq__itemtitle", children: item.title }),
|
|
8908
9094
|
/* @__PURE__ */ jsxs25("div", { className: "ls-songreq__itemmeta", children: [
|
|
8909
9095
|
item.artist,
|
|
8910
9096
|
showRequester && item.requester ? ` \xB7 ${item.requester}` : ""
|
|
8911
9097
|
] })
|
|
8912
9098
|
] }),
|
|
8913
|
-
onRemove ? /* @__PURE__ */
|
|
9099
|
+
onRemove ? /* @__PURE__ */ jsx36("button", { type: "button", className: "ls-songreq__remove", onClick: () => onRemove(item.id), title: "Remove", "aria-label": "Remove", children: "\u2715" }) : null
|
|
8914
9100
|
] }, item.id)) })
|
|
8915
9101
|
] }) : null
|
|
8916
9102
|
] });
|
|
@@ -8919,7 +9105,7 @@ SongRequestList.displayName = "SongRequestList";
|
|
|
8919
9105
|
|
|
8920
9106
|
// src/se-import/ui/MarketplacePicker.tsx
|
|
8921
9107
|
import { useEffect as useEffect9, useMemo as useMemo7, useState as useState12 } from "react";
|
|
8922
|
-
import { jsx as
|
|
9108
|
+
import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
8923
9109
|
function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed, onPick, onCancel }) {
|
|
8924
9110
|
const candidateIds = useMemo7(() => getMarketplaceCandidates(seWidgetType), [seWidgetType]);
|
|
8925
9111
|
const [candidates, setCandidates] = useState12(() => candidateIds.map((id) => ({ id, loading: true })));
|
|
@@ -8956,23 +9142,23 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
|
|
|
8956
9142
|
};
|
|
8957
9143
|
if (candidateIds.length === 0) {
|
|
8958
9144
|
return /* @__PURE__ */ jsxs26("div", { className: "ui-flex-column ui-gap-2", style: { padding: 16 }, children: [
|
|
8959
|
-
/* @__PURE__ */
|
|
9145
|
+
/* @__PURE__ */ jsx37("div", { style: { fontWeight: 600 }, children: "No marketplace replacements yet" }),
|
|
8960
9146
|
/* @__PURE__ */ jsxs26("div", { style: { fontSize: 13, opacity: 0.8 }, children: [
|
|
8961
9147
|
"No curated marketplace overlays are listed for ",
|
|
8962
|
-
/* @__PURE__ */
|
|
9148
|
+
/* @__PURE__ */ jsx37("code", { children: seWidgetType }),
|
|
8963
9149
|
" yet. Use AI generation or skip the widget for now."
|
|
8964
9150
|
] }),
|
|
8965
|
-
/* @__PURE__ */
|
|
9151
|
+
/* @__PURE__ */ jsx37("div", { className: "ui-flex-row", style: { marginTop: 8 }, children: /* @__PURE__ */ jsx37(LSButton, { type: "button", color: "secondary", onClick: onCancel, label: "Close" }) })
|
|
8966
9152
|
] });
|
|
8967
9153
|
}
|
|
8968
9154
|
return /* @__PURE__ */ jsxs26("div", { className: "ui-flex-column ui-gap-2", style: { padding: 16, minHeight: 420 }, children: [
|
|
8969
|
-
/* @__PURE__ */
|
|
9155
|
+
/* @__PURE__ */ jsx37("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Pick a marketplace replacement" }),
|
|
8970
9156
|
/* @__PURE__ */ jsxs26("div", { style: { fontSize: 13, opacity: 0.8 }, children: [
|
|
8971
9157
|
"Replacing ",
|
|
8972
|
-
/* @__PURE__ */
|
|
9158
|
+
/* @__PURE__ */ jsx37("code", { children: seWidgetType }),
|
|
8973
9159
|
" with a layer from a curated Lumia Marketplace overlay."
|
|
8974
9160
|
] }),
|
|
8975
|
-
/* @__PURE__ */
|
|
9161
|
+
/* @__PURE__ */ jsx37("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap", marginTop: 4 }, children: candidates.map((c) => /* @__PURE__ */ jsx37(
|
|
8976
9162
|
LSButton,
|
|
8977
9163
|
{
|
|
8978
9164
|
type: "button",
|
|
@@ -8991,11 +9177,11 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
|
|
|
8991
9177
|
": ",
|
|
8992
9178
|
activeCandidate.error
|
|
8993
9179
|
] }),
|
|
8994
|
-
activeCandidate?.loading && /* @__PURE__ */
|
|
9180
|
+
activeCandidate?.loading && /* @__PURE__ */ jsx37("div", { style: { padding: 12, fontSize: 13, opacity: 0.8 }, children: "Loading overlay\u2026" }),
|
|
8995
9181
|
activeCandidate?.overlay && /* @__PURE__ */ jsxs26("div", { className: "ui-flex-row ui-gap-2", style: { alignItems: "stretch" }, children: [
|
|
8996
9182
|
/* @__PURE__ */ jsxs26("div", { style: { flex: "0 0 200px", display: "flex", flexDirection: "column", gap: 4, maxHeight: 320, overflowY: "auto" }, children: [
|
|
8997
|
-
/* @__PURE__ */
|
|
8998
|
-
activeLayers.map((l) => /* @__PURE__ */
|
|
9183
|
+
/* @__PURE__ */ jsx37("div", { style: { fontSize: 12, fontWeight: 600, opacity: 0.8 }, children: "Layers" }),
|
|
9184
|
+
activeLayers.map((l) => /* @__PURE__ */ jsx37(
|
|
8999
9185
|
LSButton,
|
|
9000
9186
|
{
|
|
9001
9187
|
type: "button",
|
|
@@ -9003,19 +9189,19 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
|
|
|
9003
9189
|
style: { justifyContent: "flex-start", textAlign: "left" },
|
|
9004
9190
|
onClick: () => setActiveLayerId(l.id),
|
|
9005
9191
|
label: /* @__PURE__ */ jsxs26("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
|
|
9006
|
-
/* @__PURE__ */
|
|
9007
|
-
/* @__PURE__ */
|
|
9192
|
+
/* @__PURE__ */ jsx37("div", { style: { fontSize: 12, fontWeight: 600 }, children: l.label }),
|
|
9193
|
+
/* @__PURE__ */ jsx37("div", { style: { fontSize: 10, opacity: 0.7 }, children: l.type })
|
|
9008
9194
|
] })
|
|
9009
9195
|
},
|
|
9010
9196
|
l.id
|
|
9011
9197
|
)),
|
|
9012
|
-
activeLayers.length === 0 && /* @__PURE__ */
|
|
9198
|
+
activeLayers.length === 0 && /* @__PURE__ */ jsx37("div", { style: { fontSize: 12, opacity: 0.7 }, children: "No transplantable layers." })
|
|
9013
9199
|
] }),
|
|
9014
|
-
/* @__PURE__ */
|
|
9200
|
+
/* @__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 }) })
|
|
9015
9201
|
] }),
|
|
9016
9202
|
/* @__PURE__ */ jsxs26("div", { className: "ui-flex-row ui-gap-2", style: { marginTop: 12, justifyContent: "flex-end" }, children: [
|
|
9017
|
-
/* @__PURE__ */
|
|
9018
|
-
/* @__PURE__ */
|
|
9203
|
+
/* @__PURE__ */ jsx37(LSButton, { type: "button", color: "secondary", variant: "outlined", onClick: onCancel, label: "Cancel" }),
|
|
9204
|
+
/* @__PURE__ */ jsx37(
|
|
9019
9205
|
LSButton,
|
|
9020
9206
|
{
|
|
9021
9207
|
type: "button",
|
|
@@ -9029,13 +9215,13 @@ function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed,
|
|
|
9029
9215
|
] });
|
|
9030
9216
|
}
|
|
9031
9217
|
function ActiveLayerPreview({ overlay, layerId, CustomEmbed }) {
|
|
9032
|
-
if (!layerId) return /* @__PURE__ */
|
|
9218
|
+
if (!layerId) return /* @__PURE__ */ jsx37("div", { style: { padding: 16, fontSize: 12, opacity: 0.7 }, children: "Select a layer to preview." });
|
|
9033
9219
|
const module = overlay.settings?.modules?.[layerId];
|
|
9034
|
-
if (!module) return /* @__PURE__ */
|
|
9220
|
+
if (!module) return /* @__PURE__ */ jsx37("div", { style: { padding: 16, fontSize: 12, opacity: 0.7 }, children: "Layer not found." });
|
|
9035
9221
|
const type = module.settings?.type;
|
|
9036
9222
|
if (type === "custom" && module.content && CustomEmbed) {
|
|
9037
9223
|
const c = module.content;
|
|
9038
|
-
return /* @__PURE__ */
|
|
9224
|
+
return /* @__PURE__ */ jsx37(
|
|
9039
9225
|
CustomEmbed,
|
|
9040
9226
|
{
|
|
9041
9227
|
codeId: c.codeId ?? layerId,
|
|
@@ -9047,10 +9233,10 @@ function ActiveLayerPreview({ overlay, layerId, CustomEmbed }) {
|
|
|
9047
9233
|
);
|
|
9048
9234
|
}
|
|
9049
9235
|
return /* @__PURE__ */ jsxs26("div", { style: { padding: 16, fontSize: 12 }, children: [
|
|
9050
|
-
/* @__PURE__ */
|
|
9236
|
+
/* @__PURE__ */ jsx37("div", { style: { fontWeight: 600, marginBottom: 8 }, children: module.settings?.title ?? type }),
|
|
9051
9237
|
/* @__PURE__ */ jsxs26("div", { style: { opacity: 0.8 }, children: [
|
|
9052
9238
|
"Preview not available for module type ",
|
|
9053
|
-
/* @__PURE__ */
|
|
9239
|
+
/* @__PURE__ */ jsx37("code", { children: String(type) }),
|
|
9054
9240
|
'. Click "Use this layer" to transplant it anyway.'
|
|
9055
9241
|
] })
|
|
9056
9242
|
] });
|
|
@@ -10149,28 +10335,6 @@ async function fetchStreamlabsWidgetConfig(token, widgetType, options = {}) {
|
|
|
10149
10335
|
return result.json();
|
|
10150
10336
|
}
|
|
10151
10337
|
|
|
10152
|
-
// #style-inject:#style-inject
|
|
10153
|
-
function styleInject(css, { insertAt } = {}) {
|
|
10154
|
-
if (!css || typeof document === "undefined") return;
|
|
10155
|
-
const head = document.head || document.getElementsByTagName("head")[0];
|
|
10156
|
-
const style = document.createElement("style");
|
|
10157
|
-
style.type = "text/css";
|
|
10158
|
-
if (insertAt === "top") {
|
|
10159
|
-
if (head.firstChild) {
|
|
10160
|
-
head.insertBefore(style, head.firstChild);
|
|
10161
|
-
} else {
|
|
10162
|
-
head.appendChild(style);
|
|
10163
|
-
}
|
|
10164
|
-
} else {
|
|
10165
|
-
head.appendChild(style);
|
|
10166
|
-
}
|
|
10167
|
-
if (style.styleSheet) {
|
|
10168
|
-
style.styleSheet.cssText = css;
|
|
10169
|
-
} else {
|
|
10170
|
-
style.appendChild(document.createTextNode(css));
|
|
10171
|
-
}
|
|
10172
|
-
}
|
|
10173
|
-
|
|
10174
10338
|
// src/se-import/ui/SEImportWizard.css
|
|
10175
10339
|
styleInject('.se-import,\n.se-import * {\n box-sizing: border-box;\n}\n.se-import {\n --se-bg: #17162a;\n --se-surface: #27264a;\n --se-panel: #171b38;\n --se-panel-2: #202449;\n --se-border: rgba(116, 124, 211, 0.24);\n --se-border-strong: rgba(126, 128, 255, 0.58);\n --se-text: #f5f4ff;\n --se-muted: #bab8d2;\n --se-primary: #ff4076;\n --se-purple: #393853;\n --se-green: #06c96f;\n --se-warn: #f7a42b;\n width: 100%;\n height: 100%;\n min-width: min(680px, 100%);\n color: var(--se-text);\n font-family: inherit;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n.se-import__shell {\n border-radius: 0;\n padding: 28px 48px 24px;\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n}\n.se-import__header {\n flex: 0 0 auto;\n}\nfooter.se-import-actions {\n flex: 0 0 auto;\n}\n.se-import__header {\n display: grid;\n justify-items: center;\n gap: 42px;\n}\n.se-import__title {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 20px;\n font-weight: 500;\n}\n.se-import-stepper {\n display: grid;\n width: min(760px, 100%);\n grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));\n}\n.se-import-step {\n position: relative;\n display: grid;\n justify-items: center;\n gap: 12px;\n min-width: 0;\n color: rgba(255, 255, 255, 0.72);\n}\n.se-import-step__label {\n color: var(--se-text);\n font-size: 18px;\n line-height: 1.1;\n}\n.se-import-step__line {\n position: absolute;\n top: 42px;\n left: 50%;\n width: 100%;\n height: 2px;\n background: rgba(255, 255, 255, 0.16);\n}\n.se-import-step:last-child .se-import-step__line {\n display: none;\n}\n.se-import-step__dot {\n z-index: 1;\n display: grid;\n width: 22px;\n height: 22px;\n place-items: center;\n border-radius: 50%;\n background: #47485e;\n color: #fff;\n font-size: 13px;\n font-weight: 700;\n line-height: 1;\n}\n.se-import-step--active .se-import-step__dot {\n background: var(--se-primary);\n}\n.se-import-step--done .se-import-step__dot {\n background: var(--se-green);\n}\n.se-import-step--done .se-import-step__line {\n background: var(--se-green);\n}\n.se-import-step--done:has(+ .se-import-step--active) .se-import-step__line {\n background:\n linear-gradient(\n 90deg,\n var(--se-green),\n var(--se-primary));\n}\n.se-import__content {\n display: grid;\n place-items: center;\n padding: 64px 0 28px;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n}\n@media (max-height: 760px) {\n .se-import__shell {\n padding: 18px 32px 16px;\n }\n .se-import__content {\n padding: 32px 0 16px;\n }\n}\n.se-import-panel {\n width: min(100%, 1080px);\n padding: 28px;\n}\n.se-import-panel--narrow {\n width: min(100%, 1140px);\n}\n.se-import-panel--medium {\n width: min(100%, 880px);\n}\n.se-import-panel--wide {\n width: min(100%, 1000px);\n}\n.se-import-panel--confirm {\n width: min(100%, 800px);\n}\n.se-import-panel h2,\n.se-import-panel h3,\n.se-import-panel p {\n margin: 0;\n}\n.se-import-panel h2 {\n font-size: 26px;\n font-weight: 700;\n line-height: 1.15;\n}\n.se-import-panel > p {\n margin-top: 14px;\n color: var(--se-muted);\n font-size: 16px;\n line-height: 1.45;\n}\n.se-import-field {\n margin-top: 34px;\n}\n.se-import-field .mui-ls-input {\n --ls-control-height: 66px;\n}\n.se-import-field .MuiInputLabel-root {\n color: var(--se-text);\n font-weight: 700;\n}\n.se-import-field .MuiInputLabel-root.Mui-focused {\n color: #dfe1ff;\n}\n.se-import-field .MuiInputBase-root {\n font-size: 18px;\n}\n.se-import-token-loading {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-top: 14px;\n color: var(--se-muted);\n font-size: 13px;\n font-weight: 700;\n}\n.se-import-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.2);\n border-top-color: var(--se-primary);\n border-radius: 50%;\n animation: se-import-spin 800ms linear infinite;\n}\n@keyframes se-import-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.se-import-help {\n display: flex;\n gap: 18px;\n margin-top: 30px;\n border: 1px solid var(--se-purple);\n border-radius: 12px;\n padding: 24px;\n color: var(--white2);\n}\n.se-import-help__icon {\n display: grid;\n width: 30px;\n height: 30px;\n flex: 0 0 auto;\n place-items: center;\n border: 1px solid var(--se-purple);\n border-radius: 50%;\n color: var(--white2);\n font-weight: 800;\n}\n.se-import-help__title {\n color: var(--se-text);\n font-size: 18px;\n font-weight: 700;\n}\n.se-import-help__image {\n display: block;\n width: min(100%, 560px);\n height: auto;\n margin-top: 16px;\n border: 1px solid var(--se-border);\n border-radius: 8px;\n}\n.se-import-help ol {\n margin: 16px 0 0;\n padding-left: 18px;\n font-size: 15px;\n line-height: 1.7;\n}\n.se-import-help a {\n color: var(--primary);\n font-weight: 700;\n}\n.se-import-help--info {\n align-items: center;\n}\n.se-import-section-title {\n display: flex;\n gap: 1rem;\n margin-bottom: 1.5rem;\n}\n.se-import-section-title__num {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 46px;\n height: 46px;\n border: 1px solid var(--se-purple);\n border-radius: 50%;\n font-size: 1.5rem;\n font-weight: 800;\n}\n.se-import-section-title__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.se-import-section-title h3 {\n font-size: 18px;\n font-weight: 800;\n}\n.se-import-section-title p {\n margin-top: 4px;\n color: var(--se-muted);\n font-size: 14px;\n}\n.se-import-grid {\n display: grid;\n gap: 8px;\n margin-top: 10px;\n}\n.se-import-grid--four {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.se-import-grid--stats {\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n}\n.se-import-grid--two {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.se-import-stat {\n min-height: 116px;\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 8px;\n background:\n linear-gradient(\n 135deg,\n rgba(42, 47, 92, 0.9),\n rgba(33, 38, 78, 0.9));\n padding: 24px 22px;\n}\n.se-import-stat--success {\n background:\n linear-gradient(\n 135deg,\n rgba(12, 91, 86, 0.72),\n rgba(32, 65, 76, 0.8));\n border-color: rgba(19, 201, 126, 0.25);\n}\n.se-import-stat--info {\n border-color: rgba(116, 104, 255, 0.8);\n box-shadow: inset 3px 0 0 #6e76ff;\n}\n.se-import-stat--warn,\n.se-import-stat--muted {\n box-shadow: inset 3px 0 0 var(--se-warn);\n}\n.se-import-stat__label {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--se-muted);\n font-size: 12px;\n font-weight: 800;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n.se-import-stat__icon {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n.se-import-stat__value {\n margin-top: 12px;\n color: #fff;\n font-size: 30px;\n font-weight: 800;\n line-height: 1;\n}\n.se-import-stat__description {\n margin-top: 10px;\n color: var(--se-muted);\n font-size: 13px;\n line-height: 1.35;\n}\n.se-import-stat__sub {\n margin-top: 8px;\n color: var(--se-muted);\n font-size: 13px;\n}\n.se-import-mode-card__icon {\n display: grid;\n width: 46px;\n height: 46px;\n place-items: center;\n border-radius: 12px;\n background: rgba(255, 255, 255, 0.08);\n}\n.se-import-mode-card__icon img {\n width: 30px;\n height: 30px;\n object-fit: contain;\n}\n.se-import-mode-card__features {\n display: grid;\n gap: 6px;\n margin: 0;\n padding-left: 18px;\n}\n.se-import-overlay-progress {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n max-width: min(760px, 100%);\n width: 100%;\n gap: 14px;\n padding: 4px 2px 0;\n}\n.se-import-overlay-progress__copy {\n min-width: 0;\n color: var(--se-text);\n font-size: 13px;\n font-weight: 700;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.se-import-overlay-progress__strip,\n.se-import-overlay-progress__stack {\n display: flex;\n align-items: center;\n}\n.se-import-overlay-progress__strip {\n gap: 7px;\n}\n.se-import-overlay-progress__stack {\n margin-right: 5px;\n}\n.se-import-overlay-progress__stack--queued {\n margin-right: 0;\n margin-left: 5px;\n}\n.se-import-overlay-progress__stack .se-import-overlay-progress__item {\n margin-left: -16px;\n}\n.se-import-overlay-progress__stack .se-import-overlay-progress__item:first-child {\n margin-left: 0;\n}\n.se-import-overlay-progress__item {\n position: relative;\n width: 50px;\n height: 36px;\n flex: 0 0 auto;\n overflow: hidden;\n border: 1px solid var(--se-border);\n border-radius: 6px;\n background: var(--se-panel-2);\n opacity: 0.72;\n}\n.se-import-overlay-progress__item img,\n.se-import-overlay-progress__placeholder {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.se-import-overlay-progress__item--current {\n border-color: var(--se-primary);\n box-shadow: 0 0 0 1px var(--se-primary);\n opacity: 1;\n z-index: 3;\n}\n.se-import-overlay-progress__item--done {\n opacity: 1;\n}\n.se-import-overlay-progress__item--queued {\n opacity: 0.64;\n}\n.se-import-overlay-progress__more {\n display: grid;\n min-width: 28px;\n height: 24px;\n place-items: center;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.08);\n color: var(--se-muted);\n font-size: 12px;\n font-weight: 800;\n}\n.se-import-overlay-progress__check {\n position: absolute;\n right: 3px;\n bottom: 3px;\n display: grid;\n width: 16px;\n height: 16px;\n place-items: center;\n border-radius: 50%;\n background: var(--se-green);\n color: #fff;\n font-size: 11px;\n font-weight: 900;\n line-height: 1;\n}\n.se-import-option {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto auto;\n align-items: center;\n gap: 18px;\n border: 1px solid var(--se-purple);\n border-radius: 12px;\n background:\n linear-gradient(\n 135deg,\n rgba(35, 39, 81, 0.95),\n rgba(31, 35, 73, 0.95));\n box-shadow: inset 3px 0 0 var(--se-primary);\n cursor: pointer;\n padding: 22px;\n margin-bottom: 1rem;\n}\n.se-import-option--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.se-import-option__icon {\n display: grid;\n width: 40px;\n height: 40px;\n place-items: center;\n border-radius: 12px;\n background: rgba(255, 64, 118, 0.12);\n}\n.se-import-option__icon img {\n width: 24px;\n height: 24px;\n object-fit: contain;\n}\n.se-import-option__body {\n display: grid;\n gap: 8px;\n min-width: 0;\n}\n.se-import-option__title {\n font-size: 17px;\n font-weight: 800;\n}\n.se-import-option__copy {\n color: var(--se-muted);\n font-size: 14px;\n line-height: 1.45;\n}\n.se-import-option__count {\n color: #fff;\n font-size: 16px;\n}\n.se-import-option input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.se-import-toggle {\n position: relative;\n width: 48px;\n height: 28px;\n border-radius: 999px;\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);\n}\n.se-import-toggle::after {\n position: absolute;\n top: 4px;\n left: 4px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #fff;\n content: "";\n transition: transform 160ms ease;\n}\n.se-import-option input:checked + .se-import-toggle {\n background: var(--primary);\n}\n.se-import-option input:checked + .se-import-toggle::after {\n transform: translateX(20px);\n}\n.se-import-advanced {\n margin-top: 26px;\n border-radius: 10px;\n background: rgba(32, 36, 73, 0.7);\n padding: 24px;\n}\n.se-import-advanced summary {\n cursor: pointer;\n font-size: 18px;\n font-weight: 700;\n}\n.se-import-advanced p {\n margin-top: 10px;\n color: var(--se-muted);\n}\n.se-import-transfer {\n position: relative;\n display: grid;\n width: min(720px, 100%);\n min-height: 190px;\n grid-template-columns: 180px minmax(260px, 1fr) 180px;\n align-items: center;\n gap: 28px;\n margin: 0 auto 60px;\n}\n.se-import-transfer__source {\n position: relative;\n display: grid;\n width: 160px;\n height: 160px;\n place-items: center;\n animation: se-import-source-bounce 1.8s ease-in-out infinite;\n}\n.se-import-transfer--complete .se-import-transfer__source {\n animation: none;\n}\n.se-import-transfer__source::before {\n top: -13px;\n left: -13px;\n box-shadow: 155px 0 0 var(--se-primary);\n}\n.se-import-transfer__source::after {\n bottom: -13px;\n left: -13px;\n box-shadow: 155px 0 0 var(--se-primary);\n}\n.se-import-transfer__source img {\n width: 192px;\n height: 192px;\n object-fit: contain;\n}\n.se-import-transfer__source--lumia {\n animation-delay: 0.22s;\n}\n.se-import-transfer__files {\n position: relative;\n height: 130px;\n}\n.se-import-transfer__file {\n position: absolute;\n top: 50%;\n left: -18px;\n width: 56px;\n height: 66px;\n object-fit: contain;\n transform: translateY(-50%);\n filter: drop-shadow(0 10px 12px rgba(8, 9, 25, 0.25));\n animation: se-import-file-fly 2.4s cubic-bezier(0.35, 0, 0.25, 1) infinite;\n}\n.se-import-transfer--complete .se-import-transfer__file {\n display: none;\n}\n.se-import-transfer__done {\n position: absolute;\n right: -8px;\n bottom: -8px;\n display: grid;\n width: 34px;\n height: 34px;\n place-items: center;\n border-radius: 50%;\n background: var(--se-green);\n color: #fff;\n font-size: 20px;\n font-weight: 900;\n box-shadow: 0 10px 20px rgba(6, 201, 111, 0.26);\n}\n.se-import-transfer__file--one {\n animation-delay: 0s;\n}\n.se-import-transfer__file--two {\n animation-delay: 0.38s;\n}\n.se-import-transfer__file--three {\n animation-delay: 0.76s;\n}\n.se-import-transfer__file--four {\n animation-delay: 1.14s;\n}\n@keyframes se-import-source-bounce {\n 0%, 100% {\n transform: translateY(0) scale(1);\n }\n 50% {\n transform: translateY(-8px) scale(1.025);\n }\n}\n@keyframes se-import-file-fly {\n 0% {\n opacity: 0;\n transform: translate(-10px, -50%) scale(0.82) rotate(-8deg);\n }\n 12% {\n opacity: 1;\n }\n 45% {\n transform: translate(145px, calc(-50% - 18px)) scale(1.08) rotate(5deg);\n }\n 82% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: translate(330px, -50%) scale(0.9) rotate(10deg);\n }\n}\n.se-import-mirror-head {\n display: grid;\n grid-template-columns: minmax(220px, auto) minmax(180px, 1fr) auto;\n align-items: center;\n gap: 14px;\n}\n.se-import-mirror-head p {\n margin-top: 14px;\n color: var(--se-muted);\n font-size: 16px;\n}\n.se-import-mirror-head span {\n flex: 0 0 auto;\n color: var(--se-muted);\n font-weight: 700;\n}\n.se-import-mirror-head strong {\n color: var(--se-text);\n font-size: 14px;\n}\n.se-import-progress {\n width: 100%;\n height: 14px;\n margin-top: 0;\n overflow: hidden;\n border: 0;\n border-radius: 999px;\n background: rgba(255, 64, 118, 0.1);\n}\n.se-import-progress::-webkit-progress-bar {\n background: rgba(255, 64, 118, 0.1);\n}\n.se-import-progress::-webkit-progress-value {\n border-radius: 999px;\n background:\n linear-gradient(\n 90deg,\n #ff4076,\n #e7295f);\n}\n.se-import-progress::-moz-progress-bar {\n border-radius: 999px;\n background:\n linear-gradient(\n 90deg,\n #ff4076,\n #e7295f);\n}\n.se-import-asset-list {\n margin-top: 22px;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n}\n.se-import-asset-row {\n display: grid;\n grid-template-columns: 32px minmax(0, 1fr) auto auto;\n align-items: center;\n gap: 14px;\n min-height: 42px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n color: var(--se-muted);\n font-size: 13px;\n}\n.se-import-asset-row__icon {\n width: 24px;\n height: 28px;\n justify-self: end;\n object-fit: contain;\n}\n.se-import-asset-row__url {\n overflow: hidden;\n font-family:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n monospace;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.se-import-asset-row__state {\n color: #9b8cff;\n font-weight: 800;\n}\n.se-import-asset-row--done .se-import-asset-row__state,\n.se-import-asset-row--reused .se-import-asset-row__state {\n color: var(--se-green);\n}\n.se-import-asset-row--failed .se-import-asset-row__state,\n.se-import-asset-row__error {\n color: #ff8080;\n}\n.se-import-link-button {\n border: 0;\n background: transparent;\n color: #ff9ab6;\n cursor: pointer;\n font: inherit;\n font-weight: 800;\n}\n.se-import-overview {\n margin-top: 28px;\n border: 1px solid var(--se-border);\n border-radius: 12px;\n background: rgba(26, 30, 61, 0.62);\n padding: 28px;\n}\n.se-import-overview h3 {\n margin-bottom: 18px;\n font-size: 18px;\n font-weight: 800;\n}\n.se-import-row {\n display: grid;\n grid-template-columns: 190px minmax(0, 1fr) auto;\n gap: 18px;\n align-items: center;\n min-height: 48px;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n color: var(--se-muted);\n}\n.se-import-row strong {\n min-width: 0;\n overflow: hidden;\n color: var(--se-text);\n font-weight: 600;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.se-import-row em {\n color: var(--se-muted);\n font-style: normal;\n}\n.se-import-review-card {\n display: flex;\n justify-content: space-between;\n gap: 18px;\n border: 1px solid var(--se-border);\n border-radius: 10px;\n background: rgba(30, 34, 71, 0.8);\n padding: 20px;\n}\n.se-import-review-card__type {\n font-family:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n monospace;\n font-weight: 800;\n}\n.se-import-review-card p {\n margin-top: 8px;\n color: var(--se-muted);\n line-height: 1.45;\n}\n.se-import-review-card__status {\n flex: 0 0 auto;\n color: #facc15;\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n.se-import-review-bulk,\n.se-import-actions--inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n margin-top: 16px;\n}\n.se-import-muted {\n margin-top: 16px;\n color: var(--se-muted);\n font-size: 13px;\n}\n.se-import-generated {\n display: grid;\n gap: 12px;\n margin-top: 18px;\n}\n.se-import-generated__title {\n font-weight: 800;\n}\n.se-import-preview {\n width: 100%;\n height: 260px;\n border: 1px solid var(--se-border);\n border-radius: 8px;\n background: repeating-conic-gradient(#1a1c20 0% 25%, #1d1f24 0% 50%) 50% / 20px 20px;\n}\n.se-import-code {\n margin-top: 16px;\n}\n.se-import-code summary {\n cursor: pointer;\n color: var(--se-muted);\n font-size: 13px;\n}\n.se-import-code pre {\n max-height: 220px;\n margin: 10px 0 0;\n overflow: auto;\n border-radius: 8px;\n background: rgba(0, 0, 0, 0.28);\n padding: 12px;\n color: #d8dcff;\n font-size: 12px;\n}\n.se-import-error {\n margin-top: 18px;\n border: 1px solid rgba(239, 68, 68, 0.45);\n border-radius: 8px;\n background: rgba(220, 38, 38, 0.12);\n padding: 12px;\n color: #fca5a5;\n}\n.se-import-error__title {\n font-weight: 800;\n}\n.se-import-error__hint {\n margin-top: 6px;\n white-space: pre-wrap;\n}\n.se-import-actions {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n margin-top: 8px;\n}\nfooter.se-import-actions:not(.se-import-actions--inline) {\n margin: 0;\n padding: 0;\n}\n.se-import-cw-review {\n margin-top: 28px;\n display: grid;\n gap: 16px;\n}\n.se-import-cw-review h3 {\n font-size: 18px;\n font-weight: 800;\n}\n.se-import-cw-review__hint {\n margin-top: -6px;\n color: var(--se-muted);\n font-size: 13px;\n line-height: 1.5;\n}\n.se-import-cw {\n border: 1px solid var(--se-border);\n border-radius: 12px;\n background: rgba(26, 30, 61, 0.62);\n overflow: hidden;\n}\n.se-import-cw__title {\n padding: 14px 16px;\n border-bottom: 1px solid var(--se-border);\n color: var(--se-text);\n font-size: 15px;\n font-weight: 800;\n}\n.se-import-cw__tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n padding: 10px 12px 0;\n}\n.se-import-cw__tab {\n border: 1px solid transparent;\n border-radius: 8px 8px 0 0;\n background: transparent;\n padding: 7px 12px;\n color: var(--se-muted);\n font-family:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n monospace;\n font-size: 12px;\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms,\n border-color 120ms;\n}\n.se-import-cw__tab:hover {\n color: var(--se-text);\n background: rgba(255, 255, 255, 0.04);\n}\n.se-import-cw__tab--active {\n color: var(--se-text);\n border-color: var(--se-border);\n border-bottom-color: transparent;\n background: rgba(0, 0, 0, 0.28);\n}\n.se-import-cw__body {\n position: relative;\n padding: 0 12px 12px;\n}\n.se-import-cw__copy {\n position: absolute;\n top: 10px;\n right: 22px;\n z-index: 1;\n border: 1px solid var(--se-border);\n border-radius: 6px;\n background: var(--se-panel-2);\n padding: 4px 12px;\n color: var(--se-text);\n font-size: 12px;\n font-weight: 700;\n cursor: pointer;\n transition: border-color 120ms, background 120ms;\n}\n.se-import-cw__copy:hover {\n border-color: var(--se-primary);\n}\n.se-import-cw__code {\n max-height: 320px;\n margin: 0;\n overflow: auto;\n border-radius: 8px;\n background: rgba(0, 0, 0, 0.28);\n padding: 14px;\n color: #d8dcff;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n tab-size: 2;\n}\n@media (max-height: 760px) {\n footer.se-import-actions:not(.se-import-actions--inline) {\n margin: 0;\n padding: 0;\n }\n}\n@media (max-width: 900px) {\n .se-import__shell {\n min-height: 0;\n padding: 24px 18px;\n }\n .se-import__content {\n min-height: 0;\n padding-top: 32px;\n }\n .se-import-stepper {\n grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));\n }\n .se-import-step__label {\n font-size: 13px;\n }\n .se-import-grid--four,\n .se-import-grid--two,\n .se-import-transfer {\n grid-template-columns: 1fr;\n }\n .se-import-transfer {\n justify-items: center;\n }\n .se-import-transfer__files {\n width: min(360px, 100%);\n }\n .se-import-option,\n .se-import-row,\n .se-import-asset-row {\n grid-template-columns: 1fr;\n }\n .se-import-mirror-head,\n .se-import-review-card {\n align-items: flex-start;\n flex-direction: column;\n }\n}\n');
|
|
10176
10340
|
|
|
@@ -10261,7 +10425,7 @@ function getJwtInstructionSteps({ pasteHint = "above" } = {}) {
|
|
|
10261
10425
|
}
|
|
10262
10426
|
|
|
10263
10427
|
// src/se-import/ui/SEImportWizard.tsx
|
|
10264
|
-
import { Fragment as Fragment14, jsx as
|
|
10428
|
+
import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
10265
10429
|
function buildOverlaySaveBody(result, name, preview) {
|
|
10266
10430
|
return {
|
|
10267
10431
|
name: name.trim() || result.overlay.name,
|
|
@@ -10340,8 +10504,8 @@ function panelClass(extra) {
|
|
|
10340
10504
|
}
|
|
10341
10505
|
function ErrorPanel({ message, hint }) {
|
|
10342
10506
|
return /* @__PURE__ */ jsxs27("div", { className: "se-import-error", children: [
|
|
10343
|
-
/* @__PURE__ */
|
|
10344
|
-
hint && /* @__PURE__ */
|
|
10507
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-error__title", children: message }),
|
|
10508
|
+
hint && /* @__PURE__ */ jsx38("div", { className: "se-import-error__hint", children: hint })
|
|
10345
10509
|
] });
|
|
10346
10510
|
}
|
|
10347
10511
|
function Field({
|
|
@@ -10351,7 +10515,7 @@ function Field({
|
|
|
10351
10515
|
placeholder,
|
|
10352
10516
|
disabled
|
|
10353
10517
|
}) {
|
|
10354
|
-
return /* @__PURE__ */
|
|
10518
|
+
return /* @__PURE__ */ jsx38("div", { className: "se-import-field", children: /* @__PURE__ */ jsx38(
|
|
10355
10519
|
LSInput,
|
|
10356
10520
|
{
|
|
10357
10521
|
label,
|
|
@@ -10363,7 +10527,7 @@ function Field({
|
|
|
10363
10527
|
) });
|
|
10364
10528
|
}
|
|
10365
10529
|
function ProgressBar({ value, max }) {
|
|
10366
|
-
return /* @__PURE__ */
|
|
10530
|
+
return /* @__PURE__ */ jsx38("progress", { className: "se-import-progress", value: max > 0 ? value : 0, max: max || 1 });
|
|
10367
10531
|
}
|
|
10368
10532
|
function StatusCard({
|
|
10369
10533
|
label,
|
|
@@ -10375,12 +10539,12 @@ function StatusCard({
|
|
|
10375
10539
|
}) {
|
|
10376
10540
|
return /* @__PURE__ */ jsxs27("div", { className: `se-import-stat se-import-stat--${tone}`, children: [
|
|
10377
10541
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-stat__label", children: [
|
|
10378
|
-
icon && /* @__PURE__ */
|
|
10379
|
-
/* @__PURE__ */
|
|
10542
|
+
icon && /* @__PURE__ */ jsx38("img", { src: icon, alt: "", className: "se-import-stat__icon" }),
|
|
10543
|
+
/* @__PURE__ */ jsx38("span", { children: label })
|
|
10380
10544
|
] }),
|
|
10381
|
-
/* @__PURE__ */
|
|
10382
|
-
description && /* @__PURE__ */
|
|
10383
|
-
sub && /* @__PURE__ */
|
|
10545
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-stat__value", children: value }),
|
|
10546
|
+
description && /* @__PURE__ */ jsx38("div", { className: "se-import-stat__description", children: description }),
|
|
10547
|
+
sub && /* @__PURE__ */ jsx38("div", { className: "se-import-stat__sub", children: sub })
|
|
10384
10548
|
] });
|
|
10385
10549
|
}
|
|
10386
10550
|
function CoverageCards({ coverage }) {
|
|
@@ -10421,7 +10585,7 @@ function CoverageCards({ coverage }) {
|
|
|
10421
10585
|
}
|
|
10422
10586
|
].filter((card) => card.value > 0);
|
|
10423
10587
|
if (cards.length === 0) return null;
|
|
10424
|
-
return /* @__PURE__ */
|
|
10588
|
+
return /* @__PURE__ */ jsx38("div", { className: "se-import-grid se-import-grid--stats", children: cards.map((card) => /* @__PURE__ */ jsx38(
|
|
10425
10589
|
StatusCard,
|
|
10426
10590
|
{
|
|
10427
10591
|
label: card.label,
|
|
@@ -10458,7 +10622,7 @@ ${safeJs}
|
|
|
10458
10622
|
})().catch(__seImportShowError);
|
|
10459
10623
|
</script></body></html>`;
|
|
10460
10624
|
}, [html, css, js, data]);
|
|
10461
|
-
return /* @__PURE__ */
|
|
10625
|
+
return /* @__PURE__ */ jsx38(
|
|
10462
10626
|
"iframe",
|
|
10463
10627
|
{
|
|
10464
10628
|
title: "ai-preview",
|
|
@@ -10476,10 +10640,10 @@ function StepHeader({
|
|
|
10476
10640
|
subtitle
|
|
10477
10641
|
}) {
|
|
10478
10642
|
return /* @__PURE__ */ jsxs27("div", { className: "se-import-section-title", children: [
|
|
10479
|
-
/* @__PURE__ */
|
|
10643
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-section-title__num", children: number }),
|
|
10480
10644
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-section-title__content", children: [
|
|
10481
|
-
/* @__PURE__ */
|
|
10482
|
-
subtitle && /* @__PURE__ */
|
|
10645
|
+
/* @__PURE__ */ jsx38("h3", { children: title }),
|
|
10646
|
+
subtitle && /* @__PURE__ */ jsx38("p", { children: subtitle })
|
|
10483
10647
|
] })
|
|
10484
10648
|
] });
|
|
10485
10649
|
}
|
|
@@ -10540,8 +10704,8 @@ function ModeCard({
|
|
|
10540
10704
|
e.currentTarget.style.transform = "translateY(0)";
|
|
10541
10705
|
},
|
|
10542
10706
|
children: [
|
|
10543
|
-
icon && /* @__PURE__ */
|
|
10544
|
-
/* @__PURE__ */
|
|
10707
|
+
icon && /* @__PURE__ */ jsx38("span", { className: "se-import-mode-card__icon", children: /* @__PURE__ */ jsx38("img", { src: icon, alt: "" }) }),
|
|
10708
|
+
/* @__PURE__ */ jsx38(
|
|
10545
10709
|
"div",
|
|
10546
10710
|
{
|
|
10547
10711
|
style: {
|
|
@@ -10552,7 +10716,7 @@ function ModeCard({
|
|
|
10552
10716
|
children: title
|
|
10553
10717
|
}
|
|
10554
10718
|
),
|
|
10555
|
-
/* @__PURE__ */
|
|
10719
|
+
/* @__PURE__ */ jsx38(
|
|
10556
10720
|
"div",
|
|
10557
10721
|
{
|
|
10558
10722
|
style: {
|
|
@@ -10564,7 +10728,7 @@ function ModeCard({
|
|
|
10564
10728
|
children: body
|
|
10565
10729
|
}
|
|
10566
10730
|
),
|
|
10567
|
-
caveat && /* @__PURE__ */
|
|
10731
|
+
caveat && /* @__PURE__ */ jsx38("div", { style: { fontSize: 12, color: "var(--se-muted)", marginTop: "auto" }, children: caveat })
|
|
10568
10732
|
]
|
|
10569
10733
|
}
|
|
10570
10734
|
);
|
|
@@ -10575,7 +10739,7 @@ function StepModePicker({
|
|
|
10575
10739
|
onOpenFullImport
|
|
10576
10740
|
}) {
|
|
10577
10741
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--wide"), children: [
|
|
10578
|
-
/* @__PURE__ */
|
|
10742
|
+
/* @__PURE__ */ jsx38(
|
|
10579
10743
|
StepHeader,
|
|
10580
10744
|
{
|
|
10581
10745
|
number: 1,
|
|
@@ -10593,19 +10757,19 @@ function StepModePicker({
|
|
|
10593
10757
|
marginTop: onOpenFullImport ? 18 : 8
|
|
10594
10758
|
},
|
|
10595
10759
|
children: [
|
|
10596
|
-
onOpenFullImport && /* @__PURE__ */
|
|
10760
|
+
onOpenFullImport && /* @__PURE__ */ jsx38(
|
|
10597
10761
|
ModeCard,
|
|
10598
10762
|
{
|
|
10599
10763
|
title: "Move your full StreamElements setup",
|
|
10600
10764
|
icon: source_se_default,
|
|
10601
10765
|
body: /* @__PURE__ */ jsxs27(Fragment14, { children: [
|
|
10602
|
-
/* @__PURE__ */
|
|
10603
|
-
/* @__PURE__ */
|
|
10766
|
+
/* @__PURE__ */ jsx38("div", { style: { marginBottom: 12 }, children: "Open the dedicated Lumia Stream import page for counters, commands, loyalty, timers, tips, and activity." }),
|
|
10767
|
+
/* @__PURE__ */ jsx38("ul", { className: "se-import-mode-card__features", children: FULL_IMPORT_FEATURES.map((feat) => /* @__PURE__ */ jsx38("li", { children: feat }, feat)) })
|
|
10604
10768
|
] }),
|
|
10605
10769
|
onClick: onOpenFullImport
|
|
10606
10770
|
}
|
|
10607
10771
|
),
|
|
10608
|
-
/* @__PURE__ */
|
|
10772
|
+
/* @__PURE__ */ jsx38(
|
|
10609
10773
|
ModeCard,
|
|
10610
10774
|
{
|
|
10611
10775
|
primary: true,
|
|
@@ -10613,18 +10777,18 @@ function StepModePicker({
|
|
|
10613
10777
|
icon: assets_default,
|
|
10614
10778
|
body: /* @__PURE__ */ jsxs27(Fragment14, { children: [
|
|
10615
10779
|
"Paste a single overlay's public preview URL to bring just that overlay over.",
|
|
10616
|
-
/* @__PURE__ */
|
|
10780
|
+
/* @__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." })
|
|
10617
10781
|
] }),
|
|
10618
10782
|
onClick: onChooseUrl
|
|
10619
10783
|
}
|
|
10620
10784
|
),
|
|
10621
|
-
!onOpenFullImport && /* @__PURE__ */
|
|
10785
|
+
!onOpenFullImport && /* @__PURE__ */ jsx38(
|
|
10622
10786
|
ModeCard,
|
|
10623
10787
|
{
|
|
10624
10788
|
title: "Import everything from StreamElements",
|
|
10625
10789
|
body: /* @__PURE__ */ jsxs27(Fragment14, { children: [
|
|
10626
|
-
/* @__PURE__ */
|
|
10627
|
-
/* @__PURE__ */
|
|
10790
|
+
/* @__PURE__ */ jsx38("div", { style: { marginBottom: 10 }, children: "Connect once and bring over your entire SE setup:" }),
|
|
10791
|
+
/* @__PURE__ */ jsx38(
|
|
10628
10792
|
"ul",
|
|
10629
10793
|
{
|
|
10630
10794
|
style: {
|
|
@@ -10634,7 +10798,7 @@ function StepModePicker({
|
|
|
10634
10798
|
gap: 6,
|
|
10635
10799
|
fontSize: 13
|
|
10636
10800
|
},
|
|
10637
|
-
children: JWT_FEATURES.map((feat) => /* @__PURE__ */
|
|
10801
|
+
children: JWT_FEATURES.map((feat) => /* @__PURE__ */ jsx38("li", { children: feat }, feat))
|
|
10638
10802
|
}
|
|
10639
10803
|
)
|
|
10640
10804
|
] }),
|
|
@@ -10658,7 +10822,7 @@ function StepConnect({
|
|
|
10658
10822
|
onUseUrl
|
|
10659
10823
|
}) {
|
|
10660
10824
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--narrow"), children: [
|
|
10661
|
-
/* @__PURE__ */
|
|
10825
|
+
/* @__PURE__ */ jsx38(
|
|
10662
10826
|
StepHeader,
|
|
10663
10827
|
{
|
|
10664
10828
|
number: 1,
|
|
@@ -10666,7 +10830,7 @@ function StepConnect({
|
|
|
10666
10830
|
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."
|
|
10667
10831
|
}
|
|
10668
10832
|
),
|
|
10669
|
-
/* @__PURE__ */
|
|
10833
|
+
/* @__PURE__ */ jsx38(
|
|
10670
10834
|
Field,
|
|
10671
10835
|
{
|
|
10672
10836
|
label: "StreamElements JWT",
|
|
@@ -10677,15 +10841,15 @@ function StepConnect({
|
|
|
10677
10841
|
}
|
|
10678
10842
|
),
|
|
10679
10843
|
busy && /* @__PURE__ */ jsxs27("div", { className: "se-import-token-loading", "aria-live": "polite", children: [
|
|
10680
|
-
/* @__PURE__ */
|
|
10681
|
-
/* @__PURE__ */
|
|
10844
|
+
/* @__PURE__ */ jsx38("span", { className: "se-import-spinner" }),
|
|
10845
|
+
/* @__PURE__ */ jsx38("span", { children: "Checking your token and loading StreamElements data." })
|
|
10682
10846
|
] }),
|
|
10683
10847
|
channels && channels.length > 1 && /* @__PURE__ */ jsxs27("div", { className: "se-import-help se-import-help--info", children: [
|
|
10684
|
-
/* @__PURE__ */
|
|
10848
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "i" }),
|
|
10685
10849
|
/* @__PURE__ */ jsxs27("div", { children: [
|
|
10686
|
-
/* @__PURE__ */
|
|
10687
|
-
/* @__PURE__ */
|
|
10688
|
-
/* @__PURE__ */
|
|
10850
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__title", children: "Pick a channel" }),
|
|
10851
|
+
/* @__PURE__ */ jsx38("p", { children: "This account has multiple StreamElements channels. Choose which one to import from." }),
|
|
10852
|
+
/* @__PURE__ */ jsx38("div", { style: { display: "grid", gap: 8, marginTop: 12 }, children: channels.map((c) => /* @__PURE__ */ jsxs27(
|
|
10689
10853
|
"label",
|
|
10690
10854
|
{
|
|
10691
10855
|
style: {
|
|
@@ -10699,7 +10863,7 @@ function StepConnect({
|
|
|
10699
10863
|
cursor: "pointer"
|
|
10700
10864
|
},
|
|
10701
10865
|
children: [
|
|
10702
|
-
/* @__PURE__ */
|
|
10866
|
+
/* @__PURE__ */ jsx38(
|
|
10703
10867
|
"input",
|
|
10704
10868
|
{
|
|
10705
10869
|
type: "radio",
|
|
@@ -10708,7 +10872,7 @@ function StepConnect({
|
|
|
10708
10872
|
onChange: () => setSelectedChannelId(c._id)
|
|
10709
10873
|
}
|
|
10710
10874
|
),
|
|
10711
|
-
c.avatar && /* @__PURE__ */
|
|
10875
|
+
c.avatar && /* @__PURE__ */ jsx38(
|
|
10712
10876
|
"img",
|
|
10713
10877
|
{
|
|
10714
10878
|
src: c.avatar,
|
|
@@ -10719,7 +10883,7 @@ function StepConnect({
|
|
|
10719
10883
|
}
|
|
10720
10884
|
),
|
|
10721
10885
|
/* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column" }, children: [
|
|
10722
|
-
/* @__PURE__ */
|
|
10886
|
+
/* @__PURE__ */ jsx38("span", { style: { fontWeight: 700 }, children: c.displayName ?? c.username }),
|
|
10723
10887
|
/* @__PURE__ */ jsxs27("span", { style: { fontSize: 12, color: "var(--se-muted)" }, children: [
|
|
10724
10888
|
c.provider,
|
|
10725
10889
|
" \xB7 ",
|
|
@@ -10733,16 +10897,16 @@ function StepConnect({
|
|
|
10733
10897
|
] })
|
|
10734
10898
|
] }),
|
|
10735
10899
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-help", children: [
|
|
10736
|
-
/* @__PURE__ */
|
|
10900
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "i" }),
|
|
10737
10901
|
/* @__PURE__ */ jsxs27("div", { children: [
|
|
10738
|
-
/* @__PURE__ */
|
|
10739
|
-
/* @__PURE__ */
|
|
10902
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__title", children: "How to find your JWT" }),
|
|
10903
|
+
/* @__PURE__ */ jsx38("ol", { children: getJwtInstructionSteps({ pasteHint: "above" }).map((step, i) => /* @__PURE__ */ jsx38("li", { children: step.content }, i)) })
|
|
10740
10904
|
] })
|
|
10741
10905
|
] }),
|
|
10742
10906
|
/* @__PURE__ */ jsxs27("div", { style: { marginTop: 16, fontSize: 13, color: "var(--se-muted)" }, children: [
|
|
10743
10907
|
"Prefer to import just a single overlay without logging in?",
|
|
10744
10908
|
" ",
|
|
10745
|
-
/* @__PURE__ */
|
|
10909
|
+
/* @__PURE__ */ jsx38(
|
|
10746
10910
|
"a",
|
|
10747
10911
|
{
|
|
10748
10912
|
href: "#",
|
|
@@ -10756,7 +10920,7 @@ function StepConnect({
|
|
|
10756
10920
|
),
|
|
10757
10921
|
"."
|
|
10758
10922
|
] }),
|
|
10759
|
-
error && /* @__PURE__ */
|
|
10923
|
+
error && /* @__PURE__ */ jsx38(ErrorPanel, { message: error.message, hint: error.hint })
|
|
10760
10924
|
] });
|
|
10761
10925
|
}
|
|
10762
10926
|
function StepPickOverlay({
|
|
@@ -10774,7 +10938,7 @@ function StepPickOverlay({
|
|
|
10774
10938
|
const allSelected = total > 0 && selectedCount === total;
|
|
10775
10939
|
const hasAnySelected = selectedCount > 0;
|
|
10776
10940
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--wide"), children: [
|
|
10777
|
-
/* @__PURE__ */
|
|
10941
|
+
/* @__PURE__ */ jsx38(
|
|
10778
10942
|
StepHeader,
|
|
10779
10943
|
{
|
|
10780
10944
|
number: 2,
|
|
@@ -10783,18 +10947,18 @@ function StepPickOverlay({
|
|
|
10783
10947
|
}
|
|
10784
10948
|
),
|
|
10785
10949
|
loading && /* @__PURE__ */ jsxs27("div", { className: "se-import-help se-import-help--info", children: [
|
|
10786
|
-
/* @__PURE__ */
|
|
10787
|
-
/* @__PURE__ */
|
|
10950
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "\u2026" }),
|
|
10951
|
+
/* @__PURE__ */ jsx38("div", { children: "Fetching your StreamElements overlays." })
|
|
10788
10952
|
] }),
|
|
10789
10953
|
error && /* @__PURE__ */ jsxs27(Fragment14, { children: [
|
|
10790
|
-
/* @__PURE__ */
|
|
10791
|
-
/* @__PURE__ */
|
|
10954
|
+
/* @__PURE__ */ jsx38(ErrorPanel, { message: error.message, hint: error.hint }),
|
|
10955
|
+
/* @__PURE__ */ jsx38("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx38(LSButton, { type: "button", color: "secondary", onClick: onRetry, label: "Retry" }) })
|
|
10792
10956
|
] }),
|
|
10793
10957
|
!loading && !error && overlays && overlays.length === 0 && /* @__PURE__ */ jsxs27("div", { className: "se-import-help se-import-help--info", children: [
|
|
10794
|
-
/* @__PURE__ */
|
|
10958
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "i" }),
|
|
10795
10959
|
/* @__PURE__ */ jsxs27("div", { children: [
|
|
10796
|
-
/* @__PURE__ */
|
|
10797
|
-
/* @__PURE__ */
|
|
10960
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__title", children: "No overlays found" }),
|
|
10961
|
+
/* @__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." })
|
|
10798
10962
|
] })
|
|
10799
10963
|
] }),
|
|
10800
10964
|
!loading && !error && overlays && overlays.length > 0 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
|
|
@@ -10822,7 +10986,7 @@ function StepPickOverlay({
|
|
|
10822
10986
|
fontWeight: 600
|
|
10823
10987
|
},
|
|
10824
10988
|
children: [
|
|
10825
|
-
/* @__PURE__ */
|
|
10989
|
+
/* @__PURE__ */ jsx38(
|
|
10826
10990
|
LSCheckbox,
|
|
10827
10991
|
{
|
|
10828
10992
|
checked: allSelected,
|
|
@@ -10842,11 +11006,11 @@ function StepPickOverlay({
|
|
|
10842
11006
|
]
|
|
10843
11007
|
}
|
|
10844
11008
|
),
|
|
10845
|
-
/* @__PURE__ */
|
|
11009
|
+
/* @__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." })
|
|
10846
11010
|
]
|
|
10847
11011
|
}
|
|
10848
11012
|
),
|
|
10849
|
-
/* @__PURE__ */
|
|
11013
|
+
/* @__PURE__ */ jsx38(
|
|
10850
11014
|
"div",
|
|
10851
11015
|
{
|
|
10852
11016
|
className: "se-import-grid",
|
|
@@ -10872,7 +11036,7 @@ function StepPickOverlay({
|
|
|
10872
11036
|
transition: "border-color 120ms, background 120ms"
|
|
10873
11037
|
},
|
|
10874
11038
|
children: [
|
|
10875
|
-
/* @__PURE__ */
|
|
11039
|
+
/* @__PURE__ */ jsx38(
|
|
10876
11040
|
LSCheckbox,
|
|
10877
11041
|
{
|
|
10878
11042
|
checked: selected,
|
|
@@ -10886,7 +11050,7 @@ function StepPickOverlay({
|
|
|
10886
11050
|
}
|
|
10887
11051
|
}
|
|
10888
11052
|
),
|
|
10889
|
-
o.preview ? /* @__PURE__ */
|
|
11053
|
+
o.preview ? /* @__PURE__ */ jsx38(
|
|
10890
11054
|
"img",
|
|
10891
11055
|
{
|
|
10892
11056
|
src: o.preview,
|
|
@@ -10900,7 +11064,7 @@ function StepPickOverlay({
|
|
|
10900
11064
|
},
|
|
10901
11065
|
loading: "lazy"
|
|
10902
11066
|
}
|
|
10903
|
-
) : /* @__PURE__ */
|
|
11067
|
+
) : /* @__PURE__ */ jsx38(
|
|
10904
11068
|
"div",
|
|
10905
11069
|
{
|
|
10906
11070
|
style: {
|
|
@@ -10911,7 +11075,7 @@ function StepPickOverlay({
|
|
|
10911
11075
|
}
|
|
10912
11076
|
}
|
|
10913
11077
|
),
|
|
10914
|
-
/* @__PURE__ */
|
|
11078
|
+
/* @__PURE__ */ jsx38(
|
|
10915
11079
|
"div",
|
|
10916
11080
|
{
|
|
10917
11081
|
style: {
|
|
@@ -10970,7 +11134,7 @@ function StepURL({
|
|
|
10970
11134
|
onSwitchToJwt
|
|
10971
11135
|
}) {
|
|
10972
11136
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--narrow"), children: [
|
|
10973
|
-
/* @__PURE__ */
|
|
11137
|
+
/* @__PURE__ */ jsx38(
|
|
10974
11138
|
StepHeader,
|
|
10975
11139
|
{
|
|
10976
11140
|
number: 1,
|
|
@@ -10978,7 +11142,7 @@ function StepURL({
|
|
|
10978
11142
|
subtitle: "StreamElements (classic or Element). The wizard auto-detects which one you pasted."
|
|
10979
11143
|
}
|
|
10980
11144
|
),
|
|
10981
|
-
/* @__PURE__ */
|
|
11145
|
+
/* @__PURE__ */ jsx38(
|
|
10982
11146
|
LSInput,
|
|
10983
11147
|
{
|
|
10984
11148
|
label: "Overlay URL",
|
|
@@ -10989,14 +11153,14 @@ function StepURL({
|
|
|
10989
11153
|
}
|
|
10990
11154
|
),
|
|
10991
11155
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-help", children: [
|
|
10992
|
-
/* @__PURE__ */
|
|
11156
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__icon", children: "i" }),
|
|
10993
11157
|
/* @__PURE__ */ jsxs27("div", { children: [
|
|
10994
|
-
/* @__PURE__ */
|
|
11158
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-help__title", children: "How to find the overlay URL" }),
|
|
10995
11159
|
/* @__PURE__ */ jsxs27("ol", { children: [
|
|
10996
11160
|
/* @__PURE__ */ jsxs27("li", { children: [
|
|
10997
11161
|
"Open",
|
|
10998
11162
|
" ",
|
|
10999
|
-
/* @__PURE__ */
|
|
11163
|
+
/* @__PURE__ */ jsx38(
|
|
11000
11164
|
"a",
|
|
11001
11165
|
{
|
|
11002
11166
|
href: "https://streamelements.com/dashboard/overlays",
|
|
@@ -11007,14 +11171,14 @@ function StepURL({
|
|
|
11007
11171
|
),
|
|
11008
11172
|
"."
|
|
11009
11173
|
] }),
|
|
11010
|
-
/* @__PURE__ */
|
|
11011
|
-
/* @__PURE__ */
|
|
11012
|
-
/* @__PURE__ */
|
|
11174
|
+
/* @__PURE__ */ jsx38("li", { children: "Click the overlay you want to bring over." }),
|
|
11175
|
+
/* @__PURE__ */ jsx38("li", { children: "Click Copy URL in the top right of the editor." }),
|
|
11176
|
+
/* @__PURE__ */ jsx38("li", { children: "Paste it above." })
|
|
11013
11177
|
] })
|
|
11014
11178
|
] })
|
|
11015
11179
|
] }),
|
|
11016
|
-
error && /* @__PURE__ */
|
|
11017
|
-
error?.editorUrl && onSwitchToJwt && /* @__PURE__ */
|
|
11180
|
+
error && /* @__PURE__ */ jsx38(ErrorPanel, { message: error.message, hint: error.hint }),
|
|
11181
|
+
error?.editorUrl && onSwitchToJwt && /* @__PURE__ */ jsx38("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx38(
|
|
11018
11182
|
LSButton,
|
|
11019
11183
|
{
|
|
11020
11184
|
type: "button",
|
|
@@ -11080,14 +11244,14 @@ function StepDiscovery({
|
|
|
11080
11244
|
}
|
|
11081
11245
|
].filter((card) => card.value > 0);
|
|
11082
11246
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--wide"), children: [
|
|
11083
|
-
/* @__PURE__ */
|
|
11247
|
+
/* @__PURE__ */ jsx38(
|
|
11084
11248
|
StepHeader,
|
|
11085
11249
|
{
|
|
11086
11250
|
number: 2,
|
|
11087
11251
|
title: overlayCount > 1 ? "Here's what we found in your overlays" : "Here's what we found in your overlay"
|
|
11088
11252
|
}
|
|
11089
11253
|
),
|
|
11090
|
-
topCards.length > 0 && /* @__PURE__ */
|
|
11254
|
+
topCards.length > 0 && /* @__PURE__ */ jsx38("div", { className: "se-import-grid se-import-grid--stats", children: topCards.map((card) => /* @__PURE__ */ jsx38(
|
|
11091
11255
|
StatusCard,
|
|
11092
11256
|
{
|
|
11093
11257
|
label: card.label,
|
|
@@ -11097,8 +11261,8 @@ function StepDiscovery({
|
|
|
11097
11261
|
},
|
|
11098
11262
|
card.key
|
|
11099
11263
|
)) }),
|
|
11100
|
-
/* @__PURE__ */
|
|
11101
|
-
reviewCount > 0 && /* @__PURE__ */
|
|
11264
|
+
/* @__PURE__ */ jsx38(CoverageCards, { coverage: result.coverage }),
|
|
11265
|
+
reviewCount > 0 && /* @__PURE__ */ jsx38("div", { className: "se-import-grid se-import-grid--two", children: /* @__PURE__ */ jsx38(
|
|
11102
11266
|
StatusCard,
|
|
11103
11267
|
{
|
|
11104
11268
|
label: "Review choices",
|
|
@@ -11117,18 +11281,18 @@ function StepOptions({
|
|
|
11117
11281
|
hideName = false
|
|
11118
11282
|
}) {
|
|
11119
11283
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--medium"), children: [
|
|
11120
|
-
/* @__PURE__ */
|
|
11284
|
+
/* @__PURE__ */ jsx38(StepHeader, { number: 3, title: "Options", subtitle: "Choose how to handle your assets" }),
|
|
11121
11285
|
/* @__PURE__ */ jsxs27("label", { className: `se-import-option ${assetCount === 0 ? "se-import-option--disabled" : ""}`, children: [
|
|
11122
|
-
/* @__PURE__ */
|
|
11286
|
+
/* @__PURE__ */ jsx38("span", { className: "se-import-option__icon", children: /* @__PURE__ */ jsx38("img", { src: assets_default, alt: "" }) }),
|
|
11123
11287
|
/* @__PURE__ */ jsxs27("span", { className: "se-import-option__body", children: [
|
|
11124
|
-
/* @__PURE__ */
|
|
11125
|
-
/* @__PURE__ */
|
|
11288
|
+
/* @__PURE__ */ jsx38("span", { className: "se-import-option__title", children: "Mirror StreamElements assets to Lumia storage" }),
|
|
11289
|
+
/* @__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." })
|
|
11126
11290
|
] }),
|
|
11127
11291
|
/* @__PURE__ */ jsxs27("span", { className: "se-import-option__count", children: [
|
|
11128
11292
|
assetCount,
|
|
11129
11293
|
" files"
|
|
11130
11294
|
] }),
|
|
11131
|
-
/* @__PURE__ */
|
|
11295
|
+
/* @__PURE__ */ jsx38(
|
|
11132
11296
|
"input",
|
|
11133
11297
|
{
|
|
11134
11298
|
type: "checkbox",
|
|
@@ -11137,9 +11301,9 @@ function StepOptions({
|
|
|
11137
11301
|
onChange: (e) => setOptions({ ...options, mirrorAssets: e.target.checked })
|
|
11138
11302
|
}
|
|
11139
11303
|
),
|
|
11140
|
-
/* @__PURE__ */
|
|
11304
|
+
/* @__PURE__ */ jsx38("span", { className: "se-import-toggle" })
|
|
11141
11305
|
] }),
|
|
11142
|
-
!hideName && /* @__PURE__ */
|
|
11306
|
+
!hideName && /* @__PURE__ */ jsx38(
|
|
11143
11307
|
LSInput,
|
|
11144
11308
|
{
|
|
11145
11309
|
label: "Overlay name",
|
|
@@ -11170,9 +11334,9 @@ function AssetTransferAnimation({ complete }) {
|
|
|
11170
11334
|
className: `se-import-transfer ${complete ? "se-import-transfer--complete" : ""}`,
|
|
11171
11335
|
"aria-hidden": "true",
|
|
11172
11336
|
children: [
|
|
11173
|
-
/* @__PURE__ */
|
|
11337
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-transfer__source se-import-transfer__source--se", children: /* @__PURE__ */ jsx38("img", { src: source_se_default, alt: "" }) }),
|
|
11174
11338
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-transfer__files", children: [
|
|
11175
|
-
/* @__PURE__ */
|
|
11339
|
+
/* @__PURE__ */ jsx38(
|
|
11176
11340
|
"img",
|
|
11177
11341
|
{
|
|
11178
11342
|
className: "se-import-transfer__file se-import-transfer__file--one",
|
|
@@ -11180,7 +11344,7 @@ function AssetTransferAnimation({ complete }) {
|
|
|
11180
11344
|
alt: ""
|
|
11181
11345
|
}
|
|
11182
11346
|
),
|
|
11183
|
-
/* @__PURE__ */
|
|
11347
|
+
/* @__PURE__ */ jsx38(
|
|
11184
11348
|
"img",
|
|
11185
11349
|
{
|
|
11186
11350
|
className: "se-import-transfer__file se-import-transfer__file--two",
|
|
@@ -11188,7 +11352,7 @@ function AssetTransferAnimation({ complete }) {
|
|
|
11188
11352
|
alt: ""
|
|
11189
11353
|
}
|
|
11190
11354
|
),
|
|
11191
|
-
/* @__PURE__ */
|
|
11355
|
+
/* @__PURE__ */ jsx38(
|
|
11192
11356
|
"img",
|
|
11193
11357
|
{
|
|
11194
11358
|
className: "se-import-transfer__file se-import-transfer__file--three",
|
|
@@ -11196,7 +11360,7 @@ function AssetTransferAnimation({ complete }) {
|
|
|
11196
11360
|
alt: ""
|
|
11197
11361
|
}
|
|
11198
11362
|
),
|
|
11199
|
-
/* @__PURE__ */
|
|
11363
|
+
/* @__PURE__ */ jsx38(
|
|
11200
11364
|
"img",
|
|
11201
11365
|
{
|
|
11202
11366
|
className: "se-import-transfer__file se-import-transfer__file--four",
|
|
@@ -11206,8 +11370,8 @@ function AssetTransferAnimation({ complete }) {
|
|
|
11206
11370
|
)
|
|
11207
11371
|
] }),
|
|
11208
11372
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-transfer__source se-import-transfer__source--lumia", children: [
|
|
11209
|
-
/* @__PURE__ */
|
|
11210
|
-
complete && /* @__PURE__ */
|
|
11373
|
+
/* @__PURE__ */ jsx38("img", { src: source_lumia_default, alt: "" }),
|
|
11374
|
+
complete && /* @__PURE__ */ jsx38("span", { className: "se-import-transfer__done", children: "\u2713" })
|
|
11211
11375
|
] })
|
|
11212
11376
|
]
|
|
11213
11377
|
}
|
|
@@ -11227,7 +11391,7 @@ function StepMirror({
|
|
|
11227
11391
|
const complete = !running && completed >= rows.length;
|
|
11228
11392
|
const summary = running ? `Downloading... (${done + reused + keptOnCdn}/${rows.length})` : `Finished. ${done} mirrored${reused ? `, ${reused} reused` : ""}${keptOnCdn ? `, ${keptOnCdn} kept on CDN` : ""}${failed ? `, ${failed} failed` : ""}.`;
|
|
11229
11393
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--wide"), children: [
|
|
11230
|
-
/* @__PURE__ */
|
|
11394
|
+
/* @__PURE__ */ jsx38(
|
|
11231
11395
|
StepHeader,
|
|
11232
11396
|
{
|
|
11233
11397
|
number: 4,
|
|
@@ -11235,20 +11399,20 @@ function StepMirror({
|
|
|
11235
11399
|
subtitle: "We're downloading your assets from StreamElements and preparing them for import."
|
|
11236
11400
|
}
|
|
11237
11401
|
),
|
|
11238
|
-
/* @__PURE__ */
|
|
11402
|
+
/* @__PURE__ */ jsx38(AssetTransferAnimation, { complete }),
|
|
11239
11403
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-mirror-head", children: [
|
|
11240
|
-
/* @__PURE__ */
|
|
11241
|
-
/* @__PURE__ */
|
|
11404
|
+
/* @__PURE__ */ jsx38("span", { children: summary }),
|
|
11405
|
+
/* @__PURE__ */ jsx38(ProgressBar, { value: completed, max: rows.length }),
|
|
11242
11406
|
/* @__PURE__ */ jsxs27("strong", { children: [
|
|
11243
11407
|
percent,
|
|
11244
11408
|
"%"
|
|
11245
11409
|
] })
|
|
11246
11410
|
] }),
|
|
11247
|
-
/* @__PURE__ */
|
|
11248
|
-
/* @__PURE__ */
|
|
11249
|
-
/* @__PURE__ */
|
|
11250
|
-
/* @__PURE__ */
|
|
11251
|
-
row.state === "failed" && /* @__PURE__ */
|
|
11411
|
+
/* @__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: [
|
|
11412
|
+
/* @__PURE__ */ jsx38("img", { className: "se-import-asset-row__icon", src: fileTypeIcon(row.url), alt: "" }),
|
|
11413
|
+
/* @__PURE__ */ jsx38("span", { className: "se-import-asset-row__url", title: row.url, children: row.url }),
|
|
11414
|
+
/* @__PURE__ */ jsx38("span", { className: "se-import-asset-row__state", children: mirrorLabel(row.state) }),
|
|
11415
|
+
row.state === "failed" && /* @__PURE__ */ jsx38(
|
|
11252
11416
|
LSButton,
|
|
11253
11417
|
{
|
|
11254
11418
|
type: "button",
|
|
@@ -11260,7 +11424,7 @@ function StepMirror({
|
|
|
11260
11424
|
label: "Retry"
|
|
11261
11425
|
}
|
|
11262
11426
|
),
|
|
11263
|
-
row.error && /* @__PURE__ */
|
|
11427
|
+
row.error && /* @__PURE__ */ jsx38("span", { className: "se-import-asset-row__error", children: row.error })
|
|
11264
11428
|
] }, row.url)) })
|
|
11265
11429
|
] });
|
|
11266
11430
|
}
|
|
@@ -11284,7 +11448,7 @@ function StepReview({
|
|
|
11284
11448
|
marketplaceAvailable
|
|
11285
11449
|
}) {
|
|
11286
11450
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--medium"), children: [
|
|
11287
|
-
/* @__PURE__ */
|
|
11451
|
+
/* @__PURE__ */ jsx38(
|
|
11288
11452
|
StepHeader,
|
|
11289
11453
|
{
|
|
11290
11454
|
number: 4,
|
|
@@ -11294,10 +11458,10 @@ function StepReview({
|
|
|
11294
11458
|
),
|
|
11295
11459
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-review-card", children: [
|
|
11296
11460
|
/* @__PURE__ */ jsxs27("div", { children: [
|
|
11297
|
-
/* @__PURE__ */
|
|
11298
|
-
/* @__PURE__ */
|
|
11461
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-review-card__type", children: item.seWidget.type }),
|
|
11462
|
+
/* @__PURE__ */ jsx38("p", { children: item.reason })
|
|
11299
11463
|
] }),
|
|
11300
|
-
/* @__PURE__ */
|
|
11464
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-review-card__status", children: item.flaggedOff ? "Auto-import disabled" : item.status })
|
|
11301
11465
|
] }),
|
|
11302
11466
|
remainingCount > 1 && /* Bulk-action row — shortcut to wrap up the review step when there are still
|
|
11303
11467
|
several unactioned widgets and the user doesn't want to walk each one. */
|
|
@@ -11306,7 +11470,7 @@ function StepReview({
|
|
|
11306
11470
|
remainingCount,
|
|
11307
11471
|
" remaining"
|
|
11308
11472
|
] }),
|
|
11309
|
-
/* @__PURE__ */
|
|
11473
|
+
/* @__PURE__ */ jsx38(
|
|
11310
11474
|
LSButton,
|
|
11311
11475
|
{
|
|
11312
11476
|
type: "button",
|
|
@@ -11316,7 +11480,7 @@ function StepReview({
|
|
|
11316
11480
|
label: "Keep all placeholders"
|
|
11317
11481
|
}
|
|
11318
11482
|
),
|
|
11319
|
-
/* @__PURE__ */
|
|
11483
|
+
/* @__PURE__ */ jsx38(
|
|
11320
11484
|
LSButton,
|
|
11321
11485
|
{
|
|
11322
11486
|
type: "button",
|
|
@@ -11327,12 +11491,12 @@ function StepReview({
|
|
|
11327
11491
|
}
|
|
11328
11492
|
)
|
|
11329
11493
|
] }),
|
|
11330
|
-
state === "generating" && /* @__PURE__ */
|
|
11494
|
+
state === "generating" && /* @__PURE__ */ jsx38("div", { className: "se-import-muted", children: "Generating with AI. This can take 30-90 seconds." }),
|
|
11331
11495
|
state === "generated" && generated && /* @__PURE__ */ jsxs27("div", { className: "se-import-generated", children: [
|
|
11332
|
-
/* @__PURE__ */
|
|
11496
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-generated__title", children: "Preview" }),
|
|
11333
11497
|
(() => {
|
|
11334
11498
|
const landing = getAILandingBounds(item.seWidget, canvas);
|
|
11335
|
-
return /* @__PURE__ */
|
|
11499
|
+
return /* @__PURE__ */ jsx38(
|
|
11336
11500
|
CustomOverlayPreview,
|
|
11337
11501
|
{
|
|
11338
11502
|
html: generated.html ?? "",
|
|
@@ -11345,8 +11509,8 @@ function StepReview({
|
|
|
11345
11509
|
);
|
|
11346
11510
|
})(),
|
|
11347
11511
|
/* @__PURE__ */ jsxs27("details", { className: "se-import-code", children: [
|
|
11348
|
-
/* @__PURE__ */
|
|
11349
|
-
/* @__PURE__ */
|
|
11512
|
+
/* @__PURE__ */ jsx38("summary", { children: "Generated code" }),
|
|
11513
|
+
/* @__PURE__ */ jsx38("pre", { children: JSON.stringify(
|
|
11350
11514
|
{
|
|
11351
11515
|
html: generated.html ?? "",
|
|
11352
11516
|
css: generated.css ?? "",
|
|
@@ -11357,15 +11521,15 @@ function StepReview({
|
|
|
11357
11521
|
) })
|
|
11358
11522
|
] })
|
|
11359
11523
|
] }),
|
|
11360
|
-
error && /* @__PURE__ */
|
|
11524
|
+
error && /* @__PURE__ */ jsx38(ErrorPanel, { message: error }),
|
|
11361
11525
|
/* @__PURE__ */ jsxs27("details", { className: "se-import-code", children: [
|
|
11362
|
-
/* @__PURE__ */
|
|
11363
|
-
/* @__PURE__ */
|
|
11526
|
+
/* @__PURE__ */ jsx38("summary", { children: "Original StreamElements config" }),
|
|
11527
|
+
/* @__PURE__ */ jsx38("pre", { children: JSON.stringify(item.seWidget.variables ?? {}, null, 2) })
|
|
11364
11528
|
] }),
|
|
11365
|
-
/* @__PURE__ */
|
|
11366
|
-
/* @__PURE__ */
|
|
11367
|
-
/* @__PURE__ */
|
|
11368
|
-
/* @__PURE__ */
|
|
11529
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-actions se-import-actions--inline", children: state === "generated" ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
|
|
11530
|
+
/* @__PURE__ */ jsx38(LSButton, { type: "button", color: "secondary", onClick: onRetry, label: "Try again" }),
|
|
11531
|
+
/* @__PURE__ */ jsx38(LSButton, { type: "button", color: "secondary", onClick: onSkip, label: "Skip this widget" }),
|
|
11532
|
+
/* @__PURE__ */ jsx38(
|
|
11369
11533
|
LSButton,
|
|
11370
11534
|
{
|
|
11371
11535
|
type: "button",
|
|
@@ -11375,7 +11539,7 @@ function StepReview({
|
|
|
11375
11539
|
}
|
|
11376
11540
|
)
|
|
11377
11541
|
] }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
|
|
11378
|
-
!item.flaggedOff && /* @__PURE__ */
|
|
11542
|
+
!item.flaggedOff && /* @__PURE__ */ jsx38(
|
|
11379
11543
|
LSButton,
|
|
11380
11544
|
{
|
|
11381
11545
|
type: "button",
|
|
@@ -11385,7 +11549,7 @@ function StepReview({
|
|
|
11385
11549
|
label: "Keep placeholder"
|
|
11386
11550
|
}
|
|
11387
11551
|
),
|
|
11388
|
-
/* @__PURE__ */
|
|
11552
|
+
/* @__PURE__ */ jsx38(
|
|
11389
11553
|
LSButton,
|
|
11390
11554
|
{
|
|
11391
11555
|
type: "button",
|
|
@@ -11395,7 +11559,7 @@ function StepReview({
|
|
|
11395
11559
|
label: "Skip"
|
|
11396
11560
|
}
|
|
11397
11561
|
),
|
|
11398
|
-
marketplaceAvailable && /* @__PURE__ */
|
|
11562
|
+
marketplaceAvailable && /* @__PURE__ */ jsx38(
|
|
11399
11563
|
LSButton,
|
|
11400
11564
|
{
|
|
11401
11565
|
type: "button",
|
|
@@ -11405,7 +11569,7 @@ function StepReview({
|
|
|
11405
11569
|
label: "Pick from Marketplace"
|
|
11406
11570
|
}
|
|
11407
11571
|
),
|
|
11408
|
-
/* @__PURE__ */
|
|
11572
|
+
/* @__PURE__ */ jsx38(
|
|
11409
11573
|
LSButton,
|
|
11410
11574
|
{
|
|
11411
11575
|
type: "button",
|
|
@@ -11416,7 +11580,7 @@ function StepReview({
|
|
|
11416
11580
|
}
|
|
11417
11581
|
)
|
|
11418
11582
|
] }) }),
|
|
11419
|
-
item.flaggedOff && !marketplaceAvailable && state !== "generated" && /* @__PURE__ */
|
|
11583
|
+
item.flaggedOff && !marketplaceAvailable && state !== "generated" && /* @__PURE__ */ jsx38("div", { className: "se-import-muted", children: "No curated Marketplace replacement is configured for this widget yet." })
|
|
11420
11584
|
] });
|
|
11421
11585
|
}
|
|
11422
11586
|
var CUSTOM_WIDGET_TABS = [
|
|
@@ -11442,8 +11606,8 @@ function CustomWidgetCard({ widget }) {
|
|
|
11442
11606
|
}, [value]);
|
|
11443
11607
|
if (tabs.length === 0) return null;
|
|
11444
11608
|
return /* @__PURE__ */ jsxs27("div", { className: "se-import-cw", children: [
|
|
11445
|
-
/* @__PURE__ */
|
|
11446
|
-
/* @__PURE__ */
|
|
11609
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-cw__title", children: widget.title }),
|
|
11610
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-cw__tabs", role: "tablist", children: tabs.map(({ key, label }) => /* @__PURE__ */ jsx38(
|
|
11447
11611
|
"button",
|
|
11448
11612
|
{
|
|
11449
11613
|
type: "button",
|
|
@@ -11456,17 +11620,17 @@ function CustomWidgetCard({ widget }) {
|
|
|
11456
11620
|
key
|
|
11457
11621
|
)) }),
|
|
11458
11622
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-cw__body", children: [
|
|
11459
|
-
/* @__PURE__ */
|
|
11460
|
-
/* @__PURE__ */
|
|
11623
|
+
/* @__PURE__ */ jsx38("button", { type: "button", className: "se-import-cw__copy", onClick: handleCopy, children: copied ? "Copied!" : "Copy" }),
|
|
11624
|
+
/* @__PURE__ */ jsx38("pre", { className: "se-import-cw__code", children: value })
|
|
11461
11625
|
] })
|
|
11462
11626
|
] });
|
|
11463
11627
|
}
|
|
11464
11628
|
function CustomWidgetReview({ widgets }) {
|
|
11465
11629
|
if (widgets.length === 0) return null;
|
|
11466
11630
|
return /* @__PURE__ */ jsxs27("div", { className: "se-import-cw-review", children: [
|
|
11467
|
-
/* @__PURE__ */
|
|
11468
|
-
/* @__PURE__ */
|
|
11469
|
-
widgets.map((widget, index) => /* @__PURE__ */
|
|
11631
|
+
/* @__PURE__ */ jsx38("h3", { children: "Custom widgets" }),
|
|
11632
|
+
/* @__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.` }),
|
|
11633
|
+
widgets.map((widget, index) => /* @__PURE__ */ jsx38(CustomWidgetCard, { widget }, `${widget.title}-${index}`))
|
|
11470
11634
|
] });
|
|
11471
11635
|
}
|
|
11472
11636
|
function StepConfirm({
|
|
@@ -11491,20 +11655,20 @@ function StepConfirm({
|
|
|
11491
11655
|
{}
|
|
11492
11656
|
);
|
|
11493
11657
|
return /* @__PURE__ */ jsxs27("div", { className: panelClass("se-import-panel--confirm"), children: [
|
|
11494
|
-
/* @__PURE__ */
|
|
11658
|
+
/* @__PURE__ */ jsx38(StepHeader, { number: 5, title: "Confirm", subtitle: "Review and confirm your import" }),
|
|
11495
11659
|
/* @__PURE__ */ jsxs27("div", { className: "se-import-overview", children: [
|
|
11496
|
-
/* @__PURE__ */
|
|
11497
|
-
/* @__PURE__ */
|
|
11660
|
+
/* @__PURE__ */ jsx38("h3", { children: "Overview" }),
|
|
11661
|
+
/* @__PURE__ */ jsx38(
|
|
11498
11662
|
Row,
|
|
11499
11663
|
{
|
|
11500
11664
|
label: overlayCount > 1 ? "Overlays to create" : "Overlay",
|
|
11501
11665
|
value: overlayCount > 1 ? `${overlayCount}` : options.name || result.overlay.name
|
|
11502
11666
|
}
|
|
11503
11667
|
),
|
|
11504
|
-
/* @__PURE__ */
|
|
11505
|
-
/* @__PURE__ */
|
|
11506
|
-
/* @__PURE__ */
|
|
11507
|
-
/* @__PURE__ */
|
|
11668
|
+
/* @__PURE__ */ jsx38(Row, { label: "Layers imported", value: `${layerCount}` }),
|
|
11669
|
+
/* @__PURE__ */ jsx38(Row, { label: "Widgets", value: `${widgets}` }),
|
|
11670
|
+
/* @__PURE__ */ jsx38(Row, { label: "Alerts", value: `${alertCount}` }),
|
|
11671
|
+
/* @__PURE__ */ jsx38(
|
|
11508
11672
|
Row,
|
|
11509
11673
|
{
|
|
11510
11674
|
label: "Assets to import",
|
|
@@ -11512,25 +11676,25 @@ function StepConfirm({
|
|
|
11512
11676
|
meta: options.mirrorAssets ? `Mirrored to Lumia storage (${mirrored})` : "Skipped"
|
|
11513
11677
|
}
|
|
11514
11678
|
),
|
|
11515
|
-
/* @__PURE__ */
|
|
11679
|
+
/* @__PURE__ */ jsx38(
|
|
11516
11680
|
Row,
|
|
11517
11681
|
{
|
|
11518
11682
|
label: "Import behavior",
|
|
11519
11683
|
value: options.mirrorAssets ? "Mirror assets and rewrite URLs" : "Keep original asset URLs"
|
|
11520
11684
|
}
|
|
11521
11685
|
),
|
|
11522
|
-
reviewBuckets.generated ? /* @__PURE__ */
|
|
11523
|
-
reviewBuckets.skipped ? /* @__PURE__ */
|
|
11524
|
-
reviewBuckets.kept ? /* @__PURE__ */
|
|
11686
|
+
reviewBuckets.generated ? /* @__PURE__ */ jsx38(Row, { label: "Generated with AI", value: `${reviewBuckets.generated}` }) : null,
|
|
11687
|
+
reviewBuckets.skipped ? /* @__PURE__ */ jsx38(Row, { label: "Skipped", value: `${reviewBuckets.skipped}` }) : null,
|
|
11688
|
+
reviewBuckets.kept ? /* @__PURE__ */ jsx38(Row, { label: "Kept as placeholder", value: `${reviewBuckets.kept}` }) : null
|
|
11525
11689
|
] }),
|
|
11526
|
-
isAdmin && result.customWidgets && result.customWidgets.length > 0 && /* @__PURE__ */
|
|
11690
|
+
isAdmin && result.customWidgets && result.customWidgets.length > 0 && /* @__PURE__ */ jsx38(CustomWidgetReview, { widgets: result.customWidgets })
|
|
11527
11691
|
] });
|
|
11528
11692
|
}
|
|
11529
11693
|
function Row({ label, value, meta }) {
|
|
11530
11694
|
return /* @__PURE__ */ jsxs27("div", { className: "se-import-row", children: [
|
|
11531
|
-
/* @__PURE__ */
|
|
11532
|
-
/* @__PURE__ */
|
|
11533
|
-
meta && /* @__PURE__ */
|
|
11695
|
+
/* @__PURE__ */ jsx38("span", { children: label }),
|
|
11696
|
+
/* @__PURE__ */ jsx38("strong", { children: value }),
|
|
11697
|
+
meta && /* @__PURE__ */ jsx38("em", { children: meta })
|
|
11534
11698
|
] });
|
|
11535
11699
|
}
|
|
11536
11700
|
function SEImportWizard({
|
|
@@ -12423,21 +12587,21 @@ function SEImportWizard({
|
|
|
12423
12587
|
return false;
|
|
12424
12588
|
})();
|
|
12425
12589
|
const activeIndex = visibleSteps.findIndex((item) => item.key === step);
|
|
12426
|
-
return /* @__PURE__ */
|
|
12427
|
-
visibleSteps.length > 0 && /* @__PURE__ */
|
|
12590
|
+
return /* @__PURE__ */ jsx38("div", { className: "se-import", children: /* @__PURE__ */ jsxs27("div", { className: "se-import__shell", children: [
|
|
12591
|
+
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(
|
|
12428
12592
|
"div",
|
|
12429
12593
|
{
|
|
12430
12594
|
className: stepClass(index < activeIndex, index === activeIndex),
|
|
12431
12595
|
children: [
|
|
12432
|
-
/* @__PURE__ */
|
|
12433
|
-
/* @__PURE__ */
|
|
12434
|
-
/* @__PURE__ */
|
|
12596
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-step__label", children: item.label }),
|
|
12597
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-step__line" }),
|
|
12598
|
+
/* @__PURE__ */ jsx38("div", { className: "se-import-step__dot", children: index < activeIndex ? "\u2713" : index + 1 })
|
|
12435
12599
|
]
|
|
12436
12600
|
},
|
|
12437
12601
|
item.key
|
|
12438
12602
|
)) }) }),
|
|
12439
12603
|
/* @__PURE__ */ jsxs27("main", { className: "se-import__content", children: [
|
|
12440
|
-
step === "mode" && /* @__PURE__ */
|
|
12604
|
+
step === "mode" && /* @__PURE__ */ jsx38(
|
|
12441
12605
|
StepModePicker,
|
|
12442
12606
|
{
|
|
12443
12607
|
onChooseJwt: () => {
|
|
@@ -12451,7 +12615,7 @@ function SEImportWizard({
|
|
|
12451
12615
|
onOpenFullImport: bindings.onOpenFullImport
|
|
12452
12616
|
}
|
|
12453
12617
|
),
|
|
12454
|
-
step === "connect" && /* @__PURE__ */
|
|
12618
|
+
step === "connect" && /* @__PURE__ */ jsx38(
|
|
12455
12619
|
StepConnect,
|
|
12456
12620
|
{
|
|
12457
12621
|
jwt,
|
|
@@ -12467,7 +12631,7 @@ function SEImportWizard({
|
|
|
12467
12631
|
}
|
|
12468
12632
|
}
|
|
12469
12633
|
),
|
|
12470
|
-
step === "pick" && /* @__PURE__ */
|
|
12634
|
+
step === "pick" && /* @__PURE__ */ jsx38(
|
|
12471
12635
|
StepPickOverlay,
|
|
12472
12636
|
{
|
|
12473
12637
|
overlays: overlayList,
|
|
@@ -12480,7 +12644,7 @@ function SEImportWizard({
|
|
|
12480
12644
|
onRetry: () => seClient && void loadOverlayList(seClient)
|
|
12481
12645
|
}
|
|
12482
12646
|
),
|
|
12483
|
-
step === "url" && /* @__PURE__ */
|
|
12647
|
+
step === "url" && /* @__PURE__ */ jsx38(
|
|
12484
12648
|
StepURL,
|
|
12485
12649
|
{
|
|
12486
12650
|
url,
|
|
@@ -12494,7 +12658,7 @@ function SEImportWizard({
|
|
|
12494
12658
|
}
|
|
12495
12659
|
}
|
|
12496
12660
|
),
|
|
12497
|
-
step === "discovery" && result && /* @__PURE__ */
|
|
12661
|
+
step === "discovery" && result && /* @__PURE__ */ jsx38(
|
|
12498
12662
|
StepDiscovery,
|
|
12499
12663
|
{
|
|
12500
12664
|
result,
|
|
@@ -12502,7 +12666,7 @@ function SEImportWizard({
|
|
|
12502
12666
|
overlayCount: Math.max(1, activeOverlaySummaries.length)
|
|
12503
12667
|
}
|
|
12504
12668
|
),
|
|
12505
|
-
step === "options" && /* @__PURE__ */
|
|
12669
|
+
step === "options" && /* @__PURE__ */ jsx38(
|
|
12506
12670
|
StepOptions,
|
|
12507
12671
|
{
|
|
12508
12672
|
options,
|
|
@@ -12511,8 +12675,8 @@ function SEImportWizard({
|
|
|
12511
12675
|
hideName: activeOverlaySummaries.length > 1
|
|
12512
12676
|
}
|
|
12513
12677
|
),
|
|
12514
|
-
step === "mirror" && /* @__PURE__ */
|
|
12515
|
-
step === "review" && currentItem && result && !marketplacePickerOpen && /* @__PURE__ */
|
|
12678
|
+
step === "mirror" && /* @__PURE__ */ jsx38(StepMirror, { rows: mirrorRows, running: mirrorRunning, onRetry: retryMirrorRow }),
|
|
12679
|
+
step === "review" && currentItem && result && !marketplacePickerOpen && /* @__PURE__ */ jsx38(
|
|
12516
12680
|
StepReview,
|
|
12517
12681
|
{
|
|
12518
12682
|
item: currentItem,
|
|
@@ -12539,7 +12703,7 @@ function SEImportWizard({
|
|
|
12539
12703
|
marketplaceAvailable: hasMarketplaceCandidates(currentItem.seWidget.type)
|
|
12540
12704
|
}
|
|
12541
12705
|
),
|
|
12542
|
-
step === "review" && currentItem && marketplacePickerOpen && /* @__PURE__ */
|
|
12706
|
+
step === "review" && currentItem && marketplacePickerOpen && /* @__PURE__ */ jsx38("div", { className: panelClass("se-import-panel--wide"), children: /* @__PURE__ */ jsx38(
|
|
12543
12707
|
MarketplacePicker,
|
|
12544
12708
|
{
|
|
12545
12709
|
seWidgetType: currentItem.seWidget.type,
|
|
@@ -12549,7 +12713,7 @@ function SEImportWizard({
|
|
|
12549
12713
|
onCancel: () => setMarketplacePickerOpen(false)
|
|
12550
12714
|
}
|
|
12551
12715
|
) }),
|
|
12552
|
-
step === "confirm" && result && /* @__PURE__ */
|
|
12716
|
+
step === "confirm" && result && /* @__PURE__ */ jsx38(
|
|
12553
12717
|
StepConfirm,
|
|
12554
12718
|
{
|
|
12555
12719
|
result,
|
|
@@ -12562,7 +12726,7 @@ function SEImportWizard({
|
|
|
12562
12726
|
)
|
|
12563
12727
|
] }),
|
|
12564
12728
|
/* @__PURE__ */ jsxs27("footer", { className: "se-import-actions", children: [
|
|
12565
|
-
step !== "mode" && /* @__PURE__ */
|
|
12729
|
+
step !== "mode" && /* @__PURE__ */ jsx38(
|
|
12566
12730
|
LSButton,
|
|
12567
12731
|
{
|
|
12568
12732
|
type: "button",
|
|
@@ -12573,7 +12737,7 @@ function SEImportWizard({
|
|
|
12573
12737
|
label: "Back"
|
|
12574
12738
|
}
|
|
12575
12739
|
),
|
|
12576
|
-
step !== "mode" && /* @__PURE__ */
|
|
12740
|
+
step !== "mode" && /* @__PURE__ */ jsx38(
|
|
12577
12741
|
LSButton,
|
|
12578
12742
|
{
|
|
12579
12743
|
type: "button",
|