@commercetools/nimbus-mcp 3.1.0 → 3.2.0

package/data/docs/routes/components-layout-splitter.json

@@ -277,7 +277,7 @@
       ]
     },
     "dev": {
-      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Splitter, type SplitterRootProps } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\n`Splitter.Root` wraps one `Splitter.Aside` and one `Splitter.Main` with a\n`Splitter.Handle` between them. `Splitter.Aside` is the configurable pane you\nsize; `Splitter.Main` takes the remaining space. The initial split is set with\n`defaultSize` — a single percentage that always refers to the aside (the main\npane is `100 − size`).\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={30} minSize={15} maxSize={75}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>\n            Drag the handle to resize. Tab to it, then use the arrow keys.\n          </Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Main</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n## Usage examples\n\n### Orientation\n\n`orientation=\"vertical\"` stacks the panes and makes ArrowUp / ArrowDown the\nactive keys. The handle's `aria-orientation` reflects this (W3C separator\nsemantics describe the boundary axis, not the layout axis).\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"sm\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root orientation=\"vertical\" defaultSize={40}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"teal.3\" h=\"100%\">\n          <Text>Aside</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"rose.3\" h=\"100%\">\n          <Text>Main</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Aside constraints\n\n`minSize` and `maxSize` bound the single aside dimension. `minSize` (default\n`0`) is the aside's floor; `maxSize` (default `100`) caps how far the aside can\ngrow — which in turn fixes the main pane's floor at `100 − maxSize`. Because\nthere is one boundary, this single `[minSize, maxSize]` window on the aside\nfully describes both sides; there is no main-specific prop.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={30} minSize={15} maxSize={75}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>Aside (min 15, max 75)</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Main (floor 25)</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Collapsible aside\n\nSet `collapsible` to let the aside collapse, and control its collapsed state\nwith the boolean `collapsed`. Because collapse is plain controlled state, any\ncontrol can drive it; Enter on the focused handle toggles it too.\n`onCollapsedChange` fires on every transition. Only the aside collapses.\n\nWhile the aside is collapsed the handle can't be resized (drag and the arrow\nkeys are inactive) — a collapsed aside sits below its `minSize`, so a resize\ncould only snap. Reopen it with the control, Enter, or a double-click; the\ncollapsed state holds until you explicitly leave it.\n\n```jsx live-dev\nconst App = () => {\n  const [collapsed, setCollapsed] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"300\">\n      <Button alignSelf=\"start\" onPress={() => setCollapsed((c) => !c)}>\n        {collapsed ? \"Show aside\" : \"Hide aside\"}\n      </Button>\n      <Box height=\"2xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n        <Splitter.Root\n          defaultSize={30}\n          minSize={10}\n          maxSize={80}\n          collapsible\n          collapsed={collapsed}\n          onCollapsedChange={setCollapsed}\n        >\n          <Splitter.Aside>\n            <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n              <Text>Aside</Text>\n            </Box>\n          </Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>\n            <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n              <Text>Main</Text>\n            </Box>\n          </Splitter.Main>\n        </Splitter.Root>\n      </Box>\n    </Stack>\n  );\n};\n```\n\n### Collapsing to a rail\n\nCollapse is a two-tier model. `minSize` is the floor for _dragging_ and the\narrow keys; `collapsedSize` is a distinct discrete state that collapse snaps to,\nbelow `minSize`. It defaults to `0` (the aside hides entirely) — set it to leave\na thin rail behind, e.g. an icon strip the user can click to expand.\n\n```jsx live-dev\nconst App = () => {\n  const [collapsed, setCollapsed] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"300\">\n      <Button alignSelf=\"start\" onPress={() => setCollapsed((c) => !c)}>\n        {collapsed ? \"Expand aside\" : \"Collapse aside to a rail\"}\n      </Button>\n      <Box height=\"2xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n        <Splitter.Root\n          defaultSize={30}\n          minSize={15}\n          maxSize={80}\n          collapsible\n          collapsedSize={6}\n          collapsed={collapsed}\n          onCollapsedChange={setCollapsed}\n        >\n          <Splitter.Aside>\n            <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n              <Text>Aside</Text>\n            </Box>\n          </Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>\n            <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n              <Text>Main</Text>\n            </Box>\n          </Splitter.Main>\n        </Splitter.Root>\n      </Box>\n    </Stack>\n  );\n};\n```\n\n### Uncontrolled collapse\n\nWhen you don't need to drive collapse from outside the splitter, seed the\ninitial collapsed state with `defaultCollapsed` and let the splitter own it.\nEnter on the handle toggles it from there, and double-click restores the default\nsplit.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root\n      defaultSize={30}\n      minSize={10}\n      maxSize={80}\n      collapsible\n      defaultCollapsed\n    >\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>Aside (starts collapsed)</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Tab to the handle and press Enter to toggle</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Keyboard step\n\nArrow keys move the boundary by `keyboardStep` percentage points (default `5`);\nHome / End jump it to the bounds. Accepts floats for finer control.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={30} keyboardStep={10}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>\n            Tab to the handle — each arrow press moves the boundary 10%\n          </Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Main</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Restoring the default split\n\nDouble-click the handle to restore the boundary to the sizes resolved on mount.\nSet `isDoubleClickDisabled` to turn that off; drag and keyboard stay active.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n      <Splitter.Root defaultSize={50}>\n        <Splitter.Aside>\n          <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n            <Text>Drag, then double-click the handle to restore</Text>\n          </Box>\n        </Splitter.Aside>\n        <Splitter.Handle />\n        <Splitter.Main>\n          <Box p=\"400\" bg=\"amber.3\" h=\"100%\" />\n        </Splitter.Main>\n      </Splitter.Root>\n    </Box>\n    <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n      <Splitter.Root defaultSize={50} isDoubleClickDisabled>\n        <Splitter.Aside>\n          <Box p=\"400\" bg=\"teal.3\" h=\"100%\">\n            <Text>Double-click restore disabled</Text>\n          </Box>\n        </Splitter.Aside>\n        <Splitter.Handle />\n        <Splitter.Main>\n          <Box p=\"400\" bg=\"rose.3\" h=\"100%\" />\n        </Splitter.Main>\n      </Splitter.Root>\n    </Box>\n  </Stack>\n);\n```\n\n### Disabled state\n\n`isDisabled` makes the whole splitter non-interactive: the handle leaves the tab\norder, gets `aria-disabled`, and ignores drag, keyboard, and collapse input.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root isDisabled defaultSize={30}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>Aside</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Main</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Persistence\n\nSize is uncontrolled by default, so persist it in your app with any storage:\nhydrate `defaultSize` from stored state and write the settled value back in\n`onSizeChangeEnd` (it fires once per settled interaction — drag end, each\nkeypress, collapse/expand, double-click restore — so no debouncing is needed). A\nsingle `number` round-trips: the value `onSizeChangeEnd` emits is exactly the\nshape `defaultSize` accepts. Collapse persists through its controlled boolean\nstate.\n\n```tsx\n// `useLocalStorage` is any storage hook of your choosing.\nconst [size, setSize] = useLocalStorage(\"ide-layout\", 30);\nconst [collapsed, setCollapsed] = useLocalStorage(\"ide-collapsed\", false);\n\n<Splitter.Root\n  defaultSize={size}\n  onSizeChangeEnd={setSize}\n  minSize={10}\n  maxSize={80}\n  collapsible\n  collapsed={collapsed}\n  onCollapsedChange={setCollapsed}\n>\n  <Splitter.Aside>…</Splitter.Aside>\n  <Splitter.Handle />\n  <Splitter.Main>…</Splitter.Main>\n</Splitter.Root>;\n```\n\n`onSizeChange` (live, every drag tick ~60Hz) is also available when you need a\nreal-time read-out; prefer `onSizeChangeEnd` for persistence.\n\n### Controlled size\n\nPass `size` instead of `defaultSize` to drive the layout from outside — useful\nfor responsive layouts that swap the proportion per breakpoint, since external\nchanges apply in place (no remount, so pane content keeps its scroll and focus).\nControl is settled, not live: drag and keyboard stay smooth from internal state\nand report once via `onSizeChangeEnd`. Wire that callback and feed the value\nback, or the splitter keeps the last interactive size and behaves as\nuncontrolled from then on.\n\n```tsx\nconst [size, setSize] = useState(30);\n\n<Splitter.Root size={size} onSizeChangeEnd={setSize}>\n  <Splitter.Aside>…</Splitter.Aside>\n  <Splitter.Handle />\n  <Splitter.Main>…</Splitter.Main>\n</Splitter.Root>;\n```\n\n### Pixel-precise sizes\n\nThe aside percentage carries full float precision end-to-end (nothing in the\nsize pipeline is rounded — only the handle's `aria-valuenow` is rounded, for\nassistive technology). To land on an exact pixel at a known container width,\npass the computed float — `250px` in an `800px` container is `31.25`.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={31.25}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>31.25%</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>68.75%</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Responsive pixel & token sizes with `useResponsiveSplitterSizes`\n\n`Splitter.Root` is percentage-native — it has no pixel code path. When you'd\nrather think in pixels (a fixed-width sidebar, an icon rail) or size per device,\nreach for the companion hook `useResponsiveSplitterSizes`. It is a **pixel/token\n→ percentage translator**: it measures the splitter's container, converts your\nconfig to the percentage the component wants, drives the controlled `size`\nchannel, and persists the result — all without the component gaining a pixel\npath.\n\nSpread its `rootProps` onto `Splitter.Root` and attach the `ref` it returns (the\n`ref` is required — the hook measures the container through it):\n\n```tsx\nconst { rootProps } = useResponsiveSplitterSizes({\n  orientation: \"horizontal\",\n  persistKey: \"app:main-splitter\",\n  size: \"xs\",          // 320px — size tokens resolve to pixels\n  minSize: \"3xs\",      // 224px\n  maxSize: \"lg\",       // 512px\n});\n\n<Splitter.Root {...rootProps} collapsible>\n  <Splitter.Aside>…</Splitter.Aside>\n  <Splitter.Handle />\n  <Splitter.Main>…</Splitter.Main>\n</Splitter.Root>;\n```\n\n**Units.** A value is a `number` (pixels), a size token (`3xs`–`8xl` or\n`breakpoint-sm`…`breakpoint-2xl`, resolving to pixels), or a `\"N%\"` string\n(passed through untranslated). Note the contrast with `Splitter.Root`'s own\n`size` / `minSize` / … props, which are **percentages**: through the hook, a\nbare number means pixels. Because the hook owns the full facade (`size` plus\n`minSize` / `maxSize` / `collapsedSize`), you don't hand-write percentages on\nthe root when you use it.\n\n**Responsive by container width.** Any dimension can be a map keyed by container\n**min-width thresholds** (pixels or tokens) — a min-width cascade resolved\nagainst the splitter's own width, not the viewport. The largest threshold `≤`\nthe measured width wins; the smallest entry also applies below it.\n\n```tsx\nconst { rootProps } = useResponsiveSplitterSizes({\n  size: { 0: \"xs\", \"breakpoint-md\": \"30%\" }, // \"xs\" (320px) below 768px, 30% above\n});\n```\n\n**Persistence.** Pass a `persistKey` (and optionally a `storage` adapter,\ndefaulting to `localStorage`) and the hook stores the settled size **in pixels**\nper band, so a dragged `320px` re-pins to `320px` across reloads and container\nresizes. `collapsedSize` is static config and is never persisted; the latest\nexpanded size survives collapse and expand.\n\n### Three or more regions\n\nThe Splitter is two-pane by design. For additional regions, nest a Splitter\ninside a pane's children; each splitter owns its own state independently. The\ninner aside can sit on either side of its main pane — here it trails as a right\npanel.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"sm\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={25}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>Aside (outer)</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Splitter.Root defaultSize={35}>\n          <Splitter.Main>\n            <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n              <Text>Main</Text>\n            </Box>\n          </Splitter.Main>\n          <Splitter.Handle />\n          <Splitter.Aside>\n            <Box p=\"400\" bg=\"rose.3\" h=\"100%\">\n              <Text>Aside (inner)</Text>\n            </Box>\n          </Splitter.Aside>\n        </Splitter.Root>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n## Common patterns\n\n### IDE-style layout\n\nThe most common real-world composition: a persisted split (`defaultSize` +\n`onSizeChangeEnd`) with a `collapsible` aside that snaps to a rail\n(`collapsedSize`), driven by both a toolbar button and the handle, plus aside\nbounds and a specific handle label.\n\n```jsx live-dev\nconst App = () => {\n  const [size, setSize] = useState(22);\n  const [collapsed, setCollapsed] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"300\">\n      <Button alignSelf=\"start\" onPress={() => setCollapsed((c) => !c)}>\n        {collapsed ? \"Show aside\" : \"Hide aside\"}\n      </Button>\n      <Box height=\"xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n        <Splitter.Root\n          defaultSize={size}\n          onSizeChangeEnd={setSize}\n          minSize={15}\n          maxSize={70}\n          collapsible\n          collapsedSize={4}\n          collapsed={collapsed}\n          onCollapsedChange={setCollapsed}\n        >\n          <Splitter.Aside>\n            <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n              <Text>Aside</Text>\n            </Box>\n          </Splitter.Aside>\n          <Splitter.Handle aria-label=\"Resize aside\" />\n          <Splitter.Main>\n            <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n              <Text>Aside</Text>\n            </Box>\n          </Splitter.Main>\n        </Splitter.Root>\n      </Box>\n    </Stack>\n  );\n};\n```\n\n### Vertical with persistence\n\nA vertical split with a persisted boundary and aside bounds so neither region\ncollapses to nothing while dragging.\n\n```jsx live-dev\nconst App = () => {\n  const [size, setSize] = useState(60);\n\n  return (\n    <Box height=\"sm\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n      <Splitter.Root\n        orientation=\"vertical\"\n        defaultSize={size}\n        onSizeChangeEnd={setSize}\n        minSize={25}\n        maxSize={80}\n      >\n        <Splitter.Aside>\n          <Box p=\"400\" bg=\"teal.3\" h=\"100%\">\n            <Text>Aside</Text>\n          </Box>\n        </Splitter.Aside>\n        <Splitter.Handle />\n        <Splitter.Main>\n          <Box p=\"400\" bg=\"rose.3\" h=\"100%\">\n            <Text>Main</Text>\n          </Box>\n        </Splitter.Main>\n      </Splitter.Root>\n    </Box>\n  );\n};\n```\n\n## Component requirements\n\n### Structure\n\n- `Splitter.Root` must contain exactly one `Splitter.Aside` and one\n  `Splitter.Main` with one `Splitter.Handle` between them; a development-time\n  warning is emitted otherwise. The aside may be placed before or after the main\n  pane (a leading or trailing panel) — `size` always refers to the aside.\n- All sizing and collapse configuration (`defaultSize` / `size`, `minSize`,\n  `maxSize`, `collapsible`, `collapsedSize`) lives on `Splitter.Root`. Panes\n  take only their content and an optional `id` for analytics/testing — nothing\n  is configured on the pane itself.\n\n## Accessibility\n\nThe Splitter handles the W3C window-splitter semantics internally: the handle is\n`role=\"separator\"` with `aria-orientation`, `aria-valuenow` / `aria-valuemin` /\n`aria-valuemax`, `aria-valuetext`, and `aria-controls` pointing at the leading\npane. For the full conformance details, see the Accessibility tab.\n\n#### Labeling\n\nThe handle ships a localized default `aria-label` (\"Resize panes\"); override it\nper handle with `aria-label` or `aria-labelledby` for a more specific label:\n\n```tsx\n<Splitter.Handle aria-label={msg.format(\"resizeAside\")} />\n```\n\n#### Persistent ID\n\nIf your use case requires tracking and analytics, it is good practice to add a\n**persistent**, **unique** id to the handle:\n\n```tsx\nconst PERSISTENT_ID = \"ide-layout-splitter-handle\";\n\nexport const Example = () => (\n  <Splitter.Root defaultSize={30}>\n    <Splitter.Aside>…</Splitter.Aside>\n    <Splitter.Handle id={PERSISTENT_ID} />\n    <Splitter.Main>…</Splitter.Main>\n  </Splitter.Root>\n);\n```\n\n#### Keyboard navigation\n\nWhen the handle has focus:\n\n- `Tab` / `Shift+Tab`: Move focus to/from the handle (in DOM order).\n- `ArrowLeft` / `ArrowRight` (horizontal) or `ArrowUp` / `ArrowDown` (vertical):\n  Move the boundary by `keyboardStep` percentage points (inactive while the\n  aside is collapsed).\n- `Home` / `End`: Jump the boundary to the aside's minimum / maximum (inactive\n  while the aside is collapsed).\n- `Enter`: Toggle collapse of the aside (when `collapsible`).\n\n## API reference\n\n<PropsTable id=\"Splitter\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Splitter\nin your application. As the component's internal functionality is already tested\nby Nimbus, these patterns help you verify your integration and\napplication-specific logic.\n\n### Basic Rendering\n\nMinimal Splitter — a configurable aside and a main pane —\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - Basic rendering\", () => {\n  it(\"renders an aside, a main pane, and one handle\", async () => {\n    render(\n      <NimbusProvider>\n        <Splitter.Root defaultSize={30}>\n          <Splitter.Aside>Aside</Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>Main</Splitter.Main>\n        </Splitter.Root>\n      </NimbusProvider>\n    );\n\n    const handle = await screen.findByRole(\"separator\");\n    expect(handle).toBeInTheDocument();\n  });\n});\n```\n\n### Persistence with any storage\n\nHydrate `defaultSize` from stored state and persist the\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - persistence\", () => {\n  it(\"hydrates from the stored size on first render\", async () => {\n    // Stand-in for a `useLocalStorage`-style hook seeded from storage.\n    const Demo = () => {\n      const [size, setSize] = useState(25);\n      return (\n        <Splitter.Root\n          defaultSize={size}\n          onSizeChangeEnd={setSize}\n          minSize={5}\n          maxSize={95}\n        >\n          <Splitter.Aside>Aside</Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>Main</Splitter.Main>\n        </Splitter.Root>\n      );\n    };\n\n    render(\n      <NimbusProvider>\n        <Demo />\n      </NimbusProvider>\n    );\n\n    const handle = await screen.findByRole(\"separator\");\n    await waitFor(() => {\n      expect(Number(handle.getAttribute(\"aria-valuenow\"))).toBe(25);\n    });\n  });\n});\n```\n\n### Controlled size from anywhere\n\nDrive the layout with the `size` prop and update it from\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - controlled size\", () => {\n  it(\"reflects an external size change in place\", async () => {\n    const user = userEvent.setup();\n    const Demo = () => {\n      const [size, setSize] = useState(30);\n      return (\n        <>\n          <button type=\"button\" onClick={() => setSize(60)}>\n            widen-aside\n          </button>\n          <Splitter.Root\n            size={size}\n            onSizeChangeEnd={setSize}\n            minSize={5}\n            maxSize={95}\n          >\n            <Splitter.Aside>Aside</Splitter.Aside>\n            <Splitter.Handle />\n            <Splitter.Main>Main</Splitter.Main>\n          </Splitter.Root>\n        </>\n      );\n    };\n\n    render(\n      <NimbusProvider>\n        <Demo />\n      </NimbusProvider>\n    );\n\n    const handle = await screen.findByRole(\"separator\");\n    await waitFor(() => {\n      expect(Number(handle.getAttribute(\"aria-valuenow\"))).toBe(30);\n    });\n\n    await user.click(screen.getByText(\"widen-aside\"));\n    await waitFor(() => {\n      expect(Number(handle.getAttribute(\"aria-valuenow\"))).toBe(60);\n    });\n  });\n});\n```\n\n### Controlled collapse from anywhere\n\nCollapse is plain controlled boolean state, so a button\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - controlled collapse\", () => {\n  it(\"collapses the aside from a button outside the subtree\", async () => {\n    const user = userEvent.setup();\n    const Demo = () => {\n      const [collapsed, setCollapsed] = useState(false);\n      return (\n        <>\n          <button type=\"button\" onClick={() => setCollapsed((c) => !c)}>\n            toggle-aside\n          </button>\n          <Splitter.Root\n            defaultSize={30}\n            minSize={5}\n            maxSize={95}\n            collapsible\n            collapsed={collapsed}\n            onCollapsedChange={setCollapsed}\n          >\n            <Splitter.Aside>Aside</Splitter.Aside>\n            <Splitter.Handle />\n            <Splitter.Main>Main</Splitter.Main>\n          </Splitter.Root>\n        </>\n      );\n    };\n\n    render(\n      <NimbusProvider>\n        <Demo />\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByText(\"toggle-aside\"));\n    const handle = await screen.findByRole(\"separator\");\n    await waitFor(() => {\n      expect(Number(handle.getAttribute(\"aria-valuenow\"))).toBe(0);\n    });\n  });\n});\n```\n\n### Nested splitters for 3+ regions\n\nEach nested Splitter is an independent widget.\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - Nested\", () => {\n  it(\"nests inside a pane to express three regions\", async () => {\n    render(\n      <NimbusProvider>\n        <Splitter.Root defaultSize={25}>\n          <Splitter.Aside>Aside</Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>\n            <Splitter.Root defaultSize={35}>\n              <Splitter.Main>Main</Splitter.Main>\n              <Splitter.Handle />\n              <Splitter.Aside>Aside</Splitter.Aside>\n            </Splitter.Root>\n          </Splitter.Main>\n        </Splitter.Root>\n      </NimbusProvider>\n    );\n\n    const handles = await screen.findAllByRole(\"separator\");\n    expect(handles).toHaveLength(2);\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-splitter--docs)\n- [React Aria useSeparator](https://react-spectrum.adobe.com/react-aria/useSeparator.html)\n- [W3C ARIA window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)\n",
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Splitter, type SplitterRootProps } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\n`Splitter.Root` wraps one `Splitter.Aside` and one `Splitter.Main` with a\n`Splitter.Handle` between them. `Splitter.Aside` is the configurable pane you\nsize; `Splitter.Main` takes the remaining space. The initial split is set with\n`defaultSize` — a single percentage that always refers to the aside (the main\npane is `100 − size`).\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={30} minSize={15} maxSize={75}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>\n            Drag the handle to resize. Tab to it, then use the arrow keys.\n          </Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Main</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n## Usage examples\n\n### Orientation\n\n`orientation=\"vertical\"` stacks the panes and makes ArrowUp / ArrowDown the\nactive keys. The handle's `aria-orientation` reflects this (W3C separator\nsemantics describe the boundary axis, not the layout axis).\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"sm\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root orientation=\"vertical\" defaultSize={40}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"teal.3\" h=\"100%\">\n          <Text>Aside</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"rose.3\" h=\"100%\">\n          <Text>Main</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Aside constraints\n\n`minSize` and `maxSize` bound the single aside dimension. `minSize` (default\n`0`) is the aside's floor; `maxSize` (default `100`) caps how far the aside can\ngrow — which in turn fixes the main pane's floor at `100 − maxSize`. Because\nthere is one boundary, this single `[minSize, maxSize]` window on the aside\nfully describes both sides; there is no main-specific prop.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={30} minSize={15} maxSize={75}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>Aside (min 15, max 75)</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Main (floor 25)</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Collapsible aside\n\nSet `collapsible` to let the aside collapse, and control its collapsed state\nwith the boolean `collapsed`. Because collapse is plain controlled state, any\ncontrol can drive it; Enter on the focused handle toggles it too.\n`onCollapsedChange` fires on every transition. Only the aside collapses.\n\nWhile the aside is collapsed the handle can't be resized (drag and the arrow\nkeys are inactive) — a collapsed aside sits below its `minSize`, so a resize\ncould only snap. Reopen it with the control, Enter, or a double-click; the\ncollapsed state holds until you explicitly leave it.\n\n```jsx live-dev\nconst App = () => {\n  const [collapsed, setCollapsed] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"300\">\n      <Button alignSelf=\"start\" onPress={() => setCollapsed((c) => !c)}>\n        {collapsed ? \"Show aside\" : \"Hide aside\"}\n      </Button>\n      <Box height=\"2xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n        <Splitter.Root\n          defaultSize={30}\n          minSize={10}\n          maxSize={80}\n          collapsible\n          collapsed={collapsed}\n          onCollapsedChange={setCollapsed}\n        >\n          <Splitter.Aside>\n            <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n              <Text>Aside</Text>\n            </Box>\n          </Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>\n            <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n              <Text>Main</Text>\n            </Box>\n          </Splitter.Main>\n        </Splitter.Root>\n      </Box>\n    </Stack>\n  );\n};\n```\n\n### Collapsing to a rail\n\nCollapse is a two-tier model. `minSize` is the floor for _dragging_ and the\narrow keys; `collapsedSize` is a distinct discrete state that collapse snaps to,\nbelow `minSize`. It defaults to `0` (the aside hides entirely) — set it to leave\na thin rail behind, e.g. an icon strip the user can click to expand.\n\n```jsx live-dev\nconst App = () => {\n  const [collapsed, setCollapsed] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"300\">\n      <Button alignSelf=\"start\" onPress={() => setCollapsed((c) => !c)}>\n        {collapsed ? \"Expand aside\" : \"Collapse aside to a rail\"}\n      </Button>\n      <Box height=\"2xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n        <Splitter.Root\n          defaultSize={30}\n          minSize={15}\n          maxSize={80}\n          collapsible\n          collapsedSize={6}\n          collapsed={collapsed}\n          onCollapsedChange={setCollapsed}\n        >\n          <Splitter.Aside>\n            <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n              <Text>Aside</Text>\n            </Box>\n          </Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>\n            <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n              <Text>Main</Text>\n            </Box>\n          </Splitter.Main>\n        </Splitter.Root>\n      </Box>\n    </Stack>\n  );\n};\n```\n\n### Uncontrolled collapse\n\nWhen you don't need to drive collapse from outside the splitter, seed the\ninitial collapsed state with `defaultCollapsed` and let the splitter own it.\nEnter on the handle toggles it from there, and double-click restores the default\nsplit.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root\n      defaultSize={30}\n      minSize={10}\n      maxSize={80}\n      collapsible\n      defaultCollapsed\n    >\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>Aside (starts collapsed)</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Tab to the handle and press Enter to toggle</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Keyboard step\n\nArrow keys move the boundary by `keyboardStep` percentage points (default `5`);\nHome / End jump it to the bounds. Accepts floats for finer control.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={30} keyboardStep={10}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>\n            Tab to the handle — each arrow press moves the boundary 10%\n          </Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Main</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Restoring the default split\n\nDouble-click the handle to restore the boundary to the sizes resolved on mount.\nSet `isDoubleClickDisabled` to turn that off; drag and keyboard stay active.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n      <Splitter.Root defaultSize={50}>\n        <Splitter.Aside>\n          <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n            <Text>Drag, then double-click the handle to restore</Text>\n          </Box>\n        </Splitter.Aside>\n        <Splitter.Handle />\n        <Splitter.Main>\n          <Box p=\"400\" bg=\"amber.3\" h=\"100%\" />\n        </Splitter.Main>\n      </Splitter.Root>\n    </Box>\n    <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n      <Splitter.Root defaultSize={50} isDoubleClickDisabled>\n        <Splitter.Aside>\n          <Box p=\"400\" bg=\"teal.3\" h=\"100%\">\n            <Text>Double-click restore disabled</Text>\n          </Box>\n        </Splitter.Aside>\n        <Splitter.Handle />\n        <Splitter.Main>\n          <Box p=\"400\" bg=\"rose.3\" h=\"100%\" />\n        </Splitter.Main>\n      </Splitter.Root>\n    </Box>\n  </Stack>\n);\n```\n\n### Disabled state\n\n`isDisabled` makes the whole splitter non-interactive: the handle leaves the tab\norder, gets `aria-disabled`, and ignores drag, keyboard, and collapse input.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root isDisabled defaultSize={30}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>Aside</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>Main</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Persistence\n\nSize is uncontrolled by default, so persist it in your app with any storage:\nhydrate `defaultSize` from stored state and write the settled value back in\n`onSizeChangeEnd` (it fires once per settled **resize** — drag end, each\nkeypress, double-click restore — so no debouncing is needed; collapse/expand are\nsignalled by `onCollapsedChange`, not here). A\nsingle `number` round-trips: the value `onSizeChangeEnd` emits is exactly the\nshape `defaultSize` accepts. Collapse persists through its controlled boolean\nstate.\n\n```tsx\n// `useLocalStorage` is any storage hook of your choosing.\nconst [size, setSize] = useLocalStorage(\"ide-layout\", 30);\nconst [collapsed, setCollapsed] = useLocalStorage(\"ide-collapsed\", false);\n\n<Splitter.Root\n  defaultSize={size}\n  onSizeChangeEnd={setSize}\n  minSize={10}\n  maxSize={80}\n  collapsible\n  collapsed={collapsed}\n  onCollapsedChange={setCollapsed}\n>\n  <Splitter.Aside>…</Splitter.Aside>\n  <Splitter.Handle />\n  <Splitter.Main>…</Splitter.Main>\n</Splitter.Root>;\n```\n\n`onSizeChange` (live, every drag tick ~60Hz) is also available when you need a\nreal-time read-out; prefer `onSizeChangeEnd` for persistence.\n\n### Controlled size\n\nPass `size` instead of `defaultSize` to drive the layout from outside — useful\nfor responsive layouts that swap the proportion per breakpoint, since external\nchanges apply in place (no remount, so pane content keeps its scroll and focus).\nControl is settled, not live: drag and keyboard stay smooth from internal state\nand report once via `onSizeChangeEnd`. Wire that callback and feed the value\nback, or the splitter keeps the last interactive size and behaves as\nuncontrolled from then on.\n\n```tsx\nconst [size, setSize] = useState(30);\n\n<Splitter.Root size={size} onSizeChangeEnd={setSize}>\n  <Splitter.Aside>…</Splitter.Aside>\n  <Splitter.Handle />\n  <Splitter.Main>…</Splitter.Main>\n</Splitter.Root>;\n```\n\n### Pixel-precise sizes\n\nThe aside percentage carries full float precision end-to-end (nothing in the\nsize pipeline is rounded — only the handle's `aria-valuenow` is rounded, for\nassistive technology). To land on an exact pixel at a known container width,\npass the computed float — `250px` in an `800px` container is `31.25`.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"3xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={31.25}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>31.25%</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n          <Text>68.75%</Text>\n        </Box>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n### Responsive pixel & token sizes with `useResponsiveSplitterSizes`\n\n`Splitter.Root` is percentage-native — it has no pixel code path. When you'd\nrather think in pixels (a fixed-width sidebar, an icon rail) or size per device,\nreach for the companion hook `useResponsiveSplitterSizes`. It is a **pixel/token\n→ percentage translator**: it measures the splitter's container, converts your\nconfig to the percentage the component wants, drives the controlled `size`\nchannel, and persists the result — all without the component gaining a pixel\npath.\n\nSpread its `rootProps` onto `Splitter.Root` and attach the `ref` it returns (the\n`ref` is required — the hook measures the container through it):\n\n```tsx\nconst { rootProps } = useResponsiveSplitterSizes({\n  orientation: \"horizontal\",\n  persistKey: \"app:main-splitter\",\n  size: \"xs\",          // 320px — size tokens resolve to pixels\n  minSize: \"3xs\",      // 224px\n  maxSize: \"lg\",       // 512px\n});\n\n<Splitter.Root {...rootProps} collapsible>\n  <Splitter.Aside>…</Splitter.Aside>\n  <Splitter.Handle />\n  <Splitter.Main>…</Splitter.Main>\n</Splitter.Root>;\n```\n\n**Units.** A value is a `number` (pixels), a size token (`3xs`–`8xl` or\n`breakpoint-sm`…`breakpoint-2xl`, resolving to pixels), or a `\"N%\"` string\n(passed through untranslated). Note the contrast with `Splitter.Root`'s own\n`size` / `minSize` / … props, which are **percentages**: through the hook, a\nbare number means pixels. Because the hook owns the full facade (`size` plus\n`minSize` / `maxSize` / `collapsedSize`), you don't hand-write percentages on\nthe root when you use it.\n\n**Responsive by container width.** Any dimension can be a map keyed by container\n**min-width thresholds** (pixels or tokens) — a min-width cascade resolved\nagainst the splitter's own width, not the viewport. The largest threshold `≤`\nthe measured width wins; the smallest entry also applies below it.\n\n```tsx\nconst { rootProps } = useResponsiveSplitterSizes({\n  size: { 0: \"xs\", \"breakpoint-md\": \"30%\" }, // \"xs\" (320px) below 768px, 30% above\n});\n```\n\n**Persistence.** Pass a `persistKey` (and optionally a `storage` adapter,\ndefaulting to `localStorage`) and the hook stores the settled size **in pixels**\nper band, so a dragged `320px` re-pins to `320px` across reloads and container\nresizes. `collapsedSize` is static config and is never persisted; the latest\nexpanded size survives collapse and expand.\n\n### Three or more regions\n\nThe Splitter is two-pane by design. For additional regions, nest a Splitter\ninside a pane's children; each splitter owns its own state independently. The\ninner aside can sit on either side of its main pane — here it trails as a right\npanel.\n\n```jsx live-dev\nconst App = () => (\n  <Box height=\"sm\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n    <Splitter.Root defaultSize={25}>\n      <Splitter.Aside>\n        <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n          <Text>Aside (outer)</Text>\n        </Box>\n      </Splitter.Aside>\n      <Splitter.Handle />\n      <Splitter.Main>\n        <Splitter.Root defaultSize={35}>\n          <Splitter.Main>\n            <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n              <Text>Main</Text>\n            </Box>\n          </Splitter.Main>\n          <Splitter.Handle />\n          <Splitter.Aside>\n            <Box p=\"400\" bg=\"rose.3\" h=\"100%\">\n              <Text>Aside (inner)</Text>\n            </Box>\n          </Splitter.Aside>\n        </Splitter.Root>\n      </Splitter.Main>\n    </Splitter.Root>\n  </Box>\n);\n```\n\n## Common patterns\n\n### IDE-style layout\n\nThe most common real-world composition: a persisted split (`defaultSize` +\n`onSizeChangeEnd`) with a `collapsible` aside that snaps to a rail\n(`collapsedSize`), driven by both a toolbar button and the handle, plus aside\nbounds and a specific handle label.\n\n```jsx live-dev\nconst App = () => {\n  const [size, setSize] = useState(22);\n  const [collapsed, setCollapsed] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"300\">\n      <Button alignSelf=\"start\" onPress={() => setCollapsed((c) => !c)}>\n        {collapsed ? \"Show aside\" : \"Hide aside\"}\n      </Button>\n      <Box height=\"xs\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n        <Splitter.Root\n          defaultSize={size}\n          onSizeChangeEnd={setSize}\n          minSize={15}\n          maxSize={70}\n          collapsible\n          collapsedSize={4}\n          collapsed={collapsed}\n          onCollapsedChange={setCollapsed}\n        >\n          <Splitter.Aside>\n            <Box p=\"400\" bg=\"indigo.3\" h=\"100%\">\n              <Text>Aside</Text>\n            </Box>\n          </Splitter.Aside>\n          <Splitter.Handle aria-label=\"Resize aside\" />\n          <Splitter.Main>\n            <Box p=\"400\" bg=\"amber.3\" h=\"100%\">\n              <Text>Aside</Text>\n            </Box>\n          </Splitter.Main>\n        </Splitter.Root>\n      </Box>\n    </Stack>\n  );\n};\n```\n\n### Vertical with persistence\n\nA vertical split with a persisted boundary and aside bounds so neither region\ncollapses to nothing while dragging.\n\n```jsx live-dev\nconst App = () => {\n  const [size, setSize] = useState(60);\n\n  return (\n    <Box height=\"sm\" width=\"100%\" borderWidth=\"25\" borderColor=\"neutral.6\">\n      <Splitter.Root\n        orientation=\"vertical\"\n        defaultSize={size}\n        onSizeChangeEnd={setSize}\n        minSize={25}\n        maxSize={80}\n      >\n        <Splitter.Aside>\n          <Box p=\"400\" bg=\"teal.3\" h=\"100%\">\n            <Text>Aside</Text>\n          </Box>\n        </Splitter.Aside>\n        <Splitter.Handle />\n        <Splitter.Main>\n          <Box p=\"400\" bg=\"rose.3\" h=\"100%\">\n            <Text>Main</Text>\n          </Box>\n        </Splitter.Main>\n      </Splitter.Root>\n    </Box>\n  );\n};\n```\n\n## Component requirements\n\n### Structure\n\n- `Splitter.Root` must contain exactly one `Splitter.Aside` and one\n  `Splitter.Main` with one `Splitter.Handle` between them; a development-time\n  warning is emitted otherwise. The aside may be placed before or after the main\n  pane (a leading or trailing panel) — `size` always refers to the aside.\n- All sizing and collapse configuration (`defaultSize` / `size`, `minSize`,\n  `maxSize`, `collapsible`, `collapsedSize`) lives on `Splitter.Root`. Panes\n  take only their content and an optional `id` for analytics/testing — nothing\n  is configured on the pane itself.\n\n## Accessibility\n\nThe Splitter handles the W3C window-splitter semantics internally: the handle is\n`role=\"separator\"` with `aria-orientation`, `aria-valuenow` / `aria-valuemin` /\n`aria-valuemax`, `aria-valuetext`, and `aria-controls` pointing at the leading\npane. For the full conformance details, see the Accessibility tab.\n\n#### Labeling\n\nThe handle ships a localized default `aria-label` (\"Resize panes\"); override it\nper handle with `aria-label` or `aria-labelledby` for a more specific label:\n\n```tsx\n<Splitter.Handle aria-label={msg.format(\"resizeAside\")} />\n```\n\n#### Persistent ID\n\nIf your use case requires tracking and analytics, it is good practice to add a\n**persistent**, **unique** id to the handle:\n\n```tsx\nconst PERSISTENT_ID = \"ide-layout-splitter-handle\";\n\nexport const Example = () => (\n  <Splitter.Root defaultSize={30}>\n    <Splitter.Aside>…</Splitter.Aside>\n    <Splitter.Handle id={PERSISTENT_ID} />\n    <Splitter.Main>…</Splitter.Main>\n  </Splitter.Root>\n);\n```\n\n#### Keyboard navigation\n\nWhen the handle has focus:\n\n- `Tab` / `Shift+Tab`: Move focus to/from the handle (in DOM order).\n- `ArrowLeft` / `ArrowRight` (horizontal) or `ArrowUp` / `ArrowDown` (vertical):\n  Move the boundary by `keyboardStep` percentage points (inactive while the\n  aside is collapsed).\n- `Home` / `End`: Jump the boundary to the aside's minimum / maximum (inactive\n  while the aside is collapsed).\n- `Enter`: Toggle collapse of the aside (when `collapsible`).\n\n## API reference\n\n<PropsTable id=\"Splitter\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Splitter\nin your application. As the component's internal functionality is already tested\nby Nimbus, these patterns help you verify your integration and\napplication-specific logic.\n\n### Basic Rendering\n\nMinimal Splitter — a configurable aside and a main pane —\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - Basic rendering\", () => {\n  it(\"renders an aside, a main pane, and one handle\", async () => {\n    render(\n      <NimbusProvider>\n        <Splitter.Root defaultSize={30}>\n          <Splitter.Aside>Aside</Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>Main</Splitter.Main>\n        </Splitter.Root>\n      </NimbusProvider>\n    );\n\n    const handle = await screen.findByRole(\"separator\");\n    expect(handle).toBeInTheDocument();\n  });\n});\n```\n\n### Persistence with any storage\n\nHydrate `defaultSize` from stored state and persist the\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - persistence\", () => {\n  it(\"hydrates from the stored size on first render\", async () => {\n    // Stand-in for a `useLocalStorage`-style hook seeded from storage.\n    const Demo = () => {\n      const [size, setSize] = useState(25);\n      return (\n        <Splitter.Root\n          defaultSize={size}\n          onSizeChangeEnd={setSize}\n          minSize={5}\n          maxSize={95}\n        >\n          <Splitter.Aside>Aside</Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>Main</Splitter.Main>\n        </Splitter.Root>\n      );\n    };\n\n    render(\n      <NimbusProvider>\n        <Demo />\n      </NimbusProvider>\n    );\n\n    const handle = await screen.findByRole(\"separator\");\n    await waitFor(() => {\n      expect(Number(handle.getAttribute(\"aria-valuenow\"))).toBe(25);\n    });\n  });\n});\n```\n\n### Controlled size from anywhere\n\nDrive the layout with the `size` prop and update it from\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - controlled size\", () => {\n  it(\"reflects an external size change in place\", async () => {\n    const user = userEvent.setup();\n    const Demo = () => {\n      const [size, setSize] = useState(30);\n      return (\n        <>\n          <button type=\"button\" onClick={() => setSize(60)}>\n            widen-aside\n          </button>\n          <Splitter.Root\n            size={size}\n            onSizeChangeEnd={setSize}\n            minSize={5}\n            maxSize={95}\n          >\n            <Splitter.Aside>Aside</Splitter.Aside>\n            <Splitter.Handle />\n            <Splitter.Main>Main</Splitter.Main>\n          </Splitter.Root>\n        </>\n      );\n    };\n\n    render(\n      <NimbusProvider>\n        <Demo />\n      </NimbusProvider>\n    );\n\n    const handle = await screen.findByRole(\"separator\");\n    await waitFor(() => {\n      expect(Number(handle.getAttribute(\"aria-valuenow\"))).toBe(30);\n    });\n\n    await user.click(screen.getByText(\"widen-aside\"));\n    await waitFor(() => {\n      expect(Number(handle.getAttribute(\"aria-valuenow\"))).toBe(60);\n    });\n  });\n});\n```\n\n### Controlled collapse from anywhere\n\nCollapse is plain controlled boolean state, so a button\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - controlled collapse\", () => {\n  it(\"collapses the aside from a button outside the subtree\", async () => {\n    const user = userEvent.setup();\n    const Demo = () => {\n      const [collapsed, setCollapsed] = useState(false);\n      return (\n        <>\n          <button type=\"button\" onClick={() => setCollapsed((c) => !c)}>\n            toggle-aside\n          </button>\n          <Splitter.Root\n            defaultSize={30}\n            minSize={5}\n            maxSize={95}\n            collapsible\n            collapsed={collapsed}\n            onCollapsedChange={setCollapsed}\n          >\n            <Splitter.Aside>Aside</Splitter.Aside>\n            <Splitter.Handle />\n            <Splitter.Main>Main</Splitter.Main>\n          </Splitter.Root>\n        </>\n      );\n    };\n\n    render(\n      <NimbusProvider>\n        <Demo />\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByText(\"toggle-aside\"));\n    const handle = await screen.findByRole(\"separator\");\n    await waitFor(() => {\n      expect(Number(handle.getAttribute(\"aria-valuenow\"))).toBe(0);\n    });\n  });\n});\n```\n\n### Nested splitters for 3+ regions\n\nEach nested Splitter is an independent widget.\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { useState } from \"react\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NimbusProvider, Splitter } from \"@commercetools/nimbus\";\n\ndescribe(\"Splitter - Nested\", () => {\n  it(\"nests inside a pane to express three regions\", async () => {\n    render(\n      <NimbusProvider>\n        <Splitter.Root defaultSize={25}>\n          <Splitter.Aside>Aside</Splitter.Aside>\n          <Splitter.Handle />\n          <Splitter.Main>\n            <Splitter.Root defaultSize={35}>\n              <Splitter.Main>Main</Splitter.Main>\n              <Splitter.Handle />\n              <Splitter.Aside>Aside</Splitter.Aside>\n            </Splitter.Root>\n          </Splitter.Main>\n        </Splitter.Root>\n      </NimbusProvider>\n    );\n\n    const handles = await screen.findAllByRole(\"separator\");\n    expect(handles).toHaveLength(2);\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-splitter--docs)\n- [React Aria useSeparator](https://react-spectrum.adobe.com/react-aria/useSeparator.html)\n- [W3C ARIA window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)\n",
       "toc": [
         {
           "value": "Getting started",

package/data/docs/types/AccordionContent.json

@@ -61,7 +61,7 @@
           "name": "DisclosureProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.16/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
           "name": "HTMLAttributes"
         }
       ],
@@ -105,7 +105,7 @@
           "name": "DisclosurePanelProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.16/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
           "name": "HTMLAttributes"
         }
       ],
@@ -213,7 +213,7 @@
           "name": "DisclosurePanelProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.16/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
           "name": "DOMAttributes"
         },
         {

package/data/docs/types/AccordionHeader.json

@@ -99,7 +99,7 @@
           "name": "ButtonProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.16/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
           "name": "HTMLAttributes"
         }
       ],

package/data/docs/types/AccordionItem.json

@@ -61,7 +61,7 @@
           "name": "DisclosureProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.16/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
           "name": "HTMLAttributes"
         }
       ],
@@ -84,7 +84,7 @@
           "name": "DisclosureProps"
         },
         {
-          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.16/node_modules/@types/react/index.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@types+react@19.2.17/node_modules/@types/react/index.d.ts",
           "name": "HTMLAttributes"
         }
       ],

package/data/docs/types/AccordionRoot.json

@@ -14,12 +14,12 @@
       "description": "",
       "name": "size",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/generated/recipes.gen.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/generated/recipes.gen.d.ts",
         "name": "NimbusCodeVariant"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/generated/recipes.gen.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/generated/recipes.gen.d.ts",
           "name": "NimbusCodeVariant"
         }
       ],

package/data/docs/types/AlertDescription.json

@@ -12,12 +12,12 @@
       "description": "",
       "name": "as",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],
@@ -31,12 +31,12 @@
       "description": "",
       "name": "asChild",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],
@@ -50,12 +50,12 @@
       "description": "",
       "name": "css",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "JsxStyleProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "JsxStyleProps"
         }
       ],
@@ -84,12 +84,12 @@
       "description": "If `true`, the element will opt out of the theme styles.",
       "name": "unstyled",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "UnstyledProp"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "UnstyledProp"
         }
       ],

package/data/docs/types/AlertDismissButton.json

@@ -528,12 +528,12 @@
       "description": "If `true`, the element will opt out of the theme styles.",
       "name": "unstyled",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "UnstyledProp"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "UnstyledProp"
         }
       ],

package/data/docs/types/AlertTitle.json

@@ -12,12 +12,12 @@
       "description": "",
       "name": "as",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],
@@ -31,12 +31,12 @@
       "description": "",
       "name": "asChild",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],
@@ -50,12 +50,12 @@
       "description": "",
       "name": "css",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "JsxStyleProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "JsxStyleProps"
         }
       ],
@@ -84,12 +84,12 @@
       "description": "If `true`, the element will opt out of the theme styles.",
       "name": "unstyled",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "UnstyledProp"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "UnstyledProp"
         }
       ],

package/data/docs/types/Avatar.json

@@ -31,12 +31,12 @@
       "description": "If `true`, the element will opt out of the theme styles.",
       "name": "unstyled",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "UnstyledProp"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "UnstyledProp"
         }
       ],

package/data/docs/types/Badge.json

@@ -30,12 +30,12 @@
       "description": "If `true`, the element will opt out of the theme styles.",
       "name": "unstyled",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "UnstyledProp"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "UnstyledProp"
         }
       ],

package/data/docs/types/Body.json

@@ -10,12 +10,12 @@
       "description": "",
       "name": "css",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "JsxStyleProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "JsxStyleProps"
         }
       ],
@@ -29,12 +29,12 @@
       "description": "",
       "name": "as",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],
@@ -48,12 +48,12 @@
       "description": "",
       "name": "asChild",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],

package/data/docs/types/Box.json

@@ -13,12 +13,12 @@
       "description": "",
       "name": "css",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "JsxStyleProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "JsxStyleProps"
         }
       ],
@@ -32,12 +32,12 @@
       "description": "",
       "name": "as",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],
@@ -51,12 +51,12 @@
       "description": "",
       "name": "asChild",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],

package/data/docs/types/Button.json

@@ -12,12 +12,12 @@
       "description": "",
       "name": "as",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],
@@ -31,12 +31,12 @@
       "description": "",
       "name": "asChild",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "PolymorphicProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "PolymorphicProps"
         }
       ],
@@ -50,12 +50,12 @@
       "description": "",
       "name": "css",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "JsxStyleProps"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "JsxStyleProps"
         }
       ],
@@ -137,12 +137,12 @@
       "description": "If `true`, the element will opt out of the theme styles.",
       "name": "unstyled",
       "parent": {
-        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+        "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
         "name": "UnstyledProp"
       },
       "declarations": [
         {
-          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.16_react@19.2.0__react_4dad942fc8d022ec3a732dbb122ce5fe/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
+          "fileName": "nimbus/node_modules/.pnpm/@chakra-ui+react@3.36.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.0__react_66e16070833060ad19cc68e17dcd8e36/node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts",
           "name": "UnstyledProp"
         }
       ],