@lumiastream/ui 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.d.ts +4 -14
  2. package/dist/index.js +26 -17
  3. package/package.json +63 -59
package/dist/index.d.ts CHANGED
@@ -7,7 +7,6 @@ import { CheckboxProps } from '@mui/material/Checkbox';
7
7
  import { FieldValues, Path } from 'react-hook-form';
8
8
  import { RadioProps } from '@mui/material/Radio';
9
9
  import { RadioGroupProps } from '@mui/material/RadioGroup';
10
- import * as _mui_material from '@mui/material';
11
10
  import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
12
11
  import { CompletionContext } from '@codemirror/autocomplete';
13
12
 
@@ -56,9 +55,9 @@ declare const LSInput: React.ForwardRefExoticComponent<Omit<LSInputProps$1, "ref
56
55
 
57
56
  interface LSInputPropsChild {
58
57
  name?: string;
59
- value?: number;
58
+ value?: number | string | null;
60
59
  autoFocus?: boolean;
61
- defaultValue?: number;
60
+ defaultValue?: number | string | null;
62
61
  label?: React.ReactNode;
63
62
  inline?: boolean;
64
63
  hasInfo?: boolean;
@@ -165,20 +164,11 @@ type LSRadioGroupProps = RadioGroupProps & {
165
164
  };
166
165
  declare const LSRadioGroup: React.FC<LSRadioGroupProps>;
167
166
 
168
- type LSTextFieldProps = TextFieldProps & {
167
+ type LSTextFieldProps = Record<string, any> & {
169
168
  InputLabelProps?: Record<string, unknown>;
170
169
  InputProps?: Record<string, unknown>;
171
170
  };
172
- declare const LSTextField: React.ForwardRefExoticComponent<(Omit<_mui_material.FilledTextFieldProps & {
173
- InputLabelProps?: Record<string, unknown>;
174
- InputProps?: Record<string, unknown>;
175
- }, "ref"> | Omit<_mui_material.OutlinedTextFieldProps & {
176
- InputLabelProps?: Record<string, unknown>;
177
- InputProps?: Record<string, unknown>;
178
- }, "ref"> | Omit<_mui_material.StandardTextFieldProps & {
179
- InputLabelProps?: Record<string, unknown>;
180
- InputProps?: Record<string, unknown>;
181
- }, "ref">) & React.RefAttributes<HTMLDivElement>>;
171
+ declare const LSTextField: React.ForwardRefExoticComponent<Omit<LSTextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
182
172
 
183
173
  interface IVariables {
184
174
  name: string;
package/dist/index.js CHANGED
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
21
21
  }
22
22
 
23
23
  // src/tailwind.css
24
- 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');
24
+ styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n:root,\n:host {\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}\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.mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n}\n.mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\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-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-\\[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.items-start {\n align-items: flex-start;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-2 {\n gap: calc(var(--spacing) * 2);\n}\n.gap-8 {\n gap: calc(var(--spacing) * 8);\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-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-4 {\n padding-block: calc(var(--spacing) * 4);\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-\\[1\\.25\\] {\n --tw-leading: 1.25;\n line-height: 1.25;\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@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');
25
25
 
26
26
  // src/components/LSButton/LSButton.tsx
27
27
  import { jsx } from "react/jsx-runtime";
@@ -185,6 +185,20 @@ import Slider from "@mui/material/Slider";
185
185
  import classNames2 from "classnames";
186
186
  import { useCallback, useEffect, useMemo, useState } from "react";
187
187
  import { jsx as jsx3, jsxs } from "react/jsx-runtime";
188
+ var normalizeSliderValue = (rawValue) => {
189
+ if (typeof rawValue === "number") {
190
+ return Number.isFinite(rawValue) ? rawValue : 0;
191
+ }
192
+ if (typeof rawValue === "string") {
193
+ const trimmedValue = rawValue.trim();
194
+ if (!trimmedValue) {
195
+ return 0;
196
+ }
197
+ const numericValue = Number(trimmedValue);
198
+ return Number.isFinite(numericValue) ? numericValue : 0;
199
+ }
200
+ return 0;
201
+ };
188
202
  var LSSliderInput = ({
189
203
  name,
190
204
  value,
@@ -214,13 +228,7 @@ var LSSliderInput = ({
214
228
  const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
215
229
  const actualToDisplay = useCallback(
216
230
  (input) => {
217
- if (input === void 0 || input === null) {
218
- return input;
219
- }
220
- const numericValue = Number(input);
221
- if (Number.isNaN(numericValue)) {
222
- return 0;
223
- }
231
+ const numericValue = normalizeSliderValue(input);
224
232
  if (!isValueFloat) {
225
233
  return numericValue;
226
234
  }
@@ -241,7 +249,7 @@ var LSSliderInput = ({
241
249
  return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
242
250
  }, [displayStep]);
243
251
  useEffect(() => {
244
- if (typeof value === "number" && Number.isNaN(value) === false) {
252
+ if (value !== void 0) {
245
253
  setDisplayValue(actualToDisplay(value));
246
254
  }
247
255
  }, [actualToDisplay, value]);
@@ -939,6 +947,7 @@ LSTextField.displayName = "LSTextField";
939
947
  // src/components/LSVariableInputField/LSVariableInputField.tsx
940
948
  import Autocomplete2, { createFilterOptions } from "@mui/material/Autocomplete";
941
949
  import InputAdornment2 from "@mui/material/InputAdornment";
950
+ import Search from "@mui/icons-material/Search";
942
951
  import Popover from "@mui/material/Popover";
943
952
  import { createContext, forwardRef as forwardRef4, useCallback as useCallback2, useContext, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
944
953
  import { Fragment, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1218,33 +1227,33 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1218
1227
  }
1219
1228
  },
1220
1229
  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: [
1221
- /* @__PURE__ */ jsxs5("div", { className: "mb-2.5 text-[var(--neutralLight2,#cac9d5)]", children: [
1230
+ /* @__PURE__ */ jsxs5("div", { className: "mb-4 text-[var(--neutralLight2,#cac9d5)]", children: [
1222
1231
  /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
1223
1232
  /* @__PURE__ */ jsx11(
1224
1233
  LSInput,
1225
1234
  {
1226
1235
  autoFocus: true,
1227
- startAdornment: /* @__PURE__ */ jsx11("span", { className: "mr-2.5 inline-flex h-[18px] w-[18px] items-center justify-center", children: "\u2315" }),
1236
+ startAdornment: /* @__PURE__ */ jsx11(Search, { style: { width: 18, height: 18 } }),
1228
1237
  placeholder: t("assets.search", "Search"),
1229
1238
  value: searchQuery,
1230
1239
  onChange: (e) => setSearchQuery(e.target.value),
1231
1240
  type: "text",
1232
- style: { padding: "1rem 0" }
1241
+ style: { padding: "1rem 0 0" }
1233
1242
  }
1234
1243
  )
1235
1244
  ] }),
1236
- /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(300px,1.5fr)_2fr] text-[var(--neutralLight3,#9392a1)]", children: [
1245
+ /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(300px,1.5fr)_2fr] gap-8 px-1 text-[var(--neutralLight3,#9392a1)]", children: [
1237
1246
  /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variable", "Variable") }),
1238
1247
  /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.description", "Description") })
1239
1248
  ] }),
1240
1249
  /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
1241
- 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: [
1250
+ allowedVariableNames.length > 0 && filteredAllowedVariables?.map((variableName) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] items-start gap-8 border-b border-white/10 px-1 py-4 active:opacity-80", onClick: () => insertVariable(variableName), children: [
1242
1251
  renderVariableToken(variableName, getVariableVisualType(variableName), true),
1243
- /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words", children: getAllowedVariableDescription(variableName) })
1252
+ /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: getAllowedVariableDescription(variableName) })
1244
1253
  ] }, variableName)),
1245
- 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: [
1254
+ filteredSystemVariables?.map((variableKey) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] items-start gap-8 border-b border-white/10 px-1 py-4 active:opacity-80", onClick: () => insertVariable(variableKey), children: [
1246
1255
  renderVariableToken(variableKey, getVariableVisualType(variableKey)),
1247
- /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
1256
+ /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
1248
1257
  ] }, variableKey))
1249
1258
  ] })
1250
1259
  ] })
package/package.json CHANGED
@@ -1,60 +1,64 @@
1
1
  {
2
- "name": "@lumiastream/ui",
3
- "version": "0.2.1",
4
- "author": "Lumia Stream",
5
- "license": "ISC",
6
- "description": "Lumia UI Kit",
7
- "type": "module",
8
- "main": "dist/index.js",
9
- "module": "dist/index.js",
10
- "types": "dist/index.d.ts",
11
- "files": [
12
- "dist"
13
- ],
14
- "exports": {
15
- ".": {
16
- "types": "./dist/index.d.ts",
17
- "import": "./dist/index.js"
18
- }
19
- },
20
- "peerDependencies": {
21
- "@codemirror/autocomplete": "^6.0.0",
22
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
23
- "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
24
- },
25
- "devDependencies": {
26
- "@codemirror/autocomplete": "^6.20.1",
27
- "@storybook/builder-vite": "^10.2.17",
28
- "@storybook/react-vite": "^10.2.17",
29
- "@tailwindcss/postcss": "^4.2.1",
30
- "@tailwindcss/vite": "^4.2.1",
31
- "@types/node": "^25.5.0",
32
- "@types/react": "^19.2.14",
33
- "postcss": "^8.5.8",
34
- "sass-embedded": "^1.99.0",
35
- "storybook": "^10.2.17",
36
- "tailwindcss": "^4.2.1",
37
- "tsup": "^8.5.1",
38
- "typescript": "^5.9.3",
39
- "vite": "^8.0.8"
40
- },
41
- "dependencies": {
42
- "@emotion/react": "^11.14.0",
43
- "@emotion/styled": "^11.14.1",
44
- "@lumiastream/lumia-translations": "1.14.9",
45
- "@lumiastream/lumia-types": "^3.2.7",
46
- "@mui/icons-material": "^9.0.0",
47
- "@mui/material": "^9.0.0",
48
- "classnames": "^2.5.1",
49
- "globals": "^17.4.0",
50
- "react-best-gradient-color-picker": "^3.0.14",
51
- "react-hook-form": "^7.73.1"
52
- },
53
- "scripts": {
54
- "start": "storybook dev -p 6006",
55
- "build": "tsup src/index.ts",
56
- "build-storybook": "storybook build",
57
- "watch": "tsup src/index.ts --watch",
58
- "release": "changeset && changeset tag && pnpm build && pnpm publish"
59
- }
60
- }
2
+ "name": "@lumiastream/ui",
3
+ "version": "0.2.3",
4
+ "author": "Lumia Stream",
5
+ "license": "ISC",
6
+ "description": "Lumia UI Kit",
7
+ "packageManager": "pnpm@10.32.1",
8
+ "type": "module",
9
+ "main": "dist/index.js",
10
+ "module": "dist/index.js",
11
+ "types": "dist/index.d.ts",
12
+ "files": [
13
+ "dist"
14
+ ],
15
+ "exports": {
16
+ ".": {
17
+ "types": "./dist/index.d.ts",
18
+ "import": "./dist/index.js"
19
+ }
20
+ },
21
+ "scripts": {
22
+ "start": "storybook dev -p 6006",
23
+ "build": "tsup src/index.ts",
24
+ "build-storybook": "storybook build",
25
+ "watch": "tsup src/index.ts --watch",
26
+ "release": "changeset && changeset tag && pnpm build && pnpm publish",
27
+ "prepublishOnly": "pnpm build",
28
+ "postpublish": "pnpm store prune && node ./scripts/postpublish-install.mjs"
29
+ },
30
+ "peerDependencies": {
31
+ "@codemirror/autocomplete": "^6.0.0",
32
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
33
+ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
34
+ },
35
+ "devDependencies": {
36
+ "@codemirror/autocomplete": "^6.20.1",
37
+ "@storybook/builder-vite": "^10.2.17",
38
+ "@storybook/react-vite": "^10.2.17",
39
+ "@tailwindcss/postcss": "^4.2.1",
40
+ "@tailwindcss/vite": "^4.2.1",
41
+ "@types/node": "^25.5.0",
42
+ "@types/react": "^19.2.14",
43
+ "@types/react-dom": "19.2.3",
44
+ "postcss": "^8.5.8",
45
+ "sass-embedded": "^1.99.0",
46
+ "storybook": "^10.2.17",
47
+ "tailwindcss": "^4.2.1",
48
+ "tsup": "^8.5.1",
49
+ "typescript": "^5.9.3",
50
+ "vite": "^8.0.8"
51
+ },
52
+ "dependencies": {
53
+ "@emotion/react": "^11.14.0",
54
+ "@emotion/styled": "^11.14.1",
55
+ "@lumiastream/lumia-translations": "1.15.3",
56
+ "@lumiastream/lumia-types": "^3.2.7",
57
+ "@mui/icons-material": "^9.0.0",
58
+ "@mui/material": "^9.0.0",
59
+ "classnames": "^2.5.1",
60
+ "globals": "^17.4.0",
61
+ "react-best-gradient-color-picker": "^3.0.14",
62
+ "react-hook-form": "^7.73.1"
63
+ }
64
+ }