@povio/ui 3.0.0-rc.3 → 3.1.0

package/dist/components/table/Table.js

@@ -1,10 +1,9 @@
-"use no memo";
 import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
 import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
 import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { InlineIconButton } from "../buttons/InlineIconButton/InlineIconButton.js";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
-import { tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableRowDefinition } from "./table.cva.js";
+import { tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableRowDefinition, theadDefinition } from "./table.cva.js";
 import { CellText } from "./CellText.js";
 import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.js";
@@ -27,8 +26,8 @@ var CustomCellContext = (context) => {
 		value: context.getValue()
 	};
 };
-var renderCell = (Comp, props) => {
-	const rendered = flexRender(Comp, props);
+var CellRender = (Comp, props) => {
+	const rendered = typeof Comp === "function" ? Comp(props) : Comp;
 	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
 };
 var RowDragHandleCell = ({ rowId }) => {
@@ -69,13 +68,14 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 			return /* @__PURE__ */ jsx("td", {
 				tabIndex: -1,
 				className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
-				children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+				children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 			}, cell.id);
 		})
 	});
 };
 var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
 	const tableRowCva = UIOverrides.useCva("table.rowCva", tableRowDefinition);
+	const theadCva = UIOverrides.useCva("table.theadCva", theadDefinition);
 	const tableHeadRowCva = UIOverrides.useCva("table.headRowCva", tableHeadRowDefinition);
 	const tableHeadDataCva = UIOverrides.useCva("table.headDataCva", tableHeadDataDefinition);
 	const tableDataCva = UIOverrides.useCva("table.dataCva", tableDataDefinition);
@@ -155,8 +155,8 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 		if (!active || !over || active.id === over.id) return;
 		if (getRowId && (onReorder || onDragEnd)) {
 			if (onReorder) {
-				const oldIndex = items.findIndex((item_0) => getRowId(item_0) === active.id);
-				const newIndex = items.findIndex((item_1) => getRowId(item_1) === over.id);
+				const oldIndex = items.findIndex((item) => getRowId(item) === active.id);
+				const newIndex = items.findIndex((item) => getRowId(item) === over.id);
 				if (oldIndex !== -1 && newIndex !== -1) onReorder(arrayMove(items, oldIndex, newIndex));
 			}
 			onDragEnd?.(event);
@@ -176,7 +176,7 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 		className: clsx("w-full", className),
 		...listeners,
 		children: [/* @__PURE__ */ jsxs("thead", {
-			className: "group/table-head sticky top-0 z-10 data-is-sticky:shadow-2",
+			className: clsx(theadCva({})),
 			"data-is-sticky": isSticky || void 0,
 			children: [/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
 				ref: stickyRef,
@@ -186,18 +186,18 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 				children: headerGroup.headers.filter((header) => {
 					if (isAnyRowSelected && header.index > 0) return false;
 					return header.column.getIsVisible();
-				}).map((header_0, index) => {
-					const columnMeta = header_0.column.columnDef.meta ?? {};
+				}).map((header, index) => {
+					const columnMeta = header.column.columnDef.meta ?? {};
 					return /* @__PURE__ */ jsx("th", {
-						colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
+						colSpan: isAnyRowSelected ? columnCount : header.colSpan,
 						tabIndex: -1,
 						className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
 						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							"aria-label": "Sort column",
-							className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
-							onClick: header_0.column.getToggleSortingHandler(),
-							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
+							className: clsx("flex select-none items-center gap-1 text-text-default-1", header.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
+							onClick: header.column.getToggleSortingHandler(),
+							children: [typeof header.column.columnDef.header === "function" ? flexRender(header.column.columnDef.header, header.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header.column.columnDef.header }), {
 								asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
 									width: 18,
 									height: 18
@@ -206,9 +206,9 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 									width: 18,
 									height: 18
 								})
-							}[header_0.column.getIsSorted()] ?? null]
+							}[header.column.getIsSorted()] ?? null]
 						})
-					}, header_0.id);
+					}, header.id);
 				})
 			}, headerGroup.id))]
 		}), /* @__PURE__ */ jsx("tbody", {
@@ -217,8 +217,8 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
 				items: dataIds,
 				strategy: verticalListSortingStrategy,
-				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {
-					row: row_0,
+				children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(DraggableRow, {
+					row,
 					showCellBorder,
 					onRowClick,
 					onDoubleClick,
@@ -227,29 +227,29 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 					tableDataCva,
 					hasOnClick,
 					...props
-				}, row_0.id))
-			}) : table.getRowModel().rows.map((row_1) => {
+				}, row.id))
+			}) : table.getRowModel().rows.map((row) => {
 				return /* @__PURE__ */ jsx("tr", {
 					className: clsx(tableRowCva({ ...props })),
 					onClick: () => {
 						if (onRowClick) {
-							onRowClick(row_1.original);
+							onRowClick(row.original);
 							return;
 						}
-						if (row_1.getCanSelect()) row_1.toggleSelected();
+						if (row.getCanSelect()) row.toggleSelected();
 					},
-					onDoubleClick: () => onDoubleClick?.(row_1.original),
-					"data-clickable": hasOnClick || row_1.getCanSelect() || void 0,
-					"data-selected": row_1.getIsSelected() || void 0,
-					children: row_1.getVisibleCells().map((cell, cellIndex) => {
-						const columnMeta_0 = cell.column.columnDef.meta ?? {};
+					onDoubleClick: () => onDoubleClick?.(row.original),
+					"data-clickable": hasOnClick || row.getCanSelect() || void 0,
+					"data-selected": row.getIsSelected() || void 0,
+					children: row.getVisibleCells().map((cell, cellIndex) => {
+						const columnMeta = cell.column.columnDef.meta ?? {};
 						return /* @__PURE__ */ jsx("td", {
 							tabIndex: -1,
-							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta_0.cellClass, columnMeta_0.width),
-							children: renderCell(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
+							children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
 						}, cell.id);
 					})
-				}, row_1.id);
+				}, row.id);
 			})
 		})]
 	});

package/dist/components/table/table.cva.d.ts

@@ -11,6 +11,13 @@ export declare const tableRowDefinition: {
 export type TableRowConfig = NonNullable<typeof tableRowDefinition.config>;
 export interface TableRowVariantProps extends UIOverrides.VariantProps<TableRowConfig> {
 }
+export declare const theadDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type TheadConfig = NonNullable<typeof theadDefinition.config>;
+export interface TheadVariantProps extends UIOverrides.VariantProps<TheadConfig> {
+}
 export declare const tableHeadRowDefinition: {
     base: string[];
     config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;

package/dist/components/table/table.cva.js

@@ -15,6 +15,7 @@ var tableRowDefinition = UIOverrides.defineConfig({
 		odd: "odd:bg-elevation-fill-inverted-4/5"
 	} } }
 });
+var theadDefinition = UIOverrides.defineConfig({ base: ["group/table-head sticky top-0 z-sticky data-is-sticky:shadow-2"] });
 var tableHeadRowDefinition = UIOverrides.defineConfig({ base: ["h-8 w-full"] });
 var tableHeadDataDefinition = UIOverrides.defineConfig({
 	base: ["border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"],
@@ -45,4 +46,4 @@ var tableDataDefinition = UIOverrides.defineConfig({
 var tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1"] });
 var tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-text-default-2"] });
 //#endregion
-export { tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition };
+export { tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, theadDefinition };

package/dist/components/text/Link/Link.js

@@ -1,33 +1,21 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { LinkContext } from "../../../config/link.context.js";
 import { linkDefinition } from "./link.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { Link } from "react-aria-components";
 //#region src/components/text/Link/Link.tsx
-var Link$1 = (t0) => {
-	const $ = c(4);
-	const { variant, ...props } = t0;
+var Link$1 = ({ variant, ...props }) => {
 	const linkContext = LinkContext.useLinkContext();
 	const linkCva = UIOverrides.useCva("link.cva", linkDefinition);
 	const LinkComponent = linkContext?.LinkComponent ?? Link;
 	if (!props.to && props.href) props.to = props.href;
-	const t1 = linkCva({
-		variant,
-		className: props.className
+	return /* @__PURE__ */ jsx(LinkComponent, {
+		...props,
+		className: linkCva({
+			variant,
+			className: props.className
+		})
 	});
-	let t2;
-	if ($[0] !== LinkComponent || $[1] !== props || $[2] !== t1) {
-		t2 = /* @__PURE__ */ jsx(LinkComponent, {
-			...props,
-			className: t1
-		});
-		$[0] = LinkComponent;
-		$[1] = props;
-		$[2] = t1;
-		$[3] = t2;
-	} else t2 = $[3];
-	return t2;
 };
 //#endregion
 export { Link$1 as Link };

package/dist/components/text/Pill/Pill.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { PillButtonVariants } from '../../buttons/PillButton/pillButton.cva';
+import { TypographyProps } from '../Typography/Typography';
+export interface PillProps extends PillButtonVariants, AriaButtonProps {
+    className?: string;
+    children: string;
+    dismissable?: boolean;
+    isDisabled?: boolean;
+    contentRef?: Ref<HTMLElement>;
+    textVariant?: TypographyProps["variant"];
+    textSize?: TypographyProps["size"];
+    onDismiss?: () => void;
+}
+export declare const Pill: ({ className, children, dismissable, isDisabled, onDismiss, contentRef, variant, ...props }: PillProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text/Pill/Pill.js

@@ -0,0 +1,44 @@
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { Typography } from "../Typography/Typography.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { pillButtonDefinition } from "../../buttons/PillButton/pillButton.cva.js";
+import "../../../config/i18n.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+//#region src/components/text/Pill/Pill.tsx
+var Pill = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, variant = "subtle", ...props }) => {
+	const uiConfig = UIConfig.useConfig();
+	const { textVariant = uiConfig.tag.textVariant, textSize = uiConfig.tag.textSize } = props;
+	const pillCva = UIOverrides.useCva("pillButton.cva", pillButtonDefinition);
+	const { t } = useTranslation("ui");
+	const buttonProps = {
+		isDisabled,
+		onPress: onDismiss,
+		label: t(($) => $.ui.tag.dismiss),
+		...props
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: pillCva({
+			...props,
+			variant,
+			className: clsx("pointer-events-none inline-flex gap-list-gap-icon-to-label overflow-hidden", className)
+		}),
+		children: [/* @__PURE__ */ jsx(Typography, {
+			ref: contentRef,
+			variant: textVariant,
+			size: textSize,
+			as: "span",
+			className: "truncate",
+			children
+		}), dismissable && /* @__PURE__ */ jsx(Button, {
+			...buttonProps,
+			className: "pointer-events-auto shrink-0",
+			children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+		})]
+	});
+};
+//#endregion
+export { Pill };

package/dist/components/text/Typography/Typography.js

@@ -1,31 +1,16 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { typographyDefinition } from "./typography.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text/Typography/Typography.tsx
-var Typography = (t0) => {
-	const $ = c(4);
-	const { as: t1, className, ...props } = t0;
-	const as = t1 === void 0 ? "p" : t1;
-	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
-	const Tag = as;
-	const t2 = typographyCva({
-		...props,
-		sizeMobile: props.sizeMobile ?? props.size,
-		className
+var Typography = ({ as = "p", className, ...props }) => {
+	return /* @__PURE__ */ jsx(as, {
+		className: UIOverrides.useCva("typography.cva", typographyDefinition)({
+			...props,
+			sizeMobile: props.sizeMobile ?? props.size,
+			className
+		}),
+		...props
 	});
-	let t3;
-	if ($[0] !== Tag || $[1] !== props || $[2] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Tag, {
-			className: t2,
-			...props
-		});
-		$[0] = Tag;
-		$[1] = props;
-		$[2] = t2;
-		$[3] = t3;
-	} else t3 = $[3];
-	return t3;
 };
 //#endregion
 export { Typography };

package/dist/config/confirmation.context.js

@@ -24,7 +24,7 @@ var Confirmation;
 		const [state, setState] = useState(DEFAULT_STATE);
 		const { t } = useTranslation("ui");
 		const onCancel = () => setState(DEFAULT_STATE);
-		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($_0) => $_0.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
+		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($) => $.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
 			return new Promise((resolve) => {
 				setState({
 					heading,

package/dist/config/link.context.js

@@ -1,31 +1,17 @@
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use } from "react";
+import { createContext, use, useMemo } from "react";
 //#region src/config/link.context.tsx
 var LinkContext;
 (function(_LinkContext) {
 	const LinkContextInternal = createContext(null);
-	_LinkContext.LinkContextProvider = (t0) => {
-		const $ = c(5);
-		const { children, LinkComponent } = t0;
-		let t1;
-		if ($[0] !== LinkComponent) {
-			t1 = { LinkComponent };
-			$[0] = LinkComponent;
-			$[1] = t1;
-		} else t1 = $[1];
-		const value = t1;
-		let t2;
-		if ($[2] !== children || $[3] !== value) {
-			t2 = /* @__PURE__ */ jsx(LinkContextInternal.Provider, {
-				value,
-				children
-			});
-			$[2] = children;
-			$[3] = value;
-			$[4] = t2;
-		} else t2 = $[4];
-		return t2;
+	_LinkContext.LinkContextProvider = ({ children, LinkComponent }) => {
+		const value = useMemo(() => {
+			return { LinkComponent };
+		}, [LinkComponent]);
+		return /* @__PURE__ */ jsx(LinkContextInternal.Provider, {
+			value,
+			children
+		});
 	};
 	_LinkContext.useLinkContext = () => {
 		return use(LinkContextInternal);

package/dist/config/router.context.js

@@ -1,57 +1,31 @@
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use } from "react";
+import { createContext, use, useMemo } from "react";
 import { RouterProvider } from "react-aria";
 //#region src/config/router.context.tsx
 var UIRouter;
 (function(_UIRouter) {
 	const UIRouterContext = createContext(null);
-	_UIRouter.UIRouterProvider = (t0) => {
-		const $ = c(13);
-		const { children, push, replace, searchString } = t0;
-		let t1;
-		if ($[0] !== searchString) {
-			t1 = new URLSearchParams(searchString);
-			$[0] = searchString;
-			$[1] = t1;
-		} else t1 = $[1];
-		const searchParams = t1;
-		let t2;
-		if ($[2] !== push || $[3] !== replace || $[4] !== searchParams || $[5] !== searchString) {
-			t2 = {
+	_UIRouter.UIRouterProvider = ({ children, push, replace, searchString }) => {
+		const searchParams = useMemo(() => {
+			return new URLSearchParams(searchString);
+		}, [searchString]);
+		return /* @__PURE__ */ jsx(UIRouterContext, {
+			value: useMemo(() => ({
 				searchParams,
 				push,
 				searchString,
 				replace
-			};
-			$[2] = push;
-			$[3] = replace;
-			$[4] = searchParams;
-			$[5] = searchString;
-			$[6] = t2;
-		} else t2 = $[6];
-		const value = t2;
-		let t3;
-		if ($[7] !== children || $[8] !== push) {
-			t3 = /* @__PURE__ */ jsx(RouterProvider, {
+			}), [
+				searchParams,
+				push,
+				searchString,
+				replace
+			]),
+			children: /* @__PURE__ */ jsx(RouterProvider, {
 				navigate: push,
 				children
-			});
-			$[7] = children;
-			$[8] = push;
-			$[9] = t3;
-		} else t3 = $[9];
-		let t4;
-		if ($[10] !== t3 || $[11] !== value) {
-			t4 = /* @__PURE__ */ jsx(UIRouterContext, {
-				value,
-				children: t3
-			});
-			$[10] = t3;
-			$[11] = value;
-			$[12] = t4;
-		} else t4 = $[12];
-		return t4;
+			})
+		});
 	};
 	_UIRouter.useUIRouter = () => {
 		const context = use(UIRouterContext);

package/dist/config/theme.context.js

@@ -1,7 +1,6 @@
 import { useLocalStorage } from "../hooks/useLocalStorage.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useEffect, useState } from "react";
+import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 //#region src/config/theme.context.tsx
 var ThemeContext;
@@ -13,108 +12,56 @@ var ThemeContext;
 		"system"
 	]);
 	const ThemeContext = createContext(null);
-	_ThemeContext.ThemeContextProvider = (t0) => {
-		const $ = c(17);
-		const { children, storageKey: t1 } = t0;
-		const storageKey = t1 === void 0 ? DEFAULT_STORAGE_KEY : t1;
-		const [systemTheme, setSystemTheme] = useState(_temp);
-		let t2;
-		if ($[0] !== storageKey) {
-			t2 = {
-				key: storageKey,
-				schema: ThemeSchema
+	_ThemeContext.ThemeContextProvider = ({ children, storageKey = DEFAULT_STORAGE_KEY }) => {
+		const [systemTheme, setSystemTheme] = useState(() => {
+			if (typeof window === "undefined") return;
+			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		});
+		const { value: theme, set } = useLocalStorage({
+			key: storageKey,
+			schema: ThemeSchema
+		});
+		const updateTheme = useCallback((theme) => {
+			set(theme);
+		}, [set]);
+		useEffect(() => {
+			if (typeof window === "undefined") return;
+			const onChange = (event) => {
+				setSystemTheme(event.matches ? "dark" : "light");
 			};
-			$[0] = storageKey;
-			$[1] = t2;
-		} else t2 = $[1];
-		const { value: theme, set } = useLocalStorage(t2);
-		let t3;
-		if ($[2] !== set) {
-			t3 = (theme_0) => {
-				set(theme_0);
+			const media = window.matchMedia("(prefers-color-scheme: dark)");
+			media.addEventListener("change", onChange);
+			return () => {
+				media.removeEventListener("change", onChange);
 			};
-			$[2] = set;
-			$[3] = t3;
-		} else t3 = $[3];
-		const updateTheme = t3;
-		let t4;
-		let t5;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-			t4 = () => {
-				if (typeof window === "undefined") return;
-				const onChange = (event) => {
-					setSystemTheme(event.matches ? "dark" : "light");
-				};
-				const media_0 = window.matchMedia("(prefers-color-scheme: dark)");
-				media_0.addEventListener("change", onChange);
-				return () => {
-					media_0.removeEventListener("change", onChange);
-				};
-			};
-			t5 = [];
-			$[4] = t4;
-			$[5] = t5;
-		} else {
-			t4 = $[4];
-			t5 = $[5];
-		}
-		useEffect(t4, t5);
-		let t6;
-		let t7;
-		if ($[6] !== systemTheme || $[7] !== theme) {
-			t6 = () => {
-				document.documentElement.classList.remove("dark");
-				if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
-					document.documentElement.classList.add("dark");
-					document.documentElement.style.colorScheme = "dark";
-				} else if (theme === "light") {
-					document.documentElement.classList.add("light");
-					document.documentElement.style.colorScheme = "light";
-				} else document.documentElement.style.colorScheme = "light";
-			};
-			t7 = [theme, systemTheme];
-			$[6] = systemTheme;
-			$[7] = theme;
-			$[8] = t6;
-			$[9] = t7;
-		} else {
-			t6 = $[8];
-			t7 = $[9];
-		}
-		useEffect(t6, t7);
-		const t8 = theme ?? "system";
-		let t9;
-		if ($[10] !== systemTheme || $[11] !== t8 || $[12] !== updateTheme) {
-			t9 = {
-				theme: t8,
-				systemTheme,
-				updateTheme
-			};
-			$[10] = systemTheme;
-			$[11] = t8;
-			$[12] = updateTheme;
-			$[13] = t9;
-		} else t9 = $[13];
-		const contextValue = t9;
-		let t10;
-		if ($[14] !== children || $[15] !== contextValue) {
-			t10 = /* @__PURE__ */ jsx(ThemeContext.Provider, {
-				value: contextValue,
-				children
-			});
-			$[14] = children;
-			$[15] = contextValue;
-			$[16] = t10;
-		} else t10 = $[16];
-		return t10;
+		}, []);
+		useEffect(() => {
+			document.documentElement.classList.remove("dark");
+			if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
+				document.documentElement.classList.add("dark");
+				document.documentElement.style.colorScheme = "dark";
+			} else if (theme === "light") {
+				document.documentElement.classList.add("light");
+				document.documentElement.style.colorScheme = "light";
+			} else document.documentElement.style.colorScheme = "light";
+		}, [theme, systemTheme]);
+		const contextValue = useMemo(() => ({
+			theme: theme ?? "system",
+			systemTheme,
+			updateTheme
+		}), [
+			theme,
+			systemTheme,
+			updateTheme
+		]);
+		return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+			value: contextValue,
+			children
+		});
 	};
 	_ThemeContext.useTheme = () => {
 		return use(ThemeContext);
 	};
 })(ThemeContext || (ThemeContext = {}));
-function _temp() {
-	if (typeof window === "undefined") return;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
 //#endregion
 export { ThemeContext };