@designcrowd/fe-shared-lib 1.5.23 → 1.5.24-upgradepkg

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

@@ -0,0 +1 @@
+import{c as o,K as r,o as s}from"./iframe-B3A6OXQU.js";import{_ as a}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={};function c(n,e){return s(),o("div",null,[...e[0]||(e[0]=[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)])])}const l=a(t,[["render",c]]);t.__docgenInfo={displayName:"Loader",description:"",tags:{},sourceFiles:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Loader/Loader.vue"]};export{l as L};

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

@@ -0,0 +1 @@
+import{B as O}from"./Button-DKdQT6Fq.js";import{I as Y}from"./Icon-C17LFvsP.js";import{H as F}from"./HelloBar-CYEZR2kQ.js";import{t as B}from"./tracking-ATsLLehC.js";import{c as w,e as u,y as C,g as a,t as f,C as E,h as _,F as R,r as j,n as D,X as b,a as S,o as c}from"./iframe-B3A6OXQU.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 U(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 V(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]},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,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:Y,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}},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(){const e=this.steps.textColour?.colours.find(o=>o.selected===!0),t=this.steps.backgroundColour?.colours.find(o=>o.selected===!0);return!e?.hex||!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?.custom||!1;this.customTextColour.hex&&this.customTextColour.selected&&(o=!0,e=this.customTextColour);let l=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(),C(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,f(r.stepCounter),1),u("h2",$,f(s.activeStep.title),1),u("p",tt,f(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(R,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,f(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,f(s.customTextColour.hex),1)],4)):a("",!0)])):a("",!0)])]),u("div",wt,[s.activeStep.index===1?(c(),C(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(),C(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(),C(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(),C(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:["/home/zknowles/repos/fe-shared-lib/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.vue"]};export{xt as L,Z as h};

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.stories-kuxAH8B8.js

@@ -0,0 +1,36 @@
+import{L as e}from"./LogoBusinessBrandColours-CExzox1Z.js";import"./Button-DKdQT6Fq.js";import"./ButtonPrimary-BvWW6Duz.js";import"./iframe-B3A6OXQU.js";import"./preload-helper-PPVm8Dsz.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-C17LFvsP.js";import"./HelloBar-CYEZR2kQ.js";import"./tracking-ATsLLehC.js";const d={title:"Components/LogoBusinessBrandColours",component:e},o=()=>({components:{LogoBusinessBrandColours:e},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>
+    `});o.parameters={...o.parameters,docs:{...o.parameters?.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>
+    \`
+  };
+}`,...o.parameters?.docs?.source}}};const i=["Sample"];export{o as Sample,i as __namedExportsOrder,d 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-CTXJLQ_i.js

@@ -0,0 +1,71 @@
+import{c as b,F as v,r as k,n as w,b as C,D as z,o as p,f as U,z as F,t as P,A as V,e as $,y as q,x as R,a as W}from"./iframe-B3A6OXQU.js";import{_}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-PPVm8Dsz.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 j(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function E(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 D(e,t,a){return t&&E(e.prototype,t),e}function I(e){return H(e)||L(e)||G()}function H(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 L(e){if(Symbol.iterator in Object(e)||Object.prototype.toString.call(e)==="[object Arguments]")return Array.from(e)}function G(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function Y(e){var t;return typeof e=="function"?t={callback:e}:t=e,t}function J(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 x(e,t){if(e===t)return!0;if(y(e)==="object"){for(var a in e)if(!x(e[a],t[a]))return!1;return!0}return!1}var K=(function(){function e(t,a,i){j(this,e),this.el=t,this.observer=null,this.frozen=!1,this.createObserver(a,i)}return D(e,[{key:"createObserver",value:function(a,i){var r=this;if(this.observer&&this.destroyObserver(),!this.frozen){if(this.options=Y(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=J(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 S(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 K(e,i,a);e._vue_visibilityState=r}}function Q(e,t,a){var i=t.value,r=t.oldValue;if(!x(i,r)){var n=e._vue_visibilityState;if(!i){T(e);return}n?n.createObserver(i,a):S(e,{value:i},a)}}function T(e){var t=e._vue_visibilityState;t&&(t.destroyObserver(),delete e._vue_visibilityState)}var O={bind:S,update:Q,unbind:T};function X(e){e.directive("observe-visibility",O)}var Z={version:"1.0.0",install:X},g=null;typeof window<"u"?g=window.Vue:typeof global<"u"&&(g=global.Vue);g&&g.use(Z);function ee(e){return e==null?e===void 0?"[object Undefined]":"[object Null]":toString.call(e)}function te(e){const t=typeof e;return t=="symbol"||t==="object"&&e!=null&&ee(e)=="[object Symbol]"}function ae(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&&!te(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},A={name:"VueMasonryWall",directives:{"observe-visibility":O},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=ae(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++)}}},ie=["data-column"];function re(e,t,a,i,r,n){const d=z("observe-visibility");return p(),b("div",{ref:"wall",class:C(["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)},[U(e.$slots,"default",{item:a.items[o],index:o},()=>[F(P(a.items[o]),1)],!0)],4))),128)),V($("div",{ref_for:!0,ref:"bottom",class:"masonry-bottom","data-column":s},null,8,ie),[[d,{callback:o=>o&&n._fill(),throttle:n._options.throttle}]])],4))),128))],6)}const ne=_(A,[["render",re],["__scopeId","data-v-40c36bc8"]]);A.__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:["/home/zknowles/repos/fe-shared-lib/src/atoms/thirdparty-components/VueMasonryWall/VueMasonryWall.vue"]};const M={components:{VueMasonryWall:ne},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 se(e,t,a,i,r,n){const d=W("vue-masonry-wall");return p(),q(d,{items:a.items,options:n.options},{default:R(({item:m})=>[U(e.$slots,"item",{item:m})]),_:3},8,["items","options"])}const B=_(M,[["render",se]]);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:["/home/zknowles/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}]},le={title:"Components/Masonry",component:B},u=()=>({components:{Masonry:B},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)})}}});u.parameters={...u.parameters,docs:{...u.parameters?.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);
+        });
+      }
+    }
+  };
+}`,...u.parameters?.docs?.source}}};const ce=["Sample"];export{u as Sample,ce as __namedExportsOrder,le 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-CydTNprT.js

@@ -0,0 +1 @@
+import{I as m}from"./Icon-C17LFvsP.js";import{A as c,B as w,c as r,e as s,b as o,f as d,h as y,g as v,G as g,C as h,a as b,o as i}from"./iframe-B3A6OXQU.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){this.disableBodyScrollOnVisible&&(a?document.getElementsByTagName("body")[0]?.classList.add("tw-overflow-hidden"):document.getElementsByTagName("body")[0]?.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=b("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]=h((...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?v("",!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)),y(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:["/home/zknowles/repos/fe-shared-lib/src/atoms/components/Modal/Modal.vue"]};export{O as M};

package/.storybook-static/assets/Modal.stories-DZiG5NGM.js

@@ -0,0 +1,345 @@
+import{M as n}from"./Modal-CydTNprT.js";import{B as p}from"./Button-DKdQT6Fq.js";import"./Icon-C17LFvsP.js";import"./iframe-B3A6OXQU.js";import"./preload-helper-PPVm8Dsz.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-BvWW6Duz.js";const b={title:"Components/Modal",component:n},t={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}},i={render:e=>({components:{Modal:n,Button:p},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" :disable-body-scroll-on-visible="true">
+        Your component goes here
+        </Modal>
+      </div>
+    `,methods:{closeLoginModal(){this.visible=!1},onButtonClick(){this.visible=!0}}}),args:{visible:!0}},d={render:e=>({components:{Modal:n},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(){this.visible=!1}}}),args:{visible:!0}},o={render:e=>({components:{Modal:n},setup(){return{args:e}},template:`
+      <Modal v-bind="args" :mandatory="true" @close-modal="closeLoginModal">
+      I'm a mandatory modal
+      </Modal>
+    `,methods:{closeLoginModal(){this.visible=!1}}}),args:{visible:!0}},s={render:e=>({components:{Modal:n},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(){this.visible=!1}}}),args:{visible:!0}},r={render:e=>({components:{Modal:n},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(){this.visible=!1}}}),args:{visible:!0}},a={render:e=>({components:{Modal:n},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(){this.visible=!1}}}),args:{visible:!0}},l={render:e=>({components:{Modal:n},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(){this.visible=!1}}}),args:{visible:!0}};l.story={name:"Modal — Image"};t.story={name:"Modal"};o.story={name:"Modal — Mandatory"};s.story={name:"Modal — Overflow Height"};r.story={name:"Modal — Header and Footer"};a.story={name:"Modal — Fullscreen breakpoint"};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    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" :disable-body-scroll-on-visible="true">
+        Your component goes here
+        </Modal>
+      </div>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        },
+        onButtonClick() {
+          this.visible = true;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    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() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...d.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    return {
+      components: {
+        Modal
+      },
+      setup() {
+        return {
+          args
+        };
+      },
+      template: \`
+      <Modal v-bind="args" :mandatory="true" @close-modal="closeLoginModal">
+      I'm a mandatory modal
+      </Modal>
+    \`,
+      methods: {
+        closeLoginModal() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    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() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...s.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    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() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...r.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    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() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...a.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    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() {
+          this.visible = false;
+        }
+      }
+    };
+  },
+  args: {
+    visible: true
+  }
+}`,...l.parameters?.docs?.source}}};const f=["Sample","OpenWithButton","Simple","MandatorySample","InnerOverflowSample","HeaderFooterSample","FullscreenBreakpointSample","Image"];export{a as FullscreenBreakpointSample,r as HeaderFooterSample,l as Image,s as InnerOverflowSample,o as MandatorySample,i as OpenWithButton,t as Sample,d as Simple,f as __namedExportsOrder,b as default};