@berenjena/react-dev-panel 1.0.3 → 2.0.0
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.
- package/README.md +32 -171
- package/dist/assets/BooleanControl.css +1 -1
- package/dist/assets/ButtonControl.css +1 -1
- package/dist/assets/ButtonGroupControl.css +1 -1
- package/dist/assets/ColorControl.css +1 -1
- package/dist/assets/ControlRenderer.css +1 -1
- package/dist/assets/DevPanel.css +1 -1
- package/dist/assets/EmptyContent.css +1 -1
- package/dist/assets/Input.css +1 -1
- package/dist/assets/MultiSelectControl.css +1 -0
- package/dist/assets/RangeControl.css +1 -1
- package/dist/assets/Section.css +1 -1
- package/dist/assets/Select.css +1 -1
- package/dist/assets/SeparatorControl.css +1 -1
- package/dist/assets/index.css +1 -1
- package/dist/components/ControlRenderer/ControlRenderer.js +38 -18
- package/dist/components/ControlRenderer/controls/BooleanControl/BooleanControl.d.ts +20 -4
- package/dist/components/ControlRenderer/controls/BooleanControl/BooleanControl.js +16 -14
- package/dist/components/ControlRenderer/controls/ButtonControl/ButtonControl.d.ts +22 -5
- package/dist/components/ControlRenderer/controls/ButtonControl/ButtonControl.js +2 -2
- package/dist/components/ControlRenderer/controls/ButtonGroupControl/ButtonGroupControl.d.ts +35 -0
- package/dist/components/ControlRenderer/controls/ButtonGroupControl/ButtonGroupControl.js +2 -2
- package/dist/components/ControlRenderer/controls/ColorControl/ColorControl.d.ts +13 -6
- package/dist/components/ControlRenderer/controls/ColorControl/ColorControl.js +61 -15
- package/dist/components/ControlRenderer/controls/ColorControl/types.d.ts +14 -0
- package/dist/components/ControlRenderer/controls/DateControl/DateControl.d.ts +17 -5
- package/dist/components/ControlRenderer/controls/DateControl/DateControl.js +12 -12
- package/dist/components/ControlRenderer/controls/MultiSelectControl/MultiSelectControl.d.ts +28 -0
- package/dist/components/ControlRenderer/controls/MultiSelectControl/MultiSelectControl.js +131 -0
- package/dist/components/ControlRenderer/controls/MultiSelectControl/index.d.ts +1 -0
- package/dist/components/ControlRenderer/controls/MultiSelectControl/index.js +4 -0
- package/dist/components/ControlRenderer/controls/MultiSelectControl/types.d.ts +11 -0
- package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.d.ts +26 -11
- package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.js +14 -14
- package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.d.ts +27 -11
- package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.js +19 -19
- package/dist/components/ControlRenderer/controls/SelectControl/SelectControl.d.ts +29 -5
- package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.d.ts +16 -7
- package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.js +6 -6
- package/dist/components/ControlRenderer/controls/TextControl/TextControl.d.ts +24 -13
- package/dist/components/ControlRenderer/controls/TextControl/TextControl.js +15 -15
- package/dist/components/ControlRenderer/controls/index.d.ts +2 -0
- package/dist/components/ControlRenderer/controls/index.js +1 -0
- package/dist/components/ControlRenderer/controls/types.d.ts +2 -0
- package/dist/components/DevPanel/DevPanel.js +45 -40
- package/dist/components/DevPanel/types.d.ts +26 -0
- package/dist/components/DevPanelPortal/DevPanelPortal.d.ts +8 -0
- package/dist/components/DevPanelPortal/DevPanelPortal.js +17 -0
- package/dist/components/DevPanelPortal/index.d.ts +1 -0
- package/dist/components/DevPanelPortal/index.js +4 -0
- package/dist/components/EmptyContent/EmptyContent.js +5 -5
- package/dist/components/Icon/index.d.ts +16 -0
- package/dist/components/Icon/index.js +31 -0
- package/dist/components/Input/Input.js +4 -4
- package/dist/components/Section/Section.js +17 -16
- package/dist/components/Select/Select.js +1 -1
- package/dist/components/index.d.ts +3 -2
- package/dist/components/index.js +8 -6
- package/dist/hooks/useDebounceCallback/index.d.ts +1 -0
- package/dist/hooks/useDebounceCallback/index.js +4 -0
- package/dist/hooks/useDebounceCallback/useDebounceCallback.d.ts +8 -0
- package/dist/hooks/useDebounceCallback/useDebounceCallback.js +17 -0
- package/dist/hooks/useDevPanel/useDevPanel.d.ts +10 -5
- package/dist/hooks/useDevPanel/useDevPanel.js +25215 -12
- package/dist/hooks/useDragAndDrop/useDragAndDrop.d.ts +5 -1
- package/dist/hooks/useDragAndDrop/useDragAndDrop.js +24 -24
- package/dist/index.d.ts +0 -1
- package/dist/index.js +2 -8
- package/dist/managers/DevPanelManager.d.ts +85 -0
- package/dist/managers/DevPanelManager.js +119 -0
- package/dist/managers/index.d.ts +1 -0
- package/dist/managers/index.js +4 -0
- package/dist/store/BaseStoreService.d.ts +90 -0
- package/dist/store/BaseStoreService.js +90 -0
- package/dist/store/SectionsStore.d.ts +40 -0
- package/dist/store/SectionsStore.js +114 -0
- package/dist/store/ThemeStore.d.ts +68 -0
- package/dist/store/ThemeStore.js +102 -0
- package/dist/store/{store.d.ts → UIStore.d.ts} +17 -35
- package/dist/store/UIStore.js +117 -0
- package/dist/store/index.d.ts +4 -1
- package/dist/store/index.js +16 -7
- package/package.json +12 -3
- package/dist/assets/index2.css +0 -1
- package/dist/components/Logger/index.d.ts +0 -20
- package/dist/components/Logger/index.js +0 -85
- package/dist/store/store.js +0 -239
package/README.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
# React Dev Panel
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
[
|
|
4
|
+
>)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
[](https://www.npmjs.com/package/@berenjena/react-dev-panel)
|
|
7
7
|
|
|
8
8
|
A powerful, type-safe React development panel that provides an intuitive interface for controlling component props, debugging state, and rapid prototyping during development.
|
|
9
9
|
|
|
@@ -11,27 +11,10 @@ A powerful, type-safe React development panel that provides an intuitive interfa
|
|
|
11
11
|
|
|
12
12
|
- 🎛️ **Rich Control Types** - Boolean, Number, Text, Select, Color, Range, Date, Button, and Separator controls
|
|
13
13
|
- 🎨 **Themeable** - Consistent design system with CSS custom properties
|
|
14
|
-
- 📱 **Responsive** - Adapts to different screen sizes and can be positioned anywhere
|
|
15
14
|
- ⌨️ **Keyboard Shortcuts** - Quick access with customizable hotkeys
|
|
16
|
-
- 🔄 **State Management** - Built-in state persistence
|
|
17
15
|
- 📖 **TypeScript First** - Full type safety and IntelliSense support
|
|
18
16
|
- 🚀 **Zero Dependencies** - Only requires React (peer dependency)
|
|
19
|
-
|
|
20
|
-
## 📊 Package Stats
|
|
21
|
-
|
|
22
|
-
- **Bundle Size**: ~35KB (minified)
|
|
23
|
-
- **Total Files**: 142
|
|
24
|
-
- **License**: MIT
|
|
25
|
-
|
|
26
|
-
## 🆕 What's New
|
|
27
|
-
|
|
28
|
-
### Recent Updates (v1.0.1+)
|
|
29
|
-
|
|
30
|
-
- **🔄 Zero External Dependencies**: Replaced Zustand with React's built-in `useSyncExternalStore` for state management
|
|
31
|
-
- **📊 Logger Component**: New floating, collapsible logger component for debugging object data in JSON format
|
|
32
|
-
- **⚡ Performance Optimizations**: Selective subscriptions for better re-render performance
|
|
33
|
-
- **🔧 Development Mode Improvements**: Removed development mode checks - panel now works in all environments
|
|
34
|
-
- **📝 Enhanced Documentation**: Comprehensive code documentation and better TypeScript support
|
|
17
|
+
- 📦 **Bundle Size**: >)
|
|
35
18
|
|
|
36
19
|
## 📦 Installation
|
|
37
20
|
|
|
@@ -106,6 +89,8 @@ function App() {
|
|
|
106
89
|
|
|
107
90
|
## 🎛️ Control Types
|
|
108
91
|
|
|
92
|
+
React Dev Panel provides rich control types for different data types. Here are some quick examples:
|
|
93
|
+
|
|
109
94
|
### Text Control
|
|
110
95
|
|
|
111
96
|
```tsx
|
|
@@ -114,7 +99,6 @@ function App() {
|
|
|
114
99
|
value: 'Hello World',
|
|
115
100
|
label: 'Message',
|
|
116
101
|
placeholder: 'Enter message...',
|
|
117
|
-
event: 'onBlur', // or 'onChange'
|
|
118
102
|
onChange: (value: string) => setValue(value),
|
|
119
103
|
}
|
|
120
104
|
```
|
|
@@ -128,7 +112,6 @@ function App() {
|
|
|
128
112
|
label: 'Count',
|
|
129
113
|
min: 0,
|
|
130
114
|
max: 100,
|
|
131
|
-
step: 1,
|
|
132
115
|
onChange: (value: number) => setValue(value),
|
|
133
116
|
}
|
|
134
117
|
```
|
|
@@ -144,61 +127,6 @@ function App() {
|
|
|
144
127
|
}
|
|
145
128
|
```
|
|
146
129
|
|
|
147
|
-
### Select Control
|
|
148
|
-
|
|
149
|
-
```tsx
|
|
150
|
-
{
|
|
151
|
-
type: 'select',
|
|
152
|
-
value: 'option1',
|
|
153
|
-
label: 'Choose Option',
|
|
154
|
-
options: ['option1', 'option2', 'option3'],
|
|
155
|
-
// or with labels:
|
|
156
|
-
options: [
|
|
157
|
-
{ label: 'Option 1', value: 'opt1' },
|
|
158
|
-
{ label: 'Option 2', value: 'opt2' },
|
|
159
|
-
],
|
|
160
|
-
onChange: (value: string) => setValue(value),
|
|
161
|
-
}
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
### Color Control
|
|
165
|
-
|
|
166
|
-
```tsx
|
|
167
|
-
{
|
|
168
|
-
type: 'color',
|
|
169
|
-
value: '#ff6200',
|
|
170
|
-
label: 'Brand Color',
|
|
171
|
-
onChange: (value: string) => setValue(value),
|
|
172
|
-
}
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
### Range Control
|
|
176
|
-
|
|
177
|
-
```tsx
|
|
178
|
-
{
|
|
179
|
-
type: 'range',
|
|
180
|
-
value: 50,
|
|
181
|
-
label: 'Volume',
|
|
182
|
-
min: 0,
|
|
183
|
-
max: 100,
|
|
184
|
-
step: 1,
|
|
185
|
-
onChange: (value: number) => setValue(value),
|
|
186
|
-
}
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
### Date Control
|
|
190
|
-
|
|
191
|
-
```tsx
|
|
192
|
-
{
|
|
193
|
-
type: 'date',
|
|
194
|
-
value: '2025-07-26',
|
|
195
|
-
label: 'Start Date',
|
|
196
|
-
min: '2025-01-01',
|
|
197
|
-
max: '2025-12-31',
|
|
198
|
-
onChange: (value: string) => setValue(value),
|
|
199
|
-
}
|
|
200
|
-
```
|
|
201
|
-
|
|
202
130
|
### Button Control
|
|
203
131
|
|
|
204
132
|
```tsx
|
|
@@ -209,63 +137,22 @@ function App() {
|
|
|
209
137
|
}
|
|
210
138
|
```
|
|
211
139
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
```tsx
|
|
215
|
-
{
|
|
216
|
-
type: 'buttonGroup',
|
|
217
|
-
label: 'Actions',
|
|
218
|
-
buttons: [
|
|
219
|
-
{ label: 'Save', onClick: handleSave },
|
|
220
|
-
{ label: 'Load', onClick: handleLoad },
|
|
221
|
-
{ label: 'Reset', onClick: handleReset, disabled: true },
|
|
222
|
-
],
|
|
223
|
-
}
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
### Separator Control
|
|
227
|
-
|
|
228
|
-
```tsx
|
|
229
|
-
// Line separator
|
|
230
|
-
{ type: 'separator' }
|
|
231
|
-
|
|
232
|
-
// Space separator
|
|
233
|
-
{ type: 'separator', style: 'space' }
|
|
234
|
-
|
|
235
|
-
// Label separator
|
|
236
|
-
{ type: 'separator', style: 'label', label: 'Advanced Settings' }
|
|
237
|
-
```
|
|
140
|
+
**📖 [View all control types and detailed documentation →](./guides/CONTROLS.md)**
|
|
238
141
|
|
|
239
142
|
## 🎨 Styling and Theming
|
|
240
143
|
|
|
241
|
-
The dev panel uses CSS custom properties for easy theming:
|
|
144
|
+
The dev panel uses CSS custom properties for easy theming. Here's a quick example:
|
|
242
145
|
|
|
243
146
|
```css
|
|
244
147
|
:root {
|
|
245
148
|
--dev-panel-background-color: #1a1a1a;
|
|
246
149
|
--dev-panel-text-color: #ffffff;
|
|
247
|
-
--dev-panel-text-color-highlight: #ffffff;
|
|
248
|
-
--dev-panel-text-color-muted: #888888;
|
|
249
150
|
--dev-panel-accent-color: #ff6200;
|
|
250
151
|
--dev-panel-border-color: #333333;
|
|
251
|
-
--dev-panel-input-background-color: #2a2a2a;
|
|
252
|
-
--dev-panel-highlight-color: #ff620020;
|
|
253
|
-
--dev-panel-font-size-xs: 11px;
|
|
254
|
-
--dev-panel-font-size-sm: 12px;
|
|
255
|
-
--dev-panel-spacing-xs: 4px;
|
|
256
|
-
--dev-panel-spacing-sm: 8px;
|
|
257
|
-
--dev-panel-spacing-md: 16px;
|
|
258
|
-
--dev-panel-border-radius: 4px;
|
|
259
|
-
--dev-panel-inputs-height: 24px;
|
|
260
|
-
--dev-panel-transition: all 0.2s ease;
|
|
261
152
|
}
|
|
262
153
|
```
|
|
263
154
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
```tsx
|
|
267
|
-
<DevPanel panelTitle="Custom Panel" position={{ x: 100, y: 100 }} defaultExpanded={true} />
|
|
268
|
-
```
|
|
155
|
+
**📖 [Complete theming guide and customization options →](./guides/STYLING.md)**
|
|
269
156
|
|
|
270
157
|
## ⌨️ Keyboard Shortcuts
|
|
271
158
|
|
|
@@ -312,32 +199,16 @@ function App() {
|
|
|
312
199
|
}
|
|
313
200
|
```
|
|
314
201
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
```tsx
|
|
318
|
-
useDevPanel("Settings", {
|
|
319
|
-
mode: {
|
|
320
|
-
type: "select",
|
|
321
|
-
value: mode,
|
|
322
|
-
options: ["simple", "advanced"],
|
|
323
|
-
onChange: setMode,
|
|
324
|
-
},
|
|
325
|
-
// Only show advanced settings when mode is 'advanced'
|
|
326
|
-
...(mode === "advanced" && {
|
|
327
|
-
separator1: { type: "separator", style: "label", label: "Advanced" },
|
|
328
|
-
complexValue: {
|
|
329
|
-
type: "range",
|
|
330
|
-
value: complexValue,
|
|
331
|
-
min: 0,
|
|
332
|
-
max: 1000,
|
|
333
|
-
onChange: setComplexValue,
|
|
334
|
-
},
|
|
335
|
-
}),
|
|
336
|
-
});
|
|
337
|
-
```
|
|
202
|
+
**📖 [Advanced patterns, state management, and optimization →](./guides/ADVANCED_USAGE.md)**
|
|
338
203
|
|
|
339
204
|
### Event Handling Options
|
|
340
205
|
|
|
206
|
+
React Dev Panel supports two different event handling strategies for input controls:
|
|
207
|
+
|
|
208
|
+
**onChange Event**: Provides real-time updates as the user types or interacts with the control. This is ideal for immediate feedback and live previews, but may trigger more frequent re-renders.
|
|
209
|
+
|
|
210
|
+
**onBlur Event**: Updates the value only when the user finishes interacting with the control (loses focus). This approach is more performance-friendly for expensive operations and provides a better user experience when dealing with API calls or heavy computations.
|
|
211
|
+
|
|
341
212
|
```tsx
|
|
342
213
|
{
|
|
343
214
|
type: 'text',
|
|
@@ -354,6 +225,19 @@ useDevPanel("Settings", {
|
|
|
354
225
|
}
|
|
355
226
|
```
|
|
356
227
|
|
|
228
|
+
## 📚 Documentation
|
|
229
|
+
|
|
230
|
+
### Core Guides
|
|
231
|
+
|
|
232
|
+
- **[Control Types](./guides/CONTROLS.md)** - Complete guide to all available controls
|
|
233
|
+
- **[Event Handling](./guides/EVENT_HANDLING.md)** - onChange vs onBlur strategies and best practices
|
|
234
|
+
- **[Styling & Theming](./guides/STYLING.md)** - Customization, themes, and responsive design
|
|
235
|
+
- **[Advanced Usage](./guides/ADVANCED_USAGE.md)** - Complex patterns, state management, and optimization
|
|
236
|
+
|
|
237
|
+
### Development
|
|
238
|
+
|
|
239
|
+
- **[Development Guide](./guides/DEVELOPMENT.md)** - Setup, contributing, and project structure
|
|
240
|
+
|
|
357
241
|
## 📚 API Reference
|
|
358
242
|
|
|
359
243
|
### `useDevPanel(groupName: string, controls: ControlsGroup)`
|
|
@@ -385,28 +269,9 @@ Registers keyboard shortcuts.
|
|
|
385
269
|
|
|
386
270
|
## 🛠️ Development
|
|
387
271
|
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
- Node.js 18+
|
|
391
|
-
- React 18+
|
|
272
|
+
Want to contribute or set up the project locally?
|
|
392
273
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
```bash
|
|
396
|
-
git clone https://github.com/Berenjenas/react-dev-panel.git
|
|
397
|
-
cd react-dev-panel
|
|
398
|
-
npm install
|
|
399
|
-
```
|
|
400
|
-
|
|
401
|
-
### Available Scripts
|
|
402
|
-
|
|
403
|
-
```bash
|
|
404
|
-
npm run dev # Start development server
|
|
405
|
-
npm run build # Build for production
|
|
406
|
-
npm run storybook # Start Storybook
|
|
407
|
-
npm run test # Run tests
|
|
408
|
-
npm run lint # Lint code
|
|
409
|
-
```
|
|
274
|
+
**📖 [Development setup, contributing guidelines, and project structure →](./guides/DEVELOPMENT.md)**
|
|
410
275
|
|
|
411
276
|
## 📖 Storybook
|
|
412
277
|
|
|
@@ -428,10 +293,6 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
|
|
|
428
293
|
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
429
294
|
5. Open a Pull Request
|
|
430
295
|
|
|
431
|
-
## 📄 License
|
|
432
|
-
|
|
433
|
-
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
434
|
-
|
|
435
296
|
## 🔗 Links
|
|
436
297
|
|
|
437
298
|
- [NPM Package](https://www.npmjs.com/package/@berenjena/react-dev-panel)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #6366f1;--dev-panel-accent-color-hover: #5855eb;--dev-panel-accent-color-active: #4f46e5;--dev-panel-accent-color-disabled: #6366f150;--dev-panel-primary-color: #6366f1;--dev-panel-primary-color-hover: #5855eb;--dev-panel-primary-color-active: #4f46e5;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #6366f1;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #6366f1;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-xs: 2px;--dev-panel-spacing-sm: 4px;--dev-panel-spacing-md: 8px;--dev-panel-spacing-lg: 12px;--dev-panel-spacing-xl: 16px;--dev-panel-spacing-2xl: 20px;--dev-panel-spacing-3xl: 24px;--dev-panel-spacing-4xl: 32px;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 320px;--dev-panel-min-width: 280px;--dev-panel-max-height: 80vh;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}._switch_1wuj3_132{--switch-width: 44px;--switch-height: 24px;--thumb-size: 20px;--thumb-margin: 1px;position:relative;display:inline-block;width:var(--switch-width);height:var(--switch-height)}._switch_1wuj3_132 input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}._switch_1wuj3_132 input:checked+._slider_1wuj3_150{background-color:var(--dev-panel-accent-color, #6366f1);border-color:var(--dev-panel-accent-color, #6366f1)}._switch_1wuj3_132 input:checked+._slider_1wuj3_150:before{left:calc(100% - var(--thumb-size) - var(--thumb-margin));background-color:var(--dev-panel-text-color-on-accent, #ffffff)}._switch_1wuj3_132 input:focus+._slider_1wuj3_150{box-shadow:0 0 0 3px #6366f133}._switch_1wuj3_132 input:focus:not(:focus-visible)+._slider_1wuj3_150{box-shadow:none}._switch_1wuj3_132 input:disabled+._slider_1wuj3_150{opacity:var(--dev-panel-opacity-50, .5);cursor:not-allowed}._switch_1wuj3_132 input:disabled+._slider_1wuj3_150:before{opacity:var(--dev-panel-opacity-70, .7)}._switch_1wuj3_132 ._slider_1wuj3_150{position:absolute;inset:0;background-color:var(--dev-panel-input-background-color, #0f172a);border:1px solid var(--dev-panel-input-border-color, #475569);border-radius:var(--dev-panel-border-radius-full, 9999px);transition:var(--dev-panel-transition, all .2s cubic-bezier(.4, 0, .2, 1));cursor:pointer}._switch_1wuj3_132 ._slider_1wuj3_150:before{content:"";position:absolute;top:var(--thumb-margin);left:var(--thumb-margin);width:var(--thumb-size);height:var(--thumb-size);background-color:var(--dev-panel-text-color-muted, #94a3b8);border-radius:var(--dev-panel-border-radius-full, 9999px);transition:var(--dev-panel-transition, all .2s cubic-bezier(.4, 0, .2, 1));box-shadow:var(--dev-panel-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}._switch_1wuj3_132 ._slider_1wuj3_150:hover{border-color:var(--dev-panel-input-border-color-hover, #64748b)}._switch_1wuj3_132 ._slider_1wuj3_150:hover:before{box-shadow:var(--dev-panel-shadow-md, 0 4px 6px rgba(0, 0, 0, .1))}._switch_1wuj3_132 input:disabled+._slider_1wuj3_150:hover{border-color:var(--dev-panel-input-border-color, #475569)}._switch_1wuj3_132 input:disabled+._slider_1wuj3_150:hover:before{box-shadow:var(--dev-panel-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #6366f1;--dev-panel-accent-color-hover: #5855eb;--dev-panel-accent-color-active: #4f46e5;--dev-panel-accent-color-disabled: #6366f150;--dev-panel-primary-color: #6366f1;--dev-panel-primary-color-hover: #5855eb;--dev-panel-primary-color-active: #4f46e5;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #6366f1;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #6366f1;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-xs: 2px;--dev-panel-spacing-sm: 4px;--dev-panel-spacing-md: 8px;--dev-panel-spacing-lg: 12px;--dev-panel-spacing-xl: 16px;--dev-panel-spacing-2xl: 20px;--dev-panel-spacing-3xl: 24px;--dev-panel-spacing-4xl: 32px;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 320px;--dev-panel-min-width: 280px;--dev-panel-max-height: 80vh;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}._button_b8ouv_132{display:inline-flex;align-items:center;justify-content:center;gap:var(--dev-panel-spacing-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-lg);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-medium);line-height:var(--dev-panel-line-height-tight);border:var(--dev-panel-input-border-width) solid transparent;border-radius:var(--dev-panel-border-radius);background:transparent;color:inherit;text-decoration:none;white-space:nowrap;user-select:none;transition:var(--dev-panel-transition);cursor:pointer;width:100%;min-height:var(--dev-panel-button-height);border-color:var(--dev-panel-accent-color);background-color:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent);text-align:center}._button_b8ouv_132:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;pointer-events:none}._button_b8ouv_132:hover:not(:disabled){background-color:var(--dev-panel-accent-color-hover);border-color:var(--dev-panel-accent-color-hover);box-shadow:var(--dev-panel-shadow-md)}._button_b8ouv_132:active:not(:disabled){background-color:var(--dev-panel-accent-color-active);border-color:var(--dev-panel-accent-color-active);box-shadow:var(--dev-panel-shadow-sm)}._button_b8ouv_132:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--dev-panel-accent-color) 30%,transparent)}._button_b8ouv_132:focus:not(:focus-visible){box-shadow:none}._button_b8ouv_132:disabled{background-color:var(--dev-panel-accent-color-disabled);border-color:var(--dev-panel-accent-color-disabled);color:var(--dev-panel-text-color-disabled);transform:none;box-shadow:none;opacity:var(--dev-panel-opacity-50);cursor:not-allowed}._button_b8ouv_132._secondary_b8ouv_189{background-color:transparent;color:var(--dev-panel-accent-color);border-color:var(--dev-panel-accent-color)}._button_b8ouv_132._secondary_b8ouv_189:hover:not(:disabled){background-color:color-mix(in srgb,var(--dev-panel-accent-color) 10%,transparent);color:var(--dev-panel-accent-color-hover);border-color:var(--dev-panel-accent-color-hover)}._button_b8ouv_132._secondary_b8ouv_189:active:not(:disabled){background-color:color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent);color:var(--dev-panel-accent-color-active);border-color:var(--dev-panel-accent-color-active)}._button_b8ouv_132._secondary_b8ouv_189:disabled{background-color:transparent;color:var(--dev-panel-text-color-disabled);border-color:var(--dev-panel-border-color)}._button_b8ouv_132._small_b8ouv_209{min-height:var(--dev-panel-button-height-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);font-size:var(--dev-panel-font-size-xs)}._button_b8ouv_132._large_b8ouv_214{min-height:var(--dev-panel-button-height-lg);padding:var(--dev-panel-spacing-lg) var(--dev-panel-spacing-xl);font-size:var(--dev-panel-font-size-md)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #6366f1;--dev-panel-accent-color-hover: #5855eb;--dev-panel-accent-color-active: #4f46e5;--dev-panel-accent-color-disabled: #6366f150;--dev-panel-primary-color: #6366f1;--dev-panel-primary-color-hover: #5855eb;--dev-panel-primary-color-active: #4f46e5;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #6366f1;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #6366f1;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-xs: 2px;--dev-panel-spacing-sm: 4px;--dev-panel-spacing-md: 8px;--dev-panel-spacing-lg: 12px;--dev-panel-spacing-xl: 16px;--dev-panel-spacing-2xl: 20px;--dev-panel-spacing-3xl: 24px;--dev-panel-spacing-4xl: 32px;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 320px;--dev-panel-min-width: 280px;--dev-panel-max-height: 80vh;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}._buttonGroupContainer_1642u_132{scrollbar-width:thin;scrollbar-color:var(--dev-panel-scrollbar-thumb-color) var(--dev-panel-scrollbar-track-color);width:100%;display:flex;gap:var(--dev-panel-spacing-sm);background:var(--dev-panel-surface-color);border:1px solid var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius);padding:var(--dev-panel-spacing-sm);overflow-x:auto;container-type:inline-size}._buttonGroupContainer_1642u_132::-webkit-scrollbar{width:var(--dev-panel-scrollbar-width);height:var(--dev-panel-scrollbar-width)}._buttonGroupContainer_1642u_132::-webkit-scrollbar-track{background:var(--dev-panel-scrollbar-track-color);border-radius:var(--dev-panel-border-radius-md)}._buttonGroupContainer_1642u_132::-webkit-scrollbar-thumb{background:var(--dev-panel-scrollbar-thumb-color);border-radius:var(--dev-panel-border-radius-md);transition:var(--dev-panel-transition-fast)}._buttonGroupContainer_1642u_132::-webkit-scrollbar-thumb:hover{background:var(--dev-panel-scrollbar-thumb-hover-color)}._buttonGroupContainer_1642u_132::-webkit-scrollbar-corner{background:var(--dev-panel-scrollbar-track-color)}@container (max-width: 300px){._buttonGroupContainer_1642u_132{gap:var(--dev-panel-spacing-xs);padding:var(--dev-panel-spacing-xs)}._buttonGroupContainer_1642u_132 ._button_1642u_132{padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-md);font-size:var(--dev-panel-font-size-xs)}}._buttonGroupContainer_1642u_132 ._button_1642u_132{padding:0;margin:0;border:none;background:none;font:inherit;color:inherit;flex:0 0 auto;min-width:max-content;background:var(--dev-panel-input-background-color);color:var(--dev-panel-text-color);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-medium);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-lg);border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);transition:var(--dev-panel-transition);min-height:var(--dev-panel-inputs-height);display:flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer}._buttonGroupContainer_1642u_132 ._button_1642u_132:hover:not(:disabled):not(._active_1642u_200){background:var(--dev-panel-surface-color-hover);border-color:var(--dev-panel-input-border-color-hover)}._buttonGroupContainer_1642u_132 ._button_1642u_132:active:not(:disabled){transform:scale(.98)}._buttonGroupContainer_1642u_132 ._button_1642u_132:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px #6366f133}._buttonGroupContainer_1642u_132 ._button_1642u_132:focus:not(:focus-visible){box-shadow:none}._buttonGroupContainer_1642u_132 ._button_1642u_132._active_1642u_200{background:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent);border-color:var(--dev-panel-accent-color)}._buttonGroupContainer_1642u_132 ._button_1642u_132._active_1642u_200:hover{background:var(--dev-panel-accent-color-hover);border-color:var(--dev-panel-accent-color-hover)}._buttonGroupContainer_1642u_132 ._button_1642u_132:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;background:var(--dev-panel-surface-color)}._buttonGroupContainer_1642u_132._compact_1642u_229 ._button_1642u_132{padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-md);font-size:var(--dev-panel-font-size-xs);min-height:calc(var(--dev-panel-inputs-height) - 4px)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._container_1oo6z_1{display:grid;grid-template-columns:var(--dev-panel-inputs-height-sm) 1fr;gap:var(--dev-panel-spacing-md);align-items:start}._container_1oo6z_1 ._colorPreview_1oo6z_7{overflow:hidden;width:var(--dev-panel-inputs-height-sm);height:var(--dev-panel-inputs-height-sm);cursor:pointer;border-radius:var(--dev-panel-border-radius);border:1px solid var(--dev-panel-input-border-color);transition:var(--dev-panel-transition);position:relative;background-color:var(--dev-panel-input-border-color);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0px}._container_1oo6z_1 ._colorPreview_1oo6z_7:hover{border-color:var(--dev-panel-input-border-color-hover);transform:scale(1.05)}._container_1oo6z_1 ._colorPreview_1oo6z_7:focus-within{border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent)}._container_1oo6z_1 ._colorPreview_1oo6z_7:active{transform:scale(.95)}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]{background:none;border:0;width:150%;height:150%;margin:-25%;cursor:pointer;opacity:0}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]:focus{outline:none}._container_1oo6z_1 ._colorPreview_1oo6z_7 input[type=color]:disabled{cursor:not-allowed;opacity:.5}._container_1oo6z_1 ._inputSection_1oo6z_47{display:flex;flex-direction:column;gap:var(--dev-panel-spacing-sm)}._container_1oo6z_1 ._errorMessage_1oo6z_52{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-danger-color);font-weight:var(--dev-panel-font-weight-medium);grid-column:1/-1;margin-top:var(--dev-panel-spacing-xs)}._container_1oo6z_1 ._presets_1oo6z_59{display:flex;flex-wrap:wrap;gap:var(--dev-panel-spacing-xs);margin-top:var(--dev-panel-spacing-xs)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65{width:24px;height:24px;border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius-sm);cursor:pointer;transition:var(--dev-panel-transition);background:none;padding:0}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:hover{border-color:var(--dev-panel-input-border-color-hover);transform:scale(1.1)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:active{transform:scale(.95)}._container_1oo6z_1 ._presets_1oo6z_59 ._presetColor_1oo6z_65:disabled{cursor:not-allowed;opacity:.5;transform:none!important}._container_1oo6z_1:has(input:disabled){opacity:.6;pointer-events:none}._container_1oo6z_1:has(input:disabled) ._colorPreview_1oo6z_7{cursor:not-allowed;transform:none!important}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._controlRendererContainer_1s60v_1{display:grid}._controlRendererContainer_1s60v_1 ._controlContainer_1s60v_4{gap:var(--dev-panel-spacing-md);display:grid;align-items:center;color:var(--dev-panel-text-color);padding:var(--dev-panel-spacing-xs);border-radius:var(--dev-panel-border-radius);transition:var(--dev-panel-transition)}._controlRendererContainer_1s60v_1 ._controlContainer_1s60v_4._hoverable_1s60v_13:hover{background:var(--dev-panel-surface-color-hover)}._controlRendererContainer_1s60v_1 ._controlContainer_1s60v_4:not(._fullWidth_1s60v_16){grid-template-columns:120px 1fr}._controlRendererContainer_1s60v_1 ._controlContainer_1s60v_4._fullWidth_1s60v_16 ._label_1s60v_19{margin-bottom:var(--dev-panel-spacing-sm)}._controlRendererContainer_1s60v_1 ._controlContainer_1s60v_4 ._controlWrapper_1s60v_22{display:flex;align-items:center}._controlRendererContainer_1s60v_1 ._controlContainer_1s60v_4 ._controlWrapper_1s60v_22._justifyStart_1s60v_26{justify-content:flex-start}._controlRendererContainer_1s60v_1 ._controlContainer_1s60v_4 ._controlWrapper_1s60v_22:not(._justifyStart_1s60v_26){justify-content:flex-end}._controlRendererContainer_1s60v_1 ._controlContainer_1s60v_4 ._label_1s60v_19{text-align:start;font-weight:var(--dev-panel-font-weight-medium);font-size:var(--dev-panel-font-size-sm);color:var(--dev-panel-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--dev-panel-line-height-tight)}._controlRendererContainer_1s60v_1 ._description_1s60v_42{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color-muted);line-height:var(--dev-panel-line-height-normal);padding-inline:var(--dev-panel-spacing-xs);margin-top:var(--dev-panel-spacing-sm);font-style:italic;text-align:right}._controlRendererContainer_1s60v_1 ._loading_1s60v_51{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color-muted);text-align:center;padding:var(--dev-panel-spacing-lg);display:flex;align-items:center;justify-content:center;gap:var(--dev-panel-spacing-sm)}._controlRendererContainer_1s60v_1 ._loading_1s60v_51:before{content:"";width:12px;height:12px;border:2px solid var(--dev-panel-border-color);border-top:2px solid var(--dev-panel-accent-color);border-radius:var(--dev-panel-border-radius-full);animation:_spin_1s60v_1 1s linear infinite}._controlRendererContainer_1s60v_1 ._error_1s60v_70{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-error-color);text-align:center;padding:var(--dev-panel-spacing-lg);background:color-mix(in srgb,var(--dev-panel-error-color) 10%,transparent);border:1px solid color-mix(in srgb,var(--dev-panel-error-color) 30%,transparent);border-radius:var(--dev-panel-border-radius);margin:var(--dev-panel-spacing-sm) 0}@keyframes _spin_1s60v_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
package/dist/assets/DevPanel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #6366f1;--dev-panel-accent-color-hover: #5855eb;--dev-panel-accent-color-active: #4f46e5;--dev-panel-accent-color-disabled: #6366f150;--dev-panel-primary-color: #6366f1;--dev-panel-primary-color-hover: #5855eb;--dev-panel-primary-color-active: #4f46e5;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #6366f1;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #6366f1;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-xs: 2px;--dev-panel-spacing-sm: 4px;--dev-panel-spacing-md: 8px;--dev-panel-spacing-lg: 12px;--dev-panel-spacing-xl: 16px;--dev-panel-spacing-2xl: 20px;--dev-panel-spacing-3xl: 24px;--dev-panel-spacing-4xl: 32px;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 320px;--dev-panel-min-width: 280px;--dev-panel-max-height: 80vh;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}._devPanelContainer_vacct_132{scrollbar-width:thin;scrollbar-color:var(--dev-panel-scrollbar-thumb-color) var(--dev-panel-scrollbar-track-color);position:fixed;z-index:var(--dev-panel-z-index);border-radius:var(--dev-panel-border-radius);box-shadow:var(--dev-panel-shadow);width:var(--dev-panel-max-width);min-width:var(--dev-panel-min-width);user-select:none;font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);line-height:var(--dev-panel-line-height-normal);touch-action:none;background:var(--dev-panel-foreground-color);border:1px solid var(--dev-panel-border-color)}._devPanelContainer_vacct_132::-webkit-scrollbar{width:var(--dev-panel-scrollbar-width);height:var(--dev-panel-scrollbar-width)}._devPanelContainer_vacct_132::-webkit-scrollbar-track{background:var(--dev-panel-scrollbar-track-color);border-radius:var(--dev-panel-border-radius-md)}._devPanelContainer_vacct_132::-webkit-scrollbar-thumb{background:var(--dev-panel-scrollbar-thumb-color);border-radius:var(--dev-panel-border-radius-md);transition:var(--dev-panel-transition-fast)}._devPanelContainer_vacct_132::-webkit-scrollbar-thumb:hover{background:var(--dev-panel-scrollbar-thumb-hover-color)}._devPanelContainer_vacct_132::-webkit-scrollbar-corner{background:var(--dev-panel-scrollbar-track-color)}._devPanelContainer_vacct_132 *{box-sizing:border-box}._devPanelContainer_vacct_132 ._header_vacct_171{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:var(--dev-panel-spacing-md) var(--dev-panel-spacing-lg);background:var(--dev-panel-foreground-color);color:var(--dev-panel-text-color);cursor:move;border-bottom:1px solid var(--dev-panel-border-color);height:var(--dev-panel-header-height);border-radius:var(--dev-panel-border-radius) var(--dev-panel-border-radius) 0 0;z-index:1}._devPanelContainer_vacct_132 ._title_vacct_186{font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-semibold);display:flex;align-items:center;gap:var(--dev-panel-spacing-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dev-panel-text-color)}._devPanelContainer_vacct_132 ._button_vacct_197{background:none;border:none;color:var(--dev-panel-text-color-muted);font-size:var(--dev-panel-font-size-md);cursor:pointer;padding:var(--dev-panel-spacing-sm);border-radius:var(--dev-panel-border-radius-md);transition:var(--dev-panel-transition);display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}._devPanelContainer_vacct_132 ._button_vacct_197:hover{background:var(--dev-panel-surface-color-hover);color:var(--dev-panel-text-color)}._devPanelContainer_vacct_132 ._button_vacct_197:active{transform:scale(.95);background:var(--dev-panel-surface-color-active)}._devPanelContainer_vacct_132 ._button_vacct_197:focus{outline:2px solid var(--dev-panel-accent-color);outline-offset:2px}._devPanelContainer_vacct_132 ._button_vacct_197:focus:not(:focus-visible){outline:none}._devPanelContainer_vacct_132 ._button_vacct_197>svg{display:block;width:16px;height:16px;transition:transform var(--dev-panel-transition)}._devPanelContainer_vacct_132 ._button_vacct_197>svg._collapsed_vacct_233{transform:rotate(180deg)}._devPanelContainer_vacct_132 ._button_vacct_197>svg path{fill:currentColor}._content_vacct_240{max-height:calc(var(--dev-panel-max-height) - var(--dev-panel-header-height));background-color:var(--dev-panel-background-color);border-radius:0 0 var(--dev-panel-border-radius) var(--dev-panel-border-radius);overflow-x:hidden;overflow-y:auto;max-height:var(--dev-panel-max-height)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._empty_1bkns_1{text-align:center;color:var(--dev-panel-text-color-muted);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);line-height:var(--dev-panel-line-height-relaxed);padding:var(--dev-panel-spacing-4xl) var(--dev-panel-spacing-xl)}._empty_1bkns_1 ._icon_1bkns_9{width:48px;height:48px;margin:0 auto var(--dev-panel-spacing-xl);opacity:var(--dev-panel-opacity-50);color:var(--dev-panel-text-color-muted)}._empty_1bkns_1 ._title_1bkns_16{font-size:var(--dev-panel-font-size-md);font-weight:var(--dev-panel-font-weight-semibold);color:var(--dev-panel-text-color-secondary);margin-bottom:var(--dev-panel-spacing-md)}._empty_1bkns_1 ._description_1bkns_22{margin-bottom:var(--dev-panel-spacing-lg)}._empty_1bkns_1 code{background:var(--dev-panel-surface-color);color:var(--dev-panel-accent-color);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);border-radius:var(--dev-panel-border-radius-md);font-family:Monaco,Menlo,Ubuntu Mono,Courier New,monospace;font-size:var(--dev-panel-font-size-xs);border:1px solid var(--dev-panel-border-color);font-weight:var(--dev-panel-font-weight-medium)}._empty_1bkns_1 ._cta_1bkns_35{margin-top:var(--dev-panel-spacing-xl)}._empty_1bkns_1 ._cta_1bkns_35 ._button_1bkns_38{display:inline-flex;align-items:center;gap:var(--dev-panel-spacing-sm);padding:var(--dev-panel-spacing-md) var(--dev-panel-spacing-lg);background:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent);border:none;border-radius:var(--dev-panel-border-radius);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-medium);cursor:pointer;transition:var(--dev-panel-transition);text-decoration:none}._empty_1bkns_1 ._cta_1bkns_35 ._button_1bkns_38:hover{background:var(--dev-panel-accent-color-hover);transform:translateY(-1px)}._empty_1bkns_1 ._cta_1bkns_35 ._button_1bkns_38:active{transform:translateY(0)}
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #6366f1;--dev-panel-accent-color-hover: #5855eb;--dev-panel-accent-color-active: #4f46e5;--dev-panel-accent-color-disabled: #6366f150;--dev-panel-primary-color: #6366f1;--dev-panel-primary-color-hover: #5855eb;--dev-panel-primary-color-active: #4f46e5;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #6366f1;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #6366f1;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-xs: 2px;--dev-panel-spacing-sm: 4px;--dev-panel-spacing-md: 8px;--dev-panel-spacing-lg: 12px;--dev-panel-spacing-xl: 16px;--dev-panel-spacing-2xl: 20px;--dev-panel-spacing-3xl: 24px;--dev-panel-spacing-4xl: 32px;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 320px;--dev-panel-min-width: 280px;--dev-panel-max-height: 80vh;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}._input_pspvf_132{display:block;width:100%;height:var(--dev-panel-inputs-height-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);line-height:var(--dev-panel-line-height-normal);color:var(--dev-panel-input-text-color);background-color:var(--dev-panel-input-background-color);border:var(--dev-panel-input-border-width) solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);transition:var(--dev-panel-transition);cursor:text}._input_pspvf_132::placeholder{color:var(--dev-panel-input-placeholder-color)}._input_pspvf_132:hover:not(:disabled){background-color:var(--dev-panel-input-background-color-hover);border-color:var(--dev-panel-input-border-color-hover)}._input_pspvf_132:focus{outline:none;background-color:var(--dev-panel-input-background-color-focus);border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px #6366f133}._input_pspvf_132:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;background-color:var(--dev-panel-surface-color);border-color:var(--dev-panel-border-color)}._input_pspvf_132::placeholder{color:var(--dev-panel-input-placeholder-color);opacity:1}._input_pspvf_132[type=date]{cursor:pointer}._input_pspvf_132[type=date]::-webkit-calendar-picker-indicator{color:currentColor;filter:invert(1);cursor:pointer}._input_pspvf_132[type=date]::-moz-calendar-picker-indicator{color:currentColor;filter:invert(1);cursor:pointer}._input_pspvf_132[type=number]{-moz-appearance:textfield;appearance:textfield}._input_pspvf_132[type=number]::-webkit-outer-spin-button,._input_pspvf_132[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._multiselect_1agkw_1{position:relative;width:100%}._trigger_1agkw_6{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--dev-panel-inputs-height);border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);background-color:var(--dev-panel-input-background-color);color:var(--dev-panel-input-text-color);padding:0 var(--dev-panel-spacing-md);transition:var(--dev-panel-transition);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);cursor:pointer}._trigger_1agkw_6:hover:not(:disabled){border-color:var(--dev-panel-input-border-color-hover);background-color:var(--dev-panel-input-background-color-hover)}._trigger_1agkw_6:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent)}._trigger_1agkw_6:disabled{cursor:not-allowed;opacity:var(--dev-panel-opacity-50);background-color:var(--dev-panel-surface-color)}._trigger_1agkw_6._open_1agkw_36{border-color:var(--dev-panel-input-border-color-focus)}._value_1agkw_40{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dev-panel-input-text-color);font-size:var(--dev-panel-font-size-sm)}._value_1agkw_40._placeholder_1agkw_49{color:var(--dev-panel-input-placeholder-color)}._arrow_1agkw_53{display:block;width:16px;height:16px;margin-left:var(--dev-panel-spacing-sm);transition:var(--dev-panel-transition);flex-shrink:0}._open_1agkw_36 ._arrow_1agkw_53{transform:rotate(180deg)}._arrow_1agkw_53 path{fill:var(--dev-panel-text-color-muted)}._dropdownPortal_1agkw_68{position:fixed;z-index:9999}._dropdown_1agkw_68{scrollbar-width:thin;scrollbar-color:var(--dev-panel-scrollbar-thumb-color) var(--dev-panel-scrollbar-track-color);max-height:200px;background-color:var(--dev-panel-foreground-color);border:1px solid var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius);box-shadow:var(--dev-panel-shadow-lg);overflow-y:auto;animation:_dropdownFadeIn_1agkw_1 .15s ease-out}._dropdown_1agkw_68::-webkit-scrollbar{width:var(--dev-panel-scrollbar-width);height:var(--dev-panel-scrollbar-width)}._dropdown_1agkw_68::-webkit-scrollbar-track{background:var(--dev-panel-scrollbar-track-color);border-radius:var(--dev-panel-border-radius-md)}._dropdown_1agkw_68::-webkit-scrollbar-thumb{background:var(--dev-panel-scrollbar-thumb-color);border-radius:var(--dev-panel-border-radius-md);transition:var(--dev-panel-transition-fast)}._dropdown_1agkw_68::-webkit-scrollbar-thumb:hover{background:var(--dev-panel-scrollbar-thumb-hover-color)}._dropdown_1agkw_68::-webkit-scrollbar-corner{background:var(--dev-panel-scrollbar-track-color)}@keyframes _dropdownFadeIn_1agkw_1{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}._option_1agkw_115{display:flex;align-items:center;padding:var(--dev-panel-spacing-md);user-select:none;transition:var(--dev-panel-transition);cursor:pointer;border-bottom:1px solid var(--dev-panel-border-color)}._option_1agkw_115:last-child{border-bottom:none}._option_1agkw_115:hover:not(._disabled_1agkw_127){background-color:var(--dev-panel-surface-color-hover)}._option_1agkw_115:active:not(._disabled_1agkw_127){background-color:var(--dev-panel-surface-color-active)}._checkbox_1agkw_134{position:absolute;opacity:0;pointer-events:none}._checkbox_1agkw_134:checked~._checkmark_1agkw_139{background-color:var(--dev-panel-accent-color);border-color:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent);opacity:1}._checkbox_1agkw_134:checked~._checkmark_1agkw_139 svg{opacity:1}._checkmark_1agkw_139{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:var(--dev-panel-spacing-md);border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius-sm);transition:var(--dev-panel-transition);flex-shrink:0;opacity:0}._checkmark_1agkw_139 svg{width:14px;height:14px;fill:currentColor;opacity:0;transition:var(--dev-panel-transition)}._label_1agkw_170{flex:1;font-size:var(--dev-panel-font-size-sm);color:var(--dev-panel-text-color);font-family:var(--dev-panel-font-family)}._disabled_1agkw_127{opacity:var(--dev-panel-opacity-50);cursor:not-allowed!important}._disabled_1agkw_127 ._label_1agkw_170{color:var(--dev-panel-text-color-disabled)}._disabled_1agkw_127 ._checkmark_1agkw_139{border-color:var(--dev-panel-border-color)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._container_lg827_1{display:grid;grid-template-columns:1fr auto;gap:var(--dev-panel-spacing-md);align-items:center;width:100%}._range_lg827_9{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--dev-panel-border-radius-full);background:var(--dev-panel-input-background-color);border:1px solid var(--dev-panel-input-border-color);outline:none;cursor:pointer;transition:var(--dev-panel-transition)}._range_lg827_9:hover{border-color:var(--dev-panel-input-border-color-hover)}._range_lg827_9:focus{border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--dev-panel-accent-color) 20%,transparent)}._range_lg827_9::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:var(--dev-panel-border-radius-full);background:var(--dev-panel-accent-color);cursor:pointer;border:2px solid var(--dev-panel-foreground-color);box-shadow:var(--dev-panel-shadow-md);transition:var(--dev-panel-transition)}._range_lg827_9::-webkit-slider-thumb:hover{transform:scale(1.1);background:var(--dev-panel-accent-color-hover);box-shadow:var(--dev-panel-shadow-lg)}._range_lg827_9::-webkit-slider-thumb:active{transform:scale(.95);background:var(--dev-panel-accent-color-active)}._range_lg827_9::-moz-range-thumb{width:20px;height:20px;border-radius:var(--dev-panel-border-radius-full);background:var(--dev-panel-accent-color);cursor:pointer;border:2px solid var(--dev-panel-foreground-color);box-shadow:var(--dev-panel-shadow-md);transition:var(--dev-panel-transition)}._range_lg827_9::-moz-range-thumb:hover{transform:scale(1.1);background:var(--dev-panel-accent-color-hover)}._range_lg827_9::-moz-range-thumb:active{transform:scale(.95);background:var(--dev-panel-accent-color-active)}._range_lg827_9::-moz-range-track{width:100%;height:6px;border-radius:var(--dev-panel-border-radius-full);background:var(--dev-panel-input-background-color);border:1px solid var(--dev-panel-input-border-color)}._range_lg827_9::-ms-track{width:100%;height:6px;background:transparent;border-color:transparent;color:transparent}._range_lg827_9::-ms-fill-lower{background:var(--dev-panel-accent-color);border-radius:var(--dev-panel-border-radius-full)}._range_lg827_9::-ms-fill-upper{background:var(--dev-panel-input-background-color);border-radius:var(--dev-panel-border-radius-full)}._range_lg827_9::-ms-thumb{width:20px;height:20px;border-radius:var(--dev-panel-border-radius-full);background:var(--dev-panel-accent-color);cursor:pointer;border:2px solid var(--dev-panel-foreground-color);box-shadow:var(--dev-panel-shadow-md)}._range_lg827_9:disabled{cursor:not-allowed;opacity:var(--dev-panel-opacity-50)}._range_lg827_9:disabled::-webkit-slider-thumb{cursor:not-allowed;background:var(--dev-panel-text-color-disabled)}._range_lg827_9:disabled::-moz-range-thumb{cursor:not-allowed;background:var(--dev-panel-text-color-disabled)}._range_lg827_9:disabled::-ms-thumb{cursor:not-allowed;background:var(--dev-panel-text-color-disabled)}._value_lg827_115{font-size:var(--dev-panel-font-size-sm);color:var(--dev-panel-text-color);font-weight:var(--dev-panel-font-weight-medium);width:4ch;text-align:right;user-select:none;padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);background:var(--dev-panel-input-background-color);border:1px solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);font-family:var(--dev-panel-font-family)}
|
package/dist/assets/Section.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._section_plx7y_1{padding:var(--dev-panel-spacing-md) var(--dev-panel-spacing-lg);border-bottom:1px solid var(--dev-panel-border-color)}._section_plx7y_1:last-child{border-bottom:none;margin-bottom:0}._section_plx7y_1 ._header_plx7y_9{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:var(--dev-panel-transition);padding:var(--dev-panel-spacing-sm) 0;border-radius:var(--dev-panel-border-radius-md)}._section_plx7y_1 ._header_plx7y_9:hover{background-color:var(--dev-panel-surface-color-hover)}._section_plx7y_1 ._header_plx7y_9:focus{outline:2px solid var(--dev-panel-accent-color);outline-offset:2px}._section_plx7y_1 ._header_plx7y_9:focus:not(:focus-visible){outline:none}._section_plx7y_1 ._header_plx7y_9 ._title_plx7y_28{font-size:var(--dev-panel-font-size-sm);font-weight:var(--dev-panel-font-weight-bold);color:var(--dev-panel-text-color);text-transform:uppercase;letter-spacing:.5px}._section_plx7y_1 ._header_plx7y_9 ._toggle_plx7y_35{color:var(--dev-panel-text-color-muted);transition:var(--dev-panel-transition)}._section_plx7y_1 ._header_plx7y_9 ._toggle_plx7y_35>svg{display:block;width:16px;height:16px;transition:transform var(--dev-panel-transition)}._section_plx7y_1 ._header_plx7y_9 ._toggle_plx7y_35>svg._collapsed_plx7y_45{transform:rotate(90deg)}._section_plx7y_1 ._header_plx7y_9 ._toggle_plx7y_35>svg path{fill:currentColor}._section_plx7y_1 ._header_plx7y_9 ._toggle_plx7y_35:hover{color:var(--dev-panel-text-color)}._section_plx7y_1 ._content_plx7y_54{position:relative;padding-left:var(--dev-panel-spacing-md);margin-top:var(--dev-panel-spacing-md);display:grid;grid-template-columns:100%;gap:var(--dev-panel-spacing-md);transition:opacity var(--dev-panel-transition-slow)}._section_plx7y_1 ._content_plx7y_54:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--dev-panel-border-color);border-radius:var(--dev-panel-border-radius-full)}._section_plx7y_1 ._content_plx7y_54._collapsed_plx7y_45{opacity:var(--dev-panel-opacity-50)}
|
package/dist/assets/Select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #6366f1;--dev-panel-accent-color-hover: #5855eb;--dev-panel-accent-color-active: #4f46e5;--dev-panel-accent-color-disabled: #6366f150;--dev-panel-primary-color: #6366f1;--dev-panel-primary-color-hover: #5855eb;--dev-panel-primary-color-active: #4f46e5;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #6366f1;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #6366f1;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-xs: 2px;--dev-panel-spacing-sm: 4px;--dev-panel-spacing-md: 8px;--dev-panel-spacing-lg: 12px;--dev-panel-spacing-xl: 16px;--dev-panel-spacing-2xl: 20px;--dev-panel-spacing-3xl: 24px;--dev-panel-spacing-4xl: 32px;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 320px;--dev-panel-min-width: 280px;--dev-panel-max-height: 80vh;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}._select_ia86w_132{display:block;width:100%;height:var(--dev-panel-inputs-height-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);line-height:var(--dev-panel-line-height-normal);color:var(--dev-panel-input-text-color);background-color:var(--dev-panel-input-background-color);border:var(--dev-panel-input-border-width) solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);transition:var(--dev-panel-transition);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--dev-panel-spacing-md) center;background-repeat:no-repeat;background-size:16px 16px;padding-right:calc(var(--dev-panel-spacing-md) + 20px)}._select_ia86w_132::placeholder{color:var(--dev-panel-input-placeholder-color)}._select_ia86w_132:hover:not(:disabled){background-color:var(--dev-panel-input-background-color-hover);border-color:var(--dev-panel-input-border-color-hover)}._select_ia86w_132:focus{outline:none;background-color:var(--dev-panel-input-background-color-focus);border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px #6366f133}._select_ia86w_132:disabled{opacity:var(--dev-panel-opacity-50);cursor:not-allowed;background-color:var(--dev-panel-surface-color);border-color:var(--dev-panel-border-color)}._select_ia86w_132 option{background-color:var(--dev-panel-input-background-color);color:var(--dev-panel-input-text-color);padding:var(--dev-panel-spacing-sm)}._select_ia86w_132 option:checked{background-color:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-on-accent)}._select_ia86w_132 option:hover{background-color:var(--dev-panel-surface-color-hover)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._line_174q4_1{width:100%;height:1px;background:linear-gradient(to right,transparent,var(--dev-panel-border-color),transparent);margin:var(--dev-panel-spacing-lg) 0;opacity:var(--dev-panel-opacity-60)}._space_174q4_9{height:var(--dev-panel-spacing-xl);width:100%}._labelContainer_174q4_14{position:relative;display:flex;align-items:center}._labelContainer_174q4_14:before{content:"";flex:1;height:1px;background:linear-gradient(to right,transparent,var(--dev-panel-border-color) 50%);opacity:var(--dev-panel-opacity-60)}._labelContainer_174q4_14:after{content:"";flex:1;height:1px;background:linear-gradient(to left,transparent,var(--dev-panel-border-color) 50%);opacity:var(--dev-panel-opacity-60)}._label_174q4_14{font-size:var(--dev-panel-font-size-xs);font-weight:var(--dev-panel-font-weight-bold);color:var(--dev-panel-text-color-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);background:var(--dev-panel-background-color);border-radius:var(--dev-panel-border-radius-full);border:1px solid var(--dev-panel-border-color);margin-top:18px}
|