@lumiastream/ui 0.7.7 → 0.8.1

package/dist/EventList.d.ts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface EventListPanelItem {
+    id: string | number;
+    username: string;
+    message?: React.ReactNode;
+    userMessage?: React.ReactNode;
+    avatar?: string;
+    fallbackAvatar?: string;
+    timestamp?: string;
+    platform?: string;
+    platformIcon?: React.ReactNode;
+    alertIcon?: React.ReactNode;
+    eventType?: string | null;
+    accentColor?: string;
+    actions?: React.ReactNode;
+    onUsernameClick?: () => void;
+}
+interface EventListProps {
+    items: EventListPanelItem[];
+    id?: string;
+    showAvatars?: boolean;
+    showTimestamps?: boolean;
+    showMessages?: boolean;
+    showPlatformIcons?: boolean;
+    showActions?: boolean;
+    colorFullBackground?: boolean;
+    fallbackAvatar?: string;
+    itemGap?: string | number;
+    emptyText?: React.ReactNode;
+    emptyIcon?: React.ReactNode;
+    emptyClassName?: string;
+    autoScroll?: boolean;
+    newestAt?: "top" | "bottom";
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    className?: string;
+}
+declare function EventList({ items, id, showAvatars, showTimestamps, showMessages, showPlatformIcons, showActions, colorFullBackground, fallbackAvatar, itemGap, emptyText, emptyIcon, emptyClassName, autoScroll, newestAt, onEndReached, endReachedThreshold, className, }: EventListProps): react_jsx_runtime.JSX.Element;
+declare namespace EventList {
+    var displayName: string;
+}
+
+declare const EVENT_TYPE_FALLBACK_ICON: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const EVENT_TYPE_ICONS: {
+    follower: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    subscribers: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    gifts: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    redemption: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    donation: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    bits: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    kicks: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    extension: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    points: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    raids: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    hypetrain: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    retweets: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    likes: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    purchases: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    superstickers: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    superchats: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    stars: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    fans: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    shares: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    loyalty: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+};
+type EventTypeIconKey = keyof typeof EVENT_TYPE_ICONS;
+interface EventTypeIconProps extends Omit<React.SVGProps<SVGSVGElement>, "type"> {
+    type?: string | null;
+}
+declare function EventTypeIcon({ type, ...props }: EventTypeIconProps): react_jsx_runtime.JSX.Element;
+declare namespace EventTypeIcon {
+    var displayName: string;
+}
+
+export { EVENT_TYPE_FALLBACK_ICON, EVENT_TYPE_ICONS, EventList, type EventListPanelItem, type EventListProps, EventTypeIcon, type EventTypeIconKey, type EventTypeIconProps };

package/dist/EventList.js

@@ -0,0 +1,284 @@
+// #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__row.ls-variable-picker__example-description {\n  display: block;\n  cursor: default;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: var(--neutralLight2, #cac9d5);\n  overflow-wrap: break-word;\n  line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n  opacity: 1;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n  position: absolute;\n  margin: 0;\n  border: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  pointer-events: none;\n  background: transparent;\n  color: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  z-index: 0;\n}\n.ls-variable-highlight__token {\n  border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n  color: var(--customVariables, #69ffd2);\n  background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n  position: fixed;\n  z-index: 2000;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  max-width: 320px;\n  padding: 6px 10px;\n  border-radius: 8px;\n  background: var(--neutralDark1, #171628);\n  border: 1px solid var(--neutralDark4, #393853);\n  color: var(--neutralLight2, #cac9d5);\n  font-size: 0.75rem;\n  line-height: 1.3;\n  pointer-events: none;\n  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n.ls-chat-message {\n  position: relative;\n  font-size: 0.95em;\n  line-height: 1.4;\n  color: var(--white, var(--neutralLight1, #fff));\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.ls-chat-message img {\n  display: inline-block;\n}\n.ls-chat-message__reply {\n  display: block;\n  margin-bottom: 0.15em;\n  font-size: 0.82em;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n  vertical-align: middle;\n}\n.ls-chat-message__avatar {\n  width: 1.3em;\n  height: 1.3em;\n  border-radius: 9999px;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site {\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n  width: 1.2em;\n  height: 1.2em;\n  vertical-align: middle;\n}\n.ls-chat-message__time {\n  margin-right: 0.35em;\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__badges {\n  vertical-align: middle;\n}\n.ls-chat-message__badges img {\n  height: 1.05em;\n  vertical-align: middle;\n  margin-right: 0.25em;\n}\n.ls-chat-message__username {\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n  cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-chat-message__text {\n  vertical-align: middle;\n}\n.ls-chat-message__text img {\n  vertical-align: middle;\n}\n.ls-chat-message__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.ls-chat-message__modbar {\n  display: flex;\n  overflow: hidden;\n  border-radius: 0.75rem;\n  background-color: var(--separator, #0a0821);\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n  background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n  color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n  display: flex;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 1em;\n  border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n  border-left: 4px solid var(--primary, #ff4076);\n  border-radius: 1em;\n  background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n  color: var(--white, var(--neutralLight1, #fff));\n  padding: 1em;\n  line-height: 1.35;\n}\n.ls-eventlist-item__main {\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  min-width: 0;\n}\n.ls-eventlist-item__identity {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5em;\n  min-width: 1.5em;\n  height: 1.5em;\n  overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n  border-radius: 1em;\n  background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ls-eventlist-item__username {\n  min-width: 0;\n  font-weight: 700;\n  font-size: 0.875em;\n  word-break: break-all;\n}\n.ls-eventlist-item__body {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__message {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n  min-width: 0;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-eventlist-item__time {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.875em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  align-self: center;\n  gap: 0.5em;\n  flex-shrink: 0;\n}\n.ls-modqueue-item {\n  display: flex;\n  align-items: stretch;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n  padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n  display: flex;\n  height: 4rem;\n  width: 4rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  color: var(--primary, #ff4076);\n  font-size: 1.75rem;\n  line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n}\n.ls-modqueue-item__body {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 9999px;\n  border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n  font-weight: 700;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 12rem;\n}\n.ls-modqueue-item__command {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  padding: 0.05rem 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n  font-size: 0.875rem;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-modqueue-item__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n  padding: 0;\n  border-radius: 0.5rem;\n  transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n  background-color: transparent;\n  opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n}\n.ls-modlog {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n  display: flex;\n  justify-content: flex-end;\n}\n.ls-modlog__clear {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 0;\n  border-radius: 0.75rem;\n  background: transparent;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n  color: var(--white, #fff);\n}\n.ls-modlog__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.375rem;\n  overflow: auto;\n}\n.ls-modlog__row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n  background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-modlog__avatar {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 9999px;\n}\n.ls-modlog__title {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.375rem;\n  padding: 0.05rem 0.4rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--ls-modlog-accent, var(--primary, #ff4076));\n  background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.6875rem;\n  font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.35;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n  flex: 1;\n}\n.ls-songreq__empty {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.75rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n  height: 3.5rem;\n  width: 3.5rem;\n  flex-shrink: 0;\n  border-radius: 0.75rem;\n  object-fit: cover;\n}\n.ls-songreq__nowbody {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n.ls-songreq__title {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__artist {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n  overflow: hidden;\n  font-size: 0.6875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n  margin-top: 0.375rem;\n  height: 0.375rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n  height: 100%;\n  border-radius: 9999px;\n  background-color: var(--success, #1db954);\n  transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-songreq__btn {\n  display: inline-flex;\n  height: 2rem;\n  width: 2rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background: transparent;\n  font-size: 0.875rem;\n  line-height: 1;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-songreq__queue {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n}\n.ls-songreq__queuehead {\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: auto;\n}\n.ls-songreq__queueempty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.375rem 0.5rem;\n  transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.ls-songreq__itembody {\n  min-width: 0;\n  flex: 1;\n}\n.ls-songreq__itemtitle {\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-modqueue__search-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.5rem;\n  border: 1px solid currentcolor;\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n  opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n  color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n}\n.ls-modqueue__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-modqueue__readonly {\n  font-size: 0.625rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n  flex-shrink: 0;\n}\n.ls-chatbox {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ls-chatbox__list {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n.ls-chatbox__jump {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  backdrop-filter: blur(4px);\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n  transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n  margin-left: 0.25rem;\n  border-radius: 9999px;\n  background-color: var(--primary, #ff4076);\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n  flex: 2 1 0%;\n  min-width: 100px;\n  width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n  flex: 1 1 0%;\n  min-width: 7.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n  flex: 0 1 auto;\n  min-width: 5.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n  height: 55px;\n  flex-shrink: 0;\n}\n.ls-panel {\n  --ls-panel-padding: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: var(--ls-panel-bg, #1b1834);\n  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n}\n.ls-panel__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n  min-width: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-panel__title--label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-panel__close {\n  display: flex;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.5rem;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-panel__body {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n  padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n  flex-shrink: 0;\n  padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ls-modal--absolute {\n  position: absolute;\n}\n.ls-modal__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n  backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n  position: relative;\n  width: 100%;\n  max-width: var(--ls-modal-max-width, min(560px, 92vw));\n  max-height: 85vh;\n}\n.ls-modal__card--fit {\n  width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog {\n  margin-top: 0.5rem;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog__card {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  border-radius: 1rem;\n  outline: none;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n  padding: 1rem;\n}\n.ls-dialog__card--full {\n  border-radius: 0;\n}\n.ls-dialog__top {\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n.ls-dialog__top--full {\n  margin-top: 2rem;\n}\n.ls-dialog__top-side {\n  flex: 1;\n}\n.ls-dialog__title {\n  font-size: 1.25rem;\n  color: var(--white, #fff);\n}\n.ls-dialog__close {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  user-select: none;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-dialog__close-label {\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: auto;\n}\n.ls-dialog__bottom {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-bottom: 1rem;\n}\n.ls-eventlist {\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n  line-height: 1.35;\n}\n.ls-eventlist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5em;\n  overflow-y: auto;\n}\n.ls-eventlist__row {\n  flex-shrink: 0;\n  animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  border-radius: 1em;\n  padding: 1em;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n  width: 1.6em;\n  height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1.5em);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ls-streamstatus {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: auto;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.625rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n  position: relative;\n  display: inline-flex;\n  height: 0.75rem;\n  width: 0.75rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n  animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ls-streamstatus__indicator-dot {\n  position: relative;\n  height: 0.75rem;\n  width: 0.75rem;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n  background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n.ls-streamstatus__status-label {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n  display: flex;\n  flex-shrink: 0;\n  align-items: stretch;\n  gap: 0.5rem;\n}\n.ls-streamstatus__total {\n  display: flex;\n  flex-shrink: 0;\n  flex-direction: column;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n  font-size: 1.875rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n  margin-top: 0.25rem;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.25rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n  display: grid;\n  flex-shrink: 0;\n  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n  gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 0.125rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n  display: inline-flex;\n  margin-left: auto;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n  overflow: hidden;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n  width: 10px;\n  flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-viewerslist__head {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-viewerslist__count {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n  min-width: 0;\n  flex: 1;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  color: var(--white, #fff);\n  outline: none;\n}\n.ls-viewerslist__search:focus {\n  border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n  color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n  min-width: 0;\n  flex: 1;\n}\n.ls-viewerslist__hint {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.125rem;\n  overflow: auto;\n}\n.ls-viewerslist__group {\n  margin-top: 0.375rem;\n  flex-shrink: 0;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n  margin-top: 0;\n}\n.ls-viewerslist__viewer {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.25rem 0.375rem;\n  transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.ls-viewerslist__platform {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-viewerslist__username {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n  box-sizing: border-box;\n}\n.ls-shortcutdock {\n  display: grid;\n  width: 100%;\n  align-content: start;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-shortcutdock--disabled {\n  opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n  position: relative;\n  min-width: 0;\n}\n.ls-shortcutdock__btn {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n  background-color: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  color: var(--white, #fff);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n  border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n  cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.15rem;\n  line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n  font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n  width: 2rem;\n  height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n  width: 60%;\n  height: 60%;\n  border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  padding-inline: 0.125rem;\n  text-align: center;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1.2;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n  font-size: clamp(1rem, 1.4vw, 1.5rem);\n  font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n  width: 100%;\n  height: 100%;\n  font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n  width: 60%;\n  height: 60%;\n}\n.ls-shortcutdock__remove {\n  position: absolute;\n  top: -0.375rem;\n  right: -0.375rem;\n  z-index: 1;\n  display: flex;\n  height: 1.25rem;\n  width: 1.25rem;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 9999px;\n  background-color: var(--error, #fd5454);\n  padding: 0;\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: var(--white, #fff);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n  transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n  opacity: 0.8;\n}\n.ls-shortcutdock__add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  font-size: 1.5rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n  color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n  box-sizing: border-box;\n}\n.ls-goals {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ls-goals__empty {\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  font-size: 0.875rem;\n}\n.ls-goals__icon {\n  display: flex;\n  align-self: center;\n  align-items: center;\n  line-height: 1;\n}\n.ls-goals__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 600;\n  color: var(--white, #fff);\n}\n.ls-goals__value {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n  opacity: 0.6;\n}\n.ls-goals__bar {\n  margin-top: 0.375rem;\n  height: 0.625rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n  height: 100%;\n  border-radius: 9999px;\n  background-image:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n      var(--ls-goals-accent, var(--primary, #ff4076)));\n  transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n  flex-shrink: 0;\n  min-width: 2.75rem;\n  text-align: right;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n  display: inline-block;\n  height: 1.15em;\n  width: auto;\n  max-width: 1.5em;\n  vertical-align: middle;\n  object-fit: contain;\n}\n.ls-chatbox__platform-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n  border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n  border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n  background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius, 1rem);\n  border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n  background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n  background-color: var(--background, #151230);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n  position: relative;\n  display: flex;\n  min-height: 2.75rem;\n  width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  padding-inline: 0.5rem;\n}\n.ls-widget__side {\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-widget__side--right {\n  margin-left: auto;\n}\n.ls-widget__title {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n}\n.ls-widget__btn {\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.375rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n  font: inherit;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-widget__body {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: auto;\n}\n");
+
+// src/components/EventList/EventList.tsx
+import { useEffect, useRef } from "react";
+import classNames3 from "classnames";
+
+// src/components/EventListItem/EventListItem.tsx
+import classNames from "classnames";
+
+// src/components/EventList/EventTypeIcon.tsx
+import { jsx } from "react/jsx-runtime";
+var createEventIcon = (def) => {
+  const Icon = (props) => /* @__PURE__ */ jsx("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__ */ jsx("path", { fill: "currentColor", ...path }, index)) });
+  return Icon;
+};
+var EVENT_TYPE_FALLBACK_ICON = createEventIcon({ width: "77", height: "77", viewBox: "0 0 77 77", paths: [{ d: "M32.0348 67.8488C32.2317 68.9076 33.1257 69.6727 34.166 69.6727H41.7175C42.9162 69.6727 43.8879 68.6655 43.8879 67.4232C43.8879 66.1808 42.9162 65.1736 41.7175 65.1736H35.9581L35.8144 64.4007H43.1152C44.2884 64.4007 45.2493 63.4344 45.2847 62.219C45.5196 54.1506 48.6247 48.8606 51.9394 43.5096C52.0669 43.3038 52.1949 43.0976 52.3233 42.8909C55.5088 37.7611 58.9 32.3001 58.9 24.5131C58.9 17.6282 56.2649 12.4215 52.2565 8.9757C48.3033 5.57735 43.149 4 38.1777 4C28.6499 4 18 11.1793 18 24.739C18 31.851 21.089 38.0439 24.0565 43.3454C24.5114 44.1581 24.9596 44.943 25.3964 45.7078C26.4256 47.5099 27.3909 49.2003 28.229 50.8789C29.4122 53.2488 30.2139 55.3578 30.4727 57.3163C30.6216 58.4425 31.5576 59.2766 32.6541 59.2603C33.7507 59.244 34.6633 58.3825 34.7809 57.2524C34.9706 55.4309 35.9174 53.2643 37.4928 50.7048C38.8347 48.5248 40.4985 46.2646 42.2571 43.8756C42.5436 43.4864 42.8327 43.0937 43.1233 42.6975C45.1598 39.9201 47.2572 36.9825 48.8406 34.0308C50.417 31.0923 51.6027 27.9286 51.6027 24.7014C51.6027 20.79 50.1716 17.467 47.6813 15.1412C45.2141 12.8368 41.8546 11.6443 38.1777 11.6443C30.9242 11.6443 25.2973 17.6891 25.2973 24.7014C25.2973 26.7539 25.6936 29.8348 26.7508 32.4851C27.7593 35.0129 29.7798 38.0597 33.4218 38.0597C35.1995 38.0597 36.6557 37.3883 37.738 36.2561C38.7611 35.1859 39.3371 33.826 39.6795 32.5814C40.3187 30.2583 40.3144 27.6507 40.3121 26.2771C40.312 26.1997 40.3118 26.1263 40.3118 26.057C40.3118 24.8147 39.3401 23.8075 38.1414 23.8075C36.9427 23.8075 35.971 24.8147 35.971 26.057L35.971 26.1579C35.9713 27.6034 35.9717 29.6519 35.5051 31.3476C35.2712 32.1976 34.969 32.7605 34.6545 33.0895C34.3992 33.3566 34.0583 33.5607 33.4218 33.5607C32.5619 33.5607 31.6054 32.8794 30.7623 30.766C29.968 28.7751 29.6382 26.3016 29.6382 24.7014C29.6382 20.1907 33.3053 16.1434 38.1777 16.1434C40.9631 16.1434 43.231 17.0409 44.7754 18.4834C46.2969 19.9044 47.2619 21.9851 47.2619 24.7014C47.2619 26.8215 46.469 29.1934 45.0468 31.8445C43.6316 34.4825 41.7105 37.1887 39.6673 39.9752C39.3877 40.3564 39.1055 40.7396 38.8222 41.1243C37.0726 43.5001 35.2818 45.9317 33.8333 48.2851C33.4508 48.9065 33.0824 49.5373 32.7382 50.1753C32.5285 49.7174 32.3096 49.2626 32.0842 48.8112C31.1862 47.0126 30.1213 45.1476 29.064 43.2961C28.6415 42.5561 28.2201 41.8183 27.8112 41.0877C24.861 35.817 22.3408 30.5434 22.3408 24.739C22.3408 14.1984 30.497 8.49902 38.1777 8.49902C42.3191 8.49902 46.4406 9.82125 49.4853 12.4386C52.4747 15.0085 54.5592 18.9335 54.5592 24.5131C54.5592 30.9585 51.7975 35.4143 48.5022 40.7311C48.4306 40.8466 48.3587 40.9625 48.2866 41.0789C45.1891 46.0794 41.8063 51.7178 41.0743 59.9017H33.1858C32.5382 59.9017 31.9245 60.2014 31.5122 60.7189C31.0998 61.2365 30.932 61.9178 31.0546 62.5769L32.0348 67.8488Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M41.1547 70.6428C41.1547 72.7023 39.6065 73.2035 37.6967 73.2035C35.7868 73.2035 34.2386 72.7023 34.2386 70.6428H41.1547Z" }, { d: "M45.3289 28.7231C45.4774 28.3343 45.2937 27.8944 44.9186 27.7405L42.3201 26.6745C41.945 26.5206 41.5206 26.7111 41.3721 27.0998C41.2237 27.4886 41.4074 27.9285 41.7825 28.0823L44.381 29.1484C44.7561 29.3022 45.1805 29.1118 45.3289 28.7231Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M31.4505 29.2716C31.6184 29.6518 32.0518 29.819 32.4186 29.6451L34.96 28.44C35.3268 28.2661 35.4881 27.8169 35.3203 27.4367C35.1525 27.0565 34.7191 26.8893 34.3522 27.0632L31.8109 28.2682C31.444 28.4422 31.2827 28.8914 31.4505 29.2716Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M35.3 24.9243C35.4287 24.528 35.223 24.0987 34.8407 23.9653L32.1921 23.0417C31.8098 22.9084 31.3955 23.1215 31.2669 23.5178C31.1382 23.9141 31.3439 24.3434 31.7262 24.4768L34.3748 25.4004C34.7571 25.5337 35.1714 25.3206 35.3 24.9243Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M36.7911 23.1649C37.1695 23.0199 37.3629 22.5845 37.223 22.1923L36.2535 19.474C36.1137 19.0818 35.6936 18.8814 35.3152 19.0263C34.9368 19.1713 34.7434 19.6067 34.8833 19.9989L35.8528 22.7173C35.9926 23.1094 36.4127 23.3098 36.7911 23.1649Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M39.5322 23.0163C39.911 23.1602 40.3305 22.9585 40.4693 22.5659L41.4314 19.8448C41.5702 19.4522 41.3757 19.0173 40.9969 18.8735C40.6181 18.7296 40.1986 18.9313 40.0598 19.3238L39.0977 22.045C38.9589 22.4376 39.1534 22.8724 39.5322 23.0163Z", fillRule: "evenodd", clipRule: "evenodd" }, { d: "M41.3214 24.7192C41.4951 25.0965 41.9311 25.2564 42.2952 25.0763L44.8173 23.8284C45.1813 23.6483 45.3356 23.1964 45.1618 22.8191C44.988 22.4418 44.552 22.2819 44.1879 22.4621L41.6659 23.7099C41.3018 23.89 41.1476 24.3419 41.3214 24.7192Z", fillRule: "evenodd", clipRule: "evenodd" }] });
+var EVENT_TYPE_ICONS = {
+  follower: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M12.027 21.9999C11.8 22.0004 11.5751 21.9485 11.3653 21.8473C11.1556 21.7461 10.965 21.5975 10.8046 21.41L3.62036 13.0238C3.08903 12.4036 2.67151 11.6635 2.39327 10.8488C2.11502 10.034 1.98189 9.1616 2.00198 8.28479C2.02207 7.40799 2.19497 6.54514 2.51013 5.7489C2.82529 4.95266 3.2761 4.23971 3.83507 3.65353C4.37293 3.09266 5.00222 2.66427 5.68527 2.39401C6.36831 2.12376 7.09106 2.01719 7.81022 2.0807C9.24938 2.19144 10.6049 2.90962 11.6237 4.10122L12.027 4.57192L12.61 3.89135C13.1413 3.27115 13.7753 2.7838 14.4733 2.45902C15.1713 2.13425 15.9187 1.97885 16.6698 2.00231C17.421 2.02577 18.1601 2.2276 18.8423 2.59549C19.5244 2.96338 20.1351 3.48961 20.6373 4.14209C21.1178 4.7699 21.4848 5.50446 21.7163 6.30176C21.9479 7.09907 22.0391 7.94272 21.9847 8.78218C21.8898 10.4621 21.2746 12.0443 20.2539 13.2337L13.2496 21.4099H13.2495C13.089 21.5974 12.8984 21.7461 12.6886 21.8473C12.4789 21.9486 12.254 22.0005 12.027 22V21.9999ZM7.4451 4.49251C6.62811 4.48009 5.83631 4.82243 5.22337 5.45308C4.87364 5.81932 4.59152 6.26491 4.39423 6.76266C4.19694 7.26041 4.08863 7.79987 4.0759 8.34811C4.06316 8.89635 4.14628 9.44186 4.32018 9.95136C4.49407 10.4608 4.75509 10.9236 5.08731 11.3114L12.027 19.4123L18.7868 11.5215C20.1654 9.91226 20.304 7.32882 19.0958 5.76265C18.782 5.3544 18.4003 5.02508 17.9739 4.79479C17.5474 4.56449 17.0853 4.43806 16.6156 4.42319C16.1459 4.40833 15.6786 4.50536 15.2421 4.70834C14.8057 4.91133 14.4092 5.21603 14.077 5.60383L12.7605 7.14054C12.6642 7.25298 12.5498 7.34217 12.424 7.40302C12.2981 7.46387 12.1632 7.49519 12.027 7.49519C11.8908 7.49519 11.7559 7.46387 11.6301 7.40302C11.5042 7.34217 11.3899 7.25298 11.2935 7.14054L10.1569 5.8137C9.43779 4.97274 8.46298 4.49784 7.4451 4.49261V4.49251Z" }] }),
+  subscribers: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M12 7.58534L13.193 11.5042H16.7718L13.891 13.5455L15.0712 17.3384L12 15.0199L8.92878 17.3384L10.109 13.5455L7.22818 11.5042H10.807L12 7.58534ZM8.92878 8.98403H3.26859C2.03756 8.98403 1.52992 10.5591 2.53251 11.2648L7.15204 14.541L5.33722 20.35C4.96918 21.5219 6.33981 22.467 7.31702 21.7235L12 18.1953L16.683 21.7361C17.6602 22.4796 19.0308 21.5345 18.6628 20.3626L16.848 14.5536L21.4675 11.2774C22.4701 10.5591 21.9624 8.99664 20.7314 8.99664H15.0712L13.2056 2.89781C12.8376 1.70073 11.137 1.70073 10.7817 2.89781L8.92878 8.98403Z" }] }),
+  gifts: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M10 9C10 7.67392 10.5268 6.40215 11.4645 5.46447C12.4021 4.52678 13.6739 4 15 4C16.3261 4 17.5979 4.52678 18.5355 5.46447C19.4732 6.40215 20 7.67392 20 9C20 7.67392 20.5268 6.40215 21.4645 5.46447C22.4021 4.52678 23.6739 4 25 4C26.3261 4 27.5979 4.52678 28.5355 5.46447C29.4732 6.40215 30 7.67392 30 9V9.012C30 9.152 30 9.552 29.924 10H34C34.5304 10 35.0391 10.2107 35.4142 10.5858C35.7893 10.9609 36 11.4696 36 12V14C36 14.5304 35.7893 15.0391 35.4142 15.4142C35.0391 15.7893 34.5304 16 34 16H6C5.46957 16 4.96086 15.7893 4.58579 15.4142C4.21071 15.0391 4 14.5304 4 14V12C4 11.4696 4.21071 10.9609 4.58579 10.5858C4.96086 10.2107 5.46957 10 6 10H10.076C10.0232 9.67336 9.99775 9.34288 10 9.012V9ZM12.136 10H18V9C18 8.60603 17.9224 8.21593 17.7716 7.85195C17.6209 7.48797 17.3999 7.15726 17.1213 6.87868C16.8427 6.6001 16.512 6.37913 16.1481 6.22836C15.7841 6.0776 15.394 6 15 6C14.606 6 14.2159 6.0776 13.8519 6.22836C13.488 6.37913 13.1573 6.6001 12.8787 6.87868C12.6001 7.15726 12.3791 7.48797 12.2284 7.85195C12.0776 8.21593 12 8.60603 12 9C12 9.17 12.004 9.548 12.09 9.86C12.102 9.90769 12.1174 9.95448 12.136 10V10ZM22 10H27.864C27.8824 9.95439 27.8978 9.90763 27.91 9.86C27.996 9.548 28 9.17 28 9C28 8.20435 27.6839 7.44129 27.1213 6.87868C26.5587 6.31607 25.7956 6 25 6C24.2044 6 23.4413 6.31607 22.8787 6.87868C22.3161 7.44129 22 8.20435 22 9V10ZM34 18V33C34 33.7956 33.6839 34.5587 33.1213 35.1213C32.5587 35.6839 31.7956 36 31 36H22V18H34ZM9 36C8.20435 36 7.44129 35.6839 6.87868 35.1213C6.31607 34.5587 6 33.7956 6 33V18H18V36H9Z" }] }),
+  redemption: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M4.29091 1.74561L2.83636 4.14459V15.1799H6.71515V17.0991H8.65454L10.5939 15.1799H13.0182L17.3818 10.8618V1.74561H4.29091ZM15.4424 9.90218L13.0182 12.3012H10.5939L8.65454 14.2204V12.3012H5.74546V3.6648H15.4424V9.90218Z" }, { d: "M12.0472 5.58398H13.5017V9.42238H12.0472V5.58398Z" }, { d: "M9.14003 5.58398H10.5946V9.42238H9.14003V5.58398Z" }, { d: "M17.3825 22.3945C19.4147 22.3945 21.0621 20.747 21.0621 18.7148C21.0621 16.6826 19.4147 15.0352 17.3825 15.0352C15.3503 15.0352 13.7028 16.6826 13.7028 18.7148C13.7028 20.747 15.3503 22.3945 17.3825 22.3945Z", stroke: "white", strokeWidth: "1.5" }, { d: "M17.7877 16.6938C18.6549 17.0695 19.0541 17.3742 19.4038 18.31", stroke: "white", strokeLinecap: "round" }] }),
+  donation: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM8.5 14V16H11V18H13V16H14C14.663 16 15.2989 15.7366 15.7678 15.2678C16.2366 14.7989 16.5 14.163 16.5 13.5C16.5 12.837 16.2366 12.2011 15.7678 11.7322C15.2989 11.2634 14.663 11 14 11H10C9.86739 11 9.74021 10.9473 9.64645 10.8536C9.55268 10.7598 9.5 10.6326 9.5 10.5C9.5 10.3674 9.55268 10.2402 9.64645 10.1464C9.74021 10.0527 9.86739 10 10 10H15.5V8H13V6H11V8H10C9.33696 8 8.70107 8.26339 8.23223 8.73223C7.76339 9.20107 7.5 9.83696 7.5 10.5C7.5 11.163 7.76339 11.7989 8.23223 12.2678C8.70107 12.7366 9.33696 13 10 13H14C14.1326 13 14.2598 13.0527 14.3536 13.1464C14.4473 13.2402 14.5 13.3674 14.5 13.5C14.5 13.6326 14.4473 13.7598 14.3536 13.8536C14.2598 13.9473 14.1326 14 14 14H8.5Z" }] }),
+  bits: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M11.9643 21.9696C11.9576 21.9524 10.6184 19.981 8.98838 17.5888C7.35834 15.1965 6.02743 13.2363 6.03081 13.2328C6.03418 13.2293 7.36412 14.0442 8.9862 15.0438C10.6083 16.0434 11.9571 16.8618 11.9834 16.8624C12.0098 16.8631 13.365 16.0436 14.9949 15.0413C16.6247 14.0391 17.9685 13.2132 17.9809 13.2059C18.0087 13.1898 18.3202 12.7302 14.8869 17.7713C13.3032 20.0966 12.0005 21.9995 11.992 22C11.9835 22.0005 11.9711 21.9867 11.9643 21.9696ZM9.30797 14.3989C7.83646 13.4917 6.49018 12.6623 6.31624 12.5558L6 12.362L8.98571 7.20124C10.6278 4.36279 11.9753 2.02918 11.9801 2.01543C11.9849 2.00168 11.9941 1.99606 12.0005 2.00293C12.0242 2.02827 17.9949 12.3594 17.9887 12.3643C17.9625 12.3849 11.9958 16.0511 11.9904 16.0499C11.9866 16.0491 10.7795 15.3061 9.30797 14.3989Z" }] }),
+  kicks: createEventIcon({ width: "79", height: "79", viewBox: "0 0 79 79", paths: [{ d: "M37.9846 4.24886C38.9663 3.88709 39.9927 3.88711 40.9299 4.24886L61.3693 11.7557C62.3059 12.1175 63.1091 12.7508 63.5998 13.6551L74.4445 32.6942C74.9356 33.5985 75.1141 34.6389 74.9357 35.6336L71.1867 57.2498C71.0083 58.2447 70.4729 59.1947 69.7141 59.828L53.1135 73.9373C52.3103 74.5706 51.3723 74.9325 50.3459 74.9325H28.6584C27.632 74.9325 26.6494 74.5706 25.8908 73.9373L9.29023 59.828C8.53159 59.1495 7.99608 58.2447 7.81757 57.2498L4.06855 35.6336C3.89007 34.5936 4.06902 33.5985 4.55976 32.6942L15.4045 13.6551C15.8953 12.796 16.698 12.1175 17.635 11.7557L38.0295 4.24886H37.9846ZM21.0275 18.3123V60.4149H34.8615V51.0535H39.4582V55.7117H44.0549V60.37H57.8889V46.3504H53.2922V41.6922H48.6516V37.034H53.2922V32.3768H57.8889V18.3573H44.0549V23.0155H39.4582V27.6737H34.8615V18.3123H21.0275Z" }] }),
+  extension: createEventIcon({ width: "69", height: "69", viewBox: "0 0 69 69", paths: [{ d: "M58.5636 46.1921L34.7814 5L11 46.1921L34.7814 32.4614L58.5636 46.1921Z" }, { d: "M58.5636 50.7695L34.7814 37.0388L11 50.769L34.7814 64.5002L58.5636 50.7695Z" }] }),
+  points: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M32.474 19.9999C32.474 13.1107 26.8892 7.52589 19.9999 7.52589C13.1107 7.52591 7.52591 13.1107 7.52589 19.9999C7.52589 26.8892 13.1107 32.474 19.9999 32.474C26.8892 32.474 32.474 26.8892 32.474 19.9999ZM34.9999 19.9999C34.9999 28.2842 28.2842 34.9999 19.9999 34.9999C11.7157 34.9999 5 28.2842 5 19.9999C5.00002 11.7157 11.7157 5.00002 19.9999 5C28.2842 5 34.9999 11.7157 34.9999 19.9999Z" }, { d: "M20.3537 11.9525C20.6223 11.3325 21.3286 11.037 21.9544 11.2712L22.0146 11.2957L22.3204 11.4296C23.8327 12.1001 25.0862 12.7827 26.1251 13.7727C27.1799 14.778 27.9368 16.0246 28.5982 17.7041L28.7291 18.046L28.7504 18.1074C28.9523 18.7443 28.6213 19.4345 27.9884 19.6711C27.3555 19.9076 26.6528 19.6037 26.3875 18.9905L26.3631 18.9301L26.2481 18.6304C25.6733 17.1703 25.0912 16.2766 24.3826 15.6013C23.6579 14.9106 22.7234 14.3721 21.3014 13.7409L21.0106 13.6134L20.9517 13.586C20.3528 13.2897 20.0852 12.5726 20.3537 11.9525Z" }] }),
+  raids: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M14.75 15C15.716 15 16.5 15.784 16.5 16.75L16.499 17.712C16.616 19.902 14.988 21.009 12.067 21.009C9.157 21.009 7.5 19.919 7.5 17.75V16.75C7.5 15.784 8.284 15 9.25 15H14.75V15ZM3.75 10H8.126C7.95152 10.679 7.95823 11.3919 8.14546 12.0675C8.3327 12.743 8.6939 13.3577 9.193 13.85L9.355 14.001L9.25 14C8.64983 13.9998 8.06606 14.1959 7.58778 14.5585C7.10949 14.921 6.76294 15.4301 6.601 16.008L6.567 16.009C3.657 16.009 2 14.919 2 12.75V11.75C2 10.784 2.784 10 3.75 10ZM20.25 10C21.216 10 22 10.784 22 11.75L21.999 12.712C22.116 14.902 20.488 16.009 17.567 16.009L17.398 16.007C17.2443 15.4623 16.9265 14.9781 16.488 14.6203C16.0495 14.2625 15.5115 14.0484 14.947 14.007L14.75 14L14.645 14.001C15.2001 13.5134 15.6089 12.8813 15.8259 12.175C16.0429 11.4688 16.0596 10.7162 15.874 10.001L20.25 10ZM12 8C12.394 8 12.7841 8.0776 13.1481 8.22836C13.512 8.37913 13.8427 8.6001 14.1213 8.87868C14.3999 9.15726 14.6209 9.48797 14.7716 9.85195C14.9224 10.2159 15 10.606 15 11C15 11.394 14.9224 11.7841 14.7716 12.1481C14.6209 12.512 14.3999 12.8427 14.1213 13.1213C13.8427 13.3999 13.512 13.6209 13.1481 13.7716C12.7841 13.9224 12.394 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11C9 10.2044 9.31607 9.44129 9.87868 8.87868C10.4413 8.31607 11.2044 8 12 8V8ZM6.5 3C7.29565 3 8.05871 3.31607 8.62132 3.87868C9.18393 4.44129 9.5 5.20435 9.5 6C9.5 6.79565 9.18393 7.55871 8.62132 8.12132C8.05871 8.68393 7.29565 9 6.5 9C5.70435 9 4.94129 8.68393 4.37868 8.12132C3.81607 7.55871 3.5 6.79565 3.5 6C3.5 5.20435 3.81607 4.44129 4.37868 3.87868C4.94129 3.31607 5.70435 3 6.5 3V3ZM17.5 3C18.2956 3 19.0587 3.31607 19.6213 3.87868C20.1839 4.44129 20.5 5.20435 20.5 6C20.5 6.79565 20.1839 7.55871 19.6213 8.12132C19.0587 8.68393 18.2956 9 17.5 9C16.7044 9 15.9413 8.68393 15.3787 8.12132C14.8161 7.55871 14.5 6.79565 14.5 6C14.5 5.20435 14.8161 4.44129 15.3787 3.87868C15.9413 3.31607 16.7044 3 17.5 3Z" }] }),
+  hypetrain: createEventIcon({ width: "239", height: "239", viewBox: "0 0 239 239", paths: [{ d: "M7 78.6188V75.3315C7 74.3002 7.35948 73.4461 8.07843 72.7693C8.79739 72.0925 9.67974 71.7541 10.7255 71.7541H90.0392C91.085 71.7541 91.9673 72.0925 92.6863 72.7693C93.4052 73.4461 93.7647 74.3002 93.7647 75.3315V78.6188C93.7647 79.6501 93.4052 80.5041 92.6863 81.1809C91.9673 81.8577 91.085 82.1961 90.0392 82.1961H85.4314V99.2127H107.588C107.85 96.3122 109.075 93.8628 111.265 91.8646C113.454 89.8665 116.052 88.8674 119.059 88.8674C122.065 88.8674 124.647 89.8665 126.804 91.8646C128.961 93.8628 130.17 96.3122 130.431 99.2127H144.255V64.2127C142.817 64.1482 141.592 63.5843 140.578 62.5207C139.565 61.4572 139.059 60.1842 139.059 58.7017V55.511C139.059 54.0285 139.631 52.7394 140.775 51.6436C141.918 50.5479 143.275 50 144.843 50H165.627C167.196 50 168.52 50.5479 169.598 51.6436C170.676 52.7394 171.216 54.0285 171.216 55.511V58.7017C171.216 60.1842 170.742 61.4572 169.794 62.5207C168.846 63.5843 167.654 64.1482 166.216 64.2127V99.2127H182.49C185.366 99.2127 187.833 100.244 189.892 102.307C191.951 104.369 192.98 106.819 192.98 109.655V139.82L232 190H182.392V158.674H174.941C176.052 161.381 176.608 164.25 176.608 167.279C176.608 173.531 174.369 178.881 169.892 183.329C165.415 187.776 160.007 190 153.667 190C147.327 190 141.902 187.776 137.392 183.329C132.882 178.881 130.627 173.531 130.627 167.279C130.627 164.25 131.183 161.381 132.294 158.674H121.804C122.98 161.51 123.569 164.378 123.569 167.279C123.569 173.531 121.297 178.881 116.755 183.329C112.212 187.776 106.771 190 100.431 190C94.0915 190 88.683 187.776 84.2059 183.329C79.7288 178.881 77.4902 173.531 77.4902 167.279C77.4902 164.25 78.0457 161.381 79.1569 158.674H66.8039C68.0458 161.704 68.6667 164.572 68.6667 167.279C68.6667 173.531 66.3954 178.881 61.8529 183.329C57.3105 187.776 51.8693 190 45.5294 190C39.1895 190 33.7647 187.776 29.2549 183.329C24.7451 178.881 22.4902 173.531 22.4902 167.279C22.4902 164.314 23.0784 161.413 24.2549 158.577C21.7059 158.191 19.5817 157.03 17.8824 155.097C16.183 153.163 15.3333 150.907 15.3333 148.329L15.1373 82.1961H10.7255C9.67974 82.1961 8.79739 81.8577 8.07843 81.1809C7.35948 80.5041 7 79.6501 7 78.6188ZM28.4706 119.323C28.4706 121.515 29.2549 123.368 30.8235 124.883C32.3922 126.397 34.2876 127.155 36.5098 127.155H51.6078C53.8301 127.155 55.6928 126.397 57.1961 124.883C58.6994 123.368 59.451 121.515 59.451 119.323V95.6354C59.451 93.5083 58.683 91.6874 57.1471 90.1727C55.6111 88.6579 53.7647 87.9006 51.6078 87.9006H36.5098C34.2876 87.9006 32.3922 88.674 30.8235 90.221C29.2549 91.768 28.4706 93.5727 28.4706 95.6354V119.323Z" }] }),
+  retweets: createEventIcon({ width: "24", height: "24", viewBox: "0 0 24 24", paths: [{ d: "M4.49841 3.88L8.93041 8.02001L7.56641 9.48L5.49841 7.55V16C5.49841 17.1 6.39441 18 7.49841 18H12.9984V20H7.49841C5.28941 20 3.49841 18.21 3.49841 16V7.55L1.43041 9.48L0.0664062 8.02001L4.49841 3.88ZM16.4984 6H10.9984V4H16.4984C18.7074 4 20.4984 5.79 20.4984 8V16.45L22.5664 14.52L23.9304 15.98L19.4984 20.12L15.0664 15.98L16.4304 14.52L18.4984 16.45V8C18.4984 6.9 17.6024 6 16.4984 6Z" }] }),
+  likes: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M34.6055 20.8477C35.2617 19.9805 35.625 18.918 35.625 17.8125C35.625 16.0586 34.6445 14.3985 33.0664 13.4727C32.6601 13.2344 32.1976 13.109 31.7266 13.1094H22.3594L22.5938 8.30862C22.6484 7.14847 22.2383 6.0469 21.4414 5.20706C21.0503 4.79311 20.5785 4.46375 20.0551 4.23935C19.5318 4.01494 18.9679 3.90025 18.3984 3.90237C16.3672 3.90237 14.5703 5.26956 14.0313 7.22659L10.6758 19.375H10.6641V36.0938H29.1133C29.4727 36.0938 29.8242 36.0235 30.1484 35.8828C32.0078 35.0899 33.207 33.2735 33.207 31.2578C33.207 30.7657 33.1367 30.2813 32.9961 29.8125C33.6523 28.9453 34.0156 27.8828 34.0156 26.7774C34.0156 26.2852 33.9453 25.8008 33.8047 25.3321C34.4609 24.4649 34.8242 23.4024 34.8242 22.2969C34.8164 21.8047 34.7461 21.3164 34.6055 20.8477V20.8477ZM4.375 20.625V34.8438C4.375 35.5352 4.93359 36.0938 5.625 36.0938H8.16406V19.375H5.625C4.93359 19.375 4.375 19.9336 4.375 20.625Z" }] }),
+  purchases: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M2 10.6667C2 9.42899 2.47411 8.242 3.31802 7.36683C4.16193 6.49167 5.30653 6 6.5 6H33.5C34.6935 6 35.8381 6.49167 36.682 7.36683C37.5259 8.242 38 9.42899 38 10.6667V22.3333H2V10.6667ZM27.875 13C27.5766 13 27.2905 13.1229 27.0795 13.3417C26.8685 13.5605 26.75 13.8572 26.75 14.1667V16.5C26.75 16.8094 26.8685 17.1062 27.0795 17.325C27.2905 17.5437 27.5766 17.6667 27.875 17.6667H32.375C32.6734 17.6667 32.9595 17.5437 33.1705 17.325C33.3815 17.1062 33.5 16.8094 33.5 16.5V14.1667C33.5 13.8572 33.3815 13.5605 33.1705 13.3417C32.9595 13.1229 32.6734 13 32.375 13H27.875ZM2 27V29.3333C2 30.571 2.47411 31.758 3.31802 32.6332C4.16193 33.5083 5.30653 34 6.5 34H33.5C34.6935 34 35.8381 33.5083 36.682 32.6332C37.5259 31.758 38 30.571 38 29.3333V27H2Z" }] }),
+  superstickers: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M19.5 4C10.9394 4 4 10.9394 4 19.5C4 28.0606 10.9394 35 19.5 35C28.0606 35 35 28.0606 35 19.5C35 19.0596 34.825 18.6371 34.5136 18.3257L20.6743 4.48641C20.3629 4.17497 19.9404 4 19.5 4ZM20.5259 9.03526C20.5191 9.15866 20.5142 9.28475 20.5117 9.41323C20.4743 11.2826 20.9189 13.584 22.7929 15.6021C24.631 17.5817 27.0717 18.1953 29.2046 18.2729C29.398 18.2799 29.5874 18.2824 29.7719 18.2812L20.5259 9.03526ZM21.0503 6.25626L21.0495 6.25835C21.0503 6.25618 21.0505 6.25558 21.0503 6.25626Z", fillRule: "evenodd", clipRule: "evenodd" }] }),
+  superchats: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M20 34.1289C28.836 34.1289 36 27.832 36 20.0644C36 12.2968 28.836 6 20 6C11.164 6 4 12.2968 4 20.0644C4 23.6006 5.486 26.8355 7.94 29.3068C7.746 31.3481 7.106 33.5864 6.398 35.2661C6.24 35.6398 6.546 36.0577 6.944 35.9934C11.456 35.25 14.138 34.1088 15.304 33.514C16.8358 33.9245 18.4146 34.1312 20 34.1289V34.1289Z" }] }),
+  stars: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M35.4727 13.793L25.5547 12.3516L21.1211 3.3633C21 3.1172 20.8008 2.91798 20.5547 2.79689C19.9375 2.4922 19.1875 2.74611 18.8789 3.3633L14.4453 12.3516L4.52736 13.793C4.25392 13.832 4.00392 13.961 3.81251 14.1563C3.58111 14.3941 3.4536 14.7141 3.458 15.0459C3.46239 15.3777 3.59833 15.6942 3.83595 15.9258L11.0117 22.9219L9.31642 32.8008C9.27666 33.0306 9.30209 33.2669 9.38982 33.483C9.47756 33.6991 9.62408 33.8863 9.81278 34.0234C10.0015 34.1604 10.2248 34.2418 10.4574 34.2584C10.6901 34.275 10.9227 34.2261 11.1289 34.1172L20 29.4531L28.8711 34.1172C29.1133 34.2461 29.3945 34.2891 29.6641 34.2422C30.3438 34.125 30.8008 33.4805 30.6836 32.8008L28.9883 22.9219L36.1641 15.9258C36.3594 15.7344 36.4883 15.4844 36.5274 15.211C36.6328 14.5274 36.1563 13.8945 35.4727 13.793V13.793Z" }] }),
+  fans: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M15 13.75C15 14.7446 14.605 15.6984 13.9017 16.4016C13.1984 17.1049 12.2446 17.5 11.25 17.5C10.7576 17.5001 10.2699 17.4032 9.81485 17.2148C9.35983 17.0264 8.94639 16.7501 8.59815 16.4019C8.2499 16.0537 7.97369 15.6402 7.78527 15.1852C7.59685 14.7302 7.49993 14.2425 7.50004 13.75C7.50004 11.6783 9.17837 10 11.25 10C13.3217 10 15 11.6783 15 13.75ZM3.33337 23.6108C3.33337 20.6558 8.60837 19.1667 11.25 19.1667C13.8917 19.1667 19.1667 20.6558 19.1667 23.6108V30H3.33337V23.6108ZM32.5 13.75C32.5 14.7446 32.105 15.6984 31.4017 16.4016C30.6984 17.1049 29.7446 17.5 28.75 17.5C28.2576 17.5001 27.7699 17.4032 27.3148 17.2148C26.8598 17.0264 26.4464 16.7501 26.0981 16.4019C25.7499 16.0537 25.4737 15.6402 25.2853 15.1852C25.0969 14.7302 24.9999 14.2425 25 13.75C25 11.6783 26.6784 10 28.75 10C30.8217 10 32.5 11.6783 32.5 13.75ZM22.5 12.5C22.5 13.163 22.2366 13.7989 21.7678 14.2678C21.299 14.7366 20.6631 15 20 15C19.337 15 18.7011 14.7366 18.2323 14.2678C17.7634 13.7989 17.5 13.163 17.5 12.5C17.5 11.837 17.7634 11.2011 18.2323 10.7322C18.7011 10.2634 19.337 10 20 10C20.6631 10 21.299 10.2634 21.7678 10.7322C22.2366 11.2011 22.5 11.837 22.5 12.5V12.5ZM20.8334 23.6108C20.8334 20.6558 26.1084 19.1667 28.75 19.1667C31.3917 19.1667 36.6667 20.6558 36.6667 23.6108V30H20.8334V23.6108Z" }, { d: "M23.9584 18.4875C23.7367 18.5692 23.5167 18.6558 23.3017 18.7483C22.3267 19.165 21.3409 19.7283 20.5751 20.4817C20.3701 20.6842 20.1751 20.905 20.0001 21.1458C19.8267 20.9092 19.6344 20.6871 19.4251 20.4817C18.6592 19.7283 17.6742 19.165 16.6976 18.7483C16.4809 18.6558 16.262 18.5688 16.0409 18.4875C17.3101 17.83 18.9417 17.5 20.0001 17.5C21.0584 17.5 22.6901 17.83 23.9584 18.4875Z", fillRule: "evenodd", clipRule: "evenodd" }] }),
+  shares: createEventIcon({ width: "40", height: "40", viewBox: "0 0 40 40", paths: [{ d: "M28.7857 24.25C27.3222 24.25 25.9772 24.7692 24.9154 25.6376L18.2812 21.384C18.4777 20.4723 18.4777 19.5276 18.2812 18.616L24.9154 14.3624C25.9772 15.2308 27.3222 15.75 28.7857 15.75C32.2177 15.75 35 12.8958 35 9.375C35 5.85421 32.2177 3 28.7857 3C25.3537 3 22.5714 5.85421 22.5714 9.375C22.5714 9.85034 22.6226 10.3133 22.7188 10.759L16.0846 15.0126C15.0228 14.1442 13.6777 13.625 12.2143 13.625C8.78225 13.625 6 16.4792 6 20C6 23.5208 8.78225 26.375 12.2143 26.375C13.6777 26.375 15.0228 25.8558 16.0846 24.9874L22.7188 29.241C22.6207 29.6955 22.5713 30.1596 22.5714 30.625C22.5714 34.1458 25.3537 37 28.7857 37C32.2177 37 35 34.1458 35 30.625C35 27.1042 32.2177 24.25 28.7857 24.25Z" }] }),
+  loyalty: createEventIcon({ width: "20", height: "20", viewBox: "0 0 20 20", paths: [{ d: "M16.5045 9.99998C16.5045 13.5923 13.5923 16.5045 9.99998 16.5045C6.40761 16.5045 3.49542 13.5923 3.49542 9.99998C3.49542 6.40761 6.40761 3.49542 9.99998 3.49542C13.5923 3.49542 16.5045 6.40761 16.5045 9.99998ZM18 9.99998C18 14.4182 14.4182 18 9.99998 18C5.58172 18 2 14.4182 2 9.99998C2 5.58172 5.58172 2 9.99998 2C14.4182 2 18 5.58172 18 9.99998ZM9.99998 16.2442C13.4486 16.2442 16.2442 13.4486 16.2442 9.99998C16.2442 6.55139 13.4486 3.75577 9.99998 3.75577C6.55139 3.75577 3.75577 6.55139 3.75577 9.99998C3.75577 13.4486 6.55139 16.2442 9.99998 16.2442ZM8.09761 6.5488H6.80644V7.30459H7.99759V7.75807H6.80644V8.51388H7.99759V13.4511H12.8894V12.432H9.08042V6.5505H8.09761V6.5488ZM10.137 6.5488H13.1936V7.30459H10.137V6.5488ZM13.1936 7.75807H10.137V8.51388H13.1936V7.75807Z", fillRule: "evenodd", clipRule: "evenodd" }] })
+};
+function EventTypeIcon({ type, ...props }) {
+  const Icon = (type != null ? EVENT_TYPE_ICONS[String(type).trim().toLowerCase()] : void 0) ?? EVENT_TYPE_FALLBACK_ICON;
+  return /* @__PURE__ */ jsx(Icon, { ...props });
+}
+EventTypeIcon.displayName = "EventTypeIcon";
+
+// src/components/EventListItem/EventListItem.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function EventListItem({
+  username,
+  message,
+  userMessage,
+  avatar,
+  fallbackAvatar,
+  timestamp,
+  platformIcon,
+  alertIcon,
+  eventType,
+  accentColor,
+  colorFullBackground,
+  showAvatar = true,
+  showTimestamp = true,
+  showMessage = true,
+  actions,
+  onUsernameClick,
+  className
+}) {
+  const resolvedAlertIcon = alertIcon ?? (eventType !== void 0 ? /* @__PURE__ */ jsx2(EventTypeIcon, { type: eventType }) : null);
+  const style = {};
+  if (accentColor) {
+    style.borderLeftColor = accentColor;
+  }
+  if (colorFullBackground && accentColor) {
+    style.backgroundColor = `color-mix(in srgb, ${accentColor} 22%, var(--cardbackground, var(--neutralDark2, #211d3e)))`;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: classNames("ls-eventlist-item", className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ls-eventlist-item__main", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ls-eventlist-item__identity", children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: classNames("ls-eventlist-item__username", { "ls-eventlist-item__username--clickable": onUsernameClick }),
+            role: onUsernameClick ? "button" : void 0,
+            tabIndex: onUsernameClick ? 0 : void 0,
+            onClick: onUsernameClick,
+            onKeyDown: onUsernameClick ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onUsernameClick();
+              }
+            } : void 0,
+            children: username
+          }
+        ),
+        platformIcon ? /* @__PURE__ */ jsx2("span", { className: "ls-eventlist-item__icon", children: platformIcon }) : null,
+        showAvatar && (avatar || fallbackAvatar) ? /* @__PURE__ */ jsx2("span", { className: "ls-eventlist-item__avatar", children: /* @__PURE__ */ jsx2("img", { src: avatar || fallbackAvatar, alt: "" }) }) : null,
+        resolvedAlertIcon ? /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "ls-eventlist-item__icon",
+            style: accentColor ? { color: accentColor } : void 0,
+            children: resolvedAlertIcon
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ls-eventlist-item__body", children: [
+        message ? /* @__PURE__ */ jsx2("span", { className: "ls-eventlist-item__message", children: message }) : null,
+        showMessage && userMessage ? /* @__PURE__ */ jsxs("span", { className: "ls-eventlist-item__usermessage", children: [
+          "\u201C",
+          userMessage,
+          "\u201D"
+        ] }) : null
+      ] }),
+      showTimestamp && timestamp ? /* @__PURE__ */ jsx2("span", { className: "ls-eventlist-item__time", children: timestamp }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx2("div", { className: "ls-eventlist-item__actions", children: actions }) : null
+  ] });
+}
+EventListItem.displayName = "EventListItem";
+
+// src/components/PlatformIcon/PlatformIcon.tsx
+import classNames2 from "classnames";
+
+// src/assets/platforms/discord.svg
+var discord_default = 'data:image/svg+xml,<svg width="106" height="84" viewBox="0 0 106 84" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M87.6564 10.3044C81.1722 7.33742 74.33 5.21982 67.3004 4.00432C67.2367 3.99362 67.1713 4.00292 67.1131 4.03082C67.0549 4.05872 67.0068 4.10392 66.9754 4.16012C66.0941 5.71802 65.1192 7.75572 64.4379 9.35102C56.8605 8.20442 49.153 8.20442 41.5757 9.35102C40.8157 7.57392 39.956 5.84082 39.0007 4.16012C38.9686 4.10452 38.9204 4.05982 38.8624 4.03202C38.8044 4.00422 38.7393 3.99452 38.6757 4.00432C31.6445 5.21322 24.8008 7.33202 18.3196 10.3044C18.2642 10.3255 18.2178 10.3652 18.1884 10.4166C5.22598 29.7281 1.66978 48.5661 3.41358 67.1673C3.41978 67.2545 3.47608 67.3418 3.54478 67.3978C11.093 72.9727 19.5358 77.229 28.5133 79.986C28.5767 80.005 28.6448 80.005 28.7077 79.983C28.7707 79.962 28.8252 79.921 28.8633 79.867C30.7883 77.25 32.5007 74.4893 33.9757 71.5854C34.0065 71.5256 34.017 71.4575 34.0057 71.3913C33.9945 71.325 33.962 71.2641 33.9132 71.2178C33.8809 71.1874 33.8426 71.164 33.8007 71.1492C31.108 70.1174 28.5001 68.8777 26.0008 67.4415C25.931 67.402 25.8791 67.3373 25.8558 67.2607C25.8325 67.1842 25.8397 67.1016 25.8758 67.0302C25.8971 66.9838 25.9292 66.9432 25.9696 66.9118C26.4946 66.5192 27.0196 66.1079 27.5195 65.6966C27.5637 65.6612 27.6167 65.6385 27.6729 65.6308C27.729 65.6231 27.7862 65.6308 27.8383 65.653C44.2069 73.1059 61.9254 73.1059 78.094 65.653C78.148 65.6297 78.2074 65.6214 78.2657 65.6291C78.324 65.6368 78.3792 65.6601 78.4253 65.6966C78.9253 66.1079 79.4503 66.5192 79.9753 66.9118C80.0178 66.9428 80.052 66.9838 80.0747 67.0312C80.0975 67.0786 80.1081 67.1308 80.1056 67.1833C80.1031 67.2358 80.0876 67.2868 80.0605 67.3319C80.0334 67.3769 79.9955 67.4146 79.9503 67.4415C77.4566 68.8909 74.8454 70.1291 72.1441 71.143C72.101 71.1585 72.0619 71.1834 72.0295 71.2157C71.9971 71.248 71.9722 71.287 71.9566 71.3299C71.9421 71.3716 71.9363 71.4157 71.9396 71.4596C71.9428 71.5035 71.955 71.5464 71.9753 71.5854C73.4753 74.4831 75.194 77.25 77.0815 79.867C77.1197 79.921 77.1741 79.962 77.2371 79.983C77.3 80.005 77.3681 80.005 77.4315 79.986C86.424 77.238 94.881 72.9807 102.438 67.3978C102.475 67.3717 102.507 67.3374 102.53 67.2975C102.552 67.2576 102.566 67.2131 102.569 67.1673C104.656 45.6622 99.075 26.98 87.7814 10.4228C87.77 10.3955 87.753 10.3708 87.7315 10.3504C87.71 10.33 87.6844 10.3144 87.6564 10.3044ZM36.4195 55.8383C31.4883 55.8383 27.432 51.3267 27.432 45.7931C27.432 40.2532 31.4133 35.7416 36.4195 35.7416C41.4632 35.7416 45.4819 40.2906 45.4069 45.7931C45.4069 51.3267 41.4257 55.8383 36.4195 55.8383ZM69.6441 55.8383C64.7192 55.8383 60.6567 51.3267 60.6567 45.7931C60.6567 40.2532 64.6379 35.7416 69.6441 35.7416C74.6878 35.7416 78.7128 40.2906 78.6315 45.7931C78.6315 51.3267 74.6878 55.8383 69.6441 55.8383Z" fill="%235C65EB"/>%0A</svg>%0A';
+
+// src/assets/platforms/facebook.svg
+var facebook_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M15.725 22V14.255H18.325L18.714 11.237H15.724V9.31C15.724 8.436 15.967 7.83999 17.221 7.83999H18.819V5.14C18.0451 5.05764 17.2673 5.01758 16.489 5.02C14.185 5.02 12.608 6.427 12.608 9.01001V11.237H9.99998V14.255H12.607V22H3.104C2.494 22 2 21.506 2 20.896V3.104C2 2.494 2.494 2 3.104 2H20.896C21.506 2 22 2.494 22 3.104V20.896C22 21.506 21.506 22 20.896 22H15.725Z" fill="%23087BEA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M15.725 22V14.255H18.325L18.714 11.237H15.724V9.31C15.724 8.436 15.967 7.83999 17.221 7.83999H18.819V5.14C18.0451 5.05764 17.2673 5.01758 16.489 5.02C14.185 5.02 12.608 6.427 12.608 9.01001V11.237H9.99998V14.255H12.607V22H3.104C2.494 22 2 21.506 2 20.896V3.104C2 2.494 2.494 2 3.104 2H20.896C21.506 2 22 2.494 22 3.104V20.896C22 21.506 21.506 22 20.896 22H15.725Z" fill="url(%23paint0_linear_2516_9002)"/>%0A<defs>%0A<linearGradient id="paint0_linear_2516_9002" x1="12" y1="21.4156" x2="12" y2="2" gradientUnits="userSpaceOnUse">%0A<stop stop-color="%230062E0"/>%0A<stop offset="1" stop-color="%2319AFFF"/>%0A</linearGradient>%0A</defs>%0A</svg>%0A';
+
+// src/assets/platforms/kick.svg
+var kick_default = 'data:image/svg+xml,<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4H9.62501V8H11.5V6H13.375V4H19V10H17.125V12H15.2501V14H17.125V16H19V22H13.375V20H11.5V18H9.62501V22H4V4Z" fill="%2342FD0A"/>%0A</svg>%0A';
+
+// src/assets/platforms/lumiaLogo.svg
+var lumiaLogo_default = 'data:image/svg+xml,<svg width="310" height="310" viewBox="0 0 310 310" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M126.553 283.309C127.43 287.957 131.415 291.316 136.051 291.316H169.708C175.05 291.316 179.381 286.894 179.381 281.44C179.381 275.986 175.05 271.564 169.708 271.564H144.039L143.398 268.171H175.938C181.167 268.171 185.449 263.929 185.607 258.593C186.654 223.171 200.493 199.947 215.267 176.455C215.835 175.551 216.406 174.646 216.978 173.739C231.175 151.218 246.29 127.243 246.29 93.0565C246.29 62.8306 234.545 39.9721 216.68 24.8443C199.061 9.92486 176.088 3 153.931 3C111.466 3 64 34.5184 64 94.0485C64 125.271 77.7676 152.459 90.9936 175.734C93.021 179.302 95.0189 182.748 96.9655 186.105C101.552 194.017 105.855 201.438 109.59 208.807C114.864 219.212 118.437 228.471 119.591 237.069C120.254 242.013 124.426 245.675 129.313 245.603C134.2 245.532 138.268 241.75 138.792 236.788C139.637 228.792 143.857 219.28 150.879 208.043C156.859 198.472 164.275 188.55 172.113 178.062C173.39 176.353 174.678 174.629 175.974 172.889C185.05 160.696 194.398 147.799 201.456 134.841C208.481 121.94 213.766 108.051 213.766 93.8831C213.766 76.7114 207.388 62.1228 196.289 51.9119C185.292 41.7953 170.319 36.5602 153.931 36.5602C121.603 36.5602 96.5239 63.0978 96.5239 93.8831C96.5239 102.894 98.2899 116.42 103.002 128.055C107.497 139.153 116.502 152.529 132.734 152.529C140.658 152.529 147.148 149.581 151.972 144.611C156.532 139.912 159.099 133.942 160.625 128.478C163.474 118.279 163.454 106.831 163.444 100.801C163.444 100.461 163.443 100.139 163.443 99.8347C163.443 94.3804 159.112 89.9589 153.77 89.9589C148.427 89.9589 144.096 94.3804 144.096 99.8347L144.096 100.278C144.097 106.623 144.099 115.617 142.02 123.061C140.977 126.793 139.63 129.264 138.229 130.709C137.091 131.881 135.571 132.777 132.734 132.777C128.902 132.777 124.639 129.786 120.881 120.508C117.341 111.767 115.871 100.908 115.871 93.8831C115.871 74.0802 132.215 56.3118 153.931 56.3118C166.346 56.3118 176.454 60.252 183.337 66.5848C190.118 72.8234 194.419 81.9583 194.419 93.8831C194.419 103.191 190.885 113.604 184.547 125.243C178.239 136.824 169.677 148.705 160.57 160.938C159.324 162.612 158.067 164.294 156.804 165.983C149.006 176.413 141.025 187.088 134.568 197.42C132.864 200.148 131.222 202.918 129.687 205.719C128.753 203.708 127.777 201.712 126.773 199.73C122.771 191.834 118.024 183.646 113.312 175.518C111.429 172.269 109.551 169.03 107.728 165.822C94.5791 142.683 83.3469 119.531 83.3469 94.0485C83.3469 47.7729 119.698 22.7516 153.931 22.7516C172.389 22.7516 190.759 28.5564 204.329 40.047C217.653 51.3293 226.943 68.5611 226.943 93.0565C226.943 121.353 214.634 140.915 199.947 164.257C199.628 164.764 199.308 165.273 198.986 165.784C185.181 187.737 170.104 212.49 166.842 248.419H131.683C128.796 248.419 126.061 249.735 124.223 252.007C122.386 254.279 121.638 257.27 122.184 260.164L126.553 283.309Z" fill="%23FF4469"/>%0A<path d="M167.2 295.575C167.2 304.617 160.299 306.817 151.787 306.817C143.275 306.817 136.375 304.617 136.375 295.575H167.2Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M185.804 111.539C186.466 109.832 185.647 107.901 183.975 107.226L172.394 102.546C170.722 101.87 168.83 102.706 168.169 104.413C167.507 106.119 168.326 108.051 169.998 108.726L181.579 113.406C183.251 114.082 185.142 113.246 185.804 111.539Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M123.949 113.947C124.697 115.616 126.628 116.35 128.263 115.587L139.59 110.297C141.225 109.533 141.944 107.561 141.196 105.892C140.448 104.222 138.516 103.488 136.881 104.252L125.555 109.542C123.92 110.306 123.201 112.278 123.949 113.947Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M141.106 94.8617C141.679 93.122 140.762 91.2371 139.058 90.6518L127.254 86.5969C125.55 86.0115 123.703 86.9473 123.13 88.687C122.557 90.4268 123.473 92.3116 125.177 92.897L136.982 96.9519C138.686 97.5372 140.532 96.6014 141.106 94.8617Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M147.751 87.1376C149.438 86.5012 150.3 84.5896 149.676 82.8679L145.355 70.9337C144.732 69.212 142.86 68.3322 141.173 68.9686C139.487 69.605 138.625 71.5166 139.248 73.2383L143.569 85.1725C144.193 86.8942 146.065 87.774 147.751 87.1376Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M159.968 86.4852C161.656 87.1168 163.526 86.2316 164.145 84.5081L168.433 72.5617C169.052 70.8382 168.185 68.9291 166.496 68.2975C164.808 67.666 162.938 68.5511 162.32 70.2746L158.032 82.221C157.413 83.9445 158.28 85.8537 159.968 86.4852Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M167.942 93.9614C168.717 95.6179 170.66 96.3197 172.283 95.5289L183.524 90.0507C185.146 89.26 185.834 87.2761 185.059 85.6196C184.285 83.9631 182.341 83.2613 180.719 84.052L169.478 89.5302C167.855 90.321 167.168 92.3049 167.942 93.9614Z" fill="%23FF4469"/>%0A</svg>%0A';
+
+// src/assets/platforms/tiktok.svg
+var tiktok_default = 'data:image/svg+xml,<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M47.163 27.1414C50.7816 29.7268 55.2145 31.2479 60.0023 31.2479V22.0395C59.0962 22.0397 58.1924 21.9452 57.306 21.7575V29.0059C52.5185 29.0059 48.0862 27.4847 44.4666 24.8995V43.6913C44.4666 53.0918 36.8421 60.712 27.4372 60.712C23.9281 60.712 20.6665 59.6516 17.957 57.8331C21.0494 60.9934 25.3619 62.9538 30.133 62.9538C39.5384 62.9538 47.1633 55.3337 47.1633 45.9327V27.1414H47.163V27.1414ZM50.4892 17.8512C48.6399 15.8319 47.4257 13.2223 47.163 10.3372V9.15283H44.6078C45.251 12.8197 47.4447 15.9525 50.4892 17.8512ZM23.9056 50.6194C22.8724 49.2653 22.314 47.6089 22.3165 45.9058C22.3165 41.6063 25.8039 38.1203 30.1065 38.1203C30.9083 38.1201 31.7054 38.2428 32.4695 38.4851V29.0709C31.5765 28.9486 30.6752 28.8966 29.7743 28.9157V36.2433C29.0096 36.0009 28.2122 35.8778 27.4101 35.8786C23.1076 35.8786 19.6203 39.3643 19.6203 43.6643C19.6203 46.7048 21.3635 49.3371 23.9056 50.6194Z" fill="%23FF004F"/>%0A<path d="M44.4647 24.8993C48.0843 27.4845 52.5166 29.0057 57.3041 29.0057V21.7573C54.6318 21.1884 52.266 19.7926 50.4873 17.8512C47.4427 15.9523 45.2491 12.8195 44.6059 9.15283H37.8942V45.9323C37.879 50.2201 34.3975 53.6919 30.1042 53.6919C27.5742 53.6919 25.3266 52.4866 23.9031 50.6194C21.3612 49.3371 19.6181 46.7046 19.6181 43.6645C19.6181 39.3649 23.1053 35.8788 27.4079 35.8788C28.2322 35.8788 29.0267 36.0071 29.772 36.2435V28.9159C20.5324 29.1067 13.1016 36.6524 13.1016 45.9325C13.1016 50.5651 14.952 54.7648 17.9553 57.8333C20.6648 59.6516 23.9264 60.7122 27.4355 60.7122C36.8406 60.7122 44.4649 53.0916 44.4649 43.6913V24.8993H44.4647Z" fill="white"/>%0A<path d="M57.3049 21.7573V19.7974C54.8951 19.8011 52.5327 19.1265 50.4882 17.851C52.298 19.8315 54.6813 21.197 57.3049 21.7573ZM44.6067 9.1528C44.5454 8.80237 44.4983 8.44962 44.4656 8.09553V6.91113H35.1985V43.691C35.1837 47.9782 31.7024 51.45 27.4087 51.45C26.1481 51.45 24.958 51.151 23.904 50.6195C25.3274 52.4865 27.5751 53.6917 30.105 53.6917C34.398 53.6917 37.88 50.2202 37.895 45.9325V9.1528H44.6067ZM29.7733 28.9158V26.8294C28.9989 26.7236 28.2182 26.6705 27.4366 26.6709C18.0308 26.6707 10.4062 34.2912 10.4062 43.691C10.4062 49.5842 13.4028 54.7778 17.9564 57.8329C14.9531 54.7646 13.1026 50.5647 13.1026 45.9323C13.1026 36.6523 20.5333 29.1066 29.7733 28.9158Z" fill="%2300F2EA"/>%0A</svg>%0A';
+
+// src/assets/platforms/twitch.svg
+var twitch_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M4.875 4L3 7.125V21.5H8V24H10.5L13 21.5H16.125L21.75 15.875V4H4.875ZM19.25 14.625L16.125 17.75H13L10.5 20.25V17.75H6.75V6.5H19.25V14.625Z" fill="%23874BF6"/>%0A<path d="M14.875 9H16.75V14H14.875V9Z" fill="%23874BF6"/>%0A<path d="M11.125 9H13V14H11.125V9Z" fill="%23874BF6"/>%0A</svg>%0A';
+
+// src/assets/platforms/twitter.svg
+var twitter_default = 'data:image/svg+xml,<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M387.014 83.988C376.599 99.48 363.821 112.686 348.68 123.607C348.83 126.535 348.905 129.846 348.905 133.537C348.905 154.05 345.914 174.587 339.933 195.149C333.952 215.711 324.816 235.392 312.524 254.193C300.233 272.994 285.591 289.65 268.6 304.161C251.609 318.672 231.185 330.243 207.327 338.872C183.47 347.502 157.902 351.817 130.622 351.817C88.0468 351.817 48.8396 340.323 13 317.336C19.3611 318.044 25.4619 318.398 31.3025 318.398C66.8703 318.398 98.6381 307.442 126.606 285.532C110.022 285.228 95.1701 280.123 82.0499 270.217C68.9297 260.311 59.9007 247.653 54.9628 232.243C59.8435 233.173 64.6607 233.638 69.4142 233.638C76.2565 233.638 82.9893 232.745 89.6125 230.96C71.9146 227.416 57.2326 218.601 45.5667 204.516C33.9012 190.432 28.0684 174.175 28.0684 155.747V154.797C38.9314 160.812 50.5186 164.011 62.8299 164.395C52.3458 157.406 44.0334 148.291 37.8929 137.052C31.752 125.813 28.6815 113.65 28.6815 100.563C28.6815 86.761 32.14 73.9088 39.0571 62.0062C58.3033 85.6243 81.6241 104.501 109.019 118.635C136.415 132.77 165.806 140.62 197.191 142.185C195.852 136.607 195.181 130.785 195.179 124.72C195.179 103.545 202.673 85.4646 217.66 70.4788C232.647 55.4929 250.728 48 271.903 48C294.073 48 312.747 56.0725 327.925 72.2175C345.266 68.7826 361.503 62.5696 376.636 53.5787C370.806 71.9272 359.572 86.0818 342.933 96.0425C358.226 94.2253 372.92 90.2071 387.014 83.988Z" fill="%231D9BF0"/>%0A</svg>%0A';
+
+// src/assets/platforms/youtube.svg
+var youtube_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12.5612 5H12.6669C13.643 5.00347 18.5892 5.03817 19.9229 5.38749C20.3261 5.4941 20.6935 5.7019 20.9884 5.99013C21.2833 6.27836 21.4953 6.63692 21.6033 7.02998C21.7233 7.46952 21.8076 8.05133 21.8646 8.65166L21.8765 8.77195L21.9026 9.0727L21.9121 9.19298C21.9893 10.2502 21.9988 11.2403 22 11.4566V11.5434C21.9988 11.7678 21.9882 12.825 21.9026 13.9262L21.8931 14.0476L21.8825 14.1679C21.823 14.8295 21.7352 15.4865 21.6033 15.97C21.4957 16.3632 21.2837 16.722 20.9888 17.0102C20.6939 17.2985 20.3262 17.5062 19.9229 17.6125C18.5454 17.9734 13.3093 17.9988 12.5837 18H12.4151C12.0481 18 10.5304 17.9931 8.93906 17.9399L8.73717 17.9329L8.63385 17.9283L8.43078 17.9202L8.2277 17.9121C6.90949 17.8554 5.65423 17.764 5.07589 17.6114C4.67269 17.5052 4.30522 17.2976 4.0103 17.0096C3.71538 16.7215 3.50335 16.363 3.39546 15.97C3.26364 15.4877 3.17576 14.8295 3.11638 14.1679L3.10688 14.0464L3.09738 13.9262C3.03877 13.1424 3.00629 12.357 3 11.5711V11.43C3.00238 11.1813 3.01188 10.3219 3.076 9.37343L3.08432 9.25429L3.08788 9.19415L3.09738 9.07385L3.12351 8.77311L3.13538 8.65281C3.19239 8.0525 3.27671 7.46952 3.39665 7.03115C3.50435 6.63792 3.7163 6.27919 4.01124 5.99091C4.30617 5.70263 4.67374 5.49494 5.07707 5.38865C5.65541 5.23828 6.91069 5.14574 8.22889 5.08791L8.43078 5.07981L8.63503 5.07287L8.73717 5.0694L8.94024 5.0613C10.0705 5.02549 11.2011 5.00544 12.332 5.00116H12.5612V5ZM10.6005 8.71297V14.2859L15.5372 11.5006L10.6005 8.71297Z" fill="%23FF0000"/>%0A</svg>%0A';
+
+// src/components/PlatformIcon/PlatformIcon.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PLATFORM_ICON_URLS = {
+  twitch: twitch_default,
+  youtube: youtube_default,
+  kick: kick_default,
+  tiktok: tiktok_default,
+  facebook: facebook_default,
+  twitter: twitter_default,
+  x: twitter_default,
+  discord: discord_default,
+  lumia: lumiaLogo_default,
+  lumiastream: lumiaLogo_default
+};
+var getPlatformIconUrl = (platform) => {
+  if (!platform) {
+    return void 0;
+  }
+  return PLATFORM_ICON_URLS[String(platform).trim().toLowerCase()];
+};
+function PlatformIcon({ platform, fallback = true, size, className, title, style }) {
+  const url = getPlatformIconUrl(platform) ?? (fallback ? lumiaLogo_default : void 0);
+  if (!url) {
+    return null;
+  }
+  const sizeStyle = size !== void 0 ? { height: typeof size === "number" ? `${size}px` : size } : void 0;
+  return /* @__PURE__ */ jsx3("img", { className: classNames2("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
+}
+PlatformIcon.displayName = "PlatformIcon";
+
+// src/components/EventList/EventList.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var PIN_THRESHOLD = 24;
+function EventList({
+  items,
+  id,
+  showAvatars = true,
+  showTimestamps = true,
+  showMessages = true,
+  showPlatformIcons = true,
+  showActions = true,
+  colorFullBackground = false,
+  fallbackAvatar,
+  itemGap,
+  emptyText = "No events yet",
+  emptyIcon = "\u{1F389}",
+  emptyClassName,
+  autoScroll = true,
+  newestAt = "top",
+  onEndReached,
+  endReachedThreshold = 24,
+  className
+}) {
+  const listRef = useRef(null);
+  const pinnedRef = useRef(true);
+  useEffect(() => {
+    const el = listRef.current;
+    if (!autoScroll || !el || !pinnedRef.current) {
+      return;
+    }
+    el.scrollTop = newestAt === "top" ? 0 : el.scrollHeight;
+  }, [items, autoScroll, newestAt]);
+  const handleScroll = () => {
+    const el = listRef.current;
+    if (!el) {
+      return;
+    }
+    const distanceFromEnd = el.scrollHeight - el.scrollTop - el.clientHeight;
+    const distanceFromNewest = newestAt === "top" ? el.scrollTop : distanceFromEnd;
+    const distanceFromOldest = newestAt === "top" ? distanceFromEnd : el.scrollTop;
+    pinnedRef.current = distanceFromNewest <= PIN_THRESHOLD;
+    if (onEndReached && distanceFromOldest <= endReachedThreshold) {
+      onEndReached();
+    }
+  };
+  return /* @__PURE__ */ jsx4("div", { className: classNames3("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs2("div", { className: classNames3("ls-eventlist__empty", emptyClassName), children: [
+    emptyIcon ? /* @__PURE__ */ jsx4("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
+    /* @__PURE__ */ jsx4("span", { children: emptyText })
+  ] }) : /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "ls-eventlist__list",
+      ref: listRef,
+      onScroll: handleScroll,
+      style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
+      children: items.map((item) => /* @__PURE__ */ jsx4("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx4(
+        EventListItem,
+        {
+          username: item.username,
+          message: item.message,
+          userMessage: item.userMessage,
+          avatar: item.avatar,
+          fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
+          timestamp: item.timestamp,
+          platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx4(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
+          alertIcon: item.alertIcon,
+          eventType: item.eventType,
+          accentColor: item.accentColor,
+          colorFullBackground,
+          showAvatar: showAvatars,
+          showTimestamp: showTimestamps,
+          showMessage: showMessages,
+          actions: showActions ? item.actions : void 0,
+          onUsernameClick: item.onUsernameClick
+        }
+      ) }, item.id))
+    }
+  ) });
+}
+EventList.displayName = "EventList";
+export {
+  EVENT_TYPE_FALLBACK_ICON,
+  EVENT_TYPE_ICONS,
+  EventList,
+  EventTypeIcon
+};

package/dist/EventListItem.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface EventListItemProps {
+    username: string;
+    message?: React.ReactNode;
+    userMessage?: React.ReactNode;
+    avatar?: string;
+    fallbackAvatar?: string;
+    timestamp?: string;
+    platformIcon?: React.ReactNode;
+    alertIcon?: React.ReactNode;
+    eventType?: string | null;
+    accentColor?: string;
+    colorFullBackground?: boolean;
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+    showMessage?: boolean;
+    actions?: React.ReactNode;
+    onUsernameClick?: () => void;
+    className?: string;
+}
+declare function EventListItem({ username, message, userMessage, avatar, fallbackAvatar, timestamp, platformIcon, alertIcon, eventType, accentColor, colorFullBackground, showAvatar, showTimestamp, showMessage, actions, onUsernameClick, className, }: EventListItemProps): react_jsx_runtime.JSX.Element;
+declare namespace EventListItem {
+    var displayName: string;
+}
+
+export { EventListItem, type EventListItemProps };