@common-origin/design-system 3.0.0 → 3.1.0

package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.mjs

@@ -0,0 +1,131 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { interactiveRow } from '../../../lib/styleUtils.mjs';
+import { Avatar } from '../../atoms/Avatar/Avatar.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { Tooltip } from '../../atoms/Tooltip/Tooltip.mjs';
+import { Menu, MenuGroup, MenuItemRadio, MenuDivider } from '../Menu/Menu.mjs';
+import { useSidebarNav } from '../SidebarNavItem/SidebarNavContext.mjs';
+
+var semantic = tokens.semantic;
+var space = semantic.space,
+  color = semantic.color,
+  motion = semantic.motion,
+  radius = semantic.radius,
+  size = semantic.size,
+  border = semantic.border,
+  typography = semantic.typography;
+var Trigger = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "WorkspaceSwitcher__Trigger",
+  componentId: "sc-s35ke-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space[200], size.row.sm, space.inset.xs, space.inset.sm, radius.sm, typography.label, color.text["default"], motion.duration.fast, motion.easing.decelerate, interactiveRow(), function (_a) {
+  var $collapsed = _a.$collapsed;
+  return $collapsed && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: center;\n      padding: ", ";\n    "], ["\n      justify-content: center;\n      padding: ", ";\n    "])), space.inset.xs);
+}, border.focus, border.focusOffset);
+var Name = /*#__PURE__*/styled.span.withConfig({
+  displayName: "WorkspaceSwitcher__Name",
+  componentId: "sc-s35ke-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+var Decoration = /*#__PURE__*/styled.span.withConfig({
+  displayName: "WorkspaceSwitcher__Decoration",
+  componentId: "sc-s35ke-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  color: ", ";\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  color: ", ";\n"
+/**
+ * Shows the current workspace and switches between workspaces (#330), from SidebarNav's header.
+ * Built on Menu: a labelled group of the workspaces as radio items, then any actions.
+ */])), color.text.muted);
+/**
+ * Shows the current workspace and switches between workspaces (#330), from SidebarNav's header.
+ * Built on Menu: a labelled group of the workspaces as radio items, then any actions.
+ */
+var WorkspaceSwitcher = function WorkspaceSwitcher(_a) {
+  var workspaces = _a.workspaces,
+    value = _a.value,
+    onChange = _a.onChange,
+    _b = _a.label,
+    label = _b === void 0 ? 'Workspaces' : _b,
+    children = _a.children,
+    dataTestId = _a["data-testid"];
+  var collapsed = useSidebarNav().collapsed;
+  var match = workspaces.find(function (workspace) {
+    return workspace.id === value;
+  });
+  var fallback = !match && workspaces.length > 0 ? workspaces[0].name : undefined;
+  // Showing the first keeps the header usable, but the app's value is wrong, so say so, once per value
+  useEffect(function () {
+    if (fallback) console.warn("WorkspaceSwitcher: no workspace has the id \"".concat(value, "\"; showing \"").concat(fallback, "\""));
+  }, [value, fallback]);
+  var current = match !== null && match !== void 0 ? match : workspaces[0];
+  if (!current) return null;
+  var trigger = jsxs(Trigger, {
+    type: "button",
+    "$collapsed": collapsed,
+    "aria-label": collapsed ? current.name : undefined,
+    "data-testid": dataTestId,
+    children: [jsx(Decoration, {
+      "aria-hidden": "true",
+      children: jsx(Avatar, {
+        name: current.name,
+        picture: current.picture,
+        size: "xs"
+      })
+    }), !collapsed && jsxs(Fragment, {
+      children: [jsx(Name, {
+        children: current.name
+      }), jsx(Decoration, {
+        "aria-hidden": "true",
+        children: jsx(Icon, {
+          name: "caretDown",
+          size: "sm",
+          iconColor: "inherit"
+        })
+      })]
+    })]
+  });
+  return jsxs(Menu, {
+    trigger: collapsed ? jsx(Tooltip, {
+      text: current.name,
+      side: "right",
+      children: trigger
+    }) : trigger,
+    side: collapsed ? 'right' : 'bottom',
+    align: "start",
+    children: [jsx(MenuGroup, {
+      label: label,
+      children: workspaces.map(function (workspace) {
+        return jsx(MenuItemRadio, {
+          checked: workspace.id === current.id,
+          // Choosing the current workspace again changes nothing
+          onSelect: function onSelect() {
+            return workspace.id !== current.id && onChange(workspace.id);
+          },
+          icon: jsx(Avatar, {
+            name: workspace.name,
+            picture: workspace.picture,
+            size: "xs"
+          }),
+          description: workspace.description,
+          textValue: workspace.name,
+          children: workspace.name
+        }, workspace.id);
+      })
+    }), children && jsxs(Fragment, {
+      children: [jsx(MenuDivider, {}), jsx(MenuGroup, {
+        children: children
+      })]
+    })]
+  });
+};
+WorkspaceSwitcher.displayName = 'WorkspaceSwitcher';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { WorkspaceSwitcher };
+//# sourceMappingURL=WorkspaceSwitcher.mjs.map

package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceSwitcher.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/WorkspaceSwitcher/index.d.mts

@@ -0,0 +1,2 @@
+export { WorkspaceSwitcher } from './WorkspaceSwitcher.mjs';
+export type { WorkspaceSwitcherProps, Workspace } from './WorkspaceSwitcher.mjs';

package/dist/components/molecules/WorkspaceSwitcher/index.d.ts

@@ -0,0 +1,2 @@
+export { WorkspaceSwitcher } from './WorkspaceSwitcher';
+export type { WorkspaceSwitcherProps, Workspace } from './WorkspaceSwitcher';

package/dist/components/molecules/index.d.mts

@@ -14,6 +14,9 @@ export * from './EmptyState/index.mjs';
 export * from './FeatureBlock/index.mjs';
 export * from './Dropdown/index.mjs';
 export * from './List/index.mjs';
+export * from './Menu/index.mjs';
+export * from './SidebarNavItem/index.mjs';
+export * from './SidebarNavSection/index.mjs';
 export * from './Modal/index.mjs';
 export * from './NumberInput/index.mjs';
 export * from './PasswordField/index.mjs';
@@ -23,3 +26,4 @@ export * from './Slider/index.mjs';
 export * from './TabBar/index.mjs';
 export * from './TextField/index.mjs';
 export * from './TransactionListItem/index.mjs';
+export * from './WorkspaceSwitcher/index.mjs';

package/dist/components/molecules/index.d.ts

@@ -14,6 +14,9 @@ export * from './EmptyState';
 export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './List';
+export * from './Menu';
+export * from './SidebarNavItem';
+export * from './SidebarNavSection';
 export * from './Modal';
 export * from './NumberInput';
 export * from './PasswordField';
@@ -23,3 +26,4 @@ export * from './Slider';
 export * from './TabBar';
 export * from './TextField';
 export * from './TransactionListItem';
+export * from './WorkspaceSwitcher';

package/dist/components/organisms/SidebarNav/SidebarNav.d.mts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type SidebarNavContextValue } from '../../molecules/SidebarNavItem/SidebarNavContext.mjs';
+export type SidebarNavWidth = 'narrow' | 'default' | 'wide';
+export interface SidebarNavProps {
+    /** Names the navigation landmark, such as "Main" or "Workspace" */
+    label: string;
+    /**
+     * The body: SidebarNavItems and SidebarNavSections, in order, wrapped in components or Fragments
+     * if you like. It's one list, and scrolls when it's too tall.
+     */
+    children: React.ReactNode;
+    /** Content above the body, such as a WorkspaceSwitcher. The collapse toggle sits beside it. */
+    header?: React.ReactNode;
+    /** Content below the body, such as an upgrade prompt. Hidden in the rail. */
+    footer?: React.ReactNode;
+    /**
+     * The expanded width. Collapsed, it's always the rail.
+     * @default 'default'
+     */
+    width?: SidebarNavWidth;
+    /** Whether it's the icon rail (controlled). Use with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /**
+     * Whether it starts as the rail (uncontrolled). Saving the state between visits is the
+     * product's job.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /** Called when the toggle collapses or expands it */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Whether it has a collapse toggle. Turn it off where it can't collapse, such as inside a Sheet.
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * A router's link component for internal URLs, such as Next's `Link`, used by every item
+     * (decision 0008). Without one, items render plain links.
+     */
+    linkComponent?: SidebarNavContextValue['linkComponent'];
+    /** Test identifier for the nav */
+    'data-testid'?: string;
+}
+/**
+ * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
+ * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
+ * On small screens, place it in a Sheet with `collapsible={false}`.
+ */
+export declare const SidebarNav: {
+    ({ label, children, header, footer, width, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, linkComponent, "data-testid": dataTestId, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/organisms/SidebarNav/SidebarNav.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type SidebarNavContextValue } from '../../molecules/SidebarNavItem/SidebarNavContext';
+export type SidebarNavWidth = 'narrow' | 'default' | 'wide';
+export interface SidebarNavProps {
+    /** Names the navigation landmark, such as "Main" or "Workspace" */
+    label: string;
+    /**
+     * The body: SidebarNavItems and SidebarNavSections, in order, wrapped in components or Fragments
+     * if you like. It's one list, and scrolls when it's too tall.
+     */
+    children: React.ReactNode;
+    /** Content above the body, such as a WorkspaceSwitcher. The collapse toggle sits beside it. */
+    header?: React.ReactNode;
+    /** Content below the body, such as an upgrade prompt. Hidden in the rail. */
+    footer?: React.ReactNode;
+    /**
+     * The expanded width. Collapsed, it's always the rail.
+     * @default 'default'
+     */
+    width?: SidebarNavWidth;
+    /** Whether it's the icon rail (controlled). Use with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /**
+     * Whether it starts as the rail (uncontrolled). Saving the state between visits is the
+     * product's job.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /** Called when the toggle collapses or expands it */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Whether it has a collapse toggle. Turn it off where it can't collapse, such as inside a Sheet.
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * A router's link component for internal URLs, such as Next's `Link`, used by every item
+     * (decision 0008). Without one, items render plain links.
+     */
+    linkComponent?: SidebarNavContextValue['linkComponent'];
+    /** Test identifier for the nav */
+    'data-testid'?: string;
+}
+/**
+ * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
+ * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
+ * On small screens, place it in a Sheet with `collapsible={false}`.
+ */
+export declare const SidebarNav: {
+    ({ label, children, header, footer, width, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, linkComponent, "data-testid": dataTestId, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/organisms/SidebarNav/SidebarNav.mjs

@@ -0,0 +1,235 @@
+'use client';
+import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { reducedMotion, forcedColors } from '../../../lib/styleUtils.mjs';
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import { Tooltip } from '../../atoms/Tooltip/Tooltip.mjs';
+import { isKeyboardFocus } from '../../../lib/keyboardFocus.mjs';
+import { SidebarNavContext } from '../../molecules/SidebarNavItem/SidebarNavContext.mjs';
+
+var semantic = tokens.semantic,
+  component = tokens.component;
+var space = semantic.space,
+  motion = semantic.motion,
+  radius = semantic.radius,
+  border = semantic.border,
+  color = semantic.color;
+var widths = component.sidebarNav.width;
+var Nav = /*#__PURE__*/styled.nav.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__Nav",
+  componentId: "sc-1as46tp-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with a thin edge */\n  border-right: ", ";\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with a thin edge */\n  border-right: ", ";\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"])), space[200], function (_a) {
+  var $width = _a.$width;
+  return $width;
+}, space[200], border["default"], motion.duration.moderate, motion.easing.standard, reducedMotion);
+var Header = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__Header",
+  componentId: "sc-1as46tp-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"])), space[100], function (_a) {
+  var $collapsed = _a.$collapsed;
+  return $collapsed && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
+});
+var HeaderContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarNav__HeaderContent",
+  componentId: "sc-1as46tp-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n"], ["\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n"])));
+var Body = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarNav__Body",
+  componentId: "sc-1as46tp-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"
+// The rows and the highlight share this box, so the highlight scrolls with the rows
+])));
+// The rows and the highlight share this box, so the highlight scrolls with the rows
+var Content = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarNav__Content",
+  componentId: "sc-1as46tp-4"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+var List = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "SidebarNav__List",
+  componentId: "sc-1as46tp-5"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"])));
+// One highlight glides to the hovered or keyboard-focused row (0053): the row hover colour,
+// moving over duration.fast. It jumps under reduced motion and hides in forced colours, where
+// rows outline themselves instead.
+var Highlight = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__Highlight",
+  componentId: "sc-1as46tp-6"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"])), radius.sm, color.fill.muted, function (_a) {
+  var $visible = _a.$visible;
+  return $visible ? 1 : 0;
+}, function (_a) {
+  var $instant = _a.$instant;
+  return $instant ? "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.decelerate) : "transform ".concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    height ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    width ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    opacity ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate);
+}, reducedMotion, motion.duration.fast, motion.easing.decelerate, forcedColors);
+var Footer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarNav__Footer",
+  componentId: "sc-1as46tp-7"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"
+/**
+ * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
+ * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
+ * On small screens, place it in a Sheet with `collapsible={false}`.
+ */])));
+/**
+ * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
+ * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
+ * On small screens, place it in a Sheet with `collapsible={false}`.
+ */
+var SidebarNav = function SidebarNav(_a) {
+  var label = _a.label,
+    children = _a.children,
+    header = _a.header,
+    footer = _a.footer,
+    _b = _a.width,
+    width = _b === void 0 ? 'default' : _b,
+    collapsedProp = _a.collapsed,
+    _c = _a.defaultCollapsed,
+    defaultCollapsed = _c === void 0 ? false : _c,
+    onCollapsedChange = _a.onCollapsedChange,
+    _d = _a.collapsible,
+    collapsible = _d === void 0 ? true : _d,
+    linkComponent = _a.linkComponent,
+    dataTestId = _a["data-testid"];
+  var _e = useState(defaultCollapsed),
+    uncontrolledCollapsed = _e[0],
+    setUncontrolledCollapsed = _e[1];
+  var isControlled = collapsedProp !== undefined;
+  var collapsed = collapsible && (isControlled ? collapsedProp : uncontrolledCollapsed);
+  var contentRef = useRef(null);
+  var _f = useState({
+      box: null,
+      visible: false,
+      instant: true
+    }),
+    highlight = _f[0],
+    setHighlight = _f[1];
+  var toggle = function toggle() {
+    var next = !collapsed;
+    if (!isControlled) setUncontrolledCollapsed(next);
+    onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(next);
+  };
+  var hide = function hide() {
+    return setHighlight(function (state) {
+      return __assign(__assign({}, state), {
+        visible: false
+      });
+    });
+  };
+  // Collapsing or expanding moves every row, so the highlight's box is stale: hide it until the
+  // pointer or focus finds a row again (adjusted during render, React's pattern for a prop change)
+  var _g = useState(collapsed),
+    layout = _g[0],
+    setLayout = _g[1];
+  if (layout !== collapsed) {
+    setLayout(collapsed);
+    setHighlight(function (state) {
+      return __assign(__assign({}, state), {
+        visible: false,
+        instant: true
+      });
+    });
+  }
+  // Move the highlight to a row, or step aside for the current page's row, which has its own fill
+  var highlightRow = function highlightRow(target) {
+    var content = contentRef.current;
+    var row = target instanceof Element ? target.closest('[data-sidebar-row]') : null;
+    if (!content || !row || !content.contains(row) || row.getAttribute('aria-current') === 'page') return hide();
+    var outer = content.getBoundingClientRect();
+    var box = row.getBoundingClientRect();
+    setHighlight(function (state) {
+      return {
+        box: {
+          top: box.top - outer.top,
+          left: box.left - outer.left,
+          width: box.width,
+          height: box.height
+        },
+        visible: true,
+        // Appearing, it starts at the row rather than sliding from where it last was
+        instant: !state.visible
+      };
+    });
+  };
+  var context = {
+    collapsed: collapsed,
+    linkComponent: linkComponent,
+    glide: true,
+    inNav: true
+  };
+  var toggleLabel = collapsed ? 'Expand sidebar' : 'Collapse sidebar';
+  var toggleButton = collapsible && jsx(Tooltip, {
+    text: toggleLabel,
+    side: collapsed ? 'right' : 'bottom',
+    children: jsx(IconButton, {
+      variant: "naked",
+      size: "small",
+      iconName: "sidebar",
+      "aria-label": toggleLabel,
+      "aria-expanded": !collapsed,
+      onClick: toggle
+    })
+  });
+  return jsx(SidebarNavContext.Provider, {
+    value: context,
+    children: jsxs(Nav, {
+      "aria-label": label,
+      "$width": collapsed ? widths.rail : widths[width],
+      "data-collapsed": collapsed || undefined,
+      "data-testid": dataTestId,
+      children: [(header || toggleButton) && jsxs(Header, {
+        "$collapsed": collapsed,
+        children: [header && jsx(HeaderContent, {
+          children: header
+        }), toggleButton]
+      }), jsx(Body, {
+        children: jsxs(Content, {
+          ref: contentRef,
+          onPointerOver: function onPointerOver(event) {
+            return event.pointerType !== 'touch' && highlightRow(event.target);
+          },
+          onPointerLeave: hide,
+          onFocus: function onFocus(event) {
+            return isKeyboardFocus(event.target) && highlightRow(event.target);
+          },
+          onBlur: function onBlur(event) {
+            var _a;
+            if (!((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) hide();
+          },
+          children: [jsx(Highlight, {
+            "aria-hidden": "true",
+            "data-sidebar-highlight": "",
+            "$visible": highlight.visible,
+            "$instant": highlight.instant,
+            style: highlight.box ? {
+              transform: "translate(".concat(highlight.box.left, "px, ").concat(highlight.box.top, "px)"),
+              width: highlight.box.width,
+              height: highlight.box.height
+            } : undefined
+          }), jsx(List, {
+            children: children
+          })]
+        })
+      }), footer && !collapsed && jsx(Footer, {
+        children: footer
+      })]
+    })
+  });
+};
+SidebarNav.displayName = 'SidebarNav';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+export { SidebarNav };
+//# sourceMappingURL=SidebarNav.mjs.map

package/dist/components/organisms/SidebarNav/SidebarNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/organisms/SidebarNav/index.d.mts

@@ -0,0 +1,2 @@
+export { SidebarNav } from './SidebarNav.mjs';
+export type { SidebarNavProps, SidebarNavWidth } from './SidebarNav.mjs';

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

@@ -0,0 +1,2 @@
+export { SidebarNav } from './SidebarNav';
+export type { SidebarNavProps, SidebarNavWidth } from './SidebarNav';

package/dist/components/organisms/index.d.mts

@@ -0,0 +1 @@
+export * from './SidebarNav/index.mjs';

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

@@ -0,0 +1 @@
+export * from './SidebarNav';