@designcrowd/fe-shared-lib 1.5.20 → 1.5.21

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

@@ -0,0 +1 @@
+import{c as r,I as o,o as s}from"./iframe-C86bI_2U.js";import{_ as a}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={};function c(n,e){return s(),r("div",null,e[0]||(e[0]=[o('<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:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Loader/Loader.vue"]};export{l as L};

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

@@ -0,0 +1 @@
+import{B as j}from"./Button-DtVlr_q3.js";import{I as z}from"./Icon-8mZGP41G.js";import{H as F}from"./HelloBar-z54fob0q.js";import{t as T}from"./tracking-ATsLLehC.js";import{c as w,e as u,y as C,f as a,t as g,C as E,h as y,F as O,r as R,n as I,a as _,o as c}from"./iframe-C86bI_2U.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 X(e,t){const o=D(e),l=D(t);return Y(W(o,l))}const q={components:{Button:j,Icon:z,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&&X(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"})}}},P={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",P,[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/jamesjoung/repo/fe-shared-lib/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.vue"]};export{bt as L,X as h};

package/.storybook-static/assets/LogoBusinessBrandColours-DEFhAyxR.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.stories-CIWe9ndn.js

@@ -0,0 +1,36 @@
+import{L as t}from"./LogoBusinessBrandColours-B1_8hw0H.js";import"./Button-DtVlr_q3.js";import"./ButtonPrimary-DG9wNod9.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-8mZGP41G.js";import"./HelloBar-z54fob0q.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-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-CDT8kZCv.js

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

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

@@ -0,0 +1 @@
+import{I as m}from"./Icon-8mZGP41G.js";import{A as c,B as w,c as r,e as s,b as o,f as y,g as d,h as g,G as v,C as h,a as b,o as u}from"./iframe-C86bI_2U.js";import{_ as k}from"./_plugin-vue_export-helper-DlAUqK2U.js";const B="https://bcassetcdn.com/scl-assets/images/modal-background.svg",i={components:{Icon:m},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},disableBodyScrollOnVisible:{type:Boolean,required:!1,default:!1},darkOverlay:{type:Boolean,required:!1,default:!1},transparentModal:{type:Boolean,required:!1,default:!1}},computed:{isImageMode(){return this.mode==="image"}},watch:{visible(a){var l,e;this.disableBodyScrollOnVisible&&(a?(l=document.getElementsByTagName("body")[0])==null||l.classList.add("tw-overflow-hidden"):(e=document.getElementsByTagName("body")[0])==null||e.classList.remove("tw-overflow-hidden")),a&&this.closeOnEsc?document.addEventListener("keydown",this.closeModalOnKeyDown):document.removeEventListener("keydown",this.closeModalOnKeyDown)}},mounted(){if(this.closeOnEsc&&document.addEventListener("keydown",this.closeModalOnKeyDown),this.showModalBackgroundImage)try{const a=document.createElement("link");a.href=B,a.rel="preload",a.as="image",document.getElementsByTagName("head")[0].appendChild(a)}catch(a){console.warn("Unable to inject modal background preload",a)}},unmounted(){this.closeOnEsc&&document.removeEventListener("keydown",this.closeModalOnKeyDown)},methods:{closeModalOnKeyDown(a){const l=a||window.event;let e=!1;"key"in l?e=l.key==="Escape"||l.key==="Esc":e=l.keyCode===27,e&&(document.removeEventListener("keydown",this.closeModalOnKeyDown),this.close())},close(a){this.mandatory||this.$emit("close-modal",a)}}},p=["aria-hidden"];function M(a,l,e,q,x,t){const f=b("Icon");return c((u(),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.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]=v(n=>e.closeOnEsc&&t.close(),["esc"]))},[s("div",{class:o({"tw-relative":!e.simple,"tw-absolute tw-top-0 tw-right-0 tw-transform tw-translate-y-4 tw--translate-x-4 tw-z-30":e.simple})},[s("div",{class:o({"header-min-height":!e.mandatory})},[d(a.$slots,"header",{},void 0,!0)],2),e.mandatory?y("",!0):(u(),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)),g(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(i,[["render",M],["__scopeId","data-v-e317f91d"]]);i.__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"}},{name:"disableBodyScrollOnVisible",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"darkOverlay",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"transparentModal",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],events:[{name:"close-modal",type:{names:["undefined"]}}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Modal/Modal.vue"]};export{O as M};

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

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

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

@@ -0,0 +1,345 @@
+import{M as n}from"./Modal-BQrpXSGA.js";import{B as Y}from"./Button-DtVlr_q3.js";import"./Icon-8mZGP41G.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-DG9wNod9.js";const D={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: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" :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"};var p,v,m;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.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
+  }
+}`,...(m=(v=t.parameters)==null?void 0:v.docs)==null?void 0:m.source}}};var c,g,u;i.parameters={...i.parameters,docs:{...(c=i.parameters)==null?void 0:c.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
+  }
+}`,...(u=(g=i.parameters)==null?void 0:g.docs)==null?void 0:u.source}}};var h,M,b;d.parameters={...d.parameters,docs:{...(h=d.parameters)==null?void 0:h.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
+  }
+}`,...(b=(M=d.parameters)==null?void 0:M.docs)==null?void 0:b.source}}};var f,y,x;o.parameters={...o.parameters,docs:{...(f=o.parameters)==null?void 0:f.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
+  }
+}`,...(x=(y=o.parameters)==null?void 0:y.docs)==null?void 0:x.source}}};var w,C,L;s.parameters={...s.parameters,docs:{...(w=s.parameters)==null?void 0:w.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
+  }
+}`,...(L=(C=s.parameters)==null?void 0:C.docs)==null?void 0:L.source}}};var S,O,k;r.parameters={...r.parameters,docs:{...(S=r.parameters)==null?void 0:S.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
+  }
+}`,...(k=(O=r.parameters)==null?void 0:O.docs)==null?void 0:k.source}}};var B,z,F;a.parameters={...a.parameters,docs:{...(B=a.parameters)==null?void 0:B.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
+  }
+}`,...(F=(z=a.parameters)==null?void 0:z.docs)==null?void 0:F.source}}};var H,I,W;l.parameters={...l.parameters,docs:{...(H=l.parameters)==null?void 0:H.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
+  }
+}`,...(W=(I=l.parameters)==null?void 0:I.docs)==null?void 0:W.source}}};const G=["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,G as __namedExportsOrder,D as default};