@lateralus-ai/shipping-ui 2.0.0-dev.3 → 2.0.0-dev.30

package/src/index.ts

@@ -19,6 +19,7 @@ export {
   TabsTrigger,
   TabsContent,
   Header,
+  PageHeader,
   Entry,
   EmptyState,
   Modal,
@@ -35,6 +36,7 @@ export {
   PdfViewer,
   ImageViewer,
   DocumentEditor,
+  ScrollableList,
 } from "./components";
 
 export type {
@@ -56,11 +58,20 @@ export type {
   TabsContentProps,
   TabsItem,
   TabsType,
+  TabsAppearance,
   HeaderProps,
   HeaderVariant,
+  PageHeaderProps,
+  PageHeaderCrumb,
+  PageHeaderShellProps,
+  PageHeaderBodyProps,
+  ScrollableListProps,
+  ScrollableListHeaderProps,
+  ScrollableListBodyProps,
   EntryProps,
   EntryType,
   EntryState,
+  EntryVariant,
   EmptyStateProps,
   ModalProps,
   ModalOverlayProps,

package/src/patterns/Search/ResultRow.tsx

@@ -1,26 +1,28 @@
 import { type ReactNode } from "react";
-import { ChatIcon, IssuesIcon, ReportIcon } from "../../icons";
-import { cn } from "../../utils/cn";
+import {
+  Entry,
+  type EntryProps,
+  type EntryState,
+  type EntryVariant,
+} from "../../components/Entry";
 
-export type ResultRowVariant = "report" | "chat" | "issue";
-export type ResultRowState = "idle" | "active";
+/** @deprecated Prefer `EntryVariant`. */
+export type ResultRowVariant = EntryVariant;
+/** @deprecated Prefer `EntryState`. */
+export type ResultRowState = EntryState;
 
 export type ResultRowProps = {
-  variant?: ResultRowVariant;
-  state?: ResultRowState;
+  variant?: EntryVariant;
+  state?: EntryState;
   title?: ReactNode;
-  /** Secondary line — excerpt, metadata, or highlighted query match. */
   subtitle?: ReactNode;
   onClick?: () => void;
   className?: string;
 };
 
-const variantIcons: Record<ResultRowVariant, ReactNode> = {
-  report: <ReportIcon className="size-4" />,
-  chat: <ChatIcon className="size-4" />,
-  issue: <IssuesIcon className="size-4" />,
-};
-
+/**
+ * @deprecated Prefer `Entry` — ResultRow is a thin alias for search lists.
+ */
 export const ResultRow = ({
   variant = "report",
   state = "idle",
@@ -29,30 +31,14 @@ export const ResultRow = ({
   onClick,
   className,
 }: ResultRowProps) => (
-  <button
-    type="button"
-    className={cn(
-      "flex w-full items-center gap-4 rounded-control px-3 py-2.5 text-left transition-colors",
-      "hover:bg-[rgba(38,36,32,0.04)]",
-      state === "active" && "bg-[rgba(38,36,32,0.04)]",
-      className,
-    )}
-    data-variant={variant}
-    data-state={state}
+  <Entry
+    variant={variant}
+    state={state}
+    title={title}
+    subtitle={subtitle}
     onClick={onClick}
-  >
-    <span className="shrink-0 text-display-on-light-secondary">
-      {variantIcons[variant]}
-    </span>
-    <span className="min-w-0 flex-1">
-      <span className="block truncate text-caption-1-em text-display-on-light-primary">
-        {title}
-      </span>
-      {subtitle != null && subtitle !== false && (
-        <span className="mt-0.5 block truncate text-caption-2 text-display-on-light-secondary">
-          {subtitle}
-        </span>
-      )}
-    </span>
-  </button>
+    className={className}
+  />
 );
+
+export type { EntryProps };

package/src/patterns/Search/SearchModal.tsx

@@ -13,6 +13,7 @@ import {
   type ModalProps,
 } from "../../components/Modal";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/Tabs";
+import { Badge } from "../../primitives/Badge";
 import { cn } from "../../utils/cn";
 import { ResultRow, type ResultRowProps } from "./ResultRow";
 import { SectionHeader } from "./SectionHeader";
@@ -131,7 +132,12 @@ export const SearchModalBody = ({
   children,
   className,
 }: SearchModalBodyProps) => (
-  <ModalBody className={cn("min-w-0 flex-1 p-2", className)}>
+  <ModalBody
+    className={cn(
+      "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-2",
+      className,
+    )}
+  >
     {children}
   </ModalBody>
 );
@@ -162,16 +168,26 @@ export const SearchModalFilters = ({
     type="pills"
     value={value}
     onValueChange={onValueChange}
-    className={cn("gap-0", className)}
+    className={cn("min-h-0 flex-1 gap-0", className)}
   >
-    <TabsList className={cn("w-full p-2", listClassName)}>
+    <TabsList
+      className={cn(
+        "w-full shrink-0 bg-background-primary p-2",
+        listClassName,
+      )}
+    >
       {tabs.map((tab) => (
-        <TabsTrigger key={tab.value} value={tab.value} count={tab.count}>
+        <TabsTrigger key={tab.value} value={tab.value}>
           {tab.label}
+          {typeof tab.count === "number" && (
+            <Badge color="blue">
+              {tab.count > 99 ? "99+" : tab.count}
+            </Badge>
+          )}
         </TabsTrigger>
       ))}
     </TabsList>
-    {children}
+    <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
   </Tabs>
 );
 
@@ -223,12 +239,14 @@ export const SearchModalIdle = ({
   children,
   className,
 }: SearchModalIdleProps) => (
-  <div className={cn("flex flex-col p-1", className)}>
+  <div className={cn("flex min-h-0 flex-1 flex-col p-1", className)}>
     <SectionHeader
       label={label}
-      className="px-3 py-1 text-caption-2 font-normal normal-case tracking-[0.01em] text-display-on-light-secondary"
+      className="shrink-0 px-3 py-1 text-caption-2 font-normal normal-case tracking-[0.01em] text-display-on-light-secondary"
     />
-    <SearchModalResults items={items}>{children}</SearchModalResults>
+    <div className="min-h-0 flex-1 overflow-y-auto">
+      <SearchModalResults items={items}>{children}</SearchModalResults>
+    </div>
   </div>
 );
 

package/src/patterns/Sidebar/CollapsibleNavGroup.tsx

@@ -45,7 +45,6 @@ export const CollapsibleNavGroup = ({
       href={href}
       label={label}
       icon={icon}
-      tall
       onNavigate={onNavigate}
       trailing={
         <IconButton
@@ -93,6 +92,7 @@ export const CollapsibleNavGroup = ({
               ) : undefined
             }
             menuItems={entryMenuItems}
+            onNavigate={onNavigate}
           />
         ))}
       </div>

package/src/patterns/Sidebar/SidebarAction.tsx

@@ -1,7 +1,14 @@
 import { type ReactNode } from "react";
 import { Tooltip } from "../../primitives";
 import { cn } from "../../utils/cn";
-import { sidebarLinkActive, sidebarLinkIdle, sidebarRowClass, sidebarRowInteractiveHover, sidebarSectionAnchorClass } from "./sidebar-styles";
+import {
+  sidebarLinkActive,
+  sidebarLinkIdle,
+  sidebarRowInteractiveHover,
+  sidebarSectionIconClass,
+  sidebarSectionShell,
+  sidebarSectionShellCollapsed,
+} from "./sidebar-styles";
 
 export type SidebarActionProps = {
   label: string;
@@ -23,26 +30,28 @@ export const SidebarAction = ({
   className,
 }: SidebarActionProps) => {
   const row = (
-    <div
-      className={sidebarRowClass(
-        cn(
-          active ? sidebarLinkActive : sidebarLinkIdle,
-          !active && sidebarRowInteractiveHover,
-          className,
-        ),
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className={cn(
+        collapsed ? sidebarSectionShellCollapsed : sidebarSectionShell,
+        "cursor-pointer text-left",
+        active ? sidebarLinkActive : sidebarLinkIdle,
+        !active && sidebarRowInteractiveHover,
+        !collapsed && "gap-2",
+        className,
       )}
       data-active={active}
       data-collapsed={collapsed}
     >
-      <button
-        type="button"
-        className={sidebarSectionAnchorClass(collapsed ? "justify-center" : undefined)}
-        onClick={onClick}
-      >
-        {icon && <span className="shrink-0 [&>svg]:size-5">{icon}</span>}
-        {!collapsed && <span className="truncate">{label}</span>}
-      </button>
-    </div>
+      {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
+      {!collapsed && (
+        <span className="min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]">
+          {label}
+        </span>
+      )}
+    </button>
   );
 
   if (!collapsed || !tooltip) return row;

package/src/patterns/Sidebar/SidebarEntry.tsx

@@ -3,7 +3,6 @@ import { DropdownMenu, DropdownMenuItem, IconButton } from "../../primitives";
 import { MoreIcon } from "../../icons";
 import { cn } from "../../utils/cn";
 import {
-  sidebarAnchorClass,
   sidebarEntryHover,
   sidebarEntryIdle,
   sidebarEntrySelected,
@@ -66,58 +65,74 @@ export const SidebarEntry = ({
       )}
       data-state={state}
     >
+      {/* Stretch hit target over shell padding (hover was on the shell, link was content-only). */}
       <a
         href={href}
-        className={sidebarAnchorClass("gap-1")}
+        className="absolute inset-0 z-0 rounded-control"
+        aria-label={label}
         aria-current={state === "selected" ? "true" : undefined}
         onClick={onNavigate}
-      >
-        {icon && <span className="shrink-0 px-1 py-0.5 [&>svg]:size-4">{icon}</span>}
+      />
+
+      <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 text-caption-2">
+        {icon && <span className="shrink-0 [&>svg]:size-4">{icon}</span>}
         <span className="truncate">{label}</span>
-      </a>
+      </div>
 
       {badge && !(showMenu && menuVisible) && (
         <span
-          className={cn("shrink-0", showMenu && !forceMenuVisible && "group-hover/row:hidden")}
+          className={cn(
+            "pointer-events-none relative z-10 shrink-0",
+            showMenu && !forceMenuVisible && "group-hover/row:hidden",
+          )}
         >
           {badge}
         </span>
       )}
 
       {showMenu && (
-        <DropdownMenu
-          open={menuOpen}
-          onOpenChange={setMenuOpen}
-          align="end"
-          trigger={
-            <IconButton
-              hierarchy="quaternary"
-              size="small"
-              aria-label={`Actions for ${label}`}
-              aria-haspopup="menu"
-              aria-expanded={menuOpen}
-              className={cn(
-                "size-6 min-h-6 shrink-0 p-1",
-                sidebarQuaternaryIconButton,
-                !forceMenuVisible && !menuOpen && "hidden group-hover/row:inline-flex",
-                (forceMenuVisible || menuOpen) && "inline-flex",
-              )}
-            >
-              <MoreIcon size="small" />
-            </IconButton>
-          }
-        >
-          {menuItems?.map((item) => (
-            <DropdownMenuItem
-              key={item.id}
-              className={cn(item.destructive && "text-red-500 hover:bg-red-50 hover:text-red-700")}
-              onSelect={() => item.onSelect()}
-            >
-              {item.icon && <span className="shrink-0 [&>svg]:size-4">{item.icon}</span>}
-              {item.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenu>
+        <div className="relative z-10 shrink-0">
+          <DropdownMenu
+            open={menuOpen}
+            onOpenChange={setMenuOpen}
+            align="end"
+            trigger={
+              <IconButton
+                hierarchy="quaternary"
+                size="small"
+                aria-label={`Actions for ${label}`}
+                aria-haspopup="menu"
+                aria-expanded={menuOpen}
+                className={cn(
+                  "size-6 min-h-6 shrink-0 p-1",
+                  sidebarQuaternaryIconButton,
+                  !forceMenuVisible &&
+                    !menuOpen &&
+                    "hidden group-hover/row:inline-flex",
+                  (forceMenuVisible || menuOpen) && "inline-flex",
+                )}
+              >
+                <MoreIcon size="small" />
+              </IconButton>
+            }
+          >
+            {menuItems?.map((item) => (
+              <DropdownMenuItem
+                key={item.id}
+                className={cn(
+                  item.destructive &&
+                    "text-red-500 hover:bg-red-50 hover:text-red-700",
+                )}
+                onSelect={() => item.onSelect()}
+              >
+                {item.icon && (
+                  <span className="shrink-0 [&>svg]:size-4">{item.icon}</span>
+                )}
+                {item.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenu>
+        </div>
       )}
     </div>
   );

package/src/patterns/Sidebar/SidebarLink.tsx

@@ -58,6 +58,7 @@ export const SidebarLink = ({
   const row = collapsed ? (
     <div
       className={cn(
+        "relative",
         sidebarSectionShellCollapsed,
         stateStyles[state],
         state === "idle" && sidebarRowInteractiveHover,
@@ -68,24 +69,24 @@ export const SidebarLink = ({
     >
       <a
         href={href}
-        className="flex w-full items-center justify-center"
+        className="absolute inset-0 z-0 rounded-control"
         aria-current={state === "active" ? "page" : undefined}
         aria-label={label}
         onClick={onNavigate}
-      >
-        <span className="relative inline-flex shrink-0 items-center">
-          {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
-          {unread && (
-            <span aria-hidden className={sidebarUnreadOverlay}>
-              <span className={sidebarUnreadDot} />
-            </span>
-          )}
-        </span>
-      </a>
+      />
+      <span className="pointer-events-none relative z-10 inline-flex shrink-0 items-center">
+        {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
+        {unread && (
+          <span aria-hidden className={sidebarUnreadOverlay}>
+            <span className={sidebarUnreadDot} />
+          </span>
+        )}
+      </span>
     </div>
   ) : (
     <div
       className={cn(
+        "relative",
         tall ? sidebarSectionShellTall : sidebarSectionShell,
         stateStyles[state],
         state === "idle" && sidebarRowInteractiveHover,
@@ -94,18 +95,27 @@ export const SidebarLink = ({
       data-state={state}
       data-collapsed={collapsed}
     >
-      <div className={sidebarSectionContent}>
-        <a
-          href={href}
-          className="flex min-w-0 flex-1 items-center gap-2 truncate text-left"
-          aria-current={state === "active" ? "page" : undefined}
-          onClick={onNavigate}
-        >
+      <a
+        href={href}
+        className="absolute inset-0 z-0 rounded-control"
+        aria-current={state === "active" ? "page" : undefined}
+        aria-label={label}
+        onClick={onNavigate}
+      />
+      <div
+        className={cn(
+          sidebarSectionContent,
+          "pointer-events-none relative z-10",
+        )}
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-2 truncate text-left">
           {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
           <span className={sidebarSectionLabelClass}>{label}</span>
           {badge}
-        </a>
-        {trailing}
+        </span>
+        {trailing != null && (
+          <span className="pointer-events-auto shrink-0">{trailing}</span>
+        )}
       </div>
     </div>
   );

package/src/patterns/Sidebar/assets/logo-compliance-mark.png

@@ -1,5 +1,5 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Logo">
-<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
-</g>
-</svg>
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-compliance-mask.png

@@ -1,13 +1,13 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Mask" clip-path="url(#clip0_0_4)">
-<g id="icon-compliance.svg">
-<path id="Vector" d="M8.30333 5.84667L5.18333 14.2917H6.33833V14.2883C6.34 14.2883 6.34167 14.29 6.34167 14.29L8.90667 11.7267H9.06667L11.6283 14.2917H12.8233L9.71667 5.84667H8.305H8.30333ZM9.215 10.4433H8.75667L7.15167 12.0483L8.89 7.25167H9.10167L10.825 12.055L9.21667 10.4433H9.215Z" fill="var(--fill-0, #232323)"/>
-<path id="Vector_2" d="M8.98833 4.85833C9.87167 4.85833 10.6817 5.23 11.3117 5.84667H12.7967C11.925 4.54667 10.5433 3.70667 8.98833 3.70667C7.43333 3.70667 6.05167 4.54667 5.18 5.84667H6.665C7.29333 5.23 8.105 4.85833 8.98833 4.85833Z" fill="var(--fill-0, #232323)"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_0_4">
-<rect width="18" height="18" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mask" clip-path="url(#clip0_0_4)">
+<g id="icon-compliance.svg">
+<path id="Vector" d="M8.30333 5.84667L5.18333 14.2917H6.33833V14.2883C6.34 14.2883 6.34167 14.29 6.34167 14.29L8.90667 11.7267H9.06667L11.6283 14.2917H12.8233L9.71667 5.84667H8.305H8.30333ZM9.215 10.4433H8.75667L7.15167 12.0483L8.89 7.25167H9.10167L10.825 12.055L9.21667 10.4433H9.215Z" fill="var(--fill-0, #232323)"/>
+<path id="Vector_2" d="M8.98833 4.85833C9.87167 4.85833 10.6817 5.23 11.3117 5.84667H12.7967C11.925 4.54667 10.5433 3.70667 8.98833 3.70667C7.43333 3.70667 6.05167 4.54667 5.18 5.84667H6.665C7.29333 5.23 8.105 4.85833 8.98833 4.85833Z" fill="var(--fill-0, #232323)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_0_4">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/patterns/Sidebar/assets/logo-compliance.svg

@@ -1,17 +1,17 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="18" height="18" fill="#F5F5F5"/>
-<g id="Core">
-<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
-<g id="Content">
-<g id="Avatar">
-<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
-<g id="Chief=Technical, Size=18">
-<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
-<g id="Logo">
-<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
-</g>
-</g>
-</g>
-</g>
-</g>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical-avatar.svg

@@ -1,17 +1,17 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="18" height="18" fill="#F5F5F5"/>
-<g id="Core">
-<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
-<g id="Content">
-<g id="Avatar">
-<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
-<g id="Chief=Technical, Size=18">
-<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
-<g id="Logo">
-<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
-</g>
-</g>
-</g>
-</g>
-</g>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical-mark.png

@@ -1,5 +1,5 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Logo">
-<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
-</g>
-</svg>
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical.svg

@@ -1,16 +1,16 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="18" height="18" fill="#F5F5F5"/>
-<g id="Core">
-<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="white"/>
-<g id="Content">
-<g id="Avatar">
-<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
-<g id="Chief=Technical, Size=18">
-<g id="Logo">
-<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
-</g>
-</g>
-</g>
-</g>
-</g>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="white"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/sidebar-styles.ts

@@ -30,7 +30,8 @@ export const sidebarUnreadOverlay =
 export const sidebarUnreadDot =
   "absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
 
-export const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2 pl-1";
+/** Icon + label row inside a section shell — no extra inset (shell already has p-2). */
+export const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
 
 export const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";