@px-ui/core 2.1.0 → 3.1.0

package/dist/index.js

@@ -1,28 +1,28 @@
 import { n as __reExport, t as __export } from "./chunk-CYeTv9WL.js";
 import * as React$1 from "react";
-import React, { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
-import { Dialog } from "@base-ui-components/react";
+import React, { createContext, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { Collapsible, Dialog, Toast } from "@base-ui/react";
 import classnames from "classnames";
 import { extendTailwindMerge } from "tailwind-merge";
 import { cva } from "class-variance-authority";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Popover } from "@base-ui-components/react/popover";
-import { Combobox } from "@base-ui-components/react/combobox";
+import { Popover } from "@base-ui/react/popover";
+import { Combobox } from "@base-ui/react/combobox";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { Select } from "@base-ui-components/react/select";
-import { Menu } from "@base-ui-components/react/menu";
-import { Progress } from "@base-ui-components/react/progress";
-import { Radio } from "@base-ui-components/react/radio";
-import { RadioGroup } from "@base-ui-components/react/radio-group";
-import { Tabs } from "@base-ui-components/react/tabs";
-import { Tooltip } from "@base-ui-components/react/tooltip";
-import { CheckboxGroup } from "@base-ui-components/react/checkbox-group";
-import { Checkbox as Checkbox$1 } from "@base-ui-components/react/checkbox";
-import { useRender } from "@base-ui-components/react/use-render";
-import { mergeProps } from "@base-ui-components/react/merge-props";
+import { Select } from "@base-ui/react/select";
+import { Menu } from "@base-ui/react/menu";
+import { Progress } from "@base-ui/react/progress";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { Tabs } from "@base-ui/react/tabs";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import { Avatar as Avatar$1 } from "@base-ui-components/react/avatar";
-import { Switch as Switch$1 } from "@base-ui-components/react/switch";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { format } from "date-fns";
 
 export * from "class-variance-authority"
@@ -82,7 +82,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 			default: "px-4 py-2 h-10 has-[>svg]:px-3 text-ppx-base",
 			sm: "gap-1.5 px-3 has-[>svg]:px-2.5 h-8 text-ppx-sm",
 			lg: "px-6 h-12 text-ppx-base font-sans-sb has-[>svg]:px-4",
-			"icon-sm": "h-8 size-8",
+			"icon-sm": "size-8",
 			icon: "size-10 px-2"
 		}
 	},
@@ -133,11 +133,11 @@ var dialog_exports = /* @__PURE__ */ __export({
 	HeaderIcon: () => HeaderIcon,
 	Overlay: () => Overlay,
 	Portal: () => Portal$1,
-	Root: () => Root$10,
+	Root: () => Root$11,
 	Title: () => Title$3,
-	Trigger: () => Trigger$7
+	Trigger: () => Trigger$8
 });
-function Root$10({ ...props }) {
+function Root$11({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		"data-slot": "dialog",
 		...props
@@ -149,7 +149,7 @@ function Portal$1({ ...props }) {
 		...props
 	});
 }
-function Trigger$7({ ...props }) {
+function Trigger$8({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-slot": "dialog-trigger",
 		...props
@@ -242,11 +242,11 @@ var popover_exports = /* @__PURE__ */ __export({
 	Description: () => Description$2,
 	Footer: () => Footer,
 	Header: () => Header$2,
-	Root: () => Root$9,
+	Root: () => Root$10,
 	Title: () => Title$2,
-	Trigger: () => Trigger$6
+	Trigger: () => Trigger$7
 });
-function Root$9(props) {
+function Root$10(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		"data-slot": "popover",
 		...props
@@ -258,7 +258,7 @@ function Portal(props) {
 		...props
 	});
 }
-function Trigger$6(props) {
+function Trigger$7(props) {
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
 		"data-slot": "popover-trigger",
 		...props
@@ -531,7 +531,7 @@ var input_group_exports = /* @__PURE__ */ __export({
 	Addon: () => Addon,
 	Button: () => Button$1,
 	Input: () => Input$1,
-	Root: () => Root$8,
+	Root: () => Root$9,
 	Text: () => Text
 });
 const inputGroupVariants = cva("group/input-group relative flex items-center border border-ppx-neutral-5 bg-ppx-neutral-1 outline-transparent has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:-outline-offset-1 has-[[data-slot=input-group-control]:focus-visible]:bg-ppx-background has-[[data-slot=input-group-control]:focus-visible]:outline-ppx-primary-focus has-[[data-slot][aria-invalid=true]]:outline-ppx-red-4 has-[[data-slot][aria-invalid=true]]:outline has-[[data-slot][aria-invalid=true]]:-outline-offset-1 has-[[data-slot][aria-invalid=true]]:bg-ppx-red-1 has-[[data-slot=input-group-control]:disabled]:*:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-ppx-neutral-3 has-[[data-slot=input-group-control]:disabled]:bg-ppx-neutral-3 has-[[data-slot=input-group-control]:disabled]:text-ppx-neutral-11 has-[>[data-align=inline-start]]:[&>input]:pl-input has-[>[data-align=inline-end]]:[&>input]:pr-input", {
@@ -551,7 +551,7 @@ const inputGroupVariants = cva("group/input-group relative flex items-center bor
 		widthVariant: "full"
 	}
 });
-function Root$8({ className, size, disabled, widthVariant, ...props }) {
+function Root$9({ className, size, disabled, widthVariant, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
@@ -692,18 +692,18 @@ var combobox_exports = /* @__PURE__ */ __export({
 	List: () => List$2,
 	LoadingIndicator: () => LoadingIndicator,
 	MultiItem: () => MultiItem$1,
-	Root: () => Root$7,
+	Root: () => Root$8,
 	Search: () => Search,
 	SearchableTrigger: () => SearchableTrigger,
 	SearchableTriggerDropdownAddon: () => SearchableTriggerDropdownAddon,
-	Trigger: () => Trigger$5,
+	Trigger: () => Trigger$6,
 	Value: () => Value$2,
 	useComboboxContext: () => useComboboxContext
 });
 const SINGLE_TEXT_CONTENT_CN = "px-4 py-2 text-ppx-sm min-h-11 flex items-center justify-center text-ppx-muted-foreground";
 const List$2 = Combobox.List;
 const ComboboxContext = React$1.createContext({});
-function Root$7({ children, ...props }) {
+function Root$8({ children, ...props }) {
 	const chipsTriggerRef = React$1.useRef(null);
 	const searchableTriggerRef = React$1.useRef(null);
 	const [isOpen, setIsOpen] = React$1.useState(false);
@@ -821,7 +821,7 @@ function LoadingIndicator(props) {
 }
 function SearchableTrigger(props) {
 	const { invalid, disabled, searchableTriggerRef } = useComboboxContext();
-	return /* @__PURE__ */ jsxs(Root$8, {
+	return /* @__PURE__ */ jsxs(Root$9, {
 		...props,
 		disabled,
 		ref: searchableTriggerRef,
@@ -860,7 +860,7 @@ function SearchableTriggerDropdownAddon() {
 		]
 	});
 }
-function Trigger$5({ size, widthVariant, children, className, ...props }) {
+function Trigger$6({ size, widthVariant, children, className, ...props }) {
 	const { isLoading, invalid } = useComboboxContext();
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
 		"aria-label": "Open popup",
@@ -970,15 +970,15 @@ var select_exports = /* @__PURE__ */ __export({
 	List: () => List$1,
 	MultiItem: () => MultiItem,
 	MultiSelectedValue: () => MultiSelectedValue,
-	Root: () => Root$6,
-	Trigger: () => Trigger$4,
+	Root: () => Root$7,
+	Trigger: () => Trigger$5,
 	Value: () => Value$1
 });
 const SelectContext = React$1.createContext({});
 function useSelectContext() {
 	return React$1.useContext(SelectContext);
 }
-function Root$6({ children, invalid, ...props }) {
+function Root$7({ children, invalid, ...props }) {
 	const value = React$1.useMemo(() => ({ invalid }), [invalid]);
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {
 		value,
@@ -1028,7 +1028,7 @@ function ItemIndicator(props) {
 		children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 	});
 }
-function Trigger$4({ size, widthVariant, ...props }) {
+function Trigger$5({ size, widthVariant, ...props }) {
 	const { invalid } = useSelectContext();
 	return /* @__PURE__ */ jsxs(Select.Trigger, {
 		"aria-label": "Open popup",
@@ -1086,12 +1086,12 @@ var menu_exports = /* @__PURE__ */ __export({
 	Item: () => Item$5,
 	RadioGroup: () => RadioGroup$1,
 	RadioItem: () => RadioItem,
-	Root: () => Root$5,
+	Root: () => Root$6,
 	Separator: () => Separator$1,
-	Trigger: () => Trigger$3
+	Trigger: () => Trigger$4
 });
-const Root$5 = Menu.Root;
-function Trigger$3({ className, children, size, widthVariant = "fit", ...props }) {
+const Root$6 = Menu.Root;
+function Trigger$4({ className, children, size, widthVariant = "fit", ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Trigger, {
 		className: cn(triggerVariants({
 			size,
@@ -1157,7 +1157,7 @@ var progress_exports = /* @__PURE__ */ __export({
 	BaseProgress: () => BaseProgress,
 	Indicator: () => Indicator$1,
 	Label: () => Label$1,
-	Root: () => Root$4,
+	Root: () => Root$5,
 	Track: () => Track,
 	Value: () => Value
 });
@@ -1169,7 +1169,7 @@ const progressTrackVariants = cva("relative h-2 w-full overflow-hidden rounded-f
 	} },
 	defaultVariants: { size: "default" }
 });
-const Root$4 = Progress.Root;
+const Root$5 = Progress.Root;
 function Track({ className, size, children, ...props }) {
 	return /* @__PURE__ */ jsx(Progress.Track, {
 		className: cn(progressTrackVariants({ size }), className),
@@ -1201,9 +1201,9 @@ const BaseProgress = Progress;
 //#region src/components/segmented-control.tsx
 var segmented_control_exports = /* @__PURE__ */ __export({
 	Item: () => Item$4,
-	Root: () => Root$3
+	Root: () => Root$4
 });
-const segmentedControlItemVariants = cva("relative flex items-center justify-center px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out cursor-pointer rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ppx-primary-5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
+const segmentedControlItemVariants = cva("relative flex items-center justify-center px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out cursor-pointer rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ppx-primary-5 focus-visible:ring-offset-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", {
 	variants: {
 		variant: { default: "text-ppx-neutral-11 data-checked:bg-ppx-primary-5 data-checked:text-white data-checked:shadow-sm hover:text-ppx-neutral-12" },
 		size: {
@@ -1217,10 +1217,10 @@ const segmentedControlItemVariants = cva("relative flex items-center justify-cen
 		size: "default"
 	}
 });
-function Root$3({ className, ...props }) {
+function Root$4({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "segmented-control",
-		className: cn("p-1 inline-flex items-center rounded-full bg-ppx-neutral-3", className),
+		className: cn("bg-ppx-neutral-3 inline-flex items-center rounded-full p-1", className),
 		...props
 	});
 }
@@ -1242,8 +1242,8 @@ function Item$4({ children, className, variant, size, ...props }) {
 var tabs_exports = /* @__PURE__ */ __export({
 	Content: () => Content$1,
 	List: () => List,
-	Root: () => Root$2,
-	Trigger: () => Trigger$2
+	Root: () => Root$3,
+	Trigger: () => Trigger$3
 });
 const TabsContext = React$1.createContext(null);
 const useTabs = () => {
@@ -1251,7 +1251,7 @@ const useTabs = () => {
 	if (!context) throw new Error("useTabs must be used within a Tabs");
 	return context;
 };
-function Root$2({ variant = "underline", className, ...props }) {
+function Root$3({ variant = "underline", className, ...props }) {
 	return /* @__PURE__ */ jsx(TabsContext.Provider, {
 		value: { variant },
 		children: /* @__PURE__ */ jsx(Tabs.Root, {
@@ -1273,7 +1273,7 @@ function List({ className, children, ...props }) {
 		]
 	});
 }
-function Trigger$2({ className, ...props }) {
+function Trigger$3({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		"data-slot": "tabs-trigger",
 		className: cn("focus-visible:ring-ring/50 [&_svg:not([class*='size-'])] gap-1.5 px-2 py-1 text-sm font-medium z-[1] flex-1 items-center justify-center text-nowrap whitespace-nowrap text-ppx-neutral-18 not-data-selected:hover:text-ppx-neutral-12 focus-visible:ring-[3px] data-selected:text-ppx-primary-b-5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
@@ -1302,8 +1302,8 @@ var tooltip_exports = /* @__PURE__ */ __export({
 	BaseProvider: () => BaseProvider,
 	BaseRoot: () => BaseRoot,
 	Content: () => Content,
-	Root: () => Root$1,
-	Trigger: () => Trigger$1
+	Root: () => Root$2,
+	Trigger: () => Trigger$2
 });
 function TooltipProvider(props) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, {
@@ -1329,7 +1329,7 @@ function TooltipArrow({ ...props }) {
 		...props
 	});
 }
-function Root$1({ ...props }) {
+function Root$2({ ...props }) {
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip.Root, {
 		"data-slot": "tooltip",
 		...props
@@ -1337,7 +1337,7 @@ function Root$1({ ...props }) {
 }
 const BaseRoot = Tooltip.Root;
 const BaseProvider = Tooltip.Provider;
-function Trigger$1({ ...props }) {
+function Trigger$2({ ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
 		"data-slot": "tooltip-trigger",
 		...props
@@ -1374,7 +1374,7 @@ function Content({ className, align = "center", sideOffset = 8, side = "top", ch
 
 //#endregion
 //#region src/components/checkbox.tsx
-const checkboxVariants = cva("peer aria-invalid:border-ppx-red-5 aria-invalid:text-shadow-ppx-red-5 flex items-center justify-center rounded-sm border transition-colors duration-150 outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", {
+const checkboxVariants = cva("peer aria-invalid:border-ppx-red-5 aria-invalid:text-shadow-ppx-red-5 flex items-center justify-center rounded-sm border transition-colors duration-150 outline-none focus-visible:ring-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", {
 	variants: {
 		variant: { default: "bg-white data-checked:bg-ppx-primary-5 data-[indeterminate]:bg-ppx-primary-5 data-checked:text-white data-[indeterminate]:text-white  border-ppx-neutral-10 data-checked:border-ppx-primary-5 data-[indeterminate]:border-ppx-primary-5" },
 		size: {
@@ -1439,13 +1439,13 @@ var block_checkbox_group_exports = /* @__PURE__ */ __export({
 });
 function Group$2({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxGroup, {
-		className: cn("gap-4 flex", className),
+		className: cn("flex gap-4", className),
 		...props
 	});
 }
 function Item$3({ className, invalid, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("label", {
-		className: cn("gap-2 p-5 flex min-h-[155px] justify-between rounded-ppx-s border-2 border-ppx-neutral-3 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300 has-not-disabled:hover:border-ppx-neutral-6 has-disabled:cursor-not-allowed has-disabled:opacity-60 has-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5!", className),
+		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-data-disabled:hover:border-ppx-neutral-6 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-60 has-data-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex-1",
 			children
@@ -1459,7 +1459,7 @@ function Item$3({ className, invalid, children, ...rest }) {
 }
 function Header$1(props) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("mb-5 gap-2 flex items-center", props.className),
+		className: cn("mb-5 flex items-center gap-2", props.className),
 		children: props.children
 	});
 }
@@ -1471,7 +1471,7 @@ function Title$1(props) {
 }
 function Description$1(props) {
 	return /* @__PURE__ */ jsx("p", {
-		className: cn("mb-5 text-ppx-sm text-ppx-muted-foreground", props.className),
+		className: cn("text-ppx-sm text-ppx-muted-foreground mb-5", props.className),
 		children: props.children
 	});
 }
@@ -1489,7 +1489,7 @@ function Group$1({ className, ...props }) {
 		...props
 	});
 }
-const radioVariants = cva("bg-white aria-invalid:border-ppx-red-5 aspect-square shrink-0 rounded-full border border-ppx-neutral-10 shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 ", {
+const radioVariants = cva("relative inline-flex bg-ppx-background aria-invalid:border-ppx-red-5 aspect-square shrink-0 rounded-full border border-ppx-neutral-10 shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 items-center justify-center", {
 	variants: {
 		variant: { default: "data-checked:border-ppx-primary-5 text-ppx-primary-5" },
 		size: {
@@ -1525,7 +1525,7 @@ function Item$1({ className, variant, size, ...props }) {
 				strokeWidth: "2",
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
-				className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", size === "sm" && "size-2", size === void 0 && "size-3", size === "lg" && "size-3.5"),
+				className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", size === "sm" && "size-2", size === void 0 || size === "default" ? "size-3" : "", size === "lg" && "size-3.5"),
 				children: /* @__PURE__ */ jsx("circle", {
 					cx: "12",
 					cy: "12",
@@ -1554,7 +1554,7 @@ function Group({ className, ...props }) {
 }
 function Item$2({ className, invalid, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("label", {
-		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-disabled:hover:border-ppx-neutral-6 has-disabled:cursor-not-allowed has-disabled:opacity-60 has-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
+		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-data-disabled:hover:border-ppx-neutral-6 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-60 has-data-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex-1",
 			children
@@ -1644,6 +1644,39 @@ function BreadcrumbSeparator({ children, className, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/components/collapsible.tsx
+var collapsible_exports = /* @__PURE__ */ __export({
+	Panel: () => Panel,
+	Root: () => Root$1,
+	ToggleIcon: () => ToggleIcon,
+	Trigger: () => Trigger$1
+});
+function Root$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function Trigger$1(props) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "collapsible-trigger",
+		...props,
+		className: cn("group flex items-center gap-2", props.className)
+	});
+}
+function Panel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "collapsible-content",
+		className: cn("flex h-[var(--collapsible-panel-height)] w-full flex-col overflow-hidden transition-all duration-150 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 [&[hidden]:not([hidden='until-found'])]:hidden", className),
+		...props
+	});
+}
+function ToggleIcon() {
+	return /* @__PURE__ */ jsx(ChevronDownIcon, { className: "rotate-270 group-data-[panel-open]:rotate-360 transition-all ease-out" });
+}
+
 //#endregion
 //#region src/components/calendar.tsx
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", formatters, components, ...props }) {
@@ -1743,12 +1776,291 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/icons/circle-alert-icon.tsx
+function CircleAlertIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("size-4 shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				x2: "12",
+				y1: "8",
+				y2: "12"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				x2: "12.01",
+				y1: "16",
+				y2: "16"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/circle-check-icon.tsx
+function CircleCheckIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("size-4 shrink-0", props.className),
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}), /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })]
+	});
+}
+
+//#endregion
+//#region src/icons/info-icon.tsx
+function InfoIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("size-4 shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/triangle-alert-icon.tsx
+function TriangleAlertIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("size-4 shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/spinner-icon.tsx
+function SpinnerIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+	});
+}
+
+//#endregion
+//#region src/components/toast.tsx
+const toast = Toast.createToastManager();
+const anchoredToast = Toast.createToastManager();
+const TOAST_ICONS = {
+	error: CircleAlertIcon,
+	info: InfoIcon,
+	loading: SpinnerIcon,
+	success: CircleCheckIcon,
+	warning: TriangleAlertIcon
+};
+function ToastProvider({ children, position = "top-center", ...props }) {
+	return /* @__PURE__ */ jsxs(Toast.Provider, {
+		toastManager: toast,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Toasts, { position })]
+	});
+}
+function Toasts(props) {
+	const { position = "top-center" } = props;
+	const { toasts } = Toast.useToastManager();
+	const isTop = position.startsWith("top");
+	const hasLoadingToast = toasts.some((t) => t.type === "loading");
+	return /* @__PURE__ */ jsxs(Toast.Portal, {
+		"data-slot": "toast-portal",
+		children: [hasLoadingToast && /* @__PURE__ */ jsx("div", {
+			className: "bg-ppx-foreground/20 fixed inset-0 z-40 transition-opacity",
+			"data-slot": "toast-backdrop"
+		}), /* @__PURE__ */ jsx(Toast.Viewport, {
+			className: cn("max-w-90 fixed z-50 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]", "data-[position*=top]:top-(--toast-inset)", "data-[position*=bottom]:bottom-(--toast-inset)", "data-[position*=left]:left-(--toast-inset)", "data-[position*=right]:right-(--toast-inset)", "data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2"),
+			"data-position": position,
+			"data-slot": "toast-viewport",
+			children: toasts.map((toast$1) => {
+				const Icon = toast$1.type ? TOAST_ICONS[toast$1.type] : null;
+				return /* @__PURE__ */ jsx(Toast.Root, {
+					className: cn("h-(--toast-calc-height) bg-ppx-background text-ppx-foreground rounded-ppx-m absolute z-[calc(9999-var(--toast-index))] w-full select-none border bg-clip-padding shadow-lg [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-ppx-m)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)]", "data-[position*=right]:left-auto data-[position*=right]:right-0", "data-[position*=left]:left-0 data-[position*=left]:right-auto", "data-[position*=center]:left-0 data-[position*=center]:right-0", "data-[position*=top]:bottom-auto data-[position*=top]:top-0 data-[position*=top]:origin-top", "data-[position*=bottom]:bottom-0 data-[position*=bottom]:top-auto data-[position*=bottom]:origin-bottom", "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", toast$1.type === "success" && "bg-ppx-green-1", toast$1.type === "info" && "bg-ppx-primary-b-1", toast$1.type === "warning" && "bg-ppx-yellow-1", toast$1.type === "error" && "bg-ppx-red-1"),
+					"data-position": position,
+					swipeDirection: position.includes("center") ? [isTop ? "up" : "down"] : position.includes("left") ? ["left", isTop ? "up" : "down"] : ["right", isTop ? "up" : "down"],
+					toast: toast$1,
+					children: /* @__PURE__ */ jsxs(Toast.Content, {
+						className: "duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100 text-ppx-sm pointer-events-auto flex flex-col gap-2.5 overflow-hidden px-3.5 py-4 transition-opacity",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [Icon && /* @__PURE__ */ jsx("div", {
+								className: "[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+								"data-slot": "toast-icon",
+								children: /* @__PURE__ */ jsx(Icon, { className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-ppx-red-5 in-data-[type=info]:text-ppx-primary-b-5 in-data-[type=success]:text-ppx-green-5 in-data-[type=warning]:text-ppx-yellow-5 in-data-[type=loading]:opacity-80" })
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1.5",
+								children: [
+									/* @__PURE__ */ jsx(Toast.Title, {
+										className: "text-ppx-base font-medium leading-none",
+										"data-slot": "toast-title"
+									}),
+									/* @__PURE__ */ jsx(Toast.Description, {
+										className: "text-ppx-muted-foreground",
+										"data-slot": "toast-description"
+									}),
+									toast$1.type === "loading" ? null : /* @__PURE__ */ jsx(Toast.Close, {
+										className: buttonVariants({
+											size: "icon-sm",
+											variant: "ghost",
+											className: "absolute right-2 top-2 shrink-0"
+										}),
+										"aria-label": "Close",
+										children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+									})
+								]
+							})]
+						}), toast$1.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
+							className: buttonVariants({ size: "sm" }),
+							"data-slot": "toast-action",
+							children: toast$1.actionProps.children
+						})]
+					})
+				}, toast$1.id);
+			})
+		})]
+	});
+}
+function AnchoredToastProvider({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Toast.Provider, {
+		toastManager: anchoredToast,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(AnchoredToasts, {})]
+	});
+}
+function AnchoredToasts() {
+	const { toasts } = Toast.useToastManager();
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal-anchored",
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			className: "outline-none",
+			"data-slot": "toast-viewport-anchored",
+			children: toasts.map((toast$1) => {
+				const Icon = toast$1.type ? TOAST_ICONS[toast$1.type] : null;
+				const tooltipStyle = toast$1.data?.tooltipStyle ?? false;
+				const positionerProps = toast$1.positionerProps;
+				if (!positionerProps?.anchor) return null;
+				return /* @__PURE__ */ jsx(Toast.Positioner, {
+					className: "z-50 max-w-[min(--spacing(64),var(--available-width))]",
+					"data-slot": "toast-positioner",
+					sideOffset: positionerProps.sideOffset ?? 4,
+					toast: toast$1,
+					children: /* @__PURE__ */ jsx(Toast.Root, {
+						className: cn("bg-ppx-background text-ppx-foreground data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 text-ppx-sm relative text-balance border bg-clip-padding transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)]", tooltipStyle ? "rounded-ppx-m shadow-md shadow-black/5 before:rounded-[calc(var(--radius-ppx-s)-1px)]" : "rounded-ppx-l shadow-lg before:rounded-[calc(var(--radius-ppx-m)-1px)]", toast$1.type === "success" && "bg-ppx-green-1", toast$1.type === "info" && "bg-ppx-primary-b-1", toast$1.type === "warning" && "bg-ppx-yellow-1", toast$1.type === "error" && "bg-ppx-red-1"),
+						"data-slot": "toast-popup",
+						toast: toast$1,
+						children: tooltipStyle ? /* @__PURE__ */ jsx(Toast.Content, {
+							className: "pointer-events-auto px-2 py-1",
+							children: /* @__PURE__ */ jsx(Toast.Title, { "data-slot": "toast-title" })
+						}) : /* @__PURE__ */ jsxs(Toast.Content, {
+							className: "text-ppx-sm pointer-events-auto relative flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2",
+								children: [Icon && /* @__PURE__ */ jsx("div", {
+									className: "[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+									"data-slot": "toast-icon",
+									children: /* @__PURE__ */ jsx(Icon, { className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-ppx-red-5 in-data-[type=info]:text-ppx-primary-b-5 in-data-[type=success]:text-ppx-green-5 in-data-[type=warning]:text-ppx-yellow-5 in-data-[type=loading]:opacity-80" })
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-col gap-0.5",
+									children: [/* @__PURE__ */ jsx(Toast.Title, {
+										className: "text-ppx-base font-medium leading-none",
+										"data-slot": "toast-title"
+									}), /* @__PURE__ */ jsx(Toast.Description, {
+										className: "text-ppx-muted-foreground",
+										"data-slot": "toast-description"
+									})]
+								})]
+							}), toast$1.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
+								className: buttonVariants({ size: "sm" }),
+								"data-slot": "toast-action",
+								children: toast$1.actionProps.children
+							})]
+						})
+					})
+				}, toast$1.id);
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/providers/px-ui-provider.tsx
+const PXUIContext = createContext(null);
+function PXUIProvider(props) {
+	return /* @__PURE__ */ jsx(PXUIContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(AnchoredToastProvider, { children: props.children }) })
+	});
+}
+
 //#endregion
 //#region src/components/label.tsx
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx("label", {
 		"data-slot": "label",
-		className: cn("gap-2 font-medium flex items-center text-ppx-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: cn("text-ppx-sm peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50 group-data-disabled:pointer-events-none group-data-disabled:opacity-50 flex select-none items-center gap-2 font-medium leading-none", className),
 		...props
 	});
 }
@@ -1869,9 +2181,9 @@ const replaceSizeInUrl = (url, size) => {
 	return url.replace("/SIZE/", `/${newSize}/`);
 };
 function Avatar(props) {
-	return /* @__PURE__ */ jsxs(Root$1, {
+	return /* @__PURE__ */ jsxs(Root$2, {
 		disabled: props.hideTooltip,
-		children: [/* @__PURE__ */ jsx(Trigger$1, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
+		children: [/* @__PURE__ */ jsx(Trigger$2, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
 			...props,
 			avatarRootProps: tooltipProps
 		}) }), /* @__PURE__ */ jsx(Content, { children: props.name })]
@@ -1916,7 +2228,7 @@ function AvatarGroup({ max = 4, avatars, className }) {
 	return /* @__PURE__ */ jsx(BaseProvider, { children: /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center", className),
 		"data-slot": "avatar-group",
-		children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger$1, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
+		children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger$2, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
 			className: "relative",
 			style: {
 				marginLeft: index > 0 ? `-${parseInt(avatar.size ?? "100px") * .25}px` : "0",
@@ -1933,9 +2245,9 @@ function AvatarGroup({ max = 4, avatars, className }) {
 				marginLeft: `-${parseInt(avatars[0].size ?? "100px") * .25}px`,
 				zIndex: 0
 			},
-			children: /* @__PURE__ */ jsxs(Root$9, {
+			children: /* @__PURE__ */ jsxs(Root$10, { children: [/* @__PURE__ */ jsx(Trigger$7, {
 				openOnHover: true,
-				children: [/* @__PURE__ */ jsx(Trigger$6, { children: /* @__PURE__ */ jsxs("div", {
+				children: /* @__PURE__ */ jsxs("div", {
 					className: cn("bg-ppx-neutral-3 text-ppx-neutral-18 hover:bg-ppx-neutral-4 flex cursor-pointer items-center justify-center font-medium transition-colors", avatars[0].variant === "rounded" ? "rounded-full" : "rounded-ppx-s"),
 					style: {
 						width: avatars[0].size ?? "100px",
@@ -1943,28 +2255,28 @@ function AvatarGroup({ max = 4, avatars, className }) {
 						fontSize: `${parseInt(avatars[0].size ?? "100px") * .3}px`
 					},
 					children: ["+", overflowAvatars.length]
-				}) }), /* @__PURE__ */ jsx(Content$5, {
-					className: "w-80",
-					positionerProps: {
-						align: "start",
-						side: "top"
-					},
-					children: /* @__PURE__ */ jsx("div", {
-						className: "max-h-64 space-y-2 overflow-y-auto",
-						children: overflowAvatars.map((avatar) => /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-3 rounded-md p-2",
-							children: [/* @__PURE__ */ jsx(Avatar, {
-								...avatar,
-								size: "24px",
-								hideTooltip: true
-							}), /* @__PURE__ */ jsx("span", {
-								className: "text-ppx-neutral-18 text-sm font-medium",
-								children: avatar.name
-							})]
-						}, avatar.name))
-					})
-				})]
-			})
+				})
+			}), /* @__PURE__ */ jsx(Content$5, {
+				className: "w-80",
+				positionerProps: {
+					align: "start",
+					side: "top"
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					className: "max-h-64 space-y-2 overflow-y-auto",
+					children: overflowAvatars.map((avatar) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3 rounded-md p-2",
+						children: [/* @__PURE__ */ jsx(Avatar, {
+							...avatar,
+							size: "24px",
+							hideTooltip: true
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-ppx-neutral-18 text-sm font-medium",
+							children: avatar.name
+						})]
+					}, avatar.name))
+				})
+			})] })
 		})]
 	}) });
 }
@@ -1974,11 +2286,11 @@ function AvatarGroup({ max = 4, avatars, className }) {
 function Switch({ className, size, ...props }) {
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
 		"data-slot": "switch",
-		className: cn("peer shadow-xs inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-ppx-primary-5 data-unchecked:bg-ppx-neutral-4", size === "sm" && "h-4 w-8", size === void 0 && "h-5 w-10", size === "lg" && "h-6 w-12", className),
+		className: cn("shadow-xs focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30 data-checked:bg-ppx-primary-5 data-unchecked:bg-ppx-neutral-4 data-disabled:cursor-not-allowed data-disabled:opacity-50 peer inline-flex shrink-0 items-center rounded-full border border-transparent outline-none transition-all", size === "sm" && "h-4 w-8", size === void 0 || size === "default" ? "h-5 w-10" : "", size === "lg" && "h-6 w-12", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn("ease-in-out pointer-events-none block rounded-full bg-ppx-neutral-1 ring-0 transition-transform duration-300", size === "sm" && "size-3.5 data-checked:translate-x-[calc(100%+2px)]", size === void 0 && "size-4 data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px", size === "lg" && "size-5 data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px")
+			className: cn("bg-ppx-neutral-1 pointer-events-none block rounded-full ring-0 transition-transform duration-300 ease-in-out", size === "sm" && "data-checked:translate-x-[calc(100%+2px)] size-3.5", size === void 0 || size === "default" ? "data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px size-4" : "", size === "lg" && "data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px size-5")
 		})
 	});
 }
@@ -2023,11 +2335,11 @@ function DatePicker({ triggerProps, placeholder = "Pick a date", format: format$
 		calendarProps.onSelect(...args);
 		!calendarProps.mode || calendarProps.mode === "single" && setOpen(false);
 	};
-	return /* @__PURE__ */ jsxs(Root$9, {
+	return /* @__PURE__ */ jsxs(Root$10, {
 		open,
 		onOpenChange: setOpen,
 		...popoverRootProps,
-		children: [/* @__PURE__ */ jsxs(Trigger$6, {
+		children: [/* @__PURE__ */ jsxs(Trigger$7, {
 			disabled: triggerProps?.disabled,
 			className: cn(triggerVariants({
 				size: triggerProps?.size,
@@ -2093,23 +2405,6 @@ function RetryIcon(props) {
 	});
 }
 
-//#endregion
-//#region src/icons/spinner-icon.tsx
-function SpinnerIcon(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		...props,
-		className: cn("shrink-0", props.className),
-		children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-	});
-}
-
 //#endregion
 //#region src/icons/upload-icon.tsx
 function UploadIcon(props) {
@@ -2863,6 +3158,23 @@ const FileUpload = {
 	ImageGridItem
 };
 
+//#endregion
+//#region src/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React$1.useState(void 0);
+	React$1.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+
 //#endregion
 //#region src/index.ts
 var src_exports = /* @__PURE__ */ __export({
@@ -2875,6 +3187,7 @@ var src_exports = /* @__PURE__ */ __export({
 	Button: () => Button,
 	Calendar: () => Calendar,
 	Checkbox: () => Checkbox,
+	Collapsible: () => collapsible_exports,
 	Combobox: () => combobox_exports,
 	DatePicker: () => DatePicker,
 	Dialog: () => dialog_exports,
@@ -2884,6 +3197,7 @@ var src_exports = /* @__PURE__ */ __export({
 	InputGroup: () => input_group_exports,
 	Label: () => Label,
 	Menu: () => menu_exports,
+	PXUIProvider: () => PXUIProvider,
 	Popover: () => popover_exports,
 	Progress: () => progress_exports,
 	RadioGroup: () => radio_group_exports,
@@ -2896,15 +3210,18 @@ var src_exports = /* @__PURE__ */ __export({
 	Textarea: () => Textarea,
 	Tooltip: () => tooltip_exports,
 	UploadIcon: () => UploadIcon,
+	anchoredToast: () => anchoredToast,
 	buttonVariants: () => buttonVariants,
 	cn: () => cn,
 	defineLoadOptions: () => defineLoadOptions,
 	formatBytes: () => formatBytes,
+	toast: () => toast,
 	useAsyncOptions: () => useAsyncOptions,
 	useFileUpload: () => useFileUpload,
-	useIntersectionObserver: () => useIntersectionObserver
+	useIntersectionObserver: () => useIntersectionObserver,
+	useIsMobile: () => useIsMobile
 });
 
 //#endregion
-export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, FileIcon, FileUpload, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, UploadIcon, buttonVariants, cn, defineLoadOptions, formatBytes, useAsyncOptions, useFileUpload, useIntersectionObserver };
+export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, collapsible_exports as Collapsible, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, FileIcon, FileUpload, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, PXUIProvider, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, UploadIcon, anchoredToast, buttonVariants, cn, defineLoadOptions, formatBytes, toast, useAsyncOptions, useFileUpload, useIntersectionObserver, useIsMobile };
 //# sourceMappingURL=index.js.map