flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/timeline/Timeline.svelte.d.ts

@@ -1,24 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLOlAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLOlAttributes & {
-        order?: "default" | "vertical" | "horizontal" | "activity" | "group";
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type TimelineProps = typeof __propDef.props;
+type TimelineProps_ = typeof __propDef.props;
+export { TimelineProps_ as TimelineProps };
 export type TimelineEvents = typeof __propDef.events;
 export type TimelineSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let order: NonNullable<$$Props['order']> = 'default';
+ * @props: children: any;
+ * @props:order: any = "default";
+ * @props:class: string;
  */
-export default class Timeline extends SvelteComponentTyped<TimelineProps, TimelineEvents, TimelineSlots> {
+export default class Timeline extends SvelteComponentTyped<TimelineProps_, TimelineEvents, TimelineSlots> {
 }
-export {};

package/dist/timeline/TimelineItem.svelte

@@ -1,77 +1,88 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let title = "";
-export let date = "";
-export let svgClass = "w-3 h-3 text-primary-600 dark:text-primary-400";
-export let classDiv = "";
-export let classLi = "";
-export let classTime = "";
-export let classH3 = "";
-let order = "default";
-order = getContext("order");
-const liClasses = {
-  default: "mb-10 ms-4",
-  vertical: "mb-10 ms-6",
-  horizontal: "relative mb-6 sm:mb-0",
-  activity: "mb-10 ms-6",
-  group: ""
-};
-const divClasses = {
-  default: "absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",
-  vertical: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
-  horizontal: "flex items-center",
-  activity: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
-  group: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700"
-};
-const timeClasses = {
-  default: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
-  vertical: "block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
-  horizontal: "block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
-  activity: "mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0",
-  group: "text-lg font-semibold text-gray-900 dark:text-white"
-};
-let liCls = twMerge(liClasses[order], classLi);
-let divCls = twMerge(divClasses[order], classDiv);
-let timeCls = twMerge(timeClasses[order], classTime);
-const h3Cls = twMerge(order === "vertical" ? "flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white" : "text-lg font-semibold text-gray-900 dark:text-white", classH3);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type TimelineItemProps as Props, timelineitem, type DateFormat } from ".";
+  import type { TimelineVariants } from "./theme";
+
+  let { children, orientationSlot, title, date, dateFormat = "month-year", svgClass, liClass, divClass, timeClass, h3Class, ...restProps }: Props = $props();
+
+  let order = getContext<TimelineVariants["order"]>("order");
+
+  const { li, div, time, h3, svg } = $derived(timelineitem({ order }));
+
+  function formatDisplayDate(dateStr: string, format: DateFormat) {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return dateStr;
+
+    switch (format) {
+      case "year":
+        return date.toLocaleDateString(undefined, {
+          year: "numeric"
+        });
+      case "month-year":
+        return date.toLocaleDateString(undefined, {
+          month: "long",
+          year: "numeric"
+        });
+      case "full-date":
+        return date.toLocaleDateString(undefined, {
+          day: "numeric",
+          month: "long",
+          year: "numeric"
+        });
+      default:
+        return date.toLocaleDateString(undefined, {
+          month: "long",
+          year: "numeric"
+        });
+    }
+  }
 </script>
 
-<li class={liCls}>
-  <div class={divCls}></div>
-  {#if order !== 'default'}
-    <slot name="icon">
-      <svg aria-hidden="true" class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
-      </svg>
-    </slot>
+<li {...restProps} class={li({ class: liClass })}>
+  {#if order !== "default"}
+    {#if orientationSlot && (order === "vertical" || order === "horizontal")}
+      {@render orientationSlot()}
+    {:else}
+      <div class={div({ class: divClass })}>
+        <svg aria-hidden="true" class={svg({ class: svgClass })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+        </svg>
+      </div>
+    {/if}
   {:else if date}
-    <time class={timeCls}>{date}</time>
+    <time datetime={date} class={time({ class: timeClass })}>
+      {formatDisplayDate(date, dateFormat)}
+    </time>
   {/if}
-
   {#if title}
-    <h3 class={h3Cls}>
+    <h3 class={h3({ class: h3Class })}>
       {title}
     </h3>
   {/if}
 
-  {#if order !== 'default'}
+  {#if order !== "default"}
     {#if date}
-      <time class={timeCls}>{date}</time>
+      <time datetime={date} class={time({ class: timeClass })}>
+        {formatDisplayDate(date, dateFormat)}
+      </time>
     {/if}
   {/if}
 
-  <slot></slot>
+  {@render children()}
 </li>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let title: $$Props['title'] = '';
-@prop export let date: $$Props['date'] = '';
-@prop export let svgClass: $$Props['svgClass'] = 'w-3 h-3 text-primary-600 dark:text-primary-400';
-@prop export let classDiv: $$Props['classDiv'] = '';
-@prop export let classLi: $$Props['classLi'] = '';
-@prop export let classTime: $$Props['classTime'] = '';
-@prop export let classH3: $$Props['classH3'] = '';
+@props: children: any;
+@props:orientationSlot: any;
+@props:title: any;
+@props:date: any;
+@props:dateFormat: any = "month-year";
+@props:svgClass: any;
+@props:liClass: any;
+@props:divClass: any;
+@props:timeClass: any;
+@props:h3Class: any;
 -->

package/dist/timeline/TimelineItem.svelte.d.ts

@@ -1,37 +1,28 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLLiAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLLiAttributes & {
-        title?: string;
-        date?: string;
-        svgClass?: string;
-        classLi?: string;
-        classDiv?: string;
-        classTime?: string;
-        classH3?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        icon: {};
-        default: {};
-    };
+    slots: {};
 };
-export type TimelineItemProps = typeof __propDef.props;
+type TimelineItemProps_ = typeof __propDef.props;
+export { TimelineItemProps_ as TimelineItemProps };
 export type TimelineItemEvents = typeof __propDef.events;
 export type TimelineItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let title: $$Props['title'] = '';
- * @prop export let date: $$Props['date'] = '';
- * @prop export let svgClass: $$Props['svgClass'] = 'w-3 h-3 text-primary-600 dark:text-primary-400';
- * @prop export let classDiv: $$Props['classDiv'] = '';
- * @prop export let classLi: $$Props['classLi'] = '';
- * @prop export let classTime: $$Props['classTime'] = '';
- * @prop export let classH3: $$Props['classH3'] = '';
+ * @props: children: any;
+ * @props:orientationSlot: any;
+ * @props:title: any;
+ * @props:date: any;
+ * @props:dateFormat: any = "month-year";
+ * @props:svgClass: any;
+ * @props:liClass: any;
+ * @props:divClass: any;
+ * @props:timeClass: any;
+ * @props:h3Class: any;
  */
-export default class TimelineItem extends SvelteComponentTyped<TimelineItemProps, TimelineItemEvents, TimelineItemSlots> {
+export default class TimelineItem extends SvelteComponentTyped<TimelineItemProps_, TimelineItemEvents, TimelineItemSlots> {
 }
-export {};

package/dist/timeline/index.d.ts

@@ -0,0 +1,9 @@
+import type { ActivityType, ActivityProps, ActivityItemProps, GroupTimelineType, GroupProps, GroupItemProps, TimelineProps, TimelineItemProps, DateFormat } from "./type";
+import Activity from "./Activity.svelte";
+import ActivityItem from "./ActivityItem.svelte";
+import Group from "./Group.svelte";
+import GroupItem from "./GroupItem.svelte";
+import Timeline from "./Timeline.svelte";
+import TimelineItem from "./TimelineItem.svelte";
+import { activity, activityitem, group, groupitem, timeline, timelineitem } from "./theme";
+export { Activity, ActivityItem, Group, GroupItem, Timeline, TimelineItem, activity, activityitem, group, groupitem, timeline, timelineitem, type ActivityType, type ActivityProps, type ActivityItemProps, type GroupTimelineType, type GroupProps, type GroupItemProps, type TimelineProps, type TimelineItemProps, type DateFormat };

package/dist/timeline/index.js

@@ -0,0 +1,8 @@
+import Activity from "./Activity.svelte";
+import ActivityItem from "./ActivityItem.svelte";
+import Group from "./Group.svelte";
+import GroupItem from "./GroupItem.svelte";
+import Timeline from "./Timeline.svelte";
+import TimelineItem from "./TimelineItem.svelte";
+import { activity, activityitem, group, groupitem, timeline, timelineitem } from "./theme";
+export { Activity, ActivityItem, Group, GroupItem, Timeline, TimelineItem, activity, activityitem, group, groupitem, timeline, timelineitem };

package/dist/timeline/theme.d.ts

@@ -0,0 +1,300 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const activity: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative border-s border-gray-200 dark:border-gray-700", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative border-s border-gray-200 dark:border-gray-700", unknown, unknown, undefined>>;
+export declare const activityitem: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    li: string;
+    span: string;
+    img: string;
+    outerDiv: string;
+    innerDiv: string;
+    time: string;
+    title: string;
+    text: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    li: string;
+    span: string;
+    img: string;
+    outerDiv: string;
+    innerDiv: string;
+    time: string;
+    title: string;
+    text: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    li: string;
+    span: string;
+    img: string;
+    outerDiv: string;
+    innerDiv: string;
+    time: string;
+    title: string;
+    text: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const group: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    time: string;
+    ol: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    time: string;
+    ol: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    time: string;
+    ol: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const groupitem: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    a: string;
+    img: string;
+    div: string;
+    title: string;
+    span: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    a: string;
+    img: string;
+    div: string;
+    title: string;
+    span: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    a: string;
+    img: string;
+    div: string;
+    title: string;
+    span: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TimelineVariants = VariantProps<typeof timeline>;
+export declare const timeline: import("tailwind-variants").TVReturnType<{
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}, undefined, undefined, {
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    order: {
+        group: string;
+        horizontal: string;
+        activity: string;
+        vertical: string;
+        default: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;
+export type TimelineItemVariants = VariantProps<typeof timelineitem>;
+export declare const timelineitem: import("tailwind-variants").TVReturnType<{
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}, {
+    li: string;
+    div: string;
+    time: string;
+    h3: string;
+    svg: string;
+}, undefined, {
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}, {
+    li: string;
+    div: string;
+    time: string;
+    h3: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    order: {
+        default: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        vertical: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        horizontal: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        activity: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+        group: {
+            li: string;
+            div: string;
+            time: string;
+            h3: string;
+        };
+    };
+}, {
+    li: string;
+    div: string;
+    time: string;
+    h3: string;
+    svg: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/timeline/theme.js

@@ -0,0 +1,92 @@
+import { tv } from "tailwind-variants";
+export const activity = tv({
+    base: "relative border-s border-gray-200 dark:border-gray-700"
+});
+export const activityitem = tv({
+    slots: {
+        li: "mb-10 ms-6",
+        span: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900",
+        img: "rounded-full shadow-lg",
+        outerDiv: "p-4 bg-white rounded-lg border border-gray-200 shadow-xs dark:bg-gray-700 dark:border-gray-600",
+        innerDiv: "justify-between items-center mb-3 sm:flex",
+        time: "mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0",
+        title: "text-sm font-normal text-gray-500 lex dark:text-gray-300",
+        text: "p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300"
+    }
+});
+export const group = tv({
+    slots: {
+        div: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
+        time: "text-lg font-semibold text-gray-900 dark:text-white",
+        ol: "mt-3 divide-y divider-gray-200 dark:divide-gray-700"
+    }
+});
+export const groupitem = tv({
+    slots: {
+        a: "block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700",
+        img: "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0",
+        div: "text-gray-600 dark:text-gray-400",
+        title: "text-base font-normal",
+        span: "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400"
+    }
+});
+export const timeline = tv({
+    variants: {
+        order: {
+            group: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
+            horizontal: "sm:flex",
+            activity: "relative border-s border-gray-200 dark:border-gray-700",
+            vertical: "relative border-s border-gray-200 dark:border-gray-700",
+            default: "relative border-s border-gray-200 dark:border-gray-700"
+        }
+    },
+    defaultVariants: {
+        order: "default"
+    }
+});
+export const timelineitem = tv({
+    slots: {
+        li: "",
+        div: "",
+        time: "",
+        h3: "",
+        svg: "w-3 h-3 text-primary-600 dark:text-primary-400"
+    },
+    variants: {
+        order: {
+            default: {
+                li: "mb-10 ms-4",
+                div: "absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",
+                time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+                h3: "text-lg font-semibold text-gray-900 dark:text-white"
+            },
+            vertical: {
+                li: "mb-10 ms-6",
+                div: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
+                time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+                h3: "flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white"
+            },
+            horizontal: {
+                li: "relative mb-6 sm:mb-0",
+                div: "flex items-center",
+                time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+                h3: "text-lg font-semibold text-gray-900 dark:text-white"
+            },
+            activity: {
+                li: "mb-10 ms-6",
+                div: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
+                time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
+                h3: "text-lg font-semibold text-gray-900 dark:text-white"
+            },
+            group: {
+                li: "",
+                div: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
+                time: "text-lg font-semibold text-gray-900 dark:text-white",
+                h3: "text-lg font-semibold text-gray-900 dark:text-white"
+            }
+        }
+    },
+    defaultVariants: {
+        order: "default"
+    }
+});