@dxc-technology/halstack-react 0.0.0-ba36a4a → 0.0.0-ba408d4

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 (249) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +116 -246
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +14 -18
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +23 -87
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +13 -15
  10. package/accordion-group/index.d.ts +16 -0
  11. package/{dist/alert → alert}/Alert.js +42 -136
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +59 -0
  14. package/{dist/box → box}/Box.js +9 -13
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.d.ts +4 -0
  17. package/{dist/button → button}/Button.js +16 -72
  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 +19 -73
  22. package/card/index.d.ts +22 -0
  23. package/{dist/checkbox → checkbox}/Checkbox.js +16 -41
  24. package/checkbox/index.d.ts +24 -0
  25. package/{dist/chip → chip}/Chip.js +17 -61
  26. package/chip/index.d.ts +22 -0
  27. package/{dist/common → common}/OpenSans.css +0 -0
  28. package/{dist/common → common}/RequiredComponent.js +3 -11
  29. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  37. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  38. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  39. package/{dist/common → common}/utils.js +0 -0
  40. package/{dist/common → common}/variables.js +347 -139
  41. package/{dist/date → date}/Date.js +20 -28
  42. package/date/index.d.ts +27 -0
  43. package/{dist/new-date/NewDate.js → date-input/DateInput.js} +85 -92
  44. package/date-input/index.d.ts +95 -0
  45. package/{dist/dialog → dialog}/Dialog.js +16 -50
  46. package/dialog/index.d.ts +18 -0
  47. package/{dist/dropdown → dropdown}/Dropdown.js +37 -131
  48. package/dropdown/index.d.ts +26 -0
  49. package/file-input/FileInput.js +532 -0
  50. package/file-input/FileItem.js +193 -0
  51. package/file-input/index.d.ts +81 -0
  52. package/{dist/footer → footer}/Footer.js +53 -151
  53. package/footer/Icons.js +77 -0
  54. package/footer/index.d.ts +25 -0
  55. package/header/Header.js +326 -0
  56. package/header/Icons.js +59 -0
  57. package/header/index.d.ts +25 -0
  58. package/{dist/heading → heading}/Heading.js +30 -72
  59. package/heading/index.d.ts +17 -0
  60. package/input-text/Icons.js +22 -0
  61. package/{dist/input-text → input-text}/InputText.js +37 -133
  62. package/input-text/index.d.ts +36 -0
  63. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  64. package/layout/Icons.js +55 -0
  65. package/{dist/link → link}/Link.js +20 -78
  66. package/link/index.d.ts +23 -0
  67. package/main.d.ts +44 -0
  68. package/{dist/main.js → main.js} +104 -92
  69. package/{dist/number/Number.js → number-input/NumberInput.js} +10 -20
  70. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  71. package/number-input/index.d.ts +113 -0
  72. package/package.json +31 -23
  73. package/paginator/Icons.js +66 -0
  74. package/paginator/Paginator.d.ts +4 -0
  75. package/paginator/Paginator.js +198 -0
  76. package/paginator/types.d.ts +38 -0
  77. package/paginator/types.js +5 -0
  78. package/{dist/password/Password.js → password-input/PasswordInput.js} +27 -28
  79. package/password-input/index.d.ts +94 -0
  80. package/{dist/progress-bar → progress-bar}/ProgressBar.js +18 -72
  81. package/progress-bar/index.d.ts +18 -0
  82. package/{dist/radio → radio}/Radio.js +12 -26
  83. package/radio/index.d.ts +23 -0
  84. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  85. package/resultsetTable/index.d.ts +19 -0
  86. package/select/Select.js +865 -0
  87. package/select/index.d.ts +131 -0
  88. package/{dist/sidenav → sidenav}/Sidenav.js +17 -49
  89. package/sidenav/index.d.ts +13 -0
  90. package/{dist/slider → slider}/Slider.js +79 -58
  91. package/slider/index.d.ts +29 -0
  92. package/{dist/spinner → spinner}/Spinner.js +38 -152
  93. package/spinner/index.d.ts +17 -0
  94. package/{dist/switch → switch}/Switch.js +12 -26
  95. package/switch/index.d.ts +24 -0
  96. package/{dist/table → table}/Table.js +10 -24
  97. package/table/index.d.ts +13 -0
  98. package/{dist/tabs → tabs}/Tabs.js +26 -110
  99. package/tabs/index.d.ts +19 -0
  100. package/{dist/tag → tag}/Tag.js +40 -120
  101. package/tag/index.d.ts +24 -0
  102. package/text-input/TextInput.js +825 -0
  103. package/text-input/index.d.ts +135 -0
  104. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +81 -110
  105. package/textarea/index.d.ts +117 -0
  106. package/{dist/toggle → toggle}/Toggle.js +15 -49
  107. package/toggle/index.d.ts +21 -0
  108. package/toggle-group/ToggleGroup.js +243 -0
  109. package/toggle-group/index.d.ts +21 -0
  110. package/{dist/upload → upload}/Upload.js +11 -15
  111. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  112. package/upload/buttons-upload/Icons.js +40 -0
  113. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  114. package/upload/dragAndDropArea/Icons.js +39 -0
  115. package/upload/file-upload/FileToUpload.js +115 -0
  116. package/upload/file-upload/Icons.js +66 -0
  117. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  118. package/upload/index.d.ts +15 -0
  119. package/upload/transaction/Icons.js +160 -0
  120. package/upload/transaction/Transaction.js +104 -0
  121. package/upload/transactions/Transactions.js +94 -0
  122. package/{dist/useTheme.js → useTheme.js} +0 -0
  123. package/wizard/Icons.js +65 -0
  124. package/{dist/wizard → wizard}/Wizard.js +32 -172
  125. package/wizard/index.d.ts +18 -0
  126. package/README.md +0 -66
  127. package/babel.config.js +0 -8
  128. package/dist/BackgroundColorContext.js +0 -46
  129. package/dist/ThemeContext.js +0 -240
  130. package/dist/badge/Badge.js +0 -63
  131. package/dist/checkbox/Checkbox.stories.js +0 -144
  132. package/dist/checkbox/readme.md +0 -116
  133. package/dist/date/Date.stories.js +0 -205
  134. package/dist/date/readme.md +0 -73
  135. package/dist/footer/Footer.stories.js +0 -94
  136. package/dist/footer/dxc_logo.svg +0 -15
  137. package/dist/footer/readme.md +0 -41
  138. package/dist/header/Header.js +0 -403
  139. package/dist/header/Header.stories.js +0 -176
  140. package/dist/header/close_icon.svg +0 -1
  141. package/dist/header/dxc_logo_black.svg +0 -8
  142. package/dist/header/hamb_menu_black.svg +0 -1
  143. package/dist/header/hamb_menu_white.svg +0 -1
  144. package/dist/header/readme.md +0 -33
  145. package/dist/input-text/InputText.stories.js +0 -209
  146. package/dist/input-text/error.svg +0 -1
  147. package/dist/input-text/readme.md +0 -91
  148. package/dist/layout/facebook.svg +0 -45
  149. package/dist/layout/linkedin.svg +0 -50
  150. package/dist/layout/twitter.svg +0 -53
  151. package/dist/link/readme.md +0 -51
  152. package/dist/new-input-text/NewInputText.js +0 -961
  153. package/dist/paginator/Paginator.js +0 -289
  154. package/dist/paginator/images/next.svg +0 -3
  155. package/dist/paginator/images/nextPage.svg +0 -3
  156. package/dist/paginator/images/previous.svg +0 -3
  157. package/dist/paginator/images/previousPage.svg +0 -3
  158. package/dist/paginator/readme.md +0 -50
  159. package/dist/password/styles.css +0 -3
  160. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  161. package/dist/progress-bar/readme.md +0 -63
  162. package/dist/radio/Radio.stories.js +0 -166
  163. package/dist/radio/readme.md +0 -70
  164. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  165. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  166. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  167. package/dist/select/Select.stories.js +0 -235
  168. package/dist/select/readme.md +0 -72
  169. package/dist/slider/Slider.stories.js +0 -241
  170. package/dist/slider/readme.md +0 -64
  171. package/dist/spinner/Spinner.stories.js +0 -183
  172. package/dist/spinner/readme.md +0 -65
  173. package/dist/switch/Switch.stories.js +0 -134
  174. package/dist/switch/readme.md +0 -133
  175. package/dist/tabs/Tabs.stories.js +0 -130
  176. package/dist/tabs/readme.md +0 -78
  177. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  178. package/dist/tabs-for-sections/readme.md +0 -78
  179. package/dist/toggle/Toggle.stories.js +0 -297
  180. package/dist/toggle/readme.md +0 -80
  181. package/dist/toggle-group/ToggleGroup.js +0 -223
  182. package/dist/upload/Upload.stories.js +0 -72
  183. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  184. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  185. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  186. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  187. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  188. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  189. package/dist/upload/file-upload/FileToUpload.js +0 -184
  190. package/dist/upload/file-upload/audio-icon.svg +0 -4
  191. package/dist/upload/file-upload/close.svg +0 -4
  192. package/dist/upload/file-upload/file-icon.svg +0 -4
  193. package/dist/upload/file-upload/video-icon.svg +0 -4
  194. package/dist/upload/readme.md +0 -37
  195. package/dist/upload/transaction/Transaction.js +0 -175
  196. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  197. package/dist/upload/transaction/audio-icon.svg +0 -4
  198. package/dist/upload/transaction/error-icon.svg +0 -4
  199. package/dist/upload/transaction/file-icon-err.svg +0 -4
  200. package/dist/upload/transaction/file-icon.svg +0 -4
  201. package/dist/upload/transaction/image-icon-err.svg +0 -4
  202. package/dist/upload/transaction/image-icon.svg +0 -4
  203. package/dist/upload/transaction/success-icon.svg +0 -4
  204. package/dist/upload/transaction/video-icon-err.svg +0 -4
  205. package/dist/upload/transaction/video-icon.svg +0 -4
  206. package/dist/upload/transactions/Transactions.js +0 -138
  207. package/dist/wizard/invalid_icon.svg +0 -5
  208. package/dist/wizard/valid_icon.svg +0 -5
  209. package/dist/wizard/validation-wrong.svg +0 -6
  210. package/test/Accordion.test.js +0 -33
  211. package/test/AccordionGroup.test.js +0 -125
  212. package/test/Alert.test.js +0 -53
  213. package/test/Box.test.js +0 -10
  214. package/test/Button.test.js +0 -18
  215. package/test/Card.test.js +0 -30
  216. package/test/Checkbox.test.js +0 -45
  217. package/test/Chip.test.js +0 -25
  218. package/test/Date.test.js +0 -393
  219. package/test/Dialog.test.js +0 -23
  220. package/test/Dropdown.test.js +0 -145
  221. package/test/Footer.test.js +0 -99
  222. package/test/Header.test.js +0 -39
  223. package/test/Heading.test.js +0 -35
  224. package/test/InputText.test.js +0 -240
  225. package/test/Link.test.js +0 -43
  226. package/test/NewDate.test.js +0 -203
  227. package/test/NewInputText.test.js +0 -817
  228. package/test/NewTextarea.test.js +0 -201
  229. package/test/Number.test.js +0 -241
  230. package/test/Paginator.test.js +0 -177
  231. package/test/Password.test.js +0 -76
  232. package/test/ProgressBar.test.js +0 -35
  233. package/test/Radio.test.js +0 -37
  234. package/test/ResultsetTable.test.js +0 -330
  235. package/test/Select.test.js +0 -189
  236. package/test/Sidenav.test.js +0 -45
  237. package/test/Slider.test.js +0 -82
  238. package/test/Spinner.test.js +0 -32
  239. package/test/Switch.test.js +0 -45
  240. package/test/Table.test.js +0 -36
  241. package/test/Tabs.test.js +0 -109
  242. package/test/TabsForSections.test.js +0 -34
  243. package/test/Tag.test.js +0 -32
  244. package/test/TextArea.test.js +0 -52
  245. package/test/ToggleGroup.test.js +0 -81
  246. package/test/Upload.test.js +0 -60
  247. package/test/Wizard.test.js +0 -130
  248. package/test/mocks/pngMock.js +0 -1
  249. package/test/mocks/svgMock.js +0 -1
@@ -1,240 +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 addLightness = function addLightness(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 subLightness = function subLightness(hexColor, newLightness) {
50
- try {
51
- if (hexColor) {
52
- var color = (0, _color["default"])(hexColor);
53
- var hslColor = color.hsl();
54
- var lightnessColor = hslColor.color[2];
55
- return hslColor.lightness(lightnessColor - newLightness).hex();
56
- }
57
- } catch (e) {
58
- return null;
59
- }
60
- };
61
-
62
- var setOpacity = function setOpacity(hexColor, newOpacity) {
63
- try {
64
- if (hexColor) {
65
- var color = (0, _color["default"])(hexColor);
66
- return "#" + (0, _rgbHex["default"])(color.color[0], color.color[1], color.color[2], newOpacity);
67
- }
68
- } catch (e) {
69
- return null;
70
- }
71
- };
72
-
73
- var parseAdvancedTheme = function parseAdvancedTheme(advancedTheme) {
74
- var allTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
75
- Object.keys(allTokensCopy).map(function (component) {
76
- if (advancedTheme[component]) {
77
- Object.keys(advancedTheme[component]).map(function (objectKey) {
78
- if (advancedTheme[component][objectKey]) {
79
- allTokensCopy[component][objectKey] = advancedTheme[component][objectKey];
80
- }
81
- });
82
- }
83
- });
84
- return allTokensCopy;
85
- };
86
-
87
- var parseTheme = function parseTheme(theme) {
88
- var _ref, _theme$accordion, _ref2, _theme$accordion2, _ref3, _theme$accordion3, _ref4, _theme$accordion4, _ref5, _theme$accordion5, _setOpacity, _theme$accordion6, _setOpacity2, _theme$accordion7, _setOpacity3, _theme$accordion8, _setOpacity4, _theme$accordion9, _setOpacity5, _theme$accordion10, _ref6, _theme$button, _ref7, _theme$button2, _ref8, _theme$button3, _ref9, _theme$button4, _ref10, _theme$button5, _ref11, _theme$button6, _ref12, _theme$button7, _subLightness, _theme$button8, _subLightness2, _theme$button9, _subLightness3, _theme$button10, _addLightness, _theme$button11, _addLightness2, _theme$button12, _ref13, _theme$checkbox, _ref14, _theme$checkbox2, _ref15, _theme$checkbox3, _setOpacity6, _theme$checkbox4, _setOpacity7, _theme$checkbox5, _setOpacity8, _theme$checkbox6, _ref16, _theme$chip, _setOpacity9, _theme$chip2, _ref17, _theme$chip3, _setOpacity10, _theme$chip4, _ref18, _theme$date, _ref19, _theme$date2, _setOpacity11, _theme$date3, _ref20, _theme$dropdown, _ref21, _theme$dropdown2, _setOpacity12, _theme$dropdown3, _setOpacity13, _theme$dropdown4, _setOpacity14, _theme$dropdown5, _setOpacity15, _theme$dropdown6, _ref22, _theme$footer, _ref23, _theme$footer2, _ref24, _theme$footer3, _ref25, _theme$footer4, _ref26, _theme$footer5, _ref27, _theme$footer6, _ref28, _theme$header, _ref29, _theme$header2, _ref30, _theme$header3, _ref31, _theme$header4, _ref32, _theme$header5, _setOpacity16, _theme$header6, _ref33, _theme$header7, _ref34, _theme$header8, _setOpacity17, _theme$inputText, _ref35, _theme$newInputText, _subLightness4, _theme$newInputText2, _ref36, _theme$paginator, _ref37, _theme$paginator2, _ref38, _theme$progressBar, _ref39, _theme$progressBar2, _ref40, _theme$radio, _setOpacity18, _theme$radio2, _ref41, _theme$select, _ref42, _theme$select2, _ref43, _theme$select3, _addLightness3, _theme$select4, _subLightness5, _theme$select5, _ref44, _theme$sidenav, _setOpacity19, _theme$sidenav2, _ref45, _theme$sidenav3, _ref46, _theme$slider, _ref47, _theme$slider2, _ref48, _theme$slider3, _subLightness6, _theme$slider4, _subLightness7, _theme$slider5, _setOpacity20, _theme$slider6, _setOpacity21, _theme$slider7, _setOpacity22, _theme$slider8, _setOpacity23, _theme$slider9, _ref49, _theme$spinner, _ref50, _theme$spinner2, _ref51, _theme$switch, _setOpacity24, _theme$switch2, _ref52, _theme$table, _ref53, _theme$table2, _ref54, _theme$tabs, _ref55, _theme$tabs2, _ref56, _theme$tabs3, _ref57, _theme$tabs4, _addLightness4, _theme$tabs5, _addLightness5, _theme$tabs6, _ref58, _theme$toggleGroup, _ref59, _theme$toggleGroup2, _ref60, _theme$toggleGroup3, _ref61, _theme$toggleGroup4, _ref62, _theme$toggleGroup5, _subLightness8, _theme$toggleGroup6, _subLightness9, _theme$toggleGroup7, _addLightness6, _theme$toggleGroup8, _addLightness7, _theme$toggleGroup9, _subLightness10, _theme$toggleGroup10, _addLightness8, _theme$toggleGroup11, _setOpacity25, _theme$toggleGroup12, _ref63, _theme$wizard, _ref64, _theme$wizard2;
89
-
90
- var componentTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
91
- var accordionTokens = componentTokensCopy.accordion;
92
- accordionTokens.assistiveTextFontColor = (_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.assistiveTextFontColor;
93
- accordionTokens.titleLabelFontColor = (_ref2 = theme === null || theme === void 0 ? void 0 : (_theme$accordion2 = theme.accordion) === null || _theme$accordion2 === void 0 ? void 0 : _theme$accordion2.fontColor) !== null && _ref2 !== void 0 ? _ref2 : accordionTokens.titleLabelFontColor;
94
- accordionTokens.arrowColor = (_ref3 = theme === null || theme === void 0 ? void 0 : (_theme$accordion3 = theme.accordion) === null || _theme$accordion3 === void 0 ? void 0 : _theme$accordion3.accentColor) !== null && _ref3 !== void 0 ? _ref3 : accordionTokens.arrowColor;
95
- accordionTokens.iconColor = (_ref4 = theme === null || theme === void 0 ? void 0 : (_theme$accordion4 = theme.accordion) === null || _theme$accordion4 === void 0 ? void 0 : _theme$accordion4.accentColor) !== null && _ref4 !== void 0 ? _ref4 : accordionTokens.iconColor;
96
- accordionTokens.focusBorderColor = (_ref5 = theme === null || theme === void 0 ? void 0 : (_theme$accordion5 = theme.accordion) === null || _theme$accordion5 === void 0 ? void 0 : _theme$accordion5.accentColor) !== null && _ref5 !== void 0 ? _ref5 : accordionTokens.focusBorderColor;
97
- accordionTokens.hoverBackgroundColor = (_setOpacity = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$accordion6 = theme.accordion) === null || _theme$accordion6 === void 0 ? void 0 : _theme$accordion6.accentColor, 0.16)) !== null && _setOpacity !== void 0 ? _setOpacity : accordionTokens.hoverBackgroundColor;
98
- accordionTokens.disabledAssistiveTextFontColor = (_setOpacity2 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$accordion7 = theme.accordion) === null || _theme$accordion7 === void 0 ? void 0 : _theme$accordion7.fontColor, 0.34)) !== null && _setOpacity2 !== void 0 ? _setOpacity2 : accordionTokens.disabledAssistiveTextFontColor;
99
- accordionTokens.disabledTitleLabelFontColor = (_setOpacity3 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$accordion8 = theme.accordion) === null || _theme$accordion8 === void 0 ? void 0 : _theme$accordion8.fontColor, 0.34)) !== null && _setOpacity3 !== void 0 ? _setOpacity3 : accordionTokens.disabledTitleLabelFontColor;
100
- accordionTokens.disabledArrowColor = (_setOpacity4 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$accordion9 = theme.accordion) === null || _theme$accordion9 === void 0 ? void 0 : _theme$accordion9.accentColor, 0.34)) !== null && _setOpacity4 !== void 0 ? _setOpacity4 : accordionTokens.disabledArrowColor;
101
- accordionTokens.disabledIconColor = (_setOpacity5 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$accordion10 = theme.accordion) === null || _theme$accordion10 === void 0 ? void 0 : _theme$accordion10.accentColor, 0.34)) !== null && _setOpacity5 !== void 0 ? _setOpacity5 : accordionTokens.disabledIconColor;
102
- var buttonTokens = componentTokensCopy.button;
103
- buttonTokens.primaryFontColor = (_ref6 = theme === null || theme === void 0 ? void 0 : (_theme$button = theme.button) === null || _theme$button === void 0 ? void 0 : _theme$button.primaryFontColor) !== null && _ref6 !== void 0 ? _ref6 : buttonTokens.primaryFontColor;
104
- buttonTokens.primaryBackgroundColor = (_ref7 = theme === null || theme === void 0 ? void 0 : (_theme$button2 = theme.button) === null || _theme$button2 === void 0 ? void 0 : _theme$button2.baseColor) !== null && _ref7 !== void 0 ? _ref7 : buttonTokens.primaryBackgroundColor;
105
- buttonTokens.secondaryFontColor = (_ref8 = theme === null || theme === void 0 ? void 0 : (_theme$button3 = theme.button) === null || _theme$button3 === void 0 ? void 0 : _theme$button3.baseColor) !== null && _ref8 !== void 0 ? _ref8 : buttonTokens.secondaryFontColor;
106
- buttonTokens.secondaryHoverFontColor = (_ref9 = theme === null || theme === void 0 ? void 0 : (_theme$button4 = theme.button) === null || _theme$button4 === void 0 ? void 0 : _theme$button4.secondaryHoverFontColor) !== null && _ref9 !== void 0 ? _ref9 : buttonTokens.secondaryHoverFontColor;
107
- buttonTokens.secondaryBorderColor = (_ref10 = theme === null || theme === void 0 ? void 0 : (_theme$button5 = theme.button) === null || _theme$button5 === void 0 ? void 0 : _theme$button5.baseColor) !== null && _ref10 !== void 0 ? _ref10 : buttonTokens.secondaryBorderColor;
108
- buttonTokens.secondaryHoverBackgroundColor = (_ref11 = theme === null || theme === void 0 ? void 0 : (_theme$button6 = theme.button) === null || _theme$button6 === void 0 ? void 0 : _theme$button6.baseColor) !== null && _ref11 !== void 0 ? _ref11 : buttonTokens.secondaryHoverBackgroundColor;
109
- buttonTokens.textFontColor = (_ref12 = theme === null || theme === void 0 ? void 0 : (_theme$button7 = theme.button) === null || _theme$button7 === void 0 ? void 0 : _theme$button7.baseColor) !== null && _ref12 !== void 0 ? _ref12 : buttonTokens.textFontColor;
110
- buttonTokens.primaryHoverBackgroundColor = (_subLightness = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$button8 = theme.button) === null || _theme$button8 === void 0 ? void 0 : _theme$button8.baseColor, 8)) !== null && _subLightness !== void 0 ? _subLightness : buttonTokens.primaryHoverBackgroundColor;
111
- buttonTokens.primaryActiveBackgroundColor = (_subLightness2 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$button9 = theme.button) === null || _theme$button9 === void 0 ? void 0 : _theme$button9.baseColor, 18)) !== null && _subLightness2 !== void 0 ? _subLightness2 : buttonTokens.primaryActiveBackgroundColor;
112
- buttonTokens.secondaryActiveBackgroundColor = (_subLightness3 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$button10 = theme.button) === null || _theme$button10 === void 0 ? void 0 : _theme$button10.baseColor, 18)) !== null && _subLightness3 !== void 0 ? _subLightness3 : buttonTokens.secondaryActiveBackgroundColor;
113
- buttonTokens.textHoverBackgroundColor = (_addLightness = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$button11 = theme.button) === null || _theme$button11 === void 0 ? void 0 : _theme$button11.baseColor, 57)) !== null && _addLightness !== void 0 ? _addLightness : buttonTokens.textHoverBackgroundColor;
114
- buttonTokens.textActiveBackgroundColor = (_addLightness2 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$button12 = theme.button) === null || _theme$button12 === void 0 ? void 0 : _theme$button12.baseColor, 52)) !== null && _addLightness2 !== void 0 ? _addLightness2 : buttonTokens.textActiveBackgroundColor;
115
- var checkboxTokens = componentTokensCopy.checkbox;
116
- checkboxTokens.backgroundColorChecked = (_ref13 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox = theme.checkbox) === null || _theme$checkbox === void 0 ? void 0 : _theme$checkbox.baseColor) !== null && _ref13 !== void 0 ? _ref13 : checkboxTokens.backgroundColorChecked;
117
- checkboxTokens.borderColor = (_ref14 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox2 = theme.checkbox) === null || _theme$checkbox2 === void 0 ? void 0 : _theme$checkbox2.baseColor) !== null && _ref14 !== void 0 ? _ref14 : checkboxTokens.borderColor;
118
- checkboxTokens.checkColor = (_ref15 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox3 = theme.checkbox) === null || _theme$checkbox3 === void 0 ? void 0 : _theme$checkbox3.checkColor) !== null && _ref15 !== void 0 ? _ref15 : checkboxTokens.checkColor;
119
- 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;
120
- 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;
121
- 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;
122
- var chipTokens = componentTokensCopy.chip;
123
- chipTokens.backgroundColor = (_ref16 = theme === null || theme === void 0 ? void 0 : (_theme$chip = theme.chip) === null || _theme$chip === void 0 ? void 0 : _theme$chip.baseColor) !== null && _ref16 !== void 0 ? _ref16 : chipTokens.backgroundColor;
124
- 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;
125
- chipTokens.fontColor = (_ref17 = theme === null || theme === void 0 ? void 0 : (_theme$chip3 = theme.chip) === null || _theme$chip3 === void 0 ? void 0 : _theme$chip3.fontColor) !== null && _ref17 !== void 0 ? _ref17 : chipTokens.fontColor;
126
- chipTokens.disabledFontColor = (_setOpacity10 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip4 = theme.chip) === null || _theme$chip4 === void 0 ? void 0 : _theme$chip4.fontColor, 0.34)) !== null && _setOpacity10 !== void 0 ? _setOpacity10 : chipTokens.disabledFontColor;
127
- var dateTokens = componentTokensCopy.date;
128
- dateTokens.pickerSelectedDateBackgroundColor = (_ref18 = theme === null || theme === void 0 ? void 0 : (_theme$date = theme.date) === null || _theme$date === void 0 ? void 0 : _theme$date.baseColor) !== null && _ref18 !== void 0 ? _ref18 : dateTokens.pickerSelectedDateBackgroundColor;
129
- dateTokens.pickerSelectedDateColor = (_ref19 = theme === null || theme === void 0 ? void 0 : (_theme$date2 = theme.date) === null || _theme$date2 === void 0 ? void 0 : _theme$date2.accentColor) !== null && _ref19 !== void 0 ? _ref19 : dateTokens.pickerSelectedDateColor;
130
- 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;
131
- var dropdownTokens = componentTokensCopy.dropdown;
132
- dropdownTokens.buttonBackgroundColor = (_ref20 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown = theme.dropdown) === null || _theme$dropdown === void 0 ? void 0 : _theme$dropdown.baseColor) !== null && _ref20 !== void 0 ? _ref20 : dropdownTokens.buttonBackgroundColor;
133
- dropdownTokens.buttonFontColor = (_ref21 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown2 = theme.dropdown) === null || _theme$dropdown2 === void 0 ? void 0 : _theme$dropdown2.fontColor) !== null && _ref21 !== void 0 ? _ref21 : dropdownTokens.buttonFontColor;
134
- dropdownTokens.hoverButtonBackgroundColor = (_setOpacity12 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown3 = theme.dropdown) === null || _theme$dropdown3 === void 0 ? void 0 : _theme$dropdown3.baseColor, 0.34)) !== null && _setOpacity12 !== void 0 ? _setOpacity12 : dropdownTokens.hoverButtonBackgroundColor;
135
- dropdownTokens.activeButtonBackgroundColor = (_setOpacity13 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown4 = theme.dropdown) === null || _theme$dropdown4 === void 0 ? void 0 : _theme$dropdown4.baseColor, 0.7)) !== null && _setOpacity13 !== void 0 ? _setOpacity13 : dropdownTokens.activeButtonBackgroundColor;
136
- dropdownTokens.hoverOptionBackgroundColor = (_setOpacity14 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown5 = theme.dropdown) === null || _theme$dropdown5 === void 0 ? void 0 : _theme$dropdown5.baseColor, 0.34)) !== null && _setOpacity14 !== void 0 ? _setOpacity14 : dropdownTokens.hoverOptionBackgroundColor;
137
- dropdownTokens.activeOptionBackgroundColor = (_setOpacity15 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown6 = theme.dropdown) === null || _theme$dropdown6 === void 0 ? void 0 : _theme$dropdown6.baseColor, 0.7)) !== null && _setOpacity15 !== void 0 ? _setOpacity15 : dropdownTokens.activeOptionBackgroundColor;
138
- var footerTokens = componentTokensCopy.footer;
139
- footerTokens.backgroundColor = (_ref22 = theme === null || theme === void 0 ? void 0 : (_theme$footer = theme.footer) === null || _theme$footer === void 0 ? void 0 : _theme$footer.baseColor) !== null && _ref22 !== void 0 ? _ref22 : footerTokens.backgroundColor;
140
- footerTokens.bottomLinksFontColor = (_ref23 = theme === null || theme === void 0 ? void 0 : (_theme$footer2 = theme.footer) === null || _theme$footer2 === void 0 ? void 0 : _theme$footer2.fontColor) !== null && _ref23 !== void 0 ? _ref23 : footerTokens.bottomLinksFontColor;
141
- footerTokens.copyrightFontColor = (_ref24 = theme === null || theme === void 0 ? void 0 : (_theme$footer3 = theme.footer) === null || _theme$footer3 === void 0 ? void 0 : _theme$footer3.fontColor) !== null && _ref24 !== void 0 ? _ref24 : footerTokens.copyrightFontColor;
142
- footerTokens.socialLinksColor = (_ref25 = theme === null || theme === void 0 ? void 0 : (_theme$footer4 = theme.footer) === null || _theme$footer4 === void 0 ? void 0 : _theme$footer4.fontColor) !== null && _ref25 !== void 0 ? _ref25 : footerTokens.socialLinksColor;
143
- footerTokens.bottomLinksDividerColor = (_ref26 = theme === null || theme === void 0 ? void 0 : (_theme$footer5 = theme.footer) === null || _theme$footer5 === void 0 ? void 0 : _theme$footer5.accentColor) !== null && _ref26 !== void 0 ? _ref26 : footerTokens.bottomLinksDividerColor;
144
- footerTokens.logo = (_ref27 = theme === null || theme === void 0 ? void 0 : (_theme$footer6 = theme.footer) === null || _theme$footer6 === void 0 ? void 0 : _theme$footer6.logo) !== null && _ref27 !== void 0 ? _ref27 : footerTokens.logo;
145
- var headerTokens = componentTokensCopy.header;
146
- headerTokens.backgroundColor = (_ref28 = theme === null || theme === void 0 ? void 0 : (_theme$header = theme.header) === null || _theme$header === void 0 ? void 0 : _theme$header.baseColor) !== null && _ref28 !== void 0 ? _ref28 : headerTokens.backgroundColor;
147
- headerTokens.underlinedColor = (_ref29 = theme === null || theme === void 0 ? void 0 : (_theme$header2 = theme.header) === null || _theme$header2 === void 0 ? void 0 : _theme$header2.accentColor) !== null && _ref29 !== void 0 ? _ref29 : headerTokens.underlinedColor;
148
- headerTokens.menuBackgroundColor = (_ref30 = theme === null || theme === void 0 ? void 0 : (_theme$header3 = theme.header) === null || _theme$header3 === void 0 ? void 0 : _theme$header3.menuBaseColor) !== null && _ref30 !== void 0 ? _ref30 : headerTokens.menuBackgroundColor;
149
- headerTokens.hamburguerFontColor = (_ref31 = theme === null || theme === void 0 ? void 0 : (_theme$header4 = theme.header) === null || _theme$header4 === void 0 ? void 0 : _theme$header4.fontColor) !== null && _ref31 !== void 0 ? _ref31 : headerTokens.hamburguerFontColor;
150
- headerTokens.hamburguerIconColor = (_ref32 = theme === null || theme === void 0 ? void 0 : (_theme$header5 = theme.header) === null || _theme$header5 === void 0 ? void 0 : _theme$header5.hamburguerColor) !== null && _ref32 !== void 0 ? _ref32 : headerTokens.hamburguerIconColor;
151
- headerTokens.hamburguerHoverColor = (_setOpacity16 = 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 && _setOpacity16 !== void 0 ? _setOpacity16 : headerTokens.hamburguerHoverColor;
152
- headerTokens.logo = (_ref33 = theme === null || theme === void 0 ? void 0 : (_theme$header7 = theme.header) === null || _theme$header7 === void 0 ? void 0 : _theme$header7.logo) !== null && _ref33 !== void 0 ? _ref33 : headerTokens.logo;
153
- headerTokens.logoResponsive = (_ref34 = theme === null || theme === void 0 ? void 0 : (_theme$header8 = theme.header) === null || _theme$header8 === void 0 ? void 0 : _theme$header8.logoResponsive) !== null && _ref34 !== void 0 ? _ref34 : headerTokens.logoResponsive;
154
- var inputTokens = componentTokensCopy.inputText;
155
- inputTokens.selectedOptionBackgroundColor = (_setOpacity17 = 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 && _setOpacity17 !== void 0 ? _setOpacity17 : inputTokens.selectedOptionBackgroundColor;
156
- var newInputTokens = componentTokensCopy.newInputText;
157
- newInputTokens.hoverListOptionBackgroundColor = (_ref35 = theme === null || theme === void 0 ? void 0 : (_theme$newInputText = theme.newInputText) === null || _theme$newInputText === void 0 ? void 0 : _theme$newInputText.baseColor) !== null && _ref35 !== void 0 ? _ref35 : newInputTokens.hoverListOptionBackgroundColor;
158
- newInputTokens.activeListOptionBackgroundColor = (_subLightness4 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$newInputText2 = theme.newInputText) === null || _theme$newInputText2 === void 0 ? void 0 : _theme$newInputText2.baseColor, 15)) !== null && _subLightness4 !== void 0 ? _subLightness4 : newInputTokens.activeListOptionBackgroundColor;
159
- var paginatorTokens = componentTokensCopy.paginator;
160
- 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;
161
- 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;
162
- var progressBarTokens = componentTokensCopy.progressBar;
163
- 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;
164
- 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;
165
- var radioTokens = componentTokensCopy.radio;
166
- 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;
167
- radioTokens.disabledColor = (_setOpacity18 = 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 && _setOpacity18 !== void 0 ? _setOpacity18 : radioTokens.disabledColor;
168
- var selectTokens = componentTokensCopy.select;
169
- 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;
170
- selectTokens.optionFontColor = (_ref42 = theme === null || theme === void 0 ? void 0 : (_theme$select2 = theme.select) === null || _theme$select2 === void 0 ? void 0 : _theme$select2.fontColor) !== null && _ref42 !== void 0 ? _ref42 : selectTokens.optionFontColor;
171
- selectTokens.valueFontColor = (_ref43 = theme === null || theme === void 0 ? void 0 : (_theme$select3 = theme.select) === null || _theme$select3 === void 0 ? void 0 : _theme$select3.fontColor) !== null && _ref43 !== void 0 ? _ref43 : selectTokens.valueFontColor;
172
- selectTokens.hoverOptionBackgroundColor = (_addLightness3 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$select4 = theme.select) === null || _theme$select4 === void 0 ? void 0 : _theme$select4.baseColor, 10)) !== null && _addLightness3 !== void 0 ? _addLightness3 : selectTokens.hoverOptionBackgroundColor;
173
- selectTokens.activeOptionBackgroundColor = (_subLightness5 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$select5 = theme.select) === null || _theme$select5 === void 0 ? void 0 : _theme$select5.baseColor, 15)) !== null && _subLightness5 !== void 0 ? _subLightness5 : selectTokens.activeOptionBackgroundColor;
174
- var sideNavTokens = componentTokensCopy.sidenav;
175
- sideNavTokens.backgroundColor = (_ref44 = theme === null || theme === void 0 ? void 0 : (_theme$sidenav = theme.sidenav) === null || _theme$sidenav === void 0 ? void 0 : _theme$sidenav.baseColor) !== null && _ref44 !== void 0 ? _ref44 : sideNavTokens.backgroundColor;
176
- 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;
177
- sideNavTokens.arrowColor = (_ref45 = theme === null || theme === void 0 ? void 0 : (_theme$sidenav3 = theme.sidenav) === null || _theme$sidenav3 === void 0 ? void 0 : _theme$sidenav3.arrowAccentColor) !== null && _ref45 !== void 0 ? _ref45 : sideNavTokens.arrowColor;
178
- var sliderTokens = componentTokensCopy.slider;
179
- sliderTokens.thumbBackgroundColor = (_ref46 = theme === null || theme === void 0 ? void 0 : (_theme$slider = theme.slider) === null || _theme$slider === void 0 ? void 0 : _theme$slider.baseColor) !== null && _ref46 !== void 0 ? _ref46 : sliderTokens.thumbBackgroundColor;
180
- sliderTokens.tickBackgroundColor = (_ref47 = theme === null || theme === void 0 ? void 0 : (_theme$slider2 = theme.slider) === null || _theme$slider2 === void 0 ? void 0 : _theme$slider2.baseColor) !== null && _ref47 !== void 0 ? _ref47 : sliderTokens.tickBackgroundColor;
181
- sliderTokens.trackLineColor = (_ref48 = theme === null || theme === void 0 ? void 0 : (_theme$slider3 = theme.slider) === null || _theme$slider3 === void 0 ? void 0 : _theme$slider3.baseColor) !== null && _ref48 !== void 0 ? _ref48 : sliderTokens.trackLineColor;
182
- sliderTokens.hoverThumbBackgroundColor = (_subLightness6 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$slider4 = theme.slider) === null || _theme$slider4 === void 0 ? void 0 : _theme$slider4.baseColor, 15)) !== null && _subLightness6 !== void 0 ? _subLightness6 : sliderTokens.thumbBackgroundColor;
183
- sliderTokens.activeThumbBackgroundColor = (_subLightness7 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$slider5 = theme.slider) === null || _theme$slider5 === void 0 ? void 0 : _theme$slider5.baseColor, 15)) !== null && _subLightness7 !== void 0 ? _subLightness7 : sliderTokens.thumbBackgroundColor;
184
- sliderTokens.totalLineColor = (_setOpacity20 = 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 && _setOpacity20 !== void 0 ? _setOpacity20 : sliderTokens.totalLineColor;
185
- sliderTokens.disabledThumbBackgroundColor = (_setOpacity21 = 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 && _setOpacity21 !== void 0 ? _setOpacity21 : sliderTokens.disabledThumbBackgroundColor;
186
- sliderTokens.disabledTickBackgroundColor = (_setOpacity22 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider8 = theme.slider) === null || _theme$slider8 === void 0 ? void 0 : _theme$slider8.baseColor, 0.34)) !== null && _setOpacity22 !== void 0 ? _setOpacity22 : sliderTokens.disabledTickBackgroundColor;
187
- sliderTokens.disabledTrackLineColor = (_setOpacity23 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider9 = theme.slider) === null || _theme$slider9 === void 0 ? void 0 : _theme$slider9.baseColor, 0.34)) !== null && _setOpacity23 !== void 0 ? _setOpacity23 : sliderTokens.disabledTrackLineColor;
188
- var spinnerTokens = componentTokensCopy.spinner;
189
- spinnerTokens.trackCircleColor = (_ref49 = theme === null || theme === void 0 ? void 0 : (_theme$spinner = theme.spinner) === null || _theme$spinner === void 0 ? void 0 : _theme$spinner.accentColor) !== null && _ref49 !== void 0 ? _ref49 : spinnerTokens.trackCircleColor;
190
- spinnerTokens.totalCircleColor = (_ref50 = theme === null || theme === void 0 ? void 0 : (_theme$spinner2 = theme.spinner) === null || _theme$spinner2 === void 0 ? void 0 : _theme$spinner2.baseColor) !== null && _ref50 !== void 0 ? _ref50 : spinnerTokens.totalCircleColor;
191
- var switchTokens = componentTokensCopy["switch"];
192
- switchTokens.checkedTrackBackgroundColor = (_ref51 = theme === null || theme === void 0 ? void 0 : (_theme$switch = theme["switch"]) === null || _theme$switch === void 0 ? void 0 : _theme$switch.checkedBaseColor) !== null && _ref51 !== void 0 ? _ref51 : switchTokens.checkedTrackBackgroundColor;
193
- 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;
194
- var tableTokens = componentTokensCopy.table;
195
- tableTokens.headerBackgroundColor = (_ref52 = theme === null || theme === void 0 ? void 0 : (_theme$table = theme.table) === null || _theme$table === void 0 ? void 0 : _theme$table.baseColor) !== null && _ref52 !== void 0 ? _ref52 : tableTokens.headerBackgroundColor;
196
- tableTokens.headerFontColor = (_ref53 = theme === null || theme === void 0 ? void 0 : (_theme$table2 = theme.table) === null || _theme$table2 === void 0 ? void 0 : _theme$table2.fontColor) !== null && _ref53 !== void 0 ? _ref53 : tableTokens.headerFontColor;
197
- var tabsTokens = componentTokensCopy.tabs;
198
- tabsTokens.selectedFontColor = (_ref54 = theme === null || theme === void 0 ? void 0 : (_theme$tabs = theme.tabs) === null || _theme$tabs === void 0 ? void 0 : _theme$tabs.baseColor) !== null && _ref54 !== void 0 ? _ref54 : tabsTokens.selectedFontColor;
199
- tabsTokens.selectedIconColor = (_ref55 = theme === null || theme === void 0 ? void 0 : (_theme$tabs2 = theme.tabs) === null || _theme$tabs2 === void 0 ? void 0 : _theme$tabs2.baseColor) !== null && _ref55 !== void 0 ? _ref55 : tabsTokens.selectedIconColor;
200
- tabsTokens.selectedUnderlineColor = (_ref56 = theme === null || theme === void 0 ? void 0 : (_theme$tabs3 = theme.tabs) === null || _theme$tabs3 === void 0 ? void 0 : _theme$tabs3.baseColor) !== null && _ref56 !== void 0 ? _ref56 : tabsTokens.selectedUnderlineColor;
201
- tabsTokens.focusOutline = (_ref57 = theme === null || theme === void 0 ? void 0 : (_theme$tabs4 = theme.tabs) === null || _theme$tabs4 === void 0 ? void 0 : _theme$tabs4.baseColor) !== null && _ref57 !== void 0 ? _ref57 : tabsTokens.focusOutline;
202
- tabsTokens.hoverBackgroundColor = (_addLightness4 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs5 = theme.tabs) === null || _theme$tabs5 === void 0 ? void 0 : _theme$tabs5.baseColor, 58)) !== null && _addLightness4 !== void 0 ? _addLightness4 : tabsTokens.hoverBackgroundColor;
203
- tabsTokens.pressedBackgroundColor = (_addLightness5 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs6 = theme.tabs) === null || _theme$tabs6 === void 0 ? void 0 : _theme$tabs6.baseColor, 53)) !== null && _addLightness5 !== void 0 ? _addLightness5 : tabsTokens.pressedBackgroundColor;
204
- var toggleGroupTokens = componentTokensCopy.toggleGroup;
205
- toggleGroupTokens.selectedBackgroundColor = (_ref58 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup = theme.toggleGroup) === null || _theme$toggleGroup === void 0 ? void 0 : _theme$toggleGroup.selectedBaseColor) !== null && _ref58 !== void 0 ? _ref58 : buttonTokens.selectedBackgroundColor;
206
- toggleGroupTokens.selectedFontColor = (_ref59 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup2 = theme.toggleGroup) === null || _theme$toggleGroup2 === void 0 ? void 0 : _theme$toggleGroup2.selectedFontColor) !== null && _ref59 !== void 0 ? _ref59 : toggleGroupTokens.selectedFontColor;
207
- toggleGroupTokens.unselectedBackgroundColor = (_ref60 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup3 = theme.toggleGroup) === null || _theme$toggleGroup3 === void 0 ? void 0 : _theme$toggleGroup3.unselectedBaseColor) !== null && _ref60 !== void 0 ? _ref60 : toggleGroupTokens.unselectedBackgroundColor;
208
- toggleGroupTokens.unselectedActiveBackgroundColor = (_ref61 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup4 = theme.toggleGroup) === null || _theme$toggleGroup4 === void 0 ? void 0 : _theme$toggleGroup4.selectedBaseColor) !== null && _ref61 !== void 0 ? _ref61 : toggleGroupTokens.unselectedActiveBackgroundColor;
209
- toggleGroupTokens.unselectedFontColor = (_ref62 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup5 = theme.toggleGroup) === null || _theme$toggleGroup5 === void 0 ? void 0 : _theme$toggleGroup5.unselectedFontColor) !== null && _ref62 !== void 0 ? _ref62 : toggleGroupTokens.unselectedFontColor;
210
- toggleGroupTokens.selectedHoverBackgroundColor = (_subLightness8 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup6 = theme.toggleGroup) === null || _theme$toggleGroup6 === void 0 ? void 0 : _theme$toggleGroup6.selectedBaseColor, 8)) !== null && _subLightness8 !== void 0 ? _subLightness8 : buttonTokens.selectedHoverBackgroundColor;
211
- toggleGroupTokens.selectedActiveBackgroundColor = (_subLightness9 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup7 = theme.toggleGroup) === null || _theme$toggleGroup7 === void 0 ? void 0 : _theme$toggleGroup7.selectedBaseColor, 18)) !== null && _subLightness9 !== void 0 ? _subLightness9 : toggleGroupTokens.selectedActiveBackgroundColor;
212
- toggleGroupTokens.selectedDisabledBackgroundColor = (_addLightness6 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup8 = theme.toggleGroup) === null || _theme$toggleGroup8 === void 0 ? void 0 : _theme$toggleGroup8.selectedBaseColor, 57)) !== null && _addLightness6 !== void 0 ? _addLightness6 : toggleGroupTokens.selectedDisabledBackgroundColor;
213
- toggleGroupTokens.selectedDisabledFontColor = (_addLightness7 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup9 = theme.toggleGroup) === null || _theme$toggleGroup9 === void 0 ? void 0 : _theme$toggleGroup9.selectedBaseColor, 42)) !== null && _addLightness7 !== void 0 ? _addLightness7 : toggleGroupTokens.selectedDisabledFontColor;
214
- toggleGroupTokens.unselectedHoverBackgroundColor = (_subLightness10 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup10 = theme.toggleGroup) === null || _theme$toggleGroup10 === void 0 ? void 0 : _theme$toggleGroup10.unselectedBaseColor, 8)) !== null && _subLightness10 !== void 0 ? _subLightness10 : toggleGroupTokens.unselectedHoverBackgroundColor;
215
- toggleGroupTokens.unselectedDisabledBackgroundColor = (_addLightness8 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup11 = theme.toggleGroup) === null || _theme$toggleGroup11 === void 0 ? void 0 : _theme$toggleGroup11.unselectedBaseColor, 5)) !== null && _addLightness8 !== void 0 ? _addLightness8 : toggleGroupTokens.unselectedDisabledBackgroundColor;
216
- toggleGroupTokens.unselectedDisabledFontColor = (_setOpacity25 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup12 = theme.toggleGroup) === null || _theme$toggleGroup12 === void 0 ? void 0 : _theme$toggleGroup12.unselectedFontColor, 0.34)) !== null && _setOpacity25 !== void 0 ? _setOpacity25 : toggleGroupTokens.unselectedDisabledFontColor;
217
- var wizardTokens = componentTokensCopy.wizard;
218
- wizardTokens.stepContainerSelectedBackgroundColor = (_ref63 = theme === null || theme === void 0 ? void 0 : (_theme$wizard = theme.wizard) === null || _theme$wizard === void 0 ? void 0 : _theme$wizard.baseColor) !== null && _ref63 !== void 0 ? _ref63 : wizardTokens.stepContainerSelectedBackgroundColor;
219
- wizardTokens.stepContainerSelectedFontColor = (_ref64 = theme === null || theme === void 0 ? void 0 : (_theme$wizard2 = theme.wizard) === null || _theme$wizard2 === void 0 ? void 0 : _theme$wizard2.fontColor) !== null && _ref64 !== void 0 ? _ref64 : wizardTokens.stepContainerSelectedFontColor;
220
- return componentTokensCopy;
221
- };
222
-
223
- var ThemeProvider = function ThemeProvider(_ref65) {
224
- var theme = _ref65.theme,
225
- advancedTheme = _ref65.advancedTheme,
226
- children = _ref65.children;
227
- var parsedTheme = (0, _react.useMemo)(function () {
228
- return theme && parseTheme(theme) || advancedTheme && parseAdvancedTheme(advancedTheme);
229
- }, [theme, advancedTheme]);
230
- return _react["default"].createElement(Halstack, null, _react["default"].createElement(ThemeContext.Provider, {
231
- value: parsedTheme
232
- }, children));
233
- };
234
-
235
- exports.ThemeProvider = ThemeProvider;
236
-
237
- var Halstack = _styledComponents["default"].div(_templateObject());
238
-
239
- var _default = ThemeContext;
240
- exports["default"] = _default;
@@ -1,63 +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["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _react = _interopRequireDefault(require("react"));
15
-
16
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
17
-
18
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
19
-
20
- function _templateObject() {
21
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n display: flex;\n padding-bottom: 1px;\n padding-right: 1px;\n flex-wrap: wrap;\n box-sizing: border-box;\n align-items: center;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n"]);
22
-
23
- _templateObject = function _templateObject() {
24
- return data;
25
- };
26
-
27
- return data;
28
- }
29
-
30
- var DxcBadge = function DxcBadge(_ref) {
31
- var notificationText = _ref.notificationText;
32
- var colorsTheme = (0, _useTheme["default"])();
33
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
34
- theme: colorsTheme.tabs
35
- }, _react["default"].createElement(StyledDxcBadge, {
36
- notificationText: notificationText
37
- }, _react["default"].createElement("span", null, notificationText)));
38
- };
39
-
40
- var StyledDxcBadge = _styledComponents["default"].div(_templateObject(), function (props) {
41
- return props.theme.badgeBackgroundColor;
42
- }, function (props) {
43
- return props.theme.badgeFontFamily;
44
- }, function (props) {
45
- return props.theme.badgeFontSize;
46
- }, function (props) {
47
- return props.theme.badgeFontStyle;
48
- }, function (props) {
49
- return props.theme.badgeFontWeight;
50
- }, function (props) {
51
- return props.theme.badgeFontColor;
52
- }, function (props) {
53
- return props.theme.badgeLetterSpacing;
54
- }, function (props) {
55
- return props.notificationText === true ? props.theme.badgeWidth : props.theme.badgeWidthWithNotificationNumber;
56
- }, function (props) {
57
- return props.notificationText === true ? props.theme.badgeHeight : props.theme.badgeHeightWithNotificationNumber;
58
- }, function (props) {
59
- return props.notificationText === true ? props.theme.badgeRadius : props.theme.badgeRadiusWithNotificationNumber;
60
- });
61
-
62
- var _default = DxcBadge;
63
- exports["default"] = _default;
@@ -1,144 +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 _Checkbox = _interopRequireDefault(require("./Checkbox"));
18
-
19
- var onChange = (0, _addonActions.action)("onChange");
20
-
21
- onChange.toString = function () {
22
- return "onChangeHandler";
23
- };
24
-
25
- (0, _react2.storiesOf)("Form Components|Checkbox", module).add("Component", function () {
26
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Checkbox["default"], {
27
- checked: false,
28
- theme: "light",
29
- value: "TestValue",
30
- label: "Checkbox",
31
- labelPosition: "after",
32
- onChange: onChange
33
- }), _react["default"].createElement(_Checkbox["default"], {
34
- checked: false,
35
- theme: "light",
36
- value: "TestValue",
37
- label: "Label before",
38
- labelPosition: "before",
39
- onChange: onChange
40
- }), _react["default"].createElement(_Checkbox["default"], {
41
- checked: false,
42
- theme: "light",
43
- value: "TestValue",
44
- label: "Label after",
45
- labelPosition: "after",
46
- onChange: onChange,
47
- required: true
48
- }), _react["default"].createElement(_Checkbox["default"], {
49
- checked: false,
50
- disabled: true,
51
- theme: "light",
52
- value: "TestValue",
53
- label: "Disabled unchecked",
54
- labelPosition: "after",
55
- onChange: onChange
56
- }), _react["default"].createElement(_Checkbox["default"], {
57
- checked: true,
58
- disabled: true,
59
- theme: "light",
60
- value: "TestValue",
61
- label: "Disabled checked",
62
- labelPosition: "after",
63
- onChange: onChange
64
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
65
- style: {
66
- background: "black"
67
- }
68
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Checkbox["default"], {
69
- checked: false,
70
- theme: "dark",
71
- value: "TestValue",
72
- label: "Checkbox",
73
- labelPosition: "after",
74
- onChange: onChange,
75
- required: true
76
- }), _react["default"].createElement(_Checkbox["default"], {
77
- checked: false,
78
- theme: "dark",
79
- value: "TestValue",
80
- label: "Label before",
81
- labelPosition: "before",
82
- onChange: onChange
83
- }), _react["default"].createElement(_Checkbox["default"], {
84
- checked: false,
85
- theme: "dark",
86
- value: "TestValue",
87
- label: "Label after",
88
- labelPosition: "after",
89
- onChange: onChange
90
- }), _react["default"].createElement(_Checkbox["default"], {
91
- checked: false,
92
- disabled: true,
93
- theme: "dark",
94
- value: "TestValue",
95
- label: "Disabled unchecked",
96
- labelPosition: "after",
97
- onChange: onChange
98
- }), _react["default"].createElement(_Checkbox["default"], {
99
- checked: true,
100
- disabled: true,
101
- theme: "dark",
102
- value: "TestValue",
103
- label: "Disabled checked",
104
- labelPosition: "after",
105
- onChange: onChange
106
- }))));
107
- }, {
108
- notes: {
109
- markdown: _readme["default"]
110
- }
111
- });
112
-
113
- var knobProps = function knobProps() {
114
- return {
115
- label: (0, _addonKnobs.text)("Label", "Test Checkbox"),
116
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
117
- labelPosition: (0, _addonKnobs.select)("Label position", {
118
- before: "before",
119
- after: "after"
120
- }, "before"),
121
- theme: (0, _addonKnobs.select)("Theme", {
122
- light: "light",
123
- dark: "dark"
124
- }, "light"),
125
- disableRipple: (0, _addonKnobs["boolean"])("disableRipple", false),
126
- required: (0, _addonKnobs["boolean"])("Required", false)
127
- };
128
- };
129
-
130
- (0, _react2.storiesOf)("Form Components|Checkbox", module).add("Knobs example", function () {
131
- var props = knobProps();
132
- return _react["default"].createElement("div", {
133
- style: {
134
- background: props.theme === "dark" && "black" || "transparent"
135
- }
136
- }, _react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({}, props, {
137
- value: "TestValue",
138
- onChange: onChange
139
- })));
140
- }, {
141
- notes: {
142
- markdown: _readme["default"]
143
- }
144
- });
@@ -1,116 +0,0 @@
1
- # DXC Checkbox Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcCheckbox } from "@dxc-technology/halstack-react";
7
-
8
- <DxcCheckbox onChange={handleNewValue} label="Test Checkbox" checked={checked} />;
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>checked: boolean</td>
21
- <td><code>false</code></td>
22
- <td>If true, the component is checked.</td>
23
- </tr>
24
- <tr>
25
- <td>value: any</td>
26
- <td></td>
27
- <td>Will be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the checkbox is checked </td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td></td>
32
- <td>Text to be placed next to the checkbox.</td>
33
- </tr>
34
- <tr>
35
- <td>labelPosition: 'before' | 'after'</td>
36
- <td><code>'before'</code></td>
37
- <td>Whether the label should appear after or before the checkbox.</td>
38
- </tr>
39
- <tr>
40
- <td>theme: 'light' | 'dark'</td>
41
- <td><code>'light'</code></td>
42
- <td>Uses one of the available component themes.</td>
43
- </tr>
44
- <tr>
45
- <td>name: string</td>
46
- <td></td>
47
- <td>Name attribute of the input element.</td>
48
- </tr>
49
- <tr>
50
- <td>disabled: boolean</td>
51
- <td><code>false</code></td>
52
- <td>If true, the component will be disabled.</td>
53
- </tr>
54
- <tr>
55
- <td>required: boolean</td>
56
- <td><code>false</code></td>
57
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
58
- </tr>
59
- <tr>
60
- <td>disableRipple: boolean</td>
61
- <td><code>false</code></td>
62
- <td>If true, the ripple effect will be disabled.</td>
63
- </tr>
64
- <tr>
65
- <td>onChange: function</td>
66
- <td></td>
67
- <td>This function will be called when the user clicks the checkbox. The new value will be passed as a parameter.<br>
68
- </td>
69
- </tr>
70
- </table>
71
-
72
- ## Examples
73
-
74
- - Basic checkbox - Light theme - Enabled - Label after checkbox - With ripple
75
-
76
- ```js
77
- import React from "react";
78
- import { DxcCheckbox } from "@dxc-technology/halstack-react";
79
-
80
- class App extends React.Component {
81
- state = {
82
- isChecked: true
83
- };
84
- constructor() {
85
- super();
86
- this.handleChange = this.handleChange.bind(this);
87
- }
88
-
89
- handleChange(checked) {
90
- this.setState({
91
- isChecked: checked
92
- });
93
- }
94
-
95
- render() {
96
- return (
97
- <div>
98
- <DxcCheckbox
99
- checked={this.state.isChecked}
100
- value="Checkbox1"
101
- label="Checkbox 1"
102
- labelPosition="after"
103
- theme="light"
104
- name="Checkbox"
105
- disabled={false}
106
- disableRipple={false}
107
- onChange={event => this.handleChange(event)}
108
- />
109
- </div>
110
- );
111
- }
112
- }
113
- export default App;
114
-
115
-
116
- ```