@dxc-technology/halstack-react 0.0.0-05ca70e → 0.0.0-0b14645

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 (281) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +39 -39
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +89 -156
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +13 -17
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +309 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +59 -0
  14. package/{dist/box → box}/Box.js +9 -21
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.d.ts +4 -0
  17. package/button/Button.js +182 -0
  18. package/button/Button.stories.tsx +306 -0
  19. package/button/types.d.ts +57 -0
  20. package/button/types.js +5 -0
  21. package/{dist/card → card}/Card.js +29 -76
  22. package/card/index.d.ts +22 -0
  23. package/checkbox/Checkbox.d.ts +4 -0
  24. package/{dist/checkbox → checkbox}/Checkbox.js +44 -82
  25. package/checkbox/types.d.ts +61 -0
  26. package/checkbox/types.js +5 -0
  27. package/{dist/chip → chip}/Chip.js +48 -104
  28. package/chip/index.d.ts +22 -0
  29. package/{dist/common → common}/OpenSans.css +0 -0
  30. package/{dist/common → common}/RequiredComponent.js +3 -11
  31. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  37. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  38. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  39. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  40. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  41. package/{dist/common → common}/utils.js +0 -0
  42. package/common/variables.js +1569 -0
  43. package/{dist/date → date}/Date.js +71 -57
  44. package/date/index.d.ts +27 -0
  45. package/date-input/DateInput.js +396 -0
  46. package/date-input/index.d.ts +95 -0
  47. package/{dist/dialog → dialog}/Dialog.js +28 -80
  48. package/dialog/index.d.ts +18 -0
  49. package/dropdown/Dropdown.js +450 -0
  50. package/dropdown/index.d.ts +26 -0
  51. package/file-input/FileInput.js +532 -0
  52. package/file-input/FileItem.js +193 -0
  53. package/file-input/index.d.ts +81 -0
  54. package/{dist/footer → footer}/Footer.js +69 -177
  55. package/footer/Icons.js +77 -0
  56. package/footer/index.d.ts +25 -0
  57. package/header/Header.js +326 -0
  58. package/header/Icons.js +59 -0
  59. package/header/index.d.ts +25 -0
  60. package/{dist/heading → heading}/Heading.js +30 -76
  61. package/heading/index.d.ts +17 -0
  62. package/input-text/Icons.js +22 -0
  63. package/{dist/input-text → input-text}/InputText.js +120 -178
  64. package/input-text/index.d.ts +36 -0
  65. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  66. package/layout/Icons.js +55 -0
  67. package/link/Link.js +183 -0
  68. package/link/index.d.ts +23 -0
  69. package/main.d.ts +44 -0
  70. package/{dist/main.js → main.js} +121 -69
  71. package/number-input/NumberInput.js +128 -0
  72. package/number-input/NumberInputContext.js +16 -0
  73. package/number-input/index.d.ts +113 -0
  74. package/package.json +33 -24
  75. package/paginator/Icons.js +66 -0
  76. package/paginator/Paginator.d.ts +4 -0
  77. package/paginator/Paginator.js +198 -0
  78. package/paginator/types.d.ts +38 -0
  79. package/paginator/types.js +5 -0
  80. package/password-input/PasswordInput.js +199 -0
  81. package/password-input/index.d.ts +94 -0
  82. package/progress-bar/ProgressBar.js +188 -0
  83. package/progress-bar/index.d.ts +18 -0
  84. package/{dist/radio → radio}/Radio.js +14 -28
  85. package/radio/index.d.ts +23 -0
  86. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -136
  87. package/resultsetTable/index.d.ts +19 -0
  88. package/select/Select.js +865 -0
  89. package/select/index.d.ts +131 -0
  90. package/{dist/sidenav → sidenav}/Sidenav.js +20 -58
  91. package/sidenav/index.d.ts +13 -0
  92. package/slider/Slider.js +340 -0
  93. package/slider/index.d.ts +29 -0
  94. package/spinner/Spinner.js +267 -0
  95. package/spinner/index.d.ts +17 -0
  96. package/{dist/switch → switch}/Switch.js +14 -28
  97. package/switch/index.d.ts +24 -0
  98. package/table/Table.js +118 -0
  99. package/table/index.d.ts +13 -0
  100. package/{dist/tabs → tabs}/Tabs.js +29 -117
  101. package/tabs/index.d.ts +19 -0
  102. package/{dist/tag → tag}/Tag.js +50 -122
  103. package/tag/index.d.ts +24 -0
  104. package/text-input/TextInput.js +825 -0
  105. package/text-input/index.d.ts +135 -0
  106. package/textarea/Textarea.js +317 -0
  107. package/textarea/index.d.ts +117 -0
  108. package/{dist/toggle → toggle}/Toggle.js +15 -49
  109. package/toggle/index.d.ts +21 -0
  110. package/toggle-group/ToggleGroup.js +243 -0
  111. package/toggle-group/index.d.ts +21 -0
  112. package/{dist/upload → upload}/Upload.js +11 -15
  113. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  114. package/upload/buttons-upload/Icons.js +40 -0
  115. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  116. package/upload/dragAndDropArea/Icons.js +39 -0
  117. package/upload/file-upload/FileToUpload.js +115 -0
  118. package/upload/file-upload/Icons.js +66 -0
  119. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  120. package/upload/index.d.ts +15 -0
  121. package/upload/transaction/Icons.js +160 -0
  122. package/upload/transaction/Transaction.js +104 -0
  123. package/upload/transactions/Transactions.js +94 -0
  124. package/{dist/useTheme.js → useTheme.js} +0 -0
  125. package/wizard/Icons.js +65 -0
  126. package/wizard/Wizard.js +271 -0
  127. package/wizard/index.d.ts +18 -0
  128. package/README.md +0 -66
  129. package/babel.config.js +0 -8
  130. package/dist/BackgroundColorContext.js +0 -46
  131. package/dist/ThemeContext.js +0 -216
  132. package/dist/accordion/Accordion.stories.js +0 -207
  133. package/dist/accordion/readme.md +0 -96
  134. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  135. package/dist/accordion-group/readme.md +0 -70
  136. package/dist/alert/Alert.js +0 -388
  137. package/dist/alert/Alert.stories.js +0 -158
  138. package/dist/alert/close.svg +0 -4
  139. package/dist/alert/error.svg +0 -4
  140. package/dist/alert/info.svg +0 -4
  141. package/dist/alert/readme.md +0 -43
  142. package/dist/alert/success.svg +0 -4
  143. package/dist/alert/warning.svg +0 -4
  144. package/dist/badge/Badge.js +0 -61
  145. package/dist/button/Button.js +0 -228
  146. package/dist/button/Button.stories.js +0 -224
  147. package/dist/button/readme.md +0 -93
  148. package/dist/checkbox/Checkbox.stories.js +0 -144
  149. package/dist/checkbox/readme.md +0 -116
  150. package/dist/common/variables.js +0 -1163
  151. package/dist/date/Date.stories.js +0 -205
  152. package/dist/date/calendar.svg +0 -1
  153. package/dist/date/calendar_dark.svg +0 -1
  154. package/dist/date/readme.md +0 -73
  155. package/dist/dialog/Dialog.stories.js +0 -217
  156. package/dist/dialog/readme.md +0 -32
  157. package/dist/dropdown/Dropdown.js +0 -498
  158. package/dist/dropdown/Dropdown.stories.js +0 -249
  159. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  160. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  161. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  162. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  163. package/dist/dropdown/readme.md +0 -69
  164. package/dist/footer/Footer.stories.js +0 -94
  165. package/dist/footer/dxc_logo_wht.png +0 -0
  166. package/dist/footer/readme.md +0 -41
  167. package/dist/header/Header.js +0 -431
  168. package/dist/header/Header.stories.js +0 -176
  169. package/dist/header/close_icon.svg +0 -1
  170. package/dist/header/dxc_logo_black.png +0 -0
  171. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  172. package/dist/header/dxc_logo_white.png +0 -0
  173. package/dist/header/hamb_menu_black.svg +0 -1
  174. package/dist/header/hamb_menu_white.svg +0 -1
  175. package/dist/header/readme.md +0 -33
  176. package/dist/input-text/InputText.stories.js +0 -209
  177. package/dist/input-text/error.svg +0 -1
  178. package/dist/input-text/readme.md +0 -91
  179. package/dist/layout/facebook.svg +0 -45
  180. package/dist/layout/linkedin.svg +0 -50
  181. package/dist/layout/twitter.svg +0 -53
  182. package/dist/link/Link.js +0 -212
  183. package/dist/link/readme.md +0 -51
  184. package/dist/paginator/Paginator.js +0 -283
  185. package/dist/paginator/images/next.svg +0 -3
  186. package/dist/paginator/images/nextPage.svg +0 -3
  187. package/dist/paginator/images/previous.svg +0 -3
  188. package/dist/paginator/images/previousPage.svg +0 -3
  189. package/dist/paginator/readme.md +0 -50
  190. package/dist/progress-bar/ProgressBar.js +0 -206
  191. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  192. package/dist/progress-bar/readme.md +0 -63
  193. package/dist/radio/Radio.stories.js +0 -166
  194. package/dist/radio/readme.md +0 -70
  195. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  196. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  197. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  198. package/dist/select/Select.js +0 -525
  199. package/dist/select/Select.stories.js +0 -235
  200. package/dist/select/readme.md +0 -72
  201. package/dist/slider/Slider.js +0 -315
  202. package/dist/slider/Slider.stories.js +0 -241
  203. package/dist/slider/readme.md +0 -64
  204. package/dist/spinner/Spinner.js +0 -214
  205. package/dist/spinner/Spinner.stories.js +0 -183
  206. package/dist/spinner/readme.md +0 -65
  207. package/dist/switch/Switch.stories.js +0 -134
  208. package/dist/switch/readme.md +0 -133
  209. package/dist/table/Table.js +0 -122
  210. package/dist/tabs/Tabs.stories.js +0 -130
  211. package/dist/tabs/readme.md +0 -78
  212. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  213. package/dist/tabs-for-sections/readme.md +0 -78
  214. package/dist/toggle/Toggle.stories.js +0 -297
  215. package/dist/toggle/readme.md +0 -80
  216. package/dist/toggle-group/ToggleGroup.js +0 -241
  217. package/dist/toggle-group/readme.md +0 -82
  218. package/dist/upload/Upload.stories.js +0 -72
  219. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  220. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  221. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  222. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  223. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  224. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  225. package/dist/upload/file-upload/FileToUpload.js +0 -184
  226. package/dist/upload/file-upload/audio-icon.svg +0 -4
  227. package/dist/upload/file-upload/close.svg +0 -4
  228. package/dist/upload/file-upload/file-icon.svg +0 -4
  229. package/dist/upload/file-upload/video-icon.svg +0 -4
  230. package/dist/upload/readme.md +0 -37
  231. package/dist/upload/transaction/Transaction.js +0 -171
  232. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  233. package/dist/upload/transaction/audio-icon.svg +0 -4
  234. package/dist/upload/transaction/error-icon.svg +0 -4
  235. package/dist/upload/transaction/file-icon-err.svg +0 -4
  236. package/dist/upload/transaction/file-icon.svg +0 -4
  237. package/dist/upload/transaction/image-icon-err.svg +0 -4
  238. package/dist/upload/transaction/image-icon.svg +0 -4
  239. package/dist/upload/transaction/success-icon.svg +0 -4
  240. package/dist/upload/transaction/video-icon-err.svg +0 -4
  241. package/dist/upload/transaction/video-icon.svg +0 -4
  242. package/dist/upload/transactions/Transactions.js +0 -138
  243. package/dist/wizard/Wizard.js +0 -383
  244. package/dist/wizard/invalid_icon.svg +0 -6
  245. package/dist/wizard/valid_icon.svg +0 -6
  246. package/dist/wizard/validation-wrong.svg +0 -6
  247. package/test/Accordion.test.js +0 -33
  248. package/test/AccordionGroup.test.js +0 -125
  249. package/test/Alert.test.js +0 -53
  250. package/test/Box.test.js +0 -10
  251. package/test/Button.test.js +0 -18
  252. package/test/Card.test.js +0 -30
  253. package/test/Checkbox.test.js +0 -45
  254. package/test/Chip.test.js +0 -25
  255. package/test/Date.test.js +0 -393
  256. package/test/Dialog.test.js +0 -23
  257. package/test/Dropdown.test.js +0 -130
  258. package/test/Footer.test.js +0 -99
  259. package/test/Header.test.js +0 -39
  260. package/test/Heading.test.js +0 -35
  261. package/test/InputText.test.js +0 -240
  262. package/test/Link.test.js +0 -42
  263. package/test/Paginator.test.js +0 -177
  264. package/test/ProgressBar.test.js +0 -35
  265. package/test/Radio.test.js +0 -37
  266. package/test/ResultsetTable.test.js +0 -330
  267. package/test/Select.test.js +0 -192
  268. package/test/Sidenav.test.js +0 -45
  269. package/test/Slider.test.js +0 -82
  270. package/test/Spinner.test.js +0 -27
  271. package/test/Switch.test.js +0 -45
  272. package/test/Table.test.js +0 -36
  273. package/test/Tabs.test.js +0 -109
  274. package/test/TabsForSections.test.js +0 -34
  275. package/test/Tag.test.js +0 -32
  276. package/test/TextArea.test.js +0 -52
  277. package/test/ToggleGroup.test.js +0 -81
  278. package/test/Upload.test.js +0 -60
  279. package/test/Wizard.test.js +0 -130
  280. package/test/mocks/pngMock.js +0 -1
  281. package/test/mocks/svgMock.js +0 -1
@@ -1,216 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.ThemeProvider = exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _react = _interopRequireWildcard(require("react"));
15
-
16
- var _color = _interopRequireDefault(require("color"));
17
-
18
- var _rgbHex = _interopRequireDefault(require("rgb-hex"));
19
-
20
- var _styledComponents = _interopRequireDefault(require("styled-components"));
21
-
22
- var _variables = require("./common/variables.js");
23
-
24
- function _templateObject() {
25
- var data = (0, _taggedTemplateLiteral2["default"])(["\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"]);
26
-
27
- _templateObject = function _templateObject() {
28
- return data;
29
- };
30
-
31
- return data;
32
- }
33
-
34
- var ThemeContext = _react["default"].createContext();
35
-
36
- var setLightness = function setLightness(hexColor, newLightness) {
37
- try {
38
- if (hexColor) {
39
- var color = (0, _color["default"])(hexColor);
40
- var hslColor = color.hsl();
41
- var lightnessColor = hslColor.color[2];
42
- return hslColor.lightness(lightnessColor + newLightness).hex();
43
- }
44
- } catch (e) {
45
- return null;
46
- }
47
- };
48
-
49
- var setOpacity = function setOpacity(hexColor, newOpacity) {
50
- try {
51
- if (hexColor) {
52
- var color = (0, _color["default"])(hexColor);
53
- return "#" + (0, _rgbHex["default"])(color.color[0], color.color[1], color.color[2], newOpacity);
54
- }
55
- } catch (e) {
56
- return null;
57
- }
58
- };
59
-
60
- var parseAdvancedTheme = function parseAdvancedTheme(advancedTheme) {
61
- var allTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
62
- Object.keys(allTokensCopy).map(function (component) {
63
- if (advancedTheme[component]) {
64
- Object.keys(advancedTheme[component]).map(function (objectKey) {
65
- if (advancedTheme[component][objectKey]) {
66
- allTokensCopy[component][objectKey] = advancedTheme[component][objectKey];
67
- }
68
- });
69
- }
70
- });
71
- return allTokensCopy;
72
- };
73
-
74
- var parseTheme = function parseTheme(theme) {
75
- var _ref, _theme$accordion, _ref2, _theme$accordion2, _setLightness, _theme$accordion3, _setLightness2, _theme$accordion4, _ref3, _theme$accordion5, _ref4, _theme$button, _ref5, _theme$button2, _ref6, _theme$button3, _ref7, _theme$button4, _ref8, _theme$button5, _ref9, _theme$button6, _ref10, _theme$button7, _ref11, _theme$button8, _ref12, _theme$button9, _ref13, _theme$button10, _ref14, _theme$button11, _setOpacity, _theme$button12, _setOpacity2, _theme$button13, _setOpacity3, _theme$button14, _setOpacity4, _theme$button15, _setOpacity5, _theme$button16, _ref15, _theme$checkbox, _ref16, _theme$checkbox2, _ref17, _theme$checkbox3, _setOpacity6, _theme$checkbox4, _setOpacity7, _theme$checkbox5, _setOpacity8, _theme$checkbox6, _ref18, _theme$chip, _setOpacity9, _theme$chip2, _ref19, _theme$chip3, _ref20, _theme$chip4, _setOpacity10, _theme$chip5, _ref21, _theme$date, _ref22, _theme$date2, _setOpacity11, _theme$date3, _ref23, _theme$dropdown, _ref24, _theme$dropdown2, _setOpacity12, _theme$dropdown3, _setOpacity13, _theme$dropdown4, _ref25, _theme$footer, _ref26, _theme$footer2, _ref27, _theme$footer3, _ref28, _theme$footer4, _ref29, _theme$header, _ref30, _theme$header2, _ref31, _theme$header3, _ref32, _theme$header4, _ref33, _theme$header5, _setOpacity14, _theme$header6, _ref34, _theme$header7, _ref35, _theme$header8, _setOpacity15, _theme$inputText, _ref36, _theme$paginator, _ref37, _theme$paginator2, _ref38, _theme$progressBar, _ref39, _theme$progressBar2, _ref40, _theme$radio, _setOpacity16, _theme$radio2, _ref41, _theme$select, _setOpacity17, _theme$select2, _setOpacity18, _theme$select3, _ref42, _theme$sidenav, _setOpacity19, _theme$sidenav2, _ref43, _theme$sidenav3, _ref44, _theme$slider, _ref45, _theme$slider2, _ref46, _theme$slider3, _setOpacity20, _theme$slider4, _setOpacity21, _theme$slider5, _setOpacity22, _theme$slider6, _setOpacity23, _theme$slider7, _ref47, _theme$spinner, _ref48, _theme$spinner2, _ref49, _theme$switch, _setOpacity24, _theme$switch2, _ref50, _theme$table, _ref51, _theme$table2, _ref52, _theme$tabs, _ref53, _theme$tabs2, _ref54, _theme$tabs3, _ref55, _theme$tabs4, _setLightness3, _theme$tabs5, _setLightness4, _theme$tabs6, _ref56, _theme$toggleGroup, _ref57, _theme$toggleGroup2, _ref58, _theme$toggleGroup3, _ref59, _theme$toggleGroup4, _ref60, _theme$toggleGroup5, _ref61, _theme$toggleGroup6, _ref62, _theme$toggleGroup7, _ref63, _theme$toggleGroup8, _setOpacity25, _theme$toggleGroup9, _setOpacity26, _theme$toggleGroup10, _setOpacity27, _theme$toggleGroup11, _setOpacity28, _theme$toggleGroup12, _ref64, _theme$wizard, _ref65, _theme$wizard2;
76
-
77
- var componentTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
78
- var accordionTokens = componentTokensCopy.accordion;
79
- accordionTokens.fontColorBase = (_ref = theme === null || theme === void 0 ? void 0 : (_theme$accordion = theme.accordion) === null || _theme$accordion === void 0 ? void 0 : _theme$accordion.fontColor) !== null && _ref !== void 0 ? _ref : accordionTokens.fontColorBase;
80
- accordionTokens.arrowColor = (_ref2 = theme === null || theme === void 0 ? void 0 : (_theme$accordion2 = theme.accordion) === null || _theme$accordion2 === void 0 ? void 0 : _theme$accordion2.accentColor) !== null && _ref2 !== void 0 ? _ref2 : accordionTokens.arrowColor;
81
- accordionTokens.hoverBackgroundColor = (_setLightness = setLightness(theme === null || theme === void 0 ? void 0 : (_theme$accordion3 = theme.accordion) === null || _theme$accordion3 === void 0 ? void 0 : _theme$accordion3.accentColor, 53)) !== null && _setLightness !== void 0 ? _setLightness : accordionTokens.hoverBackgroundColor;
82
- accordionTokens.disabledFontColor = (_setLightness2 = setLightness(theme === null || theme === void 0 ? void 0 : (_theme$accordion4 = theme.accordion) === null || _theme$accordion4 === void 0 ? void 0 : _theme$accordion4.fontColor, 35)) !== null && _setLightness2 !== void 0 ? _setLightness2 : accordionTokens.disabledFontColor;
83
- accordionTokens.headerFocusBorderColor = (_ref3 = theme === null || theme === void 0 ? void 0 : (_theme$accordion5 = theme.accordion) === null || _theme$accordion5 === void 0 ? void 0 : _theme$accordion5.accentColor) !== null && _ref3 !== void 0 ? _ref3 : accordionTokens.headerFocusBorderColor;
84
- var buttonTokens = componentTokensCopy.button;
85
- buttonTokens.primaryBackgroundColor = (_ref4 = theme === null || theme === void 0 ? void 0 : (_theme$button = theme.button) === null || _theme$button === void 0 ? void 0 : _theme$button.baseColor) !== null && _ref4 !== void 0 ? _ref4 : buttonTokens.primaryBackgroundColor;
86
- buttonTokens.secondaryOutlinedColor = (_ref5 = theme === null || theme === void 0 ? void 0 : (_theme$button2 = theme.button) === null || _theme$button2 === void 0 ? void 0 : _theme$button2.baseColor) !== null && _ref5 !== void 0 ? _ref5 : buttonTokens.secondaryOutlinedColor;
87
- buttonTokens.primaryHoverBackgroundColor = (_ref6 = theme === null || theme === void 0 ? void 0 : (_theme$button3 = theme.button) === null || _theme$button3 === void 0 ? void 0 : _theme$button3.hoverBaseColor) !== null && _ref6 !== void 0 ? _ref6 : buttonTokens.primaryHoverBackgroundColor;
88
- buttonTokens.secondaryHoverOutlinedColor = (_ref7 = theme === null || theme === void 0 ? void 0 : (_theme$button4 = theme.button) === null || _theme$button4 === void 0 ? void 0 : _theme$button4.hoverBaseColor) !== null && _ref7 !== void 0 ? _ref7 : buttonTokens.secondaryHoverOutlinedColor;
89
- buttonTokens.textHoverBackgroundColor = (_ref8 = theme === null || theme === void 0 ? void 0 : (_theme$button5 = theme.button) === null || _theme$button5 === void 0 ? void 0 : _theme$button5.hoverBaseColor) !== null && _ref8 !== void 0 ? _ref8 : buttonTokens.textHoverBackgroundColor;
90
- buttonTokens.primaryFontColor = (_ref9 = theme === null || theme === void 0 ? void 0 : (_theme$button6 = theme.button) === null || _theme$button6 === void 0 ? void 0 : _theme$button6.primaryFontColor) !== null && _ref9 !== void 0 ? _ref9 : buttonTokens.primaryFontColor;
91
- buttonTokens.primaryHoverFontColor = (_ref10 = theme === null || theme === void 0 ? void 0 : (_theme$button7 = theme.button) === null || _theme$button7 === void 0 ? void 0 : _theme$button7.primaryHoverFontColor) !== null && _ref10 !== void 0 ? _ref10 : buttonTokens.primaryHoverFontColor;
92
- buttonTokens.secondaryFontColor = (_ref11 = theme === null || theme === void 0 ? void 0 : (_theme$button8 = theme.button) === null || _theme$button8 === void 0 ? void 0 : _theme$button8.secondaryFontColor) !== null && _ref11 !== void 0 ? _ref11 : buttonTokens.secondaryFontColor;
93
- buttonTokens.secondaryHoverFontColor = (_ref12 = theme === null || theme === void 0 ? void 0 : (_theme$button9 = theme.button) === null || _theme$button9 === void 0 ? void 0 : _theme$button9.secondaryHoverFontColor) !== null && _ref12 !== void 0 ? _ref12 : buttonTokens.secondaryHoverFontColor;
94
- buttonTokens.textFontColor = (_ref13 = theme === null || theme === void 0 ? void 0 : (_theme$button10 = theme.button) === null || _theme$button10 === void 0 ? void 0 : _theme$button10.textFontColor) !== null && _ref13 !== void 0 ? _ref13 : buttonTokens.textFontColor;
95
- buttonTokens.textHoverFontColor = (_ref14 = theme === null || theme === void 0 ? void 0 : (_theme$button11 = theme.button) === null || _theme$button11 === void 0 ? void 0 : _theme$button11.textHoverFontColor) !== null && _ref14 !== void 0 ? _ref14 : buttonTokens.textHoverFontColor;
96
- buttonTokens.disabledPrimaryBackgroundColor = (_setOpacity = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button12 = theme.button) === null || _theme$button12 === void 0 ? void 0 : _theme$button12.baseColor, 0.34)) !== null && _setOpacity !== void 0 ? _setOpacity : buttonTokens.disabledPrimaryBackgroundColor;
97
- buttonTokens.disabledSecondaryOutlinedColor = (_setOpacity2 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button13 = theme.button) === null || _theme$button13 === void 0 ? void 0 : _theme$button13.baseColor, 0.34)) !== null && _setOpacity2 !== void 0 ? _setOpacity2 : buttonTokens.disabledSecondaryOutlinedColor;
98
- buttonTokens.disabledPrimaryFontColor = (_setOpacity3 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button14 = theme.button) === null || _theme$button14 === void 0 ? void 0 : _theme$button14.primaryFontColor, 0.34)) !== null && _setOpacity3 !== void 0 ? _setOpacity3 : buttonTokens.disabledPrimaryFontColor;
99
- buttonTokens.disabledSecondaryFontColor = (_setOpacity4 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button15 = theme.button) === null || _theme$button15 === void 0 ? void 0 : _theme$button15.secondaryFontColor, 0.34)) !== null && _setOpacity4 !== void 0 ? _setOpacity4 : buttonTokens.disabledSecondaryFontColor;
100
- buttonTokens.disabledTextFontColor = (_setOpacity5 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button16 = theme.button) === null || _theme$button16 === void 0 ? void 0 : _theme$button16.textFontColor, 0.34)) !== null && _setOpacity5 !== void 0 ? _setOpacity5 : buttonTokens.disabledTextFontColor;
101
- var checkboxTokens = componentTokensCopy.checkbox;
102
- checkboxTokens.backgroundColorChecked = (_ref15 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox = theme.checkbox) === null || _theme$checkbox === void 0 ? void 0 : _theme$checkbox.baseColor) !== null && _ref15 !== void 0 ? _ref15 : checkboxTokens.backgroundColorChecked;
103
- checkboxTokens.borderColor = (_ref16 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox2 = theme.checkbox) === null || _theme$checkbox2 === void 0 ? void 0 : _theme$checkbox2.baseColor) !== null && _ref16 !== void 0 ? _ref16 : checkboxTokens.borderColor;
104
- checkboxTokens.checkColor = (_ref17 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox3 = theme.checkbox) === null || _theme$checkbox3 === void 0 ? void 0 : _theme$checkbox3.checkColor) !== null && _ref17 !== void 0 ? _ref17 : checkboxTokens.checkColor;
105
- checkboxTokens.disabledBackgroundColorChecked = (_setOpacity6 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox4 = theme.checkbox) === null || _theme$checkbox4 === void 0 ? void 0 : _theme$checkbox4.baseColor, 0.34)) !== null && _setOpacity6 !== void 0 ? _setOpacity6 : checkboxTokens.disabledBackgroundColorChecked;
106
- checkboxTokens.disabledBorderColor = (_setOpacity7 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox5 = theme.checkbox) === null || _theme$checkbox5 === void 0 ? void 0 : _theme$checkbox5.baseColor, 0.34)) !== null && _setOpacity7 !== void 0 ? _setOpacity7 : checkboxTokens.disabledBorderColor;
107
- checkboxTokens.disabledCheckColor = (_setOpacity8 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox6 = theme.checkbox) === null || _theme$checkbox6 === void 0 ? void 0 : _theme$checkbox6.checkColor, 0.34)) !== null && _setOpacity8 !== void 0 ? _setOpacity8 : checkboxTokens.disabledCheckColor;
108
- var chipTokens = componentTokensCopy.chip;
109
- chipTokens.backgroundColor = (_ref18 = theme === null || theme === void 0 ? void 0 : (_theme$chip = theme.chip) === null || _theme$chip === void 0 ? void 0 : _theme$chip.baseColor) !== null && _ref18 !== void 0 ? _ref18 : chipTokens.backgroundColor;
110
- chipTokens.disabledBackgroundColor = (_setOpacity9 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip2 = theme.chip) === null || _theme$chip2 === void 0 ? void 0 : _theme$chip2.baseColor, 0.34)) !== null && _setOpacity9 !== void 0 ? _setOpacity9 : chipTokens.disabledBackgroundColor;
111
- chipTokens.borderColor = (_ref19 = theme === null || theme === void 0 ? void 0 : (_theme$chip3 = theme.chip) === null || _theme$chip3 === void 0 ? void 0 : _theme$chip3.accentColor) !== null && _ref19 !== void 0 ? _ref19 : chipTokens.borderolor;
112
- chipTokens.fontColor = (_ref20 = theme === null || theme === void 0 ? void 0 : (_theme$chip4 = theme.chip) === null || _theme$chip4 === void 0 ? void 0 : _theme$chip4.fontColor) !== null && _ref20 !== void 0 ? _ref20 : chipTokens.fontColor;
113
- chipTokens.disabledFontColor = (_setOpacity10 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip5 = theme.chip) === null || _theme$chip5 === void 0 ? void 0 : _theme$chip5.fontColor, 0.34)) !== null && _setOpacity10 !== void 0 ? _setOpacity10 : chipTokens.disabledFontColor;
114
- var dateTokens = componentTokensCopy.date;
115
- dateTokens.pickerSelectedDateBackgroundColor = (_ref21 = theme === null || theme === void 0 ? void 0 : (_theme$date = theme.date) === null || _theme$date === void 0 ? void 0 : _theme$date.baseColor) !== null && _ref21 !== void 0 ? _ref21 : dateTokens.pickerSelectedDateBackgroundColor;
116
- dateTokens.pickerSelectedDateColor = (_ref22 = theme === null || theme === void 0 ? void 0 : (_theme$date2 = theme.date) === null || _theme$date2 === void 0 ? void 0 : _theme$date2.accentColor) !== null && _ref22 !== void 0 ? _ref22 : dateTokens.pickerSelectedDateColor;
117
- dateTokens.pickerHoverDateBackgroundColor = (_setOpacity11 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$date3 = theme.date) === null || _theme$date3 === void 0 ? void 0 : _theme$date3.baseColor, 0.34)) !== null && _setOpacity11 !== void 0 ? _setOpacity11 : dateTokens.pickerHoverDateBackgroundColor;
118
- var dropdownTokens = componentTokensCopy.dropdown;
119
- dropdownTokens.buttonBackgroundColor = (_ref23 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown = theme.dropdown) === null || _theme$dropdown === void 0 ? void 0 : _theme$dropdown.baseColor) !== null && _ref23 !== void 0 ? _ref23 : dropdownTokens.buttonBackgroundColor;
120
- dropdownTokens.buttonFontColor = (_ref24 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown2 = theme.dropdown) === null || _theme$dropdown2 === void 0 ? void 0 : _theme$dropdown2.fontColor) !== null && _ref24 !== void 0 ? _ref24 : dropdownTokens.buttonFontColor;
121
- dropdownTokens.buttonHoverBackgroundColor = (_setOpacity12 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown3 = theme.dropdown) === null || _theme$dropdown3 === void 0 ? void 0 : _theme$dropdown3.baseColor, 0.8)) !== null && _setOpacity12 !== void 0 ? _setOpacity12 : dropdownTokens.buttonHoverBackgroundColor;
122
- dropdownTokens.optionsListHoverBackgroundColor = (_setOpacity13 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown4 = theme.dropdown) === null || _theme$dropdown4 === void 0 ? void 0 : _theme$dropdown4.baseColor, 0.34)) !== null && _setOpacity13 !== void 0 ? _setOpacity13 : dropdownTokens.optionsListHoverBackgroundColor;
123
- var footerTokens = componentTokensCopy.footer;
124
- footerTokens.backgroundColor = (_ref25 = theme === null || theme === void 0 ? void 0 : (_theme$footer = theme.footer) === null || _theme$footer === void 0 ? void 0 : _theme$footer.baseColor) !== null && _ref25 !== void 0 ? _ref25 : footerTokens.backgroundColor;
125
- footerTokens.fontColorBase = (_ref26 = theme === null || theme === void 0 ? void 0 : (_theme$footer2 = theme.footer) === null || _theme$footer2 === void 0 ? void 0 : _theme$footer2.fontColor) !== null && _ref26 !== void 0 ? _ref26 : footerTokens.fontColorBase;
126
- footerTokens.bottomLinksDividerColor = (_ref27 = theme === null || theme === void 0 ? void 0 : (_theme$footer3 = theme.footer) === null || _theme$footer3 === void 0 ? void 0 : _theme$footer3.accentColor) !== null && _ref27 !== void 0 ? _ref27 : footerTokens.bottomLinksDividerColor;
127
- footerTokens.logo = (_ref28 = theme === null || theme === void 0 ? void 0 : (_theme$footer4 = theme.footer) === null || _theme$footer4 === void 0 ? void 0 : _theme$footer4.logo) !== null && _ref28 !== void 0 ? _ref28 : footerTokens.logo;
128
- var headerTokens = componentTokensCopy.header;
129
- headerTokens.backgroundColor = (_ref29 = theme === null || theme === void 0 ? void 0 : (_theme$header = theme.header) === null || _theme$header === void 0 ? void 0 : _theme$header.baseColor) !== null && _ref29 !== void 0 ? _ref29 : headerTokens.backgroundColor;
130
- headerTokens.underlinedColor = (_ref30 = theme === null || theme === void 0 ? void 0 : (_theme$header2 = theme.header) === null || _theme$header2 === void 0 ? void 0 : _theme$header2.accentColor) !== null && _ref30 !== void 0 ? _ref30 : headerTokens.underlinedColor;
131
- headerTokens.fontColorBase = (_ref31 = theme === null || theme === void 0 ? void 0 : (_theme$header3 = theme.header) === null || _theme$header3 === void 0 ? void 0 : _theme$header3.fontColor) !== null && _ref31 !== void 0 ? _ref31 : headerTokens.fontColorBase;
132
- headerTokens.menuBackgroundColor = (_ref32 = theme === null || theme === void 0 ? void 0 : (_theme$header4 = theme.header) === null || _theme$header4 === void 0 ? void 0 : _theme$header4.menuBaseColor) !== null && _ref32 !== void 0 ? _ref32 : headerTokens.menuBackgroundColor;
133
- headerTokens.hamburguerColor = (_ref33 = theme === null || theme === void 0 ? void 0 : (_theme$header5 = theme.header) === null || _theme$header5 === void 0 ? void 0 : _theme$header5.hamburguerColor) !== null && _ref33 !== void 0 ? _ref33 : headerTokens.hamburguerColor;
134
- headerTokens.hamburguerHoverColor = (_setOpacity14 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$header6 = theme.header) === null || _theme$header6 === void 0 ? void 0 : _theme$header6.hamburguerColor, 0.16)) !== null && _setOpacity14 !== void 0 ? _setOpacity14 : headerTokens.hamburguerHoverColor;
135
- headerTokens.logo = (_ref34 = theme === null || theme === void 0 ? void 0 : (_theme$header7 = theme.header) === null || _theme$header7 === void 0 ? void 0 : _theme$header7.logo) !== null && _ref34 !== void 0 ? _ref34 : headerTokens.logo;
136
- headerTokens.logoResponsive = (_ref35 = theme === null || theme === void 0 ? void 0 : (_theme$header8 = theme.header) === null || _theme$header8 === void 0 ? void 0 : _theme$header8.logoResponsive) !== null && _ref35 !== void 0 ? _ref35 : headerTokens.logoResponsive;
137
- var inputTokens = componentTokensCopy.inputText;
138
- inputTokens.selectedOptionBackgroundColor = (_setOpacity15 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$inputText = theme.inputText) === null || _theme$inputText === void 0 ? void 0 : _theme$inputText.selectedBaseColor, 0.34)) !== null && _setOpacity15 !== void 0 ? _setOpacity15 : inputTokens.selectedOptionBackgroundColor;
139
- var paginatorTokens = componentTokensCopy.paginator;
140
- paginatorTokens.backgroundColor = (_ref36 = theme === null || theme === void 0 ? void 0 : (_theme$paginator = theme.paginator) === null || _theme$paginator === void 0 ? void 0 : _theme$paginator.baseColor) !== null && _ref36 !== void 0 ? _ref36 : paginatorTokens.backgroundColor;
141
- paginatorTokens.fontColor = (_ref37 = theme === null || theme === void 0 ? void 0 : (_theme$paginator2 = theme.paginator) === null || _theme$paginator2 === void 0 ? void 0 : _theme$paginator2.fontColor) !== null && _ref37 !== void 0 ? _ref37 : paginatorTokens.fontColor;
142
- var progressBarTokens = componentTokensCopy.progressBar;
143
- progressBarTokens.trackLineColor = (_ref38 = theme === null || theme === void 0 ? void 0 : (_theme$progressBar = theme.progressBar) === null || _theme$progressBar === void 0 ? void 0 : _theme$progressBar.accentColor) !== null && _ref38 !== void 0 ? _ref38 : progressBarTokens.trackLineColor;
144
- progressBarTokens.totalLineColor = (_ref39 = theme === null || theme === void 0 ? void 0 : (_theme$progressBar2 = theme.progressBar) === null || _theme$progressBar2 === void 0 ? void 0 : _theme$progressBar2.baseColor) !== null && _ref39 !== void 0 ? _ref39 : progressBarTokens.totalLineColor;
145
- var radioTokens = componentTokensCopy.radio;
146
- radioTokens.color = (_ref40 = theme === null || theme === void 0 ? void 0 : (_theme$radio = theme.radio) === null || _theme$radio === void 0 ? void 0 : _theme$radio.baseColor) !== null && _ref40 !== void 0 ? _ref40 : radioTokens.color;
147
- radioTokens.disabledColor = (_setOpacity16 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$radio2 = theme.radio) === null || _theme$radio2 === void 0 ? void 0 : _theme$radio2.baseColor, 0.34)) !== null && _setOpacity16 !== void 0 ? _setOpacity16 : radioTokens.disabledColor;
148
- var selectTokens = componentTokensCopy.select;
149
- selectTokens.selectedOptionBackgroundColor = (_ref41 = theme === null || theme === void 0 ? void 0 : (_theme$select = theme.select) === null || _theme$select === void 0 ? void 0 : _theme$select.baseColor) !== null && _ref41 !== void 0 ? _ref41 : selectTokens.selectedOptionBackgroundColor;
150
- selectTokens.hoveredOptionBackgroundColor = (_setOpacity17 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$select2 = theme.select) === null || _theme$select2 === void 0 ? void 0 : _theme$select2.baseColor, 0.34)) !== null && _setOpacity17 !== void 0 ? _setOpacity17 : selectTokens.hoveredOptionBackgroundColor;
151
- selectTokens.disabledColor = (_setOpacity18 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$select3 = theme.select) === null || _theme$select3 === void 0 ? void 0 : _theme$select3.color, 0.34)) !== null && _setOpacity18 !== void 0 ? _setOpacity18 : selectTokens.disabledColor;
152
- var sideNavTokens = componentTokensCopy.sidenav;
153
- sideNavTokens.backgroundColor = (_ref42 = theme === null || theme === void 0 ? void 0 : (_theme$sidenav = theme.sidenav) === null || _theme$sidenav === void 0 ? void 0 : _theme$sidenav.baseColor) !== null && _ref42 !== void 0 ? _ref42 : sideNavTokens.backgroundColor;
154
- sideNavTokens.arrowContainerColor = (_setOpacity19 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$sidenav2 = theme.sidenav) === null || _theme$sidenav2 === void 0 ? void 0 : _theme$sidenav2.arrowBaseColor, 0.8)) !== null && _setOpacity19 !== void 0 ? _setOpacity19 : sideNavTokens.arrowContainerColor;
155
- sideNavTokens.arrowColor = (_ref43 = theme === null || theme === void 0 ? void 0 : (_theme$sidenav3 = theme.sidenav) === null || _theme$sidenav3 === void 0 ? void 0 : _theme$sidenav3.arrowAccentColor) !== null && _ref43 !== void 0 ? _ref43 : sideNavTokens.arrowColor;
156
- var sliderTokens = componentTokensCopy.slider;
157
- sliderTokens.thumbBackgroundColor = (_ref44 = theme === null || theme === void 0 ? void 0 : (_theme$slider = theme.slider) === null || _theme$slider === void 0 ? void 0 : _theme$slider.baseColor) !== null && _ref44 !== void 0 ? _ref44 : sliderTokens.thumbBackgroundColor;
158
- sliderTokens.dotsBackgroundColor = (_ref45 = theme === null || theme === void 0 ? void 0 : (_theme$slider2 = theme.slider) === null || _theme$slider2 === void 0 ? void 0 : _theme$slider2.baseColor) !== null && _ref45 !== void 0 ? _ref45 : sliderTokens.dotsBackgroundColor;
159
- sliderTokens.trackLineColor = (_ref46 = theme === null || theme === void 0 ? void 0 : (_theme$slider3 = theme.slider) === null || _theme$slider3 === void 0 ? void 0 : _theme$slider3.baseColor) !== null && _ref46 !== void 0 ? _ref46 : sliderTokens.trackLineColor;
160
- sliderTokens.totalLineColor = (_setOpacity20 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider4 = theme.slider) === null || _theme$slider4 === void 0 ? void 0 : _theme$slider4.baseColor, 0.34)) !== null && _setOpacity20 !== void 0 ? _setOpacity20 : sliderTokens.totalLineColor;
161
- sliderTokens.disabledThumbBackgroundColor = (_setOpacity21 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider5 = theme.slider) === null || _theme$slider5 === void 0 ? void 0 : _theme$slider5.baseColor, 0.34)) !== null && _setOpacity21 !== void 0 ? _setOpacity21 : sliderTokens.disabledThumbBackgroundColor;
162
- sliderTokens.disabledDotsBackgroundColor = (_setOpacity22 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider6 = theme.slider) === null || _theme$slider6 === void 0 ? void 0 : _theme$slider6.baseColor, 0.34)) !== null && _setOpacity22 !== void 0 ? _setOpacity22 : sliderTokens.disabledDotsBackgroundColor;
163
- sliderTokens.disabledTrackLineColor = (_setOpacity23 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider7 = theme.slider) === null || _theme$slider7 === void 0 ? void 0 : _theme$slider7.baseColor, 0.34)) !== null && _setOpacity23 !== void 0 ? _setOpacity23 : sliderTokens.disabledTrackLineColor;
164
- var spinnerTokens = componentTokensCopy.spinner;
165
- spinnerTokens.trackCircleColor = (_ref47 = theme === null || theme === void 0 ? void 0 : (_theme$spinner = theme.spinner) === null || _theme$spinner === void 0 ? void 0 : _theme$spinner.accentColor) !== null && _ref47 !== void 0 ? _ref47 : spinnerTokens.trackCircleColor;
166
- spinnerTokens.totalCircleColor = (_ref48 = theme === null || theme === void 0 ? void 0 : (_theme$spinner2 = theme.spinner) === null || _theme$spinner2 === void 0 ? void 0 : _theme$spinner2.baseColor) !== null && _ref48 !== void 0 ? _ref48 : spinnerTokens.totalCircleColor;
167
- var switchTokens = componentTokensCopy["switch"];
168
- switchTokens.checkedTrackBackgroundColor = (_ref49 = theme === null || theme === void 0 ? void 0 : (_theme$switch = theme["switch"]) === null || _theme$switch === void 0 ? void 0 : _theme$switch.checkedBaseColor) !== null && _ref49 !== void 0 ? _ref49 : switchTokens.checkedTrackBackgroundColor;
169
- switchTokens.disabledCheckedTrackBackgroundColor = (_setOpacity24 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$switch2 = theme["switch"]) === null || _theme$switch2 === void 0 ? void 0 : _theme$switch2.checkedBaseColor, 0.34)) !== null && _setOpacity24 !== void 0 ? _setOpacity24 : switchTokens.disabledCheckedTrackBackgroundColor;
170
- var tableTokens = componentTokensCopy.table;
171
- tableTokens.headerBackgroundColor = (_ref50 = theme === null || theme === void 0 ? void 0 : (_theme$table = theme.table) === null || _theme$table === void 0 ? void 0 : _theme$table.baseColor) !== null && _ref50 !== void 0 ? _ref50 : tableTokens.headerBackgroundColor;
172
- tableTokens.headerFontColor = (_ref51 = theme === null || theme === void 0 ? void 0 : (_theme$table2 = theme.table) === null || _theme$table2 === void 0 ? void 0 : _theme$table2.fontColor) !== null && _ref51 !== void 0 ? _ref51 : tableTokens.headerFontColor;
173
- var tabsTokens = componentTokensCopy.tabs;
174
- tabsTokens.selectedFontColor = (_ref52 = theme === null || theme === void 0 ? void 0 : (_theme$tabs = theme.tabs) === null || _theme$tabs === void 0 ? void 0 : _theme$tabs.baseColor) !== null && _ref52 !== void 0 ? _ref52 : tabsTokens.selectedFontColor;
175
- tabsTokens.selectedIconColor = (_ref53 = theme === null || theme === void 0 ? void 0 : (_theme$tabs2 = theme.tabs) === null || _theme$tabs2 === void 0 ? void 0 : _theme$tabs2.baseColor) !== null && _ref53 !== void 0 ? _ref53 : tabsTokens.selectedIconColor;
176
- tabsTokens.selectedUnderlineColor = (_ref54 = theme === null || theme === void 0 ? void 0 : (_theme$tabs3 = theme.tabs) === null || _theme$tabs3 === void 0 ? void 0 : _theme$tabs3.baseColor) !== null && _ref54 !== void 0 ? _ref54 : tabsTokens.selectedUnderlineColor;
177
- tabsTokens.focusOutline = (_ref55 = theme === null || theme === void 0 ? void 0 : (_theme$tabs4 = theme.tabs) === null || _theme$tabs4 === void 0 ? void 0 : _theme$tabs4.baseColor) !== null && _ref55 !== void 0 ? _ref55 : tabsTokens.focusOutline;
178
- tabsTokens.hoverBackgroundColor = (_setLightness3 = setLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs5 = theme.tabs) === null || _theme$tabs5 === void 0 ? void 0 : _theme$tabs5.baseColor, 58)) !== null && _setLightness3 !== void 0 ? _setLightness3 : tabsTokens.hoverBackgroundColor;
179
- tabsTokens.pressedBackgroundColor = (_setLightness4 = setLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs6 = theme.tabs) === null || _theme$tabs6 === void 0 ? void 0 : _theme$tabs6.baseColor, 53)) !== null && _setLightness4 !== void 0 ? _setLightness4 : tabsTokens.pressedBackgroundColor;
180
- var toggleGroupTokens = componentTokensCopy.toggleGroup;
181
- toggleGroupTokens.unselectedBackgroundColor = (_ref56 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup = theme.toggleGroup) === null || _theme$toggleGroup === void 0 ? void 0 : _theme$toggleGroup.unselectedBaseColor) !== null && _ref56 !== void 0 ? _ref56 : toggleGroupTokens.unselectedBackgroundColor;
182
- toggleGroupTokens.unselectedBackgroundHoverColor = (_ref57 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup2 = theme.toggleGroup) === null || _theme$toggleGroup2 === void 0 ? void 0 : _theme$toggleGroup2.unselectedHoverBaseColor) !== null && _ref57 !== void 0 ? _ref57 : toggleGroupTokens.unselectedBackgroundHoverColor;
183
- toggleGroupTokens.unselectedFontColor = (_ref58 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup3 = theme.toggleGroup) === null || _theme$toggleGroup3 === void 0 ? void 0 : _theme$toggleGroup3.unselectedFontColor) !== null && _ref58 !== void 0 ? _ref58 : toggleGroupTokens.unselectedFontColor;
184
- toggleGroupTokens.unselectedHoverFontColor = (_ref59 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup4 = theme.toggleGroup) === null || _theme$toggleGroup4 === void 0 ? void 0 : _theme$toggleGroup4.unselectedHoverFontColor) !== null && _ref59 !== void 0 ? _ref59 : toggleGroupTokens.unselectedHoverFontColor;
185
- toggleGroupTokens.selectedBackgroundColor = (_ref60 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup5 = theme.toggleGroup) === null || _theme$toggleGroup5 === void 0 ? void 0 : _theme$toggleGroup5.selectedBaseColor) !== null && _ref60 !== void 0 ? _ref60 : toggleGroupTokens.selectedBackgroundColor;
186
- toggleGroupTokens.selectedBackgroundHoverColor = (_ref61 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup6 = theme.toggleGroup) === null || _theme$toggleGroup6 === void 0 ? void 0 : _theme$toggleGroup6.selectedHoverBaseColor) !== null && _ref61 !== void 0 ? _ref61 : toggleGroupTokens.selectedBackgroundHoverColor;
187
- toggleGroupTokens.selectedFontColor = (_ref62 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup7 = theme.toggleGroup) === null || _theme$toggleGroup7 === void 0 ? void 0 : _theme$toggleGroup7.selectedFontColor) !== null && _ref62 !== void 0 ? _ref62 : toggleGroupTokens.selectedFontColor;
188
- toggleGroupTokens.selectedHoverFontColor = (_ref63 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup8 = theme.toggleGroup) === null || _theme$toggleGroup8 === void 0 ? void 0 : _theme$toggleGroup8.selectedHoverFontColor) !== null && _ref63 !== void 0 ? _ref63 : toggleGroupTokens.selectedHoverFontColor;
189
- toggleGroupTokens.disabledSelectedBackgroundColor = (_setOpacity25 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup9 = theme.toggleGroup) === null || _theme$toggleGroup9 === void 0 ? void 0 : _theme$toggleGroup9.selectedBaseColor, 0.34)) !== null && _setOpacity25 !== void 0 ? _setOpacity25 : toggleGroupTokens.disabledSelectedBackgroundColor;
190
- toggleGroupTokens.disabledUnselectedBackgroundColor = (_setOpacity26 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup10 = theme.toggleGroup) === null || _theme$toggleGroup10 === void 0 ? void 0 : _theme$toggleGroup10.unselectedBaseColor, 0.34)) !== null && _setOpacity26 !== void 0 ? _setOpacity26 : toggleGroupTokens.disabledUnselectedBackgroundColor;
191
- toggleGroupTokens.disabledUnselectedFontColor = (_setOpacity27 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup11 = theme.toggleGroup) === null || _theme$toggleGroup11 === void 0 ? void 0 : _theme$toggleGroup11.unselectedFontColor, 0.34)) !== null && _setOpacity27 !== void 0 ? _setOpacity27 : toggleGroupTokens.disabledUnselectedFontColor;
192
- toggleGroupTokens.disabledSelectedFontColor = (_setOpacity28 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup12 = theme.toggleGroup) === null || _theme$toggleGroup12 === void 0 ? void 0 : _theme$toggleGroup12.selectedFontColor, 0.34)) !== null && _setOpacity28 !== void 0 ? _setOpacity28 : toggleGroupTokens.disabledSelectedFontColor;
193
- var wizardTokens = componentTokensCopy.wizard;
194
- wizardTokens.stepContainerSelectedBackgroundColor = (_ref64 = theme === null || theme === void 0 ? void 0 : (_theme$wizard = theme.wizard) === null || _theme$wizard === void 0 ? void 0 : _theme$wizard.baseColor) !== null && _ref64 !== void 0 ? _ref64 : wizardTokens.stepContainerSelectedBackgroundColor;
195
- wizardTokens.stepContainerSelectedFontColor = (_ref65 = theme === null || theme === void 0 ? void 0 : (_theme$wizard2 = theme.wizard) === null || _theme$wizard2 === void 0 ? void 0 : _theme$wizard2.fontColor) !== null && _ref65 !== void 0 ? _ref65 : wizardTokens.stepContainerSelectedFontColor;
196
- return componentTokensCopy;
197
- };
198
-
199
- var ThemeProvider = function ThemeProvider(_ref66) {
200
- var theme = _ref66.theme,
201
- advancedTheme = _ref66.advancedTheme,
202
- children = _ref66.children;
203
- var parsedTheme = (0, _react.useMemo)(function () {
204
- return theme && parseTheme(theme) || advancedTheme && parseAdvancedTheme(advancedTheme);
205
- }, [theme, advancedTheme]);
206
- return _react["default"].createElement(Halstack, null, _react["default"].createElement(ThemeContext.Provider, {
207
- value: parsedTheme
208
- }, children));
209
- };
210
-
211
- exports.ThemeProvider = ThemeProvider;
212
-
213
- var Halstack = _styledComponents["default"].div(_templateObject());
214
-
215
- var _default = ThemeContext;
216
- exports["default"] = _default;
@@ -1,207 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Accordion = _interopRequireDefault(require("./Accordion"));
18
-
19
- var _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
20
-
21
- var onChange = (0, _addonActions.action)("onChange");
22
-
23
- onChange.toString = function () {
24
- return "onChangeHandler";
25
- };
26
-
27
- (0, _react2.storiesOf)("Form Components|Accordion", module).add("Types", function () {
28
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", {
29
- style: {
30
- marginBottom: "50px"
31
- }
32
- }, _react["default"].createElement(_Accordion["default"], {
33
- label: "First accordion",
34
- onChange: onChange
35
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
36
- theme: "light",
37
- disabled: true,
38
- label: "Second accordion",
39
- onChange: onChange
40
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
41
- label: "Third accordion",
42
- onChange: onChange,
43
- assistiveText: "Extra information"
44
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
45
- theme: "light",
46
- label: "Fourth accordion",
47
- assistiveText: "Extra information",
48
- iconPosition: "before",
49
- iconSrc: _run_icon_black["default"],
50
- onChange: onChange
51
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
52
- theme: "light",
53
- label: "Fifth accordion",
54
- assistiveText: "Extra information",
55
- iconPosition: "after",
56
- iconSrc: _run_icon_black["default"],
57
- onChange: onChange
58
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
59
- style: {
60
- marginBottom: "50px"
61
- }
62
- }, _react["default"].createElement(_Accordion["default"], {
63
- theme: "light",
64
- mode: "alternative",
65
- label: "First accordion",
66
- onChange: onChange
67
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
68
- theme: "light",
69
- mode: "alternative",
70
- disabled: true,
71
- label: "Second accordion",
72
- onChange: onChange
73
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
74
- theme: "light",
75
- mode: "alternative",
76
- label: "Third accordion",
77
- assistiveText: "Extra information",
78
- onChange: onChange
79
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
80
- theme: "light",
81
- mode: "alternative",
82
- label: "Fourth accordion",
83
- assistiveText: "Extra information",
84
- iconPosition: "before",
85
- iconSrc: _run_icon_black["default"],
86
- onChange: onChange
87
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
88
- theme: "light",
89
- mode: "alternative",
90
- label: "Fifth accordion",
91
- assistiveText: "Extra information",
92
- iconPosition: "after",
93
- iconSrc: _run_icon_black["default"],
94
- onChange: onChange
95
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", null, _react["default"].createElement("div", {
96
- style: {
97
- background: "black",
98
- paddingTop: "50px",
99
- paddingBottom: "50px"
100
- }
101
- }, _react["default"].createElement(_Accordion["default"], {
102
- label: "First accordion",
103
- onChange: onChange
104
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
105
- theme: "dark",
106
- disabled: true,
107
- label: "Second accordion",
108
- onChange: onChange
109
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
110
- theme: "dark",
111
- label: "Third accordion",
112
- onChange: onChange,
113
- assistiveText: "Extra information"
114
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
115
- theme: "dark",
116
- label: "Fourth accordion",
117
- assistiveText: "Extra information",
118
- iconPosition: "before",
119
- iconSrc: _run_icon_black["default"],
120
- onChange: onChange
121
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
122
- theme: "dark",
123
- label: "Fifth accordion",
124
- assistiveText: "Extra information",
125
- iconPosition: "after",
126
- iconSrc: _run_icon_black["default"],
127
- onChange: onChange
128
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
129
- style: {
130
- background: "black",
131
- paddingBottom: "50px"
132
- }
133
- }, _react["default"].createElement(_Accordion["default"], {
134
- theme: "dark",
135
- mode: "alternative",
136
- label: "First accordion",
137
- onChange: onChange
138
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
139
- theme: "dark",
140
- mode: "alternative",
141
- disabled: true,
142
- label: "Second accordion",
143
- onChange: onChange
144
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
145
- theme: "dark",
146
- mode: "alternative",
147
- label: "Third accordion",
148
- assistiveText: "Extra information",
149
- onChange: onChange
150
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
151
- theme: "dark",
152
- mode: "alternative",
153
- label: "Fourth accordion",
154
- assistiveText: "Extra information",
155
- iconPosition: "before",
156
- iconSrc: _run_icon_black["default"],
157
- onChange: onChange
158
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
159
- theme: "dark",
160
- mode: "alternative",
161
- label: "Fifth accordion",
162
- assistiveText: "Extra information",
163
- iconPosition: "after",
164
- iconSrc: _run_icon_black["default"],
165
- onChange: onChange
166
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))));
167
- }, {
168
- notes: {
169
- markdown: _readme["default"]
170
- }
171
- });
172
-
173
- var knobProps = function knobProps() {
174
- return {
175
- mode: (0, _addonKnobs.select)("mode", {
176
- "default": "default",
177
- alternative: "alternative"
178
- }, "default"),
179
- label: (0, _addonKnobs.text)("label", "Test Accordion"),
180
- assistiveText: (0, _addonKnobs.text)("assistive text", "Extra information"),
181
- theme: (0, _addonKnobs.select)("theme", {
182
- light: "light",
183
- dark: "dark"
184
- }, "light"),
185
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
186
- iconPosition: (0, _addonKnobs.select)("icon position", {
187
- before: "before",
188
- after: "after"
189
- }, "before")
190
- };
191
- };
192
-
193
- (0, _react2.storiesOf)("Form Components|Accordion", module).add("Knobs example", function () {
194
- var props = knobProps();
195
- return _react["default"].createElement("div", {
196
- style: {
197
- background: props.theme === "dark" && "black" || "transparent"
198
- }
199
- }, _react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, props, {
200
- onChange: onChange,
201
- iconSrc: _run_icon_black["default"]
202
- }), _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
203
- }, {
204
- notes: {
205
- markdown: _readme["default"]
206
- }
207
- });
@@ -1,96 +0,0 @@
1
- # DXC Accordion Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcAccordion } from "@dxc-technology/halstack-react";
7
-
8
- <DxcAccordion onChange={handleOnChange} label="Test Accordion" />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>mode: 'default'|'alternative'</td>
21
- <td><code>'default'</code></td>
22
- <td>Mode for the color of the accordion.</td>
23
- </tr>
24
- <tr>
25
- <td>label: string</td>
26
- <td></td>
27
- <td>The panel label.</td>
28
- </tr>
29
- <tr>
30
- <td>iconSrc: string</td>
31
- <td></td>
32
- <td>URL of the icon that will be placed next to panel label.</td>
33
- </tr>
34
- <tr>
35
- <td>iconPosition: 'before' | 'after'</td>
36
- <td><code>'before'</code></td>
37
- <td>Whether the icon should appear after or before the label.</td>
38
- </tr>
39
- <tr>
40
- <td>assistiveText: string</td>
41
- <td></td>
42
- <td>Assistive text to be placed on the right side of the panel.</td>
43
- </tr>
44
- <tr>
45
- <td>disabled: boolean</td>
46
- <td><code>false</code></td>
47
- <td>If true, the component will be disabled.</td>
48
- </tr>
49
- <tr>
50
- <td>onChange: function</td>
51
- <td></td>
52
- <td>This function will be called when the user clicks the icon to open/close the panel. The state of the panel(opened/closed) should be passed as a parameter.</td>
53
- </tr>
54
- <tr>
55
- <td>theme: 'light' |'dark'</td>
56
- <td><code>'light'</code></td>
57
- <td>Uses one of the available button modes.</td>
58
- </tr>
59
-
60
- </table>
61
-
62
- ## Examples
63
-
64
- - Basic accordion - Light theme - Enabled - With assistive text - Icon after label
65
-
66
- ```js
67
- import React from "react";
68
-
69
- import { DxcAccordion } from "@dxc-technology/halstack-react";
70
-
71
- function App() {
72
- const handleOnChange = event => {
73
- console.log("Accordion clicked");
74
- };
75
-
76
- return (
77
- <div>
78
- <Accordion
79
- theme="light"
80
- label="Fifth accordion"
81
- assistiveText="Extra information"
82
- iconPosition="after"
83
- iconSrc={logo}
84
- onChange={onChange}
85
- >
86
- <div>
87
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
88
- lobortis eget.
89
- </div>
90
- </Accordion>
91
- </div>
92
- );
93
- }
94
-
95
- export default App;
96
- ```