@ivds/core 0.1.1

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 (154) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/README.md +215 -0
  3. package/lib/all.css +6802 -0
  4. package/lib/all.min.css +1 -0
  5. package/lib/base/base.css +215 -0
  6. package/lib/base/base.min.css +1 -0
  7. package/lib/components/_breadcrumb-mixins.scss +173 -0
  8. package/lib/components/_button-mixin.scss +120 -0
  9. package/lib/components/_card-mixin.scss +196 -0
  10. package/lib/components/_checkbox-mixin.scss +208 -0
  11. package/lib/components/_footer-mixin.scss +385 -0
  12. package/lib/components/_header-mixin.scss +275 -0
  13. package/lib/components/_navigation-mixins.scss +270 -0
  14. package/lib/components/_notification-mixin.scss +239 -0
  15. package/lib/components/_pagination-mixins.scss +280 -0
  16. package/lib/components/_radio-button-mixin.scss +207 -0
  17. package/lib/components/_tag-mixin.scss +261 -0
  18. package/lib/components/_text-input-mixin.scss +203 -0
  19. package/lib/components/all.css +3005 -0
  20. package/lib/components/all.min.css +1 -0
  21. package/lib/components/breadcrumb/breadcrumb.css +141 -0
  22. package/lib/components/breadcrumb/breadcrumb.min.css +1 -0
  23. package/lib/components/button/button.css +221 -0
  24. package/lib/components/button/button.min.css +1 -0
  25. package/lib/components/card/card.css +236 -0
  26. package/lib/components/card/card.min.css +1 -0
  27. package/lib/components/checkbox/checkbox.css +305 -0
  28. package/lib/components/checkbox/checkbox.min.css +1 -0
  29. package/lib/components/footer/footer.css +466 -0
  30. package/lib/components/footer/footer.min.css +1 -0
  31. package/lib/components/header/header.css +274 -0
  32. package/lib/components/header/header.min.css +1 -0
  33. package/lib/components/navigation/navigation.css +214 -0
  34. package/lib/components/navigation/navigation.min.css +1 -0
  35. package/lib/components/notification/notification.css +253 -0
  36. package/lib/components/notification/notification.min.css +1 -0
  37. package/lib/components/pagination/pagination.css +221 -0
  38. package/lib/components/pagination/pagination.min.css +1 -0
  39. package/lib/components/radio-button/radio-button.css +326 -0
  40. package/lib/components/radio-button/radio-button.min.css +1 -0
  41. package/lib/components/tag/tag.css +367 -0
  42. package/lib/components/tag/tag.min.css +1 -0
  43. package/lib/components/text-input/text-input.css +243 -0
  44. package/lib/components/text-input/text-input.min.css +1 -0
  45. package/lib/icons/icon-arrow-left.css +139 -0
  46. package/lib/icons/icon-arrow-left.min.css +1 -0
  47. package/lib/icons/icon-arrow-right.css +139 -0
  48. package/lib/icons/icon-arrow-right.min.css +1 -0
  49. package/lib/icons/icon-check.css +139 -0
  50. package/lib/icons/icon-check.min.css +1 -0
  51. package/lib/icons/icon-close.css +140 -0
  52. package/lib/icons/icon-close.min.css +1 -0
  53. package/lib/icons/icon-error.css +140 -0
  54. package/lib/icons/icon-error.min.css +1 -0
  55. package/lib/icons/icon-info.css +140 -0
  56. package/lib/icons/icon-info.min.css +1 -0
  57. package/lib/icons/icon-success.css +139 -0
  58. package/lib/icons/icon-success.min.css +1 -0
  59. package/lib/icons/icon-warning.css +139 -0
  60. package/lib/icons/icon-warning.min.css +1 -0
  61. package/lib/icons/icons.css +1158 -0
  62. package/lib/icons/icons.min.css +1 -0
  63. package/lib/utils/_flex.scss +200 -0
  64. package/lib/utils/_grid.scss +211 -0
  65. package/lib/utils/_layout.scss +253 -0
  66. package/lib/utils/_spacing.scss +260 -0
  67. package/lib/utils/_typography.scss +111 -0
  68. package/lib/utils/utils.css +2434 -0
  69. package/lib/utils/utils.min.css +1 -0
  70. package/lib/utils-only.css +2801 -0
  71. package/lib/utils-only.min.css +1 -0
  72. package/lib/variables/variables.css +2 -0
  73. package/lib/variables/variables.min.css +0 -0
  74. package/package.json +194 -0
  75. package/src/__tests__/example.test.scss +12 -0
  76. package/src/accessibility.stories.js +416 -0
  77. package/src/all.scss +9 -0
  78. package/src/base/_layout.scss +97 -0
  79. package/src/base/_reset.scss +85 -0
  80. package/src/base/_typography.scss +105 -0
  81. package/src/base/base.scss +6 -0
  82. package/src/components/all.scss +22 -0
  83. package/src/components/breadcrumb/_breadcrumb-mixins.scss +173 -0
  84. package/src/components/breadcrumb/breadcrumb.scss +68 -0
  85. package/src/components/breadcrumb/breadcrumb.stories.js +483 -0
  86. package/src/components/button/__tests__/button-mixins.test.scss +35 -0
  87. package/src/components/button/_button-mixin.scss +120 -0
  88. package/src/components/button/button.scss +126 -0
  89. package/src/components/button/button.stories.js +364 -0
  90. package/src/components/card/__tests__/card-mixins.test.scss +36 -0
  91. package/src/components/card/_card-mixin.scss +196 -0
  92. package/src/components/card/card.scss +193 -0
  93. package/src/components/card/card.stories.js +635 -0
  94. package/src/components/checkbox/_checkbox-mixin.scss +208 -0
  95. package/src/components/checkbox/checkbox.scss +141 -0
  96. package/src/components/checkbox/checkbox.stories.js +303 -0
  97. package/src/components/footer/_footer-mixin.scss +385 -0
  98. package/src/components/footer/footer.scss +86 -0
  99. package/src/components/footer/footer.stories.js +740 -0
  100. package/src/components/header/_header-mixin.scss +275 -0
  101. package/src/components/header/header.scss +84 -0
  102. package/src/components/header/header.stories.js +450 -0
  103. package/src/components/navigation/_navigation-mixins.scss +270 -0
  104. package/src/components/navigation/navigation.scss +64 -0
  105. package/src/components/navigation/navigation.stories.js +410 -0
  106. package/src/components/notification/_notification-mixin.scss +239 -0
  107. package/src/components/notification/notification.scss +118 -0
  108. package/src/components/notification/notification.stories.js +378 -0
  109. package/src/components/overview.stories.js +473 -0
  110. package/src/components/pagination/_pagination-mixins.scss +280 -0
  111. package/src/components/pagination/pagination.scss +76 -0
  112. package/src/components/pagination/pagination.stories.js +729 -0
  113. package/src/components/radio-button/_radio-button-mixin.scss +207 -0
  114. package/src/components/radio-button/radio-button.scss +178 -0
  115. package/src/components/radio-button/radio-button.stories.js +379 -0
  116. package/src/components/tag/_tag-mixin.scss +261 -0
  117. package/src/components/tag/tag.scss +244 -0
  118. package/src/components/tag/tag.stories.js +482 -0
  119. package/src/components/text-input/_text-input-mixin.scss +203 -0
  120. package/src/components/text-input/text-input.scss +150 -0
  121. package/src/components/text-input/text-input.stories.js +723 -0
  122. package/src/icons/_icon.scss +121 -0
  123. package/src/icons/icon-arrow-left.scss +23 -0
  124. package/src/icons/icon-arrow-right.scss +23 -0
  125. package/src/icons/icon-check.scss +23 -0
  126. package/src/icons/icon-close.scss +24 -0
  127. package/src/icons/icon-error.scss +24 -0
  128. package/src/icons/icon-info.scss +24 -0
  129. package/src/icons/icon-success.scss +23 -0
  130. package/src/icons/icon-warning.scss +23 -0
  131. package/src/icons/icons.scss +12 -0
  132. package/src/icons/icons.stories.js +249 -0
  133. package/src/icons/svg/arrow-left.svg +3 -0
  134. package/src/icons/svg/arrow-right.svg +3 -0
  135. package/src/icons/svg/check.svg +3 -0
  136. package/src/icons/svg/close.svg +4 -0
  137. package/src/icons/svg/error.svg +5 -0
  138. package/src/icons/svg/info.svg +5 -0
  139. package/src/icons/svg/success.svg +4 -0
  140. package/src/icons/svg/warning.svg +5 -0
  141. package/src/utils/__tests__/utilities.test.scss +37 -0
  142. package/src/utils/_flex.scss +200 -0
  143. package/src/utils/_grid.scss +211 -0
  144. package/src/utils/_layout.scss +253 -0
  145. package/src/utils/_spacing.scss +260 -0
  146. package/src/utils/_typography.scss +111 -0
  147. package/src/utils/utils.scss +8 -0
  148. package/src/variables/_borders.scss +15 -0
  149. package/src/variables/_breakpoints.scss +11 -0
  150. package/src/variables/_colors.scss +97 -0
  151. package/src/variables/_shadows.scss +14 -0
  152. package/src/variables/_spacing.scss +24 -0
  153. package/src/variables/_typography.scss +47 -0
  154. package/src/variables/variables.scss +9 -0
package/lib/icons/icon-success.css ADDED
@@ -0,0 +1,139 @@
1
+ @charset "UTF-8";
2
+ /* Success icon*/
3
+ .ivds-icon {
4
+ display: inline-flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ width: 1em;
8
+ height: 1em;
9
+ fill: currentcolor;
10
+ flex-shrink: 0;
11
+ vertical-align: middle;
12
+ }
13
+ .ivds-icon svg {
14
+ width: 100%;
15
+ height: 100%;
16
+ fill: inherit;
17
+ display: block;
18
+ }
19
+ .ivds-icon::before {
20
+ font-style: normal;
21
+ font-feature-settings: normal;
22
+ font-variant: normal;
23
+ text-rendering: auto;
24
+ line-height: 1;
25
+ }
26
+ .ivds-icon {
27
+ width: var(--fontSize-base, 1rem);
28
+ height: var(--fontSize-base, 1rem);
29
+ font-size: var(--fontSize-base, 1rem);
30
+ }
31
+ .ivds-icon--xs {
32
+ width: var(--fontSize-xs, 0.75rem);
33
+ height: var(--fontSize-xs, 0.75rem);
34
+ font-size: var(--fontSize-xs, 0.75rem);
35
+ }
36
+ .ivds-icon--sm {
37
+ width: var(--fontSize-sm, 0.875rem);
38
+ height: var(--fontSize-sm, 0.875rem);
39
+ font-size: var(--fontSize-sm, 0.875rem);
40
+ }
41
+ .ivds-icon--md {
42
+ width: var(--fontSize-base, 1rem);
43
+ height: var(--fontSize-base, 1rem);
44
+ font-size: var(--fontSize-base, 1rem);
45
+ }
46
+ .ivds-icon--lg {
47
+ width: var(--fontSize-lg, 1.125rem);
48
+ height: var(--fontSize-lg, 1.125rem);
49
+ font-size: var(--fontSize-lg, 1.125rem);
50
+ }
51
+ .ivds-icon--xl {
52
+ width: var(--fontSize-xl, 1.25rem);
53
+ height: var(--fontSize-xl, 1.25rem);
54
+ font-size: var(--fontSize-xl, 1.25rem);
55
+ }
56
+ .ivds-icon--2xl {
57
+ width: var(--fontSize-2xl, 1.5rem);
58
+ height: var(--fontSize-2xl, 1.5rem);
59
+ font-size: var(--fontSize-2xl, 1.5rem);
60
+ }
61
+ .ivds-icon--3xl {
62
+ width: var(--fontSize-3xl, 1.875rem);
63
+ height: var(--fontSize-3xl, 1.875rem);
64
+ font-size: var(--fontSize-3xl, 1.875rem);
65
+ }
66
+ .ivds-icon--primary {
67
+ color: var(--color-brand-primary-500, #0ea5e9);
68
+ }
69
+ .ivds-icon--secondary {
70
+ color: var(--color-semantic-neutral-600, #6b7280);
71
+ }
72
+ .ivds-icon--success {
73
+ color: var(--color-semantic-success-500, #10b981);
74
+ }
75
+ .ivds-icon--warning {
76
+ color: var(--color-semantic-warning-500, #f59e0b);
77
+ }
78
+ .ivds-icon--error {
79
+ color: var(--color-semantic-error-500, #ef4444);
80
+ }
81
+ .ivds-icon--info {
82
+ color: var(--color-brand-primary-500, #0ea5e9);
83
+ }
84
+ .ivds-icon--interactive {
85
+ cursor: pointer;
86
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
87
+ }
88
+ .ivds-icon--interactive:hover {
89
+ transform: scale(1.1);
90
+ }
91
+ .ivds-icon--interactive:active {
92
+ transform: scale(0.95);
93
+ }
94
+ .ivds-icon--disabled {
95
+ opacity: 0.5;
96
+ cursor: not-allowed;
97
+ pointer-events: none;
98
+ }
99
+ .ivds-icon--success {
100
+ display: inline-flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ width: 1em;
104
+ height: 1em;
105
+ fill: currentcolor;
106
+ flex-shrink: 0;
107
+ vertical-align: middle;
108
+ }
109
+ .ivds-icon--success svg {
110
+ width: 100%;
111
+ height: 100%;
112
+ fill: inherit;
113
+ display: block;
114
+ }
115
+ .ivds-icon--success::before {
116
+ font-style: normal;
117
+ font-feature-settings: normal;
118
+ font-variant: normal;
119
+ text-rendering: auto;
120
+ line-height: 1;
121
+ }
122
+ .ivds-icon--success {
123
+ /* SVG icon using PostCSS inline-svg (fallback to Unicode)*/
124
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='M9 12l2 2 4-4'/%3E %3C/svg%3E");
125
+ background-repeat: no-repeat;
126
+ background-position: center;
127
+ background-size: contain;
128
+ /* Unicode fallback*/
129
+ }
130
+ .ivds-icon--success::before {
131
+ content: "✓";
132
+ font-size: inherit;
133
+ }
134
+ .ivds-icon--success {
135
+ /* Hide text when SVG is available*/
136
+ }
137
+ .ivds-icon--success:not(.ivds-icon--no-svg)::before {
138
+ display: none;
139
+ }
package/lib/icons/icon-success.min.css ADDED
@@ -0,0 +1 @@
1
+ @charset "UTF-8";.ivds-icon{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon{font-size:var(--fontSize-base,1rem);height:var(--fontSize-base,1rem);width:var(--fontSize-base,1rem)}.ivds-icon--xs{font-size:var(--fontSize-xs,.75rem);height:var(--fontSize-xs,.75rem);width:var(--fontSize-xs,.75rem)}.ivds-icon--sm{font-size:var(--fontSize-sm,.875rem);height:var(--fontSize-sm,.875rem);width:var(--fontSize-sm,.875rem)}.ivds-icon--md{font-size:var(--fontSize-base,1rem);height:var(--fontSize-base,1rem);width:var(--fontSize-base,1rem)}.ivds-icon--lg{font-size:var(--fontSize-lg,1.125rem);height:var(--fontSize-lg,1.125rem);width:var(--fontSize-lg,1.125rem)}.ivds-icon--xl{font-size:var(--fontSize-xl,1.25rem);height:var(--fontSize-xl,1.25rem);width:var(--fontSize-xl,1.25rem)}.ivds-icon--2xl{font-size:var(--fontSize-2xl,1.5rem);height:var(--fontSize-2xl,1.5rem);width:var(--fontSize-2xl,1.5rem)}.ivds-icon--3xl{font-size:var(--fontSize-3xl,1.875rem);height:var(--fontSize-3xl,1.875rem);width:var(--fontSize-3xl,1.875rem)}.ivds-icon--primary{color:var(--color-brand-primary-500,#0ea5e9)}.ivds-icon--secondary{color:var(--color-semantic-neutral-600,#6b7280)}.ivds-icon--success{color:var(--color-semantic-success-500,#10b981)}.ivds-icon--warning{color:var(--color-semantic-warning-500,#f59e0b)}.ivds-icon--error{color:var(--color-semantic-error-500,#ef4444)}.ivds-icon--info{color:var(--color-brand-primary-500,#0ea5e9)}.ivds-icon--interactive{cursor:pointer;transition:color .15s ease-in-out,transform .15s ease-in-out}.ivds-icon--interactive:hover{transform:scale(1.1)}.ivds-icon--interactive:active{transform:scale(.95)}.ivds-icon--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.ivds-icon--success{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--success svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--success:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--success{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--success:before{content:"✓";font-size:inherit}.ivds-icon--success:not(.ivds-icon--no-svg):before{display:none}
package/lib/icons/icon-warning.css ADDED
@@ -0,0 +1,139 @@
1
+ @charset "UTF-8";
2
+ /* Warning icon*/
3
+ .ivds-icon {
4
+ display: inline-flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ width: 1em;
8
+ height: 1em;
9
+ fill: currentcolor;
10
+ flex-shrink: 0;
11
+ vertical-align: middle;
12
+ }
13
+ .ivds-icon svg {
14
+ width: 100%;
15
+ height: 100%;
16
+ fill: inherit;
17
+ display: block;
18
+ }
19
+ .ivds-icon::before {
20
+ font-style: normal;
21
+ font-feature-settings: normal;
22
+ font-variant: normal;
23
+ text-rendering: auto;
24
+ line-height: 1;
25
+ }
26
+ .ivds-icon {
27
+ width: var(--fontSize-base, 1rem);
28
+ height: var(--fontSize-base, 1rem);
29
+ font-size: var(--fontSize-base, 1rem);
30
+ }
31
+ .ivds-icon--xs {
32
+ width: var(--fontSize-xs, 0.75rem);
33
+ height: var(--fontSize-xs, 0.75rem);
34
+ font-size: var(--fontSize-xs, 0.75rem);
35
+ }
36
+ .ivds-icon--sm {
37
+ width: var(--fontSize-sm, 0.875rem);
38
+ height: var(--fontSize-sm, 0.875rem);
39
+ font-size: var(--fontSize-sm, 0.875rem);
40
+ }
41
+ .ivds-icon--md {
42
+ width: var(--fontSize-base, 1rem);
43
+ height: var(--fontSize-base, 1rem);
44
+ font-size: var(--fontSize-base, 1rem);
45
+ }
46
+ .ivds-icon--lg {
47
+ width: var(--fontSize-lg, 1.125rem);
48
+ height: var(--fontSize-lg, 1.125rem);
49
+ font-size: var(--fontSize-lg, 1.125rem);
50
+ }
51
+ .ivds-icon--xl {
52
+ width: var(--fontSize-xl, 1.25rem);
53
+ height: var(--fontSize-xl, 1.25rem);
54
+ font-size: var(--fontSize-xl, 1.25rem);
55
+ }
56
+ .ivds-icon--2xl {
57
+ width: var(--fontSize-2xl, 1.5rem);
58
+ height: var(--fontSize-2xl, 1.5rem);
59
+ font-size: var(--fontSize-2xl, 1.5rem);
60
+ }
61
+ .ivds-icon--3xl {
62
+ width: var(--fontSize-3xl, 1.875rem);
63
+ height: var(--fontSize-3xl, 1.875rem);
64
+ font-size: var(--fontSize-3xl, 1.875rem);
65
+ }
66
+ .ivds-icon--primary {
67
+ color: var(--color-brand-primary-500, #0ea5e9);
68
+ }
69
+ .ivds-icon--secondary {
70
+ color: var(--color-semantic-neutral-600, #6b7280);
71
+ }
72
+ .ivds-icon--success {
73
+ color: var(--color-semantic-success-500, #10b981);
74
+ }
75
+ .ivds-icon--warning {
76
+ color: var(--color-semantic-warning-500, #f59e0b);
77
+ }
78
+ .ivds-icon--error {
79
+ color: var(--color-semantic-error-500, #ef4444);
80
+ }
81
+ .ivds-icon--info {
82
+ color: var(--color-brand-primary-500, #0ea5e9);
83
+ }
84
+ .ivds-icon--interactive {
85
+ cursor: pointer;
86
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
87
+ }
88
+ .ivds-icon--interactive:hover {
89
+ transform: scale(1.1);
90
+ }
91
+ .ivds-icon--interactive:active {
92
+ transform: scale(0.95);
93
+ }
94
+ .ivds-icon--disabled {
95
+ opacity: 0.5;
96
+ cursor: not-allowed;
97
+ pointer-events: none;
98
+ }
99
+ .ivds-icon--warning {
100
+ display: inline-flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ width: 1em;
104
+ height: 1em;
105
+ fill: currentcolor;
106
+ flex-shrink: 0;
107
+ vertical-align: middle;
108
+ }
109
+ .ivds-icon--warning svg {
110
+ width: 100%;
111
+ height: 100%;
112
+ fill: inherit;
113
+ display: block;
114
+ }
115
+ .ivds-icon--warning::before {
116
+ font-style: normal;
117
+ font-feature-settings: normal;
118
+ font-variant: normal;
119
+ text-rendering: auto;
120
+ line-height: 1;
121
+ }
122
+ .ivds-icon--warning {
123
+ /* SVG icon using PostCSS inline-svg (fallback to Unicode)*/
124
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E %3Cpath d='M12 9v4'/%3E %3Cpath d='M12 17h.01'/%3E %3C/svg%3E");
125
+ background-repeat: no-repeat;
126
+ background-position: center;
127
+ background-size: contain;
128
+ /* Unicode fallback*/
129
+ }
130
+ .ivds-icon--warning::before {
131
+ content: "⚠";
132
+ font-size: inherit;
133
+ }
134
+ .ivds-icon--warning {
135
+ /* Hide text when SVG is available*/
136
+ }
137
+ .ivds-icon--warning:not(.ivds-icon--no-svg)::before {
138
+ display: none;
139
+ }
package/lib/icons/icon-warning.min.css ADDED
@@ -0,0 +1 @@
1
+ @charset "UTF-8";.ivds-icon{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon{font-size:var(--fontSize-base,1rem);height:var(--fontSize-base,1rem);width:var(--fontSize-base,1rem)}.ivds-icon--xs{font-size:var(--fontSize-xs,.75rem);height:var(--fontSize-xs,.75rem);width:var(--fontSize-xs,.75rem)}.ivds-icon--sm{font-size:var(--fontSize-sm,.875rem);height:var(--fontSize-sm,.875rem);width:var(--fontSize-sm,.875rem)}.ivds-icon--md{font-size:var(--fontSize-base,1rem);height:var(--fontSize-base,1rem);width:var(--fontSize-base,1rem)}.ivds-icon--lg{font-size:var(--fontSize-lg,1.125rem);height:var(--fontSize-lg,1.125rem);width:var(--fontSize-lg,1.125rem)}.ivds-icon--xl{font-size:var(--fontSize-xl,1.25rem);height:var(--fontSize-xl,1.25rem);width:var(--fontSize-xl,1.25rem)}.ivds-icon--2xl{font-size:var(--fontSize-2xl,1.5rem);height:var(--fontSize-2xl,1.5rem);width:var(--fontSize-2xl,1.5rem)}.ivds-icon--3xl{font-size:var(--fontSize-3xl,1.875rem);height:var(--fontSize-3xl,1.875rem);width:var(--fontSize-3xl,1.875rem)}.ivds-icon--primary{color:var(--color-brand-primary-500,#0ea5e9)}.ivds-icon--secondary{color:var(--color-semantic-neutral-600,#6b7280)}.ivds-icon--success{color:var(--color-semantic-success-500,#10b981)}.ivds-icon--warning{color:var(--color-semantic-warning-500,#f59e0b)}.ivds-icon--error{color:var(--color-semantic-error-500,#ef4444)}.ivds-icon--info{color:var(--color-brand-primary-500,#0ea5e9)}.ivds-icon--interactive{cursor:pointer;transition:color .15s ease-in-out,transform .15s ease-in-out}.ivds-icon--interactive:hover{transform:scale(1.1)}.ivds-icon--interactive:active{transform:scale(.95)}.ivds-icon--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.ivds-icon--warning{align-items:center;display:inline-flex;fill:currentcolor;flex-shrink:0;height:1em;justify-content:center;vertical-align:middle;width:1em}.ivds-icon--warning svg{display:block;fill:inherit;height:100%;width:100%}.ivds-icon--warning:before{font-feature-settings:normal;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.ivds-icon--warning{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentcolor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.ivds-icon--warning:before{content:"⚠";font-size:inherit}.ivds-icon--warning:not(.ivds-icon--no-svg):before{display:none}