@transferwise/components 0.0.0-experimental-3fbb2ff → 0.0.0-experimental-69786e7

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 (10) hide show
  1. package/build/main.css +60 -4
  2. package/build/styles/inputs/Input.css +28 -2
  3. package/build/styles/inputs/TextArea.css +28 -2
  4. package/build/styles/main.css +60 -4
  5. package/build/styles/popover/Popover.css +28 -2
  6. package/package.json +3 -3
  7. package/src/inputs/Input.css +28 -2
  8. package/src/inputs/TextArea.css +28 -2
  9. package/src/main.css +60 -4
  10. package/src/popover/Popover.css +28 -2
package/build/main.css CHANGED
@@ -2585,8 +2585,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2585
2585
  line-height: 1.2;
2586
2586
  line-height: var(--line-height-title);
2587
2587
  letter-spacing: 0;
2588
- -webkit-hyphens: auto;
2589
- hyphens: auto;
2590
2588
  margin-bottom: 0;
2591
2589
  margin-bottom: initial;
2592
2590
  font-size: 1.375rem;
@@ -2598,6 +2596,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2598
2596
  height: 72px !important;
2599
2597
  height: var(--size-72) !important;
2600
2598
  }
2599
+ @supports (hyphenate-limit-chars: 1) {
2600
+ .np-form-control--size-lg {
2601
+ -webkit-hyphens: auto;
2602
+ hyphens: auto;
2603
+ hyphenate-limit-chars: 7 3;
2604
+ }
2605
+ @media (min-width: 768px) {
2606
+ .np-form-control--size-lg {
2607
+ hyphenate-limit-chars: 8 3;
2608
+ }
2609
+ }
2610
+ @media (min-width: 992px) {
2611
+ .np-form-control--size-lg {
2612
+ hyphenate-limit-chars: 10 4 3;
2613
+ }
2614
+ }
2615
+ }
2616
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
2617
+ .np-form-control--size-lg {
2618
+ -webkit-hyphens: auto;
2619
+ hyphens: auto;
2620
+ -webkit-hyphenate-limit-before: 3;
2621
+ -webkit-hyphenate-limit-after: 3;
2622
+ }
2623
+ @media (min-width: 992px) {
2624
+ .np-form-control--size-lg {
2625
+ -webkit-hyphenate-limit-before: 4;
2626
+ }
2627
+ }
2628
+ }
2601
2629
  .np-form-control--size-lg + p,
2602
2630
  .np-form-control--size-lg + ul:not(.list-unstyled),
2603
2631
  .np-form-control--size-lg + ol:not(.list-unstyled) {
@@ -4023,8 +4051,6 @@ html:not([dir="rtl"]) .np-navigation-option {
4023
4051
  line-height: 1.2;
4024
4052
  line-height: var(--line-height-title);
4025
4053
  letter-spacing: 0;
4026
- -webkit-hyphens: auto;
4027
- hyphens: auto;
4028
4054
  margin-bottom: 0;
4029
4055
  margin-bottom: initial;
4030
4056
  font-weight: 600;
@@ -4034,6 +4060,36 @@ html:not([dir="rtl"]) .np-navigation-option {
4034
4060
  letter-spacing: -0.02em;
4035
4061
  line-height: 122%;
4036
4062
  }
4063
+ @supports (hyphenate-limit-chars: 1) {
4064
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4065
+ -webkit-hyphens: auto;
4066
+ hyphens: auto;
4067
+ hyphenate-limit-chars: 7 3;
4068
+ }
4069
+ @media (min-width: 768px) {
4070
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4071
+ hyphenate-limit-chars: 8 3;
4072
+ }
4073
+ }
4074
+ @media (min-width: 992px) {
4075
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4076
+ hyphenate-limit-chars: 10 4 3;
4077
+ }
4078
+ }
4079
+ }
4080
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
4081
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4082
+ -webkit-hyphens: auto;
4083
+ hyphens: auto;
4084
+ -webkit-hyphenate-limit-before: 3;
4085
+ -webkit-hyphenate-limit-after: 3;
4086
+ }
4087
+ @media (min-width: 992px) {
4088
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4089
+ -webkit-hyphenate-limit-before: 4;
4090
+ }
4091
+ }
4092
+ }
4037
4093
  .np-popover__container.np-bottom-sheet .np-popover__title + p,
4038
4094
  .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
4039
4095
  .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
package/build/styles/inputs/Input.css CHANGED
@@ -71,8 +71,6 @@
71
71
  line-height: 1.2;
72
72
  line-height: var(--line-height-title);
73
73
  letter-spacing: 0;
74
- -webkit-hyphens: auto;
75
- hyphens: auto;
76
74
  margin-bottom: 0;
77
75
  margin-bottom: initial;
78
76
  font-size: 1.375rem;
@@ -83,6 +81,34 @@
83
81
  line-height: 125%;
84
82
  height: 72px !important;
85
83
  height: var(--size-72) !important;
84
+ }@supports (hyphenate-limit-chars: 1) {
85
+ .np-form-control--size-lg {
86
+ -webkit-hyphens: auto;
87
+ hyphens: auto;
88
+ hyphenate-limit-chars: 7 3;
89
+ }
90
+ @media (min-width: 768px) {
91
+ .np-form-control--size-lg {
92
+ hyphenate-limit-chars: 8 3;
93
+ }
94
+ }
95
+ @media (min-width: 992px) {
96
+ .np-form-control--size-lg {
97
+ hyphenate-limit-chars: 10 4 3;
98
+ }
99
+ }
100
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
101
+ .np-form-control--size-lg {
102
+ -webkit-hyphens: auto;
103
+ hyphens: auto;
104
+ -webkit-hyphenate-limit-before: 3;
105
+ -webkit-hyphenate-limit-after: 3;
106
+ }
107
+ @media (min-width: 992px) {
108
+ .np-form-control--size-lg {
109
+ -webkit-hyphenate-limit-before: 4;
110
+ }
111
+ }
86
112
  }.np-form-control--size-lg + p,
87
113
  .np-form-control--size-lg + ul:not(.list-unstyled),
88
114
  .np-form-control--size-lg + ol:not(.list-unstyled) {
package/build/styles/inputs/TextArea.css CHANGED
@@ -71,8 +71,6 @@
71
71
  line-height: 1.2;
72
72
  line-height: var(--line-height-title);
73
73
  letter-spacing: 0;
74
- -webkit-hyphens: auto;
75
- hyphens: auto;
76
74
  margin-bottom: 0;
77
75
  margin-bottom: initial;
78
76
  font-size: 1.375rem;
@@ -83,6 +81,34 @@
83
81
  line-height: 125%;
84
82
  height: 72px !important;
85
83
  height: var(--size-72) !important;
84
+ }@supports (hyphenate-limit-chars: 1) {
85
+ .np-form-control--size-lg {
86
+ -webkit-hyphens: auto;
87
+ hyphens: auto;
88
+ hyphenate-limit-chars: 7 3;
89
+ }
90
+ @media (min-width: 768px) {
91
+ .np-form-control--size-lg {
92
+ hyphenate-limit-chars: 8 3;
93
+ }
94
+ }
95
+ @media (min-width: 992px) {
96
+ .np-form-control--size-lg {
97
+ hyphenate-limit-chars: 10 4 3;
98
+ }
99
+ }
100
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
101
+ .np-form-control--size-lg {
102
+ -webkit-hyphens: auto;
103
+ hyphens: auto;
104
+ -webkit-hyphenate-limit-before: 3;
105
+ -webkit-hyphenate-limit-after: 3;
106
+ }
107
+ @media (min-width: 992px) {
108
+ .np-form-control--size-lg {
109
+ -webkit-hyphenate-limit-before: 4;
110
+ }
111
+ }
86
112
  }.np-form-control--size-lg + p,
87
113
  .np-form-control--size-lg + ul:not(.list-unstyled),
88
114
  .np-form-control--size-lg + ol:not(.list-unstyled) {
package/build/styles/main.css CHANGED
@@ -2585,8 +2585,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2585
2585
  line-height: 1.2;
2586
2586
  line-height: var(--line-height-title);
2587
2587
  letter-spacing: 0;
2588
- -webkit-hyphens: auto;
2589
- hyphens: auto;
2590
2588
  margin-bottom: 0;
2591
2589
  margin-bottom: initial;
2592
2590
  font-size: 1.375rem;
@@ -2598,6 +2596,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2598
2596
  height: 72px !important;
2599
2597
  height: var(--size-72) !important;
2600
2598
  }
2599
+ @supports (hyphenate-limit-chars: 1) {
2600
+ .np-form-control--size-lg {
2601
+ -webkit-hyphens: auto;
2602
+ hyphens: auto;
2603
+ hyphenate-limit-chars: 7 3;
2604
+ }
2605
+ @media (min-width: 768px) {
2606
+ .np-form-control--size-lg {
2607
+ hyphenate-limit-chars: 8 3;
2608
+ }
2609
+ }
2610
+ @media (min-width: 992px) {
2611
+ .np-form-control--size-lg {
2612
+ hyphenate-limit-chars: 10 4 3;
2613
+ }
2614
+ }
2615
+ }
2616
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
2617
+ .np-form-control--size-lg {
2618
+ -webkit-hyphens: auto;
2619
+ hyphens: auto;
2620
+ -webkit-hyphenate-limit-before: 3;
2621
+ -webkit-hyphenate-limit-after: 3;
2622
+ }
2623
+ @media (min-width: 992px) {
2624
+ .np-form-control--size-lg {
2625
+ -webkit-hyphenate-limit-before: 4;
2626
+ }
2627
+ }
2628
+ }
2601
2629
  .np-form-control--size-lg + p,
2602
2630
  .np-form-control--size-lg + ul:not(.list-unstyled),
2603
2631
  .np-form-control--size-lg + ol:not(.list-unstyled) {
@@ -4023,8 +4051,6 @@ html:not([dir="rtl"]) .np-navigation-option {
4023
4051
  line-height: 1.2;
4024
4052
  line-height: var(--line-height-title);
4025
4053
  letter-spacing: 0;
4026
- -webkit-hyphens: auto;
4027
- hyphens: auto;
4028
4054
  margin-bottom: 0;
4029
4055
  margin-bottom: initial;
4030
4056
  font-weight: 600;
@@ -4034,6 +4060,36 @@ html:not([dir="rtl"]) .np-navigation-option {
4034
4060
  letter-spacing: -0.02em;
4035
4061
  line-height: 122%;
4036
4062
  }
4063
+ @supports (hyphenate-limit-chars: 1) {
4064
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4065
+ -webkit-hyphens: auto;
4066
+ hyphens: auto;
4067
+ hyphenate-limit-chars: 7 3;
4068
+ }
4069
+ @media (min-width: 768px) {
4070
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4071
+ hyphenate-limit-chars: 8 3;
4072
+ }
4073
+ }
4074
+ @media (min-width: 992px) {
4075
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4076
+ hyphenate-limit-chars: 10 4 3;
4077
+ }
4078
+ }
4079
+ }
4080
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
4081
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4082
+ -webkit-hyphens: auto;
4083
+ hyphens: auto;
4084
+ -webkit-hyphenate-limit-before: 3;
4085
+ -webkit-hyphenate-limit-after: 3;
4086
+ }
4087
+ @media (min-width: 992px) {
4088
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4089
+ -webkit-hyphenate-limit-before: 4;
4090
+ }
4091
+ }
4092
+ }
4037
4093
  .np-popover__container.np-bottom-sheet .np-popover__title + p,
4038
4094
  .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
4039
4095
  .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
package/build/styles/popover/Popover.css CHANGED
@@ -24,8 +24,6 @@
24
24
  line-height: 1.2;
25
25
  line-height: var(--line-height-title);
26
26
  letter-spacing: 0;
27
- -webkit-hyphens: auto;
28
- hyphens: auto;
29
27
  margin-bottom: 0;
30
28
  margin-bottom: initial;
31
29
  font-weight: 600;
@@ -34,6 +32,34 @@
34
32
  font-size: var(--font-size-26);
35
33
  letter-spacing: -0.02em;
36
34
  line-height: 122%;
35
+ }@supports (hyphenate-limit-chars: 1) {
36
+ .np-popover__container.np-bottom-sheet .np-popover__title {
37
+ -webkit-hyphens: auto;
38
+ hyphens: auto;
39
+ hyphenate-limit-chars: 7 3;
40
+ }
41
+ @media (min-width: 768px) {
42
+ .np-popover__container.np-bottom-sheet .np-popover__title {
43
+ hyphenate-limit-chars: 8 3;
44
+ }
45
+ }
46
+ @media (min-width: 992px) {
47
+ .np-popover__container.np-bottom-sheet .np-popover__title {
48
+ hyphenate-limit-chars: 10 4 3;
49
+ }
50
+ }
51
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
52
+ .np-popover__container.np-bottom-sheet .np-popover__title {
53
+ -webkit-hyphens: auto;
54
+ hyphens: auto;
55
+ -webkit-hyphenate-limit-before: 3;
56
+ -webkit-hyphenate-limit-after: 3;
57
+ }
58
+ @media (min-width: 992px) {
59
+ .np-popover__container.np-bottom-sheet .np-popover__title {
60
+ -webkit-hyphenate-limit-before: 4;
61
+ }
62
+ }
37
63
  }.np-popover__container.np-bottom-sheet .np-popover__title + p,
38
64
  .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
39
65
  .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-3fbb2ff",
3
+ "version": "0.0.0-experimental-69786e7",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -95,13 +95,13 @@
95
95
  "rollup-preserve-directives": "^1.1.1",
96
96
  "storybook": "^8.2.2",
97
97
  "@transferwise/less-config": "3.1.1",
98
- "@transferwise/neptune-css": "14.24.3",
98
+ "@transferwise/neptune-css": "0.0.0-experimental-69786e7",
99
99
  "@wise/components-theming": "1.6.2",
100
100
  "@wise/wds-configs": "0.0.0"
101
101
  },
102
102
  "peerDependencies": {
103
103
  "@transferwise/icons": "^3.20.0",
104
- "@transferwise/neptune-css": "^14.24",
104
+ "@transferwise/neptune-css": "0.0.0-experimental-69786e7",
105
105
  "@wise/art": "^2.16",
106
106
  "@wise/components-theming": "^1.0.0",
107
107
  "react": ">=18",
package/src/inputs/Input.css CHANGED
@@ -71,8 +71,6 @@
71
71
  line-height: 1.2;
72
72
  line-height: var(--line-height-title);
73
73
  letter-spacing: 0;
74
- -webkit-hyphens: auto;
75
- hyphens: auto;
76
74
  margin-bottom: 0;
77
75
  margin-bottom: initial;
78
76
  font-size: 1.375rem;
@@ -83,6 +81,34 @@
83
81
  line-height: 125%;
84
82
  height: 72px !important;
85
83
  height: var(--size-72) !important;
84
+ }@supports (hyphenate-limit-chars: 1) {
85
+ .np-form-control--size-lg {
86
+ -webkit-hyphens: auto;
87
+ hyphens: auto;
88
+ hyphenate-limit-chars: 7 3;
89
+ }
90
+ @media (min-width: 768px) {
91
+ .np-form-control--size-lg {
92
+ hyphenate-limit-chars: 8 3;
93
+ }
94
+ }
95
+ @media (min-width: 992px) {
96
+ .np-form-control--size-lg {
97
+ hyphenate-limit-chars: 10 4 3;
98
+ }
99
+ }
100
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
101
+ .np-form-control--size-lg {
102
+ -webkit-hyphens: auto;
103
+ hyphens: auto;
104
+ -webkit-hyphenate-limit-before: 3;
105
+ -webkit-hyphenate-limit-after: 3;
106
+ }
107
+ @media (min-width: 992px) {
108
+ .np-form-control--size-lg {
109
+ -webkit-hyphenate-limit-before: 4;
110
+ }
111
+ }
86
112
  }.np-form-control--size-lg + p,
87
113
  .np-form-control--size-lg + ul:not(.list-unstyled),
88
114
  .np-form-control--size-lg + ol:not(.list-unstyled) {
package/src/inputs/TextArea.css CHANGED
@@ -71,8 +71,6 @@
71
71
  line-height: 1.2;
72
72
  line-height: var(--line-height-title);
73
73
  letter-spacing: 0;
74
- -webkit-hyphens: auto;
75
- hyphens: auto;
76
74
  margin-bottom: 0;
77
75
  margin-bottom: initial;
78
76
  font-size: 1.375rem;
@@ -83,6 +81,34 @@
83
81
  line-height: 125%;
84
82
  height: 72px !important;
85
83
  height: var(--size-72) !important;
84
+ }@supports (hyphenate-limit-chars: 1) {
85
+ .np-form-control--size-lg {
86
+ -webkit-hyphens: auto;
87
+ hyphens: auto;
88
+ hyphenate-limit-chars: 7 3;
89
+ }
90
+ @media (min-width: 768px) {
91
+ .np-form-control--size-lg {
92
+ hyphenate-limit-chars: 8 3;
93
+ }
94
+ }
95
+ @media (min-width: 992px) {
96
+ .np-form-control--size-lg {
97
+ hyphenate-limit-chars: 10 4 3;
98
+ }
99
+ }
100
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
101
+ .np-form-control--size-lg {
102
+ -webkit-hyphens: auto;
103
+ hyphens: auto;
104
+ -webkit-hyphenate-limit-before: 3;
105
+ -webkit-hyphenate-limit-after: 3;
106
+ }
107
+ @media (min-width: 992px) {
108
+ .np-form-control--size-lg {
109
+ -webkit-hyphenate-limit-before: 4;
110
+ }
111
+ }
86
112
  }.np-form-control--size-lg + p,
87
113
  .np-form-control--size-lg + ul:not(.list-unstyled),
88
114
  .np-form-control--size-lg + ol:not(.list-unstyled) {
package/src/main.css CHANGED
@@ -2585,8 +2585,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2585
2585
  line-height: 1.2;
2586
2586
  line-height: var(--line-height-title);
2587
2587
  letter-spacing: 0;
2588
- -webkit-hyphens: auto;
2589
- hyphens: auto;
2590
2588
  margin-bottom: 0;
2591
2589
  margin-bottom: initial;
2592
2590
  font-size: 1.375rem;
@@ -2598,6 +2596,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2598
2596
  height: 72px !important;
2599
2597
  height: var(--size-72) !important;
2600
2598
  }
2599
+ @supports (hyphenate-limit-chars: 1) {
2600
+ .np-form-control--size-lg {
2601
+ -webkit-hyphens: auto;
2602
+ hyphens: auto;
2603
+ hyphenate-limit-chars: 7 3;
2604
+ }
2605
+ @media (min-width: 768px) {
2606
+ .np-form-control--size-lg {
2607
+ hyphenate-limit-chars: 8 3;
2608
+ }
2609
+ }
2610
+ @media (min-width: 992px) {
2611
+ .np-form-control--size-lg {
2612
+ hyphenate-limit-chars: 10 4 3;
2613
+ }
2614
+ }
2615
+ }
2616
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
2617
+ .np-form-control--size-lg {
2618
+ -webkit-hyphens: auto;
2619
+ hyphens: auto;
2620
+ -webkit-hyphenate-limit-before: 3;
2621
+ -webkit-hyphenate-limit-after: 3;
2622
+ }
2623
+ @media (min-width: 992px) {
2624
+ .np-form-control--size-lg {
2625
+ -webkit-hyphenate-limit-before: 4;
2626
+ }
2627
+ }
2628
+ }
2601
2629
  .np-form-control--size-lg + p,
2602
2630
  .np-form-control--size-lg + ul:not(.list-unstyled),
2603
2631
  .np-form-control--size-lg + ol:not(.list-unstyled) {
@@ -4023,8 +4051,6 @@ html:not([dir="rtl"]) .np-navigation-option {
4023
4051
  line-height: 1.2;
4024
4052
  line-height: var(--line-height-title);
4025
4053
  letter-spacing: 0;
4026
- -webkit-hyphens: auto;
4027
- hyphens: auto;
4028
4054
  margin-bottom: 0;
4029
4055
  margin-bottom: initial;
4030
4056
  font-weight: 600;
@@ -4034,6 +4060,36 @@ html:not([dir="rtl"]) .np-navigation-option {
4034
4060
  letter-spacing: -0.02em;
4035
4061
  line-height: 122%;
4036
4062
  }
4063
+ @supports (hyphenate-limit-chars: 1) {
4064
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4065
+ -webkit-hyphens: auto;
4066
+ hyphens: auto;
4067
+ hyphenate-limit-chars: 7 3;
4068
+ }
4069
+ @media (min-width: 768px) {
4070
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4071
+ hyphenate-limit-chars: 8 3;
4072
+ }
4073
+ }
4074
+ @media (min-width: 992px) {
4075
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4076
+ hyphenate-limit-chars: 10 4 3;
4077
+ }
4078
+ }
4079
+ }
4080
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
4081
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4082
+ -webkit-hyphens: auto;
4083
+ hyphens: auto;
4084
+ -webkit-hyphenate-limit-before: 3;
4085
+ -webkit-hyphenate-limit-after: 3;
4086
+ }
4087
+ @media (min-width: 992px) {
4088
+ .np-popover__container.np-bottom-sheet .np-popover__title {
4089
+ -webkit-hyphenate-limit-before: 4;
4090
+ }
4091
+ }
4092
+ }
4037
4093
  .np-popover__container.np-bottom-sheet .np-popover__title + p,
4038
4094
  .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
4039
4095
  .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
package/src/popover/Popover.css CHANGED
@@ -24,8 +24,6 @@
24
24
  line-height: 1.2;
25
25
  line-height: var(--line-height-title);
26
26
  letter-spacing: 0;
27
- -webkit-hyphens: auto;
28
- hyphens: auto;
29
27
  margin-bottom: 0;
30
28
  margin-bottom: initial;
31
29
  font-weight: 600;
@@ -34,6 +32,34 @@
34
32
  font-size: var(--font-size-26);
35
33
  letter-spacing: -0.02em;
36
34
  line-height: 122%;
35
+ }@supports (hyphenate-limit-chars: 1) {
36
+ .np-popover__container.np-bottom-sheet .np-popover__title {
37
+ -webkit-hyphens: auto;
38
+ hyphens: auto;
39
+ hyphenate-limit-chars: 7 3;
40
+ }
41
+ @media (min-width: 768px) {
42
+ .np-popover__container.np-bottom-sheet .np-popover__title {
43
+ hyphenate-limit-chars: 8 3;
44
+ }
45
+ }
46
+ @media (min-width: 992px) {
47
+ .np-popover__container.np-bottom-sheet .np-popover__title {
48
+ hyphenate-limit-chars: 10 4 3;
49
+ }
50
+ }
51
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
52
+ .np-popover__container.np-bottom-sheet .np-popover__title {
53
+ -webkit-hyphens: auto;
54
+ hyphens: auto;
55
+ -webkit-hyphenate-limit-before: 3;
56
+ -webkit-hyphenate-limit-after: 3;
57
+ }
58
+ @media (min-width: 992px) {
59
+ .np-popover__container.np-bottom-sheet .np-popover__title {
60
+ -webkit-hyphenate-limit-before: 4;
61
+ }
62
+ }
37
63
  }.np-popover__container.np-bottom-sheet .np-popover__title + p,
38
64
  .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
39
65
  .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {