@lukso/web-components 1.6.3 → 1.7.4

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 (329) hide show
  1. package/dist/color-palette.cjs +1363 -0
  2. package/dist/{shared/utils/color-palette.d.ts → color-palette.d.ts} +1 -2
  3. package/dist/color-palette.d.ts.map +1 -0
  4. package/dist/color-palette.js +1356 -0
  5. package/dist/components/index.cjs +74 -0
  6. package/dist/components/index.d.ts +2 -1
  7. package/dist/components/index.d.ts.map +1 -1
  8. package/dist/components/index.js +17 -7354
  9. package/dist/components/lukso-button/index.cjs +144 -0
  10. package/dist/components/lukso-button/index.js +95 -1190
  11. package/dist/components/lukso-card/index.cjs +143 -0
  12. package/dist/components/lukso-card/index.js +61 -1487
  13. package/dist/components/lukso-icon/index.cjs +4366 -0
  14. package/dist/components/lukso-icon/index.js +1713 -2410
  15. package/dist/components/lukso-input/index.cjs +219 -0
  16. package/dist/components/lukso-input/index.d.ts +1 -2
  17. package/dist/components/lukso-input/index.d.ts.map +1 -1
  18. package/dist/components/lukso-input/index.js +128 -1229
  19. package/dist/components/lukso-modal/index.cjs +70 -0
  20. package/dist/components/lukso-modal/index.d.ts +18 -0
  21. package/dist/components/lukso-modal/index.d.ts.map +1 -0
  22. package/dist/components/lukso-modal/index.js +68 -0
  23. package/dist/components/lukso-navbar/index.cjs +75 -0
  24. package/dist/components/lukso-navbar/index.d.ts.map +1 -1
  25. package/dist/components/lukso-navbar/index.js +45 -1155
  26. package/dist/components/lukso-profile/index.cjs +547 -0
  27. package/dist/components/lukso-profile/index.js +483 -1370
  28. package/dist/components/lukso-sanitize/index.cjs +1730 -0
  29. package/dist/components/lukso-sanitize/index.js +1643 -1544
  30. package/dist/components/lukso-tag/index.cjs +78 -0
  31. package/dist/components/lukso-tag/index.js +52 -1189
  32. package/dist/components/lukso-test/index.cjs +120 -0
  33. package/dist/components/lukso-test/index.js +65 -1767
  34. package/dist/components/lukso-username/index.cjs +126 -0
  35. package/dist/components/lukso-username/index.js +75 -1206
  36. package/dist/components/lukso-wizard/index.cjs +93 -0
  37. package/dist/components/lukso-wizard/index.js +47 -1253
  38. package/dist/directive-9ec64c08.js +28 -0
  39. package/dist/directive-db00f5fb.cjs +34 -0
  40. package/dist/index-3a24432e.js +59 -0
  41. package/dist/index-4a1ee696.cjs +67 -0
  42. package/dist/index-714323c9.js +18 -0
  43. package/dist/index-7dc05ee5.cjs +20 -0
  44. package/dist/index.cjs +74 -0
  45. package/dist/index.js +17 -7354
  46. package/dist/shared/tailwind-element/index.cjs +10 -0
  47. package/dist/shared/tailwind-element/index.js +1 -1064
  48. package/dist/state-7fde94d1.js +9 -0
  49. package/dist/state-a62a7d5d.cjs +11 -0
  50. package/dist/style-map-17d4829d.cjs +12 -0
  51. package/dist/style-map-52bada0b.js +10 -0
  52. package/dist/styles/main.css.map +1 -1
  53. package/package.json +85 -147
  54. package/tools/assets/fonts/index.cjs +10 -0
  55. package/tools/assets/fonts/index.d.ts +2 -0
  56. package/tools/assets/fonts/index.d.ts.map +1 -0
  57. package/tools/assets/fonts/index.js +6 -0
  58. package/tools/assets/images/index.cjs +10 -0
  59. package/tools/assets/images/index.d.ts +2 -0
  60. package/tools/assets/images/index.d.ts.map +1 -0
  61. package/tools/assets/images/index.js +6 -0
  62. package/tools/assets/index.cjs +15 -0
  63. package/tools/assets/index.d.ts +4 -0
  64. package/tools/assets/index.d.ts.map +1 -0
  65. package/tools/assets/index.js +9 -0
  66. package/tools/color-palette-a34f5d09.js +1356 -0
  67. package/tools/color-palette-bf5780ed.cjs +1362 -0
  68. package/tools/color-palette.cjs +11 -146
  69. package/tools/color-palette.d.ts +39 -52
  70. package/tools/color-palette.d.ts.map +1 -1
  71. package/tools/color-palette.js +1 -0
  72. package/tools/copy-assets.cjs +50 -136
  73. package/tools/copy-assets.d.ts +7 -9
  74. package/tools/copy-assets.d.ts.map +1 -1
  75. package/tools/copy-assets.js +49 -0
  76. package/tools/index.cjs +35 -0
  77. package/tools/index.d.ts +6 -0
  78. package/tools/index.d.ts.map +1 -0
  79. package/tools/index.js +22 -0
  80. package/tools/sass/index.cjs +7 -0
  81. package/tools/sass/index.js +1 -0
  82. package/tools/styles/index.cjs +5 -0
  83. package/tools/styles/index.js +3 -0
  84. package/tools/styles/main.css +287 -0
  85. package/CHANGELOG.md +0 -287
  86. package/dist/assets/fonts/index.js +0 -4
  87. package/dist/assets/fonts/index.ts +0 -1
  88. package/dist/assets/fonts/index.umd.cjs +0 -1
  89. package/dist/assets/images/index.js +0 -4
  90. package/dist/assets/images/index.ts +0 -1
  91. package/dist/assets/images/index.umd.cjs +0 -1
  92. package/dist/assets/index.js +0 -4
  93. package/dist/assets/index.ts +0 -1
  94. package/dist/assets/index.umd.cjs +0 -1
  95. package/dist/color-palette/index.js +0 -705
  96. package/dist/color-palette/index.umd.cjs +0 -1
  97. package/dist/components/index.umd.cjs +0 -3756
  98. package/dist/components/lukso-button/index.umd.cjs +0 -88
  99. package/dist/components/lukso-card/index.umd.cjs +0 -145
  100. package/dist/components/lukso-icon/index.umd.cjs +0 -3465
  101. package/dist/components/lukso-input/index.umd.cjs +0 -109
  102. package/dist/components/lukso-navbar/index.umd.cjs +0 -73
  103. package/dist/components/lukso-profile/index.umd.cjs +0 -90
  104. package/dist/components/lukso-sanitize/index.umd.cjs +0 -61
  105. package/dist/components/lukso-tag/index.umd.cjs +0 -67
  106. package/dist/components/lukso-test/index.umd.cjs +0 -95
  107. package/dist/components/lukso-username/index.umd.cjs +0 -75
  108. package/dist/components/lukso-wizard/index.umd.cjs +0 -89
  109. package/dist/index.umd.cjs +0 -3756
  110. package/dist/sass/index.js +0 -4
  111. package/dist/sass/index.ts +0 -1
  112. package/dist/sass/index.umd.cjs +0 -1
  113. package/dist/shared/assets/index.d.ts +0 -3
  114. package/dist/shared/assets/index.d.ts.map +0 -1
  115. package/dist/shared/directives/custom-class-map/index.d.ts +0 -26
  116. package/dist/shared/directives/custom-class-map/index.d.ts.map +0 -1
  117. package/dist/shared/directives/index.d.ts +0 -2
  118. package/dist/shared/directives/index.d.ts.map +0 -1
  119. package/dist/shared/styles/index.d.ts +0 -3
  120. package/dist/shared/styles/index.d.ts.map +0 -1
  121. package/dist/shared/tailwind-element/index.umd.cjs +0 -39
  122. package/dist/shared/tailwind-element.js +0 -1064
  123. package/dist/shared/tailwind-element.umd.cjs +0 -39
  124. package/dist/shared/utils/color-palette.d.ts.map +0 -1
  125. package/dist/styles/index.js +0 -4
  126. package/dist/styles/index.umd.cjs +0 -1
  127. package/src/components/index.ts +0 -13
  128. package/src/components/lukso-button/index.ts +0 -145
  129. package/src/components/lukso-button/lukso-button.stories.ts +0 -216
  130. package/src/components/lukso-card/index.ts +0 -131
  131. package/src/components/lukso-card/lukso-card.stories.ts +0 -191
  132. package/src/components/lukso-card/style.scss +0 -7
  133. package/src/components/lukso-icon/icons/add-photo.ts +0 -46
  134. package/src/components/lukso-icon/icons/arrow-down-lg.ts +0 -26
  135. package/src/components/lukso-icon/icons/arrow-down-sm.ts +0 -26
  136. package/src/components/lukso-icon/icons/arrow-left-lg.ts +0 -26
  137. package/src/components/lukso-icon/icons/arrow-left-sm.ts +0 -26
  138. package/src/components/lukso-icon/icons/arrow-right-lg.ts +0 -26
  139. package/src/components/lukso-icon/icons/arrow-right-sm.ts +0 -26
  140. package/src/components/lukso-icon/icons/arrow-up-lg.ts +0 -26
  141. package/src/components/lukso-icon/icons/arrow-up-sm.ts +0 -26
  142. package/src/components/lukso-icon/icons/barbell-outline.ts +0 -54
  143. package/src/components/lukso-icon/icons/bulb-outline.ts +0 -54
  144. package/src/components/lukso-icon/icons/camera.ts +0 -40
  145. package/src/components/lukso-icon/icons/clipboard.ts +0 -59
  146. package/src/components/lukso-icon/icons/clock.ts +0 -31
  147. package/src/components/lukso-icon/icons/close-lg.ts +0 -33
  148. package/src/components/lukso-icon/icons/close-sm.ts +0 -33
  149. package/src/components/lukso-icon/icons/cloud.ts +0 -25
  150. package/src/components/lukso-icon/icons/compass-outline.ts +0 -29
  151. package/src/components/lukso-icon/icons/complete-filled-fade-in.ts +0 -34
  152. package/src/components/lukso-icon/icons/complete-filled.ts +0 -32
  153. package/src/components/lukso-icon/icons/complete-outline.ts +0 -31
  154. package/src/components/lukso-icon/icons/connect.ts +0 -33
  155. package/src/components/lukso-icon/icons/connections.ts +0 -34
  156. package/src/components/lukso-icon/icons/contract-lock.ts +0 -43
  157. package/src/components/lukso-icon/icons/controller.ts +0 -55
  158. package/src/components/lukso-icon/icons/copy.ts +0 -31
  159. package/src/components/lukso-icon/icons/cross-outline.ts +0 -38
  160. package/src/components/lukso-icon/icons/dots.ts +0 -22
  161. package/src/components/lukso-icon/icons/edit.ts +0 -30
  162. package/src/components/lukso-icon/icons/error.ts +0 -31
  163. package/src/components/lukso-icon/icons/eth-logo.ts +0 -50
  164. package/src/components/lukso-icon/icons/expand.ts +0 -31
  165. package/src/components/lukso-icon/icons/extension.ts +0 -31
  166. package/src/components/lukso-icon/icons/eye-hide.ts +0 -47
  167. package/src/components/lukso-icon/icons/eye-show.ts +0 -37
  168. package/src/components/lukso-icon/icons/filter.ts +0 -43
  169. package/src/components/lukso-icon/icons/fish-outline.ts +0 -36
  170. package/src/components/lukso-icon/icons/flip.ts +0 -45
  171. package/src/components/lukso-icon/icons/globe.ts +0 -61
  172. package/src/components/lukso-icon/icons/google-color.ts +0 -35
  173. package/src/components/lukso-icon/icons/hamburger.ts +0 -40
  174. package/src/components/lukso-icon/icons/infinite.ts +0 -33
  175. package/src/components/lukso-icon/icons/information.ts +0 -38
  176. package/src/components/lukso-icon/icons/key-outline.ts +0 -25
  177. package/src/components/lukso-icon/icons/link.ts +0 -33
  178. package/src/components/lukso-icon/icons/link1.ts +0 -39
  179. package/src/components/lukso-icon/icons/link2.ts +0 -46
  180. package/src/components/lukso-icon/icons/link3.ts +0 -32
  181. package/src/components/lukso-icon/icons/link4.ts +0 -52
  182. package/src/components/lukso-icon/icons/loading.ts +0 -50
  183. package/src/components/lukso-icon/icons/location.ts +0 -33
  184. package/src/components/lukso-icon/icons/locked.ts +0 -44
  185. package/src/components/lukso-icon/icons/login-2.ts +0 -55
  186. package/src/components/lukso-icon/icons/login-3.ts +0 -53
  187. package/src/components/lukso-icon/icons/login.ts +0 -39
  188. package/src/components/lukso-icon/icons/logo-chrome.ts +0 -35
  189. package/src/components/lukso-icon/icons/lyx-logo.ts +0 -41
  190. package/src/components/lukso-icon/icons/mail.ts +0 -33
  191. package/src/components/lukso-icon/icons/menu-1.ts +0 -71
  192. package/src/components/lukso-icon/icons/menu-2.ts +0 -61
  193. package/src/components/lukso-icon/icons/migrate.ts +0 -47
  194. package/src/components/lukso-icon/icons/minimize.ts +0 -53
  195. package/src/components/lukso-icon/icons/network.ts +0 -49
  196. package/src/components/lukso-icon/icons/notifications.ts +0 -33
  197. package/src/components/lukso-icon/icons/phone-portrait-outline.ts +0 -33
  198. package/src/components/lukso-icon/icons/pin.ts +0 -25
  199. package/src/components/lukso-icon/icons/play-filled.ts +0 -23
  200. package/src/components/lukso-icon/icons/play-outline.ts +0 -24
  201. package/src/components/lukso-icon/icons/plus.ts +0 -33
  202. package/src/components/lukso-icon/icons/profile-add.ts +0 -43
  203. package/src/components/lukso-icon/icons/profile-export.ts +0 -42
  204. package/src/components/lukso-icon/icons/profile-import.ts +0 -42
  205. package/src/components/lukso-icon/icons/profile-recovery-2.ts +0 -62
  206. package/src/components/lukso-icon/icons/profile-recovery.ts +0 -55
  207. package/src/components/lukso-icon/icons/profile-restore.ts +0 -50
  208. package/src/components/lukso-icon/icons/profile.ts +0 -29
  209. package/src/components/lukso-icon/icons/progress-complete.ts +0 -289
  210. package/src/components/lukso-icon/icons/progress-indicator.ts +0 -236
  211. package/src/components/lukso-icon/icons/pulse-dot.ts +0 -22
  212. package/src/components/lukso-icon/icons/qr-code.ts +0 -122
  213. package/src/components/lukso-icon/icons/relayer.ts +0 -40
  214. package/src/components/lukso-icon/icons/reload.ts +0 -32
  215. package/src/components/lukso-icon/icons/return-down.ts +0 -33
  216. package/src/components/lukso-icon/icons/return-left.ts +0 -33
  217. package/src/components/lukso-icon/icons/return-right.ts +0 -33
  218. package/src/components/lukso-icon/icons/return-up.ts +0 -33
  219. package/src/components/lukso-icon/icons/search.ts +0 -28
  220. package/src/components/lukso-icon/icons/settings.ts +0 -33
  221. package/src/components/lukso-icon/icons/smart-contract-doc.ts +0 -40
  222. package/src/components/lukso-icon/icons/smart-contract.ts +0 -31
  223. package/src/components/lukso-icon/icons/star-filled.ts +0 -23
  224. package/src/components/lukso-icon/icons/star-outline.ts +0 -24
  225. package/src/components/lukso-icon/icons/step-dot.ts +0 -34
  226. package/src/components/lukso-icon/icons/step-progress.ts +0 -31
  227. package/src/components/lukso-icon/icons/steps.ts +0 -40
  228. package/src/components/lukso-icon/icons/tick.ts +0 -26
  229. package/src/components/lukso-icon/icons/timer-outline.ts +0 -47
  230. package/src/components/lukso-icon/icons/transaction-receive.ts +0 -39
  231. package/src/components/lukso-icon/icons/transaction-send.ts +0 -39
  232. package/src/components/lukso-icon/icons/transfer.ts +0 -47
  233. package/src/components/lukso-icon/icons/trash.ts +0 -40
  234. package/src/components/lukso-icon/icons/turn-down.ts +0 -33
  235. package/src/components/lukso-icon/icons/turn-left.ts +0 -33
  236. package/src/components/lukso-icon/icons/turn-right.ts +0 -33
  237. package/src/components/lukso-icon/icons/turn-up.ts +0 -33
  238. package/src/components/lukso-icon/icons/unlocked.ts +0 -41
  239. package/src/components/lukso-icon/icons/wallet-outline.ts +0 -35
  240. package/src/components/lukso-icon/icons/warning-round.ts +0 -32
  241. package/src/components/lukso-icon/icons/warning-triangle.ts +0 -32
  242. package/src/components/lukso-icon/index.ts +0 -310
  243. package/src/components/lukso-icon/lukso-icon.stories.ts +0 -116
  244. package/src/components/lukso-icon/style.scss +0 -3
  245. package/src/components/lukso-input/index.ts +0 -211
  246. package/src/components/lukso-input/lukso-input.stories.ts +0 -184
  247. package/src/components/lukso-navbar/index.ts +0 -63
  248. package/src/components/lukso-navbar/lukso-navbar.stories.ts +0 -70
  249. package/src/components/lukso-profile/index.ts +0 -106
  250. package/src/components/lukso-profile/lukso-profile.stories.ts +0 -104
  251. package/src/components/lukso-sanitize/index.ts +0 -28
  252. package/src/components/lukso-sanitize/lukso-sanitize.stories.ts +0 -30
  253. package/src/components/lukso-tag/index.ts +0 -68
  254. package/src/components/lukso-tag/lukso-tag.stories.ts +0 -129
  255. package/src/components/lukso-test/index.ts +0 -72
  256. package/src/components/lukso-test/test.component.scss +0 -7
  257. package/src/components/lukso-test/test.stories.ts +0 -31
  258. package/src/components/lukso-username/index.ts +0 -105
  259. package/src/components/lukso-username/lukso-username.stories.ts +0 -98
  260. package/src/components/lukso-wizard/index.ts +0 -74
  261. package/src/components/lukso-wizard/lukso-wizard.stories.ts +0 -52
  262. package/src/docs/animations.stories.mdx +0 -83
  263. package/src/docs/colors.stories.mdx +0 -77
  264. package/src/docs/drop-shadows.stories.mdx +0 -108
  265. package/src/docs/icons.stories.mdx +0 -1590
  266. package/src/docs/typography.stories.mdx +0 -253
  267. package/src/index.ts +0 -1
  268. package/src/postcss.config.ts +0 -8
  269. package/src/shared/assets/fonts/Apax-Bold.woff2 +0 -0
  270. package/src/shared/assets/fonts/Apax-Light.woff2 +0 -0
  271. package/src/shared/assets/fonts/Apax-Medium.woff2 +0 -0
  272. package/src/shared/assets/fonts/Apax-Regular.woff2 +0 -0
  273. package/src/shared/assets/fonts/Inter-Bold.woff2 +0 -0
  274. package/src/shared/assets/fonts/Inter-ExtraBold.woff2 +0 -0
  275. package/src/shared/assets/fonts/Inter-Medium.woff2 +0 -0
  276. package/src/shared/assets/fonts/Inter-Regular.woff2 +0 -0
  277. package/src/shared/assets/fonts/Inter-SemiBold.woff2 +0 -0
  278. package/src/shared/assets/fonts/Inter-Thin.woff2 +0 -0
  279. package/src/shared/assets/fonts/PT-Mono-Bold.woff2 +0 -0
  280. package/src/shared/assets/fonts/PT-Mono-Regular.woff2 +0 -0
  281. package/src/shared/assets/fonts/index.ts +0 -1
  282. package/src/shared/assets/images/index.ts +0 -1
  283. package/src/shared/assets/images/lukso-logo.svg +0 -3
  284. package/src/shared/assets/images/profile-default.png +0 -0
  285. package/src/shared/assets/index.ts +0 -1
  286. package/src/shared/directives/custom-class-map/index.ts +0 -49
  287. package/src/shared/directives/index.ts +0 -1
  288. package/src/shared/globals.d.ts +0 -5
  289. package/src/shared/styles/colors.scss +0 -91
  290. package/src/shared/styles/component.scss +0 -13
  291. package/src/shared/styles/fonts.scss +0 -97
  292. package/src/shared/styles/index.ts +0 -1
  293. package/src/shared/styles/main.scss +0 -13
  294. package/src/shared/styles/typography.scss +0 -142
  295. package/src/shared/styles/variables.scss +0 -5
  296. package/src/shared/tailwind-element/index.ts +0 -16
  297. package/src/shared/utils/__tests__/slice-address.spec.ts +0 -15
  298. package/src/shared/utils/color-palette.ts +0 -76
  299. package/src/shared/utils/copy-assets.ts +0 -80
  300. package/src/shared/utils/hsl-color-map.ts +0 -20
  301. package/src/shared/utils/slice-address.ts +0 -30
  302. /package/{dist → tools}/assets/fonts/Apax-Bold.woff2 +0 -0
  303. /package/{dist → tools}/assets/fonts/Apax-Light.woff2 +0 -0
  304. /package/{dist → tools}/assets/fonts/Apax-Medium.woff2 +0 -0
  305. /package/{dist → tools}/assets/fonts/Apax-Regular.woff2 +0 -0
  306. /package/{dist → tools}/assets/fonts/Inter-Bold.woff2 +0 -0
  307. /package/{dist → tools}/assets/fonts/Inter-ExtraBold.woff2 +0 -0
  308. /package/{dist → tools}/assets/fonts/Inter-Medium.woff2 +0 -0
  309. /package/{dist → tools}/assets/fonts/Inter-Regular.woff2 +0 -0
  310. /package/{dist → tools}/assets/fonts/Inter-SemiBold.woff2 +0 -0
  311. /package/{dist → tools}/assets/fonts/Inter-Thin.woff2 +0 -0
  312. /package/{dist → tools}/assets/fonts/PT-Mono-Bold.woff2 +0 -0
  313. /package/{dist → tools}/assets/fonts/PT-Mono-Regular.woff2 +0 -0
  314. /package/{dist → tools}/assets/images/lukso-logo.svg +0 -0
  315. /package/{dist → tools}/assets/images/profile-default.png +0 -0
  316. /package/{dist/shared/utils → tools}/hsl-color-map.d.ts +0 -0
  317. /package/{dist/shared/utils → tools}/hsl-color-map.d.ts.map +0 -0
  318. /package/{dist → tools}/sass/colors.scss +0 -0
  319. /package/{dist → tools}/sass/component.scss +0 -0
  320. /package/{dist → tools}/sass/fonts.scss +0 -0
  321. /package/{dist/shared/assets/fonts → tools/sass}/index.d.ts +0 -0
  322. /package/{dist/shared/assets/fonts → tools/sass}/index.d.ts.map +0 -0
  323. /package/{dist → tools}/sass/main.scss +0 -0
  324. /package/{dist → tools}/sass/typography.scss +0 -0
  325. /package/{dist → tools}/sass/variables.scss +0 -0
  326. /package/{dist/shared/utils → tools}/slice-address.d.ts +0 -0
  327. /package/{dist/shared/utils → tools}/slice-address.d.ts.map +0 -0
  328. /package/{dist/shared/assets/images → tools/styles}/index.d.ts +0 -0
  329. /package/{dist/shared/assets/images → tools/styles}/index.d.ts.map +0 -0
package/src/docs/icons.stories.mdx DELETED
@@ -1,1590 +0,0 @@
1
- import { Meta, IconGallery, IconItem } from '@storybook/addon-docs'
2
- import '../components/lukso-icon/index'
3
-
4
- <h1>Icons Showcase</h1>
5
-
6
- Please check `lukso-icon` to learn how use icons.
7
-
8
- <Meta title="Design System/Icons" />
9
-
10
- ### **Utility**
11
-
12
- <div class="pt-4">
13
- <IconGallery>
14
- <IconItem name="add-photo">
15
- <lukso-icon name="add-photo" size="medium"></lukso-icon>
16
- </IconItem>
17
- <IconItem name="arrow-down-lg">
18
- <lukso-icon name="arrow-down-lg" size="medium"></lukso-icon>
19
- </IconItem>
20
- <IconItem name="arrow-down-sm">
21
- <lukso-icon name="arrow-down-sm" size="medium"></lukso-icon>
22
- </IconItem>
23
- <IconItem name="arrow-left-lg">
24
- <lukso-icon name="arrow-left-lg" size="medium"></lukso-icon>
25
- </IconItem>
26
- <IconItem name="arrow-left-sm">
27
- <lukso-icon name="arrow-left-sm" size="medium"></lukso-icon>
28
- </IconItem>
29
- <IconItem name="arrow-right-lg">
30
- <lukso-icon name="arrow-right-lg" size="medium"></lukso-icon>
31
- </IconItem>
32
- <IconItem name="arrow-right-sm">
33
- <lukso-icon name="arrow-right-sm" size="medium"></lukso-icon>
34
- </IconItem>
35
- <IconItem name="arrow-up-lg">
36
- <lukso-icon name="arrow-up-lg" size="medium"></lukso-icon>
37
- </IconItem>
38
- <IconItem name="arrow-up-sm">
39
- <lukso-icon name="arrow-up-sm" size="medium"></lukso-icon>
40
- </IconItem>
41
- <IconItem name="barbell-outline">
42
- <lukso-icon name="barbell-outline" size="medium"></lukso-icon>
43
- </IconItem>
44
- <IconItem name="bulb-outline">
45
- <lukso-icon name="bulb-outline" size="medium"></lukso-icon>
46
- </IconItem>
47
- <IconItem name="camera">
48
- <lukso-icon name="camera" size="medium"></lukso-icon>
49
- </IconItem>
50
- <IconItem name="clipboard">
51
- <lukso-icon name="clipboard" size="medium"></lukso-icon>
52
- </IconItem>
53
- <IconItem name="clock">
54
- <lukso-icon name="clock" size="medium"></lukso-icon>
55
- </IconItem>
56
- <IconItem name="close-lg">
57
- <lukso-icon name="close-lg" size="medium"></lukso-icon>
58
- </IconItem>
59
- <IconItem name="close-sm">
60
- <lukso-icon name="close-sm" size="medium"></lukso-icon>
61
- </IconItem>
62
- <IconItem name="cloud">
63
- <lukso-icon name="cloud" size="medium"></lukso-icon>
64
- </IconItem>
65
- <IconItem name="compass-outline">
66
- <lukso-icon name="compass-outline" size="medium"></lukso-icon>
67
- </IconItem>
68
- <IconItem name="complete-filled">
69
- <lukso-icon
70
- name="complete-filled"
71
- size="medium"
72
- secondary-color="neutral-100"
73
- ></lukso-icon>
74
- </IconItem>
75
- <IconItem name="complete-outline">
76
- <lukso-icon name="complete-outline" size="medium"></lukso-icon>
77
- </IconItem>
78
- <IconItem name="connect">
79
- <lukso-icon name="connect" size="medium"></lukso-icon>
80
- </IconItem>
81
- <IconItem name="connections">
82
- <lukso-icon name="connections" size="medium"></lukso-icon>
83
- </IconItem>
84
- <IconItem name="contract-lock">
85
- <lukso-icon name="contract-lock" size="medium"></lukso-icon>
86
- </IconItem>
87
- <IconItem name="controller">
88
- <lukso-icon name="controller" size="medium"></lukso-icon>
89
- </IconItem>
90
- <IconItem name="copy">
91
- <lukso-icon name="copy" size="medium"></lukso-icon>
92
- </IconItem>
93
- <IconItem name="cross-outline">
94
- <lukso-icon name="cross-outline" size="medium"></lukso-icon>
95
- </IconItem>
96
- <IconItem name="dots">
97
- <lukso-icon name="dots" size="medium"></lukso-icon>
98
- </IconItem>
99
- <IconItem name="edit">
100
- <lukso-icon name="edit" size="medium"></lukso-icon>
101
- </IconItem>
102
- <IconItem name="error">
103
- <lukso-icon name="error" size="medium"></lukso-icon>
104
- </IconItem>
105
- <IconItem name="expand">
106
- <lukso-icon name="expand" size="medium"></lukso-icon>
107
- </IconItem>
108
- <IconItem name="extension">
109
- <lukso-icon name="extension" size="medium"></lukso-icon>
110
- </IconItem>
111
- <IconItem name="eye-hide">
112
- <lukso-icon name="eye-hide" size="medium"></lukso-icon>
113
- </IconItem>
114
- <IconItem name="eye-show">
115
- <lukso-icon name="eye-show" size="medium"></lukso-icon>
116
- </IconItem>
117
- <IconItem name="filter">
118
- <lukso-icon name="filter" size="medium"></lukso-icon>
119
- </IconItem>
120
- <IconItem name="fish-outline">
121
- <lukso-icon name="fish-outline" size="medium"></lukso-icon>
122
- </IconItem>
123
- <IconItem name="flip">
124
- <lukso-icon name="flip" size="medium"></lukso-icon>
125
- </IconItem>
126
- <IconItem name="globe">
127
- <lukso-icon name="globe" size="medium"></lukso-icon>
128
- </IconItem>
129
- <IconItem name="hamburger">
130
- <lukso-icon name="hamburger" size="medium"></lukso-icon>
131
- </IconItem>
132
- <IconItem name="infinite">
133
- <lukso-icon name="infinite" size="medium"></lukso-icon>
134
- </IconItem>
135
- <IconItem name="information">
136
- <lukso-icon name="information" size="medium"></lukso-icon>
137
- </IconItem>
138
- <IconItem name="key-outline">
139
- <lukso-icon name="key-outline" size="medium"></lukso-icon>
140
- </IconItem>
141
- <IconItem name="link">
142
- <lukso-icon name="link" size="medium"></lukso-icon>
143
- </IconItem>
144
- <IconItem name="link-1">
145
- <lukso-icon name="link-1" size="medium"></lukso-icon>
146
- </IconItem>
147
- <IconItem name="link-2">
148
- <lukso-icon
149
- name="link-2"
150
- size="medium"
151
- secondary-color="neutral-100"
152
- ></lukso-icon>
153
- </IconItem>
154
- <IconItem name="link-3">
155
- <lukso-icon name="link-3" size="medium"></lukso-icon>
156
- </IconItem>
157
- <IconItem name="link-4">
158
- <lukso-icon
159
- name="link-4"
160
- size="medium"
161
- secondary-color="neutral-100"
162
- ></lukso-icon>
163
- </IconItem>
164
- <IconItem name="loading">
165
- <lukso-icon name="loading" size="medium"></lukso-icon>
166
- </IconItem>
167
- <IconItem name="location">
168
- <lukso-icon name="location" size="medium"></lukso-icon>
169
- </IconItem>
170
- <IconItem name="locked">
171
- <lukso-icon name="locked" size="medium"></lukso-icon>
172
- </IconItem>
173
- <IconItem name="login">
174
- <lukso-icon name="login" size="medium"></lukso-icon>
175
- </IconItem>
176
- <IconItem name="login-2">
177
- <lukso-icon name="login-2" size="medium"></lukso-icon>
178
- </IconItem>
179
- <IconItem name="login-3">
180
- <lukso-icon name="login-3" size="medium"></lukso-icon>
181
- </IconItem>
182
- <IconItem name="logo-chrome">
183
- <lukso-icon name="logo-chrome" size="medium"></lukso-icon>
184
- </IconItem>
185
- <IconItem name="mail">
186
- <lukso-icon name="mail" size="medium"></lukso-icon>
187
- </IconItem>
188
- <IconItem name="menu-1">
189
- <lukso-icon name="menu-1" size="medium"></lukso-icon>
190
- </IconItem>
191
- <IconItem name="menu-2">
192
- <lukso-icon name="menu-2" size="medium"></lukso-icon>
193
- </IconItem>
194
- <IconItem name="migrate">
195
- <lukso-icon name="migrate" size="medium"></lukso-icon>
196
- </IconItem>
197
- <IconItem name="minimize">
198
- <lukso-icon name="minimize" size="medium"></lukso-icon>
199
- </IconItem>
200
- <IconItem name="network">
201
- <lukso-icon name="network" size="medium"></lukso-icon>
202
- </IconItem>
203
- <IconItem name="notifications">
204
- <lukso-icon name="notifications" size="medium"></lukso-icon>
205
- </IconItem>
206
- <IconItem name="phone-portrait-outline">
207
- <lukso-icon name="phone-portrait-outline" size="medium"></lukso-icon>
208
- </IconItem>
209
- <IconItem name="pin">
210
- <lukso-icon name="pin" size="medium"></lukso-icon>
211
- </IconItem>
212
- <IconItem name="play-filled">
213
- <lukso-icon name="play-filled" size="medium"></lukso-icon>
214
- </IconItem>
215
- <IconItem name="play-outline">
216
- <lukso-icon name="play-outline" size="medium"></lukso-icon>
217
- </IconItem>
218
- <IconItem name="plus">
219
- <lukso-icon name="plus" size="medium"></lukso-icon>
220
- </IconItem>
221
- <IconItem name="profile-add">
222
- <lukso-icon name="profile-add" size="medium"></lukso-icon>
223
- </IconItem>
224
- <IconItem name="profile-export">
225
- <lukso-icon name="profile-export" size="medium"></lukso-icon>
226
- </IconItem>
227
- <IconItem name="profile-import">
228
- <lukso-icon name="profile-import" size="medium"></lukso-icon>
229
- </IconItem>
230
- <IconItem name="profile-recovery">
231
- <lukso-icon name="profile-recovery" size="medium"></lukso-icon>
232
- </IconItem>
233
- <IconItem name="profile-recovery-2">
234
- <lukso-icon
235
- name="profile-recovery-2"
236
- size="medium"
237
- secondary-color="neutral-100"
238
- ></lukso-icon>
239
- </IconItem>
240
- <IconItem name="profile-restore">
241
- <lukso-icon name="profile-restore" size="medium"></lukso-icon>
242
- </IconItem>
243
- <IconItem name="profile">
244
- <lukso-icon name="profile" size="medium"></lukso-icon>
245
- </IconItem>
246
- <IconItem name="qr-code">
247
- <lukso-icon
248
- name="qr-code"
249
- size="medium"
250
- secondary-color="neutral-100"
251
- ></lukso-icon>
252
- </IconItem>
253
- <IconItem name="relayer">
254
- <lukso-icon name="relayer" size="medium"></lukso-icon>
255
- </IconItem>
256
- <IconItem name="reload">
257
- <lukso-icon name="reload" size="medium"></lukso-icon>
258
- </IconItem>
259
- <IconItem name="return-down">
260
- <lukso-icon name="return-down" size="medium"></lukso-icon>
261
- </IconItem>
262
- <IconItem name="return-left">
263
- <lukso-icon name="return-left" size="medium"></lukso-icon>
264
- </IconItem>
265
- <IconItem name="return-right">
266
- <lukso-icon name="return-right" size="medium"></lukso-icon>
267
- </IconItem>
268
- <IconItem name="return-up">
269
- <lukso-icon name="return-up" size="medium"></lukso-icon>
270
- </IconItem>
271
- <IconItem name="search">
272
- <lukso-icon name="search" size="medium"></lukso-icon>
273
- </IconItem>
274
- <IconItem name="settings">
275
- <lukso-icon name="settings" size="medium"></lukso-icon>
276
- </IconItem>
277
- <IconItem name="smart-contract-doc">
278
- <lukso-icon name="smart-contract-doc" size="medium"></lukso-icon>
279
- </IconItem>
280
- <IconItem name="smart-contract">
281
- <lukso-icon name="smart-contract" size="medium"></lukso-icon>
282
- </IconItem>
283
- <IconItem name="star-filled">
284
- <lukso-icon name="star-filled" size="medium"></lukso-icon>
285
- </IconItem>
286
- <IconItem name="star-outline">
287
- <lukso-icon name="star-outline" size="medium"></lukso-icon>
288
- </IconItem>
289
- <IconItem name="step-dot">
290
- <lukso-icon
291
- name="step-dot"
292
- size="medium"
293
- secondary-color="neutral-100"
294
- ></lukso-icon>
295
- </IconItem>
296
- <IconItem name="step-progress">
297
- <lukso-icon
298
- name="step-progress"
299
- size="medium"
300
- secondary-color="neutral-100"
301
- ></lukso-icon>
302
- </IconItem>
303
- <IconItem name="steps">
304
- <lukso-icon name="steps" size="medium"></lukso-icon>
305
- </IconItem>
306
- <IconItem name="tick">
307
- <lukso-icon name="tick" size="medium"></lukso-icon>
308
- </IconItem>
309
- <IconItem name="timer-outline">
310
- <lukso-icon name="timer-outline" size="medium"></lukso-icon>
311
- </IconItem>
312
- <IconItem name="transaction-receive">
313
- <lukso-icon name="transaction-receive" size="medium"></lukso-icon>
314
- </IconItem>
315
- <IconItem name="transaction-send">
316
- <lukso-icon name="transaction-send" size="medium"></lukso-icon>
317
- </IconItem>
318
- <IconItem name="transfer">
319
- <lukso-icon name="transfer" size="medium"></lukso-icon>
320
- </IconItem>
321
- <IconItem name="trash">
322
- <lukso-icon name="trash" size="medium"></lukso-icon>
323
- </IconItem>
324
- <IconItem name="turn-down">
325
- <lukso-icon name="turn-down" size="medium"></lukso-icon>
326
- </IconItem>
327
- <IconItem name="turn-left">
328
- <lukso-icon name="turn-left" size="medium"></lukso-icon>
329
- </IconItem>
330
- <IconItem name="turn-right">
331
- <lukso-icon name="turn-right" size="medium"></lukso-icon>
332
- </IconItem>
333
- <IconItem name="turn-up">
334
- <lukso-icon name="turn-up" size="medium"></lukso-icon>
335
- </IconItem>
336
- <IconItem name="unlocked">
337
- <lukso-icon name="unlocked" size="medium"></lukso-icon>
338
- </IconItem>
339
- <IconItem name="wallet-outline">
340
- <lukso-icon name="wallet-outline" size="medium"></lukso-icon>
341
- </IconItem>
342
- <IconItem name="warning-round">
343
- <lukso-icon name="warning-round" size="medium"></lukso-icon>
344
- </IconItem>
345
- <IconItem name="warning-triangle">
346
- <lukso-icon name="warning-triangle" size="medium"></lukso-icon>
347
- </IconItem>
348
- </IconGallery>
349
- </div>
350
-
351
- ### **Colored icons**
352
-
353
- <div class="pt-4">
354
- <IconGallery>
355
- <IconItem name="google-color">
356
- <lukso-icon name="google-color" size="medium"></lukso-icon>
357
- </IconItem>
358
- <IconItem name="lyx-logo">
359
- <lukso-icon name="lyx-logo" size="medium"></lukso-icon>
360
- </IconItem>
361
- <IconItem name="eth-logo">
362
- <lukso-icon name="eth-logo" size="medium"></lukso-icon>
363
- </IconItem>
364
- <IconItem name="progress-complete">
365
- <lukso-icon name="progress-complete" size="medium"></lukso-icon>
366
- </IconItem>
367
- </IconGallery>
368
- </div>
369
-
370
- ### **Animated icons**
371
-
372
- <div class="pt-4">
373
- <IconGallery>
374
- <IconItem name="progress-indicator">
375
- <lukso-icon name="progress-indicator" size="medium"></lukso-icon>
376
- </IconItem>
377
- <IconItem name="pulse-dot">
378
- <lukso-icon name="pulse-dot"></lukso-icon>
379
- </IconItem>
380
- <IconItem name="complete-filled-fade-in">
381
- <lukso-icon name="complete-filled-fade-in"></lukso-icon>
382
- </IconItem>
383
- </IconGallery>
384
- </div>
385
-
386
- ### **Sizes**
387
-
388
- Icons support four different sizes: `small`, `medium`, `large` and `x-large`.
389
-
390
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
391
- #### `add-photo`
392
- <div class="flex gap-4 mt-8">
393
- <lukso-icon name="add-photo" size="small"></lukso-icon>
394
- <lukso-icon name="add-photo" size="medium"></lukso-icon>
395
- <lukso-icon name="add-photo" size="large"></lukso-icon>
396
- <lukso-icon name="add-photo" size="x-large"></lukso-icon>
397
- </div>
398
- </div>
399
-
400
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
401
- #### `arrow-down-lg`
402
- <div class="flex gap-4 mt-8">
403
- <lukso-icon name="arrow-down-lg" size="small"></lukso-icon>
404
- <lukso-icon name="arrow-down-lg" size="medium"></lukso-icon>
405
- <lukso-icon name="arrow-down-lg" size="large"></lukso-icon>
406
- <lukso-icon name="arrow-down-lg" size="x-large"></lukso-icon>
407
- </div>
408
- </div>
409
-
410
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
411
- #### `arrow-down-sm`
412
- <div class="flex gap-4 mt-8">
413
- <lukso-icon name="arrow-down-sm" size="small"></lukso-icon>
414
- <lukso-icon name="arrow-down-sm" size="medium"></lukso-icon>
415
- <lukso-icon name="arrow-down-sm" size="large"></lukso-icon>
416
- <lukso-icon name="arrow-down-sm" size="x-large"></lukso-icon>
417
- </div>
418
- </div>
419
-
420
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
421
- #### `arrow-left-lg`
422
- <div class="flex gap-4 mt-8">
423
- <lukso-icon name="arrow-left-lg" size="small"></lukso-icon>
424
- <lukso-icon name="arrow-left-lg" size="medium"></lukso-icon>
425
- <lukso-icon name="arrow-left-lg" size="large"></lukso-icon>
426
- <lukso-icon name="arrow-left-lg" size="x-large"></lukso-icon>
427
- </div>
428
- </div>
429
-
430
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
431
- #### `arrow-left-sm`
432
- <div class="flex gap-4 mt-8">
433
- <lukso-icon name="arrow-left-sm" size="small"></lukso-icon>
434
- <lukso-icon name="arrow-left-sm" size="medium"></lukso-icon>
435
- <lukso-icon name="arrow-left-sm" size="large"></lukso-icon>
436
- <lukso-icon name="arrow-left-sm" size="x-large"></lukso-icon>
437
- </div>
438
- </div>
439
-
440
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
441
- #### `arrow-right-lg`
442
- <div class="flex gap-4 mt-8">
443
- <lukso-icon name="arrow-right-lg" size="small"></lukso-icon>
444
- <lukso-icon name="arrow-right-lg" size="medium"></lukso-icon>
445
- <lukso-icon name="arrow-right-lg" size="large"></lukso-icon>
446
- <lukso-icon name="arrow-right-lg" size="x-large"></lukso-icon>
447
- </div>
448
- </div>
449
-
450
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
451
- #### `arrow-right-sm`
452
- <div class="flex gap-4 mt-8">
453
- <lukso-icon name="arrow-right-sm" size="small"></lukso-icon>
454
- <lukso-icon name="arrow-right-sm" size="medium"></lukso-icon>
455
- <lukso-icon name="arrow-right-sm" size="large"></lukso-icon>
456
- <lukso-icon name="arrow-right-sm" size="x-large"></lukso-icon>
457
- </div>
458
- </div>
459
-
460
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
461
- #### `arrow-up-lg`
462
- <div class="flex gap-4 mt-8">
463
- <lukso-icon name="arrow-up-lg" size="small"></lukso-icon>
464
- <lukso-icon name="arrow-up-lg" size="medium"></lukso-icon>
465
- <lukso-icon name="arrow-up-lg" size="large"></lukso-icon>
466
- <lukso-icon name="arrow-up-lg" size="x-large"></lukso-icon>
467
- </div>
468
- </div>
469
-
470
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
471
- #### `arrow-up-sm`
472
- <div class="flex gap-4 mt-8">
473
- <lukso-icon name="arrow-up-sm" size="small"></lukso-icon>
474
- <lukso-icon name="arrow-up-sm" size="medium"></lukso-icon>
475
- <lukso-icon name="arrow-up-sm" size="large"></lukso-icon>
476
- <lukso-icon name="arrow-up-sm" size="x-large"></lukso-icon>
477
- </div>
478
- </div>
479
-
480
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
481
- #### `barbell-outline`
482
- <div class="flex gap-4 mt-8">
483
- <lukso-icon name="barbell-outline" size="small"></lukso-icon>
484
- <lukso-icon name="barbell-outline" size="medium"></lukso-icon>
485
- <lukso-icon name="barbell-outline" size="large"></lukso-icon>
486
- <lukso-icon name="barbell-outline" size="x-large"></lukso-icon>
487
- </div>
488
- </div>
489
-
490
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
491
- #### `bulb-outline`
492
- <div class="flex gap-4 mt-8">
493
- <lukso-icon name="bulb-outline" size="small"></lukso-icon>
494
- <lukso-icon name="bulb-outline" size="medium"></lukso-icon>
495
- <lukso-icon name="bulb-outline" size="large"></lukso-icon>
496
- <lukso-icon name="bulb-outline" size="x-large"></lukso-icon>
497
- </div>
498
- </div>
499
-
500
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
501
- #### `camera`
502
- <div class="flex gap-4 mt-8">
503
- <lukso-icon name="camera" size="small"></lukso-icon>
504
- <lukso-icon name="camera" size="medium"></lukso-icon>
505
- <lukso-icon name="camera" size="large"></lukso-icon>
506
- <lukso-icon name="camera" size="x-large"></lukso-icon>
507
- </div>
508
- </div>
509
-
510
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
511
- #### `clipboard`
512
- <div class="flex gap-4 mt-8">
513
- <lukso-icon name="clipboard" size="small"></lukso-icon>
514
- <lukso-icon name="clipboard" size="medium"></lukso-icon>
515
- <lukso-icon name="clipboard" size="large"></lukso-icon>
516
- <lukso-icon name="clipboard" size="x-large"></lukso-icon>
517
- </div>
518
- </div>
519
-
520
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
521
- #### `clock`
522
- <div class="flex gap-4 mt-8">
523
- <lukso-icon name="clock" size="small"></lukso-icon>
524
- <lukso-icon name="clock" size="medium"></lukso-icon>
525
- <lukso-icon name="clock" size="large"></lukso-icon>
526
- <lukso-icon name="clock" size="x-large"></lukso-icon>
527
- </div>
528
- </div>
529
-
530
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
531
- #### `close-lg`
532
- <div class="flex gap-4 mt-8">
533
- <lukso-icon name="close-lg" size="small"></lukso-icon>
534
- <lukso-icon name="close-lg" size="medium"></lukso-icon>
535
- <lukso-icon name="close-lg" size="large"></lukso-icon>
536
- <lukso-icon name="close-lg" size="x-large"></lukso-icon>
537
- </div>
538
- </div>
539
-
540
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
541
- #### `close-sm`
542
- <div class="flex gap-4 mt-8">
543
- <lukso-icon name="close-sm" size="small"></lukso-icon>
544
- <lukso-icon name="close-sm" size="medium"></lukso-icon>
545
- <lukso-icon name="close-sm" size="large"></lukso-icon>
546
- <lukso-icon name="close-sm" size="x-large"></lukso-icon>
547
- </div>
548
- </div>
549
-
550
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
551
- #### `cloud`
552
- <div class="flex gap-4 mt-8">
553
- <lukso-icon name="cloud" size="small"></lukso-icon>
554
- <lukso-icon name="cloud" size="medium"></lukso-icon>
555
- <lukso-icon name="cloud" size="large"></lukso-icon>
556
- <lukso-icon name="cloud" size="x-large"></lukso-icon>
557
- </div>
558
- </div>
559
-
560
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
561
- #### `compass-outline`
562
- <div class="flex gap-4 mt-8">
563
- <lukso-icon name="compass-outline" size="small"></lukso-icon>
564
- <lukso-icon name="compass-outline" size="medium"></lukso-icon>
565
- <lukso-icon name="compass-outline" size="large"></lukso-icon>
566
- <lukso-icon name="compass-outline" size="x-large"></lukso-icon>
567
- </div>
568
- </div>
569
-
570
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
571
- #### `complete-filled`
572
- <div class="flex gap-4 mt-8">
573
- <lukso-icon
574
- name="complete-filled"
575
- size="small"
576
- secondary-color="neutral-100"
577
- ></lukso-icon>
578
- <lukso-icon
579
- name="complete-filled"
580
- size="medium"
581
- secondary-color="neutral-100"
582
- ></lukso-icon>
583
- <lukso-icon
584
- name="complete-filled"
585
- size="large"
586
- secondary-color="neutral-100"
587
- ></lukso-icon>
588
- <lukso-icon
589
- name="complete-filled"
590
- size="x-large"
591
- secondary-color="neutral-100"
592
- ></lukso-icon>
593
- </div>
594
- </div>
595
-
596
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
597
- #### `complete-outline`
598
- <div class="flex gap-4 mt-8">
599
- <lukso-icon name="complete-outline" size="small"></lukso-icon>
600
- <lukso-icon name="complete-outline" size="medium"></lukso-icon>
601
- <lukso-icon name="complete-outline" size="large"></lukso-icon>
602
- <lukso-icon name="complete-outline" size="x-large"></lukso-icon>
603
- </div>
604
- </div>
605
-
606
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
607
- #### `connect`
608
- <div class="flex gap-4 mt-8">
609
- <lukso-icon name="connect" size="small"></lukso-icon>
610
- <lukso-icon name="connect" size="medium"></lukso-icon>
611
- <lukso-icon name="connect" size="large"></lukso-icon>
612
- <lukso-icon name="connect" size="x-large"></lukso-icon>
613
- </div>
614
- </div>
615
-
616
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
617
- #### `connections`
618
- <div class="flex gap-4 mt-8">
619
- <lukso-icon name="connections" size="small"></lukso-icon>
620
- <lukso-icon name="connections" size="medium"></lukso-icon>
621
- <lukso-icon name="connections" size="large"></lukso-icon>
622
- <lukso-icon name="connections" size="x-large"></lukso-icon>
623
- </div>
624
- </div>
625
-
626
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
627
- #### `contract-lock`
628
- <div class="flex gap-4 mt-8">
629
- <lukso-icon name="contract-lock" size="small"></lukso-icon>
630
- <lukso-icon name="contract-lock" size="medium"></lukso-icon>
631
- <lukso-icon name="contract-lock" size="large"></lukso-icon>
632
- <lukso-icon name="contract-lock" size="x-large"></lukso-icon>
633
- </div>
634
- </div>
635
-
636
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
637
- #### `controller`
638
- <div class="flex gap-4 mt-8">
639
- <lukso-icon name="controller" size="small"></lukso-icon>
640
- <lukso-icon name="controller" size="medium"></lukso-icon>
641
- <lukso-icon name="controller" size="large"></lukso-icon>
642
- <lukso-icon name="controller" size="x-large"></lukso-icon>
643
- </div>
644
- </div>
645
-
646
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
647
- #### `copy`
648
- <div class="flex gap-4 mt-8">
649
- <lukso-icon name="copy" size="small"></lukso-icon>
650
- <lukso-icon name="copy" size="medium"></lukso-icon>
651
- <lukso-icon name="copy" size="large"></lukso-icon>
652
- <lukso-icon name="copy" size="x-large"></lukso-icon>
653
- </div>
654
- </div>
655
-
656
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
657
- #### `cross-outline`
658
- <div class="flex gap-4 mt-8">
659
- <lukso-icon name="cross-outline" size="small"></lukso-icon>
660
- <lukso-icon name="cross-outline" size="medium"></lukso-icon>
661
- <lukso-icon name="cross-outline" size="large"></lukso-icon>
662
- <lukso-icon name="cross-outline" size="x-large"></lukso-icon>
663
- </div>
664
- </div>
665
-
666
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
667
- #### `dots`
668
- <div class="flex gap-4 mt-8">
669
- <lukso-icon name="dots" size="small"></lukso-icon>
670
- <lukso-icon name="dots" size="medium"></lukso-icon>
671
- <lukso-icon name="dots" size="large"></lukso-icon>
672
- <lukso-icon name="dots" size="x-large"></lukso-icon>
673
- </div>
674
- </div>
675
-
676
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
677
- #### `edit`
678
- <div class="flex gap-4 mt-8">
679
- <lukso-icon name="edit" size="small"></lukso-icon>
680
- <lukso-icon name="edit" size="medium"></lukso-icon>
681
- <lukso-icon name="edit" size="large"></lukso-icon>
682
- <lukso-icon name="edit" size="x-large"></lukso-icon>
683
- </div>
684
- </div>
685
-
686
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
687
- #### `error`
688
- <div class="flex gap-4 mt-8">
689
- <lukso-icon name="error" size="small"></lukso-icon>
690
- <lukso-icon name="error" size="medium"></lukso-icon>
691
- <lukso-icon name="error" size="large"></lukso-icon>
692
- <lukso-icon name="error" size="x-large"></lukso-icon>
693
- </div>
694
- </div>
695
-
696
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
697
- #### `expand`
698
- <div class="flex gap-4 mt-8">
699
- <lukso-icon name="expand" size="small"></lukso-icon>
700
- <lukso-icon name="expand" size="medium"></lukso-icon>
701
- <lukso-icon name="expand" size="large"></lukso-icon>
702
- <lukso-icon name="expand" size="x-large"></lukso-icon>
703
- </div>
704
- </div>
705
-
706
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
707
- #### `extension`
708
- <div class="flex gap-4 mt-8">
709
- <lukso-icon name="extension" size="small"></lukso-icon>
710
- <lukso-icon name="extension" size="medium"></lukso-icon>
711
- <lukso-icon name="extension" size="large"></lukso-icon>
712
- <lukso-icon name="extension" size="x-large"></lukso-icon>
713
- </div>
714
- </div>
715
-
716
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
717
- #### `eye-hide`
718
- <div class="flex gap-4 mt-8">
719
- <lukso-icon name="eye-hide" size="small"></lukso-icon>
720
- <lukso-icon name="eye-hide" size="medium"></lukso-icon>
721
- <lukso-icon name="eye-hide" size="large"></lukso-icon>
722
- <lukso-icon name="eye-hide" size="x-large"></lukso-icon>
723
- </div>
724
- </div>
725
-
726
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
727
- #### `eye-show`
728
- <div class="flex gap-4 mt-8">
729
- <lukso-icon name="eye-show" size="small"></lukso-icon>
730
- <lukso-icon name="eye-show" size="medium"></lukso-icon>
731
- <lukso-icon name="eye-show" size="large"></lukso-icon>
732
- <lukso-icon name="eye-show" size="x-large"></lukso-icon>
733
- </div>
734
- </div>
735
-
736
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
737
- #### `filter`
738
- <div class="flex gap-4 mt-8">
739
- <lukso-icon name="filter" size="small"></lukso-icon>
740
- <lukso-icon name="filter" size="medium"></lukso-icon>
741
- <lukso-icon name="filter" size="large"></lukso-icon>
742
- <lukso-icon name="filter" size="x-large"></lukso-icon>
743
- </div>
744
- </div>
745
-
746
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
747
- #### `fish-outline`
748
- <div class="flex gap-4 mt-8">
749
- <lukso-icon name="fish-outline" size="small"></lukso-icon>
750
- <lukso-icon name="fish-outline" size="medium"></lukso-icon>
751
- <lukso-icon name="fish-outline" size="large"></lukso-icon>
752
- <lukso-icon name="fish-outline" size="x-large"></lukso-icon>
753
- </div>
754
- </div>
755
-
756
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
757
- #### `flip`
758
- <div class="flex gap-4 mt-8">
759
- <lukso-icon name="flip" size="small"></lukso-icon>
760
- <lukso-icon name="flip" size="medium"></lukso-icon>
761
- <lukso-icon name="flip" size="large"></lukso-icon>
762
- <lukso-icon name="flip" size="x-large"></lukso-icon>
763
- </div>
764
- </div>
765
-
766
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
767
- #### `globe`
768
- <div class="flex gap-4 mt-8">
769
- <lukso-icon name="globe" size="small"></lukso-icon>
770
- <lukso-icon name="globe" size="medium"></lukso-icon>
771
- <lukso-icon name="globe" size="large"></lukso-icon>
772
- <lukso-icon name="globe" size="x-large"></lukso-icon>
773
- </div>
774
- </div>
775
-
776
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
777
- #### `hamburger`
778
- <div class="flex gap-4 mt-8">
779
- <lukso-icon name="hamburger" size="small"></lukso-icon>
780
- <lukso-icon name="hamburger" size="medium"></lukso-icon>
781
- <lukso-icon name="hamburger" size="large"></lukso-icon>
782
- <lukso-icon name="hamburger" size="x-large"></lukso-icon>
783
- </div>
784
- </div>
785
-
786
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
787
- #### `infinite`
788
- <div class="flex gap-4 mt-8">
789
- <lukso-icon name="infinite" size="small"></lukso-icon>
790
- <lukso-icon name="infinite" size="medium"></lukso-icon>
791
- <lukso-icon name="infinite" size="large"></lukso-icon>
792
- <lukso-icon name="infinite" size="x-large"></lukso-icon>
793
- </div>
794
- </div>
795
-
796
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
797
- #### `information`
798
- <div class="flex gap-4 mt-8">
799
- <lukso-icon name="information" size="small"></lukso-icon>
800
- <lukso-icon name="information" size="medium"></lukso-icon>
801
- <lukso-icon name="information" size="large"></lukso-icon>
802
- <lukso-icon name="information" size="x-large"></lukso-icon>
803
- </div>
804
- </div>
805
-
806
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
807
- #### `key-outline`
808
- <div class="flex gap-4 mt-8">
809
- <lukso-icon name="key-outline" size="small"></lukso-icon>
810
- <lukso-icon name="key-outline" size="medium"></lukso-icon>
811
- <lukso-icon name="key-outline" size="large"></lukso-icon>
812
- <lukso-icon name="key-outline" size="x-large"></lukso-icon>
813
- </div>
814
- </div>
815
-
816
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
817
- #### `link`
818
- <div class="flex gap-4 mt-8">
819
- <lukso-icon name="link" size="small"></lukso-icon>
820
- <lukso-icon name="link" size="medium"></lukso-icon>
821
- <lukso-icon name="link" size="large"></lukso-icon>
822
- <lukso-icon name="link" size="x-large"></lukso-icon>
823
- </div>
824
- </div>
825
-
826
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
827
- #### `link-1`
828
- <div class="flex gap-4 mt-8">
829
- <lukso-icon name="link-1" size="small"></lukso-icon>
830
- <lukso-icon name="link-1" size="medium"></lukso-icon>
831
- <lukso-icon name="link-1" size="large"></lukso-icon>
832
- <lukso-icon name="link-1" size="x-large"></lukso-icon>
833
- </div>
834
- </div>
835
-
836
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
837
- #### `link-2`
838
- <div class="flex gap-4 mt-8">
839
- <lukso-icon
840
- name="link-2"
841
- size="small"
842
- secondary-color="neutral-100"
843
- ></lukso-icon>
844
- <lukso-icon
845
- name="link-2"
846
- size="medium"
847
- secondary-color="neutral-100"
848
- ></lukso-icon>
849
- <lukso-icon
850
- name="link-2"
851
- size="large"
852
- secondary-color="neutral-100"
853
- ></lukso-icon>
854
- <lukso-icon
855
- name="link-2"
856
- size="x-large"
857
- secondary-color="neutral-100"
858
- ></lukso-icon>
859
- </div>
860
- </div>
861
-
862
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
863
- #### `link-3`
864
- <div class="flex gap-4 mt-8">
865
- <lukso-icon name="link-3" size="small"></lukso-icon>
866
- <lukso-icon name="link-3" size="medium"></lukso-icon>
867
- <lukso-icon name="link-3" size="large"></lukso-icon>
868
- <lukso-icon name="link-3" size="x-large"></lukso-icon>
869
- </div>
870
- </div>
871
-
872
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
873
- #### `link-4`
874
- <div class="flex gap-4 mt-8">
875
- <lukso-icon
876
- name="link-4"
877
- size="small"
878
- secondary-color="neutral-100"
879
- ></lukso-icon>
880
- <lukso-icon
881
- name="link-4"
882
- size="medium"
883
- secondary-color="neutral-100"
884
- ></lukso-icon>
885
- <lukso-icon
886
- name="link-4"
887
- size="large"
888
- secondary-color="neutral-100"
889
- ></lukso-icon>
890
- <lukso-icon
891
- name="link-4"
892
- size="x-large"
893
- secondary-color="neutral-100"
894
- ></lukso-icon>
895
- </div>
896
- </div>
897
-
898
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
899
- #### `loading`
900
- <div class="flex gap-4 mt-8">
901
- <lukso-icon name="loading" size="small"></lukso-icon>
902
- <lukso-icon name="loading" size="medium"></lukso-icon>
903
- <lukso-icon name="loading" size="large"></lukso-icon>
904
- <lukso-icon name="loading" size="x-large"></lukso-icon>
905
- </div>
906
- </div>
907
-
908
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
909
- #### `location`
910
- <div class="flex gap-4 mt-8">
911
- <lukso-icon name="location" size="small"></lukso-icon>
912
- <lukso-icon name="location" size="medium"></lukso-icon>
913
- <lukso-icon name="location" size="large"></lukso-icon>
914
- <lukso-icon name="location" size="x-large"></lukso-icon>
915
- </div>
916
- </div>
917
-
918
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
919
- #### `locked`
920
- <div class="flex gap-4 mt-8">
921
- <lukso-icon name="locked" size="small"></lukso-icon>
922
- <lukso-icon name="locked" size="medium"></lukso-icon>
923
- <lukso-icon name="locked" size="large"></lukso-icon>
924
- <lukso-icon name="locked" size="x-large"></lukso-icon>
925
- </div>
926
- </div>
927
-
928
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
929
- #### `login`
930
- <div class="flex gap-4 mt-8">
931
- <lukso-icon name="login" size="small"></lukso-icon>
932
- <lukso-icon name="login" size="medium"></lukso-icon>
933
- <lukso-icon name="login" size="large"></lukso-icon>
934
- <lukso-icon name="login" size="x-large"></lukso-icon>
935
- </div>
936
- </div>
937
-
938
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
939
- #### `login-2`
940
- <div class="flex gap-4 mt-8">
941
- <lukso-icon name="login-2" size="small"></lukso-icon>
942
- <lukso-icon name="login-2" size="medium"></lukso-icon>
943
- <lukso-icon name="login-2" size="large"></lukso-icon>
944
- <lukso-icon name="login-2" size="x-large"></lukso-icon>
945
- </div>
946
- </div>
947
-
948
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
949
- #### `login-3`
950
- <div class="flex gap-4 mt-8">
951
- <lukso-icon name="login-3" size="small"></lukso-icon>
952
- <lukso-icon name="login-3" size="medium"></lukso-icon>
953
- <lukso-icon name="login-3" size="large"></lukso-icon>
954
- <lukso-icon name="login-3" size="x-large"></lukso-icon>
955
- </div>
956
- </div>
957
-
958
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
959
- #### `logo-chrome`
960
- <div class="flex gap-4 mt-8">
961
- <lukso-icon name="logo-chrome" size="small"></lukso-icon>
962
- <lukso-icon name="logo-chrome" size="medium"></lukso-icon>
963
- <lukso-icon name="logo-chrome" size="large"></lukso-icon>
964
- <lukso-icon name="logo-chrome" size="x-large"></lukso-icon>
965
- </div>
966
- </div>
967
-
968
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
969
- #### `mail`
970
- <div class="flex gap-4 mt-8">
971
- <lukso-icon name="mail" size="small"></lukso-icon>
972
- <lukso-icon name="mail" size="medium"></lukso-icon>
973
- <lukso-icon name="mail" size="large"></lukso-icon>
974
- <lukso-icon name="mail" size="x-large"></lukso-icon>
975
- </div>
976
- </div>
977
-
978
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
979
- #### `menu-1`
980
- <div class="flex gap-4 mt-8">
981
- <lukso-icon name="menu-1" size="small"></lukso-icon>
982
- <lukso-icon name="menu-1" size="medium"></lukso-icon>
983
- <lukso-icon name="menu-1" size="large"></lukso-icon>
984
- <lukso-icon name="menu-1" size="x-large"></lukso-icon>
985
- </div>
986
- </div>
987
-
988
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
989
- #### `menu-2`
990
- <div class="flex gap-4 mt-8">
991
- <lukso-icon name="menu-2" size="small"></lukso-icon>
992
- <lukso-icon name="menu-2" size="medium"></lukso-icon>
993
- <lukso-icon name="menu-2" size="large"></lukso-icon>
994
- <lukso-icon name="menu-2" size="x-large"></lukso-icon>
995
- </div>
996
- </div>
997
-
998
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
999
- #### `migrate`
1000
- <div class="flex gap-4 mt-8">
1001
- <lukso-icon name="migrate" size="small"></lukso-icon>
1002
- <lukso-icon name="migrate" size="medium"></lukso-icon>
1003
- <lukso-icon name="migrate" size="large"></lukso-icon>
1004
- <lukso-icon name="migrate" size="x-large"></lukso-icon>
1005
- </div>
1006
- </div>
1007
-
1008
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1009
- #### `minimize`
1010
- <div class="flex gap-4 mt-8">
1011
- <lukso-icon name="minimize" size="small"></lukso-icon>
1012
- <lukso-icon name="minimize" size="medium"></lukso-icon>
1013
- <lukso-icon name="minimize" size="large"></lukso-icon>
1014
- <lukso-icon name="minimize" size="x-large"></lukso-icon>
1015
- </div>
1016
- </div>
1017
-
1018
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1019
- #### `network`
1020
- <div class="flex gap-4 mt-8">
1021
- <lukso-icon name="network" size="small"></lukso-icon>
1022
- <lukso-icon name="network" size="medium"></lukso-icon>
1023
- <lukso-icon name="network" size="large"></lukso-icon>
1024
- <lukso-icon name="network" size="x-large"></lukso-icon>
1025
- </div>
1026
- </div>
1027
-
1028
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1029
- #### `notifications`
1030
- <div class="flex gap-4 mt-8">
1031
- <lukso-icon name="notifications" size="small"></lukso-icon>
1032
- <lukso-icon name="notifications" size="medium"></lukso-icon>
1033
- <lukso-icon name="notifications" size="large"></lukso-icon>
1034
- <lukso-icon name="notifications" size="x-large"></lukso-icon>
1035
- </div>
1036
- </div>
1037
-
1038
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1039
- #### `phone-portrait-outline`
1040
- <div class="flex gap-4 mt-8">
1041
- <lukso-icon name="phone-portrait-outline" size="small"></lukso-icon>
1042
- <lukso-icon name="phone-portrait-outline" size="medium"></lukso-icon>
1043
- <lukso-icon name="phone-portrait-outline" size="large"></lukso-icon>
1044
- <lukso-icon name="phone-portrait-outline" size="x-large"></lukso-icon>
1045
- </div>
1046
- </div>
1047
-
1048
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1049
- #### `pin`
1050
- <div class="flex gap-4 mt-8">
1051
- <lukso-icon name="pin" size="small"></lukso-icon>
1052
- <lukso-icon name="pin" size="medium"></lukso-icon>
1053
- <lukso-icon name="pin" size="large"></lukso-icon>
1054
- <lukso-icon name="pin" size="x-large"></lukso-icon>
1055
- </div>
1056
- </div>
1057
-
1058
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1059
- #### `play-filled`
1060
- <div class="flex gap-4 mt-8">
1061
- <lukso-icon name="play-filled" size="small"></lukso-icon>
1062
- <lukso-icon name="play-filled" size="medium"></lukso-icon>
1063
- <lukso-icon name="play-filled" size="large"></lukso-icon>
1064
- <lukso-icon name="play-filled" size="x-large"></lukso-icon>
1065
- </div>
1066
- </div>
1067
-
1068
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1069
- #### `play-outline`
1070
- <div class="flex gap-4 mt-8">
1071
- <lukso-icon name="play-outline" size="small"></lukso-icon>
1072
- <lukso-icon name="play-outline" size="medium"></lukso-icon>
1073
- <lukso-icon name="play-outline" size="large"></lukso-icon>
1074
- <lukso-icon name="play-outline" size="x-large"></lukso-icon>
1075
- </div>
1076
- </div>
1077
-
1078
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1079
- #### `plus`
1080
- <div class="flex gap-4 mt-8">
1081
- <lukso-icon name="plus" size="small"></lukso-icon>
1082
- <lukso-icon name="plus" size="medium"></lukso-icon>
1083
- <lukso-icon name="plus" size="large"></lukso-icon>
1084
- <lukso-icon name="plus" size="x-large"></lukso-icon>
1085
- </div>
1086
- </div>
1087
-
1088
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1089
- #### `profile-add`
1090
- <div class="flex gap-4 mt-8">
1091
- <lukso-icon name="profile-add" size="small"></lukso-icon>
1092
- <lukso-icon name="profile-add" size="medium"></lukso-icon>
1093
- <lukso-icon name="profile-add" size="large"></lukso-icon>
1094
- <lukso-icon name="profile-add" size="x-large"></lukso-icon>
1095
- </div>
1096
- </div>
1097
-
1098
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1099
- #### `profile-export`
1100
- <div class="flex gap-4 mt-8">
1101
- <lukso-icon name="profile-export" size="small"></lukso-icon>
1102
- <lukso-icon name="profile-export" size="medium"></lukso-icon>
1103
- <lukso-icon name="profile-export" size="large"></lukso-icon>
1104
- <lukso-icon name="profile-export" size="x-large"></lukso-icon>
1105
- </div>
1106
- </div>
1107
-
1108
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1109
- #### `profile-import`
1110
- <div class="flex gap-4 mt-8">
1111
- <lukso-icon name="profile-import" size="small"></lukso-icon>
1112
- <lukso-icon name="profile-import" size="medium"></lukso-icon>
1113
- <lukso-icon name="profile-import" size="large"></lukso-icon>
1114
- <lukso-icon name="profile-import" size="x-large"></lukso-icon>
1115
- </div>
1116
- </div>
1117
-
1118
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1119
- #### `profile-recovery`
1120
- <div class="flex gap-4 mt-8">
1121
- <lukso-icon name="profile-recovery" size="small"></lukso-icon>
1122
- <lukso-icon name="profile-recovery" size="medium"></lukso-icon>
1123
- <lukso-icon name="profile-recovery" size="large"></lukso-icon>
1124
- <lukso-icon name="profile-recovery" size="x-large"></lukso-icon>
1125
- </div>
1126
- </div>
1127
-
1128
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1129
- #### `profile-recovery-2`
1130
- <div class="flex gap-4 mt-8">
1131
- <lukso-icon
1132
- name="profile-recovery-2"
1133
- size="small"
1134
- secondary-color="neutral-100"
1135
- ></lukso-icon>
1136
- <lukso-icon
1137
- name="profile-recovery-2"
1138
- size="medium"
1139
- secondary-color="neutral-100"
1140
- ></lukso-icon>
1141
- <lukso-icon
1142
- name="profile-recovery-2"
1143
- size="large"
1144
- secondary-color="neutral-100"
1145
- ></lukso-icon>
1146
- <lukso-icon
1147
- name="profile-recovery-2"
1148
- size="x-large"
1149
- secondary-color="neutral-100"
1150
- ></lukso-icon>
1151
- </div>
1152
- </div>
1153
-
1154
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1155
- #### `profile-restore`
1156
- <div class="flex gap-4 mt-8">
1157
- <lukso-icon name="profile-restore" size="small"></lukso-icon>
1158
- <lukso-icon name="profile-restore" size="medium"></lukso-icon>
1159
- <lukso-icon name="profile-restore" size="large"></lukso-icon>
1160
- <lukso-icon name="profile-restore" size="x-large"></lukso-icon>
1161
- </div>
1162
- </div>
1163
-
1164
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1165
- #### `profile`
1166
- <div class="flex gap-4 mt-8">
1167
- <lukso-icon name="profile" size="small"></lukso-icon>
1168
- <lukso-icon name="profile" size="medium"></lukso-icon>
1169
- <lukso-icon name="profile" size="large"></lukso-icon>
1170
- <lukso-icon name="profile" size="x-large"></lukso-icon>
1171
- </div>
1172
- </div>
1173
-
1174
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1175
- #### `qr-code`
1176
- <div class="flex gap-4 mt-8">
1177
- <lukso-icon
1178
- name="qr-code"
1179
- size="small"
1180
- secondary-color="neutral-100"
1181
- ></lukso-icon>
1182
- <lukso-icon
1183
- name="qr-code"
1184
- size="medium"
1185
- secondary-color="neutral-100"
1186
- ></lukso-icon>
1187
- <lukso-icon
1188
- name="qr-code"
1189
- size="large"
1190
- secondary-color="neutral-100"
1191
- ></lukso-icon>
1192
- <lukso-icon
1193
- name="qr-code"
1194
- size="x-large"
1195
- secondary-color="neutral-100"
1196
- ></lukso-icon>
1197
- </div>
1198
- </div>
1199
-
1200
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1201
- #### `relayer`
1202
- <div class="flex gap-4 mt-8">
1203
- <lukso-icon name="relayer" size="small"></lukso-icon>
1204
- <lukso-icon name="relayer" size="medium"></lukso-icon>
1205
- <lukso-icon name="relayer" size="large"></lukso-icon>
1206
- <lukso-icon name="relayer" size="x-large"></lukso-icon>
1207
- </div>
1208
- </div>
1209
-
1210
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1211
- #### `reload`
1212
- <div class="flex gap-4 mt-8">
1213
- <lukso-icon name="reload" size="small"></lukso-icon>
1214
- <lukso-icon name="reload" size="medium"></lukso-icon>
1215
- <lukso-icon name="reload" size="large"></lukso-icon>
1216
- <lukso-icon name="reload" size="x-large"></lukso-icon>
1217
- </div>
1218
- </div>
1219
-
1220
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1221
- #### `return-down`
1222
- <div class="flex gap-4 mt-8">
1223
- <lukso-icon name="return-down" size="small"></lukso-icon>
1224
- <lukso-icon name="return-down" size="medium"></lukso-icon>
1225
- <lukso-icon name="return-down" size="large"></lukso-icon>
1226
- <lukso-icon name="return-down" size="x-large"></lukso-icon>
1227
- </div>
1228
- </div>
1229
-
1230
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1231
- #### `return-left`
1232
- <div class="flex gap-4 mt-8">
1233
- <lukso-icon name="return-left" size="small"></lukso-icon>
1234
- <lukso-icon name="return-left" size="medium"></lukso-icon>
1235
- <lukso-icon name="return-left" size="large"></lukso-icon>
1236
- <lukso-icon name="return-left" size="x-large"></lukso-icon>
1237
- </div>
1238
- </div>
1239
-
1240
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1241
- #### `return-right`
1242
- <div class="flex gap-4 mt-8">
1243
- <lukso-icon name="return-right" size="small"></lukso-icon>
1244
- <lukso-icon name="return-right" size="medium"></lukso-icon>
1245
- <lukso-icon name="return-right" size="large"></lukso-icon>
1246
- <lukso-icon name="return-right" size="x-large"></lukso-icon>
1247
- </div>
1248
- </div>
1249
-
1250
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1251
- #### `return-up`
1252
- <div class="flex gap-4 mt-8">
1253
- <lukso-icon name="return-up" size="small"></lukso-icon>
1254
- <lukso-icon name="return-up" size="medium"></lukso-icon>
1255
- <lukso-icon name="return-up" size="large"></lukso-icon>
1256
- <lukso-icon name="return-up" size="x-large"></lukso-icon>
1257
- </div>
1258
- </div>
1259
-
1260
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1261
- #### `search`
1262
- <div class="flex gap-4 mt-8">
1263
- <lukso-icon name="search" size="small"></lukso-icon>
1264
- <lukso-icon name="search" size="medium"></lukso-icon>
1265
- <lukso-icon name="search" size="large"></lukso-icon>
1266
- <lukso-icon name="search" size="x-large"></lukso-icon>
1267
- </div>
1268
- </div>
1269
-
1270
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1271
- #### `settings`
1272
- <div class="flex gap-4 mt-8">
1273
- <lukso-icon name="settings" size="small"></lukso-icon>
1274
- <lukso-icon name="settings" size="medium"></lukso-icon>
1275
- <lukso-icon name="settings" size="large"></lukso-icon>
1276
- <lukso-icon name="settings" size="x-large"></lukso-icon>
1277
- </div>
1278
- </div>
1279
-
1280
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1281
- #### `smart-contract-doc`
1282
- <div class="flex gap-4 mt-8">
1283
- <lukso-icon name="smart-contract-doc" size="small"></lukso-icon>
1284
- <lukso-icon name="smart-contract-doc" size="medium"></lukso-icon>
1285
- <lukso-icon name="smart-contract-doc" size="large"></lukso-icon>
1286
- <lukso-icon name="smart-contract-doc" size="x-large"></lukso-icon>
1287
- </div>
1288
- </div>
1289
-
1290
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1291
- #### `smart-contract`
1292
- <div class="flex gap-4 mt-8">
1293
- <lukso-icon name="smart-contract" size="small"></lukso-icon>
1294
- <lukso-icon name="smart-contract" size="medium"></lukso-icon>
1295
- <lukso-icon name="smart-contract" size="large"></lukso-icon>
1296
- <lukso-icon name="smart-contract" size="x-large"></lukso-icon>
1297
- </div>
1298
- </div>
1299
-
1300
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1301
- #### `star-filled`
1302
- <div class="flex gap-4 mt-8">
1303
- <lukso-icon name="star-filled" size="small"></lukso-icon>
1304
- <lukso-icon name="star-filled" size="medium"></lukso-icon>
1305
- <lukso-icon name="star-filled" size="large"></lukso-icon>
1306
- <lukso-icon name="star-filled" size="x-large"></lukso-icon>
1307
- </div>
1308
- </div>
1309
-
1310
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1311
- #### `star-outline`
1312
- <div class="flex gap-4 mt-8">
1313
- <lukso-icon name="star-outline" size="small"></lukso-icon>
1314
- <lukso-icon name="star-outline" size="medium"></lukso-icon>
1315
- <lukso-icon name="star-outline" size="large"></lukso-icon>
1316
- <lukso-icon name="star-outline" size="x-large"></lukso-icon>
1317
- </div>
1318
- </div>
1319
-
1320
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1321
- #### `step-dot`
1322
- <div class="flex gap-4 mt-8">
1323
- <lukso-icon
1324
- name="step-dot"
1325
- size="small"
1326
- secondary-color="neutral-100"
1327
- ></lukso-icon>
1328
- <lukso-icon
1329
- name="step-dot"
1330
- size="medium"
1331
- secondary-color="neutral-100"
1332
- ></lukso-icon>
1333
- <lukso-icon
1334
- name="step-dot"
1335
- size="large"
1336
- secondary-color="neutral-100"
1337
- ></lukso-icon>
1338
- <lukso-icon
1339
- name="step-dot"
1340
- size="x-large"
1341
- secondary-color="neutral-100"
1342
- ></lukso-icon>
1343
- </div>
1344
- </div>
1345
-
1346
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1347
- #### `step-progress`
1348
- <div class="flex gap-4 mt-8">
1349
- <lukso-icon
1350
- name="step-progress"
1351
- size="small"
1352
- secondary-color="neutral-100"
1353
- ></lukso-icon>
1354
- <lukso-icon
1355
- name="step-progress"
1356
- size="medium"
1357
- secondary-color="neutral-100"
1358
- ></lukso-icon>
1359
- <lukso-icon
1360
- name="step-progress"
1361
- size="large"
1362
- secondary-color="neutral-100"
1363
- ></lukso-icon>
1364
- <lukso-icon
1365
- name="step-progress"
1366
- size="x-large"
1367
- secondary-color="neutral-100"
1368
- ></lukso-icon>
1369
- </div>
1370
- </div>
1371
-
1372
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1373
- #### `steps`
1374
- <div class="flex gap-4 mt-8">
1375
- <lukso-icon name="steps" size="small"></lukso-icon>
1376
- <lukso-icon name="steps" size="medium"></lukso-icon>
1377
- <lukso-icon name="steps" size="large"></lukso-icon>
1378
- <lukso-icon name="steps" size="x-large"></lukso-icon>
1379
- </div>
1380
- </div>
1381
-
1382
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1383
- #### `tick`
1384
- <div class="flex gap-4 mt-8">
1385
- <lukso-icon name="tick" size="small"></lukso-icon>
1386
- <lukso-icon name="tick" size="medium"></lukso-icon>
1387
- <lukso-icon name="tick" size="large"></lukso-icon>
1388
- <lukso-icon name="tick" size="x-large"></lukso-icon>
1389
- </div>
1390
- </div>
1391
-
1392
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1393
- #### `timer-outline`
1394
- <div class="flex gap-4 mt-8">
1395
- <lukso-icon name="timer-outline" size="small"></lukso-icon>
1396
- <lukso-icon name="timer-outline" size="medium"></lukso-icon>
1397
- <lukso-icon name="timer-outline" size="large"></lukso-icon>
1398
- <lukso-icon name="timer-outline" size="x-large"></lukso-icon>
1399
- </div>
1400
- </div>
1401
-
1402
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1403
- #### `transaction-receive`
1404
- <div class="flex gap-4 mt-8">
1405
- <lukso-icon name="transaction-receive" size="small"></lukso-icon>
1406
- <lukso-icon name="transaction-receive" size="medium"></lukso-icon>
1407
- <lukso-icon name="transaction-receive" size="large"></lukso-icon>
1408
- <lukso-icon name="transaction-receive" size="x-large"></lukso-icon>
1409
- </div>
1410
- </div>
1411
-
1412
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1413
- #### `transaction-send`
1414
- <div class="flex gap-4 mt-8">
1415
- <lukso-icon name="transaction-send" size="small"></lukso-icon>
1416
- <lukso-icon name="transaction-send" size="medium"></lukso-icon>
1417
- <lukso-icon name="transaction-send" size="large"></lukso-icon>
1418
- <lukso-icon name="transaction-send" size="x-large"></lukso-icon>
1419
- </div>
1420
- </div>
1421
-
1422
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1423
- #### `transfer`
1424
- <div class="flex gap-4 mt-8">
1425
- <lukso-icon name="transfer" size="small"></lukso-icon>
1426
- <lukso-icon name="transfer" size="medium"></lukso-icon>
1427
- <lukso-icon name="transfer" size="large"></lukso-icon>
1428
- <lukso-icon name="transfer" size="x-large"></lukso-icon>
1429
- </div>
1430
- </div>
1431
-
1432
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1433
- #### `trash`
1434
- <div class="flex gap-4 mt-8">
1435
- <lukso-icon name="trash" size="small"></lukso-icon>
1436
- <lukso-icon name="trash" size="medium"></lukso-icon>
1437
- <lukso-icon name="trash" size="large"></lukso-icon>
1438
- <lukso-icon name="trash" size="x-large"></lukso-icon>
1439
- </div>
1440
- </div>
1441
-
1442
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1443
- #### `turn-down`
1444
- <div class="flex gap-4 mt-8">
1445
- <lukso-icon name="turn-down" size="small"></lukso-icon>
1446
- <lukso-icon name="turn-down" size="medium"></lukso-icon>
1447
- <lukso-icon name="turn-down" size="large"></lukso-icon>
1448
- <lukso-icon name="turn-down" size="x-large"></lukso-icon>
1449
- </div>
1450
- </div>
1451
-
1452
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1453
- #### `turn-left`
1454
- <div class="flex gap-4 mt-8">
1455
- <lukso-icon name="turn-left" size="small"></lukso-icon>
1456
- <lukso-icon name="turn-left" size="medium"></lukso-icon>
1457
- <lukso-icon name="turn-left" size="large"></lukso-icon>
1458
- <lukso-icon name="turn-left" size="x-large"></lukso-icon>
1459
- </div>
1460
- </div>
1461
-
1462
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1463
- #### `turn-right`
1464
- <div class="flex gap-4 mt-8">
1465
- <lukso-icon name="turn-right" size="small"></lukso-icon>
1466
- <lukso-icon name="turn-right" size="medium"></lukso-icon>
1467
- <lukso-icon name="turn-right" size="large"></lukso-icon>
1468
- <lukso-icon name="turn-right" size="x-large"></lukso-icon>
1469
- </div>
1470
- </div>
1471
-
1472
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1473
- #### `turn-up`
1474
- <div class="flex gap-4 mt-8">
1475
- <lukso-icon name="turn-up" size="small"></lukso-icon>
1476
- <lukso-icon name="turn-up" size="medium"></lukso-icon>
1477
- <lukso-icon name="turn-up" size="large"></lukso-icon>
1478
- <lukso-icon name="turn-up" size="x-large"></lukso-icon>
1479
- </div>
1480
- </div>
1481
-
1482
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1483
- #### `unlocked`
1484
- <div class="flex gap-4 mt-8">
1485
- <lukso-icon name="unlocked" size="small"></lukso-icon>
1486
- <lukso-icon name="unlocked" size="medium"></lukso-icon>
1487
- <lukso-icon name="unlocked" size="large"></lukso-icon>
1488
- <lukso-icon name="unlocked" size="x-large"></lukso-icon>
1489
- </div>
1490
- </div>
1491
-
1492
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1493
- #### `wallet-outline`
1494
- <div class="flex gap-4 mt-8">
1495
- <lukso-icon name="wallet-outline" size="small"></lukso-icon>
1496
- <lukso-icon name="wallet-outline" size="medium"></lukso-icon>
1497
- <lukso-icon name="wallet-outline" size="large"></lukso-icon>
1498
- <lukso-icon name="wallet-outline" size="x-large"></lukso-icon>
1499
- </div>
1500
- </div>
1501
-
1502
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1503
- #### `warning-round`
1504
- <div class="flex gap-4 mt-8">
1505
- <lukso-icon name="warning-round" size="small"></lukso-icon>
1506
- <lukso-icon name="warning-round" size="medium"></lukso-icon>
1507
- <lukso-icon name="warning-round" size="large"></lukso-icon>
1508
- <lukso-icon name="warning-round" size="x-large"></lukso-icon>
1509
- </div>
1510
- </div>
1511
-
1512
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1513
- #### `warning-triangle`
1514
- <div class="flex gap-4 mt-8">
1515
- <lukso-icon name="warning-triangle" size="small"></lukso-icon>
1516
- <lukso-icon name="warning-triangle" size="medium"></lukso-icon>
1517
- <lukso-icon name="warning-triangle" size="large"></lukso-icon>
1518
- <lukso-icon name="warning-triangle" size="x-large"></lukso-icon>
1519
- </div>
1520
- </div>
1521
-
1522
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1523
- #### `google-color`
1524
- <div class="flex gap-4 mt-8">
1525
- <lukso-icon name="google-color" size="small"></lukso-icon>
1526
- <lukso-icon name="google-color" size="medium"></lukso-icon>
1527
- <lukso-icon name="google-color" size="large"></lukso-icon>
1528
- <lukso-icon name="google-color" size="x-large"></lukso-icon>
1529
- </div>
1530
- </div>
1531
-
1532
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1533
- #### `lyx-logo`
1534
- <div class="flex gap-4 mt-8">
1535
- <lukso-icon name="lyx-logo" size="small"></lukso-icon>
1536
- <lukso-icon name="lyx-logo" size="medium"></lukso-icon>
1537
- <lukso-icon name="lyx-logo" size="large"></lukso-icon>
1538
- <lukso-icon name="lyx-logo" size="x-large"></lukso-icon>
1539
- </div>
1540
- </div>
1541
-
1542
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1543
- #### `eth-logo`
1544
- <div class="flex gap-4 mt-8">
1545
- <lukso-icon name="eth-logo" size="small"></lukso-icon>
1546
- <lukso-icon name="eth-logo" size="medium"></lukso-icon>
1547
- <lukso-icon name="eth-logo" size="large"></lukso-icon>
1548
- <lukso-icon name="eth-logo" size="x-large"></lukso-icon>
1549
- </div>
1550
- </div>
1551
-
1552
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1553
- #### `progress-indicator`
1554
- <div class="flex gap-4 mt-8">
1555
- <lukso-icon name="progress-indicator" size="small"></lukso-icon>
1556
- <lukso-icon name="progress-indicator" size="medium"></lukso-icon>
1557
- <lukso-icon name="progress-indicator" size="large"></lukso-icon>
1558
- <lukso-icon name="progress-indicator" size="x-large"></lukso-icon>
1559
- </div>
1560
- </div>
1561
-
1562
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1563
- #### `progress-complete`
1564
- <div class="flex gap-4 mt-8">
1565
- <lukso-icon name="progress-complete" size="small"></lukso-icon>
1566
- <lukso-icon name="progress-complete" size="medium"></lukso-icon>
1567
- <lukso-icon name="progress-complete" size="large"></lukso-icon>
1568
- <lukso-icon name="progress-complete" size="x-large"></lukso-icon>
1569
- </div>
1570
- </div>
1571
-
1572
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1573
- #### `pulse-dot`
1574
- <div class="flex gap-4 mt-8">
1575
- <lukso-icon name="pulse-dot" size="small"></lukso-icon>
1576
- <lukso-icon name="pulse-dot" size="medium"></lukso-icon>
1577
- <lukso-icon name="pulse-dot" size="large"></lukso-icon>
1578
- <lukso-icon name="pulse-dot" size="x-large"></lukso-icon>
1579
- </div>
1580
- </div>
1581
-
1582
- <div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
1583
- #### `complete-filled-fade-in`
1584
- <div class="flex gap-4 mt-8">
1585
- <lukso-icon name="complete-filled-fade-in" size="small"></lukso-icon>
1586
- <lukso-icon name="complete-filled-fade-in" size="medium"></lukso-icon>
1587
- <lukso-icon name="complete-filled-fade-in" size="large"></lukso-icon>
1588
- <lukso-icon name="complete-filled-fade-in" size="x-large"></lukso-icon>
1589
- </div>
1590
- </div>