@designcrowd/fe-shared-lib 1.5.21 → 1.5.22

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

@@ -1,761 +0,0 @@
-import{d as Wt}from"./iframe-C86bI_2U.js";import{B as L}from"./Button-DtVlr_q3.js";import"./ButtonPrimary-DG9wNod9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-8mZGP41G.js";const Pt={title:"Components/Buttons",component:L},e=n=>{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:n},{label:`Button Anchor Link${s?` (${s})`:""}`,size:s==null?void 0:s.toLocaleLowerCase(),url:"javascript:",variant:n}]).flat();return i=[...i,{icon:"other",variant:n},{label:"Icon Top",iconTop:"download",iconTopSize:"md",variant:n},{label:"Icon Left",iconLeft:"download",variant:n,attrs:{"data-testing-attr":!0}},{label:"Icon Right",iconRight:"download",variant:n},{label:"Icon Left And Right",iconLeft:"download",iconRight:"lock",variant:n},{label:"All Icons",iconTop:"download",iconLeft:"download",iconRight:"lock",variant:n},{label:"Icon Left Link",iconLeft:"download",variant:n,url:"javascript:"},{label:"Icon Right Link",iconRight:"download",variant:n,url:"javascript:"},{label:"Rigid Corners Button",rounded:!1,variant:n},{label:"Rigid Left Corners Button",rounded:!1,roundedRight:!0,variant:n},{label:"Rigid Right Corners Button",rounded:!1,roundedLeft:!0,variant:n},{label:"Open In New Tab Button",variant:n,target:"_blank",url:"https://www.google.com"},{label:"IsBusy Button",variant:n,isBusy:!0,disabled:!0},{label:"IsBusy Button with text",variant:n,isBusy:!0,isBusyLabel:"IsBusy Button with text",disabled:!0},{label:"Disabled",variant:n,disabled:!0}],i=i.map(s=>({...s,attrs:{"data-test-tag":`test-${s.variant.toLowerCase()}`}})),i},Ct=n=>{const t=e(n);return t.forEach(i=>i.active=!0),t},Tt=n=>{const t=e(n);return t.forEach(i=>i.white=!0),t},a=Wt({components:{Button:L},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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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 h=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),data(){return{variants:e("outline-primary")}},template:`
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `});h.args=r;h.argTypes=o;const u=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),data(){return{variants:e("secondary")}},template:`
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `});u.args=r;u.argTypes=o;const d=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),data(){return{variants:e("warning")}},template:`
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `});d.args=r;d.argTypes=o;const p=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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 k=()=>({components:{StorybookButtonComponent:a},data(){return{variants:e("gray")}},template:`
-      <StorybookButtonComponent :variants="variants"/>
-    `}),O=()=>({components:{Button:L},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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),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=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),data(){return{variants:e("pill"),activeVariants:Ct("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 B=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),data(){return{variants:e("dark-mode-pill"),activeVariants:Ct("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>
-    `});B.args=r;B.argTypes=o;const S=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),data(){return{variants:Tt("outline")}},template:`
-      <div>
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-      </div>
-    `});S.args=r;S.argTypes=o;const j=(n,{argTypes:t})=>({components:{StorybookButtonComponent:a},props:Object.keys(t),data(){return{variants:Tt("ai")}},template:`
-      <div>
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-      </div>
-    `});j.args=r;j.argTypes=o;l.story={name:"Primary"};u.story={name:"Secondary"};d.story={name:"Warning"};p.story={name:"Success"};c.story={name:"Outline Success"};y.story={name:"Outline no hover"};g.story={name:"Info Filled"};k.story={name:"Gray"};O.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 C,T,W;l.parameters={...l.parameters,docs:{...(C=l.parameters)==null?void 0:C.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"/>
-    \`
-  };
-}`,...(W=(T=l.parameters)==null?void 0:T.docs)==null?void 0:W.source}}};var x,V,R;h.parameters={...h.parameters,docs:{...(x=h.parameters)==null?void 0:x.docs,source:{originalSource:`(args, {
-  argTypes
-}) => {
-  return {
-    components: {
-      StorybookButtonComponent
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('outline-primary')
-      };
-    },
-    template: \`
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    \`
-  };
-}`,...(R=(V=h.parameters)==null?void 0:V.docs)==null?void 0:R.source}}};var I,A,P;u.parameters={...u.parameters,docs:{...(I=u.parameters)==null?void 0:I.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"/>
-    \`
-  };
-}`,...(P=(A=u.parameters)==null?void 0:A.docs)==null?void 0:P.source}}};var F,N,q;d.parameters={...d.parameters,docs:{...(F=d.parameters)==null?void 0:F.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"/>
-    \`
-  };
-}`,...(q=(N=d.parameters)==null?void 0:N.docs)==null?void 0:q.source}}};var D,$,M;p.parameters={...p.parameters,docs:{...(D=p.parameters)==null?void 0:D.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"/>
-    \`
-  };
-}`,...(M=($=p.parameters)==null?void 0:$.docs)==null?void 0:M.source}}};var _,E,G;c.parameters={...c.parameters,docs:{...(_=c.parameters)==null?void 0:_.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"/>
-    \`
-  };
-}`,...(G=(E=c.parameters)==null?void 0:E.docs)==null?void 0:G.source}}};var z,H,J;y.parameters={...y.parameters,docs:{...(z=y.parameters)==null?void 0:z.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"/>
-    \`
-  };
-}`,...(J=(H=y.parameters)==null?void 0:H.docs)==null?void 0:J.source}}};var K,Q,U;g.parameters={...g.parameters,docs:{...(K=g.parameters)==null?void 0:K.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"/>
-    \`
-  };
-}`,...(U=(Q=g.parameters)==null?void 0:Q.docs)==null?void 0:U.source}}};var X,Y,Z;k.parameters={...k.parameters,docs:{...(X=k.parameters)==null?void 0:X.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      StorybookButtonComponent
-    },
-    data() {
-      return {
-        variants: generateSampleButtonVariants('gray')
-      };
-    },
-    template: \`
-      <StorybookButtonComponent :variants="variants"/>
-    \`
-  };
-}`,...(Z=(Y=k.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var tt,nt,et;O.parameters={...O.parameters,docs:{...(tt=O.parameters)==null?void 0:tt.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>
-    \`
-  };
-}`,...(et=(nt=O.parameters)==null?void 0:nt.docs)==null?void 0:et.source}}};var at,rt,ot;f.parameters={...f.parameters,docs:{...(at=f.parameters)==null?void 0:at.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"/>
-    \`
-  };
-}`,...(ot=(rt=f.parameters)==null?void 0:rt.docs)==null?void 0:ot.source}}};var st,it,lt;m.parameters={...m.parameters,docs:{...(st=m.parameters)==null?void 0:st.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"/>
-    \`
-  };
-}`,...(lt=(it=m.parameters)==null?void 0:it.docs)==null?void 0:lt.source}}};var ut,dt,pt;b.parameters={...b.parameters,docs:{...(ut=b.parameters)==null?void 0:ut.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"/>
-    \`
-  };
-}`,...(pt=(dt=b.parameters)==null?void 0:dt.docs)==null?void 0:pt.source}}};var ct,yt,gt;v.parameters={...v.parameters,docs:{...(ct=v.parameters)==null?void 0:ct.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"/>
-    \`
-  };
-}`,...(gt=(yt=v.parameters)==null?void 0:yt.docs)==null?void 0:gt.source}}};var ft,mt,bt;w.parameters={...w.parameters,docs:{...(ft=w.parameters)==null?void 0:ft.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>
-    \`
-  };
-}`,...(bt=(mt=w.parameters)==null?void 0:mt.docs)==null?void 0:bt.source}}};var vt,wt,ht;B.parameters={...B.parameters,docs:{...(vt=B.parameters)==null?void 0:vt.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>
-    \`
-  };
-}`,...(ht=(wt=B.parameters)==null?void 0:wt.docs)==null?void 0:ht.source}}};var Bt,St,jt;S.parameters={...S.parameters,docs:{...(Bt=S.parameters)==null?void 0:Bt.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>
-    \`
-  };
-}`,...(jt=(St=S.parameters)==null?void 0:St.docs)==null?void 0:jt.source}}};var kt,Ot,Lt;j.parameters={...j.parameters,docs:{...(kt=j.parameters)==null?void 0:kt.docs,source:{originalSource:`(args, {
-  argTypes
-}) => {
-  return {
-    components: {
-      StorybookButtonComponent
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonWhiteVariants('ai')
-      };
-    },
-    template: \`
-      <div>
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-      </div>
-    \`
-  };
-}`,...(Lt=(Ot=j.parameters)==null?void 0:Ot.docs)==null?void 0:Lt.source}}};const Ft=["PrimarySamples","OutlinePrimarySamples","SecondarySamples","WarningSamples","SuccessSamples","OutlineSuccessSamples","OutlineNoHover","InfoFilledSamples","GraySamples","PrimaryWithIconSamples","OutlineSamples","InfoSamples","NoBorderSamples","FlatSamples","PillSamples","DarkModePill","OutlineWhite","AiSamples"];export{j as AiSamples,B as DarkModePill,v as FlatSamples,k as GraySamples,g as InfoFilledSamples,m as InfoSamples,b as NoBorderSamples,y as OutlineNoHover,h as OutlinePrimarySamples,f as OutlineSamples,c as OutlineSuccessSamples,S as OutlineWhite,w as PillSamples,l as PrimarySamples,O as PrimaryWithIconSamples,u as SecondarySamples,p as SuccessSamples,d as WarningSamples,Ft as __namedExportsOrder,Pt as default};