@pathscale/ui 1.2.5 → 1.2.7

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 (385) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +59 -59
  3. package/dist/components/_shared/index.js +2 -3
  4. package/dist/components/_shared/overlayPosition.js +5 -5
  5. package/dist/components/accordion/Accordion.css +158 -158
  6. package/dist/components/accordion/Accordion.js +44 -44
  7. package/dist/components/accordion/index.js +2 -9
  8. package/dist/components/alert/Alert.css +116 -116
  9. package/dist/components/alert/Alert.js +30 -30
  10. package/dist/components/alert/index.js +2 -8
  11. package/dist/components/auth-card/AuthCard.js +20 -20
  12. package/dist/components/auth-card/index.js +2 -3
  13. package/dist/components/auth-error-message/AuthErrorMessage.js +12 -12
  14. package/dist/components/auth-error-message/index.js +2 -3
  15. package/dist/components/auth-field-group/AuthFieldGroup.js +11 -11
  16. package/dist/components/auth-field-group/index.js +2 -3
  17. package/dist/components/auth-footer-links/AuthFooterLinks.js +20 -20
  18. package/dist/components/auth-footer-links/index.js +2 -3
  19. package/dist/components/auth-form/AuthForm.js +11 -11
  20. package/dist/components/auth-form/index.js +2 -3
  21. package/dist/components/auth-powered-by/AuthPoweredBy.js +15 -26
  22. package/dist/components/auth-powered-by/index.js +2 -3
  23. package/dist/components/auth-submit-button/AuthSubmitButton.js +10 -10
  24. package/dist/components/auth-submit-button/index.js +2 -3
  25. package/dist/components/auth-success-message/AuthSuccessMessage.js +9 -9
  26. package/dist/components/auth-success-message/index.js +2 -3
  27. package/dist/components/avatar/Avatar.css +124 -124
  28. package/dist/components/avatar/Avatar.js +27 -27
  29. package/dist/components/avatar/AvatarGroup.js +11 -11
  30. package/dist/components/avatar/index.js +2 -6
  31. package/dist/components/badge/Badge.css +164 -164
  32. package/dist/components/badge/Badge.js +19 -19
  33. package/dist/components/badge/index.js +6 -9
  34. package/dist/components/breadcrumbs/Breadcrumbs.css +63 -63
  35. package/dist/components/breadcrumbs/Breadcrumbs.js +25 -25
  36. package/dist/components/breadcrumbs/index.js +2 -5
  37. package/dist/components/button/Button.css +194 -194
  38. package/dist/components/button/Button.js +22 -22
  39. package/dist/components/button/index.js +2 -3
  40. package/dist/components/button-group/ButtonGroup.css +117 -117
  41. package/dist/components/button-group/ButtonGroup.js +14 -14
  42. package/dist/components/button-group/context.js +2 -2
  43. package/dist/components/button-group/index.js +2 -6
  44. package/dist/components/calendar/Calendar.css +258 -258
  45. package/dist/components/calendar/Calendar.js +85 -85
  46. package/dist/components/calendar/index.js +2 -3
  47. package/dist/components/card/Card.css +110 -110
  48. package/dist/components/card/Card.js +21 -21
  49. package/dist/components/card/index.js +2 -8
  50. package/dist/components/chatbubble/ChatBubble.css +164 -164
  51. package/dist/components/chatbubble/ChatBubble.js +19 -19
  52. package/dist/components/chatbubble/ChatBubbleAvatar.js +8 -8
  53. package/dist/components/chatbubble/ChatBubbleFooter.js +11 -11
  54. package/dist/components/chatbubble/ChatBubbleHeader.js +8 -8
  55. package/dist/components/chatbubble/ChatBubbleMessage.js +12 -12
  56. package/dist/components/chatbubble/ChatBubbleTime.js +11 -11
  57. package/dist/components/chatbubble/index.js +2 -3
  58. package/dist/components/checkbox/Checkbox.css +183 -183
  59. package/dist/components/checkbox/Checkbox.js +29 -29
  60. package/dist/components/checkbox/index.js +2 -3
  61. package/dist/components/checkbox-group/CheckboxGroup.css +10 -10
  62. package/dist/components/checkbox-group/CheckboxGroup.js +16 -16
  63. package/dist/components/checkbox-group/context.js +2 -2
  64. package/dist/components/checkbox-group/index.js +3 -4
  65. package/dist/components/chip/Chip.css +197 -197
  66. package/dist/components/chip/Chip.js +32 -32
  67. package/dist/components/chip/index.js +5 -7
  68. package/dist/components/close-button/CloseButton.css +81 -81
  69. package/dist/components/close-button/CloseButton.js +22 -22
  70. package/dist/components/close-button/index.js +2 -3
  71. package/dist/components/color-area/ColorArea.css +54 -54
  72. package/dist/components/color-area/ColorArea.js +13 -13
  73. package/dist/components/color-area/index.js +2 -2
  74. package/dist/components/color-field/ColorField.css +88 -88
  75. package/dist/components/color-field/ColorField.js +23 -23
  76. package/dist/components/color-field/index.js +2 -2
  77. package/dist/components/color-picker/ColorPicker.css +28 -28
  78. package/dist/components/color-picker/ColorPicker.js +44 -44
  79. package/dist/components/color-picker/index.js +2 -8
  80. package/dist/components/color-slider/ColorSlider.css +57 -57
  81. package/dist/components/color-slider/ColorSlider.js +21 -21
  82. package/dist/components/color-slider/index.js +2 -2
  83. package/dist/components/color-swatch/ColorSwatch.css +84 -84
  84. package/dist/components/color-swatch/ColorSwatch.js +14 -14
  85. package/dist/components/color-swatch/index.js +2 -2
  86. package/dist/components/color-swatch-picker/ColorSwatchPicker.css +12 -12
  87. package/dist/components/color-swatch-picker/ColorSwatchPicker.js +14 -14
  88. package/dist/components/color-swatch-picker/index.js +2 -5
  89. package/dist/components/color-wheel-flower/ColorWheelFlower.css +147 -147
  90. package/dist/components/color-wheel-flower/ColorWheelFlower.js +83 -83
  91. package/dist/components/color-wheel-flower/colorWheelFlowerContext.js +3 -3
  92. package/dist/components/color-wheel-flower/index.js +3 -6
  93. package/dist/components/combo-box/ComboBox.css +344 -344
  94. package/dist/components/combo-box/ComboBox.js +90 -90
  95. package/dist/components/combo-box/index.js +2 -10
  96. package/dist/components/date-field/DateField.css +215 -215
  97. package/dist/components/date-field/DateField.js +41 -41
  98. package/dist/components/date-field/index.js +2 -11
  99. package/dist/components/date-picker/DatePicker.css +143 -143
  100. package/dist/components/date-picker/DatePicker.js +40 -40
  101. package/dist/components/date-picker/index.js +2 -3
  102. package/dist/components/date-range-picker/DateRangePicker.css +149 -149
  103. package/dist/components/date-range-picker/DateRangePicker.js +55 -55
  104. package/dist/components/date-range-picker/index.js +2 -3
  105. package/dist/components/description/Description.css +10 -10
  106. package/dist/components/description/Description.js +9 -9
  107. package/dist/components/description/index.js +2 -5
  108. package/dist/components/disclosure/Disclosure.css +84 -84
  109. package/dist/components/disclosure/Disclosure.js +40 -40
  110. package/dist/components/disclosure/index.js +3 -9
  111. package/dist/components/disclosure-group/DisclosureGroup.css +9 -9
  112. package/dist/components/disclosure-group/DisclosureGroup.js +13 -13
  113. package/dist/components/disclosure-group/index.js +4 -6
  114. package/dist/components/disclosure-group/useDisclosureGroupNavigation.js +4 -4
  115. package/dist/components/drawer/Drawer.context.js +3 -3
  116. package/dist/components/drawer/Drawer.css +463 -463
  117. package/dist/components/drawer/Drawer.js +107 -107
  118. package/dist/components/drawer/index.js +2 -15
  119. package/dist/components/dropdown/Dropdown.css +211 -211
  120. package/dist/components/dropdown/Dropdown.js +66 -66
  121. package/dist/components/dropdown/index.js +2 -4
  122. package/dist/components/empty-state/EmptyState.css +39 -39
  123. package/dist/components/empty-state/EmptyState.js +25 -25
  124. package/dist/components/empty-state/index.js +2 -8
  125. package/dist/components/error-message/ErrorMessage.css +20 -20
  126. package/dist/components/error-message/ErrorMessage.js +12 -12
  127. package/dist/components/error-message/index.js +2 -5
  128. package/dist/components/field-error/FieldError.css +27 -27
  129. package/dist/components/field-error/FieldError.js +14 -14
  130. package/dist/components/field-error/index.js +2 -5
  131. package/dist/components/fieldset/Fieldset.css +30 -30
  132. package/dist/components/fieldset/Fieldset.js +21 -21
  133. package/dist/components/fieldset/index.js +2 -8
  134. package/dist/components/flex/Flex.css +5 -5
  135. package/dist/components/flex/Flex.js +14 -14
  136. package/dist/components/flex/index.js +2 -3
  137. package/dist/components/floating-dock/FloatingDock.css +208 -208
  138. package/dist/components/floating-dock/FloatingDock.js +76 -76
  139. package/dist/components/floating-dock/index.js +2 -3
  140. package/dist/components/footer/Footer.js +11 -11
  141. package/dist/components/footer/FooterTitle.js +9 -9
  142. package/dist/components/footer/footer.css +51 -51
  143. package/dist/components/footer/index.js +2 -3
  144. package/dist/components/form/FieldErrorMessage.js +8 -8
  145. package/dist/components/form/Form.css +5 -5
  146. package/dist/components/form/Form.js +21 -21
  147. package/dist/components/form/FormField.js +19 -19
  148. package/dist/components/form/FormSubmitButton.js +11 -11
  149. package/dist/components/form/index.js +5 -12
  150. package/dist/components/glass-panel/GlassPanel.css +359 -359
  151. package/dist/components/glass-panel/GlassPanel.js +29 -29
  152. package/dist/components/glass-panel/index.js +2 -3
  153. package/dist/components/glow-card/GlowCard.css +100 -100
  154. package/dist/components/glow-card/GlowCard.js +10 -10
  155. package/dist/components/glow-card/index.js +2 -3
  156. package/dist/components/grid/Grid.css +5 -5
  157. package/dist/components/grid/Grid.js +15 -15
  158. package/dist/components/grid/index.js +2 -3
  159. package/dist/components/header/Header.css +13 -13
  160. package/dist/components/header/Header.js +12 -12
  161. package/dist/components/header/index.js +2 -5
  162. package/dist/components/icon/Icon.css +10 -10
  163. package/dist/components/icon/Icon.js +8 -8
  164. package/dist/components/icon/index.js +2 -3
  165. package/dist/components/immersive-landing/ImmersiveLanding.css +565 -565
  166. package/dist/components/immersive-landing/ImmersiveLanding.js +44 -44
  167. package/dist/components/immersive-landing/ImmersiveLandingArrows.js +17 -17
  168. package/dist/components/immersive-landing/ImmersiveLandingContext.js +3 -3
  169. package/dist/components/immersive-landing/ImmersiveLandingNavigation.js +36 -36
  170. package/dist/components/immersive-landing/ImmersiveLandingPage.js +15 -15
  171. package/dist/components/immersive-landing/components/CookieConsent.js +71 -71
  172. package/dist/components/immersive-landing/components/FirefoxPWABanner.js +42 -42
  173. package/dist/components/immersive-landing/components/PWAInstallPrompt.js +40 -40
  174. package/dist/components/immersive-landing/index.js +7 -14
  175. package/dist/components/immersive-landing/useImmersiveLanding.js +7 -7
  176. package/dist/components/input/Input.css +155 -155
  177. package/dist/components/input/Input.js +48 -48
  178. package/dist/components/input/index.js +2 -2
  179. package/dist/components/input-group/InputGroup.css +172 -172
  180. package/dist/components/input-group/InputGroup.js +33 -33
  181. package/dist/components/input-group/index.js +2 -9
  182. package/dist/components/input-otp/InputOTP.css +170 -170
  183. package/dist/components/input-otp/InputOTP.js +48 -48
  184. package/dist/components/input-otp/index.js +2 -11
  185. package/dist/components/join/Join.js +14 -14
  186. package/dist/components/join/index.js +2 -3
  187. package/dist/components/kbd/Kbd.css +60 -60
  188. package/dist/components/kbd/Kbd.js +20 -20
  189. package/dist/components/kbd/index.js +2 -8
  190. package/dist/components/label/Label.css +30 -30
  191. package/dist/components/label/Label.js +9 -9
  192. package/dist/components/label/index.js +2 -5
  193. package/dist/components/language-switcher/LanguageSwitcher.css +56 -56
  194. package/dist/components/language-switcher/LanguageSwitcher.js +26 -26
  195. package/dist/components/language-switcher/createI18n.js +8 -8
  196. package/dist/components/language-switcher/index.js +3 -8
  197. package/dist/components/link/Link.css +131 -131
  198. package/dist/components/link/Link.js +22 -22
  199. package/dist/components/link/index.js +2 -5
  200. package/dist/components/list-box/ListBox.css +148 -148
  201. package/dist/components/list-box/ListBox.js +17 -17
  202. package/dist/components/list-box/ListBoxItem.js +32 -32
  203. package/dist/components/list-box/ListBoxSection.js +13 -13
  204. package/dist/components/list-box/context.js +2 -2
  205. package/dist/components/list-box/index.js +9 -15
  206. package/dist/components/live-chat/LiveChat.css +324 -324
  207. package/dist/components/live-chat/LiveChatBubble.js +27 -27
  208. package/dist/components/live-chat/LiveChatPanel.js +62 -62
  209. package/dist/components/live-chat/index.js +3 -5
  210. package/dist/components/menu/Menu.css +199 -199
  211. package/dist/components/menu/Menu.js +25 -30
  212. package/dist/components/menu/MenuItem.js +38 -38
  213. package/dist/components/menu/MenuSection.js +13 -13
  214. package/dist/components/menu/context.js +2 -2
  215. package/dist/components/menu/index.js +3 -12
  216. package/dist/components/meter/Meter.css +89 -89
  217. package/dist/components/meter/Meter.js +31 -31
  218. package/dist/components/meter/index.js +2 -8
  219. package/dist/components/modal/Modal.css +320 -320
  220. package/dist/components/modal/Modal.js +80 -80
  221. package/dist/components/modal/index.js +2 -13
  222. package/dist/components/navbar/Navbar.css +110 -110
  223. package/dist/components/navbar/Navbar.js +18 -18
  224. package/dist/components/navbar/NavbarRow.js +10 -10
  225. package/dist/components/navbar/NavbarSection.js +9 -9
  226. package/dist/components/navbar/NavbarStack.js +10 -10
  227. package/dist/components/navbar/index.js +2 -3
  228. package/dist/components/noise-background/NoiseBackground.css +66 -66
  229. package/dist/components/noise-background/NoiseBackground.js +35 -35
  230. package/dist/components/noise-background/index.js +2 -3
  231. package/dist/components/number-field/NumberField.css +198 -198
  232. package/dist/components/number-field/NumberField.js +42 -42
  233. package/dist/components/number-field/index.js +2 -9
  234. package/dist/components/pagination/Pagination.css +121 -121
  235. package/dist/components/pagination/Pagination.js +34 -34
  236. package/dist/components/pagination/index.js +2 -3
  237. package/dist/components/password-field/PasswordField.js +15 -15
  238. package/dist/components/password-field/index.js +2 -3
  239. package/dist/components/password-requirements/PasswordRequirements.js +24 -24
  240. package/dist/components/password-requirements/index.js +2 -3
  241. package/dist/components/password-rules/index.js +2 -4
  242. package/dist/components/popover/Popover.css +117 -117
  243. package/dist/components/popover/Popover.js +50 -50
  244. package/dist/components/popover/index.js +3 -9
  245. package/dist/components/progress-bar/ProgressBar.css +104 -104
  246. package/dist/components/progress-bar/ProgressBar.js +27 -27
  247. package/dist/components/progress-bar/index.js +2 -3
  248. package/dist/components/progress-circle/ProgressCircle.css +82 -82
  249. package/dist/components/progress-circle/ProgressCircle.js +32 -32
  250. package/dist/components/progress-circle/index.js +2 -3
  251. package/dist/components/radio/Radio.css +129 -129
  252. package/dist/components/radio/Radio.js +27 -27
  253. package/dist/components/radio/index.js +2 -3
  254. package/dist/components/radio-group/RadioGroup.css +58 -58
  255. package/dist/components/radio-group/RadioGroup.js +33 -33
  256. package/dist/components/radio-group/context.js +2 -2
  257. package/dist/components/radio-group/index.js +3 -4
  258. package/dist/components/range-calendar/RangeCalendar.css +51 -51
  259. package/dist/components/range-calendar/RangeCalendar.js +15 -15
  260. package/dist/components/range-calendar/index.js +2 -3
  261. package/dist/components/scroll-shadow/ScrollShadow.css +93 -93
  262. package/dist/components/scroll-shadow/ScrollShadow.js +19 -19
  263. package/dist/components/scroll-shadow/index.js +2 -3
  264. package/dist/components/scroll-shadow/useScrollShadow.js +3 -3
  265. package/dist/components/search-field/SearchField.css +183 -183
  266. package/dist/components/search-field/SearchField.js +38 -38
  267. package/dist/components/search-field/index.js +2 -9
  268. package/dist/components/select/Select.css +284 -284
  269. package/dist/components/select/Select.js +129 -129
  270. package/dist/components/select/index.js +2 -3
  271. package/dist/components/separator/Separator.css +35 -35
  272. package/dist/components/separator/Separator.js +11 -11
  273. package/dist/components/separator/index.js +2 -4
  274. package/dist/components/size-picker/SizePicker.js +17 -17
  275. package/dist/components/size-picker/index.js +3 -6
  276. package/dist/components/size-picker/sizeStore.js +3 -3
  277. package/dist/components/skeleton/Skeleton.css +95 -95
  278. package/dist/components/skeleton/Skeleton.js +8 -8
  279. package/dist/components/skeleton/index.js +2 -3
  280. package/dist/components/slider/Slider.css +122 -122
  281. package/dist/components/slider/Slider.js +26 -26
  282. package/dist/components/slider/index.js +2 -3
  283. package/dist/components/spinner/Spinner.css +131 -131
  284. package/dist/components/spinner/Spinner.js +19 -19
  285. package/dist/components/spinner/index.js +2 -5
  286. package/dist/components/surface/Surface.css +37 -37
  287. package/dist/components/surface/Surface.js +9 -9
  288. package/dist/components/surface/index.js +2 -4
  289. package/dist/components/table/ExpandToggle.js +14 -14
  290. package/dist/components/table/InlineConfirm.js +11 -11
  291. package/dist/components/table/MobileListView.js +24 -24
  292. package/dist/components/table/SortIcon.js +13 -13
  293. package/dist/components/table/Table.css +426 -426
  294. package/dist/components/table/Table.js +80 -80
  295. package/dist/components/table/VirtualSpacerRow.js +8 -8
  296. package/dist/components/table/index.js +8 -38
  297. package/dist/components/tabs/Tabs.css +203 -203
  298. package/dist/components/tabs/Tabs.js +59 -59
  299. package/dist/components/tabs/index.js +2 -4
  300. package/dist/components/tag/Tag.css +121 -121
  301. package/dist/components/tag/Tag.js +40 -40
  302. package/dist/components/tag/index.js +2 -6
  303. package/dist/components/tag-group/TagGroup.css +22 -22
  304. package/dist/components/tag-group/TagGroup.js +20 -20
  305. package/dist/components/tag-group/context.js +2 -2
  306. package/dist/components/tag-group/index.js +2 -6
  307. package/dist/components/text/Text.css +66 -66
  308. package/dist/components/text/Text.js +9 -9
  309. package/dist/components/text/index.js +2 -5
  310. package/dist/components/text-area/TextArea.css +95 -95
  311. package/dist/components/text-area/TextArea.js +10 -10
  312. package/dist/components/text-area/index.js +2 -5
  313. package/dist/components/text-field/TextField.css +33 -33
  314. package/dist/components/text-field/TextField.js +15 -15
  315. package/dist/components/text-field/index.js +2 -7
  316. package/dist/components/textarea/Textarea.js +11 -13
  317. package/dist/components/textarea/index.js +2 -6
  318. package/dist/components/theme-color-picker/ThemeColorPicker.js +49 -49
  319. package/dist/components/theme-color-picker/hueShift.js +3 -3
  320. package/dist/components/theme-color-picker/index.js +3 -7
  321. package/dist/components/time-field/TimeField.css +215 -215
  322. package/dist/components/time-field/TimeField.js +41 -41
  323. package/dist/components/time-field/index.js +2 -11
  324. package/dist/components/toast/Toast.css +344 -344
  325. package/dist/components/toast/Toast.js +98 -98
  326. package/dist/components/toast/index.js +2 -19
  327. package/dist/components/toggle/Toggle.css +237 -237
  328. package/dist/components/toggle/Toggle.js +31 -31
  329. package/dist/components/toggle/index.js +2 -3
  330. package/dist/components/toolbar/Toolbar.css +55 -55
  331. package/dist/components/toolbar/Toolbar.js +10 -10
  332. package/dist/components/toolbar/index.js +2 -5
  333. package/dist/components/tooltip/Tooltip.css +153 -153
  334. package/dist/components/tooltip/Tooltip.js +36 -36
  335. package/dist/components/tooltip/index.js +2 -7
  336. package/dist/components/utils.js +6 -7
  337. package/dist/components/video-preview/VideoPreview.js +15 -15
  338. package/dist/components/video-preview/index.js +2 -3
  339. package/dist/hooks/date/useCalendarNavigation.js +18 -18
  340. package/dist/hooks/date/useCalendarState.js +19 -19
  341. package/dist/hooks/date/useDateSelection.js +7 -7
  342. package/dist/hooks/date/usePickerOpenState.js +8 -8
  343. package/dist/hooks/date/useRangeSelection.js +16 -16
  344. package/dist/hooks/form/FormContext.js +3 -3
  345. package/dist/hooks/form/createForm.js +4 -4
  346. package/dist/hooks/form/index.js +5 -10
  347. package/dist/hooks/form/useFieldNew.js +10 -10
  348. package/dist/hooks/layout/index.js +2 -3
  349. package/dist/hooks/layout/useDesktop.js +4 -4
  350. package/dist/hooks/table/index.js +9 -18
  351. package/dist/hooks/table/useAnchoredOverlayPosition.js +4 -4
  352. package/dist/hooks/table/useTableExpansion.js +4 -4
  353. package/dist/hooks/table/useTableFiltering.js +8 -8
  354. package/dist/hooks/table/useTableModel.js +10 -10
  355. package/dist/hooks/table/useTablePagination.js +4 -4
  356. package/dist/hooks/table/useTableSelection.js +4 -4
  357. package/dist/hooks/table/useTableSorting.js +6 -6
  358. package/dist/index.css +74 -74
  359. package/dist/index.js +108 -398
  360. package/dist/lib/refs/index.js +2 -3
  361. package/dist/lib/refs/mergeRefs.js +2 -2
  362. package/dist/lib/style/index.js +2 -4
  363. package/dist/lib/tag/createIsButton.js +4 -4
  364. package/dist/lib/tag/createTagName.js +2 -2
  365. package/dist/lib/tag/index.js +3 -7
  366. package/dist/motion/engine.js +4 -4
  367. package/dist/motion/index.js +11 -39
  368. package/dist/motion/popmotion.js +2 -2
  369. package/dist/motion/presets.js +4 -4
  370. package/dist/motion/route.js +7 -7
  371. package/dist/motion/solid/AnimatedCollapse.js +27 -27
  372. package/dist/motion/solid/MotionDiv.js +13 -13
  373. package/dist/motion/solid/Presence.js +9 -9
  374. package/dist/motion/solid/index.js +4 -10
  375. package/dist/motion/system.js +9 -9
  376. package/dist/primitives/streaming/index.js +3 -5
  377. package/dist/primitives/streaming/useStreamingBuffer.js +2 -2
  378. package/dist/primitives/streaming/useStreamingSubscription.js +7 -7
  379. package/dist/primitives/virtualizer/index.js +2 -3
  380. package/dist/primitives/virtualizer/useVirtualRows.js +7 -7
  381. package/dist/purge-manifest.json +15599 -15825
  382. package/dist/styles/base/index.css +43 -43
  383. package/dist/styles/themes/dark.css +141 -141
  384. package/dist/styles/themes/light.css +143 -143
  385. package/package.json +41 -34
@@ -1,84 +1,84 @@
1
- @layer components {
2
- .color-swatch {
3
- position: relative;
4
- box-sizing: border-box;
5
- width: 2rem;
6
- height: 2rem;
7
- flex-shrink: 0;
8
- cursor: pointer;
9
- background:
10
- linear-gradient(var(--color-swatch-current), var(--color-swatch-current)),
11
- repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 1rem 1rem;
12
- box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.14);
13
- transition:
14
- transform 140ms ease,
15
- box-shadow 140ms ease,
16
- opacity 140ms ease;
17
- outline: none;
18
- }
19
-
20
- .color-swatch:hover:not([data-disabled="true"]) {
21
- transform: scale(1.03);
22
- }
23
-
24
- .color-swatch[data-selected="true"] {
25
- box-shadow:
26
- 0 0 0 2px var(--color-base-100),
27
- 0 0 0 4px var(--color-accent),
28
- inset 0 0 0 1px oklch(0% 0 0 / 0.14);
29
- }
30
-
31
- .color-swatch:focus-visible,
32
- .color-swatch[data-focus-visible="true"] {
33
- box-shadow:
34
- 0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent),
35
- inset 0 0 0 1px oklch(0% 0 0 / 0.14);
36
- }
37
-
38
- .color-swatch[data-selected="true"]:focus-visible,
39
- .color-swatch[data-selected="true"][data-focus-visible="true"] {
40
- box-shadow:
41
- 0 0 0 2px var(--color-base-100),
42
- 0 0 0 4px var(--color-accent),
43
- 0 0 0 7px color-mix(in oklab, var(--color-accent) 24%, transparent),
44
- inset 0 0 0 1px oklch(0% 0 0 / 0.14);
45
- }
46
-
47
- .color-swatch[data-disabled="true"] {
48
- cursor: not-allowed;
49
- opacity: 0.45;
50
- }
51
-
52
- .color-swatch--circle {
53
- border-radius: 9999px;
54
- }
55
-
56
- .color-swatch--square {
57
- border-radius: 0.5rem;
58
- }
59
-
60
- .color-swatch--xs {
61
- width: 1rem;
62
- height: 1rem;
63
- }
64
-
65
- .color-swatch--sm {
66
- width: 1.5rem;
67
- height: 1.5rem;
68
- }
69
-
70
- .color-swatch--md {
71
- width: 2rem;
72
- height: 2rem;
73
- }
74
-
75
- .color-swatch--lg {
76
- width: 2.25rem;
77
- height: 2.25rem;
78
- }
79
-
80
- .color-swatch--xl {
81
- width: 2.5rem;
82
- height: 2.5rem;
83
- }
84
- }
1
+ @layer components {
2
+ .color-swatch {
3
+ position: relative;
4
+ box-sizing: border-box;
5
+ width: 2rem;
6
+ height: 2rem;
7
+ flex-shrink: 0;
8
+ cursor: pointer;
9
+ background:
10
+ linear-gradient(var(--color-swatch-current), var(--color-swatch-current)),
11
+ repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 1rem 1rem;
12
+ box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.14);
13
+ transition:
14
+ transform 140ms ease,
15
+ box-shadow 140ms ease,
16
+ opacity 140ms ease;
17
+ outline: none;
18
+ }
19
+
20
+ .color-swatch:hover:not([data-disabled="true"]) {
21
+ transform: scale(1.03);
22
+ }
23
+
24
+ .color-swatch[data-selected="true"] {
25
+ box-shadow:
26
+ 0 0 0 2px var(--color-base-100),
27
+ 0 0 0 4px var(--color-accent),
28
+ inset 0 0 0 1px oklch(0% 0 0 / 0.14);
29
+ }
30
+
31
+ .color-swatch:focus-visible,
32
+ .color-swatch[data-focus-visible="true"] {
33
+ box-shadow:
34
+ 0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent),
35
+ inset 0 0 0 1px oklch(0% 0 0 / 0.14);
36
+ }
37
+
38
+ .color-swatch[data-selected="true"]:focus-visible,
39
+ .color-swatch[data-selected="true"][data-focus-visible="true"] {
40
+ box-shadow:
41
+ 0 0 0 2px var(--color-base-100),
42
+ 0 0 0 4px var(--color-accent),
43
+ 0 0 0 7px color-mix(in oklab, var(--color-accent) 24%, transparent),
44
+ inset 0 0 0 1px oklch(0% 0 0 / 0.14);
45
+ }
46
+
47
+ .color-swatch[data-disabled="true"] {
48
+ cursor: not-allowed;
49
+ opacity: 0.45;
50
+ }
51
+
52
+ .color-swatch--circle {
53
+ border-radius: 9999px;
54
+ }
55
+
56
+ .color-swatch--square {
57
+ border-radius: 0.5rem;
58
+ }
59
+
60
+ .color-swatch--xs {
61
+ width: 1rem;
62
+ height: 1rem;
63
+ }
64
+
65
+ .color-swatch--sm {
66
+ width: 1.5rem;
67
+ height: 1.5rem;
68
+ }
69
+
70
+ .color-swatch--md {
71
+ width: 2rem;
72
+ height: 2rem;
73
+ }
74
+
75
+ .color-swatch--lg {
76
+ width: 2.25rem;
77
+ height: 2.25rem;
78
+ }
79
+
80
+ .color-swatch--xl {
81
+ width: 2.5rem;
82
+ height: 2.5rem;
83
+ }
84
+ }
@@ -1,17 +1,17 @@
1
- import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
1
+ import { memo, mergeProps, spread, template } from "solid-js/web";
2
2
  import "./ColorSwatch.css";
3
- import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
4
- import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
5
- import * as __WEBPACK_EXTERNAL_MODULE__color_swatch_picker_ColorSwatchPicker_js_8e90244a__ from "../color-swatch-picker/ColorSwatchPicker.js";
6
- import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__ from "./ColorSwatch.classes.js";
7
- var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
3
+ import { splitProps, useContext } from "solid-js";
4
+ import { twMerge } from "tailwind-merge";
5
+ import { ColorSwatchPickerContext } from "../color-swatch-picker/ColorSwatchPicker.js";
6
+ import { CLASSES } from "./ColorSwatch.classes.js";
7
+ var _tmpl$ = /*#__PURE__*/ template("<button>");
8
8
  const invokeEventHandler = (handler, event)=>{
9
9
  if ("function" == typeof handler) return void handler(event);
10
10
  if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
11
11
  };
12
- const ColorSwatch = (props)=>{
13
- const picker = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__color_swatch_picker_ColorSwatchPicker_js_8e90244a__.ColorSwatchPickerContext);
14
- const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
12
+ const ColorSwatch_ColorSwatch = (props)=>{
13
+ const picker = useContext(ColorSwatchPickerContext);
14
+ const [local, others] = splitProps(props, [
15
15
  "class",
16
16
  "className",
17
17
  "color",
@@ -78,10 +78,10 @@ const ColorSwatch = (props)=>{
78
78
  };
79
79
  return (()=>{
80
80
  var _el$ = _tmpl$();
81
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
81
+ spread(_el$, mergeProps(others, {
82
82
  type: "button",
83
83
  get ["class"] () {
84
- return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.shape[shape()], __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.size[size()], local.class, local.className);
84
+ return twMerge(CLASSES.base, CLASSES.shape[shape()], CLASSES.size[size()], local.class, local.className);
85
85
  },
86
86
  get ["data-theme"] () {
87
87
  return local.dataTheme;
@@ -115,7 +115,7 @@ const ColorSwatch = (props)=>{
115
115
  return isSelected() ? "true" : "false";
116
116
  },
117
117
  get ["aria-checked"] () {
118
- return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isInsidePicker())() ? isSelected() ? "true" : "false" : void 0;
118
+ return memo(()=>!!isInsidePicker())() ? isSelected() ? "true" : "false" : void 0;
119
119
  },
120
120
  get ["aria-disabled"] () {
121
121
  return isDisabled() ? "true" : "false";
@@ -129,5 +129,5 @@ const ColorSwatch = (props)=>{
129
129
  return _el$;
130
130
  })();
131
131
  };
132
- const color_swatch_ColorSwatch = ColorSwatch;
133
- export { color_swatch_ColorSwatch as default };
132
+ const ColorSwatch = ColorSwatch_ColorSwatch;
133
+ export { ColorSwatch as default };
@@ -1,3 +1,3 @@
1
- import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatch_js_d7c5f616__ from "./ColorSwatch.js";
2
- const color_swatch = __WEBPACK_EXTERNAL_MODULE__ColorSwatch_js_d7c5f616__["default"];
1
+ import external_ColorSwatch_js_default from "./ColorSwatch.js";
2
+ const color_swatch = external_ColorSwatch_js_default;
3
3
  export { color_swatch as default };
@@ -1,12 +1,12 @@
1
- @layer components {
2
- .color-swatch-picker {
3
- display: inline-flex;
4
- flex-wrap: wrap;
5
- align-items: center;
6
- gap: 0.5rem;
7
- }
8
-
9
- .color-swatch-picker[data-disabled="true"] {
10
- opacity: 0.7;
11
- }
12
- }
1
+ @layer components {
2
+ .color-swatch-picker {
3
+ display: inline-flex;
4
+ flex-wrap: wrap;
5
+ align-items: center;
6
+ gap: 0.5rem;
7
+ }
8
+
9
+ .color-swatch-picker[data-disabled="true"] {
10
+ opacity: 0.7;
11
+ }
12
+ }
@@ -1,16 +1,16 @@
1
- import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
1
+ import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
2
2
  import "./ColorSwatchPicker.css";
3
- import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
4
- import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
5
- import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_classes_js_3ef482a8__ from "./ColorSwatchPicker.classes.js";
6
- var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
3
+ import { createContext, createMemo, createSignal, splitProps } from "solid-js";
4
+ import { twMerge } from "tailwind-merge";
5
+ import { CLASSES } from "./ColorSwatchPicker.classes.js";
6
+ var _tmpl$ = /*#__PURE__*/ template("<div>");
7
7
  const invokeEventHandler = (handler, event)=>{
8
8
  if ("function" == typeof handler) return void handler(event);
9
9
  if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
10
10
  };
11
- const ColorSwatchPickerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
11
+ const ColorSwatchPickerContext = createContext();
12
12
  const ColorSwatchPicker = (props)=>{
13
- const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
13
+ const [local, others] = splitProps(props, [
14
14
  "class",
15
15
  "className",
16
16
  "children",
@@ -22,7 +22,7 @@ const ColorSwatchPicker = (props)=>{
22
22
  "role",
23
23
  "onKeyDown"
24
24
  ]);
25
- const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultValue);
25
+ const [internalValue, setInternalValue] = createSignal(local.defaultValue);
26
26
  let rootRef;
27
27
  const isControlled = ()=>void 0 !== local.value;
28
28
  const currentValue = ()=>isControlled() ? local.value : internalValue();
@@ -70,21 +70,21 @@ const ColorSwatchPicker = (props)=>{
70
70
  const nextColor = nextItem.dataset.colorValue;
71
71
  if (nextColor) setValue(nextColor);
72
72
  };
73
- const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
73
+ const context = createMemo(()=>({
74
74
  value: currentValue,
75
75
  isDisabled,
76
76
  select: setValue
77
77
  }));
78
- return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorSwatchPickerContext.Provider, {
78
+ return createComponent(ColorSwatchPickerContext.Provider, {
79
79
  get value () {
80
80
  return context();
81
81
  },
82
82
  get children () {
83
83
  var _el$ = _tmpl$();
84
84
  var _ref$ = rootRef;
85
- "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : rootRef = _el$;
86
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
87
- class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_classes_js_3ef482a8__.CLASSES.base, local.class, local.className)
85
+ "function" == typeof _ref$ ? use(_ref$, _el$) : rootRef = _el$;
86
+ spread(_el$, mergeProps(others, ()=>({
87
+ class: twMerge(CLASSES.base, local.class, local.className)
88
88
  }), {
89
89
  get ["data-theme"] () {
90
90
  return local.dataTheme;
@@ -101,7 +101,7 @@ const ColorSwatchPicker = (props)=>{
101
101
  },
102
102
  onKeyDown: handleKeyDown
103
103
  }), false, true);
104
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
104
+ insert(_el$, ()=>local.children);
105
105
  return _el$;
106
106
  }
107
107
  });
@@ -1,5 +1,2 @@
1
- import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_js_02e27c6a__ from "./ColorSwatchPicker.js";
2
- var __webpack_exports__ColorSwatchPicker = __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_js_02e27c6a__.ColorSwatchPicker;
3
- var __webpack_exports__ColorSwatchPickerContext = __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_js_02e27c6a__.ColorSwatchPickerContext;
4
- var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_js_02e27c6a__["default"];
5
- export { __webpack_exports__ColorSwatchPicker as ColorSwatchPicker, __webpack_exports__ColorSwatchPickerContext as ColorSwatchPickerContext, __webpack_exports__default as default };
1
+ import external_ColorSwatchPicker_js_default, { ColorSwatchPicker, ColorSwatchPickerContext } from "./ColorSwatchPicker.js";
2
+ export { ColorSwatchPicker, ColorSwatchPickerContext, external_ColorSwatchPicker_js_default as default };
@@ -1,147 +1,147 @@
1
- @layer components {
2
- .color-wheel-flower {
3
- position: relative;
4
- width: 190px;
5
- height: 190px;
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- }
10
-
11
- .color-wheel-flower--disabled {
12
- opacity: 0.5;
13
- cursor: not-allowed;
14
- }
15
-
16
- .color-wheel-flower__rings {
17
- position: absolute;
18
- inset: 0;
19
- pointer-events: none;
20
- }
21
-
22
- .color-wheel-flower__ring-shell {
23
- position: absolute;
24
- inset: 0;
25
- }
26
-
27
- .color-wheel-flower__ring-shell--outer {
28
- transform: scale(1.1);
29
- }
30
-
31
- .color-wheel-flower__ring-shell--inner {
32
- transform: scale(0.9);
33
- }
34
-
35
- .color-wheel-flower__ring {
36
- position: absolute;
37
- inset: 0;
38
- border-radius: 9999px;
39
- }
40
-
41
- .color-wheel-flower__ring--outer {
42
- will-change: transform, opacity, box-shadow, background;
43
- }
44
-
45
- .color-wheel-flower__ring--inner {
46
- background: #0b1012;
47
- }
48
-
49
- .color-wheel-flower__picker {
50
- position: relative;
51
- z-index: 10;
52
- width: calc(100% - 5px);
53
- height: calc(100% - 5px);
54
- border-radius: 9999px;
55
- display: block;
56
- }
57
-
58
- .color-wheel-flower__dot {
59
- position: absolute;
60
- transform: translate(-50%, -50%);
61
- }
62
-
63
- .color-wheel-flower__dot-frame {
64
- position: relative;
65
- width: 32px;
66
- height: 32px;
67
- }
68
-
69
- .color-wheel-flower__dot-motion {
70
- position: relative;
71
- width: 100%;
72
- height: 100%;
73
- will-change: transform, opacity;
74
- }
75
-
76
- .color-wheel-flower__halo {
77
- position: absolute;
78
- top: -5px;
79
- left: -5px;
80
- right: -5px;
81
- bottom: -5px;
82
- border-radius: 9999px;
83
- pointer-events: none;
84
- background: radial-gradient(
85
- circle,
86
- rgb(255 255 255 / 25%) 0%,
87
- rgb(255 255 255 / 0%) 70%
88
- );
89
- }
90
-
91
- .color-wheel-flower__swatch {
92
- position: relative !important;
93
- z-index: 10;
94
- width: 100% !important;
95
- height: 100% !important;
96
- border-radius: 9999px !important;
97
- background: var(--color-swatch-current) !important;
98
- transform: none !important;
99
- box-shadow: 0 2px 8px rgb(0 0 0 / 25%) !important;
100
- transition: box-shadow 200ms ease-out, opacity 140ms ease-out !important;
101
- }
102
-
103
- .color-wheel-flower__swatch:hover:not([data-disabled="true"]) {
104
- transform: none !important;
105
- box-shadow: 0 3px 10px rgb(0 0 0 / 25%) !important;
106
- }
107
-
108
- .color-wheel-flower__swatch[data-selected="true"] {
109
- box-shadow:
110
- 0 0 0 2px rgb(255 255 255 / 55%),
111
- 0 3px 10px rgb(0 0 0 / 25%) !important;
112
- }
113
-
114
- .color-wheel-flower__swatch:focus-visible,
115
- .color-wheel-flower__swatch[data-focus-visible="true"] {
116
- box-shadow:
117
- 0 0 0 2px rgb(255 255 255 / 50%),
118
- 0 3px 10px rgb(0 0 0 / 25%) !important;
119
- }
120
-
121
- .color-wheel-flower__swatch--center {
122
- box-shadow:
123
- inset 0 0 0 1px rgb(0 0 0 / 30%),
124
- 0 2px 8px rgb(0 0 0 / 25%) !important;
125
- }
126
-
127
- .color-wheel-flower__highlight {
128
- position: absolute;
129
- inset: 0;
130
- border-radius: 9999px;
131
- border: 2px solid rgb(255 255 255 / 100%);
132
- mix-blend-mode: overlay;
133
- pointer-events: none;
134
- opacity: 0;
135
- transition: opacity 300ms ease-out, box-shadow 300ms ease-out;
136
- }
137
-
138
- .color-wheel-flower__highlight--hovered {
139
- opacity: 0.75;
140
- box-shadow: 0 0 6px rgb(255 255 255 / 45%);
141
- }
142
-
143
- .color-wheel-flower__highlight--pulsing {
144
- opacity: 0.45;
145
- box-shadow: 0 0 4px rgb(255 255 255 / 35%);
146
- }
147
- }
1
+ @layer components {
2
+ .color-wheel-flower {
3
+ position: relative;
4
+ width: 190px;
5
+ height: 190px;
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ }
10
+
11
+ .color-wheel-flower--disabled {
12
+ opacity: 0.5;
13
+ cursor: not-allowed;
14
+ }
15
+
16
+ .color-wheel-flower__rings {
17
+ position: absolute;
18
+ inset: 0;
19
+ pointer-events: none;
20
+ }
21
+
22
+ .color-wheel-flower__ring-shell {
23
+ position: absolute;
24
+ inset: 0;
25
+ }
26
+
27
+ .color-wheel-flower__ring-shell--outer {
28
+ transform: scale(1.1);
29
+ }
30
+
31
+ .color-wheel-flower__ring-shell--inner {
32
+ transform: scale(0.9);
33
+ }
34
+
35
+ .color-wheel-flower__ring {
36
+ position: absolute;
37
+ inset: 0;
38
+ border-radius: 9999px;
39
+ }
40
+
41
+ .color-wheel-flower__ring--outer {
42
+ will-change: transform, opacity, box-shadow, background;
43
+ }
44
+
45
+ .color-wheel-flower__ring--inner {
46
+ background: #0b1012;
47
+ }
48
+
49
+ .color-wheel-flower__picker {
50
+ position: relative;
51
+ z-index: 10;
52
+ width: calc(100% - 5px);
53
+ height: calc(100% - 5px);
54
+ border-radius: 9999px;
55
+ display: block;
56
+ }
57
+
58
+ .color-wheel-flower__dot {
59
+ position: absolute;
60
+ transform: translate(-50%, -50%);
61
+ }
62
+
63
+ .color-wheel-flower__dot-frame {
64
+ position: relative;
65
+ width: 32px;
66
+ height: 32px;
67
+ }
68
+
69
+ .color-wheel-flower__dot-motion {
70
+ position: relative;
71
+ width: 100%;
72
+ height: 100%;
73
+ will-change: transform, opacity;
74
+ }
75
+
76
+ .color-wheel-flower__halo {
77
+ position: absolute;
78
+ top: -5px;
79
+ left: -5px;
80
+ right: -5px;
81
+ bottom: -5px;
82
+ border-radius: 9999px;
83
+ pointer-events: none;
84
+ background: radial-gradient(
85
+ circle,
86
+ rgb(255 255 255 / 25%) 0%,
87
+ rgb(255 255 255 / 0%) 70%
88
+ );
89
+ }
90
+
91
+ .color-wheel-flower__swatch {
92
+ position: relative !important;
93
+ z-index: 10;
94
+ width: 100% !important;
95
+ height: 100% !important;
96
+ border-radius: 9999px !important;
97
+ background: var(--color-swatch-current) !important;
98
+ transform: none !important;
99
+ box-shadow: 0 2px 8px rgb(0 0 0 / 25%) !important;
100
+ transition: box-shadow 200ms ease-out, opacity 140ms ease-out !important;
101
+ }
102
+
103
+ .color-wheel-flower__swatch:hover:not([data-disabled="true"]) {
104
+ transform: none !important;
105
+ box-shadow: 0 3px 10px rgb(0 0 0 / 25%) !important;
106
+ }
107
+
108
+ .color-wheel-flower__swatch[data-selected="true"] {
109
+ box-shadow:
110
+ 0 0 0 2px rgb(255 255 255 / 55%),
111
+ 0 3px 10px rgb(0 0 0 / 25%) !important;
112
+ }
113
+
114
+ .color-wheel-flower__swatch:focus-visible,
115
+ .color-wheel-flower__swatch[data-focus-visible="true"] {
116
+ box-shadow:
117
+ 0 0 0 2px rgb(255 255 255 / 50%),
118
+ 0 3px 10px rgb(0 0 0 / 25%) !important;
119
+ }
120
+
121
+ .color-wheel-flower__swatch--center {
122
+ box-shadow:
123
+ inset 0 0 0 1px rgb(0 0 0 / 30%),
124
+ 0 2px 8px rgb(0 0 0 / 25%) !important;
125
+ }
126
+
127
+ .color-wheel-flower__highlight {
128
+ position: absolute;
129
+ inset: 0;
130
+ border-radius: 9999px;
131
+ border: 2px solid rgb(255 255 255 / 100%);
132
+ mix-blend-mode: overlay;
133
+ pointer-events: none;
134
+ opacity: 0;
135
+ transition: opacity 300ms ease-out, box-shadow 300ms ease-out;
136
+ }
137
+
138
+ .color-wheel-flower__highlight--hovered {
139
+ opacity: 0.75;
140
+ box-shadow: 0 0 6px rgb(255 255 255 / 45%);
141
+ }
142
+
143
+ .color-wheel-flower__highlight--pulsing {
144
+ opacity: 0.45;
145
+ box-shadow: 0 0 4px rgb(255 255 255 / 35%);
146
+ }
147
+ }