@designcrowd/fe-shared-lib 1.7.0 → 1.8.0

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

@@ -0,0 +1,953 @@
+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};