@windstream/react-shared-components 0.1.89 → 0.1.91

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 (209) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.esm.js +3 -3
  3. package/dist/contentful/index.esm.js.map +1 -1
  4. package/dist/contentful/index.js +3 -3
  5. package/dist/contentful/index.js.map +1 -1
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.esm.js +13 -5
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +13 -5
  10. package/dist/index.js.map +1 -1
  11. package/dist/next/index.esm.js +2 -2
  12. package/dist/next/index.esm.js.map +1 -1
  13. package/dist/next/index.js +2 -2
  14. package/dist/next/index.js.map +1 -1
  15. package/dist/utils/index.esm.js +1 -1
  16. package/dist/utils/index.esm.js.map +1 -1
  17. package/dist/utils/index.js +1 -1
  18. package/dist/utils/index.js.map +1 -1
  19. package/package.json +185 -185
  20. package/src/components/accordion/Accordion.stories.tsx +230 -230
  21. package/src/components/accordion/index.tsx +70 -70
  22. package/src/components/accordion/types.ts +12 -12
  23. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  24. package/src/components/alert-card/index.tsx +41 -41
  25. package/src/components/alert-card/types.ts +13 -13
  26. package/src/components/animation-wrapper/index.tsx +129 -129
  27. package/src/components/animation-wrapper/types.ts +11 -11
  28. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  29. package/src/components/brand-button/helpers.ts +35 -35
  30. package/src/components/brand-button/index.tsx +120 -120
  31. package/src/components/brand-button/types.ts +38 -38
  32. package/src/components/button/Button.stories.tsx +108 -108
  33. package/src/components/button/index.tsx +27 -27
  34. package/src/components/button/types.ts +14 -14
  35. package/src/components/call-button/CallButton.stories.tsx +324 -324
  36. package/src/components/call-button/index.tsx +106 -106
  37. package/src/components/call-button/types.ts +16 -16
  38. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  39. package/src/components/checkbox/index.tsx +197 -197
  40. package/src/components/checkbox/types.ts +27 -27
  41. package/src/components/checklist/Checklist.stories.tsx +150 -150
  42. package/src/components/checklist/index.tsx +61 -61
  43. package/src/components/checklist/types.ts +17 -17
  44. package/src/components/collapse/Collapse.stories.tsx +255 -255
  45. package/src/components/collapse/index.tsx +46 -46
  46. package/src/components/collapse/types.ts +6 -6
  47. package/src/components/divider/Divider.stories.tsx +205 -205
  48. package/src/components/divider/index.tsx +22 -22
  49. package/src/components/divider/type.ts +3 -3
  50. package/src/components/image/Image.stories.tsx +113 -113
  51. package/src/components/image/index.tsx +25 -25
  52. package/src/components/image/types.ts +40 -40
  53. package/src/components/input/Input.stories.tsx +325 -325
  54. package/src/components/input/index.tsx +177 -177
  55. package/src/components/input/types.ts +37 -37
  56. package/src/components/link/Link.stories.tsx +163 -163
  57. package/src/components/link/index.tsx +116 -116
  58. package/src/components/link/types.ts +25 -25
  59. package/src/components/list/List.stories.tsx +272 -272
  60. package/src/components/list/index.tsx +88 -88
  61. package/src/components/list/list-item/index.tsx +38 -38
  62. package/src/components/list/list-item/types.ts +13 -13
  63. package/src/components/list/types.ts +29 -29
  64. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -322
  65. package/src/components/material-icon/constants.ts +99 -99
  66. package/src/components/material-icon/index.tsx +47 -47
  67. package/src/components/material-icon/types.ts +31 -31
  68. package/src/components/modal/Modal.stories.tsx +171 -171
  69. package/src/components/modal/index.tsx +164 -164
  70. package/src/components/modal/types.ts +24 -24
  71. package/src/components/next-image/index.tsx +74 -74
  72. package/src/components/next-image/types.ts +1 -1
  73. package/src/components/pagination/index.tsx +91 -91
  74. package/src/components/pagination/types.ts +6 -6
  75. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  76. package/src/components/radio-button/index.tsx +75 -75
  77. package/src/components/radio-button/types.ts +21 -21
  78. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  79. package/src/components/see-more/index.tsx +44 -44
  80. package/src/components/see-more/types.ts +4 -4
  81. package/src/components/select/Select.stories.tsx +411 -411
  82. package/src/components/select/index.tsx +155 -155
  83. package/src/components/select/types.ts +36 -36
  84. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  85. package/src/components/select-plan-button/index.tsx +63 -63
  86. package/src/components/select-plan-button/types.ts +17 -17
  87. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  88. package/src/components/skeleton/index.tsx +61 -61
  89. package/src/components/skeleton/types.ts +4 -4
  90. package/src/components/spinner/Spinner.stories.tsx +335 -335
  91. package/src/components/spinner/index.tsx +44 -44
  92. package/src/components/spinner/types.ts +5 -5
  93. package/src/components/text/Text.stories.tsx +321 -321
  94. package/src/components/text/index.tsx +25 -25
  95. package/src/components/text/types.ts +45 -45
  96. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  97. package/src/components/tooltip/index.tsx +74 -74
  98. package/src/components/tooltip/types.ts +7 -7
  99. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  100. package/src/components/view-cart-button/index.tsx +42 -42
  101. package/src/components/view-cart-button/types.ts +5 -5
  102. package/src/contentful/blocks/accordion/Accordion.stories.mocks.tsx +128 -128
  103. package/src/contentful/blocks/accordion/Accordion.stories.tsx +98 -98
  104. package/src/contentful/blocks/accordion/index.tsx +112 -112
  105. package/src/contentful/blocks/accordion/types.ts +34 -34
  106. package/src/contentful/blocks/address-input-banner/index.tsx +52 -52
  107. package/src/contentful/blocks/address-input-banner/types.ts +14 -14
  108. package/src/contentful/blocks/anchored-bottom-banner/index.tsx +181 -181
  109. package/src/contentful/blocks/anchored-bottom-banner/types.ts +13 -13
  110. package/src/contentful/blocks/blogs-grid/BlogGrid.stories.mocks.tsx +144 -144
  111. package/src/contentful/blocks/blogs-grid/BlogGrid.stories.tsx +156 -156
  112. package/src/contentful/blocks/blogs-grid/index.tsx +134 -134
  113. package/src/contentful/blocks/blogs-grid/types.ts +26 -26
  114. package/src/contentful/blocks/blogs-grid-base/index.tsx +119 -119
  115. package/src/contentful/blocks/blogs-grid-base/types.ts +36 -36
  116. package/src/contentful/blocks/breadcrumbs/BreadcrumbNavigation.stories.tsx +147 -147
  117. package/src/contentful/blocks/breadcrumbs/index.tsx +95 -95
  118. package/src/contentful/blocks/breadcrumbs/types.ts +8 -8
  119. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  120. package/src/contentful/blocks/button/index.tsx +131 -131
  121. package/src/contentful/blocks/button/types.ts +39 -39
  122. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  123. package/src/contentful/blocks/callout/index.tsx +277 -279
  124. package/src/contentful/blocks/callout/types.ts +78 -78
  125. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  126. package/src/contentful/blocks/cards/blog-card/index.tsx +129 -129
  127. package/src/contentful/blocks/cards/blog-card/types.ts +34 -34
  128. package/src/contentful/blocks/cards/floating-image-card/index.tsx +119 -119
  129. package/src/contentful/blocks/cards/floating-image-card/types.ts +30 -30
  130. package/src/contentful/blocks/cards/full-image-card/index.tsx +130 -130
  131. package/src/contentful/blocks/cards/full-image-card/types.ts +29 -29
  132. package/src/contentful/blocks/cards/index.tsx +13 -13
  133. package/src/contentful/blocks/cards/product-card/index.tsx +251 -251
  134. package/src/contentful/blocks/cards/product-card/types.ts +28 -28
  135. package/src/contentful/blocks/cards/simple-card/index.tsx +325 -325
  136. package/src/contentful/blocks/cards/simple-card/types.ts +71 -71
  137. package/src/contentful/blocks/cards/testimonial-card/index.tsx +90 -90
  138. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  139. package/src/contentful/blocks/cards/types.ts +1 -1
  140. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  141. package/src/contentful/blocks/carousel/helper.tsx +494 -494
  142. package/src/contentful/blocks/carousel/index.tsx +87 -87
  143. package/src/contentful/blocks/carousel/types.ts +145 -145
  144. package/src/contentful/blocks/cart-retention-banner/index.tsx +109 -109
  145. package/src/contentful/blocks/cart-retention-banner/types.ts +11 -11
  146. package/src/contentful/blocks/comparison-table/index.tsx +29 -29
  147. package/src/contentful/blocks/comparison-table/types.ts +6 -6
  148. package/src/contentful/blocks/cookiebanner/index.tsx +146 -146
  149. package/src/contentful/blocks/cookiebanner/type.ts +7 -7
  150. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  151. package/src/contentful/blocks/cta-callout/index.tsx +73 -71
  152. package/src/contentful/blocks/cta-callout/types.ts +26 -26
  153. package/src/contentful/blocks/dynamic-tabs/index.tsx +204 -204
  154. package/src/contentful/blocks/dynamic-tabs/types.ts +21 -21
  155. package/src/contentful/blocks/email-input-block/index.tsx +116 -116
  156. package/src/contentful/blocks/email-input-block/types.ts +16 -16
  157. package/src/contentful/blocks/find-kinetic/FindKinetic.stories.tsx +23 -23
  158. package/src/contentful/blocks/find-kinetic/index.tsx +130 -130
  159. package/src/contentful/blocks/find-kinetic/types.ts +19 -19
  160. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  161. package/src/contentful/blocks/floating-banner/index.tsx +97 -97
  162. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  163. package/src/contentful/blocks/footer/Footer.stories.tsx +317 -317
  164. package/src/contentful/blocks/footer/index.tsx +91 -91
  165. package/src/contentful/blocks/footer/types.ts +13 -13
  166. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  167. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  168. package/src/contentful/blocks/image-promo-bar/index.tsx +246 -246
  169. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  170. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  171. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  172. package/src/contentful/blocks/modal/constants.ts +53 -53
  173. package/src/contentful/blocks/modal/index.tsx +107 -107
  174. package/src/contentful/blocks/modal/types.ts +12 -12
  175. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +139 -139
  176. package/src/contentful/blocks/navigation/index.tsx +568 -568
  177. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +82 -82
  178. package/src/contentful/blocks/navigation/types.ts +71 -71
  179. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  180. package/src/contentful/blocks/primary-hero/index.tsx +236 -236
  181. package/src/contentful/blocks/primary-hero/types.ts +37 -37
  182. package/src/contentful/blocks/search-block/index.tsx +90 -90
  183. package/src/contentful/blocks/search-block/types.ts +15 -15
  184. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  185. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  186. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  187. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  188. package/src/contentful/blocks/text/index.tsx +12 -12
  189. package/src/contentful/blocks/text/types.ts +1 -1
  190. package/src/contentful/index.ts +105 -105
  191. package/src/hooks/contentful/use-contentful-rich-text.tsx +309 -309
  192. package/src/hooks/contentful/use-processed-check-list.ts +63 -63
  193. package/src/hooks/use-body-scroll-lock.ts +34 -34
  194. package/src/hooks/use-carousel-swipe.ts +264 -264
  195. package/src/hooks/use-outside-click.ts +17 -17
  196. package/src/index.ts +107 -107
  197. package/src/next/index.ts +5 -5
  198. package/src/setupTests.ts +46 -46
  199. package/src/stories/DocsTemplate.tsx +24 -24
  200. package/src/styles/globals.css +343 -343
  201. package/src/types/global.d.ts +9 -9
  202. package/src/types/micro-components.ts +99 -99
  203. package/src/types/utm.ts +49 -49
  204. package/src/utils/contentful/to-document.ts +24 -24
  205. package/src/utils/cookie.ts +84 -84
  206. package/src/utils/cx.ts +49 -49
  207. package/src/utils/index.ts +41 -41
  208. package/src/utils/speed-card-bg.ts +24 -24
  209. package/src/utils/utm.ts +221 -221
@@ -1,99 +1,99 @@
1
- //If new icon need to add, Add iconname in iconNameList array and follow instruction in README.md
2
- export const iconNameList = [
3
- "info",
4
- "download",
5
- "featured_seasonal_and_gifts",
6
- "visibility",
7
- "paid",
8
- "check_box",
9
- "check_box_outline_blank",
10
- "radio_button_unchecked",
11
- "radio_button_checked",
12
- "counter_1",
13
- "counter_2",
14
- "counter_3",
15
- "error",
16
- "search",
17
- "cancel",
18
- "router",
19
- "broadcast_on_home",
20
- "check",
21
- "check_circle",
22
- "lock",
23
- "shield_lock",
24
- "phone_in_talk",
25
- "call",
26
- "chevron_left",
27
- "chevron_right",
28
- "keyboard_arrow_down",
29
- "keyboard_arrow_up",
30
- "arrow_back",
31
- "arrow_forward",
32
- "help",
33
- "home_pin",
34
- "location_on",
35
- "timer",
36
- "schedule",
37
- "add",
38
- "remove",
39
- "bolt",
40
- "rocket",
41
- "cloud_sync",
42
- "close",
43
- "groups",
44
- "speed",
45
- "mail",
46
- "credit_card",
47
- "language",
48
- "forum",
49
- "contract",
50
- "local_atm",
51
- "headset_mic",
52
- "sensors",
53
- "wifi",
54
- "settings",
55
- "home",
56
- "devices",
57
- "build",
58
- "thumb_up",
59
- "desktop_windows",
60
- "block",
61
- "all_inclusive",
62
- "verified_user",
63
- "extension",
64
- "stadia_controller",
65
- "visibility_off",
66
- "close_fullscreen",
67
- "progress_activity",
68
- "travel_explore",
69
- "share",
70
- "business_center",
71
- "upload",
72
- "videocam",
73
- "expand_circle_right",
74
- "add_circle",
75
- "do_not_disturb_on",
76
- "expand_circle_up",
77
- "expand_circle_down",
78
- "replay",
79
- "fiber_manual_record",
80
- "menu",
81
- "dangerous",
82
- "star",
83
- "play_arrow",
84
- "calendar_clock",
85
- "shopping_cart",
86
- ] as const;
87
-
88
- export const OpticalSizes = ["20dp", "24dp", "40dp", "48dp"] as const;
89
- export const weights = [
90
- "100",
91
- "200",
92
- "300",
93
- "400",
94
- "500",
95
- "600",
96
- "700",
97
- ] as const;
98
- export const emphasis = [-25, 0, 200] as const;
99
- export const sizes = [20, 24, 32, 40, 48, 52] as const;
1
+ //If new icon need to add, Add iconname in iconNameList array and follow instruction in README.md
2
+ export const iconNameList = [
3
+ "info",
4
+ "download",
5
+ "featured_seasonal_and_gifts",
6
+ "visibility",
7
+ "paid",
8
+ "check_box",
9
+ "check_box_outline_blank",
10
+ "radio_button_unchecked",
11
+ "radio_button_checked",
12
+ "counter_1",
13
+ "counter_2",
14
+ "counter_3",
15
+ "error",
16
+ "search",
17
+ "cancel",
18
+ "router",
19
+ "broadcast_on_home",
20
+ "check",
21
+ "check_circle",
22
+ "lock",
23
+ "shield_lock",
24
+ "phone_in_talk",
25
+ "call",
26
+ "chevron_left",
27
+ "chevron_right",
28
+ "keyboard_arrow_down",
29
+ "keyboard_arrow_up",
30
+ "arrow_back",
31
+ "arrow_forward",
32
+ "help",
33
+ "home_pin",
34
+ "location_on",
35
+ "timer",
36
+ "schedule",
37
+ "add",
38
+ "remove",
39
+ "bolt",
40
+ "rocket",
41
+ "cloud_sync",
42
+ "close",
43
+ "groups",
44
+ "speed",
45
+ "mail",
46
+ "credit_card",
47
+ "language",
48
+ "forum",
49
+ "contract",
50
+ "local_atm",
51
+ "headset_mic",
52
+ "sensors",
53
+ "wifi",
54
+ "settings",
55
+ "home",
56
+ "devices",
57
+ "build",
58
+ "thumb_up",
59
+ "desktop_windows",
60
+ "block",
61
+ "all_inclusive",
62
+ "verified_user",
63
+ "extension",
64
+ "stadia_controller",
65
+ "visibility_off",
66
+ "close_fullscreen",
67
+ "progress_activity",
68
+ "travel_explore",
69
+ "share",
70
+ "business_center",
71
+ "upload",
72
+ "videocam",
73
+ "expand_circle_right",
74
+ "add_circle",
75
+ "do_not_disturb_on",
76
+ "expand_circle_up",
77
+ "expand_circle_down",
78
+ "replay",
79
+ "fiber_manual_record",
80
+ "menu",
81
+ "dangerous",
82
+ "star",
83
+ "play_arrow",
84
+ "calendar_clock",
85
+ "shopping_cart",
86
+ ] as const;
87
+
88
+ export const OpticalSizes = ["20dp", "24dp", "40dp", "48dp"] as const;
89
+ export const weights = [
90
+ "100",
91
+ "200",
92
+ "300",
93
+ "400",
94
+ "500",
95
+ "600",
96
+ "700",
97
+ ] as const;
98
+ export const emphasis = [-25, 0, 200] as const;
99
+ export const sizes = [20, 24, 32, 40, 48, 52] as const;
@@ -1,47 +1,47 @@
1
- import React from "react";
2
- import { cx } from "../../utils/cx";
3
- import type { IconProps } from "./types";
4
-
5
- const MaterialIcon: React.FC<IconProps> = ({
6
- name,
7
- fill = 0,
8
- opticalSize = "48dp",
9
- weight = "200",
10
- emphasis = 145,
11
- size = 24,
12
- color = "currentColor",
13
- style = {},
14
- className,
15
- onClick,
16
- dataTestId,
17
- }) => {
18
- const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
19
-
20
- const combinedStyle: React.CSSProperties = {
21
- fontVariationSettings,
22
- fontSize: `${size}px`,
23
- fontFamily: "'Material Symbols Rounded'",
24
- color: color || "currentColor",
25
- ...style,
26
- };
27
-
28
- return (
29
- <span
30
- style={combinedStyle}
31
- className={cx(
32
- "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
33
- className
34
- )}
35
- onClick={onClick}
36
- data-testid={dataTestId}
37
- >
38
- {name}
39
- </span>
40
- );
41
- };
42
-
43
- export { MaterialIcon };
44
-
45
- MaterialIcon.displayName = "MaterialIcon";
46
-
47
- export type { IconProps, IconName, Size } from "./types";
1
+ import React from "react";
2
+ import { cx } from "../../utils/cx";
3
+ import type { IconProps } from "./types";
4
+
5
+ const MaterialIcon: React.FC<IconProps> = ({
6
+ name,
7
+ fill = 0,
8
+ opticalSize = "48dp",
9
+ weight = "200",
10
+ emphasis = 145,
11
+ size = 24,
12
+ color = "currentColor",
13
+ style = {},
14
+ className,
15
+ onClick,
16
+ dataTestId,
17
+ }) => {
18
+ const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
19
+
20
+ const combinedStyle: React.CSSProperties = {
21
+ fontVariationSettings,
22
+ fontSize: `${size}px`,
23
+ fontFamily: "'Material Symbols Rounded'",
24
+ color: color || "currentColor",
25
+ ...style,
26
+ };
27
+
28
+ return (
29
+ <span
30
+ style={combinedStyle}
31
+ className={cx(
32
+ "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
33
+ className
34
+ )}
35
+ onClick={onClick}
36
+ data-testid={dataTestId}
37
+ >
38
+ {name}
39
+ </span>
40
+ );
41
+ };
42
+
43
+ export { MaterialIcon };
44
+
45
+ MaterialIcon.displayName = "MaterialIcon";
46
+
47
+ export type { IconProps, IconName, Size } from "./types";
@@ -1,31 +1,31 @@
1
- import type { CSSProperties } from "react";
2
- import {
3
- emphasis,
4
- iconNameList,
5
- OpticalSizes,
6
- sizes,
7
- weights,
8
- } from "./constants";
9
-
10
- export type Fill = 1 | 0;
11
-
12
- export type IconName = (typeof iconNameList)[number];
13
-
14
- export type OpticalSize = (typeof OpticalSizes)[number];
15
- export type Weight = (typeof weights)[number];
16
- export type Emphasis = (typeof emphasis)[number];
17
- export type Size = (typeof sizes)[number];
18
-
19
- export type IconProps = {
20
- name: IconName;
21
- fill?: Fill;
22
- opticalSize?: OpticalSize;
23
- weight?: Weight;
24
- emphasis?: Emphasis;
25
- size?: Size;
26
- color?: string;
27
- style?: CSSProperties;
28
- className?: string;
29
- onClick?: () => void;
30
- dataTestId?: string;
31
- };
1
+ import type { CSSProperties } from "react";
2
+ import {
3
+ emphasis,
4
+ iconNameList,
5
+ OpticalSizes,
6
+ sizes,
7
+ weights,
8
+ } from "./constants";
9
+
10
+ export type Fill = 1 | 0;
11
+
12
+ export type IconName = (typeof iconNameList)[number];
13
+
14
+ export type OpticalSize = (typeof OpticalSizes)[number];
15
+ export type Weight = (typeof weights)[number];
16
+ export type Emphasis = (typeof emphasis)[number];
17
+ export type Size = (typeof sizes)[number];
18
+
19
+ export type IconProps = {
20
+ name: IconName;
21
+ fill?: Fill;
22
+ opticalSize?: OpticalSize;
23
+ weight?: Weight;
24
+ emphasis?: Emphasis;
25
+ size?: Size;
26
+ color?: string;
27
+ style?: CSSProperties;
28
+ className?: string;
29
+ onClick?: () => void;
30
+ dataTestId?: string;
31
+ };