@gradio/image 0.22.16 → 0.22.18

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @gradio/image
 
+## 0.22.18
+
+### Dependency updates
+
+- @gradio/client@1.18.0
+- @gradio/icons@0.14.0
+- @gradio/atoms@0.17.0
+- @gradio/statustracker@0.11.0
+- @gradio/upload@0.16.17
+
+## 0.22.17
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.18
+
+## 0.22.17
+
+### Dependency updates
+
+- @gradio/icons@0.13.1
+- @gradio/upload@0.16.16
+
+## 0.22.17
+
+### Fixes
+
+- [#11720](https://github.com/gradio-app/gradio/pull/11720) [`4d3d983`](https://github.com/gradio-app/gradio/commit/4d3d983083c1317925aba1f67c8d5d3c944525ca) - Exit fullscreen mode when `gr.Image` value is cleared.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.17
+- @gradio/atoms@0.16.5
+- @gradio/client@1.17.1
+- @gradio/icons@0.13.0
+- @gradio/upload@0.16.15
+
 ## 0.22.16
 
 ### Dependency updates

package/Index.svelte

@@ -205,6 +205,7 @@
 			{fullscreen}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
+				fullscreen = false;
 				gradio.dispatch("clear");
 			}}
 			on:stream={({ detail }) => gradio.dispatch("stream", detail)}

package/dist/Example.svelte.d.ts

@@ -4,12 +4,14 @@ declare const __propDef: {
     props: {
         value: null | FileData;
         type: "gallery" | "table";
-        selected?: boolean | undefined;
+        selected?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ExampleProps = typeof __propDef.props;
 export type ExampleEvents = typeof __propDef.events;

package/dist/Index.svelte

@@ -56,8 +56,7 @@ export let input_ready;
 export let webcam_options;
 let fullscreen = false;
 let uploading = false;
-$:
-  input_ready = !uploading;
+$: input_ready = !uploading;
 export let gradio;
 $: {
   if (JSON.stringify(value) !== JSON.stringify(old_value)) {
@@ -175,6 +174,7 @@ const handle_drop = (event) => {
 			{fullscreen}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
+				fullscreen = false;
 				gradio.dispatch("clear");
 			}}
 			on:stream={({ detail }) => gradio.dispatch("stream", detail)}

package/dist/Index.svelte.d.ts

@@ -10,14 +10,14 @@ import { type FileData } from "@gradio/client";
 import type { LoadingStatus } from "@gradio/statustracker";
 declare const __propDef: {
     props: {
-        modify_stream_state?: ((state: "open" | "closed" | "waiting") => void) | undefined;
-        get_stream_state?: (() => void) | undefined;
+        modify_stream_state?: (state: "open" | "closed" | "waiting") => void;
+        get_stream_state?: () => void;
         set_time_limit: (arg0: number) => void;
-        value_is_output?: boolean | undefined;
-        elem_id?: string | undefined;
-        elem_classes?: string[] | undefined;
-        visible?: boolean | undefined;
-        value?: (null | FileData) | undefined;
+        value_is_output?: boolean;
+        elem_id?: string;
+        elem_classes?: string[];
+        visible?: boolean;
+        value?: null | FileData;
         label: string;
         show_label: boolean;
         show_download_button: boolean;
@@ -25,13 +25,13 @@ declare const __propDef: {
         height: number | undefined;
         width: number | undefined;
         stream_every: number;
-        _selectable?: boolean | undefined;
-        container?: boolean | undefined;
-        scale?: (number | null) | undefined;
+        _selectable?: boolean;
+        container?: boolean;
+        scale?: number | null;
         min_width?: number | undefined;
         loading_status: LoadingStatus;
-        show_share_button?: boolean | undefined;
-        sources?: ("clipboard" | "webcam" | "upload")[] | undefined;
+        show_share_button?: boolean;
+        sources?: ("clipboard" | "webcam" | "upload")[];
         interactive: boolean;
         streaming: boolean;
         pending: boolean;
@@ -58,6 +58,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;

package/dist/shared/Image.svelte.d.ts

@@ -1,236 +1,8 @@
 import { SvelteComponent } from "svelte";
+import type { HTMLImgAttributes } from "svelte/elements";
 declare const __propDef: {
-    props: {
-        [x: `data-${string}`]: any;
-        alt?: string | undefined | null;
-        crossorigin?: "anonymous" | "use-credentials" | "" | undefined | null;
-        decoding?: "async" | "auto" | "sync" | undefined | null;
-        fetchpriority?: "auto" | "high" | "low" | undefined | null;
-        height?: number | string | undefined | null;
-        ismap?: boolean | undefined | null;
-        loading?: "eager" | "lazy" | undefined | null;
-        referrerpolicy?: ReferrerPolicy | undefined | null;
-        sizes?: string | undefined | null;
-        src?: string | undefined | null;
-        srcset?: string | undefined | null;
-        usemap?: string | undefined | null;
-        width?: number | string | undefined | null;
-        readonly 'bind:naturalWidth'?: number | undefined | null;
-        readonly 'bind:naturalHeight'?: number | undefined | null;
-        accesskey?: string | undefined | null;
-        autofocus?: boolean | undefined | null;
-        class?: string | undefined | null;
-        contenteditable?: import("svelte/elements").Booleanish | "inherit" | "plaintext-only" | undefined | null;
-        contextmenu?: string | undefined | null;
-        dir?: string | undefined | null;
-        draggable?: import("svelte/elements").Booleanish | undefined | null;
-        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | null;
-        hidden?: boolean | undefined | null;
-        id?: string | undefined | null;
-        lang?: string | undefined | null;
-        part?: string | undefined | null;
-        placeholder?: string | undefined | null;
-        slot?: string | undefined | null;
-        spellcheck?: import("svelte/elements").Booleanish | undefined | null;
-        style?: string | undefined | null;
-        tabindex?: number | undefined | null;
-        title?: string | undefined | null;
-        translate?: "yes" | "no" | "" | undefined | null;
-        inert?: boolean | undefined | null;
-        popover?: "auto" | "manual" | "" | undefined | null;
-        radiogroup?: string | undefined | null;
-        role?: import("svelte/elements").AriaRole | undefined | null;
-        about?: string | undefined | null;
-        datatype?: string | undefined | null;
-        inlist?: any;
-        prefix?: string | undefined | null;
-        property?: string | undefined | null;
-        resource?: string | undefined | null;
-        typeof?: string | undefined | null;
-        vocab?: string | undefined | null;
-        autocapitalize?: string | undefined | null;
-        autocorrect?: string | undefined | null;
-        autosave?: string | undefined | null;
-        color?: string | undefined | null;
-        itemprop?: string | undefined | null;
-        itemscope?: boolean | undefined | null;
-        itemtype?: string | undefined | null;
-        itemid?: string | undefined | null;
-        itemref?: string | undefined | null;
-        results?: number | undefined | null;
-        security?: string | undefined | null;
-        unselectable?: "on" | "off" | undefined | null;
-        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | null;
-        is?: string | undefined | null;
-        'bind:innerHTML'?: string | undefined | null;
-        'bind:textContent'?: string | undefined | null;
-        'bind:innerText'?: string | undefined | null;
-        readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
-        readonly 'bind:contentBoxSize'?: ResizeObserverSize[] | undefined | null;
-        readonly 'bind:borderBoxSize'?: ResizeObserverSize[] | undefined | null;
-        readonly 'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | undefined | null;
-        'data-sveltekit-keepfocus'?: true | "" | "off" | undefined | null;
-        'data-sveltekit-noscroll'?: true | "" | "off" | undefined | null;
-        'data-sveltekit-preload-code'?: true | "" | "eager" | "viewport" | "hover" | "tap" | "off" | undefined | null;
-        'data-sveltekit-preload-data'?: true | "" | "hover" | "tap" | "off" | undefined | null;
-        'data-sveltekit-reload'?: true | "" | "off" | undefined | null;
-        'data-sveltekit-replacestate'?: true | "" | "off" | undefined | null;
-        'aria-activedescendant'?: string | undefined | null;
-        'aria-atomic'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | null;
-        'aria-busy'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined | null;
-        'aria-colcount'?: number | undefined | null;
-        'aria-colindex'?: number | undefined | null;
-        'aria-colspan'?: number | undefined | null;
-        'aria-controls'?: string | undefined | null;
-        'aria-current'?: import("svelte/elements").Booleanish | "page" | "step" | "location" | "date" | "time" | undefined | null;
-        'aria-describedby'?: string | undefined | null;
-        'aria-details'?: string | undefined | null;
-        'aria-disabled'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | null;
-        'aria-errormessage'?: string | undefined | null;
-        'aria-expanded'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-flowto'?: string | undefined | null;
-        'aria-grabbed'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-haspopup'?: import("svelte/elements").Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | null;
-        'aria-hidden'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | undefined | null;
-        'aria-keyshortcuts'?: string | undefined | null;
-        'aria-label'?: string | undefined | null;
-        'aria-labelledby'?: string | undefined | null;
-        'aria-level'?: number | undefined | null;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined | null;
-        'aria-modal'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-multiline'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-multiselectable'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-orientation'?: "horizontal" | "vertical" | undefined | null;
-        'aria-owns'?: string | undefined | null;
-        'aria-placeholder'?: string | undefined | null;
-        'aria-posinset'?: number | undefined | null;
-        'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined | null;
-        'aria-readonly'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | null;
-        'aria-required'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-roledescription'?: string | undefined | null;
-        'aria-rowcount'?: number | undefined | null;
-        'aria-rowindex'?: number | undefined | null;
-        'aria-rowspan'?: number | undefined | null;
-        'aria-selected'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-setsize'?: number | undefined | null;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | null;
-        'aria-valuemax'?: number | undefined | null;
-        'aria-valuemin'?: number | undefined | null;
-        'aria-valuenow'?: number | undefined | null;
-        'aria-valuetext'?: string | undefined | null;
-        'on:copy'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:cut'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:paste'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:compositionend'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
-        'on:compositionstart'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
-        'on:compositionupdate'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
-        'on:focus'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
-        'on:focusin'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
-        'on:focusout'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
-        'on:blur'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
-        'on:change'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
-        'on:beforeinput'?: import("svelte/elements").EventHandler<InputEvent, HTMLImageElement> | null | undefined;
-        'on:input'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
-        'on:reset'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
-        'on:submit'?: import("svelte/elements").EventHandler<SubmitEvent, HTMLImageElement> | null | undefined;
-        'on:invalid'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:formdata'?: import("svelte/elements").EventHandler<FormDataEvent, HTMLImageElement> | null | undefined;
-        'on:load'?: import("svelte/elements").EventHandler | undefined | null;
-        'on:error'?: import("svelte/elements").EventHandler | undefined | null;
-        'on:beforetoggle'?: import("svelte/elements").ToggleEventHandler<HTMLImageElement> | null | undefined;
-        'on:toggle'?: import("svelte/elements").ToggleEventHandler<HTMLImageElement> | null | undefined;
-        'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:abort'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:canplay'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:cuechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:durationchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:emptied'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:encrypted'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:ended'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:loadeddata'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:loadstart'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:pause'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:play'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:playing'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:progress'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:ratechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:seeked'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:seeking'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:stalled'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:suspend'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:timeupdate'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:volumechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:waiting'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:auxclick'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:click'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:contextmenu'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:dblclick'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:drag'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragend'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragenter'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragexit'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragleave'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragover'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragstart'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:drop'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:mousedown'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseenter'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseleave'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mousemove'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseout'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseover'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseup'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:select'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:selectionchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:selectstart'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:touchcancel'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
-        'on:touchend'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
-        'on:touchmove'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
-        'on:touchstart'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
-        'on:gotpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointercancel'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerdown'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerenter'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerleave'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointermove'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerout'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerover'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerup'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:lostpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:gamepadconnected'?: import("svelte/elements").GamepadEventHandler<HTMLImageElement> | null | undefined;
-        'on:gamepaddisconnected'?: import("svelte/elements").GamepadEventHandler<HTMLImageElement> | null | undefined;
-        'on:scroll'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
-        'on:scrollend'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
-        'on:resize'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
-        'on:wheel'?: import("svelte/elements").WheelEventHandler<HTMLImageElement> | null | undefined;
-        'on:animationstart'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
-        'on:animationend'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
-        'on:animationiteration'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
-        'on:transitionstart'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
-        'on:transitionrun'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
-        'on:transitionend'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
-        'on:transitioncancel'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
-        'on:outrostart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
-        'on:outroend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
-        'on:introstart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
-        'on:introend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
-        'on:message'?: import("svelte/elements").MessageEventHandler<HTMLImageElement> | null | undefined;
-        'on:messageerror'?: import("svelte/elements").MessageEventHandler<HTMLImageElement> | null | undefined;
-        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:cancel'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:close'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        "data-testid"?: string | undefined;
+    props: HTMLImgAttributes & {
+        "data-testid"?: string;
     };
     events: {
         load: Event;
@@ -238,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ImageProps = typeof __propDef.props;
 export type ImageEvents = typeof __propDef.events;

package/dist/shared/ImagePreview.svelte.d.ts

@@ -7,13 +7,13 @@ declare const __propDef: {
         value: null | FileData;
         label?: string | undefined;
         show_label: boolean;
-        show_download_button?: boolean | undefined;
-        selectable?: boolean | undefined;
-        show_share_button?: boolean | undefined;
+        show_download_button?: boolean;
+        selectable?: boolean;
+        show_share_button?: boolean;
         i18n: I18nFormatter;
-        show_fullscreen_button?: boolean | undefined;
-        display_icon_button_wrapper_top_corner?: boolean | undefined;
-        fullscreen?: boolean | undefined;
+        show_fullscreen_button?: boolean;
+        display_icon_button_wrapper_top_corner?: boolean;
+        fullscreen?: boolean;
     };
     events: {
         fullscreen: CustomEvent<any>;
@@ -26,6 +26,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ImagePreviewProps = typeof __propDef.props;
 export type ImagePreviewEvents = typeof __propDef.events;

package/dist/shared/ImageUploader.svelte

@@ -54,6 +54,10 @@ function handle_clear() {
   dispatch("clear");
   dispatch("change", null);
 }
+function handle_remove_image_click(event) {
+  handle_clear();
+  event.stopPropagation();
+}
 async function handle_save(img_blob, event) {
   if (event === "stream") {
     dispatch("stream", {
@@ -73,25 +77,20 @@ async function handle_save(img_blob, event) {
   }
   pending = false;
 }
-$:
-  active_streaming = streaming && active_source === "webcam";
-$:
-  if (uploading && !active_streaming)
-    value = null;
+$: active_streaming = streaming && active_source === "webcam";
+$: if (uploading && !active_streaming) value = null;
 const dispatch = createEventDispatcher();
 export let dragging = false;
-$:
-  dispatch("drag", dragging);
+$: dispatch("drag", dragging);
 function handle_click(evt) {
   let coordinates = get_coordinates_of_clicked_image(evt);
   if (coordinates) {
     dispatch("select", { index: coordinates, value: null });
   }
 }
-$:
-  if (!active_source && sources) {
-    active_source = sources[0];
-  }
+$: if (!active_source && sources) {
+  active_source = sources[0];
+}
 async function handle_select_source(source) {
   switch (source) {
     case "clipboard":
@@ -135,11 +134,7 @@ async function on_drop(evt) {
 			<IconButton
 				Icon={Clear}
 				label="Remove Image"
-				on:click={(event) => {
-					value = null;
-					dispatch("clear");
-					event.stopPropagation();
-				}}
+				on:click={handle_remove_image_click}
 			/>
 		{/if}
 	</IconButtonWrapper>

package/dist/shared/ImageUploader.svelte.d.ts

@@ -4,27 +4,27 @@ import { FileData, type Client } from "@gradio/client";
 import type { Base64File, WebcamOptions } from "./types";
 declare const __propDef: {
     props: {
-        value?: (null | FileData | Base64File) | undefined;
+        value?: null | FileData | Base64File;
         label?: string | undefined;
         show_label: boolean;
-        sources?: ("clipboard" | "upload" | "microphone" | "webcam" | null)[] | undefined;
-        streaming?: boolean | undefined;
-        pending?: boolean | undefined;
+        sources?: ("clipboard" | "upload" | "microphone" | "webcam" | null)[];
+        streaming?: boolean;
+        pending?: boolean;
         webcam_options: WebcamOptions;
-        selectable?: boolean | undefined;
+        selectable?: boolean;
         root: string;
         i18n: I18nFormatter;
-        max_file_size?: (number | null) | undefined;
+        max_file_size?: number | null;
         upload: Client["upload"];
         stream_handler: Client["stream"];
         stream_every: number;
         modify_stream: (state: "open" | "closed" | "waiting") => void;
         set_time_limit: (arg0: number) => void;
-        show_fullscreen_button?: boolean | undefined;
-        uploading?: boolean | undefined;
-        active_source?: ("clipboard" | "upload" | "microphone" | "webcam" | null) | undefined;
-        fullscreen?: boolean | undefined;
-        dragging?: boolean | undefined;
+        show_fullscreen_button?: boolean;
+        uploading?: boolean;
+        active_source?: "clipboard" | "upload" | "microphone" | "webcam" | null;
+        fullscreen?: boolean;
+        dragging?: boolean;
     };
     events: {
         fullscreen: CustomEvent<boolean>;
@@ -43,6 +43,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ImageUploaderProps = typeof __propDef.props;
 export type ImageUploaderEvents = typeof __propDef.events;

package/dist/shared/Webcam.svelte

@@ -32,8 +32,7 @@ export const modify_stream = (state) => {
   }
 };
 export const set_time_limit = (time) => {
-  if (recording)
-    time_limit = time;
+  if (recording) time_limit = time;
 };
 let canvas;
 export let streaming = false;
@@ -221,8 +220,7 @@ function handle_click_outside(event) {
   options_open = false;
 }
 onDestroy(() => {
-  if (typeof window === "undefined")
-    return;
+  if (typeof window === "undefined") return;
   record_video_or_photo({ destroy: true });
   stream?.getTracks().forEach((track) => track.stop());
 });

package/dist/shared/Webcam.svelte.d.ts

@@ -4,22 +4,22 @@ import { type FileData, type Client } from "@gradio/client";
 import type { Base64File } from "./types";
 declare const __propDef: {
     props: {
-        modify_stream?: ((state: "open" | "closed" | "waiting") => void) | undefined;
-        set_time_limit?: ((time: number) => void) | undefined;
-        streaming?: boolean | undefined;
-        pending?: boolean | undefined;
-        root?: string | undefined;
-        stream_every?: number | undefined;
-        mode?: ("image" | "video") | undefined;
+        modify_stream?: (state: "open" | "closed" | "waiting") => void;
+        set_time_limit?: (time: number) => void;
+        streaming?: boolean;
+        pending?: boolean;
+        root?: string;
+        stream_every?: number;
+        mode?: "image" | "video";
         mirror_webcam: boolean;
         include_audio: boolean;
-        webcam_constraints?: ({
+        webcam_constraints?: {
             [key: string]: any;
-        } | null) | undefined;
+        } | null;
         i18n: I18nFormatter;
         upload: Client["upload"];
-        value?: (FileData | null | Base64File) | undefined;
-        click_outside?: ((node: Node, cb: any) => any) | undefined;
+        value?: FileData | null | Base64File;
+        click_outside?: (node: Node, cb: any) => any;
     };
     events: {
         stream: CustomEvent<string | Blob>;
@@ -32,6 +32,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type WebcamProps = typeof __propDef.props;
 export type WebcamEvents = typeof __propDef.events;

package/dist/shared/WebcamPermissions.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         click: CustomEvent<undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type WebcamPermissionsProps = typeof __propDef.props;
 export type WebcamPermissionsEvents = typeof __propDef.events;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.22.16",
+  "version": "0.22.18",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,12 +10,12 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.16.4",
-    "@gradio/statustracker": "^0.10.16",
-    "@gradio/client": "^1.17.0",
-    "@gradio/icons": "^0.12.0",
-    "@gradio/upload": "^0.16.14",
+    "@gradio/icons": "^0.14.0",
+    "@gradio/atoms": "^0.17.0",
+    "@gradio/statustracker": "^0.11.0",
+    "@gradio/client": "^1.18.0",
     "@gradio/utils": "^0.10.2",
+    "@gradio/upload": "^0.16.17",
     "@gradio/wasm": "^0.18.1"
   },
   "devDependencies": {

package/shared/ImageUploader.svelte

@@ -70,6 +70,11 @@
 		dispatch("change", null);
 	}
 
+	function handle_remove_image_click(event: MouseEvent): void {
+		handle_clear();
+		event.stopPropagation();
+	}
+
 	async function handle_save(
 		img_blob: Blob | any,
 		event: "change" | "stream" | "upload"
@@ -173,11 +178,7 @@
 			<IconButton
 				Icon={Clear}
 				label="Remove Image"
-				on:click={(event) => {
-					value = null;
-					dispatch("clear");
-					event.stopPropagation();
-				}}
+				on:click={handle_remove_image_click}
 			/>
 		{/if}
 	</IconButtonWrapper>