@designcrowd/fe-shared-lib 1.0.0-test-publish

package/.storybook-static/assets/Loader-CIm9SBxn.js

@@ -0,0 +1 @@
+import{o as t,c as o,l as r}from"./vue.esm-bundler-BuzEyh6o.js";import{_ as s}from"./_plugin-vue_export-helper-DlAUqK2U.js";const e={},c=r('<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),a=[c];function n(i,d){return t(),o("div",null,a)}const p=s(e,[["render",n]]);e.__docgenInfo={displayName:"Loader",description:"",tags:{},sourceFiles:["/Users/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/components/Loader/Loader.vue"]};export{p as L};

package/.storybook-static/assets/LogoBusinessBrandColours-8SUh_BWV.css

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

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

@@ -0,0 +1 @@
+import{B as z}from"./Button-C9BkIo_w.js";import{I as j}from"./Icon-CLd6chSw.js";import{H as F}from"./HelloBar-DtIRdNgP.js";import{t as T}from"./tracking-ATsLLehC.js";import{c as w,a as u,b as C,e as a,t as g,w as E,i as y,F as O,f as R,h as I,g as _,o as c}from"./vue.esm-bundler-BuzEyh6o.js";import{_ as G}from"./_plugin-vue_export-helper-DlAUqK2U.js";const W=(e,t)=>{const o=L.apply(void 0,e),l=L.apply(void 0,t);return U(o,l)},D=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))},L=(e,t,o)=>{const[l,s,r]=A(e,t,o);return V(l,s,r)},A=(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]},V=(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]},U=(e,t)=>{const[r,p,i]=e,[d,n,f]=t,b=r-d,S=p-n,B=i-f,x=Math.sqrt(p*p+i*i),H=Math.sqrt(n*n+f*f);let h=d-r,m=H-x;const k=Math.sqrt(b*b+S*S+B*B);let v=Math.sqrt(k)>Math.sqrt(Math.abs(h))+Math.sqrt(Math.abs(m))?Math.sqrt(k*k-h*h-m*m):0;const N=1+.045*x,M=1+.015*x;return h/=1,m/=1*N,v/=1*M,Math.sqrt(h*h+m*m+v*v)},Y=e=>{if(e<=1)return"Same";if(e<=30)return"Similar";if(e>30)return"Different"};function P(e,t){const o=D(e),l=D(t);return Y(W(o,l))}const q={components:{Button:z,Icon:j,HelloBar:F},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}},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:"Primary text color",description:"Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.",colourData:this.logoData.logoImageDetails.textColors,colours:[]},backgroundColour:{index:2,number:this.totalNumSteps,active:!1,title:"Background color",description:"Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.",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&&P(e.hex,t.hex)!=="Different"}},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"&&T({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),T({eventCategory:this.eventCategory,eventAction:"backgroundColor",eventLabel:"Clicked_Continue",event:"click"})}}},X={class:"tw-w-full tw-h-full"},Z={class:"tw-h-full tw-pb-24 lg:tw-pb-0 tw-overflow-scroll lg:tw-overflow-visible"},J={class:"tw-pb-8 tw-px-8 tw-text-center"},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"},$={class:"tw-mt-0"},tt={class:"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-pb-8 tw-px-8 tw-text-left"},et={class:"tw-flex tw-justify-center tw-items-center tw-max-h-56"},ot=["src"],st={key:0,class:"tw-grid tw-grid-cols-4 tw-gap-3 tw-grid-flow-row tw-auto-rows-max"},rt={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"},lt={class:"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full"},nt=["onClick"],ct={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"},ut={class:"tw-sr-only"},at={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"},it={class:"tw-sr-only"},dt={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 wt(e,t,o,l,s,r){const p=_("HelloBar"),i=_("Icon"),d=_("Button");return c(),w("div",X,[u("div",Z,[r.areColorsTooClose?(c(),C(p,{key:0,label:"",description:"Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs.",variant:"warning",class:"tw-m-5 tw-mt-3"})):a("",!0),u("div",J,[u("p",K," Step "+g(s.activeStep.number)+" of "+g(o.totalNumSteps),1),u("h2",Q,g(s.activeStep.title),1),u("p",$,g(s.activeStep.description),1)]),u("div",tt,[u("figure",et,[u("img",{src:o.croppedLogoImage,alt:"",class:"tw-max-w-full tw-max-h-full"},null,8,ot)]),s.activeStep.colourData?(c(),w("div",st,[u("button",rt,[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",lt,[y(i,{name:"plus",size:"sm"})])]),(c(!0),w(O,null,R(s.activeStep.colours,(n,f)=>(c(),w("button",{key:f,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:I({"background-color":n.hex}),onClick:b=>r.setSelectedColour(n)},[n.selected?(c(),w("span",ct,[y(i,{name:"check",size:"xs"})])):a("",!0),u("span",ut,g(n.hex),1)],12,nt))),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:I({"background-color":s.customTextColour.hex}),onClick:t[2]||(t[2]=n=>r.setSelectedColour(s.customTextColour))},[e.colour.selected?(c(),w("span",at,[y(i,{name:"check",size:"xs"})])):a("",!0),u("span",it,g(s.customTextColour.hex),1)],4)):a("",!0)])):a("",!0)])]),u("div",dt,[s.activeStep.index===1?(c(),C(d,{key:0,label:"Back",size:"large",variant:"outline","container-classes":"tw-mx-2","data-test-back-btn":"",onOnClick:r.back},null,8,["onOnClick"])):a("",!0),s.activeStep.index===2?(c(),C(d,{key:1,label:"Back",size:"large",variant:"outline","container-classes":"tw-mx-2","data-test-back-btn":"",onOnClick:t[3]||(t[3]=n=>r.goToStep("textColour"))})):a("",!0),s.activeStep.index===1?(c(),C(d,{key:2,label:"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))})):a("",!0),s.activeStep.index===2?(c(),C(d,{key:3,label:"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,["onOnClick"])):a("",!0)])])}const bt=G(q,[["render",wt],["__scopeId","data-v-43734079"]]);q.__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/brooke.couchman/Projects/bc-shared-experience-library/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.vue"]};export{bt as L,P as h};

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

@@ -0,0 +1,36 @@
+import{L as t}from"./LogoBusinessBrandColours-BL9vqKnt.js";import"./Button-C9BkIo_w.js";import"./ButtonPrimary-BD3XC-26.js";import"./vue.esm-bundler-BuzEyh6o.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-CLd6chSw.js";import"./HelloBar-DtIRdNgP.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/Masonry-Q4MdMr0_.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-BNS1SkB3.js

@@ -0,0 +1,71 @@
+import{E as z,o as l,c as b,F as v,f as k,h as u,r as _,j as V,t as $,x as j,a as q,n as D,b as H,C as R,g as E}from"./vue.esm-bundler-BuzEyh6o.js";import{_ as S}from"./_plugin-vue_export-helper-DlAUqK2U.js";function w(e){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?w=function(a){return typeof a}:w=function(a){return a&&typeof Symbol=="function"&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},w(e)}function W(e,a){if(!(e instanceof a))throw new TypeError("Cannot call a class as a function")}function L(e,a){for(var t=0;t<a.length;t++){var r=a[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function Y(e,a,t){return a&&L(e.prototype,a),e}function N(e){return G(e)||J(e)||K()}function G(e){if(Array.isArray(e)){for(var a=0,t=new Array(e.length);a<e.length;a++)t[a]=e[a];return t}}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 a;return typeof e=="function"?a={callback:e}:a=e,a}function X(e,a){var t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{},r,i,n,d=function(m){for(var o=arguments.length,p=new Array(o>1?o-1:0),c=1;c<o;c++)p[c-1]=arguments[c];if(n=p,!(r&&m===i)){var f=t.leading;typeof f=="function"&&(f=f(m,i)),(!r||m!==i)&&f&&e.apply(void 0,[m].concat(N(n))),i=m,clearTimeout(r),r=setTimeout(function(){e.apply(void 0,[m].concat(N(n))),r=0},a)}};return d._clear=function(){clearTimeout(r),r=null},d}function B(e,a){if(e===a)return!0;if(w(e)==="object"){for(var t in e)if(!B(e[t],a[t]))return!1;return!0}return!1}var Z=function(){function e(a,t,r){W(this,e),this.el=a,this.observer=null,this.frozen=!1,this.createObserver(t,r)}return Y(e,[{key:"createObserver",value:function(t,r){var i=this;if(this.observer&&this.destroyObserver(),!this.frozen){if(this.options=Q(t),this.callback=function(s,m){i.options.callback(s,m),s&&i.options.once&&(i.frozen=!0,i.destroyObserver())},this.callback&&this.options.throttle){var n=this.options.throttleOptions||{},d=n.leading;this.callback=X(this.callback,this.options.throttle,{leading:function(m){return d==="both"||d==="visible"&&m||d==="hidden"&&!m}})}this.oldResult=void 0,this.observer=new IntersectionObserver(function(s){var m=s[0];if(s.length>1){var o=s.find(function(c){return c.isIntersecting});o&&(m=o)}if(i.callback){var p=m.isIntersecting&&m.intersectionRatio>=i.threshold;if(p===i.oldResult)return;i.oldResult=p,i.callback(p,m)}},this.options.intersection),r.context.$nextTick(function(){i.observer&&i.observer.observe(i.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 C(e,a,t){var r=a.value;if(r)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 i=new Z(e,r,t);e._vue_visibilityState=i}}function ee(e,a,t){var r=a.value,i=a.oldValue;if(!B(r,i)){var n=e._vue_visibilityState;if(!r){O(e);return}n?n.createObserver(r,t):C(e,{value:r},t)}}function O(e){var a=e._vue_visibilityState;a&&(a.destroyObserver(),delete e._vue_visibilityState)}var F={bind:C,update:ee,unbind:O};function ae(e){e.directive("observe-visibility",F)}var te={version:"1.0.0",install:ae},y=null;typeof window<"u"?y=window.Vue:typeof global<"u"&&(y=global.Vue);y&&y.use(te);function re(e){return e==null?e===void 0?"[object Undefined]":"[object Null]":toString.call(e)}function ie(e){const a=typeof e;return a=="symbol"||a==="object"&&e!=null&&re(e)=="[object Symbol]"}function ne(e,a){let t;if(e==null)return t;let r;for(const i of e){const n=a(i);n!=null&&(r===void 0?n===n&&!ie(n):n>r)&&(r=n,t=i)}return t}const U=e=>{const a=[];for(let t=0;t<e;t++)a.push({i:t,indexes:[]});return a},P={name:"VueMasonryWall",directives:{"observe-visibility":F},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 a=U(e);for(let t=0;t<this.items.length;t++)a[t%e].indexes.push(t);return{columns:a,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,a){e.width!==a.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(...U(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,a=>a.clientHeight||0);this._addItem(e.dataset.column),this._fill()})}},_addItem(e){const a=this.columns[e];this.items[this.cursor]&&(a.indexes.push(this.cursor),this.cursor++)}}},me=["data-column"];function oe(e,a,t,r,i,n){const d=z("observe-visibility");return l(),b("div",{ref:"wall",class:D(["masonry-wall",{ready:i.ready}]),style:u(n._style.wall)},[(l(!0),b(v,null,k(i.columns,(s,m)=>(l(),b("div",{key:m,class:"masonry-column",style:u(n._style.lane)},[(l(!0),b(v,null,k(s.indexes,o=>(l(),b("div",{key:o,ref_for:!0,ref:`item_${o}`,class:"masonry-item",style:u(n._style.item)},[_(e.$slots,"default",{item:t.items[o],index:o},()=>[V($(t.items[o]),1)],!0)],4))),128)),j(q("div",{ref_for:!0,ref:"bottom",class:"masonry-bottom","data-column":m},null,8,me),[[d,{callback:o=>o&&n._fill(),throttle:n._options.throttle}]])],4))),128))],6)}const se=S(P,[["render",oe],["__scopeId","data-v-40c36bc8"]]);P.__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/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/thirdparty-components/VueMasonryWall/VueMasonryWall.vue"]};const M={components:{VueMasonryWall:se},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,a,t,r,i,n){const d=E("vue-masonry-wall");return l(),H(d,{items:t.items,options:n.options},{default:R(({item:s})=>[_(e.$slots,"item",{item:s})]),_:3},8,["items","options"])}const A=S(M,[["render",de]]);M.__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/brooke.couchman/Projects/bc-shared-experience-library/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}],page3:[{templateTypeName:"Flyer",imageUrl:"https://dynamic.brandcrowd.com/template/preview/0bdb2794-2ef2-4812-85cb-2245fba0e519/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/flyer?templateId=18944",height:1123,width:794},{templateTypeName:"Facebook event cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/e27a3de4-b12c-4528-8e8e-259091bc6c18/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bakery And Pastry Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20event%20cover?templateId=18921",height:1080,width:1920},{templateTypeName:"Business card horizontal",imageUrl:"https://dynamic.brandcrowd.com/template/preview/31cc2340-e335-4e01-b792-c7fbaa31f208/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Delicious Doodles",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/business%20card%20horizontal?templateId=46211",height:599,width:1024},{templateTypeName:"Poster",imageUrl:"https://dynamic.brandcrowd.com/template/preview/d0804818-d183-4cfd-ac84-8fce8e2e492d/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/poster?templateId=18977",height:3194,width:2260},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/33c8f53e-cd5a-4a17-b1d5-d9971750f35d/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cookie Lover Promo",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23687",height:1080,width:1080},{templateTypeName:"Facebook story",imageUrl:"https://dynamic.brandcrowd.com/template/preview/267fa9a7-c277-4863-a5d5-d354fa38e97f/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20story?templateId=18949",height:1920,width:1080},{templateTypeName:"Facebook event cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/ba10bd1a-9dae-4643-835f-de30dffa5962/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20event%20cover?templateId=18967",height:1080,width:1920},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/6a01cfd0-abd8-4358-a805-6af55e6b6ac9/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cookie Doodle",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23691",height:1080,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/88f4160d-2b8e-4940-9dc1-23f099b061c0/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cookie Bowl",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23871",height:1080,width:1080},{templateTypeName:"Facebook ad",imageUrl:"https://dynamic.brandcrowd.com/template/preview/407b90d3-d561-4489-ae98-04e6344e2903/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20ad?templateId=18963",height:628,width:1200},{templateTypeName:"Facebook story",imageUrl:"https://dynamic.brandcrowd.com/template/preview/c7d79628-cd5c-4534-b73b-597e21bbe037/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Bake Sale Event",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20story?templateId=8124",height:1920,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/be03c76d-c1ba-40ea-bba4-c30f1a76e205/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cute Cookie Day ",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23700",height:1080,width:1080},{templateTypeName:"Flyer",imageUrl:"https://dynamic.brandcrowd.com/template/preview/5db22cb2-3787-44e5-9af1-4e8cea5de4ff/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/flyer?templateId=18978",height:1123,width:794},{templateTypeName:"Twitter post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/882719cd-71d9-4d06-b9e2-b29254016468/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/twitter%20post?templateId=18959",height:512,width:1024},{templateTypeName:"Instagram story",imageUrl:"https://dynamic.brandcrowd.com/template/preview/be5a26b0-6aec-47b0-824b-2dbcf8f61f22/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Homemade Bakeshop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20story?templateId=18956",height:1920,width:1080},{templateTypeName:"Facebook event cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/07af9614-a92d-41a1-9c87-585e07b48b48/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20event%20cover?templateId=9522",height:1080,width:1920}],page4:[{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/9c0216f2-fcdd-45e5-bffc-1bb8b9a8bab9/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cookie Crumbs Explosion",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23532",height:1080,width:1080},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/9872139c-9b46-4dd2-9f0d-f46162e4cc11/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"New Breakfast Restaurant",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=32339",height:1080,width:1080},{templateTypeName:"Postcard",imageUrl:"https://dynamic.brandcrowd.com/template/preview/a9cd61c6-36fc-4522-9269-f5199df1af1d/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/postcard?templateId=9540",height:1276,width:1784},{templateTypeName:"Poster",imageUrl:"https://dynamic.brandcrowd.com/template/preview/f18d764f-ad59-47b6-b6a3-e54ab740424e/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/poster?templateId=9531",height:3194,width:2260},{templateTypeName:"Menu",imageUrl:"https://dynamic.brandcrowd.com/template/preview/459d8901-c017-4ba3-b3fa-4984756bdee9/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Minimal Hipster",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/menu?templateId=1498",height:1123,width:794},{templateTypeName:"Business card horizontal",imageUrl:"https://dynamic.brandcrowd.com/template/preview/2482780a-61f1-49e6-b92c-db64064b356c/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Chef Utensils Doodle ",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/business%20card%20horizontal?templateId=11416",height:599,width:1024},{templateTypeName:"Thank You Card",imageUrl:"https://dynamic.brandcrowd.com/template/preview/9a113085-6c40-4511-b7c2-6cbc0f27c757/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Corporate Badge",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/thank%20you%20card?templateId=21336",height:1300,width:1677},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/a2c53a49-4212-4266-b7dc-f6aef7430a0c/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cookie Day Illustration",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=23650",height:1080,width:1080},{templateTypeName:"Twitter post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/5c957f6b-b825-43ab-a8a9-71cfcd91dd11/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/twitter%20post?templateId=9467",height:512,width:1024},{templateTypeName:"Instagram story",imageUrl:"https://dynamic.brandcrowd.com/template/preview/7c99863a-684f-46ac-935c-67548800c897/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20story?templateId=9468",height:1920,width:1080},{templateTypeName:"Facebook story",imageUrl:"https://dynamic.brandcrowd.com/template/preview/81ae4216-91e8-463b-b602-0683aeb1cc38/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20story?templateId=9451",height:1920,width:1080},{templateTypeName:"Facebook ad",imageUrl:"https://dynamic.brandcrowd.com/template/preview/df4808b2-93af-4579-bad8-4368757febc5/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Now Open Bakery",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20ad?templateId=9452",height:628,width:1200},{templateTypeName:"Instagram post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/2bbc0c08-25d6-4290-ab6f-b88d67d6945a/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Cake Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/instagram%20post?templateId=9470",height:1080,width:1080},{templateTypeName:"Flyer",imageUrl:"https://dynamic.brandcrowd.com/template/preview/6ea0ce2d-28a0-44b9-9fca-e5b88d1d978d/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Pink Cupcake",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/flyer?templateId=11624",height:1123,width:794},{templateTypeName:"Twitter post",imageUrl:"https://dynamic.brandcrowd.com/template/preview/08b230c3-c8f6-4caa-9d03-ab3a338144fe/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Pink Cupcake",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/twitter%20post?templateId=11617",height:512,width:1024},{templateTypeName:"Facebook cover",imageUrl:"https://dynamic.brandcrowd.com/template/preview/3f0c78ff-fd31-4e97-ac6d-f8de6953968e/1b82ba07-3024-4424-bc01-82ea819f0a92/design-preview-2x",templateName:"Pastry Cake Shop",editorUrl:"/maker/mydesigns/new/1b82ba07-3024-4424-bc01-82ea819f0a92/facebook%20cover?templateId=9525",height:312,width:820}]},le={title:"Components/Masonry",component:A},g=()=>({components:{Masonry:A},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 I,x,T;g.parameters={...g.parameters,docs:{...(I=g.parameters)==null?void 0:I.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);
+        });
+      }
+    }
+  };
+}`,...(T=(x=g.parameters)==null?void 0:x.docs)==null?void 0:T.source}}};const be=["Sample"];export{g as Sample,be as __namedExportsOrder,le as default};

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

@@ -0,0 +1 @@
+import{I as c}from"./Icon-CLd6chSw.js";import{x as m,y as w,c as r,a as s,n as o,r as d,i as y,e as g,k as h,w as v,g as b,o as i,A as k,B as p}from"./vue.esm-bundler-BuzEyh6o.js";import{_ as M}from"./_plugin-vue_export-helper-DlAUqK2U.js";const B="https://bcassetcdn.com/scl-assets/images/modal-background.svg",u={components:{Icon:c},props:{simple:{type:Boolean,required:!1,default:!1},removeHorizontalMargin:{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}},computed:{isImageMode(){return this.mode==="image"}},watch:{visible(a){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 t=a||window.event;let e=!1;"key"in t?e=t.key==="Escape"||t.key==="Esc":e=t.keyCode===27,e&&(document.removeEventListener("keydown",this.closeModalOnKeyDown),this.close())},close(a){this.mandatory||this.$emit("close-modal",a)}}},q=a=>(k("data-v-3c1e7f3a"),a=a(),p(),a),x=["aria-hidden"],I=q(()=>s("span",{class:"tw-sr-only"},"Close modal",-1));function S(a,t,e,E,V,l){const f=b("Icon");return m((i(),r("div",{"aria-hidden":e.visible?"false":"true",class:o(["tw-bg-black tw-bg-opacity-75 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&&!l.isImageMode,"sm:tw-px-4":e.fullScreenBreakpoint==="sm"&&!l.isImageMode}]),onMousedown:t[2]||(t[2]=v((...n)=>l.close&&l.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":!l.isImageMode,"tw-p-4":!e.simple,"tw-max-w-md":e.size==="md","tw-max-w-xl":e.size==="xl","tw-max-w-2xl":!e.size&&!l.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&&!l.isImageMode&&e.showModalBackgroundImage,"modal-image":l.isImageMode},e.classes]]),onKeydown:t[1]||(t[1]=h(n=>e.closeOnEsc&&l.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?g("",!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:t[0]||(t[0]=n=>l.close(n))},[I,y(f,{name:"close",size:"sm"})]))],2),s("div",{class:o(["modal-content tw-h-full",[{"tw-overflow-y-auto":!l.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,x)),[[w,e.visible]])}const _=M(u,[["render",S],["__scopeId","data-v-3c1e7f3a"]]);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:"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"}}],events:[{name:"close-modal",type:{names:["undefined"]}}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/Users/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/components/Modal/Modal.vue"]};export{_ as M};

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

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

package/.storybook-static/assets/Modal.stories--h84M-r_.js

@@ -0,0 +1,380 @@
+import{M as t}from"./Modal-BLdvoK5M.js";import{B as Y}from"./Button-C9BkIo_w.js";import"./Icon-CLd6chSw.js";import"./vue.esm-bundler-BuzEyh6o.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-BD3XC-26.js";const{useArgs:s}=__STORYBOOK_MODULE_PREVIEW_API__,U={title:"Components/Modal",component:t},o={render:e=>{const[,n]=s();return{components:{Modal:t},setup(){return{args:e}},template:`
+      <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+      </Modal>
+    `,methods:{closeLoginModal(){n({...e,visible:!1})}}}},args:{visible:!0}},g={render:e=>{const[,n]=s();return{components:{Modal:t,Button:Y},setup(){return{args:e}},template:`
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="onButtonClick" />
+        <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+        </Modal>
+      </div>
+    `,methods:{closeLoginModal(){n({...e,visible:!1})},onButtonClick(){n({...e,visible:!0})}}}},args:{visible:!0}},c={render:e=>{const[,n]=s();return{components:{Modal:t},setup(){return{args:e}},template:`
+      <Modal v-bind="args" :simple="true" @close-modal="closeLoginModal">
+      <div class="tw-px-8">
+        <div>
+          <h2 class="tw-text-2xl tw-text-center tw-mb-4">Hello World</h2>
+        </div>
+      </div>
+      </Modal>
+    `,methods:{closeLoginModal(){n({...e,visible:!1})}}}},args:{visible:!0}},r={render:e=>{const[,n]=s();return{components:{Modal:t},setup(){return{args:e}},template:`
+      <Modal v-bind="args" :mandatory="true" @close-modal="closeLoginModal">
+      I'm a mandatory modal
+      </Modal>
+    `,methods:{closeLoginModal(){n({...e,visible:!1})}}}},args:{visible:!0}},a={render:e=>{const[,n]=s();return{components:{Modal:t},setup(){return{args:e}},template:`
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <div>
+        <div>Heading</div>
+        <div style="height: 150px;">Contents 1</div>
+        <div style="height: 250px;">Contents 2</div>
+        <div style="height: 300px;">Contents 3</div>
+        <button>Save</button>
+      </div>
+      </Modal>
+    `,methods:{closeLoginModal(){n({...e,visible:!1})}}}},args:{visible:!0}},l={render:e=>{const[,n]=s();return{components:{Modal:t},setup(){return{args:e}},template:`
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Header</span>
+        </div>
+        <div>
+          <span>Sticky content here which does not overflow</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    `,methods:{closeLoginModal(){n({...e,visible:!1})}}}},args:{visible:!0}},i={render:e=>{const[,n]=s();return{components:{Modal:t},setup(){return{args:e}},template:`
+      <Modal v-bind="args" @close-modal="closeLoginModal" fullScreenBreakpoint="sm">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Try resizing browser</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    `,methods:{closeLoginModal(){n({...e,visible:!1})}}}},args:{visible:!0}},d={render:e=>{const[,n]=s();return{components:{Modal:t},setup(){return{args:e}},template:`
+      <Modal mode="image" v-bind="args" @close-modal="closeLoginModal">
+      <img alt="modal-img" src="https://source.unsplash.com/random/1200x1200"/>
+      </Modal>
+    `,methods:{closeLoginModal(){n({...e,visible:!1})}}}},args:{visible:!0}};d.story={name:"Modal — Image"};o.story={name:"Modal"};r.story={name:"Modal — Mandatory"};a.story={name:"Modal — Overflow Height"};l.story={name:"Modal — Header and Footer"};i.story={name:"Modal — Fullscreen breakpoint"};var p,v,m;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  render: args => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          setArgs({
+            ...args,
+            visible: false
+          });
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(m=(v=o.parameters)==null?void 0:v.docs)==null?void 0:m.source}}};var u,h,M;g.parameters={...g.parameters,docs:{...(u=g.parameters)==null?void 0:u.docs,source:{originalSource:`{
+  render: args => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+        Button
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="onButtonClick" />
+        <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+        </Modal>
+      </div>
+    \`,
+      methods: {
+        closeLoginModal() {
+          setArgs({
+            ...args,
+            visible: false
+          });
+        },
+        onButtonClick() {
+          setArgs({
+            ...args,
+            visible: true
+          });
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(M=(h=g.parameters)==null?void 0:h.docs)==null?void 0:M.source}}};var b,f,x;c.parameters={...c.parameters,docs:{...(b=c.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  render: args => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" :simple="true" @close-modal="closeLoginModal">
+      <div class="tw-px-8">
+        <div>
+          <h2 class="tw-text-2xl tw-text-center tw-mb-4">Hello World</h2>
+        </div>
+      </div>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          setArgs({
+            ...args,
+            visible: false
+          });
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(x=(f=c.parameters)==null?void 0:f.docs)==null?void 0:x.source}}};var y,w,A;r.parameters={...r.parameters,docs:{...(y=r.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  render: args => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" :mandatory="true" @close-modal="closeLoginModal">
+      I'm a mandatory modal
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          setArgs({
+            ...args,
+            visible: false
+          });
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(A=(w=r.parameters)==null?void 0:w.docs)==null?void 0:A.source}}};var C,L,S;a.parameters={...a.parameters,docs:{...(C=a.parameters)==null?void 0:C.docs,source:{originalSource:`{
+  render: args => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <div>
+        <div>Heading</div>
+        <div style="height: 150px;">Contents 1</div>
+        <div style="height: 250px;">Contents 2</div>
+        <div style="height: 300px;">Contents 3</div>
+        <button>Save</button>
+      </div>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          setArgs({
+            ...args,
+            visible: false
+          });
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(S=(L=a.parameters)==null?void 0:L.docs)==null?void 0:S.source}}};var O,B,k;l.parameters={...l.parameters,docs:{...(O=l.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  render: args => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Header</span>
+        </div>
+        <div>
+          <span>Sticky content here which does not overflow</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          setArgs({
+            ...args,
+            visible: false
+          });
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(k=(B=l.parameters)==null?void 0:B.docs)==null?void 0:k.source}}};var z,F,H;i.parameters={...i.parameters,docs:{...(z=i.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  render: args => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" @close-modal="closeLoginModal" fullScreenBreakpoint="sm">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Try resizing browser</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          setArgs({
+            ...args,
+            visible: false
+          });
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(H=(F=i.parameters)==null?void 0:F.docs)==null?void 0:H.source}}};var _,I,W;d.parameters={...d.parameters,docs:{...(_=d.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  render: args => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal mode="image" v-bind="args" @close-modal="closeLoginModal">
+      <img alt="modal-img" src="https://source.unsplash.com/random/1200x1200"/>
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          setArgs({
+            ...args,
+            visible: false
+          });
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...(W=(I=d.parameters)==null?void 0:I.docs)==null?void 0:W.source}}};const V=["Sample","OpenWithButton","Simple","MandatorySample","InnerOverflowSample","HeaderFooterSample","FullscreenBreakpointSample","Image"];export{i as FullscreenBreakpointSample,l as HeaderFooterSample,d as Image,a as InnerOverflowSample,r as MandatorySample,g as OpenWithButton,o as Sample,c as Simple,V as __namedExportsOrder,U as default};