flowbite-svelte 0.36.5 → 0.37.1

package/dist/toolbar/ToolbarButton.svelte.d.ts

@@ -23,6 +23,34 @@ declare const __propDef: {
 export type ToolbarButtonProps = typeof __propDef.props;
 export type ToolbarButtonEvents = typeof __propDef.events;
 export type ToolbarButtonSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Toolbar](https://flowbite-svelte.com/docs/utilities/toolbar)
+ * - Setup
+ * - Default toolbar
+ * - Colored toolbars
+ * - Toolbar with groups
+ * - WYSIWYG Editor
+ * - Comment box
+ * ## Props
+ * @prop color: ToolbarButtonType = 'default';
+ * @prop name: string | undefined = undefined;
+ * @prop ariaLabel: string | undefined = undefined;
+ * @prop size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+ * @prop href: string | undefined = undefined;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Toolbar>
+ *   <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg></ToolbarButton>
+ *   <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg></ToolbarButton>
+ *   <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg></ToolbarButton>
+ * </Toolbar>
+ * ```
+ */
 export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
 }
 export {};

package/dist/toolbar/ToolbarButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toolbar/ToolbarButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAqElD,QAAA,MAAM,SAAS;;;;eADoH,MAAM,GAAG,SAAS;oBAAc,MAAM,GAAG,SAAS;;eAA2C,MAAM,GAAG,SAAS;;;;;;;;;;;;CACpK,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"ToolbarButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toolbar/ToolbarButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAuElD,QAAA,MAAM,SAAS;;;;eADoH,MAAM,GAAG,SAAS;oBAAc,MAAM,GAAG,SAAS;;eAA2C,MAAM,GAAG,SAAS;;;;;;;;;;;;CACpK,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/toolbar/ToolbarGroup.svelte

@@ -8,3 +8,30 @@ if (options)
 <div class={divClass}>
   <slot />
 </div>
+
+<!--
+  @component
+  @component
+  ## Features
+  [Go to Toolbar](https://flowbite-svelte.com/docs/utilities/toolbar)
+  - Setup
+  - Default toolbar
+  - Colored toolbars
+  - Toolbar with groups
+  - WYSIWYG Editor
+  - Comment box
+  ## Props
+  @prop divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+  ## Example
+  ```
+  <script>
+    import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
+  </script>
+
+  <Toolbar>
+    <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg></ToolbarButton>
+    <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg></ToolbarButton>
+    <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg></ToolbarButton>
+  </Toolbar>
+  ```
+-->

package/dist/toolbar/ToolbarGroup.svelte.d.ts

@@ -13,6 +13,31 @@ declare const __propDef: {
 export type ToolbarGroupProps = typeof __propDef.props;
 export type ToolbarGroupEvents = typeof __propDef.events;
 export type ToolbarGroupSlots = typeof __propDef.slots;
+/**
+ * @component
+ * ## Features
+ * [Go to Toolbar](https://flowbite-svelte.com/docs/utilities/toolbar)
+ * - Setup
+ * - Default toolbar
+ * - Colored toolbars
+ * - Toolbar with groups
+ * - WYSIWYG Editor
+ * - Comment box
+ * ## Props
+ * @prop divClass: string = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Toolbar>
+ *   <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg></ToolbarButton>
+ *   <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" /></svg></ToolbarButton>
+ *   <ToolbarButton><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg></ToolbarButton>
+ * </Toolbar>
+ * ```
+ */
 export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
 }
 export {};

package/dist/toolbar/ToolbarGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toolbar/ToolbarGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"ToolbarGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/toolbar/ToolbarGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/tooltips/Tooltip.svelte

@@ -21,3 +21,28 @@ $: {
 <Popper rounded shadow {...$$restProps} class={toolTipClass} on:show>
   <slot />
 </Popper>
+
+<!--
+  @component
+  ## Features
+  [Go to ](https://flowbite-svelte.com/docs/components/tooltip)
+  - Setup
+  - Default tooltip example
+  - Tooltip styles
+  - Placement
+  - Triggering
+  - Disable arrow
+  - Custom style
+  ## Props
+  @prop type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
+  @prop defaultClass: string = 'py-2 px-3 text-sm font-medium';
+  ## Example
+  ```
+  <script>
+    import { Tooltip, Button } from 'flowbite-svelte';
+  </script>
+  
+  <Button>Default tooltip</Button>
+  <Tooltip>Tooltip content</Tooltip>
+  ```
+-->

package/dist/tooltips/Tooltip.svelte.d.ts

@@ -265,6 +265,29 @@ declare const __propDef: {
 export type TooltipProps = typeof __propDef.props;
 export type TooltipEvents = typeof __propDef.events;
 export type TooltipSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to ](https://flowbite-svelte.com/docs/components/tooltip)
+ * - Setup
+ * - Default tooltip example
+ * - Tooltip styles
+ * - Placement
+ * - Triggering
+ * - Disable arrow
+ * - Custom style
+ * ## Props
+ * @prop type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
+ * @prop defaultClass: string = 'py-2 px-3 text-sm font-medium';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Tooltip, Button } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Button>Default tooltip</Button>
+ * <Tooltip>Tooltip content</Tooltip>
+ * ```
+ */
 export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
 }
 export {};

package/dist/tooltips/Tooltip.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltips/Tooltip.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltips/Tooltip.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/typography/A.svelte

@@ -7,3 +7,36 @@ export let aClass = 'inline-flex items-center hover:underline';
 <a {...$$restProps} {href} class={classNames(aClass, color, $$props.class)}>
   <slot />
 </a>
+
+<!--
+  @component
+  ## Features
+  [Go to Link](https://flowbite-svelte.com/docs/typography/link)
+  - Setup
+  - Default link
+  - Button
+  - Paragraph
+  - Icon link
+  - CTA link
+  - Card link
+  - Image link
+  ## Props
+  @prop italic: boolean = false;
+  @prop underline: boolean = false;
+  @prop linethrough: boolean = false;
+  @prop uppercase: boolean = false;
+  @prop gradient: boolean = false;
+  @prop highlight: boolean = false;
+  @prop highlightClass: string = 'text-blue-600 dark:text-blue-500';
+  @prop decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+  @prop gradientClass: string =
+    'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+  ## Example
+  ```
+  <script>
+    import { A } from 'flowbite-svelte';
+  </script>
+
+  <A class="font-medium hover:underline">Read more</A>
+  ```
+-->

package/dist/typography/A.svelte.d.ts

@@ -16,6 +16,37 @@ declare const __propDef: {
 export type AProps = typeof __propDef.props;
 export type AEvents = typeof __propDef.events;
 export type ASlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Link](https://flowbite-svelte.com/docs/typography/link)
+ * - Setup
+ * - Default link
+ * - Button
+ * - Paragraph
+ * - Icon link
+ * - CTA link
+ * - Card link
+ * - Image link
+ * ## Props
+ * @prop italic: boolean = false;
+ * @prop underline: boolean = false;
+ * @prop linethrough: boolean = false;
+ * @prop uppercase: boolean = false;
+ * @prop gradient: boolean = false;
+ * @prop highlight: boolean = false;
+ * @prop highlightClass: string = 'text-blue-600 dark:text-blue-500';
+ * @prop decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+ * @prop gradientClass: string =
+ *   'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+ * ## Example
+ * ```
+ * <script>
+ *   import { A } from 'flowbite-svelte';
+ * </script>
+ *
+ * <A class="font-medium hover:underline">Read more</A>
+ * ```
+ */
 export default class A extends SvelteComponentTyped<AProps, AEvents, ASlots> {
 }
 export {};

package/dist/typography/A.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"A.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/A.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,MAAM,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC5C,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC9C,MAAM,MAAM,MAAM,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,CAAE,SAAQ,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;CAC3E"}
+{"version":3,"file":"A.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/A.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,MAAM,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC5C,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC9C,MAAM,MAAM,MAAM,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,CAAE,SAAQ,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;CAC3E"}

package/dist/typography/Blockquote.svelte

@@ -42,3 +42,36 @@ const sizes = {
   )}>
   <slot />
 </blockquote>
+
+<!--
+  @component
+  ## Features
+  [Go to Blockquote](https://flowbite-svelte.com/docs/typography/blockquote)
+  - Default blockquote
+  - Solid background
+  - Blockquote icon
+  - Paragraph context
+  - User testimonial
+  - User Review
+  - Alignment
+  - Sizes 
+  ## Props
+  @prop border: boolean = false;
+  @prop italic: boolean = true;
+  @prop borderClass: string = 'border-l-4 border-gray-300 dark:border-gray-500';
+  @prop bgClass: string = 'bg-gray-50 dark:bg-gray-800';
+  @prop bg: boolean = false;
+  @prop baseClass: string = 'font-semibold text-gray-900 dark:text-white';
+  @prop alignment: 'left' | 'center' | 'right' = 'left';
+  @prop size: BlockQuoteType = 'lg';
+  ## Example
+  ```
+  <script>
+    import { Blockquote } from 'flowbite-svelte'
+  </script>
+
+  <Blockquote size='xl'>
+  "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
+  </Blockquote>
+  ```
+-->

package/dist/typography/Blockquote.svelte.d.ts

@@ -22,6 +22,37 @@ declare const __propDef: {
 export type BlockquoteProps = typeof __propDef.props;
 export type BlockquoteEvents = typeof __propDef.events;
 export type BlockquoteSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Blockquote](https://flowbite-svelte.com/docs/typography/blockquote)
+ * - Default blockquote
+ * - Solid background
+ * - Blockquote icon
+ * - Paragraph context
+ * - User testimonial
+ * - User Review
+ * - Alignment
+ * - Sizes
+ * ## Props
+ * @prop border: boolean = false;
+ * @prop italic: boolean = true;
+ * @prop borderClass: string = 'border-l-4 border-gray-300 dark:border-gray-500';
+ * @prop bgClass: string = 'bg-gray-50 dark:bg-gray-800';
+ * @prop bg: boolean = false;
+ * @prop baseClass: string = 'font-semibold text-gray-900 dark:text-white';
+ * @prop alignment: 'left' | 'center' | 'right' = 'left';
+ * @prop size: BlockQuoteType = 'lg';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Blockquote } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Blockquote size='xl'>
+ * "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
+ * </Blockquote>
+ * ```
+ */
 export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
 }
 export {};

package/dist/typography/Blockquote.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Blockquote.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAkD/C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"Blockquote.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Blockquote.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAoD/C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/typography/DescriptionList.svelte

@@ -8,3 +8,45 @@ let classDesc = classNames(tag === 'dt' ? dtClass : ddClass, $$props.class);
 <svelte:element this={tag} {...$$restProps} class={classDesc}>
   <slot />
 </svelte:element>
+
+<!--
+  @component
+  ## Features
+  [Go to Description List](https://flowbite-svelte.com/docs/typography/list#Description_List)
+  - Setup
+  - Unordored list
+  - Icons
+  - Nested
+  - Unstyled
+  - Ordered list
+  - Nested
+  - Description List
+  - List with icon
+  - Advanced layout
+  - Horizontal List
+  ## Props
+  @prop tag: 'dt' | 'dd';
+  @prop dtClass: string = 'text-gray-500 md:text-lg dark:text-gray-400';
+  @prop ddClass: string = 'text-lg font-semibold';
+  ## Example
+  ```
+  <script>
+    import { List, Li, DescriptionList } from 'flowbite-svelte';
+  </script>
+  
+  <List tag="dl" color="text-gray-900 dark:text-white divide-y divide-gray-200  dark:divide-gray-700">
+    <div class="flex flex-col pb-3">
+      <DescriptionList tag="dt" class="mb-1">Email address</DescriptionList>
+      <DescriptionList tag="dd">yourname@flowbite.com</DescriptionList>
+    </div>
+    <div class="flex flex-col pb-3">
+      <DescriptionList tag="dt" class="mb-1">Home address</DescriptionList>
+      <DescriptionList tag="dd">92 Miles Drive, Newark, NJ 07103, California, USA</DescriptionList>
+    </div>
+    <div class="flex flex-col pb-3">
+      <DescriptionList tag="dt" class="mb-1">Phone number</DescriptionList>
+      <DescriptionList tag="dd">+00 123 456 789 / +12 345 678</DescriptionList>
+    </div>
+  </List>
+  ```
+-->

package/dist/typography/DescriptionList.svelte.d.ts

@@ -16,6 +16,46 @@ declare const __propDef: {
 export type DescriptionListProps = typeof __propDef.props;
 export type DescriptionListEvents = typeof __propDef.events;
 export type DescriptionListSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Description List](https://flowbite-svelte.com/docs/typography/list#Description_List)
+ * - Setup
+ * - Unordored list
+ * - Icons
+ * - Nested
+ * - Unstyled
+ * - Ordered list
+ * - Nested
+ * - Description List
+ * - List with icon
+ * - Advanced layout
+ * - Horizontal List
+ * ## Props
+ * @prop tag: 'dt' | 'dd';
+ * @prop dtClass: string = 'text-gray-500 md:text-lg dark:text-gray-400';
+ * @prop ddClass: string = 'text-lg font-semibold';
+ * ## Example
+ * ```
+ * <script>
+ *   import { List, Li, DescriptionList } from 'flowbite-svelte';
+ * </script>
+ *
+ * <List tag="dl" color="text-gray-900 dark:text-white divide-y divide-gray-200  dark:divide-gray-700">
+ *   <div class="flex flex-col pb-3">
+ *     <DescriptionList tag="dt" class="mb-1">Email address</DescriptionList>
+ *     <DescriptionList tag="dd">yourname@flowbite.com</DescriptionList>
+ *   </div>
+ *   <div class="flex flex-col pb-3">
+ *     <DescriptionList tag="dt" class="mb-1">Home address</DescriptionList>
+ *     <DescriptionList tag="dd">92 Miles Drive, Newark, NJ 07103, California, USA</DescriptionList>
+ *   </div>
+ *   <div class="flex flex-col pb-3">
+ *     <DescriptionList tag="dt" class="mb-1">Phone number</DescriptionList>
+ *     <DescriptionList tag="dd">+00 123 456 789 / +12 345 678</DescriptionList>
+ *   </div>
+ * </List>
+ * ```
+ */
 export default class DescriptionList extends SvelteComponentTyped<DescriptionListProps, DescriptionListEvents, DescriptionListSlots> {
 }
 export {};

package/dist/typography/DescriptionList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/DescriptionList.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;aAD2D,IAAI,GAAG,IAAI;;;;;;;;;;CACP,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"DescriptionList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/DescriptionList.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;aAD2D,IAAI,GAAG,IAAI;;;;;;;;;;CACP,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/typography/Heading.svelte

@@ -18,3 +18,38 @@ const textSizes = {
   class={classNames(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
   <slot />
 </svelte:element>
+
+<!--
+  @component
+  ## Features
+  [Go to Heading](https://flowbite-svelte.com/docs/typography/heading)
+  - Setup
+  - Default heading
+  - Second-level heading
+  - Highlighted heading
+  - Heading mark
+  - Heading gradient
+  - Heading underline
+  - Breadcrumb context
+  - Badge context
+  - Secondary text
+  - Sizes  
+  ## Props
+  @prop tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';
+  @prop color: string = 'text-gray-900 dark:text-white';
+  @prop customSize: string = '';
+  ## Example
+  ```
+  <script>
+    import {  Heading, P, Button } from 'flowbite-svelte'
+  </script>
+  
+  <div  class="text-center">
+    <Heading tag="h1" class="mb-4" customSize="text-4xl font-extrabold  md:text-5xl lg:text-6xl">We invest in the world’s potential</Heading>
+    <P class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
+    <Button href="/">Learn more 
+    <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </Button>
+  </div>
+  ```
+-->

package/dist/typography/Heading.svelte.d.ts

@@ -16,6 +16,39 @@ declare const __propDef: {
 export type HeadingProps = typeof __propDef.props;
 export type HeadingEvents = typeof __propDef.events;
 export type HeadingSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Heading](https://flowbite-svelte.com/docs/typography/heading)
+ * - Setup
+ * - Default heading
+ * - Second-level heading
+ * - Highlighted heading
+ * - Heading mark
+ * - Heading gradient
+ * - Heading underline
+ * - Breadcrumb context
+ * - Badge context
+ * - Secondary text
+ * - Sizes
+ * ## Props
+ * @prop tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';
+ * @prop color: string = 'text-gray-900 dark:text-white';
+ * @prop customSize: string = '';
+ * ## Example
+ * ```
+ * <script>
+ *   import {  Heading, P, Button } from 'flowbite-svelte'
+ * </script>
+ *
+ * <div  class="text-center">
+ *   <Heading tag="h1" class="mb-4" customSize="text-4xl font-extrabold  md:text-5xl lg:text-6xl">We invest in the world’s potential</Heading>
+ *   <P class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
+ *   <Button href="/">Learn more
+ *   <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+ *   </Button>
+ * </div>
+ * ```
+ */
 export default class Heading extends SvelteComponentTyped<HeadingProps, HeadingEvents, HeadingSlots> {
 }
 export {};

package/dist/typography/Heading.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Heading.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Heading.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/typography/Hr.svelte

@@ -22,3 +22,34 @@ let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass)
 {:else}
   <hr class={horizontalClass} />
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Horizontal Line](https://flowbite-svelte.com/docs/typography/hr)
+  - Setup
+  - Default HR
+  - Trimmed
+  - Icon HR
+  - HR with text
+  - HR shape
+  ## Props
+  @prop icon: boolean = false;
+  @prop width: string = 'w-full';
+  @prop height: string = 'h-px';
+  @prop divClass: string = 'inline-flex justify-center items-center w-full';
+  @prop hrClass: string = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
+  @prop iconDivClass: string = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
+  @prop textSpanClass: string = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
+  @prop middleBgColor: string = 'dark:bg-gray-900';
+  ## Example
+  ```
+  <script>
+    import { Hr, P } from 'flowbite-svelte'
+  </script>
+  
+  <P>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
+  <Hr class="my-8" height="h-px" />
+  <P>Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
+  ```
+-->

package/dist/typography/Hr.svelte.d.ts

@@ -21,6 +21,35 @@ declare const __propDef: {
 export type HrProps = typeof __propDef.props;
 export type HrEvents = typeof __propDef.events;
 export type HrSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Horizontal Line](https://flowbite-svelte.com/docs/typography/hr)
+ * - Setup
+ * - Default HR
+ * - Trimmed
+ * - Icon HR
+ * - HR with text
+ * - HR shape
+ * ## Props
+ * @prop icon: boolean = false;
+ * @prop width: string = 'w-full';
+ * @prop height: string = 'h-px';
+ * @prop divClass: string = 'inline-flex justify-center items-center w-full';
+ * @prop hrClass: string = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
+ * @prop iconDivClass: string = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
+ * @prop textSpanClass: string = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
+ * @prop middleBgColor: string = 'dark:bg-gray-900';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Hr, P } from 'flowbite-svelte'
+ * </script>
+ *
+ * <P>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
+ * <Hr class="my-8" height="h-px" />
+ * <P>Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
+ * ```
+ */
 export default class Hr extends SvelteComponentTyped<HrProps, HrEvents, HrSlots> {
 }
 export {};

package/dist/typography/Hr.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hr.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Hr.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/C,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7C,MAAM,CAAC,OAAO,OAAO,EAAG,SAAQ,oBAAoB,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;CAC/E"}
+{"version":3,"file":"Hr.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Hr.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/C,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,EAAG,SAAQ,oBAAoB,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;CAC/E"}

package/dist/typography/Img.svelte

@@ -24,3 +24,38 @@ export let captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray
     {srcset}
     {alt} />
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Images](https://flowbite-svelte.com/docs/typography/image)
+  - Setup
+  - Default image
+  - Image caption
+  - Rounded corners
+  - Image shadow
+  - Retina-ready
+  - Image card
+  - Image effects
+  - Alignment
+  - Sizes
+  ## Props
+  @prop caption: string | undefined = undefined;
+  @prop src: string | undefined = undefined;
+  @prop srcset: string | undefined = undefined;
+  @prop size: string = 'max-w-full';
+  @prop alignment: string = '';
+  @prop imgClass: string = 'h-auto';
+  @prop figClass: string = 'max-w-lg';
+  @prop alt: string = '';
+  @prop effect: string = '';
+  @prop captionClass: string = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400';  
+  ## Example
+  ```
+  <script>
+    import { Img } from 'flowbite-svelte';
+  </script>
+  
+  <Img src="/images/examples/image-1@2x.jpg" alt="sample 1"/>
+  ```
+-->