@getmicdrop/svelte-components 2.3.0 → 2.4.0

package/dist/components/Input/Search.svelte

@@ -0,0 +1,173 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  // API compatible with flowbite-svelte Search
+  export let value = "";
+  export let placeholder = "Search";
+  export let size = "lg"; // sm, md, lg
+  export let disabled = false;
+  export let id = "";
+  export let name = "";
+
+  // Additional props
+  let className = "";
+  export { className as class };
+
+  const sizes = {
+    sm: { icon: "w-3.5 h-3.5", input: "h-8 text-xs pl-8", wrapper: "h-8" },
+    md: { icon: "w-4 h-4", input: "h-10 text-sm pl-9", wrapper: "h-10" },
+    lg: { icon: "w-5 h-5", input: "h-11 text-sm pl-10", wrapper: "h-11" }
+  };
+
+  $: sizeConfig = sizes[size] || sizes.lg;
+
+  function handleInput(event) {
+    value = event.target.value;
+    dispatch("input", event);
+  }
+
+  function handleChange(event) {
+    dispatch("change", event);
+  }
+
+  function handleKeydown(event) {
+    dispatch("keydown", event);
+  }
+
+  function handleKeyup(event) {
+    dispatch("keyup", event);
+  }
+
+  function handleFocus(event) {
+    dispatch("focus", event);
+  }
+
+  function handleBlur(event) {
+    dispatch("blur", event);
+  }
+</script>
+
+<div class="search-wrapper {sizeConfig.wrapper} {className}">
+  <div class="search-icon-wrapper">
+    <svg
+      class="search-icon {sizeConfig.icon}"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </div>
+  <input
+    type="search"
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    class="search-input {sizeConfig.input}"
+    bind:value
+    on:input={handleInput}
+    on:change={handleChange}
+    on:keydown={handleKeydown}
+    on:keyup={handleKeyup}
+    on:focus={handleFocus}
+    on:blur={handleBlur}
+    {...$$restProps}
+  />
+  {#if $$slots.default}
+    <div class="search-actions">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .search-wrapper {
+    --search-bg: #f9fafb;
+    --search-text: #0d1526;
+    --search-text-placeholder: #6b7280;
+    --search-border: #e5e7eb;
+    --search-focus-ring: #3b82f6;
+    --search-icon-color: #6b7280;
+    position: relative;
+    width: 100%;
+  }
+
+  .search-icon-wrapper {
+    position: absolute;
+    inset-y: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    padding-left: 0.75rem;
+    pointer-events: none;
+  }
+
+  .search-icon {
+    color: var(--search-icon-color);
+  }
+
+  .search-input {
+    width: 100%;
+    padding-right: 0.75rem;
+    background-color: var(--search-bg);
+    color: var(--search-text);
+    font-weight: 500;
+    border: 1px solid var(--search-border);
+    border-radius: 0.5rem;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .search-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--search-focus-ring);
+    border-color: var(--search-focus-ring);
+  }
+
+  .search-input:hover:not(:focus):not(:disabled) {
+    border-color: var(--search-focus-ring);
+  }
+
+  .search-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .search-input::-moz-placeholder {
+    color: var(--search-text-placeholder);
+  }
+
+  .search-input::placeholder {
+    color: var(--search-text-placeholder);
+  }
+
+  /* Hide browser's default clear button on search inputs */
+  .search-input::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .search-actions {
+    position: absolute;
+    inset-y: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    color: var(--search-icon-color);
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .search-wrapper {
+    --search-bg: #111827;
+    --search-text: #f7f7f8;
+    --search-text-placeholder: #9ca3af;
+    --search-border: #374151;
+    --search-icon-color: #9ca3af;
+  }
+</style>

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

@@ -0,0 +1,68 @@
+export default Search;
+type Search = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    size?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
+}, {
+    default: {};
+}>, {
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    keydown: CustomEvent<any>;
+    keyup: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Search: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    size?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
+}, {
+    default: {};
+}>, {
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    keydown: CustomEvent<any>;
+    keyup: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+} & {
+    [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=Search.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Search.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;eAAgM;sCAT1J,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/Input/Select.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -96,10 +96,9 @@
 
   onMount(() => {
     document.addEventListener("click", handleClickOutside);
-  });
-
-  onDestroy(() => {
-    document.removeEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
   });
 </script>
 

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

@@ -5,9 +5,9 @@ type Select = SvelteComponent<{
     value?: string | undefined;
     name?: string | undefined;
     label?: string | undefined;
+    id?: string | undefined;
     required?: boolean | undefined;
     placeholder?: string | undefined;
-    id?: string | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
 }, {
@@ -23,9 +23,9 @@ declare const Select: $$__sveltets_2_IsomorphicComponent<{
     value?: string | undefined;
     name?: string | undefined;
     label?: string | undefined;
+    id?: string | undefined;
     required?: boolean | undefined;
     placeholder?: string | undefined;
-    id?: string | 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":";;;;;;;;;;;;;;;;;;;AAoKA;;;;;;;;;;;;;;;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;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | 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;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | 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/Modal/InputModal.svelte

@@ -9,6 +9,7 @@
   export let title = "";
   export let description = "";
   export let closeBtn = false; // To show close button
+  export let persistent = false; // When true, prevents closing by clicking backdrop or pressing Escape
 
   // Input configuration
   export let inputLabel = "";
@@ -76,7 +77,7 @@
   }
 </script>
 
-<Modal bind:show {size}>
+<Modal bind:show {size} {persistent}>
   <div slot="header" class="text-left">
     {#if closeBtn}
       <div class="flex justify-end -mt-2 -mr-2 mb-2">

package/dist/components/Modal/InputModal.svelte.d.ts

@@ -5,6 +5,7 @@ type InputModal = SvelteComponent<{
     show?: boolean | undefined;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
+    persistent?: boolean | undefined;
     description?: string | undefined;
     closeBtn?: boolean | undefined;
     primaryButtonText?: string | undefined;
@@ -36,6 +37,7 @@ declare const InputModal: $$__sveltets_2_IsomorphicComponent<{
     show?: boolean | undefined;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
+    persistent?: boolean | undefined;
     description?: string | undefined;
     closeBtn?: boolean | undefined;
     primaryButtonText?: string | undefined;

package/dist/components/Modal/InputModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/InputModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAqZ;6CATxW,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":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/InputModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAka;6CATrX,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"}