@yahoo/uds 3.125.1 → 3.127.0

package/dist/components/client/Tabs/TabList.js

@@ -0,0 +1,130 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { useTabsContext } from "./tabsContext.js";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TabList as TabList$1, useStoreState, useTabContext } from "@ariakit/react";
+import { useReducedMotion } from "motion/react";
+
+//#region src/components/client/Tabs/TabList.tsx
+/** Matches {@link Tab} per-tab underline (token CSS variables on the indicator root). */
+const tabRootUnderlineClassName = cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
+const SELECTION_TRANSITION = "left 240ms cubic-bezier(0.2, 0, 0, 1), top 240ms cubic-bezier(0.2, 0, 0, 1), width 240ms cubic-bezier(0.2, 0, 0, 1), height 240ms cubic-bezier(0.2, 0, 0, 1)";
+/** Token vars set on {@link Tab} roots; the sliding indicator is a sibling, so it must mirror the selected tab's computed values (incl. :hover / :active). */
+const TAB_UNDERLINE_COLOR_VAR = "--uds-tab-underline-color";
+const TAB_UNDERLINE_WIDTH_VAR = "--uds-tab-underline-width";
+const TabList = forwardRef(function TabList({ children, scrollable, className, ...props }, ref) {
+	const { variant, disableMotion } = useTabsContext();
+	const selectedId = useStoreState(useTabContext(), "selectedId");
+	const listRef = useRef(null);
+	const indicatorRef = useRef(null);
+	const skipNextTransitionRef = useRef(true);
+	const reducedMotion = useReducedMotion();
+	const applyIndicator = useCallback(() => {
+		const listEl = listRef.current;
+		const indicatorEl = indicatorRef.current;
+		if (!listEl || !indicatorEl || disableMotion) return;
+		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
+		if (!selected) {
+			indicatorEl.style.opacity = "0";
+			indicatorEl.style.transition = "none";
+			indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
+			indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
+			return;
+		}
+		const listRect = listEl.getBoundingClientRect();
+		const tabRect = selected.getBoundingClientRect();
+		const skipTransition = skipNextTransitionRef.current || reducedMotion;
+		skipNextTransitionRef.current = false;
+		indicatorEl.style.left = `${tabRect.left - listRect.left + listEl.scrollLeft}px`;
+		indicatorEl.style.top = `${tabRect.top - listRect.top + listEl.scrollTop}px`;
+		indicatorEl.style.width = `${tabRect.width}px`;
+		indicatorEl.style.height = `${tabRect.height}px`;
+		indicatorEl.style.opacity = "1";
+		indicatorEl.style.transition = skipTransition ? "none" : SELECTION_TRANSITION;
+		const cs = getComputedStyle(selected);
+		const underlineColor = cs.getPropertyValue(TAB_UNDERLINE_COLOR_VAR).trim();
+		const underlineWidth = cs.getPropertyValue(TAB_UNDERLINE_WIDTH_VAR).trim();
+		if (underlineColor) indicatorEl.style.setProperty(TAB_UNDERLINE_COLOR_VAR, underlineColor);
+		else indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
+		if (underlineWidth) indicatorEl.style.setProperty(TAB_UNDERLINE_WIDTH_VAR, underlineWidth);
+		else indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
+	}, [disableMotion, reducedMotion]);
+	useLayoutEffect(() => {
+		applyIndicator();
+	}, [selectedId, applyIndicator]);
+	useLayoutEffect(() => {
+		if (disableMotion) return;
+		const listEl = listRef.current;
+		if (!listEl) return;
+		const ro = new ResizeObserver(() => applyIndicator());
+		ro.observe(listEl);
+		const onScroll = () => applyIndicator();
+		listEl.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("resize", applyIndicator);
+		return () => {
+			ro.disconnect();
+			listEl.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", applyIndicator);
+		};
+	}, [disableMotion, applyIndicator]);
+	/** Re-sync underline tokens when the selected tab's hover/pressed state changes (indicator does not receive those pseudos). */
+	useLayoutEffect(() => {
+		if (disableMotion) return;
+		const listEl = listRef.current;
+		if (!listEl) return;
+		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
+		if (!selected) return;
+		const bump = () => applyIndicator();
+		const events = [
+			"mouseenter",
+			"mouseleave",
+			"mousedown",
+			"mouseup",
+			"pointerdown",
+			"pointerup"
+		];
+		events.forEach((e) => selected.addEventListener(e, bump));
+		return () => events.forEach((e) => selected.removeEventListener(e, bump));
+	}, [
+		selectedId,
+		disableMotion,
+		applyIndicator
+	]);
+	const setListRef = (el) => {
+		listRef.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	};
+	const tablistConfigClass = getStyles({ tabsVariantRoot: variant });
+	const indicatorClass = cx(getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "on"
+	}), "!m-0 !p-0 !gap-0 box-border pointer-events-none", "absolute z-0 min-w-0 min-h-0");
+	const styles = cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !disableMotion && "relative", className);
+	const indicatorBoxStyle = !disableMotion ? {
+		opacity: 0,
+		transition: "none"
+	} : {};
+	return /* @__PURE__ */ jsxs(TabList$1, {
+		ref: setListRef,
+		className: styles,
+		...props,
+		children: [!disableMotion ? /* @__PURE__ */ jsx("span", {
+			ref: indicatorRef,
+			className: indicatorClass,
+			style: indicatorBoxStyle,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: tabRootUnderlineClassName
+			})
+		}) : null, children]
+	});
+});
+TabList.displayName = "TabList";
+
+//#endregion
+export { TabList };

package/dist/components/client/Tabs/TabPanel.cjs

@@ -0,0 +1,22 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Tabs/TabPanel.tsx
+const TabPanel = (0, react.forwardRef)(function TabPanel({ tabId, children, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabPanel, {
+		ref,
+		tabId,
+		className,
+		...props,
+		children
+	});
+});
+TabPanel.displayName = "TabPanel";
+
+//#endregion
+exports.TabPanel = TabPanel;

package/dist/components/client/Tabs/TabPanel.d.cts

@@ -0,0 +1,9 @@
+
+import { UniversalTabPanelProps } from "../../../types/dist/index.cjs";
+import * as react from "react";
+
+//#region src/components/client/Tabs/TabPanel.d.ts
+type TabPanelProps = UniversalTabPanelProps;
+declare const TabPanel: react.ForwardRefExoticComponent<UniversalTabPanelProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabPanel, type TabPanelProps };

package/dist/components/client/Tabs/TabPanel.d.ts

@@ -0,0 +1,10 @@
+
+"use client";
+import { UniversalTabPanelProps } from "../../../types/dist/index.js";
+import * as react from "react";
+
+//#region src/components/client/Tabs/TabPanel.d.ts
+type TabPanelProps = UniversalTabPanelProps;
+declare const TabPanel: react.ForwardRefExoticComponent<UniversalTabPanelProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabPanel, type TabPanelProps };

package/dist/components/client/Tabs/TabPanel.js

@@ -0,0 +1,20 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { TabPanel as TabPanel$1 } from "@ariakit/react";
+
+//#region src/components/client/Tabs/TabPanel.tsx
+const TabPanel = forwardRef(function TabPanel({ tabId, children, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TabPanel$1, {
+		ref,
+		tabId,
+		className,
+		...props,
+		children
+	});
+});
+TabPanel.displayName = "TabPanel";
+
+//#endregion
+export { TabPanel };

package/dist/components/client/Tabs/Tabs.cjs

@@ -0,0 +1,53 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_components_client_Tabs_tabsContext = require('./tabsContext.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Tabs/Tabs.tsx
+/**
+* **⚙️️ A composable Tabs component
+*
+* @componentType Client component
+*
+* @description
+* Tabs organize content into multiple sections and allow users to navigate between them.
+* Supports two visual variants: `primary` and `secondary`. By default, the active selection
+* indicator (underline or pill) animates between tabs with the same timing as the design reference
+* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `disableMotion={true}` to disable that motion.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tabs, TabList, Tab, TabPanel } from "@yahoo/uds";
+*
+* <Tabs variant="primary" defaultSelectedId="tab-home">
+*   <TabList aria-label="Navigation">
+*     <Tab value="tab-home">Home</Tab>
+*     <Tab value="tab-about">About</Tab>
+*   </TabList>
+*   <TabPanel tabId="tab-home">Home content</TabPanel>
+*   <TabPanel tabId="tab-about">About content</TabPanel>
+* </Tabs>
+* ```
+**/
+function Tabs({ children, variant = "primary", disableMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Tabs_tabsContext.TabsContext.Provider, {
+		value: {
+			variant,
+			disableMotion
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabProvider, {
+			defaultSelectedId,
+			selectedId,
+			setSelectedId: onSelectionChange,
+			children
+		})
+	});
+}
+Tabs.displayName = "Tabs";
+
+//#endregion
+exports.Tabs = Tabs;

package/dist/components/client/Tabs/Tabs.d.cts

@@ -0,0 +1,45 @@
+
+import { UniversalTabsProps } from "../../../types/dist/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tabs/Tabs.d.ts
+type TabsProps = UniversalTabsProps;
+/**
+ * **⚙️️ A composable Tabs component
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tabs organize content into multiple sections and allow users to navigate between them.
+ * Supports two visual variants: `primary` and `secondary`. By default, the active selection
+ * indicator (underline or pill) animates between tabs with the same timing as the design reference
+ * (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `disableMotion={true}` to disable that motion.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tabs, TabList, Tab, TabPanel } from "@yahoo/uds";
+ *
+ * <Tabs variant="primary" defaultSelectedId="tab-home">
+ *   <TabList aria-label="Navigation">
+ *     <Tab value="tab-home">Home</Tab>
+ *     <Tab value="tab-about">About</Tab>
+ *   </TabList>
+ *   <TabPanel tabId="tab-home">Home content</TabPanel>
+ *   <TabPanel tabId="tab-about">About content</TabPanel>
+ * </Tabs>
+ * ```
+ **/
+declare function Tabs({
+  children,
+  variant,
+  disableMotion,
+  defaultSelectedId,
+  selectedId,
+  onSelectionChange
+}: TabsProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tabs {
+  var displayName: string;
+}
+//#endregion
+export { Tabs, type TabsProps };

package/dist/components/client/Tabs/Tabs.d.ts

@@ -0,0 +1,46 @@
+
+"use client";
+import { UniversalTabsProps } from "../../../types/dist/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tabs/Tabs.d.ts
+type TabsProps = UniversalTabsProps;
+/**
+ * **⚙️️ A composable Tabs component
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tabs organize content into multiple sections and allow users to navigate between them.
+ * Supports two visual variants: `primary` and `secondary`. By default, the active selection
+ * indicator (underline or pill) animates between tabs with the same timing as the design reference
+ * (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `disableMotion={true}` to disable that motion.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tabs, TabList, Tab, TabPanel } from "@yahoo/uds";
+ *
+ * <Tabs variant="primary" defaultSelectedId="tab-home">
+ *   <TabList aria-label="Navigation">
+ *     <Tab value="tab-home">Home</Tab>
+ *     <Tab value="tab-about">About</Tab>
+ *   </TabList>
+ *   <TabPanel tabId="tab-home">Home content</TabPanel>
+ *   <TabPanel tabId="tab-about">About content</TabPanel>
+ * </Tabs>
+ * ```
+ **/
+declare function Tabs({
+  children,
+  variant,
+  disableMotion,
+  defaultSelectedId,
+  selectedId,
+  onSelectionChange
+}: TabsProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tabs {
+  var displayName: string;
+}
+//#endregion
+export { Tabs, type TabsProps };

package/dist/components/client/Tabs/Tabs.js

@@ -0,0 +1,51 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { TabsContext } from "./tabsContext.js";
+import { jsx } from "react/jsx-runtime";
+import { TabProvider } from "@ariakit/react";
+
+//#region src/components/client/Tabs/Tabs.tsx
+/**
+* **⚙️️ A composable Tabs component
+*
+* @componentType Client component
+*
+* @description
+* Tabs organize content into multiple sections and allow users to navigate between them.
+* Supports two visual variants: `primary` and `secondary`. By default, the active selection
+* indicator (underline or pill) animates between tabs with the same timing as the design reference
+* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `disableMotion={true}` to disable that motion.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tabs, TabList, Tab, TabPanel } from "@yahoo/uds";
+*
+* <Tabs variant="primary" defaultSelectedId="tab-home">
+*   <TabList aria-label="Navigation">
+*     <Tab value="tab-home">Home</Tab>
+*     <Tab value="tab-about">About</Tab>
+*   </TabList>
+*   <TabPanel tabId="tab-home">Home content</TabPanel>
+*   <TabPanel tabId="tab-about">About content</TabPanel>
+* </Tabs>
+* ```
+**/
+function Tabs({ children, variant = "primary", disableMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			variant,
+			disableMotion
+		},
+		children: /* @__PURE__ */ jsx(TabProvider, {
+			defaultSelectedId,
+			selectedId,
+			setSelectedId: onSelectionChange,
+			children
+		})
+	});
+}
+Tabs.displayName = "Tabs";
+
+//#endregion
+export { Tabs };

package/dist/components/client/Tabs/index.cjs

@@ -0,0 +1,12 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_components_client_Tabs_Tab = require('./Tab.cjs');
+const require_components_client_Tabs_TabList = require('./TabList.cjs');
+const require_components_client_Tabs_TabPanel = require('./TabPanel.cjs');
+const require_components_client_Tabs_Tabs = require('./Tabs.cjs');
+
+exports.Tab = require_components_client_Tabs_Tab.Tab;
+exports.TabList = require_components_client_Tabs_TabList.TabList;
+exports.TabPanel = require_components_client_Tabs_TabPanel.TabPanel;
+exports.Tabs = require_components_client_Tabs_Tabs.Tabs;

package/dist/components/client/Tabs/index.d.cts

@@ -0,0 +1,7 @@
+
+import { Tab, TabProps } from "./Tab.cjs";
+import { TabList, TabListProps } from "./TabList.cjs";
+import { TabPanel, TabPanelProps } from "./TabPanel.cjs";
+import { Tabs, TabsProps } from "./Tabs.cjs";
+import { TabsVariant } from "./tabsContext.cjs";
+export { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, type TabsVariant };

package/dist/components/client/Tabs/index.d.ts

@@ -0,0 +1,8 @@
+
+"use client";
+import { Tab, TabProps } from "./Tab.js";
+import { TabList, TabListProps } from "./TabList.js";
+import { TabPanel, TabPanelProps } from "./TabPanel.js";
+import { Tabs, TabsProps } from "./Tabs.js";
+import { TabsVariant } from "./tabsContext.js";
+export { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, type TabsVariant };

package/dist/components/client/Tabs/index.js

@@ -0,0 +1,8 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { Tab } from "./Tab.js";
+import { TabList } from "./TabList.js";
+import { TabPanel } from "./TabPanel.js";
+import { Tabs } from "./Tabs.js";
+
+export { Tab, TabList, TabPanel, Tabs };

package/dist/components/client/Tabs/tabsContext.cjs

@@ -0,0 +1,18 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/client/Tabs/tabsContext.tsx
+const TabsContext = (0, react.createContext)({
+	variant: "primary",
+	disableMotion: false
+});
+function useTabsContext() {
+	return (0, react.useContext)(TabsContext);
+}
+
+//#endregion
+exports.TabsContext = TabsContext;
+exports.useTabsContext = useTabsContext;

package/dist/components/client/Tabs/tabsContext.d.cts

@@ -0,0 +1,15 @@
+
+import { UniversalTabsVariant } from "../../../types/dist/index.cjs";
+import * as react from "react";
+
+//#region src/components/client/Tabs/tabsContext.d.ts
+type TabsVariant = UniversalTabsVariant;
+interface TabsContextValue {
+  variant: TabsVariant;
+  /** When true, selection indicator sliding motion is off; TabList/Tab still show correct selection. */
+  disableMotion: boolean;
+}
+declare const TabsContext: react.Context<TabsContextValue>;
+declare function useTabsContext(): TabsContextValue;
+//#endregion
+export { TabsContext, type TabsVariant, useTabsContext };

package/dist/components/client/Tabs/tabsContext.d.ts

@@ -0,0 +1,16 @@
+
+"use client";
+import { UniversalTabsVariant } from "../../../types/dist/index.js";
+import * as react from "react";
+
+//#region src/components/client/Tabs/tabsContext.d.ts
+type TabsVariant = UniversalTabsVariant;
+interface TabsContextValue {
+  variant: TabsVariant;
+  /** When true, selection indicator sliding motion is off; TabList/Tab still show correct selection. */
+  disableMotion: boolean;
+}
+declare const TabsContext: react.Context<TabsContextValue>;
+declare function useTabsContext(): TabsContextValue;
+//#endregion
+export { TabsContext, type TabsVariant, useTabsContext };

package/dist/components/client/Tabs/tabsContext.js

@@ -0,0 +1,15 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { createContext, useContext } from "react";
+
+//#region src/components/client/Tabs/tabsContext.tsx
+const TabsContext = createContext({
+	variant: "primary",
+	disableMotion: false
+});
+function useTabsContext() {
+	return useContext(TabsContext);
+}
+
+//#endregion
+export { TabsContext, useTabsContext };

package/dist/components/client/Toast/Toast.cjs

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_Text = require('../../Text.cjs');
+const require_components_client_Pressable = require('../Pressable.cjs');
 const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_Text = require('../../Text.cjs');
 const require_components_client_Button = require('../Button.cjs');
-const require_components_client_Pressable = require('../Pressable.cjs');
 const require_components_client_Toast_UDSToastConfigProvider = require('./UDSToastConfigProvider.cjs');
 const require_components_client_Toast_ToastContainer = require('./ToastContainer.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
 let _yahoo_uds_icons = require("@yahoo/uds-icons");
+let react_jsx_runtime = require("react/jsx-runtime");
 let motion_react = require("motion/react");
 
 //#region src/components/client/Toast/Toast.tsx

package/dist/components/client/Toast/Toast.js

@@ -1,14 +1,14 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
-import { Text } from "../../Text.js";
+import { Pressable } from "../Pressable.js";
 import { IconSlot } from "../../IconSlot.js";
+import { Text } from "../../Text.js";
 import { Button } from "../Button.js";
-import { Pressable } from "../Pressable.js";
 import { useToastConfig } from "./UDSToastConfigProvider.js";
 import { ToastContainer } from "./ToastContainer.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircle, Cross, Error, Info, Progress, Warning } from "@yahoo/uds-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useReducedMotion } from "motion/react";
 
 //#region src/components/client/Toast/Toast.tsx