@streamscloud/kit 0.0.1-1770364570820 → 0.0.1-1770761136792

package/dist/ui/dialog/cmp.dialog-container.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { DialogData } from './dialog-data';
+declare function $$render<TResult = void, TCancelResult = void, TData = void>(): {
+    props: {
+        dialog: DialogData<TResult, TCancelResult, TData>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TResult = void, TCancelResult = void, TData = void> {
+    props(): ReturnType<typeof $$render<TResult, TCancelResult, TData>>['props'];
+    events(): ReturnType<typeof $$render<TResult, TCancelResult, TData>>['events'];
+    slots(): ReturnType<typeof $$render<TResult, TCancelResult, TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TResult = void, TCancelResult = void, TData = void>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['props']>, ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['events']>, ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['exports']>;
+    <TResult = void, TCancelResult = void, TData = void>(internal: unknown, props: ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['props']> & {}): ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<TResult = void, TCancelResult = void, TData = void> = InstanceType<typeof Cmp<TResult, TCancelResult, TData>>;
+export default Cmp;

package/dist/ui/dialog/cmp.dialog.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" generics="TResult = void, TCancelResult = void">import { default as DialogCloseButton } from './cmp.dialog-close-button.svelte';
+let { controller, hideCloseButton = false, title, body, footer, headerSection, bodySection, footerSection } = $props();
+const showCloseButton = $derived(!hideCloseButton && !controller.settings.nonCancelable);
+</script>
+
+<div class="dialog">
+  {#if headerSection}
+    {@render headerSection()}
+  {:else if title || showCloseButton}
+    <div class="dialog__header">
+      {#if title}
+        <div class="dialog__title">
+          {@render title()}
+        </div>
+      {/if}
+      {#if showCloseButton}
+        <DialogCloseButton controller={controller} />
+      {/if}
+    </div>
+  {/if}
+
+  {#if bodySection}
+    {@render bodySection()}
+  {:else if body}
+    <div class="dialog__body">
+      {@render body()}
+    </div>
+  {/if}
+
+  {#if footerSection}
+    {@render footerSection()}
+  {:else if footer}
+    <div class="dialog__footer">
+      {@render footer()}
+    </div>
+  {/if}
+</div>
+
+<style>.dialog {
+  --_dialog--background: var(--dialog--background, light-dark(#fff, #000));
+  --_dialog--border-color: var(--dialog--border-color, light-dark(#f2f2f3, #1e1e1e));
+  --_dialog--border-radius: var(--dialog--border-radius, 0.5rem);
+  --_dialog--color: var(--dialog--color, light-dark(#000, #fff));
+  --_dialog--shadow-color: var(--dialog--shadow-color, light-dark(#2f2b431a, #ffffff1a));
+  --_dialog--height: var(--dialog--height, auto);
+  --_dialog--max-height: var(--dialog--max-height, none);
+  --_dialog--min-height: var(--dialog--min-height, auto);
+  --_dialog--padding-block: var(--dialog--padding-block, 1.25rem);
+  --_dialog--padding-inline: var(--dialog--padding-inline, 1.5rem);
+  --_dialog--body--padding-block: var(--dialog--body--padding-block, var(--_dialog--padding-block));
+  --_dialog--body--padding-inline: var(--dialog--body--padding-inline, var(--_dialog--padding-inline));
+  --_dialog--header--padding-block: var(--dialog--header--padding-block, var(--_dialog--padding-block));
+  --_dialog--header--padding-inline: var(--dialog--header--padding-inline, var(--_dialog--padding-inline));
+  display: flex;
+  flex-direction: column;
+  height: var(--_dialog--height);
+  min-height: var(--_dialog--min-height);
+  max-height: var(--_dialog--max-height);
+  background: var(--_dialog--background);
+  color: var(--_dialog--color);
+  border-radius: var(--_dialog--border-radius);
+  box-shadow: 0 4px 24px var(--_dialog--shadow-color);
+}
+.dialog__header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: var(--_dialog--header--padding-block) var(--_dialog--header--padding-inline);
+  border-bottom: 1px solid var(--_dialog--border-color);
+}
+.dialog__title {
+  flex: 1;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.dialog__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--_dialog--body--padding-block) var(--_dialog--body--padding-inline);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.dialog__body::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.dialog__body::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.dialog__body::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .dialog__body {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.dialog__footer {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: var(--_dialog--padding-block) var(--_dialog--padding-inline);
+  border-top: 1px solid var(--_dialog--border-color);
+}</style>

package/dist/ui/dialog/cmp.dialog.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { DialogController } from './dialog-controller';
+import type { Snippet } from 'svelte';
+declare function $$render<TResult = void, TCancelResult = void>(): {
+    props: {
+        controller: DialogController<TResult, TCancelResult>;
+        hideCloseButton?: boolean;
+        title?: Snippet;
+        body?: Snippet;
+        footer?: Snippet;
+        headerSection?: Snippet;
+        bodySection?: Snippet;
+        footerSection?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TResult = void, TCancelResult = void> {
+    props(): ReturnType<typeof $$render<TResult, TCancelResult>>['props'];
+    events(): ReturnType<typeof $$render<TResult, TCancelResult>>['events'];
+    slots(): ReturnType<typeof $$render<TResult, TCancelResult>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TResult = void, TCancelResult = void>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TResult, TCancelResult>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TResult, TCancelResult>['props']>, ReturnType<__sveltets_Render<TResult, TCancelResult>['events']>, ReturnType<__sveltets_Render<TResult, TCancelResult>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TResult, TCancelResult>['bindings']>;
+    } & ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
+    <TResult = void, TCancelResult = void>(internal: unknown, props: ReturnType<__sveltets_Render<TResult, TCancelResult>['props']> & {}): ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;
+export default Cmp;

package/dist/ui/dialog/dialog-controller.d.ts

@@ -0,0 +1,22 @@
+import { DialogContainerSettings, DialogSettings, type DialogResult } from './types.svelte';
+export declare class DialogController<TResult = void, TCancelResult = void> {
+    readonly dialogId: number;
+    settings: DialogSettings;
+    containerSettings: DialogContainerSettings;
+    private _onClose;
+    private _explicitSettings?;
+    private _explicitContainerSettings?;
+    private _closeDeferred;
+    private _isClosed;
+    constructor(init: {
+        id: number;
+        onClose: () => void;
+        settings?: Partial<DialogSettings>;
+        containerSettings?: Partial<DialogContainerSettings>;
+    });
+    get openedPromise(): Promise<DialogResult<TResult, TCancelResult>>;
+    ok: (result: TResult) => void;
+    cancel: (result?: TCancelResult) => void;
+    updateSettings: (dialogSettings: Partial<DialogSettings>) => void;
+    updateContainerSettings: (settings: Partial<DialogContainerSettings>) => void;
+}

package/dist/ui/dialog/dialog-controller.js

@@ -0,0 +1,45 @@
+import { Deferred } from '../../core/deferred';
+import { DialogContainerSettings, DialogSettings } from './types.svelte';
+export class DialogController {
+    dialogId;
+    settings;
+    containerSettings;
+    _onClose;
+    _explicitSettings;
+    _explicitContainerSettings;
+    _closeDeferred = new Deferred();
+    _isClosed = false;
+    constructor(init) {
+        this.dialogId = init.id;
+        this._onClose = init.onClose;
+        this._explicitSettings = init.settings;
+        this._explicitContainerSettings = init.containerSettings;
+        this.settings = Object.assign(new DialogSettings(), init.settings);
+        this.containerSettings = Object.assign(new DialogContainerSettings(), init.containerSettings);
+    }
+    get openedPromise() {
+        return this._closeDeferred.promise;
+    }
+    ok = (result) => {
+        if (this._isClosed) {
+            return;
+        }
+        this._isClosed = true;
+        this._closeDeferred.resolve({ wasCanceled: false, value: result });
+        this._onClose();
+    };
+    cancel = (result) => {
+        if (this._isClosed || this.settings.nonCancelable) {
+            return;
+        }
+        this._isClosed = true;
+        this._closeDeferred.resolve({ wasCanceled: true, cancelValue: result });
+        this._onClose();
+    };
+    updateSettings = (dialogSettings) => {
+        Object.assign(this.settings, dialogSettings, this._explicitSettings);
+    };
+    updateContainerSettings = (settings) => {
+        Object.assign(this.containerSettings, settings, this._explicitContainerSettings);
+    };
+}

package/dist/ui/dialog/dialog-data.d.ts

@@ -0,0 +1,27 @@
+import type { DialogController } from './dialog-controller';
+import type { DialogContainerSettings, DialogSettings } from './types.svelte';
+import type { Component } from 'svelte';
+export type AnyDialogData = DialogData<any, any, any>;
+export type DialogData<TResult = void, TCancelResult = void, TData = void> = {
+    id: number;
+    view: DialogViewComponentType<TData, TResult, TCancelResult>;
+    data?: TData;
+    controller: DialogController<TResult, TCancelResult>;
+    hostElement?: HTMLElement;
+    component?: object;
+};
+type DialogViewWithData<TData, TResult, TCancelResult> = Component<{
+    data: TData;
+    controller: DialogController<TResult, TCancelResult>;
+}>;
+type DialogViewWithoutData<TResult, TCancelResult> = Component<{
+    controller: DialogController<TResult, TCancelResult>;
+}>;
+export type DialogViewComponentType<TData = void, TResult = void, TCancelResult = void> = TData extends void ? DialogViewWithoutData<TResult, TCancelResult> : DialogViewWithData<TData, TResult, TCancelResult>;
+export type DialogInit<TData = void, TResult = void, TCancelResult = void> = {
+    view: DialogViewComponentType<TData, TResult, TCancelResult>;
+    data?: TData;
+    explicitSettings?: Partial<DialogSettings>;
+    containerSettings?: Partial<DialogContainerSettings>;
+};
+export {};

package/dist/ui/dialog/dialog-data.js

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

package/dist/ui/dialog/dialog-mount.d.ts

@@ -0,0 +1,3 @@
+import type { AnyDialogData } from './dialog-data';
+export declare const mountDialog: (dialog: AnyDialogData) => void;
+export declare const unmountDialog: (dialog: AnyDialogData) => void;

package/dist/ui/dialog/dialog-mount.js

@@ -0,0 +1,19 @@
+import { default as DialogContainer } from './cmp.dialog-container.svelte';
+import { mount, unmount } from 'svelte';
+export const mountDialog = (dialog) => {
+    const hostElement = document.createElement('div');
+    hostElement.setAttribute('data-dialog-host', String(dialog.id));
+    document.body.appendChild(hostElement);
+    const component = mount(DialogContainer, {
+        target: hostElement,
+        props: { dialog }
+    });
+    dialog.hostElement = hostElement;
+    dialog.component = component;
+};
+export const unmountDialog = (dialog) => {
+    if (dialog.hostElement && dialog.component) {
+        unmount(dialog.component);
+        dialog.hostElement.remove();
+    }
+};

package/dist/ui/dialog/dialogs.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type AnyDialogData, type DialogInit } from './dialog-data';
+import { type DialogResult } from './types.svelte';
+export declare class DialogsContainer {
+    private _dialogs;
+    private _mountModule;
+    get all(): ReadonlyArray<AnyDialogData>;
+    get active(): AnyDialogData | null;
+    get count(): number;
+    open: <TData = void, TResult = void, TCancelResult = void>(init: DialogInit<TData, TResult, TCancelResult>, id?: number) => Promise<DialogResult<TResult, TCancelResult>>;
+    close: (id: number) => void;
+    closeAll: () => void;
+}
+export declare const Dialogs: DialogsContainer;

package/dist/ui/dialog/dialogs.svelte.js

@@ -0,0 +1,67 @@
+import { isBrowser } from '../../core/utils/browser';
+import { DialogController } from './dialog-controller';
+import {} from './dialog-data';
+import {} from './types.svelte';
+export class DialogsContainer {
+    _dialogs = $state.raw([]);
+    _mountModule = null;
+    get all() {
+        return this._dialogs;
+    }
+    get active() {
+        return this._dialogs.length > 0 ? this._dialogs[this._dialogs.length - 1] : null;
+    }
+    get count() {
+        return this._dialogs.length;
+    }
+    open = async (init, id = Math.random()) => {
+        if (!this._mountModule) {
+            this._mountModule = await import('./dialog-mount');
+        }
+        const { view, data, explicitSettings, containerSettings } = init;
+        const controller = new DialogController({
+            id,
+            onClose: () => {
+                const dialog = this._dialogs.find((d) => d.id === id);
+                if (dialog) {
+                    this._mountModule?.unmountDialog(dialog);
+                    this._dialogs = this._dialogs.filter((d) => d.id !== id);
+                }
+            },
+            settings: explicitSettings,
+            containerSettings
+        });
+        const newDialog = {
+            id,
+            view,
+            data,
+            controller
+        };
+        this._dialogs = [...this._dialogs, newDialog];
+        this._mountModule.mountDialog(newDialog);
+        return controller.openedPromise;
+    };
+    close = (id) => {
+        const dialog = this._dialogs.find((d) => d.id === id);
+        if (dialog) {
+            dialog.controller.cancel();
+        }
+    };
+    closeAll = () => {
+        const dialogsCopy = [...this._dialogs].reverse();
+        for (const dialog of dialogsCopy) {
+            dialog.controller.cancel();
+        }
+    };
+}
+const createDialogsSingleton = () => {
+    if (!isBrowser()) {
+        return new DialogsContainer();
+    }
+    // Use Vite's HMR data to preserve instance across hot reloads
+    if (import.meta.hot) {
+        return (import.meta.hot.data.dialogs ??= new DialogsContainer());
+    }
+    return new DialogsContainer();
+};
+export const Dialogs = createDialogsSingleton();

package/dist/ui/dialog/index.d.ts

@@ -0,0 +1,8 @@
+export { Dialogs } from './dialogs.svelte';
+export { DialogController } from './dialog-controller';
+export { DialogSize, DialogPosition, type DialogResult } from './types.svelte';
+export { default as Dialog } from './cmp.dialog.svelte';
+export { default as DialogButton } from './cmp.dialog-button.svelte';
+export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';
+export { default as DialogCloseButton } from './cmp.dialog-close-button.svelte';
+export type { ButtonVariant } from '../button/resources/types';

package/dist/ui/dialog/index.js

@@ -0,0 +1,7 @@
+export { Dialogs } from './dialogs.svelte';
+export { DialogController } from './dialog-controller';
+export { DialogSize, DialogPosition } from './types.svelte';
+export { default as Dialog } from './cmp.dialog.svelte';
+export { default as DialogButton } from './cmp.dialog-button.svelte';
+export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';
+export { default as DialogCloseButton } from './cmp.dialog-close-button.svelte';

package/dist/ui/dialog/types.svelte.d.ts

@@ -0,0 +1,30 @@
+export declare enum DialogSize {
+    Small = "small",
+    Medium = "medium",
+    Default = "default",
+    Large = "large",
+    FullHD = "fullhd",
+    Auto = "auto"
+}
+export declare enum DialogPosition {
+    Center = "center",
+    CenterTop = "center-top",
+    FullScreen = "full-screen",
+    FullHeight = "full-height"
+}
+export declare class DialogSettings {
+    closeOnClickOutside: boolean;
+    closeOnEsc: boolean;
+    nonCancelable: boolean;
+}
+export declare class DialogContainerSettings {
+    size: DialogSize | string;
+    position: DialogPosition;
+}
+export type DialogResult<TResult, TCancelResult = void> = {
+    wasCanceled: false;
+    value: TResult;
+} | {
+    wasCanceled: true;
+    cancelValue?: TCancelResult;
+};

package/dist/ui/dialog/types.svelte.js

@@ -0,0 +1,25 @@
+export var DialogSize;
+(function (DialogSize) {
+    DialogSize["Small"] = "small";
+    DialogSize["Medium"] = "medium";
+    DialogSize["Default"] = "default";
+    DialogSize["Large"] = "large";
+    DialogSize["FullHD"] = "fullhd";
+    DialogSize["Auto"] = "auto";
+})(DialogSize || (DialogSize = {}));
+export var DialogPosition;
+(function (DialogPosition) {
+    DialogPosition["Center"] = "center";
+    DialogPosition["CenterTop"] = "center-top";
+    DialogPosition["FullScreen"] = "full-screen";
+    DialogPosition["FullHeight"] = "full-height";
+})(DialogPosition || (DialogPosition = {}));
+export class DialogSettings {
+    closeOnClickOutside = $state(false);
+    closeOnEsc = $state(false);
+    nonCancelable = $state(false);
+}
+export class DialogContainerSettings {
+    size = $state(DialogSize.Default);
+    position = $state(DialogPosition.CenterTop);
+}

package/dist/ui/icon/cmp.icon.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">import { HtmlHelper } from '../../core/utils/html-helper';
+let { src, color = null } = $props();
+</script>
+
+{#if src?.startsWith('<svg')}
+  <div
+    class="icon"
+    class:icon--white={color === 'white'}
+    class:icon--text={color === 'text'}
+    class:icon--gray={color === 'gray'}
+    class:icon--green={color === 'green'}
+    class:icon--red={color === 'red'}
+    class:icon--orange={color === 'orange'}
+    class:icon--blue={color === 'blue'}>
+    {@html HtmlHelper.sanitizeSvg(src)}
+  </div>
+{:else}
+  <i class="invalid-svg">Invalid SVG</i>
+{/if}
+
+<style>.icon {
+  --_icon--color: var(--icon--color);
+  --_icon--color-blue: var(--icon--color-blue, light-dark(#3b82f6, #60a5fa));
+  --_icon--color-gray: var(--icon--color-gray, #737373);
+  --_icon--color-green: var(--icon--color-green, #22c55e);
+  --_icon--color-orange: var(--icon--color-orange, #f97316);
+  --_icon--color-red: var(--icon--color-red, #ef4444);
+  --_icon--color-text: var(--icon--color-text, light-dark(#1f2937, #fff));
+  --_icon--color-white: var(--icon--color-white, #fff);
+  --_icon--filter: var(--icon--filter, none);
+  --_icon--size: var(--icon--size, 1.25rem);
+  --_icon--stroke-width: var(--icon--stroke-width, 0);
+  display: contents;
+}
+.icon--white {
+  --_icon--color: var(--_icon--color-white);
+}
+.icon--text {
+  --_icon--color: var(--_icon--color-text);
+}
+.icon--gray {
+  --_icon--color: var(--_icon--color-gray);
+}
+.icon--green {
+  --_icon--color: var(--_icon--color-green);
+}
+.icon--red {
+  --_icon--color: var(--_icon--color-red);
+}
+.icon--orange {
+  --_icon--color: var(--_icon--color-orange);
+}
+.icon--blue {
+  --_icon--color: var(--_icon--color-blue);
+}
+.icon :global(svg) {
+  display: inline-block;
+  color: inherit;
+  fill: var(--_icon--color, currentColor);
+  filter: var(--_icon--filter);
+  height: var(--_icon--size);
+  min-height: var(--_icon--size);
+  max-height: var(--_icon--size);
+  width: var(--_icon--size);
+  min-width: var(--_icon--size);
+  max-width: var(--_icon--size);
+}
+.icon :global(path) {
+  stroke: var(--_icon--color);
+  stroke-width: var(--_icon--stroke-width);
+}
+
+.invalid-svg {
+  font-size: 1em;
+  color: red;
+}</style>

package/dist/ui/icon/cmp.icon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from './types';
+interface Props {
+    src: string;
+    color?: IconColor | null;
+}
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './cmp.icon.svelte';
+export type { IconColor } from './types';

package/dist/ui/icon/index.js

@@ -0,0 +1 @@
+export { default as Icon } from './cmp.icon.svelte';

package/dist/ui/icon/types.d.ts

@@ -0,0 +1 @@
+export type IconColor = 'white' | 'blue' | 'green' | 'gray' | 'orange' | 'red' | 'text';

package/dist/ui/icon/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.0.1-1770364570820",
+  "version": "0.0.1-1770761136792",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -70,27 +70,62 @@
     "./core/toastr": {
       "types": "./dist/core/toastr/index.d.ts",
       "svelte": "./dist/core/toastr/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/ui/dialog/index.d.ts",
+      "svelte": "./dist/ui/dialog/index.js"
+    },
+    "./button": {
+      "types": "./dist/ui/button/index.d.ts",
+      "svelte": "./dist/ui/button/index.js"
+    },
+    "./icon": {
+      "types": "./dist/ui/icon/index.d.ts",
+      "svelte": "./dist/ui/icon/index.js"
+    },
+    "./styles/functions": {
+      "sass": "./dist/styles/_functions.scss"
+    },
+    "./styles/mixins": {
+      "sass": "./dist/styles/_mixins.scss"
+    },
+    "./styles/colors": {
+      "sass": "./dist/styles/_colors.scss"
+    },
+    "./styles/responsive": {
+      "sass": "./dist/styles/_responsive.scss"
+    },
+    "./styles/base": {
+      "sass": "./dist/styles/_index.scss"
+    },
+    "./styles/theme": {
+      "sass": "./dist/styles/_theme.scss"
     }
   },
   "peerDependencies": {
-    "@urql/core": "^6.0.1",
-    "dequal": "^2.0.3",
-    "dompurify": "^3.3.1",
+    "@fluentui/svg-icons": "^1.1.318",
+    "@popperjs/core": "^2.11.8",
+    "@urql/core": "^5.2.0",
+    "dequal": "^2.0.0",
+    "dompurify": "^3.3.0",
     "mime": "^4.1.0",
     "nanoid": "^5.1.6",
     "rfdc": "^1.4.1",
-    "svelte": "^5.33.4",
+    "svelte": "^5.49.2",
     "svelte-sonner": "^1.0.7",
     "yup": "^1.7.1"
   },
   "devDependencies": {
-    "@urql/core": "^6.0.1",
     "@eslint/compat": "^2.0.2",
     "@eslint/js": "^9.39.2",
+    "@fluentui/svg-icons": "^1.1.318",
+    "@popperjs/core": "^2.11.8",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tsconfig/svelte": "^5.0.7",
     "@types/dompurify": "^3.0.5",
+    "@types/node": "^25.2.2",
+    "@urql/core": "^6.0.1",
     "autoprefixer": "^10.4.24",
     "dequal": "^2.0.3",
     "dompurify": "^3.3.1",
@@ -114,8 +149,8 @@
     "sass": "^1.97.3",
     "svelte": "^5.49.2",
     "svelte-check": "^4.3.6",
-    "svelte-sonner": "^1.0.7",
     "svelte-preprocess": "^6.0.3",
+    "svelte-sonner": "^1.0.7",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",