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

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

@@ -0,0 +1,222 @@
+import{c as p,r as l,a as g,n as r,o as N,d as v}from"./vue.esm-bundler-BuzEyh6o.js";import{_ as y}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{B as o}from"./Button-C9BkIo_w.js";import"./ButtonPrimary-BD3XC-26.js";import"./Icon-CLd6chSw.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,x,C,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/brooke.couchman/Projects/bc-shared-experience-library/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.stories-CJc109aH.js

@@ -0,0 +1,48 @@
+import{z as c,c as w,i as d,w as r,a as g,k as m,g as N,o as S}from"./vue.esm-bundler-BuzEyh6o.js";import{B as p}from"./Button-C9BkIo_w.js";import{_ as P}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./ButtonPrimary-BD3XC-26.js";import"./Icon-CLd6chSw.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},size:{type:String,default:"medium"}},setup(t){const e=`js-number-stepper-${t.id}`;return{numberStepperRef:e,[e]:c(null)}},data(){return{num:null,longPress:null,longPressTimeout:null,longPressInterval: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.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()},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 i=1;e.changeNumber(t),e.longPressInterval=setInterval(()=>{e.changeNumber(t,i)},e.LONG_PRESS_INTERVAL_DELAY),e.longPressTimeout=setTimeout(()=>{i=e.LONG_PRESS_AMOUNT},e.LONG_PRESS_DELAY)}},clearLongPressTimers(t){t&&t.preventDefault(),clearTimeout(this.longPressTimeout),clearInterval(this.longPressInterval),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=Math.round(parseFloat(t.target.value));let i=0;if(!/\D/.test(e)||!e)i=e&&e;else if(e.length>=this.number.toString().length)i=e.slice(0,-1);else if(typeof size=="string"){const u=Math.round(parseFloat(size));i=Number.isNaN(u)?this.number:u}e?(e<this.min&&(i=this.min),this.max&&e>this.max&&(i=this.max)):i=this.min,this.number=i,t.target.value=i,this.$emit("update:modelValue",this.number),this.$emit("input",this.number)}}}},T={class:"tw-flex tw-items-stretch"},V=["value","disabled"];function L(t,e,i,u,x,n){const a=N("Button");return S(),w("div",T,[d(a,{variant:"flat",icon:"minus","icon-size":n.buttonIconSize,class:"tw-rounded-r-none",classes:n.buttonStyle,rounded:!1,"rounded-left":!0,disabled:i.disabled,onMousedown:[e[0]||(e[0]=r(s=>n.onMouseDown("down"),["left"])),r(n.clearLongPressTimers,["right"]),r(n.clearLongPressTimers,["middle"])],onMouseup:n.clearLongPressTimers,onMouseleave:n.clearLongPressTimers,onTouchstart:e[1]||(e[1]=s=>n.onMouseDown("down")),onTouchend:e[2]||(e[2]=s=>n.clearLongPressTimers(s)),onTouchcancel:e[3]||(e[3]=s=>n.clearLongPressTimers(s))},null,8,["icon-size","classes","disabled","onMousedown","onMouseup","onMouseleave"]),g("input",{ref:u.numberStepperRef,class:"tw-w-full tw-text-center tw-border tw-border-solid tw-border-secondary-200",type:"text",value:n.number,pattern:"[0-9]",disabled:i.disabled,onWheel:e[4]||(e[4]=(...s)=>n.onMouseWheel&&n.onMouseWheel(...s)),onInput:e[5]||(e[5]=r((...s)=>n.onInput&&n.onInput(...s),["stop"])),onKeyup:e[6]||(e[6]=(...s)=>n.clearLongPressTimers&&n.clearLongPressTimers(...s)),onKeydown:[e[7]||(e[7]=m(s=>n.onArrowDown("up"),["up"])),e[8]||(e[8]=m(s=>n.onArrowDown("down"),["down"]))],onFocus:e[9]||(e[9]=s=>t.$emit(t.FOCUSED_EVENT)),onBlur:e[10]||(e[10]=s=>t.$emit(t.BLUR_EVENT))},null,40,V),d(a,{variant:"flat",rounded:!1,"rounded-right":!0,icon:"plus","icon-size":n.buttonIconSize,class:"tw-rounded-l-none",classes:n.buttonStyle,disabled:i.disabled,onMousedown:[e[11]||(e[11]=r(s=>n.onMouseDown("up"),["left"])),r(n.clearLongPressTimers,["right"]),r(n.clearLongPressTimers,["middle"])],onMouseup:n.clearLongPressTimers,onMouseleave:n.clearLongPressTimers,onTouchstart:e[12]||(e[12]=s=>n.onMouseDown("up")),onTouchend:e[13]||(e[13]=s=>n.clearLongPressTimers(s)),onTouchcancel:e[14]||(e[14]=s=>n.clearLongPressTimers(s))},null,8,["icon-size","classes","disabled","onMousedown","onMouseup","onMouseleave"])])}const h=P(v,[["render",L]]);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:"size",type:{name:"string"},defaultValue:{func:!1,value:"'medium'"}}],events:[{name:"<undefined>"},{name:"update:modelValue",type:{names:["undefined"]}},{name:"input",type:{names:["undefined"]}}],sourceFiles:["/Users/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/components/NumberStepper/NumberStepper.vue"]};const I={title:"Components/Number Stepper",component:h},y={components:{NumberStepper:h,Button:p},data(){return{numberValue:20}}},l=()=>({...y,template:`
+      <div>
+        <div>Full width min 18 max 25</div>
+        <NumberStepper v-model="numberValue" id="id1" :min="18" :max="25" :disabled="false" />
+        <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>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>
+    `});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 18 max 25</div>
+        <NumberStepper v-model="numberValue" id="id1" :min="18" :max="25" :disabled="false" />
+        <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>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>
+    \`
+  };
+}`,...(f=(b=l.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};const R=["Primary"];export{l as Primary,R as __namedExportsOrder,I as default};

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

@@ -0,0 +1,126 @@
+import{a as m}from"./axios-dxcvQi4N.js";import{M as C}from"./index-BqKh95Lf.js";import{L as z}from"./Loader-CIm9SBxn.js";import{c as r,i as u,F as H,f as W,g as c,o as t,a as w,j as D,t as s,n as _,e as g,b as v,C as d}from"./vue.esm-bundler-BuzEyh6o.js";import{_ as J}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{B as oe}from"./Button-C9BkIo_w.js";import{D as re,a as se}from"./DropdownItem-DhJH7ViO.js";import{P as ie}from"./Pill-C7qxntuo.js";import"./_commonjsHelpers-BosuxZz1.js";import"./ButtonPrimary-BD3XC-26.js";import"./Icon-CLd6chSw.js";let Q;const de=e=>{Q=e},ce=()=>Q||m,me=async e=>{try{const n=await ce().get(`/maker/api/brand-pages/${e}/payment-configs`);return n.status===200?n.data:null}catch{return null}},pe={setBrandPageApiClientAxios:de,getPaymentConfigsByBrandPageToken:me},o=Object.freeze({active:"Active",pendingPreOnboarding:"PendingPreOnboarding",pendingPostOnboarding:"PendingPostOnboarding",unactivatedByCustomer:"UnactivatedByCustomer"}),X={props:{brandPageToken:{type:String,required:!1},showPaymentProviderExternalId:{type:Boolean,required:!1,default:!0},statusFilters:{type:Array,required:!1,default:void 0}},data:()=>({isLoading:!0,paymentConfigs:[]}),methods:{getPaymentConfigStatusDisplayText(e){switch(e){case o.pendingPreOnboarding:return"Onboarding Incomplete";case o.pendingPostOnboarding:return"Pending Verification";case o.active:return"Connected";case o.unactivatedByCustomer:return"Inactive";default:return null}},getPaymentConfigStatusDisplayClasses(e){switch(e){case o.pendingPreOnboarding:case o.pendingPostOnboarding:return"tw-bg-warning-500";case o.active:return"tw-bg-success-500";case o.unactivatedByCustomer:return"tw-bg-grayscale-600";default:return null}},async updatePaymentConfigs(){if(this.brandPageToken)try{this.isLoading=!0;const e=await pe.getPaymentConfigsByBrandPageToken(this.brandPageToken);e&&(this.paymentConfigs=Array.isArray(this.statusFilters)?e.filter(n=>this.statusFilters.some(i=>n.status===i)):e,this.$emit("on-load",this.paymentConfigs))}finally{this.isLoading=!1}}}},Z={components:{Loader:z},mixins:[X],async mounted(){await this.updatePaymentConfigs()}},le={key:0,class:"tw-w-full tw-flex tw-justify-center tw-p-2"},ge={key:1},ue=["href"],fe=["src"];function ye(e,n,i,ne,te,p){const E=c("Loader");return t(),r("div",null,[e.isLoading?(t(),r("div",le,[u(E)])):(t(),r("div",ge,[(t(!0),r(H,null,W(e.paymentConfigs,(a,h)=>(t(),r("a",{key:a.id,href:a.dashboardUrl,target:"_blank"},[w("div",{class:_(["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":h!==e.paymentConfigs.length-1}])},[w("img",{class:"tw-h-6",src:a.paymentProviderImageUrl,alt:"Payment provider's logo"},null,8,fe),D(" "+s(a.paymentProviderName)+" "+s(a.defaultCurrency)+" ",1),w("p",{class:_(["tw-ml-auto 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(a.status)])},s(e.getPaymentConfigStatusDisplayText(a.status)),3)],2)],8,ue))),128))]))])}const T=J(Z,[["render",ye]]);Z.__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/brooke.couchman/Projects/bc-shared-experience-library/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js","/Users/brooke.couchman/Projects/bc-shared-experience-library/src/experiences/components/PaymentConfigList/PaymentConfigList.vue"]};const ee={components:{Button:oe,Dropdown:re,DropdownItem:se,Loader:z,Pill:ie},mixins:[X],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(n=>n.id===this.paymentConfigId);if(e)this.setSelectedPaymentConfig(e);else if(this.paymentConfigs.length>0){const n=this.paymentConfigs.find(i=>i.status===o.active);this.setSelectedPaymentConfig(n||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)}}},Pe={key:0,class:"tw-w-full tw-flex tw-justify-center tw-p-2"},be={key:0,class:"tw-flex"},we={class:"tw-text-sm tw-grow tw-select-none"},Ce={class:"tw-text-sm tw-grow tw-select-none"};function ke(e,n,i,ne,te,p){const E=c("Loader"),a=c("Button"),h=c("Pill"),O=c("DropdownItem"),ae=c("Dropdown");return t(),r("div",null,[e.isLoading?(t(),r("div",Pe,[u(E)])):g("",!0),e.isAddPaymentProviderButtonVisible?(t(),v(a,{key:1,label:"Add Payment Provider",size:"small",variant:"outline",onOnClick:p.onAddPaymentProviderButtonClick},null,8,["onOnClick"])):g("",!0),!e.isLoading&&!e.isAddPaymentProviderButtonVisible?(t(),v(ae,{key:2,ref:"dropdown"},{title:d(()=>[e.selectedPaymentConfig?(t(),r("div",be,[w("span",we,s(e.selectedPaymentConfig.name),1),u(h,{class:_(["tw-text-white tw-mr-2",e.getPaymentConfigStatusDisplayClasses(e.selectedPaymentConfig.status)])},{default:d(()=>[D(s(e.getPaymentConfigStatusDisplayText(e.selectedPaymentConfig.status)),1)]),_:1},8,["class"])])):g("",!0)]),default:d(()=>[(t(!0),r(H,null,W(e.paymentConfigs,l=>(t(),v(O,{key:`payment-config-${l.id}`,onClick:he=>p.onPaymentConfigClick(l)},{default:d(()=>[w("span",Ce,s(l.name),1),u(h,{class:_(["tw-text-white",e.getPaymentConfigStatusDisplayClasses(l.status)])},{default:d(()=>[D(s(e.getPaymentConfigStatusDisplayText(l.status)),1)]),_:2},1032,["class"])]),_:2},1032,["onClick"]))),128)),i.showAddPaymentProvider?(t(),v(O,{key:0,class:"tw-border-t-2",onClick:p.onAddPaymentProviderButtonClick},{default:d(()=>[u(a,{"full-width":!0,label:"Add Payment Provider",size:"small",variant:"outline",onOnClick:p.onAddPaymentProviderButtonClick},null,8,["onOnClick"])]),_:1},8,["onClick"])):g("",!0)]),_:1},512)):g("",!0)])}const A=J(ee,[["render",ke]]);ee.__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/brooke.couchman/Projects/bc-shared-experience-library/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js","/Users/brooke.couchman/Projects/bc-shared-experience-library/src/experiences/components/PaymentConfigList/PaymentConfigDropdown.vue"]};const Be={title:"Components/PaymentConfigList",component:T},k=2e3,x=[{id:"32e1c01c-6276-4edb-821d-16f9d8a5e16b",name:"Stripe AUD",paymentProviderExternalId:void 0,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"}],S=()=>{const e=new C(m,{delayResponse:k}),n="6bc3885c-7e5c-4c9e-9b54-21dcd06ca647";return e.onGet(`/maker/api/brand-pages/${n}/payment-configs`).reply(200,x),{components:{PaymentConfigList:T},data(){return{brandPageToken:n}},template:`
+      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigList :brand-page-token="brandPageToken"/>
+      </div>
+    `}},f=()=>{const e=new C(m,{delayResponse:k}),n="6bc3885c-7e5c-4c9e-9b54-21dcd06ca647";return e.onGet(`/maker/api/brand-pages/${n}/payment-configs`).reply(200,x),{components:{PaymentConfigList:T},data(){return{brandPageToken:n}},template:`
+      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigList :brand-page-token="brandPageToken" :show-payment-provider-external-id="false"/>
+      </div>
+    `}};f.story={name:"Sample Stripe (Hidden External Id)"};const y=()=>{const e=new C(m,{delayResponse:k}),n="6bc3885c-7e5c-4c9e-9b54-21dcd06ca647";return e.onGet(`/maker/api/brand-pages/${n}/payment-configs`).reply(200,x),{components:{PaymentConfigDropdown:A},data(){return{brandPageToken:n}},template:`
+      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
+      </div>
+    `}};y.story={name:"Dropdown Stripe"};const P=()=>{const e=new C(m,{delayResponse:k}),n="6bc3885c-7e5c-4c9e-9b54-21dcd06ca647";return e.onGet(`/maker/api/brand-pages/${n}/payment-configs`).reply(200,x),{components:{PaymentConfigDropdown:A},data(){return{brandPageToken:n}},template:`
+      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigDropdown :brand-page-token="brandPageToken" :status-filters="['Active']"/>
+      </div>
+    `}};P.story={name:"Dropdown Stripe with filter"};const b=()=>{const e=new C(m,{delayResponse:k}),n="00000000-0000-0000-0000-000000000000";return e.onGet(`/maker/api/brand-pages/${n}/payment-configs`).reply(200,[]),{components:{PaymentConfigDropdown:A},data(){return{brandPageToken:n}},template:`
+      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
+      </div>
+    `}};b.SampleDropdownEmpty={name:"Dropdown Empty"};var L,N,B;S.parameters={...S.parameters,docs:{...(L=S.parameters)==null?void 0:L.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>
+    \`
+  };
+}`,...(B=(N=S.parameters)==null?void 0:N.docs)==null?void 0:B.source}}};var I,$,R;f.parameters={...f.parameters,docs:{...(I=f.parameters)==null?void 0:I.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>
+    \`
+  };
+}`,...(R=($=f.parameters)==null?void 0:$.docs)==null?void 0:R.source}}};var U,M,j;y.parameters={...y.parameters,docs:{...(U=y.parameters)==null?void 0:U.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>
+    \`
+  };
+}`,...(j=(M=y.parameters)==null?void 0:M.docs)==null?void 0:j.source}}};var G,F,V;P.parameters={...P.parameters,docs:{...(G=P.parameters)==null?void 0:G.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>
+    \`
+  };
+}`,...(V=(F=P.parameters)==null?void 0:F.docs)==null?void 0:V.source}}};var q,Y,K;b.parameters={...b.parameters,docs:{...(q=b.parameters)==null?void 0:q.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>
+    \`
+  };
+}`,...(K=(Y=b.parameters)==null?void 0:Y.docs)==null?void 0:K.source}}};const Ie=["SampleStripe","SampleStripeHideExternalId","SampleDropdownStripe","SampleDropdownStripeWithFilter","SampleDropdownEmpty"];export{b as SampleDropdownEmpty,y as SampleDropdownStripe,P as SampleDropdownStripeWithFilter,S as SampleStripe,f as SampleStripeHideExternalId,Ie as __namedExportsOrder,Be as default};

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

@@ -0,0 +1 @@
+import{c as l,F as f,f as o,a as m,n as c,h as g,o as s}from"./vue.esm-bundler-BuzEyh6o.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 b(n,u,e,L,i,a){return s(),l("picture",null,[(s(!0),l(f,null,o(e.sources,(t,r)=>(s(),l("source",{key:r,srcset:t.srcset,media:t.mediaQuery},null,8,h))),128)),m("img",{ref:i.imageTagRef,class:c(["tw-block tw-w-full",e.classes]),loading:a.isLazyLoading,src:e.defaultImageUrl,alt:e.alt,width:e.width,height:e.height,style:g(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 v=y(d,[["render",b]]);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/brooke.couchman/Projects/bc-shared-experience-library/src/atoms/components/Picture/Picture.vue"]};export{v as P};

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

@@ -0,0 +1,119 @@
+import{P as s}from"./Picture-zuMOWzvt.js";import"./vue.esm-bundler-BuzEyh6o.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-C7qxntuo.js

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

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

@@ -0,0 +1,18 @@
+import{P as n}from"./Pill-C7qxntuo.js";import"./vue.esm-bundler-BuzEyh6o.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-BeJSf_Pk.css

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