@powerhousedao/design-system 6.0.0-dev.10 → 6.0.0-dev.11

package/dist/src/connect/components/document-toolbar/document-toolbar.stories.d.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ComponentPropsWithoutRef } from "react";
+import type { TimelineItem } from "../document-timeline/document-timeline.js";
+import type { DocumentToolbarControl } from "./document-toolbar.js";
+/**
+ * Presentational version of DocumentToolbar for Storybook
+ * This component doesn't use reactor-browser hooks, making it safe for stories
+ */
+type DocumentToolbarStoryProps = ComponentPropsWithoutRef<"div"> & {
+    documentName?: string;
+    className?: string;
+    enabledControls?: DocumentToolbarControl[];
+    disableRevisionHistory?: boolean;
+    showSwitchboardLink?: boolean;
+    initialTimelineVisible?: boolean;
+    defaultTimelineVisible?: boolean;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    onExport?: () => void;
+    onClose?: () => void;
+    onSwitchboardLinkClick?: () => void;
+    onHistoryClick?: () => void;
+    timelineItems?: TimelineItem[];
+};
+declare const DocumentToolbarStory: React.FC<DocumentToolbarStoryProps>;
+declare const meta: Meta<typeof DocumentToolbarStory>;
+export default meta;
+type Story = StoryObj<typeof DocumentToolbarStory>;
+export declare const Default: Story;
+export declare const AllControlsEnabled: Story;
+export declare const UndoRedoDisabled: Story;
+export declare const MinimalControls: Story;
+export declare const WithSwitchboardLink: Story;
+export declare const WithTimelineExpanded: Story;
+export declare const HistoryDisabled: Story;
+//# sourceMappingURL=document-toolbar.stories.d.ts.map

package/dist/src/connect/components/document-toolbar/document-toolbar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/document-toolbar/document-toolbar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAE9E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEpE;;;GAGG;AACH,KAAK,yBAAyB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC3C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAkK7D,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CA0C3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEnD,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAyChC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAY9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAcjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA8ClC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC"}

package/dist/src/connect/components/document-toolbar/document-toolbar.stories.js

@@ -0,0 +1,223 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@powerhousedao/design-system";
+import { fn } from "@storybook/test";
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { DocumentTimeline } from "../document-timeline/document-timeline.js";
+const DocumentToolbarStory = ({ documentName = "Untitled Document", className, enabledControls = ["undo", "redo", "export", "history"], disableRevisionHistory = false, showSwitchboardLink = false, initialTimelineVisible = false, defaultTimelineVisible = true, canUndo = true, canRedo = false, onUndo, onRedo, onExport, onClose, onSwitchboardLinkClick, onHistoryClick, timelineItems = [], children, ...containerProps }) => {
+    const [showTimeline, setShowTimeline] = useState(initialTimelineVisible);
+    const isUndoDisabled = !canUndo;
+    const isRedoDisabled = !canRedo;
+    const isTimelineDisabled = timelineItems.length === 0;
+    const handleTimelineToggle = () => {
+        if (isTimelineDisabled)
+            return;
+        setShowTimeline(!showTimeline);
+    };
+    return (_jsxs("div", { className: "flex w-full flex-col", ...containerProps, children: [_jsxs("div", { className: twMerge("flex h-12 w-full items-center justify-between rounded-xl border border-gray-200 bg-slate-50 px-4", className), children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [enabledControls.includes("undo") && (_jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isUndoDisabled
+                                    ? "cursor-not-allowed"
+                                    : "cursor-pointer active:opacity-70"), onClick: onUndo, disabled: isUndoDisabled, children: _jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isUndoDisabled ? "text-gray-500" : "text-gray-900" }) })), enabledControls.includes("redo") && (_jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isRedoDisabled
+                                    ? "cursor-not-allowed"
+                                    : "cursor-pointer active:opacity-70"), onClick: onRedo, disabled: isRedoDisabled, children: _jsx("div", { className: "-scale-x-100", children: _jsx(Icon, { name: "ArrowCouterclockwise", size: 16, className: isRedoDisabled ? "text-gray-500" : "text-gray-900" }) }) })), enabledControls.includes("export") && (_jsx("button", { className: "flex h-8 cursor-pointer items-center rounded-lg border border-gray-200 bg-white px-3 text-sm active:opacity-70", onClick: onExport, children: _jsx("span", { className: "text-gray-900", children: "Export" }) }))] }), _jsx("div", { className: "flex items-center", children: _jsx("h1", { className: "text-sm font-medium text-gray-500", children: documentName }) }), _jsxs("div", { className: "flex items-center gap-x-2", children: [showSwitchboardLink && (_jsx("button", { className: "grid size-8 cursor-pointer place-items-center rounded-lg border border-gray-200 bg-white active:opacity-70", onClick: onSwitchboardLinkClick, children: _jsx(Icon, { name: "Drive", size: 16, className: "text-gray-900" }) })), enabledControls.includes("history") && (_jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", disableRevisionHistory
+                                    ? "cursor-not-allowed"
+                                    : "cursor-pointer active:opacity-70"), onClick: onHistoryClick, disabled: disableRevisionHistory, children: _jsx(Icon, { name: "History", size: 16, className: disableRevisionHistory ? "text-gray-500" : "text-gray-900" }) })), enabledControls.includes("timeline") && defaultTimelineVisible && (_jsx("button", { className: twMerge("grid size-8 place-items-center rounded-lg border border-gray-200 bg-white", isTimelineDisabled
+                                    ? "cursor-not-allowed"
+                                    : "cursor-pointer active:opacity-70"), onClick: handleTimelineToggle, disabled: isTimelineDisabled, "aria-pressed": showTimeline, children: _jsx(Icon, { name: "Timeline", size: 16, className: twMerge("text-gray-900", isTimelineDisabled && "opacity-50", showTimeline && "text-blue-600") }) })), _jsx("button", { "aria-label": "Close document", className: "grid size-8 cursor-pointer place-items-center rounded-lg border border-gray-200 bg-white active:opacity-70", onClick: onClose, children: _jsx(Icon, { name: "XmarkLight", size: 16, className: "text-gray-900" }) })] })] }), showTimeline && timelineItems.length > 0 && (_jsx("div", { className: "mt-2 w-full", children: _jsx(DocumentTimeline, { timeline: timelineItems, onItemClick: fn() }) })), children] }));
+};
+const meta = {
+    title: "Connect/Components/Document Toolbar",
+    component: DocumentToolbarStory,
+    parameters: {
+        layout: "padded",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        documentName: {
+            control: "text",
+            description: "The name of the document displayed in the toolbar",
+        },
+        enabledControls: {
+            control: "check",
+            options: ["undo", "redo", "export", "history", "timeline"],
+            description: "Controls which buttons are shown in the toolbar",
+        },
+        canUndo: {
+            control: "boolean",
+            description: "Whether the undo button is enabled",
+        },
+        canRedo: {
+            control: "boolean",
+            description: "Whether the redo button is enabled",
+        },
+        disableRevisionHistory: {
+            control: "boolean",
+            description: "Whether the revision history button is disabled",
+        },
+        showSwitchboardLink: {
+            control: "boolean",
+            description: "Whether to show the switchboard link button",
+        },
+        defaultTimelineVisible: {
+            control: "boolean",
+            description: "Whether the timeline toggle button is visible",
+        },
+        initialTimelineVisible: {
+            control: "boolean",
+            description: "Whether the timeline is expanded by default",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        documentName: "My Document",
+        enabledControls: ["undo", "redo", "export", "history"],
+        canUndo: true,
+        canRedo: false,
+        onUndo: fn(),
+        onRedo: fn(),
+        onExport: fn(),
+        onClose: fn(),
+        onHistoryClick: fn(),
+    },
+};
+export const AllControlsEnabled = {
+    args: {
+        documentName: "todo-document",
+        enabledControls: ["undo", "redo", "export", "history", "timeline"],
+        canUndo: true,
+        canRedo: true,
+        showSwitchboardLink: true,
+        defaultTimelineVisible: true,
+        onUndo: fn(),
+        onRedo: fn(),
+        onExport: fn(),
+        onClose: fn(),
+        onHistoryClick: fn(),
+        onSwitchboardLinkClick: fn(),
+        timelineItems: [
+            {
+                id: "1",
+                type: "divider",
+                title: "Created document",
+                timestampUtcMs: new Date("2024-01-15T10:00:00").getTime().toString(),
+            },
+            {
+                id: "2",
+                type: "bar",
+                addSize: 2,
+                delSize: 0,
+                additions: 15,
+                deletions: 0,
+                timestampUtcMs: new Date("2024-01-15T10:30:00").getTime().toString(),
+            },
+            {
+                id: "3",
+                type: "bar",
+                addSize: 3,
+                delSize: 1,
+                additions: 25,
+                deletions: 5,
+                timestampUtcMs: new Date("2024-01-15T11:00:00").getTime().toString(),
+            },
+        ],
+    },
+};
+export const UndoRedoDisabled = {
+    args: {
+        documentName: "New Document",
+        enabledControls: ["undo", "redo", "export", "history"],
+        canUndo: false,
+        canRedo: false,
+        onUndo: fn(),
+        onRedo: fn(),
+        onExport: fn(),
+        onClose: fn(),
+        onHistoryClick: fn(),
+    },
+};
+export const MinimalControls = {
+    args: {
+        documentName: "Read Only Document",
+        enabledControls: ["export"],
+        onExport: fn(),
+        onClose: fn(),
+    },
+};
+export const WithSwitchboardLink = {
+    args: {
+        documentName: "Remote Document",
+        enabledControls: ["undo", "redo", "export", "history"],
+        canUndo: true,
+        canRedo: false,
+        showSwitchboardLink: true,
+        onUndo: fn(),
+        onRedo: fn(),
+        onExport: fn(),
+        onClose: fn(),
+        onHistoryClick: fn(),
+        onSwitchboardLinkClick: fn(),
+    },
+};
+export const WithTimelineExpanded = {
+    args: {
+        documentName: "Document with Timeline",
+        enabledControls: ["undo", "redo", "export", "history", "timeline"],
+        canUndo: true,
+        canRedo: true,
+        defaultTimelineVisible: true,
+        initialTimelineVisible: true,
+        onUndo: fn(),
+        onRedo: fn(),
+        onExport: fn(),
+        onClose: fn(),
+        onHistoryClick: fn(),
+        timelineItems: [
+            {
+                id: "1",
+                type: "divider",
+                title: "Document created",
+                timestampUtcMs: new Date("2024-01-10T09:00:00").getTime().toString(),
+            },
+            {
+                id: "2",
+                type: "bar",
+                addSize: 4,
+                delSize: 0,
+                additions: 50,
+                deletions: 0,
+                timestampUtcMs: new Date("2024-01-10T10:00:00").getTime().toString(),
+            },
+            {
+                id: "3",
+                type: "bar",
+                addSize: 2,
+                delSize: 2,
+                additions: 12,
+                deletions: 8,
+                timestampUtcMs: new Date("2024-01-11T14:00:00").getTime().toString(),
+            },
+            {
+                id: "4",
+                type: "divider",
+                title: "Final revision",
+                timestampUtcMs: new Date("2024-01-12T16:00:00").getTime().toString(),
+            },
+        ],
+    },
+};
+export const HistoryDisabled = {
+    args: {
+        documentName: "Local Document",
+        enabledControls: ["undo", "redo", "export", "history"],
+        canUndo: true,
+        canRedo: false,
+        disableRevisionHistory: true,
+        onUndo: fn(),
+        onRedo: fn(),
+        onExport: fn(),
+        onClose: fn(),
+        onHistoryClick: fn(),
+    },
+};
+//# sourceMappingURL=document-toolbar.stories.js.map

package/dist/src/connect/components/document-toolbar/document-toolbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-toolbar.stories.js","sourceRoot":"","sources":["../../../../../src/connect/components/document-toolbar/document-toolbar.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/connect/components/home-screen/home-screen-item.js

@@ -3,6 +3,6 @@ import { Icon } from "@powerhousedao/design-system";
 import { twMerge } from "tailwind-merge";
 export const HomeScreenItem = function HomeScreenItem(props) {
     const { icon, title, description, containerClassName, shareable, onClick } = props;
-    return (_jsxs("div", { className: twMerge("relative flex h-24 cursor-pointer flex-col items-center justify-center text-center text-sm text-black", containerClassName, onClick && "cursor-pointer"), onClick: onClick, children: [_jsx("div", { className: "mx-auto pb-2", children: icon || (_jsx("div", { className: "size-8 items-center justify-center rounded-lg bg-black pt-1", children: _jsx("span", { className: "text-6 w-6 text-white", children: title.slice(0, 1).toUpperCase() }) })) }), _jsxs("div", { children: [_jsx("h3", { children: title }), description && _jsx("p", { className: "text-gray-500", children: description })] }), shareable && (_jsx("div", { className: "absolute left-2 top-0 mb-2", children: _jsx(Icon, { name: "PeopleFill", width: 12, height: 12 }) }))] }));
+    return (_jsxs("div", { className: twMerge("hover-bg-transparent relative flex h-24 w-40 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md p-2 text-center text-sm text-black", containerClassName, onClick && "cursor-pointer"), onClick: onClick, children: [_jsx("div", { className: "mx-auto pb-2", children: icon || (_jsx("div", { className: "size-8 items-center justify-center rounded-lg bg-black pt-1", children: _jsx("span", { className: "text-6 w-6 text-white", children: title.slice(0, 1).toUpperCase() }) })) }), _jsxs("div", { className: "w-full max-w-full", children: [_jsx("h3", { className: "w-full max-w-full truncate px-2", children: title }), description && _jsx("p", { className: "text-gray-500", children: description })] }), shareable && (_jsx("div", { className: "absolute left-2 top-0 mb-2", children: _jsx(Icon, { name: "PeopleFill", width: 12, height: 12 }) }))] }));
 };
 //# sourceMappingURL=home-screen-item.js.map

package/dist/src/connect/components/home-screen/home-screen-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"home-screen-item.js","sourceRoot":"","sources":["../../../../../src/connect/components/home-screen/home-screen-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAUzC,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,cAAc,CACnD,KAA0B;IAE1B,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,EAAE,GACxE,KAAK,CAAC;IACR,OAAO,CACL,eACE,SAAS,EAAE,OAAO,CAChB,uGAAuG,EACvG,kBAAkB,EAClB,OAAO,IAAI,gBAAgB,CAC5B,EACD,OAAO,EAAE,OAAO,aAEhB,cAAK,SAAS,EAAC,cAAc,YAC1B,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,6DAA6D,YAC1E,eAAM,SAAS,EAAC,uBAAuB,YACpC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,GAC3B,GACH,CACP,GACG,EACN,0BACE,uBAAK,KAAK,GAAM,EACf,WAAW,IAAI,YAAG,SAAS,EAAC,eAAe,YAAE,WAAW,GAAK,IAC1D,EACL,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC7C,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"home-screen-item.js","sourceRoot":"","sources":["../../../../../src/connect/components/home-screen/home-screen-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAUzC,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,cAAc,CACnD,KAA0B;IAE1B,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,EAAE,GACxE,KAAK,CAAC;IACR,OAAO,CACL,eACE,SAAS,EAAE,OAAO,CAChB,gKAAgK,EAChK,kBAAkB,EAClB,OAAO,IAAI,gBAAgB,CAC5B,EACD,OAAO,EAAE,OAAO,aAEhB,cAAK,SAAS,EAAC,cAAc,YAC1B,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,6DAA6D,YAC1E,eAAM,SAAS,EAAC,uBAAuB,YACpC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,GAC3B,GACH,CACP,GACG,EACN,eAAK,SAAS,EAAC,mBAAmB,aAChC,aAAI,SAAS,EAAC,iCAAiC,YAAE,KAAK,GAAM,EAC3D,WAAW,IAAI,YAAG,SAAS,EAAC,eAAe,YAAE,WAAW,GAAK,IAC1D,EACL,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC7C,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/connect/components/home-screen/home-screen-item.stories.d.ts

@@ -14,4 +14,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Shareable: Story;
+export declare const LongName: Story;
 //# sourceMappingURL=home-screen-item.stories.d.ts.map

package/dist/src/connect/components/home-screen/home-screen-item.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"home-screen-item.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/home-screen/home-screen-item.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;;;;CAG6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiCnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC"}
+{"version":3,"file":"home-screen-item.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/home-screen/home-screen-item.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;;;;CAG6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiCnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAkBF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/dist/src/connect/components/home-screen/home-screen-item.stories.js

@@ -33,4 +33,17 @@ export const Default = {
 export const Shareable = {
     ...TemplateShareable,
 };
+const TemplateLongName = {
+    args: {
+        title: "This is a very long drive name that should be truncated when displayed in the UI",
+        icon: _jsx(Icon, { name: "Drive" }),
+        description: "Contributor App",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "grid h-48 w-96 place-items-center bg-white", children: _jsx(Story, {}) })),
+    ],
+};
+export const LongName = {
+    ...TemplateLongName,
+};
 //# sourceMappingURL=home-screen-item.stories.js.map

package/dist/src/connect/components/home-screen/home-screen-item.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"home-screen-item.stories.js","sourceRoot":"","sources":["../../../../../src/connect/components/home-screen/home-screen-item.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,cAAc;CACY,CAAC;AAExC,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG;QAC3B,WAAW,EAAE,iBAAiB;KAC/B;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,4CAA4C,YACzD,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,iBAAiB,GAAU;IAC/B,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG;QAC3B,WAAW,EAAE,iBAAiB;QAC9B,SAAS,EAAE,IAAI;KAChB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,4CAA4C,YACzD,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,GAAG,QAAQ;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,GAAG,iBAAiB;CACrB,CAAC"}
+{"version":3,"file":"home-screen-item.stories.js","sourceRoot":"","sources":["../../../../../src/connect/components/home-screen/home-screen-item.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,cAAc;CACY,CAAC;AAExC,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG;QAC3B,WAAW,EAAE,iBAAiB;KAC/B;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,4CAA4C,YACzD,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,iBAAiB,GAAU;IAC/B,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG;QAC3B,WAAW,EAAE,iBAAiB;QAC9B,SAAS,EAAE,IAAI;KAChB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,4CAA4C,YACzD,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,GAAG,QAAQ;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,GAAG,iBAAiB;CACrB,CAAC;AAEF,MAAM,gBAAgB,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EACH,kFAAkF;QACpF,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG;QAC3B,WAAW,EAAE,iBAAiB;KAC/B;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,4CAA4C,YACzD,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,GAAG,gBAAgB;CACpB,CAAC"}

package/dist/src/connect/components/sidebar/sidebar-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACtE,CAAC;AACF,eAAO,MAAM,WAAW,GAAwB,OAAO,gBAAgB,4CA+BtE,CAAC"}
+{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAGA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACtE,CAAC;AACF,eAAO,MAAM,WAAW,GAAwB,OAAO,gBAAgB,4CAoCtE,CAAC"}

package/dist/src/connect/components/sidebar/sidebar-item.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { twMerge } from "tailwind-merge";
+import { ConnectTooltip } from "../tooltip/tooltip.js";
 export const SidebarItem = function SidebarItem(props) {
     const { icon, title, description, containerClassName, active, onClick } = props;
-    return (_jsx("div", { className: twMerge("relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-black", containerClassName, active && "bg-white", onClick && "cursor-pointer"), onClick: onClick, children: _jsx("div", { className: "mx-auto py-4", children: icon || (_jsx("div", { className: "size-8 items-center justify-center rounded-lg bg-black pt-1", children: _jsx("span", { className: "text-6 w-6 text-white", children: title.slice(0, 1).toUpperCase() }) })) }) }));
+    return (_jsx(ConnectTooltip, { content: title, side: "right", sideOffset: 12, className: "border-none bg-gray-800 px-3 py-2 text-sm text-white", children: _jsxs("div", { className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-black", containerClassName, active && "bg-white", onClick && "cursor-pointer"), onClick: onClick, children: [active ? (_jsx("div", { className: "absolute left-0 top-1/2 h-10 w-1 -translate-y-1/2 rounded-r-sm bg-violet-400" })) : (_jsx("div", { className: "absolute left-0 top-1/2 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-zinc-300 opacity-0 transition-opacity group-hover/sidebar-item:opacity-100" })), _jsx("div", { className: "mx-auto py-4", children: icon || (_jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-black", children: _jsx("span", { className: "text-sm font-medium text-white", children: title.slice(0, 1).toUpperCase() }) })) })] }) }));
 };
 //# sourceMappingURL=sidebar-item.js.map

package/dist/src/connect/components/sidebar/sidebar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.js","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAUzC,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,WAAW,CAAC,KAAuB;IACrE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,EAAE,OAAO,EAAE,GACrE,KAAK,CAAC;IACR,OAAO,CACL,cACE,SAAS,EAAE,OAAO,CAChB,kGAAkG,EAClG,kBAAkB,EAClB,MAAM,IAAI,UAAU,EACpB,OAAO,IAAI,gBAAgB,CAC5B,EACD,OAAO,EAAE,OAAO,YAEhB,cAAK,SAAS,EAAC,cAAc,YAC1B,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,6DAA6D,YAC1E,eAAM,SAAS,EAAC,uBAAuB,YACpC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,GAC3B,GACH,CACP,GACG,GAQF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"sidebar-item.js","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAUvD,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,WAAW,CAAC,KAAuB;IACrE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,EAAE,OAAO,EAAE,GACrE,KAAK,CAAC;IACR,OAAO,CACL,KAAC,cAAc,IACb,OAAO,EAAE,KAAK,EACd,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,EAAE,EACd,SAAS,EAAC,sDAAsD,YAEhE,eACE,SAAS,EAAE,OAAO,CAChB,qHAAqH,EACrH,kBAAkB,EAClB,MAAM,IAAI,UAAU,EACpB,OAAO,IAAI,gBAAgB,CAC5B,EACD,OAAO,EAAE,OAAO,aAEf,MAAM,CAAC,CAAC,CAAC,CACR,cAAK,SAAS,EAAC,8EAA8E,GAAG,CACjG,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,6IAA6I,GAAG,CAChK,EACD,cAAK,SAAS,EAAC,cAAc,YAC1B,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,6DAA6D,YAC1E,eAAM,SAAS,EAAC,gCAAgC,YAC7C,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,GAC3B,GACH,CACP,GACG,IACF,GACS,CAClB,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/connect/components/sidebar/sidebar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,IAAI,GAAG,wBAAwB,CAAC,OAAO,cAAc,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,IAAI,CAGpB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AA+B5B,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC"}
+{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,IAAI,GAAG,wBAAwB,CAAC,OAAO,cAAc,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,IAAI,CAGpB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AAiC5B,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC"}

package/dist/src/connect/components/sidebar/sidebar.stories.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@powerhousedao/design-system";
 import { fn } from "@storybook/test";
 import { WagmiContext } from "../../context/WagmiContext.js";
+import { ConnectTooltipProvider } from "../tooltip/tooltip.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { ConnectSidebar } from "./sidebar.js";
 const meta = {
@@ -12,7 +14,7 @@ const user = {
     address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
 };
 const Wrapper = (args) => {
-    return (_jsx(WagmiContext, { children: _jsx("div", { className: "relative h-screen", children: _jsxs(ConnectSidebar, { ...args, headerContent: _jsx("div", { className: "flex h-full items-center", children: _jsx("img", { alt: "Connect logo", className: "h-5 object-contain", src: "" }) }), children: [_jsx(SidebarItem, { title: "Home" }), _jsx(SidebarItem, { title: "Home" }), _jsx(SidebarItem, { title: "Home", active: true }), _jsx(SidebarItem, { title: "Home" }), _jsx(SidebarItem, { title: "Home" }), _jsx(SidebarItem, { title: "Home" }), _jsx(SidebarItem, { title: "Home" })] }) }) }));
+    return (_jsx(WagmiContext, { children: _jsx(ConnectTooltipProvider, { children: _jsx("div", { className: "relative h-screen", children: _jsxs(ConnectSidebar, { ...args, headerContent: _jsx("div", { className: "flex h-full items-center", children: _jsx(Icon, { name: "ConnectSmall", size: 24 }) }), children: [_jsx(SidebarItem, { title: "My Local Drive" }), _jsx(SidebarItem, { title: "Shared Documents" }), _jsx(SidebarItem, { title: "Project Files", active: true }), _jsx(SidebarItem, { title: "Archive" }), _jsx(SidebarItem, { title: "Templates" }), _jsx(SidebarItem, { title: "Backups" }), _jsx(SidebarItem, { title: "Settings" })] }) }) }) }));
 };
 export const Expanded = {
     render: Wrapper,

package/dist/src/connect/components/sidebar/sidebar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,MAAM,IAAI,GAAe;IACvB,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,cAAc;CAC1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,IAAI,GAAG;IACX,OAAO,EAAE,4CAA4C;CAC7C,CAAC;AAEX,MAAM,OAAO,GAAG,CAAC,IAAU,EAAE,EAAE;IAC7B,OAAO,CACL,KAAC,YAAY,cACX,cAAK,SAAS,EAAC,mBAAmB,YAChC,MAAC,cAAc,OACT,IAAI,EACR,aAAa,EACX,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,GAAG,EAAC,cAAc,EAAC,SAAS,EAAC,oBAAoB,EAAC,GAAG,EAAE,EAAE,GAAI,GAC9D,aAGR,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,GAAG,EAC5B,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,GAAG,EAC5B,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,GAAI,EAC1C,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,GAAG,EAC5B,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,GAAG,EAC5B,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,GAAG,EAC5B,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,GAAG,IACb,GACb,GACO,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,OAAO;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE,EAAE;QACb,YAAY,EAAE,EAAE,EAAE;QAClB,YAAY,EAAE,uBAAuB;KACtC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,MAAM,EAAE,OAAO;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,mCAAmC;QACnC,OAAO,EAAE,EAAE,EAAE;QACb,YAAY,EAAE,EAAE,EAAE;QAClB,YAAY,EAAE,gCAAgC,IAAI,CAAC,OAAO,EAAE;KAC7D;CACF,CAAC"}
+{"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAEpD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,MAAM,IAAI,GAAe;IACvB,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,cAAc;CAC1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,IAAI,GAAG;IACX,OAAO,EAAE,4CAA4C;CAC7C,CAAC;AAEX,MAAM,OAAO,GAAG,CAAC,IAAU,EAAE,EAAE;IAC7B,OAAO,CACL,KAAC,YAAY,cACX,KAAC,sBAAsB,cACrB,cAAK,SAAS,EAAC,mBAAmB,YAChC,MAAC,cAAc,OACT,IAAI,EACR,aAAa,EACX,cAAK,SAAS,EAAC,0BAA0B,YACvC,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI,GAClC,aAGR,KAAC,WAAW,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACtC,KAAC,WAAW,IAAC,KAAK,EAAC,kBAAkB,GAAG,EACxC,KAAC,WAAW,IAAC,KAAK,EAAC,eAAe,EAAC,MAAM,EAAE,IAAI,GAAI,EACnD,KAAC,WAAW,IAAC,KAAK,EAAC,SAAS,GAAG,EAC/B,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,GAAG,EACjC,KAAC,WAAW,IAAC,KAAK,EAAC,SAAS,GAAG,EAC/B,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,GAAG,IACjB,GACb,GACiB,GACZ,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,OAAO;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE,EAAE;QACb,YAAY,EAAE,EAAE,EAAE;QAClB,YAAY,EAAE,uBAAuB;KACtC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,MAAM,EAAE,OAAO;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,mCAAmC;QACnC,OAAO,EAAE,EAAE,EAAE;QACb,YAAY,EAAE,EAAE,EAAE;QAClB,YAAY,EAAE,gCAAgC,IAAI,CAAC,OAAO,EAAE;KAC7D;CACF,CAAC"}

package/dist/style.css

@@ -839,6 +839,7 @@
     --color-blue-700: hsl(209 100% 60%);
     --color-blue-800: hsl(209 100% 55%);
     --color-blue-900: hsl(209 100% 50%);
+    --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-purple-900: hsl(263 78% 63%);
     --color-slate-50: hsl(210 20% 96%);
     --color-slate-100: hsl(210 9% 74%);
@@ -861,6 +862,7 @@
     --color-gray-900: hsl(192 5% 21%);
     --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-200: oklch(92% 0.004 286.32);
+    --color-zinc-300: oklch(87.1% 0.006 286.286);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
     --color-zinc-600: oklch(44.2% 0.017 285.786);
     --color-stone-300: oklch(86.9% 0.005 56.366);
@@ -1126,9 +1128,6 @@
   .top-3\.5 {
     top: calc(var(--spacing) * 3.5);
   }
-  .top-8 {
-    top: calc(var(--spacing) * 8);
-  }
   .top-10 {
     top: calc(var(--spacing) * 10);
   }
@@ -1180,9 +1179,6 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
-  .left-8 {
-    left: calc(var(--spacing) * 8);
-  }
   .left-\[-2px\] {
     left: -2px;
   }
@@ -1478,9 +1474,6 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -1673,6 +1666,9 @@
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
@@ -2083,6 +2079,10 @@
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
   }
+  .rounded-r-sm {
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
+  }
   .rounded-tr-md {
     border-top-right-radius: var(--radius-md);
   }
@@ -2300,12 +2300,18 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-violet-400 {
+    background-color: var(--color-violet-400);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
   .bg-zinc-50 {
     background-color: var(--color-zinc-50);
   }
+  .bg-zinc-300 {
+    background-color: var(--color-zinc-300);
+  }
   .object-contain {
     object-fit: contain;
   }
@@ -2961,6 +2967,13 @@
       }
     }
   }
+  .group-hover\/sidebar-item\:opacity-100 {
+    &:is(:where(.group\/sidebar-item):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .peer-checked\:bg-blue-900 {
     &:is(:where(.peer):checked ~ *) {
       background-color: var(--color-blue-900);
@@ -4556,6 +4569,9 @@ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-o
 input[type="number"] {
   -moz-appearance: textfield;
 }
+.hover-bg-transparent:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
 @layer base {
   h1, h2, h3, h4, h5, h6, p {
     color: var(--color-gray-900);