moduix 0.10.0 → 0.11.1

package/dist/components/Textarea/Textarea.d.ts

@@ -1,4 +1,9 @@
-declare const Textarea: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLTextAreaElement> & import('react').TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    autoResize?: boolean;
-}, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
-export { Textarea };
+import { ComponentProps } from "react";
+
+//#region src/components/Textarea/Textarea.d.ts
+type TextareaProps = ComponentProps<'textarea'> & {
+  autoResize?: boolean;
+};
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { Textarea, type TextareaProps };

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,28 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Textarea_module_default from "./Textarea.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { Field } from "@base-ui/react/field";
+import { mergeProps } from "@base-ui/react/merge-props";
+//#region src/components/Textarea/Textarea.tsx
+const assignForwardedRef = (ref, value) => {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+};
+const Textarea = forwardRef(function Textarea({ autoResize = false, className, ...props }, forwardedRef) {
+	const setTextareaRef = useCallback((node) => {
+		assignForwardedRef(forwardedRef, node instanceof HTMLTextAreaElement ? node : null);
+	}, [forwardedRef]);
+	return /* @__PURE__ */ jsx(Field.Control, {
+		ref: setTextareaRef,
+		"data-slot": "textarea-root",
+		"data-auto-resize": autoResize ? "" : void 0,
+		className: mergeClassName(className, Textarea_module_default.root),
+		render: (controlProps) => /* @__PURE__ */ jsx("textarea", { ...mergeProps(controlProps, props) })
+	});
+});
+//#endregion
+export { Textarea };

package/dist/components/Textarea/Textarea.module.cjs

@@ -0,0 +1,5 @@
+import './Textarea.css';
+//#region src/components/Textarea/Textarea.module.css
+var Textarea_module_default = { "root": "Wcx2Va_root" };
+//#endregion
+exports.default = Textarea_module_default;

package/dist/components/Textarea/Textarea.module.js

@@ -0,0 +1,5 @@
+import './Textarea.css';
+//#region src/components/Textarea/Textarea.module.css
+var Textarea_module_default = { "root": "Wcx2Va_root" };
+//#endregion
+export { Textarea_module_default as default };

package/dist/components/Textarea/index.d.ts

@@ -1 +1 @@
-export { Textarea } from './Textarea';
+import { Textarea, TextareaProps } from "./Textarea.js";

package/dist/components/Toast/Toast.cjs

@@ -0,0 +1,278 @@
+const require_Icons = require("../../icons/ui/Icons.cjs");
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_Toast_module = require("./Toast.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _base_ui_react_toast = require("@base-ui/react/toast");
+//#region src/components/Toast/Toast.tsx
+const DEFAULT_TOAST_PLACEMENT = "bottom-right";
+const DEFAULT_STACK_BEHAVIOR = "stacked";
+const DEFAULT_ANCHORED_SIDE_OFFSET = 8;
+const TOP_TOAST_SWIPE_DIRECTIONS = [
+	"left",
+	"right",
+	"up"
+];
+const BOTTOM_TOAST_SWIPE_DIRECTIONS = [
+	"left",
+	"right",
+	"down"
+];
+const ToastPlacementContext = (0, react.createContext)(DEFAULT_TOAST_PLACEMENT);
+const ToastStackBehaviorContext = (0, react.createContext)(DEFAULT_STACK_BEHAVIOR);
+const ToastStyleContext = (0, react.createContext)("stacked");
+const AnchoredToastManagerContext = (0, react.createContext)(null);
+const createToastManager = _base_ui_react_toast.Toast.createToastManager;
+const useToastManager = _base_ui_react_toast.Toast.useToastManager;
+function isAnchoredToast(toast) {
+	return Boolean(toast.positionerProps?.anchor);
+}
+function getToastSwipeDirection(placement) {
+	return placement.startsWith("top") ? TOP_TOAST_SWIPE_DIRECTIONS : BOTTOM_TOAST_SWIPE_DIRECTIONS;
+}
+function ToastProvider({ children, toastManager, anchoredToastManager, ...props }) {
+	const defaultToastManager = (0, react.useMemo)(() => createToastManager(), []);
+	const defaultAnchoredToastManager = (0, react.useMemo)(() => createToastManager(), []);
+	const resolvedToastManager = toastManager ?? defaultToastManager;
+	const resolvedAnchoredToastManager = anchoredToastManager ?? defaultAnchoredToastManager;
+	const anchoredToast = (0, react.useMemo)(() => createAnchoredToastManager(resolvedAnchoredToastManager), [resolvedAnchoredToastManager]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnchoredToastManagerContext.Provider, {
+		value: anchoredToast,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Provider, {
+			toastManager: resolvedToastManager,
+			...props,
+			children
+		})
+	});
+}
+function ToastPortal({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Portal, {
+		"data-slot": "toast-portal",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.portal),
+		...props
+	});
+}
+function ToastViewport({ className, placement = DEFAULT_TOAST_PLACEMENT, stackBehavior = DEFAULT_STACK_BEHAVIOR, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastPlacementContext.Provider, {
+		value: placement,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastStackBehaviorContext.Provider, {
+			value: stackBehavior,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Viewport, {
+				"data-slot": "toast-viewport",
+				"data-placement": placement,
+				"data-stack-behavior": stackBehavior,
+				className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.viewport),
+				...props
+			})
+		})
+	});
+}
+function ToastRoot(props) {
+	const { className, placement, swipeDirection, toast, ...rootProps } = props;
+	const contextPlacement = (0, react.useContext)(ToastPlacementContext);
+	const stackBehavior = (0, react.useContext)(ToastStackBehaviorContext);
+	const anchored = isAnchoredToast(toast);
+	const resolvedPlacement = placement ?? contextPlacement;
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastStyleContext.Provider, {
+		value: anchored ? "anchored" : "stacked",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Root, {
+			...rootProps,
+			toast,
+			"data-slot": dataSlot ?? (anchored ? "toast-anchored-root" : "toast-root"),
+			"data-placement": resolvedPlacement,
+			"data-stack-behavior": stackBehavior,
+			swipeDirection: anchored ? swipeDirection : swipeDirection ?? getToastSwipeDirection(resolvedPlacement),
+			className: require_mergeClassName.mergeClassName(className, anchored ? require_Toast_module.default.anchoredRoot : require_Toast_module.default.root)
+		})
+	});
+}
+function ToastContent(props) {
+	const { className, ...contentProps } = props;
+	const style = (0, react.useContext)(ToastStyleContext);
+	const stackBehavior = (0, react.useContext)(ToastStackBehaviorContext);
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Content, {
+		...contentProps,
+		"data-slot": dataSlot ?? (style === "anchored" ? "toast-anchored-content" : "toast-content"),
+		"data-stack-behavior": style === "stacked" ? stackBehavior : void 0,
+		className: require_mergeClassName.mergeClassName(className, style === "anchored" ? require_Toast_module.default.anchoredContent : require_Toast_module.default.content)
+	});
+}
+function ToastTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Title, {
+		"data-slot": "toast-title",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.title),
+		...props
+	});
+}
+function ToastDescription(props) {
+	const { className, ...descriptionProps } = props;
+	const style = (0, react.useContext)(ToastStyleContext);
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Description, {
+		...descriptionProps,
+		"data-slot": dataSlot ?? (style === "anchored" ? "toast-anchored-description" : "toast-description"),
+		className: require_mergeClassName.mergeClassName(className, style === "anchored" ? require_Toast_module.default.anchoredDescription : require_Toast_module.default.description)
+	});
+}
+function ToastAction({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Action, {
+		"data-slot": "toast-action",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.action),
+		...props
+	});
+}
+function ToastClose({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Close, {
+		"data-slot": "toast-close",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.close),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CloseIcon, { className: require_Toast_module.default.closeIcon })
+	});
+}
+function ToastPositioner({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Positioner, {
+		"data-slot": "toast-positioner",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.positioner),
+		...props
+	});
+}
+function ToastArrow(props) {
+	const { className, children, ...arrowProps } = props;
+	const dataSlot = props["data-slot"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Arrow, {
+		...arrowProps,
+		"data-slot": dataSlot ?? "toast-anchored-arrow",
+		className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.anchoredArrow),
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnchoredArrowSvg, { className: require_Toast_module.default.anchoredArrowSvg })
+	});
+}
+function ToastRegion({ className, container, renderToast, placement = DEFAULT_TOAST_PLACEMENT, stackBehavior = DEFAULT_STACK_BEHAVIOR, ...props }) {
+	const { toasts: allToasts } = useToastManager();
+	const toasts = allToasts.filter((toast) => !isAnchoredToast(toast));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastPortal, {
+		container,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastViewport, {
+			placement,
+			stackBehavior,
+			className,
+			...props,
+			children: toasts.map((toast, index) => renderToast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderToast(toast, index) }, toast.id) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultToast, { toast }, toast.id))
+		})
+	});
+}
+function ToastAnchoredRegion({ className, container, renderToast, ...props }) {
+	const anchoredToast = (0, react.useContext)(AnchoredToastManagerContext);
+	if (!anchoredToast) throw new Error("ToastAnchoredRegion must be used within ToastProvider.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Provider, {
+		toastManager: anchoredToast.manager,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastAnchoredRegionContent, {
+			className,
+			container,
+			renderToast,
+			...props
+		})
+	});
+}
+function ToastAnchoredRegionContent({ className, container, renderToast, ...props }) {
+	const { toasts } = useToastManager();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastPortal, {
+		container,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Viewport, {
+			"data-slot": "toast-anchored-viewport",
+			className: require_mergeClassName.mergeClassName(className, require_Toast_module.default.anchoredViewport),
+			...props,
+			children: toasts.map((toast, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastPositioner, {
+				toast,
+				className: require_Toast_module.default.anchoredPositioner,
+				children: renderToast ? renderToast(toast, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultAnchoredToast, { toast })
+			}, toast.id))
+		})
+	});
+}
+function DefaultToast({ toast }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastRoot, {
+		toast,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastTitle, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastDescription, {}),
+			toast.actionProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastAction, {}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastClose, { "aria-label": "Close toast" })
+		] })
+	});
+}
+function DefaultAnchoredToast({ toast }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastRoot, {
+		toast,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastArrow, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastDescription, {}) })]
+	});
+}
+function AnchoredArrowSvg(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.PopupArrowIcon, {
+		fillClassName: require_Toast_module.default.anchoredArrowFill,
+		outerStrokeClassName: require_Toast_module.default.anchoredArrowOuterStroke,
+		innerStrokeClassName: require_Toast_module.default.anchoredArrowInnerStroke,
+		...props
+	});
+}
+function createAnchoredToastManager(manager = createToastManager()) {
+	const anchorIds = /* @__PURE__ */ new WeakMap();
+	let idCounter = 0;
+	const show = ({ anchor, id, positionerProps, onRemove, ...options }) => {
+		const resolvedId = anchorIds.get(anchor) ?? id ?? `anchored-${Date.now()}-${++idCounter}`;
+		manager.add({
+			...options,
+			id: resolvedId,
+			positionerProps: {
+				sideOffset: DEFAULT_ANCHORED_SIDE_OFFSET,
+				...positionerProps,
+				anchor
+			},
+			onRemove: () => {
+				if (anchorIds.get(anchor) === resolvedId) anchorIds.delete(anchor);
+				onRemove?.();
+			}
+		});
+		anchorIds.set(anchor, resolvedId);
+		return resolvedId;
+	};
+	const closeByAnchor = (anchor) => {
+		if (!anchor) return;
+		const toastId = anchorIds.get(anchor);
+		if (!toastId) return;
+		manager.close(toastId);
+		anchorIds.delete(anchor);
+	};
+	const closeAll = () => {
+		manager.close();
+	};
+	return {
+		manager,
+		show,
+		closeByAnchor,
+		closeAll
+	};
+}
+function useAnchoredToastManager() {
+	const anchoredToast = (0, react.useContext)(AnchoredToastManagerContext);
+	if (!anchoredToast) throw new Error("useAnchoredToastManager must be used within ToastProvider.");
+	return anchoredToast;
+}
+//#endregion
+exports.ToastAction = ToastAction;
+exports.ToastAnchoredRegion = ToastAnchoredRegion;
+exports.ToastArrow = ToastArrow;
+exports.ToastClose = ToastClose;
+exports.ToastContent = ToastContent;
+exports.ToastDescription = ToastDescription;
+exports.ToastPortal = ToastPortal;
+exports.ToastPositioner = ToastPositioner;
+exports.ToastProvider = ToastProvider;
+exports.ToastRegion = ToastRegion;
+exports.ToastRoot = ToastRoot;
+exports.ToastTitle = ToastTitle;
+exports.ToastViewport = ToastViewport;
+exports.createToastManager = createToastManager;
+exports.useAnchoredToastManager = useAnchoredToastManager;
+exports.useToastManager = useToastManager;

package/dist/components/Toast/Toast.css

@@ -0,0 +1,351 @@
+@layer ui.components {
+  .xGZ1aG_portal {
+    z-index: var(--toast-z-index, var(--z-toast));
+  }
+
+  .xGZ1aG_viewport {
+    z-index: var(--toast-z-index, var(--z-toast));
+    width: var(--toast-viewport-width, 20rem);
+    max-width: calc(100vw - (var(--toast-viewport-inset, 1rem) * 2));
+    min-height: 1px;
+    margin: 0 auto;
+    position: fixed;
+
+    &[data-placement^="top"] {
+      top: var(--toast-viewport-inset, 1rem);
+      bottom: auto;
+    }
+
+    &[data-placement^="bottom"] {
+      top: auto;
+      bottom: var(--toast-viewport-inset, 1rem);
+    }
+
+    &[data-placement$="left"] {
+      left: var(--toast-viewport-inset, 1rem);
+      right: auto;
+    }
+
+    &[data-placement$="center"] {
+      left: 50%;
+      right: auto;
+      translate: -50%;
+    }
+
+    &[data-placement$="right"] {
+      left: auto;
+      right: var(--toast-viewport-inset, 1rem);
+    }
+  }
+
+  .xGZ1aG_anchoredViewport {
+    outline: 0;
+  }
+
+  .xGZ1aG_anchoredPositioner {
+    z-index: calc(var(--toast-z-index, var(--z-toast)) - var(--toast-index));
+  }
+
+  .xGZ1aG_anchoredRoot {
+    box-sizing: border-box;
+    width: max-content;
+    max-width: min(var(--toast-anchored-max-width, 20rem),
+      calc(100vw - (var(--toast-viewport-inset, 1rem) * 2)));
+    border-radius: var(--toast-radius, var(--radius-md));
+    background-color: var(--toast-bg, var(--color-popover));
+    color: var(--toast-color, var(--color-popover-foreground));
+    padding: var(--toast-anchored-padding-y, .25rem) var(--toast-anchored-padding-x, .5rem);
+    font-size: var(--toast-anchored-font-size, var(--text-sm));
+    line-height: var(--toast-anchored-line-height, var(--line-height-text-sm));
+    box-shadow: var(--toast-shadow, var(--shadow-lg));
+    outline: var(--toast-border-width, var(--border-width-sm)) solid
+      var(--toast-border-color, var(--color-border));
+    pointer-events: auto;
+    transform-origin: var(--transform-origin);
+    transition: var(--toast-anchored-transition, transform .15s, opacity .15s);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--toast-anchored-scale, .9));
+    }
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toast-focus-ring-offset, 0);
+    }
+  }
+
+  .xGZ1aG_anchoredArrow {
+    color: var(--toast-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: var(--toast-anchored-arrow-offset-y, -8px);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: var(--toast-anchored-arrow-offset-y, -8px);
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: var(--toast-anchored-arrow-offset-x, -13px);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: var(--toast-anchored-arrow-offset-x, -13px);
+      rotate: -90deg;
+    }
+  }
+
+  .xGZ1aG_anchoredArrowSvg {
+    width: var(--toast-anchored-arrow-width, 1.25rem);
+    height: var(--toast-anchored-arrow-height, .625rem);
+    shape-rendering: geometricprecision;
+    display: block;
+  }
+
+  .xGZ1aG_anchoredArrowFill {
+    fill: currentColor;
+  }
+
+  .xGZ1aG_anchoredArrowOuterStroke {
+    fill: var(--toast-border-color, var(--color-border));
+  }
+
+  .xGZ1aG_anchoredArrowInnerStroke {
+    fill: var(--toast-bg, var(--color-popover));
+  }
+
+  .xGZ1aG_anchoredContent {
+    align-items: center;
+    gap: var(--toast-content-gap, .25rem);
+    display: grid;
+  }
+
+  .xGZ1aG_anchoredDescription {
+    color: inherit;
+    margin: 0;
+  }
+
+  .xGZ1aG_root {
+    --gap: var(--toast-stack-gap, .75rem);
+    --peek: var(--toast-stack-peek, .75rem);
+    --scale: calc(max(0, 1 - (var(--toast-index) * .1)));
+    --shrink: calc(1 - var(--scale));
+    --height: var(--toast-frontmost-height, var(--toast-height));
+    --offset-y: calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
+        var(--toast-swipe-movement-y));
+    box-sizing: border-box;
+    border: var(--toast-border-width, var(--border-width-sm)) solid
+      var(--toast-border-color, var(--color-border));
+    border-radius: var(--toast-radius, var(--radius-lg));
+    background-color: var(--toast-bg, var(--color-popover));
+    width: 100%;
+    color: var(--toast-color, var(--color-popover-foreground));
+    box-shadow: var(--toast-shadow, var(--shadow-lg));
+    padding: var(--toast-padding, 1rem);
+    user-select: none;
+    pointer-events: auto;
+    transition: transform var(--toast-transition, .5s cubic-bezier(.22, 1, .36, 1)),
+      opacity .5s,
+      height .15s ease;
+    z-index: calc(var(--toast-z-index, var(--z-toast)) - var(--toast-index));
+    height: var(--height);
+    transform: translateX(var(--toast-swipe-movement-x))
+      translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
+            (var(--shrink) * var(--height))))
+      scale(var(--scale));
+    transform-origin: bottom;
+    background-clip: padding-box;
+    margin-right: 0;
+    position: absolute;
+    bottom: 0;
+    left: auto;
+    right: 0;
+
+    &[data-placement^="top"] {
+      --offset-y: calc(var(--toast-offset-y) + (var(--toast-index) * var(--gap)) + var(--toast-swipe-movement-y));
+      transform: translateX(var(--toast-swipe-movement-x))
+        translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--peek)) +
+              (var(--shrink) * var(--height))))
+        scale(var(--scale));
+      transform-origin: top;
+      margin-left: auto;
+      margin-right: auto;
+      inset: 0 0 auto;
+    }
+
+    &[data-expanded], &[data-stack-behavior="expanded"]:not([data-starting-style]):not([data-ending-style]) {
+      transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+      height: var(--toast-height);
+    }
+
+    &[data-starting-style] {
+      transform: translateY(150%);
+
+      &[data-placement^="top"] {
+        transform: translateY(-150%);
+      }
+    }
+
+    &[data-limited] {
+      opacity: 0;
+    }
+
+    &[data-ending-style] {
+      opacity: 0;
+
+      &:not([data-limited]):not([data-swipe-direction]) {
+        transform: translateY(150%);
+
+        &[data-placement^="top"] {
+          transform: translateY(-150%);
+        }
+      }
+
+      &[data-swipe-direction="up"] {
+        transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+      }
+
+      &[data-swipe-direction="left"] {
+        transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
+          translateY(var(--offset-y));
+      }
+
+      &[data-swipe-direction="right"] {
+        transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
+          translateY(var(--offset-y));
+      }
+
+      &[data-swipe-direction="down"] {
+        transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+      }
+    }
+
+    &:after {
+      content: "";
+      width: 100%;
+      height: calc(var(--gap) + var(--toast-border-width, var(--border-width-sm)));
+      position: absolute;
+      top: 100%;
+      left: 0;
+    }
+
+    &[data-placement^="top"] {
+      &:after {
+        top: auto;
+        bottom: 100%;
+      }
+    }
+  }
+
+  .xGZ1aG_content {
+    gap: var(--toast-content-gap, .25rem);
+    padding-inline-end: calc(var(--toast-close-offset-right, .5rem) + var(--toast-close-size, 1.25rem) + var(--spacing-2));
+    transition: opacity .25s;
+    display: grid;
+    overflow: hidden;
+
+    &[data-behind] {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &[data-expanded], &[data-stack-behavior="expanded"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .xGZ1aG_title {
+    color: inherit;
+    font-size: var(--toast-title-font-size, var(--text-sm));
+    font-weight: var(--toast-title-font-weight, var(--weight-semibold));
+    line-height: var(--toast-title-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .xGZ1aG_description {
+    color: var(--toast-description-color, var(--color-muted-foreground));
+    font-size: var(--toast-description-font-size, var(--text-sm));
+    line-height: var(--toast-description-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .xGZ1aG_action {
+    margin-top: var(--toast-action-margin-top, .5rem);
+    border: var(--toast-action-border-width, var(--toast-border-width, var(--border-width-sm)))
+      solid var(--toast-action-border-color, var(--color-border));
+    border-radius: var(--toast-action-radius, var(--radius-sm));
+    background: var(--toast-action-bg, var(--color-background));
+    color: var(--toast-action-color, var(--color-foreground));
+    padding: var(--toast-action-padding-y, .25rem) var(--toast-action-padding-x, .5rem);
+    font-size: var(--toast-action-font-size, var(--text-xs));
+    line-height: var(--toast-action-line-height, var(--line-height-text-xs));
+    font-weight: var(--toast-action-font-weight, var(--weight-medium));
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm))) * -1);
+    }
+
+    &:disabled, &[data-disabled] {
+      cursor: default;
+      opacity: var(--opacity-disabled);
+    }
+
+    @media (hover: hover) {
+      &:hover:not(:disabled):not([data-disabled]) {
+        background-color: var(--toast-action-bg-hover, var(--color-accent));
+      }
+    }
+  }
+
+  .xGZ1aG_close {
+    top: var(--toast-close-offset-top, .5rem);
+    right: var(--toast-close-offset-right, .5rem);
+    width: var(--toast-close-size, 1.25rem);
+    height: var(--toast-close-size, 1.25rem);
+    border-radius: var(--toast-close-radius, var(--radius-sm));
+    background: var(--toast-close-bg, transparent);
+    color: var(--toast-close-color, var(--color-muted-foreground));
+    padding: var(--toast-close-padding, 0);
+    cursor: pointer;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: absolute;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--toast-close-bg-hover, var(--color-accent));
+        color: var(--toast-close-color-hover, var(--color-foreground));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toast-close-focus-ring-offset, 0);
+    }
+  }
+
+  .xGZ1aG_closeIcon {
+    width: var(--toast-close-icon-size, 1rem);
+    height: var(--toast-close-icon-size, 1rem);
+  }
+
+  .xGZ1aG_positioner {
+    pointer-events: none;
+  }
+}