@lumiastream/ui 0.2.0 → 0.2.1

package/dist/index.js

@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/tailwind.css
-styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --spacing: 0.25rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .static {\n    position: static;\n  }\n  .start {\n    inset-inline-start: var(--spacing);\n  }\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-500 {\n    background-color: var(--color-gray-500);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n}\n');
+styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --radius-md: 0.375rem;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .visible {\n    visibility: visible;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .start {\n    inset-inline-start: var(--spacing);\n  }\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n  .mr-2\\.5 {\n    margin-right: calc(var(--spacing) * 2.5);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2\\.5 {\n    margin-bottom: calc(var(--spacing) * 2.5);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-\\[55vh\\] {\n    max-height: 55vh;\n  }\n  .min-h-\\[50vh\\] {\n    min-height: 50vh;\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-\\[18px\\] {\n    width: 18px;\n  }\n  .w-\\[92vw\\] {\n    width: 92vw;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-\\[600px\\] {\n    max-width: 600px;\n  }\n  .max-w-\\[1100px\\] {\n    max-width: 1100px;\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .grid-cols-\\[minmax\\(300px\\,1\\.5fr\\)_2fr\\] {\n    grid-template-columns: minmax(300px, 1.5fr) 2fr;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-\\[var\\(--neutralLight3\\,\\#9392a1\\)\\] {\n    border-color: var(--neutralLight3,#9392a1);\n  }\n  .border-current {\n    border-color: currentcolor;\n  }\n  .border-white\\/10 {\n    border-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .border-white\\/25 {\n    border-color: color-mix(in srgb, #fff 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);\n    }\n  }\n  .bg-\\[\\#1b1a28\\] {\n    background-color: #1b1a28;\n  }\n  .bg-cover {\n    background-size: cover;\n  }\n  .bg-center {\n    background-position: center;\n  }\n  .bg-no-repeat {\n    background-repeat: no-repeat;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-0 {\n    padding-block: calc(var(--spacing) * 0);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-\\[18px\\] {\n    padding-block: 18px;\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .break-all {\n    word-break: break-all;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-\\[\\#f4f3ff\\] {\n    color: #f4f3ff;\n  }\n  .text-\\[var\\(--customVariables\\,\\#69ffd2\\)\\] {\n    color: var(--customVariables,#69ffd2);\n  }\n  .text-\\[var\\(--functionVariables\\,var\\(--semanticPurple\\,\\#b489ff\\)\\)\\] {\n    color: var(--functionVariables,var(--semanticPurple,#b489ff));\n  }\n  .text-\\[var\\(--neutralLight1\\,\\#f4f3ff\\)\\] {\n    color: var(--neutralLight1,#f4f3ff);\n  }\n  .text-\\[var\\(--neutralLight2\\,\\#cac9d5\\)\\] {\n    color: var(--neutralLight2,#cac9d5);\n  }\n  .text-\\[var\\(--neutralLight3\\,\\#9392a1\\)\\] {\n    color: var(--neutralLight3,#9392a1);\n  }\n  .text-\\[var\\(--normalVariables\\,var\\(--semanticBlue\\,\\#65b8ff\\)\\)\\] {\n    color: var(--normalVariables,var(--semanticBlue,#65b8ff));\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .shadow-\\[0_0_0_1px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\] {\n    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.25));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-\\[0_8px_18px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n    --tw-shadow: 0 8px 18px var(--tw-shadow-color, rgba(0,0,0,0.18));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to,\n      opacity,\n      box-shadow,\n      transform,\n      translate,\n      scale,\n      rotate,\n      filter,\n      -webkit-backdrop-filter,\n      backdrop-filter,\n      display,\n      content-visibility,\n      overlay,\n      pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .\\[--neutralDark1\\:\\#1b1a28\\] {\n    --neutralDark1: #1b1a28;\n  }\n  .\\[--neutralDark2\\:\\#252338\\] {\n    --neutralDark2: #252338;\n  }\n  .\\[--neutralDark3\\:\\#312f47\\] {\n    --neutralDark3: #312f47;\n  }\n  .\\[--neutralDark4\\:\\#46435f\\] {\n    --neutralDark4: #46435f;\n  }\n  .\\[--neutralLight1\\:\\#f4f3ff\\] {\n    --neutralLight1: #f4f3ff;\n  }\n  .\\[--neutralLight2\\:\\#cac9d5\\] {\n    --neutralLight2: #cac9d5;\n  }\n  .\\[--neutralLight3\\:\\#9f9eb2\\] {\n    --neutralLight3: #9f9eb2;\n  }\n  .\\[--primary\\:\\#ff4076\\] {\n    --primary: #ff4076;\n  }\n  .\\[--radiusContainer\\:12px\\] {\n    --radiusContainer: 12px;\n  }\n  .\\[--radiusContainerSm\\:10px\\] {\n    --radiusContainerSm: 10px;\n  }\n  .\\[--secondary\\:\\#5f5dff\\] {\n    --secondary: #5f5dff;\n  }\n  .\\[--variable-custom-color\\:var\\(--customVariables\\,\\#69ffd2\\)\\] {\n    --variable-custom-color: var(--customVariables,#69ffd2);\n  }\n  .\\[--variable-function-color\\:var\\(--functionVariables\\,var\\(--semanticPurple\\,\\#b489ff\\)\\)\\] {\n    --variable-function-color: var(--functionVariables,var(--semanticPurple,#b489ff));\n  }\n  .\\[--variable-normal-color\\:var\\(--normalVariables\\,var\\(--semanticBlue\\,\\#65b8ff\\)\\)\\] {\n    --variable-normal-color: var(--normalVariables,var(--semanticBlue,#65b8ff));\n  }\n  .hover\\:brightness-110 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-brightness: brightness(110%);\n        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n      }\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow:\n        var(--tw-inset-shadow),\n        var(--tw-inset-ring-shadow),\n        var(--tw-ring-offset-shadow),\n        var(--tw-ring-shadow),\n        var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[var\\(--primary\\,\\#ff4076\\)\\] {\n    &:focus {\n      --tw-ring-color: var(--primary,#ff4076);\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:ring-offset-\\[var\\(--neutralDark1\\,\\#1b1a28\\)\\] {\n    &:focus {\n      --tw-ring-offset-color: var(--neutralDark1,#1b1a28);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .active\\:opacity-80 {\n    &:active {\n      opacity: 80%;\n    }\n  }\n  .active\\:brightness-95 {\n    &:active {\n      --tw-brightness: brightness(95%);\n      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .\\[\\&_circle\\]\\:stroke-white {\n    & circle {\n      stroke: var(--color-white);\n    }\n  }\n  .\\[\\&_polyline\\]\\:stroke-white {\n    & polyline {\n      stroke: var(--color-white);\n    }\n  }\n}\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n');
 
 // src/components/LSButton/LSButton.tsx
 import { jsx } from "react/jsx-runtime";
@@ -32,23 +32,1313 @@ var LSButton = ({
   label,
   ...props
 }) => {
-  const mode = primary ? "bg-blue-500" : "bg-gray-500";
+  const background = backgroundColor ?? (primary ? "var(--primary, #ff4076)" : "var(--neutralDark4, #46435f)");
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       className: [
-        "bg-blue-500",
-        size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2 text-base",
-        mode,
-        backgroundColor ? `bg-[${backgroundColor}]` : ""
+        "rounded-md border border-white/10 font-medium text-[var(--neutralLight1,#f4f3ff)] shadow-[0_8px_18px_rgba(0,0,0,0.18)] transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-[var(--primary,#ff4076)] focus:ring-offset-2 focus:ring-offset-[var(--neutralDark1,#1b1a28)] active:brightness-95",
+        size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2 text-base"
       ].join(" "),
+      style: { background },
       ...props,
       children: 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 classNames 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: classNames("mui-ls-input w-full", 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 classNames2 from "classnames";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+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) => {
+      if (input === void 0 || input === null) {
+        return input;
+      }
+      const numericValue = Number(input);
+      if (Number.isNaN(numericValue)) {
+        return 0;
+      }
+      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 (typeof value === "number" && Number.isNaN(value) === false) {
+      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: classNames2("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: !fullWidth,
+            className: hideSlider ? inputProps?.className : `${inputProps?.className ?? ""} small noMinHeight`.trim(),
+            style: hideSlider ? inputProps?.style : { width: 96, maxWidth: 96, flexShrink: 0 },
+            ...!hideSlider ? { size: "small" } : {}
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classNames2("mui-ls-slider-input-root", { "mui-ls-slider-input-root--fullWidth": fullWidth }), children: [
+    /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        className: classNames2("mui-ls-slider-input-fieldset", {
+          "mui-ls-slider-input-fieldset--fullWidth": fullWidth
+        }),
+        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)",
+          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)",
+        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 classNames3 from "classnames";
+import { 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: classNames3("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;
+  const { field } = useController({ name, control: resolvedControl });
+  return /* @__PURE__ */ jsx5(
+    FormControlLabel,
+    {
+      className: classNames3("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: "0.5rem",
+    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: "0.5rem",
+    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: "w-full",
+            name,
+            label,
+            helperText,
+            value,
+            onChange: handleInputChange,
+            onBlur,
+            placeholder,
+            disabled,
+            endAdornment: /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "relative h-6 w-6 shrink-0 rounded-md border border-white/25 bg-cover bg-center bg-no-repeat p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.25)] disabled:cursor-not-allowed disabled:opacity-50",
+                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: "[&_circle]:stroke-white [&_polyline]:stroke-white",
+                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/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 jsx7 } 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__ */ jsx7("div", { className: "w-full", children: /* @__PURE__ */ jsx7(
+    AutocompleteComponent,
+    {
+      freeSolo: true,
+      disableClearable: true,
+      openOnFocus: true,
+      forcePopupIcon: true,
+      options: combinedFonts,
+      value: currentValue,
+      inputValue,
+      popupIcon: /* @__PURE__ */ jsx7(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(--radiusContainerSm)",
+            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__ */ jsx7(
+          "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__ */ jsx7(
+        TextFieldComponent,
+        {
+          ...params,
+          label,
+          helperText,
+          placeholder,
+          fullWidth: true,
+          className: "mui-ls-input noMinHeight w-full",
+          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 jsx8, 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__ */ jsx8(
+    LSSelect,
+    {
+      multiple: true,
+      label,
+      fullWidth: true,
+      className: "mui-multi-select",
+      value: value ?? [],
+      onChange: handleChange,
+      displayEmpty: true,
+      renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "flex w-full min-w-0 flex-nowrap items-center justify-between gap-2 overflow-hidden whitespace-nowrap", children: [
+        /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: selected.length > 0 ? selected.map((val) => options.find((opt) => opt.value === val)?.label ?? val).join(", ") : placeholder }),
+        /* @__PURE__ */ jsx8("div", { className: "shrink-0 whitespace-nowrap", children: `(${selected.length})` })
+      ] }),
+      MenuProps: {
+        slotProps: {
+          paper: {
+            sx: {
+              background: "var(--neutralDark2) !important",
+              backgroundColor: "var(--neutralDark2)",
+              color: "var(--neutralLight1)",
+              border: "1px solid var(--neutralDark4)",
+              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)",
+            "& .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__ */ jsx8(LSCheckbox, { checked: (value ?? []).includes(option.value), tabIndex: -1, disableRipple: true }),
+            /* @__PURE__ */ jsx8("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 classNames4 from "classnames";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var LSRadio = ({ className = "", ...props }) => {
+  return /* @__PURE__ */ jsx9(Radio, { ...props, className: classNames4("ls-radio", className) });
+};
+var LSRadioGroup = ({ selections, className = "", optionClassName = "", row, ...props }) => {
+  return /* @__PURE__ */ jsx9(RadioGroup, { ...props, row, className: classNames4("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx9(
+    FormControlLabel2,
+    {
+      className: classNames4("ls-radio-row", optionClassName),
+      value: selection.value,
+      disabled: selection.disabled,
+      control: /* @__PURE__ */ jsx9(LSRadio, {}),
+      label: selection.label
+    },
+    selection.value
+  )) });
+};
+LSRadioGroup.displayName = "LSRadioGroup";
+
+// src/components/LSTextField/LSTextField.tsx
+import TextField3 from "@mui/material/TextField";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var LSTextField = forwardRef3((props, ref) => {
+  const { InputLabelProps, InputProps, slotProps, ...rest } = props;
+  return /* @__PURE__ */ jsx10(
+    TextField3,
+    {
+      ...rest,
+      variant: "outlined",
+      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 { createContext, forwardRef as forwardRef4, useCallback as useCallback2, useContext, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var LSVariableInputContext = createContext({});
+var LSVariableInputProvider = ({ children, value }) => {
+  return /* @__PURE__ */ jsx11(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_replay",
+  "obs_vertical_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 filter = createFilterOptions();
+var isNully = (value) => value === null || value === void 0;
+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") return "Variable";
+  if (key === "overlay-variables.description") return "Description";
+  if (key === "assets.search") return "Search";
+  if (key === "variables.functionvariables") return "Function 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;
+    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;
+    }
+    if (!variableName || unique.has(variableName)) return;
+    unique.add(variableName);
+    definitions.push({ name: variableName, description });
+  });
+  return definitions;
+};
+var LSVariableInputField = forwardRef4((props, ref) => {
+  const context = useContext(LSVariableInputContext);
+  const {
+    name,
+    label,
+    type,
+    isAutoComplete,
+    autoCompleteOptions,
+    renderOption,
+    hideVariables,
+    allowedVariables,
+    disabled,
+    autoFocus,
+    inputProps = {},
+    multiline,
+    rows,
+    maxRows,
+    value,
+    placeholder,
+    variant,
+    ListboxComponent,
+    onScrollListBox,
+    onHighlightChange,
+    onPopupClose,
+    onPopupOpen,
+    afterFilter,
+    onChange,
+    systemVariables: systemVariablesProp,
+    functionVariables: functionVariablesProp,
+    translate,
+    onVariableTranslationsNeeded
+  } = props;
+  const t = translate ?? context.translate ?? defaultTranslate;
+  const systemVariables = systemVariablesProp ?? context.systemVariables ?? {};
+  const functionVariables = useMemo3(() => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES, [context.functionVariables, functionVariablesProp]);
+  const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
+  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(allowedVariableNames);
+  const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
+  useEffect4(() => {
+    requestTranslations?.();
+  }, [requestTranslations]);
+  const getVariableVisualType = useCallback2(
+    (variableName) => {
+      if (functionVariableSet.has(variableName)) return "func";
+      return !isNully(systemVariables?.[variableName]) ? "system" : "custom";
+    },
+    [functionVariableSet, systemVariables]
+  );
+  const getVariableTypeSortRank = (variableType) => {
+    if (variableType === "custom") return 0;
+    if (variableType === "func") return 1;
+    return 2;
+  };
+  const orderByType = useCallback2(
+    (variableNames) => {
+      const grouped = { custom: [], func: [], system: [] };
+      variableNames.forEach((variableName) => {
+        grouped[getVariableVisualType(variableName)].push(variableName);
+      });
+      return [...grouped.custom, ...grouped.func, ...grouped.system];
+    },
+    [getVariableVisualType]
+  );
+  const sortByTypeThenName = useCallback2(
+    (variableNames) => [...variableNames].sort((a, b) => {
+      const typeDiff = getVariableTypeSortRank(getVariableVisualType(a)) - getVariableTypeSortRank(getVariableVisualType(b));
+      return typeDiff !== 0 ? typeDiff : a.localeCompare(b);
+    }),
+    [getVariableVisualType]
+  );
+  const getAllowedVariableDescription = useCallback2(
+    (variableName) => {
+      const fromDefinitions = allowedVariableDefinitionLookup.get(variableName)?.description;
+      if (fromDefinitions) return fromDefinitions;
+      const translationKey = `variables.${variableName}`;
+      const translated = t(translationKey, variableName);
+      return translated && translated !== translationKey ? translated : variableName;
+    },
+    [allowedVariableDefinitionLookup, t]
+  );
+  const filterBasedOnQuery = useCallback2(() => {
+    const query = (searchQuery ?? "").toLowerCase().replace("{{", "").replace("}}", "").trim();
+    if (allowedVariableNames.length > 0) {
+      if (!query) {
+        setFilteredAllowedVariables(orderByType(allowedVariableNames));
+      } else {
+        const nameMatches = [];
+        const descMatches = [];
+        allowedVariableNames.forEach((variable) => {
+          const nameLower = variable?.toLowerCase();
+          const descLower = getAllowedVariableDescription(variable)?.toLowerCase();
+          if (nameLower?.includes(query)) nameMatches.push(variable);
+          else if (descLower?.includes(query)) descMatches.push(variable);
+        });
+        setFilteredAllowedVariables([...sortByTypeThenName(nameMatches), ...sortByTypeThenName(descMatches)]);
+      }
+    } else {
+      setFilteredAllowedVariables([]);
+    }
+    const systemKeys = Object.keys(systemVariables ?? {}).filter((variableKey) => !isNully(systemVariables?.[variableKey]));
+    const allowedVariableSet = new Set(allowedVariableNames);
+    const candidates = [...functionVariables, ...systemKeys].filter((variableKey, idx, list) => list.indexOf(variableKey) === idx && !allowedVariableSet.has(variableKey));
+    if (!query) {
+      setFilteredSystemVariables(orderByType(candidates));
+    } else {
+      const nameMatches = [];
+      const descMatches = [];
+      candidates.forEach((key) => {
+        const nameLower = key?.toLowerCase();
+        const descStr = t(`variables.${key}`, "-", {
+          example: systemVariables[key],
+          interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" }
+        });
+        const descLower = descStr?.toLowerCase();
+        if (nameLower?.includes(query)) nameMatches.push(key);
+        else if (descLower?.includes(query)) descMatches.push(key);
+      });
+      setFilteredSystemVariables([...sortByTypeThenName(nameMatches), ...sortByTypeThenName(descMatches)]);
+    }
+  }, [allowedVariableNames, functionVariables, getAllowedVariableDescription, orderByType, searchQuery, sortByTypeThenName, systemVariables, t]);
+  useEffect4(() => {
+    filterBasedOnQuery();
+  }, [filterBasedOnQuery]);
+  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}}}`);
+  };
+  const getVariableColorClass = (variableType, isSuggested = false) => {
+    if (isSuggested && variableType !== "func") return "text-[var(--customVariables,#69ffd2)]";
+    if (variableType === "func") return "text-[var(--functionVariables,var(--semanticPurple,#b489ff))]";
+    if (variableType === "system") return "text-[var(--normalVariables,var(--semanticBlue,#65b8ff))]";
+    return "text-[var(--customVariables,#69ffd2)]";
+  };
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `flex min-w-0 items-center ${getVariableColorClass(variableType, isSuggested)}`, children: [
+    /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${variableName}}}` }),
+    variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ml-2 inline-flex shrink-0 items-center rounded border border-current px-1 py-0 text-[10px] font-semibold uppercase leading-none", title: t("variables.functionvariables", "Function variables"), children: "fx" })
+  ] });
+  const handleFilterOptions = (options, params) => {
+    const filtered = filter(options, params);
+    afterFilter?.(filtered);
+    return filtered;
+  };
+  const textField = (params = {}) => /* @__PURE__ */ jsx11(
+    VariableInputTextField,
+    {
+      params,
+      id: variableId.current,
+      containerRef,
+      name,
+      label,
+      type,
+      variant,
+      disabled,
+      autoFocus,
+      multiline,
+      placeholder,
+      rows,
+      maxRows,
+      value,
+      onChange,
+      clickedVariableIcon,
+      inputProps,
+      ref
+    }
+  );
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx11(
+      Popover,
+      {
+        anchorEl: containerRef.current,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        open: !hideVariables && showVariables,
+        onClose: clickedVariableIcon,
+        slotProps: {
+          paper: {
+            sx: {
+              color: "var(--neutralLight2, #cac9d5)",
+              backgroundColor: "var(--neutralDark1, #171628)",
+              padding: 1,
+              border: "1px solid var(--neutralDark4, #393853)"
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs5("div", { className: "flex max-h-[55vh] min-h-[50vh] w-[92vw] max-w-[1100px] flex-col overflow-hidden [--variable-custom-color:var(--customVariables,#69ffd2)] [--variable-function-color:var(--functionVariables,var(--semanticPurple,#b489ff))] [--variable-normal-color:var(--normalVariables,var(--semanticBlue,#65b8ff))]", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "mb-2.5 text-[var(--neutralLight2,#cac9d5)]", children: [
+            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
+            /* @__PURE__ */ jsx11(
+              LSInput,
+              {
+                autoFocus: true,
+                startAdornment: /* @__PURE__ */ jsx11("span", { className: "mr-2.5 inline-flex h-[18px] w-[18px] items-center justify-center", children: "\u2315" }),
+                placeholder: t("assets.search", "Search"),
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                type: "text",
+                style: { padding: "1rem 0" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(300px,1.5fr)_2fr] text-[var(--neutralLight3,#9392a1)]", children: [
+            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variable", "Variable") }),
+            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.description", "Description") })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
+            allowedVariableNames.length > 0 && filteredAllowedVariables?.map((variableName) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] gap-4 border-b border-[var(--neutralLight3,#9392a1)] py-[18px] active:opacity-80", onClick: () => insertVariable(variableName), children: [
+              renderVariableToken(variableName, getVariableVisualType(variableName), true),
+              /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words", children: getAllowedVariableDescription(variableName) })
+            ] }, variableName)),
+            filteredSystemVariables?.map((variableKey) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] gap-4 border-b border-[var(--neutralLight3,#9392a1)] py-[18px] active:opacity-80", onClick: () => insertVariable(variableKey), children: [
+              renderVariableToken(variableKey, getVariableVisualType(variableKey)),
+              /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
+            ] }, variableKey))
+          ] })
+        ] })
+      }
+    ),
+    isAutoComplete ? /* @__PURE__ */ jsx11(
+      Autocomplete2,
+      {
+        disableClearable: true,
+        freeSolo: true,
+        includeInputInList: true,
+        onChange: (_e, nextValue) => onChange?.(nextValue?.value ?? nextValue),
+        onInputChange: (_e, nextValue) => onChange?.(nextValue),
+        options: autoCompleteOptions ?? [],
+        value,
+        renderOption,
+        getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+        filterOptions: handleFilterOptions,
+        slots: { listbox: ListboxComponent },
+        slotProps: { listbox: { onScroll: onScrollListBox } },
+        onHighlightChange,
+        onOpen: onPopupOpen,
+        onClose: onPopupClose,
+        renderInput: (params) => textField(params)
+      }
+    ) : textField()
+  ] });
+});
+LSVariableInputField.displayName = "LSVariableInputField";
+var VariableInputTextField = forwardRef4(
+  ({ id, name, label, type, variant, disabled, autoFocus, multiline, placeholder, rows, maxRows, value, onChange, inputProps, clickedVariableIcon, params = {}, containerRef }, ref) => {
+    return /* @__PURE__ */ jsx11(
+      LSTextField,
+      {
+        id,
+        name,
+        label,
+        type,
+        color: "secondary",
+        variant,
+        disabled,
+        autoFocus,
+        multiline,
+        placeholder,
+        rows,
+        maxRows,
+        value,
+        fullWidth: true,
+        className: `mui-ls-input noMinHeight ${params?.className ?? ""} ${inputProps?.className ?? ""}`.trim(),
+        onChange: (e) => onChange?.(e.target.value),
+        ...inputProps,
+        ...params,
+        InputProps: {
+          ...params?.InputProps ?? {},
+          ...inputProps?.InputProps ?? {},
+          endAdornment: /* @__PURE__ */ jsxs5(Fragment, { children: [
+            params?.slotProps?.input?.endAdornment ?? params?.InputProps?.endAdornment ?? null,
+            /* @__PURE__ */ jsx11(
+              InputAdornment2,
+              {
+                position: "end",
+                onClick: clickedVariableIcon,
+                ref: containerRef,
+                className: "cursor-pointer",
+                sx: {
+                  cursor: "pointer",
+                  background: "var(--primary)",
+                  borderRadius: "50%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "4px",
+                  minWidth: "22px",
+                  minHeight: "22px",
+                  width: "22px",
+                  height: "22px",
+                  color: "var(--neutralDark1)",
+                  "& *": {
+                    cursor: "pointer",
+                    color: "var(--neutralDark1)"
+                  }
+                },
+                children: "{}"
+              }
+            )
+          ] })
+        },
+        ref
+      }
+    );
+  }
+);
+VariableInputTextField.displayName = "VariableInputTextField";
+
 // src/utils/variableCompletionOptions.ts
 function variableCompletionOptions(context, variables) {
   const before = context.state.sliceDoc(0, context.pos);
@@ -864,6 +2154,19 @@ var resolveChatterProfileUrlWithResolvers = async ({
 };
 export {
   LSButton,
+  LSCheckbox,
+  LSCheckboxField,
+  LSColorPicker,
+  LSFontPicker,
+  LSInput,
+  LSMultiSelect,
+  LSRadio,
+  LSRadioGroup,
+  LSSelect,
+  LSSliderInput,
+  LSTextField,
+  LSVariableInputField,
+  LSVariableInputProvider,
   MEDIA_PREVIEW_USER_LEVEL_VALUES,
   buildChatMessageContent,
   codeMirrorlinterOptions,