@lumiastream/ui 0.7.6 → 0.8.0

package/dist/ModQueueList.js

@@ -0,0 +1,361 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/lumia-ui.css
+styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n  max-height: none !important;\n}\n.ls-color-picker__gradient {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  min-width: 24px;\n  margin-left: 0.35rem;\n  border-radius: var(--radius, 1rem);\n  background: var(--primary, #ff4076) !important;\n  color: var(--alwayswhite, var(--white, #fff)) !important;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n  user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n  color: currentcolor !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n  filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n  filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n  width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n  position: relative;\n  min-width: 0;\n  width: 100%;\n  min-height: var(--ls-control-height);\n  margin: 0;\n  border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0 0.875rem 0.5rem 0.875rem;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n  display: block;\n  width: auto;\n  max-width: calc(100% - 1rem);\n  margin: 0;\n  padding: 0 0.25rem;\n  color: var(--neutralLight1, var(--white, #fff));\n  font-size: 0.875rem;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n  display: flex;\n  min-width: 0;\n  min-height: calc(var(--ls-control-height) - 14px);\n  align-items: center;\n  gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n  flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n  justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n  min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n  display: block;\n  margin-top: 0.25rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.75rem;\n  line-height: 1.25;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radius, 1rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff !important;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n.ls-chat-message {\n  position: relative;\n  font-size: 0.95em;\n  line-height: 1.4;\n  color: var(--white, var(--neutralLight1, #fff));\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.ls-chat-message img {\n  display: inline-block;\n}\n.ls-chat-message__reply {\n  display: block;\n  margin-bottom: 0.15em;\n  font-size: 0.82em;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n  vertical-align: middle;\n}\n.ls-chat-message__avatar {\n  width: 1.3em;\n  height: 1.3em;\n  border-radius: 9999px;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site {\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n  width: 1.2em;\n  height: 1.2em;\n  vertical-align: middle;\n}\n.ls-chat-message__time {\n  margin-right: 0.35em;\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__badges {\n  vertical-align: middle;\n}\n.ls-chat-message__badges img {\n  height: 1.05em;\n  vertical-align: middle;\n  margin-right: 0.25em;\n}\n.ls-chat-message__username {\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n  cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-chat-message__text {\n  vertical-align: middle;\n}\n.ls-chat-message__text img {\n  vertical-align: middle;\n}\n.ls-chat-message__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.ls-chat-message__modbar {\n  display: flex;\n  overflow: hidden;\n  border-radius: 0.75rem;\n  background-color: var(--separator, #0a0821);\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n  background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n  color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n  display: flex;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 1em;\n  border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n  border-left: 4px solid var(--primary, #ff4076);\n  border-radius: 1em;\n  background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n  color: var(--white, var(--neutralLight1, #fff));\n  padding: 1em;\n  line-height: 1.35;\n}\n.ls-eventlist-item__main {\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  min-width: 0;\n}\n.ls-eventlist-item__identity {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5em;\n  min-width: 1.5em;\n  height: 1.5em;\n  overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n  border-radius: 1em;\n  background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ls-eventlist-item__username {\n  min-width: 0;\n  font-weight: 700;\n  font-size: 0.875em;\n  word-break: break-all;\n}\n.ls-eventlist-item__body {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__message {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n  min-width: 0;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-eventlist-item__time {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.875em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  align-self: center;\n  gap: 0.5em;\n  flex-shrink: 0;\n}\n.ls-modqueue-item {\n  display: flex;\n  align-items: stretch;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n  padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n  display: flex;\n  height: 4rem;\n  width: 4rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  color: var(--primary, #ff4076);\n  font-size: 1.75rem;\n  line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n}\n.ls-modqueue-item__body {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 9999px;\n  border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n  font-weight: 700;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 12rem;\n}\n.ls-modqueue-item__command {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  padding: 0.05rem 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n  font-size: 0.875rem;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-modqueue-item__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n  padding: 0;\n  border-radius: 0.5rem;\n  transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n  background-color: transparent;\n  opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n}\n.ls-modlog {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n  display: flex;\n  justify-content: flex-end;\n}\n.ls-modlog__clear {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 0;\n  border-radius: 0.75rem;\n  background: transparent;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n  color: var(--white, #fff);\n}\n.ls-modlog__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.375rem;\n  overflow: auto;\n}\n.ls-modlog__row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n  background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-modlog__avatar {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 9999px;\n}\n.ls-modlog__title {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.375rem;\n  padding: 0.05rem 0.4rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--ls-modlog-accent, var(--primary, #ff4076));\n  background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.6875rem;\n  font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.35;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n  flex: 1;\n}\n.ls-songreq__empty {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.75rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n  height: 3.5rem;\n  width: 3.5rem;\n  flex-shrink: 0;\n  border-radius: 0.75rem;\n  object-fit: cover;\n}\n.ls-songreq__nowbody {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n.ls-songreq__title {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__artist {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n  overflow: hidden;\n  font-size: 0.6875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n  margin-top: 0.375rem;\n  height: 0.375rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n  height: 100%;\n  border-radius: 9999px;\n  background-color: var(--success, #1db954);\n  transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-songreq__btn {\n  display: inline-flex;\n  height: 2rem;\n  width: 2rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background: transparent;\n  font-size: 0.875rem;\n  line-height: 1;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-songreq__queue {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n}\n.ls-songreq__queuehead {\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: auto;\n}\n.ls-songreq__queueempty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.375rem 0.5rem;\n  transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.ls-songreq__itembody {\n  min-width: 0;\n  flex: 1;\n}\n.ls-songreq__itemtitle {\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-modqueue__search-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.5rem;\n  border: 1px solid currentcolor;\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n  opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n  color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n}\n.ls-modqueue__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-modqueue__readonly {\n  font-size: 0.625rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n  flex-shrink: 0;\n}\n.ls-chatbox {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ls-chatbox__list {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n.ls-chatbox__jump {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  backdrop-filter: blur(4px);\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n  transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n  margin-left: 0.25rem;\n  border-radius: 9999px;\n  background-color: var(--primary, #ff4076);\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n  flex: 2 1 0%;\n  min-width: 100px;\n  width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n  flex: 1 1 0%;\n  min-width: 7.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n  flex: 0 1 auto;\n  min-width: 5.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n  height: 55px;\n  flex-shrink: 0;\n}\n.ls-panel {\n  --ls-panel-padding: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: var(--ls-panel-bg, #1b1834);\n  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n}\n.ls-panel__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n  min-width: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-panel__title--label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-panel__close {\n  display: flex;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.5rem;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-panel__body {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n  padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n  flex-shrink: 0;\n  padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ls-modal--absolute {\n  position: absolute;\n}\n.ls-modal__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n  backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n  position: relative;\n  width: 100%;\n  max-width: var(--ls-modal-max-width, min(560px, 92vw));\n  max-height: 85vh;\n}\n.ls-modal__card--fit {\n  width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog {\n  margin-top: 0.5rem;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog__card {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  border-radius: 1rem;\n  outline: none;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n  padding: 1rem;\n}\n.ls-dialog__card--full {\n  border-radius: 0;\n}\n.ls-dialog__top {\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n.ls-dialog__top--full {\n  margin-top: 2rem;\n}\n.ls-dialog__top-side {\n  flex: 1;\n}\n.ls-dialog__title {\n  font-size: 1.25rem;\n  color: var(--white, #fff);\n}\n.ls-dialog__close {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  user-select: none;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-dialog__close-label {\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: auto;\n}\n.ls-dialog__bottom {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-bottom: 1rem;\n}\n.ls-eventlist {\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n  line-height: 1.35;\n}\n.ls-eventlist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5em;\n  overflow-y: auto;\n}\n.ls-eventlist__row {\n  flex-shrink: 0;\n  animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  border-radius: 1em;\n  padding: 1em;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n  width: 1.6em;\n  height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1.5em);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ls-streamstatus {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: auto;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.625rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n  position: relative;\n  display: inline-flex;\n  height: 0.75rem;\n  width: 0.75rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n  animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ls-streamstatus__indicator-dot {\n  position: relative;\n  height: 0.75rem;\n  width: 0.75rem;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n  background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n.ls-streamstatus__status-label {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n  display: flex;\n  flex-shrink: 0;\n  align-items: stretch;\n  gap: 0.5rem;\n}\n.ls-streamstatus__total {\n  display: flex;\n  flex-shrink: 0;\n  flex-direction: column;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n  font-size: 1.875rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n  margin-top: 0.25rem;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.25rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n  display: grid;\n  flex-shrink: 0;\n  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n  gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 0.125rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n  display: inline-flex;\n  margin-left: auto;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n  overflow: hidden;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n  width: 10px;\n  flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-viewerslist__head {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-viewerslist__count {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n  min-width: 0;\n  flex: 1;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  color: var(--white, #fff);\n  outline: none;\n}\n.ls-viewerslist__search:focus {\n  border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n  color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n  min-width: 0;\n  flex: 1;\n}\n.ls-viewerslist__hint {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.125rem;\n  overflow: auto;\n}\n.ls-viewerslist__group {\n  margin-top: 0.375rem;\n  flex-shrink: 0;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n  margin-top: 0;\n}\n.ls-viewerslist__viewer {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.25rem 0.375rem;\n  transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.ls-viewerslist__platform {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-viewerslist__username {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n  box-sizing: border-box;\n}\n.ls-shortcutdock {\n  display: grid;\n  width: 100%;\n  align-content: start;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-shortcutdock--disabled {\n  opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n  position: relative;\n  min-width: 0;\n}\n.ls-shortcutdock__btn {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n  background-color: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  color: var(--white, #fff);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n  border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n  cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.15rem;\n  line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n  font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n  width: 2rem;\n  height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n  width: 60%;\n  height: 60%;\n  border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  padding-inline: 0.125rem;\n  text-align: center;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1.2;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n  font-size: clamp(1rem, 1.4vw, 1.5rem);\n  font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n  width: 100%;\n  height: 100%;\n  font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n  width: 60%;\n  height: 60%;\n}\n.ls-shortcutdock__remove {\n  position: absolute;\n  top: -0.375rem;\n  right: -0.375rem;\n  z-index: 1;\n  display: flex;\n  height: 1.25rem;\n  width: 1.25rem;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 9999px;\n  background-color: var(--error, #fd5454);\n  padding: 0;\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: var(--white, #fff);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n  transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n  opacity: 0.8;\n}\n.ls-shortcutdock__add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  font-size: 1.5rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n  color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n  box-sizing: border-box;\n}\n.ls-goals {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ls-goals__empty {\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  font-size: 0.875rem;\n}\n.ls-goals__icon {\n  display: flex;\n  align-self: center;\n  align-items: center;\n  line-height: 1;\n}\n.ls-goals__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 600;\n  color: var(--white, #fff);\n}\n.ls-goals__value {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n  opacity: 0.6;\n}\n.ls-goals__bar {\n  margin-top: 0.375rem;\n  height: 0.625rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n  height: 100%;\n  border-radius: 9999px;\n  background-image:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n      var(--ls-goals-accent, var(--primary, #ff4076)));\n  transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n  flex-shrink: 0;\n  min-width: 2.75rem;\n  text-align: right;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n  display: inline-block;\n  height: 1.15em;\n  width: auto;\n  max-width: 1.5em;\n  vertical-align: middle;\n  object-fit: contain;\n}\n.ls-chatbox__platform-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n  border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n  border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n  background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius, 1rem);\n  border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n  background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n  background-color: var(--background, #151230);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n  position: relative;\n  display: flex;\n  min-height: 2.75rem;\n  width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  padding-inline: 0.5rem;\n}\n.ls-widget__side {\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-widget__side--right {\n  margin-left: auto;\n}\n.ls-widget__title {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n}\n.ls-widget__btn {\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.375rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n  font: inherit;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-widget__body {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: auto;\n}\n");
+
+// src/components/ModQueueList/ModQueueList.tsx
+import { useMemo, useState } from "react";
+import ButtonBase from "@mui/material/ButtonBase";
+import classNames3 from "classnames";
+
+// src/components/LSInput/LSInput.tsx
+import FormControl from "@mui/material/FormControl";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var LSInput = forwardRef(
+  (props, ref) => {
+    const hasExplicitValue = Object.prototype.hasOwnProperty.call(props, "value");
+    const {
+      startAdornment,
+      endAdornment,
+      inputBeforeText,
+      inputAfterText,
+      maxWidth,
+      className = "",
+      inputRef: inputRefProp,
+      inputProps: htmlInputPropsProp,
+      InputProps: inputPropsProp,
+      InputLabelProps: inputLabelPropsProp,
+      slotProps: slotPropsProp,
+      showborder,
+      onChange,
+      onChangeStart,
+      onChangeEnd,
+      type,
+      value,
+      helperText,
+      error,
+      style,
+      centerText,
+      $noMinHeight,
+      color,
+      bypasscolor,
+      textColor,
+      fullWidth = true,
+      ...rest
+    } = props;
+    const isNumberInput = type === "number";
+    const labelIdFallback = typeof rest.label === "string" ? rest.label : void 0;
+    const normalizedValue = isNumberInput && (value === void 0 || value === null) ? "" : value;
+    const handleChange = (event) => {
+      const rawValue = event.target.value;
+      let sanitizedValue = rawValue;
+      if (isNumberInput) {
+        if (rawValue === "") {
+          sanitizedValue = void 0;
+        } else {
+          const numericValue = Number(rawValue);
+          sanitizedValue = Number.isNaN(numericValue) ? void 0 : numericValue;
+        }
+      }
+      onChangeStart?.(event, sanitizedValue);
+      onChange?.(event, sanitizedValue);
+      onChangeEnd?.(event, sanitizedValue);
+    };
+    const callerInputSlot = slotPropsProp?.input ?? {};
+    const callerHtmlInputSlot = slotPropsProp?.htmlInput ?? {};
+    const callerInputLabelSlot = slotPropsProp?.inputLabel ?? {};
+    const resolvedStartAdornment = inputPropsProp?.startAdornment ?? callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
+    const resolvedEndAdornment = inputPropsProp?.endAdornment ?? callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
+    const helperContent = helperText ?? (typeof error === "string" ? error : "");
+    const hasError = typeof error === "string" ? true : Boolean(error);
+    const resolvedMaxWidth = maxWidth ?? style?.maxWidth;
+    const resolvedColor = color ?? bypasscolor;
+    const valueProps = hasExplicitValue ? { value: normalizedValue } : {};
+    const slotProps = {
+      ...slotPropsProp ?? {},
+      input: {
+        ...callerInputSlot,
+        ...inputPropsProp ?? {},
+        startAdornment: resolvedStartAdornment,
+        endAdornment: resolvedEndAdornment,
+        readOnly: rest.readOnly ?? inputPropsProp?.readOnly ?? callerInputSlot.readOnly,
+        sx: {
+          ...callerInputSlot.sx ?? {},
+          ...inputPropsProp?.sx ?? {},
+          "& input, & textarea": {
+            textAlign: centerText ? "center" : void 0,
+            color: textColor ?? void 0
+          }
+        }
+      },
+      inputLabel: {
+        shrink: true,
+        ...callerInputLabelSlot,
+        ...inputLabelPropsProp ?? {}
+      },
+      htmlInput: {
+        ...callerHtmlInputSlot,
+        ...htmlInputPropsProp ?? {}
+      }
+    };
+    const TextFieldComponent = TextField;
+    return /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        variant: "outlined",
+        className: classNames("mui-ls-input", className, {
+          noMinHeight: $noMinHeight,
+          bypassMuiColor: bypasscolor || bypasscolor === "default"
+        }),
+        style: { ...style, maxWidth: resolvedMaxWidth, width: fullWidth ? "100%" : style?.width },
+        children: /* @__PURE__ */ jsx(
+          TextFieldComponent,
+          {
+            ...rest,
+            ...valueProps,
+            type,
+            id: rest.id ?? rest.name ?? labelIdFallback,
+            label: rest.label,
+            size: rest.size,
+            margin: "dense",
+            variant: "outlined",
+            color: resolvedColor === "default" || resolvedColor === "inherit" ? "primary" : resolvedColor,
+            fullWidth,
+            onChange: handleChange,
+            slotProps,
+            inputRef: ref ?? inputRefProp,
+            helperText: helperContent,
+            error: hasError
+          }
+        )
+      }
+    );
+  }
+);
+LSInput.displayName = "LSInput";
+
+// src/components/ModQueueItem/ModQueueItem.tsx
+import IconButton from "@mui/material/IconButton";
+import classNames2 from "classnames";
+
+// src/components/ModQueueItem/icons.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function CrossBoxIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx2("rect", { x: "0.484367", y: "0.509025", width: "19.6005", height: "19.6005", rx: "3.43645", stroke: "#E76E6E", strokeWidth: "0.763655" }),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M14.3571 7.71806L12.8756 6.23657L10.2843 8.82791L7.69292 6.23657L6.21143 7.71806L8.80276 10.3094L6.21143 12.9007L7.69292 14.3822L10.2843 11.7909L12.8756 14.3822L14.3571 12.9007L11.7657 10.3094L14.3571 7.71806Z",
+        fill: "#E76E6E"
+      }
+    )
+  ] });
+}
+function TickBoxIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, width: "22", height: "21", viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx2("rect", { x: "0.381828", y: "0.381828", width: "21.2296", height: "19.855", rx: "3.43645", stroke: "#93F0A2", strokeWidth: "0.763655" }),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M14.8908 5.49829L9.85209 12.1414L6.87311 9.16455L5.49854 10.5391L10.0798 15.1203L16.4952 6.87287L14.8908 5.49829Z",
+        fill: "#93F0A2"
+      }
+    )
+  ] });
+}
+
+// src/components/ModQueueItem/ModQueueItem.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ModQueueItem({
+  username,
+  avatar,
+  fallbackAvatar,
+  command,
+  message,
+  icon,
+  actions,
+  onApprove,
+  onDeny,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: classNames2("ls-modqueue-item", className), children: [
+    icon ? /* @__PURE__ */ jsx3("div", { className: "ls-modqueue-item__preview", children: icon }) : null,
+    /* @__PURE__ */ jsxs2("div", { className: "ls-modqueue-item__body", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "ls-modqueue-item__head", children: [
+        avatar || fallbackAvatar ? /* @__PURE__ */ jsx3("img", { className: "ls-modqueue-item__avatar", src: avatar || fallbackAvatar, alt: "" }) : null,
+        username ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: "ls-modqueue-item__username",
+            title: typeof username === "string" ? username : void 0,
+            children: username
+          }
+        ) : null,
+        command ? /* @__PURE__ */ jsx3("span", { className: "ls-modqueue-item__command", children: command }) : null
+      ] }),
+      message ? /* @__PURE__ */ jsxs2("div", { className: "ls-modqueue-item__message", children: [
+        "\u201C",
+        message,
+        "\u201D"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onDeny, "aria-label": "Deny", children: /* @__PURE__ */ jsx3(CrossBoxIcon, { className: "ls-modqueue-item__action-icon" }) }),
+      /* @__PURE__ */ jsx3(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onApprove, "aria-label": "Approve", children: /* @__PURE__ */ jsx3(TickBoxIcon, { className: "ls-modqueue-item__action-icon" }) })
+    ] }) })
+  ] });
+}
+ModQueueItem.displayName = "ModQueueItem";
+
+// src/components/ModQueueList/icons.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function SearchIcon({ className }) {
+  return /* @__PURE__ */ jsx4("svg", { className, width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M5.6 1.4C4.48609 1.4 3.4178 1.8425 2.63015 2.63015C1.8425 3.4178 1.4 4.48609 1.4 5.6C1.4 6.15155 1.50864 6.6977 1.71971 7.20727C1.93078 7.71684 2.24015 8.17984 2.63015 8.56985C3.02016 8.95986 3.48316 9.26923 3.99273 9.48029C4.5023 9.69136 5.04845 9.8 5.6 9.8C6.15155 9.8 6.6977 9.69136 7.20727 9.48029C7.71684 9.26923 8.17984 8.95986 8.56985 8.56985C8.95986 8.17984 9.26923 7.71684 9.48029 7.20727C9.69136 6.6977 9.8 6.15155 9.8 5.6C9.8 4.48609 9.3575 3.4178 8.56985 2.63015C7.7822 1.8425 6.71391 1.4 5.6 1.4ZM1.6402 1.6402C2.69041 0.589998 4.11479 0 5.6 0C7.08521 0 8.50959 0.589998 9.5598 1.6402C10.61 2.69041 11.2 4.11479 11.2 5.6C11.2 6.3354 11.0552 7.0636 10.7737 7.74303C10.582 8.20579 10.3296 8.63975 10.0237 9.03377L13.795 12.805C14.0683 13.0784 14.0683 13.5216 13.795 13.795C13.5216 14.0683 13.0784 14.0683 12.805 13.795L9.03377 10.0237C8.63975 10.3296 8.20579 10.582 7.74303 10.7737C7.0636 11.0552 6.3354 11.2 5.6 11.2C4.8646 11.2 4.1364 11.0552 3.45697 10.7737C2.77755 10.4923 2.16021 10.0798 1.6402 9.5598C1.12019 9.03979 0.707701 8.42245 0.426275 7.74303C0.144848 7.0636 0 6.3354 0 5.6C4.20903e-08 4.11479 0.589998 2.69041 1.6402 1.6402Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function EmptyModQueueIcon({ className }) {
+  return /* @__PURE__ */ jsxs3("svg", { className, width: "39", height: "39", viewBox: "0 0 39 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M17.8486 23.9297C17.8487 26.2984 19.0186 28.5764 20.8398 30H11V26.25C11.002 24.8582 11.5559 23.5242 12.54 22.54C13.5242 21.5559 14.8582 21.0019 16.25 21H17.8486V23.9297Z",
+        fill: "#CAC9D5"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M24.9043 19.7451C24.6452 20.2749 24.5 20.8705 24.5 21.5C24.5 23.3373 25.7389 24.8844 27.4268 25.3535C26.8965 27.1804 25.5079 28.7064 23.75 29.1641C21.4908 28.5758 19.84 26.2235 19.8398 23.7354V21.0205L23.75 19.2109L24.9043 19.7451Z",
+        fill: "#CAC9D5"
+      }
+    ),
+    /* @__PURE__ */ jsx4("path", { d: "M30.5908 18.3184L28.2861 21.0459H30.5908V22.4092H26.5V21.0459L28.8115 18.3184H26.5V16.9541H30.5908V18.3184Z", fill: "#CAC9D5" }),
+    /* @__PURE__ */ jsx4("path", { d: "M36.0459 15.5908L33.7412 18.3184H36.0459V19.6816H31.9541V18.3184L34.2656 15.5908H31.9541V14.2275H36.0459V15.5908Z", fill: "#CAC9D5" }),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: "M18.5 9C19.5384 9 20.5536 9.30789 21.417 9.88477C22.2802 10.4616 22.9532 11.282 23.3506 12.2412C23.7478 13.2004 23.852 14.2561 23.6494 15.2744C23.4468 16.2928 22.9461 17.2278 22.2119 17.9619C21.8356 18.3383 21.4066 18.6536 20.9404 18.8984L20.248 19.2002C20.0129 19.2832 19.771 19.3504 19.5244 19.3994C18.5062 19.602 17.4504 19.4978 16.4912 19.1006C15.5319 18.7032 14.7117 18.0302 14.1348 17.167C13.5579 16.3036 13.25 15.2884 13.25 14.25C13.25 12.8576 13.8035 11.5227 14.7881 10.5381C15.7726 9.55352 17.1076 9 18.5 9Z",
+        fill: "#CAC9D5"
+      }
+    )
+  ] });
+}
+
+// src/components/ModQueueList/ModQueueList.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var matches = (item, q) => {
+  if (!q) {
+    return true;
+  }
+  const hay = item.searchText ?? `${item.username ?? ""} ${typeof item.command === "string" ? item.command : ""} ${typeof item.message === "string" ? item.message : ""}`;
+  return hay.toLowerCase().includes(q.toLowerCase());
+};
+function ModQueueList({
+  items,
+  id,
+  showSearch = true,
+  searchPlaceholder = "Search by username or command ...",
+  searchValue,
+  onSearchChange,
+  searchSlot,
+  canModerate = true,
+  showAvatars = true,
+  showMessages = true,
+  fallbackAvatar,
+  emptyText = "Mod queue is empty",
+  emptyIcon,
+  approveAllLabel = "Approve all",
+  denyAllLabel = "Deny all",
+  onApprove,
+  onDeny,
+  className
+}) {
+  const [internalQuery, setInternalQuery] = useState("");
+  const query = searchValue !== void 0 ? searchValue : internalQuery;
+  const handleSearchChange = (value) => {
+    if (searchValue === void 0) {
+      setInternalQuery(value);
+    }
+    onSearchChange?.(value);
+  };
+  const internalSearch = showSearch && !searchSlot;
+  const filtered = useMemo(() => internalSearch ? items.filter((item) => matches(item, query)) : items, [internalSearch, items, query]);
+  return /* @__PURE__ */ jsxs4("div", { className: classNames3("ls-modqueue", className), id, children: [
+    searchSlot ? /* @__PURE__ */ jsx5("div", { className: "ls-modqueue__search-slot", children: searchSlot }) : showSearch ? /* @__PURE__ */ jsx5("div", { className: "ls-modqueue__search-slot", children: /* @__PURE__ */ jsx5(
+      LSInput,
+      {
+        size: "small",
+        placeholder: searchPlaceholder,
+        startAdornment: /* @__PURE__ */ jsx5(SearchIcon, { className: "ls-modqueue__search-icon" }),
+        value: query,
+        onChange: (e) => handleSearchChange(String(e.target.value ?? ""))
+      }
+    ) }) : null,
+    filtered.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "ls-modqueue__empty", children: [
+      /* @__PURE__ */ jsx5("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx5(EmptyModQueueIcon, {}) }),
+      /* @__PURE__ */ jsx5("span", { children: emptyText })
+    ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs4("div", { className: "ls-modqueue__bulk", children: [
+        onDeny ? /* @__PURE__ */ jsxs4(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
+          /* @__PURE__ */ jsx5(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),
+          denyAllLabel
+        ] }) : null,
+        onApprove ? /* @__PURE__ */ jsxs4(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--approve", disableRipple: true, onClick: () => onApprove("all"), children: [
+          /* @__PURE__ */ jsx5(TickBoxIcon, { className: "ls-modqueue__bulk-icon" }),
+          approveAllLabel
+        ] }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx5("div", { className: "ls-modqueue__list", children: filtered.map((item) => /* @__PURE__ */ jsx5(
+        ModQueueItem,
+        {
+          icon: item.icon,
+          avatar: showAvatars ? item.avatar : void 0,
+          fallbackAvatar: showAvatars ? item.fallbackAvatar ?? fallbackAvatar : void 0,
+          username: item.username,
+          command: item.command,
+          message: showMessages ? item.message : void 0,
+          onApprove: () => onApprove?.(item.id),
+          onDeny: () => onDeny?.(item.id),
+          actions: item.actions ?? (canModerate ? void 0 : /* @__PURE__ */ jsx5("span", { className: "ls-modqueue__readonly", children: "read-only" }))
+        },
+        item.id
+      )) })
+    ] })
+  ] });
+}
+ModQueueList.displayName = "ModQueueList";
+export {
+  ModQueueList
+};

package/dist/ModalChrome.d.ts

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface DialogChromeProps {
+    open?: boolean;
+    color?: "inherit" | "primary" | "secondary";
+    title?: string | React.ReactNode;
+    overlayProps?: {
+        size?: "small" | "longS" | "medium" | "longM" | "large" | "longL" | "tall" | "full";
+        noStyle?: boolean;
+        noPadding?: boolean;
+        noOuterPadding?: boolean;
+        noBackground?: boolean;
+        background?: string;
+    };
+    zIndex?: string;
+    closeLabel?: string;
+    saveLabel?: string;
+    saveDisabled?: boolean;
+    testLabel?: string;
+    testDisabled?: boolean;
+    hideClose?: boolean;
+    $hideTop?: boolean;
+    $hideBottom?: boolean;
+    $noPadTitle?: boolean;
+    $disableBackdropClose?: boolean;
+    $leftText?: string | React.ReactNode;
+    showTest?: boolean;
+    buttonStyle?: any;
+    backgroundImage?: any;
+    noPadding?: boolean;
+    containerClass?: string;
+    style?: any;
+    children?: any;
+    closeIcon?: React.ReactNode;
+    test?: () => void;
+    save?: () => void;
+    close?: () => void;
+    onChange?: (event: any, value: number) => void;
+}
+declare const DialogChrome: React.FC<DialogChromeProps>;
+
+interface ModalChromeProps {
+    open?: boolean;
+    onClose: () => void;
+    position?: "fixed" | "absolute";
+    title?: React.ReactNode;
+    titleVariant?: "heading" | "label";
+    showClose?: boolean;
+    headerActions?: React.ReactNode;
+    footer?: React.ReactNode;
+    maxWidth?: string;
+    fitContent?: boolean;
+    centerContent?: boolean;
+    padding?: string;
+    cardClassName?: string;
+    bodyClassName?: string;
+    backdropClassName?: string;
+    cardStyle?: React.CSSProperties;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function ModalChrome({ open, onClose, position, title, titleVariant, showClose, headerActions, footer, maxWidth, fitContent, centerContent, padding, cardClassName, bodyClassName, backdropClassName, cardStyle, className, children, }: ModalChromeProps): react_jsx_runtime.JSX.Element | null;
+declare namespace ModalChrome {
+    var displayName: string;
+}
+
+interface PanelChromeProps {
+    title?: React.ReactNode;
+    titleVariant?: "heading" | "label";
+    onClose?: () => void;
+    showClose?: boolean;
+    onClickAway?: () => void;
+    headerActions?: React.ReactNode;
+    footer?: React.ReactNode;
+    padding?: string;
+    className?: string;
+    bodyClassName?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+declare function PanelChrome({ title, titleVariant, onClose, showClose, onClickAway, headerActions, footer, padding, className, bodyClassName, style, children, }: PanelChromeProps): react_jsx_runtime.JSX.Element;
+declare namespace PanelChrome {
+    var displayName: string;
+}
+
+export { DialogChrome, type DialogChromeProps, ModalChrome, type ModalChromeProps, PanelChrome, type PanelChromeProps };