@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -1,157 +1,166 @@
-<script>
-  import { ShareOutline, CheckOutline } from '../../primitives/Icons';
-  import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
-  import { typography } from '../../tokens/typography';
-
-  let {
-    event = {},
-    showtimes = [],
-    showTitle = true,
-    formatDateTime = (dateStr) => {
-      if (!dateStr) return '';
-      const date = new Date(dateStr);
-      if (isNaN(date.getTime())) return dateStr;
-      return date.toLocaleDateString('en-US', {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit'
-      });
-    },
-    formatTimeline = (timeStr) => {
-      if (!timeStr) return '';
-      const date = new Date(timeStr);
-      if (!isNaN(date.getTime())) {
-        return date.toLocaleTimeString('en-US', {
-          hour: 'numeric',
-          minute: '2-digit',
-          hour12: true
-        });
-      }
-      return timeStr;
-    },
-    onShowtimeSelect,
-  } = $props();
-
-  let selectedDate = $state(null);
-  let shareSuccess = $state(false);
-
-  function handleSelect(e) {
-    selectedDate = e.date;
-    onShowtimeSelect?.({ date: e.date, ...e });
-  }
-
-  async function handleShare() {
-    const shareData = {
-      title: event.name,
-      text: `Check out ${event.name} at ${event.venue?.name || 'this venue'}!`,
-      url: typeof window !== 'undefined' ? window.location.href : ''
-    };
-
-    try {
-      if (typeof navigator !== 'undefined' && navigator.share && navigator.canShare && navigator.canShare(shareData)) {
-        await navigator.share(shareData);
-      } else if (typeof navigator !== 'undefined' && navigator.clipboard) {
-        await navigator.clipboard.writeText(shareData.url);
-        shareSuccess = true;
-        setTimeout(() => {
-          shareSuccess = false;
-        }, 2000);
-      }
-    } catch (err) {
-      if (err.name !== 'AbortError' && typeof navigator !== 'undefined' && navigator.clipboard) {
-        try {
-          await navigator.clipboard.writeText(shareData.url);
-          shareSuccess = true;
-          setTimeout(() => {
-            shareSuccess = false;
-          }, 2000);
-        } catch {
-          console.error('Share failed:', err);
-        }
-      }
-    }
-  }
-</script>
-
-<div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-gray-200 md:dark:border-gray-700 bg-white dark:bg-gray-800">
-  {#if showTitle}
-    <div class="flex justify-between items-start gap-2 mb-4">
-      <h2 class="{typography.h2} flex-1 text-left">
-        {event.name || ''}
-      </h2>
-      <button
-        class="shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
-        aria-label="Share event"
-        onclick={handleShare}
-      >
-        {#if shareSuccess}
-          <CheckOutline class="w-5 h-5 text-green-600 dark:text-green-500" />
-        {:else}
-          <ShareOutline class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer" />
-        {/if}
-      </button>
-    </div>
-  {/if}
-
-  <div class="space-y-1">
-    <p class="{typography.label}">{formatDateTime(event.startDateTime)}</p>
-    {#if event.displayStartTime && event.doorsOpenTime}
-      <p class="{typography.smMuted}">Doors open {formatTimeline(event.doorsOpenTime)}</p>
-    {/if}
-    {#if event.displayEndTime && event.endDateTime}
-      <p class="{typography.smMuted}">Ends {formatTimeline(event.endDateTime)}</p>
-    {/if}
-  </div>
-
-  {#if showtimes && showtimes.length > 1}
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-      <p class="{typography.smMuted} mb-2">More showtimes</p>
-      <div class="flex flex-wrap gap-2">
-        {#each showtimes as showtime}
-          <div class="w-24">
-            <ShowTimeCard
-              day={showtime.day}
-              date={showtime.date}
-              time={showtime.time}
-              isSelected={selectedDate === showtime.date}
-              onselect={handleSelect}
-            />
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-
-  {#if event.venue}
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-      <a
-        href="https://www.google.com/maps/search/?api=1&query={encodeURIComponent(event.venue.googleLocationNameCache || event.venue.address || event.venue.name)}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group block"
-      >
-        <p class="{typography.label} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
-          {event.venue.name}
-        </p>
-        <p class="{typography.smMuted} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
-          {event.venue.address || ''}
-        </p>
-      </a>
-
-      {#if event.hasAgeRestriction || event.ageRequirement || event.minimumAge}
-        <p class="{typography.smMuted} mt-2">
-          {#if event.ageRequirement != null}
-            {event.ageRequirement <= 1 ? 'All ages' : `${event.ageRequirement}+`}
-          {:else if event.minimumAge != null}
-            {event.minimumAge <= 1 ? 'All ages' : `${event.minimumAge}+`}
-          {:else if event.ageRestriction != null}
-            {event.ageRestriction <= 1 ? 'All ages' : `${event.ageRestriction}+`}
-          {/if}
-        </p>
-      {/if}
-    </div>
-  {/if}
-</div>
+<script>
+  import { ShareOutline, CheckOutline } from '../../primitives/Icons';
+  import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
+  import { typography } from '../../tokens/typography';
+  import { formatEventDateTime, formatEventTime } from '../../datetime/format';
+
+  let {
+    event = {},
+    showtimes = [],
+    showTitle = true,
+    formatDateTime = (dateStr) => {
+      if (!dateStr) return '';
+      // Use timezone-aware formatting if event has timeZone
+      if (event.timeZone) {
+        return formatEventDateTime(dateStr, event.timeZone);
+      }
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return dateStr;
+      return date.toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      });
+    },
+    formatTimeline = (timeStr) => {
+      if (!timeStr) return '';
+      // Use timezone-aware formatting if event has timeZone
+      if (event.timeZone) {
+        return formatEventTime(timeStr, event.timeZone);
+      }
+      const date = new Date(timeStr);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleTimeString('en-US', {
+          hour: 'numeric',
+          minute: '2-digit',
+          hour12: true
+        });
+      }
+      return timeStr;
+    },
+    onShowtimeSelect,
+  } = $props();
+
+  let selectedDate = $state(null);
+  let shareSuccess = $state(false);
+
+  function handleSelect(e) {
+    selectedDate = e.date;
+    onShowtimeSelect?.({ date: e.date, ...e });
+  }
+
+  async function handleShare() {
+    const shareData = {
+      title: event.name,
+      text: `Check out ${event.name} at ${event.venue?.name || 'this venue'}!`,
+      url: typeof window !== 'undefined' ? window.location.href : ''
+    };
+
+    try {
+      if (typeof navigator !== 'undefined' && navigator.share && navigator.canShare && navigator.canShare(shareData)) {
+        await navigator.share(shareData);
+      } else if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        await navigator.clipboard.writeText(shareData.url);
+        shareSuccess = true;
+        setTimeout(() => {
+          shareSuccess = false;
+        }, 2000);
+      }
+    } catch (err) {
+      if (err.name !== 'AbortError' && typeof navigator !== 'undefined' && navigator.clipboard) {
+        try {
+          await navigator.clipboard.writeText(shareData.url);
+          shareSuccess = true;
+          setTimeout(() => {
+            shareSuccess = false;
+          }, 2000);
+        } catch {
+          // Silently fail — both share and clipboard copy failed
+        }
+      }
+    }
+  }
+</script>
+
+<div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-gray-200 md:dark:border-gray-700 bg-white dark:bg-gray-800">
+  {#if showTitle}
+    <div class="flex justify-between items-start gap-2 mb-4">
+      <h2 class="{typography.h2} flex-1 text-left">
+        {event.name || ''}
+      </h2>
+      <button
+        class="shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
+        aria-label="Share event"
+        onclick={handleShare}
+      >
+        {#if shareSuccess}
+          <CheckOutline class="w-5 h-5 text-green-600 dark:text-green-500" />
+        {:else}
+          <ShareOutline class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer" />
+        {/if}
+      </button>
+    </div>
+  {/if}
+
+  <div class="space-y-1">
+    <p class="{typography.label}">{formatDateTime(event.startDateTime)}</p>
+    {#if event.displayStartTime && event.doorsOpenTime}
+      <p class="{typography.smMuted}">Doors open {formatTimeline(event.doorsOpenTime)}</p>
+    {/if}
+    {#if event.displayEndTime && event.endDateTime}
+      <p class="{typography.smMuted}">Ends {formatTimeline(event.endDateTime)}</p>
+    {/if}
+  </div>
+
+  {#if showtimes && showtimes.length > 1}
+    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+      <p class="{typography.smMuted} mb-2">More showtimes</p>
+      <div class="flex flex-wrap gap-2">
+        {#each showtimes as showtime}
+          <div class="w-24">
+            <ShowTimeCard
+              day={showtime.day}
+              date={showtime.date}
+              time={showtime.time}
+              isSelected={selectedDate === showtime.date}
+              onselect={handleSelect}
+            />
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  {#if event.venue}
+    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+      <a
+        href="https://www.google.com/maps/search/?api=1&query={encodeURIComponent(event.venue.googleLocationNameCache || event.venue.address || event.venue.name)}"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group block"
+      >
+        <p class="{typography.label} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
+          {event.venue.name}
+        </p>
+        <p class="{typography.smMuted} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
+          {event.venue.address || ''}
+        </p>
+      </a>
+
+      {#if event.hasAgeRestriction || event.ageRequirement || event.minimumAge}
+        <p class="{typography.smMuted} mt-2">
+          {#if event.ageRequirement != null}
+            {event.ageRequirement <= 1 ? 'All ages' : `${event.ageRequirement}+`}
+          {:else if event.minimumAge != null}
+            {event.minimumAge <= 1 ? 'All ages' : `${event.minimumAge}+`}
+          {:else if event.ageRestriction != null}
+            {event.ageRestriction <= 1 ? 'All ages' : `${event.ageRestriction}+`}
+          {/if}
+        </p>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/calendar/ShowCard/ShowCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;AAwJA;YA5I6B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAAc,GAAG,EAAE;gBAAc,OAAO;;;sBAA0E,GAAG;WA4I9G;wBA5IpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,cAAc,CAAC,WAAW;IAAC,gBAAgB,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;AAkKA;YApJ6B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAAc,GAAG,EAAE;gBAAc,OAAO;;;sBAA0E,GAAG;WAoJ9G;wBApJpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,cAAc,CAAC,WAAW;IAAC,gBAAgB,EAAE,GAAG,CAAA;CAAE"}

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte

@@ -1,61 +1,72 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    day = '',
-    date = '',
-    time = '',
-    isSelected = false,
-    onselect,
-  } = $props();
-
-  function handleCardClick() {
-    onselect?.({ date });
-  }
-
-  function handleKeydown(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleCardClick();
-    }
-  }
-
-  function formatHour(timeStr) {
-    if (!timeStr) return '';
-    const d = new Date(`1970-01-01T${timeStr}`);
-    if (isNaN(d.getTime())) return timeStr;
-    return d.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-  }
-
-  function formatDate(dateStr) {
-    if (!dateStr) return '';
-    const d = new Date(dateStr);
-    if (isNaN(d.getTime())) return dateStr;
-    return d.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-    });
-  }
-</script>
-
-<div
-  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-white dark:bg-gray-800 {isSelected
-    ? 'border-blue-700 dark:border-blue-500'
-    : 'border-gray-200 dark:border-gray-700 hover:border-blue-700 dark:hover:border-blue-500'}"
-  onclick={handleCardClick}
-  onkeydown={handleKeydown}
-  tabindex="0"
-  role="button"
-  aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}
-  aria-pressed={isSelected}
->
-  <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
-  <span class="{typography.label} text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : ''}">
-    {formatDate(date)}
-  </span>
-  <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>
-</div>
+<script>
+  import { typography } from '../../tokens/typography';
+  import { formatEventTime, formatEventDate } from '../../datetime/format';
+
+  let {
+    day = '',
+    date = '',
+    time = '',
+    timezone = '',
+    isSelected = false,
+    onselect,
+  } = $props();
+
+  function handleCardClick() {
+    onselect?.({ date });
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleCardClick();
+    }
+  }
+
+  function formatHour(timeStr) {
+    if (!timeStr) return '';
+    // If we have an ISO string and timezone, use timezone-aware formatting
+    if (timezone && timeStr.includes('T')) {
+      return formatEventTime(timeStr, timezone);
+    }
+    // Fallback for HH:mm time strings
+    const d = new Date(`1970-01-01T${timeStr}`);
+    if (isNaN(d.getTime())) return timeStr;
+    return d.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true
+    });
+  }
+
+  function formatDate(dateStr) {
+    if (!dateStr) return '';
+    // If we have timezone, use timezone-aware formatting
+    if (timezone) {
+      return formatEventDate(dateStr, timezone, { includeYear: false });
+    }
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return dateStr;
+    return d.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    });
+  }
+</script>
+
+<div
+  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-white dark:bg-gray-800 {isSelected
+    ? 'border-blue-700 dark:border-blue-500'
+    : 'border-gray-200 dark:border-gray-700 hover:border-blue-700 dark:hover:border-blue-500'}"
+  onclick={handleCardClick}
+  onkeydown={handleKeydown}
+  tabindex="0"
+  role="button"
+  aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}
+  aria-pressed={isSelected}
+>
+  <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
+  <span class="{typography.label} text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : ''}">
+    {formatDate(date)}
+  </span>
+  <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>
+</div>

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte.d.ts

@@ -7,6 +7,7 @@ declare const ShowTimeCard: import("svelte").Component<{
     day?: string;
     date?: string;
     time?: string;
+    timezone?: string;
     isSelected?: boolean;
     onselect: any;
 }, {}, "">;
@@ -14,6 +15,7 @@ type $$ComponentProps = {
     day?: string;
     date?: string;
     time?: string;
+    timezone?: string;
     isSelected?: boolean;
     onselect: any;
 };

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowTimeCard/ShowTimeCard.svelte.js"],"names":[],"mappings":";;;;;AA6DA;UArD2B,MAAM;WAAS,MAAM;WAAS,MAAM;iBAAe,OAAO;cAAY,GAAG;WAqDzC;wBArDxC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowTimeCard/ShowTimeCard.svelte.js"],"names":[],"mappings":";;;;;AAyEA;UA/D2B,MAAM;WAAS,MAAM;WAAS,MAAM;eAAa,MAAM;iBAAe,OAAO;cAAY,GAAG;WA+D5D;wBA/DxC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/components/Heading.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
-    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
-    class?: string;
-    id?: string;
-    children: Snippet;
-  }
-
-  let {
-    level = 2,
-    size = 'lg',
-    weight,
-    class: className = '',
-    id,
-    children,
-  }: Props = $props();
-
-  const sizeClasses: Record<string, string> = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    md: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-    '5xl': 'text-5xl',
-  };
-
-  const weightClasses: Record<string, string> = {
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-  };
-
-  const baseClasses = 'text-gray-900 dark:text-white';
-  let sizeClass = $derived(sizeClasses[size] || 'text-lg');
-  let weightClass = $derived(weight ? weightClasses[weight] : '');
-  let classes = $derived(`${baseClasses} ${sizeClass} ${weightClass} ${className}`.trim());
-</script>
-
-{#if level === 1}
-  <h1 {id} class={classes}>{@render children()}</h1>
-{:else if level === 2}
-  <h2 {id} class={classes}>{@render children()}</h2>
-{:else if level === 3}
-  <h3 {id} class={classes}>{@render children()}</h3>
-{:else if level === 4}
-  <h4 {id} class={classes}>{@render children()}</h4>
-{:else if level === 5}
-  <h5 {id} class={classes}>{@render children()}</h5>
-{:else}
-  <h6 {id} class={classes}>{@render children()}</h6>
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    class?: string;
+    id?: string;
+    children: Snippet;
+  }
+
+  let {
+    level = 2,
+    size = 'lg',
+    weight,
+    class: className = '',
+    id,
+    children,
+  }: Props = $props();
+
+  const sizeClasses: Record<string, string> = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+  };
+
+  const weightClasses: Record<string, string> = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  };
+
+  const baseClasses = 'text-gray-900 dark:text-white';
+  let sizeClass = $derived(sizeClasses[size] || 'text-lg');
+  let weightClass = $derived(weight ? weightClasses[weight] : '');
+  let classes = $derived(`${baseClasses} ${sizeClass} ${weightClass} ${className}`.trim());
+</script>
+
+{#if level === 1}
+  <h1 {id} class={classes}>{@render children()}</h1>
+{:else if level === 2}
+  <h2 {id} class={classes}>{@render children()}</h2>
+{:else if level === 3}
+  <h3 {id} class={classes}>{@render children()}</h3>
+{:else if level === 4}
+  <h4 {id} class={classes}>{@render children()}</h4>
+{:else if level === 5}
+  <h5 {id} class={classes}>{@render children()}</h5>
+{:else}
+  <h6 {id} class={classes}>{@render children()}</h6>
+{/if}