jfs-components 0.0.30 → 0.0.34

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 (101) hide show
  1. package/lib/commonjs/components/AvatarGroup/AvatarGroup.js +2 -1
  2. package/lib/commonjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
  3. package/lib/commonjs/components/ButtonGroup/ButtonGroup.js +15 -5
  4. package/lib/commonjs/components/ButtonGroup/ButtonGroup.js.map +1 -1
  5. package/lib/commonjs/components/Carousel/Carousel.js +3 -6
  6. package/lib/commonjs/components/Carousel/Carousel.js.map +1 -1
  7. package/lib/commonjs/components/Carousel/Carousel.mdx +1 -2
  8. package/lib/commonjs/components/ChipGroup/ChipGroup.js +13 -7
  9. package/lib/commonjs/components/ChipGroup/ChipGroup.js.map +1 -1
  10. package/lib/commonjs/components/ListGroup/ListGroup.js +3 -1
  11. package/lib/commonjs/components/ListGroup/ListGroup.js.map +1 -1
  12. package/lib/commonjs/components/RechargeCard/RechargeCard.js +205 -0
  13. package/lib/commonjs/components/RechargeCard/RechargeCard.js.map +1 -0
  14. package/lib/commonjs/components/RechargeCard/RechargeCard.mdx +96 -0
  15. package/lib/commonjs/components/index.js +0 -7
  16. package/lib/commonjs/components/index.js.map +1 -1
  17. package/lib/commonjs/design-tokens/figma-variables-resolver.js +9 -3
  18. package/lib/commonjs/icons/ic_alert.svg +3 -0
  19. package/lib/commonjs/icons/ic_error.svg +3 -0
  20. package/lib/commonjs/icons/ic_exclamation.svg +3 -0
  21. package/lib/commonjs/icons/ic_help.svg +3 -0
  22. package/lib/commonjs/icons/ic_message_send.svg +3 -0
  23. package/lib/commonjs/icons/ic_smiley_unhappy.svg +3 -0
  24. package/lib/commonjs/icons/ic_star.svg +3 -0
  25. package/lib/commonjs/icons/registry.js +2 -2
  26. package/lib/commonjs/icons/registry.js.map +1 -1
  27. package/lib/commonjs/utils/react-utils.js +23 -0
  28. package/lib/commonjs/utils/react-utils.js.map +1 -1
  29. package/lib/module/components/AvatarGroup/AvatarGroup.js +2 -1
  30. package/lib/module/components/AvatarGroup/AvatarGroup.js.map +1 -1
  31. package/lib/module/components/ButtonGroup/ButtonGroup.js +15 -5
  32. package/lib/module/components/ButtonGroup/ButtonGroup.js.map +1 -1
  33. package/lib/module/components/Carousel/Carousel.js +3 -6
  34. package/lib/module/components/Carousel/Carousel.js.map +1 -1
  35. package/lib/module/components/Carousel/Carousel.mdx +1 -2
  36. package/lib/module/components/ChipGroup/ChipGroup.js +13 -7
  37. package/lib/module/components/ChipGroup/ChipGroup.js.map +1 -1
  38. package/lib/module/components/ListGroup/ListGroup.js +4 -2
  39. package/lib/module/components/ListGroup/ListGroup.js.map +1 -1
  40. package/lib/module/components/RechargeCard/RechargeCard.js +200 -0
  41. package/lib/module/components/RechargeCard/RechargeCard.js.map +1 -0
  42. package/lib/module/components/RechargeCard/RechargeCard.mdx +96 -0
  43. package/lib/module/components/index.js +0 -1
  44. package/lib/module/components/index.js.map +1 -1
  45. package/lib/module/design-tokens/figma-variables-resolver.js +2 -2
  46. package/lib/module/design-tokens/figma-variables-resolver.js.map +1 -2
  47. package/lib/module/icons/ic_alert.svg +3 -0
  48. package/lib/module/icons/ic_error.svg +3 -0
  49. package/lib/module/icons/ic_exclamation.svg +3 -0
  50. package/lib/module/icons/ic_help.svg +3 -0
  51. package/lib/module/icons/ic_message_send.svg +3 -0
  52. package/lib/module/icons/ic_smiley_unhappy.svg +3 -0
  53. package/lib/module/icons/ic_star.svg +3 -0
  54. package/lib/module/icons/registry.js +2 -2
  55. package/lib/module/icons/registry.js.map +1 -1
  56. package/lib/module/utils/react-utils.js +22 -0
  57. package/lib/module/utils/react-utils.js.map +1 -1
  58. package/lib/typescript/components/AvatarGroup/AvatarGroup.d.ts.map +1 -1
  59. package/lib/typescript/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  60. package/lib/typescript/components/Carousel/Carousel.d.ts +1 -3
  61. package/lib/typescript/components/Carousel/Carousel.d.ts.map +1 -1
  62. package/lib/typescript/components/ChipGroup/ChipGroup.d.ts.map +1 -1
  63. package/lib/typescript/components/ListGroup/ListGroup.d.ts.map +1 -1
  64. package/lib/typescript/components/RechargeCard/RechargeCard.d.ts +51 -0
  65. package/lib/typescript/components/RechargeCard/RechargeCard.d.ts.map +1 -0
  66. package/lib/typescript/components/index.d.ts +0 -1
  67. package/lib/typescript/components/index.d.ts.map +1 -1
  68. package/lib/typescript/icons/registry.d.ts +1 -1
  69. package/lib/typescript/icons/registry.d.ts.map +1 -1
  70. package/lib/typescript/utils/react-utils.d.ts +6 -0
  71. package/lib/typescript/utils/react-utils.d.ts.map +1 -1
  72. package/package.json +1 -1
  73. package/src/components/.token-metadata.json +41 -24
  74. package/src/components/AvatarGroup/AvatarGroup.tsx +2 -1
  75. package/src/components/ButtonGroup/ButtonGroup.tsx +12 -4
  76. package/src/components/Carousel/Carousel.mdx +1 -2
  77. package/src/components/Carousel/Carousel.tsx +16 -20
  78. package/src/components/ChipGroup/ChipGroup.tsx +9 -6
  79. package/src/components/ListGroup/ListGroup.tsx +4 -2
  80. package/src/components/RechargeCard/RechargeCard.mdx +96 -0
  81. package/src/components/RechargeCard/RechargeCard.tsx +239 -0
  82. package/src/components/index.ts +1 -1
  83. package/src/icons/ic_alert.svg +3 -0
  84. package/src/icons/ic_error.svg +3 -0
  85. package/src/icons/ic_exclamation.svg +3 -0
  86. package/src/icons/ic_help.svg +3 -0
  87. package/src/icons/ic_message_send.svg +3 -0
  88. package/src/icons/ic_smiley_unhappy.svg +3 -0
  89. package/src/icons/ic_star.svg +3 -0
  90. package/src/icons/registry.ts +29 -1
  91. package/src/utils/react-utils.ts +23 -0
  92. package/lib/commonjs/components/TransactionBubble/TransactionBubble.js +0 -101
  93. package/lib/commonjs/components/TransactionBubble/TransactionBubble.js.map +0 -1
  94. package/lib/commonjs/components/TransactionBubble/TransactionBubble.mdx +0 -40
  95. package/lib/module/components/TransactionBubble/TransactionBubble.js +0 -96
  96. package/lib/module/components/TransactionBubble/TransactionBubble.js.map +0 -1
  97. package/lib/module/components/TransactionBubble/TransactionBubble.mdx +0 -40
  98. package/lib/typescript/components/TransactionBubble/TransactionBubble.d.ts +0 -24
  99. package/lib/typescript/components/TransactionBubble/TransactionBubble.d.ts.map +0 -1
  100. package/src/components/TransactionBubble/TransactionBubble.mdx +0 -40
  101. package/src/components/TransactionBubble/TransactionBubble.tsx +0 -113
@@ -4,7 +4,7 @@
4
4
  * Auto-generated from SVG files in src/icons/
5
5
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
6
6
  *
7
- * Generated: 2026-02-11T10:25:00.751Z
7
+ * Generated: 2026-02-13T19:36:10.622Z
8
8
  */
9
9
 
10
10
  // Icon name to SVG data mapping
@@ -90,6 +90,10 @@ export const iconRegistry: Record<string, { path: string, viewBox: string, fillR
90
90
  path: 'M20.12 6.77023C19.56 6.27023 18.79 5.99023 18 5.99023H6C5.2 5.99023 4.44 6.27023 3.88 6.77023C3.32 7.27023 3 7.95023 3 8.66023V19.3302C3 20.0402 3.32 20.7202 3.88 21.2202C4.44 21.7202 5.21 22.0002 6 22.0002H18C18.8 22.0002 19.56 21.7202 20.12 21.2202C20.68 20.7202 21 20.0402 21 19.3302V8.66023C21 7.95023 20.68 7.27023 20.12 6.77023ZM19 15.0802L16.21 12.2802C16.12 12.1902 16.01 12.1102 15.88 12.0602C15.76 12.0102 15.63 11.9802 15.5 11.9802C15.37 11.9802 15.24 12.0102 15.12 12.0602C15 12.1102 14.89 12.1902 14.79 12.2802L10.5 16.5802L9.21 15.2802C9.12 15.1902 9.01 15.1102 8.88 15.0602C8.76 15.0102 8.63 14.9802 8.5 14.9802C8.37 14.9802 8.24 15.0102 8.12 15.0602C8 15.1102 7.89 15.1902 7.79 15.2802L5 18.0802V8.99023C5 8.72023 5.11 8.47023 5.29 8.28023C5.47 8.09023 5.73 7.99023 6 7.99023H18C18.27 7.99023 18.52 8.10023 18.71 8.28023C18.9 8.46023 19 8.72023 19 8.99023V15.0802Z M8.5 10.0002C8.2 10.0002 7.91 10.0902 7.67 10.2502C7.43 10.4102 7.23 10.6502 7.12 10.9202C7.01 11.1902 6.98 11.5002 7.03 11.7902C7.08 12.0802 7.23 12.3502 7.44 12.5602C7.65 12.7702 7.92 12.9102 8.21 12.9702C8.5 13.0302 8.8 13.0002 9.08 12.8802C9.35 12.7702 9.59 12.5702 9.75 12.3302C9.92 12.0802 10 11.7902 10 11.5002C10 11.1002 9.84 10.7202 9.56 10.4402C9.28 10.1602 8.9 10.0002 8.5 10.0002Z M6 4.99023H18C18.55 4.99023 19 4.54023 19 3.99023C19 3.44023 18.55 2.99023 18 2.99023H6C5.45 2.99023 5 3.44023 5 3.99023C5 4.54023 5.45 4.99023 6 4.99023Z',
91
91
  viewBox: '0 0 24 24',
92
92
  },
93
+ 'ic_alert': {
94
+ path: 'M21.7401 18.0002L13.7401 4.00022C13.5657 3.69243 13.3127 3.43641 13.0071 3.25829C12.7014 3.08017 12.3539 2.98633 12.0001 2.98633C11.6464 2.98633 11.2989 3.08017 10.9932 3.25829C10.6875 3.43641 10.4346 3.69243 10.2601 4.00022L2.26015 18.0002C2.08427 18.3048 1.99184 18.6505 1.99219 19.0022C1.99254 19.354 2.08565 19.6994 2.26213 20.0037C2.4386 20.308 2.69221 20.5603 2.99736 20.7353C3.3025 20.9102 3.6484 21.0016 4.00015 21.0002H20.0001C20.3519 21.0016 20.6978 20.9102 21.0029 20.7353C21.3081 20.5603 21.5617 20.308 21.7382 20.0037C21.9146 19.6994 22.0078 19.354 22.0081 19.0022C22.0084 18.6505 21.916 18.3048 21.7401 18.0002ZM11.0001 7.00022C11.0001 6.73501 11.1055 6.48065 11.293 6.29312C11.4806 6.10558 11.7349 6.00022 12.0001 6.00022C12.2654 6.00022 12.5197 6.10558 12.7073 6.29312C12.8948 6.48065 13.0001 6.73501 13.0001 7.00022V13.0002C13.0001 13.2654 12.8948 13.5198 12.7073 13.7073C12.5197 13.8949 12.2654 14.0002 12.0001 14.0002C11.7349 14.0002 11.4806 13.8949 11.293 13.7073C11.1055 13.5198 11.0001 13.2654 11.0001 13.0002V7.00022ZM12.0001 19.0002C11.7035 19.0002 11.4135 18.9123 11.1668 18.7474C10.9201 18.5826 10.7279 18.3483 10.6143 18.0742C10.5008 17.8002 10.4711 17.4986 10.529 17.2076C10.5868 16.9166 10.7297 16.6493 10.9395 16.4396C11.1493 16.2298 11.4165 16.0869 11.7075 16.029C11.9985 15.9712 12.3001 16.0009 12.5742 16.1144C12.8483 16.2279 13.0825 16.4202 13.2474 16.6669C13.4122 16.9135 13.5001 17.2036 13.5001 17.5002C13.5001 17.898 13.3421 18.2796 13.0608 18.5609C12.7795 18.8422 12.398 19.0002 12.0001 19.0002Z',
95
+ viewBox: '0 0 24 24',
96
+ },
93
97
  'ic_align_bottom': {
94
98
  path: 'M20 19H4C3.45 19 3 19.45 3 20C3 20.55 3.45 21 4 21H20C20.55 21 21 20.55 21 20C21 19.45 20.55 19 20 19ZM10 17H14C15.66 17 17 15.66 17 14V6C17 4.34 15.66 3 14 3H10C8.34 3 7 4.34 7 6V14C7 15.66 8.34 17 10 17Z',
95
99
  viewBox: '0 0 24 24',
@@ -993,10 +997,18 @@ export const iconRegistry: Record<string, { path: string, viewBox: string, fillR
993
997
  path: 'M15.4099 15.9999L20.7099 10.7099C20.8037 10.617 20.8781 10.5064 20.9288 10.3845C20.9796 10.2627 21.0057 10.132 21.0057 9.99994C21.0057 9.86793 20.9796 9.73722 20.9288 9.61536C20.8781 9.4935 20.8037 9.3829 20.7099 9.28994L14.7099 3.28994C14.617 3.19621 14.5064 3.12182 14.3845 3.07105C14.2627 3.02028 14.132 2.99414 13.9999 2.99414C13.8679 2.99414 13.7372 3.02028 13.6154 3.07105C13.4935 3.12182 13.3829 3.19621 13.2899 3.28994L7.37994 9.20994L14.1699 15.9999H15.4099ZM19.9999 17.9999H13.7299H13.3299L5.99994 10.6199L3.28994 13.2899C3.19621 13.3829 3.12182 13.4935 3.07105 13.6154C3.02028 13.7372 2.99414 13.8679 2.99414 13.9999C2.99414 14.132 3.02028 14.2627 3.07105 14.3845C3.12182 14.5064 3.19621 14.617 3.28994 14.7099L8.28994 19.7099C8.38338 19.8026 8.49419 19.8759 8.61603 19.9257C8.73787 19.9755 8.86833 20.0007 8.99994 19.9999H19.9999C20.2652 19.9999 20.5195 19.8946 20.707 19.707C20.8946 19.5195 20.9999 19.2652 20.9999 18.9999C20.9999 18.7347 20.8946 18.4804 20.707 18.2928C20.5195 18.1053 20.2652 17.9999 19.9999 17.9999Z',
994
998
  viewBox: '0 0 24 24',
995
999
  },
1000
+ 'ic_error': {
1001
+ path: 'M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM15.71 14.29C15.8037 14.383 15.8781 14.4936 15.9289 14.6154C15.9797 14.7373 16.0058 14.868 16.0058 15C16.0058 15.132 15.9797 15.2627 15.9289 15.3846C15.8781 15.5064 15.8037 15.617 15.71 15.71C15.617 15.8037 15.5064 15.8781 15.3846 15.9289C15.2627 15.9797 15.132 16.0058 15 16.0058C14.868 16.0058 14.7373 15.9797 14.6154 15.9289C14.4936 15.8781 14.383 15.8037 14.29 15.71L12 13.41L9.71 15.71C9.61704 15.8037 9.50644 15.8781 9.38458 15.9289C9.26272 15.9797 9.13202 16.0058 9 16.0058C8.86799 16.0058 8.73729 15.9797 8.61543 15.9289C8.49357 15.8781 8.38297 15.8037 8.29 15.71C8.19628 15.617 8.12188 15.5064 8.07111 15.3846C8.02034 15.2627 7.99421 15.132 7.99421 15C7.99421 14.868 8.02034 14.7373 8.07111 14.6154C8.12188 14.4936 8.19628 14.383 8.29 14.29L10.59 12L8.29 9.71C8.1017 9.5217 7.99591 9.2663 7.99591 9C7.99591 8.7337 8.1017 8.4783 8.29 8.29C8.47831 8.1017 8.7337 7.99591 9 7.99591C9.26631 7.99591 9.5217 8.1017 9.71 8.29L12 10.59L14.29 8.29C14.4783 8.1017 14.7337 7.99591 15 7.99591C15.2663 7.99591 15.5217 8.1017 15.71 8.29C15.8983 8.4783 16.0041 8.7337 16.0041 9C16.0041 9.2663 15.8983 9.5217 15.71 9.71L13.41 12L15.71 14.29Z',
1002
+ viewBox: '0 0 24 24',
1003
+ },
996
1004
  'ic_exchange': {
997
1005
  path: 'M18.7099 15.2902C18.5216 15.1019 18.2662 14.9961 17.9999 14.9961C17.7336 14.9961 17.4782 15.1019 17.2899 15.2902C17.1016 15.4785 16.9958 15.7339 16.9958 16.0002C16.9958 16.2665 17.1016 16.5219 17.2899 16.7102L17.5899 17.0002H6.99994C6.46951 17.0002 5.9608 16.7895 5.58573 16.4144C5.21065 16.0393 4.99994 15.5306 4.99994 15.0002C4.99994 14.735 4.89458 14.4806 4.70705 14.2931C4.51951 14.1055 4.26516 14.0002 3.99994 14.0002C3.73472 14.0002 3.48037 14.1055 3.29283 14.2931C3.1053 14.4806 2.99994 14.735 2.99994 15.0002C2.99994 16.0611 3.42137 17.0785 4.17151 17.8286C4.92166 18.5788 5.93907 19.0002 6.99994 19.0002H17.5899L17.2899 19.2902C17.1962 19.3831 17.1218 19.4937 17.071 19.6156C17.0203 19.7375 16.9941 19.8682 16.9941 20.0002C16.9941 20.1322 17.0203 20.2629 17.071 20.3848C17.1218 20.5066 17.1962 20.6172 17.2899 20.7102C17.3829 20.8039 17.4935 20.8783 17.6154 20.9291C17.7372 20.9798 17.8679 21.006 17.9999 21.006C18.132 21.006 18.2627 20.9798 18.3845 20.9291C18.5064 20.8783 18.617 20.8039 18.7099 20.7102L20.7099 18.7102C20.8037 18.6172 20.8781 18.5066 20.9288 18.3848C20.9796 18.2629 21.0057 18.1322 21.0057 18.0002C21.0057 17.8682 20.9796 17.7375 20.9288 17.6156C20.8781 17.4937 20.8037 17.3831 20.7099 17.2902L18.7099 15.2902ZM5.28994 8.71019C5.3829 8.80391 5.4935 8.87831 5.61536 8.92908C5.73722 8.97985 5.86793 9.00598 5.99994 9.00598C6.13195 9.00598 6.26266 8.97985 6.38452 8.92908C6.50638 8.87831 6.61698 8.80391 6.70994 8.71019C6.80367 8.61722 6.87806 8.50662 6.92883 8.38476C6.9796 8.2629 7.00574 8.1322 7.00574 8.00019C7.00574 7.86817 6.9796 7.73747 6.92883 7.61561C6.87806 7.49375 6.80367 7.38315 6.70994 7.29019L6.40994 7.00019H16.9999C17.5304 7.00019 18.0391 7.2109 18.4142 7.58597C18.7892 7.96104 18.9999 8.46975 18.9999 9.00019C18.9999 9.2654 19.1053 9.51976 19.2928 9.70729C19.4804 9.89483 19.7347 10.0002 19.9999 10.0002C20.2652 10.0002 20.5195 9.89483 20.707 9.70729C20.8946 9.51976 20.9999 9.2654 20.9999 9.00019C20.9999 7.93932 20.5785 6.9219 19.8284 6.17176C19.0782 5.42161 18.0608 5.00019 16.9999 5.00019H6.40994L6.70994 4.71019C6.89824 4.52188 7.00403 4.26649 7.00403 4.00019C7.00403 3.73388 6.89824 3.47849 6.70994 3.29019C6.52164 3.10188 6.26624 2.99609 5.99994 2.99609C5.73364 2.99609 5.47824 3.10188 5.28994 3.29019L3.28994 5.29019C3.19621 5.38315 3.12182 5.49375 3.07105 5.61561C3.02028 5.73747 2.99414 5.86817 2.99414 6.00019C2.99414 6.1322 3.02028 6.2629 3.07105 6.38476C3.12182 6.50662 3.19621 6.61722 3.28994 6.71019L5.28994 8.71019Z',
998
1006
  viewBox: '0 0 24 24',
999
1007
  },
1008
+ 'ic_exclamation': {
1009
+ path: 'M12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17ZM12 19C11.7033 19 11.4133 19.088 11.1666 19.2528C10.92 19.4176 10.7277 19.6519 10.6142 19.926C10.5006 20.2001 10.4709 20.5017 10.5288 20.7926C10.5867 21.0836 10.7296 21.3509 10.9393 21.5607C11.1491 21.7704 11.4164 21.9133 11.7074 21.9712C11.9983 22.0291 12.2999 21.9993 12.574 21.8858C12.8481 21.7723 13.0824 21.58 13.2472 21.3334C13.412 21.0867 13.5 20.7967 13.5 20.5C13.5 20.1022 13.342 19.7206 13.0607 19.4393C12.7794 19.158 12.3978 19 12 19Z',
1010
+ viewBox: '0 0 24 24',
1011
+ },
1000
1012
  'ic_expand': {
1001
1013
  path: 'M19.1111 4H13.7778C13.2444 4 12.8889 4.35556 12.8889 4.88889C12.8889 5.42222 13.2444 5.77778 13.7778 5.77778H18.2222V10.2222C18.2222 10.7556 18.5778 11.1111 19.1111 11.1111C19.6444 11.1111 20 10.7556 20 10.2222V4.88889C20 4.35556 19.6444 4 19.1111 4Z M10.2222 18.2222H5.77778V13.7778C5.77778 13.2444 5.42222 12.8889 4.88889 12.8889C4.35556 12.8889 4 13.2444 4 13.7778V19.1111C4 19.6444 4.35556 20 4.88889 20H10.2222C10.7556 20 11.1111 19.6444 11.1111 19.1111C11.1111 18.5778 10.7556 18.2222 10.2222 18.2222Z',
1002
1014
  viewBox: '0 0 24 24',
@@ -1261,6 +1273,10 @@ export const iconRegistry: Record<string, { path: string, viewBox: string, fillR
1261
1273
  path: 'M16.5 12C18.99 12 21 9.99 21 7.5C21 5.01 18.99 3 16.5 3C14.01 3 12 5.01 12 7.5C12 9.99 14.01 12 16.5 12ZM12 7.5C12 5.01 9.99 3 7.5 3C5.01 3 3 5.01 3 7.5C3 9.99 5.01 12 7.5 12C9.99 12 12 9.99 12 7.5ZM16.5 12C14.01 12 12 14.01 12 16.5C12 18.99 14.01 21 16.5 21C18.99 21 21 18.99 21 16.5C21 14.01 18.99 12 16.5 12ZM7.5 12C5.01 12 3 14.01 3 16.5C3 18.99 5.01 21 7.5 21C9.99 21 12 18.99 12 16.5C12 14.01 9.99 12 7.5 12Z',
1262
1274
  viewBox: '0 0 24 24',
1263
1275
  },
1276
+ 'ic_help': {
1277
+ path: 'M12.0947 1.61719C6.30473 1.61719 1.59473 6.32719 1.59473 12.1172C1.59473 17.9072 6.30473 22.6172 12.0947 22.6172C17.8847 22.6172 22.5947 17.9072 22.5947 12.1172C22.5947 6.32719 17.8847 1.61719 12.0947 1.61719ZM12.7797 15.9947C12.7797 16.3972 12.4547 16.7272 12.0572 16.7272H12.0022C11.6047 16.7272 11.2797 16.3997 11.2797 15.9947V15.9597C11.2797 15.5572 11.6047 15.2272 12.0022 15.2272H12.0572C12.4547 15.2272 12.7797 15.5547 12.7797 15.9597V15.9947ZM14.0597 11.7822C13.7197 12.1622 13.3122 12.4872 13.0197 12.9072C12.8672 13.1272 12.8572 13.0922 12.7622 13.3497C12.6847 13.5597 12.7322 13.8497 12.6222 14.0547C12.4447 14.3847 12.0772 14.4822 11.7272 14.3347C11.3172 14.1597 11.2547 13.7472 11.2822 13.3497C11.3122 12.8972 11.3822 12.7047 11.6072 12.3022C11.8222 11.9197 12.1397 11.6122 12.4422 11.3022C12.9522 10.7797 13.7222 9.86719 12.8897 9.23469C12.1572 8.67719 11.1622 9.08969 10.9647 9.94969C10.8747 10.3422 10.7447 10.6822 10.3522 10.8122C10.0597 10.9097 9.74723 10.8397 9.56473 10.5897C9.08473 9.93219 9.70223 8.75469 10.1897 8.26969C11.4372 7.02719 13.9297 7.33219 14.6047 9.03719C14.6022 9.03219 14.5997 9.02469 14.5972 9.01969C14.5797 8.97969 14.5722 8.95469 14.5697 8.94719C14.5722 8.95719 14.5847 8.98719 14.5972 9.01969C14.5997 9.02719 14.6022 9.02969 14.6047 9.03719C14.6247 9.08969 14.6347 9.11469 14.6372 9.12219C14.6322 9.10969 14.6197 9.07469 14.6047 9.03969C14.9997 10.0272 14.7522 11.0097 14.0597 11.7822Z',
1278
+ viewBox: '0 0 24 24',
1279
+ },
1264
1280
  'ic_home': {
1265
1281
  path: 'M21.4701 9.31017L13.8501 2.70017C13.3389 2.25018 12.6812 2.00195 12.0001 2.00195C11.3191 2.00195 10.6614 2.25018 10.1501 2.70017L2.53013 9.31017C2.2976 9.5094 2.1302 9.77382 2.04958 10.0692C1.96897 10.3646 1.97884 10.6774 2.07793 10.9671C2.17702 11.2569 2.36077 11.5102 2.6054 11.6944C2.85003 11.8785 3.1443 11.9851 3.45013 12.0002H4.00013V19.0002C4.00013 19.7958 4.3162 20.5589 4.87881 21.1215C5.44142 21.6841 6.20448 22.0002 7.00013 22.0002H10.0001V16.0002H14.0001V22.0002H17.0001C17.7958 22.0002 18.5588 21.6841 19.1214 21.1215C19.6841 20.5589 20.0001 19.7958 20.0001 19.0002V12.0002H20.5501C20.856 11.9851 21.1502 11.8785 21.3949 11.6944C21.6395 11.5102 21.8232 11.2569 21.9223 10.9671C22.0214 10.6774 22.0313 10.3646 21.9507 10.0692C21.8701 9.77382 21.7027 9.5094 21.4701 9.31017Z',
1266
1282
  viewBox: '0 0 24 24',
@@ -1458,6 +1474,10 @@ export const iconRegistry: Record<string, { path: string, viewBox: string, fillR
1458
1474
  path: 'M18.5776 14.2669V9.77233C19.528 9.22783 19.8547 8.02003 19.3102 7.06963C18.7657 6.11923 17.5579 5.80243 16.6075 6.34693L12.7168 4.09963C12.7168 3.01063 11.8258 2.11963 10.7368 2.11963C9.64785 2.11963 8.75685 3.01063 8.75685 4.09963L4.87605 6.33703C4.87605 6.33703 4.87605 6.33703 4.86615 6.33703C3.91575 5.79253 2.70795 6.11923 2.16345 7.05973C1.61895 8.01013 1.94565 9.21793 2.88615 9.76243C2.88615 9.76243 2.89605 9.76243 2.90595 9.76243V14.2372C2.90595 14.2372 2.88615 14.2372 2.87625 14.2372C1.92585 14.7817 1.60905 15.9994 2.15355 16.9399C2.69805 17.8903 3.91575 18.2071 4.85625 17.6626L8.72715 19.9099C8.72715 19.9099 8.72715 19.9198 8.72715 19.9297C8.72715 21.0187 9.61815 21.9097 10.7071 21.9097C11.7961 21.9097 12.6871 21.0286 12.6871 19.9297L16.5778 17.6923C17.5282 18.2368 18.736 17.9101 19.2805 16.9696C19.825 16.0291 19.5082 14.8213 18.5677 14.2669H18.5776ZM4.87605 9.75253L7.81635 11.4553C7.78665 11.6335 7.75695 11.8117 7.75695 11.9998C7.75695 12.1879 7.77675 12.3463 7.80645 12.5146L4.85625 14.2174V9.75253H4.87605ZM9.74685 18.1972L5.84625 15.94L8.79645 14.2372C9.07365 14.4748 9.39045 14.6629 9.73695 14.7916V18.2071L9.74685 18.1972ZM9.74685 9.20803C9.40035 9.32683 9.09345 9.51493 8.82615 9.74263L5.86605 8.03983L9.74685 5.81233V9.21793V9.20803ZM11.7268 5.79253L15.5878 8.02993L12.6376 9.73273C12.3703 9.50503 12.0634 9.32683 11.7268 9.20803V5.79253ZM15.6076 15.9598L11.7268 18.1873V14.7817C12.0733 14.6629 12.3901 14.4748 12.6574 14.2372L15.6076 15.94C15.6076 15.94 15.6076 15.94 15.6076 15.9499V15.9598ZM16.5976 14.2372L13.6573 12.5344C13.687 12.3562 13.7068 12.1879 13.7068 11.9998C13.7068 11.8117 13.687 11.6236 13.6474 11.4355L16.5778 9.74263C16.5778 9.74263 16.5877 9.74263 16.5976 9.75253V14.2372Z',
1459
1475
  viewBox: '0 0 22 24',
1460
1476
  },
1477
+ 'ic_message_send': {
1478
+ path: 'M9.00019 19.0002C8.86858 19.0009 8.73812 18.9757 8.61628 18.926C8.49444 18.8762 8.38363 18.8029 8.29018 18.7102L3.29019 13.7102C3.10188 13.5219 2.99609 13.2665 2.99609 13.0002C2.99609 12.7339 3.10188 12.4785 3.29019 12.2902C3.47849 12.1019 3.73388 11.9961 4.00019 11.9961C4.26649 11.9961 4.52188 12.1019 4.71019 12.2902L9.00019 16.5902L19.2902 6.29019C19.4785 6.10188 19.7339 5.99609 20.0002 5.99609C20.2665 5.99609 20.5219 6.10188 20.7102 6.29019C20.8985 6.47849 21.0043 6.73388 21.0043 7.00019C21.0043 7.26649 20.8985 7.52188 20.7102 7.71019L9.71019 18.7102C9.61674 18.8029 9.50593 18.8762 9.38409 18.926C9.26225 18.9757 9.13179 19.0009 9.00019 19.0002Z',
1479
+ viewBox: '0 0 24 24',
1480
+ },
1461
1481
  'ic_mic_mute_forced': {
1462
1482
  path: 'M15 20H9C8.73 20 8.48 20.11 8.29 20.29C8.1 20.48 8 20.73 8 21C8 21.27 8.11 21.52 8.29 21.71C8.48 21.9 8.73 22 9 22H15C15.27 22 15.52 21.89 15.71 21.71C15.9 21.53 16 21.27 16 21C16 20.73 15.89 20.48 15.71 20.29C15.53 20.1 15.27 20 15 20ZM12 15C12.25 15 12.5 14.96 12.74 14.89C12.27 14.03 12 13.05 12 12C12 9.78 13.21 7.85 15 6.81V5C15 4.2 14.68 3.44 14.12 2.88C13.56 2.32 12.79 2 12 2C11.21 2 10.44 2.32 9.88 2.88C9.32 3.44 9 4.21 9 5V12C9 12.8 9.32 13.56 9.88 14.12C10.44 14.68 11.21 15 12 15ZM12 17C10.67 17 9.4 16.47 8.46 15.54C7.52 14.6 7 13.33 7 12V11C7 10.73 6.89 10.48 6.71 10.29C6.52 10.1 6.27 10 6 10C5.73 10 5.48 10.11 5.29 10.29C5.1 10.48 5 10.73 5 11V12C5 13.86 5.74 15.64 7.05 16.95C8.36 18.26 10.14 19 12 19C13.47 19 14.9 18.53 16.08 17.68C15.34 17.43 14.66 17.04 14.08 16.53C13.43 16.83 12.73 17 12 17ZM14 12C14 14.21 15.79 16 18 16C18.74 16 19.43 15.79 20.02 15.43L14.57 9.98C14.22 10.57 14 11.26 14 12ZM18 8C17.26 8 16.57 8.21 15.98 8.57L21.43 14.02C21.78 13.43 22 12.74 22 12C22 9.79 20.21 8 18 8Z',
1463
1483
  viewBox: '0 0 24 24',
@@ -2258,6 +2278,10 @@ export const iconRegistry: Record<string, { path: string, viewBox: string, fillR
2258
2278
  path: 'M5.9999 11C6.53033 11 7.03904 10.7893 7.41411 10.4142C7.78918 10.0391 7.9999 9.53043 7.9999 9V8C7.9999 7.73478 8.10525 7.48043 8.29279 7.29289C8.48033 7.10536 8.73468 7 8.9999 7H14.9999C15.2651 7 15.5195 7.10536 15.707 7.29289C15.8945 7.48043 15.9999 7.73478 15.9999 8H19.9999C20.3376 8.00657 20.6733 8.05357 20.9999 8.14V7.6C21.0051 7.16642 20.8642 6.74371 20.5999 6.4C19.7199 5.28 17.2899 3 11.9999 3C6.7099 3 4.2799 5.28 3.3999 6.4C3.13555 6.74371 2.99464 7.16642 2.9999 7.6V9C2.9999 9.53043 3.21061 10.0391 3.58568 10.4142C3.96076 10.7893 4.46946 11 4.9999 11H5.9999ZM21.4099 10.59C21.0365 10.2144 20.5295 10.0022 19.9999 10H15.9999C15.4695 10 14.9608 10.2107 14.5857 10.5858C14.2106 10.9609 13.9999 11.4696 13.9999 12V20C13.9999 20.5304 14.2106 21.0391 14.5857 21.4142C14.9608 21.7893 15.4695 22 15.9999 22H19.9999C20.5303 22 21.039 21.7893 21.4141 21.4142C21.7892 21.0391 21.9999 20.5304 21.9999 20V12C21.9977 11.4704 21.7855 10.9634 21.4099 10.59ZM18.7099 19.71C18.5453 19.8748 18.3284 19.9769 18.0965 19.9988C17.8647 20.0207 17.6324 19.961 17.4399 19.83C17.2757 19.7214 17.1498 19.564 17.0799 19.38C16.996 19.199 16.9681 18.997 16.9999 18.8C17.0369 18.6015 17.1331 18.4188 17.2759 18.276C17.4187 18.1332 17.6014 18.037 17.7999 18C17.9949 17.9619 18.1968 17.9828 18.3799 18.06C18.5639 18.1299 18.7213 18.2558 18.8299 18.42C18.9609 18.6125 19.0206 18.8448 18.9987 19.0766C18.9768 19.3085 18.8747 19.5254 18.7099 19.69V19.71ZM8.8299 11.83C8.45815 12.2013 8.01688 12.4958 7.5313 12.6965C7.04572 12.8973 6.52534 13.0004 5.9999 13C5.46946 13 4.96076 13.2107 4.58568 13.5858C4.21061 13.9609 3.9999 14.4696 3.9999 15V18C3.9999 18.7956 4.31597 19.5587 4.87858 20.1213C5.44119 20.6839 6.20425 21 6.9999 21H12.1399C12.0535 20.6735 12.0065 20.3377 11.9999 20V14C11.6021 14 11.2205 13.842 10.9392 13.5607C10.6579 13.2794 10.4999 12.8978 10.4999 12.5C10.4999 12.1022 10.6579 11.7206 10.9392 11.4393C11.2205 11.158 11.6021 11 11.9999 11H12.1399C12.3433 10.2241 12.7754 9.52725 13.3799 9H9.9999C10.0003 9.52544 9.8972 10.0458 9.69644 10.5314C9.49569 11.017 9.20123 11.4582 8.8299 11.83Z',
2259
2279
  viewBox: '0 0 24 24',
2260
2280
  },
2281
+ 'ic_smiley_unhappy': {
2282
+ path: 'M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM15.5 8C15.7967 8 16.0867 8.08797 16.3334 8.2528C16.58 8.41762 16.7723 8.65189 16.8858 8.92597C16.9994 9.20006 17.0291 9.50166 16.9712 9.79264C16.9133 10.0836 16.7704 10.3509 16.5607 10.5607C16.3509 10.7704 16.0836 10.9133 15.7926 10.9712C15.5017 11.0291 15.2001 10.9994 14.926 10.8858C14.6519 10.7723 14.4176 10.58 14.2528 10.3334C14.088 10.0867 14 9.79667 14 9.5C14 9.10218 14.158 8.72064 14.4393 8.43934C14.7206 8.15804 15.1022 8 15.5 8ZM8.5 8C8.79668 8 9.08669 8.08797 9.33336 8.2528C9.58003 8.41762 9.77229 8.65189 9.88582 8.92597C9.99936 9.20006 10.0291 9.50166 9.97118 9.79264C9.9133 10.0836 9.77044 10.3509 9.56066 10.5607C9.35089 10.7704 9.08361 10.9133 8.79264 10.9712C8.50167 11.0291 8.20007 10.9994 7.92598 10.8858C7.65189 10.7723 7.41762 10.58 7.2528 10.3334C7.08798 10.0867 7 9.79667 7 9.5C7 9.10218 7.15804 8.72064 7.43934 8.43934C7.72065 8.15804 8.10218 8 8.5 8ZM16.76 16.85C16.6038 16.9468 16.4238 16.9987 16.24 17C16.0701 17.0003 15.9028 16.9574 15.7541 16.8751C15.6054 16.7929 15.4801 16.6741 15.39 16.53C15.0302 15.9556 14.5304 15.482 13.9374 15.1537C13.3445 14.8254 12.6778 14.6532 12 14.6532C11.3222 14.6532 10.6555 14.8254 10.0626 15.1537C9.4696 15.482 8.96977 15.9556 8.61 16.53C8.54551 16.6512 8.45674 16.7579 8.34922 16.8433C8.2417 16.9287 8.11774 16.9911 7.98506 17.0265C7.85238 17.0619 7.71383 17.0696 7.57804 17.0492C7.44225 17.0287 7.31214 16.9805 7.1958 16.9075C7.07947 16.8345 6.97941 16.7384 6.90186 16.6251C6.82431 16.5117 6.77094 16.3836 6.74506 16.2488C6.71919 16.1139 6.72137 15.9752 6.75147 15.8412C6.78156 15.7072 6.83894 15.5808 6.92 15.47C7.46016 14.6106 8.20952 13.9022 9.09798 13.4112C9.98643 12.9203 10.9849 12.6627 12 12.6627C13.0151 12.6627 14.0136 12.9203 14.902 13.4112C15.7905 13.9022 16.5399 14.6106 17.08 15.47C17.1498 15.5816 17.1969 15.7058 17.2187 15.8356C17.2404 15.9654 17.2362 16.0982 17.2065 16.2264C17.1768 16.3546 17.122 16.4757 17.0454 16.5827C16.9688 16.6897 16.8718 16.7806 16.76 16.85Z',
2283
+ viewBox: '0 0 24 24',
2284
+ },
2261
2285
  'ic_sms': {
2262
2286
  path: 'M15.0001 4H9.00006C7.23973 4.01356 5.54913 4.68987 4.26515 5.89418C2.98118 7.09849 2.1981 8.74235 2.07196 10.4982C1.94582 12.2541 2.48588 13.993 3.58453 15.3685C4.68318 16.7439 6.25974 17.655 8.00006 17.92V20C8.00006 20.2786 8.07763 20.5516 8.22408 20.7886C8.37053 21.0256 8.58008 21.2171 8.82924 21.3416C9.07839 21.4662 9.35732 21.519 9.63476 21.4939C9.91221 21.4689 10.1772 21.3671 10.4001 21.2L14.6701 18H15.0001C16.8566 18 18.637 17.2625 19.9498 15.9497C21.2626 14.637 22.0001 12.8565 22.0001 11C22.0001 9.14348 21.2626 7.36301 19.9498 6.05025C18.637 4.7375 16.8566 4 15.0001 4Z',
2263
2287
  viewBox: '0 0 24 24',
@@ -2330,6 +2354,10 @@ export const iconRegistry: Record<string, { path: string, viewBox: string, fillR
2330
2354
  path: 'M19 19.9998H5C4.73478 19.9998 4.48043 20.1052 4.29289 20.2927C4.10536 20.4802 4 20.7346 4 20.9998C4 21.265 4.10536 21.5194 4.29289 21.7069C4.48043 21.8944 4.73478 21.9998 5 21.9998H19C19.2652 21.9998 19.5196 21.8944 19.7071 21.7069C19.8946 21.5194 20 21.265 20 20.9998C20 20.7346 19.8946 20.4802 19.7071 20.2927C19.5196 20.1052 19.2652 19.9998 19 19.9998ZM18 12.9998H16C15.2044 12.9998 14.4413 12.6837 13.8787 12.1211C13.3161 11.5585 13 10.7954 13 9.9998V9.8598C13.9427 9.61641 14.7642 9.03757 15.3106 8.23179C15.857 7.42601 16.0908 6.44861 15.9681 5.4828C15.8454 4.51699 15.3747 3.62907 14.6442 2.98548C13.9137 2.34189 12.9736 1.98682 12 1.98682C11.0264 1.98682 10.0863 2.34189 9.35577 2.98548C8.62526 3.62907 8.15456 4.51699 8.03188 5.4828C7.90921 6.44861 8.14299 7.42601 8.6894 8.23179C9.23581 9.03757 10.0573 9.61641 11 9.8598V9.9998C11 10.7954 10.6839 11.5585 10.1213 12.1211C9.55871 12.6837 8.79565 12.9998 8 12.9998H6C5.46957 12.9998 4.96086 13.2105 4.58579 13.5856C4.21071 13.9607 4 14.4694 4 14.9998V15.9998C4 16.5302 4.21071 17.0389 4.58579 17.414C4.96086 17.7891 5.46957 17.9998 6 17.9998H18C18.5304 17.9998 19.0391 17.7891 19.4142 17.414C19.7893 17.0389 20 16.5302 20 15.9998V14.9998C20 14.4694 19.7893 13.9607 19.4142 13.5856C19.0391 13.2105 18.5304 12.9998 18 12.9998Z',
2331
2355
  viewBox: '0 0 24 24',
2332
2356
  },
2357
+ 'ic_star': {
2358
+ path: 'M21.3697 9.60947C21.2557 9.27681 21.0563 8.98217 20.7904 8.75405C20.5246 8.52594 20.2017 8.38337 19.8504 8.32635L15.6155 7.68003L13.7164 3.59303C13.5645 3.26988 13.3176 2.99424 13.0137 2.79464C12.7099 2.60455 12.3586 2.5 11.9977 2.5C11.6369 2.5 11.2856 2.60455 10.9817 2.79464C10.6779 2.98474 10.431 3.26037 10.2791 3.59303L8.37999 7.68003L4.10708 8.32635C3.76524 8.38337 3.43291 8.52594 3.16704 8.75405C2.90117 8.98217 2.70176 9.27681 2.58782 9.60947C2.48337 9.93263 2.47387 10.2843 2.54984 10.617C2.6258 10.9496 2.79672 11.2633 3.0341 11.5104L6.15808 14.723L5.41744 19.2757C5.36047 19.6274 5.40794 19.9885 5.54088 20.3117C5.67381 20.6349 5.9017 20.92 6.19606 21.1291C6.50941 21.3667 6.89872 21.4998 7.29752 21.5093C7.62986 21.5093 7.9527 21.4332 8.24706 21.2717L12.0357 19.1806L15.8244 21.2717C16.1092 21.4332 16.4416 21.5188 16.7739 21.5093C17.1727 21.5093 17.5525 21.3857 17.8754 21.1576C18.1602 20.9485 18.3881 20.6729 18.5305 20.3402C18.6635 20.0171 18.711 19.6559 18.654 19.3042L17.9133 14.7515L21.0373 11.5389C21.2652 11.2823 21.4076 10.9591 21.4741 10.617C21.5311 10.2748 21.4931 9.92312 21.3697 9.60947Z',
2359
+ viewBox: '0 0 24 24',
2360
+ },
2333
2361
  'ic_star_add': {
2334
2362
  path: 'M21.9 9.48015C21.7841 9.12928 21.5732 8.81739 21.2908 8.57909C21.0083 8.34079 20.6654 8.1854 20.3 8.13015L15.83 7.45015L13.83 3.15015C13.6685 2.80656 13.4125 2.51604 13.092 2.31254C12.7715 2.10904 12.3997 2.00098 12.02 2.00098C11.6404 2.00098 11.2685 2.10904 10.948 2.31254C10.6275 2.51604 10.3715 2.80656 10.21 3.15015L8.21003 7.45015L3.70003 8.13015C3.33465 8.1854 2.99172 8.34079 2.70929 8.57909C2.42686 8.81739 2.21597 9.12928 2.10003 9.48015C1.99015 9.82486 1.97583 10.1929 2.05859 10.5451C2.14136 10.8973 2.31811 11.2205 2.57003 11.4802L5.86003 14.8602L5.08003 19.6502C5.02076 20.0193 5.06617 20.3978 5.21112 20.7424C5.35606 21.0871 5.59473 21.3843 5.90003 21.6002C6.23523 21.8517 6.641 21.9917 7.06003 22.0002C7.40981 22.0085 7.75534 21.9221 8.06003 21.7502L12.06 19.5502L16.06 21.7502C16.3647 21.9221 16.7102 22.0085 17.06 22.0002C17.4758 22.0004 17.8812 21.871 18.22 21.6302C18.5253 21.4143 18.764 21.1171 18.9089 20.7724C19.0539 20.4278 19.0993 20.0493 19.04 19.6802L18.26 14.8902L21.55 11.5102C21.787 11.2354 21.9448 10.9013 22.0065 10.5437C22.0681 10.1861 22.0313 9.81844 21.9 9.48015ZM14 14.0002H13V15.0002C13 15.2654 12.8947 15.5197 12.7071 15.7073C12.5196 15.8948 12.2652 16.0002 12 16.0002C11.7348 16.0002 11.4805 15.8948 11.2929 15.7073C11.1054 15.5197 11 15.2654 11 15.0002V14.0002H10C9.73481 14.0002 9.48046 13.8948 9.29292 13.7073C9.10538 13.5197 9.00003 13.2654 9.00003 13.0002C9.00003 12.7349 9.10538 12.4806 9.29292 12.293C9.48046 12.1055 9.73481 12.0002 10 12.0002H11V11.0002C11 10.7349 11.1054 10.4806 11.2929 10.293C11.4805 10.1055 11.7348 10.0002 12 10.0002C12.2652 10.0002 12.5196 10.1055 12.7071 10.293C12.8947 10.4806 13 10.7349 13 11.0002V12.0002H14C14.2652 12.0002 14.5196 12.1055 14.7071 12.293C14.8947 12.4806 15 12.7349 15 13.0002C15 13.2654 14.8947 13.5197 14.7071 13.7073C14.5196 13.8948 14.2652 14.0002 14 14.0002Z',
2335
2363
  viewBox: '0 0 24 24',
@@ -49,3 +49,26 @@ export function cloneChildrenWithModes(
49
49
  )
50
50
  })?.filter((child) => child !== null && child !== undefined) as React.ReactNode[] ?? []
51
51
  }
52
+
53
+ /**
54
+ * Flattens React children, extracting them from Fragments.
55
+ * Useful for Group components that need to process individual items (e.g., for layout or styling)
56
+ * even when they are wrapped in a Fragment.
57
+ */
58
+ export function flattenChildren(children: React.ReactNode): React.ReactNode[] {
59
+ const flattened: React.ReactNode[] = [];
60
+ React.Children.forEach(children, (child) => {
61
+ if (!React.isValidElement(child)) {
62
+ return;
63
+ }
64
+
65
+ if (child.type === React.Fragment) {
66
+ // Recurse into Fragment children
67
+ const fragment = child as React.ReactElement<{ children?: React.ReactNode }>;
68
+ flattened.push(...flattenChildren(fragment.props.children));
69
+ } else {
70
+ flattened.push(child);
71
+ }
72
+ });
73
+ return flattened;
74
+ }
@@ -1,101 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = TransactionBubble;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _reactNative = require("react-native");
9
- var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
10
- var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
11
- var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
12
- var _TransactionStatus = _interopRequireDefault(require("../TransactionStatus/TransactionStatus"));
13
- var _jsxRuntime = require("react/jsx-runtime");
14
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
- /**
16
- * TransactionBubble component displaying transaction details in a bubble card.
17
- *
18
- * @component
19
- */
20
- function TransactionBubble({
21
- description = 'Payment to Uber India',
22
- amount = '56',
23
- currency = '₹',
24
- status = 'Expired',
25
- statusDate = '20 Mar 2025',
26
- modes = {},
27
- style
28
- }) {
29
- // --- Container Tokens ---
30
- const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/background', modes) || '#ffffff';
31
- const borderColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/color', modes) || '#e5e5e5';
32
- const borderWidth = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/size', modes)) || 1;
33
- const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/radius', modes)) || 23;
34
- const padding = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/padding', modes)) || 16;
35
- const gap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/gap', modes)) || 8;
36
-
37
- // --- Description Tokens ---
38
- const descColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/color', modes) || '#24262b';
39
- const descFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontSize', modes)) || 14;
40
- const descLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/lineHeight', modes)) || 17;
41
- const descFontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontFamily', modes) || 'System';
42
-
43
- // --- Status Row Tokens ---
44
- // Status wrapping gap from TransactionBubble definition for the row container
45
- const statusHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/height', modes)) || 18;
46
- const containerStyle = {
47
- backgroundColor,
48
- borderColor,
49
- borderWidth,
50
- borderRadius,
51
- padding,
52
- gap,
53
- alignItems: 'flex-start',
54
- width: 231,
55
- // Fixed width from design or prop? Design shows w-[231px]. We can make it auto or fixed. Let's respect style prop.
56
- ...style
57
- };
58
- const descriptionStyle = {
59
- color: descColor,
60
- fontSize: descFontSize,
61
- lineHeight: descLineHeight,
62
- fontFamily: descFontFamily,
63
- fontWeight: '500' // Hardcoded in design as 'Medium' -> 500
64
- };
65
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
66
- style: containerStyle,
67
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
68
- style: {
69
- gap: 8,
70
- width: '100%'
71
- },
72
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
73
- style: descriptionStyle,
74
- numberOfLines: 1,
75
- ellipsizeMode: "tail",
76
- children: description
77
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
78
- value: amount,
79
- currency: currency,
80
- modes: modes
81
- })]
82
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
83
- style: {
84
- flexDirection: 'row',
85
- alignItems: 'center',
86
- justifyContent: 'space-between',
87
- width: '100%',
88
- height: statusHeight // Enforce height from design
89
- },
90
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TransactionStatus.default, {
91
- status: status,
92
- date: statusDate,
93
- modes: modes
94
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
95
- direction: "Forward",
96
- modes: modes
97
- })]
98
- })]
99
- });
100
- }
101
- //# sourceMappingURL=TransactionBubble.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_MoneyValue","_NavArrow","_TransactionStatus","_jsxRuntime","e","__esModule","default","TransactionBubble","description","amount","currency","status","statusDate","modes","style","backgroundColor","getVariableByName","borderColor","borderWidth","Number","borderRadius","padding","gap","descColor","descFontSize","descLineHeight","descFontFamily","statusHeight","containerStyle","alignItems","width","descriptionStyle","color","fontSize","lineHeight","fontFamily","fontWeight","jsxs","View","children","jsx","Text","numberOfLines","ellipsizeMode","value","flexDirection","justifyContent","height","date","direction"],"sourceRoot":"../../../../src","sources":["components/TransactionBubble/TransactionBubble.tsx"],"mappings":"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","ignoreList":[]}
@@ -1,40 +0,0 @@
1
- import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
2
- import * as TransactionBubbleStories from './TransactionBubble.stories';
3
- import TransactionBubble from './TransactionBubble';
4
-
5
- <Meta of={TransactionBubbleStories} />
6
-
7
- # TransactionBubble
8
-
9
- TransactionBubble component with design-token-driven styling.
10
-
11
- ## Available Collections and Modes
12
-
13
- This component does not use any design token collections with multiple modes.
14
- ## Usage
15
-
16
- <Canvas>
17
- <Story of={TransactionBubbleStories.Default} />
18
- </Canvas>
19
-
20
- ## Props
21
-
22
- <Controls />
23
-
24
- ## Design Tokens
25
-
26
- This component uses the following design tokens, resolved through `getVariableByName`:
27
-
28
- - **`transactionBubble/background`**
29
- - **`transactionBubble/border/color`**
30
- - **`transactionBubble/border/size`**
31
- - **`transactionBubble/description/color`**
32
- - **`transactionBubble/description/fontFamily`**
33
- - **`transactionBubble/description/fontSize`**
34
- - **`transactionBubble/description/lineHeight`**
35
- - **`transactionBubble/gap`**
36
- - **`transactionBubble/padding`**
37
- - **`transactionBubble/radius`**
38
- - **`transactionBubble/statusWrap/height`**
39
-
40
- All tokens support mode-based theming through the `modes` prop.
@@ -1,96 +0,0 @@
1
- "use strict";
2
-
3
- import React from 'react';
4
- import { View, Text } from 'react-native';
5
- import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
6
- import MoneyValue from '../MoneyValue/MoneyValue';
7
- import NavArrow from '../NavArrow/NavArrow';
8
- import TransactionStatus from '../TransactionStatus/TransactionStatus';
9
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
- /**
11
- * TransactionBubble component displaying transaction details in a bubble card.
12
- *
13
- * @component
14
- */
15
- export default function TransactionBubble({
16
- description = 'Payment to Uber India',
17
- amount = '56',
18
- currency = '₹',
19
- status = 'Expired',
20
- statusDate = '20 Mar 2025',
21
- modes = {},
22
- style
23
- }) {
24
- // --- Container Tokens ---
25
- const backgroundColor = getVariableByName('transactionBubble/background', modes) || '#ffffff';
26
- const borderColor = getVariableByName('transactionBubble/border/color', modes) || '#e5e5e5';
27
- const borderWidth = Number(getVariableByName('transactionBubble/border/size', modes)) || 1;
28
- const borderRadius = Number(getVariableByName('transactionBubble/radius', modes)) || 23;
29
- const padding = Number(getVariableByName('transactionBubble/padding', modes)) || 16;
30
- const gap = Number(getVariableByName('transactionBubble/gap', modes)) || 8;
31
-
32
- // --- Description Tokens ---
33
- const descColor = getVariableByName('transactionBubble/description/color', modes) || '#24262b';
34
- const descFontSize = Number(getVariableByName('transactionBubble/description/fontSize', modes)) || 14;
35
- const descLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', modes)) || 17;
36
- const descFontFamily = getVariableByName('transactionBubble/description/fontFamily', modes) || 'System';
37
-
38
- // --- Status Row Tokens ---
39
- // Status wrapping gap from TransactionBubble definition for the row container
40
- const statusHeight = Number(getVariableByName('transactionBubble/statusWrap/height', modes)) || 18;
41
- const containerStyle = {
42
- backgroundColor,
43
- borderColor,
44
- borderWidth,
45
- borderRadius,
46
- padding,
47
- gap,
48
- alignItems: 'flex-start',
49
- width: 231,
50
- // Fixed width from design or prop? Design shows w-[231px]. We can make it auto or fixed. Let's respect style prop.
51
- ...style
52
- };
53
- const descriptionStyle = {
54
- color: descColor,
55
- fontSize: descFontSize,
56
- lineHeight: descLineHeight,
57
- fontFamily: descFontFamily,
58
- fontWeight: '500' // Hardcoded in design as 'Medium' -> 500
59
- };
60
- return /*#__PURE__*/_jsxs(View, {
61
- style: containerStyle,
62
- children: [/*#__PURE__*/_jsxs(View, {
63
- style: {
64
- gap: 8,
65
- width: '100%'
66
- },
67
- children: [/*#__PURE__*/_jsx(Text, {
68
- style: descriptionStyle,
69
- numberOfLines: 1,
70
- ellipsizeMode: "tail",
71
- children: description
72
- }), /*#__PURE__*/_jsx(MoneyValue, {
73
- value: amount,
74
- currency: currency,
75
- modes: modes
76
- })]
77
- }), /*#__PURE__*/_jsxs(View, {
78
- style: {
79
- flexDirection: 'row',
80
- alignItems: 'center',
81
- justifyContent: 'space-between',
82
- width: '100%',
83
- height: statusHeight // Enforce height from design
84
- },
85
- children: [/*#__PURE__*/_jsx(TransactionStatus, {
86
- status: status,
87
- date: statusDate,
88
- modes: modes
89
- }), /*#__PURE__*/_jsx(NavArrow, {
90
- direction: "Forward",
91
- modes: modes
92
- })]
93
- })]
94
- });
95
- }
96
- //# sourceMappingURL=TransactionBubble.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","View","Text","getVariableByName","MoneyValue","NavArrow","TransactionStatus","jsx","_jsx","jsxs","_jsxs","TransactionBubble","description","amount","currency","status","statusDate","modes","style","backgroundColor","borderColor","borderWidth","Number","borderRadius","padding","gap","descColor","descFontSize","descLineHeight","descFontFamily","statusHeight","containerStyle","alignItems","width","descriptionStyle","color","fontSize","lineHeight","fontFamily","fontWeight","children","numberOfLines","ellipsizeMode","value","flexDirection","justifyContent","height","date","direction"],"sourceRoot":"../../../../src","sources":["components/TransactionBubble/TransactionBubble.tsx"],"mappings":"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","ignoreList":[]}
@@ -1,40 +0,0 @@
1
- import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
2
- import * as TransactionBubbleStories from './TransactionBubble.stories';
3
- import TransactionBubble from './TransactionBubble';
4
-
5
- <Meta of={TransactionBubbleStories} />
6
-
7
- # TransactionBubble
8
-
9
- TransactionBubble component with design-token-driven styling.
10
-
11
- ## Available Collections and Modes
12
-
13
- This component does not use any design token collections with multiple modes.
14
- ## Usage
15
-
16
- <Canvas>
17
- <Story of={TransactionBubbleStories.Default} />
18
- </Canvas>
19
-
20
- ## Props
21
-
22
- <Controls />
23
-
24
- ## Design Tokens
25
-
26
- This component uses the following design tokens, resolved through `getVariableByName`:
27
-
28
- - **`transactionBubble/background`**
29
- - **`transactionBubble/border/color`**
30
- - **`transactionBubble/border/size`**
31
- - **`transactionBubble/description/color`**
32
- - **`transactionBubble/description/fontFamily`**
33
- - **`transactionBubble/description/fontSize`**
34
- - **`transactionBubble/description/lineHeight`**
35
- - **`transactionBubble/gap`**
36
- - **`transactionBubble/padding`**
37
- - **`transactionBubble/radius`**
38
- - **`transactionBubble/statusWrap/height`**
39
-
40
- All tokens support mode-based theming through the `modes` prop.
@@ -1,24 +0,0 @@
1
- import { type ViewStyle } from 'react-native';
2
- export type TransactionBubbleProps = {
3
- /** Description text, e.g. "Payment to Uber India" */
4
- description?: string;
5
- /** Money amount */
6
- amount?: string | number;
7
- /** Currency code or symbol */
8
- currency?: string;
9
- /** Transaction status text, e.g. "Expired" */
10
- status?: string;
11
- /** Date/time string associated with status */
12
- statusDate?: string;
13
- /** Modes for design token resolution */
14
- modes?: Record<string, any>;
15
- /** Optional container style */
16
- style?: ViewStyle;
17
- };
18
- /**
19
- * TransactionBubble component displaying transaction details in a bubble card.
20
- *
21
- * @component
22
- */
23
- export default function TransactionBubble({ description, amount, currency, status, statusDate, modes, style, }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
24
- //# sourceMappingURL=TransactionBubble.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TransactionBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/TransactionBubble/TransactionBubble.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAA;AAMzE,MAAM,MAAM,sBAAsB,GAAG;IACjC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,WAAqC,EACrC,MAAa,EACb,QAAc,EACd,MAAkB,EAClB,UAA0B,EAC1B,KAAU,EACV,KAAK,GACR,EAAE,sBAAsB,2CA2ExB"}
@@ -1,40 +0,0 @@
1
- import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
2
- import * as TransactionBubbleStories from './TransactionBubble.stories';
3
- import TransactionBubble from './TransactionBubble';
4
-
5
- <Meta of={TransactionBubbleStories} />
6
-
7
- # TransactionBubble
8
-
9
- TransactionBubble component with design-token-driven styling.
10
-
11
- ## Available Collections and Modes
12
-
13
- This component does not use any design token collections with multiple modes.
14
- ## Usage
15
-
16
- <Canvas>
17
- <Story of={TransactionBubbleStories.Default} />
18
- </Canvas>
19
-
20
- ## Props
21
-
22
- <Controls />
23
-
24
- ## Design Tokens
25
-
26
- This component uses the following design tokens, resolved through `getVariableByName`:
27
-
28
- - **`transactionBubble/background`**
29
- - **`transactionBubble/border/color`**
30
- - **`transactionBubble/border/size`**
31
- - **`transactionBubble/description/color`**
32
- - **`transactionBubble/description/fontFamily`**
33
- - **`transactionBubble/description/fontSize`**
34
- - **`transactionBubble/description/lineHeight`**
35
- - **`transactionBubble/gap`**
36
- - **`transactionBubble/padding`**
37
- - **`transactionBubble/radius`**
38
- - **`transactionBubble/statusWrap/height`**
39
-
40
- All tokens support mode-based theming through the `modes` prop.
@@ -1,113 +0,0 @@
1
- import React from 'react'
2
- import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
3
- import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
4
- import MoneyValue from '../MoneyValue/MoneyValue'
5
- import NavArrow from '../NavArrow/NavArrow'
6
- import TransactionStatus from '../TransactionStatus/TransactionStatus'
7
-
8
- export type TransactionBubbleProps = {
9
- /** Description text, e.g. "Payment to Uber India" */
10
- description?: string
11
- /** Money amount */
12
- amount?: string | number
13
- /** Currency code or symbol */
14
- currency?: string
15
- /** Transaction status text, e.g. "Expired" */
16
- status?: string
17
- /** Date/time string associated with status */
18
- statusDate?: string
19
- /** Modes for design token resolution */
20
- modes?: Record<string, any>
21
- /** Optional container style */
22
- style?: ViewStyle
23
- }
24
-
25
- /**
26
- * TransactionBubble component displaying transaction details in a bubble card.
27
- *
28
- * @component
29
- */
30
- export default function TransactionBubble({
31
- description = 'Payment to Uber India',
32
- amount = '56',
33
- currency = '₹',
34
- status = 'Expired',
35
- statusDate = '20 Mar 2025',
36
- modes = {},
37
- style,
38
- }: TransactionBubbleProps) {
39
- // --- Container Tokens ---
40
- const backgroundColor = getVariableByName('transactionBubble/background', modes) || '#ffffff'
41
- const borderColor = getVariableByName('transactionBubble/border/color', modes) || '#e5e5e5'
42
- const borderWidth = Number(getVariableByName('transactionBubble/border/size', modes)) || 1
43
- const borderRadius = Number(getVariableByName('transactionBubble/radius', modes)) || 23
44
- const padding = Number(getVariableByName('transactionBubble/padding', modes)) || 16
45
- const gap = Number(getVariableByName('transactionBubble/gap', modes)) || 8
46
-
47
- // --- Description Tokens ---
48
- const descColor = getVariableByName('transactionBubble/description/color', modes) || '#24262b'
49
- const descFontSize = Number(getVariableByName('transactionBubble/description/fontSize', modes)) || 14
50
- const descLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', modes)) || 17
51
- const descFontFamily = getVariableByName('transactionBubble/description/fontFamily', modes) || 'System'
52
-
53
- // --- Status Row Tokens ---
54
- // Status wrapping gap from TransactionBubble definition for the row container
55
- const statusHeight = Number(getVariableByName('transactionBubble/statusWrap/height', modes)) || 18
56
-
57
- const containerStyle: ViewStyle = {
58
- backgroundColor,
59
- borderColor,
60
- borderWidth,
61
- borderRadius,
62
- padding,
63
- gap,
64
- alignItems: 'flex-start',
65
- width: 231, // Fixed width from design or prop? Design shows w-[231px]. We can make it auto or fixed. Let's respect style prop.
66
- ...style,
67
- }
68
-
69
- const descriptionStyle: TextStyle = {
70
- color: descColor,
71
- fontSize: descFontSize,
72
- lineHeight: descLineHeight,
73
- fontFamily: descFontFamily,
74
- fontWeight: '500', // Hardcoded in design as 'Medium' -> 500
75
- }
76
-
77
- return (
78
- <View style={containerStyle}>
79
- {/* Description & Money Wrapper (Vertical) */}
80
- <View style={{ gap: 8, width: '100%' }}>
81
- <Text style={descriptionStyle} numberOfLines={1} ellipsizeMode='tail'>
82
- {description}
83
- </Text>
84
-
85
- <MoneyValue
86
- value={amount}
87
- currency={currency}
88
- modes={modes}
89
- />
90
- </View>
91
-
92
- {/* Status Row */}
93
- <View style={{
94
- flexDirection: 'row',
95
- alignItems: 'center',
96
- justifyContent: 'space-between',
97
- width: '100%',
98
- height: statusHeight, // Enforce height from design
99
- }}>
100
- <TransactionStatus
101
- status={status}
102
- date={statusDate}
103
- modes={modes}
104
- />
105
-
106
- <NavArrow
107
- direction="Forward"
108
- modes={modes}
109
- />
110
- </View>
111
- </View>
112
- )
113
- }