@telia/teddy 0.3.2 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/drawer/drawer-close.cjs +1 -1
- package/dist/components/drawer/drawer-close.js +1 -1
- package/dist/components/drawer/drawer-content.cjs +1 -1
- package/dist/components/drawer/drawer-content.js +1 -1
- package/dist/components/drawer/drawer-description.cjs +1 -1
- package/dist/components/drawer/drawer-description.js +1 -1
- package/dist/components/drawer/drawer-footer.cjs +1 -1
- package/dist/components/drawer/drawer-footer.js +1 -1
- package/dist/components/drawer/drawer-overlay.cjs +1 -1
- package/dist/components/drawer/drawer-overlay.js +1 -1
- package/dist/components/drawer/drawer-title.cjs +1 -1
- package/dist/components/drawer/drawer-title.js +1 -1
- package/dist/components/modal/index.cjs +8 -0
- package/dist/components/modal/index.d.ts +185 -2
- package/dist/components/modal/index.js +8 -0
- package/dist/components/modal/{modal.cjs → modal-close.cjs} +3 -3
- package/dist/components/modal/modal-close.d.ts +19 -0
- package/dist/components/modal/{modal.js → modal-close.js} +4 -4
- package/dist/components/modal/modal-content.cjs +65 -0
- package/dist/components/modal/modal-content.d.ts +7 -0
- package/dist/components/modal/modal-content.js +48 -0
- package/dist/components/modal/modal-description.cjs +26 -0
- package/dist/components/modal/modal-description.d.ts +8 -0
- package/dist/components/modal/modal-description.js +9 -0
- package/dist/components/modal/modal-group.cjs +47 -0
- package/dist/components/modal/modal-group.d.ts +10 -0
- package/dist/components/modal/modal-group.js +47 -0
- package/dist/components/modal/modal-image.cjs +17 -0
- package/dist/components/modal/modal-image.d.ts +10 -0
- package/dist/components/modal/modal-image.js +17 -0
- package/dist/components/modal/modal-overlay.cjs +35 -0
- package/dist/components/modal/modal-overlay.d.ts +12 -0
- package/dist/components/modal/modal-overlay.js +18 -0
- package/dist/components/modal/modal-root.cjs +38 -0
- package/dist/components/modal/modal-root.d.ts +16 -0
- package/dist/components/modal/modal-root.js +21 -0
- package/dist/components/modal/modal-title.cjs +45 -0
- package/dist/components/modal/modal-title.d.ts +18 -0
- package/dist/components/modal/modal-title.js +28 -0
- package/dist/components/modal/modal-trigger.cjs +27 -0
- package/dist/components/modal/modal-trigger.d.ts +21 -0
- package/dist/components/modal/modal-trigger.js +10 -0
- package/dist/components/navigation-menu/global-navigation/global-navigation-desktop-simplified.js +2 -2
- package/dist/components/navigation-menu/global-navigation/global-navigation-mobile-simplified.js +2 -2
- package/dist/components/navigation-menu/global-navigation/global-navigation-mobile.js +2 -2
- package/dist/components/navigation-menu/global-navigation/global-navigation-my-pages.js +2 -2
- package/dist/components/navigation-menu/global-navigation/global-navigation-root.js +4 -4
- package/dist/components/navigation-menu/global-navigation/global-navigation-search-field.js +2 -2
- package/dist/components/navigation-menu/global-navigation/global-navigation-search.js +2 -2
- package/dist/components/navigation-menu/global-navigation/global-navigation-shopping-cart.js +2 -2
- package/dist/components/notabene/index.cjs +4 -0
- package/dist/components/notabene/index.js +4 -0
- package/dist/components/notification/index.cjs +6 -0
- package/dist/components/notification/index.js +6 -0
- package/dist/components/notification/notification-footer.cjs +1 -1
- package/dist/components/notification/notification-footer.js +1 -1
- package/dist/components/radio-card-group/radio-card-group-item-title.cjs +49 -151
- package/dist/components/radio-card-group/radio-card-group-item-title.js +67 -169
- package/dist/drawer.module-Bh77Byg_.js +16 -0
- package/dist/drawer.module-khivHSFm.cjs +15 -0
- package/dist/modal.module-BfeNqXoN.cjs +19 -0
- package/dist/modal.module-DuP4in7f.js +20 -0
- package/dist/style.css +194 -190
- package/package.json +1 -1
- package/dist/components/modal/modal.d.ts +0 -76
- package/dist/drawer.module-Am9xxZYU.js +0 -16
- package/dist/drawer.module-CoqKvqzl.cjs +0 -15
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const styles = {
|
|
2
|
+
"teddy-modal__overlay": "_teddy-modal__overlay_1mjv8_25",
|
|
3
|
+
"teddy-modal__content": "_teddy-modal__content_1mjv8_37",
|
|
4
|
+
"teddy-modal__scroll": "_teddy-modal__scroll_1mjv8_55",
|
|
5
|
+
"teddy-modal__image": "_teddy-modal__image_1mjv8_59",
|
|
6
|
+
"teddy-modal__close--floating": "_teddy-modal__close--floating_1mjv8_69",
|
|
7
|
+
"teddy-modal__group": "_teddy-modal__group_1mjv8_79",
|
|
8
|
+
"teddy-modal__group--title": "_teddy-modal__group--title_1mjv8_83",
|
|
9
|
+
"teddy-modal__group--scroll": "_teddy-modal__group--scroll_1mjv8_94",
|
|
10
|
+
"teddy-modal__group--action": "_teddy-modal__group--action_1mjv8_103",
|
|
11
|
+
"modal-overlay-no-op": "_modal-overlay-no-op_1mjv8_1",
|
|
12
|
+
"teddy-fade-in": "_teddy-fade-in_1mjv8_1",
|
|
13
|
+
"teddy-fade-out": "_teddy-fade-out_1mjv8_1",
|
|
14
|
+
"modal-content-show": "_modal-content-show_1mjv8_1",
|
|
15
|
+
"modal-content-hide": "_modal-content-hide_1mjv8_1",
|
|
16
|
+
"teddy-overlay-no-op": "_teddy-overlay-no-op_1mjv8_1"
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
styles as s
|
|
20
|
+
};
|
package/dist/style.css
CHANGED
|
@@ -2404,7 +2404,7 @@
|
|
|
2404
2404
|
right: 100%;
|
|
2405
2405
|
transform: rotate(180deg);
|
|
2406
2406
|
}@layer reset, flex, button, link, heading, drawer;
|
|
2407
|
-
@keyframes _teddy-fade-
|
|
2407
|
+
@keyframes _teddy-fade-in_1hfde_1 {
|
|
2408
2408
|
from {
|
|
2409
2409
|
opacity: 0;
|
|
2410
2410
|
}
|
|
@@ -2412,7 +2412,7 @@
|
|
|
2412
2412
|
opacity: 1;
|
|
2413
2413
|
}
|
|
2414
2414
|
}
|
|
2415
|
-
@keyframes _teddy-fade-
|
|
2415
|
+
@keyframes _teddy-fade-out_1hfde_1 {
|
|
2416
2416
|
from {
|
|
2417
2417
|
opacity: 1;
|
|
2418
2418
|
}
|
|
@@ -2420,7 +2420,7 @@
|
|
|
2420
2420
|
opacity: 0;
|
|
2421
2421
|
}
|
|
2422
2422
|
}
|
|
2423
|
-
@keyframes _teddy-overlay-no-
|
|
2423
|
+
@keyframes _teddy-overlay-no-op_1hfde_1 {
|
|
2424
2424
|
from {
|
|
2425
2425
|
opacity: 1;
|
|
2426
2426
|
}
|
|
@@ -2428,11 +2428,11 @@
|
|
|
2428
2428
|
opacity: 1;
|
|
2429
2429
|
}
|
|
2430
2430
|
}
|
|
2431
|
-
._teddy-
|
|
2431
|
+
._teddy-drawer__overlay_1hfde_26 {
|
|
2432
2432
|
box-sizing: border-box;
|
|
2433
2433
|
}
|
|
2434
2434
|
@layer drawer {
|
|
2435
|
-
._teddy-
|
|
2435
|
+
._teddy-drawer__overlay_1hfde_26 {
|
|
2436
2436
|
box-sizing: border-box;
|
|
2437
2437
|
position: fixed;
|
|
2438
2438
|
inset: 0;
|
|
@@ -2441,36 +2441,37 @@
|
|
|
2441
2441
|
z-index: 40;
|
|
2442
2442
|
}
|
|
2443
2443
|
@media (prefers-reduced-motion: no-preference) {
|
|
2444
|
-
._teddy-
|
|
2444
|
+
._teddy-drawer__overlay_1hfde_26 {
|
|
2445
2445
|
/* Keep the overlay mounted until the children have animated */
|
|
2446
2446
|
}
|
|
2447
|
-
._teddy-
|
|
2448
|
-
animation: _teddy-overlay-no-
|
|
2447
|
+
._teddy-drawer__overlay_1hfde_26:where([data-state=closed]) {
|
|
2448
|
+
animation: _teddy-overlay-no-op_1hfde_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2449
2449
|
}
|
|
2450
|
-
._teddy-
|
|
2451
|
-
animation: _teddy-fade-
|
|
2450
|
+
._teddy-drawer__overlay_1hfde_26:where([data-state=open])::before {
|
|
2451
|
+
animation: _teddy-fade-in_1hfde_1 500ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2452
2452
|
}
|
|
2453
|
-
._teddy-
|
|
2454
|
-
|
|
2453
|
+
._teddy-drawer__overlay_1hfde_26:where([data-state=closed])::before {
|
|
2454
|
+
opacity: 0;
|
|
2455
|
+
animation: _teddy-fade-out_1hfde_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2455
2456
|
}
|
|
2456
2457
|
}
|
|
2457
|
-
._teddy-
|
|
2458
|
+
._teddy-drawer__overlay_1hfde_26::before {
|
|
2458
2459
|
position: fixed;
|
|
2459
2460
|
content: "";
|
|
2460
2461
|
inset: 0;
|
|
2461
2462
|
background-color: var(--teddy-color-overlay-default);
|
|
2462
2463
|
}
|
|
2463
|
-
._teddy-drawer__overlay--
|
|
2464
|
+
._teddy-drawer__overlay--container_1hfde_60 {
|
|
2464
2465
|
position: absolute;
|
|
2465
2466
|
}
|
|
2466
|
-
._teddy-drawer__overlay--
|
|
2467
|
+
._teddy-drawer__overlay--container_1hfde_60::before {
|
|
2467
2468
|
position: absolute;
|
|
2468
2469
|
}
|
|
2469
|
-
._teddy-drawer__overlay--
|
|
2470
|
+
._teddy-drawer__overlay--container_1hfde_60 ._teddy-drawer__content_1hfde_66 {
|
|
2470
2471
|
position: absolute;
|
|
2471
2472
|
inset: 0;
|
|
2472
2473
|
}
|
|
2473
|
-
._teddy-
|
|
2474
|
+
._teddy-drawer__title_1hfde_70 {
|
|
2474
2475
|
position: sticky;
|
|
2475
2476
|
padding: var(--teddy-spacing-300) 0 var(--teddy-spacing-200);
|
|
2476
2477
|
background-color: var(--teddy-color-background-primary);
|
|
@@ -2478,7 +2479,7 @@
|
|
|
2478
2479
|
margin: calc(-1 * var(--teddy-spacing-300)) 0 calc(-1 * var(--teddy-spacing-200));
|
|
2479
2480
|
z-index: 2;
|
|
2480
2481
|
}
|
|
2481
|
-
._teddy-
|
|
2482
|
+
._teddy-drawer__content_1hfde_66 {
|
|
2482
2483
|
background-color: var(--teddy-color-background-primary);
|
|
2483
2484
|
box-shadow: var(--teddy-shadow-lg);
|
|
2484
2485
|
z-index: 40;
|
|
@@ -2494,26 +2495,27 @@
|
|
|
2494
2495
|
min-width: min(100%, 400px);
|
|
2495
2496
|
}
|
|
2496
2497
|
@media (prefers-reduced-motion: no-preference) {
|
|
2497
|
-
._teddy-
|
|
2498
|
-
animation: _drawer-content-
|
|
2498
|
+
._teddy-drawer__content_1hfde_66:where([data-state=open]) {
|
|
2499
|
+
animation: _drawer-content-show_1hfde_1 450ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2499
2500
|
}
|
|
2500
|
-
._teddy-
|
|
2501
|
-
|
|
2501
|
+
._teddy-drawer__content_1hfde_66:where([data-state=closed]) {
|
|
2502
|
+
opacity: 0;
|
|
2503
|
+
animation: _drawer-content-hide_1hfde_1 350ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2502
2504
|
}
|
|
2503
2505
|
}
|
|
2504
|
-
._teddy-drawer__content--
|
|
2506
|
+
._teddy-drawer__content--lg_1hfde_102 {
|
|
2505
2507
|
min-width: min(100%, 30rem);
|
|
2506
2508
|
width: 30vw;
|
|
2507
2509
|
max-width: initial;
|
|
2508
2510
|
}
|
|
2509
|
-
._teddy-drawer__close--
|
|
2511
|
+
._teddy-drawer__close--floating_1hfde_107 {
|
|
2510
2512
|
position: fixed;
|
|
2511
2513
|
z-index: 3;
|
|
2512
2514
|
top: var(--teddy-spacing-200);
|
|
2513
2515
|
right: var(--teddy-spacing-200);
|
|
2514
2516
|
}
|
|
2515
2517
|
}
|
|
2516
|
-
@keyframes _drawer-content-
|
|
2518
|
+
@keyframes _drawer-content-show_1hfde_1 {
|
|
2517
2519
|
from {
|
|
2518
2520
|
transform: translateX(100%);
|
|
2519
2521
|
}
|
|
@@ -2521,7 +2523,7 @@
|
|
|
2521
2523
|
transform: translateX(0px);
|
|
2522
2524
|
}
|
|
2523
2525
|
}
|
|
2524
|
-
@keyframes _drawer-content-
|
|
2526
|
+
@keyframes _drawer-content-hide_1hfde_1 {
|
|
2525
2527
|
from {
|
|
2526
2528
|
transform: translateX(0px);
|
|
2527
2529
|
}
|
|
@@ -2622,6 +2624,172 @@
|
|
|
2622
2624
|
}
|
|
2623
2625
|
._teddy-chip__indicator_69tae_83 {
|
|
2624
2626
|
display: none;
|
|
2627
|
+
}@keyframes _teddy-fade-in_1mjv8_1 {
|
|
2628
|
+
from {
|
|
2629
|
+
opacity: 0;
|
|
2630
|
+
}
|
|
2631
|
+
to {
|
|
2632
|
+
opacity: 1;
|
|
2633
|
+
}
|
|
2634
|
+
}
|
|
2635
|
+
@keyframes _teddy-fade-out_1mjv8_1 {
|
|
2636
|
+
from {
|
|
2637
|
+
opacity: 1;
|
|
2638
|
+
}
|
|
2639
|
+
to {
|
|
2640
|
+
opacity: 0;
|
|
2641
|
+
}
|
|
2642
|
+
}
|
|
2643
|
+
@keyframes _teddy-overlay-no-op_1mjv8_1 {
|
|
2644
|
+
from {
|
|
2645
|
+
opacity: 1;
|
|
2646
|
+
}
|
|
2647
|
+
to {
|
|
2648
|
+
opacity: 1;
|
|
2649
|
+
}
|
|
2650
|
+
}
|
|
2651
|
+
._teddy-modal__overlay_1mjv8_25 {
|
|
2652
|
+
position: fixed;
|
|
2653
|
+
inset: 0;
|
|
2654
|
+
display: grid;
|
|
2655
|
+
place-items: center;
|
|
2656
|
+
}
|
|
2657
|
+
._teddy-modal__overlay_1mjv8_25::before {
|
|
2658
|
+
position: fixed;
|
|
2659
|
+
content: "";
|
|
2660
|
+
inset: 0;
|
|
2661
|
+
background-color: var(--teddy-color-overlay-default);
|
|
2662
|
+
}
|
|
2663
|
+
._teddy-modal__content_1mjv8_37 {
|
|
2664
|
+
background-color: var(--teddy-color-background-primary);
|
|
2665
|
+
box-shadow: var(--teddy-shadow-lg);
|
|
2666
|
+
position: relative;
|
|
2667
|
+
overflow: hidden;
|
|
2668
|
+
height: 100%;
|
|
2669
|
+
width: 100%;
|
|
2670
|
+
}
|
|
2671
|
+
@media (min-width: 600px) {
|
|
2672
|
+
._teddy-modal__content_1mjv8_37 {
|
|
2673
|
+
max-width: 720px;
|
|
2674
|
+
max-height: 80%;
|
|
2675
|
+
min-height: 360px;
|
|
2676
|
+
height: auto;
|
|
2677
|
+
width: auto;
|
|
2678
|
+
border-radius: var(--teddy-border-radius-lg);
|
|
2679
|
+
}
|
|
2680
|
+
}
|
|
2681
|
+
._teddy-modal__scroll_1mjv8_55 {
|
|
2682
|
+
overflow: auto;
|
|
2683
|
+
padding-inline: var(--teddy-spacing-300);
|
|
2684
|
+
}
|
|
2685
|
+
._teddy-modal__image_1mjv8_59 {
|
|
2686
|
+
max-width: calc(100% + var(--teddy-spacing-300) * 2);
|
|
2687
|
+
height: auto;
|
|
2688
|
+
vertical-align: middle;
|
|
2689
|
+
font-style: italic;
|
|
2690
|
+
background-repeat: no-repeat;
|
|
2691
|
+
background-size: cover;
|
|
2692
|
+
shape-margin: 0.75rem;
|
|
2693
|
+
margin-inline: calc(var(--teddy-spacing-300) * -1);
|
|
2694
|
+
}
|
|
2695
|
+
._teddy-modal__close--floating_1mjv8_69 {
|
|
2696
|
+
position: absolute;
|
|
2697
|
+
top: var(--teddy-spacing-100);
|
|
2698
|
+
right: var(--teddy-spacing-100);
|
|
2699
|
+
}
|
|
2700
|
+
@media (max-width: 600px) {
|
|
2701
|
+
._teddy-modal__close--floating_1mjv8_69 {
|
|
2702
|
+
top: var(--teddy-spacing-50);
|
|
2703
|
+
}
|
|
2704
|
+
}
|
|
2705
|
+
._teddy-modal__group_1mjv8_79 {
|
|
2706
|
+
width: 100%;
|
|
2707
|
+
margin-bottom: var(--teddy-spacing-200);
|
|
2708
|
+
}
|
|
2709
|
+
._teddy-modal__group--title_1mjv8_83 {
|
|
2710
|
+
position: sticky;
|
|
2711
|
+
inset: 0 0 auto 0;
|
|
2712
|
+
background-color: var(--teddy-color-background-primary);
|
|
2713
|
+
padding-top: var(--teddy-spacing-300);
|
|
2714
|
+
}
|
|
2715
|
+
@media (max-width: 600px) {
|
|
2716
|
+
._teddy-modal__group--title_1mjv8_83 {
|
|
2717
|
+
padding-top: var(--teddy-spacing-250);
|
|
2718
|
+
}
|
|
2719
|
+
}
|
|
2720
|
+
._teddy-modal__group--title_1mjv8_83._teddy-modal__group--scroll_1mjv8_94 {
|
|
2721
|
+
padding-block: var(--teddy-spacing-200);
|
|
2722
|
+
}
|
|
2723
|
+
._teddy-modal__group--title_1mjv8_83._teddy-modal__group--scroll_1mjv8_94::before {
|
|
2724
|
+
content: "";
|
|
2725
|
+
position: absolute;
|
|
2726
|
+
inset: 0 calc(var(--teddy-spacing-300) * -1) 0 calc(var(--teddy-spacing-300) * -1);
|
|
2727
|
+
border-bottom: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
|
|
2728
|
+
}
|
|
2729
|
+
._teddy-modal__group--action_1mjv8_103 {
|
|
2730
|
+
height: 100%;
|
|
2731
|
+
position: sticky;
|
|
2732
|
+
inset: auto 0 0 0;
|
|
2733
|
+
margin: 0;
|
|
2734
|
+
padding: var(--teddy-spacing-200) 0 var(--teddy-spacing-300);
|
|
2735
|
+
background-color: var(--teddy-color-background-primary);
|
|
2736
|
+
}
|
|
2737
|
+
._teddy-modal__group--action_1mjv8_103._teddy-modal__group--scroll_1mjv8_94::before {
|
|
2738
|
+
content: "";
|
|
2739
|
+
position: absolute;
|
|
2740
|
+
inset: 0 calc(var(--teddy-spacing-300) * -1) 0 calc(var(--teddy-spacing-300) * -1);
|
|
2741
|
+
border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
|
|
2742
|
+
box-shadow: 0 0 20px 15px var(--teddy-color-background-primary);
|
|
2743
|
+
}
|
|
2744
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
2745
|
+
@keyframes _modal-overlay-no-op_1mjv8_1 {
|
|
2746
|
+
from {
|
|
2747
|
+
opacity: 1;
|
|
2748
|
+
}
|
|
2749
|
+
to {
|
|
2750
|
+
opacity: 1;
|
|
2751
|
+
}
|
|
2752
|
+
}
|
|
2753
|
+
@keyframes _modal-content-show_1mjv8_1 {
|
|
2754
|
+
from {
|
|
2755
|
+
opacity: 0;
|
|
2756
|
+
transform: translateY(5px) scale(0.97);
|
|
2757
|
+
}
|
|
2758
|
+
to {
|
|
2759
|
+
opacity: 1;
|
|
2760
|
+
transform: translateY(0px) scale(1);
|
|
2761
|
+
}
|
|
2762
|
+
}
|
|
2763
|
+
@keyframes _modal-content-hide_1mjv8_1 {
|
|
2764
|
+
from {
|
|
2765
|
+
opacity: 1;
|
|
2766
|
+
transform: translateY(0px) scale(1);
|
|
2767
|
+
}
|
|
2768
|
+
to {
|
|
2769
|
+
opacity: 0;
|
|
2770
|
+
transform: translateY(5px) scale(0.99);
|
|
2771
|
+
}
|
|
2772
|
+
}
|
|
2773
|
+
._teddy-modal__overlay_1mjv8_25 {
|
|
2774
|
+
/* Keep the overlay mounted until the children have animated */
|
|
2775
|
+
}
|
|
2776
|
+
._teddy-modal__overlay_1mjv8_25:where([data-state=closed]) {
|
|
2777
|
+
animation: _modal-overlay-no-op_1mjv8_1 250ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2778
|
+
}
|
|
2779
|
+
._teddy-modal__overlay_1mjv8_25:where([data-state=open])::before {
|
|
2780
|
+
animation: _teddy-fade-in_1mjv8_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2781
|
+
}
|
|
2782
|
+
._teddy-modal__overlay_1mjv8_25:where([data-state=closed])::before {
|
|
2783
|
+
opacity: 0;
|
|
2784
|
+
animation: _teddy-fade-out_1mjv8_1 250ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2785
|
+
}
|
|
2786
|
+
._teddy-modal__content_1mjv8_37:where([data-state=open]) {
|
|
2787
|
+
animation: _modal-content-show_1mjv8_1 200ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2788
|
+
}
|
|
2789
|
+
._teddy-modal__content_1mjv8_37:where([data-state=closed]) {
|
|
2790
|
+
opacity: 0;
|
|
2791
|
+
animation: _modal-content-hide_1mjv8_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
2792
|
+
}
|
|
2625
2793
|
}@layer grid {
|
|
2626
2794
|
._teddy-grid_1dv1t_2 {
|
|
2627
2795
|
box-sizing: border-box;
|
|
@@ -4630,170 +4798,6 @@
|
|
|
4630
4798
|
}
|
|
4631
4799
|
._teddy-slider__thumb_96kxz_23:focus {
|
|
4632
4800
|
background-color: var(--teddy-color-purple-800);
|
|
4633
|
-
}@keyframes _teddy-fade-in_lkqhu_1 {
|
|
4634
|
-
from {
|
|
4635
|
-
opacity: 0;
|
|
4636
|
-
}
|
|
4637
|
-
to {
|
|
4638
|
-
opacity: 1;
|
|
4639
|
-
}
|
|
4640
|
-
}
|
|
4641
|
-
@keyframes _teddy-fade-out_lkqhu_1 {
|
|
4642
|
-
from {
|
|
4643
|
-
opacity: 1;
|
|
4644
|
-
}
|
|
4645
|
-
to {
|
|
4646
|
-
opacity: 0;
|
|
4647
|
-
}
|
|
4648
|
-
}
|
|
4649
|
-
@keyframes _teddy-overlay-no-op_lkqhu_1 {
|
|
4650
|
-
from {
|
|
4651
|
-
opacity: 1;
|
|
4652
|
-
}
|
|
4653
|
-
to {
|
|
4654
|
-
opacity: 1;
|
|
4655
|
-
}
|
|
4656
|
-
}
|
|
4657
|
-
._teddy-modal__overlay_lkqhu_25 {
|
|
4658
|
-
position: fixed;
|
|
4659
|
-
inset: 0;
|
|
4660
|
-
display: grid;
|
|
4661
|
-
place-items: center;
|
|
4662
|
-
}
|
|
4663
|
-
._teddy-modal__overlay_lkqhu_25::before {
|
|
4664
|
-
position: fixed;
|
|
4665
|
-
content: "";
|
|
4666
|
-
inset: 0;
|
|
4667
|
-
background-color: var(--teddy-color-overlay-default);
|
|
4668
|
-
}
|
|
4669
|
-
._teddy-modal__content_lkqhu_37 {
|
|
4670
|
-
background-color: var(--teddy-color-background-primary);
|
|
4671
|
-
box-shadow: var(--teddy-shadow-lg);
|
|
4672
|
-
position: relative;
|
|
4673
|
-
overflow: hidden;
|
|
4674
|
-
height: 100%;
|
|
4675
|
-
width: 100%;
|
|
4676
|
-
}
|
|
4677
|
-
@media (min-width: 600px) {
|
|
4678
|
-
._teddy-modal__content_lkqhu_37 {
|
|
4679
|
-
max-width: 720px;
|
|
4680
|
-
max-height: 80%;
|
|
4681
|
-
min-height: 360px;
|
|
4682
|
-
height: auto;
|
|
4683
|
-
width: auto;
|
|
4684
|
-
border-radius: var(--teddy-border-radius-lg);
|
|
4685
|
-
}
|
|
4686
|
-
}
|
|
4687
|
-
._teddy-modal__scroll_lkqhu_55 {
|
|
4688
|
-
overflow: auto;
|
|
4689
|
-
padding-inline: var(--teddy-spacing-300);
|
|
4690
|
-
}
|
|
4691
|
-
._teddy-modal__image_lkqhu_59 {
|
|
4692
|
-
max-width: calc(100% + var(--teddy-spacing-300) * 2);
|
|
4693
|
-
height: auto;
|
|
4694
|
-
vertical-align: middle;
|
|
4695
|
-
font-style: italic;
|
|
4696
|
-
background-repeat: no-repeat;
|
|
4697
|
-
background-size: cover;
|
|
4698
|
-
shape-margin: 0.75rem;
|
|
4699
|
-
margin-inline: calc(var(--teddy-spacing-300) * -1);
|
|
4700
|
-
}
|
|
4701
|
-
._teddy-modal__close--floating_lkqhu_69 {
|
|
4702
|
-
position: absolute;
|
|
4703
|
-
top: var(--teddy-spacing-100);
|
|
4704
|
-
right: var(--teddy-spacing-100);
|
|
4705
|
-
}
|
|
4706
|
-
@media (max-width: 600px) {
|
|
4707
|
-
._teddy-modal__close--floating_lkqhu_69 {
|
|
4708
|
-
top: var(--teddy-spacing-50);
|
|
4709
|
-
}
|
|
4710
|
-
}
|
|
4711
|
-
._teddy-modal__group_lkqhu_79 {
|
|
4712
|
-
width: 100%;
|
|
4713
|
-
margin-bottom: var(--teddy-spacing-200);
|
|
4714
|
-
}
|
|
4715
|
-
._teddy-modal__group--title_lkqhu_83 {
|
|
4716
|
-
position: sticky;
|
|
4717
|
-
inset: 0 0 auto 0;
|
|
4718
|
-
background-color: var(--teddy-color-background-primary);
|
|
4719
|
-
padding-top: var(--teddy-spacing-300);
|
|
4720
|
-
}
|
|
4721
|
-
@media (max-width: 600px) {
|
|
4722
|
-
._teddy-modal__group--title_lkqhu_83 {
|
|
4723
|
-
padding-top: var(--teddy-spacing-250);
|
|
4724
|
-
}
|
|
4725
|
-
}
|
|
4726
|
-
._teddy-modal__group--title_lkqhu_83._teddy-modal__group--scroll_lkqhu_94 {
|
|
4727
|
-
padding-block: var(--teddy-spacing-200);
|
|
4728
|
-
}
|
|
4729
|
-
._teddy-modal__group--title_lkqhu_83._teddy-modal__group--scroll_lkqhu_94::before {
|
|
4730
|
-
content: "";
|
|
4731
|
-
position: absolute;
|
|
4732
|
-
inset: 0 calc(var(--teddy-spacing-300) * -1) 0 calc(var(--teddy-spacing-300) * -1);
|
|
4733
|
-
border-bottom: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
|
|
4734
|
-
}
|
|
4735
|
-
._teddy-modal__group--action_lkqhu_103 {
|
|
4736
|
-
height: 100%;
|
|
4737
|
-
position: sticky;
|
|
4738
|
-
inset: auto 0 0 0;
|
|
4739
|
-
margin: 0;
|
|
4740
|
-
padding: var(--teddy-spacing-200) 0 var(--teddy-spacing-300);
|
|
4741
|
-
background-color: var(--teddy-color-background-primary);
|
|
4742
|
-
}
|
|
4743
|
-
._teddy-modal__group--action_lkqhu_103._teddy-modal__group--scroll_lkqhu_94::before {
|
|
4744
|
-
content: "";
|
|
4745
|
-
position: absolute;
|
|
4746
|
-
inset: 0 calc(var(--teddy-spacing-300) * -1) 0 calc(var(--teddy-spacing-300) * -1);
|
|
4747
|
-
border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
|
|
4748
|
-
box-shadow: 0 0 20px 15px var(--teddy-color-background-primary);
|
|
4749
|
-
}
|
|
4750
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
4751
|
-
@keyframes _modal-overlay-no-op_lkqhu_1 {
|
|
4752
|
-
from {
|
|
4753
|
-
opacity: 1;
|
|
4754
|
-
}
|
|
4755
|
-
to {
|
|
4756
|
-
opacity: 1;
|
|
4757
|
-
}
|
|
4758
|
-
}
|
|
4759
|
-
@keyframes _modal-content-show_lkqhu_1 {
|
|
4760
|
-
from {
|
|
4761
|
-
opacity: 0;
|
|
4762
|
-
transform: translateY(5px) scale(0.97);
|
|
4763
|
-
}
|
|
4764
|
-
to {
|
|
4765
|
-
opacity: 1;
|
|
4766
|
-
transform: translateY(0px) scale(1);
|
|
4767
|
-
}
|
|
4768
|
-
}
|
|
4769
|
-
@keyframes _modal-content-hide_lkqhu_1 {
|
|
4770
|
-
from {
|
|
4771
|
-
opacity: 1;
|
|
4772
|
-
transform: translateY(0px) scale(1);
|
|
4773
|
-
}
|
|
4774
|
-
to {
|
|
4775
|
-
opacity: 0;
|
|
4776
|
-
transform: translateY(5px) scale(0.99);
|
|
4777
|
-
}
|
|
4778
|
-
}
|
|
4779
|
-
._teddy-modal__overlay_lkqhu_25 {
|
|
4780
|
-
/* Keep the overlay mounted until the children have animated */
|
|
4781
|
-
}
|
|
4782
|
-
._teddy-modal__overlay_lkqhu_25:where([data-state=closed]) {
|
|
4783
|
-
animation: _modal-overlay-no-op_lkqhu_1 250ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
4784
|
-
}
|
|
4785
|
-
._teddy-modal__overlay_lkqhu_25:where([data-state=open])::before {
|
|
4786
|
-
animation: _teddy-fade-in_lkqhu_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
4787
|
-
}
|
|
4788
|
-
._teddy-modal__overlay_lkqhu_25:where([data-state=closed])::before {
|
|
4789
|
-
animation: _teddy-fade-out_lkqhu_1 250ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
4790
|
-
}
|
|
4791
|
-
._teddy-modal__content_lkqhu_37:where([data-state=open]) {
|
|
4792
|
-
animation: _modal-content-show_lkqhu_1 200ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
4793
|
-
}
|
|
4794
|
-
._teddy-modal__content_lkqhu_37:where([data-state=closed]) {
|
|
4795
|
-
animation: _modal-content-hide_lkqhu_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
4796
|
-
}
|
|
4797
4801
|
}._teddy-navigation-menu_6p30v_1 {
|
|
4798
4802
|
--item-gap: var(--teddy-spacing-200);
|
|
4799
4803
|
--width-for-centering-element: calc((100% - var(--teddy-breakpoint-xl) + var(--teddy-spacing-600) * 2) / 2);
|
package/package.json
CHANGED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { Flex, Heading, Text } from '..';
|
|
3
|
-
import { ComponentPropsAs } from '../../utils/component-props-as';
|
|
4
|
-
|
|
5
|
-
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
6
|
-
type RootProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, 'modal'>;
|
|
7
|
-
/** -------------------------------------------------------------------------------------------------
|
|
8
|
-
* ModalTrigger
|
|
9
|
-
* -----------------------------------------------------------------------------------------------*/
|
|
10
|
-
type TriggerProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>, 'asChild' | 'children'> & {
|
|
11
|
-
children: React.ReactElement;
|
|
12
|
-
};
|
|
13
|
-
type OverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
|
|
14
|
-
container?: React.ComponentProps<typeof DialogPrimitive.Portal>['container'];
|
|
15
|
-
};
|
|
16
|
-
/** -------------------------------------------------------------------------------------------------
|
|
17
|
-
* ModalContent
|
|
18
|
-
* -----------------------------------------------------------------------------------------------*/
|
|
19
|
-
type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
|
|
20
|
-
type GroupProps = React.ComponentPropsWithoutRef<typeof Flex> & {
|
|
21
|
-
variant?: 'title' | 'action';
|
|
22
|
-
};
|
|
23
|
-
/** -------------------------------------------------------------------------------------------------
|
|
24
|
-
* ModalTitle
|
|
25
|
-
* -----------------------------------------------------------------------------------------------*/
|
|
26
|
-
type TitleProps = Omit<React.ComponentPropsWithoutRef<typeof Heading>, 'asChild'>;
|
|
27
|
-
/** -------------------------------------------------------------------------------------------------
|
|
28
|
-
* ModalDescription
|
|
29
|
-
* -----------------------------------------------------------------------------------------------*/
|
|
30
|
-
type DescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
|
|
31
|
-
/** -------------------------------------------------------------------------------------------------
|
|
32
|
-
* ModalImage
|
|
33
|
-
* -----------------------------------------------------------------------------------------------*/
|
|
34
|
-
type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
|
|
35
|
-
asChild?: boolean;
|
|
36
|
-
};
|
|
37
|
-
/** -------------------------------------------------------------------------------------------------
|
|
38
|
-
* ModalClose
|
|
39
|
-
* -----------------------------------------------------------------------------------------------*/
|
|
40
|
-
type CloseProps = Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>, 'asChild' | 'children'> & ({
|
|
41
|
-
children: React.ReactElement;
|
|
42
|
-
slot: 'content';
|
|
43
|
-
} | {
|
|
44
|
-
['aria-label']: string;
|
|
45
|
-
slot: 'floating';
|
|
46
|
-
children?: never;
|
|
47
|
-
});
|
|
48
|
-
/** -------------------------------------------------------------------------------------------------*/
|
|
49
|
-
export declare const Modal: React.FC<RootProps> & {
|
|
50
|
-
Trigger: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "children" | "asChild"> & {
|
|
51
|
-
children: React.ReactElement;
|
|
52
|
-
} & React.RefAttributes<HTMLButtonElement>>;
|
|
53
|
-
Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
54
|
-
Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
55
|
-
Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
56
|
-
container?: React.ComponentProps<typeof DialogPrimitive.Portal>['container'];
|
|
57
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
58
|
-
Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
59
|
-
Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
60
|
-
Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
|
|
61
|
-
asChild?: boolean | undefined;
|
|
62
|
-
} & React.RefAttributes<HTMLImageElement>>;
|
|
63
|
-
Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
64
|
-
};
|
|
65
|
-
export type ModalProps = {
|
|
66
|
-
Root: RootProps;
|
|
67
|
-
Trigger: TriggerProps;
|
|
68
|
-
Content: ContentProps;
|
|
69
|
-
Title: TitleProps;
|
|
70
|
-
Description: DescriptionProps;
|
|
71
|
-
Overlay: OverlayProps;
|
|
72
|
-
Group: GroupProps;
|
|
73
|
-
Close: CloseProps;
|
|
74
|
-
Image: ImageProps;
|
|
75
|
-
};
|
|
76
|
-
export {};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
const styles = {
|
|
2
|
-
"teddy-drawer__overlay": "_teddy-drawer__overlay_jiyrh_26",
|
|
3
|
-
"teddy-overlay-no-op": "_teddy-overlay-no-op_jiyrh_1",
|
|
4
|
-
"teddy-fade-in": "_teddy-fade-in_jiyrh_1",
|
|
5
|
-
"teddy-fade-out": "_teddy-fade-out_jiyrh_1",
|
|
6
|
-
"teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_jiyrh_59",
|
|
7
|
-
"teddy-drawer__content": "_teddy-drawer__content_jiyrh_65",
|
|
8
|
-
"teddy-drawer__title": "_teddy-drawer__title_jiyrh_69",
|
|
9
|
-
"drawer-content-show": "_drawer-content-show_jiyrh_1",
|
|
10
|
-
"drawer-content-hide": "_drawer-content-hide_jiyrh_1",
|
|
11
|
-
"teddy-drawer__content--lg": "_teddy-drawer__content--lg_jiyrh_100",
|
|
12
|
-
"teddy-drawer__close--floating": "_teddy-drawer__close--floating_jiyrh_105"
|
|
13
|
-
};
|
|
14
|
-
export {
|
|
15
|
-
styles as s
|
|
16
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const styles = {
|
|
3
|
-
"teddy-drawer__overlay": "_teddy-drawer__overlay_jiyrh_26",
|
|
4
|
-
"teddy-overlay-no-op": "_teddy-overlay-no-op_jiyrh_1",
|
|
5
|
-
"teddy-fade-in": "_teddy-fade-in_jiyrh_1",
|
|
6
|
-
"teddy-fade-out": "_teddy-fade-out_jiyrh_1",
|
|
7
|
-
"teddy-drawer__overlay--container": "_teddy-drawer__overlay--container_jiyrh_59",
|
|
8
|
-
"teddy-drawer__content": "_teddy-drawer__content_jiyrh_65",
|
|
9
|
-
"teddy-drawer__title": "_teddy-drawer__title_jiyrh_69",
|
|
10
|
-
"drawer-content-show": "_drawer-content-show_jiyrh_1",
|
|
11
|
-
"drawer-content-hide": "_drawer-content-hide_jiyrh_1",
|
|
12
|
-
"teddy-drawer__content--lg": "_teddy-drawer__content--lg_jiyrh_100",
|
|
13
|
-
"teddy-drawer__close--floating": "_teddy-drawer__close--floating_jiyrh_105"
|
|
14
|
-
};
|
|
15
|
-
exports.styles = styles;
|