@youcan/celeste 0.6.53 → 0.6.54

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/celeste.css CHANGED
@@ -2118,20 +2118,315 @@ to {
2118
2118
  }
2119
2119
  .celeste-checkbox-label-link-button[data-v-ad0a5759] {
2120
2120
  margin-top: var(--spacing-10);
2121
- }.celeste-dropdown-empty-list[data-v-450bfb63] {
2121
+ }.celeste-color-area[data-v-bcf02776] {
2122
+ position: relative;
2123
+ width: 240px;
2124
+ height: 232px;
2125
+ border-radius: var(--radius-8);
2126
+ background: linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), var(--170188f0);
2127
+ }[data-v-521e5832] .celeste-popover-content-wrapper {
2128
+ z-index: 50;
2129
+ min-width: 200px;
2130
+ max-width: 400px;
2131
+ transform-origin: var(--radix-popover-content-transform-origin);
2132
+ animation: var(--animation-fast) ease-out forwards;
2133
+ border: 1px solid var(--color-stroke-soft-200);
2134
+ border-radius: var(--radius-16);
2135
+ opacity: 0;
2136
+ background-color: var(--color-bg-white-0);
2137
+ box-shadow: var(--shadow-regular-md);
2138
+ scale: 0.95;
2139
+ }
2140
+ [data-v-521e5832] .celeste-popover-content-wrapper[data-state=open] {
2141
+ animation-name: open-521e5832;
2142
+ }
2143
+ [data-v-521e5832] .celeste-popover-content-wrapper[data-state=closed] {
2144
+ animation-name: close-521e5832;
2145
+ }
2146
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow {
2147
+ display: block;
2148
+ position: relative;
2149
+ width: 16px;
2150
+ height: 8px;
2151
+ overflow: hidden;
2152
+ }
2153
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
2154
+ content: "";
2155
+ display: block;
2156
+ position: absolute;
2157
+ top: -1px;
2158
+ left: -1px;
2159
+ width: 16px;
2160
+ height: 16px;
2161
+ transform: translate(-50%, -50%);
2162
+ border: 1px solid var(--color-stroke-soft-200);
2163
+ border-radius: var(--radius-2);
2164
+ background-color: var(--color-bg-white-0);
2165
+ rotate: 45deg;
2166
+ }
2167
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-close-button {
2168
+ position: absolute;
2169
+ z-index: 50;
2170
+ inset-inline-end: var(--spacing-16);
2171
+ inset-block-start: var(--spacing-16);
2172
+ }
2173
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content {
2122
2174
  display: flex;
2123
- align-items: center;
2124
- padding: var(--spacing-8);
2175
+ flex-direction: column;
2176
+ }
2177
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
2178
+ margin: var(--spacing-0);
2179
+ }
2180
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title {
2181
+ margin-block-end: var(--spacing-8);
2182
+ color: var(--color-text-strong-950);
2183
+ font: var(--label-md);
2184
+ }
2185
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
2125
2186
  color: var(--color-text-sub-600);
2126
2187
  font: var(--paragraph-sm);
2127
- }.celeste-dropdown-items-group[data-v-66b5c9e4] {
2188
+ }
2189
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon {
2190
+ box-sizing: border-box;
2191
+ margin-block-end: var(--spacing-16);
2192
+ border: 1px solid var(--color-stroke-soft-200);
2193
+ border-radius: 50%;
2194
+ color: var(--color-icon-sub-600);
2195
+ }
2196
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=sm] {
2197
+ width: 32px;
2198
+ height: 32px;
2199
+ padding: var(--spacing-6);
2200
+ }
2201
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=md] {
2202
+ width: 40px;
2203
+ height: 40px;
2204
+ padding: var(--spacing-6);
2205
+ }
2206
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=lg] {
2207
+ width: 48px;
2208
+ height: 48px;
2209
+ padding: var(--spacing-12);
2210
+ }
2211
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xl] {
2212
+ width: 56px;
2213
+ height: 56px;
2214
+ padding: var(--spacing-14);
2215
+ }
2216
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xxl] {
2217
+ width: 64px;
2218
+ height: 64px;
2219
+ padding: var(--spacing-16);
2220
+ }
2221
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon i {
2222
+ width: 100%;
2223
+ height: 100%;
2224
+ }
2225
+ [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-footer {
2128
2226
  display: flex;
2129
- flex-direction: column;
2227
+ padding: var(--spacing-16);
2228
+ border-block-start: 1px solid var(--color-stroke-soft-200);
2229
+ }
2230
+ @keyframes open-521e5832 {
2231
+ to {
2232
+ opacity: 1;
2233
+ scale: 1;
2234
+ }
2235
+ }
2236
+ @keyframes close-521e5832 {
2237
+ from {
2238
+ opacity: 1;
2239
+ scale: 1;
2240
+ }
2241
+ to {
2242
+ scale: 0.95;
2243
+ opacity: 0;
2244
+ }
2245
+ }.celeste-popover-trigger[data-v-2664c4cb] {
2246
+ width: -moz-fit-content;
2247
+ width: fit-content;
2248
+ cursor: pointer;
2249
+ }[data-v-69b8512e] .celeste-select-content {
2250
+ z-index: 50;
2251
+ max-height: var(--radix-select-content-available-height);
2252
+ overflow-y: scroll;
2253
+ animation: var(--animation-fast) forwards;
2254
+ border: 1px solid var(--color-stroke-soft-200);
2255
+ border-radius: var(--radius-16);
2256
+ background-color: var(--color-bg-white-0);
2257
+ box-shadow: var(--shadow-regular-md);
2258
+ scale: 0.98;
2130
2259
  gap: var(--spacing-4);
2131
2260
  }
2132
- .celeste-dropdown-items-group[data-v-66b5c9e4] [data-radix-vue-combobox-item] {
2133
- width: auto;
2134
- height: auto;
2261
+ [data-v-69b8512e] .celeste-select-content[data-side=top] {
2262
+ margin-block-start: var(--spacing-4);
2263
+ animation-name: open-top-69b8512e;
2264
+ }
2265
+ [data-v-69b8512e] .celeste-select-content[data-side=bottom] {
2266
+ margin-block-end: var(--spacing-4);
2267
+ animation-name: open-bottom-69b8512e;
2268
+ }
2269
+ [data-v-69b8512e] .celeste-select-content[width=full] {
2270
+ width: var(--radix-select-trigger-width);
2271
+ }
2272
+ [data-v-69b8512e] .celeste-select-content .celeste-select-view-port {
2273
+ padding: var(--spacing-8);
2274
+ }
2275
+ @keyframes open-bottom-69b8512e {
2276
+ to {
2277
+ scale: 1;
2278
+ margin-block-start: var(--spacing-8);
2279
+ }
2280
+ }
2281
+ @keyframes open-top-69b8512e {
2282
+ to {
2283
+ scale: 1;
2284
+ margin-block-end: var(--spacing-8);
2285
+ }
2286
+ }.celeste-select-item[data-v-48e92b74] {
2287
+ display: flex;
2288
+ align-items: center;
2289
+ justify-content: space-between;
2290
+ padding: var(--spacing-8);
2291
+ gap: var(--spacing-4);
2292
+ border-radius: var(--radius-8);
2293
+ outline: 2px solid transparent;
2294
+ outline-offset: 2px;
2295
+ background-color: var(--color-bg-white-0);
2296
+ color: var(--color-text-strong-950);
2297
+ font: var(--paragraph-sm);
2298
+ cursor: pointer;
2299
+ }
2300
+ .celeste-select-item[data-v-48e92b74] .celeste-select-icon {
2301
+ flex-shrink: 0;
2302
+ color: var(--color-icon-sub-600);
2303
+ }
2304
+ .celeste-select-item[data-v-48e92b74]:hover, .celeste-select-item[data-v-48e92b74]:focus {
2305
+ background-color: var(--color-bg-weak-50);
2306
+ }
2307
+ .celeste-select-item[data-v-48e92b74] > span {
2308
+ display: flex;
2309
+ align-items: center;
2310
+ gap: var(--spacing-8);
2311
+ }
2312
+ .celeste-select-item[data-disabled][data-v-48e92b74] {
2313
+ color: var(--color-text-disabled-300);
2314
+ pointer-events: none;
2315
+ -webkit-user-select: none;
2316
+ -moz-user-select: none;
2317
+ user-select: none;
2318
+ }
2319
+ .celeste-select-item[data-disabled][data-v-48e92b74] i {
2320
+ color: var(--color-icon-disabled-300);
2321
+ }
2322
+ .celeste-select-item[data-disabled][data-v-48e92b74] .celeste-select-icon > img {
2323
+ opacity: 0.3;
2324
+ }.celeste-select-trigger[data-v-039f6664] {
2325
+ display: flex;
2326
+ align-items: center;
2327
+ justify-content: space-between;
2328
+ padding: var(--spacing-10);
2329
+ transition: all var(--animation-fast) ease-out;
2330
+ border: 1px solid var(--color-stroke-soft-200);
2331
+ border-radius: var(--radius-10);
2332
+ outline: 2px solid transparent;
2333
+ outline-offset: 2px;
2334
+ background-color: var(--color-bg-white-0);
2335
+ box-shadow: var(--shadow-regular-xs);
2336
+ cursor: pointer;
2337
+ gap: var(--spacing-8);
2338
+ }
2339
+ .celeste-select-trigger > i[data-v-039f6664] {
2340
+ transition: rotate var(--animation-fast) ease-out;
2341
+ }
2342
+ .celeste-select-trigger[data-v-039f6664] .celeste-select-value {
2343
+ flex: 2;
2344
+ }
2345
+ .celeste-select-trigger[size=xs][data-v-039f6664] {
2346
+ height: 32px;
2347
+ }
2348
+ .celeste-select-trigger[size=sm][data-v-039f6664] {
2349
+ height: 36px;
2350
+ }
2351
+ .celeste-select-trigger[size=md][data-v-039f6664] {
2352
+ height: 40px;
2353
+ }
2354
+ .celeste-select-trigger[variant=compact][data-v-039f6664] {
2355
+ width: -moz-fit-content;
2356
+ width: fit-content;
2357
+ }
2358
+ .celeste-select-trigger[variant=inline][data-v-039f6664] {
2359
+ width: -moz-fit-content;
2360
+ width: fit-content;
2361
+ height: -moz-fit-content;
2362
+ height: fit-content;
2363
+ padding: var(--spacing-0);
2364
+ border-radius: 0;
2365
+ border-color: transparent;
2366
+ background-color: transparent;
2367
+ box-shadow: none;
2368
+ }
2369
+ .celeste-select-trigger[haserror=true][data-v-039f6664] {
2370
+ border-color: var(--color-state-error-base);
2371
+ }
2372
+ .celeste-select-trigger[aria-expanded=true] > i[data-v-039f6664] {
2373
+ rotate: 180deg;
2374
+ }
2375
+ .celeste-select-trigger:focus > i[data-v-039f6664] {
2376
+ color: var(--color-icon-strong-950);
2377
+ }
2378
+ .celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-value {
2379
+ color: var(--color-text-sub-600);
2380
+ }
2381
+ .celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-value ~ i {
2382
+ color: var(--color-icon-soft-400);
2383
+ }
2384
+ .celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-icon {
2385
+ color: var(--color-icon-soft-400);
2386
+ }
2387
+ .celeste-select-trigger[data-v-039f6664]:disabled {
2388
+ border-color: transparent;
2389
+ background-color: var(--color-bg-weak-50);
2390
+ pointer-events: none;
2391
+ }
2392
+ .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value {
2393
+ color: var(--color-text-disabled-300);
2394
+ }
2395
+ .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value i, .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value ~ i {
2396
+ color: var(--color-icon-disabled-400);
2397
+ }
2398
+ .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value .celeste-select-icon > img {
2399
+ opacity: 0.3;
2400
+ }
2401
+ .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-icon {
2402
+ color: var(--color-icon-disabled-400);
2403
+ }
2404
+ .celeste-select-trigger[data-v-039f6664]:not([data-placeholder]) > :first-child.celeste-select-icon {
2405
+ display: none;
2406
+ }
2407
+ .celeste-select-trigger:hover[variant=inline] > i[data-v-039f6664], .celeste-select-trigger:hover[variant=inline][data-v-039f6664] .celeste-select-icon, .celeste-select-trigger:hover[variant=inline][data-v-039f6664] .celeste-select-value {
2408
+ color: var(--color-text-strong-950);
2409
+ }
2410
+ .celeste-select-trigger[data-v-039f6664]:hover:not([variant=inline]) {
2411
+ border-color: transparent;
2412
+ background-color: var(--color-bg-weak-50);
2413
+ }
2414
+ .celeste-select-trigger[data-v-039f6664]:focus:not([variant=inline]) {
2415
+ border-color: var(--color-stroke-strong-950);
2416
+ outline-color: var(--color-stroke-soft-200);
2417
+ }.celeste-select-value[data-v-db7cc720] {
2418
+ display: flex;
2419
+ align-items: center;
2420
+ overflow: hidden;
2421
+ color: var(--color-text-strong-950);
2422
+ font: var(--paragraph-sm);
2423
+ text-overflow: ellipsis;
2424
+ white-space: nowrap;
2425
+ gap: var(--spacing-8);
2426
+ }
2427
+ .celeste-select-value[data-v-db7cc720] i, .celeste-select-value[data-v-db7cc720] ~ i {
2428
+ flex-shrink: 0;
2429
+ color: var(--color-icon-sub-600);
2135
2430
  }.celeste-text-input-button[data-v-00ed5aef] {
2136
2431
  border: none;
2137
2432
  }
@@ -2230,87 +2525,239 @@ to {
2230
2525
  -webkit-appearance: none;
2231
2526
  appearance: none;
2232
2527
  }
2233
- .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-leading-node) {
2234
- padding-inline-start: 0;
2528
+ .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-leading-node) {
2529
+ padding-inline-start: 0;
2530
+ }
2531
+ .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-trailing-node) {
2532
+ padding-inline-end: 0;
2533
+ }
2534
+ .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:focus) {
2535
+ --celeste-text-input-border-color: var(--color-stroke-strong-950);
2536
+ --celeste-text-input-placeholder-color: var(--color-text-sub-600);
2537
+ --celeste-text-input-icon-color: var(--color-text-sub-600);
2538
+ --celeste-text-input-affix-color: var(--color-text-sub-600);
2539
+ outline-color: var(--color-stroke-soft-200);
2540
+ }
2541
+ .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-8706da95] {
2542
+ --celeste-text-input-border-color: var(--color-state-error-base);
2543
+ outline-color: var(--color-state-error-lighter);
2544
+ }
2545
+ .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:disabled) {
2546
+ --celeste-text-input-border-color: transparent;
2547
+ --celeste-text-input-drop-shadow: none;
2548
+ --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
2549
+ --celeste-text-input-affix-color: var(--color-text-disabled-300);
2550
+ --celeste-text-input-placeholder-color: var(--color-text-disabled-300);
2551
+ --celeste-text-input-icon-color: var(--color-text-disabled-300);
2552
+ background-color: var(--color-bg-weak-50);
2553
+ box-shadow: none;
2554
+ color: var(--color-text-disabled-300);
2555
+ pointer-events: none;
2556
+ }
2557
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::-moz-placeholder {
2558
+ color: currentcolor;
2559
+ }
2560
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::placeholder {
2561
+ color: currentcolor;
2562
+ }
2563
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-8706da95] {
2564
+ color: var(--color-text-disabled-300);
2565
+ pointer-events: none;
2566
+ }
2567
+ .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
2568
+ --celeste-text-input-border-color: transparent;
2569
+ }
2570
+ .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
2571
+ --celeste-text-input-icon-color: var(--color-text-sub-600);
2572
+ --celeste-text-input-placeholder-color: var(--color-text-sub-600);
2573
+ background-color: var(--color-bg-weak-50);
2574
+ }
2575
+ .celeste-text-input-wrapper .celeste-text-input-icon[data-v-8706da95] {
2576
+ flex-shrink: 0;
2577
+ width: 20px;
2578
+ height: 20px;
2579
+ transition: all var(--animation-fast) ease-out;
2580
+ color: var(--celeste-text-input-icon-color);
2581
+ }
2582
+ .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node,
2583
+ .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
2584
+ height: calc(var(--input-height) - var(--spacing-2)) !important;
2585
+ }
2586
+ [dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
2587
+ border-right: 1px solid var(--color-stroke-soft-200) !important;
2588
+ border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2589
+ }
2590
+ [dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
2591
+ border-left: 1px solid var(--color-stroke-soft-200) !important;
2592
+ border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2593
+ }
2594
+ [dir=rtl] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
2595
+ border-left: 1px solid var(--color-stroke-soft-200) !important;
2596
+ border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2597
+ }
2598
+ [dir=rtl] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
2599
+ border-right: 1px solid var(--color-stroke-soft-200) !important;
2600
+ border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2601
+ }
2602
+ .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
2603
+ border-right: 1px solid var(--color-stroke-soft-200) !important;
2604
+ border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2605
+ }
2606
+ .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
2607
+ border-left: 1px solid var(--color-stroke-soft-200) !important;
2608
+ border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2609
+ }.celeste-color-swatch[data-v-095c22f0] {
2610
+ display: flex;
2611
+ flex-direction: column;
2612
+ gap: var(--spacing-8);
2613
+ }
2614
+ .celeste-color-swatch .swatch-label[data-v-095c22f0] {
2615
+ color: var(--color-text-sub-600);
2616
+ font: var(--paragraph-xs);
2617
+ }
2618
+ .celeste-color-swatch .color-palette[data-v-095c22f0] {
2619
+ display: flex;
2620
+ gap: var(--spacing-4);
2621
+ align-items: center;
2622
+ }
2623
+ .celeste-color-swatch .color-palette .palette-color[data-v-095c22f0] {
2624
+ box-sizing: border-box;
2625
+ width: 16px;
2626
+ height: 16px;
2627
+ margin: var(--spacing-4);
2628
+ padding: var(--spacing-4);
2629
+ border-radius: 50%;
2630
+ }
2631
+ .celeste-color-swatch .color-palette .palette-color[aria-selected=true][data-v-095c22f0] {
2632
+ box-shadow: var(--0829b6e2);
2633
+ }
2634
+ .celeste-color-swatch .color-palette .palette-color[data-v-095c22f0]:hover {
2635
+ cursor: pointer;
2636
+ }.celeste-color-slider .slider-track[data-v-cb479a28] {
2637
+ background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
2638
+ }.celeste-picker-trigger[data-v-5d801c64] {
2639
+ gap: var(--spacing-12);
2640
+ }
2641
+ .celeste-picker-trigger .celeste-selected-color[data-v-5d801c64] {
2642
+ --color-tile-size: 20px;
2643
+ display: block;
2644
+ width: var(--color-tile-size);
2645
+ height: var(--color-tile-size);
2646
+ border-radius: var(--radius-4);
2647
+ background-color: var(--88e786d6);
2648
+ }
2649
+ .celeste-color-picker-wrapper[data-v-5d801c64] {
2650
+ display: grid;
2651
+ box-sizing: border-box;
2652
+ width: 272px;
2653
+ }
2654
+ .celeste-color-picker-wrapper .celeste-color-picker[data-v-5d801c64] {
2655
+ display: flex;
2656
+ flex-direction: column;
2657
+ align-items: center;
2658
+ justify-content: center;
2659
+ padding: var(--spacing-16);
2660
+ gap: var(--spacing-12);
2661
+ }
2662
+ .celeste-color-picker-wrapper .celeste-color-picker[data-v-5d801c64] > * {
2663
+ box-sizing: border-box;
2664
+ }
2665
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel[data-v-5d801c64] {
2666
+ display: flex;
2667
+ flex-direction: column;
2668
+ width: 100%;
2669
+ gap: var(--spacing-4);
2670
+ }
2671
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-selected-color-format[data-v-5d801c64] {
2672
+ text-transform: uppercase;
2673
+ }
2674
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-5d801c64] {
2675
+ display: flex;
2676
+ width: 100%;
2677
+ height: 32px;
2678
+ }
2679
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-5d801c64] {
2680
+ border-start-end-radius: 0;
2681
+ border-end-end-radius: 0;
2235
2682
  }
2236
- .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-trailing-node) {
2237
- padding-inline-end: 0;
2683
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-5d801c64]:focus-within {
2684
+ z-index: 2;
2238
2685
  }
2239
- .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:focus) {
2240
- --celeste-text-input-border-color: var(--color-stroke-strong-950);
2241
- --celeste-text-input-placeholder-color: var(--color-text-sub-600);
2242
- --celeste-text-input-icon-color: var(--color-text-sub-600);
2243
- --celeste-text-input-affix-color: var(--color-text-sub-600);
2244
- outline-color: var(--color-stroke-soft-200);
2686
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-5d801c64] > * {
2687
+ box-sizing: border-box;
2688
+ height: 100%;
2245
2689
  }
2246
- .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-8706da95] {
2247
- --celeste-text-input-border-color: var(--color-state-error-base);
2248
- outline-color: var(--color-state-error-lighter);
2690
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs[data-v-5d801c64] {
2691
+ display: flex;
2249
2692
  }
2250
- .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:disabled) {
2251
- --celeste-text-input-border-color: transparent;
2252
- --celeste-text-input-drop-shadow: none;
2253
- --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
2254
- --celeste-text-input-affix-color: var(--color-text-disabled-300);
2255
- --celeste-text-input-placeholder-color: var(--color-text-disabled-300);
2256
- --celeste-text-input-icon-color: var(--color-text-disabled-300);
2257
- background-color: var(--color-bg-weak-50);
2258
- box-shadow: none;
2259
- color: var(--color-text-disabled-300);
2260
- pointer-events: none;
2693
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64] {
2694
+ margin-inline-start: -1px;
2695
+ border-radius: 0;
2261
2696
  }
2262
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::-moz-placeholder {
2263
- color: currentcolor;
2697
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:focus-within {
2698
+ z-index: 2;
2264
2699
  }
2265
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::placeholder {
2266
- color: currentcolor;
2700
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:last-child {
2701
+ border-start-end-radius: var(--radius-8);
2702
+ border-end-end-radius: var(--radius-8);
2267
2703
  }
2268
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-8706da95] {
2269
- color: var(--color-text-disabled-300);
2270
- pointer-events: none;
2704
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(4), .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(4) ~ * {
2705
+ flex: 1;
2271
2706
  }
2272
- .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
2273
- --celeste-text-input-border-color: transparent;
2707
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(2) {
2708
+ flex: 3;
2274
2709
  }
2275
- .celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
2276
- --celeste-text-input-icon-color: var(--color-text-sub-600);
2277
- --celeste-text-input-placeholder-color: var(--color-text-sub-600);
2278
- background-color: var(--color-bg-weak-50);
2710
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:last-child:nth-child(2) {
2711
+ flex: 1;
2279
2712
  }
2280
- .celeste-text-input-wrapper .celeste-text-input-icon[data-v-8706da95] {
2281
- flex-shrink: 0;
2282
- width: 20px;
2283
- height: 20px;
2284
- transition: all var(--animation-fast) ease-out;
2285
- color: var(--celeste-text-input-icon-color);
2713
+ .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs:first-child:last-child .color-input[data-v-5d801c64]:first-child {
2714
+ border-start-start-radius: var(--radius-8);
2715
+ border-end-start-radius: var(--radius-8);
2286
2716
  }
2287
- .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node,
2288
- .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
2289
- height: calc(var(--input-height) - var(--spacing-2)) !important;
2717
+ .celeste-color-picker-wrapper .celeste-color-swatches[data-v-5d801c64] {
2718
+ display: flex;
2719
+ flex-direction: column;
2720
+ padding: var(--radius-16);
2721
+ border-block-start: 1px solid var(--color-stroke-soft-200);
2290
2722
  }
2291
- [dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
2292
- border-right: 1px solid var(--color-stroke-soft-200) !important;
2293
- border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2723
+ [data-v-5d801c64] .celeste-color-format {
2724
+ text-transform: uppercase;
2294
2725
  }
2295
- [dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
2296
- border-left: 1px solid var(--color-stroke-soft-200) !important;
2297
- border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2726
+ [data-v-5d801c64] .celeste-color-thumb {
2727
+ position: absolute;
2728
+ width: 12px;
2729
+ height: 12px;
2730
+ transform: translate(-50%, -50%);
2731
+ border-radius: 50%;
2732
+ box-shadow: 0 0 0 2px var(--color-bg-white-0), var(--shadow-toggle-switch);
2298
2733
  }
2299
- [dir=rtl] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
2300
- border-left: 1px solid var(--color-stroke-soft-200) !important;
2301
- border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2734
+ [data-v-5d801c64] .celeste-color-slider {
2735
+ --track-height: 8px;
2736
+ width: 100%;
2737
+ padding-block: var(--spacing-4);
2302
2738
  }
2303
- [dir=rtl] .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
2304
- border-right: 1px solid var(--color-stroke-soft-200) !important;
2305
- border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2739
+ [data-v-5d801c64] .celeste-color-slider .slider-track {
2740
+ position: relative;
2741
+ width: 100%;
2742
+ height: var(--track-height);
2743
+ border-radius: calc(var(--track-height) / 2);
2306
2744
  }
2307
- .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node {
2308
- border-right: 1px solid var(--color-stroke-soft-200) !important;
2309
- border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2745
+ [data-v-5d801c64] .celeste-color-slider .slider-track .celeste-color-thumb {
2746
+ top: calc(var(--track-height) / 2);
2747
+ }.celeste-dropdown-empty-list[data-v-450bfb63] {
2748
+ display: flex;
2749
+ align-items: center;
2750
+ padding: var(--spacing-8);
2751
+ color: var(--color-text-sub-600);
2752
+ font: var(--paragraph-sm);
2753
+ }.celeste-dropdown-items-group[data-v-66b5c9e4] {
2754
+ display: flex;
2755
+ flex-direction: column;
2756
+ gap: var(--spacing-4);
2310
2757
  }
2311
- .celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
2312
- border-left: 1px solid var(--color-stroke-soft-200) !important;
2313
- border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2758
+ .celeste-dropdown-items-group[data-v-66b5c9e4] [data-radix-vue-combobox-item] {
2759
+ width: auto;
2760
+ height: auto;
2314
2761
  }.celeste-dropdown-input[data-v-bd59a65e] {
2315
2762
  display: flex;
2316
2763
  align-items: center;
@@ -3829,157 +4276,35 @@ to {
3829
4276
  inset-inline-end: var(--spacing-16);
3830
4277
  }
3831
4278
  .celeste-modal-header[data-v-9d299b40]:has(.description) {
3832
- --modal-header-icon-size: 20px;
3833
- }
3834
- .celeste-modal-header:has(.description) .icon[data-v-9d299b40] {
3835
- padding: var(--spacing-10);
3836
- border: 1px solid transparent;
3837
- border-radius: var(--radius-full);
3838
- }
3839
- .celeste-modal-header:has(.description)[data-dismissible=false] .icon[data-v-9d299b40] {
3840
- padding: var(--spacing-8);
3841
- border-radius: var(--radius-10);
3842
- }
3843
- .celeste-modal-header:has(.description)[data-type=default] .icon[data-v-9d299b40] {
3844
- border-color: var(--color-stroke-soft-200);
3845
- }
3846
- .celeste-modal-header:has(.description)[data-type=success] .icon[data-v-9d299b40] {
3847
- background: var(--color-state-success-lighter);
3848
- color: var(--color-state-success-base);
3849
- }
3850
- .celeste-modal-header:has(.description)[data-type=information] .icon[data-v-9d299b40] {
3851
- background: var(--color-state-information-lighter);
3852
- color: var(--color-state-information-base);
3853
- }
3854
- .celeste-modal-header:has(.description)[data-type=warning] .icon[data-v-9d299b40] {
3855
- background: var(--color-state-warning-lighter);
3856
- color: var(--color-state-warning-base);
3857
- }
3858
- .celeste-modal-header:has(.description)[data-type=error] .icon[data-v-9d299b40] {
3859
- background: var(--color-state-error-lighter);
3860
- color: var(--color-state-error-base);
3861
- }[data-v-521e5832] .celeste-popover-content-wrapper {
3862
- z-index: 50;
3863
- min-width: 200px;
3864
- max-width: 400px;
3865
- transform-origin: var(--radix-popover-content-transform-origin);
3866
- animation: var(--animation-fast) ease-out forwards;
3867
- border: 1px solid var(--color-stroke-soft-200);
3868
- border-radius: var(--radius-16);
3869
- opacity: 0;
3870
- background-color: var(--color-bg-white-0);
3871
- box-shadow: var(--shadow-regular-md);
3872
- scale: 0.95;
3873
- }
3874
- [data-v-521e5832] .celeste-popover-content-wrapper[data-state=open] {
3875
- animation-name: open-521e5832;
3876
- }
3877
- [data-v-521e5832] .celeste-popover-content-wrapper[data-state=closed] {
3878
- animation-name: close-521e5832;
3879
- }
3880
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow {
3881
- display: block;
3882
- position: relative;
3883
- width: 16px;
3884
- height: 8px;
3885
- overflow: hidden;
3886
- }
3887
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
3888
- content: "";
3889
- display: block;
3890
- position: absolute;
3891
- top: -1px;
3892
- left: -1px;
3893
- width: 16px;
3894
- height: 16px;
3895
- transform: translate(-50%, -50%);
3896
- border: 1px solid var(--color-stroke-soft-200);
3897
- border-radius: var(--radius-2);
3898
- background-color: var(--color-bg-white-0);
3899
- rotate: 45deg;
3900
- }
3901
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-close-button {
3902
- position: absolute;
3903
- z-index: 50;
3904
- inset-inline-end: var(--spacing-16);
3905
- inset-block-start: var(--spacing-16);
3906
- }
3907
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content {
3908
- display: flex;
3909
- flex-direction: column;
3910
- }
3911
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
3912
- margin: var(--spacing-0);
3913
- }
3914
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title {
3915
- margin-block-end: var(--spacing-8);
3916
- color: var(--color-text-strong-950);
3917
- font: var(--label-md);
3918
- }
3919
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
3920
- color: var(--color-text-sub-600);
3921
- font: var(--paragraph-sm);
3922
- }
3923
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon {
3924
- box-sizing: border-box;
3925
- margin-block-end: var(--spacing-16);
3926
- border: 1px solid var(--color-stroke-soft-200);
3927
- border-radius: 50%;
3928
- color: var(--color-icon-sub-600);
3929
- }
3930
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=sm] {
3931
- width: 32px;
3932
- height: 32px;
3933
- padding: var(--spacing-6);
3934
- }
3935
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=md] {
3936
- width: 40px;
3937
- height: 40px;
3938
- padding: var(--spacing-6);
3939
- }
3940
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=lg] {
3941
- width: 48px;
3942
- height: 48px;
3943
- padding: var(--spacing-12);
3944
- }
3945
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xl] {
3946
- width: 56px;
3947
- height: 56px;
3948
- padding: var(--spacing-14);
3949
- }
3950
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xxl] {
3951
- width: 64px;
3952
- height: 64px;
3953
- padding: var(--spacing-16);
3954
- }
3955
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon i {
3956
- width: 100%;
3957
- height: 100%;
4279
+ --modal-header-icon-size: 20px;
3958
4280
  }
3959
- [data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-footer {
3960
- display: flex;
3961
- padding: var(--spacing-16);
3962
- border-block-start: 1px solid var(--color-stroke-soft-200);
4281
+ .celeste-modal-header:has(.description) .icon[data-v-9d299b40] {
4282
+ padding: var(--spacing-10);
4283
+ border: 1px solid transparent;
4284
+ border-radius: var(--radius-full);
3963
4285
  }
3964
- @keyframes open-521e5832 {
3965
- to {
3966
- opacity: 1;
3967
- scale: 1;
4286
+ .celeste-modal-header:has(.description)[data-dismissible=false] .icon[data-v-9d299b40] {
4287
+ padding: var(--spacing-8);
4288
+ border-radius: var(--radius-10);
3968
4289
  }
4290
+ .celeste-modal-header:has(.description)[data-type=default] .icon[data-v-9d299b40] {
4291
+ border-color: var(--color-stroke-soft-200);
3969
4292
  }
3970
- @keyframes close-521e5832 {
3971
- from {
3972
- opacity: 1;
3973
- scale: 1;
4293
+ .celeste-modal-header:has(.description)[data-type=success] .icon[data-v-9d299b40] {
4294
+ background: var(--color-state-success-lighter);
4295
+ color: var(--color-state-success-base);
3974
4296
  }
3975
- to {
3976
- scale: 0.95;
3977
- opacity: 0;
4297
+ .celeste-modal-header:has(.description)[data-type=information] .icon[data-v-9d299b40] {
4298
+ background: var(--color-state-information-lighter);
4299
+ color: var(--color-state-information-base);
3978
4300
  }
3979
- }.celeste-popover-trigger[data-v-2664c4cb] {
3980
- width: -moz-fit-content;
3981
- width: fit-content;
3982
- cursor: pointer;
4301
+ .celeste-modal-header:has(.description)[data-type=warning] .icon[data-v-9d299b40] {
4302
+ background: var(--color-state-warning-lighter);
4303
+ color: var(--color-state-warning-base);
4304
+ }
4305
+ .celeste-modal-header:has(.description)[data-type=error] .icon[data-v-9d299b40] {
4306
+ background: var(--color-state-error-lighter);
4307
+ color: var(--color-state-error-base);
3983
4308
  }.celeste-progress-bar-wrapper[data-v-850aadb2] {
3984
4309
  --bar-height: 6px;
3985
4310
  display: flex;
@@ -4123,278 +4448,97 @@ to {
4123
4448
  height: 20px;
4124
4449
  color: var(--color-icon-sub-600);
4125
4450
  }
4126
- .celeste-radio-card-preview-image[data-v-5747c91e] {
4127
- border: none;
4128
- }
4129
- .celeste-radio-card-preview-image i[data-v-5747c91e] {
4130
- position: absolute;
4131
- z-index: 0;
4132
- top: 50%;
4133
- left: 50%;
4134
- width: 20px;
4135
- height: 20px;
4136
- transform: translate(-50%, -50%);
4137
- color: var(--color-icon-sub-600);
4138
- }
4139
- .celeste-radio-card-preview-image[data-v-5747c91e] img {
4140
- z-index: 1000;
4141
- }
4142
- .celeste-radio-card-content[data-v-5747c91e] {
4143
- display: flex;
4144
- flex-direction: column;
4145
- gap: var(--spacing-4);
4146
- }
4147
- .celeste-radio-card-row[data-v-5747c91e] {
4148
- display: flex;
4149
- flex-shrink: 1;
4150
- align-items: center;
4151
- gap: var(--spacing-8);
4152
- }
4153
- .celeste-radio-card-label[data-v-5747c91e] {
4154
- flex-shrink: 1;
4155
- min-width: 0;
4156
- overflow: hidden;
4157
- color: var(--color-text-strong-950);
4158
- font: var(--label-sm);
4159
- text-overflow: ellipsis;
4160
- white-space: nowrap;
4161
- }
4162
- .celeste-radio-card-sublabel[data-v-5747c91e] {
4163
- flex-shrink: 1;
4164
- min-width: 0;
4165
- overflow: hidden;
4166
- color: var(--color-text-sub-600);
4167
- font: var(--paragraph-xs);
4168
- text-overflow: ellipsis;
4169
- white-space: nowrap;
4170
- }
4171
- .celeste-radio-card-description[data-v-5747c91e] {
4172
- color: var(--color-text-sub-600);
4173
- font: var(--paragraph-xs);
4174
- }
4175
- [data-v-5747c91e] .celeste-radio-card-radio {
4176
- margin-inline-start: auto;
4177
- }
4178
- .celeste-radio-card-disabled[data-v-5747c91e] {
4179
- cursor: not-allowed;
4180
- }
4181
- .celeste-radio-card-disabled .celeste-radio-card-label[data-v-5747c91e] {
4182
- color: var(--color-text-sub-600);
4183
- }
4184
- .celeste-radio-card-disabled .celeste-radio-card-sublabel[data-v-5747c91e] {
4185
- color: var(--color-text-soft-400);
4186
- }
4187
- .celeste-radio-card-disabled .celeste-radio-card-description[data-v-5747c91e] {
4188
- color: var(--color-text-soft-400);
4189
- }.celeste-radio-label[data-v-32cb773e] {
4190
- display: flex;
4191
- color: var(--color-text-strong-950);
4192
- font: var(--paragraph-sm);
4193
- gap: var(--spacing-8);
4194
- }
4195
- [data-v-32cb773e] .celeste-radio-label-radio {
4196
- margin-top: var(--spacing-2);
4197
- }
4198
- .celeste-radio-label-row[data-v-32cb773e] {
4199
- display: flex;
4200
- align-items: center;
4201
- gap: var(--spacing-8);
4202
- }
4203
- .celeste-radio-label-sublabel[data-v-32cb773e] {
4204
- color: var(--color-text-sub-600);
4205
- font: var(--paragraph-xs);
4206
- }
4207
- .celeste-radio-label-content[data-v-32cb773e] {
4208
- display: flex;
4209
- flex-direction: column;
4210
- align-items: flex-start;
4211
- margin-top: var(--spacing-4);
4212
- color: var(--color-text-sub-600);
4213
- font: var(--paragraph-xs);
4214
- }
4215
- .celeste-radio-label-link-button[data-v-32cb773e] {
4216
- margin-top: var(--spacing-10);
4217
- }[data-v-69b8512e] .celeste-select-content {
4218
- z-index: 50;
4219
- max-height: var(--radix-select-content-available-height);
4220
- overflow-y: scroll;
4221
- animation: var(--animation-fast) forwards;
4222
- border: 1px solid var(--color-stroke-soft-200);
4223
- border-radius: var(--radius-16);
4224
- background-color: var(--color-bg-white-0);
4225
- box-shadow: var(--shadow-regular-md);
4226
- scale: 0.98;
4227
- gap: var(--spacing-4);
4228
- }
4229
- [data-v-69b8512e] .celeste-select-content[data-side=top] {
4230
- margin-block-start: var(--spacing-4);
4231
- animation-name: open-top-69b8512e;
4232
- }
4233
- [data-v-69b8512e] .celeste-select-content[data-side=bottom] {
4234
- margin-block-end: var(--spacing-4);
4235
- animation-name: open-bottom-69b8512e;
4236
- }
4237
- [data-v-69b8512e] .celeste-select-content[width=full] {
4238
- width: var(--radix-select-trigger-width);
4239
- }
4240
- [data-v-69b8512e] .celeste-select-content .celeste-select-view-port {
4241
- padding: var(--spacing-8);
4242
- }
4243
- @keyframes open-bottom-69b8512e {
4244
- to {
4245
- scale: 1;
4246
- margin-block-start: var(--spacing-8);
4247
- }
4248
- }
4249
- @keyframes open-top-69b8512e {
4250
- to {
4251
- scale: 1;
4252
- margin-block-end: var(--spacing-8);
4253
- }
4254
- }.celeste-select-item[data-v-48e92b74] {
4255
- display: flex;
4256
- align-items: center;
4257
- justify-content: space-between;
4258
- padding: var(--spacing-8);
4259
- gap: var(--spacing-4);
4260
- border-radius: var(--radius-8);
4261
- outline: 2px solid transparent;
4262
- outline-offset: 2px;
4263
- background-color: var(--color-bg-white-0);
4264
- color: var(--color-text-strong-950);
4265
- font: var(--paragraph-sm);
4266
- cursor: pointer;
4267
- }
4268
- .celeste-select-item[data-v-48e92b74] .celeste-select-icon {
4269
- flex-shrink: 0;
4270
- color: var(--color-icon-sub-600);
4271
- }
4272
- .celeste-select-item[data-v-48e92b74]:hover, .celeste-select-item[data-v-48e92b74]:focus {
4273
- background-color: var(--color-bg-weak-50);
4274
- }
4275
- .celeste-select-item[data-v-48e92b74] > span {
4276
- display: flex;
4277
- align-items: center;
4278
- gap: var(--spacing-8);
4279
- }
4280
- .celeste-select-item[data-disabled][data-v-48e92b74] {
4281
- color: var(--color-text-disabled-300);
4282
- pointer-events: none;
4283
- -webkit-user-select: none;
4284
- -moz-user-select: none;
4285
- user-select: none;
4286
- }
4287
- .celeste-select-item[data-disabled][data-v-48e92b74] i {
4288
- color: var(--color-icon-disabled-300);
4289
- }
4290
- .celeste-select-item[data-disabled][data-v-48e92b74] .celeste-select-icon > img {
4291
- opacity: 0.3;
4292
- }.celeste-select-trigger[data-v-039f6664] {
4293
- display: flex;
4294
- align-items: center;
4295
- justify-content: space-between;
4296
- padding: var(--spacing-10);
4297
- transition: all var(--animation-fast) ease-out;
4298
- border: 1px solid var(--color-stroke-soft-200);
4299
- border-radius: var(--radius-10);
4300
- outline: 2px solid transparent;
4301
- outline-offset: 2px;
4302
- background-color: var(--color-bg-white-0);
4303
- box-shadow: var(--shadow-regular-xs);
4304
- cursor: pointer;
4305
- gap: var(--spacing-8);
4306
- }
4307
- .celeste-select-trigger > i[data-v-039f6664] {
4308
- transition: rotate var(--animation-fast) ease-out;
4309
- }
4310
- .celeste-select-trigger[data-v-039f6664] .celeste-select-value {
4311
- flex: 2;
4312
- }
4313
- .celeste-select-trigger[size=xs][data-v-039f6664] {
4314
- height: 32px;
4315
- }
4316
- .celeste-select-trigger[size=sm][data-v-039f6664] {
4317
- height: 36px;
4318
- }
4319
- .celeste-select-trigger[size=md][data-v-039f6664] {
4320
- height: 40px;
4321
- }
4322
- .celeste-select-trigger[variant=compact][data-v-039f6664] {
4323
- width: -moz-fit-content;
4324
- width: fit-content;
4325
- }
4326
- .celeste-select-trigger[variant=inline][data-v-039f6664] {
4327
- width: -moz-fit-content;
4328
- width: fit-content;
4329
- height: -moz-fit-content;
4330
- height: fit-content;
4331
- padding: var(--spacing-0);
4332
- border-radius: 0;
4333
- border-color: transparent;
4334
- background-color: transparent;
4335
- box-shadow: none;
4336
- }
4337
- .celeste-select-trigger[haserror=true][data-v-039f6664] {
4338
- border-color: var(--color-state-error-base);
4339
- }
4340
- .celeste-select-trigger[aria-expanded=true] > i[data-v-039f6664] {
4341
- rotate: 180deg;
4451
+ .celeste-radio-card-preview-image[data-v-5747c91e] {
4452
+ border: none;
4342
4453
  }
4343
- .celeste-select-trigger:focus > i[data-v-039f6664] {
4344
- color: var(--color-icon-strong-950);
4454
+ .celeste-radio-card-preview-image i[data-v-5747c91e] {
4455
+ position: absolute;
4456
+ z-index: 0;
4457
+ top: 50%;
4458
+ left: 50%;
4459
+ width: 20px;
4460
+ height: 20px;
4461
+ transform: translate(-50%, -50%);
4462
+ color: var(--color-icon-sub-600);
4345
4463
  }
4346
- .celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-value {
4347
- color: var(--color-text-sub-600);
4464
+ .celeste-radio-card-preview-image[data-v-5747c91e] img {
4465
+ z-index: 1000;
4348
4466
  }
4349
- .celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-value ~ i {
4350
- color: var(--color-icon-soft-400);
4467
+ .celeste-radio-card-content[data-v-5747c91e] {
4468
+ display: flex;
4469
+ flex-direction: column;
4470
+ gap: var(--spacing-4);
4351
4471
  }
4352
- .celeste-select-trigger[data-placeholder][data-v-039f6664] .celeste-select-icon {
4353
- color: var(--color-icon-soft-400);
4472
+ .celeste-radio-card-row[data-v-5747c91e] {
4473
+ display: flex;
4474
+ flex-shrink: 1;
4475
+ align-items: center;
4476
+ gap: var(--spacing-8);
4354
4477
  }
4355
- .celeste-select-trigger[data-v-039f6664]:disabled {
4356
- border-color: transparent;
4357
- background-color: var(--color-bg-weak-50);
4358
- pointer-events: none;
4478
+ .celeste-radio-card-label[data-v-5747c91e] {
4479
+ flex-shrink: 1;
4480
+ min-width: 0;
4481
+ overflow: hidden;
4482
+ color: var(--color-text-strong-950);
4483
+ font: var(--label-sm);
4484
+ text-overflow: ellipsis;
4485
+ white-space: nowrap;
4359
4486
  }
4360
- .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value {
4361
- color: var(--color-text-disabled-300);
4487
+ .celeste-radio-card-sublabel[data-v-5747c91e] {
4488
+ flex-shrink: 1;
4489
+ min-width: 0;
4490
+ overflow: hidden;
4491
+ color: var(--color-text-sub-600);
4492
+ font: var(--paragraph-xs);
4493
+ text-overflow: ellipsis;
4494
+ white-space: nowrap;
4362
4495
  }
4363
- .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value i, .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value ~ i {
4364
- color: var(--color-icon-disabled-400);
4496
+ .celeste-radio-card-description[data-v-5747c91e] {
4497
+ color: var(--color-text-sub-600);
4498
+ font: var(--paragraph-xs);
4365
4499
  }
4366
- .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-value .celeste-select-icon > img {
4367
- opacity: 0.3;
4500
+ [data-v-5747c91e] .celeste-radio-card-radio {
4501
+ margin-inline-start: auto;
4368
4502
  }
4369
- .celeste-select-trigger[data-v-039f6664]:disabled .celeste-select-icon {
4370
- color: var(--color-icon-disabled-400);
4503
+ .celeste-radio-card-disabled[data-v-5747c91e] {
4504
+ cursor: not-allowed;
4371
4505
  }
4372
- .celeste-select-trigger[data-v-039f6664]:not([data-placeholder]) > :first-child.celeste-select-icon {
4373
- display: none;
4506
+ .celeste-radio-card-disabled .celeste-radio-card-label[data-v-5747c91e] {
4507
+ color: var(--color-text-sub-600);
4374
4508
  }
4375
- .celeste-select-trigger:hover[variant=inline] > i[data-v-039f6664], .celeste-select-trigger:hover[variant=inline][data-v-039f6664] .celeste-select-icon, .celeste-select-trigger:hover[variant=inline][data-v-039f6664] .celeste-select-value {
4509
+ .celeste-radio-card-disabled .celeste-radio-card-sublabel[data-v-5747c91e] {
4510
+ color: var(--color-text-soft-400);
4511
+ }
4512
+ .celeste-radio-card-disabled .celeste-radio-card-description[data-v-5747c91e] {
4513
+ color: var(--color-text-soft-400);
4514
+ }.celeste-radio-label[data-v-32cb773e] {
4515
+ display: flex;
4376
4516
  color: var(--color-text-strong-950);
4517
+ font: var(--paragraph-sm);
4518
+ gap: var(--spacing-8);
4377
4519
  }
4378
- .celeste-select-trigger[data-v-039f6664]:hover:not([variant=inline]) {
4379
- border-color: transparent;
4380
- background-color: var(--color-bg-weak-50);
4520
+ [data-v-32cb773e] .celeste-radio-label-radio {
4521
+ margin-top: var(--spacing-2);
4381
4522
  }
4382
- .celeste-select-trigger[data-v-039f6664]:focus:not([variant=inline]) {
4383
- border-color: var(--color-stroke-strong-950);
4384
- outline-color: var(--color-stroke-soft-200);
4385
- }.celeste-select-value[data-v-db7cc720] {
4523
+ .celeste-radio-label-row[data-v-32cb773e] {
4386
4524
  display: flex;
4387
4525
  align-items: center;
4388
- overflow: hidden;
4389
- color: var(--color-text-strong-950);
4390
- font: var(--paragraph-sm);
4391
- text-overflow: ellipsis;
4392
- white-space: nowrap;
4393
4526
  gap: var(--spacing-8);
4394
4527
  }
4395
- .celeste-select-value[data-v-db7cc720] i, .celeste-select-value[data-v-db7cc720] ~ i {
4396
- flex-shrink: 0;
4397
- color: var(--color-icon-sub-600);
4528
+ .celeste-radio-label-sublabel[data-v-32cb773e] {
4529
+ color: var(--color-text-sub-600);
4530
+ font: var(--paragraph-xs);
4531
+ }
4532
+ .celeste-radio-label-content[data-v-32cb773e] {
4533
+ display: flex;
4534
+ flex-direction: column;
4535
+ align-items: flex-start;
4536
+ margin-top: var(--spacing-4);
4537
+ color: var(--color-text-sub-600);
4538
+ font: var(--paragraph-xs);
4539
+ }
4540
+ .celeste-radio-label-link-button[data-v-32cb773e] {
4541
+ margin-top: var(--spacing-10);
4398
4542
  }.show-more-wrapper[data-v-49d51443] .i-celeste-arrow-down-s-line {
4399
4543
  display: none;
4400
4544
  }
@@ -4535,151 +4679,7 @@ to {
4535
4679
  font: var(--subheading-xs);
4536
4680
  text-transform: uppercase;
4537
4681
  }
4538
- .celeste-color-slider .slider-track[data-v-cb479a28] {
4539
- background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
4540
- }.celeste-color-swatch[data-v-095c22f0] {
4541
- display: flex;
4542
- flex-direction: column;
4543
- gap: var(--spacing-8);
4544
- }
4545
- .celeste-color-swatch .swatch-label[data-v-095c22f0] {
4546
- color: var(--color-text-sub-600);
4547
- font: var(--paragraph-xs);
4548
- }
4549
- .celeste-color-swatch .color-palette[data-v-095c22f0] {
4550
- display: flex;
4551
- gap: var(--spacing-4);
4552
- align-items: center;
4553
- }
4554
- .celeste-color-swatch .color-palette .palette-color[data-v-095c22f0] {
4555
- box-sizing: border-box;
4556
- width: 16px;
4557
- height: 16px;
4558
- margin: var(--spacing-4);
4559
- padding: var(--spacing-4);
4560
- border-radius: 50%;
4561
- }
4562
- .celeste-color-swatch .color-palette .palette-color[aria-selected=true][data-v-095c22f0] {
4563
- box-shadow: var(--0829b6e2);
4564
- }
4565
- .celeste-color-swatch .color-palette .palette-color[data-v-095c22f0]:hover {
4566
- cursor: pointer;
4567
- }.celeste-color-area[data-v-bcf02776] {
4568
- position: relative;
4569
- width: 240px;
4570
- height: 232px;
4571
- border-radius: var(--radius-8);
4572
- background: linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), var(--170188f0);
4573
- }.celeste-picker-trigger[data-v-5d801c64] {
4574
- gap: var(--spacing-12);
4575
- }
4576
- .celeste-picker-trigger .celeste-selected-color[data-v-5d801c64] {
4577
- --color-tile-size: 20px;
4578
- display: block;
4579
- width: var(--color-tile-size);
4580
- height: var(--color-tile-size);
4581
- border-radius: var(--radius-4);
4582
- background-color: var(--88e786d6);
4583
- }
4584
- .celeste-color-picker-wrapper[data-v-5d801c64] {
4585
- display: grid;
4586
- box-sizing: border-box;
4587
- width: 272px;
4588
- }
4589
- .celeste-color-picker-wrapper .celeste-color-picker[data-v-5d801c64] {
4590
- display: flex;
4591
- flex-direction: column;
4592
- align-items: center;
4593
- justify-content: center;
4594
- padding: var(--spacing-16);
4595
- gap: var(--spacing-12);
4596
- }
4597
- .celeste-color-picker-wrapper .celeste-color-picker[data-v-5d801c64] > * {
4598
- box-sizing: border-box;
4599
- }
4600
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel[data-v-5d801c64] {
4601
- display: flex;
4602
- flex-direction: column;
4603
- width: 100%;
4604
- gap: var(--spacing-4);
4605
- }
4606
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-selected-color-format[data-v-5d801c64] {
4607
- text-transform: uppercase;
4608
- }
4609
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-5d801c64] {
4610
- display: flex;
4611
- width: 100%;
4612
- height: 32px;
4613
- }
4614
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-5d801c64] {
4615
- border-start-end-radius: 0;
4616
- border-end-end-radius: 0;
4617
- }
4618
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-5d801c64]:focus-within {
4619
- z-index: 2;
4620
- }
4621
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-5d801c64] > * {
4622
- box-sizing: border-box;
4623
- height: 100%;
4624
- }
4625
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs[data-v-5d801c64] {
4626
- display: flex;
4627
- }
4628
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64] {
4629
- margin-inline-start: -1px;
4630
- border-radius: 0;
4631
- }
4632
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:focus-within {
4633
- z-index: 2;
4634
- }
4635
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:last-child {
4636
- border-start-end-radius: var(--radius-8);
4637
- border-end-end-radius: var(--radius-8);
4638
- }
4639
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(4), .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(4) ~ * {
4640
- flex: 1;
4641
- }
4642
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:first-child:nth-last-child(2) {
4643
- flex: 3;
4644
- }
4645
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-5d801c64]:last-child:nth-child(2) {
4646
- flex: 1;
4647
- }
4648
- .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs:first-child:last-child .color-input[data-v-5d801c64]:first-child {
4649
- border-start-start-radius: var(--radius-8);
4650
- border-end-start-radius: var(--radius-8);
4651
- }
4652
- .celeste-color-picker-wrapper .celeste-color-swatches[data-v-5d801c64] {
4653
- display: flex;
4654
- flex-direction: column;
4655
- padding: var(--radius-16);
4656
- border-block-start: 1px solid var(--color-stroke-soft-200);
4657
- }
4658
- [data-v-5d801c64] .celeste-color-format {
4659
- text-transform: uppercase;
4660
- }
4661
- [data-v-5d801c64] .celeste-color-thumb {
4662
- position: absolute;
4663
- width: 12px;
4664
- height: 12px;
4665
- transform: translate(-50%, -50%);
4666
- border-radius: 50%;
4667
- box-shadow: 0 0 0 2px var(--color-bg-white-0), var(--shadow-toggle-switch);
4668
- }
4669
- [data-v-5d801c64] .celeste-color-slider {
4670
- --track-height: 8px;
4671
- width: 100%;
4672
- padding-block: var(--spacing-4);
4673
- }
4674
- [data-v-5d801c64] .celeste-color-slider .slider-track {
4675
- position: relative;
4676
- width: 100%;
4677
- height: var(--track-height);
4678
- border-radius: calc(var(--track-height) / 2);
4679
- }
4680
- [data-v-5d801c64] .celeste-color-slider .slider-track .celeste-color-thumb {
4681
- top: calc(var(--track-height) / 2);
4682
- }.celeste-rich-editor[data-v-dbc85b1a] {
4682
+ .celeste-rich-editor[data-v-dbc85b1a] {
4683
4683
  position: relative;
4684
4684
  border: 1px solid var(--color-stroke-soft-200);
4685
4685
  border-radius: var(--spacing-12);