@designcrowd/fe-shared-lib 1.5.23 → 1.6.0
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.
- package/.claude/settings.local.json +23 -1
- package/.storybook/main.ts +5 -2
- package/.storybook-static/assets/Auth-DT64t5h-.css +1 -0
- package/.storybook-static/assets/Auth.stories-C6eXcTSu.js +490 -0
- package/.storybook-static/assets/AuthCrazyDomains.stories-DGvEoWCa.js +73 -0
- package/.storybook-static/assets/Button-5UzSGUF6.css +1 -0
- package/.storybook-static/assets/Button-DKdQT6Fq.js +1 -0
- package/.storybook-static/assets/ButtonGroup-DDPXuhxR.css +1 -0
- package/.storybook-static/assets/ButtonGroup.stories-DlrYMRSk.js +504 -0
- package/.storybook-static/assets/ButtonPrimary-Bu6bXb_c.css +1 -0
- package/.storybook-static/assets/ButtonPrimary-BvWW6Duz.js +1 -0
- package/.storybook-static/assets/Buttons.stories-CKmd6hkZ.js +761 -0
- package/.storybook-static/assets/ButtonsCrazyDomains.stories-DdEuOUrn.js +199 -0
- package/.storybook-static/assets/Checkbox.mixin-DkHpdvGa.js +1 -0
- package/.storybook-static/assets/Checkbox.stories-DPBUC2Mx.js +246 -0
- package/.storybook-static/assets/Checktile.stories-ByaFwplD.js +88 -0
- package/.storybook-static/assets/CollapsiblePanel.stories-Y6q3gP9j.js +56 -0
- package/.storybook-static/assets/ColorPicker.stories-DdxPUB_R.js +73 -0
- package/.storybook-static/assets/CopyToClipboardText.stories-J9qndWxd.js +32 -0
- package/.storybook-static/assets/Dropdown.stories-1zKPATii.js +159 -0
- package/.storybook-static/assets/DropdownItem-BV-BdThU.css +1 -0
- package/.storybook-static/assets/DropdownItem-DA6TdpDb.js +1 -0
- package/.storybook-static/assets/FormControl.mixin-DcEBwrV3.js +1 -0
- package/.storybook-static/assets/HashRouteModal.stories-BGxvqE22.js +60 -0
- package/.storybook-static/assets/HelloBar-CYEZR2kQ.js +1 -0
- package/.storybook-static/assets/HelloBar.stories-597Kxj0W.js +342 -0
- package/.storybook-static/assets/Icon-C17LFvsP.js +145 -0
- package/.storybook-static/assets/Icon.stories-B9iAmcTU.js +151 -0
- package/.storybook-static/assets/Icon.stories-CR5vT9H7.js +791 -0
- package/.storybook-static/assets/Loader-BWGoT_xC.js +1 -0
- package/.storybook-static/assets/LogoBusinessBrandColours-CExzox1Z.js +1 -0
- package/.storybook-static/assets/LogoBusinessBrandColours-CeAaMKke.css +1 -0
- package/.storybook-static/assets/LogoBusinessBrandColours.stories-kuxAH8B8.js +36 -0
- package/.storybook-static/assets/Masonry-C2MNiGg0.css +1 -0
- package/.storybook-static/assets/Masonry.stories-CTXJLQ_i.js +71 -0
- package/.storybook-static/assets/Modal-CGwEIF5R.css +1 -0
- package/.storybook-static/assets/Modal-CydTNprT.js +1 -0
- package/.storybook-static/assets/Modal.stories-DZiG5NGM.js +345 -0
- package/.storybook-static/assets/Notice.stories-ChOj8CWm.js +222 -0
- package/.storybook-static/assets/NumberStepper-Blffv09R.css +1 -0
- package/.storybook-static/assets/NumberStepper.stories-CVbKJ_oJ.js +64 -0
- package/.storybook-static/assets/PaymentConfigList-BpUMV6cp.css +1 -0
- package/.storybook-static/assets/PaymentConfigList.stories-DUD7OZBS.js +130 -0
- package/.storybook-static/assets/Picture-B8m1I9xN.js +1 -0
- package/.storybook-static/assets/Picture.stories-MMzybhJ6.js +119 -0
- package/.storybook-static/assets/Pill-DLXZ_TL8.js +1 -0
- package/.storybook-static/assets/Pill.stories-DCP7szJm.js +18 -0
- package/.storybook-static/assets/PillBar-os4mJV3M.css +1 -0
- package/.storybook-static/assets/PillBar.stories-Bry-zQ6f.js +41 -0
- package/.storybook-static/assets/Price-C4GZbDSa.js +1 -0
- package/.storybook-static/assets/Price.stories-CMHly9V0.js +337 -0
- package/.storybook-static/assets/PromoCard.stories-xsbFtADE.js +299 -0
- package/.storybook-static/assets/PublishBrandPageModal-Q9-mNG1q.css +1 -0
- package/.storybook-static/assets/PublishBrandPageModal.stories-C9XzW_1m.js +324 -0
- package/.storybook-static/assets/SearchBar.stories-DaIneOSz.js +12 -0
- package/.storybook-static/assets/Select-DnioWQmi.css +1 -0
- package/.storybook-static/assets/Select.stories-BmGYB4pw.js +108 -0
- package/.storybook-static/assets/SellDomainNameList.fixtures-LC6fjr_b.js +1 -0
- package/.storybook-static/assets/SellDomainNameListModal-DH6khE10.css +1 -0
- package/.storybook-static/assets/SellDomainNameListModal-ymtVclFP.js +1 -0
- package/.storybook-static/assets/SellDomainNameListModal.stories-DvGvylgx.js +71 -0
- package/.storybook-static/assets/SellDomainNameListSearchResult-Cpxq0jDA.css +1 -0
- package/.storybook-static/assets/SellDomainNameListSearchResult-D-1CrQyf.js +1 -0
- package/.storybook-static/assets/SellDomainNameSearchWithResults-bX--zu97.js +1 -0
- package/.storybook-static/assets/SellDomainNameSearchWithResults.stories-DRUJjSdH.js +37 -0
- package/.storybook-static/assets/SellDomainNameWidget.stories-CC3LX10s.js +36 -0
- package/.storybook-static/assets/SignIn-CPjf8_2O.css +1 -0
- package/.storybook-static/assets/SignIn-DI0DSDFe.js +1 -0
- package/.storybook-static/assets/Slider-Cog2FFdj.css +1 -0
- package/.storybook-static/assets/Slider.stories-B2KGwnJy.js +141 -0
- package/.storybook-static/assets/SparkleIcon.stories-Dk904hVE.js +547 -0
- package/.storybook-static/assets/StarRating-BtKh7pzm.css +1 -0
- package/.storybook-static/assets/StarRating.stories-d2mgOuo2.js +45 -0
- package/.storybook-static/assets/TabMenu.stories-Cg2yenqj.js +47 -0
- package/.storybook-static/assets/TextCopyField-B66NKTk_.js +1 -0
- package/.storybook-static/assets/TextCopyField.stories-B4_ZlfLU.js +47 -0
- package/.storybook-static/assets/TextInput-CMoUjT_5.js +1 -0
- package/.storybook-static/assets/TextInput.stories-oyyxxf3j.js +233 -0
- package/.storybook-static/assets/Textarea.stories-BvhZR6K2.js +207 -0
- package/.storybook-static/assets/Toggle.stories-yT5-rL2k.js +161 -0
- package/.storybook-static/assets/Tooltip-DyXIgFQH.css +1 -0
- package/.storybook-static/assets/Tooltip-ZukyujG5.js +1 -0
- package/.storybook-static/assets/Tooltip.stories-sJFylRS_.js +953 -0
- package/.storybook-static/assets/UploadYourLogoApplication-Dmw8QcH3.css +1 -0
- package/.storybook-static/assets/UploadYourLogoApplication.stories-C9AvzHO_.js +186 -0
- package/.storybook-static/assets/UploadYourLogoDropzone-B1ffcicv.js +24 -0
- package/.storybook-static/assets/UploadYourLogoDropzone-DQqACf-e.css +1 -0
- package/.storybook-static/assets/UploadYourLogoDropzone.stories-D1Dt2ord.js +55 -0
- package/.storybook-static/assets/UploadedLogoSearchResultCard.stories-D8oF1Yrx.js +79 -0
- package/.storybook-static/assets/WebsiteContextualUpgradeModal-8u1zOZrW.css +1 -0
- package/.storybook-static/assets/WebsiteContextualUpgradeModal.stories-mtcvWOAg.js +211 -0
- package/.storybook-static/assets/_commonjsHelpers-CE1G-McA.js +1 -0
- package/.storybook-static/assets/_plugin-vue_export-helper-DlAUqK2U.js +1 -0
- package/.storybook-static/assets/api-lSJGRrF2.js +1 -0
- package/.storybook-static/assets/axe-DrS73Vi2.js +20 -0
- package/.storybook-static/assets/brand-crowd-api.client-D45NKshX.js +1 -0
- package/.storybook-static/assets/bundled-translations-BoWhEDU_.js +1 -0
- package/.storybook-static/assets/bundled-translations.de-DE-C4lqla4O.js +1 -0
- package/.storybook-static/assets/bundled-translations.es-ES-BxMIllUH.js +1 -0
- package/.storybook-static/assets/bundled-translations.fr-CA-MxZpyz0w.js +1 -0
- package/.storybook-static/assets/bundled-translations.fr-FR-N7UPCZVr.js +1 -0
- package/.storybook-static/assets/bundled-translations.pt-BR-C8tscYuG.js +1 -0
- package/.storybook-static/assets/bundled-translations.pt-PT-Dszj5Xfa.js +1 -0
- package/.storybook-static/assets/carousel-BelyIYOK.css +1 -0
- package/.storybook-static/assets/carousel.stories-CJw3-Iy6.js +668 -0
- package/.storybook-static/assets/event-constants-CMO9VQVu.js +1 -0
- package/.storybook-static/assets/iframe-B3A6OXQU.js +1104 -0
- package/.storybook-static/assets/index-B-eiLVzF.js +7 -0
- package/.storybook-static/assets/index-QquxUozE.js +6 -0
- package/.storybook-static/assets/matchers-5TDFFDYO-HJu_DfWo.js +14 -0
- package/.storybook-static/assets/mediaQueryMixin-CISNqd93.js +1 -0
- package/.storybook-static/assets/preload-helper-PPVm8Dsz.js +1 -0
- package/.storybook-static/assets/tracking-ATsLLehC.js +1 -0
- package/.storybook-static/css/tailwind-brandCrowd.css +2508 -0
- package/.storybook-static/css/tailwind-brandPage.css +2188 -0
- package/.storybook-static/css/tailwind-crazyDomains.css +2508 -0
- package/.storybook-static/css/tailwind-designCom.css +2508 -0
- package/.storybook-static/css/tailwind-designCrowd.css +2508 -0
- package/.storybook-static/favicon-wrapper.svg +46 -0
- package/.storybook-static/favicon.svg +1 -0
- package/.storybook-static/iframe.html +713 -0
- package/.storybook-static/index.html +148 -0
- package/.storybook-static/index.json +1 -0
- package/.storybook-static/nunito-sans-bold-italic.woff2 +0 -0
- package/.storybook-static/nunito-sans-bold.woff2 +0 -0
- package/.storybook-static/nunito-sans-italic.woff2 +0 -0
- package/.storybook-static/nunito-sans-regular.woff2 +0 -0
- package/.storybook-static/project.json +1 -0
- package/.storybook-static/sb-addons/a11y-1/manager-bundle.js +57 -0
- package/.storybook-static/sb-addons/links-2/manager-bundle.js +3 -0
- package/.storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +628 -0
- package/.storybook-static/sb-addons/themes-3/manager-bundle.js +3 -0
- package/.storybook-static/sb-common-assets/favicon-wrapper.svg +46 -0
- package/.storybook-static/sb-common-assets/favicon.svg +1 -0
- package/.storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/.storybook-static/sb-manager/globals-runtime.js +77935 -0
- package/.storybook-static/sb-manager/globals.js +24 -0
- package/.storybook-static/sb-manager/manager-stores.js +23 -0
- package/.storybook-static/sb-manager/runtime.js +20404 -0
- package/.storybook-static/vite-inject-mocker-entry.js +2 -0
- package/CLAUDE.md +2 -4
- package/Dockerfile +1 -1
- package/dist/css/tailwind-brandCrowd.css +2599 -0
- package/dist/css/tailwind-brandPage.css +2279 -0
- package/dist/css/tailwind-crazyDomains.css +2599 -0
- package/dist/css/tailwind-designCom.css +2599 -0
- package/dist/css/tailwind-designCrowd.css +2599 -0
- package/docs/plans/2026-01-30-upgrade-vite7-storybook10-design.md +177 -0
- package/docs/plans/2026-01-30-upgrade-vite7-storybook10.md +388 -0
- package/package.json +32 -36
- package/public/css/tailwind-brandCrowd.css +2508 -0
- package/public/css/tailwind-brandPage.css +2188 -0
- package/public/css/tailwind-crazyDomains.css +2508 -0
- package/public/css/tailwind-designCom.css +2508 -0
- package/public/css/tailwind-designCrowd.css +2508 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue +2 -2
- package/vite.config.ts +0 -4
|
@@ -0,0 +1,547 @@
|
|
|
1
|
+
import{d as P,w as B,I as V,c as v,e as r,g as N,F as T,r as R,n as q,b as E,s as i,q as D,o as u}from"./iframe-B3A6OXQU.js";import"./preload-helper-PPVm8Dsz.js";const W=[["M12.5 10C12.5 9.80469 12.4121 9.6582 12.2363 9.56055L8.95508 7.91992L7.28516 4.60938C7.20703 4.45312 7.07031 4.375 6.875 4.375C6.67969 4.375 6.54297 4.45312 6.46484 4.60938L4.79492 7.91992L1.51367 9.56055C1.33789 9.6582 1.25 9.80469 1.25 10C1.25 10.1953 1.33789 10.332 1.51367 10.4102L4.79492 12.0508L6.46484 15.3613C6.54297 15.5371 6.67969 15.625 6.875 15.625C7.07031 15.625 7.20703 15.5371 7.28516 15.3613L8.95508 12.0508L12.2363 10.4102C12.4121 10.332 12.5 10.1953 12.5 10Z","M11.5625 5.3125C11.5625 5.3776 11.5885 5.42318 11.6406 5.44922L12.8125 5.9375L13.3008 7.10938C13.3268 7.16146 13.3724 7.1875 13.4375 7.1875C13.5026 7.1875 13.5482 7.16146 13.5742 7.10938L14.0625 5.9375L15.2344 5.44922C15.2865 5.42318 15.3125 5.3776 15.3125 5.3125C15.3125 5.2474 15.2865 5.20182 15.2344 5.17578L14.0625 4.6875L13.5742 3.51562C13.5482 3.46354 13.5026 3.4375 13.4375 3.4375C13.3724 3.4375 13.3268 3.46354 13.3008 3.51562L12.8125 4.6875L11.6406 5.17578C11.5885 5.20182 11.5625 5.2474 11.5625 5.3125Z","M15.3125 14.6875C15.3125 14.6224 15.2865 14.5768 15.2344 14.5508L14.0625 14.0625L13.5742 12.8906C13.5482 12.8385 13.5026 12.8125 13.4375 12.8125C13.3724 12.8125 13.3268 12.8385 13.3008 12.8906L12.8125 14.0625L11.6406 14.5508C11.5885 14.5768 11.5625 14.6224 11.5625 14.6875C11.5625 14.7526 11.5885 14.7982 11.6406 14.8242L12.8125 15.3125L13.3008 16.4844C13.3268 16.5365 13.3724 16.5625 13.4375 16.5625C13.5026 16.5625 13.5482 16.5365 13.5742 16.4844L14.0625 15.3125L15.2344 14.8242C15.2865 14.7982 15.3125 14.7526 15.3125 14.6875Z"],["M13.125 10C13.125 9.78299 13.0273 9.62023 12.832 9.51172L9.1862 7.6888L7.33073 4.01042C7.24392 3.83681 7.09201 3.75 6.875 3.75C6.65799 3.75 6.50608 3.83681 6.41927 4.01042L4.5638 7.6888L0.917969 9.51172C0.722656 9.62023 0.625 9.78299 0.625 10C0.625 10.217 0.722656 10.3689 0.917969 10.4557L4.5638 12.2786L6.41927 15.957C6.50608 16.1523 6.65799 16.25 6.875 16.25C7.09201 16.25 7.24392 16.1523 7.33073 15.957L9.1862 12.2786L12.832 10.4557C13.0273 10.3689 13.125 10.217 13.125 10Z","M12.5 5.3125C12.5 5.34505 12.513 5.36784 12.5391 5.38086L13.125 5.625L13.3691 6.21094C13.3822 6.23698 13.4049 6.25 13.4375 6.25C13.4701 6.25 13.4928 6.23698 13.5059 6.21094L13.75 5.625L14.3359 5.38086C14.362 5.36784 14.375 5.34505 14.375 5.3125C14.375 5.27995 14.362 5.25716 14.3359 5.24414L13.75 5L13.5059 4.41406C13.4928 4.38802 13.4701 4.375 13.4375 4.375C13.4049 4.375 13.3822 4.38802 13.3691 4.41406L13.125 5L12.5391 5.24414C12.513 5.25716 12.5 5.27995 12.5 5.3125Z","M14.375 14.6875C14.375 14.6549 14.362 14.6322 14.3359 14.6191L13.75 14.375L13.5059 13.7891C13.4928 13.763 13.4701 13.75 13.4375 13.75C13.4049 13.75 13.3822 13.763 13.3691 13.7891L13.125 14.375L12.5391 14.6191C12.513 14.6322 12.5 14.6549 12.5 14.6875C12.5 14.7201 12.513 14.7428 12.5391 14.7559L13.125 15L13.3691 15.5859C13.3822 15.612 13.4049 15.625 13.4375 15.625C13.4701 15.625 13.4928 15.612 13.5059 15.5859L13.75 15L14.3359 14.7559C14.362 14.7428 14.375 14.7201 14.375 14.6875Z"],["M12.5 10C12.5 9.80469 12.4121 9.6582 12.2363 9.56055L8.95508 7.91992L7.28516 4.60938C7.20703 4.45312 7.07031 4.375 6.875 4.375C6.67969 4.375 6.54297 4.45312 6.46484 4.60938L4.79492 7.91992L1.51367 9.56055C1.33789 9.6582 1.25 9.80469 1.25 10C1.25 10.1953 1.33789 10.332 1.51367 10.4102L4.79492 12.0508L6.46484 15.3613C6.54297 15.5371 6.67969 15.625 6.875 15.625C7.07031 15.625 7.20703 15.5371 7.28516 15.3613L8.95508 12.0508L12.2363 10.4102C12.4121 10.332 12.5 10.1953 12.5 10Z","M11.5625 5.3125C11.5625 5.3776 11.5885 5.42318 11.6406 5.44922L12.8125 5.9375L13.3008 7.10938C13.3268 7.16146 13.3724 7.1875 13.4375 7.1875C13.5026 7.1875 13.5482 7.16146 13.5742 7.10938L14.0625 5.9375L15.2344 5.44922C15.2865 5.42318 15.3125 5.3776 15.3125 5.3125C15.3125 5.2474 15.2865 5.20182 15.2344 5.17578L14.0625 4.6875L13.5742 3.51562C13.5482 3.46354 13.5026 3.4375 13.4375 3.4375C13.3724 3.4375 13.3268 3.46354 13.3008 3.51562L12.8125 4.6875L11.6406 5.17578C11.5885 5.20182 11.5625 5.2474 11.5625 5.3125Z","M15.3125 14.6875C15.3125 14.6224 15.2865 14.5768 15.2344 14.5508L14.0625 14.0625L13.5742 12.8906C13.5482 12.8385 13.5026 12.8125 13.4375 12.8125C13.3724 12.8125 13.3268 12.8385 13.3008 12.8906L12.8125 14.0625L11.6406 14.5508C11.5885 14.5768 11.5625 14.6224 11.5625 14.6875C11.5625 14.7526 11.5885 14.7982 11.6406 14.8242L12.8125 15.3125L13.3008 16.4844C13.3268 16.5365 13.3724 16.5625 13.4375 16.5625C13.5026 16.5625 13.5482 16.5365 13.5742 16.4844L14.0625 15.3125L15.2344 14.8242C15.2865 14.7982 15.3125 14.7526 15.3125 14.6875Z"],["M11.5625 10C11.5625 9.83724 11.4893 9.71517 11.3428 9.63379L8.6084 8.2666L7.2168 5.50781C7.15169 5.3776 7.03776 5.3125 6.875 5.3125C6.71224 5.3125 6.59831 5.3776 6.5332 5.50781L5.1416 8.2666L2.40723 9.63379C2.26074 9.71517 2.1875 9.83724 2.1875 10C2.1875 10.1628 2.26074 10.2767 2.40723 10.3418L5.1416 11.709L6.5332 14.4678C6.59831 14.6143 6.71224 14.6875 6.875 14.6875C7.03776 14.6875 7.15169 14.6143 7.2168 14.4678L8.6084 11.709L11.3428 10.3418C11.4893 10.2767 11.5625 10.1628 11.5625 10Z","M10.625 5.3125C10.625 5.41016 10.6641 5.47852 10.7422 5.51758L12.5 6.25L13.2324 8.00781C13.2715 8.08594 13.3398 8.125 13.4375 8.125C13.5352 8.125 13.6035 8.08594 13.6426 8.00781L14.375 6.25L16.1328 5.51758C16.2109 5.47852 16.25 5.41016 16.25 5.3125C16.25 5.21484 16.2109 5.14648 16.1328 5.10742L14.375 4.375L13.6426 2.61719C13.6035 2.53906 13.5352 2.5 13.4375 2.5C13.3398 2.5 13.2715 2.53906 13.2324 2.61719L12.5 4.375L10.7422 5.10742C10.6641 5.14648 10.625 5.21484 10.625 5.3125Z","M16.25 14.6875C16.25 14.5898 16.2109 14.5215 16.1328 14.4824L14.375 13.75L13.6426 11.9922C13.6035 11.9141 13.5352 11.875 13.4375 11.875C13.3398 11.875 13.2715 11.9141 13.2324 11.9922L12.5 13.75L10.7422 14.4824C10.6641 14.5215 10.625 14.5898 10.625 14.6875C10.625 14.7852 10.6641 14.8535 10.7422 14.8926L12.5 15.625L13.2324 17.3828C13.2715 17.4609 13.3398 17.5 13.4375 17.5C13.5352 17.5 13.6035 17.4609 13.6426 17.3828L14.375 15.625L16.1328 14.8926C16.2109 14.8535 16.25 14.7852 16.25 14.6875Z"],["M10 10C10 9.89149 9.95117 9.81011 9.85352 9.75586L8.0306 8.8444L7.10286 7.00521C7.05946 6.9184 6.98351 6.875 6.875 6.875C6.76649 6.875 6.69054 6.9184 6.64714 7.00521L5.7194 8.8444L3.89648 9.75586C3.79883 9.81011 3.75 9.89149 3.75 10C3.75 10.1085 3.79883 10.1845 3.89648 10.2279L5.7194 11.1393L6.64714 12.9785C6.69054 13.0762 6.76649 13.125 6.875 13.125C6.98351 13.125 7.05946 13.0762 7.10286 12.9785L8.0306 11.1393L9.85352 10.2279C9.95117 10.1845 10 10.1085 10 10Z","M10 5.3125C10 5.43186 10.0477 5.51541 10.1432 5.56315L12.2917 6.45833L13.1868 8.60677C13.2346 8.70226 13.3181 8.75 13.4375 8.75C13.5569 8.75 13.6404 8.70226 13.6882 8.60677L14.5833 6.45833L16.7318 5.56315C16.8273 5.51541 16.875 5.43186 16.875 5.3125C16.875 5.19314 16.8273 5.10959 16.7318 5.06185L14.5833 4.16667L13.6882 2.01823C13.6404 1.92274 13.5569 1.875 13.4375 1.875C13.3181 1.875 13.2346 1.92274 13.1868 2.01823L12.2917 4.16667L10.1432 5.06185C10.0477 5.10959 10 5.19314 10 5.3125Z","M16.875 14.6875C16.875 14.5681 16.8273 14.4846 16.7318 14.4368L14.5833 13.5417L13.6882 11.3932C13.6404 11.2977 13.5569 11.25 13.4375 11.25C13.3181 11.25 13.2346 11.2977 13.1868 11.3932L12.2917 13.5417L10.1432 14.4368C10.0477 14.4846 10 14.5681 10 14.6875C10 14.8069 10.0477 14.8904 10.1432 14.9382L12.2917 15.8333L13.1868 17.9818C13.2346 18.0773 13.3181 18.125 13.4375 18.125C13.5569 18.125 13.6404 18.0773 13.6882 17.9818L14.5833 15.8333L16.7318 14.9382C16.8273 14.8904 16.875 14.8069 16.875 14.6875Z"],["M9.0625 10C9.0625 9.92405 9.02832 9.86708 8.95996 9.8291L7.68392 9.19108L7.03451 7.90365C7.00412 7.84288 6.95095 7.8125 6.875 7.8125C6.79905 7.8125 6.74588 7.84288 6.71549 7.90365L6.06608 9.19108L4.79004 9.8291C4.72168 9.86708 4.6875 9.92405 4.6875 10C4.6875 10.076 4.72168 10.1291 4.79004 10.1595L6.06608 10.7975L6.71549 12.085C6.74588 12.1533 6.95095 12.1875 6.875 12.1875C6.95095 12.1875 7.00412 12.1533 7.03451 12.085L7.68392 10.7975L8.95996 10.1595C9.02832 10.1291 9.0625 10.076 9.0625 10Z","M9.0625 5.3125C9.0625 5.46441 9.12326 5.57075 9.24479 5.63151L11.9792 6.77083L13.1185 9.50521C13.1793 9.62674 13.2856 9.6875 13.4375 9.6875C13.5894 9.6875 13.6957 9.62674 13.7565 9.50521L14.8958 6.77083L17.6302 5.63151C17.7517 5.57075 17.8125 5.46441 17.8125 5.3125C17.8125 5.16059 17.7517 5.05425 17.6302 4.99349L14.8958 3.85417L13.7565 1.11979C13.6957 0.998264 13.5894 0.9375 13.4375 0.9375C13.2856 0.9375 13.1793 0.998264 13.1185 1.11979L11.9792 3.85417L9.24479 4.99349C9.12326 5.05425 9.0625 5.16059 9.0625 5.3125Z","M17.8125 14.6875C17.8125 14.5356 17.7517 14.4293 17.6302 14.3685L14.8958 13.2292L13.7565 10.4948C13.6957 10.3733 13.5894 10.3125 13.4375 10.3125C13.2856 10.3125 13.1793 10.3733 13.1185 10.4948L11.9792 13.2292L9.24479 14.3685C9.12326 14.4293 9.0625 14.5356 9.0625 14.6875C9.0625 14.8394 9.12326 14.9457 9.24479 15.0065L11.9792 16.1458L13.1185 18.8802C13.1793 19.0017 13.2856 19.0625 13.4375 19.0625C13.5894 19.0625 13.6957 19.0017 13.7565 18.8802L14.8958 16.1458L17.6302 15.0065C17.7517 14.9457 17.8125 14.8394 17.8125 14.6875Z"],["M10 10C10 9.89149 9.95117 9.81011 9.85352 9.75586L8.0306 8.8444L7.10286 7.00521C7.05946 6.9184 6.98351 6.875 6.875 6.875C6.76649 6.875 6.69054 6.9184 6.64714 7.00521L5.7194 8.8444L3.89648 9.75586C3.79883 9.81011 3.75 9.89149 3.75 10C3.75 10.1085 3.79883 10.1845 3.89648 10.2279L5.7194 11.1393L6.64714 12.9785C6.69054 13.0762 6.76649 13.125 6.875 13.125C6.98351 13.125 7.05946 13.0762 7.10286 12.9785L8.0306 11.1393L9.85352 10.2279C9.95117 10.1845 10 10.1085 10 10Z","M10 5.3125C10 5.43186 10.0477 5.51541 10.1432 5.56315L12.2917 6.45833L13.1868 8.60677C13.2346 8.70226 13.3181 8.75 13.4375 8.75C13.5569 8.75 13.6404 8.70226 13.6882 8.60677L14.5833 6.45833L16.7318 5.56315C16.8273 5.51541 16.875 5.43186 16.875 5.3125C16.875 5.19314 16.8273 5.10959 16.7318 5.06185L14.5833 4.16667L13.6882 2.01823C13.6404 1.92274 13.5569 1.875 13.4375 1.875C13.3181 1.875 13.2346 1.92274 13.1868 2.01823L12.2917 4.16667L10.1432 5.06185C10.0477 5.10959 10 5.19314 10 5.3125Z","M16.875 14.6875C16.875 14.5681 16.8273 14.4846 16.7318 14.4368L14.5833 13.5417L13.6882 11.3932C13.6404 11.2977 13.5569 11.25 13.4375 11.25C13.3181 11.25 13.2346 11.2977 13.1868 11.3932L12.2917 13.5417L10.1432 14.4368C10.0477 14.4846 10 14.5681 10 14.6875C10 14.8069 10.0477 14.8904 10.1432 14.9382L12.2917 15.8333L13.1868 17.9818C13.2346 18.0773 13.3181 18.125 13.4375 18.125C13.5569 18.125 13.6404 18.0773 13.6882 17.9818L14.5833 15.8333L16.7318 14.9382C16.8273 14.8904 16.875 14.8069 16.875 14.6875Z"],["M11.5625 10C11.5625 9.83724 11.4893 9.71517 11.3428 9.63379L8.6084 8.2666L7.2168 5.50781C7.15169 5.3776 7.03776 5.3125 6.875 5.3125C6.71224 5.3125 6.59831 5.3776 6.5332 5.50781L5.1416 8.2666L2.40723 9.63379C2.26074 9.71517 2.1875 9.83724 2.1875 10C2.1875 10.1628 2.26074 10.2767 2.40723 10.3418L5.1416 11.709L6.5332 14.4678C6.59831 14.6143 6.71224 14.6875 6.875 14.6875C7.03776 14.6875 7.15169 14.6143 7.2168 14.4678L8.6084 11.709L11.3428 10.3418C11.4893 10.2767 11.5625 10.1628 11.5625 10Z","M10.625 5.3125C10.625 5.41016 10.6641 5.47852 10.7422 5.51758L12.5 6.25L13.2324 8.00781C13.2715 8.08594 13.3398 8.125 13.4375 8.125C13.5352 8.125 13.6035 8.08594 13.6426 8.00781L14.375 6.25L16.1328 5.51758C16.2109 5.47852 16.25 5.41016 16.25 5.3125C16.25 5.21484 16.2109 5.14648 16.1328 5.10742L14.375 4.375L13.6426 2.61719C13.6035 2.53906 13.5352 2.5 13.4375 2.5C13.3398 2.5 13.2715 2.53906 13.2324 2.61719L12.5 4.375L10.7422 5.10742C10.6641 5.14648 10.625 5.21484 10.625 5.3125Z","M16.25 14.6875C16.25 14.5898 16.2109 14.5215 16.1328 14.4824L14.375 13.75L13.6426 11.9922C13.6035 11.9141 13.5352 11.875 13.4375 11.875C13.3398 11.875 13.2715 11.9141 13.2324 11.9922L12.5 13.75L10.7422 14.4824C10.6641 14.5215 10.625 14.5898 10.625 14.6875C10.625 14.7852 10.6641 14.8535 10.7422 14.8926L12.5 15.625L13.2324 17.3828C13.2715 17.4609 13.3398 17.5 13.4375 17.5C13.5352 17.5 13.6035 17.4609 13.6426 17.3828L14.375 15.625L16.1328 14.8926C16.2109 14.8535 16.25 14.7852 16.25 14.6875Z"]],U=[["M30 28C30 27.8438 29.9297 27.7266 29.7891 27.6484L27.1641 26.3359L25.8281 23.6875C25.7656 23.5625 25.6562 23.5 25.5 23.5C25.3438 23.5 25.2344 23.5625 25.1719 23.6875L23.8359 26.3359L21.2109 27.6484C21.0703 27.7266 21 27.8438 21 28C21 28.1562 21.0703 28.2656 21.2109 28.3281L23.8359 29.6406L25.1719 32.2891C25.2344 32.4297 25.3438 32.5 25.5 32.5C25.6562 32.5 25.7656 32.4297 25.8281 32.2891L27.1641 29.6406L29.7891 28.3281C29.9297 28.2656 30 28.1562 30 28Z","M29.25 24.25C29.25 24.3021 29.2708 24.3385 29.3125 24.3594L30.25 24.75L30.6406 25.6875C30.6615 25.7292 30.6979 25.75 30.75 25.75C30.8021 25.75 30.8385 25.7292 30.8594 25.6875L31.25 24.75L32.1875 24.3594C32.2292 24.3385 32.25 24.3021 32.25 24.25C32.25 24.1979 32.2292 24.1615 32.1875 24.1406L31.25 23.75L30.8594 22.8125C30.8385 22.7708 30.8021 22.75 30.75 22.75C30.6979 22.75 30.6615 22.7708 30.6406 22.8125L30.25 23.75L29.3125 24.1406C29.2708 24.1615 29.25 24.1979 29.25 24.25Z","M32.25 31.75C32.25 31.6979 32.2292 31.6615 32.1875 31.6406L31.25 31.25L30.8594 30.3125C30.8385 30.2708 30.8021 30.25 30.75 30.25C30.6979 30.25 30.6615 30.2708 30.6406 30.3125L30.25 31.25L29.3125 31.6406C29.2708 31.6615 29.25 31.6979 29.25 31.75C29.25 31.8021 29.2708 31.8385 29.3125 31.8594L30.25 32.25L30.6406 33.1875C30.6615 33.2292 30.6979 33.25 30.75 33.25C30.8021 33.25 30.8385 33.2292 30.8594 33.1875L31.25 32.25L32.1875 31.8594C32.2292 31.8385 32.25 31.8021 32.25 31.75Z"],["M52 28C52 33.0683 50.3955 38.0065 47.4164 42.1068C44.4373 46.2072 40.2366 49.2592 35.4164 50.8254","M30.5 28C30.5 27.8264 30.4219 27.6962 30.2656 27.6094L27.349 26.151L25.8646 23.2083C25.7951 23.0694 25.6736 23 25.5 23C25.3264 23 25.2049 23.0694 25.1354 23.2083L23.651 26.151L20.7344 27.6094C20.5781 27.6962 20.5 27.8264 20.5 28C20.5 28.1736 20.5781 28.2951 20.7344 28.3646L23.651 29.8229L25.1354 32.7656C25.2049 32.9219 25.3264 33 25.5 33C25.6736 33 25.7951 32.9219 25.8646 32.7656L27.349 29.8229L30.2656 28.3646C30.4219 28.2951 30.5 28.1736 30.5 28Z","M30 24.25C30 24.276 30.0104 24.2943 30.0312 24.3047L30.5 24.5L30.6953 24.9688C30.7057 24.9896 30.724 25 30.75 25C30.776 25 30.7943 24.9896 30.8047 24.9688L31 24.5L31.4688 24.3047C31.4896 24.2943 31.5 24.276 31.5 24.25C31.5 24.224 31.4896 24.2057 31.4688 24.1953L31 24L30.8047 23.5312C30.7943 23.5104 30.776 23.5 30.75 23.5C30.724 23.5 30.7057 23.5104 30.6953 23.5312L30.5 24L30.0312 24.1953C30.0104 24.2057 30 24.224 30 24.25Z","M31.5 31.75C31.5 31.724 31.4896 31.7057 31.4688 31.6953L31 31.5L30.8047 31.0312C30.7943 31.0104 30.776 31 30.75 31C30.724 31 30.7057 31.0104 30.6953 31.0312L30.5 31.5L30.0312 31.6953C30.0104 31.7057 30 31.724 30 31.75C30 31.776 30.0104 31.7943 30.0312 31.8047L30.5 32L30.6953 32.4688C30.7057 32.4896 30.724 32.5 30.75 32.5C30.776 32.5 30.7943 32.4896 30.8047 32.4688L31 32L31.4688 31.8047C31.4896 31.7943 31.5 31.776 31.5 31.75Z"],["M41.872 48.0851C37.7203 50.9922 32.7549 52.5103 27.6873 52.4218C22.6198 52.3334 17.7104 50.6429 13.6626 47.5927","M30 28C30 27.8438 29.9297 27.7266 29.7891 27.6484L27.1641 26.3359L25.8281 23.6875C25.7656 23.5625 25.6562 23.5 25.5 23.5C25.3438 23.5 25.2344 23.5625 25.1719 23.6875L23.8359 26.3359L21.2109 27.6484C21.0703 27.7266 21 27.8438 21 28C21 28.1562 21.0703 28.2656 21.2109 28.3281L23.8359 29.6406L25.1719 32.2891C25.2344 32.4297 25.3438 32.5 25.5 32.5C25.6562 32.5 25.7656 32.4297 25.8281 32.2891L27.1641 29.6406L29.7891 28.3281C29.9297 28.2656 30 28.1562 30 28Z","M29.25 24.25C29.25 24.3021 29.2708 24.3385 29.3125 24.3594L30.25 24.75L30.6406 25.6875C30.6615 25.7292 30.6979 25.75 30.75 25.75C30.8021 25.75 30.8385 25.7292 30.8594 25.6875L31.25 24.75L32.1875 24.3594C32.2292 24.3385 32.25 24.3021 32.25 24.25C32.25 24.1979 32.2292 24.1615 32.1875 24.1406L31.25 23.75L30.8594 22.8125C30.8385 22.7708 30.8021 22.75 30.75 22.75C30.6979 22.75 30.6615 22.7708 30.6406 22.8125L30.25 23.75L29.3125 24.1406C29.2708 24.1615 29.25 24.1979 29.25 24.25Z","M32.25 31.75C32.25 31.6979 32.2292 31.6615 32.1875 31.6406L31.25 31.25L30.8594 30.3125C30.8385 30.2708 30.8021 30.25 30.75 30.25C30.6979 30.25 30.6615 30.2708 30.6406 30.3125L30.25 31.25L29.3125 31.6406C29.2708 31.6615 29.25 31.6979 29.25 31.75C29.25 31.8021 29.2708 31.8385 29.3125 31.8594L30.25 32.25L30.6406 33.1875C30.6615 33.2292 30.6979 33.25 30.75 33.25C30.8021 33.25 30.8385 33.2292 30.8594 33.1875L31.25 32.25L32.1875 31.8594C32.2292 31.8385 32.25 31.8021 32.25 31.75Z"],["M20.0304 49.8968C15.2678 48.1633 11.1762 44.9666 8.34199 40.7648C5.50783 36.563 4.07663 31.5718 4.25351 26.5066","M29.25 28C29.25 27.8698 29.1914 27.7721 29.0742 27.707L26.8867 26.6133L25.7734 24.4062C25.7214 24.3021 25.6302 24.25 25.5 24.25C25.3698 24.25 25.2786 24.3021 25.2266 24.4062L24.1133 26.6133L21.9258 27.707C21.8086 27.7721 21.75 27.8698 21.75 28C21.75 28.1302 21.8086 28.2214 21.9258 28.2734L24.1133 29.3672L25.2266 31.5742C25.2786 31.6914 25.3698 31.75 25.5 31.75C25.6302 31.75 25.7214 31.6914 25.7734 31.5742L26.8867 29.3672L29.0742 28.2734C29.1914 28.2214 29.25 28.1302 29.25 28Z","M28.5 24.25C28.5 24.3281 28.5312 24.3828 28.5938 24.4141L30 25L30.5859 26.4062C30.6172 26.4688 30.6719 26.5 30.75 26.5C30.8281 26.5 30.8828 26.4688 30.9141 26.4062L31.5 25L32.9062 24.4141C32.9688 24.3828 33 24.3281 33 24.25C33 24.1719 32.9688 24.1172 32.9062 24.0859L31.5 23.5L30.9141 22.0938C30.8828 22.0312 30.8281 22 30.75 22C30.6719 22 30.6172 22.0312 30.5859 22.0938L30 23.5L28.5938 24.0859C28.5312 24.1172 28.5 24.1719 28.5 24.25Z","M33 31.75C33 31.6719 32.9688 31.6172 32.9062 31.5859L31.5 31L30.9141 29.5938C30.8828 29.5312 30.8281 29.5 30.75 29.5C30.6719 29.5 30.6172 29.5312 30.5859 29.5938L30 31L28.5938 31.5859C28.5312 31.6172 28.5 31.6719 28.5 31.75C28.5 31.8281 28.5312 31.8828 28.5938 31.9141L30 32.5L30.5859 33.9062C30.6172 33.9688 30.6719 34 30.75 34C30.8281 34 30.8828 33.9688 30.9141 33.9062L31.5 32.5L32.9062 31.9141C32.9688 31.8828 33 31.8281 33 31.75Z"],["M5.4239 34.2411C4.11213 29.3455 4.38388 24.1603 6.20019 19.4286C8.01651 14.6969 11.2842 10.6617 15.5348 7.90134","M28 28C28 27.9132 27.9609 27.8481 27.8828 27.8047L26.4245 27.0755L25.6823 25.6042C25.6476 25.5347 25.5868 25.5 25.5 25.5C25.4132 25.5 25.3524 25.5347 25.3177 25.6042L24.5755 27.0755L23.1172 27.8047C23.0391 27.8481 23 27.9132 23 28C23 28.0868 23.0391 28.1476 23.1172 28.1823L24.5755 28.9115L25.3177 30.3828C25.3524 30.4609 25.4132 30.5 25.5 30.5C25.5868 30.5 25.6476 30.4609 25.6823 30.3828L26.4245 28.9115L27.8828 28.1823C27.9609 28.1476 28 28.0868 28 28Z","M28 24.25C28 24.3455 28.0382 24.4123 28.1146 24.4505L29.8333 25.1667L30.5495 26.8854C30.5877 26.9618 30.6545 27 30.75 27C30.8455 27 30.9123 26.9618 30.9505 26.8854L31.6667 25.1667L33.3854 24.4505C33.4618 24.4123 33.5 24.3455 33.5 24.25C33.5 24.1545 33.4618 24.0877 33.3854 24.0495L31.6667 23.3333L30.9505 21.6146C30.9123 21.5382 30.8455 21.5 30.75 21.5C30.6545 21.5 30.5877 21.5382 30.5495 21.6146L29.8333 23.3333L28.1146 24.0495C28.0382 24.0877 28 24.1545 28 24.25Z","M33.5 31.75C33.5 31.6545 33.4618 31.5877 33.3854 31.5495L31.6667 30.8333L30.9505 29.1146C30.9123 29.0382 30.8455 29 30.75 29C30.6545 29 30.5877 29.0382 30.5495 29.1146L29.8333 30.8333L28.1146 31.5495C28.0382 31.5877 28 31.6545 28 31.75C28 31.8455 28.0382 31.9123 28.1146 31.9505L29.8333 32.6667L30.5495 34.3854C30.5877 34.4618 30.6545 34.5 30.75 34.5C30.8455 34.5 30.9123 34.4618 30.9505 34.3854L31.6667 32.6667L33.3854 31.9505C33.4618 31.9123 33.5 31.8455 33.5 31.75Z"],["M9.65677 12.7611C12.9146 8.87858 17.318 6.12707 22.2357 4.90093C27.1535 3.6748 32.3331 4.037 37.0324 5.93562","M27.25 28C27.25 27.9392 27.2227 27.8937 27.168 27.8633L26.1471 27.3529L25.6276 26.3229C25.6033 26.2743 25.5608 26.25 25.5 26.25C25.4392 26.25 25.3967 26.2743 25.3724 26.3229L24.8529 27.3529L23.832 27.8633C23.7773 27.8937 23.75 27.9392 23.75 28C23.75 28.0608 23.7773 28.1033 23.832 28.1276L24.8529 28.638L25.3724 29.668C25.3967 29.7227 25.4392 29.75 25.5 29.75C25.5608 29.75 25.6033 29.7227 25.6276 29.668L26.1471 28.638L27.168 28.1276C27.2227 28.1033 27.25 28.0608 27.25 28Z","M27.25 24.25C27.25 24.3715 27.2986 24.4566 27.3958 24.5052L29.5833 25.4167L30.4948 27.6042C30.5434 27.7014 30.6285 27.75 30.75 27.75C30.8715 27.75 30.9566 27.7014 31.0052 27.6042L31.9167 25.4167L34.1042 24.5052C34.2014 24.4566 34.25 24.3715 34.25 24.25C34.25 24.1285 34.2014 24.0434 34.1042 23.9948L31.9167 23.0833L31.0052 20.8958C30.9566 20.7986 30.8715 20.75 30.75 20.75C30.6285 20.75 30.5434 20.7986 30.4948 20.8958L29.5833 23.0833L27.3958 23.9948C27.2986 24.0434 27.25 24.1285 27.25 24.25Z","M34.25 31.75C34.25 31.6285 34.2014 31.5434 34.1042 31.4948L31.9167 30.5833L31.0052 28.3958C30.9566 28.2986 30.8715 28.25 30.75 28.25C30.6285 28.25 30.5434 28.2986 30.4948 28.3958L29.5833 30.5833L27.3958 31.4948C27.2986 31.5434 27.25 31.6285 27.25 31.75C27.25 31.8715 27.2986 31.9566 27.3958 32.0052L29.5833 32.9167L30.4948 35.1042C30.5434 35.2014 30.6285 35.25 30.75 35.25C30.8715 35.25 30.9566 35.2014 31.0052 35.1042L31.9167 32.9167L34.1042 32.0052C34.2014 31.9566 34.25 31.8715 34.25 31.75Z"],["M30.0921 4.27439C35.1412 4.71612 39.9207 6.74493 43.7458 10.07C47.5709 13.3951 50.2452 17.8458 51.3853 22.7842","M28 28C28 27.9132 27.9609 27.8481 27.8828 27.8047L26.4245 27.0755L25.6823 25.6042C25.6476 25.5347 25.5868 25.5 25.5 25.5C25.4132 25.5 25.3524 25.5347 25.3177 25.6042L24.5755 27.0755L23.1172 27.8047C23.0391 27.8481 23 27.9132 23 28C23 28.0868 23.0391 28.1476 23.1172 28.1823L24.5755 28.9115L25.3177 30.3828C25.3524 30.4609 25.4132 30.5 25.5 30.5C25.5868 30.5 25.6476 30.4609 25.6823 30.3828L26.4245 28.9115L27.8828 28.1823C27.9609 28.1476 28 28.0868 28 28Z","M28 24.25C28 24.3455 28.0382 24.4123 28.1146 24.4505L29.8333 25.1667L30.5495 26.8854C30.5877 26.9618 30.6545 27 30.75 27C30.8455 27 30.9123 26.9618 30.9505 26.8854L31.6667 25.1667L33.3854 24.4505C33.4618 24.4123 33.5 24.3455 33.5 24.25C33.5 24.1545 33.4618 24.0877 33.3854 24.0495L31.6667 23.3333L30.9505 21.6146C30.9123 21.5382 30.8455 21.5 30.75 21.5C30.6545 21.5 30.5877 21.5382 30.5495 21.6146L29.8333 23.3333L28.1146 24.0495C28.0382 24.0877 28 24.1545 28 24.25Z","M33.5 31.75C33.5 31.6545 33.4618 31.5877 33.3854 31.5495L31.6667 30.8333L30.9505 29.1146C30.9123 29.0382 30.8455 29 30.75 29C30.6545 29 30.5877 29.0382 30.5495 29.1146L29.8333 30.8333L28.1146 31.5495C28.0382 31.5877 28 31.6545 28 31.75C28 31.8455 28.0382 31.9123 28.1146 31.9505L29.8333 32.6667L30.5495 34.3854C30.5877 34.4618 30.6545 34.5 30.75 34.5C30.8455 34.5 30.9123 34.4618 30.9505 34.3854L31.6667 32.6667L33.3854 31.9505C33.4618 31.9123 33.5 31.8455 33.5 31.75Z"],["M48.5692 15.7846C51.1034 20.1739 52.1829 25.2528 51.6531 30.2933C51.1234 35.3338 49.0114 40.0773 45.6201 43.8437","M29.25 28C29.25 27.8698 29.1914 27.7721 29.0742 27.707L26.8867 26.6133L25.7734 24.4062C25.7214 24.3021 25.6302 24.25 25.5 24.25C25.3698 24.25 25.2786 24.3021 25.2266 24.4062L24.1133 26.6133L21.9258 27.707C21.8086 27.7721 21.75 27.8698 21.75 28C21.75 28.1302 21.8086 28.2214 21.9258 28.2734L24.1133 29.3672L25.2266 31.5742C25.2786 31.6914 25.3698 31.75 25.5 31.75C25.6302 31.75 25.7214 31.6914 25.7734 31.5742L26.8867 29.3672L29.0742 28.2734C29.1914 28.2214 29.25 28.1302 29.25 28Z","M28.5 24.25C28.5 24.3281 28.5312 24.3828 28.5938 24.4141L30 25L30.5859 26.4062C30.6172 26.4688 30.6719 26.5 30.75 26.5C30.8281 26.5 30.8828 26.4688 30.9141 26.4062L31.5 25L32.9062 24.4141C32.9688 24.3828 33 24.3281 33 24.25C33 24.1719 32.9688 24.1172 32.9062 24.0859L31.5 23.5L30.9141 22.0938C30.8828 22.0312 30.8281 22 30.75 22C30.6719 22 30.6172 22.0312 30.5859 22.0938L30 23.5L28.5938 24.0859C28.5312 24.1172 28.5 24.1719 28.5 24.25Z","M33 31.75C33 31.6719 32.9688 31.6172 32.9062 31.5859L31.5 31L30.9141 29.5938C30.8828 29.5312 30.8281 29.5 30.75 29.5C30.6719 29.5 30.6172 29.5312 30.5859 29.5938L30 31L28.5938 31.5859C28.5312 31.6172 28.5 31.6719 28.5 31.75C28.5 31.8281 28.5312 31.8828 28.5938 31.9141L30 32.5L30.5859 33.9062C30.6172 33.9688 30.6719 34 30.75 34C30.8281 34 30.8828 33.9688 30.9141 33.9062L31.5 32.5L32.9062 31.9141C32.9688 31.8828 33 31.8281 33 31.75Z"]],G=["width","height","viewBox"],H={key:0},O=["d","fill","stroke","stroke-width","stroke-linecap"],e=P({__name:"SparkleIcon",props:{animated:{type:Boolean,default:!1},withSpinner:{type:Boolean,default:!1},size:{default:"md"},color:{default:""},colorClass:{default:"tw-text-primary-500"}},setup(S){const t=S,k=`spinnerGradient-${Math.random().toString(36).substr(2,9)}`,b={sm:12,md:16,lg:20},y={sm:36,md:48,lg:60},f=i(()=>typeof t.size=="number"?t.size:t.withSpinner?y[t.size]:b[t.size]),M=i(()=>{if(t.color)return{color:t.color}}),Z=i(()=>t.withSpinner?"0 0 56 56":"0 0 20 20"),s=D(0);let n=null;const g=i(()=>t.withSpinner?U:W),F=i(()=>t.animated?g.value[s.value]:g.value[0]),A=()=>{n||(s.value=0,n=window.setInterval(()=>{s.value=(s.value+1)%g.value.length},100))},I=()=>{n&&(clearInterval(n),n=null),s.value=0};return B(()=>t.animated,h=>{h?A():I()},{immediate:!0}),V(()=>{I()}),(h,z)=>(u(),v("svg",{width:f.value,height:f.value,viewBox:Z.value,class:E(["tw-flex-shrink-0",t.colorClass]),style:q(M.value)},[t.withSpinner?(u(),v("defs",H,[r("linearGradient",{id:k,x1:"0%",y1:"0%",x2:"100%",y2:"100%"},[...z[0]||(z[0]=[r("stop",{offset:"0%","stop-color":"currentColor","stop-opacity":"0.1"},null,-1),r("stop",{offset:"35%","stop-color":"currentColor","stop-opacity":"0.3"},null,-1),r("stop",{offset:"68%","stop-color":"currentColor","stop-opacity":"0.5"},null,-1),r("stop",{offset:"100%","stop-color":"currentColor","stop-opacity":"1"},null,-1)])])])):N("",!0),(u(!0),v(T,null,R(F.value,(_,a)=>(u(),v("path",{key:a,d:_,fill:t.withSpinner&&a===0?"none":"currentColor",stroke:t.withSpinner&&a===0?`url(#${k})`:"none","stroke-width":t.withSpinner&&a===0?"4":void 0,"stroke-linecap":t.withSpinner&&a===0?"round":void 0},null,8,O))),128))],14,G))}});e.__docgenInfo={exportName:"default",displayName:"SparkleIcon",description:"",tags:{},props:[{name:"animated",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"withSpinner",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"size",required:!1,type:{name:"union",elements:[{name:'"sm"'},{name:'"md"'},{name:'"lg"'},{name:"number"}]},defaultValue:{func:!1,value:"'md'"}},{name:"color",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"colorClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"'tw-text-primary-500'"}}],sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/SparkleIcon/SparkleIcon.vue"]};const j={title:"Components/SparkleIcon",component:e,argTypes:{animated:{control:"boolean",description:"Whether the sparkle icon should animate",defaultValue:!1},withSpinner:{control:"boolean",description:"Whether to show spinner arc with sparkle (only applies when animated)",defaultValue:!1},size:{control:{type:"select"},options:["sm","md","lg",12,16,20,24,32,48],description:"Size of the icon (predefined or custom number)",defaultValue:"md"},color:{control:"color",description:"Color of the icon (hex value)",defaultValue:"#3F59F6"},colorClass:{control:"text",description:"Tailwind color class (e.g., tw-text-red-500)"}}},l=S=>({components:{SparkleIcon:e},setup(){return{args:S}},template:'<SparkleIcon v-bind="args" />'});l.args={animated:!1,withSpinner:!1,size:"md"};const c=()=>({components:{SparkleIcon:e},template:`
|
|
2
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
3
|
+
<SparkleIcon size="sm" />
|
|
4
|
+
<SparkleIcon size="md" />
|
|
5
|
+
<SparkleIcon size="lg" />
|
|
6
|
+
</div>
|
|
7
|
+
`});c.story={name:"Static Sizes"};const o=()=>({components:{SparkleIcon:e},template:`
|
|
8
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-text-black">
|
|
9
|
+
<SparkleIcon :animated="true" size="sm" />
|
|
10
|
+
<SparkleIcon :animated="true" size="md" />
|
|
11
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
12
|
+
</div>
|
|
13
|
+
`});o.story={name:"Animated Sizes"};const p=()=>({components:{SparkleIcon:e},template:`
|
|
14
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
15
|
+
<SparkleIcon :size="12" />
|
|
16
|
+
<SparkleIcon :size="16" />
|
|
17
|
+
<SparkleIcon :size="20" />
|
|
18
|
+
<SparkleIcon :size="24" />
|
|
19
|
+
<SparkleIcon :size="32" />
|
|
20
|
+
<SparkleIcon :size="48" />
|
|
21
|
+
</div>
|
|
22
|
+
`});p.story={name:"Custom Number Sizes"};const w=()=>({components:{SparkleIcon:e},data(){return{isAnimated:!1}},template:`
|
|
23
|
+
<div class="tw-flex tw-flex-col tw-gap-4">
|
|
24
|
+
<div class="tw-flex tw-items-center tw-gap-4">
|
|
25
|
+
<SparkleIcon :animated="isAnimated" size="lg" />
|
|
26
|
+
<button
|
|
27
|
+
class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded hover:tw-bg-blue-600"
|
|
28
|
+
@click="isAnimated = !isAnimated"
|
|
29
|
+
>
|
|
30
|
+
{{ isAnimated ? 'Stop Animation' : 'Start Animation' }}
|
|
31
|
+
</button>
|
|
32
|
+
</div>
|
|
33
|
+
<p class="tw-text-sm tw-text-gray-600">
|
|
34
|
+
Click the button to toggle animation
|
|
35
|
+
</p>
|
|
36
|
+
</div>
|
|
37
|
+
`});w.story={name:"Interactive Toggle"};const d=()=>({components:{SparkleIcon:e},template:`
|
|
38
|
+
<div class="tw-p-4">
|
|
39
|
+
<p class="tw-text-sm tw-text-gray-600 tw-mb-4">
|
|
40
|
+
Note: Spinner variant uses larger sizes (sm=36px, md=48px, lg=60px) for better visibility
|
|
41
|
+
</p>
|
|
42
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
43
|
+
<div class="tw-text-center">
|
|
44
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="sm" />
|
|
45
|
+
<p class="tw-text-xs tw-mt-2">Small (36px)</p>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="tw-text-center">
|
|
48
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="md" />
|
|
49
|
+
<p class="tw-text-xs tw-mt-2">Medium (48px)</p>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="tw-text-center">
|
|
52
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="lg" />
|
|
53
|
+
<p class="tw-text-xs tw-mt-2">Large (60px)</p>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
`});d.story={name:"Animated with Spinner"};const m=()=>({components:{SparkleIcon:e},template:`
|
|
58
|
+
<div class="tw-p-6">
|
|
59
|
+
<div class="tw-mb-6">
|
|
60
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Regular Sparkle (12px, 16px, 20px)</h4>
|
|
61
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
62
|
+
<div class="tw-text-center">
|
|
63
|
+
<SparkleIcon :animated="true" size="sm" />
|
|
64
|
+
<p class="tw-text-xs tw-mt-2">sm</p>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="tw-text-center">
|
|
67
|
+
<SparkleIcon :animated="true" size="md" />
|
|
68
|
+
<p class="tw-text-xs tw-mt-2">md</p>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="tw-text-center">
|
|
71
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
72
|
+
<p class="tw-text-xs tw-mt-2">lg</p>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div>
|
|
78
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Sparkle with Spinner (36px, 48px, 60px)</h4>
|
|
79
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
80
|
+
<div class="tw-text-center">
|
|
81
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="sm" />
|
|
82
|
+
<p class="tw-text-xs tw-mt-2">sm</p>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="tw-text-center">
|
|
85
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="md" />
|
|
86
|
+
<p class="tw-text-xs tw-mt-2">md</p>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="tw-text-center">
|
|
89
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="lg" />
|
|
90
|
+
<p class="tw-text-xs tw-mt-2">lg</p>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<p class="tw-text-sm tw-text-gray-600 tw-mt-4">
|
|
96
|
+
Note: The spinner variant automatically uses larger sizes for better visibility of the spinner arc.
|
|
97
|
+
</p>
|
|
98
|
+
</div>
|
|
99
|
+
`});m.story={name:"Regular vs Spinner Comparison"};const C=()=>({components:{SparkleIcon:e},template:`
|
|
100
|
+
<div class="tw-p-6">
|
|
101
|
+
<div class="tw-mb-4">
|
|
102
|
+
<h3 class="tw-text-lg tw-font-bold tw-mb-2">Color Prop</h3>
|
|
103
|
+
<p class="tw-text-sm tw-text-gray-600 tw-mb-4">
|
|
104
|
+
Use the color prop to customize the icon color with hex values.
|
|
105
|
+
</p>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
109
|
+
<div class="tw-text-center">
|
|
110
|
+
<SparkleIcon :animated="true" size="lg" color="#FF0000" />
|
|
111
|
+
<p class="tw-text-xs tw-mt-2">Red</p>
|
|
112
|
+
<p class="tw-text-xs tw-text-gray-500">#FF0000</p>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="tw-text-center">
|
|
115
|
+
<SparkleIcon :animated="true" size="lg" color="#00FF00" />
|
|
116
|
+
<p class="tw-text-xs tw-mt-2">Green</p>
|
|
117
|
+
<p class="tw-text-xs tw-text-gray-500">#00FF00</p>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="tw-text-center">
|
|
120
|
+
<SparkleIcon :animated="true" size="lg" color="#0000FF" />
|
|
121
|
+
<p class="tw-text-xs tw-mt-2">Blue</p>
|
|
122
|
+
<p class="tw-text-xs tw-text-gray-500">#0000FF</p>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="tw-text-center">
|
|
125
|
+
<SparkleIcon :animated="true" size="lg" color="#FF6B00" />
|
|
126
|
+
<p class="tw-text-xs tw-mt-2">Orange</p>
|
|
127
|
+
<p class="tw-text-xs tw-text-gray-500">#FF6B00</p>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="tw-text-center">
|
|
130
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
131
|
+
<p class="tw-text-xs tw-mt-2">Default</p>
|
|
132
|
+
<p class="tw-text-xs tw-text-gray-500">#3F59F6</p>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
`});C.story={name:"Color Prop"};const L=()=>({components:{SparkleIcon:e},template:`
|
|
137
|
+
<div class="tw-p-6">
|
|
138
|
+
<div class="tw-mb-4">
|
|
139
|
+
<h3 class="tw-text-lg tw-font-bold tw-mb-2">ColorClass Prop</h3>
|
|
140
|
+
<p class="tw-text-sm tw-text-gray-600 tw-mb-4">
|
|
141
|
+
Use the colorClass prop to apply Tailwind color classes to the icon.
|
|
142
|
+
</p>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
146
|
+
<div class="tw-text-center">
|
|
147
|
+
<SparkleIcon :animated="true" size="lg" color-class="tw-text-secondary-500" />
|
|
148
|
+
<p class="tw-text-xs tw-mt-2">Secondary</p>
|
|
149
|
+
<p class="tw-text-xs tw-text-gray-500">tw-text-secondary-500</p>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="tw-text-center">
|
|
152
|
+
<SparkleIcon :animated="true" size="lg" color-class="tw-text-info-500" />
|
|
153
|
+
<p class="tw-text-xs tw-mt-2">Info</p>
|
|
154
|
+
<p class="tw-text-xs tw-text-gray-500">tw-text-info-500</p>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="tw-text-center">
|
|
157
|
+
<SparkleIcon :animated="true" size="lg" color-class="tw-text-error-500" />
|
|
158
|
+
<p class="tw-text-xs tw-mt-2">Error</p>
|
|
159
|
+
<p class="tw-text-xs tw-text-gray-500">tw-text-error-500</p>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="tw-text-center">
|
|
162
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
163
|
+
<p class="tw-text-xs tw-mt-2">Default</p>
|
|
164
|
+
<p class="tw-text-xs tw-text-gray-500">#3F59F6</p>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
`});L.story={name:"ColorClass Prop"};const x=()=>({components:{SparkleIcon:e},template:`
|
|
169
|
+
<div class="tw-p-6">
|
|
170
|
+
<h3 class="tw-text-lg tw-font-bold tw-mb-4">Sparkle Icon Showcase</h3>
|
|
171
|
+
|
|
172
|
+
<div class="tw-mb-6">
|
|
173
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Static Icons</h4>
|
|
174
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
175
|
+
<div class="tw-text-center">
|
|
176
|
+
<SparkleIcon size="sm" />
|
|
177
|
+
<p class="tw-text-xs tw-mt-1">Small (12px)</p>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="tw-text-center">
|
|
180
|
+
<SparkleIcon size="md" />
|
|
181
|
+
<p class="tw-text-xs tw-mt-1">Medium (16px)</p>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="tw-text-center">
|
|
184
|
+
<SparkleIcon size="lg" />
|
|
185
|
+
<p class="tw-text-xs tw-mt-1">Large (20px)</p>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<div class="tw-mb-6">
|
|
191
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated Icons</h4>
|
|
192
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
193
|
+
<div class="tw-text-center">
|
|
194
|
+
<SparkleIcon :animated="true" size="sm" />
|
|
195
|
+
<p class="tw-text-xs tw-mt-1">Small (12px)</p>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="tw-text-center">
|
|
198
|
+
<SparkleIcon :animated="true" size="md" />
|
|
199
|
+
<p class="tw-text-xs tw-mt-1">Medium (16px)</p>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="tw-text-center">
|
|
202
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
203
|
+
<p class="tw-text-xs tw-mt-1">Large (20px)</p>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<div class="tw-mb-6">
|
|
209
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated with Spinner</h4>
|
|
210
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
211
|
+
<div class="tw-text-center">
|
|
212
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="sm" />
|
|
213
|
+
<p class="tw-text-xs tw-mt-1">Small (36px)</p>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="tw-text-center">
|
|
216
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="md" />
|
|
217
|
+
<p class="tw-text-xs tw-mt-1">Medium (48px)</p>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="tw-text-center">
|
|
220
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="lg" />
|
|
221
|
+
<p class="tw-text-xs tw-mt-1">Large (60px)</p>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<div>
|
|
227
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Custom Sizes</h4>
|
|
228
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
229
|
+
<div class="tw-text-center">
|
|
230
|
+
<SparkleIcon :animated="true" :size="24" />
|
|
231
|
+
<p class="tw-text-xs tw-mt-1">24px</p>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="tw-text-center">
|
|
234
|
+
<SparkleIcon :animated="true" :size="36" />
|
|
235
|
+
<p class="tw-text-xs tw-mt-1">36px</p>
|
|
236
|
+
</div>
|
|
237
|
+
<div class="tw-text-center">
|
|
238
|
+
<SparkleIcon :animated="true" :size="48" />
|
|
239
|
+
<p class="tw-text-xs tw-mt-1">48px</p>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
`});x.story={name:"Complete Showcase"};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`args => ({
|
|
245
|
+
components: {
|
|
246
|
+
SparkleIcon
|
|
247
|
+
},
|
|
248
|
+
setup() {
|
|
249
|
+
return {
|
|
250
|
+
args
|
|
251
|
+
};
|
|
252
|
+
},
|
|
253
|
+
template: '<SparkleIcon v-bind="args" />'
|
|
254
|
+
})`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => ({
|
|
255
|
+
components: {
|
|
256
|
+
SparkleIcon
|
|
257
|
+
},
|
|
258
|
+
template: \`
|
|
259
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
260
|
+
<SparkleIcon size="sm" />
|
|
261
|
+
<SparkleIcon size="md" />
|
|
262
|
+
<SparkleIcon size="lg" />
|
|
263
|
+
</div>
|
|
264
|
+
\`
|
|
265
|
+
})`,...c.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`() => ({
|
|
266
|
+
components: {
|
|
267
|
+
SparkleIcon
|
|
268
|
+
},
|
|
269
|
+
template: \`
|
|
270
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-text-black">
|
|
271
|
+
<SparkleIcon :animated="true" size="sm" />
|
|
272
|
+
<SparkleIcon :animated="true" size="md" />
|
|
273
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
274
|
+
</div>
|
|
275
|
+
\`
|
|
276
|
+
})`,...o.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => ({
|
|
277
|
+
components: {
|
|
278
|
+
SparkleIcon
|
|
279
|
+
},
|
|
280
|
+
template: \`
|
|
281
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
282
|
+
<SparkleIcon :size="12" />
|
|
283
|
+
<SparkleIcon :size="16" />
|
|
284
|
+
<SparkleIcon :size="20" />
|
|
285
|
+
<SparkleIcon :size="24" />
|
|
286
|
+
<SparkleIcon :size="32" />
|
|
287
|
+
<SparkleIcon :size="48" />
|
|
288
|
+
</div>
|
|
289
|
+
\`
|
|
290
|
+
})`,...p.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`() => ({
|
|
291
|
+
components: {
|
|
292
|
+
SparkleIcon
|
|
293
|
+
},
|
|
294
|
+
data() {
|
|
295
|
+
return {
|
|
296
|
+
isAnimated: false
|
|
297
|
+
};
|
|
298
|
+
},
|
|
299
|
+
template: \`
|
|
300
|
+
<div class="tw-flex tw-flex-col tw-gap-4">
|
|
301
|
+
<div class="tw-flex tw-items-center tw-gap-4">
|
|
302
|
+
<SparkleIcon :animated="isAnimated" size="lg" />
|
|
303
|
+
<button
|
|
304
|
+
class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded hover:tw-bg-blue-600"
|
|
305
|
+
@click="isAnimated = !isAnimated"
|
|
306
|
+
>
|
|
307
|
+
{{ isAnimated ? 'Stop Animation' : 'Start Animation' }}
|
|
308
|
+
</button>
|
|
309
|
+
</div>
|
|
310
|
+
<p class="tw-text-sm tw-text-gray-600">
|
|
311
|
+
Click the button to toggle animation
|
|
312
|
+
</p>
|
|
313
|
+
</div>
|
|
314
|
+
\`
|
|
315
|
+
})`,...w.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`() => ({
|
|
316
|
+
components: {
|
|
317
|
+
SparkleIcon
|
|
318
|
+
},
|
|
319
|
+
template: \`
|
|
320
|
+
<div class="tw-p-4">
|
|
321
|
+
<p class="tw-text-sm tw-text-gray-600 tw-mb-4">
|
|
322
|
+
Note: Spinner variant uses larger sizes (sm=36px, md=48px, lg=60px) for better visibility
|
|
323
|
+
</p>
|
|
324
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
325
|
+
<div class="tw-text-center">
|
|
326
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="sm" />
|
|
327
|
+
<p class="tw-text-xs tw-mt-2">Small (36px)</p>
|
|
328
|
+
</div>
|
|
329
|
+
<div class="tw-text-center">
|
|
330
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="md" />
|
|
331
|
+
<p class="tw-text-xs tw-mt-2">Medium (48px)</p>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="tw-text-center">
|
|
334
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="lg" />
|
|
335
|
+
<p class="tw-text-xs tw-mt-2">Large (60px)</p>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
\`
|
|
340
|
+
})`,...d.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`() => ({
|
|
341
|
+
components: {
|
|
342
|
+
SparkleIcon
|
|
343
|
+
},
|
|
344
|
+
template: \`
|
|
345
|
+
<div class="tw-p-6">
|
|
346
|
+
<div class="tw-mb-6">
|
|
347
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Regular Sparkle (12px, 16px, 20px)</h4>
|
|
348
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
349
|
+
<div class="tw-text-center">
|
|
350
|
+
<SparkleIcon :animated="true" size="sm" />
|
|
351
|
+
<p class="tw-text-xs tw-mt-2">sm</p>
|
|
352
|
+
</div>
|
|
353
|
+
<div class="tw-text-center">
|
|
354
|
+
<SparkleIcon :animated="true" size="md" />
|
|
355
|
+
<p class="tw-text-xs tw-mt-2">md</p>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="tw-text-center">
|
|
358
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
359
|
+
<p class="tw-text-xs tw-mt-2">lg</p>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<div>
|
|
365
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Sparkle with Spinner (36px, 48px, 60px)</h4>
|
|
366
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
367
|
+
<div class="tw-text-center">
|
|
368
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="sm" />
|
|
369
|
+
<p class="tw-text-xs tw-mt-2">sm</p>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="tw-text-center">
|
|
372
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="md" />
|
|
373
|
+
<p class="tw-text-xs tw-mt-2">md</p>
|
|
374
|
+
</div>
|
|
375
|
+
<div class="tw-text-center">
|
|
376
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="lg" />
|
|
377
|
+
<p class="tw-text-xs tw-mt-2">lg</p>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
|
|
382
|
+
<p class="tw-text-sm tw-text-gray-600 tw-mt-4">
|
|
383
|
+
Note: The spinner variant automatically uses larger sizes for better visibility of the spinner arc.
|
|
384
|
+
</p>
|
|
385
|
+
</div>
|
|
386
|
+
\`
|
|
387
|
+
})`,...m.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`() => ({
|
|
388
|
+
components: {
|
|
389
|
+
SparkleIcon
|
|
390
|
+
},
|
|
391
|
+
template: \`
|
|
392
|
+
<div class="tw-p-6">
|
|
393
|
+
<div class="tw-mb-4">
|
|
394
|
+
<h3 class="tw-text-lg tw-font-bold tw-mb-2">Color Prop</h3>
|
|
395
|
+
<p class="tw-text-sm tw-text-gray-600 tw-mb-4">
|
|
396
|
+
Use the color prop to customize the icon color with hex values.
|
|
397
|
+
</p>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
401
|
+
<div class="tw-text-center">
|
|
402
|
+
<SparkleIcon :animated="true" size="lg" color="#FF0000" />
|
|
403
|
+
<p class="tw-text-xs tw-mt-2">Red</p>
|
|
404
|
+
<p class="tw-text-xs tw-text-gray-500">#FF0000</p>
|
|
405
|
+
</div>
|
|
406
|
+
<div class="tw-text-center">
|
|
407
|
+
<SparkleIcon :animated="true" size="lg" color="#00FF00" />
|
|
408
|
+
<p class="tw-text-xs tw-mt-2">Green</p>
|
|
409
|
+
<p class="tw-text-xs tw-text-gray-500">#00FF00</p>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="tw-text-center">
|
|
412
|
+
<SparkleIcon :animated="true" size="lg" color="#0000FF" />
|
|
413
|
+
<p class="tw-text-xs tw-mt-2">Blue</p>
|
|
414
|
+
<p class="tw-text-xs tw-text-gray-500">#0000FF</p>
|
|
415
|
+
</div>
|
|
416
|
+
<div class="tw-text-center">
|
|
417
|
+
<SparkleIcon :animated="true" size="lg" color="#FF6B00" />
|
|
418
|
+
<p class="tw-text-xs tw-mt-2">Orange</p>
|
|
419
|
+
<p class="tw-text-xs tw-text-gray-500">#FF6B00</p>
|
|
420
|
+
</div>
|
|
421
|
+
<div class="tw-text-center">
|
|
422
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
423
|
+
<p class="tw-text-xs tw-mt-2">Default</p>
|
|
424
|
+
<p class="tw-text-xs tw-text-gray-500">#3F59F6</p>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
</div>
|
|
428
|
+
\`
|
|
429
|
+
})`,...C.parameters?.docs?.source}}};L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`() => ({
|
|
430
|
+
components: {
|
|
431
|
+
SparkleIcon
|
|
432
|
+
},
|
|
433
|
+
template: \`
|
|
434
|
+
<div class="tw-p-6">
|
|
435
|
+
<div class="tw-mb-4">
|
|
436
|
+
<h3 class="tw-text-lg tw-font-bold tw-mb-2">ColorClass Prop</h3>
|
|
437
|
+
<p class="tw-text-sm tw-text-gray-600 tw-mb-4">
|
|
438
|
+
Use the colorClass prop to apply Tailwind color classes to the icon.
|
|
439
|
+
</p>
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
<div class="tw-flex tw-gap-4 tw-items-center">
|
|
443
|
+
<div class="tw-text-center">
|
|
444
|
+
<SparkleIcon :animated="true" size="lg" color-class="tw-text-secondary-500" />
|
|
445
|
+
<p class="tw-text-xs tw-mt-2">Secondary</p>
|
|
446
|
+
<p class="tw-text-xs tw-text-gray-500">tw-text-secondary-500</p>
|
|
447
|
+
</div>
|
|
448
|
+
<div class="tw-text-center">
|
|
449
|
+
<SparkleIcon :animated="true" size="lg" color-class="tw-text-info-500" />
|
|
450
|
+
<p class="tw-text-xs tw-mt-2">Info</p>
|
|
451
|
+
<p class="tw-text-xs tw-text-gray-500">tw-text-info-500</p>
|
|
452
|
+
</div>
|
|
453
|
+
<div class="tw-text-center">
|
|
454
|
+
<SparkleIcon :animated="true" size="lg" color-class="tw-text-error-500" />
|
|
455
|
+
<p class="tw-text-xs tw-mt-2">Error</p>
|
|
456
|
+
<p class="tw-text-xs tw-text-gray-500">tw-text-error-500</p>
|
|
457
|
+
</div>
|
|
458
|
+
<div class="tw-text-center">
|
|
459
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
460
|
+
<p class="tw-text-xs tw-mt-2">Default</p>
|
|
461
|
+
<p class="tw-text-xs tw-text-gray-500">#3F59F6</p>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
\`
|
|
466
|
+
})`,...L.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`() => ({
|
|
467
|
+
components: {
|
|
468
|
+
SparkleIcon
|
|
469
|
+
},
|
|
470
|
+
template: \`
|
|
471
|
+
<div class="tw-p-6">
|
|
472
|
+
<h3 class="tw-text-lg tw-font-bold tw-mb-4">Sparkle Icon Showcase</h3>
|
|
473
|
+
|
|
474
|
+
<div class="tw-mb-6">
|
|
475
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Static Icons</h4>
|
|
476
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
477
|
+
<div class="tw-text-center">
|
|
478
|
+
<SparkleIcon size="sm" />
|
|
479
|
+
<p class="tw-text-xs tw-mt-1">Small (12px)</p>
|
|
480
|
+
</div>
|
|
481
|
+
<div class="tw-text-center">
|
|
482
|
+
<SparkleIcon size="md" />
|
|
483
|
+
<p class="tw-text-xs tw-mt-1">Medium (16px)</p>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="tw-text-center">
|
|
486
|
+
<SparkleIcon size="lg" />
|
|
487
|
+
<p class="tw-text-xs tw-mt-1">Large (20px)</p>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
|
|
492
|
+
<div class="tw-mb-6">
|
|
493
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated Icons</h4>
|
|
494
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
495
|
+
<div class="tw-text-center">
|
|
496
|
+
<SparkleIcon :animated="true" size="sm" />
|
|
497
|
+
<p class="tw-text-xs tw-mt-1">Small (12px)</p>
|
|
498
|
+
</div>
|
|
499
|
+
<div class="tw-text-center">
|
|
500
|
+
<SparkleIcon :animated="true" size="md" />
|
|
501
|
+
<p class="tw-text-xs tw-mt-1">Medium (16px)</p>
|
|
502
|
+
</div>
|
|
503
|
+
<div class="tw-text-center">
|
|
504
|
+
<SparkleIcon :animated="true" size="lg" />
|
|
505
|
+
<p class="tw-text-xs tw-mt-1">Large (20px)</p>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
</div>
|
|
509
|
+
|
|
510
|
+
<div class="tw-mb-6">
|
|
511
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated with Spinner</h4>
|
|
512
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
513
|
+
<div class="tw-text-center">
|
|
514
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="sm" />
|
|
515
|
+
<p class="tw-text-xs tw-mt-1">Small (36px)</p>
|
|
516
|
+
</div>
|
|
517
|
+
<div class="tw-text-center">
|
|
518
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="md" />
|
|
519
|
+
<p class="tw-text-xs tw-mt-1">Medium (48px)</p>
|
|
520
|
+
</div>
|
|
521
|
+
<div class="tw-text-center">
|
|
522
|
+
<SparkleIcon :animated="true" :withSpinner="true" size="lg" />
|
|
523
|
+
<p class="tw-text-xs tw-mt-1">Large (60px)</p>
|
|
524
|
+
</div>
|
|
525
|
+
</div>
|
|
526
|
+
</div>
|
|
527
|
+
|
|
528
|
+
<div>
|
|
529
|
+
<h4 class="tw-text-md tw-font-semibold tw-mb-2">Custom Sizes</h4>
|
|
530
|
+
<div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
|
|
531
|
+
<div class="tw-text-center">
|
|
532
|
+
<SparkleIcon :animated="true" :size="24" />
|
|
533
|
+
<p class="tw-text-xs tw-mt-1">24px</p>
|
|
534
|
+
</div>
|
|
535
|
+
<div class="tw-text-center">
|
|
536
|
+
<SparkleIcon :animated="true" :size="36" />
|
|
537
|
+
<p class="tw-text-xs tw-mt-1">36px</p>
|
|
538
|
+
</div>
|
|
539
|
+
<div class="tw-text-center">
|
|
540
|
+
<SparkleIcon :animated="true" :size="48" />
|
|
541
|
+
<p class="tw-text-xs tw-mt-1">48px</p>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
</div>
|
|
546
|
+
\`
|
|
547
|
+
})`,...x.parameters?.docs?.source}}};const J=["Default","Static","Animated","CustomSizes","Interactive","WithSpinner","Comparison","ColorProps","ColorClassProps","Showcase"];export{o as Animated,L as ColorClassProps,C as ColorProps,m as Comparison,p as CustomSizes,l as Default,w as Interactive,x as Showcase,c as Static,d as WithSpinner,J as __namedExportsOrder,j as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
li[data-v-3c4d624f]:not(:last-child){margin-right:.25rem}
|