@powerhousedao/design-system 6.2.3-dev.71 → 6.2.3-dev.72

package/dist/connect/index.js

@@ -1,11 +1,11 @@
-import { _ as DropdownMenuItem, b as PowerhouseButton, c as SidebarHeader, d as PackageAnimation, f as Modal, g as DropdownMenuContent, h as DropdownMenu, l as SidebarPanel, o as Sidebar, s as SidebarFooter, t as useWindowSize, y as DropdownMenuTrigger } from "../src-CohvVFnR.js";
-import { n as getDimensions, t as Icon } from "../icon-CHR45tj_.js";
+import { _ as DropdownMenuItem, b as PowerhouseButton, c as SidebarHeader, d as PackageAnimation, f as Modal, g as DropdownMenuContent, h as DropdownMenu, l as SidebarPanel, o as Sidebar, s as SidebarFooter, t as useWindowSize, y as DropdownMenuTrigger } from "../src-DhSJCeu5.js";
+import { n as getDimensions, t as Icon } from "../icon-DQ2yrWYv.js";
 import { Checkbox } from "../ui/components/checkbox/checkbox.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/components/popover/popover.js";
 import { Input } from "../ui/components/input/input.js";
 import { JsonViewer } from "../ui/components/json-viewer/json-viewer.js";
 import "../ui/index.js";
-import { a as lazyComponent, i as ENSAvatar, n as useEns, r as FormattedJsonViewer, t as formatEthAddress } from "../address-DfZqD6IM.js";
+import { a as lazyComponent, i as ENSAvatar, n as useEns, r as FormattedJsonViewer, t as formatEthAddress } from "../address-DVC3zalI.js";
 import { t as Label } from "../label-nH2HoKfI.js";
 import React, { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { twJoin, twMerge } from "tailwind-merge";
@@ -668,7 +668,7 @@ function CatchUpInspector({ status, onRefresh, onSweepNow }) {
 }
 //#endregion
 //#region src/connect/components/combobox/combobox.tsx
-const Combobox = lazyComponent(() => import("../combobox.impl-EqgAawKJ.js").then((m) => m.Combobox));
+const Combobox = lazyComponent(() => import("../combobox.impl-CQHG0NgO.js").then((m) => m.Combobox));
 //#endregion
 //#region src/connect/components/consent-banner/consent-banner.tsx
 const CookieBanner = (props) => {
@@ -2111,7 +2111,7 @@ function DocumentStateViewer({ state, ignoredScopes = ["auth", "document"], defa
 }
 //#endregion
 //#region src/connect/components/document-timeline/document-timeline.tsx
-const DocumentTimeline = lazyComponent(() => import("../document-timeline.impl-CCkyXpt5.js").then((m) => m.DocumentTimeline));
+const DocumentTimeline = lazyComponent(() => import("../document-timeline.impl-zx6f7k2d.js").then((m) => m.DocumentTimeline));
 //#endregion
 //#region src/connect/components/document-toolbar/containers.tsx
 /**
@@ -4077,10 +4077,10 @@ const FormInput = /*#__PURE__*/ forwardRef(function FormInput(props, ref) {
 });
 //#endregion
 //#region src/connect/components/form/add-local-drive-form.tsx
-const AddLocalDriveForm = lazyComponent(() => import("../add-local-drive-form.impl-xsC6R634.js").then((m) => m.AddLocalDriveForm));
+const AddLocalDriveForm = lazyComponent(() => import("../add-local-drive-form.impl-B8f13Rzz.js").then((m) => m.AddLocalDriveForm));
 //#endregion
 //#region src/connect/components/form/add-remote-drive-form.tsx
-const AddRemoteDriveForm = lazyComponent(() => import("../add-remote-drive-form.impl-B2DxdWGF.js").then((m) => m.AddRemoteDriveForm));
+const AddRemoteDriveForm = lazyComponent(() => import("../add-remote-drive-form.impl-_SqOzbSt.js").then((m) => m.AddRemoteDriveForm));
 //#endregion
 //#region src/connect/components/branding/background-layers.tsx
 /**
@@ -4285,12 +4285,12 @@ const HomeScreenAddDriveItem = function HomeScreenAddDriveItem(props) {
 const HomeScreen = function HomeScreen(props) {
 	const { children, containerClassName } = props;
 	const background = normalizeBackground(props.homeBackground);
-	const content = /* @__PURE__ */ jsx("div", {
-		className: twMerge("relative container mx-auto flex h-full flex-col", containerClassName),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: twMerge("m-8 flex flex-wrap justify-center gap-4 pt-12", background ? "rounded-2xl bg-background/75 px-6 pb-6 backdrop-blur-sm" : "bg-background"),
-			children: [!background && /* @__PURE__ */ jsx(HomeBackgroundImage, {}), children]
-		})
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: twMerge("relative isolate container mx-auto flex h-full flex-col", containerClassName),
+		children: [!background && /* @__PURE__ */ jsx(HomeBackgroundImage, {}), /* @__PURE__ */ jsx("div", {
+			className: twMerge("relative z-10 m-8 flex flex-wrap justify-center gap-4 pt-12", background ? "rounded-2xl bg-background/75 px-6 pb-6 backdrop-blur-sm" : "bg-background"),
+			children
+		})]
 	});
 	if (!background) return content;
 	return /* @__PURE__ */ jsx(BackgroundLayers, {
@@ -4696,7 +4696,8 @@ function AddDriveModal(props) {
 //#region src/connect/components/modal/create-document-modal.tsx
 const CLOSE_ANIMATION_DURATION$1 = 300;
 function CreateDocumentModal(props) {
-	const { onOpenChange, onContinue, overlayProps, contentProps, ...restProps } = props;
+	const { onOpenChange, onContinue, overlayProps, contentProps, drives, driveId, onDriveChange, onAddDrive, ...restProps } = props;
+	const needsDrive = !!drives && !driveId;
 	const [nodeName, setNodeName] = useState("");
 	const [isValid, setIsValid] = useState(false);
 	const handleCancel = () => {
@@ -4704,11 +4705,12 @@ function CreateDocumentModal(props) {
 		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION$1);
 	};
 	const handleCreate = useCallback(() => {
-		if (!isValid) return;
+		if (!isValid || needsDrive) return;
 		onContinue(nodeName);
 		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION$1);
 	}, [
 		isValid,
+		needsDrive,
 		nodeName,
 		onContinue
 	]);
@@ -4735,20 +4737,51 @@ function CreateDocumentModal(props) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "my-6",
-					children: [!isValid && nodeName && /* @__PURE__ */ jsx("div", {
-						className: "mb-2 text-destructive",
-						children: "Document name must not be empty or contain control characters."
-					}), /* @__PURE__ */ jsx(FormInput, {
-						icon: /* @__PURE__ */ jsx(Icon, { name: "BrickGlobe" }),
-						onChange: (e) => {
-							const name = e.target.value;
-							setNodeName(name);
-							setIsValid(isValidName(name));
-						},
-						placeholder: "Document name",
-						required: true,
-						value: nodeName
-					})]
+					children: [
+						!isValid && nodeName && /* @__PURE__ */ jsx("div", {
+							className: "mb-2 text-destructive",
+							children: "Document name must not be empty or contain control characters."
+						}),
+						/* @__PURE__ */ jsx(FormInput, {
+							icon: /* @__PURE__ */ jsx(Icon, { name: "BrickGlobe" }),
+							onChange: (e) => {
+								const name = e.target.value;
+								setNodeName(name);
+								setIsValid(isValidName(name));
+							},
+							placeholder: "Document name",
+							required: true,
+							value: nodeName
+						}),
+						!!drives?.length && /* @__PURE__ */ jsxs("label", {
+							className: "mt-4 flex flex-col gap-1 text-sm text-muted-foreground",
+							children: ["Drive", /* @__PURE__ */ jsxs("select", {
+								className: "rounded-md border border-border bg-background px-3 py-2 text-foreground",
+								value: driveId ?? "",
+								onChange: (e) => onDriveChange?.(e.target.value),
+								children: [!driveId && /* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "Choose a drive"
+								}), drives.map((drive) => /* @__PURE__ */ jsx("option", {
+									value: drive.id,
+									children: drive.name
+								}, drive.id))]
+							})]
+						}),
+						drives?.length === 0 && /* @__PURE__ */ jsxs("p", {
+							className: "mt-4 text-sm text-muted-foreground",
+							children: [
+								"There's no drive to create it in.",
+								" ",
+								onAddDrive && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "cursor-pointer text-foreground underline",
+									onClick: onAddDrive,
+									children: "Add a drive"
+								})
+							]
+						})
+					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "mt-8 flex justify-between gap-3",
@@ -4760,7 +4793,7 @@ function CreateDocumentModal(props) {
 					}), /* @__PURE__ */ jsx(ModalButton, {
 						variant: "confirm",
 						type: "submit",
-						disabled: !isValid,
+						disabled: !isValid || needsDrive,
 						children: "Create"
 					})]
 				})
@@ -4935,7 +4968,7 @@ function ConnectDeleteItemModal(props) {
 }
 //#endregion
 //#region src/connect/components/form/drive-settings-form.tsx
-const DriveSettingsForm = lazyComponent(() => import("../drive-settings-form.impl-Bwam9-CG.js").then((m) => m.DriveSettingsForm));
+const DriveSettingsForm = lazyComponent(() => import("../drive-settings-form.impl-Dthjyouk.js").then((m) => m.DriveSettingsForm));
 //#endregion
 //#region src/connect/components/modal/drive-settings-modal.tsx
 function DriveSettingsModal(props) {
@@ -8502,7 +8535,7 @@ function ConnectUpgradeDriveModal(props) {
 }
 //#endregion
 //#region src/connect/components/revision-history/revision-history.tsx
-const RevisionHistory = lazyComponent(() => import("../revision-history.impl-CrtSnhXQ.js").then((m) => m.RevisionHistory));
+const RevisionHistory = lazyComponent(() => import("../revision-history.impl-C8YnBJ6U.js").then((m) => m.RevisionHistory));
 //#endregion
 //#region src/connect/components/search-bar/filter-item.tsx
 const FilterItem = (props) => {
@@ -8592,16 +8625,25 @@ const ConnectTooltipProvider = Provider;
 //#endregion
 //#region src/connect/components/sidebar/sidebar-item.tsx
 const SidebarItem = function SidebarItem(props) {
-	const { icon, title, description: _description, containerClassName, active, href, onClick, onPreload } = props;
-	const Element = href ? "a" : "div";
+	const { icon, title, description, containerClassName, active, href, onClick, onPreload } = props;
+	const Element = href ? "a" : onClick ? "button" : "div";
 	const current = href ? props["aria-current"] : void 0;
 	return /* @__PURE__ */ jsx(ConnectTooltip, {
-		content: title,
+		content: description ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "block font-medium",
+			children: title
+		}), /* @__PURE__ */ jsx("span", {
+			className: "block opacity-80",
+			children: description
+		})] }) : title,
 		side: "right",
 		sideOffset: 12,
 		className: "border-none bg-primary px-3 py-2 text-sm text-primary-foreground",
 		children: /* @__PURE__ */ jsxs(Element, {
 			href,
+			type: Element === "button" ? "button" : void 0,
+			"aria-label": title,
+			"aria-description": description,
 			"aria-current": current,
 			className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-foreground", containerClassName, "aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground", active && "bg-sidebar-accent text-sidebar-accent-foreground", onClick && "cursor-pointer"),
 			onClick,
@@ -8609,11 +8651,12 @@ const SidebarItem = function SidebarItem(props) {
 			onTouchStart: onPreload,
 			onFocus: href ? onPreload : void 0,
 			children: [
-				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 hidden h-10 w-1 -translate-y-1/2 rounded-r-sm bg-info group-aria-[current=page]/sidebar-item:block", active && "block") }),
-				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-secondary opacity-0 transition-opacity group-hover/sidebar-item:opacity-100 group-aria-[current=page]/sidebar-item:hidden", active && "hidden") }),
+				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 hidden h-10 w-1 -translate-y-1/2 rounded-r-sm bg-info group-aria-[current=page]/sidebar-item:block max-sm:hidden!", active && "block") }),
+				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-secondary opacity-0 transition-opacity group-hover/sidebar-item:opacity-100 group-aria-[current=page]/sidebar-item:hidden max-sm:hidden", active && "hidden") }),
 				/* @__PURE__ */ jsx("div", {
-					className: "mx-auto py-4",
+					className: "mx-auto py-4 max-sm:px-3 max-sm:py-2",
 					children: icon || /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
 						className: "flex size-8 items-center justify-center rounded-lg bg-primary",
 						children: /* @__PURE__ */ jsx("span", {
 							className: "text-sm font-medium text-primary-foreground",
@@ -8798,7 +8841,7 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 	})] });
 	return /* @__PURE__ */ jsxs(SidebarFooter, {
 		...props,
-		className: twMerge("flex flex-col items-center gap-3 border-t border-sidebar-border px-2 py-4 dark:border-none", className),
+		className: twMerge("flex flex-col items-center gap-3 border-t border-sidebar-border px-2 py-4 max-sm:flex-row max-sm:border-t-0 max-sm:border-l max-sm:py-2 dark:border-none", className),
 		children: [
 			onHomeClick && /* @__PURE__ */ jsx("button", {
 				"aria-label": "Home",
@@ -8829,7 +8872,7 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: onHomeClick ? "mt-3" : "",
+				className: onHomeClick ? "mt-3 max-sm:mt-0" : "",
 				children: address ? /* @__PURE__ */ jsx(SidebarUser, {
 					address,
 					ensName,
@@ -8870,12 +8913,20 @@ const ConnectSidebarHeader = ({ className, children, ...props }) => {
 const ConnectSidebar = ({ onClick, address, ensName, avatarUrl, headerContent, onClickSettings, settingsHref, settingsCurrent, maxWidth = "304px", minWidth = "58px", onLogin, onDisconnect, etherscanUrl, showDebug, onDebugClick, ...props }) => {
 	return /* @__PURE__ */ jsxs(Sidebar, {
 		...props,
+		"data-connect-sidebar": "",
 		maxWidth,
 		minWidth,
-		children: [/* @__PURE__ */ jsxs(SidebarPanel, { children: [/* @__PURE__ */ jsx(ConnectSidebarHeader, { children: headerContent }), /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col",
-			children: props.children
-		})] }), /* @__PURE__ */ jsx(ConnectSidebarFooter, {
+		children: [/* @__PURE__ */ jsxs(SidebarPanel, {
+			className: "max-sm:flex max-sm:overflow-x-auto max-sm:overflow-y-hidden",
+			children: [/* @__PURE__ */ jsx(ConnectSidebarHeader, {
+				className: "max-sm:hidden",
+				children: headerContent
+			}), /* @__PURE__ */ jsx("nav", {
+				"aria-label": "Drives and pages",
+				className: "flex flex-col max-sm:flex-row",
+				children: props.children
+			})]
+		}), /* @__PURE__ */ jsx(ConnectSidebarFooter, {
 			address,
 			ensName,
 			avatarUrl,