@telia/teddy 0.3.2 → 0.3.4

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.
Files changed (67) hide show
  1. package/dist/components/drawer/drawer-close.cjs +1 -1
  2. package/dist/components/drawer/drawer-close.js +1 -1
  3. package/dist/components/drawer/drawer-content.cjs +1 -1
  4. package/dist/components/drawer/drawer-content.js +1 -1
  5. package/dist/components/drawer/drawer-description.cjs +1 -1
  6. package/dist/components/drawer/drawer-description.js +1 -1
  7. package/dist/components/drawer/drawer-footer.cjs +1 -1
  8. package/dist/components/drawer/drawer-footer.js +1 -1
  9. package/dist/components/drawer/drawer-overlay.cjs +1 -1
  10. package/dist/components/drawer/drawer-overlay.js +1 -1
  11. package/dist/components/drawer/drawer-title.cjs +1 -1
  12. package/dist/components/drawer/drawer-title.js +1 -1
  13. package/dist/components/modal/index.cjs +8 -0
  14. package/dist/components/modal/index.d.ts +185 -2
  15. package/dist/components/modal/index.js +8 -0
  16. package/dist/components/modal/{modal.cjs → modal-close.cjs} +3 -3
  17. package/dist/components/modal/modal-close.d.ts +19 -0
  18. package/dist/components/modal/{modal.js → modal-close.js} +4 -4
  19. package/dist/components/modal/modal-content.cjs +65 -0
  20. package/dist/components/modal/modal-content.d.ts +7 -0
  21. package/dist/components/modal/modal-content.js +48 -0
  22. package/dist/components/modal/modal-description.cjs +26 -0
  23. package/dist/components/modal/modal-description.d.ts +8 -0
  24. package/dist/components/modal/modal-description.js +9 -0
  25. package/dist/components/modal/modal-group.cjs +47 -0
  26. package/dist/components/modal/modal-group.d.ts +10 -0
  27. package/dist/components/modal/modal-group.js +47 -0
  28. package/dist/components/modal/modal-image.cjs +17 -0
  29. package/dist/components/modal/modal-image.d.ts +10 -0
  30. package/dist/components/modal/modal-image.js +17 -0
  31. package/dist/components/modal/modal-overlay.cjs +35 -0
  32. package/dist/components/modal/modal-overlay.d.ts +12 -0
  33. package/dist/components/modal/modal-overlay.js +18 -0
  34. package/dist/components/modal/modal-root.cjs +38 -0
  35. package/dist/components/modal/modal-root.d.ts +16 -0
  36. package/dist/components/modal/modal-root.js +21 -0
  37. package/dist/components/modal/modal-title.cjs +45 -0
  38. package/dist/components/modal/modal-title.d.ts +18 -0
  39. package/dist/components/modal/modal-title.js +28 -0
  40. package/dist/components/modal/modal-trigger.cjs +27 -0
  41. package/dist/components/modal/modal-trigger.d.ts +21 -0
  42. package/dist/components/modal/modal-trigger.js +10 -0
  43. package/dist/components/navigation-menu/global-navigation/global-navigation-desktop-simplified.js +2 -2
  44. package/dist/components/navigation-menu/global-navigation/global-navigation-mobile-simplified.js +2 -2
  45. package/dist/components/navigation-menu/global-navigation/global-navigation-mobile.js +2 -2
  46. package/dist/components/navigation-menu/global-navigation/global-navigation-my-pages.js +2 -2
  47. package/dist/components/navigation-menu/global-navigation/global-navigation-root.js +4 -4
  48. package/dist/components/navigation-menu/global-navigation/global-navigation-search-field.js +2 -2
  49. package/dist/components/navigation-menu/global-navigation/global-navigation-search.js +2 -2
  50. package/dist/components/navigation-menu/global-navigation/global-navigation-shopping-cart.js +2 -2
  51. package/dist/components/notabene/index.cjs +4 -0
  52. package/dist/components/notabene/index.js +4 -0
  53. package/dist/components/notification/index.cjs +6 -0
  54. package/dist/components/notification/index.js +6 -0
  55. package/dist/components/notification/notification-footer.cjs +1 -1
  56. package/dist/components/notification/notification-footer.js +1 -1
  57. package/dist/components/radio-card-group/radio-card-group-item-title.cjs +49 -151
  58. package/dist/components/radio-card-group/radio-card-group-item-title.js +67 -169
  59. package/dist/drawer.module-C4NZoZUc.cjs +15 -0
  60. package/dist/drawer.module-jxIDBwQn.js +16 -0
  61. package/dist/modal.module-BfeNqXoN.cjs +19 -0
  62. package/dist/modal.module-DuP4in7f.js +20 -0
  63. package/dist/style.css +193 -190
  64. package/package.json +1 -1
  65. package/dist/components/modal/modal.d.ts +0 -76
  66. package/dist/drawer.module-Am9xxZYU.js +0 -16
  67. 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-in_jiyrh_1 {
2407
+ @keyframes _teddy-fade-in_16gp4_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-out_jiyrh_1 {
2415
+ @keyframes _teddy-fade-out_16gp4_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-op_jiyrh_1 {
2423
+ @keyframes _teddy-overlay-no-op_16gp4_1 {
2424
2424
  from {
2425
2425
  opacity: 1;
2426
2426
  }
@@ -2428,11 +2428,11 @@
2428
2428
  opacity: 1;
2429
2429
  }
2430
2430
  }
2431
- ._teddy-drawer__overlay_jiyrh_26 {
2431
+ ._teddy-drawer__overlay_16gp4_26 {
2432
2432
  box-sizing: border-box;
2433
2433
  }
2434
2434
  @layer drawer {
2435
- ._teddy-drawer__overlay_jiyrh_26 {
2435
+ ._teddy-drawer__overlay_16gp4_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-drawer__overlay_jiyrh_26 {
2444
+ ._teddy-drawer__overlay_16gp4_26 {
2445
2445
  /* Keep the overlay mounted until the children have animated */
2446
2446
  }
2447
- ._teddy-drawer__overlay_jiyrh_26:where([data-state=closed]) {
2448
- animation: _teddy-overlay-no-op_jiyrh_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
2447
+ ._teddy-drawer__overlay_16gp4_26:where([data-state=closed]) {
2448
+ animation: _teddy-overlay-no-op_16gp4_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
2449
2449
  }
2450
- ._teddy-drawer__overlay_jiyrh_26:where([data-state=open])::before {
2451
- animation: _teddy-fade-in_jiyrh_1 500ms cubic-bezier(0.16, 1, 0.3, 1);
2450
+ ._teddy-drawer__overlay_16gp4_26:where([data-state=open])::before {
2451
+ animation: _teddy-fade-in_16gp4_1 500ms cubic-bezier(0.16, 1, 0.3, 1);
2452
2452
  }
2453
- ._teddy-drawer__overlay_jiyrh_26:where([data-state=closed])::before {
2454
- animation: _teddy-fade-out_jiyrh_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
2453
+ ._teddy-drawer__overlay_16gp4_26:where([data-state=closed])::before {
2454
+ opacity: 0;
2455
+ animation: _teddy-fade-out_16gp4_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
2455
2456
  }
2456
2457
  }
2457
- ._teddy-drawer__overlay_jiyrh_26::before {
2458
+ ._teddy-drawer__overlay_16gp4_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--container_jiyrh_59 {
2464
+ ._teddy-drawer__overlay--container_16gp4_60 {
2464
2465
  position: absolute;
2465
2466
  }
2466
- ._teddy-drawer__overlay--container_jiyrh_59::before {
2467
+ ._teddy-drawer__overlay--container_16gp4_60::before {
2467
2468
  position: absolute;
2468
2469
  }
2469
- ._teddy-drawer__overlay--container_jiyrh_59 ._teddy-drawer__content_jiyrh_65 {
2470
+ ._teddy-drawer__overlay--container_16gp4_60 ._teddy-drawer__content_16gp4_66 {
2470
2471
  position: absolute;
2471
2472
  inset: 0;
2472
2473
  }
2473
- ._teddy-drawer__title_jiyrh_69 {
2474
+ ._teddy-drawer__title_16gp4_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-drawer__content_jiyrh_65 {
2482
+ ._teddy-drawer__content_16gp4_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,26 @@
2494
2495
  min-width: min(100%, 400px);
2495
2496
  }
2496
2497
  @media (prefers-reduced-motion: no-preference) {
2497
- ._teddy-drawer__content_jiyrh_65:where([data-state=open]) {
2498
- animation: _drawer-content-show_jiyrh_1 450ms cubic-bezier(0.16, 1, 0.3, 1);
2498
+ ._teddy-drawer__content_16gp4_66:where([data-state=open]) {
2499
+ animation: _drawer-content-show_16gp4_1 450ms cubic-bezier(0.16, 1, 0.3, 1);
2499
2500
  }
2500
- ._teddy-drawer__content_jiyrh_65:where([data-state=closed]) {
2501
- animation: _drawer-content-hide_jiyrh_1 350ms cubic-bezier(0.16, 1, 0.3, 1);
2501
+ ._teddy-drawer__content_16gp4_66:where([data-state=closed]) {
2502
+ animation: _drawer-content-hide_16gp4_1 350ms cubic-bezier(0.16, 1, 0.3, 1);
2502
2503
  }
2503
2504
  }
2504
- ._teddy-drawer__content--lg_jiyrh_100 {
2505
+ ._teddy-drawer__content--lg_16gp4_101 {
2505
2506
  min-width: min(100%, 30rem);
2506
2507
  width: 30vw;
2507
2508
  max-width: initial;
2508
2509
  }
2509
- ._teddy-drawer__close--floating_jiyrh_105 {
2510
+ ._teddy-drawer__close--floating_16gp4_106 {
2510
2511
  position: fixed;
2511
2512
  z-index: 3;
2512
2513
  top: var(--teddy-spacing-200);
2513
2514
  right: var(--teddy-spacing-200);
2514
2515
  }
2515
2516
  }
2516
- @keyframes _drawer-content-show_jiyrh_1 {
2517
+ @keyframes _drawer-content-show_16gp4_1 {
2517
2518
  from {
2518
2519
  transform: translateX(100%);
2519
2520
  }
@@ -2521,7 +2522,7 @@
2521
2522
  transform: translateX(0px);
2522
2523
  }
2523
2524
  }
2524
- @keyframes _drawer-content-hide_jiyrh_1 {
2525
+ @keyframes _drawer-content-hide_16gp4_1 {
2525
2526
  from {
2526
2527
  transform: translateX(0px);
2527
2528
  }
@@ -2622,6 +2623,172 @@
2622
2623
  }
2623
2624
  ._teddy-chip__indicator_69tae_83 {
2624
2625
  display: none;
2626
+ }@keyframes _teddy-fade-in_1mjv8_1 {
2627
+ from {
2628
+ opacity: 0;
2629
+ }
2630
+ to {
2631
+ opacity: 1;
2632
+ }
2633
+ }
2634
+ @keyframes _teddy-fade-out_1mjv8_1 {
2635
+ from {
2636
+ opacity: 1;
2637
+ }
2638
+ to {
2639
+ opacity: 0;
2640
+ }
2641
+ }
2642
+ @keyframes _teddy-overlay-no-op_1mjv8_1 {
2643
+ from {
2644
+ opacity: 1;
2645
+ }
2646
+ to {
2647
+ opacity: 1;
2648
+ }
2649
+ }
2650
+ ._teddy-modal__overlay_1mjv8_25 {
2651
+ position: fixed;
2652
+ inset: 0;
2653
+ display: grid;
2654
+ place-items: center;
2655
+ }
2656
+ ._teddy-modal__overlay_1mjv8_25::before {
2657
+ position: fixed;
2658
+ content: "";
2659
+ inset: 0;
2660
+ background-color: var(--teddy-color-overlay-default);
2661
+ }
2662
+ ._teddy-modal__content_1mjv8_37 {
2663
+ background-color: var(--teddy-color-background-primary);
2664
+ box-shadow: var(--teddy-shadow-lg);
2665
+ position: relative;
2666
+ overflow: hidden;
2667
+ height: 100%;
2668
+ width: 100%;
2669
+ }
2670
+ @media (min-width: 600px) {
2671
+ ._teddy-modal__content_1mjv8_37 {
2672
+ max-width: 720px;
2673
+ max-height: 80%;
2674
+ min-height: 360px;
2675
+ height: auto;
2676
+ width: auto;
2677
+ border-radius: var(--teddy-border-radius-lg);
2678
+ }
2679
+ }
2680
+ ._teddy-modal__scroll_1mjv8_55 {
2681
+ overflow: auto;
2682
+ padding-inline: var(--teddy-spacing-300);
2683
+ }
2684
+ ._teddy-modal__image_1mjv8_59 {
2685
+ max-width: calc(100% + var(--teddy-spacing-300) * 2);
2686
+ height: auto;
2687
+ vertical-align: middle;
2688
+ font-style: italic;
2689
+ background-repeat: no-repeat;
2690
+ background-size: cover;
2691
+ shape-margin: 0.75rem;
2692
+ margin-inline: calc(var(--teddy-spacing-300) * -1);
2693
+ }
2694
+ ._teddy-modal__close--floating_1mjv8_69 {
2695
+ position: absolute;
2696
+ top: var(--teddy-spacing-100);
2697
+ right: var(--teddy-spacing-100);
2698
+ }
2699
+ @media (max-width: 600px) {
2700
+ ._teddy-modal__close--floating_1mjv8_69 {
2701
+ top: var(--teddy-spacing-50);
2702
+ }
2703
+ }
2704
+ ._teddy-modal__group_1mjv8_79 {
2705
+ width: 100%;
2706
+ margin-bottom: var(--teddy-spacing-200);
2707
+ }
2708
+ ._teddy-modal__group--title_1mjv8_83 {
2709
+ position: sticky;
2710
+ inset: 0 0 auto 0;
2711
+ background-color: var(--teddy-color-background-primary);
2712
+ padding-top: var(--teddy-spacing-300);
2713
+ }
2714
+ @media (max-width: 600px) {
2715
+ ._teddy-modal__group--title_1mjv8_83 {
2716
+ padding-top: var(--teddy-spacing-250);
2717
+ }
2718
+ }
2719
+ ._teddy-modal__group--title_1mjv8_83._teddy-modal__group--scroll_1mjv8_94 {
2720
+ padding-block: var(--teddy-spacing-200);
2721
+ }
2722
+ ._teddy-modal__group--title_1mjv8_83._teddy-modal__group--scroll_1mjv8_94::before {
2723
+ content: "";
2724
+ position: absolute;
2725
+ inset: 0 calc(var(--teddy-spacing-300) * -1) 0 calc(var(--teddy-spacing-300) * -1);
2726
+ border-bottom: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
2727
+ }
2728
+ ._teddy-modal__group--action_1mjv8_103 {
2729
+ height: 100%;
2730
+ position: sticky;
2731
+ inset: auto 0 0 0;
2732
+ margin: 0;
2733
+ padding: var(--teddy-spacing-200) 0 var(--teddy-spacing-300);
2734
+ background-color: var(--teddy-color-background-primary);
2735
+ }
2736
+ ._teddy-modal__group--action_1mjv8_103._teddy-modal__group--scroll_1mjv8_94::before {
2737
+ content: "";
2738
+ position: absolute;
2739
+ inset: 0 calc(var(--teddy-spacing-300) * -1) 0 calc(var(--teddy-spacing-300) * -1);
2740
+ border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
2741
+ box-shadow: 0 0 20px 15px var(--teddy-color-background-primary);
2742
+ }
2743
+ @media (prefers-reduced-motion: no-preference) {
2744
+ @keyframes _modal-overlay-no-op_1mjv8_1 {
2745
+ from {
2746
+ opacity: 1;
2747
+ }
2748
+ to {
2749
+ opacity: 1;
2750
+ }
2751
+ }
2752
+ @keyframes _modal-content-show_1mjv8_1 {
2753
+ from {
2754
+ opacity: 0;
2755
+ transform: translateY(5px) scale(0.97);
2756
+ }
2757
+ to {
2758
+ opacity: 1;
2759
+ transform: translateY(0px) scale(1);
2760
+ }
2761
+ }
2762
+ @keyframes _modal-content-hide_1mjv8_1 {
2763
+ from {
2764
+ opacity: 1;
2765
+ transform: translateY(0px) scale(1);
2766
+ }
2767
+ to {
2768
+ opacity: 0;
2769
+ transform: translateY(5px) scale(0.99);
2770
+ }
2771
+ }
2772
+ ._teddy-modal__overlay_1mjv8_25 {
2773
+ /* Keep the overlay mounted until the children have animated */
2774
+ }
2775
+ ._teddy-modal__overlay_1mjv8_25:where([data-state=closed]) {
2776
+ animation: _modal-overlay-no-op_1mjv8_1 250ms cubic-bezier(0.16, 1, 0.3, 1);
2777
+ }
2778
+ ._teddy-modal__overlay_1mjv8_25:where([data-state=open])::before {
2779
+ animation: _teddy-fade-in_1mjv8_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
2780
+ }
2781
+ ._teddy-modal__overlay_1mjv8_25:where([data-state=closed])::before {
2782
+ opacity: 0;
2783
+ animation: _teddy-fade-out_1mjv8_1 250ms cubic-bezier(0.16, 1, 0.3, 1);
2784
+ }
2785
+ ._teddy-modal__content_1mjv8_37:where([data-state=open]) {
2786
+ animation: _modal-content-show_1mjv8_1 200ms cubic-bezier(0.16, 1, 0.3, 1);
2787
+ }
2788
+ ._teddy-modal__content_1mjv8_37:where([data-state=closed]) {
2789
+ opacity: 0;
2790
+ animation: _modal-content-hide_1mjv8_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
2791
+ }
2625
2792
  }@layer grid {
2626
2793
  ._teddy-grid_1dv1t_2 {
2627
2794
  box-sizing: border-box;
@@ -4630,170 +4797,6 @@
4630
4797
  }
4631
4798
  ._teddy-slider__thumb_96kxz_23:focus {
4632
4799
  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
4800
  }._teddy-navigation-menu_6p30v_1 {
4798
4801
  --item-gap: var(--teddy-spacing-200);
4799
4802
  --width-for-centering-element: calc((100% - var(--teddy-breakpoint-xl) + var(--teddy-spacing-600) * 2) / 2);
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.3.2",
23
+ "version": "0.3.4",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"
@@ -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;