@getmicdrop/svelte-components 5.5.0 → 5.5.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 (214) hide show
  1. package/dist/calendar/AboutShow/AboutShow.svelte +172 -172
  2. package/dist/calendar/Calendar/MiniMonthCalendar.svelte +782 -782
  3. package/dist/calendar/FAQs/FAQs.svelte +75 -75
  4. package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte +126 -126
  5. package/dist/calendar/OrderSummary/OrderSummary.svelte +367 -367
  6. package/dist/calendar/PublicCard/PublicCard.svelte +134 -134
  7. package/dist/calendar/ShowCard/ShowCard.svelte +157 -157
  8. package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte +61 -61
  9. package/dist/components/Layout/Grid.svelte +4 -4
  10. package/dist/components/Layout/Section.svelte +80 -80
  11. package/dist/components/Layout/Sidebar.svelte +108 -108
  12. package/dist/components/Layout/Stack.svelte +6 -6
  13. package/dist/constants/validation.js +91 -91
  14. package/dist/constants/validation.spec.js +64 -64
  15. package/dist/index.d.ts +1 -1
  16. package/dist/index.js +226 -226
  17. package/dist/patterns/data/DataGrid.svelte +45 -45
  18. package/dist/patterns/data/DataList.svelte +24 -24
  19. package/dist/patterns/data/DataTable.svelte +36 -36
  20. package/dist/patterns/forms/FormActions.spec.js +88 -88
  21. package/dist/patterns/forms/FormActions.stories.svelte +97 -97
  22. package/dist/patterns/forms/FormActions.svelte +46 -46
  23. package/dist/patterns/forms/FormGrid.svelte +33 -33
  24. package/dist/patterns/forms/FormSection.svelte +32 -32
  25. package/dist/patterns/forms/FormValidationSummary.stories.svelte +83 -83
  26. package/dist/patterns/forms/FormValidationSummary.svelte +33 -33
  27. package/dist/patterns/layout/Sidebar.svelte +39 -39
  28. package/dist/patterns/navigation/BottomNav.stories.svelte +117 -117
  29. package/dist/patterns/navigation/BottomNav.svelte +20 -20
  30. package/dist/patterns/navigation/Header.stories.svelte +77 -77
  31. package/dist/patterns/navigation/Header.svelte +193 -193
  32. package/dist/patterns/page/PageHeader.svelte +18 -18
  33. package/dist/patterns/page/PageLayout.svelte +40 -40
  34. package/dist/patterns/page/PageLoader.spec.js +54 -54
  35. package/dist/patterns/page/PageLoader.stories.svelte +137 -137
  36. package/dist/patterns/page/PageLoader.svelte +24 -24
  37. package/dist/patterns/page/SectionHeader.svelte +29 -29
  38. package/dist/presets/badges.js +112 -112
  39. package/dist/presets/buttons.js +76 -76
  40. package/dist/presets/index.js +9 -9
  41. package/dist/primitives/Accordion/Accordion.stories.svelte +75 -75
  42. package/dist/primitives/Accordion/Accordion.svelte +42 -42
  43. package/dist/primitives/Accordion/AccordionItem.svelte +95 -95
  44. package/dist/primitives/Alert/Alert.spec.js +170 -170
  45. package/dist/primitives/Alert/Alert.stories.svelte +88 -88
  46. package/dist/primitives/Alert/Alert.svelte +27 -27
  47. package/dist/primitives/Avatar/Avatar.stories.svelte +94 -94
  48. package/dist/primitives/Avatar/Avatar.svelte +66 -66
  49. package/dist/primitives/Badges/Badge.spec.js +103 -103
  50. package/dist/primitives/Badges/Badge.stories.svelte +86 -86
  51. package/dist/primitives/Badges/Badge.svelte +79 -79
  52. package/dist/primitives/BottomSheet/BottomSheet.spec.js +127 -127
  53. package/dist/primitives/BottomSheet/BottomSheet.stories.svelte +83 -83
  54. package/dist/primitives/BottomSheet/BottomSheet.svelte +100 -100
  55. package/dist/primitives/Breadcrumb/Breadcrumb.spec.js +120 -120
  56. package/dist/primitives/Breadcrumb/Breadcrumb.stories.svelte +23 -23
  57. package/dist/primitives/Breadcrumb/Breadcrumb.svelte +89 -89
  58. package/dist/primitives/Button/Button.spec.js +211 -211
  59. package/dist/primitives/Button/Button.stories.svelte +76 -76
  60. package/dist/primitives/Button/Button.svelte +270 -270
  61. package/dist/primitives/Button/ButtonSaveDemo.spec.js +48 -48
  62. package/dist/primitives/Button/ButtonSaveDemo.svelte +25 -25
  63. package/dist/primitives/Button/ButtonVariantShowcase.svelte +129 -129
  64. package/dist/primitives/Card.spec.js +49 -49
  65. package/dist/primitives/Card.stories.svelte +22 -22
  66. package/dist/primitives/Card.svelte +28 -28
  67. package/dist/primitives/Checkbox/Checkbox.stories.svelte +84 -84
  68. package/dist/primitives/Checkbox/Checkbox.svelte +88 -88
  69. package/dist/primitives/DarkModeToggle.spec.js +357 -357
  70. package/dist/primitives/DarkModeToggle.stories.svelte +57 -57
  71. package/dist/primitives/DarkModeToggle.svelte +136 -136
  72. package/dist/primitives/Drawer/Drawer.stories.svelte +80 -80
  73. package/dist/primitives/Drawer/Drawer.svelte +120 -120
  74. package/dist/primitives/Dropdown/Dropdown.stories.svelte +137 -137
  75. package/dist/primitives/Dropdown/Dropdown.svelte +14 -14
  76. package/dist/primitives/Dropdown/DropdownItem.svelte +80 -80
  77. package/dist/primitives/Icons/ArrowLeft.svelte +8 -8
  78. package/dist/primitives/Icons/ArrowRight.svelte +8 -8
  79. package/dist/primitives/Icons/Availability.svelte +14 -14
  80. package/dist/primitives/Icons/Back.svelte +14 -14
  81. package/dist/primitives/Icons/CheckCircle.svelte +6 -6
  82. package/dist/primitives/Icons/CheckCircleOutline.svelte +15 -15
  83. package/dist/primitives/Icons/ChevronLeft.svelte +4 -4
  84. package/dist/primitives/Icons/ChevronRight.svelte +4 -4
  85. package/dist/primitives/Icons/Copy.svelte +15 -15
  86. package/dist/primitives/Icons/Cross.svelte +5 -5
  87. package/dist/primitives/Icons/DownArrow.svelte +8 -8
  88. package/dist/primitives/Icons/ErrorCircle.svelte +6 -6
  89. package/dist/primitives/Icons/FacebookIcon.svelte +2 -2
  90. package/dist/primitives/Icons/Home.svelte +15 -15
  91. package/dist/primitives/Icons/Icon.spec.js +169 -169
  92. package/dist/primitives/Icons/Icon.stories.svelte +100 -100
  93. package/dist/primitives/Icons/Icon.svelte +52 -52
  94. package/dist/primitives/Icons/IconGallery.stories.svelte +235 -235
  95. package/dist/primitives/Icons/Info.svelte +7 -7
  96. package/dist/primitives/Icons/InstagramIcon.svelte +4 -4
  97. package/dist/primitives/Icons/LogoInstagram.svelte +2 -2
  98. package/dist/primitives/Icons/Message.svelte +15 -15
  99. package/dist/primitives/Icons/MoonIcon.svelte +5 -5
  100. package/dist/primitives/Icons/More.svelte +21 -21
  101. package/dist/primitives/Icons/MoreHori.spec.js +61 -61
  102. package/dist/primitives/Icons/MoreHori.svelte +22 -22
  103. package/dist/primitives/Icons/Notification.svelte +14 -14
  104. package/dist/primitives/Icons/Payment.svelte +14 -14
  105. package/dist/primitives/Icons/Profile.svelte +21 -21
  106. package/dist/primitives/Icons/Reload.svelte +29 -29
  107. package/dist/primitives/Icons/Shows.svelte +21 -21
  108. package/dist/primitives/Icons/Signout.svelte +21 -21
  109. package/dist/primitives/Icons/SunIcon.svelte +8 -8
  110. package/dist/primitives/Icons/TiktokIcon.svelte +2 -2
  111. package/dist/primitives/Icons/TwitterIcon.svelte +2 -2
  112. package/dist/primitives/Icons/WarningIcon.spec.js +18 -18
  113. package/dist/primitives/Icons/WarningIcon.svelte +5 -5
  114. package/dist/primitives/Input/Input.spec.js +573 -573
  115. package/dist/primitives/Input/Input.stories.svelte +139 -139
  116. package/dist/primitives/Input/Input.svelte +392 -392
  117. package/dist/primitives/Input/Select.spec.js +218 -218
  118. package/dist/primitives/Input/Select.stories.svelte +112 -112
  119. package/dist/primitives/Input/Select.svelte +128 -128
  120. package/dist/primitives/Input/Textarea.stories.svelte +137 -137
  121. package/dist/primitives/Input/Textarea.svelte +35 -35
  122. package/dist/primitives/Label/Label.svelte +37 -37
  123. package/dist/primitives/Modal/Modal.spec.js +95 -95
  124. package/dist/primitives/Modal/Modal.stories.svelte +86 -86
  125. package/dist/primitives/Modal/Modal.svelte +158 -158
  126. package/dist/primitives/NumberInput/NumberInput.svelte +106 -106
  127. package/dist/primitives/Pagination/Pagination.stories.svelte +76 -76
  128. package/dist/primitives/Pagination/Pagination.svelte +261 -261
  129. package/dist/primitives/Radio/Radio.stories.svelte +80 -80
  130. package/dist/primitives/Radio/Radio.svelte +67 -67
  131. package/dist/primitives/Skeleton/CardPlaceholder.svelte +87 -87
  132. package/dist/primitives/Skeleton/ImagePlaceholder.svelte +59 -59
  133. package/dist/primitives/Skeleton/ListPlaceholder.svelte +76 -76
  134. package/dist/primitives/Skeleton/Skeleton.stories.svelte +151 -151
  135. package/dist/primitives/Skeleton/Skeleton.svelte +26 -26
  136. package/dist/primitives/Spinner/Spinner.spec.js +75 -75
  137. package/dist/primitives/Spinner/Spinner.stories.svelte +29 -29
  138. package/dist/primitives/Spinner/Spinner.svelte +20 -20
  139. package/dist/primitives/Tabs/TabItem.svelte +49 -49
  140. package/dist/primitives/Tabs/Tabs.stories.svelte +112 -112
  141. package/dist/primitives/Tabs/Tabs.svelte +123 -123
  142. package/dist/primitives/Toggle.spec.js +127 -127
  143. package/dist/primitives/Toggle.stories.svelte +92 -92
  144. package/dist/primitives/Toggle.svelte +71 -71
  145. package/dist/primitives/Typography/Typography.svelte +53 -53
  146. package/dist/primitives/ValidationError.spec.js +103 -103
  147. package/dist/primitives/ValidationError.stories.svelte +69 -69
  148. package/dist/primitives/ValidationError.svelte +29 -29
  149. package/dist/recipes/CropImage/CropImage.spec.js +216 -216
  150. package/dist/recipes/CropImage/CropImage.stories.svelte +104 -104
  151. package/dist/recipes/CropImage/CropImage.svelte +238 -238
  152. package/dist/recipes/ImageUploader/ImageUploader.stories.svelte +125 -125
  153. package/dist/recipes/ImageUploader/ImageUploader.svelte +804 -804
  154. package/dist/recipes/SuperLogin/SuperLogin.svelte +7 -6
  155. package/dist/recipes/SuperLogin/SuperLogin.svelte.d.ts.map +1 -1
  156. package/dist/recipes/Toaster/Toaster.stories.svelte +62 -62
  157. package/dist/recipes/feedback/EmptyState/EmptyState.svelte +1 -1
  158. package/dist/recipes/feedback/ErrorDisplay.spec.js +69 -69
  159. package/dist/recipes/feedback/ErrorDisplay.stories.svelte +101 -101
  160. package/dist/recipes/feedback/ErrorDisplay.svelte +1 -1
  161. package/dist/recipes/feedback/StatusIndicator/StatusIndicator.spec.js +129 -129
  162. package/dist/recipes/feedback/StatusIndicator/StatusIndicator.svelte +157 -157
  163. package/dist/recipes/fields/CheckboxField.svelte +85 -85
  164. package/dist/recipes/fields/FormField.svelte +58 -58
  165. package/dist/recipes/fields/RadioGroup.svelte +95 -95
  166. package/dist/recipes/fields/SelectField.svelte +80 -80
  167. package/dist/recipes/fields/TextareaField.svelte +97 -97
  168. package/dist/recipes/fields/ToggleField.svelte +60 -60
  169. package/dist/recipes/fields/index.js +7 -7
  170. package/dist/recipes/inputs/MultiSelect.spec.js +257 -257
  171. package/dist/recipes/inputs/MultiSelect.stories.svelte +133 -133
  172. package/dist/recipes/inputs/MultiSelect.svelte +249 -249
  173. package/dist/recipes/inputs/OTPInput.spec.js +238 -238
  174. package/dist/recipes/inputs/OTPInput.stories.svelte +162 -162
  175. package/dist/recipes/inputs/OTPInput.svelte +29 -29
  176. package/dist/recipes/inputs/PasswordInput.svelte +22 -22
  177. package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.spec.js +173 -173
  178. package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte +43 -43
  179. package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.spec.js +300 -300
  180. package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte +123 -123
  181. package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte +326 -326
  182. package/dist/recipes/inputs/Search.svelte +37 -37
  183. package/dist/recipes/inputs/SelectDropdown.svelte +57 -57
  184. package/dist/recipes/modals/AlertModal.svelte +130 -130
  185. package/dist/recipes/modals/ConfirmationModal.spec.js +191 -191
  186. package/dist/recipes/modals/ConfirmationModal.stories.svelte +119 -119
  187. package/dist/recipes/modals/ConfirmationModal.svelte +152 -152
  188. package/dist/recipes/modals/InputModal.svelte +182 -182
  189. package/dist/recipes/modals/ModalStateManager.spec.js +100 -100
  190. package/dist/recipes/modals/ModalStateManager.svelte +77 -77
  191. package/dist/recipes/modals/ModalTestWrapper.svelte +65 -65
  192. package/dist/recipes/modals/StatusModal.svelte +206 -206
  193. package/dist/services/EventService.js +75 -75
  194. package/dist/services/EventService.spec.js +217 -217
  195. package/dist/services/ShowService.spec.js +342 -342
  196. package/dist/stores/auth.js +36 -36
  197. package/dist/stores/auth.spec.js +139 -139
  198. package/dist/stores/toaster.js +13 -13
  199. package/dist/stories/ButtonAuditReview.stories.svelte +14 -14
  200. package/dist/stories/ButtonAuditReview.svelte +427 -427
  201. package/dist/stories/PatternsGallery.stories.svelte +19 -19
  202. package/dist/stories/PatternsGallery.svelte +206 -206
  203. package/dist/stories/PrimitivesGallery.stories.svelte +19 -19
  204. package/dist/stories/PrimitivesGallery.svelte +725 -725
  205. package/dist/stories/RecipesGallery.stories.svelte +19 -19
  206. package/dist/stories/RecipesGallery.svelte +271 -271
  207. package/dist/stories/button-audit-manifest.json +11186 -11186
  208. package/dist/tailwind/preset.cjs +82 -82
  209. package/dist/tokens/tokens.css +87 -87
  210. package/dist/utils/transitions.d.ts +24 -0
  211. package/dist/utils/transitions.d.ts.map +1 -0
  212. package/dist/utils/transitions.js +62 -0
  213. package/dist/utils/utils.js +354 -354
  214. package/package.json +283 -283
@@ -1,235 +1,235 @@
1
- <script module>
2
- import { defineMeta } from "@storybook/addon-svelte-csf";
3
-
4
- const { Story } = defineMeta({
5
- title: 'Components/Icons/Gallery',
6
- tags: ['autodocs'],
7
- });
8
-
9
- </script>
10
-
11
- <script>
12
- import ArrowLeft from './ArrowLeft.svelte';
13
- import ArrowRight from './ArrowRight.svelte';
14
- import Availability from './Availability.svelte';
15
- import Back from './Back.svelte';
16
- import CheckCircle from './CheckCircle.svelte';
17
- import CheckCircleOutline from './CheckCircleOutline.svelte';
18
- import ChevronLeft from './ChevronLeft.svelte';
19
- import ChevronRight from './ChevronRight.svelte';
20
- import Copy from './Copy.svelte';
21
- import Cross from './Cross.svelte';
22
- import DownArrow from './DownArrow.svelte';
23
- import ErrorCircle from './ErrorCircle.svelte';
24
- import FacebookIcon from './FacebookIcon.svelte';
25
- import Home from './Home.svelte';
26
- import Icon from './Icon.svelte';
27
- import Info from './Info.svelte';
28
- import InstagramIcon from './InstagramIcon.svelte';
29
- import Message from './Message.svelte';
30
- import MoonIcon from './MoonIcon.svelte';
31
- import More from './More.svelte';
32
- import MoreHori from './MoreHori.svelte';
33
- import Notification from './Notification.svelte';
34
- import Payment from './Payment.svelte';
35
- import Profile from './Profile.svelte';
36
- import Reload from './Reload.svelte';
37
- import Shows from './Shows.svelte';
38
- import Signout from './Signout.svelte';
39
- import SunIcon from './SunIcon.svelte';
40
- import TiktokIcon from './TiktokIcon.svelte';
41
- import TwitterIcon from './TwitterIcon.svelte';
42
- import WarningIcon from './WarningIcon.svelte';
43
-
44
- const icons = [
45
- { name: 'ArrowLeft', component: ArrowLeft },
46
- { name: 'ArrowRight', component: ArrowRight },
47
- { name: 'Availability', component: Availability },
48
- { name: 'Back', component: Back },
49
- { name: 'CheckCircle', component: CheckCircle },
50
- { name: 'CheckCircleOutline', component: CheckCircleOutline },
51
- { name: 'ChevronLeft', component: ChevronLeft },
52
- { name: 'ChevronRight', component: ChevronRight },
53
- { name: 'Copy', component: Copy },
54
- { name: 'Cross', component: Cross },
55
- { name: 'DownArrow', component: DownArrow },
56
- { name: 'ErrorCircle', component: ErrorCircle },
57
- { name: 'FacebookIcon', component: FacebookIcon },
58
- { name: 'Home', component: Home },
59
- { name: 'Info', component: Info },
60
- { name: 'InstagramIcon', component: InstagramIcon },
61
- { name: 'Message', component: Message },
62
- { name: 'MoonIcon', component: MoonIcon },
63
- { name: 'More', component: More },
64
- { name: 'MoreHori', component: MoreHori },
65
- { name: 'Notification', component: Notification },
66
- { name: 'Payment', component: Payment },
67
- { name: 'Profile', component: Profile },
68
- { name: 'Reload', component: Reload },
69
- { name: 'Shows', component: Shows },
70
- { name: 'Signout', component: Signout },
71
- { name: 'SunIcon', component: SunIcon },
72
- { name: 'TiktokIcon', component: TiktokIcon },
73
- { name: 'TwitterIcon', component: TwitterIcon },
74
- { name: 'WarningIcon', component: WarningIcon },
75
- ];
76
- </script>
77
-
78
- <Story name="All Icons">
79
- <div class="p-8">
80
- <h1 class="text-3xl font-bold mb-6">Icon Gallery</h1>
81
- <p class="text-gray-500 dark:text-gray-400 mb-8">All available icons in the component library</p>
82
-
83
- <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
84
- {#each icons as { name, component }}
85
- <div class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
86
- <div class="w-12 h-12 flex items-center justify-center mb-2">
87
- <svelte:component this={component} />
88
- </div>
89
- <span class="text-sm text-center text-gray-500 dark:text-gray-400 font-medium">{name}</span>
90
- </div>
91
- {/each}
92
- </div>
93
- </div>
94
- </Story>
95
-
96
- <Story name="Icon Sizes">
97
- <div class="p-8 space-y-8">
98
- <div>
99
- <h2 class="text-2xl font-bold mb-4">Navigation Icons</h2>
100
- <div class="flex gap-6 items-end">
101
- <div class="text-center">
102
- <div class="w-12 h-12 flex items-center justify-center mb-2">
103
- <Home />
104
- </div>
105
- <span class="text-xs text-gray-500 dark:text-gray-400">Home</span>
106
- </div>
107
- <div class="text-center">
108
- <div class="w-12 h-12 flex items-center justify-center mb-2">
109
- <Shows />
110
- </div>
111
- <span class="text-xs text-gray-500 dark:text-gray-400">Shows</span>
112
- </div>
113
- <div class="text-center">
114
- <div class="w-12 h-12 flex items-center justify-center mb-2">
115
- <Availability />
116
- </div>
117
- <span class="text-xs text-gray-500 dark:text-gray-400">Availability</span>
118
- </div>
119
- <div class="text-center">
120
- <div class="w-12 h-12 flex items-center justify-center mb-2">
121
- <Profile />
122
- </div>
123
- <span class="text-xs text-gray-500 dark:text-gray-400">Profile</span>
124
- </div>
125
- </div>
126
- </div>
127
-
128
- <div>
129
- <h2 class="text-2xl font-bold mb-4">Status Icons</h2>
130
- <div class="flex gap-6 items-end">
131
- <div class="text-center">
132
- <div class="w-12 h-12 flex items-center justify-center mb-2 text-green-600 dark:text-green-400">
133
- <CheckCircle />
134
- </div>
135
- <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
136
- </div>
137
- <div class="text-center">
138
- <div class="w-12 h-12 flex items-center justify-center mb-2 text-red-600 dark:text-red-400">
139
- <ErrorCircle />
140
- </div>
141
- <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
142
- </div>
143
- <div class="text-center">
144
- <div class="w-12 h-12 flex items-center justify-center mb-2 text-amber-500 dark:text-amber-400">
145
- <WarningIcon />
146
- </div>
147
- <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
148
- </div>
149
- <div class="text-center">
150
- <div class="w-12 h-12 flex items-center justify-center mb-2 text-blue-500">
151
- <Info />
152
- </div>
153
- <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
154
- </div>
155
- </div>
156
- </div>
157
-
158
- <div>
159
- <h2 class="text-2xl font-bold mb-4">Social Media Icons</h2>
160
- <div class="flex gap-6 items-end">
161
- <div class="text-center">
162
- <div class="w-12 h-12 flex items-center justify-center mb-2">
163
- <FacebookIcon />
164
- </div>
165
- <span class="text-xs text-gray-500 dark:text-gray-400">Facebook</span>
166
- </div>
167
- <div class="text-center">
168
- <div class="w-12 h-12 flex items-center justify-center mb-2">
169
- <InstagramIcon />
170
- </div>
171
- <span class="text-xs text-gray-500 dark:text-gray-400">Instagram</span>
172
- </div>
173
- <div class="text-center">
174
- <div class="w-12 h-12 flex items-center justify-center mb-2">
175
- <TwitterIcon />
176
- </div>
177
- <span class="text-xs text-gray-500 dark:text-gray-400">Twitter</span>
178
- </div>
179
- <div class="text-center">
180
- <div class="w-12 h-12 flex items-center justify-center mb-2">
181
- <TiktokIcon />
182
- </div>
183
- <span class="text-xs text-gray-500 dark:text-gray-400">TikTok</span>
184
- </div>
185
- </div>
186
- </div>
187
-
188
- <div>
189
- <h2 class="text-2xl font-bold mb-4">Action Icons</h2>
190
- <div class="flex gap-6 items-end">
191
- <div class="text-center">
192
- <div class="w-12 h-12 flex items-center justify-center mb-2">
193
- <Copy />
194
- </div>
195
- <span class="text-xs text-gray-500 dark:text-gray-400">Copy</span>
196
- </div>
197
- <div class="text-center">
198
- <div class="w-12 h-12 flex items-center justify-center mb-2">
199
- <Reload />
200
- </div>
201
- <span class="text-xs text-gray-500 dark:text-gray-400">Reload</span>
202
- </div>
203
- <div class="text-center">
204
- <div class="w-12 h-12 flex items-center justify-center mb-2">
205
- <Cross />
206
- </div>
207
- <span class="text-xs text-gray-500 dark:text-gray-400">Close</span>
208
- </div>
209
- <div class="text-center">
210
- <div class="w-12 h-12 flex items-center justify-center mb-2">
211
- <More />
212
- </div>
213
- <span class="text-xs text-gray-500 dark:text-gray-400">More</span>
214
- </div>
215
- </div>
216
- </div>
217
- </div>
218
- </Story>
219
-
220
- <Story name="Dark Mode Icons">
221
- <div class="bg-gray-900 p-8">
222
- <h1 class="text-3xl font-bold mb-6 text-white">Icons in Dark Mode</h1>
223
-
224
- <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
225
- {#each icons.slice(0, 12) as { name, component }}
226
- <div class="flex flex-col items-center p-4 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors">
227
- <div class="w-12 h-12 flex items-center justify-center mb-2 text-white">
228
- <svelte:component this={component} />
229
- </div>
230
- <span class="text-sm text-center text-gray-300 font-medium">{name}</span>
231
- </div>
232
- {/each}
233
- </div>
234
- </div>
235
- </Story>
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+
4
+ const { Story } = defineMeta({
5
+ title: 'Components/Icons/Gallery',
6
+ tags: ['autodocs'],
7
+ });
8
+
9
+ </script>
10
+
11
+ <script>
12
+ import ArrowLeft from './ArrowLeft.svelte';
13
+ import ArrowRight from './ArrowRight.svelte';
14
+ import Availability from './Availability.svelte';
15
+ import Back from './Back.svelte';
16
+ import CheckCircle from './CheckCircle.svelte';
17
+ import CheckCircleOutline from './CheckCircleOutline.svelte';
18
+ import ChevronLeft from './ChevronLeft.svelte';
19
+ import ChevronRight from './ChevronRight.svelte';
20
+ import Copy from './Copy.svelte';
21
+ import Cross from './Cross.svelte';
22
+ import DownArrow from './DownArrow.svelte';
23
+ import ErrorCircle from './ErrorCircle.svelte';
24
+ import FacebookIcon from './FacebookIcon.svelte';
25
+ import Home from './Home.svelte';
26
+ import Icon from './Icon.svelte';
27
+ import Info from './Info.svelte';
28
+ import InstagramIcon from './InstagramIcon.svelte';
29
+ import Message from './Message.svelte';
30
+ import MoonIcon from './MoonIcon.svelte';
31
+ import More from './More.svelte';
32
+ import MoreHori from './MoreHori.svelte';
33
+ import Notification from './Notification.svelte';
34
+ import Payment from './Payment.svelte';
35
+ import Profile from './Profile.svelte';
36
+ import Reload from './Reload.svelte';
37
+ import Shows from './Shows.svelte';
38
+ import Signout from './Signout.svelte';
39
+ import SunIcon from './SunIcon.svelte';
40
+ import TiktokIcon from './TiktokIcon.svelte';
41
+ import TwitterIcon from './TwitterIcon.svelte';
42
+ import WarningIcon from './WarningIcon.svelte';
43
+
44
+ const icons = [
45
+ { name: 'ArrowLeft', component: ArrowLeft },
46
+ { name: 'ArrowRight', component: ArrowRight },
47
+ { name: 'Availability', component: Availability },
48
+ { name: 'Back', component: Back },
49
+ { name: 'CheckCircle', component: CheckCircle },
50
+ { name: 'CheckCircleOutline', component: CheckCircleOutline },
51
+ { name: 'ChevronLeft', component: ChevronLeft },
52
+ { name: 'ChevronRight', component: ChevronRight },
53
+ { name: 'Copy', component: Copy },
54
+ { name: 'Cross', component: Cross },
55
+ { name: 'DownArrow', component: DownArrow },
56
+ { name: 'ErrorCircle', component: ErrorCircle },
57
+ { name: 'FacebookIcon', component: FacebookIcon },
58
+ { name: 'Home', component: Home },
59
+ { name: 'Info', component: Info },
60
+ { name: 'InstagramIcon', component: InstagramIcon },
61
+ { name: 'Message', component: Message },
62
+ { name: 'MoonIcon', component: MoonIcon },
63
+ { name: 'More', component: More },
64
+ { name: 'MoreHori', component: MoreHori },
65
+ { name: 'Notification', component: Notification },
66
+ { name: 'Payment', component: Payment },
67
+ { name: 'Profile', component: Profile },
68
+ { name: 'Reload', component: Reload },
69
+ { name: 'Shows', component: Shows },
70
+ { name: 'Signout', component: Signout },
71
+ { name: 'SunIcon', component: SunIcon },
72
+ { name: 'TiktokIcon', component: TiktokIcon },
73
+ { name: 'TwitterIcon', component: TwitterIcon },
74
+ { name: 'WarningIcon', component: WarningIcon },
75
+ ];
76
+ </script>
77
+
78
+ <Story name="All Icons">
79
+ <div class="p-8">
80
+ <h1 class="text-3xl font-bold mb-6">Icon Gallery</h1>
81
+ <p class="text-gray-500 dark:text-gray-400 mb-8">All available icons in the component library</p>
82
+
83
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
84
+ {#each icons as { name, component }}
85
+ <div class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
86
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
87
+ <svelte:component this={component} />
88
+ </div>
89
+ <span class="text-sm text-center text-gray-500 dark:text-gray-400 font-medium">{name}</span>
90
+ </div>
91
+ {/each}
92
+ </div>
93
+ </div>
94
+ </Story>
95
+
96
+ <Story name="Icon Sizes">
97
+ <div class="p-8 space-y-8">
98
+ <div>
99
+ <h2 class="text-2xl font-bold mb-4">Navigation Icons</h2>
100
+ <div class="flex gap-6 items-end">
101
+ <div class="text-center">
102
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
103
+ <Home />
104
+ </div>
105
+ <span class="text-xs text-gray-500 dark:text-gray-400">Home</span>
106
+ </div>
107
+ <div class="text-center">
108
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
109
+ <Shows />
110
+ </div>
111
+ <span class="text-xs text-gray-500 dark:text-gray-400">Shows</span>
112
+ </div>
113
+ <div class="text-center">
114
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
115
+ <Availability />
116
+ </div>
117
+ <span class="text-xs text-gray-500 dark:text-gray-400">Availability</span>
118
+ </div>
119
+ <div class="text-center">
120
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
121
+ <Profile />
122
+ </div>
123
+ <span class="text-xs text-gray-500 dark:text-gray-400">Profile</span>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <div>
129
+ <h2 class="text-2xl font-bold mb-4">Status Icons</h2>
130
+ <div class="flex gap-6 items-end">
131
+ <div class="text-center">
132
+ <div class="w-12 h-12 flex items-center justify-center mb-2 text-green-600 dark:text-green-400">
133
+ <CheckCircle />
134
+ </div>
135
+ <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
136
+ </div>
137
+ <div class="text-center">
138
+ <div class="w-12 h-12 flex items-center justify-center mb-2 text-red-600 dark:text-red-400">
139
+ <ErrorCircle />
140
+ </div>
141
+ <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
142
+ </div>
143
+ <div class="text-center">
144
+ <div class="w-12 h-12 flex items-center justify-center mb-2 text-amber-500 dark:text-amber-400">
145
+ <WarningIcon />
146
+ </div>
147
+ <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
148
+ </div>
149
+ <div class="text-center">
150
+ <div class="w-12 h-12 flex items-center justify-center mb-2 text-blue-500">
151
+ <Info />
152
+ </div>
153
+ <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <div>
159
+ <h2 class="text-2xl font-bold mb-4">Social Media Icons</h2>
160
+ <div class="flex gap-6 items-end">
161
+ <div class="text-center">
162
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
163
+ <FacebookIcon />
164
+ </div>
165
+ <span class="text-xs text-gray-500 dark:text-gray-400">Facebook</span>
166
+ </div>
167
+ <div class="text-center">
168
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
169
+ <InstagramIcon />
170
+ </div>
171
+ <span class="text-xs text-gray-500 dark:text-gray-400">Instagram</span>
172
+ </div>
173
+ <div class="text-center">
174
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
175
+ <TwitterIcon />
176
+ </div>
177
+ <span class="text-xs text-gray-500 dark:text-gray-400">Twitter</span>
178
+ </div>
179
+ <div class="text-center">
180
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
181
+ <TiktokIcon />
182
+ </div>
183
+ <span class="text-xs text-gray-500 dark:text-gray-400">TikTok</span>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <div>
189
+ <h2 class="text-2xl font-bold mb-4">Action Icons</h2>
190
+ <div class="flex gap-6 items-end">
191
+ <div class="text-center">
192
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
193
+ <Copy />
194
+ </div>
195
+ <span class="text-xs text-gray-500 dark:text-gray-400">Copy</span>
196
+ </div>
197
+ <div class="text-center">
198
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
199
+ <Reload />
200
+ </div>
201
+ <span class="text-xs text-gray-500 dark:text-gray-400">Reload</span>
202
+ </div>
203
+ <div class="text-center">
204
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
205
+ <Cross />
206
+ </div>
207
+ <span class="text-xs text-gray-500 dark:text-gray-400">Close</span>
208
+ </div>
209
+ <div class="text-center">
210
+ <div class="w-12 h-12 flex items-center justify-center mb-2">
211
+ <More />
212
+ </div>
213
+ <span class="text-xs text-gray-500 dark:text-gray-400">More</span>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </Story>
219
+
220
+ <Story name="Dark Mode Icons">
221
+ <div class="bg-gray-900 p-8">
222
+ <h1 class="text-3xl font-bold mb-6 text-white">Icons in Dark Mode</h1>
223
+
224
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
225
+ {#each icons.slice(0, 12) as { name, component }}
226
+ <div class="flex flex-col items-center p-4 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors">
227
+ <div class="w-12 h-12 flex items-center justify-center mb-2 text-white">
228
+ <svelte:component this={component} />
229
+ </div>
230
+ <span class="text-sm text-center text-gray-300 font-medium">{name}</span>
231
+ </div>
232
+ {/each}
233
+ </div>
234
+ </div>
235
+ </Story>
@@ -11,10 +11,10 @@
11
11
  fill="none"
12
12
  xmlns="http://www.w3.org/2000/svg"
13
13
  >
14
- <path
15
- fill-rule="evenodd"
16
- clip-rule="evenodd"
17
- d="M8.99935 2.33341C5.31745 2.33341 2.33268 5.31818 2.33268 9.00008C2.33268 12.682 5.31745 15.6667 8.99935 15.6667C12.6812 15.6667 15.666 12.682 15.666 9.00008C15.666 5.31818 12.6812 2.33341 8.99935 2.33341ZM0.666016 9.00008C0.666016 4.39771 4.39698 0.666748 8.99935 0.666748C13.6017 0.666748 17.3327 4.39771 17.3327 9.00008C17.3327 13.6025 13.6017 17.3334 8.99935 17.3334C4.39698 17.3334 0.666016 13.6025 0.666016 9.00008ZM7.6726 5.25008C7.6726 4.78984 8.04569 4.41675 8.50593 4.41675H8.51426C8.9745 4.41675 9.3476 4.78984 9.3476 5.25008C9.3476 5.71032 8.9745 6.08342 8.51426 6.08342H8.50593C8.04569 6.08342 7.6726 5.71032 7.6726 5.25008ZM6.49935 8.16675C6.49935 7.70651 6.87245 7.33342 7.33268 7.33342H8.99935C9.45959 7.33342 9.83268 7.70651 9.83268 8.16675V11.5001H10.666C11.1263 11.5001 11.4993 11.8732 11.4993 12.3334C11.4993 12.7937 11.1263 13.1667 10.666 13.1667H7.33268C6.87245 13.1667 6.49935 12.7937 6.49935 12.3334C6.49935 11.8732 6.87245 11.5001 7.33268 11.5001H8.16602V9.00008H7.33268C6.87245 9.00008 6.49935 8.62699 6.49935 8.16675Z"
18
- fill={color}
19
- />
20
- </svg>
14
+ <path
15
+ fill-rule="evenodd"
16
+ clip-rule="evenodd"
17
+ d="M8.99935 2.33341C5.31745 2.33341 2.33268 5.31818 2.33268 9.00008C2.33268 12.682 5.31745 15.6667 8.99935 15.6667C12.6812 15.6667 15.666 12.682 15.666 9.00008C15.666 5.31818 12.6812 2.33341 8.99935 2.33341ZM0.666016 9.00008C0.666016 4.39771 4.39698 0.666748 8.99935 0.666748C13.6017 0.666748 17.3327 4.39771 17.3327 9.00008C17.3327 13.6025 13.6017 17.3334 8.99935 17.3334C4.39698 17.3334 0.666016 13.6025 0.666016 9.00008ZM7.6726 5.25008C7.6726 4.78984 8.04569 4.41675 8.50593 4.41675H8.51426C8.9745 4.41675 9.3476 4.78984 9.3476 5.25008C9.3476 5.71032 8.9745 6.08342 8.51426 6.08342H8.50593C8.04569 6.08342 7.6726 5.71032 7.6726 5.25008ZM6.49935 8.16675C6.49935 7.70651 6.87245 7.33342 7.33268 7.33342H8.99935C9.45959 7.33342 9.83268 7.70651 9.83268 8.16675V11.5001H10.666C11.1263 11.5001 11.4993 11.8732 11.4993 12.3334C11.4993 12.7937 11.1263 13.1667 10.666 13.1667H7.33268C6.87245 13.1667 6.49935 12.7937 6.49935 12.3334C6.49935 11.8732 6.87245 11.5001 7.33268 11.5001H8.16602V9.00008H7.33268C6.87245 9.00008 6.49935 8.62699 6.49935 8.16675Z"
18
+ fill={color}
19
+ />
20
+ </svg>
@@ -15,7 +15,7 @@
15
15
  stroke-linejoin="round"
16
16
  xmlns="http://www.w3.org/2000/svg"
17
17
  >
18
- <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
19
- <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
20
- <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
21
- </svg>
18
+ <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
19
+ <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
20
+ <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
21
+ </svg>
@@ -11,5 +11,5 @@
11
11
  viewBox="0 0 24 24"
12
12
  xmlns="http://www.w3.org/2000/svg"
13
13
  >
14
- <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
15
- </svg>
14
+ <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
15
+ </svg>
@@ -11,18 +11,18 @@
11
11
  fill="none"
12
12
  xmlns="http://www.w3.org/2000/svg"
13
13
  >
14
- <path
15
- d="M10.1902 14.4577C10.2155 14.5208 10.2596 14.5747 10.3164 14.6121C10.3732 14.6494 10.4401 14.6685 10.5081 14.6668C10.5761 14.665 10.6419 14.6426 10.6968 14.6023C10.7516 14.5621 10.7928 14.506 10.8149 14.4417L15.1482 1.77503C15.1695 1.71596 15.1736 1.65203 15.16 1.59073C15.1463 1.52943 15.1154 1.47329 15.071 1.42888C15.0266 1.38447 14.9705 1.35363 14.9092 1.33996C14.8479 1.32629 14.7839 1.33036 14.7249 1.3517L2.05821 5.68503C1.99388 5.70709 1.93783 5.74831 1.89759 5.80314C1.85736 5.85798 1.83486 5.92381 1.83312 5.9918C1.83138 6.05979 1.85047 6.12669 1.88785 6.18351C1.92523 6.24034 1.97909 6.28437 2.04221 6.3097L7.32888 8.4297C7.496 8.49661 7.64785 8.59667 7.77526 8.72385C7.90266 8.85103 8.003 9.00269 8.07021 9.1697L10.1902 14.4577Z"
16
- stroke={color}
17
- stroke-width="1.33333"
18
- stroke-linecap="round"
19
- stroke-linejoin="round"
20
- />
21
- <path
22
- d="M15.0697 1.43164L7.77637 8.72431"
23
- stroke={color}
24
- stroke-width="1.33333"
25
- stroke-linecap="round"
26
- stroke-linejoin="round"
27
- />
28
- </svg>
14
+ <path
15
+ d="M10.1902 14.4577C10.2155 14.5208 10.2596 14.5747 10.3164 14.6121C10.3732 14.6494 10.4401 14.6685 10.5081 14.6668C10.5761 14.665 10.6419 14.6426 10.6968 14.6023C10.7516 14.5621 10.7928 14.506 10.8149 14.4417L15.1482 1.77503C15.1695 1.71596 15.1736 1.65203 15.16 1.59073C15.1463 1.52943 15.1154 1.47329 15.071 1.42888C15.0266 1.38447 14.9705 1.35363 14.9092 1.33996C14.8479 1.32629 14.7839 1.33036 14.7249 1.3517L2.05821 5.68503C1.99388 5.70709 1.93783 5.74831 1.89759 5.80314C1.85736 5.85798 1.83486 5.92381 1.83312 5.9918C1.83138 6.05979 1.85047 6.12669 1.88785 6.18351C1.92523 6.24034 1.97909 6.28437 2.04221 6.3097L7.32888 8.4297C7.496 8.49661 7.64785 8.59667 7.77526 8.72385C7.90266 8.85103 8.003 9.00269 8.07021 9.1697L10.1902 14.4577Z"
16
+ stroke={color}
17
+ stroke-width="1.33333"
18
+ stroke-linecap="round"
19
+ stroke-linejoin="round"
20
+ />
21
+ <path
22
+ d="M15.0697 1.43164L7.77637 8.72431"
23
+ stroke={color}
24
+ stroke-width="1.33333"
25
+ stroke-linecap="round"
26
+ stroke-linejoin="round"
27
+ />
28
+ </svg>
@@ -11,8 +11,8 @@
11
11
  fill="none"
12
12
  xmlns="http://www.w3.org/2000/svg"
13
13
  >
14
- <path
15
- d="M21.0009 12.79C20.8436 14.4922 20.2047 16.1144 19.1591 17.4668C18.1135 18.8192 16.7044 19.8458 15.0966 20.4265C13.4888 21.0073 11.748 21.1181 10.0795 20.7461C8.41104 20.3741 6.88302 19.5345 5.67426 18.3258C4.46551 17.117 3.62596 15.589 3.25393 13.9205C2.8819 12.252 2.99274 10.5112 3.57348 8.9034C4.15423 7.29557 5.18085 5.88651 6.53324 4.84088C7.88562 3.79525 9.50782 3.15731 11.2101 3C10.2147 4.34827 9.73521 6.00945 9.85856 7.68141C9.98191 9.35338 10.7002 10.9251 11.8788 12.1037C13.0574 13.2823 14.6291 14.0006 16.3011 14.1239C17.973 14.2473 19.6342 13.7678 20.9825 12.7724L21.0009 12.79Z"
16
- fill={color}
17
- />
18
- </svg>
14
+ <path
15
+ d="M21.0009 12.79C20.8436 14.4922 20.2047 16.1144 19.1591 17.4668C18.1135 18.8192 16.7044 19.8458 15.0966 20.4265C13.4888 21.0073 11.748 21.1181 10.0795 20.7461C8.41104 20.3741 6.88302 19.5345 5.67426 18.3258C4.46551 17.117 3.62596 15.589 3.25393 13.9205C2.8819 12.252 2.99274 10.5112 3.57348 8.9034C4.15423 7.29557 5.18085 5.88651 6.53324 4.84088C7.88562 3.79525 9.50782 3.15731 11.2101 3C10.2147 4.34827 9.73521 6.00945 9.85856 7.68141C9.98191 9.35338 10.7002 10.9251 11.8788 12.1037C13.0574 13.2823 14.6291 14.0006 16.3011 14.1239C17.973 14.2473 19.6342 13.7678 20.9825 12.7724L21.0009 12.79Z"
16
+ fill={color}
17
+ />
18
+ </svg>
@@ -11,25 +11,25 @@
11
11
  fill="none"
12
12
  xmlns="http://www.w3.org/2000/svg"
13
13
  >
14
- <path
15
- d="M9.99935 10.8333C10.4596 10.8333 10.8327 10.4602 10.8327 9.99996C10.8327 9.53972 10.4596 9.16663 9.99935 9.16663C9.53911 9.16663 9.16602 9.53972 9.16602 9.99996C9.16602 10.4602 9.53911 10.8333 9.99935 10.8333Z"
16
- stroke={color}
17
- stroke-width="1.66667"
18
- stroke-linecap="round"
19
- stroke-linejoin="round"
20
- />
21
- <path
22
- d="M9.99935 5.00004C10.4596 5.00004 10.8327 4.62694 10.8327 4.16671C10.8327 3.70647 10.4596 3.33337 9.99935 3.33337C9.53911 3.33337 9.16602 3.70647 9.16602 4.16671C9.16602 4.62694 9.53911 5.00004 9.99935 5.00004Z"
23
- stroke={color}
24
- stroke-width="1.66667"
25
- stroke-linecap="round"
26
- stroke-linejoin="round"
27
- />
28
- <path
29
- d="M9.99935 16.6667C10.4596 16.6667 10.8327 16.2936 10.8327 15.8333C10.8327 15.3731 10.4596 15 9.99935 15C9.53911 15 9.16602 15.3731 9.16602 15.8333C9.16602 16.2936 9.53911 16.6667 9.99935 16.6667Z"
30
- stroke={color}
31
- stroke-width="1.66667"
32
- stroke-linecap="round"
33
- stroke-linejoin="round"
34
- />
14
+ <path
15
+ d="M9.99935 10.8333C10.4596 10.8333 10.8327 10.4602 10.8327 9.99996C10.8327 9.53972 10.4596 9.16663 9.99935 9.16663C9.53911 9.16663 9.16602 9.53972 9.16602 9.99996C9.16602 10.4602 9.53911 10.8333 9.99935 10.8333Z"
16
+ stroke={color}
17
+ stroke-width="1.66667"
18
+ stroke-linecap="round"
19
+ stroke-linejoin="round"
20
+ />
21
+ <path
22
+ d="M9.99935 5.00004C10.4596 5.00004 10.8327 4.62694 10.8327 4.16671C10.8327 3.70647 10.4596 3.33337 9.99935 3.33337C9.53911 3.33337 9.16602 3.70647 9.16602 4.16671C9.16602 4.62694 9.53911 5.00004 9.99935 5.00004Z"
23
+ stroke={color}
24
+ stroke-width="1.66667"
25
+ stroke-linecap="round"
26
+ stroke-linejoin="round"
27
+ />
28
+ <path
29
+ d="M9.99935 16.6667C10.4596 16.6667 10.8327 16.2936 10.8327 15.8333C10.8327 15.3731 10.4596 15 9.99935 15C9.53911 15 9.16602 15.3731 9.16602 15.8333C9.16602 16.2936 9.53911 16.6667 9.99935 16.6667Z"
30
+ stroke={color}
31
+ stroke-width="1.66667"
32
+ stroke-linecap="round"
33
+ stroke-linejoin="round"
34
+ />
35
35
  </svg>