@bitrise/bitkit-v2 0.3.461-beta.2914 → 0.3.461

package/dist/theme/tokens/index.d.ts

@@ -20,6 +20,12 @@ declare const tokens: {
         '2': {
             value: string;
         };
+        '3': {
+            value: string;
+        };
+        '4': {
+            value: string;
+        };
     };
     colors: {
         white: {
@@ -98,6 +104,44 @@ declare const tokens: {
                 value: string;
             };
         };
+        dark: {
+            '10': {
+                value: string;
+            };
+            '20': {
+                value: string;
+            };
+            '30': {
+                value: string;
+            };
+            '40': {
+                value: string;
+            };
+            '50': {
+                value: string;
+            };
+            '60': {
+                value: string;
+            };
+            '70': {
+                value: string;
+            };
+            '80': {
+                value: string;
+            };
+            '90': {
+                value: string;
+            };
+            '93': {
+                value: string;
+            };
+            '95': {
+                value: string;
+            };
+            '100': {
+                value: string;
+            };
+        };
         purple: {
             '10': {
                 value: string;
@@ -497,6 +541,18 @@ declare const tokens: {
         };
     };
     sizes: {
+        'layout/maxWidth/800': {
+            value: string;
+        };
+        'layout/maxWidth/960': {
+            value: string;
+        };
+        'layout/maxWidth/1280': {
+            value: string;
+        };
+        'layout/maxWidth/1616': {
+            value: string;
+        };
         "1": {
             value: string;
         };

package/dist/theme/tokens/sizes.d.ts

@@ -1,4 +1,16 @@
 declare const sizes: {
+    'layout/maxWidth/800': {
+        value: string;
+    };
+    'layout/maxWidth/960': {
+        value: string;
+    };
+    'layout/maxWidth/1280': {
+        value: string;
+    };
+    'layout/maxWidth/1616': {
+        value: string;
+    };
     "1": {
         value: string;
     };

package/dist/theme/tokens/sizes.js

@@ -1,7 +1,13 @@
 import sizesAndSpacing_default from "./sizesAndSpacing.js";
 import { defineTokens } from "@chakra-ui/react/styled-system";
 //#region lib/theme/tokens/sizes.ts
-var sizes = defineTokens.sizes(sizesAndSpacing_default);
+var sizes = defineTokens.sizes({
+	...sizesAndSpacing_default,
+	"layout/maxWidth/800": { value: "50rem" },
+	"layout/maxWidth/960": { value: "60rem" },
+	"layout/maxWidth/1280": { value: "80rem" },
+	"layout/maxWidth/1616": { value: "101rem" }
+});
 //#endregion
 export { sizes as default };
 

package/dist/theme/tokens/sizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.js","names":[],"sources":["../../../lib/theme/tokens/sizes.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nimport object from './sizesAndSpacing.json';\n\nconst sizes = defineTokens.sizes(object);\n\nexport default sizes;\n"],"mappings":";;;AAIA,IAAM,QAAQ,aAAa,MAAM,uBAAM"}
+{"version":3,"file":"sizes.js","names":[],"sources":["../../../lib/theme/tokens/sizes.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nimport object from './sizesAndSpacing.json';\n\nconst sizes = defineTokens.sizes({\n  ...object,\n  'layout/maxWidth/800': { value: '50rem' },\n  'layout/maxWidth/960': { value: '60rem' },\n  'layout/maxWidth/1280': { value: '80rem' },\n  'layout/maxWidth/1616': { value: '101rem' },\n});\n\nexport default sizes;\n"],"mappings":";;;AAIA,IAAM,QAAQ,aAAa,MAAM;CAC/B,GAAG;CACH,uBAAuB,EAAE,OAAO,QAAQ;CACxC,uBAAuB,EAAE,OAAO,QAAQ;CACxC,wBAAwB,EAAE,OAAO,QAAQ;CACzC,wBAAwB,EAAE,OAAO,SAAS;AAC5C,CAAC"}

package/docs/design-tokens.md

@@ -13,7 +13,8 @@ bitkit-v2 holds **hand-maintained** token files that mirror that source:
 | source (`tokens.json`)                                   | bitkit-v2 file                              |
 | -------------------------------------------------------- | ------------------------------------------- |
 | `core/color-primitives.core` (`purple.50`, `red.40`, …)  | `lib/theme/tokens/colors.ts` (primitives)   |
-| `semantic/theme-light.{color,sys,…}`                     | `lib/theme/semantic-tokens/semanticColors.ts` |
+| `semantic/theme-light.{color,sys,…}`                     | `lib/theme/semantic-tokens/semanticColors.ts` (`_light`) |
+| `semantic/theme-dark.{color,sys,…}`                      | `lib/theme/semantic-tokens/semanticColors.ts` (`_dark`) |
 | `components/colors.{background,text,icon,button,status,gradient,…}` | `lib/theme/semantic-tokens/semanticColors.ts` |
 
 When the source changes (it does, in small increments), re-sync bitkit's files
@@ -38,6 +39,8 @@ semantic+component layers:
 - tokens **bitkit has but the source doesn't** (renamed / stale / intentional extra),
 - **light value/reference mismatches** on the common tokens.
 
+`_dark` values aren't compared — check them against `semantic/theme-dark` by hand.
+
 Values are compared canonically, so equivalent spellings (`#fff` ≡ `#ffffff`,
 `core.purple.50` ≡ `colors.purple.50`) are **not** flagged.
 
@@ -60,27 +63,21 @@ After any change, run `npm run theme:generate-types` then `npm run type-check`.
 ## Runtime constraint: why some values can't match the source verbatim
 
 bitkit resolves token references to **CSS custom properties** at runtime
-(`var(--colors-purple-50)`). Two source spellings are therefore impossible to
-reproduce and are deliberately expressed differently — **same rendered color**:
-
-1. **A reference inside a composite value** (gradient, `color-mix`). Chakra
-   parses any `/` inside `{…}` as a `color-mix` opacity delimiter and **throws**.
-   So gradients **inline the dot-primitive** instead of referencing the semantic
-   token:
-   - source: `linear-gradient(90deg, rgba({color.purple.minimal}, 1) 0%, …)`
-   - bitkit: `linear-gradient(90deg, {colors.purple.95} 0%, …)`
-2. **Alpha via `rgba({ref}, a)`**. `rgba(var(--x), 0.5)` is invalid CSS, so
-   bitkit uses `color-mix(in srgb, {colors.x} 50%, transparent)` (and a literal
-   `rgba(255, 255, 255, 0)` for fully-transparent tokens).
+(`var(--colors-purple-50)`). The source's **alpha via `rgba({ref}, a)`** is
+therefore impossible to reproduce: `rgba(var(--x), 0.5)` is invalid CSS. bitkit
+expresses it differently — **same rendered color**:
+
+- `rgba({ref}, 1)` inside a gradient → the plain reference:
+  - source: `linear-gradient(90deg, rgba({color.purple.minimal}, 1) 0%, …)`
+  - bitkit: `linear-gradient(90deg, {colors.color/purple/minimal} 0%, …)`
+- any other alpha → `color-mix(in srgb, {colors.x} 50%, transparent)` (and a
+  literal `rgba(255, 255, 255, 0)` for fully-transparent tokens).
 
 A drift report that only flags these representation differences means bitkit is
 **fully in sync**.
 
 ## Out of scope (intentional)
 
-- **Dark theme** — the source ships a full `semantic/theme-dark` layer and a
-  `dark` primitive scale. bitkit does **not** implement dark mode yet, so these
-  are intentionally absent. _(Later task — revisit when dark mode is on the roadmap.)_
 - **brand** — the source's `brand/*` primitives (and `brand/primary`) are "not
   in design" for bitkit and were intentionally dropped.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.461-beta.2914",
+  "version": "0.3.461",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -78,6 +78,7 @@
     "@google-cloud/storage": "^8.2.0",
     "@storybook/addon-docs": "10.6.0",
     "@storybook/addon-mcp": "10.6.0",
+    "@storybook/addon-themes": "10.6.0",
     "@storybook/react-vite": "10.6.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/node": "^26.6.2",

package/dist/components/BitkitUISideNav/BitkitUISideNav.d.ts

@@ -1,37 +0,0 @@
-import { BoxProps } from '@chakra-ui/react/box';
-import { ReactNode } from 'react';
-export interface BitkitUISideNavProps extends Omit<BoxProps, 'children'> {
-    children: ReactNode;
-    /**
-     * Forces the desktop rail open or shut, overriding the pointer and focus behaviour. Leave it
-     * unset for the normal rail. Set it to `true` while something the rail does not know about is
-     * anchored to it, such as a popover opened from the footer.
-     */
-    expanded?: boolean;
-    /** Mobile drawer visibility. Controlled, because the header's menu button is what opens it. */
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
-export { uiSideNavRailWidth } from '../../theme/slot-recipes/UISideNav.recipe';
-export { type BitkitUISideNavBodyProps } from './UISideNavBody';
-export { type BitkitUISideNavFooterProps } from './UISideNavFooter';
-export { type BitkitUISideNavFooterHeadingProps } from './UISideNavFooterHeading';
-export { type BitkitUISideNavItemProps } from './UISideNavItem';
-export { type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, } from './UISideNavLink';
-export { type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, } from './UISideNavWorkspaceSelector';
-declare const _default: import('react').ForwardRefExoticComponent<BitkitUISideNavProps & import('react').RefAttributes<HTMLElement>> & {
-    Body: import('react').ForwardRefExoticComponent<import('./UISideNavBody').BitkitUISideNavBodyProps & import('react').RefAttributes<HTMLDivElement>>;
-    Footer: import('react').ForwardRefExoticComponent<import('./UISideNavFooter').BitkitUISideNavFooterProps & import('react').RefAttributes<HTMLDivElement>>;
-    FooterHeading: import('react').ForwardRefExoticComponent<import('./UISideNavFooterHeading').BitkitUISideNavFooterHeadingProps & import('react').RefAttributes<HTMLParagraphElement>>;
-    Item: import('react').ForwardRefExoticComponent<import('./UISideNavItem').BitkitUISideNavItemProps & import('react').RefAttributes<HTMLAnchorElement>>;
-    Link: import('react').ForwardRefExoticComponent<import('./UISideNavLink').BitkitUISideNavLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-    WorkspaceSelector: import('react').ForwardRefExoticComponent<Omit<import('@chakra-ui/react').SelectTriggerProps, "children" | "onChange"> & {
-        children?: import('../BitkitSelectMenu/BitkitSelectMenuAction').BitkitSelectMenuActionChild;
-        isLoading?: boolean;
-        label?: string;
-        onValueChange?: (value: string) => void;
-        value?: string;
-        workspaces: Array<import('./UISideNavWorkspaceSelector').BitkitUISideNavWorkspaceProps>;
-    } & Omit<import('../BitkitSelectMenu/BitkitSelectMenu').BitkitSelectMenuSearchProps, "searchPlaceholder"> & import('../BitkitSelectMenu/BitkitSelectMenu').BitkitSelectMenuScrollProps & import('../BitkitSelectMenu/BitkitSelectMenu').BitkitSelectMenuEmptyStateProps & import('../BitkitSelectMenu/BitkitSelectMenu').BitkitSelectMenuErrorStateProps & import('react').RefAttributes<HTMLButtonElement>>;
-};
-export default _default;

package/dist/components/BitkitUISideNav/BitkitUISideNav.js

@@ -1,146 +0,0 @@
-import { withSubComponents } from "../../utilities/withSubComponents.js";
-import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
-import useResponsive from "../../hooks/useResponsive.js";
-import { UISideNavContextProvider } from "./UISideNavContext.js";
-import UISideNavBody from "./UISideNavBody.js";
-import UISideNavFooter from "./UISideNavFooter.js";
-import UISideNavFooterHeading from "./UISideNavFooterHeading.js";
-import UISideNavItem from "./UISideNavItem.js";
-import UISideNavLink from "./UISideNavLink.js";
-import UISideNavWorkspaceSelector from "./UISideNavWorkspaceSelector.js";
-import { uiSideNavRailWidth } from "../../theme/slot-recipes/UISideNav.recipe.js";
-import { Box } from "@chakra-ui/react/box";
-import { useSlotRecipe } from "@chakra-ui/react/styled-system";
-import { forwardRef, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@chakra-ui/react/portal";
-import { Drawer } from "@chakra-ui/react/drawer";
-//#region lib/components/BitkitUISideNav/BitkitUISideNav.tsx
-/**
-* The platform's primary navigation. It expects a workspace selector, a body of navigation
-* items, and an optional footer:
-*
-* ```tsx
-* <BitkitUISideNav open={open} onOpenChange={setOpen}>
-*   <BitkitUISideNav.WorkspaceSelector
-*     workspaces={workspaces}
-*     value={workspace}
-*     onValueChange={setWorkspace}
-*   />
-*   <BitkitUISideNav.Body>
-*     <BitkitUISideNav.Item href="/dashboard" icon={IconDashboard} selectedIcon={IconDashboardFilled} selected>
-*       Dashboard
-*     </BitkitUISideNav.Item>
-*   </BitkitUISideNav.Body>
-*   <BitkitUISideNav.Footer>…</BitkitUISideNav.Footer>
-* </BitkitUISideNav>
-* ```
-*
-* On desktop it is a 72px rail that widens to 256px under the pointer and while anything inside
-* it holds keyboard focus. The rows are always laid out at the full width and clipped, so the
-* labels appear without any text reflowing. It will not collapse while the workspace menu is
-* open. There is no pin: the rail is the resting state.
-*
-* Below the `tablet` breakpoint it becomes an overlay drawer instead, opened by the header rather
-* than by hovering. Pass `open` and `onOpenChange`; they are ignored on desktop.
-*
-* It does not position itself. The consumer decides where it sits and how tall it is, which is
-* what lets a page slot it under a header of any height. The expanded rail overlays the page
-* rather than pushing it, so give it a `position` of your own and reserve 72px beside it.
-*
-* Descendants can read the current state with `useUISideNav()`.
-*/
-var BitkitUISideNav = forwardRef((props, ref) => {
-	const { children, css, expanded: expandedProp, onBlur, onFocus, onOpenChange, onPointerEnter, onPointerLeave, open = false, ...rest } = props;
-	const { isMobile } = useResponsive();
-	const [pointerInside, setPointerInside] = useState(false);
-	const [focusInside, setFocusInside] = useState(false);
-	const [menuOpen, setMenuOpen] = useState(false);
-	const menuContainerRef = useRef(null);
-	const styles = useSlotRecipe({ key: "uiSideNav" })({ layout: isMobile ? "drawer" : "rail" });
-	const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));
-	const tracksPointer = !isMobile && expandedProp === void 0;
-	const handleFocus = (event) => {
-		onFocus?.(event);
-		if (!tracksPointer || !event.target.matches(":focus-visible")) return;
-		setFocusInside(true);
-	};
-	const handleBlur = (event) => {
-		onBlur?.(event);
-		if (!tracksPointer || event.currentTarget.contains(event.relatedTarget)) return;
-		setFocusInside(false);
-	};
-	const handlePointerEnter = (event) => {
-		onPointerEnter?.(event);
-		if (tracksPointer) setPointerInside(true);
-	};
-	const handlePointerLeave = (event) => {
-		onPointerLeave?.(event);
-		if (tracksPointer) setPointerInside(false);
-	};
-	const nav = /* @__PURE__ */ jsx(Box, {
-		ref,
-		"aria-label": "Platform navigation",
-		asChild: true,
-		"data-expanded": expanded ? "" : void 0,
-		...rest,
-		css: [styles.root, css],
-		onBlur: handleBlur,
-		onFocus: handleFocus,
-		onPointerEnter: handlePointerEnter,
-		onPointerLeave: handlePointerLeave,
-		children: /* @__PURE__ */ jsx("nav", { children })
-	});
-	const context = useMemo(() => ({
-		expanded,
-		isMobile,
-		menuContainerRef,
-		setMenuOpen,
-		styles
-	}), [
-		expanded,
-		isMobile,
-		styles
-	]);
-	if (!isMobile) return /* @__PURE__ */ jsx(UISideNavContextProvider, {
-		value: context,
-		children: nav
-	});
-	return /* @__PURE__ */ jsx(UISideNavContextProvider, {
-		value: context,
-		children: /* @__PURE__ */ jsx(Drawer.Root, {
-			onOpenChange: (details) => onOpenChange?.(details.open),
-			open,
-			children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { css: styles.backdrop }), /* @__PURE__ */ jsx(Drawer.Positioner, {
-				css: styles.positioner,
-				children: /* @__PURE__ */ jsxs(Drawer.Content, {
-					ref: menuContainerRef,
-					"aria-label": "Navigation",
-					css: styles.content,
-					children: [nav, /* @__PURE__ */ jsx(Box, {
-						css: styles.closeButton,
-						children: /* @__PURE__ */ jsx(BitkitCloseButton, {
-							"aria-label": "Close navigation",
-							colorVariant: "white",
-							onClick: () => onOpenChange?.(false),
-							size: "md"
-						})
-					})]
-				})
-			})] })
-		})
-	});
-});
-BitkitUISideNav.displayName = "BitkitUISideNav";
-var BitkitUISideNav_default = withSubComponents(BitkitUISideNav, {
-	Body: UISideNavBody,
-	Footer: UISideNavFooter,
-	FooterHeading: UISideNavFooterHeading,
-	Item: UISideNavItem,
-	Link: UISideNavLink,
-	WorkspaceSelector: UISideNavWorkspaceSelector
-});
-//#endregion
-export { BitkitUISideNav_default as default, uiSideNavRailWidth };
-
-//# sourceMappingURL=BitkitUISideNav.js.map

package/dist/components/BitkitUISideNav/BitkitUISideNav.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BitkitUISideNav.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/BitkitUISideNav.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Drawer } from '@chakra-ui/react/drawer';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useMemo, useRef, useState } from 'react';\n\nimport useResponsive from '../../hooks/useResponsive';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport UISideNavBody from './UISideNavBody';\nimport { UISideNavContextProvider } from './UISideNavContext';\nimport UISideNavFooter from './UISideNavFooter';\nimport UISideNavFooterHeading from './UISideNavFooterHeading';\nimport UISideNavItem from './UISideNavItem';\nimport UISideNavLink from './UISideNavLink';\nimport UISideNavWorkspaceSelector from './UISideNavWorkspaceSelector';\n\nexport interface BitkitUISideNavProps extends Omit<BoxProps, 'children'> {\n  children: ReactNode;\n  /**\n   * Forces the desktop rail open or shut, overriding the pointer and focus behaviour. Leave it\n   * unset for the normal rail. Set it to `true` while something the rail does not know about is\n   * anchored to it, such as a popover opened from the footer.\n   */\n  expanded?: boolean;\n  /** Mobile drawer visibility. Controlled, because the header's menu button is what opens it. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * The platform's primary navigation. It expects a workspace selector, a body of navigation\n * items, and an optional footer:\n *\n * ```tsx\n * <BitkitUISideNav open={open} onOpenChange={setOpen}>\n *   <BitkitUISideNav.WorkspaceSelector\n *     workspaces={workspaces}\n *     value={workspace}\n *     onValueChange={setWorkspace}\n *   />\n *   <BitkitUISideNav.Body>\n *     <BitkitUISideNav.Item href=\"/dashboard\" icon={IconDashboard} selectedIcon={IconDashboardFilled} selected>\n *       Dashboard\n *     </BitkitUISideNav.Item>\n *   </BitkitUISideNav.Body>\n *   <BitkitUISideNav.Footer>…</BitkitUISideNav.Footer>\n * </BitkitUISideNav>\n * ```\n *\n * On desktop it is a 72px rail that widens to 256px under the pointer and while anything inside\n * it holds keyboard focus. The rows are always laid out at the full width and clipped, so the\n * labels appear without any text reflowing. It will not collapse while the workspace menu is\n * open. There is no pin: the rail is the resting state.\n *\n * Below the `tablet` breakpoint it becomes an overlay drawer instead, opened by the header rather\n * than by hovering. Pass `open` and `onOpenChange`; they are ignored on desktop.\n *\n * It does not position itself. The consumer decides where it sits and how tall it is, which is\n * what lets a page slot it under a header of any height. The expanded rail overlays the page\n * rather than pushing it, so give it a `position` of your own and reserve 72px beside it.\n *\n * Descendants can read the current state with `useUISideNav()`.\n */\nconst BitkitUISideNav = forwardRef<HTMLElement, BitkitUISideNavProps>((props, ref) => {\n  const {\n    children,\n    css,\n    expanded: expandedProp,\n    onBlur,\n    onFocus,\n    onOpenChange,\n    onPointerEnter,\n    onPointerLeave,\n    open = false,\n    ...rest\n  } = props;\n\n  const { isMobile } = useResponsive();\n\n  const [pointerInside, setPointerInside] = useState(false);\n  const [focusInside, setFocusInside] = useState(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const menuContainerRef = useRef<HTMLDivElement>(null);\n\n  const recipe = useSlotRecipe({ key: 'uiSideNav' });\n  const styles = recipe({ layout: isMobile ? 'drawer' : 'rail' });\n\n  const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));\n  const tracksPointer = !isMobile && expandedProp === undefined;\n\n  // The consumer's handlers run first and unconditionally: the rail listens on the same events,\n  // it does not own them.\n  const handleFocus: NonNullable<BitkitUISideNavProps['onFocus']> = (event) => {\n    onFocus?.(event);\n    if (!tracksPointer || !event.target.matches(':focus-visible')) return;\n    setFocusInside(true);\n  };\n\n  const handleBlur: NonNullable<BitkitUISideNavProps['onBlur']> = (event) => {\n    onBlur?.(event);\n    // `blur` also fires when focus moves between two rows. Only a target outside the nav counts.\n    if (!tracksPointer || event.currentTarget.contains(event.relatedTarget)) return;\n    setFocusInside(false);\n  };\n\n  const handlePointerEnter: NonNullable<BitkitUISideNavProps['onPointerEnter']> = (event) => {\n    onPointerEnter?.(event);\n    if (tracksPointer) setPointerInside(true);\n  };\n\n  const handlePointerLeave: NonNullable<BitkitUISideNavProps['onPointerLeave']> = (event) => {\n    onPointerLeave?.(event);\n    if (tracksPointer) setPointerInside(false);\n  };\n\n  const nav = (\n    <Box\n      ref={ref}\n      aria-label=\"Platform navigation\"\n      asChild\n      data-expanded={expanded ? '' : undefined}\n      {...rest}\n      css={[styles.root, css]}\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n    >\n      <nav>{children}</nav>\n    </Box>\n  );\n\n  const context = useMemo(\n    () => ({ expanded, isMobile, menuContainerRef, setMenuOpen, styles }),\n    [expanded, isMobile, styles],\n  );\n\n  if (!isMobile) {\n    return <UISideNavContextProvider value={context}>{nav}</UISideNavContextProvider>;\n  }\n\n  return (\n    <UISideNavContextProvider value={context}>\n      <Drawer.Root onOpenChange={(details) => onOpenChange?.(details.open)} open={open}>\n        <Portal>\n          <Drawer.Backdrop css={styles.backdrop} />\n          <Drawer.Positioner css={styles.positioner}>\n            <Drawer.Content ref={menuContainerRef} aria-label=\"Navigation\" css={styles.content}>\n              {nav}\n              <Box css={styles.closeButton}>\n                <BitkitCloseButton\n                  aria-label=\"Close navigation\"\n                  colorVariant=\"white\"\n                  onClick={() => onOpenChange?.(false)}\n                  size=\"md\"\n                />\n              </Box>\n            </Drawer.Content>\n          </Drawer.Positioner>\n        </Portal>\n      </Drawer.Root>\n    </UISideNavContextProvider>\n  );\n});\n\nexport { uiSideNavRailWidth } from '../../theme/slot-recipes/UISideNav.recipe';\nexport { type BitkitUISideNavBodyProps } from './UISideNavBody';\nexport { type BitkitUISideNavFooterProps } from './UISideNavFooter';\nexport { type BitkitUISideNavFooterHeadingProps } from './UISideNavFooterHeading';\nexport { type BitkitUISideNavItemProps } from './UISideNavItem';\nexport {\n  type BitkitUISideNavLinkAsAnchorProps,\n  type BitkitUISideNavLinkAsButtonProps,\n  type BitkitUISideNavLinkProps,\n} from './UISideNavLink';\nexport {\n  type BitkitUISideNavWorkspaceProps,\n  type BitkitUISideNavWorkspaceSelectorProps,\n} from './UISideNavWorkspaceSelector';\n\nBitkitUISideNav.displayName = 'BitkitUISideNav';\n\nexport default withSubComponents(BitkitUISideNav, {\n  Body: UISideNavBody,\n  Footer: UISideNavFooter,\n  FooterHeading: UISideNavFooterHeading,\n  Item: UISideNavItem,\n  Link: UISideNavLink,\n  WorkspaceSelector: UISideNavWorkspaceSelector,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAM,kBAAkB,YAA+C,OAAO,QAAQ;CACpF,MAAM,EACJ,UACA,KACA,UAAU,cACV,QACA,SACA,cACA,gBACA,gBACA,OAAO,OACP,GAAG,SACD;CAEJ,MAAM,EAAE,aAAa,cAAc;CAEnC,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,mBAAmB,OAAuB,IAAI;CAGpD,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO,EAAE,QAAQ,WAAW,WAAW,OAAO,CAAC;CAE9D,MAAM,WAAW,aAAa,iBAAiB,iBAAiB,eAAe;CAC/E,MAAM,gBAAgB,CAAC,YAAY,iBAAiB,KAAA;CAIpD,MAAM,eAA6D,UAAU;EAC3E,UAAU,KAAK;EACf,IAAI,CAAC,iBAAiB,CAAC,MAAM,OAAO,QAAQ,gBAAgB,GAAG;EAC/D,eAAe,IAAI;CACrB;CAEA,MAAM,cAA2D,UAAU;EACzE,SAAS,KAAK;EAEd,IAAI,CAAC,iBAAiB,MAAM,cAAc,SAAS,MAAM,aAAa,GAAG;EACzE,eAAe,KAAK;CACtB;CAEA,MAAM,sBAA2E,UAAU;EACzF,iBAAiB,KAAK;EACtB,IAAI,eAAe,iBAAiB,IAAI;CAC1C;CAEA,MAAM,sBAA2E,UAAU;EACzF,iBAAiB,KAAK;EACtB,IAAI,eAAe,iBAAiB,KAAK;CAC3C;CAEA,MAAM,MACJ,oBAAC,KAAD;EACO;EACL,cAAW;EACX,SAAA;EACA,iBAAe,WAAW,KAAK,KAAA;EAC/B,GAAI;EACJ,KAAK,CAAC,OAAO,MAAM,GAAG;EACtB,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,gBAAgB;EAEhB,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;CAGP,MAAM,UAAU,eACP;EAAE;EAAU;EAAU;EAAkB;EAAa;CAAO,IACnE;EAAC;EAAU;EAAU;CAAM,CAC7B;CAEA,IAAI,CAAC,UACH,OAAO,oBAAC,0BAAD;EAA0B,OAAO;EAAU,UAAA;CAA8B,CAAA;CAGlF,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,OAAO,MAAR;GAAa,eAAe,YAAY,eAAe,QAAQ,IAAI;GAAS;GAC1E,UAAA,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,EAAiB,KAAK,OAAO,SAAW,CAAA,GACxC,oBAAC,OAAO,YAAR;IAAmB,KAAK,OAAO;IAC7B,UAAA,qBAAC,OAAO,SAAR;KAAgB,KAAK;KAAkB,cAAW;KAAa,KAAK,OAAO;KAA3E,UAAA,CACG,KACD,oBAAC,KAAD;MAAK,KAAK,OAAO;MACf,UAAA,oBAAC,mBAAD;OACE,cAAW;OACX,cAAa;OACb,eAAe,eAAe,KAAK;OACnC,MAAK;MACN,CAAA;KACE,CAAA,CACS;;GACC,CAAA,CACb,EAAA,CAAA;EACG,CAAA;CACW,CAAA;AAE9B,CAAC;AAiBD,gBAAgB,cAAc;AAE9B,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,eAAe;CACf,MAAM;CACN,MAAM;CACN,mBAAmB;AACrB,CAAC"}

package/dist/components/BitkitUISideNav/UISideNavBody.d.ts

@@ -1,7 +0,0 @@
-import { BoxProps } from '@chakra-ui/react/box';
-import { ReactNode } from 'react';
-export interface BitkitUISideNavBodyProps extends BoxProps {
-    children: ReactNode;
-}
-declare const UISideNavBody: import('react').ForwardRefExoticComponent<BitkitUISideNavBodyProps & import('react').RefAttributes<HTMLDivElement>>;
-export default UISideNavBody;

package/dist/components/BitkitUISideNav/UISideNavBody.js

@@ -1,20 +0,0 @@
-import { useUISideNavContext } from "./UISideNavContext.js";
-import { Box } from "@chakra-ui/react/box";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region lib/components/BitkitUISideNav/UISideNavBody.tsx
-var UISideNavBody = forwardRef((props, ref) => {
-	const { children, css, ...rest } = props;
-	const { styles } = useUISideNavContext();
-	return /* @__PURE__ */ jsx(Box, {
-		ref,
-		...rest,
-		css: [styles.body, css],
-		children
-	});
-});
-UISideNavBody.displayName = "BitkitUISideNav.Body";
-//#endregion
-export { UISideNavBody as default };
-
-//# sourceMappingURL=UISideNavBody.js.map

package/dist/components/BitkitUISideNav/UISideNavBody.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UISideNavBody.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavBody.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport interface BitkitUISideNavBodyProps extends BoxProps {\n  children: ReactNode;\n}\n\nconst UISideNavBody = forwardRef<HTMLDivElement, BitkitUISideNavBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const { styles } = useUISideNavContext();\n\n  return (\n    <Box ref={ref} {...rest} css={[styles.body, css]}>\n      {children}\n    </Box>\n  );\n});\n\nUISideNavBody.displayName = 'BitkitUISideNav.Body';\n\nexport default UISideNavBody;\n"],"mappings":";;;;;AASA,IAAM,gBAAgB,YAAsD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CAEnC,MAAM,EAAE,WAAW,oBAAoB;CAEvC,OACE,oBAAC,KAAD;EAAU;EAAK,GAAI;EAAM,KAAK,CAAC,OAAO,MAAM,GAAG;EAC5C;CACE,CAAA;AAET,CAAC;AAED,cAAc,cAAc"}

package/dist/components/BitkitUISideNav/UISideNavContext.d.ts

@@ -1,32 +0,0 @@
-import { SystemStyleObject } from '@chakra-ui/react/styled-system';
-import { RefObject } from 'react';
-export interface UISideNavContextValue {
-    /** True while the rail is showing its labels, and always true in the mobile drawer. */
-    expanded: boolean;
-    isMobile: boolean;
-    /**
-     * Where a menu opened inside the drawer has to be portalled: the panel itself. The panel
-     * scrolls, so a menu left in the flow would scroll with it and be clipped by it, and anywhere
-     * outside the panel is outside the dialog's focus trap.
-     */
-    menuContainerRef: RefObject<HTMLDivElement | null>;
-    /**
-     * How a descendant menu holds the rail open. The rail cannot collapse while a menu anchored
-     * inside it is open, or the menu would be left hanging beside a 72px strip.
-     */
-    setMenuOpen: (open: boolean) => void;
-    styles: Record<string, SystemStyleObject>;
-}
-declare const UISideNavContextProvider: import('react').Provider<UISideNavContextValue>, useUISideNavContext: () => UISideNavContextValue;
-export { UISideNavContextProvider, useUISideNavContext };
-/**
- * Reads the side navigation's current state from inside it. Anything rendered in the footer that
- * has to lay itself out differently in the collapsed rail should call this rather than have the
- * state passed down to it.
- *
- * ```tsx
- * const { expanded } = useUISideNav();
- * return expanded ? <McpWidget /> : <McpWidgetIcon />;
- * ```
- */
-export declare const useUISideNav: () => Pick<UISideNavContextValue, "expanded" | "isMobile">;

package/dist/components/BitkitUISideNav/UISideNavContext.js

@@ -1,28 +0,0 @@
-import { createContext } from "@chakra-ui/react";
-//#region lib/components/BitkitUISideNav/UISideNavContext.tsx
-var [UISideNavContextProvider, useUISideNavContext] = createContext({
-	hookName: "useUISideNavContext",
-	name: "UISideNavContext",
-	providerName: "<BitkitUISideNav />"
-});
-/**
-* Reads the side navigation's current state from inside it. Anything rendered in the footer that
-* has to lay itself out differently in the collapsed rail should call this rather than have the
-* state passed down to it.
-*
-* ```tsx
-* const { expanded } = useUISideNav();
-* return expanded ? <McpWidget /> : <McpWidgetIcon />;
-* ```
-*/
-var useUISideNav = () => {
-	const { expanded, isMobile } = useUISideNavContext();
-	return {
-		expanded,
-		isMobile
-	};
-};
-//#endregion
-export { UISideNavContextProvider, useUISideNav, useUISideNavContext };
-
-//# sourceMappingURL=UISideNavContext.js.map

package/dist/components/BitkitUISideNav/UISideNavContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UISideNavContext.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavContext.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type RefObject } from 'react';\n\nexport interface UISideNavContextValue {\n  /** True while the rail is showing its labels, and always true in the mobile drawer. */\n  expanded: boolean;\n  isMobile: boolean;\n  /**\n   * Where a menu opened inside the drawer has to be portalled: the panel itself. The panel\n   * scrolls, so a menu left in the flow would scroll with it and be clipped by it, and anywhere\n   * outside the panel is outside the dialog's focus trap.\n   */\n  menuContainerRef: RefObject<HTMLDivElement | null>;\n  /**\n   * How a descendant menu holds the rail open. The rail cannot collapse while a menu anchored\n   * inside it is open, or the menu would be left hanging beside a 72px strip.\n   */\n  setMenuOpen: (open: boolean) => void;\n  styles: Record<string, SystemStyleObject>;\n}\n\nconst [UISideNavContextProvider, useUISideNavContext] = createContext<UISideNavContextValue>({\n  hookName: 'useUISideNavContext',\n  name: 'UISideNavContext',\n  providerName: '<BitkitUISideNav />',\n});\n\nexport { UISideNavContextProvider, useUISideNavContext };\n\n/**\n * Reads the side navigation's current state from inside it. Anything rendered in the footer that\n * has to lay itself out differently in the collapsed rail should call this rather than have the\n * state passed down to it.\n *\n * ```tsx\n * const { expanded } = useUISideNav();\n * return expanded ? <McpWidget /> : <McpWidgetIcon />;\n * ```\n */\nexport const useUISideNav = (): Pick<UISideNavContextValue, 'expanded' | 'isMobile'> => {\n  const { expanded, isMobile } = useUISideNavContext();\n  return { expanded, isMobile };\n};\n"],"mappings":";;AAuBA,IAAM,CAAC,0BAA0B,uBAAuB,cAAqC;CAC3F,UAAU;CACV,MAAM;CACN,cAAc;AAChB,CAAC;;;;;;;;;;;AAcD,IAAa,qBAA2E;CACtF,MAAM,EAAE,UAAU,aAAa,oBAAoB;CACnD,OAAO;EAAE;EAAU;CAAS;AAC9B"}

package/dist/components/BitkitUISideNav/UISideNavFooter.d.ts

@@ -1,16 +0,0 @@
-import { BoxProps } from '@chakra-ui/react/box';
-import { ReactNode } from 'react';
-export interface BitkitUISideNavFooterProps extends BoxProps {
-    /**
-     * The rows below the navigation. Drop a `FooterHeading` between them to start a further
-     * section, the way the mobile drawer parts its status row from its Help links.
-     */
-    children: ReactNode;
-    /**
-     * An uppercase heading for the whole block, e.g. `Help`, drawn under the footer's own rule.
-     * The desktop rail has nowhere to show one when collapsed, so it usually has none.
-     */
-    label?: string;
-}
-declare const UISideNavFooter: import('react').ForwardRefExoticComponent<BitkitUISideNavFooterProps & import('react').RefAttributes<HTMLDivElement>>;
-export default UISideNavFooter;

package/dist/components/BitkitUISideNav/UISideNavFooter.js

@@ -1,28 +0,0 @@
-import { useUISideNavContext } from "./UISideNavContext.js";
-import { Box } from "@chakra-ui/react/box";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "@chakra-ui/react/text";
-//#region lib/components/BitkitUISideNav/UISideNavFooter.tsx
-var UISideNavFooter = forwardRef((props, ref) => {
-	const { children, css, label, ...rest } = props;
-	const { styles } = useUISideNavContext();
-	return /* @__PURE__ */ jsxs(Box, {
-		ref,
-		...rest,
-		css: [styles.footer, css],
-		children: [
-			/* @__PURE__ */ jsx(Box, { css: styles.footerSeparator }),
-			label && /* @__PURE__ */ jsx(Text, {
-				css: styles.footerHeading,
-				children: label
-			}),
-			children
-		]
-	});
-});
-UISideNavFooter.displayName = "BitkitUISideNav.Footer";
-//#endregion
-export { UISideNavFooter as default };
-
-//# sourceMappingURL=UISideNavFooter.js.map

package/dist/components/BitkitUISideNav/UISideNavFooter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UISideNavFooter.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavFooter.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport interface BitkitUISideNavFooterProps extends BoxProps {\n  /**\n   * The rows below the navigation. Drop a `FooterHeading` between them to start a further\n   * section, the way the mobile drawer parts its status row from its Help links.\n   */\n  children: ReactNode;\n  /**\n   * An uppercase heading for the whole block, e.g. `Help`, drawn under the footer's own rule.\n   * The desktop rail has nowhere to show one when collapsed, so it usually has none.\n   */\n  label?: string;\n}\n\nconst UISideNavFooter = forwardRef<HTMLDivElement, BitkitUISideNavFooterProps>((props, ref) => {\n  const { children, css, label, ...rest } = props;\n\n  const { styles } = useUISideNavContext();\n\n  return (\n    <Box ref={ref} {...rest} css={[styles.footer, css]}>\n      {/* Always drawn: the design parts the footer from the navigation above it in both layouts. */}\n      <Box css={styles.footerSeparator} />\n      {label && <Text css={styles.footerHeading}>{label}</Text>}\n      {children}\n    </Box>\n  );\n});\n\nUISideNavFooter.displayName = 'BitkitUISideNav.Footer';\n\nexport default UISideNavFooter;\n"],"mappings":";;;;;;AAmBA,IAAM,kBAAkB,YAAwD,OAAO,QAAQ;CAC7F,MAAM,EAAE,UAAU,KAAK,OAAO,GAAG,SAAS;CAE1C,MAAM,EAAE,WAAW,oBAAoB;CAEvC,OACE,qBAAC,KAAD;EAAU;EAAK,GAAI;EAAM,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAjD,UAAA;GAEE,oBAAC,KAAD,EAAK,KAAK,OAAO,gBAAkB,CAAA;GAClC,SAAS,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAgB,UAAA;GAAY,CAAA;GACvD;EACE;;AAET,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/BitkitUISideNav/UISideNavFooterHeading.d.ts

@@ -1,12 +0,0 @@
-import { TextProps } from '@chakra-ui/react/text';
-export interface BitkitUISideNavFooterHeadingProps extends Omit<TextProps, 'children'> {
-    /** The heading, e.g. `Help`. Drawn uppercase, so write it in normal case. */
-    children: string;
-}
-/**
- * Starts a further section inside a footer that already holds rows, bringing a rule of its own.
- * A footer that is nothing but one titled section says the same thing with `label` — and without
- * the second rule, since the footer already draws one at its top.
- */
-declare const UISideNavFooterHeading: import('react').ForwardRefExoticComponent<BitkitUISideNavFooterHeadingProps & import('react').RefAttributes<HTMLParagraphElement>>;
-export default UISideNavFooterHeading;

package/dist/components/BitkitUISideNav/UISideNavFooterHeading.js

@@ -1,26 +0,0 @@
-import { useUISideNavContext } from "./UISideNavContext.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Text } from "@chakra-ui/react/text";
-//#region lib/components/BitkitUISideNav/UISideNavFooterHeading.tsx
-/**
-* Starts a further section inside a footer that already holds rows, bringing a rule of its own.
-* A footer that is nothing but one titled section says the same thing with `label` — and without
-* the second rule, since the footer already draws one at its top.
-*/
-var UISideNavFooterHeading = forwardRef((props, ref) => {
-	const { children, css, ...rest } = props;
-	const { styles } = useUISideNavContext();
-	return /* @__PURE__ */ jsx(Text, {
-		ref,
-		"data-section": "",
-		...rest,
-		css: [styles.footerHeading, css],
-		children
-	});
-});
-UISideNavFooterHeading.displayName = "BitkitUISideNav.FooterHeading";
-//#endregion
-export { UISideNavFooterHeading as default };
-
-//# sourceMappingURL=UISideNavFooterHeading.js.map

package/dist/components/BitkitUISideNav/UISideNavFooterHeading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UISideNavFooterHeading.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavFooterHeading.tsx"],"sourcesContent":["import { Text, type TextProps } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport interface BitkitUISideNavFooterHeadingProps extends Omit<TextProps, 'children'> {\n  /** The heading, e.g. `Help`. Drawn uppercase, so write it in normal case. */\n  children: string;\n}\n\n/**\n * Starts a further section inside a footer that already holds rows, bringing a rule of its own.\n * A footer that is nothing but one titled section says the same thing with `label` — and without\n * the second rule, since the footer already draws one at its top.\n */\nconst UISideNavFooterHeading = forwardRef<HTMLParagraphElement, BitkitUISideNavFooterHeadingProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const { styles } = useUISideNavContext();\n\n  return (\n    <Text ref={ref} data-section=\"\" {...rest} css={[styles.footerHeading, css]}>\n      {children}\n    </Text>\n  );\n});\n\nUISideNavFooterHeading.displayName = 'BitkitUISideNav.FooterHeading';\n\nexport default UISideNavFooterHeading;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,yBAAyB,YAAqE,OAAO,QAAQ;CACjH,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CAEnC,MAAM,EAAE,WAAW,oBAAoB;CAEvC,OACE,oBAAC,MAAD;EAAW;EAAK,gBAAa;EAAG,GAAI;EAAM,KAAK,CAAC,OAAO,eAAe,GAAG;EACtE;CACG,CAAA;AAEV,CAAC;AAED,uBAAuB,cAAc"}

package/dist/components/BitkitUISideNav/UISideNavItem.d.ts

@@ -1,26 +0,0 @@
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
-import { BitkitIconComponent } from '../../icons';
-export interface BitkitUISideNavItemProps extends Omit<HTMLChakraProps<'a'>, 'children'> {
-    /**
-     * The destination. Always an anchor: the platform navigation moves between server-rendered
-     * product areas, so every row is a real link rather than a button with a handler.
-     */
-    href: string;
-    /**
-     * The row's label. A string rather than `ReactNode` because the collapsed rail clips it and
-     * the expanded rail truncates it, neither of which survives arbitrary markup.
-     */
-    children: string;
-    /** Shown at rest. In the collapsed rail this is the only thing visible. */
-    icon: BitkitIconComponent;
-    /** Marks the row as the current product area. The consumer decides what counts as current. */
-    selected?: boolean;
-    /**
-     * Swapped in for `icon` while selected. The design pairs an outline icon with its filled
-     * counterpart, e.g. `IconDashboard` with `IconDashboardFilled`. Without it the outline icon
-     * stays and only the row's colour and marker change.
-     */
-    selectedIcon?: BitkitIconComponent;
-}
-declare const UISideNavItem: import('react').ForwardRefExoticComponent<BitkitUISideNavItemProps & import('react').RefAttributes<HTMLAnchorElement>>;
-export default UISideNavItem;