flowbite-svelte 0.27.15 → 0.27.16

package/toolbar/Toolbar.svelte

@@ -0,0 +1,57 @@
+<script>import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import classNames from 'classnames';
+const separators = writable(false);
+setContext('toolbar', separators);
+export let color = 'dark';
+export let embedded = false;
+const bgColors = {
+    gray: 'bg-gray-100 dark:bg-gray-200 ',
+    red: 'bg-red-100 dark:bg-red-200',
+    yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
+    green: 'bg-green-100 dark:bg-green-200 ',
+    indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
+    purple: 'bg-purple-100 dark:bg-purple-200 ',
+    pink: 'bg-pink-100 dark:bg-pink-200 ',
+    blue: 'bg-blue-100 dark:bg-blue-200 ',
+    dark: 'bg-gray-50 dark:bg-gray-700'
+    // custom: customBgClass
+};
+const textColors = {
+    gray: 'text-gray-500 dark:text-gray-700',
+    red: 'text-red-500 dark:text-red-700',
+    yellow: 'text-yellow-500 dark:text-yellow-700',
+    green: 'text-green-500 dark:text-green-700',
+    indigo: 'text-indigo-500 dark:text-indigo-700',
+    purple: 'text-purple-500 dark:text-purple-700',
+    pink: 'text-pink-500 dark:text-pink-700',
+    blue: 'text-blue-500 dark:text-blue-700',
+    dark: 'text-gray-500 dark:text-gray-400'
+    // custom: customTextColor
+};
+let divClass;
+$: divClass = classNames('flex justify-between items-center', embedded || 'rounded-lg border border-gray-200 dark:border-gray-600 py-2 px-3', embedded || textColors[color], embedded || bgColors[color], $$props.class);
+const divideColors = {
+    gray: 'divide-gray-200 dark:divide-gray-700',
+    red: 'divide-red-200 dark:divide-red-700',
+    yellow: 'divide-yellow-200 dark:divide-yellow-700',
+    green: 'divide-green-200 dark:divide-green-700',
+    indigo: 'divide-indigo-200 dark:divide-indigo-700',
+    purple: 'divide-purple-200 dark:divide-purple-700',
+    pink: 'divide-pink-200 dark:divide-pink-700',
+    blue: 'divide-blue-200 dark:divide-blue-700',
+    dark: 'divide-gray-200 dark:divide-gray-600'
+    // custom: customTextColor
+};
+let separatorsClass;
+$: separatorsClass = classNames($separators && 'divide-gray-200 sm:divide-x', 
+//  dark:divide-gray-600'
+divideColors[color]);
+</script>
+
+<div class={divClass}>
+	<div class="flex flex-wrap items-center {separatorsClass}">
+		<slot />
+	</div>
+	<slot name="end" />
+</div>

package/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | undefined;
+        embedded?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        end: {};
+    };
+};
+export declare type ToolbarProps = typeof __propDef.props;
+export declare type ToolbarEvents = typeof __propDef.events;
+export declare type ToolbarSlots = typeof __propDef.slots;
+export default class Toolbar extends SvelteComponentTyped<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+}
+export {};

package/toolbar/ToolbarButton.svelte

@@ -0,0 +1,44 @@
+<script>import { getContext } from 'svelte';
+import classNames from 'classnames';
+const background = getContext('background');
+export let color = 'default';
+export let name = undefined;
+export let ariaLabel = undefined;
+export let size = 'md';
+const colors = {
+    default: 'hover:text-gray-900 hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
+    gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
+    red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
+    yellow: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300',
+    green: 'focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
+    indigo: 'focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-300',
+    purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
+    pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
+    blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300'
+};
+const sizing = {
+    xs: 'm-0.5 rounded focus:ring-1 p-0.5',
+    sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+    md: 'rounded-lg focus:ring-2 p-1.5'
+};
+let buttonClass;
+$: buttonClass = classNames('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
+    (background ? 'hover:bg-gray-100 dark:hover:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
+const svgSizes = {
+    xs: 'w-3 h-3',
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5'
+};
+</script>
+
+<button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+	{#if name}<span class="sr-only">{name}</span>{/if}
+	<slot>
+		<svg class={svgSizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+			<path
+				fill-rule="evenodd"
+				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+				clip-rule="evenodd" />
+		</svg>
+	</slot>
+</button>

package/toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | undefined;
+        name?: string | undefined;
+        ariaLabel?: string | undefined;
+        size?: "xs" | "sm" | "md" | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToolbarButtonProps = typeof __propDef.props;
+export declare type ToolbarButtonEvents = typeof __propDef.events;
+export declare type ToolbarButtonSlots = typeof __propDef.slots;
+export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
+}
+export {};

package/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,9 @@
+<script>import { getContext } from 'svelte';
+const options = getContext('toolbar');
+if (options)
+    $options = true;
+</script>
+
+<div class="flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0">
+	<slot />
+</div>

package/toolbar/ToolbarGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToolbarGroupProps = typeof __propDef.props;
+export declare type ToolbarGroupEvents = typeof __propDef.events;
+export declare type ToolbarGroupSlots = typeof __propDef.slots;
+export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
+}
+export {};

package/tooltips/Tooltip.svelte

@@ -0,0 +1,23 @@
+<script>import Popper from '../utils/Popper.svelte';
+import classNames from 'classnames';
+export let style = 'auto';
+export let defaultClass = 'py-2 px-3 text-sm font-medium';
+const styles = {
+    dark: 'border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
+    light: 'border-gray-200 bg-white text-gray-900',
+    auto: 'border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600',
+    custom: ''
+};
+let toolTipClass;
+$: {
+    if ($$restProps.color)
+        style = 'custom';
+    else
+        $$restProps.color = 'none';
+    toolTipClass = classNames('tooltip', defaultClass, styles[style], $$props.class);
+}
+</script>
+
+<Popper data-tooltip rounded border shadow {...$$restProps} class={toolTipClass} on:show>
+  <slot />
+</Popper>

package/tooltips/Tooltip.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        style?: "light" | "dark" | "custom" | "auto" | undefined;
+        defaultClass?: string | undefined;
+    };
+    events: {
+        show: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TooltipProps = typeof __propDef.props;
+export declare type TooltipEvents = typeof __propDef.events;
+export declare type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/types.d.ts

@@ -0,0 +1,225 @@
+import type { SvelteComponent } from 'svelte';
+export interface ActivityType {
+    title: HTMLElement | string;
+    date: Date | string;
+    src: string;
+    alt: string;
+    text?: HTMLElement | string;
+}
+export declare type AlignType = 'text-center' | 'text-left' | 'text-right';
+export interface AuthFieldType {
+    label: string;
+    fieldtype: string;
+    required?: boolean;
+    placeholder?: string;
+}
+export declare type AuthFunctionType = () => Promise<void>;
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
+export declare type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
+export declare type CarouselIconType = {
+    next: typeof SvelteComponent;
+    prev: typeof SvelteComponent;
+};
+export interface CheckboxType {
+    id: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    helper?: string;
+}
+export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom';
+export interface DotType {
+    top?: boolean;
+    color?: string;
+}
+export interface drawerTransitionParamTypes {
+    amount?: number;
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    opacity?: number;
+    x?: number;
+    y?: number;
+}
+export declare type drawerTransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur' | undefined;
+export interface DropdownType {
+    name: string;
+    href: string;
+    divider?: boolean;
+}
+export declare type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange';
+export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';
+export interface GroupTimelineType {
+    title: string | HTMLElement;
+    src: string;
+    alt: string;
+    href?: string;
+    isPrivate?: boolean;
+    comment?: string | HTMLElement;
+}
+export interface IconType {
+    name: typeof SvelteComponent;
+    size?: number;
+    color?: Colors;
+    class?: string;
+}
+export interface IconTabType {
+    name: typeof SvelteComponent;
+    active: boolean;
+    href: string;
+    rel?: string;
+    icon?: typeof SvelteComponent;
+    iconSize?: number;
+}
+export declare type ImgType = {
+    src: string;
+    alt?: string;
+};
+export declare type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'search';
+export interface InteractiveTabType {
+    name: string;
+    id: number;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: typeof SvelteComponent;
+    iconSize?: number;
+    content: string | typeof SvelteComponent;
+}
+export interface ListGroupItemType {
+    current?: boolean;
+    disabled?: boolean;
+    href?: string;
+    [propName: string]: any;
+}
+export interface LinkType {
+    name: string;
+    href: string;
+    rel?: string;
+}
+export interface ListCardType {
+    img: ImgType;
+    field1: string;
+    field2?: string;
+    field3?: string;
+}
+export interface NavbarType {
+    name: string;
+    href: string;
+    rel?: string;
+    child?: NavbarType[];
+}
+export interface PageType {
+    pageNum: number;
+    href: string;
+}
+export declare const xs = "xs";
+export declare const sm = "sm";
+export declare const md = "md";
+export declare const lg = "lg";
+export declare const xl = "xl";
+export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+export declare type FormSizeType = typeof sm | typeof md | typeof lg;
+export interface PillTabType {
+    name: string;
+    selected: boolean;
+    href: string;
+}
+export declare type ReviewType = {
+    name: string;
+    imgSrc: string;
+    imgAlt: string;
+    address: string | undefined;
+    reviewDate: string | undefined;
+    title: string;
+    rating: number;
+    item1: string | undefined;
+    item2: string | undefined;
+    item3: string | undefined;
+};
+export declare type SelectOptionType = {
+    name: string;
+    value: string;
+};
+export declare type SidebarType = {
+    id: number;
+    name: string;
+    href?: string;
+    icon?: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
+    iconColor?: string;
+    rel?: string;
+    children?: SidebarType[];
+    subtext?: HTMLElement;
+};
+export declare type SidebarCtaType = {
+    label: string;
+    text: HTMLElement;
+};
+export interface SiteType {
+    name: string;
+    href: string;
+    img?: string;
+}
+export interface SocialMediaLinkType {
+    parent: string;
+    children?: LinkType[];
+}
+export interface SocialMediaType {
+    href: string;
+    icon: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
+}
+export interface TabHeadType {
+    name: string;
+    id: number;
+}
+export interface TabType {
+    name: string;
+    active: boolean;
+    href: string;
+    rel?: string;
+}
+export interface TableDataHelperType {
+    start: number;
+    end: number;
+    total: number;
+}
+export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
+export interface TimelineItemType {
+    date: Date | string;
+    title: string;
+    icon?: typeof SvelteComponent;
+    href?: string;
+    linkname?: string;
+    text?: HTMLElement | string;
+}
+export interface TimelineItemVerticalType {
+    date: Date | string;
+    title: string;
+    icon?: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
+    href?: string;
+    linkname?: string;
+    text?: HTMLElement | string;
+}
+export interface TimelineItemHorizontalType {
+    date: Date | string;
+    title: string;
+    icon?: typeof SvelteComponent;
+    iconSize?: number;
+    iconClass?: string;
+    text?: HTMLElement | string;
+}
+export declare type ToggleColorType = 'blue' | 'red' | 'green' | 'purple' | 'yellow' | 'teal' | 'orange';
+export interface TransitionParamTypes {
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    css?: (t: number, u: number) => string;
+    tick?: (t: number, u: number) => void;
+}
+export declare type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';

package/types.js

@@ -0,0 +1 @@
+export {};

package/typography/A.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let href = '#';
+export let color = 'text-blue-600 dark:text-blue-500';
+export let aClass = 'inline-flex items-center hover:underline';
+</script>
+
+<a {...$$restProps} {href} class={classNames(aClass, color, $$props.class)}>
+  <slot />
+</a>

package/typography/A.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href?: string | undefined;
+        color?: string | undefined;
+        aClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AProps = typeof __propDef.props;
+export declare type AEvents = typeof __propDef.events;
+export declare type ASlots = typeof __propDef.slots;
+export default class A extends SvelteComponentTyped<AProps, AEvents, ASlots> {
+}
+export {};

package/typography/Blockquote.svelte

@@ -0,0 +1,44 @@
+<script>import classNames from 'classnames';
+export let border = false;
+export let italic = true;
+export let borderClass = 'border-l-4 border-gray-300 dark:border-gray-500';
+export let bgClass = 'bg-gray-50 dark:bg-gray-800';
+export let bg = false;
+export let baseClass = 'font-semibold text-gray-900 dark:text-white';
+export let alignment = 'left';
+let alignmentClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
+export let size = 'lg';
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+    '6xl': 'text-6xl',
+    '7xl': 'text-7xl',
+    '8xl': 'text-8xl',
+    '9xl': 'text-9xl'
+};
+</script>
+
+<blockquote
+  {...$$restProps}
+  class={classNames(
+    baseClass,
+    alignmentClasses[alignment],
+    sizes[size],
+    bg && bgClass,
+    border && borderClass,
+    italic && 'italic',
+    $$props.class
+  )}>
+  <slot />
+</blockquote>

package/typography/Blockquote.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        border?: boolean | undefined;
+        italic?: boolean | undefined;
+        borderClass?: string | undefined;
+        bgClass?: string | undefined;
+        bg?: boolean | undefined;
+        baseClass?: string | undefined;
+        alignment?: "left" | "right" | "center" | undefined;
+        size?: "xs" | "sm" | "lg" | "xl" | "base" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BlockquoteProps = typeof __propDef.props;
+export declare type BlockquoteEvents = typeof __propDef.events;
+export declare type BlockquoteSlots = typeof __propDef.slots;
+export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
+}
+export {};

package/typography/DescriptionList.svelte

@@ -0,0 +1,10 @@
+<script>import classNames from 'classnames';
+export let tag;
+export let dtClass = 'text-gray-500 md:text-lg dark:text-gray-400';
+export let ddClass = 'text-lg font-semibold';
+let classDesc = classNames(tag === 'dt' ? dtClass : ddClass, $$props.class);
+</script>
+
+<svelte:element this={tag} {...$$restProps} class={classDesc}>
+  <slot />
+</svelte:element>

package/typography/DescriptionList.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag: 'dt' | 'dd';
+        dtClass?: string | undefined;
+        ddClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DescriptionListProps = typeof __propDef.props;
+export declare type DescriptionListEvents = typeof __propDef.events;
+export declare type DescriptionListSlots = typeof __propDef.slots;
+export default class DescriptionList extends SvelteComponentTyped<DescriptionListProps, DescriptionListEvents, DescriptionListSlots> {
+}
+export {};

package/typography/Heading.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let tag = 'h1';
+export let color = 'text-gray-900 dark:text-white';
+export let customSize = '';
+const textSizes = {
+    h1: 'text-5xl font-extrabold',
+    h2: 'text-4xl font-bold',
+    h3: 'text-3xl font-bold',
+    h4: 'text-2xl font-bold',
+    h5: 'text-xl font-bold',
+    h6: 'text-lg font-bold'
+};
+</script>
+
+<svelte:element
+  this={tag}
+  {...$$restProps}
+  class={classNames(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
+  <slot />
+</svelte:element>

package/typography/Heading.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        color?: string | undefined;
+        customSize?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HeadingProps = typeof __propDef.props;
+export declare type HeadingEvents = typeof __propDef.events;
+export declare type HeadingSlots = typeof __propDef.slots;
+export default class Heading extends SvelteComponentTyped<HeadingProps, HeadingEvents, HeadingSlots> {
+}
+export {};

package/typography/Hr.svelte

@@ -0,0 +1,24 @@
+<script>import classNames from 'classnames';
+export let icon = false;
+export let width = 'w-full';
+export let height = 'h-px';
+export let divClass = 'inline-flex justify-center items-center w-full';
+export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
+export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
+export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
+export let middleBgColor = 'dark:bg-gray-900';
+let horizontalClass = classNames(hrClass, width, height, $$props.class);
+let classDiv = classNames(divClass, $$slots && 'relative', $$props.classDiv);
+let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass);
+</script>
+
+{#if $$slots}
+  <div {...$$restProps} class={classDiv}>
+    <hr class={horizontalClass} />
+    <div class={middleClass}>
+      <slot />
+    </div>
+  </div>
+{:else}
+  <hr class={horizontalClass} />
+{/if}