@digdir/designsystemet-css 0.11.0-alpha.7 → 0.11.0-alpha.9

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 (69) hide show
  1. package/accordion.css +118 -120
  2. package/alert.css +58 -64
  3. package/box.css +70 -72
  4. package/button.css +174 -176
  5. package/card.css +189 -191
  6. package/checkbox.css +157 -159
  7. package/chip.css +140 -142
  8. package/combobox.css +295 -295
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/box.css +1 -1
  12. package/dist/button.css +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/checkbox.css +1 -1
  15. package/dist/chip.css +1 -1
  16. package/dist/combobox.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdownmenu.css +1 -1
  19. package/dist/error-summary.css +1 -1
  20. package/dist/fieldset.css +1 -1
  21. package/dist/helptext.css +1 -1
  22. package/dist/index.css +1 -1
  23. package/dist/link.css +1 -1
  24. package/dist/list.css +1 -1
  25. package/dist/modal.css +1 -1
  26. package/dist/native-select.css +1 -1
  27. package/dist/pagination.css +1 -1
  28. package/dist/popover.css +1 -1
  29. package/dist/radio.css +1 -1
  30. package/dist/search.css +1 -1
  31. package/dist/skeleton.css +1 -1
  32. package/dist/skiplink.css +1 -1
  33. package/dist/spinner.css +1 -1
  34. package/dist/switch.css +1 -1
  35. package/dist/table.css +1 -1
  36. package/dist/tabs.css +1 -1
  37. package/dist/tag.css +1 -1
  38. package/dist/textarea.css +1 -1
  39. package/dist/textfield.css +1 -1
  40. package/dist/togglegroup.css +1 -1
  41. package/dist/tooltip.css +1 -1
  42. package/dist/utilities.css +1 -0
  43. package/divider.css +13 -15
  44. package/dropdownmenu.css +55 -46
  45. package/error-summary.css +19 -15
  46. package/fieldset.css +42 -44
  47. package/helptext.css +49 -46
  48. package/index.css +40 -40
  49. package/link.css +50 -52
  50. package/list.css +18 -14
  51. package/modal.css +86 -85
  52. package/native-select.css +88 -90
  53. package/package.json +2 -2
  54. package/pagination.css +53 -55
  55. package/popover.css +71 -69
  56. package/radio.css +151 -146
  57. package/search.css +138 -142
  58. package/skeleton.css +46 -47
  59. package/skiplink.css +41 -41
  60. package/spinner.css +51 -49
  61. package/switch.css +190 -192
  62. package/table.css +117 -111
  63. package/tabs.css +69 -75
  64. package/tag.css +57 -59
  65. package/textarea.css +64 -66
  66. package/textfield.css +122 -122
  67. package/togglegroup.css +22 -24
  68. package/tooltip.css +12 -11
  69. package/utilities.css +38 -0
package/helptext.css CHANGED
@@ -1,57 +1,60 @@
1
- @layer ds.helptext {
2
- .ds-helptext__button {
3
- background-color: transparent;
4
- border-radius: 50px;
5
- padding: 0 !important;
6
- cursor: pointer;
7
- display: flex;
8
- border: none;
9
- min-width: 0;
10
- min-height: 0;
11
- }
12
-
13
- @media print {
14
- .ds-helptext__button {
15
- display: none;
16
- }
17
- }
1
+ .ds-helptext__button {
2
+ --dsc-helptext-color: var(--ds-color-neutral-text-default);
3
+ --dsc-helptext-icon-color: var(--ds-color-accent-base-default);
4
+ --dsc-helptext-icon-width: var(--ds-sizing-7);
5
+ --dsc-helptext-icon-height: var(--ds-sizing-7);
6
+
7
+ background-color: transparent;
8
+ border-radius: 50px;
9
+ padding: 0 !important;
10
+ cursor: pointer;
11
+ display: flex;
12
+ border: none;
13
+ min-width: 0;
14
+ min-height: 0;
15
+ }
18
16
 
19
- .ds-helptext__icon--filled {
17
+ @media print {
18
+ .ds-helptext__button {
20
19
  display: none;
21
20
  }
21
+ }
22
22
 
23
- .ds-helptext__icon {
24
- color: var(--ds-color-accent-base-default);
25
- width: var(--ds-sizing-7);
26
- height: var(--ds-sizing-7);
27
- }
23
+ .ds-helptext__icon--filled {
24
+ display: none;
25
+ }
28
26
 
29
- .ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon {
30
- display: none;
31
- }
27
+ .ds-helptext__icon {
28
+ color: var(--dsc-helptext-icon-color);
29
+ width: var(--dsc-helptext-icon-width);
30
+ height: var(--dsc-helptext-icon-height);
31
+ }
32
32
 
33
- .ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon--filled {
34
- display: inline-block;
35
- }
33
+ .ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon {
34
+ display: none;
35
+ }
36
36
 
37
- .ds-helptext__content {
38
- color: var(--ds-color-neutral-text-default);
39
- width: fit-content;
40
- max-width: 700px;
41
- }
37
+ .ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon--filled {
38
+ display: inline-block;
39
+ }
42
40
 
43
- .ds-helptext--sm .ds-helptext__icon {
44
- width: var(--ds-sizing-6);
45
- height: var(--ds-sizing-6);
46
- }
41
+ .ds-helptext__content {
42
+ color: var(--dsc-helptext-color);
43
+ width: fit-content;
44
+ max-width: 700px;
45
+ }
47
46
 
48
- .ds-helptext--md .ds-helptext__icon {
49
- width: var(--ds-sizing-7);
50
- height: var(--ds-sizing-7);
51
- }
47
+ .ds-helptext--sm .ds-helptext__icon {
48
+ --dsc-helptext-icon-width: var(--ds-sizing-6);
49
+ --dsc-helptext-icon-height: var(--ds-sizing-6);
50
+ }
52
51
 
53
- .ds-helptext--lg .ds-helptext__icon {
54
- width: var(--ds-sizing-8);
55
- height: var(--ds-sizing-8);
56
- }
52
+ .ds-helptext--md .ds-helptext__icon {
53
+ --dsc-helptext-icon-width: var(--ds-sizing-7);
54
+ --dsc-helptext-icon-height: var(--ds-sizing-7);
55
+ }
56
+
57
+ .ds-helptext--lg .ds-helptext__icon {
58
+ --dsc-helptext-icon-width: var(--ds-sizing-8);
59
+ --dsc-helptext-icon-height: var(--ds-sizing-8);
57
60
  }
package/index.css CHANGED
@@ -1,44 +1,44 @@
1
1
  @charset "UTF-8";
2
2
 
3
- @layer ds.theme, ds.baseline, ds.box, ds.btn;
3
+ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
4
4
 
5
5
  /** Import order defines ordinal specificity for layers */
6
- @import url('./baseline/ds-reset.css') layer(ds.baseline.reset);
7
- @import url('./baseline/utils.css') layer(ds.baseline.utils);
8
- @import url('./baseline/typography/label.css') layer(ds.baseline.typography);
9
- @import url('./baseline/typography/heading.css') layer(ds.baseline.typography);
10
- @import url('./baseline/typography/paragraph.css') layer(ds.baseline.typography);
11
- @import url('./baseline/typography/ingress.css') layer(ds.baseline.typography);
12
- @import url('./baseline/typography/error-message.css') layer(ds.baseline.typography);
13
- @import url('./button.css');
14
- @import url('./box.css');
15
- @import url('./alert.css');
16
- @import url('./skiplink.css');
17
- @import url('./accordion.css');
18
- @import url('./switch.css');
19
- @import url('./checkbox.css');
20
- @import url('./radio.css');
21
- @import url('./search.css');
22
- @import url('./native-select.css');
23
- @import url('./textfield.css');
24
- @import url('./textarea.css');
25
- @import url('./helptext.css');
26
- @import url('./modal.css');
27
- @import url('./list.css');
28
- @import url('./card.css');
29
- @import url('./link.css');
30
- @import url('./fieldset.css');
31
- @import url('./dropdownmenu.css');
32
- @import url('./chip');
33
- @import url('./divider.css');
34
- @import url('./tabs.css');
35
- @import url('./pagination.css');
36
- @import url('./popover.css');
37
- @import url('./skeleton.css');
38
- @import url('./tag.css');
39
- @import url('./error-summary.css');
40
- @import url('./togglegroup.css');
41
- @import url('./tooltip.css');
42
- @import url('./spinner.css');
43
- @import url('./table.css');
44
- @import url('./combobox.css');
6
+ @import url('./baseline/ds-reset.css') layer(ds.reset);
7
+ @import url('./baseline/typography/label.css') layer(ds.base.typography);
8
+ @import url('./baseline/typography/heading.css') layer(ds.base.typography);
9
+ @import url('./baseline/typography/paragraph.css') layer(ds.base.typography);
10
+ @import url('./baseline/typography/ingress.css') layer(ds.base.typography);
11
+ @import url('./baseline/typography/error-message.css') layer(ds.base.typography);
12
+ @import url('./utilities.css') layer(ds.utilities);
13
+ @import url('./box.css') layer(ds.components);
14
+ @import url('./button.css') layer(ds.components);
15
+ @import url('./alert.css') layer(ds.components);
16
+ @import url('./skiplink.css') layer(ds.components);
17
+ @import url('./accordion.css') layer(ds.components);
18
+ @import url('./switch.css') layer(ds.components);
19
+ @import url('./checkbox.css') layer(ds.components);
20
+ @import url('./radio.css') layer(ds.components);
21
+ @import url('./search.css') layer(ds.components);
22
+ @import url('./native-select.css') layer(ds.components);
23
+ @import url('./textfield.css') layer(ds.components);
24
+ @import url('./textarea.css') layer(ds.components);
25
+ @import url('./helptext.css') layer(ds.components);
26
+ @import url('./modal.css') layer(ds.components);
27
+ @import url('./list.css') layer(ds.components);
28
+ @import url('./card.css') layer(ds.components);
29
+ @import url('./link.css') layer(ds.components);
30
+ @import url('./fieldset.css') layer(ds.components);
31
+ @import url('./dropdownmenu.css') layer(ds.components);
32
+ @import url('./chip') layer(ds.components);
33
+ @import url('./divider.css') layer(ds.components);
34
+ @import url('./tabs.css') layer(ds.components);
35
+ @import url('./pagination.css') layer(ds.components);
36
+ @import url('./popover.css') layer(ds.components);
37
+ @import url('./skeleton.css') layer(ds.components);
38
+ @import url('./tag.css') layer(ds.components);
39
+ @import url('./error-summary.css') layer(ds.components);
40
+ @import url('./togglegroup.css') layer(ds.components);
41
+ @import url('./tooltip.css') layer(ds.components);
42
+ @import url('./spinner.css') layer(ds.components);
43
+ @import url('./table.css') layer(ds.components);
44
+ @import url('./combobox.css') layer(ds.components);
package/link.css CHANGED
@@ -1,60 +1,58 @@
1
- @layer ds.link {
2
- .ds-link {
3
- --dsc-link-color: var(--ds-color-accent-text-subtle);
4
- --dsc-link-color-hover: var(--ds-color-accent-text-default);
5
- --dsc-link-color-active: var(--ds-color-accent-text-default);
6
- --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
7
- --dsc-link-color-visited: var(--ds-global-purple-12);
8
- --dsc-link-color-focus: var(--ds-color-focus-inner);
9
- --dsc-link-color-focus-background: var(--ds-color-focus-outer);
1
+ .ds-link {
2
+ --dsc-link-color: var(--ds-color-accent-text-subtle);
3
+ --dsc-link-color-hover: var(--ds-color-accent-text-default);
4
+ --dsc-link-color-active: var(--ds-color-accent-text-default);
5
+ --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
6
+ --dsc-link-color-visited: var(--ds-global-purple-12);
7
+ --dsc-link-color-focus: var(--ds-color-focus-inner);
8
+ --dsc-link-color-focus-background: var(--ds-color-focus-outer);
10
9
 
11
- position: relative;
12
- color: var(--dsc-link-color);
13
- cursor: pointer;
14
- text-decoration: underline;
15
- text-decoration-thickness: max(1px, 0.0625rem);
16
- text-underline-offset: max(5px, 0.25rem);
17
- display: inline-flex;
18
- align-items: center;
19
- gap: var(--ds-spacing-1);
20
- }
10
+ position: relative;
11
+ color: var(--dsc-link-color);
12
+ cursor: pointer;
13
+ text-decoration: underline;
14
+ text-decoration-thickness: max(1px, 0.0625rem);
15
+ text-underline-offset: max(5px, 0.25rem);
16
+ display: inline-flex;
17
+ align-items: center;
18
+ gap: var(--ds-spacing-1);
19
+ }
21
20
 
22
- .ds-link--accent {
23
- --dsc-link-color: var(--ds-color-accent-text-subtle);
24
- --dsc-link-color-hover: var(--ds-color-accent-text-default);
25
- --dsc-link-color-active: var(--ds-color-accent-text-default);
26
- --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
27
- --dsc-link-color-visited: var(--ds-global-purple-12);
28
- }
21
+ .ds-link--accent {
22
+ --dsc-link-color: var(--ds-color-accent-text-subtle);
23
+ --dsc-link-color-hover: var(--ds-color-accent-text-default);
24
+ --dsc-link-color-active: var(--ds-color-accent-text-default);
25
+ --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
26
+ --dsc-link-color-visited: var(--ds-global-purple-12);
27
+ }
29
28
 
30
- .ds-link--neutral {
31
- --dsc-link-color: var(--ds-color-neutral-text-default);
32
- --dsc-link-color-hover: var(--ds-color-neutral-text-subtle);
33
- --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
34
- --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
35
- --dsc-link-color-visited: var(--ds-global-purple-12);
36
- }
29
+ .ds-link--neutral {
30
+ --dsc-link-color: var(--ds-color-neutral-text-default);
31
+ --dsc-link-color-hover: var(--ds-color-neutral-text-subtle);
32
+ --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
33
+ --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
34
+ --dsc-link-color-visited: var(--ds-global-purple-12);
35
+ }
37
36
 
38
- .ds-link:visited {
39
- color: var(--dsc-link-color-visited);
40
- text-decoration: none;
41
- }
37
+ .ds-link:visited {
38
+ color: var(--dsc-link-color-visited);
39
+ text-decoration: none;
40
+ }
42
41
 
43
- .ds-link:hover {
44
- color: var(--dsc-link-color-hover);
45
- text-decoration-thickness: max(2px, 0.125rem, 0.12em);
46
- }
42
+ .ds-link:hover {
43
+ color: var(--dsc-link-color-hover);
44
+ text-decoration-thickness: max(2px, 0.125rem, 0.12em);
45
+ }
47
46
 
48
- .ds-link:focus-visible {
49
- color: var(--dsc-link-color-focus);
50
- background: var(--dsc-link-color-focus-background);
51
- outline: none;
52
- }
47
+ .ds-link:focus-visible {
48
+ color: var(--dsc-link-color-focus);
49
+ background: var(--dsc-link-color-focus-background);
50
+ outline: none;
51
+ }
53
52
 
54
- .ds-link:active {
55
- color: var(--dsc-link-color-active);
56
- background: var(--dsc-link-color-active-background);
57
- border-radius: min(0.25rem, var(--ds-border-radius-md));
58
- outline: none;
59
- }
53
+ .ds-link:active {
54
+ color: var(--dsc-link-color-active);
55
+ background: var(--dsc-link-color-active-background);
56
+ border-radius: min(0.25rem, var(--ds-border-radius-md));
57
+ outline: none;
60
58
  }
package/list.css CHANGED
@@ -1,18 +1,22 @@
1
- @layer ds.list {
2
- .ds-list--sm {
3
- padding-left: var(--ds-spacing-4);
4
- }
1
+ .ds-list {
2
+ --dsc-list-padding-left: var(--ds-spacing-6);
5
3
 
6
- .ds-list--md,
7
- .ds-list--lg {
8
- padding-left: var(--ds-spacing-6);
9
- }
4
+ padding-left: var(--dsc-list-padding-left);
5
+ }
6
+
7
+ .ds-list--sm {
8
+ --dsc-list-padding-left: var(--ds-spacing-4);
9
+ }
10
10
 
11
- .ds-list__item {
12
- margin-bottom: var(--ds-spacing-2);
13
- }
11
+ .ds-list--md,
12
+ .ds-list--lg {
13
+ --dsc-list-padding-left: var(--ds-spacing-6);
14
+ }
15
+
16
+ .ds-list__item {
17
+ margin-bottom: var(--ds-spacing-2);
18
+ }
14
19
 
15
- .ds-list__item > .ds-list {
16
- margin-top: var(--ds-spacing-2);
17
- }
20
+ .ds-list__item > .ds-list {
21
+ margin-top: var(--ds-spacing-2);
18
22
  }
package/modal.css CHANGED
@@ -1,108 +1,109 @@
1
- @layer ds.modal {
2
- .ds-modal {
3
- padding: 0;
4
- width: 100%;
5
- max-width: 650px;
6
- border: none;
7
- border-radius: min(1rem, var(--ds-border-radius-md));
8
- box-shadow: var(--ds-shadow-xl);
9
- background-color: var(--ds-color-neutral-background-default);
10
- color: var(--ds-color-neutral-text-default);
11
- }
1
+ .ds-modal {
2
+ --dsc-modal-max-width: 650px;
3
+ --dsc-modal-background: var(--ds-color-neutral-background-default);
4
+ --dsc-modal-color: var(--ds-color-neutral-text-default);
5
+ --dsc-modal-backdrop-background: rgb(0 0 0 / 0.5);
6
+ --dsc-modal-header-padding: var(--ds-spacing-6) var(--ds-spacing-18) var(--ds-spacing-2) var(--ds-spacing-6);
7
+ --dsc-modal-footer-padding: var(--ds-spacing-3) var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-6);
8
+ --dsc-modal-content-padding: var(--ds-spacing-2) var(--ds-spacing-6);
9
+ --dsc-modal-content-max-height: 80vh;
10
+
11
+ padding: 0;
12
+ width: 100%;
13
+ max-width: var(--dsc-modal-max-width);
14
+ border: none;
15
+ border-radius: min(1rem, var(--ds-border-radius-md));
16
+ box-shadow: var(--ds-shadow-xl);
17
+ background-color: var(--dsc-modal-background);
18
+ color: var(--dsc-modal-color);
19
+ }
12
20
 
13
- .ds-modal::backdrop {
14
- background-color: rgb(0 0 0 / 0.5);
15
- animation: fade-in 300ms ease-in-out;
16
- }
21
+ .ds-modal::backdrop {
22
+ background-color: var(--dsc-modal-backdrop-background);
23
+ animation: fade-in 300ms ease-in-out;
24
+ }
17
25
 
18
- .ds-modal[open] {
19
- animation:
20
- slide-in 300ms ease-in-out,
21
- fade-in 300ms ease-in-out;
22
- }
26
+ .ds-modal[open] {
27
+ animation:
28
+ slide-in 300ms ease-in-out,
29
+ fade-in 300ms ease-in-out;
30
+ }
23
31
 
24
- .ds-modal > hr {
25
- margin: var(--ds-spacing-3) 0 !important;
26
- border-color: var(--ds-color-neutral-border-subtle);
27
- }
32
+ .ds-modal > hr {
33
+ margin: var(--ds-spacing-3) 0 !important;
34
+ border-color: var(--ds-color-neutral-border-subtle);
35
+ }
28
36
 
29
- .ds-modal--lock-scroll {
30
- overflow: hidden;
31
- }
37
+ .ds-modal--lock-scroll {
38
+ overflow: hidden;
39
+ }
32
40
 
33
- @media (max-width: 650px) {
34
- .ds-modal {
35
- min-width: 100%;
36
- max-width: 100%;
37
- border-radius: 0;
38
- }
41
+ @media (max-width: 650px) {
42
+ .ds-modal {
43
+ min-width: 100%;
44
+ max-width: 100%;
45
+ border-radius: 0;
39
46
  }
47
+ }
40
48
 
41
- @media (prefers-reduced-motion: reduce) {
42
- .ds-modal[open] {
43
- animation: none;
44
- }
49
+ @media (prefers-reduced-motion: reduce) {
50
+ .ds-modal[open] {
51
+ animation: none;
52
+ }
45
53
 
46
- .ds-modal::backdrop {
47
- animation: none;
48
- }
54
+ .ds-modal::backdrop {
55
+ animation: none;
49
56
  }
57
+ }
50
58
 
51
- @keyframes slide-in {
52
- 0% {
53
- transform: translateY(50px);
54
- }
59
+ .ds-modal__header {
60
+ display: flex;
61
+ justify-content: space-between;
62
+ flex-direction: column;
63
+ padding: var(--dsc-modal-header-padding);
64
+ gap: var(--ds-spacing-1);
65
+ color: var(--dsc-modal-color);
66
+ }
55
67
 
56
- 100% {
57
- transform: translateY(0);
58
- }
59
- }
68
+ .ds-modal__header--no-button {
69
+ --dsc-modal-header-padding: var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-2) var(--ds-spacing-6);
70
+ }
60
71
 
61
- @keyframes fade-in {
62
- 0% {
63
- opacity: 0;
64
- }
72
+ .ds-modal__header__button {
73
+ position: absolute;
74
+ top: var(--ds-spacing-3);
75
+ right: var(--ds-spacing-3);
76
+ }
65
77
 
66
- 100% {
67
- opacity: 1;
68
- }
69
- }
78
+ .ds-modal__footer {
79
+ display: flex;
80
+ align-items: center;
81
+ gap: var(--ds-spacing-4);
82
+ padding: var(--dsc-modal-footer-padding);
83
+ }
70
84
 
71
- .ds-modal__header {
72
- display: flex;
73
- justify-content: space-between;
74
- flex-direction: column;
75
- padding-top: var(--ds-spacing-6);
76
- padding-bottom: var(--ds-spacing-2);
77
- padding-left: var(--ds-spacing-6);
78
- padding-right: var(--ds-spacing-18);
79
- gap: var(--ds-spacing-1);
80
- color: var(--ds-color-neutral-text-default);
81
- }
85
+ .ds-modal__content {
86
+ padding: var(--dsc-modal-content-padding);
87
+ max-height: var(--dsc-modal-content-max-height);
88
+ overflow-y: auto;
89
+ }
82
90
 
83
- .ds-modal__header--no-button {
84
- padding-right: var(--ds-spacing-6);
91
+ @keyframes slide-in {
92
+ 0% {
93
+ transform: translateY(50px);
85
94
  }
86
95
 
87
- .ds-modal__header__button {
88
- position: absolute;
89
- top: var(--ds-spacing-3);
90
- right: var(--ds-spacing-3);
96
+ 100% {
97
+ transform: translateY(0);
91
98
  }
99
+ }
92
100
 
93
- .ds-modal__footer {
94
- display: flex;
95
- align-items: center;
96
- gap: var(--ds-spacing-4);
97
- padding-top: var(--ds-spacing-3);
98
- padding-bottom: var(--ds-spacing-6);
99
- padding-left: var(--ds-spacing-6);
100
- padding-right: var(--ds-spacing-6);
101
+ @keyframes fade-in {
102
+ 0% {
103
+ opacity: 0;
101
104
  }
102
105
 
103
- .ds-modal__content {
104
- padding: var(--ds-spacing-2) var(--ds-spacing-6);
105
- max-height: 80vh;
106
- overflow-y: auto;
106
+ 100% {
107
+ opacity: 1;
107
108
  }
108
109
  }