@flipdish/ui-library 0.2.2 → 0.3.1

package/dist/components/organisms/Messaging/index.d.ts

@@ -0,0 +1,56 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+export type Message = {
+    id: string;
+    sentAt?: string;
+    readAt?: string;
+    typing?: boolean;
+    status?: 'sent' | 'read' | 'failed';
+    user?: {
+        name?: string;
+        avatarUrl?: string;
+        status?: 'online' | 'offline';
+        me?: boolean;
+    };
+    text?: ReactNode;
+    audio?: {
+        duration: string;
+    };
+    image?: {
+        src: string;
+        alt: string;
+        name: string;
+        size: string;
+    };
+    video?: {
+        src: string;
+        alt: string;
+    };
+    reply?: {
+        text: ReactNode;
+    };
+    urlPreview?: {
+        title: string;
+        description: string;
+    };
+    reactions?: {
+        content: string;
+        count: number;
+    }[];
+    attachment?: {
+        name: string;
+        size: string;
+        type: 'jpg' | 'txt' | 'pdf' | 'mp4';
+    };
+};
+interface MessageStatusProps {
+    status: 'sent' | 'read' | 'failed';
+    readAt?: string;
+}
+export declare const MessageStatus: ({ status, readAt }: MessageStatusProps) => import("react").JSX.Element;
+interface MessageItemProps extends ComponentPropsWithRef<'li'> {
+    msg: Message;
+    showUserLabel?: boolean;
+}
+export declare const MessageItem: ({ msg, showUserLabel, ...props }: MessageItemProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/Messaging/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Messaging/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC9B,EAAE,CAAC,EAAE,OAAO,CAAC;KACd,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,SAAS,CAAC,EAAE;QACV,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;KACrC,CAAC;CACH,CAAC;AAEF,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,GAAI,oBAAoB,kBAAkB,gCA8BnE,CAAC;AAEF,UAAU,gBAAiB,SAAQ,qBAAqB,CAAC,IAAI,CAAC;IAC5D,GAAG,EAAE,OAAO,CAAC;IACb,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,GAAI,kCAAyC,gBAAgB,gCAiMpF,CAAC"}

package/dist/components/organisms/Messaging/index.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Link03, FileIcon, Stars02, Edit04, DownloadCloud02, RefreshCcw02, Copy01 } from '@flipdish/ui-icons';
+import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
+import { Tooltip } from '@flipdish/ui-library/components/atoms/Tooltip';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { Button } from 'react-aria-components';
+
+const MessageStatus = ({ status, readAt }) => {
+    return (jsx(Tooltip, { title: status === 'sent' ? 'Unread' : status === 'read' ? `Read${readAt ? ` ${readAt}` : ''}` : 'Failed', children: jsx(Button, { className: "focus:outline-hidden", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [status === 'sent' && (jsx("path", { d: "M13 5L7 11L4 8", className: "stroke-fg-quaternary", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })), status === 'read' && (jsx("path", { d: "M10.5 5L4.5 11L1.5 8M14.5 5L8.5 11L6.5 9", className: "stroke-fg-brand-secondary", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })), status === 'failed' && (jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.25 5C7.25 4.58579 7.58579 4.25 8 4.25C8.41421 4.25 8.75 4.58579 8.75 5V8.5C8.75 8.91421 8.41421 9.25 8 9.25C7.58579 9.25 7.25 8.91421 7.25 8.5V5ZM8 11.75C8.41421 11.75 8.75 11.4142 8.75 11C8.75 10.5858 8.41421 10.25 8 10.25C7.58579 10.25 7.25 10.5858 7.25 11C7.25 11.4142 7.58579 11.75 8 11.75Z", className: "fill-fg-error-primary" }))] }) }) }));
+};
+const MessageItem = ({ msg, showUserLabel = true, ...props }) => {
+    const renderActions = () => (jsxs("div", { className: "dark-mode absolute right-2 -bottom-5 z-1 flex gap-1.5 rounded-lg bg-primary_alt px-2 py-1.5 opacity-0 shadow-xl transition duration-100 ease-linear group-hover/msg:opacity-100", children: [jsx("button", { title: "Generate with AI", "aria-label": "Generate with AI", className: "cursor-pointer rounded p-0.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(Stars02, { className: "size-4" }) }), (msg.text || msg.attachment || msg.audio || msg.image) && (
+            // biome-ignore lint/a11y/useButtonType: we don't need a type for this button
+            jsx("button", { title: msg.text ? 'Edit message' : 'Download', "aria-label": msg.text ? 'Edit message' : 'Download', className: "cursor-pointer rounded p-0.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: msg.text ? jsx(Edit04, { className: "size-4" }) : jsx(DownloadCloud02, { className: "size-4" }) })), jsx("button", { title: "Reply", "aria-label": "Reply", className: "cursor-pointer rounded p-0.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(RefreshCcw02, { className: "size-4" }) }), jsx("button", { title: "Copy", "aria-label": "Copy", className: "cursor-pointer rounded p-0.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(Copy01, { className: "size-4" }) })] }));
+    return (jsxs("li", { ...props, className: cx('relative flex items-start gap-3', msg.user?.me ? 'self-end pl-10' : 'pr-8 lg:pr-10', props.className), children: [msg.user && !msg.user.me && jsx(Avatar, { src: msg.user.avatarUrl, alt: msg.user.name, size: "sm", status: msg.user.status }), jsxs("article", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [((msg.user && showUserLabel) || msg.sentAt || msg.status) && (jsxs("header", { className: "flex items-center gap-2", children: [msg.user && showUserLabel && (jsx("cite", { className: "flex-1 truncate text-sm font-medium text-secondary not-italic", children: msg.user.me ? 'You' : msg.user.name })), !msg.typing && (msg.sentAt || msg.status) && (jsxs("div", { className: "flex items-center gap-0.5", children: [msg.sentAt && (jsx("time", { className: "text-xs text-tertiary", dateTime: msg.sentAt, children: msg.sentAt })), msg.status && jsx(MessageStatus, { status: msg.status, readAt: msg.readAt })] }))] })), msg.text ? (jsxs("div", { className: cx('group/msg relative rounded-lg px-3 py-2 text-md wrap-break-word text-primary ring-1 ring-secondary ring-inset', msg.user?.me ? 'rounded-tr-none bg-primary pr-4' : 'rounded-tl-none bg-secondary', 
+                        // Link styles
+                        '[&_a]:rounded-xs [&_a]:text-brand-secondary [&_a]:underline [&_a]:underline-offset-2 [&_a]:outline-focus-ring [&_a]:transition [&_a]:duration-100 [&_a]:ease-linear [&_a]:hover:text-brand-secondary_hover [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2'), children: [msg.reply && (jsx("blockquote", { className: "relative mb-1.5 rounded-lg bg-primary px-3 py-2 text-sm text-tertiary ring-1 ring-secondary ring-inset before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border-l-[3px] before:border-brand", children: msg.reply.text })), msg.image && (jsx("figure", { className: "mt-1 mb-1.5", children: jsx("img", { src: msg.image.src, alt: msg.image.alt, className: "w-full rounded-md object-cover outline-1 -outline-offset-[0.5px] outline-black/10" }) })), msg.urlPreview && (jsxs("aside", { className: "mt-1 mb-1.5 flex items-start gap-1.5 rounded-lg bg-primary p-2 pr-3 ring-1 ring-secondary ring-inset", children: [jsx(Link03, { className: "mt-0.5 size-4 shrink-0 text-fg-quaternary" }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("p", { className: "w-full truncate text-sm font-medium text-secondary", children: msg.urlPreview.title }), jsx("p", { className: "w-full truncate text-sm text-tertiary", children: msg.urlPreview.description })] })] })), msg.text, renderActions()] })) : msg.image ? (jsxs("figure", { className: "flex flex-col gap-1.5", children: [jsxs("div", { className: "group/msg relative", children: [jsx("img", { src: msg.image.src, alt: msg.image.alt, className: "w-full rounded-md object-cover outline-1 -outline-offset-[0.5px] outline-black/10" }), renderActions()] }), jsxs("figcaption", { className: "flex items-center gap-1", children: [jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: msg.image.name }), jsx("span", { className: "text-sm text-tertiary", children: msg.image.size })] })] })) : msg.audio ? (jsxs("div", { className: "group/msg relative flex items-center gap-2 rounded-lg rounded-tl-none bg-primary p-3 ring-1 ring-secondary", children: [jsx("button", { "aria-label": "Play audio message", className: "flex size-8 cursor-pointer items-center justify-center rounded-full bg-fg-brand-primary_alt outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx("svg", { width: "12.8", height: "14", viewBox: "0 0 16 16", fill: "none", className: "translate-x-[1px] text-fg-white", children: jsx("path", { d: "M2.19995 2.86327C2.19995 1.61155 3.57248 0.844595 4.63851 1.50061L12.9856 6.63731C14.0009 7.26209 14.0009 8.73784 12.9856 9.36262L4.63851 14.4993C3.57247 15.1553 2.19995 14.3884 2.19995 13.1367V2.86327Z", fill: "currentColor" }) }) }), jsx("svg", { width: "206", height: "34", viewBox: "0 0 206 34", fill: "none", className: "flex-1 text-fg-brand-primary_alt", children: jsx("path", { d: "M1 15V19M5 15V19M9 15V19M13 15V19M17 9.00005V25M21 5.00005V29M25 1.00005V33M29 1.00005V33M33 5.00005V29M37 13V21M41 9.00005V25M45 13V21M49 5.00005V29M53 5.00005V29M57 9.00005V25M61 9.00005V25M65 1.00005V33M69 1.00005V33M73 5.00005V29M77 1.00005V33M81 9.00005V25M85 13V21M89 15V19.0001M93 15V19.0001M97 13V21.0001M101 13V21.0001M105 9V25.0001M109 5V29.0001M113 1V33.0001M117 5V29.0001M121 5V29.0001M125 5V29.0001M129 9V25.0001M133 13V21.0001M137 9V25.0001M141 13V21.0001M145 9V25.0001M149 5V29.0001M153 5V29.0001M157 9V25.0001M161 1V33.0001M165 5V29.0001M169 9V25.0001M173 13V21.0001M177 15V19.0001M181 9V25.0001M185 5V29.0001M189 5V29.0001M193 9V25.0001M197 15V19.0001M201 15V19.0001M205 15V19.0001", stroke: "currentColor", strokeLinecap: "round" }) }), jsx("p", { className: "text-xs text-tertiary", children: msg.audio.duration }), renderActions()] })) : null, msg.attachment && (jsxs("div", { className: "group/msg relative flex gap-3 rounded-lg rounded-tl-none bg-primary px-3.5 py-2.5 ring-1 ring-secondary", children: [jsx(FileIcon, { type: msg.attachment.type, theme: "light", className: "size-10 dark:hidden" }), jsx(FileIcon, { type: msg.attachment.type, theme: "dark", className: "size-10 not-dark:hidden" }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("p", { className: "truncate text-sm font-medium text-secondary", children: msg.attachment.name }), jsx("p", { className: "text-sm text-tertiary", children: msg.attachment.size })] }), renderActions()] })), msg.reactions && msg.reactions.length > 0 && (jsx("ul", { className: "flex justify-end gap-1", children: msg.reactions?.map((reaction) => (jsxs("li", { className: "flex h-6 items-center gap-1 rounded-2xl bg-secondary px-2 py-0.5 ring-1 ring-secondary ring-inset", children: [reaction.content, reaction.count > 1 && jsx("span", { className: "text-sm font-medium text-secondary", children: reaction.count })] }, reaction.content))) })), msg.typing && (jsxs("div", { className: "flex h-7 w-10 items-center justify-center gap-1 self-start rounded-lg rounded-tl-none bg-secondary text-md text-primary ring-1 ring-secondary ring-inset", children: [jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-tertiary [animation-delay:-0.3s]" }), jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-quaternary [animation-delay:-0.15s]" }), jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-tertiary" })] }))] })] }, msg.id));
+};
+
+export { MessageItem, MessageStatus };
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/Messaging/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/Messaging/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","_jsxs"],"mappings":"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"}

package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var FlipdishLogo = require('@flipdish/ui-library/components/atoms/FlipdishLogo');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+
+const MobileNavigationHeader = ({ children }) => {
+    return (jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-primary p-3 pl-4 lg:hidden", children: [jsxRuntime.jsx(FlipdishLogo.FlipdishLogo, { className: "h-6" }), jsxRuntime.jsxs(reactAriaComponents.Button, { "aria-label": "Expand navigation menu", className: "group flex items-center justify-center rounded-lg bg-primary p-2 text-fg-secondary outline-focus-ring hover:bg-primary_hover hover:text-fg-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: [jsxRuntime.jsx(uiIcons.Menu02, { className: "size-6 transition duration-200 ease-in-out group-aria-expanded:opacity-0" }), jsxRuntime.jsx(uiIcons.X, { className: "absolute size-6 opacity-0 transition duration-200 ease-in-out group-aria-expanded:opacity-100" })] })] }), jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { isDismissable: true, className: ({ isEntering, isExiting }) => cx.cx('fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden', isEntering && 'duration-300 ease-in-out animate-in fade-in', isExiting && 'duration-200 ease-in-out animate-out fade-out'), children: ({ state }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Close navigation menu", onPress: () => state.close(), className: "fixed top-2.5 right-3 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2", children: jsxRuntime.jsx(uiIcons.X, { className: "size-6" }) }), jsxRuntime.jsx(reactAriaComponents.Modal, { className: "w-full max-w-74 cursor-auto will-change-transform", children: jsxRuntime.jsx(reactAriaComponents.Dialog, { className: "h-dvh outline-hidden focus:outline-hidden", children: children }) })] })) })] }));
+};
+
+exports.MobileNavigationHeader = MobileNavigationHeader;
+//# sourceMappingURL=mobile-header.cjs.map

package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-header.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaDialogTrigger","_jsx","FlipdishLogo","AriaButton","Menu02","CloseIcon","AriaModalOverlay","cx","_Fragment","AriaModal","AriaDialog"],"mappings":";;;;;;;;MAca,sBAAsB,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AACxE,IAAA,QACEA,eAAA,CAACC,iCAAiB,EAAA,EAAA,QAAA,EAAA,CAChBD,eAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,gGAAgG,EAAA,QAAA,EAAA,CAChHE,cAAA,CAACC,yBAAY,EAAA,EAAC,SAAS,EAAC,KAAK,EAAA,CAAG,EAEhCH,eAAA,CAACI,0BAAU,EAAA,EAAA,YAAA,EACE,wBAAwB,EACnC,SAAS,EAAC,mNAAmN,EAAA,QAAA,EAAA,CAE7NF,cAAA,CAACG,cAAM,EAAA,EAAC,SAAS,EAAC,0EAA0E,EAAA,CAAG,EAC/FH,cAAA,CAACI,SAAS,EAAA,EAAC,SAAS,EAAC,+FAA+F,EAAA,CAAG,CAAA,EAAA,CAC5G,CAAA,EAAA,CACN,EAETJ,cAAA,CAACK,gCAAgB,IACf,aAAa,EAAA,IAAA,EACb,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnCC,KAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTR,eAAA,CAAAS,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEP,cAAA,CAACE,0BAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAClC,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjOF,cAAA,CAACI,SAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbJ,cAAA,CAACQ,yBAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtER,cAAA,CAACS,0BAAU,EAAA,EAAC,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAc,EAAA,CAC/E,CAAA,EAAA,CACX,CACJ,EAAA,CACgB,CAAA,EAAA,CACD;AAExB;;;;"}

package/dist/components/organisms/SidebarNavigation/components/mobile-header.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const MobileNavigationHeader: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+//# sourceMappingURL=mobile-header.d.ts.map

package/dist/components/organisms/SidebarNavigation/components/mobile-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-header.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAS/C,eAAO,MAAM,sBAAsB,GAAI,cAAc,iBAAiB,gCA2CrE,CAAC"}

package/dist/components/organisms/SidebarNavigation/components/mobile-header.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Menu02, X } from '@flipdish/ui-icons';
+import { FlipdishLogo } from '@flipdish/ui-library/components/atoms/FlipdishLogo';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { DialogTrigger, Button, ModalOverlay, Modal, Dialog } from 'react-aria-components';
+
+const MobileNavigationHeader = ({ children }) => {
+    return (jsxs(DialogTrigger, { children: [jsxs("header", { className: "flex h-14 items-center justify-between border-b border-secondary bg-primary p-3 pl-4 lg:hidden", children: [jsx(FlipdishLogo, { className: "h-6" }), jsxs(Button, { "aria-label": "Expand navigation menu", className: "group flex items-center justify-center rounded-lg bg-primary p-2 text-fg-secondary outline-focus-ring hover:bg-primary_hover hover:text-fg-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: [jsx(Menu02, { className: "size-6 transition duration-200 ease-in-out group-aria-expanded:opacity-0" }), jsx(X, { className: "absolute size-6 opacity-0 transition duration-200 ease-in-out group-aria-expanded:opacity-100" })] })] }), jsx(ModalOverlay, { isDismissable: true, className: ({ isEntering, isExiting }) => cx('fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden', isEntering && 'duration-300 ease-in-out animate-in fade-in', isExiting && 'duration-200 ease-in-out animate-out fade-out'), children: ({ state }) => (jsxs(Fragment, { children: [jsx(Button, { "aria-label": "Close navigation menu", onPress: () => state.close(), className: "fixed top-2.5 right-3 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(X, { className: "size-6" }) }), jsx(Modal, { className: "w-full max-w-74 cursor-auto will-change-transform", children: jsx(Dialog, { className: "h-dvh outline-hidden focus:outline-hidden", children: children }) })] })) })] }));
+};
+
+export { MobileNavigationHeader };
+//# sourceMappingURL=mobile-header.js.map

package/dist/components/organisms/SidebarNavigation/components/mobile-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-header.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/mobile-header.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaDialogTrigger","_jsx","AriaButton","CloseIcon","AriaModalOverlay","_Fragment","AriaModal","AriaDialog"],"mappings":";;;;;;MAca,sBAAsB,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AACxE,IAAA,QACEA,IAAA,CAACC,aAAiB,EAAA,EAAA,QAAA,EAAA,CAChBD,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,gGAAgG,EAAA,QAAA,EAAA,CAChHE,GAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,KAAK,EAAA,CAAG,EAEhCF,IAAA,CAACG,MAAU,EAAA,EAAA,YAAA,EACE,wBAAwB,EACnC,SAAS,EAAC,mNAAmN,EAAA,QAAA,EAAA,CAE7ND,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,0EAA0E,EAAA,CAAG,EAC/FA,GAAA,CAACE,CAAS,EAAA,EAAC,SAAS,EAAC,+FAA+F,EAAA,CAAG,CAAA,EAAA,CAC5G,CAAA,EAAA,CACN,EAETF,GAAA,CAACG,YAAgB,IACf,aAAa,EAAA,IAAA,EACb,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KACnC,EAAE,CACA,kFAAkF,EAClF,UAAU,IAAI,6CAA6C,EAC3D,SAAS,IAAI,+CAA+C,CAC7D,EAAA,QAAA,EAGF,CAAC,EAAE,KAAK,EAAE,MACTL,IAAA,CAAAM,QAAA,EAAA,EAAA,QAAA,EAAA,CACEJ,GAAA,CAACC,MAAU,EAAA,EAAA,YAAA,EACE,uBAAuB,EAClC,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAC,uNAAuN,EAAA,QAAA,EAEjOD,GAAA,CAACE,CAAS,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,EAAA,CACrB,EAEbF,GAAA,CAACK,KAAS,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EACtEL,GAAA,CAACM,MAAU,EAAA,EAAC,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAc,EAAA,CAC/E,CAAA,EAAA,CACX,CACJ,EAAA,CACgB,CAAA,EAAA,CACD;AAExB;;;;"}

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var avatarLabelGroup = require('@flipdish/ui-library/components/atoms/Avatar/components/avatar-label-group');
+var Button = require('@flipdish/ui-library/components/atoms/Button');
+var RadioButton = require('@flipdish/ui-library/components/atoms/RadioButton');
+var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var focus = require('@react-aria/focus');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+
+const placeholderAccounts = [
+    {
+        id: 'caitlyn',
+        name: 'Caitlyn King',
+        email: 'caitlyn@untitledui.com',
+        avatar: 'https://www.untitledui.com/images/avatars/caitlyn-king?fm=webp&q=80',
+        status: 'online',
+    },
+    {
+        id: 'sienna',
+        name: 'Sienna Hewitt',
+        email: 'sienna@untitledui.com',
+        avatar: 'https://www.untitledui.com/images/avatars/transparent/sienna-hewitt?bg=%23E0E0E0',
+        status: 'online',
+    },
+];
+const NavAccountMenu = ({ className, selectedAccountId = 'olivia', ...dialogProps }) => {
+    const focusManager = focus.useFocusManager();
+    const dialogRef = React.useRef(null);
+    const onKeyDown = React.useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                focusManager?.focusNext({ tabbable: true, wrap: true });
+                break;
+            case 'ArrowUp':
+                focusManager?.focusPrevious({ tabbable: true, wrap: true });
+                break;
+        }
+    }, [focusManager]);
+    React.useEffect(() => {
+        const element = dialogRef.current;
+        if (element) {
+            element.addEventListener('keydown', onKeyDown);
+        }
+        return () => {
+            if (element) {
+                element.removeEventListener('keydown', onKeyDown);
+            }
+        };
+    }, [onKeyDown]);
+    return (jsxRuntime.jsxs(reactAriaComponents.Dialog, { ...dialogProps, ref: dialogRef, className: cx.cx('w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden', className), children: [jsxRuntime.jsxs("div", { className: "rounded-xl bg-primary ring-1 ring-secondary", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 py-1.5", children: [jsxRuntime.jsx(NavAccountCardMenuItem, { label: "View profile", icon: uiIcons.User01, shortcut: "\u2318K->P" }), jsxRuntime.jsx(NavAccountCardMenuItem, { label: "Account settings", icon: uiIcons.Settings01, shortcut: "\u2318S" }), jsxRuntime.jsx(NavAccountCardMenuItem, { label: "Documentation", icon: uiIcons.BookOpen01 })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 border-t border-secondary py-1.5", children: [jsxRuntime.jsx("div", { className: "px-3 pt-1.5 pb-1 text-xs font-semibold text-tertiary", children: "Switch account" }), jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5 px-1.5", children: placeholderAccounts.map((account) => (
+                                // biome-ignore lint/a11y/useButtonType: we need to use a button element for the account switch
+                                jsxRuntime.jsxs("button", { className: cx.cx('relative w-full cursor-pointer rounded-md px-2 py-1.5 text-left outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus:z-10 focus-visible:outline-2 focus-visible:outline-offset-2', account.id === selectedAccountId && 'bg-primary_hover'), children: [jsxRuntime.jsx(avatarLabelGroup.AvatarLabelGroup, { status: "online", size: "md", src: account.avatar, title: account.name, subtitle: account.email }), jsxRuntime.jsx(RadioButton.RadioButtonBase, { isSelected: account.id === selectedAccountId, className: "absolute top-2 right-2" })] }, account.id))) })] }), jsxRuntime.jsx("div", { className: "flex flex-col gap-2 px-2 pt-0.5 pb-2", children: jsxRuntime.jsx(Button.Button, { iconLeading: uiIcons.Plus, color: "secondary", size: "sm", children: "Add account" }) })] }), jsxRuntime.jsx("div", { className: "pt-1 pb-1.5", children: jsxRuntime.jsx(NavAccountCardMenuItem, { label: "Sign out", icon: uiIcons.LogOut01, shortcut: "\u2325\u21E7Q" }) })] }));
+};
+const NavAccountCardMenuItem = ({ icon: Icon, label, shortcut, ...buttonProps }) => {
+    return (jsxRuntime.jsx("button", { ...buttonProps, className: cx.cx('group/item w-full cursor-pointer px-1.5 focus:outline-hidden', buttonProps.className), children: jsxRuntime.jsxs("div", { className: cx.cx('flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover', 
+            // Focus styles.
+            'outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2'), children: [jsxRuntime.jsxs("div", { className: "flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover", children: [Icon && jsxRuntime.jsx(Icon, { className: "size-5 text-fg-quaternary group-hover/item:text-fg-quaternary_hover" }), " ", label] }), shortcut && (jsxRuntime.jsx("kbd", { className: "flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcut }))] }) }));
+};
+const NavAccountCard = ({ popoverPlacement, selectedAccountId = 'caitlyn', items = placeholderAccounts, avatarRounded, }) => {
+    const triggerRef = React.useRef(null);
+    const isDesktop = useBreakpoints.useBreakpoint('lg');
+    const selectedAccount = items.find((account) => account.id === selectedAccountId);
+    if (!selectedAccount) {
+        console.warn(`Account with ID ${selectedAccountId} not found in <NavAccountCard />`);
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", { ref: triggerRef, className: "relative flex items-center gap-3 rounded-xl p-3 ring-1 ring-secondary ring-inset", children: [jsxRuntime.jsx(avatarLabelGroup.AvatarLabelGroup, { size: "md", src: selectedAccount.avatar, title: selectedAccount.name, subtitle: selectedAccount.email, status: selectedAccount.status, rounded: avatarRounded }), jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { className: "absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover", children: jsxRuntime.jsx(uiIcons.ChevronSelectorVertical, { className: "size-4 shrink-0 stroke-[2.25px]" }) }), jsxRuntime.jsx(reactAriaComponents.Popover, { placement: popoverPlacement ?? (isDesktop ? 'right bottom' : 'top right'), triggerRef: triggerRef, offset: 8, className: ({ isEntering, isExiting }) => cx.cx('origin-(--trigger-anchor-point) will-change-transform', isEntering &&
+                            'duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', isExiting &&
+                            'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5'), children: jsxRuntime.jsx(NavAccountMenu, { selectedAccountId: selectedAccountId, accounts: items }) })] })] }));
+};
+
+exports.NavAccountCard = NavAccountCard;
+exports.NavAccountMenu = NavAccountMenu;
+//# sourceMappingURL=nav-account-card.cjs.map

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-account-card.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"sourcesContent":[null],"names":["useFocusManager","useRef","useCallback","useEffect","_jsxs","AriaDialog","cx","_jsx","User01","Settings01","BookOpen01","AvatarLabelGroup","RadioButtonBase","Button","Plus","LogOut01","useBreakpoint","AriaDialogTrigger","AriaButton","ChevronSelectorVertical","AriaPopover"],"mappings":"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"}

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts

@@ -0,0 +1,25 @@
+import type { DialogProps as AriaDialogProps, Placement } from 'react-aria-components';
+export type NavAccountType = {
+    /** Unique identifier for the nav item. */
+    id: string;
+    /** Name of the account holder. */
+    name: string;
+    /** Email address of the account holder. */
+    email: string;
+    /** Avatar image URL. */
+    avatar: string;
+    /** Online status of the account holder. This is used to display the online status indicator. */
+    status: 'online' | 'offline';
+};
+export declare const NavAccountMenu: ({ className, selectedAccountId, ...dialogProps }: AriaDialogProps & {
+    className?: string;
+    accounts?: NavAccountType[];
+    selectedAccountId?: string;
+}) => import("react").JSX.Element;
+export declare const NavAccountCard: ({ popoverPlacement, selectedAccountId, items, avatarRounded, }: {
+    popoverPlacement?: Placement;
+    selectedAccountId?: string;
+    items?: NavAccountType[];
+    avatarRounded?: boolean;
+}) => import("react").JSX.Element | null;
+//# sourceMappingURL=nav-account-card.d.ts.map

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-account-card.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvF,MAAM,MAAM,cAAc,GAAG;IAC3B,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,gGAAgG;IAChG,MAAM,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B,CAAC;AAmBF,eAAO,MAAM,cAAc,GAAI,kDAI5B,eAAe,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAAE,gCA2EnG,CAAC;AAiCF,eAAO,MAAM,cAAc,GAAI,gEAK5B;IACD,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,uCA6CA,CAAC"}

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronSelectorVertical, User01, Settings01, BookOpen01, Plus, LogOut01 } from '@flipdish/ui-icons';
+import { AvatarLabelGroup } from '@flipdish/ui-library/components/atoms/Avatar/components/avatar-label-group';
+import { Button as Button$1 } from '@flipdish/ui-library/components/atoms/Button';
+import { RadioButtonBase } from '@flipdish/ui-library/components/atoms/RadioButton';
+import { useBreakpoint } from '@flipdish/ui-library/hooks/useBreakpoints';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useFocusManager } from '@react-aria/focus';
+import { useRef, useCallback, useEffect } from 'react';
+import { DialogTrigger, Button, Popover, Dialog } from 'react-aria-components';
+
+const placeholderAccounts = [
+    {
+        id: 'caitlyn',
+        name: 'Caitlyn King',
+        email: 'caitlyn@untitledui.com',
+        avatar: 'https://www.untitledui.com/images/avatars/caitlyn-king?fm=webp&q=80',
+        status: 'online',
+    },
+    {
+        id: 'sienna',
+        name: 'Sienna Hewitt',
+        email: 'sienna@untitledui.com',
+        avatar: 'https://www.untitledui.com/images/avatars/transparent/sienna-hewitt?bg=%23E0E0E0',
+        status: 'online',
+    },
+];
+const NavAccountMenu = ({ className, selectedAccountId = 'olivia', ...dialogProps }) => {
+    const focusManager = useFocusManager();
+    const dialogRef = useRef(null);
+    const onKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                focusManager?.focusNext({ tabbable: true, wrap: true });
+                break;
+            case 'ArrowUp':
+                focusManager?.focusPrevious({ tabbable: true, wrap: true });
+                break;
+        }
+    }, [focusManager]);
+    useEffect(() => {
+        const element = dialogRef.current;
+        if (element) {
+            element.addEventListener('keydown', onKeyDown);
+        }
+        return () => {
+            if (element) {
+                element.removeEventListener('keydown', onKeyDown);
+            }
+        };
+    }, [onKeyDown]);
+    return (jsxs(Dialog, { ...dialogProps, ref: dialogRef, className: cx('w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden', className), children: [jsxs("div", { className: "rounded-xl bg-primary ring-1 ring-secondary", children: [jsxs("div", { className: "flex flex-col gap-0.5 py-1.5", children: [jsx(NavAccountCardMenuItem, { label: "View profile", icon: User01, shortcut: "\u2318K->P" }), jsx(NavAccountCardMenuItem, { label: "Account settings", icon: Settings01, shortcut: "\u2318S" }), jsx(NavAccountCardMenuItem, { label: "Documentation", icon: BookOpen01 })] }), jsxs("div", { className: "flex flex-col gap-0.5 border-t border-secondary py-1.5", children: [jsx("div", { className: "px-3 pt-1.5 pb-1 text-xs font-semibold text-tertiary", children: "Switch account" }), jsx("div", { className: "flex flex-col gap-0.5 px-1.5", children: placeholderAccounts.map((account) => (
+                                // biome-ignore lint/a11y/useButtonType: we need to use a button element for the account switch
+                                jsxs("button", { className: cx('relative w-full cursor-pointer rounded-md px-2 py-1.5 text-left outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus:z-10 focus-visible:outline-2 focus-visible:outline-offset-2', account.id === selectedAccountId && 'bg-primary_hover'), children: [jsx(AvatarLabelGroup, { status: "online", size: "md", src: account.avatar, title: account.name, subtitle: account.email }), jsx(RadioButtonBase, { isSelected: account.id === selectedAccountId, className: "absolute top-2 right-2" })] }, account.id))) })] }), jsx("div", { className: "flex flex-col gap-2 px-2 pt-0.5 pb-2", children: jsx(Button$1, { iconLeading: Plus, color: "secondary", size: "sm", children: "Add account" }) })] }), jsx("div", { className: "pt-1 pb-1.5", children: jsx(NavAccountCardMenuItem, { label: "Sign out", icon: LogOut01, shortcut: "\u2325\u21E7Q" }) })] }));
+};
+const NavAccountCardMenuItem = ({ icon: Icon, label, shortcut, ...buttonProps }) => {
+    return (jsx("button", { ...buttonProps, className: cx('group/item w-full cursor-pointer px-1.5 focus:outline-hidden', buttonProps.className), children: jsxs("div", { className: cx('flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover', 
+            // Focus styles.
+            'outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2'), children: [jsxs("div", { className: "flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover", children: [Icon && jsx(Icon, { className: "size-5 text-fg-quaternary group-hover/item:text-fg-quaternary_hover" }), " ", label] }), shortcut && (jsx("kbd", { className: "flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset", children: shortcut }))] }) }));
+};
+const NavAccountCard = ({ popoverPlacement, selectedAccountId = 'caitlyn', items = placeholderAccounts, avatarRounded, }) => {
+    const triggerRef = useRef(null);
+    const isDesktop = useBreakpoint('lg');
+    const selectedAccount = items.find((account) => account.id === selectedAccountId);
+    if (!selectedAccount) {
+        console.warn(`Account with ID ${selectedAccountId} not found in <NavAccountCard />`);
+        return null;
+    }
+    return (jsxs("div", { ref: triggerRef, className: "relative flex items-center gap-3 rounded-xl p-3 ring-1 ring-secondary ring-inset", children: [jsx(AvatarLabelGroup, { size: "md", src: selectedAccount.avatar, title: selectedAccount.name, subtitle: selectedAccount.email, status: selectedAccount.status, rounded: avatarRounded }), jsxs(DialogTrigger, { children: [jsx(Button, { className: "absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover", children: jsx(ChevronSelectorVertical, { className: "size-4 shrink-0 stroke-[2.25px]" }) }), jsx(Popover, { placement: popoverPlacement ?? (isDesktop ? 'right bottom' : 'top right'), triggerRef: triggerRef, offset: 8, className: ({ isEntering, isExiting }) => cx('origin-(--trigger-anchor-point) will-change-transform', isEntering &&
+                            'duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', isExiting &&
+                            'duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5'), children: jsx(NavAccountMenu, { selectedAccountId: selectedAccountId, accounts: items }) })] })] }));
+};
+
+export { NavAccountCard, NavAccountMenu };
+//# sourceMappingURL=nav-account-card.js.map

package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-account-card.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-account-card.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaDialog","_jsx","Button","AriaDialogTrigger","AriaButton","AriaPopover"],"mappings":"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"}

package/dist/components/organisms/SidebarNavigation/components/nav-button.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Tooltip = require('@flipdish/ui-library/components/atoms/Tooltip');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+
+const NavButton = ({ current, label, href, icon: Icon, className, tooltipPlacement = 'right', onClick, children }) => {
+    const iconOnly = !children;
+    return (jsxRuntime.jsx(Tooltip.Tooltip, { isDisabled: !label, title: label, placement: tooltipPlacement, children: jsxRuntime.jsx(reactAriaComponents.Pressable, { children: jsxRuntime.jsxs("a", { href: href, "aria-label": label, onClick: onClick, className: cx.cx('group/item relative flex w-full cursor-pointer items-center justify-center gap-1 rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2', current && 'bg-secondary hover:bg-secondary_hover', iconOnly ? 'size-9' : 'px-2 py-1.5', className), children: [Icon && (jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: cx.cx('size-5 shrink-0 text-fg-quaternary transition-inherit-all group-hover/item:text-fg-quaternary_hover', current && 'text-fg-quaternary_hover') })), children && (jsxRuntime.jsx("span", { className: cx.cx('px-0.5 text-sm font-semibold transition duration-100 ease-linear group-hover/item:text-secondary_hover', current && 'text-secondary_hover'), children: children }))] }) }) }));
+};
+
+exports.NavButton = NavButton;
+//# sourceMappingURL=nav-button.cjs.map

package/dist/components/organisms/SidebarNavigation/components/nav-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-button.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-button.tsx"],"sourcesContent":[null],"names":["_jsx","Tooltip","Pressable","_jsxs","cx"],"mappings":";;;;;;;AA4BO,MAAM,SAAS,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,GAAG,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAkB,KAAI;AAC1I,IAAA,MAAM,QAAQ,GAAG,CAAC,QAAQ;IAE1B,QACEA,eAACC,eAAO,EAAA,EAAC,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,YACpED,cAAA,CAACE,6BAAS,EAAA,EAAA,QAAA,EACRC,eAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,KAAK,EACjB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEC,KAAE,CACX,4QAA4Q,EAC5Q,OAAO,IAAI,uCAAuC,EAClD,QAAQ,GAAG,QAAQ,GAAG,aAAa,EACnC,SAAS,CACV,EAAA,QAAA,EAAA,CAEA,IAAI,KACHJ,eAAC,IAAI,EAAA,EAAA,aAAA,EACS,MAAM,EAClB,SAAS,EAAEI,KAAE,CACX,qGAAqG,EACrG,OAAO,IAAI,0BAA0B,CACtC,EAAA,CACD,CACH,EAEA,QAAQ,KACPJ,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEI,KAAE,CACX,wGAAwG,EACxG,OAAO,IAAI,sBAAsB,CAClC,YAEA,QAAQ,EAAA,CACJ,CACR,CAAA,EAAA,CACC,EAAA,CACM,EAAA,CACJ;AAEd;;;;"}

package/dist/components/organisms/SidebarNavigation/components/nav-button.d.ts

@@ -0,0 +1,26 @@
+import type { FC, MouseEventHandler, ReactNode } from 'react';
+interface NavButtonProps {
+    /** Whether the collapsible nav item is open. */
+    open?: boolean;
+    /** URL to navigate to when the button is clicked. */
+    href?: string;
+    /** Label text for the button. */
+    label?: string;
+    /** Icon component to display. */
+    icon?: FC<{
+        className?: string;
+    }>;
+    /** Whether the button is currently active. */
+    current?: boolean;
+    /** Handler for click events. */
+    onClick?: MouseEventHandler;
+    /** Additional CSS classes to apply to the button. */
+    className?: string;
+    /** Placement of the tooltip. */
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    /** Content to display. */
+    children?: ReactNode;
+}
+export declare const NavButton: ({ current, label, href, icon: Icon, className, tooltipPlacement, onClick, children }: NavButtonProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=nav-button.d.ts.map

package/dist/components/organisms/SidebarNavigation/components/nav-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,UAAU,cAAc;IACtB,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvD,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GAAI,sFAAgG,cAAc,gCAyCvI,CAAC"}

package/dist/components/organisms/SidebarNavigation/components/nav-button.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip } from '@flipdish/ui-library/components/atoms/Tooltip';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { Pressable } from 'react-aria-components';
+
+const NavButton = ({ current, label, href, icon: Icon, className, tooltipPlacement = 'right', onClick, children }) => {
+    const iconOnly = !children;
+    return (jsx(Tooltip, { isDisabled: !label, title: label, placement: tooltipPlacement, children: jsx(Pressable, { children: jsxs("a", { href: href, "aria-label": label, onClick: onClick, className: cx('group/item relative flex w-full cursor-pointer items-center justify-center gap-1 rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2', current && 'bg-secondary hover:bg-secondary_hover', iconOnly ? 'size-9' : 'px-2 py-1.5', className), children: [Icon && (jsx(Icon, { "aria-hidden": "true", className: cx('size-5 shrink-0 text-fg-quaternary transition-inherit-all group-hover/item:text-fg-quaternary_hover', current && 'text-fg-quaternary_hover') })), children && (jsx("span", { className: cx('px-0.5 text-sm font-semibold transition duration-100 ease-linear group-hover/item:text-secondary_hover', current && 'text-secondary_hover'), children: children }))] }) }) }));
+};
+
+export { NavButton };
+//# sourceMappingURL=nav-button.js.map

package/dist/components/organisms/SidebarNavigation/components/nav-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-button.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-button.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AA4BO,MAAM,SAAS,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,GAAG,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAkB,KAAI;AAC1I,IAAA,MAAM,QAAQ,GAAG,CAAC,QAAQ;IAE1B,QACEA,IAAC,OAAO,EAAA,EAAC,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,YACpEA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACRC,IAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,KAAK,EACjB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACX,4QAA4Q,EAC5Q,OAAO,IAAI,uCAAuC,EAClD,QAAQ,GAAG,QAAQ,GAAG,aAAa,EACnC,SAAS,CACV,EAAA,QAAA,EAAA,CAEA,IAAI,KACHD,IAAC,IAAI,EAAA,EAAA,aAAA,EACS,MAAM,EAClB,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,OAAO,IAAI,0BAA0B,CACtC,EAAA,CACD,CACH,EAEA,QAAQ,KACPA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,wGAAwG,EACxG,OAAO,IAAI,sBAAsB,CAClC,YAEA,QAAQ,EAAA,CACJ,CACR,CAAA,EAAA,CACC,EAAA,CACM,EAAA,CACJ;AAEd;;;;"}

package/dist/components/organisms/SidebarNavigation/components/nav-item.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Badge = require('@flipdish/ui-library/components/atoms/Badge');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+
+const styles = cx.sortCx({
+    root: 'group relative flex max-h-9 w-full cursor-pointer items-center rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2',
+    rootSelected: 'bg-secondary hover:bg-secondary_hover',
+});
+const NavItemBase = ({ current, type, badge, href, icon: Icon, children, truncate = true, onClick }) => {
+    const iconElement = Icon && (jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: cx.cx('mr-2 size-5 shrink-0 text-fg-quaternary transition-inherit-all group-hover/item:text-fg-quaternary_hover', current && 'text-fg-quaternary_hover') }));
+    const badgeElement = badge && (typeof badge === 'string' || typeof badge === 'number') ? (jsxRuntime.jsx(Badge.Badge, { className: "ml-3", color: "gray", type: "pill-color", size: "sm", children: badge })) : (badge);
+    const labelElement = (jsxRuntime.jsx("span", { className: cx.cx('flex-1 text-sm font-semibold text-secondary transition-inherit-all group-hover/item:text-secondary_hover', truncate && 'truncate', current && 'text-secondary_hover'), children: children }));
+    const isExternal = href && href.startsWith('http');
+    const externalIcon = isExternal && jsxRuntime.jsx(uiIcons.Share04, { className: "size-4 stroke-[2.5px] text-fg-quaternary" });
+    if (type === 'collapsible') {
+        return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: This is a summary element
+        jsxRuntime.jsxs("summary", { className: cx.cx('p-2', styles.root, current && styles.rootSelected), onClick: onClick, children: [iconElement, labelElement, badgeElement, jsxRuntime.jsx(uiIcons.ChevronDown, { "aria-hidden": "true", className: "ml-3 size-4 shrink-0 stroke-[2.5px] text-fg-quaternary in-open:-scale-y-100" })] }));
+    }
+    if (type === 'collapsible-child') {
+        return (jsxRuntime.jsxs(reactAriaComponents.Link, { href: href, target: isExternal ? '_blank' : '_self', rel: "noopener noreferrer", className: cx.cx('py-2 pr-3 pl-10', styles.root, current && styles.rootSelected), onClick: onClick, "aria-current": current ? 'page' : undefined, children: [labelElement, externalIcon, badgeElement] }));
+    }
+    return (jsxRuntime.jsxs(reactAriaComponents.Link, { href: href, target: isExternal ? '_blank' : '_self', rel: "noopener noreferrer", className: cx.cx('group/item p-2', styles.root, current && styles.rootSelected), onClick: onClick, "aria-current": current ? 'page' : undefined, children: [iconElement, labelElement, externalIcon, badgeElement] }));
+};
+
+exports.NavItemBase = NavItemBase;
+//# sourceMappingURL=nav-item.cjs.map

package/dist/components/organisms/SidebarNavigation/components/nav-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-item.tsx"],"sourcesContent":[null],"names":["sortCx","_jsx","cx","Badge","Share04","_jsxs","ChevronDown","AriaLink"],"mappings":";;;;;;;;AAQA,MAAM,MAAM,GAAGA,SAAM,CAAC;AACpB,IAAA,IAAI,EAAE,0PAA0P;AAChQ,IAAA,YAAY,EAAE,uCAAuC;AACtD,CAAA,CAAC;AAyBK,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE,OAAO,EAAoB,KAAI;IAC9H,MAAM,WAAW,GAAG,IAAI,KACtBC,cAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EACS,MAAM,EAClB,SAAS,EAAEC,KAAE,CACX,0GAA0G,EAC1G,OAAO,IAAI,0BAA0B,CACtC,EAAA,CACD,CACH;IAED,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,IAC/DD,cAAA,CAACE,WAAK,EAAA,EAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAC7D,KAAK,GACA,KAER,KAAK,CACN;IAEH,MAAM,YAAY,IAChBF,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEC,KAAE,CACX,0GAA0G,EAC1G,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,sBAAsB,CAClC,EAAA,QAAA,EAEA,QAAQ,EAAA,CACJ,CACR;IAED,MAAM,UAAU,GAAG,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;IAClD,MAAM,YAAY,GAAG,UAAU,IAAID,cAAA,CAACG,eAAO,EAAA,EAAC,SAAS,EAAC,0CAA0C,EAAA,CAAG;AAEnG,IAAA,IAAI,IAAI,KAAK,aAAa,EAAE;QAC1B;;AAEE,QAAAC,eAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAEH,KAAE,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,CACzF,WAAW,EAEX,YAAY,EAEZ,YAAY,EAEbD,cAAA,CAACK,mBAAW,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,SAAS,EAAC,6EAA6E,EAAA,CAAG,CAAA,EAAA,CAClH;IAEd;AAEA,IAAA,IAAI,IAAI,KAAK,mBAAmB,EAAE;AAChC,QAAA,QACED,eAAA,CAACE,wBAAQ,EAAA,EACP,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,EACvC,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAEL,KAAE,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC,EAC7E,OAAO,EAAE,OAAO,EAAA,cAAA,EACF,OAAO,GAAG,MAAM,GAAG,SAAS,EAAA,QAAA,EAAA,CAEzC,YAAY,EACZ,YAAY,EACZ,YAAY,CAAA,EAAA,CACJ;IAEf;AAEA,IAAA,QACEG,eAAA,CAACE,wBAAQ,EAAA,EACP,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,EACvC,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAEL,KAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC,EAC5E,OAAO,EAAE,OAAO,EAAA,cAAA,EACF,OAAO,GAAG,MAAM,GAAG,SAAS,EAAA,QAAA,EAAA,CAEzC,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,YAAY,CAAA,EAAA,CACJ;AAEf;;;;"}

package/dist/components/organisms/SidebarNavigation/components/nav-item.d.ts

@@ -0,0 +1,26 @@
+import type { FC, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+interface NavItemBaseProps {
+    /** Whether the nav item shows only an icon. */
+    iconOnly?: boolean;
+    /** Whether the collapsible nav item is open. */
+    open?: boolean;
+    /** URL to navigate to when the nav item is clicked. */
+    href?: string;
+    /** Type of the nav item. */
+    type: 'link' | 'collapsible' | 'collapsible-child';
+    /** Icon component to display. */
+    icon?: FC<HTMLAttributes<HTMLOrSVGElement>>;
+    /** Badge to display. */
+    badge?: ReactNode;
+    /** Whether the nav item is currently active. */
+    current?: boolean;
+    /** Whether to truncate the label text. */
+    truncate?: boolean;
+    /** Handler for click events. */
+    onClick?: MouseEventHandler;
+    /** Content to display. */
+    children?: ReactNode;
+}
+export declare const NavItemBase: ({ current, type, badge, href, icon: Icon, children, truncate, onClick }: NavItemBaseProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=nav-item.d.ts.map

package/dist/components/organisms/SidebarNavigation/components/nav-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-item.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ9E,UAAU,gBAAgB;IACxB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,mBAAmB,CAAC;IACnD,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC5C,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,yEAAgF,gBAAgB,gCAkF3H,CAAC"}

package/dist/components/organisms/SidebarNavigation/components/nav-item.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Share04, ChevronDown } from '@flipdish/ui-icons';
+import { Badge } from '@flipdish/ui-library/components/atoms/Badge';
+import { sortCx, cx } from '@flipdish/ui-library/utilities/cx';
+import { Link } from 'react-aria-components';
+
+const styles = sortCx({
+    root: 'group relative flex max-h-9 w-full cursor-pointer items-center rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2',
+    rootSelected: 'bg-secondary hover:bg-secondary_hover',
+});
+const NavItemBase = ({ current, type, badge, href, icon: Icon, children, truncate = true, onClick }) => {
+    const iconElement = Icon && (jsx(Icon, { "aria-hidden": "true", className: cx('mr-2 size-5 shrink-0 text-fg-quaternary transition-inherit-all group-hover/item:text-fg-quaternary_hover', current && 'text-fg-quaternary_hover') }));
+    const badgeElement = badge && (typeof badge === 'string' || typeof badge === 'number') ? (jsx(Badge, { className: "ml-3", color: "gray", type: "pill-color", size: "sm", children: badge })) : (badge);
+    const labelElement = (jsx("span", { className: cx('flex-1 text-sm font-semibold text-secondary transition-inherit-all group-hover/item:text-secondary_hover', truncate && 'truncate', current && 'text-secondary_hover'), children: children }));
+    const isExternal = href && href.startsWith('http');
+    const externalIcon = isExternal && jsx(Share04, { className: "size-4 stroke-[2.5px] text-fg-quaternary" });
+    if (type === 'collapsible') {
+        return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: This is a summary element
+        jsxs("summary", { className: cx('p-2', styles.root, current && styles.rootSelected), onClick: onClick, children: [iconElement, labelElement, badgeElement, jsx(ChevronDown, { "aria-hidden": "true", className: "ml-3 size-4 shrink-0 stroke-[2.5px] text-fg-quaternary in-open:-scale-y-100" })] }));
+    }
+    if (type === 'collapsible-child') {
+        return (jsxs(Link, { href: href, target: isExternal ? '_blank' : '_self', rel: "noopener noreferrer", className: cx('py-2 pr-3 pl-10', styles.root, current && styles.rootSelected), onClick: onClick, "aria-current": current ? 'page' : undefined, children: [labelElement, externalIcon, badgeElement] }));
+    }
+    return (jsxs(Link, { href: href, target: isExternal ? '_blank' : '_self', rel: "noopener noreferrer", className: cx('group/item p-2', styles.root, current && styles.rootSelected), onClick: onClick, "aria-current": current ? 'page' : undefined, children: [iconElement, labelElement, externalIcon, badgeElement] }));
+};
+
+export { NavItemBase };
+//# sourceMappingURL=nav-item.js.map

package/dist/components/organisms/SidebarNavigation/components/nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/nav-item.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaLink"],"mappings":";;;;;;AAQA,MAAM,MAAM,GAAG,MAAM,CAAC;AACpB,IAAA,IAAI,EAAE,0PAA0P;AAChQ,IAAA,YAAY,EAAE,uCAAuC;AACtD,CAAA,CAAC;AAyBK,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE,OAAO,EAAoB,KAAI;IAC9H,MAAM,WAAW,GAAG,IAAI,KACtBA,GAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EACS,MAAM,EAClB,SAAS,EAAE,EAAE,CACX,0GAA0G,EAC1G,OAAO,IAAI,0BAA0B,CACtC,EAAA,CACD,CACH;IAED,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,IAC/DA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAC7D,KAAK,GACA,KAER,KAAK,CACN;IAEH,MAAM,YAAY,IAChBA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,0GAA0G,EAC1G,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,sBAAsB,CAClC,EAAA,QAAA,EAEA,QAAQ,EAAA,CACJ,CACR;IAED,MAAM,UAAU,GAAG,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;IAClD,MAAM,YAAY,GAAG,UAAU,IAAIA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,0CAA0C,EAAA,CAAG;AAEnG,IAAA,IAAI,IAAI,KAAK,aAAa,EAAE;QAC1B;;AAEE,QAAAC,IAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,CACzF,WAAW,EAEX,YAAY,EAEZ,YAAY,EAEbD,GAAA,CAAC,WAAW,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,SAAS,EAAC,6EAA6E,EAAA,CAAG,CAAA,EAAA,CAClH;IAEd;AAEA,IAAA,IAAI,IAAI,KAAK,mBAAmB,EAAE;AAChC,QAAA,QACEC,IAAA,CAACC,IAAQ,EAAA,EACP,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,EACvC,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC,EAC7E,OAAO,EAAE,OAAO,EAAA,cAAA,EACF,OAAO,GAAG,MAAM,GAAG,SAAS,EAAA,QAAA,EAAA,CAEzC,YAAY,EACZ,YAAY,EACZ,YAAY,CAAA,EAAA,CACJ;IAEf;AAEA,IAAA,QACED,IAAA,CAACC,IAAQ,EAAA,EACP,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,EACvC,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC,EAC5E,OAAO,EAAE,OAAO,EAAA,cAAA,EACF,OAAO,GAAG,MAAM,GAAG,SAAS,EAAA,QAAA,EAAA,CAEzC,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,YAAY,CAAA,EAAA,CACJ;AAEf;;;;"}