@transferwise/components 0.0.0-experimental-492a9d3 → 0.0.0-experimental-d585e0b

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 (24) hide show
  1. package/build/main.css +44 -5
  2. package/build/styles/accordion/Accordion.css +1 -0
  3. package/build/styles/avatar/Avatar.css +2 -0
  4. package/build/styles/card/Card.css +7 -0
  5. package/build/styles/flowNavigation/FlowNavigation.css +26 -4
  6. package/build/styles/inputs/Input.css +1 -0
  7. package/build/styles/inputs/TextArea.css +1 -0
  8. package/build/styles/main.css +44 -5
  9. package/build/styles/popover/Popover.css +1 -0
  10. package/build/styles/select/Select.css +1 -0
  11. package/build/styles/snackbar/Snackbar.css +1 -0
  12. package/build/styles/tile/Tile.css +5 -0
  13. package/package.json +4 -4
  14. package/src/accordion/Accordion.css +1 -0
  15. package/src/avatar/Avatar.css +2 -0
  16. package/src/card/Card.css +7 -0
  17. package/src/flowNavigation/FlowNavigation.css +26 -4
  18. package/src/inputs/Input.css +1 -0
  19. package/src/inputs/TextArea.css +1 -0
  20. package/src/main.css +44 -5
  21. package/src/popover/Popover.css +1 -0
  22. package/src/select/Select.css +1 -0
  23. package/src/snackbar/Snackbar.css +1 -0
  24. package/src/tile/Tile.css +5 -0
package/build/main.css CHANGED
@@ -74,7 +74,9 @@ div.critical-comms .critical-comms-body {
74
74
  flex-wrap: wrap;
75
75
  }
76
76
  }
77
- .tw-date-lookup-calendar > tbody > tr > td.weekend button {line-height: 1.5;line-height: var(--line-height-body);
77
+ .tw-date-lookup-calendar > tbody > tr > td.weekend button {
78
+ font-weight: 400;
79
+ font-weight: var(--font-weight-regular);line-height: 1.5;line-height: var(--line-height-body);
78
80
  }
79
81
  .tw-date-lookup-calendar > tbody > tr > td.weekend button {
80
82
  font-size: 1rem;
@@ -86,6 +88,8 @@ div.critical-comms .critical-comms-body {
86
88
  }
87
89
  @media (min-width: 768px) {
88
90
  }
91
+ @media (min-width: 768px) {
92
+ }
89
93
  .np-accordion-item {
90
94
  display: block;
91
95
  width: 100%;
@@ -254,6 +258,7 @@ div.critical-comms .critical-comms-body {
254
258
  }
255
259
  .tw-avatar.tw-avatar--initials,
256
260
  .tw-avatar.tw-avatar--emoji {
261
+ font-family: Arial, sans-serif;
257
262
  font-weight: 600;
258
263
  font-weight: var(--font-weight-semi-bold);
259
264
  }
@@ -592,6 +597,13 @@ div.critical-comms .critical-comms-body {
592
597
  [dir="rtl"] .np-card__button {
593
598
  text-align: right;
594
599
  }
600
+ .np-theme-personal .np-card__button:focus {
601
+ outline: none;
602
+ }
603
+ .np-theme-personal .np-card__button:focus-visible {
604
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
605
+ outline-offset: var(--ring-outline-offset);
606
+ }
595
607
  .np-card__content {
596
608
  padding: 24px 16px;
597
609
  padding: var(--size-24) var(--size-16);
@@ -2030,9 +2042,19 @@ button.np-option {
2030
2042
  max-width: 1164px;
2031
2043
  }
2032
2044
  .np-flow-navigation__stepper {
2033
- padding-bottom: 0px !important;
2034
- padding-left: 0px !important;
2035
- padding-right: 0px !important;
2045
+ padding-bottom: 0 !important;
2046
+ }
2047
+ [dir="rtl"] .np-flow-navigation__stepper {
2048
+ padding-right: 0 !important;
2049
+ }
2050
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2051
+ padding-left: 0 !important;
2052
+ }
2053
+ [dir="rtl"] .np-flow-navigation__stepper {
2054
+ padding-left: 0 !important;
2055
+ }
2056
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2057
+ padding-right: 0 !important;
2036
2058
  }
2037
2059
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
2038
2060
  display: none;
@@ -2044,11 +2066,23 @@ button.np-option {
2044
2066
  height: auto;
2045
2067
  }
2046
2068
  .np-flow-navigation--sm .np-flow-navigation__stepper {
2069
+ min-height: 56px;
2070
+ }
2071
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2072
+ padding-right: 24px !important;
2073
+ padding-right: var(--size-24) !important;
2074
+ }
2075
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2076
+ padding-left: 24px !important;
2077
+ padding-left: var(--size-24) !important;
2078
+ }
2079
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2047
2080
  padding-left: 24px !important;
2048
2081
  padding-left: var(--size-24) !important;
2082
+ }
2083
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2049
2084
  padding-right: 24px !important;
2050
2085
  padding-right: var(--size-24) !important;
2051
- min-height: 56px;
2052
2086
  }
2053
2087
  .np-flow-navigation--lg .np-flow-navigation__stepper {
2054
2088
  max-width: 562px;
@@ -3964,6 +3998,7 @@ html:not([dir="rtl"]) .np-navigation-option {
3964
3998
  z-index: 1060;
3965
3999
  }
3966
4000
  [dir="rtl"] .snackbar {
4001
+ right: 0;
3967
4002
  left: auto;
3968
4003
  left: initial;
3969
4004
  }
@@ -4913,6 +4948,10 @@ html:not([dir="rtl"]) .np-navigation-option {
4913
4948
  width: 100%;
4914
4949
  }
4915
4950
  .np-tile__description {
4951
+ color: #5d7079;
4952
+ color: var(--color-content-secondary);
4953
+ margin-top: 12px;
4954
+ margin-top: var(--size-12);
4916
4955
  display: inline-block;
4917
4956
  }
4918
4957
  .np-tile--small.np-decision__tile--fixed-width {
package/build/styles/accordion/Accordion.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-accordion-item {
3
4
  display: block;
4
5
  width: 100%;
package/build/styles/avatar/Avatar.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.tw-avatar {
3
4
  position: relative;
4
5
  border-radius: 50%;
@@ -38,6 +39,7 @@
38
39
  max-width: 100%;
39
40
  }.tw-avatar.tw-avatar--initials,
40
41
  .tw-avatar.tw-avatar--emoji {
42
+ font-family: Arial, sans-serif;
41
43
  font-weight: 600;
42
44
  font-weight: var(--font-weight-semi-bold);
43
45
  }.tw-avatar.tw-avatar--initials,
package/build/styles/card/Card.css CHANGED
@@ -44,6 +44,13 @@
44
44
  [dir="rtl"] .np-card__button {
45
45
  text-align: right;
46
46
  }
47
+ .np-theme-personal .np-card__button:focus {
48
+ outline: none;
49
+ }
50
+ .np-theme-personal .np-card__button:focus-visible {
51
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
52
+ outline-offset: var(--ring-outline-offset);
53
+ }
47
54
  .np-card__content {
48
55
  padding: 24px 16px;
49
56
  padding: var(--size-24) var(--size-16);
package/build/styles/flowNavigation/FlowNavigation.css CHANGED
@@ -13,9 +13,19 @@
13
13
  max-width: 1164px;
14
14
  }
15
15
  .np-flow-navigation__stepper {
16
- padding-bottom: 0px !important;
17
- padding-left: 0px !important;
18
- padding-right: 0px !important;
16
+ padding-bottom: 0 !important;
17
+ }
18
+ [dir="rtl"] .np-flow-navigation__stepper {
19
+ padding-right: 0 !important;
20
+ }
21
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
22
+ padding-left: 0 !important;
23
+ }
24
+ [dir="rtl"] .np-flow-navigation__stepper {
25
+ padding-left: 0 !important;
26
+ }
27
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
28
+ padding-right: 0 !important;
19
29
  }
20
30
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
21
31
  display: none;
@@ -27,11 +37,23 @@
27
37
  height: auto;
28
38
  }
29
39
  .np-flow-navigation--sm .np-flow-navigation__stepper {
40
+ min-height: 56px;
41
+ }
42
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
43
+ padding-right: 24px !important;
44
+ padding-right: var(--size-24) !important;
45
+ }
46
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30
47
  padding-left: 24px !important;
31
48
  padding-left: var(--size-24) !important;
49
+ }
50
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
51
+ padding-left: 24px !important;
52
+ padding-left: var(--size-24) !important;
53
+ }
54
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
32
55
  padding-right: 24px !important;
33
56
  padding-right: var(--size-24) !important;
34
- min-height: 56px;
35
57
  }
36
58
  .np-flow-navigation--lg .np-flow-navigation__stepper {
37
59
  max-width: 562px;
package/build/styles/inputs/Input.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-form-control {
3
4
  --ring-width: 1px;
4
5
  --ring-color: var(--color-interactive-secondary);
package/build/styles/inputs/TextArea.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-form-control {
3
4
  --ring-width: 1px;
4
5
  --ring-color: var(--color-interactive-secondary);
package/build/styles/main.css CHANGED
@@ -74,7 +74,9 @@ div.critical-comms .critical-comms-body {
74
74
  flex-wrap: wrap;
75
75
  }
76
76
  }
77
- .tw-date-lookup-calendar > tbody > tr > td.weekend button {line-height: 1.5;line-height: var(--line-height-body);
77
+ .tw-date-lookup-calendar > tbody > tr > td.weekend button {
78
+ font-weight: 400;
79
+ font-weight: var(--font-weight-regular);line-height: 1.5;line-height: var(--line-height-body);
78
80
  }
79
81
  .tw-date-lookup-calendar > tbody > tr > td.weekend button {
80
82
  font-size: 1rem;
@@ -86,6 +88,8 @@ div.critical-comms .critical-comms-body {
86
88
  }
87
89
  @media (min-width: 768px) {
88
90
  }
91
+ @media (min-width: 768px) {
92
+ }
89
93
  .np-accordion-item {
90
94
  display: block;
91
95
  width: 100%;
@@ -254,6 +258,7 @@ div.critical-comms .critical-comms-body {
254
258
  }
255
259
  .tw-avatar.tw-avatar--initials,
256
260
  .tw-avatar.tw-avatar--emoji {
261
+ font-family: Arial, sans-serif;
257
262
  font-weight: 600;
258
263
  font-weight: var(--font-weight-semi-bold);
259
264
  }
@@ -592,6 +597,13 @@ div.critical-comms .critical-comms-body {
592
597
  [dir="rtl"] .np-card__button {
593
598
  text-align: right;
594
599
  }
600
+ .np-theme-personal .np-card__button:focus {
601
+ outline: none;
602
+ }
603
+ .np-theme-personal .np-card__button:focus-visible {
604
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
605
+ outline-offset: var(--ring-outline-offset);
606
+ }
595
607
  .np-card__content {
596
608
  padding: 24px 16px;
597
609
  padding: var(--size-24) var(--size-16);
@@ -2030,9 +2042,19 @@ button.np-option {
2030
2042
  max-width: 1164px;
2031
2043
  }
2032
2044
  .np-flow-navigation__stepper {
2033
- padding-bottom: 0px !important;
2034
- padding-left: 0px !important;
2035
- padding-right: 0px !important;
2045
+ padding-bottom: 0 !important;
2046
+ }
2047
+ [dir="rtl"] .np-flow-navigation__stepper {
2048
+ padding-right: 0 !important;
2049
+ }
2050
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2051
+ padding-left: 0 !important;
2052
+ }
2053
+ [dir="rtl"] .np-flow-navigation__stepper {
2054
+ padding-left: 0 !important;
2055
+ }
2056
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2057
+ padding-right: 0 !important;
2036
2058
  }
2037
2059
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
2038
2060
  display: none;
@@ -2044,11 +2066,23 @@ button.np-option {
2044
2066
  height: auto;
2045
2067
  }
2046
2068
  .np-flow-navigation--sm .np-flow-navigation__stepper {
2069
+ min-height: 56px;
2070
+ }
2071
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2072
+ padding-right: 24px !important;
2073
+ padding-right: var(--size-24) !important;
2074
+ }
2075
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2076
+ padding-left: 24px !important;
2077
+ padding-left: var(--size-24) !important;
2078
+ }
2079
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2047
2080
  padding-left: 24px !important;
2048
2081
  padding-left: var(--size-24) !important;
2082
+ }
2083
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2049
2084
  padding-right: 24px !important;
2050
2085
  padding-right: var(--size-24) !important;
2051
- min-height: 56px;
2052
2086
  }
2053
2087
  .np-flow-navigation--lg .np-flow-navigation__stepper {
2054
2088
  max-width: 562px;
@@ -3964,6 +3998,7 @@ html:not([dir="rtl"]) .np-navigation-option {
3964
3998
  z-index: 1060;
3965
3999
  }
3966
4000
  [dir="rtl"] .snackbar {
4001
+ right: 0;
3967
4002
  left: auto;
3968
4003
  left: initial;
3969
4004
  }
@@ -4913,6 +4948,10 @@ html:not([dir="rtl"]) .np-navigation-option {
4913
4948
  width: 100%;
4914
4949
  }
4915
4950
  .np-tile__description {
4951
+ color: #5d7079;
4952
+ color: var(--color-content-secondary);
4953
+ margin-top: 12px;
4954
+ margin-top: var(--size-12);
4916
4955
  display: inline-block;
4917
4956
  }
4918
4957
  .np-tile--small.np-decision__tile--fixed-width {
package/build/styles/popover/Popover.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-theme-personal .np-popover__container {
3
4
  border-radius: 16px;
4
5
  border-radius: var(--radius-medium);
package/build/styles/select/Select.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-select .np-dropdown-toggle {
3
4
  background-color: #ffffff;
4
5
  background-color: var(--color-background-screen);
package/build/styles/snackbar/Snackbar.css CHANGED
@@ -7,6 +7,7 @@
7
7
  z-index: 1060;
8
8
  }
9
9
  [dir="rtl"] .snackbar {
10
+ right: 0;
10
11
  left: auto;
11
12
  left: initial;
12
13
  }
package/build/styles/tile/Tile.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-tile {
3
4
  min-width: 120px;
4
5
  border-radius: 10px;
@@ -27,6 +28,10 @@
27
28
  }.np-tile__media {
28
29
  width: 100%;
29
30
  }.np-tile__description {
31
+ color: #5d7079;
32
+ color: var(--color-content-secondary);
33
+ margin-top: 12px;
34
+ margin-top: var(--size-12);
30
35
  display: inline-block;
31
36
  }.np-tile--small.np-decision__tile--fixed-width {
32
37
  width: 260px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-492a9d3",
3
+ "version": "0.0.0-experimental-d585e0b",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -78,12 +78,12 @@
78
78
  "rollup": "^3.28.1",
79
79
  "storybook": "^7.4.5",
80
80
  "@transferwise/less-config": "3.1.0",
81
- "@wise/components-theming": "0.8.4",
82
- "@transferwise/neptune-css": "0.0.0-experimental-492a9d3"
81
+ "@transferwise/neptune-css": "14.9.3",
82
+ "@wise/components-theming": "0.8.4"
83
83
  },
84
84
  "peerDependencies": {
85
85
  "@transferwise/icons": "^3.7.0",
86
- "@transferwise/neptune-css": "0.0.0-experimental-492a9d3",
86
+ "@transferwise/neptune-css": "^14.9.3",
87
87
  "@wise/art": "^2.7.0",
88
88
  "@wise/components-theming": "^0.8.4",
89
89
  "react": ">=16.14",
package/src/accordion/Accordion.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-accordion-item {
3
4
  display: block;
4
5
  width: 100%;
package/src/avatar/Avatar.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.tw-avatar {
3
4
  position: relative;
4
5
  border-radius: 50%;
@@ -38,6 +39,7 @@
38
39
  max-width: 100%;
39
40
  }.tw-avatar.tw-avatar--initials,
40
41
  .tw-avatar.tw-avatar--emoji {
42
+ font-family: Arial, sans-serif;
41
43
  font-weight: 600;
42
44
  font-weight: var(--font-weight-semi-bold);
43
45
  }.tw-avatar.tw-avatar--initials,
package/src/card/Card.css CHANGED
@@ -44,6 +44,13 @@
44
44
  [dir="rtl"] .np-card__button {
45
45
  text-align: right;
46
46
  }
47
+ .np-theme-personal .np-card__button:focus {
48
+ outline: none;
49
+ }
50
+ .np-theme-personal .np-card__button:focus-visible {
51
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
52
+ outline-offset: var(--ring-outline-offset);
53
+ }
47
54
  .np-card__content {
48
55
  padding: 24px 16px;
49
56
  padding: var(--size-24) var(--size-16);
package/src/flowNavigation/FlowNavigation.css CHANGED
@@ -13,9 +13,19 @@
13
13
  max-width: 1164px;
14
14
  }
15
15
  .np-flow-navigation__stepper {
16
- padding-bottom: 0px !important;
17
- padding-left: 0px !important;
18
- padding-right: 0px !important;
16
+ padding-bottom: 0 !important;
17
+ }
18
+ [dir="rtl"] .np-flow-navigation__stepper {
19
+ padding-right: 0 !important;
20
+ }
21
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
22
+ padding-left: 0 !important;
23
+ }
24
+ [dir="rtl"] .np-flow-navigation__stepper {
25
+ padding-left: 0 !important;
26
+ }
27
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
28
+ padding-right: 0 !important;
19
29
  }
20
30
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
21
31
  display: none;
@@ -27,11 +37,23 @@
27
37
  height: auto;
28
38
  }
29
39
  .np-flow-navigation--sm .np-flow-navigation__stepper {
40
+ min-height: 56px;
41
+ }
42
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
43
+ padding-right: 24px !important;
44
+ padding-right: var(--size-24) !important;
45
+ }
46
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30
47
  padding-left: 24px !important;
31
48
  padding-left: var(--size-24) !important;
49
+ }
50
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
51
+ padding-left: 24px !important;
52
+ padding-left: var(--size-24) !important;
53
+ }
54
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
32
55
  padding-right: 24px !important;
33
56
  padding-right: var(--size-24) !important;
34
- min-height: 56px;
35
57
  }
36
58
  .np-flow-navigation--lg .np-flow-navigation__stepper {
37
59
  max-width: 562px;
package/src/inputs/Input.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-form-control {
3
4
  --ring-width: 1px;
4
5
  --ring-color: var(--color-interactive-secondary);
package/src/inputs/TextArea.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-form-control {
3
4
  --ring-width: 1px;
4
5
  --ring-color: var(--color-interactive-secondary);
package/src/main.css CHANGED
@@ -74,7 +74,9 @@ div.critical-comms .critical-comms-body {
74
74
  flex-wrap: wrap;
75
75
  }
76
76
  }
77
- .tw-date-lookup-calendar > tbody > tr > td.weekend button {line-height: 1.5;line-height: var(--line-height-body);
77
+ .tw-date-lookup-calendar > tbody > tr > td.weekend button {
78
+ font-weight: 400;
79
+ font-weight: var(--font-weight-regular);line-height: 1.5;line-height: var(--line-height-body);
78
80
  }
79
81
  .tw-date-lookup-calendar > tbody > tr > td.weekend button {
80
82
  font-size: 1rem;
@@ -86,6 +88,8 @@ div.critical-comms .critical-comms-body {
86
88
  }
87
89
  @media (min-width: 768px) {
88
90
  }
91
+ @media (min-width: 768px) {
92
+ }
89
93
  .np-accordion-item {
90
94
  display: block;
91
95
  width: 100%;
@@ -254,6 +258,7 @@ div.critical-comms .critical-comms-body {
254
258
  }
255
259
  .tw-avatar.tw-avatar--initials,
256
260
  .tw-avatar.tw-avatar--emoji {
261
+ font-family: Arial, sans-serif;
257
262
  font-weight: 600;
258
263
  font-weight: var(--font-weight-semi-bold);
259
264
  }
@@ -592,6 +597,13 @@ div.critical-comms .critical-comms-body {
592
597
  [dir="rtl"] .np-card__button {
593
598
  text-align: right;
594
599
  }
600
+ .np-theme-personal .np-card__button:focus {
601
+ outline: none;
602
+ }
603
+ .np-theme-personal .np-card__button:focus-visible {
604
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
605
+ outline-offset: var(--ring-outline-offset);
606
+ }
595
607
  .np-card__content {
596
608
  padding: 24px 16px;
597
609
  padding: var(--size-24) var(--size-16);
@@ -2030,9 +2042,19 @@ button.np-option {
2030
2042
  max-width: 1164px;
2031
2043
  }
2032
2044
  .np-flow-navigation__stepper {
2033
- padding-bottom: 0px !important;
2034
- padding-left: 0px !important;
2035
- padding-right: 0px !important;
2045
+ padding-bottom: 0 !important;
2046
+ }
2047
+ [dir="rtl"] .np-flow-navigation__stepper {
2048
+ padding-right: 0 !important;
2049
+ }
2050
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2051
+ padding-left: 0 !important;
2052
+ }
2053
+ [dir="rtl"] .np-flow-navigation__stepper {
2054
+ padding-left: 0 !important;
2055
+ }
2056
+ html:not([dir="rtl"]) .np-flow-navigation__stepper {
2057
+ padding-right: 0 !important;
2036
2058
  }
2037
2059
  .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
2038
2060
  display: none;
@@ -2044,11 +2066,23 @@ button.np-option {
2044
2066
  height: auto;
2045
2067
  }
2046
2068
  .np-flow-navigation--sm .np-flow-navigation__stepper {
2069
+ min-height: 56px;
2070
+ }
2071
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2072
+ padding-right: 24px !important;
2073
+ padding-right: var(--size-24) !important;
2074
+ }
2075
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2076
+ padding-left: 24px !important;
2077
+ padding-left: var(--size-24) !important;
2078
+ }
2079
+ [dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
2047
2080
  padding-left: 24px !important;
2048
2081
  padding-left: var(--size-24) !important;
2082
+ }
2083
+ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2049
2084
  padding-right: 24px !important;
2050
2085
  padding-right: var(--size-24) !important;
2051
- min-height: 56px;
2052
2086
  }
2053
2087
  .np-flow-navigation--lg .np-flow-navigation__stepper {
2054
2088
  max-width: 562px;
@@ -3964,6 +3998,7 @@ html:not([dir="rtl"]) .np-navigation-option {
3964
3998
  z-index: 1060;
3965
3999
  }
3966
4000
  [dir="rtl"] .snackbar {
4001
+ right: 0;
3967
4002
  left: auto;
3968
4003
  left: initial;
3969
4004
  }
@@ -4913,6 +4948,10 @@ html:not([dir="rtl"]) .np-navigation-option {
4913
4948
  width: 100%;
4914
4949
  }
4915
4950
  .np-tile__description {
4951
+ color: #5d7079;
4952
+ color: var(--color-content-secondary);
4953
+ margin-top: 12px;
4954
+ margin-top: var(--size-12);
4916
4955
  display: inline-block;
4917
4956
  }
4918
4957
  .np-tile--small.np-decision__tile--fixed-width {
package/src/popover/Popover.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-theme-personal .np-popover__container {
3
4
  border-radius: 16px;
4
5
  border-radius: var(--radius-medium);
package/src/select/Select.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-select .np-dropdown-toggle {
3
4
  background-color: #ffffff;
4
5
  background-color: var(--color-background-screen);
package/src/snackbar/Snackbar.css CHANGED
@@ -7,6 +7,7 @@
7
7
  z-index: 1060;
8
8
  }
9
9
  [dir="rtl"] .snackbar {
10
+ right: 0;
10
11
  left: auto;
11
12
  left: initial;
12
13
  }
package/src/tile/Tile.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @media (min-width: 768px) {
2
+ }@media (min-width: 768px) {
2
3
  }.np-tile {
3
4
  min-width: 120px;
4
5
  border-radius: 10px;
@@ -27,6 +28,10 @@
27
28
  }.np-tile__media {
28
29
  width: 100%;
29
30
  }.np-tile__description {
31
+ color: #5d7079;
32
+ color: var(--color-content-secondary);
33
+ margin-top: 12px;
34
+ margin-top: var(--size-12);
30
35
  display: inline-block;
31
36
  }.np-tile--small.np-decision__tile--fixed-width {
32
37
  width: 260px;