flowbite-svelte 0.29.13 → 0.30.2

package/index.d.ts

@@ -1,132 +0,0 @@
-export { default as Accordion } from './accordions/Accordion.svelte';
-export { default as AccordionItem } from './accordions/AccordionItem.svelte';
-export { default as Alert } from './alerts/Alert.svelte';
-export { default as Avatar } from './avatar/Avatar.svelte';
-export { default as Badge } from './badges/Badge.svelte';
-export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
-export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
-export { default as Button } from './buttons/Button.svelte';
-export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
-export { default as Card } from './cards/Card.svelte';
-export { default as Carousel } from './carousels/Carousel.svelte';
-export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
-export { default as DarkMode } from './darkmode/DarkMode.svelte';
-export { default as Datepicker } from './datepicker/Datepicker.svelte';
-export { default as Drawer } from './drawer/Drawer.svelte';
-export { default as Dropdown } from './dropdowns/Dropdown.svelte';
-export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
-export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
-export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
-export { default as Footer } from './footer/Footer.svelte';
-export { default as FooterBrand } from './footer/FooterBrand.svelte';
-export { default as FooterCopyright } from './footer/FooterCopyright.svelte';
-export { default as FooterIcon } from './footer/FooterIcon.svelte';
-export { default as FooterLink } from './footer/FooterLink.svelte';
-export { default as FooterLinkGroup } from './footer/FooterLinkGroup.svelte';
-export { default as Checkbox } from './forms/Checkbox.svelte';
-export { default as Dropzone } from './forms/Dropzone.svelte';
-export { default as Fileupload } from './forms/Fileupload.svelte';
-export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
-export { default as Helper } from './forms/Helper.svelte';
-export { default as Input } from './forms/Input.svelte';
-export { default as InputAddon } from './forms/InputAddon.svelte';
-export { default as Label } from './forms/Label.svelte';
-export { default as NumberInput } from './forms/NumberInput.svelte';
-export { default as RadioInline } from './forms/RadioInline.svelte';
-export { default as Radio } from './forms/Radio.svelte';
-export { default as Range } from './forms/Range.svelte';
-export { default as Search } from './forms/Search.svelte';
-export { default as Select } from './forms/Select.svelte';
-export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
-export { default as Textarea } from './forms/Textarea.svelte';
-export { default as Toggle } from './forms/Toggle.svelte';
-export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
-export { default as Indicator } from './indicators/Indicator.svelte';
-export { default as Kbd } from './kbd/Kbd.svelte';
-export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
-export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
-export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
-export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
-export { default as Listgroup } from './list-group/Listgroup.svelte';
-export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
-export { default as Modal } from './modals/Modal.svelte';
-export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
-export { default as Navbar } from './navbar/Navbar.svelte';
-export { default as NavBrand } from './navbar/NavBrand.svelte';
-export { default as NavHamburger } from './navbar/NavHamburger.svelte';
-export { default as NavLi } from './navbar/NavLi.svelte';
-export { default as NavUl } from './navbar/NavUl.svelte';
-export { default as Pagination } from './paginations/Pagination.svelte';
-export { default as PaginationItem } from './paginations/PaginationItem.svelte';
-export { default as Popover } from './popover/Popover.svelte';
-export { default as Progressbar } from './progressbars/Progressbar.svelte';
-export { default as Rating } from './ratings/Rating.svelte';
-export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
-export { default as ScoreRating } from './ratings/ScoreRating.svelte';
-export { default as RatingComment } from './ratings/RatingComment.svelte';
-export { default as Review } from './ratings/Review.svelte';
-export { default as Sidebar } from './sidebars/Sidebar.svelte';
-export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
-export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
-export { default as SidebarCta } from './sidebars/SidebarCta.svelte';
-export { default as SidebarDropdownItem } from './sidebars/SidebarDropdownItem.svelte';
-export { default as SidebarDropdownWrapper } from './sidebars/SidebarDropdownWrapper.svelte';
-export { default as SidebarGroup } from './sidebars/SidebarGroup.svelte';
-export { default as SidebarWrapper } from './sidebars/SidebarWrapper.svelte';
-export { default as CardPlaceholder } from './skeleton/CardPlaceholder.svelte';
-export { default as ImagePlaceholder } from './skeleton/ImagePlaceholder.svelte';
-export { default as ListPlaceholder } from './skeleton/ListPlaceholder.svelte';
-export { default as Skeleton } from './skeleton/Skeleton.svelte';
-export { default as TestimonialPlaceholder } from './skeleton/TestimonialPlaceholder.svelte';
-export { default as TextPlaceholder } from './skeleton/TextPlaceholder.svelte';
-export { default as VideoPlaceholder } from './skeleton/VideoPlaceholder.svelte';
-export { default as WidgetPlaceholder } from './skeleton/WidgetPlaceholder.svelte';
-export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
-export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
-export { default as Spinner } from './spinners/Spinner.svelte';
-export { default as StepIndicator } from './steps/StepIndicator.svelte';
-export { default as Table } from './tables/Table.svelte';
-export { default as TableBody } from './tables/TableBody.svelte';
-export { default as TableBodyCell } from './tables/TableBodyCell.svelte';
-export { default as TableBodyRow } from './tables/TableBodyRow.svelte';
-export { default as TableHead } from './tables/TableHead.svelte';
-export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
-export { default as TableSearch } from './tables/TableSearch.svelte';
-export { default as TabItem } from './tabs/TabItem.svelte';
-export { default as Tabs } from './tabs/Tabs.svelte';
-export { default as Group } from './timelines/Group.svelte';
-export { default as GroupItem } from './timelines/GroupItem.svelte';
-export { default as Activity } from './timelines/Activity.svelte';
-export { default as ActivityItem } from './timelines/ActivityItem.svelte';
-export { default as Timeline } from './timelines/Timeline.svelte';
-export { default as TimelineItem } from './timelines/TimelineItem.svelte';
-export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.svelte';
-export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte';
-export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
-export { default as Toast } from './toasts/Toast.svelte';
-export { default as Toolbar } from './toolbar/Toolbar.svelte';
-export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
-export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
-export { default as Tooltip } from './tooltips/Tooltip.svelte';
-export { default as A } from './typography/A.svelte';
-export { default as Blockquote } from './typography/Blockquote.svelte';
-export { default as DescriptionList } from './typography/DescriptionList.svelte';
-export { default as Heading } from './typography/Heading.svelte';
-export { default as Hr } from './typography/Hr.svelte';
-export { default as Img } from './typography/Img.svelte';
-export { default as Layout } from './typography/Layout.svelte';
-export { default as Li } from './typography/Li.svelte';
-export { default as Mark } from './typography/Mark.svelte';
-export { default as List } from './typography/List.svelte';
-export { default as P } from './typography/P.svelte';
-export { default as Secondary } from './typography/Secondary.svelte';
-export { default as Span } from './typography/Span.svelte';
-export { default as CloseButton } from './utils/CloseButton.svelte';
-export { default as ChevronDown } from './utils/ChevronDown.svelte';
-export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
-export { default as ChevronRight } from './utils/ChevronRight.svelte';
-export { default as ChevronUp } from './utils/ChevronUp.svelte';
-export { default as Chevron } from './utils/Chevron.svelte';
-export { default as InformationCircle } from './utils/InformationCircle.svelte';
-export { default as UserCircle } from './utils/UserCircle.svelte';
-export { default as Video } from './video/Video.svelte';

package/toolbar/Toolbar.svelte

@@ -1,57 +0,0 @@
-<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/ToolbarButton.svelte

@@ -1,44 +0,0 @@
-<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/types.d.ts

@@ -1,226 +0,0 @@
-import type { SvelteComponent } from 'svelte';
-export interface ActivityType {
-    title: HTMLElement | string;
-    date: Date | string;
-    src: string;
-    alt: string;
-    text?: HTMLElement | string;
-}
-export type AlignType = 'text-center' | 'text-left' | 'text-right';
-export interface AuthFieldType {
-    label: string;
-    fieldtype: string;
-    required?: boolean;
-    placeholder?: string;
-}
-export type AuthFunctionType = () => Promise<void>;
-export type ButtonType = 'button' | 'submit' | 'reset';
-export type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
-export type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
-export type CarouselIconType = {
-    next: typeof SvelteComponent;
-    prev: typeof SvelteComponent;
-};
-export interface CheckboxType {
-    id: string;
-    label: string;
-    checked?: boolean;
-    disabled?: boolean;
-    helper?: string;
-}
-export 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 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 type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange';
-export 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 type ImgType = {
-    src: string;
-    alt?: string;
-};
-export 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;
-    active?: boolean;
-}
-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 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 type SelectOptionType = {
-    name: string | number;
-    value: string | number;
-};
-export type SidebarType = {
-    id: number;
-    name: string;
-    href?: string;
-    icon?: typeof SvelteComponent;
-    iconSize?: number;
-    iconClass?: string;
-    iconColor?: string;
-    rel?: string;
-    children?: SidebarType[];
-    subtext?: HTMLElement;
-};
-export 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 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 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 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

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

package/utils/CloseButton.svelte

@@ -1,44 +0,0 @@
-<script>import { getContext } from 'svelte';
-import classNames from 'classnames';
-const background = getContext('background');
-export let color = 'default';
-export let name = 'Close';
-export let size = 'md';
-const colors = {
-    dark: 'hover:text-gray-900 hover:bg-gray-100 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',
-    default: 'focus:ring-gray-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('ml-auto 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" class={buttonClass} aria-label="Close">
-  <slot>
-    <span class="sr-only">{name}</span>
-    <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>