@baseline-ui/mcp 0.58.0 → 0.60.0

package/dist/index.cjs

@@ -8,7 +8,662 @@
  * This notice may not be removed from this file.
  *
  */
-var o={Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a component that allows users to toggle the visibility of content. It\u2019s composed of an `Accordion` component and an `AccordionItem` component. The `Accordion` component is a container for the `AccordionItem` components.",documentation:`\`Accordion\` is a component that allows users to toggle the visibility of content. It\u2019s composed of an \`Accordion\` component and an \`AccordionItem\` component. The \`Accordion\` component is a container for the \`AccordionItem\` components.
+var o={BarChart:{id:"charts-barchart",breadcrumb:"Charts/BarChart",importStatement:`import { BarChart } from "@baseline-ui/charts";
+import { Box } from "@baseline-ui/core";`,description:"The `BarChart` component renders a responsive bar chart for categorical data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.",documentation:`The \`BarChart\` component renders a responsive bar chart for categorical data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.
+
+* Renders one or more bar series from a single dataset, keyed by \`xAxisDataKey\` and the per-bar \`dataKey\`.
+* Themed axes, grid, tooltip, and legend styled with Baseline UI tokens \u2014 adapts to light, dark, and high-contrast themes.
+* Default bar colors cycle through theme support colors (\`info\`, \`success\`, \`warning\`, \`error\`); each bar can override with a custom \`color\`.
+* Toggleable tooltip, legend, grid, and axes for compact layouts.
+* Grouped bars by default, with an opt-in \`stacked\` variant. The topmost bar in each stack keeps its rounded corners; inner segments stay flat.
+* Responsive by default \u2014 fills the parent container width while preserving the configured \`height\`.
+* Built-in keyboard navigation across data points via Recharts' accessibility layer.
+
+\`\`\`jsx
+import { BarChart } from "@baseline-ui/charts";
+
+const data = [
+ { year: "2020", revenue: 14_000_000, expenses: 12_000_000 },
+ { year: "2021", revenue: 24_000_000, expenses: 6_000_000 },
+ { year: "2022", revenue: 26_000_000, expenses: 13_000_000 },
+];
+
+<BarChart
+ data={data}
+ xAxisDataKey="year"
+ bars={[
+ { dataKey: "revenue", name: "Revenue" },
+ { dataKey: "expenses", name: "Expenses" },
+ ]}
+/>;
+\`\`\`
+
+The default variant renders bar series side-by-side within each X-axis category. Use \`showLegend\` to also render a legend above the chart.
+
+\`\`\`jsx
+<BarChart
+ data={data}
+ xAxisDataKey="year"
+ bars={[
+ { dataKey: "revenue", name: "Revenue" },
+ { dataKey: "expenses", name: "Expenses" },
+ ]}
+ showLegend
+/>
+\`\`\`
+
+Set \`variant="stacked"\` to stack bars on top of each other within each category. The topmost bar keeps its rounded top corners; inner segments are flat so the stack reads as a single continuous bar.
+
+\`\`\`jsx
+<BarChart
+ variant="stacked"
+ data={data}
+ xAxisDataKey="year"
+ bars={[
+ { dataKey: "revenue", name: "Revenue" },
+ { dataKey: "expenses", name: "Expenses" },
+ ]}
+ showLegend
+/>
+\`\`\`
+
+For mixed grouped/stacked layouts, set a custom \`stackId\` per bar \u2014 bars sharing the same \`stackId\` are stacked together; bars with different (or no) \`stackId\` are grouped beside the stack.
+
+Pass a single entry in \`bars\` to render a single-series chart.
+
+\`\`\`jsx
+<BarChart
+ data={data}
+ xAxisDataKey="year"
+ bars={[{ dataKey: "revenue", name: "Revenue" }]}
+/>
+\`\`\`
+
+Default colors cycle through \`info\` \u2192 \`success\` \u2192 \`warning\` \u2192 \`error\` and wrap modulo four. Provide a \`color\` per bar to override the default.
+
+\`\`\`jsx
+<BarChart
+ data={data}
+ xAxisDataKey="year"
+ bars={[
+ { dataKey: "revenue", name: "Revenue" },
+ { dataKey: "expenses", name: "Expenses" },
+ { dataKey: "profit", name: "Profit" },
+ { dataKey: "tax", name: "Tax" },
+ { dataKey: "fees", name: "Fees" },
+ ]}
+ showLegend
+/>
+\`\`\`
+
+Override the default theme colors by passing \`color\` per bar.
+
+\`\`\`jsx
+<BarChart
+ data={data}
+ xAxisDataKey="year"
+ bars={[
+ { dataKey: "revenue", name: "Revenue", color: "#7c3aed" },
+ { dataKey: "expenses", name: "Expenses", color: "#f59e0b" },
+ ]}
+ showLegend
+/>
+\`\`\`
+
+\`barSize\` controls the bar width in pixels (default \`12\`). \`barRadius\` controls the rounded top-corner radius in pixels (default \`2\`).
+
+\`\`\`jsx
+<BarChart
+ data={data}
+ xAxisDataKey="year"
+ bars={[...]}
+ barSize={24}
+/>
+\`\`\`
+
+\`showTooltip\`, \`showGrid\`, \`showXAxis\`, and \`showYAxis\` toggle the corresponding chart chrome individually. They all default to \`true\`.
+
+\`\`\`jsx
+<BarChart
+ data={data}
+ xAxisDataKey="year"
+ bars={[...]}
+ showXAxis={false}
+ showYAxis={false}
+ showGrid={false}
+/>
+\`\`\`
+
+The chart surface is keyboard-focusable. When focused via keyboard, the surface shows a focus ring and arrow keys move an indicator across data points, opening the tooltip at each step.
+
+| Key | Function |
+| ------------- | --------------------------------------------------------------------------- |
+| \`Tab\` | Moves focus to the chart surface. |
+| \`Arrow Right\` | Advances the active data point one step to the right and shows the tooltip. |
+| \`Arrow Left\` | Advances the active data point one step to the left and shows the tooltip. |
+| \`Escape\` | Dismisses the tooltip and clears the active data point. |
+
+BarChart shares its legend, tooltip, and surface markup with every other chart in the package. The \`BaselineUI-Chart-*\` selectors are stable shared hooks; the kind-specific \`BaselineUI-BarChart\` class lets you scope styles to bar charts only. Internal Recharts class names are not part of the public API.
+
+| Selector | Description |
+| ---------------------------------------------- | ------------------------------------------------------------------- |
+| \`.BaselineUI-BarChart\` | The bar-chart root identifier. |
+| \`.BaselineUI-BarChart[data-variant="default"]\` | Targets only the default variant. |
+| \`.BaselineUI-BarChart[data-variant="stacked"]\` | Targets only the stacked variant. |
+| \`.BaselineUI-Chart-Surface\` | The chart drawing area that wraps the SVG. |
+| \`.BaselineUI-Chart-Legend\` | The legend list element. Only rendered when \`showLegend\` is \`true\`. |
+| \`.BaselineUI-Chart-LegendItem\` | A single legend entry \u2014 one per series. |
+| \`.BaselineUI-Chart-LegendSwatch\` | The colored swatch in a legend entry. |
+| \`.BaselineUI-Chart-Tooltip\` | The hover/focus tooltip container. |
+| \`.BaselineUI-Chart-TooltipItem\` | A single series entry in the tooltip. |
+| \`.BaselineUI-Chart-TooltipSwatch\` | The colored swatch in a tooltip entry. |`,props:`interface BarChartProps {
+/**
+ * Additional class name for the chart root.
+ */
+className?: string
+/**
+ * Additional inline styles for the chart root.
+ */
+style?: CSSProperties
+/**
+ * Chart width. @default "100%"
+ */
+width?: number | \`\${number}%\`
+/**
+ * Chart height. @default 300
+ */
+height?: number
+/**
+ * Whether to show the tooltip on hover. @default true
+ */
+showTooltip?: boolean
+/**
+ * Whether to show the legend.
+ */
+showLegend?: boolean
+/**
+ * Defaults to the ambient \`I18nProvider\` locale direction.
+ */
+dir?: "ltr" | "rtl"
+/**
+ * Whether to show the grid lines. @default true
+ */
+showGrid?: boolean
+/**
+ * Whether to show the X axis. @default true
+ */
+showXAxis?: boolean
+/**
+ * Whether to show the Y axis. @default true
+ */
+showYAxis?: boolean
+/**
+ * The data array to render. Each item is an object keyed by \`xAxisDataKey\` and bar \`dataKey\` values.
+ */
+data: unknown
+/**
+ * Configuration for each bar series to render.
+ */
+bars: unknown
+/**
+ * The data key for the X axis.
+ */
+xAxisDataKey: string
+/**
+ * Visual variant. \`"stacked"\` stacks every series on top of each other; the
+ * default groups them side-by-side. Per-bar \`stackId\` overrides the variant
+ * default for that bar.
+ * @default "default"
+ */
+variant?: "default" | "stacked"
+/**
+ * Fixed width of each bar in pixels. @default 12
+ */
+barSize?: number
+/**
+ * Maximum gap in pixels between adjacent bars within the same X-axis
+ * category. Falls back toward a 1px floor when there isn't enough room
+ * to fit every bar at the requested gap.
+ * @default 4
+ */
+barGap?: number
+/**
+ * Border radius applied to the top of each bar in pixels. @default 2
+ */
+barRadius?: number
+}`,stories:{usage:[{id:"charts-barchart--basic",name:"Basic",snippet:`const Basic = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320} />;`},{id:"charts-barchart--single-series",name:"Single Series",snippet:`const SingleSeries = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[{ dataKey: "revenue", name: "Revenue" }]}
+    height={320} />;`},{id:"charts-barchart--with-legend",name:"With Legend",snippet:`const WithLegend = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    showLegend />;`},{id:"charts-barchart--stacked",name:"Stacked",snippet:`const Stacked = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    variant="stacked"
+    showLegend />;`},{id:"charts-barchart--stacked-with-three-series",name:"Stacked With Three Series",snippet:`const StackedWithThreeSeries = () => <BarChart
+    data={yearlyData.map((row) => ({
+      ...row,
+      profit: row.revenue - row.expenses,
+    }))}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+      { dataKey: "profit", name: "Profit" },
+    ]}
+    height={320}
+    variant="stacked"
+    showLegend />;`},{id:"charts-barchart--custom-colors",name:"Custom Colors",snippet:`const CustomColors = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue", color: "#7c3aed" },
+      { dataKey: "expenses", name: "Expenses", color: "#f59e0b" },
+    ]}
+    height={320}
+    showLegend />;`},{id:"charts-barchart--many-series",name:"Many Series",snippet:`const ManySeries = () => <BarChart
+    data={yearlyData.map((row) => ({
+      ...row,
+      profit: row.revenue - row.expenses,
+      tax: Math.round(row.revenue * 0.18),
+      fees: Math.round(row.revenue * 0.05),
+    }))}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+      { dataKey: "profit", name: "Profit" },
+      { dataKey: "tax", name: "Tax" },
+      { dataKey: "fees", name: "Fees" },
+    ]}
+    height={320}
+    showLegend />;`},{id:"charts-barchart--thicker-bars",name:"Thicker Bars",snippet:`const ThickerBars = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    barSize={24} />;`},{id:"charts-barchart--mixed-stacking",name:"Mixed Stacking",snippet:`const MixedStacking = () => <BarChart
+    data={yearlyData.map((row) => ({
+      ...row,
+      other: Math.round(row.revenue * 0.15),
+    }))}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue", stackId: "income" },
+      { dataKey: "other", name: "Other income", stackId: "income" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    showLegend />;`},{id:"charts-barchart--hidden-axes",name:"Hidden Axes",snippet:`const HiddenAxes = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    showXAxis={false}
+    showYAxis={false}
+    showGrid={false} />;`}],implementation:`import { I18nProvider } from "@baseline-ui/core";
+import React from "react";
+
+import { BarChart } from "../BarChart";
+
+import type { BarChartProps } from "../BarChart.types";
+
+const data = [
+ { year: "2020", revenue: 14_000_000 },
+ { year: "2021", revenue: 24_000_000 },
+ { year: "2022", revenue: 26_000_000 },
+];
+
+const bars = [{ dataKey: "revenue", name: "Revenue" }];
+
+/**
+ * Wraps BarChart in a sized parent so the default \`width: "100%"\` resolves
+ * to a measurable size for layout-dependent assertions.
+ */
+export function SizedBarChart(
+ props: Partial<Pick<BarChartProps, "className" | "style">>,
+) {
+ return (
+ <div style={{ width: 480, height: 300 }}>
+ <BarChart data={data} bars={bars} xAxisDataKey="year" {...props} />
+ </div>
+ );
+}
+
+/** Verifies ambient-locale RTL detection (no explicit \`dir\`). */
+export function ArabicLocaleBarChart() {
+ return (
+ <I18nProvider locale="ar-EG">
+ <BarChart data={data} bars={bars} width={480} xAxisDataKey="year" />
+ </I18nProvider>
+ );
+}
+
+/** Verifies the explicit \`dir\` prop wins over the ambient locale. */
+export function ArabicLocaleLtrOverrideBarChart() {
+ return (
+ <I18nProvider locale="ar-EG">
+ <BarChart
+ data={data}
+ bars={bars}
+ dir="ltr"
+ width={480}
+ xAxisDataKey="year"
+ />
+ </I18nProvider>
+ );
+}`},similarTo:[],figmaUrl:null},LineChart:{id:"charts-linechart",breadcrumb:"Charts/LineChart",importStatement:`import { Box } from "@baseline-ui/core";
+import { LineChart } from "@baseline-ui/charts";`,description:"The `LineChart` component renders a responsive line chart for time series or other ordered data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.",documentation:'The `LineChart` component renders a responsive line chart for time series or other ordered data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.\n\n* Renders one or more lines from a single dataset, keyed by `xAxisDataKey` and the per-line `dataKey`.\n* Themed axes, grid, tooltip, and legend styled with Baseline UI tokens \u2014 adapts to light, dark, and high-contrast themes.\n* Default line colors cycle through theme support colors (`info`, `success`, `warning`, `error`); each line can override with a custom `color`.\n* Toggleable tooltip, legend, grid, and axes for compact or sparkline-style charts.\n* Configurable curve interpolation (`monotone`, `linear`, etc.) and per-line stroke width.\n* Responsive by default \u2014 fills the parent container width while preserving the configured `height`.\n* Built-in keyboard navigation across data points via Recharts\' accessibility layer.\n\n```jsx\nimport { LineChart } from "@baseline-ui/charts";\n\nconst data = [\n { month: "Jan", revenue: 4000, expenses: 2400 },\n { month: "Feb", revenue: 3000, expenses: 1398 },\n { month: "Mar", revenue: 5000, expenses: 3200 },\n];\n\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n ]}\n/>;\n```\n\nThe default variant renders a full-width line chart with grid, axes, and tooltip enabled. Use `showLegend` to also render a legend above the chart.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n ]}\n showLegend\n/>\n```\n\nSet `variant="sparkline"` for a compact 40\xD720 inline trend indicator. Grid, axes, tooltip, and legend are hidden by default, the stroke is thinner, and chart margins are reduced to a 1px inset (just enough to prevent stroke clipping) so the line fills the box. Each chrome flag can still be re-enabled individually \u2014 for example, `showTooltip` re-enables the tooltip on a sparkline.\n\n```jsx\n<LineChart\n variant="sparkline"\n data={data}\n xAxisDataKey="month"\n lines={[{ dataKey: "revenue" }]}\n/>\n```\n\nPass a single entry in `lines` to render a single-series chart.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[{ dataKey: "revenue", name: "Revenue" }]}\n/>\n```\n\nDefault line colors cycle through `info` \u2192 `success` \u2192 `warning` \u2192 `error` and wrap modulo four. Provide a `color` per line to override the default.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n { dataKey: "profit", name: "Profit" },\n { dataKey: "tax", name: "Tax" },\n { dataKey: "fees", name: "Fees" },\n ]}\n showLegend\n/>\n```\n\nSet `dot` to `true` on a line to render a marker at each data point.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", dot: true },\n { dataKey: "expenses", name: "Expenses", dot: true },\n ]}\n/>\n```\n\nThe `type` prop on each line controls the curve interpolation. The default is `monotone`; use `linear` for straight segments between points. Any [Recharts curve type](https://recharts.org/en-US/api/Line#type) is supported.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", type: "linear" },\n { dataKey: "expenses", name: "Expenses", type: "linear" },\n ]}\n/>\n```\n\nOverride the default theme colors by passing `color` and `strokeWidth` per line.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", color: "#7c3aed", strokeWidth: 3 },\n { dataKey: "expenses", name: "Expenses", color: "#f59e0b", strokeWidth: 3 },\n ]}\n showLegend\n/>\n```\n\n`showTooltip`, `showGrid`, `showXAxis`, and `showYAxis` toggle the corresponding chart chrome individually. They default to `true` for the default variant and `false` for the `sparkline` variant. Pass an explicit value to override the variant default.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[...]}\n showXAxis={false}\n showYAxis={false}\n showGrid={false}\n/>\n```\n\nThe chart surface is keyboard-focusable on the default variant. When focused via keyboard, the surface shows a focus ring and arrow keys move an indicator across data points, opening the tooltip at each step. The `sparkline` variant disables the accessibility layer and is not focusable.\n\n| Key | Function |\n| ------------- | --------------------------------------------------------------------------- |\n| `Tab` | Moves focus to the chart surface (default variant only). |\n| `Arrow Right` | Advances the active data point one step to the right and shows the tooltip. |\n| `Arrow Left` | Advances the active data point one step to the left and shows the tooltip. |\n| `Escape` | Dismisses the tooltip and clears the active data point. |\n\nThe `sparkline` variant disables the accessibility layer and is not keyboard-navigable.\n\nLineChart shares its legend, tooltip, and surface markup with every other chart in the package. The `BaselineUI-Chart-*` selectors are stable shared hooks; the kind-specific `BaselineUI-LineChart` class lets you scope styles to line charts only. Internal Recharts class names are not part of the public API.\n\n| Selector | Description |\n| ------------------------------------------------- | ------------------------------------------------------------------- |\n| `.BaselineUI-LineChart` | The line-chart root identifier. |\n| `.BaselineUI-LineChart[data-variant="default"]` | Targets only the default variant. |\n| `.BaselineUI-LineChart[data-variant="sparkline"]` | Targets only the sparkline variant. |\n| `.BaselineUI-Chart-Surface` | The chart drawing area that wraps the SVG. |\n| `.BaselineUI-Chart-Legend` | The legend list element. Only rendered when `showLegend` is `true`. |\n| `.BaselineUI-Chart-LegendItem` | A single legend entry \u2014 one per series. |\n| `.BaselineUI-Chart-LegendSwatch` | The colored swatch in a legend entry. |\n| `.BaselineUI-Chart-Tooltip` | The hover/focus tooltip container. |\n| `.BaselineUI-Chart-TooltipItem` | A single series entry in the tooltip. |\n| `.BaselineUI-Chart-TooltipSwatch` | The colored swatch in a tooltip entry. |',props:`interface LineChartProps {
+/**
+ * Additional class name for the chart root.
+ */
+className?: string
+/**
+ * Additional inline styles for the chart root.
+ */
+style?: CSSProperties
+/**
+ * Chart width. @default "100%"
+ */
+width?: number | \`\${number}%\`
+/**
+ * Chart height. @default 300
+ */
+height?: number
+/**
+ * Whether to show the tooltip on hover. @default true
+ */
+showTooltip?: boolean
+/**
+ * Whether to show the legend.
+ */
+showLegend?: boolean
+/**
+ * Defaults to the ambient \`I18nProvider\` locale direction.
+ */
+dir?: "ltr" | "rtl"
+/**
+ * Whether to show the grid lines. @default true
+ */
+showGrid?: boolean
+/**
+ * Whether to show the X axis. @default true
+ */
+showXAxis?: boolean
+/**
+ * Whether to show the Y axis. @default true
+ */
+showYAxis?: boolean
+/**
+ * The data array to render. Each item is an object keyed by \`xAxisDataKey\` and line \`dataKey\` values.
+ */
+data: unknown
+/**
+ * Configuration for each line to render.
+ */
+lines: unknown
+/**
+ * The data key for the X axis.
+ */
+xAxisDataKey: string
+/**
+ * Visual variant. \`"sparkline"\` renders a compact 40\xD720 line with no axes,
+ * grid, tooltip, or legend \u2014 suitable for inline trend indicators.
+ * @default "default"
+ */
+variant?: "default" | "sparkline"
+}`,stories:{usage:[{id:"charts-linechart--basic",name:"Basic",snippet:`const Basic = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320} />;`},{id:"charts-linechart--single-line",name:"Single Line",snippet:`const SingleLine = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[{ dataKey: "revenue", name: "Revenue" }]}
+    height={320} />;`},{id:"charts-linechart--with-legend",name:"With Legend",snippet:`const WithLegend = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    showLegend />;`},{id:"charts-linechart--with-dots",name:"With Dots",snippet:`const WithDots = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue", dot: true },
+      { dataKey: "expenses", name: "Expenses", dot: true },
+    ]}
+    height={320} />;`},{id:"charts-linechart--linear-curve",name:"Linear Curve",snippet:`const LinearCurve = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue", type: "linear" },
+      { dataKey: "expenses", name: "Expenses", type: "linear" },
+    ]}
+    height={320} />;`},{id:"charts-linechart--custom-colors",name:"Custom Colors",snippet:`const CustomColors = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue", color: "#7c3aed", strokeWidth: 3 },
+      {
+        dataKey: "expenses",
+        name: "Expenses",
+        color: "#f59e0b",
+        strokeWidth: 3,
+      },
+    ]}
+    height={320}
+    showLegend />;`},{id:"charts-linechart--many-lines",name:"Many Lines",snippet:`const ManyLines = () => <LineChart
+    data={monthlyData.map((row) => ({
+      ...row,
+      profit: row.revenue - row.expenses,
+      tax: Math.round(row.revenue * 0.18),
+      fees: Math.round(row.revenue * 0.05),
+    }))}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+      { dataKey: "profit", name: "Profit" },
+      { dataKey: "tax", name: "Tax" },
+      { dataKey: "fees", name: "Fees" },
+    ]}
+    height={320}
+    showLegend />;`},{id:"charts-linechart--hidden-axes",name:"Hidden Axes",snippet:`const HiddenAxes = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    showXAxis={false}
+    showYAxis={false}
+    showGrid={false} />;`},{id:"charts-linechart--sparkline",name:"Sparkline",snippet:`const Sparkline = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[{ dataKey: "revenue" }]}
+    height={64}
+    variant="sparkline"
+    width={320} />;`}],implementation:`import React from "react";
+
+import { LineChart } from "../LineChart";
+
+import type { LineChartProps } from "../LineChart.types";
+
+const data = [
+ { month: "Jan", revenue: 4000 },
+ { month: "Feb", revenue: 3000 },
+ { month: "Mar", revenue: 5000 },
+];
+
+const lines = [{ dataKey: "revenue", name: "Revenue" }];
+
+/**
+ * Wraps LineChart in a sized parent so the default \`width: "100%"\` resolves
+ * to a measurable size for layout-dependent assertions.
+ */
+export function SizedLineChart(
+ props: Partial<Pick<LineChartProps, "className" | "style">>,
+) {
+ return (
+ <div style={{ width: 480, height: 300 }}>
+ <LineChart data={data} lines={lines} xAxisDataKey="month" {...props} />
+ </div>
+ );
+}`},similarTo:[],figmaUrl:null},PieChart:{id:"charts-piechart",breadcrumb:"Charts/PieChart",importStatement:`import { Box } from "@baseline-ui/core";
+import { PieChart } from "@baseline-ui/charts";`,description:"The `PieChart` component renders a responsive pie chart for proportional data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.",documentation:'The `PieChart` component renders a responsive pie chart for proportional data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.\n\n* Renders one wedge per slice, sized proportionally to its `value`.\n* Slices are sorted in descending value order \u2014 largest first, regardless of input order. Default colors are assigned by sorted index, so the largest slice always gets the first theme color.\n* Themed slices, tooltip, and legend styled with Baseline UI tokens \u2014 adapts to light, dark, and high-contrast themes.\n* Default slice colors cycle through theme support colors (`info`, `success`, `error`, `warning`); each slice can override with a custom `color`.\n* Inline percentage labels rendered inside each slice, with small slices (under 5%) automatically suppressed.\n* Hover or focus highlights a slice with an enlarged outline rendered behind it; the highlighted slice is brought to the front so its outline isn\'t clipped by neighbors.\n* Donut variant via the `innerRadius` prop.\n* Toggleable tooltip, legend, and labels.\n* Responsive by default \u2014 fills the parent container width while preserving the configured `height`.\n* Built-in keyboard navigation across slices via Recharts\' accessibility layer.\n\n```jsx\nimport { PieChart } from "@baseline-ui/charts";\n\nconst data = [\n { name: "Water", value: 46 },\n { name: "Earth", value: 26 },\n { name: "Wind", value: 18 },\n { name: "Fire", value: 10 },\n];\n\n<PieChart data={data} />;\n```\n\nPass `innerRadius` to render a donut chart instead of a solid pie.\n\n```jsx\n<PieChart data={data} innerRadius={50} />\n```\n\nOverride the default theme colors by passing `color` per slice.\n\n```jsx\n<PieChart\n data={[\n { name: "Water", value: 46, color: "#0ea5e9" },\n { name: "Earth", value: 26, color: "#65a30d" },\n { name: "Wind", value: 18, color: "#a855f7" },\n { name: "Fire", value: 10, color: "#f97316" },\n ]}\n/>\n```\n\nDefault colors cycle through `info` \u2192 `success` \u2192 `error` \u2192 `warning` and wrap modulo four. Provide a `color` per slice to override.\n\nLong names wrap within legend entries.\n\nSlices contributing less than 5% of the total automatically have their inline label suppressed; their value is still visible via the tooltip and legend.\n\nWhen a slice is hovered with a pointer, focused via keyboard, or activated via the accessibility layer, an enlarged copy of the slice is rendered behind the original \u2014 visible as a thin outline that follows the slice\'s outer arc. The active slice is also reordered to render on top of its neighbors so the outline isn\'t clipped.\n\nThe chart surface is keyboard-focusable (single tab stop \u2014 only the SVG surface, not the inner pie group). When focused, arrow keys move an active indicator across slices and open the tooltip at each step.\n\n```jsx\n<PieChart data={data} showTooltip={false} />\n```\n\n```jsx\n<PieChart data={data} showLabels={false} />\n```\n\n```jsx\n<PieChart data={data} showLegend={false} />\n```\n\n| Key | Function |\n| ------------- | ------------------------------------------------------------------ |\n| `Tab` | Moves focus to the chart surface. |\n| `Arrow Right` | Advances the active slice clockwise and shows the tooltip. |\n| `Arrow Left` | Advances the active slice counter-clockwise and shows the tooltip. |\n| `Escape` | Dismisses the tooltip and clears the active slice. |\n\nPieChart shares its legend, tooltip, and surface markup with every other chart in the package. The `BaselineUI-Chart-*` selectors are stable shared hooks; the kind-specific `BaselineUI-PieChart` class lets you scope styles to pie charts only. Internal Recharts class names are not part of the public API.\n\n| Selector | Description |\n| --------------------------------- | ------------------------------------------------------------------- |\n| `.BaselineUI-PieChart` | The pie-chart root identifier. |\n| `.BaselineUI-Chart-Surface` | The chart drawing area that wraps the SVG. |\n| `.BaselineUI-Chart-Legend` | The legend list element. Only rendered when `showLegend` is `true`. |\n| `.BaselineUI-Chart-LegendItem` | A single legend entry \u2014 one per slice. |\n| `.BaselineUI-Chart-LegendSwatch` | The colored swatch in a legend entry. |\n| `.BaselineUI-Chart-Tooltip` | The hover/focus tooltip container. |\n| `.BaselineUI-Chart-TooltipItem` | A single slice entry in the tooltip. |\n| `.BaselineUI-Chart-TooltipSwatch` | The colored swatch in a tooltip entry. |',props:`interface PieChartProps {
+/**
+ * Additional class name for the chart root.
+ */
+className?: string
+/**
+ * Additional inline styles for the chart root.
+ */
+style?: CSSProperties
+/**
+ * Chart width. @default "100%"
+ */
+width?: number | \`\${number}%\`
+/**
+ * Chart height. @default 300
+ */
+height?: number
+/**
+ * Whether to show the tooltip on hover. @default true
+ */
+showTooltip?: boolean
+/**
+ * Whether to show the legend.
+ */
+showLegend?: boolean
+/**
+ * Defaults to the ambient \`I18nProvider\` locale direction.
+ */
+dir?: "ltr" | "rtl"
+/**
+ * The slices to render. Each slice contributes a wedge proportional to \`value\`.
+ */
+data: unknown
+/**
+ * Inner radius in pixels. @default 0
+ */
+innerRadius?: number
+/**
+ * Outer radius in pixels. When omitted, the chart fits the smaller of its
+ * width and height.
+ */
+outerRadius?: number
+/**
+ * Whether to render percentage labels inside each slice. @default true
+ */
+showLabels?: boolean
+}`,stories:{usage:[{id:"charts-piechart--basic",name:"Basic",snippet:"const Basic = () => <PieChart data={elementsData} height={257} />;"},{id:"charts-piechart--no-labels",name:"No Labels",snippet:"const NoLabels = () => <PieChart data={elementsData} height={257} showLabels={false} />;"},{id:"charts-piechart--no-legend",name:"No Legend",snippet:"const NoLegend = () => <PieChart data={elementsData} height={257} showLegend={false} />;"},{id:"charts-piechart--custom-colors",name:"Custom Colors",snippet:`const CustomColors = () => <PieChart
+    data={[
+      { name: "Water", value: 46, color: "#0ea5e9" },
+      { name: "Earth", value: 26, color: "#65a30d" },
+      { name: "Wind", value: 18, color: "#a855f7" },
+      { name: "Fire", value: 10, color: "#f97316" },
+    ]}
+    height={257} />;`},{id:"charts-piechart--many-slices",name:"Many Slices",snippet:`const ManySlices = () => <PieChart
+    data={[
+      { name: "Water", value: 30 },
+      { name: "Earth", value: 22 },
+      { name: "Wind", value: 16 },
+      { name: "Fire", value: 12 },
+      { name: "Aether", value: 10 },
+      { name: "Void", value: 6 },
+      { name: "Light", value: 4 },
+    ]}
+    height={257} />;`},{id:"charts-piechart--donut",name:"Donut",snippet:"const Donut = () => <PieChart data={elementsData} height={257} innerRadius={50} />;"},{id:"charts-piechart--no-tooltip",name:"No Tooltip",snippet:"const NoTooltip = () => <PieChart data={elementsData} height={257} showTooltip={false} />;"},{id:"charts-piechart--long-legend-names",name:"Long Legend Names",snippet:`const LongLegendNames = () => <PieChart
+    data={[
+      { name: "Atmospheric water vapor", value: 46 },
+      { name: "Subterranean rock formations", value: 26 },
+      { name: "High-altitude jet streams", value: 18 },
+      { name: "Volcanic core temperatures", value: 10 },
+    ]}
+    height={257} />;`},{id:"charts-piechart--small-slices-below-five-percent",name:"Small Slices Below Five Percent",snippet:`const SmallSlicesBelowFivePercent = () => <PieChart
+    data={[
+      { name: "Major", value: 92 },
+      { name: "Minor", value: 4 },
+      { name: "Trace", value: 3 },
+      { name: "Edge", value: 1 },
+    ]}
+    height={257} />;`}],implementation:`import { I18nProvider } from "@baseline-ui/core";
+import React from "react";
+
+import { PieChart } from "../PieChart";
+
+import type { PieChartProps } from "../PieChart.types";
+
+const data = [
+ { name: "Water", value: 46 },
+ { name: "Earth", value: 26 },
+ { name: "Wind", value: 18 },
+ { name: "Fire", value: 10 },
+];
+
+/**
+ * Wraps PieChart in a sized parent so the default \`width: "100%"\` resolves
+ * to a measurable size for layout-dependent assertions.
+ */
+export function SizedPieChart(
+ props: Partial<Pick<PieChartProps, "className" | "style">>,
+) {
+ return (
+ <div style={{ width: 320, height: 280 }}>
+ <PieChart data={data} {...props} />
+ </div>
+ );
+}
+
+/** Verifies ambient-locale RTL detection (no explicit \`dir\`). */
+export function ArabicLocalePieChart() {
+ return (
+ <I18nProvider locale="ar-EG">
+ <PieChart data={data} width={320} />
+ </I18nProvider>
+ );
+}
+
+/** Verifies the explicit \`dir\` prop wins over the ambient locale. */
+export function ArabicLocaleLtrOverridePieChart() {
+ return (
+ <I18nProvider locale="ar-EG">
+ <PieChart data={data} dir="ltr" width={320} />
+ </I18nProvider>
+ );
+}`},similarTo:[],figmaUrl:null},Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a component that allows users to toggle the visibility of content. It\u2019s composed of an `Accordion` component and an `AccordionItem` component. The `Accordion` component is a container for the `AccordionItem` components.",documentation:`\`Accordion\` is a component that allows users to toggle the visibility of content. It\u2019s composed of an \`Accordion\` component and an \`AccordionItem\` component. The \`Accordion\` component is a container for the \`AccordionItem\` components.
 
 * Full keyboard navigation
 * It can expand one or multiple items
@@ -1938,11 +2593,10 @@ Boxes can be composed to create layered layouts:
 | ----------------- | ------------------------------------ |
 | \`.BaselineUI-Box\` | Targets all Box component instances. |`,props:`interface BoxProps {
 /**
- * The HTML element to use for the box.
- * 
  * @default "div"
  */
 elementType?: any
+children?: ReactNode
 }`,stories:{usage:[{id:"core-utilities-box--basic",name:"Basic",snippet:`const Basic = () => <Box
     borderRadius="md"
     backgroundColor="background.primary.medium"
@@ -2948,6 +3602,18 @@ children: React.ReactNode
       "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
     }
   }\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"The `ColorInput` component is used to select a color. You can use the `ColorInput` component to select a color from a predefined set of colors, or to select a custom color.",documentation:'The `ColorInput` component is used to select a color. You can use the `ColorInput` component to select a color from a predefined set of colors, or to select a custom color.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n> **Note:** `bui.colorInput.indeterminate` is not present in the bundled locale JSON files \u2014 it relies on its `defaultMessage` as fallback. Override it via `I18nProvider.messages` when you need a custom string for the indeterminate state.\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
+/**
+ * Whether the overlay is open by default (controlled).
+ */
+isOpen?: boolean
+/**
+ * Whether the overlay is open by default (uncontrolled).
+ */
+defaultOpen?: boolean
+/**
+ * Handler that is called when the overlay's open state changes.
+ */
+onOpenChange?: (isOpen: boolean) => void
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -5151,6 +5817,11 @@ By default, the \`Dialog\` component traps focus within the dialog. This means t
 | -------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | <kbd>Esc</kbd> | Close the dialog |
 | <kbd>Tab</kbd> | Move focus to the next focusable element in the dialog. If focus is on the last element, move focus to the first focusable element. |`,props:`interface DialogProps {
+/**
+ * The accessibility role for the dialog.
+ * @default 'dialog'
+ */
+role?: 'dialog' | 'alertdialog'
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -5931,6 +6602,11 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
+/**
+ * The accessibility role for the dialog.
+ * @default 'dialog'
+ */
+role?: 'dialog' | 'alertdialog'
 /**
  * The children to render.
  */
@@ -7925,18 +8601,8 @@ children: React.ReactNode
  * The locale to apply to the children.
  */
 locale?: string
+messages?: LocalizedStrings
 /**
- * The messages to use for internationalization.
- */
-messages?: {
-  [lang: string]: {
-    [key: string]: string
-  }
-}
-/**
- * Whether to log messages when translations in the current locale are
- * missing.
- * 
  * @default true
  */
 shouldLogMissingMessages?: boolean
@@ -10882,6 +11548,23 @@ const items = [
 The \`Menu\` component can be controlled or uncontrolled. When uncontrolled, the component manages its own state internally. When controlled, the state is managed by the parent component. To control the component, set the \`selectedKeys\` prop to an array of item IDs. The value of the selected keys must match the \`id\` prop of the items.
 
 The \`Menu\` component can be controlled or uncontrolled. When uncontrolled, the component manages its own state internally. When controlled, the state is managed by the parent component. To control the component, set the \`isOpen\` prop to a boolean value.`,props:`interface MenuProps {
+/**
+ * Whether the overlay is open by default (controlled).
+ */
+isOpen?: boolean
+/**
+ * Whether the overlay is open by default (uncontrolled).
+ */
+defaultOpen?: boolean
+/**
+ * Handler that is called when the overlay's open state changes.
+ */
+onOpenChange?: (isOpen: boolean) => void
+/**
+ * How the menu is triggered.
+ * @default 'press'
+ */
+trigger?: 'press' | 'longPress'
 /**
  * The \`className\` property assigned to the root element of the component.
  */
@@ -11077,6 +11760,18 @@ You can add a close button to the dialog by adding a \`ModalClose\` component to
 | Key | Function |
 | -------------- | ---------------- |
 | <kbd>Esc</kbd> | Close the dialog |`,props:`interface ModalProps {
+/**
+ * Whether the overlay is open by default (controlled).
+ */
+isOpen?: boolean
+/**
+ * Whether the overlay is open by default (uncontrolled).
+ */
+defaultOpen?: boolean
+/**
+ * Handler that is called when the overlay's open state changes.
+ */
+onOpenChange?: (isOpen: boolean) => void
 /**
  * The contents of the modal.
  */
@@ -13568,6 +14263,18 @@ This is particularly useful when:
 * The trigger element moves due to CSS transforms or animations
 * The layout changes dynamically via JavaScript
 * You need to keep the popover attached to a moving target`,props:`interface PopoverProps {
+/**
+ * Whether the overlay is open by default (controlled).
+ */
+isOpen?: boolean
+/**
+ * Whether the overlay is open by default (uncontrolled).
+ */
+defaultOpen?: boolean
+/**
+ * Handler that is called when the overlay's open state changes.
+ */
+onOpenChange?: (isOpen: boolean) => void
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -16707,7 +17414,7 @@ import { Separator } from "../../utils";
  * The orientation of the separator.
  * @default 'horizontal'
  */
-orientation?: Orientation
+orientation?: "horizontal" | "vertical"
 /**
  * The HTML element type that will be used to render the separator.
  */
@@ -16736,14 +17443,10 @@ className?: string
  */
 style?: React.CSSProperties
 /**
- * The variant of the separator.
- * 
  * @default "primary"
  */
 variant?: "primary" | "secondary"
 /**
- * Whether to omit the role attribute.
- * 
  * @default false
  * @internal
  */
@@ -22233,16 +22936,6 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
-/**
- * The orientation of the entire toolbar.
- * @default 'horizontal'
- */
-orientation?: Orientation
-/**
- * Allows tabbing through the toolbar's content when false.
- * @default true
- */
-isSingleTabStop?: boolean
 /**
  * The children of the toolbar.
  */
@@ -22278,6 +22971,18 @@ renderSpacer?: boolean
  * The callback to call when any key is pressed.
  */
 onKeyDown?: KeyboardProps["onKeyDown"]
+/**
+ * When set to true, the toolbar will act as a normal toolbar and will not
+ * contain the navigation within it when the user presses tab again.
+ * 
+ * When set to false, the toolbar will allow for navigating through all
+ * elements within it if the user presses tab, and move to the next focusable
+ * element outside of the toolbar only after user navigates through all
+ * elements within the toolbar.
+ * 
+ * @default true
+ */
+isSingleTabStop?: boolean
 }`,stories:{usage:[{id:"core-miscellaneous-toolbar--basic",name:"Basic",snippet:'const Basic = () => <Toolbar style={{ display: "flex", flexDirection: "row", alignItems: "center" }}><ToolbarChildren /></Toolbar>;'},{id:"core-miscellaneous-toolbar--vertical",name:"Vertical",snippet:`const Vertical = () => <Toolbar
     orientation="vertical"
     style={{ display: "flex", flexDirection: "column", alignItems: "center" }} />;`},{id:"core-miscellaneous-toolbar--with-tooltip",name:"With Tooltip",snippet:"const WithTooltip = () => <Toolbar><ChildrenWithTooltip /></Toolbar>;"},{id:"core-miscellaneous-toolbar--with-over-flow",name:"With Over Flow",snippet:'const WithOverFlow = () => <Toolbar style={{ width: "max-content", display: "flex", alignItems: "center" }} />;'},{id:"core-miscellaneous-toolbar--with-tabbing-within",name:"With Tabbing Within",snippet:`const WithTabbingWithin = () => <Toolbar
@@ -22654,6 +23359,42 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
+/**
+ * Whether the overlay is open by default (controlled).
+ */
+isOpen?: boolean
+/**
+ * Whether the overlay is open by default (uncontrolled).
+ */
+defaultOpen?: boolean
+/**
+ * Handler that is called when the overlay's open state changes.
+ */
+onOpenChange?: (isOpen: boolean) => void
+/**
+ * Whether the tooltip should be disabled, independent from the trigger.
+ */
+isDisabled?: boolean
+/**
+ * The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance).
+ * @default 1500
+ */
+delay?: number
+/**
+ * The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown).
+ * @default 500
+ */
+closeDelay?: number
+/**
+ * By default, opens for both focus and hover. Can be made to open only for focus.
+ * @default 'hover'
+ */
+trigger?: 'hover' | 'focus'
+/**
+ * Whether the tooltip should close when the trigger is pressed.
+ * @default true
+ */
+shouldCloseOnPress?: boolean
 /**
  * The content of the tooltip.
  */
@@ -22666,18 +23407,6 @@ children: | React.ReactNode
     triggerProps: DOMAttributes;
     triggerRef: React.RefObject<HTMLElement>;
   }) => React.ReactNode)
-/**
- * The delay time for the tooltip to show up.
- * 
- * @default 1000
- */
-delay?: number
-/**
- * The delay time for the tooltip to hide.
- * 
- * @default 500
- */
-closeDelay?: number
 /**
  * Represents the size of an element.
  * 
@@ -29364,7 +30093,45 @@ Import the following files at the top of your stylesheet to use the Baseline UI
 }
 \`\`\`
 
-Make sure the class names present in this stylesheet aren\u2019t changed by your bundler during the build process.`,nutrientWebViewerTheming:`# Nutrient Web Viewer theming
+Make sure the class names present in this stylesheet aren\u2019t changed by your bundler during the build process.
+
+## Charts
+
+Chart components live in a separate package so projects that don\u2019t need data visualizations don\u2019t pay the bundle cost. Install it alongside the core packages:
+
+\`\`\`bash
+npm install @baseline-ui/charts recharts
+\`\`\`
+
+\`recharts\` is a peer dependency, so it must be installed in the host app.
+
+Import the chart styles in addition to the core styles:
+
+\`\`\`css
+@import "@baseline-ui/tokens/dist/index.css";
+@import "@baseline-ui/core/dist/index.css";
+@import "@baseline-ui/charts/dist/index.css";
+\`\`\`
+
+Then use the components from \`@baseline-ui/charts\`:
+
+\`\`\`jsx
+import { BarChart, LineChart, PieChart } from "@baseline-ui/charts";
+
+<LineChart
+ width="100%"
+ height={300}
+ xAxisDataKey="month"
+ data={[
+ { month: "Jan", users: 400 },
+ { month: "Feb", users: 600 },
+ { month: "Mar", users: 820 },
+ { month: "Apr", users: 1100 },
+ ]}
+ lines={[{ dataKey: "users", name: "Users" }]}
+ showLegend
+/>;
+\`\`\``,nutrientWebViewerTheming:`# Nutrient Web Viewer theming
 
 Nutrient Web Viewer provides a comprehensive theming system that enables consistent styling across your application. This guide covers how to use and customize themes to match your application\u2019s design requirements.
 
@@ -30544,7 +31311,7 @@ padding={[null, "lg", "xl"]}
 
 * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
 * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
-* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"0.58.0"};var u=`
+* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"0.60.0"};var u=`
 # Baseline UI MCP Server Guidelines
 
 This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
@@ -30651,7 +31418,7 @@ import { ComponentName } from "@baseline-ui/core";
 Generate a live demo URL for a Baseline UI story. Use story IDs from the component info tool to view interactive examples. The response will be a string containing the URL. You can use this URL to understand the structure of the component and how to customize it.
 `,b=`
 Get the Figma URL for a given component. The response will be a string containing the URL. You can use this URL to understand the structure of the component and how it looks. The actual component's HTML structure might be slightly different from the Figma design but the overall structure and design should be the same including the design tokens.
-`,l=`
+`,s=`
 Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
 
 ## Usage
@@ -30659,7 +31426,7 @@ Best practices and guidelines for using Baseline UI components, styling, and des
 Use this resource to:
 - Understand best practices for using Baseline UI components
 - Understand styling guidelines for using Baseline UI components
-`,s=`
+`,l=`
 A guide for implementing styling elements in Baseline UI components or applying styling to existing components. READ THIS BEFORE DOING ANYTHING.
 `,g=`
 List all 8 available resources in the Baseline UI MCP server with their descriptions and URIs. Use this tool to discover what information and documentation is available.
@@ -30708,4 +31475,4 @@ ${Object.entries(o).toSorted(([n],[t])=>n.localeCompare(t)).map(([n,{description
 
       ${t.map(e=>"- "+e).join(`
 `)}`).join(`
-`);async function S(){let n=new mcp_js.McpServer({name:"baseline-ui",version:p.version});n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([f])=>!["description","similarTo","figmaUrl"].includes(f))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:zod.z.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:o[e].figmaUrl}]})),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:s,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:l,mimeType:"text/markdown"}],null,2)}]}));let t=new stdio_js.StdioServerTransport;await n.connect(t);}(async()=>await S())();
+`);async function S(){let n=new mcp_js.McpServer({name:"baseline-ui",version:p.version});n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([f])=>!["description","similarTo","figmaUrl"].includes(f))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:zod.z.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:o[e].figmaUrl}]})),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:l,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:s,mimeType:"text/markdown"}],null,2)}]}));let t=new stdio_js.StdioServerTransport;await n.connect(t);}(async()=>await S())();