@designcrowd/fe-shared-lib 1.2.0 → 1.2.1-ml-input-changes

package/.storybook-static/assets/Buttons.stories-C7AZ07ow.js

@@ -0,0 +1,699 @@
+import{d as ht}from"./vue.esm-bundler-C7QvyiW1.js";import{B as k}from"./Button-IgCxbLvL.js";import"./ButtonPrimary-Ce51KkgM.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-B8lXgcc0.js";const Ct={title:"Components/Buttons",component:k},e=t=>{let i=["Large",void 0,"Medium","Small","Small-Wide","Small-Medium"].map(s=>[{label:`Regular Button${s?` (${s})`:""}`,size:s==null?void 0:s.toLocaleLowerCase(),variant:t},{label:`Button Anchor Link${s?` (${s})`:""}`,size:s==null?void 0:s.toLocaleLowerCase(),url:"javascript:",variant:t}]).flat();return i=[...i,{icon:"other",variant:t},{label:"Icon Top",iconTop:"download",iconTopSize:"md",variant:t},{label:"Icon Left",iconLeft:"download",variant:t,attrs:{"data-testing-attr":!0}},{label:"Icon Right",iconRight:"download",variant:t},{label:"Icon Left And Right",iconLeft:"download",iconRight:"lock",variant:t},{label:"All Icons",iconTop:"download",iconLeft:"download",iconRight:"lock",variant:t},{label:"Icon Left Link",iconLeft:"download",variant:t,url:"javascript:"},{label:"Icon Right Link",iconRight:"download",variant:t,url:"javascript:"},{label:"Rigid Corners Button",rounded:!1,variant:t},{label:"Rigid Left Corners Button",rounded:!1,roundedRight:!0,variant:t},{label:"Rigid Right Corners Button",rounded:!1,roundedLeft:!0,variant:t},{label:"Open In New Tab Button",variant:t,target:"_blank",url:"https://www.google.com"},{label:"IsBusy Button",variant:t,isBusy:!0,disabled:!0},{label:"IsBusy Button with text",variant:t,isBusy:!0,isBusyLabel:"IsBusy Button with text",disabled:!0},{label:"Disabled",variant:t,disabled:!0}],i=i.map(s=>({...s,attrs:{"data-test-tag":`test-${s.variant.toLowerCase()}`}})),i},wt=t=>{const n=e(t);return n.forEach(i=>i.active=!0),n},Bt=t=>{const n=e(t);return n.forEach(i=>i.white=!0),n},a=ht({components:{Button:k},props:{disabled:{type:Boolean,required:!0},fullWidth:{type:Boolean,required:!0},greyOutLeft:{type:Boolean,required:!0},justify:{type:String,required:!0},variants:{type:Array,required:!0}},template:`
+    <table class="tw-w-full">
+    <thead>
+    <tr>
+      <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</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 in variants" class="tw-bg-grayscale-200">
+      <td class="tw-p-4">
+        <Button
+            :full-width="fullWidth"
+            :greyOutLeft="greyOutLeft"
+            :justify="justify"
+            :label="variant.label"
+            :variant="variant.variant"
+            :size="variant.size"
+            :url="variant.url"
+            :icon="variant.icon"
+            :icon-left="variant.iconLeft"
+            :icon-right="variant.iconRight"
+            :icon-top="variant.iconTop"
+            :icon-top-size="variant.iconTopSize"
+            :rounded="variant.rounded"
+            :rounded-left="variant.roundedLeft"
+            :rounded-right="variant.roundedRight"
+            :disabled="variant.disabled"
+            :active="variant.active"
+            :white="variant.white"
+            :target="variant.target"
+            :attrs="variant.attrs"
+            :is-busy="variant.isBusy"
+            :is-busy-label="variant.isBusyLabel"
+        />
+      </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;Button
+          label="{{ variant.label }}"
+          variant="{{ variant.variant }}"
+          {{ (variant.size ? 'size="' + variant.size + '"' : '') }}
+          {{ (variant.url ? 'url="' + variant.url + '"' : '') }}
+          {{ (variant.icon ? 'icon="' + variant.icon + '"' : '') }}
+          {{ (variant.iconLeft ? 'icon-left="' + variant.iconLeft + '"' : '') }}
+          {{ (variant.iconRight ? 'icon-right="' + variant.iconRight + '"' : '') }}
+          {{ (variant.iconTop ? 'icon-top="' + variant.iconTop + '"' : '') }}
+          {{ (variant.iconTopSize ? 'icon-top-size="' + variant.iconTopSize + '"' : '') }}
+          {{ (typeof variant.rounded !== 'undefined' ? ':rounded="' + variant.rounded + '"' : '') }}
+          {{ (typeof variant.roundedLeft !== 'undefined' ? ':rounded-left="' + variant.roundedLeft + '"' : '') }}
+          {{ (typeof variant.roundedRight !== 'undefined' ? ':rounded-right="' + variant.roundedRight + '"' : '') }}
+          {{ (variant.disabled ? ':disabled="true"' : '') }}
+          {{ (variant.target ? ':target="' + variant.target + '"' : '') }}
+          {{ (justify === 'center' ? '' : 'justify="' + justify + '"') }}
+          {{ (fullWidth ? ':fullwidth="true"' : '') }}
+          {{ (greyOutLeft ? ':grey-out-left="true"' : '') }}
+          {{ (variant.isBusy ? ':is-busy="true"' : '') }}
+          {{ (variant.isBusyLabel ? 'is-busy-label="' + variant.isBusyLabel + '"' : '') }}
+          /&gt;
+        </code>
+      </td>
+    </tr>
+    </tbody>
+    </table>
+  `}),r={disabled:!1,fullWidth:!1,greyOutLeft:!1,justify:"center"},o={justify:{control:{type:"radio"},options:["center","between"]}},l=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("primary")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});l.args=r;l.argTypes=o;const d=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("secondary")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});d.args=r;d.argTypes=o;const u=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("warning")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});u.args=r;u.argTypes=o;const p=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("success")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});p.args=r;p.argTypes=o;const c=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("outline-success")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});c.args=r;c.argTypes=o;const y=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("outline-no-hover")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});y.args=r;y.argTypes=o;const g=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("info-filled")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});g.args=r;g.argTypes=o;const S=()=>({components:{StorybookButtonComponent:a},data(){return{variants:e("gray")}},template:`
+      <StorybookButtonComponent :variants="variants"/>
+    `}),j=()=>({components:{Button:k},methods:{test(){alert("on click")}},template:`
+      <table class="tw-w-full">
+      <thead>
+      <tr>
+        <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</th>
+        <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr class="tw-bg-grayscale-200">
+        <td class="tw-p-4">
+          <Button
+              label="Regular Button"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              @on-click="test"
+          />
+        </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;Button
+            label="Regular Button"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td class="tw-p-4">
+          <Button
+              label="Button Anchor Link"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              url="http://www.google.com"
+          />
+        </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;Button
+            label="Button Anchor Link"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            url="http://www.google.com"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      <tr class="tw-bg-grayscale-200">
+        <td class="tw-p-4">
+          <Button
+              label="Disabled Button"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              :disabled="true"
+              @on-click="test"
+          />
+        </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;Button
+            label="Regular Button"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            :disabled="true"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      </tbody>
+      </table>
+    `}),f=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("outline")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});f.args=r;f.argTypes=o;const m=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("info")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});m.args=r;m.argTypes=o;const b=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("no-border")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});b.args=r;b.argTypes=o;const v=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("flat")}},template:`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `});v.args=r;v.argTypes=o;const w=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("pill"),activeVariants:wt("pill")}},template:`
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="activeVariants"/>
+      </div>
+    `});w.args=r;w.argTypes=o;const h=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:e("dark-mode-pill"),activeVariants:wt("dark-mode-pill")}},template:`
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="activeVariants"/>
+      </div>
+    `});h.args=r;h.argTypes=o;const B=(t,{argTypes:n})=>({components:{StorybookButtonComponent:a},props:Object.keys(n),data(){return{variants:Bt("outline")}},template:`
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      </div>
+    `});B.args=r;B.argTypes=o;l.story={name:"Primary"};d.story={name:"Secondary"};u.story={name:"Warning"};p.story={name:"Success"};c.story={name:"Outline Success"};y.story={name:"Outline no hover"};g.story={name:"Info Filled"};S.story={name:"Gray"};j.story={name:"Primary With Icon"};f.story={name:"Outline"};m.story={name:"Info"};b.story={name:"No Border"};v.story={name:"Flat"};w.story={name:"Pill"};var O,L,C;l.parameters={...l.parameters,docs:{...(O=l.parameters)==null?void 0:O.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('primary')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(C=(L=l.parameters)==null?void 0:L.docs)==null?void 0:C.source}}};var T,W,x;d.parameters={...d.parameters,docs:{...(T=d.parameters)==null?void 0:T.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('secondary')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(x=(W=d.parameters)==null?void 0:W.docs)==null?void 0:x.source}}};var R,V,I;u.parameters={...u.parameters,docs:{...(R=u.parameters)==null?void 0:R.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('warning')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(I=(V=u.parameters)==null?void 0:V.docs)==null?void 0:I.source}}};var A,P,F;p.parameters={...p.parameters,docs:{...(A=p.parameters)==null?void 0:A.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('success')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(F=(P=p.parameters)==null?void 0:P.docs)==null?void 0:F.source}}};var N,q,D;c.parameters={...c.parameters,docs:{...(N=c.parameters)==null?void 0:N.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline-success')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(D=(q=c.parameters)==null?void 0:q.docs)==null?void 0:D.source}}};var $,M,_;y.parameters={...y.parameters,docs:{...($=y.parameters)==null?void 0:$.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline-no-hover')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(_=(M=y.parameters)==null?void 0:M.docs)==null?void 0:_.source}}};var E,G,z;g.parameters={...g.parameters,docs:{...(E=g.parameters)==null?void 0:E.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('info-filled')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(z=(G=g.parameters)==null?void 0:G.docs)==null?void 0:z.source}}};var H,J,K;S.parameters={...S.parameters,docs:{...(H=S.parameters)==null?void 0:H.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    data() {
+      return {
+        variants: generateSampleButtonVariants('gray')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent :variants="variants"/>
+    \`
+  };
+}`,...(K=(J=S.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var Q,U,X;j.parameters={...j.parameters,docs:{...(Q=j.parameters)==null?void 0:Q.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Button
+    },
+    methods: {
+      test() {
+        // eslint-disable-next-line no-alert
+        alert('on click');
+      }
+    },
+    template: \`
+      <table class="tw-w-full">
+      <thead>
+      <tr>
+        <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Button</th>
+        <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr class="tw-bg-grayscale-200">
+        <td class="tw-p-4">
+          <Button
+              label="Regular Button"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              @on-click="test"
+          />
+        </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;Button
+            label="Regular Button"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td class="tw-p-4">
+          <Button
+              label="Button Anchor Link"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              url="http://www.google.com"
+          />
+        </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;Button
+            label="Button Anchor Link"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            url="http://www.google.com"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      <tr class="tw-bg-grayscale-200">
+        <td class="tw-p-4">
+          <Button
+              label="Disabled Button"
+              variant="primary-with-icon"
+              icon="chevron-right-wide"
+              iconViewBox="0 0 24 24"
+              :disabled="true"
+              @on-click="test"
+          />
+        </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;Button
+            label="Regular Button"
+            variant="primary-with-icon"
+            icon="chevron-right-wide"
+            iconViewBox="0 0 24 24"
+            :disabled="true"
+            /&gt;
+          </code>
+        </td>
+      </tr>
+      </tbody>
+      </table>
+    \`
+  };
+}`,...(X=(U=j.parameters)==null?void 0:U.docs)==null?void 0:X.source}}};var Y,Z,tt;f.parameters={...f.parameters,docs:{...(Y=f.parameters)==null?void 0:Y.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(tt=(Z=f.parameters)==null?void 0:Z.docs)==null?void 0:tt.source}}};var nt,et,at;m.parameters={...m.parameters,docs:{...(nt=m.parameters)==null?void 0:nt.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('info')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(at=(et=m.parameters)==null?void 0:et.docs)==null?void 0:at.source}}};var rt,ot,st;b.parameters={...b.parameters,docs:{...(rt=b.parameters)==null?void 0:rt.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('no-border')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(st=(ot=b.parameters)==null?void 0:ot.docs)==null?void 0:st.source}}};var it,lt,dt;v.parameters={...v.parameters,docs:{...(it=v.parameters)==null?void 0:it.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('flat')
+      };
+    },
+    template: \`
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    \`
+  };
+}`,...(dt=(lt=v.parameters)==null?void 0:lt.docs)==null?void 0:dt.source}}};var ut,pt,ct;w.parameters={...w.parameters,docs:{...(ut=w.parameters)==null?void 0:ut.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('pill'),
+        activeVariants: generateSampleButtonActiveVariants('pill')
+      };
+    },
+    template: \`
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="activeVariants"/>
+      </div>
+    \`
+  };
+}`,...(ct=(pt=w.parameters)==null?void 0:pt.docs)==null?void 0:ct.source}}};var yt,gt,ft;h.parameters={...h.parameters,docs:{...(yt=h.parameters)==null?void 0:yt.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('dark-mode-pill'),
+        activeVariants: generateSampleButtonActiveVariants('dark-mode-pill')
+      };
+    },
+    template: \`
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="activeVariants"/>
+      </div>
+    \`
+  };
+}`,...(ft=(gt=h.parameters)==null?void 0:gt.docs)==null?void 0:ft.source}}};var mt,bt,vt;B.parameters={...B.parameters,docs:{...(mt=B.parameters)==null?void 0:mt.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      StorybookButtonComponent
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonWhiteVariants('outline')
+      };
+    },
+    template: \`
+      <div>
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+      </div>
+    \`
+  };
+}`,...(vt=(bt=B.parameters)==null?void 0:bt.docs)==null?void 0:vt.source}}};const Tt=["PrimarySamples","SecondarySamples","WarningSamples","SuccessSamples","OutlineSuccessSamples","OutlineNoHover","InfoFilledSamples","GraySamples","PrimaryWithIconSamples","OutlineSamples","InfoSamples","NoBorderSamples","FlatSamples","PillSamples","DarkModePill","OutlineWhite"];export{h as DarkModePill,v as FlatSamples,S as GraySamples,g as InfoFilledSamples,m as InfoSamples,b as NoBorderSamples,y as OutlineNoHover,f as OutlineSamples,c as OutlineSuccessSamples,B as OutlineWhite,w as PillSamples,l as PrimarySamples,j as PrimaryWithIconSamples,d as SecondarySamples,p as SuccessSamples,u as WarningSamples,Tt as __namedExportsOrder,Ct as default};