@lumiastream/ui 0.2.8-alpha.9 → 0.3.0

package/dist/components.js

@@ -0,0 +1,2317 @@
+// #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 input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\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-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-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;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n");
+
+// src/components/LSButton/LSButton.tsx
+import Button from "@mui/material/Button";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+var LSButton = ({
+  label,
+  disabled = false,
+  loading = false,
+  variant = "contained",
+  extended = 0,
+  color,
+  primary = false,
+  backgroundColor,
+  className,
+  sx,
+  style,
+  ...props
+}) => {
+  const resolvedColor = color ?? (primary ? "primary" : "primary");
+  const muiColor = resolvedColor === "neutral" ? void 0 : resolvedColor;
+  const backgroundSx = backgroundColor ? { backgroundColor, "&:hover": { backgroundColor } } : null;
+  const secondaryOutlinedStyles = resolvedColor === "secondary" && variant === "outlined" ? {
+    color: "var(--white) !important",
+    "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+      color: "inherit"
+    }
+  } : null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      disabled: disabled || loading,
+      variant,
+      color: muiColor,
+      style,
+      sx: [
+        { borderRadius: "1rem", transition: "opacity 300ms ease-in-out" },
+        ...backgroundSx ? [backgroundSx] : [],
+        ...Array.isArray(sx) ? sx : sx ? [sx] : [],
+        ...secondaryOutlinedStyles ? [secondaryOutlinedStyles] : []
+      ],
+      className: classNames(
+        "mui-ls-button cursor-pointer rounded-2xl pb-1.5 pt-1.5 hover:opacity-80 svg-current-color",
+        extended ? "pl-12 pr-12 mui-ls-button--extended" : "pl-6 pr-6",
+        `mui-ls-button--${resolvedColor}`,
+        `mui-ls-button--${variant}`,
+        className
+      ),
+      ...props,
+      children: loading ? "Loading..." : label
+    }
+  );
+};
+
+// src/components/LSInput/LSInput.tsx
+import FormControl from "@mui/material/FormControl";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import classNames2 from "classnames";
+import { forwardRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LSInput = forwardRef(
+  (props, ref) => {
+    const hasExplicitValue = Object.prototype.hasOwnProperty.call(props, "value");
+    const {
+      startAdornment,
+      endAdornment,
+      inputBeforeText,
+      inputAfterText,
+      maxWidth,
+      className = "",
+      InputProps: inputPropsProp,
+      InputLabelProps: inputLabelPropsProp,
+      inputProps: htmlInputPropsProp,
+      slotProps: slotPropsProp,
+      onChange,
+      onChangeStart,
+      onChangeEnd,
+      type,
+      value,
+      helperText,
+      error,
+      style,
+      centerText,
+      $noMinHeight,
+      bypasscolor,
+      textColor,
+      fullWidth = true,
+      ...rest
+    } = props;
+    const isNumberInput = type === "number";
+    const labelIdFallback = typeof rest.label === "string" ? rest.label : void 0;
+    const normalizedValue = isNumberInput && (value === void 0 || value === null) ? "" : value;
+    const handleChange = (event) => {
+      const rawValue = event.target.value;
+      let sanitizedValue = rawValue;
+      if (isNumberInput) {
+        if (rawValue === "") {
+          sanitizedValue = void 0;
+        } else {
+          const numericValue = Number(rawValue);
+          sanitizedValue = Number.isNaN(numericValue) ? void 0 : numericValue;
+        }
+      }
+      onChangeStart?.(event, sanitizedValue);
+      onChange?.(event, sanitizedValue);
+      onChangeEnd?.(event, sanitizedValue);
+    };
+    const resolvedStartAdornment = inputPropsProp?.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
+    const resolvedEndAdornment = inputPropsProp?.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
+    const inputSlotProps = {
+      ...inputPropsProp,
+      startAdornment: resolvedStartAdornment,
+      endAdornment: resolvedEndAdornment,
+      readOnly: rest.readOnly ?? inputPropsProp?.readOnly,
+      sx: {
+        ...inputPropsProp?.sx ?? {},
+        "& input, & textarea": {
+          textAlign: centerText ? "center" : void 0,
+          color: textColor ?? void 0
+        }
+      }
+    };
+    const inputLabelProps = {
+      shrink: true,
+      ...inputLabelPropsProp
+    };
+    const helperContent = helperText ?? (typeof error === "string" ? error : "");
+    const hasError = typeof error === "string" ? true : Boolean(error);
+    const resolvedMaxWidth = maxWidth ?? style?.maxWidth;
+    const valueProps = hasExplicitValue ? { value: normalizedValue } : {};
+    const slotProps = {
+      ...slotPropsProp ?? {},
+      input: {
+        ...slotPropsProp?.input ?? {},
+        ...inputSlotProps,
+        sx: {
+          ...slotPropsProp?.input?.sx ?? {},
+          ...inputSlotProps.sx
+        }
+      },
+      inputLabel: {
+        ...slotPropsProp?.inputLabel ?? {},
+        ...inputLabelProps
+      },
+      htmlInput: {
+        ...slotPropsProp?.htmlInput ?? {},
+        ...htmlInputPropsProp ?? {}
+      }
+    };
+    const TextFieldComponent = TextField;
+    return /* @__PURE__ */ jsx2(
+      FormControl,
+      {
+        variant: "outlined",
+        className: classNames2("mui-ls-input", className, {
+          noMinHeight: $noMinHeight,
+          bypassMuiColor: bypasscolor || bypasscolor === "default"
+        }),
+        style: { ...style, maxWidth: resolvedMaxWidth, width: fullWidth ? "100%" : style?.width },
+        children: /* @__PURE__ */ jsx2(
+          TextFieldComponent,
+          {
+            ...rest,
+            ...valueProps,
+            type,
+            id: rest.id ?? rest.name ?? labelIdFallback,
+            label: rest.label,
+            size: rest.size,
+            margin: "dense",
+            variant: "outlined",
+            color: bypasscolor === "default" || bypasscolor === "inherit" ? "primary" : bypasscolor,
+            fullWidth,
+            onChange: handleChange,
+            slotProps,
+            inputRef: ref,
+            helperText: helperContent,
+            error: hasError
+          }
+        )
+      }
+    );
+  }
+);
+LSInput.displayName = "LSInput";
+
+// src/components/LSSliderInput/LSSliderInput.tsx
+import Slider from "@mui/material/Slider";
+import classNames3 from "classnames";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var normalizeSliderValue = (rawValue) => {
+  if (typeof rawValue === "number") {
+    return Number.isFinite(rawValue) ? rawValue : 0;
+  }
+  if (typeof rawValue === "string") {
+    const trimmedValue = rawValue.trim();
+    if (!trimmedValue) {
+      return 0;
+    }
+    const numericValue = Number(trimmedValue);
+    return Number.isFinite(numericValue) ? numericValue : 0;
+  }
+  return 0;
+};
+var LSSliderInput = ({
+  name,
+  value,
+  defaultValue,
+  isFloat,
+  isMiliseconds,
+  isFloatMiliseconds,
+  label,
+  inline,
+  hasInfo,
+  infoOpen,
+  infoClose,
+  max = Number.MAX_SAFE_INTEGER,
+  min = 0,
+  step = 1,
+  type = "number",
+  inputAfterText,
+  onChange,
+  inputProps = {},
+  helperText,
+  fullWidth = false,
+  hideInput = false,
+  hideSlider = false,
+  valueLabelFormat,
+  ...rest
+}) => {
+  const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
+  const actualToDisplay = useCallback(
+    (input) => {
+      const numericValue = normalizeSliderValue(input);
+      if (!isValueFloat) {
+        return numericValue;
+      }
+      const divisor = isFloatMiliseconds ? 1e3 : 1;
+      return Number((numericValue / divisor).toFixed(1));
+    },
+    [isFloatMiliseconds, isValueFloat]
+  );
+  const displayStep = useMemo(() => actualToDisplay(step), [actualToDisplay, step]);
+  const resolvedDefaultValue = defaultValue ?? 0;
+  const [displayValue, setDisplayValue] = useState(() => actualToDisplay(defaultValue ?? value ?? resolvedDefaultValue));
+  const displayMaximum = useMemo(() => actualToDisplay(max), [actualToDisplay, max]);
+  const displayMinimum = useMemo(() => actualToDisplay(min), [actualToDisplay, min]);
+  const sliderValue = typeof displayValue === "number" ? Math.min(displayMaximum, Math.max(displayMinimum, displayValue)) : displayMinimum;
+  const stepPrecision = useMemo(() => {
+    const stepString = String(displayStep);
+    const decimalIndex = stepString.indexOf(".");
+    return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
+  }, [displayStep]);
+  useEffect(() => {
+    if (value !== void 0) {
+      setDisplayValue(actualToDisplay(value));
+    }
+  }, [actualToDisplay, value]);
+  const normalizeDisplayValue = useCallback(
+    (input) => {
+      const bounded = Math.min(displayMaximum, Math.max(displayMinimum, input));
+      if (!Number.isFinite(displayStep) || displayStep <= 0) {
+        return bounded;
+      }
+      const snapped = Math.round((bounded - displayMinimum) / displayStep) * displayStep + displayMinimum;
+      return Number(snapped.toFixed(stepPrecision));
+    },
+    [displayMaximum, displayMinimum, displayStep, stepPrecision]
+  );
+  const handleInputChange = useCallback(
+    ({ target: { value: inputValue } }) => {
+      setDisplayValue(inputValue ?? "");
+      if (inputValue === "" || inputValue === null) {
+        if (typeof onChange === "function") {
+          onChange(void 0);
+        }
+        return;
+      }
+      const numericValue = Number(inputValue);
+      if (Number.isNaN(numericValue)) {
+        return;
+      }
+      const normalizedDisplayValue = normalizeDisplayValue(numericValue);
+      const updatedValue = isFloatMiliseconds ? normalizedDisplayValue * 1e3 : normalizedDisplayValue;
+      const upperBound = typeof max === "number" ? max : Number.MAX_SAFE_INTEGER;
+      const lowerBound = typeof min === "number" ? min : 0;
+      const isValid = updatedValue >= lowerBound && updatedValue <= upperBound;
+      if (isValid && typeof onChange === "function") {
+        onChange(updatedValue);
+      }
+    },
+    [isFloatMiliseconds, max, min, normalizeDisplayValue, onChange]
+  );
+  const handleSliderChange = useCallback(
+    (_, sliderInputValue) => {
+      const numericValue = typeof sliderInputValue === "number" ? sliderInputValue : sliderInputValue[0];
+      const normalizedDisplayValue = normalizeDisplayValue(numericValue);
+      setDisplayValue(normalizedDisplayValue);
+      const nextValue = isFloatMiliseconds ? normalizedDisplayValue * 1e3 : normalizedDisplayValue;
+      onChange?.(nextValue);
+    },
+    [isFloatMiliseconds, normalizeDisplayValue, onChange]
+  );
+  const controlsRow = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames3("mui-ls-slider-input-row", {
+        "mui-ls-slider-input-row--slider": !hideSlider,
+        "mui-ls-slider-input-row--input": hideInput
+      }),
+      children: [
+        !hideSlider && /* @__PURE__ */ jsx3(
+          Slider,
+          {
+            value: sliderValue,
+            onChange: handleSliderChange,
+            onBlur: rest.onBlur,
+            color: "primary",
+            valueLabelDisplay: "auto",
+            valueLabelFormat: (v) => valueLabelFormat?.(v) ?? `${v}${inputAfterText ?? ""}`,
+            min: displayMinimum,
+            max: displayMaximum,
+            step: displayStep,
+            sx: { flex: 1, minWidth: 0 }
+          }
+        ),
+        !hideInput && /* @__PURE__ */ jsx3(
+          LSInput,
+          {
+            ...rest,
+            ...inputProps,
+            type,
+            name,
+            onChange: (_event, nextValue) => handleInputChange({ target: { value: nextValue ?? "" } }),
+            value: displayValue ?? "",
+            inputAfterText,
+            InputProps: {
+              ...inputProps?.InputProps ?? {},
+              name,
+              type: "number",
+              value: displayValue,
+              min: displayMinimum,
+              max: displayMaximum,
+              step: displayStep,
+              inputMode: stepPrecision > 0 ? "decimal" : "numeric"
+            },
+            fullWidth: hideSlider ? fullWidth : false,
+            $noMinHeight: false,
+            className: hideSlider ? inputProps?.className : `${inputProps?.className ?? ""} mui-ls-slider-input-value`.trim(),
+            style: hideSlider ? inputProps?.style : { width: 112, maxWidth: 112, flexShrink: 0 },
+            ...!hideSlider ? { size: "small" } : {}
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "mui-ls-slider-input-root", children: [
+    /* @__PURE__ */ jsxs("fieldset", { className: "mui-ls-slider-input-fieldset", children: [
+      label && /* @__PURE__ */ jsx3("legend", { className: "mui-ls-slider-input-legend", children: label }),
+      controlsRow
+    ] }),
+    helperText && /* @__PURE__ */ jsx3("small", { className: "mui-ls-slider-input-helper", children: helperText })
+  ] });
+};
+LSSliderInput.displayName = "LSSliderInput";
+
+// src/components/LSSelect/LSSelect.tsx
+import FormControl2 from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Select from "@mui/material/Select";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var LSSelect = ({
+  className = "",
+  style,
+  ...props
+}) => {
+  const {
+    placeholder,
+    displayEmpty: displayEmptyProp,
+    renderValue: renderValueProp,
+    variant: _variant,
+    MenuProps,
+    ...rest
+  } = props;
+  const labelKey = props.name ?? (typeof props.label === "string" ? props.label : void 0);
+  const labelId = props.label && labelKey ? `label_${labelKey}` : void 0;
+  const placeholderText = typeof placeholder === "string" ? placeholder : "";
+  const displayEmpty = displayEmptyProp ?? !!placeholderText;
+  const value = rest.multiple === true ? Array.isArray(rest.value) ? rest.value : rest.value === void 0 || rest.value === null || rest.value === "" ? [] : [rest.value] : rest.value ?? "";
+  const renderValue = renderValueProp ?? (placeholderText ? (selected) => {
+    if (selected === "" || Array.isArray(selected) && selected.length === 0) {
+      return /* @__PURE__ */ jsx4("span", { style: { color: "var(--neutralLight3)" }, children: placeholderText });
+    }
+    return Array.isArray(selected) ? selected.join(", ") : selected;
+  } : void 0);
+  const mergedMenuProps = {
+    ...MenuProps ?? {},
+    slotProps: {
+      ...MenuProps?.slotProps ?? {},
+      paper: {
+        ...MenuProps?.slotProps?.paper ?? {},
+        sx: {
+          background: "var(--neutralDark2) !important",
+          backgroundColor: "var(--neutralDark2)",
+          color: "var(--neutralLight1)",
+          border: "1px solid var(--neutralDark4)",
+          borderRadius: "var(--radius, 1rem)",
+          boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+          ...MenuProps?.slotProps?.paper?.sx
+        }
+      },
+      list: {
+        ...MenuProps?.slotProps?.list ?? {},
+        sx: {
+          backgroundColor: "var(--neutralDark2)",
+          color: "var(--neutralLight1)",
+          ...MenuProps?.slotProps?.list?.sx
+        }
+      }
+    },
+    PaperProps: {
+      ...MenuProps?.PaperProps ?? {},
+      sx: {
+        background: "var(--neutralDark2) !important",
+        backgroundColor: "var(--neutralDark2)",
+        color: "var(--neutralLight1)",
+        border: "1px solid var(--neutralDark4)",
+        borderRadius: "var(--radius, 1rem)",
+        boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+        "& .MuiList-root": {
+          backgroundColor: "var(--neutralDark2)"
+        },
+        "& .MuiListSubheader-root": {
+          backgroundColor: "var(--neutralDark1)",
+          color: "var(--neutralLight2)"
+        },
+        "& .MuiMenuItem-root": {
+          color: "var(--neutralLight1)"
+        },
+        ...MenuProps?.PaperProps?.sx
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    FormControl2,
+    {
+      variant: "outlined",
+      className: `${className} mui-ls-select-form-control`,
+      sx: {
+        marginBottom: ".3rem",
+        marginTop: ".5rem",
+        minWidth: "100px",
+        width: "100%"
+      },
+      size: rest.size,
+      style,
+      children: [
+        props.label && /* @__PURE__ */ jsx4(InputLabel, { shrink: true, id: labelId, children: props.label }),
+        /* @__PURE__ */ jsx4(
+          Select,
+          {
+            MenuProps: mergedMenuProps,
+            className: "mui-ls-select",
+            variant: "outlined",
+            labelId,
+            label: props.label,
+            displayEmpty,
+            renderValue,
+            ...rest,
+            value,
+            children: props.children
+          }
+        )
+      ]
+    }
+  );
+};
+LSSelect.displayName = "LSSelect";
+
+// src/components/LSCheckbox/LSCheckbox.tsx
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { forwardRef as forwardRef2 } from "react";
+import { useController, useFormContext } from "react-hook-form";
+import classNames4 from "classnames";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+var LSCheckbox = forwardRef2(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
+  const CheckboxComponent = Checkbox;
+  return /* @__PURE__ */ jsx5(
+    CheckboxComponent,
+    {
+      ...props,
+      checked,
+      className: classNames4("ls-checkbox", className, { "Mui-disabled": props.disabled }),
+      ref,
+      slotProps: {
+        ...slotProps ?? {},
+        input: {
+          ...slotProps?.input ?? {},
+          ref: inputRef ?? slotProps?.input?.ref
+        }
+      }
+    }
+  );
+});
+LSCheckbox.displayName = "LSCheckbox";
+function LSCheckboxField({
+  name,
+  label,
+  control,
+  className = "",
+  disabled,
+  labelPlacement = "end",
+  checkboxProps
+}) {
+  const formContext = useFormContext();
+  const resolvedControl = control ?? formContext?.control;
+  if (!resolvedControl) return /* @__PURE__ */ jsx5(Fragment, {});
+  return /* @__PURE__ */ jsx5(
+    LSCheckboxFieldInner,
+    {
+      name,
+      label,
+      control: resolvedControl,
+      className,
+      disabled,
+      labelPlacement,
+      checkboxProps
+    }
+  );
+}
+function LSCheckboxFieldInner({
+  name,
+  label,
+  control,
+  className = "",
+  disabled,
+  labelPlacement = "end",
+  checkboxProps
+}) {
+  const { field } = useController({ name, control });
+  return /* @__PURE__ */ jsx5(
+    FormControlLabel,
+    {
+      className: classNames4("ls-checkbox-row", className),
+      labelPlacement,
+      disabled,
+      control: /* @__PURE__ */ jsx5(
+        LSCheckbox,
+        {
+          ...checkboxProps,
+          name: field.name,
+          checked: Boolean(field.value),
+          onBlur: field.onBlur,
+          onChange: (_event, checked) => field.onChange(checked),
+          inputRef: field.ref,
+          disabled: disabled ?? checkboxProps?.disabled
+        }
+      ),
+      label
+    }
+  );
+}
+
+// src/components/LSColorPicker/LSColorPicker.tsx
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import GradientColorPicker from "react-best-gradient-color-picker";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_COLOR = "#ff4076";
+var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name, label, helperText, placeholder, hideGradientControls = false, usePopup = false, disabled = false }) => {
+  const isPopupMode = usePopup === true;
+  const [open, setOpen] = useState2(false);
+  const containerRef = useRef(null);
+  const [pickerWidth, setPickerWidth] = useState2(320);
+  const showPicker = open;
+  const pickerHeight = 220;
+  const inlinePickerHeight = hideGradientControls ? pickerHeight + 84 : pickerHeight + 150;
+  const pickerContainerStyle = isPopupMode ? {
+    position: "absolute",
+    right: 0,
+    top: "calc(100% + 0.5rem)",
+    zIndex: 1e3,
+    borderRadius: "1rem",
+    background: "var(--neutralDark1)",
+    padding: "0.5rem",
+    boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)"
+  } : {
+    position: "static",
+    display: "block",
+    width: "100%",
+    height: inlinePickerHeight,
+    minHeight: inlinePickerHeight,
+    marginTop: "0.5rem",
+    borderRadius: "1rem",
+    background: "var(--neutralDark1)",
+    padding: "0.5rem",
+    boxSizing: "border-box",
+    overflow: "visible"
+  };
+  useEffect2(() => {
+    const node = containerRef.current;
+    if (!node) return void 0;
+    const updateWidth = () => {
+      const nextWidth = Math.max(node.clientWidth - 16, 220);
+      setPickerWidth(nextWidth);
+    };
+    updateWidth();
+    const observer = new ResizeObserver(() => {
+      updateWidth();
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  useEffect2(() => {
+    if (!open) return void 0;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  const handleInputChange = (e) => {
+    onChange(e.target.value);
+  };
+  const toggleOpen = () => {
+    if (disabled) return;
+    setOpen((nextOpen) => !nextOpen);
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: containerRef,
+      className: ["ls-color-picker", className].filter(Boolean).join(" "),
+      style: {
+        position: "relative",
+        display: "flex",
+        width: "100%",
+        flexDirection: "column",
+        overflow: "visible"
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          LSInput,
+          {
+            className: "ls-color-picker__input",
+            name,
+            label,
+            helperText,
+            value,
+            onChange: handleInputChange,
+            onBlur,
+            placeholder,
+            disabled,
+            endAdornment: /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "ls-color-picker__preview",
+                style: { background: value },
+                onClick: toggleOpen,
+                "aria-label": isPopupMode ? "Open color picker" : "Color preview",
+                disabled
+              }
+            )
+          }
+        ),
+        showPicker && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: isPopupMode ? "ls-color-picker__picker ls-color-picker__picker--popup" : "ls-color-picker__picker ls-color-picker__picker--inline",
+            style: pickerContainerStyle,
+            children: /* @__PURE__ */ jsx6(
+              GradientColorPicker,
+              {
+                hidePresets: true,
+                hideColorGuide: true,
+                hideAdvancedSliders: true,
+                hideInputs: true,
+                hideInputType: true,
+                hideEyeDrop: false,
+                hideGradientControls,
+                hideColorTypeBtns: hideGradientControls,
+                width: pickerWidth,
+                height: pickerHeight,
+                className: "ls-color-picker__gradient",
+                value,
+                onChange,
+                style: {
+                  body: { background: "transparent", color: "var(--neutralLight1, #fff)" },
+                  rbgcpControlBtn: {
+                    background: "var(--neutralDark4)",
+                    color: "var(--neutralLight1, #fff)",
+                    boxShadow: "none"
+                  },
+                  rbgcpControlBtnSelected: {
+                    background: "var(--primary)",
+                    color: "var(--neutralLight1)",
+                    boxShadow: "0 6px 14px rgba(255, 64, 118, 0.28)"
+                  },
+                  rbgcpControlBtnWrapper: {
+                    background: "var(--neutralDark4)",
+                    color: "var(--neutralLight1, #fff)"
+                  },
+                  rbgcpControlIconBtn: {
+                    background: "transparent",
+                    color: "var(--neutralLight1, #fff)"
+                  }
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/LSDatePicker/LSDatePicker.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var toDateTimeLocalValue = (value) => {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const offsetMs = date.getTimezoneOffset() * 60 * 1e3;
+  return new Date(date.getTime() - offsetMs).toISOString().slice(0, 16);
+};
+var fromDateTimeLocalValue = (value) => {
+  if (!value) return "";
+  return new Date(value).toISOString();
+};
+var LSDatePicker = forwardRef3(
+  ({ value, onChange, onChangeStart, onChangeEnd, className, ...rest }, ref) => {
+    const handleChange = (event) => {
+      const nextValue = fromDateTimeLocalValue(event.target.value);
+      onChangeStart?.(event, nextValue);
+      onChange?.(event, nextValue);
+      onChangeEnd?.(event, nextValue);
+    };
+    return /* @__PURE__ */ jsx7(
+      LSInput,
+      {
+        ...rest,
+        ref,
+        className: ["mui-ls-date-picker", className].filter(Boolean).join(" "),
+        type: "datetime-local",
+        value: toDateTimeLocalValue(value),
+        onChange: handleChange
+      }
+    );
+  }
+);
+LSDatePicker.displayName = "LSDatePicker";
+
+// src/components/LSFontPicker/LSFontPicker.tsx
+import { KeyboardArrowDown } from "@mui/icons-material";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField2 from "@mui/material/TextField";
+import {
+  memo,
+  startTransition,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var LSFontPicker = memo(function LSFontPicker2({
+  value,
+  onChange,
+  fonts = [],
+  localFonts = [],
+  onLoadFonts,
+  defaultValue = "Roboto",
+  placeholder = "Select a font",
+  isAlertManager = false,
+  label,
+  helperText
+}) {
+  const AutocompleteComponent = Autocomplete;
+  const TextFieldComponent = TextField2;
+  const [inputValue, setInputValue] = useState3(value ?? defaultValue);
+  const onLoadFontsRef = useRef2(onLoadFonts);
+  const onChangeRef = useRef2(onChange);
+  const combinedFonts = useMemo2(
+    () => Array.from(/* @__PURE__ */ new Set([...localFonts, ...fonts])).sort(),
+    [fonts, localFonts]
+  );
+  const currentValue = value ?? defaultValue;
+  useEffect3(() => {
+    onLoadFontsRef.current = onLoadFonts;
+    onChangeRef.current = onChange;
+  }, [onLoadFonts, onChange]);
+  useEffect3(() => {
+    setInputValue(currentValue);
+  }, [currentValue]);
+  useEffect3(() => {
+    if (!currentValue || isAlertManager) return;
+    startTransition(() => {
+      onLoadFontsRef.current?.([currentValue]);
+    });
+  }, [currentValue, isAlertManager]);
+  const handleValueChange = (nextValue) => {
+    setInputValue(nextValue);
+    onChangeRef.current(nextValue);
+    if (!nextValue || isAlertManager) return;
+    startTransition(() => {
+      onLoadFontsRef.current?.([nextValue]);
+    });
+  };
+  return /* @__PURE__ */ jsx8("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx8(
+    AutocompleteComponent,
+    {
+      freeSolo: true,
+      disableClearable: true,
+      openOnFocus: true,
+      forcePopupIcon: true,
+      options: combinedFonts,
+      value: currentValue,
+      inputValue,
+      popupIcon: /* @__PURE__ */ jsx8(KeyboardArrowDown, {}),
+      isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
+      onChange: (_event, newValue) => {
+        handleValueChange(
+          typeof newValue === "string" ? newValue : `${newValue ?? ""}`
+        );
+      },
+      onInputChange: (_event, newInputValue, reason) => {
+        if (reason === "input" || reason === "clear") {
+          handleValueChange(newInputValue);
+        }
+      },
+      slotProps: {
+        popper: {
+          sx: { zIndex: 1400 }
+        },
+        paper: {
+          sx: {
+            background: "var(--neutralDark3)",
+            border: "1px solid var(--neutralDark4)",
+            borderRadius: "var(--radius, 1rem)",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+            color: "var(--neutralLight1)",
+            marginTop: "4px"
+          }
+        },
+        popupIndicator: {
+          sx: {
+            color: "var(--neutralLight2)",
+            "&.MuiAutocomplete-popupIndicatorOpen": {
+              transform: "rotate(180deg)"
+            }
+          }
+        }
+      },
+      ListboxProps: {
+        sx: {
+          maxHeight: 300,
+          padding: 0
+        }
+      },
+      noOptionsText: "No fonts found",
+      renderOption: (props, option) => {
+        const { key, ...optionProps } = props;
+        return /* @__PURE__ */ jsx8(
+          "li",
+          {
+            ...optionProps,
+            style: {
+              ...optionProps.style ?? {},
+              fontFamily: `${option}, Arial, sans-serif`,
+              color: "var(--neutralLight1)",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+              padding: "0.75rem 1.25rem",
+              transition: "background-color 0.1s ease"
+            },
+            children: option
+          },
+          key
+        );
+      },
+      renderInput: (params) => /* @__PURE__ */ jsx8(
+        TextFieldComponent,
+        {
+          ...params,
+          label,
+          helperText,
+          placeholder,
+          fullWidth: true,
+          className: "mui-ls-input",
+          variant: "outlined",
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              paddingRight: "0.5rem"
+            }
+          },
+          InputLabelProps: {
+            shrink: true,
+            ...params.InputLabelProps ?? {}
+          }
+        }
+      )
+    }
+  ) });
+});
+
+// src/components/LSMultiSelect/LSMultiSelect.tsx
+import { MenuItem } from "@mui/material";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var LSMultiSelect = ({
+  options,
+  placeholder = "Select...",
+  value,
+  onChange,
+  label
+}) => {
+  const handleChange = (event) => {
+    const {
+      target: { value: value2 }
+    } = event;
+    onChange(typeof value2 === "string" ? value2.split(",") : value2);
+  };
+  return /* @__PURE__ */ jsx9(
+    LSSelect,
+    {
+      multiple: true,
+      label,
+      fullWidth: true,
+      className: "mui-multi-select",
+      value: value ?? [],
+      onChange: handleChange,
+      displayEmpty: true,
+      renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "ls-multi-select-value", children: [
+        /* @__PURE__ */ jsx9("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map(
+          (val) => options.find((opt) => opt.value === val)?.label ?? val
+        ).join(", ") : placeholder }),
+        /* @__PURE__ */ jsx9("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
+      ] }),
+      MenuProps: {
+        slotProps: {
+          paper: {
+            sx: {
+              background: "var(--neutralDark2) !important",
+              backgroundColor: "var(--neutralDark2)",
+              color: "var(--neutralLight1)",
+              border: "1px solid var(--neutralDark4)",
+              borderRadius: "var(--radius, 1rem)",
+              boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+              backdropFilter: "none",
+              opacity: 1,
+              maxHeight: "280px !important"
+            }
+          },
+          list: {
+            sx: {
+              backgroundColor: "var(--neutralDark2)",
+              color: "var(--neutralLight1)"
+            }
+          }
+        },
+        PaperProps: {
+          sx: {
+            background: "var(--neutralDark2) !important",
+            backgroundColor: "var(--neutralDark2)",
+            color: "var(--neutralLight1)",
+            backdropFilter: "none",
+            opacity: 1,
+            maxHeight: "280px !important",
+            border: "1px solid var(--neutralDark4)",
+            borderRadius: "var(--radius, 1rem)",
+            "& .MuiList-root": {
+              backgroundColor: "var(--neutralDark2)"
+            }
+          }
+        }
+      },
+      children: options.map((option) => /* @__PURE__ */ jsxs4(
+        MenuItem,
+        {
+          value: option.value,
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "0.4rem",
+            color: "var(--neutralLight1)",
+            "&.Mui-selected, &.Mui-selected:hover": {
+              background: "rgba(255, 64, 118, 0.12)"
+            },
+            "&:hover": {
+              background: "rgba(255, 255, 255, 0.06)"
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx9(
+              LSCheckbox,
+              {
+                checked: (value ?? []).includes(option.value),
+                tabIndex: -1,
+                disableRipple: true
+              }
+            ),
+            /* @__PURE__ */ jsx9("span", { children: option.label })
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+};
+
+// src/components/LSRadio/LSRadio.tsx
+import FormControlLabel2 from "@mui/material/FormControlLabel";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import classNames5 from "classnames";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var LSRadio = ({ className = "", ...props }) => {
+  return /* @__PURE__ */ jsx10(Radio, { ...props, className: classNames5("ls-radio", className) });
+};
+var LSRadioGroup = ({ selections, className = "", optionClassName = "", row, ...props }) => {
+  return /* @__PURE__ */ jsx10(RadioGroup, { ...props, row, className: classNames5("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx10(
+    FormControlLabel2,
+    {
+      className: classNames5("ls-radio-row", optionClassName),
+      value: selection.value,
+      disabled: selection.disabled,
+      control: /* @__PURE__ */ jsx10(LSRadio, {}),
+      label: selection.label
+    },
+    selection.value
+  )) });
+};
+LSRadioGroup.displayName = "LSRadioGroup";
+
+// src/components/LSTextField/LSTextField.tsx
+import TextField3 from "@mui/material/TextField";
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var LSTextField = forwardRef4(
+  (props, ref) => {
+    const { InputLabelProps, InputProps, slotProps, ...rest } = props;
+    return /* @__PURE__ */ jsx11(
+      TextField3,
+      {
+        ...rest,
+        variant: "outlined",
+        className: "mui-ls-input",
+        slotProps: {
+          ...slotProps ?? {},
+          input: {
+            ...slotProps?.input ?? {},
+            ...InputProps ?? {},
+            sx: {
+              ...slotProps?.input?.sx ?? {},
+              ...InputProps?.sx ?? {}
+            }
+          },
+          inputLabel: {
+            ...slotProps?.inputLabel ?? {},
+            shrink: true,
+            ...InputLabelProps ?? {}
+          }
+        },
+        ref
+      }
+    );
+  }
+);
+LSTextField.displayName = "LSTextField";
+
+// src/components/LSVariableInputField/LSVariableInputField.tsx
+import Autocomplete2, {
+  createFilterOptions
+} from "@mui/material/Autocomplete";
+import InputAdornment2 from "@mui/material/InputAdornment";
+import Popover from "@mui/material/Popover";
+import Search from "@mui/icons-material/Search";
+import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
+import Tooltip from "@mui/material/Tooltip";
+import {
+  Fragment as Fragment2,
+  createContext,
+  forwardRef as forwardRef5,
+  useCallback as useCallback2,
+  useContext,
+  useEffect as useEffect4,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState4
+} from "react";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { createElement } from "react";
+var LSVariableInputContext = createContext({});
+var LSVariableInputProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsx12(LSVariableInputContext.Provider, { value, children });
+};
+var DEFAULT_FUNCTION_VARIABLES = [
+  "sum_variables",
+  "offset_count",
+  "read_file",
+  "read_url",
+  "selection",
+  "random",
+  "random_input",
+  "get_commands",
+  "get_all_commands",
+  "convert_color_to_hex",
+  "get_latest_file_from_folder",
+  "get_random_file_from_folder",
+  "screenshot",
+  "overlay_screenshot",
+  "obs_screenshot",
+  "obs_vertical_replay",
+  "obs_replay",
+  "get_queue_count",
+  "lumia_uptime",
+  "twitch_uptime",
+  "youtube_uptime",
+  "facebook_uptime",
+  "twitch_followage",
+  "twitch_next_ad",
+  "twitch_get_avatar",
+  "get_var_from_msg",
+  "get_user_loyalty_points",
+  "translate",
+  "ai_prompt",
+  "viewer_profile_summary"
+];
+var MAX_OBJECT_DEPTH = 5;
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isExpandableValue = (value) => {
+  if (isPlainObject(value)) return Object.keys(value).length > 0;
+  if (Array.isArray(value)) return value.length > 0;
+  return false;
+};
+var isPrimitiveValue = (value) => value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+var renderPrimitiveValue = (value) => {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "boolean") return value.toString();
+  if (typeof value === "number") return value.toString();
+  if (typeof value === "string") return value;
+  return String(value);
+};
+var renderComplexPreview = (value) => {
+  if (Array.isArray(value)) {
+    return `Array(${value.length}) [${value.slice(0, 3).map(
+      (item) => typeof item === "string" ? `"${item}"` : typeof item === "object" ? "{...}" : String(item)
+    ).join(", ")}${value.length > 3 ? "..." : ""}]`;
+  }
+  const keys = Object.keys(value);
+  return `Object {${keys.slice(0, 2).join(", ")}${keys.length > 2 ? "..." : ""}}`;
+};
+var getVariableValueDisplay = (value) => {
+  const isComplexValue = !isPrimitiveValue(value) && value !== null && typeof value === "object";
+  const displayValue = isComplexValue ? renderComplexPreview(value) : renderPrimitiveValue(value);
+  const fullValue = isComplexValue ? JSON.stringify(value, null, 2) : renderPrimitiveValue(value);
+  return { displayValue, fullValue, isComplexValue };
+};
+var buildValueChildren = (value, parentPath, depth) => {
+  if (depth >= MAX_OBJECT_DEPTH) return [];
+  if (isPlainObject(value)) {
+    return Object.keys(value).map((key) => {
+      const childValue = value[key];
+      const relativePath = parentPath ? `${parentPath}.${key}` : key;
+      const expandable = depth + 1 < MAX_OBJECT_DEPTH && isExpandableValue(childValue);
+      return {
+        relativePath,
+        key,
+        displayKey: key,
+        depth: depth + 1,
+        value: childValue,
+        isExpandable: expandable,
+        children: expandable ? buildValueChildren(childValue, relativePath, depth + 1) : []
+      };
+    });
+  }
+  if (Array.isArray(value)) {
+    return value.map((item, idx) => {
+      const relativePath = parentPath ? `${parentPath}.${idx}` : String(idx);
+      const expandable = depth + 1 < MAX_OBJECT_DEPTH && isExpandableValue(item);
+      return {
+        relativePath,
+        key: String(idx),
+        displayKey: `[${idx}]`,
+        depth: depth + 1,
+        value: item,
+        isExpandable: expandable,
+        children: expandable ? buildValueChildren(item, relativePath, depth + 1) : []
+      };
+    });
+  }
+  return [];
+};
+var isVariableRecord = (value) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const v = value;
+  return typeof v.name === "string" && ("system" in v || "origin" in v || "value" in v);
+};
+var synthesizeRecord = (name, value) => ({
+  name,
+  system: false,
+  origin: "",
+  description: "",
+  value: value ?? ""
+});
+var normalizeVariableRecords = (systemVariables) => {
+  const out = {};
+  if (!systemVariables) return out;
+  for (const [key, raw] of Object.entries(systemVariables)) {
+    if (raw === void 0 || raw === null) continue;
+    out[key] = isVariableRecord(raw) ? raw : synthesizeRecord(key, raw);
+  }
+  return out;
+};
+var defaultTranslate = (key, fallback, options) => {
+  if (fallback && fallback !== "-") return fallback;
+  if (key === "overlay-variables.variables-description")
+    return "Use variables that will automatically be replaced before sending out the text";
+  if (key === "overlay-variables.variable" || key === "commands.variable")
+    return "Variable";
+  if (key === "overlay-variables.description" || key === "commands.description")
+    return "Description";
+  if (key === "commands.suggested-variables") return "Suggested Variables";
+  if (key === "common.value") return "Value";
+  if (key === "common.search" || key === "assets.search") return "Search";
+  if (key === "variables.functionvariables") return "Function variables";
+  if (key === "chatbot.allowed-variables") return "Allowed Variables";
+  if (key.startsWith("variables.")) {
+    const variableName = key.replace("variables.", "");
+    const example = options?.example;
+    return example === void 0 || example === null ? variableName : String(example);
+  }
+  return fallback ?? key;
+};
+var normalizeAllowedDefinitions = (allowedVariables) => {
+  if (!Array.isArray(allowedVariables)) return [];
+  const unique = /* @__PURE__ */ new Set();
+  const definitions = [];
+  allowedVariables.forEach((variable) => {
+    let variableName = "";
+    let description;
+    let origin;
+    let example;
+    if (typeof variable === "string") {
+      variableName = variable.trim();
+    } else if (variable && typeof variable === "object") {
+      const typedVariable = variable;
+      const candidateName = [
+        typedVariable.name,
+        typedVariable.key,
+        typedVariable.variable
+      ].find((value) => typeof value === "string");
+      variableName = typeof candidateName === "string" ? candidateName.trim() : "";
+      description = typeof typedVariable.description === "string" ? typedVariable.description.trim() : void 0;
+      origin = typeof typedVariable.origin === "string" ? typedVariable.origin.trim().toLowerCase() : void 0;
+      example = typedVariable.example;
+    }
+    if (!variableName || unique.has(variableName)) return;
+    unique.add(variableName);
+    definitions.push({ name: variableName, description, origin, example });
+  });
+  return definitions;
+};
+var filter = createFilterOptions({
+  stringify: (option) => {
+    if (typeof option === "string") return option;
+    if (typeof option === "number" || typeof option === "boolean" || typeof option === "bigint")
+      return String(option);
+    if (!option || typeof option !== "object") return "";
+    const typed = option;
+    return [typed.label, typed.value, typed.helperText, typed.searchText].filter(
+      (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean"
+    ).map((value) => String(value)).join(" ");
+  }
+});
+var visualTypeFromRecord = (variable) => {
+  if (variable?.isFunction) return "func";
+  if (variable?.system || variable?.locked) return "system";
+  return "custom";
+};
+var visualTypeRank = (variableType) => {
+  if (variableType === "custom") return 0;
+  if (variableType === "func") return 1;
+  return 2;
+};
+var orderItemsByVariableType = (items, getType) => {
+  const grouped = {
+    custom: [],
+    func: [],
+    system: []
+  };
+  items.forEach((item) => grouped[getType(item)].push(item));
+  return [...grouped.custom, ...grouped.func, ...grouped.system];
+};
+var sortItemsByVariableTypeThenName = (items, getType, getName) => {
+  return [...items].sort((a, b) => {
+    const typeDiff = visualTypeRank(getType(a)) - visualTypeRank(getType(b));
+    if (typeDiff !== 0) return typeDiff;
+    return getName(a).localeCompare(getName(b));
+  });
+};
+var humanizeVariableName = (rawName) => {
+  if (!rawName) return "";
+  return rawName.replace(/^_+|_+$/g, "").replace(/_/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
+};
+var getVariableColorClass = (variableType, isSuggested) => {
+  if (isSuggested && variableType !== "func")
+    return "ls-variable-token--custom";
+  if (variableType === "func") return "ls-variable-token--function";
+  if (variableType === "system") return "ls-variable-token--system";
+  return "ls-variable-token--custom";
+};
+var CHILD_VARIABLE_COLOR_CLASS = "ls-variable-token--child";
+var LSVariableInputField = forwardRef5((props, ref) => {
+  const context = useContext(LSVariableInputContext);
+  const {
+    name,
+    label,
+    type,
+    isAutoComplete,
+    autoCompleteOptions,
+    autoCompleteGroupBy,
+    renderOption,
+    hideVariables,
+    allowedVariables,
+    disabled,
+    autoFocus,
+    inputProps = {},
+    multiline,
+    rows,
+    maxRows,
+    value,
+    placeholder,
+    variant,
+    ListboxComponent,
+    onScrollListBox,
+    onHighlightChange,
+    onPopupClose,
+    onPopupOpen,
+    afterFilter,
+    onChange,
+    loading,
+    getOptionLabel,
+    isOptionEqualToValue,
+    $disableInputChange,
+    $getFullValueObject,
+    $multiple,
+    $disableCloseOnSelect,
+    $freeSolo,
+    $renderOption,
+    allowedVariableOrigin,
+    systemVariables: systemVariablesProp,
+    functionVariables: functionVariablesProp,
+    translate,
+    onVariableTranslationsNeeded,
+    isOriginConnected: isOriginConnectedProp,
+    translationKeyExists: translationKeyExistsProp
+  } = props;
+  const t = translate ?? context.translate ?? defaultTranslate;
+  const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
+  const variableRecords = useMemo3(
+    () => normalizeVariableRecords(rawSystemVariables),
+    [rawSystemVariables]
+  );
+  const functionVariables = useMemo3(
+    () => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES,
+    [context.functionVariables, functionVariablesProp]
+  );
+  const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
+  const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
+  const translationKeyExists = translationKeyExistsProp ?? context.translationKeyExists;
+  const containerRef = useRef3(null);
+  const variableId = useRef3(`variable-input-${name ?? "field"}`);
+  const [showVariables, setShowVariables] = useState4(false);
+  const [searchQuery, setSearchQuery] = useState4("");
+  const functionVariableSet = useMemo3(
+    () => new Set(functionVariables),
+    [functionVariables]
+  );
+  const allowedVariableDefinitions = useMemo3(
+    () => normalizeAllowedDefinitions(allowedVariables),
+    [allowedVariables]
+  );
+  const allowedVariableDefinitionLookup = useMemo3(() => {
+    const lookup = /* @__PURE__ */ new Map();
+    allowedVariableDefinitions.forEach(
+      (definition) => lookup.set(definition.name, definition)
+    );
+    return lookup;
+  }, [allowedVariableDefinitions]);
+  const allowedVariableNames = useMemo3(
+    () => allowedVariableDefinitions.map((definition) => definition.name),
+    [allowedVariableDefinitions]
+  );
+  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableDefinitions);
+  const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
+  const [expandedPaths, setExpandedPaths] = useState4(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [autoExpandPaths, setAutoExpandPaths] = useState4(
+    () => /* @__PURE__ */ new Set()
+  );
+  const systemVariableValueTrees = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    Object.values(variableRecords).forEach((variable) => {
+      if (variable && isExpandableValue(variable.value)) {
+        map.set(variable.name, buildValueChildren(variable.value, "", 0));
+      }
+    });
+    return map;
+  }, [variableRecords]);
+  const allowedExampleTrees = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    allowedVariableDefinitions.forEach((definition) => {
+      if (isExpandableValue(definition.example)) {
+        map.set(definition.name, buildValueChildren(definition.example, "", 0));
+      }
+    });
+    return map;
+  }, [allowedVariableDefinitions]);
+  useEffect4(() => {
+    requestTranslations?.();
+  }, [requestTranslations]);
+  const isPathExpanded = useCallback2(
+    (path) => expandedPaths.has(path) || autoExpandPaths.has(path),
+    [autoExpandPaths, expandedPaths]
+  );
+  const toggleExpand = useCallback2(
+    (path) => {
+      const expanded = expandedPaths.has(path) || autoExpandPaths.has(path);
+      if (expanded) {
+        if (expandedPaths.has(path)) {
+          setExpandedPaths((prev) => {
+            const next = new Set(prev);
+            next.delete(path);
+            return next;
+          });
+        }
+        if (autoExpandPaths.has(path)) {
+          setAutoExpandPaths((prev) => {
+            const next = new Set(prev);
+            next.delete(path);
+            return next;
+          });
+        }
+      } else {
+        setExpandedPaths((prev) => {
+          const next = new Set(prev);
+          next.add(path);
+          return next;
+        });
+      }
+    },
+    [autoExpandPaths, expandedPaths]
+  );
+  const namespaceHas = useCallback2(
+    (key, namespace) => {
+      if (!translationKeyExists) return false;
+      try {
+        return translationKeyExists(key, namespace);
+      } catch {
+        return false;
+      }
+    },
+    [translationKeyExists]
+  );
+  const resolveTranslationFromNamespace = useCallback2(
+    (variableName, namespace) => {
+      const normalizedNamespace = typeof namespace === "string" ? namespace.trim().toLowerCase() : "";
+      if (!normalizedNamespace) return null;
+      const normalizedName = variableName.trim().toLowerCase();
+      if (!normalizedName) return null;
+      const unprefixedName = normalizedName.startsWith(
+        `${normalizedNamespace}_`
+      ) ? normalizedName.slice(normalizedNamespace.length + 1) : normalizedName;
+      const prefixedName = normalizedName.startsWith(`${normalizedNamespace}_`) ? normalizedName : `${normalizedNamespace}_${normalizedName}`;
+      const candidateKeys = [prefixedName, unprefixedName];
+      for (const key of candidateKeys) {
+        if (namespaceHas(key, normalizedNamespace))
+          return t(key, void 0, { ns: normalizedNamespace });
+        if (namespaceHas(`variables.${key}`, normalizedNamespace))
+          return t(`variables.${key}`, void 0, { ns: normalizedNamespace });
+      }
+      return null;
+    },
+    [namespaceHas, t]
+  );
+  const knownOrigins = useMemo3(() => {
+    return Array.from(
+      new Set(
+        Object.values(variableRecords).map(
+          (variable) => typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : ""
+        ).filter((origin) => origin.length > 0)
+      )
+    );
+  }, [variableRecords]);
+  const resolveAllowedVariableOrigin = useCallback2(
+    (variableName) => {
+      const originFromProp = typeof allowedVariableOrigin === "string" ? allowedVariableOrigin.trim().toLowerCase() : "";
+      if (originFromProp) return originFromProp;
+      const fromDefinition = allowedVariableDefinitionLookup.get(variableName)?.origin;
+      if (fromDefinition) return fromDefinition;
+      const normalizedName = variableName.trim().toLowerCase();
+      if (!normalizedName) return void 0;
+      const prefixCandidate = normalizedName.split("_")[0];
+      if (prefixCandidate) {
+        const hasScopedTranslation = namespaceHas(normalizedName, prefixCandidate) || namespaceHas(`variables.${normalizedName}`, prefixCandidate) || namespaceHas(
+          normalizedName.slice(prefixCandidate.length + 1),
+          prefixCandidate
+        ) || namespaceHas(
+          `variables.${normalizedName.slice(prefixCandidate.length + 1)}`,
+          prefixCandidate
+        );
+        if (hasScopedTranslation) return prefixCandidate;
+      }
+      const prefixedMatch = knownOrigins.find(
+        (origin) => normalizedName.startsWith(`${origin}_`)
+      );
+      if (prefixedMatch) return prefixedMatch;
+      const matchingOrigins = knownOrigins.filter(
+        (origin) => namespaceHas(normalizedName, origin) || namespaceHas(`variables.${normalizedName}`, origin) || namespaceHas(`${origin}_${normalizedName}`, origin)
+      );
+      if (matchingOrigins.length === 1) return matchingOrigins[0];
+      const inferredOrigins = Array.from(
+        new Set(
+          Object.values(variableRecords).filter((variable) => {
+            const variableNameLower = typeof variable?.name === "string" ? variable.name.trim().toLowerCase() : "";
+            const variableOrigin = typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : "";
+            if (!variableNameLower || !variableOrigin) return false;
+            return variableNameLower === normalizedName || variableNameLower === `${variableOrigin}_${normalizedName}`;
+          }).map((variable) => String(variable.origin).trim().toLowerCase()).filter((origin) => origin.length > 0)
+        )
+      );
+      return inferredOrigins.length === 1 ? inferredOrigins[0] : void 0;
+    },
+    [
+      allowedVariableDefinitionLookup,
+      allowedVariableOrigin,
+      knownOrigins,
+      namespaceHas,
+      variableRecords
+    ]
+  );
+  const resolveVariableDescription = useCallback2(
+    (variableName, fallbackDescription, origin) => {
+      const fromOrigin = resolveTranslationFromNamespace(variableName, origin);
+      if (fromOrigin && fromOrigin.trim().length > 0) return fromOrigin;
+      const defaultTranslationKey = `variables.${variableName}`;
+      const defaultTranslated = t(defaultTranslationKey);
+      if (typeof defaultTranslated === "string" && defaultTranslated !== defaultTranslationKey)
+        return defaultTranslated;
+      if (fallbackDescription && fallbackDescription.trim().length > 0)
+        return fallbackDescription;
+      return humanizeVariableName(variableName);
+    },
+    [resolveTranslationFromNamespace, t]
+  );
+  const getSystemVariableDescription = useCallback2(
+    (variable) => {
+      if (variable?.system && !variable?.pluginId) {
+        return t(`variables.${variable.description}`, void 0, {
+          example: variable.example,
+          interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" }
+        });
+      }
+      return resolveVariableDescription(
+        variable?.name ?? "",
+        variable?.description,
+        variable?.origin
+      );
+    },
+    [resolveVariableDescription, t]
+  );
+  const getAllowedVariableRecord = useCallback2(
+    (variableName) => {
+      const direct = variableRecords[variableName];
+      if (direct) return direct;
+      const normalizedOrigin = resolveAllowedVariableOrigin(variableName);
+      if (!normalizedOrigin) return void 0;
+      const prefixedName = variableName.startsWith(`${normalizedOrigin}_`) ? variableName : `${normalizedOrigin}_${variableName}`;
+      return variableRecords[prefixedName];
+    },
+    [resolveAllowedVariableOrigin, variableRecords]
+  );
+  const getAllowedVariableDescription = useCallback2(
+    (variableName) => {
+      const variable = variableRecords[variableName];
+      if (variable) return getSystemVariableDescription(variable);
+      const fromDefinition = allowedVariableDefinitionLookup.get(variableName);
+      const origin = resolveAllowedVariableOrigin(variableName);
+      return resolveVariableDescription(
+        variableName,
+        fromDefinition?.description,
+        origin
+      );
+    },
+    [
+      allowedVariableDefinitionLookup,
+      getSystemVariableDescription,
+      resolveAllowedVariableOrigin,
+      resolveVariableDescription,
+      variableRecords
+    ]
+  );
+  const getAllowedVariableValue = useCallback2(
+    (variableName) => {
+      if (!variableName) return void 0;
+      const direct = variableRecords[variableName]?.value;
+      if (direct !== void 0) return direct;
+      const normalizedOrigin = resolveAllowedVariableOrigin(variableName);
+      if (!normalizedOrigin) return void 0;
+      const prefixedName = variableName.startsWith(`${normalizedOrigin}_`) ? variableName : `${normalizedOrigin}_${variableName}`;
+      return variableRecords[prefixedName]?.value;
+    },
+    [resolveAllowedVariableOrigin, variableRecords]
+  );
+  const getAllowedVariableVisualType = useCallback2(
+    (variableName) => {
+      const record = getAllowedVariableRecord(variableName);
+      if (record) return visualTypeFromRecord(record);
+      if (functionVariableSet.has(variableName)) return "func";
+      return "custom";
+    },
+    [functionVariableSet, getAllowedVariableRecord]
+  );
+  const getAllowedVariableTree = useCallback2(
+    (definition) => {
+      const record = getAllowedVariableRecord(definition.name);
+      const liveTree = record ? systemVariableValueTrees.get(record.name) : void 0;
+      if (liveTree && liveTree.length > 0) return liveTree;
+      return allowedExampleTrees.get(definition.name);
+    },
+    [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
+  );
+  useEffect4(() => {
+    const query = (searchQuery ?? "").toLowerCase().replace("{{", "").replace("}}", "").trim();
+    const nextAutoExpand = /* @__PURE__ */ new Set();
+    const collectNestedAutoExpand = (rootToken, tree) => {
+      if (!query || !tree || tree.length === 0) return false;
+      let hit = false;
+      const walk = (nodes) => {
+        nodes.forEach((node) => {
+          if (node.relativePath.toLowerCase().includes(query) || node.key.toLowerCase().includes(query)) {
+            hit = true;
+            const segments = node.relativePath.split(".");
+            for (let i = 0; i < segments.length; i++) {
+              const rel = segments.slice(0, i).join(".");
+              nextAutoExpand.add(rel ? `${rootToken}.${rel}` : rootToken);
+            }
+          }
+          if (node.children.length) walk(node.children);
+        });
+      };
+      walk(tree);
+      return hit;
+    };
+    if (allowedVariableNames.length > 0) {
+      if (!query) {
+        setFilteredAllowedVariables(
+          orderItemsByVariableType(
+            allowedVariableDefinitions,
+            (definition) => getAllowedVariableVisualType(definition.name)
+          )
+        );
+      } else {
+        const nameMatches = [];
+        const descMatches = [];
+        const nestedMatches = [];
+        allowedVariableDefinitions.forEach((definition) => {
+          const nameLower = definition.name?.toLowerCase();
+          const descLower = getAllowedVariableDescription(
+            definition.name
+          )?.toLowerCase();
+          if (nameLower?.includes(query)) {
+            nameMatches.push(definition);
+            return;
+          }
+          if (descLower?.includes(query)) {
+            descMatches.push(definition);
+            return;
+          }
+          const tree = getAllowedVariableTree(definition);
+          if (tree && collectNestedAutoExpand(definition.name, tree)) {
+            nestedMatches.push(definition);
+          }
+        });
+        const sortByDef = (items) => sortItemsByVariableTypeThenName(
+          items,
+          (definition) => getAllowedVariableVisualType(definition.name),
+          (definition) => definition.name
+        );
+        setFilteredAllowedVariables([
+          ...sortByDef(nameMatches),
+          ...sortByDef(descMatches),
+          ...sortByDef(nestedMatches)
+        ]);
+      }
+    } else {
+      setFilteredAllowedVariables([]);
+    }
+    const allowedSet = new Set(allowedVariableNames);
+    const shouldKeep = (variable) => {
+      if (allowedSet.has(variable.name)) return false;
+      if (!variable.origin) return true;
+      if (!isOriginConnected) return true;
+      return isOriginConnected(variable.origin);
+    };
+    const allRecords = Object.values(variableRecords);
+    if (!query) {
+      const visible = allRecords.filter(shouldKeep);
+      setFilteredSystemVariables(
+        orderItemsByVariableType(
+          visible,
+          (variable) => visualTypeFromRecord(variable)
+        )
+      );
+    } else {
+      const nameMatches = [];
+      const descMatches = [];
+      const nestedMatches = [];
+      allRecords.forEach((variable) => {
+        if (!shouldKeep(variable)) return;
+        const description = getSystemVariableDescription(variable);
+        const nameLower = variable.name?.toLowerCase();
+        const descLower = description?.toLowerCase();
+        if (nameLower?.includes(query)) {
+          nameMatches.push(variable);
+          return;
+        }
+        if (descLower?.includes(query)) {
+          descMatches.push(variable);
+          return;
+        }
+        const tree = systemVariableValueTrees.get(variable.name);
+        if (tree && collectNestedAutoExpand(variable.example ?? variable.name, tree)) {
+          nestedMatches.push(variable);
+        }
+      });
+      const sortSys = (items) => sortItemsByVariableTypeThenName(
+        items,
+        (variable) => visualTypeFromRecord(variable),
+        (variable) => variable?.name ?? ""
+      );
+      setFilteredSystemVariables([
+        ...sortSys(nameMatches),
+        ...sortSys(descMatches),
+        ...sortSys(nestedMatches)
+      ]);
+    }
+    setAutoExpandPaths(nextAutoExpand);
+  }, [
+    searchQuery,
+    allowedVariableDefinitions,
+    allowedVariableNames,
+    getAllowedVariableDescription,
+    getAllowedVariableTree,
+    getAllowedVariableVisualType,
+    getSystemVariableDescription,
+    isOriginConnected,
+    systemVariableValueTrees,
+    variableRecords
+  ]);
+  const clickedVariableIcon = () => {
+    if (!hideVariables) setShowVariables((current) => !current);
+  };
+  const appendValue = (newValue) => {
+    const currentValue = Array.isArray(value) ? value.join("") : value;
+    onChange?.(currentValue ? `${currentValue}${newValue}` : newValue);
+  };
+  const insertVariable = (variable) => {
+    appendValue(`{{${variable}}}`);
+    setShowVariables(false);
+  };
+  const handleFilterOptions = (options, params) => {
+    const filtered = filter(options, params);
+    afterFilter?.(filtered);
+    return filtered;
+  };
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
+      children: [
+        /* @__PURE__ */ jsx12("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
+        variableType === "func" && /* @__PURE__ */ jsx12(
+          "span",
+          {
+            className: "ls-variable-token__badge",
+            title: t("variables.functionvariables", "Function variables"),
+            children: "fx"
+          }
+        )
+      ]
+    }
+  );
+  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx12(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleExpand(path);
+      },
+      className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
+      "aria-label": expanded ? "Collapse" : "Expand",
+      "aria-expanded": expanded,
+      children: /* @__PURE__ */ jsx12(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
+    }
+  );
+  const renderExpandSpacer = () => /* @__PURE__ */ jsx12("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
+  const getVariableValuePreview = (variableValue) => {
+    const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
+    return { displayValue, fullValue };
+  };
+  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx12(
+    "input",
+    {
+      className: "ls-variable-picker__value-input",
+      title: fullValue,
+      readOnly: true,
+      value: fullValue || displayValue,
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      onKeyDown: (e) => e.stopPropagation(),
+      "aria-label": t("common.value", "Value")
+    }
+  );
+  const renderValueChildRows = (rootToken, nodes) => nodes.map((node) => {
+    const fullToken = `${rootToken}.${node.relativePath}`;
+    const expanded = node.isExpandable && isPathExpanded(fullToken);
+    const { displayValue, fullValue } = getVariableValuePreview(node.value);
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "ls-variable-picker__row ls-variable-picker__row--child",
+          onClick: () => {
+            if (node.isExpandable && !expanded) toggleExpand(fullToken);
+            else insertVariable(fullToken);
+          },
+          children: [
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: "ls-variable-picker__token-cell",
+                style: { paddingLeft: `${node.depth * 1.25}rem` },
+                children: [
+                  node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
+                  /* @__PURE__ */ jsx12(
+                    "div",
+                    {
+                      className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
+                      children: /* @__PURE__ */ jsx12("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__description", children: node.displayKey }),
+            /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
+          ]
+        }
+      ),
+      expanded && renderValueChildRows(rootToken, node.children)
+    ] }, fullToken);
+  });
+  const toOptionLabelString = (input) => {
+    if (typeof input === "string") return input;
+    if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint")
+      return String(input);
+    if (input === null || input === void 0) return "";
+    if (typeof input === "object") {
+      const labelCandidate = input.label;
+      if (typeof labelCandidate === "string") return labelCandidate;
+      if (typeof labelCandidate === "number" || typeof labelCandidate === "boolean" || typeof labelCandidate === "bigint")
+        return String(labelCandidate);
+      const valueCandidate = input.value;
+      if (typeof valueCandidate === "string") return valueCandidate;
+      if (typeof valueCandidate === "number" || typeof valueCandidate === "boolean" || typeof valueCandidate === "bigint")
+        return String(valueCandidate);
+      try {
+        return JSON.stringify(input);
+      } catch {
+        return "[object Object]";
+      }
+    }
+    return String(input);
+  };
+  const resolveOptionLabel = (option) => {
+    if (typeof getOptionLabel === "function") {
+      try {
+        const customLabel = getOptionLabel(option);
+        return toOptionLabelString(
+          customLabel === void 0 ? option : customLabel
+        );
+      } catch {
+        return toOptionLabelString(option);
+      }
+    }
+    return toOptionLabelString(option);
+  };
+  const defaultRenderOption = (optionProps, option) => {
+    const opt = option;
+    const thumb = opt?.imageUrl ?? opt?.thumb ?? opt?.iconUrl ?? opt?.previewImageUrl;
+    const helperText = typeof opt?.helperText === "string" ? opt.helperText : "";
+    const isSelected = opt?.value === value;
+    return /* @__PURE__ */ createElement(
+      "li",
+      {
+        ...optionProps,
+        key: String(opt?.label ?? opt?.value ?? ""),
+        className: [
+          optionProps.className,
+          "ls-variable-option",
+          isSelected ? "ls-variable-option--selected" : ""
+        ].filter(Boolean).join(" ")
+      },
+      thumb ? /* @__PURE__ */ jsx12(
+        "img",
+        {
+          src: thumb,
+          className: "ls-variable-option__thumb",
+          alt: ""
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs5("div", { className: "ls-variable-option__body", children: [
+        /* @__PURE__ */ jsx12("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
+        helperText ? /* @__PURE__ */ jsx12("div", { className: "ls-variable-option__helper", children: helperText }) : null
+      ] })
+    );
+  };
+  const showSuggestedSection = allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
+  const pickerBody = /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
+      /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__intro-text", children: t(
+        "overlay-variables.variables-description",
+        "Use variables that will automatically be replaced before sending out the text"
+      ) }),
+      /* @__PURE__ */ jsx12(
+        LSInput,
+        {
+          autoFocus: true,
+          startAdornment: /* @__PURE__ */ jsx12(Search, { style: { color: "#fff", width: 20, height: 20 } }),
+          placeholder: t("common.search", "Search"),
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          type: "text"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__header", children: [
+      /* @__PURE__ */ jsx12("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
+      /* @__PURE__ */ jsx12("div", { children: t("commands.description", "Description") }),
+      /* @__PURE__ */ jsx12("div", { children: t("common.value", "Value") })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__list", children: [
+      showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "ls-variable-picker__field", children: [
+        /* @__PURE__ */ jsx12("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
+        filteredAllowedVariables.map((definition, idx) => {
+          const variableType = getAllowedVariableVisualType(
+            definition.name
+          );
+          const tree = getAllowedVariableTree(definition);
+          const { displayValue, fullValue } = getVariableValuePreview(
+            getAllowedVariableValue(definition.name) ?? definition.example
+          );
+          const expandable = !!tree && tree.length > 0;
+          const expanded = expandable && isPathExpanded(definition.name);
+          const isLast = idx === filteredAllowedVariables.length - 1;
+          const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
+          return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: rowCls,
+                onClick: () => {
+                  if (expandable && !expanded)
+                    toggleExpand(definition.name);
+                  else insertVariable(definition.name);
+                },
+                children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
+                    expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
+                    renderVariableToken(definition.name, variableType, true)
+                  ] }),
+                  /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
+                  /* @__PURE__ */ jsx12(
+                    "div",
+                    {
+                      className: "ls-variable-picker__value",
+                      title: fullValue,
+                      children: renderVariableValueInput(displayValue, fullValue)
+                    }
+                  )
+                ]
+              }
+            ),
+            expanded && tree && renderValueChildRows(definition.name, tree)
+          ] }, definition.name);
+        })
+      ] }),
+      filteredSystemVariables?.map((variable) => {
+        const variableType = visualTypeFromRecord(variable);
+        const { displayValue, fullValue } = getVariableValuePreview(
+          variable.value
+        );
+        const rootToken = variable.example ?? variable.name;
+        const tree = systemVariableValueTrees.get(variable.name);
+        const expandable = !!tree && tree.length > 0;
+        const expanded = expandable && isPathExpanded(rootToken);
+        return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: "ls-variable-picker__row",
+              onClick: () => {
+                if (expandable && !expanded) toggleExpand(rootToken);
+                else insertVariable(rootToken);
+              },
+              children: [
+                /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
+                  expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
+                  renderVariableToken(variable.name, variableType)
+                ] }),
+                /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
+                /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
+              ]
+            }
+          ),
+          expanded && tree && renderValueChildRows(rootToken, tree)
+        ] }, variable.name);
+      })
+    ] })
+  ] });
+  const textField = (params = {}) => /* @__PURE__ */ jsx12(
+    VariableInputTextField,
+    {
+      t,
+      params,
+      id: variableId.current,
+      containerRef,
+      name,
+      label,
+      type,
+      variant,
+      disabled,
+      autoFocus,
+      multiline,
+      placeholder,
+      rows,
+      maxRows,
+      value,
+      onChange: $disableInputChange ? void 0 : onChange,
+      clickedVariableIcon,
+      inputProps,
+      allowedVariables,
+      showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
+      ref
+    }
+  );
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx12(
+      Popover,
+      {
+        anchorEl: containerRef.current,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+        open: !hideVariables && showVariables,
+        onClose: clickedVariableIcon,
+        slotProps: {
+          paper: {
+            sx: {
+              color: "var(--neutralLight2, #cac9d5)",
+              backgroundColor: "var(--neutralDark1, #171628)",
+              // Paper has no padding of its own — the picker body's `p-2` is the
+              // single source of internal spacing. Adding paper padding on top of
+              // that compounds the inset and forces premature horizontal scroll.
+              padding: 0,
+              border: "1px solid var(--neutralDark4, #393853)",
+              borderRadius: "var(--radius, 1rem)",
+              overflow: "hidden"
+            }
+          }
+        },
+        children: pickerBody
+      }
+    ),
+    isAutoComplete ? /* @__PURE__ */ jsx12(
+      Autocomplete2,
+      {
+        disableClearable: true,
+        openOnFocus: true,
+        includeInputInList: true,
+        multiple: $multiple,
+        freeSolo: $freeSolo,
+        disableCloseOnSelect: $disableCloseOnSelect,
+        groupBy: autoCompleteGroupBy,
+        options: autoCompleteOptions ?? [],
+        isOptionEqualToValue,
+        value,
+        disabled,
+        loading,
+        getOptionLabel: resolveOptionLabel,
+        onChange: (_e, nextValue) => {
+          if ($getFullValueObject) {
+            onChange?.(nextValue);
+            return;
+          }
+          if ($multiple) {
+            const list = Array.isArray(nextValue) ? nextValue : nextValue ? [nextValue] : [];
+            const mapped = list.map((entry) => {
+              if (entry && typeof entry === "object" && "value" in entry) {
+                return entry.value;
+              }
+              return entry;
+            });
+            onChange?.(mapped);
+            return;
+          }
+          if (nextValue && typeof nextValue === "object" && "value" in nextValue) {
+            onChange?.(nextValue.value);
+            return;
+          }
+          onChange?.(nextValue);
+        },
+        onInputChange: $disableInputChange ? void 0 : (_e, nextValue) => onChange?.(nextValue),
+        filterOptions: handleFilterOptions,
+        renderOption: $renderOption ?? renderOption ?? defaultRenderOption,
+        slots: ListboxComponent ? { listbox: ListboxComponent } : void 0,
+        slotProps: {
+          popper: {
+            className: "ls-variable-autocomplete-popper"
+          },
+          paper: {
+            className: "ls-variable-autocomplete-paper",
+            sx: {
+              border: "1px solid var(--neutralDark4, var(--cardborder, #393853))",
+              borderRadius: "var(--radius, 1rem)",
+              backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))",
+              color: "var(--neutralLight1, var(--white, #fff))",
+              boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+              overflow: "hidden"
+            }
+          },
+          listbox: {
+            className: "ls-variable-autocomplete-listbox",
+            onScroll: onScrollListBox,
+            sx: {
+              padding: "0.25rem 0",
+              backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))",
+              color: "var(--neutralLight1, var(--white, #fff))",
+              "& .MuiAutocomplete-option": {
+                display: "flex",
+                minHeight: 44,
+                alignItems: "center",
+                padding: "0.625rem 1rem",
+                color: "var(--neutralLight1, var(--white, #fff))",
+                fontSize: "1rem",
+                lineHeight: 1.35,
+                transition: "background-color 120ms ease, color 120ms ease"
+              },
+              "& .MuiAutocomplete-option:hover, & .MuiAutocomplete-option.Mui-focused, & .MuiAutocomplete-option[data-focus='true'], & .MuiAutocomplete-option[aria-selected='true']": {
+                backgroundColor: "var(--cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)))",
+                color: "var(--neutralLight1, var(--white, #fff))"
+              }
+            }
+          },
+          popupIndicator: {
+            className: "ls-variable-autocomplete-popup-indicator",
+            sx: {
+              color: "var(--neutralLight1, var(--white, #fff))",
+              "& svg": {
+                color: "var(--neutralLight1, var(--white, #fff))",
+                fill: "currentColor"
+              }
+            }
+          }
+        },
+        onHighlightChange,
+        onOpen: onPopupOpen,
+        onClose: onPopupClose,
+        renderInput: (params) => textField(params)
+      }
+    ) : textField()
+  ] });
+});
+LSVariableInputField.displayName = "LSVariableInputField";
+var VariableInputTextField = forwardRef5(
+  ({
+    t,
+    id,
+    name,
+    label,
+    type,
+    variant,
+    disabled,
+    autoFocus,
+    multiline,
+    placeholder,
+    rows,
+    maxRows,
+    value,
+    onChange,
+    inputProps,
+    clickedVariableIcon,
+    params = {},
+    containerRef,
+    showVariableIcon
+  }, ref) => {
+    const inputPropsInputProps = inputProps?.InputProps ?? {};
+    const paramsInputProps = params?.InputProps ?? {};
+    const inputPropsSlotInputProps = inputProps?.slotProps?.input ?? {};
+    const paramsSlotInputProps = params?.slotProps?.input ?? {};
+    const explicitStartAdornment = inputProps?.startAdornment;
+    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx12(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
+    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment ?? resolvedExplicitStartAdornment;
+    const endAdornment = paramsInputProps.endAdornment ?? paramsSlotInputProps.endAdornment ?? inputPropsInputProps.endAdornment ?? inputPropsSlotInputProps.endAdornment;
+    return /* @__PURE__ */ jsx12(
+      LSTextField,
+      {
+        id,
+        name,
+        label,
+        type,
+        color: "primary",
+        variant,
+        disabled,
+        autoFocus,
+        multiline,
+        placeholder,
+        rows,
+        maxRows,
+        value,
+        fullWidth: true,
+        className: `mui-ls-input ${params?.className ?? ""} ${inputProps?.className ?? ""}`.trim(),
+        onChange: onChange ? (e) => onChange(e.target.value) : void 0,
+        ...inputProps,
+        ...params,
+        InputProps: {
+          ...inputPropsSlotInputProps,
+          ...inputPropsInputProps,
+          ...paramsSlotInputProps,
+          ...paramsInputProps,
+          startAdornment,
+          endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            endAdornment ?? null,
+            showVariableIcon ? /* @__PURE__ */ jsx12(
+              Tooltip,
+              {
+                title: t("chatbot.allowed-variables", "Allowed Variables"),
+                children: /* @__PURE__ */ jsx12(
+                  InputAdornment2,
+                  {
+                    position: "end",
+                    onClick: clickedVariableIcon,
+                    ref: containerRef,
+                    className: "ls-variable-input-adornment",
+                    children: "{}"
+                  }
+                )
+              }
+            ) : null
+          ] })
+        },
+        inputRef: ref
+      }
+    );
+  }
+);
+VariableInputTextField.displayName = "VariableInputTextField";
+export {
+  LSButton,
+  LSCheckbox,
+  LSCheckboxField,
+  LSColorPicker,
+  LSDatePicker,
+  LSFontPicker,
+  LSInput,
+  LSMultiSelect,
+  LSRadio,
+  LSRadioGroup,
+  LSSelect,
+  LSSliderInput,
+  LSTextField,
+  LSVariableInputField,
+  LSVariableInputProvider
+};