@northlight/ui 2.43.6 → 2.43.8
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/dist/es/northlight.js +1 -1
- package/dist/es/northlight.js.map +1 -1
- package/dist/sandbox/index.cjs +2 -2
- package/dist/sandbox/index.cjs.map +1 -1
- package/dist/sandbox/index.js +2 -2
- package/dist/sandbox/index.js.map +1 -1
- package/dist/umd/northlight.cjs +1 -1
- package/dist/umd/northlight.cjs.map +1 -1
- package/dist/umd/northlight.min.cjs +1 -1
- package/dist/umd/northlight.min.cjs.map +1 -1
- package/lib/components/date-picker/date-picker/date-range-picker.tsx +2 -2
- package/package.json +2 -2
- package/sandbox/bin/sandbox.ts +2 -0
- package/sandbox/lib/viewer/sandbox-viewer.css +0 -1
package/dist/sandbox/index.cjs
CHANGED
|
@@ -7378,7 +7378,7 @@ const DateRangePicker = (props) => {
|
|
|
7378
7378
|
"data-testid": dataTestId,
|
|
7379
7379
|
defaultOpen = false,
|
|
7380
7380
|
onOpenChange,
|
|
7381
|
-
placeholderValue,
|
|
7381
|
+
placeholderValue = date.toCalendarDate(new date.CalendarDateTime(2024, 1, 31)),
|
|
7382
7382
|
isDateUnavailable,
|
|
7383
7383
|
allowsNonContiguousRanges,
|
|
7384
7384
|
startName,
|
|
@@ -10481,7 +10481,7 @@ function styleInject(css, ref) {
|
|
|
10481
10481
|
}
|
|
10482
10482
|
}
|
|
10483
10483
|
|
|
10484
|
-
var css_248z = "/* Design System Variables */\n:root {\n --sandbox-bg: #faf9f7;\n --sandbox-card: #f5f4f0;\n --sandbox-secondary: #edebe5;\n --sandbox-border: #e5e0d5;\n --sandbox-input: #eae5dc;\n --sandbox-accent: #f97316;\n --sandbox-accent-hover: #ea580c;\n --sandbox-accent-light: rgba(249, 115, 22, 0.1);\n --sandbox-text: #1c1917;\n --sandbox-text-muted: #766f65;\n --sandbox-text-secondary: #a8a29e;\n --sandbox-destructive: #dc2626;\n --sandbox-destructive-light: #fef2f2;\n --sandbox-radius-lg: 12px;\n --sandbox-radius-md: 10px;\n --sandbox-radius-sm: 8px;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n background: var(--sandbox-bg);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n/* Main Layout */\n.sandbox-viewer {\n display: flex;\n height: 100vh;\n font-family: Arial, Helvetica, sans-serif;\n color: var(--sandbox-text);\n}\n\n/* Sidebar */\n.sandbox-sidebar {\n width: 256px;\n background: var(--sandbox-bg);\n border-right: 1px solid var(--sandbox-border);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.sandbox-logo {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px;\n border-bottom: 1px solid var(--sandbox-border);\n}\n\n.sandbox-logo-icon {\n width: 28px;\n height: 28px;\n border-radius: var(--sandbox-radius-sm);\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: bold;\n}\n\n.sandbox-logo-text {\n font-weight: 600;\n font-size: 15px;\n color: var(--sandbox-text);\n letter-spacing: -0.01em;\n}\n\n/* Sidebar Search */\n.sandbox-sidebar-search {\n padding: 12px;\n}\n\n.sandbox-sidebar-search-input {\n width: 100%;\n padding: 10px 12px;\n font-size: 13px;\n border: 1px solid var(--sandbox-border);\n border-radius: var(--sandbox-radius-md);\n background: var(--sandbox-bg);\n color: var(--sandbox-text);\n outline: none;\n transition: all 0.15s ease;\n}\n\n.sandbox-sidebar-search-input::placeholder {\n color: var(--sandbox-text-secondary);\n}\n\n.sandbox-sidebar-search-input:focus {\n border-color: var(--sandbox-accent);\n box-shadow: 0 0 0 3px var(--sandbox-accent-light);\n}\n\n/* Sidebar Navigation */\n.sandbox-nav {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px;\n}\n\n.sandbox-nav-section {\n margin-bottom: 16px;\n}\n\n.sandbox-nav-title {\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--sandbox-text-secondary);\n padding: 8px 12px;\n letter-spacing: 0.08em;\n}\n\n.sandbox-nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n text-align: left;\n cursor: pointer;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n transition: all 0.15s ease;\n}\n\n.sandbox-nav-item:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-nav-item.selected {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n font-weight: 500;\n}\n\n.sandbox-nav-item-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n border: 1px dashed var(--sandbox-text-secondary);\n border-radius: 4px;\n color: var(--sandbox-text-secondary);\n}\n\n/* Content Area */\n.sandbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n}\n\n/* Main Content */\n.sandbox-main {\n flex: 1;\n overflow-y: auto;\n background: var(--sandbox-bg);\n}\n\n/* Hero Section */\n.sandbox-hero {\n padding: 48px 32px;\n text-align: center;\n border-bottom: 1px solid var(--sandbox-border);\n background: linear-gradient(to bottom, var(--sandbox-secondary), transparent);\n}\n\n.sandbox-hero-title {\n font-size: 32px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0 0 12px;\n}\n\n.sandbox-hero-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0 auto;\n max-width: 600px;\n}\n\n.sandbox-hero-stats {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n margin-top: 32px;\n}\n\n.sandbox-hero-stat {\n text-align: center;\n}\n\n.sandbox-hero-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--sandbox-text);\n}\n\n.sandbox-hero-stat-label {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n}\n\n.sandbox-hero-divider {\n width: 1px;\n height: 32px;\n background: var(--sandbox-border);\n}\n\n/* Component Grid */\n.sandbox-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 24px;\n padding: 32px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Component Card */\n.sandbox-card {\n position: relative;\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.sandbox-card:hover {\n border-color: rgba(249, 115, 22, 0.5);\n box-shadow: 0 8px 24px rgba(249, 115, 22, 0.08);\n}\n\n.sandbox-card-preview {\n aspect-ratio: 4 / 3;\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ffffff;\n position: relative;\n}\n\n.sandbox-card-actions {\n position: absolute;\n inset: 0;\n background: rgba(28, 25, 23, 0.05);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n.sandbox-card:hover .sandbox-card-actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n.sandbox-card-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n border-radius: var(--sandbox-radius-md);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-card-btn-secondary {\n background: rgba(250, 249, 247, 0.95);\n border: 1px solid var(--sandbox-border);\n color: var(--sandbox-text);\n}\n\n.sandbox-card-btn-secondary:hover {\n background: var(--sandbox-bg);\n}\n\n.sandbox-card-btn-primary {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-card-btn-primary:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-card-info {\n padding: 16px;\n border-top: 1px solid var(--sandbox-border);\n}\n\n.sandbox-card-title {\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-card-description {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Component Detail View */\n.sandbox-detail {\n padding: 32px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.sandbox-detail-back {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n background: none;\n border: none;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n cursor: pointer;\n margin-bottom: 24px;\n transition: color 0.15s ease;\n}\n\n.sandbox-detail-back:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 32px;\n}\n\n.sandbox-detail-title-row {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.sandbox-detail-title {\n font-size: 28px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0;\n}\n\n.sandbox-detail-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: var(--sandbox-secondary);\n border-radius: 9999px;\n}\n\n.sandbox-detail-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-detail-favorite {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n color: var(--sandbox-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-detail-favorite:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-favorite.active {\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n}\n\n/* Scenario Cards */\n.sandbox-scenarios {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.sandbox-scenario-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-scenario-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-scenario-info h3 {\n font-size: 15px;\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-scenario-info p {\n font-size: 13px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n}\n\n.sandbox-scenario-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.sandbox-scenario-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: var(--sandbox-radius-sm);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-scenario-btn-toggle {\n background: var(--sandbox-secondary);\n border: none;\n color: var(--sandbox-text);\n}\n\n.sandbox-scenario-btn-toggle:hover {\n background: var(--sandbox-border);\n}\n\n.sandbox-scenario-btn-toggle.active {\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n}\n\n.sandbox-scenario-btn-copy {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-copy:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-play:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n}\n\n.sandbox-scenario-btn-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-scenario-content {\n padding: 24px;\n}\n\n.sandbox-scenario-preview {\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-scenario-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n overflow-x: auto;\n}\n\n.sandbox-scenario-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Error States */\n.sandbox-error {\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 20px;\n}\n\n.sandbox-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 12px;\n}\n\n.sandbox-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n margin: 0 0 12px;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-error-stack {\n color: #6b7280;\n font-family: ui-monospace, monospace;\n font-size: 11px;\n margin: 0;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid var(--sandbox-border);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 300px;\n overflow: auto;\n}\n\n.sandbox-play-error {\n margin-top: 16px;\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n}\n\n.sandbox-play-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 13px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.sandbox-play-error-title::before {\n content: \"✕\";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n background: var(--sandbox-destructive);\n color: white;\n border-radius: 50%;\n font-size: 10px;\n font-weight: bold;\n}\n\n.sandbox-play-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 12px;\n margin: 0;\n padding: 10px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Legacy support for inline scenarios */\n.sandbox-inline {\n flex: 1;\n padding: 24px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.sandbox-inline-scenario {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.sandbox-inline-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n width: 100px;\n flex-shrink: 0;\n}\n\n.sandbox-inline-preview {\n flex: 1;\n background: var(--sandbox-card);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-play-slot {\n width: 32px;\n flex-shrink: 0;\n}\n\n.sandbox-play-inline {\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 12px;\n transition: all 0.15s ease;\n}\n\n.sandbox-play-inline:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play-inline:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play-inline.error {\n background: var(--sandbox-destructive);\n}\n\n/* Legacy Tabs (for backwards compatibility) */\n.sandbox-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0 24px;\n background: var(--sandbox-card);\n border-bottom: 1px solid var(--sandbox-border);\n min-height: 52px;\n overflow-x: auto;\n flex-wrap: wrap;\n}\n\n.sandbox-tab {\n padding: 14px 16px;\n min-width: 100px;\n text-align: center;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n margin-bottom: -1px;\n transition: all 0.15s ease;\n border-radius: var(--sandbox-radius-sm) var(--sandbox-radius-sm) 0 0;\n}\n\n.sandbox-tab:hover {\n color: var(--sandbox-text);\n background: var(--sandbox-bg);\n}\n\n.sandbox-tab.selected {\n color: var(--sandbox-accent);\n border-bottom-color: var(--sandbox-accent);\n background: none;\n}\n\n.sandbox-play {\n margin-left: auto;\n padding: 8px 16px;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.15s ease;\n}\n\n.sandbox-play:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-play.error:hover {\n background: #b91c1c;\n}\n\n.sandbox-preview {\n flex: 1;\n padding: 32px;\n overflow: auto;\n}\n\n/* Tabbed Layout */\n.sandbox-detail-tabbed {\n padding: 32px;\n width: 100%;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-back {\n margin-bottom: 24px;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-header {\n margin-bottom: 24px;\n}\n\n.sandbox-tabbed-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n}\n\n.sandbox-tabs-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-tabs-list {\n display: flex;\n align-items: center;\n overflow-x: auto;\n}\n\n.sandbox-tab-item {\n padding: 14px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n transition: color 0.15s ease;\n}\n\n.sandbox-tab-item:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--sandbox-accent);\n}\n\n.sandbox-tabs-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 16px;\n}\n\n.sandbox-tab-description {\n padding: 12px 24px;\n border-bottom: 1px solid rgba(229, 224, 213, 0.5);\n background: rgba(237, 235, 229, 0.1);\n}\n\n.sandbox-tab-description p {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-tab-content {\n padding: 32px;\n}\n\n.sandbox-tab-preview {\n min-height: 300px;\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-tab-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 24px;\n overflow-x: auto;\n}\n\n.sandbox-tab-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-nav-dots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 24px;\n}\n\n.sandbox-nav-dot {\n height: 8px;\n border-radius: 9999px;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n padding: 0;\n}\n\n.sandbox-nav-dot.inactive {\n width: 8px;\n background: var(--sandbox-border);\n}\n\n.sandbox-nav-dot.inactive:hover {\n background: var(--sandbox-text-muted);\n}\n\n.sandbox-nav-dot.active {\n width: 24px;\n background: var(--sandbox-accent);\n}\n\n/* Advanced badge */\n.sandbox-badge-advanced {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n border: 1px solid rgba(249, 115, 22, 0.2);\n border-radius: 9999px;\n}\n\n/* Utility classes */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
|
|
10484
|
+
var css_248z = "/* Design System Variables */\n:root {\n --sandbox-bg: #faf9f7;\n --sandbox-card: #f5f4f0;\n --sandbox-secondary: #edebe5;\n --sandbox-border: #e5e0d5;\n --sandbox-input: #eae5dc;\n --sandbox-accent: #f97316;\n --sandbox-accent-hover: #ea580c;\n --sandbox-accent-light: rgba(249, 115, 22, 0.1);\n --sandbox-text: #1c1917;\n --sandbox-text-muted: #766f65;\n --sandbox-text-secondary: #a8a29e;\n --sandbox-destructive: #dc2626;\n --sandbox-destructive-light: #fef2f2;\n --sandbox-radius-lg: 12px;\n --sandbox-radius-md: 10px;\n --sandbox-radius-sm: 8px;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n background: var(--sandbox-bg);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n/* Main Layout */\n.sandbox-viewer {\n display: flex;\n height: 100vh;\n font-family: Arial, Helvetica, sans-serif;\n color: var(--sandbox-text);\n}\n\n/* Sidebar */\n.sandbox-sidebar {\n width: 256px;\n background: var(--sandbox-bg);\n border-right: 1px solid var(--sandbox-border);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.sandbox-logo {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px;\n border-bottom: 1px solid var(--sandbox-border);\n}\n\n.sandbox-logo-icon {\n width: 28px;\n height: 28px;\n border-radius: var(--sandbox-radius-sm);\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: bold;\n}\n\n.sandbox-logo-text {\n font-weight: 600;\n font-size: 15px;\n color: var(--sandbox-text);\n letter-spacing: -0.01em;\n}\n\n/* Sidebar Search */\n.sandbox-sidebar-search {\n padding: 12px;\n}\n\n.sandbox-sidebar-search-input {\n width: 100%;\n padding: 10px 12px;\n font-size: 13px;\n border: 1px solid var(--sandbox-border);\n border-radius: var(--sandbox-radius-md);\n background: var(--sandbox-bg);\n color: var(--sandbox-text);\n outline: none;\n transition: all 0.15s ease;\n}\n\n.sandbox-sidebar-search-input::placeholder {\n color: var(--sandbox-text-secondary);\n}\n\n.sandbox-sidebar-search-input:focus {\n border-color: var(--sandbox-accent);\n box-shadow: 0 0 0 3px var(--sandbox-accent-light);\n}\n\n/* Sidebar Navigation */\n.sandbox-nav {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px;\n}\n\n.sandbox-nav-section {\n margin-bottom: 16px;\n}\n\n.sandbox-nav-title {\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--sandbox-text-secondary);\n padding: 8px 12px;\n letter-spacing: 0.08em;\n}\n\n.sandbox-nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n text-align: left;\n cursor: pointer;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n transition: all 0.15s ease;\n}\n\n.sandbox-nav-item:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-nav-item.selected {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n font-weight: 500;\n}\n\n.sandbox-nav-item-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n border: 1px dashed var(--sandbox-text-secondary);\n border-radius: 4px;\n color: var(--sandbox-text-secondary);\n}\n\n/* Content Area */\n.sandbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n}\n\n/* Main Content */\n.sandbox-main {\n flex: 1;\n overflow-y: auto;\n background: var(--sandbox-bg);\n}\n\n/* Hero Section */\n.sandbox-hero {\n padding: 48px 32px;\n text-align: center;\n border-bottom: 1px solid var(--sandbox-border);\n background: linear-gradient(to bottom, var(--sandbox-secondary), transparent);\n}\n\n.sandbox-hero-title {\n font-size: 32px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0 0 12px;\n}\n\n.sandbox-hero-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0 auto;\n max-width: 600px;\n}\n\n.sandbox-hero-stats {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n margin-top: 32px;\n}\n\n.sandbox-hero-stat {\n text-align: center;\n}\n\n.sandbox-hero-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--sandbox-text);\n}\n\n.sandbox-hero-stat-label {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n}\n\n.sandbox-hero-divider {\n width: 1px;\n height: 32px;\n background: var(--sandbox-border);\n}\n\n/* Component Grid */\n.sandbox-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 24px;\n padding: 32px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Component Card */\n.sandbox-card {\n position: relative;\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.sandbox-card:hover {\n border-color: rgba(249, 115, 22, 0.5);\n box-shadow: 0 8px 24px rgba(249, 115, 22, 0.08);\n}\n\n.sandbox-card-preview {\n aspect-ratio: 4 / 3;\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ffffff;\n position: relative;\n}\n\n.sandbox-card-actions {\n position: absolute;\n inset: 0;\n background: rgba(28, 25, 23, 0.05);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n.sandbox-card:hover .sandbox-card-actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n.sandbox-card-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n border-radius: var(--sandbox-radius-md);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-card-btn-secondary {\n background: rgba(250, 249, 247, 0.95);\n border: 1px solid var(--sandbox-border);\n color: var(--sandbox-text);\n}\n\n.sandbox-card-btn-secondary:hover {\n background: var(--sandbox-bg);\n}\n\n.sandbox-card-btn-primary {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-card-btn-primary:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-card-info {\n padding: 16px;\n border-top: 1px solid var(--sandbox-border);\n}\n\n.sandbox-card-title {\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-card-description {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Component Detail View */\n.sandbox-detail {\n padding: 32px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.sandbox-detail-back {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n background: none;\n border: none;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n cursor: pointer;\n margin-bottom: 24px;\n transition: color 0.15s ease;\n}\n\n.sandbox-detail-back:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 32px;\n}\n\n.sandbox-detail-title-row {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.sandbox-detail-title {\n font-size: 28px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0;\n}\n\n.sandbox-detail-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: var(--sandbox-secondary);\n border-radius: 9999px;\n}\n\n.sandbox-detail-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-detail-favorite {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n color: var(--sandbox-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-detail-favorite:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-favorite.active {\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n}\n\n/* Scenario Cards */\n.sandbox-scenarios {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.sandbox-scenario-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-scenario-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-scenario-info h3 {\n font-size: 15px;\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-scenario-info p {\n font-size: 13px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n}\n\n.sandbox-scenario-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.sandbox-scenario-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: var(--sandbox-radius-sm);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-scenario-btn-toggle {\n background: var(--sandbox-secondary);\n border: none;\n color: var(--sandbox-text);\n}\n\n.sandbox-scenario-btn-toggle:hover {\n background: var(--sandbox-border);\n}\n\n.sandbox-scenario-btn-toggle.active {\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n}\n\n.sandbox-scenario-btn-copy {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-copy:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-play:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n}\n\n.sandbox-scenario-btn-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-scenario-content {\n padding: 24px;\n}\n\n.sandbox-scenario-preview {\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-scenario-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n overflow-x: auto;\n}\n\n.sandbox-scenario-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Error States */\n.sandbox-error {\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 20px;\n}\n\n.sandbox-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 12px;\n}\n\n.sandbox-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n margin: 0 0 12px;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-error-stack {\n color: #6b7280;\n font-family: ui-monospace, monospace;\n font-size: 11px;\n margin: 0;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid var(--sandbox-border);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 300px;\n overflow: auto;\n}\n\n.sandbox-play-error {\n margin-top: 16px;\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n}\n\n.sandbox-play-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 13px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.sandbox-play-error-title::before {\n content: \"✕\";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n background: var(--sandbox-destructive);\n color: white;\n border-radius: 50%;\n font-size: 10px;\n font-weight: bold;\n}\n\n.sandbox-play-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 12px;\n margin: 0;\n padding: 10px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Legacy support for inline scenarios */\n.sandbox-inline {\n flex: 1;\n padding: 24px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.sandbox-inline-scenario {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.sandbox-inline-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n width: 100px;\n flex-shrink: 0;\n}\n\n.sandbox-inline-preview {\n flex: 1;\n background: var(--sandbox-card);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-play-slot {\n width: 32px;\n flex-shrink: 0;\n}\n\n.sandbox-play-inline {\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 12px;\n transition: all 0.15s ease;\n}\n\n.sandbox-play-inline:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play-inline:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play-inline.error {\n background: var(--sandbox-destructive);\n}\n\n/* Legacy Tabs (for backwards compatibility) */\n.sandbox-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0 24px;\n background: var(--sandbox-card);\n border-bottom: 1px solid var(--sandbox-border);\n min-height: 52px;\n overflow-x: auto;\n flex-wrap: wrap;\n}\n\n.sandbox-tab {\n padding: 14px 16px;\n min-width: 100px;\n text-align: center;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n margin-bottom: -1px;\n transition: all 0.15s ease;\n border-radius: var(--sandbox-radius-sm) var(--sandbox-radius-sm) 0 0;\n}\n\n.sandbox-tab:hover {\n color: var(--sandbox-text);\n background: var(--sandbox-bg);\n}\n\n.sandbox-tab.selected {\n color: var(--sandbox-accent);\n border-bottom-color: var(--sandbox-accent);\n background: none;\n}\n\n.sandbox-play {\n margin-left: auto;\n padding: 8px 16px;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.15s ease;\n}\n\n.sandbox-play:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-play.error:hover {\n background: #b91c1c;\n}\n\n.sandbox-preview {\n flex: 1;\n padding: 32px;\n overflow: auto;\n}\n\n/* Tabbed Layout */\n.sandbox-detail-tabbed {\n padding: 32px;\n width: 100%;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-back {\n margin-bottom: 24px;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-header {\n margin-bottom: 24px;\n}\n\n.sandbox-tabbed-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-tabs-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-tabs-list {\n display: flex;\n align-items: center;\n overflow-x: auto;\n}\n\n.sandbox-tab-item {\n padding: 14px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n transition: color 0.15s ease;\n}\n\n.sandbox-tab-item:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--sandbox-accent);\n}\n\n.sandbox-tabs-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 16px;\n}\n\n.sandbox-tab-description {\n padding: 12px 24px;\n border-bottom: 1px solid rgba(229, 224, 213, 0.5);\n background: rgba(237, 235, 229, 0.1);\n}\n\n.sandbox-tab-description p {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-tab-content {\n padding: 32px;\n}\n\n.sandbox-tab-preview {\n min-height: 300px;\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-tab-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 24px;\n overflow-x: auto;\n}\n\n.sandbox-tab-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-nav-dots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 24px;\n}\n\n.sandbox-nav-dot {\n height: 8px;\n border-radius: 9999px;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n padding: 0;\n}\n\n.sandbox-nav-dot.inactive {\n width: 8px;\n background: var(--sandbox-border);\n}\n\n.sandbox-nav-dot.inactive:hover {\n background: var(--sandbox-text-muted);\n}\n\n.sandbox-nav-dot.active {\n width: 24px;\n background: var(--sandbox-accent);\n}\n\n/* Advanced badge */\n.sandbox-badge-advanced {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n border: 1px solid rgba(249, 115, 22, 0.2);\n border-radius: 9999px;\n}\n\n/* Utility classes */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
|
|
10485
10485
|
styleInject(css_248z);
|
|
10486
10486
|
|
|
10487
10487
|
var __defProp = Object.defineProperty;
|