@sierra-95/svelte-scaffold 1.0.1

package/dist/components/Core/others/Button/default/button.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	// @enable runes
+	import { CircularProgress } from '../../../../../index.js';
+
+  type _variant = 'contained' | 'outlined';
+  type _color = 'primary' | 'warning' | 'error';
+  type _buttonType = 'button' | 'submit' | 'reset';
+
+	const {
+		variant = 'contained' as _variant,
+		color = 'primary' as _color,
+    	type = 'button' as _buttonType,
+		title = '',
+		pill = false,
+		spinner = 20,
+		thickness = 2,
+		disabled = false,
+		isLoading = false,
+		html2canvas_ignore = 'false',
+		style = '',
+    	children = null,
+		...rest
+	} = $props();
+
+	const buttonClasses = $derived(() => {
+		let classes = 'base-btn';
+
+		if (variant) classes += ` btn-${variant}`;
+
+		if (variant === 'contained') {
+			classes += ` btn-contained-${color}`;
+		} else if (variant === 'outlined') {
+			classes += ` btn-outlined-${color}`;
+		}
+
+		if (style) classes += ` ${style}`;
+
+		return classes;
+	});
+</script>
+
+<style>.base-btn {
+  color: var(--button-text);
+  padding: 0.5rem 1rem; 
+  border-radius: 4px; 
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  min-width: 100px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 10px;
+}
+.base-btn:hover{
+  opacity: 0.8;
+}
+/*********Button Variants*************************/
+.btn-outlined {
+  border-width: 1px;
+  border-style: solid;
+}
+.btn-contained-primary {
+  background-color: var(--primary-bg);
+}
+.btn-contained-warning {
+  background-color: var(--warning-bg);
+}
+.btn-contained-error {
+  background-color: var(--error-bg);
+}
+.btn-outlined-primary {
+  border-color: var(--primary-bg);
+  color: var(--primary-bg);
+}
+.btn-outlined-warning {
+  border-color: var(--warning-bg);
+  color: var(--warning-bg);
+}
+.btn-outlined-error {
+  border-color: var(--error-bg);
+  color: var(--error-bg);
+}
+/*****Disabled********/
+.base-btn.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+/****Pill Button******/
+.base-btn.pill{
+  border-radius: 50%;
+  min-width: unset;
+}
+</style>
+
+<button
+	{...rest}
+	data-html2canvas-ignore={html2canvas_ignore}
+	class:pill={pill}
+	class:disabled={isLoading || disabled}
+	class={buttonClasses()}
+	disabled={isLoading || disabled}
+	type={type}
+	title={title}
+	onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}}
+>
+	{@render children?.()}
+	{#if isLoading}
+		<CircularProgress size={spinner} thickness={thickness} />
+	{/if}
+</button>

package/dist/components/Core/others/Button/default/button.svelte.d.ts

@@ -0,0 +1,16 @@
+declare const Button: import("svelte").Component<{
+    variant?: "contained" | "outlined";
+    color?: "primary" | "warning" | "error";
+    type?: "button" | "submit" | "reset";
+    title?: string;
+    pill?: boolean;
+    spinner?: number;
+    thickness?: number;
+    disabled?: boolean;
+    isLoading?: boolean;
+    html2canvas_ignore?: string;
+    style?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Core/others/Button/select/select.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    const {
+        ...rest
+    } = $props();
+</script>
+<style>
+    #sierra-button-select{
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: var(--primary-bg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+    }
+</style>
+<button
+    aria-label="Selected"
+    id="sierra-button-select"
+    {...rest}
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}}
+><i class="fa fa-check" style="color: white; font-size: 12px;"></i>
+</button>

package/dist/components/Core/others/Button/select/select.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Select: import("svelte").Component<Record<string, any>, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Core/others/Button/theme/theme.css

@@ -0,0 +1,122 @@
+#sierra-theme-toggle {
+	--hue: 223;
+	--trans-dur: 0.6s;
+	--trans-timing: cubic-bezier(0.65,0,0.35,1);
+	font-size: calc(60px + (120 - 60) * (100vw - 320px) / (2560 - 320));
+}
+#sierra-theme-toggle * {
+	border: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+#sierra-theme-toggle,
+#sierra-theme-toggle .switch__input {
+	display: block;
+	-webkit-tap-highlight-color: transparent;
+}
+#sierra-theme-toggle {
+    font-size: 25px;
+	margin: auto;
+	position: relative;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+    cursor: pointer;
+    width: 68.75px;
+    overflow: hidden;
+    border-radius: 0.8em;
+    box-shadow: var(--box-shadow);
+}
+#sierra-theme-toggle .switch__icon {
+	color: hsla(var(--hue),10%,80%);
+	position: absolute;
+	top: 0.375em;
+	left: 0.375em;
+	width: 0.75em;
+	height: 0.75em;
+	transition:
+		color var(--trans-dur),
+		transform var(--trans-dur) var(--trans-timing);
+}
+#sierra-theme-toggle .switch__icon:nth-of-type(2) {
+	right: 0.375em;
+	left: auto;
+}
+#sierra-theme-toggle .switch__inner,
+#sierra-theme-toggle .switch__inner-icons {
+	border-radius: 0.5em;
+	display: block;
+	overflow: hidden;
+	position: absolute;
+	top: 0.25em;
+	left: 0.25em;
+	width: 2.25em;
+	height: 1em;
+}
+#sierra-theme-toggle .switch__inner:before,
+#sierra-theme-toggle .switch__inner-icons {
+	transition: transform var(--trans-dur) var(--trans-timing);
+	transform: translateX(-1.25em);
+}
+#sierra-theme-toggle .switch__inner:before {
+	background-color: var(--primary-bg);
+	border-radius: inherit;
+	content: "";
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+#sierra-theme-toggle .switch__inner-icons {
+	pointer-events: none;
+}
+#sierra-theme-toggle .switch__inner-icons .switch__icon {
+	color: hsl(0,0%,100%);
+	top: 0.125em;
+	left: 0.125em;
+	transform: translateX(1.25em);
+}
+#sierra-theme-toggle .switch__inner-icons .switch__icon:nth-child(2) {
+	right: 0.125em;
+	left: auto;
+}
+#sierra-theme-toggle .switch__input {
+	background-color: hsl(0,0%,100%);
+	border-radius: 0.75em;
+	box-shadow:
+		0 0 0 0.0625em hsla(var(--hue),90%,50%,0),
+		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
+	outline: transparent;
+	width: 2.75em;
+	height: 1.5em;
+	-webkit-appearance: none;
+	appearance: none;
+	transition:
+		background-color var(--trans-dur),
+		box-shadow var(--trans-dur);
+}
+#sierra-theme-toggle .switch__input:checked {
+	background-color: hsl(var(--hue),10%,10%);
+}
+#sierra-theme-toggle .switch__input:checked ~ .switch__icon {
+	color: hsla(var(--hue),10%,40%);
+}
+#sierra-theme-toggle .switch__input:checked ~ .switch__inner:before,
+#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons {
+	transform: translateX(1.25em);
+}
+#sierra-theme-toggle .switch__input:not(:checked) ~ .switch__icon:first-of-type,
+#sierra-theme-toggle .switch__input:checked ~ .switch__icon:nth-of-type(2) {
+	transform: rotate(360deg);
+}
+#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons .switch__icon:first-of-type {
+	transform: translateX(-1.25em) rotate(-360deg);
+}
+#sierra-theme-toggle .switch__input:checked ~ .switch__inner-icons .switch__icon:nth-of-type(2) {
+	transform: translateX(-1.25em) rotate(360deg);
+}
+#sierra-theme-toggle .switch__input:focus-visible {
+	box-shadow:
+		0 0 0 0.0625em hsla(var(--hue),90%,50%,1),
+		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
+}

package/dist/components/Core/others/Button/theme/theme.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import './theme.css';
+    import { onMount } from 'svelte';
+    import {theme} from '../../../../../index.js';
+
+    let isDark = false;
+
+    onMount(() => {
+        const unsubscribe = theme.subscribe(value => {
+            isDark = value === 'dark';
+        });
+        return () => unsubscribe();
+    });
+
+    function toggleTheme(e: Event) {
+        const target = e.target as HTMLInputElement;
+        isDark = target.checked;
+        theme.set(isDark ? 'dark' : 'light');
+    }
+</script>
+
+<main>
+    <svg style="display: none;">
+        <symbol id="light" viewBox="0 0 24 24">
+            <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(0,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(45,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(90,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(135,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(180,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(225,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(270,12,12)" />
+                <line x1="12" y1="17" x2="12" y2="20" transform="rotate(315,12,12)" />
+            </g>
+            <circle fill="currentColor" cx="12" cy="12" r="5" />
+        </symbol>
+        <symbol id="dark" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M15.1,14.9c-3-0.5-5.5-3-6-6C8.8,7.1,9.1,5.4,9.9,4c0.4-0.8-0.4-1.7-1.2-1.4C4.6,4,1.8,7.9,2,12.5c0.2,5.1,4.4,9.3,9.5,9.5c4.5,0.2,8.5-2.6,9.9-6.6c0.3-0.8-0.6-1.7-1.4-1.2C18.6,14.9,16.9,15.2,15.1,14.9z" />
+        </symbol>
+    </svg>
+    <label id="sierra-theme-toggle">
+        <input 
+            hidden
+            class="switch__input" 
+            type="checkbox" 
+            role="switch" 
+            name="dark" 
+            bind:checked={isDark}
+            on:change={toggleTheme} 
+        />
+        <button aria-label="button"></button>
+        <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
+            <use href="#light" />
+        </svg>
+        <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
+            <use href="#dark" />
+        </svg>
+        <span class="switch__inner"></span>
+        <span class="switch__inner-icons">
+            <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
+                <use href="#light" />
+            </svg>
+            <svg class="switch__icon" width="24px" height="24px" aria-hidden="true">
+                <use href="#dark" />
+            </svg>
+        </span>
+    </label>
+</main>

package/dist/components/Core/others/Button/theme/theme.svelte.d.ts

@@ -0,0 +1,19 @@
+import './theme.css';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Theme: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Theme = InstanceType<typeof Theme>;
+export default Theme;

package/dist/components/Core/others/Button/times/times.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    const {
+        vertical = 'top',
+        horizontal = 'right',
+        ...rest
+    } = $props();
+</script>
+<style>
+    .sierra-times-top{
+        transform: translate(50%, -50%);
+    }
+    .sierra-times-bottom{
+        transform: translate(50%, 50%);
+    }
+</style>
+<button 
+    {...rest}
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}}
+    style="position: absolute; {vertical}: 0; {horizontal}: 0;"
+    aria-label="Times Button" 
+    class={vertical === 'top' ? 'sierra-times-top' : 'sierra-times-bottom'}
+><i class="fa fa-times-circle"></i>
+</button>

package/dist/components/Core/others/Button/times/times.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Times: import("svelte").Component<{
+    vertical?: string;
+    horizontal?: string;
+} & Record<string, any>, {}, "">;
+type Times = ReturnType<typeof Times>;
+export default Times;

package/dist/components/Core/others/Clock/Date/date.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let timezone: string = "Africa/Nairobi";
+
+  let time = new Date();
+  let interval: ReturnType<typeof setInterval>;
+
+  onMount(() => {
+    interval = setInterval(() => {
+      time = new Date();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  $: dateString = new Intl.DateTimeFormat("en-GB", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    timeZone: timezone
+  }).format(time);
+</script>
+
+<div>{dateString}</div>

package/dist/components/Core/others/Clock/Date/date.svelte.d.ts

@@ -0,0 +1,20 @@
+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;
+}
+declare const Date: $$__sveltets_2_IsomorphicComponent<{
+    timezone?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Date = InstanceType<typeof Date>;
+export default Date;

package/dist/components/Core/others/Clock/Time/time.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    export let timezone: string = 'Africa/Nairobi';
+
+    let time = new Date();
+    let interval: ReturnType<typeof setInterval>;
+
+    onMount(() => {
+        interval = setInterval(() => {
+            time = new Date();
+        }, 1000);
+
+        return () => clearInterval(interval);
+    });
+
+    $: timeString = new Intl.DateTimeFormat('en-GB', {
+        timeStyle: 'medium',
+        timeZone: timezone
+    }).format(time);
+
+    $: ampm = new Intl.DateTimeFormat('en-GB', {
+        hour12: true,
+        hour: 'numeric',
+        timeZone: timezone
+    }).format(time).split(' ')[1];
+
+    $: city = timezone.split('/')[1]?.replace('_', ' ') || '';
+</script>
+
+<div style="display: flex; align-items:last baseline; gap: 0.2rem;">
+    {timeString}
+    <span class="time">{ampm}</span>
+    <span class="time">{city}</span>
+</div>

package/dist/components/Core/others/Clock/Time/time.svelte.d.ts

@@ -0,0 +1,20 @@
+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;
+}
+declare const Time: $$__sveltets_2_IsomorphicComponent<{
+    timezone?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Time = InstanceType<typeof Time>;
+export default Time;

package/dist/components/Core/others/Previews/Audio/audio.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import {setToastMessage,ButtonTimes, fileInputStore, ButtonSelect, removeFileForMedia, toggleSelectForMedia} from '../../../../../index.js'
+    export let media;
+    export let buttonTimes = false;
+    export let urlsOnly = true;
+
+    let audioPlaying: Record<string, boolean> = {};
+    let audioRefs: Record<string, HTMLAudioElement> = {};
+    function togglePlay(id: string) {
+        if(!urlsOnly){
+            setToastMessage('warning', 'Audio preview is disabled for local files.');
+            return;
+        }
+        const audio = audioRefs[id];
+        if (!audio) return;
+
+        if (audio.paused) {
+            // Pause any other playing audio
+            for (const key in audioRefs) {
+                if (key !== id && !audioRefs[key].paused) {
+                    audioRefs[key].pause();
+                    audioPlaying[key] = false;
+                }
+            }
+            audio.play();
+            audioPlaying[id] = true;
+        } else {
+            audio.pause();
+            audioPlaying[id] = false;
+        }
+    }
+    function getPreviewUrl(file: File) {
+        return URL.createObjectURL(file);
+    }
+    function uuid() {
+        return crypto.randomUUID();
+    }
+</script>
+
+{#if media.Audio.length === 0}
+    <p>No audio files available.</p>
+{:else} 
+    <div style="display: flex; flex-wrap:wrap; gap: 1rem">
+        {#each media.Audio as item (item.id || uuid())}
+            <div on:click={() => toggleSelectForMedia(item.id,item.url,urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px;display: flex; gap: 0.5rem; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); border-radius: 0.3rem; cursor: pointer;">
+                <button aria-label="Play or pause audio" on:click|stopPropagation={() => togglePlay(item.id)}>
+                    <i class="fa {audioPlaying[item.id] ? 'fa-pause' : 'fa-play'}" aria-hidden="true"></i>
+                </button>
+                <audio hidden bind:this={audioRefs[item.id]} src={urlsOnly ? item.url : getPreviewUrl(item)} controls></audio>
+                <h3 style=" margin-left:0.2rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+                {#if buttonTimes}
+                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                        $fileInputStore.selectedFiles.indexOf(item), e
+                    )}/>
+                {/if}
+                {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
+                    <ButtonSelect />
+                {/if}
+            </div>
+        {/each}
+    </div> 
+{/if}

package/dist/components/Core/others/Previews/Audio/audio.svelte.d.ts

@@ -0,0 +1,22 @@
+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;
+}
+declare const Audio: $$__sveltets_2_IsomorphicComponent<{
+    media: any;
+    buttonTimes?: boolean;
+    urlsOnly?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Audio = InstanceType<typeof Audio>;
+export default Audio;

package/dist/components/Core/others/Previews/Document/documents.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import {ButtonTimes,ButtonSelect, fileInputStore, removeFileForMedia, toggleSelectForMedia} from '../../../../../index.js'
+    export let media;
+    export let buttonTimes = false;
+    export let urlsOnly = true;
+</script>
+{#if media.Documents.length === 0}
+    <p>No documents available.</p>
+{:else}
+    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+        {#each media.Documents as item}
+            <div on:click={() => toggleSelectForMedia(item.id,item.url,urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); cursor: pointer;">
+                {#if buttonTimes}
+                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                        $fileInputStore.selectedFiles.indexOf(item), e
+                    )}/>
+                {/if}
+                {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
+                    <ButtonSelect />
+                {/if}
+                <h3 class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+            </div>
+        {/each}
+    </div>
+{/if}

package/dist/components/Core/others/Previews/Document/documents.svelte.d.ts

@@ -0,0 +1,22 @@
+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;
+}
+declare const Documents: $$__sveltets_2_IsomorphicComponent<{
+    media: any;
+    buttonTimes?: boolean;
+    urlsOnly?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Documents = InstanceType<typeof Documents>;
+export default Documents;

package/dist/components/Core/others/Previews/Image/image.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import {ButtonTimes, fileInputStore, ButtonSelect, getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia} from '../../../../../index.js'
+    export let media;
+    export let buttonTimes = false;
+    export let urlsOnly = true;
+</script>
+
+{#if media.Images.length === 0}
+    <p>No images available.</p>
+{:else}
+    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+        {#each media.Images as item}
+            <div on:click={() => toggleSelectForMedia(item.id,item.url,urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem;cursor: pointer;">
+                <img src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} alt={item} style="width: 100%; height: 100px; object-fit: cover;border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;" />
+                <h3 style="margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+                {#if buttonTimes}
+                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                        $fileInputStore.selectedFiles.indexOf(item), e
+                    )}/>
+                {/if}
+                {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
+                    <ButtonSelect />
+                {/if}
+            </div>
+        {/each}
+    </div>
+{/if}