@dxc-technology/halstack-react 0.0.0-da4b2be → 0.0.0-da9270d

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 (236) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +23 -124
  4. package/HalstackContext.js +10 -35
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +24 -76
  8. package/accordion/Accordion.stories.tsx +1 -113
  9. package/accordion/Accordion.test.js +18 -33
  10. package/accordion/types.d.ts +5 -17
  11. package/accordion-group/AccordionGroup.js +15 -42
  12. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  13. package/accordion-group/AccordionGroup.test.js +43 -71
  14. package/accordion-group/AccordionGroupAccordion.js +9 -21
  15. package/accordion-group/types.d.ts +6 -18
  16. package/alert/Alert.js +15 -50
  17. package/alert/Alert.test.js +28 -45
  18. package/alert/types.d.ts +5 -5
  19. package/badge/Badge.js +4 -17
  20. package/badge/types.d.ts +1 -1
  21. package/bleed/Bleed.js +13 -21
  22. package/bleed/types.d.ts +2 -2
  23. package/box/Box.js +11 -33
  24. package/box/Box.test.js +1 -6
  25. package/box/types.d.ts +3 -3
  26. package/bulleted-list/BulletedList.js +18 -54
  27. package/bulleted-list/BulletedList.stories.tsx +1 -92
  28. package/bulleted-list/types.d.ts +5 -5
  29. package/button/Button.d.ts +1 -1
  30. package/button/Button.js +66 -99
  31. package/button/Button.stories.tsx +6 -87
  32. package/button/Button.test.js +17 -16
  33. package/button/types.d.ts +8 -4
  34. package/card/Card.d.ts +1 -1
  35. package/card/Card.js +39 -79
  36. package/card/Card.stories.tsx +0 -29
  37. package/card/Card.test.js +10 -21
  38. package/card/types.d.ts +6 -12
  39. package/checkbox/Checkbox.js +85 -120
  40. package/checkbox/Checkbox.stories.tsx +16 -54
  41. package/checkbox/Checkbox.test.js +107 -63
  42. package/checkbox/types.d.ts +8 -4
  43. package/chip/Chip.js +12 -31
  44. package/chip/Chip.stories.tsx +1 -1
  45. package/chip/Chip.test.js +15 -28
  46. package/chip/types.d.ts +4 -4
  47. package/common/coreTokens.d.ts +105 -14
  48. package/common/coreTokens.js +41 -24
  49. package/common/utils.js +2 -8
  50. package/common/variables.d.ts +23 -124
  51. package/common/variables.js +27 -135
  52. package/container/Container.d.ts +4 -0
  53. package/container/Container.js +194 -0
  54. package/container/Container.stories.tsx +214 -0
  55. package/container/types.d.ts +74 -0
  56. package/date-input/Calendar.js +15 -59
  57. package/date-input/DateInput.js +50 -96
  58. package/date-input/DateInput.stories.tsx +11 -30
  59. package/date-input/DateInput.test.js +674 -701
  60. package/date-input/DatePicker.js +11 -42
  61. package/date-input/Icons.d.ts +6 -6
  62. package/date-input/Icons.js +6 -23
  63. package/date-input/YearPicker.js +8 -34
  64. package/date-input/types.d.ts +27 -21
  65. package/dialog/Dialog.js +13 -40
  66. package/dialog/Dialog.stories.tsx +170 -0
  67. package/dialog/Dialog.test.js +125 -187
  68. package/dialog/types.d.ts +18 -13
  69. package/dropdown/Dropdown.js +39 -93
  70. package/dropdown/Dropdown.test.js +391 -378
  71. package/dropdown/DropdownMenu.js +8 -19
  72. package/dropdown/DropdownMenuItem.js +5 -17
  73. package/dropdown/types.d.ts +17 -19
  74. package/file-input/FileInput.js +180 -248
  75. package/file-input/FileInput.stories.tsx +1 -1
  76. package/file-input/FileInput.test.js +356 -354
  77. package/file-input/FileItem.js +14 -41
  78. package/file-input/types.d.ts +10 -10
  79. package/flex/Flex.js +25 -39
  80. package/flex/types.d.ts +6 -6
  81. package/footer/Footer.d.ts +1 -1
  82. package/footer/Footer.js +54 -112
  83. package/footer/Footer.stories.tsx +19 -95
  84. package/footer/Footer.test.js +21 -33
  85. package/footer/Icons.d.ts +2 -2
  86. package/footer/Icons.js +2 -7
  87. package/footer/types.d.ts +21 -29
  88. package/grid/Grid.d.ts +1 -1
  89. package/grid/Grid.js +2 -17
  90. package/grid/Grid.stories.tsx +38 -38
  91. package/grid/types.d.ts +10 -10
  92. package/header/Header.d.ts +2 -2
  93. package/header/Header.js +31 -114
  94. package/header/Header.stories.tsx +7 -71
  95. package/header/Header.test.js +12 -25
  96. package/header/Icons.d.ts +2 -2
  97. package/header/Icons.js +2 -7
  98. package/header/types.d.ts +5 -20
  99. package/heading/Heading.js +9 -31
  100. package/heading/Heading.test.js +70 -87
  101. package/heading/types.d.ts +7 -7
  102. package/image/Image.d.ts +4 -0
  103. package/image/Image.js +70 -0
  104. package/image/Image.stories.tsx +127 -0
  105. package/image/types.d.ts +72 -0
  106. package/inset/Inset.js +13 -21
  107. package/inset/types.d.ts +2 -2
  108. package/layout/ApplicationLayout.d.ts +3 -3
  109. package/layout/ApplicationLayout.js +28 -65
  110. package/layout/ApplicationLayout.stories.tsx +1 -1
  111. package/layout/Icons.d.ts +8 -5
  112. package/layout/Icons.js +51 -59
  113. package/layout/SidenavContext.d.ts +1 -1
  114. package/layout/SidenavContext.js +3 -9
  115. package/layout/types.d.ts +3 -3
  116. package/link/Link.js +21 -42
  117. package/link/Link.test.js +23 -41
  118. package/link/types.d.ts +14 -14
  119. package/main.d.ts +4 -3
  120. package/main.js +17 -58
  121. package/nav-tabs/NavTabs.js +11 -43
  122. package/nav-tabs/NavTabs.stories.tsx +1 -1
  123. package/nav-tabs/NavTabs.test.js +36 -43
  124. package/nav-tabs/Tab.js +16 -45
  125. package/nav-tabs/types.d.ts +9 -9
  126. package/number-input/NumberInput.d.ts +7 -0
  127. package/number-input/NumberInput.js +26 -35
  128. package/number-input/NumberInput.stories.tsx +42 -26
  129. package/number-input/NumberInput.test.js +700 -412
  130. package/number-input/types.d.ts +11 -5
  131. package/package.json +30 -28
  132. package/paginator/Icons.d.ts +5 -5
  133. package/paginator/Icons.js +5 -19
  134. package/paginator/Paginator.js +15 -43
  135. package/paginator/Paginator.test.js +224 -207
  136. package/paginator/types.d.ts +3 -3
  137. package/paragraph/Paragraph.js +3 -19
  138. package/paragraph/Paragraph.stories.tsx +0 -17
  139. package/password-input/Icons.d.ts +6 -0
  140. package/password-input/Icons.js +35 -0
  141. package/password-input/PasswordInput.js +57 -126
  142. package/password-input/PasswordInput.stories.tsx +1 -33
  143. package/password-input/PasswordInput.test.js +157 -140
  144. package/password-input/types.d.ts +8 -7
  145. package/progress-bar/ProgressBar.js +21 -53
  146. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  147. package/progress-bar/ProgressBar.test.js +35 -52
  148. package/progress-bar/types.d.ts +3 -3
  149. package/quick-nav/QuickNav.js +4 -27
  150. package/quick-nav/QuickNav.stories.tsx +1 -1
  151. package/quick-nav/types.d.ts +10 -10
  152. package/radio-group/Radio.d.ts +1 -1
  153. package/radio-group/Radio.js +22 -54
  154. package/radio-group/RadioGroup.js +37 -83
  155. package/radio-group/RadioGroup.stories.tsx +10 -10
  156. package/radio-group/RadioGroup.test.js +504 -470
  157. package/radio-group/types.d.ts +8 -8
  158. package/resultset-table/Icons.d.ts +7 -0
  159. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  160. package/{resultsetTable → resultset-table}/ResultsetTable.js +23 -59
  161. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  162. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  163. package/resultset-table/types.js +5 -0
  164. package/select/Icons.d.ts +7 -7
  165. package/select/Icons.js +1 -5
  166. package/select/Listbox.js +13 -39
  167. package/select/Option.js +9 -26
  168. package/select/Select.js +70 -155
  169. package/select/Select.stories.tsx +3 -3
  170. package/select/Select.test.js +1946 -1804
  171. package/select/types.d.ts +14 -15
  172. package/sidenav/Icons.d.ts +4 -4
  173. package/sidenav/Icons.js +1 -5
  174. package/sidenav/Sidenav.js +26 -68
  175. package/sidenav/Sidenav.test.js +3 -10
  176. package/sidenav/types.d.ts +18 -18
  177. package/slider/Slider.js +68 -125
  178. package/slider/Slider.test.js +107 -103
  179. package/slider/types.d.ts +4 -4
  180. package/spinner/Spinner.js +16 -54
  181. package/spinner/Spinner.test.js +25 -34
  182. package/spinner/types.d.ts +3 -3
  183. package/switch/Switch.js +49 -97
  184. package/switch/Switch.stories.tsx +0 -34
  185. package/switch/Switch.test.js +51 -96
  186. package/switch/types.d.ts +4 -4
  187. package/table/Table.js +5 -27
  188. package/table/Table.test.js +1 -6
  189. package/table/types.d.ts +8 -8
  190. package/tabs/Tab.js +10 -29
  191. package/tabs/Tabs.js +52 -129
  192. package/tabs/Tabs.test.js +62 -118
  193. package/tabs/types.d.ts +19 -19
  194. package/tag/Tag.js +21 -51
  195. package/tag/Tag.test.js +19 -30
  196. package/tag/types.d.ts +7 -7
  197. package/text-input/Icons.d.ts +5 -5
  198. package/text-input/Icons.js +1 -5
  199. package/text-input/Suggestion.js +9 -26
  200. package/text-input/Suggestions.d.ts +1 -1
  201. package/text-input/Suggestions.js +15 -65
  202. package/text-input/TextInput.js +204 -284
  203. package/text-input/TextInput.stories.tsx +48 -152
  204. package/text-input/TextInput.test.js +1210 -1194
  205. package/text-input/types.d.ts +25 -17
  206. package/textarea/Textarea.js +67 -109
  207. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  208. package/textarea/Textarea.test.js +150 -179
  209. package/textarea/types.d.ts +9 -5
  210. package/toggle-group/ToggleGroup.js +90 -107
  211. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  212. package/toggle-group/ToggleGroup.test.js +68 -87
  213. package/toggle-group/types.d.ts +26 -17
  214. package/typography/Typography.js +4 -13
  215. package/typography/types.d.ts +1 -1
  216. package/useTheme.d.ts +20 -121
  217. package/useTheme.js +1 -8
  218. package/useTranslatedLabels.js +1 -7
  219. package/utils/BaseTypography.d.ts +2 -2
  220. package/utils/BaseTypography.js +16 -30
  221. package/utils/FocusLock.js +22 -39
  222. package/wizard/Wizard.js +14 -49
  223. package/wizard/Wizard.test.js +53 -80
  224. package/wizard/types.d.ts +6 -6
  225. package/card/ice-cream.jpg +0 -0
  226. package/number-input/NumberInputContext.d.ts +0 -4
  227. package/number-input/NumberInputContext.js +0 -19
  228. package/number-input/numberInputContextTypes.d.ts +0 -19
  229. package/resultsetTable/Icons.d.ts +0 -7
  230. package/slider/Slider.stories.tsx +0 -240
  231. /package/{resultsetTable → container}/types.js +0 -0
  232. /package/{number-input/numberInputContextTypes.js → image/types.js} +0 -0
  233. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  234. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
  235. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
  236. /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
@@ -1,15 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.spaces = exports.responsiveSizes = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
9
-
10
8
  var _coreTokens = _interopRequireDefault(require("./coreTokens"));
11
-
12
- var componentTokens = {
9
+ var componentTokens = exports.componentTokens = {
13
10
  accordion: {
14
11
  backgroundColor: _coreTokens["default"].color_white,
15
12
  hoverBackgroundColor: _coreTokens["default"].color_purple_100,
@@ -120,7 +117,6 @@ var componentTokens = {
120
117
  },
121
118
  bulletedList: {
122
119
  fontColor: _coreTokens["default"].color_black,
123
- fontColorOnDark: _coreTokens["default"].color_white,
124
120
  bulletIconHeight: "1.5rem",
125
121
  bulletIconWidth: "1.5rem",
126
122
  bulletHeight: "5px",
@@ -135,19 +131,12 @@ var componentTokens = {
135
131
  paddingTop: _coreTokens["default"].spacing_8,
136
132
  paddingBottom: _coreTokens["default"].spacing_8,
137
133
  focusBorderColor: _coreTokens["default"].color_blue_600,
138
- focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
139
134
  primaryBackgroundColor: _coreTokens["default"].color_purple_700,
140
- primaryBackgroundColorOnDark: _coreTokens["default"].color_purple_700,
141
135
  primaryFontColor: _coreTokens["default"].color_white,
142
- primaryFontColorOnDark: _coreTokens["default"].color_white,
143
136
  primaryHoverBackgroundColor: _coreTokens["default"].color_purple_800,
144
- primaryHoverBackgroundColorOnDark: _coreTokens["default"].color_purple_600,
145
137
  primaryActiveBackgroundColor: _coreTokens["default"].color_purple_900,
146
- primaryActiveBackgroundColorOnDark: _coreTokens["default"].color_purple_800,
147
138
  primaryDisabledBackgroundColor: _coreTokens["default"].color_grey_100,
148
- primaryDisabledBackgroundColorOnDark: _coreTokens["default"].color_grey_800,
149
139
  primaryDisabledFontColor: _coreTokens["default"].color_grey_500,
150
- primaryDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
151
140
  primaryBorderThickness: _coreTokens["default"].border_width_0,
152
141
  primaryBorderStyle: _coreTokens["default"].border_none,
153
142
  primaryBorderRadius: _coreTokens["default"].border_radius_medium,
@@ -155,23 +144,14 @@ var componentTokens = {
155
144
  primaryFontSize: _coreTokens["default"].type_scale_03,
156
145
  primaryFontWeight: _coreTokens["default"].type_regular,
157
146
  secondaryBackgroundColor: _coreTokens["default"].color_transparent,
158
- secondaryBackgroundColorOnDark: _coreTokens["default"].color_transparent,
159
147
  secondaryFontColor: _coreTokens["default"].color_purple_700,
160
- secondaryFontColorOnDark: _coreTokens["default"].color_white,
161
148
  secondaryHoverFontColor: _coreTokens["default"].color_white,
162
- secondaryHoverFontColorOnDark: _coreTokens["default"].color_black,
163
149
  secondaryBorderColor: _coreTokens["default"].color_purple_700,
164
- secondaryBorderColorOnDark: _coreTokens["default"].color_white,
165
150
  secondaryHoverBackgroundColor: _coreTokens["default"].color_purple_700,
166
- secondaryHoverBackgroundColorOnDark: _coreTokens["default"].color_white,
167
151
  secondaryActiveBackgroundColor: _coreTokens["default"].color_purple_900,
168
- secondaryActiveBackgroundColorOnDark: _coreTokens["default"].color_grey_200,
169
152
  secondaryDisabledBackgroundColor: _coreTokens["default"].color_transparent,
170
- secondaryDisabledBackgroundColorOnDark: _coreTokens["default"].color_transparent,
171
153
  secondaryDisabledFontColor: _coreTokens["default"].color_grey_500,
172
- secondaryDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
173
154
  secondaryDisabledBorderColor: _coreTokens["default"].color_grey_500,
174
- secondaryDisabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
175
155
  secondaryBorderThickness: _coreTokens["default"].border_width_1,
176
156
  secondaryBorderStyle: _coreTokens["default"].border_solid,
177
157
  secondaryBorderRadius: _coreTokens["default"].border_radius_medium,
@@ -179,17 +159,11 @@ var componentTokens = {
179
159
  secondaryFontSize: _coreTokens["default"].type_scale_03,
180
160
  secondaryFontWeight: _coreTokens["default"].type_regular,
181
161
  textBackgroundColor: _coreTokens["default"].color_transparent,
182
- textBackgroundColorOnDark: _coreTokens["default"].color_transparent,
183
162
  textFontColor: _coreTokens["default"].color_purple_700,
184
- textFontColorOnDark: _coreTokens["default"].color_white,
185
163
  textHoverBackgroundColor: _coreTokens["default"].color_purple_100,
186
- textHoverBackgroundColorOnDark: _coreTokens["default"].color_grey_800,
187
164
  textActiveBackgroundColor: _coreTokens["default"].color_purple_200,
188
- textActiveBackgroundColorOnDark: _coreTokens["default"].color_grey_700,
189
165
  textDisabledBackgroundColor: _coreTokens["default"].color_transparent,
190
- textDisabledBackgroundColorOnDark: _coreTokens["default"].color_transparent,
191
166
  textDisabledFontColor: _coreTokens["default"].color_grey_500,
192
- textDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
193
167
  textBorderThickness: _coreTokens["default"].border_width_0,
194
168
  textBorderStyle: _coreTokens["default"].border_none,
195
169
  textBorderRadius: _coreTokens["default"].border_radius_medium,
@@ -203,30 +177,24 @@ var componentTokens = {
203
177
  },
204
178
  checkbox: {
205
179
  backgroundColorChecked: _coreTokens["default"].color_blue_800,
206
- backgroundColorCheckedOnDark: _coreTokens["default"].color_grey_200,
207
180
  hoverBackgroundColorChecked: _coreTokens["default"].color_blue_900,
208
- hoverBackgroundColorCheckedOnDark: _coreTokens["default"].color_white,
209
181
  disabledBackgroundColorChecked: _coreTokens["default"].color_grey_500,
210
- disabledBackgroundColorCheckedOnDark: _coreTokens["default"].color_grey_800,
182
+ readOnlyBackgroundColorChecked: _coreTokens["default"].color_grey_500,
183
+ hoverReadOnlyBackgroundColorChecked: _coreTokens["default"].color_grey_600,
211
184
  borderColor: _coreTokens["default"].color_blue_800,
212
- borderColorOnDark: _coreTokens["default"].color_grey_200,
213
185
  hoverBorderColor: _coreTokens["default"].color_blue_900,
214
- hoverBorderColorOnDark: _coreTokens["default"].color_white,
215
186
  disabledBorderColor: _coreTokens["default"].color_grey_500,
216
- disabledBorderColorOnDark: _coreTokens["default"].color_grey_800,
187
+ readOnlyBorderColor: _coreTokens["default"].color_grey_500,
188
+ hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
217
189
  checkColor: _coreTokens["default"].color_white,
218
- checkColorOnDark: _coreTokens["default"].color_black,
219
190
  disabledCheckColor: _coreTokens["default"].color_white,
220
- disabledCheckColorOnDark: _coreTokens["default"].color_grey_500,
191
+ readOnlyCheckColor: _coreTokens["default"].color_white,
221
192
  fontFamily: _coreTokens["default"].type_sans,
222
193
  fontSize: _coreTokens["default"].type_scale_02,
223
194
  fontWeight: _coreTokens["default"].type_regular,
224
195
  fontColor: _coreTokens["default"].color_black,
225
- fontColorOnDark: _coreTokens["default"].color_white,
226
196
  disabledFontColor: _coreTokens["default"].color_grey_500,
227
- disabledFontColorOnDark: _coreTokens["default"].color_grey_500,
228
197
  focusColor: _coreTokens["default"].color_blue_600,
229
- focusColorOnDark: _coreTokens["default"].color_blue_600,
230
198
  checkLabelSpacing: "8px"
231
199
  },
232
200
  chip: {
@@ -459,8 +427,7 @@ var componentTokens = {
459
427
  underlinedColor: _coreTokens["default"].color_black,
460
428
  underlinedThickness: "2px",
461
429
  underlinedStyle: _coreTokens["default"].border_solid,
462
- contentColor: _coreTokens["default"].color_black,
463
- contentColorOnDark: _coreTokens["default"].color_white
430
+ contentColor: _coreTokens["default"].color_black
464
431
  },
465
432
  heading: {
466
433
  level1FontColor: _coreTokens["default"].inherit,
@@ -499,6 +466,14 @@ var componentTokens = {
499
466
  level5LineHeight: _coreTokens["default"].type_leading_normal,
500
467
  level5LetterSpacing: _coreTokens["default"].type_spacing_wide_01
501
468
  },
469
+ image: {
470
+ captionFontColor: _coreTokens["default"].color_grey_900,
471
+ captionFontFamily: _coreTokens["default"].type_sans,
472
+ captionFontSize: _coreTokens["default"].type_scale_02,
473
+ captionFontStyle: _coreTokens["default"].type_normal,
474
+ captionFontWeight: _coreTokens["default"].type_regular,
475
+ captionLineHeight: _coreTokens["default"].type_leading_normal
476
+ },
502
477
  link: {
503
478
  fontColor: _coreTokens["default"].color_blue_800,
504
479
  fontFamily: _coreTokens["default"].inherit,
@@ -559,31 +534,26 @@ var componentTokens = {
559
534
  },
560
535
  paragraph: {
561
536
  fontColor: _coreTokens["default"].color_black,
562
- fontColorOnDark: _coreTokens["default"].color_white,
563
537
  display: "block",
564
538
  fontSize: _coreTokens["default"].type_scale_03,
565
539
  fontWeight: _coreTokens["default"].type_regular
566
540
  },
567
541
  progressBar: {
568
542
  trackLineColor: _coreTokens["default"].color_purple_700,
569
- trackLineColorOnDark: _coreTokens["default"].color_purple_500,
570
543
  totalLineColor: _coreTokens["default"].color_grey_200,
571
544
  labelFontFamily: _coreTokens["default"].type_sans,
572
545
  labelFontSize: _coreTokens["default"].type_scale_01,
573
546
  labelFontStyle: _coreTokens["default"].type_normal,
574
547
  labelFontWeight: _coreTokens["default"].type_regular,
575
548
  labelFontColor: _coreTokens["default"].color_black,
576
- labelFontColorOnDark: _coreTokens["default"].color_white,
577
549
  labelFontTextTransform: _coreTokens["default"].type_uppercase,
578
550
  valueFontFamily: _coreTokens["default"].type_sans,
579
551
  valueFontSize: _coreTokens["default"].type_scale_01,
580
552
  valueFontStyle: _coreTokens["default"].type_normal,
581
553
  valueFontWeight: _coreTokens["default"].type_regular,
582
554
  valueFontColor: _coreTokens["default"].color_black,
583
- valueFontColorOnDark: _coreTokens["default"].color_white,
584
555
  valueFontTextTransform: _coreTokens["default"].type_uppercase,
585
556
  helperTextFontColor: _coreTokens["default"].color_black,
586
- helperTextFontColorOnDark: _coreTokens["default"].color_white,
587
557
  helperTextFontSize: _coreTokens["default"].type_scale_01,
588
558
  helperTextFontStyle: _coreTokens["default"].type_normal,
589
559
  helperTextFontWeight: _coreTokens["default"].type_regular,
@@ -619,9 +589,9 @@ var componentTokens = {
619
589
  errorRadioInputColor: _coreTokens["default"].color_red_700,
620
590
  hoverErrorRadioInputColor: _coreTokens["default"].color_red_800,
621
591
  activeErrorRadioInputColor: _coreTokens["default"].color_red_900,
622
- readonlyRadioInputColor: _coreTokens["default"].color_grey_500,
623
- hoverReadonlyRadioInputColor: _coreTokens["default"].color_grey_600,
624
- activeReadonlyRadioInputColor: _coreTokens["default"].color_grey_700,
592
+ readOnlyRadioInputColor: _coreTokens["default"].color_grey_500,
593
+ hoverReadOnlyRadioInputColor: _coreTokens["default"].color_grey_600,
594
+ activeReadOnlyRadioInputColor: _coreTokens["default"].color_grey_700,
625
595
  disabledRadioInputColor: _coreTokens["default"].color_grey_500,
626
596
  disabledLabelFontColor: _coreTokens["default"].color_grey_500,
627
597
  disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
@@ -761,7 +731,6 @@ var componentTokens = {
761
731
  slider: {
762
732
  fontFamily: _coreTokens["default"].type_sans,
763
733
  limitValuesFontColor: _coreTokens["default"].color_black,
764
- limitValuesFontColorOnDark: _coreTokens["default"].color_white,
765
734
  limitValuesFontSize: _coreTokens["default"].type_scale_03,
766
735
  limitValuesFontStyle: _coreTokens["default"].type_normal,
767
736
  limitValuesFontWeight: _coreTokens["default"].type_regular,
@@ -778,15 +747,10 @@ var componentTokens = {
778
747
  helperTextFontWeight: _coreTokens["default"].type_regular,
779
748
  helperTextLineHeight: _coreTokens["default"].type_leading_normal,
780
749
  fontColor: _coreTokens["default"].color_black,
781
- fontColorOnDark: _coreTokens["default"].color_white,
782
750
  labelFontColor: _coreTokens["default"].color_black,
783
- labelFontColorOnDark: _coreTokens["default"].color_white,
784
751
  helperTextFontColor: _coreTokens["default"].color_black,
785
- helperTextFontColorOnDark: _coreTokens["default"].color_white,
786
752
  disabledLabelFontColor: _coreTokens["default"].color_grey_500,
787
- disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
788
753
  disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
789
- disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
790
754
  thumbHeight: "12px",
791
755
  thumbWidth: "12px",
792
756
  hoverThumbHeight: "14px",
@@ -794,40 +758,28 @@ var componentTokens = {
794
758
  thumbVerticalPosition: "12px",
795
759
  hoverThumbVerticalPosition: "11px",
796
760
  thumbBackgroundColor: _coreTokens["default"].color_blue_800,
797
- thumbBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
798
761
  hoverThumbScale: "1.166666",
799
762
  hoverThumbBackgroundColor: _coreTokens["default"].color_blue_900,
800
- hoverThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_900,
801
763
  activeThumbScale: "1.166666",
802
764
  activeThumbBackgroundColor: _coreTokens["default"].color_blue_900,
803
- activeThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_900,
804
765
  focusThumbBackgroundColor: _coreTokens["default"].color_blue_800,
805
- focusThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
806
766
  tickHeight: "4px",
807
767
  tickWidth: "4px",
808
768
  tickVerticalPosition: "11px",
809
769
  tickBackgroundColor: _coreTokens["default"].color_blue_800,
810
- tickBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
811
770
  trackLineThickness: "2px",
812
771
  trackLineVerticalPosition: "50%",
813
772
  trackLineColor: _coreTokens["default"].color_blue_800,
814
- trackLineColorOnDark: _coreTokens["default"].color_blue_600,
815
773
  totalLineThickness: "2px",
816
774
  totalLineVerticalPosition: "50%",
817
775
  totalLineColor: _coreTokens["default"].color_grey_200_a,
818
- totalLineColorOnDark: _coreTokens["default"].color_grey_400,
819
776
  disabledThumbVerticalPosition: "10px",
820
777
  disabledThumbBackgroundColor: _coreTokens["default"].color_grey_500,
821
- disabledThumbBackgroundColorOnDark: "#575757",
822
778
  disabledTickVerticalPosition: "11px",
823
779
  disabledTickBackgroundColor: _coreTokens["default"].color_grey_500,
824
- disabledTickBackgroundColorOnDark: _coreTokens["default"].color_grey_500,
825
780
  disabledTrackLineColor: _coreTokens["default"].color_grey_500,
826
- disabledTrackLineColorOnDark: _coreTokens["default"].color_grey_500,
827
781
  disabledTotalLineColor: _coreTokens["default"].color_grey_100,
828
- disabledTotalLineColorOnDark: _coreTokens["default"].color_grey_700,
829
782
  focusColor: _coreTokens["default"].color_blue_600,
830
- focusColorOnDark: _coreTokens["default"].color_blue_600,
831
783
  floorLabelMarginRight: _coreTokens["default"].type_scale_03,
832
784
  ceilLabelMarginLeft: _coreTokens["default"].type_scale_03,
833
785
  inputMarginLeft: _coreTokens["default"].type_scale_06
@@ -841,14 +793,12 @@ var componentTokens = {
841
793
  labelFontStyle: _coreTokens["default"].type_normal,
842
794
  labelFontWeight: _coreTokens["default"].type_regular,
843
795
  labelFontColor: _coreTokens["default"].color_black,
844
- labelFontColorOnDark: _coreTokens["default"].color_white,
845
796
  labelTextAlign: "center",
846
797
  progressValueFontFamily: _coreTokens["default"].type_sans,
847
798
  progressValueFontSize: _coreTokens["default"].type_scale_02,
848
799
  progressValueFontStyle: _coreTokens["default"].type_normal,
849
800
  progressValueFontWeight: _coreTokens["default"].type_bold,
850
801
  progressValueFontColor: _coreTokens["default"].inherit,
851
- progressValueFontColorOnDark: _coreTokens["default"].color_white,
852
802
  progressValueTextAlign: "center",
853
803
  overlayBackgroundColor: _coreTokens["default"].color_black,
854
804
  overlayOpacity: "0.8",
@@ -867,32 +817,21 @@ var componentTokens = {
867
817
  },
868
818
  "switch": {
869
819
  checkedTrackBackgroundColor: _coreTokens["default"].color_purple_700,
870
- checkedTrackBackgroundColorOnDark: _coreTokens["default"].color_purple_700,
871
820
  checkedThumbBackgroundColor: _coreTokens["default"].color_white,
872
- checkedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
873
821
  uncheckedTrackBackgroundColor: _coreTokens["default"].color_grey_400,
874
- uncheckedTrackBackgroundColorOnDark: _coreTokens["default"].color_grey_400,
875
822
  uncheckedThumbBackgroundColor: _coreTokens["default"].color_white,
876
- uncheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
877
823
  disabledCheckedTrackBackgroundColor: _coreTokens["default"].color_purple_100,
878
- disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
879
824
  disabledCheckedThumbBackgroundColor: _coreTokens["default"].color_white,
880
- disabledCheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
881
825
  disabledUncheckedTrackBackgroundColor: _coreTokens["default"].color_grey_100,
882
- disabledUncheckedTrackBackgroundColorOnDark: "#363636",
883
826
  disabledUncheckedThumbBackgroundColor: _coreTokens["default"].color_white,
884
- disabledUncheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
885
827
  disabledLabelFontColor: _coreTokens["default"].color_grey_500,
886
- disabledLabelFontColorOnDark: "#575757",
887
828
  disabledLabelFontStyle: _coreTokens["default"].type_normal,
888
829
  labelFontFamily: _coreTokens["default"].type_sans,
889
830
  labelFontSize: _coreTokens["default"].type_scale_root,
890
831
  labelFontStyle: _coreTokens["default"].type_normal,
891
832
  labelFontWeight: _coreTokens["default"].type_regular,
892
833
  labelFontColor: _coreTokens["default"].color_black,
893
- labelFontColorOnDark: _coreTokens["default"].color_white,
894
834
  thumbFocusColor: _coreTokens["default"].color_blue_600,
895
- thumbFocusColorOnDark: "#1682ff",
896
835
  thumbHeight: "24px",
897
836
  thumbWidth: "24px",
898
837
  thumbShift: "1.25rem",
@@ -994,130 +933,87 @@ var componentTokens = {
994
933
  textarea: {
995
934
  fontFamily: _coreTokens["default"].type_sans,
996
935
  enabledBorderColor: _coreTokens["default"].color_black,
997
- enabledBorderColorOnDark: _coreTokens["default"].color_white,
998
936
  hoverBorderColor: _coreTokens["default"].color_purple_500,
999
- hoverBorderColorOnDark: _coreTokens["default"].color_purple_500,
1000
937
  focusBorderColor: _coreTokens["default"].color_blue_600,
1001
- focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
1002
938
  disabledBorderColor: _coreTokens["default"].color_grey_500,
1003
- disabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
1004
939
  disabledContainerFillColor: _coreTokens["default"].color_grey_100,
1005
- disabledContainerFillColorOnDark: _coreTokens["default"].color_grey_700,
940
+ readOnlyBorderColor: _coreTokens["default"].color_grey_500,
941
+ hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
1006
942
  errorBorderColor: _coreTokens["default"].color_red_700,
1007
- errorBorderColorOnDark: _coreTokens["default"].color_red_500,
1008
943
  hoverErrorBorderColor: _coreTokens["default"].color_red_600,
1009
- hoverErrorBorderColorOnDark: "#fe677b",
1010
944
  inputMarginTop: _coreTokens["default"].spacing_4,
1011
945
  inputMarginBottom: _coreTokens["default"].spacing_4,
1012
946
  errorMessageColor: _coreTokens["default"].color_red_700,
1013
- errorMessageColorOnDark: _coreTokens["default"].color_red_500,
1014
947
  labelFontColor: _coreTokens["default"].color_black,
1015
- labelFontColorOnDark: _coreTokens["default"].color_white,
1016
948
  labelFontSize: _coreTokens["default"].type_scale_02,
1017
949
  labelFontStyle: _coreTokens["default"].type_normal,
1018
950
  labelFontWeight: _coreTokens["default"].type_semibold,
1019
951
  labelLineHeight: _coreTokens["default"].type_leading_loose_01,
1020
952
  disabledLabelFontColor: _coreTokens["default"].color_grey_500,
1021
- disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
1022
953
  optionalLabelFontWeight: _coreTokens["default"].type_regular,
1023
954
  helperTextFontColor: _coreTokens["default"].color_black,
1024
- helperTextFontColorOnDark: _coreTokens["default"].color_white,
1025
955
  helperTextFontSize: _coreTokens["default"].type_scale_01,
1026
956
  helperTextFontStyle: _coreTokens["default"].type_normal,
1027
957
  helperTextFontWeight: _coreTokens["default"].type_regular,
1028
958
  helperTextLineHeight: _coreTokens["default"].type_leading_normal,
1029
959
  disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
1030
- disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
1031
960
  placeholderFontColor: _coreTokens["default"].color_grey_800_a,
1032
- placeholderFontColorOnDark: _coreTokens["default"].color_grey_100,
1033
961
  disabledPlaceholderFontColor: _coreTokens["default"].color_grey_500,
1034
- disabledPlaceholderFontColorOnDark: _coreTokens["default"].color_grey_500,
1035
962
  valueFontColor: _coreTokens["default"].color_black,
1036
- valueFontColorOnDark: _coreTokens["default"].color_white,
1037
963
  valueFontSize: _coreTokens["default"].type_scale_03,
1038
964
  valueFontStyle: _coreTokens["default"].type_normal,
1039
965
  valueFontWeight: _coreTokens["default"].type_regular,
1040
- disabledValueFontColor: _coreTokens["default"].color_grey_500,
1041
- disabledValueFontColorOnDark: _coreTokens["default"].color_grey_500
966
+ disabledValueFontColor: _coreTokens["default"].color_grey_500
1042
967
  },
1043
968
  textInput: {
1044
969
  fontFamily: _coreTokens["default"].type_sans,
1045
970
  enabledBorderColor: _coreTokens["default"].color_black,
1046
- enabledBorderColorOnDark: _coreTokens["default"].color_white,
1047
971
  hoverBorderColor: _coreTokens["default"].color_purple_500,
1048
- hoverBorderColorOnDark: _coreTokens["default"].color_purple_500,
1049
972
  focusBorderColor: _coreTokens["default"].color_blue_600,
1050
- focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
1051
973
  disabledBorderColor: _coreTokens["default"].color_grey_500,
1052
- disabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
1053
974
  disabledContainerFillColor: _coreTokens["default"].color_grey_100,
1054
- disabledContainerFillColorOnDark: _coreTokens["default"].color_grey_700,
975
+ readOnlyBorderColor: _coreTokens["default"].color_grey_500,
976
+ hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
1055
977
  errorBorderColor: _coreTokens["default"].color_red_700,
1056
- errorBorderColorOnDark: _coreTokens["default"].color_red_500,
1057
978
  hoverErrorBorderColor: _coreTokens["default"].color_red_600,
1058
- hoverErrorBorderColorOnDark: "#fe677b",
1059
979
  inputMarginTop: _coreTokens["default"].spacing_4,
1060
980
  inputMarginBottom: _coreTokens["default"].spacing_4,
1061
981
  errorMessageColor: _coreTokens["default"].color_red_700,
1062
- errorMessageColorOnDark: _coreTokens["default"].color_red_500,
1063
982
  errorIconColor: _coreTokens["default"].color_red_700,
1064
- errorIconColorOnDark: _coreTokens["default"].color_red_500,
1065
983
  labelFontColor: _coreTokens["default"].color_black,
1066
- labelFontColorOnDark: _coreTokens["default"].color_white,
1067
984
  labelFontSize: _coreTokens["default"].type_scale_02,
1068
985
  labelFontStyle: _coreTokens["default"].type_normal,
1069
986
  labelFontWeight: _coreTokens["default"].type_semibold,
1070
987
  labelLineHeight: _coreTokens["default"].type_leading_loose_01,
1071
988
  disabledLabelFontColor: _coreTokens["default"].color_grey_500,
1072
- disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
1073
989
  optionalLabelFontWeight: _coreTokens["default"].type_regular,
1074
990
  helperTextFontColor: _coreTokens["default"].color_black,
1075
- helperTextFontColorOnDark: _coreTokens["default"].color_white,
1076
991
  helperTextFontSize: _coreTokens["default"].type_scale_01,
1077
992
  helperTextFontStyle: _coreTokens["default"].type_normal,
1078
993
  helperTextFontWeight: _coreTokens["default"].type_regular,
1079
994
  helperTextLineHeight: _coreTokens["default"].type_leading_normal,
1080
995
  disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
1081
- disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
1082
996
  prefixColor: _coreTokens["default"].color_grey_700,
1083
- prefixColorOnDark: _coreTokens["default"].color_white,
1084
997
  suffixColor: _coreTokens["default"].color_grey_700,
1085
- suffixColorOnDark: _coreTokens["default"].color_white,
1086
998
  disabledPrefixColor: _coreTokens["default"].color_grey_400,
1087
999
  disabledSuffixColor: _coreTokens["default"].color_grey_400,
1088
- disabledPrefixColorOnDark: _coreTokens["default"].color_grey_500,
1089
- disabledSuffixColorOnDark: _coreTokens["default"].color_grey_500,
1090
1000
  placeholderFontColor: _coreTokens["default"].color_grey_800_a,
1091
- placeholderFontColorOnDark: _coreTokens["default"].color_grey_100,
1092
1001
  disabledPlaceholderFontColor: _coreTokens["default"].color_grey_500,
1093
- disabledPlaceholderFontColorOnDark: _coreTokens["default"].color_grey_500,
1094
1002
  valueFontColor: _coreTokens["default"].color_black,
1095
- valueFontColorOnDark: _coreTokens["default"].color_white,
1096
1003
  valueFontSize: _coreTokens["default"].type_scale_03,
1097
1004
  valueFontStyle: _coreTokens["default"].type_normal,
1098
1005
  valueFontWeight: _coreTokens["default"].type_regular,
1099
1006
  disabledValueFontColor: _coreTokens["default"].color_grey_500,
1100
- disabledValueFontColorOnDark: _coreTokens["default"].color_grey_500,
1101
1007
  actionIconColor: _coreTokens["default"].color_black,
1102
- actionIconColorOnDark: _coreTokens["default"].color_white,
1103
1008
  disabledActionIconColor: _coreTokens["default"].color_grey_500,
1104
- disabledActionIconColorOnDark: _coreTokens["default"].color_grey_500,
1105
1009
  hoverActionIconColor: _coreTokens["default"].color_black,
1106
- hoverActionIconColorOnDark: _coreTokens["default"].color_white,
1107
1010
  focusActionIconColor: _coreTokens["default"].color_black,
1108
- focusActionIconColorOnDark: _coreTokens["default"].color_white,
1109
1011
  activeActionIconColor: _coreTokens["default"].color_black,
1110
- activeActionIconColorOnDark: _coreTokens["default"].color_black,
1111
1012
  actionBackgroundColor: _coreTokens["default"].color_transparent,
1112
- actionBackgroundColorOnDark: _coreTokens["default"].color_transparent,
1113
1013
  disabledActionBackgroundColor: _coreTokens["default"].color_transparent,
1114
- disabledActionBackgroundColorOnDark: _coreTokens["default"].color_transparent,
1115
1014
  hoverActionBackgroundColor: _coreTokens["default"].color_grey_100,
1116
- hoverActionBackgroundColorOnDark: _coreTokens["default"].color_grey_700,
1117
1015
  focusActionBorderColor: _coreTokens["default"].color_blue_600,
1118
- focusActionBorderColorOnDark: _coreTokens["default"].color_blue_600,
1119
1016
  activeActionBackgroundColor: _coreTokens["default"].color_grey_300,
1120
- activeActionBackgroundColorOnDark: _coreTokens["default"].color_grey_500,
1121
1017
  listDialogBackgroundColor: _coreTokens["default"].color_white,
1122
1018
  listDialogBorderColor: _coreTokens["default"].color_grey_400,
1123
1019
  listOptionDividerColor: _coreTokens["default"].color_grey_200,
@@ -1243,8 +1139,7 @@ var componentTokens = {
1243
1139
  focusColor: _coreTokens["default"].color_blue_600
1244
1140
  }
1245
1141
  };
1246
- exports.componentTokens = componentTokens;
1247
- var spaces = {
1142
+ var spaces = exports.spaces = {
1248
1143
  xxsmall: "6px",
1249
1144
  xsmall: "16px",
1250
1145
  small: "24px",
@@ -1253,16 +1148,14 @@ var spaces = {
1253
1148
  xlarge: "64px",
1254
1149
  xxlarge: "100px"
1255
1150
  };
1256
- exports.spaces = spaces;
1257
- var responsiveSizes = {
1151
+ var responsiveSizes = exports.responsiveSizes = {
1258
1152
  xsmall: "20",
1259
1153
  small: "30",
1260
1154
  medium: "45",
1261
1155
  large: "66",
1262
1156
  xlarge: "90"
1263
1157
  };
1264
- exports.responsiveSizes = responsiveSizes;
1265
- var defaultTranslatedComponentLabels = {
1158
+ var defaultTranslatedComponentLabels = exports.defaultTranslatedComponentLabels = {
1266
1159
  formFields: {
1267
1160
  optionalLabel: "(Optional)",
1268
1161
  requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
@@ -1357,5 +1250,4 @@ var defaultTranslatedComponentLabels = {
1357
1250
  previousMonthTitle: "Previous month",
1358
1251
  nextMonthTitle: "Next month"
1359
1252
  }
1360
- };
1361
- exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;
1253
+ };
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import ContainerPropsType from "./types";
3
+ declare const DxcContainer: ({ display, width, height, overflow, ...props }: ContainerPropsType) => React.JSX.Element;
4
+ export default DxcContainer;