webcoreui 0.9.0 → 0.10.0

package/components/Switch/Switch.svelte

@@ -5,16 +5,19 @@
 
     import styles from './switch.module.scss'
 
-    export let label: SvelteSwitchProps['label'] = ''
-    export let toggled: SvelteSwitchProps['toggled'] = false
-    export let offColor: SvelteSwitchProps['offColor'] = ''
-    export let onColor: SvelteSwitchProps['onColor'] = ''
-    export let reverse: SvelteSwitchProps['reverse'] = false
-    export let small: SvelteSwitchProps['small'] = false
-    export let square: SvelteSwitchProps['square'] = false
-    export let disabled: SvelteSwitchProps['disabled'] = false
-    export let className: SvelteSwitchProps['className'] = ''
-    export let onClick: SvelteSwitchProps['onClick'] = () => {}
+    const {
+        label,
+        toggled,
+        offColor,
+        onColor,
+        reverse,
+        small,
+        square,
+        disabled,
+        className,
+        onClick,
+        ...rest
+    }: SvelteSwitchProps = $props()
 
     const classes = classNames([
         styles.switch,
@@ -36,8 +39,8 @@
         type="checkbox"
         checked={toggled}
         disabled={disabled}
-        on:click={onClick}
-        {...$$restProps}
+        onclick={onClick}
+        {...rest}
     />
     <span class={styles.toggle}></span>
     {#if label}

package/components/Table/Table.svelte

@@ -5,15 +5,17 @@
 
     import styles from './table.module.scss'
 
-    export let headings: TableProps['headings'] = []
-    export let footer: TableProps['footer'] = []
-    export let data: TableProps['data'] = []
-    export let hover: TableProps['hover'] = false
-    export let striped: TableProps['striped'] = null
-    export let offsetStripe: TableProps['offsetStripe'] = false
-    export let compact: TableProps['compact'] = false
-    export let maxHeight: TableProps['maxHeight'] = ''
-    export let className: TableProps['className'] = ''
+    const {
+        headings,
+        footer,
+        data,
+        hover,
+        striped,
+        offsetStripe,
+        compact,
+        maxHeight,
+        className
+    }: TableProps = $props()
 
     const classes = classNames([
         styles.table,

package/components/Table/table.ts

@@ -3,7 +3,7 @@ export type TableProps = {
     footer?: string[]
     data: string[][]
     hover?: boolean
-    striped?: 'column' | 'row' | null
+    striped?: 'column' | 'row'
     offsetStripe?: boolean
     compact?: boolean
     maxHeight?: string

package/components/Tabs/Tabs.astro

@@ -42,10 +42,10 @@ const classes = [
 </section>
 
 <script>
-    const tabs = document.querySelectorAll('[data-id="w-tabs"]')
+    import { on } from '../../utils/DOMUtils'
 
-    Array.from(tabs).forEach(element => {
-        element.addEventListener('click', event => {
+    const addEventListeners = () => {
+        on('[data-id="w-tabs"]', 'click', (event: Event) => {
             const target = event.target as HTMLDivElement
 
             if (target.dataset.value) {
@@ -72,6 +72,9 @@ const classes = [
                     }
                 })
             }
-        })
-    })
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Tabs/Tabs.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
-    import type { TabsProps } from './tabs'
+    import type { SvelteTabsProps } from './tabs'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './tabs.module.scss'
 
-    export let items: TabsProps['items'] = []
-    export let theme: TabsProps['theme'] = null
-    export let vertical: TabsProps['vertical'] = false
-    export let even: TabsProps['even'] = false
-    export let className: TabsProps['className'] = ''
+    const {
+        items,
+        theme,
+        vertical,
+        even,
+        className,
+        children
+    }: SvelteTabsProps = $props()
 
-    let active = ''
-    let tabContainer: HTMLDivElement
+    let active = $state('')
+    let tabContainer: HTMLDivElement | undefined = $state()
 
     const classes = classNames([
         styles.tabs,
@@ -23,7 +26,7 @@
     ])
 
     const setTab = (tab: string) => {
-        const tabs = tabContainer.querySelectorAll('[data-tab]')
+        const tabs = tabContainer!.querySelectorAll('[data-tab]')
 
         active = tab
 
@@ -44,7 +47,7 @@
                 <button
                     data-active={active ? active === item.value : item.active}
                     disabled={item.disabled}
-                    on:click={() => setTab(item.value)}
+                    onclick={() => setTab(item.value)}
                 >
                     {@html item.label}
                 </button>
@@ -52,6 +55,6 @@
         </div>
     </div>
     <div class={styles.content} bind:this={tabContainer}>
-        <slot />
+        {@render children?.()}
     </div>
 </section>

package/components/Tabs/tabs.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type TabsProps = {
     items: {
         label: string
@@ -5,12 +7,16 @@ export type TabsProps = {
         active?: boolean
         disabled?: boolean
     }[]
-    theme?: 'boxed' | 'outline' | null
+    theme?: 'boxed' | 'outline'
     vertical?: boolean
     even?: boolean
     className?: string
 }
 
+export type SvelteTabsProps = {
+    children: Snippet
+} & TabsProps
+
 export type ReactTabsProps = {
     children: React.ReactNode
 } & TabsProps

package/components/Textarea/Textarea.svelte

@@ -7,14 +7,17 @@
 
     import styles from './textarea.module.scss'
 
-    export let label: SvelteTextareaProps['label'] = ''
-    export let placeholder: SvelteTextareaProps['placeholder'] = ''
-    export let subText: SvelteTextareaProps['subText'] = ''
-    export let value: SvelteTextareaProps['value'] = ''
-    export let disabled: SvelteTextareaProps['disabled'] = false
-    export let className: SvelteTextareaProps['className'] = ''
-    export let onChange: SvelteTextareaProps['onChange'] = () => {}
-    export let onKeyUp: SvelteTextareaProps['onKeyUp'] = () => {}
+    const {
+        label,
+        placeholder,
+        subText,
+        value = '',
+        disabled,
+        className,
+        onChange,
+        onKeyUp,
+        ...rest
+    }: SvelteTextareaProps = $props()
 
     const classes = classNames([
         styles.textarea,
@@ -36,9 +39,9 @@
         placeholder={placeholder}
         disabled={disabled}
         class={classes}
-        on:change={onChange}
-        on:keyup={onKeyUp}
-        {...$$restProps}
+        onchange={onChange}
+        onkeyup={onKeyUp}
+        {...rest}
     >{value}</textarea>
     {#if subText}
         <div class={styles.subtext}>

package/components/Textarea/textarea.ts

@@ -1,3 +1,8 @@
+type Target = {
+    target: HTMLTextAreaElement
+    currentTarget: HTMLTextAreaElement
+}
+
 export type TextareaProps = {
     label?: string
     placeholder?: string
@@ -9,11 +14,11 @@ export type TextareaProps = {
 }
 
 export type SvelteTextareaProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
+    onChange?: (event: Event & Target) => void
+    onKeyUp?: (event: KeyboardEvent & Target) => void
 } & TextareaProps
 
 export type ReactTextareaProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement> & Target) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement> & Target) => void
 } & TextareaProps

package/components/ThemeSwitcher/ThemeSwitcher.astro

@@ -50,59 +50,65 @@ const buttonClasses = [
 
 <script>
     import { getCookie, setCookie } from '../../utils/cookies'
+    import { on } from '../../utils/DOMUtils'
     import { dispatch, listen } from '../../utils/event'
 
-    const switchers = document.querySelectorAll('[data-id="w-theme-switcher"]')
+    const addEventListeners = () => {
+        const switchers = document.querySelectorAll('[data-id="w-theme-switcher"]')
 
-    let currentTheme = localStorage.getItem('w-theme')
-        || getCookie('w-theme')
-        || (switchers[0] as HTMLDivElement).dataset.primaryTheme
-        || ''
+        let currentTheme = localStorage.getItem('w-theme')
+                || getCookie('w-theme')
+                || (switchers[0] as HTMLDivElement).dataset.primaryTheme
+                || ''
 
-    const setActiveButton = (buttons: HTMLButtonElement[]) => {
-        buttons.forEach(button => button.dataset.active = 'false')
+        const setActiveButton = (buttons: HTMLButtonElement[]) => {
+            buttons.forEach(button => button.dataset.active = 'false')
 
-        buttons.forEach(button => {
-            if (button.dataset.theme === currentTheme) {
-                button.dataset.active = 'true'
-            }
-        })
-    }
+            buttons.forEach(button => {
+                if (button.dataset.theme === currentTheme) {
+                    button.dataset.active = 'true'
+                }
+            })
+        }
 
-    Array.from(switchers).forEach(switcher => {
-        const buttons = Array.from(switcher.querySelectorAll('button'))
+        Array.from(switchers).forEach(switcher => {
+            const buttons = Array.from(switcher.querySelectorAll('button'))
 
-        setActiveButton(buttons)
+            setActiveButton(buttons)
 
-        listen('theme-switched', theme => {
-            currentTheme = theme
+            listen('theme-switched', theme => {
+                currentTheme = theme
 
-            setActiveButton(buttons)
-        })
+                setActiveButton(buttons)
+            })
 
-        switcher.addEventListener('click', event => {
-            const target = event.target as HTMLButtonElement
+            switcher.addEventListener('click', event => {
+                const target = event.target as HTMLButtonElement
 
-            if (target.nodeName === 'BUTTON') {
-                const toggleTheme = (switcher as HTMLDivElement).dataset.secondaryTheme
+                if (target.nodeName === 'BUTTON') {
+                    const toggleTheme = (switcher as HTMLDivElement).dataset.secondaryTheme
 
-                const theme = toggleTheme
-                    ? toggleTheme === target.dataset.theme
-                        ? (target.previousElementSibling as HTMLButtonElement).dataset.theme as string
-                        : (target.nextElementSibling as HTMLButtonElement).dataset.theme as string
-                    : target.dataset.theme as string
+                    const theme = toggleTheme
+                        ? toggleTheme === target.dataset.theme
+                            ? (target.previousElementSibling as HTMLButtonElement).dataset.theme as string
+                            : (target.nextElementSibling as HTMLButtonElement).dataset.theme as string
+                        : target.dataset.theme as string
 
-                document.body.classList.replace(currentTheme, theme)
+                    document.body.classList.replace(currentTheme, theme)
 
-                currentTheme = theme
+                    currentTheme = theme
 
-                setActiveButton(buttons)
-                setCookie('w-theme', currentTheme, 30)
-                localStorage.setItem('w-theme', currentTheme)
+                    setActiveButton(buttons)
+                    setCookie('w-theme', currentTheme, 30)
+                    localStorage.setItem('w-theme', currentTheme)
 
-                dispatch('theme-switched', currentTheme)
-            }
+                    dispatch('theme-switched', currentTheme)
+                }
+            })
         })
-    })
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
 

package/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import type { ThemeSwitcherProps } from './themeswitcher'
+    import type { SvelteThemeSwitcherProps } from './themeswitcher'
 
     import { classNames } from '../../utils/classNames'
     import { getCookie, setCookie } from '../../utils/cookies'
@@ -8,12 +8,16 @@
 
     import styles from './themeswitcher.module.scss'
 
-    export let themes: ThemeSwitcherProps['themes'] = {}
-    export let toggle: ThemeSwitcherProps['toggle'] = false
-    export let size: ThemeSwitcherProps['size'] = 20
-    export let className: ThemeSwitcherProps['className'] = ''
+    const {
+        themes,
+        toggle,
+        size,
+        primaryIcon,
+        secondaryIcon,
+        className
+    }: SvelteThemeSwitcherProps = $props()
 
-    let currentTheme = ''
+    let currentTheme = $state('')
     let toggled = false
 
     const classes = classNames([
@@ -24,7 +28,7 @@
 
     const primaryTheme = themes[Object.keys(themes)[0]]
     const secondaryTheme = themes[Object.keys(themes)[1]]
-    const useIcons = $$slots.primaryIcon && $$slots.secondaryIcon
+    const useIcons = primaryIcon && secondaryIcon
 
     const setTheme = (theme: string | number) => {
         if (typeof theme === 'number') {
@@ -62,7 +66,7 @@
 >
     {#each Object.keys(themes) as theme, index}
         <button
-            on:click={() => setTheme(toggle ? index : themes[theme])}
+            onclick={() => setTheme(toggle ? index : themes[theme])}
             style={!useIcons ? `background:${theme};` : undefined}
             data-active={currentTheme === themes[theme]}
             aria-label={themes[theme]}
@@ -71,8 +75,8 @@
                 useIcons && styles.icons
             ])}
         >
-            {#if index === 0}<slot name="primaryIcon" />{/if}
-            {#if index !== 0}<slot name="secondaryIcon" />{/if}
+            {#if index === 0}{@render primaryIcon?.()}{/if}
+            {#if index !== 0}{@render secondaryIcon?.()}{/if}
         </button>
     {/each}
 </div>

package/components/ThemeSwitcher/themeswitcher.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type ThemeSwitcherProps = {
     themes: {
         [key: string]: string
@@ -7,6 +9,11 @@ export type ThemeSwitcherProps = {
     className?: string
 }
 
+export type SvelteThemeSwitcherProps = {
+    primaryIcon?: Snippet
+    secondaryIcon?: Snippet
+} & ThemeSwitcherProps
+
 export type ReactThemeSwitcherProps = {
     primaryIcon?: React.ReactNode
     secondaryIcon?: React.ReactNode

package/components/Timeline/Timeline.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-    import type { TimelineProps } from './timeline'
+    import type { SvelteTimelineProps } from './timeline'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './timeline.module.scss'
 
-    export let theme: TimelineProps['theme'] = null
-    export let counter: TimelineProps['counter'] = null
-    export let alternate: TimelineProps['alternate'] = false
-    export let centered: TimelineProps['centered'] = false
-    export let color: TimelineProps['color'] = ''
-    export let textColor: TimelineProps['textColor'] = ''
-    export let className: TimelineProps['className'] = ''
+    const {
+        theme,
+        counter,
+        alternate,
+        centered,
+        color,
+        textColor,
+        className,
+        children
+    }: SvelteTimelineProps = $props()
 
     const classes = classNames([
         styles.timeline,
@@ -29,5 +32,5 @@
 </script>
 
 <ul class={classes} style={styleVariables || null}>
-    <slot />
+    {@render children?.()}
 </ul>

package/components/Timeline/timeline.ts

@@ -1,5 +1,7 @@
+import type { Snippet } from 'svelte'
+
 export type TimelineProps = {
-    theme?: 'fill' | 'stroke' | 'stroke fill' | null
+    theme?: 'fill' | 'stroke' | 'stroke fill'
     alternate?: boolean
     centered?: boolean
     color?: string
@@ -53,9 +55,12 @@ export type TimelineProps = {
     | 'upper-alpha'
     | 'upper-armenian'
     | 'upper-roman'
-    | null
 }
 
+export type SvelteTimelineProps = {
+    children: Snippet
+} & TimelineProps
+
 export type ReactTimelineProps = {
     children: React.ReactNode
 } & TimelineProps

package/components/TimelineItem/TimelineItem.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-    import type { TimelineItemProps } from './timelineitem'
+    import type { SvelteTimelineItemProps } from './timelineitem'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './timelineitem.module.scss'
 
-    export let title: TimelineItemProps['title'] = ''
-    export let titleTag: TimelineItemProps['titleTag'] = 'span'
-    export let className: TimelineItemProps['className'] = ''
+    const {
+        title,
+        titleTag = 'span',
+        className,
+        children
+    }: SvelteTimelineItemProps = $props()
 
     const classes = classNames([
         styles.item,
@@ -21,5 +24,5 @@
             {title}
         </svelte:element>
     {/if}
-    <slot />
+    {@render children?.()}
 </li>

package/components/TimelineItem/timelineitem.ts

@@ -1,9 +1,15 @@
+import type { Snippet } from 'svelte'
+
 export type TimelineItemProps = {
     title?: string
     titleTag?: string
     className?: string
 }
 
+export type SvelteTimelineItemProps = {
+    children: Snippet
+} & TimelineItemProps
+
 export type ReactTimelineItemProps = {
     TitleTag?: keyof JSX.IntrinsicElements
     children: React.ReactNode

package/components/Toast/Toast.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ToastProps } from './toast'
+    import type { SvelteToastProps } from './toast'
 
     import Alert from '../Alert/Alert.svelte'
 
@@ -7,8 +7,13 @@
 
     import styles from './toast.module.scss'
 
-    export let position: ToastProps['position'] = null
-    export let className: ToastProps['className'] = ''
+    const {
+        position,
+        className,
+        icon,
+        children,
+        ...rest
+    }: SvelteToastProps = $props()
 
     const classes = classNames([
         styles.toast,
@@ -24,16 +29,19 @@
             'data-id': 'body'
         }
     }
+
+    const iconRender = $derived(icon)
 </script>
 
-{#if $$slots.icon}
-    <Alert {...$$restProps} className={classes} {...additionalProps}>
-        <slot slot="icon" name="icon" />
-        <slot />
+{#if icon}
+    <Alert {...rest} className={classes} {...additionalProps}>
+        {#snippet icon()}
+            {@render iconRender?.()}
+        {/snippet}
+        {@render children?.()}
     </Alert>
 {:else}
-    <Alert {...$$restProps} className={classes} {...additionalProps}>
-        <slot />
+    <Alert {...rest} className={classes} {...additionalProps}>
+        {@render children?.()}
     </Alert>
 {/if}
-

package/components/Toast/toast.ts

@@ -1,4 +1,8 @@
-import type { AlertProps, ReactAlertProps } from '../Alert/alert'
+import type {
+    AlertProps,
+    ReactAlertProps,
+    SvelteAlertProps
+} from '../Alert/alert'
 
 export type ToastProps = {
     position?: 'bottom-left'
@@ -10,4 +14,5 @@ export type ToastProps = {
     [key: string]: any
 } & AlertProps
 
+export type SvelteToastProps = ToastProps & SvelteAlertProps
 export type ReactToastProps = ToastProps & ReactAlertProps

package/icons/alert.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.48872 2.15394C7.48856 2.1541 7.48888 2.15378 7.48872 2.15394L2.15302 7.48964C1.99269 7.64997 1.93416 7.74684 1.9045 7.81776C1.87504 7.88818 1.84615 7.99973 1.84615 8.23015V15.7698C1.84615 15.9963 1.8732 16.1054 1.90221 16.1759C1.93113 16.2463 1.9898 16.3459 2.15425 16.5104L7.48964 21.847C7.48966 21.847 7.48961 21.847 7.48964 21.847C7.64992 22.0073 7.74685 22.0658 7.81776 22.0955C7.88818 22.125 7.99973 22.1538 8.23015 22.1538H15.7698C15.9964 22.1538 16.1061 22.1268 16.1771 22.0976C16.2477 22.0687 16.3471 22.0102 16.5104 21.847L21.847 16.5104C22.0073 16.35 22.0658 16.2532 22.0955 16.1822C22.125 16.1118 22.1538 16.0003 22.1538 15.7698V8.23015C22.1538 8.00362 22.1268 7.89393 22.0976 7.82287C22.0687 7.75228 22.0102 7.65286 21.847 7.48964L16.5104 2.15302C16.3471 1.9898 16.2477 1.9313 16.1771 1.90235C16.1061 1.87321 15.9964 1.84615 15.7698 1.84615H8.23015C8.0037 1.84615 7.89439 1.87319 7.82354 1.90227C7.75298 1.93123 7.65289 1.99031 7.48872 2.15394ZM7.12261 0.194349C7.48962 0.0437307 7.85846 0 8.23015 0H15.7698C16.1415 0 16.5105 0.0437121 16.8776 0.194263C17.2452 0.345007 17.5433 0.575125 17.8158 0.847594L23.1524 6.18421C23.4249 6.45668 23.655 6.75479 23.8057 7.12236C23.9563 7.48946 24 7.85853 24 8.23015V15.7698C24 16.1548 23.952 16.5282 23.7987 16.8947C23.6455 17.2607 23.4155 17.5527 23.1524 17.8158L17.8158 23.1524C17.5433 23.4249 17.2452 23.655 16.8776 23.8057C16.5105 23.9563 16.1415 24 15.7698 24H8.23015C7.84519 24 7.47182 23.952 7.10532 23.7987C6.73932 23.6455 6.44726 23.4155 6.18421 23.1524L0.848825 17.8158C0.8488 17.8158 0.84885 17.8158 0.848825 17.8158C0.576388 17.5433 0.345783 17.2454 0.194714 16.8779C0.0437194 16.5106 0 16.1415 0 15.7698V8.23015C0 7.84519 0.0480391 7.47182 0.20135 7.10532C0.354452 6.73932 0.58454 6.44726 0.847594 6.18421L6.18513 0.846674C6.45759 0.574982 6.7554 0.345054 7.12261 0.194349ZM12 5.69477C12.5098 5.69477 12.9231 6.10804 12.9231 6.61785V13.3871C12.9231 13.8969 12.5098 14.3102 12 14.3102C11.4902 14.3102 11.0769 13.8969 11.0769 13.3871V6.61785C11.0769 6.10804 11.4902 5.69477 12 5.69477ZM12 15.8437C12.5098 15.8437 12.9231 16.257 12.9231 16.7668V17.3822C12.9231 17.892 12.5098 18.3052 12 18.3052C11.4902 18.3052 11.0769 17.892 11.0769 17.3822V16.7668C11.0769 16.257 11.4902 15.8437 12 15.8437Z" fill="currentColor"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6.65522V13.3774M12 17.3448V16.7337M6.87278 1.57322C7.30667 1.14056 7.66233 1 8.25633 1H15.7437C16.3377 1 16.6946 1.14056 17.1272 1.57322L22.4268 6.87278C22.8594 7.30544 23 7.66233 23 8.25633V15.7437C23 16.3548 22.8472 16.7068 22.4268 17.1272L17.1272 22.4268C16.6946 22.8594 16.3377 23 15.7437 23H8.25633C7.64522 23 7.29322 22.8472 6.87278 22.4268L1.57444 17.1272C1.14056 16.6933 1 16.3377 1 15.7437V8.25633C1 7.64522 1.15278 7.29322 1.57322 6.87278L6.87278 1.57322Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/check.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.086 2.4174C24.073 3.13011 24.2953 4.50795 23.5827 5.49488L13.0118 20.1331C13.012 20.1328 13.0116 20.1333 13.0118 20.1331C12.559 20.7606 11.9697 21.2786 11.2894 21.647C10.6088 22.0155 9.85351 22.2256 9.0803 22.2619C8.30708 22.298 7.53554 22.159 6.82355 21.8555C6.11169 21.552 5.4775 21.0918 4.9682 20.5092C4.96837 20.5094 4.96803 20.5089 4.9682 20.5092L0.544999 15.451C-0.256393 14.5348 -0.163144 13.1422 0.753251 12.3408C1.66965 11.5394 3.06219 11.6327 3.86356 12.549L8.28678 17.6071C8.35962 17.6905 8.4506 17.7566 8.55232 17.8001C8.65405 17.8435 8.76437 17.8633 8.8747 17.8581C8.98526 17.8528 9.09319 17.823 9.19038 17.7702C9.28757 17.7177 9.37163 17.6437 9.43634 17.5541L20.0087 2.91393C20.7212 1.92699 22.0991 1.7047 23.086 2.4174Z" fill="currentColor"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 14.927L3.94433 18.0266C5.56867 19.7367 6.38083 20.5899 7.29017 20.8599C8.0895 21.0957 8.94017 21.0327 9.701 20.6799C10.5682 20.2767 11.263 19.3101 12.6563 17.375L23 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6L12 17L23 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 1L6 12L17 23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 23L17 12L6 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 17L12 6L1 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>