@designcrowd/fe-shared-lib 1.6.10-voiceText → 1.6.10

package/.storybook-static/assets/Tooltip.stories-sJFylRS_.js

@@ -1,953 +0,0 @@
-import{T as n}from"./Tooltip-ZukyujG5.js";import"./Icon-C17LFvsP.js";import"./iframe-B3A6OXQU.js";import"./preload-helper-PPVm8Dsz.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const s={title:"Components/Tooltip",component:n},t=()=>({components:{Tooltip:n},template:`
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Directions</th>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom">
-                <template v-slot:open>I am a tooltip on the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right">
-                <template v-slot:open>I am a tooltip on the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left">
-                <template v-slot:open>I am a tooltip on the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top">
-                <template v-slot:open>I am a tooltip on the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Alignments</th>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="left">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="bottom" alignment="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="right">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="bottom" alignment="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="center">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the center!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="bottom" alignment="center"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="top">
-                <template v-slot:open>I am a tooltip on the right, aligned to the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="right" alignment="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="bottom">
-                <template v-slot:open>I am a tooltip on the right, aligned to the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="right" alignment="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="middle">
-                <template v-slot:open>I am a tooltip on the right, aligned to the middle!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="right" alignment="middle"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="top">
-                <template v-slot:open>I am a tooltip on the left, aligned to the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="left" alignment="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="bottom">
-                <template v-slot:open>I am a tooltip on the left, aligned to the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="left" alignment="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="middle">
-                <template v-slot:open>I am a tooltip on the left, aligned to the middle!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="left" alignment="middle"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="left">
-                <template v-slot:open>I am a tooltip on the top, aligned to the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="top" alignment="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="right">
-                <template v-slot:open>I am a tooltip on the top, aligned to the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="top" alignment="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="center">
-                <template v-slot:open>I am a tooltip on the top, aligned to the center!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="top" alignment="center"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    `}),e=()=>({components:{Tooltip:n},template:`
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</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">
-              <Tooltip color="info-500" direction="right">
-                <template v-slot:open>I am an info tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="info-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="secondary-500" direction="right">
-                <template v-slot:open>I am an secondary tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="secondary-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="success-500" direction="right">
-                <template v-slot:open>I am an success tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="success-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="warning-500" direction="right">
-                <template v-slot:open>I am an warning tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="warning-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="error-500" direction="right">
-                <template v-slot:open>I am an error tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="error-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    `});t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      Tooltip
-    },
-    template: \`
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Directions</th>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom">
-                <template v-slot:open>I am a tooltip on the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right">
-                <template v-slot:open>I am a tooltip on the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left">
-                <template v-slot:open>I am a tooltip on the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top">
-                <template v-slot:open>I am a tooltip on the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Alignments</th>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="left">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="bottom" alignment="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="right">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="bottom" alignment="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="center">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the center!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="bottom" alignment="center"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="top">
-                <template v-slot:open>I am a tooltip on the right, aligned to the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="right" alignment="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="bottom">
-                <template v-slot:open>I am a tooltip on the right, aligned to the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="right" alignment="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="middle">
-                <template v-slot:open>I am a tooltip on the right, aligned to the middle!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="right" alignment="middle"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="top">
-                <template v-slot:open>I am a tooltip on the left, aligned to the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="left" alignment="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="bottom">
-                <template v-slot:open>I am a tooltip on the left, aligned to the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="left" alignment="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="middle">
-                <template v-slot:open>I am a tooltip on the left, aligned to the middle!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="left" alignment="middle"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="left">
-                <template v-slot:open>I am a tooltip on the top, aligned to the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="top" alignment="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="right">
-                <template v-slot:open>I am a tooltip on the top, aligned to the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="top" alignment="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="center">
-                <template v-slot:open>I am a tooltip on the top, aligned to the center!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip direction="top" alignment="center"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    \`
-  };
-}`,...t.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`() => {
-  return {
-    components: {
-      Tooltip
-    },
-    template: \`
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</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">
-              <Tooltip color="info-500" direction="right">
-                <template v-slot:open>I am an info tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="info-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="secondary-500" direction="right">
-                <template v-slot:open>I am an secondary tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="secondary-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="success-500" direction="right">
-                <template v-slot:open>I am an success tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="success-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="warning-500" direction="right">
-                <template v-slot:open>I am an warning tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="warning-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="error-500" direction="right">
-                <template v-slot:open>I am an error tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </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;Tooltip color="error-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    \`
-  };
-}`,...e.parameters?.docs?.source}}};const c=["DirectionsAndAlignments","Colors"];export{e as Colors,t as DirectionsAndAlignments,c as __namedExportsOrder,s as default};