@gradio/dataframe 0.20.2-dev.0 → 0.21.0-dev.3

package/dist/shared/icons/Padlock.svelte.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  PadlockProps */
-/** @typedef {typeof __propDef.events}  PadlockEvents */
-/** @typedef {typeof __propDef.slots}  PadlockSlots */
-export default class Padlock extends SvelteComponent<{
+export default Padlock;
+type Padlock = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type PadlockProps = typeof __propDef.props;
-export type PadlockEvents = typeof __propDef.events;
-export type PadlockSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Padlock: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/shared/icons/SelectionButtons.svelte

@@ -1,8 +1,18 @@
-<script>export let position;
-export let coords;
-export let on_click = null;
-$: is_first_position = position === "column" ? coords[0] === 0 : coords[1] === 0;
-$: direction = position === "column" ? is_first_position ? "down" : "up" : is_first_position ? "right" : "left";
+<script lang="ts">
+	export let position: "column" | "row";
+	export let coords: [number, number];
+	export let on_click: (() => void) | null = null;
+
+	$: is_first_position =
+		position === "column" ? coords[0] === 0 : coords[1] === 0;
+	$: direction =
+		position === "column"
+			? is_first_position
+				? "down"
+				: "up"
+			: is_first_position
+				? "right"
+				: "left";
 </script>
 
 <button

package/dist/shared/icons/SelectionButtons.svelte.d.ts

@@ -1,20 +1,22 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        position: "column" | "row";
-        coords: [number, number];
-        on_click?: (() => void) | null;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SelectionButtonsProps = typeof __propDef.props;
-export type SelectionButtonsEvents = typeof __propDef.events;
-export type SelectionButtonsSlots = typeof __propDef.slots;
-export default class SelectionButtons extends SvelteComponent<SelectionButtonsProps, SelectionButtonsEvents, SelectionButtonsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SelectionButtons: $$__sveltets_2_IsomorphicComponent<{
+    position: "column" | "row";
+    coords: [number, number];
+    on_click?: (() => void) | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SelectionButtons = InstanceType<typeof SelectionButtons>;
+export default SelectionButtons;

package/dist/shared/icons/SortArrowDown.svelte

@@ -1,4 +1,5 @@
-<script>export let size = 16;
+<script lang="ts">
+	export let size = 16;
 </script>
 
 <svg

package/dist/shared/icons/SortArrowDown.svelte.d.ts

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: number;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SortArrowDownProps = typeof __propDef.props;
-export type SortArrowDownEvents = typeof __propDef.events;
-export type SortArrowDownSlots = typeof __propDef.slots;
-export default class SortArrowDown extends SvelteComponent<SortArrowDownProps, SortArrowDownEvents, SortArrowDownSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SortArrowDown: $$__sveltets_2_IsomorphicComponent<{
+    size?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SortArrowDown = InstanceType<typeof SortArrowDown>;
+export default SortArrowDown;

package/dist/shared/icons/SortArrowUp.svelte

@@ -1,4 +1,5 @@
-<script>export let size = 16;
+<script lang="ts">
+	export let size = 16;
 </script>
 
 <svg

package/dist/shared/icons/SortArrowUp.svelte.d.ts

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: number;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SortArrowUpProps = typeof __propDef.props;
-export type SortArrowUpEvents = typeof __propDef.events;
-export type SortArrowUpSlots = typeof __propDef.slots;
-export default class SortArrowUp extends SvelteComponent<SortArrowUpProps, SortArrowUpEvents, SortArrowUpSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SortArrowUp: $$__sveltets_2_IsomorphicComponent<{
+    size?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SortArrowUp = InstanceType<typeof SortArrowUp>;
+export default SortArrowUp;

package/dist/shared/icons/SortButtonDown.svelte.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  SortButtonDownProps */
-/** @typedef {typeof __propDef.events}  SortButtonDownEvents */
-/** @typedef {typeof __propDef.slots}  SortButtonDownSlots */
-export default class SortButtonDown extends SvelteComponent<{
+export default SortButtonDown;
+type SortButtonDown = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SortButtonDownProps = typeof __propDef.props;
-export type SortButtonDownEvents = typeof __propDef.events;
-export type SortButtonDownSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const SortButtonDown: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/shared/icons/SortButtonUp.svelte.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  SortButtonUpProps */
-/** @typedef {typeof __propDef.events}  SortButtonUpEvents */
-/** @typedef {typeof __propDef.slots}  SortButtonUpSlots */
-export default class SortButtonUp extends SvelteComponent<{
+export default SortButtonUp;
+type SortButtonUp = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SortButtonUpProps = typeof __propDef.props;
-export type SortButtonUpEvents = typeof __propDef.events;
-export type SortButtonUpSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const SortButtonUp: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/shared/icons/SortIcon.svelte

@@ -1,11 +1,15 @@
-<script>import { createEventDispatcher } from "svelte";
-import SortButtonUp from "./SortButtonUp.svelte";
-import SortButtonDown from "./SortButtonDown.svelte";
-import { IconButton } from "@gradio/atoms";
-export let direction = null;
-export let priority = null;
-export let i18n;
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+	import SortButtonUp from "./SortButtonUp.svelte";
+	import SortButtonDown from "./SortButtonDown.svelte";
+	import { IconButton } from "@gradio/atoms";
+	type SortDirection = "asc" | "desc";
+	export let direction: SortDirection | null = null;
+	export let priority: number | null = null;
+	export let i18n: I18nFormatter;
+
+	const dispatch = createEventDispatcher<{ sort: SortDirection }>();
 </script>
 
 <div class="sort-icons" role="group" aria-label={i18n("dataframe.sort_column")}>

package/dist/shared/icons/SortIcon.svelte.d.ts

@@ -1,23 +1,25 @@
-import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        direction?: ("asc" | "desc") | null;
-        priority?: number | null;
-        i18n: I18nFormatter;
+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;
     };
-    events: {
-        sort: CustomEvent<"asc" | "desc">;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SortIconProps = typeof __propDef.props;
-export type SortIconEvents = typeof __propDef.events;
-export type SortIconSlots = typeof __propDef.slots;
-export default class SortIcon extends SvelteComponent<SortIconProps, SortIconEvents, SortIconSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SortIcon: $$__sveltets_2_IsomorphicComponent<{
+    direction?: ("asc" | "desc") | null;
+    priority?: number | null;
+    i18n: I18nFormatter;
+}, {
+    sort: CustomEvent<"asc" | "desc">;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SortIcon = InstanceType<typeof SortIcon>;
+export default SortIcon;

package/dist/shared/utils/data_processing.d.ts

@@ -7,7 +7,7 @@ export declare function make_headers(_head: Headers, col_count: [number, "fixed"
 export declare function process_data(values: CellValue[][], els: Record<string, {
     cell: null | HTMLTableCellElement;
     input: null | HTMLTextAreaElement;
-}>, data_binding: Record<string, any>, make_id: () => string, display_value: (string[][] | null) | undefined, datatype: Datatype | Datatype[]): {
+}>, data_binding: Record<string, any>, make_id: () => string, display_value: string[][] | null | undefined, datatype: Datatype | Datatype[]): {
     id: string;
     value: CellValue;
     display_value?: string;

package/dist/standalone/Index.svelte

@@ -1,62 +1,90 @@
-<script>import { onMount } from "svelte";
-import Table from "../shared/Table.svelte";
-import { default_i18n } from "./default_i18n";
-export let i18n = void 0;
-const i18n_fn = (key) => {
-  if (!key) return "";
-  if (typeof i18n === "function") return i18n(key);
-  if (i18n && typeof i18n === "object")
-    return i18n[key] ?? default_i18n[key] ?? key;
-  return default_i18n[key] ?? key;
-};
-export let value = {
-  data: [["", "", ""]],
-  headers: ["1", "2", "3"],
-  metadata: null
-};
-export let datatype = "str";
-export let interactive = true;
-export let show_row_numbers = false;
-export let max_height = 500;
-export let show_search = "none";
-export let wrap = false;
-export let line_breaks = true;
-export let column_widths = [];
-export let max_chars = void 0;
-export let pinned_columns = 0;
-export let static_columns = [];
-export let fullscreen = false;
-export let label = null;
-export let show_label = true;
-export let latex_delimiters = [];
-export let col_count = void 0;
-export let row_count = void 0;
-$: resolved_row_count = (() => {
-  if (row_count && Array.isArray(row_count) && row_count.length === 2 && typeof row_count[0] === "number" && (row_count[1] === "fixed" || row_count[1] === "dynamic")) {
-    return row_count;
-  }
-  return [1, "dynamic"];
-})();
-$: resolved_col_count = (() => {
-  if (col_count && Array.isArray(col_count) && col_count.length === 2 && typeof col_count[0] === "number" && (col_count[1] === "fixed" || col_count[1] === "dynamic")) {
-    return col_count;
-  }
-  const headerLength = value && value.headers && typeof value.headers.length === "number" ? value.headers.length : 3;
-  return [headerLength, "dynamic"];
-})();
-$: if (static_columns && static_columns.length > 0 && resolved_col_count[1] !== "fixed") {
-  resolved_col_count = [resolved_col_count[0], "fixed"];
-}
-let root = "";
-onMount(() => {
-  const handler = (e) => {
-    if (e.key === "Escape") {
-      fullscreen = false;
-    }
-  };
-  window.addEventListener("keydown", handler);
-  return () => window.removeEventListener("keydown", handler);
-});
+<script lang="ts">
+	import { onMount } from "svelte";
+	import Table from "../shared/Table.svelte";
+	import type { Datatype, DataframeValue } from "../shared/utils/utils";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { default_i18n } from "./default_i18n";
+
+	export let i18n: I18nFormatter | undefined = undefined;
+	const i18n_fn = (key: string | null | undefined): string => {
+		if (!key) return "";
+		if (typeof i18n === "function") return (i18n as any)(key);
+		if (i18n && typeof i18n === "object")
+			return (i18n as any)[key] ?? default_i18n[key] ?? key;
+		return default_i18n[key] ?? key;
+	};
+
+	export let value: DataframeValue = {
+		data: [["", "", ""]],
+		headers: ["1", "2", "3"],
+		metadata: null
+	};
+	export let datatype: Datatype | Datatype[] = "str";
+	export let interactive = true;
+	export let show_row_numbers = false;
+	export let max_height = 500;
+	export let show_search: "none" | "search" | "filter" = "none";
+	export let wrap = false;
+	export let line_breaks = true;
+	export let column_widths: string[] = [];
+	export let max_chars: number | undefined = undefined;
+	export let pinned_columns = 0;
+	export let static_columns: (string | number)[] = [];
+	export let fullscreen = false;
+	export let label: string | null = null;
+	export let show_label = true;
+	export let latex_delimiters: any[] = [];
+	export let col_count: [number, "fixed" | "dynamic"] | undefined = undefined;
+	export let row_count: [number, "fixed" | "dynamic"] | undefined = undefined;
+
+	// mirrors default row count and column count logic in dataframe.py
+	$: resolved_row_count = (() => {
+		if (
+			row_count &&
+			Array.isArray(row_count) &&
+			row_count.length === 2 &&
+			typeof row_count[0] === "number" &&
+			(row_count[1] === "fixed" || row_count[1] === "dynamic")
+		) {
+			return row_count as [number, "fixed" | "dynamic"];
+		}
+		return [1, "dynamic"] as [number, "fixed" | "dynamic"];
+	})();
+	$: resolved_col_count = (() => {
+		if (
+			col_count &&
+			Array.isArray(col_count) &&
+			col_count.length === 2 &&
+			typeof col_count[0] === "number" &&
+			(col_count[1] === "fixed" || col_count[1] === "dynamic")
+		) {
+			return col_count as [number, "fixed" | "dynamic"];
+		}
+		const headerLength =
+			value && value.headers && typeof value.headers.length === "number"
+				? value.headers.length
+				: 3;
+		return [headerLength, "dynamic"] as [number, "fixed" | "dynamic"];
+	})();
+	$: if (
+		static_columns &&
+		static_columns.length > 0 &&
+		resolved_col_count[1] !== "fixed"
+	) {
+		resolved_col_count = [resolved_col_count[0], "fixed"];
+	}
+
+	let root = "";
+
+	onMount(() => {
+		const handler = (e: KeyboardEvent): void => {
+			if (e.key === "Escape") {
+				fullscreen = false;
+			}
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	});
 </script>
 
 <div class="gradio-dataframe-standalone" class:fullscreen>
@@ -273,8 +301,8 @@ onMount(() => {
 		--df-body-text-color-subdued: var(--df-neutral-400, #9ca3af);
 		--df-table-text-color: var(--df-body-text-color, #111827);
 		--df-shadow-drop: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-		--df-shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1),
-			0 1px 2px -1px rgb(0 0 0 / 0.1);
+		--df-shadow-drop-lg:
+			0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 		--df-shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
 		--df-shadow-spread: 3px;
 
@@ -282,8 +310,8 @@ onMount(() => {
 		--df-bw-svt-p-bottom: 0px;
 
 		--df-border-color-secondary: var(--df-border-color-accent, #fdba74);
-		--df-shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		--df-shadow-md:
+			0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
 		--df-checkbox-border-radius: var(--df-radius-sm, 4px);
 		--df-checkbox-shadow: none;
@@ -325,8 +353,8 @@ onMount(() => {
 		--df-input-placeholder-color: var(--neutral-400, #9ca3af);
 		--df-input-radius: var(--df-radius-sm, 4px);
 		--df-input-shadow: none;
-		--df-input-shadow-focus: 0 0 0 var(--shadow-spread, 3px)
-				var(--secondary-50, #eff6ff),
+		--df-input-shadow-focus:
+			0 0 0 var(--shadow-spread, 3px) var(--secondary-50, #eff6ff),
 			var(--shadow-inset, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset);
 
 		--table-radius: var(--gr-df-table-radius, var(--df-table-radius, 4px));
@@ -512,16 +540,17 @@ onMount(() => {
 		--line-md: var(--df-line-md, 1.5);
 		--line-lg: var(--df-line-lg, 1.75);
 
-		--shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-		--shadow-sm: 0 4px 6px -2px rgba(0, 0, 0, 0.1),
-			0 2px 4px -2px rgba(0, 0, 0, 0.06);
-		--shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		--shadow-lg: 0 20px 24px -4px rgba(0, 0, 0, 0.1),
-			0 8px 8px -4px rgba(0, 0, 0, 0.04);
+		--shadow-xs:
+			0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+		--shadow-sm:
+			0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
+		--shadow-md:
+			0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		--shadow-lg:
+			0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
 		--shadow-drop: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-		--shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1),
-			0 1px 2px -1px rgb(0 0 0 / 0.1);
+		--shadow-drop-lg:
+			0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 		--shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
 		--shadow-spread: 3px;
 	}