@ims360/svelte-ivory 0.4.11 → 0.4.13

package/dist/components/basic/toggle/Toggle.svelte

@@ -18,7 +18,7 @@
 <svelte:element
     this={rest.onclick ? 'button' : 'div'}
     class={merge(
-        'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
+        'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors ',
         value ? 'bg-primary-500' : 'bg-surface-300-700',
         clazz
     )}

package/dist/components/inputs/ColorInput.svelte

@@ -7,9 +7,7 @@
 
 <Input {...props}>
     {#snippet children({ id, class: inputClass })}
-        <div
-            class={merge([inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0'])}
-        >
+        <div class={merge(inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0')}>
             <input
                 type="text"
                 bind:value={props.form.value, props.form.set}

package/dist/components/inputs/Input.svelte

@@ -65,19 +65,19 @@
             'group flex h-full grow flex-col overflow-hidden rounded border-2',
             hasIssues
                 ? 'bg-error-500/20 border-error-500'
-                : 'focus-within:border-primary-500 focus-within:hover:border-primary-500 border-surface-300-700/25 hover:border-surface-300-700/50 transition-[border-color] duration-300',
+                : 'focus-within:border-primary-500 focus-within:hover:border-primary-500 border-surface-300-700/25 hover:border-surface-300-700/50 transition-[border-color]',
             theme.current.input?.class?.(hasValue, hasIssues)
         )}
     >
         {@render children({ class: inputClass, id, ...inputProps })}
         {#if label}
             <label
-                class={merge([
+                class={merge(
                     'pointer-events-none absolute cursor-text px-1 transition-all select-none group-focus-within:top-0 group-focus-within:left-0 group-focus-within:text-sm focus:cursor-default',
                     hasValue ? 'top-0 left-0 cursor-default text-sm' : 'top-10 left-3',
                     hasIssues ? 'text-error-500' : 'text-surface-700-300',
                     theme.current.input?.label?.class?.(hasValue, hasIssues)
-                ])}
+                )}
                 for={id}
             >
                 {label}

package/dist/components/layout/dialog/Dialog.svelte

@@ -2,7 +2,6 @@
     import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
     import { merge } from '../../../utils/functions';
-    import { onMount, tick } from 'svelte';
     import type { MouseEventHandler } from 'svelte/elements';
 
     export interface DialogProps extends IvoryComponent<HTMLElement> {
@@ -14,49 +13,43 @@
 <script lang="ts">
     let {
         class: clazz,
-        onclose: close, // This is the prop from the parent
+        onclose: onclose, // This is the prop from the parent
         children,
         ...rest
     }: DialogProps = $props();
 
     let dialog = $state<HTMLDialogElement>();
 
-    /**
-     * This function "requests" a close.
-     * It tries to stop the native close and lets the parent decide.
-     */
-    async function requestClose(event: Event) {
-        event.preventDefault(); // Stop the native close
-        event.stopPropagation();
-        close?.(); // Ask the parent to close
-        await tick();
-        await tick();
+    let currentlyOpen = $state(false);
+
+    export const open = () => {
         dialog?.showModal();
-    }
+        currentlyOpen = true;
+    };
 
-    onMount(() => {
-        if (dialog && !dialog.open) {
-            dialog.showModal();
-        }
-        return () => {
-            if (dialog && dialog.open) {
-                dialog.close();
-            }
-        };
-    });
+    export const isOpen = () => currentlyOpen;
+
+    export const close = () => {
+        dialog?.close();
+        currentlyOpen = false;
+    };
 
     const handleBackdropClick: MouseEventHandler<HTMLElement> = (event) => {
-        if (event.target === dialog) {
-            requestClose(event);
-        }
+        if (event.target !== dialog) return;
+        onclose?.();
+    };
+
+    const handleClose = () => {
+        onclose?.();
+        currentlyOpen = false;
     };
 </script>
 
 <dialog
     bind:this={dialog}
     onclick={handleBackdropClick}
-    oncancel={requestClose}
-    onclose={close}
+    oncancel={handleClose}
+    onclose={handleClose}
     class={merge(
         'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full overflow-hidden bg-transparent',
         theme.current.dialog?.class,
@@ -68,12 +61,34 @@
 </dialog>
 
 <style>
+    dialog {
+        transition:
+            display var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            overlay var(--tw-duration, var(--default-transition-duration)) allow-discrete;
+    }
+
+    /* Dialog backdrop fade-in animation */
     dialog::backdrop {
-        animation: fade-in 200ms ease-out;
+        opacity: 0;
+        transition:
+            display var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            overlay var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            opacity var(--tw-duration, var(--default-transition-duration))
+                cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    dialog[open]::backdrop {
+        opacity: 1;
     }
-    @keyframes fade-in {
-        from {
+
+    /* Starting style for entry animation */
+    @starting-style {
+        dialog[open]::backdrop {
             opacity: 0;
         }
     }
+
+    dialog:not([open]):not(:popover-open) {
+        display: none !important;
+    }
 </style>

package/dist/components/layout/dialog/Dialog.svelte.d.ts

@@ -3,7 +3,11 @@ export interface DialogProps extends IvoryComponent<HTMLElement> {
     /** Gets called when the dialog requests to close (Escape, backdrop click) */
     onclose?: () => void;
 }
-declare const Dialog: import("svelte").Component<DialogProps, {}, "">;
+declare const Dialog: import("svelte").Component<DialogProps, {
+    open: () => void;
+    isOpen: () => boolean;
+    close: () => void;
+}, "">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;
 //# sourceMappingURL=Dialog.svelte.d.ts.map

package/dist/components/layout/dialog/Dialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKjD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAyDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAmDL,QAAA,MAAM,MAAM;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/drawer/Drawer.svelte

@@ -1,15 +1,13 @@
 <script lang="ts" module>
-    import type { TransitionProps } from '../../../types';
     import { merge } from '../../../utils/functions';
     import { X } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
-    import { fly } from 'svelte/transition';
     import Heading from '../Heading.svelte';
     import { Dialog } from '../dialog';
 
     export type DrawerPlacement = 'left' | 'right';
 
-    export type DrawerProps = TransitionProps & {
+    export type DrawerProps = {
         class?: string;
         title?: string | Snippet;
         children: Snippet;
@@ -27,69 +25,80 @@
         title,
         placement = 'right',
         closeOnOutsideClick = true,
-        inTransition = (e) =>
-            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
-        outTransition = (e) =>
-            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
         inner,
         ...rest
     }: DrawerProps = $props();
 
-    let currentlyOpen = $state(false);
-    export function close() {
-        currentlyOpen = false;
-    }
+    let dialog = $state<Dialog>();
 
-    export function open() {
-        currentlyOpen = true;
-    }
+    export const close = () => dialog?.close();
 
-    export function toggle() {
-        currentlyOpen = !currentlyOpen;
-    }
+    export const open = () => dialog?.open();
 
-    export function isOpen() {
-        return currentlyOpen;
-    }
+    export const isOpen = () => dialog?.isOpen();
+
+    export const toggle = () => {
+        if (isOpen()) close();
+        else open();
+    };
 </script>
 
-{#if currentlyOpen}
-    <Dialog
-        onclose={() => {
-            if (closeOnOutsideClick) close();
-        }}
-        class={[
-            'flex flex-row justify-start overflow-visible',
-            placement === 'left' && '',
-            placement === 'right' && 'justify-end'
-        ]}
+<Dialog
+    bind:this={dialog}
+    onclose={() => {
+        if (closeOnOutsideClick) close();
+    }}
+    class={['flex flex-row justify-start overflow-visible', placement === 'right' && 'justify-end']}
+>
+    <div
+        data-placement={placement}
+        class={merge(
+            'drawer bg-surface-50-950 flex h-full flex-col gap-4 p-4 transition-transform ease-in-out',
+            clazz
+        )}
+        onclick={(e) => e.stopPropagation()}
+        {...rest}
     >
-        <div
-            class={merge(['bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz])}
-            onclick={(e) => e.stopPropagation()}
-            in:inTransition|global
-            out:outTransition|global
-            {...rest}
-        >
-            {#if inner}
-                {@render inner()}
-            {:else}
-                <div class="flex flex-row items-center justify-between gap-8">
-                    {#if title}
-                        <Heading class="flex grow flex-row items-center gap-4">
-                            {#if typeof title === 'function'}
-                                {@render title()}
-                            {:else}
-                                {title}
-                            {/if}
-                        </Heading>
-                    {/if}
-                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
-                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
-                    </button>
-                </div>
-                {@render children()}
-            {/if}
-        </div>
-    </Dialog>
-{/if}
+        {#if inner}
+            {@render inner()}
+        {:else}
+            <div class="flex flex-row items-center justify-between gap-8">
+                {#if title}
+                    <Heading class="flex grow flex-row items-center gap-4">
+                        {#if typeof title === 'function'}
+                            {@render title()}
+                        {:else}
+                            {title}
+                        {/if}
+                    </Heading>
+                {/if}
+                <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                    <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
+                </button>
+            </div>
+            {@render children()}
+        {/if}
+    </div>
+</Dialog>
+
+<style>
+    .drawer[data-placement='right'] {
+        transform: translateX(100%);
+    }
+    .drawer[data-placement='left'] {
+        transform: translateX(-100%);
+    }
+
+    :global(dialog[open]) .drawer {
+        transform: translateX(0);
+    }
+
+    @starting-style {
+        :global(dialog[open]) .drawer[data-placement='right'] {
+            transform: translateX(100%);
+        }
+        :global(dialog[open]) .drawer[data-placement='left'] {
+            transform: translateX(-100%);
+        }
+    }
+</style>

package/dist/components/layout/drawer/Drawer.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { TransitionProps } from '../../../types';
 import type { Snippet } from 'svelte';
 export type DrawerPlacement = 'left' | 'right';
-export type DrawerProps = TransitionProps & {
+export type DrawerProps = {
     class?: string;
     title?: string | Snippet;
     children: Snippet;
@@ -11,10 +10,10 @@ export type DrawerProps = TransitionProps & {
     inner?: Snippet;
 };
 declare const Drawer: import("svelte").Component<DrawerProps, {
-    close: () => void;
-    open: () => void;
+    close: () => void | undefined;
+    open: () => void | undefined;
+    isOpen: () => boolean | undefined;
     toggle: () => void;
-    isOpen: () => boolean;
 }, "">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/components/layout/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAuEN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA8DN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/modal/Modal.svelte

@@ -1,17 +1,15 @@
 <script lang="ts" module>
     import type { Variant } from '../../..';
     import { theme } from '../../../theme.svelte';
-    import type { TransitionProps } from '../../../types';
     import { merge } from '../../../utils/functions';
     import { X } from '@lucide/svelte';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { scale } from 'svelte/transition';
     import { Heading } from '..';
     import { Dialog } from '../dialog';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export type ModalProps = TransitionProps & {
+    export type ModalProps = {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
         /** Class of the div wrapping the children */
@@ -45,32 +43,21 @@
         closeOnOutsideClick = true,
         variant,
         innerClass,
-        inTransition = (e) =>
-            scale(e, {
-                duration: 200,
-                start: 0.8
-            }),
-        outTransition = () => ({}),
         ...rest
     }: Props = $props();
 
-    let currentlyOpen = $state(false);
+    let dialog = $state<Dialog>();
 
-    export function close() {
-        currentlyOpen = false;
-    }
+    export const close = () => dialog?.close();
 
-    export function open() {
-        currentlyOpen = true;
-    }
+    export const open = () => dialog?.open();
 
-    export function toggle() {
-        currentlyOpen = !currentlyOpen;
-    }
+    export const isOpen = () => dialog?.isOpen();
 
-    export function isOpen() {
-        return currentlyOpen;
-    }
+    export const toggle = () => {
+        if (isOpen()) close();
+        else open();
+    };
 
     const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
         e.stopPropagation();
@@ -82,68 +69,81 @@
 	@component
 	A modal, comes with a title, close button and different variants per default.
 -->
-{#if currentlyOpen}
-    <Dialog
-        onclose={() => {
-            if (closeOnOutsideClick) close();
-        }}
-        class={merge(
-            'flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16',
-            theme.current.modal?.dialog?.class
-        )}
-    >
-        {#if modal}
-            <div {...rest} {onclick}>
-                {@render modal()}
+<Dialog
+    bind:this={dialog}
+    onclose={() => {
+        if (closeOnOutsideClick) close();
+    }}
+    class={merge('flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16')}
+>
+    {#if modal}
+        <div {...rest} {onclick} class="modal-content transition-all ease-in-out">
+            {@render modal()}
+        </div>
+    {:else}
+        <div
+            class={merge(
+                'modal-content bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded transition-all ease-in-out',
+                theme.current.modal?.class,
+                clazz
+            )}
+            {...rest}
+            {onclick}
+        >
+            <div
+                class={[
+                    'flex flex-row items-center justify-between gap-4 px-4 py-3',
+                    !variant && 'pb-0',
+                    variant === 'primary' && 'preset-tonal-primary',
+                    variant === 'secondary' && 'preset-tonal-secondary',
+                    variant === 'tertiary' && 'preset-tonal-tertiary',
+                    variant === 'success' && 'preset-tonal-success',
+                    variant === 'warning' && 'preset-tonal-warning',
+                    variant === 'error' && 'preset-tonal-error',
+                    variant === 'surface' && 'preset-tonal-surface'
+                ]}
+            >
+                {#if title}
+                    <Heading class="flex grow flex-row items-center gap-4">
+                        {#if typeof title === 'function'}
+                            {@render title()}
+                        {:else}
+                            {title}
+                        {/if}
+                    </Heading>
+                {/if}
+                <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                    <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
+                </button>
             </div>
-        {:else}
             <div
-                class={merge([
-                    'bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded',
-                    theme.current.modal?.class,
-                    clazz
-                ])}
-                {...rest}
-                {onclick}
-                in:inTransition|global
-                out:outTransition|global
+                class={merge(
+                    'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                    theme.current.modal?.innerClass,
+                    innerClass
+                )}
             >
-                <div
-                    class={[
-                        'flex flex-row items-center justify-between gap-4 px-4 py-3',
-                        !variant && 'pb-0',
-                        variant === 'primary' && 'preset-tonal-primary',
-                        variant === 'secondary' && 'preset-tonal-secondary',
-                        variant === 'tertiary' && 'preset-tonal-tertiary',
-                        variant === 'success' && 'preset-tonal-success',
-                        variant === 'warning' && 'preset-tonal-warning',
-                        variant === 'error' && 'preset-tonal-error',
-                        variant === 'surface' && 'preset-tonal-surface'
-                    ]}
-                >
-                    {#if title}
-                        <Heading class="flex grow flex-row items-center gap-4">
-                            {#if typeof title === 'function'}
-                                {@render title()}
-                            {:else}
-                                {title}
-                            {/if}
-                        </Heading>
-                    {/if}
-                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
-                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
-                    </button>
-                </div>
-                <div
-                    class={merge(
-                        'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
-                        theme.current.modal?.innerClass,
-                        innerClass
-                    )}
-                >
-                    {@render children?.()}
-                </div>
+                {@render children?.()}
             </div>
-        {/if}
-    </Dialog>
-{/if}
+        </div>
+    {/if}
+</Dialog>
+
+<style>
+    .modal-content {
+        opacity: 0;
+        transform: scale(0.97);
+    }
+
+    :global(dialog[open]) .modal-content {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    @starting-style {
+        :global(dialog[open]) .modal-content {
+            opacity: 0;
+            transform: scale(0.97);
+        }
+    }
+</style>

package/dist/components/layout/modal/Modal.svelte.d.ts

@@ -1,9 +1,8 @@
 import type { Variant } from '../../..';
-import type { TransitionProps } from '../../../types';
 import { type Snippet } from 'svelte';
 import type { ClassValue, MouseEventHandler } from 'svelte/elements';
 /** Props for the modal, expose if you overwrite the defaults in a custom component */
-export type ModalProps = TransitionProps & {
+export type ModalProps = {
     /** Class of the modal itself, does not apply to the inner div */
     class?: ClassValue;
     /** Class of the div wrapping the children */
@@ -27,10 +26,10 @@ interface Props extends ModalProps {
 }
 /** A modal, comes with a title, close button and different variants per default. */
 declare const Modal: import("svelte").Component<Props, {
-    close: () => void;
-    open: () => void;
+    close: () => void | undefined;
+    open: () => void | undefined;
+    isOpen: () => boolean | undefined;
     toggle: () => void;
-    isOpen: () => boolean;
 }, "">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/components/layout/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAuGL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAIpC,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAyFL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/layout/popover/Popover.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
     import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
-    import { pseudoRandomId } from '../../../utils/functions';
-    import clsx from 'clsx';
-    import { twMerge } from 'tailwind-merge';
+    import { merge, pseudoRandomId } from '../../../utils/functions';
 
     /** Possible placements for the popover */
     export type PopoverPlacement =
@@ -177,7 +175,7 @@
     bind:this={popoverEl}
     style="{style} {externalStyle}"
     {popover}
-    class={twMerge(clsx('bg-transparent', theme.current.popover?.class, clazz))}
+    class={merge('bg-transparent not-open:hidden!', theme.current.popover?.class, clazz)}
     {...rest}
 >
     {@render children?.()}

package/dist/components/layout/popover/Popover.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAmJL,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAmJL,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/table/Column.svelte

@@ -73,10 +73,10 @@
     onclick={finalOnClick}
     href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
-    class={merge([
+    class={merge(
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
         column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
         theme.current.table?.column?.class,
         clazz
-    ])}
+    )}
 />

package/dist/components/table/Table.svelte

@@ -200,11 +200,11 @@
     bind:this={list}
     bind:b_scrollTop
     data={results.entries}
-    class={merge([
+    class={merge(
         'flex flex-col overflow-hidden border-transparent',
         theme.current.table?.class,
         clazz
-    ])}
+    )}
     rowClass={merge('pl-2 pr-4', theme.current.table?.row?.class, rowClass)}
     {rowHeight}
 >