@designcrowd/fe-shared-lib 1.8.8 → 1.8.9-ai-switch

package/.storybook-static/assets/Loader-w-8rPZZr.js

@@ -0,0 +1 @@
+import{c as r,J as s,o}from"./iframe-ndUd-rmt.js";import{_ as a}from"./_plugin-vue_export-helper-DlAUqK2U.js";const e={};function i(n,t){return o(),r("div",null,t[0]||(t[0]=[s('<svg class="tw-animate-spin" width="30" height="30" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)" stroke="#5D6D81" fill="none" fill-rule="evenodd"><path d="M24 12c0 6.6-5.4 12-12 12-4.8134 0-8.9885-2.8722-10.8962-6.9873M0 12C0 5.4 5.4 0 12 0c4.68 0 8.76 2.64 10.68 6.6" stroke-width="1.92"></path><path stroke-width="1.8462" d="M.0923 24l.923-7.1077 7.1078.923"></path><path stroke-width="1.92" d="M24 0l-1.0166 6.72-7.6234-.911"></path><circle stroke-width="1.8462" cx="12" cy="12" r="3"></circle></g></svg>',1)]))}const l=a(e,[["render",i]]);e.__docgenInfo={displayName:"Loader",description:"",tags:{},sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/Loader/Loader.vue"]};export{l as L};

package/.storybook-static/assets/LogoBusinessBrandColours-CeAaMKke.css

@@ -0,0 +1 @@
+.done-btn[data-v-498ca5bf]{box-shadow:0 0 0 1px #d4d4d4,0 8px 16px #d4d4d4}

package/.storybook-static/assets/LogoBusinessBrandColours-wfQKCU3x.js

@@ -0,0 +1 @@
+import{B as O}from"./Button-CkyYO9sU.js";import{I as R}from"./Icon-B_xzgi_Q.js";import{H as Y}from"./HelloBar-DEIIHhYa.js";import{t as B}from"./tracking-ATsLLehC.js";import{c as w,e as u,y as f,f as a,t as C,C as E,h as _,F,r as j,n as D,X as b,a as S,o as c}from"./iframe-ndUd-rmt.js";import{_ as W}from"./_plugin-vue_export-helper-DlAUqK2U.js";const A=(e,t)=>{const o=q.apply(void 0,e),l=q.apply(void 0,t);return V(o,l)},I=e=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t===null?null:[t[1],t[2],t[3]].map(o=>parseInt(o,16))},q=(e,t,o)=>{const[l,s,r]=G(e,t,o);return U(l,s,r)},G=(e,t,o)=>{e/=255,t/=255,o/=255,e=e>.04045?((e+.005)/1.055)**2.4:e/12.92,t=t>.04045?((t+.005)/1.055)**2.4:t/12.92,o=o>.04045?((o+.005)/1.055)**2.4:o/12.92,e*=100,t*=100,o*=100;const l=e*.4124+t*.3576+o*.1805,s=e*.2126+t*.7152+o*.0722,r=e*.0193+t*.1192+o*.9505;return[l,s,r]},U=(e,t,o)=>{e/=95.047,t/=100,o/=108.883,e=e>.008856?e**(1/3):7.787*e+16/116,t=t>.008856?t**(1/3):7.787*t+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;const p=116*t-16,i=500*(e-t),d=200*(t-o);return[p,i,d]},V=(e,t)=>{const[r,p,i]=e,[d,n,g]=t,x=r-d,T=p-n,L=i-g,k=Math.sqrt(p*p+i*i),N=Math.sqrt(n*n+g*g);let h=d-r,m=N-k;const v=Math.sqrt(x*x+T*T+L*L);let y=Math.sqrt(v)>Math.sqrt(Math.abs(h))+Math.sqrt(Math.abs(m))?Math.sqrt(v*v-h*h-m*m):0;const z=1+.045*k,M=1+.015*k;return h/=1,m/=1*z,y/=1*M,Math.sqrt(h*h+m*m+y*y)},X=e=>{if(e<=1)return"Same";if(e<=30)return"Similar";if(e>30)return"Different"};function Z(e,t){const o=I(e),l=I(t);return X(A(o,l))}const H={components:{Button:O,Icon:R,HelloBar:Y},props:{logoData:{type:Object,required:!0,default:null},croppedLogoImage:{type:String,required:!0,default:null},totalNumSteps:{type:Number,required:!0},eventCategory:{type:String,required:!0}},setup(){return{uploadYourLogoTr:b}},data(){return{currentStep:null,stepNumber:null,activeStep:{},customTextColour:{hex:null,selected:!1},customBackgroundColour:{hex:null,selected:!1},steps:{textColour:{index:1,number:this.totalNumSteps-1,active:!1,title:b("primaryTextColor"),description:b("primaryTextColorDescription"),colourData:this.logoData.logoImageDetails.textColors,colours:[]},backgroundColour:{index:2,number:this.totalNumSteps,active:!1,title:b("backgroundColor"),description:b("backgroundColorDescription"),colourData:this.logoData.logoImageDetails.backgroundColors,colours:[]}}}},computed:{areColorsTooClose(){var o,l;const e=(o=this.steps.textColour)==null?void 0:o.colours.find(s=>s.selected===!0),t=(l=this.steps.backgroundColour)==null?void 0:l.colours.find(s=>s.selected===!0);return!(e!=null&&e.hex)||!(t!=null&&t.hex)?!1:this.activeStep.index===2&&Z(e.hex,t.hex)!=="Different"},stepCounter(){return this.uploadYourLogoTr("stepOf",{CURRENT:this.activeStep.number,TOTAL:this.totalNumSteps})}},mounted(){Object.keys(this.steps).forEach(t=>{const o=this.steps[t];o.colourData.forEach((l,s)=>{o.colours.push({hex:l,selected:s===0})})}),this.goToStep("textColour")},methods:{goToStep(e,t=!1){this.currentStep=e,this.activeStep=this.steps[e],this.steps[e].active=!0,t&&e==="backgroundColour"&&B({eventCategory:this.eventCategory,eventAction:"textColor",eventLabel:"Clicked_Continue",event:"click"})},setSelectedColour(e){this.activeStep.colours.forEach(t=>{t!==e&&(t.selected=!1)}),e.selected=!0},deselectAllColours(e){this.steps[e].colours.forEach(t=>{t.selected=!1})},onCustomTextColourChange(e){this.deselectAllColours("textColour");const t={hex:e.target.value,selected:!0,custom:!0};this.steps.textColour.colours[this.steps.textColour.colours.length-1].custom?this.steps.textColour.colours[this.steps.textColour.colours.length-1]=t:this.steps.textColour.colours.push(t)},onCustomBackgroundColourChange(e){this.deselectAllColours("backgroundColour");const t={hex:e.target.value,selected:!0,custom:!0};this.steps.backgroundColour.colours[this.steps.backgroundColour.colours.length-1].custom?this.steps.backgroundColour.colours[this.steps.backgroundColour.colours.length-1]=t:this.steps.backgroundColour.colours.push(t)},back(){this.$emit("on-go-back")},save(){let e=this.steps.textColour.colours.find(r=>r.selected===!0),t=this.steps.backgroundColour.colours.find(r=>r.selected===!0),o=(e==null?void 0:e.custom)||!1;this.customTextColour.hex&&this.customTextColour.selected&&(o=!0,e=this.customTextColour);let l=(t==null?void 0:t.custom)||!1;this.customBackgroundColour.hex&&this.customBackgroundColour.selected&&(l=!0,t=this.customBackgroundColour);const s={textColor:e.hex,backgroundColor:t.hex,textColorUserSelected:o,backgroundColorUserSelected:l};this.$emit("on-save",s),B({eventCategory:this.eventCategory,eventAction:"backgroundColor",eventLabel:"Clicked_Continue",event:"click"})}}},J={class:"tw-w-full tw-h-full"},K={class:"tw-h-full tw-pb-24 lg:tw-pb-0 tw-overflow-scroll lg:tw-overflow-visible"},P={class:"tw-pb-8 tw-px-8 tw-text-center"},Q={class:"tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase"},$={class:"tw-mb-4 tw-text-4xl tw-text-black tw-font-bold"},tt={class:"tw-mt-0"},et={class:"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-pb-8 tw-px-8 tw-text-left"},ot={class:"tw-flex tw-justify-center tw-items-center tw-max-h-56"},st=["src"],rt={key:0,class:"tw-grid tw-grid-cols-4 tw-gap-3 tw-grid-flow-row tw-auto-rows-max"},lt={class:"tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-bg-grayscale-400 tw-text-gray-500"},nt={class:"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full"},ct=["onClick"],ut={key:0,class:"tw-bg-white tw-border tw-border-solid tw-border-info-500 tw-mx-auto tw-w-5 tw-h-5 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-info-500"},at={class:"tw-sr-only"},it={key:0,class:"tw-bg-white tw-border tw-border-solid tw-border-info-500 tw-mx-auto tw-w-5 tw-h-5 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-info-500"},dt={class:"tw-sr-only"},wt={class:"tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"};function pt(e,t,o,l,s,r){const p=S("HelloBar"),i=S("Icon"),d=S("Button");return c(),w("div",J,[u("div",K,[r.areColorsTooClose?(c(),f(p,{key:0,label:"",description:l.uploadYourLogoTr("colorsWarning"),variant:"warning",class:"tw-m-5 tw-mt-3"},null,8,["description"])):a("",!0),u("div",P,[u("p",Q,C(r.stepCounter),1),u("h2",$,C(s.activeStep.title),1),u("p",tt,C(s.activeStep.description),1)]),u("div",et,[u("figure",ot,[u("img",{src:o.croppedLogoImage,alt:"",class:"tw-max-w-full tw-max-h-full"},null,8,st)]),s.activeStep.colourData?(c(),w("div",rt,[u("button",lt,[s.currentStep==="textColour"?(c(),w("input",{key:0,type:"color",class:"tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",onInput:t[0]||(t[0]=E((...n)=>r.onCustomTextColourChange&&r.onCustomTextColourChange(...n),["stop"]))},null,32)):a("",!0),s.currentStep==="backgroundColour"?(c(),w("input",{key:1,type:"color",class:"tw-absolute tw-top-0 tw-left-0 tw-z-10 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",onInput:t[1]||(t[1]=E((...n)=>r.onCustomBackgroundColourChange&&r.onCustomBackgroundColourChange(...n),["stop"]))},null,32)):a("",!0),u("span",nt,[_(i,{name:"plus",size:"sm"})])]),(c(!0),w(F,null,j(s.activeStep.colours,(n,g)=>(c(),w("button",{key:g,class:"tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-border-2 tw-border-grayscale-500",style:D({"background-color":n.hex}),onClick:x=>r.setSelectedColour(n)},[n.selected?(c(),w("span",ut,[_(i,{name:"check",size:"xs"})])):a("",!0),u("span",at,C(n.hex),1)],12,ct))),128)),s.currentStep==="textColour"&&s.customTextColour.hex?(c(),w("button",{key:0,class:"tw-relative tw-h-14 tw-w-14 tw-rounded-md tw-border-solid tw-cursor-pointer tw-border-2 tw-border-grayscale-500",style:D({"background-color":s.customTextColour.hex}),onClick:t[2]||(t[2]=n=>r.setSelectedColour(s.customTextColour))},[e.colour.selected?(c(),w("span",it,[_(i,{name:"check",size:"xs"})])):a("",!0),u("span",dt,C(s.customTextColour.hex),1)],4)):a("",!0)])):a("",!0)])]),u("div",wt,[s.activeStep.index===1?(c(),f(d,{key:0,label:l.uploadYourLogoTr("back"),size:"large",variant:"outline","container-classes":"tw-mx-2","data-test-back-btn":"",onOnClick:r.back},null,8,["label","onOnClick"])):a("",!0),s.activeStep.index===2?(c(),f(d,{key:1,label:l.uploadYourLogoTr("back"),size:"large",variant:"outline","container-classes":"tw-mx-2","data-test-back-btn":"",onOnClick:t[3]||(t[3]=n=>r.goToStep("textColour"))},null,8,["label"])):a("",!0),s.activeStep.index===1?(c(),f(d,{key:2,label:l.uploadYourLogoTr("continue"),size:"large",variant:"primary-with-icon",icon:"chevron-right-wide","container-classes":"tw-mx-2","data-test-continue-btn":"",onOnClick:t[4]||(t[4]=n=>r.goToStep("backgroundColour",!0))},null,8,["label"])):a("",!0),s.activeStep.index===2?(c(),f(d,{key:3,label:l.uploadYourLogoTr("continue"),size:"large",variant:"primary-with-icon",icon:"chevron-right-wide","container-classes":"tw-mx-2","data-test-continue-btn":"",onOnClick:r.save},null,8,["label","onOnClick"])):a("",!0)])])}const xt=W(H,[["render",pt],["__scopeId","data-v-498ca5bf"]]);H.__docgenInfo={exportName:"default",displayName:"LogoBusinessBrandColours",description:"",tags:{},props:[{name:"logoData",type:{name:"object"},required:!0,defaultValue:{func:!1,value:"null"}},{name:"croppedLogoImage",type:{name:"string"},required:!0,defaultValue:{func:!1,value:"null"}},{name:"totalNumSteps",type:{name:"number"},required:!0},{name:"eventCategory",type:{name:"string"},required:!0}],events:[{name:"on-go-back"},{name:"on-save",type:{names:["undefined"]}}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.vue"]};export{xt as L,Z as h};

package/.storybook-static/assets/LogoBusinessBrandColours.stories-Br6U96nz.js

@@ -0,0 +1,36 @@
+import{L as t}from"./LogoBusinessBrandColours-wfQKCU3x.js";import"./Button-CkyYO9sU.js";import"./ButtonPrimary-LDY_rMmo.js";import"./iframe-ndUd-rmt.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-B_xzgi_Q.js";import"./HelloBar-DEIIHhYa.js";import"./tracking-ATsLLehC.js";const g={title:"Components/LogoBusinessBrandColours",component:t},o=()=>({components:{LogoBusinessBrandColours:t},data(){return{uploadedLogoData:{templateUploadToken:"6bc3885c-7e5c-4c9e-9b54-21dcd06ca647",logoImageUrl:"https://images.unsplash.com/photo-1621745491698-86b18793ce6f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixlib=rb-1.2.1&q=80&w=300",logoImageDetails:{businessText:"LOGO TEXT HERE",sloganText:"Slogan Text Here",textColors:["#EF4444","#F59E0B","#10B981","#991B1B","#8B5CF6","#F472B6"],backgroundColors:["#041444"]}}}},template:`
+      <div>
+        <LogoBusinessBrandColours
+          :logo-data="uploadedLogoData"
+          cropped-logo-image="https://source.unsplash.com/random/300x300"
+        />
+      </div>
+    `});var e,s,n;o.parameters={...o.parameters,docs:{...(e=o.parameters)==null?void 0:e.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      LogoBusinessBrandColours
+    },
+    data() {
+      return {
+        uploadedLogoData: {
+          templateUploadToken: '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647',
+          logoImageUrl: 'https://images.unsplash.com/photo-1621745491698-86b18793ce6f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixlib=rb-1.2.1&q=80&w=300',
+          logoImageDetails: {
+            businessText: 'LOGO TEXT HERE',
+            sloganText: 'Slogan Text Here',
+            textColors: ['#EF4444', '#F59E0B', '#10B981', '#991B1B', '#8B5CF6', '#F472B6'],
+            backgroundColors: ['#041444']
+          }
+        }
+      };
+    },
+    template: \`
+      <div>
+        <LogoBusinessBrandColours
+          :logo-data="uploadedLogoData"
+          cropped-logo-image="https://source.unsplash.com/random/300x300"
+        />
+      </div>
+    \`
+  };
+}`,...(n=(s=o.parameters)==null?void 0:s.docs)==null?void 0:n.source}}};const u=["Sample"];export{o as Sample,u as __namedExportsOrder,g as default};

package/.storybook-static/assets/LogoKeywords-eT_i8ucw.js

@@ -0,0 +1 @@
+import{B as p}from"./Button-CkyYO9sU.js";import{b as g}from"./brand-crowd-api.client-CMc6GnPx.js";import{t as f}from"./tracking-ATsLLehC.js";import{c as d,e as t,t as i,A as m,f as b,N as h,h as u,X as k,a as v,o as w}from"./iframe-ndUd-rmt.js";import{_ as x}from"./_plugin-vue_export-helper-DlAUqK2U.js";const c={components:{Button:p},props:{progressLabel:{type:String,required:!0},eventCategory:{type:String,required:!0},savedKeywords:{type:String,required:!1,default:null},businessName:{type:String,required:!1,default:""},templateType:{type:String,required:!0},antiForgeryToken:{type:String,required:!0},refreshAntiForgeryToken:{type:Function,required:!1,default:null}},setup(){return{uploadYourLogoTr:k}},data(){return{keywordsText:"",isLoading:!1}},async mounted(){if(this.savedKeywords!==null){this.keywordsText=this.savedKeywords;return}if(this.businessName){this.isLoading=!0;try{const r=this.refreshAntiForgeryToken?await this.refreshAntiForgeryToken():this.antiForgeryToken,e=await g.getKeywordSuggestionsAsync({businessName:this.businessName,templateType:this.templateType,antiForgeryToken:r});e&&e.keywords&&e.keywords.length>0&&(this.keywordsText=e.keywords.join(", "))}finally{this.isLoading=!1}}},methods:{back(){this.$emit("on-go-back")},save(){this.isLoading||(f({eventCategory:this.eventCategory,eventAction:"keywords",eventLabel:"Clicked_Continue",event:"click"}),this.$emit("on-save",{keywords:this.keywordsText}))},onKeywordsKeyUp(r){r.key==="Enter"&&!this.isLoading&&this.save()}}},_={class:"tw-w-full tw-flex tw-flex-col tw-h-full lg:tw-h-auto"},T={class:"tw-h-full tw-pb-24 lg:tw-pb-0"},L={class:"tw-pb-8"},K={class:"tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase"},q={class:"tw-mb-4 tw-text-4xl tw-text-black tw-font-bold"},C={class:"tw-mt-0"},N={class:"tw-pb-8 tw-px-8"},F={class:"tw-relative"},B=["disabled"],S={key:0,class:"tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-white/50 tw-rounded"},A={class:"tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"};function V(r,e,y,o,s,n){const l=v("Button");return w(),d("div",_,[t("div",T,[t("div",L,[t("p",K,i(y.progressLabel),1),t("h2",q,i(o.uploadYourLogoTr("keywords")),1),t("p",C,i(o.uploadYourLogoTr("keywordsDescription")),1)]),t("div",N,[t("div",F,[m(t("input",{"onUpdate:modelValue":e[0]||(e[0]=a=>s.keywordsText=a),disabled:s.isLoading,class:"tw-w-full tw-py-3.5 tw-px-4 tw-rounded tw-box-border tw-border tw-border-solid tw-border-grayscale-500 tw-text-grayscale-600",onKeyup:e[1]||(e[1]=(...a)=>n.onKeywordsKeyUp&&n.onKeywordsKeyUp(...a))},null,40,B),[[h,s.keywordsText]]),s.isLoading?(w(),d("div",S,e[2]||(e[2]=[t("div",{class:"tw-animate-spin tw-h-5 tw-w-5 tw-border-2 tw-border-grayscale-500 tw-border-t-transparent tw-rounded-full"},null,-1)]))):b("",!0)])])]),t("div",A,[u(l,{label:o.uploadYourLogoTr("back"),size:"large",variant:"outline","container-classes":"tw-mx-2","data-test-back-btn":"",onOnClick:n.back},null,8,["label","onOnClick"]),u(l,{label:o.uploadYourLogoTr("continue"),size:"large",variant:"primary-with-icon",icon:"chevron-right-wide","container-classes":"tw-mx-2","data-test-continue-btn":"",disabled:s.isLoading,onOnClick:n.save},null,8,["label","disabled","onOnClick"])])])}const D=x(c,[["render",V]]);c.__docgenInfo={exportName:"default",displayName:"LogoKeywords",description:"",tags:{},props:[{name:"progressLabel",type:{name:"string"},required:!0},{name:"eventCategory",type:{name:"string"},required:!0},{name:"savedKeywords",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"null"}},{name:"businessName",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"templateType",type:{name:"string"},required:!0},{name:"antiForgeryToken",type:{name:"string"},required:!0},{name:"refreshAntiForgeryToken",type:{name:"func"},required:!1,defaultValue:{func:!1,value:"null"}}],events:[{name:"on-go-back"},{name:"on-save",type:{names:["undefined"]}}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/experiences/components/UploadYourLogoOnBoarding/LogoKeywords.vue"]};export{D as L};

package/.storybook-static/assets/LogoKeywords.stories-2eAnYOwT.js

@@ -0,0 +1,86 @@
+import{L as n}from"./LogoKeywords-eT_i8ucw.js";import"./Button-CkyYO9sU.js";import"./ButtonPrimary-LDY_rMmo.js";import"./iframe-ndUd-rmt.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-B_xzgi_Q.js";import"./brand-crowd-api.client-CMc6GnPx.js";import"./index-Bz4la0P9.js";import"./api-BlGvmpef.js";import"./tracking-ATsLLehC.js";const P={title:"Components/LogoKeywords",component:n},e=()=>({components:{LogoKeywords:n},template:`
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          business-name="My Business"
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `}),o=()=>({components:{LogoKeywords:n},template:`
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          saved-keywords="modern, professional, creative, bold"
+          business-name="My Business"
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `}),r=()=>({components:{LogoKeywords:n},template:`
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          saved-keywords=""
+          business-name=""
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `});var s,t,a;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      LogoKeywords
+    },
+    template: \`
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          business-name="My Business"
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    \`
+  };
+}`,...(a=(t=e.parameters)==null?void 0:t.docs)==null?void 0:a.source}}};var p,i,m;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      LogoKeywords
+    },
+    template: \`
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          saved-keywords="modern, professional, creative, bold"
+          business-name="My Business"
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    \`
+  };
+}`,...(m=(i=o.parameters)==null?void 0:i.docs)==null?void 0:m.source}}};var d,c,y;r.parameters={...r.parameters,docs:{...(d=r.parameters)==null?void 0:d.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      LogoKeywords
+    },
+    template: \`
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          saved-keywords=""
+          business-name=""
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    \`
+  };
+}`,...(y=(c=r.parameters)==null?void 0:c.docs)==null?void 0:y.source}}};const h=["Loading","Populated","Empty"];export{r as Empty,e as Loading,o as Populated,h as __namedExportsOrder,P as default};

package/.storybook-static/assets/Masonry-C2MNiGg0.css

@@ -0,0 +1 @@
+.masonry-wall[data-v-40c36bc8]{display:flex}.masonry-wall[data-v-40c36bc8]:not(.ready){opacity:0}.masonry-column[data-v-40c36bc8]{flex-grow:1;flex-basis:0;display:flex;flex-direction:column}.masonry-bottom[data-v-40c36bc8]{flex-grow:1;margin-top:-300px;padding-top:300px;min-height:100px;z-index:-1}

package/.storybook-static/assets/Masonry.stories-DvvP8ATW.js

@@ -0,0 +1,71 @@
+import{c as b,F as v,r as k,n as w,b as P,D as V,o as p,A as $,g as S,z as R,t as q,e as W,y as j,x as E,a as D}from"./iframe-ndUd-rmt.js";import{_ as T}from"./_plugin-vue_export-helper-DlAUqK2U.js";function y(e){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?y=function(t){return typeof t}:y=function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},y(e)}function H(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function L(e,t){for(var a=0;a<t.length;a++){var i=t[a];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function G(e,t,a){return t&&L(e.prototype,t),e}function I(e){return Y(e)||J(e)||K()}function Y(e){if(Array.isArray(e)){for(var t=0,a=new Array(e.length);t<e.length;t++)a[t]=e[t];return a}}function J(e){if(Symbol.iterator in Object(e)||Object.prototype.toString.call(e)==="[object Arguments]")return Array.from(e)}function K(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function Q(e){var t;return typeof e=="function"?t={callback:e}:t=e,t}function X(e,t){var a=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{},i,r,n,d=function(s){for(var o=arguments.length,l=new Array(o>1?o-1:0),c=1;c<o;c++)l[c-1]=arguments[c];if(n=l,!(i&&s===r)){var f=a.leading;typeof f=="function"&&(f=f(s,r)),(!i||s!==r)&&f&&e.apply(void 0,[s].concat(I(n))),r=s,clearTimeout(i),i=setTimeout(function(){e.apply(void 0,[s].concat(I(n))),i=0},t)}};return d._clear=function(){clearTimeout(i),i=null},d}function O(e,t){if(e===t)return!0;if(y(e)==="object"){for(var a in e)if(!O(e[a],t[a]))return!1;return!0}return!1}var Z=(function(){function e(t,a,i){H(this,e),this.el=t,this.observer=null,this.frozen=!1,this.createObserver(a,i)}return G(e,[{key:"createObserver",value:function(a,i){var r=this;if(this.observer&&this.destroyObserver(),!this.frozen){if(this.options=Q(a),this.callback=function(m,s){r.options.callback(m,s),m&&r.options.once&&(r.frozen=!0,r.destroyObserver())},this.callback&&this.options.throttle){var n=this.options.throttleOptions||{},d=n.leading;this.callback=X(this.callback,this.options.throttle,{leading:function(s){return d==="both"||d==="visible"&&s||d==="hidden"&&!s}})}this.oldResult=void 0,this.observer=new IntersectionObserver(function(m){var s=m[0];if(m.length>1){var o=m.find(function(c){return c.isIntersecting});o&&(s=o)}if(r.callback){var l=s.isIntersecting&&s.intersectionRatio>=r.threshold;if(l===r.oldResult)return;r.oldResult=l,r.callback(l,s)}},this.options.intersection),i.context.$nextTick(function(){r.observer&&r.observer.observe(r.el)})}}},{key:"destroyObserver",value:function(){this.observer&&(this.observer.disconnect(),this.observer=null),this.callback&&this.callback._clear&&(this.callback._clear(),this.callback=null)}},{key:"threshold",get:function(){return this.options.intersection&&typeof this.options.intersection.threshold=="number"?this.options.intersection.threshold:0}}]),e})();function A(e,t,a){var i=t.value;if(i)if(typeof IntersectionObserver>"u")console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");else{var r=new Z(e,i,a);e._vue_visibilityState=r}}function ee(e,t,a){var i=t.value,r=t.oldValue;if(!O(i,r)){var n=e._vue_visibilityState;if(!i){M(e);return}n?n.createObserver(i,a):A(e,{value:i},a)}}function M(e){var t=e._vue_visibilityState;t&&(t.destroyObserver(),delete e._vue_visibilityState)}var B={bind:A,update:ee,unbind:M};function te(e){e.directive("observe-visibility",B)}var ae={version:"1.0.0",install:te},g=null;typeof window<"u"?g=window.Vue:typeof global<"u"&&(g=global.Vue);g&&g.use(ae);function ie(e){return e==null?e===void 0?"[object Undefined]":"[object Null]":toString.call(e)}function re(e){const t=typeof e;return t=="symbol"||t==="object"&&e!=null&&ie(e)=="[object Symbol]"}function ne(e,t){let a;if(e==null)return a;let i;for(const r of e){const n=t(r);n!=null&&(i===void 0?n===n&&!re(n):n>i)&&(i=n,a=r)}return a}const N=e=>{const t=[];for(let a=0;a<e;a++)t.push({i:a,indexes:[]});return t},C={name:"VueMasonryWall",directives:{"observe-visibility":B},props:{items:{type:Array,required:!0},options:{type:Object,required:!1},ssr:{type:Object,required:!1}},data(){const e=this.ssr&&this.ssr.columns;if(e>0){const t=N(e);for(let a=0;a<this.items.length;a++)t[a%e].indexes.push(a);return{columns:t,cursor:this.items.length,ready:!1}}return{columns:[],cursor:0,ready:!1}},computed:{_options(){const{options:e}=this;return{width:e&&e.width||300,padding:{default:e&&e.padding&&e.padding.default||12},throttle:e&&e.throttle||300}},_style(){let e=this.options&&this.options.padding;return e&&typeof e!="number"&&(e=this.options.padding[this.columns.length]||this._options.padding.default),{wall:{margin:`-${e}px`},lane:{paddingLeft:`${e}px`,paddingRight:`${e}px`},item:{paddingTop:`${e}px`,paddingBottom:`${e}px`}}}},watch:{items:{handler(){this._fill()},deep:!0},options:{handler(e,t){e.width!==t.width&&this.redraw()},deep:!0}},mounted(){this.$resize=()=>{this.columns.length!==this._columnSize()&&this.redraw()},this.$resize(),this.ready||(this.ready=!0),window.addEventListener("resize",this.$resize)},beforeDestroy(){window.removeEventListener("resize",this.$resize)},methods:{redraw(){this.ready=!1,this.columns.splice(0),this.cursor=0,this.columns.push(...N(this._columnSize())),this.ready=!0,this._fill()},_columnSize(){if(!this.$refs.wall)return 1;const e=Math.round(this.$refs.wall.scrollWidth/this._options.width);return e<1?1:e},_fill(){if(this.ready){if(this.cursor>=this.items.length){this.$emit("append");return}this.$nextTick(()=>{const e=ne(this.$refs.bottom,t=>t.clientHeight||0);this._addItem(e.dataset.column),this._fill()})}},_addItem(e){const t=this.columns[e];this.items[this.cursor]&&(t.indexes.push(this.cursor),this.cursor++)}}},se=["data-column"];function oe(e,t,a,i,r,n){const d=V("observe-visibility");return p(),b("div",{ref:"wall",class:P(["masonry-wall",{ready:r.ready}]),style:w(n._style.wall)},[(p(!0),b(v,null,k(r.columns,(m,s)=>(p(),b("div",{key:s,class:"masonry-column",style:w(n._style.lane)},[(p(!0),b(v,null,k(m.indexes,o=>(p(),b("div",{key:o,ref_for:!0,ref:`item_${o}`,class:"masonry-item",style:w(n._style.item)},[S(e.$slots,"default",{item:a.items[o],index:o},()=>[R(q(a.items[o]),1)],!0)],4))),128)),$(W("div",{ref_for:!0,ref:"bottom",class:"masonry-bottom","data-column":s},null,8,se),[[d,{callback:o=>o&&n._fill(),throttle:n._options.throttle}]])],4))),128))],6)}const me=T(C,[["render",oe],["__scopeId","data-v-40c36bc8"]]);C.__docgenInfo={displayName:"VueMasonryWall",exportName:"default",description:"",tags:{},props:[{name:"items",description:"Array of items to add into masonry",type:{name:"array"},required:!0},{name:"options",description:`Options to config masonry.
+
+{
+    width: 300,
+    padding: {
+        default: 12,
+        1: 6,
+        2: 8,
+    },
+    throttle: 300
+}`,type:{name:"object"},required:!1},{name:"ssr",description:`SSR has no clue what is the size of your height of your element or width of the browser.
+You can however guess based on user-agent: https://github.com/nuxt-community/device-module
+This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.
+
+Once the client is mounted, it will redraw if the config is different from SSR.
+
+{
+    column: 2
+}`,type:{name:"object"},required:!1}],events:[{name:"append"}],slots:[{name:"default",scoped:!0,bindings:[{name:"item",title:"binding"},{name:"index",title:"binding"}]}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/thirdparty-components/VueMasonryWall/VueMasonryWall.vue"]};const z={components:{VueMasonryWall:me},props:{items:{type:Array,required:!0},gap:{type:Number,required:!1,default:22},columnWidth:{type:Number,required:!1,default:void 0}},computed:{options(){const e={};return this.gap&&(e.padding=this.gap),this.columnWidth&&(e.width=this.columnWidth),e}}};function de(e,t,a,i,r,n){const d=D("vue-masonry-wall");return p(),j(d,{items:a.items,options:n.options},{default:E(({item:m})=>[S(e.$slots,"item",{item:m})]),_:3},8,["items","options"])}const F=T(z,[["render",de]]);z.__docgenInfo={exportName:"default",displayName:"Masonry",description:"",tags:{},props:[{name:"items",type:{name:"array"},required:!0},{name:"gap",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"22"}},{name:"columnWidth",type:{name:"number"},required:!1,defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"item",scoped:!0,bindings:[{name:"item",title:"binding"}]}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/Masonry/Masonry.vue"]};const h={page1:[{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/97ea081b-f250-4002-9c05-b02cffcc62d0/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=18800",height:1080,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/a2f72950-3635-43b6-b41d-b286cbbb2bd0/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=18839",height:1080,width:1080},{templateTypeName:"Facebook post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/a0f73a89-8bfa-4728-a8ad-d290ed4a49ac/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20post?templateId=9377",height:788,width:940},{templateTypeName:"Business card horizontal",imageUrl:"https://dynamic.brandcrowd.com/template/preview/ed526c4e-c7bd-4edc-af15-863ffd906c28/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Tasty Pastry",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/business%20card%20horizontal?templateId=201",height:599,width:1024},{templateTypeName:"Facebook post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/b9419fbe-ec7c-4cf3-8235-c8e34a47cbe1/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Fresh Bread",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20post?templateId=9380",height:788,width:940},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/08727835-a4ad-4cef-b883-fb37e23bf8c4/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"A slice of happiness",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=11415",height:1080,width:1080},{templateTypeName:"Facebook post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/315cc2c3-636c-4bce-96a9-4e48b260e0de/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20post?templateId=18888",height:788,width:940},{templateTypeName:"Facebook cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/591f3a1b-2ed9-44ea-9d6f-cd0879349983/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20cover?templateId=18923",height:312,width:820},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/d20693ca-1574-4e39-80c7-30f4756dd039/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Best Seller Muffin",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=11544",height:1080,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/d34810ae-d454-46c1-a90d-71332148f740/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Love Cookie Bite",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23166",height:1080,width:1080},{templateTypeName:"Facebook post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/69ab31b8-3666-48d2-bbe9-1ba100020728/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Today's Special",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20post?templateId=9383",height:788,width:940},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/b6a1e61b-3493-4dbc-9984-01f4ddbfad76/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cake Parts",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=12183",height:1080,width:1080},{templateTypeName:"Facebook cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/ff02b338-b670-4d56-9383-5f4f833ef9bf/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20cover?templateId=18968",height:312,width:820},{templateTypeName:"Facebook post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/2277394e-e7d2-4355-922e-29a0423de3b9/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20post?templateId=18946",height:788,width:940},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/9d553d47-97f5-4f6c-964c-e6cebd23d5d7/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bake Sale Event",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=8039",height:1080,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/205ed12c-6240-4ac2-92e9-0ff4cd8ff25a/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=9453",height:1080,width:1080}],page2:[{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/7b696fa8-2d84-457d-9457-d214ecb45be1/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Matcha Macaron",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=10886",height:1080,width:1080},{templateTypeName:"Facebook cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/7cdd710c-eb89-49ab-90c6-d5b7ab639eb7/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Mavy Wavy",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20cover?templateId=69",height:312,width:820},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/690cdef8-f27b-4149-a19b-9ed68f20fbe6/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Best Seller Muffin",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=9911",height:1080,width:1080},{templateTypeName:"Facebook post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/b73b3495-171e-4053-b9e1-2d3764c5f816/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Pink Cupcake",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20post?templateId=11622",height:788,width:940},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/51d6d5a0-1bbe-4ca3-892b-e19d19204f8b/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Pink Cupcake",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=11409",height:1080,width:1080},{templateTypeName:"Facebook cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/a2e45042-6e94-442a-8d97-12e0283d021e/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Pink Cupcake",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20cover?templateId=11620",height:312,width:820},{templateTypeName:"Facebook story",imageUrl:"https://dynamic.brandcrowd.com/template/preview/9902b1fe-d068-48c4-add6-84a0439fa1f1/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cake Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20story?templateId=9473",height:1920,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/c317dd56-82d3-4188-8451-6bc9eb9cc775/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Christmas Cookie Day",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23662",height:1080,width:1080},{templateTypeName:"Facebook story",imageUrl:"https://dynamic.brandcrowd.com/template/preview/13fc5d2f-1904-46d0-bf1a-8f4a08591596/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20story?templateId=18889",height:1920,width:1080},{templateTypeName:"Facebook ad",imageUrl:"https://dynamic.brandcrowd.com/template/preview/d62d01f1-c216-452a-b5b7-1e256516c1a2/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20ad?templateId=18920",height:628,width:1200},{templateTypeName:"Poster",imageUrl:"https://dynamic.brandcrowd.com/template/preview/f5ca2164-b72f-4fb8-9cbc-52e136e8f28a/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/poster?templateId=18935",height:3194,width:2260},{templateTypeName:"Twitter post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/38340c8b-9494-4aaa-9a78-509bb2396ce8/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/twitter%20post?templateId=18892",height:512,width:1024},{templateTypeName:"Instagram story",imageUrl:"https://dynamic.brandcrowd.com/template/preview/de6b30d4-f2ea-4994-9589-639bc897cdb6/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20story?templateId=18890",height:1920,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/abafb492-7421-4f13-b16e-1307230353dd/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cute Cookie Day",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23685",height:1080,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/b803f439-fcd3-472e-acd4-a0cc5a2ca485/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Memphis Cookie Day",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23686",height:1080,width:1080},{templateTypeName:"Pinterest board cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/95c5ceb2-62f6-4f4c-9055-fd6612a362b6/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Food Cupcake",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/pinterest%20board%20cover?templateId=6044",height:150,width:222}]},pe={title:"Components/Masonry",component:F},u=()=>({components:{Masonry:F},data(){return{items:h.page1}},template:`
+      <div>
+        Sample  
+        <Masonry :items="items" :gap="22">
+          <template #item="{item}">
+            <figure class="tw-w-full tw-m-0 tw-p-0">
+              <img :src="item.imageUrl" class="tw-w-full" />
+            </figure>
+          </template>
+        </Masonry>
+        <div><button @click.stop="addOneItem">Add one item</button></div>
+        <div><button @click.stop="add16Items">Add next 16 item</button></div>
+      </div>
+      `,methods:{getRandomInt(e){return Math.floor(Math.random()*e)},addOneItem(){const e=this.getRandomInt(h.page2.length-1);this.items.push(h.page2[e])},add16Items(){h.page2.forEach(e=>{this.items.push(e)})}}});var U,_,x;u.parameters={...u.parameters,docs:{...(U=u.parameters)==null?void 0:U.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Masonry
+    },
+    data() {
+      return {
+        items: data.page1
+      };
+    },
+    template: \`
+      <div>
+        Sample  
+        <Masonry :items="items" :gap="22">
+          <template #item="{item}">
+            <figure class="tw-w-full tw-m-0 tw-p-0">
+              <img :src="item.imageUrl" class="tw-w-full" />
+            </figure>
+          </template>
+        </Masonry>
+        <div><button @click.stop="addOneItem">Add one item</button></div>
+        <div><button @click.stop="add16Items">Add next 16 item</button></div>
+      </div>
+      \`,
+    methods: {
+      getRandomInt(max) {
+        return Math.floor(Math.random() * max);
+      },
+      addOneItem() {
+        const randomIndex = this.getRandomInt(data.page2.length - 1);
+        this.items.push(data.page2[randomIndex]);
+      },
+      add16Items() {
+        data.page2.forEach(e => {
+          this.items.push(e);
+        });
+      }
+    }
+  };
+}`,...(x=(_=u.parameters)==null?void 0:_.docs)==null?void 0:x.source}}};const be=["Sample"];export{u as Sample,be as __namedExportsOrder,pe as default};

package/.storybook-static/assets/Modal-CGwEIF5R.css

@@ -0,0 +1 @@
+.modal[data-v-ddeecd48]{max-height:100vh}.modal.modal-bg[data-v-ddeecd48]{background-image:url(https://bcassetcdn.com/scl-assets/images/modal-background.svg)}.modal .hide-scroll[data-v-ddeecd48]::-webkit-scrollbar{display:none}.modal .hide-scroll[data-v-ddeecd48]{-ms-overflow-style:none;scrollbar-width:none}.modal .header-min-height[data-v-ddeecd48]{min-height:32px}.modal.modal-image .modal-content img[data-v-ddeecd48]{max-width:100%;max-height:90vh}.modal[data-v-ddeecd48] .swiper-wrapper{max-height:90vh}

package/.storybook-static/assets/Modal-DKAacz7P.js

@@ -0,0 +1 @@
+import{I as m}from"./Icon-B_xzgi_Q.js";import{A as c,B as w,c as r,e as s,b as o,f as y,g as d,h as v,G as g,C as b,a as h,o as i}from"./iframe-ndUd-rmt.js";import{_ as k}from"./_plugin-vue_export-helper-DlAUqK2U.js";const B="https://bcassetcdn.com/scl-assets/images/modal-background.svg",u={components:{Icon:m},props:{simple:{type:Boolean,required:!1,default:!1},removeHorizontalMargin:{type:Boolean,required:!1,default:!1},removeHorizontalPadding:{type:Boolean,required:!1,default:!1},visible:{type:Boolean,required:!1,default:!1},mandatory:{type:Boolean,required:!1,default:!1},mode:{type:String,required:!1,default:void 0},classes:{type:[String,Object],required:!1,default:""},contentClasses:{type:Array,required:!1,default:()=>[]},size:{type:String,required:!1,default:void 0},fullScreenBreakpoint:{type:String,required:!1,default:void 0},closeOnEsc:{type:Boolean,required:!1,default:!1},hideScrollbar:{type:Boolean,required:!1,default:!0},showModalBackgroundImage:{type:Boolean,required:!1,default:!0},disableBodyScrollOnVisible:{type:Boolean,required:!1,default:!1},darkOverlay:{type:Boolean,required:!1,default:!1},transparentModal:{type:Boolean,required:!1,default:!1}},computed:{isImageMode(){return this.mode==="image"}},watch:{visible(a){var l,e;this.disableBodyScrollOnVisible&&(a?(l=document.getElementsByTagName("body")[0])==null||l.classList.add("tw-overflow-hidden"):(e=document.getElementsByTagName("body")[0])==null||e.classList.remove("tw-overflow-hidden")),a&&this.closeOnEsc?document.addEventListener("keydown",this.closeModalOnKeyDown):document.removeEventListener("keydown",this.closeModalOnKeyDown)}},mounted(){if(this.closeOnEsc&&document.addEventListener("keydown",this.closeModalOnKeyDown),this.showModalBackgroundImage)try{const a=document.createElement("link");a.href=B,a.rel="preload",a.as="image",document.getElementsByTagName("head")[0].appendChild(a)}catch(a){console.warn("Unable to inject modal background preload",a)}},unmounted(){this.closeOnEsc&&document.removeEventListener("keydown",this.closeModalOnKeyDown)},methods:{closeModalOnKeyDown(a){const l=a||window.event;let e=!1;"key"in l?e=l.key==="Escape"||l.key==="Esc":e=l.keyCode===27,e&&(document.removeEventListener("keydown",this.closeModalOnKeyDown),this.close())},close(a){this.mandatory||this.$emit("close-modal",a)}}},p=["aria-hidden"];function q(a,l,e,M,x,t){const f=h("Icon");return c((i(),r("div",{"aria-hidden":e.visible?"false":"true",class:o(["tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50",{"tw-px-4":e.fullScreenBreakpoint===void 0&&!t.isImageMode,"sm:tw-px-4":e.fullScreenBreakpoint==="sm"&&!t.isImageMode,"tw-bg-opacity-75":!e.darkOverlay}]),onMousedown:l[2]||(l[2]=b((...n)=>t.close&&t.close(...n),["self"]))},[s("div",{class:o(["modal tw-shadow-xl tw-bg-grayscale-200 tw-relative tw-flex tw-flex-col tw-box-border tw-outline-none",[{"tw-w-full":!t.isImageMode,"tw-p-4":!e.removeHorizontalPadding&&!e.simple,"tw-max-w-md":e.size==="md","tw-max-w-xl":e.size==="xl","tw-max-w-2xl":!e.size&&!t.isImageMode,"tw-max-h-screen-90 tw-mx-4":e.fullScreenBreakpoint===void 0&&e.removeHorizontalMargin===!1,"tw-max-h-screen tw-h-full sm:tw-h-auto tw-rounded-none sm:tw-rounded-md":e.fullScreenBreakpoint==="sm","tw-rounded-md":e.fullScreenBreakpoint!=="sm","modal-bg":!e.simple&&!t.isImageMode&&e.showModalBackgroundImage,"modal-image":t.isImageMode,"tw-bg-transparent":e.transparentModal},e.classes]]),onKeydown:l[1]||(l[1]=g(n=>e.closeOnEsc&&t.close(),["esc"]))},[s("div",{class:o({"tw-relative":!e.simple,"tw-absolute tw-top-0 tw-right-0 tw-transform tw-translate-y-4 tw--translate-x-4 tw-z-30":e.simple})},[s("div",{class:o({"header-min-height":!e.mandatory})},[d(a.$slots,"header",{},void 0,!0)],2),e.mandatory?y("",!0):(i(),r("button",{key:0,class:"tw-absolute tw-right-0 tw-top-0 tw-border-none tw-text-secondary-500 tw-appearance-none tw-bg-transparent tw-p-0 tw-w-8 tw-h-8 tw-ml-auto tw-cursor-pointer","data-test-modal-close-btn":"",onClick:l[0]||(l[0]=n=>t.close(n))},[l[3]||(l[3]=s("span",{class:"tw-sr-only"},"Close modal",-1)),v(f,{name:"close",size:"sm"})]))],2),s("div",{class:o(["modal-content tw-flex tw-flex-col tw-h-full",[{"tw-overflow-y-auto":!t.isImageMode&&!e.contentClasses.find(n=>n.includes("tw-overflow-y")),"hide-scroll":e.hideScrollbar},e.contentClasses]])},[d(a.$slots,"default",{},void 0,!0)],2),s("div",null,[d(a.$slots,"footer",{},void 0,!0)])],34)],42,p)),[[w,e.visible]])}const O=k(u,[["render",q],["__scopeId","data-v-ddeecd48"]]);u.__docgenInfo={exportName:"default",displayName:"Modal",description:"",tags:{},props:[{name:"simple",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"removeHorizontalMargin",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"removeHorizontalPadding",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"visible",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"mandatory",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"mode",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"classes",type:{name:"string|object"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"contentClasses",type:{name:"array"},required:!1,defaultValue:{func:!1,value:"[]"}},{name:"size",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"fullScreenBreakpoint",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"closeOnEsc",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"hideScrollbar",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"showModalBackgroundImage",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"disableBodyScrollOnVisible",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"darkOverlay",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"transparentModal",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],events:[{name:"close-modal",type:{names:["undefined"]}}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/Users/kristianbonitz/Repos/fe-shared-lib/src/atoms/components/Modal/Modal.vue"]};export{O as M};