@designcrowd/fe-shared-lib 1.5.26 → 1.5.27

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 (146) hide show
  1. package/.storybook-static/assets/Auth-BEjq1pFf.css +1 -0
  2. package/.storybook-static/assets/Auth.stories-6JyBk-uq.js +490 -0
  3. package/.storybook-static/assets/AuthCrazyDomains.stories-DM4RpsMO.js +73 -0
  4. package/.storybook-static/assets/Button-BkoQdoaq.css +1 -0
  5. package/.storybook-static/assets/Button-DUOSTNbh.js +1 -0
  6. package/.storybook-static/assets/ButtonGroup-DDPXuhxR.css +1 -0
  7. package/.storybook-static/assets/ButtonGroup.stories-DYoET5Zw.js +504 -0
  8. package/.storybook-static/assets/ButtonPrimary-Bu6bXb_c.css +1 -0
  9. package/.storybook-static/assets/ButtonPrimary-C1HLT2L3.js +1 -0
  10. package/.storybook-static/assets/Buttons.stories-aTFEest4.js +761 -0
  11. package/.storybook-static/assets/ButtonsCrazyDomains.stories-BDEdg2Ki.js +199 -0
  12. package/.storybook-static/assets/Checkbox.mixin-DkHpdvGa.js +1 -0
  13. package/.storybook-static/assets/Checkbox.stories-CA6Ke9oy.js +246 -0
  14. package/.storybook-static/assets/Checktile.stories-DAvOuYro.js +88 -0
  15. package/.storybook-static/assets/CollapsiblePanel.stories-Dn1XwwpU.js +56 -0
  16. package/.storybook-static/assets/ColorPicker.stories-DTkwaAKN.js +73 -0
  17. package/.storybook-static/assets/CopyToClipboardText.stories-CYAv-s36.js +32 -0
  18. package/.storybook-static/assets/Dropdown.stories-hHlWTMpq.js +159 -0
  19. package/.storybook-static/assets/DropdownItem-BIPkoata.js +1 -0
  20. package/.storybook-static/assets/DropdownItem-BV-BdThU.css +1 -0
  21. package/.storybook-static/assets/FormControl.mixin-Z8ORnl4_.js +1 -0
  22. package/.storybook-static/assets/HashRouteModal.stories-t0ZML3rG.js +64 -0
  23. package/.storybook-static/assets/HelloBar-YB27gvZE.js +1 -0
  24. package/.storybook-static/assets/HelloBar.stories-D4kmUZop.js +342 -0
  25. package/.storybook-static/assets/Icon-BKxOWZPO.js +145 -0
  26. package/.storybook-static/assets/Icon.stories-BqE4TmG1.js +151 -0
  27. package/.storybook-static/assets/Icon.stories-Fv8jSyX3.js +791 -0
  28. package/.storybook-static/assets/Loader-DLZpiqG9.js +1 -0
  29. package/.storybook-static/assets/LogoBusinessBrandColours-CeAaMKke.css +1 -0
  30. package/.storybook-static/assets/LogoBusinessBrandColours-CnS5MYDX.js +1 -0
  31. package/.storybook-static/assets/LogoBusinessBrandColours.stories-QdrZqhMQ.js +36 -0
  32. package/.storybook-static/assets/Masonry-C2MNiGg0.css +1 -0
  33. package/.storybook-static/assets/Masonry.stories-CYO67z8l.js +71 -0
  34. package/.storybook-static/assets/Modal-CGwEIF5R.css +1 -0
  35. package/.storybook-static/assets/Modal-DWDuRSAE.js +1 -0
  36. package/.storybook-static/assets/Modal.stories-uhl_4yGf.js +345 -0
  37. package/.storybook-static/assets/Notice.stories-BP3l1NFU.js +222 -0
  38. package/.storybook-static/assets/NumberStepper-Blffv09R.css +1 -0
  39. package/.storybook-static/assets/NumberStepper.stories-BeUZfA-C.js +64 -0
  40. package/.storybook-static/assets/PaymentConfigList-BpUMV6cp.css +1 -0
  41. package/.storybook-static/assets/PaymentConfigList.stories-CVHxg1ka.js +130 -0
  42. package/.storybook-static/assets/Picture-CPyaAiI1.js +1 -0
  43. package/.storybook-static/assets/Picture.stories-BdQ6Koo2.js +119 -0
  44. package/.storybook-static/assets/Pill-CpGZCb39.js +1 -0
  45. package/.storybook-static/assets/Pill.stories-BVDivYOY.js +18 -0
  46. package/.storybook-static/assets/PillBar-os4mJV3M.css +1 -0
  47. package/.storybook-static/assets/PillBar.stories-Dgp2DDmF.js +41 -0
  48. package/.storybook-static/assets/Price-BBo_v_DU.js +1 -0
  49. package/.storybook-static/assets/Price.stories-JstP9L09.js +358 -0
  50. package/.storybook-static/assets/PromoCard.stories-CWKGBEKG.js +299 -0
  51. package/.storybook-static/assets/PublishBrandPageModal-Q9-mNG1q.css +1 -0
  52. package/.storybook-static/assets/PublishBrandPageModal.stories-CYEZ4ls2.js +324 -0
  53. package/.storybook-static/assets/SearchBar.stories-CfVmuWji.js +12 -0
  54. package/.storybook-static/assets/Select-Dw-zvSUg.css +1 -0
  55. package/.storybook-static/assets/Select.stories-EdNZQHYu.js +108 -0
  56. package/.storybook-static/assets/SellDomainNameList.fixtures-LC6fjr_b.js +1 -0
  57. package/.storybook-static/assets/SellDomainNameListModal-C7mOVElo.js +1 -0
  58. package/.storybook-static/assets/SellDomainNameListModal-DH6khE10.css +1 -0
  59. package/.storybook-static/assets/SellDomainNameListModal.stories-DFwSK3G7.js +71 -0
  60. package/.storybook-static/assets/SellDomainNameListSearchResult-Cpxq0jDA.css +1 -0
  61. package/.storybook-static/assets/SellDomainNameListSearchResult-Cx22LEIX.js +1 -0
  62. package/.storybook-static/assets/SellDomainNameSearchWithResults-DFzBhj00.js +1 -0
  63. package/.storybook-static/assets/SellDomainNameSearchWithResults.stories-DKGuPPpj.js +37 -0
  64. package/.storybook-static/assets/SellDomainNameWidget.stories-DNnX4xt_.js +36 -0
  65. package/.storybook-static/assets/SignIn-CE_SoJx-.css +1 -0
  66. package/.storybook-static/assets/SignIn-IL0CRcdp.js +1 -0
  67. package/.storybook-static/assets/Slider-Cog2FFdj.css +1 -0
  68. package/.storybook-static/assets/Slider.stories-CMJ5ugMO.js +141 -0
  69. package/.storybook-static/assets/SparkleIcon.stories-BZksmQE5.js +547 -0
  70. package/.storybook-static/assets/StarRating-BtKh7pzm.css +1 -0
  71. package/.storybook-static/assets/StarRating.stories-ChJp556v.js +45 -0
  72. package/.storybook-static/assets/TabMenu.stories-wiuV4LXX.js +47 -0
  73. package/.storybook-static/assets/TextCopyField-Dzv5HIy6.js +1 -0
  74. package/.storybook-static/assets/TextCopyField.stories-CijK8qce.js +47 -0
  75. package/.storybook-static/assets/TextInput-BHzkiJOm.js +1 -0
  76. package/.storybook-static/assets/TextInput.stories-58ZMik7R.js +233 -0
  77. package/.storybook-static/assets/Textarea.stories-JRiJv3-v.js +207 -0
  78. package/.storybook-static/assets/Toggle.stories-CTp5mIN9.js +161 -0
  79. package/.storybook-static/assets/Tooltip-BhRZYr7B.js +1 -0
  80. package/.storybook-static/assets/Tooltip-DyXIgFQH.css +1 -0
  81. package/.storybook-static/assets/Tooltip.stories-DEHShenH.js +953 -0
  82. package/.storybook-static/assets/UploadYourLogoApplication-nGy7BMKH.css +9 -0
  83. package/.storybook-static/assets/UploadYourLogoApplication.stories-Cdk8mmFd.js +194 -0
  84. package/.storybook-static/assets/UploadYourLogoDropzone-BoFs5oM3.js +24 -0
  85. package/.storybook-static/assets/UploadYourLogoDropzone-DQqACf-e.css +1 -0
  86. package/.storybook-static/assets/UploadYourLogoDropzone.stories-BVr13-q9.js +55 -0
  87. package/.storybook-static/assets/UploadedLogoSearchResultCard.stories-BUMq40yJ.js +79 -0
  88. package/.storybook-static/assets/WebsiteContextualUpgradeModal-BaDRNoWw.css +1 -0
  89. package/.storybook-static/assets/WebsiteContextualUpgradeModal.stories-DsIAXVdb.js +211 -0
  90. package/.storybook-static/assets/_commonjsHelpers-D6-XlEtG.js +1 -0
  91. package/.storybook-static/assets/_plugin-vue_export-helper-DlAUqK2U.js +1 -0
  92. package/.storybook-static/assets/api-lSJGRrF2.js +1 -0
  93. package/.storybook-static/assets/axe-CVuRbXyi.js +30 -0
  94. package/.storybook-static/assets/brand-crowd-api.client-BI9zXww7.js +1 -0
  95. package/.storybook-static/assets/bundled-translations-BoWhEDU_.js +1 -0
  96. package/.storybook-static/assets/bundled-translations.de-DE-C4lqla4O.js +1 -0
  97. package/.storybook-static/assets/bundled-translations.es-ES-BxMIllUH.js +1 -0
  98. package/.storybook-static/assets/bundled-translations.fr-CA-MxZpyz0w.js +1 -0
  99. package/.storybook-static/assets/bundled-translations.fr-FR-N7UPCZVr.js +1 -0
  100. package/.storybook-static/assets/bundled-translations.pt-BR-C8tscYuG.js +1 -0
  101. package/.storybook-static/assets/bundled-translations.pt-PT-Dszj5Xfa.js +1 -0
  102. package/.storybook-static/assets/carousel-BelyIYOK.css +1 -0
  103. package/.storybook-static/assets/carousel.stories-IeFZNB6E.js +668 -0
  104. package/.storybook-static/assets/event-constants-CMO9VQVu.js +1 -0
  105. package/.storybook-static/assets/iframe-Dd7cBPzL.js +1126 -0
  106. package/.storybook-static/assets/index-Bz4la0P9.js +6 -0
  107. package/.storybook-static/assets/index-_aBqSnL8.js +29 -0
  108. package/.storybook-static/assets/matchers-7Z3WT2CE-OIiPHzXs.js +14 -0
  109. package/.storybook-static/assets/mediaQueryMixin-CISNqd93.js +1 -0
  110. package/.storybook-static/assets/tracking-ATsLLehC.js +1 -0
  111. package/.storybook-static/css/tailwind-brandCrowd.css +2508 -0
  112. package/.storybook-static/css/tailwind-brandPage.css +2188 -0
  113. package/.storybook-static/css/tailwind-crazyDomains.css +2508 -0
  114. package/.storybook-static/css/tailwind-designCom.css +2508 -0
  115. package/.storybook-static/css/tailwind-designCrowd.css +2508 -0
  116. package/.storybook-static/favicon.svg +1 -0
  117. package/.storybook-static/iframe.html +694 -0
  118. package/.storybook-static/index.html +156 -0
  119. package/.storybook-static/index.json +1 -0
  120. package/.storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  121. package/.storybook-static/nunito-sans-bold.woff2 +0 -0
  122. package/.storybook-static/nunito-sans-italic.woff2 +0 -0
  123. package/.storybook-static/nunito-sans-regular.woff2 +0 -0
  124. package/.storybook-static/project.json +1 -0
  125. package/.storybook-static/sb-addons/a11y-1/manager-bundle.js +5 -0
  126. package/.storybook-static/sb-addons/links-2/manager-bundle.js +3 -0
  127. package/.storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +188 -0
  128. package/.storybook-static/sb-addons/themes-3/manager-bundle.js +3 -0
  129. package/.storybook-static/sb-common-assets/favicon.svg +1 -0
  130. package/.storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  131. package/.storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  132. package/.storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  133. package/.storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  134. package/.storybook-static/sb-manager/globals-module-info.js +797 -0
  135. package/.storybook-static/sb-manager/globals-runtime.js +72062 -0
  136. package/.storybook-static/sb-manager/globals.js +34 -0
  137. package/.storybook-static/sb-manager/runtime.js +13002 -0
  138. package/dist/css/tailwind-brandCrowd.css +113 -7
  139. package/dist/css/tailwind-brandPage.css +109 -7
  140. package/dist/css/tailwind-crazyDomains.css +113 -7
  141. package/dist/css/tailwind-designCom.css +113 -7
  142. package/dist/css/tailwind-designCrowd.css +113 -7
  143. package/package.json +1 -1
  144. package/src/atoms/components/Price/Price.stories.js +42 -21
  145. package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue +4 -5
  146. package/tailwind.config.js +1 -1
@@ -0,0 +1,18 @@
1
+ import{P as n}from"./Pill-CpGZCb39.js";import"./iframe-Dd7cBPzL.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const i={title:"Components/Pill",component:n},t=()=>({components:{Pill:n},template:`
2
+ <div class="tw-font-sans">
3
+ <Pill class="tw-text-white tw-my-2 tw-w-8" :style="{ background: 'blue' }">Blue</Pill>
4
+ <Pill class="tw-text-white tw-my-2 tw-w-8" :style="{ background: 'red' }">Red</Pill>
5
+ </div>
6
+ `});var e,l,s;t.parameters={...t.parameters,docs:{...(e=t.parameters)==null?void 0:e.docs,source:{originalSource:`() => {
7
+ return {
8
+ components: {
9
+ Pill
10
+ },
11
+ template: \`
12
+ <div class="tw-font-sans">
13
+ <Pill class="tw-text-white tw-my-2 tw-w-8" :style="{ background: 'blue' }">Blue</Pill>
14
+ <Pill class="tw-text-white tw-my-2 tw-w-8" :style="{ background: 'red' }">Red</Pill>
15
+ </div>
16
+ \`
17
+ };
18
+ }`,...(s=(l=t.parameters)==null?void 0:l.docs)==null?void 0:s.source}}};const c=["Sample"];export{t as Sample,c as __namedExportsOrder,i as default};
@@ -0,0 +1 @@
1
+ .carousel-filter__category{white-space:nowrap}.carousel-filter__category:not(:last-child){margin-right:.75rem}
@@ -0,0 +1,41 @@
1
+ import{B as k}from"./Button-DUOSTNbh.js";import{c as n,F as w,r as U,a as x,o as i,h as D}from"./iframe-Dd7cBPzL.js";import{_ as N}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-C1HLT2L3.js";import"./Icon-BKxOWZPO.js";const p={components:{Button:k},props:{categories:{type:Array,required:!0,default:()=>[]},initialCategory:{type:String,required:!1,default:"Popular"},isDarkMode:{type:Boolean,default:!1}},data(){return{selectedCategory:null}},created(){this.selectedCategory=this.initialCategory},methods:{onSelectCategory(r){this.selectedCategory=r.name,this.$emit("on-click-category",r)}}},P={class:"tw-list-none tw-flex tw-overflow-y-hidden tw-overflow-x-auto tw-m-0 tw-p-0"};function I(r,v,o,B,y,b){const h=x("Button");return i(),n("ul",P,[(i(!0),n(w,null,U(o.categories,e=>(i(),n("li",{key:e.name,class:"carousel-filter__category"},[D(h,{label:e.name,variant:o.isDarkMode?"dark-mode-pill":"pill",active:e.name===y.selectedCategory,onOnClick:S=>b.onSelectCategory(e)},null,8,["label","variant","active","onOnClick"])]))),128))])}const s=N(p,[["render",I]]);p.__docgenInfo={exportName:"default",displayName:"PillBar",description:"",tags:{},props:[{name:"categories",type:{name:"array"},required:!0,defaultValue:{func:!1,value:"[]"}},{name:"initialCategory",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'Popular'"}},{name:"isDarkMode",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"on-click-category",type:{names:["undefined"]}}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/PillBar/PillBar.vue"]};const f=[{name:"Popular",templateTypes:[{name:"Logo Designs",category:"Brand Identity",editorUrl:"logo-design-modal",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-logo-design@2x.png",carouselImageUrl:null,dimensions:"1280 x 1024",description:"View and edit your logo",height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Logo Designs",pluralName:"Logo Designs",token:"b0349875-33ac-4b93-a581-42f93255f461"},{name:"Business Card",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/business%20card%20horizontal",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-business-card@2x.png",carouselImageUrl:null,dimensions:"3.5 x 2 in",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:null,pluralName:"Business Cards",token:"4b6158b3-c992-4799-a838-d060565c32e7"},{name:"Facebook cover",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/facebook%20cover",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-facebook@2x.png",carouselImageUrl:null,dimensions:"820 x 312 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Facebook Cover",pluralName:"Facebook Covers",token:"fd5a796f-4f74-46a4-b5eb-cf5e478cd095"},{name:"Instagram post",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/instagram%20post",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-instagram@2x.png",carouselImageUrl:null,dimensions:"1080 x 1080 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Instagram Post",pluralName:"Instagram Posts",token:"bce84983-7d85-499e-8b82-3474b625867e"},{name:"Brand Page",category:"Website",editorUrl:"/maker/brand-page/manage/create?logoDraftToken=32e0c206-edc5-4452-9925-2ab43ffd947c",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-business-card-vertical@2x.png",carouselImageUrl:null,dimensions:"Default",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Web Page",pluralName:"Web Pages",token:"88102dd6-2601-48b2-b6a3-1ab6f5600ce7"},{name:"Facebook post",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/facebook%20post",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-facebook@2x.png",carouselImageUrl:null,dimensions:"940 x 788 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Facebook Post",pluralName:"Facebook Posts",token:"f6ecd7bd-ed25-4e9e-b500-a1452defb15e"},{name:"YouTube cover (channel art)",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/youtube%20cover%20(channel%20art)",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-youtube@2x.png",carouselImageUrl:null,dimensions:"2560 x 1440 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"YouTube Banner",pluralName:"YouTube Banners",token:"b5f801a9-625f-45df-bf31-af2ccf594018"}]},{name:"Social Media Covers",templateTypes:[{name:"Facebook cover",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/facebook%20cover",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-facebook@2x.png",carouselImageUrl:null,dimensions:"820 x 312 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Facebook Cover",pluralName:"Facebook Covers",token:"fd5a796f-4f74-46a4-b5eb-cf5e478cd095"},{name:"YouTube cover (channel art)",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/youtube%20cover%20(channel%20art)",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-youtube@2x.png",carouselImageUrl:null,dimensions:"2560 x 1440 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"YouTube Banner",pluralName:"YouTube Banners",token:"b5f801a9-625f-45df-bf31-af2ccf594018"},{name:"Twitch banner",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/twitch%20banner",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-tiwtch@2x.png",carouselImageUrl:null,dimensions:"1920 x 480 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Twitch Banner",pluralName:"Twitch Banners",token:"73529324-07c5-4306-b230-89a200f30f76"},{name:"LinkedIn banner",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/linkedin%20banner",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-linkedin@2x.png",carouselImageUrl:null,dimensions:"1584 x 396 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"LinkedIn Banner",pluralName:"LinkedIn Banners",token:"47b661fe-05f7-4d75-ae79-7c1b2d582978"},{name:"Facebook event cover",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/facebook%20event%20cover",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-facebook-event@2x.png",carouselImageUrl:null,dimensions:"1920 x 1080 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Facebook Event Cover",pluralName:"Facebook Event Covers",token:"b239cf78-9c34-492f-a9ff-e66e3e1b40e7"},{name:"SoundCloud banner",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/soundcloud%20banner",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-soundcloud@2x.png",carouselImageUrl:null,dimensions:"2480 x 520 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"SoundCloud Banner",pluralName:"SoundCloud Banners",token:"7344e35c-e6ba-4f20-8957-9fb3bc02d190"},{name:"Tumblr banner",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/tumblr%20banner",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-tumblr@2x.png",carouselImageUrl:null,dimensions:"3000 x 1055 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Tumblr Banner",pluralName:"Tumblr Banners",token:"709b5da5-9cd3-469d-9ed0-b93649b0803e"},{name:"Twitter header (cover)",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/twitter%20header%20(cover)",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-twitter@2x.png",carouselImageUrl:null,dimensions:"1500 x 500 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Twitter Header",pluralName:"Twitter Headers",token:"f99d0426-fd9e-4d59-a38c-b3160949a089"},{name:"Pinterest board cover",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/pinterest%20board%20cover",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-pinterest@2x.png",carouselImageUrl:null,dimensions:"222 x 150 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Pinterest Covers",pluralName:"Pinterest Board Covers",token:"c4b8232c-cb16-4126-9a01-2312d70e1e88"},{name:"Zoom background",category:"Social Media Covers",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/zoom%20background",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-cover-zoom@2x.png",carouselImageUrl:null,dimensions:"1280 x 720 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Zoom Background",pluralName:"Zoom Backgrounds",token:"c08e1a37-0472-444b-95a2-f37a663c0f5f"}]},{name:"Social Media Posts",templateTypes:[{name:"Instagram post",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/instagram%20post",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-instagram@2x.png",carouselImageUrl:null,dimensions:"1080 x 1080 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Instagram Post",pluralName:"Instagram Posts",token:"bce84983-7d85-499e-8b82-3474b625867e"},{name:"Instagram story",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/instagram%20story",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-instagram-story@2x.png",carouselImageUrl:null,dimensions:"1080 x 1920 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Instagram Story",pluralName:"Instagram Stories",token:"606e1476-be7e-40d1-b41e-fd656bf7d7df"},{name:"Facebook post",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/facebook%20post",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-facebook@2x.png",carouselImageUrl:null,dimensions:"940 x 788 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Facebook Post",pluralName:"Facebook Posts",token:"f6ecd7bd-ed25-4e9e-b500-a1452defb15e"},{name:"Tumblr post",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/tumblr%20post",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-tumblr@2x.png",carouselImageUrl:null,dimensions:"500 x 750 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Tumblr Post",pluralName:"Tumblr Posts",token:"cce321b7-3fa9-4b9b-b588-0bce143b92e5"},{name:"Facebook story",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/facebook%20story",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-facebook-story@2x.png",carouselImageUrl:null,dimensions:"1080 x 1920 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Facebook Story",pluralName:"Facebook Stories",token:"b9500b5e-a010-4654-a1d1-572e8465ecbe"},{name:"Whatsapp story",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/whatsapp%20story",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-whatsapp@2x.png",carouselImageUrl:null,dimensions:"1080 x 1920 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Whatsapp Story",pluralName:"Whatsapp Stories",token:"a7b11991-2fb2-4e99-82b2-ac6303f3b0e1"},{name:"YouTube thumbnail (on videos)",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/youtube%20thumbnail%20(on%20videos)",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-youtube-thumbnail@2x.png",carouselImageUrl:null,dimensions:"1280 x 720 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"YouTube Thumbnail",pluralName:"YouTube Thumbnails",token:"f414305c-eda8-4af0-a7a3-8de64f696c01"},{name:"Facebook ad",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/facebook%20ad",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-facebook-ad@2x.png",carouselImageUrl:null,dimensions:"1200 x 628 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Facebook Ad",pluralName:"Facebook Ads",token:"a5c8754a-ebe3-4074-8a57-a0b70f1e47b9"},{name:"Twitter post",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/twitter%20post",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-twitter@2x.png",carouselImageUrl:null,dimensions:"1024 x 512 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Twitter Post",pluralName:"Twitter Posts",token:"e5dc0278-7e12-48dc-813f-f212bbbc747e"},{name:"Snapchat geofilters, ads and lenses",category:"Social Media Posts",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/snapchat%20geofilters,%20ads%20and%20lenses",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-social-media-post-snapchat@2x.png",carouselImageUrl:null,dimensions:"1080 x 1920 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Snapchat Design",pluralName:"Snapchat Designs",token:"16680a40-3922-4e52-9787-ba0ecbd05ea9"}]},{name:"Profile Pictures",templateTypes:[{name:"Facebook profile picture",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/facebook%20profile%20picture",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-facebook@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Facebook Profile Picture",pluralName:"Facebook Profile Pictures",token:"de3f1998-4daa-4f00-94f1-805d44909ca9"},{name:"Instagram profile picture",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/instagram%20profile%20picture",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-instagram@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Instagram Profile Picture",pluralName:"Instagram Profile Pictures",token:"c935053f-449a-4c15-8c66-73f7899d8de7"},{name:"Twitch profile picture",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/twitch%20profile%20picture",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-twitch@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Twitch Profile Picture",pluralName:"Twitch Profile Pictures",token:"590a763d-0c35-4ec8-ad43-cd20a06f40e8"},{name:"LinkedIn profile picture",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/linkedin%20profile%20picture",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-linkedin@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"LinkedIn Profile Picture",pluralName:"LinkedIn Profile Pictures",token:"9e372479-f436-4349-8ed1-911ea2f914c7"},{name:"YouTube channel icon",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/youtube%20channel%20icon",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-youtube@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"YouTube Channel Icon",pluralName:"YouTube Channel Icons",token:"4a2314ac-927f-466e-97eb-36d84fb67a44"},{name:"Twitter profile picture",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/twitter%20profile%20picture",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-twitter@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Twitter Profile Picture",pluralName:"Twitter Profile Pictures",token:"11e94819-27dc-44b8-b6ff-6d2961a25f84"},{name:"SoundCloud profile picture",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/soundcloud%20profile%20picture",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-soundcloud@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"SoundCloud Profile Picture",pluralName:"SoundCloud Profile Pictures",token:"5d9756fa-1e59-4e53-b4b1-e44bfad6f83f"},{name:"Pinterest profile picture",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/pinterest%20profile%20picture",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-pinterest@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Pinterest Profile Picture",pluralName:"Pinterest Profile Pictures",token:"40d1de23-89c5-4806-83d5-6dd653bd07e1"},{name:"Tumblr profile picture",category:"Profile Pictures",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/tumblr%20profile%20picture",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-profile-pic-tumblr@2x.png",carouselImageUrl:null,dimensions:"1000 x 1000 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Tumblr Profile Picture",pluralName:"Tumblr Profile Pictures",token:"3a892cea-41b0-422b-bea3-29bb3497ba6c"}]},{name:"Brand Identity",templateTypes:[{name:"Business card horizontal",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/business%20card%20horizontal",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-business-card@2x.png",carouselImageUrl:null,dimensions:"3.5 x 2 in",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Business Card",pluralName:"Business cards horizontal",token:"4b6158b3-c992-4799-a838-d060565c32e7"},{name:"Business card square",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/business%20card%20square",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-business-card-square@2x.png",carouselImageUrl:null,dimensions:"2.5 x 2.5 in",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Business Card",pluralName:"Business cards square",token:"0707e6b7-f460-4b11-808f-24a9178e304f"},{name:"Business card vertical",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/business%20card%20vertical",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-business-card-vertical@2x.png",carouselImageUrl:null,dimensions:"2 x 3.5 in",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Business Card",pluralName:"Business cards vertical",token:"1e42a0e3-3c5a-4226-b884-3e3bcaa5d3f4"},{name:"Email Signature",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/email%20signature",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-email-signature@2x.png",carouselImageUrl:null,dimensions:"600 x 200 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Email Signature",pluralName:"Email Signatures",token:"ef11f0d4-5549-4c26-9e3f-ccac8c91e4a2"},{name:"Letterhead",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/letterhead",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-letterhead@2x.png",carouselImageUrl:null,dimensions:"21 x 29.7 cm (A4)",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Letterhead",pluralName:"Letterheads",token:"eef6343e-4d4e-49e5-b4ae-ea73418daf3e"},{name:"Favicon",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/favicon",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-favicon@2x.png",carouselImageUrl:null,dimensions:"32 x 32 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Favicon",pluralName:"Favicons",token:"c83da9fb-e514-450c-995b-240f6b68966d"},{name:"Poster",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/poster",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-poster@2x.png",carouselImageUrl:null,dimensions:"598 x 845 mm (A1)",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Poster",pluralName:"Posters",token:"ff5b1fe0-ac40-4ad2-9ca1-99eae9daad7f"},{name:"Flyer",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/flyer",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-flyer@2x.png",carouselImageUrl:null,dimensions:"21 x 29.7 cm (A4)",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Flyer",pluralName:"Flyers",token:"c34f4e0b-ea57-4d5d-9a64-ac410fd647d2"},{name:"Invoice",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/invoice",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-invoice@2x.png",carouselImageUrl:null,dimensions:"21 x 29.7 cm (A4)",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Invoice",pluralName:"Invoices",token:"60456c4c-158e-4c90-a3cc-1d0d20ae2eb6"},{name:"Menu",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/menu",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-menu@2x.png",carouselImageUrl:null,dimensions:"21 x 29.7 cm (A4)",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Menu",pluralName:"Menus",token:"ab7d3c84-63b6-4ac5-8b76-11190c220869"},{name:"Postcard",category:"Brand Identity",editorUrl:"/maker/mydesigns/new/32e0c206-edc5-4452-9925-2ab43ffd947c/postcard",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-postcard@2x.png",carouselImageUrl:null,dimensions:"151 x 108 mm (A6)",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Postcard",pluralName:"Postcards",token:"581e5ddd-b180-4789-b573-b1f2330b9a0f"},{name:"Logo Designs",category:"Brand Identity",editorUrl:"logo-design-modal",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-brand-identity-logo-design@2x.png",carouselImageUrl:null,dimensions:"1280 x 1024",description:"View and edit your logo",height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:"Logo Designs",pluralName:"Logo Designs",token:"b0349875-33ac-4b93-a581-42f93255f461"}]},{name:"Custom Design",templateTypes:[{name:"Square",category:null,editorUrl:"/maker/mydesigns/new/customdesign?h=1080&w=1080&logoDraftToken=32e0c206-edc5-4452-9925-2ab43ffd947c",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-custom-square.png",carouselImageUrl:null,dimensions:"1080 x 1080 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:null,pluralName:"Square",token:"00000000-0000-0000-0000-000000000000"},{name:"Portrait",category:null,editorUrl:"/maker/mydesigns/new/customdesign?h=1080&w=720&logoDraftToken=32e0c206-edc5-4452-9925-2ab43ffd947c",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-custom-portrait.png",carouselImageUrl:null,dimensions:"1080 x 720 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:null,pluralName:"Portrait",token:"00000000-0000-0000-0000-000000000000"},{name:"Landscape",category:null,editorUrl:"/maker/mydesigns/new/customdesign?h=720&w=1080&logoDraftToken=32e0c206-edc5-4452-9925-2ab43ffd947c",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-custom-landscape.png",carouselImageUrl:null,dimensions:"720 x 1080 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:null,pluralName:"Landscape",token:"00000000-0000-0000-0000-000000000000"},{name:"Tall",category:null,editorUrl:"/maker/mydesigns/new/customdesign?h=1280&w=640&logoDraftToken=32e0c206-edc5-4452-9925-2ab43ffd947c",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-custom-tall.png",carouselImageUrl:null,dimensions:"1280 x 640 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:null,pluralName:"Tall",token:"00000000-0000-0000-0000-000000000000"},{name:"Wide",category:null,editorUrl:"/maker/mydesigns/new/customdesign?h=640&w=1280&logoDraftToken=32e0c206-edc5-4452-9925-2ab43ffd947c",imageUrl:"https://localhost:8101/images/brandcrowd/maker/maker-generic-custom-wide.png",carouselImageUrl:null,dimensions:"640 x 1280 px",description:null,height:null,width:null,smallDisplay:0,largeDisplay:0,slug:null,friendlyName:null,pluralName:"Wide",token:"00000000-0000-0000-0000-000000000000"}]}],L={title:"Components/PillBar",component:s},l=()=>({components:{PillBar:s},data(){return{categories:f}},template:`
2
+ <div class="tw-max-w-300">
3
+ <PillBar :categories="categories" />
4
+ </div>
5
+ `}),a=()=>({components:{PillBar:s},data(){return{categories:f}},template:`
6
+ <div class="tw-max-w-300 tw-bg-black tw-p-8">
7
+ <PillBar :categories="categories" is-dark-mode />
8
+ </div>
9
+ `});var t,c,d;l.parameters={...l.parameters,docs:{...(t=l.parameters)==null?void 0:t.docs,source:{originalSource:`() => {
10
+ return {
11
+ components: {
12
+ PillBar
13
+ },
14
+ data() {
15
+ return {
16
+ categories
17
+ };
18
+ },
19
+ template: \`
20
+ <div class="tw-max-w-300">
21
+ <PillBar :categories="categories" />
22
+ </div>
23
+ \`
24
+ };
25
+ }`,...(d=(c=l.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var m,u,g;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`() => {
26
+ return {
27
+ components: {
28
+ PillBar
29
+ },
30
+ data() {
31
+ return {
32
+ categories
33
+ };
34
+ },
35
+ template: \`
36
+ <div class="tw-max-w-300 tw-bg-black tw-p-8">
37
+ <PillBar :categories="categories" is-dark-mode />
38
+ </div>
39
+ \`
40
+ };
41
+ }`,...(g=(u=a.parameters)==null?void 0:u.docs)==null?void 0:g.source}}};const Y=["Sample","SampleDarkMode"];export{l as Sample,a as SampleDarkMode,Y as __namedExportsOrder,L as default};
@@ -0,0 +1 @@
1
+ import{L as u,M as s,c as o,t as a,o as f}from"./iframe-Dd7cBPzL.js";import{_ as c}from"./_plugin-vue_export-helper-DlAUqK2U.js";const l={props:{amount:{type:[Number,String],required:!1,default:null},alwaysShowFraction:{type:Boolean,required:!1,default:!0},currency:{type:Object,required:!1,default:null},locale:{type:String,required:!1,default:null},fraction:{type:[Number,String],required:!1,default:0},showAbbreviation:{type:Boolean,required:!1,default:!1},wrapInParentheses:{type:Boolean,requred:!1,default:!1},suffix:{type:String,required:!1,default:""},isDomainCredit:{type:Boolean,required:!1,default:!1}},data(){return{domainCreditUsed:s("domainCreditUsed")??"Domain credit used",free:s("free")??"Free"}},computed:{amountFormatted(){if(this.isDomainCredit)return this.domainCreditUsed;if(!this.amount||this.amount===0)return this.free;const e=Number.parseFloat(this.amount),r=e%1!==0,n=!r&&!this.alwaysShowFraction?0:this.fraction;if(this.locale!=null){const i=u(this.amount,this.locale,this.currency,n,this.showAbbreviation);if(i)return i}return Number.isNaN(e)?this.amount:!r&&!this.alwaysShowFraction?e.toFixed(0):e.toFixed(this.fraction)},currencyAbbreviation(){var e,r;return this.showAbbreviation&&this.amount&&!this.locale?(r=(e=this.currency)==null?void 0:e.abbreviation)==null?void 0:r.trim():""},currencySymbol(){var e,r;return!this.amount||this.amount===0||this.locale?"":((r=(e=this.currency)==null?void 0:e.symbol)==null?void 0:r.trim())??"$"},isSymbolPlacedBeforePrice(){var e,r;return((e=this.currency)==null?void 0:e.isSymbolPlacedBeforePrice)==null?!0:((r=this.currency)==null?void 0:r.isSymbolPlacedBeforePrice)===!0},currencySymbolBefore(){return this.isSymbolPlacedBeforePrice?this.currencySymbol:""},currencySymbolAfter(){return this.isSymbolPlacedBeforePrice?"":this.currencySymbol},optionalLeftParenthesis(){return this.wrapInParentheses?"(":""},optionalRightParenthesis(){return this.wrapInParentheses?")":""}}},m={class:"notranslate"};function d(e,r,n,i,y,t){return f(),o("span",m,a(t.optionalLeftParenthesis)+a(t.currencyAbbreviation)+a(t.currencySymbolBefore)+a(t.amountFormatted)+a(t.currencySymbolAfter)+a(t.optionalRightParenthesis)+a(n.suffix),1)}const b=c(l,[["render",d]]);l.__docgenInfo={exportName:"default",displayName:"Price",description:"",tags:{},props:[{name:"amount",type:{name:"number|string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"alwaysShowFraction",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"currency",type:{name:"object"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"locale",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"fraction",type:{name:"number|string"},required:!1,defaultValue:{func:!1,value:"0"}},{name:"showAbbreviation",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"wrapInParentheses",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"suffix",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"isDomainCredit",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/Price/Price.vue"]};export{b as P};
@@ -0,0 +1,358 @@
1
+ import{H as c,d as W}from"./iframe-Dd7cBPzL.js";import{P as t}from"./Price-BBo_v_DU.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const D={id:1,name:"United State Dollars",iso4127Code:"USD",symbol:"$",abbreviation:"US"},M={id:2,name:"Australian Dollars",iso4127Code:"AUD",symbol:"$",abbreviation:"A"},$={id:3,name:"British Pound",iso4127Code:"GBP",symbol:"£",abbreviation:"UK"},H={id:4,name:"Euro",iso4127Code:"EUR",symbol:"€",abbreviation:"EU"},I={id:5,name:"Indian Rupee",iso4127Code:"INR",symbol:"₹",abbreviation:"IN"},X={id:6,name:"Philippine Peso",iso4127Code:"PHP",symbol:"₱",abbreviation:"PH"},_={id:7,name:"Brazilian Real",iso4127Code:"BRL",symbol:"R$",abbreviation:"R"},z={id:8,name:"Mexican Peso",iso4127Code:"MXN",symbol:"MX$",abbreviation:"MX"},q={id:9,name:"South African Rand",iso4127Code:"ZAR",symbol:"R",abbreviation:"R"},a=[D,M,$,H,I,X,_,z,q],s=["en-US","fr-FR","es-ES","pt-PT","de-DE","fr-CA","pt-BR"],Y={title:"Components/Price",component:t,args:{currencyName:a[0].name,locale:s[0]},argTypes:{amount:{type:"number"},currencyName:{control:{type:"select"},options:a.map(n=>n.name)},locale:{control:{type:"select"},options:s}}},o={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
2
+ <span>
3
+ <price
4
+ v-bind="args"
5
+ :currency="selectedCurrency"
6
+ :locale="selectedLocale"
7
+ />
8
+ </span>
9
+ `}),args:{amount:45}},i={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
10
+ <span>
11
+ <price
12
+ v-bind="args"
13
+ :currency="selectedCurrency"
14
+ fraction="2"
15
+ :locale="selectedLocale"
16
+ />
17
+ </span>
18
+ `}),args:{amount:22.5}},l={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
19
+ <span>
20
+ <price
21
+ v-bind="args"
22
+ :always-show-fraction="true"
23
+ :currency="selectedCurrency"
24
+ fraction="2"
25
+ :locale="selectedLocale"
26
+ />
27
+ </span>
28
+ `}),args:{amount:22}},u={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)}},async mounted(){await c()},template:`
29
+ <span>
30
+ <price
31
+ v-bind="args"
32
+ :always-show-fraction="false"
33
+ :currency="selectedCurrency"
34
+ fraction="2"
35
+ :locale="selectedLocale"
36
+ />
37
+ </span>
38
+ `}),args:{amount:22}},p={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
39
+ <span>
40
+ <price
41
+ v-bind="args"
42
+ :always-show-fraction="true"
43
+ :currency="selectedCurrency"
44
+ fraction="2"
45
+ :suffix="suffix"
46
+ :locale="selectedLocale"
47
+ />
48
+ </span>
49
+ `}),args:{amount:22,suffix:"/yr"}},d={render:(n,{argTypes:r})=>({components:{Price:t},props:Object.keys(r),setup(){return{args:n}},computed:{selectedCurrency(){return a.find(e=>e.name===this.args.currencyName)},selectedLocale(){return s.find(e=>e===this.args.locale)}},async mounted(){await c()},template:`
50
+ <span>
51
+ <price
52
+ v-bind="args"
53
+ :currency="selectedCurrency"
54
+ :locale="selectedLocale"
55
+ />
56
+ </span>
57
+ `}),args:{amount:22}},m=(n,{argTypes:r})=>({components:{StorybookPriceComponent:G},props:Object.keys(r),data(){const e=new Array(s.length).fill(0);return e.forEach((K,y)=>{e[y]=new Array(a.length).fill(0).map((Z,B)=>({locale:s[y],currency:a[B]}))}),{variants:e}},async mounted(){await c()},template:`
58
+ <StorybookPriceComponent
59
+ :variants="variants"/>
60
+ <StorybookPriceComponent
61
+ :variants="variants"
62
+ :show-abbreviation="true"
63
+ />
64
+ `}),G=W({components:{Price:t},props:{variants:{type:Array,required:!0},showAbbreviation:{type:Boolean,default:!1}},template:`
65
+ <table class="tw-w-full">
66
+ <thead>
67
+ <tr>
68
+ <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Price</th>
69
+ </tr>
70
+ </thead>
71
+ <tbody>
72
+ <tr v-for="locale in variants" class="tw-bg-grayscale-200">
73
+ <td>{{ locale[0].locale }}</td>
74
+ <td v-for="item in locale" class="tw-p-4">
75
+ <price
76
+ :amount=10.00
77
+ :currency="item.currency"
78
+ :locale="item.locale"
79
+ :show-abbreviation="showAbbreviation"
80
+ fraction="2"
81
+ />
82
+ </td>
83
+ </tr>
84
+ </tbody>
85
+ </table>
86
+ `});var g,b,f;o.parameters={...o.parameters,docs:{...(g=o.parameters)==null?void 0:g.docs,source:{originalSource:`{
87
+ render: (args, {
88
+ argTypes
89
+ }) => {
90
+ return {
91
+ components: {
92
+ Price
93
+ },
94
+ props: Object.keys(argTypes),
95
+ setup() {
96
+ return {
97
+ args
98
+ };
99
+ },
100
+ computed: {
101
+ selectedCurrency() {
102
+ return currencies.find(x => x.name === this.args.currencyName);
103
+ },
104
+ selectedLocale() {
105
+ return locales.find(x => x === this.args.locale);
106
+ }
107
+ },
108
+ async mounted() {
109
+ await setSharedLibLocaleAsync();
110
+ },
111
+ template: \`
112
+ <span>
113
+ <price
114
+ v-bind="args"
115
+ :currency="selectedCurrency"
116
+ :locale="selectedLocale"
117
+ />
118
+ </span>
119
+ \`
120
+ };
121
+ },
122
+ args: {
123
+ amount: 45
124
+ }
125
+ }`,...(f=(b=o.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};var h,C,w;i.parameters={...i.parameters,docs:{...(h=i.parameters)==null?void 0:h.docs,source:{originalSource:`{
126
+ render: (args, {
127
+ argTypes
128
+ }) => {
129
+ return {
130
+ components: {
131
+ Price
132
+ },
133
+ props: Object.keys(argTypes),
134
+ setup() {
135
+ return {
136
+ args
137
+ };
138
+ },
139
+ computed: {
140
+ selectedCurrency() {
141
+ return currencies.find(x => x.name === this.args.currencyName);
142
+ },
143
+ selectedLocale() {
144
+ return locales.find(x => x === this.args.locale);
145
+ }
146
+ },
147
+ async mounted() {
148
+ await setSharedLibLocaleAsync();
149
+ },
150
+ template: \`
151
+ <span>
152
+ <price
153
+ v-bind="args"
154
+ :currency="selectedCurrency"
155
+ fraction="2"
156
+ :locale="selectedLocale"
157
+ />
158
+ </span>
159
+ \`
160
+ };
161
+ },
162
+ args: {
163
+ amount: 22.5
164
+ }
165
+ }`,...(w=(C=i.parameters)==null?void 0:C.docs)==null?void 0:w.source}}};var L,v,x;l.parameters={...l.parameters,docs:{...(L=l.parameters)==null?void 0:L.docs,source:{originalSource:`{
166
+ render: (args, {
167
+ argTypes
168
+ }) => {
169
+ return {
170
+ components: {
171
+ Price
172
+ },
173
+ props: Object.keys(argTypes),
174
+ setup() {
175
+ return {
176
+ args
177
+ };
178
+ },
179
+ computed: {
180
+ selectedCurrency() {
181
+ return currencies.find(x => x.name === this.args.currencyName);
182
+ },
183
+ selectedLocale() {
184
+ return locales.find(x => x === this.args.locale);
185
+ }
186
+ },
187
+ async mounted() {
188
+ await setSharedLibLocaleAsync();
189
+ },
190
+ template: \`
191
+ <span>
192
+ <price
193
+ v-bind="args"
194
+ :always-show-fraction="true"
195
+ :currency="selectedCurrency"
196
+ fraction="2"
197
+ :locale="selectedLocale"
198
+ />
199
+ </span>
200
+ \`
201
+ };
202
+ },
203
+ args: {
204
+ amount: 22.0
205
+ }
206
+ }`,...(x=(v=l.parameters)==null?void 0:v.docs)==null?void 0:x.source}}};var S,A,P;u.parameters={...u.parameters,docs:{...(S=u.parameters)==null?void 0:S.docs,source:{originalSource:`{
207
+ render: (args, {
208
+ argTypes
209
+ }) => {
210
+ return {
211
+ components: {
212
+ Price
213
+ },
214
+ props: Object.keys(argTypes),
215
+ setup() {
216
+ return {
217
+ args
218
+ };
219
+ },
220
+ computed: {
221
+ selectedCurrency() {
222
+ return currencies.find(x => x.name === this.args.currencyName);
223
+ }
224
+ },
225
+ async mounted() {
226
+ await setSharedLibLocaleAsync();
227
+ },
228
+ template: \`
229
+ <span>
230
+ <price
231
+ v-bind="args"
232
+ :always-show-fraction="false"
233
+ :currency="selectedCurrency"
234
+ fraction="2"
235
+ :locale="selectedLocale"
236
+ />
237
+ </span>
238
+ \`
239
+ };
240
+ },
241
+ args: {
242
+ amount: 22.0
243
+ }
244
+ }`,...(P=(A=u.parameters)==null?void 0:A.docs)==null?void 0:P.source}}};var k,O,N;p.parameters={...p.parameters,docs:{...(k=p.parameters)==null?void 0:k.docs,source:{originalSource:`{
245
+ render: (args, {
246
+ argTypes
247
+ }) => {
248
+ return {
249
+ components: {
250
+ Price
251
+ },
252
+ props: Object.keys(argTypes),
253
+ setup() {
254
+ return {
255
+ args
256
+ };
257
+ },
258
+ computed: {
259
+ selectedCurrency() {
260
+ return currencies.find(x => x.name === this.args.currencyName);
261
+ },
262
+ selectedLocale() {
263
+ return locales.find(x => x === this.args.locale);
264
+ }
265
+ },
266
+ async mounted() {
267
+ await setSharedLibLocaleAsync();
268
+ },
269
+ template: \`
270
+ <span>
271
+ <price
272
+ v-bind="args"
273
+ :always-show-fraction="true"
274
+ :currency="selectedCurrency"
275
+ fraction="2"
276
+ :suffix="suffix"
277
+ :locale="selectedLocale"
278
+ />
279
+ </span>
280
+ \`
281
+ };
282
+ },
283
+ args: {
284
+ amount: 22.0,
285
+ suffix: '/yr'
286
+ }
287
+ }`,...(N=(O=p.parameters)==null?void 0:O.docs)==null?void 0:N.source}}};var T,j,R;d.parameters={...d.parameters,docs:{...(T=d.parameters)==null?void 0:T.docs,source:{originalSource:`{
288
+ render: (args, {
289
+ argTypes
290
+ }) => {
291
+ return {
292
+ components: {
293
+ Price
294
+ },
295
+ props: Object.keys(argTypes),
296
+ setup() {
297
+ return {
298
+ args
299
+ };
300
+ },
301
+ computed: {
302
+ selectedCurrency() {
303
+ return currencies.find(x => x.name === this.args.currencyName);
304
+ },
305
+ selectedLocale() {
306
+ return locales.find(x => x === this.args.locale);
307
+ }
308
+ },
309
+ async mounted() {
310
+ await setSharedLibLocaleAsync();
311
+ },
312
+ template: \`
313
+ <span>
314
+ <price
315
+ v-bind="args"
316
+ :currency="selectedCurrency"
317
+ :locale="selectedLocale"
318
+ />
319
+ </span>
320
+ \`
321
+ };
322
+ },
323
+ args: {
324
+ amount: 22.0
325
+ }
326
+ }`,...(R=(j=d.parameters)==null?void 0:j.docs)==null?void 0:R.source}}};var E,U,F;m.parameters={...m.parameters,docs:{...(E=m.parameters)==null?void 0:E.docs,source:{originalSource:`(args, {
327
+ argTypes
328
+ }) => {
329
+ return {
330
+ components: {
331
+ StorybookPriceComponent
332
+ },
333
+ props: Object.keys(argTypes),
334
+ data() {
335
+ const combos = new Array(locales.length).fill(0);
336
+ combos.forEach((item, index) => {
337
+ combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({
338
+ locale: locales[index],
339
+ currency: currencies[index2]
340
+ }));
341
+ });
342
+ return {
343
+ variants: combos
344
+ };
345
+ },
346
+ async mounted() {
347
+ await setSharedLibLocaleAsync();
348
+ },
349
+ template: \`
350
+ <StorybookPriceComponent
351
+ :variants="variants"/>
352
+ <StorybookPriceComponent
353
+ :variants="variants"
354
+ :show-abbreviation="true"
355
+ />
356
+ \`
357
+ };
358
+ }`,...(F=(U=m.parameters)==null?void 0:U.docs)==null?void 0:F.source}}};const ee=["Sample","WithFraction","AlwaysShowFractionOn","AlwaysShowFractionOff","WithSuffix","WithLocale","AllLocalesAndCurrencies"];export{m as AllLocalesAndCurrencies,u as AlwaysShowFractionOff,l as AlwaysShowFractionOn,o as Sample,i as WithFraction,d as WithLocale,p as WithSuffix,ee as __namedExportsOrder,Y as default};