@emporix/cockpit-component-library 1.0.0 → 1.0.2

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 CHANGED
@@ -64,6 +64,37 @@ If the above methods don't work, copy the CSS file from `node_modules/@emporix/c
64
64
 
65
65
  ## Components
66
66
 
67
+ Current exported components:
68
+
69
+ - `PrimaryButton`
70
+ - `SecondaryButton`
71
+ - `TertiaryButton`
72
+ - `ContrastButton`
73
+ - `Tabs`
74
+ - `RichTextEditor`
75
+ - `Spinner`
76
+ - `Breadcrumb`
77
+ - `Dropdown`
78
+ - `MultiSelect`
79
+ - `InputText`
80
+ - `SelectButton`
81
+ - `Card`
82
+ - `IconCard`
83
+ - `FileUploadDropzone`
84
+ - `Chip`
85
+ - `AlertBox`
86
+ - `SideMenu`
87
+ - `TopNav`
88
+ - `Toast` (plus `ToastProvider` and `useToast`)
89
+ - `Modal`
90
+ - `ConfirmDialog`
91
+ - `ProductTable`
92
+ - `ProductTableIconAddButton`
93
+ - `OrderTable`
94
+ - `OrderStatusTag`
95
+ - `Wizard`
96
+ - `Timeline`
97
+
67
98
  ### PrimaryButton
68
99
 
69
100
  A simple, focused button component for primary actions.
@@ -325,6 +356,224 @@ const tabs: TabItem[] = [
325
356
  | label | string | Display label for the tab |
326
357
  | content | ReactNode | Content to display when active |
327
358
 
359
+ ### SecondaryButton
360
+
361
+ Secondary action button variant with API similar to `PrimaryButton`.
362
+
363
+ ```tsx
364
+ import { SecondaryButton } from '@emporix/cockpit-component-library'
365
+
366
+ <SecondaryButton label="Cancel" />
367
+ ```
368
+
369
+ ### TertiaryButton
370
+
371
+ Low-emphasis button for tertiary actions.
372
+
373
+ ```tsx
374
+ import { TertiaryButton } from '@emporix/cockpit-component-library'
375
+
376
+ <TertiaryButton label="Learn more" />
377
+ ```
378
+
379
+ ### ContrastButton
380
+
381
+ Button variant designed for high-contrast contexts.
382
+
383
+ ```tsx
384
+ import { ContrastButton } from '@emporix/cockpit-component-library'
385
+
386
+ <ContrastButton label="Open" />
387
+ ```
388
+
389
+ ### Dropdown
390
+
391
+ Single-select dropdown component with optional filtering, editable mode, and templating.
392
+
393
+ ```tsx
394
+ import { Dropdown } from '@emporix/cockpit-component-library'
395
+
396
+ <Dropdown options={options} value={value} onChange={(e) => setValue(e.value)} />
397
+ ```
398
+
399
+ ### MultiSelect
400
+
401
+ Multi-value selection component for choosing multiple options from a list.
402
+
403
+ ```tsx
404
+ import { MultiSelect } from '@emporix/cockpit-component-library'
405
+
406
+ <MultiSelect options={options} value={value} onChange={(e) => setValue(e.value)} />
407
+ ```
408
+
409
+ ### RichTextEditor
410
+
411
+ Rich text input component for formatted content editing.
412
+
413
+ ```tsx
414
+ import { RichTextEditor } from '@emporix/cockpit-component-library'
415
+
416
+ <RichTextEditor value={value} onChange={setValue} />
417
+ ```
418
+
419
+ ### Spinner
420
+
421
+ Loading indicator component with configurable size.
422
+
423
+ ```tsx
424
+ import { Spinner } from '@emporix/cockpit-component-library'
425
+
426
+ <Spinner size="md" />
427
+ ```
428
+
429
+ ### Breadcrumb
430
+
431
+ Navigation breadcrumb for representing hierarchical page location.
432
+
433
+ ```tsx
434
+ import { Breadcrumb } from '@emporix/cockpit-component-library'
435
+
436
+ <Breadcrumb items={items} />
437
+ ```
438
+
439
+ ### IconCard
440
+
441
+ Card-like container with a prominent icon/content layout.
442
+
443
+ ```tsx
444
+ import { IconCard } from '@emporix/cockpit-component-library'
445
+
446
+ <IconCard title="Title" description="Description" icon={<span />} />
447
+ ```
448
+
449
+ ### FileUploadDropzone
450
+
451
+ Dropzone component for drag-and-drop file uploads with type constraints.
452
+
453
+ ```tsx
454
+ import { FileUploadDropzone } from '@emporix/cockpit-component-library'
455
+
456
+ <FileUploadDropzone acceptedTypes={['image']} onFilesSelected={handleFiles} />
457
+ ```
458
+
459
+ ### AlertBox
460
+
461
+ Inline alert component for success, info, warning, and error messages.
462
+
463
+ ```tsx
464
+ import { AlertBox } from '@emporix/cockpit-component-library'
465
+
466
+ <AlertBox variant="info" title="Heads up" />
467
+ ```
468
+
469
+ ### SideMenu
470
+
471
+ Composable side navigation menu with brand, nav items, and footer slots.
472
+
473
+ ```tsx
474
+ import { SideMenu } from '@emporix/cockpit-component-library'
475
+
476
+ <SideMenu>{/* ... */}</SideMenu>
477
+ ```
478
+
479
+ ### TopNav
480
+
481
+ Top navigation/header component for page-level actions and context.
482
+
483
+ ```tsx
484
+ import { TopNav } from '@emporix/cockpit-component-library'
485
+
486
+ <TopNav title="Dashboard" />
487
+ ```
488
+
489
+ ### Toast
490
+
491
+ Toast notification primitives: `Toast`, `ToastProvider`, and `useToast`.
492
+
493
+ ```tsx
494
+ import { ToastProvider, useToast } from '@emporix/cockpit-component-library'
495
+ ```
496
+
497
+ ### Modal
498
+
499
+ Dialog modal component for focused workflows and confirmations.
500
+
501
+ ```tsx
502
+ import { Modal } from '@emporix/cockpit-component-library'
503
+
504
+ <Modal isOpen={open} onClose={onClose} title="Edit item" />
505
+ ```
506
+
507
+ ### ConfirmDialog
508
+
509
+ Preset confirmation dialog for destructive or high-impact actions.
510
+
511
+ ```tsx
512
+ import { ConfirmDialog } from '@emporix/cockpit-component-library'
513
+
514
+ <ConfirmDialog open={open} onConfirm={onConfirm} onCancel={onCancel} />
515
+ ```
516
+
517
+ ### ProductTable
518
+
519
+ Data table component focused on product records and common actions.
520
+
521
+ ```tsx
522
+ import { ProductTable } from '@emporix/cockpit-component-library'
523
+
524
+ <ProductTable items={items} columns={columns} />
525
+ ```
526
+
527
+ ### ProductTableIconAddButton
528
+
529
+ Compact icon button variant used with `ProductTable` add flows.
530
+
531
+ ```tsx
532
+ import { ProductTableIconAddButton } from '@emporix/cockpit-component-library'
533
+
534
+ <ProductTableIconAddButton onClick={onAdd} />
535
+ ```
536
+
537
+ ### OrderTable
538
+
539
+ Data table for order rows and order-oriented workflows.
540
+
541
+ ```tsx
542
+ import { OrderTable } from '@emporix/cockpit-component-library'
543
+
544
+ <OrderTable rows={rows} />
545
+ ```
546
+
547
+ ### OrderStatusTag
548
+
549
+ Status badge component for order state presentation.
550
+
551
+ ```tsx
552
+ import { OrderStatusTag } from '@emporix/cockpit-component-library'
553
+
554
+ <OrderStatusTag status="submitted" />
555
+ ```
556
+
557
+ ### Wizard
558
+
559
+ Step-based workflow component for multi-stage forms and processes.
560
+
561
+ ```tsx
562
+ import { Wizard } from '@emporix/cockpit-component-library'
563
+
564
+ <Wizard steps={steps} />
565
+ ```
566
+
567
+ ### Timeline
568
+
569
+ Chronological event list component for activity/history views.
570
+
571
+ ```tsx
572
+ import { Timeline } from '@emporix/cockpit-component-library'
573
+
574
+ <Timeline events={events} />
575
+ ```
576
+
328
577
  ## Theming with CSS Variables
329
578
 
330
579
  The component library uses CSS variables for easy theming. You can customize the appearance by overriding these variables:
@@ -0,0 +1 @@
1
+ @charset "UTF-8";._primaryButton_1fi9p_1{background:var(--color-primary);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);min-height:var(--button-height);height:var(--button-height);padding:0 var(--button-padding-x);border-radius:var(--button-radius);box-sizing:border-box;font-family:var(--font-family-sans);font-style:normal;font-weight:600;font-size:var(--font-size-button);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--color-button-on-primary);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;white-space:nowrap}._primaryButton_1fi9p_1:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 3px var(--color-focus-ring)}._primaryButton_1fi9p_1:focus:not(:focus-visible){outline:none}._primaryButton_1fi9p_1 svg{width:16px;height:16px;flex-shrink:0}._primaryButton_1fi9p_1:disabled{cursor:not-allowed;background:var(--color-button-disabled-bg);border-color:transparent;color:var(--color-button-disabled-fg);box-shadow:none}._primaryButton_1fi9p_1:not(:disabled):hover{background:var(--color-primary-hover)}._primaryButton_1fi9p_1:not(:disabled):active{transform:translateY(.5px)}._primaryButtonDisabled_1fi9p_51{cursor:not-allowed;background:var(--color-button-disabled-bg);border-color:transparent;color:var(--color-button-disabled-fg);box-shadow:none}._primaryButtonDisabled_1fi9p_51:hover{background:var(--color-button-disabled-bg);color:var(--color-button-disabled-fg)}._spinner_1fi9p_63{width:18px!important;height:18px!important;animation:_spin_1fi9p_63 1s linear infinite}._iconLeft_1fi9p_69,._iconRight_1fi9p_70,._iconOnly_1fi9p_71{display:inline-flex;align-items:center;justify-content:center}._primaryButton_1fi9p_1:has(>._iconOnly_1fi9p_71){width:var(--button-height);min-width:var(--button-height);padding:0}@keyframes _spin_1fi9p_63{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._secondaryButton_l9k9t_1{background:transparent;border:1px solid var(--color-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);min-height:var(--button-height);height:var(--button-height);padding:0 var(--button-padding-x);border-radius:var(--button-radius);box-sizing:border-box;font-family:var(--font-family-sans);font-style:normal;font-weight:600;font-size:var(--font-size-button);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--color-primary);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap}._secondaryButton_l9k9t_1:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 3px var(--color-focus-ring)}._secondaryButton_l9k9t_1:focus:not(:focus-visible){outline:none}._secondaryButton_l9k9t_1 svg{width:16px;height:16px;flex-shrink:0}._secondaryButton_l9k9t_1:disabled{cursor:not-allowed;background:var(--color-button-disabled-bg);border:1px solid var(--color-button-secondary-disabled-border);color:var(--color-button-disabled-fg);box-shadow:none}._secondaryButton_l9k9t_1:not(:disabled):hover{background:var(--color-button-secondary-hover-bg);border-color:var(--color-primary-hover);color:var(--color-primary-hover)}._secondaryButton_l9k9t_1:not(:disabled):active{transform:translateY(.5px)}._iconLeft_l9k9t_53,._iconRight_l9k9t_54,._iconOnly_l9k9t_55{display:inline-flex;align-items:center;justify-content:center}._secondaryButtonDisabled_l9k9t_61{cursor:not-allowed;background:var(--color-button-disabled-bg);border:1px solid var(--color-button-secondary-disabled-border);color:var(--color-button-disabled-fg);box-shadow:none}._secondaryButtonDisabled_l9k9t_61:hover{background:var(--color-button-disabled-bg);border-color:var(--color-button-secondary-disabled-border);color:var(--color-button-disabled-fg)}._secondaryButton_l9k9t_1:has(>._iconOnly_l9k9t_55){width:var(--button-height);min-width:var(--button-height);padding:0}._tertiaryButton_l2p3w_1{background:transparent;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);min-height:var(--button-height);height:var(--button-height);padding:0 var(--button-padding-x);border-radius:var(--button-radius);box-sizing:border-box;font-family:var(--font-family-sans);font-style:normal;font-weight:600;font-size:var(--font-size-button);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--color-primary);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap}._tertiaryButton_l2p3w_1:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 3px var(--color-focus-ring)}._tertiaryButton_l2p3w_1:focus:not(:focus-visible){outline:none}._tertiaryButton_l2p3w_1 svg{width:16px;height:16px;flex-shrink:0}._tertiaryButton_l2p3w_1:disabled{cursor:not-allowed;color:var(--color-button-disabled-fg);box-shadow:none}._tertiaryButton_l2p3w_1:not(:disabled):hover{color:var(--color-primary-hover);background:var(--color-button-secondary-hover-bg)}._tertiaryButton_l2p3w_1:not(:disabled):active{transform:translateY(.5px)}._iconLeft_l2p3w_51,._iconRight_l2p3w_52,._iconOnly_l2p3w_53{display:inline-flex;align-items:center;justify-content:center}._tertiaryButtonDisabled_l2p3w_59{cursor:not-allowed;color:var(--color-button-disabled-fg);box-shadow:none}._tertiaryButtonDisabled_l2p3w_59:hover{color:var(--color-button-disabled-fg)}._tertiaryButton_l2p3w_1:has(>._iconOnly_l2p3w_53){width:var(--button-height);min-width:var(--button-height);padding:0}._contrastButton_6r7h8_1{background:var(--color-bg-primary);border:1px solid var(--color-button-contrast-border);display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap-sm);min-height:var(--button-height-sm);height:var(--button-height-sm);padding:0 var(--button-padding-x-sm);border-radius:var(--button-radius);box-sizing:border-box;font-family:var(--font-family-sans);font-style:normal;font-weight:600;font-size:var(--font-size-button-sm);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--color-button-contrast-border);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap}._contrastButton_6r7h8_1:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 3px var(--color-focus-ring)}._contrastButton_6r7h8_1:focus:not(:focus-visible){outline:none}._contrastButton_6r7h8_1 svg{width:16px;height:16px;flex-shrink:0}._contrastButton_6r7h8_1:disabled{cursor:not-allowed;background:var(--color-button-disabled-bg);border-color:transparent;color:var(--color-button-disabled-fg);box-shadow:none}._contrastButton_6r7h8_1:not(:disabled):hover{background:var(--color-button-contrast-hover-bg);border-color:var(--color-button-contrast-hover-bg);color:var(--color-button-on-primary)}._contrastButton_6r7h8_1:not(:disabled):active{transform:translateY(.5px)}._iconLeft_6r7h8_53,._iconRight_6r7h8_54,._iconOnly_6r7h8_55{display:inline-flex;align-items:center;justify-content:center}._contrastButtonDisabled_6r7h8_61{cursor:not-allowed;background:var(--color-button-disabled-bg);border-color:transparent;color:var(--color-button-disabled-fg);box-shadow:none}._contrastButtonDisabled_6r7h8_61:hover{background:var(--color-button-disabled-bg);border-color:transparent;color:var(--color-button-disabled-fg)}._contrastButton_6r7h8_1:has(>._iconOnly_6r7h8_55){width:var(--button-height-sm);min-width:var(--button-height-sm);padding:0}._tabsContainer_xbhwy_1{display:flex;flex-direction:column;width:100%}._tabsHeader_xbhwy_7{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--color-border-light)}._tabItem_xbhwy_14{display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;background:none;border:none;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit}._tabItem_xbhwy_14:hover ._tabContent_xbhwy_30{background-color:var(--color-primary-subtle-bg, rgba(26, 115, 232, .04))}._tabItem_xbhwy_14:focus{outline:none}._tabItem_xbhwy_14:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}._tabContent_xbhwy_30{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:6px;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm) var(--border-radius-sm) 0 0;transition:background-color .15s ease}._tabLabel_xbhwy_52{font-family:inherit;font-size:var(--font-size-base);line-height:1.5;text-align:center;font-weight:var(--font-weight-normal);color:var(--color-text-secondary);transition:all .15s ease}._tabLine_xbhwy_62{width:100%;height:2px;background-color:transparent;transition:background-color .15s ease}._active_xbhwy_69 ._tabLabel_xbhwy_52{font-weight:var(--font-weight-semibold, 600);color:var(--color-primary)}._active_xbhwy_69 ._tabLine_xbhwy_62{background-color:var(--color-primary)}._inactive_xbhwy_77 ._tabLabel_xbhwy_52{font-weight:var(--font-weight-normal);color:var(--color-text-secondary)}._inactive_xbhwy_77 ._tabLine_xbhwy_62{background-color:transparent}._tabPanels_xbhwy_85{padding:var(--spacing-md) 0;background-color:transparent}._dropdown_175a9_1{position:relative;display:block;min-width:180px;width:100%;box-sizing:border-box}._label_175a9_9{display:inline-flex;align-items:center;gap:.25rem;font-weight:500;font-size:var(--font-size-sm);line-height:1.25;color:var(--color-text-secondary);margin-bottom:4px}._required_175a9_20{color:var(--color-chip-error-text, #dc2626);margin-left:2px}._trigger_175a9_25{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 .625rem;background:var(--color-bg-primary);border:1px solid var(--color-input-border);border-radius:var(--border-radius-sm);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;font-size:var(--font-size-base);color:var(--color-text-primary);gap:.375rem}._trigger_175a9_25:hover:not(:focus){border-color:var(--color-primary)}._trigger_175a9_25:focus{outline:0;border-color:var(--color-input-focus);box-shadow:var(--focus-ring-box-shadow)}._triggerDisabled_175a9_49{cursor:not-allowed;opacity:.6;background:var(--color-bg-secondary)}._triggerDisabled_175a9_49:hover{border-color:var(--color-input-border)}._triggerInput_175a9_58{flex:1;min-width:0;border:none;background:transparent;font-size:inherit;font-family:inherit;color:inherit;padding:0;outline:none}._triggerInput_175a9_58::placeholder{color:var(--color-text-secondary)}._triggerInput_175a9_58:disabled{cursor:not-allowed}._value_175a9_76{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._placeholder_175a9_84{color:var(--color-text-secondary)}._chevron_175a9_88{flex-shrink:0;color:var(--color-text-secondary);width:1rem;height:1rem;transition:transform .15s ease}._open_175a9_96 ._chevron_175a9_88{transform:rotate(180deg)}@keyframes _menuIn_175a9_1{0%{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _menuOut_175a9_1{0%{transform:translateY(0);opacity:1}to{transform:translateY(-6px);opacity:0}}._panel_175a9_120{position:absolute;top:calc(100% + 4px);left:0;right:0;width:100%;min-width:100%;box-sizing:border-box;z-index:1000;background:var(--color-bg-primary);border:1px solid var(--color-border-light);border-radius:var(--border-radius-md);box-shadow:var(--shadow-dropdown, 0 4px 16px rgba(0, 0, 0, .1));overflow-x:hidden;animation:_menuIn_175a9_1 .2s ease-out forwards}@keyframes _menuInTop_175a9_1{0%{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _menuOutTop_175a9_1{0%{transform:translateY(0);opacity:1}to{transform:translateY(6px);opacity:0}}._panelTop_175a9_157{top:auto;bottom:calc(100% + 4px);animation:_menuInTop_175a9_1 .2s ease-out forwards}._panelTop_175a9_157._panelClosing_175a9_163{animation:_menuOutTop_175a9_1 .12s ease-in forwards}._panelClosing_175a9_163{animation:_menuOut_175a9_1 .12s ease-in forwards}._filterWrapper_175a9_171{position:relative;padding:4px 6px;border-bottom:1px solid var(--color-border-light);box-sizing:border-box}._filterInput_175a9_178{width:100%;box-sizing:border-box;padding:4px 24px 4px 8px;border:1px solid var(--color-input-border);border-radius:var(--border-radius-sm);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-bg-primary)}._filterInput_175a9_178:focus{outline:0;border-color:var(--color-primary);box-shadow:var(--focus-ring-box-shadow)}._filterInput_175a9_178::placeholder{color:var(--color-text-secondary)}._filterIcon_175a9_197{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--color-text-secondary);width:14px;height:14px;pointer-events:none}._list_175a9_208{line-height:1rem;list-style:none;margin:0;padding:4px 0;max-height:220px;overflow-y:auto}._option_175a9_217{padding:6px 10px;cursor:pointer;font-size:var(--font-size-base);color:var(--color-text-primary);transition:background-color .1s ease;margin-bottom:0}._option_175a9_217:hover,._option_175a9_217:focus-visible{background:var(--color-bg-secondary)}._optionSelected_175a9_229{background:var(--color-dropdown-option-highlight)}._optionHighlighted_175a9_233{background:var(--color-bg-secondary)}._optionDisabled_175a9_237{cursor:not-allowed;opacity:.5;color:var(--color-text-secondary)}._optionDisabled_175a9_237:hover{background:transparent}._empty_175a9_246{padding:8px 10px;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:default}@keyframes _spin_175a9_271{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._loadingItem_175a9_261{display:flex;align-items:center;gap:6px;padding:6px 10px;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:default}._spinner_175a9_271{animation:_spin_175a9_271 .8s linear infinite;flex-shrink:0;width:14px;height:14px}._disabled_175a9_278 ._trigger_175a9_25:hover{border-color:var(--color-input-border)}._chip_qgxbp_1{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100%;padding:2px 8px;border-radius:4px;border:1px solid transparent;font-family:inherit;font-size:11px;font-weight:600;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}._chipSuccess_qgxbp_19{background:var(--color-chip-success-bg);color:var(--color-chip-success-text);border-color:var(--color-chip-success-border)}._chipWarning_qgxbp_25{background:var(--color-chip-warning-bg);color:var(--color-chip-warning-text);border-color:var(--color-chip-warning-border)}._chipInfo_qgxbp_31{background:var(--color-chip-info-bg);color:var(--color-chip-info-text);border-color:var(--color-chip-info-border)}._chipError_qgxbp_37{background:var(--color-chip-error-bg);color:var(--color-chip-error-text);border-color:var(--color-chip-error-border)}._root_1dryk_1{position:relative;display:block;min-width:180px;width:100%;box-sizing:border-box}._label_1dryk_9{display:inline-flex;align-items:center;gap:.25rem;font-weight:500;font-size:var(--font-size-sm);line-height:1.25;color:var(--color-text-secondary);margin-bottom:4px}._trigger_1dryk_20{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:4px 8px;background:var(--color-bg-primary);border:1px solid var(--color-input-border);border-radius:var(--border-radius-sm);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;font-size:var(--font-size-base);color:var(--color-text-primary);gap:.375rem}._trigger_1dryk_20:hover:not(:focus){border-color:var(--color-primary)}._trigger_1dryk_20:focus{outline:0;border-color:var(--color-input-focus);box-shadow:var(--focus-ring-box-shadow)}._triggerDisabled_1dryk_44{cursor:not-allowed;opacity:.6;background:var(--color-bg-secondary)}._chips_1dryk_50{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}._chip_1dryk_50{gap:4px;text-transform:none;max-width:100%}._chipLabel_1dryk_64{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._chipRemove_1dryk_70{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s}._chipRemove_1dryk_70:hover{opacity:1}._placeholder_1dryk_86{color:var(--color-text-secondary)}._chevron_1dryk_90{flex-shrink:0;color:var(--color-text-secondary);width:1rem;height:1rem;transition:transform .15s ease}._open_1dryk_98 ._chevron_1dryk_90{transform:rotate(180deg)}._panel_1dryk_102{box-sizing:border-box;z-index:10000;background:var(--color-bg-primary);border:1px solid var(--color-border-light);border-radius:var(--border-radius-md);box-shadow:var(--shadow-dropdown, 0 4px 16px rgba(0, 0, 0, .1));overflow-x:hidden}._list_1dryk_112{list-style:none;margin:0;padding:4px 0;max-height:220px;overflow-y:auto}._option_1dryk_120{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:var(--font-size-base);color:var(--color-text-primary);transition:background-color .1s ease}._option_1dryk_120:hover{background:var(--color-bg-secondary)}._optionSelected_1dryk_134{background:var(--color-dropdown-option-highlight, rgba(26, 115, 232, .06))}._optionFocused_1dryk_138{outline:2px solid var(--color-primary, #1a73e8);outline-offset:-2px}._optionCheckbox_1dryk_143{pointer-events:none;accent-color:var(--color-primary, #1a73e8)}._empty_1dryk_148{padding:8px 10px;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:default}._disabled_1dryk_155 ._trigger_1dryk_20:hover{border-color:var(--color-input-border)}._inputText_aq6o5_1{position:relative;display:block;min-width:180px;width:100%;box-sizing:border-box}._label_aq6o5_9{display:inline-flex;align-items:center;gap:.25rem;font-weight:500;font-size:var(--font-size-sm);line-height:1.25;color:var(--color-text-secondary);margin-bottom:4px}._required_aq6o5_20{color:var(--color-chip-error-text, #dc2626);margin-left:2px}._tooltipIcon_aq6o5_25{display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-secondary);cursor:help}._tooltipIcon_aq6o5_25 svg{width:14px;height:14px}._input_aq6o5_1{display:block;width:100%;height:32px;padding:0 .625rem;background:var(--color-bg-primary);border:1px solid var(--color-input-border);border-radius:var(--border-radius-sm);font-size:var(--font-size-base);font-family:inherit;color:var(--color-text-primary);transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}._input_aq6o5_1::placeholder{color:var(--color-input-placeholder)}._input_aq6o5_1:hover:not(:disabled):not(:focus){border-color:var(--color-primary)}._input_aq6o5_1:focus{outline:0;border-color:var(--color-input-focus);box-shadow:var(--focus-ring-box-shadow)}._input_aq6o5_1:disabled{cursor:not-allowed;opacity:.6;background:var(--color-bg-secondary)}._input_aq6o5_1:disabled:hover{border-color:var(--color-input-border)}._inputTextarea_aq6o5_71{height:auto;min-height:32px;padding:6px .625rem;resize:vertical}._inputTextDisabled_aq6o5_78 ._input_aq6o5_1:hover{border-color:var(--color-input-border)}._selectButton_1xelm_1{display:inline-flex;flex-wrap:wrap;gap:0;font-size:var(--font-size-base);color:var(--color-text-primary)}._selectButtonDisabled_1xelm_9{opacity:.6;pointer-events:none}._selectButtonInvalid_1xelm_14 ._button_1xelm_14{border-color:var(--color-primary)}._button_1xelm_14{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 .625rem;background:var(--color-bg-primary);border:1px solid var(--color-input-border);font-size:inherit;font-family:inherit;color:var(--color-text-primary);cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}._button_1xelm_14:hover:not(:disabled){z-index:1;border-color:var(--color-primary);background:var(--color-bg-secondary)}._button_1xelm_14:focus{outline:0;z-index:1}._button_1xelm_14:disabled{cursor:not-allowed;opacity:.5}._buttonFirst_1xelm_47{border-radius:var(--border-radius-sm) 0 0 var(--border-radius-sm)}._buttonLast_1xelm_51{border-radius:0 var(--border-radius-sm) var(--border-radius-sm) 0}._button_1xelm_14:only-child{border-radius:var(--border-radius-sm)}._buttonSelected_1xelm_59{background:var(--color-primary);border-color:var(--color-primary);color:#fff}._buttonSelected_1xelm_59:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}._buttonSelected_1xelm_59:focus{box-shadow:var(--focus-ring-box-shadow)}._button_1xelm_14+._button_1xelm_14{margin-left:-1px}._buttonSelected_1xelm_59+._button_1xelm_14,._button_1xelm_14+._buttonSelected_1xelm_59{margin-left:-1px}._card_13psy_1{display:flex;flex-direction:column;gap:var(--card-section-gap);background:var(--color-bg-primary);border:1px solid var(--color-card-border);border-radius:var(--card-radius);padding:var(--card-padding);color:var(--color-text-primary);box-sizing:border-box}._body_13psy_13{display:flex;flex-direction:column;gap:var(--card-body-gap);min-width:0}._header_13psy_20{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--card-meta-gap);min-height:32px}._headerLeading_13psy_29{display:flex;align-items:center;min-width:0;gap:8px}._headerActions_13psy_36{display:flex;flex-direction:row;align-items:center;gap:var(--card-meta-gap);flex-shrink:0}._title_13psy_44{margin:0;font-family:inherit;font-size:16px;font-weight:600;line-height:1.4;color:var(--color-card-heading)}._meta_13psy_53{display:flex;flex-direction:column;gap:var(--card-meta-gap)}._metaRow_13psy_59{display:flex;flex-direction:row;align-items:flex-start;gap:var(--card-meta-gap);font-family:inherit;font-size:13px;font-weight:400;line-height:1.5;color:var(--color-card-heading)}._metaIcon_13psy_71{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;margin-top:0;color:var(--color-card-meta-icon)}._metaIcon_13psy_71 svg{width:18px;height:18px}._metaContent_13psy_86{flex:1;min-width:0}._footer_13psy_91{display:flex;flex-direction:row;justify-content:flex-end;width:100%;min-width:0}._iconButton_13psy_99{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:var(--border-radius-md, 6px);background:transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}._iconButton_13psy_99:disabled{opacity:.4;cursor:not-allowed}._iconButton_13psy_99:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 3px var(--color-focus-ring)}._iconButton_13psy_99 svg{flex-shrink:0;width:18px;height:18px}._iconButton_13psy_99:not(._iconButtonDanger_13psy_126){color:var(--color-primary, #1a73e8)}._iconButton_13psy_99:not(._iconButtonDanger_13psy_126):hover:not(:disabled){color:var(--color-primary-hover, #1557b0);border-color:var(--color-primary-hover, #1557b0);background:var(--color-button-secondary-hover-bg, #eff6ff)}._iconButton_13psy_99._iconButtonDanger_13psy_126{color:var(--color-danger, #ef4444)}._iconButton_13psy_99._iconButtonDanger_13psy_126:hover:not(:disabled){color:var(--color-danger-dark, #dc2626);border-color:var(--color-danger-dark, #dc2626);background:var(--color-chip-error-bg, #fef2f2)}._iconCard_e9t2h_1{display:flex;flex-direction:row;background:var(--color-bg-primary);border-radius:var(--card-radius);box-shadow:0 1px 10px 1px #0000000d,0 2px 4px 2px #0000001a;overflow:hidden;color:var(--color-text-primary);box-sizing:border-box}._iconSection_e9t2h_12{display:flex;align-items:center;justify-content:center;width:80px;flex-shrink:0;background:linear-gradient(to bottom,#f7f9fa,#f8f8fb);border-right:1px solid var(--color-card-border)}._content_e9t2h_22{display:flex;flex-direction:column;flex:1;min-width:0;padding:24px;gap:var(--card-body-gap)}._alert_90rze_1{border:1px solid transparent;border-radius:var(--border-radius-lg, .5rem);padding:.875rem 1rem}._alertTitle_90rze_7{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;line-height:1.4}._alertBody_90rze_16{margin-top:.25rem;font-size:.8125rem;line-height:1.5}._alertError_90rze_22{background:var(--color-alertbox-error-bg, #fef2f2);border-color:var(--color-alertbox-error-border, #fca5a5);color:var(--color-alertbox-error-text, #dc2626)}._alertWarning_90rze_28{background:var(--color-alertbox-warning-bg, #fffbeb);border-color:var(--color-alertbox-warning-border, #fcd34d);color:var(--color-alertbox-warning-text, #d97706)}._alertInfo_90rze_34{background:var(--color-alertbox-info-bg, #eff6ff);border-color:var(--color-alertbox-info-border, #93c5fd);color:var(--color-alertbox-info-text, #2563eb)}._alertSuccess_90rze_40{background:var(--color-alertbox-success-bg, #ecfdf5);border-color:var(--color-alertbox-success-border, #6ee7b7);color:var(--color-alertbox-success-text, #059669)}._root_4kkdv_1{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem}._circle_4kkdv_8{animation:_spin_4kkdv_1 .8s linear infinite}._track_4kkdv_12{stroke:var(--color-border-light, #e5e7eb)}._arc_4kkdv_16{stroke:var(--color-primary, #1a73e8);stroke-dasharray:80,200;stroke-dashoffset:0}._sm_4kkdv_22 ._circle_4kkdv_8{width:20px;height:20px}._md_4kkdv_27 ._circle_4kkdv_8{width:32px;height:32px}._lg_4kkdv_32 ._circle_4kkdv_8{width:48px;height:48px}._label_4kkdv_37{font-size:var(--font-size-sm, .75rem);color:var(--color-text-secondary, #6b7280);font-weight:var(--font-weight-medium, 500)}@keyframes _spin_4kkdv_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._timeline_qccju_2{position:relative;display:flex;flex-direction:column;gap:0;padding:0}._line_qccju_11{position:absolute;left:19px;width:2px;background:var(--color-primary-200, #bfdbfe);transform-origin:top;transition:none;border-radius:1px}._lineAnimated_qccju_21{animation:_drawLine_qccju_1 1s cubic-bezier(.33,1,.68,1) forwards}._lineAnimated_qccju_21:after{content:"";position:absolute;top:0;left:-2px;width:6px;height:24px;border-radius:3px;background:linear-gradient(180deg,transparent 0%,var(--color-primary-400, #60a5fa) 50%,transparent 100%);animation:_pulse_qccju_1 2.5s ease-in-out infinite;opacity:.65}@keyframes _drawLine_qccju_1{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}@keyframes _pulse_qccju_1{0%{top:0;opacity:0}10%{opacity:.65}90%{opacity:.65}to{top:100%;opacity:0}}._event_qccju_63{display:flex;align-items:flex-start;gap:16px;padding:12px 0;position:relative}._eventAnimated_qccju_71{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}._eventVisible_qccju_77{opacity:1;transform:translateY(0)}._dot_qccju_83{position:relative;z-index:1;flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-primary-50, #eff6ff);border:2px solid var(--color-primary-400, #60a5fa);color:var(--color-primary-600, #2563eb);font-size:16px;transition:transform .3s ease,box-shadow .3s ease}._dot_qccju_83:hover{transform:scale(1.12);box-shadow:0 0 0 4px #3b82f626}._dotInner_qccju_105{width:10px;height:10px;border-radius:50%;background:currentColor}._dot_info_qccju_113{background:var(--color-primary-50, #eff6ff);border-color:var(--color-primary-400, #60a5fa);color:var(--color-primary-600, #2563eb)}._dot_success_qccju_119{background:#ecfdf5;border-color:#34d399;color:#059669}._dot_warning_qccju_125{background:#fffbeb;border-color:#fbbf24;color:#d97706}._dot_error_qccju_131{background:#fef2f2;border-color:#f87171;color:#dc2626}._dot_default_qccju_137{background:var(--color-primary-50, #eff6ff);border-color:var(--color-primary-400, #60a5fa);color:var(--color-primary-600, #2563eb)}._content_qccju_144{flex:1;background:#fff;border:1px solid var(--color-card-border, #e5e7eb);border-radius:10px;padding:12px 16px;box-shadow:0 1px 3px #0000000a;transition:box-shadow .3s ease,border-color .3s ease}._content_qccju_144:hover{box-shadow:0 4px 12px #00000014;border-color:var(--color-primary-200, #bfdbfe)}._title_qccju_159{margin:0 0 4px;font-size:.8125rem;font-weight:700;color:var(--color-text-primary, #111827);text-transform:uppercase;letter-spacing:.03em}._description_qccju_168{margin:0 0 6px;font-size:.8125rem;line-height:1.5;color:var(--color-text-secondary, #4b5563)}._time_qccju_2{display:block;font-size:.6875rem;color:var(--color-text-tertiary, #9ca3af)}._wizard_ymuhn_2{display:flex;flex-direction:column;gap:1.5rem}._stepper_ymuhn_9{display:flex;align-items:center;justify-content:center;gap:0;padding:0 .5rem}._stepItem_ymuhn_17{display:flex;flex-direction:column;align-items:center;gap:.375rem;min-width:64px}._indicator_ymuhn_25{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm, .8125rem);font-weight:600;border:2px solid var(--color-border-light, #d1d5db);color:var(--color-text-secondary, #6b7280);background:var(--color-bg-primary, #fff);transition:all .2s ease;flex-shrink:0}._indicatorCurrent_ymuhn_41{border-color:var(--color-primary, #2563eb);color:var(--color-primary, #2563eb);box-shadow:0 0 0 3px #2563eb26}._indicatorCompleted_ymuhn_47{border-color:var(--color-primary, #2563eb);background:var(--color-primary, #2563eb);color:#fff}._checkIcon_ymuhn_53{width:16px;height:16px}._connector_ymuhn_58{flex:1;height:2px;min-width:24px;max-width:80px;background:var(--color-border-light, #d1d5db);align-self:flex-start;margin-top:16px;transition:background .2s ease}._connectorCompleted_ymuhn_69{background:var(--color-primary, #2563eb)}._stepLabel_ymuhn_73{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280);text-align:center;white-space:nowrap;transition:color .2s ease}._stepLabelCurrent_ymuhn_81{color:var(--color-primary, #2563eb);font-weight:600}._stepLabelCompleted_ymuhn_86{color:var(--color-text-primary, #111827)}._body_ymuhn_91{min-height:200px}._actions_ymuhn_96{display:flex;justify-content:space-between;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--color-border-light, #e5e7eb)}._btn_ymuhn_104{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;height:34px;padding:0 1rem;border-radius:var(--border-radius-sm, 6px);font-size:var(--font-size-base, .875rem);font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s ease}._btn_ymuhn_104:disabled{cursor:not-allowed;opacity:.5}._btnSecondary_ymuhn_123{background:var(--color-bg-primary, #fff);border-color:var(--color-input-border, #d1d5db);color:var(--color-text-primary, #111827)}._btnSecondary_ymuhn_123:hover:not(:disabled){border-color:var(--color-primary, #2563eb);color:var(--color-primary, #2563eb)}._btnPrimary_ymuhn_133{background:var(--color-primary, #2563eb);color:#fff}._btnPrimary_ymuhn_133:hover:not(:disabled){background:var(--color-primary-dark, #1d4ed8)}._root_1e6ob_1{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;row-gap:var(--spacing-sm);font-family:inherit;font-size:var(--font-size-base);line-height:var(--line-height-base)}._back_1e6ob_12{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-icon);margin:0;margin-right:var(--spacing-xl);padding:0;border:none;background:none;cursor:pointer;font-family:inherit;font-size:inherit;color:var(--color-dark);font-weight:var(--font-weight-bold)}._back_1e6ob_12:hover{color:var(--color-text-primary)}._back_1e6ob_12:focus{outline:none}._back_1e6ob_12:focus-visible{border-radius:var(--border-radius-sm);box-shadow:var(--focus-ring-box-shadow)}._backIcon_1e6ob_39{flex-shrink:0;width:1em;height:1em}._backLabel_1e6ob_45{font-weight:var(--font-weight-bold)}._list_1e6ob_49{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:0}._item_1e6ob_60{display:inline-flex;flex-direction:row;align-items:center;margin:0;padding:0}._separator_1e6ob_68{flex-shrink:0;width:1em;height:1em;margin:0 var(--spacing-sm);color:var(--color-primary)}._link_1e6ob_76{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-normal)}._link_1e6ob_76:hover{color:var(--color-primary-hover);text-decoration:underline}._link_1e6ob_76:focus{outline:none}._link_1e6ob_76:focus-visible{border-radius:var(--border-radius-sm);box-shadow:var(--focus-ring-box-shadow)}._linkButton_1e6ob_93{margin:0;padding:0;border:none;background:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--font-weight-normal);color:var(--color-primary);text-decoration:none}._linkButton_1e6ob_93:hover{color:var(--color-primary-hover);text-decoration:underline}._linkButton_1e6ob_93:focus{outline:none}._linkButton_1e6ob_93:focus-visible{border-radius:var(--border-radius-sm);box-shadow:var(--focus-ring-box-shadow)}._segmentPlain_1e6ob_117{color:var(--color-primary);font-weight:var(--font-weight-normal)}._current_1e6ob_122{color:var(--color-text-primary);font-weight:var(--font-weight-normal)}._overlay_r7enq_1{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--modal-z-index, 1000);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--modal-overlay-bg, rgba(0, 0, 0, .4));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}._dialog_r7enq_13{width:100%;max-width:var(--modal-max-width);max-height:var(--modal-max-height, min(90vh, 640px));display:flex;flex-direction:column;background:var(--color-bg-primary, #ffffff);border-radius:var(--modal-radius, var(--border-radius-lg, 8px));border:1px solid var(--color-border-light, #e5e7eb);box-shadow:var(--shadow-modal, 0 20px 40px -8px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .03));overflow:hidden}._header_r7enq_26{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:12px 16px;border-bottom:1px solid var(--color-border-light, #e5e7eb);flex-shrink:0}._titleBlock_r7enq_36{min-width:0}._title_r7enq_36{margin:0;font-size:15px;font-weight:600;color:var(--color-text-primary, #1f2937)}._subtitle_r7enq_47{margin:3px 0 0;font-size:var(--font-size-sm);line-height:1.4;color:var(--color-text-secondary, #6b7280)}._closeBtn_r7enq_54{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--color-border-light, #e5e7eb);border-radius:var(--border-radius-sm, 4px);background:var(--color-bg-primary, #ffffff);color:var(--color-text-secondary, #6b7280);cursor:pointer;transition:all .15s ease}._closeBtn_r7enq_54 svg{width:16px;height:16px}._closeBtn_r7enq_54:hover{background:var(--color-bg-secondary, #f9fafb);border-color:var(--color-text-secondary, #6b7280);color:var(--color-text-primary, #1f2937)}._closeBtn_r7enq_54:disabled{opacity:.5;cursor:not-allowed}._closeBtn_r7enq_54:disabled:hover{background:var(--color-bg-primary, #ffffff);border-color:var(--color-border-light, #e5e7eb);color:var(--color-text-secondary, #6b7280)}._body_r7enq_87{padding:12px 16px 16px;display:flex;flex-direction:column;gap:.75rem;min-height:0;flex:1;overflow:auto}._footer_r7enq_97{display:flex;justify-content:flex-end;gap:.5rem;padding:10px 16px;border-top:1px solid var(--color-border-light, #e5e7eb);flex-shrink:0;background:var(--color-bg-primary, #ffffff)}._message_q6xsi_1{margin:0;font-size:.9375rem;line-height:1.55;color:var(--color-text-primary, #1f2937)}._footer_q6xsi_8{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;width:100%}._dangerButton_q6xsi_16{background:var(--color-danger, #ef4444)!important}._dangerButton_q6xsi_16:not(:disabled):hover{background:var(--color-danger-dark, #dc2626)!important}._tag_15jzc_1{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px 10px;border-radius:var(--border-radius-sm, 4px);border:1px solid;font-family:var(--font-family-sans);font-size:.6875rem;font-weight:600;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}._created_15jzc_18{background:var(--color-order-created-bg, #eff6ff);color:var(--color-order-created-text, #2563eb);border-color:var(--color-order-created-border, #bfdbfe)}._confirmed_15jzc_24{background:var(--color-order-confirmed-bg, #ecfeff);color:var(--color-order-confirmed-text, #0e7490);border-color:var(--color-order-confirmed-border, #a5f3fc)}._completed_15jzc_30{background:var(--color-order-completed-bg, #ecfdf5);color:var(--color-order-completed-text, #059669);border-color:var(--color-order-completed-border, #a7f3d0)}._declined_15jzc_36{background:var(--color-order-declined-bg, #fef2f2);color:var(--color-order-declined-text, #dc2626);border-color:var(--color-order-declined-border, #fecaca)}._shipped_15jzc_42{background:var(--color-order-shipped-bg, #eef2ff);color:var(--color-order-shipped-text, #4f46e5);border-color:var(--color-order-shipped-border, #c7d2fe)}._topNav_5wym0_1{width:100%;height:var(--topnav-height, 48px);background:var(--topnav-bg, #1d63ce);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;box-sizing:border-box;box-shadow:var(--shadow-topnav, 0 1px 4px rgba(0, 0, 0, .12))}._left_5wym0_14{display:flex;align-items:center;gap:10px}._logoArea_5wym0_20{display:flex;align-items:center}._logoImage_5wym0_25{height:20px;width:auto;display:block}._start_5wym0_31{display:flex;align-items:center}._actions_5wym0_36{display:flex;align-items:center;gap:6px}._overlay_1cjjq_1{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;flex-direction:column;align-items:center;padding-top:16px;pointer-events:none;gap:8px}._toast_1cjjq_15{display:flex;align-items:center;gap:10px;min-width:320px;max-width:480px;padding:10px 14px;border-radius:var(--border-radius-lg, 8px);border:1px solid;border-left-width:4px;background:var(--color-bg-primary);font-family:inherit;font-size:var(--font-size-base);line-height:1.4;color:var(--color-text-primary, #1f2937);box-shadow:var(--shadow-toast, 0 4px 12px rgba(0, 0, 0, .08));pointer-events:auto;animation:_slideDown_1cjjq_1 .2s ease-out}._toastExiting_1cjjq_35{animation:_slideUp_1cjjq_1 .15s ease-in forwards}@keyframes _slideDown_1cjjq_1{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes _slideUp_1cjjq_1{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}._toastSuccess_1cjjq_59{border-color:var(--color-toast-success-border, #34d399)}._toastError_1cjjq_63{border-color:var(--color-toast-error-border, #f87171)}._toastWarning_1cjjq_67{border-color:var(--color-toast-warning-border, #fbbf24)}._toastInfo_1cjjq_71{border-color:var(--color-toast-info-border, #60a5fa)}._icon_1cjjq_75{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}._icon_1cjjq_75 svg{width:14px;height:14px}._iconSuccess_1cjjq_89{background:var(--color-toast-success-icon, #059669);color:var(--color-button-on-primary)}._iconError_1cjjq_94{background:var(--color-toast-error-icon, #dc2626);color:var(--color-button-on-primary)}._iconWarning_1cjjq_99{background:var(--color-toast-warning-icon, #d97706);color:var(--color-button-on-primary)}._iconInfo_1cjjq_104{background:var(--color-toast-info-icon, #2563eb);color:var(--color-button-on-primary)}._message_1cjjq_109{flex:1;font-weight:500}._closeButton_1cjjq_114{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:var(--border-radius-sm, 4px);background:transparent;color:var(--color-text-secondary, #6b7280);cursor:pointer;transition:background .15s}._closeButton_1cjjq_114 svg{width:14px;height:14px}._closeButton_1cjjq_114:hover{background:var(--color-bg-secondary, #f9fafb)}._app_dmyjd_1{min-height:100vh;display:flex;flex-direction:column}._header_dmyjd_7{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;padding:3rem 1rem;text-align:center}._header_dmyjd_7 h1{margin:0 0 .5rem;font-size:2.5rem;font-weight:700}._header_dmyjd_7 p{margin:0;font-size:1.125rem;opacity:.9}._main_dmyjd_24{flex:1;max-width:1200px;margin:0 auto;padding:3rem 1rem;width:100%}._section_dmyjd_32{margin-bottom:3rem}._section_dmyjd_32 h2{color:var(--color-text-primary);margin-bottom:1rem;font-size:1.75rem;font-weight:600}._section_dmyjd_32 p{color:var(--color-text-secondary);margin-bottom:1.5rem;line-height:1.6}._componentShowcase_dmyjd_47{background:var(--color-bg-secondary);border-radius:var(--border-radius-lg);padding:1.5rem;border:1px solid var(--color-border-light)}._variantGroup_dmyjd_54{margin-bottom:1.5rem}._variantGroup_dmyjd_54:last-child{margin-bottom:0}._variantGroup_dmyjd_54 h3{margin:0 0 1rem;color:var(--color-text-primary);font-size:1.125rem;font-weight:500}._buttonGrid_dmyjd_67{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}._buttonRow_dmyjd_73{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}._chipRow_dmyjd_80{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}._dropdownDemo_dmyjd_87{max-width:120}._editEndHint_dmyjd_91{margin:.5rem 0 0;font-size:.875rem;color:var(--color-text-secondary)}._placeholderText_dmyjd_97{color:var(--color-text-secondary)}._cardTitle_dmyjd_101{margin-top:0}._cardText_dmyjd_105{margin-bottom:0}._codeBlock_dmyjd_109{background:var(--color-dark);color:var(--color-code-foreground);border-radius:var(--border-radius-md);padding:1.5rem;overflow-x:auto}._codeBlock_dmyjd_109 pre{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.5}._codeBlock_dmyjd_109 code{color:var(--color-code-foreground)}ul{color:var(--color-text-secondary);line-height:1.6}ul li{margin-bottom:.5rem}ul li code{background:var(--color-bg-secondary);padding:.125rem .25rem;border-radius:var(--border-radius-sm);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875em;color:var(--color-primary)}._footer_dmyjd_142{background:var(--color-bg-secondary);border-top:1px solid var(--color-border-light);padding:1.5rem 1rem;text-align:center;color:var(--color-text-secondary)}._footer_dmyjd_142 p{margin:0}@media(max-width:768px){._header_dmyjd_7{padding:1.5rem 1rem}._header_dmyjd_7 h1{font-size:2rem}._main_dmyjd_24{padding:1.5rem 1rem}._buttonGrid_dmyjd_67{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.5rem}._buttonRow_dmyjd_73{gap:.5rem}}:root{--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--shadow-topnav: 0 1px 4px rgba(0, 0, 0, .12);--shadow-toast: 0 4px 12px rgba(0, 0, 0, .08);--shadow-modal: 0 20px 40px -8px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .03);--shadow-dropdown: 0 4px 16px rgba(0, 0, 0, .1);--color-primary-subtle-bg: rgba(26, 115, 232, .04);--color-primary: #1a73e8;--color-primary-hover: #1557b0;--color-dark: #3e4759;--color-text-primary: #1f2937;--color-text-secondary: #6b7280;--color-bg-primary: #ffffff;--color-bg-secondary: #fcfcfc;--color-border-light: #e5e7eb;--color-button-on-primary: #ffffff;--color-button-disabled-bg: #e5e7eb;--color-button-disabled-fg: #9ca3af;--color-button-secondary-hover-bg: #eff6ff;--color-button-secondary-disabled-border: #d1d5db;--color-button-contrast-border: #374151;--color-button-contrast-hover-bg: #1f2937;--color-focus-ring: #1a73e8;--button-radius: 4px;--button-height: 36px;--button-height-sm: 30px;--button-padding-x: 14px;--button-padding-x-sm: 10px;--button-gap: 8px;--button-gap-sm: 6px;--color-card-border: #e5e7eb;--color-card-heading: #1f2937;--color-card-meta-icon: #4b5563;--card-radius: 8px;--card-padding: 16px;--card-section-gap: 12px;--card-body-gap: 16px;--card-meta-gap: 6px;--spacing-sm: .375rem;--spacing-icon: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--border-color-primary: #1a73e8;--font-size-xs: .6875rem;--font-size-sm: .75rem;--font-size-base: .8125rem;--font-size-lg: 1rem;--font-size-button: var(--font-size-base);--font-size-button-sm: .75rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-base: 1.25rem;--color-input-border: #d1d5db;--color-input-focus: #1a73e8;--color-input-placeholder: #9ca3af;--color-dropdown-option-highlight: #eff6ff;--color-dropdown-filter-border: #1a73e8;--focus-ring-box-shadow: 0 0 0 2px rgba(26, 115, 232, .25);--color-chip-success-bg: #ecfdf5;--color-chip-success-text: #059669;--color-chip-success-border: #a7f3d0;--color-chip-warning-bg: #fffbeb;--color-chip-warning-text: #d97706;--color-chip-warning-border: #fde68a;--color-chip-info-bg: #eff6ff;--color-chip-info-text: #2563eb;--color-chip-info-border: #bfdbfe;--color-chip-error-bg: #fef2f2;--color-chip-error-text: #dc2626;--color-chip-error-border: #fecaca;--color-alertbox-error-bg: #fef2f2;--color-alertbox-error-border: #fca5a5;--color-alertbox-error-text: #dc2626;--color-alertbox-warning-bg: #fffbeb;--color-alertbox-warning-border: #fcd34d;--color-alertbox-warning-text: #d97706;--color-alertbox-info-bg: #eff6ff;--color-alertbox-info-border: #93c5fd;--color-alertbox-info-text: #2563eb;--color-alertbox-success-bg: #ecfdf5;--color-alertbox-success-border: #6ee7b7;--color-alertbox-success-text: #059669;--color-destructive-soft: #ef4444;--color-status-pending-border: #f97316;--color-status-pending-text: #ea580c;--color-status-pending-indicator: #ea580c;--color-order-created-bg: #eff6ff;--color-order-created-text: #2563eb;--color-order-created-border: #bfdbfe;--color-order-confirmed-bg: #ecfeff;--color-order-confirmed-text: #0e7490;--color-order-confirmed-border: #a5f3fc;--color-order-completed-bg: #ecfdf5;--color-order-completed-text: #059669;--color-order-completed-border: #a7f3d0;--color-order-declined-bg: #fef2f2;--color-order-declined-text: #dc2626;--color-order-declined-border: #fecaca;--color-order-shipped-bg: #eef2ff;--color-order-shipped-text: #4f46e5;--color-order-shipped-border: #c7d2fe;--color-text-accent-cyan: #0891b2;--color-code-foreground: #f8f9fa;--topnav-height: 48px;--topnav-bg: #1d63ce;--modal-z-index: 1000;--modal-overlay-bg: rgba(0, 0, 0, .4);--modal-radius: var(--border-radius-lg);--modal-max-height: min(90vh, 640px);--color-toast-success-border: #34d399;--color-toast-success-icon-bg: #ecfdf5;--color-toast-success-icon: #059669;--color-toast-error-border: #f87171;--color-toast-error-icon-bg: #fef2f2;--color-toast-error-icon: #dc2626;--color-toast-warning-border: #fbbf24;--color-toast-warning-icon-bg: #fffbeb;--color-toast-warning-icon: #d97706;--color-toast-info-border: #60a5fa;--color-toast-info-icon-bg: #eff6ff;--color-toast-info-icon: #2563eb;--sidemenu-bg: #ffffff;--sidemenu-text: #374151;--sidemenu-width: 260px;--sidemenu-radius: 8px;--sidemenu-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);--sidemenu-logo-bg: #1a73e8;--sidemenu-brand-title: #1f2937;--sidemenu-brand-subtitle: #6b7280;--sidemenu-section-label: #9ca3af;--sidemenu-nav-item-text: #374151;--sidemenu-nav-item-hover-bg: #f3f4f6;--sidemenu-nav-item-active-bg: #eff6ff;--sidemenu-nav-item-active-border: #1a73e8;--sidemenu-nav-item-active-text: #1a73e8;--sidemenu-nav-icon-color: #6b7280;--sidemenu-badge-bg: #eff6ff;--sidemenu-badge-text: #1a73e8;--sidemenu-footer-text: #9ca3af}body{font-family:var(--font-family-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color-text-primary);background-color:var(--color-bg-primary);margin:0;padding:0;font-size:13px;line-height:1.5}