@dxc-technology/halstack-react 0.0.0-27afd3d → 0.0.0-283b4b6

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 (268) hide show
  1. package/BackgroundColorContext.js +46 -0
  2. package/ThemeContext.js +250 -0
  3. package/V3Select/V3Select.js +549 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +264 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +131 -46
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +34 -4
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +403 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +63 -0
  14. package/{dist/box → box}/Box.js +29 -18
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.js +238 -0
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +72 -35
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +98 -28
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +92 -32
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/common/utils.js +22 -0
  38. package/common/variables.js +1574 -0
  39. package/{dist/date → date}/Date.js +65 -38
  40. package/date/index.d.ts +27 -0
  41. package/date-input/DateInput.js +400 -0
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +54 -31
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +173 -75
  46. package/dropdown/index.d.ts +26 -0
  47. package/file-input/FileInput.js +644 -0
  48. package/file-input/FileItem.js +287 -0
  49. package/file-input/index.d.ts +81 -0
  50. package/{dist/footer → footer}/Footer.js +89 -34
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +190 -88
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/{dist/heading → heading}/Heading.js +93 -16
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +247 -101
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +15 -18
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +84 -34
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +72 -16
  67. package/number-input/NumberInput.js +136 -0
  68. package/number-input/NumberInputContext.js +16 -0
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +25 -19
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +102 -44
  73. package/paginator/index.d.ts +20 -0
  74. package/password-input/PasswordInput.js +203 -0
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +91 -33
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +30 -11
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +79 -48
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1137 -0
  83. package/select/index.d.ts +131 -0
  84. package/{dist/sidenav → sidenav}/Sidenav.js +64 -8
  85. package/sidenav/index.d.ts +13 -0
  86. package/slider/Slider.js +404 -0
  87. package/slider/index.d.ts +29 -0
  88. package/spinner/Spinner.js +381 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +51 -19
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +48 -18
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +58 -17
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +68 -35
  97. package/tag/index.d.ts +24 -0
  98. package/text-input/TextInput.js +974 -0
  99. package/text-input/index.d.ts +135 -0
  100. package/textarea/Textarea.js +369 -0
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +16 -19
  103. package/toggle/index.d.ts +21 -0
  104. package/toggle-group/ToggleGroup.js +327 -0
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +13 -8
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +32 -19
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +84 -34
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/upload/file-upload/FileToUpload.js +189 -0
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +16 -16
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/upload/transaction/Transaction.js +148 -0
  117. package/{dist/upload → upload}/transactions/Transactions.js +38 -20
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +126 -47
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/ThemeContext.js +0 -187
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  128. package/dist/accordion-group/readme.md +0 -70
  129. package/dist/alert/Alert.js +0 -303
  130. package/dist/alert/Alert.stories.js +0 -158
  131. package/dist/alert/close.svg +0 -4
  132. package/dist/alert/error.svg +0 -4
  133. package/dist/alert/info.svg +0 -4
  134. package/dist/alert/readme.md +0 -43
  135. package/dist/alert/success.svg +0 -4
  136. package/dist/alert/warning.svg +0 -4
  137. package/dist/badge/Badge.js +0 -42
  138. package/dist/button/Button.js +0 -199
  139. package/dist/button/Button.stories.js +0 -224
  140. package/dist/button/readme.md +0 -93
  141. package/dist/checkbox/Checkbox.stories.js +0 -144
  142. package/dist/checkbox/readme.md +0 -116
  143. package/dist/common/services/example-service.js +0 -10
  144. package/dist/common/services/example-service.test.js +0 -12
  145. package/dist/common/utils.js +0 -42
  146. package/dist/common/variables.js +0 -346
  147. package/dist/date/Date.stories.js +0 -205
  148. package/dist/date/calendar.svg +0 -1
  149. package/dist/date/calendar_dark.svg +0 -1
  150. package/dist/date/readme.md +0 -73
  151. package/dist/dialog/Dialog.stories.js +0 -217
  152. package/dist/dialog/readme.md +0 -32
  153. package/dist/dropdown/Dropdown.stories.js +0 -249
  154. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  155. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  156. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  157. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  158. package/dist/dropdown/readme.md +0 -69
  159. package/dist/footer/Footer.stories.js +0 -94
  160. package/dist/footer/dxc_logo_wht.png +0 -0
  161. package/dist/footer/readme.md +0 -41
  162. package/dist/header/Header.stories.js +0 -176
  163. package/dist/header/close_icon.svg +0 -1
  164. package/dist/header/dxc_logo_black.png +0 -0
  165. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  166. package/dist/header/dxc_logo_white.png +0 -0
  167. package/dist/header/hamb_menu_black.svg +0 -1
  168. package/dist/header/hamb_menu_white.svg +0 -1
  169. package/dist/header/readme.md +0 -33
  170. package/dist/input-text/InputText.stories.js +0 -209
  171. package/dist/input-text/error.svg +0 -1
  172. package/dist/input-text/readme.md +0 -91
  173. package/dist/layout/facebook.svg +0 -45
  174. package/dist/layout/linkedin.svg +0 -50
  175. package/dist/layout/twitter.svg +0 -53
  176. package/dist/link/readme.md +0 -51
  177. package/dist/paginator/images/next.svg +0 -3
  178. package/dist/paginator/images/nextPage.svg +0 -3
  179. package/dist/paginator/images/previous.svg +0 -3
  180. package/dist/paginator/images/previousPage.svg +0 -3
  181. package/dist/paginator/readme.md +0 -50
  182. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  183. package/dist/progress-bar/readme.md +0 -63
  184. package/dist/radio/Radio.stories.js +0 -166
  185. package/dist/radio/readme.md +0 -70
  186. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  187. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  188. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  189. package/dist/select/Select.js +0 -472
  190. package/dist/select/Select.stories.js +0 -235
  191. package/dist/select/readme.md +0 -72
  192. package/dist/slider/Slider.js +0 -257
  193. package/dist/slider/Slider.stories.js +0 -241
  194. package/dist/slider/readme.md +0 -64
  195. package/dist/spinner/Spinner.js +0 -190
  196. package/dist/spinner/Spinner.stories.js +0 -183
  197. package/dist/spinner/readme.md +0 -65
  198. package/dist/switch/Switch.stories.js +0 -134
  199. package/dist/switch/readme.md +0 -133
  200. package/dist/tabs/Tabs.stories.js +0 -130
  201. package/dist/tabs/readme.md +0 -78
  202. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  203. package/dist/tabs-for-sections/readme.md +0 -78
  204. package/dist/textarea/Textarea.js +0 -220
  205. package/dist/toggle/Toggle.stories.js +0 -297
  206. package/dist/toggle/readme.md +0 -80
  207. package/dist/toggle-group/ToggleGroup.js +0 -221
  208. package/dist/toggle-group/readme.md +0 -82
  209. package/dist/upload/Upload.stories.js +0 -72
  210. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  211. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  212. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  213. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  214. package/dist/upload/file-upload/FileToUpload.js +0 -158
  215. package/dist/upload/file-upload/audio-icon.svg +0 -4
  216. package/dist/upload/file-upload/close.svg +0 -4
  217. package/dist/upload/file-upload/file-icon.svg +0 -4
  218. package/dist/upload/file-upload/video-icon.svg +0 -4
  219. package/dist/upload/readme.md +0 -37
  220. package/dist/upload/transaction/Transaction.js +0 -155
  221. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  222. package/dist/upload/transaction/audio-icon.svg +0 -4
  223. package/dist/upload/transaction/error-icon.svg +0 -4
  224. package/dist/upload/transaction/file-icon-err.svg +0 -4
  225. package/dist/upload/transaction/file-icon.svg +0 -4
  226. package/dist/upload/transaction/image-icon-err.svg +0 -4
  227. package/dist/upload/transaction/image-icon.svg +0 -4
  228. package/dist/upload/transaction/success-icon.svg +0 -4
  229. package/dist/upload/transaction/video-icon-err.svg +0 -4
  230. package/dist/upload/transaction/video-icon.svg +0 -4
  231. package/dist/wizard/invalid_icon.svg +0 -6
  232. package/dist/wizard/valid_icon.svg +0 -6
  233. package/dist/wizard/validation-wrong.svg +0 -6
  234. package/test/Accordion.test.js +0 -33
  235. package/test/AccordionGroup.test.js +0 -109
  236. package/test/Alert.test.js +0 -53
  237. package/test/Box.test.js +0 -10
  238. package/test/Button.test.js +0 -18
  239. package/test/Card.test.js +0 -30
  240. package/test/Checkbox.test.js +0 -45
  241. package/test/Chip.test.js +0 -25
  242. package/test/Date.test.js +0 -393
  243. package/test/Dialog.test.js +0 -23
  244. package/test/Dropdown.test.js +0 -130
  245. package/test/Footer.test.js +0 -99
  246. package/test/Header.test.js +0 -39
  247. package/test/Heading.test.js +0 -35
  248. package/test/InputText.test.js +0 -240
  249. package/test/Link.test.js +0 -42
  250. package/test/Paginator.test.js +0 -177
  251. package/test/ProgressBar.test.js +0 -35
  252. package/test/Radio.test.js +0 -37
  253. package/test/ResultsetTable.test.js +0 -330
  254. package/test/Select.test.js +0 -192
  255. package/test/Sidenav.test.js +0 -45
  256. package/test/Slider.test.js +0 -82
  257. package/test/Spinner.test.js +0 -27
  258. package/test/Switch.test.js +0 -45
  259. package/test/Table.test.js +0 -36
  260. package/test/Tabs.test.js +0 -109
  261. package/test/TabsForSections.test.js +0 -34
  262. package/test/Tag.test.js +0 -32
  263. package/test/TextArea.test.js +0 -52
  264. package/test/ToggleGroup.test.js +0 -81
  265. package/test/Upload.test.js +0 -60
  266. package/test/Wizard.test.js +0 -130
  267. package/test/mocks/pngMock.js +0 -1
  268. package/test/mocks/svgMock.js +0 -1
@@ -1,187 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.ThemeProvider = exports["default"] = void 0;
11
-
12
- var _react = _interopRequireWildcard(require("react"));
13
-
14
- var _color = _interopRequireDefault(require("color"));
15
-
16
- var _rgbHex = _interopRequireDefault(require("rgb-hex"));
17
-
18
- var _variables = require("./common/variables.js");
19
-
20
- /* eslint-disable prefer-template */
21
- var ThemeContext = _react["default"].createContext();
22
-
23
- var addLightness = function addLightness(hexColor, increaseLightness) {
24
- if (hexColor) {
25
- var color = (0, _color["default"])(hexColor);
26
- var hslColor = color.hsl();
27
- var lightnessColor = hslColor.color[2];
28
- return hslColor.lightness(lightnessColor + increaseLightness).hex();
29
- }
30
-
31
- return null;
32
- };
33
-
34
- var addOpacity = function addOpacity(hexColor, increaseOpacity) {
35
- if (hexColor) {
36
- var color = (0, _color["default"])(hexColor);
37
- return "#" + (0, _rgbHex["default"])(color.color[0], color.color[1], color.color[2], increaseOpacity);
38
- }
39
-
40
- return null;
41
- };
42
-
43
- var parseTheme = function parseTheme(theme) {
44
- var _ref, _theme$accordion, _ref2, _theme$accordion2, _addLightness, _theme$accordion3, _addLightness2, _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, _addOpacity, _theme$button12, _addOpacity2, _theme$button13, _addOpacity3, _theme$button14, _addOpacity4, _theme$button15, _addOpacity5, _theme$button16, _ref15, _theme$checkbox, _ref16, _theme$checkbox2, _ref17, _theme$checkbox3, _addOpacity6, _theme$checkbox4, _addOpacity7, _theme$checkbox5, _addOpacity8, _theme$checkbox6, _ref18, _theme$chip, _addOpacity9, _theme$chip2, _ref19, _theme$chip3, _ref20, _theme$chip4, _addOpacity10, _theme$chip5, _ref21, _theme$date, _ref22, _theme$date2, _addOpacity11, _theme$date3, _ref23, _theme$dropdown, _ref24, _theme$dropdown2, _addOpacity12, _theme$dropdown3, _addOpacity13, _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, _addOpacity14, _theme$header6, _ref34, _theme$header7, _ref35, _theme$header8, _addOpacity15, _theme$inputText, _ref36, _theme$paginator, _ref37, _theme$paginator2, _ref38, _theme$progressBar, _ref39, _theme$progressBar2, _ref40, _theme$progressBar3, _addOpacity16, _theme$progressBar4, _ref41, _theme$radio, _ref42, _theme$radio2, _ref43, _theme$radio3, _addOpacity17, _theme$radio4, _addOpacity18, _theme$radio5, _ref44, _theme$select, _ref45, _theme$select2, _ref46, _theme$select3, _ref47, _theme$select4, _ref48, _theme$select5, _ref49, _theme$select6, _addOpacity19, _theme$select7, _addOpacity20, _theme$select8, _ref50, _theme$sidenav, _addOpacity21, _theme$sideNav, _ref51, _theme$sidenav2, _ref52, _theme$slider, _addOpacity22, _theme$slider2, _addOpacity23, _theme$slider3, _addOpacity24, _theme$slider4, _ref53, _theme$spinner, _ref54, _theme$spinner2, _ref55, _theme$switch, _addOpacity25, _theme$switch2, _addOpacity26, _theme$switch3, _addOpacity27, _theme$switch4, _ref56, _theme$table, _ref57, _theme$table2, _ref58, _theme$tabs, _ref59, _theme$tabs2, _ref60, _theme$tabs3, _ref61, _theme$tabs4, _addLightness3, _theme$tabs5, _addLightness4, _theme$tabs6, _ref62, _theme$toggleGroup, _ref63, _theme$toggleGroup2, _ref64, _theme$toggleGroup3, _ref65, _theme$toggleGroup4, _ref66, _theme$toggleGroup5, _ref67, _theme$toggleGroup6, _ref68, _theme$toggleGroup7, _ref69, _theme$toggleGroup8, _addOpacity28, _theme$toggleGroup9, _addOpacity29, _theme$toggleGroup10, _ref70, _theme$wizard, _ref71, _theme$wizard2;
45
-
46
- var accordionTokens = _variables.componentTokens.accordion;
47
- accordionTokens.fontColor = (_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.fontColor;
48
- accordionTokens.arrowColor = (_ref2 = theme === null || theme === void 0 ? void 0 : (_theme$accordion2 = theme.accordion) === null || _theme$accordion2 === void 0 ? void 0 : _theme$accordion2.arrowColor) !== null && _ref2 !== void 0 ? _ref2 : accordionTokens.arrowColor;
49
- accordionTokens.hoverBackgroundColor = (_addLightness = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$accordion3 = theme.accordion) === null || _theme$accordion3 === void 0 ? void 0 : _theme$accordion3.arrowColor, 53)) !== null && _addLightness !== void 0 ? _addLightness : accordionTokens.hoverBackgroundColor;
50
- accordionTokens.disabledFontColor = (_addLightness2 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$accordion4 = theme.accordion) === null || _theme$accordion4 === void 0 ? void 0 : _theme$accordion4.fontColor, 35)) !== null && _addLightness2 !== void 0 ? _addLightness2 : accordionTokens.disabledFontColor;
51
- accordionTokens.focusOutline = (_ref3 = theme === null || theme === void 0 ? void 0 : (_theme$accordion5 = theme.accordion) === null || _theme$accordion5 === void 0 ? void 0 : _theme$accordion5.arrowColor) !== null && _ref3 !== void 0 ? _ref3 : accordionTokens.arrowColor;
52
- var buttonTokens = _variables.componentTokens.button;
53
- buttonTokens.primaryBackgroundColor = (_ref4 = theme === null || theme === void 0 ? void 0 : (_theme$button = theme.button) === null || _theme$button === void 0 ? void 0 : _theme$button.color) !== null && _ref4 !== void 0 ? _ref4 : buttonTokens.primaryBackgroundColor;
54
- buttonTokens.secondaryOutlinedColor = (_ref5 = theme === null || theme === void 0 ? void 0 : (_theme$button2 = theme.button) === null || _theme$button2 === void 0 ? void 0 : _theme$button2.color) !== null && _ref5 !== void 0 ? _ref5 : buttonTokens.secondaryOutlinedColor;
55
- buttonTokens.primaryHoverBackgroundColor = (_ref6 = theme === null || theme === void 0 ? void 0 : (_theme$button3 = theme.button) === null || _theme$button3 === void 0 ? void 0 : _theme$button3.hoverColor) !== null && _ref6 !== void 0 ? _ref6 : buttonTokens.primaryHoverBackgroundColor;
56
- buttonTokens.hoverOutlinedColor = (_ref7 = theme === null || theme === void 0 ? void 0 : (_theme$button4 = theme.button) === null || _theme$button4 === void 0 ? void 0 : _theme$button4.hoverColor) !== null && _ref7 !== void 0 ? _ref7 : buttonTokens.hoverOutlinedColor;
57
- buttonTokens.textHoverBackgroundColor = (_ref8 = theme === null || theme === void 0 ? void 0 : (_theme$button5 = theme.button) === null || _theme$button5 === void 0 ? void 0 : _theme$button5.hoverColor) !== null && _ref8 !== void 0 ? _ref8 : buttonTokens.textHoverBackgroundColor;
58
- 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;
59
- 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;
60
- 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;
61
- 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;
62
- 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;
63
- 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;
64
- buttonTokens.disabledPrimaryBackgroundColor = (_addOpacity = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button12 = theme.button) === null || _theme$button12 === void 0 ? void 0 : _theme$button12.color, 0.34)) !== null && _addOpacity !== void 0 ? _addOpacity : buttonTokens.disabledPrimaryBackgroundColor;
65
- buttonTokens.disabledSecondaryOutlinedColor = (_addOpacity2 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button13 = theme.button) === null || _theme$button13 === void 0 ? void 0 : _theme$button13.color, 0.34)) !== null && _addOpacity2 !== void 0 ? _addOpacity2 : buttonTokens.disabledSecondaryOutlinedColor;
66
- buttonTokens.disabledPrimaryFontColor = (_addOpacity3 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button14 = theme.button) === null || _theme$button14 === void 0 ? void 0 : _theme$button14.primaryFontColor, 0.34)) !== null && _addOpacity3 !== void 0 ? _addOpacity3 : buttonTokens.disabledPrimaryFontColor;
67
- buttonTokens.disabledSecondaryFontColor = (_addOpacity4 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button15 = theme.button) === null || _theme$button15 === void 0 ? void 0 : _theme$button15.secondaryFontColor, 0.34)) !== null && _addOpacity4 !== void 0 ? _addOpacity4 : buttonTokens.disabledSecondaryFontColor;
68
- buttonTokens.disabledTextFontColor = (_addOpacity5 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button16 = theme.button) === null || _theme$button16 === void 0 ? void 0 : _theme$button16.textFontColor, 0.34)) !== null && _addOpacity5 !== void 0 ? _addOpacity5 : buttonTokens.disabledTextFontColor;
69
- var checkboxTokens = _variables.componentTokens.checkbox;
70
- checkboxTokens.backgroundColorChecked = (_ref15 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox = theme.checkbox) === null || _theme$checkbox === void 0 ? void 0 : _theme$checkbox.color) !== null && _ref15 !== void 0 ? _ref15 : checkboxTokens.backgroundColorChecked;
71
- checkboxTokens.borderColor = (_ref16 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox2 = theme.checkbox) === null || _theme$checkbox2 === void 0 ? void 0 : _theme$checkbox2.color) !== null && _ref16 !== void 0 ? _ref16 : checkboxTokens.borderColor;
72
- 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;
73
- checkboxTokens.disabledBackgroundColorChecked = (_addOpacity6 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox4 = theme.checkbox) === null || _theme$checkbox4 === void 0 ? void 0 : _theme$checkbox4.color, 0.34)) !== null && _addOpacity6 !== void 0 ? _addOpacity6 : checkboxTokens.disabledBackgroundColorChecked;
74
- checkboxTokens.disabledBorderColor = (_addOpacity7 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox5 = theme.checkbox) === null || _theme$checkbox5 === void 0 ? void 0 : _theme$checkbox5.color, 0.34)) !== null && _addOpacity7 !== void 0 ? _addOpacity7 : checkboxTokens.disabledBorderColor;
75
- checkboxTokens.disabledCheckColor = (_addOpacity8 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox6 = theme.checkbox) === null || _theme$checkbox6 === void 0 ? void 0 : _theme$checkbox6.checkColor, 0.34)) !== null && _addOpacity8 !== void 0 ? _addOpacity8 : checkboxTokens.disabledCheckColor;
76
- var chipTokens = _variables.componentTokens.chip;
77
- chipTokens.backgroundColor = (_ref18 = theme === null || theme === void 0 ? void 0 : (_theme$chip = theme.chip) === null || _theme$chip === void 0 ? void 0 : _theme$chip.backgroundColor) !== null && _ref18 !== void 0 ? _ref18 : chipTokens.backgroundColor;
78
- chipTokens.disabledBackgroundColor = (_addOpacity9 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip2 = theme.chip) === null || _theme$chip2 === void 0 ? void 0 : _theme$chip2.backgroundColor, 0.34)) !== null && _addOpacity9 !== void 0 ? _addOpacity9 : chipTokens.disabledBackgroundColor;
79
- chipTokens.outlinedColor = (_ref19 = theme === null || theme === void 0 ? void 0 : (_theme$chip3 = theme.chip) === null || _theme$chip3 === void 0 ? void 0 : _theme$chip3.outlinedColor) !== null && _ref19 !== void 0 ? _ref19 : chipTokens.outlinedColor;
80
- 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;
81
- chipTokens.disabledFontColor = (_addOpacity10 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip5 = theme.chip) === null || _theme$chip5 === void 0 ? void 0 : _theme$chip5.fontColor, 0.34)) !== null && _addOpacity10 !== void 0 ? _addOpacity10 : chipTokens.disabledFontColor;
82
- var dateTokens = _variables.componentTokens.date;
83
- dateTokens.pickerSelectedDateBackgroundColor = (_ref21 = theme === null || theme === void 0 ? void 0 : (_theme$date = theme.date) === null || _theme$date === void 0 ? void 0 : _theme$date.pickerSelectedDateBackgroundColor) !== null && _ref21 !== void 0 ? _ref21 : dateTokens.pickerSelectedDateBackgroundColor;
84
- dateTokens.pickerSelectedDateColor = (_ref22 = theme === null || theme === void 0 ? void 0 : (_theme$date2 = theme.date) === null || _theme$date2 === void 0 ? void 0 : _theme$date2.pickerSelectedDateColor) !== null && _ref22 !== void 0 ? _ref22 : dateTokens.pickerSelectedDateColor;
85
- dateTokens.pickerHoverDateBackgroundColor = (_addOpacity11 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$date3 = theme.date) === null || _theme$date3 === void 0 ? void 0 : _theme$date3.pickerSelectedDateBackgroundColor, 0.34)) !== null && _addOpacity11 !== void 0 ? _addOpacity11 : dateTokens.pickerHoverDateBackgroundColor;
86
- var dropdownTokens = _variables.componentTokens.dropdown;
87
- dropdownTokens.backgroundColor = (_ref23 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown = theme.dropdown) === null || _theme$dropdown === void 0 ? void 0 : _theme$dropdown.backgroundColor) !== null && _ref23 !== void 0 ? _ref23 : dropdownTokens.backgroundColor;
88
- dropdownTokens.fontColor = (_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.fontColor;
89
- dropdownTokens.hoverBackgroundColor = (_addOpacity12 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown3 = theme.dropdown) === null || _theme$dropdown3 === void 0 ? void 0 : _theme$dropdown3.backgroundColor, 0.8)) !== null && _addOpacity12 !== void 0 ? _addOpacity12 : dropdownTokens.hoverBackgroundColor;
90
- dropdownTokens.hoverBackgroundOption = (_addOpacity13 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown4 = theme.dropdown) === null || _theme$dropdown4 === void 0 ? void 0 : _theme$dropdown4.backgroundColor, 0.34)) !== null && _addOpacity13 !== void 0 ? _addOpacity13 : dropdownTokens.hoverBackgroundOption;
91
- var footerTokens = _variables.componentTokens.footer;
92
- footerTokens.backgroundColor = (_ref25 = theme === null || theme === void 0 ? void 0 : (_theme$footer = theme.footer) === null || _theme$footer === void 0 ? void 0 : _theme$footer.backgroundColor) !== null && _ref25 !== void 0 ? _ref25 : footerTokens.backgroundColor;
93
- footerTokens.fontColor = (_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.fontColor;
94
- footerTokens.lineColor = (_ref27 = theme === null || theme === void 0 ? void 0 : (_theme$footer3 = theme.footer) === null || _theme$footer3 === void 0 ? void 0 : _theme$footer3.lineColor) !== null && _ref27 !== void 0 ? _ref27 : footerTokens.lineColor;
95
- 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;
96
- var headerTokens = _variables.componentTokens.header;
97
- headerTokens.backgroundColor = (_ref29 = theme === null || theme === void 0 ? void 0 : (_theme$header = theme.header) === null || _theme$header === void 0 ? void 0 : _theme$header.backgroundColor) !== null && _ref29 !== void 0 ? _ref29 : headerTokens.backgroundColor;
98
- headerTokens.underlinedColor = (_ref30 = theme === null || theme === void 0 ? void 0 : (_theme$header2 = theme.header) === null || _theme$header2 === void 0 ? void 0 : _theme$header2.underlinedColor) !== null && _ref30 !== void 0 ? _ref30 : headerTokens.underlinedColor;
99
- headerTokens.fontColor = (_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.fontColor;
100
- headerTokens.backgroundColorMenu = (_ref32 = theme === null || theme === void 0 ? void 0 : (_theme$header4 = theme.header) === null || _theme$header4 === void 0 ? void 0 : _theme$header4.backgroundColorMenu) !== null && _ref32 !== void 0 ? _ref32 : headerTokens.backgroundColorMenu;
101
- 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;
102
- headerTokens.hoverHamburguerColor = (_addOpacity14 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$header6 = theme.header) === null || _theme$header6 === void 0 ? void 0 : _theme$header6.hamburguerColor, 0.16)) !== null && _addOpacity14 !== void 0 ? _addOpacity14 : headerTokens.hoverHamburguerColor;
103
- 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;
104
- 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;
105
- var inputTokens = _variables.componentTokens.inputText;
106
- inputTokens.selectedOptionBackgroundColor = (_addOpacity15 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$inputText = theme.inputText) === null || _theme$inputText === void 0 ? void 0 : _theme$inputText.selectedOptionBackgroundColor, 0.34)) !== null && _addOpacity15 !== void 0 ? _addOpacity15 : inputTokens.selectedOptionBackgroundColor;
107
- var paginatorTokens = _variables.componentTokens.paginator;
108
- paginatorTokens.paginatorBackgroundColor = (_ref36 = theme === null || theme === void 0 ? void 0 : (_theme$paginator = theme.paginator) === null || _theme$paginator === void 0 ? void 0 : _theme$paginator.paginatorBackgroundColor) !== null && _ref36 !== void 0 ? _ref36 : paginatorTokens.paginatorBackgroundColor;
109
- paginatorTokens.paginatorFontColor = (_ref37 = theme === null || theme === void 0 ? void 0 : (_theme$paginator2 = theme.paginator) === null || _theme$paginator2 === void 0 ? void 0 : _theme$paginator2.paginatorFontColor) !== null && _ref37 !== void 0 ? _ref37 : paginatorTokens.paginatorFontColor;
110
- var progressBarTokens = _variables.componentTokens.progressBar;
111
- progressBarTokens.trackLine = (_ref38 = theme === null || theme === void 0 ? void 0 : (_theme$progressBar = theme.progressBar) === null || _theme$progressBar === void 0 ? void 0 : _theme$progressBar.trackLine) !== null && _ref38 !== void 0 ? _ref38 : progressBarTokens.trackLine;
112
- progressBarTokens.totalLine = (_ref39 = theme === null || theme === void 0 ? void 0 : (_theme$progressBar2 = theme.progressBar) === null || _theme$progressBar2 === void 0 ? void 0 : _theme$progressBar2.totalLine) !== null && _ref39 !== void 0 ? _ref39 : progressBarTokens.totalLine;
113
- progressBarTokens.fontColor = (_ref40 = theme === null || theme === void 0 ? void 0 : (_theme$progressBar3 = theme.progressBar) === null || _theme$progressBar3 === void 0 ? void 0 : _theme$progressBar3.fontColor) !== null && _ref40 !== void 0 ? _ref40 : progressBarTokens.fontColor;
114
- progressBarTokens.opaqueTotalLine = (_addOpacity16 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$progressBar4 = theme.progressBar) === null || _theme$progressBar4 === void 0 ? void 0 : _theme$progressBar4.totalLine, 0.34)) !== null && _addOpacity16 !== void 0 ? _addOpacity16 : progressBarTokens.opaqueTotalLine;
115
- var radioTokens = _variables.componentTokens.radio;
116
- radioTokens.color = (_ref41 = theme === null || theme === void 0 ? void 0 : (_theme$radio = theme.radio) === null || _theme$radio === void 0 ? void 0 : _theme$radio.color) !== null && _ref41 !== void 0 ? _ref41 : radioTokens.color;
117
- radioTokens.fontColor = (_ref42 = theme === null || theme === void 0 ? void 0 : (_theme$radio2 = theme.radio) === null || _theme$radio2 === void 0 ? void 0 : _theme$radio2.themeColor) !== null && _ref42 !== void 0 ? _ref42 : radioTokens.fontColor;
118
- radioTokens.focusColor = (_ref43 = theme === null || theme === void 0 ? void 0 : (_theme$radio3 = theme.radio) === null || _theme$radio3 === void 0 ? void 0 : _theme$radio3.focusColor) !== null && _ref43 !== void 0 ? _ref43 : radioTokens.focusColor;
119
- radioTokens.disabledColor = (_addOpacity17 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$radio4 = theme.radio) === null || _theme$radio4 === void 0 ? void 0 : _theme$radio4.color, 0.34)) !== null && _addOpacity17 !== void 0 ? _addOpacity17 : radioTokens.disabledColor;
120
- radioTokens.disabledFontColor = (_addOpacity18 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$radio5 = theme.radio) === null || _theme$radio5 === void 0 ? void 0 : _theme$radio5.fontColor, 0.34)) !== null && _addOpacity18 !== void 0 ? _addOpacity18 : radioTokens.disabledFontColor;
121
- var selectTokens = _variables.componentTokens.select;
122
- selectTokens.selectedOptionBackgroundColor = (_ref44 = theme === null || theme === void 0 ? void 0 : (_theme$select = theme.select) === null || _theme$select === void 0 ? void 0 : _theme$select.selectedOptionBackgroundColor) !== null && _ref44 !== void 0 ? _ref44 : selectTokens.selectedOptionBackgroundColor;
123
- selectTokens.color = (_ref45 = theme === null || theme === void 0 ? void 0 : (_theme$select2 = theme.select) === null || _theme$select2 === void 0 ? void 0 : _theme$select2.color) !== null && _ref45 !== void 0 ? _ref45 : selectTokens.color;
124
- selectTokens.error = (_ref46 = theme === null || theme === void 0 ? void 0 : (_theme$select3 = theme.select) === null || _theme$select3 === void 0 ? void 0 : _theme$select3.error) !== null && _ref46 !== void 0 ? _ref46 : selectTokens.error;
125
- selectTokens.scrollBarThumbColor = (_ref47 = theme === null || theme === void 0 ? void 0 : (_theme$select4 = theme.select) === null || _theme$select4 === void 0 ? void 0 : _theme$select4.scrollBarThumbColor) !== null && _ref47 !== void 0 ? _ref47 : selectTokens.scrollBarThumbColor;
126
- selectTokens.scrollBarTrackColor = (_ref48 = theme === null || theme === void 0 ? void 0 : (_theme$select5 = theme.select) === null || _theme$select5 === void 0 ? void 0 : _theme$select5.scrollBarTrackColor) !== null && _ref48 !== void 0 ? _ref48 : selectTokens.scrollBarTrackColor;
127
- selectTokens.focusColor = (_ref49 = theme === null || theme === void 0 ? void 0 : (_theme$select6 = theme.select) === null || _theme$select6 === void 0 ? void 0 : _theme$select6.focusColor) !== null && _ref49 !== void 0 ? _ref49 : selectTokens.focusColor;
128
- selectTokens.hoveredOptionBackgroundColor = (_addOpacity19 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$select7 = theme.select) === null || _theme$select7 === void 0 ? void 0 : _theme$select7.selectedOptionBackgroundColor, 0.34)) !== null && _addOpacity19 !== void 0 ? _addOpacity19 : selectTokens.hoveredOptionBackgroundColor;
129
- selectTokens.disabledColor = (_addOpacity20 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$select8 = theme.select) === null || _theme$select8 === void 0 ? void 0 : _theme$select8.color, 0.34)) !== null && _addOpacity20 !== void 0 ? _addOpacity20 : selectTokens.disabledColor;
130
- var sideNavTokens = _variables.componentTokens.sidenav;
131
- sideNavTokens.backgroundColor = (_ref50 = theme === null || theme === void 0 ? void 0 : (_theme$sidenav = theme.sidenav) === null || _theme$sidenav === void 0 ? void 0 : _theme$sidenav.backgroundColor) !== null && _ref50 !== void 0 ? _ref50 : sideNavTokens.backgroundColor;
132
- sideNavTokens.arrowContainerColor = (_addOpacity21 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$sideNav = theme.sideNav) === null || _theme$sideNav === void 0 ? void 0 : _theme$sideNav.arrowContainerColor, 0.8)) !== null && _addOpacity21 !== void 0 ? _addOpacity21 : sideNavTokens.arrowContainerColor;
133
- sideNavTokens.arrowColor = (_ref51 = theme === null || theme === void 0 ? void 0 : (_theme$sidenav2 = theme.sidenav) === null || _theme$sidenav2 === void 0 ? void 0 : _theme$sidenav2.arrowColor) !== null && _ref51 !== void 0 ? _ref51 : sideNavTokens.arrowColor;
134
- var sliderTokens = _variables.componentTokens.slider;
135
- sliderTokens.color = (_ref52 = theme === null || theme === void 0 ? void 0 : (_theme$slider = theme.slider) === null || _theme$slider === void 0 ? void 0 : _theme$slider.color) !== null && _ref52 !== void 0 ? _ref52 : sliderTokens.color;
136
- sliderTokens.totalLine = (_addOpacity22 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider2 = theme.slider) === null || _theme$slider2 === void 0 ? void 0 : _theme$slider2.color, 0.34)) !== null && _addOpacity22 !== void 0 ? _addOpacity22 : sliderTokens.totalLine;
137
- sliderTokens.disabledthumbBackgroundColor = (_addOpacity23 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider3 = theme.slider) === null || _theme$slider3 === void 0 ? void 0 : _theme$slider3.color, 0.34)) !== null && _addOpacity23 !== void 0 ? _addOpacity23 : sliderTokens.disabledthumbBackgroundColor;
138
- sliderTokens.disableddotsBackgroundColor = (_addOpacity24 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider4 = theme.slider) === null || _theme$slider4 === void 0 ? void 0 : _theme$slider4.color, 0.34)) !== null && _addOpacity24 !== void 0 ? _addOpacity24 : sliderTokens.disableddotsBackgroundColor;
139
- var spinnerTokens = _variables.componentTokens.spinner;
140
- spinnerTokens.trackCircleColor = (_ref53 = theme === null || theme === void 0 ? void 0 : (_theme$spinner = theme.spinner) === null || _theme$spinner === void 0 ? void 0 : _theme$spinner.trackCircleColor) !== null && _ref53 !== void 0 ? _ref53 : spinnerTokens.trackCircleColor;
141
- spinnerTokens.totalCircleColor = (_ref54 = theme === null || theme === void 0 ? void 0 : (_theme$spinner2 = theme.spinner) === null || _theme$spinner2 === void 0 ? void 0 : _theme$spinner2.totalCircleColor) !== null && _ref54 !== void 0 ? _ref54 : spinnerTokens.totalCircleColor;
142
- var switchTokens = _variables.componentTokens["switch"];
143
- switchTokens.checkedTrackBackgroundColor = (_ref55 = theme === null || theme === void 0 ? void 0 : (_theme$switch = theme["switch"]) === null || _theme$switch === void 0 ? void 0 : _theme$switch.checkedTrackBackgroundColor) !== null && _ref55 !== void 0 ? _ref55 : switchTokens.checkedTrackBackgroundColor;
144
- switchTokens.disabledUncheckedTrackBackgroundColor = (_addOpacity25 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$switch2 = theme["switch"]) === null || _theme$switch2 === void 0 ? void 0 : _theme$switch2.uncheckedTrackBackgroundColor, 0.34)) !== null && _addOpacity25 !== void 0 ? _addOpacity25 : switchTokens.disabledUncheckedTrackBackgroundColor;
145
- switchTokens.disabledFontColor = (_addOpacity26 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$switch3 = theme["switch"]) === null || _theme$switch3 === void 0 ? void 0 : _theme$switch3.fontColor, 0.34)) !== null && _addOpacity26 !== void 0 ? _addOpacity26 : switchTokens.disabledFontColor;
146
- switchTokens.disabledCheckedTrackBackgroundColor = (_addOpacity27 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$switch4 = theme["switch"]) === null || _theme$switch4 === void 0 ? void 0 : _theme$switch4.checkedTrackBackgroundColor, 0.34)) !== null && _addOpacity27 !== void 0 ? _addOpacity27 : switchTokens.disabledCheckedTrackBackgroundColor;
147
- var tableTokens = _variables.componentTokens.table;
148
- tableTokens.headerBackgroundColor = (_ref56 = theme === null || theme === void 0 ? void 0 : (_theme$table = theme.table) === null || _theme$table === void 0 ? void 0 : _theme$table.headerBackgroundColor) !== null && _ref56 !== void 0 ? _ref56 : tableTokens.headerBackgroundColor;
149
- tableTokens.headerFontColor = (_ref57 = theme === null || theme === void 0 ? void 0 : (_theme$table2 = theme.table) === null || _theme$table2 === void 0 ? void 0 : _theme$table2.headerFontColor) !== null && _ref57 !== void 0 ? _ref57 : tableTokens.headerFontColor;
150
- var tabsTokens = _variables.componentTokens.tabs;
151
- tabsTokens.selectedFontColor = (_ref58 = theme === null || theme === void 0 ? void 0 : (_theme$tabs = theme.tabs) === null || _theme$tabs === void 0 ? void 0 : _theme$tabs.selectedFontColor) !== null && _ref58 !== void 0 ? _ref58 : tabsTokens.selectedFontColor;
152
- tabsTokens.selectedIconColor = (_ref59 = theme === null || theme === void 0 ? void 0 : (_theme$tabs2 = theme.tabs) === null || _theme$tabs2 === void 0 ? void 0 : _theme$tabs2.selectedFontColor) !== null && _ref59 !== void 0 ? _ref59 : tabsTokens.selectedFontColor;
153
- tabsTokens.selectedUnderlineColor = (_ref60 = theme === null || theme === void 0 ? void 0 : (_theme$tabs3 = theme.tabs) === null || _theme$tabs3 === void 0 ? void 0 : _theme$tabs3.selectedFontColor) !== null && _ref60 !== void 0 ? _ref60 : tabsTokens.selectedFontColor;
154
- tabsTokens.focusOutline = (_ref61 = theme === null || theme === void 0 ? void 0 : (_theme$tabs4 = theme.tabs) === null || _theme$tabs4 === void 0 ? void 0 : _theme$tabs4.selectedFontColor) !== null && _ref61 !== void 0 ? _ref61 : tabsTokens.selectedFontColor;
155
- tabsTokens.hoverBackgroundColor = (_addLightness3 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs5 = theme.tabs) === null || _theme$tabs5 === void 0 ? void 0 : _theme$tabs5.selectedFontColor, 58)) !== null && _addLightness3 !== void 0 ? _addLightness3 : tabsTokens.hoverBackgroundColor;
156
- tabsTokens.pressedBackgroundColor = (_addLightness4 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs6 = theme.tabs) === null || _theme$tabs6 === void 0 ? void 0 : _theme$tabs6.selectedFontColor, 53)) !== null && _addLightness4 !== void 0 ? _addLightness4 : tabsTokens.pressedBackgroundColor;
157
- var toggleGroupTokens = _variables.componentTokens.toggleGroup;
158
- toggleGroupTokens.unselectedBackgroundColor = (_ref62 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup = theme.toggleGroup) === null || _theme$toggleGroup === void 0 ? void 0 : _theme$toggleGroup.unselectedBackgroundColor) !== null && _ref62 !== void 0 ? _ref62 : toggleGroupTokens.unselectedBackgroundColor;
159
- toggleGroupTokens.unselectedBackgroundHoverColor = (_ref63 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup2 = theme.toggleGroup) === null || _theme$toggleGroup2 === void 0 ? void 0 : _theme$toggleGroup2.unselectedBackgroundHoverColor) !== null && _ref63 !== void 0 ? _ref63 : toggleGroupTokens.unselectedBackgroundHoverColor;
160
- toggleGroupTokens.unselectedFontColor = (_ref64 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup3 = theme.toggleGroup) === null || _theme$toggleGroup3 === void 0 ? void 0 : _theme$toggleGroup3.unselectedFontColor) !== null && _ref64 !== void 0 ? _ref64 : toggleGroupTokens.unselectedFontColor;
161
- toggleGroupTokens.unselectedHoverFontColor = (_ref65 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup4 = theme.toggleGroup) === null || _theme$toggleGroup4 === void 0 ? void 0 : _theme$toggleGroup4.unselectedHoverFontColor) !== null && _ref65 !== void 0 ? _ref65 : toggleGroupTokens.unselectedHoverFontColor;
162
- toggleGroupTokens.selectedBackgroundColor = (_ref66 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup5 = theme.toggleGroup) === null || _theme$toggleGroup5 === void 0 ? void 0 : _theme$toggleGroup5.selectedBackgroundColor) !== null && _ref66 !== void 0 ? _ref66 : toggleGroupTokens.selectedBackgroundColor;
163
- toggleGroupTokens.selectedBackgroundHoverColor = (_ref67 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup6 = theme.toggleGroup) === null || _theme$toggleGroup6 === void 0 ? void 0 : _theme$toggleGroup6.selectedBackgroundHoverColor) !== null && _ref67 !== void 0 ? _ref67 : toggleGroupTokens.selectedBackgroundHoverColor;
164
- toggleGroupTokens.selectedFontColor = (_ref68 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup7 = theme.toggleGroup) === null || _theme$toggleGroup7 === void 0 ? void 0 : _theme$toggleGroup7.selectedFontColor) !== null && _ref68 !== void 0 ? _ref68 : toggleGroupTokens.selectedFontColor;
165
- toggleGroupTokens.selectedHoverFontColor = (_ref69 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup8 = theme.toggleGroup) === null || _theme$toggleGroup8 === void 0 ? void 0 : _theme$toggleGroup8.selectedHoverFontColor) !== null && _ref69 !== void 0 ? _ref69 : toggleGroupTokens.selectedHoverFontColor;
166
- toggleGroupTokens.disabledSelectedBackgroundColor = (_addOpacity28 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup9 = theme.toggleGroup) === null || _theme$toggleGroup9 === void 0 ? void 0 : _theme$toggleGroup9.selectedBackgroundColor, 0.34)) !== null && _addOpacity28 !== void 0 ? _addOpacity28 : toggleGroupTokens.disabledSelectedBackgroundColor;
167
- toggleGroupTokens.disabledUnselectedBackgroundColor = (_addOpacity29 = addOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup10 = theme.toggleGroup) === null || _theme$toggleGroup10 === void 0 ? void 0 : _theme$toggleGroup10.unselectedBackgroundColor, 0.34)) !== null && _addOpacity29 !== void 0 ? _addOpacity29 : toggleGroupTokens.disabledUnselectedBackgroundColor;
168
- var wizardTokens = _variables.componentTokens.wizard;
169
- wizardTokens.selectedBackgroundColor = (_ref70 = theme === null || theme === void 0 ? void 0 : (_theme$wizard = theme.wizard) === null || _theme$wizard === void 0 ? void 0 : _theme$wizard.selectedBackgroundColor) !== null && _ref70 !== void 0 ? _ref70 : wizardTokens.selectedBackgroundColor;
170
- wizardTokens.selectedFont = (_ref71 = theme === null || theme === void 0 ? void 0 : (_theme$wizard2 = theme.wizard) === null || _theme$wizard2 === void 0 ? void 0 : _theme$wizard2.selectedFont) !== null && _ref71 !== void 0 ? _ref71 : wizardTokens.selectedFont;
171
- return _variables.componentTokens;
172
- };
173
-
174
- var ThemeProvider = function ThemeProvider(_ref72) {
175
- var theme = _ref72.theme,
176
- children = _ref72.children;
177
- var parsedTheme = (0, _react.useMemo)(function () {
178
- return parseTheme(theme);
179
- }, [theme]);
180
- return _react["default"].createElement(ThemeContext.Provider, {
181
- value: parsedTheme
182
- }, children);
183
- };
184
-
185
- exports.ThemeProvider = ThemeProvider;
186
- var _default = ThemeContext;
187
- 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
- ```