@getmicdrop/svelte-components 2.6.3 → 2.8.0

package/dist/components/Input/Select.svelte

@@ -1,5 +1,13 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  /**
+   * Custom Select component - drop-in replacement for native select
+   *
+   * @fires change - Dispatched when selection changes
+   *   Event detail: { value: any, item: { name: string, value: any } }
+   *   Usage: on:change={(e) => handleChange(e.detail.value)}
+   *   Note: Use e.detail.value, NOT e.target.value (this is a custom component, not native select)
+   */
+  import { createEventDispatcher, onMount } from "svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -22,14 +30,27 @@
   let dropdownElement;
   let focusedIndex = -1;
 
+  // Unique ID for this Select instance to coordinate with other Selects
+  const instanceId = Math.random().toString(36).substring(2, 9);
+
   $: selectedItem = items.find((item) => item.value === value);
   $: displayText = selectedItem ? selectedItem.name : placeholder;
 
   function toggle() {
     if (disabled) return;
+    const wasOpen = isOpen;
     isOpen = !isOpen;
     if (isOpen) {
       focusedIndex = items.findIndex((item) => item.value === value);
+      // Dispatch custom event to close other Select dropdowns
+      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
+    }
+  }
+
+  // Listen for other Selects opening and close this one
+  function handleOtherSelectOpened(event) {
+    if (event.detail.instanceId !== instanceId && isOpen) {
+      close();
     }
   }
 
@@ -84,22 +105,31 @@
   }
 
   function handleClickOutside(event) {
-    if (
-      triggerElement &&
-      !triggerElement.contains(event.target) &&
-      dropdownElement &&
-      !dropdownElement.contains(event.target)
-    ) {
+    if (!isOpen) return;
+
+    // Check if click is outside the trigger button
+    const clickedOutsideTrigger =
+      triggerElement && !triggerElement.contains(event.target);
+
+    // Check if click is outside the dropdown (if it exists)
+    // dropdownElement may be null if dropdown just opened and hasn't rendered yet
+    const clickedOutsideDropdown =
+      !dropdownElement || !dropdownElement.contains(event.target);
+
+    if (clickedOutsideTrigger && clickedOutsideDropdown) {
       close();
     }
   }
 
   onMount(() => {
-    document.addEventListener("click", handleClickOutside);
-  });
-
-  onDestroy(() => {
-    document.removeEventListener("click", handleClickOutside);
+    // Use capture phase to ensure we get the event before it might be stopped
+    document.addEventListener("click", handleClickOutside, true);
+    // Listen for other Select components opening to close this one
+    window.addEventListener("select-opened", handleOtherSelectOpened);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+      window.removeEventListener("select-opened", handleOtherSelectOpened);
+    };
   });
 </script>
 

package/dist/components/Input/Select.svelte.d.ts

@@ -2,12 +2,12 @@ export default Select;
 type Select = SvelteComponent<{
     error?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: string | undefined;
     name?: string | undefined;
-    required?: boolean | undefined;
-    placeholder?: string | undefined;
+    label?: string | undefined;
     id?: string | undefined;
-    value?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
 }, {
@@ -20,12 +20,12 @@ type Select = SvelteComponent<{
 declare const Select: $$__sveltets_2_IsomorphicComponent<{
     error?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: string | undefined;
     name?: string | undefined;
-    required?: boolean | undefined;
-    placeholder?: string | undefined;
+    label?: string | undefined;
     id?: string | undefined;
-    value?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
 }, {

package/dist/components/Input/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Select.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAqKA;;;;;;;;;;;;;;;mBAAoN;6CATvK,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Select.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoMA;;;;;;;;;;;;;;;mBAAoN;6CATvK,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Input/Textarea.svelte

@@ -0,0 +1,160 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  // API compatible with flowbite-svelte Textarea
+  export let value = "";
+  export let placeholder = "";
+  export let rows = 4;
+  export let disabled = false;
+  export let required = false;
+  export let readonly = false;
+  export let id = "";
+  export let name = "";
+  export let label = "";
+  export let error = "";
+  export let maxlength = null;
+  export let minlength = null;
+
+  // Additional props
+  let className = "";
+  export { className as class };
+
+  function handleInput(event) {
+    value = event.target.value;
+    dispatch("input", { value });
+  }
+
+  function handleChange(event) {
+    dispatch("change", { value: event.target.value });
+  }
+
+  function handleBlur(event) {
+    dispatch("blur", event);
+  }
+
+  function handleFocus(event) {
+    dispatch("focus", event);
+  }
+</script>
+
+<div class="textarea-wrapper">
+  {#if label}
+    <label for={id || name} class="textarea-label">
+      {label}{#if required}<span class="textarea-required">*</span>{/if}
+    </label>
+  {/if}
+
+  <textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {minlength}
+    class="textarea-field {error ? 'textarea-error' : ''} {className}"
+    bind:value
+    on:input={handleInput}
+    on:change={handleChange}
+    on:blur={handleBlur}
+    on:focus={handleFocus}
+    on:keydown
+    on:keyup
+    on:keypress
+    aria-required={required}
+    aria-invalid={!!error}
+    {...$$restProps}
+  ></textarea>
+
+  {#if error}
+    <p class="textarea-error-text">{error}</p>
+  {/if}
+</div>
+
+<style>
+  .textarea-wrapper {
+    --textarea-bg: #f9fafb;
+    --textarea-text: #0d1526;
+    --textarea-text-placeholder: #6b7280;
+    --textarea-border: #e5e7eb;
+    --textarea-border-error: #ff6666;
+    --textarea-focus-ring: #3b82f6;
+    --textarea-label-text: #0d1526;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .textarea-label {
+    color: var(--textarea-label-text);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .textarea-required {
+    color: var(--textarea-border-error);
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin-left: 0.125rem;
+  }
+
+  .textarea-field {
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    background-color: var(--textarea-bg);
+    color: var(--textarea-text);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border: 1px solid var(--textarea-border);
+    border-radius: 0.5rem;
+    resize: vertical;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .textarea-field:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--textarea-focus-ring);
+    border-color: var(--textarea-focus-ring);
+  }
+
+  .textarea-field:hover:not(:focus):not(:disabled) {
+    border-color: var(--textarea-focus-ring);
+  }
+
+  .textarea-field:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .textarea-field::-moz-placeholder {
+    color: var(--textarea-text-placeholder);
+  }
+
+  .textarea-field::placeholder {
+    color: var(--textarea-text-placeholder);
+  }
+
+  .textarea-field.textarea-error {
+    border-color: var(--textarea-border-error);
+  }
+
+  .textarea-error-text {
+    margin: 0;
+    color: var(--textarea-border-error);
+    font-size: 0.875rem;
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .textarea-wrapper {
+    --textarea-bg: #111827;
+    --textarea-text: #f7f7f8;
+    --textarea-text-placeholder: #9ca3af;
+    --textarea-border: #374151;
+    --textarea-label-text: #f7f7f8;
+  }
+</style>

package/dist/components/Input/Textarea.svelte.d.ts

@@ -0,0 +1,69 @@
+export default Textarea;
+type Textarea = SvelteComponent<{
+    [x: string]: any;
+    class?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    readonly?: boolean | undefined;
+    rows?: number | undefined;
+}, {
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    focus: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    class?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    readonly?: boolean | undefined;
+    rows?: number | undefined;
+}, {
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    focus: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Textarea.svelte.d.ts.map

package/dist/components/Input/Textarea.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;;;;;;;;;;;;;;;;;;;;;;;;;mBAA0P;6CAT7M,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Label/Label.svelte

@@ -0,0 +1,60 @@
+<script>
+  // API compatible with flowbite-svelte Label
+  export let color = "gray";
+  export let defaultClass = "text-sm rtl:text-right font-medium block";
+  export let show = true;
+
+  // Additional props for convenience
+  let className = "";
+  export { className as class };
+
+  const colorClasses = {
+    gray: "label-gray",
+    green: "label-green",
+    red: "label-red",
+    disabled: "label-disabled"
+  };
+
+  $: labelClass = `label-wrapper ${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`;
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label {...$$restProps} class={labelClass}><slot /></label>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  .label-wrapper {
+    --label-text-gray: #111827;
+    --label-text-green: #047857;
+    --label-text-red: #dc2626;
+    --label-text-disabled: #9ca3af;
+  }
+
+  .label-gray {
+    color: var(--label-text-gray);
+  }
+
+  .label-green {
+    color: var(--label-text-green);
+  }
+
+  .label-red {
+    color: var(--label-text-red);
+  }
+
+  .label-disabled {
+    color: var(--label-text-disabled);
+    filter: grayscale(1) contrast(0.5);
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .label-wrapper {
+    --label-text-gray: #d1d5db;
+    --label-text-green: #34d399;
+    --label-text-red: #f87171;
+    --label-text-disabled: #6b7280;
+  }
+</style>

package/dist/components/Label/Label.svelte.d.ts

@@ -0,0 +1,48 @@
+export default Label;
+type Label = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    color?: string | undefined;
+    show?: boolean | undefined;
+    defaultClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Label: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    color?: string | undefined;
+    show?: boolean | undefined;
+    defaultClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Label.svelte.d.ts.map

package/dist/components/Label/Label.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Label/Label.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgDA;;;;;;;;;;;;eAAyK;sCATnI,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Layout/Header.svelte

@@ -79,7 +79,7 @@
           class="avatar-button"
           on:click={() => showDesktopDropdown = !showDesktopDropdown}
         >
-          <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+          <Avatar src={avatar} rounded size="md" />
         </button>
 
         {#if showDesktopDropdown}
@@ -137,7 +137,7 @@
     <div class="header-avatar-wrapper">
       <!-- Mobile: triggers bottom sheet -->
       <button class="avatar-button avatar-button--mobile" on:click={() => showMobileSheet = true}>
-        <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+        <Avatar src={avatar} rounded size="md" />
       </button>
 
       <!-- Desktop: triggers dropdown -->
@@ -145,7 +145,7 @@
         class="avatar-button avatar-button--desktop"
         on:click={() => showDesktopDropdown = !showDesktopDropdown}
       >
-        <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+        <Avatar src={avatar} rounded size="md" />
       </button>
 
       <!-- Desktop dropdown -->
@@ -294,13 +294,23 @@
     margin-left: 0.25rem;
   }
 
+  /* Fix avatar image aspect ratio and border radius */
+  :global(.avatar-button img) {
+    -o-object-fit: cover !important;
+       object-fit: cover !important;
+    aspect-ratio: 1 / 1 !important;
+    border-radius: 0.5rem !important;
+  }
+
   .avatar-button {
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
-    border-radius: 9999px;
+    border-radius: 0.5rem;
     transition: opacity 0.15s;
+    min-width: 40px;
+    min-height: 40px;
   }
 
   .avatar-button:hover {

package/dist/components/Layout/PageLayout.svelte

@@ -0,0 +1,64 @@
+<script>
+  import Breadcrumb from '../Breadcrumb/Breadcrumb.svelte';
+  import Card from '../Card.svelte';
+
+  /**
+   * Breadcrumb navigation data
+   * @type {Array<{name: string, href: string}>}
+   */
+  export let breadcrumb = [];
+
+  /**
+   * Page title displayed below breadcrumb
+   * @type {string}
+   */
+  export let title = '';
+
+  /**
+   * Subtitle displayed below title
+   * @type {string}
+   */
+  export let subtitle = '';
+
+  /**
+   * Layout variant
+   * - 'default': Content with standard padding, no wrapper
+   * - 'card': Content wrapped in Card component with max-width
+   * @type {'default' | 'card'}
+   */
+  export let variant = 'default';
+
+  /**
+   * Max width class for card variant (e.g., 'max-w-4xl', 'max-w-6xl')
+   * @type {string}
+   */
+  export let maxWidth = 'max-w-4xl';
+
+  /**
+   * Additional CSS classes for the content container
+   * @type {string}
+   */
+  export let className = '';
+
+  /**
+   * Whether to show the header (breadcrumb, title, subtitle)
+   * @type {boolean}
+   */
+  export let showHeader = true;
+</script>
+
+{#if showHeader}
+  <nav class="pt-4 px-4 text-text-primary text-lg font-semibold">
+    <Breadcrumb data={breadcrumb} {title} {subtitle} />
+  </nav>
+{/if}
+
+<div class="px-4 pb-20 md:pb-6 {className}">
+  {#if variant === 'card'}
+    <Card className="dark:bg-bg-primary {maxWidth}">
+      <slot />
+    </Card>
+  {:else}
+    <slot />
+  {/if}
+</div>

package/dist/components/Layout/PageLayout.svelte.d.ts

@@ -0,0 +1,58 @@
+export default PageLayout;
+type PageLayout = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string | undefined;
+    className?: string | undefined;
+    variant?: "default" | "card" | undefined;
+    subtitle?: string | undefined;
+    breadcrumb?: {
+        name: string;
+        href: string;
+    }[] | undefined;
+    maxWidth?: string | undefined;
+    showHeader?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const PageLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string | undefined;
+    className?: string | undefined;
+    variant?: "default" | "card" | undefined;
+    subtitle?: string | undefined;
+    breadcrumb?: {
+        name: string;
+        href: string;
+    }[] | undefined;
+    maxWidth?: string | undefined;
+    showHeader?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=PageLayout.svelte.d.ts.map

package/dist/components/Layout/PageLayout.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/PageLayout.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqHA;;;;;;cA1CyB,MAAM;cAAQ,MAAM;;;;;;;;;;eA0CgK;sCATvK,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}