flowbite-svelte 0.44.11 → 0.44.12

package/src/routes/utils/CompoAttributesViewer.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  import TableProp from './TableProp.svelte';
-  import TableDefaultRow from './TableDefaultRow.svelte';
-
-  import { onMount } from 'svelte';
-
-  
-  export let components;
-  let compoData = [];
-
-  // Split the components into an array
-  const componentArray = components.split(', ');
-
-  async function processComponents() {
-    const importPromises = componentArray.map(async (component) => {
-      const module = await import(`../component-data/${component}.json`);
-      return { data: module };
-    });
-
-    try {
-      compoData = await Promise.all(importPromises);
-    } catch (error) {
-      console.error('Error:', error);
-      throw error;
-    }
-  }
-
-  onMount(() => {
-    processComponents()
-      .catch(error => {
-        console.error('Error outside of processComponents:', error);
-      });
-  });
- 
-</script>
-
-{#if compoData}
-<h3>Props, events, and slots</h3>
-{#each compoData as compo}
-
-<h4>{compo.data.default.name}</h4>
-
-{#if compo.data.default.props.length > 0}
-<h5 class="mt-8 mb-4 text-md font-bold text-gray-900 dark:text-white">Props</h5>
-  <ul class="w-full">
-    <TableProp>
-    <TableDefaultRow items={compo.data.default.props} rowState='hover' />
-    </TableProp>
-  </ul>
-{/if}
-
-<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-
-{#if compo.data.default.events.length > 0}
-<div>
-<h5 class="mt-8 mb-4 text-md font-bold text-gray-900 dark:text-white">Events</h5>
-  <ul>
-    <TableProp category="slots">
-    <TableDefaultRow items={compo.data.default.events} rowState='hover' />
-    </TableProp>
-  </ul>
-</div>
-{/if}
-
-{#if compo.data.default.slots.length > 0}
-<div>
-<h5 class="mt-8 mb-4 text-md font-bold text-gray-900 dark:text-white">Slots</h5>
-  <ul class="w-full">
-    <TableProp category="slots">
-    <TableDefaultRow items={compo.data.default.slots} rowState='hover' />
-    </TableProp>
-  </ul>
-</div>
-{/if}
-
-</div>
-{/each}
-{/if}

package/src/routes/utils/CompoCard.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import Card from '$lib/cards/Card.svelte';
-
-  export let name: string;
-  export let dir: string;
-  export let path: string;
-  export let thumnailSize: string;
-
-  path = path.toLowerCase();
-  dir = dir.toLowerCase();
-</script>
-
-<Card href="/docs/{dir}{path}/" padding="none" {...$$restProps} class="!max-w-none shadow-none hover:shadow-lg dark:hover:bg-gray-900 dark:hover:shadow-lg-light">
-  <div class="bg-gray-50 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
-    <span class="text-base font-medium text-gray-900 dark:text-white">{name}</span>
-    <span class="text-gray-500 dark:text-gray-400">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="w-5 h-5">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-      </svg>
-    </span>
-  </div>
-  <div class="flex justify-center items-center h-52">
-    <div class="relative dark:hidden h-5/6 {thumnailSize ? thumnailSize : 'w-56'}">
-      <span style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;">
-        <img alt={name} src="/images/{dir}{path}.svg" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;" sizes="100vw" srcset="/images/{dir}{path}.svg 640w, /images/{dir}{path}.svg 750w, /images/{dir}{path}.svg 828w, /images/{dir}{path}.svg 1080w, /images/{dir}{path}.svg 1200w, /images/{dir}{path}.svg 1920w, /images/{dir}{path}.svg 2048w, /images/{dir}{path}.svg 3840w" />
-        <noscript />
-      </span>
-    </div>
-    <div class="hidden relative dark:block h-5/6 {thumnailSize ? thumnailSize : 'w-56'}">
-      <span style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;">
-        <img alt={name} src="/images/{dir}{path}-dark.svg" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;" />
-        <noscript />
-      </span>
-    </div>
-  </div>
-</Card>

package/src/routes/utils/CompoDescription.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  export let pClass: string = 'text-lg text-gray-600 dark:text-gray-400';
-</script>
-
-<p class={pClass}>
-  <slot />
-</p>

package/src/routes/utils/CopyCliboardInput.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  import Input from '$lib/forms/Input.svelte';
-  import Tooltip from '$lib/tooltips/Tooltip.svelte';
-  import Check from './icons/Check.svelte';
-  import Clipboard from './icons/Clipboard.svelte';
-
-  const show = ({ detail }: { detail: boolean }) => detail || set_tooltip(false);
-  const text_copied = 'Copied!';
-  const text_not_copied = 'Copy to clipboard';
-
-  let placeholder: string = 'pnpm i flowbite-svelte';
-  let tooltip_text: string = text_not_copied;
-  let open: boolean | undefined = undefined;
-
-  function set_tooltip(copied: boolean) {
-    tooltip_text = copied ? text_copied : text_not_copied;
-    open = copied || undefined;
-  }
-
-  const copyToClipboard = async (e: MouseEvent) => {
-    if (tooltip_text === text_copied) return;
-
-    const REG_HEX = /&#x([a-fA-F0-9]+);/g;
-    const decodedText = placeholder.replace(REG_HEX, function (_match, group1) {
-      const num = parseInt(group1, 16);
-      return String.fromCharCode(num);
-    });
-
-    open = false; // must be before `await`
-    await window.navigator.clipboard.writeText(decodedText);
-
-    // (e?.target as HTMLButtonElement)?.blur();
-    set_tooltip(true);
-  };
-</script>
-
-<Input size="lg" {placeholder} readonly class="text-sm py-2.5 focus:ring-primary-600 focus:border-primary-600 md:min-w-[255px] {$$props.class ?? ''}">
-  <div slot="right" class="flex items-center pl-32">
-    <button on:click={copyToClipboard} class="hover:text-primary-700 py-2 px-1">
-      {#if tooltip_text == text_not_copied}<Clipboard />{:else}<Check />{/if}
-    </button>
-
-    <Tooltip bind:open on:show={show}>{tooltip_text}</Tooltip>
-  </div>
-</Input>

package/src/routes/utils/DocBadge.svelte

@@ -1,7 +0,0 @@
-<script>
-  import Badge from '$lib/badges/Badge.svelte';
-</script>
-
-<Badge color="none" {...$$props} class="bg-primary-100 text-primary-700 dark:bg-gray-700 dark:text-primary-700 border-primary-700 dark:border-primary-700 {$$props.class}">
-  <slot />
-</Badge>

package/src/routes/utils/DocBadgeList.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import DocBadge from './DocBadge.svelte';
-  export let items: string[] = [];
-</script>
-
-<div class="flex flex-wrap gap-2">
-  {#each items as item}
-    <DocBadge large>{item}</DocBadge>
-  {/each}
-</div>

package/src/routes/utils/ExampleDarkMode.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  export let dark: boolean;
-</script>
-
-<button on:click type="button" class="flex items-center p-2 mr-2 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-lg toggle-dark-state-example hover:bg-gray-100 hover:text-primary-700 dark:hover:text-primary-600 focus:z-10 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500 dark:bg-gray-800 focus:outline-none dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
-  {#if dark}
-    <svg aria-hidden="true" data-toggle-icon="sun" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd" />
-    </svg>
-  {:else}
-    <svg aria-hidden="true" data-toggle-icon="moon" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-    </svg>
-  {/if}
-  <span class="sr-only">Toggle dark/light mode</span>
-</button>

package/src/routes/utils/ExampleWrapper.svelte

@@ -1,143 +0,0 @@
-<script lang="ts">
-  import { twJoin } from 'tailwind-merge';
-  import Button from '$lib/buttons/Button.svelte';
-  import ExampleDarkMode from './ExampleDarkMode.svelte';
-  import GitHub from './icons/GitHub.svelte';
-  import Tooltip from '$lib/tooltips/Tooltip.svelte';
-  import { page } from '$app/stores';
-  import type { PageData } from '../$types';
-  import { identity } from 'svelte/internal';
-  export let divClass = 'w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-2 sm:p-6';
-
-  // the source of the example, if you want it
-  export let src: any = undefined;
-
-  // all meta tags of the code block
-  export let meta: any = undefined;
-
-  let browserSupport: boolean = false;
-  let code: HTMLElement;
-
-  let data: PageData = $page.data;
-
-  // https://github.com/themesberg/flowbite-svelte/blob/main/src/routes/docs/components/accordion.md#always-open
-  const gitHub = new URL('https://github.com/themesberg/flowbite-svelte/blob/main/src/routes/');
-
-  let path: URL;
-
-  // suppress vite-plugin-svelte warning about unused props
-  $: src, meta;
-
-  let showExpandButton: boolean = false;
-  let expand: boolean = false;
-  let dark: boolean = false;
-
-  function init(node: HTMLElement) {
-    browserSupport = !!window?.navigator?.clipboard;
-  }
-
-  let node: HTMLElement;
-  $: {
-    if (node) {
-      // find closes previous section anchor
-      const section = [...document.querySelectorAll('#mainContent > :where(h2, h3) > [id]')]
-        .map((x: Element) => ({ id: x.id, top: x.parentElement?.offsetTop ?? Infinity }))
-        .filter((x) => x.top < node.offsetTop)
-        .slice(-1)
-        .shift();
-
-      if (section) {
-        const pathname = new URL(node.baseURI).pathname;
-        path = new URL(pathname.slice(1) + '.md', gitHub);
-        path.hash = section.id.replaceAll('_', '-').replaceAll('/', '').toLowerCase();
-      }
-    }
-  }
-
-  const copyToClipboard = async (e: MouseEvent) => {
-    const REG_HEX = /&#x([a-fA-F0-9]+);/g;
-    const decodedText = code.innerText.replace(REG_HEX, function (_match, group1) {
-      const num = parseInt(group1, 16);
-      return String.fromCharCode(num);
-    });
-
-    await window.navigator.clipboard.writeText(decodedText);
-
-    const button: HTMLButtonElement | null = e?.target as HTMLButtonElement;
-    button?.blur();
-
-    const lastChild = button?.lastChild;
-    if (lastChild) {
-      lastChild.textContent = 'Copied';
-      setTimeout(() => (lastChild.textContent = 'Copy'), 3000);
-    }
-  };
-
-  function checkOverflow(el: HTMLElement) {
-    const isOverflowingY = el.clientHeight < el.scrollHeight;
-    showExpandButton = isOverflowingY;
-    el.firstElementChild?.classList.add('-mb-8');
-  }
-
-  let copy_text = 'Copy';
-</script>
-
-<div class="mt-8 code-example" bind:this={node} use:init>
-  {#if !meta.hideOutput}
-    <div class="w-full p-4 border border-gray-200 bg-gray-50 rounded-t-xl dark:border-gray-600 dark:bg-gray-700">
-      <div class="grid grid-cols-2">
-        {#if path}
-          <Button size="xs" color="alternative" class="dark:!bg-gray-900 w-fit hover:text-primary-600 gap-2" href={'' + path} target="_blank" rel="noreferrer">
-            <GitHub size="sm" />Edit on GitHub
-          </Button>
-          <div class="ml-auto">
-            <ExampleDarkMode on:click={() => (dark = !dark)} {dark} />
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    <div class="code-preview-wrapper">
-      <div class="flex p-0 bg-white border-gray-200 bg-gradient-to-r code-preview dark:bg-gray-900 border-x dark:border-gray-600" class:dark>
-        <div class="w-full code-responsive-wrapper">
-          <div class={twJoin(divClass, meta.class)}>
-            <slot name="example" />
-          </div>
-        </div>
-      </div>
-    </div>
-  {/if}
-
-  <div class="code-syntax-wrapper">
-    <div class="relative border-gray-200 border-y border-x code-syntax dark:border-gray-600">
-      <div class="grid w-full grid-cols-2 border-b border-gray-200 bg-gray-50 rounded-t-md dark:bg-gray-700 dark:border-gray-600">
-        <ul class="flex text-sm font-medium text-center text-gray-500 dark:text-gray-400">
-          <li>
-            <span class="inline-block w-full p-2 px-3 text-gray-800 bg-gray-100 border-r border-gray-200 dark:text-white dark:bg-gray-800 dark:border-gray-600"> Svelte </span>
-          </li>
-        </ul>
-        <div class="flex justify-end">
-          {#if browserSupport}
-            <button on:click={(e) => copyToClipboard(e)} type="button" class="flex items-center px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 border-l border-gray-200 dark:border-gray-600 dark:text-gray-400 dark:bg-gray-800 hover:text-primary-700 dark:hover:text-white copy-to-clipboard-button">
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-              </svg>
-              {copy_text}
-            </button>
-            <Tooltip placement="bottom-end">Copy to clipboard.</Tooltip>
-          {/if}
-        </div>
-      </div>
-      <div class="relative">
-        <div class="overflow-hidden" class:max-h-72={!expand} tabindex="-1" use:checkOverflow>
-          <div class="highlight">
-            <pre bind:this={code} class="language-svelte !-mt-2 !rounded-none"><slot name="code" /></pre>
-          </div>
-        </div>
-        {#if showExpandButton && !expand}
-          <button on:click={() => (expand = !expand)} data-expand-code="" type="button" class="absolute bottom-0 left-0 py-2.5 px-5 w-full text-sm font-medium text-gray-900 bg-gray-100 border-t border-gray-200 hover:bg-gray-100 hover:text-primary-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"> Expand code </button>
-        {/if}
-      </div>
-    </div>
-  </div>
-</div>

package/src/routes/utils/Footer.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  import Footer from '$lib/footer/Footer.svelte';
-  import FooterBrand from '$lib/footer/FooterBrand.svelte';
-  import FooterCopyright from '$lib/footer/FooterCopyright.svelte';
-  import FooterIcon from '$lib/footer/FooterIcon.svelte';
-  import FooterLink from '$lib/footer/FooterLink.svelte';
-  import FooterLinkGroup from '$lib/footer/FooterLinkGroup.svelte';
-  let logo = '/images/flowbite-svelte-icon-logo.svg';
-
-  let isHomePage: boolean;
-  $: isHomePage = $page.route.id === '/';
-
-  const footer_links = {
-    Resources: {
-      GitHub: 'https://github.com/themesberg/flowbite-svelte',
-      Flowbite: 'https://flowbite.com/',
-      'Tailwind CSS': 'https://tailwindcss.com/',
-      'Figma Design': 'https://flowbite.com/figma/'
-    },
-    'Help and Support': {
-      'Discord Community': 'https://discord.gg/4eeurUVvTy',
-      'GitHub Discussions': 'https://github.com/themesberg/flowbite-svelte/discussions'
-    },
-    Legal: {
-      License: 'https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE',
-      'Brand usage': 'https://flowbite.com/brand/'
-    }
-  };
-</script>
-
-<Footer footerType="custom" customClass="bg-white dark:bg-gray-900">
-  <div class="flex flex-col py-6 lg:py-12 mx-auto max-w-8xl">
-    <div class="flex flex-col lg:flex-row items-start md:justify-between gap-8 {isHomePage ? 'px-4 lg:px-20' : ''}">
-      <div class="w-full max-w-sm">
-        <FooterBrand href="https://flowbite-svelte.com" src={logo} alt="Flowbite Svelte Logo" name="Flowbite Svelte" class="text-gray-900 dark:text-white" />
-        <p class="max-w-sm mb-3 text-gray-600 dark:text-gray-400 mt-4">Flowbite Svelte is an open-source UI component library built with Svelte components and Tailwind CSS that can help you build websites faster.</p>
-        <p class="max-w-sm mb-3 text-gray-600 dark:text-gray-400">
-          Code licensed
-          <a href="https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE" class="text-primary-600 hover:underline"> MIT </a>
-          , docs
-          <a href="https://creativecommons.org/licenses/by/3.0/" class="text-primary-600 hover:underline"> CC BY 3.0 </a>
-          .
-        </p>
-      </div>
-      <div class="flex flex-col md:flex-row items-start {isHomePage ? 'gap-4 md:gap-16 lg:justify-end' : 'gap-8'}  w-full">
-        {#each Object.entries(footer_links) as [column, links]}
-          <div>
-            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{column}</h2>
-            <FooterLinkGroup>
-              {#each Object.entries(links) as [name, href]}
-                <FooterLink liClass="mb-4" {href}>{name}</FooterLink>
-              {/each}
-            </FooterLinkGroup>
-          </div>
-        {/each}
-      </div>
-    </div>
-    <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-    <div class="flex items-center justify-center px-4 text-center">
-      <FooterCopyright href="/" by="Flowbite™" copyrightMessage="is a registered trademark. All Rights Reserved." />
-    </div>
-  </div>
-</Footer>

package/src/routes/utils/GitHubSource.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  export let pClass = 'text-gray-700 dark:text-white mb-1';
-  export let href = '';
-</script>
-
-<p class={pClass}>
-  <svg class="w-5 h-5 inline" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
-  </svg>
-  <a href="https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/{href}" target="_blank" rel="noreferrer" class="hover:underline hover:text-primary-500">
-    <slot />: View Source Code
-  </a>
-</p>

package/src/routes/utils/GitHubSourceList.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  export let pClass = 'text-gray-500 dark:text-gray-400 mb-1';
-  export let libFiles = {};
-  const paths = Object.keys(libFiles);
-
-  export let dClass = 'rounded-xl w-full my-4 mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-2 sm:p-6';
-</script>
-
-<div class={dClass}>
-  {#each paths as path}
-    <p class={pClass}>
-      <svg class="w-5 h-5 inline" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
-      </svg>
-      <a href="https://github.com/themesberg/flowbite-svelte/blob/main/src/lib{((rootDir) => path.split(rootDir)[1])(path.split('/').slice(0, -2).join('/'))}" target="_blank" rel="noreferrer" class="hover:underline hover:text-primary-500">
-        <slot />
-        {path.split('/').pop()?.split('.').shift()}: View Source Code
-      </a>
-    </p>
-  {/each}
-</div>

package/src/routes/utils/MetaTag.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import { MetaTags } from 'svelte-meta-tags';
-  export let breadcrumb_title: string = '';
-  export let description: string = '';
-  export let title: string = '';
-  // title = title.replaceAll(' ', '-');
-  let imgsrc = `https://open-graph-vercel.vercel.app/api/flowbite-svelte?title=${encodeURIComponent(breadcrumb_title)}`;
-  export let dir: string = '';
-  let dirstring = dir.toLowerCase();
-  let breadcrumb = breadcrumb_title.toLowerCase().replaceAll(' ', '-');
-</script>
-
-<MetaTags
-  title={breadcrumb_title}
-  titleTemplate="%s - Flowbite"
-  {description}
-  facebook={{
-    appId: '453670756870545'
-  }}
-  openGraph={{
-    type: 'website',
-    url: `https://flowbite-svelte.com/${dirstring}/${breadcrumb}`,
-    title: `${title}`,
-    description: `${description}`,
-    images: [
-      {
-        url: imgsrc,
-        width: 1200,
-        height: 630,
-        alt: `${title}`
-      }
-    ],
-    site_name: 'Flowbite Svelte'
-  }}
-  twitter={{
-    handle: '@shinokada',
-    cardType: 'summary_large_image',
-    title: `${title}`,
-    description: `${description}`,
-    image: imgsrc,
-    imageAlt: `${title}`
-  }} />

package/src/routes/utils/Newsletter.svelte

@@ -1,52 +0,0 @@
-<script>
-  import { browser } from '$app/environment';
-  import ButtonGroup from '$lib/buttongroups/ButtonGroup.svelte';
-  import Button from '$lib/buttons/Button.svelte';
-  import Input from '$lib/forms/Input.svelte';
-  import Mail from '../utils/icons/Mail.svelte';
-  import data from './data.json';
-</script>
-
-<aside class="flex flex-col justify-center items-start p-4 sm:p-8 mb-8 gap-4 border shadow-lg rounded-lg dark:bg-gray-800 dark:border-gray-700">
-  <div class="flex flex-col items-center gap-5">
-    <div class="flex flex-col items-start gap-4">
-      <h4 class="tracking-tight leading-none text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Get more updates</h4>
-      <p class="max-w-2xl">Stay up to date with the roadmap progress, announcements and exclusive discounts feel free to sign up with your email.</p>
-    </div>
-    <div class="flex flex-col items-start justify-center self-stretch">
-      <!-- ConvertKit form -->
-      {#if browser}
-        <script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
-      {/if}
-      <form action="https://app.convertkit.com/forms/4692392/subscriptions" class="seva-form formkit-form self-stretch" method="post" data-sv-form="4692392" data-uid="344e3b5c48" data-format="inline" data-version="5" data-options={JSON.stringify(data)}>
-        <div data-style="clean" class="flex items-end mb-3">
-          <ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert" />
-          <div data-element="fields" data-stacked="false" class="flex items-center w-full max-w-md seva-fields formkit-fields">
-            <label for="member_email" class="sr-only">Email address</label>
-            <div class="relative formkit-field">
-              <Mail class="absolute top-1/2 -translate-y-1/2 left-4" />
-            </div>
-            <ButtonGroup>
-              <Input size="lg" id="member_email" class="formkit-input text-gray-900 pl-12 sm:!w-96 focus:ring-primary-600 focus:border-primary-600" name="email_address" aria-label="Email Address" placeholder="Your email address..." required type="email" />
-              <Button type="submit" color="primary" size="xl" class="self-stretch formkit-submit" data-element="submit">
-                <div class="formkit-spinner">
-                  <div />
-                  <div />
-                  <div />
-                </div>
-                Subscribe
-              </Button>
-            </ButtonGroup>
-          </div>
-        </div>
-      </form>
-      <!-- ConvertKit form end -->
-      <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
-        By subscribing, you agree with ConvertKit's <a rel="nofollow" href="https://convertkit.com/terms" class="text-primary-700 hover:underline dark:text-primary-600"> Terms of Service </a>
-        and
-        <a rel="nofollow" class="text-primary-700 hover:underline dark:text-primary-600" href="https://convertkit.com/privacy"> Privacy Policy </a>
-        .
-      </div>
-    </div>
-  </div>
-</aside>

package/src/routes/utils/PageHeadSection.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { Heading } from '$lib';
-  import CompoDescription from './CompoDescription.svelte';
-
-  export let dir: string;
-  export let breadcrumb_title: string;
-  export let title: string;
-  export let description: string;
-
-  dir;
-  breadcrumb_title;
-</script>
-
-<div class="pb-8">
-  <Heading class="inline-block mb-2 font-extrabold tracking-tight text-gray-900 dark:text-white" tag="h1" customSize="text-3xl">
-    {title}
-  </Heading>
-
-  <CompoDescription>{description}</CompoDescription>
-</div>

package/src/routes/utils/Paging.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  import PaginationItem from '$lib/paginations/PaginationItem.svelte';
-  import { identity } from 'svelte/internal';
-  import ArrowLeft from './icons/ArrowLeft.svelte';
-  import ArrowRight from './icons/ArrowRight.svelte';
-
-  const {
-    data,
-    url,
-    params: { slug }
-  } = $page;
-
-  const components = Object.values(data.posts)
-    .flatMap(identity)
-    // .filter((x) => x.meta.dir === data.dir)
-    .filter((x) => x.meta && x.meta.dir === data.dir)
-    .map(({ path, meta }) => ({ path, name: meta.component_title }));
-
-  const index = components.findIndex((x) => x.path === '/' + slug);
-
-  function sibling(next: boolean) {
-    const i = next ? index + 1 : index - 1,
-      { path, name } = components[i],
-      href = '' + new URL(path.slice(1), url);
-
-    return { href, name };
-  }
-</script>
-
-<div class="flex flex-col items-start gap-4 py-4">
-  {#if index >= 0}
-    <div class="flex flex-row justify-between gap-2.5 self-stretch">
-      {#if index > 0}
-        {@const { name, href } = sibling(false)}
-        <PaginationItem {href} class="flex items-center gap-2.5  hover:text-primary-700  dark:hover:text-primary-700">
-          <ArrowLeft />
-          {name}
-        </PaginationItem>
-      {:else}
-        <div />
-      {/if}
-      <div class="hidden sm:block">
-        <slot />
-      </div>
-      {#if index < components.length - 1}
-        {@const { name, href } = sibling(true)}
-        <PaginationItem {href} class="flex items-center gap-2.5 hover:text-primary-700 dark: dark:hover:text-primary-700">
-          {name}
-          <ArrowRight />
-        </PaginationItem>
-      {:else}
-        <div />
-      {/if}
-    </div>
-  {/if}
-  <div class="sm:hidden">
-    <slot />
-  </div>
-</div>