@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.
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-Bh77Byg_.js +16 -0
  60. package/dist/drawer.module-khivHSFm.cjs +15 -0
  61. package/dist/modal.module-BfeNqXoN.cjs +19 -0
  62. package/dist/modal.module-DuP4in7f.js +20 -0
  63. package/dist/style.css +194 -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_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-out_jiyrh_1 {
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-op_jiyrh_1 {
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-drawer__overlay_jiyrh_26 {
2431
+ ._teddy-drawer__overlay_1hfde_26 {
2432
2432
  box-sizing: border-box;
2433
2433
  }
2434
2434
  @layer drawer {
2435
- ._teddy-drawer__overlay_jiyrh_26 {
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-drawer__overlay_jiyrh_26 {
2444
+ ._teddy-drawer__overlay_1hfde_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_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-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_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-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_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-drawer__overlay_jiyrh_26::before {
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--container_jiyrh_59 {
2464
+ ._teddy-drawer__overlay--container_1hfde_60 {
2464
2465
  position: absolute;
2465
2466
  }
2466
- ._teddy-drawer__overlay--container_jiyrh_59::before {
2467
+ ._teddy-drawer__overlay--container_1hfde_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_1hfde_60 ._teddy-drawer__content_1hfde_66 {
2470
2471
  position: absolute;
2471
2472
  inset: 0;
2472
2473
  }
2473
- ._teddy-drawer__title_jiyrh_69 {
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-drawer__content_jiyrh_65 {
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-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_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-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_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--lg_jiyrh_100 {
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--floating_jiyrh_105 {
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-show_jiyrh_1 {
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-hide_jiyrh_1 {
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
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.3.2",
23
+ "version": "0.3.3",
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;