@designcrowd/fe-shared-lib 1.5.21 → 1.5.22

package/.storybook-static/assets/Notice.stories-BufkrC1b.js

@@ -1,222 +0,0 @@
-import{c as p,g as l,e as g,b as r,o as N,d as v}from"./iframe-C86bI_2U.js";import{_ as y}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{B as o}from"./Button-DtVlr_q3.js";import"./ButtonPrimary-DG9wNod9.js";import"./Icon-8mZGP41G.js";const f={props:{color:{type:String,required:!1,default:"primary"},direction:{type:String,required:!1,default:"top"},alignment:{type:String,required:!1,default:"left"},size:{type:String,required:!1,default:void 0},closable:{type:Boolean,required:!1,default:!1},isVisible:{type:Boolean,required:!1,default:void 0}}};function h(e,i,t,C,x,k){return N(),p("div",{class:r({"tw-relative tw-inline-flex tw-flex-col sm:tw-flex-row tw-w-full sm:tw-w-auto":!0,"tw-justify-center":t.alignment==="center","tw-justify-end":t.alignment==="right","tw-justify-start":t.alignment==="left"})},[l(e.$slots,"target"),g("div",{class:r({"sm:tw-absolute tw-static tw-w-full tw-z-10 tw-border tw-border-solid tw-border-grayscale-500 tw-rounded tw-bg-white tw-top-full tw-mt-4":!0,"sm:tw-top-auto sm:tw-mt-0":t.direction!=="bottom","sm:tw-bottom-full sm:tw-mb-4":t.direction==="top","sm:tw-left-full sm:tw-ml-4":t.direction==="right","sm:tw-right-full sm:tw-mr-4":t.direction==="left","tw-right-0":t.alignment==="right","tw-left-0":t.alignment==="left","sm:tw-w-64":t.size==="sm","sm:tw-w-72":t.size==="md","sm:tw-w-96":t.size==="lg","tw-hidden":!t.isVisible})},[l(e.$slots,"body")],2)],2)}const a=y(f,[["render",h]]);f.__docgenInfo={exportName:"default",displayName:"Notice",description:"",tags:{},props:[{name:"color",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'primary'"}},{name:"direction",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'top'"}},{name:"alignment",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'left'"}},{name:"size",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"closable",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"isVisible",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"target"},{name:"body"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Notice/Notice.vue"]};const R={title:"Components/Notice",component:a},V=(e,i,t)=>({notice:{direction:e,isVisible:i},button:{label:"Click me",variant:"primary",size:"small-wide",onClick:t}}),B=v("StorybookNoticeBody",{components:{Button:o},template:`
-    <div class="tw-p-4">
-      <input type="text" class="tw-mb-2" />
-      <Button
-        label="Submit"
-        variant="primary"
-        size="small-wide"
-        :full-width="true"
-      />
-    </div>
-  `}),n=()=>({components:{Notice:a,Button:o,StorybookNoticeBodyComponent:B},data(){return{isTopNoticeVisible:!1,isRightNoticeVisible:!1,isBottomNoticeVisible:!1,isLeftNoticeVisible:!1,directions:["Top","Right","Bottom","Left"]}},computed:{onClickFunctions(){return{top:()=>{this.isTopNoticeVisible=!this.isTopNoticeVisible},right:()=>{this.isRightNoticeVisible=!this.isRightNoticeVisible},bottom:()=>{this.isBottomNoticeVisible=!this.isBottomNoticeVisible},left:()=>{this.isLeftNoticeVisible=!this.isLeftNoticeVisible}}},variants(){return this.directions.map(e=>{const i=e.toLowerCase();return V(i,this[`is${e}NoticeVisible`],this.onClickFunctions[i])})}},template:`
-      <div class="tw-flex tw-justify-center tw-mt-40">
-        <div class="tw-container tw-max-w-300">
-          <table class="tw-w-full">
-            <thead>
-            <tr>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Notice</th>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-            </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(variant, index) in variants"
-                :key="index"
-                class="tw-bg-grayscale-200"
-              >
-                <td class="tw-p-4">
-                  <Notice
-                    :direction="variant.notice.direction"
-                    :is-visible="variant.notice.isVisible"
-                  >
-                    <template #target>
-                      <Button
-                        :label="variant.button.label"
-                        :variant="variant.button.variant"
-                        :size="variant.button.size"
-                        @on-click="variant.button.onClick"
-                      />
-                    </template>
-                    <template #body>
-                      <StorybookNoticeBodyComponent />
-                    </template>
-                  </Notice>
-                </td>
-                <td class="tw-p-4">
-                  <code
-                    class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900"
-                  >
-                    &lt;Notice direction="{{ variant.notice.direction }}" is-visible="{{ variant.notice.isVisible }}"&gt;
-
-                    &lt;template #target&gt;...&lt;/template&gt;
-
-                    &lt;template #body&gt;...&lt;/template&gt;
-                    &lt;/Notice&gt;
-                  </code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    `}),s=()=>({components:{Notice:a,Button:o},data(){return{isNoticeVisible:!1}},template:`
-      <Notice
-        direction="bottom"
-        :is-visible="isNoticeVisible"
-        size="md"
-      >
-        <template #target>
-          <Button
-            :full-width="true"
-            label="Click me"
-            variant="primary"
-            size="small-wide"
-            @on-click="isNoticeVisible = !isNoticeVisible"
-          />
-        </template>
-        <template #body>
-          <div class="tw-p-4">
-            <input type="text" class="tw-mb-2 tw-w-full" />
-            <Button
-              label="Submit"
-              variant="primary"
-              size="small-wide"
-              :full-width="true"
-            />
-          </div>
-        </template>
-      </Notice>
-    `});var c,d,m;n.parameters={...n.parameters,docs:{...(c=n.parameters)==null?void 0:c.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      Notice,
-      Button,
-      StorybookNoticeBodyComponent
-    },
-    data() {
-      return {
-        isTopNoticeVisible: false,
-        isRightNoticeVisible: false,
-        isBottomNoticeVisible: false,
-        isLeftNoticeVisible: false,
-        directions: ['Top', 'Right', 'Bottom', 'Left']
-      };
-    },
-    computed: {
-      onClickFunctions() {
-        return {
-          top: () => {
-            this.isTopNoticeVisible = !this.isTopNoticeVisible;
-          },
-          right: () => {
-            this.isRightNoticeVisible = !this.isRightNoticeVisible;
-          },
-          bottom: () => {
-            this.isBottomNoticeVisible = !this.isBottomNoticeVisible;
-          },
-          left: () => {
-            this.isLeftNoticeVisible = !this.isLeftNoticeVisible;
-          }
-        };
-      },
-      variants() {
-        return this.directions.map(direction => {
-          const directionLowerCase = direction.toLowerCase();
-          return generateNoticeVariant(directionLowerCase, this[\`is\${direction}NoticeVisible\`], this.onClickFunctions[directionLowerCase]);
-        });
-      }
-    },
-    template: \`
-      <div class="tw-flex tw-justify-center tw-mt-40">
-        <div class="tw-container tw-max-w-300">
-          <table class="tw-w-full">
-            <thead>
-            <tr>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Notice</th>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-            </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(variant, index) in variants"
-                :key="index"
-                class="tw-bg-grayscale-200"
-              >
-                <td class="tw-p-4">
-                  <Notice
-                    :direction="variant.notice.direction"
-                    :is-visible="variant.notice.isVisible"
-                  >
-                    <template #target>
-                      <Button
-                        :label="variant.button.label"
-                        :variant="variant.button.variant"
-                        :size="variant.button.size"
-                        @on-click="variant.button.onClick"
-                      />
-                    </template>
-                    <template #body>
-                      <StorybookNoticeBodyComponent />
-                    </template>
-                  </Notice>
-                </td>
-                <td class="tw-p-4">
-                  <code
-                    class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900"
-                  >
-                    &lt;Notice direction="{{ variant.notice.direction }}" is-visible="{{ variant.notice.isVisible }}"&gt;
-
-                    &lt;template #target&gt;...&lt;/template&gt;
-
-                    &lt;template #body&gt;...&lt;/template&gt;
-                    &lt;/Notice&gt;
-                  </code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    \`
-  };
-}`,...(m=(d=n.parameters)==null?void 0:d.docs)==null?void 0:m.source}}};var u,b,w;s.parameters={...s.parameters,docs:{...(u=s.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      Notice,
-      Button
-    },
-    data() {
-      return {
-        isNoticeVisible: false
-      };
-    },
-    template: \`
-      <Notice
-        direction="bottom"
-        :is-visible="isNoticeVisible"
-        size="md"
-      >
-        <template #target>
-          <Button
-            :full-width="true"
-            label="Click me"
-            variant="primary"
-            size="small-wide"
-            @on-click="isNoticeVisible = !isNoticeVisible"
-          />
-        </template>
-        <template #body>
-          <div class="tw-p-4">
-            <input type="text" class="tw-mb-2 tw-w-full" />
-            <Button
-              label="Submit"
-              variant="primary"
-              size="small-wide"
-              :full-width="true"
-            />
-          </div>
-        </template>
-      </Notice>
-    \`
-  };
-}`,...(w=(b=s.parameters)==null?void 0:b.docs)==null?void 0:w.source}}};const T=["Sample","Mobile"];export{s as Mobile,n as Sample,T as __namedExportsOrder,R as default};

package/.storybook-static/assets/NumberStepper-Blffv09R.css

@@ -1 +0,0 @@
-input[data-v-e5f3dd60]::-webkit-outer-spin-button,input[data-v-e5f3dd60]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.border-radius-none[data-v-e5f3dd60]{border-radius:0!important}

package/.storybook-static/assets/NumberStepper.stories-6_y_lEgC.js

@@ -1,64 +0,0 @@
-import{c,h as r,e as g,C as u,G as m,b as d,i as T,a as N,o as S}from"./iframe-C86bI_2U.js";import{B as p}from"./Button-DtVlr_q3.js";import{_ as P}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-DG9wNod9.js";import"./Icon-8mZGP41G.js";const v={components:{Button:p},props:{id:{type:String,default:()=>"1"},modelValue:{type:Number,default:void 0},min:{type:Number,default:1},max:{type:Number,default:void 0},dataAttribute:{type:String,default:null},disabled:{type:Boolean,default:void 0},disableManualInput:{type:Boolean,default:void 0},size:{type:String,default:"medium"},inputClasses:{type:String,default:void 0},containerClass:{type:String,default:void 0},fullHeight:{type:Boolean,default:!1},timerToMinimum:{type:Number,default:!1}},setup(t){const e=`js-number-stepper-${t.id}`;return{numberStepperRef:e,[e]:T(null)}},data(){return{num:null,longPress:null,longPressDelayTimeout:null,longPressTimeout:null,longPressInterval:null,resetToMinTimer:null}},computed:{buttonStyle(){let t="";return this.size==="medium"&&(t="!tw-p-4"),t},buttonIconSize(){let t="xs";return this.size==="medium"&&(t="sm"),t},number:{get(){return parseInt(this.num,10)},set(t){this.num=t}}},watch:{modelValue(t){this.number=t}},created(){this.DELAY_BEFORE_LONG_PRESS_START=300,this.LONG_PRESS_DELAY=1e3,this.LONG_PRESS_INTERVAL_DELAY=100,this.LONG_PRESS_AMOUNT=5,this.FOCUSED_EVENT="focus",this.BLUR_EVENT="blur"},mounted(){this.number=this.modelValue,this.addDataAttribute()},beforeUnmount(){this.clearLongPressTimers(),this.clearResetToMinTimer()},methods:{addDataAttribute(){this.dataAttribute&&this.$refs[this.numberStepperRef].setAttribute(this.dataAttribute,"")},changeNumber(t,e){this.disabled||(t==="up"?this.increment(e):this.decrement(e))},increment(t){const e=typeof t=="number"?t:1;(!this.max||this.max&&this.number+e<=this.max)&&(this.number+=e),this.max&&this.number+e>this.max&&(this.number=this.max),this.$emit("update:modelValue",this.number),this.$emit("input",this.number)},decrement(t){const e=typeof t=="number"?t:1;this.number-e>=this.min?this.number-=e:this.number=this.min,this.$emit("update:modelValue",this.number),this.$emit("input",this.number)},onMouseWheel(t){this.disabled||(t.preventDefault(),t.deltaY<0?this.increment():this.decrement())},onMouseDown(t){if(!this.disabled){const e=this;let s=1;e.changeNumber(t),e.longPressDelayTimeout=setTimeout(()=>{e.longPressInterval=setInterval(()=>{e.changeNumber(t,s)},e.LONG_PRESS_INTERVAL_DELAY),e.longPressTimeout=setTimeout(()=>{s=e.LONG_PRESS_AMOUNT},e.LONG_PRESS_DELAY)},e.DELAY_BEFORE_LONG_PRESS_START)}},clearLongPressTimers(t){t&&t.preventDefault(),clearTimeout(this.longPressDelayTimeout),clearTimeout(this.longPressTimeout),clearInterval(this.longPressInterval),this.longPressDelayTimeout=null,this.longPressTimeout=null,this.longPressInterval=null,this.longPress=!1},onArrowDown(t){if(!this.disabled){const e=this;e.longPress?e.changeNumber(t,e.LONG_PRESS_AMOUNT):e.changeNumber(t),e.longPressTimeout||(e.longPressTimeout=setTimeout(()=>{e.longPress=!0},e.LONG_PRESS_DELAY))}},onInput(t){if(!this.disabled){const e=parseFloat(t.target.value);let s=0;e>this.max?s=this.max:Number.isNaN(e)?s=0:s=e,this.number=s,t.target.value=s,this.$emit("update:modelValue",this.number),this.$emit("input",this.number),this.startResetToMinTimer(t)}},checkLimit(t){let e=0;t.target.value===""||Number.isNaN(this.number)||this.number<=this.min?e=this.min:this.number>this.max?e=this.max:e=this.number,this.number=e,t.target.value=e,this.$emit("update:modelValue",this.number),this.$emit("input",this.number)},startResetToMinTimer(t){this.clearResetToMinTimer(),this.timerToMinimum&&(this.resetToMinTimer=setTimeout(()=>{this.checkLimit(t)},this.timerToMinimum))},clearResetToMinTimer(){this.resetToMinTimer&&(clearTimeout(this.resetToMinTimer),this.resetToMinTimer=null)}}},M=["value","disabled"];function V(t,e,s,w,L,n){const a=N("Button");return S(),c("div",{class:d(["tw-flex tw-items-stretch",s.containerClass])},[r(a,{variant:"flat",icon:"minus","icon-size":n.buttonIconSize,class:"tw-rounded-r-none",classes:n.buttonStyle,rounded:!1,"rounded-left":!0,"full-height":s.fullHeight,disabled:s.disabled,onMousedown:[e[0]||(e[0]=u(i=>n.onMouseDown("down"),["left"])),u(n.clearLongPressTimers,["right"]),u(n.clearLongPressTimers,["middle"])],onMouseup:n.clearLongPressTimers,onMouseleave:n.clearLongPressTimers,onTouchstart:e[1]||(e[1]=i=>n.onMouseDown("down")),onTouchend:e[2]||(e[2]=i=>n.clearLongPressTimers(i)),onTouchcancel:e[3]||(e[3]=i=>n.clearLongPressTimers(i))},null,8,["icon-size","classes","full-height","disabled","onMousedown","onMouseup","onMouseleave"]),g("input",{ref:w.numberStepperRef,class:d([s.inputClasses,"border-radius-none tw-w-full tw-text-center tw-border tw-border-solid tw-border-grayscale-500 tw-border-l-0 tw-border-r-0 tw-rounded-none"]),type:"text",value:n.number,pattern:"[0-9]",disabled:s.disabled||s.disableManualInput,onWheel:e[4]||(e[4]=(...i)=>n.onMouseWheel&&n.onMouseWheel(...i)),onInput:e[5]||(e[5]=u((...i)=>n.onInput&&n.onInput(...i),["stop"])),onKeyup:e[6]||(e[6]=(...i)=>n.clearLongPressTimers&&n.clearLongPressTimers(...i)),onKeydown:[e[7]||(e[7]=m(i=>n.onArrowDown("up"),["up"])),e[8]||(e[8]=m(i=>n.onArrowDown("down"),["down"]))],onFocus:e[9]||(e[9]=i=>t.$emit(t.FOCUSED_EVENT)),onBlur:e[10]||(e[10]=u((...i)=>n.checkLimit&&n.checkLimit(...i),["stop"]))},null,42,M),r(a,{variant:"flat",rounded:!1,"rounded-right":!0,"full-height":s.fullHeight,icon:"plus","icon-size":n.buttonIconSize,class:"tw-rounded-l-none",classes:n.buttonStyle,disabled:s.disabled,onMousedown:[e[11]||(e[11]=u(i=>n.onMouseDown("up"),["left"])),u(n.clearLongPressTimers,["right"]),u(n.clearLongPressTimers,["middle"])],onMouseup:n.clearLongPressTimers,onMouseleave:n.clearLongPressTimers,onTouchstart:e[12]||(e[12]=i=>n.onMouseDown("up")),onTouchend:e[13]||(e[13]=i=>n.clearLongPressTimers(i)),onTouchcancel:e[14]||(e[14]=i=>n.clearLongPressTimers(i))},null,8,["full-height","icon-size","classes","disabled","onMousedown","onMouseup","onMouseleave"])],2)}const h=P(v,[["render",V],["__scopeId","data-v-e5f3dd60"]]);v.__docgenInfo={exportName:"default",displayName:"NumberStepper",description:"",tags:{},props:[{name:"id",type:{name:"string"},defaultValue:{func:!0,value:"() => '1'"}},{name:"modelValue",type:{name:"number"},defaultValue:{func:!1,value:"undefined"}},{name:"min",type:{name:"number"},defaultValue:{func:!1,value:"1"}},{name:"max",type:{name:"number"},defaultValue:{func:!1,value:"undefined"}},{name:"dataAttribute",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"disabled",type:{name:"boolean"},defaultValue:{func:!1,value:"undefined"}},{name:"disableManualInput",type:{name:"boolean"},defaultValue:{func:!1,value:"undefined"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"'medium'"}},{name:"inputClasses",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"containerClass",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"fullHeight",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"timerToMinimum",type:{name:"number"},defaultValue:{func:!1,value:"false"}}],events:[{name:"<undefined>"},{name:"update:modelValue",type:{names:["undefined"]}},{name:"input",type:{names:["undefined"]}}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/NumberStepper/NumberStepper.vue"]};const A={title:"Components/Number Stepper",component:h},y={components:{NumberStepper:h,Button:p},data(){return{numberValue:20}}},l=()=>({...y,template:`
-      <div>
-        <div>Full width min 12 max 128</div>
-        <NumberStepper v-model="numberValue" id="id1" :min="12" :max="128" :disabled="false" :timer-to-minimum="750" />
-        <div class="tw-mt-4 tw-w-64">
-          <div>Fixed container width</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Disabled</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="true" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Disable Manual Input but allow step down and up button</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disableManualInput="true" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Normal size</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Bigger size</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-h-8 tw-mt-4 tw-w-64">
-          <div> Outer size dependent</div>
-          <NumberStepper size="xs" :full-height="true" :input-classes="'tw-min-w-12'" v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-      </div>
-    `});var o,b,f;l.parameters={...l.parameters,docs:{...(o=l.parameters)==null?void 0:o.docs,source:{originalSource:`() => {
-  return {
-    ...data,
-    template: \`
-      <div>
-        <div>Full width min 12 max 128</div>
-        <NumberStepper v-model="numberValue" id="id1" :min="12" :max="128" :disabled="false" :timer-to-minimum="750" />
-        <div class="tw-mt-4 tw-w-64">
-          <div>Fixed container width</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Disabled</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="true" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Disable Manual Input but allow step down and up button</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disableManualInput="true" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Normal size</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Bigger size</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-h-8 tw-mt-4 tw-w-64">
-          <div> Outer size dependent</div>
-          <NumberStepper size="xs" :full-height="true" :input-classes="'tw-min-w-12'" v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-      </div>
-    \`
-  };
-}`,...(f=(b=l.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};const z=["Primary"];export{l as Primary,z as __namedExportsOrder,A as default};

package/.storybook-static/assets/PaymentConfigList-wI1eTv5x.css

@@ -1 +0,0 @@
-.top-class{top:3rem}@media (min-width: 640px){.status-alignment{flex-direction:row;align-items:center}}@media (max-width: 640px){.status-alignment{flex-direction:column}}.stripe-acct{font-size:.7rem;opacity:.5}

package/.storybook-static/assets/PaymentConfigList.stories-BlzzKrzz.js

@@ -1,126 +0,0 @@
-import{a as E}from"./index-Bw-gCGc_.js";import{M as B}from"./index-DhkYCT1V.js";import{L as z}from"./Loader-D61Ki9P1.js";import{B as Y}from"./Button-DtVlr_q3.js";import{M as _e}from"./Modal-BQrpXSGA.js";import{y as O,x as P,a as m,o as r,e as a,n as xe,h as g,c,f as _,F as q,r as fe,D as Se,A as De,b as R,t as C,C as Oe,z as G}from"./iframe-C86bI_2U.js";import{_ as K}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{I as Ee}from"./Icon-8mZGP41G.js";import{g as Te}from"./_commonjsHelpers-D6-XlEtG.js";import{a as Ae,D as Ie}from"./DropdownItem-CDX_V6Mi.js";import{P as Me}from"./Pill-BsMeJhV9.js";import"./ButtonPrimary-DG9wNod9.js";let ge;const Le=e=>{ge=e},ye=()=>ge||E,Be=async e=>{try{const t=await ye().get(`/maker/api/brand-pages/${e}/payment-configs`);return t.status===200?t.data:null}catch{return null}},Ne=async(e,t)=>{try{const s=await ye().delete(`/maker/api/brand-pages/${e}/payment-configs`,{data:{PaymentConfigId:t}});return s.status===200?s.data:null}catch{return null}},we={setBrandPageApiClientAxios:Le,getPaymentConfigsByBrandPageToken:Be,deletePaymentConfigByBrandPageTokenAndConfigId:Ne},Pe={components:{Modal:_e,Button:Y,Loader:z},emits:["close-modal","on-delete"],props:{paymentConfig:{type:Object,required:!0,default:()=>({})},brandPageToken:{type:String,required:!1}},data:()=>({isLoading:!1}),methods:{onCloseModal(){this.$emit("close-modal")},async onConfirmDelete(){const e=this.paymentConfig.id;if(this.brandPageToken&&e)try{this.isLoading=!0,await we.deletePaymentConfigByBrandPageTokenAndConfigId(this.brandPageToken,e)&&this.$emit("on-delete",e)}finally{this.isLoading=!1}}}},$e={class:"tw-text-center tw-w-full tw-border-0 tw-border-solid tw-border-grayscale-400 tw-border-t tw-p-4"},je={key:0,class:"tw-flex tw-justify-center"},Re={key:1};function Ue(e,t,s,v,x,d){const b=m("Loader"),u=m("Button"),y=m("Modal");return r(),O(y,{"full-screen-breakpoint":"sm",classes:"publish-bp--modal tw-px-2 md:tw-px-8","close-on-esc":"",visible:!0,"hide-scrollbar":!1,onCloseModal:d.onCloseModal},{header:P(()=>t[0]||(t[0]=[a("div",{class:"tw-text-center tw-font-bold tw-mb-4 tw-mt-8 tw-text-2xl"},[a("span",null,"Delete Payment Provider")],-1)])),default:P(()=>[a("div",$e,[e.isLoading?(r(),c("div",je,[g(b)])):(r(),c("div",Re,t[1]||(t[1]=[a("div",{class:"tw-text-center tw-w-full"},[a("p",{class:"tw-text-grayscale-600"},"Are you sure you want to delete this payment provider?"),a("p",{class:"tw-text-grayscale-600"}," Once deleted, your site will no longer show any payment options to visitors. You won’t be able to accept payments unless you set up a new provider. ")],-1)])))])]),footer:P(()=>[a("div",{class:"tw-font-sans tw-text-center tw-flex tw-gap-2 tw-justify-center tw-mt-4 tw-border-0 tw-border-solid tw-border-grayscale-400 tw-border-t",style:xe(e.isMobile?"padding-left: 1.5rem; padding-right: 1.5rem;":"")},[g(u,{label:"Cancel",size:"medium",variant:"outline",class:"tw-my-4",onOnClick:d.onCloseModal},null,8,["onOnClick"]),g(u,{label:"Delete Provider",variant:"primary",size:"medium",class:"tw-my-4",onOnClick:d.onConfirmDelete},null,8,["onOnClick"])],4)]),_:1},8,["onCloseModal"])}const Ve=K(Pe,[["render",Ue]]);Pe.__docgenInfo={exportName:"default",displayName:"PaymentConfigDeleteConfigModal",description:"",tags:{},props:[{name:"paymentConfig",type:{name:"object"},required:!0,defaultValue:{func:!1,value:"{}"}},{name:"brandPageToken",type:{name:"string"},required:!1}],events:[{name:"close-modal"},{name:"on-delete",type:{names:["undefined"]}}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/experiences/components/PaymentConfigList/PaymentConfigDeleteConfigModal.vue"]};var j={exports:{}},Fe=j.exports,X;function qe(){return X||(X=1,function(e,t){(function(s,v){e.exports=v()})(Fe,function(){var s="__v-click-outside",v=typeof window<"u",x=typeof navigator<"u",d=v&&("ontouchstart"in window||x&&navigator.msMaxTouchPoints>0)?["touchstart"]:["click"],b=function(o){var n=o.event,l=o.handler;(0,o.middleware)(n)&&l(n)},u=function(o,n){var l=function(i){var p=typeof i=="function";if(!p&&typeof i!="object")throw new Error("v-click-outside: Binding value must be a function or an object");return{handler:p?i:i.handler,middleware:i.middleware||function(f){return f},events:i.events||d,isActive:i.isActive!==!1,detectIframe:i.detectIframe!==!1,capture:!!i.capture}}(n.value),S=l.handler,W=l.middleware,he=l.detectIframe,V=l.capture;if(l.isActive){if(o[s]=l.events.map(function(i){return{event:i,srcTarget:document.documentElement,handler:function(p){return function(f){var D=f.el,k=f.event,F=f.handler,T=f.middleware,Q=k.path||k.composedPath&&k.composedPath();(Q?Q.indexOf(D)<0:!D.contains(k.target))&&b({event:k,handler:F,middleware:T})}({el:o,event:p,handler:S,middleware:W})},capture:V}}),he){var ke={event:"blur",srcTarget:window,handler:function(i){return function(p){var f=p.el,D=p.event,k=p.handler,F=p.middleware;setTimeout(function(){var T=document.activeElement;T&&T.tagName==="IFRAME"&&!f.contains(T)&&b({event:D,handler:k,middleware:F})},0)}({el:o,event:i,handler:S,middleware:W})},capture:V};o[s]=[].concat(o[s],[ke])}o[s].forEach(function(i){var p=i.event,f=i.srcTarget,D=i.handler;return setTimeout(function(){o[s]&&f.addEventListener(p,D,V)},0)})}},y=function(o){(o[s]||[]).forEach(function(n){return n.srcTarget.removeEventListener(n.event,n.handler,n.capture)}),delete o[s]},h=v?{beforeMount:u,updated:function(o,n){var l=n.value,S=n.oldValue;JSON.stringify(l)!==JSON.stringify(S)&&(y(o),u(o,{value:l}))},unmounted:y}:{};return{install:function(o){o.directive("click-outside",h)},directive:h}})}(j)),j.exports}var Ge=qe();const ze=Te(Ge),w=Object.freeze({active:"Active",pendingPreOnboarding:"PendingPreOnboarding",pendingPostOnboarding:"PendingPostOnboarding",unactivatedByCustomer:"UnactivatedByCustomer"}),Ce={props:{brandPageToken:{type:String,required:!1},showPaymentProviderExternalId:{type:Boolean,required:!1,default:!0},statusFilters:{type:Array,required:!1,default:void 0}},directives:{clickOutside:ze},data:()=>({isLoading:!0,paymentConfigs:[],selectedPaymentConfig:{},isStripeOptionActionVisible:!1}),methods:{getPaymentConfigStatusDisplayText(e){switch(e){case w.pendingPreOnboarding:return"Onboarding Incomplete";case w.pendingPostOnboarding:return"Pending Verification";case w.active:return"Connected";case w.unactivatedByCustomer:return"Inactive";default:return null}},getPaymentConfigStatusDisplayClasses(e){switch(e){case w.pendingPreOnboarding:case w.pendingPostOnboarding:return"tw-bg-warning-500";case w.active:return"tw-bg-success-500";case w.unactivatedByCustomer:return"tw-bg-grayscale-600";default:return null}},async updatePaymentConfigs(){if(this.brandPageToken)try{this.isLoading=!0;const e=await we.getPaymentConfigsByBrandPageToken(this.brandPageToken);e&&(this.paymentConfigs=Array.isArray(this.statusFilters)?e.filter(t=>this.statusFilters.some(s=>t.status===s)):e,this.$emit("on-load",this.paymentConfigs))}finally{this.isLoading=!1}}}},be={components:{Loader:z,Button:Y,Icon:Ee,PaymentConfigDeleteConfigModal:Ve},mixins:[Ce],emits:["on-load"],data(){return{activeStripeOptionIndex:null,showDeleteConfirmationModal:!1}},methods:{onClickStripeOptions(e){this.activeStripeOptionIndex=this.activeStripeOptionIndex===e?null:e},onClickDeleteConfirmation(e){this.selectedPaymentConfig=this.paymentConfigs.find(t=>t.id===e),this.showDeleteConfirmationModal=!0},onCloseModal(){this.showDeleteConfirmationModal=!1},onClickOutsideStripeOptions(){this.activeStripeOptionIndex=null},onLoadPaymentConfigs(e){this.showDeleteConfirmationModal=!1,this.paymentConfigs=this.paymentConfigs.filter(t=>t.id!==e),this.$emit("on-load",this.paymentConfigs)}},async mounted(){await this.updatePaymentConfigs()}},Ye={key:0,class:"tw-w-full tw-flex tw-justify-center tw-p-2"},Ke={key:1},He=["src"],Je={class:"tw-flex tw-gap-4 tw-w-full tw-items-center"},We={class:"tw-flex status-alignment tw-justify-between tw-gap-2 tw-w-full"},Qe={class:"tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col"},Xe={class:"stripe-acct"},Ze={key:0,class:"tw-absolute tw-right-0 top-class tw-list-none tw-bg-white tw-rounded tw-border tw-border-solid tw-border-grayscale-500 tw-shadow-md tw-py-3 tw-z-30 tw-text-left"},et=["onClick"],tt={class:"tw-whitespace-nowrap tw-flex tw-gap-2"};function nt(e,t,s,v,x,d){const b=m("Loader"),u=m("Button"),y=m("Icon"),h=m("PaymentConfigDeleteConfigModal"),o=Se("click-outside");return r(),c(q,null,[a("div",null,[e.isLoading?(r(),c("div",Ye,[g(b)])):(r(),c("div",Ke,[(r(!0),c(q,null,fe(e.paymentConfigs,(n,l)=>De((r(),c("div",{key:n.id,class:"tw-relative"},[a("div",{class:R(["tw-w-full tw-flex tw-font-sans tw-text-sm tw-items-center tw-p-3 tw-gap-2 tw-rounded tw-bg-white tw-border tw-border-solid tw-border-grayscale-500 tw-text-secondary-500 hover:tw-bg-grayscale-200",{"tw-mb-2":l!==e.paymentConfigs.length-1}])},[a("img",{class:"tw-h-6",src:n.paymentProviderImageUrl,alt:"Payment provider's logo"},null,8,He),a("div",Je,[a("div",We,[a("span",Qe,[a("span",null,C(n.name),1),a("small",Xe,"("+C(n.paymentProviderExternalId)+")",1)]),a("p",{class:R(["tw-flex tw-items-center tw-h-fit tw-w-fit tw-text-xs tw-rounded-full tw-py-0.5 tw-my-0 tw-text-white tw-px-4 tw-outline-none tw-uppercase",e.getPaymentConfigStatusDisplayClasses(n.status)])},C(e.getPaymentConfigStatusDisplayText(n.status)),3)]),g(u,{icon:"other",variant:"no-border","icon-size":"sm",size:"sm",onOnClick:Oe(S=>d.onClickStripeOptions(l),["stop"])},null,8,["onOnClick"])])],2),x.activeStripeOptionIndex===l?(r(),c("ul",Ze,[a("li",{class:"tw-py-2 tw-px-3 tw-cursor-pointer tw-text-sm hover:tw-bg-grayscale-200",onClick:S=>d.onClickDeleteConfirmation(n.id)},[a("span",tt,[g(y,{name:"delete",size:"sm"}),t[0]||(t[0]=G("Delete payment method"))])],8,et)])):_("",!0)])),[[o,d.onClickOutsideStripeOptions]])),128))]))]),x.showDeleteConfirmationModal?(r(),O(h,{key:0,"payment-config":e.selectedPaymentConfig,"brand-page-token":e.brandPageToken,onCloseModal:d.onCloseModal,onOnDelete:d.onLoadPaymentConfigs},null,8,["payment-config","brand-page-token","onCloseModal","onOnDelete"])):_("",!0)],64)}const H=K(be,[["render",nt]]);be.__docgenInfo={exportName:"default",displayName:"PaymentConfigList",description:"",tags:{},props:[{name:"brandPageToken",mixin:{name:"PaymentConfig.mixin",path:"PaymentConfig.mixin.js"},type:{name:"string"},required:!1},{name:"showPaymentProviderExternalId",mixin:{name:"PaymentConfig.mixin",path:"PaymentConfig.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"statusFilters",mixin:{name:"PaymentConfig.mixin",path:"PaymentConfig.mixin.js"},type:{name:"array"},required:!1,defaultValue:{func:!1,value:"undefined"}}],events:[{name:"on-load",mixin:{name:"PaymentConfig.mixin",path:"PaymentConfig.mixin.js"},type:{names:["undefined"]}}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js","/Users/jamesjoung/repo/fe-shared-lib/src/experiences/components/PaymentConfigList/PaymentConfigList.vue"]};const ve={components:{Button:Y,Dropdown:Ie,DropdownItem:Ae,Loader:z,Pill:Me},mixins:[Ce],props:{showAddPaymentProvider:{type:Boolean,default:!0},paymentConfigId:{type:String,required:!1,default:void 0}},data:()=>({isAddPaymentProviderButtonVisible:!1,selectedPaymentConfig:void 0}),watch:{paymentConfig(e){this.selectedPaymentConfig=e}},async mounted(){if(this.brandPageToken){if(await this.updatePaymentConfigs(),!this.selectedPaymentConfig&&this.paymentConfigs.length===0){this.isAddPaymentProviderButtonVisible=!0;return}const e=this.paymentConfigs.find(t=>t.id===this.paymentConfigId);if(e)this.setSelectedPaymentConfig(e);else if(this.paymentConfigs.length>0){const t=this.paymentConfigs.find(s=>s.status===w.active);this.setSelectedPaymentConfig(t||this.paymentConfigs[0])}}else this.isLoading=!1,this.isAddPaymentProviderButtonVisible=!0},methods:{onAddPaymentProviderButtonClick(){this.$emit("on-add-payment-provider-click")},onPaymentConfigClick(e){this.setSelectedPaymentConfig(e),this.$refs.dropdown.hideMenu()},setSelectedPaymentConfig(e){this.selectedPaymentConfig=e,this.$emit("on-payment-config-selected",this.selectedPaymentConfig)}}},at={key:0,class:"tw-w-full tw-flex tw-justify-center tw-p-2"},ot={key:0,class:"tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer"},st={class:"tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col"},rt={class:"stripe-acct"},it={class:"tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col"},dt={class:"stripe-acct"};function lt(e,t,s,v,x,d){const b=m("Loader"),u=m("Button"),y=m("Pill"),h=m("DropdownItem"),o=m("Dropdown");return r(),c("div",null,[e.isLoading?(r(),c("div",at,[g(b)])):_("",!0),e.isAddPaymentProviderButtonVisible?(r(),O(u,{key:1,label:"Add Payment Provider",size:"small",variant:"outline",onOnClick:d.onAddPaymentProviderButtonClick},null,8,["onOnClick"])):_("",!0),!e.isLoading&&!e.isAddPaymentProviderButtonVisible?(r(),O(o,{key:2,ref:"dropdown"},{title:P(()=>[e.selectedPaymentConfig?(r(),c("div",ot,[a("span",st,[a("span",null,C(e.selectedPaymentConfig.name),1),a("small",rt,"("+C(e.selectedPaymentConfig.paymentProviderExternalId)+")",1)]),g(y,{class:R(["tw-text-white",e.getPaymentConfigStatusDisplayClasses(e.selectedPaymentConfig.status)])},{default:P(()=>[G(C(e.getPaymentConfigStatusDisplayText(e.selectedPaymentConfig.status)),1)]),_:1},8,["class"])])):_("",!0)]),default:P(()=>[(r(!0),c(q,null,fe(e.paymentConfigs,n=>(r(),O(h,{key:`payment-config-${n.id}`,onClick:l=>d.onPaymentConfigClick(n)},{default:P(()=>[a("span",it,[a("span",null,C(n.name),1),a("small",dt,"("+C(n.paymentProviderExternalId)+")",1)]),g(y,{class:R(["tw-text-white",e.getPaymentConfigStatusDisplayClasses(n.status)])},{default:P(()=>[G(C(e.getPaymentConfigStatusDisplayText(n.status)),1)]),_:2},1032,["class"])]),_:2},1032,["onClick"]))),128)),s.showAddPaymentProvider?(r(),O(h,{key:0,class:"tw-border-t-2",onClick:d.onAddPaymentProviderButtonClick},{default:P(()=>[g(u,{"full-width":!0,label:"Add Payment Provider",size:"small",variant:"outline",onOnClick:d.onAddPaymentProviderButtonClick},null,8,["onOnClick"])]),_:1},8,["onClick"])):_("",!0)]),_:1},512)):_("",!0)])}const J=K(ve,[["render",lt]]);ve.__docgenInfo={exportName:"default",displayName:"PaymentConfigDropdown",description:"",tags:{},props:[{name:"brandPageToken",mixin:{name:"PaymentConfig.mixin",path:"PaymentConfig.mixin.js"},type:{name:"string"},required:!1},{name:"showPaymentProviderExternalId",mixin:{name:"PaymentConfig.mixin",path:"PaymentConfig.mixin.js"},type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"true"}},{name:"statusFilters",mixin:{name:"PaymentConfig.mixin",path:"PaymentConfig.mixin.js"},type:{name:"array"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"showAddPaymentProvider",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"paymentConfigId",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}}],events:[{name:"on-load",mixin:{name:"PaymentConfig.mixin",path:"PaymentConfig.mixin.js"},type:{names:["undefined"]}},{name:"on-add-payment-provider-click"},{name:"on-payment-config-selected",type:{names:["undefined"]}}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js","/Users/jamesjoung/repo/fe-shared-lib/src/experiences/components/PaymentConfigList/PaymentConfigDropdown.vue"]};const ht={title:"Components/PaymentConfigList",component:H},N=2e3,U=[{id:"32e1c01c-6276-4edb-821d-16f9d8a5e16b",name:"Stripe AUD",paymentProviderExternalId:"acct_123456789abcdefg",paymentProviderImageUrl:"https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg",paymentProviderName:"Stripe",defaultCurrency:"USD",dashboardUrl:"https://dashboard.stripe.com",status:"PendingPreOnboarding"},{id:"ea1a0933-f3a5-486a-8943-3cea44d4c7ee",name:"Stripe USD",paymentProviderImageUrl:"https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg",paymentProviderExternalId:"acct_123456789abcdefg",paymentProviderName:"Stripe",defaultCurrency:"USD",dashboardUrl:"https://dashboard.stripe.com",status:"PendingPostOnboarding"},{id:"87dea6c0-68de-4172-984c-ff443c93413c",name:"Stripe GBP",paymentProviderExternalId:"acct_123456789abcdefg",paymentProviderImageUrl:"https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg",paymentProviderName:"Stripe",defaultCurrency:"AUD",dashboardUrl:"https://dashboard.stripe.com",status:"UnactivatedByCustomer"},{id:"450507c3-ac55-449d-b944-6daa1adba3f1",name:"Stripe EUR",paymentProviderExternalId:"acct_123456789abcdefg",paymentProviderImageUrl:"https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg",paymentProviderName:"Stripe",defaultCurrency:"GBP",dashboardUrl:"https://dashboard.stripe.com",status:"Active"}],$=()=>{const e=new B(E,{delayResponse:N}),t="6bc3885c-7e5c-4c9e-9b54-21dcd06ca647";return e.onGet(`/maker/api/brand-pages/${t}/payment-configs`).reply(200,U),{components:{PaymentConfigList:H},data(){return{brandPageToken:t}},template:`
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigList :brand-page-token="brandPageToken"/>
-      </div>
-    `}},A=()=>{const e=new B(E,{delayResponse:N}),t="6bc3885c-7e5c-4c9e-9b54-21dcd06ca647";return e.onGet(`/maker/api/brand-pages/${t}/payment-configs`).reply(200,U),{components:{PaymentConfigList:H},data(){return{brandPageToken:t}},template:`
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigList :brand-page-token="brandPageToken" :show-payment-provider-external-id="false"/>
-      </div>
-    `}};A.story={name:"Sample Stripe (Hidden External Id)"};const I=()=>{const e=new B(E,{delayResponse:N}),t="6bc3885c-7e5c-4c9e-9b54-21dcd06ca647";return e.onGet(`/maker/api/brand-pages/${t}/payment-configs`).reply(200,U),{components:{PaymentConfigDropdown:J},data(){return{brandPageToken:t}},template:`
-      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
-      </div>
-    `}};I.story={name:"Dropdown Stripe"};const M=()=>{const e=new B(E,{delayResponse:N}),t="6bc3885c-7e5c-4c9e-9b54-21dcd06ca647";return e.onGet(`/maker/api/brand-pages/${t}/payment-configs`).reply(200,U),{components:{PaymentConfigDropdown:J},data(){return{brandPageToken:t}},template:`
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken" :status-filters="['Active']"/>
-      </div>
-    `}};M.story={name:"Dropdown Stripe with filter"};const L=()=>{const e=new B(E,{delayResponse:N}),t="00000000-0000-0000-0000-000000000000";return e.onGet(`/maker/api/brand-pages/${t}/payment-configs`).reply(200,[]),{components:{PaymentConfigDropdown:J},data(){return{brandPageToken:t}},template:`
-      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
-      </div>
-    `}};L.SampleDropdownEmpty={name:"Dropdown Empty"};var Z,ee,te;$.parameters={...$.parameters,docs:{...(Z=$.parameters)==null?void 0:Z.docs,source:{originalSource:`() => {
-  const mock = new MockAdapter(axios, {
-    delayResponse: MOCK_RESPONSE_DELAY
-  });
-  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
-  mock.onGet(\`/maker/api/brand-pages/\${brandPageToken}/payment-configs\`).reply(200, PAYMENT_CONFIGS_RESPONSE);
-  return {
-    components: {
-      PaymentConfigList
-    },
-    data() {
-      return {
-        brandPageToken
-      };
-    },
-    template: \`
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigList :brand-page-token="brandPageToken"/>
-      </div>
-    \`
-  };
-}`,...(te=(ee=$.parameters)==null?void 0:ee.docs)==null?void 0:te.source}}};var ne,ae,oe;A.parameters={...A.parameters,docs:{...(ne=A.parameters)==null?void 0:ne.docs,source:{originalSource:`() => {
-  const mock = new MockAdapter(axios, {
-    delayResponse: MOCK_RESPONSE_DELAY
-  });
-  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
-  mock.onGet(\`/maker/api/brand-pages/\${brandPageToken}/payment-configs\`).reply(200, PAYMENT_CONFIGS_RESPONSE);
-  return {
-    components: {
-      PaymentConfigList
-    },
-    data() {
-      return {
-        brandPageToken
-      };
-    },
-    template: \`
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigList :brand-page-token="brandPageToken" :show-payment-provider-external-id="false"/>
-      </div>
-    \`
-  };
-}`,...(oe=(ae=A.parameters)==null?void 0:ae.docs)==null?void 0:oe.source}}};var se,re,ie;I.parameters={...I.parameters,docs:{...(se=I.parameters)==null?void 0:se.docs,source:{originalSource:`() => {
-  const mock = new MockAdapter(axios, {
-    delayResponse: MOCK_RESPONSE_DELAY
-  });
-  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
-  mock.onGet(\`/maker/api/brand-pages/\${brandPageToken}/payment-configs\`).reply(200, PAYMENT_CONFIGS_RESPONSE);
-  return {
-    components: {
-      PaymentConfigDropdown
-    },
-    data() {
-      return {
-        brandPageToken
-      };
-    },
-    template: \`
-      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
-      </div>
-    \`
-  };
-}`,...(ie=(re=I.parameters)==null?void 0:re.docs)==null?void 0:ie.source}}};var de,le,ce;M.parameters={...M.parameters,docs:{...(de=M.parameters)==null?void 0:de.docs,source:{originalSource:`() => {
-  const mock = new MockAdapter(axios, {
-    delayResponse: MOCK_RESPONSE_DELAY
-  });
-  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
-  mock.onGet(\`/maker/api/brand-pages/\${brandPageToken}/payment-configs\`).reply(200, PAYMENT_CONFIGS_RESPONSE);
-  return {
-    components: {
-      PaymentConfigDropdown
-    },
-    data() {
-      return {
-        brandPageToken
-      };
-    },
-    template: \`
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken" :status-filters="['Active']"/>
-      </div>
-    \`
-  };
-}`,...(ce=(le=M.parameters)==null?void 0:le.docs)==null?void 0:ce.source}}};var me,pe,ue;L.parameters={...L.parameters,docs:{...(me=L.parameters)==null?void 0:me.docs,source:{originalSource:`() => {
-  const mock = new MockAdapter(axios, {
-    delayResponse: MOCK_RESPONSE_DELAY
-  });
-  const brandPageToken = '00000000-0000-0000-0000-000000000000';
-  mock.onGet(\`/maker/api/brand-pages/\${brandPageToken}/payment-configs\`).reply(200, []);
-  return {
-    components: {
-      PaymentConfigDropdown
-    },
-    data() {
-      return {
-        brandPageToken
-      };
-    },
-    template: \`
-      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
-      </div>
-    \`
-  };
-}`,...(ue=(pe=L.parameters)==null?void 0:pe.docs)==null?void 0:ue.source}}};const kt=["SampleStripe","SampleStripeHideExternalId","SampleDropdownStripe","SampleDropdownStripeWithFilter","SampleDropdownEmpty"];export{L as SampleDropdownEmpty,I as SampleDropdownStripe,M as SampleDropdownStripeWithFilter,$ as SampleStripe,A as SampleStripeHideExternalId,kt as __namedExportsOrder,ht as default};

package/.storybook-static/assets/Picture-Cq76CaoK.js

@@ -1 +0,0 @@
-import{c as l,e as f,F as m,r as o,n as c,b as g,o as s}from"./iframe-C86bI_2U.js";import{_ as y}from"./_plugin-vue_export-helper-DlAUqK2U.js";const d={props:{classes:{type:[String,Object],default:""},defaultImageUrl:{type:String,required:!0},alt:{type:String,default:void 0},sources:{type:Array,default:()=>[]},dataAttribute:{type:String,default:void 0},lazyLoad:{type:Boolean,default:!0},width:{type:String,default:void 0},height:{type:String,default:void 0},styles:{type:Object,default:void 0}},data(){return{imageTagRef:"js-image-tag"}},computed:{isLazyLoading(){return this.lazyLoad?"lazy":!1}},mounted(){this.dataAttribute&&this.$refs[this.imageTagRef].setAttribute(this.dataAttribute,"")},methods:{onContextMenu(n){this.$emit("contextmenu",n)},onImgLoad(n){this.$emit("onImgLoad",n)}}},h=["srcset","media"],p=["loading","src","alt","width","height"];function L(n,u,e,b,i,a){return s(),l("picture",null,[(s(!0),l(m,null,o(e.sources,(t,r)=>(s(),l("source",{key:r,srcset:t.srcset,media:t.mediaQuery},null,8,h))),128)),f("img",{ref:i.imageTagRef,class:g(["tw-block tw-w-full",e.classes]),loading:a.isLazyLoading,src:e.defaultImageUrl,alt:e.alt,width:e.width,height:e.height,style:c(e.styles),onContextmenu:u[0]||(u[0]=(...t)=>a.onContextMenu&&a.onContextMenu(...t)),onLoad:u[1]||(u[1]=(...t)=>a.onImgLoad&&a.onImgLoad(...t))},null,46,p)])}const x=y(d,[["render",L]]);d.__docgenInfo={exportName:"default",displayName:"Picture",description:"",tags:{},props:[{name:"classes",type:{name:"string|object"},defaultValue:{func:!1,value:"''"}},{name:"defaultImageUrl",type:{name:"string"},required:!0},{name:"alt",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"sources",type:{name:"array"},defaultValue:{func:!1,value:"[]"}},{name:"dataAttribute",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"lazyLoad",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"width",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"height",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"styles",type:{name:"object"},defaultValue:{func:!1,value:"undefined"}}],events:[{name:"contextmenu",type:{names:["undefined"]}},{name:"onImgLoad",type:{names:["undefined"]}}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Picture/Picture.vue"]};export{x as P};

package/.storybook-static/assets/Picture.stories-BDqRm9_g.js

@@ -1,119 +0,0 @@
-import{P as s}from"./Picture-Cq76CaoK.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const a={standard:{defaultImageUrl:"https://bcassetcdn.com/assets/images/web/features/features-facebook-cover@2x.png",alt:"Facebook cover",sources:[{srcset:"https://bcassetcdn.com/assets/images/web/features/features-facebook-cover.png",mediaQuery:"(min-width: 1024px)"}]},logoSearchResultsGrid:{defaultImageUrl:"https://via.placeholder.com/600x480",alt:"Logo search result thumbnail",sources:[{srcset:"https://via.placeholder.com/300x240, https://via.placeholder.com/600x480 2x"}]},designSearchResultsGrid:{defaultImageUrl:"https://via.placeholder.com/800x304",alt:"Logo search result thumbnail",sources:[{srcset:"https://via.placeholder.com/480x182, https://via.placeholder.com/960x364 2x",mediaQuery:"(max-width: 767px)"},{srcset:"https://via.placeholder.com/400x152, https://via.placeholder.com/800x304 2x",mediaQuery:"(min-width: 768px)"}]}},v={title:"Components/Picture",component:s},t=()=>({components:{Picture:s},data(){return{picture:a.standard}},template:`
-      <Picture
-        :default-image-url="picture.defaultImageUrl"
-        :sources="picture.sources"
-        :alt="picture.alt"
-        data-attribute="data-test-preview"
-      />
-    `}),e=()=>({components:{Picture:s},data(){return{picture:a.logoSearchResultsGrid}},template:`
-      <div class="tw-container tw-max-w-300 tw-mx-auto tw-px-2 lg:tw-px-2.5 tw-mb-4">
-        <div class="tw-grid md:tw-grid-cols-3 tw-gap-5 tw-pt-8 tw-mb-12 lg:tw-grid-cols-4 tw-grid-cols-2 tw-px-2.5">
-          <div
-            v-for="index in 30"
-            :key="index"
-            class="tw-border tw-border-solid tw-border-grayscale-400"
-          >
-            <Picture
-              classes="tw-object-cover tw-w-full tw-object-top"
-              :default-image-url="picture.defaultImageUrl"
-              :sources="picture.sources"
-              :alt="picture.alt"
-            />
-          </div>
-        </div>
-      </div>
-    `}),r=()=>({components:{Picture:s},data(){return{picture:a.designSearchResultsGrid}},template:`
-      <div class="tw-container tw-max-w-300 tw-mx-auto tw-px-2 lg:tw-px-2.5 tw-mb-4">
-        <div class="tw-grid md:tw-grid-cols-3 tw-gap-5 tw-pt-8 tw-mb-12 lg:tw-grid-cols-3 tw-grid-cols-1 tw-px-2.5">
-          <div
-            v-for="index in 30"
-            :key="index"
-            class="tw-border tw-border-solid tw-border-grayscale-400"
-          >
-            <Picture
-              classes="tw-object-cover tw-w-full tw-object-top"
-              :default-image-url="picture.defaultImageUrl"
-              :sources="picture.sources"
-              :alt="picture.alt"
-            />
-          </div>
-        </div>
-      </div>
-    `});var c,o,i;t.parameters={...t.parameters,docs:{...(c=t.parameters)==null?void 0:c.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      Picture
-    },
-    data() {
-      return {
-        picture: pictureFixtures.standard
-      };
-    },
-    template: \`
-      <Picture
-        :default-image-url="picture.defaultImageUrl"
-        :sources="picture.sources"
-        :alt="picture.alt"
-        data-attribute="data-test-preview"
-      />
-    \`
-  };
-}`,...(i=(o=t.parameters)==null?void 0:o.docs)==null?void 0:i.source}}};var n,d,l;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      Picture
-    },
-    data() {
-      return {
-        picture: pictureFixtures.logoSearchResultsGrid
-      };
-    },
-    template: \`
-      <div class="tw-container tw-max-w-300 tw-mx-auto tw-px-2 lg:tw-px-2.5 tw-mb-4">
-        <div class="tw-grid md:tw-grid-cols-3 tw-gap-5 tw-pt-8 tw-mb-12 lg:tw-grid-cols-4 tw-grid-cols-2 tw-px-2.5">
-          <div
-            v-for="index in 30"
-            :key="index"
-            class="tw-border tw-border-solid tw-border-grayscale-400"
-          >
-            <Picture
-              classes="tw-object-cover tw-w-full tw-object-top"
-              :default-image-url="picture.defaultImageUrl"
-              :sources="picture.sources"
-              :alt="picture.alt"
-            />
-          </div>
-        </div>
-      </div>
-    \`
-  };
-}`,...(l=(d=e.parameters)==null?void 0:d.docs)==null?void 0:l.source}}};var u,p,w;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      Picture
-    },
-    data() {
-      return {
-        picture: pictureFixtures.designSearchResultsGrid
-      };
-    },
-    template: \`
-      <div class="tw-container tw-max-w-300 tw-mx-auto tw-px-2 lg:tw-px-2.5 tw-mb-4">
-        <div class="tw-grid md:tw-grid-cols-3 tw-gap-5 tw-pt-8 tw-mb-12 lg:tw-grid-cols-3 tw-grid-cols-1 tw-px-2.5">
-          <div
-            v-for="index in 30"
-            :key="index"
-            class="tw-border tw-border-solid tw-border-grayscale-400"
-          >
-            <Picture
-              classes="tw-object-cover tw-w-full tw-object-top"
-              :default-image-url="picture.defaultImageUrl"
-              :sources="picture.sources"
-              :alt="picture.alt"
-            />
-          </div>
-        </div>
-      </div>
-    \`
-  };
-}`,...(w=(p=r.parameters)==null?void 0:p.docs)==null?void 0:w.source}}};const b=["Standard","LogoSearchResultsGrid","DesignSearchResultsGrid"];export{r as DesignSearchResultsGrid,e as LogoSearchResultsGrid,t as Standard,b as __namedExportsOrder,v as default};

package/.storybook-static/assets/Pill-BsMeJhV9.js

@@ -1 +0,0 @@
-import{c as s,g as o,o as n}from"./iframe-C86bI_2U.js";import{_ as r}from"./_plugin-vue_export-helper-DlAUqK2U.js";const e={},l={class:"tw-rounded-full tw-outline-none tw-uppercase tw-py-0.5 tw-px-4 tw-select-none tw-text-center tw-text-xs"};function a(t,c,p,i,d,u){return n(),s("div",l,[o(t.$slots,"default")])}const _=r(e,[["render",a]]);e.__docgenInfo={exportName:"default",displayName:"Pill",description:"",tags:{},slots:[{name:"default"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Pill/Pill.vue"]};export{_ as P};

package/.storybook-static/assets/Pill.stories-DUvzbtnS.js

@@ -1,18 +0,0 @@
-import{P as n}from"./Pill-BsMeJhV9.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const i={title:"Components/Pill",component:n},t=()=>({components:{Pill:n},template:`
-      <div class="tw-font-sans">
-        <Pill class="tw-text-white tw-my-2 tw-w-8" :style="{ background: 'blue' }">Blue</Pill>
-        <Pill class="tw-text-white tw-my-2 tw-w-8" :style="{ background: 'red' }">Red</Pill>
-      </div>
-    `});var e,l,s;t.parameters={...t.parameters,docs:{...(e=t.parameters)==null?void 0:e.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      Pill
-    },
-    template: \`
-      <div class="tw-font-sans">
-        <Pill class="tw-text-white tw-my-2 tw-w-8" :style="{ background: 'blue' }">Blue</Pill>
-        <Pill class="tw-text-white tw-my-2 tw-w-8" :style="{ background: 'red' }">Red</Pill>
-      </div>
-    \`
-  };
-}`,...(s=(l=t.parameters)==null?void 0:l.docs)==null?void 0:s.source}}};const c=["Sample"];export{t as Sample,c as __namedExportsOrder,i as default};

package/.storybook-static/assets/PillBar-os4mJV3M.css

@@ -1 +0,0 @@
-.carousel-filter__category{white-space:nowrap}.carousel-filter__category:not(:last-child){margin-right:.75rem}